@rjsf/mui 6.4.2 → 6.5.1

package/dist/mui.esm.js

@@ -4,7 +4,28 @@ import { withTheme } from "@rjsf/core";
 // src/AddButton/AddButton.tsx
 import AddIcon from "@mui/icons-material/Add";
 import IconButton from "@mui/material/IconButton";
-import { TranslatableString } from "@rjsf/utils";
+import {
+  getUiOptions,
+  TranslatableString
+} from "@rjsf/utils";
+
+// src/util.ts
+function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
+  const muiProps = options?.mui || {};
+  if (rjsfSlotPropsOnly) {
+    const { rjsfSlotProps } = muiProps;
+    return { rjsfSlotProps };
+  }
+  if (propsToFilter) {
+    return Object.keys(muiProps).filter((key) => propsToFilter.includes(key)).reduce((obj, key) => {
+      obj[key] = muiProps[key];
+      return obj;
+    }, {});
+  }
+  return muiProps;
+}
+
+// src/AddButton/AddButton.tsx
 import { jsx } from "react/jsx-runtime";
 function AddButton({
   uiSchema,
@@ -12,7 +33,16 @@ function AddButton({
   ...props
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsx(IconButton, { title: translateString(TranslatableString.AddItemButton), ...props, color: "primary", children: /* @__PURE__ */ jsx(AddIcon, {}) });
+  const uiOptions = getUiOptions(uiSchema);
+  const muiProps = getMuiProps(uiOptions, [
+    "color",
+    "disableFocusRipple",
+    "disableRipple",
+    "edge",
+    "size",
+    "sx"
+  ]);
+  return /* @__PURE__ */ jsx(IconButton, { title: translateString(TranslatableString.AddItemButton), ...props, color: "primary", ...muiProps, children: /* @__PURE__ */ jsx(AddIcon, {}) });
 }
 
 // src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx
@@ -20,13 +50,13 @@ import Box from "@mui/material/Box";
 import Grid from "@mui/material/Grid";
 import Paper from "@mui/material/Paper";
 import {
-  getUiOptions,
+  getUiOptions as getUiOptions2,
   getTemplate
 } from "@rjsf/utils";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function ArrayFieldItemTemplate(props) {
   const { children, buttonsProps, hasDescription, hasToolbar, uiSchema, registry } = props;
-  const uiOptions = getUiOptions(uiSchema);
+  const uiOptions = getUiOptions2(uiSchema);
   const ArrayFieldItemButtonsTemplate = getTemplate(
     "ArrayFieldItemButtonsTemplate",
     registry,
@@ -39,9 +69,18 @@ function ArrayFieldItemTemplate(props) {
     fontWeight: "bold",
     minWidth: 0
   };
-  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", children: [
-    /* @__PURE__ */ jsx2(Grid, { size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 }, style: { overflow: "auto" }, children: /* @__PURE__ */ jsx2(Box, { mb: 2, children: /* @__PURE__ */ jsx2(Paper, { elevation: 2, children: /* @__PURE__ */ jsx2(Box, { p: 2, children }) }) }) }),
-    hasToolbar && /* @__PURE__ */ jsx2(Grid, { sx: { mt: hasDescription ? -5 : -1.5 }, children: /* @__PURE__ */ jsx2(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsxs(Grid, { container: true, alignItems: "center", ...muiSlotProps?.arrayItemGridContainer, children: [
+    /* @__PURE__ */ jsx2(
+      Grid,
+      {
+        size: { xs: 8, sm: 9, md: 10, lg: 11, xl: 11.25 },
+        style: { overflow: "auto" },
+        ...muiSlotProps?.arrayItemGridItem,
+        children: /* @__PURE__ */ jsx2(Box, { mb: 2, ...muiSlotProps?.arrayItemOuterBox, children: /* @__PURE__ */ jsx2(Paper, { elevation: 2, ...muiSlotProps?.arrayItemPaper, children: /* @__PURE__ */ jsx2(Box, { p: 2, ...muiSlotProps?.arrayItemInnerBox, children }) }) })
+      }
+    ),
+    hasToolbar && /* @__PURE__ */ jsx2(Grid, { sx: { mt: hasDescription ? -5 : -1.5 }, ...muiSlotProps?.arrayItemToolbarGrid, children: /* @__PURE__ */ jsx2(ArrayFieldItemButtonsTemplate, { ...buttonsProps, style: btnStyle }) })
   ] });
 }
 
@@ -51,7 +90,7 @@ import Grid2 from "@mui/material/Grid";
 import Paper2 from "@mui/material/Paper";
 import {
   getTemplate as getTemplate2,
-  getUiOptions as getUiOptions2,
+  getUiOptions as getUiOptions3,
   buttonId
 } from "@rjsf/utils";
 import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
@@ -70,7 +109,7 @@ function ArrayFieldTemplate(props) {
     schema,
     title
   } = props;
-  const uiOptions = getUiOptions2(uiSchema);
+  const uiOptions = getUiOptions3(uiSchema);
   const ArrayFieldDescriptionTemplate = getTemplate2(
     "ArrayFieldDescriptionTemplate",
     registry,
@@ -85,7 +124,8 @@ function ArrayFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
-  return /* @__PURE__ */ jsx3(Paper2, { elevation: 2, children: /* @__PURE__ */ jsxs2(Box2, { p: 2, children: [
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsx3(Paper2, { elevation: 2, ...muiSlotProps?.arrayPaper, children: /* @__PURE__ */ jsxs2(Box2, { p: 2, ...muiSlotProps?.arrayBox, children: [
     /* @__PURE__ */ jsx3(
       ArrayFieldTitleTemplate,
       {
@@ -110,7 +150,7 @@ function ArrayFieldTemplate(props) {
     ),
     !showOptionalDataControlInTitle ? optionalDataControl : void 0,
     items,
-    canAdd && /* @__PURE__ */ jsx3(Grid2, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsx3(Grid2, { children: /* @__PURE__ */ jsx3(Box2, { mt: 2, children: /* @__PURE__ */ jsx3(
+    canAdd && /* @__PURE__ */ jsx3(Grid2, { container: true, justifyContent: "flex-end", ...muiSlotProps?.arrayAddButtonGridContainer, children: /* @__PURE__ */ jsx3(Grid2, { ...muiSlotProps?.arrayAddButtonGridItem, children: /* @__PURE__ */ jsx3(Box2, { mt: 2, ...muiSlotProps?.arrayAddButtonBox, children: /* @__PURE__ */ jsx3(
       AddButton2,
       {
         id: buttonId(fieldPathId, "add"),
@@ -170,8 +210,11 @@ function BaseInputTemplate(props) {
   } = props;
   const { ClearButton: ClearButton2 } = registry.templates.ButtonTemplates;
   const { step, min, max, accept, ...rest } = getInputProps(schema, type, options);
+  const muiProps = getMuiProps(options);
+  const { slotProps: muiSlotProps, ...otherMuiProps } = muiProps;
   const htmlInputProps = {
     ...slotProps?.htmlInput,
+    ...muiSlotProps?.htmlInput,
     step,
     min,
     max,
@@ -181,7 +224,7 @@ function BaseInputTemplate(props) {
   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 = useCallback(
     (e) => {
       e.preventDefault();
@@ -190,7 +233,7 @@ function BaseInputTemplate(props) {
     },
     [onChange, options.emptyValue]
   );
-  const inputProps = { ...InputProps, ...slotProps?.input };
+  const inputProps = { ...InputProps, ...slotProps?.input, ...muiSlotProps?.input };
   if (options.allowClearTextInputs && value && !readonly && !disabled) {
     const clearAdornment = /* @__PURE__ */ jsx4(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx4(ClearButton2, { registry, onClick: _onClear }) });
     inputProps.endAdornment = !inputProps.endAdornment ? clearAdornment : /* @__PURE__ */ jsxs3(Fragment, { children: [
@@ -211,6 +254,7 @@ function BaseInputTemplate(props) {
         disabled: disabled || readonly,
         slotProps: {
           ...slotProps,
+          ...muiSlotProps,
           input: inputProps,
           htmlInput: htmlInputProps,
           inputLabel: DisplayInputLabelProps
@@ -221,7 +265,7 @@ function BaseInputTemplate(props) {
         onChange: onChangeOverride || _onChange,
         onBlur: _onBlur,
         onFocus: _onFocus,
-        ...textFieldProps,
+        ...{ ...otherMuiProps, ...textFieldProps },
         "aria-describedby": ariaDescribedByIds(id, !!schema.examples)
       }
     ),
@@ -231,12 +275,18 @@ function BaseInputTemplate(props) {
 
 // src/DescriptionField/DescriptionField.tsx
 import Typography from "@mui/material/Typography";
+import {
+  getUiOptions as getUiOptions4
+} from "@rjsf/utils";
 import { RichDescription } from "@rjsf/core";
 import { jsx as jsx5 } from "react/jsx-runtime";
 function DescriptionField(props) {
   const { id, description, registry, uiSchema } = props;
+  const uiOptions = getUiOptions4(uiSchema);
+  const muiProps = getMuiProps(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
   if (description) {
-    return /* @__PURE__ */ jsx5(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" }, children: /* @__PURE__ */ jsx5(RichDescription, { description, registry, uiSchema }) });
+    return /* @__PURE__ */ jsx5(Typography, { id, variant: "subtitle2", style: { marginTop: "5px" }, ...muiSlotProps?.descTypography, children: /* @__PURE__ */ jsx5(RichDescription, { description, registry, uiSchema }) });
   }
   return null;
 }
@@ -250,19 +300,25 @@ import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText from "@mui/material/ListItemText";
 import Paper3 from "@mui/material/Paper";
 import Typography2 from "@mui/material/Typography";
-import { TranslatableString as TranslatableString2 } from "@rjsf/utils";
+import {
+  TranslatableString as TranslatableString2,
+  getUiOptions as getUiOptions5
+} from "@rjsf/utils";
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function ErrorList({
   errors,
-  registry
+  registry,
+  uiSchema
 }) {
   const { translateString } = registry;
-  return /* @__PURE__ */ jsx6(Paper3, { elevation: 2, children: /* @__PURE__ */ jsxs4(Box3, { mb: 2, p: 2, children: [
-    /* @__PURE__ */ jsx6(Typography2, { variant: "h6", children: translateString(TranslatableString2.ErrorsLabel) }),
-    /* @__PURE__ */ jsx6(List, { dense: true, children: errors.map((error, i) => {
-      return /* @__PURE__ */ jsxs4(ListItem, { children: [
-        /* @__PURE__ */ jsx6(ListItemIcon, { children: /* @__PURE__ */ jsx6(ErrorIcon, { color: "error" }) }),
-        /* @__PURE__ */ jsx6(ListItemText, { primary: error.stack })
+  const uiOptions = getUiOptions5(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsx6(Paper3, { elevation: 2, ...muiSlotProps?.errorPaper, children: /* @__PURE__ */ jsxs4(Box3, { mb: 2, p: 2, ...muiSlotProps?.errorBox, children: [
+    /* @__PURE__ */ jsx6(Typography2, { variant: "h6", ...muiSlotProps?.errorTypography, children: translateString(TranslatableString2.ErrorsLabel) }),
+    /* @__PURE__ */ jsx6(List, { dense: true, ...muiSlotProps?.errorList, children: errors.map((error, i) => {
+      return /* @__PURE__ */ jsxs4(ListItem, { ...muiSlotProps?.errorListItem, children: [
+        /* @__PURE__ */ jsx6(ListItemIcon, { ...muiSlotProps?.errorListItemIcon, children: /* @__PURE__ */ jsx6(ErrorIcon, { color: "error" }) }),
+        /* @__PURE__ */ jsx6(ListItemText, { primary: error.stack, ...muiSlotProps?.errorListItemText })
       ] }, i);
     }) })
   ] }) });
@@ -275,11 +331,23 @@ import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
 import CopyIcon from "@mui/icons-material/ContentCopy";
 import RemoveIcon from "@mui/icons-material/Remove";
 import ClearIcon from "@mui/icons-material/Clear";
-import { TranslatableString as TranslatableString3 } from "@rjsf/utils";
+import {
+  TranslatableString as TranslatableString3,
+  getUiOptions as getUiOptions6
+} from "@rjsf/utils";
 import { jsx as jsx7 } from "react/jsx-runtime";
 function MuiIconButton(props) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
-  return /* @__PURE__ */ jsx7(IconButton2, { ...otherProps, size: "small", color, children: icon });
+  const uiOptions = getUiOptions6(uiSchema);
+  const muiProps = getMuiProps(uiOptions, [
+    "color",
+    "disableFocusRipple",
+    "disableRipple",
+    "edge",
+    "size",
+    "sx"
+  ]);
+  return /* @__PURE__ */ jsx7(IconButton2, { ...muiProps, ...otherProps, size: "small", color, children: icon });
 }
 function CopyButton(props) {
   const {
@@ -354,22 +422,31 @@ function ClearButton(props) {
 import ListItem2 from "@mui/material/ListItem";
 import FormHelperText from "@mui/material/FormHelperText";
 import List2 from "@mui/material/List";
-import { errorId } from "@rjsf/utils";
+import {
+  errorId,
+  getUiOptions as getUiOptions7
+} from "@rjsf/utils";
 import { jsx as jsx8 } from "react/jsx-runtime";
 function FieldErrorTemplate(props) {
-  const { errors = [], fieldPathId } = props;
+  const { errors = [], fieldPathId, uiSchema } = props;
   if (errors.length === 0) {
     return null;
   }
   const id = errorId(fieldPathId);
-  return /* @__PURE__ */ jsx8(List2, { id, dense: true, disablePadding: true, children: errors.map((error, i) => {
-    return /* @__PURE__ */ jsx8(ListItem2, { disableGutters: true, children: /* @__PURE__ */ jsx8(FormHelperText, { component: "div", id: `${id}-${i}`, children: error }) }, i);
+  const uiOptions = getUiOptions7(uiSchema);
+  const muiProps = getMuiProps(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  return /* @__PURE__ */ jsx8(List2, { id, dense: true, disablePadding: true, ...muiSlotProps?.fieldErrorList, children: errors.map((error, i) => {
+    return /* @__PURE__ */ jsx8(ListItem2, { disableGutters: true, ...muiSlotProps?.fieldErrorListItem, children: /* @__PURE__ */ jsx8(FormHelperText, { component: "div", id: `${id}-${i}`, ...muiSlotProps?.fieldErrorFormHelperText, children: error }) }, i);
   }) });
 }
 
 // src/FieldHelpTemplate/FieldHelpTemplate.tsx
 import { RichHelp } from "@rjsf/core";
-import { helpId } from "@rjsf/utils";
+import {
+  helpId,
+  getUiOptions as getUiOptions8
+} from "@rjsf/utils";
 import FormHelperText2 from "@mui/material/FormHelperText";
 import { jsx as jsx9 } from "react/jsx-runtime";
 function FieldHelpTemplate(props) {
@@ -377,7 +454,19 @@ function FieldHelpTemplate(props) {
   if (!help) {
     return null;
   }
-  return /* @__PURE__ */ jsx9(FormHelperText2, { component: "div", id: helpId(fieldPathId), style: { marginTop: "5px" }, children: /* @__PURE__ */ jsx9(RichHelp, { help, registry, uiSchema }) });
+  const uiOptions = getUiOptions8(uiSchema);
+  const muiProps = getMuiProps(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
+  return /* @__PURE__ */ jsx9(
+    FormHelperText2,
+    {
+      component: "div",
+      id: helpId(fieldPathId),
+      style: { marginTop: "5px" },
+      ...muiSlotProps?.helpFormHelperText,
+      children: /* @__PURE__ */ jsx9(RichHelp, { help, registry, uiSchema })
+    }
+  );
 }
 
 // src/FieldTemplate/FieldTemplate.tsx
@@ -385,7 +474,7 @@ import FormControl from "@mui/material/FormControl";
 import Typography3 from "@mui/material/Typography";
 import {
   getTemplate as getTemplate3,
-  getUiOptions as getUiOptions3
+  getUiOptions as getUiOptions9
 } from "@rjsf/utils";
 import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 function FieldTemplate(props) {
@@ -412,7 +501,7 @@ function FieldTemplate(props) {
     uiSchema,
     registry
   } = props;
-  const uiOptions = getUiOptions3(uiSchema);
+  const uiOptions = getUiOptions9(uiSchema);
   const WrapIfAdditionalTemplate2 = getTemplate3(
     "WrapIfAdditionalTemplate",
     registry,
@@ -422,6 +511,7 @@ function FieldTemplate(props) {
     return /* @__PURE__ */ jsx10("div", { style: { display: "none" }, children });
   }
   const isCheckbox = uiOptions.widget === "checkbox";
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
   return /* @__PURE__ */ jsx10(
     WrapIfAdditionalTemplate2,
     {
@@ -440,12 +530,23 @@ function FieldTemplate(props) {
       schema,
       uiSchema,
       registry,
-      children: /* @__PURE__ */ jsxs5(FormControl, { fullWidth: true, error: rawErrors.length ? true : false, required, children: [
-        children,
-        displayLabel && !isCheckbox && rawDescription ? /* @__PURE__ */ jsx10(Typography3, { variant: "caption", color: "textSecondary", children: description }) : null,
-        errors,
-        help
-      ] })
+      children: /* @__PURE__ */ jsxs5(
+        FormControl,
+        {
+          fullWidth: true,
+          error: rawErrors.length ? true : false,
+          required,
+          ...muiSlotProps?.fieldFormControl,
+          sx: otherMuiProps.sx,
+          className: otherMuiProps.className,
+          children: [
+            children,
+            displayLabel && !isCheckbox && rawDescription ? /* @__PURE__ */ jsx10(Typography3, { variant: "caption", color: "textSecondary", ...muiSlotProps?.fieldTypography, children: description }) : null,
+            errors,
+            help
+          ]
+        }
+      )
     }
   );
 }
@@ -461,11 +562,16 @@ function GridTemplate(props) {
 // src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx
 import Box4 from "@mui/material/Box";
 import FormControl2 from "@mui/material/FormControl";
+import {
+  getUiOptions as getUiOptions10
+} from "@rjsf/utils";
 import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
 function MultiSchemaFieldTemplate(props) {
-  const { optionSchemaField, selector } = props;
-  return /* @__PURE__ */ jsxs6(Box4, { sx: { mb: 2 }, children: [
-    /* @__PURE__ */ jsx12(FormControl2, { fullWidth: true, sx: { mb: 2 }, children: selector }),
+  const { optionSchemaField, selector, uiSchema } = props;
+  const uiOptions = getUiOptions10(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsxs6(Box4, { sx: { mb: 2 }, ...muiSlotProps?.multiBox, children: [
+    /* @__PURE__ */ jsx12(FormControl2, { fullWidth: true, sx: { mb: 2 }, ...muiSlotProps?.multiFormControl, children: selector }),
     optionSchemaField
   ] });
 }
@@ -476,7 +582,7 @@ import {
   canExpand,
   descriptionId,
   getTemplate as getTemplate4,
-  getUiOptions as getUiOptions4,
+  getUiOptions as getUiOptions11,
   titleId,
   buttonId as buttonId2
 } from "@rjsf/utils";
@@ -497,7 +603,7 @@ function ObjectFieldTemplate(props) {
     onAddProperty,
     registry
   } = props;
-  const uiOptions = getUiOptions4(uiSchema);
+  const uiOptions = getUiOptions11(uiSchema);
   const TitleFieldTemplate = getTemplate4("TitleFieldTemplate", registry, uiOptions);
   const DescriptionFieldTemplate = getTemplate4(
     "DescriptionFieldTemplate",
@@ -508,6 +614,7 @@ function ObjectFieldTemplate(props) {
   const {
     ButtonTemplates: { AddButton: AddButton2 }
   } = registry.templates;
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
   return /* @__PURE__ */ jsxs7(Fragment2, { children: [
     title && /* @__PURE__ */ jsx13(
       TitleFieldTemplate,
@@ -531,17 +638,17 @@ function ObjectFieldTemplate(props) {
         registry
       }
     ),
-    /* @__PURE__ */ jsxs7(Grid4, { container: true, spacing: 2, style: { marginTop: "10px" }, children: [
+    /* @__PURE__ */ jsxs7(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__ */ jsx13(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, children: element.content }, index)
+          element.hidden ? element.content : /* @__PURE__ */ jsx13(Grid4, { size: { xs: 12 }, style: { marginBottom: "10px" }, ...muiSlotProps?.objectGridItem, children: element.content }, index)
         )
       )
     ] }),
-    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(Grid4, { container: true, justifyContent: "flex-end", children: /* @__PURE__ */ jsx13(Grid4, { children: /* @__PURE__ */ jsx13(
+    canExpand(schema, uiSchema, formData) && /* @__PURE__ */ jsx13(Grid4, { container: true, justifyContent: "flex-end", ...muiSlotProps?.objectAddButtonGridContainer, children: /* @__PURE__ */ jsx13(Grid4, { ...muiSlotProps?.objectAddButtonGridItem, children: /* @__PURE__ */ jsx13(
       AddButton2,
       {
         id: buttonId2(fieldPathId, "add"),
@@ -559,13 +666,14 @@ function ObjectFieldTemplate(props) {
 import AddIcon2 from "@mui/icons-material/Add";
 import { jsx as jsx14 } from "react/jsx-runtime";
 function OptionalDataControlsTemplate(props) {
-  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  const { id, registry, label, onAddClick, onRemoveClick, uiSchema } = props;
   if (onAddClick) {
     return /* @__PURE__ */ jsx14(
       MuiIconButton,
       {
         id,
         registry,
+        uiSchema,
         className: "rjsf-add-optional-data",
         onClick: onAddClick,
         title: label,
@@ -578,6 +686,7 @@ function OptionalDataControlsTemplate(props) {
       {
         id,
         registry,
+        uiSchema,
         className: "rjsf-remove-optional-data",
         onClick: onRemoveClick,
         title: label
@@ -590,14 +699,30 @@ function OptionalDataControlsTemplate(props) {
 // src/SubmitButton/SubmitButton.tsx
 import Box5 from "@mui/material/Box";
 import Button from "@mui/material/Button";
-import { getSubmitButtonOptions } from "@rjsf/utils";
+import {
+  getSubmitButtonOptions,
+  getUiOptions as getUiOptions12
+} from "@rjsf/utils";
 import { jsx as jsx15 } from "react/jsx-runtime";
 function SubmitButton({ uiSchema }) {
   const { submitText, norender, props: submitButtonProps = {} } = getSubmitButtonOptions(uiSchema);
   if (norender) {
     return null;
   }
-  return /* @__PURE__ */ jsx15(Box5, { marginTop: 3, children: /* @__PURE__ */ jsx15(Button, { type: "submit", variant: "contained", color: "primary", ...submitButtonProps, children: submitText }) });
+  const uiOptions = getUiOptions12(uiSchema);
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(uiOptions);
+  return /* @__PURE__ */ jsx15(Box5, { marginTop: 3, ...muiSlotProps?.submitBox, children: /* @__PURE__ */ jsx15(
+    Button,
+    {
+      type: "submit",
+      variant: "contained",
+      color: "primary",
+      ...submitButtonProps,
+      ...otherMuiProps,
+      ...muiSlotProps?.submitButton,
+      children: submitText
+    }
+  ) });
 }
 
 // src/TitleField/TitleField.tsx
@@ -605,22 +730,24 @@ import Box6 from "@mui/material/Box";
 import Divider from "@mui/material/Divider";
 import Grid5 from "@mui/material/Grid";
 import Typography4 from "@mui/material/Typography";
+import {
+  getUiOptions as getUiOptions13
+} from "@rjsf/utils";
 import { jsx as jsx16, jsxs as jsxs8 } from "react/jsx-runtime";
-function TitleField({
-  id,
-  title,
-  optionalDataControl
-}) {
-  let heading = /* @__PURE__ */ jsx16(Typography4, { variant: "h5", children: title });
+function TitleField(props) {
+  const { id, title, optionalDataControl, uiSchema } = props;
+  const uiOptions = getUiOptions13(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps(uiOptions);
+  let heading = /* @__PURE__ */ jsx16(Typography4, { variant: "h5", ...muiSlotProps?.titleTypography, children: title });
   if (optionalDataControl) {
-    heading = /* @__PURE__ */ jsxs8(Grid5, { container: true, spacing: 0, children: [
-      /* @__PURE__ */ jsx16(Grid5, { size: "grow", children: heading }),
-      /* @__PURE__ */ jsx16(Grid5, { justifyContent: "flex-end", children: optionalDataControl })
+    heading = /* @__PURE__ */ jsxs8(Grid5, { container: true, spacing: 0, ...muiSlotProps?.titleGridContainer, children: [
+      /* @__PURE__ */ jsx16(Grid5, { size: "grow", ...muiSlotProps?.titleGridItem, children: heading }),
+      /* @__PURE__ */ jsx16(Grid5, { justifyContent: "flex-end", ...muiSlotProps?.titleOptionalDataGridItem, children: optionalDataControl })
     ] });
   }
-  return /* @__PURE__ */ jsxs8(Box6, { id, mb: 1, mt: 1, children: [
+  return /* @__PURE__ */ jsxs8(Box6, { id, mb: 1, mt: 1, ...muiSlotProps?.titleBox, children: [
     heading,
-    /* @__PURE__ */ jsx16(Divider, {})
+    /* @__PURE__ */ jsx16(Divider, { ...muiSlotProps?.titleDivider })
   ] });
 }
 
@@ -630,7 +757,8 @@ import TextField2 from "@mui/material/TextField";
 import {
   ADDITIONAL_PROPERTY_FLAG,
   buttonId as buttonId3,
-  TranslatableString as TranslatableString4
+  TranslatableString as TranslatableString4,
+  getUiOptions as getUiOptions14
 } from "@rjsf/utils";
 import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
 function WrapIfAdditionalTemplate(props) {
@@ -660,39 +788,56 @@ function WrapIfAdditionalTemplate(props) {
     paddingRight: 6,
     fontWeight: "bold"
   };
+  const uiOptions = getUiOptions14(uiSchema);
+  const { rjsfSlotProps } = getMuiProps(uiOptions);
+  const muiSlotProps = rjsfSlotProps;
   if (!additional) {
     return /* @__PURE__ */ jsx17("div", { className: classNames, style, children });
   }
-  return /* @__PURE__ */ jsxs9(Grid6, { container: true, alignItems: "flex-start", spacing: 2, className: classNames, style, children: [
-    /* @__PURE__ */ jsx17(Grid6, { size: 5.5, children: /* @__PURE__ */ jsx17(
-      TextField2,
-      {
-        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__ */ jsx17(Grid6, { size: 5.5, children }),
-    /* @__PURE__ */ jsx17(Grid6, { sx: { mt: 1.5 }, children: /* @__PURE__ */ jsx17(
-      RemoveButton2,
-      {
-        id: buttonId3(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__ */ jsxs9(
+    Grid6,
+    {
+      container: true,
+      alignItems: "flex-start",
+      spacing: 2,
+      className: classNames,
+      style,
+      ...wrapGridContainer,
+      children: [
+        /* @__PURE__ */ jsx17(Grid6, { size: 5.5, ...wrapKeyGridItem, children: /* @__PURE__ */ jsx17(
+          TextField2,
+          {
+            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__ */ jsx17(Grid6, { size: 5.5, ...wrapChildrenGridItem, children }),
+        /* @__PURE__ */ jsx17(Grid6, { sx: { mt: 1.5 }, ...wrapRemoveButtonGridItem, children: /* @__PURE__ */ jsx17(
+          RemoveButton2,
+          {
+            id: buttonId3(id, "remove"),
+            className: "rjsf-object-property-remove",
+            iconType: "default",
+            style: btnStyle,
+            disabled: disabled || readonly,
+            onClick: onRemoveProperty,
+            uiSchema,
+            registry
+          }
+        ) })
+      ]
+    },
+    `${id}-key`
+  );
 }
 
 // src/Templates/Templates.ts
@@ -764,6 +909,7 @@ function CheckboxWidget(props) {
   const _onBlur = () => onBlur(id, value);
   const _onFocus = () => onFocus(id, value);
   const description = options.description ?? schema.description;
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ jsxs10(Fragment3, { children: [
     !hideLabel && description && /* @__PURE__ */ jsx18(
       DescriptionFieldTemplate,
@@ -778,6 +924,8 @@ function CheckboxWidget(props) {
     /* @__PURE__ */ jsx18(
       FormControlLabel,
       {
+        ...otherMuiProps,
+        ...muiSlotProps?.formControlLabel,
         control: /* @__PURE__ */ jsx18(
           Checkbox,
           {
@@ -790,7 +938,8 @@ function CheckboxWidget(props) {
             onChange: _onChange,
             onBlur: _onBlur,
             onFocus: _onFocus,
-            "aria-describedby": ariaDescribedByIds2(id)
+            "aria-describedby": ariaDescribedByIds2(id),
+            ...muiSlotProps?.checkbox
           }
         ),
         label: labelValue2(label, hideLabel, false)
@@ -806,30 +955,34 @@ import FormGroup from "@mui/material/FormGroup";
 import FormLabel from "@mui/material/FormLabel";
 import {
   ariaDescribedByIds as ariaDescribedByIds3,
+  enumOptionValueDecoder,
   enumOptionsDeselectValue,
   enumOptionsIsSelected,
   enumOptionsSelectValue,
-  enumOptionsValueForIndex,
+  getOptionValueFormat,
   labelValue as labelValue3,
   optionId
 } from "@rjsf/utils";
 import { Fragment as Fragment4, jsx as jsx19, jsxs as jsxs11 } from "react/jsx-runtime";
-function CheckboxesWidget({
-  label,
-  hideLabel,
-  id,
-  htmlName,
-  disabled,
-  options,
-  value,
-  autofocus,
-  readonly,
-  required,
-  onChange,
-  onBlur,
-  onFocus
-}) {
+import { createElement } from "react";
+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 = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
   const _onChange = (index) => ({ target: { checked } }) => {
     if (checked) {
@@ -838,19 +991,21 @@ function CheckboxesWidget({
       onChange(enumOptionsDeselectValue(index, checkboxesValues, enumOptions));
     }
   };
-  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex(target && target.value, enumOptions, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ jsxs11(Fragment4, { children: [
     labelValue3(
       /* @__PURE__ */ jsx19(FormLabel, { required, htmlFor: id, children: label || void 0 }),
       hideLabel
     ),
-    /* @__PURE__ */ jsx19(FormGroup, { id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
+    /* @__PURE__ */ jsx19(FormGroup, { ...otherMuiProps, ...muiSlotProps?.formGroup, id, row: !!inline, children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
       const checked = enumOptionsIsSelected(option.value, checkboxesValues);
       const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
       const checkbox = /* @__PURE__ */ jsx19(
         Checkbox2,
         {
+          ...muiSlotProps?.checkbox,
           id: optionId(id, index),
           name: htmlName || id,
           checked,
@@ -862,7 +1017,15 @@ function CheckboxesWidget({
           "aria-describedby": ariaDescribedByIds3(id)
         }
       );
-      return /* @__PURE__ */ jsx19(FormControlLabel2, { control: checkbox, label: option.label }, index);
+      return /* @__PURE__ */ createElement(
+        FormControlLabel2,
+        {
+          ...muiSlotProps?.formControlLabel,
+          control: checkbox,
+          key: index,
+          label: option.label
+        }
+      );
     }) })
   ] });
 }
@@ -874,32 +1037,25 @@ import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import {
   ariaDescribedByIds as ariaDescribedByIds4,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex as enumOptionsValueForIndex2,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder as enumOptionValueDecoder2,
+  enumOptionValueEncoder,
+  getOptionValueFormat as getOptionValueFormat2,
   labelValue as labelValue4,
   optionId as optionId2
 } from "@rjsf/utils";
 import { Fragment as Fragment5, jsx as jsx20, jsxs as jsxs12 } from "react/jsx-runtime";
-function RadioWidget({
-  id,
-  htmlName,
-  options,
-  value,
-  required,
-  disabled,
-  readonly,
-  label,
-  hideLabel,
-  onChange,
-  onBlur,
-  onFocus
-}) {
+import { createElement as createElement2 } from "react";
+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(enumOptionsValueForIndex2(value2, enumOptions, emptyValue));
-  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex2(target && target.value, enumOptions, emptyValue));
+  const optionValueFormat = getOptionValueFormat2(options);
+  const _onChange = (_, value2) => onChange(enumOptionValueDecoder2(value2, enumOptions, optionValueFormat, emptyValue));
+  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
+  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder2(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const row = options ? options.inline : false;
-  const selectedIndex = enumOptionsIndexForValue(value, enumOptions) ?? null;
+  const selectValue = enumOptionSelectedValue(value, enumOptions, false, optionValueFormat, "");
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ jsxs12(Fragment5, { children: [
     labelValue4(
       /* @__PURE__ */ jsx20(FormLabel2, { required, htmlFor: id, children: label || void 0 }),
@@ -908,9 +1064,11 @@ function RadioWidget({
     /* @__PURE__ */ jsx20(
       RadioGroup,
       {
+        ...otherMuiProps,
+        ...muiSlotProps?.radioGroup,
         id,
         name: htmlName || id,
-        value: selectedIndex,
+        value: selectValue,
         row,
         onChange: _onChange,
         onBlur: _onBlur,
@@ -918,15 +1076,16 @@ function RadioWidget({
         "aria-describedby": ariaDescribedByIds4(id),
         children: Array.isArray(enumOptions) && enumOptions.map((option, index) => {
           const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
-          const radio = /* @__PURE__ */ jsx20(
+          const radio = /* @__PURE__ */ createElement2(
             FormControlLabel3,
             {
-              control: /* @__PURE__ */ jsx20(Radio, { name: htmlName || id, id: optionId2(id, index), color: "primary" }),
+              ...muiSlotProps?.formControlLabel,
+              control: /* @__PURE__ */ jsx20(Radio, { ...muiSlotProps?.radio, name: htmlName || id, id: optionId2(id, index), color: "primary" }),
               label: option.label,
-              value: String(index),
+              value: enumOptionValueEncoder(option.value, index, optionValueFormat),
+              key: index,
               disabled: disabled || itemDisabled || readonly
-            },
-            index
+            }
           );
           return radio;
         })
@@ -952,6 +1111,7 @@ function RangeWidget(props) {
   };
   const _onBlur = ({ target }) => onBlur(id, target && target.value);
   const _onFocus = ({ target }) => onFocus(id, target && target.value);
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps(options);
   return /* @__PURE__ */ jsxs13(Fragment6, { children: [
     labelValue5(
       /* @__PURE__ */ jsx21(FormLabel3, { required, htmlFor: id, children: label || void 0 }),
@@ -965,6 +1125,8 @@ function RangeWidget(props) {
         onBlur: _onBlur,
         onFocus: _onFocus,
         valueLabelDisplay: "auto",
+        ...otherMuiProps,
+        ...muiSlotProps?.slider,
         ...sliderProps,
         "aria-describedby": ariaDescribedByIds5(id)
       }
@@ -977,54 +1139,58 @@ import MenuItem from "@mui/material/MenuItem";
 import TextField3 from "@mui/material/TextField";
 import {
   ariaDescribedByIds as ariaDescribedByIds6,
-  enumOptionsIndexForValue as enumOptionsIndexForValue2,
-  enumOptionsValueForIndex as enumOptionsValueForIndex3,
+  enumOptionSelectedValue as enumOptionSelectedValue2,
+  enumOptionValueDecoder as enumOptionValueDecoder3,
+  enumOptionValueEncoder as enumOptionValueEncoder2,
+  getOptionValueFormat as getOptionValueFormat3,
   labelValue as labelValue6
 } from "@rjsf/utils";
 import { jsx as jsx22, jsxs as jsxs14 } from "react/jsx-runtime";
-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(enumOptionsValueForIndex3(value2, enumOptions, optEmptyVal));
-  const _onBlur = ({ target }) => onBlur(id, enumOptionsValueForIndex3(target && target.value, enumOptions, optEmptyVal));
-  const _onFocus = ({ target }) => onFocus(id, enumOptionsValueForIndex3(target && target.value, enumOptions, optEmptyVal));
-  const selectedIndexes = enumOptionsIndexForValue2(value, enumOptions, multiple);
+  const optionValueFormat = getOptionValueFormat3(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(enumOptionValueDecoder3(value2, enumOptions, optionValueFormat, optEmptyVal));
+  const _onBlur = ({ target }) => onBlur(id, enumOptionValueDecoder3(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const _onFocus = ({ target }) => onFocus(id, enumOptionValueDecoder3(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__ */ jsxs14(
     TextField3,
     {
       id,
       name: htmlName || id,
       label: labelValue6(label || void 0, hideLabel, void 0),
-      value: !isEmpty && typeof selectedIndexes !== "undefined" ? selectedIndexes : emptyValue,
+      value: enumOptionSelectedValue2(value, enumOptions, isMultiple, optionValueFormat, emptyValue),
       required,
       disabled: disabled || readonly,
       autoFocus: autofocus,
@@ -1034,22 +1200,25 @@ function SelectWidget({
       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": ariaDescribedByIds6(id),
       children: [
         showPlaceholderOption && /* @__PURE__ */ jsx22(MenuItem, { value: "", children: placeholder }),
         Array.isArray(enumOptions) && enumOptions.map(({ value: value2, label: label2 }, i) => {
           const disabled2 = Array.isArray(enumDisabled) && enumDisabled.indexOf(value2) !== -1;
-          return /* @__PURE__ */ jsx22(MenuItem, { value: String(i), disabled: disabled2, children: label2 }, i);
+          return /* @__PURE__ */ jsx22(MenuItem, { value: enumOptionValueEncoder2(value2, i, optionValueFormat), disabled: disabled2, children: label2 }, i);
         })
       ]
     }