@rjsf/chakra-ui 6.0.1 → 6.1.0

package/dist/chakra-ui.esm.js

@@ -355,14 +355,14 @@ function FieldErrorTemplate(props) {
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
 import { Text as Text2 } from "@chakra-ui/react";
 import { helpId } from "@rjsf/utils";
+import { RichHelp } from "@rjsf/core";
 import { jsx as jsx13 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
-  const { fieldPathId, help } = props;
+  const { fieldPathId, help, uiSchema, registry } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(fieldPathId);
-  return /* @__PURE__ */ jsx13(Text2, { id, children: help });
+  return /* @__PURE__ */ jsx13(Text2, { as: "sup", fontSize: "md", id: helpId(fieldPathId), children: /* @__PURE__ */ jsx13(RichHelp, { help, registry, uiSchema }) });
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
@@ -413,6 +413,8 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
+      displayLabel,
+      rawDescription,
       onKeyRename,
       onKeyRenameBlur,
       onRemoveProperty,
@@ -618,10 +620,12 @@ function WrapIfAdditionalTemplate(props) {
     classNames,
     style,
     disabled,
+    displayLabel,
     id,
     label,
     onRemoveProperty,
     onKeyRenameBlur,
+    rawDescription,
     readonly,
     registry,
     required,
@@ -630,37 +634,50 @@ function WrapIfAdditionalTemplate(props) {
   } = props;
   const { templates, translateString } = registry;
   const { RemoveButton: RemoveButton2 } = templates.ButtonTemplates;
-  const keyLabel = translateString(TranslatableString4.KeyLabel, [label]);
+  const keyLabel = displayLabel ? translateString(TranslatableString4.KeyLabel, [label]) : void 0;
   const additional = ADDITIONAL_PROPERTY_FLAG in schema;
+  const hasDescription = !!rawDescription;
+  const margin = hasDescription ? 58 : 22;
   if (!additional) {
     return /* @__PURE__ */ jsx21("div", { className: classNames, style, children });
   }
-  return /* @__PURE__ */ jsxs11(Grid4, { className: classNames, style, alignItems: "center", gap: 2, children: [
-    /* @__PURE__ */ jsx21(GridItem4, { children: /* @__PURE__ */ jsx21(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsx21(
-      Input2,
-      {
-        defaultValue: label,
-        disabled: disabled || readonly,
-        id: `${id}-key`,
-        name: `${id}-key`,
-        onBlur: !readonly ? onKeyRenameBlur : void 0,
-        type: "text",
-        mb: 1
-      }
-    ) }) }),
-    /* @__PURE__ */ jsx21(GridItem4, { children }),
-    /* @__PURE__ */ jsx21(GridItem4, { children: /* @__PURE__ */ jsx21(
-      RemoveButton2,
-      {
-        id: buttonId3(id, "remove"),
-        className: "rjsf-object-property-remove",
-        disabled: disabled || readonly,
-        onClick: onRemoveProperty,
-        uiSchema,
-        registry
-      }
-    ) })
-  ] }, `${id}-key`);
+  return /* @__PURE__ */ jsxs11(
+    Grid4,
+    {
+      templateColumns: "repeat(11, 1fr)",
+      className: classNames,
+      style,
+      alignItems: "center",
+      gap: 2,
+      children: [
+        /* @__PURE__ */ jsx21(GridItem4, { colSpan: 5, style: { marginTop: hasDescription ? "36px" : void 0 }, children: /* @__PURE__ */ jsx21(Field, { required, label: keyLabel, children: /* @__PURE__ */ jsx21(
+          Input2,
+          {
+            defaultValue: label,
+            disabled: disabled || readonly,
+            id: `${id}-key`,
+            name: `${id}-key`,
+            onBlur: !readonly ? onKeyRenameBlur : void 0,
+            type: "text",
+            mb: 1
+          }
+        ) }) }),
+        /* @__PURE__ */ jsx21(GridItem4, { colSpan: 5, children }),
+        /* @__PURE__ */ jsx21(GridItem4, { justifySelf: "flex-end", style: { marginTop: displayLabel ? `${margin}px` : void 0 }, children: /* @__PURE__ */ jsx21(
+          RemoveButton2,
+          {
+            id: buttonId3(id, "remove"),
+            className: "rjsf-object-property-remove",
+            disabled: disabled || readonly,
+            onClick: onRemoveProperty,
+            uiSchema,
+            registry
+          }
+        ) })
+      ]
+    },
+    `${id}-key`
+  );
 }
 
 // src/Templates/Templates.ts
@@ -762,7 +779,8 @@ import {
   descriptionId as descriptionId2,
   getTemplate as getTemplate5,
   labelValue as labelValue2,
-  schemaRequiresTrueValue
+  schemaRequiresTrueValue,
+  getUiOptions as getUiOptions5
 } from "@rjsf/utils";
 
 // src/components/ui/checkbox.tsx
@@ -803,7 +821,9 @@ function CheckboxWidget(props) {
     registry,
     options
   );
-  const description = options.description || schema.description;
+  const uiOptions = getUiOptions5(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);
@@ -837,15 +857,15 @@ function CheckboxWidget(props) {
 }
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
-import { CheckboxGroup, FieldsetRoot as FieldsetRoot2, Stack, Text as Text4 } from "@chakra-ui/react";
+import { CheckboxGroup, FieldsetRoot as FieldsetRoot2, Stack, Text as Text4, FieldsetLegend } from "@chakra-ui/react";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex,
-  labelValue as labelValue3,
-  optionId
+  optionId,
+  labelValue as labelValue3
 } from "@rjsf/utils";
