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

package/Autocomplete/Autocomplete.js

@@ -1,11 +1,6 @@
 'use client';
 
-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", "slots", "slotProps", "value"],
-  _excluded2 = ["ref"],
-  _excluded3 = ["key"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -30,7 +25,6 @@ import autocompleteClasses, { getAutocompleteUtilityClass } from './autocomplete
 import capitalize from '../utils/capitalize';
 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');
 const useUtilityClasses = ownerState => {
   const {
@@ -266,7 +260,10 @@ const AutocompletePopupIndicator = styled(IconButton, {
   slot: 'PopupIndicator',
   overridesResolver: ({
     ownerState
-  }, styles) => _extends({}, styles.popupIndicator, ownerState.popupOpen && styles.popupIndicatorOpen)
+  }, styles) => ({
+    ...styles.popupIndicator,
+    ...(ownerState.popupOpen && styles.popupIndicatorOpen)
+  })
 })({
   padding: 2,
   marginRight: -2,
@@ -309,7 +306,8 @@ const AutocompletePaper = styled(Paper, {
   overridesResolver: (props, styles) => styles.paper
 })(({
   theme
-}) => _extends({}, theme.typography.body1, {
+}) => ({
+  ...theme.typography.body1,
   overflow: 'auto'
 }));
 const AutocompleteLoading = styled('div', {
@@ -420,59 +418,73 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
 
   /* eslint-disable @typescript-eslint/no-unused-vars */
   const {
-      autoComplete = false,
-      autoHighlight = false,
-      autoSelect = false,
-      blurOnSelect = false,
-      ChipProps: ChipPropsProp,
-      className,
-      clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
-        fontSize: "small"
-      })),
-      clearOnBlur = !props.freeSolo,
-      clearOnEscape = false,
-      clearText = 'Clear',
-      closeText = 'Close',
-      componentsProps,
-      defaultValue = props.multiple ? [] : null,
-      disableClearable = false,
-      disableCloseOnSelect = false,
-      disabled = false,
-      disabledItemsFocusable = false,
-      disableListWrap = false,
-      disablePortal = false,
-      filterSelectedOptions = false,
-      forcePopupIcon = 'auto',
-      freeSolo = false,
-      fullWidth = false,
-      getLimitTagsText = more => `+${more}`,
-      getOptionLabel: getOptionLabelProp,
-      groupBy,
-      handleHomeEndKeys = !props.freeSolo,
-      includeInputInList = false,
-      limitTags = -1,
-      ListboxComponent: ListboxComponentProp,
-      ListboxProps: ListboxPropsProp,
-      loading = false,
-      loadingText = 'Loading…',
-      multiple = false,
-      noOptionsText = 'No options',
-      openOnFocus = false,
-      openText = 'Open',
-      PaperComponent: PaperComponentProp,
-      PopperComponent: PopperComponentProp,
-      popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
-      readOnly = false,
-      renderGroup: renderGroupProp,
-      renderInput,
-      renderOption: renderOptionProp,
-      renderTags,
-      selectOnFocus = !props.freeSolo,
-      size = 'medium',
-      slots = {},
-      slotProps = {}
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    autoComplete = false,
+    autoHighlight = false,
+    autoSelect = false,
+    blurOnSelect = false,
+    ChipProps: ChipPropsProp,
+    className,
+    clearIcon = _ClearIcon || (_ClearIcon = /*#__PURE__*/_jsx(ClearIcon, {
+      fontSize: "small"
+    })),
+    clearOnBlur = !props.freeSolo,
+    clearOnEscape = false,
+    clearText = 'Clear',
+    closeText = 'Close',
+    componentsProps,
+    defaultValue = props.multiple ? [] : null,
+    disableClearable = false,
+    disableCloseOnSelect = false,
+    disabled = false,
+    disabledItemsFocusable = false,
+    disableListWrap = false,
+    disablePortal = false,
+    filterOptions,
+    filterSelectedOptions = false,
+    forcePopupIcon = 'auto',
+    freeSolo = false,
+    fullWidth = false,
+    getLimitTagsText = more => `+${more}`,
+    getOptionDisabled,
+    getOptionKey,
+    getOptionLabel: getOptionLabelProp,
+    isOptionEqualToValue,
+    groupBy,
+    handleHomeEndKeys = !props.freeSolo,
+    id: idProp,
+    includeInputInList = false,
+    inputValue: inputValueProp,
+    limitTags = -1,
+    ListboxComponent: ListboxComponentProp,
+    ListboxProps: ListboxPropsProp,
+    loading = false,
+    loadingText = 'Loading…',
+    multiple = false,
+    noOptionsText = 'No options',
+    onChange,
+    onClose,
+    onHighlightChange,
+    onInputChange,
+    onOpen,
+    open,
+    openOnFocus = false,
+    openText = 'Open',
+    options,
+    PaperComponent: PaperComponentProp,
+    PopperComponent: PopperComponentProp,
+    popupIcon = _ArrowDropDownIcon || (_ArrowDropDownIcon = /*#__PURE__*/_jsx(ArrowDropDownIcon, {})),
+    readOnly = false,
+    renderGroup: renderGroupProp,
+    renderInput,
+    renderOption: renderOptionProp,
+    renderTags,
+    selectOnFocus = !props.freeSolo,
+    size = 'medium',
+    slots = {},
+    slotProps = {},
+    value: valueProp,
+    ...other
+  } = props;
   /* eslint-enable @typescript-eslint/no-unused-vars */
 
   const {
@@ -495,24 +507,25 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     setAnchorEl,
     inputValue,
     groupedOptions
-  } = useAutocomplete(_extends({}, props, {
+  } = useAutocomplete({
+    ...props,
     componentName: 'Autocomplete'
-  }));
+  });
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
-  const _getListboxProps = getListboxProps(),
-    {
-      ref: listboxRef
-    } = _getListboxProps,
-    otherListboxProps = _objectWithoutPropertiesLoose(_getListboxProps, _excluded2);
+  const {
+    ref: listboxRef,
+    ...otherListboxProps
+  } = getListboxProps();
   const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
   // If you modify this, make sure to keep the `AutocompleteOwnerState` type in sync.
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     disablePortal,
     expanded,
     focused,
@@ -523,18 +536,21 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     inputFocused: focusedTag === -1,
     popupOpen,
     size
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const externalForwardedProps = {
-    slots: _extends({
+    slots: {
       listbox: ListboxComponentProp,
       paper: PaperComponentProp,
-      popper: PopperComponentProp
-    }, slots),
-    slotProps: _extends({
+      popper: PopperComponentProp,
+      ...slots
+    },
+    slotProps: {
       chip: ChipPropsProp,
-      listbox: ListboxPropsProp
-    }, componentsProps, slotProps)
+      listbox: ListboxPropsProp,
+      ...componentsProps,
+      ...slotProps
+    }
   };
   const [ListboxSlot, listboxProps] = useSlot('listbox', {
     elementType: 'ul',
@@ -567,25 +583,27 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   });
   let startAdornment;
   if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => _extends({
+    const getCustomizedTagProps = params => ({
       className: classes.tag,
-      disabled
-    }, getTagProps(params));
+      disabled,
+      ...getTagProps(params)
+    });
     if (renderTags) {
       startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
     } else {
       startAdornment = value.map((option, index) => {
-        const _getCustomizedTagProp = getCustomizedTagProps({
-            index
-          }),
-          {
-            key
-          } = _getCustomizedTagProp,
-          customTagProps = _objectWithoutPropertiesLoose(_getCustomizedTagProp, _excluded3);
-        return /*#__PURE__*/_jsx(Chip, _extends({
+        const {
+          key,
+          ...customTagProps
+        } = getCustomizedTagProps({
+          index
+        });
+        return /*#__PURE__*/_jsx(Chip, {
           label: getOptionLabel(option),
-          size: size
-        }, customTagProps, externalForwardedProps.slotProps.chip), key);
+          size: size,
+          ...customTagProps,
+          ...externalForwardedProps.slotProps.chip
+        }, key);
       });
     }
   }
