@mui/material 5.10.12 → 5.10.14

package/modern/Avatar/Avatar.js

@@ -10,7 +10,6 @@ import useThemeProps from '../styles/useThemeProps';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -24,7 +23,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAvatarUtilityClass, classes);
 };
-
 const AvatarRoot = styled('div', {
   name: 'MuiAvatar',
   slot: 'Root',
@@ -85,7 +83,6 @@ const AvatarFallback = styled(Person, {
   width: '75%',
   height: '75%'
 });
-
 function useLoaded({
   crossOrigin,
   referrerPolicy,
@@ -97,78 +94,65 @@ function useLoaded({
     if (!src && !srcSet) {
       return undefined;
     }
-
     setLoaded(false);
     let active = true;
     const image = new Image();
-
     image.onload = () => {
       if (!active) {
         return;
       }
-
       setLoaded('loaded');
     };
-
     image.onerror = () => {
       if (!active) {
         return;
       }
-
       setLoaded('error');
     };
-
     image.crossOrigin = crossOrigin;
     image.referrerPolicy = referrerPolicy;
     image.src = src;
-
     if (srcSet) {
       image.srcset = srcSet;
     }
-
     return () => {
       active = false;
     };
   }, [crossOrigin, referrerPolicy, src, srcSet]);
   return loaded;
 }
-
 const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   const props = useThemeProps({
     props: inProps,
     name: 'MuiAvatar'
   });
-
   const {
-    alt,
-    children: childrenProp,
-    className,
-    component = 'div',
-    imgProps,
-    sizes,
-    src,
-    srcSet,
-    variant = 'circular'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
-  let children = null; // Use a hook instead of onError on the img element to support server-side rendering.
-
+      alt,
+      children: childrenProp,
+      className,
+      component = 'div',
+      imgProps,
+      sizes,
+      src,
+      srcSet,
+      variant = 'circular'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
+  let children = null;
+
+  // Use a hook instead of onError on the img element to support server-side rendering.
   const loaded = useLoaded(_extends({}, imgProps, {
     src,
     srcSet
   }));
   const hasImg = src || srcSet;
   const hasImgNotFailing = hasImg && loaded !== 'error';
-
   const ownerState = _extends({}, props, {
     colorDefault: !hasImgNotFailing,
     component,
     variant
   });
-
   const classes = useUtilityClasses(ownerState);
-
   if (hasImgNotFailing) {
     children = /*#__PURE__*/_jsx(AvatarImg, _extends({
       alt: alt,
@@ -187,7 +171,6 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       className: classes.fallback
     });
   }
-
   return /*#__PURE__*/_jsx(AvatarRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -197,75 +180,60 @@ const Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
     children: children
   }));
 });
-process.env.NODE_ENV !== "production" ? Avatar.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Avatar.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * Used in combination with `src` or `srcSet` to
    * provide an alt attribute for the rendered `img` element.
    */
   alt: PropTypes.string,
-
   /**
    * Used to render icon or text elements inside the Avatar if `src` is not set.
    * This can be an element, or just a string.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   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.
    * It can be used to listen for the loading error event.
    */
   imgProps: PropTypes.object,
-
   /**
    * The `sizes` attribute for the `img` element.
    */
   sizes: PropTypes.string,
-
   /**
    * The `src` attribute for the `img` element.
    */
   src: PropTypes.string,
-
   /**
    * The `srcSet` attribute for the `img` element.
    * Use this attribute for responsive image display.
    */
   srcSet: PropTypes.string,
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The shape of the avatar.
    * @default 'circular'
    */
-  variant: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
 } : void 0;
 export default Avatar;

package/modern/AvatarGroup/AvatarGroup.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -16,7 +16,6 @@ const SPACINGS = {
   small: -16,
   medium: null
 };
-
 const useUtilityClasses = ownerState => {
   const {
     classes
@@ -27,7 +26,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getAvatarGroupUtilityClass, classes);
 };
-
 const AvatarGroupRoot = styled('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
@@ -67,28 +65,25 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     props: inProps,
     name: 'MuiAvatarGroup'
   });
-
   const {
-    children: childrenProp,
-    className,
-    component = 'div',
-    componentsProps = {},
-    max = 5,
-    spacing = 'medium',
-    total,
-    variant = 'circular'
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children: childrenProp,
+      className,
+      component = 'div',
+      componentsProps = {},
+      max = 5,
+      slotProps = {},
+      spacing = 'medium',
+      total,
+      variant = 'circular'
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   let clampedMax = max < 2 ? 2 : max;
-
   const ownerState = _extends({}, props, {
     max,
     spacing,
     component,
     variant
   });
-
   const classes = useUtilityClasses(ownerState);
   const children = React.Children.toArray(childrenProp).filter(child => {
     if (process.env.NODE_ENV !== 'production') {
@@ -96,19 +91,17 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
         console.error(["MUI: The AvatarGroup component doesn't accept a Fragment as a child.", 'Consider providing an array instead.'].join('\n'));
       }
     }
-
     return /*#__PURE__*/React.isValidElement(child);
   });
   const totalAvatars = total || children.length;
-
   if (totalAvatars === clampedMax) {
     clampedMax += 1;
   }
-
   clampedMax = Math.min(totalAvatars + 1, clampedMax);
   const maxAvatars = Math.min(children.length, clampedMax - 1);
   const extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   const marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
+  const additionalAvatarSlotProps = slotProps.additionalAvatar ?? componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -118,11 +111,11 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
       variant: variant
