@rjsf/mui 6.4.2 → 6.5.0

package/dist/mui.umd.js

@@ -5,13 +5,34 @@
 })(this, (function (exports, core, AddIcon, IconButton, utils, jsxRuntime, Box, Grid4, Paper, react, TextField, InputAdornment, Typography, ErrorIcon, List, ListItem, ListItemIcon, ListItemText, ArrowDownwardIcon, ArrowUpwardIcon, CopyIcon, RemoveIcon, ClearIcon, FormHelperText, FormControl, Button, Divider, Checkbox, FormControlLabel, FormGroup, FormLabel, Radio, RadioGroup, Slider, MenuItem) { 'use strict';
 
   // src/MuiForm/MuiForm.tsx
+
+  // src/util.ts
+  function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
+    const muiProps = options?.mui || {};
+    if (propsToFilter) {
+      return Object.keys(muiProps).filter((key) => propsToFilter.includes(key)).reduce((obj, key) => {
+        obj[key] = muiProps[key];
+        return obj;
+      }, {});
+    }
+    return muiProps;
+  }
   function AddButton({
     uiSchema,
     registry,
     ...props
   }) {
     const { translateString } = registry;
-    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.AddItemButton), ...props, color: "primary", children: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {}) });
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const muiProps = getMuiProps(uiOptions, [
+      "color",
+      "disableFocusRipple",
+      "disableRipple",
+      "edge",
+      "size",
+      "sx"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { title: translateString(utils.TranslatableString.AddItemButton), ...props, color: "primary", ...muiProps, children: /* @__PURE__ */ jsxRuntime.jsx(AddIcon, {}) });
   }
   function ArrayFieldItemTemplate(props) {
     const { children, buttonsProps, hasDescription, hasToolbar, uiSchema, registry } = props;
@@ -28,9 +49,18 @@
       fontWeight: "bold",
       minWidth: 0
     };