@@ -614,9 +632,14 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const renderGroup = renderGroupProp || defaultRenderGroup;
   const defaultRenderOption = (props2, option) => {
     // Need to clearly apply key because of https://github.com/vercel/next.js/issues/55642
-    return /*#__PURE__*/_createElement("li", _extends({}, props2, {
-      key: props2.key
-    }), getOptionLabel(option));
+    const {
+      key,
+      ...otherProps
+    } = props2;
+    return /*#__PURE__*/_jsx("li", {
+      ...otherProps,
+      children: getOptionLabel(option)
+    }, key);
   };
   const renderOption = renderOptionProp || defaultRenderOption;
   const renderListOption = (option, index) => {
@@ -624,9 +647,10 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
       option,
       index
     });
-    return renderOption(_extends({}, optionProps, {
+    return renderOption({
+      ...optionProps,
       className: classes.option
-    }), option, {
+    }, option, {
       selected: optionProps['aria-selected'],
       index,
       inputValue
@@ -634,20 +658,20 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   };
   const clearIndicatorSlotProps = externalForwardedProps.slotProps.clearIndicator;
   const popupIndicatorSlotProps = externalForwardedProps.slotProps.popupIndicator;
-  const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, _extends({
-    as: PopperSlot
-  }, popperProps, {
-    children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
-      as: PaperSlot
-    }, paperProps, {
+  const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, {
+    as: PopperSlot,
+    ...popperProps,
+    children: /*#__PURE__*/_jsx(AutocompletePaper, {
+      as: PaperSlot,
+      ...paperProps,
       children: children
-    }))
-  }));
+    })
+  });
   let autocompletePopper = null;
   if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