-    }, componentsProps.additionalAvatar, {
-      className: clsx(classes.avatar, componentsProps.additionalAvatar?.className),
+    }, additionalAvatarSlotProps, {
+      className: clsx(classes.avatar, additionalAvatarSlotProps?.className),
       style: _extends({
         marginLeft
-      }, componentsProps.additionalAvatar?.style),
+      }, additionalAvatarSlotProps?.style),
       children: ["+", extraAvatars]
     })) : null, children.slice(0, maxAvatars).reverse().map((child, index) => {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -137,43 +130,40 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     })]
   }));
 });
-process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The avatars to stack.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
-   * The props used for each slot inside the AvatarGroup.
+   * 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.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
     additionalAvatar: PropTypes.object
   }),
-
   /**
    * Max avatars to show before +x.
    * @default 5
@@ -182,33 +172,37 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
     if (props.max < 2) {
       return new Error(['MUI: The prop `max` should be equal to 2 or above.', 'A value below is clamped to 2.'].join('\n'));
     }
-
     return null;
   }),
-
+  /**
+   * 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: PropTypes.shape({
+    additionalAvatar: PropTypes.object
+  }),
   /**
    * Spacing between avatars.
    * @default 'medium'
    */
   spacing: PropTypes.oneOfType([PropTypes.oneOf(['medium', 'small']), PropTypes.number]),
-
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The total number of avatars. Used for calculating the number of extra avatars.
    * @default children.length
    */
   total: PropTypes.number,
-
   /**
    * The variant to use.
    * @default 'circular'
    */
-  variant: PropTypes
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
+  variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['circular', 'rounded', 'square']), PropTypes.string])
 } : void 0;
 export default AvatarGroup;

package/modern/Backdrop/Backdrop.js

@@ -1,6 +1,6 @@
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _extends from "@babel/runtime/helpers/esm/extends";
-const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"];
+const _excluded = ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -10,7 +10,6 @@ import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -21,7 +20,6 @@ const useUtilityClasses = ownerState => {
   };
   return composeClasses(slots, getBackdropUtilityClass, classes);
 };
-
 const BackdropRoot = styled('div', {
   name: 'MuiBackdrop',
   slot: 'Root',
@@ -52,105 +50,123 @@ const Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
     props: inProps,
     name: 'MuiBackdrop'
   });
-
   const {
-    children,
-    component = 'div',
-    components = {},
-    componentsProps = {},
-    className,
-    invisible = false,
-    open,
-    transitionDuration,
-    // eslint-disable-next-line react/prop-types
-    TransitionComponent = Fade
-  } = props,
-        other = _objectWithoutPropertiesLoose(props, _excluded);
-
+      children,
+      component = 'div',
+      components = {},
+      componentsProps = {},
+      className,
+      invisible = false,
+      open,
+      slotProps = {},
+      slots = {},
+      transitionDuration,
+      // eslint-disable-next-line react/prop-types
+      TransitionComponent = Fade
+    } = props,
+    other = _objectWithoutPropertiesLoose(props, _excluded);
   const ownerState = _extends({}, props, {
     component,
     invisible
   });
-
   const classes = useUtilityClasses(ownerState);
+  const rootSlotProps = slotProps.root ?? componentsProps.root;
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, {
-      "aria-hidden": true,
-      as: components.Root ?? component,
-      className: clsx(classes.root, className),
-      ownerState: _extends({}, ownerState, componentsProps.root?.ownerState),
+    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+      "aria-hidden": true
+    }, rootSlotProps, {
+      as: slots.root ?? components.Root ?? component,
+      className: clsx(classes.root, className, rootSlotProps?.className),
+      ownerState: _extends({}, ownerState, rootSlotProps?.ownerState),
       classes: classes,
       ref: ref,
       children: children
-    })
+    }))
   }));
 });
-process.env.NODE_ENV !== "production" ? Backdrop.propTypes
-/* remove-proptypes */
-= {
+process.env.NODE_ENV !== "production" ? Backdrop.propTypes /* remove-proptypes */ = {
   // ----------------------------- Warning --------------------------------
   // | These PropTypes are generated from the TypeScript type definitions |
   // |     To update them edit the d.ts file and run "yarn proptypes"     |
   // ----------------------------------------------------------------------
-
   /**
    * The content of the component.
    */
   children: PropTypes.node,
-
   /**
    * Override or extend the styles applied to the component.
    */
   classes: PropTypes.object,
-
   /**
    * @ignore
    */
   className: PropTypes.string,
-
   /**
    * The component used for the root node.
    * Either a string to use a HTML element or a component.
    */
   component: PropTypes.elementType,
-
   /**
-   * The components used for each slot inside the Backdrop.
-   * Either a string to use a HTML element or a component.
+   * 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.
+   *
    * @default {}
    */
   components: PropTypes.shape({
     Root: PropTypes.elementType
   }),
-
   /**
-   * The props used for each slot inside the Backdrop.
+   * 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.
+   *
    * @default {}
    */
   componentsProps: PropTypes.shape({
     root: PropTypes.object
   }),
-
   /**
    * If `true`, the backdrop is invisible.
    * It can be used when rendering a popover or a custom select component.
    * @default false
    */
   invisible: PropTypes.bool,
-
   /**
    * If `true`, the component is shown.
    */
   open: PropTypes.bool.isRequired,
-
+  /**
+   * 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: PropTypes.shape({
+    root: PropTypes.object
+  }),
+  /**
+   * The components used for each slot inside.
+   *
+   * This prop is an alias for the `components` prop, which will be deprecated in the future.
+   *
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    root: PropTypes.elementType
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
   sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.