@mui/material 5.10.12 → 5.10.14

package/legacy/Autocomplete/Autocomplete.js

@@ -1,9 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-
 var _ClearIcon, _ArrowDropDownIcon;
-
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -27,17 +25,16 @@ import autocompleteClasses, { getAutocompleteUtilityClass } from './autocomplete
 import capitalize from '../utils/capitalize';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
-
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
-      disablePortal = ownerState.disablePortal,
-      focused = ownerState.focused,
-      fullWidth = ownerState.fullWidth,
-      hasClearIcon = ownerState.hasClearIcon,
-      hasPopupIcon = ownerState.hasPopupIcon,
-      inputFocused = ownerState.inputFocused,
-      popupOpen = ownerState.popupOpen,
-      size = ownerState.size;
+    disablePortal = ownerState.disablePortal,
+    focused = ownerState.focused,
+    fullWidth = ownerState.fullWidth,
+    hasClearIcon = ownerState.hasClearIcon,
+    hasPopupIcon = ownerState.hasPopupIcon,
+    inputFocused = ownerState.inputFocused,
+    popupOpen = ownerState.popupOpen,
+    size = ownerState.size;
   var slots = {
     root: ['root', focused && 'focused', fullWidth && 'fullWidth', hasClearIcon && 'hasClearIcon', hasPopupIcon && 'hasPopupIcon'],
     inputRoot: ['inputRoot'],
@@ -57,22 +54,20 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getAutocompleteUtilityClass, classes);
 };
