@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.
- package/CHANGELOG.md +113 -0
- package/Grid/createGrid.js +4 -0
- package/Grid/deleteLegacyGridProps.d.ts +11 -0
- package/Grid/deleteLegacyGridProps.js +47 -0
- package/cssVars/createCssVarsProvider.d.ts +6 -0
- package/cssVars/createCssVarsProvider.js +7 -0
- package/cssVars/index.d.ts +1 -0
- package/cssVars/localStorageManager.d.ts +34 -0
- package/cssVars/localStorageManager.js +57 -0
- package/cssVars/useCurrentColorScheme.d.ts +2 -0
- package/cssVars/useCurrentColorScheme.js +50 -69
- package/esm/Grid/createGrid.js +4 -0
- package/esm/Grid/deleteLegacyGridProps.js +41 -0
- package/esm/cssVars/createCssVarsProvider.js +7 -0
- package/esm/cssVars/localStorageManager.js +51 -0
- package/esm/cssVars/useCurrentColorScheme.js +49 -69
- package/esm/version/index.js +2 -2
- package/index.js +1 -1
- package/modern/Grid/createGrid.js +4 -0
- package/modern/Grid/deleteLegacyGridProps.js +41 -0
- package/modern/cssVars/createCssVarsProvider.js +7 -0
- package/modern/cssVars/localStorageManager.js +51 -0
- package/modern/cssVars/useCurrentColorScheme.js +49 -69
- package/modern/index.js +1 -1
- package/modern/version/index.js +2 -2
- package/package.json +4 -4
- package/version/index.js +2 -2
|
@@ -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 =
|
|
66
|
-
const lightColorScheme =
|
|
67
|
-
const darkColorScheme =
|
|
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
|
-
|
|
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
|
-
}, [
|
|
93
|
+
}, [modeStorage, defaultMode]);
|
|
99
94
|
const setColorScheme = React.useCallback(value => {
|
|
100
95
|
if (!value) {
|
|
101
96
|
setState(currentState => {
|
|
102
|
-
|
|
103
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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 (
|
|
213
|
-
const
|
|
214
|
-
|
|
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
|
-
|
|
233
|
-
|
|
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
|
-
|
|
213
|
+
unsubscribeMode();
|
|
214
|
+
unsubscribeLight();
|
|
215
|
+
unsubscribeDark();
|
|
236
216
|
};
|
|
237
217
|
}
|
|
238
218
|
return undefined;
|
|
239
|
-
}, [setColorScheme, setMode,
|
|
219
|
+
}, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
|
|
240
220
|
return {
|
|
241
221
|
...state,
|
|
242
222
|
mode: isClient ? state.mode : undefined,
|
package/esm/version/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export const version = "6.4.
|
|
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("
|
|
4
|
+
export const patch = Number("7");
|
|
5
5
|
export const prerelease = undefined;
|
|
6
6
|
export default version;
|
package/index.js
CHANGED
|
@@ -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 =
|
|
66
|
-
const lightColorScheme =
|
|
67
|
-
const darkColorScheme =
|
|
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
|
-
|
|
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
|
-
}, [
|
|
93
|
+
}, [modeStorage, defaultMode]);
|
|
99
94
|
const setColorScheme = React.useCallback(value => {
|
|
100
95
|
if (!value) {
|
|
101
96
|
setState(currentState => {
|
|
102
|
-
|
|
103
|
-
|
|
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
|
-
|
|
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
|
-
|
|
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,
|
|
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 (
|
|
213
|
-
const
|
|
214
|
-
|
|
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
|
-
|
|
233
|
-
|
|
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
|
-
|
|
213
|
+
unsubscribeMode();
|
|
214
|
+
unsubscribeLight();
|
|
215
|
+
unsubscribeDark();
|
|
236
216
|
};
|
|
237
217
|
}
|
|
238
218
|
return undefined;
|
|
239
|
-
}, [setColorScheme, setMode,
|
|
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
package/modern/version/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
export const version = "6.4.
|
|
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("
|
|
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
|
+
"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/
|
|
34
|
-
"@mui/
|
|
35
|
-
"@mui/
|
|
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.
|
|
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("
|
|
10
|
+
const patch = exports.patch = Number("7");
|
|
11
11
|
const prerelease = exports.prerelease = undefined;
|
|
12
12
|
var _default = exports.default = version;
|