@rjsf/chakra-ui 6.0.1 → 6.1.0

package/dist/chakra-ui.umd.js

@@ -273,12 +273,11 @@
     });
   }
   function FieldHelpTemplate(props) {
-    const { fieldPathId, help } = props;
+    const { fieldPathId, help, uiSchema, registry } = props;
     if (!help) {
       return null;
     }
-    const id = utils.helpId(fieldPathId);
-    return /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { id, children: help });
+    return /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { as: "sup", fontSize: "md", id: utils.helpId(fieldPathId), children: /* @__PURE__ */ jsxRuntime.jsx(core.RichHelp, { help, registry, uiSchema }) });
   }
   function FieldTemplate(props) {
     const {
@@ -321,6 +320,8 @@
         disabled,
         id,
         label,
+        displayLabel,
+        rawDescription,
         onKeyRename,
         onKeyRenameBlur,
         onRemoveProperty,
@@ -484,10 +485,12 @@
       classNames,
       style,
       disabled,
+      displayLabel,
       id,
       label,
       onRemoveProperty,
       onKeyRenameBlur,
+      rawDescription,
       readonly,
       registry,
       required,
@@ -496,37 +499,50 @@
     } = props;
     const { templates, translateString } = registry;
     const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
-    const keyLabel = translateString(utils.TranslatableString.KeyLabel, [label]);
+    const keyLabel = displayLabel ? translateString(utils.TranslatableString.KeyLabel, [label]) : void 0;
     const additional = utils.ADDITIONAL_PROPERTY_FLAG in schema;
+    const hasDescription = !!rawDescription;
+    const margin = hasDescription ? 58 : 22;
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(react$1.Grid, { className: classNames, style, alignItems: "center", gap: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { children: /* @__PURE__ */ jsxRuntime.jsx(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsxRuntime.jsx(
-        react$1.Input,
-        {
-          defaultValue: label,
-          disabled: disabled || readonly,
-          id: `${id}-key`,
-          name: `${id}-key`,
-          onBlur: !readonly ? onKeyRenameBlur : void 0,
-          type: "text",
-          mb: 1
-        }
-      ) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { children }),
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { children: /* @__PURE__ */ jsxRuntime.jsx(
-        RemoveButton2,
-        {
-          id: utils.buttonId(id, "remove"),
-          className: "rjsf-object-property-remove",
-          disabled: disabled || readonly,
-          onClick: onRemoveProperty,
-          uiSchema,
-          registry
-        }
-      ) })
-    ] }, `${id}-key`);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      react$1.Grid,
+      {
+        templateColumns: "repeat(11, 1fr)",
+        className: classNames,
+        style,
+        alignItems: "center",
+        gap: 2,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { colSpan: 5, style: { marginTop: hasDescription ? "36px" : void 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.Input,
+            {
+              defaultValue: label,
+              disabled: disabled || readonly,
+              id: `${id}-key`,
+              name: `${id}-key`,
+              onBlur: !readonly ? onKeyRenameBlur : void 0,
+              type: "text",
+              mb: 1
+            }
+          ) }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { colSpan: 5, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { justifySelf: "flex-end", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RemoveButton2,
+            {
+              id: utils.buttonId(id, "remove"),
+              className: "rjsf-object-property-remove",
+              disabled: disabled || readonly,
+              onClick: onRemoveProperty,
+              uiSchema,
+              registry
+            }
+          ) })
+        ]
+      },
+      `${id}-key`
+    );
   }
 
   // src/Templates/Templates.ts
@@ -639,7 +655,9 @@
       registry,
       options
     );
-    const description = options.description || schema.description;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const isCheckbox = uiOptions.widget === "checkbox";
+    const description = isCheckbox ? void 0 : options.description ?? schema.description;
     const _onChange = ({ checked }) => onChange(checked);
     const _onBlur = ({ target }) => onBlur(id, target && target.checked);
     const _onFocus = ({ target }) => onFocus(id, target && target.checked);
@@ -684,8 +702,8 @@
       onFocus,
       required,
       label,
-      hideLabel,
       rawErrors = [],
+      hideLabel,
       uiSchema
     } = props;
     const { enumOptions, enumDisabled, emptyValue } = options;
@@ -694,40 +712,42 @@
     const row = options ? options.inline : false;
     const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, true);
     const chakraProps = getChakra({ });