-
 var AutocompleteRoot = styled('div', {
   name: 'MuiAutocomplete',
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
     var fullWidth = ownerState.fullWidth,
-        hasClearIcon = ownerState.hasClearIcon,
-        hasPopupIcon = ownerState.hasPopupIcon,
-        inputFocused = ownerState.inputFocused,
-        size = ownerState.size;
+      hasClearIcon = ownerState.hasClearIcon,
+      hasPopupIcon = ownerState.hasPopupIcon,
+      inputFocused = ownerState.inputFocused,
+      size = ownerState.size;
     return [_defineProperty({}, "& .".concat(autocompleteClasses.tag), styles.tag), _defineProperty({}, "& .".concat(autocompleteClasses.tag), styles["tagSize".concat(capitalize(size))]), _defineProperty({}, "& .".concat(autocompleteClasses.inputRoot), styles.inputRoot), _defineProperty({}, "& .".concat(autocompleteClasses.input), styles.input), _defineProperty({}, "& .".concat(autocompleteClasses.input), inputFocused && styles.inputFocused), styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })(function (_ref6) {
   var _extends2, _$concat, _$concat2, _$concat3, _extends3;
-
   var ownerState = _ref6.ownerState;
   return _extends((_extends2 = {}, _defineProperty(_extends2, "&.".concat(autocompleteClasses.focused, " .").concat(autocompleteClasses.clearIndicator), {
     visibility: 'visible'
@@ -156,8 +151,8 @@ var AutocompleteEndAdornment = styled('div', {
   position: 'absolute',
   right: 0,
   top: 'calc(50% - 14px)' // Center vertically
-
 });
+
 var AutocompleteClearIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
   slot: 'ClearIndicator',
@@ -194,7 +189,7 @@ var AutocompletePopper = styled(Popper, {
   }
 })(function (_ref10) {
   var theme = _ref10.theme,
-      ownerState = _ref10.ownerState;
+    ownerState = _ref10.ownerState;
   return _extends({
     zIndex: (theme.vars || theme).zIndex.modal
   }, ownerState.disablePortal && {
@@ -247,7 +242,6 @@ var AutocompleteListbox = styled('div', {
   }
 })(function (_ref14) {
   var _ariaSelectedTru, _$concat4;
-
   var theme = _ref14.theme;
   return _defineProperty({
     listStyle: 'none',
@@ -320,150 +314,147 @@ var AutocompleteGroupUl = styled('ul', {
 }));
 export { createFilterOptions };
 var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps, ref) {
-  var _componentsProps$clea, _componentsProps$popu, _componentsProps$popp, _componentsProps$pape;
-
+  var _slotProps$clearIndic, _slotProps$paper, _slotProps$popper, _slotProps$popupIndic;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiAutocomplete'
   });
   /* eslint-disable @typescript-eslint/no-unused-vars */
-
   var _props$autoComplete = props.autoComplete,
-      autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,
-      _props$autoHighlight = props.autoHighlight,
-      autoHighlight = _props$autoHighlight === void 0 ? false : _props$autoHighlight,
-      _props$autoSelect = props.autoSelect,
-      autoSelect = _props$autoSelect === void 0 ? false : _props$autoSelect,
-      _props$blurOnSelect = props.blurOnSelect,
-      blurOnSelect = _props$blurOnSelect === void 0 ? false : _props$blurOnSelect,
-      ChipProps = props.ChipProps,
-      className = props.className,
-      _props$clearIcon = props.clearIcon,
-      clearIcon = _props$clearIcon === void 0 ? _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
-    fontSize: "small"
-  })) : _props$clearIcon,
-      _props$clearOnBlur = props.clearOnBlur,
-      clearOnBlur = _props$clearOnBlur === void 0 ? !props.freeSolo : _props$clearOnBlur,
-      _props$clearOnEscape = props.clearOnEscape,
-      clearOnEscape = _props$clearOnEscape === void 0 ? false : _props$clearOnEscape,
-      _props$clearText = props.clearText,
-      clearText = _props$clearText === void 0 ? 'Clear' : _props$clearText,
-      _props$closeText = props.closeText,
-      closeText = _props$closeText === void 0 ? 'Close' : _props$closeText,
-      _props$componentsProp = props.componentsProps,
-      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,
-      _props$disableClearab = props.disableClearable,
-      disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,
-      _props$disableCloseOn = props.disableCloseOnSelect,
-      disableCloseOnSelect = _props$disableCloseOn === void 0 ? false : _props$disableCloseOn,
-      _props$disabled = props.disabled,
-      disabled = _props$disabled === void 0 ? false : _props$disabled,
-      _props$disabledItemsF = props.disabledItemsFocusable,
-      disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
-      _props$disableListWra = props.disableListWrap,
-      disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,
-      _props$disablePortal = props.disablePortal,
-      disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
-      filterOptions = props.filterOptions,
-      _props$filterSelected = props.filterSelectedOptions,
-      filterSelectedOptions = _props$filterSelected === void 0 ? false : _props$filterSelected,
-      _props$forcePopupIcon = props.forcePopupIcon,
-      forcePopupIcon = _props$forcePopupIcon === void 0 ? 'auto' : _props$forcePopupIcon,
-      _props$freeSolo = props.freeSolo,
-      freeSolo = _props$freeSolo === void 0 ? false : _props$freeSolo,
-      _props$fullWidth = props.fullWidth,
-      fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
-      _props$getLimitTagsTe = props.getLimitTagsText,
-      getLimitTagsText = _props$getLimitTagsTe === void 0 ? function (more) {
-    return "+".concat(more);
-  } : _props$getLimitTagsTe,
-      getOptionDisabled = props.getOptionDisabled,
-      _props$getOptionLabel = props.getOptionLabel,
-      getOptionLabel = _props$getOptionLabel === void 0 ? function (option) {
-    var _option$label;
-
-    return (_option$label = option.label) != null ? _option$label : option;
-  } : _props$getOptionLabel,
-      isOptionEqualToValue = props.isOptionEqualToValue,
-      groupBy = props.groupBy,
-      _props$handleHomeEndK = props.handleHomeEndKeys,
-      handleHomeEndKeys = _props$handleHomeEndK === void 0 ? !props.freeSolo : _props$handleHomeEndK,
-      idProp = props.id,
-      _props$includeInputIn = props.includeInputInList,
-      includeInputInList = _props$includeInputIn === void 0 ? false : _props$includeInputIn,
-      inputValueProp = props.inputValue,
-      _props$limitTags = props.limitTags,
-      limitTags = _props$limitTags === void 0 ? -1 : _props$limitTags,
-      _props$ListboxCompone = props.ListboxComponent,
-      ListboxComponent = _props$ListboxCompone === void 0 ? 'ul' : _props$ListboxCompone,
-      ListboxProps = props.ListboxProps,
-      _props$loading = props.loading,
-      loading = _props$loading === void 0 ? false : _props$loading,
-      _props$loadingText = props.loadingText,
-      loadingText = _props$loadingText === void 0 ? 'Loading…' : _props$loadingText,
-      _props$multiple = props.multiple,
-      multiple = _props$multiple === void 0 ? false : _props$multiple,
-      _props$noOptionsText = props.noOptionsText,
-      noOptionsText = _props$noOptionsText === void 0 ? 'No options' : _props$noOptionsText,
-      onChange = props.onChange,
-      onClose = props.onClose,
-      onHighlightChange = props.onHighlightChange,
-      onInputChange = props.onInputChange,
-      onOpen = props.onOpen,
-      open = props.open,
-      _props$openOnFocus = props.openOnFocus,
-      openOnFocus = _props$openOnFocus === void 0 ? false : _props$openOnFocus,
-      _props$openText = props.openText,
-      openText = _props$openText === void 0 ? 'Open' : _props$openText,
-      options = props.options,
-      _props$PaperComponent = props.PaperComponent,
-      PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,
-      _props$PopperComponen = props.PopperComponent,
-      PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
-      _props$popupIcon = props.popupIcon,
-      popupIcon = _props$popupIcon === void 0 ? _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})) : _props$popupIcon,
-      _props$readOnly = props.readOnly,
-      readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
-      renderGroupProp = props.renderGroup,
-      renderInput = props.renderInput,
-      renderOptionProp = props.renderOption,
-      renderTags = props.renderTags,
-      _props$selectOnFocus = props.selectOnFocus,
-      selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,
-      _props$size = props.size,
-      size = _props$size === void 0 ? 'medium' : _props$size,
-      valueProp = props.value,
-      other = _objectWithoutProperties(props, ["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", "value"]);
+    autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete,
+    _props$autoHighlight = props.autoHighlight,
+    autoHighlight = _props$autoHighlight === void 0 ? false : _props$autoHighlight,
+    _props$autoSelect = props.autoSelect,
+    autoSelect = _props$autoSelect === void 0 ? false : _props$autoSelect,
+    _props$blurOnSelect = props.blurOnSelect,
+    blurOnSelect = _props$blurOnSelect === void 0 ? false : _props$blurOnSelect,
+    ChipProps = props.ChipProps,
+    className = props.className,
+    _props$clearIcon = props.clearIcon,
+    clearIcon = _props$clearIcon === void 0 ? _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
+      fontSize: "small"
+    })) : _props$clearIcon,
+    _props$clearOnBlur = props.clearOnBlur,
+    clearOnBlur = _props$clearOnBlur === void 0 ? !props.freeSolo : _props$clearOnBlur,
+    _props$clearOnEscape = props.clearOnEscape,
+    clearOnEscape = _props$clearOnEscape === void 0 ? false : _props$clearOnEscape,
+    _props$clearText = props.clearText,
+    clearText = _props$clearText === void 0 ? 'Clear' : _props$clearText,
+    _props$closeText = props.closeText,
+    closeText = _props$closeText === void 0 ? 'Close' : _props$closeText,
+    _props$componentsProp = props.componentsProps,
+    componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+    _props$defaultValue = props.defaultValue,
+    defaultValue = _props$defaultValue === void 0 ? props.multiple ? [] : null : _props$defaultValue,
+    _props$disableClearab = props.disableClearable,
+    disableClearable = _props$disableClearab === void 0 ? false : _props$disableClearab,
+    _props$disableCloseOn = props.disableCloseOnSelect,
+    disableCloseOnSelect = _props$disableCloseOn === void 0 ? false : _props$disableCloseOn,
+    _props$disabled = props.disabled,
+    disabled = _props$disabled === void 0 ? false : _props$disabled,
+    _props$disabledItemsF = props.disabledItemsFocusable,
+    disabledItemsFocusable = _props$disabledItemsF === void 0 ? false : _props$disabledItemsF,
+    _props$disableListWra = props.disableListWrap,
+    disableListWrap = _props$disableListWra === void 0 ? false : _props$disableListWra,
+    _props$disablePortal = props.disablePortal,
+    disablePortal = _props$disablePortal === void 0 ? false : _props$disablePortal,
+    filterOptions = props.filterOptions,
+    _props$filterSelected = props.filterSelectedOptions,
+    filterSelectedOptions = _props$filterSelected === void 0 ? false : _props$filterSelected,
+    _props$forcePopupIcon = props.forcePopupIcon,
+    forcePopupIcon = _props$forcePopupIcon === void 0 ? 'auto' : _props$forcePopupIcon,
+    _props$freeSolo = props.freeSolo,
+    freeSolo = _props$freeSolo === void 0 ? false : _props$freeSolo,
+    _props$fullWidth = props.fullWidth,
+    fullWidth = _props$fullWidth === void 0 ? false : _props$fullWidth,
+    _props$getLimitTagsTe = props.getLimitTagsText,
+    getLimitTagsText = _props$getLimitTagsTe === void 0 ? function (more) {
+      return "+".concat(more);
+    } : _props$getLimitTagsTe,
+    getOptionDisabled = props.getOptionDisabled,
+    _props$getOptionLabel = props.getOptionLabel,
+    getOptionLabel = _props$getOptionLabel === void 0 ? function (option) {
+      var _option$label;
+      return (_option$label = option.label) != null ? _option$label : option;
+    } : _props$getOptionLabel,
+    isOptionEqualToValue = props.isOptionEqualToValue,
+    groupBy = props.groupBy,
+    _props$handleHomeEndK = props.handleHomeEndKeys,
+    handleHomeEndKeys = _props$handleHomeEndK === void 0 ? !props.freeSolo : _props$handleHomeEndK,
+    idProp = props.id,
+    _props$includeInputIn = props.includeInputInList,
+    includeInputInList = _props$includeInputIn === void 0 ? false : _props$includeInputIn,
+    inputValueProp = props.inputValue,
+    _props$limitTags = props.limitTags,
+    limitTags = _props$limitTags === void 0 ? -1 : _props$limitTags,
+    _props$ListboxCompone = props.ListboxComponent,
+    ListboxComponent = _props$ListboxCompone === void 0 ? 'ul' : _props$ListboxCompone,
+    ListboxProps = props.ListboxProps,
+    _props$loading = props.loading,
+    loading = _props$loading === void 0 ? false : _props$loading,
+    _props$loadingText = props.loadingText,
+    loadingText = _props$loadingText === void 0 ? 'Loading…' : _props$loadingText,
+    _props$multiple = props.multiple,
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    _props$noOptionsText = props.noOptionsText,
+    noOptionsText = _props$noOptionsText === void 0 ? 'No options' : _props$noOptionsText,
+    onChange = props.onChange,
+    onClose = props.onClose,
+    onHighlightChange = props.onHighlightChange,
+    onInputChange = props.onInputChange,
+    onOpen = props.onOpen,
+    open = props.open,
+    _props$openOnFocus = props.openOnFocus,
+    openOnFocus = _props$openOnFocus === void 0 ? false : _props$openOnFocus,
+    _props$openText = props.openText,
+    openText = _props$openText === void 0 ? 'Open' : _props$openText,
+    options = props.options,
+    _props$PaperComponent = props.PaperComponent,
+    PaperComponent = _props$PaperComponent === void 0 ? Paper : _props$PaperComponent,
+    _props$PopperComponen = props.PopperComponent,
+    PopperComponent = _props$PopperComponen === void 0 ? Popper : _props$PopperComponen,
+    _props$popupIcon = props.popupIcon,
+    popupIcon = _props$popupIcon === void 0 ? _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})) : _props$popupIcon,
+    _props$readOnly = props.readOnly,
+    readOnly = _props$readOnly === void 0 ? false : _props$readOnly,
+    renderGroupProp = props.renderGroup,
+    renderInput = props.renderInput,
+    renderOptionProp = props.renderOption,
+    renderTags = props.renderTags,
+    _props$selectOnFocus = props.selectOnFocus,
+    selectOnFocus = _props$selectOnFocus === void 0 ? !props.freeSolo : _props$selectOnFocus,
+    _props$size = props.size,
+    size = _props$size === void 0 ? 'medium' : _props$size,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    valueProp = props.value,
+    other = _objectWithoutProperties(props, ["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"]);
   /* eslint-enable @typescript-eslint/no-unused-vars */
