@mui/system 5.9.3 → 5.10.0
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 +65 -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/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.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/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/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/index.js +4 -2
- package/package.json +3 -3
- package/spacing.d.ts +6 -0
- package/styleFunctionSx/styleFunctionSx.spec.d.ts +1 -1
package/Stack/index.d.ts
ADDED
package/Stack/index.js
ADDED
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
var _exportNames = {
|
|
9
|
+
createStack: true,
|
|
10
|
+
stackClasses: true
|
|
11
|
+
};
|
|
12
|
+
Object.defineProperty(exports, "createStack", {
|
|
13
|
+
enumerable: true,
|
|
14
|
+
get: function () {
|
|
15
|
+
return _createStack.default;
|
|
16
|
+
}
|
|
17
|
+
});
|
|
18
|
+
Object.defineProperty(exports, "default", {
|
|
19
|
+
enumerable: true,
|
|
20
|
+
get: function () {
|
|
21
|
+
return _Stack.default;
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
Object.defineProperty(exports, "stackClasses", {
|
|
25
|
+
enumerable: true,
|
|
26
|
+
get: function () {
|
|
27
|
+
return _stackClasses.default;
|
|
28
|
+
}
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
var _Stack = _interopRequireDefault(require("./Stack"));
|
|
32
|
+
|
|
33
|
+
var _createStack = _interopRequireDefault(require("./createStack"));
|
|
34
|
+
|
|
35
|
+
var _StackProps = require("./StackProps");
|
|
36
|
+
|
|
37
|
+
Object.keys(_StackProps).forEach(function (key) {
|
|
38
|
+
if (key === "default" || key === "__esModule") return;
|
|
39
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
40
|
+
if (key in exports && exports[key] === _StackProps[key]) return;
|
|
41
|
+
Object.defineProperty(exports, key, {
|
|
42
|
+
enumerable: true,
|
|
43
|
+
get: function () {
|
|
44
|
+
return _StackProps[key];
|
|
45
|
+
}
|
|
46
|
+
});
|
|
47
|
+
});
|
|
48
|
+
|
|
49
|
+
var _stackClasses = _interopRequireWildcard(require("./stackClasses"));
|
|
50
|
+
|
|
51
|
+
Object.keys(_stackClasses).forEach(function (key) {
|
|
52
|
+
if (key === "default" || key === "__esModule") return;
|
|
53
|
+
if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
|
|
54
|
+
if (key in exports && exports[key] === _stackClasses[key]) return;
|
|
55
|
+
Object.defineProperty(exports, key, {
|
|
56
|
+
enumerable: true,
|
|
57
|
+
get: function () {
|
|
58
|
+
return _stackClasses[key];
|
|
59
|
+
}
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
|
|
63
|
+
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); }
|
|
64
|
+
|
|
65
|
+
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; }
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export interface StackClasses {
|
|
2
|
+
/** Styles applied to the root element. */
|
|
3
|
+
root: string;
|
|
4
|
+
}
|
|
5
|
+
export declare type StackClassKey = keyof StackClasses;
|
|
6
|
+
export declare function getStackUtilityClass(slot: string): string;
|
|
7
|
+
declare const stackClasses: StackClasses;
|
|
8
|
+
export default stackClasses;
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
exports.getStackUtilityClass = getStackUtilityClass;
|
|
8
|
+
|
|
9
|
+
var _utils = require("@mui/utils");
|
|
10
|
+
|
|
11
|
+
function getStackUtilityClass(slot) {
|
|
12
|
+
return (0, _utils.unstable_generateUtilityClass)('MuiStack', slot);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
const stackClasses = (0, _utils.unstable_generateUtilityClasses)('MuiStack', ['root']);
|
|
16
|
+
var _default = stackClasses;
|
|
17
|
+
exports.default = _default;
|
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;
|
|
@@ -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
|
-
declare type ResponsiveStyleValue<T> = T | Array<T | null> | {
|
|
7
|
-
[key in Breakpoint]?: T | null;
|
|
8
|
-
};
|
|
9
|
-
export declare type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
10
|
-
export declare type GridSpacing = number | string;
|
|
11
|
-
export declare type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
12
|
-
export declare 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
|
-
declare type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
|
|
96
|
-
interface BreakpointOverridesEmpty {
|
|
97
|
-
}
|
|
98
|
-
declare 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 declare type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
|
|
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
|
+
declare type ResponsiveStyleValue<T> = T | Array<T | null> | {
|
|
7
|
+
[key in Breakpoint]?: T | null;
|
|
8
|
+
};
|
|
9
|
+
export declare type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
|
|
10
|
+
export declare type GridSpacing = number | string;
|
|
11
|
+
export declare type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
|
|
12
|
+
export declare 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
|
+
declare type CustomBreakpoints = Partial<Record<Breakpoint, boolean | GridSize> & Record<`${Breakpoint}Offset`, GridSize>>;
|
|
96
|
+
interface BreakpointOverridesEmpty {
|
|
97
|
+
}
|
|
98
|
+
declare 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 declare 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>(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>(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 declare type GridClassKey = keyof GridClasses;
|
|
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 declare type GridClassKey = keyof GridClasses;
|
|
18
|
+
export declare function getGridUtilityClass(slot: string): string;
|
|
19
|
+
declare const gridClasses: GridClasses;
|
|
20
|
+
export default gridClasses;
|
|
@@ -1,26 +1,26 @@
|
|
|
1
|
-
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
2
|
-
import { Spacing } from '../createTheme/createSpacing';
|
|
3
|
-
import { GridOwnerState } from './GridProps';
|
|
4
|
-
interface Props {
|
|
5
|
-
theme: {
|
|
6
|
-
breakpoints: Breakpoints;
|
|
7
|
-
spacing?: Spacing;
|
|
8
|
-
};
|
|
9
|
-
ownerState: GridOwnerState & {
|
|
10
|
-
parentDisableEqualOverflow?: boolean;
|
|
11
|
-
};
|
|
12
|
-
}
|
|
13
|
-
interface Iterator<T> {
|
|
14
|
-
(appendStyle: (responsizeStyles: Record<string, any>, style: object) => void, value: T): void;
|
|
15
|
-
}
|
|
16
|
-
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsize: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
|
|
17
|
-
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
|
|
18
|
-
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
|
|
19
|
-
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
|
|
20
|
-
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
21
|
-
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
22
|
-
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
|
|
23
|
-
export declare const generateGridStyles: ({ ownerState }: Props) => {};
|
|
24
|
-
export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
|
|
25
|
-
export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
|
|
26
|
-
export {};
|
|
1
|
+
import { Breakpoints } from '../createTheme/createBreakpoints';
|
|
2
|
+
import { Spacing } from '../createTheme/createSpacing';
|
|
3
|
+
import { GridOwnerState } from './GridProps';
|
|
4
|
+
interface Props {
|
|
5
|
+
theme: {
|
|
6
|
+
breakpoints: Breakpoints;
|
|
7
|
+
spacing?: Spacing;
|
|
8
|
+
};
|
|
9
|
+
ownerState: GridOwnerState & {
|
|
10
|
+
parentDisableEqualOverflow?: boolean;
|
|
11
|
+
};
|
|
12
|
+
}
|
|
13
|
+
interface Iterator<T> {
|
|
14
|
+
(appendStyle: (responsizeStyles: Record<string, any>, style: object) => void, value: T): void;
|
|
15
|
+
}
|
|
16
|
+
export declare const traverseBreakpoints: <T = unknown>(breakpoints: Breakpoints, responsize: Record<string, any> | T | T[] | undefined, iterator: Iterator<T>) => void;
|
|
17
|
+
export declare const generateGridSizeStyles: ({ theme, ownerState }: Props) => {};
|
|
18
|
+
export declare const generateGridOffsetStyles: ({ theme, ownerState }: Props) => {};
|
|
19
|
+
export declare const generateGridColumnsStyles: ({ theme, ownerState }: Props) => {};
|
|
20
|
+
export declare const generateGridRowSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
21
|
+
export declare const generateGridColumnSpacingStyles: ({ theme, ownerState }: Props) => {};
|
|
22
|
+
export declare const generateGridDirectionStyles: ({ theme, ownerState }: Props) => {};
|
|
23
|
+
export declare const generateGridStyles: ({ ownerState }: Props) => {};
|
|
24
|
+
export declare const generateSizeClassNames: (gridSize: GridOwnerState['gridSize']) => string[];
|
|
25
|
+
export declare const generateSpacingClassNames: (spacing: GridOwnerState['spacing'], smallestBreakpoint?: string) => string[];
|
|
26
|
+
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/breakpoints.d.ts
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { CSSObject } from '@mui/styled-engine';
|
|
2
|
+
import { Breakpoints } from './createTheme/createBreakpoints';
|
|
3
|
+
import type { Breakpoint } from './createTheme';
|
|
4
|
+
import { ResponsiveStyleValue } from './styleFunctionSx';
|
|
5
|
+
|
|
6
|
+
export interface ResolveBreakpointValuesOptions<T> {
|
|
7
|
+
values: ResponsiveStyleValue<T>;
|
|
8
|
+
breakpoints?: Breakpoints['values'];
|
|
9
|
+
base?: Record<string, boolean>;
|
|
10
|
+
}
|
|
11
|
+
export function resolveBreakpointValues<T>(
|
|
12
|
+
options: ResolveBreakpointValuesOptions<T>,
|
|
13
|
+
): Record<string, T>;
|
|
14
|
+
|
|
15
|
+
export function mergeBreakpointsInOrder(breakpoints: Breakpoints, styles: CSSObject[]): CSSObject;
|
|
16
|
+
|
|
17
|
+
export function handleBreakpoints<Props>(
|
|
18
|
+
props: Props,
|
|
19
|
+
propValue: any,
|
|
20
|
+
styleFromPropValue: (value: any, breakpoint?: Breakpoint) => any,
|
|
21
|
+
): any;
|
package/createBox.js
CHANGED
|
@@ -36,7 +36,9 @@ function createBox(options = {}) {
|
|
|
36
36
|
generateClassName,
|
|
37
37
|
styleFunctionSx = _styleFunctionSx.default
|
|
38
38
|
} = options;
|
|
39
|
-
const BoxRoot = (0, _styledEngine.default)('div'
|
|
39
|
+
const BoxRoot = (0, _styledEngine.default)('div', {
|
|
40
|
+
shouldForwardProp: prop => prop !== 'theme' && prop !== 'sx' && prop !== 'as'
|
|
41
|
+
})(styleFunctionSx);
|
|
40
42
|
const Box = /*#__PURE__*/React.forwardRef(function Box(inProps, ref) {
|
|
41
43
|
const theme = (0, _useTheme.default)(defaultTheme);
|
|
42
44
|
|
package/createBox.spec.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export {};
|
|
1
|
+
export {};
|