@mui/material 9.0.0 → 9.1.0

package/Backdrop/Backdrop.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { FadeProps } from "../Fade/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { Theme } from "../styles/index.js";
 import { BackdropClasses } from "./backdropClasses.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
@@ -14,7 +14,7 @@ export interface BackdropSlots {
   root: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Fade
    */
   transition: React.ElementType;

package/Badge/Badge.js

@@ -20,6 +20,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _badgeClasses = _interopRequireWildcard(require("./badgeClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -78,7 +79,10 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
   borderRadius: RADIUS_STANDARD,
   zIndex: 1,
   // Render the badge on top of potential ripples.
-  transition: theme.transitions.create('transform', {
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
+  ...(0, _utils.getTransitionStyles)(theme, 'transform', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
@@ -105,33 +109,19 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
       invisible: true
     },
     style: {
-      transition: theme.transitions.create('transform', {
+      ...(0, _utils.getTransitionStyles)(theme, 'transform', {
         easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.leavingScreen
       })
     }
   }, {
-    style: ({
-      ownerState
-    }) => {
-      const {
-        vertical,
-        horizontal
-      } = ownerState.anchorOrigin;
-      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
-      return {
-        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
-        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
-        top: vertical === 'top' ? offset : 'initial',
-        bottom: vertical === 'bottom' ? offset : 'initial',
-        right: horizontal === 'right' ? offset : 'initial',
-        left: horizontal === 'left' ? offset : 'initial',
-        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
-        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
-        [`&.${_badgeClasses.default.invisible}`]: {
-          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
-        }
-      };
+    style: {
+      inset: 'var(--Badge-inset)',
+      transform: 'scale(1) translate(var(--Badge-translate))',
+      transformOrigin: 'var(--Badge-origin)',
+      [`&.${_badgeClasses.default.invisible}`]: {
+        transform: 'scale(0) translate(var(--Badge-translate))'
+      }
     }
   }]
 })));
@@ -220,11 +210,28 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       as: component
     }
   });
