@rjsf/mui 6.0.0-beta.9 → 6.0.1

package/dist/mui.umd.js

@@ -34,23 +34,32 @@
     ] });
   }
   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 = utils.getUiOptions(uiSchema);
     const ArrayFieldDescriptionTemplate = utils.getTemplate(
       "ArrayFieldDescriptionTemplate",
       registry,
       uiOptions
     );
-    const ArrayFieldItemTemplate2 = utils.getTemplate(
-      "ArrayFieldItemTemplate",
-      registry,
-      uiOptions
-    );
     const ArrayFieldTitleTemplate = utils.getTemplate(
       "ArrayFieldTitleTemplate",
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -58,29 +67,31 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldTitleTemplate,
         {
-          idSchema,
+          fieldPathId,
           title: uiOptions.title || title,
           schema,
           uiSchema,
           required,
-          registry
+          registry,
+          optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : void 0
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldDescriptionTemplate,
         {
-          idSchema,
+          fieldPathId,
           description: uiOptions.description || schema.description,
           schema,
           uiSchema,
           registry
         }
       ),
-      items && items.map(({ key, ...itemProps }) => /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemTemplate2, { ...itemProps }, key)),
+      !showOptionalDataControlInTitle ? optionalDataControl : void 0,
+      items,
       canAdd && /* @__PURE__ */ jsxRuntime.jsx(Grid4, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(Grid4, { children: /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 2, children: /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
-          id: utils.buttonId(idSchema, "add"),
+          id: utils.buttonId(fieldPathId, "add"),
           className: "rjsf-array-item-add",
           onClick: onAddClick,
           disabled: disabled || readonly,
@@ -96,6 +107,7 @@
       id,
       name,
       // remove this from textFieldProps
+      htmlName,
       placeholder,
       required,
       readonly,
@@ -115,7 +127,6 @@
       uiSchema,
       rawErrors = [],
       errorSchema,
-      formContext,
       registry,
       InputLabelProps,
       ...textFieldProps
@@ -135,7 +146,7 @@
         TextField,
         {
           id,
-          name: id,
+          name: htmlName || id,
           placeholder,
           label: utils.labelValue(label || void 0, hideLabel, void 0),
           autoFocus: autofocus,
@@ -238,21 +249,21 @@
     );
   }
   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(List, { id, dense: true, disablePadding: true, children: errors.map((error, i) => {
       return /* @__PURE__ */ jsxRuntime.jsx(ListItem, { disableGutters: true, children: /* @__PURE__ */ jsxRuntime.jsx(FormHelperText, { component: "div", id: `${id}-${i}`, children: error }) }, i);
     }) });
   }
   function FieldHelpTemplate(props) {
-    const { idSchema, help } = props;
+    const { fieldPathId, help } = props;
     if (!help) {
       return null;
     }
-    const id = utils.helpId(idSchema);
+    const id = utils.helpId(fieldPathId);
     return /* @__PURE__ */ jsxRuntime.jsx(FormHelperText, { component: "div", id, children: help });
   }
   function FieldTemplate(props) {
@@ -265,8 +276,9 @@
       displayLabel,
       hidden,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRename,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       rawErrors = [],
@@ -295,8 +307,9 @@
         disabled,
         id,
         label,
-        onDropPropertyClick,
-        onKeyChange,
+        onKeyRename,
+        onKeyRenameBlur,
+        onRemoveProperty,
         readonly,
         required,
         schema,
@@ -315,6 +328,13 @@
     const { children, column, ...rest } = props;
     return /* @__PURE__ */ jsxRuntime.jsx(Grid4, { container: !column, ...rest, children });
   }
+  function MultiSchemaFieldTemplate(props) {
+    const { optionSchemaField, selector } = props;
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { mb: 2 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { fullWidth: true, sx: { mb: 2 }, children: selector }),
+      optionSchemaField
+    ] });
+  }
   function ObjectFieldTemplate(props) {
     const {
       description,
@@ -324,10 +344,11 @@
       disabled,
       readonly,
       uiSchema,
-      idSchema,
+      fieldPathId,
       schema,
       formData,
-      onAddClick,
+      optionalDataControl,
+      onAddProperty,
       registry
     } = props;
     const uiOptions = utils.getUiOptions(uiSchema);
@@ -337,6 +358,7 @@
       registry,
       uiOptions
     );
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
@@ -344,18 +366,19 @@
       title && /* @__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(
         DescriptionFieldTemplate,
         {
-          id: utils.descriptionId(idSchema),
+          id: utils.descriptionId(fieldPathId),
           description,
           schema,
           uiSchema,
@@ -363,6 +386,7 @@
         }
       ),
       /* @__PURE__ */ jsxRuntime.jsxs(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>
@@ -373,9 +397,9 @@
         utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(Grid4, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(Grid4, { children: /* @__PURE__ */ jsxRuntime.jsx(
           AddButton2,
           {
-            id: utils.buttonId(idSchema, "add"),
+            id: utils.buttonId(fieldPathId, "add"),
             className: "rjsf-object-property-expand",
-            onClick: onAddClick(schema),
+            onClick: onAddProperty,
             disabled: disabled || readonly,
             uiSchema,
             registry
@@ -384,6 +408,34 @@
       ] })
     ] });
   }
