@mui/system 5.10.15 → 5.10.16
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 +47 -1
- 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/Stack/Stack.d.ts +13 -13
- package/Stack/StackProps.d.ts +42 -42
- package/Stack/createStack.d.ts +21 -21
- package/Stack/index.d.ts +5 -5
- package/Stack/stackClasses.d.ts +8 -8
- 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 +29 -29
- package/Unstable_Grid/index.d.ts +5 -5
- package/createBox.spec.d.ts +1 -1
- package/createTheme/createSpacing.d.ts +10 -10
- package/cssVars/createCssVarsProvider.d.ts +12 -7
- package/cssVars/createCssVarsProvider.js +7 -9
- package/cssVars/createCssVarsProvider.spec.d.ts +1 -1
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +63 -65
- package/cssVars/cssVarsParser.js +3 -7
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/index.d.ts +3 -3
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/esm/cssVars/createCssVarsProvider.js +7 -9
- package/esm/cssVars/cssVarsParser.js +3 -7
- package/index.js +1 -1
- package/index.spec.d.ts +1 -1
- package/legacy/cssVars/createCssVarsProvider.js +7 -9
- package/legacy/cssVars/cssVarsParser.js +3 -7
- package/legacy/index.js +1 -1
- package/modern/cssVars/createCssVarsProvider.js +7 -9
- package/modern/cssVars/cssVarsParser.js +3 -7
- package/modern/index.js +1 -1
- package/package.json +5 -5
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
|
@@ -1,162 +1,162 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OverrideProps, IfEquals } from '@mui/types';
|
|
3
|
-
import { SxProps } from '../styleFunctionSx';
|
|
4
|
-
import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
|
|
5
|
-
import { SystemProps } from '../Box';
|
|
6
|
-
|
|
7
|
-
[key in Breakpoint]?: T | null;
|
|
8
|
-
};
|
|
9
|
-
export
|
|
10
|
-
export
|
|
11
|
-
export
|
|
12
|
-
export
|
|
13
|
-
export interface GridDefaultBreakpoints {
|
|
14
|
-
/**
|
|
15
|
-
* If a number, it sets the number of columns the grid item uses.
|
|
16
|
-
* It can't be greater than the total number of columns of the container (12 by default).
|
|
17
|
-
* If 'auto', the grid item's width matches its content.
|
|
18
|
-
* If false, the prop is ignored.
|
|
19
|
-
* If true, the grid item's width grows to use the space available in the grid container.
|
|
20
|
-
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
|
|
21
|
-
* @default false
|
|
22
|
-
*/
|
|
23
|
-
lg?: boolean | GridSize;
|
|
24
|
-
/**
|
|
25
|
-
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
26
|
-
* If 'auto', the grid item push itself to the right-end of the container.
|
|
27
|
-
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
|
|
28
|
-
*/
|
|
29
|
-
lgOffset?: GridSize;
|
|
30
|
-
/**
|
|
31
|
-
* If a number, it sets the number of columns the grid item uses.
|
|
32
|
-
* It can't be greater than the total number of columns of the container (12 by default).
|
|
33
|
-
* If 'auto', the grid item's width matches its content.
|
|
34
|
-
* If false, the prop is ignored.
|
|
35
|
-
* If true, the grid item's width grows to use the space available in the grid container.
|
|
36
|
-
* The value is applied for the `md` breakpoint and wider screens if not overridden.
|
|
37
|
-
* @default false
|
|
38
|
-
*/
|
|
39
|
-
md?: boolean | GridSize;
|
|
40
|
-
/**
|
|
41
|
-
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
42
|
-
* If 'auto', the grid item push itself to the right-end of the container.
|
|
43
|
-
* The value is applied for the `md` breakpoint and wider screens if not overridden.
|
|
44
|
-
*/
|
|
45
|
-
mdOffset?: GridSize;
|
|
46
|
-
/**
|
|
47
|
-
* If a number, it sets the number of columns the grid item uses.
|
|
48
|
-
* It can't be greater than the total number of columns of the container (12 by default).
|
|
49
|
-
* If 'auto', the grid item's width matches its content.
|
|
50
|
-
* If false, the prop is ignored.
|
|
51
|
-
* If true, the grid item's width grows to use the space available in the grid container.
|
|
52
|
-
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
|
|
53
|
-
* @default false
|
|
54
|
-
*/
|
|
55
|
-
sm?: boolean | GridSize;
|
|
56
|
-
/**
|
|
57
|
-
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
58
|
-
* If 'auto', the grid item push itself to the right-end of the container.
|
|
59
|
-
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
|
|
60
|
-
*/
|
|
61
|
-
smOffset?: GridSize;
|
|
62
|
-
/**
|
|
63
|
-
* If a number, it sets the number of columns the grid item uses.
|
|
64
|
-
* It can't be greater than the total number of columns of the container (12 by default).
|
|
65
|
-
* If 'auto', the grid item's width matches its content.
|
|
66
|
-
* If false, the prop is ignored.
|
|
67
|
-
* If true, the grid item's width grows to use the space available in the grid container.
|
|
68
|
-
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
|
|
69
|
-
* @default false
|
|
70
|
-
*/
|
|
71
|
-
xl?: boolean | GridSize;
|
|
72
|
-
/**
|
|
73
|
-
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
74
|
-
* If 'auto', the grid item push itself to the right-end of the container.
|
|
75
|
-
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
|
|
76
|
-
*/
|
|
77
|
-
xlOffset?: GridSize;
|
|
78
|
-
/**
|
|
79
|
-
* If a number, it sets the number of columns the grid item uses.
|
|
80
|
-
* It can't be greater than the total number of columns of the container (12 by default).
|
|
81
|
-
* If 'auto', the grid item's width matches its content.
|
|
82
|
-
* If false, the prop is ignored.
|
|
83
|
-
* If true, the grid item's width grows to use the space available in the grid container.
|
|
84
|
-
* The value is applied for all the screen sizes with the lowest priority.
|
|
85
|
-
* @default false
|
|
86
|
-
*/
|
|
87
|
-
xs?: boolean | GridSize;
|
|
88
|
-
/**
|
|
89
|
-
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
90
|
-
* If 'auto', the grid item push itself to the right-end of the container.
|
|
91
|
-
* The value is applied for the `xs` breakpoint and wider screens if not overridden.
|
|
92
|
-
*/
|
|
93
|
-
xsOffset?: GridSize;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
interface BreakpointOverridesEmpty {
|
|
97
|
-
}
|
|
98
|
-
|
|
99
|
-
export interface GridBaseProps extends Breakpoints {
|
|
100
|
-
/**
|
|
101
|
-
* The content of the component.
|
|
102
|
-
*/
|
|
103
|
-
children?: React.ReactNode;
|
|
104
|
-
/**
|
|
105
|
-
* The number of columns.
|
|
106
|
-
* @default 12
|
|
107
|
-
*/
|
|
108
|
-
columns?: ResponsiveStyleValue<number>;
|
|
109
|
-
/**
|
|
110
|
-
* Defines the horizontal space between the type `item` components.
|
|
111
|
-
* It overrides the value of the `spacing` prop.
|
|
112
|
-
*/
|
|
113
|
-
columnSpacing?: ResponsiveStyleValue<GridSpacing>;
|
|
114
|
-
/**
|
|
115
|
-
* If `true`, the component will have the flex *container* behavior.
|
|
116
|
-
* You should be wrapping *items* with a *container*.
|
|
117
|
-
* @default false
|
|
118
|
-
*/
|
|
119
|
-
container?: boolean;
|
|
120
|
-
/**
|
|
121
|
-
* Defines the `flex-direction` style property.
|
|
122
|
-
* It is applied for all screen sizes.
|
|
123
|
-
* @default 'row'
|
|
124
|
-
*/
|
|
125
|
-
direction?: ResponsiveStyleValue<GridDirection>;
|
|
126
|
-
/**
|
|
127
|
-
* If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
|
|
128
|
-
*/
|
|
129
|
-
disableEqualOverflow?: boolean;
|
|
130
|
-
/**
|
|
131
|
-
* Defines the vertical space between the type `item` components.
|
|
132
|
-
* It overrides the value of the `spacing` prop.
|
|
133
|
-
*/
|
|
134
|
-
rowSpacing?: ResponsiveStyleValue<GridSpacing>;
|
|
135
|
-
/**
|
|
136
|
-
* Defines the space between the type `item` components.
|
|
137
|
-
* It can only be used on a type `container` component.
|
|
138
|
-
* @default 0
|
|
139
|
-
*/
|
|
140
|
-
spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
|
|
141
|
-
/**
|
|
142
|
-
* Defines the `flex-wrap` style property.
|
|
143
|
-
* It's applied for all screen sizes.
|
|
144
|
-
* @default 'wrap'
|
|
145
|
-
*/
|
|
146
|
-
wrap?: GridWrap;
|
|
147
|
-
}
|
|
148
|
-
export interface GridOwnerState extends GridBaseProps {
|
|
149
|
-
nested: boolean;
|
|
150
|
-
gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
|
|
151
|
-
gridOffset: Partial<Record<Breakpoint, GridSize>>;
|
|
152
|
-
}
|
|
153
|
-
export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
|
|
154
|
-
props: P & GridBaseProps & {
|
|
155
|
-
sx?: SxProps<Theme>;
|
|
156
|
-
} & SystemProps<Theme>;
|
|
157
|
-
defaultComponent: D;
|
|
158
|
-
}
|
|
159
|
-
export
|
|
160
|
-
component?: React.ElementType;
|
|
161
|
-
}> = OverrideProps<GridTypeMap<P, D>, D>;
|
|
162
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { OverrideProps, IfEquals } from '@mui/types';
|
|
3
|
+
import { SxProps } from '../styleFunctionSx';
|
|
4
|
+
import { Theme, Breakpoint, BreakpointOverrides } from '../createTheme';
|
|
5
|
+
import { SystemProps } from '../Box';
|
|
6
|
+
type ResponsiveStyleValue<T> = T | Array<T | null> | {
|
|
7
|
+
[key in Breakpoint]?: T | null;
|
|
8
|
+
};
|
|
9
|
+
export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
10
|
+
export type GridSpacing = number | string;
|
|
11
|
+
export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
12
|
+
export type GridSize = 'auto' | number;
|
|
13
|
+
export interface GridDefaultBreakpoints {
|
|
14
|
+
/**
|
|
15
|
+
* If a number, it sets the number of columns the grid item uses.
|
|
16
|
+
* It can't be greater than the total number of columns of the container (12 by default).
|
|
17
|
+
* If 'auto', the grid item's width matches its content.
|
|
18
|
+
* If false, the prop is ignored.
|
|
19
|
+
* If true, the grid item's width grows to use the space available in the grid container.
|
|
20
|
+
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
|
|
21
|
+
* @default false
|
|
22
|
+
*/
|
|
23
|
+
lg?: boolean | GridSize;
|
|
24
|
+
/**
|
|
25
|
+
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
26
|
+
* If 'auto', the grid item push itself to the right-end of the container.
|
|
27
|
+
* The value is applied for the `lg` breakpoint and wider screens if not overridden.
|
|
28
|
+
*/
|
|
29
|
+
lgOffset?: GridSize;
|
|
30
|
+
/**
|
|
31
|
+
* If a number, it sets the number of columns the grid item uses.
|
|
32
|
+
* It can't be greater than the total number of columns of the container (12 by default).
|
|
33
|
+
* If 'auto', the grid item's width matches its content.
|
|
34
|
+
* If false, the prop is ignored.
|
|
35
|
+
* If true, the grid item's width grows to use the space available in the grid container.
|
|
36
|
+
* The value is applied for the `md` breakpoint and wider screens if not overridden.
|
|
37
|
+
* @default false
|
|
38
|
+
*/
|
|
39
|
+
md?: boolean | GridSize;
|
|
40
|
+
/**
|
|
41
|
+
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
42
|
+
* If 'auto', the grid item push itself to the right-end of the container.
|
|
43
|
+
* The value is applied for the `md` breakpoint and wider screens if not overridden.
|
|
44
|
+
*/
|
|
45
|
+
mdOffset?: GridSize;
|
|
46
|
+
/**
|
|
47
|
+
* If a number, it sets the number of columns the grid item uses.
|
|
48
|
+
* It can't be greater than the total number of columns of the container (12 by default).
|
|
49
|
+
* If 'auto', the grid item's width matches its content.
|
|
50
|
+
* If false, the prop is ignored.
|
|
51
|
+
* If true, the grid item's width grows to use the space available in the grid container.
|
|
52
|
+
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
|
|
53
|
+
* @default false
|
|
54
|
+
*/
|
|
55
|
+
sm?: boolean | GridSize;
|
|
56
|
+
/**
|
|
57
|
+
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
58
|
+
* If 'auto', the grid item push itself to the right-end of the container.
|
|
59
|
+
* The value is applied for the `sm` breakpoint and wider screens if not overridden.
|
|
60
|
+
*/
|
|
61
|
+
smOffset?: GridSize;
|
|
62
|
+
/**
|
|
63
|
+
* If a number, it sets the number of columns the grid item uses.
|
|
64
|
+
* It can't be greater than the total number of columns of the container (12 by default).
|
|
65
|
+
* If 'auto', the grid item's width matches its content.
|
|
66
|
+
* If false, the prop is ignored.
|
|
67
|
+
* If true, the grid item's width grows to use the space available in the grid container.
|
|
68
|
+
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
|
|
69
|
+
* @default false
|
|
70
|
+
*/
|
|
71
|
+
xl?: boolean | GridSize;
|
|
72
|
+
/**
|
|
73
|
+
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
74
|
+
* If 'auto', the grid item push itself to the right-end of the container.
|
|
75
|
+
* The value is applied for the `xl` breakpoint and wider screens if not overridden.
|
|
76
|
+
*/
|
|
77
|
+
xlOffset?: GridSize;
|
|
78
|
+
/**
|
|
79
|
+
* If a number, it sets the number of columns the grid item uses.
|
|
80
|
+
* It can't be greater than the total number of columns of the container (12 by default).
|
|
81
|
+
* If 'auto', the grid item's width matches its content.
|
|
82
|
+
* If false, the prop is ignored.
|
|
83
|
+
* If true, the grid item's width grows to use the space available in the grid container.
|
|
84
|
+
* The value is applied for all the screen sizes with the lowest priority.
|
|
85
|
+
* @default false
|
|
86
|
+
*/
|
|
87
|
+
xs?: boolean | GridSize;
|
|
88
|
+
/**
|
|
89
|
+
* If a number, it sets the margin-left equals to the number of columns the grid item uses.
|
|
90
|
+
* If 'auto', the grid item push itself to the right-end of the container.
|
|
91
|
+
* The value is applied for the `xs` breakpoint and wider screens if not overridden.
|
|
92
|
+
*/
|
|
93
|
+
xsOffset?: GridSize;
|
|
94
|
+
}
|
|
95
|
+
type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
|
|
96
|
+
interface BreakpointOverridesEmpty {
|
|
97
|
+
}
|
|
98
|
+
type Breakpoints = IfEquals<BreakpointOverrides, BreakpointOverridesEmpty, GridDefaultBreakpoints, CustomBreakpoints>;
|
|
99
|
+
export interface GridBaseProps extends Breakpoints {
|
|
100
|
+
/**
|
|
101
|
+
* The content of the component.
|
|
102
|
+
*/
|
|
103
|
+
children?: React.ReactNode;
|
|
104
|
+
/**
|
|
105
|
+
* The number of columns.
|
|
106
|
+
* @default 12
|
|
107
|
+
*/
|
|
108
|
+
columns?: ResponsiveStyleValue<number>;
|
|
109
|
+
/**
|
|
110
|
+
* Defines the horizontal space between the type `item` components.
|
|
111
|
+
* It overrides the value of the `spacing` prop.
|
|
112
|
+
*/
|
|
113
|
+
columnSpacing?: ResponsiveStyleValue<GridSpacing>;
|
|
114
|
+
/**
|
|
115
|
+
* If `true`, the component will have the flex *container* behavior.
|
|
116
|
+
* You should be wrapping *items* with a *container*.
|
|
117
|
+
* @default false
|
|
118
|
+
*/
|
|
119
|
+
container?: boolean;
|
|
120
|
+
/**
|
|
121
|
+
* Defines the `flex-direction` style property.
|
|
122
|
+
* It is applied for all screen sizes.
|
|
123
|
+
* @default 'row'
|
|
124
|
+
*/
|
|
125
|
+
direction?: ResponsiveStyleValue<GridDirection>;
|
|
126
|
+
/**
|
|
127
|
+
* If `true`, the negative margin and padding are apply only to the top and left sides of the grid.
|
|
128
|
+
*/
|
|
129
|
+
disableEqualOverflow?: boolean;
|
|
130
|
+
/**
|
|
131
|
+
* Defines the vertical space between the type `item` components.
|
|
132
|
+
* It overrides the value of the `spacing` prop.
|
|
133
|
+
*/
|
|
134
|
+
rowSpacing?: ResponsiveStyleValue<GridSpacing>;
|
|
135
|
+
/**
|
|
136
|
+
* Defines the space between the type `item` components.
|
|
137
|
+
* It can only be used on a type `container` component.
|
|
138
|
+
* @default 0
|
|
139
|
+
*/
|
|
140
|
+
spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
|
|
141
|
+
/**
|
|
142
|
+
* Defines the `flex-wrap` style property.
|
|
143
|
+
* It's applied for all screen sizes.
|
|
144
|
+
* @default 'wrap'
|
|
145
|
+
*/
|
|
146
|
+
wrap?: GridWrap;
|
|
147
|
+
}
|
|
148
|
+
export interface GridOwnerState extends GridBaseProps {
|
|
149
|
+
nested: boolean;
|
|
150
|
+
gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
|
|
151
|
+
gridOffset: Partial<Record<Breakpoint, GridSize>>;
|
|
152
|
+
}
|
|
153
|
+
export interface GridTypeMap<P = {}, D extends React.ElementType = 'div'> {
|
|
154
|
+
props: P & GridBaseProps & {
|
|
155
|
+
sx?: SxProps<Theme>;
|
|
156
|
+
} & SystemProps<Theme>;
|
|
157
|
+
defaultComponent: D;
|
|
158
|
+
}
|
|
159
|
+
export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
|
|
160
|
+
component?: React.ElementType;
|
|
161
|
+
}> = OverrideProps<GridTypeMap<P, D>, D>;
|
|
162
|
+
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OverridableComponent } from '@mui/types';
|
|
3
|
-
import { GridTypeMap } from './GridProps';
|
|
4
|
-
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
|
|
5
|
-
declare function useThemePropsDefault<T extends {}>(props: T): T & {};
|
|
6
|
-
export default function createGrid(options?: {
|
|
7
|
-
createStyledComponent?: typeof defaultCreateStyledComponent;
|
|
8
|
-
useThemeProps?: typeof useThemePropsDefault;
|
|
9
|
-
componentName?: string;
|
|
10
|
-
}): OverridableComponent<GridTypeMap<{}, "div">>;
|
|
11
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { OverridableComponent } from '@mui/types';
|
|
3
|
+
import { GridTypeMap } from './GridProps';
|
|
4
|
+
declare const defaultCreateStyledComponent: import("@mui/styled-engine").CreateStyledComponent<import("../createStyled").MUIStyledCommonProps<any>, Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, keyof React.ClassAttributes<HTMLDivElement> | keyof React.HTMLAttributes<HTMLDivElement>>, {}, any>;
|
|
5
|
+
declare function useThemePropsDefault<T extends {}>(props: T): T & {};
|
|
6
|
+
export default function createGrid(options?: {
|
|
7
|
+
createStyledComponent?: typeof defaultCreateStyledComponent;
|
|
8
|
+
useThemeProps?: typeof useThemePropsDefault;
|
|
9
|
+
componentName?: string;
|
|
10
|
+
}): OverridableComponent<GridTypeMap<{}, "div">>;
|
|
11
|
+
export {};
|
|
@@ -1,20 +1,20 @@
|
|
|
1
|
-
export interface GridClasses {
|
|
2
|
-
/** Styles applied to the root element. */
|
|
3
|
-
root: string;
|
|
4
|
-
/** Styles applied to the root element if `container={true}`. */
|
|
5
|
-
container: string;
|
|
6
|
-
/** Styles applied to the root element if `direction="column"`. */
|
|
7
|
-
'direction-xs-column': string;
|
|
8
|
-
/** Styles applied to the root element if `direction="column-reverse"`. */
|
|
9
|
-
'direction-xs-column-reverse': string;
|
|
10
|
-
/** Styles applied to the root element if `direction="row-reverse"`. */
|
|
11
|
-
'direction-xs-row-reverse': string;
|
|
12
|
-
/** Styles applied to the root element if `wrap="nowrap"`. */
|
|
13
|
-
'wrap-xs-nowrap': string;
|
|
14
|
-
/** Styles applied to the root element if `wrap="reverse"`. */
|
|
15
|
-
'wrap-xs-wrap-reverse': string;
|
|
16
|
-
}
|
|
17
|
-
export
|
|
18
|
-
export declare function getGridUtilityClass(slot: string): string;
|
|
19
|
-
declare const gridClasses: GridClasses;
|
|
20
|
-
export default gridClasses;
|
|
1
|
+
export interface GridClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
/** Styles applied to the root element if `container={true}`. */
|
|
5
|
+
container: string;
|
|
6
|
+
/** Styles applied to the root element if `direction="column"`. */
|
|
7
|
+
'direction-xs-column': string;
|
|
8
|
+
/** Styles applied to the root element if `direction="column-reverse"`. */
|
|
9
|
+
'direction-xs-column-reverse': string;
|
|
10
|
+
/** Styles applied to the root element if `direction="row-reverse"`. */
|
|
11
|
+
'direction-xs-row-reverse': string;
|
|
12
|
+
/** Styles applied to the root element if `wrap="nowrap"`. */
|
|
13
|
+
'wrap-xs-nowrap': string;
|
|
14
|
+
/** Styles applied to the root element if `wrap="reverse"`. */
|
|
15
|
+
'wrap-xs-wrap-reverse': string;
|
|
16
|
+
}
|
|
17
|
+
export type GridClassKey = keyof GridClasses;
|
|
18
|
+
export declare function getGridUtilityClass(slot: string): string;
|
|
19
|
+
declare const gridClasses: GridClasses;
|
|
20
|
+
export default gridClasses;
|
|
@@ -1,29 +1,29 @@
|
|
|
1
|
-
import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
|
|
2
|
-
import { Spacing } from '../createTheme/createSpacing';
|
|
3
|
-
import { ResponsiveStyleValue } from '../styleFunctionSx';
|
|
4
|
-
import { GridDirection, GridOwnerState } from './GridProps';
|
|
5
|
-
interface Props {
|
|
6
|
-
theme: {
|
|
7
|
-
breakpoints: Breakpoints;
|
|
8
|
-
spacing?: Spacing;
|
|
9
|
-
};
|
|
10
|
-
ownerState: GridOwnerState & {
|
|
11
|
-
parentDisableEqualOverflow?: boolean;
|
|
12
|
-
};
|
|
13
|
-
}
|
|
14
|
-
interface Iterator<T> {
|
|
15
|
-
(appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
|
|
16
|
-
}
|
|
17
|
-
export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
|
|
18
|
-
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
|
|
19
|
-
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
|
|
20
|
-
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
|
|
21
|
-
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
|
|
22
|
-
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
23
|
-
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
24
|
-
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
|
|
25
|
-
export declare const generateGridStyles: ({ ownerState }: Props) => {};
|
|
26
|
-
export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
|
|
27
|
-
export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
|
|
28
|
-
export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
|
|
29
|
-
export {};
|
|
1
|
+
import { Breakpoints, Breakpoint } from '../createTheme/createBreakpoints';
|
|
2
|
+
import { Spacing } from '../createTheme/createSpacing';
|
|
3
|
+
import { ResponsiveStyleValue } from '../styleFunctionSx';
|
|
4
|
+
import { GridDirection, GridOwnerState } from './GridProps';
|
|
5
|
+
interface Props {
|
|
6
|
+
theme: {
|
|
7
|
+
breakpoints: Breakpoints;
|
|
8
|
+
spacing?: Spacing;
|
|
9
|
+
};
|
|
10
|
+
ownerState: GridOwnerState & {
|
|
11
|
+
parentDisableEqualOverflow?: boolean;
|
|
12
|
+
};
|
|
13
|
+
}
|
|
14
|
+
interface Iterator<T> {
|
|
15
|
+
(appendStyle: (responsiveStyles: Record<string, any>, style: object) => void, value: T): void;
|
|
16
|
+
}
|
|
17
|
+
export declare const filterBreakpointKeys: (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => Breakpoint[];
|
|
18
|
+
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsive: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
|
|
19
|
+
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
|
|
20
|
+
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
|
|
21
|
+
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
|
|
22
|
+
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
23
|
+
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
24
|
+
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
|
|
25
|
+
export declare const generateGridStyles: ({ ownerState }: Props) => {};
|
|
26
|
+
export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
|
|
27
|
+
export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
|
|
28
|
+
export declare const generateDirectionClasses: (direction: ResponsiveStyleValue<GridDirection> | undefined) => string[];
|
|
29
|
+
export {};
|
package/Unstable_Grid/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { default } from './Grid';
|
|
2
|
-
export { default as createGrid } from './createGrid';
|
|
3
|
-
export * from './GridProps';
|
|
4
|
-
export { default as gridClasses } from './gridClasses';
|
|
5
|
-
export * from './gridClasses';
|
|
1
|
+
export { default } from './Grid';
|
|
2
|
+
export { default as createGrid } from './createGrid';
|
|
3
|
+
export * from './GridProps';
|
|
4
|
+
export { default as gridClasses } from './gridClasses';
|
|
5
|
+
export * from './gridClasses';
|
package/createBox.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,10 +1,10 @@
|
|
|
1
|
-
export
|
|
2
|
-
export
|
|
3
|
-
export interface Spacing {
|
|
4
|
-
(): string;
|
|
5
|
-
(value: number): string;
|
|
6
|
-
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
|
|
7
|
-
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
|
|
8
|
-
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
|
|
9
|
-
}
|
|
10
|
-
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
|
|
1
|
+
export type SpacingOptions = number | Spacing | ((abs: number) => number | string) | ((abs: number | string) => number | string) | ReadonlyArray<string | number>;
|
|
2
|
+
export type SpacingArgument = number | string;
|
|
3
|
+
export interface Spacing {
|
|
4
|
+
(): string;
|
|
5
|
+
(value: number): string;
|
|
6
|
+
(topBottom: SpacingArgument, rightLeft: SpacingArgument): string;
|
|
7
|
+
(top: SpacingArgument, rightLeft: SpacingArgument, bottom: SpacingArgument): string;
|
|
8
|
+
(top: SpacingArgument, right: SpacingArgument, bottom: SpacingArgument, left: SpacingArgument): string;
|
|
9
|
+
}
|
|
10
|
+
export default function createSpacing(spacingInput?: SpacingOptions): Spacing;
|
|
@@ -89,7 +89,7 @@ export default function createCssVarsProvider<ColorScheme extends string>(
|
|
|
89
89
|
/**
|
|
90
90
|
* Design system default theme
|
|
91
91
|
*
|
|
92
|
-
* The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
|
|
92
|
+
* - The structure inside `theme.colorSchemes[colorScheme]` should be exactly the same in all color schemes because
|
|
93
93
|
* those object of the color scheme will be used when the color scheme is active.
|
|
94
94
|
*
|
|
95
95
|
* {
|
|
@@ -99,16 +99,21 @@ export default function createCssVarsProvider<ColorScheme extends string>(
|
|
|
99
99
|
* }
|
|
100
100
|
* }
|
|
101
101
|
*
|
|
102
|
-
*
|
|
103
|
-
*
|
|
102
|
+
* - If colorScheme is 'light', the `lightColorSchemeValues` will be merged to theme as `{ ...theme, ...lightColorSchemeValues }`
|
|
103
|
+
* likewise, if colorScheme is 'dark', the `darkColorSchemeValues` will be merged to theme as `{ ...theme, ...darkColorSchemeValues }`
|
|
104
104
|
*
|
|
105
|
-
*
|
|
105
|
+
* - If the theme contains the same keys as the color scheme, their values will be merged.
|
|
106
106
|
* Ex. {
|
|
107
107
|
* colorSchemes: {
|
|
108
|
-
* light: { palette: { ... } },
|
|
109
|
-
* dark: { palette: { ... } }
|
|
108
|
+
* light: { palette: { primary: { ... } } },
|
|
109
|
+
* dark: { palette: { primary: { ...} } }
|
|
110
110
|
* },
|
|
111
|
-
* palette: { ... }
|
|
111
|
+
* palette: { shared: { ... } }
|
|
112
|
+
* }
|
|
113
|
+
*
|
|
114
|
+
* becomes: {
|
|
115
|
+
* colorSchemes: { ... },
|
|
116
|
+
* palette: { shared: { ... }, primary: { ... } }
|
|
112
117
|
* }
|
|
113
118
|
*/
|
|
114
119
|
theme: any;
|
|
@@ -115,15 +115,14 @@ function createCssVarsProvider(options) {
|
|
|
115
115
|
// 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step)
|
|
116
116
|
const {
|
|
117
117
|
css: rootCss,
|
|
118
|
-
vars: rootVars
|
|
119
|
-
parsedTheme
|
|
118
|
+
vars: rootVars
|
|
120
119
|
} = (0, _cssVarsParser.default)(restThemeProp, {
|
|
121
120
|
prefix: cssVarPrefix,
|
|
122
121
|
shouldSkipGeneratingVar
|
|
123
122
|
});
|
|
124
123
|
|
|
125
124
|
// 3. Start composing the theme object
|
|
126
|
-
const theme = (0, _extends2.default)({},
|
|
125
|
+
const theme = (0, _extends2.default)({}, restThemeProp, {
|
|
127
126
|
components,
|
|
128
127
|
colorSchemes,
|
|
129
128
|
cssVarPrefix,
|
|
@@ -139,8 +138,7 @@ function createCssVarsProvider(options) {
|
|
|
139
138
|
Object.entries(colorSchemes).forEach(([key, scheme]) => {
|
|
140
139
|
const {
|
|
141
140
|
css,
|
|
142
|
-
vars
|
|
143
|
-
parsedTheme: parsedScheme
|
|
141
|
+
vars
|
|
144
142
|
} = (0, _cssVarsParser.default)(scheme, {
|
|
145
143
|
prefix: cssVarPrefix,
|
|
146
144
|
shouldSkipGeneratingVar
|
|
@@ -148,12 +146,12 @@ function createCssVarsProvider(options) {
|
|
|
148
146
|
theme.vars = (0, _utils.deepmerge)(theme.vars, vars);
|
|
149
147
|
if (key === calculatedColorScheme) {
|
|
150
148
|
// 4.1 Merge the selected color scheme to the theme
|
|
151
|
-
Object.keys(
|
|
152
|
-
if (
|
|
149
|
+
Object.keys(scheme).forEach(schemeKey => {
|
|
150
|
+
if (scheme[schemeKey] && typeof scheme[schemeKey] === 'object') {
|
|
153
151
|
// shallow merge the 1st level structure of the theme.
|
|
154
|
-
theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey],
|
|
152
|
+
theme[schemeKey] = (0, _extends2.default)({}, theme[schemeKey], scheme[schemeKey]);
|
|
155
153
|
} else {
|
|
156
|
-
theme[schemeKey] =
|
|
154
|
+
theme[schemeKey] = scheme[schemeKey];
|
|
157
155
|
}
|
|
158
156
|
});
|
|
159
157
|
if (theme.palette) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
|
|
3
|
-
* and they does not need to remember the prefix (defined once).
|
|
4
|
-
*/
|
|
5
|
-
export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;
|
|
1
|
+
/**
|
|
2
|
+
* The benefit of this function is to help developers get CSS var from theme without specifying the whole variable
|
|
3
|
+
* and they does not need to remember the prefix (defined once).
|
|
4
|
+
*/
|
|
5
|
+
export default function createGetCssVar<T extends string = string>(prefix?: string): <AdditionalVars extends string = never>(field: T | AdditionalVars, ...fallbacks: (T | AdditionalVars)[]) => string;
|