@mui/material 7.1.2 → 7.3.0

package/esm/styles/createThemeWithVars.js

@@ -10,6 +10,7 @@ import createColorScheme, { getOpacity, getOverlays } from "./createColorScheme.
 import defaultShouldSkipGeneratingVar from "./shouldSkipGeneratingVar.js";
 import defaultGetSelector from "./createGetSelector.js";
 import { stringifyTheme } from "./stringifyTheme.js";
+import { light, dark } from "./createPalette.js";
 function assignNode(obj, keys) {
   keys.forEach(k => {
     if (!obj[k]) {
@@ -53,7 +54,7 @@ const silent = fn => {
   return undefined;
 };
 export const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
-function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
+function attachColorScheme(colorSpace, colorSchemes, scheme, restTheme, colorScheme) {
   if (!scheme) {
     return undefined;
   }
@@ -65,7 +66,8 @@ function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
       palette: {
         mode,
         ...scheme?.palette
-      }
+      },
+      colorSpace
     });
     return undefined;
   }
@@ -77,7 +79,8 @@ function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
     palette: {
       mode,
       ...scheme?.palette
-    }
+    },
+    colorSpace
   });
   colorSchemes[colorScheme] = {
     ...scheme,
@@ -107,6 +110,7 @@ export default function createThemeWithVars(options = {}, ...args) {
     defaultColorScheme: defaultColorSchemeInput,
     disableCssColorScheme = false,
     cssVarPrefix = 'mui',
+    nativeColor = false,
     shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
     rootSelector = ':root',
@@ -134,13 +138,19 @@ export default function createThemeWithVars(options = {}, ...args) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : _formatErrorMessage(21, defaultColorScheme));
   }
 
+  // The reason to use `oklch` is that it is the most perceptually uniform color space and widely supported.
+  let colorSpace;
+  if (nativeColor) {
+    colorSpace = 'oklch';
+  }
+
   // Create the palette for the default color scheme, either `light`, `dark`, or custom color scheme.
-  const muiTheme = attachColorScheme(colorSchemes, defaultScheme, input, defaultColorScheme);
+  const muiTheme = attachColorScheme(colorSpace, colorSchemes, defaultScheme, input, defaultColorScheme);
   if (builtInLight && !colorSchemes.light) {
-    attachColorScheme(colorSchemes, builtInLight, undefined, 'light');
+    attachColorScheme(colorSpace, colorSchemes, builtInLight, undefined, 'light');
   }
   if (builtInDark && !colorSchemes.dark) {
-    attachColorScheme(colorSchemes, builtInDark, undefined, 'dark');
+    attachColorScheme(colorSpace, colorSchemes, builtInDark, undefined, 'dark');
   }
   let theme = {
     defaultColorScheme,
@@ -174,14 +184,30 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.common, 'background', '#000');
       setColor(palette.common, 'onBackground', '#fff');
     }
+    function colorMix(method, color, coefficient) {
+      if (colorSpace) {
+        let mixer;
+        if (method === safeAlpha) {
+          mixer = `transparent ${((1 - coefficient) * 100).toFixed(0)}%`;
+        }
+        if (method === safeDarken) {
+          mixer = `#000 ${(coefficient * 100).toFixed(0)}%`;
+        }
+        if (method === safeLighten) {
+          mixer = `#fff ${(coefficient * 100).toFixed(0)}%`;
+        }
+        return `color-mix(in ${colorSpace}, ${color}, ${mixer})`;
+      }
+      return method(color, coefficient);
+    }
 
     // assign component variables
     assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Button', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
     if (palette.mode === 'light') {
-      setColor(palette.Alert, 'errorColor', safeDarken(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeDarken(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeDarken(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', safeDarken(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', colorMix(safeDarken, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(safeDarken, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(safeDarken, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(safeDarken, palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-main'));
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-main'));
@@ -190,10 +216,10 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.main)));
       setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.main)));
       setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.main)));