-    return /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsxs(
       react$1.FieldsetRoot,
       {
         mb: 1,
         disabled: disabled || readonly,
         invalid: rawErrors && rawErrors.length > 0,
         ...chakraProps,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          react$1.CheckboxGroup,
-          {
-            onValueChange: (option) => onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue)),
-            value: selectedIndexes,
-            "aria-describedby": utils.ariaDescribedByIds(id),
-            readOnly: readonly,
-            required,
-            label: utils.labelValue(label, hideLabel || !label),
-            children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-              const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-              return /* @__PURE__ */ jsxRuntime.jsx(
-                Checkbox,
-                {
-                  id: utils.optionId(id, index),
-                  name: htmlName || id,
-                  value: String(index),
-                  disabled: disabled || itemDisabled || readonly,
-                  onBlur: _onBlur,
-                  onFocus: _onFocus,
-                  children: option.label && /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: option.label })
-                },
-                index
-              );
-            }) })
-          }
-        )
+        children: [
+          !hideLabel && label && /* @__PURE__ */ jsxRuntime.jsx(react$1.FieldsetLegend, { children: utils.labelValue(label) }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            react$1.CheckboxGroup,
+            {
+              onValueChange: (option) => onChange(utils.enumOptionsValueForIndex(option, enumOptions, emptyValue)),
+              value: selectedIndexes,
+              "aria-describedby": utils.ariaDescribedByIds(id),
+              readOnly: readonly,
+              required,
+              children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+                const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+                return /* @__PURE__ */ jsxRuntime.jsx(
+                  Checkbox,
+                  {
+                    id: utils.optionId(id, index),
+                    name: htmlName || id,
+                    value: String(index),
+                    disabled: disabled || itemDisabled || readonly,
+                    onBlur: _onBlur,
+                    onFocus: _onFocus,
+                    children: option.label && /* @__PURE__ */ jsxRuntime.jsx(react$1.Text, { children: option.label })
+                  },
+                  index
+                );
+              }) })
+            }
+          )
+        ]
       }
     );
   }

package/dist/index.cjs

@@ -45,7 +45,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/Form/Form.tsx
-var import_core2 = require("@rjsf/core");
+var import_core3 = require("@rjsf/core");
 
 // src/AddButton/AddButton.tsx
 var import_utils = require("@rjsf/utils");
@@ -389,14 +389,14 @@ function FieldErrorTemplate(props) {
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
 var import_react17 = require("@chakra-ui/react");
 var import_utils9 = require("@rjsf/utils");
+var import_core2 = require("@rjsf/core");
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema, registry } = props;
   if (!help) {
     return null;
   }
-  const id = (0, import_utils9.helpId)(fieldPathId);
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react17.Text, { id, children: help });
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react17.Text, { as: "sup", fontSize: "md", id: (0, import_utils9.helpId)(fieldPathId), children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_core2.RichHelp, { help, registry, uiSchema }) });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
@@ -444,6 +444,8 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
+      displayLabel,
+      rawDescription,
       onKeyRename,
       onKeyRenameBlur,
       onRemoveProperty,
@@ -638,10 +640,12 @@ function WrapIfAdditionalTemplate(props) {
     classNames,
     style,
     disabled,
+    displayLabel,
     id,
     label,
     onRemoveProperty,
     onKeyRenameBlur,
+    rawDescription,
     readonly,
     registry,
     required,
@@ -650,37 +654,50 @@ function WrapIfAdditionalTemplate(props) {
   } = props;
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
-  const keyLabel = translateString(import_utils13.TranslatableString.KeyLabel, [label]);
+  const keyLabel = displayLabel ? translateString(import_utils13.TranslatableString.KeyLabel, [label]) : void 0;
   const additional = import_utils13.ADDITIONAL_PROPERTY_FLAG in schema;
+  const hasDescription = !!rawDescription;
+  const margin = hasDescription ? 58 : 22;
   if (!additional) {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: classNames, style, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react24.Grid, { className: classNames, style, alignItems: "center", gap: 2, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react24.GridItem, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Field, { required, label: keyLabel, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      import_react24.Input,
-      {
-        defaultValue: label,
-        disabled: disabled || readonly,
-        id: `${id}-key`,
-        name: `${id}-key`,
-        onBlur: !readonly ? onKeyRenameBlur : void 0,
-        type: "text",
-        mb: 1
-      }
-    ) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react24.GridItem, { children }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react24.GridItem, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
-      RemoveButton2,
-      {
-        id: (0, import_utils13.buttonId)(id, "remove"),
-        className: "rjsf-object-property-remove",
-        disabled: disabled || readonly,
-        onClick: onRemoveProperty,
-        uiSchema,
-        registry
-      }
-    ) })
-  ] }, `${id}-key`);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+    import_react24.Grid,
+    {
+      templateColumns: "repeat(11, 1fr)",
+      className: classNames,
+      style,
+      alignItems: "center",
+      gap: 2,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react24.GridItem, { colSpan: 5, style: { marginTop: hasDescription ? "36px" : void 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Field, { required, label: keyLabel, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          import_react24.Input,
+          {
+            defaultValue: label,
+            disabled: disabled || readonly,
+            id: `${id}-key`,
+            name: `${id}-key`,
+            onBlur: !readonly ? onKeyRenameBlur : void 0,
+            type: "text",
+            mb: 1
+          }
+        ) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react24.GridItem, { colSpan: 5, children }),
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react24.GridItem, { justifySelf: "flex-end", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+          RemoveButton2,
+          {
+            id: (0, import_utils13.buttonId)(id, "remove"),
+            className: "rjsf-object-property-remove",
+            disabled: disabled || readonly,
+            onClick: onRemoveProperty,
+            uiSchema,
+            registry
+          }
+        ) })
+      ]
+    },
+    `${id}-key`
+  );
 }
 
 // src/Templates/Templates.ts
