@atlaskit/primitives 0.4.0 → 0.4.2

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

@@ -3,12 +3,12 @@ import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, React
 import { Layer } from '../../constants';
 import { ResponsiveObject } from '../../helpers/responsive';
 import type { BasePrimitiveProps } from '../types';
-export declare type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className' | 'style'> & BasePrimitiveProps & BaseBoxPropsFoundation<T>;
+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';
+    as?: 'div' | 'span' | 'li';
     /**
      * The HTML className attribute.
      *
@@ -26,54 +26,80 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     children?: ReactNode;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing color with a fallback.
      */
     color?: TextColor;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing background color with a fallback.
      */
     backgroundColor?: BackgroundColor;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing shadow with a fallback
      */
     shadow?: Shadow;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border style.
      */
     borderStyle?: BorderStyle;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border width.
      */
     borderWidth?: BorderWidth | ResponsiveObject<BorderWidth>;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing border color with a fallback.
      */
     borderColor?: BorderColor;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines border radius.
      */
     borderRadius?: BorderRadius;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Used for providing a z-index.
      */
     layer?: Layer;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Shorthand `flex` property.
      */
     flex?: Flex;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines the flex grow factor -- how much remaining space should be taken up.
      */
     flexGrow?: FlexGrow;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines the flex shrink factor -- how the item will shrink relative to other flex items in the container.
      */
     flexShrink?: FlexShrink;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Overrides the `align-items` value.
      */
     alignSelf?: AlignSelf;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box.
      * Shorthand for overflow-inline and overflow-block.
      *
@@ -82,10 +108,14 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     overflow?: Overflow;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box in the horizontal direction (inline).
      */
     overflowInline?: OverflowInline;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines what happens if content overflows the box in the vertical direction (block).
      */
     overflowBlock?: OverflowBlock;
@@ -127,23 +157,32 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
      */
     paddingInlineEnd?: PaddingInlineEnd | ResponsiveObject<PaddingInlineEnd>;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing width.
-     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     width?: Width;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Token representing height.
-     * @experimental The existing tokens will be replaced to better reflect dimensions.
      */
     height?: Height;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * Defines display type and layout. Defaults to `block`.
      */
     display?: Display | ResponsiveObject<Display>;
     /**
+     * @private
+     * @deprecated Use `xcss` to achieve this functionality.
      * CSS position property.
      */
     position?: Position;
+    /**
+     * 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>>;

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

@@ -1,6 +1,10 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
-export interface StackProps {
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+export interface StackProps<T extends ElementType = 'div'> {
+    /**
+     * The DOM element to render as the Stack. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol';
     /**
      * Used to align children along the main axis.
      */
