@rjsf/mui 6.4.1 → 6.5.0

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,7 +1,29 @@
-import ListItem from '@mui/material/ListItem';
-import FormHelperText from '@mui/material/FormHelperText';
-import List from '@mui/material/List';
-import { errorId, FieldErrorProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import ListItem, { ListItemProps } from '@mui/material/ListItem';
+import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText';
+import List, { ListProps } from '@mui/material/List';
+import {
+  errorId,
+  FieldErrorProps,
+  FormContextType,
+  GenericObjectType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getUiOptions,
+} from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the FieldErrorTemplate. */
+export interface FieldErrorTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the FieldErrorTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the `List` container holding the errors. */
+    fieldErrorList?: ListProps;
+    /** Props applied to each `ListItem` representing an error. */
+    fieldErrorListItem?: ListItemProps;
+    /** Props applied to the `FormHelperText` displaying the actual error message. */
+    fieldErrorFormHelperText?: FormHelperTextProps;
+  };
+}
 
 /** The `FieldErrorTemplate` component renders the errors local to the particular field
  *
@@ -12,18 +34,22 @@ export default function FieldErrorTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: FieldErrorProps<T, S, F>) {
-  const { errors = [], fieldPathId } = props;
+  const { errors = [], fieldPathId, uiSchema } = props;
   if (errors.length === 0) {
     return null;
   }
   const id = errorId(fieldPathId);
 
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const muiProps = getMuiProps<T, S, F, FieldErrorTemplateMuiProps>(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
+
   return (
-    <List id={id} dense={true} disablePadding={true}>
+    <List id={id} dense={true} disablePadding={true} {...muiSlotProps?.fieldErrorList}>
       {errors.map((error, i: number) => {
         return (
-          <ListItem key={i} disableGutters={true}>
-            <FormHelperText component='div' id={`${id}-${i}`}>
+          <ListItem key={i} disableGutters={true} {...muiSlotProps?.fieldErrorListItem}>
+            <FormHelperText component='div' id={`${id}-${i}`} {...muiSlotProps?.fieldErrorFormHelperText}>
               {error}
             </FormHelperText>
           </ListItem>

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,6 +1,24 @@
 import { RichHelp } from '@rjsf/core';
-import { helpId, FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-import FormHelperText from '@mui/material/FormHelperText';
+import {
+  helpId,
+  FieldHelpProps,
+  FormContextType,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getUiOptions,
+  GenericObjectType,
+} from '@rjsf/utils';
+import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the FieldHelpTemplate. */
+export interface FieldHelpTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the FieldHelpTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the `FormHelperText` used for help text. */
+    helpFormHelperText?: FormHelperTextProps;
+  };
+}
 
 /** The `FieldHelpTemplate` component renders any help desired for a field
  *
@@ -16,8 +34,17 @@ export default function FieldHelpTemplate<
     return null;
   }
 
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const muiProps = getMuiProps<T, S, F, FieldHelpTemplateMuiProps>(uiOptions);
+  const { rjsfSlotProps: muiSlotProps } = muiProps;
+
   return (
-    <FormHelperText component='div' id={helpId(fieldPathId)} style={{ marginTop: '5px' }}>
+    <FormHelperText
+      component='div'
+      id={helpId(fieldPathId)}
+      style={{ marginTop: '5px' }}
+      {...muiSlotProps?.helpFormHelperText}
+    >
       <RichHelp help={help} registry={registry} uiSchema={uiSchema} />
     </FormHelperText>
   );

package/src/FieldTemplate/FieldTemplate.tsx

@@ -1,13 +1,26 @@
-import FormControl from '@mui/material/FormControl';
-import Typography from '@mui/material/Typography';
+import FormControl, { FormControlProps } from '@mui/material/FormControl';
+import Typography, { TypographyProps } from '@mui/material/Typography';
 import {
   FieldTemplateProps,
   FormContextType,
+  GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
   getTemplate,
   getUiOptions,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the FieldTemplate. */
