@atlaskit/primitives 0.9.0 → 0.9.2

package/report.api.md

@@ -18,7 +18,6 @@
 /// <reference types="react" />
 
 import { ComponentPropsWithoutRef } from 'react';
-import { ComponentPropsWithRef } from 'react';
 import type * as CSS_2 from 'csstype';
 import type { CSSProperties } from 'react';
 import { CSSPropertiesWithMultiValues } from '@emotion/serialize';
@@ -62,6 +61,22 @@ type AllowedBoxStyles = keyof SafeCSSObject;
 // @public (undocumented)
 type AllowedInlineStyles = 'backgroundColor' | 'padding';
 
+// @public (undocumented)
+type As =
+  | 'article'
+  | 'aside'
+  | 'dialog'
+  | 'div'
+  | 'footer'
+  | 'header'
+  | 'li'
+  | 'main'
+  | 'nav'
+  | 'ol'
+  | 'section'
+  | 'span'
+  | 'ul';
+
 // @public (undocumented)
 type BackgroundColor = keyof typeof backgroundColorMap;
 
@@ -182,32 +197,19 @@ type BaseBoxProps<T extends ElementType = 'div'> = Omit<
   BaseBoxPropsFoundation<T>;
 
 // @public (undocumented)
-type BaseBoxPropsFoundation<T extends ElementType> = {
-  as?:
-    | 'article'
-    | 'aside'
-    | 'dialog'
-    | 'div'
-    | 'footer'
-    | 'header'
-    | 'li'
-    | 'main'
-    | 'nav'
-    | 'ol'
-    | 'section'
-    | 'span'
-    | 'ul';
+type BaseBoxPropsFoundation<T extends ElementType = 'div'> = {
+  as?: As;
   className?: string;
   children?: ReactNode;
   backgroundColor?: BackgroundColor;
-  padding?: Padding;
-  paddingBlock?: PaddingBlock;
-  paddingBlockStart?: PaddingBlockStart;
-  paddingBlockEnd?: PaddingBlockEnd;
-  paddingInline?: PaddingInline;
-  paddingInlineStart?: PaddingInlineStart;
-  paddingInlineEnd?: PaddingInlineEnd;
-  ref?: ComponentPropsWithRef<T>['ref'];
+  padding?: Space;
+  paddingBlock?: Space;
+  paddingBlockStart?: Space;
+  paddingBlockEnd?: Space;
+  paddingInline?: Space;
+  paddingInlineStart?: Space;
+  paddingInlineEnd?: Space;
+  ref?: React.ComponentPropsWithRef<T>['ref'];
 };
 
 // @public (undocumented)
@@ -217,7 +219,7 @@ type BasePrimitiveProps = {
 };
 
 // @public (undocumented)
-type BlockSize = keyof typeof dimensionMap;
+type BlockSize = Dimension;
 
 // @public (undocumented)
 type BorderColor = keyof typeof borderColorMap;
@@ -281,7 +283,7 @@ const borderWidthMap: {
 };
 
 // @public (undocumented)
-type Bottom = keyof typeof dimensionMap;
+type Bottom = Dimension;
 
 // @public
 export const Box: BoxComponent;
@@ -311,32 +313,17 @@ const boxTag: unique symbol;
 
 // @public (undocumented)
 type BoxXCSS = {
-  readonly symbol: typeof uniqueSymbol;
-  readonly styles: BoxStyles;
+  readonly [uniqueSymbol]: BoxStyles;
 };
 
-// @public (undocumented)
-type 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';
-
 // @public (undocumented)
 type CSSPseudos = {
   [Pseudo in CSS_2.Pseudos]?: SafeCSSObject;
 };
 
+// @public (undocumented)
+type Dimension = keyof typeof dimensionMap;
+
 // @public
 const dimensionMap: {
   readonly '100%': '100%';
@@ -396,23 +383,6 @@ const flexShrinkMap: {
   readonly '1': 1;
 };
 
-// @public (undocumented)
-type 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';
-
 // @public (undocumented)
 type Grow = 'fill' | 'hug';
 
@@ -420,7 +390,7 @@ type Grow = 'fill' | 'hug';
 type Grow_2 = 'fill' | 'hug';
 
 // @public (undocumented)
-type Height = keyof typeof dimensionMap;
+type Height = Dimension;
 
 // @public
 export const Inline: MemoExoticComponent<
@@ -451,16 +421,16 @@ export interface InlineProps<T extends ElementType = 'div'> {
   children: ReactNode;
   grow?: Grow;
   ref?: React.ComponentPropsWithRef<T>['ref'];
-  rowSpace?: RowGap;
+  rowSpace?: Space;
   separator?: string;
   shouldWrap?: boolean;
-  space?: Gap;
+  space?: Space;
   spread?: Spread;
   testId?: string;
 }
 
 // @public (undocumented)
-type InlineSize = keyof typeof dimensionMap;
+type InlineSize = Dimension;
 
 // @public (undocumented)
 type InlineStyles = SerializedStyles & {
@@ -470,125 +440,6 @@ type InlineStyles = SerializedStyles & {
 // @public (undocumented)
 const inlineTag: unique symbol;
 
-// @public (undocumented)
-type Inset =
-  | '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';
-
-// @public (undocumented)
-type InsetBlock =
-  | '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';
-
-// @public (undocumented)
-type InsetBlockEnd =
-  | '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';
-
-// @public (undocumented)
-type InsetBlockStart =
-  | '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';
-
-// @public (undocumented)
-type InsetInline =
-  | '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';
-
-// @public (undocumented)
-type InsetInlineEnd =
-  | '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';
-
-// @public (undocumented)
-type InsetInlineStart =
-  | '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';
-
 // @public (undocumented)
 type Layer = keyof typeof layerMap;
 
@@ -606,31 +457,31 @@ const layerMap: {
 };
 
 // @public (undocumented)
-type Left = keyof typeof dimensionMap;
+type Left = Dimension;
 
 // @public (undocumented)
-type MaxBlockSize = keyof typeof dimensionMap;
+type MaxBlockSize = Dimension;
 
 // @public (undocumented)
-type MaxHeight = keyof typeof dimensionMap;
+type MaxHeight = Dimension;
 
 // @public (undocumented)
-type MaxInlineSize = keyof typeof dimensionMap;
+type MaxInlineSize = Dimension;
 
 // @public (undocumented)
-type MaxWidth = keyof typeof dimensionMap;
+type MaxWidth = Dimension;
 
 // @public (undocumented)
-type MinBlockSize = keyof typeof dimensionMap;
+type MinBlockSize = Dimension;
 
 // @public (undocumented)
-type MinHeight = keyof typeof dimensionMap;
+type MinHeight = Dimension;
 
 // @public (undocumented)
-type MinInlineSize = keyof typeof dimensionMap;
+type MinInlineSize = Dimension;
 
 // @public (undocumented)
-type MinWidth = keyof typeof dimensionMap;
+type MinWidth = Dimension;
 
 // @public (undocumented)
 type Overflow = keyof typeof overflowMap;
@@ -659,125 +510,6 @@ const overflowMap: {
   readonly hidden: 'hidden';
 };
 
-// @public (undocumented)
-type Padding =
-  | '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';
-
-// @public (undocumented)
-type PaddingBlock =
-  | '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';
-
-// @public (undocumented)
-type PaddingBlockEnd =
-  | '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';
-
-// @public (undocumented)
-type PaddingBlockStart =
-  | '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';
-
-// @public (undocumented)
-type PaddingInline =
-  | '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';
-
-// @public (undocumented)
-type PaddingInlineEnd =
-  | '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';
-
-// @public (undocumented)
-type PaddingInlineStart =
-  | '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';
-
 // @public (undocumented)
 type Position = keyof typeof positionMap;
 
@@ -795,24 +527,7 @@ type PublicBoxPropsBase = {
 };
 
 // @public (undocumented)
-type Right = keyof typeof dimensionMap;
-
-// @public (undocumented)
-type 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';
+type Right = Dimension;
 
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
@@ -837,6 +552,27 @@ const shadowMap: {
   readonly raised: 'var(--ds-shadow-raised)';
 };
 
+// @public (undocumented)
+type Space = keyof typeof spaceMap;
+
+// @public
+const spaceMap: {
+  'space.0': 'var(--ds-space-0)';
+  'space.025': 'var(--ds-space-025)';
+  'space.050': 'var(--ds-space-050)';
+  'space.075': 'var(--ds-space-075)';
+  'space.100': 'var(--ds-space-100)';
+  'space.150': 'var(--ds-space-150)';
+  'space.200': 'var(--ds-space-200)';
+  'space.250': 'var(--ds-space-250)';
+  'space.300': 'var(--ds-space-300)';
+  'space.400': 'var(--ds-space-400)';
+  'space.500': 'var(--ds-space-500)';
+  'space.600': 'var(--ds-space-600)';
+  'space.800': 'var(--ds-space-800)';
+  'space.1000': 'var(--ds-space-1000)';
+};
+
 // @public (undocumented)
 type Spread = 'space-between';
 
@@ -869,7 +605,7 @@ export interface StackProps<T extends ElementType = 'div'> {
   children: ReactNode;
   grow?: Grow_2;
   ref?: React.ComponentPropsWithRef<T>['ref'];
-  space?: Gap;
+  space?: Space;
   spread?: Spread_2;
   testId?: string;
 }
@@ -924,22 +660,22 @@ type TokenisedProps = {
   bottom?: Bottom;
   boxShadow?: Shadow;
   color?: TextColor;
-  columnGap?: ColumnGap;
+  columnGap?: Space;
   display?: Display;
   flex?: Flex;
   flexDirection?: FlexDirection;
   flexGrow?: FlexGrow;
   flexShrink?: FlexShrink;
-  gap?: Gap;
+  gap?: Space;
   height?: Height;
   inlineSize?: InlineSize;
-  inset?: Inset;
-  insetBlock?: InsetBlock;
-  insetBlockEnd?: InsetBlockEnd;
-  insetBlockStart?: InsetBlockStart;
-  insetInline?: InsetInline;
-  insetInlineEnd?: InsetInlineEnd;
-  insetInlineStart?: InsetInlineStart;
+  inset?: Space;
+  insetBlock?: Space;
+  insetBlockEnd?: Space;
+  insetBlockStart?: Space;
+  insetInline?: Space;
+  insetInlineEnd?: Space;
+  insetInlineStart?: Space;
   left?: Left;
   maxBlockSize?: MaxBlockSize;
   maxHeight?: MaxHeight;
@@ -949,34 +685,37 @@ type TokenisedProps = {
   minHeight?: MinHeight;
   minInlineSize?: MinInlineSize;
   minWidth?: MinWidth;
+  outlineColor?: BorderColor;
+  outlineOffset?: Space;
+  outlineWidth?: BorderWidth;
   overflow?: Overflow;
   overflowBlock?: OverflowBlock;
   overflowInline?: OverflowInline;
-  padding?: Padding;
-  paddingBlock?: PaddingBlock;
-  paddingBlockEnd?: PaddingBlockEnd;
-  paddingBlockStart?: PaddingBlockStart;
-  paddingInline?: PaddingInline;
-  paddingInlineEnd?: PaddingInlineEnd;
-  paddingInlineStart?: PaddingInlineStart;
+  padding?: Space;
+  paddingBlock?: Space;
+  paddingBlockEnd?: Space;
+  paddingBlockStart?: Space;
+  paddingInline?: Space;
+  paddingInlineEnd?: Space;
+  paddingInlineStart?: Space;
   position?: Position;
   right?: Right;
-  rowGap?: RowGap;
+  rowGap?: Space;
   top?: Top;
   width?: Width;
   zIndex?: Layer;
 };
 
 // @public (undocumented)
-type Top = keyof typeof dimensionMap;
+type Top = Dimension;
 
 // @public (undocumented)
 const uniqueSymbol: unique symbol;
 
 // @public (undocumented)
-type Width = keyof typeof dimensionMap;
+type Width = Dimension;
 
-// @public (undocumented)
+// @public
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
   style: Primitive extends typeof Box
     ?
@@ -988,8 +727,9 @@ export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
         | ScopedSafeCSSObject<AllowedInlineStyles>[]
     : never,
 ): {
-  readonly symbol: typeof uniqueSymbol;
-  readonly styles: Primitive extends (<T extends ElementType<any> = 'div'>(
+  readonly [uniqueSymbol]: Primitive extends (<
+    T extends ElementType<any> = 'div',
+  >(
     props: BoxProps<T>,
   ) => ReactElement<any, JSXElementConstructor<any> | string> | null) &
     FC<BoxProps<'div'>>

package/responsive/package.json

@@ -6,9 +6,9 @@
   "sideEffects": false,
   "types": "../dist/types/helpers/responsive/index.d.ts",
   "typesVersions": {
-    ">=4.0 <4.5": {
+    ">=4.5 <4.9": {
       "*": [
-        "../dist/types-ts4.0/helpers/responsive/index.d.ts"
+        "../dist/types-ts4.5/helpers/responsive/index.d.ts"
       ]
     }
   }

package/scripts/codegen-file-templates/dimensions.tsx

@@ -8,20 +8,21 @@ export const dimensionMap = {
   'size.600': '96px',
   'size.1000': '192px',
 } as const;
+type Dimension = keyof typeof dimensionMap;
 
-export type Width = keyof typeof dimensionMap;
-export type Height = keyof typeof dimensionMap;
-export type MinWidth = keyof typeof dimensionMap;
-export type MaxWidth = keyof typeof dimensionMap;
-export type MinHeight = keyof typeof dimensionMap;
-export type MaxHeight = keyof typeof dimensionMap;
-export type Top = keyof typeof dimensionMap;
-export type Left = keyof typeof dimensionMap;
-export type Bottom = keyof typeof dimensionMap;
-export type Right = keyof typeof dimensionMap;
-export type BlockSize = keyof typeof dimensionMap;
-export type InlineSize = keyof typeof dimensionMap;
-export type MaxBlockSize = keyof typeof dimensionMap;
-export type MaxInlineSize = keyof typeof dimensionMap;
-export type MinBlockSize = keyof typeof dimensionMap;
-export type MinInlineSize = keyof typeof dimensionMap;
+export type Width = Dimension;
+export type Height = Dimension;
+export type MinWidth = Dimension;
+export type MaxWidth = Dimension;
+export type MinHeight = Dimension;
+export type MaxHeight = Dimension;
+export type Top = Dimension;
+export type Left = Dimension;
+export type Bottom = Dimension;
+export type Right = Dimension;
+export type BlockSize = Dimension;
+export type InlineSize = Dimension;
+export type MaxBlockSize = Dimension;
+export type MaxInlineSize = Dimension;
+export type MinBlockSize = Dimension;
+export type MinInlineSize = Dimension;

package/scripts/codegen-styles.tsx

@@ -29,7 +29,7 @@ const targetPath = join(
   __dirname,
   '../',
   'src',
-  'internal',
+  'xcss',
   'style-maps.partial.tsx',
 );
 
@@ -48,7 +48,7 @@ const sourceFns = [
   // padding*, gap*, inset*
   () =>
     createPartialSignedArtifact(
-      options => options.map(createSpacingStylesFromTemplate).join('\n'),
+      createSpacingStylesFromTemplate,
       'yarn codegen-styles',
       {
         id: 'spacing',