@mui/material 5.4.0 → 5.4.1

package/modern/Fab/Fab.js

@@ -20,7 +20,7 @@ const useUtilityClasses = ownerState => {
     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);
 };
@@ -32,7 +32,7 @@ const FabRoot = styled(ButtonBase, {
     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,
@@ -99,24 +99,14 @@ const FabRoot = styled(ButtonBase, {
 }), ({
   theme,
   ownerState
-}) => _extends({}, ownerState.color === 'primary' && {
-  color: theme.palette.primary.contrastText,
-  backgroundColor: theme.palette.primary.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.primary.dark,
+    backgroundColor: theme.palette[ownerState.color].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,
-  '&:hover': {
-    backgroundColor: theme.palette.secondary.dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.palette.secondary.main
+      backgroundColor: theme.palette[ownerState.color].main
     }
   }
 }));
@@ -188,9 +178,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * 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.

package/modern/Fab/fabClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export 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']);
 export default fabClasses;

package/modern/ImageList/ImageList.js

@@ -169,6 +169,8 @@ process.env.NODE_ENV !== "production" ? ImageList.propTypes
    * 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])
 } : void 0;
 export default ImageList;

package/modern/Modal/Modal.js

@@ -226,7 +226,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * 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,

package/modern/Rating/Rating.js

@@ -405,7 +405,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
 
   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;

package/modern/Select/SelectInput.js

@@ -189,6 +189,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   }, [autoFocus]);
   React.useEffect(() => {
+    if (!labelId) {
+      return undefined;
+    }
+
     const label = ownerDocument(displayRef.current).getElementById(labelId);
 
     if (label) {
@@ -285,7 +289,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       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);

package/modern/Slider/Slider.js

@@ -689,7 +689,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * 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.)

package/modern/Snackbar/Snackbar.js

@@ -290,7 +290,10 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       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__*/_jsx(TransitionComponent, _extends({
         appear: true,

package/modern/index.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.

package/modern/styles/makeStyles.js

@@ -2,5 +2,5 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function makeStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : _formatMuiErrorMessage(14));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(14));
 }

package/modern/styles/withStyles.js

@@ -2,5 +2,5 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : _formatMuiErrorMessage(15));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(15));
 }

package/modern/styles/withTheme.js

@@ -2,5 +2,5 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withTheme() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : _formatMuiErrorMessage(16));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(16));
 }

package/modern/useMediaQuery/useMediaQuery.js

@@ -32,7 +32,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     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);
       }

package/node/AvatarGroup/AvatarGroup.js

