@atlaskit/primitives
Version:
Primitives are token-backed low-level building blocks.
196 lines (195 loc) • 7.4 kB
TypeScript
/** @jsx jsx */
import { ElementType, ReactNode } from 'react';
import { type Space } from '../xcss/style-maps.partial';
import type { BasePrimitiveProps } from './types';
export type GridProps<T extends ElementType = 'div'> = {
/**
* The DOM element to render as the Flex. Defaults to `div`.
*/
as?: 'div' | 'span' | 'ul' | 'ol';
/**
* Used to align children along the inline axis.
*/
justifyContent?: JustifyContent;
/**
* Used to align the grid along the inline axis.
*/
justifyItems?: JustifyItems;
/**
* Used to align children along the block axis.
*/
alignItems?: AlignItems;
/**
* Used to align the grid along the block axis.
*/
alignContent?: AlignContent;
/**
* Represents the space between each column.
*/
columnGap?: Space;
/**
* Represents the space between each child across both axes.
*/
gap?: Space;
/**
* Represents the space between each row.
*/
rowGap?: Space;
/**
* Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
*/
autoFlow?: AutoFlow;
/**
* CSS `grid-template-rows`.
*/
templateRows?: string;
/**
* CSS `grid-template-columns`.
*/
templateColumns?: string;
/**
* CSS `grid-template-areas`.
*
* Each item in the passed array is a grid row.
*/
templateAreas?: string[];
/**
* Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
*/
children: ReactNode;
/**
* HTML id attrubute
*/
id?: string;
/**
* Forwarded ref element
*/
ref?: React.ComponentPropsWithRef<T>['ref'];
} & BasePrimitiveProps;
type JustifyContent = keyof typeof justifyContentMap;
type JustifyItems = keyof typeof justifyItemsMap;
type AlignItems = keyof typeof alignItemsMap;
type AlignContent = keyof typeof alignContentMap;
declare const justifyContentMap: {
readonly start: import("@emotion/react").SerializedStyles;
readonly center: import("@emotion/react").SerializedStyles;
readonly end: import("@emotion/react").SerializedStyles;
readonly 'space-between': import("@emotion/react").SerializedStyles;
readonly 'space-around': import("@emotion/react").SerializedStyles;
readonly 'space-evenly': import("@emotion/react").SerializedStyles;
readonly stretch: import("@emotion/react").SerializedStyles;
};
declare const justifyItemsMap: {
readonly start: import("@emotion/react").SerializedStyles;
readonly center: import("@emotion/react").SerializedStyles;
readonly end: import("@emotion/react").SerializedStyles;
readonly stretch: import("@emotion/react").SerializedStyles;
};
declare const alignContentMap: {
readonly start: import("@emotion/react").SerializedStyles;
readonly center: import("@emotion/react").SerializedStyles;
readonly end: import("@emotion/react").SerializedStyles;
readonly 'space-between': import("@emotion/react").SerializedStyles;
readonly 'space-around': import("@emotion/react").SerializedStyles;
readonly 'space-evenly': import("@emotion/react").SerializedStyles;
readonly stretch: import("@emotion/react").SerializedStyles;
};
declare const alignItemsMap: {
readonly start: import("@emotion/react").SerializedStyles;
readonly center: import("@emotion/react").SerializedStyles;
readonly baseline: import("@emotion/react").SerializedStyles;
readonly end: import("@emotion/react").SerializedStyles;
};
type AutoFlow = keyof typeof gridAutoFlowMap;
declare const gridAutoFlowMap: {
readonly row: import("@emotion/react").SerializedStyles;
readonly column: import("@emotion/react").SerializedStyles;
readonly dense: import("@emotion/react").SerializedStyles;
readonly 'row dense': import("@emotion/react").SerializedStyles;
readonly 'column dense': import("@emotion/react").SerializedStyles;
};
/**
* __Grid__
*
* `Grid` is a primitive component that implements the CSS Grid API.
*
* - [Examples](https://atlassian.design/components/primitives/grid/examples)
* - [Code](https://atlassian.design/components/primitives/grid/code)
*
* @example
* ```tsx
* import { Grid, Box } from '@atlaskit/primitives'
*
* const Component = () => (
* <Grid gap="space.100" gridColumns="1fr 1fr">
* <Box padding="space.100" backgroundColor="neutral"></Box>
* <Box padding="space.100" backgroundColor="neutral"></Box>
* </Grid>
* )
* ```
*/
declare const Grid: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
/**
* The DOM element to render as the Flex. Defaults to `div`.
*/
as?: "div" | "ol" | "span" | "ul" | undefined;
/**
* Used to align children along the inline axis.
*/
justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
/**
* Used to align the grid along the inline axis.
*/
justifyItems?: "stretch" | "center" | "end" | "start" | undefined;
/**
* Used to align children along the block axis.
*/
alignItems?: "center" | "end" | "start" | "baseline" | undefined;
/**
* Used to align the grid along the block axis.
*/
alignContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
/**
* Represents the space between each column.
*/
columnGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
/**
* Represents the space between each child across both axes.
*/
gap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
/**
* Represents the space between each row.
*/
rowGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
/**
* Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
*/
autoFlow?: "column" | "row" | "dense" | "row dense" | "column dense" | undefined;
/**
* CSS `grid-template-rows`.
*/
templateRows?: string | undefined;
/**
* CSS `grid-template-columns`.
*/
templateColumns?: string | undefined;
/**
* CSS `grid-template-areas`.
*
* Each item in the passed array is a grid row.
*/
templateAreas?: string[] | undefined;
/**
* Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
*/
children: ReactNode;
/**
* HTML id attrubute
*/
id?: string | undefined;
/**
* Forwarded ref element
*/
ref?: any;
} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignContent" | "alignItems" | "justifyContent" | "justifyItems" | "children" | "as" | "id" | keyof BasePrimitiveProps | "autoFlow" | "templateAreas" | "templateRows" | "templateColumns"> & import("react").RefAttributes<any>>>;
export default Grid;