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

package/dist/chakra-ui.umd.js

@@ -49,11 +49,6 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
@@ -89,7 +84,7 @@
       /* @__PURE__ */ jsxRuntime.jsxs(react$1.Grid, { children: [
         /* @__PURE__ */ jsxRuntime.jsxs(react$1.GridItem, { children: [
           !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-          items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key))
+          items
         ] }),
         canAdd && /* @__PURE__ */ jsxRuntime.jsx(react$1.GridItem, { justifySelf: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
@@ -130,6 +125,7 @@
   function BaseInputTemplate(props) {
     const {
       id,
+      htmlName,
       type,
       value,
       label,
@@ -168,7 +164,7 @@
             react$1.Input,
             {
               id,
-              name: id,
+              name: htmlName || id,
               value: value || value === 0 ? value : "",
               onChange: onChangeOverride || _onChange,
               onBlur: _onBlur,
@@ -294,8 +290,9 @@
       displayLabel,
       hidden,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       registry,
       required,
@@ -324,8 +321,9 @@
         disabled,
         id,
         label,
-        onDropPropertyClick,
-        onKeyChange,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
         readonly,
         required,
         schema,
@@ -367,7 +365,7 @@
       schema,
       formData,
       optionalDataControl,
-      onAddClick,
+      onAddProperty,
       registry
     } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
@@ -414,7 +412,7 @@
           {
             id: utils.buttonId(fieldPathId, "add"),
             className: "rjsf-object-property-expand",
-            onClick: onAddClick(schema),
+            onClick: onAddProperty,
             disabled: disabled || readonly,
             uiSchema,
             registry
@@ -488,8 +486,8 @@
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onRemoveProperty,
+      onKeyRenameBlur,
       readonly,
       registry,
       required,
@@ -503,7 +501,6 @@
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
     }
-    const handleBlur = ({ target }) => onKeyChange(target.value);
     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,
@@ -512,7 +509,7 @@
           disabled: disabled || readonly,
           id: `${id}-key`,
           name: `${id}-key`,
-          onBlur: !readonly ? handleBlur : void 0,
+          onBlur: !readonly ? onKeyRenameBlur : void 0,
           type: "text",
           mb: 1
         }
@@ -524,7 +521,7 @@
           id: utils.buttonId(id, "remove"),
           className: "rjsf-object-property-remove",
           disabled: disabled || readonly,
-          onClick: onDropPropertyClick(label),
+          onClick: onRemoveProperty,
           uiSchema,
           registry
         }
@@ -560,92 +557,35 @@
     };
   }
   var Templates_default = generateTemplates();
-  function DateElement(props) {
-    const { SelectWidget: SelectWidget2 } = props.registry.widgets;
-    const value = props.value ? props.value : void 0;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      SelectWidget2,
-      {
-        ...props,
-        label: "",
-        className: "form-control",
-        onChange: (elemValue) => props.select(props.type, elemValue),
-        options: {
-          enumOptions: utils.dateRangeOptions(props.range[0], props.range[1])
-        },
-        placeholder: props.type,
-        schema: { type: "integer" },
-        value,
-        "aria-describedby": utils.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] = react.useState(utils.parseDateString(value, showTime));
-    react.useEffect(() => {
-      setState(utils.parseDateString(value, showTime));
-    }, [showTime, value]);
-    const handleChange = (property, nextValue) => {
-      const nextState = {
-        ...state,
-        [property]: typeof nextValue === "undefined" ? -1 : nextValue
-      };
-      if (readyForChange(nextState)) {
-        onChange(utils.toDateString(nextState, showTime));
-      } else {
-        setState(nextState);
-      }
-    };
-    const handleNow = (event) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      const nextState = utils.parseDateString((/* @__PURE__ */ new Date()).toJSON(), showTime);
-      onChange(utils.toDateString(nextState, showTime));
-    };
-    const handleClear = (event) => {
-      event.preventDefault();
-      if (disabled || readonly) {
-        return;
-      }
-      onChange(void 0);
-    };
+    const { elements, handleChange, handleClear, handleSetNow } = utils.useAltDateWidgetProps(props);
     const chakraProps = getChakra({ uiSchema: props.uiSchema });
     return /* @__PURE__ */ jsxRuntime.jsxs(react$1.FieldsetRoot, { ...chakraProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { display: "flex", flexWrap: "wrap", alignItems: "center", children: utils.getDateElementProps(
-        state,
-        showTime,
-        options.yearsRange,
-        options.format
-      ).map((elemProps, i) => {
-        const elemId = id + "_" + elemProps.type;
-        return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { mr: "2", mb: "2", children: /* @__PURE__ */ jsxRuntime.jsx(
-          DateElement,
+      /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { display: "flex", flexWrap: "wrap", alignItems: "center", children: elements.map((elemProps, i) => {
+        const elemId = `${id}_${elemProps.type}`;
+        return /* @__PURE__ */ jsxRuntime.jsx(react$1.Box, { mr: "2", mb: "2", width: "20", children: /* @__PURE__ */ jsxRuntime.jsx(
+          utils.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__ */ jsxRuntime.jsxs(react$1.Box, { display: "flex", children: [
-        !options.hideNowButton && /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { onClick: (e) => handleNow(e), mr: "2", children: translateString(utils.TranslatableString.NowLabel) }),
-        !options.hideClearButton && /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { onClick: (e) => handleClear(e), children: translateString(utils.TranslatableString.ClearLabel) })
+        !options.hideNowButton && /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { onClick: handleSetNow, mr: "2", children: translateString(utils.TranslatableString.NowLabel) }),
+        !options.hideClearButton && /* @__PURE__ */ jsxRuntime.jsx(react$1.Button, { onClick: handleClear, children: translateString(utils.TranslatableString.ClearLabel) })
       ] })
     ] });
   }
@@ -653,7 +593,7 @@
     autofocus: false,
     disabled: false,
     readonly: false,
-    showTime: false,
+    time: false,
     options: {
       yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
     }
@@ -661,11 +601,11 @@
   var AltDateWidget_default = AltDateWidget;
   function AltDateTimeWidget(props) {
     const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { ...props, showTime: true });
+    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { ...props, time: true });
   }
   AltDateTimeWidget.defaultProps = {
     ...AltDateWidget_default.defaultProps,
-    showTime: true
+    time: true
   };
   var AltDateTimeWidget_default = AltDateTimeWidget;
   var Checkbox = react.forwardRef(function Checkbox2(props, ref) {
@@ -679,6 +619,7 @@
   function CheckboxWidget(props) {
     const {
       id,
+      htmlName,
       value,
       disabled,
       readonly,
@@ -718,7 +659,7 @@
         Checkbox,
         {
           id,
-          name: id,
+          name: htmlName || id,
           checked: typeof value === "undefined" ? false : value,
           disabled: disabled || readonly,
           onCheckedChange: _onChange,
@@ -733,6 +674,7 @@
   function CheckboxesWidget(props) {
     const {
       id,
+      htmlName,
       disabled,
       options,
       value,
@@ -774,7 +716,7 @@
                 Checkbox,
                 {
                   id: utils.optionId(id, index),
-                  name: id,
+                  name: htmlName || id,
                   value: String(index),
                   disabled: disabled || itemDisabled || readonly,
                   onBlur: _onBlur,
@@ -800,6 +742,7 @@
   var RadioGroup = react$1.RadioGroup.Root;
   function RadioWidget({
     id,
+    htmlName,
     options,
     value,
     required,
@@ -835,7 +778,7 @@
             onBlur: _onBlur,
             onFocus: _onFocus,
             value: selectedIndex,
-            name: id,
+            name: htmlName || id,
             "aria-describedby": utils.ariaDescribedByIds(id),
             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;
@@ -985,6 +928,7 @@
   function SelectWidget(props) {
     const {
       id,
+      htmlName,
       options,
       label,
       hideLabel,
@@ -1069,7 +1013,7 @@
           {
             collection: selectOptions,
             id,
-            name: id,
+            name: htmlName || id,
             multiple: isMultiple,
             closeOnSelect: !isMultiple,
             onBlur: _onBlur,
@@ -1180,6 +1124,7 @@
   }
   function TextareaWidget({
     id,
+    htmlName,
     placeholder,
     value,
     label,
@@ -1213,7 +1158,7 @@
           react$1.Textarea,
           {
             id,
-            name: id,
+            name: htmlName || id,
             value: value ?? "",
             placeholder,
             autoFocus: autofocus,