@rjsf/chakra-ui 6.0.0-beta.21 → 6.0.0-beta.23

package/dist/index.cjs

@@ -106,11 +106,6 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils3.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = (0, import_utils3.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
@@ -146,7 +141,7 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react3.Grid, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react3.GridItem, { children: [
         !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-        items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key))
+        items
       ] }),
       canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.GridItem, { justifySelf: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react3.Box, { mt: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         AddButton2,
@@ -203,6 +198,7 @@ var import_jsx_runtime5 = require("react/jsx-runtime");
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     type,
     value,
     label,
@@ -241,7 +237,7 @@ function BaseInputTemplate(props) {
           import_react7.Input,
           {
             id,
-            name: id,
+            name: htmlName || id,
             value: value || value === 0 ? value : "",
             onChange: onChangeOverride || _onChange,
             onBlur: _onBlur,
@@ -417,8 +413,9 @@ function FieldTemplate(props) {
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     registry,
     required,
@@ -447,8 +444,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -503,7 +501,7 @@ function ObjectFieldTemplate(props) {
     schema,
     formData,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = (0, import_utils11.getUiOptions)(uiSchema);
@@ -550,7 +548,7 @@ function ObjectFieldTemplate(props) {
         {
           id: (0, import_utils11.buttonId)(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -642,8 +640,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     registry,
     required,
@@ -657,7 +655,6 @@ function WrapIfAdditionalTemplate(props) {
   if (!additional) {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target.value);
   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,
@@ -666,7 +663,7 @@ function WrapIfAdditionalTemplate(props) {
         disabled: disabled || readonly,
         id: `${id}-key`,
         name: `${id}-key`,
-        onBlur: !readonly ? handleBlur : void 0,
+        onBlur: !readonly ? onKeyRenameBlur : void 0,
         type: "text",
         mb: 1
       }
@@ -678,7 +675,7 @@ function WrapIfAdditionalTemplate(props) {
         id: (0, import_utils13.buttonId)(id, "remove"),
         className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -718,94 +715,36 @@ var Templates_default = generateTemplates();
 // src/AltDateWidget/AltDateWidget.tsx
 var import_react25 = require("@chakra-ui/react");
 var import_utils14 = require("@rjsf/utils");
-var import_react26 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-function DateElement(props) {
-  const { SelectWidget: SelectWidget2 } = props.registry.widgets;
-  const value = props.value ? props.value : void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-    SelectWidget2,
-    {
-      ...props,
-      label: "",
-      className: "form-control",
-      onChange: (elemValue) => props.select(props.type, elemValue),
-      options: {
-        enumOptions: (0, import_utils14.dateRangeOptions)(props.range[0], props.range[1])
-      },
-      placeholder: props.type,
-      schema: { type: "integer" },
-      value,
-      "aria-describedby": (0, import_utils14.ariaDescribedByIds)(props.name)
-    }
-  );
-}
-var readyForChange = (state) => {
-  return Object.keys(state).every((key) => typeof state[key] !== "undefined" && state[key] !== -1);
-};
 function AltDateWidget(props) {
-  const { autofocus, disabled, id, onBlur, onChange, onFocus, options, readonly, registry, showTime, value } = props;
+  const { autofocus, disabled, id, onBlur, onFocus, options, readonly, registry } = props;
   const { translateString } = registry;
-  const [state, setState] = (0, import_react26.useState)((0, import_utils14.parseDateString)(value, showTime));
-  (0, import_react26.useEffect)(() => {
-    setState((0, import_utils14.parseDateString)(value, showTime));
-  }, [showTime, value]);
-  const handleChange = (property, nextValue) => {
-    const nextState = {
-      ...state,
-      [property]: typeof nextValue === "undefined" ? -1 : nextValue
-    };
-    if (readyForChange(nextState)) {
-      onChange((0, import_utils14.toDateString)(nextState, showTime));
-    } else {
-      setState(nextState);
-    }
-  };
-  const handleNow = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    const nextState = (0, import_utils14.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), showTime);
-    onChange((0, import_utils14.toDateString)(nextState, showTime));
-  };
-  const handleClear = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    onChange(void 0);
-  };
+  const { elements, handleChange, handleClear, handleSetNow } = (0, import_utils14.useAltDateWidgetProps)(props);
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react25.FieldsetRoot, { ...chakraProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Box, { display: "flex", flexWrap: "wrap", alignItems: "center", children: (0, import_utils14.getDateElementProps)(
-      state,
-      showTime,
-      options.yearsRange,
-      options.format
-    ).map((elemProps, i) => {
-      const elemId = id + "_" + elemProps.type;
-      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Box, { mr: "2", mb: "2", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
-        DateElement,
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Box, { display: "flex", flexWrap: "wrap", alignItems: "center", children: elements.map((elemProps, i) => {
+      const elemId = `${id}_${elemProps.type}`;
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Box, { mr: "2", mb: "2", width: "20", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        import_utils14.DateElement,
         {
           ...props,
           ...elemProps,
           autofocus: autofocus && i === 0,
           disabled,
-          id: elemId,
+          rootId: id,
           name: id,
           onBlur,
           onFocus,
           readonly,
           registry,
           select: handleChange,
-          value: elemProps.value < 0 ? "" : elemProps.value
+          value: elemProps.value && elemProps.value < 0 ? "" : elemProps.value
         }
       ) }, elemId);
     }) }),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react25.Box, { display: "flex", children: [
-      !options.hideNowButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Button, { onClick: (e) => handleNow(e), mr: "2", children: translateString(import_utils14.TranslatableString.NowLabel) }),
-      !options.hideClearButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Button, { onClick: (e) => handleClear(e), children: translateString(import_utils14.TranslatableString.ClearLabel) })
+      !options.hideNowButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Button, { onClick: handleSetNow, mr: "2", children: translateString(import_utils14.TranslatableString.NowLabel) }),
+      !options.hideClearButton && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react25.Button, { onClick: handleClear, children: translateString(import_utils14.TranslatableString.ClearLabel) })
     ] })
   ] });
 }
@@ -813,7 +752,7 @@ AltDateWidget.defaultProps = {
   autofocus: false,
   disabled: false,
   readonly: false,
-  showTime: false,
+  time: false,
   options: {
     yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
   }
@@ -824,28 +763,28 @@ var AltDateWidget_default = AltDateWidget;
 var import_jsx_runtime23 = require("react/jsx-runtime");
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AltDateWidget2, { ...props, showTime: true });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AltDateWidget2, { ...props, time: true });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget_default.defaultProps,
-  showTime: true
+  time: true
 };
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/CheckboxWidget/CheckboxWidget.tsx
-var import_react29 = require("@chakra-ui/react");
+var import_react28 = require("@chakra-ui/react");
 var import_utils16 = require("@rjsf/utils");
 
 // src/components/ui/checkbox.tsx
