@mui/material 9.0.0 → 9.1.0

package/Drawer/Drawer.d.ts

@@ -6,7 +6,7 @@ import { CreateSlotsAndSlotProps, SlotProps } from "../utils/types.js";
 import { ModalProps } from "../Modal/index.js";
 import { BackdropProps } from "../Backdrop/index.js";
 import { PaperProps } from "../Paper/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { DrawerClasses } from "./drawerClasses.js";
 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;

package/Drawer/Drawer.js

@@ -23,8 +23,10 @@ var _rootShouldForwardProp = _interopRequireDefault(require("../styles/rootShoul
 var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
 var _drawerClasses = require("./drawerClasses");
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
+var _focusable = require("../utils/focusable");
 var _utils = require("../utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const overridesResolver = (props, styles) => {
@@ -203,9 +205,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   const mounted = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = (0, _useForkRef.default)(ref, rootRef);
   React.useEffect(() => {
     mounted.current = true;
   }, []);
+
+  // Resolve the container lazily so Slide reads the mounted modal root
+  // after refs are assigned, rather than the initial null ref during render.
+  const resolveSlideContainer = React.useCallback(() => rootRef.current, []);
   const anchorInvariant = getAnchor({
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
@@ -229,7 +237,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     }
   };
   const [RootSlot, rootSlotProps] = (0, _useSlot.default)('root', {
-    ref,
+    ref: handleRef,
     elementType: DrawerRoot,
     className: (0, _clsx.default)(classes.root, classes.modal, className),
     shouldForwardComponentProp: true,
@@ -240,6 +248,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       ...ModalProps
     },
     additionalProps: {
+      closeAfterTransition: true,
       open,
       onClose,
       hideBackdrop,
@@ -262,13 +271,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       square: true,
       ...(variant === 'temporary' && {
         role: 'dialog',
-        'aria-modal': 'true'
+        'aria-modal': 'true',
+        [_focusable.FOCUSABLE_ATTRIBUTE]: '',
+        tabIndex: -1
       })
     }
   });
   const [DockedSlot, dockedSlotProps] = (0, _useSlot.default)('docked', {
     elementType: DrawerDockedRoot,
-    ref,
+    ref: handleRef,
     className: (0, _clsx.default)(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
@@ -282,7 +293,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       in: open,
       direction: oppositeDirection[anchorInvariant],
       timeout: transitionDuration,
-      appear: mounted.current
+      appear: mounted.current,
+      ...(variant === 'temporary' && (slots.transition == null || slots.transition === _Slide.default) && {
+        container: resolveSlideContainer
+      })
     }
   });
   const drawer = /*#__PURE__*/(0, _jsxRuntime.jsx)(PaperSlot, {

package/Drawer/Drawer.mjs

@@ -14,8 +14,10 @@ import rootShouldForwardProp from "../styles/rootShouldForwardProp.mjs";
 import { styled, useTheme } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import useForkRef from "../utils/useForkRef.mjs";
 import { getDrawerUtilityClass } from "./drawerClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
+import { FOCUSABLE_ATTRIBUTE } from "../utils/focusable.mjs";
 import { mergeSlotProps } from "../utils/index.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const overridesResolver = (props, styles) => {
@@ -194,9 +196,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
   // We use this state is order to skip the appear transition during the
   // initial mount of the component.
   const mounted = React.useRef(false);
+  const rootRef = React.useRef(null);
+  const handleRef = useForkRef(ref, rootRef);
   React.useEffect(() => {
     mounted.current = true;
   }, []);
+
+  // Resolve the container lazily so Slide reads the mounted modal root
+  // after refs are assigned, rather than the initial null ref during render.
+  const resolveSlideContainer = React.useCallback(() => rootRef.current, []);
   const anchorInvariant = getAnchor({
     direction: isRtl ? 'rtl' : 'ltr'
   }, anchorProp);
@@ -220,7 +228,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
     }
   };
   const [RootSlot, rootSlotProps] = useSlot('root', {
-    ref,
+    ref: handleRef,
     elementType: DrawerRoot,
     className: clsx(classes.root, classes.modal, className),
     shouldForwardComponentProp: true,
@@ -231,6 +239,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       ...ModalProps
     },
     additionalProps: {
+      closeAfterTransition: true,
       open,
       onClose,
       hideBackdrop,
@@ -253,13 +262,15 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       square: true,
       ...(variant === 'temporary' && {
         role: 'dialog',
-        'aria-modal': 'true'
+        'aria-modal': 'true',
+        [FOCUSABLE_ATTRIBUTE]: '',
+        tabIndex: -1
       })
     }
   });
   const [DockedSlot, dockedSlotProps] = useSlot('docked', {
     elementType: DrawerDockedRoot,
-    ref,
+    ref: handleRef,
     className: clsx(classes.root, classes.docked, className),
     ownerState,
     externalForwardedProps,
@@ -273,7 +284,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(inProps, ref) {
       in: open,
       direction: oppositeDirection[anchorInvariant],
       timeout: transitionDuration,
-      appear: mounted.current
+      appear: mounted.current,
+      ...(variant === 'temporary' && (slots.transition == null || slots.transition === Slide) && {
+        container: resolveSlideContainer
+      })
     }
   });
   const drawer = /*#__PURE__*/_jsx(PaperSlot, {

package/Fab/Fab.js

@@ -19,6 +19,7 @@ var _zeroStyled = require("../zero-styled");
 var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _createSimplePaletteValueFilter = _interopRequireDefault(require("../utils/createSimplePaletteValueFilter"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -52,7 +53,7 @@ const FabRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
 }) => ({
   ...theme.typography.button,
   minHeight: 36,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+  ...(0, _utils.getTransitionStyles)(theme, ['background-color', 'box-shadow', 'border-color'], {
     duration: theme.transitions.duration.short
   }),
   borderRadius: '50%',
@@ -194,6 +195,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(FabRoot, {
     className: (0, _clsx.default)(classes.root, className),
     component: component,
@@ -204,7 +211,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/Fab/Fab.mjs

@@ -12,6 +12,7 @@ import { styled } from "../zero-styled/index.mjs";
 import memoTheme from "../utils/memoTheme.mjs";
 import createSimplePaletteValueFilter from "../utils/createSimplePaletteValueFilter.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -45,7 +46,7 @@ const FabRoot = styled(ButtonBase, {
 }) => ({
   ...theme.typography.button,
   minHeight: 36,
-  transition: theme.transitions.create(['background-color', 'box-shadow', 'border-color'], {
+  ...getTransitionStyles(theme, ['background-color', 'box-shadow', 'border-color'], {
     duration: theme.transitions.duration.short
   }),
   borderRadius: '50%',
@@ -187,6 +188,12 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     variant
   };
   const classes = useUtilityClasses(ownerState);
+
+  // Don't forward the 'root' class to the ButtonBase, as it will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/_jsx(FabRoot, {
     className: clsx(classes.root, className),
     component: component,
@@ -197,7 +204,7 @@ const Fab = /*#__PURE__*/React.forwardRef(function Fab(inProps, ref) {
     ownerState: ownerState,
     ref: ref,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: children
   });
 });

package/Fade/Fade.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 FadeProps extends Omit<TransitionProps, 'children'> {
+  /**
+   * 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.
@@ -11,6 +20,11 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
    * A single child content element.
    */
   children: React.ReactElement<unknown, any>;
+  /**
+   * 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.
@@ -34,7 +48,6 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
 
 /**
  * The Fade transition is used by the [Modal](https://mui.com/material-ui/react-modal/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Fade/Fade.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 FadeProps extends Omit<TransitionProps, 'children'> {
+  /**
+   * 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.
@@ -11,6 +20,11 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
    * A single child content element.
    */
   children: React.ReactElement<unknown, any>;
+  /**
+   * 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.
@@ -34,7 +48,6 @@ export interface FadeProps extends Omit<TransitionProps, 'children'> {
 
 /**
  * The Fade transition is used by the [Modal](https://mui.com/material-ui/react-modal/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Fade/Fade.js

@@ -9,9 +9,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _reactTransitionGroup = require("react-transition-group");
 var _elementAcceptingRef = _interopRequireDefault(require("@mui/utils/elementAcceptingRef"));
 var _getReactElementRef = _interopRequireDefault(require("@mui/utils/getReactElementRef"));
+var _Transition = _interopRequireDefault(require("../internal/Transition"));
+var _useReducedMotion = _interopRequireDefault(require("../transitions/useReducedMotion"));
 var _zeroStyled = require("../zero-styled");
 var _utils = require("../transitions/utils");
 var _useForkRef = _interopRequireDefault(require("../utils/useForkRef"));
@@ -37,7 +38,6 @@ const hiddenStyles = {
 
 /**
  * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   const theme = (0, _zeroStyled.useTheme)();
@@ -49,6 +49,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     addEndListener,
     appear = true,
     children,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -61,12 +62,14 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     timeout = defaultTimeout,
     ...other
   } = props;
+  const reducedMotion = (0, _useReducedMotion.default)(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const nodeRef = React.useRef(null);
   const handleRef = (0, _useForkRef.default)(nodeRef, (0, _getReactElementRef.default)(children), ref);
   const handleEntering = (0, _utils.normalizedTransitionCallback)(nodeRef, onEntering);
   const handleEnter = (0, _utils.normalizedTransitionCallback)(nodeRef, (node, isAppearing) => {
-    (0, _utils.reflow)(node); // So the animation always start from the start.
-
+    if (!reducedMotion.shouldReduceMotion) {
+      (0, _utils.reflow)(node); // Force layout so the animation starts from the initial styles.
+    }
     const transitionProps = (0, _utils.getTransitionProps)({
       style,
       timeout,
@@ -74,7 +77,15 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.transition = theme.transitions.create('opacity', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -89,27 +100,32 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('opacity', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     if (onExit) {
       onExit(node);
     }
   });
   const handleExited = (0, _utils.normalizedTransitionCallback)(nodeRef, node => {
-    // Clear the transition CSS to release the compositor layer when the
-    // element is fully exited (prevents idle CPU usage on fixed elements
-    // like Backdrop). handleEnter re-sets it on the next open.
+    // Clear transition CSS after exit so fixed elements like Backdrop do not
+    // keep a compositor layer alive and cause idle CPU usage. handleEnter sets
+    // it again on next open.
     node.style.transition = '';
     if (onExited) {
       onExited(node);
     }
   });
-  const handleAddEndListener = next => {
-    if (addEndListener) {
-      // Old call signature before `react-transition-group` implemented `nodeRef`
-      addEndListener(nodeRef.current, next);
-    }
-  };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactTransitionGroup.Transition, {
+  const handleAddEndListener = addEndListener ? next => {
+    addEndListener(nodeRef.current, next);
+  } : undefined;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Transition.default, {
     appear: appear,
     in: inProp,
     nodeRef: nodeRef,
@@ -120,12 +136,15 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
+    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.
       const childStyle = (0, _utils.getTransitionChildStyle)(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
         style: childStyle,
@@ -141,9 +160,12 @@ process.env.NODE_ENV !== "production" ? Fade.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,
   /**
@@ -156,6 +178,11 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes /* remove-proptypes */ =
    * A single child content element.
    */
   children: _elementAcceptingRef.default.isRequired,
+  /**
+   * 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/Fade/Fade.mjs

@@ -2,9 +2,10 @@
 
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Transition } from 'react-transition-group';
 import elementAcceptingRef from '@mui/utils/elementAcceptingRef';
 import getReactElementRef from '@mui/utils/getReactElementRef';
+import Transition from "../internal/Transition.mjs";
+import useReducedMotion from "../transitions/useReducedMotion.mjs";
 import { useTheme } from "../zero-styled/index.mjs";
 import { normalizedTransitionCallback, reflow, getTransitionProps, getTransitionChildStyle } from "../transitions/utils.mjs";
 import useForkRef from "../utils/useForkRef.mjs";
@@ -30,7 +31,6 @@ const hiddenStyles = {
 
 /**
  * The Fade transition is used by the [Modal](/material-ui/react-modal/) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
   const theme = useTheme();
@@ -42,6 +42,7 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     addEndListener,
     appear = true,
     children,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -54,12 +55,14 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     timeout = defaultTimeout,
     ...other
   } = props;
+  const reducedMotion = useReducedMotion(theme.motion.reducedMotion, disablePrefersReducedMotion);
   const nodeRef = React.useRef(null);
   const handleRef = useForkRef(nodeRef, getReactElementRef(children), ref);
   const handleEntering = normalizedTransitionCallback(nodeRef, onEntering);
   const handleEnter = normalizedTransitionCallback(nodeRef, (node, isAppearing) => {
-    reflow(node); // So the animation always start from the start.
-
+    if (!reducedMotion.shouldReduceMotion) {
+      reflow(node); // Force layout so the animation starts from the initial styles.
+    }
     const transitionProps = getTransitionProps({
       style,
       timeout,
@@ -67,7 +70,15 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'enter'
     });
-    node.style.transition = theme.transitions.create('opacity', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -82,26 +93,31 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('opacity', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('opacity', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     if (onExit) {
       onExit(node);
     }
   });
   const handleExited = normalizedTransitionCallback(nodeRef, node => {
-    // Clear the transition CSS to release the compositor layer when the
-    // element is fully exited (prevents idle CPU usage on fixed elements
-    // like Backdrop). handleEnter re-sets it on the next open.
+    // Clear transition CSS after exit so fixed elements like Backdrop do not
+    // keep a compositor layer alive and cause idle CPU usage. handleEnter sets
+    // it again on next open.
     node.style.transition = '';
     if (onExited) {
       onExited(node);
     }
   });
-  const handleAddEndListener = 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;
   return /*#__PURE__*/_jsx(Transition, {
     appear: appear,
     in: inProp,
@@ -113,12 +129,15 @@ const Fade = /*#__PURE__*/React.forwardRef(function Fade(props, ref) {
     onExited: handleExited,
     onExiting: handleExiting,
     addEndListener: handleAddEndListener,
+    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.
       const childStyle = getTransitionChildStyle(state, inProp, styles, hiddenStyles, style, children.props.style);
       return /*#__PURE__*/React.cloneElement(children, {
         style: childStyle,
@@ -134,9 +153,12 @@ process.env.NODE_ENV !== "production" ? Fade.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,
   /**
@@ -149,6 +171,11 @@ process.env.NODE_ENV !== "production" ? Fade.propTypes /* remove-proptypes */ =
    * A single child content element.
    */
   children: elementAcceptingRef.isRequired,
+  /**
+   * 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/FilledInput/FilledInput.d.mts

@@ -20,6 +20,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * @default false
    */
   disableUnderline?: boolean | undefined;
+  /**
+   * @internal
+   */
+  notched?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

package/FilledInput/FilledInput.d.ts

@@ -20,6 +20,10 @@ export interface FilledInputProps extends StandardProps<InputBaseProps> {
    * @default false
    */
   disableUnderline?: boolean | undefined;
+  /**
+   * @internal
+   */
+  notched?: boolean | undefined;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */