@mui/material 5.4.0 → 5.4.1

package/transitions/utils.d.ts

@@ -1,23 +1,23 @@
-import * as React from 'react';
-export declare const reflow: (node: Element) => number;
-interface ComponentProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    } | undefined;
-    style: React.CSSProperties | undefined;
-    timeout: number | {
-        enter?: number;
-        exit?: number;
-    };
-}
-interface Options {
-    mode: 'enter' | 'exit';
-}
-interface TransitionProps {
-    duration: string | number;
-    easing: string | undefined;
-    delay: string | undefined;
-}
-export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
-export {};
+import * as React from 'react';
+export declare const reflow: (node: Element) => number;
+interface ComponentProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    } | undefined;
+    style: React.CSSProperties | undefined;
+    timeout: number | {
+        enter?: number;
+        exit?: number;
+    };
+}
+interface Options {
+    mode: 'enter' | 'exit';
+}
+interface TransitionProps {
+    duration: string | number;
+    easing: string | undefined;
+    delay: string | undefined;
+}
+export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+export {};

package/umd/material-ui.development.js

@@ -1,4 +1,4 @@
-/** @license MUI v5.4.0
+/** @license MUI v5.4.1
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -5010,7 +5010,7 @@
    *
    * WARNING: Be sure to only call this inside a callback that is passed as a ref.
    * Otherwise, make sure to cleanup the previous {ref} if it changes. See
-   * https://github.com/mui-org/material-ui/issues/13539
+   * https://github.com/mui/material-ui/issues/13539
    *
    * Useful if you want to expose the ref of an inner component to the public API
    * while still using it inside the component.
@@ -5028,7 +5028,8 @@
   var useEnhancedEffect$1 = useEnhancedEffect;
 
   let globalId = 0;
-  function useId(idOverride) {
+
+  function useGlobalId(idOverride) {
     const [defaultId, setDefaultId] = React__namespace.useState(idOverride);
     const id = idOverride || defaultId;
     React__namespace.useEffect(() => {
@@ -5042,6 +5043,25 @@
       }
     }, [defaultId]);
     return id;
+  } // eslint-disable-next-line no-useless-concat -- Workaround for https://github.com/webpack/webpack/issues/14814
+
+
+  const maybeReactUseId = React__namespace['useId' + ''];
+  /**
+   *
+   * @example <div id={useId()} />
+   * @param idOverride
+   * @returns {string}
+   */
+
+  function useId(idOverride) {
+    if (maybeReactUseId !== undefined) {
+      const reactId = maybeReactUseId();
+      return idOverride != null ? idOverride : reactId;
+    } // eslint-disable-next-line react-hooks/rules-of-hooks -- `React.useId` is invariant at runtime.
+
+
+    return useGlobalId(idOverride);
   }
 
   function unsupportedProp(props, propName, componentName, location, propFullName) {
@@ -8667,7 +8687,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
         horizontal: 'right'
       },
       badgeContent: badgeContentProp,
-      invisible: invisibleProp,
+      invisible: invisibleProp = false,
       max: maxProp = 99,
       showZero = false,
       variant: variantProp = 'standard'
@@ -8680,7 +8700,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     });
     let invisible = invisibleProp;
 
-    if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+    if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
       invisible = true;
     }
 
@@ -8851,6 +8871,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     /**
      * If `true`, the badge is invisible.
+     * @default false
      */
     invisible: PropTypes.bool,
 
@@ -9690,7 +9711,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     /**
      * If `true`, the trap focus will not restore focus to previously focused element once
-     * trap focus is hidden.
+     * trap focus is hidden or unmounted.
      * @default false
      */
     disableRestoreFocus: PropTypes.bool,
@@ -10093,7 +10114,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
 
     /**
      * If `true`, the modal will not restore focus to previously focused element once
-     * modal is hidden.
+     * modal is hidden or unmounted.
      * @default false
      */
     disableRestoreFocus: PropTypes.bool,