-
-
   var _useAutocomplete = useAutocomplete(_extends({}, props, {
-    componentName: 'Autocomplete'
-  })),
-      getRootProps = _useAutocomplete.getRootProps,
-      getInputProps = _useAutocomplete.getInputProps,
-      getInputLabelProps = _useAutocomplete.getInputLabelProps,
-      getPopupIndicatorProps = _useAutocomplete.getPopupIndicatorProps,
-      getClearProps = _useAutocomplete.getClearProps,
-      getTagProps = _useAutocomplete.getTagProps,
-      getListboxProps = _useAutocomplete.getListboxProps,
-      getOptionProps = _useAutocomplete.getOptionProps,
-      value = _useAutocomplete.value,
-      dirty = _useAutocomplete.dirty,
-      id = _useAutocomplete.id,
-      popupOpen = _useAutocomplete.popupOpen,
-      focused = _useAutocomplete.focused,
-      focusedTag = _useAutocomplete.focusedTag,
-      anchorEl = _useAutocomplete.anchorEl,
-      setAnchorEl = _useAutocomplete.setAnchorEl,
-      inputValue = _useAutocomplete.inputValue,
-      groupedOptions = _useAutocomplete.groupedOptions;
-
+      componentName: 'Autocomplete'
+    })),
+    getRootProps = _useAutocomplete.getRootProps,
+    getInputProps = _useAutocomplete.getInputProps,
+    getInputLabelProps = _useAutocomplete.getInputLabelProps,
+    getPopupIndicatorProps = _useAutocomplete.getPopupIndicatorProps,
+    getClearProps = _useAutocomplete.getClearProps,
+    getTagProps = _useAutocomplete.getTagProps,
+    getListboxProps = _useAutocomplete.getListboxProps,
+    getOptionProps = _useAutocomplete.getOptionProps,
+    value = _useAutocomplete.value,
+    dirty = _useAutocomplete.dirty,
+    id = _useAutocomplete.id,
+    popupOpen = _useAutocomplete.popupOpen,
+    focused = _useAutocomplete.focused,
+    focusedTag = _useAutocomplete.focusedTag,
+    anchorEl = _useAutocomplete.anchorEl,
+    setAnchorEl = _useAutocomplete.setAnchorEl,
+    inputValue = _useAutocomplete.inputValue,
+    groupedOptions = _useAutocomplete.groupedOptions;
   var hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
