@atlaskit/ds-explorations 1.1.0 → 1.2.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/ds-explorations
 
+## 1.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 1.2.0
+
+### Minor Changes
+
+- [`e6fb7598867`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e6fb7598867) - Exposes additional public entrypoints for `Inline` and `Stack`.
+  Loosens the types of `children` for the `Inline`, `Stack` and `Box` as it was causing unexpected friction.
+
 ## 1.1.0
 
 ### Minor Changes

package/dist/cjs/components/inline.partial.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,8 +9,6 @@ var _react = require("react");
 
 var _react2 = require("@emotion/react");
 
-var _text = _interopRequireDefault(require("./text.partial"));
-
 /** @jsx jsx */
 var flexAlignItemsMap = {
   center: (0, _react2.css)({
@@ -61,33 +57,60 @@ var baseStyles = (0, _react2.css)({
   boxSizing: 'border-box',
   flexDirection: 'row'
 });
+var dividerStyles = (0, _react2.css)({
+  margin: '0 -2px',
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none'
+});
+
+var Divider = function Divider(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)("span", {
+    css: dividerStyles
+  }, children);
+};
 /**
  * __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>
+ * )
+ * ```
  */
 
-var Inline = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var gap = _ref.gap,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      flexWrap = _ref.flexWrap,
-      divider = _ref.divider,
-      UNSAFE_style = _ref.UNSAFE_style,
-      children = _ref.children,
-      testId = _ref.testId;
-  var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(_text.default, null, divider) : divider;
+
+var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
+  var gap = _ref2.gap,
+      alignItems = _ref2.alignItems,
+      justifyContent = _ref2.justifyContent,
+      flexWrap = _ref2.flexWrap,
+      divider = _ref2.divider,
+      UNSAFE_style = _ref2.UNSAFE_style,
+      children = _ref2.children,
+      testId = _ref2.testId;
+  var dividerComponent = typeof divider === 'string' ? (0, _react2.jsx)(Divider, null, divider) : divider;
+
+  var childrenArray = _react.Children.toArray(children).filter(Boolean);
+
   return (0, _react2.jsx)("div", {
     style: UNSAFE_style,
     css: [baseStyles, gap && columnGapMap[gap], alignItems && flexAlignItemsMap[alignItems], justifyContent && flexJustifyContentMap[justifyContent], flexWrap && flexWrapMap[flexWrap]],
     "data-testid": testId,
     ref: ref
-  }, _react.Children.map(children, function (child, index) {
-    return (0, _react2.jsx)(_react.Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }, childrenArray.map(function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
   }));
-});
+}));
 Inline.displayName = 'Inline';
 var _default = Inline;
 /**

package/dist/cjs/components/stack.partial.js

@@ -65,7 +65,7 @@ var baseStyles = (0, _react2.css)({
  *
  */
 
-var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
@@ -79,7 +79,7 @@ var Stack = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, children);
-});
+}));
 Stack.displayName = 'Stack';
 var _default = Stack;
 /**

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.1.0",
+	"version": "1.2.1",
 	"sideEffects": false
 }

package/dist/es2019/components/inline.partial.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { Children, forwardRef, Fragment } from 'react';
+import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import Text from './text.partial';
 const flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -49,15 +48,36 @@ const baseStyles = css({
   boxSizing: 'border-box',
   flexDirection: 'row'
 });
+const dividerStyles = css({
+  margin: '0 -2px',
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none'
+});
+
+const Divider = ({
+  children
+}) => jsx("span", {
+  css: dividerStyles
+}, children);
 /**
  * __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 = /*#__PURE__*/forwardRef(({
+
+const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
   justifyContent,
@@ -67,16 +87,19 @@ const Inline = /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
-  const dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
+  const dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
+  const childrenArray = Children.toArray(children).filter(Boolean);
   return jsx("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 jsx(Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }, childrenArray.map((child, index) => {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
   }));
-});
+}));
 Inline.displayName = 'Inline';
 export default Inline;
 /**

package/dist/es2019/components/stack.partial.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 const flexAlignItemsMap = {
   center: css({
@@ -56,7 +56,7 @@ const baseStyles = css({
  *
  */
 
