@atlaskit/primitives 0.4.2 → 0.5.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/primitives
 
+## 0.5.0
+
+### Minor Changes
+
+- [`e379d04c74a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e379d04c74a) - Expose a new form of `xcss` that is parameterised so it can be statically bound to the intended usage context.
+
 ## 0.4.2
 
 ### Patch Changes

package/dist/cjs/internal/xcss.js

@@ -4,11 +4,14 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.xcss = exports.transformStyles = exports.parseXcss = void 0;
+exports.transformStyles = exports.parseXcss = void 0;
+exports.xcss = xcss;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _react = require("@emotion/react");
 var _styleMaps = require("./style-maps");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
 var tokensMap = {
   backgroundColor: _styleMaps.backgroundColorMap,
   borderColor: _styleMaps.borderColorMap,
@@ -82,7 +85,7 @@ var transformStyles = function transformStyles(styleObj) {
   return styleObj;
 };
 exports.transformStyles = transformStyles;
-var xcss = function xcss(style) {
+var baseXcss = function baseXcss(style) {
   var transformedStyles = transformStyles(style);
   return {
     symbol: uniqueSymbol,
@@ -94,7 +97,6 @@ var xcss = function xcss(style) {
  * @internal used in primitives
  * @returns
  */
-exports.xcss = xcss;
 var parseXcss = function parseXcss(args) {
   if (Array.isArray(args)) {
     // @ts-expect-error FIXME
@@ -107,4 +109,14 @@ var parseXcss = function parseXcss(args) {
   }
   return styles;
 };
-exports.parseXcss = parseXcss;
+exports.parseXcss = parseXcss;
+// unused private functions only so we can extract the return type from a generic function
+var boxWrapper = function boxWrapper(style) {
+  return xcss(style);
+};
+var inlineWrapper = function inlineWrapper(style) {
+  return xcss(style);
+};
+function xcss(style) {
+  return baseXcss(style);
+}

package/dist/cjs/version.json

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

package/dist/es2019/internal/xcss.js

@@ -1,3 +1,4 @@
+/* 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';
 const tokensMap = {
@@ -69,7 +70,7 @@ export const transformStyles = styleObj => {
   });
   return styleObj;
 };
-export const xcss = style => {
+const baseXcss = style => {
   const transformedStyles = transformStyles(style);
   return {
     symbol: uniqueSymbol,
@@ -94,4 +95,10 @@ export const parseXcss = args => {
     throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
   }
   return styles;
-};
+};
+// unused private functions only so we can extract the return type from a generic function
+const boxWrapper = style => xcss(style);
+const inlineWrapper = style => xcss(style);
+export function xcss(style) {
+  return baseXcss(style);
+}

package/dist/es2019/version.json

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

package/dist/esm/internal/xcss.js

@@ -1,5 +1,6 @@
 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';
 var tokensMap = {
@@ -74,7 +75,7 @@ export var transformStyles = function transformStyles(styleObj) {
   });
   return styleObj;
 };
-export var xcss = function xcss(style) {
+var baseXcss = function baseXcss(style) {
   var transformedStyles = transformStyles(style);
   return {
     symbol: uniqueSymbol,
@@ -97,4 +98,14 @@ export var parseXcss = function parseXcss(args) {
     throw new Error('Styles generated from unsafe source, use the `xcss` export from `@atlaskit/primitives`.');
   }
   return styles;
-};
+};
+// unused private functions only so we can extract the return type from a generic function
+var boxWrapper = function boxWrapper(style) {
+  return xcss(style);
+};
+var inlineWrapper = function inlineWrapper(style) {
+  return xcss(style);
+};
+export function xcss(style) {
+  return baseXcss(style);
+}

package/dist/esm/version.json

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

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

@@ -43,9 +43,12 @@ export interface InlineProps<T extends ElementType = 'div'> {
      */
     testId?: string;
     /**
-     * Elements to be rendered inside the Stack.
+     * Elements to be rendered inside the Inline.
      */
     children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
     ref?: ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
@@ -109,5 +112,5 @@ export declare type RowSpace = keyof typeof rowSpaceMap;
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "space" | "separator" | "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>>;
 export default Inline;

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

@@ -33,6 +33,9 @@ export interface StackProps<T extends ElementType = 'div'> {
      * Elements to be rendered inside the Stack.
      */
     children: ReactNode;
+    /**
+     * Forwarded ref element
+     */
     ref?: ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
@@ -78,5 +81,5 @@ export declare type Space = keyof typeof spaceMap;
  * ```
  *
  */
-declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "space" | "as" | "children" | "testId" | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "spread" | "grow" | "space"> & import("react").RefAttributes<any>>>;
 export default Stack;

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

@@ -1,5 +1,5 @@
 import type { CSSProperties } from 'react';
-import type { SafeCSS } from '../internal/xcss';
+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 = {
     /**
@@ -60,5 +60,5 @@ export declare type PublicBoxPropsBase = {
     /**
      * Safe subset of styles that can be applied as a classname.
      */
-    xcss?: SafeCSS;
+    xcss?: BoxXCSS;
 };

package/dist/types/internal/xcss.d.ts

@@ -1,5 +1,7 @@
+/// <reference types="react" />
 import { css as cssEmotion } from '@emotion/react';
-import { CSSObject, CSSPropertiesWithMultiValues, CSSPseudos } from '@emotion/serialize';
+import { CSSObject, CSSPropertiesWithMultiValues, CSSPseudos, SerializedStyles } from '@emotion/serialize';
+import { Box, Inline } from '../index';
 import { TokenisedProps } from './style-maps';
 declare const uniqueSymbol: unique symbol;
 /**
@@ -7,16 +9,43 @@ declare const uniqueSymbol: unique symbol;
  * @internal
  */
 export declare const transformStyles: (styleObj?: CSSObject | CSSObject[] | undefined) => CSSObject | CSSObject[] | undefined;
-declare type XCSS = ReturnType<typeof xcss>;
-export declare type SafeCSS = XCSS | XCSS[];
-export declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
-export declare const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
-    readonly symbol: typeof uniqueSymbol;
-    readonly styles: import("@emotion/react").SerializedStyles;
-};
 /**
  * @internal used in primitives
  * @returns
  */
 export declare const parseXcss: (args: SafeCSS) => ReturnType<typeof cssEmotion>;
