@mui/material 5.16.13 → 5.17.0

package/Autocomplete/Autocomplete.js

@@ -600,63 +600,6 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
   const paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
   const popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
   const popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
-  const renderAutocompletePopperChildren = children => /*#__PURE__*/_jsx(AutocompletePopper, _extends({
-    as: PopperComponent,
-    disablePortal: disablePortal,
-    style: {
-      width: anchorEl ? anchorEl.clientWidth : null
-    },
-    ownerState: ownerState,
-    role: "presentation",
-    anchorEl: anchorEl,
-    open: popupOpen
-  }, popperSlotProps, {
-    className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
-    children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
-      ownerState: ownerState,
-      as: PaperComponent
-    }, paperSlotProps, {
-      className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
-      children: children
-    }))
-  }));
-  let autocompletePopper = null;
-  if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
-      as: ListboxComponent,
-      className: classes.listbox,
-      ownerState: ownerState
-    }, otherListboxProps, ListboxProps, {
-      ref: combinedListboxRef,
-      children: groupedOptions.map((option, index) => {
-        if (groupBy) {
-          return renderGroup({
-            key: option.key,
-            group: option.group,
-            children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
-          });
-        }
-        return renderListOption(option, index);
-      })
-    })));
-  } else if (loading && groupedOptions.length === 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
-      className: classes.loading,
-      ownerState: ownerState,
-      children: loadingText
-    }));
-  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteNoOptions, {
-      className: classes.noOptions,
-      ownerState: ownerState,
-      role: "presentation",
-      onMouseDown: event => {
-        // Prevent input blur when interacting with the "no options" content
-        event.preventDefault();
-      },
-      children: noOptionsText
-    }));
-  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -706,7 +649,55 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           readOnly
         }, getInputProps())
       })
-    })), anchorEl ? autocompletePopper : null]
+    })), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
+      as: PopperComponent,
+      disablePortal: disablePortal,
+      style: {
+        width: anchorEl ? anchorEl.clientWidth : null
+      },
+      ownerState: ownerState,
+      role: "presentation",
+      anchorEl: anchorEl,
+      open: popupOpen
+    }, popperSlotProps, {
+      className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
+        ownerState: ownerState,
+        as: PaperComponent
+      }, paperSlotProps, {
+        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
+          className: classes.loading,
+          ownerState: ownerState,
+          children: loadingText
+        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+          className: classes.noOptions,
+          ownerState: ownerState,
+          role: "presentation",
+          onMouseDown: event => {
+            // Prevent input blur when interacting with the "no options" content
+            event.preventDefault();
+          },
+          children: noOptionsText
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
+          as: ListboxComponent,
+          className: classes.listbox,
+          ownerState: ownerState
+        }, otherListboxProps, ListboxProps, {
+          ref: combinedListboxRef,
+          children: groupedOptions.map((option, index) => {
+            if (groupBy) {
+              return renderGroup({
+                key: option.key,
+                group: option.group,
+                children: option.options.map((option2, index2) => renderListOption(option2, option.index + index2))
+              });
+            }
+            return renderListOption(option, index);
+          })
+        })) : null]
+      }))
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # [Versions](https://mui.com/versions/)
 
