@mui/system 5.5.0 → 5.5.1
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/Box/Box.spec.d.ts +1 -1
- package/CHANGELOG.md +65 -0
- package/createBox.spec.d.ts +1 -1
- package/createTheme/createSpacing.d.ts +10 -10
- package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +70 -70
- package/cssVars/getInitColorSchemeScript.d.ts +12 -12
- package/cssVars/index.d.ts +1 -1
- package/cssVars/useCurrentColorScheme.d.ts +50 -50
- package/index.js +1 -1
- package/index.spec.d.ts +1 -1
- package/legacy/index.js +1 -1
- package/modern/index.js +1 -1
- package/package.json +2 -2
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
package/Box/Box.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,70 @@
|
|
|
1
1
|
# [Versions](https://mui.com/versions/)
|
|
2
2
|
|
|
3
|
+
## 5.5.1
|
|
4
|
+
|
|
5
|
+
<!-- generated comparing v5.5.0..master -->
|
|
6
|
+
|
|
7
|
+
_Mar 14, 2022_
|
|
8
|
+
|
|
9
|
+
A big thanks to the 23 contributors who made this release possible. Here are some highlights ✨:
|
|
10
|
+
|
|
11
|
+
- 📊 2021 survey results post by @danilo-leal (#30999)
|
|
12
|
+
- Several 🐛 bug fixes and 📚 documentation improvements
|
|
13
|
+
|
|
14
|
+
### @mui/material@5.5.1
|
|
15
|
+
|
|
16
|
+
- [Fab] Add z-index (#30842) @issamElmohadeb098
|
|
17
|
+
- [Grid] Fix columns of nested container (#31340) @boutahlilsoufiane
|
|
18
|
+
- [i10n] Update italian locale (#30974) @SalvatoreMazzullo
|
|
19
|
+
- [Pagination] Fix type of UsePaginationItem["page"] (#31295) @aaronadamsCA
|
|
20
|
+
- [Popper] Allow setting default props in a theme (#30118) @hafley66
|
|
21
|
+
- [TextField] fix disappearing border in Safari (#31406) @krysia1
|
|
22
|
+
|
|
23
|
+
### @mui/joy@5.0.0-alpha.19
|
|
24
|
+
|
|
25
|
+
- [Joy] Support horizontal List (#31620) @siriwatknp
|
|
26
|
+
- [Joy] Add icon & label `Switch` examples (#31359) @siriwatknp
|
|
27
|
+
- [Joy] Add `TextField` component (#31299) @siriwatknp
|
|
28
|
+
- [Joy] Add `--Icon-fontSize` to components (#31360) @siriwatknp
|
|
29
|
+
- [Joy] Add `Checkbox` component (#31273) @siriwatknp
|
|
30
|
+
|
|
31
|
+
### Docs
|
|
32
|
+
|
|
33
|
+
- [blog] 2021 survey results post (#30999) @danilo-leal
|
|
34
|
+
- [docs] Add Macedonian translation (#31402) @theCuriousOne
|
|
35
|
+
- [docs] Fix API page table styles in Safari (#31696) @aaarichter
|
|
36
|
+
- [docs] Fix SEO issues (#31505) @oliviertassinari
|
|
37
|
+
- [docs] Fix Link leak of Next.js props (#31418) @oliviertassinari
|
|
38
|
+
- [docs] Add "Work in biotech" to showcase (#31711) @klyburke
|
|
39
|
+
- [docs] Fix docs site crash on iOS Safari 12 (#31458) @badalsaibo
|
|
40
|
+
- [docs] Fix search icons crash (#31651) @juanpc10
|
|
41
|
+
- [docs] Remove unnecessary await in e2e-tests (#31767) @siriwatknp
|
|
42
|
+
- [docs] Fix source code links on the Templates page (#31425) @danilo-leal
|
|
43
|
+
- [docs] Adjust Stack's basic usage demo (#31423) @danilo-leal
|
|
44
|
+
- [docs] Migrate button demos to base (#31395) @siriwatknp
|
|
45
|
+
- [docs] Fix y-axis unit used in the responsive font sizes chart (#31424) @aaarichter
|
|
46
|
+
- [docs] Remove joy mockup pages (#31412) @siriwatknp
|
|
47
|
+
- [docs] Fix the statement that styleOverrides are added by default (#31257) @mnajdova
|
|
48
|
+
- [docs] Refine the product identifier menu (#31262) @danilo-leal
|
|
49
|
+
- [docs] Fix Search crash (#31386) @reckter
|
|
50
|
+
- [docs] Update TextField multiline description (#31291) @jontewks
|
|
51
|
+
- [docs] Add gap theme mapping in the System properties table (#31382) @danilo-leal
|
|
52
|
+
- [docs] Test products search (#31351) @siriwatknp
|
|
53
|
+
- [docs] Fix GitHub source links in the demo toolbar (#31339) @PunitSoniME
|
|
54
|
+
- [docs] Add Algolia verification code to robot.txt (#31356) @siriwatknp
|
|
55
|
+
- [examples] Ignore tsbuildinfo with Next.js (#31460) @B0und
|
|
56
|
+
- [website] Add new gold sponsor (#31354) @hbjORbj
|
|
57
|
+
- [website] Update Ukraine support link (#31378) @samuelsycamore
|
|
58
|
+
|
|
59
|
+
### Core
|
|
60
|
+
|
|
61
|
+
- [core] Simplify anchor link (#31419) @oliviertassinari
|
|
62
|
+
- [core] Revert unrelated changes in #31354 @oliviertassinari
|
|
63
|
+
- [test] Upgrade CircleCI convenience image (#31394) @m4theushw
|
|
64
|
+
- [typescript] Simplify display of slot props types (#31240) @michaldudak
|
|
65
|
+
|
|
66
|
+
All contributors of this release in alphabetical order: @aaarichter, @aaronadamsCA, @B0und, @badalsaibo, @boutahlilsoufiane, @danilo-leal, @hafley66, @hbjORbj, @issamElmohadeb098, @jontewks, @juanpc10, @klyburke, @krysia1, @m4theushw, @michaldudak, @mnajdova, @oliviertassinari, @PunitSoniME, @reckter, @SalvatoreMazzullo, @samuelsycamore, @siriwatknp, @theCuriousOne
|
|
67
|
+
|
|
3
68
|
## 5.5.0
|
|
4
69
|
|
|
5
70
|
<!-- generated comparing v5.4.4..master -->
|
package/createBox.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
|
|
2
|
-
export declare type SpacingArgument = number | string;
|
|
3
|
-
export interface Spacing {
|
|
4
|
-
(): string;
|
|
5
|
-
(value: number): string;
|
|
6
|
-
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
|
|
7
|
-
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
|
|
8
|
-
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
|
|
9
|
-
}
|
|
10
|
-
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
|
|
1
|
+
export declare type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
|
|
2
|
+
export declare type SpacingArgument = number | string;
|
|
3
|
+
export interface Spacing {
|
|
4
|
+
(): string;
|
|
5
|
+
(value: number): string;
|
|
6
|
+
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
|
|
7
|
+
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
|
|
8
|
+
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
|
|
9
|
+
}
|
|
10
|
+
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
|
|
3
|
-
* and they does not need to remember the prefix (defined once).
|
|
4
|
-
*/
|
|
5
|
-
export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;
|
|
1
|
+
/**
|
|
2
|
+
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
|
|
3
|
+
* and they does not need to remember the prefix (defined once).
|
|
4
|
+
*/
|
|
5
|
+
export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...vars: (T | AdditionalVars)[]) => string;
|
|
@@ -1,70 +1,70 @@
|
|
|
1
|
-
declare type NestedRecord<V = any> = {
|
|
2
|
-
[k: string | number]: NestedRecord<V> | V;
|
|
3
|
-
};
|
|
4
|
-
/**
|
|
5
|
-
* This function create an object from keys, value and then assign to target
|
|
6
|
-
*
|
|
7
|
-
* @param {Object} obj : the target object to be assigned
|
|
8
|
-
* @param {string[]} keys
|
|
9
|
-
* @param {string | number} value
|
|
10
|
-
*
|
|
11
|
-
* @example
|
|
12
|
-
* const source = {}
|
|
13
|
-
* assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
|
|
14
|
-
* console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
|
|
15
|
-
*
|
|
16
|
-
* @example
|
|
17
|
-
* const source = { palette: { primary: 'var(--palette-primary)' } }
|
|
18
|
-
* assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
|
|
19
|
-
* console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
|
|
20
|
-
*/
|
|
21
|
-
export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
|
|
22
|
-
/**
|
|
23
|
-
*
|
|
24
|
-
* @param {Object} obj : source object
|
|
25
|
-
* @param {Function} callback : a function that will be called when
|
|
26
|
-
* - the deepest key in source object is reached
|
|
27
|
-
* - the value of the deepest key is NOT `undefined` | `null`
|
|
28
|
-
*
|
|
29
|
-
* @example
|
|
30
|
-
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
|
|
31
|
-
* // ['palette', 'primary', 'main'] '#000000'
|
|
32
|
-
*/
|
|
33
|
-
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
|
|
34
|
-
/**
|
|
35
|
-
* a function that parse theme and return { css, vars }
|
|
36
|
-
*
|
|
37
|
-
* @param {Object} theme
|
|
38
|
-
* @param {{
|
|
39
|
-
* prefix?: string,
|
|
40
|
-
* basePrefix?: string,
|
|
41
|
-
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
42
|
-
* }} options.
|
|
43
|
-
* `basePrefix`: defined by design system.
|
|
44
|
-
* `prefix`: defined by application
|
|
45
|
-
*
|
|
46
|
-
* the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
|
|
47
|
-
*
|
|
48
|
-
* @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
|
|
49
|
-
*
|
|
50
|
-
* @example
|
|
51
|
-
* const { css, vars, parsedTheme } = parser({
|
|
52
|
-
* fontSize: 12,
|
|
53
|
-
* lineHeight: 1.2,
|
|
54
|
-
* palette: { primary: { 500: 'var(--color)' } }
|
|
55
|
-
* }, { prefix: 'foo' })
|
|
56
|
-
*
|
|
57
|
-
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
|
|
58
|
-
* console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
|
59
|
-
* console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
|
|
60
|
-
*/
|
|
61
|
-
export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
|
|
62
|
-
prefix?: string;
|
|
63
|
-
basePrefix?: string;
|
|
64
|
-
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
65
|
-
}): {
|
|
66
|
-
css: NestedRecord<string>;
|
|
67
|
-
vars: NestedRecord<string>;
|
|
68
|
-
parsedTheme: T;
|
|
69
|
-
};
|
|
70
|
-
export {};
|
|
1
|
+
declare type NestedRecord<V = any> = {
|
|
2
|
+
[k: string | number]: NestedRecord<V> | V;
|
|
3
|
+
};
|
|
4
|
+
/**
|
|
5
|
+
* This function create an object from keys, value and then assign to target
|
|
6
|
+
*
|
|
7
|
+
* @param {Object} obj : the target object to be assigned
|
|
8
|
+
* @param {string[]} keys
|
|
9
|
+
* @param {string | number} value
|
|
10
|
+
*
|
|
11
|
+
* @example
|
|
12
|
+
* const source = {}
|
|
13
|
+
* assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
|
|
14
|
+
* console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* const source = { palette: { primary: 'var(--palette-primary)' } }
|
|
18
|
+
* assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
|
|
19
|
+
* console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
|
|
20
|
+
*/
|
|
21
|
+
export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
|
|
22
|
+
/**
|
|
23
|
+
*
|
|
24
|
+
* @param {Object} obj : source object
|
|
25
|
+
* @param {Function} callback : a function that will be called when
|
|
26
|
+
* - the deepest key in source object is reached
|
|
27
|
+
* - the value of the deepest key is NOT `undefined` | `null`
|
|
28
|
+
*
|
|
29
|
+
* @example
|
|
30
|
+
* walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
|
|
31
|
+
* // ['palette', 'primary', 'main'] '#000000'
|
|
32
|
+
*/
|
|
33
|
+
export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
|
|
34
|
+
/**
|
|
35
|
+
* a function that parse theme and return { css, vars }
|
|
36
|
+
*
|
|
37
|
+
* @param {Object} theme
|
|
38
|
+
* @param {{
|
|
39
|
+
* prefix?: string,
|
|
40
|
+
* basePrefix?: string,
|
|
41
|
+
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
42
|
+
* }} options.
|
|
43
|
+
* `basePrefix`: defined by design system.
|
|
44
|
+
* `prefix`: defined by application
|
|
45
|
+
*
|
|
46
|
+
* the CSS variable value will be adjusted based on the provided `basePrefix` & `prefix` which can be found in `parsedTheme`.
|
|
47
|
+
*
|
|
48
|
+
* @returns {{ css: Object, vars: Object, parsedTheme: typeof theme }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme), and `parsedTheme` is the cloned version of theme.
|
|
49
|
+
*
|
|
50
|
+
* @example
|
|
51
|
+
* const { css, vars, parsedTheme } = parser({
|
|
52
|
+
* fontSize: 12,
|
|
53
|
+
* lineHeight: 1.2,
|
|
54
|
+
* palette: { primary: { 500: 'var(--color)' } }
|
|
55
|
+
* }, { prefix: 'foo' })
|
|
56
|
+
*
|
|
57
|
+
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--foo-color)' }
|
|
58
|
+
* console.log(vars) // { fontSize: '--foo-fontSize', lineHeight: '--foo-lineHeight', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
|
59
|
+
* console.log(parsedTheme) // { fontSize: 12, lineHeight: 1.2, palette: { primary: { 500: 'var(--foo-color)' } } }
|
|
60
|
+
*/
|
|
61
|
+
export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
|
|
62
|
+
prefix?: string;
|
|
63
|
+
basePrefix?: string;
|
|
64
|
+
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
65
|
+
}): {
|
|
66
|
+
css: NestedRecord<string>;
|
|
67
|
+
vars: NestedRecord<string>;
|
|
68
|
+
parsedTheme: T;
|
|
69
|
+
};
|
|
70
|
+
export {};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
|
|
3
|
-
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
|
|
4
|
-
export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
|
|
5
|
-
export default function getInitColorSchemeScript(options?: {
|
|
6
|
-
enableSystem?: boolean;
|
|
7
|
-
defaultLightColorScheme?: string;
|
|
8
|
-
defaultDarkColorScheme?: string;
|
|
9
|
-
modeStorageKey?: string;
|
|
10
|
-
colorSchemeStorageKey?: string;
|
|
11
|
-
attribute?: string;
|
|
12
|
-
}): JSX.Element;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
|
|
3
|
+
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
|
|
4
|
+
export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
|
|
5
|
+
export default function getInitColorSchemeScript(options?: {
|
|
6
|
+
enableSystem?: boolean;
|
|
7
|
+
defaultLightColorScheme?: string;
|
|
8
|
+
defaultDarkColorScheme?: string;
|
|
9
|
+
modeStorageKey?: string;
|
|
10
|
+
colorSchemeStorageKey?: string;
|
|
11
|
+
attribute?: string;
|
|
12
|
+
}): JSX.Element;
|
package/cssVars/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { default } from './createCssVarsProvider';
|
|
1
|
+
export { default } from './createCssVarsProvider';
|
|
@@ -1,50 +1,50 @@
|
|
|
1
|
-
export declare type Mode = 'light' | 'dark' | 'system';
|
|
2
|
-
export declare type SystemMode = Exclude<Mode, 'system'>;
|
|
3
|
-
export interface State<SupportedColorScheme extends string> {
|
|
4
|
-
/**
|
|
5
|
-
* User selected mode.
|
|
6
|
-
* Note: on the server, mode is always undefined
|
|
7
|
-
*/
|
|
8
|
-
mode: Mode | undefined;
|
|
9
|
-
/**
|
|
10
|
-
* Only valid if `mode: 'system'`, either 'light' | 'dark'.
|
|
11
|
-
*/
|
|
12
|
-
systemMode: SystemMode | undefined;
|
|
13
|
-
/**
|
|
14
|
-
* The color scheme for the light mode.
|
|
15
|
-
*/
|
|
16
|
-
lightColorScheme: SupportedColorScheme;
|
|
17
|
-
/**
|
|
18
|
-
* The color scheme for the dark mode.
|
|
19
|
-
*/
|
|
20
|
-
darkColorScheme: SupportedColorScheme;
|
|
21
|
-
}
|
|
22
|
-
export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
|
|
23
|
-
/**
|
|
24
|
-
* The current application color scheme. It is always `undefined` on the server.
|
|
25
|
-
*/
|
|
26
|
-
colorScheme: SupportedColorScheme | undefined;
|
|
27
|
-
/**
|
|
28
|
-
* `mode` is saved to internal state and localStorage
|
|
29
|
-
* If `mode` is null, it will be reset to the defaultMode
|
|
30
|
-
*/
|
|
31
|
-
setMode: (mode: Mode | null) => void;
|
|
32
|
-
/**
|
|
33
|
-
* `colorScheme` is saved to internal state and localStorage
|
|
34
|
-
* If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
|
|
35
|
-
*/
|
|
36
|
-
setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
|
|
37
|
-
light: SupportedColorScheme | null;
|
|
38
|
-
dark: SupportedColorScheme | null;
|
|
39
|
-
}> | null) => void;
|
|
40
|
-
};
|
|
41
|
-
export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
|
|
42
|
-
export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
|
|
43
|
-
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
|
|
44
|
-
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
-
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
-
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
-
defaultMode?: Mode;
|
|
48
|
-
modeStorageKey?: string;
|
|
49
|
-
colorSchemeStorageKey?: string;
|
|
50
|
-
}): Result<SupportedColorScheme>;
|
|
1
|
+
export declare type Mode = 'light' | 'dark' | 'system';
|
|
2
|
+
export declare type SystemMode = Exclude<Mode, 'system'>;
|
|
3
|
+
export interface State<SupportedColorScheme extends string> {
|
|
4
|
+
/**
|
|
5
|
+
* User selected mode.
|
|
6
|
+
* Note: on the server, mode is always undefined
|
|
7
|
+
*/
|
|
8
|
+
mode: Mode | undefined;
|
|
9
|
+
/**
|
|
10
|
+
* Only valid if `mode: 'system'`, either 'light' | 'dark'.
|
|
11
|
+
*/
|
|
12
|
+
systemMode: SystemMode | undefined;
|
|
13
|
+
/**
|
|
14
|
+
* The color scheme for the light mode.
|
|
15
|
+
*/
|
|
16
|
+
lightColorScheme: SupportedColorScheme;
|
|
17
|
+
/**
|
|
18
|
+
* The color scheme for the dark mode.
|
|
19
|
+
*/
|
|
20
|
+
darkColorScheme: SupportedColorScheme;
|
|
21
|
+
}
|
|
22
|
+
export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
|
|
23
|
+
/**
|
|
24
|
+
* The current application color scheme. It is always `undefined` on the server.
|
|
25
|
+
*/
|
|
26
|
+
colorScheme: SupportedColorScheme | undefined;
|
|
27
|
+
/**
|
|
28
|
+
* `mode` is saved to internal state and localStorage
|
|
29
|
+
* If `mode` is null, it will be reset to the defaultMode
|
|
30
|
+
*/
|
|
31
|
+
setMode: (mode: Mode | null) => void;
|
|
32
|
+
/**
|
|
33
|
+
* `colorScheme` is saved to internal state and localStorage
|
|
34
|
+
* If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
|
|
35
|
+
*/
|
|
36
|
+
setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
|
|
37
|
+
light: SupportedColorScheme | null;
|
|
38
|
+
dark: SupportedColorScheme | null;
|
|
39
|
+
}> | null) => void;
|
|
40
|
+
};
|
|
41
|
+
export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
|
|
42
|
+
export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
|
|
43
|
+
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
|
|
44
|
+
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
+
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
+
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
+
defaultMode?: Mode;
|
|
48
|
+
modeStorageKey?: string;
|
|
49
|
+
colorSchemeStorageKey?: string;
|
|
50
|
+
}): Result<SupportedColorScheme>;
|
package/index.js
CHANGED
package/index.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
package/legacy/index.js
CHANGED
package/modern/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/system",
|
|
3
|
-
"version": "5.5.
|
|
3
|
+
"version": "5.5.1",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"description": "CSS utilities for rapidly laying out custom designs.",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@babel/runtime": "^7.17.2",
|
|
47
47
|
"@mui/private-theming": "^5.4.4",
|
|
48
48
|
"@mui/styled-engine": "^5.4.4",
|
|
49
|
-
"@mui/types": "^7.1.
|
|
49
|
+
"@mui/types": "^7.1.3",
|
|
50
50
|
"@mui/utils": "^5.4.4",
|
|
51
51
|
"clsx": "^1.1.1",
|
|
52
52
|
"csstype": "^3.0.11",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|