@mui/material 9.0.1 → 9.1.1

package/ButtonBase/TouchRipple.js

@@ -9,16 +9,109 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = exports.TouchRippleRoot = exports.TouchRippleRipple = exports.DELAY_RIPPLE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
 var _clsx = _interopRequireDefault(require("clsx"));
+var _useOnMount = _interopRequireDefault(require("@mui/utils/useOnMount"));
 var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _zeroStyled = require("../zero-styled");
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Ripple = _interopRequireDefault(require("./Ripple"));
 var _touchRippleClasses = _interopRequireDefault(require("./touchRippleClasses"));
+var _useEventCallback = _interopRequireDefault(require("../utils/useEventCallback"));
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _jsxRuntime = require("react/jsx-runtime");
 const DURATION = 550;
 const DELAY_RIPPLE = exports.DELAY_RIPPLE = 80;
+const EMPTY_OBJ = {};
+const EMPTY_ARRAY = [];
+const NOOP = () => {};
+
+/**
+ * Keep the same DOM order TouchRipple had when it used react-transition-group:
+ * exiting ripples stay in place, and new ripples are inserted before the final
+ * group of ripples that are waiting for their exit animation to finish.
+ *
+ * @param {number[]} prevOrder The previous DOM order, including ripples that may be exiting.
+ * @param {number[]} nextActiveKeys The ripples that should still be treated as active.
+ * @returns {number[]} The next DOM order, preserving the position of exiting ripples where possible.
+ */
+function mergeRippleOrder(prevOrder, nextActiveKeys) {
+  const nextKeySet = new Set(nextActiveKeys);
+  const nextKeysPending = new Map();
+  let pendingKeys = [];
+  for (const prevKey of prevOrder) {
+    if (nextKeySet.has(prevKey)) {
+      if (pendingKeys.length > 0) {
+        nextKeysPending.set(prevKey, pendingKeys);
+        pendingKeys = [];
+      }
+    } else {
+      pendingKeys.push(prevKey);
+    }
+  }
+  const nextOrder = [];
+  for (const nextKey of nextActiveKeys) {
+    const pendingBefore = nextKeysPending.get(nextKey);
+    if (pendingBefore) {
+      nextOrder.push(...pendingBefore);
+    }
+    nextOrder.push(nextKey);
+  }
+  nextOrder.push(...pendingKeys);
+  return nextOrder;
+}
+
+/**
+ * Calculate where the ripple should start and how large it must be to cover the host element.
+ *
+ * @param {object} params
+ * @param {object} params.event The mouse or touch event that started the ripple.
+ * @param {HTMLElement | null} params.element The host element used for measurements. Tests pass `null`.
+ * @param {boolean} params.center If `true`, start the ripple from the center of the host element.
+ * @returns {{ rippleX: number, rippleY: number, rippleSize: number }} The ripple position and size.
+ */
+function computeRippleState({
+  event,
+  element,
+  center
+}) {
+  const rect = element ? element.getBoundingClientRect() : {
+    width: 0,
+    height: 0,
+    left: 0,
+    top: 0
+  };
+  let rippleX;
+  let rippleY;
+  if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
+    rippleX = Math.round(rect.width / 2);
+    rippleY = Math.round(rect.height / 2);
+  } else {
+    const {
+      clientX,
+      clientY
+    } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
+    rippleX = Math.round(clientX - rect.left);
+    rippleY = Math.round(clientY - rect.top);
+  }
+  let rippleSize;
+  if (center) {
+    rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
+
+    // Mobile Chrome can skip this animation for even pixel sizes.
+    if (rippleSize % 2 === 0) {
+      rippleSize += 1;
+    }
+  } else {
+    const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
+    const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
+    rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
+  }
+  return {
+    rippleX,
+    rippleY,
+    rippleSize
+  };
+}
 const enterKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     transform: scale(0);
@@ -52,6 +145,44 @@ const pulsateKeyframe = (0, _zeroStyled.keyframes)`
     transform: scale(1);
   }
 `;