-    return /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, alignItems: "center", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 }, style: { overflow: "auto" }, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { mb: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { p: 2, children }) }) }) }),
-      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(Grid4, { sx: { mt: hasDescription ? -5 : -1.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
+    const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+    return /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, alignItems: "center", ...muiSlotProps?.arrayItemGridContainer, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        Grid4,
+        {
+          size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
+          style: { overflow: "auto" },
+          ...muiSlotProps?.arrayItemGridItem,
+          children: /* @__PURE__ */ jsxRuntime.jsx(Box, { mb: 2, ...muiSlotProps?.arrayItemOuterBox, children: /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, ...muiSlotProps?.arrayItemPaper, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { p: 2, ...muiSlotProps?.arrayItemInnerBox, children }) }) })
+        }
+      ),
+      hasToolbar && /* @__PURE__ */ jsxRuntime.jsx(Grid4, { sx: { mt: hasDescription ? -5 : -1.5 }, ...muiSlotProps?.arrayItemToolbarGrid, children: /* @__PURE__ */ jsxRuntime.jsx(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
     ] });
   }
   function ArrayFieldTemplate(props) {
@@ -63,7 +93,8 @@
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
-    return /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { p: 2, children: [
+    const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+    return /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, ...muiSlotProps?.arrayPaper, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { p: 2, ...muiSlotProps?.arrayBox, children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         ArrayFieldTitleTemplate,
         {
@@ -88,7 +119,7 @@
       ),
       !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(
+      canAdd && /* @__PURE__ */ jsxRuntime.jsx(Grid4, { container: true, justifyContent: "flex-end", ...muiSlotProps?.arrayAddButtonGridContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Grid4, { ...muiSlotProps?.arrayAddButtonGridItem, children: /* @__PURE__ */ jsxRuntime.jsx(Box, { mt: 2, ...muiSlotProps?.arrayAddButtonBox, children: /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
           id: utils.buttonId(fieldPathId, "add"),
@@ -135,8 +166,11 @@
     } = props;
     const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
     const { step, min, max, accept, ...rest } = utils.getInputProps(schema, type, options);
+    const muiProps = getMuiProps(options);
+    const { slotProps: muiSlotProps, ...otherMuiProps } = muiProps;
     const htmlInputProps = {
       ...slotProps?.htmlInput,
+      ...muiSlotProps?.htmlInput,
       step,
       min,
       max,
@@ -146,7 +180,7 @@
     const _onChange = ({ target: { value: value2 } }) => onChange(value2 === "" ? options.emptyValue : value2);
     const _onBlur = ({ target }) => onBlur(id, target && target.value);
     const _onFocus = ({ target }) => onFocus(id, target && target.value);
-    const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? { ...slotProps?.inputLabel, ...InputLabelProps, shrink: true } : { ...slotProps?.inputLabel, ...InputLabelProps };
+    const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type) ? { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps, shrink: true } : { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps };
     const _onClear = react.useCallback(
       (e) => {
         e.preventDefault();
@@ -155,7 +189,7 @@
       },
       [onChange, options.emptyValue]
     );
-    const inputProps = { ...InputProps, ...slotProps?.input };
+    const inputProps = { ...InputProps, ...slotProps?.input, ...muiSlotProps?.input };
     if (options.allowClearTextInputs && value && !readonly && !disabled) {
       const clearAdornment = /* @__PURE__ */ jsxRuntime.jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsxRuntime.jsx(ClearButton2, { registry, onClick: _onClear }) });
       inputProps.endAdornment = !inputProps.endAdornment ? clearAdornment : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
@@ -176,6 +210,7 @@
           disabled: disabled || readonly,
           slotProps: {
             ...slotProps,
+            ...muiSlotProps,
             input: inputProps,
             htmlInput: htmlInputProps,
             inputLabel: DisplayInputLabelProps
@@ -186,7 +221,7 @@
           onChange: onChangeOverride || _onChange,
           onBlur: _onBlur,
           onFocus: _onFocus,
-          ...textFieldProps,
+          ...{ ...otherMuiProps, ...textFieldProps },
           "aria-describedby": utils.ariaDescribedByIds(id, !!schema.examples)
         }
       ),
@@ -195,29 +230,44 @@
   }
   function DescriptionField(props) {
     const { id, description, registry, uiSchema } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const muiProps = getMuiProps(uiOptions);
+    const { rjsfSlotProps: muiSlotProps } = muiProps;
     if (description) {
-      return /* @__PURE__ */ jsxRuntime.jsx(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" }, children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) });
+      return /* @__PURE__ */ jsxRuntime.jsx(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" }, ...muiSlotProps?.descTypography, children: /* @__PURE__ */ jsxRuntime.jsx(core.RichDescription, { description, registry, uiSchema }) });
     }
     return null;
   }
   function ErrorList({
     errors,
-    registry
+    registry,
+    uiSchema
   }) {
     const { translateString } = registry;
-    return /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { mb: 2, p: 2, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", children: translateString(utils.TranslatableString.ErrorsLabel) }),
-      /* @__PURE__ */ jsxRuntime.jsx(List, { dense: true, children: errors.map((error, i) => {
-        return /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { children: [
-          /* @__PURE__ */ jsxRuntime.jsx(ListItemIcon, { children: /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { color: "error" }) }),
-          /* @__PURE__ */ jsxRuntime.jsx(ListItemText, { primary: error.stack })
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+    return /* @__PURE__ */ jsxRuntime.jsx(Paper, { elevation: 2, ...muiSlotProps?.errorPaper, children: /* @__PURE__ */ jsxRuntime.jsxs(Box, { mb: 2, p: 2, ...muiSlotProps?.errorBox, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h6", ...muiSlotProps?.errorTypography, children: translateString(utils.TranslatableString.ErrorsLabel) }),
+      /* @__PURE__ */ jsxRuntime.jsx(List, { dense: true, ...muiSlotProps?.errorList, children: errors.map((error, i) => {
+        return /* @__PURE__ */ jsxRuntime.jsxs(ListItem, { ...muiSlotProps?.errorListItem, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ListItemIcon, { ...muiSlotProps?.errorListItemIcon, children: /* @__PURE__ */ jsxRuntime.jsx(ErrorIcon, { color: "error" }) }),
+          /* @__PURE__ */ jsxRuntime.jsx(ListItemText, { primary: error.stack, ...muiSlotProps?.errorListItemText })
         ] }, i);
       }) })
     ] }) });
   }
   function MuiIconButton(props) {
     const { icon, color, uiSchema, registry, ...otherProps } = props;
-    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...otherProps, size: "small", color, children: icon });
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const muiProps = getMuiProps(uiOptions, [
+      "color",
+      "disableFocusRipple",
+      "disableRipple",
+      "edge",
+      "size",
+      "sx"
+    ]);
+    return /* @__PURE__ */ jsxRuntime.jsx(IconButton, { ...muiProps, ...otherProps, size: "small", color, children: icon });
   }
   function CopyButton(props) {
     const {
@@ -288,13 +338,16 @@
     );
   }
   function FieldErrorTemplate(props) {
-    const { errors = [], fieldPathId } = props;
+    const { errors = [], fieldPathId, uiSchema } = props;
     if (errors.length === 0) {
       return null;
     }
     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);
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const muiProps = getMuiProps(uiOptions);
+    const { rjsfSlotProps: muiSlotProps } = muiProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(List, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => {
+      return /* @__PURE__ */ jsxRuntime.jsx(ListItem, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ jsxRuntime.jsx(FormHelperText, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i);
     }) });
   }
   function FieldHelpTemplate(props) {
@@ -302,7 +355,19 @@
     if (!help) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(FormHelperText, { component: "div", id: utils.helpId(fieldPathId), style: { marginTop: "5px" }, children: /* @__PURE__ */ jsxRuntime.jsx(core.RichHelp, { help, registry, uiSchema }) });
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const muiProps = getMuiProps(uiOptions);
+    const { rjsfSlotProps: muiSlotProps } = muiProps;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      FormHelperText,
+      {
+        component: "div",
+        id: utils.helpId(fieldPathId),
+        style: { marginTop: "5px" },
+        ...muiSlotProps?.helpFormHelperText,
+        children: /* @__PURE__ */ jsxRuntime.jsx(core.RichHelp, { help, registry, uiSchema })
+      }
+    );
   }
   function FieldTemplate(props) {
     const {
@@ -338,6 +403,7 @@
       return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "none" }, children });
     }
     const isCheckbox = uiOptions.widget === "checkbox";
+    const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
     return /* @__PURE__ */ jsxRuntime.jsx(
       WrapIfAdditionalTemplate2,
       {
@@ -356,12 +422,23 @@
         schema,
         uiSchema,
         registry,
-        children: /* @__PURE__ */ jsxRuntime.jsxs(FormControl, { fullWidth: true, error: rawErrors.length ? true : false, required, children: [
-          children,
-          displayLabel && !isCheckbox && rawDescription ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "textSecondary", children: description }) : null,
-          errors,
-          help
-        ] })
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          FormControl,
+          {
+            fullWidth: true,
+            error: rawErrors.length ? true : false,
+            required,
+            ...muiSlotProps?.fieldFormControl,
+            sx: otherMuiProps.sx,
+            className: otherMuiProps.className,
+            children: [
+              children,
+              displayLabel && !isCheckbox && rawDescription ? /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", color: "textSecondary", ...muiSlotProps?.fieldTypography, children: description }) : null,
+              errors,
+              help
+            ]
+          }
+        )
       }
     );
   }
