@mui/system 5.10.13 → 5.10.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Box/Box.js +1 -10
- package/Box/Box.spec.d.ts +1 -1
- package/Box/index.js +0 -2
- package/CHANGELOG.md +70 -2
- package/Container/Container.d.ts +13 -13
- package/Container/Container.js +2 -17
- package/Container/ContainerProps.d.ts +40 -40
- package/Container/containerClasses.d.ts +22 -22
- package/Container/containerClasses.js +0 -3
- package/Container/createContainer.d.ts +18 -18
- package/Container/createContainer.js +15 -37
- package/Container/index.js +0 -6
- package/Stack/Stack.d.ts +13 -13
- package/Stack/Stack.js +1 -12
- package/Stack/StackProps.d.ts +42 -42
- package/Stack/createStack.d.ts +21 -21
- package/Stack/createStack.js +10 -48
- package/Stack/index.d.ts +5 -5
- package/Stack/index.js +0 -9
- package/Stack/stackClasses.d.ts +8 -8
- package/Stack/stackClasses.js +0 -3
- package/ThemeProvider/ThemeProvider.js +2 -22
- package/ThemeProvider/index.js +0 -2
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/Grid.js +6 -42
- package/Unstable_Grid/GridProps.d.ts +162 -162
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/createGrid.js +19 -49
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridClasses.js +8 -7
- package/Unstable_Grid/gridGenerator.d.ts +29 -28
- package/Unstable_Grid/gridGenerator.js +22 -63
- package/Unstable_Grid/index.d.ts +5 -5
- package/Unstable_Grid/index.js +0 -9
- package/borders.js +0 -14
- package/breakpoints.js +3 -32
- package/colorManipulator.js +13 -55
- package/compose.js +0 -7
- package/createBox.js +5 -20
- package/createBox.spec.d.ts +1 -1
- package/createStyled.js +27 -71
- package/createTheme/createBreakpoints.js +22 -37
- package/createTheme/createSpacing.d.ts +10 -10
- package/createTheme/createSpacing.js +4 -8
- package/createTheme/createTheme.js +6 -16
- package/createTheme/index.js +0 -2
- package/cssGrid.js +0 -21
- package/cssVars/createCssVarsProvider.js +24 -72
- package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/createGetCssVar.js +2 -7
- package/cssVars/cssVarsParser.d.ts +65 -65
- package/cssVars/cssVarsParser.js +3 -15
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/getInitColorSchemeScript.js +0 -6
- package/cssVars/index.d.ts +3 -3
- package/cssVars/index.js +0 -3
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/cssVars/useCurrentColorScheme.js +20 -49
- package/display.js +0 -6
- package/esm/Box/Box.js +1 -6
- package/esm/Container/Container.js +3 -14
- package/esm/Container/createContainer.js +15 -25
- package/esm/Stack/Stack.js +1 -9
- package/esm/Stack/createStack.js +10 -29
- package/esm/ThemeProvider/ThemeProvider.js +2 -11
- package/esm/Unstable_Grid/Grid.js +6 -39
- package/esm/Unstable_Grid/createGrid.js +18 -35
- package/esm/Unstable_Grid/gridClasses.js +8 -4
- package/esm/Unstable_Grid/gridGenerator.js +20 -38
- package/esm/borders.js +0 -6
- package/esm/breakpoints.js +7 -22
- package/esm/colorManipulator.js +13 -43
- package/esm/compose.js +0 -5
- package/esm/createBox.js +5 -7
- package/esm/createStyled.js +27 -64
- package/esm/createTheme/createBreakpoints.js +22 -34
- package/esm/createTheme/createSpacing.js +4 -7
- package/esm/createTheme/createTheme.js +6 -9
- package/esm/cssGrid.js +0 -9
- package/esm/cssVars/createCssVarsProvider.js +24 -58
- package/esm/cssVars/createGetCssVar.js +2 -6
- package/esm/cssVars/cssVarsParser.js +3 -11
- package/esm/cssVars/useCurrentColorScheme.js +20 -44
- package/esm/getThemeValue.js +0 -2
- package/esm/index.js +1 -2
- package/esm/memoize.js +0 -1
- package/esm/merge.js +0 -3
- package/esm/palette.js +0 -3
- package/esm/propsToClassKey.js +4 -7
- package/esm/sizing.js +0 -5
- package/esm/spacing.js +3 -23
- package/esm/style.js +2 -19
- package/esm/styleFunctionSx/extendSxProp.js +3 -10
- package/esm/styleFunctionSx/styleFunctionSx.js +3 -16
- package/esm/sx/sx.js +0 -2
- package/esm/useTheme.js +0 -2
- package/esm/useThemeProps/getThemeProps.js +0 -2
- package/esm/useThemeWithoutDefault.js +0 -3
- package/flexbox.js +0 -4
- package/getThemeValue.js +0 -14
- package/index.js +1 -55
- package/index.spec.d.ts +1 -1
- package/legacy/Box/Box.js +1 -6
- package/legacy/Container/Container.js +3 -14
- package/legacy/Container/createContainer.js +29 -39
- package/legacy/Stack/Stack.js +1 -9
- package/legacy/Stack/createStack.js +17 -37
- package/legacy/ThemeProvider/ThemeProvider.js +3 -12
- package/legacy/Unstable_Grid/Grid.js +6 -39
- package/legacy/Unstable_Grid/createGrid.js +34 -53
- package/legacy/Unstable_Grid/gridGenerator.js +36 -58
- package/legacy/borders.js +0 -6
- package/legacy/breakpoints.js +9 -28
- package/legacy/colorManipulator.js +16 -48
- package/legacy/compose.js +0 -6
- package/legacy/createBox.js +9 -11
- package/legacy/createStyled.js +27 -68
- package/legacy/createTheme/createBreakpoints.js +20 -33
- package/legacy/createTheme/createSpacing.js +4 -9
- package/legacy/createTheme/createTheme.js +7 -13
- package/legacy/cssGrid.js +0 -9
- package/legacy/cssVars/createCssVarsProvider.js +90 -129
- package/legacy/cssVars/createGetCssVar.js +2 -10
- package/legacy/cssVars/cssVarsParser.js +7 -20
- package/legacy/cssVars/getInitColorSchemeScript.js +14 -15
- package/legacy/cssVars/useCurrentColorScheme.js +43 -69
- package/legacy/getThemeValue.js +0 -3
- package/legacy/index.js +2 -3
- package/legacy/memoize.js +0 -1
- package/legacy/merge.js +0 -3
- package/legacy/palette.js +0 -3
- package/legacy/propsToClassKey.js +2 -5
- package/legacy/sizing.js +0 -5
- package/legacy/spacing.js +6 -27
- package/legacy/style.js +6 -24
- package/legacy/styleFunctionSx/extendSxProp.js +3 -11
- package/legacy/styleFunctionSx/styleFunctionSx.js +6 -21
- package/legacy/sx/sx.js +0 -2
- package/legacy/useTheme.js +0 -2
- package/legacy/useThemeProps/getThemeProps.js +2 -4
- package/legacy/useThemeProps/useThemeProps.js +2 -2
- package/legacy/useThemeWithoutDefault.js +0 -3
- package/memoize.js +0 -2
- package/merge.js +0 -5
- package/modern/Box/Box.js +1 -6
- package/modern/Container/Container.js +3 -14
- package/modern/Container/createContainer.js +15 -25
- package/modern/Stack/Stack.js +1 -9
- package/modern/Stack/createStack.js +10 -29
- package/modern/ThemeProvider/ThemeProvider.js +2 -11
- package/modern/Unstable_Grid/Grid.js +6 -39
- package/modern/Unstable_Grid/createGrid.js +18 -34
- package/modern/Unstable_Grid/gridClasses.js +8 -4
- package/modern/Unstable_Grid/gridGenerator.js +20 -36
- package/modern/borders.js +0 -6
- package/modern/breakpoints.js +7 -21
- package/modern/colorManipulator.js +13 -43
- package/modern/compose.js +0 -5
- package/modern/createBox.js +5 -7
- package/modern/createStyled.js +27 -63
- package/modern/createTheme/createBreakpoints.js +22 -34
- package/modern/createTheme/createSpacing.js +4 -7
- package/modern/createTheme/createTheme.js +6 -9
- package/modern/cssGrid.js +0 -9
- package/modern/cssVars/createCssVarsProvider.js +24 -58
- package/modern/cssVars/createGetCssVar.js +2 -6
- package/modern/cssVars/cssVarsParser.js +3 -11
- package/modern/cssVars/useCurrentColorScheme.js +20 -44
- package/modern/getThemeValue.js +0 -2
- package/modern/index.js +2 -3
- package/modern/memoize.js +0 -1
- package/modern/merge.js +0 -3
- package/modern/palette.js +0 -3
- package/modern/propsToClassKey.js +4 -7
- package/modern/sizing.js +0 -4
- package/modern/spacing.js +3 -22
- package/modern/style.js +2 -19
- package/modern/styleFunctionSx/extendSxProp.js +3 -10
- package/modern/styleFunctionSx/styleFunctionSx.js +3 -16
- package/modern/sx/sx.js +0 -2
- package/modern/useTheme.js +0 -2
- package/modern/useThemeProps/getThemeProps.js +0 -2
- package/modern/useThemeWithoutDefault.js +0 -3
- package/package.json +6 -6
- package/palette.js +0 -6
- package/positions.js +0 -6
- package/propsToClassKey.js +4 -10
- package/responsivePropType.js +0 -3
- package/shadows.js +0 -3
- package/sizing.js +0 -11
- package/spacing.js +3 -37
- package/style.js +2 -24
- package/styleFunctionSx/extendSxProp.js +3 -15
- package/styleFunctionSx/index.js +0 -5
- package/styleFunctionSx/styleFunctionSx.js +3 -21
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
- package/styled.js +0 -3
- package/sx/index.js +0 -2
- package/sx/sx.js +0 -4
- package/typography.js +0 -4
- package/useTheme.js +0 -6
- package/useThemeProps/getThemeProps.js +0 -4
- package/useThemeProps/index.js +0 -3
- package/useThemeProps/useThemeProps.js +0 -4
- package/useThemeWithoutDefault.js +0 -4
package/modern/sx/sx.js
CHANGED
package/modern/useTheme.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
import createTheme from './createTheme';
|
|
2
2
|
import useThemeWithoutDefault from './useThemeWithoutDefault';
|
|
3
3
|
export const systemDefaultTheme = createTheme();
|
|
4
|
-
|
|
5
4
|
function useTheme(defaultTheme = systemDefaultTheme) {
|
|
6
5
|
return useThemeWithoutDefault(defaultTheme);
|
|
7
6
|
}
|
|
8
|
-
|
|
9
7
|
export default useTheme;
|
|
@@ -5,10 +5,8 @@ export default function getThemeProps(params) {
|
|
|
5
5
|
name,
|
|
6
6
|
props
|
|
7
7
|
} = params;
|
|
8
|
-
|
|
9
8
|
if (!theme || !theme.components || !theme.components[name] || !theme.components[name].defaultProps) {
|
|
10
9
|
return props;
|
|
11
10
|
}
|
|
12
|
-
|
|
13
11
|
return resolveProps(theme.components[name].defaultProps, props);
|
|
14
12
|
}
|
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
import { useTheme as muiUseTheme } from '@mui/private-theming';
|
|
2
|
-
|
|
3
2
|
function isObjectEmpty(obj) {
|
|
4
3
|
return Object.keys(obj).length === 0;
|
|
5
4
|
}
|
|
6
|
-
|
|
7
5
|
function useTheme(defaultTheme = null) {
|
|
8
6
|
const contextTheme = muiUseTheme();
|
|
9
7
|
return !contextTheme || isObjectEmpty(contextTheme) ? defaultTheme : contextTheme;
|
|
10
8
|
}
|
|
11
|
-
|
|
12
9
|
export default useTheme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mui/system",
|
|
3
|
-
"version": "5.10.
|
|
3
|
+
"version": "5.10.14",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "MUI Team",
|
|
6
6
|
"description": "CSS utilities for rapidly laying out custom designs.",
|
|
@@ -43,11 +43,11 @@
|
|
|
43
43
|
}
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@babel/runtime": "^7.
|
|
47
|
-
"@mui/private-theming": "^5.10.
|
|
48
|
-
"@mui/styled-engine": "^5.10.
|
|
49
|
-
"@mui/types": "^7.2.
|
|
50
|
-
"@mui/utils": "^5.10.
|
|
46
|
+
"@babel/runtime": "^7.20.1",
|
|
47
|
+
"@mui/private-theming": "^5.10.14",
|
|
48
|
+
"@mui/styled-engine": "^5.10.14",
|
|
49
|
+
"@mui/types": "^7.2.1",
|
|
50
|
+
"@mui/utils": "^5.10.14",
|
|
51
51
|
"clsx": "^1.2.1",
|
|
52
52
|
"csstype": "^3.1.1",
|
|
53
53
|
"prop-types": "^15.8.1"
|
package/palette.js
CHANGED
|
@@ -1,24 +1,18 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = exports.color = exports.bgcolor = exports.backgroundColor = void 0;
|
|
9
|
-
|
|
10
8
|
var _style = _interopRequireDefault(require("./style"));
|
|
11
|
-
|
|
12
9
|
var _compose = _interopRequireDefault(require("./compose"));
|
|
13
|
-
|
|
14
10
|
function transform(value, userValue) {
|
|
15
11
|
if (userValue === 'grey') {
|
|
16
12
|
return userValue;
|
|
17
13
|
}
|
|
18
|
-
|
|
19
14
|
return value;
|
|
20
15
|
}
|
|
21
|
-
|
|
22
16
|
const color = (0, _style.default)({
|
|
23
17
|
prop: 'color',
|
|
24
18
|
themeKey: 'palette',
|
package/positions.js
CHANGED
|
@@ -1,16 +1,12 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.zIndex = exports.top = exports.right = exports.position = exports.left = exports.default = exports.bottom = void 0;
|
|
9
|
-
|
|
10
8
|
var _style = _interopRequireDefault(require("./style"));
|
|
11
|
-
|
|
12
9
|
var _compose = _interopRequireDefault(require("./compose"));
|
|
13
|
-
|
|
14
10
|
const position = (0, _style.default)({
|
|
15
11
|
prop: 'position'
|
|
16
12
|
});
|
|
@@ -36,7 +32,5 @@ const left = (0, _style.default)({
|
|
|
36
32
|
prop: 'left'
|
|
37
33
|
});
|
|
38
34
|
exports.left = left;
|
|
39
|
-
|
|
40
35
|
var _default = (0, _compose.default)(position, zIndex, top, right, bottom, left);
|
|
41
|
-
|
|
42
36
|
exports.default = _default;
|
package/propsToClassKey.js
CHANGED
|
@@ -1,33 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = propsToClassKey;
|
|
9
|
-
|
|
10
8
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
11
|
-
|
|
12
9
|
var _utils = require("@mui/utils");
|
|
13
|
-
|
|
14
10
|
const _excluded = ["variant"];
|
|
15
|
-
|
|
16
11
|
function isEmpty(string) {
|
|
17
12
|
return string.length === 0;
|
|
18
13
|
}
|
|
14
|
+
|
|
19
15
|
/**
|
|
20
16
|
* Generates string classKey based on the properties provided. It starts with the
|
|
21
17
|
* variant if defined, and then it appends all other properties in alphabetical order.
|
|
22
18
|
* @param {object} props - the properties for which the classKey should be created.
|
|
23
19
|
*/
|
|
24
|
-
|
|
25
|
-
|
|
26
20
|
function propsToClassKey(props) {
|
|
27
21
|
const {
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
22
|
+
variant
|
|
23
|
+
} = props,
|
|
24
|
+
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
31
25
|
let classKey = variant || '';
|
|
32
26
|
Object.keys(other).sort().forEach(key => {
|
|
33
27
|
if (key === 'color') {
|
package/responsivePropType.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
|
-
|
|
12
9
|
const responsivePropType = process.env.NODE_ENV !== 'production' ? _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string, _propTypes.default.object, _propTypes.default.array]) : {};
|
|
13
10
|
var _default = responsivePropType;
|
|
14
11
|
exports.default = _default;
|
package/shadows.js
CHANGED
|
@@ -1,14 +1,11 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
|
-
|
|
10
8
|
var _style = _interopRequireDefault(require("./style"));
|
|
11
|
-
|
|
12
9
|
const boxShadow = (0, _style.default)({
|
|
13
10
|
prop: 'boxShadow',
|
|
14
11
|
themeKey: 'shadows'
|
package/sizing.js
CHANGED
|
@@ -1,45 +1,34 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.width = exports.sizeWidth = exports.sizeHeight = exports.minWidth = exports.minHeight = exports.maxWidth = exports.maxHeight = exports.height = exports.default = exports.boxSizing = void 0;
|
|
9
|
-
|
|
10
8
|
var _style = _interopRequireDefault(require("./style"));
|
|
11
|
-
|
|
12
9
|
var _compose = _interopRequireDefault(require("./compose"));
|
|
13
|
-
|
|
14
10
|
var _breakpoints = require("./breakpoints");
|
|
15
|
-
|
|
16
11
|
function transform(value) {
|
|
17
12
|
return value <= 1 && value !== 0 ? `${value * 100}%` : value;
|
|
18
13
|
}
|
|
19
|
-
|
|
20
14
|
const width = (0, _style.default)({
|
|
21
15
|
prop: 'width',
|
|
22
16
|
transform
|
|
23
17
|
});
|
|
24
18
|
exports.width = width;
|
|
25
|
-
|
|
26
19
|
const maxWidth = props => {
|
|
27
20
|
if (props.maxWidth !== undefined && props.maxWidth !== null) {
|
|
28
21
|
const styleFromPropValue = propValue => {
|
|
29
22
|
var _props$theme, _props$theme$breakpoi, _props$theme$breakpoi2;
|
|
30
|
-
|
|
31
23
|
const breakpoint = ((_props$theme = props.theme) == null ? void 0 : (_props$theme$breakpoi = _props$theme.breakpoints) == null ? void 0 : (_props$theme$breakpoi2 = _props$theme$breakpoi.values) == null ? void 0 : _props$theme$breakpoi2[propValue]) || _breakpoints.values[propValue];
|
|
32
24
|
return {
|
|
33
25
|
maxWidth: breakpoint || transform(propValue)
|
|
34
26
|
};
|
|
35
27
|
};
|
|
36
|
-
|
|
37
28
|
return (0, _breakpoints.handleBreakpoints)(props, props.maxWidth, styleFromPropValue);
|
|
38
29
|
}
|
|
39
|
-
|
|
40
30
|
return null;
|
|
41
31
|
};
|
|
42
|
-
|
|
43
32
|
exports.maxWidth = maxWidth;
|
|
44
33
|
maxWidth.filterProps = ['maxWidth'];
|
|
45
34
|
const minWidth = (0, _style.default)({
|
package/spacing.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -12,17 +11,11 @@ exports.getStyleFromPropValue = getStyleFromPropValue;
|
|
|
12
11
|
exports.getValue = getValue;
|
|
13
12
|
exports.margin = margin;
|
|
14
13
|
exports.padding = padding;
|
|
15
|
-
|
|
16
14
|
var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
|
|
17
|
-
|
|
18
15
|
var _breakpoints = require("./breakpoints");
|
|
19
|
-
|
|
20
16
|
var _style = require("./style");
|
|
21
|
-
|
|
22
17
|
var _merge = _interopRequireDefault(require("./merge"));
|
|
23
|
-
|
|
24
18
|
var _memoize = _interopRequireDefault(require("./memoize"));
|
|
25
|
-
|
|
26
19
|
const properties = {
|
|
27
20
|
m: 'margin',
|
|
28
21
|
p: 'padding'
|
|
@@ -40,10 +33,11 @@ const aliases = {
|
|
|
40
33
|
marginY: 'my',
|
|
41
34
|
paddingX: 'px',
|
|
42
35
|
paddingY: 'py'
|
|
43
|
-
};
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
// memoize() impact:
|
|
44
39
|
// From 300,000 ops/sec
|
|
45
40
|
// To 350,000 ops/sec
|
|
46
|
-
|
|
47
41
|
const getCssProperties = (0, _memoize.default)(prop => {
|
|
48
42
|
// It's not a shorthand notation.
|
|
49
43
|
if (prop.length > 2) {
|
|
@@ -53,7 +47,6 @@ const getCssProperties = (0, _memoize.default)(prop => {
|
|
|
53
47
|
return [prop];
|
|
54
48
|
}
|
|
55
49
|
}
|
|
56
|
-
|
|
57
50
|
const [a, b] = prop.split('');
|
|
58
51
|
const property = properties[a];
|
|
59
52
|
const direction = directions[b] || '';
|
|
@@ -62,34 +55,27 @@ const getCssProperties = (0, _memoize.default)(prop => {
|
|
|
62
55
|
const marginKeys = ['m', 'mt', 'mr', 'mb', 'ml', 'mx', 'my', 'margin', 'marginTop', 'marginRight', 'marginBottom', 'marginLeft', 'marginX', 'marginY', 'marginInline', 'marginInlineStart', 'marginInlineEnd', 'marginBlock', 'marginBlockStart', 'marginBlockEnd'];
|
|
63
56
|
const paddingKeys = ['p', 'pt', 'pr', 'pb', 'pl', 'px', 'py', 'padding', 'paddingTop', 'paddingRight', 'paddingBottom', 'paddingLeft', 'paddingX', 'paddingY', 'paddingInline', 'paddingInlineStart', 'paddingInlineEnd', 'paddingBlock', 'paddingBlockStart', 'paddingBlockEnd'];
|
|
64
57
|
const spacingKeys = [...marginKeys, ...paddingKeys];
|
|
65
|
-
|
|
66
58
|
function createUnaryUnit(theme, themeKey, defaultValue, propName) {
|
|
67
59
|
var _getPath;
|
|
68
|
-
|
|
69
60
|
const themeSpacing = (_getPath = (0, _style.getPath)(theme, themeKey, false)) != null ? _getPath : defaultValue;
|
|
70
|
-
|
|
71
61
|
if (typeof themeSpacing === 'number') {
|
|
72
62
|
return abs => {
|
|
73
63
|
if (typeof abs === 'string') {
|
|
74
64
|
return abs;
|
|
75
65
|
}
|
|
76
|
-
|
|
77
66
|
if (process.env.NODE_ENV !== 'production') {
|
|
78
67
|
if (typeof abs !== 'number') {
|
|
79
68
|
console.error(`MUI: Expected ${propName} argument to be a number or a string, got ${abs}.`);
|
|
80
69
|
}
|
|
81
70
|
}
|
|
82
|
-
|
|
83
71
|
return themeSpacing * abs;
|
|
84
72
|
};
|
|
85
73
|
}
|
|
86
|
-
|
|
87
74
|
if (Array.isArray(themeSpacing)) {
|
|
88
75
|
return abs => {
|
|
89
76
|
if (typeof abs === 'string') {
|
|
90
77
|
return abs;
|
|
91
78
|
}
|
|
92
|
-
|
|
93
79
|
if (process.env.NODE_ENV !== 'production') {
|
|
94
80
|
if (!Number.isInteger(abs)) {
|
|
95
81
|
console.error([`MUI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`].join('\n'));
|
|
@@ -97,94 +83,74 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
|
|
|
97
83
|
console.error([`MUI: The value provided (${abs}) overflows.`, `The supported values are: ${JSON.stringify(themeSpacing)}.`, `${abs} > ${themeSpacing.length - 1}, you need to add the missing values.`].join('\n'));
|
|
98
84
|
}
|
|
99
85
|
}
|
|
100
|
-
|
|
101
86
|
return themeSpacing[abs];
|
|
102
87
|
};
|
|
103
88
|
}
|
|
104
|
-
|
|
105
89
|
if (typeof themeSpacing === 'function') {
|
|
106
90
|
return themeSpacing;
|
|
107
91
|
}
|
|
108
|
-
|
|
109
92
|
if (process.env.NODE_ENV !== 'production') {
|
|
110
93
|
console.error([`MUI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.'].join('\n'));
|
|
111
94
|
}
|
|
112
|
-
|
|
113
95
|
return () => undefined;
|
|
114
96
|
}
|
|
115
|
-
|
|
116
97
|
function createUnarySpacing(theme) {
|
|
117
98
|
return createUnaryUnit(theme, 'spacing', 8, 'spacing');
|
|
118
99
|
}
|
|
119
|
-
|
|
120
100
|
function getValue(transformer, propValue) {
|
|
121
101
|
if (typeof propValue === 'string' || propValue == null) {
|
|
122
102
|
return propValue;
|
|
123
103
|
}
|
|
124
|
-
|
|
125
104
|
const abs = Math.abs(propValue);
|
|
126
105
|
const transformed = transformer(abs);
|
|
127
|
-
|
|
128
106
|
if (propValue >= 0) {
|
|
129
107
|
return transformed;
|
|
130
108
|
}
|
|
131
|
-
|
|
132
109
|
if (typeof transformed === 'number') {
|
|
133
110
|
return -transformed;
|
|
134
111
|
}
|
|
135
|
-
|
|
136
112
|
return `-${transformed}`;
|
|
137
113
|
}
|
|
138
|
-
|
|
139
114
|
function getStyleFromPropValue(cssProperties, transformer) {
|
|
140
115
|
return propValue => cssProperties.reduce((acc, cssProperty) => {
|
|
141
116
|
acc[cssProperty] = getValue(transformer, propValue);
|
|
142
117
|
return acc;
|
|
143
118
|
}, {});
|
|
144
119
|
}
|
|
145
|
-
|
|
146
120
|
function resolveCssProperty(props, keys, prop, transformer) {
|
|
147
121
|
// Using a hash computation over an array iteration could be faster, but with only 28 items,
|
|
148
122
|
// it's doesn't worth the bundle size.
|
|
149
123
|
if (keys.indexOf(prop) === -1) {
|
|
150
124
|
return null;
|
|
151
125
|
}
|
|
152
|
-
|
|
153
126
|
const cssProperties = getCssProperties(prop);
|
|
154
127
|
const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer);
|
|
155
128
|
const propValue = props[prop];
|
|
156
129
|
return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
|
|
157
130
|
}
|
|
158
|
-
|
|
159
131
|
function style(props, keys) {
|
|
160
132
|
const transformer = createUnarySpacing(props.theme);
|
|
161
133
|
return Object.keys(props).map(prop => resolveCssProperty(props, keys, prop, transformer)).reduce(_merge.default, {});
|
|
162
134
|
}
|
|
163
|
-
|
|
164
135
|
function margin(props) {
|
|
165
136
|
return style(props, marginKeys);
|
|
166
137
|
}
|
|
167
|
-
|
|
168
138
|
margin.propTypes = process.env.NODE_ENV !== 'production' ? marginKeys.reduce((obj, key) => {
|
|
169
139
|
obj[key] = _responsivePropType.default;
|
|
170
140
|
return obj;
|
|
171
141
|
}, {}) : {};
|
|
172
142
|
margin.filterProps = marginKeys;
|
|
173
|
-
|
|
174
143
|
function padding(props) {
|
|
175
144
|
return style(props, paddingKeys);
|
|
176
145
|
}
|
|
177
|
-
|
|
178
146
|
padding.propTypes = process.env.NODE_ENV !== 'production' ? paddingKeys.reduce((obj, key) => {
|
|
179
147
|
obj[key] = _responsivePropType.default;
|
|
180
148
|
return obj;
|
|
181
149
|
}, {}) : {};
|
|
182
150
|
padding.filterProps = paddingKeys;
|
|
183
|
-
|
|
184
151
|
function spacing(props) {
|
|
185
152
|
return style(props, spacingKeys);
|
|
186
153
|
}
|
|
187
|
-
|
|
188
154
|
spacing.propTypes = process.env.NODE_ENV !== 'production' ? spacingKeys.reduce((obj, key) => {
|
|
189
155
|
obj[key] = _responsivePropType.default;
|
|
190
156
|
return obj;
|
package/style.js
CHANGED
|
@@ -1,45 +1,35 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = void 0;
|
|
9
8
|
exports.getPath = getPath;
|
|
10
|
-
|
|
11
9
|
var _utils = require("@mui/utils");
|
|
12
|
-
|
|
13
10
|
var _responsivePropType = _interopRequireDefault(require("./responsivePropType"));
|
|
14
|
-
|
|
15
11
|
var _breakpoints = require("./breakpoints");
|
|
16
|
-
|
|
17
12
|
function getPath(obj, path, checkVars = true) {
|
|
18
13
|
if (!path || typeof path !== 'string') {
|
|
19
14
|
return null;
|
|
20
|
-
}
|
|
21
|
-
|
|
15
|
+
}
|
|
22
16
|
|
|
17
|
+
// Check if CSS variables are used
|
|
23
18
|
if (obj && obj.vars && checkVars) {
|
|
24
19
|
const val = `vars.${path}`.split('.').reduce((acc, item) => acc && acc[item] ? acc[item] : null, obj);
|
|
25
|
-
|
|
26
20
|
if (val != null) {
|
|
27
21
|
return val;
|
|
28
22
|
}
|
|
29
23
|
}
|
|
30
|
-
|
|
31
24
|
return path.split('.').reduce((acc, item) => {
|
|
32
25
|
if (acc && acc[item] != null) {
|
|
33
26
|
return acc[item];
|
|
34
27
|
}
|
|
35
|
-
|
|
36
28
|
return null;
|
|
37
29
|
}, obj);
|
|
38
30
|
}
|
|
39
|
-
|
|
40
31
|
function getValue(themeMapping, transform, propValueFinal, userValue = propValueFinal) {
|
|
41
32
|
let value;
|
|
42
|
-
|
|
43
33
|
if (typeof themeMapping === 'function') {
|
|
44
34
|
value = themeMapping(propValueFinal);
|
|
45
35
|
} else if (Array.isArray(themeMapping)) {
|
|
@@ -47,14 +37,11 @@ function getValue(themeMapping, transform, propValueFinal, userValue = propValue
|
|
|
47
37
|
} else {
|
|
48
38
|
value = getPath(themeMapping, propValueFinal) || userValue;
|
|
49
39
|
}
|
|
50
|
-
|
|
51
40
|
if (transform) {
|
|
52
41
|
value = transform(value, userValue);
|
|
53
42
|
}
|
|
54
|
-
|
|
55
43
|
return value;
|
|
56
44
|
}
|
|
57
|
-
|
|
58
45
|
function style(options) {
|
|
59
46
|
const {
|
|
60
47
|
prop,
|
|
@@ -62,42 +49,33 @@ function style(options) {
|
|
|
62
49
|
themeKey,
|
|
63
50
|
transform
|
|
64
51
|
} = options;
|
|
65
|
-
|
|
66
52
|
const fn = props => {
|
|
67
53
|
if (props[prop] == null) {
|
|
68
54
|
return null;
|
|
69
55
|
}
|
|
70
|
-
|
|
71
56
|
const propValue = props[prop];
|
|
72
57
|
const theme = props.theme;
|
|
73
58
|
const themeMapping = getPath(theme, themeKey) || {};
|
|
74
|
-
|
|
75
59
|
const styleFromPropValue = propValueFinal => {
|
|
76
60
|
let value = getValue(themeMapping, transform, propValueFinal);
|
|
77
|
-
|
|
78
61
|
if (propValueFinal === value && typeof propValueFinal === 'string') {
|
|
79
62
|
// Haven't found value
|
|
80
63
|
value = getValue(themeMapping, transform, `${prop}${propValueFinal === 'default' ? '' : (0, _utils.unstable_capitalize)(propValueFinal)}`, propValueFinal);
|
|
81
64
|
}
|
|
82
|
-
|
|
83
65
|
if (cssProperty === false) {
|
|
84
66
|
return value;
|
|
85
67
|
}
|
|
86
|
-
|
|
87
68
|
return {
|
|
88
69
|
[cssProperty]: value
|
|
89
70
|
};
|
|
90
71
|
};
|
|
91
|
-
|
|
92
72
|
return (0, _breakpoints.handleBreakpoints)(props, propValue, styleFromPropValue);
|
|
93
73
|
};
|
|
94
|
-
|
|
95
74
|
fn.propTypes = process.env.NODE_ENV !== 'production' ? {
|
|
96
75
|
[prop]: _responsivePropType.default
|
|
97
76
|
} : {};
|
|
98
77
|
fn.filterProps = [prop];
|
|
99
78
|
return fn;
|
|
100
79
|
}
|
|
101
|
-
|
|
102
80
|
var _default = style;
|
|
103
81
|
exports.default = _default;
|
|
@@ -1,22 +1,15 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
8
7
|
exports.default = extendSxProp;
|
|
9
|
-
|
|
10
8
|
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
11
|
-
|
|
12
9
|
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
|
|
13
|
-
|
|
14
10
|
var _utils = require("@mui/utils");
|
|
15
|
-
|
|
16
11
|
var _getThemeValue = require("../getThemeValue");
|
|
17
|
-
|
|
18
12
|
const _excluded = ["sx"];
|
|
19
|
-
|
|
20
13
|
const splitProps = props => {
|
|
21
14
|
const result = {
|
|
22
15
|
systemProps: {},
|
|
@@ -31,34 +24,29 @@ const splitProps = props => {
|
|
|
31
24
|
});
|
|
32
25
|
return result;
|
|
33
26
|
};
|
|
34
|
-
|
|
35
27
|
function extendSxProp(props) {
|
|
36
28
|
const {
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
29
|
+
sx: inSx
|
|
30
|
+
} = props,
|
|
31
|
+
other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
|
|
40
32
|
const {
|
|
41
33
|
systemProps,
|
|
42
34
|
otherProps
|
|
43
35
|
} = splitProps(other);
|
|
44
36
|
let finalSx;
|
|
45
|
-
|
|
46
37
|
if (Array.isArray(inSx)) {
|
|
47
38
|
finalSx = [systemProps, ...inSx];
|
|
48
39
|
} else if (typeof inSx === 'function') {
|
|
49
40
|
finalSx = (...args) => {
|
|
50
41
|
const result = inSx(...args);
|
|
51
|
-
|
|
52
42
|
if (!(0, _utils.isPlainObject)(result)) {
|
|
53
43
|
return systemProps;
|
|
54
44
|
}
|
|
55
|
-
|
|
56
45
|
return (0, _extends2.default)({}, systemProps, result);
|
|
57
46
|
};
|
|
58
47
|
} else {
|
|
59
48
|
finalSx = (0, _extends2.default)({}, systemProps, inSx);
|
|
60
49
|
}
|
|
61
|
-
|
|
62
50
|
return (0, _extends2.default)({}, otherProps, {
|
|
63
51
|
sx: finalSx
|
|
64
52
|
});
|
package/styleFunctionSx/index.js
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
3
|
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
-
|
|
5
4
|
Object.defineProperty(exports, "__esModule", {
|
|
6
5
|
value: true
|
|
7
6
|
});
|
|
@@ -23,11 +22,7 @@ Object.defineProperty(exports, "unstable_createStyleFunctionSx", {
|
|
|
23
22
|
return _styleFunctionSx.unstable_createStyleFunctionSx;
|
|
24
23
|
}
|
|
25
24
|
});
|
|
26
|
-
|
|
27
25
|
var _styleFunctionSx = _interopRequireWildcard(require("./styleFunctionSx"));
|
|
28
|
-
|
|
29
26
|
var _extendSxProp = _interopRequireDefault(require("./extendSxProp"));
|
|
30
|
-
|
|
31
27
|
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); }
|
|
32
|
-
|
|
33
28
|
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; }
|