@mui/material 6.0.0-alpha.5 → 6.0.0-alpha.7

package/Accordion/Accordion.d.ts

@@ -79,7 +79,7 @@ export type AccordionTypeMap<
       /**
        * The component used for the transition.
        * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-       * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+       * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
        */
       TransitionComponent?: React.JSXElementConstructor<
         TransitionProps & { children?: React.ReactElement<any, any> }
@@ -87,7 +87,7 @@ export type AccordionTypeMap<
       /**
        * Props applied to the transition element.
        * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-       * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+       * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
        */
       TransitionProps?: TransitionProps;
     } & AccordionSlotsAndSlotProps;

package/Accordion/Accordion.js

@@ -282,13 +282,13 @@ process.env.NODE_ENV !== "production" ? Accordion.propTypes /* remove-proptypes
   /**
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionComponent: PropTypes.elementType,
   /**
    * Props applied to the transition element.
    * By default, the element is based on this [`Transition`](https://reactcommunity.org/react-transition-group/transition/) component.
-   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated Use `slotProps.transition` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   TransitionProps: PropTypes.object
 } : void 0;

package/AccordionSummary/accordionSummaryClasses.d.ts

@@ -11,7 +11,7 @@ export interface AccordionSummaryClasses {
     gutters: string;
     /**
      * Styles applied to the children wrapper element unless `disableGutters={true}`.
-     * @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * @deprecated Combine the [.MuiAccordionSummary-gutters](/material-ui/api/accordion-summary/#AccordionSummary-classes-gutters) and [.MuiAccordionSummary-content](/material-ui/api/accordion-summary/#AccordionSummary-classes-content) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     contentGutters: string;
     /** Styles applied to the children wrapper element. */

package/Alert/Alert.d.ts

@@ -58,7 +58,7 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'>, AlertS
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -70,7 +70,7 @@ export interface AlertProps extends StandardProps<PaperProps, 'variant'>, AlertS
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/Alert/Alert.js

@@ -264,7 +264,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
   /**
    * The components used for each slot inside.
    *
-   * @deprecated use the `slots` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slots` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */
@@ -276,7 +276,7 @@ process.env.NODE_ENV !== "production" ? Alert.propTypes /* remove-proptypes */ =
    * The extra props for the slot components.
    * You can override the existing props or add new ones.
    *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+   * @deprecated use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    *
    * @default {}
    */

package/Alert/alertClasses.d.ts

