@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
@@ -5,22 +5,16 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.DEFAULT_MODE_STORAGE_KEY = exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = exports.DEFAULT_ATTRIBUTE = void 0;
7
7
  exports.default = getInitColorSchemeScript;
8
-
9
8
  var React = _interopRequireWildcard(require("react"));
10
-
11
9
  var _jsxRuntime = require("react/jsx-runtime");
12
-
13
10
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
14
-
15
11
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
16
-
17
12
  const DEFAULT_MODE_STORAGE_KEY = 'mode';
18
13
  exports.DEFAULT_MODE_STORAGE_KEY = DEFAULT_MODE_STORAGE_KEY;
19
14
  const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
20
15
  exports.DEFAULT_COLOR_SCHEME_STORAGE_KEY = DEFAULT_COLOR_SCHEME_STORAGE_KEY;
21
16
  const DEFAULT_ATTRIBUTE = 'data-color-scheme';
22
17
  exports.DEFAULT_ATTRIBUTE = DEFAULT_ATTRIBUTE;
23
-
24
18
  function getInitColorSchemeScript(options) {
25
19
  const {
26
20
  defaultMode = 'light',
@@ -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';
package/cssVars/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
  });
@@ -17,7 +16,5 @@ Object.defineProperty(exports, "getInitColorSchemeScript", {
17
16
  return _getInitColorSchemeScript.default;
18
17
  }
19
18
  });
20
-
21
19
  var _createCssVarsProvider = _interopRequireDefault(require("./createCssVarsProvider"));
22
-
23
20
  var _getInitColorSchemeScript = _interopRequireDefault(require("./getInitColorSchemeScript"));
@@ -1,53 +1,53 @@
1
- export declare type Mode = 'light' | 'dark' | 'system';
2
- export declare 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 declare 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 declare type Mode = 'light' | 'dark' | 'system';
2
+ export declare 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 declare 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,84 +1,63 @@
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 = useCurrentColorScheme;
9
8
  exports.getColorScheme = getColorScheme;
10
9
  exports.getSystemMode = getSystemMode;
11
-
12
10
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
13
-
14
11
  var React = _interopRequireWildcard(require("react"));
15
-
16
12
  var _getInitColorSchemeScript = require("./getInitColorSchemeScript");
17
-
18
13
  function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
19
-
20
14
  function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
21
-
22
15
  function getSystemMode(mode) {
23
16
  if (typeof window !== 'undefined' && mode === 'system') {
24
17
  const mql = window.matchMedia('(prefers-color-scheme: dark)');
25
-
26
18
  if (mql.matches) {
27
19
  return 'dark';
28
20
  }
29
-
30
21
  return 'light';
31
22
  }
32
-
33
23
  return undefined;
34
24
  }
35
-
36
25
  function processState(state, callback) {
37
26
  if (state.mode === 'light' || state.mode === 'system' && state.systemMode === 'light') {
38
27
  return callback('light');
39
28
  }
40
-
41
29
  if (state.mode === 'dark' || state.mode === 'system' && state.systemMode === 'dark') {
42
30
  return callback('dark');
43
31
  }
44
-
45
32
  return undefined;
46
33
  }
47
-
48
34
  function getColorScheme(state) {
49
35
  return processState(state, mode => {
50
36
  if (mode === 'light') {
51
37
  return state.lightColorScheme;
52
38
  }
53
-
54
39
  if (mode === 'dark') {
55
40
  return state.darkColorScheme;
56
41
  }
57
-
58
42
  return undefined;
59
43
  });
60
44
  }
61
-
62
45
  function initializeValue(key, defaultValue) {
63
46
  if (typeof window === 'undefined') {
64
47
  return undefined;
65
48
  }
66
-
67
49
  let value;
68
-
69
50
  try {
70
51
  value = localStorage.getItem(key) || undefined;
71
-
72
52
  if (!value) {
73
53
  // the first time that user enters the site.
74
54
  localStorage.setItem(key, defaultValue);
75
55
  }
76
- } catch (e) {// Unsupported
56
+ } catch (e) {
57
+ // Unsupported
77
58
  }
78
-
79
59
  return value || defaultValue;
80
60
  }
