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

package/dist/chakra-ui.esm.js

@@ -67,11 +67,6 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
@@ -107,7 +102,7 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ jsxs3(Grid, { children: [
       /* @__PURE__ */ jsxs3(GridItem, { children: [
         !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-        items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key))
+        items
       ] }),
       canAdd && /* @__PURE__ */ jsx3(GridItem, { justifySelf: "flex-end", children: /* @__PURE__ */ jsx3(Box2, { mt: 2, children: /* @__PURE__ */ jsx3(
         AddButton2,
@@ -169,6 +164,7 @@ import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
 function BaseInputTemplate(props) {
   const {
     id,
+    htmlName,
     type,
     value,
     label,
@@ -207,7 +203,7 @@ function BaseInputTemplate(props) {
           Input,
           {
             id,
-            name: id,
+            name: htmlName || id,
             value: value || value === 0 ? value : "",
             onChange: onChangeOverride || _onChange,
             onBlur: _onBlur,
@@ -386,8 +382,9 @@ function FieldTemplate(props) {
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     registry,
     required,
@@ -416,8 +413,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -479,7 +477,7 @@ function ObjectFieldTemplate(props) {
     schema,
     formData,
     optionalDataControl,
-    onAddClick,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = getUiOptions4(uiSchema);
@@ -526,7 +524,7 @@ function ObjectFieldTemplate(props) {
         {
           id: buttonId2(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -622,8 +620,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     registry,
     required,
@@ -637,7 +635,6 @@ function WrapIfAdditionalTemplate(props) {
   if (!additional) {
     return /* @__PURE__ */ jsx21("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target.value);
   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,
@@ -646,7 +643,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
       }
@@ -658,7 +655,7 @@ function WrapIfAdditionalTemplate(props) {
         id: buttonId3(id, "remove"),
         className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -698,101 +695,40 @@ var Templates_default = generateTemplates();
 // src/AltDateWidget/AltDateWidget.tsx
 import { Box as Box6, Button as Button3, FieldsetRoot } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds2,
-  dateRangeOptions,
-  getDateElementProps,
-  parseDateString,
-  toDateString,
-  TranslatableString as TranslatableString5
+  DateElement,
+  TranslatableString as TranslatableString5,
+  useAltDateWidgetProps
 } from "@rjsf/utils";
-import { useEffect, useState } from "react";
 import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
-function DateElement(props) {
-  const { SelectWidget: SelectWidget2 } = props.registry.widgets;
-  const value = props.value ? props.value : void 0;
-  return /* @__PURE__ */ jsx22(
-    SelectWidget2,
-    {
-      ...props,
-      label: "",
-      className: "form-control",
-      onChange: (elemValue) => props.select(props.type, elemValue),
-      options: {
-        enumOptions: dateRangeOptions(props.range[0], props.range[1])
-      },
-      placeholder: props.type,
-      schema: { type: "integer" },
-      value,
-      "aria-describedby": ariaDescribedByIds2(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] = useState(parseDateString(value, showTime));
-  useEffect(() => {
-    setState(parseDateString(value, showTime));
-  }, [showTime, value]);
-  const handleChange = (property, nextValue) => {
-    const nextState = {
-      ...state,
-      [property]: typeof nextValue === "undefined" ? -1 : nextValue
-    };
-    if (readyForChange(nextState)) {
-      onChange(toDateString(nextState, showTime));
-    } else {
-      setState(nextState);
-    }
-  };
-  const handleNow = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    const nextState = parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
-    onChange(toDateString(nextState, showTime));
-  };
-  const handleClear = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    onChange(void 0);
-  };
+  const { elements, handleChange, handleClear, handleSetNow } = useAltDateWidgetProps(props);
   const chakraProps = getChakra({ uiSchema: props.uiSchema });
   return /* @__PURE__ */ jsxs12(FieldsetRoot, { ...chakraProps, children: [
-    /* @__PURE__ */ jsx22(Box6, { display: "flex", flexWrap: "wrap", alignItems: "center", children: getDateElementProps(
-      state,
-      showTime,
-      options.yearsRange,
-      options.format
-    ).map((elemProps, i) => {
-      const elemId = id + "_" + elemProps.type;
-      return /* @__PURE__ */ jsx22(Box6, { mr: "2", mb: "2", children: /* @__PURE__ */ jsx22(
+    /* @__PURE__ */ jsx22(Box6, { display: "flex", flexWrap: "wrap", alignItems: "center", children: elements.map((elemProps, i) => {
+      const elemId = `${id}_${elemProps.type}`;
+      return /* @__PURE__ */ jsx22(Box6, { mr: "2", mb: "2", width: "20", children: /* @__PURE__ */ jsx22(
         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__ */ jsxs12(Box6, { display: "flex", children: [
-      !options.hideNowButton && /* @__PURE__ */ jsx22(Button3, { onClick: (e) => handleNow(e), mr: "2", children: translateString(TranslatableString5.NowLabel) }),
-      !options.hideClearButton && /* @__PURE__ */ jsx22(Button3, { onClick: (e) => handleClear(e), children: translateString(TranslatableString5.ClearLabel) })
+      !options.hideNowButton && /* @__PURE__ */ jsx22(Button3, { onClick: handleSetNow, mr: "2", children: translateString(TranslatableString5.NowLabel) }),
+      !options.hideClearButton && /* @__PURE__ */ jsx22(Button3, { onClick: handleClear, children: translateString(TranslatableString5.ClearLabel) })
     ] })
   ] });
 }
@@ -800,7 +736,7 @@ AltDateWidget.defaultProps = {
   autofocus: false,
   disabled: false,
   readonly: false,
-  showTime: false,
+  time: false,
   options: {
     yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
   }
@@ -811,18 +747,18 @@ var AltDateWidget_default = AltDateWidget;
 import { jsx as jsx23 } from "react/jsx-runtime";
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ jsx23(AltDateWidget2, { ...props, showTime: true });
+  return /* @__PURE__ */ jsx23(AltDateWidget2, { ...props, time: true });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget_default.defaultProps,
-  showTime: true
+  time: true
 };
 var AltDateTimeWidget_default = AltDateTimeWidget;
 
 // src/CheckboxWidget/CheckboxWidget.tsx
 import { Text as Text3 } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds3,
+  ariaDescribedByIds as ariaDescribedByIds2,
   descriptionId as descriptionId2,
   getTemplate as getTemplate5,
   labelValue as labelValue2,
@@ -847,6 +783,7 @@ import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -886,13 +823,13 @@ 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": ariaDescribedByIds3(id),
+        "aria-describedby": ariaDescribedByIds2(id),
         children: labelValue2(/* @__PURE__ */ jsx25(Text3, { children: label }), hideLabel || !label)
       }
     )
@@ -902,7 +839,7 @@ function CheckboxWidget(props) {
 // src/CheckboxesWidget/CheckboxesWidget.tsx
 import { CheckboxGroup, FieldsetRoot as FieldsetRoot2, Stack, Text as Text4 } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds4,
+  ariaDescribedByIds as ariaDescribedByIds3,
   enumOptionsIndexForValue,
   enumOptionsValueForIndex,
   labelValue as labelValue3,
@@ -912,6 +849,7 @@ import { jsx as jsx26 } from "react/jsx-runtime";
 function CheckboxesWidget(props) {
   const {
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -943,7 +881,7 @@ function CheckboxesWidget(props) {
         {
           onValueChange: (option) => onChange(enumOptionsValueForIndex(option, enumOptions, emptyValue)),
           value: selectedIndexes,
-          "aria-describedby": ariaDescribedByIds4(id),
+          "aria-describedby": ariaDescribedByIds3(id),
           readOnly: readonly,
           required,
           label: labelValue3(label, hideLabel || !label),
@@ -953,7 +891,7 @@ function CheckboxesWidget(props) {
               Checkbox,
               {
                 id: optionId(id, index),
-                name: id,
+                name: htmlName || id,
                 value: String(index),
                 disabled: disabled || itemDisabled || readonly,
                 onBlur: _onBlur,
@@ -972,7 +910,7 @@ function CheckboxesWidget(props) {
 // src/RadioWidget/RadioWidget.tsx
 import { Stack as Stack2 } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds5,
+  ariaDescribedByIds as ariaDescribedByIds4,
   enumOptionsIndexForValue as enumOptionsIndexForValue2,
   enumOptionsValueForIndex as enumOptionsValueForIndex2,
   labelValue as labelValue4,
@@ -997,6 +935,7 @@ var RadioGroup = ChakraRadioGroup.Root;
 import { jsx as jsx28 } from "react/jsx-runtime";
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -1032,8 +971,8 @@ function RadioWidget({
           onBlur: _onBlur,
           onFocus: _onFocus,
           value: selectedIndex,
-          name: id,
-          "aria-describedby": ariaDescribedByIds5(id),
+          name: htmlName || id,
+          "aria-describedby": ariaDescribedByIds4(id),
           children: /* @__PURE__ */ jsx28(Stack2, { direction: row ? "row" : "column", children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
             const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
             return /* @__PURE__ */ jsx28(
@@ -1055,7 +994,7 @@ function RadioWidget({
 
 // src/RangeWidget/RangeWidget.tsx
 import {
-  ariaDescribedByIds as ariaDescribedByIds6,
+  ariaDescribedByIds as ariaDescribedByIds5,
   labelValue as labelValue5,
   rangeSpec
 } from "@rjsf/utils";
@@ -1133,7 +1072,7 @@ function RangeWidget({
       onValueChange: _onChange,
       onBlur: _onBlur,
       onFocus: _onFocus,
-      "aria-describedby": ariaDescribedByIds6(id)
+      "aria-describedby": ariaDescribedByIds5(id)
     }
   ) });
 }
@@ -1141,7 +1080,7 @@ function RangeWidget({
 // src/SelectWidget/SelectWidget.tsx
 import { useMemo, useRef } from "react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds7,
+  ariaDescribedByIds as ariaDescribedByIds6,
   enumOptionsIndexForValue as enumOptionsIndexForValue3,
   enumOptionsValueForIndex as enumOptionsValueForIndex3,
   labelValue as labelValue6
@@ -1215,6 +1154,7 @@ import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 function SelectWidget(props) {
   const {
     id,
+    htmlName,
     options,
     label,
     hideLabel,
@@ -1299,7 +1239,7 @@ function SelectWidget(props) {
         {
           collection: selectOptions,
           id,
-          name: id,
+          name: htmlName || id,
           multiple: isMultiple,
           closeOnSelect: !isMultiple,
           onBlur: _onBlur,
@@ -1307,7 +1247,7 @@ function SelectWidget(props) {
           onFocus: _onFocus,
           autoFocus: autofocus,
           value: formValue,
-          "aria-describedby": ariaDescribedByIds7(id),
+          "aria-describedby": ariaDescribedByIds6(id),
           positioning: { placement: "bottom" },
           children: [
             /* @__PURE__ */ jsx32(ChakraSelect2.Control, { children: /* @__PURE__ */ jsx32(SelectTrigger, { children: /* @__PURE__ */ jsx32(SelectValueText, { placeholder }) }) }),
@@ -1325,7 +1265,7 @@ function SelectWidget(props) {
 // src/SelectNativeWidget/NativeSelectWidget.tsx
 import { useMemo as useMemo2 } from "react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds8,
+  ariaDescribedByIds as ariaDescribedByIds7,
   enumOptionsIndexForValue as enumOptionsIndexForValue4,
   enumOptionsValueForIndex as enumOptionsValueForIndex4,
   labelValue as labelValue7
@@ -1410,7 +1350,7 @@ function NativeSelectWidget(props) {
             onFocus: _onFocus,
             autoFocus: autofocus,
             value: formValue,
-            "aria-describedby": ariaDescribedByIds8(id),
+            "aria-describedby": ariaDescribedByIds7(id),
             children: selectOptions.items.map((item) => /* @__PURE__ */ jsx33("option", { value: item.value, children: item.label }, item.value))
           }
         ),
@@ -1423,12 +1363,13 @@ function NativeSelectWidget(props) {
 // src/TextareaWidget/TextareaWidget.tsx
 import { Textarea } from "@chakra-ui/react";
 import {
-  ariaDescribedByIds as ariaDescribedByIds9,
+  ariaDescribedByIds as ariaDescribedByIds8,
   labelValue as labelValue8
 } from "@rjsf/utils";
 import { jsx as jsx34 } from "react/jsx-runtime";
 function TextareaWidget({
   id,
+  htmlName,
   placeholder,
   value,
   label,
@@ -1462,7 +1403,7 @@ function TextareaWidget({
         Textarea,
         {
           id,
-          name: id,
+          name: htmlName || id,
           value: value ?? "",
           placeholder,
           autoFocus: autofocus,
@@ -1470,7 +1411,7 @@ function TextareaWidget({
           onBlur: _onBlur,
           onFocus: _onFocus,
           rows: options.rows,
-          "aria-describedby": ariaDescribedByIds9(id)
+          "aria-describedby": ariaDescribedByIds8(id)
         }
       )
     }
@@ -1479,17 +1420,17 @@ function TextareaWidget({
 
 // src/UpDownWidget/UpDownWidget.tsx
 import {
-  ariaDescribedByIds as ariaDescribedByIds10,
+  ariaDescribedByIds as ariaDescribedByIds9,
   labelValue as labelValue9
 } from "@rjsf/utils";
 
 // src/components/ui/number-input.tsx
-import { forwardRef as forwardRef8, useEffect as useEffect2, useRef as useRef2 } from "react";
+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";
 var NumberInputRoot = forwardRef8(function NumberInput(props, ref) {
   const inputRef = useRef2(null);
-  useEffect2(() => {
+  useEffect(() => {
     if (inputRef.current) {
       inputRef.current.value = props.value || "";
     }
@@ -1528,7 +1469,7 @@ function UpDownWidget(props) {
           onValueChange: _onChange,
           onBlur: _onBlur,
           onFocus: _onFocus,
-          "aria-describedby": ariaDescribedByIds10(id),
+          "aria-describedby": ariaDescribedByIds9(id),
           id,
           name: id
         }