-import { jsx as jsx26 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
@@ -859,8 +879,8 @@ function CheckboxesWidget(props) {
     onFocus,
     required,
     label,
-    hideLabel,
     rawErrors = [],
+    hideLabel,
     uiSchema
   } = props;
   const { enumOptions, enumDisabled, emptyValue } = options;
@@ -869,40 +889,42 @@ function CheckboxesWidget(props) {
   const row = options ? options.inline : false;
   const selectedIndexes = enumOptionsIndexForValue(value, enumOptions, true);
   const chakraProps = getChakra({ uiSchema });
-  return /* @__PURE__ */ jsx26(
+  return /* @__PURE__ */ jsxs15(
     FieldsetRoot2,
     {
       mb: 1,
       disabled: disabled || readonly,
       invalid: rawErrors && rawErrors.length > 0,
       ...chakraProps,
-      children: /* @__PURE__ */ jsx26(
-        CheckboxGroup,
-        {
-          onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
-          value: selectedIndexes,
-          "aria-describedby": ariaDescribedByIds3(id),
-          readOnly: readonly,
-          required,
-          label: labelValue3(label, hideLabel || !label),
-          children: /* @__PURE__ */ jsx26(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__ */ jsx26(
-              Checkbox,
-              {
-                id: optionId(id, index),
-                name: htmlName || id,
-                value: String(index),
-                disabled: disabled || itemDisabled || readonly,
-                onBlur: _onBlur,
-                onFocus: _onFocus,
-                children: option.label && /* @__PURE__ */ jsx26(Text4, { children: option.label })
-              },
-              index
-            );
-          }) })
-        }
-      )
+      children: [
+        !hideLabel && label && /* @__PURE__ */ jsx26(FieldsetLegend, { children: labelValue3(label) }),
+        /* @__PURE__ */ jsx26(
+          CheckboxGroup,
+          {
+            onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
+            value: selectedIndexes,
+            "aria-describedby": ariaDescribedByIds3(id),
+            readOnly: readonly,
+            required,
+            children: /* @__PURE__ */ jsx26(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__ */ jsx26(
+                Checkbox,
+                {
+                  id: optionId(id, index),
+                  name: htmlName || id,
+                  value: String(index),
+                  disabled: disabled || itemDisabled || readonly,
+                  onBlur: _onBlur,
+                  onFocus: _onFocus,
+                  children: option.label && /* @__PURE__ */ jsx26(Text4, { children: option.label })
+                },
+                index
+              );
+            }) })
+          }
+        )
+      ]
     }
   );
 }
