@atlaskit/primitives 1.0.0 → 1.0.2

package/report.api.md

@@ -20,7 +20,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
-import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
+import type { CSSPropertiesWithMultiValues } from '@emotion/serialize';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
@@ -29,7 +29,8 @@ import { MemoExoticComponent } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
-import { SerializedStyles } from '@emotion/serialize';
+import type { SerializedStyles } from '@emotion/serialize';
+import { SerializedStyles as SerializedStyles_2 } from '@emotion/react';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start' | 'stretch';
@@ -43,6 +44,29 @@ type AlignInline = 'center' | 'end' | 'start';
 // @public (undocumented)
 type AlignInline_2 = 'center' | 'end' | 'start';
 
+// @public (undocumented)
+type AlignItems = keyof typeof alignItemsMap;
+
+// @public (undocumented)
+type AlignItems_2 = keyof typeof alignItemsMap_2;
+
+// @public (undocumented)
+const alignItemsMap: {
+  readonly start: SerializedStyles_2;
+  readonly center: SerializedStyles_2;
+  readonly baseline: SerializedStyles_2;
+  readonly end: SerializedStyles_2;
+  readonly stretch: SerializedStyles_2;
+};
+
+// @public (undocumented)
+const alignItemsMap_2: {
+  readonly start: SerializedStyles_2;
+  readonly center: SerializedStyles_2;
+  readonly baseline: SerializedStyles_2;
+  readonly end: SerializedStyles_2;
+};
+
 // @public (undocumented)
 type AllowedBoxStyles = keyof SafeCSSObject;
 
@@ -67,7 +91,10 @@ type As =
 type AutoComplete<T extends string> = Omit<string, T> | T;
 
 // @public (undocumented)
