@mui/system 5.9.2 → 5.10.1
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.spec.d.ts +1 -1
- package/CHANGELOG.md +196 -5
- package/Container/Container.d.ts +13 -13
- package/Container/ContainerProps.d.ts +40 -40
- package/Container/containerClasses.d.ts +22 -22
- package/Container/createContainer.d.ts +18 -18
- package/Container/index.d.ts +1 -1
- package/README.md +1 -1
- package/Stack/Stack.d.ts +12 -0
- package/Stack/Stack.js +62 -0
- package/Stack/StackProps.d.ts +42 -0
- package/Stack/StackProps.js +5 -0
- package/Stack/createStack.d.ts +21 -0
- package/Stack/createStack.js +209 -0
- package/Stack/index.d.ts +5 -0
- package/Stack/index.js +65 -0
- package/Stack/package.json +6 -0
- package/Stack/stackClasses.d.ts +8 -0
- package/Stack/stackClasses.js +17 -0
- package/Unstable_Grid/Grid.d.ts +12 -12
- package/Unstable_Grid/GridProps.d.ts +162 -162
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +26 -26
- package/Unstable_Grid/index.d.ts +5 -5
- package/breakpoints.d.ts +21 -0
- package/createBox.js +3 -1
- package/createBox.spec.d.ts +1 -1
- package/createStyled.js +30 -11
- package/createTheme/createSpacing.d.ts +10 -10
- package/cssVars/createCssVarsProvider.js +1 -1
- package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +65 -65
- package/cssVars/getInitColorSchemeScript.d.ts +45 -45
- package/cssVars/index.d.ts +3 -3
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/esm/Stack/Stack.js +51 -0
- package/esm/Stack/StackProps.js +1 -0
- package/esm/Stack/createStack.js +179 -0
- package/esm/Stack/index.js +5 -0
- package/esm/Stack/stackClasses.js +6 -0
- package/esm/createBox.js +3 -1
- package/esm/createStyled.js +28 -10
- package/esm/cssVars/createCssVarsProvider.js +1 -1
- package/esm/index.js +3 -1
- package/index.d.ts +4 -6
- package/index.js +25 -2
- package/index.spec.d.ts +1 -1
- package/legacy/Stack/Stack.js +51 -0
- package/legacy/Stack/StackProps.js +1 -0
- package/legacy/Stack/createStack.js +187 -0
- package/legacy/Stack/index.js +5 -0
- package/legacy/Stack/stackClasses.js +6 -0
- package/legacy/createBox.js +5 -1
- package/legacy/createStyled.js +31 -10
- package/legacy/cssVars/createCssVarsProvider.js +1 -1
- package/legacy/index.js +4 -2
- package/modern/Stack/Stack.js +51 -0
- package/modern/Stack/StackProps.js +1 -0
- package/modern/Stack/createStack.js +179 -0
- package/modern/Stack/index.js +5 -0
- package/modern/Stack/stackClasses.js +6 -0
- package/modern/createBox.js +3 -1
- package/modern/createStyled.js +28 -10
- package/modern/cssVars/createCssVarsProvider.js +1 -1
- package/modern/index.js +4 -2
- package/package.json +5 -5
- package/spacing.d.ts +6 -0
- 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,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'
|
|
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
|
|
package/esm/createStyled.js
CHANGED
|
@@ -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
|
-
|
|
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(
|
|
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.
|
|
1
|
+
/** @license MUI v5.10.1
|
|
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 {};
|