+declare type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+declare type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
+declare const boxWrapper: (style: any) => {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
+declare const inlineWrapper: (style: any) => {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: InlineStyles;
+};
+declare type XCSS = ReturnType<typeof boxWrapper> | ReturnType<typeof inlineWrapper>;
+declare type SafeCSS = XCSS | XCSS[];
+declare type AllowedBoxStyles = keyof SafeCSSObject;
+declare type AllowedInlineStyles = 'backgroundColor' | 'padding';
+export declare function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: Primitive extends (<T extends import("react").ElementType<any> = "div">(props: import("../index").BoxProps<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null) & import("react").FC<import("../index").BoxProps<"div">> ? BoxStyles : Primitive extends import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<import("../index").InlineProps<import("react").ElementType<any>>, "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "space" | "rowSpace" | "separator"> & import("react").RefAttributes<any>>> ? InlineStyles : never;
+};
+declare const boxTag: unique symbol;
+export declare type BoxStyles = SerializedStyles & {
+    [boxTag]: true;
+};
+export declare type BoxXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
+declare const inlineTag: unique symbol;
+export declare type InlineStyles = SerializedStyles & {
+    [inlineTag]: true;
+};
+export declare type InlineXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: InlineStyles;
+};
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.4.2",
+  "version": "0.5.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",

package/report.api.md

@@ -15,6 +15,8 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
+/// <reference types="react" />
+
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
@@ -23,11 +25,13 @@ import { CSSPseudos } from '@emotion/serialize';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { JSXElementConstructor } from 'react';
 import { MemoExoticComponent } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