-type BackgroundColor = keyof typeof backgroundColorMap;
+type AutoFlow = keyof typeof gridAutoFlowMap;
+
+// @public (undocumented)
+export type BackgroundColor = keyof typeof backgroundColorMap;
 
 // @public (undocumented)
 const backgroundColorMap: {
@@ -209,10 +236,11 @@ type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
 type BasePrimitiveProps = {
   testId?: string;
   style?: CSSProperties;
+  xcss?: BoxXCSS | BoxXCSS[];
 };
 
 // @public (undocumented)
-type BorderColor = keyof typeof borderColorMap;
+export type BorderColor = keyof typeof borderColorMap;
 
 // @public
 const borderColorMap: {
@@ -242,7 +270,7 @@ const borderColorMap: {
 };
 
 // @public (undocumented)
-type BorderRadius = keyof typeof borderRadiusMap;
+export type BorderRadius = keyof typeof borderRadiusMap;
 
 // @public (undocumented)
 const borderRadiusMap: {
@@ -256,7 +284,7 @@ const borderRadiusMap: {
 };
 
 // @public (undocumented)
-type BorderWidth = keyof typeof borderWidthMap;
+export type BorderWidth = keyof typeof borderWidthMap;
 
 // @public
 const borderWidthMap: {
@@ -281,8 +309,7 @@ type BoxComponent<T extends ElementType = 'div'> = (<
 export type BoxProps<T extends ElementType = 'div'> = Omit<
   BaseBoxProps<T>,
   'className'
-> &
-  PublicBoxPropsBase;
+>;
 
 // @public (undocumented)
 type BoxStyles = SerializedStyles & {
@@ -293,12 +320,12 @@ type BoxStyles = SerializedStyles & {
 const boxTag: unique symbol;
 
 // @public (undocumented)
-type BoxXCSS = {
-  readonly [uniqueSymbol]: BoxStyles;
-};
-
-// @public (undocumented)
-type BoxXCSSArray = Array<BoxXCSS | BoxXCSSArray | false | undefined>;
+type BoxXCSS =
+  | false
+  | undefined
+  | {
+      readonly [uniqueSymbol]: BoxStyles;
+    };
 
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
@@ -314,7 +341,7 @@ type CSSPseudos = {
 };
 
 // @public (undocumented)
-type Dimension = keyof typeof dimensionMap;
+export type Dimension = keyof typeof dimensionMap;
 
 // @public
 const dimensionMap: {
@@ -328,6 +355,244 @@ const dimensionMap: {
   readonly 'size.1000': '12rem';
 };
 
+// @public (undocumented)
+type Direction = keyof typeof flexDirectionMap;
+
+// @public
+export const Flex: MemoExoticComponent<
+  ForwardRefExoticComponent<
+    Pick<
+      {
+        as?: 'div' | 'li' | 'ol' | 'span' | 'ul' | undefined;
+        justifyContent?:
+          | 'center'
+          | 'end'
+          | 'space-around'
+          | 'space-between'
+          | 'space-evenly'
+          | 'start'
+          | 'stretch'
+          | undefined;
+        alignItems?:
+          | 'baseline'
+          | 'center'
+          | 'end'
+          | 'start'
+          | 'stretch'
+          | undefined;
+        columnGap?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        gap?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        rowGap?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        direction?: 'column' | 'row' | undefined;
+        wrap?: 'nowrap' | 'wrap' | undefined;
+        children: ReactNode;
+        ref?: any;
+      } & BasePrimitiveProps,
+      | 'alignItems'
+      | 'as'
+      | 'children'
+      | 'columnGap'
+      | 'direction'
+      | 'gap'
+      | 'justifyContent'
+      | 'rowGap'
+      | 'wrap'
+      | keyof BasePrimitiveProps
+    > &
+      RefAttributes<any>
+  >
+>;
+
+// @public (undocumented)
+const flexDirectionMap: {
+  readonly column: SerializedStyles_2;
+  readonly row: SerializedStyles_2;
+};
+
+// @public (undocumented)
+export type FlexProps<T extends ElementType = 'div'> = {
+  as?: 'div' | 'li' | 'ol' | 'span' | 'ul';
+  justifyContent?: JustifyContent;
+  alignItems?: AlignItems;
+  columnGap?: Space;
+  gap?: Space;
+  rowGap?: Space;
+  direction?: Direction;
+  wrap?: Wrap;
+  children: ReactNode;
+  ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+
+// @public (undocumented)
+const flexWrapMap: {
+  readonly wrap: SerializedStyles_2;
+  readonly nowrap: SerializedStyles_2;
+};
+
+// @public
+export const Grid: MemoExoticComponent<
+  ForwardRefExoticComponent<
+    Pick<
+      {
+        as?: 'div' | 'ol' | 'span' | 'ul' | undefined;
+        justifyContent?:
+          | 'center'
+          | 'end'
+          | 'space-around'
+          | 'space-between'
+          | 'space-evenly'
+          | 'start'
+          | 'stretch'
+          | undefined;
+        alignItems?: 'baseline' | 'center' | 'end' | 'start' | undefined;
+        columnGap?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        gap?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        rowGap?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        autoFlow?:
+          | 'column dense'
+          | 'column'
+          | 'dense'
+          | 'row dense'
+          | 'row'
+          | undefined;
+        templateRows?: string | undefined;
+        templateColumns?: string | undefined;
+        templateAreas?: string[] | undefined;
+        children: ReactNode;
+        ref?: any;
+      } & BasePrimitiveProps,
+      | 'alignItems'
+      | 'as'
+      | 'autoFlow'
+      | 'children'
+      | 'columnGap'
+      | 'gap'
+      | 'justifyContent'
+      | 'rowGap'
+      | 'templateAreas'
+      | 'templateColumns'
+      | 'templateRows'
+      | keyof BasePrimitiveProps
+    > &
+      RefAttributes<any>
+  >
+>;
+
+// @public (undocumented)
+const gridAutoFlowMap: {
+  readonly row: SerializedStyles_2;
+  readonly column: SerializedStyles_2;
+  readonly dense: SerializedStyles_2;
+  readonly 'row dense': SerializedStyles_2;
+  readonly 'column dense': SerializedStyles_2;
+};
+
+// @public (undocumented)
+export type GridProps<T extends ElementType = 'div'> = {
+  as?: 'div' | 'ol' | 'span' | 'ul';
+  justifyContent?: JustifyContent_2;
+  alignItems?: AlignItems_2;
+  columnGap?: Space;
+  gap?: Space;
+  rowGap?: Space;
+  autoFlow?: AutoFlow;
+  templateRows?: string;
+  templateColumns?: string;
+  templateAreas?: string[];
+  children: ReactNode;
+  ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
+
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
 
@@ -338,7 +603,49 @@ type Grow_2 = 'fill' | 'hug';
 export const Inline: MemoExoticComponent<
   ForwardRefExoticComponent<
     Pick<
-      InlineProps<ElementType<any>>,
+      {
+        as?: 'div' | 'li' | 'ol' | 'span' | 'ul' | undefined;
+        alignBlock?: AlignBlock | undefined;
+        alignInline?: AlignInline | undefined;
+        shouldWrap?: boolean | undefined;
+        spread?: 'space-between' | undefined;
+        grow?: Grow | undefined;
+        space?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        rowSpace?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        separator?: string | undefined;
+        children: ReactNode;
+        ref?: any;
+      } & BasePrimitiveProps,
       | 'alignBlock'
       | 'alignInline'
       | 'as'
@@ -349,45 +656,57 @@ export const Inline: MemoExoticComponent<
       | 'shouldWrap'
       | 'space'
       | 'spread'
-      | 'testId'
-      | 'xcss'
+      | keyof BasePrimitiveProps
     > &
       RefAttributes<any>
   >
 >;
 
 // @public (undocumented)
-export interface InlineProps<T extends ElementType = 'div'> {
+export type InlineProps<T extends ElementType = 'div'> = {
+  as?: 'div' | 'li' | 'ol' | 'span' | 'ul';
   alignBlock?: AlignBlock;
   alignInline?: AlignInline;
-  as?: 'div' | 'li' | 'ol' | 'span' | 'ul';
-  children: ReactNode;
+  shouldWrap?: boolean;
+  spread?: Spread;
   grow?: Grow;
-  ref?: React.ComponentPropsWithRef<T>['ref'];
+  space?: Space;
   rowSpace?: Space;
   separator?: string;
-  shouldWrap?: boolean;
-  space?: Space;
-  spread?: Spread;
-  testId?: string;
-  xcss?: Array<InlineXCSS | false | undefined> | InlineXCSS;
-}
+  children: ReactNode;
+  ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
 
 // @public (undocumented)
-type InlineStyles = SerializedStyles & {
-  [inlineTag]: true;
-};
+type JustifyContent = keyof typeof justifyContentMap;
 
 // @public (undocumented)
-const inlineTag: unique symbol;
+type JustifyContent_2 = keyof typeof justifyContentMap_2;
 
 // @public (undocumented)
-type InlineXCSS = {
-  readonly [uniqueSymbol]: InlineStyles;
+const justifyContentMap: {
+  readonly start: SerializedStyles_2;
+  readonly center: SerializedStyles_2;
+  readonly end: SerializedStyles_2;
+  readonly 'space-between': SerializedStyles_2;
+  readonly 'space-around': SerializedStyles_2;
+  readonly 'space-evenly': SerializedStyles_2;
+  readonly stretch: SerializedStyles_2;
 };
 
 // @public (undocumented)
-type Layer = keyof typeof layerMap;
+const justifyContentMap_2: {
+  readonly start: SerializedStyles_2;
+  readonly center: SerializedStyles_2;
+  readonly end: SerializedStyles_2;
+  readonly 'space-between': SerializedStyles_2;
+  readonly 'space-around': SerializedStyles_2;
+  readonly 'space-evenly': SerializedStyles_2;
+  readonly stretch: SerializedStyles_2;
+};
+
+// @public (undocumented)
+export type Layer = keyof typeof layerMap;
 
 // @public
 const layerMap: {
@@ -403,7 +722,7 @@ const layerMap: {
 };
 
 // @public
-const media: {
+export const media: {
   readonly above: {
     readonly xxs: '@media all';
     readonly xs: '@media (min-width: 30rem)';
@@ -435,11 +754,6 @@ export type PressableProps = Omit<
   isDisabled?: boolean;
 };
 
-// @public (undocumented)
-type PublicBoxPropsBase = {
-  xcss?: BoxXCSS | BoxXCSSArray;
-};
-
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   TokenisedProps &
@@ -453,7 +767,7 @@ type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<
 >;
 
 // @public (undocumented)
-type Shadow = keyof typeof shadowMap;
+export type Shadow = keyof typeof shadowMap;
 
 // @public (undocumented)
 const shadowMap: {
@@ -465,7 +779,7 @@ const shadowMap: {
 };
 
 // @public (undocumented)
-type Space = keyof typeof spaceMap;
+export type Space = keyof typeof spaceMap;
 
 // @public
 const spaceMap: {
@@ -485,6 +799,14 @@ const spaceMap: {
   'space.1000': 'var(--ds-space-1000)';
 };
 
+// @public (undocumented)
+type SpaceStyles = SerializedStyles & {
+  [spaceTag]: true;
+};
+
+// @public (undocumented)
+const spaceTag: unique symbol;
+
 // @public (undocumented)
 type Spacing =
   | 'columnGap'
@@ -527,7 +849,31 @@ type Spread_2 = 'space-between';
 export const Stack: MemoExoticComponent<
   ForwardRefExoticComponent<
     Pick<
-      StackProps<ElementType<any>>,
+      {
+        as?: 'div' | 'ol' | 'span' | 'ul' | undefined;
+        alignBlock?: AlignBlock_2 | undefined;
+        alignInline?: AlignInline_2 | undefined;
+        spread?: 'space-between' | undefined;
+        grow?: Grow_2 | undefined;
+        space?:
+          | 'space.0'
+          | 'space.025'
+          | 'space.050'
+          | 'space.075'
+          | 'space.100'
+          | 'space.1000'
+          | 'space.150'
+          | 'space.200'
+          | 'space.250'
+          | 'space.300'
+          | 'space.400'
+          | 'space.500'
+          | 'space.600'
+          | 'space.800'
+          | undefined;
+        children: ReactNode;
+        ref?: any;
+      } & BasePrimitiveProps,
       | 'alignBlock'
       | 'alignInline'
       | 'as'
@@ -535,24 +881,23 @@ export const Stack: MemoExoticComponent<
       | 'grow'
       | 'space'
       | 'spread'
-      | 'testId'
+      | keyof BasePrimitiveProps
     > &
       RefAttributes<any>
   >
 >;
 
 // @public (undocumented)
-export interface StackProps<T extends ElementType = 'div'> {
+export type StackProps<T extends ElementType = 'div'> = {
+  as?: 'div' | 'ol' | 'span' | 'ul';
   alignBlock?: AlignBlock_2;
   alignInline?: AlignInline_2;
-  as?: 'div' | 'ol' | 'span' | 'ul';
-  children: ReactNode;
+  spread?: Spread_2;
   grow?: Grow_2;
-  ref?: React.ComponentPropsWithRef<T>['ref'];
   space?: Space;
-  spread?: Spread_2;
-  testId?: string;
-}
+  children: ReactNode;
+  ref?: React.ComponentPropsWithRef<T>['ref'];
+} & BasePrimitiveProps;
 
 // @public (undocumented)
 type TextColor = keyof typeof textColorMap;
@@ -711,13 +1056,16 @@ export const UNSAFE_media: {
   };
 };
 
+// @public (undocumented)
+type Wrap = keyof typeof flexWrapMap;
+
 // @public
-export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
+export function xcss<Primitive extends typeof Box | void = typeof Box>(
   style: Primitive extends typeof Box
     ?
         | ScopedSafeCSSObject<AllowedBoxStyles>
         | ScopedSafeCSSObject<AllowedBoxStyles>[]
-    : Primitive extends typeof Inline
+    : Primitive extends void
     ? ScopedSafeCSSObject<Spacing> | ScopedSafeCSSObject<Spacing>[]
     : never,
 ): {
@@ -728,27 +1076,8 @@ export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
   ) => ReactElement<any, JSXElementConstructor<any> | string> | null) &
     FC<BoxProps<'div'>>
     ? BoxStyles
-    : Primitive extends MemoExoticComponent<
-        ForwardRefExoticComponent<
-          Pick<
-            InlineProps<ElementType<any>>,
-            | 'alignBlock'
-            | 'alignInline'
-            | 'as'
-            | 'children'
-            | 'grow'
-            | 'rowSpace'
-            | 'separator'
-            | 'shouldWrap'
-            | 'space'
-            | 'spread'
-            | 'testId'
-            | 'xcss'
-          > &
-            RefAttributes<any>
-        >
-      >
-    ? InlineStyles
+    : Primitive extends void
+    ? SpaceStyles
     : never;
 };