+## v5.17.0
+
+_Mar 18, 2025_
+
+A big thanks to the 2 contributors who made this release possible.
+
+### `@mui/material@5.17.0`
+
+- [TextareaAutosize] Temporarily disconnect ResizeObserver to avoid loop error (#44540) (#45238) @DiegoAndai
+- Support nested theme when upper theme is CSS vars theme (#45604) @siriwatknp
+
+All contributors of this release in alphabetical order: @DiegoAndai, @siriwatknp
+
+## v5.16.14
+
+<!-- generated comparing v5.16.13..v5.x -->
+
+_Jan 6, 2025_
+
+A big thanks to the 1 contributor who made this release possible.
+
+### `@mui/material@5.16.14`
+
+- [Autocomplete] Revert: Fix options list rendering in freeSolo mode (#44857) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @ZeeshanTamboli
+
 ## v5.16.13
 
 <!-- generated comparing v5.16.12..v5.x -->

package/TextareaAutosize/TextareaAutosize.js

@@ -5,7 +5,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["onChange", "maxRows", "minRows", "style", "value"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function getStyleValue(value) {
@@ -26,8 +26,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;
 }
 
 /**
@@ -52,14 +59,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') {
@@ -68,25 +79,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;
@@ -106,52 +116,63 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       overflowing
     };
   }, [maxRows, minRows, props.placeholder]);
+  const didHeightChange = useEventCallback(() => {
+    const textarea = textareaRef.current;
+    const textareaStyles = calculateTextareaStyles();
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
+      return false;
+    }
+    const outerHeightStyle = textareaStyles.outerHeightStyle;
+    return heightRef.current != null && heightRef.current !== outerHeightStyle;
+  });
   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);
-    containerWindow.addEventListener('resize', debounceHandleResize);
+    const debouncedHandleResize = debounce(syncHeight);
+    const textarea = textareaRef == null ? void 0 : textareaRef.current;
+    if (!textarea) {
+      return undefined;
+    }
+    const containerWindow = ownerWindow(textarea);
+    containerWindow.addEventListener('resize', debouncedHandleResize);
     let resizeObserver;
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
-      resizeObserver.observe(input);
+      resizeObserver = new ResizeObserver(() => {
+        if (didHeightChange()) {
+          // 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);
-      containerWindow.removeEventListener('resize', debounceHandleResize);
+      debouncedHandleResize.clear();
+      cancelAnimationFrame(frameRef.current);
+      containerWindow.removeEventListener('resize', debouncedHandleResize);
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
     };
-  }, [calculateTextareaStyles, syncHeight]);
+  }, [calculateTextareaStyles, syncHeight, didHeightChange]);
   useEnhancedEffect(() => {
     syncHeight();
   });
@@ -176,7 +197,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       "aria-hidden": true,
       className: props.className,
       readOnly: true,
-      ref: shadowRef,
+      ref: hiddenTextareaRef,
       tabIndex: -1,
       style: _extends({}, styles.shadow, style, {
         paddingTop: 0,

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.13
+ * @mui/material v5.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/legacy/Autocomplete/Autocomplete.js

@@ -594,67 +594,6 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
   var paperSlotProps = (_slotProps$paper = slotProps.paper) != null ? _slotProps$paper : componentsProps.paper;
   var popperSlotProps = (_slotProps$popper = slotProps.popper) != null ? _slotProps$popper : componentsProps.popper;
   var popupIndicatorSlotProps = (_slotProps$popupIndic = slotProps.popupIndicator) != null ? _slotProps$popupIndic : componentsProps.popupIndicator;
-  var renderAutocompletePopperChildren = function renderAutocompletePopperChildren(children) {
-    return /*#__PURE__*/_jsx(AutocompletePopper, _extends({
-      as: PopperComponent,
-      disablePortal: disablePortal,
-      style: {
-        width: anchorEl ? anchorEl.clientWidth : null
-      },
-      ownerState: ownerState,
-      role: "presentation",
-      anchorEl: anchorEl,
-      open: popupOpen
-    }, popperSlotProps, {
-      className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
-      children: /*#__PURE__*/_jsx(AutocompletePaper, _extends({
-        ownerState: ownerState,
-        as: PaperComponent
-      }, paperSlotProps, {
-        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
-        children: children
-      }))
-    }));
-  };
-  var autocompletePopper = null;
-  if (groupedOptions.length > 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
-      as: ListboxComponent,
-      className: classes.listbox,
-      ownerState: ownerState
-    }, otherListboxProps, ListboxProps, {
-      ref: combinedListboxRef,
-      children: groupedOptions.map(function (option, index) {
-        if (groupBy) {
-          return renderGroup({
-            key: option.key,
-            group: option.group,
-            children: option.options.map(function (option2, index2) {
-              return renderListOption(option2, option.index + index2);
-            })
-          });
-        }
-        return renderListOption(option, index);
-      })
-    })));
-  } else if (loading && groupedOptions.length === 0) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteLoading, {
-      className: classes.loading,
-      ownerState: ownerState,
-      children: loadingText
-    }));
-  } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-    autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/_jsx(AutocompleteNoOptions, {
-      className: classes.noOptions,
-      ownerState: ownerState,
-      role: "presentation",
-      onMouseDown: function onMouseDown(event) {
-        // Prevent input blur when interacting with the "no options" content
-        event.preventDefault();
-      },
-      children: noOptionsText
-    }));
-  }
   return /*#__PURE__*/_jsxs(React.Fragment, {
     children: [/*#__PURE__*/_jsx(AutocompleteRoot, _extends({
       ref: ref,
@@ -704,7 +643,57 @@ var Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps,
           readOnly: readOnly
         }, getInputProps())
       })
-    })), anchorEl ? autocompletePopper : null]
+    })), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, _extends({
+      as: PopperComponent,
+      disablePortal: disablePortal,
+      style: {
+        width: anchorEl ? anchorEl.clientWidth : null
+      },
+      ownerState: ownerState,
+      role: "presentation",
+      anchorEl: anchorEl,
+      open: popupOpen
+    }, popperSlotProps, {
+      className: clsx(classes.popper, popperSlotProps == null ? void 0 : popperSlotProps.className),
+      children: /*#__PURE__*/_jsxs(AutocompletePaper, _extends({
+        ownerState: ownerState,
+        as: PaperComponent
+      }, paperSlotProps, {
+        className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
+          className: classes.loading,
+          ownerState: ownerState,
+          children: loadingText
+        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+          className: classes.noOptions,
+          ownerState: ownerState,
+          role: "presentation",
+          onMouseDown: function onMouseDown(event) {
+            // Prevent input blur when interacting with the "no options" content
+            event.preventDefault();
+          },
+          children: noOptionsText
+        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(AutocompleteListbox, _extends({
+          as: ListboxComponent,
+          className: classes.listbox,
+          ownerState: ownerState
+        }, otherListboxProps, ListboxProps, {
+          ref: combinedListboxRef,
+          children: groupedOptions.map(function (option, index) {
+            if (groupBy) {
+              return renderGroup({
+                key: option.key,
+                group: option.group,
+                children: option.options.map(function (option2, index2) {
+                  return renderListOption(option2, option.index + index2);
+                })
+              });
+            }
+            return renderListOption(option, index);
+          })
+        })) : null]
+      }))
+    })) : null]
   });
 });
 process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptypes */ = {

package/legacy/TextareaAutosize/TextareaAutosize.js

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_ownerWindow as ownerWindow } from '@mui/utils';
+import { unstable_debounce as debounce, unstable_useForkRef as useForkRef, unstable_useEnhancedEffect as useEnhancedEffect, unstable_useEventCallback as useEventCallback, unstable_ownerWindow as ownerWindow } from '@mui/utils';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 function getStyleValue(value) {
@@ -25,8 +25,15 @@ var styles = {
     transform: 'translateZ(0)'
   }
 };
