UNPKG

2.82 kBTypeScriptView Raw
1import * as React from 'react';
2import { OverridableComponent, OverrideProps } from '@mui/types';
3import { SxProps } from '@mui/system';
4import { Breakpoint, Theme } from '../styles';
5type ResponsiveStyleValue<T> = T | Array<T | null> | {
6 [key in Breakpoint]?: T | null;
7};
8export type GridDirection = 'row' | 'row-reverse' | 'column' | 'column-reverse';
9export type GridSpacing = number | string;
10export type GridWrap = 'nowrap' | 'wrap' | 'wrap-reverse';
11export type GridSize = 'auto' | 'grow' | number;
12export interface GridBaseProps {
13 /**
14 * The content of the component.
15 */
16 children?: React.ReactNode;
17 /**
18 * The number of columns.
19 * @default 12
20 */
21 columns?: ResponsiveStyleValue<number>;
22 /**
23 * Defines the horizontal space between the type `item` components.
24 * It overrides the value of the `spacing` prop.
25 */
26 columnSpacing?: ResponsiveStyleValue<GridSpacing>;
27 /**
28 * If `true`, the component will have the flex *container* behavior.
29 * You should be wrapping *items* with a *container*.
30 * @default false
31 */
32 container?: boolean;
33 /**
34 * Defines the `flex-direction` style property.
35 * It is applied for all screen sizes.
36 * @default 'row'
37 */
38 direction?: ResponsiveStyleValue<GridDirection>;
39 /**
40 * Defines the offset of the grid.
41 */
42 offset?: ResponsiveStyleValue<number> | undefined;
43 /**
44 * Defines the vertical space between the type `item` components.
45 * It overrides the value of the `spacing` prop.
46 */
47 rowSpacing?: ResponsiveStyleValue<GridSpacing>;
48 /**
49 * Defines the space between the type `item` components.
50 * It can only be used on a type `container` component.
51 * @default 0
52 */
53 spacing?: ResponsiveStyleValue<GridSpacing> | undefined;
54 /**
55 * Defines the column size of the grid.
56 */
57 size?: ResponsiveStyleValue<GridSize> | undefined;
58 /**
59 * Defines the `flex-wrap` style property.
60 * It's applied for all screen sizes.
61 * @default 'wrap'
62 */
63 wrap?: GridWrap;
64}
65export interface GridTypeMap<AdditionalProps = {}, DefaultComponent extends React.ElementType = 'div'> {
66 props: AdditionalProps & GridBaseProps & {
67 sx?: SxProps<Theme>;
68 };
69 defaultComponent: DefaultComponent;
70}
71export type GridProps<RootComponent extends React.ElementType = GridTypeMap['defaultComponent'], AdditionalProps = {
72 component?: React.ElementType;
73}> = OverrideProps<GridTypeMap<AdditionalProps, RootComponent>, RootComponent>;
74/**
75 *
76 * Demos:
77 *
78 * - [Grid version 2](https://mui.com/material-ui/react-grid2/)
79 *
80 * API:
81 *
82 * - [PigmentGrid API](https://mui.com/material-ui/api/pigment-grid/)
83 */
84declare const PigmentGrid: OverridableComponent<GridTypeMap>;
85export default PigmentGrid;