+function getAnimationStyles(theme) {
+  if (theme.motion.reducedMotion === 'always') {
+    return null;
+  }
+  const styles = (0, _zeroStyled.css)`
+    &.${_touchRippleClasses.default.rippleVisible} {
+      animation-name: ${enterKeyframe};
+      animation-duration: ${DURATION}ms;
+      animation-timing-function: ${theme.transitions.easing.easeInOut};
+    }
+
+    &.${_touchRippleClasses.default.ripplePulsate} {
+      animation-duration: ${theme.transitions.duration.shorter}ms;
+    }
+
+    & .${_touchRippleClasses.default.childLeaving} {
+      animation-name: ${exitKeyframe};
+      animation-duration: ${DURATION}ms;
+      animation-timing-function: ${theme.transitions.easing.easeInOut};
+    }
+
+    & .${_touchRippleClasses.default.childPulsate} {
+      animation-name: ${pulsateKeyframe};
+      animation-duration: 2500ms;
+      animation-timing-function: ${theme.transitions.easing.easeInOut};
+      animation-iteration-count: infinite;
+      animation-delay: 200ms;
+    }
+  `;
+  if (theme.motion.reducedMotion === 'system') {
+    return (0, _zeroStyled.css)`
+      @media (prefers-reduced-motion: no-preference) {
+        ${styles}
+      }
+    `;
+  }
+  return styles;
+}
 const TouchRippleRoot = exports.TouchRippleRoot = (0, _zeroStyled.styled)('span', {
   name: 'MuiTouchRipple',
   slot: 'Root'
@@ -67,8 +198,8 @@ const TouchRippleRoot = exports.TouchRippleRoot = (0, _zeroStyled.styled)('span'
   borderRadius: 'inherit'
 });
 
-// This `styled()` function invokes keyframes. `styled-components` only supports keyframes
-// in string templates. Do not convert these styles in JS object as it will break.
+// This `styled()` call uses keyframes. styled-components only supports keyframes
+// in template strings, so do not convert these styles to a JS object.
 const TouchRippleRipple = exports.TouchRippleRipple = (0, _zeroStyled.styled)(_Ripple.default, {
   name: 'MuiTouchRipple',
   slot: 'Ripple'
@@ -79,19 +210,16 @@ const TouchRippleRipple = exports.TouchRippleRipple = (0, _zeroStyled.styled)(_R
   &.${_touchRippleClasses.default.rippleVisible} {
     opacity: 0.3;
     transform: scale(1);
-    animation-name: ${enterKeyframe};
-    animation-duration: ${DURATION}ms;
-    animation-timing-function: ${({
-  theme
-}) => theme.transitions.easing.easeInOut};
-  }
-
-  &.${_touchRippleClasses.default.ripplePulsate} {
-    animation-duration: ${({
-  theme
-}) => theme.transitions.duration.shorter}ms;
   }
 
+  /*
+   * Order matters: 'child', 'childLeaving' and 'childPulsate' apply to the same
+   * element with equal specificity, so the later rule wins. 'child' must come
+   * before 'childLeaving' so the leaving 'opacity: 0' takes precedence. A focus
+   * (pulsate) ripple keeps 'pulsateKeyframe' (no opacity animation) on exit, so
+   * it relies on this static 'opacity: 0' to disappear on blur instead of
+   * lingering until removal.
+   */
   & .${_touchRippleClasses.default.child} {
     opacity: 1;
     display: block;
@@ -103,11 +231,6 @@ const TouchRippleRipple = exports.TouchRippleRipple = (0, _zeroStyled.styled)(_R
 
   & .${_touchRippleClasses.default.childLeaving} {
     opacity: 0;
-    animation-name: ${exitKeyframe};
-    animation-duration: ${DURATION}ms;
-    animation-timing-function: ${({
-  theme
-}) => theme.transitions.easing.easeInOut};
   }
 
   & .${_touchRippleClasses.default.childPulsate} {
@@ -115,35 +238,45 @@ const TouchRippleRipple = exports.TouchRippleRipple = (0, _zeroStyled.styled)(_R
     /* @noflip */
     left: 0px;
     top: 0;
-    animation-name: ${pulsateKeyframe};
-    animation-duration: 2500ms;
-    animation-timing-function: ${({
-  theme
-}) => theme.transitions.easing.easeInOut};
-    animation-iteration-count: infinite;
-    animation-delay: 200ms;
   }
+
+  ${({
+  theme
+}) => getAnimationStyles(theme)}
 `;
 
 /**
  * @ignore - internal component.
- *
- * TODO v5: Make private
  */
 const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,
     name: 'MuiTouchRipple'
   });
+  const theme = (0, _zeroStyled.useTheme)();
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, false);
   const {
     center: centerProp = false,
-    classes = {},
+    classes = EMPTY_OBJ,
     className,
     ...other
   } = props;
-  const [ripples, setRipples] = React.useState([]);
+  // Store ripples as data so we can keep exiting ripples mounted until their
+  // exit animation ends. Ripple calls onExited when it is safe to remove one.
+  const [rippleState, setRippleState] = React.useState({
+    items: EMPTY_ARRAY,
+    order: EMPTY_ARRAY
+  });
+  const ripples = rippleState.items;
   const nextKey = React.useRef(0);
   const rippleCallback = React.useRef(null);
+  const mountedRef = React.useRef(false);
+  (0, _useOnMount.default)(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  });
   React.useEffect(() => {
     if (rippleCallback.current) {
       rippleCallback.current();
@@ -157,10 +290,23 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
   // We don't want to display the ripple for touch scroll events.
   const startTimer = (0, _useTimeout.default)();
 
-  // This is the hook called once the previous timeout is ready.
+  // Holds delayed touch-start work until the delay expires or touchend forces it to run.
   const startTimerCommit = React.useRef(null);
   const container = React.useRef(null);
-  const startCommit = React.useCallback(params => {
+  const handleExited = (0, _useEventCallback.default)(key => {
+    if (!mountedRef.current) {
+      return;
+    }
+    setRippleState(prevState => {
+      const nextItems = prevState.items.filter(ripple => ripple.key !== key);
+      const nextOrder = mergeRippleOrder(prevState.order.filter(rippleKey => rippleKey !== key), nextItems.filter(ripple => !ripple.exiting).map(ripple => ripple.key));
+      return {
+        items: nextItems,
+        order: nextOrder
+      };
+    });
+  });
+  const startCommit = (0, _useEventCallback.default)(params => {
     const {
       pulsate,
       rippleX,
@@ -168,29 +314,29 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       rippleSize,
       cb
     } = params;
-    setRipples(oldRipples => [...oldRipples, /*#__PURE__*/(0, _jsxRuntime.jsx)(TouchRippleRipple, {
-      classes: {
-        ripple: (0, _clsx.default)(classes.ripple, _touchRippleClasses.default.ripple),
-        rippleVisible: (0, _clsx.default)(classes.rippleVisible, _touchRippleClasses.default.rippleVisible),
-        ripplePulsate: (0, _clsx.default)(classes.ripplePulsate, _touchRippleClasses.default.ripplePulsate),
-        child: (0, _clsx.default)(classes.child, _touchRippleClasses.default.child),
-        childLeaving: (0, _clsx.default)(classes.childLeaving, _touchRippleClasses.default.childLeaving),
-        childPulsate: (0, _clsx.default)(classes.childPulsate, _touchRippleClasses.default.childPulsate)
-      },
-      timeout: DURATION,
-      pulsate: pulsate,
-      rippleX: rippleX,
-      rippleY: rippleY,
-      rippleSize: rippleSize
-    }, nextKey.current)]);
+    const key = nextKey.current;
     nextKey.current += 1;
+    setRippleState(prevState => {
+      const nextItems = [...prevState.items, {
+        key,
+        pulsate,
+        rippleX,
+        rippleY,
+        rippleSize,
+        exiting: false
+      }];
+      return {
+        items: nextItems,
+        order: mergeRippleOrder(prevState.order, nextItems.filter(ripple => !ripple.exiting).map(ripple => ripple.key))
+      };
+    });
     rippleCallback.current = cb;
-  }, [classes]);
-  const start = React.useCallback((event = {}, options = {}, cb = () => {}) => {
+  });
+  const start = (0, _useEventCallback.default)((event = EMPTY_OBJ, options = EMPTY_OBJ, cb = NOOP) => {
     const {
       pulsate = false,
       center = centerProp || options.pulsate,
-      fakeElement = false // For test purposes
+      fakeElement = false // Used only by tests.
     } = options;
     if (event?.type === 'mousedown' && ignoringMouseDown.current) {
       ignoringMouseDown.current = false;
@@ -200,48 +346,21 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       ignoringMouseDown.current = true;
     }
     const element = fakeElement ? null : container.current;
-    const rect = element ? element.getBoundingClientRect() : {
-      width: 0,
-      height: 0,
-      left: 0,
-      top: 0
-    };
-
-    // Get the size of the ripple
-    let rippleX;
-    let rippleY;
-    let rippleSize;
-    if (center || event === undefined || event.clientX === 0 && event.clientY === 0 || !event.clientX && !event.touches) {
-      rippleX = Math.round(rect.width / 2);
-      rippleY = Math.round(rect.height / 2);
-    } else {
-      const {
-        clientX,
-        clientY
-      } = event.touches && event.touches.length > 0 ? event.touches[0] : event;
-      rippleX = Math.round(clientX - rect.left);
-      rippleY = Math.round(clientY - rect.top);
-    }
-    if (center) {
-      rippleSize = Math.sqrt((2 * rect.width ** 2 + rect.height ** 2) / 3);
-
-      // For some reason the animation is broken on Mobile Chrome if the size is even.
-      if (rippleSize % 2 === 0) {
-        rippleSize += 1;
-      }
-    } else {
-      const sizeX = Math.max(Math.abs((element ? element.clientWidth : 0) - rippleX), rippleX) * 2 + 2;
-      const sizeY = Math.max(Math.abs((element ? element.clientHeight : 0) - rippleY), rippleY) * 2 + 2;
-      rippleSize = Math.sqrt(sizeX ** 2 + sizeY ** 2);
-    }
+    const {
+      rippleX,
+      rippleY,
+      rippleSize
+    } = computeRippleState({
+      event,
+      element,
+      center
+    });
 
-    // Touch devices
+    // Delay touch ripples so scroll gestures do not flash a ripple.
     if (event?.touches) {
-      // check that this isn't another touchstart due to multitouch
-      // otherwise we will only clear a single timer when unmounting while two
-      // are running
+      // Ignore extra touchstart events from multi-touch. There is only one
+      // delayed start callback to clear on unmount.
       if (startTimerCommit.current === null) {
-        // Prepare the ripple effect.
         startTimerCommit.current = () => {
           startCommit({
             pulsate,
@@ -251,8 +370,6 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
             cb
           });
         };
-        // Delay the execution of the ripple effect.
-        // We have to make a tradeoff with this delay value.
         startTimer.start(DELAY_RIPPLE, () => {
           if (startTimerCommit.current) {
             startTimerCommit.current();
@@ -269,17 +386,17 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
         cb
       });
     }
-  }, [centerProp, startCommit, startTimer]);
-  const pulsate = React.useCallback(() => {
-    start({}, {
+  });
+  const pulsate = (0, _useEventCallback.default)(() => {
+    start(EMPTY_OBJ, {
       pulsate: true
     });
-  }, [start]);
-  const stop = React.useCallback((event, cb) => {
+  });
+  const stop = (0, _useEventCallback.default)((event, cb) => {
     startTimer.clear();
 
-    // The touch interaction occurs too quickly.
-    // We still want to show ripple effect.
+    // If touch ends before the delay finishes, show the ripple now and stop it
+    // on the next tick so the user still gets feedback.
     if (event?.type === 'touchend' && startTimerCommit.current) {
       startTimerCommit.current();
       startTimerCommit.current = null;
@@ -289,28 +406,55 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       return;
     }
     startTimerCommit.current = null;
-    setRipples(oldRipples => {
-      if (oldRipples.length > 0) {
-        return oldRipples.slice(1);
+    setRippleState(prevState => {
+      const firstActiveIndex = prevState.items.findIndex(ripple => !ripple.exiting);
+      if (firstActiveIndex === -1) {
+        return prevState;
       }
-      return oldRipples;
+      const nextItems = prevState.items.slice();
+      nextItems[firstActiveIndex] = {
+        ...nextItems[firstActiveIndex],
+        exiting: true
+      };
+      return {
+        items: nextItems,
+        order: mergeRippleOrder(prevState.order, nextItems.filter(ripple => !ripple.exiting).map(ripple => ripple.key))
+      };
     });
     rippleCallback.current = cb;
-  }, [startTimer]);
+  });
   React.useImperativeHandle(ref, () => ({
     pulsate,
     start,
     stop
   }), [pulsate, start, stop]);
+  const rippleByKey = new Map(ripples.map(ripple => [ripple.key, ripple]));
+  const orderedRipples = rippleState.order.map(rippleKey => rippleByKey.get(rippleKey)).filter(Boolean);
+
+  // Keep the old react-transition-group DOM order:
+  // exiting ripples stay in place, and new ripples are inserted before the
+  // final group waiting for its exit animation to finish.
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(TouchRippleRoot, {
     className: (0, _clsx.default)(_touchRippleClasses.default.root, classes.root, className),
     ref: container,
     ...other,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.TransitionGroup, {
-      component: null,
-      exit: true,
-      children: ripples
-    })
+    children: orderedRipples.map(ripple => /*#__PURE__*/(0, _jsxRuntime.jsx)(TouchRippleRipple, {
+      classes: {
+        ripple: (0, _clsx.default)(classes.ripple, _touchRippleClasses.default.ripple),
+        rippleVisible: (0, _clsx.default)(classes.rippleVisible, _touchRippleClasses.default.rippleVisible),
+        ripplePulsate: (0, _clsx.default)(classes.ripplePulsate, _touchRippleClasses.default.ripplePulsate),
+        child: (0, _clsx.default)(classes.child, _touchRippleClasses.default.child),
+        childLeaving: (0, _clsx.default)(classes.childLeaving, _touchRippleClasses.default.childLeaving),
+        childPulsate: (0, _clsx.default)(classes.childPulsate, _touchRippleClasses.default.childPulsate)
+      },
+      timeout: reducedMotion.shouldReduceMotion ? 0 : DURATION,
+      pulsate: ripple.pulsate,
+      rippleX: ripple.rippleX,
+      rippleY: ripple.rippleY,
+      rippleSize: ripple.rippleSize,
+      in: !ripple.exiting,
+      onExited: () => handleExited(ripple.key)
+    }, ripple.key))
   });
 });
 process.env.NODE_ENV !== "production" ? TouchRipple.propTypes /* remove-proptypes */ = {