-  var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false; // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
+  var hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
 
+  // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
   var ownerState = _extends({}, props, {
     disablePortal: disablePortal,
     focused: focused,
@@ -474,10 +465,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     popupOpen: popupOpen,
     size: size
   });
-
   var classes = useUtilityClasses(ownerState);
   var startAdornment;
-
   if (multiple && value.length > 0) {
     var getCustomizedTagProps = function getCustomizedTagProps(params) {
       return _extends({
@@ -485,7 +474,6 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
         disabled: disabled
       }, getTagProps(params));
     };
-
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
@@ -499,10 +487,8 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       });
     }
   }
-
   if (limitTags > -1 && Array.isArray(startAdornment)) {
     var more = startAdornment.length - limitTags;
-
     if (!focused && more > 0) {
       startAdornment = startAdornment.splice(0, limitTags);
       startAdornment.push( /*#__PURE__*/_jsx("span", {
@@ -511,7 +497,6 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       }, startAdornment.length));
     }
   }
-
   var defaultRenderGroup = function defaultRenderGroup(params) {
     return /*#__PURE__*/_jsxs("li", {
       children: [/*#__PURE__*/_jsx(AutocompleteGroupLabel, {
@@ -526,17 +511,13 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       })]
     }, params.key);
   };
-
   var renderGroup = renderGroupProp || defaultRenderGroup;
