@mui/system 6.1.1 → 6.1.3
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.
- package/Box/Box.js +17 -11
- package/Box/boxClasses.js +10 -3
- package/Box/index.js +35 -3
- package/Box/package.json +2 -2
- package/CHANGELOG.md +136 -0
- package/Container/Container.js +17 -12
- package/Container/ContainerProps.js +5 -1
- package/Container/containerClasses.js +14 -6
- package/Container/createContainer.js +36 -28
- package/Container/index.js +35 -3
- package/Container/package.json +2 -2
- package/DefaultPropsProvider/DefaultPropsProvider.js +19 -11
- package/DefaultPropsProvider/index.js +19 -1
- package/DefaultPropsProvider/package.json +2 -2
- package/GlobalStyles/GlobalStyles.js +18 -11
- package/GlobalStyles/index.js +25 -2
- package/GlobalStyles/package.json +2 -2
- package/Grid/Grid.js +38 -27
- package/Grid/GridProps.d.ts +16 -11
- package/Grid/GridProps.js +5 -1
- package/Grid/createGrid.js +46 -38
- package/Grid/gridClasses.js +14 -6
- package/Grid/gridGenerator.d.ts +3 -7
- package/Grid/gridGenerator.js +62 -69
- package/Grid/index.js +63 -6
- package/Grid/package.json +2 -2
- package/Grid/traverseBreakpoints.js +11 -3
- package/InitColorSchemeScript/InitColorSchemeScript.js +16 -7
- package/InitColorSchemeScript/index.js +13 -1
- package/InitColorSchemeScript/package.json +2 -2
- package/RtlProvider/index.js +17 -8
- package/RtlProvider/package.json +2 -2
- package/Stack/Stack.js +17 -11
- package/Stack/StackProps.js +5 -1
- package/Stack/createStack.js +46 -36
- package/Stack/index.js +55 -5
- package/Stack/package.json +2 -2
- package/Stack/stackClasses.js +14 -6
- package/ThemeProvider/ThemeProvider.js +27 -20
- package/ThemeProvider/index.js +13 -1
- package/ThemeProvider/package.json +2 -2
- package/borders/borders.js +36 -26
- package/borders/index.js +25 -2
- package/borders/package.json +2 -2
- package/breakpoints/breakpoints.js +34 -21
- package/breakpoints/index.js +25 -2
- package/breakpoints/package.json +2 -2
- package/colorManipulator/colorManipulator.js +50 -25
- package/colorManipulator/index.js +16 -1
- package/colorManipulator/package.json +2 -2
- package/compose/compose.js +10 -3
- package/compose/index.js +13 -1
- package/compose/package.json +2 -2
- package/createBox/createBox.js +20 -13
- package/createBox/index.js +13 -1
- package/createBox/package.json +2 -2
- package/createBreakpoints/createBreakpoints.js +9 -2
- package/createBreakpoints/index.js +13 -3
- package/createBreakpoints/package.json +2 -2
- package/createStyled/createStyled.js +161 -117
- package/createStyled/index.js +25 -2
- package/createStyled/package.json +2 -2
- package/createTheme/applyStyles.js +7 -1
- package/createTheme/createSpacing.js +8 -3
- package/createTheme/createTheme.d.ts +16 -10
- package/createTheme/createTheme.js +25 -18
- package/createTheme/index.js +27 -3
- package/createTheme/package.json +2 -2
- package/createTheme/shape.js +7 -1
- package/cssContainerQueries/cssContainerQueries.js +16 -7
- package/cssContainerQueries/index.js +31 -2
- package/cssContainerQueries/package.json +2 -2
- package/cssGrid/cssGrid.js +40 -31
- package/cssGrid/index.js +25 -2
- package/cssGrid/package.json +2 -2
- package/cssVars/createCssVarsProvider.d.ts +7 -1
- package/cssVars/createCssVarsProvider.js +46 -31
- package/cssVars/createCssVarsTheme.js +14 -7
- package/cssVars/createGetCssVar.js +7 -1
- package/cssVars/cssVarsParser.js +13 -3
- package/cssVars/getColorSchemeSelector.js +7 -1
- package/cssVars/index.js +41 -5
- package/cssVars/package.json +2 -2
- package/cssVars/prepareCssVars.js +16 -9
- package/cssVars/prepareTypographyVars.js +7 -1
- package/cssVars/useCurrentColorScheme.js +19 -11
- package/display/display.js +16 -9
- package/display/index.js +25 -2
- package/display/package.json +2 -2
- package/esm/Box/Box.js +30 -0
- package/esm/Box/boxClasses.js +3 -0
- package/esm/Box/index.js +3 -0
- package/{node → esm}/Container/Container.js +12 -17
- package/esm/Container/ContainerProps.js +1 -0
- package/esm/Container/containerClasses.js +7 -0
- package/{node → esm}/Container/createContainer.js +28 -36
- package/esm/Container/index.js +3 -0
- package/{node → esm}/DefaultPropsProvider/DefaultPropsProvider.js +11 -19
- package/esm/DefaultPropsProvider/index.js +1 -0
- package/esm/GlobalStyles/GlobalStyles.js +37 -0
- package/esm/GlobalStyles/index.js +2 -0
- package/esm/Grid/Grid.js +106 -0
- package/esm/Grid/GridProps.js +1 -0
- package/esm/Grid/createGrid.js +148 -0
- package/{node → esm}/Grid/gridClasses.js +6 -14
- package/esm/Grid/gridGenerator.js +193 -0
- package/esm/Grid/index.js +6 -0
- package/{node → esm}/Grid/traverseBreakpoints.js +3 -11
- package/{node → esm}/InitColorSchemeScript/InitColorSchemeScript.js +7 -16
- package/esm/InitColorSchemeScript/index.js +1 -0
- package/esm/RtlProvider/index.js +22 -0
- package/{node → esm}/Stack/Stack.js +11 -17
- package/esm/Stack/StackProps.js +1 -0
- package/{node → esm}/Stack/createStack.js +36 -46
- package/esm/Stack/index.js +5 -0
- package/esm/Stack/stackClasses.js +7 -0
- package/{node → esm}/ThemeProvider/ThemeProvider.js +20 -27
- package/esm/ThemeProvider/index.js +1 -0
- package/esm/borders/borders.js +49 -0
- package/esm/borders/index.js +2 -0
- package/{node → esm}/breakpoints/breakpoints.js +21 -34
- package/esm/breakpoints/index.js +2 -0
- package/{node → esm}/colorManipulator/colorManipulator.js +23 -51
- package/esm/colorManipulator/index.js +1 -0
- package/{node → esm}/compose/compose.js +3 -10
- package/esm/compose/index.js +1 -0
- package/esm/createBox/createBox.js +35 -0
- package/esm/createBox/index.js +1 -0
- package/{node → esm}/createBreakpoints/createBreakpoints.js +2 -9
- package/esm/createBreakpoints/index.js +3 -0
- package/esm/createStyled/createStyled.js +276 -0
- package/esm/createStyled/index.js +2 -0
- package/{node → esm}/createTheme/applyStyles.js +1 -7
- package/{node → esm}/createTheme/createSpacing.js +3 -8
- package/esm/createTheme/createTheme.js +49 -0
- package/esm/createTheme/index.js +3 -0
- package/esm/createTheme/shape.js +4 -0
- package/{node → esm}/cssContainerQueries/cssContainerQueries.js +6 -17
- package/esm/cssContainerQueries/index.js +2 -0
- package/esm/cssGrid/cssGrid.js +85 -0
- package/esm/cssGrid/index.js +2 -0
- package/{node → esm}/cssVars/createCssVarsProvider.js +37 -40
- package/esm/cssVars/createCssVarsTheme.js +21 -0
- package/{node → esm}/cssVars/createGetCssVar.js +1 -7
- package/{node → esm}/cssVars/cssVarsParser.js +3 -13
- package/{node → esm}/cssVars/getColorSchemeSelector.js +1 -7
- package/esm/cssVars/index.js +5 -0
- package/{node → esm}/cssVars/prepareCssVars.js +9 -16
- package/{node → esm}/cssVars/prepareTypographyVars.js +1 -7
- package/{node → esm}/cssVars/useCurrentColorScheme.js +11 -19
- package/esm/display/display.js +27 -0
- package/esm/display/index.js +2 -0
- package/esm/flexbox/flexbox.js +43 -0
- package/esm/flexbox/index.js +2 -0
- package/esm/getThemeValue/getThemeValue.js +51 -0
- package/esm/getThemeValue/index.js +2 -0
- package/esm/index.js +68 -0
- package/esm/memoTheme.js +28 -0
- package/esm/memoize/index.js +1 -0
- package/{node → esm}/memoize/memoize.js +1 -7
- package/esm/merge/index.js +1 -0
- package/esm/merge/merge.js +10 -0
- package/esm/palette/index.js +2 -0
- package/esm/palette/palette.js +26 -0
- package/esm/positions/index.js +2 -0
- package/esm/positions/positions.js +22 -0
- package/esm/preprocessStyles.js +25 -0
- package/esm/propsToClassKey/index.js +1 -0
- package/esm/propsToClassKey/propsToClassKey.js +25 -0
- package/esm/responsivePropType/index.js +1 -0
- package/esm/responsivePropType/responsivePropType.js +3 -0
- package/esm/shadows/index.js +1 -0
- package/esm/shadows/shadows.js +6 -0
- package/esm/sizing/index.js +2 -0
- package/esm/sizing/sizing.js +64 -0
- package/esm/spacing/index.js +2 -0
- package/{node → esm}/spacing/spacing.js +21 -36
- package/esm/style/index.js +2 -0
- package/{node → esm}/style/style.js +9 -18
- package/{node → esm}/styleFunctionSx/defaultSxConfig.js +65 -71
- package/{node → esm}/styleFunctionSx/extendSxProp.js +5 -12
- package/esm/styleFunctionSx/index.js +4 -0
- package/{node → esm}/styleFunctionSx/styleFunctionSx.js +19 -27
- package/esm/styled/index.js +1 -0
- package/esm/styled/styled.js +3 -0
- package/esm/typography/index.js +2 -0
- package/esm/typography/typography.js +37 -0
- package/esm/useMediaQuery/index.js +2 -0
- package/{node → esm}/useMediaQuery/useMediaQuery.js +8 -15
- package/esm/useTheme/index.js +2 -0
- package/esm/useTheme/useTheme.js +9 -0
- package/esm/useThemeProps/getThemeProps.js +12 -0
- package/esm/useThemeProps/index.js +2 -0
- package/esm/useThemeProps/useThemeProps.js +20 -0
- package/esm/useThemeWithoutDefault/index.js +1 -0
- package/esm/useThemeWithoutDefault/useThemeWithoutDefault.js +12 -0
- package/esm/version/index.js +6 -0
- package/flexbox/flexbox.js +24 -17
- package/flexbox/index.js +25 -2
- package/flexbox/package.json +2 -2
- package/getThemeValue/getThemeValue.js +40 -33
- package/getThemeValue/index.js +25 -2
- package/getThemeValue/package.json +2 -2
- package/index.d.ts +2 -0
- package/index.js +606 -63
- package/memoTheme.d.ts +12 -0
- package/memoTheme.js +34 -0
- package/memoize/index.js +13 -1
- package/memoize/memoize.js +7 -1
- package/memoize/package.json +2 -2
- package/merge/index.js +13 -1
- package/merge/merge.js +10 -3
- package/merge/package.json +2 -2
- package/modern/Grid/Grid.js +16 -11
- package/modern/Grid/createGrid.js +1 -1
- package/modern/Grid/gridGenerator.js +28 -51
- package/modern/colorManipulator/colorManipulator.js +3 -4
- package/modern/createStyled/createStyled.js +144 -109
- package/modern/cssContainerQueries/cssContainerQueries.js +1 -2
- package/modern/cssVars/createCssVarsProvider.js +8 -2
- package/modern/cssVars/useCurrentColorScheme.js +4 -4
- package/modern/index.js +3 -2
- package/modern/memoTheme.js +28 -0
- package/modern/preprocessStyles.js +25 -0
- package/modern/version/index.js +2 -2
- package/package.json +7 -7
- package/palette/index.js +25 -2
- package/palette/package.json +2 -2
- package/palette/palette.js +16 -8
- package/positions/index.js +25 -2
- package/positions/package.json +2 -2
- package/positions/positions.js +16 -9
- package/preprocessStyles.d.ts +5 -0
- package/preprocessStyles.js +31 -0
- package/propsToClassKey/index.js +13 -1
- package/propsToClassKey/package.json +2 -2
- package/propsToClassKey/propsToClassKey.js +11 -4
- package/responsivePropType/index.js +13 -1
- package/responsivePropType/package.json +2 -2
- package/responsivePropType/responsivePropType.js +10 -3
- package/shadows/index.js +13 -1
- package/shadows/package.json +2 -2
- package/shadows/shadows.js +10 -3
- package/sizing/index.js +25 -2
- package/sizing/package.json +2 -2
- package/sizing/sizing.js +27 -17
- package/spacing/index.js +25 -2
- package/spacing/package.json +2 -2
- package/spacing/spacing.js +36 -21
- package/style/index.js +25 -2
- package/style/package.json +2 -2
- package/style/style.js +18 -9
- package/styleFunctionSx/defaultSxConfig.js +71 -65
- package/styleFunctionSx/extendSxProp.js +12 -5
- package/styleFunctionSx/index.js +34 -4
- package/styleFunctionSx/package.json +2 -2
- package/styleFunctionSx/styleFunctionSx.d.ts +1 -1
- package/styleFunctionSx/styleFunctionSx.js +27 -19
- package/styled/index.js +13 -1
- package/styled/package.json +2 -2
- package/styled/styled.js +10 -3
- package/typography/index.js +25 -2
- package/typography/package.json +2 -2
- package/typography/typography.js +20 -13
- package/useMediaQuery/index.js +25 -2
- package/useMediaQuery/package.json +2 -2
- package/useMediaQuery/useMediaQuery.js +15 -8
- package/useTheme/index.js +25 -2
- package/useTheme/package.json +2 -2
- package/useTheme/useTheme.js +11 -5
- package/useThemeProps/getThemeProps.js +10 -3
- package/useThemeProps/index.js +20 -2
- package/useThemeProps/package.json +2 -2
- package/useThemeProps/useThemeProps.js +11 -5
- package/useThemeWithoutDefault/index.js +13 -1
- package/useThemeWithoutDefault/package.json +2 -2
- package/useThemeWithoutDefault/useThemeWithoutDefault.js +10 -4
- package/version/index.js +12 -6
- package/version/package.json +2 -2
- package/node/Box/Box.js +0 -36
- package/node/Box/boxClasses.js +0 -10
- package/node/Box/index.js +0 -35
- package/node/Container/ContainerProps.js +0 -5
- package/node/Container/containerClasses.js +0 -15
- package/node/Container/index.js +0 -35
- package/node/DefaultPropsProvider/index.js +0 -19
- package/node/GlobalStyles/GlobalStyles.js +0 -44
- package/node/GlobalStyles/index.js +0 -25
- package/node/Grid/Grid.js +0 -107
- package/node/Grid/GridProps.js +0 -5
- package/node/Grid/createGrid.js +0 -156
- package/node/Grid/gridGenerator.js +0 -232
- package/node/Grid/index.js +0 -63
- package/node/InitColorSchemeScript/index.js +0 -13
- package/node/RtlProvider/index.js +0 -31
- package/node/Stack/StackProps.js +0 -5
- package/node/Stack/index.js +0 -55
- package/node/Stack/stackClasses.js +0 -15
- package/node/ThemeProvider/index.js +0 -13
- package/node/borders/borders.js +0 -59
- package/node/borders/index.js +0 -25
- package/node/breakpoints/index.js +0 -25
- package/node/colorManipulator/index.js +0 -16
- package/node/compose/index.js +0 -13
- package/node/createBox/createBox.js +0 -42
- package/node/createBox/index.js +0 -13
- package/node/createBreakpoints/index.js +0 -13
- package/node/createStyled/createStyled.js +0 -252
- package/node/createStyled/index.js +0 -25
- package/node/createTheme/createTheme.js +0 -56
- package/node/createTheme/index.js +0 -27
- package/node/createTheme/shape.js +0 -10
- package/node/cssContainerQueries/index.js +0 -31
- package/node/cssGrid/cssGrid.js +0 -94
- package/node/cssGrid/index.js +0 -25
- package/node/cssVars/createCssVarsTheme.js +0 -28
- package/node/cssVars/index.js +0 -41
- package/node/display/display.js +0 -34
- package/node/display/index.js +0 -25
- package/node/flexbox/flexbox.js +0 -50
- package/node/flexbox/index.js +0 -25
- package/node/getThemeValue/getThemeValue.js +0 -58
- package/node/getThemeValue/index.js +0 -25
- package/node/index.js +0 -609
- package/node/memoize/index.js +0 -13
- package/node/merge/index.js +0 -13
- package/node/merge/merge.js +0 -17
- package/node/palette/index.js +0 -25
- package/node/palette/palette.js +0 -34
- package/node/positions/index.js +0 -25
- package/node/positions/positions.js +0 -29
- package/node/propsToClassKey/index.js +0 -13
- package/node/propsToClassKey/propsToClassKey.js +0 -32
- package/node/responsivePropType/index.js +0 -13
- package/node/responsivePropType/responsivePropType.js +0 -10
- package/node/shadows/index.js +0 -13
- package/node/shadows/shadows.js +0 -13
- package/node/sizing/index.js +0 -25
- package/node/sizing/sizing.js +0 -74
- package/node/spacing/index.js +0 -25
- package/node/style/index.js +0 -25
- package/node/styleFunctionSx/index.js +0 -34
- package/node/styled/index.js +0 -13
- package/node/styled/styled.js +0 -10
- package/node/typography/index.js +0 -25
- package/node/typography/typography.js +0 -44
- package/node/useMediaQuery/index.js +0 -25
- package/node/useTheme/index.js +0 -25
- package/node/useTheme/useTheme.js +0 -15
- package/node/useThemeProps/getThemeProps.js +0 -19
- package/node/useThemeProps/index.js +0 -20
- package/node/useThemeProps/useThemeProps.js +0 -26
- package/node/useThemeWithoutDefault/index.js +0 -13
- package/node/useThemeWithoutDefault/useThemeWithoutDefault.js +0 -18
- package/node/version/index.js +0 -12
package/Stack/createStack.js
CHANGED
|
@@ -1,25 +1,34 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = createStack;
|
|
9
|
+
exports.style = void 0;
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _clsx = _interopRequireDefault(require("clsx"));
|
|
13
|
+
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
|
|
14
|
+
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
|
|
15
|
+
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
|
|
16
|
+
var _styled = _interopRequireDefault(require("../styled"));
|
|
17
|
+
var _useThemeProps = _interopRequireDefault(require("../useThemeProps"));
|
|
18
|
+
var _styleFunctionSx = require("../styleFunctionSx");
|
|
19
|
+
var _createTheme = _interopRequireDefault(require("../createTheme"));
|
|
20
|
+
var _breakpoints = require("../breakpoints");
|
|
21
|
+
var _spacing = require("../spacing");
|
|
22
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
23
|
+
const defaultTheme = (0, _createTheme.default)();
|
|
15
24
|
// widening Theme to any so that the consumer can own the theme structure.
|
|
16
|
-
const defaultCreateStyledComponent =
|
|
25
|
+
const defaultCreateStyledComponent = (0, _styled.default)('div', {
|
|
17
26
|
name: 'MuiStack',
|
|
18
27
|
slot: 'Root',
|
|
19
28
|
overridesResolver: (props, styles) => styles.root
|
|
20
29
|
});
|
|
21
30
|
function useThemePropsDefault(props) {
|
|
22
|
-
return
|
|
31
|
+
return (0, _useThemeProps.default)({
|
|
23
32
|
props,
|
|
24
33
|
name: 'MuiStack',
|
|
25
34
|
defaultTheme
|
|
@@ -53,16 +62,16 @@ const getSideFromDirection = direction => {
|
|
|
53
62
|
'column-reverse': 'Bottom'
|
|
54
63
|
}[direction];
|
|
55
64
|
};
|
|
56
|
-
|
|
65
|
+
const style = ({
|
|
57
66
|
ownerState,
|
|
58
67
|
theme
|
|
59
68
|
}) => {
|
|
60
69
|
let styles = {
|
|
61
70
|
display: 'flex',
|
|
62
71
|
flexDirection: 'column',
|
|
63
|
-
...handleBreakpoints({
|
|
72
|
+
...(0, _breakpoints.handleBreakpoints)({
|
|
64
73
|
theme
|
|
65
|
-
}, resolveBreakpointValues({
|
|
74
|
+
}, (0, _breakpoints.resolveBreakpointValues)({
|
|
66
75
|
values: ownerState.direction,
|
|
67
76
|
breakpoints: theme.breakpoints.values
|
|
68
77
|
}), propValue => ({
|
|
@@ -70,18 +79,18 @@ export const style = ({
|
|
|
70
79
|
}))
|
|
71
80
|
};
|
|
72
81
|
if (ownerState.spacing) {
|
|
73
|
-
const transformer = createUnarySpacing(theme);
|
|
82
|
+
const transformer = (0, _spacing.createUnarySpacing)(theme);
|
|
74
83
|
const base = Object.keys(theme.breakpoints.values).reduce((acc, breakpoint) => {
|
|
75
84
|
if (typeof ownerState.spacing === 'object' && ownerState.spacing[breakpoint] != null || typeof ownerState.direction === 'object' && ownerState.direction[breakpoint] != null) {
|
|
76
85
|
acc[breakpoint] = true;
|
|
77
86
|
}
|
|
78
87
|
return acc;
|
|
79
88
|
}, {});
|
|
80
|
-
const directionValues = resolveBreakpointValues({
|
|
89
|
+
const directionValues = (0, _breakpoints.resolveBreakpointValues)({
|
|
81
90
|
values: ownerState.direction,
|
|
82
91
|
base
|
|
83
92
|
});
|
|
84
|
-
const spacingValues = resolveBreakpointValues({
|
|
93
|
+
const spacingValues = (0, _breakpoints.resolveBreakpointValues)({
|
|
85
94
|
values: ownerState.spacing,
|
|
86
95
|
base
|
|
87
96
|
});
|
|
@@ -97,7 +106,7 @@ export const style = ({
|
|
|
97
106
|
const styleFromPropValue = (propValue, breakpoint) => {
|
|
98
107
|
if (ownerState.useFlexGap) {
|
|
99
108
|
return {
|
|
100
|
-
gap: getValue(transformer, propValue)
|
|
109
|
+
gap: (0, _spacing.getValue)(transformer, propValue)
|
|
101
110
|
};
|
|
102
111
|
}
|
|
103
112
|
return {
|
|
@@ -107,18 +116,19 @@ export const style = ({
|
|
|
107
116
|
margin: 0
|
|
108
117
|
},
|
|
109
118
|
'& > :not(style) ~ :not(style)': {
|
|
110
|
-
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: getValue(transformer, propValue)
|
|
119
|
+
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: (0, _spacing.getValue)(transformer, propValue)
|
|
111
120
|
}
|
|
112
121
|
};
|
|
113
122
|
};
|
|
114
|
-
styles =
|
|
123
|
+
styles = (0, _deepmerge.default)(styles, (0, _breakpoints.handleBreakpoints)({
|
|
115
124
|
theme
|
|
116
125
|
}, spacingValues, styleFromPropValue));
|
|
117
126
|
}
|
|
118
|
-
styles = mergeBreakpointsInOrder(theme.breakpoints, styles);
|
|
127
|
+
styles = (0, _breakpoints.mergeBreakpointsInOrder)(theme.breakpoints, styles);
|
|
119
128
|
return styles;
|
|
120
129
|
};
|
|
121
|
-
|
|
130
|
+
exports.style = style;
|
|
131
|
+
function createStack(options = {}) {
|
|
122
132
|
const {
|
|
123
133
|
// This will allow adding custom styled fn (for example for custom sx style function)
|
|
124
134
|
createStyledComponent = defaultCreateStyledComponent,
|
|
@@ -129,12 +139,12 @@ export default function createStack(options = {}) {
|
|
|
129
139
|
const slots = {
|
|
130
140
|
root: ['root']
|
|
131
141
|
};
|
|
132
|
-
return
|
|
142
|
+
return (0, _composeClasses.default)(slots, slot => (0, _generateUtilityClass.default)(componentName, slot), {});
|
|
133
143
|
};
|
|
134
144
|
const StackRoot = createStyledComponent(style);
|
|
135
145
|
const Stack = /*#__PURE__*/React.forwardRef(function Grid(inProps, ref) {
|
|
136
146
|
const themeProps = useThemeProps(inProps);
|
|
137
|
-
const props = extendSxProp(themeProps); // `color` type conflicts with html color attribute.
|
|
147
|
+
const props = (0, _styleFunctionSx.extendSxProp)(themeProps); // `color` type conflicts with html color attribute.
|
|
138
148
|
const {
|
|
139
149
|
component = 'div',
|
|
140
150
|
direction = 'column',
|
|
@@ -151,21 +161,21 @@ export default function createStack(options = {}) {
|
|
|
151
161
|
useFlexGap
|
|
152
162
|
};
|
|
153
163
|
const classes = useUtilityClasses();
|
|
154
|
-
return /*#__PURE__*/
|
|
164
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(StackRoot, {
|
|
155
165
|
as: component,
|
|
156
166
|
ownerState: ownerState,
|
|
157
167
|
ref: ref,
|
|
158
|
-
className:
|
|
168
|
+
className: (0, _clsx.default)(classes.root, className),
|
|
159
169
|
...other,
|
|
160
170
|
children: divider ? joinChildren(children, divider) : children
|
|
161
171
|
});
|
|
162
172
|
});
|
|
163
173
|
process.env.NODE_ENV !== "production" ? Stack.propTypes /* remove-proptypes */ = {
|
|
164
|
-
children:
|
|
165
|
-
direction:
|
|
166
|
-
divider:
|
|
167
|
-
spacing:
|
|
168
|
-
sx:
|
|
174
|
+
children: _propTypes.default.node,
|
|
175
|
+
direction: _propTypes.default.oneOfType([_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), _propTypes.default.arrayOf(_propTypes.default.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), _propTypes.default.object]),
|
|
176
|
+
divider: _propTypes.default.node,
|
|
177
|
+
spacing: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])), _propTypes.default.number, _propTypes.default.object, _propTypes.default.string]),
|
|
178
|
+
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object])
|
|
169
179
|
} : void 0;
|
|
170
180
|
return Stack;
|
|
171
181
|
}
|
package/Stack/index.js
CHANGED
|
@@ -1,5 +1,55 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
var _exportNames = {
|
|
9
|
+
createStack: true,
|
|
10
|
+
stackClasses: true
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "createStack", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _createStack.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "default", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _Stack.default;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "stackClasses", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _stackClasses.default;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
var _Stack = _interopRequireDefault(require("./Stack"));
|
|
31
|
+
var _createStack = _interopRequireDefault(require("./createStack"));
|
|
32
|
+
var _StackProps = require("./StackProps");
|
|
33
|
+
Object.keys(_StackProps).forEach(function (key) {
|
|
34
|
+
if (key === "default" || key === "__esModule") return;
|
|
35
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
36
|
+
if (key in exports && exports[key] === _StackProps[key]) return;
|
|
37
|
+
Object.defineProperty(exports, key, {
|
|
38
|
+
enumerable: true,
|
|
39
|
+
get: function () {
|
|
40
|
+
return _StackProps[key];
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
var _stackClasses = _interopRequireWildcard(require("./stackClasses"));
|
|
45
|
+
Object.keys(_stackClasses).forEach(function (key) {
|
|
46
|
+
if (key === "default" || key === "__esModule") return;
|
|
47
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
48
|
+
if (key in exports && exports[key] === _stackClasses[key]) return;
|
|
49
|
+
Object.defineProperty(exports, key, {
|
|
50
|
+
enumerable: true,
|
|
51
|
+
get: function () {
|
|
52
|
+
return _stackClasses[key];
|
|
53
|
+
}
|
|
54
|
+
});
|
|
55
|
+
});
|
package/Stack/package.json
CHANGED
package/Stack/stackClasses.js
CHANGED
|
@@ -1,7 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.default = void 0;
|
|
8
|
+
exports.getStackUtilityClass = getStackUtilityClass;
|
|
9
|
+
var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
|
|
10
|
+
var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
|
|
11
|
+
function getStackUtilityClass(slot) {
|
|
12
|
+
return (0, _generateUtilityClass.default)('MuiStack', slot);
|
|
5
13
|
}
|
|
6
|
-
const stackClasses =
|
|
7
|
-
|
|
14
|
+
const stackClasses = (0, _generateUtilityClasses.default)('MuiStack', ['root']);
|
|
15
|
+
var _default = exports.default = stackClasses;
|
|
@@ -1,14 +1,21 @@
|
|
|
1
|
+
"use strict";
|
|
1
2
|
'use client';
|
|
2
3
|
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
4
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
5
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
6
|
+
Object.defineProperty(exports, "__esModule", {
|
|
7
|
+
value: true
|
|
8
|
+
});
|
|
9
|
+
exports.default = void 0;
|
|
10
|
+
var React = _interopRequireWildcard(require("react"));
|
|
11
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
12
|
+
var _privateTheming = require("@mui/private-theming");
|
|
13
|
+
var _exactProp = _interopRequireDefault(require("@mui/utils/exactProp"));
|
|
14
|
+
var _styledEngine = require("@mui/styled-engine");
|
|
15
|
+
var _useThemeWithoutDefault = _interopRequireDefault(require("../useThemeWithoutDefault"));
|
|
16
|
+
var _RtlProvider = _interopRequireDefault(require("../RtlProvider"));
|
|
17
|
+
var _DefaultPropsProvider = _interopRequireDefault(require("../DefaultPropsProvider"));
|
|
18
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
19
|
const EMPTY_THEME = {};
|
|
13
20
|
function useThemeScoping(themeId, upperTheme, localTheme, isPrivate = false) {
|
|
14
21
|
return React.useMemo(() => {
|
|
@@ -49,8 +56,8 @@ function ThemeProvider(props) {
|
|
|
49
56
|
theme: localTheme,
|
|
50
57
|
themeId
|
|
51
58
|
} = props;
|
|
52
|
-
const upperTheme =
|
|
53
|
-
const upperPrivateTheme =
|
|
59
|
+
const upperTheme = (0, _useThemeWithoutDefault.default)(EMPTY_THEME);
|
|
60
|
+
const upperPrivateTheme = (0, _privateTheming.useTheme)() || EMPTY_THEME;
|
|
54
61
|
if (process.env.NODE_ENV !== 'production') {
|
|
55
62
|
if (upperTheme === null && typeof localTheme === 'function' || themeId && upperTheme && !upperTheme[themeId] && typeof localTheme === 'function') {
|
|
56
63
|
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'));
|
|
@@ -59,13 +66,13 @@ function ThemeProvider(props) {
|
|
|
59
66
|
const engineTheme = useThemeScoping(themeId, upperTheme, localTheme);
|
|
60
67
|
const privateTheme = useThemeScoping(themeId, upperPrivateTheme, localTheme, true);
|
|
61
68
|
const rtlValue = engineTheme.direction === 'rtl';
|
|
62
|
-
return /*#__PURE__*/
|
|
69
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_privateTheming.ThemeProvider, {
|
|
63
70
|
theme: privateTheme,
|
|
64
|
-
children: /*#__PURE__*/
|
|
71
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledEngine.ThemeContext.Provider, {
|
|
65
72
|
value: engineTheme,
|
|
66
|
-
children: /*#__PURE__*/
|
|
73
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_RtlProvider.default, {
|
|
67
74
|
value: rtlValue,
|
|
68
|
-
children: /*#__PURE__*/
|
|
75
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DefaultPropsProvider.default, {
|
|
69
76
|
value: engineTheme?.components,
|
|
70
77
|
children: children
|
|
71
78
|
})
|
|
@@ -81,17 +88,17 @@ process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes /* remove-propty
|
|
|
81
88
|
/**
|
|
82
89
|
* Your component tree.
|
|
83
90
|
*/
|
|
84
|
-
children:
|
|
91
|
+
children: _propTypes.default.node,
|
|
85
92
|
/**
|
|
86
93
|
* A theme object. You can provide a function to extend the outer theme.
|
|
87
94
|
*/
|
|
88
|
-
theme:
|
|
95
|
+
theme: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object]).isRequired,
|
|
89
96
|
/**
|
|
90
97
|
* The design system's unique id for getting the corresponded theme when there are multiple design systems.
|
|
91
98
|
*/
|
|
92
|
-
themeId:
|
|
99
|
+
themeId: _propTypes.default.string
|
|
93
100
|
} : void 0;
|
|
94
101
|
if (process.env.NODE_ENV !== 'production') {
|
|
95
|
-
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes =
|
|
102
|
+
process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = (0, _exactProp.default)(ThemeProvider.propTypes) : void 0;
|
|
96
103
|
}
|
|
97
|
-
|
|
104
|
+
var _default = exports.default = ThemeProvider;
|
package/ThemeProvider/index.js
CHANGED
|
@@ -1 +1,13 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
Object.defineProperty(exports, "default", {
|
|
8
|
+
enumerable: true,
|
|
9
|
+
get: function () {
|
|
10
|
+
return _ThemeProvider.default;
|
|
11
|
+
}
|
|
12
|
+
});
|
|
13
|
+
var _ThemeProvider = _interopRequireDefault(require("./ThemeProvider"));
|
package/borders/borders.js
CHANGED
|
@@ -1,49 +1,59 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.borderTopColor = exports.borderTop = exports.borderRightColor = exports.borderRight = exports.borderRadius = exports.borderLeftColor = exports.borderLeft = exports.borderColor = exports.borderBottomColor = exports.borderBottom = exports.border = void 0;
|
|
8
|
+
exports.borderTransform = borderTransform;
|
|
9
|
+
exports.outlineColor = exports.outline = exports.default = void 0;
|
|
10
|
+
var _responsivePropType = _interopRequireDefault(require("../responsivePropType"));
|
|
11
|
+
var _style = _interopRequireDefault(require("../style"));
|
|
12
|
+
var _compose = _interopRequireDefault(require("../compose"));
|
|
13
|
+
var _spacing = require("../spacing");
|
|
14
|
+
var _breakpoints = require("../breakpoints");
|
|
15
|
+
function borderTransform(value) {
|
|
7
16
|
if (typeof value !== 'number') {
|
|
8
17
|
return value;
|
|
9
18
|
}
|
|
10
19
|
return `${value}px solid`;
|
|
11
20
|
}
|
|
12
21
|
function createBorderStyle(prop, transform) {
|
|
13
|
-
return
|
|
22
|
+
return (0, _style.default)({
|
|
14
23
|
prop,
|
|
15
24
|
themeKey: 'borders',
|
|
16
25
|
transform
|
|
17
26
|
});
|
|
18
27
|
}
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
const border = exports.border = createBorderStyle('border', borderTransform);
|
|
29
|
+
const borderTop = exports.borderTop = createBorderStyle('borderTop', borderTransform);
|
|
30
|
+
const borderRight = exports.borderRight = createBorderStyle('borderRight', borderTransform);
|
|
31
|
+
const borderBottom = exports.borderBottom = createBorderStyle('borderBottom', borderTransform);
|
|
32
|
+
const borderLeft = exports.borderLeft = createBorderStyle('borderLeft', borderTransform);
|
|
33
|
+
const borderColor = exports.borderColor = createBorderStyle('borderColor');
|
|
34
|
+
const borderTopColor = exports.borderTopColor = createBorderStyle('borderTopColor');
|
|
35
|
+
const borderRightColor = exports.borderRightColor = createBorderStyle('borderRightColor');
|
|
36
|
+
const borderBottomColor = exports.borderBottomColor = createBorderStyle('borderBottomColor');
|
|
37
|
+
const borderLeftColor = exports.borderLeftColor = createBorderStyle('borderLeftColor');
|
|
38
|
+
const outline = exports.outline = createBorderStyle('outline', borderTransform);
|
|
39
|
+
const outlineColor = exports.outlineColor = createBorderStyle('outlineColor');
|
|
31
40
|
|
|
32
41
|
// false positive
|
|
33
42
|
// eslint-disable-next-line react/function-component-definition
|
|
34
|
-
|
|
43
|
+
const borderRadius = props => {
|
|
35
44
|
if (props.borderRadius !== undefined && props.borderRadius !== null) {
|
|
36
|
-
const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius');
|
|
45
|
+
const transformer = (0, _spacing.createUnaryUnit)(props.theme, 'shape.borderRadius', 4, 'borderRadius');
|
|
37
46
|
const styleFromPropValue = propValue => ({
|
|
38
|
-
borderRadius: getValue(transformer, propValue)
|
|
47
|
+
borderRadius: (0, _spacing.getValue)(transformer, propValue)
|
|
39
48
|
});
|
|
40
|
-
return handleBreakpoints(props, props.borderRadius, styleFromPropValue);
|
|
49
|
+
return (0, _breakpoints.handleBreakpoints)(props, props.borderRadius, styleFromPropValue);
|
|
41
50
|
}
|
|
42
51
|
return null;
|
|
43
52
|
};
|
|
53
|
+
exports.borderRadius = borderRadius;
|
|
44
54
|
borderRadius.propTypes = process.env.NODE_ENV !== 'production' ? {
|
|
45
|
-
borderRadius:
|
|
55
|
+
borderRadius: _responsivePropType.default
|
|
46
56
|
} : {};
|
|
47
57
|
borderRadius.filterProps = ['borderRadius'];
|
|
48
|
-
const borders =
|
|
49
|
-
|
|
58
|
+
const borders = (0, _compose.default)(border, borderTop, borderRight, borderBottom, borderLeft, borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor, borderRadius, outline, outlineColor);
|
|
59
|
+
var _default = exports.default = borders;
|
package/borders/index.js
CHANGED
|
@@ -1,2 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
var _exportNames = {};
|
|
8
|
+
Object.defineProperty(exports, "default", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () {
|
|
11
|
+
return _borders.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
var _borders = _interopRequireWildcard(require("./borders"));
|
|
15
|
+
Object.keys(_borders).forEach(function (key) {
|
|
16
|
+
if (key === "default" || key === "__esModule") return;
|
|
17
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
18
|
+
if (key in exports && exports[key] === _borders[key]) return;
|
|
19
|
+
Object.defineProperty(exports, key, {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _borders[key];
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
});
|
package/borders/package.json
CHANGED
|
@@ -1,11 +1,24 @@
|
|
|
1
|
-
|
|
2
|
-
import deepmerge from '@mui/utils/deepmerge';
|
|
3
|
-
import merge from "../merge/index.js";
|
|
4
|
-
import { isCqShorthand, getContainerQuery } from "../cssContainerQueries/index.js";
|
|
1
|
+
"use strict";
|
|
5
2
|
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.computeBreakpointsBase = computeBreakpointsBase;
|
|
8
|
+
exports.createEmptyBreakpointObject = createEmptyBreakpointObject;
|
|
9
|
+
exports.default = void 0;
|
|
10
|
+
exports.handleBreakpoints = handleBreakpoints;
|
|
11
|
+
exports.mergeBreakpointsInOrder = mergeBreakpointsInOrder;
|
|
12
|
+
exports.removeUnusedBreakpoints = removeUnusedBreakpoints;
|
|
13
|
+
exports.resolveBreakpointValues = resolveBreakpointValues;
|
|
14
|
+
exports.values = void 0;
|
|
15
|
+
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
16
|
+
var _deepmerge = _interopRequireDefault(require("@mui/utils/deepmerge"));
|
|
17
|
+
var _merge = _interopRequireDefault(require("../merge"));
|
|
18
|
+
var _cssContainerQueries = require("../cssContainerQueries");
|
|
6
19
|
// The breakpoint **start** at this value.
|
|
7
20
|
// For instance with the first breakpoint xs: [xs, sm[.
|
|
8
|
-
|
|
21
|
+
const values = exports.values = {
|
|
9
22
|
xs: 0,
|
|
10
23
|
// phone
|
|
11
24
|
sm: 600,
|
|
@@ -33,7 +46,7 @@ const defaultContainerQueries = {
|
|
|
33
46
|
}
|
|
34
47
|
})
|
|
35
48
|
};
|
|
36
|
-
|
|
49
|
+
function handleBreakpoints(props, propValue, styleFromPropValue) {
|
|
37
50
|
const theme = props.theme || {};
|
|
38
51
|
if (Array.isArray(propValue)) {
|
|
39
52
|
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
|
|
@@ -45,8 +58,8 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) {
|
|
|
45
58
|
if (typeof propValue === 'object') {
|
|
46
59
|
const themeBreakpoints = theme.breakpoints || defaultBreakpoints;
|
|
47
60
|
return Object.keys(propValue).reduce((acc, breakpoint) => {
|
|
48
|
-
if (isCqShorthand(themeBreakpoints.keys, breakpoint)) {
|
|
49
|
-
const containerKey = getContainerQuery(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
|
|
61
|
+
if ((0, _cssContainerQueries.isCqShorthand)(themeBreakpoints.keys, breakpoint)) {
|
|
62
|
+
const containerKey = (0, _cssContainerQueries.getContainerQuery)(theme.containerQueries ? theme : defaultContainerQueries, breakpoint);
|
|
50
63
|
if (containerKey) {
|
|
51
64
|
acc[containerKey] = styleFromPropValue(propValue[breakpoint], breakpoint);
|
|
52
65
|
}
|
|
@@ -82,20 +95,20 @@ function breakpoints(styleFunction) {
|
|
|
82
95
|
}
|
|
83
96
|
return acc;
|
|
84
97
|
}, null);
|
|
85
|
-
return
|
|
98
|
+
return (0, _merge.default)(base, extended);
|
|
86
99
|
};
|
|
87
100
|
newStyleFunction.propTypes = process.env.NODE_ENV !== 'production' ? {
|
|
88
101
|
...styleFunction.propTypes,
|
|
89
|
-
xs:
|
|
90
|
-
sm:
|
|
91
|
-
md:
|
|
92
|
-
lg:
|
|
93
|
-
xl:
|
|
102
|
+
xs: _propTypes.default.object,
|
|
103
|
+
sm: _propTypes.default.object,
|
|
104
|
+
md: _propTypes.default.object,
|
|
105
|
+
lg: _propTypes.default.object,
|
|
106
|
+
xl: _propTypes.default.object
|
|
94
107
|
} : {};
|
|
95
108
|
newStyleFunction.filterProps = ['xs', 'sm', 'md', 'lg', 'xl', ...styleFunction.filterProps];
|
|
96
109
|
return newStyleFunction;
|
|
97
110
|
}
|
|
98
|
-
|
|
111
|
+
function createEmptyBreakpointObject(breakpointsInput = {}) {
|
|
99
112
|
const breakpointsInOrder = breakpointsInput.keys?.reduce((acc, key) => {
|
|
100
113
|
const breakpointStyleKey = breakpointsInput.up(key);
|
|
101
114
|
acc[breakpointStyleKey] = {};
|
|
@@ -103,7 +116,7 @@ export function createEmptyBreakpointObject(breakpointsInput = {}) {
|
|
|
103
116
|
}, {});
|
|
104
117
|
return breakpointsInOrder || {};
|
|
105
118
|
}
|
|
106
|
-
|
|
119
|
+
function removeUnusedBreakpoints(breakpointKeys, style) {
|
|
107
120
|
return breakpointKeys.reduce((acc, key) => {
|
|
108
121
|
const breakpointOutput = acc[key];
|
|
109
122
|
const isBreakpointUnused = !breakpointOutput || Object.keys(breakpointOutput).length === 0;
|
|
@@ -113,16 +126,16 @@ export function removeUnusedBreakpoints(breakpointKeys, style) {
|
|
|
113
126
|
return acc;
|
|
114
127
|
}, style);
|
|
115
128
|
}
|
|
116
|
-
|
|
129
|
+
function mergeBreakpointsInOrder(breakpointsInput, ...styles) {
|
|
117
130
|
const emptyBreakpoints = createEmptyBreakpointObject(breakpointsInput);
|
|
118
|
-
const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) =>
|
|
131
|
+
const mergedOutput = [emptyBreakpoints, ...styles].reduce((prev, next) => (0, _deepmerge.default)(prev, next), {});
|
|
119
132
|
return removeUnusedBreakpoints(Object.keys(emptyBreakpoints), mergedOutput);
|
|
120
133
|
}
|
|
121
134
|
|
|
122
135
|
// compute base for responsive values; e.g.,
|
|
123
136
|
// [1,2,3] => {xs: true, sm: true, md: true}
|
|
124
137
|
// {xs: 1, sm: 2, md: 3} => {xs: true, sm: true, md: true}
|
|
125
|
-
|
|
138
|
+
function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
|
|
126
139
|
// fixed value
|
|
127
140
|
if (typeof breakpointValues !== 'object') {
|
|
128
141
|
return {};
|
|
@@ -144,7 +157,7 @@ export function computeBreakpointsBase(breakpointValues, themeBreakpoints) {
|
|
|
144
157
|
}
|
|
145
158
|
return base;
|
|
146
159
|
}
|
|
147
|
-
|
|
160
|
+
function resolveBreakpointValues({
|
|
148
161
|
values: breakpointValues,
|
|
149
162
|
breakpoints: themeBreakpoints,
|
|
150
163
|
base: customBase
|
|
@@ -168,4 +181,4 @@ export function resolveBreakpointValues({
|
|
|
168
181
|
return acc;
|
|
169
182
|
}, {});
|
|
170
183
|
}
|
|
171
|
-
|
|
184
|
+
var _default = exports.default = breakpoints;
|
package/breakpoints/index.js
CHANGED
|
@@ -1,2 +1,25 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
var _exportNames = {};
|
|
8
|
+
Object.defineProperty(exports, "default", {
|
|
9
|
+
enumerable: true,
|
|
10
|
+
get: function () {
|
|
11
|
+
return _breakpoints.default;
|
|
12
|
+
}
|
|
13
|
+
});
|
|
14
|
+
var _breakpoints = _interopRequireWildcard(require("./breakpoints"));
|
|
15
|
+
Object.keys(_breakpoints).forEach(function (key) {
|
|
16
|
+
if (key === "default" || key === "__esModule") return;
|
|
17
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
18
|
+
if (key in exports && exports[key] === _breakpoints[key]) return;
|
|
19
|
+
Object.defineProperty(exports, key, {
|
|
20
|
+
enumerable: true,
|
|
21
|
+
get: function () {
|
|
22
|
+
return _breakpoints[key];
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
});
|