-var import_react27 = require("react");
-var import_react28 = require("@chakra-ui/react");
+var import_react26 = require("react");
+var import_react27 = require("@chakra-ui/react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Checkbox = (0, import_react27.forwardRef)(function Checkbox2(props, ref) {
+var Checkbox = (0, import_react26.forwardRef)(function Checkbox2(props, ref) {
   const { icon, children, inputProps, rootRef, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react28.Checkbox.Root, { ref: rootRef, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Checkbox.HiddenInput, { ref, ...inputProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Checkbox.Control, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Checkbox.Indicator, {}) }),
-    children != null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react28.Checkbox.Label, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_react27.Checkbox.Root, { ref: rootRef, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react27.Checkbox.HiddenInput, { ref, ...inputProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react27.Checkbox.Control, { children: icon || /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react27.Checkbox.Indicator, {}) }),
+    children != null && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react27.Checkbox.Label, { children })
   ] });
 });
 
@@ -854,6 +793,7 @@ var import_jsx_runtime25 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -893,26 +833,27 @@ function CheckboxWidget(props) {
       Checkbox,
       {
         id,
-        name: id,
+        name: htmlName || id,
         checked: typeof value === "undefined" ? false : value,
         disabled: disabled || readonly,
         onCheckedChange: _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
         "aria-describedby": (0, import_utils16.ariaDescribedByIds)(id),
-        children: (0, import_utils16.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react29.Text, { children: label }), hideLabel || !label)
+        children: (0, import_utils16.labelValue)(/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react28.Text, { children: label }), hideLabel || !label)
       }
     )
   ] });
 }
 
 // src/CheckboxesWidget/CheckboxesWidget.tsx