-      as: ListboxSlot
-    }, listboxProps, {
+    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, {
+      as: ListboxSlot,
+      ...listboxProps,
       children: groupedOptions.map((option, index) => {
         if (groupBy) {
           return renderGroup({
@@ -658,7 +682,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
         }
         return renderListOption(option, index);
       })
-    })));
+    }));
   } else if (loading && groupedOptions.length === 0) {
     autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
       className: classes.loading,
@@ -678,18 +702,18 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }));
   }
   return /*#__PURE__*/_jsxs(React.Fragment, {
-    children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
+    children: [/*#__PURE__*/_jsx(AutocompleteRoot, {
       ref: ref,
       className: clsx(classes.root, className),
-      ownerState: ownerState
-    }, getRootProps(other), {
+      ownerState: ownerState,
+      ...getRootProps(other),
       children: renderInput({
         id,
         disabled,
         fullWidth: true,
         size: size === 'small' ? 'small' : undefined,
         InputLabelProps: getInputLabelProps(),
-        InputProps: _extends({
+        InputProps: {
           ref: setAnchorEl,
           className: classes.inputRoot,
           startAdornment,
@@ -697,36 +721,40 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             if (event.target === event.currentTarget) {
               handleInputMouseDown(event);
             }
-          }
-        }, (hasClearIcon || hasPopupIcon) && {
-          endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
-            className: classes.endAdornment,
-            ownerState: ownerState,
-            children: [hasClearIcon ? /*#__PURE__*/_jsx(AutocompleteClearIndicator, _extends({}, getClearProps(), {
-              "aria-label": clearText,
-              title: clearText,
-              ownerState: ownerState
-            }, clearIndicatorSlotProps, {
-              className: clsx(classes.clearIndicator, clearIndicatorSlotProps?.className),
-              children: clearIcon
-            })) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, _extends({}, getPopupIndicatorProps(), {
-              disabled: disabled,
-              "aria-label": popupOpen ? closeText : openText,
-              title: popupOpen ? closeText : openText,
-              ownerState: ownerState
-            }, popupIndicatorSlotProps, {
-              className: clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
-              children: popupIcon
-            })) : null]
+          },
+          ...((hasClearIcon || hasPopupIcon) && {
+            endAdornment: /*#__PURE__*/_jsxs(AutocompleteEndAdornment, {
+              className: classes.endAdornment,
+              ownerState: ownerState,
+              children: [hasClearIcon ? /*#__PURE__*/_jsx(AutocompleteClearIndicator, {
+                ...getClearProps(),
+                "aria-label": clearText,
+                title: clearText,
+                ownerState: ownerState,
+                ...clearIndicatorSlotProps,
+                className: clsx(classes.clearIndicator, clearIndicatorSlotProps?.className),
+                children: clearIcon
+              }) : null, hasPopupIcon ? /*#__PURE__*/_jsx(AutocompletePopupIndicator, {
+                ...getPopupIndicatorProps(),
+                disabled: disabled,
+                "aria-label": popupOpen ? closeText : openText,
+                title: popupOpen ? closeText : openText,
+                ownerState: ownerState,
+                ...popupIndicatorSlotProps,
+                className: clsx(classes.popupIndicator, popupIndicatorSlotProps?.className),
+                children: popupIcon
+              }) : null]
+            })
           })
-        }),
-        inputProps: _extends({
+        },
+        inputProps: {
           className: classes.input,
           disabled,
-          readOnly
-        }, getInputProps())
+          readOnly,
+          ...getInputProps()
+        }
       })
-    })), anchorEl ? autocompletePopper : null]
+    }), anchorEl ? autocompletePopper : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {

package/Avatar/Avatar.js

@@ -1,8 +1,5 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -69,15 +66,17 @@ const AvatarRoot = styled('div', {
     props: {
       colorDefault: true
     },
-    style: _extends({
-      color: (theme.vars || theme).palette.background.default
-    }, theme.vars ? {
-      backgroundColor: theme.vars.palette.Avatar.defaultBg
-    } : _extends({
-      backgroundColor: theme.palette.grey[400]
-    }, theme.applyStyles('dark', {
-      backgroundColor: theme.palette.grey[600]
-    })))
+    style: {
+      color: (theme.vars || theme).palette.background.default,
+      ...(theme.vars ? {
+        backgroundColor: theme.vars.palette.Avatar.defaultBg
+      } : {
+        backgroundColor: theme.palette.grey[400],
+        ...theme.applyStyles('dark', {
+          backgroundColor: theme.palette.grey[600]
+        })
+      })
+    }
   }]
 }));
 const AvatarImg = styled('img', {
@@ -147,33 +146,37 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     name: 'MuiAvatar'
   });
   const {
-      alt,
-      children: childrenProp,
-      className,
-      component = 'div',
-      slots = {},
-      slotProps = {},
-      imgProps,
-      sizes,
-      src,
-      srcSet,
-      variant = 'circular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    alt,
+    children: childrenProp,
+    className,
+    component = 'div',
+    slots = {},
+    slotProps = {},
+    imgProps,
+    sizes,
+    src,
+    srcSet,
+    variant = 'circular',
+    ...other
+  } = props;
   let children = null;
 
   // Use a hook instead of onError on the img element to support server-side rendering.