-const Stack = /*#__PURE__*/forwardRef(({
+const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   gap,
   alignItems,
   justifyContent,
@@ -71,7 +71,7 @@ const Stack = /*#__PURE__*/forwardRef(({
     "data-testid": testId,
     ref: ref
   }, children);
-});
+}));
 Stack.displayName = 'Stack';
 export default Stack;
 /**

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.1.0",
+	"version": "1.2.1",
 	"sideEffects": false
 }

package/dist/esm/components/inline.partial.js

@@ -1,7 +1,6 @@
 /** @jsx jsx */
-import { Children, forwardRef, Fragment } from 'react';
+import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import Text from './text.partial';
 var flexAlignItemsMap = {
   center: css({
     alignItems: 'center'
@@ -49,33 +48,58 @@ var baseStyles = css({
   boxSizing: 'border-box',
   flexDirection: 'row'
 });
+var dividerStyles = css({
+  margin: '0 -2px',
+  color: "var(--ds-text-subtle, #42526E)",
+  pointerEvents: 'none'
+});
+
+var Divider = function Divider(_ref) {
+  var children = _ref.children;
+  return jsx("span", {
+    css: dividerStyles
+  }, children);
+};
 /**
  * __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>
+ * )
+ * ```
  */
 
-var Inline = /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var gap = _ref.gap,
-      alignItems = _ref.alignItems,
-      justifyContent = _ref.justifyContent,
-      flexWrap = _ref.flexWrap,
-      divider = _ref.divider,
-      UNSAFE_style = _ref.UNSAFE_style,
-      children = _ref.children,
-      testId = _ref.testId;
-  var dividerComponent = typeof divider === 'string' ? jsx(Text, null, divider) : divider;
+
+var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
+  var gap = _ref2.gap,
+      alignItems = _ref2.alignItems,
+      justifyContent = _ref2.justifyContent,
+      flexWrap = _ref2.flexWrap,
+      divider = _ref2.divider,
+      UNSAFE_style = _ref2.UNSAFE_style,
+      children = _ref2.children,
+      testId = _ref2.testId;
+  var dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
+  var childrenArray = Children.toArray(children).filter(Boolean);
   return jsx("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, function (child, index) {
-    return jsx(Fragment, null, divider && index > 0 ? dividerComponent : null, child);
+  }, childrenArray.map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
   }));
-});
+}));
 Inline.displayName = 'Inline';
 export default Inline;
 /**

package/dist/esm/components/stack.partial.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 var flexAlignItemsMap = {
   center: css({
@@ -56,7 +56,7 @@ var baseStyles = css({
  *
  */
 
-var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
   var gap = _ref.gap,
       alignItems = _ref.alignItems,
       justifyContent = _ref.justifyContent,
@@ -70,7 +70,7 @@ var Stack = /*#__PURE__*/forwardRef(function (_ref, ref) {
     "data-testid": testId,
     ref: ref
   }, children);
-});
+}));
 Stack.displayName = 'Stack';
 export default Stack;
 /**

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.1.0",
+	"version": "1.2.1",
 	"sideEffects": false
 }

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement } from 'react';
-import type { BasePrimitiveProps, NonTextChildren } from './types';
+import { ComponentPropsWithoutRef, ComponentPropsWithRef, ElementType, FC, ReactElement, ReactNode } from 'react';
+import type { BasePrimitiveProps } 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> = {
@@ -11,7 +11,7 @@ declare type BoxPropsBase<T extends ElementType> = {
     /**
      * Elements to be rendered inside the Box.
      */
