@mui/material 9.0.0 → 9.1.0

package/internal/Transition.mjs

@@ -0,0 +1,436 @@
+/// <reference path="./react-transition-group.d.ts" />
+'use client';
+
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
+import useValueAsRef from '@mui/utils/useValueAsRef';
+// Material UI transitions must still work inside react-transition-group's TransitionGroup.
+// Import only its context module; do not import its Transition or TransitionGroup components.
+import TransitionGroupContext from 'react-transition-group/TransitionGroupContext';
+import { reflow } from "../transitions/utils.mjs";
+import { jsx as _jsx } from "react/jsx-runtime";
+function resolveTimeouts(timeout) {
+  if (timeout == null) {
+    return {
+      appear: undefined,
+      enter: undefined,
+      exit: undefined
+    };
+  }
+  if (typeof timeout === 'number') {
+    return {
+      appear: timeout,
+      enter: timeout,
+      exit: timeout
+    };
+  }
+  const enter = timeout.enter;
+  const exit = timeout.exit;
+  const appear = timeout.appear !== undefined ? timeout.appear : enter;
+  return {
+    appear,
+    enter,
+    exit
+  };
+}
+
+/**
+ * Resolves the authored completion timeout for the current transition phase.
+ * Auto durations are read by the caller at scheduling time so Grow/Collapse
+ * can pass the latest measured value without storing it in React state.
+ */
+function getCompletionTimeout(params) {
+  if (params.autoTimeout != null) {
+    return params.autoTimeout;
+  }
+  const resolved = resolveTimeouts(params.timeout);
+  if (params.currentStatus === 'entering') {
+    return params.isAppearing ? resolved.appear ?? resolved.enter ?? null : resolved.enter ?? null;
+  }
+  return resolved.exit ?? null;
+}
+function Transition(props) {
+  const {
+    in: inProp = false,
+    appear = false,
+    enter = true,
+    exit = true,
+    mountOnEnter = false,
+    unmountOnExit = false,
+    timeout,
+    addEndListener,
+    reduceMotion = false,
+    getAutoTimeout,
+    nodeRef,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    children,
+    ...childProps
+  } = props;
+  const parentGroup = React.useContext(TransitionGroupContext);
+
+  // react-transition-group's TransitionGroup tells children whether the group
+  // is still mounting. Material UI needs two values from that:
+  // - shouldEnterOnMount: whether this child should run an enter animation now.
+  // - isAppearing: the value passed to enter callbacks.
+  // A child added after the group mounted still enters, but callbacks receive
+  // isAppearing=false because the parent group is no longer mounting.
+  const shouldEnterOnMount = parentGroup && !parentGroup.isMounting ? enter : appear;
+  const [status, setStatus] = React.useState(() => {
+    if (inProp) {
+      return shouldEnterOnMount ? 'exited' : 'entered';
+    }
+    if (mountOnEnter || unmountOnExit) {
+      return 'unmounted';
+    }
+    return 'exited';
+  });
+  const statusRef = React.useRef(status);
+  statusRef.current = status;
+  const shouldAppearOnMountRef = React.useRef(inProp && shouldEnterOnMount);
+  const mountedRef = React.useRef(false);
+  const nextCallbackRef = React.useRef(null);
+  // Remember which status already fired lifecycle callbacks. React StrictMode
+  // can run effects twice in development; this prevents duplicate callbacks.
+  const lastFiredStatusRef = React.useRef(status);
+  // Store the isAppearing value for the current enter transition. performEnter
+  // sets it before the status effect later calls onEntering/onEntered.
+  const isAppearingRef = React.useRef(false);
+  // Capture reduced motion at the start of each phase so prop updates do not
+  // change the completion timing for an active transition.
+  const transitionReduceMotionRef = React.useRef(reduceMotion);
+
+  // Transition end callbacks can run after props changed. Read props through
+  // this ref so delayed work uses the latest callbacks and timeout settings.
+  const propsRef = useValueAsRef({
+    timeout,
+    addEndListener,
+    reduceMotion,
+    getAutoTimeout,
+    onEnter,
+    onEntering,
+    onEntered,
+    onExit,
+    onExiting,
+    onExited,
+    enter,
+    exit,
+    mountOnEnter,
+    unmountOnExit,
+    nodeRef,
+    parentGroup
+  });
+
+  // Effects below depend on these helpers. Keep their identity stable; they read
+  // changing props through propsRef.
+  const cancelPendingCallback = React.useCallback(() => {
+    if (nextCallbackRef.current !== null) {
+      nextCallbackRef.current.cancel();
+      nextCallbackRef.current = null;
+    }
+  }, []);
+  const makeCallback = React.useCallback(handler => {
+    let active = true;
+    const wrapped = () => {
+      if (active) {
+        active = false;
+        nextCallbackRef.current = null;
+        handler();
+      }
+    };
+    wrapped.cancel = () => {
+      active = false;
+    };
+    nextCallbackRef.current = wrapped;
+    return wrapped;
+  }, []);
+  const scheduleTransitionEnd = React.useCallback((nextStatus, currentStatus) => {
+    let timeoutId;
+    const clearTimer = () => {
+      if (timeoutId !== undefined) {
+        clearTimeout(timeoutId);
+        timeoutId = undefined;
+      }
+    };
+    const done = makeCallback(() => {
+      clearTimer();
+      statusRef.current = nextStatus;
+      setStatus(nextStatus);
+    });
+    const cancelDone = done.cancel;
+    done.cancel = () => {
+      clearTimer();
+      cancelDone();
+    };
+    const node = propsRef.current.nodeRef.current;
+    const listener = propsRef.current.addEndListener;
+    const hasAutoTimeout = propsRef.current.getAutoTimeout !== undefined;
+    const autoTimeout = propsRef.current.getAutoTimeout?.();
+    const authoredTimeout = getCompletionTimeout({
+      currentStatus,
+      isAppearing: isAppearingRef.current,
+      timeout: propsRef.current.timeout,
+      autoTimeout
+    });
+    const transitionReduceMotion = transitionReduceMotionRef.current;
+    // Auto-duration consumers may skip measurement under reduced motion, but
+    // still need a 0ms timeout when they provide addEndListener.
+    const fallbackTimeout = authoredTimeout ?? (transitionReduceMotion && hasAutoTimeout ? 0 : null);
+    const scheduleTimer = value => {
+      timeoutId = setTimeout(done, value);
+    };
+    if (!node) {
+      if (process.env.NODE_ENV !== 'production') {
+        console.warn(['MUI: The transition child does not expose a DOM element.', 'Make sure the child accepts a ref and forwards it to the underlying DOM element.', 'The transition animation cannot be observed without a DOM element and will be skipped.'].join('\n'));
+      }
+
+      // Match react-transition-group: if there is no DOM node, there is no
+      // transition to observe, so finish on the next tick.
+      scheduleTimer(0);
+      return;
+    }
+    if (listener) {
+      if (fallbackTimeout != null) {
+        scheduleTimer(transitionReduceMotion ? 0 : fallbackTimeout);
+      }
+
+      // With nodeRef, react-transition-group calls addEndListener(done).
+      // Material UI has long supported addEndListener(node, done). Keep both call
+      // shapes so existing transition wrappers do not have to change.
+      if (listener.length >= 2) {
+        listener(node, done);
+      } else {
+        listener(done);
+      }
+      return;
+    }
+    scheduleTimer(transitionReduceMotion ? 0 : authoredTimeout ?? 0);
+  }, [makeCallback, propsRef]);
+  const performEnter = React.useCallback(mounting => {
+    const current = propsRef.current;
+    const isAppearing = current.parentGroup ? current.parentGroup.isMounting : mounting;
+    isAppearingRef.current = isAppearing;
+
+    // On updates, enter=false skips the enter animation. Move straight to
+    // entered; the status effect will call onEntered, but onEnter/onEntering
+    // must not fire.
+    if (!mounting && !current.enter) {
+      statusRef.current = 'entered';
+      setStatus('entered');
+      return;
+    }
+    transitionReduceMotionRef.current = current.reduceMotion;
+    current.onEnter?.(isAppearing);
+    statusRef.current = 'entering';
+    setStatus('entering');
+  }, [propsRef]);
+  const performExit = React.useCallback(() => {
+    const current = propsRef.current;
+    if (!current.exit) {
+      statusRef.current = 'exited';
+      setStatus('exited');
+      return;
+    }
+    transitionReduceMotionRef.current = current.reduceMotion;
+    current.onExit?.();
+    statusRef.current = 'exiting';
+    setStatus('exiting');
+  }, [propsRef]);
+  const updateStatus = React.useCallback((mounting, nextStatus) => {
+    cancelPendingCallback();
+    if (nextStatus === 'entering') {
+      const current = propsRef.current;
+      // If the node was just mounted, read layout before entering so the
+      // browser applies the starting styles before the animation begins.
+      if (current.mountOnEnter || current.unmountOnExit) {
+        const node = current.nodeRef.current;
+        if (node) {
+          reflow(node);
+        }
+      }
+      performEnter(mounting);
+    } else {
+      performExit();
+    }
+  }, [cancelPendingCallback, performEnter, performExit, propsRef]);
+
+  // Runs on mount. useEnhancedEffect is needed because the initial appear
+  // transition may read layout before paint. In StrictMode development builds,
+  // React mounts, cleans up, and mounts again; cleanup cancels pending work and
+  // the second mount restarts the same transition.
+  useEnhancedEffect(() => {
+    mountedRef.current = true;
+    if (shouldAppearOnMountRef.current) {
+      shouldAppearOnMountRef.current = false;
+      updateStatus(true, 'entering');
+    }
+    return () => {
+      mountedRef.current = false;
+      cancelPendingCallback();
+    };
+  }, [cancelPendingCallback, updateStatus]);
+
+  // Reconcile the rendered status after `in` or status changes:
+  // - opening from unmounted first renders the child as exited so refs exist.
+  // - unmountOnExit removes the child after the exited state commits.
+  // This matches react-transition-group's observable status steps without
+  // running work after unrelated commits.
+  useEnhancedEffect(() => {
+    if (!mountedRef.current) {
+      return;
+    }
+    const current = statusRef.current;
+    if (inProp) {
+      if (current === 'unmounted') {
+        // Opening from unmounted needs one render with the child present so
+        // refs are attached before the enter animation starts.
+        statusRef.current = 'exited';
+        setStatus('exited');
+      } else if (current !== 'entering' && current !== 'entered') {
+        updateStatus(false, 'entering');
+      }
+    } else if (current === 'entering' || current === 'entered') {
+      updateStatus(false, 'exiting');
+    } else if (current === 'exited' && unmountOnExit) {
+      statusRef.current = 'unmounted';
+      setStatus('unmounted');
+    }
+  }, [inProp, status, unmountOnExit, updateStatus]);
+
+  // Fire lifecycle callbacks for committed status changes. The guard prevents
+  // duplicate callbacks in StrictMode; propsRef keeps delayed callbacks fresh.
+  useEnhancedEffect(() => {
+    // `unmounted` is bookkeeping, not a real transition state. Do not fire
+    // callbacks when moving into or out of it; otherwise the first open with
+    // mountOnEnter/unmountOnExit would look like a completed exit.
+    if (status === 'unmounted' || lastFiredStatusRef.current === 'unmounted') {
+      lastFiredStatusRef.current = status;
+      return;
+    }
+    const prev = lastFiredStatusRef.current;
+    if (prev === status) {
+      return;
+    }
+    lastFiredStatusRef.current = status;
+    const current = propsRef.current;
+    if (status === 'entering') {
+      current.onEntering?.(isAppearingRef.current);
+      scheduleTransitionEnd('entered', 'entering');
+    } else if (status === 'exiting') {
+      current.onExiting?.();
+      scheduleTransitionEnd('exited', 'exiting');
+    } else if (status === 'entered') {
+      current.onEntered?.(isAppearingRef.current);
+    } else if (status === 'exited') {
+      current.onExited?.();
+    }
+  }, [propsRef, scheduleTransitionEnd, status]);
+  if (status === 'unmounted') {
+    return null;
+  }
+
+  // Nested Material UI transitions should not inherit this transition's parent group.
+  // A null context keeps an outer TransitionGroup from controlling them.
+  return /*#__PURE__*/_jsx(TransitionGroupContext.Provider, {
+    value: null,
+    children: children(status, childProps)
+  });
+}
+process.env.NODE_ENV !== "production" ? Transition.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * @ignore
+   */
+  addEndListener: PropTypes.func,
+  /**
+   * @ignore
+   */
+  appear: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  children: PropTypes.func.isRequired,
+  /**
+   * @ignore
+   */
+  enter: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  exit: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  getAutoTimeout: PropTypes.func,
+  /**
+   * @ignore
+   */
+  in: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  mountOnEnter: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  nodeRef: PropTypes.shape({
+    current: (props, propName) => {
+      if (props[propName] == null) {
+        return null;
+      }
+      if (typeof props[propName] !== 'object' || props[propName].nodeType !== 1) {
+        return new Error(`Expected prop '${propName}' to be of type Element`);
+      }
+      return null;
+    }
+  }).isRequired,
+  /**
+   * @ignore
+   */
+  onEnter: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntered: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onEntering: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExit: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExited: PropTypes.func,
+  /**
+   * @ignore
+   */
+  onExiting: PropTypes.func,
+  /**
+   * @ignore
+   */
+  reduceMotion: PropTypes.bool,
+  /**
+   * @ignore
+   */
+  timeout: PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
+    appear: PropTypes.number,
+    enter: PropTypes.number,
+    exit: PropTypes.number
+  })]),
+  /**
+   * @ignore
+   */
+  unmountOnExit: PropTypes.bool
+} : void 0;
+export default Transition;