@@ -18,73 +18,73 @@ export interface AlertClasses {
     /** Styles applied to the root element if `variant="standard"` and `color="success"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardSuccess: string;
     /** Styles applied to the root element if `variant="standard"` and `color="info"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardInfo: string;
     /** Styles applied to the root element if `variant="standard"` and `color="warning"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardWarning: string;
     /** Styles applied to the root element if `variant="standard"` and `color="error"`.
      * @deprecated Combine the [.MuiAlert-standard](/material-ui/api/alert/#alert-classes-standard)
      * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     standardError: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="success"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedSuccess: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="info"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedInfo: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="warning"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedWarning: string;
     /** Styles applied to the root element if `variant="outlined"` and `color="error"`.
      * @deprecated Combine the [.MuiAlert-outlined](/material-ui/api/alert/#alert-classes-outlined)
      * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     outlinedError: string;
     /** Styles applied to the root element if `variant="filled"` and `color="success"`.
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorSuccess](/material-ui/api/alert/#alert-classes-colorSuccess) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledSuccess: string;
     /** Styles applied to the root element if `variant="filled"` and `color="info"`.
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorInfo](/material-ui/api/alert/#alert-classes-colorInfo) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledInfo: string;
     /** Styles applied to the root element if `variant="filled"` and `color="warning"`
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorWarning](/material-ui/api/alert/#alert-classes-colorWarning) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledWarning: string;
     /** Styles applied to the root element if `variant="filled"` and `color="error"`.
      * @deprecated Combine the [.MuiAlert-filled](/material-ui/api/alert/#alert-classes-filled)
      * and [.MuiAlert-colorError](/material-ui/api/alert/#alert-classes-colorError) classes instead.
-     * [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
+     * See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
      */
     filledError: string;
     /** Styles applied to the icon wrapper element. */

package/Autocomplete/Autocomplete.d.ts

@@ -17,6 +17,7 @@ import { ChipProps, ChipTypeMap } from '@mui/material/Chip';
 import { PaperProps } from '@mui/material/Paper';
 import { PopperProps } from '@mui/material/Popper';
 import { AutocompleteClasses } from './autocompleteClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export {
   AutocompleteChangeDetails,
@@ -84,6 +85,75 @@ export interface AutocompleteRenderInputParams {
 
 export interface AutocompletePropsSizeOverrides {}
 
+export interface AutocompleteSlots {
+  /**
+   * The component used to render the listbox.
+   * @default 'ul'
+   */
+  listbox?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
+  /**
+   * The component used to render the body of the popup.
+   * @default Paper
+   */
+  paper?: React.JSXElementConstructor<PaperProps>;
+  /**
+   * The component used to position the popup.
+   * @default Popper
+   */
+  popper?: React.JSXElementConstructor<PopperProps>;
+}
+
+export type AutocompleteSlotsAndSlotProps<
+  Value,
+  Multiple extends boolean | undefined,
+  DisableClearable extends boolean | undefined,
+  FreeSolo extends boolean | undefined,
+  ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
+> = CreateSlotsAndSlotProps<
+  AutocompleteSlots,
+  {
+    chip: SlotProps<
+      React.ElementType<Partial<ChipProps<ChipComponent>>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    clearIndicator: SlotProps<
+      React.ElementType<Partial<IconButtonProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    /**
+     * Props applied to the Listbox element.
+     */
+    listbox: SlotProps<
+      React.ElementType<
+        ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
+          sx?: SxProps<Theme>;
+          ref?: React.Ref<Element>;
+        }
+      >,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+
+    paper: SlotProps<
+      React.ElementType<Partial<PaperProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    popper: SlotProps<
+      React.ElementType<Partial<PopperProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+    popupIndicator: SlotProps<
+      React.ElementType<Partial<IconButtonProps>>,
+      {},
+      AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>
+    >;
+  }
+>;
+
 export interface AutocompleteProps<
   Value,
   Multiple extends boolean | undefined,
@@ -91,9 +161,11 @@ export interface AutocompleteProps<
   FreeSolo extends boolean | undefined,
   ChipComponent extends React.ElementType = ChipTypeMap['defaultComponent'],
 > extends UseAutocompleteProps<Value, Multiple, DisableClearable, FreeSolo>,
-    StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
+    StandardProps<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'>,
+    AutocompleteSlotsAndSlotProps<Value, Multiple, DisableClearable, FreeSolo, ChipComponent> {
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
+   * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ChipProps?: ChipProps<ChipComponent>;
   /**
@@ -121,7 +193,7 @@ export interface AutocompleteProps<
   closeText?: string;
   /**
    * The props used for each slot inside.
-   * @default {}
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps?: {
     clearIndicator?: Partial<IconButtonProps>;
@@ -160,10 +232,12 @@ export interface AutocompleteProps<
   /**
    * The component used to render the listbox.
    * @default 'ul'
+   * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
   /**
    * Props applied to the Listbox element.
+   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxProps?: ReturnType<ReturnType<typeof useAutocomplete>['getListboxProps']> & {
     sx?: SxProps<Theme>;
@@ -208,11 +282,13 @@ export interface AutocompleteProps<
   /**
    * The component used to render the body of the popup.
    * @default Paper
+   * @deprecated Use `slots.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent?: React.JSXElementConstructor<React.HTMLAttributes<HTMLElement>>;
   /**
    * The component used to position the popup.
    * @default Popper
+   * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PopperComponent?: React.JSXElementConstructor<PopperProps>;
   /**
@@ -272,16 +348,6 @@ export interface AutocompleteProps<
    * @default 'medium'
    */
   size?: OverridableStringUnion<'small' | 'medium', AutocompletePropsSizeOverrides>;
-  /**
-   * The props used for each slot inside.
-   * @default {}
-   */
-  slotProps?: {
-    clearIndicator?: Partial<IconButtonProps>;
-    paper?: PaperProps;
-    popper?: Partial<PopperProps>;
-    popupIndicator?: Partial<IconButtonProps>;
-  };
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/Autocomplete/Autocomplete.js

@@ -3,8 +3,9 @@
 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", "getOptionKey", "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"],
-  _excluded2 = ["ref"];
+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", "getOptionKey", "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", "slots", "slotProps", "value"],
+  _excluded2 = ["ref"],
+  _excluded3 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -27,7 +28,7 @@ import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown';
 import { styled, createUseThemeProps } from '../zero-styled';
 import autocompleteClasses, { getAutocompleteUtilityClass } from './autocompleteClasses';
 import capitalize from '../utils/capitalize';
-import useForkRef from '../utils/useForkRef';
+import useSlot from '../utils/useSlot';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { createElement as _createElement } from "react";
 const useThemeProps = createUseThemeProps('MuiAutocomplete');
@@ -90,21 +91,11 @@ const AutocompleteRoot = styled('div', {
     }, styles.root, fullWidth && styles.fullWidth, hasPopupIcon && styles.hasPopupIcon, hasClearIcon && styles.hasClearIcon];
   }
 })({
-  [`&.${autocompleteClasses.focused} .${autocompleteClasses.clearIndicator}`]: {
-    visibility: 'visible'
-  },
-  /* Avoid double tap issue on iOS */
-  '@media (pointer: fine)': {
-    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
-      visibility: 'visible'
-    }
-  },
   [`& .${autocompleteClasses.tag}`]: {
     margin: 3,
     maxWidth: 'calc(100% - 6px)'
   },
   [`& .${autocompleteClasses.inputRoot}`]: {
-    flexWrap: 'wrap',
     [`.${autocompleteClasses.hasPopupIcon}&, .${autocompleteClasses.hasClearIcon}&`]: {
       paddingRight: 26 + 4
     },
@@ -116,6 +107,23 @@ const AutocompleteRoot = styled('div', {
       minWidth: 30
     }
   },
+  [`&.${autocompleteClasses.focused}`]: {
+    [`& .${autocompleteClasses.clearIndicator}`]: {
+      visibility: 'visible'
+    },
+    [`& .${autocompleteClasses.input}`]: {
+      minWidth: 0
+    }
+  },
+  /* Avoid double tap issue on iOS */
+  '@media (pointer: fine)': {
+    [`&:hover .${autocompleteClasses.clearIndicator}`]: {
+      visibility: 'visible'
+    },
+    [`&:hover .${autocompleteClasses.input}`]: {
+      minWidth: 0
+    }
+  },
   [`& .${inputClasses.root}`]: {
     paddingBottom: 1,
     '& .MuiInput-input': {
@@ -222,6 +230,15 @@ const AutocompleteRoot = styled('div', {
         opacity: 1
       }
     }
+  }, {
+    props: {
+      multiple: true
+    },
+    style: {
+      [`& .${autocompleteClasses.inputRoot}`]: {
+        flexWrap: 'wrap'
+      }
+    }
   }]
 });
 const AutocompleteEndAdornment = styled('div', {
@@ -407,7 +424,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       autoHighlight = false,
       autoSelect = false,
       blurOnSelect = false,
-      ChipProps,
+      ChipProps: ChipPropsProp,
       className,
       clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
         fontSize: "small"
@@ -416,7 +433,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       clearOnEscape = false,
       clearText = 'Clear',
       closeText = 'Close',
-      componentsProps = {},
+      componentsProps,
       defaultValue = props.multiple ? [] : null,
       disableClearable = false,
       disableCloseOnSelect = false,
@@ -434,16 +451,16 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       handleHomeEndKeys = !props.freeSolo,
       includeInputInList = false,
       limitTags = -1,
-      ListboxComponent = 'ul',
-      ListboxProps,
+      ListboxComponent: ListboxComponentProp,
+      ListboxProps: ListboxPropsProp,
       loading = false,
       loadingText = 'Loading…',
       multiple = false,
       noOptionsText = 'No options',
       openOnFocus = false,
       openText = 'Open',
-      PaperComponent = Paper,
-      PopperComponent = Popper,
+      PaperComponent: PaperComponentProp,
+      PopperComponent: PopperComponentProp,
       popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
       readOnly = false,
       renderGroup: renderGroupProp,
@@ -452,6 +469,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       renderTags,
       selectOnFocus = !props.freeSolo,
       size = 'medium',
+      slots = {},
       slotProps = {}
     } = props,
     other = _objectWithoutPropertiesLoose(props, _excluded);
@@ -485,15 +503,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
-  const {
-    ref: externalListboxRef
-  } = ListboxProps ?? {};
   const _getListboxProps = getListboxProps(),
     {
       ref: listboxRef
     } = _getListboxProps,
     otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2);
