@rjsf/antd 6.0.0-beta.21 → 6.0.0-beta.23

package/dist/antd.umd.js

@@ -50,11 +50,6 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
@@ -99,7 +94,7 @@
       ) }),
       /* @__PURE__ */ jsxRuntime.jsxs(antd.Col, { className: "row array-item-list", span: 24, children: [
         !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-        items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key))
+        items
       ] }),
       canAdd && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "192px", children: /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
@@ -120,8 +115,9 @@
   function BaseInputTemplate(props) {
     const {
       disabled,
-      formContext,
+      registry,
       id,
+      htmlName,
       onBlur,
       onChange,
       onChangeOverride,
@@ -133,6 +129,7 @@
       value,
       type
     } = props;
+    const { formContext } = registry;
     const inputProps = utils.getInputProps(schema, type, options, false);
     const { readonlyAsDisabled = true } = formContext;
     const handleNumberChange = (nextValue) => onChange(nextValue);
@@ -144,7 +141,7 @@
       {
         disabled: disabled || readonlyAsDisabled && readonly,
         id,
-        name: id,
+        name: htmlName || id,
         onBlur: !readonly ? handleBlur : void 0,
         onChange: !readonly ? handleNumberChange : void 0,
         onFocus: !readonly ? handleFocus : void 0,
@@ -160,7 +157,7 @@
       {
         disabled: disabled || readonlyAsDisabled && readonly,
         id,
-        name: id,
+        name: htmlName || id,
         onBlur: !readonly ? handleBlur : void 0,
         onChange: !readonly ? handleTextChange : void 0,
         onFocus: !readonly ? handleFocus : void 0,
@@ -295,8 +292,9 @@
       hidden,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       rawErrors,
       rawDescription,
       rawHelp,
@@ -342,8 +340,9 @@
         disabled,
         id,
         label,
-        onDropPropertyClick,
-        onKeyChange,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
         readonly,
         required,
         schema,
@@ -392,7 +391,7 @@
       disabled,
       formData,
       fieldPathId,
-      onAddClick,
+      onAddProperty,
       optionalDataControl,
       properties,
       readonly,
@@ -484,7 +483,7 @@
           id: utils.buttonId(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
           disabled: disabled || readonly,
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           uiSchema,
           registry
         }
@@ -596,8 +595,8 @@
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onRemoveProperty,
+      onKeyRenameBlur,
       readonly,
       required,
       registry,
@@ -620,7 +619,6 @@
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames4, style, children });
     }
-    const handleBlur = ({ target }) => onKeyChange(target && target.value);
     const uiOptions = uiSchema ? uiSchema[utils.UI_OPTIONS_KEY] : {};
     const buttonUiOptions = {
       ...uiSchema,
@@ -647,7 +645,7 @@
               disabled: disabled || readonlyAsDisabled && readonly,
               id: `${id}-key`,
               name: `${id}-key`,
-              onBlur: !readonly ? handleBlur : void 0,
+              onBlur: !readonly ? onKeyRenameBlur : void 0,
               style: INPUT_STYLE2,
               type: "text"
             }
@@ -661,7 +659,7 @@
           id: utils.buttonId(id, "remove"),
           className: "rjsf-object-property-remove",
           disabled: disabled || readonly,
-          onClick: onDropPropertyClick(label),
+          onClick: onRemoveProperty,
           uiSchema: buttonUiOptions,
           registry
         }
@@ -696,105 +694,31 @@
     };
   }
   var templates_default = generateTemplates();
