@mui/material 9.0.0 → 9.0.1

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,6 +19,23 @@ 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';
 /**

package/transitions/utils.d.ts

@@ -19,6 +19,23 @@ 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';
 /**

package/transitions/utils.js

@@ -5,10 +5,74 @@ Object.defineProperty(exports, "__esModule", {
 });
 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) {

package/transitions/utils.mjs

@@ -1,4 +1,67 @@
 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) {

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;