@mui/system 6.4.3 → 6.4.7

package/CHANGELOG.md

@@ -1,5 +1,118 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.7
+
+<!-- generated comparing v6.4.6..v6.x -->
+
+_Mar 5, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.7`
+
+- [ThemeProvider] Add `storageManager` prop to `ThemeProvider` (@siriwatknp) (#45437) @siriwatknp
+- [Rating] Deprecate \*Props and complete slots, slotProps (#45295) (#45398) @DiegoAndai
+- [Radio] Fix `inputProps` not forwarded (@siriwatknp) (#45475) @siriwatknp
+
+### Core
+
+- [blog] React 19 migration for MUI X (#45440) @arminmeh
+
+All contributors of this release in alphabetical order: @arminmeh, @DiegoAndai, @siriwatknp
+
+## 6.4.6
+
+<!-- generated comparing v6.4.5..v6.x -->
+
+_Feb 26, 2025_
+
+A big thanks to the 4 contributors who made this release possible.
+
+### `@mui/material@6.4.6`
+
+- [Checkbox] Add slots and slotProps (#45361) @siriwatknp
+- [Drawer] Deprecate *Props and complete `slots`, `slotProps` (#45377) @siriwatknp
+- [Grid] Improve Grid2 upgrade experience (#45372) @DiegoAndai
+- [InputBase] Deprecate composed classes (#45366) @siriwatknp
+- Fix `slotProps.transition` types (#45367) @siriwatknp
+- Allow nested theme creation with `vars` (#45368) @siriwatknp
+- Fix wrong slotProps of DetailsHTMLAttributes types (#45356) @siriwatknp
+- [Popover] Deprecate *Props and complete `slots`, `slotProps` (#45337) @siriwatknp
+- [Radio] Add slots and slotProps (#45364) @siriwatknp
+- [Slider] Fix css class selector in migration guide (#45409) @sai6855
+- [Slider] Fix spacings in .md files (#45393) @sai6855
+- [Snackbar] Add Slots and SlotProps (#45103) (#45352) @siriwatknp
+- [SpeedDialAction] Add slots and slotProps (#45365) @siriwatknp
+- [SwitchBase] Deprecate `inputProps` and complete slots, slotProps (#45338) @siriwatknp
+- [Tabs] Deprecate *Props and complete slots, slotProps (#45012) (#45355) @siriwatknp
+- [Menu] Deprecate *Props and complete `slots`, `slotProps`  (#45369) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Remove unnecessary renderTags prop from Sizes demo (#45403) @ZeeshanTamboli
+- Fix typo in slider docs (#45392) @sai6855
+
+### Core
+
+- [test] Remove unused renderTags prop and fix key warning in Autocomplete regression test (#45412) @ZeeshanTamboli
+
+All contributors of this release in alphabetical order: @DiegoAndai, @sai6855, @siriwatknp, @ZeeshanTamboli
+
+## 6.4.5
+
+<!-- generated comparing v6.4.4..v6.x -->
+
+_Feb 18, 2025_
+
+A big thanks to the 5 contributors who made this release possible.
+
+### `@mui/material@6.4.5`
+
+- [Autocomplete] Remove legacy `aria-owns` attribute for combobox (#45303) @ZeeshanTamboli
+- [Button] Apply id only if loading indicator is present (#45339) @aarongarciah
+
+### Docs
+
+- [icons] Fix typo in material-icons.md (#45336) @a-s-russo
+- [Menu] Add Grouped Menu demo (#45292) @noobDev31
+
+### Core
+
+- [blog] Consistent Base UI terminology (#45342) @aarongarciah
+- Fix double redirection to Base UI (#45146) @oliviertassinari
+
+All contributors of this release in alphabetical order: @a-s-russo, @aarongarciah, @noobDev31, @oliviertassinari, @ZeeshanTamboli
+
+## 6.4.4
+
+<!-- generated comparing v6.4.3..v6.x -->
+
+_Feb 11, 2025_
+
+A big thanks to the 3 contributors who made this release possible.
+
+### `@mui/material@6.4.4`
+
+- [MobileStepper] deprecate `LinearProgressProps` and complete `slots`, `slotProps` (@siriwatknp) (#45242) @siriwatknp
+- [Slider] Deprecate composed classes (@sai6855) (#45223) @sai6855
+- [utils] Merge `sx` instead of override when using `mergeSlotProps` (#45129) @siriwatknp
+
+### Docs
+
+- [Autocomplete] Improve Google Maps search example (#44708) @oliviertassinari
+- [Dialog] Removes deprecated PaperProps from docs (#45217) @sai6855
+- A quick first step to update docs for Tailwind v4 (#45221) @oliviertassinari
+
+### Core
+
+- Fix missing store contributor renaming (527222d) @oliviertassinari
+- Fix MUI Base vale rule (#45140) @oliviertassinari
+- Fix 404 errors (#45137) @oliviertassinari
+- [docs] Sync active sponsors (#45204) @oliviertassinari
+- [docs-infra] Move Ukraine banner to the bottom (#45135) @oliviertassinari
+
+All contributors of this release in alphabetical order: @oliviertassinari, @sai6855, @siriwatknp
+
 ## 6.4.3
 
 <!-- generated comparing v6.4.2..v6.x -->

package/Grid/createGrid.js

@@ -18,6 +18,7 @@ var _useTheme = _interopRequireDefault(require("../useTheme"));
 var _styleFunctionSx = require("../styleFunctionSx");
 var _createTheme = _interopRequireDefault(require("../createTheme"));
 var _gridGenerator = require("./gridGenerator");
+var _deleteLegacyGridProps = _interopRequireDefault(require("./deleteLegacyGridProps"));
 var _jsxRuntime = require("react/jsx-runtime");
 const defaultTheme = (0, _createTheme.default)();
 
@@ -83,6 +84,9 @@ function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
+
+    // TODO v8: Remove when removing the legacy Grid component
+    (0, _deleteLegacyGridProps.default)(props, theme.breakpoints);
     const {
       className,
       children,

package/Grid/deleteLegacyGridProps.d.ts

@@ -0,0 +1,11 @@
+import { Breakpoint, Breakpoints } from '../createTheme';
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+export default function deleteLegacyGridProps(props: {
+    item?: boolean;
+    zeroMinWidth?: boolean;
+} & Partial<Record<Breakpoint, 'auto' | number | boolean>> & Record<string, any>, breakpoints: Breakpoints): void;

package/Grid/deleteLegacyGridProps.js

@@ -0,0 +1,47 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = deleteLegacyGridProps;
+const getLegacyGridWarning = propName => {
+  if (['item', 'zeroMinWidth'].includes(propName)) {
+    return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
+  }
+
+  // #host-reference
+  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+};
+const warnedAboutProps = [];
+
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+function deleteLegacyGridProps(props, breakpoints) {
+  const propsToWarn = [];
+  if (props.item !== undefined) {
+    delete props.item;
+    propsToWarn.push('item');
+  }
+  if (props.zeroMinWidth !== undefined) {
+    delete props.zeroMinWidth;
+    propsToWarn.push('zeroMinWidth');
+  }
+  breakpoints.keys.forEach(breakpoint => {
+    if (props[breakpoint] !== undefined) {
+      propsToWarn.push(breakpoint);
+      delete props[breakpoint];
+    }
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    propsToWarn.forEach(prop => {
+      if (!warnedAboutProps.includes(prop)) {
+        warnedAboutProps.push(prop);
+        console.warn(`MUI Grid2: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/cssVars/createCssVarsProvider.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import InitColorSchemeScript from '../InitColorSchemeScript';
 import { Result } from './useCurrentColorScheme';