81
-
82
61
  function useCurrentColorScheme(options) {
83
62
  const {
84
63
  defaultMode = 'light',
@@ -108,14 +87,12 @@ function useCurrentColorScheme(options) {
108
87
  // do nothing if mode does not change
109
88
  return currentState;
110
89
  }
111
-
112
90
  const newMode = !mode ? defaultMode : mode;
113
-
114
91
  try {
115
92
  localStorage.setItem(modeStorageKey, newMode);
116
- } catch (e) {// Unsupported
93
+ } catch (e) {
94
+ // Unsupported
117
95
  }
118
-
119
96
  return (0, _extends2.default)({}, currentState, {
120
97
  mode: newMode,
121
98
  systemMode: getSystemMode(newMode)
@@ -128,9 +105,9 @@ function useCurrentColorScheme(options) {
128
105
  try {
129
106
  localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
130
107
  localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
131
- } catch (e) {// Unsupported
108
+ } catch (e) {
109
+ // Unsupported
132
110
  }
133
-
134
111
  return (0, _extends2.default)({}, currentState, {
135
112
  lightColorScheme: defaultLightColorScheme,
136
113
  darkColorScheme: defaultDarkColorScheme
@@ -145,13 +122,12 @@ function useCurrentColorScheme(options) {
145
122
  processState(currentState, mode => {
146
123
  try {
147
124
  localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
148
- } catch (e) {// Unsupported
125
+ } catch (e) {
126
+ // Unsupported
149
127
  }
150
-
151
128
  if (mode === 'light') {
152
129
  newState.lightColorScheme = value;
153
130
  }
154
-
155
131
  if (mode === 'dark') {
156
132
  newState.darkColorScheme = value;
157
133
  }
@@ -164,33 +140,30 @@ function useCurrentColorScheme(options) {
164
140
  const newState = (0, _extends2.default)({}, currentState);
165
141
  const newLightColorScheme = value.light === null ? defaultLightColorScheme : value.light;
166
142
  const newDarkColorScheme = value.dark === null ? defaultDarkColorScheme : value.dark;
167
-
168
143
  if (newLightColorScheme) {
169
144
  if (!joinedColorSchemes.includes(newLightColorScheme)) {
170
145
  console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
171
146
  } else {
172
147
  newState.lightColorScheme = newLightColorScheme;
173
-
174
148
  try {
175
149
  localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
176
- } catch (error) {// Unsupported
150
+ } catch (error) {
151
+ // Unsupported
177
152
  }
178
153
  }
179
154
  }
180
-
181
155
  if (newDarkColorScheme) {
182
156
  if (!joinedColorSchemes.includes(newDarkColorScheme)) {
183
157
  console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
184
158
  } else {
185
159
  newState.darkColorScheme = newDarkColorScheme;
186
-
187
160
  try {
188
161
  localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
189
- } catch (error) {// Unsupported
162
+ } catch (error) {
163
+ // Unsupported
190
164
  }
191
165
  }
192
166
  }
193
-
194
167
  return newState;
195
168
  });
196
169
  }
@@ -201,25 +174,27 @@ function useCurrentColorScheme(options) {
201
174
  systemMode: e != null && e.matches ? 'dark' : 'light'
202
175
  }));
203
176
  }
204
- }, [state.mode]); // Ref hack to avoid adding handleMediaQuery as a dep
177
+ }, [state.mode]);
205
178
 
179
+ // Ref hack to avoid adding handleMediaQuery as a dep
206
180
  const mediaListener = React.useRef(handleMediaQuery);
207
181
  mediaListener.current = handleMediaQuery;
208
182
  React.useEffect(() => {
209
- const handler = (...args) => mediaListener.current(...args); // Always listen to System preference
183
+ const handler = (...args) => mediaListener.current(...args);
210
184
 
185
+ // Always listen to System preference
186
+ const media = window.matchMedia('(prefers-color-scheme: dark)');
211
187
 
212
- const media = window.matchMedia('(prefers-color-scheme: dark)'); // Intentionally use deprecated listener methods to support iOS & old browsers
213
-
188
+ // Intentionally use deprecated listener methods to support iOS & old browsers
214
189
  media.addListener(handler);
215
190
  handler(media);
216
191
  return () => media.removeListener(handler);
217
- }, []); // Handle when localStorage has changed
192
+ }, []);
218
193
 
