@mui/material 9.0.0 → 9.1.0

package/Slide/Slide.d.mts

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 export interface SlideProps extends TransitionProps {
+  /**
+   * 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?: TransitionProps['addEndListener'] | undefined;
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -16,6 +25,11 @@ export interface SlideProps extends TransitionProps {
    * It's used to set the container the Slide is transitioning from.
    */
   container?: null | Element | ((element: Element) => Element) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
   /**
    * Direction the child node will enter from.
    * @default 'down'
@@ -48,7 +62,6 @@ export interface SlideProps extends TransitionProps {
 
 /**
  * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Slide/Slide.d.ts

@@ -1,6 +1,15 @@
 import * as React from 'react';
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 export interface SlideProps extends TransitionProps {
+  /**
+   * 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?: TransitionProps['addEndListener'] | undefined;
   /**
    * Perform the enter transition when it first mounts if `in` is also `true`.
    * Set this to `false` to disable this behavior.
@@ -16,6 +25,11 @@ export interface SlideProps extends TransitionProps {
    * It's used to set the container the Slide is transitioning from.
    */
   container?: null | Element | ((element: Element) => Element) | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
   /**
    * Direction the child node will enter from.
    * @default 'down'
@@ -48,7 +62,6 @@ export interface SlideProps extends TransitionProps {
 
 /**
  * The Slide transition is used by the [Drawer](https://mui.com/material-ui/react-drawer/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Slide/Slide.js

@@ -10,49 +10,63 @@ exports.default = void 0;
 exports.setTranslateValue = setTranslateValue;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _HTMLElementType = _interopRequireDefault(require("@mui/utils/HTMLElementType"));
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
+var _Transition = _interopRequireDefault(require("../internal/Transition"));
 var _isLayoutSupported = _interopRequireDefault(require("../utils/isLayoutSupported"));
 var _debounce = _interopRequireDefault(require("../utils/debounce"));
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _zeroStyled = require("../zero-styled");
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _utils = require("../transitions/utils");
 var _utils2 = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const hiddenStyles = {
   visibility: 'hidden'
 };
+const DEFAULT_TRANSLATE_OPTIONS = {};
 
-// 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) {
+/**
+ * Detects SwipeableDrawer's active-swipe `translate(x, y)` transform.
+ * Keep this in sync with SwipeableDrawer.setPosition.
+ */
+function isGestureTranslate(transform) {
+  return typeof transform === 'string' && /^translate\(.+,\s*.+\)$/.test(transform);
+}
+
+// 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;
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
   const containerWindow = (0, _utils2.ownerWindow)(node);
-
-  // 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. The transition must also be cleared, otherwise the
-  // browser may report an animated intermediate value from a still-running
-  // enter transition when reading getComputedStyle during exit.
-  const previousTransform = node.style.transform;
-  const previousTransition = node.style.transition;
-  node.style.transition = '';
-  node.style.transform = '';
-  const rect = node.getBoundingClientRect();
-  const computedStyle = containerWindow.getComputedStyle(node);
-  const transform = computedStyle.getPropertyValue('transform');
-  node.style.transform = previousTransform;
-  node.style.transition = previousTransition;
-  let offsetX = 0;
-  let offsetY = 0;
-  if (transform && transform !== 'none' && typeof transform === 'string') {
-    const transformValues = transform.split('(')[1].split(')')[0].split(',');
-    offsetX = parseInt(transformValues[4], 10);
-    offsetY = parseInt(transformValues[5], 10);
+  let rect;
+  let transform;
+  if (resetInlineTransform) {
+    // 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 = '';
+    node.style.transform = '';
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
+    node.style.transform = previousTransform;
+    node.style.transition = previousTransition;
+  } else {
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
   }
+  const {
+    offsetX,
+    offsetY
+  } = (0, _utils.getTranslateOffsets)(transform);
   if (direction === 'left') {
     if (containerRect) {
       return `translateX(${containerRect.right + offsetX - rect.left}px)`;
@@ -81,9 +95,9 @@ function getTranslateValue(direction, node, resolvedContainer) {
 function resolveContainer(containerPropProp) {
   return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
 }
-function setTranslateValue(direction, node, containerProp) {
+function setTranslateValue(direction, node, containerProp, options) {
   const resolvedContainer = resolveContainer(containerProp);
-  const transform = getTranslateValue(direction, node, resolvedContainer);
+  const transform = getTranslateValue(direction, node, resolvedContainer, options);
   if (transform) {
     node.style.transform = transform;
   }
@@ -91,7 +105,6 @@ function setTranslateValue(direction, node, containerProp) {
 
 /**
  * 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 = (0, _zeroStyled.useTheme)();
@@ -108,6 +121,7 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     appear = true,
     children,
     container: containerProp,
+    disablePrefersReducedMotion = false,
     direction = 'down',
     easing: easingProp = defaultEasing,
     in: inProp,
@@ -121,11 +135,15 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     timeout = defaultTimeout,
     ...other
   } = props;
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const childrenRef = React.useRef(null);
+  const preserveInlineTransformRef = React.useRef(false);
   const handleRef = (0, _useForkRef.default)((0, _getReactElementRef.default)(children), childrenRef, ref);
   const handleEnter = (0, _utils.normalizedTransitionCallback)(childrenRef, (node, isAppearing) => {
     setTranslateValue(direction, node, containerProp);
-    (0, _utils.reflow)(node);
+    if (!reducedMotion.shouldReduceMotion) {
+      (0, _utils.reflow)(node);
+    }
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -138,7 +156,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);
@@ -154,32 +180,45 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
-    setTranslateValue(direction, node, containerProp);
+    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;
+
+    // Preserve SwipeableDrawer's inline gesture transform during exit. Slide's
+    // own off-screen translateX/Y transforms still use the reset path.
+    setTranslateValue(direction, node, containerProp, {
+      resetInlineTransform: !preserveInlineTransform
+    });
     if (onExit) {
       onExit(node);
     }
   });
   const handleExited = (0, _utils.normalizedTransitionCallback)(childrenRef, node => {
-    // No need for transitions when the component is hidden
+    preserveInlineTransformRef.current = false;
+    // 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;
     }
@@ -196,13 +235,13 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     };
   }, [direction, inProp, containerProp]);
   React.useEffect(() => {
-    if (!inProp) {
-      // We need to update the position of the drawer when the direction change and
-      // when it's hidden.
+    if (!inProp && !preserveInlineTransformRef.current) {
+      // While hidden, keep the child at the correct off-screen position if
+      // direction or container changes.
       updatePosition();
     }
   }, [inProp, updatePosition]);
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Transition.default, {
     nodeRef: childrenRef,
     onEnter: handleEnter,
     onEntered: handleEntered,
@@ -213,12 +252,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 ? {
@@ -248,9 +290,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.default.func,
   /**
@@ -288,6 +333,11 @@ process.env.NODE_ENV !== "production" ? Slide.propTypes /* remove-proptypes */ =
    * @default 'down'
    */
   direction: _propTypes.default.oneOf(['down', 'left', 'right', 'up']),
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion: _propTypes.default.bool,
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.

package/Slide/Slide.mjs

@@ -2,49 +2,63 @@
 
 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 { normalizedTransitionCallback, reflow, getTransitionProps } from "../transitions/utils.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 = {};
 
-// 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) {
+/**
+ * Detects SwipeableDrawer's active-swipe `translate(x, y)` transform.
+ * Keep this in sync with SwipeableDrawer.setPosition.
+ */
+function isGestureTranslate(transform) {
+  return typeof transform === 'string' && /^translate\(.+,\s*.+\)$/.test(transform);
+}
+
+// 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;
   const containerRect = resolvedContainer && resolvedContainer.getBoundingClientRect();
   const containerWindow = ownerWindow(node);
-
-  // 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. The transition must also be cleared, otherwise the
-  // browser may report an animated intermediate value from a still-running
-  // enter transition when reading getComputedStyle during exit.
-  const previousTransform = node.style.transform;
-  const previousTransition = node.style.transition;
-  node.style.transition = '';
-  node.style.transform = '';
-  const rect = node.getBoundingClientRect();
-  const computedStyle = containerWindow.getComputedStyle(node);
-  const transform = computedStyle.getPropertyValue('transform');
-  node.style.transform = previousTransform;
-  node.style.transition = previousTransition;
-  let offsetX = 0;
-  let offsetY = 0;
-  if (transform && transform !== 'none' && typeof transform === 'string') {
-    const transformValues = transform.split('(')[1].split(')')[0].split(',');
-    offsetX = parseInt(transformValues[4], 10);
-    offsetY = parseInt(transformValues[5], 10);
+  let rect;
+  let transform;
+  if (resetInlineTransform) {
+    // 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 = '';
+    node.style.transform = '';
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
+    node.style.transform = previousTransform;
+    node.style.transition = previousTransition;
+  } else {
+    rect = node.getBoundingClientRect();
+    const computedStyle = containerWindow.getComputedStyle(node);
+    transform = computedStyle.getPropertyValue('transform');
   }
+  const {
+    offsetX,
+    offsetY
+  } = getTranslateOffsets(transform);
   if (direction === 'left') {
     if (containerRect) {
       return `translateX(${containerRect.right + offsetX - rect.left}px)`;
@@ -73,9 +87,9 @@ function getTranslateValue(direction, node, resolvedContainer) {
 function resolveContainer(containerPropProp) {
   return typeof containerPropProp === 'function' ? containerPropProp() : containerPropProp;
 }
-export function setTranslateValue(direction, node, containerProp) {
+export function setTranslateValue(direction, node, containerProp, options) {
   const resolvedContainer = resolveContainer(containerProp);
-  const transform = getTranslateValue(direction, node, resolvedContainer);
+  const transform = getTranslateValue(direction, node, resolvedContainer, options);
   if (transform) {
     node.style.transform = transform;
   }
@@ -83,7 +97,6 @@ export function setTranslateValue(direction, node, containerProp) {
 
 /**
  * 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();
@@ -100,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,
@@ -113,11 +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);
     }
@@ -130,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);
@@ -146,32 +172,45 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
-    setTranslateValue(direction, node, containerProp);
+    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;
+
+    // Preserve SwipeableDrawer's inline gesture transform during exit. Slide's
+    // own off-screen translateX/Y transforms still use the reset path.
+    setTranslateValue(direction, node, containerProp, {
+      resetInlineTransform: !preserveInlineTransform
+    });
     if (onExit) {
       onExit(node);
     }
   });
   const handleExited = normalizedTransitionCallback(childrenRef, node => {
-    // No need for transitions when the component is hidden
+    preserveInlineTransformRef.current = false;
+    // 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;
     }
@@ -188,9 +227,9 @@ const Slide = /*#__PURE__*/React.forwardRef(function Slide(props, ref) {
     };
   }, [direction, inProp, containerProp]);
   React.useEffect(() => {
-    if (!inProp) {
-      // We need to update the position of the drawer when the direction change and
-      // when it's hidden.
+    if (!inProp && !preserveInlineTransformRef.current) {
+      // While hidden, keep the child at the correct off-screen position if
+      // direction or container changes.
       updatePosition();
     }
   }, [inProp, updatePosition]);
@@ -205,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 ? {
@@ -240,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,
   /**
@@ -280,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.