@mui/system 5.13.6 → 5.14.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.
Files changed (113) hide show
  1. package/Box/Box.js +1 -0
  2. package/Box/index.js +1 -0
  3. package/CHANGELOG.md +162 -10
  4. package/Container/Container.d.ts +13 -13
  5. package/Container/Container.js +1 -0
  6. package/Container/ContainerProps.d.ts +40 -40
  7. package/Container/containerClasses.d.ts +22 -22
  8. package/Container/createContainer.d.ts +18 -18
  9. package/Container/index.js +1 -0
  10. package/GlobalStyles/GlobalStyles.d.ts +13 -13
  11. package/GlobalStyles/GlobalStyles.js +1 -0
  12. package/GlobalStyles/index.d.ts +2 -2
  13. package/GlobalStyles/index.js +1 -0
  14. package/README.md +2 -2
  15. package/Stack/Stack.d.ts +14 -14
  16. package/Stack/Stack.js +1 -0
  17. package/Stack/StackProps.d.ts +53 -53
  18. package/Stack/createStack.d.ts +21 -21
  19. package/Stack/createStack.js +1 -1
  20. package/Stack/index.d.ts +5 -5
  21. package/Stack/index.js +1 -0
  22. package/Stack/stackClasses.d.ts +8 -8
  23. package/ThemeProvider/ThemeProvider.js +1 -0
  24. package/ThemeProvider/index.js +1 -0
  25. package/Unstable_Grid/Grid.d.ts +12 -12
  26. package/Unstable_Grid/Grid.js +1 -0
  27. package/Unstable_Grid/GridProps.d.ts +185 -185
  28. package/Unstable_Grid/createGrid.d.ts +11 -11
  29. package/Unstable_Grid/gridClasses.d.ts +20 -20
  30. package/Unstable_Grid/gridGenerator.d.ts +33 -33
  31. package/Unstable_Grid/index.d.ts +6 -6
  32. package/Unstable_Grid/index.js +1 -0
  33. package/Unstable_Grid/traverseBreakpoints.d.ts +7 -7
  34. package/createBox.js +1 -0
  35. package/createTheme/createSpacing.d.ts +10 -10
  36. package/cssVars/createCssVarsTheme.d.ts +15 -15
  37. package/cssVars/createGetCssVar.d.ts +5 -5
  38. package/cssVars/cssVarsParser.d.ts +64 -64
  39. package/cssVars/getInitColorSchemeScript.d.ts +42 -42
  40. package/cssVars/index.d.ts +5 -5
  41. package/cssVars/index.js +1 -0
  42. package/cssVars/prepareCssVars.d.ts +16 -16
  43. package/cssVars/useCurrentColorScheme.d.ts +53 -53
  44. package/cssVars/useCurrentColorScheme.js +1 -0
  45. package/esm/Box/Box.js +2 -0
  46. package/esm/Box/index.js +2 -0
  47. package/esm/Container/Container.js +2 -0
  48. package/esm/Container/index.js +2 -0
  49. package/esm/GlobalStyles/GlobalStyles.js +2 -0
  50. package/esm/GlobalStyles/index.js +2 -0
  51. package/esm/Stack/Stack.js +2 -0
  52. package/esm/Stack/createStack.js +1 -1
  53. package/esm/Stack/index.js +2 -0
  54. package/esm/ThemeProvider/ThemeProvider.js +2 -0
  55. package/esm/ThemeProvider/index.js +2 -0
  56. package/esm/Unstable_Grid/Grid.js +2 -0
  57. package/esm/Unstable_Grid/index.js +2 -0
  58. package/esm/createBox.js +2 -0
  59. package/esm/cssVars/index.js +2 -0
  60. package/esm/cssVars/useCurrentColorScheme.js +2 -0
  61. package/esm/index.js +2 -0
  62. package/esm/useTheme.js +2 -0
  63. package/esm/useThemeProps/index.js +2 -0
  64. package/esm/useThemeProps/useThemeProps.js +2 -0
  65. package/esm/useThemeWithoutDefault.js +2 -0
  66. package/index.js +2 -1
  67. package/legacy/Box/Box.js +2 -0
  68. package/legacy/Box/index.js +2 -0
  69. package/legacy/Container/Container.js +2 -0
  70. package/legacy/Container/index.js +2 -0
  71. package/legacy/GlobalStyles/GlobalStyles.js +2 -0
  72. package/legacy/GlobalStyles/index.js +2 -0
  73. package/legacy/Stack/Stack.js +2 -0
  74. package/legacy/Stack/createStack.js +1 -1
  75. package/legacy/Stack/index.js +2 -0
  76. package/legacy/ThemeProvider/ThemeProvider.js +2 -0
  77. package/legacy/ThemeProvider/index.js +2 -0
  78. package/legacy/Unstable_Grid/Grid.js +2 -0
  79. package/legacy/Unstable_Grid/index.js +2 -0
  80. package/legacy/createBox.js +2 -0
  81. package/legacy/cssVars/index.js +2 -0
  82. package/legacy/cssVars/useCurrentColorScheme.js +2 -0
  83. package/legacy/index.js +3 -1
  84. package/legacy/useTheme.js +2 -0
  85. package/legacy/useThemeProps/index.js +2 -0
  86. package/legacy/useThemeProps/useThemeProps.js +2 -0
  87. package/legacy/useThemeWithoutDefault.js +2 -0
  88. package/modern/Box/Box.js +2 -0
  89. package/modern/Box/index.js +2 -0
  90. package/modern/Container/Container.js +2 -0
  91. package/modern/Container/index.js +2 -0
  92. package/modern/GlobalStyles/GlobalStyles.js +2 -0
  93. package/modern/GlobalStyles/index.js +2 -0
  94. package/modern/Stack/Stack.js +2 -0
  95. package/modern/Stack/createStack.js +1 -1
  96. package/modern/Stack/index.js +2 -0
  97. package/modern/ThemeProvider/ThemeProvider.js +2 -0
  98. package/modern/ThemeProvider/index.js +2 -0
  99. package/modern/Unstable_Grid/Grid.js +2 -0
  100. package/modern/Unstable_Grid/index.js +2 -0
  101. package/modern/createBox.js +2 -0
  102. package/modern/cssVars/index.js +2 -0
  103. package/modern/cssVars/useCurrentColorScheme.js +2 -0
  104. package/modern/index.js +3 -1
  105. package/modern/useTheme.js +2 -0
  106. package/modern/useThemeProps/index.js +2 -0
  107. package/modern/useThemeProps/useThemeProps.js +2 -0
  108. package/modern/useThemeWithoutDefault.js +2 -0
  109. package/package.json +4 -4
  110. package/useTheme.js +1 -0
  111. package/useThemeProps/index.js +1 -0
  112. package/useThemeProps/useThemeProps.js +1 -0
  113. package/useThemeWithoutDefault.js +1 -0
