@mui/system 5.9.1 → 5.10.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 (69) hide show
  1. package/Box/Box.spec.d.ts +1 -1
  2. package/CHANGELOG.md +200 -9
  3. package/Container/Container.d.ts +13 -13
  4. package/Container/ContainerProps.d.ts +40 -40
  5. package/Container/containerClasses.d.ts +22 -22
  6. package/Container/createContainer.d.ts +18 -18
  7. package/README.md +1 -1
  8. package/Stack/Stack.d.ts +12 -0
  9. package/Stack/Stack.js +62 -0
  10. package/Stack/StackProps.d.ts +42 -0
  11. package/Stack/StackProps.js +5 -0
  12. package/Stack/createStack.d.ts +21 -0
  13. package/Stack/createStack.js +209 -0
  14. package/Stack/index.d.ts +5 -0
  15. package/Stack/index.js +65 -0
  16. package/Stack/package.json +6 -0
  17. package/Stack/stackClasses.d.ts +8 -0
  18. package/Stack/stackClasses.js +17 -0
  19. package/Unstable_Grid/Grid.d.ts +12 -12
  20. package/Unstable_Grid/GridProps.d.ts +162 -162
  21. package/Unstable_Grid/createGrid.d.ts +11 -11
  22. package/Unstable_Grid/gridClasses.d.ts +20 -20
  23. package/Unstable_Grid/gridGenerator.d.ts +26 -26
  24. package/Unstable_Grid/index.d.ts +5 -5
  25. package/breakpoints.d.ts +21 -0
  26. package/createBox.js +3 -1
  27. package/createBox.spec.d.ts +1 -1
  28. package/createStyled.js +30 -11
  29. package/createTheme/createSpacing.d.ts +10 -10
  30. package/cssVars/createCssVarsProvider.js +1 -1
  31. package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
  32. package/cssVars/createGetCssVar.d.ts +5 -5
  33. package/cssVars/cssVarsParser.d.ts +65 -65
  34. package/cssVars/getInitColorSchemeScript.d.ts +45 -45
  35. package/cssVars/index.d.ts +3 -3
  36. package/cssVars/useCurrentColorScheme.d.ts +53 -53
  37. package/esm/Stack/Stack.js +51 -0
  38. package/esm/Stack/StackProps.js +1 -0
  39. package/esm/Stack/createStack.js +179 -0
  40. package/esm/Stack/index.js +5 -0
  41. package/esm/Stack/stackClasses.js +6 -0
  42. package/esm/createBox.js +3 -1
  43. package/esm/createStyled.js +28 -10
  44. package/esm/cssVars/createCssVarsProvider.js +1 -1
  45. package/esm/index.js +3 -1
  46. package/index.d.ts +4 -6
  47. package/index.js +25 -2
  48. package/index.spec.d.ts +1 -1
  49. package/legacy/Stack/Stack.js +51 -0
  50. package/legacy/Stack/StackProps.js +1 -0
  51. package/legacy/Stack/createStack.js +187 -0
  52. package/legacy/Stack/index.js +5 -0
  53. package/legacy/Stack/stackClasses.js +6 -0
  54. package/legacy/createBox.js +5 -1
  55. package/legacy/createStyled.js +31 -10
  56. package/legacy/cssVars/createCssVarsProvider.js +1 -1
  57. package/legacy/index.js +4 -2
  58. package/modern/Stack/Stack.js +51 -0
  59. package/modern/Stack/StackProps.js +1 -0
  60. package/modern/Stack/createStack.js +179 -0
  61. package/modern/Stack/index.js +5 -0
  62. package/modern/Stack/stackClasses.js +6 -0
  63. package/modern/createBox.js +3 -1
  64. package/modern/createStyled.js +28 -10
  65. package/modern/cssVars/createCssVarsProvider.js +1 -1
  66. package/modern/index.js +4 -2
  67. package/package.json +6 -6
  68. package/spacing.d.ts +6 -0
  69. package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
