@mui/system 5.2.2 → 5.2.6

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.
Files changed (38) hide show
  1. package/CHANGELOG.md +271 -0
  2. package/createBox.d.ts +3 -3
  3. package/createBox.spec.d.ts +1 -0
  4. package/createTheme/createBreakpoints.d.ts +6 -0
  5. package/createTheme/createBreakpoints.js +16 -0
  6. package/cssVars/createCssVarsProvider.d.ts +13 -9
  7. package/cssVars/createCssVarsProvider.js +26 -6
  8. package/cssVars/createGetThemeVar.d.ts +1 -0
  9. package/cssVars/createGetThemeVar.js +22 -0
  10. package/cssVars/cssVarsParser.d.ts +1 -1
  11. package/cssVars/cssVarsParser.js +17 -16
  12. package/cssVars/getInitColorSchemeScript.js +1 -1
  13. package/esm/createTheme/createBreakpoints.js +16 -0
  14. package/esm/cssVars/createCssVarsProvider.js +25 -7
  15. package/esm/cssVars/createGetThemeVar.js +15 -0
  16. package/esm/cssVars/cssVarsParser.js +17 -15
  17. package/esm/cssVars/getInitColorSchemeScript.js +1 -1
  18. package/esm/index.js +2 -1
  19. package/esm/useThemeProps/getThemeProps.js +2 -17
  20. package/index.d.ts +1 -0
  21. package/index.js +11 -2
  22. package/legacy/createTheme/createBreakpoints.js +16 -0
  23. package/legacy/cssVars/createCssVarsProvider.js +27 -8
  24. package/legacy/cssVars/createGetThemeVar.js +26 -0
  25. package/legacy/cssVars/cssVarsParser.js +19 -13
  26. package/legacy/cssVars/getInitColorSchemeScript.js +1 -1
  27. package/legacy/index.js +3 -2
  28. package/legacy/useThemeProps/getThemeProps.js +2 -17
  29. package/modern/createTheme/createBreakpoints.js +16 -0
  30. package/modern/cssVars/createCssVarsProvider.js +23 -7
  31. package/modern/cssVars/createGetThemeVar.js +15 -0
  32. package/modern/cssVars/cssVarsParser.js +17 -15
  33. package/modern/cssVars/getInitColorSchemeScript.js +1 -1
  34. package/modern/index.js +3 -2
  35. package/modern/useThemeProps/getThemeProps.js +2 -17
  36. package/package.json +5 -5
  37. package/styleFunctionSx/styleFunctionSx.d.ts +1 -1
  38. package/useThemeProps/getThemeProps.js +2 -17
package/modern/cssVars/createCssVarsProvider.js CHANGED
@@ -7,11 +7,14 @@ const _excluded = ["colorSchemes"],
7
7
  import * as React from 'react';
8
8
  import PropTypes from 'prop-types';
9
9
  import { GlobalStyles } from '@mui/styled-engine';
10
- import { deepmerge } from '@mui/utils';
10
+ import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils';
11
+ import createSpacing from '../createTheme/createSpacing';
12
+ import createBreakpoints from '../createTheme/createBreakpoints';
11
13
  import cssVarsParser from './cssVarsParser';
12
14
  import ThemeProvider from '../ThemeProvider';
13
15
  import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
14
16
  import useCurrentColorScheme from './useCurrentColorScheme';
17
+ import createGetThemeVar from './createGetThemeVar';
15
18
  import { jsx as _jsx } from "react/jsx-runtime";
16
19
  import { jsxs as _jsxs } from "react/jsx-runtime";
17
20
  export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
@@ -25,6 +28,8 @@ export default function createCssVarsProvider(options) {
25
28
  prefix: designSystemPrefix = '',
26
29
  shouldSkipGeneratingVar
27
30
  } = options;
31
+ const systemSpacing = createSpacing(baseTheme.spacing);
32
+ const systemBreakpoints = createBreakpoints(baseTheme.breakpoints ?? {});
28
33
 
29
34
  if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme?.dark]) {
30
35
  console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -51,17 +56,21 @@ export default function createCssVarsProvider(options) {
51
56
  defaultMode = desisgnSystemMode,
52
57
  defaultColorScheme = designSystemColorScheme
53
58
  }) {
59
+ // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
60
+ // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
61
+ const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
62
+
54
63
  const {
55
64
  colorSchemes: baseColorSchemes = {}
56
- } = baseTheme,
57
- restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
65
+ } = clonedBaseTheme,
66
+ restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
58
67
 
59
68
  const {
60
69
  colorSchemes: colorSchemesProp = {}
61
70
  } = themeProp,
62
71
  restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
63
72
 
64
- const hasMounted = React.useRef(null); // eslint-disable-next-line prefer-const
73
+ const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
65
74
 
66
75
  let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
