@mui/material 9.0.1 → 9.1.0

package/CircularProgress/CircularProgress.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+exports.resetWarningFlags = resetWarningFlags;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _clsx = _interopRequireDefault(require("clsx"));
@@ -17,9 +18,16 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _capitalize = _interopRequireDefault(require("../utils/capitalize"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
+var _utils = require("../transitions/utils");
 var _circularProgressClasses = require("./circularProgressClasses");
 var _jsxRuntime = require("react/jsx-runtime");
 const SIZE = 44;
+let warnedMinMaxWithoutVariant = false;
+let warnedInvalidMinMaxValue = false;
+function resetWarningFlags() {
+  warnedMinMaxWithoutVariant = false;
+  warnedInvalidMinMaxValue = false;
+}
 const circularRotateKeyframe = (0, _zeroStyled.keyframes)`
   0% {
     transform: rotate(0deg);
@@ -81,31 +89,41 @@ const CircularProgressRoot = (0, _zeroStyled.styled)('span', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  display: 'inline-block',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('transform')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: rotateAnimation || {
-      animation: `${circularRotateKeyframe} 1.4s linear infinite`
-    }
-  }, ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      color: (theme.vars || theme).palette[color].main
-    }
-  }))]
-})));
+}) => {
+  const reducedMotionAnimationStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    animation: 'none'
+  });
+  return {
+    display: 'inline-block',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...(0, _utils.getTransitionStyles)(theme, 'transform')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: rotateAnimation || {
+        animation: `${circularRotateKeyframe} 1.4s linear infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: {
+        variant: 'indeterminate'
+      },
+      style: reducedMotionAnimationStyles
+    }] : []), ...Object.entries(theme.palette).filter((0, _createSimplePaletteValueFilter.default)()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }))]
+  };
+}));
 const CircularProgressSVG = (0, _zeroStyled.styled)('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg'
@@ -123,34 +141,44 @@ const CircularProgressCircle = (0, _zeroStyled.styled)('circle', {
   }
 })((0, _memoTheme.default)(({
   theme
-}) => ({
-  stroke: 'currentColor',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('stroke-dashoffset')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: '80px, 200px',
-      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
-    style: dashAnimation || {
-      // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
-      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
-    }
-  }]
-})));
+}) => {
+  const reducedMotionAnimationStyles = (0, _utils.getReducedMotionStyles)(theme, {
+    animation: 'none'
+  });
+  return {
+    stroke: 'currentColor',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...(0, _utils.getTransitionStyles)(theme, 'stroke-dashoffset')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: {
+        // Some default value that looks fine while waiting for the animation to kick in.
+        strokeDasharray: '80px, 200px',
+        strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: dashAnimation || {
+        // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
+        animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: reducedMotionAnimationStyles
+    }] : [])]
+  };
+}));
 const CircularProgressTrack = (0, _zeroStyled.styled)('circle', {
   name: 'MuiCircularProgress',
   slot: 'Track'
@@ -188,8 +216,9 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     ...other
   } = props;
   if (process.env.NODE_ENV !== 'production') {
-    if (variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
+    if (!warnedMinMaxWithoutVariant && variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
       console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' variant. These props will have no effect.`);
+      warnedMinMaxWithoutVariant = true;
     }
   }
   const min = minProp ?? 0;
@@ -211,8 +240,9 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
   if (variant === 'determinate') {
     const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
     if (process.env.NODE_ENV !== 'production') {
-      if (value < min || value > max || min >= max) {
+      if (!warnedInvalidMinMaxValue && (value < min || value > max || min >= max)) {
         console.error(`MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+        warnedInvalidMinMaxValue = true;
       }
     }
     const range = max - min;

package/CircularProgress/CircularProgress.mjs

@@ -10,9 +10,16 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import capitalize from "../utils/capitalize.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
+import { getReducedMotionStyles, getTransitionStyles } from "../transitions/utils.mjs";
 import { getCircularProgressUtilityClass } from "./circularProgressClasses.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const SIZE = 44;
+let warnedMinMaxWithoutVariant = false;
+let warnedInvalidMinMaxValue = false;
+export function resetWarningFlags() {
+  warnedMinMaxWithoutVariant = false;
+  warnedInvalidMinMaxValue = false;
+}
 const circularRotateKeyframe = keyframes`
   0% {
     transform: rotate(0deg);
@@ -74,31 +81,41 @@ const CircularProgressRoot = styled('span', {
   }
 })(memoTheme(({
   theme
-}) => ({
-  display: 'inline-block',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('transform')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: rotateAnimation || {
-      animation: `${circularRotateKeyframe} 1.4s linear infinite`
-    }
-  }, ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
-    props: {
-      color
-    },
-    style: {
-      color: (theme.vars || theme).palette[color].main
-    }
-  }))]
-})));
+}) => {
+  const reducedMotionAnimationStyles = getReducedMotionStyles(theme, {
+    animation: 'none'
+  });
+  return {
+    display: 'inline-block',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...getTransitionStyles(theme, 'transform')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: rotateAnimation || {
+        animation: `${circularRotateKeyframe} 1.4s linear infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: {
+        variant: 'indeterminate'
+      },
+      style: reducedMotionAnimationStyles
+    }] : []), ...Object.entries(theme.palette).filter(createSimplePaletteValueFilter()).map(([color]) => ({
+      props: {
+        color
+      },
+      style: {
+        color: (theme.vars || theme).palette[color].main
+      }
+    }))]
+  };
+}));
 const CircularProgressSVG = styled('svg', {
   name: 'MuiCircularProgress',
   slot: 'Svg'
@@ -116,34 +133,44 @@ const CircularProgressCircle = styled('circle', {
   }
 })(memoTheme(({
   theme
-}) => ({
-  stroke: 'currentColor',
-  variants: [{
-    props: {
-      variant: 'determinate'
-    },
-    style: {
-      transition: theme.transitions.create('stroke-dashoffset')
-    }
-  }, {
-    props: {
-      variant: 'indeterminate'
-    },
-    style: {
-      // Some default value that looks fine waiting for the animation to kicks in.
-      strokeDasharray: '80px, 200px',
-      strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
-    }
-  }, {
-    props: ({
-      ownerState
-    }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
-    style: dashAnimation || {
-      // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
-      animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
-    }
-  }]
-})));
+}) => {
+  const reducedMotionAnimationStyles = getReducedMotionStyles(theme, {
+    animation: 'none'
+  });
+  return {
+    stroke: 'currentColor',
+    variants: [{
+      props: {
+        variant: 'determinate'
+      },
+      style: {
+        ...getTransitionStyles(theme, 'stroke-dashoffset')
+      }
+    }, {
+      props: {
+        variant: 'indeterminate'
+      },
+      style: {
+        // Some default value that looks fine while waiting for the animation to kick in.
+        strokeDasharray: '80px, 200px',
+        strokeDashoffset: 0 // Add the unit to fix a Edge 16 and below bug.
+      }
+    }, {
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: dashAnimation || {
+        // At runtime for Pigment CSS, `dashAnimation` will be null and the generated keyframe will be used.
+        animation: `${circularDashKeyframe} 1.4s ease-in-out infinite`
+      }
+    }, ...(reducedMotionAnimationStyles ? [{
+      props: ({
+        ownerState
+      }) => ownerState.variant === 'indeterminate' && !ownerState.disableShrink,
+      style: reducedMotionAnimationStyles
+    }] : [])]
+  };
+}));
 const CircularProgressTrack = styled('circle', {
   name: 'MuiCircularProgress',
   slot: 'Track'
@@ -181,8 +208,9 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
     ...other
   } = props;
   if (process.env.NODE_ENV !== 'production') {
-    if (variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
+    if (!warnedMinMaxWithoutVariant && variant === 'indeterminate' && (minProp !== undefined || maxProp !== undefined)) {
       console.warn(`MUI: You have provided the \`min\` or \`max\` props with an 'indeterminate' variant. These props will have no effect.`);
+      warnedMinMaxWithoutVariant = true;
     }
   }
   const min = minProp ?? 0;
