@rjsf/antd 6.0.0-beta.9 → 6.0.1

package/dist/antd.umd.js

@@ -33,9 +33,9 @@
       canAdd,
       className,
       disabled,
-      formContext,
-      idSchema,
+      fieldPathId,
       items,
+      optionalDataControl,
       onAddClick,
       readonly,
       registry,
@@ -50,16 +50,13 @@
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
+    const { formContext } = registry;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -72,33 +69,37 @@
       labelAlign === "left" && `${labelClsBasic}-left`
       // labelCol.className,
     );
-    return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className, id: idSchema.$id, children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: rowGutter, children: [
+    return /* @__PURE__ */ jsxRuntime.jsx("fieldset", { className, id: fieldPathId.$id, children: /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: rowGutter, children: [
       (uiOptions.title || title) && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldTitleTemplate,
         {
-          idSchema,
+          fieldPathId,
           required,
           title: uiOptions.title || title,
           schema,
           uiSchema,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ) }),
       (uiOptions.description || schema.description) && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, style: DESCRIPTION_COL_STYLE, children: /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldDescriptionTemplate,
         {
           description: uiOptions.description || schema.description,
-          idSchema,
+          fieldPathId,
           schema,
           uiSchema,
           registry
         }
       ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: "row array-item-list", span: 24, children: items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(antd.Col, { className: "row array-item-list", span: 24, children: [
+        !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+        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,
         {
-          id: utils.buttonId(idSchema, "add"),
+          id: utils.buttonId(fieldPathId, "add"),
           className: "rjsf-array-item-add",
           disabled: disabled || readonly,
           onClick: onAddClick,
@@ -114,8 +115,9 @@
   function BaseInputTemplate(props) {
     const {
       disabled,
-      formContext,
+      registry,
       id,
+      htmlName,
       onBlur,
       onChange,
       onChangeOverride,
@@ -127,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);
@@ -138,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,
@@ -154,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,
@@ -200,13 +203,18 @@
     );
   }
   function IconButton(props) {
-    const { iconType = "default", icon, onClick, uiSchema, registry, ...otherProps } = props;
+    const { iconType = "default", icon, onClick, uiSchema, registry, color, ...otherProps } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(
       antd.Button,
       {
         onClick,
         type: iconType,
         icon,
+        color,
+        style: {
+          paddingTop: "4px"
+          /* Center the button */
+        },
         ...otherProps
       }
     );
@@ -219,9 +227,9 @@
       IconButton,
       {
         title: translateString(utils.TranslatableString.AddItemButton),
-        ...props,
-        block: true,
         iconType: "primary",
+        block: true,
+        ...props,
         icon: /* @__PURE__ */ jsxRuntime.jsx(PlusCircleOutlined, {})
       }
     );
@@ -253,20 +261,20 @@
       IconButton,
       {
         title: translateString(utils.TranslatableString.RemoveButton),
-        ...props,
         danger: true,
         block: !!options.block,
         iconType: "primary",
+        ...props,
         icon: /* @__PURE__ */ jsxRuntime.jsx(DeleteOutlined, {})
       }
     );
   }
   function FieldErrorTemplate(props) {
-    const { errors = [], idSchema } = props;
+    const { errors = [], fieldPathId } = props;
     if (errors.length === 0) {
       return null;
     }
-    const id = utils.errorId(idSchema);
+    const id = utils.errorId(fieldPathId);
     return /* @__PURE__ */ jsxRuntime.jsx("div", { id, children: errors.map((error) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: error }, `field-${id}-error-${error}`)) });
   }
   var VERTICAL_LABEL_COL = { span: 24 };
@@ -280,13 +288,13 @@
       disabled,
       displayLabel,
       errors,
-      formContext,
       help,
       hidden,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       rawErrors,
       rawDescription,
       rawHelp,
@@ -296,6 +304,7 @@
       schema,
       uiSchema
     } = props;
+    const { formContext } = registry;
     const {
       colon,
       labelCol = VERTICAL_LABEL_COL,
@@ -331,8 +340,9 @@
         disabled,
         id,
         label,
-        onDropPropertyClick,
-        onKeyChange,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
         readonly,
         required,
         schema,
@@ -365,6 +375,13 @@
     }
     return /* @__PURE__ */ jsxRuntime.jsx(antd.Row, { ...rest, children });
   }
+  function MultiSchemaFieldTemplate(props) {
+    const { optionSchemaField, selector } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { children: selector }),
+      optionSchemaField
+    ] });
+  }
   var DESCRIPTION_COL_STYLE2 = {
     paddingBottom: "8px"
   };
@@ -372,10 +389,10 @@
     const {
       description,
       disabled,
-      formContext,
       formData,
-      idSchema,
-      onAddClick,
+      fieldPathId,
+      onAddProperty,
+      optionalDataControl,
       properties,
       readonly,
       required,
@@ -391,6 +408,8 @@
       registry,
       uiOptions
     );
+    const { formContext } = registry;
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -431,44 +450,79 @@
       labelAlign === "left" && `${labelClsBasic}-left`
       // labelCol.className,
     );
