@mui/system 7.0.1 → 7.1.0

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 (283) hide show
  1. package/Box/Box.d.ts +12 -31
  2. package/CHANGELOG.md +157 -0
  3. package/Grid/createGrid.js +1 -2
  4. package/InitColorSchemeScript/InitColorSchemeScript.js +1 -1
  5. package/Stack/createStack.js +1 -2
  6. package/borders/borders.d.ts +2 -1
  7. package/breakpoints/breakpoints.d.ts +1 -1
  8. package/compose/compose.d.ts +14 -1
  9. package/compose/index.d.ts +1 -1
  10. package/cssGrid/cssGrid.d.ts +2 -1
  11. package/cssVars/cssVarsParser.d.ts +1 -1
  12. package/display/display.d.ts +2 -1
  13. package/esm/Box/Box.d.ts +12 -31
  14. package/esm/Grid/createGrid.js +1 -2
  15. package/esm/InitColorSchemeScript/InitColorSchemeScript.js +1 -1
  16. package/esm/Stack/createStack.js +1 -2
  17. package/esm/borders/borders.d.ts +2 -1
  18. package/esm/breakpoints/breakpoints.d.ts +1 -1
  19. package/esm/compose/compose.d.ts +14 -1
  20. package/esm/compose/index.d.ts +1 -1
  21. package/esm/cssGrid/cssGrid.d.ts +2 -1
  22. package/esm/cssVars/cssVarsParser.d.ts +1 -1
  23. package/esm/display/display.d.ts +2 -1
  24. package/esm/flexbox/flexbox.d.ts +15 -1
  25. package/esm/index.d.ts +10 -0
  26. package/esm/index.js +1 -1
  27. package/esm/memoTheme.d.ts +1 -1
  28. package/esm/palette/palette.d.ts +2 -1
  29. package/esm/positions/positions.d.ts +2 -1
  30. package/esm/shadows/shadows.d.ts +2 -1
  31. package/esm/sizing/sizing.d.ts +2 -1
  32. package/esm/spacing/spacing.d.ts +2 -1
  33. package/esm/style/style.d.ts +5 -1
  34. package/esm/styleFunctionSx/defaultSxConfig.d.ts +1 -2
  35. package/esm/typography/typography.d.ts +2 -1
  36. package/esm/useMediaQuery/useMediaQuery.js +3 -0
  37. package/esm/useThemeProps/getThemeProps.d.ts +0 -5
  38. package/esm/version/index.js +3 -3
  39. package/flexbox/flexbox.d.ts +15 -1
  40. package/index.d.ts +10 -0
  41. package/index.js +1 -1
  42. package/memoTheme.d.ts +1 -1
  43. package/package.json +7 -15
  44. package/palette/palette.d.ts +2 -1
  45. package/positions/positions.d.ts +2 -1
  46. package/shadows/shadows.d.ts +2 -1
  47. package/sizing/sizing.d.ts +2 -1
  48. package/spacing/spacing.d.ts +2 -1
  49. package/style/style.d.ts +5 -1
  50. package/styleFunctionSx/defaultSxConfig.d.ts +1 -2
  51. package/typography/typography.d.ts +2 -1
  52. package/useMediaQuery/useMediaQuery.js +3 -0
  53. package/useThemeProps/getThemeProps.d.ts +0 -5
  54. package/version/index.js +3 -3
  55. package/modern/Box/Box.d.ts +0 -72
  56. package/modern/Box/Box.js +0 -30
  57. package/modern/Box/boxClasses.d.ts +0 -7
  58. package/modern/Box/boxClasses.js +0 -3
  59. package/modern/Box/index.d.ts +0 -4
  60. package/modern/Box/index.js +0 -3
  61. package/modern/CSSProperties.d.ts +0 -7
  62. package/modern/Container/Container.d.ts +0 -13
  63. package/modern/Container/Container.js +0 -61
  64. package/modern/Container/ContainerProps.d.ts +0 -40
  65. package/modern/Container/ContainerProps.js +0 -1
  66. package/modern/Container/containerClasses.d.ts +0 -22
  67. package/modern/Container/containerClasses.js +0 -7
  68. package/modern/Container/createContainer.d.ts +0 -18
  69. package/modern/Container/createContainer.js +0 -149
  70. package/modern/Container/index.d.ts +0 -4
  71. package/modern/Container/index.js +0 -3
  72. package/modern/DefaultPropsProvider/DefaultPropsProvider.d.ts +0 -18
  73. package/modern/DefaultPropsProvider/DefaultPropsProvider.js +0 -64
  74. package/modern/DefaultPropsProvider/index.d.ts +0 -1
  75. package/modern/DefaultPropsProvider/index.js +0 -1
  76. package/modern/GlobalStyles/GlobalStyles.d.ts +0 -17
  77. package/modern/GlobalStyles/GlobalStyles.js +0 -37
  78. package/modern/GlobalStyles/index.d.ts +0 -2
  79. package/modern/GlobalStyles/index.js +0 -2
  80. package/modern/Grid/Grid.d.ts +0 -13
  81. package/modern/Grid/Grid.js +0 -106
  82. package/modern/Grid/GridProps.d.ts +0 -103
  83. package/modern/Grid/GridProps.js +0 -1
  84. package/modern/Grid/createGrid.d.ts +0 -13
  85. package/modern/Grid/createGrid.js +0 -155
  86. package/modern/Grid/deleteLegacyGridProps.d.ts +0 -11
  87. package/modern/Grid/deleteLegacyGridProps.js +0 -41
  88. package/modern/Grid/gridClasses.d.ts +0 -20
  89. package/modern/Grid/gridClasses.js +0 -19
  90. package/modern/Grid/gridGenerator.d.ts +0 -42
  91. package/modern/Grid/gridGenerator.js +0 -193
  92. package/modern/Grid/index.d.ts +0 -7
  93. package/modern/Grid/index.js +0 -7
  94. package/modern/Grid/traverseBreakpoints.d.ts +0 -7
  95. package/modern/Grid/traverseBreakpoints.js +0 -42
  96. package/modern/InitColorSchemeScript/InitColorSchemeScript.d.ts +0 -51
  97. package/modern/InitColorSchemeScript/InitColorSchemeScript.js +0 -78
  98. package/modern/InitColorSchemeScript/index.d.ts +0 -2
  99. package/modern/InitColorSchemeScript/index.js +0 -1
  100. package/modern/RtlProvider/index.d.ts +0 -8
  101. package/modern/RtlProvider/index.js +0 -24
  102. package/modern/Stack/Stack.d.ts +0 -14
  103. package/modern/Stack/Stack.js +0 -62
  104. package/modern/Stack/StackProps.d.ts +0 -53
  105. package/modern/Stack/StackProps.js +0 -1
  106. package/modern/Stack/createStack.d.ts +0 -24
  107. package/modern/Stack/createStack.js +0 -173
  108. package/modern/Stack/index.d.ts +0 -5
  109. package/modern/Stack/index.js +0 -5
  110. package/modern/Stack/stackClasses.d.ts +0 -8
  111. package/modern/Stack/stackClasses.js +0 -7
  112. package/modern/ThemeProvider/ThemeProvider.d.ts +0 -24
  113. package/modern/ThemeProvider/ThemeProvider.js +0 -97
  114. package/modern/ThemeProvider/index.d.ts +0 -2
  115. package/modern/ThemeProvider/index.js +0 -1
  116. package/modern/borders/borders.d.ts +0 -14
  117. package/modern/borders/borders.js +0 -49
  118. package/modern/borders/index.d.ts +0 -2
  119. package/modern/borders/index.js +0 -2
  120. package/modern/breakpoints/breakpoints.d.ts +0 -19
  121. package/modern/breakpoints/breakpoints.js +0 -171
  122. package/modern/breakpoints/index.d.ts +0 -2
  123. package/modern/breakpoints/index.js +0 -2
  124. package/modern/colorManipulator/colorManipulator.d.ts +0 -25
  125. package/modern/colorManipulator/colorManipulator.js +0 -349
  126. package/modern/colorManipulator/index.d.ts +0 -1
  127. package/modern/colorManipulator/index.js +0 -1
  128. package/modern/compose/compose.d.ts +0 -2
  129. package/modern/compose/compose.js +0 -24
  130. package/modern/compose/index.d.ts +0 -1
  131. package/modern/compose/index.js +0 -1
  132. package/modern/createBox/createBox.d.ts +0 -9
  133. package/modern/createBox/createBox.js +0 -35
  134. package/modern/createBox/index.d.ts +0 -1
  135. package/modern/createBox/index.js +0 -1
  136. package/modern/createBreakpoints/createBreakpoints.d.ts +0 -78
  137. package/modern/createBreakpoints/createBreakpoints.js +0 -81
  138. package/modern/createBreakpoints/index.d.ts +0 -3
  139. package/modern/createBreakpoints/index.js +0 -3
  140. package/modern/createStyled/createStyled.d.ts +0 -27
  141. package/modern/createStyled/createStyled.js +0 -276
  142. package/modern/createStyled/index.d.ts +0 -2
  143. package/modern/createStyled/index.js +0 -2
  144. package/modern/createTheme/applyStyles.d.ts +0 -67
  145. package/modern/createTheme/applyStyles.js +0 -87
  146. package/modern/createTheme/createSpacing.d.ts +0 -10
  147. package/modern/createTheme/createSpacing.js +0 -31
  148. package/modern/createTheme/createTheme.d.ts +0 -54
  149. package/modern/createTheme/createTheme.js +0 -49
  150. package/modern/createTheme/index.d.ts +0 -4
  151. package/modern/createTheme/index.js +0 -3
  152. package/modern/createTheme/shape.d.ts +0 -6
  153. package/modern/createTheme/shape.js +0 -4
  154. package/modern/cssContainerQueries/cssContainerQueries.d.ts +0 -23
  155. package/modern/cssContainerQueries/cssContainerQueries.js +0 -69
  156. package/modern/cssContainerQueries/index.d.ts +0 -3
  157. package/modern/cssContainerQueries/index.js +0 -2
  158. package/modern/cssGrid/cssGrid.d.ts +0 -15
  159. package/modern/cssGrid/cssGrid.js +0 -85
  160. package/modern/cssGrid/index.d.ts +0 -2
  161. package/modern/cssGrid/index.js +0 -2
  162. package/modern/cssVars/createCssVarsProvider.d.ts +0 -141
  163. package/modern/cssVars/createCssVarsProvider.js +0 -338
  164. package/modern/cssVars/createCssVarsTheme.d.ts +0 -15
  165. package/modern/cssVars/createCssVarsTheme.js +0 -21
  166. package/modern/cssVars/createGetCssVar.d.ts +0 -5
  167. package/modern/cssVars/createGetCssVar.js +0 -22
  168. package/modern/cssVars/cssVarsParser.d.ts +0 -64
  169. package/modern/cssVars/cssVarsParser.js +0 -129
  170. package/modern/cssVars/getColorSchemeSelector.d.ts +0 -1
  171. package/modern/cssVars/getColorSchemeSelector.js +0 -26
  172. package/modern/cssVars/index.d.ts +0 -8
  173. package/modern/cssVars/index.js +0 -5
  174. package/modern/cssVars/localStorageManager.d.ts +0 -34
  175. package/modern/cssVars/localStorageManager.js +0 -51
  176. package/modern/cssVars/prepareCssVars.d.ts +0 -16
  177. package/modern/cssVars/prepareCssVars.js +0 -153
  178. package/modern/cssVars/prepareTypographyVars.d.ts +0 -4
  179. package/modern/cssVars/prepareTypographyVars.js +0 -11
  180. package/modern/cssVars/useCurrentColorScheme.d.ts +0 -56
  181. package/modern/cssVars/useCurrentColorScheme.js +0 -228
  182. package/modern/display/display.d.ts +0 -3
  183. package/modern/display/display.js +0 -27
  184. package/modern/display/index.d.ts +0 -2
  185. package/modern/display/index.js +0 -2
  186. package/modern/flexbox/flexbox.d.ts +0 -3
  187. package/modern/flexbox/flexbox.js +0 -43
  188. package/modern/flexbox/index.d.ts +0 -2
  189. package/modern/flexbox/index.js +0 -2
  190. package/modern/getThemeValue/getThemeValue.d.ts +0 -1
  191. package/modern/getThemeValue/getThemeValue.js +0 -51
  192. package/modern/getThemeValue/index.d.ts +0 -2
  193. package/modern/getThemeValue/index.js +0 -2
  194. package/modern/index.d.ts +0 -80
  195. package/modern/index.js +0 -75
  196. package/modern/memoTheme.d.ts +0 -12
  197. package/modern/memoTheme.js +0 -28
  198. package/modern/memoize/index.d.ts +0 -1
  199. package/modern/memoize/index.js +0 -1
  200. package/modern/memoize/memoize.d.ts +0 -1
  201. package/modern/memoize/memoize.js +0 -9
  202. package/modern/merge/index.d.ts +0 -1
  203. package/modern/merge/index.js +0 -1
  204. package/modern/merge/merge.d.ts +0 -1
  205. package/modern/merge/merge.js +0 -10
  206. package/modern/package.json +0 -1
  207. package/modern/palette/index.d.ts +0 -2
  208. package/modern/palette/index.js +0 -2
  209. package/modern/palette/palette.d.ts +0 -5
  210. package/modern/palette/palette.js +0 -26
  211. package/modern/positions/index.d.ts +0 -2
  212. package/modern/positions/index.js +0 -2
  213. package/modern/positions/positions.d.ts +0 -3
  214. package/modern/positions/positions.js +0 -22
  215. package/modern/preprocessStyles.d.ts +0 -5
  216. package/modern/preprocessStyles.js +0 -25
  217. package/modern/propsToClassKey/index.d.ts +0 -1
  218. package/modern/propsToClassKey/index.js +0 -1
  219. package/modern/propsToClassKey/propsToClassKey.d.ts +0 -1
  220. package/modern/propsToClassKey/propsToClassKey.js +0 -25
  221. package/modern/responsivePropType/index.d.ts +0 -1
  222. package/modern/responsivePropType/index.js +0 -1
  223. package/modern/responsivePropType/responsivePropType.d.ts +0 -2
  224. package/modern/responsivePropType/responsivePropType.js +0 -3
  225. package/modern/shadows/index.d.ts +0 -1
  226. package/modern/shadows/index.js +0 -1
  227. package/modern/shadows/shadows.d.ts +0 -3
  228. package/modern/shadows/shadows.js +0 -6
  229. package/modern/sizing/index.d.ts +0 -2
  230. package/modern/sizing/index.js +0 -2
  231. package/modern/sizing/sizing.d.ts +0 -12
  232. package/modern/sizing/sizing.js +0 -64
  233. package/modern/spacing/index.d.ts +0 -2
  234. package/modern/spacing/index.js +0 -2
  235. package/modern/spacing/spacing.d.ts +0 -19
  236. package/modern/spacing/spacing.js +0 -157
  237. package/modern/style/index.d.ts +0 -2
  238. package/modern/style/index.js +0 -2
  239. package/modern/style/style.d.ts +0 -19
  240. package/modern/style/style.js +0 -75
  241. package/modern/styleFunctionSx/AliasesCSSProperties.d.ts +0 -269
  242. package/modern/styleFunctionSx/AliasesCSSProperties.js +0 -1
  243. package/modern/styleFunctionSx/OverwriteCSSProperties.d.ts +0 -54
  244. package/modern/styleFunctionSx/OverwriteCSSProperties.js +0 -1
  245. package/modern/styleFunctionSx/StandardCssProperties.d.ts +0 -2
  246. package/modern/styleFunctionSx/StandardCssProperties.js +0 -1
  247. package/modern/styleFunctionSx/defaultSxConfig.d.ts +0 -15
  248. package/modern/styleFunctionSx/defaultSxConfig.js +0 -294
  249. package/modern/styleFunctionSx/extendSxProp.d.ts +0 -4
  250. package/modern/styleFunctionSx/extendSxProp.js +0 -51
  251. package/modern/styleFunctionSx/index.d.ts +0 -9
  252. package/modern/styleFunctionSx/index.js +0 -4
  253. package/modern/styleFunctionSx/styleFunctionSx.d.ts +0 -62
  254. package/modern/styleFunctionSx/styleFunctionSx.js +0 -127
  255. package/modern/styled/index.d.ts +0 -1
  256. package/modern/styled/index.js +0 -1
  257. package/modern/styled/styled.d.ts +0 -3
  258. package/modern/styled/styled.js +0 -3
  259. package/modern/typography/index.d.ts +0 -2
  260. package/modern/typography/index.js +0 -2
  261. package/modern/typography/typography.d.ts +0 -12
  262. package/modern/typography/typography.js +0 -37
  263. package/modern/useMediaQuery/index.d.ts +0 -2
  264. package/modern/useMediaQuery/index.js +0 -2
  265. package/modern/useMediaQuery/useMediaQuery.d.ts +0 -32
  266. package/modern/useMediaQuery/useMediaQuery.js +0 -118
  267. package/modern/useTheme/index.d.ts +0 -2
  268. package/modern/useTheme/index.js +0 -2
  269. package/modern/useTheme/useTheme.d.ts +0 -2
  270. package/modern/useTheme/useTheme.js +0 -9
  271. package/modern/useThemeProps/getThemeProps.d.ts +0 -16
  272. package/modern/useThemeProps/getThemeProps.js +0 -12
  273. package/modern/useThemeProps/index.d.ts +0 -3
  274. package/modern/useThemeProps/index.js +0 -2
  275. package/modern/useThemeProps/useThemeProps.d.ts +0 -14
  276. package/modern/useThemeProps/useThemeProps.js +0 -20
  277. package/modern/useThemeWithoutDefault/index.d.ts +0 -1
  278. package/modern/useThemeWithoutDefault/index.js +0 -1
  279. package/modern/useThemeWithoutDefault/useThemeWithoutDefault.d.ts +0 -1
  280. package/modern/useThemeWithoutDefault/useThemeWithoutDefault.js +0 -12
  281. package/modern/version/index.d.ts +0 -6
  282. package/modern/version/index.js +0 -6
  283. package/tsconfig.build.tsbuildinfo +0 -1