@@ -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 {};
@@ -0,0 +1,51 @@
1
+ import PropTypes from 'prop-types';
2
+ import createStack from './createStack';
3
+ /**
4
+ *
5
+ * Demos:
6
+ *
7
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
8
+ *
9
+ * API:
10
+ *
11
+ * - [Stack API](https://mui.com/system/api/stack/)
12
+ */
13
+
14
+ const Stack = createStack();
15
+ process.env.NODE_ENV !== "production" ? Stack.propTypes
16
+ /* remove-proptypes */
17
+ = {
18
+ // ----------------------------- Warning --------------------------------
19
+ // | These PropTypes are generated from the TypeScript type definitions |
20
+ // | To update them edit TypeScript types and run "yarn proptypes" |
21
+ // ----------------------------------------------------------------------
22
+
23
+ /**
24
+ * The content of the component.
25
+ */
26
+ children: PropTypes.node,
27
+
28
+ /**
29
+ * Defines the `flex-direction` style property.
30
+ * It is applied for all screen sizes.
31
+ * @default 'column'
32
+ */
33
+ direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
34
+
35
+ /**
36
+ * Add an element between each child.
37
+ */
38
+ divider: PropTypes.node,
39
+
40
+ /**
41
+ * Defines the space between immediate children.
42
+ * @default 0
43
+ */
44
+ spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
45
+
46
+ /**
47
+ * The system prop, which allows defining system overrides as well as additional CSS styles.
48
+ */
49
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
50
+ } : void 0;
51
+ export default Stack;
@@ -0,0 +1 @@
1
+ export {};
@@ -0,0 +1,179 @@
1
+ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
+ const _excluded = ["component", "direction", "spacing", "divider", "children", "className"];
4
+ import * as React from 'react';
5
+ import PropTypes from 'prop-types';
6
+ import clsx from 'clsx';
7
+ import { deepmerge, unstable_composeClasses as composeClasses, unstable_generateUtilityClass as generateUtilityClass } from '@mui/utils';
8
+ import systemStyled from '../styled';
9
+ import useThemePropsSystem from '../useThemeProps';
10
+ import { extendSxProp } from '../styleFunctionSx';
11
+ import createTheme from '../createTheme';
12
+ import { handleBreakpoints, mergeBreakpointsInOrder, resolveBreakpointValues } from '../breakpoints';
13
+ import { createUnarySpacing, getValue } from '../spacing';
14
+ import { jsx as _jsx } from "react/jsx-runtime";
15
+ const defaultTheme = createTheme();
16
+ // widening Theme to any so that the consumer can own the theme structure.
17
+ const defaultCreateStyledComponent = systemStyled('div', {
18
+ name: 'MuiStack',
19
+ slot: 'Root',
20
+ overridesResolver: (props, styles) => styles.root
21
+ });
22
+
23
+ function useThemePropsDefault(props) {
24
+ return useThemePropsSystem({
25
+ props,
26
+ name: 'MuiStack',
27
+ defaultTheme
28
+ });
29
+ }
30
+ /**
31
+ * Return an array with the separator React element interspersed between
32
+ * each React node of the input children.
33
+ *
34
+ * > joinChildren([1,2,3], 0)
35
+ * [1,0,2,0,3]
36
+ */
37
+
38
+
39
+ function joinChildren(children, separator) {
40
+ const childrenArray = React.Children.toArray(children).filter(Boolean);
41
+ return childrenArray.reduce((output, child, index) => {
42
+ output.push(child);
43
+
44
+ if (index < childrenArray.length - 1) {
45
+ output.push( /*#__PURE__*/React.cloneElement(separator, {
46
+ key: `separator-${index}`
47
+ }));
48
+ }
49
+
50
+ return output;
51
+ }, []);
52
+ }
53
+
54
+ const getSideFromDirection = direction => {
55
+ return {
56
+ row: 'Left',
57
+ 'row-reverse': 'Right',
58
+ column: 'Top',
59
+ 'column-reverse': 'Bottom'
60
+ }[direction];
61
+ };
62
+
63
+ export const style = ({
64
+ ownerState,
65
+ theme
66
+ }) => {
67
+ let styles = _extends({
68
+ display: 'flex',
69
+ flexDirection: 'column'
70
+ }, handleBreakpoints({
71
+ theme
72
+ }, resolveBreakpointValues({
73
+ values: ownerState.direction,
74
+ breakpoints: theme.breakpoints.values
75
+ }), propValue => ({
76
+ flexDirection: propValue
77
+ })));
78
+
79
+ if (ownerState.spacing) {
80
+ const transformer = createUnarySpacing(theme);
81
+ const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
82
+ if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
83
+ acc[breakpoint] = true;
84
+ }
85
+
86
+ return acc;
87
+ }, {});
88
+ const directionValues = resolveBreakpointValues({
89
+ values: ownerState.direction,
90
+ base
91
+ });
92
+ const spacingValues = resolveBreakpointValues({
93
+ values: ownerState.spacing,
94
+ base
95
+ });
96
+
97
+ if (typeof directionValues === 'object') {
98
+ Object.keys(directionValues).forEach((breakpoint, index, breakpoints) => {
99
+ const directionValue = directionValues[breakpoint];
100
+
101
+ if (!directionValue) {
102
+ const previousDirectionValue = index > 0 ? directionValues[breakpoints[index - 1]] : 'column';
103
+ directionValues[breakpoint] = previousDirectionValue;
104
+ }
105
+ });
106
+ }
107
+
108
+ const styleFromPropValue = (propValue, breakpoint) => {
109
+ return {
110
+ '& > :not(style) + :not(style)': {
111
+ margin: 0,
112
+ [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
113
+ }
114
+ };
115
+ };
116
+
117
+ styles = deepmerge(styles, handleBreakpoints({
118
+ theme
119
+ }, spacingValues, styleFromPropValue));
120
+ }
121
+
122
+ styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
123
+ return styles;
124
+ };
125
+ export default function createStack(options = {}) {
126
+ const {
127
+ // This will allow adding custom styled fn (for example for custom sx style function)
128
+ createStyledComponent = defaultCreateStyledComponent,
129
+ useThemeProps = useThemePropsDefault,
130
+ componentName = 'MuiStack'
131
+ } = options;
132
+
133
+ const useUtilityClasses = () => {
134
+ const slots = {
135
+ root: ['root']
136
+ };
137
+ return composeClasses(slots, slot => generateUtilityClass(componentName, slot), {});
138
+ };
139
+
140
+ const StackRoot = createStyledComponent(style);
141
+ const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
142
+ const themeProps = useThemeProps(inProps);
143
+ const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
144
+
145
+ const {
146
+ component = 'div',
147
+ direction = 'column',
148
+ spacing = 0,
149
+ divider,
150
+ children,
151
+ className
152
+ } = props,
153
+ other = _objectWithoutPropertiesLoose(props, _excluded);
154
+
155
+ const ownerState = {
156
+ direction,
157
+ spacing
158
+ };
159
+ const classes = useUtilityClasses();
160
+ return /*#__PURE__*/_jsx(StackRoot, _extends({
161
+ as: component,
162
+ ownerState: ownerState,
163
+ ref: ref,
164
+ className: clsx(classes.root, className)
165
+ }, other, {
166
+ children: divider ? joinChildren(children, divider) : children
167
+ }));
168
+ });
169
+ process.env.NODE_ENV !== "production" ? Stack.propTypes
170
+ /* remove-proptypes */
171
+ = {
172
+ children: PropTypes.node,
173
+ direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
174
+ divider: PropTypes.node,
175
+ spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
176
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
177
+ } : void 0;
178
+ return Stack;
179
+ }
@@ -0,0 +1,5 @@
1
+ export { default } from './Stack';
2
+ export { default as createStack } from './createStack';
3
+ export * from './StackProps';
4
+ export { default as stackClasses } from './stackClasses';
5
+ export * from './stackClasses';
@@ -0,0 +1,6 @@
1
+ import { unstable_generateUtilityClass as generateUtilityClass, unstable_generateUtilityClasses as generateUtilityClasses } from '@mui/utils';
2
+ export function getStackUtilityClass(slot) {
3
+ return generateUtilityClass('MuiStack', slot);
4
+ }
5
+ const stackClasses = generateUtilityClasses('MuiStack', ['root']);
6
+ export default stackClasses;
package/esm/createBox.js CHANGED
@@ -14,7 +14,9 @@ export default function createBox(options = {}) {
14
14
  generateClassName,
15
15
  styleFunctionSx = defaultStyleFunctionSx
16
16
  } = options;
