@atlaskit/primitives 0.5.0 → 0.7.0

package/dist/esm/internal/xcss.js

@@ -2,7 +2,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _typeof from "@babel/runtime/helpers/typeof";
 /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { css as cssEmotion } from '@emotion/react';
-import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, textColorMap } from './style-maps';
+import warnOnce from '@atlaskit/ds-lib/warn-once';
+import { backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, paddingMap, shadowMap, textColorMap } from './style-maps.partial';
 var tokensMap = {
   backgroundColor: backgroundColorMap,
   borderColor: borderColorMap,
@@ -21,9 +22,13 @@ var tokensMap = {
   paddingInline: paddingMap,
   paddingInlineEnd: paddingMap,
   paddingInlineStart: paddingMap,
+  boxShadow: shadowMap,
   width: dimensionMap
 };
 var uniqueSymbol = Symbol('Internal symbol to verify xcss function is called safely');
+var isSafeEnvToThrow = function isSafeEnvToThrow() {
+  return (typeof process === "undefined" ? "undefined" : _typeof(process)) === 'object' && _typeof(process.env) === 'object' && process.env.NODE_ENV !== 'production';
+};
 
 /**
  * Only exposed for testing.
@@ -41,11 +46,10 @@ export var transformStyles = function transformStyles(styleObj) {
 
   // Modifies styleObj in place. Be careful.
   Object.entries(styleObj).forEach(function (_ref) {
-    var _process, _process$env;
     var _ref2 = _slicedToArray(_ref, 2),
       key = _ref2[0],
       value = _ref2[1];
-    if (((_process = process) === null || _process === void 0 ? void 0 : (_process$env = _process.env) === null || _process$env === void 0 ? void 0 : _process$env.NODE_ENV) === 'development') {
+    if (isSafeEnvToThrow()) {
       // We don't support `.class`, `[data-testid]`, `> *`, `#some-id`
       if (/(\.|\s|&+|\*\>|#|\[.*\])/.test(key)) {
         throw new Error("Styles not supported for key '".concat(key, "'."));
@@ -69,7 +73,11 @@ export var transformStyles = function transformStyles(styleObj) {
     }
     var tokenValue = tokensMap[key][value];
     if (!tokenValue) {
-      throw new Error('Invalid Token');
+      var message = "Invalid token alias: ".concat(value);
+      warnOnce(message);
+      if (isSafeEnvToThrow()) {
+        throw new Error(message);
+      }
     }
     styleObj[key] = tokenValue;
   });
@@ -85,12 +93,14 @@ var baseXcss = function baseXcss(style) {
 
 /**
  * @internal used in primitives
- * @returns
+ * @returns a collection of styles that can be applied to the respective primitive
  */
+
 export var parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
-    // @ts-expect-error FIXME
-    return args.map(parseXcss);
+    return args.map(function (x) {
+      return x && parseXcss(x);
+    }).filter(Boolean);
   }
   var symbol = args.symbol,
     styles = args.styles;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "0.5.0",
+	"version": "0.7.0",
 	"sideEffects": false
 }

package/dist/types/components/box.d.ts

@@ -1,9 +1,8 @@
 /** @jsx jsx */
 import { ElementType, FC, ReactElement } from 'react';
-import { BaseBoxProps } from './internal/base-box.partial';
-import type { BoxResponsiveProp } from './internal/types';
+import { BaseBoxProps } from './internal/base-box';
 import type { PublicBoxPropsBase } from './types';
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className' | BoxResponsiveProp> & PublicBoxPropsBase;
+export declare type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'className'> & PublicBoxPropsBase;
 declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<T>>;
 /**
  * __Box__

package/dist/types/components/inline.partial.d.ts

@@ -28,12 +28,12 @@ export interface InlineProps<T extends ElementType = 'div'> {
     /**
      * Represents the space between each child.
      */
-    space?: Space;
+    space?: Gap;
     /**
      * Represents the space between rows when content wraps.
      * Used to override the `space` value in between rows.
      */
-    rowSpace?: RowSpace;
+    rowSpace?: RowGap;
     /**
      * Renders a separator string between each child.
      */
@@ -57,46 +57,32 @@ export declare type Spread = 'space-between';
 export declare type Grow = 'hug' | 'fill';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::44cacef18982a4b0e43102900c42bdcf>>
