@mui/system 6.4.3 → 6.4.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,51 @@
1
+ function noop() {}
2
+ const localStorageManager = ({
3
+ key,
4
+ storageWindow
5
+ }) => {
6
+ if (!storageWindow && typeof window !== 'undefined') {
7
+ storageWindow = window;
8
+ }
9
+ return {
10
+ get(defaultValue) {
11
+ if (typeof window === 'undefined') {
12
+ return undefined;
13
+ }
14
+ if (!storageWindow) {
15
+ return defaultValue;
16
+ }
17
+ let value;
18
+ try {
19
+ value = storageWindow.localStorage.getItem(key);
20
+ } catch {
21
+ // Unsupported
22
+ }
23
+ return value || defaultValue;
24
+ },
25
+ set: value => {
26
+ if (storageWindow) {
27
+ try {
28
+ storageWindow.localStorage.setItem(key, value);
29
+ } catch {
30
+ // Unsupported
31
+ }
32
+ }
33
+ },
34
+ subscribe: handler => {
35
+ if (!storageWindow) {
36
+ return noop;
37
+ }
38
+ const listener = event => {
39
+ const value = event.newValue;
40
+ if (event.key === key) {
41
+ handler(value);
42
+ }
43
+ };
44
+ storageWindow.addEventListener('storage', listener);
45
+ return () => {
46
+ storageWindow.removeEventListener('storage', listener);
47
+ };
48
+ }
49
+ };
50
+ };
51
+ export default localStorageManager;
@@ -2,6 +2,8 @@
2
2
 
3
3
  import * as React from 'react';
4
4
  import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
5
+ import localStorageManager from "./localStorageManager.js";
6
+ function noop() {}
5
7
  export function getSystemMode(mode) {
6
8
  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
7
9
  const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -32,22 +34,6 @@ export function getColorScheme(state) {
32
34
  return undefined;
33
35
  });
34
36
  }
