@mui/material 6.4.1 → 6.4.2

package/AppBar/AppBar.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { PropTypes, Theme } from '..';
 import { AppBarClasses } from './appBarClasses';
 import { ExtendPaperTypeMap } from '../Paper/Paper';

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.2
+
+<!-- generated comparing v6.4.1..v6.x -->
+
+_Jan 29, 2025_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@6.4.2`
+
+- [Autocomplete] Prevent shrink animation in uncontrolled Autocomplete when default value is set (#44873) @ZeeshanTamboli
+- [Slider] Fix arrow keys past the end for Slider with custom marks (#45050) @joshkel
+- [TextareaAutosize] Temporarily disconnect ResizeObserver to avoid loop error (#44540) @mj12albert
+
+### Core
+
+- [code-infra] a few fixes uncovered during ESM updates (@Janpot) (#45100) @Janpot
+- [code-infra] Remove rsc-builder (#45079) @Janpot
+- [code-infra] Remove commonjs imports in docs (#44976) @Janpot
+- Prepare stable release from the `v6.x` branch (#45133) @DiegoAndai
+
+### Docs
+
+- Fix `/base-ui` redirect and prune links (#45083) @mj12albert
+
+All contributors of this release in alphabetical order: @DiegoAndai, @Janpot, @joshkel, @mj12albert, @ZeeshanTamboli
+
 ## 6.4.1
 
 <!-- generated comparing v6.4.0..master -->

package/Card/Card.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { DistributiveOmit } from '@mui/types';
-import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '..';
 import { PaperOwnProps } from '../Paper';
 import { CardClasses } from './cardClasses';

package/OverridableComponent/index.d.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { DistributiveOmit } from '@mui/types';
+import { StyledComponentProps } from '../styles';
+/**
+ * A component whose root component can be controlled via a `component` prop.
+ *
+ * Adjusts valid props based on the type of `component`.
+ */
+export interface OverridableComponent<TypeMap extends OverridableTypeMap> {
+    <RootComponent extends React.ElementType>(props: {
+        /**
+         * The component used for the root node.
+         * Either a string to use a HTML element or a component.
+         */
+        component: RootComponent;
+    } & OverrideProps<TypeMap, RootComponent>): React.JSX.Element | null;
+    (props: DefaultComponentProps<TypeMap>): React.JSX.Element | null;
+}
+/**
+ * Props of the component if `component={Component}` is used.
+ */
+export type OverrideProps<TypeMap extends OverridableTypeMap, RootComponent extends React.ElementType> = (BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithRef<RootComponent>, keyof BaseProps<TypeMap>>);
+/**
+ * Props if `component={Component}` is NOT used.
+ */
+export type DefaultComponentProps<TypeMap extends OverridableTypeMap> = BaseProps<TypeMap> & DistributiveOmit<React.ComponentPropsWithRef<TypeMap['defaultComponent']>, keyof BaseProps<TypeMap>>;
+/**
+ * Props defined on the component (+ common material-ui props).
+ */
+export type BaseProps<TypeMap extends OverridableTypeMap> = TypeMap['props'] & CommonProps;
+/**
+ * Props that are valid for material-ui components.
+ */
+export interface CommonProps extends StyledComponentProps<never> {
+    className?: string;
+    style?: React.CSSProperties;
+}
+export interface OverridableTypeMap {
+    props: {};
+    defaultComponent: React.ElementType;
+}

package/OverridableComponent/index.js

@@ -0,0 +1 @@
+export {};

package/OverridableComponent/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "main": "../node/OverridableComponent/index.js",
+  "types": "./index.d.ts"
+}

package/PaginationItem/PaginationItem.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OverridableStringUnion } from '@mui/types';
 import { SxProps } from '@mui/system';
-import { OverridableComponent, OverrideProps } from '@mui/material/OverridableComponent';
+import { OverridableComponent, OverrideProps } from '../OverridableComponent';
 import { Theme } from '../styles';
 import { UsePaginationItem } from '../usePagination/usePagination';
 import { PaginationItemClasses } from './paginationItemClasses';

package/Slider/useSlider.js

@@ -245,9 +245,9 @@ export function useSlider(parameters) {
     let newValue = valueInput;
     if (marks && step == null) {
       const maxMarksValue = marksValues[marksValues.length - 1];
-      if (newValue > maxMarksValue) {
+      if (newValue >= maxMarksValue) {
         newValue = maxMarksValue;
-      } else if (newValue < marksValues[0]) {
+      } else if (newValue <= marksValues[0]) {
         newValue = marksValues[0];
       } else {
         newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];

package/TextareaAutosize/TextareaAutosize.js

@@ -22,8 +22,15 @@ const styles = {
     transform: 'translateZ(0)'
   }
 };
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
 function isEmpty(obj) {
-  return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
+  return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
 }
 
 /**
@@ -48,14 +55,18 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
   const {
     current: isControlled
   } = React.useRef(value != null);
-  const inputRef = React.useRef(null);
-  const handleRef = useForkRef(forwardedRef, inputRef);
+  const textareaRef = React.useRef(null);
+  const handleRef = useForkRef(forwardedRef, textareaRef);
   const heightRef = React.useRef(null);
-  const shadowRef = React.useRef(null);
+  const hiddenTextareaRef = React.useRef(null);
   const calculateTextareaStyles = React.useCallback(() => {
-    const input = inputRef.current;
-    const containerWindow = ownerWindow(input);
-    const computedStyle = containerWindow.getComputedStyle(input);
+    const textarea = textareaRef.current;
+    const hiddenTextarea = hiddenTextareaRef.current;
+    if (!textarea || !hiddenTextarea) {
+      return undefined;
+    }
+    const containerWindow = ownerWindow(textarea);
+    const computedStyle = containerWindow.getComputedStyle(textarea);
 
     // If input's width is shrunk and it's not visible, don't sync height.
     if (computedStyle.width === '0px') {
@@ -64,25 +75,24 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
         overflowing: false
       };
     }
-    const inputShallow = shadowRef.current;
-    inputShallow.style.width = computedStyle.width;
-    inputShallow.value = input.value || props.placeholder || 'x';
-    if (inputShallow.value.slice(-1) === '\n') {
+    hiddenTextarea.style.width = computedStyle.width;
+    hiddenTextarea.value = textarea.value || props.placeholder || 'x';
+    if (hiddenTextarea.value.slice(-1) === '\n') {
       // Certain fonts which overflow the line height will cause the textarea
       // to report a different scrollHeight depending on whether the last line
       // is empty. Make it non-empty to avoid this issue.
-      inputShallow.value += ' ';
+      hiddenTextarea.value += ' ';
     }
     const boxSizing = computedStyle.boxSizing;
     const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
     const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
 
     // The height of the inner content
-    const innerHeight = inputShallow.scrollHeight;
+    const innerHeight = hiddenTextarea.scrollHeight;
 
     // Measure height of a textarea with a single row
-    inputShallow.value = 'x';
-    const singleRowHeight = inputShallow.scrollHeight;
+    hiddenTextarea.value = 'x';
+    const singleRowHeight = hiddenTextarea.scrollHeight;
 
     // The height of the outer content
     let outerHeight = innerHeight;
@@ -103,45 +113,45 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
     };
   }, [maxRows, minRows, props.placeholder]);
   const syncHeight = React.useCallback(() => {
+    const textarea = textareaRef.current;
     const textareaStyles = calculateTextareaStyles();
-    if (isEmpty(textareaStyles)) {
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
       return;
     }
     const outerHeightStyle = textareaStyles.outerHeightStyle;
-    const input = inputRef.current;
     if (heightRef.current !== outerHeightStyle) {
       heightRef.current = outerHeightStyle;
-      input.style.height = `${outerHeightStyle}px`;
+      textarea.style.height = `${outerHeightStyle}px`;
     }
-    input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
+    textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
   }, [calculateTextareaStyles]);
+  const frameRef = React.useRef(-1);
   useEnhancedEffect(() => {
-    const handleResize = () => {
-      syncHeight();
-    };
-    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
-    // in test.
-    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
-    // Also see https://github.com/mui/mui-x/issues/8733
-    let rAF;
-    const rAFHandleResize = () => {
-      cancelAnimationFrame(rAF);
-      rAF = requestAnimationFrame(() => {
-        handleResize();
-      });
-    };
-    const debounceHandleResize = debounce(handleResize);
-    const input = inputRef.current;
-    const containerWindow = ownerWindow(input);
+    const debounceHandleResize = debounce(() => syncHeight());
+    const textarea = textareaRef?.current;
+    if (!textarea) {
+      return undefined;
+    }
+    const containerWindow = ownerWindow(textarea);
     containerWindow.addEventListener('resize', debounceHandleResize);
     let resizeObserver;
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
-      resizeObserver.observe(input);
+      resizeObserver = new ResizeObserver(() => {
+        // avoid "ResizeObserver loop completed with undelivered notifications" error
+        // by temporarily unobserving the textarea element while manipulating the height
+        // and reobserving one frame later
+        resizeObserver.unobserve(textarea);
+        cancelAnimationFrame(frameRef.current);
+        syncHeight();
+        frameRef.current = requestAnimationFrame(() => {
+          resizeObserver.observe(textarea);
+        });
+      });
+      resizeObserver.observe(textarea);
     }
     return () => {
       debounceHandleResize.clear();
-      cancelAnimationFrame(rAF);
+      cancelAnimationFrame(frameRef.current);
       containerWindow.removeEventListener('resize', debounceHandleResize);
       if (resizeObserver) {
         resizeObserver.disconnect();
@@ -173,7 +183,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       "aria-hidden": true,
       className: props.className,
       readOnly: true,
-      ref: shadowRef,
+      ref: hiddenTextareaRef,
       tabIndex: -1,
       style: {
         ...styles.shadow,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.1
+ * @mui/material v6.4.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/OverridableComponent/index.js

@@ -0,0 +1 @@
+export {};

package/modern/Slider/useSlider.js

@@ -245,9 +245,9 @@ export function useSlider(parameters) {
     let newValue = valueInput;
     if (marks && step == null) {
       const maxMarksValue = marksValues[marksValues.length - 1];
-      if (newValue > maxMarksValue) {
+      if (newValue >= maxMarksValue) {
         newValue = maxMarksValue;
-      } else if (newValue < marksValues[0]) {
+      } else if (newValue <= marksValues[0]) {
         newValue = marksValues[0];
       } else {
         newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];

package/modern/TextareaAutosize/TextareaAutosize.js

@@ -22,8 +22,15 @@ const styles = {
     transform: 'translateZ(0)'
   }
 };
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (const _ in object) {
+    return false;
+  }
+  return true;
+}
 function isEmpty(obj) {
-  return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
+  return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
 }
 
 /**
@@ -48,14 +55,18 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
   const {
     current: isControlled
   } = React.useRef(value != null);
-  const inputRef = React.useRef(null);
-  const handleRef = useForkRef(forwardedRef, inputRef);
+  const textareaRef = React.useRef(null);
+  const handleRef = useForkRef(forwardedRef, textareaRef);
   const heightRef = React.useRef(null);
-  const shadowRef = React.useRef(null);
+  const hiddenTextareaRef = React.useRef(null);
   const calculateTextareaStyles = React.useCallback(() => {
-    const input = inputRef.current;
-    const containerWindow = ownerWindow(input);
-    const computedStyle = containerWindow.getComputedStyle(input);
+    const textarea = textareaRef.current;
+    const hiddenTextarea = hiddenTextareaRef.current;
+    if (!textarea || !hiddenTextarea) {
+      return undefined;
+    }
+    const containerWindow = ownerWindow(textarea);
+    const computedStyle = containerWindow.getComputedStyle(textarea);
 
     // If input's width is shrunk and it's not visible, don't sync height.
     if (computedStyle.width === '0px') {
@@ -64,25 +75,24 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
         overflowing: false
       };
     }
-    const inputShallow = shadowRef.current;
-    inputShallow.style.width = computedStyle.width;
-    inputShallow.value = input.value || props.placeholder || 'x';
-    if (inputShallow.value.slice(-1) === '\n') {
+    hiddenTextarea.style.width = computedStyle.width;
+    hiddenTextarea.value = textarea.value || props.placeholder || 'x';
+    if (hiddenTextarea.value.slice(-1) === '\n') {
       // Certain fonts which overflow the line height will cause the textarea
       // to report a different scrollHeight depending on whether the last line
       // is empty. Make it non-empty to avoid this issue.
-      inputShallow.value += ' ';
+      hiddenTextarea.value += ' ';
     }
     const boxSizing = computedStyle.boxSizing;
     const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
     const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
 
     // The height of the inner content
-    const innerHeight = inputShallow.scrollHeight;
+    const innerHeight = hiddenTextarea.scrollHeight;
 
     // Measure height of a textarea with a single row
-    inputShallow.value = 'x';
-    const singleRowHeight = inputShallow.scrollHeight;
+    hiddenTextarea.value = 'x';
+    const singleRowHeight = hiddenTextarea.scrollHeight;
 
     // The height of the outer content
     let outerHeight = innerHeight;
@@ -103,45 +113,45 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
     };
   }, [maxRows, minRows, props.placeholder]);
   const syncHeight = React.useCallback(() => {
+    const textarea = textareaRef.current;
     const textareaStyles = calculateTextareaStyles();
-    if (isEmpty(textareaStyles)) {
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
       return;
     }
     const outerHeightStyle = textareaStyles.outerHeightStyle;
-    const input = inputRef.current;
     if (heightRef.current !== outerHeightStyle) {
       heightRef.current = outerHeightStyle;
-      input.style.height = `${outerHeightStyle}px`;
+      textarea.style.height = `${outerHeightStyle}px`;
     }
-    input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
+    textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
   }, [calculateTextareaStyles]);
+  const frameRef = React.useRef(-1);
   useEnhancedEffect(() => {
-    const handleResize = () => {
-      syncHeight();
-    };
-    // Workaround a "ResizeObserver loop completed with undelivered notifications" error
-    // in test.
-    // Note that we might need to use this logic in production per https://github.com/WICG/resize-observer/issues/38
-    // Also see https://github.com/mui/mui-x/issues/8733
-    let rAF;
-    const rAFHandleResize = () => {
-      cancelAnimationFrame(rAF);
-      rAF = requestAnimationFrame(() => {
-        handleResize();
-      });
-    };
-    const debounceHandleResize = debounce(handleResize);
-    const input = inputRef.current;
-    const containerWindow = ownerWindow(input);
+    const debounceHandleResize = debounce(() => syncHeight());
+    const textarea = textareaRef?.current;
+    if (!textarea) {
+      return undefined;
+    }
+    const containerWindow = ownerWindow(textarea);
     containerWindow.addEventListener('resize', debounceHandleResize);
     let resizeObserver;
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
-      resizeObserver.observe(input);
+      resizeObserver = new ResizeObserver(() => {
+        // avoid "ResizeObserver loop completed with undelivered notifications" error
+        // by temporarily unobserving the textarea element while manipulating the height
+        // and reobserving one frame later
+        resizeObserver.unobserve(textarea);
+        cancelAnimationFrame(frameRef.current);
+        syncHeight();
+        frameRef.current = requestAnimationFrame(() => {
+          resizeObserver.observe(textarea);
+        });
+      });
+      resizeObserver.observe(textarea);
     }
     return () => {
       debounceHandleResize.clear();
-      cancelAnimationFrame(rAF);
+      cancelAnimationFrame(frameRef.current);
       containerWindow.removeEventListener('resize', debounceHandleResize);
       if (resizeObserver) {
         resizeObserver.disconnect();
@@ -173,7 +183,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       "aria-hidden": true,
       className: props.className,
       readOnly: true,
-      ref: shadowRef,
+      ref: hiddenTextareaRef,
       tabIndex: -1,
       style: {
         ...styles.shadow,

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v6.4.1
+ * @mui/material v6.4.2
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/styles/components.js

@@ -0,0 +1 @@
+export {};

package/modern/styles/overrides.js

@@ -0,0 +1 @@
+export {};

package/modern/styles/props.js

@@ -0,0 +1 @@
+export {};

package/modern/styles/variants.js

@@ -0,0 +1 @@
+export {};

package/modern/useAutocomplete/useAutocomplete.js

@@ -47,6 +47,13 @@ const defaultFilterOptions = createFilterOptions();
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
 const MULTIPLE_DEFAULT_VALUE = [];
+function getInputValue(value, multiple, getOptionLabel) {
+  if (multiple || value == null) {
+    return '';
+  }
+  const optionLabel = getOptionLabel(value);
+  return typeof optionLabel === 'string' ? optionLabel : '';
+}
 function useAutocomplete(props) {
   const {
     // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -112,6 +119,10 @@ function useAutocomplete(props) {
   const [focusedTag, setFocusedTag] = React.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
   const highlightedIndexRef = React.useRef(defaultHighlighted);
+
+  // Calculate the initial inputValue on mount only.
+  // Using useRef since defaultValue doesn't need to update inputValue dynamically.
+  const initialInputValue = React.useRef(getInputValue(defaultValue, multiple, getOptionLabel)).current;
   const [value, setValueState] = useControlled({
     controlled: valueProp,
     default: defaultValue,
@@ -119,7 +130,7 @@ function useAutocomplete(props) {
   });
   const [inputValue, setInputValueState] = useControlled({
     controlled: inputValueProp,
-    default: '',
+    default: initialInputValue,
     name: componentName,
     state: 'inputValue'
   });
@@ -131,15 +142,7 @@ function useAutocomplete(props) {
     if (!isOptionSelected && !clearOnBlur) {
       return;
     }
-    let newInputValue;
-    if (multiple) {
-      newInputValue = '';
-    } else if (newValue == null) {
-      newInputValue = '';
-    } else {
-      const optionLabel = getOptionLabel(newValue);
-      newInputValue = typeof optionLabel === 'string' ? optionLabel : '';
-    }
+    const newInputValue = getInputValue(newValue, multiple, getOptionLabel);
     if (inputValue === newInputValue) {
       return;
     }

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "6.4.1";
+export const version = "6.4.2";
 export const major = Number("6");
 export const minor = Number("4");
-export const patch = Number("1");
+export const patch = Number("2");
 export const prerelease = undefined;
 export default version;

package/node/OverridableComponent/index.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/node/Slider/useSlider.js

@@ -255,9 +255,9 @@ function useSlider(parameters) {
     let newValue = valueInput;
     if (marks && step == null) {
       const maxMarksValue = marksValues[marksValues.length - 1];
-      if (newValue > maxMarksValue) {
+      if (newValue >= maxMarksValue) {
         newValue = maxMarksValue;
-      } else if (newValue < marksValues[0]) {
+      } else if (newValue <= marksValues[0]) {
         newValue = marksValues[0];
       } else {
         newValue = newValue < value ? marksValues[marksIndex - 1] : marksValues[marksIndex + 1];