@@ -813,7 +830,9 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const description = options.description || schema.description;
+  const uiOptions = (0, import_utils16.getUiOptions)(uiSchema);
+  const isCheckbox = uiOptions.widget === "checkbox";
+  const description = isCheckbox ? void 0 : options.description ?? schema.description;
   const _onChange = ({ checked }) => onChange(checked);
   const _onBlur = ({ target }) => onBlur(id, target && target.checked);
   const _onFocus = ({ target }) => onFocus(id, target && target.checked);
@@ -863,8 +882,8 @@ function CheckboxesWidget(props) {
     onFocus,
     required,
     label,
-    hideLabel,
     rawErrors = [],
+    hideLabel,
     uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
@@ -873,40 +892,42 @@ function CheckboxesWidget(props) {
   const row = options ? options.inline : false;
   const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, true);
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     import_react29.FieldsetRoot,
     {
       mb: 1,
       disabled: disabled || readonly,
       invalid: rawErrors && rawErrors.length > 0,
       ...chakraProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react29.CheckboxGroup,
-        {
-          onValueChange: (option) => onChange((0, import_utils18.enumOptionsValueForIndex)(option, enumOptions, emptyValue)),
-          value: selectedIndexes,
-          "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
-          readOnly: readonly,
-          required,
-          label: (0, import_utils18.labelValue)(label, hideLabel || !label),
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react29.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
-            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-            return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-              Checkbox,
-              {
-                id: (0, import_utils18.optionId)(id, index),
-                name: htmlName || id,
-                value: String(index),
-                disabled: disabled || itemDisabled || readonly,
-                onBlur: _onBlur,
-                onFocus: _onFocus,
-                children: option.label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react29.Text, { children: option.label })
-              },
-              index
-            );
-          }) })
-        }
-      )
+      children: [
+        !hideLabel && label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react29.FieldsetLegend, { children: (0, import_utils18.labelValue)(label) }),
+        /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+          import_react29.CheckboxGroup,
+          {
+            onValueChange: (option) => onChange((0, import_utils18.enumOptionsValueForIndex)(option, enumOptions, emptyValue)),
+            value: selectedIndexes,
+            "aria-describedby": (0, import_utils18.ariaDescribedByIds)(id),
+            readOnly: readonly,
+            required,
+            children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react29.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+              const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+              return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+                Checkbox,
+                {
+                  id: (0, import_utils18.optionId)(id, index),
+                  name: htmlName || id,
+                  value: String(index),
+                  disabled: disabled || itemDisabled || readonly,
+                  onBlur: _onBlur,
+                  onFocus: _onFocus,
+                  children: option.label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react29.Text, { children: option.label })
+                },
+                index
+              );
+            }) })
+          }
+        )
+      ]
     }
   );
 }
@@ -1484,7 +1505,7 @@ var Theme_default = generateTheme();
 
 // src/Form/Form.tsx
 function generateForm() {
-  return (0, import_core2.withTheme)(generateTheme());
+  return (0, import_core3.withTheme)(generateTheme());
 }
 var Form_default = generateForm();