@mui/system 5.14.1 → 5.14.4
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.d.ts +15 -9
- package/CHANGELOG.md +253 -4
- 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/GlobalStyles/GlobalStyles.d.ts +13 -13
- package/GlobalStyles/index.d.ts +2 -2
- package/Stack/Stack.d.ts +14 -14
- package/Stack/StackProps.d.ts +53 -53
- package/Stack/createStack.d.ts +21 -21
- package/Stack/createStack.js +5 -1
- 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/Grid.js +23 -0
- package/Unstable_Grid/GridProps.d.ts +185 -185
- package/Unstable_Grid/createGrid.d.ts +11 -11
- package/Unstable_Grid/gridClasses.d.ts +20 -20
- package/Unstable_Grid/gridGenerator.d.ts +33 -33
- package/Unstable_Grid/index.d.ts +6 -6
- package/Unstable_Grid/traverseBreakpoints.d.ts +7 -7
- package/createStyled.d.ts +6 -6
- package/createStyled.js +23 -4
- package/createTheme/createSpacing.d.ts +10 -10
- package/cssVars/createCssVarsTheme.d.ts +15 -15
- package/cssVars/createGetCssVar.d.ts +5 -5
- package/cssVars/cssVarsParser.d.ts +64 -64
- package/cssVars/getInitColorSchemeScript.d.ts +42 -42
- package/cssVars/index.d.ts +5 -5
- package/cssVars/prepareCssVars.d.ts +16 -16
- package/cssVars/useCurrentColorScheme.d.ts +53 -53
- package/esm/Stack/createStack.js +5 -1
- package/esm/Unstable_Grid/Grid.js +23 -0
- package/esm/createStyled.js +24 -5
- package/esm/styleFunctionSx/styleFunctionSx.js +2 -0
- package/index.js +1 -1
- package/legacy/Stack/createStack.js +5 -2
- package/legacy/Unstable_Grid/Grid.js +23 -0
- package/legacy/createStyled.js +25 -5
- package/legacy/index.js +1 -1
- package/legacy/styleFunctionSx/styleFunctionSx.js +2 -0
- package/modern/Stack/createStack.js +5 -1
- package/modern/Unstable_Grid/Grid.js +23 -0
- package/modern/createStyled.js +24 -5
- package/modern/index.js +1 -1
- package/modern/styleFunctionSx/styleFunctionSx.js +2 -0
- package/package.json +4 -4
- package/styleFunctionSx/styleFunctionSx.js +2 -0
package/Stack/StackProps.d.ts
CHANGED
|
@@ -1,53 +1,53 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OverrideProps } from '@mui/types';
|
|
3
|
-
import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
|
|
4
|
-
import { SystemProps } from '../Box';
|
|
5
|
-
import { Theme } from '../createTheme';
|
|
6
|
-
export interface StackBaseProps {
|
|
7
|
-
/**
|
|
8
|
-
* The content of the component.
|
|
9
|
-
*/
|
|
10
|
-
children?: React.ReactNode;
|
|
11
|
-
/**
|
|
12
|
-
* Defines the `flex-direction` style property.
|
|
13
|
-
* It is applied for all screen sizes.
|
|
14
|
-
* @default 'column'
|
|
15
|
-
*/
|
|
16
|
-
direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
|
|
17
|
-
/**
|
|
18
|
-
* Defines the space between immediate children.
|
|
19
|
-
* @default 0
|
|
20
|
-
*/
|
|
21
|
-
spacing?: ResponsiveStyleValue<number | string>;
|
|
22
|
-
/**
|
|
23
|
-
* Add an element between each child.
|
|
24
|
-
*/
|
|
25
|
-
divider?: React.ReactNode;
|
|
26
|
-
/**
|
|
27
|
-
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
|
|
28
|
-
*
|
|
29
|
-
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
|
|
30
|
-
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
|
|
31
|
-
*
|
|
32
|
-
* To enable this flag globally, follow the theme's default props configuration.
|
|
33
|
-
* @default false
|
|
34
|
-
*/
|
|
35
|
-
useFlexGap?: boolean;
|
|
36
|
-
}
|
|
37
|
-
export interface StackTypeMap<
|
|
38
|
-
props:
|
|
39
|
-
/**
|
|
40
|
-
* The system prop, which allows defining system overrides as well as additional CSS styles.
|
|
41
|
-
*/
|
|
42
|
-
sx?: SxProps<Theme>;
|
|
43
|
-
} & SystemProps<Theme>;
|
|
44
|
-
defaultComponent:
|
|
45
|
-
}
|
|
46
|
-
export type StackProps<
|
|
47
|
-
component?: React.ElementType;
|
|
48
|
-
}> = OverrideProps<StackTypeMap<
|
|
49
|
-
export interface StackOwnerState {
|
|
50
|
-
direction: StackProps['direction'];
|
|
51
|
-
spacing: StackProps['spacing'];
|
|
52
|
-
useFlexGap: boolean;
|
|
53
|
-
}
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { OverrideProps } from '@mui/types';
|
|
3
|
+
import { ResponsiveStyleValue, SxProps } from '../styleFunctionSx';
|
|
4
|
+
import { SystemProps } from '../Box';
|
|
5
|
+
import { Theme } from '../createTheme';
|
|
6
|
+
export interface StackBaseProps {
|
|
7
|
+
/**
|
|
8
|
+
* The content of the component.
|
|
9
|
+
*/
|
|
10
|
+
children?: React.ReactNode;
|
|
11
|
+
/**
|
|
12
|
+
* Defines the `flex-direction` style property.
|
|
13
|
+
* It is applied for all screen sizes.
|
|
14
|
+
* @default 'column'
|
|
15
|
+
*/
|
|
16
|
+
direction?: ResponsiveStyleValue<'row' | 'row-reverse' | 'column' | 'column-reverse'>;
|
|
17
|
+
/**
|
|
18
|
+
* Defines the space between immediate children.
|
|
19
|
+
* @default 0
|
|
20
|
+
*/
|
|
21
|
+
spacing?: ResponsiveStyleValue<number | string>;
|
|
22
|
+
/**
|
|
23
|
+
* Add an element between each child.
|
|
24
|
+
*/
|
|
25
|
+
divider?: React.ReactNode;
|
|
26
|
+
/**
|
|
27
|
+
* If `true`, the CSS flexbox `gap` is used instead of applying `margin` to children.
|
|
28
|
+
*
|
|
29
|
+
* While CSS `gap` removes the [known limitations](https://mui.com/joy-ui/react-stack/#limitations),
|
|
30
|
+
* it is not fully supported in some browsers. We recommend checking https://caniuse.com/?search=flex%20gap before using this flag.
|
|
31
|
+
*
|
|
32
|
+
* To enable this flag globally, follow the theme's default props configuration.
|
|
33
|
+
* @default false
|
|
34
|
+
*/
|
|
35
|
+
useFlexGap?: boolean;
|
|
36
|
+
}
|
|
37
|
+
export interface StackTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
|
|
38
|
+
props: AdditionalProps & StackBaseProps & {
|
|
39
|
+
/**
|
|
40
|
+
* The system prop, which allows defining system overrides as well as additional CSS styles.
|
|
41
|
+
*/
|
|
42
|
+
sx?: SxProps<Theme>;
|
|
43
|
+
} & SystemProps<Theme>;
|
|
44
|
+
defaultComponent: DefaultComponent;
|
|
45
|
+
}
|
|
46
|
+
export type StackProps<RootComponent extends React.ElementType = StackTypeMap['defaultComponent'], AdditionalProps = {
|
|
47
|
+
component?: React.ElementType;
|
|
48
|
+
}> = OverrideProps<StackTypeMap<AdditionalProps, RootComponent>, RootComponent>;
|
|
49
|
+
export interface StackOwnerState {
|
|
50
|
+
direction: StackProps['direction'];
|
|
51
|
+
spacing: StackProps['spacing'];
|
|
52
|
+
useFlexGap: boolean;
|
|
53
|
+
}
|
package/Stack/createStack.d.ts
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { OverridableComponent } from '@mui/types';
|
|
3
|
-
import { StackTypeMap, StackOwnerState } from './StackProps';
|
|
4
|
-
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
5
|
-
import { Spacing } from '../createTheme/createSpacing';
|
|
6
|
-
interface StyleFunctionProps {
|
|
7
|
-
theme: {
|
|
8
|
-
breakpoints: Breakpoints;
|
|
9
|
-
spacing: Spacing;
|
|
10
|
-
};
|
|
11
|
-
ownerState: StackOwnerState;
|
|
12
|
-
}
|
|
13
|
-
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>;
|
|
14
|
-
declare function useThemePropsDefault<T extends {}>(props: T): T & {};
|
|
15
|
-
export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
|
|
16
|
-
export default function createStack(options?: {
|
|
17
|
-
createStyledComponent?: typeof defaultCreateStyledComponent;
|
|
18
|
-
useThemeProps?: typeof useThemePropsDefault;
|
|
19
|
-
componentName?: string;
|
|
20
|
-
}): OverridableComponent<StackTypeMap<{}, "div">>;
|
|
21
|
-
export {};
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { OverridableComponent } from '@mui/types';
|
|
3
|
+
import { StackTypeMap, StackOwnerState } from './StackProps';
|
|
4
|
+
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
5
|
+
import { Spacing } from '../createTheme/createSpacing';
|
|
6
|
+
interface StyleFunctionProps {
|
|
7
|
+
theme: {
|
|
8
|
+
breakpoints: Breakpoints;
|
|
9
|
+
spacing: Spacing;
|
|
10
|
+
};
|
|
11
|
+
ownerState: StackOwnerState;
|
|
12
|
+
}
|
|
13
|
+
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>;
|
|
14
|
+
declare function useThemePropsDefault<T extends {}>(props: T): T & {};
|
|
15
|
+
export declare const style: ({ ownerState, theme }: StyleFunctionProps) => any;
|
|
16
|
+
export default function createStack(options?: {
|
|
17
|
+
createStyledComponent?: typeof defaultCreateStyledComponent;
|
|
18
|
+
useThemeProps?: typeof useThemePropsDefault;
|
|
19
|
+
componentName?: string;
|
|
20
|
+
}): OverridableComponent<StackTypeMap<{}, "div">>;
|
|
21
|
+
export {};
|
package/Stack/createStack.js
CHANGED
|
@@ -111,8 +111,12 @@ const style = ({
|
|
|
111
111
|
};
|
|
112
112
|
}
|
|
113
113
|
return {
|
|
114
|
+
// The useFlexGap={false} implement relies on each child to give up control of the margin.
|
|
115
|
+
// We need to reset the margin to avoid double spacing.
|
|
116
|
+
'& > :not(style):not(style)': {
|
|
117
|
+
margin: 0
|
|
118
|
+
},
|
|
114
119
|
'& > :not(style) ~ :not(style)': {
|
|
115
|
-
margin: 0,
|
|
116
120
|
[`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: (0, _spacing.getValue)(transformer, propValue)
|
|
117
121
|
}
|
|
118
122
|
};
|
package/Stack/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
export { default } from './Stack';
|
|
2
|
-
export { default as createStack } from './createStack';
|
|
3
|
-
export * from './StackProps';
|
|
4
|
-
export { default as stackClasses } from './stackClasses';
|
|
5
|
-
export * from './stackClasses';
|
|
1
|
+
export { default } from './Stack';
|
|
2
|
+
export { default as createStack } from './createStack';
|
|
3
|
+
export * from './StackProps';
|
|
4
|
+
export { default as stackClasses } from './stackClasses';
|
|
5
|
+
export * from './stackClasses';
|
package/Stack/stackClasses.d.ts
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
export interface StackClasses {
|
|
2
|
-
/** Styles applied to the root element. */
|
|
3
|
-
root: string;
|
|
4
|
-
}
|
|
5
|
-
export type StackClassKey = keyof StackClasses;
|
|
6
|
-
export declare function getStackUtilityClass(slot: string): string;
|
|
7
|
-
declare const stackClasses: StackClasses;
|
|
8
|
-
export default stackClasses;
|
|
1
|
+
export interface StackClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
}
|
|
5
|
+
export type StackClassKey = keyof StackClasses;
|
|
6
|
+
export declare function getStackUtilityClass(slot: string): string;
|
|
7
|
+
declare const stackClasses: StackClasses;
|
|
8
|
+
export default stackClasses;
|
package/Unstable_Grid/Grid.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
/**
|
|
2
|
-
*
|
|
3
|
-
* Demos:
|
|
4
|
-
*
|
|
5
|
-
* - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
|
|
6
|
-
*
|
|
7
|
-
* API:
|
|
8
|
-
*
|
|
9
|
-
* - [Grid API](https://mui.com/system/api/grid/)
|
|
10
|
-
*/
|
|
11
|
-
declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps").GridTypeMap<{}, "div">>;
|
|
12
|
-
export default Grid;
|
|
1
|
+
/**
|
|
2
|
+
*
|
|
3
|
+
* Demos:
|
|
4
|
+
*
|
|
5
|
+
* - [Grid (Material UI)](https://mui.com/material-ui/react-grid/)
|
|
6
|
+
*
|
|
7
|
+
* API:
|
|
8
|
+
*
|
|
9
|
+
* - [Grid API](https://mui.com/system/api/grid/)
|
|
10
|
+
*/
|
|
11
|
+
declare const Grid: import("@mui/types").OverridableComponent<import("./GridProps").GridTypeMap<{}, "div">>;
|
|
12
|
+
export default Grid;
|
package/Unstable_Grid/Grid.js
CHANGED
|
@@ -117,6 +117,29 @@ process.env.NODE_ENV !== "production" ? Grid.propTypes /* remove-proptypes */ =
|
|
|
117
117
|
* @ignore
|
|
118
118
|
*/
|
|
119
119
|
sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
|
|
120
|
+
/**
|
|
121
|
+
* @internal
|
|
122
|
+
* The level of the grid starts from `0`
|
|
123
|
+
* and increases when the grid nests inside another grid regardless of container or item.
|
|
124
|
+
*
|
|
125
|
+
* ```js
|
|
126
|
+
* <Grid> // level 0
|
|
127
|
+
* <Grid> // level 1
|
|
128
|
+
* <Grid> // level 2
|
|
129
|
+
* <Grid> // level 1
|
|
130
|
+
* ```
|
|
131
|
+
*
|
|
132
|
+
* Only consecutive grid is considered nesting.
|
|
133
|
+
* A grid container will start at `0` if there are non-Grid element above it.
|
|
134
|
+
*
|
|
135
|
+
* ```js
|
|
136
|
+
* <Grid> // level 0
|
|
137
|
+
* <div>
|
|
138
|
+
* <Grid> // level 0
|
|
139
|
+
* <Grid> // level 1
|
|
140
|
+
* ```
|
|
141
|
+
*/
|
|
142
|
+
unstable_level: _propTypes.default.number,
|
|
120
143
|
/**
|
|
121
144
|
* Defines the `flex-wrap` style property.
|
|
122
145
|
* It's applied for all screen sizes.
|
|
@@ -1,185 +1,185 @@
|
|
|
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
|
-
* @internal
|
|
132
|
-
* The level of the grid starts from `0`
|
|
133
|
-
* and increases when the grid nests inside another grid regardless of container or item.
|
|
134
|
-
*
|
|
135
|
-
* ```js
|
|
136
|
-
* <Grid> // level 0
|
|
137
|
-
* <Grid> // level 1
|
|
138
|
-
* <Grid> // level 2
|
|
139
|
-
* <Grid> // level 1
|
|
140
|
-
* ```
|
|
141
|
-
*
|
|
142
|
-
* Only consecutive grid is considered nesting.
|
|
143
|
-
* A grid container will start at `0` if there are non-Grid element above it.
|
|
144
|
-
*
|
|
145
|
-
* ```js
|
|
146
|
-
* <Grid> // level 0
|
|
147
|
-
* <div>
|
|
148
|
-
* <Grid> // level 0
|
|
149
|
-
* <Grid> // level 1
|
|
150
|
-
* ```
|
|
151
|
-
*/
|
|
152
|
-
unstable_level?: number;
|
|
153
|
-
/**
|
|
154
|
-
* Defines the vertical space between the type `item` components.
|
|
155
|
-
* It overrides the value of the `spacing` prop.
|
|
156
|
-
*/
|
|
157
|
-
rowSpacing?: ResponsiveStyleValue<GridSpacing>;
|
|
158
|
-
/**
|
|
159
|
-
* Defines the space between the type `item` components.
|
|
160
|
-
* It can only be used on a type `container` component.
|
|
161
|
-
* @default 0
|
|
162
|
-
*/
|
|
163
|
-
spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
|
|
164
|
-
/**
|
|
165
|
-
* Defines the `flex-wrap` style property.
|
|
166
|
-
* It's applied for all screen sizes.
|
|
167
|
-
* @default 'wrap'
|
|
168
|
-
*/
|
|
169
|
-
wrap?: GridWrap;
|
|
170
|
-
}
|
|
171
|
-
export interface GridOwnerState extends GridBaseProps {
|
|
172
|
-
unstable_level: number;
|
|
173
|
-
gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
|
|
174
|
-
gridOffset: Partial<Record<Breakpoint, GridSize>>;
|
|
175
|
-
}
|
|
176
|
-
export interface GridTypeMap<
|
|
177
|
-
props:
|
|
178
|
-
sx?: SxProps<Theme>;
|
|
179
|
-
} & SystemProps<Theme>;
|
|
180
|
-
defaultComponent:
|
|
181
|
-
}
|
|
182
|
-
export type GridProps<
|
|
183
|
-
component?: React.ElementType;
|
|
184
|
-
}> = OverrideProps<GridTypeMap<
|
|
185
|
-
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
|
+
* @internal
|
|
132
|
+
* The level of the grid starts from `0`
|
|
133
|
+
* and increases when the grid nests inside another grid regardless of container or item.
|
|
134
|
+
*
|
|
135
|
+
* ```js
|
|
136
|
+
* <Grid> // level 0
|
|
137
|
+
* <Grid> // level 1
|
|
138
|
+
* <Grid> // level 2
|
|
139
|
+
* <Grid> // level 1
|
|
140
|
+
* ```
|
|
141
|
+
*
|
|
142
|
+
* Only consecutive grid is considered nesting.
|
|
143
|
+
* A grid container will start at `0` if there are non-Grid element above it.
|
|
144
|
+
*
|
|
145
|
+
* ```js
|
|
146
|
+
* <Grid> // level 0
|
|
147
|
+
* <div>
|
|
148
|
+
* <Grid> // level 0
|
|
149
|
+
* <Grid> // level 1
|
|
150
|
+
* ```
|
|
151
|
+
*/
|
|
152
|
+
unstable_level?: number;
|
|
153
|
+
/**
|
|
154
|
+
* Defines the vertical space between the type `item` components.
|
|
155
|
+
* It overrides the value of the `spacing` prop.
|
|
156
|
+
*/
|
|
157
|
+
rowSpacing?: ResponsiveStyleValue<GridSpacing>;
|
|
158
|
+
/**
|
|
159
|
+
* Defines the space between the type `item` components.
|
|
160
|
+
* It can only be used on a type `container` component.
|
|
161
|
+
* @default 0
|
|
162
|
+
*/
|
|
163
|
+
spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
|
|
164
|
+
/**
|
|
165
|
+
* Defines the `flex-wrap` style property.
|
|
166
|
+
* It's applied for all screen sizes.
|
|
167
|
+
* @default 'wrap'
|
|
168
|
+
*/
|
|
169
|
+
wrap?: GridWrap;
|
|
170
|
+
}
|
|
171
|
+
export interface GridOwnerState extends GridBaseProps {
|
|
172
|
+
unstable_level: number;
|
|
173
|
+
gridSize: Partial<Record<Breakpoint, GridSize | boolean>>;
|
|
174
|
+
gridOffset: Partial<Record<Breakpoint, GridSize>>;
|
|
175
|
+
}
|
|
176
|
+
export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
|
|
177
|
+
props: AdditionalProps & GridBaseProps & {
|
|
178
|
+
sx?: SxProps<Theme>;
|
|
179
|
+
} & SystemProps<Theme>;
|
|
180
|
+
defaultComponent: DefaultComponent;
|
|
181
|
+
}
|
|
182
|
+
export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
|
|
183
|
+
component?: React.ElementType;
|
|
184
|
+
}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
|
|
185
|
+
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 {};
|