+  function OptionalDataControlsTemplate(props) {
+    const { id, registry, label, onAddClick, onRemoveClick } = props;
+    if (onAddClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        MuiIconButton,
+        {
+          id,
+          registry,
+          className: "rjsf-add-optional-data",
+          onClick: onAddClick,
+          title: label,
+          icon: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, { fontSize: "small" })
+        }
+      );
+    } else if (onRemoveClick) {
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        RemoveButton,
+        {
+          id,
+          registry,
+          className: "rjsf-remove-optional-data",
+          onClick: onRemoveClick,
+          title: label
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx("em", { id, children: label });
+  }
   function SubmitButton({ uiSchema }) {
     const { submitText, norender, props: submitButtonProps = {} } = utils.getSubmitButtonOptions(uiSchema);
     if (norender) {
@@ -393,10 +445,18 @@
   }
   function TitleField({
     id,
-    title
+    title,
+    optionalDataControl
   }) {
+    let heading = /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", children: title });
+    if (optionalDataControl) {
+      heading = /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, spacing: 0, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: "grow", children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid4, { justifyContent: "flex-end", children: optionalDataControl })
+      ] });
+    }
     return /* @__PURE__ */ jsxRuntime.jsxs(Box, { id, mb: 1, mt: 1, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", children: title }),
+      heading,
       /* @__PURE__ */ jsxRuntime.jsx(Divider, {})
     ] });
   }
@@ -408,8 +468,8 @@
       disabled,
       id,
       label,
-      onDropPropertyClick,
-      onKeyChange,
+      onKeyRenameBlur,
+      onRemoveProperty,
       readonly,
       required,
       schema,
@@ -429,7 +489,6 @@
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
     }
-    const handleBlur = ({ target }) => onKeyChange(target && target.value);
     return /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, alignItems: "center", spacing: 2, className: classNames, style, children: [
       /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: "auto", children: /* @__PURE__ */ jsxRuntime.jsx(
         TextField,
@@ -441,7 +500,7 @@
           disabled: disabled || readonly,
           id: `${id}-key`,
           name: `${id}-key`,
-          onBlur: !readonly ? handleBlur : void 0,
+          onBlur: !readonly ? onKeyRenameBlur : void 0,
           type: "text"
         }
       ) }),
@@ -454,7 +513,7 @@
           iconType: "default",
           style: btnStyle,
           disabled: disabled || readonly,
-          onClick: onDropPropertyClick(label),
+          onClick: onRemoveProperty,
           uiSchema,
           registry
         }
@@ -482,7 +541,9 @@
       FieldHelpTemplate,
       FieldTemplate,
       GridTemplate,
+      MultiSchemaFieldTemplate,
       ObjectFieldTemplate,
+      OptionalDataControlsTemplate,
       TitleFieldTemplate: TitleField,
       WrapIfAdditionalTemplate
     };