@@ -33,7 +33,7 @@ var _avatarGroupClasses = _interopRequireWildcard(require("./avatarGroupClasses"
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["children", "className", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -90,6 +90,8 @@ const AvatarGroupAvatar = (0, _styled.default)(_Avatar.default, {
   }
 }));
 const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
+  var _componentsProps$addi, _componentsProps$addi2;
+
   const props = (0, _useThemeProps.default)({
     props: inProps,
     name: 'MuiAvatarGroup'
@@ -97,6 +99,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const {
     children: childrenProp,
     className,
+    componentsProps = {},
     max = 5,
     spacing = 'medium',
     total,
@@ -134,15 +137,16 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: (0, _clsx.default)(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupAvatar, {
+    children: [extraAvatars ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(AvatarGroupAvatar, (0, _extends2.default)({
       ownerState: ownerState,
-      className: classes.avatar,
-      style: {
+      variant: variant
+    }, componentsProps.additionalAvatar, {
+      className: (0, _clsx.default)(classes.avatar, (_componentsProps$addi = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi.className),
+      style: (0, _extends2.default)({
         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.cloneElement(child, {
         className: (0, _clsx.default)(child.props.className, classes.avatar),
         style: (0, _extends2.default)({
@@ -176,6 +180,14 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   className: _propTypes.default.string,
 
+  /**
+   * The props used for each slot inside the AvatarGroup.
+   * @default {}
+   */
+  componentsProps: _propTypes.default.shape({
+    additionalAvatar: _propTypes.default.object
+  }),
+
   /**
    * Max avatars to show before +x.
    * @default 5

package/node/Badge/Badge.js

@@ -198,7 +198,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
     componentsProps = {},
     overlap: overlapProp = 'rectangular',
     color: colorProp = 'default',
-    invisible: invisibleProp,
+    invisible: invisibleProp = false,
     badgeContent: badgeContentProp,
     showZero = false,
     variant: variantProp = 'standard'
@@ -211,7 +211,7 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   });
   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;
   }
 
@@ -327,6 +327,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
 
   /**
    * If `true`, the badge is invisible.
+   * @default false
    */
   invisible: _propTypes.default.bool,
 

package/node/ButtonBase/ButtonBase.js

@@ -37,7 +37,7 @@ var _buttonBaseClasses = _interopRequireWildcard(require("./buttonBaseClasses"))
 
 var _jsxRuntime = require("react/jsx-runtime");
 
-const _excluded = ["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 = ["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"];
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -145,11 +145,13 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchStart,
     tabIndex = 0,
     TouchRippleProps,
+    touchRippleRef,
     type
   } = props,
         other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
+  const handleRippleRef = (0, _useForkRef.default)(rippleRef, touchRippleRef);
   const {
     isFocusVisibleRef,
     onFocus: handleFocusVisible,
@@ -368,7 +370,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
     /* TouchRipple is only needed client-side, x2 boost on the server. */
     (0, _jsxRuntime.jsx)(_TouchRipple.default, (0, _extends2.default)({
-      ref: rippleRef,
+      ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
   }));
@@ -551,6 +553,17 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    */
   TouchRippleProps: _propTypes.default.object,
 
+  /**
+   * A ref that points to the `TouchRippple` element.
+   */
+  touchRippleRef: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+    current: _propTypes.default.shape({
+      pulsate: _propTypes.default.func.isRequired,
+      start: _propTypes.default.func.isRequired,
+      stop: _propTypes.default.func.isRequired
+    })
+  })]),
+
   /**
    * @ignore
    */

package/node/Fab/Fab.js

@@ -45,7 +45,7 @@ const useUtilityClasses = ownerState => {
     size
   } = ownerState;
   const slots = {
-    root: ['root', variant, `size${(0, _capitalize.default)(size)}`, color === 'inherit' && 'colorInherit', color === 'primary' && 'primary', color === 'secondary' && 'secondary']
+    root: ['root', variant, `size${(0, _capitalize.default)(size)}`, color === 'inherit' ? 'colorInherit' : color]
   };
   return (0, _base.unstable_composeClasses)(slots, _fabClasses.getFabUtilityClass, classes);
 };
@@ -57,7 +57,7 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
     const {
       ownerState
     } = props;
-    return [styles.root, styles[ownerState.variant], styles[`size${(0, _capitalize.default)(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${(0, _capitalize.default)(ownerState.size)}`], ownerState.color === 'inherit' && styles.colorInherit, styles[(0, _capitalize.default)(ownerState.size)], styles[ownerState.color]];
   }
 })(({
   theme,
@@ -124,24 +124,14 @@ const FabRoot = (0, _styled.default)(_ButtonBase.default, {
 }), ({
   theme,
   ownerState
-}) => (0, _extends2.default)({}, ownerState.color === 'primary' && {
-  color: theme.palette.primary.contrastText,
-  backgroundColor: theme.palette.primary.main,
+}) => (0, _extends2.default)({}, 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.primary.dark,
+    backgroundColor: theme.palette[ownerState.color].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,
-  '&:hover': {
-    backgroundColor: theme.palette.secondary.dark,
-    // Reset on touch devices, it doesn't add specificity
-    '@media (hover: none)': {
-      backgroundColor: theme.palette.secondary.main
+      backgroundColor: theme.palette[ownerState.color].main
     }
   }
 }));
@@ -210,9 +200,7 @@ process.env.NODE_ENV !== "production" ? Fab.propTypes
    * The color of the component. It supports those theme colors that make sense for this component.
    * @default 'default'
    */
-  color: _propTypes.default
-  /* @typescript-to-proptypes-ignore */
-  .oneOfType([_propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary']), _propTypes.default.string]),
+  color: _propTypes.default.oneOf(['default', 'error', 'info', 'inherit', 'primary', 'secondary', 'success', 'warning']),
 
   /**
    * The component used for the root node.

package/node/Fab/fabClasses.js

@@ -12,6 +12,6 @@ function getFabUtilityClass(slot) {
   return (0, _base.generateUtilityClass)('MuiFab', slot);
 }
 
-const fabClasses = (0, _base.generateUtilityClasses)('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+const fabClasses = (0, _base.generateUtilityClasses)('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
 var _default = fabClasses;
 exports.default = _default;

package/node/ImageList/ImageList.js

@@ -190,7 +190,9 @@ process.env.NODE_ENV !== "production" ? ImageList.propTypes
    * The variant to use.
    * @default 'standard'
    */
-  variant: _propTypes.default.oneOf(['masonry', 'quilted', 'standard', 'woven'])
+  variant: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['masonry', 'quilted', 'standard', 'woven']), _propTypes.default.string])
 } : void 0;
 var _default = ImageList;
 exports.default = _default;

package/node/Modal/Modal.js

@@ -250,7 +250,7 @@ process.env.NODE_ENV !== "production" ? Modal.propTypes
 
   /**
    * 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.default.bool,

package/node/Rating/Rating.js

@@ -426,7 +426,7 @@ const Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
 
   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;

package/node/Select/SelectInput.js

@@ -217,6 +217,10 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
     }
   }, [autoFocus]);
   React.useEffect(() => {
+    if (!labelId) {
+      return undefined;
+    }
+
     const label = (0, _ownerDocument.default)(displayRef.current).getElementById(labelId);
 
     if (label) {
@@ -313,7 +317,7 @@ const SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, re
       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);

package/node/Slider/Slider.js

@@ -718,7 +718,9 @@ process.env.NODE_ENV !== "production" ? Slider.propTypes
    * The size of the slider.
    * @default 'medium'
    */
-  size: _propTypes.default.oneOf(['small', 'medium']),
+  size: _propTypes.default
+  /* @typescript-to-proptypes-ignore */
+  .oneOfType([_propTypes.default.oneOf(['small', 'medium']), _propTypes.default.string]),
 
   /**
    * The granularity with which the slider can step through values. (A "discrete" slider.)

package/node/Snackbar/Snackbar.js

@@ -315,7 +315,10 @@ const Snackbar = /*#__PURE__*/React.forwardRef(function Snackbar(inProps, ref) {
       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__*/(0, _jsxRuntime.jsx)(TransitionComponent, (0, _extends2.default)({
         appear: true,

package/node/index.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.

package/node/styles/makeStyles.js

@@ -10,5 +10,5 @@ var _utils = require("@mui/utils");
 function makeStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : (0, _utils.formatMuiErrorMessage)(14));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _utils.formatMuiErrorMessage)(14));
 }

package/node/styles/withStyles.js

@@ -10,5 +10,5 @@ var _utils = require("@mui/utils");
 function withStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : (0, _utils.formatMuiErrorMessage)(15));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _utils.formatMuiErrorMessage)(15));
 }

package/node/styles/withTheme.js

@@ -10,5 +10,5 @@ var _utils = require("@mui/utils");
 function withTheme() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : (0, _utils.formatMuiErrorMessage)(16));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : (0, _utils.formatMuiErrorMessage)(16));
 }

package/node/useMediaQuery/useMediaQuery.js

@@ -44,7 +44,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     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);
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.4.0",
+  "version": "5.4.1",
   "private": false,
   "author": "MUI Team",
   "description": "Quickly build beautiful React apps. MUI is a simple and customizable component library to build faster, beautiful, and more accessible React applications. Follow your own design system, or start with Material Design.",
@@ -14,12 +14,12 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui-org/material-ui.git",
+    "url": "https://github.com/mui/material-ui.git",
     "directory": "packages/mui-material"
   },
   "license": "MIT",
   "bugs": {
-    "url": "https://github.com/mui-org/material-ui/issues"
+    "url": "https://github.com/mui/material-ui/issues"
   },
   "homepage": "https://mui.com/",
   "funding": {
@@ -45,11 +45,11 @@
     }
   },
   "dependencies": {
-    "@babel/runtime": "^7.16.7",
-    "@mui/base": "5.0.0-alpha.67",
-    "@mui/system": "^5.4.0",
-    "@mui/types": "^7.1.0",
-    "@mui/utils": "^5.3.0",
+    "@babel/runtime": "^7.17.0",
+    "@mui/base": "5.0.0-alpha.68",
+    "@mui/system": "^5.4.1",
+    "@mui/types": "^7.1.1",
+    "@mui/utils": "^5.4.1",
     "@types/react-transition-group": "^4.4.4",
     "clsx": "^1.1.1",
     "csstype": "^3.0.10",

package/styles/makeStyles.js

@@ -2,5 +2,5 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function makeStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : _formatMuiErrorMessage(14));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(14));
 }

package/styles/withStyles.js

@@ -2,5 +2,5 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withStyles() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : _formatMuiErrorMessage(15));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(15));
 }

package/styles/withTheme.js

@@ -2,5 +2,5 @@ import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 export default function withTheme() {
   throw new Error(process.env.NODE_ENV !== "production" ? `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.` : _formatMuiErrorMessage(16));
+See https://mui.com/r/migration-v4/#mui-material-styles for more details.` : _formatMuiErrorMessage(16));
 }

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}