+export interface FieldTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the FieldTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the MUI `FormControl` wrapping the field. */
+    fieldFormControl?: FormControlProps;
+    /** Props applied to the MUI `Typography` element used for description. */
+    fieldTypography?: TypographyProps;
+  };
+}
 
 /** The `FieldTemplate` component is the template used by `SchemaField` to render any field. It renders the field
  * content, (label, description, children, errors and help) inside of a `WrapIfAdditional` component.
@@ -55,6 +68,8 @@ export default function FieldTemplate<
 
   const isCheckbox = uiOptions.widget === 'checkbox';
 
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, FieldTemplateMuiProps>(uiOptions);
+
   return (
     <WrapIfAdditionalTemplate
       classNames={classNames}
@@ -73,10 +88,17 @@ export default function FieldTemplate<
       uiSchema={uiSchema}
       registry={registry}
     >
-      <FormControl fullWidth={true} error={rawErrors.length ? true : false} required={required}>
+      <FormControl
+        fullWidth={true}
+        error={rawErrors.length ? true : false}
+        required={required}
+        {...muiSlotProps?.fieldFormControl}
+        sx={otherMuiProps.sx}
+        className={otherMuiProps.className}
+      >
         {children}
         {displayLabel && !isCheckbox && rawDescription ? (
-          <Typography variant='caption' color='textSecondary'>
+          <Typography variant='caption' color='textSecondary' {...muiSlotProps?.fieldTypography}>
             {description}
           </Typography>
         ) : null}

package/src/IconButton/IconButton.tsx

@@ -4,7 +4,15 @@ 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 { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema, TranslatableString } from '@rjsf/utils';
+import {
+  FormContextType,
+  IconButtonProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  TranslatableString,
+  getUiOptions,
+} from '@rjsf/utils';
+import { getMuiProps } from '../util';
 
 export default function MuiIconButton<
   T = any,
@@ -12,8 +20,19 @@ export default function MuiIconButton<
   F extends FormContextType = any,
 >(props: IconButtonProps<T, S, F>) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const muiProps = getMuiProps<T, S, F, MuiIconButtonProps>(uiOptions, [
+    'color',
+    'disableFocusRipple',
+    'disableRipple',
+    'edge',
+    'size',
+    'sx',
+  ]);
+
   return (
-    <IconButton {...otherProps} size='small' color={color as MuiIconButtonProps['color']}>
+    <IconButton {...muiProps} {...otherProps} size='small' color={color as MuiIconButtonProps['color']}>
       {icon}
     </IconButton>
   );

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -1,17 +1,39 @@
-import Box from '@mui/material/Box';
-import { FormContextType, MultiSchemaFieldTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
-import FormControl from '@mui/material/FormControl';
+import Box, { BoxProps } from '@mui/material/Box';
+import FormControl, { FormControlProps } from '@mui/material/FormControl';
+import {
+  FormContextType,
+  GenericObjectType,
+  MultiSchemaFieldTemplateProps,
+  RJSFSchema,
+  StrictRJSFSchema,
+  getUiOptions,
+} from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the MultiSchemaFieldTemplate. */
+export interface MultiSchemaFieldTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the MultiSchemaFieldTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the wrapper `Box` container. */
+    multiBox?: BoxProps;
+    /** Props applied to the MUI `FormControl` wrapping the selector. */
+    multiFormControl?: FormControlProps;
+  };
+}
 
 export default function MultiSchemaFieldTemplate<
   T = any,
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: MultiSchemaFieldTemplateProps<T, S, F>) {
-  const { optionSchemaField, selector } = props;
+  const { optionSchemaField, selector, uiSchema } = props;
+
+  const uiOptions = getUiOptions<T, S, F>(uiSchema);
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, MultiSchemaFieldTemplateMuiProps>(uiOptions);
 
   return (
-    <Box sx={{ mb: 2 }}>
-      <FormControl fullWidth sx={{ mb: 2 }}>
+    <Box sx={{ mb: 2 }} {...muiSlotProps?.multiBox}>
+      <FormControl fullWidth sx={{ mb: 2 }} {...muiSlotProps?.multiFormControl}>
         {selector}
       </FormControl>
       {optionSchemaField}

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,6 +1,7 @@
-import Grid from '@mui/material/Grid';
+import Grid, { GridProps } from '@mui/material/Grid';
 import {
   FormContextType,
+  GenericObjectType,
   ObjectFieldTemplateProps,
   RJSFSchema,
   StrictRJSFSchema,
@@ -11,6 +12,22 @@ import {
   titleId,
   buttonId,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the ObjectFieldTemplate. */
+export interface ObjectFieldTemplateMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the ObjectFieldTemplate. */
+  rjsfSlotProps?: {
+    /** Props applied to the outermost `Grid` container wrapping all object properties. */
+    objectGridContainer?: GridProps;
+    /** Props applied to the `Grid` item wrapping each individual object property. */
+    objectGridItem?: GridProps;
+    /** Props applied to the wrapper `Grid` container next to the Add Button (when expandable). */
+    objectAddButtonGridContainer?: GridProps;
+    /** Props applied to the `Grid` item containing the Add Button. */
+    objectAddButtonGridItem?: GridProps;
+  };
+}
 
 /** The `ObjectFieldTemplate` is the template to use to render all the inner properties of an object along with the
  * title and description if available. If the object is expandable, then an `AddButton` is also rendered after all
@@ -50,6 +67,9 @@ export default function ObjectFieldTemplate<
   const {
     ButtonTemplates: { AddButton },
   } = registry.templates;
+
+  const { rjsfSlotProps: muiSlotProps } = getMuiProps<T, S, F, ObjectFieldTemplateMuiProps>(uiOptions);
+
   return (
     <>
       {title && (
@@ -72,7 +92,7 @@ export default function ObjectFieldTemplate<
           registry={registry}
         />
       )}
-      <Grid container spacing={2} style={{ marginTop: '10px' }}>
+      <Grid container spacing={2} style={{ marginTop: '10px' }} {...muiSlotProps?.objectGridContainer}>
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
         {properties.map((element, index) =>
           // Remove the <Grid> if the inner element is hidden as the <Grid>
@@ -80,15 +100,15 @@ export default function ObjectFieldTemplate<
           element.hidden ? (
             element.content
           ) : (
-            <Grid size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }}>
+            <Grid size={{ xs: 12 }} key={index} style={{ marginBottom: '10px' }} {...muiSlotProps?.objectGridItem}>
               {element.content}
             </Grid>
           ),
         )}
       </Grid>
       {canExpand<T, S, F>(schema, uiSchema, formData) && (
-        <Grid container justifyContent='flex-end'>
-          <Grid>
+        <Grid container justifyContent='flex-end' {...muiSlotProps?.objectAddButtonGridContainer}>
+          <Grid {...muiSlotProps?.objectAddButtonGridItem}>
             <AddButton
               id={buttonId(fieldPathId, 'add')}
               className='rjsf-object-property-expand'

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -16,12 +16,13 @@ export default function OptionalDataControlsTemplate<
   S extends StrictRJSFSchema = RJSFSchema,
   F extends FormContextType = any,
 >(props: OptionalDataControlsTemplateProps<T, S, F>) {
-  const { id, registry, label, onAddClick, onRemoveClick } = props;
+  const { id, registry, label, onAddClick, onRemoveClick, uiSchema } = props;
   if (onAddClick) {
     return (
       <IconButton
         id={id}
         registry={registry}
+        uiSchema={uiSchema}
         className='rjsf-add-optional-data'
         onClick={onAddClick}
         title={label}
@@ -33,6 +34,7 @@ export default function OptionalDataControlsTemplate<
       <RemoveButton
         id={id}
         registry={registry}
+        uiSchema={uiSchema}
         className='rjsf-remove-optional-data'
         onClick={onRemoveClick}
         title={label}

package/src/RadioWidget/RadioWidget.tsx

@@ -1,49 +1,61 @@
 import { FocusEvent } from 'react';
-import FormControlLabel from '@mui/material/FormControlLabel';
+import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel';
 import FormLabel from '@mui/material/FormLabel';
-import Radio from '@mui/material/Radio';
-import RadioGroup from '@mui/material/RadioGroup';
+import Radio, { RadioProps } from '@mui/material/Radio';
+import RadioGroup, { RadioGroupProps } from '@mui/material/RadioGroup';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   labelValue,
   optionId,
   FormContextType,
+  GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the RadioWidget. */
+export interface RadioWidgetMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the RadioWidget. */
+  rjsfSlotProps?: {
+    /** Props applied to the `RadioGroup` component. */
+    radioGroup?: RadioGroupProps;
+    /** Props applied to the individual `Radio` components. */
+    radio?: RadioProps;
+    /** Props applied to the `FormControlLabel` components wrapping each radio button. */
+    formControlLabel?: FormControlLabelProps;
+  };
+}
 
 /** The `RadioWidget` is a widget for rendering a radio group.
  *  It is typically used with a string property constrained with enum options.
  *
  * @param props - The `WidgetProps` for this component
  */
-export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>({
-  id,
-  htmlName,
-  options,
-  value,
-  required,
-  disabled,
-  readonly,
-  label,
-  hideLabel,
-  onChange,
-  onBlur,
-  onFocus,
-}: WidgetProps<T, S, F>) {
+export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  const { id, htmlName, options, value, required, disabled, readonly, label, hideLabel, onChange, onBlur, onFocus } =
+    props;
   const { enumOptions, enumDisabled, emptyValue } = options;
+  const optionValueFormat = getOptionValueFormat(options);
 
-  const _onChange = (_: any, value: any) => onChange(enumOptionsValueForIndex<S>(value, enumOptions, emptyValue));
+  const _onChange = (_: any, value: any) =>
+    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, emptyValue));
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
-  const selectedIndex = enumOptionsIndexForValue<S>(value, enumOptions) ?? null;
+  const selectValue = enumOptionSelectedValue<S>(value, enumOptions, false, optionValueFormat, '');
+
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, RadioWidgetMuiProps>(options);
 
   return (
     <>
@@ -54,9 +66,11 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         hideLabel,
       )}
       <RadioGroup
