@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/Avatar/Avatar.d.ts

@@ -46,7 +46,6 @@ export interface AvatarOwnProps {
   /**
    * [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.
    * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps?: React.ImgHTMLAttributes<HTMLImageElement> & {
     sx?: SxProps<Theme>;

package/Avatar/Avatar.js

@@ -1,18 +1,16 @@
 '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';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import Person from '../internal/svg-icons/Person';
-import { getAvatarUtilityClass } from './avatarClasses';
-import useSlot from '../utils/useSlot';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import Person from "../internal/svg-icons/Person.js";
+import { getAvatarUtilityClass } from "./avatarClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-const useThemeProps = createUseThemeProps('MuiAvatar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -35,7 +33,7 @@ const AvatarRoot = styled('div', {
     } = props;
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
-})(({
+})(memoTheme(({
   theme
 }) => ({
   position: 'relative',
@@ -69,17 +67,19 @@ 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', {
   name: 'MuiAvatar',
   slot: 'Img',
@@ -142,38 +142,42 @@ function useLoaded({
   return loaded;
 }
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     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 +185,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 +200,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 +215,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 ──────────────────────────────┐
@@ -246,7 +255,6 @@ process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */
   /**
    * [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.
    * It can be used to listen for the loading error event.
-   * @deprecated Use `slotProps.img` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   imgProps: PropTypes.object,
   /**

package/Avatar/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './Avatar';
-export { default as avatarClasses } from './avatarClasses';
-export * from './avatarClasses';
+export { default } from "./Avatar.js";
+export { default as avatarClasses } from "./avatarClasses.js";
+export * from "./avatarClasses.js";

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;

package/AvatarGroup/AvatarGroup.js

@@ -1,23 +1,22 @@
 'use client';
 
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
 import clsx from 'clsx';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
-import { styled, createUseThemeProps } from '../zero-styled';
-import Avatar, { avatarClasses } from '../Avatar';
-import avatarGroupClasses, { getAvatarGroupUtilityClass } from './avatarGroupClasses';
+import { styled } from "../zero-styled/index.js";
+import memoTheme from "../utils/memoTheme.js";
+import { useDefaultProps } from "../DefaultPropsProvider/index.js";
+import Avatar, { avatarClasses } from "../Avatar/index.js";
+import avatarGroupClasses, { getAvatarGroupUtilityClass } from "./avatarGroupClasses.js";
+import useSlot from "../utils/useSlot.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SPACINGS = {
   small: -16,
   medium: -8
 };
-const useThemeProps = createUseThemeProps('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -31,10 +30,11 @@ const useUtilityClasses = ownerState => {
 const AvatarGroupRoot = styled('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
-  overridesResolver: (props, styles) => _extends({
-    [`& .${avatarGroupClasses.avatar}`]: styles.avatar
-  }, styles.root)
-})(({
+  overridesResolver: (props, styles) => ({
+    [`& .${avatarGroupClasses.avatar}`]: styles.avatar,
+    ...styles.root
+  })
+})(memoTheme(({
   theme
 }) => ({
   display: 'flex',
@@ -47,32 +47,34 @@ const AvatarGroupRoot = styled('div', {
       marginLeft: 0
     }
   }
-}));
+})));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  const props = useThemeProps({
+  const props = useDefaultProps({
     props: inProps,
     name: 'MuiAvatarGroup'
   });
   const {
-      children: childrenProp,
-      className,
-      component = 'div',
-      componentsProps = {},
-      max = 5,
-      renderSurplus,
-      slotProps = {},
-      spacing = 'medium',
-      total,
-      variant = 'circular'
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    children: childrenProp,
+    className,
+    component = 'div',
+    componentsProps,
+    max = 5,
+    renderSurplus,
+    slotProps = {},
+    slots = {},
+    spacing = 'medium',
+    total,
+    variant = 'circular',
+    ...other
+  } = props;
   let clampedMax = max < 2 ? 2 : max;
-  const ownerState = _extends({}, props, {
+  const ownerState = {
+    ...props,
     max,
     spacing,
     component,
     variant
-  });
+  };
   const classes = useUtilityClasses(ownerState);
   const children = React.Children.toArray(childrenProp).filter(child => {
     if (process.env.NODE_ENV !== 'production') {
@@ -90,29 +92,44 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const extraAvatarsElement = renderSurplus ? renderSurplus(extraAvatars) : `+${extraAvatars}`;
-  const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
   const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
-  return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [SurplusSlot, surplusProps] = useSlot('surplus', {
+    elementType: Avatar,
+    externalForwardedProps,
+    className: classes.avatar,
+    ownerState,
+    additionalProps: {
+      variant,
+      style: {
+        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
+        ...other.style
+      }
+    }
+  });
+  return /*#__PURE__*/_jsxs(AvatarGroupRoot, {
     as: component,
     ownerState: ownerState,
     className: clsx(classes.root, className),
-    ref: ref
-  }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsx(Avatar, _extends({
-      variant: variant
-    }, additionalAvatarSlotProps, {
-      className: clsx(classes.avatar, additionalAvatarSlotProps?.className),
-      style: _extends({
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined
-      }, other.style),
+    ref: ref,
+    ...other,
+    children: [extraAvatars ? /*#__PURE__*/_jsx(SurplusSlot, {
+      ...surplusProps,
       children: extraAvatarsElement
-    })) : null, children.slice(0, maxAvatars).reverse().map(child => {
+    }) : null, children.slice(0, maxAvatars).reverse().map(child => {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         variant: child.props.variant || variant
       });
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -141,9 +158,8 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    * 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: PropTypes.shape({
     additionalAvatar: PropTypes.object
@@ -165,15 +181,19 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    */
   renderSurplus: PropTypes.func,
   /**
-   * 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.
-   *
+   * The props used for each slot inside.
    * @default {}
    */
   slotProps: PropTypes.shape({
-    additionalAvatar: PropTypes.object
+    additionalAvatar: PropTypes.object,
+    surplus: PropTypes.oneOfType([PropTypes.func, PropTypes.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    surplus: PropTypes.elementType
   }),
   /**
    * Spacing between avatars.

package/AvatarGroup/index.js

@@ -1,5 +1,5 @@
 'use client';
 
-export { default } from './AvatarGroup';
-export { default as avatarGroupClasses } from './avatarGroupClasses';
-export * from './avatarGroupClasses';
+export { default } from "./AvatarGroup.js";
+export { default as avatarGroupClasses } from "./avatarGroupClasses.js";
+export * from "./avatarGroupClasses.js";

package/Backdrop/Backdrop.d.ts

@@ -19,7 +19,7 @@ export interface BackdropSlots {
    * @default Fade
    */
   transition?: React.JSXElementConstructor<
-    TransitionProps & { children: React.ReactElement<any, any> }
+    TransitionProps & { children: React.ReactElement<unknown, any> }
   >;
 }
 export interface BackdropComponentsPropsOverrides {}
@@ -52,8 +52,7 @@ export interface BackdropOwnProps
   /**
    * The components used for each slot inside.
    *
-   * This prop is an alias for the `slots` prop.
-   * It's recommended to use the `slots` prop instead.
+   * @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 {}
    */
@@ -64,8 +63,7 @@ export interface BackdropOwnProps
    * 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.
-   * It's recommended to use the `slotProps` prop instead, as `componentsProps` will be deprecated in the future.
+   * @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 {}
    */
@@ -99,11 +97,10 @@ export interface BackdropOwnProps
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @default Fade
-   * @deprecated Use `slots.transition` instead. This prop will be removed in v7. [How to migrate](/material-ui/migration/migrating-from-deprecated-apis/).
    */
   TransitionComponent?: React.JSXElementConstructor<
     TransitionProps & {
-      children: React.ReactElement<any, any>;
+      children: React.ReactElement<unknown, any>;
     }
   >;
 }