@@ -204,8 +232,9 @@ const CircularProgress = /*#__PURE__*/React.forwardRef(function CircularProgress
   if (variant === 'determinate') {
     const circumference = 2 * Math.PI * ((SIZE - thickness) / 2);
     if (process.env.NODE_ENV !== 'production') {
-      if (value < min || value > max || min >= max) {
+      if (!warnedInvalidMinMaxValue && (value < min || value > max || min >= max)) {
         console.error(`MUI: The min, max, and value props in CircularProgress should be numbers where min < max and min <= value <= max. Received min=${min}, max=${max}, value=${value}.`);
+        warnedInvalidMinMaxValue = true;
       }
     }
     const range = max - min;

package/Collapse/Collapse.d.mts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { TransitionStatus } from 'react-transition-group';
 import { Theme } from "../styles/index.mjs";
 import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps, TransitionStatus } from "../transitions/types.mjs";
 import { CollapseClasses } from "./collapseClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.mjs";
 export interface CollapseSlots {
@@ -32,6 +31,15 @@ export type CollapseSlotsAndSlotProps = CreateSlotsAndSlotProps<CollapseSlots, {
   wrapperInner: SlotProps<'div', CollapseWrapperInnerSlotPropsOverrides, CollapseOwnerState>;
 }>;
 export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>, CollapseSlotsAndSlotProps {
+  /**
+   * 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;
   /**
    * The content node to be collapsed.
    */
@@ -51,6 +59,11 @@ export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>
    * Either a string to use a HTML element or a component.
    */
   component?: React.ElementType<TransitionProps> | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
@@ -85,7 +98,6 @@ export interface CollapseOwnerState extends CollapseProps {
 /**
  * The Collapse transition is used by the
  * [Vertical Stepper](https://mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Collapse/Collapse.d.ts

@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
-import { TransitionStatus } from 'react-transition-group';
 import { Theme } from "../styles/index.js";
 import { InternalStandardProps as StandardProps } from "../internal/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps, TransitionStatus } from "../transitions/types.js";
 import { CollapseClasses } from "./collapseClasses.js";
 import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 export interface CollapseSlots {
@@ -32,6 +31,15 @@ export type CollapseSlotsAndSlotProps = CreateSlotsAndSlotProps<CollapseSlots, {
   wrapperInner: SlotProps<'div', CollapseWrapperInnerSlotPropsOverrides, CollapseOwnerState>;
 }>;
 export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>, CollapseSlotsAndSlotProps {
+  /**
+   * 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;
   /**
    * The content node to be collapsed.
    */
@@ -51,6 +59,11 @@ export interface CollapseProps extends StandardProps<TransitionProps, 'timeout'>
    * Either a string to use a HTML element or a component.
    */
   component?: React.ElementType<TransitionProps> | undefined;
+  /**
+   * If `true`, the transition ignores `theme.motion.reducedMotion` and keeps its normal timing.
+   * @default false
+   */
+  disablePrefersReducedMotion?: boolean | undefined;
   /**
    * The transition timing function.
    * You may specify a single easing or a object containing enter and exit values.
@@ -85,7 +98,6 @@ export interface CollapseOwnerState extends CollapseProps {
 /**
  * The Collapse transition is used by the
  * [Vertical Stepper](https://mui.com/material-ui/react-stepper/#vertical-stepper) StepContent component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Collapse/Collapse.js

@@ -10,10 +10,10 @@ exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _clsx = _interopRequireDefault(require("clsx"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
-var _useTimeout = _interopRequireDefault(require("@mui/utils/useTimeout"));
 var _elementTypeAcceptingRef = _interopRequireDefault(require("@mui/utils/elementTypeAcceptingRef"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _Transition = _interopRequireDefault(require("../internal/Transition"));
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
@@ -23,6 +23,7 @@ var _utils2 = require("../utils");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _collapseClasses = require("./collapseClasses");
 var _jsxRuntime = require("react/jsx-runtime");
+const EMPTY_OBJECT = {};
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -90,7 +91,7 @@ const CollapseWrapper = (0, _zeroStyled.styled)('div', {
   name: 'MuiCollapse',
   slot: 'Wrapper'
 })({
-  // Hack to get children with a negative margin to not falsify the height computation.
+  // Prevent children with negative margins from making the measured size too small.
   display: 'flex',
   width: '100%',
   variants: [{
@@ -122,7 +123,6 @@ const CollapseWrapperInner = (0, _zeroStyled.styled)('div', {
 /**
  * The Collapse transition is used by the
  * [Vertical Stepper](/material-ui/react-stepper/#vertical-stepper) StepContent component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   const props = (0, _DefaultPropsProvider.useDefaultProps)({
@@ -135,6 +135,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     className,
     collapsedSize: collapsedSizeProp = '0px',
     component,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -144,12 +145,12 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     onExited,
     onExiting,
     orientation = 'vertical',
-    slots = {},
-    slotProps = {},
+    slots = EMPTY_OBJECT,
+    slotProps = EMPTY_OBJECT,
     style,
     timeout = _createTransitions.duration.standard,
     // eslint-disable-next-line react/prop-types
-    TransitionComponent = _reactTransitionGroup.Transition,
+    TransitionComponent = _Transition.default,
     ...other
   } = props;
   const ownerState = {
@@ -159,18 +160,19 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const theme = (0, _zeroStyled.useTheme)();
-  const timer = (0, _useTimeout.default)();
   const wrapperRef = React.useRef(null);
-  const autoTransitionDuration = React.useRef();
+  const autoTransitionDuration = React.useRef(null);
   const collapsedSize = typeof collapsedSizeProp === 'number' ? `${collapsedSizeProp}px` : collapsedSizeProp;
   const isHorizontal = orientation === 'horizontal';
   const size = isHorizontal ? 'width' : 'height';
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const nodeRef = React.useRef(null);
   const handleRef = (0, _utils2.useForkRef)(ref, nodeRef);
   const getWrapperSize = () => wrapperRef.current ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;
   const handleEnter = (0, _utils.normalizedTransitionCallback)(nodeRef, (node, isAppearing) => {
     if (wrapperRef.current && isHorizontal) {
-      // Set absolute position to get the size of collapsed content
+      // Temporarily remove horizontal content from normal layout so we can
+      // measure its natural width.
       wrapperRef.current.style.position = 'absolute';
     }
     node.style[size] = collapsedSize;
@@ -181,7 +183,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   const handleEntering = (0, _utils.normalizedTransitionCallback)(nodeRef, (node, isAppearing) => {
     const wrapperSize = getWrapperSize();
     if (wrapperRef.current && isHorizontal) {
-      // After the size is read reset the position back to default
+      // Restore normal layout after measuring the horizontal content.
       wrapperRef.current.style.position = '';
     }
     const {
@@ -194,13 +196,17 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     }, {
       mode: 'enter'
     });
-    if (timeout === 'auto') {
+    if (timeout === 'auto' && !reducedMotion.shouldReduceMotion) {
       const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
-      node.style.transitionDuration = `${duration2}ms`;
       autoTransitionDuration.current = duration2;
     } else {
-      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
+      autoTransitionDuration.current = null;
     }
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: autoTransitionDuration.current ?? transitionDuration,
+      delay: undefined
+    });
+    node.style.transitionDuration = typeof transitionTiming.duration === 'string' ? transitionTiming.duration : `${transitionTiming.duration}ms`;
     node.style[size] = `${wrapperSize}px`;
     node.style.transitionTimingFunction = transitionTimingFunction;
     if (onEntering) {
@@ -232,30 +238,27 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     }, {
       mode: 'exit'
     });
-    if (timeout === 'auto') {
-      // TODO: rename getAutoHeightDuration to something more generic (width support)
-      // Actually it just calculates animation duration based on size
+    if (timeout === 'auto' && !reducedMotion.shouldReduceMotion) {
+      // getAutoHeightDuration also works for width; it calculates duration from size.
       const duration2 = theme.transitions.getAutoHeightDuration(wrapperSize);
-      node.style.transitionDuration = `${duration2}ms`;
       autoTransitionDuration.current = duration2;
     } else {
-      node.style.transitionDuration = typeof transitionDuration === 'string' ? transitionDuration : `${transitionDuration}ms`;
+      autoTransitionDuration.current = null;
     }
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: autoTransitionDuration.current ?? transitionDuration,
+      delay: undefined
+    });
+    node.style.transitionDuration = typeof transitionTiming.duration === 'string' ? transitionTiming.duration : `${transitionTiming.duration}ms`;
     node.style[size] = collapsedSize;
     node.style.transitionTimingFunction = transitionTimingFunction;
     if (onExiting) {
       onExiting(node);
     }
   });
-  const handleAddEndListener = next => {
-    if (timeout === 'auto') {
-      timer.start(autoTransitionDuration.current || 0, next);
-    }
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(nodeRef.current, next);
-    }
-  };
+  const handleAddEndListener = addEndListener ? next => {
+    addEndListener(nodeRef.current, next);
+  } : undefined;
   const externalForwardedProps = {
     slots,
     slotProps,
@@ -296,6 +299,8 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
+    getAutoTimeout: timeout === 'auto' ? () => autoTransitionDuration.current : undefined,
+    reduceMotion: reducedMotion.shouldReduceMotion,
     nodeRef: nodeRef,
     timeout: timeout === 'auto' ? null : timeout,
     ...other,
@@ -334,9 +339,12 @@ process.env.NODE_ENV !== "production" ? Collapse.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,
   /**
@@ -361,6 +369,11 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes /* remove-proptypes *
    * Either a string to use a HTML element or a component.
    */
   component: _elementTypeAcceptingRef.default,
+  /**
+   * 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.