@mui/system 6.0.0-alpha.8 → 6.0.0-dev.20240529-082515-213b5e33ab

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 (13) hide show
  1. package/createStyled/createStyled.js +7 -10
  2. package/createTheme/applyStyles.d.ts +1 -1
  3. package/createTheme/applyStyles.js +1 -1
  4. package/cssVars/createCssVarsProvider.d.ts +1 -1
  5. package/index.js +1 -1
  6. package/modern/createStyled/createStyled.js +7 -10
  7. package/modern/createTheme/applyStyles.js +1 -1
  8. package/modern/index.js +1 -1
  9. package/node/Unstable_Grid/createGrid.js +2 -2
  10. package/node/createStyled/createStyled.js +7 -10
  11. package/node/createTheme/applyStyles.js +1 -1
  12. package/node/index.js +1 -1
  13. package/package.json +6 -6
package/createStyled/createStyled.js CHANGED
@@ -56,6 +56,11 @@ function processStyleArg(callableStyle, {
56
56
  ...props
57
57
  }));
58
58
  }
59
+ const mergedState = {
60
+ ...props,
61
+ ...ownerState,
62
+ ownerState
63
+ };
59
64
  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
60
65
  const {
61
66
  variants = [],
@@ -65,11 +70,7 @@ function processStyleArg(callableStyle, {
65
70
  variants.forEach(variant => {
66
71
  let isMatch = true;
67
72
  if (typeof variant.props === 'function') {
68
- isMatch = variant.props({
69
- ownerState,
70
- ...props,
71
- ...ownerState
72
- });
73
+ isMatch = variant.props(mergedState);
73
74
  } else {
74
75
  Object.keys(variant.props).forEach(key => {
75
76
  if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -81,11 +82,7 @@ function processStyleArg(callableStyle, {
81
82
  if (!Array.isArray(result)) {
82
83
  result = [result];
83
84
  }
84
- result.push(typeof variant.style === 'function' ? variant.style({
85
- ownerState,
86
- ...props,
87
- ...ownerState
88
- }) : variant.style);
85
+ result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
89
86
  }
90
87
  });
91
88
  return result;
package/createTheme/applyStyles.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface ApplyStyles<K extends string> {
6
6
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
7
7
  * It works with:
8
8
  * - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
9
- * - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
9
+ * - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
10
10
  * - Zero-runtime engine
11
11
  *
12
12
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.
package/createTheme/applyStyles.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
3
3
  * It works with:
4
4
  * - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
5
- * - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
5
+ * - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
6
6
  * - Zero-runtime engine
7
7
  *
8
8
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.
package/cssVars/createCssVarsProvider.d.ts CHANGED
@@ -90,7 +90,7 @@ export interface CreateCssVarsProviderResult<
90
90
  disableStyleSheetGeneration?: boolean;
91
91
  }
92
92
  >,
93
- ) => React.ReactElement;
93
+ ) => React.ReactElement<any>;
94
94
  useColorScheme: () => ColorSchemeContextValue<ColorScheme>;
95
95
  getInitColorSchemeScript: typeof getInitColorSchemeScript;
96
96
  }
package/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.0.0-alpha.8
2
+ * @mui/system v6.0.0-dev.20240529-082515-213b5e33ab
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/modern/createStyled/createStyled.js CHANGED
@@ -56,6 +56,11 @@ function processStyleArg(callableStyle, {
56
56
  ...props
57
57
  }));
58
58
  }
59
+ const mergedState = {
60
+ ...props,
61
+ ...ownerState,
62
+ ownerState
63
+ };
59
64
  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
60
65
  const {
61
66
  variants = [],
@@ -65,11 +70,7 @@ function processStyleArg(callableStyle, {
65
70
  variants.forEach(variant => {
66
71
  let isMatch = true;
67
72
  if (typeof variant.props === 'function') {
68
- isMatch = variant.props({
69
- ownerState,
70
- ...props,
71
- ...ownerState
72
- });
73
+ isMatch = variant.props(mergedState);
73
74
  } else {
74
75
  Object.keys(variant.props).forEach(key => {
75
76
  if (ownerState?.[key] !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -81,11 +82,7 @@ function processStyleArg(callableStyle, {
81
82
  if (!Array.isArray(result)) {
82
83
  result = [result];
83
84
  }
84
- result.push(typeof variant.style === 'function' ? variant.style({
85
- ownerState,
86
- ...props,
87
- ...ownerState
88
- }) : variant.style);
85
+ result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
89
86
  }
90
87
  });
91
88
  return result;
package/modern/createTheme/applyStyles.js CHANGED
@@ -2,7 +2,7 @@
2
2
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
3
3
  * It works with:
4
4
  * - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
5
- * - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
5
+ * - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
6
6
  * - Zero-runtime engine
7
7
  *
8
8
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.
package/modern/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.0.0-alpha.8
2
+ * @mui/system v6.0.0-dev.20240529-082515-213b5e33ab
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/node/Unstable_Grid/createGrid.js CHANGED
@@ -128,9 +128,9 @@ function createGrid(options = {}) {
128
128
  ...other,
129
129
  children: React.Children.map(children, child => {
130
130
  if ( /*#__PURE__*/React.isValidElement(child) && (0, _isMuiElement.default)(child, ['Grid'])) {
131
- var _child$props$unstable;
131
+ var _unstable_level;
132
132
  return /*#__PURE__*/React.cloneElement(child, {
133
- unstable_level: (_child$props$unstable = child.props.unstable_level) != null ? _child$props$unstable : level + 1
133
+ unstable_level: (_unstable_level = child.props.unstable_level) != null ? _unstable_level : level + 1
134
134
  });
135
135
  }
136
136
  return child;
package/node/createStyled/createStyled.js CHANGED
@@ -68,6 +68,11 @@ function processStyleArg(callableStyle, {
68
68
  ...props
69
69
  }));
70
70
  }
71
+ const mergedState = {
72
+ ...props,
73
+ ...ownerState,
74
+ ownerState
75
+ };
71
76
  if (!!resolvedStylesArg && typeof resolvedStylesArg === 'object' && Array.isArray(resolvedStylesArg.variants)) {
72
77
  const {
73
78
  variants = [],
@@ -77,11 +82,7 @@ function processStyleArg(callableStyle, {
77
82
  variants.forEach(variant => {
78
83
  let isMatch = true;
79
84
  if (typeof variant.props === 'function') {
80
- isMatch = variant.props({
81
- ownerState,
82
- ...props,
83
- ...ownerState
84
- });
85
+ isMatch = variant.props(mergedState);
85
86
  } else {
86
87
  Object.keys(variant.props).forEach(key => {
87
88
  if ((ownerState == null ? void 0 : ownerState[key]) !== variant.props[key] && props[key] !== variant.props[key]) {
@@ -93,11 +94,7 @@ function processStyleArg(callableStyle, {
93
94
  if (!Array.isArray(result)) {
94
95
  result = [result];
95
96
  }
96
- result.push(typeof variant.style === 'function' ? variant.style({
97
- ownerState,
98
- ...props,
99
- ...ownerState
100
- }) : variant.style);
97
+ result.push(typeof variant.style === 'function' ? variant.style(mergedState) : variant.style);
101
98
  }
102
99
  });
103
100
  return result;
package/node/createTheme/applyStyles.js CHANGED
@@ -8,7 +8,7 @@ exports.default = applyStyles;
8
8
  * A universal utility to style components with multiple color modes. Always use it from the theme object.
9
9
  * It works with:
10
10
  * - [Basic theme](https://mui.com/material-ui/customization/dark-mode/)
11
- * - [CSS theme variables](https://mui.com/material-ui/experimental-api/css-theme-variables/overview/)
11
+ * - [CSS theme variables](https://mui.com/material-ui/customization/css-theme-variables/overview/)
12
12
  * - Zero-runtime engine
13
13
  *
14
14
  * Tips: Use an array over object spread and place `theme.applyStyles()` last.
package/node/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  /**
2
- * @mui/system v6.0.0-alpha.8
2
+ * @mui/system v6.0.0-dev.20240529-082515-213b5e33ab
3
3
  *
4
4
  * @license MIT
5
5
  * This source code is licensed under the MIT license found in the
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@mui/system",
3
- "version": "6.0.0-alpha.8",
3
+ "version": "6.0.0-dev.20240529-082515-213b5e33ab",
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.",
@@ -26,14 +26,14 @@
26
26
  "url": "https://opencollective.com/mui-org"
27
27
  },
28
28
  "dependencies": {
29
- "@babel/runtime": "^7.24.5",
29
+ "@babel/runtime": "^7.24.6",
30
30
  "clsx": "^2.1.1",
31
31
  "csstype": "^3.1.3",
32
32
  "prop-types": "^15.8.1",
33
- "@mui/private-theming": "^6.0.0-alpha.8",
34
- "@mui/styled-engine": "^6.0.0-alpha.8",
35
- "@mui/utils": "^6.0.0-alpha.8",
36
- "@mui/types": "^7.2.14"
33
+ "@mui/types": "^7.2.14-dev.20240529-082515-213b5e33ab",
34
+ "@mui/utils": "^6.0.0-dev.20240529-082515-213b5e33ab",
35
+ "@mui/private-theming": "^6.0.0-dev.20240529-082515-213b5e33ab",
36
+ "@mui/styled-engine": "^6.0.0-dev.20240529-082515-213b5e33ab"
37
37
  },
38
38
  "peerDependencies": {
39
39
  "@emotion/react": "^11.5.0",