@atlaskit/ds-explorations 1.1.0 → 1.2.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/ds-explorations
 
+## 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.0",
 	"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.0",
 	"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.0",
 	"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/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.0",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -34,7 +34,9 @@
   "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",

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';
@@ -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,9 +540,9 @@ export type UNSAFE_BoxProps<T extends ElementType = 'div'> = Omit<
   BoxPropsBase<T>;
 
 // @public
-export const UNSAFE_Inline: ForwardRefExoticComponent<
+export const UNSAFE_Inline: MemoExoticComponent<ForwardRefExoticComponent<
   InlineProps & RefAttributes<HTMLDivElement>
->;
+>>;
 
 // @public (undocumented)
 export const UNSAFE_InteractionSurface: ({
@@ -556,9 +552,9 @@ export const UNSAFE_InteractionSurface: ({
 }: InteractionSurfaceProps) => jsx.JSX.Element;
 
 // @public
-export const UNSAFE_Stack: ForwardRefExoticComponent<
+export const UNSAFE_Stack: MemoExoticComponent<ForwardRefExoticComponent<
   StackProps & RefAttributes<HTMLDivElement>
->;
+>>;
 
 // @internal
 export const UNSAFE_Text: FC<UNSAFE_TextProps>;

package/src/components/box.partial.tsx

@@ -6,6 +6,7 @@ import {
   FC,
   forwardRef,
   ReactElement,
+  ReactNode,
 } from 'react';
 
 import { css, jsx } from '@emotion/react';
@@ -13,7 +14,7 @@ import { css, jsx } from '@emotion/react';
 import { token } from '@atlaskit/tokens';
 
 import { SurfaceContext } from './surface-provider';
-import type { BasePrimitiveProps, NonTextChildren } from './types';
+import type { BasePrimitiveProps } from './types';
 
 type PropsToOmit = 'as' | 'className' | 'style';
 
@@ -32,7 +33,7 @@ type BoxPropsBase<T extends ElementType> = {
   /**
    * Elements to be rendered inside the Box.
    */
-  children?: NonTextChildren | boolean | null;
+  children?: ReactNode;
   /**
    * The HTML className attribute.
    *
@@ -89,11 +90,11 @@ 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;
   /**