@rjsf/mui 6.6.0 → 6.6.2

package/lib/util.d.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`.
  * @param {UIOptionsType} options - The options from the uiSchema

package/lib/util.js

@@ -14,9 +14,9 @@ export function getMuiProps(options, propsToFilter, rjsfSlotPropsOnly) {
     if (propsToFilter) {
         return Object.keys(muiProps)
             .filter((key) => propsToFilter.includes(key))
-            .reduce((obj, key) => {
-            obj[key] = muiProps[key];
-            return obj;
+            .reduce((acc, key) => {
+            acc[key] = muiProps[key];
+            return acc;
         }, {});
     }
     return muiProps;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rjsf/mui",
-  "version": "6.6.0",
+  "version": "6.6.2",
   "main": "./dist/index.cjs",
   "module": "./lib/index.js",
   "types": "./lib/index.d.ts",
@@ -49,7 +49,7 @@
     "lint": "oxlint src test",
     "precommit": "lint-staged",
     "test": "vitest run",
-    "test:update": "vitest run --update-snapshots"
+    "test:update": "vitest run --update"
   },
   "lint-staged": {
     "{src,test}/**/*.{ts,tsx}": [
@@ -65,8 +65,8 @@
     "@emotion/styled": "^11.6.0",
     "@mui/icons-material": "^7.0.0 || ^9.0.0",
     "@mui/material": "^7.0.0 || ^9.0.0",
-    "@rjsf/core": "^6.5.x",
-    "@rjsf/utils": "^6.5.x",
+    "@rjsf/core": "^6.6.x",
+    "@rjsf/utils": "^6.6.x",
     "react": ">=18"
   },
   "devDependencies": {
@@ -75,10 +75,10 @@
     "@emotion/styled": "^11.14.1",
     "@mui/icons-material": "^9.0.1",
     "@mui/material": "^9.0.1",
-    "@rjsf/core": "6.6.0",
-    "@rjsf/snapshot-tests": "6.6.0",
-    "@rjsf/utils": "6.6.0",
-    "@rjsf/validator-ajv8": "6.6.0"
+    "@rjsf/core": "6.6.2",
+    "@rjsf/snapshot-tests": "6.6.2",
+    "@rjsf/utils": "6.6.2",
+    "@rjsf/validator-ajv8": "6.6.2"
   },
   "publishConfig": {
     "access": "public"

package/src/AddButton/AddButton.tsx

@@ -1,13 +1,8 @@
 import AddIcon from '@mui/icons-material/Add';
-import IconButton, { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';
-import {
-  FormContextType,
-  getUiOptions,
-  IconButtonProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-} from '@rjsf/utils';
+import type { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';
+import IconButton from '@mui/material/IconButton';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getUiOptions, TranslatableString } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 

package/src/ArrayFieldItemTemplate/ArrayFieldItemTemplate.tsx

@@ -1,16 +1,18 @@
-import { CSSProperties } from 'react';
-import Box, { BoxProps } from '@mui/material/Box';
-import Grid, { GridProps } from '@mui/material/Grid';
-import Paper, { PaperProps } from '@mui/material/Paper';
-import {
+import type { CSSProperties } from 'react';
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
+import type { GridProps } from '@mui/material/Grid';
+import Grid from '@mui/material/Grid';
+import type { PaperProps } from '@mui/material/Paper';
+import Paper from '@mui/material/Paper';
+import type {
   ArrayFieldItemTemplateProps,
   FormContextType,
-  getUiOptions,
-  getTemplate,
   RJSFSchema,
   StrictRJSFSchema,
   GenericObjectType,
 } from '@rjsf/utils';
+import { getUiOptions, getTemplate } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 

package/src/ArrayFieldTemplate/ArrayFieldTemplate.tsx

@@ -1,16 +1,17 @@
-import Box, { BoxProps } from '@mui/material/Box';
-import Grid, { GridProps } from '@mui/material/Grid';
-import Paper, { PaperProps } from '@mui/material/Paper';
-import {
-  getTemplate,
-  getUiOptions,
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
+import type { GridProps } from '@mui/material/Grid';
+import Grid from '@mui/material/Grid';
+import type { PaperProps } from '@mui/material/Paper';
+import Paper from '@mui/material/Paper';
+import type {
   ArrayFieldTemplateProps,
   FormContextType,
   RJSFSchema,
   StrictRJSFSchema,
-  buttonId,
   GenericObjectType,
 } from '@rjsf/utils';
+import { getTemplate, getUiOptions, buttonId } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 

package/src/BaseInputTemplate/BaseInputTemplate.tsx

@@ -1,20 +1,19 @@
-import { ChangeEvent, FocusEvent, MouseEvent, useCallback } from 'react';
-import { InputProps as MuiInputProps } from '@mui/material/Input';
+import type { ChangeEvent, FocusEvent, MouseEvent } from 'react';
+import { useCallback } from 'react';
+import type { InputProps as MuiInputProps } from '@mui/material/Input';
 import InputAdornment from '@mui/material/InputAdornment';
-import { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel';
-import TextField, { TextFieldProps } from '@mui/material/TextField';
+import type { InputLabelProps as MuiInputLabelProps } from '@mui/material/InputLabel';
+import type { TextFieldProps } from '@mui/material/TextField';
+import TextField from '@mui/material/TextField';
 import { SchemaExamples } from '@rjsf/core';
-import {
-  ariaDescribedByIds,
+import type {
   BaseInputTemplateProps,
-  examplesId,
-  getInputProps,
-  labelValue,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
 } from '@rjsf/utils';
+import { ariaDescribedByIds, examplesId, getInputProps, labelValue } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 
@@ -91,14 +90,14 @@ export default function BaseInputTemplate<
     accept,
     ...(schema.examples ? { list: examplesId(id) } : undefined),
   };
-  const _onChange = ({ target: { value } }: ChangeEvent<HTMLInputElement>) =>
-    onChange(value === '' ? options.emptyValue : value);
-  const _onBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
-  const _onFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
+  const handleChange = ({ target: { value: newValue } }: ChangeEvent<HTMLInputElement>) =>
+    onChange(newValue === '' ? options.emptyValue : newValue);
+  const handleBlur = ({ target }: FocusEvent<HTMLInputElement>) => onBlur(id, target && target.value);
+  const handleFocus = ({ target }: FocusEvent<HTMLInputElement>) => onFocus(id, target && target.value);
   const DisplayInputLabelProps = TYPES_THAT_SHRINK_LABEL.includes(type)
     ? { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps, shrink: true }
     : { ...slotProps?.inputLabel, ...muiSlotProps?.inputLabel, ...InputLabelProps };
-  const _onClear = useCallback(
+  const handleClear = useCallback(
     (e: MouseEvent) => {
       e.preventDefault();
       e.stopPropagation();
@@ -110,7 +109,7 @@ export default function BaseInputTemplate<
   if (options.allowClearTextInputs && value && !readonly && !disabled) {
     const clearAdornment = (
       <InputAdornment position='end'>
-        <ClearButton registry={registry} onClick={_onClear} />
+        <ClearButton registry={registry} onClick={handleClear} />
       </InputAdornment>
     );
     inputProps.endAdornment = !inputProps.endAdornment ? (
@@ -143,9 +142,9 @@ export default function BaseInputTemplate<
         {...rest}
         value={value || value === 0 ? value : ''}
         error={rawErrors.length > 0}
-        onChange={onChangeOverride || _onChange}
-        onBlur={_onBlur}
-        onFocus={_onFocus}
+        onChange={onChangeOverride || handleChange}
+        onBlur={handleBlur}
+        onFocus={handleFocus}
         {...({ ...otherMuiProps, ...textFieldProps } as TextFieldProps)}
         aria-describedby={ariaDescribedByIds(id, !!schema.examples)}
       />

package/src/CheckboxWidget/CheckboxWidget.tsx

@@ -1,17 +1,9 @@
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
-import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel';
-import {
-  ariaDescribedByIds,
-  descriptionId,
-  getTemplate,
-  labelValue,
-  schemaRequiresTrueValue,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  WidgetProps,
-} from '@rjsf/utils';
+import type { CheckboxProps } from '@mui/material/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
+import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import type { FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema, WidgetProps } from '@rjsf/utils';
+import { ariaDescribedByIds, descriptionId, getTemplate, labelValue, schemaRequiresTrueValue } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 
@@ -63,9 +55,9 @@ export default function CheckboxWidget<
   // "const" or "enum" keywords
   const required = schemaRequiresTrueValue<S>(schema);
 
-  const _onChange = (_: any, checked: boolean) => onChange(checked);
-  const _onBlur: React.FocusEventHandler<HTMLButtonElement> = () => onBlur(id, value);
-  const _onFocus: React.FocusEventHandler<HTMLButtonElement> = () => onFocus(id, value);
+  const handleChange = (_: any, checked: boolean) => onChange(checked);
+  const handleBlur: React.FocusEventHandler<HTMLButtonElement> = () => onBlur(id, value);
+  const handleFocus: React.FocusEventHandler<HTMLButtonElement> = () => onFocus(id, value);
   const description = options.description ?? schema.description;
 
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, CheckboxWidgetMuiProps>(options);
@@ -92,9 +84,9 @@ export default function CheckboxWidget<
             required={required}
             disabled={disabled || readonly}
             autoFocus={autofocus}
-            onChange={_onChange}
-            onBlur={_onBlur}
-            onFocus={_onFocus}
+            onChange={handleChange}
+            onBlur={handleBlur}
+            onFocus={handleFocus}
             aria-describedby={ariaDescribedByIds(id)}
             {...muiSlotProps?.checkbox}
           />

package/src/CheckboxesWidget/CheckboxesWidget.tsx

@@ -1,8 +1,12 @@
-import { ChangeEvent, FocusEvent } from 'react';
-import Checkbox, { CheckboxProps } from '@mui/material/Checkbox';
-import FormControlLabel, { FormControlLabelProps } from '@mui/material/FormControlLabel';
-import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
+import type { ChangeEvent, FocusEvent } from 'react';
+import type { CheckboxProps } from '@mui/material/Checkbox';
+import Checkbox from '@mui/material/Checkbox';
+import type { FormControlLabelProps } from '@mui/material/FormControlLabel';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import type { FormGroupProps } from '@mui/material/FormGroup';
+import FormGroup from '@mui/material/FormGroup';
 import FormLabel from '@mui/material/FormLabel';
+import type { FormContextType, GenericObjectType, WidgetProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 import {
   ariaDescribedByIds,
   enumOptionValueDecoder,
@@ -12,11 +16,6 @@ import {
   getOptionValueFormat,
   labelValue,
   optionId,
-  FormContextType,
-  GenericObjectType,
-  WidgetProps,
-  RJSFSchema,
-  StrictRJSFSchema,
 } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
@@ -63,7 +62,7 @@ export default function CheckboxesWidget<
   const optionValueFormat = getOptionValueFormat(options);
   const checkboxesValues = Array.isArray(value) ? value : [value];
 
-  const _onChange =
+  const handleChange =
     (index: number) =>
     ({ target: { checked } }: ChangeEvent<HTMLInputElement>) => {
       if (checked) {
@@ -73,9 +72,9 @@ export default function CheckboxesWidget<
       }
     };
 
-  const _onBlur = ({ target }: FocusEvent<HTMLButtonElement>) =>
+  const handleBlur = ({ target }: FocusEvent<HTMLButtonElement>) =>
     onBlur(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
-  const _onFocus = ({ target }: FocusEvent<HTMLButtonElement>) =>
+  const handleFocus = ({ target }: FocusEvent<HTMLButtonElement>) =>
     onFocus(id, enumOptionValueDecoder<S>(target && target.value, enumOptions, optionValueFormat, emptyValue));
 
   const { rjsfSlotProps: muiSlotProps, ...otherMuiProps } = getMuiProps<T, S, F, CheckboxesWidgetMuiProps>(options);
@@ -92,7 +91,7 @@ export default function CheckboxesWidget<
         {Array.isArray(enumOptions) &&
           enumOptions.map((option, index: number) => {
             const checked = enumOptionsIsSelected<S>(option.value, checkboxesValues);
-            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
+            const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.includes(option.value);
             const checkbox = (
               <Checkbox
                 {...muiSlotProps?.checkbox}
@@ -101,9 +100,9 @@ export default function CheckboxesWidget<
                 checked={checked}
                 disabled={disabled || itemDisabled || readonly}
                 autoFocus={autofocus && index === 0}
-                onChange={_onChange(index)}
-                onBlur={_onBlur}
-                onFocus={_onFocus}
+                onChange={handleChange(index)}
+                onBlur={handleBlur}
+                onFocus={handleFocus}
                 aria-describedby={ariaDescribedByIds(id)}
               />
             );
@@ -111,7 +110,7 @@ export default function CheckboxesWidget<
               <FormControlLabel
                 {...muiSlotProps?.formControlLabel}
                 control={checkbox}
-                key={index}
+                key={String(option.value)}
                 label={option.label}
               />
             );

package/src/DescriptionField/DescriptionField.tsx

@@ -1,13 +1,14 @@
-import Typography, { TypographyProps } from '@mui/material/Typography';
+import type { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
 import { RichDescription } from '@rjsf/core';
-import {
+import type {
   DescriptionFieldProps,
   FormContextType,
   GenericObjectType,
   RJSFSchema,
   StrictRJSFSchema,
-  getUiOptions,
 } from '@rjsf/utils';
+import { getUiOptions } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 

package/src/ErrorList/ErrorList.tsx

@@ -1,20 +1,20 @@
 import ErrorIcon from '@mui/icons-material/Error';
-import Box, { BoxProps } from '@mui/material/Box';
-import List, { ListProps } from '@mui/material/List';
-import ListItem, { ListItemProps } from '@mui/material/ListItem';
-import ListItemIcon, { ListItemIconProps } from '@mui/material/ListItemIcon';
-import ListItemText, { ListItemTextProps } from '@mui/material/ListItemText';
-import Paper, { PaperProps } from '@mui/material/Paper';
-import Typography, { TypographyProps } from '@mui/material/Typography';
-import {
-  ErrorListProps,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  getUiOptions,
-} from '@rjsf/utils';
+import type { BoxProps } from '@mui/material/Box';
+import Box from '@mui/material/Box';
+import type { ListProps } from '@mui/material/List';
+import List from '@mui/material/List';
+import type { ListItemProps } from '@mui/material/ListItem';
+import ListItem from '@mui/material/ListItem';
+import type { ListItemIconProps } from '@mui/material/ListItemIcon';
+import ListItemIcon from '@mui/material/ListItemIcon';
+import type { ListItemTextProps } from '@mui/material/ListItemText';
+import ListItemText from '@mui/material/ListItemText';
+import type { PaperProps } from '@mui/material/Paper';
+import Paper from '@mui/material/Paper';
+import type { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
+import type { ErrorListProps, FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString, getUiOptions } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 
@@ -69,17 +69,16 @@ export default function ErrorList<T = any, S extends StrictRJSFSchema = RJSFSche
         <Typography variant='h6' {...errorTypography}>
           {translateString(TranslatableString.ErrorsLabel)}
         </Typography>
-        <List dense={true} {...errorList}>
-          {errors.map((error, i: number) => {
-            return (
-              <ListItem key={i} {...errorListItem}>
-                <ListItemIcon {...errorListItemIcon}>
-                  <ErrorIcon color='error' />
-                </ListItemIcon>
-                <ListItemText primary={error.stack} {...errorListItemText} />
-              </ListItem>
-            );
-          })}
+        <List dense {...errorList}>
+          {errors.map((error, i: number) => (
+            // oxlint-disable-next-line react/no-array-index-key
+            <ListItem key={i} {...errorListItem}>
+              <ListItemIcon {...errorListItemIcon}>
+                <ErrorIcon color='error' />
+              </ListItemIcon>
+              <ListItemText primary={error.stack} {...errorListItemText} />
+            </ListItem>
+          ))}
         </List>
       </Box>
     </Paper>

package/src/FieldErrorTemplate/FieldErrorTemplate.tsx

@@ -1,15 +1,11 @@
-import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText';
-import List, { ListProps } from '@mui/material/List';
-import ListItem, { ListItemProps } from '@mui/material/ListItem';
-import {
-  errorId,
-  FieldErrorProps,
-  FormContextType,
-  GenericObjectType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  getUiOptions,
-} from '@rjsf/utils';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText';
+import FormHelperText from '@mui/material/FormHelperText';
+import type { ListProps } from '@mui/material/List';
+import List from '@mui/material/List';
+import type { ListItemProps } from '@mui/material/ListItem';
+import ListItem from '@mui/material/ListItem';
+import type { FieldErrorProps, FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { errorId, getUiOptions } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 
@@ -46,16 +42,15 @@ export default function FieldErrorTemplate<
   const { rjsfSlotProps: muiSlotProps } = muiProps;
 
   return (
-    <List id={id} dense={true} disablePadding={true} {...muiSlotProps?.fieldErrorList}>
-      {errors.map((error, i: number) => {
-        return (
-          <ListItem key={i} disableGutters={true} {...muiSlotProps?.fieldErrorListItem}>
-            <FormHelperText component='div' id={`${id}-${i}`} {...muiSlotProps?.fieldErrorFormHelperText}>
-              {error}
-            </FormHelperText>
-          </ListItem>
-        );
-      })}
+    <List id={id} dense disablePadding {...muiSlotProps?.fieldErrorList}>
+      {errors.map((error, i: number) => (
+        // oxlint-disable-next-line react/no-array-index-key
+        <ListItem key={i} disableGutters {...muiSlotProps?.fieldErrorListItem}>
+          <FormHelperText component='div' id={`${id}-${i}`} {...muiSlotProps?.fieldErrorFormHelperText}>
+            {error}
+          </FormHelperText>
+        </ListItem>
+      ))}
     </List>
   );
 }

package/src/FieldHelpTemplate/FieldHelpTemplate.tsx

@@ -1,14 +1,8 @@
-import FormHelperText, { FormHelperTextProps } from '@mui/material/FormHelperText';
+import type { FormHelperTextProps } from '@mui/material/FormHelperText';
+import FormHelperText from '@mui/material/FormHelperText';
 import { RichHelp } from '@rjsf/core';
-import {
-  helpId,
-  FieldHelpProps,
-  FormContextType,
-  RJSFSchema,
-  StrictRJSFSchema,
-  getUiOptions,
-  GenericObjectType,
-} from '@rjsf/utils';
+import type { FieldHelpProps, FormContextType, RJSFSchema, StrictRJSFSchema, GenericObjectType } from '@rjsf/utils';
+import { helpId, getUiOptions } from '@rjsf/utils';
 
 import { computeSxProps, getMuiProps } from '../util';
 

package/src/FieldTemplate/FieldTemplate.tsx

@@ -1,14 +1,9 @@
-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 type { FormControlProps } from '@mui/material/FormControl';
+import FormControl from '@mui/material/FormControl';
+import type { TypographyProps } from '@mui/material/Typography';
+import Typography from '@mui/material/Typography';
+import type { FieldTemplateProps, FormContextType, GenericObjectType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { getTemplate, getUiOptions } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 
@@ -90,8 +85,8 @@ export default function FieldTemplate<
       registry={registry}
     >
       <FormControl
-        fullWidth={true}
-        error={rawErrors.length ? true : false}
+        fullWidth
+        error={!!rawErrors.length}
         required={required}
         {...muiSlotProps?.fieldFormControl}
         sx={otherMuiProps.sx}

package/src/GridTemplate/GridTemplate.tsx

@@ -1,5 +1,5 @@
 import Grid from '@mui/material/Grid';
-import { GridTemplateProps } from '@rjsf/utils';
+import type { GridTemplateProps } from '@rjsf/utils';
 
 /** Renders a `GridTemplate` for mui, which is expecting the column sizing information coming in via the
  * extra props provided by the caller, which are spread directly on the `Grid`.

package/src/IconButton/IconButton.tsx

@@ -1,25 +1,19 @@
+import { memo } from 'react';
 import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
 import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
 import ClearIcon from '@mui/icons-material/Clear';
 import CopyIcon from '@mui/icons-material/ContentCopy';
 import RemoveIcon from '@mui/icons-material/Remove';
-import IconButton, { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';
-import {
-  FormContextType,
-  IconButtonProps,
-  RJSFSchema,
-  StrictRJSFSchema,
-  TranslatableString,
-  getUiOptions,
-} from '@rjsf/utils';
+import type { IconButtonProps as MuiIconButtonProps } from '@mui/material/IconButton';
+import IconButton from '@mui/material/IconButton';
+import type { FormContextType, IconButtonProps, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import { TranslatableString, getUiOptions } from '@rjsf/utils';
 
 import { getMuiProps } from '../util';
 
-export default function MuiIconButton<
-  T = any,
-  S extends StrictRJSFSchema = RJSFSchema,
-  F extends FormContextType = any,
->(props: IconButtonProps<T, S, F>) {
+function MuiIconButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+  props: IconButtonProps<T, S, F>,
+) {
   const { icon, color, uiSchema, registry, ...otherProps } = props;
 
   const uiOptions = getUiOptions<T, S, F>(uiSchema);
@@ -38,8 +32,10 @@ export default function MuiIconButton<
     </IconButton>
   );
 }
+const MuiIconButton = memo(MuiIconButtonFn) as typeof MuiIconButtonFn;
+export default MuiIconButton;
 
-export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function CopyButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: IconButtonProps<T, S, F>,
 ) {
   const {
@@ -53,8 +49,9 @@ export function CopyButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F e
     />
   );
 }
+export const CopyButton = memo(CopyButtonFn) as typeof CopyButtonFn;
 
-export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveDownButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: IconButtonProps<T, S, F>,
 ) {
   const {
@@ -68,8 +65,9 @@ export function MoveDownButton<T = any, S extends StrictRJSFSchema = RJSFSchema,
     />
   );
 }
+export const MoveDownButton = memo(MoveDownButtonFn) as typeof MoveDownButtonFn;
 
-export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function MoveUpButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: IconButtonProps<T, S, F>,
 ) {
   const {
@@ -83,8 +81,9 @@ export function MoveUpButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const MoveUpButton = memo(MoveUpButtonFn) as typeof MoveUpButtonFn;
 
-export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function RemoveButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: IconButtonProps<T, S, F>,
 ) {
   const { iconType, ...otherProps } = props;
@@ -100,8 +99,9 @@ export function RemoveButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const RemoveButton = memo(RemoveButtonFn) as typeof RemoveButtonFn;
 
-export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
+function ClearButtonFn<T = any, S extends StrictRJSFSchema = RJSFSchema, F extends FormContextType = any>(
   props: IconButtonProps<T, S, F>,
 ) {
   const { iconType, ...otherProps } = props;
@@ -116,3 +116,4 @@ export function ClearButton<T = any, S extends StrictRJSFSchema = RJSFSchema, F
     />
   );
 }
+export const ClearButton = memo(ClearButtonFn) as typeof ClearButtonFn;

package/src/MuiForm/MuiForm.tsx

@@ -1,6 +1,7 @@
-import { ComponentType } from 'react';
-import { withTheme, FormProps } from '@rjsf/core';
-import { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
+import type { ComponentType } from 'react';
+import type { FormProps } from '@rjsf/core';
+import { withTheme } from '@rjsf/core';
+import type { FormContextType, RJSFSchema, StrictRJSFSchema } from '@rjsf/utils';
 
 import { generateTheme } from '../Theme';