@mui/material 9.0.1 → 9.1.0

package/Unstable_TrapFocus/FocusTrap.js

@@ -164,17 +164,51 @@ function FocusTrap(props) {
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const rootElement = rootRef.current;
       const activeElement = (0, _getActiveElement.default)(doc);
+      if (rootElement === null) {
+        return;
+      }
+      const focusTarget = (0, _focusable.getFocusTarget)(rootElement);
+      const isFocusStart = activeElement === rootElement || activeElement === focusTarget;
 
-      // Make sure the next tab starts from the right place.
-      // activeElement refers to the origin.
-      if (activeElement === rootRef.current && nativeEvent.shiftKey) {
-        // We need to ignore the next contain as
-        // it will try to move the focus back to the rootRef element.
-        ignoreNextEnforceFocus.current = true;
-        if (sentinelEnd.current) {
-          sentinelEnd.current.focus();
+      // Marked focus targets can be non-tabbable, but should start tabbing
+      // from the first/last tabbable child.
+      if (isFocusStart) {
+        const tabbable = getTabbable(rootElement);
+        if (tabbable.length === 0) {
+          return;
+        }
+        nativeEvent.preventDefault();
+        if (nativeEvent.shiftKey) {
+          tabbable[tabbable.length - 1].focus();
+        } else {
+          tabbable[0].focus();
+        }
+        return;
+      }
+      if ((0, _contains.default)(rootElement, activeElement)) {
+        const tabbable = getTabbable(rootElement);
+        const currentIndex = tabbable.indexOf(activeElement);
+        if (currentIndex === -1) {
+          // Leave shadow-root descendants to native tab handling.
+          return;
+        }
+        const hasPositiveTabIndex = tabbable.some(node => getTabIndex(node) > 0);
+
+        // Positive tabIndex needs the computed order; regular tabIndex=0 can
+        // use native tab handling.
+        if (!hasPositiveTabIndex) {
+          return;
+        }
+        nativeEvent.preventDefault();
+        let nextIndex = 0;
+        if (nativeEvent.shiftKey) {
+          nextIndex = currentIndex <= 0 ? tabbable.length - 1 : currentIndex - 1;
+        } else {
+          nextIndex = currentIndex === tabbable.length - 1 ? 0 : currentIndex + 1;
         }
+        tabbable[nextIndex].focus();
       }
     };
     const contain = () => {

package/Unstable_TrapFocus/FocusTrap.mjs

@@ -157,17 +157,51 @@ function FocusTrap(props) {
       if (disableEnforceFocus || !isEnabled() || nativeEvent.key !== 'Tab') {
         return;
       }
+      const rootElement = rootRef.current;
       const activeElement = getActiveElement(doc);
+      if (rootElement === null) {
+        return;
+      }
+      const focusTarget = getFocusTarget(rootElement);
+      const isFocusStart = activeElement === rootElement || activeElement === focusTarget;
 
-      // Make sure the next tab starts from the right place.
-      // activeElement refers to the origin.
-      if (activeElement === rootRef.current && nativeEvent.shiftKey) {
-        // We need to ignore the next contain as
-        // it will try to move the focus back to the rootRef element.
-        ignoreNextEnforceFocus.current = true;
-        if (sentinelEnd.current) {
-          sentinelEnd.current.focus();
+      // Marked focus targets can be non-tabbable, but should start tabbing
+      // from the first/last tabbable child.
+      if (isFocusStart) {
+        const tabbable = getTabbable(rootElement);
+        if (tabbable.length === 0) {
+          return;
+        }
+        nativeEvent.preventDefault();
+        if (nativeEvent.shiftKey) {
+          tabbable[tabbable.length - 1].focus();
+        } else {
+          tabbable[0].focus();
+        }
+        return;
+      }
+      if (contains(rootElement, activeElement)) {
+        const tabbable = getTabbable(rootElement);
+        const currentIndex = tabbable.indexOf(activeElement);
+        if (currentIndex === -1) {
+          // Leave shadow-root descendants to native tab handling.
+          return;
+        }
+        const hasPositiveTabIndex = tabbable.some(node => getTabIndex(node) > 0);
+
+        // Positive tabIndex needs the computed order; regular tabIndex=0 can
+        // use native tab handling.
+        if (!hasPositiveTabIndex) {
+          return;
+        }
+        nativeEvent.preventDefault();
+        let nextIndex = 0;
+        if (nativeEvent.shiftKey) {
+          nextIndex = currentIndex <= 0 ? tabbable.length - 1 : currentIndex - 1;
+        } else {
+          nextIndex = currentIndex === tabbable.length - 1 ? 0 : currentIndex + 1;
         }
+        tabbable[nextIndex].focus();
       }
     };
     const contain = () => {

package/Zoom/Zoom.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 ZoomProps 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.
@@ -11,6 +20,11 @@ export interface ZoomProps extends TransitionProps {
    * 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.
@@ -35,7 +49,6 @@ export interface ZoomProps extends TransitionProps {
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](https://mui.com/material-ui/react-floating-action-button/#animation) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Zoom/Zoom.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 ZoomProps 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.
@@ -11,6 +20,11 @@ export interface ZoomProps extends TransitionProps {
    * 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.
@@ -35,7 +49,6 @@ export interface ZoomProps extends TransitionProps {
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](https://mui.com/material-ui/react-floating-action-button/#animation) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  *
  * Demos:
  *

package/Zoom/Zoom.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"));
@@ -38,7 +39,6 @@ const hiddenStyles = {
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](/material-ui/react-floating-action-button/#animation) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   const theme = (0, _zeroStyled.useTheme)();
@@ -50,6 +50,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     addEndListener,
     appear = true,
     children,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -62,12 +63,14 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(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,
@@ -75,7 +78,15 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(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
+    });
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -90,7 +101,15 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     if (onExit) {
       onExit(node);
     }
@@ -101,13 +120,10 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       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,
@@ -118,12 +134,15 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(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,
@@ -139,9 +158,12 @@ process.env.NODE_ENV !== "production" ? Zoom.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,
   /**
@@ -154,6 +176,11 @@ process.env.NODE_ENV !== "production" ? Zoom.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/Zoom/Zoom.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";
@@ -31,7 +32,6 @@ const hiddenStyles = {
 /**
  * The Zoom transition can be used for the floating variant of the
  * [Button](/material-ui/react-floating-action-button/#animation) component.
- * It uses [react-transition-group](https://github.com/reactjs/react-transition-group) internally.
  */
 const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
   const theme = useTheme();
@@ -43,6 +43,7 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     addEndListener,
     appear = true,
     children,
+    disablePrefersReducedMotion = false,
     easing,
     in: inProp,
     onEnter,
@@ -55,12 +56,14 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(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,
@@ -68,7 +71,15 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(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
+    });
     if (onEnter) {
       onEnter(node, isAppearing);
     }
@@ -83,7 +94,15 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
     }, {
       mode: 'exit'
     });
-    node.style.transition = theme.transitions.create('transform', transitionProps);
+    const transitionTiming = reducedMotion.getTransitionTiming({
+      duration: transitionProps.duration,
+      delay: transitionProps.delay
+    });
+    node.style.transition = theme.transitions.create('transform', {
+      duration: transitionTiming.duration,
+      easing: transitionProps.easing,
+      delay: transitionTiming.delay
+    });
     if (onExit) {
       onExit(node);
     }
@@ -94,12 +113,9 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(props, ref) {
       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,
@@ -111,12 +127,15 @@ const Zoom = /*#__PURE__*/React.forwardRef(function Zoom(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,
@@ -132,9 +151,12 @@ process.env.NODE_ENV !== "production" ? Zoom.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,
   /**
@@ -147,6 +169,11 @@ process.env.NODE_ENV !== "production" ? Zoom.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/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.1
+ * @mui/material v9.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/index.mjs

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.1
+ * @mui/material v9.1.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/internal/Transition.d.mts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+type RenderedTransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
+type TransitionEndListener = ((done: () => void) => void) | ((node: HTMLElement, done: () => void) => void);
+interface InternalTransitionProps {
+  in?: boolean | undefined;
+  appear?: boolean | undefined;
+  enter?: boolean | undefined;
+  exit?: boolean | undefined;
+  timeout?: number | null | {
+    appear?: number | undefined;
+    enter?: number | undefined;
+    exit?: number | undefined;
+  } | undefined;
+  nodeRef: React.RefObject<HTMLElement | null>;
+  mountOnEnter?: boolean | undefined;
+  unmountOnExit?: boolean | undefined;
+  addEndListener?: TransitionEndListener | undefined;
+  reduceMotion?: boolean | undefined;
+  getAutoTimeout?: (() => number | null | undefined) | undefined;
+  onEnter?: ((isAppearing: boolean) => void) | undefined;
+  onEntering?: ((isAppearing: boolean) => void) | undefined;
+  onEntered?: ((isAppearing: boolean) => void) | undefined;
+  onExit?: (() => void) | undefined;
+  onExiting?: (() => void) | undefined;
+  onExited?: (() => void) | undefined;
+  children: (status: RenderedTransitionStatus, childProps: Record<string, unknown>) => React.ReactNode;
+  [key: string]: unknown;
+}
+declare function Transition(props: InternalTransitionProps): React.ReactNode;
+declare namespace Transition {
+  var propTypes: any;
+}
+export default Transition;
+export type { InternalTransitionProps, RenderedTransitionStatus };

package/internal/Transition.d.ts

@@ -0,0 +1,34 @@
+import * as React from 'react';
+type RenderedTransitionStatus = 'entering' | 'entered' | 'exiting' | 'exited';
+type TransitionEndListener = ((done: () => void) => void) | ((node: HTMLElement, done: () => void) => void);
+interface InternalTransitionProps {
+  in?: boolean | undefined;
+  appear?: boolean | undefined;
+  enter?: boolean | undefined;
+  exit?: boolean | undefined;
+  timeout?: number | null | {
+    appear?: number | undefined;
+    enter?: number | undefined;
+    exit?: number | undefined;
+  } | undefined;
+  nodeRef: React.RefObject<HTMLElement | null>;
+  mountOnEnter?: boolean | undefined;
+  unmountOnExit?: boolean | undefined;
+  addEndListener?: TransitionEndListener | undefined;
+  reduceMotion?: boolean | undefined;
+  getAutoTimeout?: (() => number | null | undefined) | undefined;
+  onEnter?: ((isAppearing: boolean) => void) | undefined;
+  onEntering?: ((isAppearing: boolean) => void) | undefined;
+  onEntered?: ((isAppearing: boolean) => void) | undefined;
+  onExit?: (() => void) | undefined;
+  onExiting?: (() => void) | undefined;
+  onExited?: (() => void) | undefined;
+  children: (status: RenderedTransitionStatus, childProps: Record<string, unknown>) => React.ReactNode;
+  [key: string]: unknown;
+}
+declare function Transition(props: InternalTransitionProps): React.ReactNode;
+declare namespace Transition {
+  var propTypes: any;
+}
+export default Transition;
+export type { InternalTransitionProps, RenderedTransitionStatus };