@mui/material 5.13.0 → 5.13.1

package/modern/AppBar/AppBar.js

@@ -1,6 +1,3 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["className", "color", "enableColorOnDark", "position"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -40,70 +37,87 @@ const AppBarRoot = styled(Paper, {
   ownerState
 }) => {
   const backgroundColorDefault = theme.palette.mode === 'light' ? theme.palette.grey[100] : theme.palette.grey[900];
-  return _extends({
+  return {
     display: 'flex',
     flexDirection: 'column',
     width: '100%',
     boxSizing: 'border-box',
     // Prevent padding issue with the Modal and fixed positioned AppBar.
-    flexShrink: 0
-  }, ownerState.position === 'fixed' && {
-    position: 'fixed',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0,
-    '@media print': {
-      // Prevent the app bar to be visible on each printed page.
-      position: 'absolute'
-    }
-  }, ownerState.position === 'absolute' && {
-    position: 'absolute',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'sticky' && {
-    // ⚠️ sticky is not supported by IE11.
-    position: 'sticky',
-    zIndex: (theme.vars || theme).zIndex.appBar,
-    top: 0,
-    left: 'auto',
-    right: 0
-  }, ownerState.position === 'static' && {
-    position: 'static'
-  }, ownerState.position === 'relative' && {
-    position: 'relative'
-  }, !theme.vars && _extends({}, ownerState.color === 'default' && {
-    backgroundColor: backgroundColorDefault,
-    color: theme.palette.getContrastText(backgroundColorDefault)
-  }, ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
-    backgroundColor: theme.palette[ownerState.color].main,
-    color: theme.palette[ownerState.color].contrastText
-  }, ownerState.color === 'inherit' && {
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
-    backgroundColor: null,
-    color: null
-  }, ownerState.color === 'transparent' && _extends({
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }, theme.palette.mode === 'dark' && {
-    backgroundImage: 'none'
-  })), theme.vars && _extends({}, ownerState.color === 'default' && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
-  }, ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
-    '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
-    '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
-  }, {
-    backgroundColor: 'var(--AppBar-background)',
-    color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)'
-  }, ownerState.color === 'transparent' && {
-    backgroundImage: 'none',
-    backgroundColor: 'transparent',
-    color: 'inherit'
-  }));
+    flexShrink: 0,
+    ...(ownerState.position === 'fixed' && {
+      position: 'fixed',
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0,
+      '@media print': {
+        // Prevent the app bar to be visible on each printed page.
+        position: 'absolute'
+      }
+    }),
+    ...(ownerState.position === 'absolute' && {
+      position: 'absolute',
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
+    }),
+    ...(ownerState.position === 'sticky' && {
+      // ⚠️ sticky is not supported by IE11.
+      position: 'sticky',
+      zIndex: (theme.vars || theme).zIndex.appBar,
+      top: 0,
+      left: 'auto',
+      right: 0
+    }),
+    ...(ownerState.position === 'static' && {
+      position: 'static'
+    }),
+    ...(ownerState.position === 'relative' && {
+      position: 'relative'
+    }),
+    ...(!theme.vars && {
+      ...(ownerState.color === 'default' && {
+        backgroundColor: backgroundColorDefault,
+        color: theme.palette.getContrastText(backgroundColorDefault)
+      }),
+      ...(ownerState.color && ownerState.color !== 'default' && ownerState.color !== 'inherit' && ownerState.color !== 'transparent' && {
+        backgroundColor: theme.palette[ownerState.color].main,
+        color: theme.palette[ownerState.color].contrastText
+      }),
+      ...(ownerState.color === 'inherit' && {
+        color: 'inherit'
+      }),
+      ...(theme.palette.mode === 'dark' && !ownerState.enableColorOnDark && {
+        backgroundColor: null,
+        color: null
+      }),
+      ...(ownerState.color === 'transparent' && {
+        backgroundColor: 'transparent',
+        color: 'inherit',
+        ...(theme.palette.mode === 'dark' && {
+          backgroundImage: 'none'
+        })
+      })
+    }),
+    ...(theme.vars && {
+      ...(ownerState.color === 'default' && {
+        '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette.AppBar.defaultBg : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette.AppBar.defaultBg),
+        '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette.text.primary : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette.text.primary)
+      }),
+      ...(ownerState.color && !ownerState.color.match(/^(default|inherit|transparent)$/) && {
+        '--AppBar-background': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].main : joinVars(theme.vars.palette.AppBar.darkBg, theme.vars.palette[ownerState.color].main),
+        '--AppBar-color': ownerState.enableColorOnDark ? theme.vars.palette[ownerState.color].contrastText : joinVars(theme.vars.palette.AppBar.darkColor, theme.vars.palette[ownerState.color].contrastText)
+      }),
+      backgroundColor: 'var(--AppBar-background)',
+      color: ownerState.color === 'inherit' ? 'inherit' : 'var(--AppBar-color)',
+      ...(ownerState.color === 'transparent' && {
+        backgroundImage: 'none',
+        backgroundColor: 'transparent',
+        color: 'inherit'
+      })
+    })
+  };
 });
 const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
   const props = useThemeProps({
@@ -111,26 +125,28 @@ const AppBar = /*#__PURE__*/React.forwardRef(function AppBar(inProps, ref) {
     name: 'MuiAppBar'
   });
   const {
-      className,
-      color = 'primary',
-      enableColorOnDark = false,
-      position = 'fixed'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const ownerState = _extends({}, props, {
+    className,
+    color = 'primary',
+    enableColorOnDark = false,
+    position = 'fixed',
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     color,
     position,
     enableColorOnDark
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  return /*#__PURE__*/_jsx(AppBarRoot, _extends({
+  return /*#__PURE__*/_jsx(AppBarRoot, {
     square: true,
     component: "header",
     ownerState: ownerState,
     elevation: 4,
     className: clsx(classes.root, className, position === 'fixed' && 'mui-fixed'),
-    ref: ref
-  }, other));
+    ref: ref,
+    ...other
+  });
 });
 process.env.NODE_ENV !== "production" ? AppBar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------

package/modern/Autocomplete/Autocomplete.js

@@ -1,7 +1,4 @@
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
 var _ClearIcon, _ArrowDropDownIcon;
-const _excluded = ["autoComplete", "autoHighlight", "autoSelect", "blurOnSelect", "ChipProps", "className", "clearIcon", "clearOnBlur", "clearOnEscape", "clearText", "closeText", "componentsProps", "defaultValue", "disableClearable", "disableCloseOnSelect", "disabled", "disabledItemsFocusable", "disableListWrap", "disablePortal", "filterOptions", "filterSelectedOptions", "forcePopupIcon", "freeSolo", "fullWidth", "getLimitTagsText", "getOptionDisabled", "getOptionLabel", "isOptionEqualToValue", "groupBy", "handleHomeEndKeys", "id", "includeInputInList", "inputValue", "limitTags", "ListboxComponent", "ListboxProps", "loading", "loadingText", "multiple", "noOptionsText", "onChange", "onClose", "onHighlightChange", "onInputChange", "onOpen", "open", "openOnFocus", "openText", "options", "PaperComponent", "PopperComponent", "popupIcon", "readOnly", "renderGroup", "renderInput", "renderOption", "renderTags", "selectOnFocus", "size", "slotProps", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -85,7 +82,7 @@ const AutocompleteRoot = styled('div', {
   }
 })(({
   ownerState
-}) => _extends({
+}) => ({
   [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
     visibility: 'visible'
   },
@@ -94,17 +91,18 @@ const AutocompleteRoot = styled('div', {
     [`&:hover .${autocompleteClasses.clearIndicator}`]: {
       visibility: 'visible'
     }
-  }
-}, ownerState.fullWidth && {
-  width: '100%'
-}, {
-  [`& .${autocompleteClasses.tag}`]: _extends({
-    margin: 3,
-    maxWidth: 'calc(100% - 6px)'
-  }, ownerState.size === 'small' && {
-    margin: 2,
-    maxWidth: 'calc(100% - 4px)'
+  },
+  ...(ownerState.fullWidth && {
+    width: '100%'
   }),
+  [`& .${autocompleteClasses.tag}`]: {
+    margin: 3,
+    maxWidth: 'calc(100% - 6px)',
+    ...(ownerState.size === 'small' && {
+      margin: 2,
+      maxWidth: 'calc(100% - 4px)'
+    })
+  },
   [`& .${autocompleteClasses.inputRoot}`]: {
     flexWrap: 'wrap',
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
@@ -193,13 +191,14 @@ const AutocompleteRoot = styled('div', {
       paddingBottom: 9
     }
   },
-  [`& .${autocompleteClasses.input}`]: _extends({
+  [`& .${autocompleteClasses.input}`]: {
     flexGrow: 1,
     textOverflow: 'ellipsis',
-    opacity: 0
-  }, ownerState.inputFocused && {
-    opacity: 1
-  })
+    opacity: 0,
+    ...(ownerState.inputFocused && {
+      opacity: 1
+    })
+  }
 }));
 const AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
@@ -226,14 +225,18 @@ const AutocompletePopupIndicator = styled(IconButton, {
   slot: 'PopupIndicator',
   overridesResolver: ({
     ownerState
-  }, styles) => _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
+  }, styles) => ({
+    ...styles.popupIndicator,
+    ...(ownerState.popupOpen && styles.popupIndicatorOpen)
+  })
 })(({
   ownerState
-}) => _extends({
+}) => ({
   padding: 2,
-  marginRight: -2
-}, ownerState.popupOpen && {
-  transform: 'rotate(180deg)'
+  marginRight: -2,
+  ...(ownerState.popupOpen && {
+    transform: 'rotate(180deg)'
+  })
 }));
 const AutocompletePopper = styled(Popper, {
   name: 'MuiAutocomplete',
@@ -249,10 +252,11 @@ const AutocompletePopper = styled(Popper, {
 })(({
   theme,
   ownerState
-}) => _extends({
-  zIndex: (theme.vars || theme).zIndex.modal
-}, ownerState.disablePortal && {
-  position: 'absolute'
+}) => ({
+  zIndex: (theme.vars || theme).zIndex.modal,
+  ...(ownerState.disablePortal && {
+    position: 'absolute'
+  })
 }));
 const AutocompletePaper = styled(Paper, {
   name: 'MuiAutocomplete',
@@ -260,7 +264,8 @@ const AutocompletePaper = styled(Paper, {
   overridesResolver: (props, styles) => styles.paper
 })(({
   theme
-}) => _extends({}, theme.typography.body1, {
+}) => ({
+  ...theme.typography.body1,
   overflow: 'auto'
 }));
 const AutocompleteLoading = styled('div', {
@@ -370,58 +375,71 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
-      autoComplete = false,
-      autoHighlight = false,
-      autoSelect = false,
-      blurOnSelect = false,
-      ChipProps,
-      className,
-      clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
-        fontSize: "small"
-      })),
-      clearOnBlur = !props.freeSolo,
-      clearOnEscape = false,
-      clearText = 'Clear',
-      closeText = 'Close',
-      componentsProps = {},
-      defaultValue = props.multiple ? [] : null,
-      disableClearable = false,
-      disableCloseOnSelect = false,
-      disabled = false,
-      disabledItemsFocusable = false,
-      disableListWrap = false,
-      disablePortal = false,
-      filterSelectedOptions = false,
-      forcePopupIcon = 'auto',
-      freeSolo = false,
-      fullWidth = false,
-      getLimitTagsText = more => `+${more}`,
-      getOptionLabel = option => option.label ?? option,
-      groupBy,
-      handleHomeEndKeys = !props.freeSolo,
-      includeInputInList = false,
-      limitTags = -1,
-      ListboxComponent = 'ul',
-      ListboxProps,
-      loading = false,
-      loadingText = 'Loading…',
-      multiple = false,
-      noOptionsText = 'No options',
-      openOnFocus = false,
-      openText = 'Open',
-      PaperComponent = Paper,
-      PopperComponent = Popper,
-      popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
-      readOnly = false,
-      renderGroup: renderGroupProp,
-      renderInput,
-      renderOption: renderOptionProp,
-      renderTags,
-      selectOnFocus = !props.freeSolo,
-      size = 'medium',
-      slotProps = {}
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    autoComplete = false,
+    autoHighlight = false,
+    autoSelect = false,
+    blurOnSelect = false,
+    ChipProps,
+    className,
+    clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
+      fontSize: "small"
+    })),
+    clearOnBlur = !props.freeSolo,
+    clearOnEscape = false,
+    clearText = 'Clear',
+    closeText = 'Close',
+    componentsProps = {},
+    defaultValue = props.multiple ? [] : null,
+    disableClearable = false,
+    disableCloseOnSelect = false,
+    disabled = false,
+    disabledItemsFocusable = false,
+    disableListWrap = false,
+    disablePortal = false,
+    filterOptions,
+    filterSelectedOptions = false,
+    forcePopupIcon = 'auto',
+    freeSolo = false,
+    fullWidth = false,
+    getLimitTagsText = more => `+${more}`,
+    getOptionDisabled,
+    getOptionLabel = option => option.label ?? option,
+    isOptionEqualToValue,
+    groupBy,
+    handleHomeEndKeys = !props.freeSolo,
+    id: idProp,
+    includeInputInList = false,
+    inputValue: inputValueProp,
+    limitTags = -1,
+    ListboxComponent = 'ul',
+    ListboxProps,
+    loading = false,
+    loadingText = 'Loading…',
+    multiple = false,
+    noOptionsText = 'No options',
+    onChange,
+    onClose,
+    onHighlightChange,
+    onInputChange,
+    onOpen,
+    open,
+    openOnFocus = false,
+    openText = 'Open',
+    options,
+    PaperComponent = Paper,
+    PopperComponent = Popper,
+    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
+    readOnly = false,
+    renderGroup: renderGroupProp,
+    renderInput,
+    renderOption: renderOptionProp,
+    renderTags,
+    selectOnFocus = !props.freeSolo,
+    size = 'medium',
+    slotProps = {},
+    value: valueProp,
+    ...other
+  } = props;
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const {
@@ -444,9 +462,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     setAnchorEl,
     inputValue,
     groupedOptions
-  } = useAutocomplete(_extends({}, props, {
+  } = useAutocomplete({
+    ...props,
     componentName: 'Autocomplete'
-  }));
+  });
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
@@ -454,7 +473,8 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   } = getInputProps();
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     disablePortal,
     expanded,
     focused,
@@ -464,23 +484,26 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     inputFocused: focusedTag === -1,
     popupOpen,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   let startAdornment;
   if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => _extends({
+    const getCustomizedTagProps = params => ({
       className: classes.tag,
-      disabled
-    }, getTagProps(params));
+      disabled,
+      ...getTagProps(params)
+    });
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
+      startAdornment = value.map((option, index) => /*#__PURE__*/_jsx(Chip, {
         label: getOptionLabel(option),
-        size: size
-      }, getCustomizedTagProps({
-        index
-      }), ChipProps)));
+        size: size,
+        ...getCustomizedTagProps({
+          index
+        }),
+        ...ChipProps
+      }));
     }
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
@@ -506,18 +529,20 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     })]
   }, params.key);
   const renderGroup = renderGroupProp || defaultRenderGroup;