67
76
  {
@@ -114,7 +123,10 @@ export default function createCssVarsProvider(options) {
114
123
  mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
115
124
  components,
116
125
  colorSchemes,
117
- vars: rootVars
126
+ vars: rootVars,
127
+ spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
128
+ breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints,
129
+ getThemeVar: createGetThemeVar(prefix)
118
130
  });
119
131
  const styleSheet = {};
120
132
  Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -148,10 +160,11 @@ export default function createCssVarsProvider(options) {
148
160
  });
149
161
  React.useEffect(() => {
150
162
  if (colorScheme) {
151
- document.body.setAttribute(attribute, colorScheme);
163
+ // attaches attribute to <html> because the css variables are attached to :root (html)
164
+ document.documentElement.setAttribute(attribute, colorScheme);
152
165
  }
153
166
  }, [colorScheme, attribute]);
154
- React.useEffect(() => {
167
+ useEnhancedEffect(() => {
155
168
  if (!mode || !enableColorScheme) {
156
169
  return undefined;
157
170
  }
@@ -190,6 +203,9 @@ export default function createCssVarsProvider(options) {
190
203
  }, [colorScheme]);
191
204
  React.useEffect(() => {
192
205
  hasMounted.current = true;
206
+ return () => {
207
+ hasMounted.current = false;
208
+ };
193
209
  }, []);
194
210
  return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
195
211
  value: {
package/modern/cssVars/createGetThemeVar.js ADDED
@@ -0,0 +1,15 @@
1
+ export default function createGetThemeVar(prefix = '') {
2
+ function appendVar(...vars) {
3
+ if (!vars.length) {
4
+ return '';
5
+ }
6
+
7
+ return `, var(--${prefix ? `${prefix}-` : ''}${vars[0]}${appendVar(...vars.slice(1))})`;
8
+ }
9
+
10
+ const getThemeVar = (field, ...vars) => {
11
+ return `var(--${prefix ? `${prefix}-` : ''}${field}${appendVar(...vars)})`;
12
+ };
13
+
14
+ return getThemeVar;
15
+ }
package/modern/cssVars/cssVarsParser.js CHANGED
@@ -1,5 +1,3 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
-
3
1
  /**
4
2
  * This function create an object from keys, value and then assign to target
5
3
  *
@@ -45,14 +43,16 @@ export const assignNestedKeys = (obj, keys, value) => {
45
43
  * // ['palette', 'primary', 'main'] '#000000'
46
44
  */
47
45
 
48
- export const walkObjectDeep = (obj, callback) => {
46
+ export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
49
47
  function recurse(object, parentKeys = []) {
50
48
  Object.entries(object).forEach(([key, value]) => {
51
- if (value !== undefined && value !== null) {
52
- if (typeof value === 'object' && Object.keys(value).length > 0) {
53
- recurse(value, [...parentKeys, key]);
54
- } else {
55
- callback([...parentKeys, key], value, object);
49
+ if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
50
+ if (value !== undefined && value !== null) {
51
+ if (typeof value === 'object' && Object.keys(value).length > 0) {
52
+ recurse(value, [...parentKeys, key]);
53
+ } else {
54
+ callback([...parentKeys, key], value, object);
55
+ }
56
56
  }
57
57
  }
58
58
  });
@@ -102,10 +102,6 @@ const getCssValue = (keys, value) => {
102
102
 
103
103
 
104
104
  export default function cssVarsParser(theme, options) {
105
- const clonedTheme = _extends({}, theme);
106
-
107
- delete clonedTheme.vars; // remove 'vars' from the structure
108
-
109
105
  const {
110
106
  prefix,
111
107
  basePrefix = '',
@@ -113,13 +109,18 @@ export default function cssVarsParser(theme, options) {
113
109
  } = options || {};
114
110
  const css = {};
115
111
  const vars = {};
116
- walkObjectDeep(clonedTheme, (keys, val, scope) => {
112
+ walkObjectDeep(theme, (keys, val, scope) => {
117
113
  if (typeof val === 'string' || typeof val === 'number') {
118
114
  let value = val;
119
115
 
120
116
  if (typeof value === 'string' && value.startsWith('var')) {
121
117
  // replace the value of the `scope` object with the prefix or remove basePrefix from the value
122
- value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
118
+ if (!basePrefix && prefix) {
119
+ value = value.replace(/var\(--/g, `var(--${prefix}-`);
120
+ } else {
121
+ value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
122
+ } // scope is the deepest object in the tree, keys is the theme path keys
123
+
123
124
 
124
125
  scope[keys.slice(-1)[0]] = value;
125
126
  }
@@ -133,7 +134,8 @@ export default function cssVarsParser(theme, options) {
133
134
  assignNestedKeys(vars, keys, `var(${cssVar})`);
134
135
  }
135
136
  }
136
- });
137
+ }, keys => keys[0] === 'vars' // skip 'vars/*' paths
138
+ );
137
139
  return {
138
140
  css,
139
141
  vars
package/modern/cssVars/getInitColorSchemeScript.js CHANGED
@@ -34,7 +34,7 @@ export default function getInitColorSchemeScript(options) {
34
34
  colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
35
35
  }
36
36
  if (colorScheme) {
37
- document.body.setAttribute('${attribute}', colorScheme);
37
+ document.documentElement.setAttribute('${attribute}', colorScheme);
38
38
  }
39
39
  } catch (e) {} })();`
40
40
  }
package/modern/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v5.2.2
1
+ /** @license MUI v5.2.6
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -43,4 +43,5 @@ export { default as useTheme } from './useTheme';
43
43
  export { default as useThemeWithoutDefault } from './useThemeWithoutDefault';
44
44
  export * from './colorManipulator';
45
45
  export { default as ThemeProvider } from './ThemeProvider';
46
- export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
46
+ export { default as unstable_createCssVarsProvider } from './cssVars/createCssVarsProvider';
47
+ export { default as unstable_createGetThemeVar } from './cssVars/createGetThemeVar';
package/modern/useThemeProps/getThemeProps.js CHANGED
@@ -1,6 +1,4 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
-
3
- /* eslint-disable no-restricted-syntax */
1
+ import { internal_resolveProps as resolveProps } from '@mui/utils';
4
2
  export default function getThemeProps(params) {
5
3
  const {
6
4
  theme,
@@ -12,18 +10,5 @@ export default function getThemeProps(params) {
12
10
  return props;
13
11
  }
14
12
 
15
- const output = _extends({}, props); // Resolve default props, code borrow from React source.
16
- // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
17
-
18
-
19
- const defaultProps = theme.components[name].defaultProps;
20
- let propName;
21
-
22
- for (propName in defaultProps) {
23
- if (output[propName] === undefined) {
24
- output[propName] = defaultProps[propName];
25
- }
26
- }
27
-
28
- return output;
13
+ return resolveProps(theme.components[name].defaultProps, props);
29
14
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/system",
3
- "version": "5.2.2",
3
+ "version": "5.2.6",
4
4
  "private": false,
5
5
  "author": "MUI Team",
6
6
  "description": "CSS utilities for rapidly laying out custom designs.",
@@ -23,7 +23,7 @@
23
23
  "homepage": "https://mui.com/system/basics/",
24
24
  "funding": {
25
25
  "type": "opencollective",
26
- "url": "https://opencollective.com/material-ui"
26
+ "url": "https://opencollective.com/mui"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "@emotion/react": "^11.5.0",
@@ -44,10 +44,10 @@
44
44
  },
45
45
  "dependencies": {
46
46
  "@babel/runtime": "^7.16.3",
47
- "@mui/private-theming": "^5.2.2",
48
- "@mui/styled-engine": "^5.2.0",
47
+ "@mui/private-theming": "^5.2.3",
48
+ "@mui/styled-engine": "^5.2.6",
49
49
  "@mui/types": "^7.1.0",
50
- "@mui/utils": "^5.2.2",
50
+ "@mui/utils": "^5.2.3",
51
51
  "clsx": "^1.1.1",
52
52
  "csstype": "^3.0.10",
53
53
  "prop-types": "^15.7.2"
package/styleFunctionSx/styleFunctionSx.d.ts CHANGED
@@ -57,7 +57,7 @@ export type SystemStyleObject<Theme extends object = {}> =
57
57
  export type SxProps<Theme extends object = {}> =
58
58
  | SystemStyleObject<Theme>
59
59
  | ((theme: Theme) => SystemStyleObject<Theme>)
60
- | Array<SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
60
+ | Array<boolean | SystemStyleObject<Theme> | ((theme: Theme) => SystemStyleObject<Theme>)>;
61
61
 
62
62
  // eslint-disable-next-line @typescript-eslint/naming-convention
63
63
  export default function unstable_styleFunctionSx(props: object): object;
package/useThemeProps/getThemeProps.js CHANGED
@@ -1,15 +1,12 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
3
  Object.defineProperty(exports, "__esModule", {
6
4
  value: true
7
5
  });
8
6
  exports.default = getThemeProps;
9
7
 
10
- var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
8
+ var _utils = require("@mui/utils");
11
9
 
12
- /* eslint-disable no-restricted-syntax */
13
10
  function getThemeProps(params) {
14
11
  const {
15
12
  theme,
@@ -21,17 +18,5 @@ function getThemeProps(params) {
21
18
  return props;
22
19
  }
23
20
 
24
- const output = (0, _extends2.default)({}, props); // Resolve default props, code borrow from React source.
25
- // https://github.com/facebook/react/blob/15a8f031838a553e41c0b66eb1bcf1da8448104d/packages/react/src/ReactElement.js#L221
26
-
27
- const defaultProps = theme.components[name].defaultProps;
28
- let propName;
29
-
30
- for (propName in defaultProps) {
31
- if (output[propName] === undefined) {
32
- output[propName] = defaultProps[propName];
33
- }
34
- }
35
-
36
- return output;
21
+ return (0, _utils.internal_resolveProps)(theme.components[name].defaultProps, props);
37
22
  }