@mui/material 7.0.1 → 7.1.0

package/TextareaAutosize/TextareaAutosize.js

@@ -9,7 +9,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _debounce = _interopRequireDefault(require("@mui/utils/debounce"));
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
+var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallback"));
+var _ownerWindow = _interopRequireDefault(require("@mui/utils/ownerWindow"));
 var _jsxRuntime = require("react/jsx-runtime");
 function getStyleValue(value) {
   return parseInt(value, 10) || 0;
@@ -63,7 +67,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
     current: isControlled
   } = React.useRef(value != null);
   const textareaRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(forwardedRef, textareaRef);
+  const handleRef = (0, _useForkRef.default)(forwardedRef, textareaRef);
   const heightRef = React.useRef(null);
   const hiddenTextareaRef = React.useRef(null);
   const calculateTextareaStyles = React.useCallback(() => {
@@ -72,7 +76,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
     if (!textarea || !hiddenTextarea) {
       return undefined;
     }
-    const containerWindow = (0, _utils.unstable_ownerWindow)(textarea);
+    const containerWindow = (0, _ownerWindow.default)(textarea);
     const computedStyle = containerWindow.getComputedStyle(textarea);
 
     // If input's width is shrunk and it's not visible, don't sync height.
@@ -119,7 +123,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       overflowing
     };
   }, [maxRows, minRows, props.placeholder]);