+  const {
+    vertical,
+    horizontal
+  } = anchorOrigin;
+  const offset = overlap === 'circular' ? '14%' : '0';
+  const top = vertical === 'top' ? offset : 'auto';
+  const bottom = vertical === 'bottom' ? offset : 'auto';
+  const right = horizontal === 'right' ? offset : 'auto';
+  const left = horizontal === 'left' ? offset : 'auto';
   const [BadgeSlot, badgeProps] = (0, _useSlot.default)('badge', {
     elementType: BadgeBadge,
     externalForwardedProps,
     ownerState,
-    className: classes.badge
+    className: classes.badge,
+    additionalProps: {
+      'aria-hidden': true,
+      style: {
+        '--Badge-translate': `${horizontal === 'right' ? '50%' : '-50%'}, ${vertical === 'top' ? '-50%' : '50%'}`,
+        '--Badge-inset': `${top} ${right} ${bottom} ${left}`,
+        '--Badge-origin': `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`
+      }
+    }
   });
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(RootSlot, {
     ...rootProps,

package/Badge/Badge.mjs

@@ -13,6 +13,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import badgeClasses, { getBadgeUtilityClass } from "./badgeClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const RADIUS_STANDARD = 10;
 const RADIUS_DOT = 4;
@@ -71,7 +72,10 @@ const BadgeBadge = styled('span', {
   borderRadius: RADIUS_STANDARD,
   zIndex: 1,
   // Render the badge on top of potential ripples.
-  transition: theme.transitions.create('transform', {
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
+  ...getTransitionStyles(theme, 'transform', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen
   }),
@@ -98,33 +102,19 @@ const BadgeBadge = styled('span', {
       invisible: true
     },
     style: {
-      transition: theme.transitions.create('transform', {
+      ...getTransitionStyles(theme, 'transform', {
         easing: theme.transitions.easing.easeInOut,
         duration: theme.transitions.duration.leavingScreen
       })
     }
   }, {
-    style: ({
-      ownerState
-    }) => {
-      const {
-        vertical,
-        horizontal
-      } = ownerState.anchorOrigin;
-      const offset = ownerState.overlap === 'circular' ? '14%' : 0;
-      return {
-        '--Badge-translateX': horizontal === 'right' ? '50%' : '-50%',
-        '--Badge-translateY': vertical === 'top' ? '-50%' : '50%',
-        top: vertical === 'top' ? offset : 'initial',
-        bottom: vertical === 'bottom' ? offset : 'initial',
-        right: horizontal === 'right' ? offset : 'initial',
-        left: horizontal === 'left' ? offset : 'initial',
-        transform: 'scale(1) translate(var(--Badge-translateX), var(--Badge-translateY))',
-        transformOrigin: `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`,
-        [`&.${badgeClasses.invisible}`]: {
-          transform: 'scale(0) translate(var(--Badge-translateX), var(--Badge-translateY))'
-        }
-      };
+    style: {
+      inset: 'var(--Badge-inset)',
+      transform: 'scale(1) translate(var(--Badge-translate))',
+      transformOrigin: 'var(--Badge-origin)',
+      [`&.${badgeClasses.invisible}`]: {
+        transform: 'scale(0) translate(var(--Badge-translate))'
+      }
     }
   }]
 })));
@@ -213,11 +203,28 @@ const Badge = /*#__PURE__*/React.forwardRef(function Badge(inProps, ref) {
       as: component
     }
   });
+  const {
+    vertical,
+    horizontal
+  } = anchorOrigin;
+  const offset = overlap === 'circular' ? '14%' : '0';
+  const top = vertical === 'top' ? offset : 'auto';
+  const bottom = vertical === 'bottom' ? offset : 'auto';
+  const right = horizontal === 'right' ? offset : 'auto';
+  const left = horizontal === 'left' ? offset : 'auto';
   const [BadgeSlot, badgeProps] = useSlot('badge', {
     elementType: BadgeBadge,
     externalForwardedProps,
     ownerState,
-    className: classes.badge
+    className: classes.badge,
+    additionalProps: {
+      'aria-hidden': true,
+      style: {
+        '--Badge-translate': `${horizontal === 'right' ? '50%' : '-50%'}, ${vertical === 'top' ? '-50%' : '50%'}`,
+        '--Badge-inset': `${top} ${right} ${bottom} ${left}`,
+        '--Badge-origin': `${horizontal === 'right' ? '100%' : '0%'} ${vertical === 'top' ? '0%' : '100%'}`
+      }
+    }
   });
   return /*#__PURE__*/_jsxs(RootSlot, {
     ...rootProps,

package/BottomNavigationAction/BottomNavigationAction.js

@@ -16,6 +16,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _unsupportedProp = _interopRequireDefault(require("../utils/unsupportedProp"));
+var _utils = require("../transitions/utils");
 var _bottomNavigationActionClasses = _interopRequireWildcard(require("./bottomNavigationActionClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -43,7 +44,7 @@ const BottomNavigationActionRoot = (0, _zeroStyled.styled)(_ButtonBase.default,
 })((0, _memoTheme.default)(({
   theme
 }) => ({
-  transition: theme.transitions.create(['color', 'padding-top'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
   padding: '0px 12px',
@@ -83,7 +84,10 @@ const BottomNavigationActionLabel = (0, _zeroStyled.styled)('span', {
   fontFamily: theme.typography.fontFamily,
   fontSize: theme.typography.pxToRem(12),
   opacity: 1,
-  transition: 'font-size 0.2s, opacity 0.2s',
+  ...(0, _utils.getTransitionStyles)(theme, ['font-size', 'opacity'], {
+    duration: '0.2s',
+    easing: 'ease'
+  }),
   transitionDelay: '0.1s',
   [`&.${_bottomNavigationActionClasses.default.selected}`]: {
     fontSize: theme.typography.pxToRem(14)

package/BottomNavigationAction/BottomNavigationAction.mjs

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import unsupportedProp from "../utils/unsupportedProp.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import bottomNavigationActionClasses, { getBottomNavigationActionUtilityClass } from "./bottomNavigationActionClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -36,7 +37,7 @@ const BottomNavigationActionRoot = styled(ButtonBase, {
 })(memoTheme(({
   theme
 }) => ({
-  transition: theme.transitions.create(['color', 'padding-top'], {
+  ...getTransitionStyles(theme, ['color', 'padding-top'], {
     duration: theme.transitions.duration.short
   }),
   padding: '0px 12px',
@@ -76,7 +77,10 @@ const BottomNavigationActionLabel = styled('span', {
   fontFamily: theme.typography.fontFamily,
   fontSize: theme.typography.pxToRem(12),
   opacity: 1,
-  transition: 'font-size 0.2s, opacity 0.2s',
+  ...getTransitionStyles(theme, ['font-size', 'opacity'], {
+    duration: '0.2s',
+    easing: 'ease'
+  }),
   transitionDelay: '0.1s',
   [`&.${bottomNavigationActionClasses.selected}`]: {
     fontSize: theme.typography.pxToRem(14)

package/Button/Button.js

@@ -24,6 +24,7 @@ var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/c
 var _buttonClasses = _interopRequireWildcard(require("./buttonClasses"));
 var _ButtonGroupContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupContext"));
 var _ButtonGroupButtonContext = _interopRequireDefault(require("../ButtonGroup/ButtonGroupButtonContext"));
+var _utils2 = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -99,7 +100,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
     padding: '6px 16px',
     border: 0,
     borderRadius: (theme.vars || theme).shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+    ...(0, _utils2.getTransitionStyles)(theme, ['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
     '&:hover': {
@@ -278,7 +279,7 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
         loadingPosition: 'center'
       },
       style: {
-        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+        ...(0, _utils2.getTransitionStyles)(theme, ['background-color', 'box-shadow', 'border-color'], {
           duration: theme.transitions.duration.short
         }),
         [`&.${_buttonClasses.default.loading}`]: {
@@ -301,8 +302,14 @@ const ButtonStartIcon = (0, _zeroStyled.styled)('span', {
   theme
 }) => ({
   display: 'inherit',
+  alignItems: 'center',
   marginRight: 8,
   marginLeft: -4,
+  '&::before': {
+    content: '"\\200b"',
+    width: 0,
+    overflow: 'hidden'
+  },
   variants: [{
     props: {
       size: 'small'
@@ -316,7 +323,7 @@ const ButtonStartIcon = (0, _zeroStyled.styled)('span', {
       loading: true
     },
     style: {
-      transition: theme.transitions.create(['opacity'], {
+      ...(0, _utils2.getTransitionStyles)(theme, ['opacity'], {
         duration: theme.transitions.duration.short
       }),
       opacity: 0
@@ -360,7 +367,7 @@ const ButtonEndIcon = (0, _zeroStyled.styled)('span', {
       loading: true
     },
     style: {
-      transition: theme.transitions.create(['opacity'], {
+      ...(0, _utils2.getTransitionStyles)(theme, ['opacity'], {
         duration: theme.transitions.duration.short
       }),
       opacity: 0
@@ -558,6 +565,12 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       children: loadingIndicator
     })
   }) : null;
+
+  // Don't forward the 'root' classes to the ButtonBase, as they will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, {
     ownerState: ownerState,
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
@@ -570,7 +583,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type: type,
     id: loading ? loadingId : idProp,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });
@@ -683,7 +696,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'reset', 'submit']), _propTypes.default.string]),
+  type: _propTypes.default.string,
   /**
    * The variant to use.
    * @default 'text'

package/Button/Button.mjs

@@ -17,6 +17,7 @@ import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFil
 import buttonClasses, { getButtonUtilityClass } from "./buttonClasses.mjs";
 import ButtonGroupContext from "../ButtonGroup/ButtonGroupContext.mjs";
 import ButtonGroupButtonContext from "../ButtonGroup/ButtonGroupButtonContext.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -92,7 +93,7 @@ const ButtonRoot = styled(ButtonBase, {
     padding: '6px 16px',
     border: 0,
     borderRadius: (theme.vars || theme).shape.borderRadius,
-    transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color', 'color'], {
+    ...getTransitionStyles(theme, ['background-color', 'box-shadow', 'border-color', 'color'], {
       duration: theme.transitions.duration.short
     }),
     '&:hover': {
@@ -271,7 +272,7 @@ const ButtonRoot = styled(ButtonBase, {
         loadingPosition: 'center'
       },
       style: {
-        transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+        ...getTransitionStyles(theme, ['background-color', 'box-shadow', 'border-color'], {
           duration: theme.transitions.duration.short
         }),
         [`&.${buttonClasses.loading}`]: {
@@ -294,8 +295,14 @@ const ButtonStartIcon = styled('span', {
   theme
 }) => ({
   display: 'inherit',
+  alignItems: 'center',
   marginRight: 8,
   marginLeft: -4,
+  '&::before': {
+    content: '"\\200b"',
+    width: 0,
+    overflow: 'hidden'
+  },
   variants: [{
     props: {
       size: 'small'
@@ -309,7 +316,7 @@ const ButtonStartIcon = styled('span', {
       loading: true
     },
     style: {
-      transition: theme.transitions.create(['opacity'], {
+      ...getTransitionStyles(theme, ['opacity'], {
         duration: theme.transitions.duration.short
       }),
       opacity: 0
@@ -353,7 +360,7 @@ const ButtonEndIcon = styled('span', {
       loading: true
     },
     style: {
-      transition: theme.transitions.create(['opacity'], {
+      ...getTransitionStyles(theme, ['opacity'], {
         duration: theme.transitions.duration.short
       }),
       opacity: 0
@@ -551,6 +558,12 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       children: loadingIndicator
     })
   }) : null;
+
+  // Don't forward the 'root' classes to the ButtonBase, as they will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/_jsxs(ButtonRoot, {
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className, positionClassName),
@@ -563,7 +576,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type: type,
     id: loading ? loadingId : idProp,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });
@@ -676,7 +689,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
+  type: PropTypes.string,
   /**
    * The variant to use.
    * @default 'text'

package/ButtonBase/ButtonBase.d.mts

@@ -88,6 +88,13 @@ export interface ButtonBaseOwnProps {
    * A ref that points to the `TouchRipple` element.
    */
   touchRippleRef?: React.Ref<TouchRippleActions> | undefined;
+  /**
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
+   */
+  type?: string | undefined;
 }
 export interface ButtonBaseTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> {
   props: AdditionalProps & ButtonBaseOwnProps;

package/ButtonBase/ButtonBase.d.ts

@@ -88,6 +88,13 @@ export interface ButtonBaseOwnProps {
    * A ref that points to the `TouchRipple` element.
    */
   touchRippleRef?: React.Ref<TouchRippleActions> | undefined;
+  /**
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
+   */
+  type?: string | undefined;
 }
 export interface ButtonBaseTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> {
   props: AdditionalProps & ButtonBaseOwnProps;

package/ButtonBase/ButtonBase.js

@@ -464,8 +464,11 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
     })
   })]),
   /**
-   * @ignore
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
    */
-  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'reset', 'submit']), _propTypes.default.string])
+  type: _propTypes.default.string
 } : void 0;
 var _default = exports.default = ButtonBase;

package/ButtonBase/ButtonBase.mjs

@@ -457,8 +457,11 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
     })
   })]),
   /**
-   * @ignore
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
    */
-  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string])
+  type: PropTypes.string
 } : void 0;
 export default ButtonBase;

package/ButtonBase/Ripple.js

@@ -10,6 +10,7 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
+var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _jsxRuntime = require("react/jsx-runtime");
 /**
  * @ignore - internal component.
@@ -26,6 +27,11 @@ var _jsxRuntime = require("react/jsx-runtime");
     timeout
   } = props;
   const [leaving, setLeaving] = React.useState(false);
+  const exitTimer = (0, _useTimeout.default)();
+  const exitTimerStartedRef = React.useRef(false);
+  const onExitedRef = React.useRef(onExited);
+  onExitedRef.current = onExited;
+  const hasExitedCallback = onExited != null;
   const rippleClassName = (0, _clsx.default)(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
   const rippleStyles = {
     width: rippleSize,
@@ -38,15 +44,19 @@ var _jsxRuntime = require("react/jsx-runtime");
     setLeaving(true);
   }
   React.useEffect(() => {
-    if (!inProp && onExited != null) {
-      // react-transition-group#onExited
-      const timeoutId = setTimeout(onExited, timeout);
-      return () => {
-        clearTimeout(timeoutId);
-      };
+    if (!inProp && hasExitedCallback) {
+      if (!exitTimerStartedRef.current) {
+        exitTimerStartedRef.current = true;
+        exitTimer.start(timeout, () => {
+          exitTimerStartedRef.current = false;
+          onExitedRef.current?.();
+        });
+      }
+    } else {
+      exitTimerStartedRef.current = false;
+      exitTimer.clear();
     }
-    return undefined;
-  }, [onExited, inProp, timeout]);
+  }, [exitTimer, hasExitedCallback, inProp, timeout]);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
     className: rippleClassName,
     style: rippleStyles,
@@ -62,11 +72,11 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes /* remove-proptypes */
   classes: _propTypes.default.object.isRequired,
   className: _propTypes.default.string,
   /**
-   * @ignore - injected from TransitionGroup
+   * @ignore - controlled by TouchRipple
    */
   in: _propTypes.default.bool,
   /**
-   * @ignore - injected from TransitionGroup
+   * @ignore - controlled by TouchRipple
    */
   onExited: _propTypes.default.func,
   /**
@@ -86,7 +96,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes /* remove-proptypes */
    */
   rippleY: _propTypes.default.number,
   /**
-   * exit delay
+   * Exit delay.
    */
   timeout: _propTypes.default.number.isRequired
 } : void 0;

package/ButtonBase/Ripple.mjs

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
+import useTimeout from '@mui/utils/useTimeout';
 
 /**
  * @ignore - internal component.
@@ -21,6 +22,11 @@ function Ripple(props) {
     timeout
   } = props;
   const [leaving, setLeaving] = React.useState(false);
+  const exitTimer = useTimeout();
+  const exitTimerStartedRef = React.useRef(false);
+  const onExitedRef = React.useRef(onExited);
+  onExitedRef.current = onExited;
+  const hasExitedCallback = onExited != null;
   const rippleClassName = clsx(className, classes.ripple, classes.rippleVisible, pulsate && classes.ripplePulsate);
   const rippleStyles = {
     width: rippleSize,
@@ -33,15 +39,19 @@ function Ripple(props) {
     setLeaving(true);
   }
   React.useEffect(() => {
-    if (!inProp && onExited != null) {
-      // react-transition-group#onExited
-      const timeoutId = setTimeout(onExited, timeout);
-      return () => {
-        clearTimeout(timeoutId);
-      };
+    if (!inProp && hasExitedCallback) {
+      if (!exitTimerStartedRef.current) {
+        exitTimerStartedRef.current = true;
+        exitTimer.start(timeout, () => {
+          exitTimerStartedRef.current = false;
+          onExitedRef.current?.();
+        });
+      }
+    } else {
+      exitTimerStartedRef.current = false;
+      exitTimer.clear();
     }
-    return undefined;
-  }, [onExited, inProp, timeout]);
+  }, [exitTimer, hasExitedCallback, inProp, timeout]);
   return /*#__PURE__*/_jsx("span", {
     className: rippleClassName,
     style: rippleStyles,
@@ -57,11 +67,11 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes /* remove-proptypes */
   classes: PropTypes.object.isRequired,
   className: PropTypes.string,
   /**
-   * @ignore - injected from TransitionGroup
+   * @ignore - controlled by TouchRipple
    */
   in: PropTypes.bool,
   /**
-   * @ignore - injected from TransitionGroup
+   * @ignore - controlled by TouchRipple
    */
   onExited: PropTypes.func,
   /**
@@ -81,7 +91,7 @@ process.env.NODE_ENV !== "production" ? Ripple.propTypes /* remove-proptypes */
    */
   rippleY: PropTypes.number,
   /**
-   * exit delay
+   * Exit delay.
    */
   timeout: PropTypes.number.isRequired
 } : void 0;