@@ -370,9 +447,11 @@
     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 }),
+    const { optionSchemaField, selector, uiSchema } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { sx: { mb: 2 }, ...muiSlotProps?.multiBox, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(FormControl, { fullWidth: true, sx: { mb: 2 }, ...muiSlotProps?.multiFormControl, children: selector }),
       optionSchemaField
     ] });
   }
@@ -403,6 +482,7 @@
     const {
       ButtonTemplates: { AddButton: AddButton2 }
     } = registry.templates;
+    const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       title && /* @__PURE__ */ jsxRuntime.jsx(
         TitleFieldTemplate,
@@ -426,17 +506,17 @@
           registry
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, spacing: 2, style: { marginTop: "10px" }, ...muiSlotProps?.objectGridContainer, 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__ */ jsxRuntime.jsx(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
+            element.hidden ? element.content : /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, ...muiSlotProps?.objectGridItem, children: element.content }, index)
           )
         )
       ] }),
-      utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(Grid4, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsxRuntime.jsx(Grid4, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      utils.canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsxRuntime.jsx(Grid4, { container: true, justifyContent: "flex-end", ...muiSlotProps?.objectAddButtonGridContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Grid4, { ...muiSlotProps?.objectAddButtonGridItem, children: /* @__PURE__ */ jsxRuntime.jsx(
         AddButton2,
         {
           id: utils.buttonId(fieldPathId, "add"),
@@ -450,13 +530,14 @@
     ] });
   }
   function OptionalDataControlsTemplate(props) {
-    const { id, registry, label, onAddClick, onRemoveClick } = props;
+    const { id, registry, label, onAddClick, onRemoveClick, uiSchema } = props;
     if (onAddClick) {
       return /* @__PURE__ */ jsxRuntime.jsx(
         MuiIconButton,
         {
           id,
           registry,
+          uiSchema,
           className: "rjsf-add-optional-data",
           onClick: onAddClick,
           title: label,
@@ -469,6 +550,7 @@
         {
           id,
           registry,
+          uiSchema,
           className: "rjsf-remove-optional-data",
           onClick: onRemoveClick,
           title: label
@@ -482,23 +564,35 @@
     if (norender) {
       return null;
     }
-    return /* @__PURE__ */ jsxRuntime.jsx(Box, { marginTop: 3, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { marginTop: 3, ...muiSlotProps?.submitBox, children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button,
+      {
+        type: "submit",
+        variant: "contained",
+        color: "primary",
+        ...submitButtonProps,
+        ...otherMuiProps,
+        ...muiSlotProps?.submitButton,
+        children: submitText
+      }
+    ) });
   }
-  function TitleField({
-    id,
-    title,
-    optionalDataControl
-  }) {
-    let heading = /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", children: title });
+  function TitleField(props) {
+    const { id, title, optionalDataControl, uiSchema } = props;
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+    let heading = /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", ...muiSlotProps?.titleTypography, 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 })
+      heading = /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, spacing: 0, ...muiSlotProps?.titleGridContainer, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: "grow", ...muiSlotProps?.titleGridItem, children: heading }),
+        /* @__PURE__ */ jsxRuntime.jsx(Grid4, { justifyContent: "flex-end", ...muiSlotProps?.titleOptionalDataGridItem, children: optionalDataControl })
       ] });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { id, mb: 1, mt: 1, children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs(Box, { id, mb: 1, mt: 1, ...muiSlotProps?.titleBox, children: [
       heading,
-      /* @__PURE__ */ jsxRuntime.jsx(Divider, {})
+      /* @__PURE__ */ jsxRuntime.jsx(Divider, { ...muiSlotProps?.titleDivider })
     ] });
   }
   function WrapIfAdditionalTemplate(props) {
@@ -528,39 +622,56 @@
       paddingRight: 6,
       fontWeight: "bold"
     };
+    const uiOptions = utils.getUiOptions(uiSchema);
+    const { rjsfSlotProps } = getMuiProps(uiOptions);
+    const muiSlotProps = rjsfSlotProps;
     if (!additional) {
       return /* @__PURE__ */ jsxRuntime.jsx("div", { className: classNames, style, children });
     }
-    return /* @__PURE__ */ jsxRuntime.jsxs(Grid4, { container: true, alignItems: "flex-start", spacing: 2, className: classNames, style, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: 5.5, children: /* @__PURE__ */ jsxRuntime.jsx(
-        TextField,
-        {
-          fullWidth: true,
-          required,
-          label: displayLabel ? keyLabel : void 0,
-          defaultValue: label,
-          disabled: disabled || readonly,
-          id: `${id}-key`,
-          name: `${id}-key`,
-          onBlur: !readonly ? onKeyRenameBlur : void 0,
-          type: "text"
-        }
-      ) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: 5.5, children }),
-      /* @__PURE__ */ jsxRuntime.jsx(Grid4, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsxRuntime.jsx(
-        RemoveButton2,
-        {
-          id: utils.buttonId(id, "remove"),
-          className: "rjsf-object-property-remove",
-          iconType: "default",
-          style: btnStyle,
-          disabled: disabled || readonly,
-          onClick: onRemoveProperty,
-          uiSchema,
-          registry
-        }
-      ) })
-    ] }, `${id}-key`);
+    const { wrapGridContainer, wrapKeyGridItem, wrapChildrenGridItem, wrapRemoveButtonGridItem } = muiSlotProps || {};
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      Grid4,
+      {
+        container: true,
+        alignItems: "flex-start",
+        spacing: 2,
+        className: classNames,
+        style,
+        ...wrapGridContainer,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: 5.5, ...wrapKeyGridItem, children: /* @__PURE__ */ jsxRuntime.jsx(
+            TextField,
+            {
+              fullWidth: true,
+              required,
+              label: displayLabel ? keyLabel : void 0,
+              defaultValue: label,
+              disabled: disabled || readonly,
+              id: `${id}-key`,
+              name: `${id}-key`,
+              onBlur: !readonly ? onKeyRenameBlur : void 0,
+              type: "text"
+            },
+            label
+          ) }),
+          /* @__PURE__ */ jsxRuntime.jsx(Grid4, { size: 5.5, ...wrapChildrenGridItem, children }),
+          /* @__PURE__ */ jsxRuntime.jsx(Grid4, { sx: { mt: 1.5 }, ...wrapRemoveButtonGridItem, children: /* @__PURE__ */ jsxRuntime.jsx(
+            RemoveButton2,
+            {
+              id: utils.buttonId(id, "remove"),
+              className: "rjsf-object-property-remove",
+              iconType: "default",
+              style: btnStyle,
+              disabled: disabled || readonly,
+              onClick: onRemoveProperty,
+              uiSchema,
+              registry
+            }
+          ) })
+        ]
+      },
+      `${id}-key`
+    );
   }
 
   // src/Templates/Templates.ts