+        {...otherMuiProps}
+        {...muiSlotProps?.radioGroup}
         id={id}
         name={htmlName || id}
-        value={selectedIndex}
+        value={selectValue}
         row={row as boolean}
         onChange={_onChange}
         onBlur={_onBlur}
@@ -68,9 +82,12 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
             const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
             const radio = (
               <FormControlLabel
-                control={<Radio name={htmlName || id} id={optionId(id, index)} color='primary' />}
+                {...muiSlotProps?.formControlLabel}
+                control={
+                  <Radio {...muiSlotProps?.radio} name={htmlName || id} id={optionId(id, index)} color='primary' />
+                }
                 label={option.label}
-                value={String(index)}
+                value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
                 key={index}
                 disabled={disabled || itemDisabled || readonly}
               />

package/src/RangeWidget/RangeWidget.tsx

@@ -1,15 +1,26 @@
 import { FocusEvent } from 'react';
 import FormLabel from '@mui/material/FormLabel';
-import Slider from '@mui/material/Slider';
+import Slider, { SliderProps } from '@mui/material/Slider';
 import {
   ariaDescribedByIds,
   labelValue,
   FormContextType,
+  GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
   rangeSpec,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the RangeWidget. */
+export interface RangeWidgetMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the RangeWidget. */
+  rjsfSlotProps?: {
+    /** Props applied to the MUI `Slider` component. */
+    slider?: SliderProps;
+  };
+}
 
 /** The `RangeWidget` component uses the `BaseInputTemplate` changing the type to `range` and wrapping the result
  * in a div, with the value along side it.
@@ -29,6 +40,8 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, RangeWidgetMuiProps>(options);
+
   return (
     <>
       {labelValue(
@@ -43,6 +56,8 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         onBlur={_onBlur}
         onFocus={_onFocus}
         valueLabelDisplay='auto'
+        {...otherMuiProps}
+        {...muiSlotProps?.slider}
         {...sliderProps}
         aria-describedby={ariaDescribedByIds(id)}
       />

package/src/SelectWidget/SelectWidget.tsx

@@ -1,74 +1,93 @@
 import { ChangeEvent, FocusEvent } from 'react';
 import MenuItem from '@mui/material/MenuItem';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
+import { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel';
+import { SelectProps as MuiSelectProps } from '@mui/material/Select';
 import {
   ariaDescribedByIds,
-  enumOptionsIndexForValue,
-  enumOptionsValueForIndex,
+  enumOptionSelectedValue,
+  enumOptionValueDecoder,
+  enumOptionValueEncoder,
+  getOptionValueFormat,
   labelValue,
   FormContextType,
+  GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
   WidgetProps,
 } from '@rjsf/utils';
+import { getMuiProps } from '../util';
+
+/** Properties available for the `rjsfSlotProps` target of the SelectWidget. */
+export interface SelectWidgetMuiProps extends GenericObjectType {
+  /** RJSF-specific slot props for targeting child elements of the SelectWidget. */
+  rjsfSlotProps?: {
+    /** Props applied to the `InputLabel` element. */
+    inputLabel?: MuiInputLabelProps;
+    /** Props applied to the `Select` element. */
+    select?: MuiSelectProps;
+  };
+}
 
 /** The `SelectWidget` is a widget for rendering dropdowns.
  *  It is typically used with string properties constrained with enum options.
  *
  * @param props - The `WidgetProps` for this component
  */
-export default function SelectWidget<
-  T = any,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any,
->({
-  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
-}: WidgetProps<T, S, F>) {
+export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: WidgetProps<T, S, F>,
+) {
+  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;
+  const optionValueFormat = getOptionValueFormat(options);
 
-  multiple = typeof multiple === 'undefined' ? false : !!multiple;
+  const isMultiple = typeof multiple === 'undefined' ? false : !!multiple;
 
-  const emptyValue = multiple ? [] : '';
-  const isEmpty = typeof value === 'undefined' || (multiple && value.length < 1) || (!multiple && value === emptyValue);
+  const emptyValue = isMultiple ? [] : '';
+  const isEmpty =
+    typeof value === 'undefined' || (isMultiple && value.length < 1) || (!isMultiple && value === emptyValue);
 
   const _onChange = ({ target: { value } }: ChangeEvent<{ value: string }>) =>
-    onChange(enumOptionsValueForIndex<S>(value, enumOptions, optEmptyVal));
+    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, optEmptyVal));
   const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onBlur(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
+    onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
   const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
-    onFocus(id, enumOptionsValueForIndex<S>(target && target.value, enumOptions, optEmptyVal));
-  const selectedIndexes = enumOptionsIndexForValue<S>(value, enumOptions, multiple);
+    onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
+  const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, SelectWidgetMuiProps>(options);
+
   const { InputLabelProps, SelectProps, autocomplete, ...textFieldRemainingProps } = textFieldProps;
-  const showPlaceholderOption = !multiple && schema.default === undefined;
+  const showPlaceholderOption = !isMultiple && schema.default === undefined;
 
   return (
     <TextField
       id={id}
       name={htmlName || id}
       label={labelValue(label || undefined, hideLabel, undefined)}
-      value={!isEmpty && typeof selectedIndexes !== 'undefined' ? selectedIndexes : emptyValue}
+      value={enumOptionSelectedValue<S>(value, enumOptions, isMultiple, optionValueFormat, emptyValue)}
       required={required}
       disabled={disabled || readonly}
       autoFocus={autofocus}
@@ -78,15 +97,18 @@ export default function SelectWidget<
       onChange={_onChange}
       onBlur={_onBlur}
       onFocus={_onFocus}
-      {...(textFieldRemainingProps as TextFieldProps)}
+      {...({ ...otherMuiProps, ...textFieldRemainingProps } as TextFieldProps)}
       select // Apply this and the following props after the potential overrides defined in textFieldProps
-      InputLabelProps={{
-        ...InputLabelProps,
-        shrink: !isEmpty,
-      }}
-      SelectProps={{
-        ...SelectProps,
-        multiple,
+      slotProps={{
+        ...muiSlotProps,
+        inputLabel: {
+          ...muiSlotProps?.inputLabel,
+          shrink: !isEmpty,
+        },
+        select: {
+          ...muiSlotProps?.select,
+          multiple,
+        },
       }}
       aria-describedby={ariaDescribedByIds(id)}
     >
@@ -95,7 +117,7 @@ export default function SelectWidget<
         enumOptions.map(({ value, label }, i: number) => {
           const disabled: boolean = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;
           return (
-            <MenuItem key={i} value={String(i)} disabled={disabled}>
+            <MenuItem key={i} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
               {label}
             </MenuItem>
           );