@mui/system 5.10.13 → 5.10.14

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 (206) hide show
  1. package/Box/Box.js +1 -10
  2. package/Box/Box.spec.d.ts +1 -1
  3. package/Box/index.js +0 -2
  4. package/CHANGELOG.md +70 -2
  5. package/Container/Container.d.ts +13 -13
  6. package/Container/Container.js +2 -17
  7. package/Container/ContainerProps.d.ts +40 -40
  8. package/Container/containerClasses.d.ts +22 -22
  9. package/Container/containerClasses.js +0 -3
  10. package/Container/createContainer.d.ts +18 -18
  11. package/Container/createContainer.js +15 -37
  12. package/Container/index.js +0 -6
  13. package/Stack/Stack.d.ts +13 -13
  14. package/Stack/Stack.js +1 -12
  15. package/Stack/StackProps.d.ts +42 -42
  16. package/Stack/createStack.d.ts +21 -21
  17. package/Stack/createStack.js +10 -48
  18. package/Stack/index.d.ts +5 -5
  19. package/Stack/index.js +0 -9
  20. package/Stack/stackClasses.d.ts +8 -8
  21. package/Stack/stackClasses.js +0 -3
  22. package/ThemeProvider/ThemeProvider.js +2 -22
  23. package/ThemeProvider/index.js +0 -2
  24. package/Unstable_Grid/Grid.d.ts +12 -12
  25. package/Unstable_Grid/Grid.js +6 -42
  26. package/Unstable_Grid/GridProps.d.ts +162 -162
  27. package/Unstable_Grid/createGrid.d.ts +11 -11
  28. package/Unstable_Grid/createGrid.js +19 -49
  29. package/Unstable_Grid/gridClasses.d.ts +20 -20
  30. package/Unstable_Grid/gridClasses.js +8 -7
  31. package/Unstable_Grid/gridGenerator.d.ts +29 -28
  32. package/Unstable_Grid/gridGenerator.js +22 -63
  33. package/Unstable_Grid/index.d.ts +5 -5
  34. package/Unstable_Grid/index.js +0 -9
  35. package/borders.js +0 -14
  36. package/breakpoints.js +3 -32
  37. package/colorManipulator.js +13 -55
  38. package/compose.js +0 -7
  39. package/createBox.js +5 -20
  40. package/createBox.spec.d.ts +1 -1
  41. package/createStyled.js +27 -71
  42. package/createTheme/createBreakpoints.js +22 -37
  43. package/createTheme/createSpacing.d.ts +10 -10
  44. package/createTheme/createSpacing.js +4 -8
  45. package/createTheme/createTheme.js +6 -16
  46. package/createTheme/index.js +0 -2
  47. package/cssGrid.js +0 -21
  48. package/cssVars/createCssVarsProvider.js +24 -72
  49. package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
  50. package/cssVars/createGetCssVar.d.ts +5 -5
  51. package/cssVars/createGetCssVar.js +2 -7
  52. package/cssVars/cssVarsParser.d.ts +65 -65
  53. package/cssVars/cssVarsParser.js +3 -15
  54. package/cssVars/getInitColorSchemeScript.d.ts +42 -42
  55. package/cssVars/getInitColorSchemeScript.js +0 -6
  56. package/cssVars/index.d.ts +3 -3
  57. package/cssVars/index.js +0 -3
  58. package/cssVars/useCurrentColorScheme.d.ts +53 -53
  59. package/cssVars/useCurrentColorScheme.js +20 -49
  60. package/display.js +0 -6
  61. package/esm/Box/Box.js +1 -6
  62. package/esm/Container/Container.js +3 -14
  63. package/esm/Container/createContainer.js +15 -25
  64. package/esm/Stack/Stack.js +1 -9
  65. package/esm/Stack/createStack.js +10 -29
  66. package/esm/ThemeProvider/ThemeProvider.js +2 -11
  67. package/esm/Unstable_Grid/Grid.js +6 -39
  68. package/esm/Unstable_Grid/createGrid.js +18 -35
  69. package/esm/Unstable_Grid/gridClasses.js +8 -4
  70. package/esm/Unstable_Grid/gridGenerator.js +20 -38
  71. package/esm/borders.js +0 -6
  72. package/esm/breakpoints.js +7 -22
  73. package/esm/colorManipulator.js +13 -43
  74. package/esm/compose.js +0 -5
  75. package/esm/createBox.js +5 -7
  76. package/esm/createStyled.js +27 -64
  77. package/esm/createTheme/createBreakpoints.js +22 -34
  78. package/esm/createTheme/createSpacing.js +4 -7
  79. package/esm/createTheme/createTheme.js +6 -9
  80. package/esm/cssGrid.js +0 -9
  81. package/esm/cssVars/createCssVarsProvider.js +24 -58
  82. package/esm/cssVars/createGetCssVar.js +2 -6
  83. package/esm/cssVars/cssVarsParser.js +3 -11
  84. package/esm/cssVars/useCurrentColorScheme.js +20 -44
  85. package/esm/getThemeValue.js +0 -2
  86. package/esm/index.js +1 -2
  87. package/esm/memoize.js +0 -1
  88. package/esm/merge.js +0 -3
  89. package/esm/palette.js +0 -3
  90. package/esm/propsToClassKey.js +4 -7
  91. package/esm/sizing.js +0 -5
  92. package/esm/spacing.js +3 -23
  93. package/esm/style.js +2 -19
  94. package/esm/styleFunctionSx/extendSxProp.js +3 -10
  95. package/esm/styleFunctionSx/styleFunctionSx.js +3 -16
  96. package/esm/sx/sx.js +0 -2
  97. package/esm/useTheme.js +0 -2
  98. package/esm/useThemeProps/getThemeProps.js +0 -2
  99. package/esm/useThemeWithoutDefault.js +0 -3
  100. package/flexbox.js +0 -4
  101. package/getThemeValue.js +0 -14
  102. package/index.js +1 -55
  103. package/index.spec.d.ts +1 -1
  104. package/legacy/Box/Box.js +1 -6
  105. package/legacy/Container/Container.js +3 -14
  106. package/legacy/Container/createContainer.js +29 -39
  107. package/legacy/Stack/Stack.js +1 -9
  108. package/legacy/Stack/createStack.js +17 -37
  109. package/legacy/ThemeProvider/ThemeProvider.js +3 -12
  110. package/legacy/Unstable_Grid/Grid.js +6 -39
  111. package/legacy/Unstable_Grid/createGrid.js +34 -53
  112. package/legacy/Unstable_Grid/gridGenerator.js +36 -58
  113. package/legacy/borders.js +0 -6
  114. package/legacy/breakpoints.js +9 -28
  115. package/legacy/colorManipulator.js +16 -48
  116. package/legacy/compose.js +0 -6
  117. package/legacy/createBox.js +9 -11
  118. package/legacy/createStyled.js +27 -68
  119. package/legacy/createTheme/createBreakpoints.js +20 -33
  120. package/legacy/createTheme/createSpacing.js +4 -9
  121. package/legacy/createTheme/createTheme.js +7 -13
  122. package/legacy/cssGrid.js +0 -9
  123. package/legacy/cssVars/createCssVarsProvider.js +90 -129
  124. package/legacy/cssVars/createGetCssVar.js +2 -10
  125. package/legacy/cssVars/cssVarsParser.js +7 -20
  126. package/legacy/cssVars/getInitColorSchemeScript.js +14 -15
  127. package/legacy/cssVars/useCurrentColorScheme.js +43 -69
  128. package/legacy/getThemeValue.js +0 -3
  129. package/legacy/index.js +2 -3
  130. package/legacy/memoize.js +0 -1
  131. package/legacy/merge.js +0 -3
  132. package/legacy/palette.js +0 -3
  133. package/legacy/propsToClassKey.js +2 -5
  134. package/legacy/sizing.js +0 -5
  135. package/legacy/spacing.js +6 -27
  136. package/legacy/style.js +6 -24
  137. package/legacy/styleFunctionSx/extendSxProp.js +3 -11
  138. package/legacy/styleFunctionSx/styleFunctionSx.js +6 -21
  139. package/legacy/sx/sx.js +0 -2
  140. package/legacy/useTheme.js +0 -2
  141. package/legacy/useThemeProps/getThemeProps.js +2 -4
  142. package/legacy/useThemeProps/useThemeProps.js +2 -2
  143. package/legacy/useThemeWithoutDefault.js +0 -3
  144. package/memoize.js +0 -2
  145. package/merge.js +0 -5
  146. package/modern/Box/Box.js +1 -6
  147. package/modern/Container/Container.js +3 -14
  148. package/modern/Container/createContainer.js +15 -25
  149. package/modern/Stack/Stack.js +1 -9
  150. package/modern/Stack/createStack.js +10 -29
  151. package/modern/ThemeProvider/ThemeProvider.js +2 -11
  152. package/modern/Unstable_Grid/Grid.js +6 -39
  153. package/modern/Unstable_Grid/createGrid.js +18 -34
  154. package/modern/Unstable_Grid/gridClasses.js +8 -4
  155. package/modern/Unstable_Grid/gridGenerator.js +20 -36
  156. package/modern/borders.js +0 -6
  157. package/modern/breakpoints.js +7 -21
  158. package/modern/colorManipulator.js +13 -43
  159. package/modern/compose.js +0 -5
  160. package/modern/createBox.js +5 -7
  161. package/modern/createStyled.js +27 -63
  162. package/modern/createTheme/createBreakpoints.js +22 -34
  163. package/modern/createTheme/createSpacing.js +4 -7
  164. package/modern/createTheme/createTheme.js +6 -9
  165. package/modern/cssGrid.js +0 -9
  166. package/modern/cssVars/createCssVarsProvider.js +24 -58
  167. package/modern/cssVars/createGetCssVar.js +2 -6
  168. package/modern/cssVars/cssVarsParser.js +3 -11
  169. package/modern/cssVars/useCurrentColorScheme.js +20 -44
  170. package/modern/getThemeValue.js +0 -2
  171. package/modern/index.js +2 -3
  172. package/modern/memoize.js +0 -1
  173. package/modern/merge.js +0 -3
  174. package/modern/palette.js +0 -3
  175. package/modern/propsToClassKey.js +4 -7
  176. package/modern/sizing.js +0 -4
  177. package/modern/spacing.js +3 -22
  178. package/modern/style.js +2 -19
  179. package/modern/styleFunctionSx/extendSxProp.js +3 -10
  180. package/modern/styleFunctionSx/styleFunctionSx.js +3 -16
  181. package/modern/sx/sx.js +0 -2
  182. package/modern/useTheme.js +0 -2
  183. package/modern/useThemeProps/getThemeProps.js +0 -2
  184. package/modern/useThemeWithoutDefault.js +0 -3
  185. package/package.json +6 -6
  186. package/palette.js +0 -6
  187. package/positions.js +0 -6
  188. package/propsToClassKey.js +4 -10
  189. package/responsivePropType.js +0 -3
  190. package/shadows.js +0 -3
  191. package/sizing.js +0 -11
  192. package/spacing.js +3 -37
  193. package/style.js +2 -24
  194. package/styleFunctionSx/extendSxProp.js +3 -15
  195. package/styleFunctionSx/index.js +0 -5
  196. package/styleFunctionSx/styleFunctionSx.js +3 -21
  197. package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
  198. package/styled.js +0 -3
  199. package/sx/index.js +0 -2
  200. package/sx/sx.js +0 -4
  201. package/typography.js +0 -4
  202. package/useTheme.js +0 -6
  203. package/useThemeProps/getThemeProps.js +0 -4
  204. package/useThemeProps/index.js +0 -3
  205. package/useThemeProps/useThemeProps.js +0 -4
  206. package/useThemeWithoutDefault.js +0 -4