-  const combinedListboxRef = useForkRef(listboxRef, externalListboxRef);
   const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
@@ -511,6 +525,46 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     size
   });
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots: _extends({
+      listbox: ListboxComponentProp,
+      paper: PaperComponentProp,
+      popper: PopperComponentProp
+    }, slots),
+    slotProps: _extends({
+      chip: ChipPropsProp,
+      listbox: ListboxPropsProp
+    }, componentsProps, slotProps)
+  };
+  const [ListboxSlot, listboxProps] = useSlot('listbox', {
+    elementType: 'ul',
+    externalForwardedProps,
+    ownerState,
+    className: classes.listbox,
+    additionalProps: otherListboxProps,
+    ref: listboxRef
+  });
+  const [PaperSlot, paperProps] = useSlot('paper', {
+    elementType: Paper,
+    externalForwardedProps,
+    ownerState,
+    className: classes.paper
+  });
+  const [PopperSlot, popperProps] = useSlot('popper', {
+    elementType: Popper,
+    externalForwardedProps,
+    ownerState,
+    className: classes.popper,
+    additionalProps: {
+      disablePortal,
+      style: {
+        width: anchorEl ? anchorEl.clientWidth : null
+      },
+      role: 'presentation',
+      anchorEl,
+      open: popupOpen
+    }
+  });
   let startAdornment;
   if (multiple && value.length > 0) {
     const getCustomizedTagProps = params => _extends({
@@ -520,12 +574,19 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
-      startAdornment = value.map((option, index) => /*#__PURE__*/_jsx(Chip, _extends({
-        label: getOptionLabel(option),
-        size: size
-      }, getCustomizedTagProps({
-        index
-      }), ChipProps)));
+      startAdornment = value.map((option, index) => {
+        const _getCustomizedTagProp = getCustomizedTagProps({
+            index
+          }),
+          {
+            key
+          } = _getCustomizedTagProp,
+          customTagProps = _objectWithoutPropertiesLoose(_getCustomizedTagProp, _excluded3);
+        return /*#__PURE__*/_jsx(Chip, _extends({
+          label: getOptionLabel(option),
+          size: size
+        }, customTagProps, externalForwardedProps.slotProps.chip), key);
+      });
     }
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
@@ -571,38 +632,22 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       inputValue
     }, ownerState);
   };
