@mui/material 9.0.1 → 9.1.1

package/Slide/Slide.mjs

@@ -2,21 +2,23 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import HTMLElementType from '@mui/utils/HTMLElementType';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
+import Transition from "../internal/Transition.mjs";
 import isLayoutSupported from "../utils/isLayoutSupported.mjs";
 import debounce from "../utils/debounce.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
 import { useTheme } from "../zero-styled/index.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import { normalizedTransitionCallback, reflow, getTransitionProps, getTranslateOffsets } from "../transitions/utils.mjs";
 import { ownerWindow } from "../utils/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const hiddenStyles = {
   visibility: 'hidden'
 };
+const DEFAULT_TRANSLATE_OPTIONS = {};
 
 /**
  * Detects SwipeableDrawer's active-swipe `translate(x, y)` transform.
@@ -26,9 +28,8 @@ function isGestureTranslate(transform) {
   return typeof transform === 'string' && /^translate\(.+,\s*.+\)$/.test(transform);
 }
 
-// Translate the node so it can't be seen on the screen.
-// Later, we're going to translate the node back to its original location with `none`.
-function getTranslateValue(direction, node, resolvedContainer, options = {}) {
+// Move the node off-screen. Later we reset transform to `none` to slide it in.
+function getTranslateValue(direction, node, resolvedContainer, options = DEFAULT_TRANSLATE_OPTIONS) {
   const {
     resetInlineTransform = true
   } = options;
@@ -37,9 +38,9 @@ function getTranslateValue(direction, node, resolvedContainer, options = {}) {
   let rect;
   let transform;
   if (resetInlineTransform) {
-    // Clear the inline transform and transition before reading layout and computed
-    // style so we compute from the element's natural position, not its previous
-    // off-screen translation.
+    // Read layout from the element's natural position, not from a previous
+    // off-screen transform. Clear transition too, or the browser may report an
+    // in-between animated value during exit.
     const previousTransform = node.style.transform;
     const previousTransition = node.style.transition;
     node.style.transition = '';
@@ -96,7 +97,6 @@ export function setTranslateValue(direction, node, containerProp, options) {
 
 /**
  * The Slide transition is used by the [Drawer](/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   const theme = useTheme();
@@ -113,6 +113,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     appear = true,
     children,
     container: containerProp,
+    disablePrefersReducedMotion = false,
     direction = 'down',
     easing: easingProp = defaultEasing,
     in: inProp,
@@ -126,12 +127,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     timeout = defaultTimeout,
     ...other
   } = props;
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const childrenRef = React.useRef(null);
   const preserveInlineTransformRef = React.useRef(false);
   const handleRef = useForkRef(getReactElementRef(children), childrenRef, ref);
   const handleEnter = normalizedTransitionCallback(childrenRef, (node, isAppearing) => {
     setTranslateValue(direction, node, containerProp);
-    reflow(node);
+    if (!reducedMotion.shouldReduceMotion) {
+      reflow(node);
+    }
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -144,7 +148,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     node.style.transform = 'none';
     if (onEntering) {
       onEntering(node, isAppearing);
@@ -160,7 +172,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     const preserveInlineTransform = isGestureTranslate(node.style.transform);
     preserveInlineTransformRef.current = preserveInlineTransform;
 
@@ -175,25 +195,22 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   });
   const handleExited = normalizedTransitionCallback(childrenRef, node => {
     preserveInlineTransformRef.current = false;
-    // No need for transitions when the component is hidden
+    // Hidden nodes stay off-screen without animating.
     node.style.transition = '';
     if (onExited) {
       onExited(node);
     }
   });
-  const handleAddEndListener = next => {
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(childrenRef.current, next);
-    }
-  };
+  const handleAddEndListener = addEndListener ? next => {
+    addEndListener(childrenRef.current, next);
+  } : undefined;
   const updatePosition = React.useCallback(() => {
     if (childrenRef.current) {
       setTranslateValue(direction, childrenRef.current, containerProp);
     }
   }, [direction, containerProp]);
   React.useEffect(() => {
-    // Skip configuration where the position is screen size invariant.
+    // Skip resize listeners when the off-screen position does not depend on screen size.
     if (inProp || direction === 'down' || direction === 'right') {
       return undefined;
     }
@@ -211,8 +228,8 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
   }, [direction, inProp, containerProp]);
   React.useEffect(() => {
     if (!inProp && !preserveInlineTransformRef.current) {
-      // We need to update the position of the drawer when the direction change and
-      // when it's hidden.
+      // While hidden, keep the child at the correct off-screen position if
+      // direction or container changes.
       updatePosition();
     }
   }, [inProp, updatePosition]);
@@ -227,12 +244,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     addEndListener: handleAddEndListener,
     appear: appear,
     in: inProp,
+    reduceMotion: reducedMotion.shouldReduceMotion,
     timeout: timeout,
     ...other,
     children: (state, {
       ownerState,
       ...restChildProps
     }) => {
+      // Do not pass ownerState to a DOM child. ownerState is only for
+      // Material UI styling, and React would treat it as an invalid DOM attribute.
       let childStyle;
       if (state === 'exited' && !inProp) {
         childStyle = style || children.props.style ? {
@@ -262,9 +282,12 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
   // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
   // └─────────────────────────────────────────────────────────────────────┘
   /**
-   * Add a custom transition end trigger. Called with the transitioning DOM
-   * node and a done callback. Allows for more fine grained transition end
-   * logic. Note: Timeouts are still used as a fallback if provided.
+   * Add a custom transition end trigger.
+   * Use it when you need custom logic to decide when the transition has ended.
+   * Note: Timeouts are still used as a fallback if provided.
+   *
+   * @param {HTMLElement} node The transitioning DOM node.
+   * @param {Function} done Call this when the transition has finished.
    */
   addEndListener: PropTypes.func,
   /**
@@ -302,6 +325,11 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
    * @default 'down'
    */
   direction: PropTypes.oneOf(['down', 'left', 'right', 'up']),
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion: PropTypes.bool,
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.

