@mui/material 9.0.0 → 9.1.0

package/Accordion/Accordion.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { AccordionClasses } from "./accordionClasses.mjs";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
 import { ExtendPaperTypeMap, PaperProps } from "../Paper/Paper.mjs";
@@ -19,7 +19,7 @@ export interface AccordionSlots {
   heading: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Collapse
    */
   transition: React.ElementType;

package/Accordion/Accordion.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { Theme } from "../styles/index.js";
-import { TransitionProps } from "../transitions/transition.js";
+import { TransitionProps } from "../transitions/types.js";
 import { AccordionClasses } from "./accordionClasses.js";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.js";
 import { ExtendPaperTypeMap, PaperProps } from "../Paper/Paper.js";
@@ -19,7 +19,7 @@ export interface AccordionSlots {
   heading: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Collapse
    */
   transition: React.ElementType;

package/Accordion/Accordion.js

@@ -22,6 +22,7 @@ var _AccordionContext = _interopRequireDefault(require("./AccordionContext"));
 var _useControlled = _interopRequireDefault(require("../utils/useControlled"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _accordionClasses = _interopRequireWildcard(require("./accordionClasses"));
+var _utils = require("../transitions/utils");
 var _jsxRuntime = require("react/jsx-runtime");
 const useUtilityClasses = ownerState => {
   const {
@@ -57,7 +58,7 @@ const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
   };
   return {
     position: 'relative',
-    transition: theme.transitions.create(['margin'], transition),
+    ...(0, _utils.getTransitionStyles)(theme, ['margin'], transition),
     overflowAnchor: 'none',
     // Keep the same scrolling position
     '&::before': {
@@ -69,7 +70,7 @@ const AccordionRoot = (0, _zeroStyled.styled)(_Paper.default, {
       content: '""',
       opacity: 1,
       backgroundColor: (theme.vars || theme).palette.divider,
-      transition: theme.transitions.create(['opacity', 'background-color'], transition)
+      ...(0, _utils.getTransitionStyles)(theme, ['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
       '&::before': {

package/Accordion/Accordion.mjs

@@ -15,6 +15,7 @@ import AccordionContext from "./AccordionContext.mjs";
 import useControlled from "../utils/useControlled.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import accordionClasses, { getAccordionUtilityClass } from "./accordionClasses.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
@@ -50,7 +51,7 @@ const AccordionRoot = styled(Paper, {
   };
   return {
     position: 'relative',
-    transition: theme.transitions.create(['margin'], transition),
+    ...getTransitionStyles(theme, ['margin'], transition),
     overflowAnchor: 'none',
     // Keep the same scrolling position
     '&::before': {
@@ -62,7 +63,7 @@ const AccordionRoot = styled(Paper, {
       content: '""',
       opacity: 1,
       backgroundColor: (theme.vars || theme).palette.divider,
-      transition: theme.transitions.create(['opacity', 'background-color'], transition)
+      ...getTransitionStyles(theme, ['opacity', 'background-color'], transition)
     },
     '&:first-of-type': {
       '&::before': {

package/AccordionSummary/AccordionSummary.js

@@ -16,6 +16,7 @@ var _memoTheme = _interopRequireDefault(require("../utils/memoTheme"));
 var _DefaultPropsProvider = require("../DefaultPropsProvider");
 var _ButtonBase = _interopRequireDefault(require("../ButtonBase"));
 var _AccordionContext = _interopRequireDefault(require("../Accordion/AccordionContext"));
+var _utils = require("../transitions/utils");
 var _accordionSummaryClasses = _interopRequireWildcard(require("./accordionSummaryClasses"));
 var _useSlot = _interopRequireDefault(require("../utils/useSlot"));
 var _jsxRuntime = require("react/jsx-runtime");
@@ -39,35 +40,32 @@ const AccordionSummaryRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
   slot: 'Root'
 })((0, _memoTheme.default)(({
   theme
-}) => {
-  const transition = {
+}) => ({
+  display: 'flex',
+  width: '100%',
+  minHeight: 48,
+  padding: theme.spacing(0, 2),
+  ...(0, _utils.getTransitionStyles)(theme, ['min-height', 'background-color'], {
     duration: theme.transitions.duration.shortest
-  };
-  return {
-    display: 'flex',
-    width: '100%',
-    minHeight: 48,
-    padding: theme.spacing(0, 2),
-    transition: theme.transitions.create(['min-height', 'background-color'], transition),
-    [`&.${_accordionSummaryClasses.default.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    },
-    [`&.${_accordionSummaryClasses.default.disabled}`]: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity
-    },
-    [`&:hover:not(.${_accordionSummaryClasses.default.disabled})`]: {
-      cursor: 'pointer'
-    },
-    variants: [{
-      props: props => !props.disableGutters,
-      style: {
-        [`&.${_accordionSummaryClasses.default.expanded}`]: {
-          minHeight: 64
-        }
+  }),
+  [`&.${_accordionSummaryClasses.default.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`&.${_accordionSummaryClasses.default.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  },
+  [`&:hover:not(.${_accordionSummaryClasses.default.disabled})`]: {
+    cursor: 'pointer'
+  },
+  variants: [{
+    props: props => !props.disableGutters,
+    style: {
+      [`&.${_accordionSummaryClasses.default.expanded}`]: {
+        minHeight: 64
       }
-    }]
-  };
-}));
+    }
+  }]
+})));
 const AccordionSummaryContent = (0, _zeroStyled.styled)('span', {
   name: 'MuiAccordionSummary',
   slot: 'Content'
@@ -81,7 +79,7 @@ const AccordionSummaryContent = (0, _zeroStyled.styled)('span', {
   variants: [{
     props: props => !props.disableGutters,
     style: {
-      transition: theme.transitions.create(['margin'], {
+      ...(0, _utils.getTransitionStyles)(theme, ['margin'], {
         duration: theme.transitions.duration.shortest
       }),
       [`&.${_accordionSummaryClasses.default.expanded}`]: {
@@ -99,7 +97,7 @@ const AccordionSummaryExpandIconWrapper = (0, _zeroStyled.styled)('span', {
   display: 'flex',
   color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
-  transition: theme.transitions.create('transform', {
+  ...(0, _utils.getTransitionStyles)(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${_accordionSummaryClasses.default.expanded}`]: {

package/AccordionSummary/AccordionSummary.mjs

@@ -9,6 +9,7 @@ import memoTheme from "../utils/memoTheme.mjs";
 import { useDefaultProps } from "../DefaultPropsProvider/index.mjs";
 import ButtonBase from "../ButtonBase/index.mjs";
 import AccordionContext from "../Accordion/AccordionContext.mjs";
+import { getTransitionStyles } from "../transitions/utils.mjs";
 import accordionSummaryClasses, { getAccordionSummaryUtilityClass } from "./accordionSummaryClasses.mjs";
 import useSlot from "../utils/useSlot.mjs";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -32,35 +33,32 @@ const AccordionSummaryRoot = styled(ButtonBase, {
   slot: 'Root'
 })(memoTheme(({
   theme
-}) => {
-  const transition = {
+}) => ({
+  display: 'flex',
+  width: '100%',
+  minHeight: 48,
+  padding: theme.spacing(0, 2),
+  ...getTransitionStyles(theme, ['min-height', 'background-color'], {
     duration: theme.transitions.duration.shortest
-  };
-  return {
-    display: 'flex',
-    width: '100%',
-    minHeight: 48,
-    padding: theme.spacing(0, 2),
-    transition: theme.transitions.create(['min-height', 'background-color'], transition),
-    [`&.${accordionSummaryClasses.focusVisible}`]: {
-      backgroundColor: (theme.vars || theme).palette.action.focus
-    },
-    [`&.${accordionSummaryClasses.disabled}`]: {
-      opacity: (theme.vars || theme).palette.action.disabledOpacity
-    },
-    [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
-      cursor: 'pointer'
-    },
-    variants: [{
-      props: props => !props.disableGutters,
-      style: {
-        [`&.${accordionSummaryClasses.expanded}`]: {
-          minHeight: 64
-        }
+  }),
+  [`&.${accordionSummaryClasses.focusVisible}`]: {
+    backgroundColor: (theme.vars || theme).palette.action.focus
+  },
+  [`&.${accordionSummaryClasses.disabled}`]: {
+    opacity: (theme.vars || theme).palette.action.disabledOpacity
+  },
+  [`&:hover:not(.${accordionSummaryClasses.disabled})`]: {
+    cursor: 'pointer'
+  },
+  variants: [{
+    props: props => !props.disableGutters,
+    style: {
+      [`&.${accordionSummaryClasses.expanded}`]: {
+        minHeight: 64
       }
-    }]
-  };
-}));
+    }
+  }]
+})));
 const AccordionSummaryContent = styled('span', {
   name: 'MuiAccordionSummary',
   slot: 'Content'
@@ -74,7 +72,7 @@ const AccordionSummaryContent = styled('span', {
   variants: [{
     props: props => !props.disableGutters,
     style: {
-      transition: theme.transitions.create(['margin'], {
+      ...getTransitionStyles(theme, ['margin'], {
         duration: theme.transitions.duration.shortest
       }),
       [`&.${accordionSummaryClasses.expanded}`]: {
@@ -92,7 +90,7 @@ const AccordionSummaryExpandIconWrapper = styled('span', {
   display: 'flex',
   color: (theme.vars || theme).palette.action.active,
   transform: 'rotate(0deg)',
-  transition: theme.transitions.create('transform', {
+  ...getTransitionStyles(theme, 'transform', {
     duration: theme.transitions.duration.shortest
   }),
   [`&.${accordionSummaryClasses.expanded}`]: {

package/Autocomplete/Autocomplete.js

@@ -18,6 +18,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _integerPropType = _interopRequireDefault(require("@mui/utils/integerPropType"));
 var _chainPropTypes = _interopRequireDefault(require("@mui/utils/chainPropTypes"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _useForcedRerendering = _interopRequireDefault(require("@mui/utils/useForcedRerendering"));
+var _useEnhancedEffect = _interopRequireDefault(require("@mui/utils/useEnhancedEffect"));
 var _useAutocomplete = _interopRequireWildcard(require("../useAutocomplete"));
 var _Popper = _interopRequireDefault(require("../Popper"));
 var _ListSubheader = _interopRequireDefault(require("../ListSubheader"));
@@ -340,6 +342,8 @@ const AutocompleteListbox = (0, _zeroStyled.styled)('ul', {
   padding: '8px 0',
   maxHeight: '40vh',
   overflow: 'auto',
+  isolation: 'isolate',
+  // Prevent overlap with iOS overlay scrollbars.
   position: 'relative',
   [`& .${_autocompleteClasses.default.option}`]: {
     minHeight: 48,
@@ -467,6 +471,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -500,15 +505,51 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     ...props,
     componentName: 'Autocomplete'
   });
+
+  // Re-render when anchorEl resizes so the Popper width stays in sync.
+  // Width is always read synchronously from anchorEl.clientWidth during render
+  // (no stale cached value). The hook just triggers a re-render on resize.
+  const forceRenderOnResize = (0, _useForcedRerendering.default)();
+  React.useEffect(() => {
+    if (!popupOpen || !anchorEl || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let lastWidth = anchorEl.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const newWidth = anchorEl.clientWidth;
+      if (lastWidth !== newWidth) {
+        lastWidth = newWidth;
+        forceRenderOnResize();
+      }
+    });
+    observer.observe(anchorEl);
+    return () => {
+      observer.disconnect();
+    };
+  }, [popupOpen, anchorEl, forceRenderOnResize]);
+
+  // When popupOpen becomes false, useAutocomplete returns [] for groupedOptions.
+  // Transitioned Poppers can remain mounted for their exit animation, so keep rendering
+  // the last open-state options instead of flashing "No options" or an empty Paper.
+  // These options are stale because they no longer reflect the hook's current
+  // groupedOptions, but they are non-interactive while closing and reset on next open.
+  const previousGroupedOptionsRef = React.useRef([]);
+  const prevPopupOpenRef = React.useRef(false);
+  const renderedOptions = popupOpen ? groupedOptions : previousGroupedOptionsRef.current;
+  (0, _useEnhancedEffect.default)(() => {
+    if (popupOpen && !prevPopupOpenRef.current) {
+      previousGroupedOptionsRef.current = [];
+    }
+    prevPopupOpenRef.current = popupOpen;
+    if (popupOpen && groupedOptions.length > 0) {
+      previousGroupedOptionsRef.current = groupedOptions;
+    }
+  }, [popupOpen, groupedOptions]);
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
-  const {
-    ref: listboxRef,
-    ...otherListboxProps
-  } = getListboxProps();
   const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
@@ -547,8 +588,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
-    additionalProps: otherListboxProps,
-    ref: listboxRef
+    getSlotProps: getListboxProps
   });
   const [PaperSlot, paperProps] = (0, _useSlot.default)('paper', {
     elementType: _Paper.default,
@@ -564,13 +604,24 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     additionalProps: {
       disablePortal,
       style: {
-        width: anchorEl ? anchorEl.clientWidth : null
+        width: anchorEl ? anchorEl.clientWidth : null,
+        // Prevent interaction with stale cached options during exit transitions.
+        // The hook's filteredOptions is [] when popupOpen=false, so clicks on stale
+        // rendered options would pass undefined to selectNewValue.
+        pointerEvents: popupOpen ? undefined : 'none'
       },
       role: 'presentation',
       anchorEl,
       open: popupOpen
     }
   });
+
+  // Don't render the Popper when there's no content to show.
+  // In freeSolo mode, "No options" text is suppressed, so if there are also no
+  // matching options and loading is false, the Paper would be empty.
+  // Uses renderedOptions (not groupedOptions) so Popper stays during exit transitions.
+  // Respect keepMounted from resolved popperProps (handles both object and callback slotProps forms).
+  const hasPopupContent = renderedOptions.length > 0 || loading || !freeSolo || popperProps.keepMounted === true;
   const [ClearIndicatorSlot, clearIndicatorProps] = (0, _useSlot.default)('clearIndicator', {
     elementType: AutocompleteClearIndicator,
     externalForwardedProps,
@@ -716,17 +767,17 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           }
         }
       })
-    }), anchorEl ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
+    }), anchorEl && hasPopupContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompletePopper, {
       as: PopperSlot,
       ...popperProps,
       children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(AutocompletePaper, {
         as: PaperSlot,
         ...paperProps,
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
+        children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
           children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
+        }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(AutocompleteNoOptions, {
           className: classes.noOptions,
           ownerState: ownerState,
           role: "presentation",
@@ -735,9 +786,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
+        }) : null, renderedOptions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)(ListboxSlot, {
           ...listboxProps,
-          children: groupedOptions.map((option, index) => {
+          children: renderedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({
                 key: option.key,
@@ -770,12 +821,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   autoHighlight: _propTypes.default.bool,
   /**
-   * 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: _propTypes.default.bool,
@@ -1116,6 +1166,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderValue: _propTypes.default.func,
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave: _propTypes.default.bool,
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

package/Autocomplete/Autocomplete.mjs

@@ -6,6 +6,8 @@ import PropTypes from 'prop-types';
 import integerPropType from '@mui/utils/integerPropType';
 import chainPropTypes from '@mui/utils/chainPropTypes';
 import composeClasses from '@mui/utils/composeClasses';
+import useForcedRerendering from '@mui/utils/useForcedRerendering';
+import useEnhancedEffect from '@mui/utils/useEnhancedEffect';
 import useAutocomplete, { createFilterOptions } from "../useAutocomplete/index.mjs";
 import Popper from "../Popper/index.mjs";
 import ListSubheader from "../ListSubheader/index.mjs";
@@ -327,6 +329,8 @@ const AutocompleteListbox = styled('ul', {
   padding: '8px 0',
   maxHeight: '40vh',
   overflow: 'auto',
+  isolation: 'isolate',
+  // Prevent overlap with iOS overlay scrollbars.
   position: 'relative',
   [`& .${autocompleteClasses.option}`]: {
     minHeight: 48,
@@ -455,6 +459,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     renderInput,
     renderOption: renderOptionProp,
     renderValue,
+    resetHighlightOnMouseLeave = false,
     selectOnFocus = !props.freeSolo,
     size = 'medium',
     slots = {},
@@ -488,15 +493,51 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     ...props,
     componentName: 'Autocomplete'
   });
+
+  // Re-render when anchorEl resizes so the Popper width stays in sync.
+  // Width is always read synchronously from anchorEl.clientWidth during render
+  // (no stale cached value). The hook just triggers a re-render on resize.
+  const forceRenderOnResize = useForcedRerendering();
+  React.useEffect(() => {
+    if (!popupOpen || !anchorEl || typeof ResizeObserver === 'undefined') {
+      return undefined;
+    }
+    let lastWidth = anchorEl.clientWidth;
+    const observer = new ResizeObserver(() => {
+      const newWidth = anchorEl.clientWidth;
+      if (lastWidth !== newWidth) {
+        lastWidth = newWidth;
+        forceRenderOnResize();
+      }
+    });
+    observer.observe(anchorEl);
+    return () => {
+      observer.disconnect();
+    };
+  }, [popupOpen, anchorEl, forceRenderOnResize]);
+
+  // When popupOpen becomes false, useAutocomplete returns [] for groupedOptions.
+  // Transitioned Poppers can remain mounted for their exit animation, so keep rendering
+  // the last open-state options instead of flashing "No options" or an empty Paper.
+  // These options are stale because they no longer reflect the hook's current
+  // groupedOptions, but they are non-interactive while closing and reset on next open.
+  const previousGroupedOptionsRef = React.useRef([]);
+  const prevPopupOpenRef = React.useRef(false);
+  const renderedOptions = popupOpen ? groupedOptions : previousGroupedOptionsRef.current;
+  useEnhancedEffect(() => {
+    if (popupOpen && !prevPopupOpenRef.current) {
+      previousGroupedOptionsRef.current = [];
+    }
+    prevPopupOpenRef.current = popupOpen;
+    if (popupOpen && groupedOptions.length > 0) {
+      previousGroupedOptionsRef.current = groupedOptions;
+    }
+  }, [popupOpen, groupedOptions]);
   const hasClearIcon = !disableClearable && !disabled && dirty && !readOnly;
   const hasPopupIcon = (!freeSolo || forcePopupIcon === true) && forcePopupIcon !== false;
   const {
     onMouseDown: handleInputMouseDown
   } = getInputProps();
-  const {
-    ref: listboxRef,
-    ...otherListboxProps
-  } = getListboxProps();
   const defaultGetOptionLabel = option => option.label ?? option;
   const getOptionLabel = getOptionLabelProp || defaultGetOptionLabel;
 
@@ -535,8 +576,7 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     externalForwardedProps,
     ownerState,
     className: classes.listbox,
-    additionalProps: otherListboxProps,
-    ref: listboxRef
+    getSlotProps: getListboxProps
   });
   const [PaperSlot, paperProps] = useSlot('paper', {
     elementType: Paper,
@@ -552,13 +592,24 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
     additionalProps: {
       disablePortal,
       style: {
-        width: anchorEl ? anchorEl.clientWidth : null
+        width: anchorEl ? anchorEl.clientWidth : null,
+        // Prevent interaction with stale cached options during exit transitions.
+        // The hook's filteredOptions is [] when popupOpen=false, so clicks on stale
+        // rendered options would pass undefined to selectNewValue.
+        pointerEvents: popupOpen ? undefined : 'none'
       },
       role: 'presentation',
       anchorEl,
       open: popupOpen
     }
   });
+
+  // Don't render the Popper when there's no content to show.
+  // In freeSolo mode, "No options" text is suppressed, so if there are also no
+  // matching options and loading is false, the Paper would be empty.
+  // Uses renderedOptions (not groupedOptions) so Popper stays during exit transitions.
+  // Respect keepMounted from resolved popperProps (handles both object and callback slotProps forms).
+  const hasPopupContent = renderedOptions.length > 0 || loading || !freeSolo || popperProps.keepMounted === true;
   const [ClearIndicatorSlot, clearIndicatorProps] = useSlot('clearIndicator', {
     elementType: AutocompleteClearIndicator,
     externalForwardedProps,
@@ -704,17 +755,17 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
           }
         }
       })
-    }), anchorEl ? /*#__PURE__*/_jsx(AutocompletePopper, {
+    }), anchorEl && hasPopupContent ? /*#__PURE__*/_jsx(AutocompletePopper, {
       as: PopperSlot,
       ...popperProps,
       children: /*#__PURE__*/_jsxs(AutocompletePaper, {
         as: PaperSlot,
         ...paperProps,
-        children: [loading && groupedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
+        children: [loading && renderedOptions.length === 0 ? /*#__PURE__*/_jsx(AutocompleteLoading, {
           className: classes.loading,
           ownerState: ownerState,
           children: loadingText
-        }) : null, groupedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
+        }) : null, renderedOptions.length === 0 && !freeSolo && !loading ? /*#__PURE__*/_jsx(AutocompleteNoOptions, {
           className: classes.noOptions,
           ownerState: ownerState,
           role: "presentation",
@@ -723,9 +774,9 @@ const Autocomplete = /*#__PURE__*/React.forwardRef(function Autocomplete(inProps
             event.preventDefault();
           },
           children: noOptionsText
-        }) : null, groupedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
+        }) : null, renderedOptions.length > 0 ? /*#__PURE__*/_jsx(ListboxSlot, {
           ...listboxProps,
-          children: groupedOptions.map((option, index) => {
+          children: renderedOptions.map((option, index) => {
             if (groupBy) {
               return renderGroup({
                 key: option.key,
@@ -758,12 +809,11 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    */
   autoHighlight: PropTypes.bool,
   /**
-   * 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: PropTypes.bool,
@@ -1104,6 +1154,12 @@ process.env.NODE_ENV !== "production" ? Autocomplete.propTypes /* remove-proptyp
    * @returns {ReactNode}
    */
   renderValue: PropTypes.func,
+  /**
+   * If `true`, clears an option highlighted by mouse movement when the mouse leaves the listbox.
+   * This behavior will be enabled by default in the next major version.
+   * @default false
+   */
+  resetHighlightOnMouseLeave: PropTypes.bool,
   /**
    * If `true`, the input's text is selected on focus.
    * It helps the user clear the selected value.

package/Avatar/Avatar.js

@@ -76,6 +76,10 @@ const AvatarRoot = (0, _zeroStyled.styled)('div', {
     },
     style: {
       color: (theme.vars || theme).palette.background.default,
+      '@media (forced-colors: active)': {
+        boxSizing: 'border-box',
+        border: '1px solid ButtonBorder'
+      },
       ...(theme.vars ? {
         backgroundColor: theme.vars.palette.Avatar.defaultBg
       } : {

package/Avatar/Avatar.mjs

@@ -69,6 +69,10 @@ const AvatarRoot = styled('div', {
     },
     style: {
       color: (theme.vars || theme).palette.background.default,
+      '@media (forced-colors: active)': {
+        boxSizing: 'border-box',
+        border: '1px solid ButtonBorder'
+      },
       ...(theme.vars ? {
         backgroundColor: theme.vars.palette.Avatar.defaultBg
       } : {

package/Backdrop/Backdrop.d.mts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { SxProps } from '@mui/system';
 import { FadeProps } from "../Fade/index.mjs";
-import { TransitionProps } from "../transitions/transition.mjs";
+import { TransitionProps } from "../transitions/types.mjs";
 import { Theme } from "../styles/index.mjs";
 import { BackdropClasses } from "./backdropClasses.mjs";
 import { OverridableComponent, OverrideProps } from "../OverridableComponent/index.mjs";
@@ -14,7 +14,7 @@ export interface BackdropSlots {
   root: React.ElementType;
   /**
    * The component that renders the transition.
-   * [Follow this guide](https://mui.com/material-ui/transitions/#transitioncomponent-prop) to learn more about the requirements for this component.
+   * [Follow this guide](/material-ui/transitions/#transition-slots) to learn more about the requirements for this component.
    * @default Fade
    */
   transition: React.ElementType;