-    children?: NonTextChildren | boolean | null;
+    children?: ReactNode;
     /**
      * The HTML className attribute.
      *
@@ -68,11 +68,11 @@ declare type BoxPropsBase<T extends ElementType> = {
      */
     padding?: Padding;
     /**
-     * Token representing CSS `padding-block`.
+     * Token representing CSS `paddingBlock`.
      */
     paddingBlock?: PaddingBlock;
     /**
-     * Token representing CSS `padding-inline`.
+     * Token representing CSS `paddingInline`.
      */
     paddingInline?: PaddingInline;
     /**

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

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { ReactNode } from 'react';
-import type { BasePrimitiveProps, NonTextChildren } from './types';
+import type { BasePrimitiveProps } from './types';
 interface InlineProps extends BasePrimitiveProps {
     /**
      * Used to align children along the cross axis.
@@ -26,7 +26,7 @@ interface InlineProps extends BasePrimitiveProps {
     /**
      * Elements to be rendered inside the Inline.
      */
-    children: NonTextChildren;
+    children: ReactNode;
 }
 declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
 declare const flexAlignItemsMap: {
@@ -55,8 +55,17 @@ declare const flexWrapMap: {
  * 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>
+ * )
+ * ```
  */
-declare const Inline: import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>>;
 export default Inline;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}

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

@@ -1,5 +1,6 @@
-/// <reference types="react" />
-import { BasePrimitiveProps, NonTextChildren } from './types';
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { BasePrimitiveProps } from './types';
 interface StackProps extends BasePrimitiveProps {
     /**
      * Used to align children along the cross axis.
@@ -20,7 +21,7 @@ interface StackProps extends BasePrimitiveProps {
     /**
      * Elements to be rendered inside the Stack.
      */
-    children: NonTextChildren;
+    children: ReactNode;
 }
 declare type FlexAlignItems = keyof typeof flexAlignItemsMap;
 declare const flexAlignItemsMap: {
@@ -50,7 +51,7 @@ declare const flexWrapMap: {
  * Renders a `div` by default.
  *
  */
-declare const Stack: import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>;
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
 export default Stack;
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}

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

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

package/examples/01-box.tsx

@@ -66,14 +66,16 @@ export default () => {
       <Stack gap="scale.200" testId="box-with-backgroundColor">
         <Heading level="h600">backgroundColor</Heading>
         <Inline gap="scale.200" alignItems="center">
-          {([
-            'discovery.bold',
-            'success.bold',
-            'warning.bold',
-            'danger.bold',
-            'information.bold',
-            'brand.bold',
-          ] as const).map((bgColor) => (
+          {(
+            [
+              'discovery.bold',
+              'success.bold',
+              'warning.bold',
+              'danger.bold',
+              'information.bold',
+              'brand.bold',
+            ] as const
+          ).map((bgColor) => (
             <Box key={bgColor} backgroundColor={bgColor} padding="scale.400">
               <Box justifyContent="center">
                 <Text>{bgColor}</Text>
@@ -86,14 +88,16 @@ export default () => {
       <Stack gap="scale.200" testId="box-with-borderColor">
         <Heading level="h600">borderColor</Heading>
         <Inline gap="scale.200" alignItems="center">
-          {([
-            'discovery',
-            'success',
-            'warning',
-            'danger',
-            'information',
-            'brand',
-          ] as const).map((borderColor) => (
+          {(
+            [
+              'discovery',
+              'success',
+              'warning',
+              'danger',
+              'information',
+              'brand',
+            ] as const
+          ).map((borderColor) => (
             <Box
               key={borderColor}
               backgroundColor="neutral"

package/examples/02-text.tsx

@@ -43,15 +43,9 @@ export default () => {
             Line height
           </Heading>
           <Inline gap="scale.200" testId="line-heights" alignItems="center">
-            {([
-              '12px',
-              '16px',
-              '20px',
-              '24px',
-              '28px',
-              '32px',
-              '40px',
-            ] as const).map((lineHeight) => (
+            {(
+              ['12px', '16px', '20px', '24px', '28px', '32px', '40px'] as const
+            ).map((lineHeight) => (
               <Box
                 key={lineHeight}
                 display="inlineFlex"

package/inline/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "1.1.0",
+  "version": "1.2.1",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -34,10 +34,12 @@
   "af:exports": {
     ".": "./src/index.tsx",
     "./box": "./src/components/box.partial.tsx",
-    "./text": "./src/components/text.partial.tsx"
+    "./text": "./src/components/text.partial.tsx",
+    "./stack": "./src/components/stack.partial.tsx",
+    "./inline": "./src/components/inline.partial.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^0.10.3",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "tiny-invariant": "^1.2.0"
@@ -64,7 +66,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@testing-library/react": "^12.1.5",
     "fs-extra": "^4.0.2",
-    "prettier": "^2.1.1",
+    "prettier": "^2.7.0",
     "react-dom": "^16.8.0",
     "ts-node": "^10.9.1",
     "typescript": "4.5.5",

package/report.api.md

@@ -14,8 +14,6 @@
 <!--SECTION START: Main Entry Types-->
 
 ```ts
-/// <reference types="react" />
-
 import { ComponentPropsWithoutRef } from 'react';
 import { ComponentPropsWithRef } from 'react';
 import type { CSSProperties } from 'react';
@@ -23,6 +21,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';
@@ -152,7 +151,7 @@ const borderWidthMap: {
 
 // @public (undocumented)
 type BoxComponent<T extends ElementType = 'div'> = (<
-  T extends ElementType = 'div'
+  T extends ElementType = 'div',
 >(
   props: UNSAFE_BoxProps<T>,
 ) => ReactElement | null) &
@@ -161,7 +160,7 @@ type BoxComponent<T extends ElementType = 'div'> = (<
 // @public (undocumented)
 type BoxPropsBase<T extends ElementType> = {
   as?: T;
-  children?: NonTextChildren | boolean | null;
+  children?: ReactNode;
   className?: string;
   backgroundColor?: BackgroundColor;
   borderStyle?: BorderStyle;
@@ -351,7 +350,7 @@ const heightMap: {
 // @public (undocumented)
 interface InlineProps extends BasePrimitiveProps {
   alignItems?: FlexAlignItems_2;
-  children: NonTextChildren;
+  children: ReactNode;
   divider?: ReactNode;
   flexWrap?: FlexWrap;
   gap: ColumnGap;
@@ -383,9 +382,6 @@ const lineHeightMap: {
   '40px': SerializedStyles;
 };
 
-// @public (undocumented)
-type NonTextChildren = (JSX.Element | false | null)[] | JSX.Element;
-
 // @public (undocumented)
 type Overflow = keyof typeof overflowMap;
 
@@ -486,7 +482,7 @@ const rowGapMap: {
 // @public (undocumented)
 interface StackProps extends BasePrimitiveProps {
   alignItems?: FlexAlignItems_3;
-  children: NonTextChildren;
+  children: ReactNode;
   flexWrap?: FlexWrap_2;
   gap: RowGap;
   justifyContent?: FlexJustifyContent_3;
@@ -544,8 +540,8 @@ export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<
   BoxPropsBase<T>;
 
 // @public
-export const UNSAFE_Inline: ForwardRefExoticComponent<
-  InlineProps & RefAttributes<HTMLDivElement>
+export const UNSAFE_Inline: MemoExoticComponent<
+  ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>
 >;
 
 // @public (undocumented)
@@ -556,8 +552,8 @@ export const UNSAFE_InteractionSurface: ({
 }: InteractionSurfaceProps) => jsx.JSX.Element;
 
 // @public
-export const UNSAFE_Stack: ForwardRefExoticComponent<
-  StackProps & RefAttributes<HTMLDivElement>
+export const UNSAFE_Stack: MemoExoticComponent<
+  ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>
 >;
 
 // @internal