@@ -12671,7 +12692,7 @@ The following color spaces are supported: srgb, display-p3, a98-rgb, prophoto-rg
     const handleChange = onChange && ((event, value, thumbIndex) => {
       // Redefine target to allow name and value to be read.
       // This allows seamless integration with the most popular form libraries.
-      // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
+      // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
       // Clone the event to not override `target` of the original event.
       const nativeEvent = event.nativeEvent || event; // @ts-ignore The nativeEvent is function, not object
 
@@ -14692,19 +14713,19 @@ Use unitless line heights instead.` );
   function makeStyles() {
     throw new Error(`MUI: makeStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` );
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
   function withStyles() {
     throw new Error(`MUI: withStyles is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` );
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
   function withTheme() {
     throw new Error(`MUI: withTheme is not longer exported from @mui/material/styles.
 You have to import it from @mui/styles.
-See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` );
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` );
   }
 
   function getSvgIconUtilityClass(slot) {
@@ -17384,7 +17405,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const buttonBaseClasses = generateUtilityClasses('MuiButtonBase', ['root', 'disabled', 'focusVisible']);
   var buttonBaseClasses$1 = buttonBaseClasses;
 
-  const _excluded$1Y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "type"];
+  const _excluded$1Y = ["action", "centerRipple", "children", "className", "component", "disabled", "disableRipple", "disableTouchRipple", "focusRipple", "focusVisibleClassName", "LinkComponent", "onBlur", "onClick", "onContextMenu", "onDragLeave", "onFocus", "onFocusVisible", "onKeyDown", "onKeyUp", "onMouseDown", "onMouseLeave", "onMouseUp", "onTouchEnd", "onTouchMove", "onTouchStart", "tabIndex", "TouchRippleProps", "touchRippleRef", "type"];
 
   const useUtilityClasses$1E = ownerState => {
     const {
@@ -17488,12 +17509,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       onTouchStart,
       tabIndex = 0,
       TouchRippleProps,
+      touchRippleRef,
       type
     } = props,
           other = _objectWithoutPropertiesLoose(props, _excluded$1Y);
 
     const buttonRef = React__namespace.useRef(null);
     const rippleRef = React__namespace.useRef(null);
+    const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
     const {
       isFocusVisibleRef,
       onFocus: handleFocusVisible,
@@ -17713,7 +17736,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
       /* TouchRipple is only needed client-side, x2 boost on the server. */
       jsxRuntime_1(TouchRipple$1, _extends({
-        ref: rippleRef,
+        ref: handleRippleRef,
         center: centerRipple
       }, TouchRippleProps)) : null]
     }));
@@ -17896,6 +17919,17 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     TouchRippleProps: PropTypes.object,
 
+    /**
+     * A ref that points to the `TouchRippple` element.
+     */
+    touchRippleRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+      current: PropTypes.shape({
+        pulsate: PropTypes.func.isRequired,
+        start: PropTypes.func.isRequired,
+        stop: PropTypes.func.isRequired
+      })
+    })]),
+
     /**
      * @ignore
      */
@@ -21220,7 +21254,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   const avatarGroupClasses = generateUtilityClasses('MuiAvatarGroup', ['root', 'avatar']);
   var avatarGroupClasses$1 = avatarGroupClasses;
 
