@mui/material 5.4.0 → 5.4.1

package/legacy/AvatarGroup/AvatarGroup.js

@@ -63,6 +63,8 @@ var AvatarGroupAvatar = styled(Avatar, {
   };
 });
 var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, ref) {
+  var _componentsProps$addi, _componentsProps$addi2;
+
   var props = useThemeProps({
     props: inProps,
     name: 'MuiAvatarGroup'
@@ -70,6 +72,8 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
 
   var childrenProp = props.children,
       className = props.className,
+      _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,
@@ -77,7 +81,7 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
       total = props.total,
       _props$variant = props.variant,
       variant = _props$variant === void 0 ? 'circular' : _props$variant,
-      other = _objectWithoutProperties(props, ["children", "className", "max", "spacing", "total", "variant"]);
+      other = _objectWithoutProperties(props, ["children", "className", "componentsProps", "max", "spacing", "total", "variant"]);
 
   var clampedMax = max < 2 ? 2 : max;
 
@@ -112,15 +116,16 @@ var AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps, re
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, {
+    children: [extraAvatars ? /*#__PURE__*/_jsxs(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: marginLeft
-      },
-      variant: variant,
+      }, (_componentsProps$addi2 = componentsProps.additionalAvatar) == null ? void 0 : _componentsProps$addi2.style),
       children: ["+", extraAvatars]
-    }) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
+    })) : null, children.slice(0, maxAvatars).reverse().map(function (child) {
       return /*#__PURE__*/React.cloneElement(child, {
         className: clsx(child.props.className, classes.avatar),
         style: _extends({
@@ -154,6 +159,14 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   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

package/legacy/Badge/Badge.js

@@ -168,7 +168,8 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       overlapProp = _props$overlap === void 0 ? 'rectangular' : _props$overlap,
       _props$color = props.color,
       colorProp = _props$color === void 0 ? 'default' : _props$color,
-      invisibleProp = props.invisible,
+      _props$invisible = props.invisible,
+      invisibleProp = _props$invisible === void 0 ? false : _props$invisible,
       badgeContentProp = props.badgeContent,
       _props$showZero = props.showZero,
       showZero = _props$showZero === void 0 ? false : _props$showZero,
@@ -183,7 +184,7 @@ var Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
   });
   var invisible = invisibleProp;
 
-  if (invisibleProp == null && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
+  if (invisibleProp === false && (badgeContentProp === 0 && !showZero || badgeContentProp == null && variantProp !== 'dot')) {
     invisible = true;
   }
 
@@ -303,6 +304,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
 
   /**
    * If `true`, the badge is invisible.
+   * @default false
    */
   invisible: PropTypes.bool,
 

package/legacy/ButtonBase/ButtonBase.js

@@ -127,11 +127,13 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
       _props$tabIndex = props.tabIndex,
       tabIndex = _props$tabIndex === void 0 ? 0 : _props$tabIndex,
       TouchRippleProps = props.TouchRippleProps,
+      touchRippleRef = props.touchRippleRef,
       type = props.type,
-      other = _objectWithoutProperties(props, ["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"]);
+      other = _objectWithoutProperties(props, ["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"]);
 
   var buttonRef = React.useRef(null);
   var rippleRef = React.useRef(null);
+  var handleRippleRef = useForkRef(rippleRef, touchRippleRef);
 
   var _useIsFocusVisible = useIsFocusVisible(),
       isFocusVisibleRef = _useIsFocusVisible.isFocusVisibleRef,
@@ -361,7 +363,7 @@ var ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, ref)
 
     /* TouchRipple is only needed client-side, x2 boost on the server. */
     _jsx(TouchRipple, _extends({
-      ref: rippleRef,
+      ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
   }));
@@ -544,6 +546,17 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    */
   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
    */

package/legacy/Fab/Fab.js

@@ -18,7 +18,7 @@ var useUtilityClasses = function useUtilityClasses(ownerState) {
       classes = ownerState.classes,
       size = ownerState.size;
   var slots = {
-    root: ['root', variant, "size".concat(capitalize(size)), color === 'inherit' && 'colorInherit', color === 'primary' && 'primary', color === 'secondary' && 'secondary']
+    root: ['root', variant, "size".concat(capitalize(size)), color === 'inherit' ? 'colorInherit' : color]
   };
   return composeClasses(slots, getFabUtilityClass, classes);
 };
@@ -28,7 +28,7 @@ var FabRoot = styled(ButtonBase, {
   slot: 'Root',
   overridesResolver: function overridesResolver(props, styles) {
     var ownerState = props.ownerState;
-    return [styles.root, styles[ownerState.variant], styles["size".concat(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".concat(capitalize(ownerState.size))], ownerState.color === 'inherit' && styles.colorInherit, styles[capitalize(ownerState.size)], styles[ownerState.color]];
   }
 })(function (_ref) {
   var _extends2;
@@ -96,24 +96,14 @@ var FabRoot = styled(ButtonBase, {
 }, function (_ref2) {
   var theme = _ref2.theme,
       ownerState = _ref2.ownerState;
-  return _extends({}, ownerState.color === 'primary' && {
-    color: theme.palette.primary.contrastText,
-    backgroundColor: theme.palette.primary.main,
+  return _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
       }
     }
   });
@@ -190,9 +180,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/legacy/Fab/fabClasses.js

@@ -2,5 +2,5 @@ import { generateUtilityClass, generateUtilityClasses } from '@mui/base';
 export function getFabUtilityClass(slot) {
   return generateUtilityClass('MuiFab', slot);
 }
-var fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge']);
+var fabClasses = generateUtilityClasses('MuiFab', ['root', 'primary', 'secondary', 'extended', 'circular', 'focusVisible', 'disabled', 'colorInherit', 'sizeSmall', 'sizeMedium', 'sizeLarge', 'info', 'error', 'warning', 'success']);
 export default fabClasses;

package/legacy/ImageList/ImageList.js

@@ -168,6 +168,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/legacy/Modal/Modal.js

@@ -243,7 +243,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/legacy/Rating/Rating.js

@@ -425,7 +425,7 @@ var Rating = /*#__PURE__*/React.forwardRef(function Rating(inProps, ref) {
 
   var handleChange = function handleChange(event) {
     var 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/legacy/Select/SelectInput.js

@@ -199,6 +199,10 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
     }
   }, [autoFocus]);
   React.useEffect(function () {
+    if (!labelId) {
+      return undefined;
+    }
+
     var label = ownerDocument(displayRef.current).getElementById(labelId);
 
     if (label) {
@@ -298,7 +302,7 @@ var SelectInput = /*#__PURE__*/React.forwardRef(function SelectInput(props, ref)
         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.
           var nativeEvent = event.nativeEvent || event;
           var clonedEvent = new nativeEvent.constructor(nativeEvent.type, nativeEvent);

package/legacy/Slider/Slider.js

@@ -707,7 +707,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/legacy/Snackbar/Snackbar.js

@@ -289,7 +289,10 @@ var 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/legacy/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/legacy/styles/makeStyles.js

@@ -1,4 +1,4 @@
 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.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#material-ui-core-styles for more details." : _formatMuiErrorMessage(14));
+  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: makeStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(14));
 }

package/legacy/styles/withStyles.js

@@ -1,4 +1,4 @@
 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.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#material-ui-core-styles for more details." : _formatMuiErrorMessage(15));
+  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withStyles is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(15));
 }

package/legacy/styles/withTheme.js

@@ -1,4 +1,4 @@
 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.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#material-ui-core-styles for more details." : _formatMuiErrorMessage(16));
+  throw new Error(process.env.NODE_ENV !== "production" ? "MUI: withTheme is not longer exported from @mui/material/styles.\nYou have to import it from @mui/styles.\nSee https://mui.com/r/migration-v4/#mui-material-styles for more details." : _formatMuiErrorMessage(16));
 }

package/legacy/useMediaQuery/useMediaQuery.js

@@ -39,7 +39,7 @@ function useMediaQueryOld(query, defaultMatches, matchMedia, ssrMatchMedia, noSs
     var updateMatch = function 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/locale/index.d.ts

@@ -1,68 +1,68 @@
-import { ComponentsPropsList } from '../styles/props';
-export interface Localization {
-    components?: {
-        MuiAlert?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
-        };
-        MuiBreadcrumbs?: {
-            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
-        };
-        MuiTablePagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
-        };
-        MuiRating?: {
-            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
-        };
-        MuiAutocomplete?: {
-            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
-        };
-        MuiPagination?: {
-            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
-        };
-    };
-}
-export declare const amET: Localization;
-export declare const arEG: Localization;
-export declare const arSD: Localization;
-export declare const azAZ: Localization;
-export declare const bnBD: Localization;
-export declare const bgBG: Localization;
-export declare const caES: Localization;
-export declare const csCZ: Localization;
-export declare const daDK: Localization;
-export declare const deDE: Localization;
-export declare const elGR: Localization;
-export declare const enUS: Localization;
-export declare const esES: Localization;
-export declare const etEE: Localization;
-export declare const faIR: Localization;
-export declare const fiFI: Localization;
-export declare const frFR: Localization;
-export declare const heIL: Localization;
-export declare const hiIN: Localization;
-export declare const huHU: Localization;
-export declare const hyAM: Localization;
-export declare const idID: Localization;
-export declare const isIS: Localization;
-export declare const itIT: Localization;
-export declare const jaJP: Localization;
-export declare const khKH: Localization;
-export declare const koKR: Localization;
-export declare const kzKZ: Localization;
-export declare const nbNO: Localization;
-export declare const nlNL: Localization;
-export declare const plPL: Localization;
-export declare const ptBR: Localization;
-export declare const ptPT: Localization;
-export declare const roRO: Localization;
-export declare const ruRU: Localization;
-export declare const siLK: Localization;
-export declare const skSK: Localization;
-export declare const svSE: Localization;
-export declare const thTH: Localization;
-export declare const trTR: Localization;
-export declare const ukUA: Localization;
-export declare const viVN: Localization;
-export declare const zhCN: Localization;
-export declare const zhHK: Localization;
-export declare const zhTW: Localization;
+import { ComponentsPropsList } from '../styles/props';
+export interface Localization {
+    components?: {
+        MuiAlert?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAlert'], 'closeText'>;
+        };
+        MuiBreadcrumbs?: {
+            defaultProps: Pick<ComponentsPropsList['MuiBreadcrumbs'], 'expandText'>;
+        };
+        MuiTablePagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiTablePagination'], 'labelRowsPerPage' | 'labelDisplayedRows' | 'getItemAriaLabel'>;
+        };
+        MuiRating?: {
+            defaultProps: Pick<ComponentsPropsList['MuiRating'], 'emptyLabelText' | 'getLabelText'>;
+        };
+        MuiAutocomplete?: {
+            defaultProps: Pick<ComponentsPropsList['MuiAutocomplete'], 'clearText' | 'closeText' | 'loadingText' | 'noOptionsText' | 'openText'>;
+        };
+        MuiPagination?: {
+            defaultProps: Pick<ComponentsPropsList['MuiPagination'], 'aria-label' | 'getItemAriaLabel'>;
+        };
+    };
+}
+export declare const amET: Localization;
+export declare const arEG: Localization;
+export declare const arSD: Localization;
+export declare const azAZ: Localization;
+export declare const bnBD: Localization;
+export declare const bgBG: Localization;
+export declare const caES: Localization;
+export declare const csCZ: Localization;
+export declare const daDK: Localization;
+export declare const deDE: Localization;
+export declare const elGR: Localization;
+export declare const enUS: Localization;
+export declare const esES: Localization;
+export declare const etEE: Localization;
+export declare const faIR: Localization;
+export declare const fiFI: Localization;
+export declare const frFR: Localization;
+export declare const heIL: Localization;
+export declare const hiIN: Localization;
+export declare const huHU: Localization;
+export declare const hyAM: Localization;
+export declare const idID: Localization;
+export declare const isIS: Localization;
+export declare const itIT: Localization;
+export declare const jaJP: Localization;
+export declare const khKH: Localization;
+export declare const koKR: Localization;
+export declare const kzKZ: Localization;
+export declare const nbNO: Localization;
+export declare const nlNL: Localization;
+export declare const plPL: Localization;
+export declare const ptBR: Localization;
+export declare const ptPT: Localization;
+export declare const roRO: Localization;
+export declare const ruRU: Localization;
+export declare const siLK: Localization;
+export declare const skSK: Localization;
+export declare const svSE: Localization;
+export declare const thTH: Localization;
+export declare const trTR: Localization;
+export declare const ukUA: Localization;
+export declare const viVN: Localization;
+export declare const zhCN: Localization;
+export declare const zhHK: Localization;
+export declare const zhTW: Localization;

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", "max", "spacing", "total", "variant"];
+const _excluded = ["children", "className", "componentsProps", "max", "spacing", "total", "variant"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { isFragment } from 'react-is';
@@ -71,6 +71,7 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
   const {
     children: childrenProp,
     className,
+    componentsProps = {},
     max = 5,
     spacing = 'medium',
     total,
@@ -111,15 +112,16 @@ const AvatarGroup = /*#__PURE__*/React.forwardRef(function AvatarGroup(inProps,
     className: clsx(classes.root, className),
     ref: ref
   }, other, {
-    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, {
+    children: [extraAvatars ? /*#__PURE__*/_jsxs(AvatarGroupAvatar, _extends({
       ownerState: ownerState,
-      className: classes.avatar,
-      style: {
+      variant: variant
+    }, componentsProps.additionalAvatar, {
+      className: clsx(classes.avatar, componentsProps.additionalAvatar?.className),
+      style: _extends({
         marginLeft
-      },
-      variant: variant,
+      }, componentsProps.additionalAvatar?.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: clsx(child.props.className, classes.avatar),
         style: _extends({
@@ -153,6 +155,14 @@ process.env.NODE_ENV !== "production" ? AvatarGroup.propTypes
    */
   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

package/modern/Badge/Badge.js

@@ -169,7 +169,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'
@@ -183,7 +183,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;
   }
 
@@ -301,6 +301,7 @@ process.env.NODE_ENV !== "production" ? Badge.propTypes
 
   /**
    * If `true`, the badge is invisible.
+   * @default false
    */
   invisible: PropTypes.bool,
 

package/modern/ButtonBase/ButtonBase.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-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"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
@@ -118,12 +118,14 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
     onTouchStart,
     tabIndex = 0,
     TouchRippleProps,
+    touchRippleRef,
     type
   } = props,
         other = _objectWithoutPropertiesLoose(props, _excluded);
 
   const buttonRef = React.useRef(null);
   const rippleRef = React.useRef(null);
+  const handleRippleRef = useForkRef(rippleRef, touchRippleRef);
   const {
     isFocusVisibleRef,
     onFocus: handleFocusVisible,
@@ -343,7 +345,7 @@ const ButtonBase = /*#__PURE__*/React.forwardRef(function ButtonBase(inProps, re
 
     /* TouchRipple is only needed client-side, x2 boost on the server. */
     _jsx(TouchRipple, _extends({
-      ref: rippleRef,
+      ref: handleRippleRef,
       center: centerRipple
     }, TouchRippleProps)) : null]
   }));
@@ -526,6 +528,17 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes
    */
   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
    */