package/internal/react-transition-group.d.mts

@@ -0,0 +1,8 @@
+declare module 'react-transition-group/TransitionGroupContext' {
+  import * as React from 'react';
+  interface TransitionGroupContextValue {
+    isMounting: boolean;
+  }
+  const TransitionGroupContext: React.Context<TransitionGroupContextValue | null>;
+  export default TransitionGroupContext;
+}

package/internal/react-transition-group.d.ts

@@ -0,0 +1,8 @@
+declare module 'react-transition-group/TransitionGroupContext' {
+  import * as React from 'react';
+  interface TransitionGroupContextValue {
+    isMounting: boolean;
+  }
+  const TransitionGroupContext: React.Context<TransitionGroupContextValue | null>;
+  export default TransitionGroupContext;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "9.0.0",
+  "version": "9.1.0",
   "author": "MUI Team",
   "description": "Material UI is an open-source React component library that implements Google's Material Design. It's comprehensive and can be used in production out of the box.",
   "license": "MIT",
@@ -31,12 +31,12 @@
     "clsx": "^2.1.1",
     "csstype": "^3.2.3",
     "prop-types": "^15.8.1",
-    "react-is": "^19.2.4",
+    "react-is": "^19.2.6",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^9.0.0",
+    "@mui/core-downloads-tracker": "^9.1.0",
     "@mui/types": "^9.0.0",
-    "@mui/system": "^9.0.0",
-    "@mui/utils": "^9.0.0"
+    "@mui/utils": "^9.1.0",
+    "@mui/system": "^9.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,7 +44,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^9.0.0"
+    "@mui/material-pigment-css": "^9.1.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -573,154 +573,154 @@
       }
     },
     "./Box": {
-      "require": {
-        "types": "./Box/index.d.ts",
-        "default": "./Box/index.js"
-      },
       "import": {
         "types": "./Box/index.d.mts",
         "default": "./Box/index.mjs"
       },
+      "require": {
+        "types": "./Box/index.d.ts",
+        "default": "./Box/index.js"
+      },
       "default": {
         "types": "./Box/index.d.mts",
         "default": "./Box/index.mjs"
       }
     },
     "./Breadcrumbs": {
-      "require": {
-        "types": "./Breadcrumbs/index.d.ts",
-        "default": "./Breadcrumbs/index.js"
-      },
       "import": {
         "types": "./Breadcrumbs/index.d.mts",
         "default": "./Breadcrumbs/index.mjs"
       },
+      "require": {
+        "types": "./Breadcrumbs/index.d.ts",
+        "default": "./Breadcrumbs/index.js"
+      },
       "default": {
         "types": "./Breadcrumbs/index.d.mts",
         "default": "./Breadcrumbs/index.mjs"
       }
     },
     "./Button": {
-      "require": {
-        "types": "./Button/index.d.ts",
-        "default": "./Button/index.js"
-      },
       "import": {
         "types": "./Button/index.d.mts",
         "default": "./Button/index.mjs"
       },
+      "require": {
+        "types": "./Button/index.d.ts",
+        "default": "./Button/index.js"
+      },
       "default": {
         "types": "./Button/index.d.mts",
         "default": "./Button/index.mjs"
       }
     },
     "./ButtonBase": {
-      "require": {
-        "types": "./ButtonBase/index.d.ts",
-        "default": "./ButtonBase/index.js"
-      },
       "import": {
         "types": "./ButtonBase/index.d.mts",
         "default": "./ButtonBase/index.mjs"
       },
+      "require": {
+        "types": "./ButtonBase/index.d.ts",
+        "default": "./ButtonBase/index.js"
+      },
       "default": {
         "types": "./ButtonBase/index.d.mts",
         "default": "./ButtonBase/index.mjs"
       }
     },
     "./ButtonGroup": {
-      "require": {
-        "types": "./ButtonGroup/index.d.ts",
-        "default": "./ButtonGroup/index.js"
-      },
       "import": {
         "types": "./ButtonGroup/index.d.mts",
         "default": "./ButtonGroup/index.mjs"
       },
+      "require": {
+        "types": "./ButtonGroup/index.d.ts",
+        "default": "./ButtonGroup/index.js"
+      },
       "default": {
         "types": "./ButtonGroup/index.d.mts",
         "default": "./ButtonGroup/index.mjs"
       }
     },
     "./Card": {
-      "require": {
-        "types": "./Card/index.d.ts",
-        "default": "./Card/index.js"
-      },
       "import": {
         "types": "./Card/index.d.mts",
         "default": "./Card/index.mjs"
       },
+      "require": {
+        "types": "./Card/index.d.ts",
+        "default": "./Card/index.js"
+      },
       "default": {
         "types": "./Card/index.d.mts",
         "default": "./Card/index.mjs"
       }
     },
     "./CardActionArea": {
-      "require": {
-        "types": "./CardActionArea/index.d.ts",
-        "default": "./CardActionArea/index.js"
-      },
       "import": {
         "types": "./CardActionArea/index.d.mts",
         "default": "./CardActionArea/index.mjs"
       },
+      "require": {
+        "types": "./CardActionArea/index.d.ts",
+        "default": "./CardActionArea/index.js"
+      },
       "default": {
         "types": "./CardActionArea/index.d.mts",
         "default": "./CardActionArea/index.mjs"
       }
     },
     "./CardActions": {
-      "require": {
-        "types": "./CardActions/index.d.ts",
-        "default": "./CardActions/index.js"
-      },
       "import": {
         "types": "./CardActions/index.d.mts",
         "default": "./CardActions/index.mjs"
       },
+      "require": {
+        "types": "./CardActions/index.d.ts",
+        "default": "./CardActions/index.js"
+      },
       "default": {
         "types": "./CardActions/index.d.mts",
         "default": "./CardActions/index.mjs"
       }
     },
     "./CardContent": {
-      "require": {
-        "types": "./CardContent/index.d.ts",
-        "default": "./CardContent/index.js"
-      },
       "import": {
         "types": "./CardContent/index.d.mts",
         "default": "./CardContent/index.mjs"
       },
+      "require": {
+        "types": "./CardContent/index.d.ts",
+        "default": "./CardContent/index.js"
+      },
       "default": {
         "types": "./CardContent/index.d.mts",
         "default": "./CardContent/index.mjs"
       }
     },
     "./CardHeader": {
-      "require": {
-        "types": "./CardHeader/index.d.ts",
-        "default": "./CardHeader/index.js"
-      },
       "import": {
         "types": "./CardHeader/index.d.mts",
         "default": "./CardHeader/index.mjs"
       },
+      "require": {
+        "types": "./CardHeader/index.d.ts",
+        "default": "./CardHeader/index.js"
+      },
       "default": {
         "types": "./CardHeader/index.d.mts",
         "default": "./CardHeader/index.mjs"
       }
     },
     "./CardMedia": {
-      "require": {
-        "types": "./CardMedia/index.d.ts",
-        "default": "./CardMedia/index.js"
-      },
       "import": {
         "types": "./CardMedia/index.d.mts",
         "default": "./CardMedia/index.mjs"
       },
+      "require": {
+        "types": "./CardMedia/index.d.ts",
+        "default": "./CardMedia/index.js"
+      },
       "default": {
         "types": "./CardMedia/index.d.mts",
         "default": "./CardMedia/index.mjs"

package/styles/createMotion.d.mts

@@ -0,0 +1,8 @@
+export type ReducedMotionMode = 'never' | 'system' | 'always';
+export interface Motion {
+  reducedMotion: ReducedMotionMode;
+}
+export interface MotionOptions {
+  reducedMotion?: ReducedMotionMode | undefined;
+}
+export default function createMotion(inputMotion?: MotionOptions): Motion;