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

package/dist/index.cjs

@@ -99,11 +99,6 @@ function ArrayFieldTemplate(props) {
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils2.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = (0, import_utils2.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
@@ -148,7 +143,7 @@ function ArrayFieldTemplate(props) {
     ) }),
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_antd2.Col, { className: "row array-item-list", span: 24, children: [
       !showOptionalDataControlInTitle ? optionalDataControl : void 0,
-      items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key))
+      items
     ] }),
     canAdd && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Col, { span: 24, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Row, { gutter: rowGutter, justify: "end", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_antd2.Col, { flex: "192px", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
       AddButton2,
@@ -174,8 +169,9 @@ var INPUT_STYLE = {
 function BaseInputTemplate(props) {
   const {
     disabled,
-    formContext,
+    registry,
     id,
+    htmlName,
     onBlur,
     onChange,
     onChangeOverride,
@@ -187,6 +183,7 @@ function BaseInputTemplate(props) {
     value,
     type
   } = props;
+  const { formContext } = registry;
   const inputProps = (0, import_utils3.getInputProps)(schema, type, options, false);
   const { readonlyAsDisabled = true } = formContext;
   const handleNumberChange = (nextValue) => onChange(nextValue);
@@ -198,7 +195,7 @@ function BaseInputTemplate(props) {
     {
       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,
@@ -214,7 +211,7 @@ function BaseInputTemplate(props) {
     {
       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,
@@ -378,8 +375,9 @@ function FieldTemplate(props) {
     hidden,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     rawErrors,
     rawDescription,
     rawHelp,
@@ -425,8 +423,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -492,7 +491,7 @@ function ObjectFieldTemplate(props) {
     disabled,
     formData,
     fieldPathId,
-    onAddClick,
+    onAddProperty,
     optionalDataControl,
     properties,
     readonly,
@@ -584,7 +583,7 @@ function ObjectFieldTemplate(props) {
         id: (0, import_utils8.buttonId)(fieldPathId, "add"),
         className: "rjsf-object-property-expand",
         disabled: disabled || readonly,
-        onClick: onAddClick(schema),
+        onClick: onAddProperty,
         uiSchema,
         registry
       }
@@ -715,8 +714,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onRemoveProperty,
+    onKeyRenameBlur,
     readonly,
     required,
     registry,
@@ -739,7 +738,6 @@ function WrapIfAdditionalTemplate(props) {
   if (!additional) {
     return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames4, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target && target.value);
   const uiOptions = uiSchema ? uiSchema[import_utils10.UI_OPTIONS_KEY] : {};
   const buttonUiOptions = {
     ...uiSchema,
@@ -766,7 +764,7 @@ function WrapIfAdditionalTemplate(props) {
             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"
           }
@@ -780,7 +778,7 @@ function WrapIfAdditionalTemplate(props) {
         id: (0, import_utils10.buttonId)(id, "remove"),
         className: "rjsf-object-property-remove",
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema: buttonUiOptions,
         registry
       }
@@ -817,109 +815,34 @@ function generateTemplates() {
 var templates_default = generateTemplates();
 
 // src/widgets/AltDateWidget/index.tsx
-var import_react4 = require("react");
 var import_antd12 = require("antd");
 var import_utils11 = require("@rjsf/utils");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-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] = (0, import_react4.useState)((0, import_utils11.parseDateString)(value, showTime));
-  (0, import_react4.useEffect)(() => {
-    setState((0, import_utils11.parseDateString)(value, showTime));
-  }, [showTime, value]);
-  const handleChange = (property, nextValue) => {
-    const nextState = {
-      ...state,
-      [property]: typeof nextValue === "undefined" ? -1 : nextValue
-    };
-    if (readyForChange(nextState)) {
-      onChange((0, import_utils11.toDateString)(nextState, showTime));
-    } else {
-      setState(nextState);
-    }
-  };
-  const handleNow = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    const nextState = (0, import_utils11.parseDateString)((/* @__PURE__ */ new Date()).toJSON(), showTime);
-    onChange((0, import_utils11.toDateString)(nextState, showTime));
-  };
-  const handleClear = (event) => {
-    event.preventDefault();
-    if (disabled || readonly) {
-      return;
-    }
-    onChange(void 0);
-  };
-  const renderDateElement = (elemProps) => /* @__PURE__ */ (0, import_jsx_runtime16.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: (0, import_utils11.dateRangeOptions)(elemProps.range[0], elemProps.range[1])
-      },
-      placeholder: elemProps.type,
-      readonly: elemProps.readonly,
-      schema: { type: "integer" },
-      value: elemProps.value,
-      registry,
-      label: "",
-      "aria-describedby": (0, import_utils11.ariaDescribedByIds)(id)
-    }
-  );
+  const { elements, handleChange, handleClear, handleSetNow } = (0, import_utils11.useAltDateWidgetProps)(props);
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_antd12.Row, { gutter: [Math.floor(rowGutter / 2), Math.floor(rowGutter / 2)], children: [
-    (0, import_utils11.getDateElementProps)(
-      state,
-      showTime,
-      options.yearsRange,
-      options.format
-    ).map((elemProps, i) => {
-      const elemId = id + "_" + elemProps.type;
-      return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd12.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__ */ (0, import_jsx_runtime16.jsx)(import_antd12.Col, { flex: "88px", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        import_utils11.DateElement,
+        {
+          rootId: id,
+          name,
+          select: handleChange,
+          ...elemProps,
+          disabled,
+          readonly,
+          registry,
+          onBlur,
+          onFocus,
+          autofocus: autofocus && i === 0
+        }
+      ) }, elemId);
     }),
-    !options.hideNowButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd12.Col, { flex: "88px", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd12.Button, { block: true, className: "btn-now", onClick: handleNow, type: "primary", children: translateString(import_utils11.TranslatableString.NowLabel) }) }),
+    !options.hideNowButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd12.Col, { flex: "88px", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd12.Button, { block: true, className: "btn-now", onClick: handleSetNow, type: "primary", children: translateString(import_utils11.TranslatableString.NowLabel) }) }),
     !options.hideClearButton && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd12.Col, { flex: "88px", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_antd12.Button, { block: true, className: "btn-clear", danger: true, onClick: handleClear, type: "primary", children: translateString(import_utils11.TranslatableString.ClearLabel) }) })
   ] });
 }
@@ -930,25 +853,38 @@ AltDateWidget.defaultProps = {
     yearsRange: [1900, (/* @__PURE__ */ new Date()).getFullYear() + 2]
   },
   readonly: false,
-  showTime: false
+  time: false
 };
 
 // src/widgets/AltDateTimeWidget/index.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function AltDateTimeWidget(props) {
   const { AltDateWidget: AltDateWidget2 } = props.registry.widgets;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AltDateWidget2, { showTime: true, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(AltDateWidget2, { time: true, ...props });
 }
 AltDateTimeWidget.defaultProps = {
   ...AltDateWidget.defaultProps,
-  showTime: true
+  time: true
 };
 
 // src/widgets/CheckboxesWidget/index.tsx
 var import_antd13 = require("antd");
 var import_utils12 = require("@rjsf/utils");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-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((0, import_utils12.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
@@ -964,7 +900,7 @@ function CheckboxesWidget({ autofocus, disabled, formContext, id, onBlur, onChan
     import_antd13.Checkbox.Group,
     {
       disabled: disabled || readonlyAsDisabled && readonly,
-      name: id,
+      name: htmlName || id,
       onChange: !readonly ? handleChange : void 0,
       value: selectedIndexes,
       ...extraProps,
@@ -974,7 +910,7 @@ function CheckboxesWidget({ autofocus, disabled, formContext, id, onBlur, onChan
           import_antd13.Checkbox,
           {
             id: (0, import_utils12.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),
@@ -992,7 +928,8 @@ var import_antd14 = require("antd");
 var import_utils13 = require("@rjsf/utils");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 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);
@@ -1008,7 +945,7 @@ function CheckboxWidget(props) {
       checked: typeof value === "undefined" ? false : value,
       disabled: disabled || readonlyAsDisabled && readonly,
       id,
-      name: id,
+      name: htmlName || id,
       onChange: !readonly ? handleChange : void 0,
       ...extraProps,
       "aria-describedby": (0, import_utils13.ariaDescribedByIds)(id),
@@ -1026,7 +963,8 @@ var DATE_PICKER_STYLE = {
   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);
@@ -1060,7 +998,8 @@ var DATE_PICKER_STYLE2 = {
   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);
@@ -1090,7 +1029,8 @@ var import_antd17 = require("antd");
 var import_utils16 = require("@rjsf/utils");
 var import_jsx_runtime22 = require("react/jsx-runtime");
 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);
@@ -1119,8 +1059,9 @@ var import_jsx_runtime23 = require("react/jsx-runtime");
 function RadioWidget({
   autofocus,
   disabled,
-  formContext,
+  registry,
   id,
+  htmlName,
   onBlur,
   onChange,
   onFocus,
@@ -1128,6 +1069,7 @@ function RadioWidget({
   readonly,
   value
 }) {
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const handleChange = ({ target: { value: nextValue } }) => onChange((0, import_utils17.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
@@ -1139,7 +1081,7 @@ function RadioWidget({
     {
       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,
@@ -1149,7 +1091,7 @@ function RadioWidget({
         import_antd18.Radio,
         {
           id: (0, import_utils17.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),
@@ -1169,7 +1111,7 @@ function RangeWidget(props) {
   const {
     autofocus,
     disabled,
-    formContext,
+    registry,
     id,
     onBlur,
     onChange,
@@ -1180,6 +1122,7 @@ function RangeWidget(props) {
     schema,
     value
   } = props;
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const { min, max, step } = (0, import_utils18.rangeSpec)(schema);
   const emptyValue = options.emptyValue || "";
@@ -1213,7 +1156,7 @@ function RangeWidget(props) {
 var import_antd20 = require("antd");
 var import_utils19 = require("@rjsf/utils");
 var import_isString2 = __toESM(require("lodash/isString"), 1);
-var import_react5 = require("react");
+var import_react4 = require("react");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 var SELECT_STYLE = {
   width: "100%"
@@ -1221,8 +1164,9 @@ var SELECT_STYLE = {
 function SelectWidget({
   autofocus,
   disabled,
-  formContext = {},
+  registry,
   id,
+  htmlName,
   multiple,
   onBlur,
   onChange,
@@ -1233,6 +1177,7 @@ function SelectWidget({
   value,
   schema
 }) {
+  const { formContext } = registry;
   const { readonlyAsDisabled = true } = formContext;
   const { enumOptions, enumDisabled, emptyValue } = options;
   const handleChange = (nextValue) => onChange((0, import_utils19.enumOptionsValueForIndex)(nextValue, enumOptions, emptyValue));
@@ -1247,10 +1192,10 @@ function SelectWidget({
   const getPopupContainer = (node) => node.parentNode;
   const selectedIndexes = (0, import_utils19.enumOptionsIndexForValue)(value, enumOptions, multiple);
   const extraProps = {
-    name: id
+    name: htmlName || id
   };
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  const selectOptions = (0, import_react5.useMemo)(() => {
+  const selectOptions = (0, import_react4.useMemo)(() => {
     if (Array.isArray(enumOptions)) {
       const options2 = enumOptions.map(({ value: optionValue, label: optionLabel }, index) => ({
         disabled: Array.isArray(enumDisabled) && enumDisabled.indexOf(optionValue) !== -1,
@@ -1296,8 +1241,9 @@ var INPUT_STYLE3 = {
 };
 function TextareaWidget({
   disabled,
-  formContext,
+  registry,
   id,
+  htmlName,
   onBlur,
   onChange,
   onFocus,
@@ -1306,6 +1252,7 @@ function TextareaWidget({
   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);
@@ -1318,7 +1265,7 @@ function TextareaWidget({
     {
       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,