@mui/material 5.10.12 → 5.10.14

package/legacy/Avatar/Avatar.js

@@ -9,11 +9,10 @@ import useThemeProps from '../styles/useThemeProps';
 import Person from '../internal/svg-icons/Person';
 import { getAvatarUtilityClass } from './avatarClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
-      variant = ownerState.variant,
-      colorDefault = ownerState.colorDefault;
+    variant = ownerState.variant,
+    colorDefault = ownerState.colorDefault;
   var slots = {
     root: ['root', variant, colorDefault && 'colorDefault'],
     img: ['img'],
@@ -21,7 +20,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getAvatarUtilityClass, classes);
 };
-
 var AvatarRoot = styled('div', {
   name: 'MuiAvatar',
   slot: 'Root',
@@ -31,7 +29,7 @@ var AvatarRoot = styled('div', {
   }
 })(function (_ref) {
   var theme = _ref.theme,
-      ownerState = _ref.ownerState;
+    ownerState = _ref.ownerState;
   return _extends({
     position: 'relative',
     display: 'flex',
@@ -85,93 +83,77 @@ var AvatarFallback = styled(Person, {
   width: '75%',
   height: '75%'
 });
-
 function useLoaded(_ref2) {
   var crossOrigin = _ref2.crossOrigin,
-      referrerPolicy = _ref2.referrerPolicy,
-      src = _ref2.src,
-      srcSet = _ref2.srcSet;
-
+    referrerPolicy = _ref2.referrerPolicy,
+    src = _ref2.src,
+    srcSet = _ref2.srcSet;
   var _React$useState = React.useState(false),
-      loaded = _React$useState[0],
-      setLoaded = _React$useState[1];
-
+    loaded = _React$useState[0],
+    setLoaded = _React$useState[1];
   React.useEffect(function () {
     if (!src && !srcSet) {
       return undefined;
     }
-
     setLoaded(false);
     var active = true;
     var image = new Image();
-
     image.onload = function () {
       if (!active) {
         return;
       }
-
       setLoaded('loaded');
     };
-
     image.onerror = function () {
       if (!active) {
         return;
       }
-
       setLoaded('error');
     };
-
     image.crossOrigin = crossOrigin;
     image.referrerPolicy = referrerPolicy;
     image.src = src;
-
     if (srcSet) {
       image.srcset = srcSet;
     }
-
     return function () {
       active = false;
     };
   }, [crossOrigin, referrerPolicy, src, srcSet]);
   return loaded;
 }
-
 var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
   var props = useThemeProps({
     props: inProps,
     name: 'MuiAvatar'
   });
-
   var alt = props.alt,
-      childrenProp = props.children,
-      className = props.className,
-      _props$component = props.component,
-      component = _props$component === void 0 ? 'div' : _props$component,
-      imgProps = props.imgProps,
-      sizes = props.sizes,
-      src = props.src,
-      srcSet = props.srcSet,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'circular' : _props$variant,
-      other = _objectWithoutProperties(props, ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"]);
-
-  var children = null; // Use a hook instead of onError on the img element to support server-side rendering.
-
+    childrenProp = props.children,
+    className = props.className,
+    _props$component = props.component,
+    component = _props$component === void 0 ? 'div' : _props$component,
+    imgProps = props.imgProps,
+    sizes = props.sizes,
+    src = props.src,
+    srcSet = props.srcSet,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'circular' : _props$variant,
+    other = _objectWithoutProperties(props, ["alt", "children", "className", "component", "imgProps", "sizes", "src", "srcSet", "variant"]);
+  var children = null;
+
+  // Use a hook instead of onError on the img element to support server-side rendering.
   var loaded = useLoaded(_extends({}, imgProps, {
     src: src,
     srcSet: srcSet
   }));
   var hasImg = src || srcSet;
   var hasImgNotFailing = hasImg && loaded !== 'error';
-
   var ownerState = _extends({}, props, {
     colorDefault: !hasImgNotFailing,
     component: component,
     variant: variant
   });
-
   var classes = useUtilityClasses(ownerState);
-
   if (hasImgNotFailing) {
     children = /*#__PURE__*/_jsx(AvatarImg, _extends({
       alt: alt,
@@ -190,7 +172,6 @@ var Avatar = /*#__PURE__*/React.forwardRef(function Avatar(inProps, ref) {
       className: classes.fallback
     });
   }
-
   return /*#__PURE__*/_jsx(AvatarRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -200,75 +181,60 @@ var 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/legacy/AvatarGroup/AvatarGroup.js

@@ -16,7 +16,6 @@ var SPACINGS = {
   small: -16,
   medium: null
 };
-
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes;
   var slots = {
@@ -25,7 +24,6 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
   };
   return composeClasses(slots, getAvatarGroupUtilityClass, classes);
 };
-
 var AvatarGroupRoot = styled('div', {
   name: 'MuiAvatarGroup',
   slot: 'Root',
@@ -34,7 +32,6 @@ var AvatarGroupRoot = styled('div', {
   }
 })(function (_ref) {
   var _ref2;
-
   var theme = _ref.theme;
   return _ref2 = {}, _defineProperty(_ref2, "& .".concat(avatarClasses.root), {
     border: "2px solid ".concat((theme.vars || theme).palette.background.default),
@@ -63,37 +60,34 @@ var AvatarGroupAvatar = styled(Avatar, {
   };
 });
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
-  var _componentsProps$addi, _componentsProps$addi2;
-
+  var _slotProps$additional;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiAvatarGroup'
   });
-
   var childrenProp = props.children,
-      className = props.className,
-      _props$component = props.component,
-      component = _props$component === void 0 ? 'div' : _props$component,
-      _props$componentsProp = props.componentsProps,
-      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-      _props$max = props.max,
-      max = _props$max === void 0 ? 5 : _props$max,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? 'medium' : _props$spacing,
-      total = props.total,
-      _props$variant = props.variant,
-      variant = _props$variant === void 0 ? 'circular' : _props$variant,
-      other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "spacing", "total", "variant"]);
-
+    className = props.className,
+    _props$component = props.component,
+    component = _props$component === void 0 ? 'div' : _props$component,
+    _props$componentsProp = props.componentsProps,
+    componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+    _props$max = props.max,
+    max = _props$max === void 0 ? 5 : _props$max,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    _props$spacing = props.spacing,
+    spacing = _props$spacing === void 0 ? 'medium' : _props$spacing,
+    total = props.total,
+    _props$variant = props.variant,
+    variant = _props$variant === void 0 ? 'circular' : _props$variant,
+    other = _objectWithoutProperties(props, ["children", "className", "component", "componentsProps", "max", "slotProps", "spacing", "total", "variant"]);
   var clampedMax = max < 2 ? 2 : max;
-
   var ownerState = _extends({}, props, {
     max: max,
     spacing: spacing,
     component: component,
     variant: variant
   });
-
   var classes = useUtilityClasses(ownerState);
   var children = React.Children.toArray(childrenProp).filter(function (child) {
     if (process.env.NODE_ENV !== 'production') {
@@ -101,19 +95,17 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
         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);
   });
   var totalAvatars = total || children.length;
-
   if (totalAvatars === clampedMax) {
     clampedMax += 1;
   }
-
   clampedMax = Math.min(totalAvatars + 1, clampedMax);
   var maxAvatars = Math.min(children.length, clampedMax - 1);
   var extraAvatars = Math.max(totalAvatars - clampedMax, totalAvatars - maxAvatars, 0);
   var marginLeft = spacing && SPACINGS[spacing] !== undefined ? SPACINGS[spacing] : -spacing;
+  var additionalAvatarSlotProps = (_slotProps$additional = slotProps.additionalAvatar) != null ? _slotProps$additional : componentsProps.additionalAvatar;
   return /*#__PURE__*/_jsxs(AvatarGroupRoot, _extends({
     as: component,
     ownerState: ownerState,
@@ -123,11 +115,11 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
       variant: variant
-    }, componentsProps.additionalAvatar, {
-      className: clsx(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+    }, additionalAvatarSlotProps, {
+      className: clsx(classes.avatar, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.className),
       style: _extends({
         marginLeft: marginLeft
-      }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
+      }, additionalAvatarSlotProps == null ? void 0 : additionalAvatarSlotProps.style),
       children: ["+", extraAvatars]
     })) : null, children.slice(0, maxAvatars).reverse().map(function (child, index) {
       return /*#__PURE__*/React.cloneElement(child, {
@@ -142,43 +134,40 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     })]
   }));
 });
-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
@@ -187,33 +176,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/legacy/Backdrop/Backdrop.js

@@ -9,16 +9,14 @@ import useThemeProps from '../styles/useThemeProps';
 import Fade from '../Fade';
 import { getBackdropUtilityClass } from './backdropClasses';
 import { jsx as _jsx } from "react/jsx-runtime";
-
 var useUtilityClasses = function useUtilityClasses(ownerState) {
   var classes = ownerState.classes,
-      invisible = ownerState.invisible;
+    invisible = ownerState.invisible;
   var slots = {
     root: ['root', invisible && 'invisible']
   };
   return composeClasses(slots, getBackdropUtilityClass, classes);
 };
-
 var BackdropRoot = styled('div', {
   name: 'MuiBackdrop',
   slot: 'Root',
@@ -44,113 +42,132 @@ var BackdropRoot = styled('div', {
   });
 });
 var Backdrop = /*#__PURE__*/React.forwardRef(function Backdrop(inProps, ref) {
-  var _components$Root, _componentsProps$root;
-
+  var _slotProps$root, _ref2, _slots$root;
   var props = useThemeProps({
     props: inProps,
     name: 'MuiBackdrop'
   });
-
   var children = props.children,
-      _props$component = props.component,
-      component = _props$component === void 0 ? 'div' : _props$component,
-      _props$components = props.components,
-      components = _props$components === void 0 ? {} : _props$components,
-      _props$componentsProp = props.componentsProps,
-      componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
-      className = props.className,
-      _props$invisible = props.invisible,
-      invisible = _props$invisible === void 0 ? false : _props$invisible,
-      open = props.open,
-      transitionDuration = props.transitionDuration,
-      _props$TransitionComp = props.TransitionComponent,
-      TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
-      other = _objectWithoutProperties(props, ["children", "component", "components", "componentsProps", "className", "invisible", "open", "transitionDuration", "TransitionComponent"]);
-
+    _props$component = props.component,
+    component = _props$component === void 0 ? 'div' : _props$component,
+    _props$components = props.components,
+    components = _props$components === void 0 ? {} : _props$components,
+    _props$componentsProp = props.componentsProps,
+    componentsProps = _props$componentsProp === void 0 ? {} : _props$componentsProp,
+    className = props.className,
+    _props$invisible = props.invisible,
+    invisible = _props$invisible === void 0 ? false : _props$invisible,
+    open = props.open,
+    _props$slotProps = props.slotProps,
+    slotProps = _props$slotProps === void 0 ? {} : _props$slotProps,
+    _props$slots = props.slots,
+    slots = _props$slots === void 0 ? {} : _props$slots,
+    transitionDuration = props.transitionDuration,
+    _props$TransitionComp = props.TransitionComponent,
+    TransitionComponent = _props$TransitionComp === void 0 ? Fade : _props$TransitionComp,
+    other = _objectWithoutProperties(props, ["children", "component", "components", "componentsProps", "className", "invisible", "open", "slotProps", "slots", "transitionDuration", "TransitionComponent"]);
   var ownerState = _extends({}, props, {
     component: component,
     invisible: invisible
   });
-
   var classes = useUtilityClasses(ownerState);
+  var rootSlotProps = (_slotProps$root = slotProps.root) != null ? _slotProps$root : componentsProps.root;
   return /*#__PURE__*/_jsx(TransitionComponent, _extends({
     in: open,
     timeout: transitionDuration
   }, other, {
-    children: /*#__PURE__*/_jsx(BackdropRoot, {
-      "aria-hidden": true,
-      as: (_components$Root = components.Root) != null ? _components$Root : component,
-      className: clsx(classes.root, className),
-      ownerState: _extends({}, ownerState, (_componentsProps$root = componentsProps.root) == null ? void 0 : _componentsProps$root.ownerState),
+    children: /*#__PURE__*/_jsx(BackdropRoot, _extends({
+      "aria-hidden": true
+    }, rootSlotProps, {
+      as: (_ref2 = (_slots$root = slots.root) != null ? _slots$root : components.Root) != null ? _ref2 : component,
+      className: clsx(classes.root, className, rootSlotProps == null ? void 0 : rootSlotProps.className),
+      ownerState: _extends({}, ownerState, rootSlotProps == null ? void 0 : 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.