@atlaskit/primitives 0.9.1 → 0.9.2

package/scripts/spacing-codegen-template.tsx

@@ -3,98 +3,31 @@ import parserTypeScript from 'prettier/parser-typescript';
 
 import { spacing as tokens } from '@atlaskit/tokens/tokens-raw';
 
-import { capitalize, constructTokenFunctionCall } from './utils';
-
-const spacingProperties: Record<
-  string,
-  {
-    cssProperties: readonly string[];
-    propNameFormatter?: (propName: string) => string;
-  }
-> = {
-  padding: {
-    cssProperties: [
-      'padding',
-      'paddingBlock',
-      'paddingBlockEnd',
-      'paddingBlockStart',
-      'paddingBottom',
-      'paddingInline',
-      'paddingInlineEnd',
-      'paddingInlineStart',
-      'paddingLeft',
-      'paddingRight',
-      'paddingTop',
-    ],
-  },
-  space: {
-    cssProperties: ['gap', 'rowGap', 'columnGap'],
-  },
-  inset: {
-    cssProperties: [
-      'inset',
-      'insetBlock',
-      'insetBlockEnd',
-      'insetBlockStart',
-      'insetInline',
-      'insetInlineEnd',
-      'insetInlineStart',
-    ],
-  },
-} as const;
+import { constructTokenFunctionCall } from './utils';
 
 const spacingTokenPrefix = 'space.';
-const onlySpaceTokens = tokens.filter(token =>
-  token.name.startsWith(spacingTokenPrefix),
-);
-
-const activeTokens = onlySpaceTokens.map(t => ({
-  name: t.name,
-  fallback: t.attributes.pixelValue!,
-}));
-
-export const createSpacingStylesFromTemplate = (
-  spacingProperty: keyof typeof spacingProperties,
-) => {
-  if (!spacingProperties[spacingProperty]) {
-    throw new Error(`[codegen] Unknown option found "${spacingProperty}"`);
-  }
-
-  const { cssProperties, propNameFormatter } =
-    spacingProperties[spacingProperty]!;
-
-  return prettier.format(
-    `
-  export const ${spacingProperty}Map = {
-    ${activeTokens
-      .sort((a, b) =>
-        a.name.localeCompare(b.name, undefined, { numeric: true }),
+const spaceTokens = tokens
+  .filter(token => token.name.startsWith(spacingTokenPrefix))
+  .map(t => ({
+    name: t.name,
+    fallback: t.attributes.pixelValue!,
+  }));
+
+export const createSpacingStylesFromTemplate = () => {
+  const output = [
+    `export const spaceMap = {\n${spaceTokens
+      .map(
+        ({ name, fallback }) =>
+          `'${name}': ${constructTokenFunctionCall(name, fallback)},`,
       )
-      .map(token => {
-        const propName = propNameFormatter
-          ? propNameFormatter(token.name)
-          : token.name;
-        return `'${propName}': ${constructTokenFunctionCall(
-          token.name,
-          token.fallback,
-        )}`;
-      })}
-    } as const;` +
-      (cssProperties
-        .map(
-          cssProperty =>
-            // TODO: Update to use `keyof` when ERT supports it: https://github.com/atlassian/extract-react-types/issues/149
-            `\nexport type ${capitalize(cssProperty)} = ${activeTokens
-              .map(token => `'${token.name}'`)
-              .join(' | ')}`,
-        )
-        .join('') +
-        '\n'),
-    {
-      singleQuote: true,
-      trailingComma: 'all',
-      parser: 'typescript',
-      plugins: [parserTypeScript],
-    },
-  );
+      .join('\n')}}`,
+    `export type Space = keyof typeof spaceMap;\n`,
+  ].join('\n');
+
+  return prettier.format(output, {
+    singleQuote: true,
+    trailingComma: 'all',
+    parser: 'typescript',
+    plugins: [parserTypeScript],
+  });
 };

package/stack/package.json

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

package/tmp/api-report-tmp.d.ts

@@ -7,7 +7,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';
@@ -51,6 +50,9 @@ 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;
 
@@ -166,19 +168,19 @@ const backgroundColorMap: {
 type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & 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)
@@ -188,7 +190,7 @@ type BasePrimitiveProps = {
 };
 
 // @public (undocumented)
-type BlockSize = keyof typeof dimensionMap;
+type BlockSize = Dimension;
 
 // @public (undocumented)
 type BorderColor = keyof typeof borderColorMap;
@@ -252,7 +254,7 @@ const borderWidthMap: {
 };
 
 // @public (undocumented)
-type Bottom = keyof typeof dimensionMap;
+type Bottom = Dimension;
 
 // @public
 export const Box: BoxComponent;
@@ -276,14 +278,14 @@ type BoxXCSS = {
     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%";
@@ -343,9 +345,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';
 
@@ -353,7 +352,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<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
@@ -366,16 +365,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 & {
@@ -385,27 +384,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;
 
@@ -423,31 +401,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;
@@ -476,27 +454,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;
 
@@ -514,10 +471,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 & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
@@ -537,6 +491,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';
 
@@ -554,7 +529,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;
 }
@@ -609,22 +584,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;
@@ -635,34 +610,34 @@ type TokenisedProps = {
     minInlineSize?: MinInlineSize;
     minWidth?: MinWidth;
     outlineColor?: BorderColor;
-    outlineOffset?: Padding;
+    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
 export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> | ScopedSafeCSSObject<AllowedBoxStyles>[] : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> | ScopedSafeCSSObject<AllowedInlineStyles>[] : never): {

package/constellation/overview/examples.mdx

@@ -1,7 +0,0 @@
----
-title: Overview
-description: Coming soon.
-order: 0
----
-
-*Coming soon.*