@@ -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<P = {}, D extends React.ElementType = 'div'> {
38
- props: P & 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: D;
45
- }
46
- export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
47
- component?: React.ElementType;
48
- }> = OverrideProps<StackTypeMap<P, D>, D>;
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<P = {}, D extends React.ElementType = 'div'> {
38
+ props: P & 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: D;
45
+ }
46
+ export type StackProps<D extends React.ElementType = StackTypeMap['defaultComponent'], P = {
47
+ component?: React.ElementType;
48
+ }> = OverrideProps<StackTypeMap<P, D>, D>;
49
+ export interface StackOwnerState {
50
+ direction: StackProps['direction'];
51
+ spacing: StackProps['spacing'];
52
+ useFlexGap: boolean;
53
+ }
@@ -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 {};
@@ -111,7 +111,7 @@ const style = ({
111
111
  };
112
112
  }
113
113
  return {
114
- '& > :not(style) + :not(style)': {
114
+ '& > :not(style) ~ :not(style)': {
115
115
  margin: 0,
116
116
  [`margin${getSideFromDirection(breakpoint ? directionValues[breakpoint] : ownerState.direction)}`]: (0, _spacing.getValue)(transformer, propValue)
117
117
  }
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/index.js CHANGED
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5
  Object.defineProperty(exports, "__esModule", {
@@ -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;
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5
  Object.defineProperty(exports, "__esModule", {
@@ -1,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5
  Object.defineProperty(exports, "__esModule", {
@@ -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,4 +1,5 @@
1
1
  "use strict";
2
+ 'use client';
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
5
  Object.defineProperty(exports, "__esModule", {
@@ -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<P = {}, D extends React.ElementType = 'div'> {
177
- props: P & GridBaseProps & {
178
- sx?: SxProps<Theme>;
179
- } & SystemProps<Theme>;
180
- defaultComponent: D;
181
- }
182
- export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
183
- component?: React.ElementType;
184
- }> = OverrideProps<GridTypeMap<P, D>, D>;
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<P = {}, D extends React.ElementType = 'div'> {
177
+ props: P & GridBaseProps & {
178
+ sx?: SxProps<Theme>;
179
+ } & SystemProps<Theme>;
180
+ defaultComponent: D;
181
+ }
182
+ export type GridProps<D extends React.ElementType = GridTypeMap['defaultComponent'], P = {
183
+ component?: React.ElementType;
184
+ }> = OverrideProps<GridTypeMap<P, D>, D>;
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 {};