@@ -620,6 +731,7 @@
     const _onBlur = () => onBlur(id, value);
     const _onFocus = () => onFocus(id, value);
     const description = options.description ?? schema.description;
+    const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       !hideLabel && description && /* @__PURE__ */ jsxRuntime.jsx(
         DescriptionFieldTemplate,
@@ -634,6 +746,8 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         FormControlLabel,
         {
+          ...otherMuiProps,
+          ...muiSlotProps?.formControlLabel,
           control: /* @__PURE__ */ jsxRuntime.jsx(
             Checkbox,
             {
@@ -646,7 +760,8 @@
               onChange: _onChange,
               onBlur: _onBlur,
               onFocus: _onFocus,
-              "aria-describedby": utils.ariaDescribedByIds(id)
+              "aria-describedby": utils.ariaDescribedByIds(id),
+              ...muiSlotProps?.checkbox
             }
           ),
           label: utils.labelValue(label, hideLabel, false)
@@ -654,22 +769,24 @@
       )
     ] });
   }
-  function CheckboxesWidget({
-    label,
-    hideLabel,
-    id,
-    htmlName,
-    disabled,
-    options,
-    value,
-    autofocus,
-    readonly,
-    required,
-    onChange,
-    onBlur,
-    onFocus
-  }) {
+  function CheckboxesWidget(props) {
+    const {
+      label,
+      hideLabel,
+      id,
+      htmlName,
+      disabled,
+      options,
+      value,
+      autofocus,
+      readonly,
+      required,
+      onChange,
+      onBlur,
+      onFocus
+    } = props;
     const { enumOptions, enumDisabled, inline, emptyValue } = options;
+    const optionValueFormat = utils.getOptionValueFormat(options);
     const checkboxesValues = Array.isArray(value) ? value : [value];
     const _onChange = (index) => ({ target: { checked } }) => {
       if (checked) {
@@ -678,19 +795,21 @@
         onChange(utils.enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
       }
     };
-    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+    const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       utils.labelValue(
         /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { required, htmlFor: id, children: label || void 0 }),
         hideLabel
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(FormGroup, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+      /* @__PURE__ */ jsxRuntime.jsx(FormGroup, { ...otherMuiProps, ...muiSlotProps?.formGroup, id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
         const checked = utils.enumOptionsIsSelected(option.value, checkboxesValues);
         const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
         const checkbox = /* @__PURE__ */ jsxRuntime.jsx(
           Checkbox,
           {
+            ...muiSlotProps?.checkbox,
             id: utils.optionId(id, index),
             name: htmlName || id,
             checked,
@@ -702,30 +821,28 @@
             "aria-describedby": utils.ariaDescribedByIds(id)
           }
         );
-        return /* @__PURE__ */ jsxRuntime.jsx(FormControlLabel, { control: checkbox, label: option.label }, index);
+        return /* @__PURE__ */ react.createElement(
+          FormControlLabel,
+          {
+            ...muiSlotProps?.formControlLabel,
+            control: checkbox,
+            key: index,
+            label: option.label
+          }
+        );
       }) })
     ] });
   }