-  const _excluded$1N = ["children", "className", "max", "spacing", "total", "variant"];
+  const _excluded$1N = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
   const SPACINGS$1 = {
     small: -16,
     medium: null
@@ -21272,6 +21306,8 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     }
   }));
   const AvatarGroup = /*#__PURE__*/React__namespace.forwardRef(function AvatarGroup(inProps, ref) {
+    var _componentsProps$addi, _componentsProps$addi2;
+
     const props = useThemeProps({
       props: inProps,
       name: 'MuiAvatarGroup'
@@ -21280,6 +21316,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     const {
       children: childrenProp,
       className,
+      componentsProps = {},
       max = 5,
       spacing = 'medium',
       total,
@@ -21320,15 +21357,16 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       className: clsx(classes.root, className),
       ref: ref
     }, other, {
-      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_2(AvatarGroupAvatar, {
+      children: [extraAvatars ? /*#__PURE__*/jsxRuntime_2(AvatarGroupAvatar, _extends({
         ownerState: ownerState,
-        className: classes.avatar,
-        style: {
+        variant: variant
+      }, componentsProps.additionalAvatar, {
+        className: clsx(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+        style: _extends({
           marginLeft
-        },
-        variant: variant,
+        }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
         children: ["+", extraAvatars]
-      }) : null, children.slice(0, maxAvatars).reverse().map(child => {
+      })) : null, children.slice(0, maxAvatars).reverse().map(child => {
         return /*#__PURE__*/React__namespace.cloneElement(child, {
           className: clsx(child.props.className, classes.avatar),
           style: _extends({
@@ -21362,6 +21400,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      */
     className: PropTypes.string,
 
+    /**
+     * The props used for each slot inside the AvatarGroup.
+     * @default {}
+     */
+    componentsProps: PropTypes.shape({
+      additionalAvatar: PropTypes.object
+    }),
+
     /**
      * Max avatars to show before +x.
      * @default 5
@@ -21933,7 +21979,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       componentsProps = {},
       overlap: overlapProp = 'rectangular',
       color: colorProp = 'default',
-      invisible: invisibleProp,
+      invisible: invisibleProp = false,
       badgeContent: badgeContentProp,
       showZero = false,
       variant: variantProp = 'standard'
@@ -21947,7 +21993,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
     });
     let invisible = invisibleProp;
 
-    if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+    if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
       invisible = true;
     }
 
@@ -22065,6 +22111,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * If `true`, the badge is invisible.
+     * @default false
      */
     invisible: PropTypes.bool,
 
@@ -25504,7 +25551,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     /**
      * If `true`, the modal will not restore focus to previously focused element once
-     * modal is hidden.
+     * modal is hidden or unmounted.
      * @default false
      */
     disableRestoreFocus: PropTypes.bool,
@@ -27276,7 +27323,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   function getFabUtilityClass(slot) {
     return generateUtilityClass('MuiFab', slot);
   }
-  const fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+  const fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
   var fabClasses$1 = fabClasses;
 
   const _excluded$1l = ["children", "className", "color", "component", "disabled", "disableFocusRipple", "focusVisibleClassName", "size", "variant"];
@@ -27289,7 +27336,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       size
     } = ownerState;
     const slots = {
-      root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' && 'colorInherit', color === 'primary' && 'primary', color === 'secondary' && 'secondary']
+      root: ['root', variant, `size${capitalize(size)}`, color === 'inherit' ? 'colorInherit' : color]
     };
     return composeClasses(slots, getFabUtilityClass, classes);
   };
@@ -27301,7 +27348,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       const {
         ownerState
       } = props;
-      return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, ownerState.color === 'primary' && styles.primary, ownerState.color === 'secondary' && styles.secondary];
+      return [styles.root, styles[ownerState.variant], styles[`size${capitalize(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
     }
   })(({
     theme,
@@ -27368,24 +27415,14 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
   }), ({
     theme,
     ownerState
-  }) => _extends({}, ownerState.color === 'primary' && {
-    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.main,
-    '&:hover': {
-      backgroundColor: theme.palette.primary.dark,
-      // Reset on touch devices, it doesn't add specificity
-      '@media (hover: none)': {
-        backgroundColor: theme.palette.primary.main
-      }
-    }
-  }, ownerState.color === 'secondary' && {
-    color: theme.palette.secondary.contrastText,
-    backgroundColor: theme.palette.secondary.main,
+  }) => _extends({}, ownerState.color !== 'inherit' && ownerState.color !== 'default' && theme.palette[ownerState.color] != null && {
+    color: theme.palette[ownerState.color].contrastText,
+    backgroundColor: theme.palette[ownerState.color].main,
     '&:hover': {
-      backgroundColor: theme.palette.secondary.dark,
+      backgroundColor: theme.palette[ownerState.color].dark,
       // Reset on touch devices, it doesn't add specificity
       '@media (hover: none)': {
-        backgroundColor: theme.palette.secondary.main
+        backgroundColor: theme.palette[ownerState.color].main
       }
     }
   }));
@@ -27457,9 +27494,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The color of the component. It supports those theme colors that make sense for this component.
      * @default 'default'
      */
-    color: PropTypes
-    /* @typescript-to-proptypes-ignore */
-    .oneOfType([PropTypes.oneOf(['default', 'inherit', 'primary', 'secondary']), PropTypes.string]),
+    color: PropTypes.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
 
     /**
      * The component used for the root node.
@@ -30509,7 +30544,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       const updateMatch = () => {
         // Workaround Safari wrong implementation of matchMedia
         // TODO can we remove it?
-        // https://github.com/mui-org/material-ui/pull/17315#issuecomment-528286677
+        // https://github.com/mui/material-ui/pull/17315#issuecomment-528286677
         if (active) {
           setMatch(queryList.matches);
         }
@@ -31537,7 +31572,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The variant to use.
      * @default 'standard'
      */
-    variant: PropTypes.oneOf(['masonry', 'quilted', 'standard', 'woven'])
+    variant: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['masonry', 'quilted', 'standard', 'woven']), PropTypes.string])
   } ;
   var ImageList$1 = ImageList;
 
@@ -38494,7 +38531,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
 
     const handleChange = event => {
       let newValue = event.target.value === '' ? null : parseFloat(event.target.value); // Give mouse priority over keyboard
-      // Fix https://github.com/mui-org/material-ui/issues/22827
+      // Fix https://github.com/mui/material-ui/issues/22827
 
       if (hover !== -1) {
         newValue = hover;
@@ -39081,6 +39118,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
       }
     }, [autoFocus]);
     React__namespace.useEffect(() => {
+      if (!labelId) {
+        return undefined;
+      }
+
       const label = ownerDocument(displayRef.current).getElementById(labelId);
 
       if (label) {
@@ -39177,7 +39218,7 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         if (onChange) {
           // Redefine target to allow name and value to be read.
           // This allows seamless integration with the most popular form libraries.
-          // https://github.com/mui-org/material-ui/issues/13485#issuecomment-676048492
+          // https://github.com/mui/material-ui/issues/13485#issuecomment-676048492
           // Clone the event to not override `target` of the original event.
           const nativeEvent = event.nativeEvent || event;
           const clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);
@@ -40773,7 +40814,9 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
      * The size of the slider.
      * @default 'medium'
      */
-    size: PropTypes.oneOf(['small', 'medium']),
+    size: PropTypes
+    /* @typescript-to-proptypes-ignore */
+    .oneOfType([PropTypes.oneOf(['small', 'medium']), PropTypes.string]),
 
     /**
      * The granularity with which the slider can step through values. (A "discrete" slider.)
@@ -41255,7 +41298,10 @@ See https://mui.com/r/migration-v4/#material-ui-core-styles for more details.` )
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         ownerState: ownerState,
-        ref: ref
+        ref: ref // ClickAwayListener adds an `onClick` prop which results in the alert not being announced.
+        // See https://github.com/mui-org/material-ui/issues/29080
+        ,
+        role: "presentation"
       }, other, {
         children: /*#__PURE__*/jsxRuntime_1(TransitionComponent, _extends({
           appear: true,