@atlaskit/ds-explorations 1.1.0 → 1.2.0

package/src/components/inline.partial.tsx

@@ -1,12 +1,11 @@
 /** @jsx jsx */
-import { Children, forwardRef, Fragment, ReactNode } from 'react';
+import { Children, FC, forwardRef, Fragment, memo, ReactNode } from 'react';
 
 import { css, jsx } from '@emotion/react';
 
 import { token } from '@atlaskit/tokens';
 
-import Text from './text.partial';
-import type { BasePrimitiveProps, NonTextChildren } from './types';
+import type { BasePrimitiveProps } from './types';
 
 interface InlineProps extends BasePrimitiveProps {
   /**
@@ -33,7 +32,7 @@ interface InlineProps extends BasePrimitiveProps {
   /**
    * Elements to be rendered inside the Inline.
    */
-  children: NonTextChildren;
+  children: ReactNode;
 }
 
 type FlexAlignItems = keyof typeof flexAlignItemsMap;
@@ -66,54 +65,76 @@ const baseStyles = css({
   flexDirection: 'row',
 });
 
+const dividerStyles = css({
+  margin: '0 -2px',
+  color: token('color.text.subtle', '#42526E'),
+  pointerEvents: 'none',
+});
+
+const Divider: FC = ({ children }) => (
+  <span css={dividerStyles}>{children}</span>
+);
+
 /**
  * __Inline__
  *
  * Inline is a primitive component based on flexbox that manages the horizontal layout of direct children.
  * Renders a `div` by default.
  *
+ * @example
+ * ```tsx
+ * const App = () => (
+ *   <Inline gap="space.100">
+ *     <Button />
+ *     <Button />
+ *   </Inline>
+ * )
+ * ```
  */