-      setColor(palette.Alert, 'errorStandardBg', safeLighten(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeLighten(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeLighten(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', safeLighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(safeLighten, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(safeLighten, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(safeLighten, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(safeLighten, palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
       setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
@@ -208,41 +234,42 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', safeLighten(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', safeLighten(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', safeLighten(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
-      setColor(palette.Slider, 'primaryTrack', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', safeLighten(palette.warning.main, 0.62));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.8);
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(safeLighten, palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(safeLighten, palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(safeLighten, palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', colorMix(safeLighten, palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(safeLighten, palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(safeAlpha, palette.text.primary, 0.11) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', colorMix(safeLighten, palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', colorMix(safeLighten, palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', colorMix(safeLighten, palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', colorMix(safeLighten, palette.warning.main, 0.62));
+      const snackbarContentBackground = colorSpace ? colorMix(safeDarken, palette.background.default, 0.6825) // use `0.6825` instead of `0.8` to match the contrast ratio of JS implementation
+      : safeEmphasize(palette.background.default, 0.8);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? dark.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-400'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-400'));
       setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-common-white'));
       setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-100'));
-      setColor(palette.Switch, 'primaryDisabledColor', safeLighten(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeLighten(palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', safeLighten(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', safeLighten(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', safeLighten(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', safeLighten(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', safeLighten(safeAlpha(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(safeLighten, palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(safeLighten, palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(safeLighten, palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(safeLighten, palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', colorMix(safeLighten, colorMix(safeAlpha, palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, palette.grey[700], 0.92));
     }
     if (palette.mode === 'dark') {
-      setColor(palette.Alert, 'errorColor', safeLighten(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', safeLighten(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', safeLighten(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', safeLighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', colorMix(safeLighten, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(safeLighten, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(safeLighten, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(safeLighten, palette.warning.light, 0.6));
       setColor(palette.Alert, 'errorFilledBg', setCssVarColor('palette-error-dark'));
       setColor(palette.Alert, 'infoFilledBg', setCssVarColor('palette-info-dark'));
       setColor(palette.Alert, 'successFilledBg', setCssVarColor('palette-success-dark'));
@@ -251,10 +278,10 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.Alert, 'infoFilledColor', silent(() => palette.getContrastText(palette.info.dark)));
       setColor(palette.Alert, 'successFilledColor', silent(() => palette.getContrastText(palette.success.dark)));
       setColor(palette.Alert, 'warningFilledColor', silent(() => palette.getContrastText(palette.warning.dark)));
-      setColor(palette.Alert, 'errorStandardBg', safeDarken(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', safeDarken(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', safeDarken(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', safeDarken(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(safeDarken, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(safeDarken, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(safeDarken, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(safeDarken, palette.warning.light, 0.9));
       setColor(palette.Alert, 'errorIconColor', setCssVarColor('palette-error-main'));
       setColor(palette.Alert, 'infoIconColor', setCssVarColor('palette-info-main'));
       setColor(palette.Alert, 'successIconColor', setCssVarColor('palette-success-main'));
@@ -271,35 +298,36 @@ export default function createThemeWithVars(options = {}, ...args) {
       setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
       setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
       setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
-      setColor(palette.LinearProgress, 'primaryBg', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', safeDarken(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', safeDarken(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', safeDarken(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', safeDarken(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
-      setColor(palette.Slider, 'primaryTrack', safeDarken(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', safeDarken(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', safeDarken(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', safeDarken(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', safeDarken(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', safeDarken(palette.warning.main, 0.5));
-      const snackbarContentBackground = safeEmphasize(palette.background.default, 0.98);
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(safeDarken, palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(safeDarken, palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(safeDarken, palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', colorMix(safeDarken, palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(safeDarken, palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(safeAlpha, palette.text.primary, 0.13) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(safeDarken, palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', colorMix(safeDarken, palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', colorMix(safeDarken, palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', colorMix(safeDarken, palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', colorMix(safeDarken, palette.warning.main, 0.5));
+      const snackbarContentBackground = colorSpace ? colorMix(safeLighten, palette.background.default, 0.985) // use `0.985` instead of `0.98` to match the contrast ratio of JS implementation
+      : safeEmphasize(palette.background.default, 0.98);
       setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
-      setColor(palette.SnackbarContent, 'color', silent(() => palette.getContrastText(snackbarContentBackground)));
+      setColor(palette.SnackbarContent, 'color', silent(() => colorSpace ? light.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', safeEmphasize(palette.background.paper, 0.15));
       setColor(palette.StepConnector, 'border', setCssVarColor('palette-grey-600'));
       setColor(palette.StepContent, 'border', setCssVarColor('palette-grey-600'));
       setColor(palette.Switch, 'defaultColor', setCssVarColor('palette-grey-300'));
       setColor(palette.Switch, 'defaultDisabledColor', setCssVarColor('palette-grey-600'));
-      setColor(palette.Switch, 'primaryDisabledColor', safeDarken(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', safeDarken(palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', safeDarken(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', safeDarken(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', safeDarken(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', safeDarken(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', safeDarken(safeAlpha(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', safeAlpha(palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(safeDarken, palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(safeDarken, palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(safeDarken, palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(safeDarken, palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(safeDarken, palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(safeDarken, palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', colorMix(safeDarken, colorMix(safeAlpha, palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', colorMix(safeAlpha, palette.grey[700], 0.92));
     }
 
     // MUI X - DataGrid needs this token.
@@ -351,7 +379,8 @@ export default function createThemeWithVars(options = {}, ...args) {
     prefix: cssVarPrefix,
     disableCssColorScheme,
     shouldSkipGeneratingVar,
-    getSelector: defaultGetSelector(theme)
+    getSelector: defaultGetSelector(theme),
+    enableContrastVars: nativeColor
   };
   const {
     vars,

package/esm/styles/shouldSkipGeneratingVar.js

@@ -1,5 +1,5 @@
 export default function shouldSkipGeneratingVar(keys) {
-  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
+  return !!keys[0].match(/(cssVarPrefix|colorSchemeSelector|modularCssLayers|rootSelector|typography|mixins|breakpoints|direction|transitions)/) || !!keys[0].match(/sxConfig$/) ||
   // ends with sxConfig
   keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/);
 }

package/esm/useAutocomplete/useAutocomplete.d.ts

@@ -135,6 +135,7 @@ export interface UseAutocompleteProps<Value, Multiple extends boolean | undefine
    * Used to determine the disabled state for a given option.
    *
    * @param {Value} option The option to test.
+   * @template Value The option shape. Will be the same shape as an item of the options.
    * @returns {boolean}
    */
   getOptionDisabled?: (option: Value) => boolean;

package/esm/useAutocomplete/useAutocomplete.js

@@ -6,6 +6,13 @@ import useEventCallback from '@mui/utils/useEventCallback';
 import useControlled from '@mui/utils/useControlled';
 import useId from '@mui/utils/useId';
 import usePreviousProps from '@mui/utils/usePreviousProps';
+function areArraysSame({
+  array1,
+  array2,
+  parser = value => value
+}) {
+  return array1 && array2 && array1.length === array2.length && array1.every((prevOption, index) => parser(prevOption) === parser(array2[index]));
+}
 
 // https://stackoverflow.com/questions/990904/remove-accents-diacritics-in-a-string-in-javascript
 function stripDiacritics(string) {
@@ -368,13 +375,22 @@ function useAutocomplete(props) {
       }
     }
   });
+  const filteredOptionsChanged = !areArraysSame({
+    array1: previousProps.filteredOptions,
+    array2: filteredOptions,
+    parser: getOptionLabel
+  });
   const getPreviousHighlightedOptionIndex = () => {
     const isSameValue = (value1, value2) => {
       const label1 = value1 ? getOptionLabel(value1) : '';
       const label2 = value2 ? getOptionLabel(value2) : '';
       return label1 === label2;
     };
-    if (highlightedIndexRef.current !== -1 && previousProps.filteredOptions && previousProps.filteredOptions.length !== filteredOptions.length && previousProps.inputValue === inputValue && (multiple ? value.length === previousProps.value.length && previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : isSameValue(previousProps.value, value))) {
+    if (highlightedIndexRef.current !== -1 && !areArraysSame({
+      array1: previousProps.filteredOptions,
+      array2: filteredOptions,
+      parser: getOptionLabel
+    }) && previousProps.inputValue === inputValue && (multiple ? value.length === previousProps.value.length && previousProps.value.every((val, i) => getOptionLabel(value[i]) === getOptionLabel(val)) : isSameValue(previousProps.value, value))) {
       const previousHighlightedOption = previousProps.filteredOptions[highlightedIndexRef.current];
       if (previousHighlightedOption) {
         return filteredOptions.findIndex(option => {
@@ -470,8 +486,10 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    syncHighlightedIndex();
-  }, [syncHighlightedIndex]);
+    if (filteredOptionsChanged) {
+      syncHighlightedIndex();
+    }
+  }, [syncHighlightedIndex, filteredOptionsChanged]);
   const handleOpen = event => {
     if (open) {
       return;

package/esm/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.1.2";
+export const version = "7.3.0";
 export const major = Number("7");
-export const minor = Number("1");
-export const patch = Number("2");
+export const minor = Number("3");
+export const patch = Number("0");
 export const prerelease = undefined;
 export default version;

package/index.js

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

package/internal/SwitchBase.js

@@ -33,7 +33,9 @@ const useUtilityClasses = ownerState => {
   };
   return (0, _composeClasses.default)(slots, _switchBaseClasses.getSwitchBaseUtilityClass, classes);
 };
-const SwitchBaseRoot = (0, _zeroStyled.styled)(_ButtonBase.default)({
+const SwitchBaseRoot = (0, _zeroStyled.styled)(_ButtonBase.default, {
+  name: 'MuiSwitchBase'
+})({
   padding: 9,
   borderRadius: '50%',
   variants: [{
@@ -71,6 +73,7 @@ const SwitchBaseRoot = (0, _zeroStyled.styled)(_ButtonBase.default)({
   }]
 });
 const SwitchBaseInput = (0, _zeroStyled.styled)('input', {
+  name: 'MuiSwitchBase',
   shouldForwardProp: _rootShouldForwardProp.default
 })({
   cursor: 'inherit',

package/locale/index.js

@@ -3284,9 +3284,12 @@ const roRO = exports.roRO = {
           // if (type === 'previous') {
           return 'Mergi la pagina precedentă';
         },
-        labelRowsPerPage: 'Rânduri pe pagină:'
-        // labelDisplayedRows: ({ from, to, count }) =>
-        //   `${from}–${to} din ${count !== -1 ? count : `more than ${to}`}`,
+        labelRowsPerPage: 'Rânduri pe pagină:',
+        labelDisplayedRows: ({
+          from,
+          to,
+          count
+        }) => `${from}–${to} din ${count !== -1 ? count : `mai mult de ${to}`}`
       }
     },
     MuiRating: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/material",
-  "version": "7.1.2",
+  "version": "7.3.0",
   "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.",
   "main": "./index.js",
@@ -26,18 +26,18 @@
     "url": "https://opencollective.com/mui-org"
   },
   "dependencies": {
-    "@babel/runtime": "^7.27.1",
+    "@babel/runtime": "^7.28.2",
     "@popperjs/core": "^2.11.8",
     "@types/react-transition-group": "^4.4.12",
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "react-is": "^19.1.0",
+    "react-is": "^19.1.1",
     "react-transition-group": "^4.4.5",
-    "@mui/core-downloads-tracker": "^7.1.2",
-    "@mui/types": "^7.4.3",
-    "@mui/system": "^7.1.1",
-    "@mui/utils": "^7.1.1"
+    "@mui/system": "^7.3.0",
+    "@mui/types": "^7.4.5",
+    "@mui/utils": "^7.3.0",
+    "@mui/core-downloads-tracker": "^7.3.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",
@@ -45,7 +45,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.1.1"
+    "@mui/material-pigment-css": "^7.3.0"
   },
   "peerDependenciesMeta": {
     "@types/react": {
@@ -63,8 +63,7 @@
   },
   "sideEffects": false,
   "publishConfig": {
-    "access": "public",
-    "directory": "build"
+    "access": "public"
   },
   "engines": {
     "node": ">=14.0.0"
@@ -117,6 +116,5 @@
     }
   },
   "private": false,
-  "module": "./esm/index.js",
   "types": "./index.d.ts"
 }

package/styles/components.d.ts

@@ -2,6 +2,11 @@ import { ComponentsProps } from "./props.js";
 import { ComponentsOverrides } from "./overrides.js";
 import { ComponentsVariants } from "./variants.js";
 export interface Components<Theme = unknown> {
+  /**
+   * Whether to merge the className and style coming from the component props with the default props.
+   * @default false
+   */
+  mergeClassNameAndStyle?: boolean;
   MuiAlert?: {
     defaultProps?: ComponentsProps['MuiAlert'];
     styleOverrides?: ComponentsOverrides<Theme>['MuiAlert'];

package/styles/createColorScheme.d.ts

@@ -6,4 +6,6 @@ export declare function getOpacity(mode: 'light' | 'dark'): {
   switchTrack: number;
 };
 export declare function getOverlays(mode: 'light' | 'dark'): string[];
-export default function createColorScheme(options: ColorSystemOptions): ColorSystemOptions;
+export default function createColorScheme(options: ColorSystemOptions & {
+  colorSpace?: string;
+}): ColorSystemOptions;

package/styles/createColorScheme.js

@@ -35,9 +35,14 @@ function createColorScheme(options) {
     // need to cast to avoid module augmentation test
     opacity,
     overlays,
+    colorSpace,
     ...rest
   } = options;
-  const palette = (0, _createPalette.default)(paletteInput);
+  // need to cast because `colorSpace` is considered internal at the moment.
+  const palette = (0, _createPalette.default)({
+    ...paletteInput,
+    colorSpace
+  });
   return {
     palette,
     opacity: {

package/styles/createPalette.js

@@ -4,6 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.contrastColor = contrastColor;
 exports.dark = void 0;
 exports.default = createPalette;
 exports.light = void 0;
@@ -101,6 +102,19 @@ function addLightOrDark(intent, direction, shade, tonalOffset) {
     }
   }
 }
+function mixLightOrDark(colorSpace, intent, direction, shade, tonalOffset) {
+  const tonalOffsetLight = tonalOffset.light || tonalOffset;
+  const tonalOffsetDark = tonalOffset.dark || tonalOffset * 1.5;
+  if (!intent[direction]) {
+    if (intent.hasOwnProperty(shade)) {
+      intent[direction] = intent[shade];
+    } else if (direction === 'light') {
+      intent.light = `color-mix(in ${colorSpace}, ${intent.main}, #fff ${(tonalOffsetLight * 100).toFixed(0)}%)`;
+    } else if (direction === 'dark') {
+      intent.dark = `color-mix(in ${colorSpace}, ${intent.main}, #000 ${(tonalOffsetDark * 100).toFixed(0)}%)`;
+    }
+  }
+}
 function getDefaultPrimary(mode = 'light') {
   if (mode === 'dark') {
     return {
@@ -186,11 +200,17 @@ function getDefaultWarning(mode = 'light') {
     dark: _orange.default[900]
   };
 }
+
+// Use the same name as the experimental CSS `contrast-color` function.
+function contrastColor(background) {
+  return `oklch(from ${background} var(--__l) 0 h / var(--__a))`;
+}
 function createPalette(palette) {
   const {
     mode = 'light',
     contrastThreshold = 3,
     tonalOffset = 0.2,
+    colorSpace,
     ...other
   } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
@@ -204,6 +224,9 @@ function createPalette(palette) {
   // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
   // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
   function getContrastText(background) {
+    if (colorSpace) {
+      return contrastColor(background);
+    }
     const contrastText = (0, _colorManipulator.getContrastRatio)(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
     if (process.env.NODE_ENV !== 'production') {
       const contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);
@@ -232,8 +255,13 @@ function createPalette(palette) {
     if (typeof color.main !== 'string') {
       throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The color${name ? ` (${name})` : ''} provided to augmentColor(color) is invalid.\n` + `\`color.main\` should be a string, but \`${JSON.stringify(color.main)}\` was provided instead.\n` + '\n' + 'Did you intend to use one of the following approaches?\n' + '\n' + 'import { green } from "@mui/material/colors";\n' + '\n' + 'const theme1 = createTheme({ palette: {\n' + '  primary: green,\n' + '} });\n' + '\n' + 'const theme2 = createTheme({ palette: {\n' + '  primary: { main: green[500] },\n' + '} });' : (0, _formatMuiErrorMessage.default)(12, name ? ` (${name})` : '', JSON.stringify(color.main)));
     }
-    addLightOrDark(color, 'light', lightShade, tonalOffset);
-    addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    if (colorSpace) {
+      mixLightOrDark(colorSpace, color, 'light', lightShade, tonalOffset);
+      mixLightOrDark(colorSpace, color, 'dark', darkShade, tonalOffset);
+    } else {
+      addLightOrDark(color, 'light', lightShade, tonalOffset);
+      addLightOrDark(color, 'dark', darkShade, tonalOffset);
+    }
     if (!color.contrastText) {
       color.contrastText = getContrastText(color.main);
     }

package/styles/createTheme.d.ts

@@ -8,7 +8,7 @@ export type { ThemeOptions, Theme, CssThemeVariables } from "./createThemeNoVars
  * @returns A complete, ready-to-use theme object.
  */
 export default function createTheme(options?: Omit<ThemeOptions, 'components'> & Pick<CssVarsThemeOptions, 'defaultColorScheme' | 'colorSchemes' | 'components'> & {
-  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar'>;
+  cssVariables?: boolean | Pick<CssVarsThemeOptions, 'colorSchemeSelector' | 'rootSelector' | 'disableCssColorScheme' | 'cssVarPrefix' | 'shouldSkipGeneratingVar' | 'nativeColor'>;
 },
 // cast type to skip module augmentation test
 ...args: object[]): Theme;

package/styles/createThemeNoVars.d.ts

@@ -32,6 +32,7 @@ export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'>, CssVar
   zIndex?: ZIndexOptions;
   unstable_strictMode?: boolean;
   unstable_sxConfig?: SxConfig;
+  modularCssLayers?: boolean | string;
 }
 export interface BaseTheme extends SystemTheme {
   mixins: Mixins;
@@ -59,6 +60,9 @@ export interface Theme extends BaseTheme, CssVarsProperties {
   components?: Components<BaseTheme>;
   unstable_sx: (props: SxProps<Theme>) => CSSObject;
   unstable_sxConfig: SxConfig;
+  alpha: (color: string, value: number | string) => string;
+  lighten: (color: string, coefficient: number | string) => string;
+  darken: (color: string, coefficient: number | string) => string;
 }
 
 /**