@atlaskit/ds-explorations 1.2.0 → 1.2.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/ds-explorations
 
+## 1.2.2
+
+### Patch Changes
+
+- [`1dec7b39f7b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1dec7b39f7b) - - Children are only iterated over when divider prop is passed. There should be no behaviour change.
+  - Add `user-select: none;` to divider.
+
+## 1.2.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 1.2.0
 
 ### Minor Changes

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

@@ -60,7 +60,8 @@ var baseStyles = (0, _react2.css)({
 var dividerStyles = (0, _react2.css)({
   margin: '0 -2px',
   color: "var(--ds-text-subtle, #42526E)",
-  pointerEvents: 'none'
+  pointerEvents: 'none',
+  userSelect: 'none'
 });
 
 var Divider = function Divider(_ref) {
@@ -94,22 +95,20 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
       flexWrap = _ref2.flexWrap,
       divider = _ref2.divider,
       UNSAFE_style = _ref2.UNSAFE_style,
-      children = _ref2.children,
+      rawChildren = _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);
-
+  var children = divider ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return (0, _react2.jsx)(_react.Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
   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
-  }, childrenArray.map(function (child, index) {
-    return (0, _react2.jsx)(_react.Fragment, {
-      key: index
-    }, divider && index > 0 ? dividerComponent : null, child);
-  }));
+  }, children);
 }));
 Inline.displayName = 'Inline';
 var _default = Inline;

package/dist/cjs/version.json

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

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

@@ -51,7 +51,8 @@ const baseStyles = css({
 const dividerStyles = css({
   margin: '0 -2px',
   color: "var(--ds-text-subtle, #42526E)",
-  pointerEvents: 'none'
+  pointerEvents: 'none',
+  userSelect: 'none'
 });
 
 const Divider = ({
@@ -84,21 +85,21 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   flexWrap,
   divider,
   UNSAFE_style,
-  children,
+  children: rawChildren,
   testId
 }, ref) => {
   const dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
-  const childrenArray = Children.toArray(children).filter(Boolean);
+  const children = divider ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
   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
-  }, childrenArray.map((child, index) => {
-    return jsx(Fragment, {
-      key: index
-    }, divider && index > 0 ? dividerComponent : null, child);
-  }));
+  }, children);
 }));
 Inline.displayName = 'Inline';
 export default Inline;

package/dist/es2019/version.json

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

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

@@ -51,7 +51,8 @@ var baseStyles = css({
 var dividerStyles = css({
   margin: '0 -2px',
   color: "var(--ds-text-subtle, #42526E)",
-  pointerEvents: 'none'
+  pointerEvents: 'none',
+  userSelect: 'none'
 });
 
 var Divider = function Divider(_ref) {
@@ -85,20 +86,20 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
       flexWrap = _ref2.flexWrap,
       divider = _ref2.divider,
       UNSAFE_style = _ref2.UNSAFE_style,
-      children = _ref2.children,
+      rawChildren = _ref2.children,
       testId = _ref2.testId;
   var dividerComponent = typeof divider === 'string' ? jsx(Divider, null, divider) : divider;
-  var childrenArray = Children.toArray(children).filter(Boolean);
+  var children = divider ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
+    return jsx(Fragment, {
+      key: index
+    }, divider && index > 0 ? dividerComponent : null, child);
+  }) : rawChildren;
   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
-  }, childrenArray.map(function (child, index) {
-    return jsx(Fragment, {
-      key: index
-    }, divider && index > 0 ? dividerComponent : null, child);
-  }));
+  }, children);
 }));
 Inline.displayName = 'Inline';
 export default Inline;

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/ds-explorations",
-	"version": "1.2.0",
+	"version": "1.2.2",
 	"sideEffects": 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/ds-explorations",
-  "version": "1.2.0",
+  "version": "1.2.2",
   "description": "An experimental package for exploration and validation of spacing / typography foundations.",
   "license": "Apache-2.0",
   "atlassian": {
@@ -39,7 +39,7 @@
     "./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"
@@ -66,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

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

package/scripts/utils.tsx

@@ -10,15 +10,24 @@ export const tokenToStyle = (
 
 type BooleanCallback<T> = (args: T) => boolean;
 
-export const compose = (...fns: ((...any: any[]) => any)[]) => (x: any) =>
-  fns.reduce((res, fn) => fn(res), x);
-export const pick = <T extends any>(key: keyof T) => (obj: T) => obj[key];
+export const compose =
+  (...fns: ((...any: any[]) => any)[]) =>
+  (x: any) =>
+    fns.reduce((res, fn) => fn(res), x);
+export const pick =
+  <T extends any>(key: keyof T) =>
+  (obj: T) =>
+    obj[key];
 export const isAccent = (str: string) => str.includes('accent');
 export const isPressed = (str: string) => str.includes('pressed');
 export const isHovered = (str: string) => str.includes('hovered');
-export const not = <T extends any>(cb: BooleanCallback<T>) => (val: T) =>
-  !cb(val);
-export const or = <T extends any>(...fns: BooleanCallback<T>[]) => (val: T) =>
-  fns.some((fn) => fn(val));
+export const not =
+  <T extends any>(cb: BooleanCallback<T>) =>
+  (val: T) =>
+    !cb(val);
+export const or =
+  <T extends any>(...fns: BooleanCallback<T>[]) =>
+  (val: T) =>
+    fns.some((fn) => fn(val));
 export const capitalize = (str: string) =>
   str.charAt(0).toUpperCase() + str.slice(1);

package/src/components/box.partial.tsx

@@ -118,7 +118,7 @@ type BoxPropsBase<T extends ElementType> = {
 
 // Without this type annotation on Box we don't get autocomplete for props due to forwardRef types
 type BoxComponent<T extends ElementType = 'div'> = (<
-  T extends ElementType = 'div'
+  T extends ElementType = 'div',
 >(
   props: BoxProps<T>,
 ) => ReactElement | null) &

package/src/components/inline.partial.tsx

@@ -69,6 +69,7 @@ const dividerStyles = css({
   margin: '0 -2px',
   color: token('color.text.subtle', '#42526E'),
   pointerEvents: 'none',
+  userSelect: 'none',
 });
 
 const Divider: FC = ({ children }) => (
@@ -101,14 +102,26 @@ const Inline = memo(
         flexWrap,
         divider,
         UNSAFE_style,
-        children,
+        children: rawChildren,
         testId,
       },
       ref,
     ) => {
       const dividerComponent =
         typeof divider === 'string' ? <Divider>{divider}</Divider> : divider;
-      const childrenArray = Children.toArray(children).filter(Boolean);
+
+      const children = divider
+        ? Children.toArray(rawChildren)
+            .filter(Boolean)
+            .map((child, index) => {
+              return (
+                <Fragment key={index}>
+                  {divider && index > 0 ? dividerComponent : null}
+                  {child}
+                </Fragment>
+              );
+            })
+        : rawChildren;
 
       return (
         <div
@@ -123,14 +136,7 @@ const Inline = memo(
           data-testid={testId}
           ref={ref}
         >
-          {childrenArray.map((child, index) => {
-            return (
-              <Fragment key={index}>
-                {divider && index > 0 ? dividerComponent : null}
-                {child}
-              </Fragment>
-            );
-          })}
+          {children}
         </div>
       );
     },

package/src/components/surface-provider.tsx

@@ -7,9 +7,8 @@ import type { BackgroundColor } from './box.partial';
  *
  * A surface context provides context information on the current background (if set).
  */
-export const SurfaceContext = createContext<BackgroundColor>(
-  'elevation.surface',
-);
+export const SurfaceContext =
+  createContext<BackgroundColor>('elevation.surface');
 
 /**
  * __useSurface__