package/Slider/Slider.js

@@ -24,6 +24,7 @@ var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _SliderValueLabel = _interopRequireDefault(require("./SliderValueLabel"));
 var _sliderClasses = _interopRequireWildcard(require("./sliderClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 function Identity(x) {
   return x;
@@ -183,7 +184,7 @@ const SliderTrack = exports.SliderTrack = (0, _zeroStyled.styled)('span', {
     borderRadius: 'inherit',
     border: '1px solid currentColor',
     backgroundColor: 'currentColor',
-    transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
+    ...(0, _utils.getTransitionStyles)(theme, ['left', 'width', 'bottom', 'height'], {
       duration: theme.transitions.duration.shortest
     }),
     variants: [{
@@ -259,7 +260,7 @@ const SliderThumb = exports.SliderThumb = (0, _zeroStyled.styled)('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest
   }),
   '@media (forced-colors: active)': {
@@ -343,7 +344,7 @@ const SliderValueLabel = exports.SliderValueLabel = (0, _zeroStyled.styled)(_Sli
   whiteSpace: 'nowrap',
   ...theme.typography.body2,
   fontWeight: 500,
-  transition: theme.transitions.create(['transform'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['transform'], {
     duration: theme.transitions.duration.shortest
   }),
   position: 'absolute',

package/Slider/Slider.mjs

@@ -17,6 +17,7 @@ import capitalize from "../utils/capitalize.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
 import BaseSliderValueLabel from "./SliderValueLabel.mjs";
 import sliderClasses, { getSliderUtilityClass } from "./sliderClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 function Identity(x) {
   return x;
@@ -176,7 +177,7 @@ export const SliderTrack = styled('span', {
     borderRadius: 'inherit',
     border: '1px solid currentColor',
     backgroundColor: 'currentColor',
-    transition: theme.transitions.create(['left', 'width', 'bottom', 'height'], {
+    ...getTransitionStyles(theme, ['left', 'width', 'bottom', 'height'], {
       duration: theme.transitions.duration.shortest
     }),
     variants: [{
@@ -252,7 +253,7 @@ export const SliderThumb = styled('span', {
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
-  transition: theme.transitions.create(['box-shadow', 'left', 'bottom'], {
+  ...getTransitionStyles(theme, ['box-shadow', 'left', 'bottom'], {
     duration: theme.transitions.duration.shortest
   }),
   '@media (forced-colors: active)': {
@@ -336,7 +337,7 @@ const SliderValueLabel = styled(BaseSliderValueLabel, {
   whiteSpace: 'nowrap',
   ...theme.typography.body2,
   fontWeight: 500,
-  transition: theme.transitions.create(['transform'], {
+  ...getTransitionStyles(theme, ['transform'], {
     duration: theme.transitions.duration.shortest
   }),
   position: 'absolute',

package/Slider/SliderValueLabel.d.mts

@@ -7,7 +7,7 @@ declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElem
   className?: string | undefined;
   children?: React.ReactNode;
 }, string | React.JSXElementConstructor<any>> | null;
+export default SliderValueLabel;
 declare namespace SliderValueLabel {
   var propTypes: any;
-}
-export default SliderValueLabel;
+}

package/Slider/SliderValueLabel.d.ts

@@ -7,7 +7,7 @@ declare function SliderValueLabel(props: SliderValueLabelProps): React.ReactElem
   className?: string | undefined;
   children?: React.ReactNode;
 }, string | React.JSXElementConstructor<any>> | null;
+export default SliderValueLabel;
 declare namespace SliderValueLabel {
   var propTypes: any;
-}
-export default SliderValueLabel;
+}

package/Slider/useSlider.js

@@ -116,8 +116,8 @@ function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
           preventScroll: true,
           // Prevent pointer-driven focus rings in browsers that support this option.
           // Chrome 144+ supports `focusVisible` in `HTMLElement.focus()` options.
-          // @ts-expect-error `focusVisible` is not yet in TypeScript's lib.dom FocusOptions.
           focusVisible
+          // Cast can be removed once TypeScript >= 6.0 (added `focusVisible` to lib.dom FocusOptions).
         });
       }
     }

package/Slider/useSlider.mjs

@@ -107,8 +107,8 @@ function focusThumb(sliderRef, activeIndex, setActive, focusVisible) {
           preventScroll: true,
           // Prevent pointer-driven focus rings in browsers that support this option.
           // Chrome 144+ supports `focusVisible` in `HTMLElement.focus()` options.
-          // @ts-expect-error `focusVisible` is not yet in TypeScript's lib.dom FocusOptions.
           focusVisible
+          // Cast can be removed once TypeScript >= 6.0 (added `focusVisible` to lib.dom FocusOptions).
         });
       }
     }

package/Snackbar/Snackbar.d.mts

@@ -4,7 +4,7 @@ import ClickAwayListener from "../ClickAwayListener/index.mjs";
 import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { SnackbarContentProps } from "../SnackbarContent/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { SnackbarClasses } from "./snackbarClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.mjs";
 export interface SnackbarSlots {
@@ -25,7 +25,7 @@ export interface SnackbarSlots {
   clickAwayListener: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](/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 Grow
    */
   transition: React.ElementType;

package/Snackbar/Snackbar.d.ts

@@ -4,7 +4,7 @@ import ClickAwayListener from "../ClickAwayListener/index.js";
 import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { SnackbarContentProps } from "../SnackbarContent/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { SnackbarClasses } from "./snackbarClasses.js";
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
 export interface SnackbarSlots {
@@ -25,7 +25,7 @@ export interface SnackbarSlots {
   clickAwayListener: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](/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 Grow
    */
   transition: React.ElementType;

package/SpeedDial/SpeedDial.d.mts

@@ -16,7 +16,7 @@ export interface SpeedDialSlots {
   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 Zoom
    */
   transition: React.ElementType;

package/SpeedDial/SpeedDial.d.ts

@@ -16,7 +16,7 @@ export interface SpeedDialSlots {
   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 Zoom
    */
   transition: React.ElementType;

package/SpeedDial/SpeedDial.js

@@ -19,6 +19,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Zoom = _interopRequireDefault(require("../Zoom"));
 var _Fab = _interopRequireDefault(require("../Fab"));
+var _utils = require("../transitions/utils");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _isMuiElement = _interopRequireDefault(require("../utils/isMuiElement"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -131,7 +132,9 @@ const SpeedDialActions = (0, _zeroStyled.styled)('div', {
     } = props;
     return [styles.actions, !ownerState.open && styles.actionsClosed];
   }
-})({
+})((0, _memoTheme.default)(({
+  theme
+}) => ({
   display: 'flex',
   pointerEvents: 'auto',
   variants: [{
@@ -140,10 +143,11 @@ const SpeedDialActions = (0, _zeroStyled.styled)('div', {
     }) => !ownerState.open,
     style: {
       transition: 'top 0s linear 0.2s',
+      ...(0, _utils.getReducedMotionStyles)(theme),
       pointerEvents: 'none'
     }
   }]
-});
+})));
 const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,

package/SpeedDial/SpeedDial.mjs

@@ -12,6 +12,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import Zoom from "../Zoom/index.mjs";
 import Fab from "../Fab/index.mjs";
+import { getReducedMotionStyles } from "../transitions/utils.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import isMuiElement from "../utils/isMuiElement.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
@@ -124,7 +125,9 @@ const SpeedDialActions = styled('div', {
     } = props;
     return [styles.actions, !ownerState.open && styles.actionsClosed];
   }
-})({
+})(memoTheme(({
+  theme
+}) => ({
   display: 'flex',
   pointerEvents: 'auto',
   variants: [{
@@ -133,10 +136,11 @@ const SpeedDialActions = styled('div', {
     }) => !ownerState.open,
     style: {
       transition: 'top 0s linear 0.2s',
+      ...getReducedMotionStyles(theme),
       pointerEvents: 'none'
     }
   }]
-});
+})));
 const SpeedDial = /*#__PURE__*/React.forwardRef(function SpeedDial(inProps, ref) {
   const props = useDefaultProps({
     props: inProps,

package/SpeedDialAction/SpeedDialAction.js

@@ -18,6 +18,8 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Fab = _interopRequireDefault(require("../Fab"));
 var _Tooltip = _interopRequireDefault(require("../Tooltip"));
+var _utils = require("../transitions/utils");
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _speedDialActionClasses = _interopRequireWildcard(require("./speedDialActionClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
@@ -57,6 +59,7 @@ const SpeedDialActionFab = (0, _zeroStyled.styled)(_Fab.default, {
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
   })}, opacity 0.8s`,
+  ...(0, _utils.getReducedMotionStyles)(theme),
   opacity: 1,
   variants: [{
     props: ({
@@ -84,7 +87,7 @@ const SpeedDialActionStaticTooltip = (0, _zeroStyled.styled)('span', {
   display: 'flex',
   alignItems: 'center',
   [`& .${_speedDialActionClasses.default.staticTooltipLabel}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
+    ...(0, _utils.getTransitionStyles)(theme, ['transform', 'opacity'], {
       duration: theme.transitions.duration.shorter
     }),
     opacity: 1
@@ -153,6 +156,8 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     slotProps = {},
     ...other
   } = props;
+  const theme = (0, _zeroStyled.useTheme)();
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, false);
   const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : slotProps.tooltip ?? {};
   const tooltipPlacement = resolvedTooltipSlotProps.placement ?? 'left';
   const ownerState = {
@@ -171,8 +176,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const handleTooltipOpen = () => {
     setTooltipOpen(true);
   };
+  const transitionTiming = reducedMotion.getTransitionTiming({
+    duration: 0,
+    delay: `${delay}ms`
+  });
   const transitionStyle = {
-    transitionDelay: `${delay}ms`
+    transitionDelay: transitionTiming.delay
   };
   const [FabSlot, fabSlotProps] = (0, _useSlot.default)('fab', {
     elementType: SpeedDialActionFab,

package/SpeedDialAction/SpeedDialAction.mjs

@@ -6,11 +6,13 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import composeClasses from '@mui/utils/composeClasses';
 import { emphasize } from '@mui/system/colorManipulator';
-import { styled } from "../zero-styled/index.mjs";
+import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import Fab from "../Fab/index.mjs";
 import Tooltip from "../Tooltip/index.mjs";
+import { getReducedMotionStyles, getTransitionStyles } from "../transitions/utils.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import speedDialActionClasses, { getSpeedDialActionUtilityClass } from "./speedDialActionClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
@@ -50,6 +52,7 @@ const SpeedDialActionFab = styled(Fab, {
   transition: `${theme.transitions.create('transform', {
     duration: theme.transitions.duration.shorter
   })}, opacity 0.8s`,
+  ...getReducedMotionStyles(theme),
   opacity: 1,
   variants: [{
     props: ({
@@ -77,7 +80,7 @@ const SpeedDialActionStaticTooltip = styled('span', {
   display: 'flex',
   alignItems: 'center',
   [`& .${speedDialActionClasses.staticTooltipLabel}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
+    ...getTransitionStyles(theme, ['transform', 'opacity'], {
       duration: theme.transitions.duration.shorter
     }),
     opacity: 1
@@ -146,6 +149,8 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
     slotProps = {},
     ...other
   } = props;
+  const theme = useTheme();
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, false);
   const resolvedTooltipSlotProps = typeof slotProps.tooltip === 'function' ? slotProps.tooltip(props) : slotProps.tooltip ?? {};
   const tooltipPlacement = resolvedTooltipSlotProps.placement ?? 'left';
   const ownerState = {
@@ -164,8 +169,12 @@ const SpeedDialAction = /*#__PURE__*/React.forwardRef(function SpeedDialAction(i
   const handleTooltipOpen = () => {
     setTooltipOpen(true);
   };
+  const transitionTiming = reducedMotion.getTransitionTiming({
+    duration: 0,
+    delay: `${delay}ms`
+  });
   const transitionStyle = {
-    transitionDelay: `${delay}ms`
+    transitionDelay: transitionTiming.delay
   };
   const [FabSlot, fabSlotProps] = useSlot('fab', {
     elementType: SpeedDialActionFab,

package/SpeedDialIcon/SpeedDialIcon.js

@@ -16,6 +16,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _Add = _interopRequireDefault(require("../internal/svg-icons/Add"));
 var _speedDialIconClasses = _interopRequireWildcard(require("./speedDialIconClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -51,45 +52,47 @@ const SpeedDialIconRoot = (0, _zeroStyled.styled)('span', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  height: 24,
-  [`& .${_speedDialIconClasses.default.icon}`]: {
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    })
-  },
-  [`& .${_speedDialIconClasses.default.openIcon}`]: {
-    position: 'absolute',
-    transition: theme.transitions.create(['transform', 'opacity'], {
-      duration: theme.transitions.duration.short
-    }),
-    opacity: 0,
-    transform: 'rotate(-45deg)'
-  },
-  variants: [{
-    props: ({
-      ownerState
-    }) => ownerState.open,
-    style: {
-      [`& .${_speedDialIconClasses.default.icon}`]: {
-        transform: 'rotate(45deg)'
-      },
-      [`& .${_speedDialIconClasses.default.openIcon}`]: {
-        transform: 'rotate(0deg)',
-        opacity: 1
+}) => {
+  return {
+    height: 24,
+    [`& .${_speedDialIconClasses.default.icon}`]: {
+      ...(0, _utils.getTransitionStyles)(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      })
+    },
+    [`& .${_speedDialIconClasses.default.openIcon}`]: {
+      position: 'absolute',
+      ...(0, _utils.getTransitionStyles)(theme, ['transform', 'opacity'], {
+        duration: theme.transitions.duration.short
+      }),
+      opacity: 0,
+      transform: 'rotate(-45deg)'
+    },
+    variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.open,
+      style: {
+        [`& .${_speedDialIconClasses.default.icon}`]: {
+          transform: 'rotate(45deg)'
+        },
+        [`& .${_speedDialIconClasses.default.openIcon}`]: {
+          transform: 'rotate(0deg)',
+          opacity: 1
+        }
       }
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.open && ownerState.openIcon,
-    style: {
-      [`& .${_speedDialIconClasses.default.icon}`]: {
-        opacity: 0
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.open && ownerState.openIcon,
+      style: {
+        [`& .${_speedDialIconClasses.default.icon}`]: {
+          opacity: 0
+        }
       }
-    }
-  }]
-})));
+    }]
+  };
+}));
 const SpeedDialIcon = /*#__PURE__*/React.forwardRef(function SpeedDialIcon(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
     props: inProps,