-
   var defaultRenderOption = function defaultRenderOption(props2, option) {
     return /*#__PURE__*/_jsx("li", _extends({}, props2, {
       children: getOptionLabel(option)
     }));
   };
-
   var renderOption = renderOptionProp || defaultRenderOption;
-
   var renderListOption = function renderListOption(option, index) {
     var optionProps = getOptionProps({
       option: option,
@@ -549,7 +530,10 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       inputValue: inputValue
     });
   };
-
+  var clearIndicatorSlotProps = (_slotProps$clearIndic = slotProps.clearIndicator) != null ? _slotProps$clearIndic : componentsProps.clearIndicator;
+  var paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
+  var popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
+  var popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -574,16 +558,16 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
               "aria-label": clearText,
               title: clearText,
               ownerState: ownerState
-            }, componentsProps.clearIndicator, {
-              className: clsx(classes.clearIndicator, (_componentsProps$clea = componentsProps.clearIndicator) == null ? void 0 : _componentsProps$clea.className),
+            }, clearIndicatorSlotProps, {
+              className: clsx(classes.clearIndicator, clearIndicatorSlotProps == null ? void 0 : clearIndicatorSlotProps.className),
               children: clearIcon
             })) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
               disabled: disabled,
               "aria-label": popupOpen ? closeText : openText,
               title: popupOpen ? closeText : openText,
               ownerState: ownerState