-var import_react30 = require("@chakra-ui/react");
+var import_react29 = require("@chakra-ui/react");
 var import_utils18 = require("@rjsf/utils");
 var import_jsx_runtime26 = require("react/jsx-runtime");
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -933,14 +874,14 @@ function CheckboxesWidget(props) {
   const selectedIndexes = (0, import_utils18.enumOptionsIndexForValue)(value, enumOptions, true);
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react30.FieldsetRoot,
+    import_react29.FieldsetRoot,
     {
       mb: 1,
       disabled: disabled || readonly,
       invalid: rawErrors && rawErrors.length > 0,
       ...chakraProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-        import_react30.CheckboxGroup,
+        import_react29.CheckboxGroup,
         {
           onValueChange: (option) => onChange((0, import_utils18.enumOptionsValueForIndex)(option, enumOptions, emptyValue)),
           value: selectedIndexes,
@@ -948,18 +889,18 @@ function CheckboxesWidget(props) {
           readOnly: readonly,
           required,
           label: (0, import_utils18.labelValue)(label, hideLabel || !label),
-          children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react30.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+          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: id,
+                name: htmlName || id,
                 value: String(index),
                 disabled: disabled || itemDisabled || readonly,
                 onBlur: _onBlur,
                 onFocus: _onFocus,
-                children: option.label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react30.Text, { children: option.label })
+                children: option.label && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react29.Text, { children: option.label })
               },
               index
             );
@@ -971,27 +912,28 @@ function CheckboxesWidget(props) {
 }
 
 // src/RadioWidget/RadioWidget.tsx
-var import_react33 = require("@chakra-ui/react");
+var import_react32 = require("@chakra-ui/react");
 var import_utils20 = require("@rjsf/utils");
 
 // src/components/ui/radio.tsx
-var import_react31 = require("react");
-var import_react32 = require("@chakra-ui/react");
+var import_react30 = require("react");
+var import_react31 = require("@chakra-ui/react");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var Radio = (0, import_react31.forwardRef)(function Radio2(props, ref) {
+var Radio = (0, import_react30.forwardRef)(function Radio2(props, ref) {
   const { children, inputProps, rootRef, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react32.RadioGroup.Item, { ref: rootRef, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react32.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react32.RadioGroup.ItemIndicator, {}),
-    children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react32.RadioGroup.ItemText, { children })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react31.RadioGroup.Item, { ref: rootRef, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react31.RadioGroup.ItemHiddenInput, { ref, ...inputProps }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react31.RadioGroup.ItemIndicator, {}),
+    children && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react31.RadioGroup.ItemText, { children })
   ] });
 });