+import { SerializedStyles as SerializedStyles_2 } from '@emotion/serialize';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -53,6 +57,12 @@ const alignSelfMap: {
   readonly baseline: SerializedStyles;
 };
 
+// @public (undocumented)
+type AllowedBoxStyles = keyof SafeCSSObject;
+
+// @public (undocumented)
+type AllowedInlineStyles = 'backgroundColor' | 'padding';
+
 // @public (undocumented)
 type BackgroundColor = keyof typeof backgroundColorMap;
 
@@ -329,6 +339,20 @@ export type BoxProps<T extends ElementType = 'div'> = Omit<
 // @public (undocumented)
 type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
 
+// @public (undocumented)
+type BoxStyles = SerializedStyles_2 & {
+  [boxTag]: true;
+};
+
+// @public (undocumented)
+const boxTag: unique symbol;
+
+// @public (undocumented)
+type BoxXCSS = {
+  readonly symbol: typeof uniqueSymbol;
+  readonly styles: BoxStyles;
+};
+
 // @public
 type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
 
@@ -434,7 +458,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
   as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow;
-  // (undocumented)
   ref?: ComponentPropsWithRef<T>['ref'];
   rowSpace?: RowSpace;
   separator?: string;
@@ -444,6 +467,14 @@ export interface InlineProps<T extends ElementType = 'div'> {
   testId?: string;
 }
 
+// @public (undocumented)
+type InlineStyles = SerializedStyles_2 & {
+  [inlineTag]: true;
+};
+
+// @public (undocumented)
+const inlineTag: unique symbol;
+
 // @public (undocumented)
 type Layer = keyof typeof LAYERS;
 
@@ -581,7 +612,7 @@ type PublicBoxPropsBase = {
   paddingInline?: PaddingInline;
   paddingInlineStart?: PaddingInlineStart;
   paddingInlineEnd?: PaddingInlineEnd;
-  xcss?: SafeCSS;
+  xcss?: BoxXCSS;
 };
 
 // @public
@@ -608,14 +639,17 @@ const rowSpaceMap: {
   readonly '1000': SerializedStyles;
 };
 
-// @public (undocumented)
-type SafeCSS = XCSS | XCSS[];
-
 // @public (undocumented)
 type SafeCSSObject = CSSPseudos &
   TokenisedProps &
   Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
+// @public (undocumented)
+type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<
+  SafeCSSObject,
+  T
+>;
+
 // @public (undocumented)
 type Shadow = keyof typeof shadowMap;
 