-  const defaultRenderOption = (props2, option) => /*#__PURE__*/_jsx("li", _extends({}, props2, {
+  const defaultRenderOption = (props2, option) => /*#__PURE__*/_jsx("li", {
+    ...props2,
     children: getOptionLabel(option)
-  }));
+  });
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {
     const optionProps = getOptionProps({
       option,
       index
     });
-    return renderOption(_extends({}, optionProps, {
+    return renderOption({
+      ...optionProps,
       className: classes.option
-    }), option, {
+    }, option, {
       selected: optionProps['aria-selected'],
       index,
       inputValue
@@ -528,18 +553,18 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const popperSlotProps = slotProps.popper ?? componentsProps.popper;
   const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
+    children: [/*#__PURE__*/_jsx(AutocompleteRoot, {
       ref: ref,
       className: clsx(classes.root, className),
-      ownerState: ownerState
-    }, getRootProps(other), {
+      ownerState: ownerState,
+      ...getRootProps(other),
       children: renderInput({
         id,
         disabled,
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: _extends({
+        InputProps: {
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
@@ -547,36 +572,40 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             if (event.target === event.currentTarget) {
               handleInputMouseDown(event);
             }
-          }
-        }, (hasClearIcon || hasPopupIcon) && {
-          endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
-            className: classes.endAdornment,
-            ownerState: ownerState,
-            children: [hasClearIcon ? /*#__PURE__*/_jsx(AutocompleteClearIndicator, _extends({}, getClearProps(), {
-              "aria-label": clearText,
-              title: clearText,
-              ownerState: ownerState
-            }, clearIndicatorSlotProps, {
-              className: clsx(classes.clearIndicator, clearIndicatorSlotProps?.className),
-              children: clearIcon
-            })) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
-              disabled: disabled,
-              "aria-label": popupOpen ? closeText : openText,
-              title: popupOpen ? closeText : openText,
-              ownerState: ownerState
-            }, popupIndicatorSlotProps, {
-              className: clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
-              children: popupIcon
-            })) : null]
+          },
+          ...((hasClearIcon || hasPopupIcon) && {
+            endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
+              className: classes.endAdornment,
+              ownerState: ownerState,
+              children: [hasClearIcon ? /*#__PURE__*/_jsx(AutocompleteClearIndicator, {
+                ...getClearProps(),
+                "aria-label": clearText,
+                title: clearText,
+                ownerState: ownerState,
+                ...clearIndicatorSlotProps,
+                className: clsx(classes.clearIndicator, clearIndicatorSlotProps?.className),
+                children: clearIcon
+              }) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, {
+                ...getPopupIndicatorProps(),
+                disabled: disabled,
+                "aria-label": popupOpen ? closeText : openText,
+                title: popupOpen ? closeText : openText,
+                ownerState: ownerState,
+                ...popupIndicatorSlotProps,
+                className: clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
+                children: popupIcon
+              }) : null]
+            })
           })
-        }),
-        inputProps: _extends({
+        },
+        inputProps: {
           className: classes.input,
           disabled,
-          readOnly
-        }, getInputProps())
+          readOnly,
+          ...getInputProps()
+        }
       })
