@mui/material 9.0.0 → 9.0.1

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,
@@ -500,6 +504,46 @@ 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 {
@@ -564,13 +608,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 +771,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 +790,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 +825,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,

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,
@@ -488,6 +492,46 @@ 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 {
@@ -552,13 +596,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 +759,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 +778,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 +813,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,

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/Badge/Badge.js

@@ -78,6 +78,9 @@ const BadgeBadge = (0, _zeroStyled.styled)('span', {
   borderRadius: RADIUS_STANDARD,
   zIndex: 1,
   // Render the badge on top of potential ripples.
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
   transition: theme.transitions.create('transform', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen

package/Badge/Badge.mjs

@@ -71,6 +71,9 @@ const BadgeBadge = styled('span', {
   borderRadius: RADIUS_STANDARD,
   zIndex: 1,
   // Render the badge on top of potential ripples.
+  '@media (forced-colors: active)': {
+    border: '1px solid ButtonBorder'
+  },
   transition: theme.transitions.create('transform', {
     easing: theme.transitions.easing.easeInOut,
     duration: theme.transitions.duration.enteringScreen

package/Button/Button.js

@@ -109,6 +109,17 @@ const ButtonRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
       color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.startIcon || ownerState.loading && ownerState.loadingPosition === 'start',
+      style: {
+        '&::before': {
+          content: '"\\200b"',
+          width: 0,
+          overflow: 'hidden'
+        }
+      }
+    }, {
       props: {
         variant: 'contained'
       },
@@ -558,6 +569,12 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       children: loadingIndicator
     })
   }) : null;
+
+  // Don't forward the 'root' classes to the ButtonBase, as they will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/(0, _jsxRuntime.jsxs)(ButtonRoot, {
     ownerState: ownerState,
     className: (0, _clsx.default)(contextProps.className, classes.root, className, positionClassName),
@@ -570,7 +587,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type: type,
     id: loading ? loadingId : idProp,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });
@@ -683,7 +700,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'reset', 'submit']), _propTypes.default.string]),
+  type: _propTypes.default.string,
   /**
    * The variant to use.
    * @default 'text'

package/Button/Button.mjs

@@ -102,6 +102,17 @@ const ButtonRoot = styled(ButtonBase, {
       color: (theme.vars || theme).palette.action.disabled
     },
     variants: [{
+      props: ({
+        ownerState
+      }) => ownerState.startIcon || ownerState.loading && ownerState.loadingPosition === 'start',
+      style: {
+        '&::before': {
+          content: '"\\200b"',
+          width: 0,
+          overflow: 'hidden'
+        }
+      }
+    }, {
       props: {
         variant: 'contained'
       },
@@ -551,6 +562,12 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
       children: loadingIndicator
     })
   }) : null;
+
+  // Don't forward the 'root' classes to the ButtonBase, as they will get duplicated with the one passed to the className prop.
+  const {
+    root,
+    ...forwardedClasses
+  } = classes;
   return /*#__PURE__*/_jsxs(ButtonRoot, {
     ownerState: ownerState,
     className: clsx(contextProps.className, classes.root, className, positionClassName),
@@ -563,7 +580,7 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(inProps, ref) {
     type: type,
     id: loading ? loadingId : idProp,
     ...other,
-    classes: classes,
+    classes: forwardedClasses,
     children: [startIcon, loadingPosition !== 'end' && loader, children, loadingPosition === 'end' && loader, endIcon]
   });
 });
@@ -676,7 +693,7 @@ process.env.NODE_ENV !== "production" ? Button.propTypes /* remove-proptypes */
   /**
    * @ignore
    */
-  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string]),
+  type: PropTypes.string,
   /**
    * The variant to use.
    * @default 'text'

package/ButtonBase/ButtonBase.d.mts

@@ -88,6 +88,13 @@ export interface ButtonBaseOwnProps {
    * A ref that points to the `TouchRipple` element.
    */
   touchRippleRef?: React.Ref<TouchRippleActions> | undefined;
+  /**
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
+   */
+  type?: string | undefined;
 }
 export interface ButtonBaseTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> {
   props: AdditionalProps & ButtonBaseOwnProps;

package/ButtonBase/ButtonBase.d.ts

@@ -88,6 +88,13 @@ export interface ButtonBaseOwnProps {
    * A ref that points to the `TouchRipple` element.
    */
   touchRippleRef?: React.Ref<TouchRippleActions> | undefined;
+  /**
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
+   */
+  type?: string | undefined;
 }
 export interface ButtonBaseTypeMap<AdditionalProps = {}, RootComponent extends React.ElementType = 'button'> {
   props: AdditionalProps & ButtonBaseOwnProps;

package/ButtonBase/ButtonBase.js

@@ -464,8 +464,11 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
     })
   })]),
   /**
-   * @ignore
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
    */
-  type: _propTypes.default.oneOfType([_propTypes.default.oneOf(['button', 'reset', 'submit']), _propTypes.default.string])
+  type: _propTypes.default.string
 } : void 0;
 var _default = exports.default = ButtonBase;

package/ButtonBase/ButtonBase.mjs

@@ -457,8 +457,11 @@ process.env.NODE_ENV !== "production" ? ButtonBase.propTypes /* remove-proptypes
     })
   })]),
   /**
-   * @ignore
+   * The HTML [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button#type)
+   * attribute applied to `button` and `a` elements.
+   * Ignored when rendering non-native buttons.
+   * @default 'button'
    */
-  type: PropTypes.oneOfType([PropTypes.oneOf(['button', 'reset', 'submit']), PropTypes.string])
+  type: PropTypes.string
 } : void 0;
 export default ButtonBase;