17
- const BoxRoot = styled('div')(styleFunctionSx);
17
+ const BoxRoot = styled('div', {
18
+ shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
19
+ })(styleFunctionSx);
18
20
  const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
19
21
  const theme = useTheme(defaultTheme);
20
22
 
@@ -1,9 +1,11 @@
1
- import _extends from "@babel/runtime/helpers/esm/extends";
2
1
  import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
2
+ import _extends from "@babel/runtime/helpers/esm/extends";
3
3
  const _excluded = ["name", "slot", "skipVariantsResolver", "skipSx", "overridesResolver"],
4
4
  _excluded2 = ["theme"],
5
5
  _excluded3 = ["theme"];
6
- import styledEngineStyled from '@mui/styled-engine';
6
+
7
+ /* eslint-disable no-underscore-dangle */
8
+ import styledEngineStyled, { internal_processStyles as processStyles } from '@mui/styled-engine';
7
9
  import { getDisplayName } from '@mui/utils';
8
10
  import createTheme from './createTheme';
9
11
  import propsToClassKey from './propsToClassKey';
@@ -11,6 +13,14 @@ import defaultStyleFunctionSx from './styleFunctionSx';
11
13
 
12
14
  function isEmpty(obj) {
13
15
  return Object.keys(obj).length === 0;
16
+ } // https://github.com/emotion-js/emotion/blob/26ded6109fcd8ca9875cc2ce4564fee678a3f3c5/packages/styled/src/utils.js#L40
17
+
18
+
19
+ function isStringTag(tag) {
20
+ return typeof tag === 'string' && // 96 is one less than the char code
21
+ // for "a" so this is checking that
22
+ // it's a lowercase character
23
+ tag.charCodeAt(0) > 96;
14
24
  }
