@rjsf/mui 6.0.0-beta.9 → 6.0.0

package/README.md

@@ -47,10 +47,10 @@
 
 ## About The Project
 
-[![@rjsf/mui Screen Shot][product-screenshot]](https://rjsf-team.github.io/@rjsf/mui)
-
 Exports `MUI` version 5 theme, fields, and widgets for `react-jsonschema-form`.
 
+[<img src="./screenshot.png" alt="product-screenshot" width="800" />](https://rjsf-team.github.io/@rjsf/mui)
+
 ### Built With
 
 - [react-jsonschema-form](https://github.com/rjsf-team/react-jsonschema-form/)

package/dist/{index.js → index.cjs}

@@ -93,23 +93,32 @@ var import_Paper2 = __toESM(require("@mui/material/Paper"), 1);
 var import_utils3 = require("@rjsf/utils");
 var import_jsx_runtime3 = require("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 = (0, import_utils3.getUiOptions)(uiSchema);
   const ArrayFieldDescriptionTemplate = (0, import_utils3.getTemplate)(
     "ArrayFieldDescriptionTemplate",
     registry,
     uiOptions
   );
-  const ArrayFieldItemTemplate2 = (0, import_utils3.getTemplate)(
-    "ArrayFieldItemTemplate",
-    registry,
-    uiOptions
-  );
   const ArrayFieldTitleTemplate = (0, import_utils3.getTemplate)(
     "ArrayFieldTitleTemplate",
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
@@ -117,29 +126,31 @@ function ArrayFieldTemplate(props) {
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldTitleTemplate,
       {
-        idSchema,
+        fieldPathId,
         title: uiOptions.title || title,
         schema,
         uiSchema,
         required,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       ArrayFieldDescriptionTemplate,
       {
-        idSchema,
+        fieldPathId,
         description: uiOptions.description || schema.description,
         schema,
         uiSchema,
         registry
       }
     ),
-    items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+    !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+    items,
     canAdd && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Box2.default, { mt: 2, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       AddButton2,
       {
-        id: (0, import_utils3.buttonId)(idSchema, "add"),
+        id: (0, import_utils3.buttonId)(fieldPathId, "add"),
         className: "rjsf-array-item-add",
         onClick: onAddClick,
         disabled: disabled || readonly,
@@ -160,6 +171,7 @@ function BaseInputTemplate(props) {
     id,
     name,
     // remove this from textFieldProps
+    htmlName,
     placeholder,
     required,
     readonly,
@@ -179,7 +191,6 @@ function BaseInputTemplate(props) {
     uiSchema,
     rawErrors = [],
     errorSchema,
-    formContext,
     registry,
     InputLabelProps,
     ...textFieldProps
@@ -199,7 +210,7 @@ function BaseInputTemplate(props) {
       import_TextField.default,
       {
         id,
-        name: id,
+        name: htmlName || id,
         placeholder,
         label: (0, import_utils4.labelValue)(label || void 0, hideLabel, void 0),
         autoFocus: autofocus,
@@ -335,11 +346,11 @@ var import_List2 = __toESM(require("@mui/material/List"), 1);
 var import_utils7 = require("@rjsf/utils");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 function FieldErrorTemplate(props) {
-  const { errors = [], idSchema } = props;
+  const { errors = [], fieldPathId } = props;
   if (errors.length === 0) {
     return null;
   }
-  const id = (0, import_utils7.errorId)(idSchema);
+  const id = (0, import_utils7.errorId)(fieldPathId);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_List2.default, { id, dense: true, disablePadding: true, children: errors.map((error, i) => {
     return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_ListItem2.default, { disableGutters: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_FormHelperText.default, { component: "div", id: `${id}-${i}`, children: error }) }, i);
   }) });
@@ -350,11 +361,11 @@ var import_FormHelperText2 = __toESM(require("@mui/material/FormHelperText"), 1)
 var import_utils8 = require("@rjsf/utils");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function FieldHelpTemplate(props) {
-  const { idSchema, help } = props;
+  const { fieldPathId, help } = props;
   if (!help) {
     return null;
   }
-  const id = (0, import_utils8.helpId)(idSchema);
+  const id = (0, import_utils8.helpId)(fieldPathId);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_FormHelperText2.default, { component: "div", id, children: help });
 }
 
@@ -373,8 +384,9 @@ function FieldTemplate(props) {
     displayLabel,
     hidden,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRename,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     rawErrors = [],
@@ -403,8 +415,9 @@ function FieldTemplate(props) {
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -428,10 +441,22 @@ function GridTemplate(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_Grid3.default, { container: !column, ...rest, children });
 }
 
+// src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
+var import_Box4 = __toESM(require("@mui/material/Box"), 1);
+var import_FormControl2 = __toESM(require("@mui/material/FormControl"), 1);
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function MultiSchemaFieldTemplate(props) {
+  const { optionSchemaField, selector } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Box4.default, { sx: { mb: 2 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_FormControl2.default, { fullWidth: true, sx: { mb: 2 }, children: selector }),
+    optionSchemaField
+  ] });
+}
+
 // src/ObjectFieldTemplate/ObjectFieldTemplate.tsx
 var import_Grid4 = __toESM(require("@mui/material/Grid"), 1);
 var import_utils10 = require("@rjsf/utils");
-var import_jsx_runtime12 = require("react/jsx-runtime");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 function ObjectFieldTemplate(props) {
   const {
     description,
@@ -441,10 +466,11 @@ function ObjectFieldTemplate(props) {
     disabled,
     readonly,
     uiSchema,
-    idSchema,
+    fieldPathId,
     schema,
     formData,
-    onAddClick,
+    optionalDataControl,
+    onAddProperty,
     registry
   } = props;
   const uiOptions = (0, import_utils10.getUiOptions)(uiSchema);
@@ -454,45 +480,48 @@ function ObjectFieldTemplate(props) {
     registry,
     uiOptions
   );
+  const showOptionalDataControlInTitle = !readonly && !disabled;
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
-    title && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       TitleFieldTemplate,
       {
-        id: (0, import_utils10.titleId)(idSchema),
+        id: (0, import_utils10.titleId)(fieldPathId),
         title,
         required,
         schema,
         uiSchema,
-        registry
+        registry,
+        optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       DescriptionFieldTemplate,
       {
-        id: (0, import_utils10.descriptionId)(idSchema),
+        id: (0, import_utils10.descriptionId)(fieldPathId),
         description,
         schema,
         uiSchema,
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_Grid4.default, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Grid4.default, { 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__ */ (0, import_jsx_runtime12.jsx)(import_Grid4.default, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
+          element.hidden ? element.content : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
         )
       ),
-      (0, import_utils10.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Grid4.default, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_Grid4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      (0, import_utils10.canExpand)(schema, uiSchema, formData) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Grid4.default, { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         AddButton2,
         {
-          id: (0, import_utils10.buttonId)(idSchema, "add"),
+          id: (0, import_utils10.buttonId)(fieldPathId, "add"),
           className: "rjsf-object-property-expand",
-          onClick: onAddClick(schema),
+          onClick: onAddProperty,
           disabled: disabled || readonly,
           uiSchema,
           registry
@@ -502,39 +531,80 @@ function ObjectFieldTemplate(props) {
   ] });
 }
 
+// src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx
+var import_Add2 = __toESM(require("@mui/icons-material/Add"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function OptionalDataControlsTemplate(props) {
+  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  if (onAddClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      MuiIconButton,
+      {
+        id,
+        registry,
+        className: "rjsf-add-optional-data",
+        onClick: onAddClick,
+        title: label,
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Add2.default, { fontSize: "small" })
+      }
+    );
+  } else if (onRemoveClick) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      RemoveButton,
+      {
+        id,
+        registry,
+        className: "rjsf-remove-optional-data",
+        onClick: onRemoveClick,
+        title: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("em", { id, children: label });
+}
+
 // src/SubmitButton/SubmitButton.tsx
-var import_Box4 = __toESM(require("@mui/material/Box"), 1);
+var import_Box5 = __toESM(require("@mui/material/Box"), 1);
 var import_Button = __toESM(require("@mui/material/Button"), 1);
 var import_utils11 = require("@rjsf/utils");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = (0, import_utils11.getSubmitButtonOptions)(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Box4.default, { marginTop: 3, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Button.default, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box5.default, { marginTop: 3, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Button.default, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
 }
 
 // src/TitleField/TitleField.tsx
-var import_Box5 = __toESM(require("@mui/material/Box"), 1);
+var import_Box6 = __toESM(require("@mui/material/Box"), 1);
 var import_Divider = __toESM(require("@mui/material/Divider"), 1);
+var import_Grid5 = __toESM(require("@mui/material/Grid"), 1);
 var import_Typography4 = __toESM(require("@mui/material/Typography"), 1);
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function TitleField({
   id,
-  title
+  title,
+  optionalDataControl
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Box5.default, { id, mb: 1, mt: 1, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Typography4.default, { variant: "h5", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Divider.default, {})
+  let heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Typography4.default, { variant: "h5", children: title });
+  if (optionalDataControl) {
+    heading = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Grid5.default, { container: true, spacing: 0, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { size: "grow", children: heading }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Grid5.default, { justifyContent: "flex-end", children: optionalDataControl })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_Box6.default, { id, mb: 1, mt: 1, children: [
+    heading,
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_Divider.default, {})
   ] });
 }
 
 // src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx
-var import_Grid5 = __toESM(require("@mui/material/Grid"), 1);
+var import_Grid6 = __toESM(require("@mui/material/Grid"), 1);
 var import_TextField2 = __toESM(require("@mui/material/TextField"), 1);
 var import_utils12 = require("@rjsf/utils");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 function WrapIfAdditionalTemplate(props) {
   const {
     children,
@@ -543,8 +613,8 @@ function WrapIfAdditionalTemplate(props) {
     disabled,
     id,
     label,
-    onDropPropertyClick,
-    onKeyChange,
+    onKeyRenameBlur,
+    onRemoveProperty,
     readonly,
     required,
     schema,
@@ -562,11 +632,10 @@ function WrapIfAdditionalTemplate(props) {
     fontWeight: "bold"
   };
   if (!additional) {
-    return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: classNames, style, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: classNames, style, children });
   }
-  const handleBlur = ({ target }) => onKeyChange(target && target.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_Grid5.default, { container: true, alignItems: "center", spacing: 2, className: classNames, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Grid5.default, { size: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_Grid6.default, { container: true, alignItems: "center", spacing: 2, className: classNames, style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: "auto", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       import_TextField2.default,
       {
         fullWidth: true,
@@ -576,12 +645,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__ */ (0, import_jsx_runtime15.jsx)(import_Grid5.default, { size: "auto", children }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Grid5.default, { children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { size: "auto", children }),
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_Grid6.default, { children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       RemoveButton2,
       {
         id: (0, import_utils12.buttonId)(id, "remove"),
@@ -589,7 +658,7 @@ function WrapIfAdditionalTemplate(props) {
         iconType: "default",
         style: btnStyle,
         disabled: disabled || readonly,
-        onClick: onDropPropertyClick(label),
+        onClick: onRemoveProperty,
         uiSchema,
         registry
       }
@@ -617,7 +686,9 @@ function generateTemplates() {
     FieldHelpTemplate,
     FieldTemplate,
     GridTemplate,
+    MultiSchemaFieldTemplate,
     ObjectFieldTemplate,
+    OptionalDataControlsTemplate,
     TitleFieldTemplate: TitleField,
     WrapIfAdditionalTemplate
   };
@@ -628,11 +699,12 @@ var Templates_default = generateTemplates();
 var import_Checkbox = __toESM(require("@mui/material/Checkbox"), 1);
 var import_FormControlLabel = __toESM(require("@mui/material/FormControlLabel"), 1);
 var import_utils13 = require("@rjsf/utils");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime18 = require("react/jsx-runtime");
 function CheckboxWidget(props) {
   const {
     schema,
     id,
+    htmlName,
     value,
     disabled,
     readonly,
@@ -653,11 +725,11 @@ function CheckboxWidget(props) {
   );
   const required = (0, import_utils13.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__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
-    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+    !hideLabel && description && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       DescriptionFieldTemplate,
       {
         id: (0, import_utils13.descriptionId)(id),
@@ -667,14 +739,14 @@ function CheckboxWidget(props) {
         registry
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       import_FormControlLabel.default,
       {
-        control: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+        control: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           import_Checkbox.default,
           {
             id,
-            name: id,
+            name: htmlName || id,
             checked: typeof value === "undefined" ? false : Boolean(value),
             required,
             disabled: disabled || readonly,
@@ -697,11 +769,12 @@ var import_FormControlLabel2 = __toESM(require("@mui/material/FormControlLabel")
 var import_FormGroup = __toESM(require("@mui/material/FormGroup"), 1);
 var import_FormLabel = __toESM(require("@mui/material/FormLabel"), 1);
 var import_utils14 = require("@rjsf/utils");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function CheckboxesWidget({
   label,
   hideLabel,
   id,
+  htmlName,
   disabled,
   options,
   value,
@@ -723,19 +796,19 @@ function CheckboxesWidget({
   };
   const _onBlur = ({ target }) => onBlur(id, (0, import_utils14.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils14.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
     (0, import_utils14.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_FormLabel.default, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormLabel.default, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_FormGroup.default, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormGroup.default, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = (0, import_utils14.enumOptionsIsSelected)(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-      const checkbox = /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      const checkbox = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         import_Checkbox2.default,
         {
           id: (0, import_utils14.optionId)(id, index),
-          name: id,
+          name: htmlName || id,
           checked,
           disabled: disabled || itemDisabled || readonly,
           autoFocus: autofocus && index === 0,
@@ -745,7 +818,7 @@ function CheckboxesWidget({
           "aria-describedby": (0, import_utils14.ariaDescribedByIds)(id)
         }
       );
-      return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_FormControlLabel2.default, { control: checkbox, label: option.label }, index);
+      return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormControlLabel2.default, { control: checkbox, label: option.label }, index);
     }) })
   ] });
 }
@@ -756,9 +829,10 @@ var import_FormLabel2 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_Radio = __toESM(require("@mui/material/Radio"), 1);
 var import_RadioGroup = __toESM(require("@mui/material/RadioGroup"), 1);
 var import_utils15 = require("@rjsf/utils");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function RadioWidget({
   id,
+  htmlName,
   options,
   value,
   required,
@@ -776,16 +850,16 @@ function RadioWidget({
   const _onFocus = ({ target }) => onFocus(id, (0, import_utils15.enumOptionsValueForIndex)(target && target.value, enumOptions, emptyValue));
   const row = options ? options.inline : false;
   const selectedIndex = (0, import_utils15.enumOptionsIndexForValue)(value, enumOptions) ?? null;
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
     (0, import_utils15.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_FormLabel2.default, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_FormLabel2.default, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       import_RadioGroup.default,
       {
         id,
-        name: id,
+        name: htmlName || id,
         value: selectedIndex,
         row,
         onChange: _onChange,
@@ -794,10 +868,10 @@ function RadioWidget({
         "aria-describedby": (0, import_utils15.ariaDescribedByIds)(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          const radio = /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          const radio = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             import_FormControlLabel3.default,
             {
-              control: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Radio.default, { name: id, id: (0, import_utils15.optionId)(id, index), color: "primary" }),
+              control: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_Radio.default, { name: htmlName || id, id: (0, import_utils15.optionId)(id, index), color: "primary" }),
               label: option.label,
               value: String(index),
               disabled: disabled || itemDisabled || readonly
@@ -815,7 +889,7 @@ function RadioWidget({
 var import_FormLabel3 = __toESM(require("@mui/material/FormLabel"), 1);
 var import_Slider = __toESM(require("@mui/material/Slider"), 1);
 var import_utils16 = require("@rjsf/utils");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_jsx_runtime21 = require("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, ...(0, import_utils16.rangeSpec)(schema) };
@@ -824,12 +898,12 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
     (0, import_utils16.labelValue)(
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_FormLabel3.default, { required, htmlFor: id, children: label || void 0 }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_FormLabel3.default, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       import_Slider.default,
       {
         disabled: disabled || readonly,
@@ -848,12 +922,13 @@ function RangeWidget(props) {
 var import_MenuItem = __toESM(require("@mui/material/MenuItem"), 1);
 var import_TextField3 = __toESM(require("@mui/material/TextField"), 1);
 var import_utils17 = require("@rjsf/utils");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function SelectWidget({
   schema,
   id,
   name,
   // remove this from textFieldProps
+  htmlName,
   options,
   label,
   hideLabel,
@@ -872,7 +947,6 @@ function SelectWidget({
   registry,
   uiSchema,
   hideError,
-  formContext,
   ...textFieldProps
 }) {
   const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
@@ -885,11 +959,11 @@ function SelectWidget({
   const selectedIndexes = (0, import_utils17.enumOptionsIndexForValue)(value, enumOptions, multiple);
   const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
   const showPlaceholderOption = !multiple && schema.default === void 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     import_TextField3.default,
     {
       id,
-      name: id,
+      name: htmlName || id,
       label: (0, import_utils17.labelValue)(label || void 0, hideLabel, void 0),
       value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
       required,
@@ -913,10 +987,10 @@ function SelectWidget({
       },
       "aria-describedby": (0, import_utils17.ariaDescribedByIds)(id),
       children: [
-        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_MenuItem.default, { value: "", children: placeholder }),
+        showPlaceholderOption && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_MenuItem.default, { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
           const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_MenuItem.default, { value: String(i), disabled: disabled2, children: label2 }, i);
+          return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_MenuItem.default, { value: String(i), disabled: disabled2, children: label2 }, i);
         })
       ]
     }
@@ -925,7 +999,7 @@ function SelectWidget({
 
 // src/TextareaWidget/TextareaWidget.tsx
 var import_utils18 = require("@rjsf/utils");
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function TextareaWidget(props) {
   const { options, registry } = props;
   const BaseInputTemplate2 = (0, import_utils18.getTemplate)("BaseInputTemplate", registry, options);
@@ -933,7 +1007,7 @@ function TextareaWidget(props) {
   if (typeof options.rows === "string" || typeof options.rows === "number") {
     rows = options.rows;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(BaseInputTemplate2, { ...props, multiline: true, rows });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(BaseInputTemplate2, { ...props, multiline: true, rows });
 }
 
 // src/Widgets/Widgets.ts
@@ -966,4 +1040,4 @@ var MuiForm_default = generateForm();
 
 // src/index.ts
 var index_default = MuiForm_default;
-//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.cjs.map