@mui/material 9.0.0-beta.1 → 9.0.1

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v9.0.0-beta.1
+ * @mui/material v9.0.1
  *
  * @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.0-beta.1
+ * @mui/material v9.0.1
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@mui/material",
-  "version": "9.0.0-beta.1",
+  "version": "9.0.1",
   "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",
   "keywords": [
     "react",
     "react-component",
@@ -15,7 +16,6 @@
     "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-material"
   },
-  "license": "MIT",
   "bugs": {
     "url": "https://github.com/mui/material-ui/issues"
   },
@@ -33,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.4",
     "react-transition-group": "^4.4.5",
-    "@mui/system": "9.0.0-beta.1",
-    "@mui/utils": "9.0.0-beta.1",
-    "@mui/types": "^9.0.0-beta.0",
-    "@mui/core-downloads-tracker": "^9.0.0-beta.1"
+    "@mui/core-downloads-tracker": "^9.0.1",
+    "@mui/system": "^9.0.1",
+    "@mui/types": "^9.0.0",
+    "@mui/utils": "^9.0.1"
   },
   "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-beta.1"
+    "@mui/material-pigment-css": "^9.0.1"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeNoVars.js

@@ -89,7 +89,7 @@ function createThemeNoVars(options = {}, ...args) {
   options.generateThemeVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
     // #host-reference
-    'Please use another name or follow the [docs](https://next.mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage.default)(22));
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage.default)(22));
   }
   const palette = (0, _createPalette.default)({
     ...paletteInput,

package/styles/createThemeNoVars.mjs

@@ -81,7 +81,7 @@ function createThemeNoVars(options = {}, ...args) {
   options.generateThemeVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
     // #host-reference
-    'Please use another name or follow the [docs](https://next.mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatErrorMessage(22));
+    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : _formatErrorMessage(22));
   }
   const palette = createPalette({
     ...paletteInput,

package/styles/responsiveFontSizes.js

@@ -58,16 +58,27 @@ function responsiveFontSizes(themeInput, options = {}) {
         })
       });
     }
+    const responsive = (0, _cssUtils.responsiveProperty)({
+      cssProperty: 'fontSize',
+      min: minFontSize,
+      max: maxFontSize,
+      unit: 'rem',
+      breakpoints: breakpointValues,
+      transform
+    });
+
+    // https://github.com/mui/material-ui/issues/40255
+    // Preserve the original font size at the largest breakpoint.
+    // Grid alignment can snap the max value away from the original designed size.
+    if (breakpointValues.length > 0) {
+      const lastBreakpoint = breakpointValues[breakpointValues.length - 1];
+      responsive[`@media (min-width:${lastBreakpoint}px)`] = {
+        fontSize: `${Math.round(maxFontSize * 10000) / 10000}rem`
+      };
+    }
     typography[variant] = {
       ...style,
-      ...(0, _cssUtils.responsiveProperty)({
-        cssProperty: 'fontSize',
-        min: minFontSize,
-        max: maxFontSize,
-        unit: 'rem',
-        breakpoints: breakpointValues,
-        transform
-      })
+      ...responsive
     };
   });
   return theme;

package/styles/responsiveFontSizes.mjs

@@ -51,16 +51,27 @@ export default function responsiveFontSizes(themeInput, options = {}) {
         })
       });
     }
+    const responsive = responsiveProperty({
+      cssProperty: 'fontSize',
+      min: minFontSize,
+      max: maxFontSize,
+      unit: 'rem',
+      breakpoints: breakpointValues,
+      transform
+    });
+
+    // https://github.com/mui/material-ui/issues/40255
+    // Preserve the original font size at the largest breakpoint.
+    // Grid alignment can snap the max value away from the original designed size.
+    if (breakpointValues.length > 0) {
+      const lastBreakpoint = breakpointValues[breakpointValues.length - 1];
+      responsive[`@media (min-width:${lastBreakpoint}px)`] = {
+        fontSize: `${Math.round(maxFontSize * 10000) / 10000}rem`
+      };
+    }
     typography[variant] = {
       ...style,
-      ...responsiveProperty({
-        cssProperty: 'fontSize',
-        min: minFontSize,
-        max: maxFontSize,
-        unit: 'rem',
-        breakpoints: breakpointValues,
-        transform
-      })
+      ...responsive
     };
   });
   return theme;

package/styles/useThemeProps.d.mts

@@ -3,7 +3,7 @@ import { Components } from "./components.mjs";
 export interface ThemeWithProps {
   components?: Components<Omit<Theme, 'components'>> | undefined;
 }
-export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+export type ThemedProps<ThemeInput, Name extends keyof any> = ThemeInput extends {
   components: Record<Name, {
     defaultProps: infer Props;
   }>;
@@ -36,7 +36,7 @@ export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
  * @param params.props The input props
  * @param params.name The name of the component as defined in the theme
  */
-export default function useThemeProps<Theme extends ThemeWithProps, Props, Name extends keyof any>(params: {
+export default function useThemeProps<ThemeInput extends ThemeWithProps, Props, Name extends keyof any>(params: {
   props: Props;
   name: Name;
-}): Props & ThemedProps<Theme, Name>;
+}): Props & ThemedProps<ThemeInput, Name>;

package/styles/useThemeProps.d.ts

@@ -3,7 +3,7 @@ import { Components } from "./components.js";
 export interface ThemeWithProps {
   components?: Components<Omit<Theme, 'components'>> | undefined;
 }
-export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
+export type ThemedProps<ThemeInput, Name extends keyof any> = ThemeInput extends {
   components: Record<Name, {
     defaultProps: infer Props;
   }>;
@@ -36,7 +36,7 @@ export type ThemedProps<Theme, Name extends keyof any> = Theme extends {
  * @param params.props The input props
  * @param params.name The name of the component as defined in the theme
  */
-export default function useThemeProps<Theme extends ThemeWithProps, Props, Name extends keyof any>(params: {
+export default function useThemeProps<ThemeInput extends ThemeWithProps, Props, Name extends keyof any>(params: {
   props: Props;
   name: Name;
-}): Props & ThemedProps<Theme, Name>;
+}): Props & ThemedProps<ThemeInput, Name>;

package/transitions/utils.d.mts

@@ -19,5 +19,29 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+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.
+ */
+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;
 export {};

package/transitions/utils.d.ts

@@ -19,5 +19,29 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+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.
+ */
+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;
 export {};

package/transitions/utils.js

@@ -3,10 +3,101 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getTransitionChildStyle = getTransitionChildStyle;
 exports.getTransitionProps = getTransitionProps;
+exports.getTranslateOffsets = getTranslateOffsets;
+exports.normalizedTransitionCallback = normalizedTransitionCallback;
 exports.reflow = void 0;
 const reflow = node => node.scrollTop;
 exports.reflow = reflow;
+const DEFAULT_TRANSLATE_OFFSET = {
+  offsetX: 0,
+  offsetY: 0
+};
+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.
+      if (maybeIsAppearing === undefined) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+}
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
+  const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 function getTransitionProps(props, options) {
   const {
     timeout,

package/transitions/utils.mjs

@@ -1,4 +1,92 @@
 export const reflow = node => node.scrollTop;
+const DEFAULT_TRANSLATE_OFFSET = {
+  offsetX: 0,
+  offsetY: 0
+};
+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.
+      if (maybeIsAppearing === undefined) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+}
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
+  const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 export function getTransitionProps(props, options) {
   const {
     timeout,

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;

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;