@rjsf/mui 6.0.0-beta.9 → 6.0.0

package/dist/mui.esm.js

@@ -56,23 +56,32 @@ import {
 } from "@rjsf/utils";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
 function ArrayFieldTemplate(props) {
-  const { canAdd, disabled, idSchema, uiSchema, items, onAddClick, readonly, registry, required, schema, title } = props;
+  const {
+    canAdd,
+    disabled,
+    fieldPathId,
+    uiSchema,
+    items,
+    optionalDataControl,
+    onAddClick,
+    readonly,
+    registry,
+    required,
+    schema,
+    title
+  } = props;
   const uiOptions = getUiOptions2(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate2(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = getTemplate2(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = getTemplate2(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -80,29 +89,31 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ jsx3(
       ArrayFieldTitleTemplate,
       {
-        idSchema,
+        fieldPathId,
         title: uiOptions.title || title,
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ jsx3(
       ArrayFieldDescriptionTemplate,
       {
-        idSchema,
+        fieldPathId,
         description: uiOptions.description || schema.description,
         schema,
         uiSchema,
         registry
       }
     ),
-    items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsx3(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+    !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+    items,
     canAdd && /* @__PURE__ */ jsx3(Grid2, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsx3(Grid2, { children: /* @__PURE__ */ jsx3(Box2, { mt: 2, children: /* @__PURE__ */ jsx3(
       AddButton2,
       {
-        id: buttonId(idSchema, "add"),
+        id: buttonId(fieldPathId, "add"),
         className: "rjsf-array-item-add",
         onClick: onAddClick,
         disabled: disabled || readonly,
@@ -128,6 +139,7 @@ function BaseInputTemplate(props) {
     id,
     name,
     // remove this from textFieldProps
+    htmlName,
     placeholder,
     required,
     readonly,
@@ -147,7 +159,6 @@ function BaseInputTemplate(props) {
     uiSchema,
     rawErrors = [],
     errorSchema,
-    formContext,
     registry,
     InputLabelProps,
     ...textFieldProps
@@ -167,7 +178,7 @@ function BaseInputTemplate(props) {
       TextField,
       {
         id,
-        name: id,
+        name: htmlName || id,
         placeholder,
         label: labelValue(label || void 0, hideLabel, void 0),
         autoFocus: autofocus,
@@ -303,11 +314,11 @@ import List2 from "@mui/material/List";
 import { errorId } from "@rjsf/utils";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function FieldErrorTemplate(props) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = errorId(idSchema);
+  const id = errorId(fieldPathId);
   return /* @__PURE__ */ jsx8(List2, { id, dense: true, disablePadding: true, children: errors.map((error, i) => {
     return /* @__PURE__ */ jsx8(ListItem2, { disableGutters: true, children: /* @__PURE__ */ jsx8(FormHelperText, { component: "div", id: `${id}-${i}`, children: error }) }, i);
   }) });
@@ -318,11 +329,11 @@ import FormHelperText2 from "@mui/material/FormHelperText";
 import { helpId } from "@rjsf/utils";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = helpId(idSchema);
+  const id = helpId(fieldPathId);
   return /* @__PURE__ */ jsx9(FormHelperText2, { component: "div", id, children: help });
 }
 
@@ -344,8 +355,9 @@ function FieldTemplate(props) {
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     rawErrors = [],
@@ -374,8 +386,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -399,6 +412,18 @@ function GridTemplate(props) {
   return /* @__PURE__ */ jsx11(Grid3, { container: !column, ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+import Box4 from "@mui/material/Box";
+import FormControl2 from "@mui/material/FormControl";
+import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function MultiSchemaFieldTemplate(props) {
+  const { optionSchemaField, selector } = props;
+  return /* @__PURE__ */ jsxs6(Box4, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ jsx12(FormControl2, { fullWidth: true, sx: { mb: 2 }, children: selector }),
+    optionSchemaField
+  ] });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 import Grid4 from "@mui/material/Grid";
 import {
@@ -409,7 +434,7 @@ import {
   titleId,
   buttonId as buttonId2
 } from "@rjsf/utils";
-import { Fragment as Fragment2, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -419,10 +444,11 @@ function ObjectFieldTemplate(props) {
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = getUiOptions4(uiSchema);
@@ -432,45 +458,48 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsxs6(Fragment2, { children: [
-    title && /* @__PURE__ */ jsx12(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    title && /* @__PURE__ */ jsx13(
       TitleFieldTemplate,
       {
-        id: titleId(idSchema),
+        id: titleId(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ jsx12(
+    description && /* @__PURE__ */ jsx13(
       DescriptionFieldTemplate,
       {
-        id: descriptionId(idSchema),
+        id: descriptionId(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ jsxs6(Grid4, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
+    /* @__PURE__ */ jsxs7(Grid4, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
       properties.map(
         (element, index) => (
           // Remove the <Grid> if the inner element is hidden as the <Grid>
           // itself would otherwise still take up space.
-          element.hidden ? element.content : /* @__PURE__ */ jsx12(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
+          element.hidden ? element.content : /* @__PURE__ */ jsx13(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
         )
       ),
-      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx12(Grid4, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsx12(Grid4, { children: /* @__PURE__ */ jsx12(
+      canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(Grid4, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsx13(Grid4, { children: /* @__PURE__ */ jsx13(
         AddButton2,
         {
-          id: buttonId2(idSchema, "add"),
+          id: buttonId2(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -480,43 +509,84 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+import AddIcon2 from "@mui/icons-material/Add";
+import { jsx as jsx14 } from "react/jsx-runtime";
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ jsx14(
+      MuiIconButton,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label,
+        icon: /* @__PURE__ */ jsx14(AddIcon2, { fontSize: "small" })
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ jsx14(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx14("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
-import Box4 from "@mui/material/Box";
+import Box5 from "@mui/material/Box";
 import Button from "@mui/material/Button";
 import { getSubmitButtonOptions } from "@rjsf/utils";
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx15 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx13(Box4, { marginTop: 3, children: /* @__PURE__ */ jsx13(Button, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ jsx15(Box5, { marginTop: 3, children: /* @__PURE__ */ jsx15(Button, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-import Box5 from "@mui/material/Box";
+import Box6 from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
+import Grid5 from "@mui/material/Grid";
 import Typography4 from "@mui/material/Typography";
-import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
 function TitleField({
   id,
-  title
+  title,
+  optionalDataControl
 }) {
-  return /* @__PURE__ */ jsxs7(Box5, { id, mb: 1, mt: 1, children: [
-    /* @__PURE__ */ jsx14(Typography4, { variant: "h5", children: title }),
-    /* @__PURE__ */ jsx14(Divider, {})
+  let heading = /* @__PURE__ */ jsx16(Typography4, { variant: "h5", children: title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ jsxs8(Grid5, { container: true, spacing: 0, children: [
+      /* @__PURE__ */ jsx16(Grid5, { size: "grow", children: heading }),
+      /* @__PURE__ */ jsx16(Grid5, { justifyContent: "flex-end", children: optionalDataControl })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs8(Box6, { id, mb: 1, mt: 1, children: [
+    heading,
+    /* @__PURE__ */ jsx16(Divider, {})
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-import Grid5 from "@mui/material/Grid";
+import Grid6 from "@mui/material/Grid";
 import TextField2 from "@mui/material/TextField";
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId as buttonId3,
   TranslatableString as TranslatableString4
 } from "@rjsf/utils";
-import { jsx as jsx15, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -525,8 +595,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     schema,
@@ -544,11 +614,10 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   if (!additional) {
-    return /* @__PURE__ */ jsx15("div", { className: classNames, style, children });
+    return /* @__PURE__ */ jsx17("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target && target.value);
-  return /* @__PURE__ */ jsxs8(Grid5, { container: true, alignItems: "center", spacing: 2, className: classNames, style, children: [
-    /* @__PURE__ */ jsx15(Grid5, { size: "auto", children: /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsxs9(Grid6, { container: true, alignItems: "center", spacing: 2, className: classNames, style, children: [
+    /* @__PURE__ */ jsx17(Grid6, { size: "auto", children: /* @__PURE__ */ jsx17(
       TextField2,
       {
         fullWidth: true,
@@ -558,12 +627,12 @@ function WrapIfAdditionalTemplate(props) {
         disabled: disabled || readonly,
         id: `${id}-key`,
         name: `${id}-key`,
-        onBlur: !readonly ? handleBlur : void 0,
+        onBlur: !readonly ? onKeyRenameBlur : void 0,
         type: "text"
       }
     ) }),
-    /* @__PURE__ */ jsx15(Grid5, { size: "auto", children }),
-    /* @__PURE__ */ jsx15(Grid5, { children: /* @__PURE__ */ jsx15(
+    /* @__PURE__ */ jsx17(Grid6, { size: "auto", children }),
+    /* @__PURE__ */ jsx17(Grid6, { children: /* @__PURE__ */ jsx17(
       RemoveButton2,
       {
         id: buttonId3(id, "remove"),
@@ -571,7 +640,7 @@ function WrapIfAdditionalTemplate(props) {
         iconType: "default",
         style: btnStyle,
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -599,7 +668,9 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -616,11 +687,12 @@ import {
   labelValue as labelValue2,
   schemaRequiresTrueValue
 } from "@rjsf/utils";
-import { Fragment as Fragment3, jsx as jsx16, jsxs as jsxs9 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx18, jsxs as jsxs10 } from "react/jsx-runtime";
 function CheckboxWidget(props) {
   const {
     schema,
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -641,11 +713,11 @@ function CheckboxWidget(props) {
   );
   const required = schemaRequiresTrueValue(schema);
   const _onChange = (_, checked) => onChange(checked);
-  const _onBlur = ({ target }) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const _onBlur = () => onBlur(id, value);
+  const _onFocus = () => onFocus(id, value);
   const description = options.description ?? schema.description;
-  return /* @__PURE__ */ jsxs9(Fragment3, { children: [
-    !hideLabel && description && /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsxs10(Fragment3, { children: [
+    !hideLabel && description && /* @__PURE__ */ jsx18(
       DescriptionFieldTemplate,
       {
         id: descriptionId2(id),
@@ -655,14 +727,14 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       FormControlLabel,
       {
-        control: /* @__PURE__ */ jsx16(
+        control: /* @__PURE__ */ jsx18(
           Checkbox,
           {
             id,
-            name: id,
+            name: htmlName || id,
             checked: typeof value === "undefined" ? false : Boolean(value),
             required,
             disabled: disabled || readonly,
@@ -693,11 +765,12 @@ import {
   labelValue as labelValue3,
   optionId
 } from "@rjsf/utils";
-import { Fragment as Fragment4, jsx as jsx17, jsxs as jsxs10 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
 function CheckboxesWidget({
   label,
   hideLabel,
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -719,19 +792,19 @@ function CheckboxesWidget({
   };
   const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+  return /* @__PURE__ */ jsxs11(Fragment4, { children: [
     labelValue3(
-      /* @__PURE__ */ jsx17(FormLabel, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx19(FormLabel, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx17(FormGroup, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+    /* @__PURE__ */ jsx19(FormGroup, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = enumOptionsIsSelected(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      const checkbox = /* @__PURE__ */ jsx17(
+      const checkbox = /* @__PURE__ */ jsx19(
         Checkbox2,
         {
           id: optionId(id, index),
-          name: id,
+          name: htmlName || id,
           checked,
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && index === 0,
@@ -741,7 +814,7 @@ function CheckboxesWidget({
           "aria-describedby": ariaDescribedByIds3(id)
         }
       );
-      return /* @__PURE__ */ jsx17(FormControlLabel2, { control: checkbox, label: option.label }, index);
+      return /* @__PURE__ */ jsx19(FormControlLabel2, { control: checkbox, label: option.label }, index);
     }) })
   ] });
 }
@@ -758,9 +831,10 @@ import {
   labelValue as labelValue4,
   optionId as optionId2
 } from "@rjsf/utils";
-import { Fragment as Fragment5, jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -778,16 +852,16 @@ function RadioWidget({
   const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
   const row = options ? options.inline : false;
   const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? null;
-  return /* @__PURE__ */ jsxs11(Fragment5, { children: [
+  return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     labelValue4(
-      /* @__PURE__ */ jsx18(FormLabel2, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx20(FormLabel2, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx18(
+    /* @__PURE__ */ jsx20(
       RadioGroup,
       {
         id,
-        name: id,
+        name: htmlName || id,
         value: selectedIndex,
         row,
         onChange: _onChange,
@@ -796,10 +870,10 @@ function RadioWidget({
         "aria-describedby": ariaDescribedByIds4(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          const radio = /* @__PURE__ */ jsx18(
+          const radio = /* @__PURE__ */ jsx20(
             FormControlLabel3,
             {
-              control: /* @__PURE__ */ jsx18(Radio, { name: id, id: optionId2(id, index), color: "primary" }),
+              control: /* @__PURE__ */ jsx20(Radio, { name: htmlName || id, id: optionId2(id, index), color: "primary" }),
               label: option.label,
               value: String(index),
               disabled: disabled || itemDisabled || readonly
@@ -821,7 +895,7 @@ import {
   labelValue as labelValue5,
   rangeSpec
 } from "@rjsf/utils";
-import { Fragment as Fragment6, jsx as jsx19, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx21, jsxs as jsxs13 } from "react/jsx-runtime";
 function RangeWidget(props) {
   const { value, readonly, disabled, onBlur, onFocus, options, schema, onChange, required, label, hideLabel, id } = props;
   const sliderProps = { value, label, id, name: id, ...rangeSpec(schema) };
@@ -830,12 +904,12 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ jsxs12(Fragment6, { children: [
+  return /* @__PURE__ */ jsxs13(Fragment6, { children: [
     labelValue5(
-      /* @__PURE__ */ jsx19(FormLabel3, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ jsx21(FormLabel3, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx19(
+    /* @__PURE__ */ jsx21(
       Slider,
       {
         disabled: disabled || readonly,
@@ -859,12 +933,13 @@ import {
   enumOptionsValueForIndex as enumOptionsValueForIndex3,
   labelValue as labelValue6
 } from "@rjsf/utils";
-import { jsx as jsx20, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
 function SelectWidget({
   schema,
   id,
   name,
   // remove this from textFieldProps
+  htmlName,
   options,
   label,
   hideLabel,
@@ -883,7 +958,6 @@ function SelectWidget({
   registry,
   uiSchema,
   hideError,
-  formContext,
   ...textFieldProps
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
@@ -896,11 +970,11 @@ function SelectWidget({
   const selectedIndexes = enumOptionsIndexForValue2(value, enumOptions, multiple);
   const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(
     TextField3,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: labelValue6(label || void 0, hideLabel, void 0),
       value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
       required,
@@ -924,10 +998,10 @@ function SelectWidget({
       },
       "aria-describedby": ariaDescribedByIds6(id),
       children: [
-        showPlaceholderOption && /* @__PURE__ */ jsx20(MenuItem, { value: "", children: placeholder }),
+        showPlaceholderOption && /* @__PURE__ */ jsx22(MenuItem, { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
           const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ jsx20(MenuItem, { value: String(i), disabled: disabled2, children: label2 }, i);
+          return /* @__PURE__ */ jsx22(MenuItem, { value: String(i), disabled: disabled2, children: label2 }, i);
         })
       ]
     }
@@ -936,7 +1010,7 @@ function SelectWidget({
 
 // src/TextareaWidget/TextareaWidget.tsx
 import { getTemplate as getTemplate6 } from "@rjsf/utils";
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 function TextareaWidget(props) {
   const { options, registry } = props;
   const BaseInputTemplate2 = getTemplate6("BaseInputTemplate", registry, options);
@@ -944,7 +1018,7 @@ function TextareaWidget(props) {
   if (typeof options.rows === "string" || typeof options.rows === "number") {
     rows = options.rows;
   }
-  return /* @__PURE__ */ jsx21(BaseInputTemplate2, { ...props, multiline: true, rows });
+  return /* @__PURE__ */ jsx23(BaseInputTemplate2, { ...props, multiline: true, rows });
 }
 
 // src/Widgets/Widgets.ts