-    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: idSchema.$id, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("fieldset", { id: fieldPathId.$id, children: [
       /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { gutter: rowGutter, children: [
         title && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { className: labelColClassName, span: 24, children: /* @__PURE__ */ jsxRuntime.jsx(
           TitleFieldTemplate,
           {
-            id: utils.titleId(idSchema),
+            id: utils.titleId(fieldPathId),
             title,
             required,
             schema,
             uiSchema,
-            registry
+            registry,
+            optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
           }
         ) }),
         description && /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, style: DESCRIPTION_COL_STYLE2, children: /* @__PURE__ */ jsxRuntime.jsx(
           DescriptionFieldTemplate,
           {
-            id: utils.descriptionId(idSchema),
+            id: utils.descriptionId(fieldPathId),
             description,
             schema,
             uiSchema,
             registry
           }
         ) }),
+        !showOptionalDataControlInTitle ? /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: 24, children: optionalDataControl }) : void 0,
         properties.filter((e) => !e.hidden).map((element) => /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { span: calculateColSpan(element), children: element.content }, element.name))
       ] }),
       utils.canExpand(schema, uiSchema, formData) && /* @__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,
         {
-          id: utils.buttonId(idSchema, "add"),
+          id: utils.buttonId(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
           disabled: disabled || readonly,
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           uiSchema,
           registry
         }
       ) }) }) })
     ] });
   }
+  function OptionalDataControlsTemplate(props) {
+    const { id, registry, label, onAddClick, onRemoveClick } = props;
+    if (onAddClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        AddButton,
+        {
+          id,
+          registry,
+          className: "rjsf-add-optional-data",
+          onClick: onAddClick,
+          title: label,
+          size: "small",
+          iconType: "default",
+          block: false
+        }
+      );
+    } else if (onRemoveClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RemoveButton,
+        {
+          id,
+          registry,
+          className: "rjsf-remove-optional-data",
+          onClick: onRemoveClick,
+          title: label,
+          size: "small",
+          iconType: "default",
+          block: false
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
+  }
   function SubmitButton({ uiSchema }) {
     const { submitText, norender, props: submitButtonProps } = utils.getSubmitButtonOptions(uiSchema);
     if (norender) {
@@ -480,7 +534,8 @@
     id,
     required,
     registry,
-    title
+    title,
+    optionalDataControl
   }) {
     const { formContext } = registry;
     const { colon = true } = formContext;
@@ -503,7 +558,7 @@
       [`${prefixCls}-item-required`]: required,
       [`${prefixCls}-item-no-colon`]: !colon
     });
-    return title ? /* @__PURE__ */ jsxRuntime.jsx(
+    let heading = title ? /* @__PURE__ */ jsxRuntime.jsx(
       "label",
       {
         className: labelClassName,
@@ -513,6 +568,19 @@
         children: labelChildren
       }
     ) : null;
+    if (optionalDataControl) {
+      heading = /* @__PURE__ */ jsxRuntime.jsxs(antd.Row, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "auto", children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(antd.Col, { flex: "none", children: optionalDataControl })
+      ] });
+    }
+    return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      heading,
+      /* @__PURE__ */ jsxRuntime.jsx(antd.Divider, { size: "small", style: {
+        marginBlock: "1px"
+        /* pull the margin right up against the label */
+      } })
+    ] });
   }
   var VERTICAL_LABEL_COL2 = { span: 24 };
   var VERTICAL_WRAPPER_COL2 = { span: 24 };
@@ -527,8 +595,8 @@
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onRemoveProperty,
+      onKeyRenameBlur,
       readonly,
       required,
       registry,
@@ -551,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,
@@ -578,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"
             }
@@ -592,7 +659,7 @@
           id: utils.buttonId(id, "remove"),
           className: "rjsf-object-property-remove",
           disabled: disabled || readonly,
-          onClick: onDropPropertyClick(label),
+          onClick: onRemoveProperty,
           uiSchema: buttonUiOptions,
           registry
         }
@@ -619,111 +686,39 @@
       FieldErrorTemplate,
       FieldTemplate,
       GridTemplate,
+      MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
+      OptionalDataControlsTemplate,
       TitleFieldTemplate: TitleField,
       WrapIfAdditionalTemplate
     };
   }
   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) }) })
     ] });
   }
@@ -734,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));
@@ -760,7 +768,7 @@
       antd.Checkbox.Group,
       {
         disabled: disabled || readonlyAsDisabled && readonly,
-        name: id,
+        name: htmlName || id,
         onChange: !readonly ? handleChange : void 0,
         value: selectedIndexes,
         ...extraProps,
@@ -770,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),
@@ -783,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);
@@ -799,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),
@@ -811,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);
@@ -839,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);
@@ -864,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);
@@ -888,8 +900,9 @@
   function RadioWidget({
     autofocus,
     disabled,
-    formContext,
+    registry,
     id,
+    htmlName,
     onBlur,
     onChange,
     onFocus,
@@ -897,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));
@@ -908,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,
@@ -918,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),
@@ -933,7 +947,7 @@
     const {
       autofocus,
       disabled,
-      formContext,
+      registry,
       id,
       onBlur,
       onChange,
@@ -944,6 +958,7 @@
       schema,
       value
     } = props;
+    const { formContext } = registry;
     const { readonlyAsDisabled = true } = formContext;
     const { min, max, step } = utils.rangeSpec(schema);
     const emptyValue = options.emptyValue || "";
@@ -978,8 +993,9 @@
   function SelectWidget({
     autofocus,
     disabled,
-    formContext = {},
+    registry,
     id,
+    htmlName,
     multiple,
     onBlur,
     onChange,
@@ -990,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));
@@ -1004,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(() => {
@@ -1048,8 +1065,9 @@
   };
   function TextareaWidget({
     disabled,
-    formContext,
+    registry,
     id,
+    htmlName,
     onBlur,
     onChange,
     onFocus,
@@ -1058,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);
@@ -1070,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,