-  var readyForChange = (state) => {
-    return Object.values(state).every((value) => value !== -1);
-  };
   function AltDateWidget(props) {
-    const {
-      autofocus,
-      disabled,
-      formContext,
-      id,
-      onBlur,
-      onChange,
-      onFocus,
-      options,
-      readonly,
-      registry,
-      showTime,
-      value
-    } = props;
-    const { translateString, widgets } = registry;
-    const { SelectWidget: SelectWidget2 } = widgets;
+    const { autofocus, disabled, id, name, onBlur, onFocus, options, readonly, registry } = props;
+    const { formContext, translateString } = registry;
     const { rowGutter = 24 } = formContext;
-    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 renderDateElement = (elemProps) => /* @__PURE__ */ jsxRuntime.jsx(
-      SelectWidget2,
-      {
-        autofocus: elemProps.autofocus,
-        className: "form-control",
-        disabled: elemProps.disabled,
-        id: elemProps.id,
-        name: elemProps.name,
-        onBlur: elemProps.onBlur,
-        onChange: (elemValue) => elemProps.select(elemProps.type, elemValue),
-        onFocus: elemProps.onFocus,
-        options: {
-          enumOptions: utils.dateRangeOptions(elemProps.range[0], elemProps.range[1])
-        },
-        placeholder: elemProps.type,
-        readonly: elemProps.readonly,
-        schema: { type: "integer" },
-        value: elemProps.value,
-        registry,
-        label: "",
-        "aria-describedby": utils.ariaDescribedByIds(id)
-      }
-    );
+    const { elements, handleChange, handleClear, handleSetNow } = utils.useAltDateWidgetProps(props);
     return /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
-      utils.getDateElementProps(
-        state,
-        showTime,
-        options.yearsRange,
-        options.format
-      ).map((elemProps, i) => {
-        const elemId = id + "_" + elemProps.type;
-        return /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: renderDateElement({
-          ...elemProps,
-          autofocus: autofocus && i === 0,
-          disabled,
-          id: elemId,
-          name: id,
-          onBlur,
-          onFocus,
-          readonly,
-          registry,
-          select: handleChange,
-          // NOTE: antd components accept -1 rather than issue a warning
-          // like material-ui, so we need to convert -1 to undefined here.
-          value: elemProps.value || -1 < 0 ? void 0 : elemProps.value
-        }) }, elemId);
+      elements.map((elemProps, i) => {
+        const elemId = `${id}_${elemProps.type}`;
+        return /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(
+          utils.DateElement,
+          {
+            rootId: id,
+            name,
+            select: handleChange,
+            ...elemProps,
+            disabled,
+            readonly,
+            registry,
+            onBlur,
+            onFocus,
+            autofocus: autofocus && i === 0
+          }
+        ) }, elemId);
       }),
-      !options.hideNowButton && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { block: true, className: "btn-now", onClick: handleNow, type: "primary", children: translateString(utils.TranslatableString.NowLabel) }) }),
+      !options.hideNowButton && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { block: true, className: "btn-now", onClick: handleSetNow, type: "primary", children: translateString(utils.TranslatableString.NowLabel) }) }),
       !options.hideClearButton && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "88px", children: /* @__PURE__ */ jsxRuntime.jsx(antd.Button, { block: true, className: "btn-clear", danger: true, onClick: handleClear, type: "primary", children: translateString(utils.TranslatableString.ClearLabel) }) })
     ] });
   }
@@ -805,17 +729,30 @@
       yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
     },
     readonly: false,
-    showTime: false
+    time: false
   };
   function AltDateTimeWidget(props) {
     const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { showTime: true, ...props });
+    return /* @__PURE__ */ jsxRuntime.jsx(AltDateWidget2, { time: true, ...props });
   }
   AltDateTimeWidget.defaultProps = {
     ...AltDateWidget.defaultProps,
-    showTime: true
+    time: true
   };