-var RadioGroup = import_react32.RadioGroup.Root;
+var RadioGroup = import_react31.RadioGroup.Root;
 
 // src/RadioWidget/RadioWidget.tsx
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -1027,9 +969,9 @@ function RadioWidget({
           onBlur: _onBlur,
           onFocus: _onFocus,
           value: selectedIndex,
-          name: id,
+          name: htmlName || id,
           "aria-describedby": (0, import_utils20.ariaDescribedByIds)(id),
-          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react33.Stack, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+          children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react32.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_runtime28.jsx)(
               Radio,
@@ -1052,10 +994,10 @@ function RadioWidget({
 var import_utils22 = require("@rjsf/utils");
 
 // src/components/ui/slider.tsx
-var import_react34 = require("react");
-var import_react35 = require("@chakra-ui/react");
+var import_react33 = require("react");
+var import_react34 = require("@chakra-ui/react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var Slider = (0, import_react34.forwardRef)(function Slider2(props, ref) {
+var Slider = (0, import_react33.forwardRef)(function Slider2(props, ref) {
   const { marks: marksProp, showValue, ...rest } = props;
   const value = props.defaultValue ?? props.value;
   const marks = marksProp?.map((mark) => {
@@ -1065,10 +1007,10 @@ var Slider = (0, import_react34.forwardRef)(function Slider2(props, ref) {
     return mark;
   });
   const hasMarkLabel = !!marks?.some((mark) => mark.label);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react35.Slider.Root, { ref, width: "200px", thumbAlignment: "center", ...rest, children: [
-    showValue && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.HStack, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.Slider.ValueText, {}) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react35.Slider.Control, { "data-has-mark-label": hasMarkLabel || void 0, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.Slider.Track, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.Slider.Range, {}) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react34.Slider.Root, { ref, width: "200px", thumbAlignment: "center", ...rest, children: [
+    showValue && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.HStack, { justify: "space-between", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.Slider.ValueText, {}) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react34.Slider.Control, { "data-has-mark-label": hasMarkLabel || void 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.Slider.Track, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.Slider.Range, {}) }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SliderThumbs, { value }),
       /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(SliderMarks, { marks })
     ] })
@@ -1076,18 +1018,18 @@ var Slider = (0, import_react34.forwardRef)(function Slider2(props, ref) {
 });
 function SliderThumbs(props) {
   const { value } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: value?.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.Slider.Thumb, { index, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.Slider.HiddenInput, {}) }, index)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: value?.map((_, index) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.Slider.Thumb, { index, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.Slider.HiddenInput, {}) }, index)) });
 }
-var SliderMarks = (0, import_react34.forwardRef)(function SliderMarks2(props, ref) {
+var SliderMarks = (0, import_react33.forwardRef)(function SliderMarks2(props, ref) {
   const { marks } = props;
   if (!marks?.length) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.Slider.MarkerGroup, { ref, children: marks.map((mark, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.Slider.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__ */ (0, import_jsx_runtime29.jsxs)(import_react35.Slider.Marker, { value, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react35.Slider.MarkerIndicator, {}),
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_react34.Slider.Marker, { value, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react34.Slider.MarkerIndicator, {}),
       label
     ] }, index);
   }) });
@@ -1130,43 +1072,43 @@ function RangeWidget({
 }
 
 // src/SelectWidget/SelectWidget.tsx
-var import_react38 = require("react");
+var import_react37 = require("react");
 var import_utils24 = require("@rjsf/utils");
-var import_react39 = require("@chakra-ui/react");
+var import_react38 = require("@chakra-ui/react");
 
 // src/components/ui/select.tsx
-var import_react36 = require("react");
-var import_react37 = require("@chakra-ui/react");
+var import_react35 = require("react");
+var import_react36 = require("@chakra-ui/react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var SelectTrigger = (0, import_react36.forwardRef)(function SelectTrigger2(props, ref) {
+var SelectTrigger = (0, import_react35.forwardRef)(function SelectTrigger2(props, ref) {
   const { children, clearable, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react37.Select.Control, { ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.Trigger, { ref, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react37.Select.IndicatorGroup, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react36.Select.Control, { ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.Trigger, { ref, children }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react36.Select.IndicatorGroup, { children: [
       clearable && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SelectClearTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.Indicator, {})
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.Indicator, {})
     ] })
   ] });
 });
-var SelectClearTrigger = (0, import_react36.forwardRef)(
+var SelectClearTrigger = (0, import_react35.forwardRef)(
   function SelectClearTrigger2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseButton, { size: "xs", variant: "plain", focusVisibleRing: "inside", focusRingWidth: "2px", pointerEvents: "auto" }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.ClearTrigger, { asChild: true, ...props, ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(CloseButton, { size: "xs", variant: "plain", focusVisibleRing: "inside", focusRingWidth: "2px", pointerEvents: "auto" }) });
   }
 );
-var SelectContent = (0, import_react36.forwardRef)(function SelectContent2(props, ref) {
+var SelectContent = (0, import_react35.forwardRef)(function SelectContent2(props, ref) {
   const { portalled = true, portalRef, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.Content, { ...rest, ref }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Portal, { disabled: !portalled, container: portalRef, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.Positioner, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.Content, { ...rest, ref }) }) });
 });
-var SelectItem = (0, import_react36.forwardRef)(function SelectItem2(props, ref) {
+var SelectItem = (0, import_react35.forwardRef)(function SelectItem2(props, ref) {
   const { item, children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react37.Select.Item, { item, ...rest, ref, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react36.Select.Item, { item, ...rest, ref, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.ItemIndicator, {})
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.ItemIndicator, {})
   ] }, item.value);
 });
-var SelectValueText = (0, import_react36.forwardRef)(function SelectValueText2(props, ref) {
+var SelectValueText = (0, import_react35.forwardRef)(function SelectValueText2(props, ref) {
   const { children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.Context, { children: (select) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.ValueText, { ...rest, ref, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.Context, { children: (select) => {
     const items = select.selectedItems;
     if (items.length === 0) {
       return props.placeholder;
@@ -1180,27 +1122,28 @@ var SelectValueText = (0, import_react36.forwardRef)(function SelectValueText2(p
     return `${items.length} selected`;
   } }) });
 });
-var SelectRoot = (0, import_react36.forwardRef)(function SelectRoot2(props, ref) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.HiddenSelect, {}),
+var SelectRoot = (0, import_react35.forwardRef)(function SelectRoot2(props, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.Root, { ...props, ref, positioning: { sameWidth: true, ...props.positioning }, children: props.asChild ? props.children : /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.HiddenSelect, {}),
     props.children
   ] }) });
 });
