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

package/node/Avatar/Avatar.js

@@ -6,21 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Person = _interopRequireDefault(require("../internal/svg-icons/Person"));
 var _avatarClasses = require("./avatarClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["alt", "children", "className", "component", "slots", "slotProps", "imgProps", "sizes", "src", "srcSet", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAvatar');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -43,7 +41,7 @@ const AvatarRoot = (0, _zeroStyled.styled)('div', {
     } = props;
     return [styles.root, styles[ownerState.variant], ownerState.colorDefault && styles.colorDefault];
   }
-})(({
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   position: 'relative',
@@ -77,17 +75,19 @@ const AvatarRoot = (0, _zeroStyled.styled)('div', {
     props: {
       colorDefault: true
     },
-    style: (0, _extends2.default)({
-      color: (theme.vars || theme).palette.background.default
-    }, theme.vars ? {
-      backgroundColor: theme.vars.palette.Avatar.defaultBg
-    } : (0, _extends2.default)({
-      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 = (0, _zeroStyled.styled)('img', {
   name: 'MuiAvatar',
   slot: 'Img',
@@ -150,38 +150,42 @@ function useLoaded({
   return loaded;
 }
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiAvatar'
   });
   const {
-      alt,
-      children: childrenProp,
-      className,
-      component = 'div',
-      slots = {},
-      slotProps = {},
-      imgProps,
-      sizes,
-      src,
-      srcSet,
-      variant = 'circular'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(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((0, _extends2.default)({}, imgProps, {
+  const loaded = useLoaded({
+    ...imgProps,
     src,
     srcSet
-  }));
+  });
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
-  const ownerState = (0, _extends2.default)({}, 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] = (0, _useSlot.default)('img', {
     className: classes.img,
@@ -189,7 +193,10 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     externalForwardedProps: {
       slots,
       slotProps: {
-        img: (0, _extends2.default)({}, imgProps, slotProps.img)
+        img: {
+          ...imgProps,
+          ...slotProps.img
+        }
       }
     },
     additionalProps: {
@@ -201,7 +208,9 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     ownerState
   });
   if (hasImgNotFailing) {
-    children = /*#__PURE__*/(0, _jsxRuntime.jsx)(ImgSlot, (0, _extends2.default)({}, imgSlotProps));
+    children = /*#__PURE__*/(0, _jsxRuntime.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) {
@@ -214,14 +223,14 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       className: classes.fallback
     });
   }
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarRoot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(AvatarRoot, {
     as: component,
-    ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref
-  }, other, {
+    ref: ref,
+    ...other,
+    ownerState: ownerState,
     children: children
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -254,7 +263,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.default.object,
   /**

package/node/AvatarGroup/AvatarGroup.js

@@ -6,8 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _reactIs = require("react-is");
@@ -15,17 +13,18 @@ var _clsx = _interopRequireDefault(require("clsx"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Avatar = _interopRequireWildcard(require("../Avatar"));
 var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"));
+var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "component", "componentsProps", "max", "renderSurplus", "slotProps", "spacing", "total", "variant"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 const SPACINGS = {
   small: -16,
   medium: -8
 };
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiAlert');
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -39,10 +38,11 @@ const useUtilityClasses = ownerState => {
 const AvatarGroupRoot = (0, _zeroStyled.styled)('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
-  overridesResolver: (props, styles) => (0, _extends2.default)({
-    [`& .${_avatarGroupClasses.default.avatar}`]: styles.avatar
-  }, styles.root)
-})(({
+  overridesResolver: (props, styles) => ({
+    [`& .${_avatarGroupClasses.default.avatar}`]: styles.avatar,
+    ...styles.root
+  })
+})((0, _memoTheme.default)(({
   theme
 }) => ({
   display: 'flex',
@@ -55,33 +55,34 @@ const AvatarGroupRoot = (0, _zeroStyled.styled)('div', {
       marginLeft: 0
     }
   }
-}));
+})));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  var _slotProps$additional;
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiAvatarGroup'
   });
   const {
-      children: childrenProp,
-      className,
-      component = 'div',
-      componentsProps = {},
-      max = 5,
-      renderSurplus,
-      slotProps = {},
-      spacing = 'medium',
-      total,
-      variant = 'circular'
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(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 = (0, _extends2.default)({}, 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') {
@@ -99,29 +100,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$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   const marginValue = ownerState.spacing && SPACINGS[ownerState.spacing] !== undefined ? SPACINGS[ownerState.spacing] : -ownerState.spacing || -8;
-  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, (0, _extends2.default)({
+  const externalForwardedProps = {
+    slots,
+    slotProps: {
+      surplus: slotProps.additionalAvatar ?? componentsProps?.additionalAvatar,
+      ...componentsProps,
+      ...slotProps
+    }
+  };
+  const [SurplusSlot, surplusProps] = (0, _useSlot.default)('surplus', {
+    elementType: _Avatar.default,
+    externalForwardedProps,
+    className: classes.avatar,
+    ownerState,
+    additionalProps: {
+      variant,
+      style: {
+        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined,
+        ...other.style
+      }
+    }
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupRoot, {
     as: component,
     ownerState: ownerState,
     className: (0, _clsx.default)(classes.root, className),
-    ref: ref
-  }, other, {
-    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, (0, _extends2.default)({
-      variant: variant
-    }, additionalAvatarSlotProps, {
-      className: (0, _clsx.default)(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
-      style: (0, _extends2.default)({
-        '--AvatarRoot-spacing': marginValue ? `${marginValue}px` : undefined
-      }, other.style),
+    ref: ref,
+    ...other,
+    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.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: (0, _clsx.default)(child.props.className, classes.avatar),
         variant: child.props.variant || variant
       });
     })]
-  }));
+  });
 });
 process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -150,9 +166,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.default.shape({
     additionalAvatar: _propTypes.default.object
@@ -174,15 +189,19 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptype
    */
   renderSurplus: _propTypes.default.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.default.shape({
-    additionalAvatar: _propTypes.default.object
+    additionalAvatar: _propTypes.default.object,
+    surplus: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object])
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: _propTypes.default.shape({
+    surplus: _propTypes.default.elementType
   }),
   /**
    * Spacing between avatars.

package/node/Backdrop/Backdrop.js

@@ -6,21 +6,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _zeroStyled = require("../zero-styled");
+var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _Fade = _interopRequireDefault(require("../Fade"));
 var _backdropClasses = require("./backdropClasses");
 var _jsxRuntime = require("react/jsx-runtime");
-const _excluded = ["children", "className", "component", "invisible", "open", "components", "componentsProps", "slotProps", "slots", "TransitionComponent", "transitionDuration"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const useThemeProps = (0, _zeroStyled.createUseThemeProps)('MuiBackdrop');
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -61,34 +58,39 @@ const BackdropRoot = (0, _zeroStyled.styled)('div', {
   }]
 });
 const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  const props = useThemeProps({
+  const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiBackdrop'
   });
   const {
-      children,
-      className,
-      component = 'div',
-      invisible = false,
-      open,
-      components = {},
-      componentsProps = {},
-      slotProps = {},
-      slots = {},
-      TransitionComponent: TransitionComponentProp,
-      transitionDuration
-    } = props,
-    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
-  const ownerState = (0, _extends2.default)({}, props, {
+    children,
+    className,
+    component = 'div',
+    invisible = false,
+    open,
+    components = {},
+    componentsProps = {},
+    slotProps = {},
+    slots = {},
+    TransitionComponent: TransitionComponentProp,
+    transitionDuration,
+    ...other
+  } = props;
+  const ownerState = {
+    ...props,
     component,
     invisible
-  });
+  };
   const classes = useUtilityClasses(ownerState);
-  const backwardCompatibleSlots = (0, _extends2.default)({
+  const backwardCompatibleSlots = {
     transition: TransitionComponentProp,
-    root: components.Root
-  }, slots);
-  const backwardCompatibleSlotProps = (0, _extends2.default)({}, componentsProps, slotProps);
+    root: components.Root,
+    ...slots
+  };
+  const backwardCompatibleSlotProps = {
+    ...componentsProps,
+    ...slotProps
+  };
   const externalForwardedProps = {
     slots: backwardCompatibleSlots,
     slotProps: backwardCompatibleSlotProps
@@ -105,18 +107,19 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     ownerState
   });
   delete transitionProps.ownerState;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(TransitionSlot, {
     in: open,
-    timeout: transitionDuration
-  }, other, transitionProps, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, (0, _extends2.default)({
-      "aria-hidden": true
-    }, rootProps, {
+    timeout: transitionDuration,
+    ...other,
+    ...transitionProps,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(RootSlot, {
+      "aria-hidden": true,
+      ...rootProps,
       classes: classes,
       ref: ref,
       children: children
-    }))
-  }));
+    })
+  });
 });
 process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes */ = {
   // ┌────────────────────────────── Warning ──────────────────────────────┐
@@ -143,8 +146,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
   /**
    * 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 {}
    */
@@ -155,8 +157,7 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * 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 {}
    */
@@ -197,7 +198,6 @@ process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes *
    * The component used for the transition.
    * [Follow this guide](/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
    * @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: _propTypes.default.elementType,
   /**