-  function CheckboxesWidget({ autofocus, disabled, formContext, id, onBlur, onChange, onFocus, options, readonly, value }) {
+  function CheckboxesWidget({
+    autofocus,
+    disabled,
+    registry,
+    id,
+    htmlName,
+    onBlur,
+    onChange,
+    onFocus,
+    options,
+    readonly,
+    value
+  }) {
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const handleChange = (nextValue) => onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
@@ -831,7 +768,7 @@
       antd.Checkbox.Group,
       {
         disabled: disabled || readonlyAsDisabled && readonly,
-        name: id,
+        name: htmlName || id,
         onChange: !readonly ? handleChange : void 0,
         value: selectedIndexes,
         ...extraProps,
@@ -841,7 +778,7 @@
             antd.Checkbox,
             {
               id: utils.optionId(id, i),
-              name: id,
+              name: htmlName || id,
               autoFocus: i === 0 ? autofocus : false,
               disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
               value: String(i),
@@ -854,7 +791,8 @@
     ) }) : null;
   }
   function CheckboxWidget(props) {
-    const { autofocus, disabled, formContext, id, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
+    const { autofocus, disabled, registry, id, htmlName, label, hideLabel, onBlur, onChange, onFocus, readonly, value } = props;
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const handleChange = ({ target }) => onChange(target.checked);
     const handleBlur = ({ target }) => onBlur(id, target && target.checked);
@@ -870,7 +808,7 @@
         checked: typeof value === "undefined" ? false : value,
         disabled: disabled || readonlyAsDisabled && readonly,
         id,
-        name: id,
+        name: htmlName || id,
         onChange: !readonly ? handleChange : void 0,
         ...extraProps,
         "aria-describedby": utils.ariaDescribedByIds(id),
@@ -882,7 +820,8 @@
     width: "100%"
   };
   function DateTimeWidget(props) {
-    const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+    const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const handleChange = (nextValue) => onChange(nextValue && nextValue.toISOString());
     const handleBlur = () => onBlur(id, value);
@@ -910,7 +849,8 @@
     width: "100%"
   };
   function DateWidget(props) {
-    const { disabled, formContext, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+    const { disabled, registry, id, onBlur, onChange, onFocus, placeholder, readonly, value } = props;
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const handleChange = (nextValue) => onChange(nextValue && nextValue.format("YYYY-MM-DD"));
     const handleBlur = () => onBlur(id, value);
@@ -935,7 +875,8 @@
     );
   }
   function PasswordWidget(props) {
-    const { disabled, formContext, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props;
+    const { disabled, registry, id, onBlur, onChange, onFocus, options, placeholder, readonly, value } = props;
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const emptyValue = options.emptyValue || "";
     const handleChange = ({ target }) => onChange(target.value === "" ? emptyValue : target.value);
@@ -959,8 +900,9 @@
   function RadioWidget({
     autofocus,
     disabled,
-    formContext,
+    registry,
     id,
+    htmlName,
     onBlur,
     onChange,
     onFocus,
@@ -968,6 +910,7 @@
     readonly,
     value
   }) {
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const { enumOptions, enumDisabled, emptyValue } = options;
     const handleChange = ({ target: { value: nextValue } }) => onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
@@ -979,7 +922,7 @@
       {
         disabled: disabled || readonlyAsDisabled && readonly,
         id,
-        name: id,
+        name: htmlName || id,
         onChange: !readonly ? handleChange : void 0,
         onBlur: !readonly ? handleBlur : void 0,
         onFocus: !readonly ? handleFocus : void 0,
@@ -989,7 +932,7 @@
           antd.Radio,
           {
             id: utils.optionId(id, i),
-            name: id,
+            name: htmlName || id,
             autoFocus: i === 0 ? autofocus : false,
             disabled: disabled || Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1,
             value: String(i),
@@ -1004,7 +947,7 @@
     const {
       autofocus,
       disabled,
-      formContext,
+      registry,
       id,
       onBlur,
       onChange,
@@ -1015,6 +958,7 @@
       schema,
       value
     } = props;
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const { min, max, step } = utils.rangeSpec(schema);
     const emptyValue = options.emptyValue || "";
@@ -1049,8 +993,9 @@
   function SelectWidget({
     autofocus,
     disabled,
-    formContext = {},
+    registry,
     id,
+    htmlName,
     multiple,
     onBlur,
     onChange,
@@ -1061,6 +1006,7 @@
     value,
     schema
   }) {
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const { enumOptions, enumDisabled, emptyValue } = options;
     const handleChange = (nextValue) => onChange(utils.enumOptionsValueForIndex(nextValue, enumOptions, emptyValue));
@@ -1075,7 +1021,7 @@
     const getPopupContainer = (node) => node.parentNode;
     const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
     const extraProps = {
-      name: id
+      name: htmlName || id
     };
     const showPlaceholderOption = !multiple && schema.default === void 0;
     const selectOptions = react.useMemo(() => {
@@ -1119,8 +1065,9 @@
   };
   function TextareaWidget({
     disabled,
-    formContext,
+    registry,
     id,
+    htmlName,
     onBlur,
     onChange,
     onFocus,
@@ -1129,6 +1076,7 @@
     readonly,
     value
   }) {
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const handleChange = ({ target }) => onChange(target.value === "" ? options.emptyValue : target.value);
     const handleBlur = ({ target }) => onBlur(id, target && target.value);
@@ -1141,7 +1089,7 @@
       {
         disabled: disabled || readonlyAsDisabled && readonly,
         id,
-        name: id,
+        name: htmlName || id,
         onBlur: !readonly ? handleBlur : void 0,
         onChange: !readonly ? handleChange : void 0,
         onFocus: !readonly ? handleFocus : void 0,