-const Inline = forwardRef<HTMLDivElement, InlineProps>(
-  (
-    {
-      gap,
-      alignItems,
-      justifyContent,
-      flexWrap,
-      divider,
-      UNSAFE_style,
-      children,
-      testId,
+const Inline = memo(
+  forwardRef<HTMLDivElement, InlineProps>(
+    (
+      {
+        gap,
+        alignItems,
+        justifyContent,
+        flexWrap,
+        divider,
+        UNSAFE_style,
+        children,
+        testId,
+      },
+      ref,
+    ) => {
+      const dividerComponent =
+        typeof divider === 'string' ? <Divider>{divider}</Divider> : divider;
+      const childrenArray = Children.toArray(children).filter(Boolean);
+
+      return (
+        <div
+          style={UNSAFE_style}
+          css={[
+            baseStyles,
+            gap && columnGapMap[gap],
+            alignItems && flexAlignItemsMap[alignItems],
+            justifyContent && flexJustifyContentMap[justifyContent],
+            flexWrap && flexWrapMap[flexWrap],
+          ]}
+          data-testid={testId}
+          ref={ref}
+        >
+          {childrenArray.map((child, index) => {
+            return (
+              <Fragment key={index}>
+                {divider && index > 0 ? dividerComponent : null}
+                {child}
+              </Fragment>
+            );
+          })}
+        </div>
+      );
     },
-    ref,
-  ) => {
-    const dividerComponent =
-      typeof divider === 'string' ? <Text>{divider}</Text> : divider;
-
-    return (
-      <div
-        style={UNSAFE_style}
-        css={[
-          baseStyles,
-          gap && columnGapMap[gap],
-          alignItems && flexAlignItemsMap[alignItems],
-          justifyContent && flexJustifyContentMap[justifyContent],
-          flexWrap && flexWrapMap[flexWrap],
-        ]}
-        data-testid={testId}
-        ref={ref}
-      >
-        {Children.map(children, (child, index) => {
-          return (
-            <Fragment>
-              {divider && index > 0 ? dividerComponent : null}
-              {child}
-            </Fragment>
-          );
-        })}
-      </div>
-    );
-  },
+  ),
 );
 
 Inline.displayName = 'Inline';

package/src/components/stack.partial.tsx

@@ -1,11 +1,11 @@
 /** @jsx jsx */
-import { forwardRef } from 'react';
+import { forwardRef, memo, ReactNode } from 'react';
 
 import { css, jsx } from '@emotion/react';
 
 import { token } from '@atlaskit/tokens';
 
-import { BasePrimitiveProps, NonTextChildren } from './types';
+import { BasePrimitiveProps } from './types';
 
 interface StackProps extends BasePrimitiveProps {
   /**
@@ -27,7 +27,7 @@ interface StackProps extends BasePrimitiveProps {
   /**
    * Elements to be rendered inside the Stack.
    */
-  children: NonTextChildren;
+  children: ReactNode;
 }
 
 type FlexAlignItems = keyof typeof flexAlignItemsMap;
@@ -67,36 +67,38 @@ const baseStyles = css({
  * Renders a `div` by default.
  *
  */
-const Stack = forwardRef<HTMLDivElement, StackProps>(
-  (
-    {
-      gap,
-      alignItems,
-      justifyContent,
-      flexWrap,
-      children,
-      UNSAFE_style,
-      testId,
+const Stack = memo(
+  forwardRef<HTMLDivElement, StackProps>(
+    (
+      {
+        gap,
+        alignItems,
+        justifyContent,
+        flexWrap,
+        children,
+        UNSAFE_style,
+        testId,
+      },
+      ref,
+    ) => {
+      return (
+        <div
+          style={UNSAFE_style}
+          css={[
+            baseStyles,
+            gap && rowGapMap[gap],
+            alignItems && flexAlignItemsMap[alignItems],
+            justifyContent && flexJustifyContentMap[justifyContent],
+            flexWrap && flexWrapMap[flexWrap],
+          ]}
+          data-testid={testId}
+          ref={ref}
+        >
+          {children}
+        </div>
+      );
     },
-    ref,
-  ) => {
-    return (
-      <div
-        style={UNSAFE_style}
-        css={[
-          baseStyles,
-          gap && rowGapMap[gap],
-          alignItems && flexAlignItemsMap[alignItems],
-          justifyContent && flexJustifyContentMap[justifyContent],
-          flexWrap && flexWrapMap[flexWrap],
-        ]}
-        data-testid={testId}
-        ref={ref}
-      >
-        {children}
-      </div>
-    );
-  },
+  ),
 );
 
 Stack.displayName = 'Stack';

package/src/components/types.tsx

@@ -13,5 +13,3 @@ export interface BasePrimitiveProps {
    */
   UNSAFE_style?: CSSProperties;
 }
-
-export type NonTextChildren = JSX.Element | (JSX.Element | null | false)[];

package/stack/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/ds-explorations/stack",
+  "main": "../dist/cjs/components/stack.partial.js",
+  "module": "../dist/esm/components/stack.partial.js",
+  "module:es2019": "../dist/es2019/components/stack.partial.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/stack.partial.d.ts",
+  "typesVersions": {
+    ">=4.0 <4.5": {
+      "*": [
+        "../dist/types-ts4.0/components/stack.partial.d.ts"
+      ]
+    }
+  }
+}

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

@@ -4,8 +4,6 @@
 
 ```ts
 
-/// <reference types="react" />
-
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
@@ -13,6 +11,7 @@ import { ElementType } from 'react';
 import { FC } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import { jsx } from '@emotion/react';
+import { MemoExoticComponent } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
 import { RefAttributes } from 'react';
@@ -146,7 +145,7 @@ type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'di
 // @public (undocumented)
 type BoxPropsBase<T extends ElementType> = {
     as?: T;
-    children?: NonTextChildren | boolean | null;
+    children?: ReactNode;
     className?: string;
     backgroundColor?: BackgroundColor;
     borderStyle?: BorderStyle;
@@ -336,7 +335,7 @@ const heightMap: {
 // @public (undocumented)
 interface InlineProps extends BasePrimitiveProps {
     alignItems?: FlexAlignItems_2;
-    children: NonTextChildren;
+    children: ReactNode;
     divider?: ReactNode;
     flexWrap?: FlexWrap;
     gap: ColumnGap;
@@ -368,9 +367,6 @@ const lineHeightMap: {
     '40px': SerializedStyles;
 };
 
-// @public (undocumented)
-type NonTextChildren = (JSX.Element | false | null)[] | JSX.Element;
-
 // @public (undocumented)
 type Overflow = keyof typeof overflowMap;
 
@@ -471,7 +467,7 @@ const rowGapMap: {
 // @public (undocumented)
 interface StackProps extends BasePrimitiveProps {
     alignItems?: FlexAlignItems_3;
-    children: NonTextChildren;
+    children: ReactNode;
     flexWrap?: FlexWrap_2;
     gap: RowGap;
     justifyContent?: FlexJustifyContent_3;
@@ -524,13 +520,13 @@ export const UNSAFE_Box: BoxComponent;
 export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, PropsToOmit> & BasePrimitiveProps & BoxPropsBase<T>;
 
 // @public
-export const UNSAFE_Inline: ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>;
+export const UNSAFE_Inline: MemoExoticComponent<ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>>;
 
 // @public (undocumented)
 export const UNSAFE_InteractionSurface: ({ appearance, children, testId, }: InteractionSurfaceProps) => jsx.JSX.Element;
 
 // @public
-export const UNSAFE_Stack: ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>;
+export const UNSAFE_Stack: MemoExoticComponent<ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>>;
 
 // @internal
 export const UNSAFE_Text: FC<UNSAFE_TextProps>;

package/dist/types-ts4.0/components/box.partial.d.ts

@@ -1,303 +0,0 @@
-/** @jsx jsx */
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement } from 'react';
-import type { BasePrimitiveProps, NonTextChildren } from './types';
-declare type PropsToOmit = 'as' | 'className' | 'style';
-export declare type BoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef<T>, PropsToOmit> & BasePrimitiveProps & BoxPropsBase<T>;
-declare type BoxPropsBase<T extends ElementType> = {
-    /**
-     * The DOM element to render as the Box. Defaults to `div`.
-     */
-    as?: T;
-    /**
-     * Elements to be rendered inside the Box.
-     */
-    children?: NonTextChildren | boolean | null;
-    /**
-     * 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;
-    /**
-     * Token representing background color with a fallback.
-     */
-    backgroundColor?: BackgroundColor;
-    /**
-     * Defines border style.
-     */
-    borderStyle?: BorderStyle;
-    /**
-     * Defines border width.
-     */
-    borderWidth?: BorderWidth;
-    /**
-     * Token representing border color with a fallback.
-     */
-    borderColor?: BorderColor;
-    /**
-     * Defines border radius.
-     */
-    borderRadius?: BorderRadius;
-    /**
-     * Defines the main axis direction.
-     */
-    flexDirection?: FlexDirection;
-    /**
-     * Used to align children along the cross axis.
-     */
-    alignItems?: FlexAlignItems;
-    /**
-     * Used to align children along the main axis.
-     */
-    justifyContent?: FlexJustifyContent;
-    /**
-     * Defines what happens if content overflows the box.
-     */
-    overflow?: Overflow;
-    /**
-     * Shorthand for `paddingBlock` and `paddingInline` together.
-     *
-     * @see paddingBlock
-     * @see paddingInline
-     */
-    padding?: Padding;
-    /**
-     * Token representing CSS `padding-block`.
-     */
-    paddingBlock?: PaddingBlock;
-    /**
-     * Token representing CSS `padding-inline`.
-     */
-    paddingInline?: PaddingInline;
-    /**
-     * Token representing width.
-     */
-    width?: Width;
-    /**
-     * Token representing height.
-     */
-    height?: Height;
-    /**
-     * Defines display type and layout. Defaults to `flex`.
-     */
-    display?: Display;
-    /**
-     * CSS position property.
-     */
-    position?: Position;
-    ref?: ComponentPropsWithRef<T>['ref'];
-};
-declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementType = 'div'>(props: BoxProps<T>) => ReactElement | null) & FC<BoxProps<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 Box: BoxComponent;
-export default Box;
-declare type BorderStyle = keyof typeof borderStyleMap;
-declare const borderStyleMap: {
-    none: import("@emotion/react").SerializedStyles;
-    solid: import("@emotion/react").SerializedStyles;
-    dashed: import("@emotion/react").SerializedStyles;
-    dotted: import("@emotion/react").SerializedStyles;
-};
-declare type BorderWidth = keyof typeof borderWidthMap;
-declare const borderWidthMap: {
-    '0px': import("@emotion/react").SerializedStyles;
-    '1px': import("@emotion/react").SerializedStyles;
-    '2px': import("@emotion/react").SerializedStyles;
-    '3px': import("@emotion/react").SerializedStyles;
-};
-declare type BorderRadius = keyof typeof borderRadiusMap;
-declare const borderRadiusMap: {
-    normal: import("@emotion/react").SerializedStyles;
-    rounded: import("@emotion/react").SerializedStyles;
-    badge: import("@emotion/react").SerializedStyles;
-};
-declare type FlexDirection = keyof typeof flexDirectionMap;
-declare const flexDirectionMap: {
-    column: import("@emotion/react").SerializedStyles;
-    row: import("@emotion/react").SerializedStyles;
-};
-declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
-declare const flexAlignItemsMap: {
-    center: import("@emotion/react").SerializedStyles;
-    baseline: import("@emotion/react").SerializedStyles;
-    flexStart: import("@emotion/react").SerializedStyles;
-    flexEnd: import("@emotion/react").SerializedStyles;
-};
-declare type FlexJustifyContent = keyof typeof flexJustifyContentMap;
-declare const flexJustifyContentMap: {
-    center: import("@emotion/react").SerializedStyles;
-    flexStart: import("@emotion/react").SerializedStyles;
-    flexEnd: import("@emotion/react").SerializedStyles;
-};
-declare type Display = keyof typeof displayMap;
-declare const displayMap: {
-    block: import("@emotion/react").SerializedStyles;
-    inline: import("@emotion/react").SerializedStyles;
-    flex: import("@emotion/react").SerializedStyles;
-    inlineFlex: import("@emotion/react").SerializedStyles;
-};
-declare type Position = keyof typeof positionMap;
-declare const positionMap: {
-    absolute: import("@emotion/react").SerializedStyles;
-    relative: import("@emotion/react").SerializedStyles;
-    static: import("@emotion/react").SerializedStyles;
-};
-declare type Overflow = keyof typeof overflowMap;
-declare const overflowMap: {
-    auto: import("@emotion/react").SerializedStyles;
-};
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::2d25a493458fa1cefdafcd559404f2ec>>
- * @codegenId spacing
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["padding", "paddingBlock", "paddingInline", "width", "height"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
- */
-declare const paddingMap: {
-    'scale.0': import("@emotion/react").SerializedStyles;
-    'scale.025': import("@emotion/react").SerializedStyles;
-    'scale.050': import("@emotion/react").SerializedStyles;
-    'scale.075': import("@emotion/react").SerializedStyles;
-    'scale.100': import("@emotion/react").SerializedStyles;
-    'scale.150': import("@emotion/react").SerializedStyles;
-    'scale.200': import("@emotion/react").SerializedStyles;
-    'scale.250': import("@emotion/react").SerializedStyles;
-    'scale.300': import("@emotion/react").SerializedStyles;
-    'scale.400': import("@emotion/react").SerializedStyles;
-    'scale.500': import("@emotion/react").SerializedStyles;
-    'scale.600': import("@emotion/react").SerializedStyles;
-};
-export declare type Padding = keyof typeof paddingMap;
-declare const paddingBlockMap: {
-    'scale.0': import("@emotion/react").SerializedStyles;
-    'scale.025': import("@emotion/react").SerializedStyles;
-    'scale.050': import("@emotion/react").SerializedStyles;
-    'scale.075': import("@emotion/react").SerializedStyles;
-    'scale.100': import("@emotion/react").SerializedStyles;
-    'scale.150': import("@emotion/react").SerializedStyles;
-    'scale.200': import("@emotion/react").SerializedStyles;
-    'scale.250': import("@emotion/react").SerializedStyles;
-    'scale.300': import("@emotion/react").SerializedStyles;
-    'scale.400': import("@emotion/react").SerializedStyles;
-    'scale.500': import("@emotion/react").SerializedStyles;
-    'scale.600': import("@emotion/react").SerializedStyles;
-};
-export declare type PaddingBlock = keyof typeof paddingBlockMap;
-declare const paddingInlineMap: {
-    'scale.0': import("@emotion/react").SerializedStyles;
-    'scale.025': import("@emotion/react").SerializedStyles;
-    'scale.050': import("@emotion/react").SerializedStyles;
-    'scale.075': import("@emotion/react").SerializedStyles;
-    'scale.100': import("@emotion/react").SerializedStyles;
-    'scale.150': import("@emotion/react").SerializedStyles;
-    'scale.200': import("@emotion/react").SerializedStyles;
-    'scale.250': import("@emotion/react").SerializedStyles;
-    'scale.300': import("@emotion/react").SerializedStyles;
-    'scale.400': import("@emotion/react").SerializedStyles;
-    'scale.500': import("@emotion/react").SerializedStyles;
-    'scale.600': import("@emotion/react").SerializedStyles;
-};
-export declare type PaddingInline = keyof typeof paddingInlineMap;
-declare const widthMap: {
-    'scale.0': import("@emotion/react").SerializedStyles;
-    'scale.025': import("@emotion/react").SerializedStyles;
-    'scale.050': import("@emotion/react").SerializedStyles;
-    'scale.075': import("@emotion/react").SerializedStyles;
-    'scale.100': import("@emotion/react").SerializedStyles;
-    'scale.150': import("@emotion/react").SerializedStyles;
-    'scale.200': import("@emotion/react").SerializedStyles;
-    'scale.250': import("@emotion/react").SerializedStyles;
-    'scale.300': import("@emotion/react").SerializedStyles;
-    'scale.400': import("@emotion/react").SerializedStyles;
-    'scale.500': import("@emotion/react").SerializedStyles;
-    'scale.600': import("@emotion/react").SerializedStyles;
-};
-export declare type Width = keyof typeof widthMap;
-declare const heightMap: {
-    'scale.0': import("@emotion/react").SerializedStyles;
-    'scale.025': import("@emotion/react").SerializedStyles;
-    'scale.050': import("@emotion/react").SerializedStyles;
-    'scale.075': import("@emotion/react").SerializedStyles;
-    'scale.100': import("@emotion/react").SerializedStyles;
-    'scale.150': import("@emotion/react").SerializedStyles;
-    'scale.200': import("@emotion/react").SerializedStyles;
-    'scale.250': import("@emotion/react").SerializedStyles;
-    'scale.300': import("@emotion/react").SerializedStyles;
-    'scale.400': import("@emotion/react").SerializedStyles;
-    'scale.500': import("@emotion/react").SerializedStyles;
-    'scale.600': import("@emotion/react").SerializedStyles;
-};
-export declare type Height = keyof typeof heightMap;
-/**
- * @codegenEnd
- */
-/**
- * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::781636715c2bee941d6836a5a90fed5b>>
- * @codegenId colors
- * @codegenCommand yarn codegen-styles
- * @codegenParams ["border", "background"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::07ef29d58a2b23af8b098515466d7e22>>
- */
-declare const borderColorMap: {
-    'color.border': import("@emotion/react").SerializedStyles;
-    bold: import("@emotion/react").SerializedStyles;
-    inverse: import("@emotion/react").SerializedStyles;
-    focused: import("@emotion/react").SerializedStyles;
-    input: import("@emotion/react").SerializedStyles;
-    disabled: import("@emotion/react").SerializedStyles;
-    brand: import("@emotion/react").SerializedStyles;
-    selected: import("@emotion/react").SerializedStyles;
-    danger: import("@emotion/react").SerializedStyles;
-    warning: import("@emotion/react").SerializedStyles;
-    success: import("@emotion/react").SerializedStyles;
-    discovery: import("@emotion/react").SerializedStyles;
-    information: import("@emotion/react").SerializedStyles;
-};
-export declare type BorderColor = keyof typeof borderColorMap;
-declare const backgroundColorMap: {
-    disabled: import("@emotion/react").SerializedStyles;
-    'inverse.subtle': import("@emotion/react").SerializedStyles;
-    input: import("@emotion/react").SerializedStyles;
-    neutral: import("@emotion/react").SerializedStyles;
-    'neutral.subtle': import("@emotion/react").SerializedStyles;
-    'neutral.bold': import("@emotion/react").SerializedStyles;
-    'brand.bold': import("@emotion/react").SerializedStyles;
-    selected: import("@emotion/react").SerializedStyles;
-    'selected.bold': import("@emotion/react").SerializedStyles;
-    danger: import("@emotion/react").SerializedStyles;
-    'danger.bold': import("@emotion/react").SerializedStyles;
-    warning: import("@emotion/react").SerializedStyles;
-    'warning.bold': import("@emotion/react").SerializedStyles;
-    success: import("@emotion/react").SerializedStyles;
-    'success.bold': import("@emotion/react").SerializedStyles;
-    discovery: import("@emotion/react").SerializedStyles;
-    'discovery.bold': import("@emotion/react").SerializedStyles;
-    information: import("@emotion/react").SerializedStyles;
-    'information.bold': import("@emotion/react").SerializedStyles;
-    'color.blanket': import("@emotion/react").SerializedStyles;
-    'color.blanket.selected': import("@emotion/react").SerializedStyles;
-    'color.blanket.danger': import("@emotion/react").SerializedStyles;
-    'elevation.surface': import("@emotion/react").SerializedStyles;
-    'elevation.surface.sunken': import("@emotion/react").SerializedStyles;
-    'elevation.surface.raised': import("@emotion/react").SerializedStyles;
-    'elevation.surface.overlay': import("@emotion/react").SerializedStyles;
-};
-export declare type BackgroundColor = keyof typeof backgroundColorMap;
-/**
- * @codegenEnd
- */