@mui/material 7.3.9 → 7.3.10

package/esm/styles/createThemeWithVars.js

@@ -329,21 +329,21 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.TableCell, 'border', colorMix(safeDarken, safeAlpha(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
+    if (!nativeColor) {
+      setColorChannel(palette.background, 'default');
 
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-    setColorChannel(palette, 'divider');
+      // added for consistency with the `background.default` token
+      setColorChannel(palette.background, 'paper');
+      setColorChannel(palette.common, 'background');
+      setColorChannel(palette.common, 'onBackground');
+      setColorChannel(palette, 'divider');
+    }
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && !nativeColor && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', safeColorChannel(toRgb(colors.main)));

package/esm/transitions/utils.d.ts

@@ -19,5 +19,12 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
+type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
 export {};

package/esm/transitions/utils.js

@@ -1,4 +1,29 @@
 export const reflow = node => node.scrollTop;
+export function normalizedTransitionCallback(nodeRef, callback) {
+  return maybeIsAppearing => {
+    if (callback) {
+      const node = nodeRef.current;
+      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      if (maybeIsAppearing === undefined) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+}
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
+  const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 export function getTransitionProps(props, options) {
   const {
     timeout,

package/esm/useAutocomplete/useAutocomplete.js

@@ -56,6 +56,7 @@ const defaultFilterOptions = createFilterOptions();
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const defaultIsOptionEqualToValue = (option, value) => option === value;
 const MULTIPLE_DEFAULT_VALUE = [];
 function getInputValue(value, multiple, getOptionLabel, renderValue) {
   if (multiple || value == null || renderValue) {
@@ -94,7 +95,7 @@ function useAutocomplete(props) {
     id: idProp,
     includeInputInList = false,
     inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value) => option === value,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
     multiple = false,
     onChange,
     onClose,
@@ -126,6 +127,7 @@ function useAutocomplete(props) {
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
+  const windowLostFocus = React.useRef(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [focusedItem, setFocusedItem] = React.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
@@ -171,8 +173,30 @@ function useAutocomplete(props) {
   const [inputPristine, setInputPristine] = React.useState(true);
   const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
   const popupOpen = open && !readOnly;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      return value;
+    }
+    if (value != null) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedValuesSet = React.useMemo(() => {
+    // Fast path for the default strict equality comparator to avoid O(n^2) option checks.
+    if (isOptionEqualToValue !== defaultIsOptionEqualToValue || selectedValues.length === 0) {
+      return null;
+    }
+    return new Set(selectedValues);
+  }, [isOptionEqualToValue, selectedValues]);
+  const isOptionSelected = React.useCallback(option => {
+    if (selectedValuesSet) {
+      return selectedValuesSet.has(option);
+    }
+    return selectedValues.some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+  }, [isOptionEqualToValue, selectedValues, selectedValuesSet]);
   const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
+    if (filterSelectedOptions && isOptionSelected(option)) {
       return false;
     }
     return true;
@@ -490,6 +514,21 @@ function useAutocomplete(props) {
       syncHighlightedIndex();
     }
   }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
+
+  // Listen for browser window blur to detect when the user switches tabs or windows.
+  // This helps prevent the popup from reopening automatically when the window regains focus.
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const handleWindowBlur = () => {
+      windowLostFocus.current = true;
+    };
+    window.addEventListener('blur', handleWindowBlur);
+    return () => {
+      window.removeEventListener('blur', handleWindowBlur);
+    };
+  }, []);
   const handleOpen = event => {
     if (open) {
       return;
@@ -825,6 +864,14 @@ function useAutocomplete(props) {
       // Ensure DOM focus lands on the input
       focusItem(-1);
     }
+
+    // If the window previously lost focus while the popup was open,
+    // ignore this focus event to prevent unintended reopening.
+    // Reset the flag so normal focus behavior resumes.
+    if (windowLostFocus.current) {
+      windowLostFocus.current = false;
+      return;
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }
@@ -915,6 +962,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     if (event.target.getAttribute('id') !== id) {
       event.preventDefault();
     }
@@ -926,6 +977,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     inputRef.current.focus();
     if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
       inputRef.current.select();
@@ -1054,7 +1109,7 @@ function useAutocomplete(props) {
       index,
       option
     }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+      const selected = isOptionSelected(option);
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
         key: getOptionKey?.(option) ?? getOptionLabel(option),

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.3.9";
+export const version = "7.3.10";
 export const major = Number("7");
 export const minor = Number("3");
-export const patch = Number("9");
+export const patch = Number("10");
 export const prerelease = undefined;
 export default version;

package/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/material v7.3.9
+ * @mui/material v7.3.10
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.3.9",
+  "version": "7.3.10",
   "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.",
   "keywords": [
@@ -33,10 +33,10 @@
     "prop-types": "^15.8.1",
     "react-is": "^19.2.3",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^7.3.9",
-    "@mui/system": "^7.3.9",
+    "@mui/core-downloads-tracker": "^7.3.10",
     "@mui/types": "^7.4.12",
-    "@mui/utils": "^7.3.9"
+    "@mui/utils": "^7.3.10",
+    "@mui/system": "^7.3.10"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -44,7 +44,7 @@
     "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0",
-    "@mui/material-pigment-css": "^7.3.9"
+    "@mui/material-pigment-css": "^7.3.10"
   },
   "peerDependenciesMeta": {
     "@types/react": {

package/styles/createThemeNoVars.js

@@ -89,7 +89,7 @@ function createThemeNoVars(options = {}, ...args) {
   options.generateThemeVars === undefined) {
     throw new Error(process.env.NODE_ENV !== "production" ? 'MUI: `vars` is a private field used for CSS variables support.\n' +
     // #host-reference
-    'Please use another name or follow the [docs](https://mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage.default)(20));
+    'Please use another name or follow the [docs](https://v7.mui.com/material-ui/customization/css-theme-variables/usage/) to enable the feature.' : (0, _formatMuiErrorMessage.default)(20));
   }
   const palette = (0, _createPalette.default)({
     ...paletteInput,

package/styles/createThemeWithVars.js

@@ -339,21 +339,21 @@ function createThemeWithVars(options = {}, ...args) {
       setColor(palette.TableCell, 'border', colorMix(_colorManipulator.private_safeDarken, (0, _colorManipulator.private_safeAlpha)(nativeColor ? getCssVar('palette-divider') : palette.divider, 1), 0.68));
       setColor(palette.Tooltip, 'bg', colorMix(_colorManipulator.private_safeAlpha, nativeColor ? getCssVar('palette-grey-700') : palette.grey[700], 0.92));
     }
+    if (!nativeColor) {
+      setColorChannel(palette.background, 'default');
 
-    // MUI X - DataGrid needs this token.
-    setColorChannel(palette.background, 'default');
-
-    // added for consistency with the `background.default` token
-    setColorChannel(palette.background, 'paper');
-    setColorChannel(palette.common, 'background');
-    setColorChannel(palette.common, 'onBackground');
-    setColorChannel(palette, 'divider');
+      // added for consistency with the `background.default` token
+      setColorChannel(palette.background, 'paper');
+      setColorChannel(palette.common, 'background');
+      setColorChannel(palette.common, 'onBackground');
+      setColorChannel(palette, 'divider');
+    }
     Object.keys(palette).forEach(color => {
       const colors = palette[color];
 
       // The default palettes (primary, secondary, error, info, success, and warning) errors are handled by the above `createTheme(...)`.
 
-      if (color !== 'tonalOffset' && colors && typeof colors === 'object') {
+      if (color !== 'tonalOffset' && !nativeColor && colors && typeof colors === 'object') {
         // Silent the error for custom palettes.
         if (colors.main) {
           setColor(palette[color], 'mainChannel', (0, _colorManipulator.private_safeColorChannel)(toRgb(colors.main)));

package/transitions/utils.d.ts

@@ -19,5 +19,12 @@ interface TransitionProps {
   easing: string | undefined;
   delay: string | undefined;
 }
+export declare function normalizedTransitionCallback(nodeRef: React.RefObject<HTMLElement | null>, callback: ((node: HTMLElement, isAppearing?: boolean) => void) | undefined): (maybeIsAppearing?: boolean) => void;
+type TransitionState = 'entering' | 'entered' | 'exiting' | 'exited';
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+export declare function getTransitionChildStyle(state: TransitionState, inProp: boolean | undefined, baseStyles: Record<string, React.CSSProperties>, hiddenStyles: React.CSSProperties, styleProp: React.CSSProperties | undefined, childStyle: React.CSSProperties | undefined): React.CSSProperties | undefined;
 export declare function getTransitionProps(props: ComponentProps, options: Options): TransitionProps;
 export {};

package/transitions/utils.js

@@ -3,10 +3,37 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.getTransitionChildStyle = getTransitionChildStyle;
 exports.getTransitionProps = getTransitionProps;
+exports.normalizedTransitionCallback = normalizedTransitionCallback;
 exports.reflow = void 0;
 const reflow = node => node.scrollTop;
 exports.reflow = reflow;
+function normalizedTransitionCallback(nodeRef, callback) {
+  return maybeIsAppearing => {
+    if (callback) {
+      const node = nodeRef.current;
+      // onEnterXxx and onExitXxx callbacks have a different arguments.length value.
+      if (maybeIsAppearing === undefined) {
+        callback(node);
+      } else {
+        callback(node, maybeIsAppearing);
+      }
+    }
+  };
+}
+/**
+ * Computes the child style for a transition component, reusing existing
+ * references when possible to preserve referential equality for React.memo.
+ */
+function getTransitionChildStyle(state, inProp, baseStyles, hiddenStyles, styleProp, childStyle) {
+  const base = state === 'exited' && !inProp ? hiddenStyles : baseStyles[state] || baseStyles.exited;
+  return styleProp || childStyle ? {
+    ...base,
+    ...styleProp,
+    ...childStyle
+  } : base;
+}
 function getTransitionProps(props, options) {
   const {
     timeout,

package/useAutocomplete/useAutocomplete.js

@@ -64,6 +64,7 @@ const defaultFilterOptions = createFilterOptions();
 // Number of options to jump in list box when `Page Up` and `Page Down` keys are used.
 const pageSize = 5;
 const defaultIsActiveElementInListbox = listboxRef => listboxRef.current !== null && listboxRef.current.parentElement?.contains(document.activeElement);
+const defaultIsOptionEqualToValue = (option, value) => option === value;
 const MULTIPLE_DEFAULT_VALUE = [];
 function getInputValue(value, multiple, getOptionLabel, renderValue) {
   if (multiple || value == null || renderValue) {
@@ -102,7 +103,7 @@ function useAutocomplete(props) {
     id: idProp,
     includeInputInList = false,
     inputValue: inputValueProp,
-    isOptionEqualToValue = (option, value) => option === value,
+    isOptionEqualToValue = defaultIsOptionEqualToValue,
     multiple = false,
     onChange,
     onClose,
@@ -134,6 +135,7 @@ function useAutocomplete(props) {
   const firstFocus = React.useRef(true);
   const inputRef = React.useRef(null);
   const listboxRef = React.useRef(null);
+  const windowLostFocus = React.useRef(false);
   const [anchorEl, setAnchorEl] = React.useState(null);
   const [focusedItem, setFocusedItem] = React.useState(-1);
   const defaultHighlighted = autoHighlight ? 0 : -1;
@@ -179,8 +181,30 @@ function useAutocomplete(props) {
   const [inputPristine, setInputPristine] = React.useState(true);
   const inputValueIsSelectedValue = !multiple && value != null && inputValue === getOptionLabel(value);
   const popupOpen = open && !readOnly;
+  const selectedValues = React.useMemo(() => {
+    if (multiple) {
+      return value;
+    }
+    if (value != null) {
+      return [value];
+    }
+    return [];
+  }, [multiple, value]);
+  const selectedValuesSet = React.useMemo(() => {
+    // Fast path for the default strict equality comparator to avoid O(n^2) option checks.
+    if (isOptionEqualToValue !== defaultIsOptionEqualToValue || selectedValues.length === 0) {
+      return null;
+    }
+    return new Set(selectedValues);
+  }, [isOptionEqualToValue, selectedValues]);
+  const isOptionSelected = React.useCallback(option => {
+    if (selectedValuesSet) {
+      return selectedValuesSet.has(option);
+    }
+    return selectedValues.some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+  }, [isOptionEqualToValue, selectedValues, selectedValuesSet]);
   const filteredOptions = popupOpen ? filterOptions(options.filter(option => {
-    if (filterSelectedOptions && (multiple ? value : [value]).some(value2 => value2 !== null && isOptionEqualToValue(option, value2))) {
+    if (filterSelectedOptions && isOptionSelected(option)) {
       return false;
     }
     return true;
@@ -498,6 +522,21 @@ function useAutocomplete(props) {
       syncHighlightedIndex();
     }
   }, [syncHighlightedIndex, filteredOptionsChanged, popupOpen, disableCloseOnSelect]);
+
+  // Listen for browser window blur to detect when the user switches tabs or windows.
+  // This helps prevent the popup from reopening automatically when the window regains focus.
+  React.useEffect(() => {
+    if (typeof window === 'undefined') {
+      return undefined;
+    }
+    const handleWindowBlur = () => {
+      windowLostFocus.current = true;
+    };
+    window.addEventListener('blur', handleWindowBlur);
+    return () => {
+      window.removeEventListener('blur', handleWindowBlur);
+    };
+  }, []);
   const handleOpen = event => {
     if (open) {
       return;
@@ -833,6 +872,14 @@ function useAutocomplete(props) {
       // Ensure DOM focus lands on the input
       focusItem(-1);
     }
+
+    // If the window previously lost focus while the popup was open,
+    // ignore this focus event to prevent unintended reopening.
+    // Reset the flag so normal focus behavior resumes.
+    if (windowLostFocus.current) {
+      windowLostFocus.current = false;
+      return;
+    }
     if (openOnFocus && !ignoreFocus.current) {
       handleOpen(event);
     }
@@ -923,6 +970,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     if (event.target.getAttribute('id') !== id) {
       event.preventDefault();
     }
@@ -934,6 +985,10 @@ function useAutocomplete(props) {
     if (!event.currentTarget.contains(event.target)) {
       return;
     }
+    // Don't interfere with interactions outside the input area (e.g. helper text)
+    if (anchorEl && !anchorEl.contains(event.target)) {
+      return;
+    }
     inputRef.current.focus();
     if (selectOnFocus && firstFocus.current && inputRef.current.selectionEnd - inputRef.current.selectionStart === 0) {
       inputRef.current.select();
@@ -1062,7 +1117,7 @@ function useAutocomplete(props) {
       index,
       option
     }) => {
-      const selected = (multiple ? value : [value]).some(value2 => value2 != null && isOptionEqualToValue(option, value2));
+      const selected = isOptionSelected(option);
       const disabled = getOptionDisabled ? getOptionDisabled(option) : false;
       return {
         key: getOptionKey?.(option) ?? getOptionLabel(option),

package/version/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
-const version = exports.version = "7.3.9";
+const version = exports.version = "7.3.10";
 const major = exports.major = Number("7");
 const minor = exports.minor = Number("3");
-const patch = exports.patch = Number("9");
+const patch = exports.patch = Number("10");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;