@rjsf/mui 6.6.1 → 6.6.2

package/src/MultiSchemaFieldTemplate/MultiSchemaFieldTemplate.tsx

@@ -1,13 +1,15 @@
-import Box, { BoxProps } from '@mui/material/Box';
-import FormControl, { FormControlProps } from '@mui/material/FormControl';
-import {
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
+import type { FormControlProps } from '@mui/material/FormControl';
+import FormControl from '@mui/material/FormControl';
+import type {
   FormContextType,
   GenericObjectType,
   MultiSchemaFieldTemplateProps,
   RJSFSchema,
   StrictRJSFSchema,
-  getUiOptions,
 } from '@rjsf/utils';
+import { getUiOptions } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 

package/src/ObjectFieldTemplate/ObjectFieldTemplate.tsx

@@ -1,17 +1,13 @@
-import Grid, { GridProps } from '@mui/material/Grid';
-import {
+import type { GridProps } from '@mui/material/Grid';
+import Grid from '@mui/material/Grid';
+import type {
   FormContextType,
   GenericObjectType,
   ObjectFieldTemplateProps,
   RJSFSchema,
   StrictRJSFSchema,
-  canExpand,
-  descriptionId,
-  getTemplate,
-  getUiOptions,
-  titleId,
-  buttonId,
 } from '@rjsf/utils';
+import { canExpand, descriptionId, getTemplate, getUiOptions, titleId, buttonId } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 
@@ -102,7 +98,7 @@ export default function ObjectFieldTemplate<
         sx={computeSxProps<GridProps>({ mt: 1.25 }, objectGridContainer)}
       >
         {!showOptionalDataControlInTitle ? optionalDataControl : undefined}
-        {properties.map((element, index) =>
+        {properties.map((element) =>
           // Remove the <Grid> if the inner element is hidden as the <Grid>
           // itself would otherwise still take up space.
           element.hidden ? (
@@ -110,7 +106,7 @@ export default function ObjectFieldTemplate<
           ) : (
             <Grid
               size={{ xs: 12 }}
-              key={index}
+              key={element.name}
               {...objectGridItem}
               sx={computeSxProps<GridProps>({ mb: 1.25 }, objectGridItem)}
             >

package/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx

@@ -1,5 +1,5 @@
 import AddIcon from '@mui/icons-material/Add';
-import { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, OptionalDataControlsTemplateProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import IconButton, { RemoveButton } from '../IconButton';
 
@@ -29,7 +29,8 @@ export default function OptionalDataControlsTemplate<
         icon={<AddIcon fontSize='small' />}
       />
     );
-  } else if (onRemoveClick) {
+  }
+  if (onRemoveClick) {
     return (
       <RemoveButton
         id={id}

package/src/RadioWidget/RadioWidget.tsx

@@ -1,8 +1,12 @@
-import { FocusEvent } from 'react';
-import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import type { FocusEvent } from 'react';
+import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
 import FormLabel from '@mui/material/FormLabel';
-import Radio, { RadioProps } from '@mui/material/Radio';
-import RadioGroup, { RadioGroupProps } from '@mui/material/RadioGroup';
+import type { RadioProps } from '@mui/material/Radio';
+import Radio from '@mui/material/Radio';
+import type { RadioGroupProps } from '@mui/material/RadioGroup';
+import RadioGroup from '@mui/material/RadioGroup';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
@@ -11,11 +15,6 @@ import {
   getOptionValueFormat,
   labelValue,
   optionId,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
@@ -46,11 +45,11 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
   const { enumOptions, enumDisabled, emptyValue } = options;
   const optionValueFormat = getOptionValueFormat(options);
 
-  const _onChange = (_: any, value: any) =>
-    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, emptyValue));
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleChange = (_: any, enumValue: any) =>
+    onChange(enumOptionValueDecoder<S>(enumValue, enumOptions, optionValueFormat, emptyValue));
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const row = options ? options.inline : false;
@@ -73,14 +72,14 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
         name={htmlName || id}
         value={selectValue}
         row={row as boolean}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         aria-describedby={ariaDescribedByIds(id)}
       >
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index) => {
-            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
             const radio = (
               <FormControlLabel
                 {...muiSlotProps?.formControlLabel}
@@ -89,7 +88,7 @@ export default function RadioWidget<T = any, S extends StrictRJSFSchema = RJSFSc
                 }
                 label={option.label}
                 value={enumOptionValueEncoder(option.value, index, optionValueFormat)}
-                key={index}
+                key={String(option.value)}
                 disabled={disabled || itemDisabled || readonly}
               />
             );

package/src/RangeWidget/RangeWidget.tsx

@@ -1,16 +1,9 @@
-import { FocusEvent } from 'react';
+import type { FocusEvent } from 'react';
 import FormLabel from '@mui/material/FormLabel';
-import Slider, { SliderProps } from '@mui/material/Slider';
-import {
-  ariaDescribedByIds,
-  labelValue,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-  rangeSpec,
-} from '@rjsf/utils';
+import type { SliderProps } from '@mui/material/Slider';
+import Slider from '@mui/material/Slider';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, labelValue, rangeSpec } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 
@@ -35,11 +28,11 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
     props;
   const sliderProps = { value, label, id, name: id, ...rangeSpec<S>(schema) };
 
-  const _onChange = (_: any, value?: number | number[]) => {
-    onChange(value ?? options.emptyValue);
+  const handleChange = (_: any, newValue?: number | number[]) => {
+    onChange(newValue ?? options.emptyValue);
   };
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
 
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, RangeWidgetMuiProps>(options);
 
@@ -53,9 +46,9 @@ export default function RangeWidget<T = any, S extends StrictRJSFSchema = RJSFSc
       )}
       <Slider
         disabled={disabled || readonly}
-        onChange={_onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         valueLabelDisplay='auto'
         {...otherMuiProps}
         {...muiSlotProps?.slider}

package/src/SelectWidget/SelectWidget.tsx

@@ -1,8 +1,10 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel';
 import MenuItem from '@mui/material/MenuItem';
-import { SelectProps as MuiSelectProps } from '@mui/material/Select';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import type { SelectProps as MuiSelectProps } from '@mui/material/Select';
+import type { TextFieldProps } from '@mui/material/TextField';
+import TextField from '@mui/material/TextField';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionSelectedValue,
@@ -10,11 +12,6 @@ import {
   enumOptionValueEncoder,
   getOptionValueFormat,
   labelValue,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
 } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
@@ -72,11 +69,11 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
   const isEmpty =
     typeof value === 'undefined' || (isMultiple && value.length < 1) || (!isMultiple && value === emptyValue);
 
-  const _onChange = ({ target: { value } }: ChangeEvent<{ value: string }>) =>
-    onChange(enumOptionValueDecoder<S>(value, enumOptions, optionValueFormat, optEmptyVal));
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<{ value: string }>) =>
+    onChange(enumOptionValueDecoder<S>(newValue, enumOptions, optionValueFormat, optEmptyVal));
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, optEmptyVal));
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, SelectWidgetMuiProps>(options);
 
@@ -95,9 +92,9 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
       autoComplete={autocomplete}
       placeholder={placeholder}
       error={rawErrors.length > 0}
-      onChange={_onChange}
-      onBlur={_onBlur}
-      onFocus={_onFocus}
+      onChange={handleChange}
+      onBlur={handleBlur}
+      onFocus={handleFocus}
       {...({ ...otherMuiProps, ...textFieldRemainingProps } as TextFieldProps)}
       select // Apply this and the following props after the potential overrides defined in textFieldProps
       slotProps={{
@@ -115,11 +112,15 @@ export default function SelectWidget<T = any, S extends StrictRJSFSchema = RJSFS
     >
       {showPlaceholderOption && <MenuItem value=''>{placeholder}</MenuItem>}
       {Array.isArray(enumOptions) &&
-        enumOptions.map(({ value, label }, i: number) => {
-          const disabled: boolean = Array.isArray(enumDisabled) && enumDisabled.indexOf(value) !== -1;
+        enumOptions.map(({ value: enumValue, label: enumLabel }, i: number) => {
+          const isDisabled: boolean = Array.isArray(enumDisabled) && enumDisabled.includes(enumValue);
           return (
-            <MenuItem key={i} value={enumOptionValueEncoder(value, i, optionValueFormat)} disabled={disabled}>
-              {label}
+            <MenuItem
+              key={String(enumValue)}
+              value={enumOptionValueEncoder(enumValue, i, optionValueFormat)}
+              disabled={isDisabled}
+            >
+              {enumLabel}
             </MenuItem>
           );
         })}

package/src/SubmitButton/SubmitButton.tsx

@@ -1,14 +1,9 @@
-import Box, { BoxProps } from '@mui/material/Box';
-import Button, { ButtonProps } from '@mui/material/Button';
-import {
-  getSubmitButtonOptions,
-  GenericObjectType,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  SubmitButtonProps,
-  getUiOptions,
-} from '@rjsf/utils';
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
+import type { ButtonProps } from '@mui/material/Button';
+import Button from '@mui/material/Button';
+import type { GenericObjectType, FormContextType, RJSFSchema, StrictRJSFSchema, SubmitButtonProps } from '@rjsf/utils';
+import { getSubmitButtonOptions, getUiOptions } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 

package/src/Templates/Templates.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, TemplatesType } from '@rjsf/utils';
 
 import AddButton from '../AddButton';
 import ArrayFieldItemTemplate from '../ArrayFieldItemTemplate';

package/src/TextareaWidget/TextareaWidget.tsx

@@ -1,4 +1,5 @@
-import { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps, getTemplate } from '@rjsf/utils';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { getTemplate } from '@rjsf/utils';
 
 /** The `TextareaWidget` is a widget for rendering input fields as textarea.
  *

package/src/Theme/Theme.tsx

@@ -1,5 +1,5 @@
-import { ThemeProps } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ThemeProps } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTemplates } from '../Templates';
 import { generateWidgets } from '../Widgets';

package/src/TitleField/TitleField.tsx

@@ -1,15 +1,13 @@
-import Box, { BoxProps } from '@mui/material/Box';
-import Divider, { DividerProps } from '@mui/material/Divider';
-import Grid, { GridProps } from '@mui/material/Grid';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import {
-  FormContextType,
-  GenericObjectType,
-  TitleFieldProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  getUiOptions,
-} from '@rjsf/utils';
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
+import type { DividerProps } from '@mui/material/Divider';
+import Divider from '@mui/material/Divider';
+import type { GridProps } from '@mui/material/Grid';
+import Grid from '@mui/material/Grid';
+import type { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
+import type { FormContextType, GenericObjectType, TitleFieldProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getUiOptions } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 
@@ -60,7 +58,7 @@ export default function TitleField<T = any, S extends StrictRJSFSchema = RJSFSch
   );
   if (optionalDataControl) {
     heading = (
-      <Grid container={true} spacing={0} {...titleGridContainer}>
+      <Grid container spacing={0} {...titleGridContainer}>
         <Grid size='grow' {...titleGridItem}>
           {heading}
         </Grid>

package/src/Widgets/Widgets.ts

@@ -1,4 +1,4 @@
-import { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { FormContextType, RegistryWidgetsType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import CheckboxesWidget from '../CheckboxesWidget/CheckboxesWidget';
 import CheckboxWidget from '../CheckboxWidget/CheckboxWidget';

package/src/WrapIfAdditionalTemplate/WrapIfAdditionalTemplate.tsx

@@ -1,17 +1,15 @@
-import { CSSProperties } from 'react';
-import Grid, { GridProps } from '@mui/material/Grid';
+import type { CSSProperties } from 'react';
+import type { GridProps } from '@mui/material/Grid';
+import Grid from '@mui/material/Grid';
 import TextField from '@mui/material/TextField';
-import {
-  ADDITIONAL_PROPERTY_FLAG,
+import type {
   GenericObjectType,
-  buttonId,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
-  TranslatableString,
   WrapIfAdditionalTemplateProps,
-  getUiOptions,
 } from '@rjsf/utils';
+import { ADDITIONAL_PROPERTY_FLAG, buttonId, TranslatableString, getUiOptions } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 /** Properties available for the `rjsfSlotProps` target of the WrapIfAdditionalTemplate. */
@@ -92,7 +90,7 @@ export default function WrapIfAdditionalTemplate<
       <Grid size={5.5} {...wrapKeyGridItem}>
         <TextField
           key={label}
-          fullWidth={true}
+          fullWidth
           required={required}
           label={displayLabel ? keyLabel : undefined}
           defaultValue={label}

package/src/util.ts

@@ -1,5 +1,5 @@
-import { BoxProps, FormHelperTextProps, GridProps, PaperProps, SxProps, TypographyProps } from '@mui/material';
-import { FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType, GenericObjectType } from '@rjsf/utils';
+import type { BoxProps, FormHelperTextProps, GridProps, PaperProps, SxProps, TypographyProps } from '@mui/material';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema, UIOptionsType, GenericObjectType } from '@rjsf/utils';
 
 /**
  * Extract props meant for MUI components from the `options` field of the `uiSchema`.
@@ -22,9 +22,9 @@ export function getMuiProps<
   if (propsToFilter) {
     return Object.keys(muiProps)
       .filter((key) => propsToFilter.includes(key))
-      .reduce((obj, key) => {
-        obj[key as keyof P] = muiProps[key as keyof P];
-        return obj;
+      .reduce((acc, key) => {
+        acc[key as keyof P] = muiProps[key as keyof P];
+        return acc;
       }, {} as P);
   }
   return muiProps;