@mui/material 9.0.0-alpha.2 → 9.0.0-alpha.4

package/Autocomplete/Autocomplete.mjs

@@ -3,7 +3,6 @@
 var _ClearIcon, _ArrowDropDownIcon;
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import clsx from 'clsx';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
@@ -406,7 +405,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     autoHighlight = false,
     autoSelect = false,
     blurOnSelect = false,
-    ChipProps: ChipPropsProp,
     className,
     clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
       fontSize: "small"
@@ -415,7 +413,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     clearOnEscape = false,
     clearText = 'Clear',
     closeText = 'Close',
-    componentsProps,
     defaultValue = props.multiple ? [] : null,
     disableClearable = false,
     disableCloseOnSelect = false,
@@ -439,8 +436,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     includeInputInList = false,
     inputValue: inputValueProp,
     limitTags = -1,
-    ListboxComponent: ListboxComponentProp,
-    ListboxProps: ListboxPropsProp,
     loading = false,
     loadingText = 'Loading…',
     multiple = false,
@@ -454,14 +449,11 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     openOnFocus = false,
     openText = 'Open',
     options,
-    PaperComponent: PaperComponentProp,
-    PopperComponent: PopperComponentProp,
     popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
     readOnly = false,
     renderGroup: renderGroupProp,
     renderInput,
     renderOption: renderOptionProp,
-    renderTags,
     renderValue,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
@@ -524,18 +516,20 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
-    slots: {
-      paper: PaperComponentProp,
-      popper: PopperComponentProp,
-      ...slots
-    },
-    slotProps: {
-      chip: ChipPropsProp,
-      listbox: ListboxPropsProp,
-      ...componentsProps,
-      ...slotProps
-    }
+    slots,
+    slotProps
   };
+  const [RootSlot, rootProps] = useSlot('root', {
+    ref,
+    className: [classes.root, className],
+    elementType: AutocompleteRoot,
+    externalForwardedProps: {
+      ...externalForwardedProps,
+      ...other
+    },
+    getSlotProps: getRootProps,
+    ownerState
+  });
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
     elementType: AutocompleteListbox,
     externalForwardedProps,
@@ -565,6 +559,31 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       open: popupOpen
     }
   });