+import type { StorageManager } from './localStorageManager';
 
 export interface ColorSchemeContextValue<SupportedColorScheme extends string>
   extends Result<SupportedColorScheme> {
@@ -70,6 +71,11 @@ export interface CreateCssVarsProviderResult<
          * @default document
          */
         colorSchemeNode?: Element | null;
+        /**
+         * The storage manager to be used for storing the mode and color scheme.
+         * @default using `window.localStorage`
+         */
+        storageManager?: StorageManager | null;
         /**
          * The window that attaches the 'storage' event listener
          * @default window

package/cssVars/createCssVarsProvider.js

@@ -58,6 +58,7 @@ function createCssVarsProvider(options) {
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       disableTransitionOnChange = designSystemTransitionOnChange,
+      storageManager,
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -105,6 +106,7 @@ function createCssVarsProvider(options) {
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
+      storageManager,
       storageWindow,
       noSsr
     });
@@ -299,6 +301,11 @@ function createCssVarsProvider(options) {
      * You should use this option in conjuction with `InitColorSchemeScript` component.
      */
     noSsr: _propTypes.default.bool,
+    /**
+     * The storage manager to be used for storing the mode and color scheme
+     * @default using `window.localStorage`
+     */
+    storageManager: _propTypes.default.func,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window

package/cssVars/index.d.ts

@@ -5,3 +5,4 @@ export { default as prepareTypographyVars } from './prepareTypographyVars';
 export type { ExtractTypographyTokens } from './prepareTypographyVars';
 export { default as createCssVarsTheme } from './createCssVarsTheme';
 export { createGetColorSchemeSelector } from './getColorSchemeSelector';
+export type { StorageManager } from './localStorageManager';

package/cssVars/localStorageManager.d.ts

@@ -0,0 +1,34 @@
+export interface StorageManager {
+    (options: {
+        key: string;
+        storageWindow?: Window | null;
+    }): {
+        /**
+         * Function to get the value from the storage
+         * @param defaultValue The default value to be returned if the key is not found
+         * @returns The value from the storage or the default value
+         */
+        get(defaultValue: any): any;
+        /**
+         * Function to set the value in the storage
+         * @param value The value to be set
+         * @returns void
+         */
+        set(value: any): void;
+        /**
+         * Function to subscribe to the value of the specified key triggered by external events
+         * @param handler The function to be called when the value changes
+         * @returns A function to unsubscribe the handler
+         * @example
+         * React.useEffect(() => {
+         *  const unsubscribe = storageManager.subscribe((value) => {
+         *    console.log(value);
+         *  });
+         *  return unsubscribe;
+         * }, []);
+         */
+        subscribe(handler: (value: any) => void): () => void;
+    };
+}
+declare const localStorageManager: StorageManager;
+export default localStorageManager;

package/cssVars/localStorageManager.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+function noop() {}
+const localStorageManager = ({
+  key,
+  storageWindow
+}) => {
+  if (!storageWindow && typeof window !== 'undefined') {
+    storageWindow = window;
+  }
+  return {
+    get(defaultValue) {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+      if (!storageWindow) {
+        return defaultValue;
+      }
+      let value;
+      try {
+        value = storageWindow.localStorage.getItem(key);
+      } catch {
+        // Unsupported
+      }
+      return value || defaultValue;
+    },
+    set: value => {
+      if (storageWindow) {
+        try {
+          storageWindow.localStorage.setItem(key, value);
+        } catch {
+          // Unsupported
+        }
+      }
+    },
+    subscribe: handler => {
+      if (!storageWindow) {
+        return noop;
+      }
+      const listener = event => {
+        const value = event.newValue;
+        if (event.key === key) {
+          handler(value);
+        }
+      };
+      storageWindow.addEventListener('storage', listener);
+      return () => {
+        storageWindow.removeEventListener('storage', listener);
+      };
+    }
+  };
+};
+var _default = exports.default = localStorageManager;

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,3 +1,4 @@
+import type { StorageManager } from './localStorageManager';
 export type Mode = 'light' | 'dark' | 'system';
 export type SystemMode = Exclude<Mode, 'system'>;
 export interface State<SupportedColorScheme extends string> {
@@ -48,6 +49,7 @@ interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
     modeStorageKey?: string;
     colorSchemeStorageKey?: string;
     storageWindow?: Window | null;
+    storageManager?: StorageManager | null;
     noSsr?: boolean;
 }
 export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;

package/cssVars/useCurrentColorScheme.js

@@ -1,6 +1,7 @@
 "use strict";
 'use client';
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,6 +11,8 @@ exports.getColorScheme = getColorScheme;
 exports.getSystemMode = getSystemMode;
 var React = _interopRequireWildcard(require("react"));
 var _InitColorSchemeScript = require("../InitColorSchemeScript/InitColorSchemeScript");
+var _localStorageManager = _interopRequireDefault(require("./localStorageManager"));
+function noop() {}
 function getSystemMode(mode) {
   if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -40,22 +43,6 @@ function getColorScheme(state) {
     return undefined;
   });
 }