-    })), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
+    }), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
       as: PopperComponent,
       disablePortal: disablePortal,
       style: {
@@ -585,13 +614,13 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       ownerState: ownerState,
       role: "presentation",
       anchorEl: anchorEl,
-      open: popupOpen
-    }, popperSlotProps, {
+      open: popupOpen,
+      ...popperSlotProps,
       className: clsx(classes.popper, popperSlotProps?.className),
-      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
+      children: /*#__PURE__*/_jsxs(AutocompletePaper, {
         ownerState: ownerState,
-        as: PaperComponent
-      }, paperSlotProps, {
+        as: PaperComponent,
+        ...paperSlotProps,
         className: clsx(classes.paper, paperSlotProps?.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
@@ -606,11 +635,12 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, {
           as: ListboxComponent,
           className: classes.listbox,
-          ownerState: ownerState
-        }, getListboxProps(), ListboxProps, {
+          ownerState: ownerState,
+          ...getListboxProps(),
+          ...ListboxProps,
           children: groupedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({
@@ -621,9 +651,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             }
             return renderListOption(option, index);
           })
-        })) : null]
-      }))
-    })) : null]
+        }) : null]
+      })
+    }) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
@@ -760,6 +790,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * A function that determines the filtered options to be rendered on search.
    *
+   * @default createFilterOptions()
    * @param {T[]} options The options to render.
    * @param {object} state The state of the component.
    * @returns {T[]}