@mui/system 5.13.1 → 5.13.2
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 +41 -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/Container/createContainer.js +35 -41
- package/GlobalStyles/GlobalStyles.d.ts +13 -13
- package/GlobalStyles/index.d.ts +2 -2
- package/Stack/Stack.d.ts +14 -14
- package/Stack/StackProps.d.ts +53 -53
- package/Stack/createStack.d.ts +21 -21
- package/Stack/createStack.js +26 -24
- package/Stack/index.d.ts +5 -5
- package/Stack/stackClasses.d.ts +8 -8
- package/ThemeProvider/ThemeProvider.js +5 -9
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/GridProps.d.ts +185 -185
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/createGrid.js +23 -21
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +38 -38
- package/Unstable_Grid/gridGenerator.js +18 -20
- package/Unstable_Grid/index.d.ts +5 -5
- package/breakpoints.js +6 -7
- package/createBox.js +12 -9
- package/createStyled.js +32 -40
- package/createTheme/createBreakpoints.js +26 -24
- package/createTheme/createSpacing.d.ts +10 -10
- package/createTheme/createTheme.js +14 -18
- package/cssVars/createCssVarsProvider.js +20 -21
- package/cssVars/createCssVarsTheme.d.ts +15 -15
- package/cssVars/createCssVarsTheme.js +10 -10
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +64 -64
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/index.d.ts +5 -5
- package/cssVars/prepareCssVars.d.ts +16 -16
- package/cssVars/prepareCssVars.js +12 -13
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/cssVars/useCurrentColorScheme.js +11 -17
- package/esm/Container/createContainer.js +35 -41
- package/esm/Stack/createStack.js +26 -24
- package/esm/ThemeProvider/ThemeProvider.js +5 -9
- package/esm/Unstable_Grid/createGrid.js +23 -21
- package/esm/Unstable_Grid/gridGenerator.js +17 -20
- package/esm/breakpoints.js +6 -7
- package/esm/createBox.js +12 -9
- package/esm/createStyled.js +31 -38
- package/esm/createTheme/createBreakpoints.js +25 -24
- package/esm/createTheme/createTheme.js +14 -18
- package/esm/cssVars/createCssVarsProvider.js +20 -21
- package/esm/cssVars/createCssVarsTheme.js +10 -10
- package/esm/cssVars/prepareCssVars.js +12 -13
- package/esm/cssVars/useCurrentColorScheme.js +10 -17
- package/esm/propsToClassKey.js +5 -3
- package/esm/styleFunctionSx/extendSxProp.js +10 -14
- package/index.js +1 -1
- package/legacy/Container/createContainer.js +6 -7
- package/legacy/Stack/createStack.js +5 -6
- package/legacy/ThemeProvider/ThemeProvider.js +3 -4
- package/legacy/Unstable_Grid/createGrid.js +4 -6
- package/legacy/Unstable_Grid/gridGenerator.js +4 -6
- package/legacy/breakpoints.js +3 -5
- package/legacy/createBox.js +2 -4
- package/legacy/createStyled.js +11 -13
- package/legacy/createTheme/createBreakpoints.js +3 -4
- package/legacy/createTheme/createTheme.js +4 -6
- package/legacy/cssVars/createCssVarsProvider.js +5 -6
- package/legacy/cssVars/createCssVarsTheme.js +2 -4
- package/legacy/cssVars/prepareCssVars.js +3 -5
- package/legacy/cssVars/useCurrentColorScheme.js +7 -9
- package/legacy/index.js +1 -1
- package/legacy/styleFunctionSx/extendSxProp.js +4 -6
- package/modern/Container/createContainer.js +35 -41
- package/modern/Stack/createStack.js +26 -24
- package/modern/ThemeProvider/ThemeProvider.js +5 -9
- package/modern/Unstable_Grid/createGrid.js +23 -21
- package/modern/Unstable_Grid/gridGenerator.js +17 -20
- package/modern/breakpoints.js +6 -7
- package/modern/createBox.js +12 -9
- package/modern/createStyled.js +31 -38
- package/modern/createTheme/createBreakpoints.js +25 -24
- package/modern/createTheme/createTheme.js +14 -18
- package/modern/cssVars/createCssVarsProvider.js +20 -21
- package/modern/cssVars/createCssVarsTheme.js +10 -10
- package/modern/cssVars/prepareCssVars.js +12 -13
- package/modern/cssVars/useCurrentColorScheme.js +10 -17
- package/modern/index.js +1 -1
- package/modern/propsToClassKey.js +5 -3
- package/modern/styleFunctionSx/extendSxProp.js +10 -14
- package/package.json +2 -2
- package/propsToClassKey.js +6 -3
- package/styleFunctionSx/extendSxProp.js +10 -14
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
|
+
const _excluded = ["values", "unit", "step"];
|
|
1
4
|
// Sorted ASC by size. That's important.
|
|
2
5
|
// It can't be configured as it's used statically for propTypes.
|
|
3
6
|
export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
|
|
@@ -9,34 +12,33 @@ const sortBreakpointsValues = values => {
|
|
|
9
12
|
// Sort in ascending order
|
|
10
13
|
breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
|
|
11
14
|
return breakpointsAsArray.reduce((acc, obj) => {
|
|
12
|
-
return {
|
|
13
|
-
...acc,
|
|
15
|
+
return _extends({}, acc, {
|
|
14
16
|
[obj.key]: obj.val
|
|
15
|
-
};
|
|
17
|
+
});
|
|
16
18
|
}, {});
|
|
17
19
|
};
|
|
18
20
|
|
|
19
21
|
// Keep in mind that @media is inclusive by the CSS specification.
|
|
20
22
|
export default function createBreakpoints(breakpoints) {
|
|
21
23
|
const {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
24
|
+
// The breakpoint **start** at this value.
|
|
25
|
+
// For instance with the first breakpoint xs: [xs, sm).
|
|
26
|
+
values = {
|
|
27
|
+
xs: 0,
|
|
28
|
+
// phone
|
|
29
|
+
sm: 600,
|
|
30
|
+
// tablet
|
|
31
|
+
md: 900,
|
|
32
|
+
// small laptop
|
|
33
|
+
lg: 1200,
|
|
34
|
+
// desktop
|
|
35
|
+
xl: 1536 // large screen
|
|
36
|
+
},
|
|
35
37
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
38
|
+
unit = 'px',
|
|
39
|
+
step = 5
|
|
40
|
+
} = breakpoints,
|
|
41
|
+
other = _objectWithoutPropertiesLoose(breakpoints, _excluded);
|
|
40
42
|
const sortedValues = sortBreakpointsValues(values);
|
|
41
43
|
const keys = Object.keys(sortedValues);
|
|
42
44
|
function up(key) {
|
|
@@ -68,7 +70,7 @@ export default function createBreakpoints(breakpoints) {
|
|
|
68
70
|
}
|
|
69
71
|
return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
|
|
70
72
|
}
|
|
71
|
-
return {
|
|
73
|
+
return _extends({
|
|
72
74
|
keys,
|
|
73
75
|
values: sortedValues,
|
|
74
76
|
up,
|
|
@@ -76,7 +78,6 @@ export default function createBreakpoints(breakpoints) {
|
|
|
76
78
|
between,
|
|
77
79
|
only,
|
|
78
80
|
not,
|
|
79
|
-
unit
|
|
80
|
-
|
|
81
|
-
};
|
|
81
|
+
unit
|
|
82
|
+
}, other);
|
|
82
83
|
}
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["breakpoints", "palette", "spacing", "shape"];
|
|
1
4
|
import { deepmerge } from '@mui/utils';
|
|
2
5
|
import createBreakpoints from './createBreakpoints';
|
|
3
6
|
import shape from './shape';
|
|
@@ -6,12 +9,12 @@ import styleFunctionSx from '../styleFunctionSx/styleFunctionSx';
|
|
|
6
9
|
import defaultSxConfig from '../styleFunctionSx/defaultSxConfig';
|
|
7
10
|
function createTheme(options = {}, ...args) {
|
|
8
11
|
const {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
12
|
+
breakpoints: breakpointsInput = {},
|
|
13
|
+
palette: paletteInput = {},
|
|
14
|
+
spacing: spacingInput,
|
|
15
|
+
shape: shapeInput = {}
|
|
16
|
+
} = options,
|
|
17
|
+
other = _objectWithoutPropertiesLoose(options, _excluded);
|
|
15
18
|
const breakpoints = createBreakpoints(breakpointsInput);
|
|
16
19
|
const spacing = createSpacing(spacingInput);
|
|
17
20
|
let muiTheme = deepmerge({
|
|
@@ -19,21 +22,14 @@ function createTheme(options = {}, ...args) {
|
|
|
19
22
|
direction: 'ltr',
|
|
20
23
|
components: {},
|
|
21
24
|
// Inject component definitions.
|
|
22
|
-
palette: {
|
|
23
|
-
mode: 'light'
|
|
24
|
-
|
|
25
|
-
},
|
|
25
|
+
palette: _extends({
|
|
26
|
+
mode: 'light'
|
|
27
|
+
}, paletteInput),
|
|
26
28
|
spacing,
|
|
27
|
-
shape: {
|
|
28
|
-
...shape,
|
|
29
|
-
...shapeInput
|
|
30
|
-
}
|
|
29
|
+
shape: _extends({}, shape, shapeInput)
|
|
31
30
|
}, other);
|
|
32
31
|
muiTheme = args.reduce((acc, argument) => deepmerge(acc, argument), muiTheme);
|
|
33
|
-
muiTheme.unstable_sxConfig = {
|
|
34
|
-
...defaultSxConfig,
|
|
35
|
-
...(other == null ? void 0 : other.unstable_sxConfig)
|
|
36
|
-
};
|
|
32
|
+
muiTheme.unstable_sxConfig = _extends({}, defaultSxConfig, other == null ? void 0 : other.unstable_sxConfig);
|
|
37
33
|
muiTheme.unstable_sx = function sx(props) {
|
|
38
34
|
return styleFunctionSx({
|
|
39
35
|
sx: props,
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
1
3
|
import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
|
|
4
|
+
const _excluded = ["colorSchemes", "components", "generateCssVars", "cssVarPrefix"];
|
|
2
5
|
import * as React from 'react';
|
|
3
6
|
import PropTypes from 'prop-types';
|
|
4
7
|
import { deepmerge } from '@mui/utils';
|
|
@@ -55,16 +58,17 @@ export default function createCssVarsProvider(options) {
|
|
|
55
58
|
const ctx = React.useContext(ColorSchemeContext);
|
|
56
59
|
const nested = !!ctx && !disableNestedContext;
|
|
57
60
|
const scopedTheme = themeProp[themeId];
|
|
58
|
-
const
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
61
|
+
const _ref = scopedTheme || themeProp,
|
|
62
|
+
{
|
|
63
|
+
colorSchemes = {},
|
|
64
|
+
components = {},
|
|
65
|
+
generateCssVars = () => ({
|
|
66
|
+
vars: {},
|
|
67
|
+
css: {}
|
|
68
|
+
}),
|
|
69
|
+
cssVarPrefix
|
|
70
|
+
} = _ref,
|
|
71
|
+
restThemeProp = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
68
72
|
const allColorSchemes = Object.keys(colorSchemes);
|
|
69
73
|
const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
|
|
70
74
|
const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark;
|
|
@@ -122,14 +126,13 @@ export default function createCssVarsProvider(options) {
|
|
|
122
126
|
} = generateCssVars();
|
|
123
127
|
|
|
124
128
|
// 3. Start composing the theme object
|
|
125
|
-
const theme = {
|
|
126
|
-
...restThemeProp,
|
|
129
|
+
const theme = _extends({}, restThemeProp, {
|
|
127
130
|
components,
|
|
128
131
|
colorSchemes,
|
|
129
132
|
cssVarPrefix,
|
|
130
133
|
vars: rootVars,
|
|
131
134
|
getColorSchemeSelector: targetColorScheme => `[${attribute}="${targetColorScheme}"] &`
|
|
132
|
-
};
|
|
135
|
+
});
|
|
133
136
|
|
|
134
137
|
// 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step)
|
|
135
138
|
// The default color scheme stylesheet is constructed to have the least CSS specificity.
|
|
@@ -147,10 +150,7 @@ export default function createCssVarsProvider(options) {
|
|
|
147
150
|
Object.keys(scheme).forEach(schemeKey => {
|
|
148
151
|
if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
|
|
149
152
|
// shallow merge the 1st level structure of the theme.
|
|
150
|
-
theme[schemeKey] = {
|
|
151
|
-
...theme[schemeKey],
|
|
152
|
-
...scheme[schemeKey]
|
|
153
|
-
};
|
|
153
|
+
theme[schemeKey] = _extends({}, theme[schemeKey], scheme[schemeKey]);
|
|
154
154
|
} else {
|
|
155
155
|
theme[schemeKey] = scheme[schemeKey];
|
|
156
156
|
}
|
|
@@ -320,15 +320,14 @@ export default function createCssVarsProvider(options) {
|
|
|
320
320
|
} : void 0;
|
|
321
321
|
const defaultLightColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.light;
|
|
322
322
|
const defaultDarkColorScheme = typeof designSystemColorScheme === 'string' ? designSystemColorScheme : designSystemColorScheme.dark;
|
|
323
|
-
const getInitColorSchemeScript = params => systemGetInitColorSchemeScript({
|
|
323
|
+
const getInitColorSchemeScript = params => systemGetInitColorSchemeScript(_extends({
|
|
324
324
|
attribute: defaultAttribute,
|
|
325
325
|
colorSchemeStorageKey: defaultColorSchemeStorageKey,
|
|
326
326
|
defaultMode: designSystemMode,
|
|
327
327
|
defaultLightColorScheme,
|
|
328
328
|
defaultDarkColorScheme,
|
|
329
|
-
modeStorageKey: defaultModeStorageKey
|
|
330
|
-
|
|
331
|
-
});
|
|
329
|
+
modeStorageKey: defaultModeStorageKey
|
|
330
|
+
}, params));
|
|
332
331
|
return {
|
|
333
332
|
CssVarsProvider,
|
|
334
333
|
useColorScheme,
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["cssVarPrefix", "shouldSkipGeneratingVar"];
|
|
1
4
|
import prepareCssVars from './prepareCssVars';
|
|
2
5
|
function createCssVarsTheme(theme) {
|
|
3
6
|
const {
|
|
4
|
-
|
|
5
|
-
shouldSkipGeneratingVar,
|
|
6
|
-
...otherTheme
|
|
7
|
-
} = theme;
|
|
8
|
-
return {
|
|
9
|
-
...theme,
|
|
10
|
-
...prepareCssVars(otherTheme, {
|
|
11
|
-
prefix: cssVarPrefix,
|
|
7
|
+
cssVarPrefix,
|
|
12
8
|
shouldSkipGeneratingVar
|
|
13
|
-
}
|
|
14
|
-
|
|
9
|
+
} = theme,
|
|
10
|
+
otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
|
|
11
|
+
return _extends({}, theme, prepareCssVars(otherTheme, {
|
|
12
|
+
prefix: cssVarPrefix,
|
|
13
|
+
shouldSkipGeneratingVar
|
|
14
|
+
}));
|
|
15
15
|
}
|
|
16
16
|
export default createCssVarsTheme;
|
|
@@ -1,12 +1,15 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["colorSchemes", "components"],
|
|
4
|
+
_excluded2 = ["light"];
|
|
1
5
|
import { deepmerge } from '@mui/utils';
|
|
2
6
|
import cssVarsParser from './cssVarsParser';
|
|
3
7
|
function prepareCssVars(theme, parserConfig) {
|
|
4
8
|
// @ts-ignore - ignore components do not exist
|
|
5
9
|
const {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
} = theme;
|
|
10
|
+
colorSchemes = {}
|
|
11
|
+
} = theme,
|
|
12
|
+
otherTheme = _objectWithoutPropertiesLoose(theme, _excluded);
|
|
10
13
|
const {
|
|
11
14
|
vars: rootVars,
|
|
12
15
|
css: rootCss,
|
|
@@ -15,9 +18,9 @@ function prepareCssVars(theme, parserConfig) {
|
|
|
15
18
|
let themeVars = rootVarsWithDefaults;
|
|
16
19
|
const colorSchemesMap = {};
|
|
17
20
|
const {
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
light
|
|
22
|
+
} = colorSchemes,
|
|
23
|
+
otherColorSchemes = _objectWithoutPropertiesLoose(colorSchemes, _excluded2);
|
|
21
24
|
Object.entries(otherColorSchemes || {}).forEach(([key, scheme]) => {
|
|
22
25
|
const {
|
|
23
26
|
vars,
|
|
@@ -46,16 +49,12 @@ function prepareCssVars(theme, parserConfig) {
|
|
|
46
49
|
const generateCssVars = colorScheme => {
|
|
47
50
|
if (!colorScheme) {
|
|
48
51
|
return {
|
|
49
|
-
css: {
|
|
50
|
-
...rootCss
|
|
51
|
-
},
|
|
52
|
+
css: _extends({}, rootCss),
|
|
52
53
|
vars: rootVars
|
|
53
54
|
};
|
|
54
55
|
}
|
|
55
56
|
return {
|
|
56
|
-
css: {
|
|
57
|
-
...colorSchemesMap[colorScheme].css
|
|
58
|
-
},
|
|
57
|
+
css: _extends({}, colorSchemesMap[colorScheme].css),
|
|
59
58
|
vars: colorSchemesMap[colorScheme].vars
|
|
60
59
|
};
|
|
61
60
|
};
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
1
2
|
import * as React from 'react';
|
|
2
3
|
import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from './getInitColorSchemeScript';
|
|
3
4
|
export function getSystemMode(mode) {
|
|
@@ -81,11 +82,10 @@ export default function useCurrentColorScheme(options) {
|
|
|
81
82
|
} catch (e) {
|
|
82
83
|
// Unsupported
|
|
83
84
|
}
|
|
84
|
-
return {
|
|
85
|
-
...currentState,
|
|
85
|
+
return _extends({}, currentState, {
|
|
86
86
|
mode: newMode,
|
|
87
87
|
systemMode: getSystemMode(newMode)
|
|
88
|
-
};
|
|
88
|
+
});
|
|
89
89
|
});
|
|
90
90
|
}, [modeStorageKey, defaultMode]);
|
|
91
91
|
const setColorScheme = React.useCallback(value => {
|
|
@@ -97,20 +97,17 @@ export default function useCurrentColorScheme(options) {
|
|
|
97
97
|
} catch (e) {
|
|
98
98
|
// Unsupported
|
|
99
99
|
}
|
|
100
|
-
return {
|
|
101
|
-
...currentState,
|
|
100
|
+
return _extends({}, currentState, {
|
|
102
101
|
lightColorScheme: defaultLightColorScheme,
|
|
103
102
|
darkColorScheme: defaultDarkColorScheme
|
|
104
|
-
};
|
|
103
|
+
});
|
|
105
104
|
});
|
|
106
105
|
} else if (typeof value === 'string') {
|
|
107
106
|
if (value && !joinedColorSchemes.includes(value)) {
|
|
108
107
|
console.error(`\`${value}\` does not exist in \`theme.colorSchemes\`.`);
|
|
109
108
|
} else {
|
|
110
109
|
setState(currentState => {
|
|
111
|
-
const newState = {
|
|
112
|
-
...currentState
|
|
113
|
-
};
|
|
110
|
+
const newState = _extends({}, currentState);
|
|
114
111
|
processState(currentState, mode => {
|
|
115
112
|
try {
|
|
116
113
|
localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
|
|
@@ -129,9 +126,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
129
126
|
}
|
|
130
127
|
} else {
|
|
131
128
|
setState(currentState => {
|
|
132
|
-
const newState = {
|
|
133
|
-
...currentState
|
|
134
|
-
};
|
|
129
|
+
const newState = _extends({}, currentState);
|
|
135
130
|
const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
|
|
136
131
|
const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
|
|
137
132
|
if (newLightColorScheme) {
|
|
@@ -164,8 +159,7 @@ export default function useCurrentColorScheme(options) {
|
|
|
164
159
|
}, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
|
|
165
160
|
const handleMediaQuery = React.useCallback(e => {
|
|
166
161
|
if (state.mode === 'system') {
|
|
167
|
-
setState(currentState => ({
|
|
168
|
-
...currentState,
|
|
162
|
+
setState(currentState => _extends({}, currentState, {
|
|
169
163
|
systemMode: e != null && e.matches ? 'dark' : 'light'
|
|
170
164
|
}));
|
|
171
165
|
}
|
|
@@ -214,10 +208,9 @@ export default function useCurrentColorScheme(options) {
|
|
|
214
208
|
}
|
|
215
209
|
return undefined;
|
|
216
210
|
}, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
|
|
217
|
-
return {
|
|
218
|
-
...state,
|
|
211
|
+
return _extends({}, state, {
|
|
219
212
|
colorScheme,
|
|
220
213
|
setMode,
|
|
221
214
|
setColorScheme
|
|
222
|
-
};
|
|
215
|
+
});
|
|
223
216
|
}
|
package/esm/propsToClassKey.js
CHANGED
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
2
|
+
const _excluded = ["variant"];
|
|
1
3
|
import { unstable_capitalize as capitalize } from '@mui/utils';
|
|
2
4
|
function isEmpty(string) {
|
|
3
5
|
return string.length === 0;
|
|
@@ -10,9 +12,9 @@ function isEmpty(string) {
|
|
|
10
12
|
*/
|
|
11
13
|
export default function propsToClassKey(props) {
|
|
12
14
|
const {
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
variant
|
|
16
|
+
} = props,
|
|
17
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
16
18
|
let classKey = variant || '';
|
|
17
19
|
Object.keys(other).sort().forEach(key => {
|
|
18
20
|
if (key === 'color') {
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
|
+
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
+
const _excluded = ["sx"];
|
|
1
4
|
import { isPlainObject } from '@mui/utils';
|
|
2
5
|
import defaultSxConfig from './defaultSxConfig';
|
|
3
6
|
const splitProps = props => {
|
|
@@ -18,9 +21,9 @@ const splitProps = props => {
|
|
|
18
21
|
};
|
|
19
22
|
export default function extendSxProp(props) {
|
|
20
23
|
const {
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
+
sx: inSx
|
|
25
|
+
} = props,
|
|
26
|
+
other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
24
27
|
const {
|
|
25
28
|
systemProps,
|
|
26
29
|
otherProps
|
|
@@ -34,19 +37,12 @@ export default function extendSxProp(props) {
|
|
|
34
37
|
if (!isPlainObject(result)) {
|
|
35
38
|
return systemProps;
|
|
36
39
|
}
|
|
37
|
-
return {
|
|
38
|
-
...systemProps,
|
|
39
|
-
...result
|
|
40
|
-
};
|
|
40
|
+
return _extends({}, systemProps, result);
|
|
41
41
|
};
|
|
42
42
|
} else {
|
|
43
|
-
finalSx = {
|
|
44
|
-
...systemProps,
|
|
45
|
-
...inSx
|
|
46
|
-
};
|
|
43
|
+
finalSx = _extends({}, systemProps, inSx);
|
|
47
44
|
}
|
|
48
|
-
return {
|
|
49
|
-
...otherProps,
|
|
45
|
+
return _extends({}, otherProps, {
|
|
50
46
|
sx: finalSx
|
|
51
|
-
};
|
|
47
|
+
});
|
|
52
48
|
}
|
package/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
3
|
-
|
|
4
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
3
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
5
4
|
import * as React from 'react';
|
|
6
5
|
import PropTypes from 'prop-types';
|
|
7
6
|
import clsx from 'clsx';
|
|
@@ -50,7 +49,7 @@ export default function createContainer() {
|
|
|
50
49
|
var ContainerRoot = createStyledComponent(function (_ref) {
|
|
51
50
|
var theme = _ref.theme,
|
|
52
51
|
ownerState = _ref.ownerState;
|
|
53
|
-
return
|
|
52
|
+
return _extends({
|
|
54
53
|
width: '100%',
|
|
55
54
|
marginLeft: 'auto',
|
|
56
55
|
boxSizing: 'border-box',
|
|
@@ -80,10 +79,10 @@ export default function createContainer() {
|
|
|
80
79
|
}, function (_ref4) {
|
|
81
80
|
var theme = _ref4.theme,
|
|
82
81
|
ownerState = _ref4.ownerState;
|
|
83
|
-
return
|
|
82
|
+
return _extends({}, ownerState.maxWidth === 'xs' && _defineProperty({}, theme.breakpoints.up('xs'), {
|
|
84
83
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
85
84
|
maxWidth: Math.max(theme.breakpoints.values.xs, 444)
|
|
86
|
-
})
|
|
85
|
+
}), ownerState.maxWidth &&
|
|
87
86
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
88
87
|
ownerState.maxWidth !== 'xs' && _defineProperty({}, theme.breakpoints.up(ownerState.maxWidth), {
|
|
89
88
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
@@ -103,7 +102,7 @@ export default function createContainer() {
|
|
|
103
102
|
maxWidth = _props$maxWidth === void 0 ? 'lg' : _props$maxWidth,
|
|
104
103
|
classesProp = props.classes,
|
|
105
104
|
other = _objectWithoutProperties(props, ["className", "component", "disableGutters", "fixed", "maxWidth", "classes"]);
|
|
106
|
-
var ownerState =
|
|
105
|
+
var ownerState = _extends({}, props, {
|
|
107
106
|
component: component,
|
|
108
107
|
disableGutters: disableGutters,
|
|
109
108
|
fixed: fixed,
|
|
@@ -115,7 +114,7 @@ export default function createContainer() {
|
|
|
115
114
|
return (
|
|
116
115
|
/*#__PURE__*/
|
|
117
116
|
// @ts-ignore theme is injected by the styled util
|
|
118
|
-
_jsx(ContainerRoot,
|
|
117
|
+
_jsx(ContainerRoot, _extends({
|
|
119
118
|
as: component
|
|
120
119
|
// @ts-ignore module augmentation fails if custom breakpoints are used
|
|
121
120
|
,
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
2
|
-
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
3
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
4
|
-
|
|
5
|
-
|
|
3
|
+
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
4
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
6
5
|
import * as React from 'react';
|
|
7
6
|
import PropTypes from 'prop-types';
|
|
8
7
|
import clsx from 'clsx';
|
|
@@ -61,7 +60,7 @@ var getSideFromDirection = function getSideFromDirection(direction) {
|
|
|
61
60
|
export var style = function style(_ref) {
|
|
62
61
|
var ownerState = _ref.ownerState,
|
|
63
62
|
theme = _ref.theme;
|
|
64
|
-
var styles =
|
|
63
|
+
var styles = _extends({
|
|
65
64
|
display: 'flex',
|
|
66
65
|
flexDirection: 'column'
|
|
67
66
|
}, handleBreakpoints({
|
|
@@ -156,12 +155,12 @@ export default function createStack() {
|
|
|
156
155
|
useFlexGap: useFlexGap
|
|
157
156
|
};
|
|
158
157
|
var classes = useUtilityClasses();
|
|
159
|
-
return /*#__PURE__*/_jsx(StackRoot,
|
|
158
|
+
return /*#__PURE__*/_jsx(StackRoot, _extends({
|
|
160
159
|
as: component,
|
|
161
160
|
ownerState: ownerState,
|
|
162
161
|
ref: ref,
|
|
163
162
|
className: clsx(classes.root, className)
|
|
164
|
-
}, other
|
|
163
|
+
}, other, {
|
|
165
164
|
children: divider ? joinChildren(children, divider) : children
|
|
166
165
|
}));
|
|
167
166
|
});
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
2
|
-
|
|
3
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
4
3
|
import * as React from 'react';
|
|
5
4
|
import PropTypes from 'prop-types';
|
|
6
5
|
import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
|
|
@@ -15,7 +14,7 @@ function useThemeScoping(themeId, upperTheme, localTheme) {
|
|
|
15
14
|
var resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
|
|
16
15
|
if (typeof localTheme === 'function') {
|
|
17
16
|
var mergedTheme = localTheme(resolvedTheme);
|
|
18
|
-
var result = themeId ?
|
|
17
|
+
var result = themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, mergedTheme)) : mergedTheme;
|
|
19
18
|
// must return a function for the private theme to NOT merge with the upper theme.
|
|
20
19
|
// see the test case "use provided theme from a callback" in ThemeProvider.test.js
|
|
21
20
|
if (isPrivate) {
|
|
@@ -25,7 +24,7 @@ function useThemeScoping(themeId, upperTheme, localTheme) {
|
|
|
25
24
|
}
|
|
26
25
|
return result;
|
|
27
26
|
}
|
|
28
|
-
return themeId ?
|
|
27
|
+
return themeId ? _extends({}, upperTheme, _defineProperty({}, themeId, localTheme)) : _extends({}, upperTheme, localTheme);
|
|
29
28
|
}, [themeId, upperTheme, localTheme, isPrivate]);
|
|
30
29
|
}
|
|
31
30
|
|
|
@@ -1,9 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
|
|
4
4
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
5
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
5
|
import * as React from 'react';
|
|
8
6
|
import PropTypes from 'prop-types';
|
|
9
7
|
import clsx from 'clsx';
|
|
@@ -107,7 +105,7 @@ export default function createGrid() {
|
|
|
107
105
|
var spacing = (_inProps$spacing = inProps.spacing) != null ? _inProps$spacing : level ? undefined : spacingProp;
|
|
108
106
|
var rowSpacing = (_ref3 = (_inProps$rowSpacing = inProps.rowSpacing) != null ? _inProps$rowSpacing : inProps.spacing) != null ? _ref3 : level ? undefined : rowSpacingProp;
|
|
109
107
|
var columnSpacing = (_ref4 = (_inProps$columnSpacin = inProps.columnSpacing) != null ? _inProps$columnSpacin : inProps.spacing) != null ? _ref4 : level ? undefined : columnSpacingProp;
|
|
110
|
-
var ownerState =
|
|
108
|
+
var ownerState = _extends({}, props, {
|
|
111
109
|
level: level,
|
|
112
110
|
columns: columns,
|
|
113
111
|
container: container,
|
|
@@ -124,12 +122,12 @@ export default function createGrid() {
|
|
|
124
122
|
});
|
|
125
123
|
|
|
126
124
|
var classes = useUtilityClasses(ownerState, theme);
|
|
127
|
-
var result = /*#__PURE__*/_jsx(GridRoot,
|
|
125
|
+
var result = /*#__PURE__*/_jsx(GridRoot, _extends({
|
|
128
126
|
ref: ref,
|
|
129
127
|
as: component,
|
|
130
128
|
ownerState: ownerState,
|
|
131
129
|
className: clsx(classes.root, className)
|
|
132
|
-
}, other
|
|
130
|
+
}, other, {
|
|
133
131
|
children: React.Children.map(children, function (child) {
|
|
134
132
|
if ( /*#__PURE__*/React.isValidElement(child) && isMuiElement(child, ['Grid'])) {
|
|
135
133
|
var _child$props$unstable;
|
|
@@ -2,8 +2,6 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
3
3
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
4
4
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
5
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
6
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
7
5
|
function appendLevel(level) {
|
|
8
6
|
if (!level) {
|
|
9
7
|
return '';
|
|
@@ -192,19 +190,19 @@ export var generateGridStyles = function generateGridStyles(_ref10) {
|
|
|
192
190
|
var ownerState = _ref10.ownerState;
|
|
193
191
|
var getSelfSpacing = createGetSelfSpacing(ownerState);
|
|
194
192
|
var getParentSpacing = createGetParentSpacing(ownerState);
|
|
195
|
-
return
|
|
193
|
+
return _extends({
|
|
196
194
|
minWidth: 0,
|
|
197
195
|
boxSizing: 'border-box'
|
|
198
|
-
}, ownerState.container &&
|
|
196
|
+
}, ownerState.container && _extends({
|
|
199
197
|
display: 'flex',
|
|
200
198
|
flexWrap: 'wrap'
|
|
201
199
|
}, ownerState.wrap && ownerState.wrap !== 'wrap' && {
|
|
202
200
|
flexWrap: ownerState.wrap
|
|
203
|
-
}
|
|
201
|
+
}, {
|
|
204
202
|
margin: "calc(".concat(getSelfSpacing('row'), " / -2) calc(").concat(getSelfSpacing('column'), " / -2)")
|
|
205
203
|
}, ownerState.disableEqualOverflow && {
|
|
206
204
|
margin: "calc(".concat(getSelfSpacing('row'), " * -1) 0px 0px calc(").concat(getSelfSpacing('column'), " * -1)")
|
|
207
|
-
})
|
|
205
|
+
}), (!ownerState.container || isNestedContainer(ownerState)) && _extends({
|
|
208
206
|
padding: "calc(".concat(getParentSpacing('row'), " / 2) calc(").concat(getParentSpacing('column'), " / 2)")
|
|
209
207
|
}, (ownerState.disableEqualOverflow || ownerState.parentDisableEqualOverflow) && {
|
|
210
208
|
padding: "".concat(getParentSpacing('row'), " 0px 0px ").concat(getParentSpacing('column'))
|
package/legacy/breakpoints.js
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
|
|
2
|
-
import
|
|
2
|
+
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
3
3
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
4
|
-
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
5
|
-
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
6
4
|
import PropTypes from 'prop-types';
|
|
7
5
|
import { deepmerge } from '@mui/utils';
|
|
8
6
|
import merge from './merge';
|
|
@@ -65,7 +63,7 @@ function breakpoints(styleFunction) {
|
|
|
65
63
|
var extended = themeBreakpoints.keys.reduce(function (acc, key) {
|
|
66
64
|
if (props[key]) {
|
|
67
65
|
acc = acc || {};
|
|
68
|
-
acc[themeBreakpoints.up(key)] = styleFunction(
|
|
66
|
+
acc[themeBreakpoints.up(key)] = styleFunction(_extends({
|
|
69
67
|
theme: theme
|
|
70
68
|
}, props[key]));
|
|
71
69
|
}
|
|
@@ -73,7 +71,7 @@ function breakpoints(styleFunction) {
|
|
|
73
71
|
}, null);
|
|
74
72
|
return merge(base, extended);
|
|
75
73
|
};
|
|
76
|
-
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ?
|
|
74
|
+
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? _extends({}, styleFunction.propTypes, {
|
|
77
75
|
xs: PropTypes.object,
|
|
78
76
|
sm: PropTypes.object,
|
|
79
77
|
md: PropTypes.object,
|