35
- function initializeValue(key, defaultValue) {
36
- if (typeof window === 'undefined') {
37
- return undefined;
38
- }
39
- let value;
40
- try {
41
- value = localStorage.getItem(key) || undefined;
42
- if (!value) {
43
- // the first time that user enters the site.
44
- localStorage.setItem(key, defaultValue);
45
- }
46
- } catch {
47
- // Unsupported
48
- }
49
- return value || defaultValue;
50
- }
51
37
  export default function useCurrentColorScheme(options) {
52
38
  const {
53
39
  defaultMode = 'light',
@@ -57,14 +43,27 @@ export default function useCurrentColorScheme(options) {
57
43
  modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
58
44
  colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
59
45
  storageWindow = typeof window === 'undefined' ? undefined : window,
46
+ storageManager = localStorageManager,
60
47
  noSsr = false
61
48
  } = options;
62
49
  const joinedColorSchemes = supportedColorSchemes.join(',');
63
50
  const isMultiSchemes = supportedColorSchemes.length > 1;
51
+ const modeStorage = React.useMemo(() => storageManager?.({
52
+ key: modeStorageKey,
53
+ storageWindow
54
+ }), [storageManager, modeStorageKey, storageWindow]);
55
+ const lightStorage = React.useMemo(() => storageManager?.({
56
+ key: `${colorSchemeStorageKey}-light`,
57
+ storageWindow
58
+ }), [storageManager, colorSchemeStorageKey, storageWindow]);
59
+ const darkStorage = React.useMemo(() => storageManager?.({
60
+ key: `${colorSchemeStorageKey}-dark`,
61
+ storageWindow
62
+ }), [storageManager, colorSchemeStorageKey, storageWindow]);
64
63
  const [state, setState] = React.useState(() => {
65
- const initialMode = initializeValue(modeStorageKey, defaultMode);
66
- const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
67
- const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
64
+ const initialMode = modeStorage?.get(defaultMode) || defaultMode;
65
+ const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
66
+ const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
68
67
  return {
69
68
  mode: initialMode,
70
69
  systemMode: getSystemMode(initialMode),
@@ -84,27 +83,19 @@ export default function useCurrentColorScheme(options) {
84
83
  return currentState;
85
84
  }
86
85
  const newMode = mode ?? defaultMode;
87
- try {
88
- localStorage.setItem(modeStorageKey, newMode);
89
- } catch {
90
- // Unsupported
91
- }
86
+ modeStorage?.set(newMode);
92
87
  return {
93
88
  ...currentState,
94
89
  mode: newMode,
95
90
  systemMode: getSystemMode(newMode)
96
91
  };
97
92
  });
98
- }, [modeStorageKey, defaultMode]);
93
+ }, [modeStorage, defaultMode]);
99
94
  const setColorScheme = React.useCallback(value => {
100
95
  if (!value) {
101
96
  setState(currentState => {
102
- try {
103
- localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
104
- localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
105
- } catch {
106
- // Unsupported
107
- }
97
+ lightStorage?.set(defaultLightColorScheme);
98
+ darkStorage?.set(defaultDarkColorScheme);
108
99
  return {
109
100
  ...currentState,
110
101
  lightColorScheme: defaultLightColorScheme,
@@ -120,15 +111,12 @@ export default function useCurrentColorScheme(options) {
120
111
  ...currentState
121
112
  };
122
113
  processState(currentState, mode => {
123
- try {
124
- localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
125
- } catch {
126
- // Unsupported
127
- }
128
114
  if (mode === 'light') {
115
+ lightStorage?.set(value);
129
116
  newState.lightColorScheme = value;
130
117
  }
131
118
  if (mode === 'dark') {
119
+ darkStorage?.set(value);
132
120
  newState.darkColorScheme = value;
133
121
  }
134
122
  });
@@ -147,11 +135,7 @@ export default function useCurrentColorScheme(options) {
147
135
  console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
148
136
  } else {
149
137
  newState.lightColorScheme = newLightColorScheme;
150
- try {
151
- localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
152
- } catch (error) {
153
- // Unsupported
154
- }
138
+ lightStorage?.set(newLightColorScheme);
155
139
  }
156
140
  }
157
141
  if (newDarkColorScheme) {
@@ -159,17 +143,13 @@ export default function useCurrentColorScheme(options) {
159
143
  console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
160
144
  } else {
161
145
  newState.darkColorScheme = newDarkColorScheme;
162
- try {
163
- localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
164
- } catch (error) {
165
- // Unsupported
166
- }
146
+ darkStorage?.set(newDarkColorScheme);
167
147
  }
168
148
  }
169
149
  return newState;
170
150
  });
171
151
  }
172
- }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
152
+ }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
173
153
  const handleMediaQuery = React.useCallback(event => {
174
154
  if (state.mode === 'system') {
175
155
  setState(currentState => {
@@ -209,34 +189,34 @@ export default function useCurrentColorScheme(options) {
209
189
 
210
190
  // Handle when localStorage has changed
211
191
  React.useEffect(() => {
212
- if (storageWindow && isMultiSchemes) {
213
- const handleStorage = event => {
214
- const value = event.newValue;
215
- if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
216
- // If the key is deleted, value will be null then reset color scheme to the default one.
217
- if (event.key.endsWith('light')) {
218
- setColorScheme({
219
- light: value
220
- });
221
- }
222
- if (event.key.endsWith('dark')) {
223
- setColorScheme({
224
- dark: value
225
- });
226
- }
227
- }
228
- if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
192
+ if (isMultiSchemes) {
193
+ const unsubscribeMode = modeStorage?.subscribe(value => {
194
+ if (!value || ['light', 'dark', 'system'].includes(value)) {
229
195
  setMode(value || defaultMode);
230
196
  }
231
- };
232
- // For syncing color-scheme changes between iframes
233
- storageWindow.addEventListener('storage', handleStorage);
197
+ }) || noop;
198
+ const unsubscribeLight = lightStorage?.subscribe(value => {
199
+ if (!value || joinedColorSchemes.match(value)) {
200
+ setColorScheme({
201
+ light: value
202
+ });
203
+ }
204
+ }) || noop;
205
+ const unsubscribeDark = darkStorage?.subscribe(value => {
206
+ if (!value || joinedColorSchemes.match(value)) {
207
+ setColorScheme({
208
+ dark: value
209
+ });
210
+ }
211
+ }) || noop;
234
212
  return () => {
235
- storageWindow.removeEventListener('storage', handleStorage);
213
+ unsubscribeMode();
214
+ unsubscribeLight();
215
+ unsubscribeDark();
236
216
  };
237
217
  }
238
218
  return undefined;
239
- }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
219
+ }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
240
220
  return {
241
221
  ...state,
242
222
  mode: isClient ? state.mode : undefined,
@@ -1,6 +1,6 @@
1
- export const version = "6.4.3";
1
+ export const version = "6.4.7";
2
2
  export const major = Number("6");
3
3
  export const minor = Number("4");
4
- export const patch = Number("3");
4
+ export const patch = Number("7");
5
5
  export const prerelease = undefined;
6
6
  export default version;
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.4.3
2
+ * @mui/system v6.4.7
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -10,6 +10,7 @@ import useThemeSystem from "../useTheme/index.js";
10
10
  import { extendSxProp } from "../styleFunctionSx/index.js";
11
11
  import createTheme from "../createTheme/index.js";
12
12
  import { generateGridStyles, generateGridSizeStyles, generateGridColumnsStyles, generateGridColumnSpacingStyles, generateGridRowSpacingStyles, generateGridDirectionStyles, generateGridOffsetStyles, generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses } from "./gridGenerator.js";
13
+ import deleteLegacyGridProps from "./deleteLegacyGridProps.js";
13
14
  import { jsx as _jsx } from "react/jsx-runtime";
14
15
  const defaultTheme = createTheme();
15
16
 
@@ -75,6 +76,9 @@ export default function createGrid(options = {}) {
75
76
  const theme = useTheme();
76
77
  const themeProps = useThemeProps(inProps);
77
78
  const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
79
+
80
+ // TODO v8: Remove when removing the legacy Grid component
81
+ deleteLegacyGridProps(props, theme.breakpoints);
78
82
  const {
79
83
  className,
80
84
  children,
@@ -0,0 +1,41 @@
1
+ const getLegacyGridWarning = propName => {
2
+ if (['item', 'zeroMinWidth'].includes(propName)) {
3
+ return `The \`${propName}\` prop has been removed and is no longer necessary. You can safely remove it.`;
4
+ }
5
+
6
+ // #host-reference
7
+ return `The \`${propName}\` prop has been removed. See https://mui.com/material-ui/migration/upgrade-to-grid-v2/ for migration instructions.`;
8
+ };
9
+ const warnedAboutProps = [];
10
+
11
+ /**
12
+ * Deletes the legacy Grid component props from the `props` object and warns once about them if found.
13
+ *
14
+ * @param {object} props The props object to remove the legacy Grid props from.
15
+ * @param {Breakpoints} breakpoints The breakpoints object.
16
+ */
17
+ export default function deleteLegacyGridProps(props, breakpoints) {
18
+ const propsToWarn = [];
19
+ if (props.item !== undefined) {
20
+ delete props.item;
21
+ propsToWarn.push('item');
22
+ }
23
+ if (props.zeroMinWidth !== undefined) {
24
+ delete props.zeroMinWidth;
25
+ propsToWarn.push('zeroMinWidth');
26
+ }
27
+ breakpoints.keys.forEach(breakpoint => {
28
+ if (props[breakpoint] !== undefined) {
29
+ propsToWarn.push(breakpoint);
30
+ delete props[breakpoint];
31
+ }
32
+ });
33
+ if (process.env.NODE_ENV !== 'production') {
34
+ propsToWarn.forEach(prop => {
35
+ if (!warnedAboutProps.includes(prop)) {
36
+ warnedAboutProps.push(prop);
37
+ console.warn(`MUI Grid2: ${getLegacyGridWarning(prop)}\n`);
38
+ }
39
+ });
40
+ }
41
+ }
@@ -50,6 +50,7 @@ export default function createCssVarsProvider(options) {
50
50
  modeStorageKey = defaultModeStorageKey,
51
51
  colorSchemeStorageKey = defaultColorSchemeStorageKey,
52
52
  disableTransitionOnChange = designSystemTransitionOnChange,
53
+ storageManager,
53
54
  storageWindow = typeof window === 'undefined' ? undefined : window,
54
55
  documentNode = typeof document === 'undefined' ? undefined : document,
55
56
  colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
@@ -97,6 +98,7 @@ export default function createCssVarsProvider(options) {
97
98
  modeStorageKey,
98
99
  colorSchemeStorageKey,
99
100
  defaultMode,
101
+ storageManager,
100
102
  storageWindow,
101
103
  noSsr
102
104
  });
@@ -291,6 +293,11 @@ export default function createCssVarsProvider(options) {
291
293
  * You should use this option in conjuction with `InitColorSchemeScript` component.
292
294
  */
293
295
  noSsr: PropTypes.bool,
296
+ /**
297
+ * The storage manager to be used for storing the mode and color scheme
298
+ * @default using `window.localStorage`
299
+ */
300
+ storageManager: PropTypes.func,
294
301
  /**
295
302
  * The window that attaches the 'storage' event listener.
296
303
  * @default window
@@ -0,0 +1,51 @@
1
+ function noop() {}
2
+ const localStorageManager = ({
3
+ key,
4
+ storageWindow
5
+ }) => {
6
+ if (!storageWindow && typeof window !== 'undefined') {
7
+ storageWindow = window;
8
+ }
9
+ return {
10
+ get(defaultValue) {
11
+ if (typeof window === 'undefined') {
12
+ return undefined;
13
+ }
14
+ if (!storageWindow) {
15
+ return defaultValue;
16
+ }
17
+ let value;
18
+ try {
19
+ value = storageWindow.localStorage.getItem(key);
20
+ } catch {
21
+ // Unsupported
22
+ }
23
+ return value || defaultValue;
24
+ },
25
+ set: value => {
26
+ if (storageWindow) {
27
+ try {
28
+ storageWindow.localStorage.setItem(key, value);
29
+ } catch {
30
+ // Unsupported
31
+ }
32
+ }
33
+ },
34
+ subscribe: handler => {
35
+ if (!storageWindow) {
36
+ return noop;
37
+ }
38
+ const listener = event => {
39
+ const value = event.newValue;
40
+ if (event.key === key) {
41
+ handler(value);
42
+ }
43
+ };
44
+ storageWindow.addEventListener('storage', listener);
45
+ return () => {
46
+ storageWindow.removeEventListener('storage', listener);
47
+ };
48
+ }
49
+ };
50
+ };
51
+ export default localStorageManager;
@@ -2,6 +2,8 @@
2
2
 
3
3
  import * as React from 'react';
4
4
  import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
5
+ import localStorageManager from "./localStorageManager.js";
6
+ function noop() {}
5
7
  export function getSystemMode(mode) {
6
8
  if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
7
9
  const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -32,22 +34,6 @@ export function getColorScheme(state) {
32
34
  return undefined;
33
35
  });
34
36
  }
35
- function initializeValue(key, defaultValue) {
36
- if (typeof window === 'undefined') {
37
- return undefined;
38
- }
39
- let value;
40
- try {
41
- value = localStorage.getItem(key) || undefined;
42
- if (!value) {
43
- // the first time that user enters the site.
44
- localStorage.setItem(key, defaultValue);
45
- }
46
- } catch {
47
- // Unsupported
48
- }
49
- return value || defaultValue;
50
- }
51
37
  export default function useCurrentColorScheme(options) {
52
38
  const {
53
39
  defaultMode = 'light',
@@ -57,14 +43,27 @@ export default function useCurrentColorScheme(options) {
57
43
  modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
58
44
  colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
59
45
  storageWindow = typeof window === 'undefined' ? undefined : window,
46
+ storageManager = localStorageManager,
60
47
  noSsr = false
61
48
  } = options;
62
49
  const joinedColorSchemes = supportedColorSchemes.join(',');
63
50
  const isMultiSchemes = supportedColorSchemes.length > 1;
51
+ const modeStorage = React.useMemo(() => storageManager?.({
52
+ key: modeStorageKey,
53
+ storageWindow
54
+ }), [storageManager, modeStorageKey, storageWindow]);
55
+ const lightStorage = React.useMemo(() => storageManager?.({
56
+ key: `${colorSchemeStorageKey}-light`,
57
+ storageWindow
58
+ }), [storageManager, colorSchemeStorageKey, storageWindow]);
59
+ const darkStorage = React.useMemo(() => storageManager?.({
60
+ key: `${colorSchemeStorageKey}-dark`,
61
+ storageWindow
62
+ }), [storageManager, colorSchemeStorageKey, storageWindow]);
64
63
  const [state, setState] = React.useState(() => {
65
- const initialMode = initializeValue(modeStorageKey, defaultMode);
66
- const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
67
- const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
64
+ const initialMode = modeStorage?.get(defaultMode) || defaultMode;
65
+ const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
66
+ const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
68
67
  return {
69
68
  mode: initialMode,
70
69
  systemMode: getSystemMode(initialMode),
@@ -84,27 +83,19 @@ export default function useCurrentColorScheme(options) {
84
83
  return currentState;
85
84
  }
86
85
  const newMode = mode ?? defaultMode;
87
- try {
88
- localStorage.setItem(modeStorageKey, newMode);
89
- } catch {
90
- // Unsupported
91
- }
86
+ modeStorage?.set(newMode);
92
87
  return {
93
88
  ...currentState,
94
89
  mode: newMode,
95
90
  systemMode: getSystemMode(newMode)
96
91
  };
97
92
  });
98
- }, [modeStorageKey, defaultMode]);
93
+ }, [modeStorage, defaultMode]);
99
94
  const setColorScheme = React.useCallback(value => {
100
95
  if (!value) {
101
96
  setState(currentState => {
102
- try {
103
- localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
104
- localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
105
- } catch {
106
- // Unsupported
107
- }
97
+ lightStorage?.set(defaultLightColorScheme);
98
+ darkStorage?.set(defaultDarkColorScheme);
108
99
  return {
109
100
  ...currentState,
110
101
  lightColorScheme: defaultLightColorScheme,
@@ -120,15 +111,12 @@ export default function useCurrentColorScheme(options) {
120
111
  ...currentState
121
112
  };
122
113
  processState(currentState, mode => {
123
- try {
124
- localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
125
- } catch {
126
- // Unsupported
127
- }
128
114
  if (mode === 'light') {
115
+ lightStorage?.set(value);
129
116
  newState.lightColorScheme = value;
130
117
  }
131
118
  if (mode === 'dark') {
119
+ darkStorage?.set(value);
132
120
  newState.darkColorScheme = value;
133
121
  }
134
122
  });
@@ -147,11 +135,7 @@ export default function useCurrentColorScheme(options) {
147
135
  console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
148
136
  } else {
149
137
  newState.lightColorScheme = newLightColorScheme;
150
- try {
151
- localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
152
- } catch (error) {
153
- // Unsupported
154
- }
138
+ lightStorage?.set(newLightColorScheme);
155
139
  }
156
140
  }
157
141
  if (newDarkColorScheme) {
@@ -159,17 +143,13 @@ export default function useCurrentColorScheme(options) {
159
143
  console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
160
144
  } else {
161
145
  newState.darkColorScheme = newDarkColorScheme;
162
- try {
163
- localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
164
- } catch (error) {
165
- // Unsupported
166
- }
146
+ darkStorage?.set(newDarkColorScheme);
167
147
  }
168
148
  }
169
149
  return newState;
170
150
  });
171
151
  }
172
- }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
152
+ }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
173
153
  const handleMediaQuery = React.useCallback(event => {
174
154
  if (state.mode === 'system') {
175
155
  setState(currentState => {
@@ -209,34 +189,34 @@ export default function useCurrentColorScheme(options) {
209
189
 
210
190
  // Handle when localStorage has changed
211
191
  React.useEffect(() => {
212
- if (storageWindow && isMultiSchemes) {
213
- const handleStorage = event => {
214
- const value = event.newValue;
215
- if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
216
- // If the key is deleted, value will be null then reset color scheme to the default one.
217
- if (event.key.endsWith('light')) {
218
- setColorScheme({
219
- light: value
220
- });
221
- }
222
- if (event.key.endsWith('dark')) {
223
- setColorScheme({
224
- dark: value
225
- });
226
- }
227
- }
228
- if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
192
+ if (isMultiSchemes) {
193
+ const unsubscribeMode = modeStorage?.subscribe(value => {
194
+ if (!value || ['light', 'dark', 'system'].includes(value)) {
229
195
  setMode(value || defaultMode);
230
196
  }
231
- };
232
- // For syncing color-scheme changes between iframes
233
- storageWindow.addEventListener('storage', handleStorage);
197
+ }) || noop;
198
+ const unsubscribeLight = lightStorage?.subscribe(value => {
199
+ if (!value || joinedColorSchemes.match(value)) {
200
+ setColorScheme({
201
+ light: value
202
+ });
203
+ }
204
+ }) || noop;
205
+ const unsubscribeDark = darkStorage?.subscribe(value => {
206
+ if (!value || joinedColorSchemes.match(value)) {
207
+ setColorScheme({
208
+ dark: value
209
+ });
210
+ }
211
+ }) || noop;
234
212
  return () => {
235
- storageWindow.removeEventListener('storage', handleStorage);
213
+ unsubscribeMode();
214
+ unsubscribeLight();
215
+ unsubscribeDark();
236
216
  };
237
217
  }
238
218
  return undefined;
239
- }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
219
+ }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
240
220
  return {
241
221
  ...state,
242
222
  mode: isClient ? state.mode : undefined,
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.4.3
2
+ * @mui/system v6.4.7
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
@@ -1,6 +1,6 @@
1
- export const version = "6.4.3";
1
+ export const version = "6.4.7";
2
2
  export const major = Number("6");
3
3
  export const minor = Number("4");
4
- export const patch = Number("3");
4
+ export const patch = Number("7");
5
5
  export const prerelease = undefined;
6
6
  export default version;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/system",
3
- "version": "6.4.3",
3
+ "version": "6.4.7",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,9 +30,9 @@
30
30
  "clsx": "^2.1.1",
31
31
  "csstype": "^3.1.3",
32
32
  "prop-types": "^15.8.1",
33
- "@mui/styled-engine": "^6.4.3",
34
- "@mui/private-theming": "^6.4.3",
35
- "@mui/utils": "^6.4.3",
33
+ "@mui/private-theming": "^6.4.6",
34
+ "@mui/utils": "^6.4.6",
35
+ "@mui/styled-engine": "^6.4.6",
36
36
  "@mui/types": "^7.2.21"
37
37
  },
38
38
  "peerDependencies": {
package/version/index.js CHANGED
@@ -4,9 +4,9 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.version = exports.prerelease = exports.patch = exports.minor = exports.major = exports.default = void 0;
7
- const version = exports.version = "6.4.3";
7
+ const version = exports.version = "6.4.7";
8
8
  const major = exports.major = Number("6");
9
9
  const minor = exports.minor = Number("4");
10
- const patch = exports.patch = Number("3");
10
+ const patch = exports.patch = Number("7");
11
11
  const prerelease = exports.prerelease = undefined;
12
12
  var _default = exports.default = version;