+  const [ClearIndicatorSlot, clearIndicatorProps] = useSlot('clearIndicator', {
+    elementType: AutocompleteClearIndicator,
+    externalForwardedProps,
+    ownerState,
+    className: classes.clearIndicator,
+    shouldForwardComponentProp: true,
+    additionalProps: {
+      ...getClearProps(),
+      'aria-label': clearText,
+      title: clearText
+    }
+  });
+  const [PopupIndicatorSlot, popupIndicatorProps] = useSlot('popupIndicator', {
+    elementType: AutocompletePopupIndicator,
+    externalForwardedProps,
+    ownerState,
+    className: classes.popupIndicator,
+    shouldForwardComponentProp: true,
+    additionalProps: {
+      ...getPopupIndicatorProps(),
+      disabled,
+      'aria-label': popupOpen ? closeText : openText,
+      title: popupOpen ? closeText : openText
+    }
+  });
   let startAdornment;
   const getCustomizedItemProps = params => ({
     className: classes.tag,
@@ -573,9 +592,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   if (multiple) {
     if (value.length > 0) {
-      if (renderTags) {
-        startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
-      } else if (renderValue) {
+      if (renderValue) {
         startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
       } else {
         startAdornment = value.map((option, index) => {
@@ -646,59 +663,45 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       inputValue
     }, ownerState);
   };
-  const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
-  const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(AutocompleteRoot, {
-      ref: ref,
-      className: clsx(classes.root, className),
-      ownerState: ownerState,
-      ...getRootProps(other),
+    children: [/*#__PURE__*/_jsx(RootSlot, {
+      ...rootProps,
       children: renderInput({
         id,
         disabled,
         fullWidth: props.fullWidth ?? true,
         size: size === 'small' ? 'small' : undefined,
-        InputLabelProps: getInputLabelProps(),
-        InputProps: {
-          ref: setAnchorEl,
-          className: classes.inputRoot,
-          startAdornment,
-          onMouseDown: event => {
-            if (event.target === event.currentTarget) {
-              handleInputMouseDown(event);
-            }
-          },
-          ...((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,
+        slotProps: {
+          inputLabel: getInputLabelProps(),
+          input: {
+            ref: setAnchorEl,
+            className: classes.inputRoot,
+            startAdornment,
+            onMouseDown: event => {
+              if (event.target === event.currentTarget) {
+                handleInputMouseDown(event);
+              }
+            },
+            ...((hasClearIcon || hasPopupIcon) && {
+              endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
+                className: classes.endAdornment,
                 ownerState: ownerState,
-                ...popupIndicatorSlotProps,
-                className: clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
-                children: popupIcon
-              }) : null]
+                children: [hasClearIcon ? /*#__PURE__*/_jsx(ClearIndicatorSlot, {
+                  ...clearIndicatorProps,
+                  children: clearIcon
+                }) : null, hasPopupIcon ? /*#__PURE__*/_jsx(PopupIndicatorSlot, {
+                  ...popupIndicatorProps,
+                  children: popupIcon
+                }) : null]
+              })
             })
-          })
-        },
-        inputProps: {
-          className: classes.input,
-          disabled,
-          readOnly,
-          ...getInputProps()
+          },
+          htmlInput: {
+            className: classes.input,
+            disabled,
+            readOnly,
+            ...getInputProps()
+          }
         }
       })
     }), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
@@ -721,7 +724,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           },
           children: noOptionsText
         }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
-          as: ListboxComponentProp,
           ...listboxProps,
           children: groupedOptions.map((option, index) => {
             if (groupBy) {
@@ -775,11 +777,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default false
    */
   blurOnSelect: PropTypes.oneOfType([PropTypes.oneOf(['mouse', 'touch']), PropTypes.bool]),
-  /**
-   * Props applied to the [`Chip`](https://mui.com/material-ui/api/chip/) element.
-   * @deprecated Use `slotProps.chip` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  ChipProps: PropTypes.object,
   /**
    * Override or extend the styles applied to the component.
    */
@@ -820,16 +817,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default 'Close'
    */
   closeText: PropTypes.string,
-  /**
-   * The props used for each slot inside.
-   * @deprecated Use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps: PropTypes.shape({
-    clearIndicator: PropTypes.object,
-    paper: PropTypes.object,
-    popper: PropTypes.object,
-    popupIndicator: PropTypes.object
-  }),
   /**
    * The default value. Use when the component is not controlled.
    * @default props.multiple ? [] : null
@@ -978,17 +965,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @default -1
    */
   limitTags: integerPropType,
-  /**
-   * The component used to render the listbox.
-   * @default 'ul'
-   * @deprecated Use `slotProps.listbox.component` instead. This prop will be removed in a future major release. 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 a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  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, for example `options` are empty).
@@ -1078,18 +1054,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * A list of options that will be shown in the Autocomplete.
    */
   options: PropTypes.array.isRequired,
-  /**
-   * The component used to render the body of the popup.
-   * @default Paper
-   * @deprecated Use `slots.paper` instead. This prop will be removed in a future major release. 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 a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  PopperComponent: PropTypes.elementType,
   /**
    * The icon to display in place of the default popup icon.
    * @default <ArrowDropDownIcon />
@@ -1131,17 +1095,6 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderOption: PropTypes.func,
-  /**
-   * Render the selected value when doing multiple selections.
-   *
-   * @deprecated Use `renderValue` prop instead
-   *
-   * @param {Value[]} value The `value` provided to the component.
-   * @param {function} getTagProps A tag props getter.
-   * @param {object} ownerState The state of the Autocomplete component.
-   * @returns {ReactNode}
-   */
-  renderTags: PropTypes.func,
   /**
    * Renders the selected value(s) as rich content in the input for both single and multiple selections.
    *
@@ -1172,16 +1125,20 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
     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])
+    popupIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
+    clearIndicator: PropTypes.elementType,
     listbox: PropTypes.elementType,
     paper: PropTypes.elementType,
-    popper: PropTypes.elementType
+    popper: PropTypes.elementType,
+    popupIndicator: PropTypes.elementType,
+    root: PropTypes.elementType
   }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.

package/Avatar/Avatar.d.mts

@@ -59,14 +59,6 @@ export interface AvatarOwnProps {
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<AvatarClasses> | undefined;
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#attributes) applied to the `img` element if the component is used to display an image.
-   * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  imgProps?: (React.ImgHTMLAttributes<HTMLImageElement> & {
-    sx?: SxProps<Theme> | undefined;
-  }) | undefined;
   /**
    * The `sizes` attribute for the `img` element.
    */

package/Avatar/Avatar.d.ts

@@ -59,14 +59,6 @@ export interface AvatarOwnProps {
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<AvatarClasses> | undefined;
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#attributes) applied to the `img` element if the component is used to display an image.
-   * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  imgProps?: (React.ImgHTMLAttributes<HTMLImageElement> & {
-    sx?: SxProps<Theme> | undefined;
-  }) | undefined;
   /**
    * The `sizes` attribute for the `img` element.
    */

package/Avatar/Avatar.js

@@ -108,12 +108,7 @@ const AvatarFallback = (0, _zeroStyled.styled)(_Person.default, {
   width: '75%',
   height: '75%'
 });
-function useLoaded({
-  crossOrigin,
-  referrerPolicy,
-  src,
-  srcSet
-}) {
+function useLoaded(src, srcSet, crossOrigin, referrerPolicy) {
   const [loaded, setLoaded] = React.useState(false);
   React.useEffect(() => {
     if (!src && !srcSet) {
@@ -158,7 +153,6 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     component = 'div',
     slots = {},
     slotProps = {},
-    imgProps,
     sizes,
     src,
     srcSet,
@@ -171,27 +165,28 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     component,
     variant
   };
-
+  const {
+    crossOrigin,
+    referrerPolicy
+  } = (typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img) ?? {};
   // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded({
-    ...imgProps,
-    ...(typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img),
-    src,
-    srcSet
-  });
+  const loaded = useLoaded(src, srcSet, crossOrigin, referrerPolicy);
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
   ownerState.colorDefault = !hasImgNotFailing;
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
     ref,
     className: (0, _clsx.default)(classes.root, className),
     elementType: AvatarRoot,
     externalForwardedProps: {
-      slots,
-      slotProps,
+      ...externalForwardedProps,
       component,
       ...other
     },
@@ -200,15 +195,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   const [ImgSlot, imgSlotProps] = (0, _useSlot.default)('img', {
     className: classes.img,
     elementType: AvatarImg,
-    externalForwardedProps: {
-      slots,
-      slotProps: {
-        img: {
-          ...imgProps,
-          ...slotProps.img
-        }
-      }
-    },
+    externalForwardedProps,
     additionalProps: {
       alt,
       src,
@@ -220,10 +207,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   const [FallbackSlot, fallbackSlotProps] = (0, _useSlot.default)('fallback', {
     className: classes.fallback,
     elementType: AvatarFallback,
-    externalForwardedProps: {
-      slots,
-      slotProps
-    },
+    externalForwardedProps,
     shouldForwardComponentProp: true,
     ownerState
   });
@@ -275,12 +259,6 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#attributes) applied to the `img` element if the component is used to display an image.
-   * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  imgProps: _propTypes.default.object,
   /**
    * The `sizes` attribute for the `img` element.
    */

package/Avatar/Avatar.mjs

@@ -101,12 +101,7 @@ const AvatarFallback = styled(Person, {
   width: '75%',
   height: '75%'
 });
-function useLoaded({
-  crossOrigin,
-  referrerPolicy,
-  src,
-  srcSet
-}) {
+function useLoaded(src, srcSet, crossOrigin, referrerPolicy) {
   const [loaded, setLoaded] = React.useState(false);
   React.useEffect(() => {
     if (!src && !srcSet) {
@@ -151,7 +146,6 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     component = 'div',
     slots = {},
     slotProps = {},
-    imgProps,
     sizes,
     src,
     srcSet,
@@ -164,27 +158,28 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     component,
     variant
   };
-
+  const {
+    crossOrigin,
+    referrerPolicy
+  } = (typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img) ?? {};
   // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded({
-    ...imgProps,
-    ...(typeof slotProps.img === 'function' ? slotProps.img(ownerState) : slotProps.img),
-    src,
-    srcSet
-  });
+  const loaded = useLoaded(src, srcSet, crossOrigin, referrerPolicy);
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
   ownerState.colorDefault = !hasImgNotFailing;
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
+  const externalForwardedProps = {
+    slots,
+    slotProps
+  };
   const [RootSlot, rootSlotProps] = useSlot('root', {
     ref,
     className: clsx(classes.root, className),
     elementType: AvatarRoot,
     externalForwardedProps: {
-      slots,
-      slotProps,
+      ...externalForwardedProps,
       component,
       ...other
     },
@@ -193,15 +188,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   const [ImgSlot, imgSlotProps] = useSlot('img', {
     className: classes.img,
     elementType: AvatarImg,
-    externalForwardedProps: {
-      slots,
-      slotProps: {
-        img: {
-          ...imgProps,
-          ...slotProps.img
-        }
-      }
-    },
+    externalForwardedProps,
     additionalProps: {
       alt,
       src,
@@ -213,10 +200,7 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   const [FallbackSlot, fallbackSlotProps] = useSlot('fallback', {
     className: classes.fallback,
     elementType: AvatarFallback,
-    externalForwardedProps: {
-      slots,
-      slotProps
-    },
+    externalForwardedProps,
     shouldForwardComponentProp: true,
     ownerState
   });
@@ -268,12 +252,6 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-  /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/img#attributes) applied to the `img` element if the component is used to display an image.
-   * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  imgProps: PropTypes.object,
   /**
    * The `sizes` attribute for the `img` element.
    */

package/AvatarGroup/AvatarGroup.d.mts

@@ -11,10 +11,6 @@ export interface AvatarGroupSlots {
   surplus: React.ElementType;
 }
 export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<AvatarGroupSlots, {
-  /**
-   * @deprecated use `slotProps.surplus` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *  */
-  additionalAvatar: React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides;
   surplus: SlotProps<React.ElementType<React.ComponentPropsWithRef<typeof Avatar>>, AvatarGroupComponentsPropsOverrides, AvatarGroupOwnerState>;
 }>;
 export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
@@ -31,17 +27,6 @@ export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
    * Either a string to use a HTML element or a component.
    */
   component?: React.ElementType | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps?: {
-    additionalAvatar?: (React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides) | undefined;
-  } | undefined;
   /**
    * Max avatars to show before +x.
    * @default 5

package/AvatarGroup/AvatarGroup.d.ts

@@ -11,10 +11,6 @@ export interface AvatarGroupSlots {
   surplus: React.ElementType;
 }
 export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<AvatarGroupSlots, {
-  /**
-   * @deprecated use `slotProps.surplus` instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   *  */
-  additionalAvatar: React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides;
   surplus: SlotProps<React.ElementType<React.ComponentPropsWithRef<typeof Avatar>>, AvatarGroupComponentsPropsOverrides, AvatarGroupOwnerState>;
 }>;
 export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
@@ -31,17 +27,6 @@ export interface AvatarGroupOwnProps extends AvatarGroupSlotsAndSlotProps {
    * Either a string to use a HTML element or a component.
    */
   component?: React.ElementType | undefined;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps?: {
-    additionalAvatar?: (React.ComponentPropsWithRef<typeof Avatar> & AvatarGroupComponentsPropsOverrides) | undefined;
-  } | undefined;
   /**
    * Max avatars to show before +x.
    * @default 5

package/AvatarGroup/AvatarGroup.js

@@ -65,7 +65,6 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     children: childrenProp,
     className,
     component = 'div',
-    componentsProps,
     max = 5,
     renderSurplus,
     slotProps = {},
@@ -110,11 +109,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   }
   const externalForwardedProps = {
     slots,
-    slotProps: {
-      surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
-      ...componentsProps,
-      ...slotProps
-    }
+    slotProps
   };
   const [SurplusSlot, surplusProps] = (0, _useSlot.default)('surplus', {
     elementType: _Avatar.default,
@@ -169,17 +164,6 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * Either a string to use a HTML element or a component.
    */
   component: _propTypes.default.elementType,
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `slotProps` prop.
-   *
-   * @deprecated use the `slotProps` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
-   */
-  componentsProps: _propTypes.default.shape({
-    additionalAvatar: _propTypes.default.object
-  }),
   /**
    * Max avatars to show before +x.
    * @default 5
@@ -201,7 +185,6 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * @default {}
    */
   slotProps: _propTypes.default.shape({
-    additionalAvatar: _propTypes.default.object,
     surplus: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
   }),
   /**