+function isObjectEmpty(object) {
+  // eslint-disable-next-line
+  for (var _ 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;
 }
 
 /**
@@ -49,14 +56,18 @@ var TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(p
     other = _objectWithoutProperties(props, ["onChange", "maxRows", "minRows", "style", "value"]);
   var _React$useRef = React.useRef(value != null),
     isControlled = _React$useRef.current;
-  var inputRef = React.useRef(null);
-  var handleRef = useForkRef(forwardedRef, inputRef);
+  var textareaRef = React.useRef(null);
+  var handleRef = useForkRef(forwardedRef, textareaRef);
   var heightRef = React.useRef(null);
-  var shadowRef = React.useRef(null);
+  var hiddenTextareaRef = React.useRef(null);
   var calculateTextareaStyles = React.useCallback(function () {
-    var input = inputRef.current;
-    var containerWindow = ownerWindow(input);
-    var computedStyle = containerWindow.getComputedStyle(input);
+    var textarea = textareaRef.current;
+    var hiddenTextarea = hiddenTextareaRef.current;
+    if (!textarea || !hiddenTextarea) {
+      return undefined;
+    }
+    var containerWindow = ownerWindow(textarea);
+    var computedStyle = containerWindow.getComputedStyle(textarea);
 
     // If input's width is shrunk and it's not visible, don't sync height.
     if (computedStyle.width === '0px') {
@@ -65,25 +76,24 @@ var TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(p
         overflowing: false
       };
     }
-    var 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 += ' ';
     }
     var boxSizing = computedStyle.boxSizing;
     var padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
     var border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
 
     // The height of the inner content
-    var innerHeight = inputShallow.scrollHeight;
+    var innerHeight = hiddenTextarea.scrollHeight;
 
     // Measure height of a textarea with a single row
-    inputShallow.value = 'x';
-    var singleRowHeight = inputShallow.scrollHeight;
+    hiddenTextarea.value = 'x';
+    var singleRowHeight = hiddenTextarea.scrollHeight;
 
     // The height of the outer content
     var outerHeight = innerHeight;
@@ -103,52 +113,63 @@ var TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(p
       overflowing: overflowing
     };
   }, [maxRows, minRows, props.placeholder]);
+  var didHeightChange = useEventCallback(function () {
+    var textarea = textareaRef.current;
+    var textareaStyles = calculateTextareaStyles();
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
+      return false;
+    }
+    var outerHeightStyle = textareaStyles.outerHeightStyle;
+    return heightRef.current != null && heightRef.current !== outerHeightStyle;
+  });
   var syncHeight = React.useCallback(function () {
+    var textarea = textareaRef.current;
     var textareaStyles = calculateTextareaStyles();
-    if (isEmpty(textareaStyles)) {
+    if (!textarea || !textareaStyles || isEmpty(textareaStyles)) {
       return;
     }
     var outerHeightStyle = textareaStyles.outerHeightStyle;
-    var input = inputRef.current;
     if (heightRef.current !== outerHeightStyle) {
       heightRef.current = outerHeightStyle;
-      input.style.height = "".concat(outerHeightStyle, "px");
+      textarea.style.height = "".concat(outerHeightStyle, "px");
     }
-    input.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
+    textarea.style.overflow = textareaStyles.overflowing ? 'hidden' : '';
   }, [calculateTextareaStyles]);
+  var frameRef = React.useRef(-1);
   useEnhancedEffect(function () {
-    var handleResize = function 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
-    var rAF;
-    var rAFHandleResize = function rAFHandleResize() {
-      cancelAnimationFrame(rAF);
-      rAF = requestAnimationFrame(function () {
-        handleResize();
-      });
-    };
-    var debounceHandleResize = debounce(handleResize);
-    var input = inputRef.current;
-    var containerWindow = ownerWindow(input);
-    containerWindow.addEventListener('resize', debounceHandleResize);
+    var debouncedHandleResize = debounce(syncHeight);
+    var textarea = textareaRef == null ? void 0 : textareaRef.current;
+    if (!textarea) {
+      return undefined;
+    }
+    var containerWindow = ownerWindow(textarea);
+    containerWindow.addEventListener('resize', debouncedHandleResize);
     var resizeObserver;
     if (typeof ResizeObserver !== 'undefined') {
-      resizeObserver = new ResizeObserver(process.env.NODE_ENV === 'test' ? rAFHandleResize : handleResize);
-      resizeObserver.observe(input);
+      resizeObserver = new ResizeObserver(function () {
+        if (didHeightChange()) {
+          // 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(function () {
+            resizeObserver.observe(textarea);
+          });
+        }
+      });
+      resizeObserver.observe(textarea);
     }
     return function () {
-      debounceHandleResize.clear();
-      cancelAnimationFrame(rAF);
-      containerWindow.removeEventListener('resize', debounceHandleResize);
+      debouncedHandleResize.clear();
+      cancelAnimationFrame(frameRef.current);
+      containerWindow.removeEventListener('resize', debouncedHandleResize);
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
     };
-  }, [calculateTextareaStyles, syncHeight]);
+  }, [calculateTextareaStyles, syncHeight, didHeightChange]);
   useEnhancedEffect(function () {
     syncHeight();
   });
@@ -173,7 +194,7 @@ var TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize(p
       "aria-hidden": true,
       className: props.className,
       readOnly: true,
-      ref: shadowRef,
+      ref: hiddenTextareaRef,
       tabIndex: -1,
       style: _extends({}, styles.shadow, style, {
         paddingTop: 0,

package/legacy/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v5.16.13
+ * @mui/material v5.17.0
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the