@mui/material 5.16.13 → 5.17.0

package/node/TextareaAutosize/TextareaAutosize.js

@@ -33,8 +33,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;
 }
 
 /**
@@ -59,14 +66,18 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
   const {
     current: isControlled
   } = React.useRef(value != null);
-  const inputRef = React.useRef(null);
-  const handleRef = (0, _utils.unstable_useForkRef)(forwardedRef, inputRef);
+  const textareaRef = React.useRef(null);
+  const handleRef = (0, _utils.unstable_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 = (0, _utils.unstable_ownerWindow)(input);
-    const computedStyle = containerWindow.getComputedStyle(input);
+    const textarea = textareaRef.current;
+    const hiddenTextarea = hiddenTextareaRef.current;
+    if (!textarea || !hiddenTextarea) {
+      return undefined;
+    }
+    const containerWindow = (0, _utils.unstable_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') {
@@ -75,25 +86,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;
@@ -113,52 +123,63 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       overflowing
     };
   }, [maxRows, minRows, props.placeholder]);
+  const didHeightChange = (0, _utils.unstable_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);
   (0, _utils.unstable_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 = (0, _utils.unstable_debounce)(handleResize);
-    const input = inputRef.current;
-    const containerWindow = (0, _utils.unstable_ownerWindow)(input);
-    containerWindow.addEventListener('resize', debounceHandleResize);
+    const debouncedHandleResize = (0, _utils.unstable_debounce)(syncHeight);
+    const textarea = textareaRef == null ? void 0 : textareaRef.current;
+    if (!textarea) {
+      return undefined;
+    }
+    const containerWindow = (0, _utils.unstable_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]);
   (0, _utils.unstable_useEnhancedEffect)(() => {
     syncHeight();
   });
@@ -183,7 +204,7 @@ const TextareaAutosize = /*#__PURE__*/React.forwardRef(function TextareaAutosize
       "aria-hidden": true,
       className: props.className,
       readOnly: true,
-      ref: shadowRef,
+      ref: hiddenTextareaRef,
       tabIndex: -1,
       style: (0, _extends2.default)({}, styles.shadow, style, {
         paddingTop: 0,

package/node/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/node/styles/ThemeProvider.js

@@ -22,9 +22,21 @@ function ThemeProvider(_ref) {
     } = _ref,
     props = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
   const scopedTheme = themeInput[_identifier.default];
+  let finalTheme = scopedTheme || themeInput;
+  if (typeof themeInput !== 'function') {
+    if (scopedTheme && !scopedTheme.vars) {
+      finalTheme = (0, _extends2.default)({}, scopedTheme, {
+        vars: null
+      });
+    } else if (themeInput && !themeInput.vars) {
+      finalTheme = (0, _extends2.default)({}, themeInput, {
+        vars: null
+      });
+    }
+  }
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_system.ThemeProvider, (0, _extends2.default)({}, props, {
     themeId: scopedTheme ? _identifier.default : undefined,
-    theme: scopedTheme || themeInput
+    theme: finalTheme
   }));
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {

package/node/styles/createTheme.js

@@ -30,7 +30,10 @@ function createTheme(options = {}, ...args) {
       typography: typographyInput = {}
     } = options,
     other = (0, _objectWithoutPropertiesLoose2.default)(options, _excluded);
-  if (options.vars) {
+  if (options.vars &&
+  // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+  // `generateCssVars` is the closest identifier for checking that the `options` is a result of `extendTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+  options.generateCssVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : (0, _formatMuiErrorMessage2.default)(18));
   }

package/node/version/index.js

@@ -4,10 +4,10 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.preReleaseNumber = exports.preReleaseLabel = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "5.16.13";
+const version = exports.version = "5.17.0";
 const major = exports.major = Number("5");
-const minor = exports.minor = Number("16");
-const patch = exports.patch = Number("13");
+const minor = exports.minor = Number("17");
+const patch = exports.patch = Number("0");
 const preReleaseLabel = exports.preReleaseLabel = undefined || null;
 const preReleaseNumber = exports.preReleaseNumber = Number(undefined) || null;
 var _default = exports.default = version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "5.16.13",
+  "version": "5.17.0",
   "private": false,
   "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.",
@@ -35,10 +35,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.0.0",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^5.16.13",
-    "@mui/system": "^5.16.13",
-    "@mui/utils": "^5.16.13",
-    "@mui/types": "^7.2.15"
+    "@mui/core-downloads-tracker": "^5.17.0",
+    "@mui/types": "^7.2.15",
+    "@mui/system": "^5.16.14",
+    "@mui/utils": "^5.16.14"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/styles/ThemeProvider.js

@@ -14,9 +14,21 @@ export default function ThemeProvider(_ref) {
     } = _ref,
     props = _objectWithoutPropertiesLoose(_ref, _excluded);
   const scopedTheme = themeInput[THEME_ID];
+  let finalTheme = scopedTheme || themeInput;
+  if (typeof themeInput !== 'function') {
+    if (scopedTheme && !scopedTheme.vars) {
+      finalTheme = _extends({}, scopedTheme, {
+        vars: null
+      });
+    } else if (themeInput && !themeInput.vars) {
+      finalTheme = _extends({}, themeInput, {
+        vars: null
+      });
+    }
+  }
   return /*#__PURE__*/_jsx(SystemThemeProvider, _extends({}, props, {
     themeId: scopedTheme ? THEME_ID : undefined,
-    theme: scopedTheme || themeInput
+    theme: finalTheme
   }));
 }
 process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {

package/styles/createTheme.js

@@ -20,7 +20,10 @@ function createTheme(options = {}, ...args) {
       typography: typographyInput = {}
     } = options,
     other = _objectWithoutPropertiesLoose(options, _excluded);
-  if (options.vars) {
+  if (options.vars &&
+  // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+  // `generateCssVars` is the closest identifier for checking that the `options` is a result of `extendTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+  options.generateCssVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: \`vars\` is a private field used for CSS variables support.
 Please use another name.` : _formatMuiErrorMessage(18));
   }

package/umd/material-ui.development.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
@@ -6613,13 +6613,13 @@
     return muiTheme;
   }
 
-  function isObjectEmpty(obj) {
+  function isObjectEmpty$1(obj) {
     return Object.keys(obj).length === 0;
   }
   function useTheme$3() {
     var defaultTheme = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
     var contextTheme = React__namespace.useContext(ThemeContext$2);
-    return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
+    return !contextTheme || isObjectEmpty$1(contextTheme) ? defaultTheme : contextTheme;
   }
 
   var systemDefaultTheme$1 = createTheme$1();
@@ -11140,7 +11140,10 @@
       typographyInput = _options$typography === void 0 ? {} : _options$typography;
       options.shape;
       var other = _objectWithoutProperties(options, ["breakpoints", "mixins", "spacing", "palette", "transitions", "typography", "shape"]);
-    if (options.vars) {
+    if (options.vars &&
+    // The error should throw only for the root theme creation because user is not allowed to use a custom node `vars`.
+    // `generateCssVars` is the closest identifier for checking that the `options` is a result of `extendTheme` with CSS variables so that user can create new theme for nested ThemeProvider.
+    options.generateCssVars === undefined) {
       throw new Error("MUI: `vars` is a private field used for CSS variables support.\nPlease use another name." );
     }
     var palette = createPalette(paletteInput);
@@ -11459,9 +11462,21 @@
     var themeInput = _ref.theme,
       props = _objectWithoutProperties(_ref, ["theme"]);
     var scopedTheme = themeInput[THEME_ID];
+    var finalTheme = scopedTheme || themeInput;
+    if (typeof themeInput !== 'function') {
+      if (scopedTheme && !scopedTheme.vars) {
+        finalTheme = _extends({}, scopedTheme, {
+          vars: null
+        });
+      } else if (themeInput && !themeInput.vars) {
+        finalTheme = _extends({}, themeInput, {
+          vars: null
+        });
+      }
+    }
     return /*#__PURE__*/jsxRuntimeExports.jsx(ThemeProvider$1, _extends({}, props, {
       themeId: scopedTheme ? THEME_ID : undefined,
-      theme: scopedTheme || themeInput
+      theme: finalTheme
     }));
   }
   ThemeProvider.propTypes = {
@@ -20278,8 +20293,15 @@
       transform: 'translateZ(0)'
     }
   };
+  function isObjectEmpty(object) {
+    // eslint-disable-next-line
+    for (var _ in object) {
+      return false;
+    }
+    return true;
+  }
   function isEmpty$1(obj) {
-    return obj === undefined || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflowing;
+    return isObjectEmpty(obj) || obj.outerHeightStyle === 0 && !obj.overflowing;
   }
 
   /**
@@ -20302,14 +20324,18 @@
       other = _objectWithoutProperties(props, ["onChange", "maxRows", "minRows", "style", "value"]);
     var _React$useRef = React__namespace.useRef(value != null),
       isControlled = _React$useRef.current;
-    var inputRef = React__namespace.useRef(null);
-    var handleRef = useForkRef(forwardedRef, inputRef);
+    var textareaRef = React__namespace.useRef(null);
+    var handleRef = useForkRef(forwardedRef, textareaRef);
     var heightRef = React__namespace.useRef(null);
-    var shadowRef = React__namespace.useRef(null);
+    var hiddenTextareaRef = React__namespace.useRef(null);
     var calculateTextareaStyles = React__namespace.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') {
@@ -20318,25 +20344,24 @@
           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;
@@ -20356,46 +20381,63 @@
         overflowing: overflowing
       };
     }, [maxRows, minRows, props.placeholder]);
+    var didHeightChange = useEventCallback(function () {
+      var textarea = textareaRef.current;
+      var textareaStyles = calculateTextareaStyles();
+      if (!textarea || !textareaStyles || isEmpty$1(textareaStyles)) {
+        return false;
+      }
+      var outerHeightStyle = textareaStyles.outerHeightStyle;
+      return heightRef.current != null && heightRef.current !== outerHeightStyle;
+    });
     var syncHeight = React__namespace.useCallback(function () {
+      var textarea = textareaRef.current;
       var textareaStyles = calculateTextareaStyles();
-      if (isEmpty$1(textareaStyles)) {
+      if (!textarea || !textareaStyles || isEmpty$1(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__namespace.useRef(-1);
     useEnhancedEffect$1(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 debounceHandleResize = debounce$1(handleResize);
-      var input = inputRef.current;
-      var containerWindow = ownerWindow(input);
-      containerWindow.addEventListener('resize', debounceHandleResize);
+      var debouncedHandleResize = debounce$1(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(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$1(function () {
       syncHeight();
     });
@@ -20420,7 +20462,7 @@
         "aria-hidden": true,
         className: props.className,
         readOnly: true,
-        ref: shadowRef,
+        ref: hiddenTextareaRef,
         tabIndex: -1,
         style: _extends({}, styles$4.shadow, style, {
           paddingTop: 0,
@@ -21818,67 +21860,6 @@
     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__*/jsxRuntimeExports.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__*/jsxRuntimeExports.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__*/jsxRuntimeExports.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__*/jsxRuntimeExports.jsx(AutocompleteLoading, {
-        className: classes.loading,
-        ownerState: ownerState,
-        children: loadingText
-      }));
-    } else if (groupedOptions.length === 0 && !freeSolo && !loading) {
-      autocompletePopper = renderAutocompletePopperChildren( /*#__PURE__*/jsxRuntimeExports.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__*/jsxRuntimeExports.jsxs(React__namespace.Fragment, {
       children: [/*#__PURE__*/jsxRuntimeExports.jsx(AutocompleteRoot, _extends({
         ref: ref,
@@ -21928,7 +21909,57 @@
             readOnly: readOnly
           }, getInputProps())
         })
-      })), anchorEl ? autocompletePopper : null]
+      })), anchorEl ? /*#__PURE__*/jsxRuntimeExports.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__*/jsxRuntimeExports.jsxs(AutocompletePaper, _extends({
+          ownerState: ownerState,
+          as: PaperComponent
+        }, paperSlotProps, {
+          className: clsx(classes.paper, paperSlotProps == null ? void 0 : paperSlotProps.className),
+          children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/jsxRuntimeExports.jsx(AutocompleteLoading, {
+            className: classes.loading,
+            ownerState: ownerState,
+            children: loadingText
+          }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/jsxRuntimeExports.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__*/jsxRuntimeExports.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]
     });
   });
   Autocomplete.propTypes /* remove-proptypes */ = {