@@ -29,6 +33,7 @@ export interface StackProps {
      * Elements to be rendered inside the Stack.
      */
     children: ReactNode;
+    ref?: ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
 export declare type AlignBlock = 'start' | 'center' | 'end';
@@ -73,5 +78,5 @@ export declare type Space = keyof typeof spaceMap;
  * ```
  *
  */
-declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
+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>>>;
 export default Stack;

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

@@ -1,24 +1,16 @@
 import type { CSSProperties } from 'react';
-import { BorderWidth, Display, Padding, PaddingBlock, PaddingBlockEnd, PaddingBlockStart, PaddingInline, PaddingInlineEnd, PaddingInlineStart } from './internal/base-box.partial';
-/**
- * Restricted set of inline styles to be applied to the primitive.
- * Should be avoided where possible, in favor of the pre-defined props and values on the primitive itself.
- * Tokens should be used where possible.
- */
-export declare type CustomStyles = Pick<CSSProperties, 'flexBasis' | 'flex' | 'width' | 'height' | 'minWidth' | 'maxWidth' | 'minHeight' | 'maxHeight' | 'insetInlineStart' | 'insetInlineEnd' | 'insetBlockStart' | 'float' | 'margin' | 'marginInlineStart' | 'marginInlineEnd' | 'marginBlockStart' | 'marginBlockEnd' | 'marginInline' | 'marginBlock' | 'paddingLeft' | 'paddingRight' | 'paddingTop' | 'paddingBottom'>;
-export interface BasePrimitiveProps {
+import type { SafeCSS } 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.
      */
     testId?: string;
     /**
      * Inline styles to be applied to the primitive.
-     * Marked as "unsafe" because any CSS properties can be provided here without any extra control or validation, including those that would be better managed by the primitive itself via props.
-     * Effectively equivalent to the standard `style` prop but marked with a special name.
-     * Used only internally.
      */
-    UNSAFE_style?: CSSProperties;
-}
+    style?: CSSProperties;
+};
 export declare type PublicBoxPropsBase = {
     /**
      * Defines border width.
@@ -65,5 +57,8 @@ export declare type PublicBoxPropsBase = {
      * Tokens representing CSS `paddingInlineEnd`.
      */
     paddingInlineEnd?: PaddingInlineEnd;
-    customStyles?: CustomStyles;
+    /**
+     * Safe subset of styles that can be applied as a classname.
+     */
+    xcss?: SafeCSS;
 };

package/dist/types/index.d.ts

@@ -1,3 +1,4 @@
 export { default as Box, type BoxProps } from './components/box';
 export { default as Inline, type InlineProps, } from './components/inline.partial';
+export { xcss } from './internal/xcss';
 export { default as Stack, type StackProps } from './components/stack.partial';

package/dist/types/internal/style-maps.d.ts

@@ -0,0 +1,151 @@
+export declare const backgroundColorMap: {
+    readonly disabled: "var(--ds-background-disabled)";
+    readonly input: "var(--ds-background-input)";
+    readonly 'inverse.subtle': "var(--ds-background-inverse-subtle)";
+    readonly neutral: "var(--ds-background-neutral)";
+    readonly 'neutral.subtle': "var(--ds-background-neutral-subtle)";
+    readonly 'neutral.bold': "var(--ds-background-neutral-bold)";
+    readonly selected: "var(--ds-background-selected)";
+    readonly 'selected.bold': "var(--ds-background-selected-bold)";
+    readonly 'brand.bold': "var(--ds-background-brand-bold)";
+    readonly danger: "var(--ds-background-danger)";
+    readonly 'danger.bold': "var(--ds-background-danger-bold)";
+    readonly warning: "var(--ds-background-warning)";
+    readonly 'warning.bold': "var(--ds-background-warning-bold)";
+    readonly success: "var(--ds-background-success)";
+    readonly 'success.bold': "var(--ds-background-success-bold)";
+    readonly discovery: "var(--ds-background-discovery)";
+    readonly 'discovery.bold': "var(--ds-background-discovery-bold)";
+    readonly information: "var(--ds-background-information)";
+    readonly 'information.bold': "var(--ds-background-information-bold)";
+    readonly 'color.blanket': "var(--ds-blanket)";
+    readonly 'color.blanket.selected': "var(--ds-blanket-selected)";
+    readonly 'color.blanket.danger': "var(--ds-blanket-danger)";
+    readonly 'elevation.surface': "var(--ds-surface)";
+    readonly 'elevation.surface.overlay': "var(--ds-surface-overlay)";
+    readonly 'elevation.surface.raised': "var(--ds-surface-raised)";
+    readonly 'elevation.surface.sunken': "var(--ds-surface-sunken)";
+};
+export declare type BackgroundColor = keyof typeof backgroundColorMap;
+export declare const borderColorMap: {
+    readonly 'color.border': "var(--ds-border)";
+    readonly disabled: "var(--ds-border-disabled)";
+    readonly focused: "var(--ds-border-focused)";
+    readonly input: "var(--ds-border-input)";
+    readonly inverse: "var(--ds-border-inverse)";
+    readonly selected: "var(--ds-border-selected)";
+    readonly brand: "var(--ds-border-brand)";
+    readonly danger: "var(--ds-border-danger)";
+    readonly warning: "var(--ds-border-warning)";
+    readonly success: "var(--ds-border-success)";
+    readonly discovery: "var(--ds-border-discovery)";
+    readonly information: "var(--ds-border-information)";
+    readonly bold: "var(--ds-border-bold)";
+};
+export declare type BorderColor = keyof typeof borderColorMap;
+export declare const borderWidthMap: {
+    readonly 'size.0': "var(--ds-width-0)";
+    readonly 'size.050': "var(--ds-width-050)";
+    readonly 'size.100': "var(--ds-width-100)";
+};
+export declare type BorderWidth = keyof typeof borderWidthMap;
+export declare const borderRadiusMap: {
+    readonly 'radius.400': "var(--ds-radius-400)";
+    readonly 'radius.300': "var(--ds-radius-300)";
+    readonly 'radius.100': "var(--ds-radius-100)";
+    readonly 'radius.050': "var(--ds-radius-050)";
+    readonly 'radius.200': "var(--ds-radius-200)";
+};
+export declare type BorderRadius = keyof typeof borderRadiusMap;
+export declare const paddingMap: {
+    readonly 'space.0': "var(--ds-space-0)";
+    readonly 'space.025': "var(--ds-space-025)";
+    readonly 'space.050': "var(--ds-space-050)";
+    readonly 'space.075': "var(--ds-space-075)";
+    readonly 'space.100': "var(--ds-space-100)";
+    readonly 'space.150': "var(--ds-space-150)";
+    readonly 'space.200': "var(--ds-space-200)";
+    readonly 'space.250': "var(--ds-space-250)";
+    readonly 'space.300': "var(--ds-space-300)";
+    readonly 'space.400': "var(--ds-space-400)";
+    readonly 'space.500': "var(--ds-space-500)";
+    readonly 'space.600': "var(--ds-space-600)";
+    readonly 'space.800': "var(--ds-space-800)";
+    readonly 'space.1000': "var(--ds-space-1000)";
+};
+export declare type Padding = keyof typeof paddingMap;
+export declare type PaddingBlock = keyof typeof paddingMap;
+export declare type PaddingBlockStart = keyof typeof paddingMap;
+export declare type PaddingBlockEnd = keyof typeof paddingMap;
+export declare type PaddingInline = keyof typeof paddingMap;
+export declare type PaddingInlineStart = keyof typeof paddingMap;
+export declare type PaddingInlineEnd = keyof typeof paddingMap;
+export declare const textColorMap: {
+    readonly 'color.text': "var(--ds-text)";
+    readonly 'accent.red': "var(--ds-text-accent-red)";
+    readonly 'accent.red.bolder': "var(--ds-text-accent-red-bolder)";
+    readonly 'accent.orange': "var(--ds-text-accent-orange)";
+    readonly 'accent.orange.bolder': "var(--ds-text-accent-orange-bolder)";
+    readonly 'accent.yellow': "var(--ds-text-accent-yellow)";
+    readonly 'accent.yellow.bolder': "var(--ds-text-accent-yellow-bolder)";
+    readonly 'accent.green': "var(--ds-text-accent-green)";
+    readonly 'accent.green.bolder': "var(--ds-text-accent-green-bolder)";
+    readonly 'accent.teal': "var(--ds-text-accent-teal)";
+    readonly 'accent.teal.bolder': "var(--ds-text-accent-teal-bolder)";
+    readonly 'accent.blue': "var(--ds-text-accent-blue)";
+    readonly 'accent.blue.bolder': "var(--ds-text-accent-blue-bolder)";
+    readonly 'accent.purple': "var(--ds-text-accent-purple)";
+    readonly 'accent.purple.bolder': "var(--ds-text-accent-purple-bolder)";
+    readonly 'accent.magenta': "var(--ds-text-accent-magenta)";
+    readonly 'accent.magenta.bolder': "var(--ds-text-accent-magenta-bolder)";
+    readonly 'accent.gray': "var(--ds-text-accent-gray)";
+    readonly 'accent.gray.bolder': "var(--ds-text-accent-gray-bolder)";
+    readonly disabled: "var(--ds-text-disabled)";
+    readonly inverse: "var(--ds-text-inverse)";
+    readonly selected: "var(--ds-text-selected)";
+    readonly brand: "var(--ds-text-brand)";
+    readonly danger: "var(--ds-text-danger)";
+    readonly warning: "var(--ds-text-warning)";
+    readonly 'warning.inverse': "var(--ds-text-warning-inverse)";
+    readonly success: "var(--ds-text-success)";
+    readonly discovery: "var(--ds-text-discovery)";
+    readonly information: "var(--ds-text-information)";
+    readonly subtlest: "var(--ds-text-subtlest)";
+    readonly subtle: "var(--ds-text-subtle)";
+};
+export declare type TextColor = keyof typeof textColorMap;
+export declare const dimensionMap: {
+    readonly '100%': "100%";
+    readonly 'size.100': "16px";
+    readonly 'size.200': "24px";
+    readonly 'size.300': "32px";
+    readonly 'size.400': "40px";
+    readonly 'size.500': "48px";
+    readonly 'size.600': "96px";
+    readonly 'size.1000': "192px";
+};
+export declare type Width = keyof typeof dimensionMap;
+export declare type Height = keyof typeof dimensionMap;
+export declare type MinWidth = keyof typeof dimensionMap;
+export declare type MaxWidth = keyof typeof dimensionMap;
+export declare type MinHeight = keyof typeof dimensionMap;
+export declare type MaxHeight = keyof typeof dimensionMap;
+export declare type TokenisedProps = {
+    backgroundColor?: BackgroundColor;
+    borderColor?: BorderColor;
+    borderWidth?: BorderWidth;
+    color?: TextColor;
+    height?: Height;
+    minHeight?: MinHeight;
+    minWidth?: MinWidth;
+    maxHeight?: MaxHeight;
+    maxWidth?: MaxWidth;
+    padding?: Padding;
+    paddingBlock?: Padding;
+    paddingInline?: Padding;
+    paddingBlockStart?: Padding;
+    paddingBlockEnd?: Padding;
+    paddingInlineStart?: Padding;
+    paddingInlineEnd?: Padding;
+    width?: Width;
+};

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

@@ -0,0 +1,22 @@
+import { css as cssEmotion } from '@emotion/react';
+import { CSSObject, CSSPropertiesWithMultiValues, CSSPseudos } from '@emotion/serialize';
+import { TokenisedProps } from './style-maps';
+declare const uniqueSymbol: unique symbol;
+/**
+ * Only exposed for testing.
+ * @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>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -41,6 +41,7 @@
     "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
+    "@emotion/serialize": "^1.1.0",
     "tiny-invariant": "^1.2.0"
   },
   "peerDependencies": {
@@ -88,4 +89,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}