-            }, componentsProps.popupIndicator, {
-              className: clsx(classes.popupIndicator, (_componentsProps$popu = componentsProps.popupIndicator) == null ? void 0 : _componentsProps$popu.className),
+            }, popupIndicatorSlotProps, {
+              className: clsx(classes.popupIndicator, popupIndicatorSlotProps == null ? void 0 : popupIndicatorSlotProps.className),
               children: popupIcon
             })) : null]
           })
@@ -604,13 +588,13 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
       role: "presentation",
       anchorEl: anchorEl,
       open: popupOpen
-    }, componentsProps.popper, {
-      className: clsx(classes.popper, (_componentsProps$popp = componentsProps.popper) == null ? void 0 : _componentsProps$popp.className),
+    }, popperSlotProps, {
+      className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
       children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
         ownerState: ownerState,
         as: PaperComponent
-      }, componentsProps.paper, {
-        className: clsx(classes.paper, (_componentsProps$pape = componentsProps.paper) == null ? void 0 : _componentsProps$pape.className),
+      }, paperSlotProps, {
+        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
         children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
@@ -639,7 +623,6 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
                 })
               });
             }
-
             return renderListOption(option, index);
           })
         })) : null]
@@ -647,14 +630,11 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
     })) : null]
   });
 });
-process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * If `true`, the portion of the selected suggestion that has not been typed by the user,
    * known as the completion string, appears inline after the input cursor in the textbox.
@@ -662,13 +642,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default false
    */
   autoComplete: PropTypes.bool,
-
   /**
    * If `true`, the first option is automatically highlighted.
    * @default false
    */
   autoHighlight: PropTypes.bool,
-
   /**
    * If `true`, the selected option becomes the value of the input
    * when the Autocomplete loses focus unless the user chooses
@@ -676,7 +654,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default false
    */
   autoSelect: PropTypes.bool,
-
   /**
    * Control if the input should be blurred when an option is selected:
    *
@@ -687,28 +664,23 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default false
    */
   blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
-
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
    */
   ChipProps: PropTypes.object,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The icon to display in place of the default clear icon.
    * @default <ClearIcon fontSize="small" />
    */
   clearIcon: PropTypes.node,
-
   /**
    * If `true`, the input's text is cleared on blur if no value is selected.
    *
@@ -717,13 +689,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default !props.freeSolo
    */
   clearOnBlur: PropTypes.bool,
-
   /**
    * If `true`, clear all values when the user presses escape and the popup is closed.
    * @default false
    */
   clearOnEscape: PropTypes.bool,
-
   /**
    * Override the default text for the *clear* icon button.
    *
@@ -731,7 +701,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Clear'
    */
   clearText: PropTypes.string,