-var SelectItemGroup = (0, import_react36.forwardRef)(function SelectItemGroup2(props, ref) {
+var SelectItemGroup = (0, import_react35.forwardRef)(function SelectItemGroup2(props, ref) {
   const { children, label, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react37.Select.ItemGroup, { ...rest, ref, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react37.Select.ItemGroupLabel, { children: label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_react36.Select.ItemGroup, { ...rest, ref, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react36.Select.ItemGroupLabel, { children: label }),
     children
   ] });
 });
-var SelectLabel = import_react37.Select.Label;
-var SelectItemText = import_react37.Select.ItemText;
+var SelectLabel = import_react36.Select.Label;
+var SelectItemText = import_react36.Select.ItemText;
 
 // src/SelectWidget/SelectWidget.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 function SelectWidget(props) {
   const {
     id,
+    htmlName,
     options,
     label,
     hideLabel,
@@ -1229,7 +1172,7 @@ function SelectWidget(props) {
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils24.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils24.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  const { valueLabelMap, displayEnumOptions } = (0, import_react38.useMemo)(() => {
+  const { valueLabelMap, displayEnumOptions } = (0, import_react37.useMemo)(() => {
     const valueLabelMap2 = {};
     let displayEnumOptions2 = [];
     if (Array.isArray(enumOptions)) {
@@ -1263,10 +1206,10 @@ function SelectWidget(props) {
     }
   ] : [];
   const formValue = (isMultiple ? getMultiValue() : getSingleValue()).map((item) => item.value);
-  const selectOptions = (0, import_react39.createListCollection)({
+  const selectOptions = (0, import_react38.createListCollection)({
     items: displayEnumOptions.filter((item) => item.value)
   });
-  const containerRef = (0, import_react38.useRef)(null);
+  const containerRef = (0, import_react37.useRef)(null);
   const chakraProps = getChakra({ uiSchema });
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
     Field,
@@ -1285,7 +1228,7 @@ function SelectWidget(props) {
         {
           collection: selectOptions,
           id,
-          name: id,
+          name: htmlName || id,
           multiple: isMultiple,
           closeOnSelect: !isMultiple,
           onBlur: _onBlur,
@@ -1296,10 +1239,10 @@ function SelectWidget(props) {
           "aria-describedby": (0, import_utils24.ariaDescribedByIds)(id),
           positioning: { placement: "bottom" },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react39.Select.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectValueText, { placeholder }) }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react39.Select.Positioner, { minWidth: "100% !important", zIndex: "2 !important", top: "calc(100% + 5px) !important", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react39.Select.Content, { children: selectOptions.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react39.Select.Item, { item, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react38.Select.Control, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SelectValueText, { placeholder }) }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react38.Select.Positioner, { minWidth: "100% !important", zIndex: "2 !important", top: "calc(100% + 5px) !important", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react38.Select.Content, { children: selectOptions.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react38.Select.Item, { item, children: [
               item.label,
-              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react39.Select.ItemIndicator, {})
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react38.Select.ItemIndicator, {})
             ] }, item.value)) }) })
           ]
         }
@@ -1309,9 +1252,9 @@ function SelectWidget(props) {
 }
 
 // src/SelectNativeWidget/NativeSelectWidget.tsx
-var import_react40 = require("react");
+var import_react39 = require("react");
 var import_utils26 = require("@rjsf/utils");
-var import_react41 = require("@chakra-ui/react");
+var import_react40 = require("@chakra-ui/react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
 function NativeSelectWidget(props) {
   const {
@@ -1340,7 +1283,7 @@ function NativeSelectWidget(props) {
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils26.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils26.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  const { valueLabelMap, displayEnumOptions } = (0, import_react40.useMemo)(() => {
+  const { valueLabelMap, displayEnumOptions } = (0, import_react39.useMemo)(() => {
     const valueLabelMap2 = {};
     let displayEnumOptions2 = [];
     if (Array.isArray(enumOptions)) {
@@ -1367,7 +1310,7 @@ function NativeSelectWidget(props) {
     }
   ] : [];
   const formValue = getSingleValue()[0]?.value || "";
-  const selectOptions = (0, import_react41.createListCollection)({
+  const selectOptions = (0, import_react40.createListCollection)({
     items: displayEnumOptions.filter((item) => item.value)
   });
   const chakraProps = getChakra({ uiSchema });
@@ -1381,9 +1324,9 @@ function NativeSelectWidget(props) {
       invalid: rawErrors && rawErrors.length > 0,
       label: (0, import_utils26.labelValue)(label, hideLabel || !label),
       ...chakraProps,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react41.NativeSelect.Root, { children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react40.NativeSelect.Root, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
-          import_react41.NativeSelect.Field,
+          import_react40.NativeSelect.Field,
           {
             id,
             onBlur: _onBlur,
@@ -1395,18 +1338,19 @@ function NativeSelectWidget(props) {
             children: selectOptions.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("option", { value: item.value, children: item.label }, item.value))
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react41.NativeSelect.Indicator, {})
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react40.NativeSelect.Indicator, {})
       ] })
     }
   );
 }
 
 // src/TextareaWidget/TextareaWidget.tsx
-var import_react42 = require("@chakra-ui/react");
+var import_react41 = require("@chakra-ui/react");
 var import_utils28 = require("@rjsf/utils");
 var import_jsx_runtime34 = require("react/jsx-runtime");
 function TextareaWidget({
   id,
+  htmlName,
   placeholder,
   value,
   label,
@@ -1437,10 +1381,10 @@ function TextareaWidget({
       label: (0, import_utils28.labelValue)(label, hideLabel || !label),
       ...chakraProps,
       children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-        import_react42.Textarea,
+        import_react41.Textarea,
         {
           id,
-          name: id,
+          name: htmlName || id,
           value: value ?? "",
           placeholder,
           autoFocus: autofocus,
@@ -1459,22 +1403,22 @@ function TextareaWidget({
 var import_utils30 = require("@rjsf/utils");
 
 // src/components/ui/number-input.tsx
-var import_react43 = require("react");
-var import_react44 = require("@chakra-ui/react");
+var import_react42 = require("react");
+var import_react43 = require("@chakra-ui/react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var NumberInputRoot = (0, import_react43.forwardRef)(function NumberInput(props, ref) {
-  const inputRef = (0, import_react43.useRef)(null);
-  (0, import_react43.useEffect)(() => {
+var NumberInputRoot = (0, import_react42.forwardRef)(function NumberInput(props, ref) {
+  const inputRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
     if (inputRef.current) {
       inputRef.current.value = props.value || "";
     }
   }, [props.value]);
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react44.NumberInput.Root, { ref, variant: "outline", ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react44.NumberInput.Control, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.NumberInput.IncrementTrigger, {}),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.NumberInput.DecrementTrigger, {})
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react43.NumberInput.Root, { ref, variant: "outline", ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react43.NumberInput.Control, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react43.NumberInput.IncrementTrigger, {}),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react43.NumberInput.DecrementTrigger, {})
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react44.NumberInput.Input, { ref: inputRef })
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react43.NumberInput.Input, { ref: inputRef })
   ] });
 });
 
@@ -1545,17 +1489,17 @@ function generateForm() {
 var Form_default = generateForm();
 
 // src/ChakraFrameProvider.tsx
-var import_react45 = require("@emotion/react");
+var import_react44 = require("@emotion/react");
 var import_cache = __toESM(require("@emotion/cache"), 1);
 var import_weak_memoize = __toESM(require("@emotion/weak-memoize"), 1);
-var import_react46 = require("@chakra-ui/react");
+var import_react45 = require("@chakra-ui/react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var memoizedCreateCacheWithContainer = (0, import_weak_memoize.default)((container) => {
   const newCache = (0, import_cache.default)({ container, key: "rjsf" });
   return newCache;
 });
 var __createChakraFrameProvider = (props) => ({ document }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { margin: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react45.CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react46.ChakraProvider, { value: import_react46.defaultSystem, children: props.children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { style: { margin: 2 }, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react44.CacheProvider, { value: memoizedCreateCacheWithContainer(document.head), children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react45.ChakraProvider, { value: import_react45.defaultSystem, children: props.children }) }) });
 };
 
 // src/index.ts