194
+ // Handle when localStorage has changed
219
195
  React.useEffect(() => {
220
196
  const handleStorage = event => {
221
197
  const value = event.newValue;
222
-
223
198
  if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
224
199
  // If the key is deleted, value will be null then reset color scheme to the default one.
225
200
  if (event.key.endsWith('light')) {
@@ -227,25 +202,21 @@ function useCurrentColorScheme(options) {
227
202
  light: value
228
203
  });
229
204
  }
230
-
231
205
  if (event.key.endsWith('dark')) {
232
206
  setColorScheme({
233
207
  dark: value
234
208
  });
235
209
  }
236
210
  }
237
-
238
211
  if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
239
212
  setMode(value || defaultMode);
240
213
  }
241
214
  };
242
-
243
215
  if (storageWindow) {
244
216
  // For syncing color-scheme changes between iframes
245
217
  storageWindow.addEventListener('storage', handleStorage);
246
218
  return () => storageWindow.removeEventListener('storage', handleStorage);
247
219
  }
248
-
249
220
  return undefined;
250
221
  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow]);
251
222
  return (0, _extends2.default)({}, state, {
package/display.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.whiteSpace = exports.visibility = exports.textOverflow = exports.overflow = exports.displayRaw = exports.displayPrint = exports.default = void 0;
9
-
10
8
  var _style = _interopRequireDefault(require("./style"));
11
-
12
9
  var _compose = _interopRequireDefault(require("./compose"));
13
-
14
10
  const displayPrint = (0, _style.default)({
15
11
  prop: 'displayPrint',
16
12
  cssProperty: false,
@@ -41,7 +37,5 @@ const whiteSpace = (0, _style.default)({
41
37
  prop: 'whiteSpace'
42
38
  });
43
39
  exports.whiteSpace = whiteSpace;
44
-
45
40
  var _default = (0, _compose.default)(displayPrint, displayRaw, overflow, textOverflow, visibility, whiteSpace);
46
-
47
41
  exports.default = _default;
package/esm/Box/Box.js CHANGED
@@ -1,25 +1,20 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import createBox from '../createBox';
3
3
  const Box = createBox();
4
- process.env.NODE_ENV !== "production" ? Box.propTypes
5
- /* remove-proptypes */
6
- = {
4
+ process.env.NODE_ENV !== "production" ? Box.propTypes /* remove-proptypes */ = {
7
5
  // ----------------------------- Warning --------------------------------
8
6
  // | These PropTypes are generated from the TypeScript type definitions |
9
7
  // | To update them edit the d.ts file and run "yarn proptypes" |
10
8
  // ----------------------------------------------------------------------
11
-
12
9
  /**
13
10
  * @ignore
14
11
  */
15
12
  children: PropTypes.node,
16
-
17
13
  /**
18
14
  * The component used for the root node.
19
15
  * Either a string to use a HTML element or a component.
20
16
  */
21
17
  component: PropTypes.elementType,
22
-
23
18
  /**
24
19
  * The system prop that allows defining system overrides as well as additional CSS styles.
25
20
  */
@@ -1,5 +1,6 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import createContainer from './createContainer';
3
+
3
4
  /**
4
5
  *
5
6
  * Demos:
@@ -11,38 +12,30 @@ import createContainer from './createContainer';
11
12
  *
12
13
  * - [Container API](https://mui.com/system/api/container/)
13
14
  */
14
-
15
15
  const Container = createContainer();
16
- process.env.NODE_ENV !== "production" ? Container.propTypes
17
- /* remove-proptypes */
18
- = {
16
+ process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
19
17
  // ----------------------------- Warning --------------------------------
20
18
  // | These PropTypes are generated from the TypeScript type definitions |
21
19
  // | To update them edit TypeScript types and run "yarn proptypes" |
22
20
  // ----------------------------------------------------------------------
23
-
24
21
  /**
25
22
  * @ignore
26
23
  */
27
24
  children: PropTypes.node,
28
-
29
25
  /**
30
26
  * Override or extend the styles applied to the component.
31
27
  */
32
28
  classes: PropTypes.object,
33
-
34
29
  /**
35
30
  * The component used for the root node.
36
31
  * Either a string to use a HTML element or a component.
37
32
  */
38
33
  component: PropTypes.elementType,
39
-
40
34
  /**
41
35
  * If `true`, the left and right padding is removed.
42
36
  * @default false
43
37
  */
44
38
  disableGutters: PropTypes.bool,
45
-
46
39
  /**
47
40
  * Set the max-width to match the min-width of the current breakpoint.
48
41
  * This is useful if you'd prefer to design for a fixed set of sizes
@@ -51,17 +44,13 @@ process.env.NODE_ENV !== "production" ? Container.propTypes
51
44
  * @default false
52
45
  */
53
46
  fixed: PropTypes.bool,
54
-
55
47
  /**
56
48
  * Determine the max-width of the container.
57
49
  * The container width grows with the size of the screen.
58
50
  * Set to `false` to disable `maxWidth`.
59
51
  * @default 'lg'
60
52
  */
61
- maxWidth: PropTypes
62
- /* @typescript-to-proptypes-ignore */
63
- .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
64
-
53
+ maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
65
54
  /**
66
55
  * The system prop that allows defining system overrides as well as additional CSS styles.
67
56
  */
@@ -20,18 +20,15 @@ const defaultCreateStyledComponent = systemStyled('div', {
20
20
  return [styles.root, styles[`maxWidth${capitalize(String(ownerState.maxWidth))}`], ownerState.fixed && styles.fixed, ownerState.disableGutters && styles.disableGutters];
21
21
  }
22
22
  });
23
-
24
23
  const useThemePropsDefault = inProps => useThemePropsSystem({
25
24
  props: inProps,
26
25
  name: 'MuiContainer',
27
26
  defaultTheme
28
27
  });
29
-
30
28
  const useUtilityClasses = (ownerState, componentName) => {
31
29
  const getContainerUtilityClass = slot => {
32
30
  return generateUtilityClass(componentName, slot);
33
31
  };
34
-
35
32
  const {
36
33
  classes,
37
34
  fixed,
@@ -43,7 +40,6 @@ const useUtilityClasses = (ownerState, componentName) => {
43
40
  };
44
41
  return composeClasses(slots, getContainerUtilityClass, classes);
45
42
  };
46
-
47
43
  export default function createContainer(options = {}) {
48
44
  const {
49
45
  // This will allow adding custom styled fn (for example for custom sx style function)
@@ -74,14 +70,12 @@ export default function createContainer(options = {}) {
74
70
  }) => ownerState.fixed && Object.keys(theme.breakpoints.values).reduce((acc, breakpointValueKey) => {
75
71
  const breakpoint = breakpointValueKey;
76
72
  const value = theme.breakpoints.values[breakpoint];
77
-
78
73
  if (value !== 0) {
79
74
  // @ts-ignore
80
75
  acc[theme.breakpoints.up(breakpoint)] = {
81
76
  maxWidth: `${value}${theme.breakpoints.unit}`
82
77
  };
83
78
  }
84
-
85
79
  return acc;
86
80
  }, {}), ({
87
81
  theme,
@@ -92,7 +86,8 @@ export default function createContainer(options = {}) {
92
86
  // @ts-ignore module augmentation fails if custom breakpoints are used
93
87
  maxWidth: Math.max(theme.breakpoints.values.xs, 444)
94
88
  }
95
- }, ownerState.maxWidth && // @ts-ignore module augmentation fails if custom breakpoints are used
89
+ }, ownerState.maxWidth &&
90
+ // @ts-ignore module augmentation fails if custom breakpoints are used
96
91
  ownerState.maxWidth !== 'xs' && {
97
92
  // @ts-ignore module augmentation fails if custom breakpoints are used
98
93
  [theme.breakpoints.up(ownerState.maxWidth)]: {
@@ -102,30 +97,29 @@ export default function createContainer(options = {}) {
102
97
  }));
103
98
  const Container = /*#__PURE__*/React.forwardRef(function Container(inProps, ref) {
104
99
  const props = useThemeProps(inProps);
105
-
106
100
  const {
107
- className,
108
- component = 'div',
109
- disableGutters = false,
110
- fixed = false,
111
- maxWidth = 'lg'
112
- } = props,
113
- other = _objectWithoutPropertiesLoose(props, _excluded);
114
-
101
+ className,
102
+ component = 'div',
103
+ disableGutters = false,
104
+ fixed = false,
105
+ maxWidth = 'lg'
106
+ } = props,
107
+ other = _objectWithoutPropertiesLoose(props, _excluded);
115
108
  const ownerState = _extends({}, props, {
116
109
  component,
117
110
  disableGutters,
118
111
  fixed,
119
112
  maxWidth
120
- }); // @ts-ignore module augmentation fails if custom breakpoints are used
121
-
113
+ });
122
114
 
115
+ // @ts-ignore module augmentation fails if custom breakpoints are used
123
116
  const classes = useUtilityClasses(ownerState, componentName);
124
117
  return (
125
118
  /*#__PURE__*/
126
119
  // @ts-ignore theme is injected by the styled util
127
120
  _jsx(ContainerRoot, _extends({
128
- as: component // @ts-ignore module augmentation fails if custom breakpoints are used
121
+ as: component
122
+ // @ts-ignore module augmentation fails if custom breakpoints are used
129
123
  ,
130
124
  ownerState: ownerState,
131
125
  className: clsx(classes.root, className),
@@ -133,18 +127,14 @@ export default function createContainer(options = {}) {
133
127
  }, other))
134
128
  );
135
129
  });
136
- process.env.NODE_ENV !== "production" ? Container.propTypes
137
- /* remove-proptypes */
138
- = {
130
+ process.env.NODE_ENV !== "production" ? Container.propTypes /* remove-proptypes */ = {
139
131
  children: PropTypes.node,
140
132
  classes: PropTypes.object,
141
133
  className: PropTypes.string,
142
134
  component: PropTypes.elementType,
143
135
  disableGutters: PropTypes.bool,
144
136
  fixed: PropTypes.bool,
145
- maxWidth: PropTypes
146
- /* @typescript-to-proptypes-ignore */
147
- .oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
137
+ maxWidth: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]), PropTypes.string]),
148
138
  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
149
139
  } : void 0;
150
140
  return Container;
@@ -11,39 +11,31 @@ import createStack from './createStack';
11
11
  *
12
12
  * - [Stack API](https://mui.com/system/api/stack/)
13
13
  */
14
-
15
14
  const Stack = createStack();
16
- process.env.NODE_ENV !== "production" ? Stack.propTypes
17
- /* remove-proptypes */
18
- = {
15
+ process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
19
16
  // ----------------------------- Warning --------------------------------
20
17
  // | These PropTypes are generated from the TypeScript type definitions |
21
18
  // | To update them edit TypeScript types and run "yarn proptypes" |
22
19
  // ----------------------------------------------------------------------
23
-
24
20
  /**
25
21
  * The content of the component.
26
22
  */
27
23
  children: PropTypes.node,
28
-
29
24
  /**
30
25
  * Defines the `flex-direction` style property.
31
26
  * It is applied for all screen sizes.
32
27
  * @default 'column'
33
28
  */
34
29
  direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
35
-
36
30
  /**
37
31
  * Add an element between each child.
38
32
  */
39
33
  divider: PropTypes.node,
40
-
41
34
  /**
42
35
  * Defines the space between immediate children.
43
36
  * @default 0
44
37
  */
45
38
  spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
46
-
47
39
  /**
48
40
  * The system prop, which allows defining system overrides as well as additional CSS styles.
49
41
  */