-  const didHeightChange = (0, _utils.unstable_useEventCallback)(() => {
+  const didHeightChange = (0, _useEventCallback.default)(() => {
     const textarea = textareaRef.current;
     const textareaStyles = calculateTextareaStyles();
     if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
@@ -142,13 +146,13 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
     textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
   }, [calculateTextareaStyles]);
   const frameRef = React.useRef(-1);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
-    const debouncedHandleResize = (0, _utils.unstable_debounce)(syncHeight);
+  (0, _useEnhancedEffect.default)(() => {
+    const debouncedHandleResize = (0, _debounce.default)(syncHeight);
     const textarea = textareaRef?.current;
     if (!textarea) {
       return undefined;
     }
-    const containerWindow = (0, _utils.unstable_ownerWindow)(textarea);
+    const containerWindow = (0, _ownerWindow.default)(textarea);
     containerWindow.addEventListener('resize', debouncedHandleResize);
     let resizeObserver;
     if (typeof ResizeObserver !== 'undefined') {
@@ -176,13 +180,22 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       }
     };
   }, [calculateTextareaStyles, syncHeight, didHeightChange]);
-  (0, _utils.unstable_useEnhancedEffect)(() => {
+  (0, _useEnhancedEffect.default)(() => {
     syncHeight();
   });
   const handleChange = event => {
     if (!isControlled) {
       syncHeight();
     }
+    const textarea = event.target;
+    const countOfCharacters = textarea.value.length;
+    const isLastCharacterNewLine = textarea.value.endsWith('\n');
+    const isEndOfTheLine = textarea.selectionStart === countOfCharacters;
+
+    // Set the cursor position to the very end of the text.
+    if (isLastCharacterNewLine && isEndOfTheLine) {
+      textarea.setSelectionRange(countOfCharacters, countOfCharacters);
+    }
     if (onChange) {
       onChange(event);
     }

package/Tooltip/Tooltip.js

@@ -277,8 +277,7 @@ const TooltipTooltip = (0, _zeroStyled.styled)('div', {
 })));
 const TooltipArrow = (0, _zeroStyled.styled)('span', {
   name: 'MuiTooltip',
-  slot: 'Arrow',
-  overridesResolver: (props, styles) => styles.arrow
+  slot: 'Arrow'
 })((0, _memoTheme.default)(({
   theme
 }) => ({

package/Unstable_TrapFocus/FocusTrap.js

@@ -10,7 +10,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _utils = require("@mui/utils");
+var _useForkRef = _interopRequireDefault(require("@mui/utils/useForkRef"));
+var _ownerDocument = _interopRequireDefault(require("@mui/utils/ownerDocument"));
+var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
+var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
+var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _jsxRuntime = require("react/jsx-runtime");
 // Inspired by https://github.com/focus-trap/tabbable
 const candidatesSelector = ['input', 'select', 'textarea', 'a[href]', 'button', '[tabindex]', 'audio[controls]', 'video[controls]', '[contenteditable]:not([contenteditable="false"])'].join(',');
@@ -99,7 +103,7 @@ function FocusTrap(props) {
   // It waits for the active element to move into the component to activate.
   const activated = React.useRef(false);
   const rootRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)((0, _utils.unstable_getReactElementRef)(children), rootRef);
+  const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), rootRef);
   const lastKeydown = React.useRef(null);
   React.useEffect(() => {
     // We might render an empty child.
@@ -113,7 +117,7 @@ function FocusTrap(props) {
     if (!open || !rootRef.current) {
       return;
     }
-    const doc = (0, _utils.unstable_ownerDocument)(rootRef.current);
+    const doc = (0, _ownerDocument.default)(rootRef.current);
     if (!rootRef.current.contains(doc.activeElement)) {
       if (!rootRef.current.hasAttribute('tabIndex')) {
         if (process.env.NODE_ENV !== 'production') {
@@ -148,7 +152,7 @@ function FocusTrap(props) {
     if (!open || !rootRef.current) {
       return;
     }
-    const doc = (0, _utils.unstable_ownerDocument)(rootRef.current);
+    const doc = (0, _ownerDocument.default)(rootRef.current);
     const loopFocus = nativeEvent => {
       lastKeydown.current = nativeEvent;
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
@@ -283,7 +287,7 @@ process.env.NODE_ENV !== "production" ? FocusTrap.propTypes /* remove-proptypes
   /**
    * A single child content element.
    */
-  children: _utils.elementAcceptingRef,
+  children: _elementAcceptingRef.default,
   /**
    * If `true`, the focus trap will not automatically shift focus to itself when it opens, and
    * replace it to the last focused element when it closes.
@@ -331,6 +335,6 @@ process.env.NODE_ENV !== "production" ? FocusTrap.propTypes /* remove-proptypes
 } : void 0;
 if (process.env.NODE_ENV !== 'production') {
   // eslint-disable-next-line
-  FocusTrap['propTypes' + ''] = (0, _utils.exactProp)(FocusTrap.propTypes);
+  FocusTrap['propTypes' + ''] = (0, _exactProp.default)(FocusTrap.propTypes);
 }
 var _default = exports.default = FocusTrap;

package/className/index.d.ts

@@ -1 +1 @@
-export { unstable_ClassNameGenerator } from '@mui/utils';
+export { default as unstable_ClassNameGenerator } from '@mui/utils/ClassNameGenerator';

package/className/index.js

@@ -1,12 +1,13 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 Object.defineProperty(exports, "unstable_ClassNameGenerator", {
   enumerable: true,
   get: function () {
-    return _utils.unstable_ClassNameGenerator;
+    return _ClassNameGenerator.default;
   }
 });
-var _utils = require("@mui/utils");
+var _ClassNameGenerator = _interopRequireDefault(require("@mui/utils/ClassNameGenerator"));

package/esm/Accordion/Accordion.js

@@ -121,8 +121,7 @@ const AccordionRoot = styled(Paper, {
 })));
 const AccordionHeading = styled('h3', {
   name: 'MuiAccordion',
-  slot: 'Heading',
-  overridesResolver: (props, styles) => styles.heading
+  slot: 'Heading'
 })({
   all: 'unset'
 });

package/esm/AccordionDetails/AccordionDetails.js

@@ -20,8 +20,7 @@ const useUtilityClasses = ownerState => {
 };
 const AccordionDetailsRoot = styled('div', {
   name: 'MuiAccordionDetails',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(memoTheme(({
   theme
 }) => ({

package/esm/AccordionSummary/AccordionSummary.js

@@ -29,8 +29,7 @@ const useUtilityClasses = ownerState => {
 };
 const AccordionSummaryRoot = styled(ButtonBase, {
   name: 'MuiAccordionSummary',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(memoTheme(({
   theme
 }) => {
@@ -64,8 +63,7 @@ const AccordionSummaryRoot = styled(ButtonBase, {
 }));
 const AccordionSummaryContent = styled('span', {
   name: 'MuiAccordionSummary',
-  slot: 'Content',
-  overridesResolver: (props, styles) => styles.content
+  slot: 'Content'
 })(memoTheme(({
   theme
 }) => ({
@@ -87,8 +85,7 @@ const AccordionSummaryContent = styled('span', {
 })));
 const AccordionSummaryExpandIconWrapper = styled('span', {
   name: 'MuiAccordionSummary',
-  slot: 'ExpandIconWrapper',
-  overridesResolver: (props, styles) => styles.expandIconWrapper
+  slot: 'ExpandIconWrapper'
 })(memoTheme(({
   theme
 }) => ({

package/esm/Alert/Alert.js

@@ -102,8 +102,7 @@ const AlertRoot = styled(Paper, {
 }));
 const AlertIcon = styled('div', {
   name: 'MuiAlert',
-  slot: 'Icon',
-  overridesResolver: (props, styles) => styles.icon
+  slot: 'Icon'
 })({
   marginRight: 12,
   padding: '7px 0',
@@ -113,8 +112,7 @@ const AlertIcon = styled('div', {
 });
 const AlertMessage = styled('div', {
   name: 'MuiAlert',
-  slot: 'Message',
-  overridesResolver: (props, styles) => styles.message
+  slot: 'Message'
 })({
   padding: '8px 0',
   minWidth: 0,
@@ -122,8 +120,7 @@ const AlertMessage = styled('div', {
 });
 const AlertAction = styled('div', {
   name: 'MuiAlert',
-  slot: 'Action',
-  overridesResolver: (props, styles) => styles.action
+  slot: 'Action'
 })({
   display: 'flex',
   alignItems: 'flex-start',

package/esm/AlertTitle/AlertTitle.js

@@ -21,8 +21,7 @@ const useUtilityClasses = ownerState => {
 };
 const AlertTitleRoot = styled(Typography, {
   name: 'MuiAlertTitle',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
+  slot: 'Root'
 })(memoTheme(({
   theme
 }) => {

package/esm/Autocomplete/Autocomplete.d.ts

@@ -35,6 +35,25 @@ export type AutocompleteRenderGetTagProps = ({
   tabIndex: -1;
   onDelete: (event: any) => void;
 };
+export type AutocompleteRenderValueGetItemProps<Multiple extends boolean | undefined> = Multiple extends true ? (args: {
+  index: number;
+}) => {
+  key: number;
+  className: string;
+  disabled: boolean;
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+} : (args?: {
+  index?: number;
+}) => {
+  className: string;
+  disabled: boolean;
+  'data-item-index': number;
+  tabIndex: -1;
+  onDelete: (event: any) => void;
+};
+export type AutocompleteRenderValue<Value, Multiple, FreeSolo> = Multiple extends true ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>> : NonNullable<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>;
 export interface AutocompleteRenderOptionState {
   inputValue: string;
   index: number;
@@ -258,7 +277,9 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
     key: any;
   }, option: Value, state: AutocompleteRenderOptionState, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
-   * Render the selected value.
+   * 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.
@@ -266,6 +287,15 @@ export interface AutocompleteProps<Value, Multiple extends boolean | undefined,
    * @returns {ReactNode}
    */
   renderTags?: (value: Value[], getTagProps: AutocompleteRenderGetTagProps, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
+  /**
+   * Renders the selected value(s) as rich content in the input for both single and multiple selections.
+   *
+   * @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
+   * @param {function} getItemProps The value item props.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderValue?: (value: AutocompleteRenderValue<Value, Multiple, FreeSolo>, getItemProps: AutocompleteRenderValueGetItemProps<Multiple>, ownerState: AutocompleteOwnerState<Value, Multiple, DisableClearable, FreeSolo, ChipComponent>) => React.ReactNode;
   /**
    * The size of the component.
    * @default 'medium'

package/esm/Autocomplete/Autocomplete.js

@@ -230,8 +230,7 @@ const AutocompleteRoot = styled('div', {
 });
 const AutocompleteEndAdornment = styled('div', {
   name: 'MuiAutocomplete',
-  slot: 'EndAdornment',
-  overridesResolver: (props, styles) => styles.endAdornment
+  slot: 'EndAdornment'
 })({
   // We use a position absolute to support wrapping tags.
   position: 'absolute',
@@ -241,8 +240,7 @@ const AutocompleteEndAdornment = styled('div', {
 });
 const AutocompleteClearIndicator = styled(IconButton, {
   name: 'MuiAutocomplete',
-  slot: 'ClearIndicator',
-  overridesResolver: (props, styles) => styles.clearIndicator
+  slot: 'ClearIndicator'
 })({
   marginRight: -2,
   padding: 4,
@@ -295,8 +293,7 @@ const AutocompletePopper = styled(Popper, {
 })));
 const AutocompletePaper = styled(Paper, {
   name: 'MuiAutocomplete',
-  slot: 'Paper',
-  overridesResolver: (props, styles) => styles.paper
+  slot: 'Paper'
 })(memoTheme(({
   theme
 }) => ({
@@ -305,8 +302,7 @@ const AutocompletePaper = styled(Paper, {
 })));
 const AutocompleteLoading = styled('div', {
   name: 'MuiAutocomplete',
-  slot: 'Loading',
-  overridesResolver: (props, styles) => styles.loading
+  slot: 'Loading'
 })(memoTheme(({
   theme
 }) => ({
@@ -315,8 +311,7 @@ const AutocompleteLoading = styled('div', {
 })));
 const AutocompleteNoOptions = styled('div', {
   name: 'MuiAutocomplete',
-  slot: 'NoOptions',
-  overridesResolver: (props, styles) => styles.noOptions
+  slot: 'NoOptions'
 })(memoTheme(({
   theme
 }) => ({
@@ -325,8 +320,7 @@ const AutocompleteNoOptions = styled('div', {
 })));
 const AutocompleteListbox = styled('ul', {
   name: 'MuiAutocomplete',
-  slot: 'Listbox',
-  overridesResolver: (props, styles) => styles.listbox
+  slot: 'Listbox'
 })(memoTheme(({
   theme
 }) => ({
@@ -384,8 +378,7 @@ const AutocompleteListbox = styled('ul', {
 })));
 const AutocompleteGroupLabel = styled(ListSubheader, {
   name: 'MuiAutocomplete',
-  slot: 'GroupLabel',
-  overridesResolver: (props, styles) => styles.groupLabel
+  slot: 'GroupLabel'
 })(memoTheme(({
   theme
 }) => ({
@@ -394,8 +387,7 @@ const AutocompleteGroupLabel = styled(ListSubheader, {
 })));
 const AutocompleteGroupUl = styled('ul', {
   name: 'MuiAutocomplete',
-  slot: 'GroupUl',
-  overridesResolver: (props, styles) => styles.groupUl
+  slot: 'GroupUl'
 })({
   padding: 0,
   [`& .${autocompleteClasses.option}`]: {
@@ -471,6 +463,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderTags,
+    renderValue,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -486,7 +479,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     getInputLabelProps,
     getPopupIndicatorProps,
     getClearProps,
-    getTagProps,
+    getItemProps,
     getListboxProps,
     getOptionProps,
     value,
@@ -495,7 +488,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     id,
     popupOpen,
     focused,
-    focusedTag,
+    focusedItem,
     anchorEl,
     setAnchorEl,
     inputValue,
@@ -526,7 +519,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     getOptionLabel,
     hasClearIcon,
     hasPopupIcon,
-    inputFocused: focusedTag === -1,
+    inputFocused: focusedItem === -1,
     popupOpen,
     size
   };
@@ -574,30 +567,30 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     }
   });
   let startAdornment;
-  if (multiple && value.length > 0) {
-    const getCustomizedTagProps = params => ({
-      className: classes.tag,
-      disabled,
-      ...getTagProps(params)
-    });
-    if (renderTags) {
-      startAdornment = renderTags(value, getCustomizedTagProps, ownerState);
-    } else {
-      startAdornment = value.map((option, index) => {
-        const {
-          key,
-          ...customTagProps
-        } = getCustomizedTagProps({
-          index
-        });
-        return /*#__PURE__*/_jsx(Chip, {
-          label: getOptionLabel(option),
-          size: size,
-          ...customTagProps,
-          ...externalForwardedProps.slotProps.chip
-        }, key);
+  const getCustomizedItemProps = params => ({
+    className: classes.tag,
+    disabled,
+    ...getItemProps(params)
+  });
+  if (renderTags && multiple && value.length > 0) {
+    startAdornment = renderTags(value, getCustomizedItemProps, ownerState);
+  } else if (renderValue && value) {
+    startAdornment = renderValue(value, getCustomizedItemProps, ownerState);
+  } else if (multiple && value.length > 0) {
+    startAdornment = value.map((option, index) => {
+      const {
+        key,
+        ...customItemProps
+      } = getCustomizedItemProps({
+        index
       });
-    }
+      return /*#__PURE__*/_jsx(Chip, {
+        label: getOptionLabel(option),
+        size: size,
+        ...customItemProps,
+        ...externalForwardedProps.slotProps.chip
+      }, key);
+    });
   }
   if (limitTags > -1 && Array.isArray(startAdornment)) {
     const more = startAdornment.length - limitTags;
@@ -1126,7 +1119,9 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   renderOption: PropTypes.func,
   /**
-   * Render the selected value.
+   * 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.
@@ -1134,6 +1129,15 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderTags: PropTypes.func,
+  /**
+   * Renders the selected value(s) as rich content in the input for both single and multiple selections.
+   *
+   * @param {AutocompleteRenderValue<Value, Multiple, FreeSolo>} value The `value` provided to the component.
+   * @param {function} getItemProps The value item props.
+   * @param {object} ownerState The state of the Autocomplete component.
+   * @returns {ReactNode}
+   */
+  renderValue: PropTypes.func,
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

package/esm/Avatar/Avatar.d.ts

@@ -5,17 +5,44 @@ import { Theme } from "../styles/index.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { AvatarClasses } from "./avatarClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
+import { SvgIconProps } from "../SvgIcon/index.js";
 export interface AvatarSlots {
   /**
-   * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
-   * @default Collapse
+   * The component that renders the root slot.
+   * @default 'div'
    */
-  img: React.JSXElementConstructor<React.ImgHTMLAttributes<HTMLImageElement>>;
+  root: React.ElementType;
+  /**
+   * The component that renders the img slot.
+   * @default 'img'
+   */
+  img: React.ElementType;
+  /**
+   * The component that renders the fallback slot.
+   * @default Person icon
+   */
+  fallback: React.ElementType;
 }
 export interface AvatarPropsVariantOverrides {}
+export interface AvatarRootSlotPropsOverrides {}
+export interface AvatarImgSlotPropsOverrides {}
+export interface AvatarFallbackSlotPropsOverrides {}
 export type AvatarSlotsAndSlotProps = CreateSlotsAndSlotProps<AvatarSlots, {
-  img: SlotProps<React.ElementType<React.ImgHTMLAttributes<HTMLImageElement>>, {}, AvatarOwnProps>;
+  /**
+   * Props forwarded to the root slot.
+   * By default, the avaible props are based on the div element.
+   */
+  root: SlotProps<'div', AvatarRootSlotPropsOverrides, AvatarOwnProps>;
+  /**
+   * Props forwarded to the img slot.
+   * By default, the avaible props are based on the img element.
+   */
+  img: SlotProps<'img', AvatarImgSlotPropsOverrides, AvatarOwnProps>;
+  /**
+   * Props forwarded to the fallback slot.
+   * By default, the avaible props are based on the [SvgIcon](https://mui.com/material-ui/api/svg-icon/#props) component.
+   */
+  fallback: SlotProps<React.ElementType<SvgIconProps>, AvatarFallbackSlotPropsOverrides, AvatarOwnProps>;
 }>;
 export interface AvatarOwnProps {
   /**
@@ -33,7 +60,7 @@ export interface AvatarOwnProps {
    */
   classes?: Partial<AvatarClasses>;
   /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+   * [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.
    */

package/esm/Avatar/Avatar.js

@@ -82,8 +82,7 @@ const AvatarRoot = styled('div', {
 })));
 const AvatarImg = styled('img', {
   name: 'MuiAvatar',
-  slot: 'Img',
-  overridesResolver: (props, styles) => styles.img
+  slot: 'Img'
 })({
   width: '100%',
   height: '100%',
@@ -97,8 +96,7 @@ const AvatarImg = styled('img', {
 });
 const AvatarFallback = styled(Person, {
   name: 'MuiAvatar',
-  slot: 'Fallback',
-  overridesResolver: (props, styles) => styles.fallback
+  slot: 'Fallback'
 })({
   width: '75%',
   height: '75%'
@@ -180,6 +178,18 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   // This issue explains why this is required: https://github.com/mui/material-ui/issues/42184
   delete ownerState.ownerState;
   const classes = useUtilityClasses(ownerState);
+  const [RootSlot, rootSlotProps] = useSlot('root', {
+    ref,
+    className: clsx(classes.root, className),
+    elementType: AvatarRoot,
+    externalForwardedProps: {
+      slots,
+      slotProps,
+      component,
+      ...other
+    },
+    ownerState
+  });
   const [ImgSlot, imgSlotProps] = useSlot('img', {
     className: classes.img,
     elementType: AvatarImg,
@@ -200,6 +210,16 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     },
     ownerState
   });
+  const [FallbackSlot, fallbackSlotProps] = useSlot('fallback', {
+    className: classes.fallback,
+    elementType: AvatarFallback,
+    externalForwardedProps: {
+      slots,
+      slotProps
+    },
+    shouldForwardComponentProp: true,
+    ownerState
+  });
   if (hasImgNotFailing) {
     children = /*#__PURE__*/_jsx(ImgSlot, {
       ...imgSlotProps
@@ -211,17 +231,12 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   } else if (hasImg && alt) {
     children = alt[0];
   } else {
-    children = /*#__PURE__*/_jsx(AvatarFallback, {
-      ownerState: ownerState,
-      className: classes.fallback
+    children = /*#__PURE__*/_jsx(FallbackSlot, {
+      ...fallbackSlotProps
     });
   }
-  return /*#__PURE__*/_jsx(AvatarRoot, {
-    as: component,
-    className: clsx(classes.root, className),
-    ref: ref,
-    ...other,
-    ownerState: ownerState,
+  return /*#__PURE__*/_jsx(RootSlot, {
+    ...rootSlotProps,
     children: children
   });
 });
@@ -254,7 +269,7 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    */
   component: PropTypes.elementType,
   /**
-   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image.
+   * [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.
    */
@@ -268,14 +283,18 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
    * @default {}
    */
   slotProps: PropTypes.shape({
-    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+    fallback: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    img: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
   }),
   /**
    * The components used for each slot inside.
    * @default {}
    */
   slots: PropTypes.shape({
-    img: PropTypes.elementType
+    fallback: PropTypes.elementType,
+    img: PropTypes.elementType,
+    root: PropTypes.elementType
   }),
   /**
    * The `src` attribute for the `img` element.