@mui/material 9.0.0 → 9.1.0

package/transitions/utils.d.ts

@@ -1,4 +1,6 @@
 import * as React from 'react';
+import { defaultStyles } from "../styles/reducedMotion.js";
+import type { ReducedMotionMode } from "../styles/createMotion.js";
 export declare const reflow: (node: Element) => number;
 interface ComponentProps {
   easing: string | {
@@ -19,12 +21,59 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+interface TransitionCreateOptions {
+  duration: number | string;
+  easing: string;
+  delay: number | string;
+}
+interface TranslateOffset {
+  offsetX: number;
+  offsetY: number;
+}
+/**
+ * Extracts the x/y translation from a CSS transform string.
+ *
+ * Transition components use these offsets when calculating off-screen positions:
+ * if an element is already translated, the distance needed to hide it must start
+ * from that visual position instead of its untransformed layout position.
+ *
+ * CSSOM commonly serializes translations as matrix() or matrix3d(), while inline
+ * gesture styles may use translate(), translate3d(), translateX(), or
+ * translateY(). This helper normalizes those supported forms into numeric pixel
+ * offsets and returns zero offsets for empty, none, or unsupported transforms.
+ */
+export declare function getTranslateOffsets(transform: string | undefined): TranslateOffset;
 export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
 type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+export declare function getReducedMotionStyles<Styles extends object = typeof defaultStyles>(theme: {
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, styles?: Styles): Styles | {
+  '@media (prefers-reduced-motion: reduce)': Styles;
+} | null;
+export declare function getTransitionStyles(theme: {
+  transitions?: {
+    create: (props?: string | string[], options?: Partial<TransitionCreateOptions>) => string;
+  } | undefined;
+  motion?: {
+    reducedMotion?: ReducedMotionMode | undefined;
+  } | undefined;
+}, props?: string | string[], options?: Partial<TransitionCreateOptions>): React.CSSProperties | {
+  transition: string;
+} | {
+  '@media (prefers-reduced-motion: reduce)': {
+    transition: string;
+  };
+};
 export {};

package/transitions/utils.js

@@ -3,17 +3,87 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getReducedMotionStyles = getReducedMotionStyles;
 exports.getTransitionChildStyle = getTransitionChildStyle;
 exports.getTransitionProps = getTransitionProps;
+exports.getTransitionStyles = getTransitionStyles;
+exports.getTranslateOffsets = getTranslateOffsets;
 exports.normalizedTransitionCallback = normalizedTransitionCallback;
 exports.reflow = void 0;
+var _reducedMotion = require("../styles/reducedMotion");
 const reflow = node => node.scrollTop;
 exports.reflow = reflow;
+const DEFAULT_TRANSLATE_OFFSET = {
+  offsetX: 0,
+  offsetY: 0
+};
+const EMPTY_STYLE = {};
+const DEFAULT_TRANSITION_PROPS = ['all'];
+const EMPTY_OPTIONS = {};
+const transformOffsetIndexes = {
+  matrix: [4, 5],
+  matrix3d: [12, 13],
+  translate: [0, 1],
+  translate3d: [0, 1],
+  translateX: [0, null],
+  translateY: [null, 0]
+};
+function parseTranslateValue(value) {
+  const parsedValue = parseFloat(value ?? '');
+  return Number.isNaN(parsedValue) ? 0 : parsedValue;
+}
+function parseTransform(transform) {
+  const match = transform.match(/^(matrix|matrix3d|translate|translate3d|translateX|translateY)\((.+)\)$/);
+  if (!match) {
+    return null;
+  }
+  return {
+    type: match[1],
+    values: match[2].split(',').map(parseTranslateValue)
+  };
+}
+function getTranslateOffsetValue(values, index) {
+  return index === null ? 0 : values[index] || 0;
+}
+
+/**
+ * Extracts the x/y translation from a CSS transform string.
+ *
+ * Transition components use these offsets when calculating off-screen positions:
+ * if an element is already translated, the distance needed to hide it must start
+ * from that visual position instead of its untransformed layout position.
+ *
+ * CSSOM commonly serializes translations as matrix() or matrix3d(), while inline
+ * gesture styles may use translate(), translate3d(), translateX(), or
+ * translateY(). This helper normalizes those supported forms into numeric pixel
+ * offsets and returns zero offsets for empty, none, or unsupported transforms.
+ */
+function getTranslateOffsets(transform) {
+  if (!transform || transform === 'none') {
+    return DEFAULT_TRANSLATE_OFFSET;
+  }
+  const parsedTransform = parseTransform(transform);
+  if (!parsedTransform) {
+    return DEFAULT_TRANSLATE_OFFSET;
+  }
+  const {
+    type,
+    values
+  } = parsedTransform;
+  const offsetIndexes = transformOffsetIndexes[type];
+  if (!offsetIndexes) {
+    return DEFAULT_TRANSLATE_OFFSET;
+  }
+  return {
+    offsetX: getTranslateOffsetValue(values, offsetIndexes[0]),
+    offsetY: getTranslateOffsetValue(values, offsetIndexes[1])
+  };
+}
 function normalizedTransitionCallback(nodeRef, callback) {
   return maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      // Enter callbacks receive isAppearing; exit callbacks do not.
       if (maybeIsAppearing === undefined) {
         callback(node);
       } else {
@@ -23,8 +93,8 @@ function normalizedTransitionCallback(nodeRef, callback) {
   };
 }
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
   const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
@@ -38,11 +108,34 @@ function getTransitionProps(props, options) {
   const {
     timeout,
     easing,
-    style = {}
+    style = EMPTY_STYLE
   } = props;
   return {
     duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout[options.mode] || 0),
     easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
     delay: style.transitionDelay
   };
+}
+
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+function getReducedMotionStyles(theme, styles) {
+  const resolvedStyles = styles ?? _reducedMotion.defaultStyles;
+  return (0, _reducedMotion.resolveReducedMotionStyles)(theme.motion?.reducedMotion, resolvedStyles);
+}
+function getTransitionStyles(theme, props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) {
+  const transition = theme.transitions?.create?.(props, options);
+  const reducedMotionStyles = getReducedMotionStyles(theme);
+  if (transition === undefined) {
+    return reducedMotionStyles ?? EMPTY_STYLE;
+  }
+  const transitionStyles = {
+    transition
+  };
+  return reducedMotionStyles ? {
+    ...transitionStyles,
+    ...reducedMotionStyles
+  } : transitionStyles;
 }

package/transitions/utils.mjs

@@ -1,9 +1,76 @@
+import { defaultStyles, resolveReducedMotionStyles } from "../styles/reducedMotion.mjs";
 export const reflow = node => node.scrollTop;
+const DEFAULT_TRANSLATE_OFFSET = {
+  offsetX: 0,
+  offsetY: 0
+};
+const EMPTY_STYLE = {};
+const DEFAULT_TRANSITION_PROPS = ['all'];
+const EMPTY_OPTIONS = {};
+const transformOffsetIndexes = {
+  matrix: [4, 5],
+  matrix3d: [12, 13],
+  translate: [0, 1],
+  translate3d: [0, 1],
+  translateX: [0, null],
+  translateY: [null, 0]
+};
+function parseTranslateValue(value) {
+  const parsedValue = parseFloat(value ?? '');
+  return Number.isNaN(parsedValue) ? 0 : parsedValue;
+}
+function parseTransform(transform) {
+  const match = transform.match(/^(matrix|matrix3d|translate|translate3d|translateX|translateY)\((.+)\)$/);
+  if (!match) {
+    return null;
+  }
+  return {
+    type: match[1],
+    values: match[2].split(',').map(parseTranslateValue)
+  };
+}
+function getTranslateOffsetValue(values, index) {
+  return index === null ? 0 : values[index] || 0;
+}
+
+/**
+ * Extracts the x/y translation from a CSS transform string.
+ *
+ * Transition components use these offsets when calculating off-screen positions:
+ * if an element is already translated, the distance needed to hide it must start
+ * from that visual position instead of its untransformed layout position.
+ *
+ * CSSOM commonly serializes translations as matrix() or matrix3d(), while inline
+ * gesture styles may use translate(), translate3d(), translateX(), or
+ * translateY(). This helper normalizes those supported forms into numeric pixel
+ * offsets and returns zero offsets for empty, none, or unsupported transforms.
+ */
+export function getTranslateOffsets(transform) {
+  if (!transform || transform === 'none') {
+    return DEFAULT_TRANSLATE_OFFSET;
+  }
+  const parsedTransform = parseTransform(transform);
+  if (!parsedTransform) {
+    return DEFAULT_TRANSLATE_OFFSET;
+  }
+  const {
+    type,
+    values
+  } = parsedTransform;
+  const offsetIndexes = transformOffsetIndexes[type];
+  if (!offsetIndexes) {
+    return DEFAULT_TRANSLATE_OFFSET;
+  }
+  return {
+    offsetX: getTranslateOffsetValue(values, offsetIndexes[0]),
+    offsetY: getTranslateOffsetValue(values, offsetIndexes[1])
+  };
+}
 export function normalizedTransitionCallback(nodeRef, callback) {
   return maybeIsAppearing => {
     if (callback) {
       const node = nodeRef.current;
-      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      // Enter callbacks receive isAppearing; exit callbacks do not.
       if (maybeIsAppearing === undefined) {
         callback(node);
       } else {
@@ -13,8 +80,8 @@ export function normalizedTransitionCallback(nodeRef, callback) {
   };
 }
 /**
- * Computes the child style for a transition component, reusing existing
- * references when possible to preserve referential equality for React.memo.
+ * Return the child style for a transition. Reuse predefined style objects when
+ * no custom styles are present so memoized children see the same object.
  */
 export function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
   const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
@@ -28,11 +95,34 @@ export function getTransitionProps(props, options) {
   const {
     timeout,
     easing,
-    style = {}
+    style = EMPTY_STYLE
   } = props;
   return {
     duration: style.transitionDuration ?? (typeof timeout === 'number' ? timeout : timeout[options.mode] || 0),
     easing: style.transitionTimingFunction ?? (typeof easing === 'object' ? easing[options.mode] : easing),
     delay: style.transitionDelay
   };
+}
+
+/**
+ * Returns CSS that disables component-owned transitions when reduced motion is active.
+ * Pass custom styles only when the default `transition: none` reset is not enough.
+ */
+export function getReducedMotionStyles(theme, styles) {
+  const resolvedStyles = styles ?? defaultStyles;
+  return resolveReducedMotionStyles(theme.motion?.reducedMotion, resolvedStyles);
+}
+export function getTransitionStyles(theme, props = DEFAULT_TRANSITION_PROPS, options = EMPTY_OPTIONS) {
+  const transition = theme.transitions?.create?.(props, options);
+  const reducedMotionStyles = getReducedMotionStyles(theme);
+  if (transition === undefined) {
+    return reducedMotionStyles ?? EMPTY_STYLE;
+  }
+  const transitionStyles = {
+    transition
+  };
+  return reducedMotionStyles ? {
+    ...transitionStyles,
+    ...reducedMotionStyles
+  } : transitionStyles;
 }

package/useAutocomplete/useAutocomplete.d.mts

@@ -47,12 +47,11 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    */
   autoHighlight?: boolean | undefined;
   /**
-   * If `true`, the selected option becomes the value of the input
-   * when the Autocomplete loses focus unless the user chooses
-   * a different option or changes the character string in the input.
+   * If `true`, the value is updated when the input loses focus under one of these conditions:
    *
-   * When using the `freeSolo` mode, the typed value will be the input value
-   * if the Autocomplete loses focus without highlighting an option.
+   * - An option highlighted via keyboard navigation or `autoHighlight` is selected.
+   *   Hover and touch highlights are ignored.
+   * - Otherwise, in `freeSolo` mode, the typed text becomes the value.
    * @default false
    */
   autoSelect?: boolean | undefined;
@@ -261,6 +260,12 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @default false
    */
   readOnly?: boolean | undefined;
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave?: boolean | undefined;
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
@@ -348,9 +353,10 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
   getPopupIndicatorProps: () => React.HTMLAttributes<HTMLButtonElement>;
   /**
    * Resolver for the listbox component's props.
+   * @param externalProps props for the listbox component
    * @returns props that should be spread on the listbox component
    */
-  getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
+  getListboxProps: (externalProps?: any) => React.HTMLAttributes<HTMLUListElement>;
   /**
    * Resolver for the rendered option element's props.
    * @param renderedOption option rendered on the Autocomplete

package/useAutocomplete/useAutocomplete.d.ts

@@ -47,12 +47,11 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    */
   autoHighlight?: boolean | undefined;
   /**
-   * If `true`, the selected option becomes the value of the input
-   * when the Autocomplete loses focus unless the user chooses
-   * a different option or changes the character string in the input.
+   * If `true`, the value is updated when the input loses focus under one of these conditions:
    *
-   * When using the `freeSolo` mode, the typed value will be the input value
-   * if the Autocomplete loses focus without highlighting an option.
+   * - An option highlighted via keyboard navigation or `autoHighlight` is selected.
+   *   Hover and touch highlights are ignored.
+   * - Otherwise, in `freeSolo` mode, the typed text becomes the value.
    * @default false
    */
   autoSelect?: boolean | undefined;
@@ -261,6 +260,12 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * @default false
    */
   readOnly?: boolean | undefined;
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave?: boolean | undefined;
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.
@@ -348,9 +353,10 @@ export interface UseAutocompleteReturnValue<Value, Multiple extends boolean | un
   getPopupIndicatorProps: () => React.HTMLAttributes<HTMLButtonElement>;
   /**
    * Resolver for the listbox component's props.
+   * @param externalProps props for the listbox component
    * @returns props that should be spread on the listbox component
    */
-  getListboxProps: () => React.HTMLAttributes<HTMLUListElement>;
+  getListboxProps: (externalProps?: any) => React.HTMLAttributes<HTMLUListElement>;
   /**
    * Resolver for the rendered option element's props.
    * @param renderedOption option rendered on the Autocomplete