-  function RadioWidget({
-    id,
-    htmlName,
-    options,
-    value,
-    required,
-    disabled,
-    readonly,
-    label,
-    hideLabel,
-    onChange,
-    onBlur,
-    onFocus
-  }) {
+  function RadioWidget(props) {
+    const { id, htmlName, options, value, required, disabled, readonly, label, hideLabel, onChange, onBlur, onFocus } = props;
     const { enumOptions, enumDisabled, emptyValue } = options;
-    const _onChange = (_, value2) => onChange(utils.enumOptionsValueForIndex(value2, enumOptions, emptyValue));
-    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+    const optionValueFormat = utils.getOptionValueFormat(options);
+    const _onChange = (_, value2) => onChange(utils.enumOptionValueDecoder(value2, enumOptions, optionValueFormat, emptyValue));
+    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
     const row = options ? options.inline : false;
-    const selectedIndex = utils.enumOptionsIndexForValue(value, enumOptions) ?? null;
+    const selectValue = utils.enumOptionSelectedValue(value, enumOptions, false, optionValueFormat, "");
+    const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       utils.labelValue(
         /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { required, htmlFor: id, children: label || void 0 }),
@@ -734,9 +851,11 @@
       /* @__PURE__ */ jsxRuntime.jsx(
         RadioGroup,
         {
+          ...otherMuiProps,
+          ...muiSlotProps?.radioGroup,
           id,
           name: htmlName || id,
-          value: selectedIndex,
+          value: selectValue,
           row,
           onChange: _onChange,
           onBlur: _onBlur,
@@ -744,15 +863,16 @@
           "aria-describedby": utils.ariaDescribedByIds(id),
           children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
             const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-            const radio = /* @__PURE__ */ jsxRuntime.jsx(
+            const radio = /* @__PURE__ */ react.createElement(
               FormControlLabel,
               {
-                control: /* @__PURE__ */ jsxRuntime.jsx(Radio, { name: htmlName || id, id: utils.optionId(id, index), color: "primary" }),
+                ...muiSlotProps?.formControlLabel,
+                control: /* @__PURE__ */ jsxRuntime.jsx(Radio, { ...muiSlotProps?.radio, name: htmlName || id, id: utils.optionId(id, index), color: "primary" }),
                 label: option.label,
-                value: String(index),
+                value: utils.enumOptionValueEncoder(option.value, index, optionValueFormat),
+                key: index,
                 disabled: disabled || itemDisabled || readonly
-              },
-              index
+              }
             );
             return radio;
           })
@@ -768,6 +888,7 @@
     };
     const _onBlur = ({ target }) => onBlur(id, target && target.value);
     const _onFocus = ({ target }) => onFocus(id, target && target.value);
+    const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       utils.labelValue(
         /* @__PURE__ */ jsxRuntime.jsx(FormLabel, { required, htmlFor: id, children: label || void 0 }),
@@ -781,55 +902,59 @@
           onBlur: _onBlur,
           onFocus: _onFocus,
           valueLabelDisplay: "auto",
+          ...otherMuiProps,
+          ...muiSlotProps?.slider,
           ...sliderProps,
           "aria-describedby": utils.ariaDescribedByIds(id)
         }
       )
     ] });
   }
