@mui/material 7.2.0 → 7.3.0

package/styles/createThemeNoVars.js

@@ -10,6 +10,7 @@ var _formatMuiErrorMessage = _interopRequireDefault(require("@mui/utils/formatMu
 var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
 var _styleFunctionSx = _interopRequireWildcard(require("@mui/system/styleFunctionSx"));
 var _createTheme = _interopRequireDefault(require("@mui/system/createTheme"));
+var _colorManipulator = require("@mui/system/colorManipulator");
 var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
 var _createMixins = _interopRequireDefault(require("./createMixins"));
 var _createPalette = _interopRequireDefault(require("./createPalette"));
@@ -18,6 +19,58 @@ var _shadows = _interopRequireDefault(require("./shadows"));
 var _createTransitions = _interopRequireDefault(require("./createTransitions"));
 var _zIndex = _interopRequireDefault(require("./zIndex"));
 var _stringifyTheme = require("./stringifyTheme");
+function coefficientToPercentage(coefficient) {
+  if (typeof coefficient === 'number') {
+    return `${(coefficient * 100).toFixed(0)}%`;
+  }
+  return `calc((${coefficient}) * 100%)`;
+}
+
+// This can be removed when moved to `color-mix()` entirely.
+const parseAddition = str => {
+  if (!Number.isNaN(+str)) {
+    return +str;
+  }
+  const numbers = str.match(/\d*\.?\d+/g);
+  if (!numbers) {
+    return 0;
+  }
+  let sum = 0;
+  for (let i = 0; i < numbers.length; i += 1) {
+    sum += +numbers[i];
+  }
+  return sum;
+};
+function attachColorManipulators(theme) {
+  Object.assign(theme, {
+    alpha(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `oklch(from ${color} l c h / ${typeof coefficient === 'string' ? `calc(${coefficient})` : coefficient})`;
+      }
+      if (obj.vars) {
+        // To preserve the behavior of the CSS theme variables
+        // In the future, this could be replaced by `color-mix` (when https://caniuse.com/?search=color-mix reaches 95%).
+        return `rgba(${color.replace(/var\(--([^,\s)]+)(?:,[^)]+)?\)+/g, 'var(--$1Channel)')} / ${typeof coefficient === 'string' ? `calc(${coefficient})` : coefficient})`;
+      }
+      return (0, _colorManipulator.alpha)(color, parseAddition(coefficient));
+    },
+    lighten(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color}, #fff ${coefficientToPercentage(coefficient)})`;
+      }
+      return (0, _colorManipulator.lighten)(color, coefficient);
+    },
+    darken(color, coefficient) {
+      const obj = this || theme;
+      if (obj.colorSpace) {
+        return `color-mix(in ${obj.colorSpace}, ${color}, #000 ${coefficientToPercentage(coefficient)})`;
+      }
+      return (0, _colorManipulator.darken)(color, coefficient);
+    }
+  });
+}
 function createThemeNoVars(options = {}, ...args) {
   const {
     breakpoints: breakpointsInput,
@@ -27,6 +80,7 @@ function createThemeNoVars(options = {}, ...args) {
     transitions: transitionsInput = {},
     typography: typographyInput = {},
     shape: shapeInput,
+    colorSpace,
     ...other
   } = options;
   if (options.vars &&
@@ -37,7 +91,10 @@ function createThemeNoVars(options = {}, ...args) {
     // #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));
   }
-  const palette = (0, _createPalette.default)(paletteInput);
+  const palette = (0, _createPalette.default)({
+    ...paletteInput,
+    colorSpace
+  });
   const systemTheme = (0, _createTheme.default)(options);
   let muiTheme = (0, _deepmerge.default)(systemTheme, {
     mixins: (0, _createMixins.default)(systemTheme.breakpoints, mixinsInput),
@@ -94,6 +151,7 @@ function createThemeNoVars(options = {}, ...args) {
   };
   muiTheme.toRuntimeSource = _stringifyTheme.stringifyTheme; // for Pigment CSS integration
 
+  attachColorManipulators(muiTheme);
   return muiTheme;
 }
 var _default = exports.default = createThemeNoVars;

package/styles/createThemeWithVars.d.ts

@@ -266,6 +266,10 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * @default false
    */
   disableCssColorScheme?: boolean;
+  /**
+   * If `true`, the CSS relative color will be used.
+   */
+  nativeColor?: boolean;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.

package/styles/createThemeWithVars.js

@@ -19,6 +19,7 @@ var _createColorScheme = _interopRequireWildcard(require("./createColorScheme"))
 var _shouldSkipGeneratingVar = _interopRequireDefault(require("./shouldSkipGeneratingVar"));
 var _createGetSelector = _interopRequireDefault(require("./createGetSelector"));
 var _stringifyTheme = require("./stringifyTheme");
+var _createPalette = require("./createPalette");
 function assignNode(obj, keys) {
   keys.forEach(k => {
     if (!obj[k]) {
@@ -63,7 +64,7 @@ const silent = fn => {
 };
 const createGetCssVar = (cssVarPrefix = 'mui') => (0, _system.unstable_createGetCssVar)(cssVarPrefix);
 exports.createGetCssVar = createGetCssVar;
-function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
+function attachColorScheme(colorSpace, colorSchemes, scheme, restTheme, colorScheme) {
   if (!scheme) {
     return undefined;
   }
@@ -75,7 +76,8 @@ function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
       palette: {
         mode,
         ...scheme?.palette
-      }
+      },
+      colorSpace
     });
     return undefined;
   }
@@ -87,7 +89,8 @@ function attachColorScheme(colorSchemes, scheme, restTheme, colorScheme) {
     palette: {
       mode,
       ...scheme?.palette
-    }
+    },
+    colorSpace
   });
   colorSchemes[colorScheme] = {
     ...scheme,
@@ -117,6 +120,7 @@ function createThemeWithVars(options = {}, ...args) {
     defaultColorScheme: defaultColorSchemeInput,
     disableCssColorScheme = false,
     cssVarPrefix = 'mui',
+    nativeColor = false,
     shouldSkipGeneratingVar = _shouldSkipGeneratingVar.default,
     colorSchemeSelector: selector = colorSchemesInput.light && colorSchemesInput.dark ? 'media' : undefined,
     rootSelector = ':root',
@@ -144,13 +148,19 @@ function createThemeWithVars(options = {}, ...args) {
     throw new Error(process.env.NODE_ENV !== "production" ? `MUI: The \`colorSchemes.${defaultColorScheme}\` option is either missing or invalid.` : (0, _formatMuiErrorMessage.default)(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,
@@ -184,14 +194,30 @@ 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 === _colorManipulator.private_safeAlpha) {
+          mixer = `transparent ${((1 - coefficient) * 100).toFixed(0)}%`;
+        }
+        if (method === _colorManipulator.private_safeDarken) {
+          mixer = `#000 ${(coefficient * 100).toFixed(0)}%`;
+        }
+        if (method === _colorManipulator.private_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', (0, _colorManipulator.private_safeDarken)(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', (0, _colorManipulator.private_safeDarken)(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', (0, _colorManipulator.private_safeDarken)(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', (0, _colorManipulator.private_safeDarken)(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', colorMix(_colorManipulator.private_safeDarken, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(_colorManipulator.private_safeDarken, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(_colorManipulator.private_safeDarken, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(_colorManipulator.private_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'));
@@ -200,10 +226,10 @@ 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', (0, _colorManipulator.private_safeLighten)(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', (0, _colorManipulator.private_safeLighten)(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', (0, _colorManipulator.private_safeLighten)(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', (0, _colorManipulator.private_safeLighten)(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(_colorManipulator.private_safeLighten, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(_colorManipulator.private_safeLighten, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(_colorManipulator.private_safeLighten, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(_colorManipulator.private_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'));
@@ -218,41 +244,42 @@ 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', (0, _colorManipulator.private_safeLighten)(palette.primary.main, 0.62));
-      setColor(palette.LinearProgress, 'secondaryBg', (0, _colorManipulator.private_safeLighten)(palette.secondary.main, 0.62));
-      setColor(palette.LinearProgress, 'errorBg', (0, _colorManipulator.private_safeLighten)(palette.error.main, 0.62));
-      setColor(palette.LinearProgress, 'infoBg', (0, _colorManipulator.private_safeLighten)(palette.info.main, 0.62));
-      setColor(palette.LinearProgress, 'successBg', (0, _colorManipulator.private_safeLighten)(palette.success.main, 0.62));
-      setColor(palette.LinearProgress, 'warningBg', (0, _colorManipulator.private_safeLighten)(palette.warning.main, 0.62));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
-      setColor(palette.Slider, 'primaryTrack', (0, _colorManipulator.private_safeLighten)(palette.primary.main, 0.62));
-      setColor(palette.Slider, 'secondaryTrack', (0, _colorManipulator.private_safeLighten)(palette.secondary.main, 0.62));
-      setColor(palette.Slider, 'errorTrack', (0, _colorManipulator.private_safeLighten)(palette.error.main, 0.62));
-      setColor(palette.Slider, 'infoTrack', (0, _colorManipulator.private_safeLighten)(palette.info.main, 0.62));
-      setColor(palette.Slider, 'successTrack', (0, _colorManipulator.private_safeLighten)(palette.success.main, 0.62));
-      setColor(palette.Slider, 'warningTrack', (0, _colorManipulator.private_safeLighten)(palette.warning.main, 0.62));
-      const snackbarContentBackground = (0, _colorManipulator.private_safeEmphasize)(palette.background.default, 0.8);
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(_colorManipulator.private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(_colorManipulator.private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(_colorManipulator.private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(_colorManipulator.private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', colorMix(_colorManipulator.private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(_colorManipulator.private_safeLighten, palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(_colorManipulator.private_safeAlpha, palette.text.primary, 0.11) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.11)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(_colorManipulator.private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(_colorManipulator.private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', colorMix(_colorManipulator.private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', colorMix(_colorManipulator.private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', colorMix(_colorManipulator.private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', colorMix(_colorManipulator.private_safeLighten, palette.warning.main, 0.62));
+      const snackbarContentBackground = colorSpace ? colorMix(_colorManipulator.private_safeDarken, palette.background.default, 0.6825) // use `0.6825` instead of `0.8` to match the contrast ratio of JS implementation
+      : (0, _colorManipulator.private_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 ? _createPalette.dark.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _colorManipulator.private_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', (0, _colorManipulator.private_safeLighten)(palette.primary.main, 0.62));
-      setColor(palette.Switch, 'secondaryDisabledColor', (0, _colorManipulator.private_safeLighten)(palette.secondary.main, 0.62));
-      setColor(palette.Switch, 'errorDisabledColor', (0, _colorManipulator.private_safeLighten)(palette.error.main, 0.62));
-      setColor(palette.Switch, 'infoDisabledColor', (0, _colorManipulator.private_safeLighten)(palette.info.main, 0.62));
-      setColor(palette.Switch, 'successDisabledColor', (0, _colorManipulator.private_safeLighten)(palette.success.main, 0.62));
-      setColor(palette.Switch, 'warningDisabledColor', (0, _colorManipulator.private_safeLighten)(palette.warning.main, 0.62));
-      setColor(palette.TableCell, 'border', (0, _colorManipulator.private_safeLighten)((0, _colorManipulator.private_safeAlpha)(palette.divider, 1), 0.88));
-      setColor(palette.Tooltip, 'bg', (0, _colorManipulator.private_safeAlpha)(palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(_colorManipulator.private_safeLighten, palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', colorMix(_colorManipulator.private_safeLighten, colorMix(_colorManipulator.private_safeAlpha, palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', colorMix(_colorManipulator.private_safeAlpha, palette.grey[700], 0.92));
     }
     if (palette.mode === 'dark') {
-      setColor(palette.Alert, 'errorColor', (0, _colorManipulator.private_safeLighten)(palette.error.light, 0.6));
-      setColor(palette.Alert, 'infoColor', (0, _colorManipulator.private_safeLighten)(palette.info.light, 0.6));
-      setColor(palette.Alert, 'successColor', (0, _colorManipulator.private_safeLighten)(palette.success.light, 0.6));
-      setColor(palette.Alert, 'warningColor', (0, _colorManipulator.private_safeLighten)(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorColor', colorMix(_colorManipulator.private_safeLighten, palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', colorMix(_colorManipulator.private_safeLighten, palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', colorMix(_colorManipulator.private_safeLighten, palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', colorMix(_colorManipulator.private_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'));
@@ -261,10 +288,10 @@ 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', (0, _colorManipulator.private_safeDarken)(palette.error.light, 0.9));
-      setColor(palette.Alert, 'infoStandardBg', (0, _colorManipulator.private_safeDarken)(palette.info.light, 0.9));
-      setColor(palette.Alert, 'successStandardBg', (0, _colorManipulator.private_safeDarken)(palette.success.light, 0.9));
-      setColor(palette.Alert, 'warningStandardBg', (0, _colorManipulator.private_safeDarken)(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorStandardBg', colorMix(_colorManipulator.private_safeDarken, palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', colorMix(_colorManipulator.private_safeDarken, palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', colorMix(_colorManipulator.private_safeDarken, palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', colorMix(_colorManipulator.private_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'));
@@ -281,35 +308,36 @@ 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', (0, _colorManipulator.private_safeDarken)(palette.primary.main, 0.5));
-      setColor(palette.LinearProgress, 'secondaryBg', (0, _colorManipulator.private_safeDarken)(palette.secondary.main, 0.5));
-      setColor(palette.LinearProgress, 'errorBg', (0, _colorManipulator.private_safeDarken)(palette.error.main, 0.5));
-      setColor(palette.LinearProgress, 'infoBg', (0, _colorManipulator.private_safeDarken)(palette.info.main, 0.5));
-      setColor(palette.LinearProgress, 'successBg', (0, _colorManipulator.private_safeDarken)(palette.success.main, 0.5));
-      setColor(palette.LinearProgress, 'warningBg', (0, _colorManipulator.private_safeDarken)(palette.warning.main, 0.5));
-      setColor(palette.Skeleton, 'bg', `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
-      setColor(palette.Slider, 'primaryTrack', (0, _colorManipulator.private_safeDarken)(palette.primary.main, 0.5));
-      setColor(palette.Slider, 'secondaryTrack', (0, _colorManipulator.private_safeDarken)(palette.secondary.main, 0.5));
-      setColor(palette.Slider, 'errorTrack', (0, _colorManipulator.private_safeDarken)(palette.error.main, 0.5));
-      setColor(palette.Slider, 'infoTrack', (0, _colorManipulator.private_safeDarken)(palette.info.main, 0.5));
-      setColor(palette.Slider, 'successTrack', (0, _colorManipulator.private_safeDarken)(palette.success.main, 0.5));
-      setColor(palette.Slider, 'warningTrack', (0, _colorManipulator.private_safeDarken)(palette.warning.main, 0.5));
-      const snackbarContentBackground = (0, _colorManipulator.private_safeEmphasize)(palette.background.default, 0.98);
+      setColor(palette.LinearProgress, 'primaryBg', colorMix(_colorManipulator.private_safeDarken, palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', colorMix(_colorManipulator.private_safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', colorMix(_colorManipulator.private_safeDarken, palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', colorMix(_colorManipulator.private_safeDarken, palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', colorMix(_colorManipulator.private_safeDarken, palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', colorMix(_colorManipulator.private_safeDarken, palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', colorSpace ? colorMix(_colorManipulator.private_safeAlpha, palette.text.primary, 0.13) : `rgba(${setCssVarColor('palette-text-primaryChannel')} / 0.13)`);
+      setColor(palette.Slider, 'primaryTrack', colorMix(_colorManipulator.private_safeDarken, palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', colorMix(_colorManipulator.private_safeDarken, palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', colorMix(_colorManipulator.private_safeDarken, palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', colorMix(_colorManipulator.private_safeDarken, palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', colorMix(_colorManipulator.private_safeDarken, palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', colorMix(_colorManipulator.private_safeDarken, palette.warning.main, 0.5));
+      const snackbarContentBackground = colorSpace ? colorMix(_colorManipulator.private_safeLighten, palette.background.default, 0.985) // use `0.985` instead of `0.98` to match the contrast ratio of JS implementation
+      : (0, _colorManipulator.private_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 ? _createPalette.light.text.primary : palette.getContrastText(snackbarContentBackground)));
       setColor(palette.SpeedDialAction, 'fabHoverBg', (0, _colorManipulator.private_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', (0, _colorManipulator.private_safeDarken)(palette.primary.main, 0.55));
-      setColor(palette.Switch, 'secondaryDisabledColor', (0, _colorManipulator.private_safeDarken)(palette.secondary.main, 0.55));
-      setColor(palette.Switch, 'errorDisabledColor', (0, _colorManipulator.private_safeDarken)(palette.error.main, 0.55));
-      setColor(palette.Switch, 'infoDisabledColor', (0, _colorManipulator.private_safeDarken)(palette.info.main, 0.55));
-      setColor(palette.Switch, 'successDisabledColor', (0, _colorManipulator.private_safeDarken)(palette.success.main, 0.55));
-      setColor(palette.Switch, 'warningDisabledColor', (0, _colorManipulator.private_safeDarken)(palette.warning.main, 0.55));
-      setColor(palette.TableCell, 'border', (0, _colorManipulator.private_safeDarken)((0, _colorManipulator.private_safeAlpha)(palette.divider, 1), 0.68));
-      setColor(palette.Tooltip, 'bg', (0, _colorManipulator.private_safeAlpha)(palette.grey[700], 0.92));
+      setColor(palette.Switch, 'primaryDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', colorMix(_colorManipulator.private_safeDarken, palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', colorMix(_colorManipulator.private_safeDarken, colorMix(_colorManipulator.private_safeAlpha, palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', colorMix(_colorManipulator.private_safeAlpha, palette.grey[700], 0.92));
     }
 
     // MUI X - DataGrid needs this token.
@@ -361,7 +389,8 @@ function createThemeWithVars(options = {}, ...args) {
     prefix: cssVarPrefix,
     disableCssColorScheme,
     shouldSkipGeneratingVar,
-    getSelector: (0, _createGetSelector.default)(theme)
+    getSelector: (0, _createGetSelector.default)(theme),
+    enableContrastVars: nativeColor
   };
   const {
     vars,

package/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/useAutocomplete/useAutocomplete.js

@@ -14,6 +14,14 @@ var _useEventCallback = _interopRequireDefault(require("@mui/utils/useEventCallb
 var _useControlled = _interopRequireDefault(require("@mui/utils/useControlled"));
 var _useId = _interopRequireDefault(require("@mui/utils/useId"));
 var _usePreviousProps = _interopRequireDefault(require("@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) {
   return string.normalize('NFD').replace(/[\u0300-\u036f]/g, '');
@@ -375,13 +383,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 => {
@@ -477,8 +494,10 @@ function useAutocomplete(props) {
     }, [componentName]);
   }
   React.useEffect(() => {
-    syncHighlightedIndex();
-  }, [syncHighlightedIndex]);
+    if (filteredOptionsChanged) {
+      syncHighlightedIndex();
+    }
+  }, [syncHighlightedIndex, filteredOptionsChanged]);
   const handleOpen = event => {
     if (open) {
       return;

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.2.0";
+const version = exports.version = "7.3.0";
 const major = exports.major = Number("7");
-const minor = exports.minor = Number("2");
+const minor = exports.minor = Number("3");
 const patch = exports.patch = Number("0");
 const prerelease = exports.prerelease = undefined;
 var _default = exports.default = version;