-function initializeValue(key, defaultValue) {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-  let value;
-  try {
-    value = localStorage.getItem(key) || undefined;
-    if (!value) {
-      // the first time that user enters the site.
-      localStorage.setItem(key, defaultValue);
-    }
-  } catch {
-    // Unsupported
-  }
-  return value || defaultValue;
-}
 function useCurrentColorScheme(options) {
   const {
     defaultMode = 'light',
@@ -65,14 +52,27 @@ function useCurrentColorScheme(options) {
     modeStorageKey = _InitColorSchemeScript.DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = _InitColorSchemeScript.DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window,
+    storageManager = _localStorageManager.default,
     noSsr = false
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const isMultiSchemes = supportedColorSchemes.length > 1;
+  const modeStorage = React.useMemo(() => storageManager?.({
+    key: modeStorageKey,
+    storageWindow
+  }), [storageManager, modeStorageKey, storageWindow]);
+  const lightStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-light`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
+  const darkStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-dark`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
   const [state, setState] = React.useState(() => {
-    const initialMode = initializeValue(modeStorageKey, defaultMode);
-    const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
-    const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+    const initialMode = modeStorage?.get(defaultMode) || defaultMode;
+    const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
+    const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
@@ -92,27 +92,19 @@ function useCurrentColorScheme(options) {
         return currentState;
       }
       const newMode = mode ?? defaultMode;
-      try {
-        localStorage.setItem(modeStorageKey, newMode);
-      } catch {
-        // Unsupported
-      }
+      modeStorage?.set(newMode);
       return {
         ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
       };
     });
-  }, [modeStorageKey, defaultMode]);
+  }, [modeStorage, defaultMode]);
   const setColorScheme = React.useCallback(value => {
     if (!value) {
       setState(currentState => {
-        try {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch {
-          // Unsupported
-        }
+        lightStorage?.set(defaultLightColorScheme);
+        darkStorage?.set(defaultDarkColorScheme);
         return {
           ...currentState,
           lightColorScheme: defaultLightColorScheme,
@@ -128,15 +120,12 @@ function useCurrentColorScheme(options) {
             ...currentState
           };
           processState(currentState, mode => {
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch {
-              // Unsupported
-            }
             if (mode === 'light') {
+              lightStorage?.set(value);
               newState.lightColorScheme = value;
             }
             if (mode === 'dark') {
+              darkStorage?.set(value);
               newState.darkColorScheme = value;
             }
           });
@@ -155,11 +144,7 @@ function useCurrentColorScheme(options) {
             console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
           } else {
             newState.lightColorScheme = newLightColorScheme;
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
+            lightStorage?.set(newLightColorScheme);
           }
         }
         if (newDarkColorScheme) {
@@ -167,17 +152,13 @@ function useCurrentColorScheme(options) {
             console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
           } else {
             newState.darkColorScheme = newDarkColorScheme;
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
+            darkStorage?.set(newDarkColorScheme);
           }
         }
         return newState;
       });
     }
-  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
+  }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
       setState(currentState => {
@@ -217,34 +198,34 @@ function useCurrentColorScheme(options) {
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow && isMultiSchemes) {
-      const handleStorage = event => {
-        const value = event.newValue;
-        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-          // If the key is deleted, value will be null then reset color scheme to the default one.
-          if (event.key.endsWith('light')) {
-            setColorScheme({
-              light: value
-            });
-          }
-          if (event.key.endsWith('dark')) {
-            setColorScheme({
-              dark: value
-            });
-          }
-        }
-        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+    if (isMultiSchemes) {
+      const unsubscribeMode = modeStorage?.subscribe(value => {
+        if (!value || ['light', 'dark', 'system'].includes(value)) {
           setMode(value || defaultMode);
         }
-      };
-      // For syncing color-scheme changes between iframes
-      storageWindow.addEventListener('storage', handleStorage);
+      }) || noop;
+      const unsubscribeLight = lightStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            light: value
+          });
+        }
+      }) || noop;
+      const unsubscribeDark = darkStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            dark: value
+          });
+        }
+      }) || noop;
       return () => {
-        storageWindow.removeEventListener('storage', handleStorage);
+        unsubscribeMode();
+        unsubscribeLight();
+        unsubscribeDark();
       };
     }
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
+  }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
   return {
     ...state,
     mode: isClient ? state.mode : undefined,

package/esm/Grid/createGrid.js

@@ -10,6 +10,7 @@ import useThemeSystem from "../useTheme/index.js";
 import { extendSxProp } from "../styleFunctionSx/index.js";
 import createTheme from "../createTheme/index.js";
 import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
+import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 const defaultTheme = createTheme();
 
@@ -75,6 +76,9 @@ export default function createGrid(options = {}) {
     const theme = useTheme();
     const themeProps = useThemeProps(inProps);
     const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
+
+    // TODO v8: Remove when removing the legacy Grid component
+    deleteLegacyGridProps(props, theme.breakpoints);
     const {
       className,
       children,

package/esm/Grid/deleteLegacyGridProps.js

@@ -0,0 +1,41 @@
+const getLegacyGridWarning = propName => {
+  if (['item', 'zeroMinWidth'].includes(propName)) {
+    return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
+  }
+
+  // #host-reference
+  return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
+};
+const warnedAboutProps = [];
+
+/**
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
+ *
+ * @param {object} props The props object to remove the legacy Grid props from.
+ * @param {Breakpoints} breakpoints The breakpoints object.
+ */
+export default function deleteLegacyGridProps(props, breakpoints) {
+  const propsToWarn = [];
+  if (props.item !== undefined) {
+    delete props.item;
+    propsToWarn.push('item');
+  }
+  if (props.zeroMinWidth !== undefined) {
+    delete props.zeroMinWidth;
+    propsToWarn.push('zeroMinWidth');
+  }
+  breakpoints.keys.forEach(breakpoint => {
+    if (props[breakpoint] !== undefined) {
+      propsToWarn.push(breakpoint);
+      delete props[breakpoint];
+    }
+  });
+  if (process.env.NODE_ENV !== 'production') {
+    propsToWarn.forEach(prop => {
+      if (!warnedAboutProps.includes(prop)) {
+        warnedAboutProps.push(prop);
+        console.warn(`MUI Grid2: ${getLegacyGridWarning(prop)}\n`);
+      }
+    });
+  }
+}

package/esm/cssVars/createCssVarsProvider.js

@@ -50,6 +50,7 @@ export default function createCssVarsProvider(options) {
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       disableTransitionOnChange = designSystemTransitionOnChange,
+      storageManager,
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -97,6 +98,7 @@ export default function createCssVarsProvider(options) {
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
+      storageManager,
       storageWindow,
       noSsr
     });
@@ -291,6 +293,11 @@ export default function createCssVarsProvider(options) {
      * You should use this option in conjuction with `InitColorSchemeScript` component.
      */
     noSsr: PropTypes.bool,
+    /**
+     * The storage manager to be used for storing the mode and color scheme
+     * @default using `window.localStorage`
+     */
+    storageManager: PropTypes.func,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window