@mui/material 9.0.0 → 9.1.0

package/ClickAwayListener/ClickAwayListener.mjs

@@ -2,6 +2,7 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
+import contains from '@mui/utils/contains';
 import ownerDocument from '@mui/utils/ownerDocument';
 import useForkRef from '@mui/utils/useForkRef';
 import useEventCallback from '@mui/utils/useEventCallback';
@@ -66,7 +67,7 @@ function ClickAwayListener(props) {
     syntheticEventRef.current = false;
     const doc = ownerDocument(nodeRef.current);
 
-    // 1. IE11 support, which trigger the handleClickAway even after the unbind
+    // 1. IE 11 support, which trigger the handleClickAway even after the unbind
     // 2. The child might render null.
     // 3. Behave like a blur listener.
     if (!activatedRef.current || !nodeRef.current || 'clientX' in event && clickedRootScrollbar(event, doc)) {
@@ -84,11 +85,7 @@ function ClickAwayListener(props) {
     if (event.composedPath) {
       insideDOM = event.composedPath().includes(nodeRef.current);
     } else {
-      insideDOM = !doc.documentElement.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target) || nodeRef.current.contains(
-      // @ts-expect-error returns `false` as intended when not dispatched from a Node
-      event.target);
+      insideDOM = !contains(doc.documentElement, event.target) || contains(nodeRef.current, event.target);
     }
     if (!insideDOM && (disableReactTree || !insideReactTree)) {
       onClickAway(event);

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.

package/Collapse/Collapse.mjs

@@ -3,10 +3,10 @@
 import * as React from 'react';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
-import useTimeout from '@mui/utils/useTimeout';
 import elementTypeAcceptingRef from '@mui/utils/elementTypeAcceptingRef';
 import composeClasses from '@mui/utils/composeClasses';
+import Transition from "../internal/Transition.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
@@ -16,6 +16,7 @@ import { useForkRef } from "../utils/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { getCollapseUtilityClass } from "./collapseClasses.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
+const EMPTY_OBJECT = {};
 const useUtilityClasses = ownerState => {
   const {
     orientation,
@@ -83,7 +84,7 @@ const CollapseWrapper = 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: [{
@@ -115,7 +116,6 @@ const CollapseWrapperInner = 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 = useDefaultProps({
@@ -128,6 +128,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     className,
     collapsedSize: collapsedSizeProp = '0px',
     component,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -137,8 +138,8 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
     onExited,
     onExiting,
     orientation = 'vertical',
-    slots = {},
-    slotProps = {},
+    slots = EMPTY_OBJECT,
+    slotProps = EMPTY_OBJECT,
     style,
     timeout = duration.standard,
     // eslint-disable-next-line react/prop-types
@@ -152,18 +153,19 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   };
   const classes = useUtilityClasses(ownerState);
   const theme = useTheme();
-  const timer = useTimeout();
   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 = useReducedMotion(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(ref, nodeRef);
   const getWrapperSize = () => wrapperRef.current ? wrapperRef.current[isHorizontal ? 'clientWidth' : 'clientHeight'] : 0;
   const handleEnter = 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;
@@ -174,7 +176,7 @@ const Collapse = /*#__PURE__*/React.forwardRef(function Collapse(inProps, ref) {
   const handleEntering = 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 {
@@ -187,13 +189,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) {
@@ -225,30 +231,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,
@@ -289,6 +292,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,
@@ -327,9 +332,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.func,
   /**
@@ -354,6 +362,11 @@ process.env.NODE_ENV !== "production" ? Collapse.propTypes /* remove-proptypes *
    * Either a string to use a HTML element or a component.
    */
   component: elementTypeAcceptingRef,
+  /**
+   * 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/Dialog/Dialog.d.mts

@@ -5,13 +5,13 @@ import { InternalStandardProps as StandardProps } from "../internal/index.mjs";
 import { BackdropProps } from "../Backdrop/index.mjs";
 import { PaperProps } from "../Paper/index.mjs";
 import { ModalProps } from "../Modal/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { DialogClasses } from "./dialogClasses.mjs";
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.mjs";
 export interface DialogSlots {
   /**
    * 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 Collapse
    */
   transition?: React.ElementType | undefined;

package/Dialog/Dialog.d.ts

@@ -5,13 +5,13 @@ import { InternalStandardProps as StandardProps } from "../internal/index.js";
 import { BackdropProps } from "../Backdrop/index.js";
 import { PaperProps } from "../Paper/index.js";
 import { ModalProps } from "../Modal/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { DialogClasses } from "./dialogClasses.js";
 import { CreateSlotsAndSlotProps, SlotComponentProps, SlotProps } from "../utils/types.js";
 export interface DialogSlots {
   /**
    * 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 Collapse
    */
   transition?: React.ElementType | undefined;

package/Dialog/Dialog.js

@@ -23,6 +23,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _focusable = require("../utils/focusable");
 var _jsxRuntime = require("react/jsx-runtime");
 const DialogBackdrop = (0, _zeroStyled.styled)(_Backdrop.default, {
   name: 'MuiDialog',
@@ -114,6 +115,8 @@ const DialogPaper = (0, _zeroStyled.styled)(_Paper.default, {
   margin: 32,
   position: 'relative',
   overflowY: 'auto',
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'
@@ -298,7 +301,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
-    className: classes.paper
+    className: classes.paper,
+    additionalProps: {
+      elevation: 24,
+      role,
+      'aria-describedby': ariaDescribedby,
+      'aria-labelledby': ariaLabelledby,
+      'aria-modal': ariaModal,
+      tabIndex: -1,
+      [_focusable.FOCUSABLE_ATTRIBUTE]: ''
+    }
   });
   const [ContainerSlot, containerSlotProps] = (0, _useSlot.default)('container', {
     elementType: DialogContainer,
@@ -340,11 +352,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         ...containerSlotProps,
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {
           as: PaperComponent,
-          elevation: 24,
-          role: role,
-          "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby,
-          "aria-modal": ariaModal,
           ...paperSlotProps,
           children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DialogContext.default.Provider, {
             value: dialogContextValue,

package/Dialog/Dialog.mjs

@@ -16,6 +16,7 @@ import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { FOCUSABLE_ATTRIBUTE } from "../utils/focusable.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const DialogBackdrop = styled(Backdrop, {
   name: 'MuiDialog',
@@ -107,6 +108,8 @@ const DialogPaper = styled(Paper, {
   margin: 32,
   position: 'relative',
   overflowY: 'auto',
+  // We disable the focus ring for mouse, touch and keyboard users.
+  outline: 0,
   '@media print': {
     overflowY: 'visible',
     boxShadow: 'none'
@@ -291,7 +294,16 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
     shouldForwardComponentProp: true,
     externalForwardedProps,
     ownerState,
-    className: classes.paper
+    className: classes.paper,
+    additionalProps: {
+      elevation: 24,
+      role,
+      'aria-describedby': ariaDescribedby,
+      'aria-labelledby': ariaLabelledby,
+      'aria-modal': ariaModal,
+      tabIndex: -1,
+      [FOCUSABLE_ATTRIBUTE]: ''
+    }
   });
   const [ContainerSlot, containerSlotProps] = useSlot('container', {
     elementType: DialogContainer,
@@ -333,11 +345,6 @@ const Dialog = /*#__PURE__*/React.forwardRef(function Dialog(inProps, ref) {
         ...containerSlotProps,
         children: /*#__PURE__*/_jsx(PaperSlot, {
           as: PaperComponent,
-          elevation: 24,
-          role: role,
-          "aria-describedby": ariaDescribedby,
-          "aria-labelledby": ariaLabelledby,
-          "aria-modal": ariaModal,
           ...paperSlotProps,
           children: /*#__PURE__*/_jsx(DialogContext.Provider, {
             value: dialogContextValue,

package/Drawer/Drawer.d.mts

@@ -6,7 +6,7 @@ import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.mjs";
 import { ModalProps } from "../Modal/index.mjs";
 import { BackdropProps } from "../Backdrop/index.mjs";
 import { PaperProps } from "../Paper/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { DrawerClasses } from "./drawerClasses.mjs";
 export interface DrawerRootSlotPropsOverrides {}
 export interface DrawerDockedSlotPropsOverrides {}
@@ -36,7 +36,7 @@ export interface DrawerSlots {
   paper: React.ElementType;
   /**
    * The component used for 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 Slide
    */
   transition: React.ElementType;