@mui/material 9.0.1 → 9.1.1

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': {
@@ -109,17 +110,6 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
-      props: ({
-        ownerState
-      }) => ownerState.startIcon || ownerState.loading && ownerState.loadingPosition === 'start',
-      style: {
-        '&::before': {
-          content: '"\\200b"',
-          width: 0,
-          overflow: 'hidden'
-        }
-      }
-    }, {
       props: {
         variant: 'contained'
       },
@@ -289,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}`]: {
@@ -312,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'
@@ -327,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
@@ -371,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

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': {
@@ -102,17 +103,6 @@ const ButtonRoot = styled(ButtonBase, {
       color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
-      props: ({
-        ownerState
-      }) => ownerState.startIcon || ownerState.loading && ownerState.loadingPosition === 'start',
-      style: {
-        '&::before': {
-          content: '"\\200b"',
-          width: 0,
-          overflow: 'hidden'
-        }
-      }
-    }, {
       props: {
         variant: 'contained'
       },
@@ -282,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}`]: {
@@ -305,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'
@@ -320,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
@@ -364,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

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;