15
25
 
16
26
  const getStyleOverrides = (name, theme) => {
@@ -80,7 +90,19 @@ export default function createStyled(input = {}) {
80
90
  slotShouldForwardProp = shouldForwardProp,
81
91
  styleFunctionSx = defaultStyleFunctionSx
82
92
  } = input;
93
+
94
+ const systemSx = props => {
95
+ const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
96
+ return styleFunctionSx(_extends({}, props, {
97
+ theme
98
+ }));
99
+ };
100
+
101
+ systemSx.__mui_systemSx = true;
83
102
  return (tag, inputOptions = {}) => {
103
+ // Filter out the `sx` style function from the previous styled component to prevent unnecessary styles generated by the composite components.
104
+ processStyles(tag, styles => styles.filter(style => !(style != null && style.__mui_systemSx)));
105
+
84
106
  const {
85
107
  name: componentName,
86
108
  slot: componentSlot,
@@ -108,6 +130,9 @@ export default function createStyled(input = {}) {
108
130
  } else if (componentSlot) {
109
131
  // any other slot specified
110
132
  shouldForwardPropOption = slotShouldForwardProp;
133
+ } else if (isStringTag(tag)) {
134
+ // for string (html) tag, preserve the behavior in emotion & styled-components.
135
+ shouldForwardPropOption = undefined;
111
136
  }
112
137
 
113
138
  const defaultStyledResolver = styledEngineStyled(tag, _extends({
@@ -120,7 +145,6 @@ export default function createStyled(input = {}) {
120
145
  // On the server Emotion doesn't use React.forwardRef for creating components, so the created
121
146
  // component stays as a function. This condition makes sure that we do not interpolate functions
122
147
  // which are basically components used as a selectors.
123
- // eslint-disable-next-line no-underscore-dangle
124
148
  return typeof stylesArg === 'function' && stylesArg.__emotion_real !== stylesArg ? _ref => {
125
149
  let {
126
150
  theme: themeInput
@@ -161,12 +185,7 @@ export default function createStyled(input = {}) {
161
185
  }
162
186
 
163
187
  if (!skipSx) {
164
- expressionsWithDefaultTheme.push(props => {
165
- const theme = isEmpty(props.theme) ? defaultTheme : props.theme;
166
- return styleFunctionSx(_extends({}, props, {
167
- theme
168
- }));
169
- });
188
+ expressionsWithDefaultTheme.push(systemSx);
170
189
  }
171
190
 
172
191
  const numOfCustomFnsApplied = expressionsWithDefaultTheme.length - expressions.length;
@@ -179,7 +198,6 @@ export default function createStyled(input = {}) {
179
198
  } else if (typeof styleArg === 'function' && // On the server Emotion doesn't use React.forwardRef for creating components, so the created
180
199
  // component stays as a function. This condition makes sure that we do not interpolate functions
181
200
  // which are basically components used as a selectors.
182
- // eslint-disable-next-line no-underscore-dangle
183
201
  styleArg.__emotion_real !== styleArg) {
184
202
  // If the type is function, we need to define the default theme.
185
203
  transformedStyleArg = _ref2 => {
@@ -155,7 +155,7 @@ export default function createCssVarsProvider(options) {
155
155
  })();
156
156
 
157
157
  if (key === resolvedDefaultColorScheme) {
158
- defaultColorSchemeStyleSheet[colorSchemeSelector] = css;
158
+ defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css;
159
159
  } else {
160
160
  otherColorSchemesStyleSheet[`${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]`] = css;
161
161
  }
package/esm/index.js CHANGED
@@ -48,4 +48,6 @@ export { default as createContainer } from './Container/createContainer';
48
48
  export { default as Container } from './Container';
49
49
  export * from './Container';
50
50
  export { default as Unstable_Grid } from './Unstable_Grid/Grid';
51
- export * from './Unstable_Grid';
51
+ export * from './Unstable_Grid';
52
+ export { default as Stack } from './Stack/Stack';
53
+ export * from './Stack';
package/index.d.ts CHANGED
@@ -32,12 +32,7 @@ export type BordersProps = PropsFor<typeof borders>;
32
32
 
33
33
  // breakpoints.js
34
34
  type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
35
-
36
- export function handleBreakpoints<Props>(
37
- props: Props,
38
- propValue: any,
39
- styleFromPropValue: (value: any) => any,
40
- ): any;
35
+ export { handleBreakpoints } from './breakpoints';
41
36
 
42
37
  /**
43
38
  * @returns An enhanced stylefunction that considers breakpoints
@@ -178,3 +173,6 @@ export * from './Container';
178
173
 
179
174
  export { default as Unstable_Grid } from './Unstable_Grid';
180
175
  export * from './Unstable_Grid';
176
+
177
+ export { default as Stack } from './Stack';
178
+ export * from './Stack';
package/index.js CHANGED
@@ -1,4 +1,4 @@
1
- /** @license MUI v5.9.1
1
+ /** @license MUI v5.10.0
2
2
  *
3
3
  * This source code is licensed under the MIT license found in the
4
4
  * LICENSE file in the root directory of this source tree.
@@ -54,7 +54,8 @@ var _exportNames = {
54
54
  unstable_createGetCssVar: true,
55
55
  createContainer: true,
56
56
  Container: true,
57
- Unstable_Grid: true
57
+ Unstable_Grid: true,
58
+ Stack: true
58
59
  };
59
60
  Object.defineProperty(exports, "Box", {
60
61
  enumerable: true,
@@ -74,6 +75,12 @@ Object.defineProperty(exports, "GlobalStyles", {
74
75
  return _styledEngine.GlobalStyles;
75
76
  }
76
77
  });
78
+ Object.defineProperty(exports, "Stack", {
79
+ enumerable: true,
80
+ get: function () {
81
+ return _Stack.default;
82
+ }
83
+ });
77
84
  Object.defineProperty(exports, "StyledEngineProvider", {
78
85
  enumerable: true,
79
86
  get: function () {
@@ -537,6 +544,22 @@ Object.keys(_Unstable_Grid).forEach(function (key) {
537
544
  });
538
545
  });
539
546
 
547
+ var _Stack = _interopRequireDefault(require("./Stack/Stack"));
548
+
549
+ var _Stack2 = require("./Stack");
550
+
551
+ Object.keys(_Stack2).forEach(function (key) {
552
+ if (key === "default" || key === "__esModule") return;
553
+ if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
554
+ if (key in exports && exports[key] === _Stack2[key]) return;
555
+ Object.defineProperty(exports, key, {
556
+ enumerable: true,
557
+ get: function () {
558
+ return _Stack2[key];
559
+ }
560
+ });
561
+ });
562
+
540
563
  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); }
541
564
 
542
565
  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; }
package/index.spec.d.ts CHANGED
@@ -1 +1 @@
1
- export {};
1
+ export {};
@@ -0,0 +1,51 @@
1
+ import PropTypes from 'prop-types';
2
+ import createStack from './createStack';
3
+ /**
4
+ *
5
+ * Demos:
6
+ *
7
+ * - [Stack (Material UI)](https://mui.com/material-ui/react-stack/)
8
+ *
9
+ * API:
10
+ *
11
+ * - [Stack API](https://mui.com/system/api/stack/)
12
+ */
13
+
14
+ var Stack = createStack();
15
+ process.env.NODE_ENV !== "production" ? Stack.propTypes
16
+ /* remove-proptypes */
17
+ = {
18
+ // ----------------------------- Warning --------------------------------
19
+ // | These PropTypes are generated from the TypeScript type definitions |
20
+ // | To update them edit TypeScript types and run "yarn proptypes" |
21
+ // ----------------------------------------------------------------------
22
+
23
+ /**
24
+ * The content of the component.
25
+ */
26
+ children: PropTypes.node,
27
+
28
+ /**
29
+ * Defines the `flex-direction` style property.
30
+ * It is applied for all screen sizes.
31
+ * @default 'column'
32
+ */
33
+ direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
34
+
35
+ /**
36
+ * Add an element between each child.
37
+ */
38
+ divider: PropTypes.node,
39
+
40
+ /**
41
+ * Defines the space between immediate children.
42
+ * @default 0
43
+ */
44
+ spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
45
+
46
+ /**
47
+ * The system prop, which allows defining system overrides as well as additional CSS styles.
48
+ */
49
+ sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
50
+ } : void 0;
51
+ export default Stack;
@@ -0,0 +1 @@
1
+ export {};