-  const loaded = useLoaded(_extends({}, imgProps, {
+  const loaded = useLoaded({
+    ...imgProps,
     src,
     srcSet
-  }));
+  });
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     colorDefault: !hasImgNotFailing,
     component,
     variant
-  });
+  };
+  // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
+  delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
   const [ImgSlot, imgSlotProps] = useSlot('img', {
     className: classes.img,
@@ -181,7 +184,10 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     externalForwardedProps: {
       slots,
       slotProps: {
-        img: _extends({}, imgProps, slotProps.img)
+        img: {
+          ...imgProps,
+          ...slotProps.img
+        }
       }
     },
     additionalProps: {
@@ -193,7 +199,9 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     ownerState
   });
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/_jsx(ImgSlot, _extends({}, imgSlotProps));
+    children = /*#__PURE__*/_jsx(ImgSlot, {
+      ...imgSlotProps
+    });
     // We only render valid children, non valid children are rendered with a fallback
     // We consider that invalid children are all falsy values, except 0, which is valid.
   } else if (!!childrenProp || childrenProp === 0) {
@@ -206,14 +214,14 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       className: classes.fallback
     });
   }
-  return /*#__PURE__*/_jsx(AvatarRoot, _extends({
+  return /*#__PURE__*/_jsx(AvatarRoot, {
     as: component,
-    ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐

package/AvatarGroup/AvatarGroup.d.ts

@@ -1,14 +1,40 @@
 import * as React from 'react';
-import { OverridableStringUnion } from '@mui/types';
+import {
+  OverridableComponent,
+  OverridableStringUnion,
+  OverrideProps,
+  PartiallyRequired,
+} from '@mui/types';
 import { SxProps } from '@mui/system';
-import { InternalStandardProps as StandardProps, Theme } from '@mui/material';
+import { Theme } from '@mui/material';
 import { AvatarGroupClasses } from './avatarGroupClasses';
 import Avatar from '../Avatar';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
 
 export interface AvatarGroupPropsVariantOverrides {}
 
 export interface AvatarGroupComponentsPropsOverrides {}
-export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTMLDivElement>> {
+
+export interface AvatarGroupSlots {
+  surplus?: React.ElementType;
+}
+
+export type AvatarGroupSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  AvatarGroupSlots,
+  {
+    /**
+     * @deprecated use `slotProps.surplus` instead. This prop will be removed in v7. See [Migrating from deprecated APIs](/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 {
   /**
    * The avatars to stack.
    */
@@ -27,9 +53,8 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * You can override the existing props or add new ones.
    *
    * This prop is an alias for the `slotProps` prop.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
    *
-   * @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?: {
     additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
@@ -46,18 +71,6 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * @returns {React.ReactNode} custom element to display
    */
   renderSurplus?: (surplus: number) => React.ReactNode;
-  /**
-   * The extra props for the slot components.
-   * You can override the existing props or add new ones.
-   *
-   * This prop is an alias for the `componentsProps` prop, which will be deprecated in the future.
-   *
-   * @default {}
-   */
-  slotProps?: {
-    additionalAvatar?: React.ComponentPropsWithRef<typeof Avatar> &
-      AvatarGroupComponentsPropsOverrides;
-  };
   /**
    * Spacing between avatars.
    * @default 'medium'
@@ -82,6 +95,14 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
   >;
 }
 
+export interface AvatarGroupTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'div',
+> {
+  props: AdditionalProps & AvatarGroupOwnProps;
+  defaultComponent: RootComponent;
+}
+
 /**
  *
  * Demos:
@@ -92,4 +113,16 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
  *
  * - [AvatarGroup API](https://mui.com/material-ui/api/avatar-group/)
  */
-export default function AvatarGroup(props: AvatarGroupProps): JSX.Element;
+declare const AvatarGroup: OverridableComponent<AvatarGroupTypeMap>;
+
+export type AvatarGroupProps<
+  RootComponent extends React.ElementType = AvatarGroupTypeMap['defaultComponent'],
+  AdditionalProps = {},
+> = OverrideProps<AvatarGroupTypeMap<AdditionalProps, RootComponent>, RootComponent> & {
+  component?: React.ElementType;
+};
+
+export interface AvatarGroupOwnerState
+  extends PartiallyRequired<AvatarGroupProps, 'max' | 'spacing' | 'component' | 'variant'> {}
+
+export default AvatarGroup;