@@ -492,6 +553,7 @@
     const {
       schema,
       id,
+      htmlName,
       value,
       disabled,
       readonly,
@@ -512,8 +574,8 @@
     );
     const required = utils.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !hideLabel && description && /* @__PURE__ */ jsxRuntime.jsx(
@@ -533,7 +595,7 @@
             Checkbox,
             {
               id,
-              name: id,
+              name: htmlName || id,
               checked: typeof value === "undefined" ? false : Boolean(value),
               required,
               disabled: disabled || readonly,
@@ -553,6 +615,7 @@
     label,
     hideLabel,
     id,
+    htmlName,
     disabled,
     options,
     value,
@@ -586,7 +649,7 @@
           Checkbox,
           {
             id: utils.optionId(id, index),
-            name: id,
+            name: htmlName || id,
             checked,
             disabled: disabled || itemDisabled || readonly,
             autoFocus: autofocus && index === 0,
@@ -602,6 +665,7 @@
   }
   function RadioWidget({
     id,
+    htmlName,
     options,
     value,
     required,
@@ -628,7 +692,7 @@
         RadioGroup,
         {
           id,
-          name: id,
+          name: htmlName || id,
           value: selectedIndex,
           row,
           onChange: _onChange,
@@ -640,7 +704,7 @@
             const radio = /* @__PURE__ */ jsxRuntime.jsx(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsxRuntime.jsx(Radio, { name: id, id: utils.optionId(id, index), color: "primary" }),
+                control: /* @__PURE__ */ jsxRuntime.jsx(Radio, { name: htmlName || id, id: utils.optionId(id, index), color: "primary" }),
                 label: option.label,
                 value: String(index),
                 disabled: disabled || itemDisabled || readonly
@@ -685,6 +749,7 @@
     id,
     name,
     // remove this from textFieldProps
+    htmlName,
     options,
     label,
     hideLabel,
@@ -703,7 +768,6 @@
     registry,
     uiSchema,
     hideError,
-    formContext,
     ...textFieldProps
   }) {
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
@@ -720,7 +784,7 @@
       TextField,
       {
         id,
-        name: id,
+        name: htmlName || id,
         label: utils.labelValue(label || void 0, hideLabel, void 0),
         value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
         required,

package/lib/AddButton/AddButton.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import AddIcon from '@mui/icons-material/Add';
-import IconButton from '@mui/material/IconButton/index.js';
+import IconButton from '@mui/material/IconButton';
 import { TranslatableString } from '@rjsf/utils';
 /** The `AddButton` renders a button that represent the `Add` action on a form
  */

package/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.d.ts

@@ -1,6 +1,6 @@
-import { ArrayFieldItemTemplateType, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { ArrayFieldItemTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldItemTemplateProps` props for the component
  */
-export default function ArrayFieldItemTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: ArrayFieldItemTemplateType<T, S, F>): import("react/jsx-runtime").JSX.Element;
+export default function ArrayFieldItemTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: ArrayFieldItemTemplateProps<T, S, F>): import("react/jsx-runtime").JSX.Element;

package/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js

@@ -1,11 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from '@mui/material/Box/index.js';
-import Grid from '@mui/material/Grid/index.js';
-import Paper from '@mui/material/Paper/index.js';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import { getUiOptions, getTemplate, } from '@rjsf/utils';
 /** The `ArrayFieldItemTemplate` component is the template used to render an items of an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldItemTemplateProps` props for the component
  */
 export default function ArrayFieldItemTemplate(props) {
     const { children, buttonsProps, hasToolbar, uiSchema, registry } = props;

package/lib/ArrayFieldItemTemplate/ArrayFieldItemTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayFieldItemTemplate.js","sourceRoot":"","sources":["../../src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAGL,YAAY,EACZ,WAAW,GAGZ,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAI5C,KAA0C;IAC1C,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,SAAS,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC;IAClD,MAAM,6BAA6B,GAAG,WAAW,CAC/C,+BAA+B,EAC/B,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,QAAQ,GAAkB;QAC9B,IAAI,EAAE,CAAC;QACP,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,CAAC;KACZ,CAAC;IACF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,IAAI,EAAE,UAAU,EAAC,QAAQ,aACxC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAC3C,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,YACjB,KAAC,GAAG,IAAC,CAAC,EAAE,CAAC,YAAG,QAAQ,GAAO,GACrB,GACJ,GACD,EACN,UAAU,IAAI,CACb,KAAC,IAAI,cACH,KAAC,6BAA6B,OAAK,YAAY,EAAE,KAAK,EAAE,QAAQ,GAAI,GAC/D,CACR,IACI,CACR,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ArrayFieldItemTemplate.js","sourceRoot":"","sources":["../../src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx"],"names":[],"mappings":";AACA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EAGL,YAAY,EACZ,WAAW,GAGZ,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,sBAAsB,CAI5C,KAA2C;IAC3C,MAAM,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IACzE,MAAM,SAAS,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC;IAClD,MAAM,6BAA6B,GAAG,WAAW,CAC/C,+BAA+B,EAC/B,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,QAAQ,GAAkB;QAC9B,IAAI,EAAE,CAAC;QACP,WAAW,EAAE,CAAC;QACd,YAAY,EAAE,CAAC;QACf,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,CAAC;KACZ,CAAC;IACF,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,IAAI,EAAE,UAAU,EAAC,QAAQ,aACxC,KAAC,IAAI,IAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,EAAE,YAC3C,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,YACjB,KAAC,GAAG,IAAC,CAAC,EAAE,CAAC,YAAG,QAAQ,GAAO,GACrB,GACJ,GACD,EACN,UAAU,IAAI,CACb,KAAC,IAAI,cACH,KAAC,6BAA6B,OAAK,YAAY,EAAE,KAAK,EAAE,QAAQ,GAAI,GAC/D,CACR,IACI,CACR,CAAC;AACJ,CAAC"}

package/lib/ArrayFieldTemplate/ArrayFieldTemplate.d.ts

@@ -1,6 +1,6 @@
 import { ArrayFieldTemplateProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldTemplateProps` props for the component
  */
 export default function ArrayFieldTemplate<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(props: ArrayFieldTemplateProps<T, S, F>): import("react/jsx-runtime").JSX.Element;

package/lib/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -1,21 +1,20 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from '@mui/material/Box/index.js';
-import Grid from '@mui/material/Grid/index.js';
-import Paper from '@mui/material/Paper/index.js';
+import Box from '@mui/material/Box';
+import Grid from '@mui/material/Grid';
+import Paper from '@mui/material/Paper';
 import { getTemplate, getUiOptions, buttonId, } from '@rjsf/utils';
 /** The `ArrayFieldTemplate` component is the template used to render all items in an array.
  *
- * @param props - The `ArrayFieldItemTemplateType` props for the component
+ * @param props - The `ArrayFieldTemplateProps` props for the component
  */
 export default 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 = getUiOptions(uiSchema);
     const ArrayFieldDescriptionTemplate = getTemplate('ArrayFieldDescriptionTemplate', registry, uiOptions);
-    const ArrayFieldItemTemplate = getTemplate('ArrayFieldItemTemplate', registry, uiOptions);
     const ArrayFieldTitleTemplate = getTemplate('ArrayFieldTitleTemplate', registry, uiOptions);
+    const showOptionalDataControlInTitle = !readonly && !disabled;
     // Button templates are not overridden in the uiSchema
     const { ButtonTemplates: { AddButton }, } = registry.templates;
-    return (_jsx(Paper, { elevation: 2, children: _jsxs(Box, { p: 2, children: [_jsx(ArrayFieldTitleTemplate, { idSchema: idSchema, title: uiOptions.title || title, schema: schema, uiSchema: uiSchema, required: required, registry: registry }), _jsx(ArrayFieldDescriptionTemplate, { idSchema: idSchema, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry }), items &&
-                    items.map(({ key, ...itemProps }) => (_jsx(ArrayFieldItemTemplate, { ...itemProps }, key))), canAdd && (_jsx(Grid, { container: true, justifyContent: 'flex-end', children: _jsx(Grid, { children: _jsx(Box, { mt: 2, children: _jsx(AddButton, { id: buttonId(idSchema, 'add'), className: 'rjsf-array-item-add', onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }) }))] }) }));
+    return (_jsx(Paper, { elevation: 2, children: _jsxs(Box, { p: 2, children: [_jsx(ArrayFieldTitleTemplate, { fieldPathId: fieldPathId, title: uiOptions.title || title, schema: schema, uiSchema: uiSchema, required: required, registry: registry, optionalDataControl: showOptionalDataControlInTitle ? optionalDataControl : undefined }), _jsx(ArrayFieldDescriptionTemplate, { fieldPathId: fieldPathId, description: uiOptions.description || schema.description, schema: schema, uiSchema: uiSchema, registry: registry }), !showOptionalDataControlInTitle ? optionalDataControl : undefined, items, canAdd && (_jsx(Grid, { container: true, justifyContent: 'flex-end', children: _jsx(Grid, { children: _jsx(Box, { mt: 2, children: _jsx(AddButton, { id: buttonId(fieldPathId, 'add'), className: 'rjsf-array-item-add', onClick: onAddClick, disabled: disabled || readonly, uiSchema: uiSchema, registry: registry }) }) }) }))] }) }));
 }
 //# sourceMappingURL=ArrayFieldTemplate.js.map

package/lib/ArrayFieldTemplate/ArrayFieldTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"ArrayFieldTemplate.js","sourceRoot":"","sources":["../../src/ArrayFieldTemplate/ArrayFieldTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EACL,WAAW,EACX,YAAY,EAMZ,QAAQ,GACT,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAIxC,KAAuC;IACvC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,GAC5G,KAAK,CAAC;IACR,MAAM,SAAS,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC;IAClD,MAAM,6BAA6B,GAAG,WAAW,CAC/C,+BAA+B,EAC/B,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,sBAAsB,GAAG,WAAW,CACxC,wBAAwB,EACxB,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,uBAAuB,GAAG,WAAW,CACzC,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IACF,sDAAsD;IACtD,MAAM,EACJ,eAAe,EAAE,EAAE,SAAS,EAAE,GAC/B,GAAG,QAAQ,CAAC,SAAS,CAAC;IACvB,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,YACjB,MAAC,GAAG,IAAC,CAAC,EAAE,CAAC,aACP,KAAC,uBAAuB,IACtB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,CAAC,KAAK,IAAI,KAAK,EAC/B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,EACF,KAAC,6BAA6B,IAC5B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,SAAS,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,EACxD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,EACD,KAAK;oBACJ,KAAK,CAAC,GAAG,CAAC,CAAC,EAAE,GAAG,EAAE,GAAG,SAAS,EAAuC,EAAE,EAAE,CAAC,CACxE,KAAC,sBAAsB,OAAe,SAAS,IAAlB,GAAG,CAAmB,CACpD,CAAC,EACH,MAAM,IAAI,CACT,KAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAC,UAAU,YACvC,KAAC,IAAI,cACH,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,KAAC,SAAS,IACR,EAAE,EAAE,QAAQ,CAAI,QAAQ,EAAE,KAAK,CAAC,EAChC,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,GACE,GACD,GACF,CACR,IACG,GACA,CACT,CAAC;AACJ,CAAC"}
+{"version":3,"file":"ArrayFieldTemplate.js","sourceRoot":"","sources":["../../src/ArrayFieldTemplate/ArrayFieldTemplate.tsx"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,mBAAmB,CAAC;AACpC,OAAO,IAAI,MAAM,oBAAoB,CAAC;AACtC,OAAO,KAAK,MAAM,qBAAqB,CAAC;AACxC,OAAO,EACL,WAAW,EACX,YAAY,EAKZ,QAAQ,GACT,MAAM,aAAa,CAAC;AAErB;;;GAGG;AACH,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAIxC,KAAuC;IACvC,MAAM,EACJ,MAAM,EACN,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,mBAAmB,EACnB,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,GACN,GAAG,KAAK,CAAC;IACV,MAAM,SAAS,GAAG,YAAY,CAAU,QAAQ,CAAC,CAAC;IAClD,MAAM,6BAA6B,GAAG,WAAW,CAC/C,+BAA+B,EAC/B,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,uBAAuB,GAAG,WAAW,CACzC,yBAAyB,EACzB,QAAQ,EACR,SAAS,CACV,CAAC;IACF,MAAM,8BAA8B,GAAG,CAAC,QAAQ,IAAI,CAAC,QAAQ,CAAC;IAC9D,sDAAsD;IACtD,MAAM,EACJ,eAAe,EAAE,EAAE,SAAS,EAAE,GAC/B,GAAG,QAAQ,CAAC,SAAS,CAAC;IACvB,OAAO,CACL,KAAC,KAAK,IAAC,SAAS,EAAE,CAAC,YACjB,MAAC,GAAG,IAAC,CAAC,EAAE,CAAC,aACP,KAAC,uBAAuB,IACtB,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,SAAS,CAAC,KAAK,IAAI,KAAK,EAC/B,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,mBAAmB,EAAE,8BAA8B,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,GACrF,EACF,KAAC,6BAA6B,IAC5B,WAAW,EAAE,WAAW,EACxB,WAAW,EAAE,SAAS,CAAC,WAAW,IAAI,MAAM,CAAC,WAAW,EACxD,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,EACD,CAAC,8BAA8B,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,SAAS,EACjE,KAAK,EACL,MAAM,IAAI,CACT,KAAC,IAAI,IAAC,SAAS,QAAC,cAAc,EAAC,UAAU,YACvC,KAAC,IAAI,cACH,KAAC,GAAG,IAAC,EAAE,EAAE,CAAC,YACR,KAAC,SAAS,IACR,EAAE,EAAE,QAAQ,CAAC,WAAW,EAAE,KAAK,CAAC,EAChC,SAAS,EAAC,qBAAqB,EAC/B,OAAO,EAAE,UAAU,EACnB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,GACE,GACD,GACF,CACR,IACG,GACA,CACT,CAAC;AACJ,CAAC"}

package/lib/BaseInputTemplate/BaseInputTemplate.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import TextField from '@mui/material/TextField/index.js';
+import TextField from '@mui/material/TextField';
 import { ariaDescribedByIds, examplesId, getInputProps, labelValue, } from '@rjsf/utils';
 const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
 /** The `BaseInputTemplate` is the template to use to render the basic `<input>` component for the `core` theme.
@@ -10,7 +10,7 @@ const TYPES_THAT_SHRINK_LABEL = ['date', 'datetime-local', 'file', 'time'];
  */
 export default function BaseInputTemplate(props) {
     const { id, name, // remove this from textFieldProps
-    placeholder, required, readonly, disabled, type, label, hideLabel, hideError, value, onChange, onChangeOverride, onBlur, onFocus, autofocus, options, schema, uiSchema, rawErrors = [], errorSchema, formContext, registry, InputLabelProps, ...textFieldProps } = props;
+    htmlName, placeholder, required, readonly, disabled, type, label, hideLabel, hideError, value, onChange, onChangeOverride, onBlur, onFocus, autofocus, options, schema, uiSchema, rawErrors = [], errorSchema, registry, InputLabelProps, ...textFieldProps } = props;
     const inputProps = getInputProps(schema, type, options);
     // Now we need to pull out the step, min, max into an inner `inputProps` for material-ui
     const { step, min, max, accept, ...rest } = inputProps;
@@ -24,7 +24,7 @@ export default function BaseInputTemplate(props) {
             shrink: true,
         }
         : InputLabelProps;
-    return (_jsxs(_Fragment, { children: [_jsx(TextField, { id: id, name: id, placeholder: placeholder, label: labelValue(label || undefined, hideLabel, undefined), autoFocus: autofocus, required: required, disabled: disabled || readonly, slotProps: { htmlInput: htmlInputProps, inputLabel: DisplayInputLabelProps }, ...rest, value: value || value === 0 ? value : '', error: rawErrors.length > 0, onChange: onChangeOverride || _onChange, onBlur: _onBlur, onFocus: _onFocus, ...textFieldProps, "aria-describedby": ariaDescribedByIds(id, !!schema.examples) }), Array.isArray(schema.examples) && (_jsx("datalist", { id: examplesId(id), children: schema.examples
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { id: id, name: htmlName || id, placeholder: placeholder, label: labelValue(label || undefined, hideLabel, undefined), autoFocus: autofocus, required: required, disabled: disabled || readonly, slotProps: { htmlInput: htmlInputProps, inputLabel: DisplayInputLabelProps }, ...rest, value: value || value === 0 ? value : '', error: rawErrors.length > 0, onChange: onChangeOverride || _onChange, onBlur: _onBlur, onFocus: _onFocus, ...textFieldProps, "aria-describedby": ariaDescribedByIds(id, !!schema.examples) }), Array.isArray(schema.examples) && (_jsx("datalist", { id: examplesId(id), children: schema.examples
                     .concat(schema.default && !schema.examples.includes(schema.default) ? [schema.default] : [])
                     .map((example) => {
                     return _jsx("option", { value: example }, example);

package/lib/BaseInputTemplate/BaseInputTemplate.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseInputTemplate.js","sourceRoot":"","sources":["../../src/BaseInputTemplate/BaseInputTemplate.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BaseInputTemplate.js","sourceRoot":"","sources":["../../src/BaseInputTemplate/BaseInputTemplate.tsx"],"names":[],"mappings":"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"}

package/lib/CheckboxWidget/CheckboxWidget.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Checkbox from '@mui/material/Checkbox/index.js';
-import FormControlLabel from '@mui/material/FormControlLabel/index.js';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import { ariaDescribedByIds, descriptionId, getTemplate, labelValue, schemaRequiresTrueValue, } from '@rjsf/utils';
 /** The `CheckBoxWidget` is a widget for rendering boolean properties.
  *  It is typically used to represent a boolean.
@@ -9,16 +9,16 @@ import { ariaDescribedByIds, descriptionId, getTemplate, labelValue, schemaRequi
  */
 export default function CheckboxWidget(props) {
     var _a;
-    const { schema, id, value, disabled, readonly, label = '', hideLabel, autofocus, onChange, onBlur, onFocus, registry, options, uiSchema, } = props;
+    const { schema, id, htmlName, value, disabled, readonly, label = '', hideLabel, autofocus, onChange, onBlur, onFocus, registry, options, uiSchema, } = props;
     const DescriptionFieldTemplate = getTemplate('DescriptionFieldTemplate', registry, options);
     // Because an unchecked checkbox will cause html5 validation to fail, only add
     // the "required" attribute if the field value must be "true", due to the
     // "const" or "enum" keywords
     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 = (_a = options.description) !== null && _a !== void 0 ? _a : schema.description;
-    return (_jsxs(_Fragment, { children: [!hideLabel && description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: id, name: id, checked: typeof value === 'undefined' ? false : Boolean(value), required: required, disabled: disabled || readonly, autoFocus: autofocus, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }), label: labelValue(label, hideLabel, false) })] }));
+    return (_jsxs(_Fragment, { children: [!hideLabel && description && (_jsx(DescriptionFieldTemplate, { id: descriptionId(id), description: description, schema: schema, uiSchema: uiSchema, registry: registry })), _jsx(FormControlLabel, { control: _jsx(Checkbox, { id: id, name: htmlName || id, checked: typeof value === 'undefined' ? false : Boolean(value), required: required, disabled: disabled || readonly, autoFocus: autofocus, onChange: _onChange, onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }), label: labelValue(label, hideLabel, false) })] }));
 }
 //# sourceMappingURL=CheckboxWidget.js.map

package/lib/CheckboxWidget/CheckboxWidget.js.map

@@ -1 +1 @@
-{"version":3,"file":"CheckboxWidget.js","sourceRoot":"","sources":["../../src/CheckboxWidget/CheckboxWidget.tsx"],"names":[],"mappings":";AACA,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,UAAU,EACV,uBAAuB,GAKxB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAIpC,KAA2B;;IAC3B,MAAM,EACJ,MAAM,EACN,EAAE,EACF,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,wBAAwB,GAAG,WAAW,CAC1C,0BAA0B,EAC1B,QAAQ,EACR,OAAO,CACR,CAAC;IACF,8EAA8E;IAC9E,yEAAyE;IACzE,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,uBAAuB,CAAI,MAAM,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,CAAC,CAAM,EAAE,OAAgB,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClE,MAAM,OAAO,GAAG,CAAC,EAAE,MAAM,EAAiC,EAAE,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;IAClG,MAAM,QAAQ,GAAG,CAAC,EAAE,MAAM,EAAiC,EAAE,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,MAAM,IAAI,MAAM,CAAC,KAAK,CAAC,CAAC;IACpG,MAAM,WAAW,GAAG,MAAA,OAAO,CAAC,WAAW,mCAAI,MAAM,CAAC,WAAW,CAAC;IAE9D,OAAO,CACL,8BACG,CAAC,SAAS,IAAI,WAAW,IAAI,CAC5B,KAAC,wBAAwB,IACvB,EAAE,EAAE,aAAa,CAAI,EAAE,CAAC,EACxB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,EACD,KAAC,gBAAgB,IACf,OAAO,EACL,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,EAAE,EACR,OAAO,EAAE,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAC9D,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,SAAS,EACnB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,QAAQ,sBACC,kBAAkB,CAAI,EAAE,CAAC,GAC3C,EAEJ,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,GAC1C,IACD,CACJ,CAAC;AACJ,CAAC"}
+{"version":3,"file":"CheckboxWidget.js","sourceRoot":"","sources":["../../src/CheckboxWidget/CheckboxWidget.tsx"],"names":[],"mappings":";AAAA,OAAO,QAAQ,MAAM,wBAAwB,CAAC;AAC9C,OAAO,gBAAgB,MAAM,gCAAgC,CAAC;AAC9D,OAAO,EACL,kBAAkB,EAClB,aAAa,EACb,WAAW,EACX,UAAU,EACV,uBAAuB,GAKxB,MAAM,aAAa,CAAC;AAErB;;;;GAIG;AACH,MAAM,CAAC,OAAO,UAAU,cAAc,CAIpC,KAA2B;;IAC3B,MAAM,EACJ,MAAM,EACN,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,KAAK,GAAG,EAAE,EACV,SAAS,EACT,SAAS,EACT,QAAQ,EACR,MAAM,EACN,OAAO,EACP,QAAQ,EACR,OAAO,EACP,QAAQ,GACT,GAAG,KAAK,CAAC;IACV,MAAM,wBAAwB,GAAG,WAAW,CAC1C,0BAA0B,EAC1B,QAAQ,EACR,OAAO,CACR,CAAC;IACF,8EAA8E;IAC9E,yEAAyE;IACzE,6BAA6B;IAC7B,MAAM,QAAQ,GAAG,uBAAuB,CAAI,MAAM,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,CAAC,CAAM,EAAE,OAAgB,EAAE,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IAClE,MAAM,OAAO,GAA+C,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IACpF,MAAM,QAAQ,GAA+C,GAAG,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;IACtF,MAAM,WAAW,GAAG,MAAA,OAAO,CAAC,WAAW,mCAAI,MAAM,CAAC,WAAW,CAAC;IAE9D,OAAO,CACL,8BACG,CAAC,SAAS,IAAI,WAAW,IAAI,CAC5B,KAAC,wBAAwB,IACvB,EAAE,EAAE,aAAa,CAAC,EAAE,CAAC,EACrB,WAAW,EAAE,WAAW,EACxB,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,GAClB,CACH,EACD,KAAC,gBAAgB,IACf,OAAO,EACL,KAAC,QAAQ,IACP,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,QAAQ,IAAI,EAAE,EACpB,OAAO,EAAE,OAAO,KAAK,KAAK,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,OAAO,CAAC,KAAK,CAAC,EAC9D,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,SAAS,EACnB,MAAM,EAAE,OAAO,EACf,OAAO,EAAE,QAAQ,sBACC,kBAAkB,CAAC,EAAE,CAAC,GACxC,EAEJ,KAAK,EAAE,UAAU,CAAC,KAAK,EAAE,SAAS,EAAE,KAAK,CAAC,GAC1C,IACD,CACJ,CAAC;AACJ,CAAC"}

package/lib/CheckboxesWidget/CheckboxesWidget.d.ts

@@ -4,4 +4,4 @@ import { FormContextType, WidgetProps, RJSFSchema, StrictRJSFSchema } from '@rjs
  *
  * @param props - The `WidgetProps` for this component
  */
-export default function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ label, hideLabel, id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;
+export default function CheckboxesWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({ label, hideLabel, id, htmlName, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus, }: WidgetProps<T, S, F>): import("react/jsx-runtime").JSX.Element;

package/lib/CheckboxesWidget/CheckboxesWidget.js

@@ -1,15 +1,15 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import Checkbox from '@mui/material/Checkbox/index.js';
-import FormControlLabel from '@mui/material/FormControlLabel/index.js';
-import FormGroup from '@mui/material/FormGroup/index.js';
-import FormLabel from '@mui/material/FormLabel/index.js';
+import Checkbox from '@mui/material/Checkbox';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import FormGroup from '@mui/material/FormGroup';
+import FormLabel from '@mui/material/FormLabel';
 import { ariaDescribedByIds, enumOptionsDeselectValue, enumOptionsIsSelected, enumOptionsSelectValue, enumOptionsValueForIndex, labelValue, optionId, } from '@rjsf/utils';
 /** The `CheckboxesWidget` is a widget for rendering checkbox groups.
  *  It is typically used to represent an array of enums.
  *
  * @param props - The `WidgetProps` for this component
  */
-export default function CheckboxesWidget({ label, hideLabel, id, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus, }) {
+export default function CheckboxesWidget({ label, hideLabel, id, htmlName, disabled, options, value, autofocus, readonly, required, onChange, onBlur, onFocus, }) {
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const _onChange = (index) => ({ target: { checked } }) => {
@@ -26,7 +26,7 @@ export default function CheckboxesWidget({ label, hideLabel, id, disabled, optio
                     enumOptions.map((option, index) => {
                         const checked = enumOptionsIsSelected(option.value, checkboxesValues);
                         const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-                        const checkbox = (_jsx(Checkbox, { id: optionId(id, index), name: id, checked: checked, disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: _onChange(index), onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }));
+                        const checkbox = (_jsx(Checkbox, { id: optionId(id, index), name: htmlName || id, checked: checked, disabled: disabled || itemDisabled || readonly, autoFocus: autofocus && index === 0, onChange: _onChange(index), onBlur: _onBlur, onFocus: _onFocus, "aria-describedby": ariaDescribedByIds(id) }));
                         return _jsx(FormControlLabel, { control: checkbox, label: option.label }, index);
                     }) })] }));
 }