-
   /**
    * Override the default text for the *close popup* icon button.
    *
@@ -739,7 +708,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Close'
    */
   closeText: PropTypes.string,
-
   /**
    * The props used for each slot inside.
    * @default {}
@@ -750,7 +718,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
     popper: PropTypes.object,
     popupIndicator: PropTypes.object
   }),
-
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
@@ -759,46 +726,38 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
     if (props.multiple && props.defaultValue !== undefined && !Array.isArray(props.defaultValue)) {
       return new Error(['MUI: The Autocomplete expects the `defaultValue` prop to be an array when `multiple={true}` or undefined.', "However, ".concat(props.defaultValue, " was provided.")].join('\n'));
     }
-
     return null;
   }),
-
   /**
    * If `true`, the input can't be cleared.
    * @default false
    */
   disableClearable: PropTypes.bool,
-
   /**
    * If `true`, the popup won't close when a value is selected.
    * @default false
    */
   disableCloseOnSelect: PropTypes.bool,
-
   /**
    * If `true`, the component is disabled.
    * @default false
    */
   disabled: PropTypes.bool,
-
   /**
    * If `true`, will allow focus on disabled items.
    * @default false
    */
   disabledItemsFocusable: PropTypes.bool,
-
   /**
    * If `true`, the list box in the popup will not wrap focus.
    * @default false
    */
   disableListWrap: PropTypes.bool,
-
   /**
    * If `true`, the `Popper` content will be under the DOM hierarchy of the parent component.
    * @default false
    */
   disablePortal: PropTypes.bool,
-
   /**
    * A function that determines the filtered options to be rendered on search.
    *
@@ -807,31 +766,26 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {T[]}
    */
   filterOptions: PropTypes.func,
-
   /**
    * If `true`, hide the selected options from the list box.
    * @default false
    */
   filterSelectedOptions: PropTypes.bool,
-
   /**
    * Force the visibility display of the popup icon.
    * @default 'auto'
    */
   forcePopupIcon: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.bool]),
-
   /**
    * If `true`, the Autocomplete is free solo, meaning that the user input is not bound to provided options.
    * @default false
    */
   freeSolo: PropTypes.bool,
-
   /**
    * If `true`, the input will take up the full width of its container.
    * @default false
    */
   fullWidth: PropTypes.bool,
-
   /**
    * The label to display when the tags are truncated (`limitTags`).
    *
@@ -840,7 +794,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default (more) => `+${more}`
    */
   getLimitTagsText: PropTypes.func,
-
   /**
    * Used to determine the disabled state for a given option.
    *
@@ -848,7 +801,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {boolean}
    */
   getOptionDisabled: PropTypes.func,
-
   /**
    * Used to determine the string value for a given option.
    * It's used to fill the input (and the list box options if `renderOption` is not provided).
@@ -860,7 +812,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default (option) => option.label ?? option
    */
   getOptionLabel: PropTypes.func,
-
   /**
    * If provided, the options will be grouped under the returned string.
    * The groupBy value is also used as the text for group headings when `renderGroup` is not provided.
@@ -869,31 +820,26 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {string}
    */
   groupBy: PropTypes.func,
-
   /**
    * If `true`, the component handles the "Home" and "End" keys when the popup is open.
    * It should move focus to the first option and last option, respectively.
    * @default !props.freeSolo
    */
   handleHomeEndKeys: PropTypes.bool,
-
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide an id it will fall back to a randomly generated one.
    */
   id: PropTypes.string,
-
   /**
    * If `true`, the highlight can move to the input.
    * @default false
    */
   includeInputInList: PropTypes.bool,
-
   /**
    * The input value.
    */
   inputValue: PropTypes.string,
-
   /**
    * Used to determine if the option represents the given value.
    * Uses strict equality by default.
@@ -904,32 +850,27 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {boolean}
    */
   isOptionEqualToValue: PropTypes.func,
-
   /**
    * The maximum number of tags that will be visible when not focused.
    * Set `-1` to disable the limit.
    * @default -1
    */
   limitTags: integerPropType,
-
   /**
    * The component used to render the listbox.
    * @default 'ul'
    */
   ListboxComponent: PropTypes.elementType,