-  function SelectWidget({
-    schema,
-    id,
-    name,
-    // remove this from textFieldProps
-    htmlName,
-    options,
-    label,
-    hideLabel,
-    required,
-    disabled,
-    placeholder,
-    readonly,
-    value,
-    multiple,
-    autofocus,
-    onChange,
-    onBlur,
-    onFocus,
-    errorSchema,
-    rawErrors = [],
-    registry,
-    uiSchema,
-    hideError,
-    ...textFieldProps
-  }) {
+  function SelectWidget(props) {
+    const {
+      schema,
+      id,
+      name,
+      // remove this from textFieldProps
+      htmlName,
+      options,
+      label,
+      hideLabel,
+      required,
+      disabled,
+      placeholder,
+      readonly,
+      value,
+      multiple,
+      autofocus,
+      onChange,
+      onBlur,
+      onFocus,
+      errorSchema,
+      rawErrors = [],
+      registry,
+      uiSchema,
+      hideError,
+      ...textFieldProps
+    } = props;
     const { enumOptions, enumDisabled, emptyValue: optEmptyVal } = options;
-    multiple = typeof multiple === "undefined" ? false : !!multiple;
-    const emptyValue = multiple ? [] : "";
-    const isEmpty = typeof value === "undefined" || multiple && value.length < 1 || !multiple && value === emptyValue;
-    const _onChange = ({ target: { value: value2 } }) => onChange(utils.enumOptionsValueForIndex(value2, enumOptions, optEmptyVal));
-    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
-    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionsValueForIndex(target && target.value, enumOptions, optEmptyVal));
-    const selectedIndexes = utils.enumOptionsIndexForValue(value, enumOptions, multiple);
+    const optionValueFormat = utils.getOptionValueFormat(options);
+    const isMultiple = typeof multiple === "undefined" ? false : !!multiple;
+    const emptyValue = isMultiple ? [] : "";
+    const isEmpty = typeof value === "undefined" || isMultiple && value.length < 1 || !isMultiple && value === emptyValue;
+    const _onChange = ({ target: { value: value2 } }) => onChange(utils.enumOptionValueDecoder(value2, enumOptions, optionValueFormat, optEmptyVal));
+    const _onBlur = ({ target }) => onBlur(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+    const _onFocus = ({ target }) => onFocus(id, utils.enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+    const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
     const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
-    const showPlaceholderOption = !multiple && schema.default === void 0;
+    const showPlaceholderOption = !isMultiple && schema.default === void 0;
     return /* @__PURE__ */ jsxRuntime.jsxs(
       TextField,
       {
         id,
         name: htmlName || id,
         label: utils.labelValue(label || void 0, hideLabel, void 0),
-        value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
+        value: utils.enumOptionSelectedValue(value, enumOptions, isMultiple, optionValueFormat, emptyValue),
         required,
         disabled: disabled || readonly,
         autoFocus: autofocus,
@@ -839,22 +964,25 @@
         onChange: _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
-        ...textFieldRemainingProps,
+        ...{ ...otherMuiProps, ...textFieldRemainingProps },
         select: true,
-        InputLabelProps: {
-          ...InputLabelProps,
-          shrink: !isEmpty
-        },
-        SelectProps: {
-          ...SelectProps,
-          multiple
+        slotProps: {
+          ...muiSlotProps,
+          inputLabel: {
+            ...muiSlotProps?.inputLabel,
+            shrink: !isEmpty
+          },
+          select: {
+            ...muiSlotProps?.select,
+            multiple
+          }
         },
         "aria-describedby": utils.ariaDescribedByIds(id),
         children: [
           showPlaceholderOption && /* @__PURE__ */ jsxRuntime.jsx(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__ */ jsxRuntime.jsx(MenuItem, { value: String(i), disabled: disabled2, children: label2 }, i);
+            return /* @__PURE__ */ jsxRuntime.jsx(MenuItem, { value: utils.enumOptionValueEncoder(value2, i, optionValueFormat), disabled: disabled2, children: label2 }, i);
           })
         ]
       }