@mui/system 5.11.2 → 5.11.5
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.d.ts +3 -3
- package/Box/Box.spec.d.ts +1 -1
- package/CHANGELOG.md +143 -0
- package/Container/Container.d.ts +13 -13
- package/Container/ContainerProps.d.ts +40 -40
- package/Container/containerClasses.d.ts +22 -22
- package/Container/createContainer.d.ts +18 -18
- package/Stack/Stack.d.ts +13 -13
- package/Stack/StackProps.d.ts +42 -42
- package/Stack/createStack.d.ts +21 -21
- package/Stack/index.d.ts +5 -5
- package/Stack/stackClasses.d.ts +8 -8
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/GridProps.d.ts +162 -162
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +29 -29
- package/Unstable_Grid/index.d.ts +5 -5
- package/createBox.d.ts +9 -4
- 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 +63 -63
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/index.d.ts +3 -3
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/index.js +3 -1
- package/index.spec.d.ts +1 -1
- package/legacy/index.js +3 -1
- package/modern/index.js +3 -1
- package/package.json +1 -1
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
|
@@ -1,63 +1,63 @@
|
|
|
1
|
-
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: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => 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, arrayKeys: Array<string>) => 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
|
-
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
41
|
-
* }} options.
|
|
42
|
-
* `prefix`: The prefix of the generated CSS variables. This function does not change the value.
|
|
43
|
-
*
|
|
44
|
-
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
|
|
45
|
-
*
|
|
46
|
-
* @example
|
|
47
|
-
* const { css, vars } = parser({
|
|
48
|
-
* fontSize: 12,
|
|
49
|
-
* lineHeight: 1.2,
|
|
50
|
-
* palette: { primary: { 500: 'var(--color)' } }
|
|
51
|
-
* }, { prefix: 'foo' })
|
|
52
|
-
*
|
|
53
|
-
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
|
|
54
|
-
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
|
55
|
-
*/
|
|
56
|
-
export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
|
|
57
|
-
prefix?: string;
|
|
58
|
-
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
59
|
-
}): {
|
|
60
|
-
css: Record<string, string | number>;
|
|
61
|
-
vars: NestedRecord<string>;
|
|
62
|
-
};
|
|
63
|
-
export {};
|
|
1
|
+
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: <T extends string | Record<string, any> | null | undefined = NestedRecord<any>, Value = any>(obj: T, keys: Array<string>, value: Value, arrayKeys?: Array<string>) => 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, arrayKeys: Array<string>) => 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
|
+
* shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
|
|
41
|
+
* }} options.
|
|
42
|
+
* `prefix`: The prefix of the generated CSS variables. This function does not change the value.
|
|
43
|
+
*
|
|
44
|
+
* @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme).
|
|
45
|
+
*
|
|
46
|
+
* @example
|
|
47
|
+
* const { css, vars } = parser({
|
|
48
|
+
* fontSize: 12,
|
|
49
|
+
* lineHeight: 1.2,
|
|
50
|
+
* palette: { primary: { 500: 'var(--color)' } }
|
|
51
|
+
* }, { prefix: 'foo' })
|
|
52
|
+
*
|
|
53
|
+
* console.log(css) // { '--foo-fontSize': '12px', '--foo-lineHeight': 1.2, '--foo-palette-primary-500': 'var(--color)' }
|
|
54
|
+
* console.log(vars) // { fontSize: 'var(--foo-fontSize)', lineHeight: 'var(--foo-lineHeight)', palette: { primary: { 500: 'var(--foo-palette-primary-500)' } } }
|
|
55
|
+
*/
|
|
56
|
+
export default function cssVarsParser<T extends Record<string, any>>(theme: T, options?: {
|
|
57
|
+
prefix?: string;
|
|
58
|
+
shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
|
|
59
|
+
}): {
|
|
60
|
+
css: Record<string, string | number>;
|
|
61
|
+
vars: NestedRecord<string>;
|
|
62
|
+
};
|
|
63
|
+
export {};
|
|
@@ -1,42 +1,42 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
|
|
3
|
-
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
|
|
4
|
-
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
|
|
5
|
-
export interface GetInitColorSchemeScriptOptions {
|
|
6
|
-
/**
|
|
7
|
-
* The mode to be used for the first visit
|
|
8
|
-
* @default 'light'
|
|
9
|
-
*/
|
|
10
|
-
defaultMode?: 'light' | 'dark' | 'system';
|
|
11
|
-
/**
|
|
12
|
-
* The default color scheme to be used on the light mode
|
|
13
|
-
* @default 'light'
|
|
14
|
-
*/
|
|
15
|
-
defaultLightColorScheme?: string;
|
|
16
|
-
/**
|
|
17
|
-
* The default color scheme to be used on the dark mode
|
|
18
|
-
* * @default 'dark'
|
|
19
|
-
*/
|
|
20
|
-
defaultDarkColorScheme?: string;
|
|
21
|
-
/**
|
|
22
|
-
* The node (provided as string) used to attach the color-scheme attribute
|
|
23
|
-
* @default 'document.documentElement'
|
|
24
|
-
*/
|
|
25
|
-
colorSchemeNode?: string;
|
|
26
|
-
/**
|
|
27
|
-
* localStorage key used to store `mode`
|
|
28
|
-
* @default 'mode'
|
|
29
|
-
*/
|
|
30
|
-
modeStorageKey?: string;
|
|
31
|
-
/**
|
|
32
|
-
* localStorage key used to store `colorScheme`
|
|
33
|
-
* @default 'color-scheme'
|
|
34
|
-
*/
|
|
35
|
-
colorSchemeStorageKey?: string;
|
|
36
|
-
/**
|
|
37
|
-
* DOM attribute for applying color scheme
|
|
38
|
-
* @default 'data-color-scheme'
|
|
39
|
-
*/
|
|
40
|
-
attribute?: string;
|
|
41
|
-
}
|
|
42
|
-
export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const DEFAULT_MODE_STORAGE_KEY = "mode";
|
|
3
|
+
export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "color-scheme";
|
|
4
|
+
export declare const DEFAULT_ATTRIBUTE = "data-color-scheme";
|
|
5
|
+
export interface GetInitColorSchemeScriptOptions {
|
|
6
|
+
/**
|
|
7
|
+
* The mode to be used for the first visit
|
|
8
|
+
* @default 'light'
|
|
9
|
+
*/
|
|
10
|
+
defaultMode?: 'light' | 'dark' | 'system';
|
|
11
|
+
/**
|
|
12
|
+
* The default color scheme to be used on the light mode
|
|
13
|
+
* @default 'light'
|
|
14
|
+
*/
|
|
15
|
+
defaultLightColorScheme?: string;
|
|
16
|
+
/**
|
|
17
|
+
* The default color scheme to be used on the dark mode
|
|
18
|
+
* * @default 'dark'
|
|
19
|
+
*/
|
|
20
|
+
defaultDarkColorScheme?: string;
|
|
21
|
+
/**
|
|
22
|
+
* The node (provided as string) used to attach the color-scheme attribute
|
|
23
|
+
* @default 'document.documentElement'
|
|
24
|
+
*/
|
|
25
|
+
colorSchemeNode?: string;
|
|
26
|
+
/**
|
|
27
|
+
* localStorage key used to store `mode`
|
|
28
|
+
* @default 'mode'
|
|
29
|
+
*/
|
|
30
|
+
modeStorageKey?: string;
|
|
31
|
+
/**
|
|
32
|
+
* localStorage key used to store `colorScheme`
|
|
33
|
+
* @default 'color-scheme'
|
|
34
|
+
*/
|
|
35
|
+
colorSchemeStorageKey?: string;
|
|
36
|
+
/**
|
|
37
|
+
* DOM attribute for applying color scheme
|
|
38
|
+
* @default 'data-color-scheme'
|
|
39
|
+
*/
|
|
40
|
+
attribute?: string;
|
|
41
|
+
}
|
|
42
|
+
export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions): JSX.Element;
|
package/cssVars/index.d.ts
CHANGED
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
export { default } from './createCssVarsProvider';
|
|
2
|
-
export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
|
|
3
|
-
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
|
|
1
|
+
export { default } from './createCssVarsProvider';
|
|
2
|
+
export type { CreateCssVarsProviderResult, CssVarsProviderConfig, ColorSchemeContextValue, } from './createCssVarsProvider';
|
|
3
|
+
export { default as getInitColorSchemeScript } from './getInitColorSchemeScript';
|
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
export type Mode = 'light' | 'dark' | 'system';
|
|
2
|
-
export 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 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
|
-
interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
|
|
44
|
-
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
-
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
-
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
-
defaultMode?: Mode;
|
|
48
|
-
modeStorageKey?: string;
|
|
49
|
-
colorSchemeStorageKey?: string;
|
|
50
|
-
storageWindow?: Window | null;
|
|
51
|
-
}
|
|
52
|
-
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
|
|
53
|
-
export {};
|
|
1
|
+
export type Mode = 'light' | 'dark' | 'system';
|
|
2
|
+
export 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 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
|
+
interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
|
|
44
|
+
defaultLightColorScheme: SupportedColorScheme;
|
|
45
|
+
defaultDarkColorScheme: SupportedColorScheme;
|
|
46
|
+
supportedColorSchemes: Array<SupportedColorScheme>;
|
|
47
|
+
defaultMode?: Mode;
|
|
48
|
+
modeStorageKey?: string;
|
|
49
|
+
colorSchemeStorageKey?: string;
|
|
50
|
+
storageWindow?: Window | null;
|
|
51
|
+
}
|
|
52
|
+
export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;
|
|
53
|
+
export {};
|
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 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|