update: add DescriptionFieldTemplate

dist/other/rjsf/RJSForm.js

@@ -3,6 +3,7 @@ import React from "react";
 import ArrayFieldItemTemplate from "./templates/ArrayFieldItemTemplate";
 import ArrayFieldTemplate from "./templates/ArrayFieldTemplate";
 import BaseInputTemplate from "./templates/BaseInputTemplate";
+import DescriptionFieldTemplate from "./templates/DescriptionFieldTemplate";
 import ObjectFieldTemplate from "./templates/ObjectFieldTemplate";
 import TitleFieldTemplate from "./templates/TitleFieldTemplate";
 import SelectWidget from "./widgets/SelectWidget";
@@ -13,6 +14,7 @@ export default function RJSForm({ widgets, templates, ...props }) {
             ArrayFieldTemplate,
             ArrayFieldItemTemplate,
             TitleFieldTemplate,
+            DescriptionFieldTemplate,
             ...templates,
         }, widgets: { SelectWidget, ...widgets } }));
 }

dist/other/rjsf/templates/DescriptionFieldTemplate.d.ts

@@ -0,0 +1,7 @@
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
+import React from "react";
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionFieldTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: DescriptionFieldProps<T, S, F>): React.JSX.Element | null;

dist/other/rjsf/templates/DescriptionFieldTemplate.js

@@ -0,0 +1,14 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import Typography from "@mui/material/Typography";
+import React from "react";
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionFieldTemplate(props) {
+    const { id, description } = props;
+    if (description) {
+        return (React.createElement(Typography, { id: id, variant: "subtitle2", style: { marginTop: "5px" } }, description));
+    }
+    return null;
+}

src/other/rjsf/RJSForm.tsx

@@ -8,6 +8,7 @@ import React from "react";
 import ArrayFieldItemTemplate from "./templates/ArrayFieldItemTemplate";
 import ArrayFieldTemplate from "./templates/ArrayFieldTemplate";
 import BaseInputTemplate from "./templates/BaseInputTemplate";
+import DescriptionFieldTemplate from "./templates/DescriptionFieldTemplate";
 import ObjectFieldTemplate from "./templates/ObjectFieldTemplate";
 import TitleFieldTemplate from "./templates/TitleFieldTemplate";
 import SelectWidget from "./widgets/SelectWidget";
@@ -22,6 +23,7 @@ export default function RJSForm({ widgets, templates, ...props }: FormProps<any,
                 ArrayFieldTemplate,
                 ArrayFieldItemTemplate,
                 TitleFieldTemplate,
+                DescriptionFieldTemplate,
                 ...templates,
             }}
             widgets={{ SelectWidget, ...widgets }}

src/other/rjsf/templates/DescriptionFieldTemplate.tsx

@@ -0,0 +1,25 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import Typography from "@mui/material/Typography";
+import { DescriptionFieldProps, FormContextType, RJSFSchema, StrictRJSFSchema } from "@rjsf/utils";
+import React from "react";
+
+/** The `DescriptionField` is the template to use to render the description of a field
+ *
+ * @param props - The `DescriptionFieldProps` for this component
+ */
+export default function DescriptionFieldTemplate<
+    T = any,
+    S extends StrictRJSFSchema = RJSFSchema,
+    F extends FormContextType = any,
+>(props: DescriptionFieldProps<T, S, F>) {
+    const { id, description } = props;
+    if (description) {
+        return (
+            <Typography id={id} variant="subtitle2" style={{ marginTop: "5px" }}>
+                {description}
+            </Typography>
+        );
+    }
+
+    return null;
+}