@@ -701,7 +735,6 @@ export interface StackProps<T extends ElementType = 'div'> {
   as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow_2;
-  // (undocumented)
   ref?: ComponentPropsWithRef<T>['ref'];
   space?: Space_2;
   spread?: Spread_2;
@@ -827,12 +860,40 @@ const widthMap: {
 };
 
 // @public (undocumented)
-type XCSS = ReturnType<typeof xcss>;
-
-// @public (undocumented)
-export const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
+export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(
+  style: Primitive extends typeof Box
+    ? ScopedSafeCSSObject<AllowedBoxStyles>
+    : Primitive extends typeof Inline
+    ? ScopedSafeCSSObject<AllowedInlineStyles>
+    : never,
+): {
   readonly symbol: typeof uniqueSymbol;
-  readonly styles: SerializedStyles;
+  readonly styles: Primitive extends (<T extends ElementType<any> = 'div'>(
+    props: BoxProps<T>,
+  ) => 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'
+          > &
+            RefAttributes<any>
+        >
+      >
+    ? InlineStyles
+    : never;
 };
 
 // (No @packageDocumentation comment for this package)

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

@@ -4,6 +4,8 @@
 
 ```ts
 
+/// <reference types="react" />
+
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
@@ -12,11 +14,13 @@ import { CSSPseudos } from '@emotion/serialize';
 import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
+import { JSXElementConstructor } from 'react';
 import { MemoExoticComponent } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
 import { SerializedStyles } from '@emotion/react';
+import { SerializedStyles as SerializedStyles_2 } from '@emotion/serialize';
 
 // @public (undocumented)
 type AlignBlock = 'baseline' | 'center' | 'end' | 'start';
@@ -42,6 +46,12 @@ const alignSelfMap: {
     readonly baseline: SerializedStyles;
 };
 
+// @public (undocumented)
+type AllowedBoxStyles = keyof SafeCSSObject;
+
+// @public (undocumented)
+type AllowedInlineStyles = 'backgroundColor' | 'padding';
+
 // @public (undocumented)
 type BackgroundColor = keyof typeof backgroundColorMap;
 
@@ -292,6 +302,20 @@ export type BoxProps<T extends ElementType = 'div'> = Omit<BaseBoxProps<T>, 'cla
 // @public (undocumented)
 type BoxResponsiveProp = typeof BOX_RESPONSIVE_PROPS[number];
 
+// @public (undocumented)
+type BoxStyles = SerializedStyles_2 & {
+    [boxTag]: true;
+};
+
+// @public (undocumented)
+const boxTag: unique symbol;
+
+// @public (undocumented)
+type BoxXCSS = {
+    readonly symbol: typeof uniqueSymbol;
+    readonly styles: BoxStyles;
+};
+
 // @public
 type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxl' | 'xxs';
 
@@ -379,7 +403,6 @@ export interface InlineProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow;
-    // (undocumented)
     ref?: ComponentPropsWithRef<T>['ref'];
     rowSpace?: RowSpace;
     separator?: string;
@@ -389,6 +412,14 @@ export interface InlineProps<T extends ElementType = 'div'> {
     testId?: string;
 }
 
+// @public (undocumented)
+type InlineStyles = SerializedStyles_2 & {
+    [inlineTag]: true;
+};
+
+// @public (undocumented)
+const inlineTag: unique symbol;
+
 // @public (undocumented)
 type Layer = keyof typeof LAYERS;
 
@@ -526,7 +557,7 @@ type PublicBoxPropsBase = {
     paddingInline?: PaddingInline;
     paddingInlineStart?: PaddingInlineStart;
     paddingInlineEnd?: PaddingInlineEnd;
-    xcss?: SafeCSS;
+    xcss?: BoxXCSS;
 };
 
 // @public
@@ -554,10 +585,10 @@ const rowSpaceMap: {
 };
 
 // @public (undocumented)
-type SafeCSS = XCSS | XCSS[];
+type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
 
 // @public (undocumented)
-type SafeCSSObject = CSSPseudos & TokenisedProps & Omit<CSSPropertiesWithMultiValues, keyof TokenisedProps>;
+type ScopedSafeCSSObject<T extends keyof SafeCSSObject> = Pick<SafeCSSObject, T>;
 
 // @public (undocumented)
 type Shadow = keyof typeof shadowMap;
@@ -629,7 +660,6 @@ export interface StackProps<T extends ElementType = 'div'> {
     as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow_2;
-    // (undocumented)
     ref?: ComponentPropsWithRef<T>['ref'];
     space?: Space_2;
     spread?: Spread_2;
@@ -755,12 +785,9 @@ const widthMap: {
 };
 
 // @public (undocumented)
-type XCSS = ReturnType<typeof xcss>;
-
-// @public (undocumented)
-export const xcss: (style?: SafeCSSObject | SafeCSSObject[] | undefined) => {
+export function xcss<Primitive extends typeof Box | typeof Inline = typeof Box>(style: Primitive extends typeof Box ? ScopedSafeCSSObject<AllowedBoxStyles> : Primitive extends typeof Inline ? ScopedSafeCSSObject<AllowedInlineStyles> : never): {
     readonly symbol: typeof uniqueSymbol;
-    readonly styles: SerializedStyles;
+    readonly styles: Primitive extends (<T extends ElementType<any> = "div">(props: BoxProps<T>) => 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"> & RefAttributes<any>>> ? InlineStyles : never;
 };
 
 // (No @packageDocumentation comment for this package)