@mui/material 9.0.1 → 9.1.0

package/ButtonBase/TouchRipple.mjs

@@ -2,16 +2,109 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { TransitionGroup } from 'react-transition-group';
 import clsx from 'clsx';
+import useOnMount from '@mui/utils/useOnMount';
 import useTimeout from '@mui/utils/useTimeout';
-import { keyframes, styled } from "../zero-styled/index.mjs";
+import { keyframes, css, styled, useTheme } from "../zero-styled/index.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import Ripple from "./Ripple.mjs";
 import touchRippleClasses from "./touchRippleClasses.mjs";
+import useEventCallback from "../utils/useEventCallback.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DURATION = 550;
 export const 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 = keyframes`
   0% {
     transform: scale(0);
@@ -45,6 +138,44 @@ const pulsateKeyframe = keyframes`
     transform: scale(1);
   }
 `;
+function getAnimationStyles(theme) {
+  if (theme.motion.reducedMotion === 'always') {
+    return null;
+  }
+  const styles = css`
+    &.${touchRippleClasses.rippleVisible} {
+      animation-name: ${enterKeyframe};
+      animation-duration: ${DURATION}ms;
+      animation-timing-function: ${theme.transitions.easing.easeInOut};
+    }
+
+    &.${touchRippleClasses.ripplePulsate} {
+      animation-duration: ${theme.transitions.duration.shorter}ms;
+    }
+
+    & .${touchRippleClasses.childLeaving} {
+      animation-name: ${exitKeyframe};
+      animation-duration: ${DURATION}ms;
+      animation-timing-function: ${theme.transitions.easing.easeInOut};
+    }
+
+    & .${touchRippleClasses.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 css`
+      @media (prefers-reduced-motion: no-preference) {
+        ${styles}
+      }
+    `;
+  }
+  return styles;
+}
 export const TouchRippleRoot = styled('span', {
   name: 'MuiTouchRipple',
   slot: 'Root'
@@ -60,8 +191,8 @@ export const TouchRippleRoot = 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.
 export const TouchRippleRipple = styled(Ripple, {
   name: 'MuiTouchRipple',
   slot: 'Ripple'
@@ -72,35 +203,10 @@ export const TouchRippleRipple = styled(Ripple, {
   &.${touchRippleClasses.rippleVisible} {
     opacity: 0.3;
     transform: scale(1);
-    animation-name: ${enterKeyframe};
-    animation-duration: ${DURATION}ms;
-    animation-timing-function: ${({
-  theme
-}) => theme.transitions.easing.easeInOut};
-  }
-
-  &.${touchRippleClasses.ripplePulsate} {
-    animation-duration: ${({
-  theme
-}) => theme.transitions.duration.shorter}ms;
-  }
-
-  & .${touchRippleClasses.child} {
-    opacity: 1;
-    display: block;
-    width: 100%;
-    height: 100%;
-    border-radius: 50%;
-    background-color: currentColor;
   }
 
   & .${touchRippleClasses.childLeaving} {
     opacity: 0;
-    animation-name: ${exitKeyframe};
-    animation-duration: ${DURATION}ms;
-    animation-timing-function: ${({
-  theme
-}) => theme.transitions.easing.easeInOut};
   }
 
   & .${touchRippleClasses.childPulsate} {
@@ -108,35 +214,54 @@ export const TouchRippleRipple = styled(Ripple, {
     /* @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;
+}) => getAnimationStyles(theme)}
+
+  & .${touchRippleClasses.child} {
+    opacity: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    background-color: currentColor;
   }
 `;
 
 /**
  * @ignore - internal component.
- *
- * TODO v5: Make private
  */
 const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,
     name: 'MuiTouchRipple'
   });
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion(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);
+  useOnMount(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  });
   React.useEffect(() => {
     if (rippleCallback.current) {
       rippleCallback.current();
@@ -150,10 +275,23 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
   // We don't want to display the ripple for touch scroll events.
   const startTimer = useTimeout();
 
-  // 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 = useEventCallback(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 = useEventCallback(params => {
     const {
       pulsate,
       rippleX,
@@ -161,29 +299,29 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
       rippleSize,
       cb
     } = params;
-    setRipples(oldRipples => [...oldRipples, /*#__PURE__*/_jsx(TouchRippleRipple, {
-      classes: {
-        ripple: clsx(classes.ripple, touchRippleClasses.ripple),
-        rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),
-        ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),
-        child: clsx(classes.child, touchRippleClasses.child),
-        childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),
-        childPulsate: clsx(classes.childPulsate, touchRippleClasses.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 = useEventCallback((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;
@@ -193,48 +331,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,
@@ -244,8 +355,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();
@@ -262,17 +371,17 @@ const TouchRipple = /*#__PURE__*/React.forwardRef(function TouchRipple(inProps,
         cb
       });
     }
-  }, [centerProp, startCommit, startTimer]);
-  const pulsate = React.useCallback(() => {
-    start({}, {
+  });
+  const pulsate = useEventCallback(() => {
+    start(EMPTY_OBJ, {
       pulsate: true
     });
-  }, [start]);
-  const stop = React.useCallback((event, cb) => {
+  });
+  const stop = useEventCallback((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;
@@ -282,28 +391,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__*/_jsx(TouchRippleRoot, {
     className: clsx(touchRippleClasses.root, classes.root, className),
     ref: container,
     ...other,
-    children: /*#__PURE__*/_jsx(TransitionGroup, {
-      component: null,
-      exit: true,
-      children: ripples
-    })
+    children: orderedRipples.map(ripple => /*#__PURE__*/_jsx(TouchRippleRipple, {
+      classes: {
+        ripple: clsx(classes.ripple, touchRippleClasses.ripple),
+        rippleVisible: clsx(classes.rippleVisible, touchRippleClasses.rippleVisible),
+        ripplePulsate: clsx(classes.ripplePulsate, touchRippleClasses.ripplePulsate),
+        child: clsx(classes.child, touchRippleClasses.child),
+        childLeaving: clsx(classes.childLeaving, touchRippleClasses.childLeaving),
+        childPulsate: clsx(classes.childPulsate, touchRippleClasses.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 */ = {

package/CHANGELOG.md

@@ -1,5 +1,89 @@
 # [Versions](https://mui.com/material-ui/getting-started/versions/)
 
+## 9.1.0
+
+<!-- generated comparing v9.0.1..master -->
+
+_Jun 8, 2026_
+
+A big thanks to the 15 contributors who made this release possible. Here are some highlights ✨:
+
+- ⚙️ Support for the [prefers-reduced-motion](https://mui.com/material-ui/transitions/#reduced-motion) setting.
+- ♿️ Improved support for Windows High Contrast mode with the [enhanceHighContrast](https://mui.com/material-ui/customization/palette/#windows-high-contrast-mode) theme wrapper.
+
+### `@mui/material@9.1.0`
+
+- [autocomplete] Enable clearing highlight when mouse leaves popup (#48354) @mj12albert
+- [autocomplete] Fix `freeSolo` controlled values cleared by initial `null` (#48611) @mj12albert
+- [autocomplete] Fix item removal when it receives focus from VoiceOver before using Backspace (#48572) @silviuaavram
+- [autocomplete] Fix `resetHighlightOnMouseLeave` JSdoc (#48536) @mj12albert
+- [autocomplete] Guard against null inputRef during unmount (#48617) @noam3127
+- [badge] Add `aria-hidden` to badge content and polish docs demos (#48471) @mj12albert
+- [badge] Use inline CSS variables for anchorOrigin/overlap positioning (#48549) @siriwatknp
+- [button] Fix customized flex gap styles (#48542) @mj12albert
+- [dialog] Fix unwanted `DialogPaper` focus ring (#48535) @mj12albert
+- [focus trap] Fix incorrect tab order when `tabIndex >= 1` (#48546) @mj12albert
+- [progress] Show runtime errors only once (#48591) @silviuaavram
+- [select] Allow spacebar to select elements (#48615) @silviuaavram
+- [select] Support typeahead when closed (#48563) @mj12albert
+- [step button] Choose higher contrast ripple color for dark mode focus (#48612) @silviuaavram
+- [stepper] Include StepConnector inside Step element (#48492) @silviuaavram
+- [stepper] Proper support for vertical alternativeLabel (#48485) @silviuaavram
+- [tabs] Fix React 18 roving tabindex and dedupe invalid-value warning (#48605) @Janpot
+- [theme] Add HighContrast theme enhancer (#48319) @silviuaavram
+- [timeline item] Fix extra ::before spacing when TimelineOppositeContent is present (#46663) @tyalau
+- [tooltip] Prevent stuck-open tooltip when child becomes disabled (#48606) @Janpot
+- [transitions] Custom `Transition` component (#48325) @mj12albert
+- [transitions] Support `prefers-reduced-motion` (#48357) @mj12albert
+
+### `@mui/utils@9.1.0`
+
+- [utils] Prevent prototype pollution in fastDeepAssign (#48580) @Janpot
+
+### Docs
+
+- [docs] Add function `slotProps` documentation (#48574) @mj12albert
+- [docs] Clarify styled-components version compatibility (#48533) @nightt5879
+- [docs] Fix broken URLs (#48520) @oliviertassinari
+- [docs] Fix invalid JSON in Zed MCP setup example (#48490) @pavan-sh
+- [docs] Mention release version for enhanceHighContrast (#48609) @silviuaavram
+- [docs] Remove outdated MUI X v8 notification (#48600) @cherniavskii
+- [docs] Remove redundant enhanceHighContrast information (#48632) @silviuaavram
+- [docs-infra] Decrease loaded bundle size on docs (#48584) @brijeshb42
+- [docs-infra] Drop multi-locale plumbing from API pages (#48370) @brijeshb42
+- [docs-infra] Fix Cookie banner heading (#48529) @oliviertassinari
+- [docs-infra] Infinitely cache all static assets (#48627) @brijeshb42
+- [docs-infra] Remove outdated noSEOadvantage entries (#48527) @oliviertassinari
+- [docs-infra] Restore build-only invariant throws via `NEXT_RUNTIME` guard (#48475) @Janpot
+- [docs-infra] Test HTML validation in broken links checker (#48088) @Janpot
+- [docs][icons] Fix Font Awesome Chip demo in dark mode (#48576) @siriwatknp
+- [docs][icons] Remove redundant font awesome demo (#48493) @ZeeshanTamboli
+- [docs][modal] Add nested modal guidance (#46507) @JakeSaterlay
+- [docs][stepper] Fix focus management in examples (#48494) @silviuaavram
+
+### Core
+
+- Eslint markdown (#48371) @Janpot
+- [agents] Fix some docs links (#48561) @silviuaavram
+- [blog] Copy editing improvement on v9 announcement blog posts (#48543) @joserodolfofreitas
+- [code-infra] Cleanup unused jss packages (#48590) @brijeshb42
+- [code-infra] Collapse canary workflows into nightly and nightly-cron (#48556) @Janpot
+- [code-infra] Convert @mui/private-theming to TypeScript (#48565) @Janpot
+- [code-infra] Convert @mui/styled-engine to TypeScript (#48544) @Janpot
+- [code-infra] Convert @mui/styled-engine-sc to TypeScript (#48577) @Janpot
+- [code-infra] Fix duplicate resource_class in test_regressions CI job (#48601) @LukasTy
+- [code-infra] Make @mui/internal-docs-utils compatible with TypeScript 6 (#48594) @Janpot
+- [code-infra] Migrate CircleCI jobs to Gen2 resource classes (#48593) @LukasTy
+- [code-infra] Parallelize visual regression screenshots (#48557) @Janpot
+- [code-infra] Run nightly-cron on v7.x (#48579) @Janpot
+- [core] Fix typescript@next typecheck (#48587) @Janpot
+- [pnpm] Add security settings to pnpm-workspace.yaml (#48582) @Janpot
+- [styled-engine-sc] Fix compatibility with Vite and Vitest (#48558) @mj12albert
+- [test] Add axe-core tests for mui-material (#48341) @siriwatknp
+- [test] Configure Tailwind CSS in the visual-regression app (#48575) @Janpot
+
+All contributors of this release in alphabetical order: @brijeshb42, @cherniavskii, @JakeSaterlay, @Janpot, @joserodolfofreitas, @LukasTy, @mj12albert, @nightt5879, @noam3127, @oliviertassinari, @pavan-sh, @silviuaavram, @siriwatknp, @tyalau, @ZeeshanTamboli
+
 ## 9.0.1
 
 <!-- generated comparing v9.0.0..master -->

package/CardActionArea/CardActionArea.js

@@ -17,6 +17,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _cardActionAreaClasses = _interopRequireWildcard(require("./cardActionAreaClasses"));
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -65,7 +66,7 @@ const CardActionAreaFocusHighlight = (0, _zeroStyled.styled)('span', {
   borderRadius: 'inherit',
   opacity: 0,
   backgroundColor: 'currentcolor',
-  transition: theme.transitions.create('opacity', {
+  ...(0, _utils.getTransitionStyles)(theme, 'opacity', {
     duration: theme.transitions.duration.short
   })
 })));

package/CardActionArea/CardActionArea.mjs

@@ -10,6 +10,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import cardActionAreaClasses, { getCardActionAreaUtilityClass } from "./cardActionAreaClasses.mjs";
 import ButtonBase from "../ButtonBase/index.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 useUtilityClasses = ownerState => {
   const {
@@ -58,7 +59,7 @@ const CardActionAreaFocusHighlight = styled('span', {
   borderRadius: 'inherit',
   opacity: 0,
   backgroundColor: 'currentcolor',
-  transition: theme.transitions.create('opacity', {
+  ...getTransitionStyles(theme, 'opacity', {
     duration: theme.transitions.duration.short
   })
 })));

package/Chip/Chip.js

@@ -23,6 +23,7 @@ var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShouldForwardProp"));
 var _chipClasses = _interopRequireWildcard(require("./chipClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -83,7 +84,7 @@ const ChipRoot = (0, _zeroStyled.styled)('div', {
     backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
-    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    ...(0, _utils.getTransitionStyles)(theme, ['background-color', 'box-shadow']),
     // reset cursor explicitly in case ButtonBase is used
     cursor: 'unset',
     // We disable the focus ring for mouse, touch and keyboard users.

package/Chip/Chip.mjs

@@ -16,6 +16,7 @@ import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import chipClasses, { getChipUtilityClass } from "./chipClasses.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 useUtilityClasses = ownerState => {
   const {
@@ -76,7 +77,7 @@ const ChipRoot = styled('div', {
     backgroundColor: (theme.vars || theme).palette.action.selected,
     borderRadius: 32 / 2,
     whiteSpace: 'nowrap',
-    transition: theme.transitions.create(['background-color', 'box-shadow']),
+    ...getTransitionStyles(theme, ['background-color', 'box-shadow']),
     // reset cursor explicitly in case ButtonBase is used
     cursor: 'unset',
     // We disable the focus ring for mouse, touch and keyboard users.