-
   /**
    * Props applied to the Listbox element.
    */
   ListboxProps: PropTypes.object,
-
   /**
    * If `true`, the component is in a loading state.
    * This shows the `loadingText` in place of suggestions (only if there are no suggestions to show, e.g. `options` are empty).
    * @default false
    */
   loading: PropTypes.bool,
-
   /**
    * Text to display when in a loading state.
    *
@@ -937,13 +878,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Loading…'
    */
   loadingText: PropTypes.node,
-
   /**
    * If `true`, `value` must be an array and the menu will support multiple selections.
    * @default false
    */
   multiple: PropTypes.bool,
-
   /**
    * Text to display when there are no options.
    *
@@ -951,7 +890,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'No options'
    */
   noOptionsText: PropTypes.node,
-
   /**
    * Callback fired when the value changes.
    *
@@ -961,7 +899,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} [details]
    */
   onChange: PropTypes.func,
-
   /**
    * Callback fired when the popup requests to be closed.
    * Use in controlled mode (see open).
@@ -970,7 +907,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} reason Can be: `"toggleInput"`, `"escape"`, `"selectOption"`, `"removeOption"`, `"blur"`.
    */
   onClose: PropTypes.func,
-
   /**
    * Callback fired when the highlight option changes.
    *
@@ -979,7 +915,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} reason Can be: `"keyboard"`, `"auto"`, `"mouse"`.
    */
   onHighlightChange: PropTypes.func,
-
   /**
    * Callback fired when the input value changes.
    *
@@ -988,7 +923,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {string} reason Can be: `"input"` (user input), `"reset"` (programmatic change), `"clear"`.
    */
   onInputChange: PropTypes.func,
-
   /**
    * Callback fired when the popup requests to be opened.
    * Use in controlled mode (see open).
@@ -996,18 +930,15 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @param {React.SyntheticEvent} event The event source of the callback.
    */
   onOpen: PropTypes.func,
-
   /**
    * If `true`, the component is shown.
    */
   open: PropTypes.bool,
-
   /**
    * If `true`, the popup will open on input focus.
    * @default false
    */
   openOnFocus: PropTypes.bool,
-
   /**
    * Override the default text for the *open popup* icon button.
    *
@@ -1015,36 +946,30 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @default 'Open'
    */
   openText: PropTypes.string,
-
   /**
    * Array of options.
    */
   options: PropTypes.array.isRequired,
-
   /**
    * The component used to render the body of the popup.
    * @default Paper
    */
   PaperComponent: PropTypes.elementType,
-
   /**
    * The component used to position the popup.
    * @default Popper
    */
   PopperComponent: PropTypes.elementType,
-
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
    */
   popupIcon: PropTypes.node,
-
   /**
    * If `true`, the component becomes readonly. It is also supported for multiple tags where the tag cannot be deleted.
    * @default false
    */
   readOnly: PropTypes.bool,
-
   /**
    * Render the group.
    *
@@ -1052,7 +977,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderGroup: PropTypes.func,
-
   /**
    * Render the input.
    *
@@ -1060,7 +984,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderInput: PropTypes.func.isRequired,
-
   /**
    * Render the option, use `getOptionLabel` by default.
    *
@@ -1070,7 +993,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderOption: PropTypes.func,
-
   /**
    * Render the selected value.
    *
@@ -1080,27 +1002,31 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,
-
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
    * @default !props.freeSolo
    */
   selectOnFocus: PropTypes.bool,
-
   /**
    * The size of the component.
    * @default 'medium'
    */
-  size: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
-
+  size: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    clearIndicator: PropTypes.object,
+    paper: PropTypes.object,
+    popper: PropTypes.object,
+    popupIndicator: PropTypes.object
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The value of the autocomplete.
    *
@@ -1111,7 +1037,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes
     if (props.multiple && props.value !== undefined && !Array.isArray(props.value)) {
       return new Error(['MUI: The Autocomplete expects the `value` prop to be an array when `multiple={true}` or undefined.', "However, ".concat(props.value, " was provided.")].join('\n'));
     }
-
     return null;
   })
 } : void 0;