@@ -920,10 +942,10 @@ import {
 // src/components/ui/radio.tsx
 import { forwardRef as forwardRef5 } from "react";
 import { RadioGroup as ChakraRadioGroup } from "@chakra-ui/react";
-import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs16 } from "react/jsx-runtime";
 var Radio = forwardRef5(function Radio2(props, ref) {
   const { children, inputProps, rootRef, ...rest } = props;
-  return /* @__PURE__ */ jsxs15(ChakraRadioGroup.Item, { ref: rootRef, ...rest, children: [
+  return /* @__PURE__ */ jsxs16(ChakraRadioGroup.Item, { ref: rootRef, ...rest, children: [
     /* @__PURE__ */ jsx27(ChakraRadioGroup.ItemHiddenInput, { ref, ...inputProps }),
     /* @__PURE__ */ jsx27(ChakraRadioGroup.ItemIndicator, {}),
     children && /* @__PURE__ */ jsx27(ChakraRadioGroup.ItemText, { children })
@@ -1002,7 +1024,7 @@ import {
 // src/components/ui/slider.tsx
 import { forwardRef as forwardRef6 } from "react";
 import { Slider as ChakraSlider, HStack as HStack2 } from "@chakra-ui/react";
-import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx29, jsxs as jsxs17 } from "react/jsx-runtime";
 var Slider = forwardRef6(function Slider2(props, ref) {
   const { marks: marksProp, showValue, ...rest } = props;
   const value = props.defaultValue ?? props.value;
@@ -1013,9 +1035,9 @@ var Slider = forwardRef6(function Slider2(props, ref) {
     return mark;
   });
   const hasMarkLabel = !!marks?.some((mark) => mark.label);
-  return /* @__PURE__ */ jsxs16(ChakraSlider.Root, { ref, width: "200px", thumbAlignment: "center", ...rest, children: [
+  return /* @__PURE__ */ jsxs17(ChakraSlider.Root, { ref, width: "200px", thumbAlignment: "center", ...rest, children: [
     showValue && /* @__PURE__ */ jsx29(HStack2, { justify: "space-between", children: /* @__PURE__ */ jsx29(ChakraSlider.ValueText, {}) }),
-    /* @__PURE__ */ jsxs16(ChakraSlider.Control, { "data-has-mark-label": hasMarkLabel || void 0, children: [
+    /* @__PURE__ */ jsxs17(ChakraSlider.Control, { "data-has-mark-label": hasMarkLabel || void 0, children: [
       /* @__PURE__ */ jsx29(ChakraSlider.Track, { children: /* @__PURE__ */ jsx29(ChakraSlider.Range, {}) }),
       /* @__PURE__ */ jsx29(SliderThumbs, { value }),
       /* @__PURE__ */ jsx29(SliderMarks, { marks })
@@ -1034,7 +1056,7 @@ var SliderMarks = forwardRef6(function SliderMarks2(props, ref) {
   return /* @__PURE__ */ jsx29(ChakraSlider.MarkerGroup, { ref, children: marks.map((mark, index) => {
     const value = typeof mark === "number" ? mark : mark.value;
     const label = typeof mark === "number" ? void 0 : mark.label;
-    return /* @__PURE__ */ jsxs16(ChakraSlider.Marker, { value, children: [
+    return /* @__PURE__ */ jsxs17(ChakraSlider.Marker, { value, children: [
       /* @__PURE__ */ jsx29(ChakraSlider.MarkerIndicator, {}),
       label
     ] }, index);
@@ -1090,12 +1112,12 @@ import { createListCollection, Select as ChakraSelect2 } from "@chakra-ui/react"
 // src/components/ui/select.tsx
 import { forwardRef as forwardRef7 } from "react";
 import { Select as ChakraSelect, Portal } from "@chakra-ui/react";
-import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
 var SelectTrigger = forwardRef7(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
-  return /* @__PURE__ */ jsxs17(ChakraSelect.Control, { ...rest, children: [
+  return /* @__PURE__ */ jsxs18(ChakraSelect.Control, { ...rest, children: [
     /* @__PURE__ */ jsx31(ChakraSelect.Trigger, { ref, children }),
-    /* @__PURE__ */ jsxs17(ChakraSelect.IndicatorGroup, { children: [
+    /* @__PURE__ */ jsxs18(ChakraSelect.IndicatorGroup, { children: [
       clearable && /* @__PURE__ */ jsx31(SelectClearTrigger, {}),
       /* @__PURE__ */ jsx31(ChakraSelect.Indicator, {})
     ] })
@@ -1112,7 +1134,7 @@ var SelectContent = forwardRef7(function SelectContent2(props, ref) {
 });
 var SelectItem = forwardRef7(function SelectItem2(props, ref) {
   const { item, children, ...rest } = props;
-  return /* @__PURE__ */ jsxs17(ChakraSelect.Item, { item, ...rest, ref, children: [
+  return /* @__PURE__ */ jsxs18(ChakraSelect.Item, { item, ...rest, ref, children: [
     children,
     /* @__PURE__ */ jsx31(ChakraSelect.ItemIndicator, {})
   ] }, item.value);
@@ -1134,14 +1156,14 @@ var SelectValueText = forwardRef7(function SelectValueText2(props, ref) {
   } }) });
 });
 var SelectRoot = forwardRef7(function SelectRoot2(props, ref) {
-  return /* @__PURE__ */ jsx31(ChakraSelect.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ jsxs17(Fragment3, { children: [
+  return /* @__PURE__ */ jsx31(ChakraSelect.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ jsxs18(Fragment3, { children: [
     /* @__PURE__ */ jsx31(ChakraSelect.HiddenSelect, {}),
     props.children
   ] }) });
 });
 var SelectItemGroup = forwardRef7(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
-  return /* @__PURE__ */ jsxs17(ChakraSelect.ItemGroup, { ...rest, ref, children: [
+  return /* @__PURE__ */ jsxs18(ChakraSelect.ItemGroup, { ...rest, ref, children: [
     /* @__PURE__ */ jsx31(ChakraSelect.ItemGroupLabel, { children: label }),
     children
   ] });
@@ -1150,7 +1172,7 @@ var SelectLabel = ChakraSelect.Label;
 var SelectItemText = ChakraSelect.ItemText;
 
 // src/SelectWidget/SelectWidget.tsx
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const {
     id,
@@ -1234,7 +1256,7 @@ function SelectWidget(props) {
       label: labelValue6(label, hideLabel || !label),
       position: "relative",
       ...chakraProps,
-      children: /* @__PURE__ */ jsxs18(
+      children: /* @__PURE__ */ jsxs19(
         SelectRoot,
         {
           collection: selectOptions,
@@ -1251,7 +1273,7 @@ function SelectWidget(props) {
           positioning: { placement: "bottom" },
           children: [
             /* @__PURE__ */ jsx32(ChakraSelect2.Control, { children: /* @__PURE__ */ jsx32(SelectTrigger, { children: /* @__PURE__ */ jsx32(SelectValueText, { placeholder }) }) }),
-            /* @__PURE__ */ jsx32(ChakraSelect2.Positioner, { minWidth: "100% !important", zIndex: "2 !important", top: "calc(100% + 5px) !important", children: /* @__PURE__ */ jsx32(ChakraSelect2.Content, { children: selectOptions.items.map((item) => /* @__PURE__ */ jsxs18(ChakraSelect2.Item, { item, children: [
+            /* @__PURE__ */ jsx32(ChakraSelect2.Positioner, { minWidth: "100% !important", zIndex: "2 !important", top: "calc(100% + 5px) !important", children: /* @__PURE__ */ jsx32(ChakraSelect2.Content, { children: selectOptions.items.map((item) => /* @__PURE__ */ jsxs19(ChakraSelect2.Item, { item, children: [
               item.label,
               /* @__PURE__ */ jsx32(ChakraSelect2.ItemIndicator, {})
             ] }, item.value)) }) })
@@ -1271,7 +1293,7 @@ import {
   labelValue as labelValue7
 } from "@rjsf/utils";
 import { createListCollection as createListCollection2, NativeSelect as ChakraSelect3 } from "@chakra-ui/react";
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs20 } from "react/jsx-runtime";
 function NativeSelectWidget(props) {
   const {
     id,
@@ -1340,7 +1362,7 @@ function NativeSelectWidget(props) {
       invalid: rawErrors && rawErrors.length > 0,
       label: labelValue7(label, hideLabel || !label),
       ...chakraProps,
-      children: /* @__PURE__ */ jsxs19(ChakraSelect3.Root, { children: [
+      children: /* @__PURE__ */ jsxs20(ChakraSelect3.Root, { children: [
         /* @__PURE__ */ jsx33(
           ChakraSelect3.Field,
           {
@@ -1427,7 +1449,7 @@ import {
 // src/components/ui/number-input.tsx
 import { forwardRef as forwardRef8, useEffect, useRef as useRef2 } from "react";
 import { NumberInput as ChakraNumberInput } from "@chakra-ui/react";
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var NumberInputRoot = forwardRef8(function NumberInput(props, ref) {
   const inputRef = useRef2(null);
   useEffect(() => {
@@ -1435,8 +1457,8 @@ var NumberInputRoot = forwardRef8(function NumberInput(props, ref) {
       inputRef.current.value = props.value || "";
     }
   }, [props.value]);
-  return /* @__PURE__ */ jsxs20(ChakraNumberInput.Root, { ref, variant: "outline", ...props, children: [
-    /* @__PURE__ */ jsxs20(ChakraNumberInput.Control, { children: [
+  return /* @__PURE__ */ jsxs21(ChakraNumberInput.Root, { ref, variant: "outline", ...props, children: [
+    /* @__PURE__ */ jsxs21(ChakraNumberInput.Control, { children: [
       /* @__PURE__ */ jsx35(ChakraNumberInput.IncrementTrigger, {}),
       /* @__PURE__ */ jsx35(ChakraNumberInput.DecrementTrigger, {})
     ] }),