-  const clearIndicatorSlotProps = slotProps.clearIndicator ?? componentsProps.clearIndicator;
-  const paperSlotProps = slotProps.paper ?? componentsProps.paper;
-  const popperSlotProps = slotProps.popper ?? componentsProps.popper;
-  const popupIndicatorSlotProps = slotProps.popupIndicator ?? componentsProps.popupIndicator;
+  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
+  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
   const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, _extends({
-    as: PopperComponent,
-    disablePortal: disablePortal,
-    style: {
-      width: anchorEl ? anchorEl.clientWidth : null
-    },
-    ownerState: ownerState,
-    role: "presentation",
-    anchorEl: anchorEl,
-    open: popupOpen
-  }, popperSlotProps, {
-    className: clsx(classes.popper, popperSlotProps?.className),
+    as: PopperSlot
+  }, popperProps, {
     children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
-      ownerState: ownerState,
-      as: PaperComponent
-    }, paperSlotProps, {
-      className: clsx(classes.paper, paperSlotProps?.className),
+      as: PaperSlot
+    }, paperProps, {
       children: children
     }))
   }));
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
-      as: ListboxComponent,
-      className: classes.listbox,
-      ownerState: ownerState
-    }, otherListboxProps, ListboxProps, {
-      ref: combinedListboxRef,
+      as: ListboxSlot
+    }, listboxProps, {
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
           return renderGroup({
@@ -723,6 +768,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
   /**
    * Props applied to the [`Chip`](/material-ui/api/chip/) element.
+   * @deprecated Use `slotProps.chip` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ChipProps: PropTypes.object,
   /**
@@ -767,7 +813,7 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   closeText: PropTypes.string,
   /**
    * The props used for each slot inside.
-   * @default {}
+   * @deprecated Use the `slotProps` prop instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   componentsProps: PropTypes.shape({
     clearIndicator: PropTypes.object,
@@ -925,10 +971,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * The component used to render the listbox.
    * @default 'ul'
+   * @deprecated Use `slots.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxComponent: PropTypes.elementType,
   /**
    * Props applied to the Listbox element.
+   * @deprecated Use `slotProps.listbox` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   ListboxProps: PropTypes.object,
   /**
@@ -1023,11 +1071,13 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
   /**
    * The component used to render the body of the popup.
    * @default Paper
+   * @deprecated Use `slots.paper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PaperComponent: PropTypes.elementType,
   /**
    * The component used to position the popup.
    * @default Popper
+   * @deprecated Use `slots.popper` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
    */
   PopperComponent: PropTypes.elementType,
   /**
@@ -1088,11 +1138,22 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * The props used for each slot inside.
    * @default {}
    */
-  slotProps: PropTypes.shape({
-    clearIndicator: PropTypes.object,
-    paper: PropTypes.object,
-    popper: PropTypes.object,
-    popupIndicator: PropTypes.object
+  slotProps: PropTypes /* @typescript-to-proptypes-ignore */.shape({
+    chip: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    clearIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    listbox: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    paper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    popper: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    listbox: PropTypes.elementType,
+    paper: PropTypes.elementType,
+    popper: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.