@@ -1,30 +1,24 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
8
  exports.unstable_createStyleFunctionSx = unstable_createStyleFunctionSx;
10
-
11
9
  var _merge = _interopRequireDefault(require("../merge"));
12
-
13
10
  var _getThemeValue = require("../getThemeValue");
14
-
15
11
  var _breakpoints = require("../breakpoints");
16
-
17
12
  function objectsHaveSameKeys(...objects) {
18
13
  const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []);
19
14
  const union = new Set(allKeys);
20
15
  return objects.every(object => union.size === Object.keys(object).length);
21
16
  }
22
-
23
17
  function callIfFn(maybeFn, arg) {
24
18
  return typeof maybeFn === 'function' ? maybeFn(arg) : maybeFn;
25
- } // eslint-disable-next-line @typescript-eslint/naming-convention
26
-
19
+ }
27
20
 
21
+ // eslint-disable-next-line @typescript-eslint/naming-convention
28
22
  function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.styleFunctionMapping) {
29
23
  const propToStyleFunction = Object.keys(styleFunctionMapping).reduce((acc, styleFnName) => {
30
24
  styleFunctionMapping[styleFnName].filterProps.forEach(propName => {
@@ -32,7 +26,6 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
32
26
  });
33
27
  return acc;
34
28
  }, {});
35
-
36
29
  function getThemeValue(prop, value, theme) {
37
30
  const inputProps = {
38
31
  [prop]: value,
@@ -43,43 +36,36 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
43
36
  [prop]: value
44
37
  };
45
38
  }
46
-
47
39
  function styleFunctionSx(props) {
48
40
  const {
49
41
  sx,
50
42
  theme = {}
51
43
  } = props || {};
52
-
53
44
  if (!sx) {
54
45
  return null; // Emotion & styled-components will neglect null
55
46
  }
47
+
56
48
  /*
57
49
  * Receive `sxInput` as object or callback
58
50
  * and then recursively check keys & values to create media query object styles.
59
51
  * (the result will be used in `styled`)
60
52
  */
61
-
62
-
63
53
  function traverse(sxInput) {
64
54
  let sxObject = sxInput;
65
-
66
55
  if (typeof sxInput === 'function') {
67
56
  sxObject = sxInput(theme);
68
57
  } else if (typeof sxInput !== 'object') {
69
58
  // value
70
59
  return sxInput;
71
60
  }
72
-
73
61
  if (!sxObject) {
74
62
  return null;
75
63
  }
76
-
77
64
  const emptyBreakpoints = (0, _breakpoints.createEmptyBreakpointObject)(theme.breakpoints);
78
65
  const breakpointsKeys = Object.keys(emptyBreakpoints);
79
66
  let css = emptyBreakpoints;
80
67
  Object.keys(sxObject).forEach(styleKey => {
81
68
  const value = callIfFn(sxObject[styleKey], theme);
82
-
83
69
  if (value !== null && value !== undefined) {
84
70
  if (typeof value === 'object') {
85
71
  if (propToStyleFunction[styleKey]) {
@@ -90,7 +76,6 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
90
76
  }, value, x => ({
91
77
  [styleKey]: x
92
78
  }));
93
-
94
79
  if (objectsHaveSameKeys(breakpointsValues, value)) {
95
80
  css[styleKey] = styleFunctionSx({
96
81
  sx: value,
@@ -107,13 +92,10 @@ function unstable_createStyleFunctionSx(styleFunctionMapping = _getThemeValue.st
107
92
  });
108
93
  return (0, _breakpoints.removeUnusedBreakpoints)(breakpointsKeys, css);
109
94
  }
110
-
111
95
  return Array.isArray(sx) ? sx.map(traverse) : traverse(sx);
112
96
  }
113
-
114
97
  return styleFunctionSx;
115
98
  }
116
-
117
99
  const styleFunctionSx = unstable_createStyleFunctionSx();
118
100
  styleFunctionSx.filterProps = ['sx'];
119
101
  var _default = styleFunctionSx;
@@ -1 +1 @@
1
- export {};
1
+ export {};
package/styled.js CHANGED
@@ -1,14 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _createStyled = _interopRequireDefault(require("./createStyled"));
11
-
12
9
  const styled = (0, _createStyled.default)();
13
10
  var _default = styled;
14
11
  exports.default = _default;
package/sx/index.js CHANGED
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
11
10
  return _sx.default;
12
11
  }
13
12
  });
14
-
15
13
  var _sx = _interopRequireDefault(require("./sx"));
package/sx/sx.js CHANGED
@@ -1,14 +1,11 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = void 0;
9
-
10
8
  var _styleFunctionSx = _interopRequireDefault(require("../styleFunctionSx"));
11
-
12
9
  function sx(styles) {
13
10
  return ({
14
11
  theme
@@ -17,6 +14,5 @@ function sx(styles) {
17
14
  theme
18
15
  });
19
16
  }
20
-
21
17
  var _default = sx;
22
18
  exports.default = _default;
package/typography.js CHANGED
@@ -1,16 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.typographyVariant = exports.textTransform = exports.textAlign = exports.lineHeight = exports.letterSpacing = exports.fontWeight = exports.fontStyle = exports.fontSize = exports.fontFamily = exports.default = void 0;
9
-
10
8
  var _style = _interopRequireDefault(require("./style"));
11
-
12
9
  var _compose = _interopRequireDefault(require("./compose"));
13
-
14
10
  const fontFamily = (0, _style.default)({
15
11
  prop: 'fontFamily',
16
12
  themeKey: 'typography'
package/useTheme.js CHANGED
@@ -1,22 +1,16 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.systemDefaultTheme = exports.default = void 0;
9
-
10
8
  var _createTheme = _interopRequireDefault(require("./createTheme"));
11
-
12
9
  var _useThemeWithoutDefault = _interopRequireDefault(require("./useThemeWithoutDefault"));
13
-
14
10
  const systemDefaultTheme = (0, _createTheme.default)();
15
11
  exports.systemDefaultTheme = systemDefaultTheme;
16
-
17
12
  function useTheme(defaultTheme = systemDefaultTheme) {
18
13
  return (0, _useThemeWithoutDefault.default)(defaultTheme);
19
14
  }
20
-
21
15
  var _default = useTheme;
22
16
  exports.default = _default;
@@ -4,19 +4,15 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = getThemeProps;
7
-
8
7
  var _utils = require("@mui/utils");
9
-
10
8
  function getThemeProps(params) {
11
9
  const {
12
10
  theme,
13
11
  name,
14
12
  props
15
13
  } = params;
16
-
17
14
  if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
18
15
  return props;
19
16
  }
20
-
21
17
  return (0, _utils.internal_resolveProps)(theme.components[name].defaultProps, props);
22
18
  }
@@ -1,7 +1,6 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "getThemeProps", {
17
16
  return _getThemeProps.default;
18
17
  }
19
18
  });
20
-
21
19
  var _useThemeProps = _interopRequireDefault(require("./useThemeProps"));
22
-
23
20
  var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
@@ -1,16 +1,12 @@
1
1
  "use strict";
2
2
 
3
3
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
-
5
4
  Object.defineProperty(exports, "__esModule", {
6
5
  value: true
7
6
  });
8
7
  exports.default = useThemeProps;
9
-
10
8
  var _getThemeProps = _interopRequireDefault(require("./getThemeProps"));
11
-
12
9
  var _useTheme = _interopRequireDefault(require("../useTheme"));
13
-
14
10
  function useThemeProps({
15
11
  props,
16
12
  name,
@@ -4,17 +4,13 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = void 0;
7
-
8
7
  var _privateTheming = require("@mui/private-theming");
9
-
10
8
  function isObjectEmpty(obj) {
11
9
  return Object.keys(obj).length === 0;
12
10
  }
13
-
14
11
  function useTheme(defaultTheme = null) {
15
12
  const contextTheme = (0, _privateTheming.useTheme)();
16
13
  return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
17
14
  }
18
-
19
15
  var _default = useTheme;
20
16
  exports.default = _default;