+ * @codegen <<SignedSource::fb7587b114753ed19425e2b07b5deb0d>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space", "rowSpace"]
+ * @codegenParams ["inlineSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-declare const spaceMap: {
-    readonly '0': import("@emotion/react").SerializedStyles;
-    readonly '025': import("@emotion/react").SerializedStyles;
-    readonly '050': import("@emotion/react").SerializedStyles;
-    readonly '075': import("@emotion/react").SerializedStyles;
-    readonly '100': import("@emotion/react").SerializedStyles;
-    readonly '150': import("@emotion/react").SerializedStyles;
-    readonly '200': import("@emotion/react").SerializedStyles;
-    readonly '250': import("@emotion/react").SerializedStyles;
-    readonly '300': import("@emotion/react").SerializedStyles;
-    readonly '400': import("@emotion/react").SerializedStyles;
-    readonly '500': import("@emotion/react").SerializedStyles;
-    readonly '600': import("@emotion/react").SerializedStyles;
-    readonly '800': import("@emotion/react").SerializedStyles;
-    readonly '1000': import("@emotion/react").SerializedStyles;
+declare const inlineSpaceMap: {
+    [k: string]: {
+        readonly '0': import("@emotion/react").SerializedStyles;
+        readonly '025': import("@emotion/react").SerializedStyles;
+        readonly '050': import("@emotion/react").SerializedStyles;
+        readonly '075': import("@emotion/react").SerializedStyles;
+        readonly '100': import("@emotion/react").SerializedStyles;
+        readonly '150': import("@emotion/react").SerializedStyles;
+        readonly '200': import("@emotion/react").SerializedStyles;
+        readonly '250': import("@emotion/react").SerializedStyles;
+        readonly '300': import("@emotion/react").SerializedStyles;
+        readonly '400': import("@emotion/react").SerializedStyles;
+        readonly '500': import("@emotion/react").SerializedStyles;
+        readonly '600': import("@emotion/react").SerializedStyles;
+        readonly '800': import("@emotion/react").SerializedStyles;
+        readonly '1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Space = keyof typeof spaceMap;
-declare const rowSpaceMap: {
-    readonly '0': import("@emotion/react").SerializedStyles;
-    readonly '025': import("@emotion/react").SerializedStyles;
-    readonly '050': import("@emotion/react").SerializedStyles;
-    readonly '075': import("@emotion/react").SerializedStyles;
-    readonly '100': import("@emotion/react").SerializedStyles;
-    readonly '150': import("@emotion/react").SerializedStyles;
-    readonly '200': import("@emotion/react").SerializedStyles;
-    readonly '250': import("@emotion/react").SerializedStyles;
-    readonly '300': import("@emotion/react").SerializedStyles;
-    readonly '400': import("@emotion/react").SerializedStyles;
-    readonly '500': import("@emotion/react").SerializedStyles;
-    readonly '600': import("@emotion/react").SerializedStyles;
-    readonly '800': import("@emotion/react").SerializedStyles;
-    readonly '1000': import("@emotion/react").SerializedStyles;
-};
-export declare type RowSpace = keyof typeof rowSpaceMap;
+export declare type Gap = keyof typeof inlineSpaceMap.gap;
+export declare type RowGap = keyof typeof inlineSpaceMap.rowGap;
 /**
  * __Inline__
  *

package/dist/types/components/internal/base-box.d.ts

@@ -0,0 +1,83 @@
+/** @jsx jsx */
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import { BackgroundColor, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from '../../internal/style-maps.partial';
+import type { BasePrimitiveProps } from '../types';
+export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+declare type BaseBoxPropsFoundation<T extends ElementType> = {
+    /**
+     * The DOM element to render as the Box. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'li';
+    /**
+     * The HTML className attribute.
+     *
+     * Before using this prop please ensure:
+     * - The styles cannot otherwise be achieved through `Box` directly.
+     * - The use case needs custom styles that cannot be designed or implemented differently
+     *
+     * Ensure you're using the `@atlaskit/eslint-plugin-design-system` with this prop to prevent unbounded usage.
+     *
+     * @see `@atlaskit/eslint-plugin-design-system`
+     */
+    className?: string;
+    /**
+     * Elements to be rendered inside the Box.
+     */
+    children?: ReactNode;
+    /**
+     * Token representing background color with a built-in fallback value.
+     */
+    backgroundColor?: BackgroundColor;
+    /**
+     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+     *
+     * @see paddingBlock
+     * @see paddingInline
+     */
+    padding?: Padding;
+    /**
+     * Tokens representing CSS shorthand `paddingBlock`.
+     *
+     * @see paddingBlockStart
+     * @see paddingBlockEnd
+     */
+    paddingBlock?: PaddingBlock;
+    /**
+     * Tokens representing CSS `paddingBlockStart`.
+     */
+    paddingBlockStart?: PaddingBlockStart;
+    /**
+     * Tokens representing CSS `paddingBlockEnd`.
+     */
+    paddingBlockEnd?: PaddingBlockEnd;
+    /**
+     * Tokens representing CSS shorthand `paddingInline`.
+     *
+     * @see paddingInlineStart
+     * @see paddingInlineEnd
+     */
+    paddingInline?: PaddingInline;
+    /**
+     * Tokens representing CSS `paddingInlineStart`.
+     */
+    paddingInlineStart?: PaddingInlineStart;
+    /**
+     * Tokens representing CSS `paddingInlineEnd`.
+     */
+    paddingInlineEnd?: PaddingInlineEnd;
+    /**
+     * Forwarded ref element
+     */
+    ref?: ComponentPropsWithRef<T>['ref'];
+};
+export declare type BaseBoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BaseBoxProps<T>) => ReactElement | null) & FC<BaseBoxProps<T>>;
+/**
+ * __Box__
+ *
+ * Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
+ *
+ * @internal
+ */
+export declare const BaseBox: BaseBoxComponent;
+export default BaseBox;

package/dist/types/components/stack.partial.d.ts

@@ -24,7 +24,7 @@ export interface StackProps<T extends ElementType = 'div'> {
     /**
      * Represents the space between each child.
      */
-    space?: Space;
+    space?: Gap;
     /**
      * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
      */
@@ -44,29 +44,31 @@ export declare type Spread = 'space-between';
 export declare type Grow = 'hug' | 'fill';
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::41d7002b7f69aa44d0d8598e07a1afc6>>
+ * @codegen <<SignedSource::4eb2c996d6ce5791acad51e2b226635f>>
  * @codegenId spacing
  * @codegenCommand yarn codegen-styles
- * @codegenParams ["space"]
+ * @codegenParams ["stackSpace"]
  * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-spacing.tsx <<SignedSource::167d3b69b159ae33e74d4ea5ab7eade6>>
  */
-declare const spaceMap: {
-    readonly '0': import("@emotion/react").SerializedStyles;
-    readonly '025': import("@emotion/react").SerializedStyles;
-    readonly '050': import("@emotion/react").SerializedStyles;
-    readonly '075': import("@emotion/react").SerializedStyles;
-    readonly '100': import("@emotion/react").SerializedStyles;
-    readonly '150': import("@emotion/react").SerializedStyles;
-    readonly '200': import("@emotion/react").SerializedStyles;
-    readonly '250': import("@emotion/react").SerializedStyles;
-    readonly '300': import("@emotion/react").SerializedStyles;
-    readonly '400': import("@emotion/react").SerializedStyles;
-    readonly '500': import("@emotion/react").SerializedStyles;
-    readonly '600': import("@emotion/react").SerializedStyles;
-    readonly '800': import("@emotion/react").SerializedStyles;
-    readonly '1000': import("@emotion/react").SerializedStyles;
+declare const stackSpaceMap: {
+    [k: string]: {
+        readonly '0': import("@emotion/react").SerializedStyles;
+        readonly '025': import("@emotion/react").SerializedStyles;
+        readonly '050': import("@emotion/react").SerializedStyles;
+        readonly '075': import("@emotion/react").SerializedStyles;
+        readonly '100': import("@emotion/react").SerializedStyles;
+        readonly '150': import("@emotion/react").SerializedStyles;
+        readonly '200': import("@emotion/react").SerializedStyles;
+        readonly '250': import("@emotion/react").SerializedStyles;
+        readonly '300': import("@emotion/react").SerializedStyles;
+        readonly '400': import("@emotion/react").SerializedStyles;
+        readonly '500': import("@emotion/react").SerializedStyles;
+        readonly '600': import("@emotion/react").SerializedStyles;
+        readonly '800': import("@emotion/react").SerializedStyles;
+        readonly '1000': import("@emotion/react").SerializedStyles;
+    };
 };
-export declare type Space = keyof typeof spaceMap;
+export declare type Gap = keyof typeof stackSpaceMap.gap;
 /**
  * __Stack__
  *

package/dist/types/components/types.d.ts

@@ -1,6 +1,5 @@
 import type { CSSProperties } from 'react';
 import { type BoxXCSS } from '../internal/xcss';
-import type { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
 export declare type BasePrimitiveProps = {
     /**
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
@@ -12,53 +11,8 @@ export declare type BasePrimitiveProps = {
     style?: CSSProperties;
 };
 export declare type PublicBoxPropsBase = {
-    /**
-     * Defines border width.
-     */
-    borderWidth?: BorderWidth;
-    /**
-     * Defines display type and layout. Defaults to `block`.
-     */
-    display?: Display;
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     *
-     * @see paddingBlock
-     * @see paddingInline
-     */
-    padding?: Padding;
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     *
-     * @see paddingBlockStart
-     * @see paddingBlockEnd
-     */
-    paddingBlock?: PaddingBlock;
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: PaddingBlockStart;
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: PaddingBlockEnd;
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     *
-     * @see paddingInlineStart
-     * @see paddingInlineEnd
-     */
-    paddingInline?: PaddingInline;
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: PaddingInlineStart;
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: PaddingInlineEnd;
     /**
      * Safe subset of styles that can be applied as a classname.
      */
-    xcss?: BoxXCSS;
+    xcss?: BoxXCSS | Array<BoxXCSS | false | undefined>;
 };