@@ -1,78 +0,0 @@
1
- /**
2
- * Split this component for RSC import
3
- */
4
- import * as React from 'react';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- export const DEFAULT_MODE_STORAGE_KEY = 'mode';
7
- export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme';
8
- export const DEFAULT_ATTRIBUTE = 'data-color-scheme';
9
- export default function InitColorSchemeScript(options) {
10
- const {
11
- defaultMode = 'system',
12
- defaultLightColorScheme = 'light',
13
- defaultDarkColorScheme = 'dark',
14
- modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
15
- colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
16
- attribute: initialAttribute = DEFAULT_ATTRIBUTE,
17
- colorSchemeNode = 'document.documentElement',
18
- nonce
19
- } = options || {};
20
- let setter = '';
21
- let attribute = initialAttribute;
22
- if (initialAttribute === 'class') {
23
- attribute = '.%s';
24
- }
25
- if (initialAttribute === 'data') {
26
- attribute = '[data-%s]';
27
- }
28
- if (attribute.startsWith('.')) {
29
- const selector = attribute.substring(1);
30
- setter += `${colorSchemeNode}.classList.remove('${selector}'.replace('%s', light), '${selector}'.replace('%s', dark));
31
- ${colorSchemeNode}.classList.add('${selector}'.replace('%s', colorScheme));`;
32
- }
33
- const matches = attribute.match(/\[([^\]]+)\]/); // case [data-color-scheme=%s] or [data-color-scheme]
34
- if (matches) {
35
- const [attr, value] = matches[1].split('=');
36
- if (!value) {
37
- setter += `${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', light));
38
- ${colorSchemeNode}.removeAttribute('${attr}'.replace('%s', dark));`;
39
- }
40
- setter += `
41
- ${colorSchemeNode}.setAttribute('${attr}'.replace('%s', colorScheme), ${value ? `${value}.replace('%s', colorScheme)` : '""'});`;
42
- } else {
43
- setter += `${colorSchemeNode}.setAttribute('${attribute}', colorScheme);`;
44
- }
45
- return /*#__PURE__*/_jsx("script", {
46
- suppressHydrationWarning: true,
47
- nonce: typeof window === 'undefined' ? nonce : ''
48
- // eslint-disable-next-line react/no-danger
49
- ,
50
- dangerouslySetInnerHTML: {
51
- __html: `(function() {
52
- try {
53
- let colorScheme = '';
54
- const mode = localStorage.getItem('${modeStorageKey}') || '${defaultMode}';
55
- const dark = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
56
- const light = localStorage.getItem('${colorSchemeStorageKey}-light') || '${defaultLightColorScheme}';
57
- if (mode === 'system') {
58
- // handle system mode
59
- const mql = window.matchMedia('(prefers-color-scheme: dark)');
60
- if (mql.matches) {
61
- colorScheme = dark
62
- } else {
63
- colorScheme = light
64
- }
65
- }
66
- if (mode === 'light') {
67
- colorScheme = light;
68
- }
69
- if (mode === 'dark') {
70
- colorScheme = dark;
71
- }
72
- if (colorScheme) {
73
- ${setter}
74
- }
75
- } catch(e){}})();`
76
- }
77
- }, "mui-color-scheme-init");
78
- }
@@ -1,2 +0,0 @@
1
- export { default } from "./InitColorSchemeScript.js";
2
- export type { InitColorSchemeScriptProps } from "./InitColorSchemeScript.js";
@@ -1 +0,0 @@
1
- export { default } from "./InitColorSchemeScript.js";
@@ -1,8 +0,0 @@
1
- import * as React from 'react';
2
- interface RtlProviderProps {
3
- children?: React.ReactNode;
4
- value?: boolean;
5
- }
6
- declare const RtlProvider: React.FC<RtlProviderProps>;
7
- export const useRtl: () => boolean;
8
- export default RtlProvider;
@@ -1,24 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import PropTypes from 'prop-types';
5
- import { jsx as _jsx } from "react/jsx-runtime";
6
- const RtlContext = /*#__PURE__*/React.createContext();
7
- function RtlProvider({
8
- value,
9
- ...props
10
- }) {
11
- return /*#__PURE__*/_jsx(RtlContext.Provider, {
12
- value: value ?? true,
13
- ...props
14
- });
15
- }
16
- process.env.NODE_ENV !== "production" ? RtlProvider.propTypes = {
17
- children: PropTypes.node,
18
- value: PropTypes.bool
19
- } : void 0;
20
- export const useRtl = () => {
21
- const value = React.useContext(RtlContext);
22
- return value ?? false;
23
- };
24
- export default RtlProvider;
@@ -1,14 +0,0 @@
1
- /**
2
- *
3
- * Demos:
4
- *
5
- * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
6
- * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
7
- * - [Stack (MUI System)](https://mui.com/system/react-stack/)
8
- *
9
- * API:
10
- *
11
- * - [Stack API](https://mui.com/system/api/stack/)
12
- */
13
- declare const Stack: import("@mui/types").OverridableComponent<import("./StackProps.js").StackTypeMap<{}, "div">>;
14
- export default Stack;
@@ -1,62 +0,0 @@
1
- 'use client';
2
-
3
- import PropTypes from 'prop-types';
4
- import createStack from "./createStack.js";
5
- /**
6
- *
7
- * Demos:
8
- *
9
- * - [Stack (Joy UI)](https://mui.com/joy-ui/react-stack/)
10
- * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
11
- * - [Stack (MUI System)](https://mui.com/system/react-stack/)
12
- *
13
- * API:
14
- *
15
- * - [Stack API](https://mui.com/system/api/stack/)
16
- */
17
- const Stack = createStack();
18
- process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
19
- // ┌────────────────────────────── Warning ──────────────────────────────┐
20
- // │ These PropTypes are generated from the TypeScript type definitions. │
21
- // │ To update them, edit the TypeScript types and run `pnpm proptypes`. │
22
- // └─────────────────────────────────────────────────────────────────────┘
23
- /**
24
- * The content of the component.
25
- */
26
- children: PropTypes.node,
27
- /**
28
- * The component used for the root node.
29
- * Either a string to use a HTML element or a component.
30
- */
31
- component: PropTypes.elementType,
32
- /**
33
- * Defines the `flex-direction` style property.
34
- * It is applied for all screen sizes.
35
- * @default 'column'
36
- */
37
- direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
38
- /**
39
- * Add an element between each child.
40
- */
41
- divider: PropTypes.node,
42
- /**
43
- * Defines the space between immediate children.
44
- * @default 0
45
- */
46
- spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
47
- /**
48
- * The system prop, which allows defining system overrides as well as additional CSS styles.
49
- */
50
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
51
- /**
52
- * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
53
- *
54
- * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
55
- * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
56
- *
57
- * To enable this flag globally, follow the theme's default props configuration.
58
- * @default false
59
- */
60
- useFlexGap: PropTypes.bool
61
- } : void 0;
62
- export default Stack;
@@ -1,53 +0,0 @@
1
- import * as React from 'react';
2
- import { OverrideProps } from '@mui/types';
3
- import { ResponsiveStyleValue, SxProps } from "../styleFunctionSx/index.js";
4
- import { SystemProps } from "../Box/index.js";
5
- import { Theme } from "../createTheme/index.js";
6
- export interface StackBaseProps {
7
- /**
8
- * The content of the component.
9
- */
10
- children?: React.ReactNode;
11
- /**
12
- * Defines the `flex-direction` style property.
13
- * It is applied for all screen sizes.
14
- * @default 'column'
15
- */
16
- direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
17
- /**
18
- * Defines the space between immediate children.
19
- * @default 0
20
- */
21
- spacing?: ResponsiveStyleValue<number | string>;
22
- /**
23
- * Add an element between each child.
24
- */
25
- divider?: React.ReactNode;
26
- /**
27
- * If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
28
- *
29
- * While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
30
- * it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
31
- *
32
- * To enable this flag globally, follow the theme's default props configuration.
33
- * @default false
34
- */
35
- useFlexGap?: boolean;
36
- }
37
- export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
38
- props: AdditionalProps & StackBaseProps & {
39
- /**
40
- * The system prop, which allows defining system overrides as well as additional CSS styles.
41
- */
42
- sx?: SxProps<Theme>;
43
- } & SystemProps<Theme>;
44
- defaultComponent: DefaultComponent;
45
- }
46
- export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
47
- component?: React.ElementType;
48
- }> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
49
- export interface StackOwnerState {
50
- direction: StackProps['direction'];
51
- spacing: StackProps['spacing'];
52
- useFlexGap: boolean;
53
- }
@@ -1 +0,0 @@
1
- export {};
@@ -1,24 +0,0 @@
1
- import * as React from 'react';
2
- import { OverridableComponent } from '@mui/types';
3
- import { StackTypeMap, StackOwnerState } from "./StackProps.js";
4
- import { Breakpoints } from "../createBreakpoints/createBreakpoints.js";
5
- import { Spacing } from "../createTheme/createSpacing.js";
6
- interface StyleFunctionProps {
7
- theme: {
8
- breakpoints: Breakpoints;
9
- spacing: Spacing;
10
- };
11
- ownerState: StackOwnerState;
12
- }
13
- declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled/index.js").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
14
- declare function useThemePropsDefault<T extends {}>(props: T): T;
15
- export declare const style: ({
16
- ownerState,
17
- theme
18
- }: StyleFunctionProps) => any;
19
- export default function createStack(options?: {
20
- createStyledComponent?: typeof defaultCreateStyledComponent;
21
- useThemeProps?: typeof useThemePropsDefault;
22
- componentName?: string;
23
- }): OverridableComponent<StackTypeMap<{}, "div">>;
24
- export {};
@@ -1,173 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import PropTypes from 'prop-types';
5
- import clsx from 'clsx';
6
- import deepmerge from '@mui/utils/deepmerge';
7
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
8
- import composeClasses from '@mui/utils/composeClasses';
9
- import systemStyled from "../styled/index.js";
10
- import useThemePropsSystem from "../useThemeProps/index.js";
11
- import { extendSxProp } from "../styleFunctionSx/index.js";
12
- import createTheme from "../createTheme/index.js";
13
- import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from "../breakpoints/index.js";
14
- import { createUnarySpacing, getValue } from "../spacing/index.js";
15
- import { jsx as _jsx } from "react/jsx-runtime";
16
- const defaultTheme = createTheme();
17
- // widening Theme to any so that the consumer can own the theme structure.
18
- const defaultCreateStyledComponent = systemStyled('div', {
19
- name: 'MuiStack',
20
- slot: 'Root',
21
- overridesResolver: (props, styles) => styles.root
22
- });
23
- function useThemePropsDefault(props) {
24
- return useThemePropsSystem({
25
- props,
26
- name: 'MuiStack',
27
- defaultTheme
28
- });
29
- }
30
-
31
- /**
32
- * Return an array with the separator React element interspersed between
33
- * each React node of the input children.
34
- *
35
- * > joinChildren([1,2,3], 0)
36
- * [1,0,2,0,3]
37
- */
38
- function joinChildren(children, separator) {
39
- const childrenArray = React.Children.toArray(children).filter(Boolean);
40
- return childrenArray.reduce((output, child, index) => {
41
- output.push(child);
42
- if (index < childrenArray.length - 1) {
43
- output.push(/*#__PURE__*/React.cloneElement(separator, {
44
- key: `separator-${index}`
45
- }));
46
- }
47
- return output;
48
- }, []);
49
- }
50
- const getSideFromDirection = direction => {
51
- return {
52
- row: 'Left',
53
- 'row-reverse': 'Right',
54
- column: 'Top',
55
- 'column-reverse': 'Bottom'
56
- }[direction];
57
- };
58
- export const style = ({
59
- ownerState,
60
- theme
61
- }) => {
62
- let styles = {
63
- display: 'flex',
64
- flexDirection: 'column',
65
- ...handleBreakpoints({
66
- theme
67
- }, resolveBreakpointValues({
68
- values: ownerState.direction,
69
- breakpoints: theme.breakpoints.values
70
- }), propValue => ({
71
- flexDirection: propValue
72
- }))
73
- };
74
- if (ownerState.spacing) {
75
- const transformer = createUnarySpacing(theme);
76
- const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
77
- if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
78
- acc[breakpoint] = true;
79
- }
80
- return acc;
81
- }, {});
82
- const directionValues = resolveBreakpointValues({
83
- values: ownerState.direction,
84
- base
85
- });
86
- const spacingValues = resolveBreakpointValues({
87
- values: ownerState.spacing,
88
- base
89
- });
90
- if (typeof directionValues === 'object') {
91
- Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
92
- const directionValue = directionValues[breakpoint];
93
- if (!directionValue) {
94
- const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
95
- directionValues[breakpoint] = previousDirectionValue;
96
- }
97
- });
98
- }
99
- const styleFromPropValue = (propValue, breakpoint) => {
100
- if (ownerState.useFlexGap) {
101
- return {
102
- gap: getValue(transformer, propValue)
103
- };
104
- }
105
- return {
106
- // The useFlexGap={false} implement relies on each child to give up control of the margin.
107
- // We need to reset the margin to avoid double spacing.
108
- '& > :not(style):not(style)': {
109
- margin: 0
110
- },
111
- '& > :not(style) ~ :not(style)': {
112
- [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
113
- }
114
- };
115
- };
116
- styles = deepmerge(styles, handleBreakpoints({
117
- theme
118
- }, spacingValues, styleFromPropValue));
119
- }
120
- styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
121
- return styles;
122
- };
123
- export default function createStack(options = {}) {
124
- const {
125
- // This will allow adding custom styled fn (for example for custom sx style function)
126
- createStyledComponent = defaultCreateStyledComponent,
127
- useThemeProps = useThemePropsDefault,
128
- componentName = 'MuiStack'
129
- } = options;
130
- const useUtilityClasses = () => {
131
- const slots = {
132
- root: ['root']
133
- };
134
- return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
135
- };
136
- const StackRoot = createStyledComponent(style);
137
- const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
138
- const themeProps = useThemeProps(inProps);
139
- const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
140
- const {
141
- component = 'div',
142
- direction = 'column',
143
- spacing = 0,
144
- divider,
145
- children,
146
- className,
147
- useFlexGap = false,
148
- ...other
149
- } = props;
150
- const ownerState = {
151
- direction,
152
- spacing,
153
- useFlexGap
154
- };
155
- const classes = useUtilityClasses();
156
- return /*#__PURE__*/_jsx(StackRoot, {
157
- as: component,
158
- ownerState: ownerState,
159
- ref: ref,
160
- className: clsx(classes.root, className),
161
- ...other,
162
- children: divider ? joinChildren(children, divider) : children
163
- });
164
- });
165
- process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
166
- children: PropTypes.node,
167
- direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
168
- divider: PropTypes.node,
169
- spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
170
- sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
171
- } : void 0;
172
- return Stack;
173
- }
@@ -1,5 +0,0 @@
1
- export { default } from "./Stack.js";
2
- export { default as createStack } from "./createStack.js";
3
- export * from "./StackProps.js";
4
- export { default as stackClasses } from "./stackClasses.js";
5
- export * from "./stackClasses.js";
@@ -1,5 +0,0 @@
1
- export { default } from "./Stack.js";
2
- export { default as createStack } from "./createStack.js";
3
- export * from "./StackProps.js";
4
- export { default as stackClasses } from "./stackClasses.js";
5
- export * from "./stackClasses.js";
@@ -1,8 +0,0 @@
1
- export interface StackClasses {
2
- /** Styles applied to the root element. */
3
- root: string;
4
- }
5
- export type StackClassKey = keyof StackClasses;
6
- export declare function getStackUtilityClass(slot: string): string;
7
- declare const stackClasses: StackClasses;
8
- export default stackClasses;
@@ -1,7 +0,0 @@
1
- import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
2
- import generateUtilityClass from '@mui/utils/generateUtilityClass';
3
- export function getStackUtilityClass(slot) {
4
- return generateUtilityClass('MuiStack', slot);
5
- }
6
- const stackClasses = generateUtilityClasses('MuiStack', ['root']);
7
- export default stackClasses;
@@ -1,24 +0,0 @@
1
- import { DefaultTheme } from '@mui/private-theming';
2
- export interface ThemeProviderProps<Theme = DefaultTheme> {
3
- /**
4
- * Your component tree.
5
- */
6
- children?: React.ReactNode;
7
- /**
8
- * The design system's unique id for getting the corresponded theme when there are multiple design systems.
9
- */
10
- themeId?: string;
11
- /**
12
- * A theme object. You can provide a function to extend the outer theme.
13
- */
14
- theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
15
- }
16
-
17
- /**
18
- * This component makes the `theme` available down the React tree.
19
- * It should preferably be used at **the root of your component tree**.
20
- * API:
21
- *
22
- * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
23
- */
24
- export default function ThemeProvider<T = DefaultTheme>(props: ThemeProviderProps<T>): React.ReactElement<ThemeProviderProps<T>>;
@@ -1,97 +0,0 @@
1
- 'use client';
2
-
3
- import * as React from 'react';
4
- import PropTypes from 'prop-types';
5
- import { ThemeProvider as MuiThemeProvider, useTheme as usePrivateTheme } from '@mui/private-theming';
6
- import exactProp from '@mui/utils/exactProp';
7
- import { ThemeContext as StyledEngineThemeContext } from '@mui/styled-engine';
8
- import useThemeWithoutDefault from "../useThemeWithoutDefault/index.js";
9
- import RtlProvider from "../RtlProvider/index.js";
10
- import DefaultPropsProvider from "../DefaultPropsProvider/index.js";
11
- import { jsx as _jsx } from "react/jsx-runtime";
12
- const EMPTY_THEME = {};
13
- function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
14
- return React.useMemo(() => {
15
- const resolvedTheme = themeId ? upperTheme[themeId] || upperTheme : upperTheme;
16
- if (typeof localTheme === 'function') {
17
- const mergedTheme = localTheme(resolvedTheme);
18
- const result = themeId ? {
19
- ...upperTheme,
20
- [themeId]: mergedTheme
21
- } : mergedTheme;
22
- // must return a function for the private theme to NOT merge with the upper theme.
23
- // see the test case "use provided theme from a callback" in ThemeProvider.test.js
24
- if (isPrivate) {
25
- return () => result;
26
- }
27
- return result;
28
- }
29
- return themeId ? {
30
- ...upperTheme,
31
- [themeId]: localTheme
32
- } : {
33
- ...upperTheme,
34
- ...localTheme
35
- };
36
- }, [themeId, upperTheme, localTheme, isPrivate]);
37
- }
38
-
39
- /**
40
- * This component makes the `theme` available down the React tree.
41
- * It should preferably be used at **the root of your component tree**.
42
- *
43
- * <ThemeProvider theme={theme}> // existing use case
44
- * <ThemeProvider theme={{ id: theme }}> // theme scoping
45
- */
46
- function ThemeProvider(props) {
47
- const {
48
- children,
49
- theme: localTheme,
50
- themeId
51
- } = props;
52
- const upperTheme = useThemeWithoutDefault(EMPTY_THEME);
53
- const upperPrivateTheme = usePrivateTheme() || EMPTY_THEME;
54
- if (process.env.NODE_ENV !== 'production') {
55
- if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
56
- console.error(['MUI: You are providing a theme function prop to the ThemeProvider component:', '<ThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n'));
57
- }
58
- }
59
- const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
60
- const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
61
- const rtlValue = (themeId ? engineTheme[themeId] : engineTheme).direction === 'rtl';
62
- return /*#__PURE__*/_jsx(MuiThemeProvider, {
63
- theme: privateTheme,
64
- children: /*#__PURE__*/_jsx(StyledEngineThemeContext.Provider, {
65
- value: engineTheme,
66
- children: /*#__PURE__*/_jsx(RtlProvider, {
67
- value: rtlValue,
68
- children: /*#__PURE__*/_jsx(DefaultPropsProvider, {
69
- value: themeId ? engineTheme[themeId].components : engineTheme.components,
70
- children: children
71
- })
72
- })
73
- })
74
- });
75
- }
76
- process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-proptypes */ = {
77
- // ┌────────────────────────────── Warning ──────────────────────────────┐
78
- // │ These PropTypes are generated from the TypeScript type definitions. │
79
- // │ To update them, edit the d.ts file and run `pnpm proptypes`. │
80
- // └─────────────────────────────────────────────────────────────────────┘
81
- /**
82
- * Your component tree.
83
- */
84
- children: PropTypes.node,
85
- /**
86
- * A theme object. You can provide a function to extend the outer theme.
87
- */
88
- theme: PropTypes.oneOfType([PropTypes.func, PropTypes.object]).isRequired,
89
- /**
90
- * The design system's unique id for getting the corresponded theme when there are multiple design systems.
91
- */
92
- themeId: PropTypes.string
93
- } : void 0;
94
- if (process.env.NODE_ENV !== 'production') {
95
- process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = exactProp(ThemeProvider.propTypes) : void 0;
96
- }
97
- export default ThemeProvider;
@@ -1,2 +0,0 @@
1
- export { default } from "./ThemeProvider.js";
2
- export * from "./ThemeProvider.js";
@@ -1 +0,0 @@
1
- export { default } from "./ThemeProvider.js";
@@ -1,14 +0,0 @@
1
- import { PropsFor, borders, SimpleStyleFunction } from "../Box/index.js";
2
- export const border: SimpleStyleFunction<'border'>;
3
- export const borderTop: SimpleStyleFunction<'borderTop'>;
4
- export const borderRight: SimpleStyleFunction<'borderRight'>;
5
- export const borderBottom: SimpleStyleFunction<'borderBottom'>;
6
- export const borderLeft: SimpleStyleFunction<'borderLeft'>;
7
- export const borderColor: SimpleStyleFunction<'borderColor'>;
8
- export const borderTopColor: SimpleStyleFunction<'borderTopColor'>;
9
- export const borderRightColor: SimpleStyleFunction<'borderRightColor'>;
10
- export const borderBottomColor: SimpleStyleFunction<'borderBottomColor'>;
11
- export const borderLeftColor: SimpleStyleFunction<'borderLeftColor'>;
12
- export const borderRadius: SimpleStyleFunction<'borderRadius'>;
13
- export type BordersProps = PropsFor<typeof borders>;
14
- export default borders;