@atlaskit/primitives 1.0.1 → 1.0.2

package/dist/es2019/components/inline.js

@@ -2,56 +2,17 @@
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-import { parseXcss } from '../xcss/xcss';
-const alignItemsMap = {
-  center: css({
-    alignItems: 'center'
-  }),
-  baseline: css({
-    alignItems: 'baseline'
-  }),
-  start: css({
-    alignItems: 'flex-start'
-  }),
-  end: css({
-    alignItems: 'flex-end'
-  }),
-  stretch: css({
-    alignItems: 'stretch'
-  })
-};
-const justifyContentMap = {
-  start: css({
-    justifyContent: 'flex-start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'flex-end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 const flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-const flexWrapStyles = css({
-  flexWrap: 'wrap'
-});
-const baseStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'row'
-});
 const separatorStyles = css({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
@@ -94,7 +55,6 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   testId,
   children: rawChildren
 }, ref) => {
-  const Component = as || 'div';
   const separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
   const children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map((child, index) => {
     return jsx(Fragment, {
@@ -102,12 +62,18 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   const justifyContent = spread || alignInline;
-  const className = xcss && parseXcss(xcss);
-  return jsx(Component, {
-    css: [
+  return jsx(Flex, {
+    as: as,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    direction: "row",
+    gap: space,
+    rowGap: rowSpace,
+    wrap: shouldWrap ? 'wrap' : undefined,
+    xcss: grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] :
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className, baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
-    "data-testid": testId,
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/es2019/components/stack.js

@@ -1,52 +1,23 @@
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-const justifyContentMap = {
-  start: css({
-    justifyContent: 'start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
-const alignItemsMap = {
-  start: css({
-    alignItems: 'start'
-  }),
-  center: css({
-    alignItems: 'center'
-  }),
-  end: css({
-    alignItems: 'end'
-  })
-};
+import { jsx } from '@emotion/react';
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 const flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-const baseStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'column'
-});
 
 /**
  * __Stack__
  *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -65,13 +36,20 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   grow,
   space,
   children,
-  testId
+  testId,
+  xcss
 }, ref) => {
-  const Component = as || 'div';
   const justifyContent = spread || alignBlock;
-  return jsx(Component, {
-    css: [baseStyles, space && spaceStylesMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
-    "data-testid": testId,
+  return jsx(Flex, {
+    as: as,
+    gap: space,
+    direction: "column",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    xcss: grow ? [flexGrowMap[grow], ...(Array.isArray(xcss) ? xcss : [xcss])] :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/es2019/index.js

@@ -4,4 +4,5 @@ export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { default as Grid } from './components/grid';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/es2019/responsive/build-media-query-css.js

@@ -30,7 +30,6 @@ export const UNSAFE_buildAboveMediaQueryCSS = input => {
   return UNSAFE_BREAKPOINTS_ORDERED_LIST.reduce((acc, breakpoint) => ({
     ...acc,
     [breakpoint]: css({
-      // eslint-disable-next-line @repo/internal/styles/no-nested-styles
       [media.above[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
     })
   }), {});

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"sideEffects": false
 }

package/dist/es2019/xcss/xcss.js

@@ -142,7 +142,7 @@ export const parseXcss = args => {
 
 // unused private functions only so we can extract the return type from a generic function
 const boxWrapper = style => xcss(style);
-const inlineWrapper = style => xcss(style);
+const spaceWrapper = style => xcss(style);
 /**
  * ### xcss
  *

package/dist/esm/components/flex.js

@@ -55,6 +55,9 @@ var alignItemsMap = {
   }),
   end: css({
     alignItems: 'end'
+  }),
+  stretch: css({
+    alignItems: 'stretch'
   })
 };
 var baseStyles = css({
@@ -83,20 +86,21 @@ var baseStyles = css({
  * ```
  */
 var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var as = _ref.as,
+  var _ref$as = _ref.as,
+    Component = _ref$as === void 0 ? 'div' : _ref$as,
     alignItems = _ref.alignItems,
     justifyContent = _ref.justifyContent,
     gap = _ref.gap,
+    columnGap = _ref.columnGap,
     rowGap = _ref.rowGap,
     children = _ref.children,
     testId = _ref.testId,
     direction = _ref.direction,
     wrap = _ref.wrap,
     xcss = _ref.xcss;
-  var Component = as || 'div';
   var xcssClassName = xcss && parseXcss(xcss);
   return jsx(Component, {
-    css: [baseStyles, gap && spaceStylesMap.gap[gap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     xcssClassName && xcssClassName],
     "data-testid": testId,

package/dist/esm/components/grid.js

@@ -0,0 +1,119 @@
+/* eslint-disable @repo/internal/styles/no-exported-styles */
+/** @jsx jsx */
+import { forwardRef, memo } from 'react';
+import { css, jsx } from '@emotion/react';
+import { spaceStylesMap } from '../xcss/style-maps.partial';
+import { parseXcss } from '../xcss/xcss';
+var justifyContentMap = {
+  start: css({
+    justifyContent: 'start'
+  }),
+  center: css({
+    justifyContent: 'center'
+  }),
+  end: css({
+    justifyContent: 'end'
+  }),
+  'space-between': css({
+    justifyContent: 'space-between'
+  }),
+  'space-around': css({
+    justifyContent: 'space-around'
+  }),
+  'space-evenly': css({
+    justifyContent: 'space-evenly'
+  }),
+  stretch: css({
+    justifyContent: 'stretch'
+  })
+};
+var alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+var baseStyles = css({
+  display: 'grid',
+  boxSizing: 'border-box'
+});
+var gridAutoFlowMap = {
+  row: css({
+    gridAutoFlow: 'row'
+  }),
+  column: css({
+    gridAutoFlow: 'column'
+  }),
+  dense: css({
+    gridAutoFlow: 'dense'
+  }),
+  'row dense': css({
+    gridAutoFlow: 'row dense'
+  }),
+  'column dense': css({
+    gridAutoFlow: 'column dense'
+  })
+};
+
+/**
+ * __Grid__
+ *
+ * `Grid` is a primitive component that implements the CSS Grid API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/grid/examples)
+ * - [Code](https://atlassian.design/components/primitives/grid/code)
+ *
+ * @example
+ * ```tsx
+ * import { Grid, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Grid gap="space.100" gridColumns="1fr 1fr">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Grid>
+ * )
+ * ```
+ */
+var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var as = _ref.as,
+    alignItems = _ref.alignItems,
+    justifyContent = _ref.justifyContent,
+    gap = _ref.gap,
+    columnGap = _ref.columnGap,
+    rowGap = _ref.rowGap,
+    children = _ref.children,
+    testId = _ref.testId,
+    autoFlow = _ref.autoFlow,
+    gridTemplateAreas = _ref.templateAreas,
+    gridTemplateRows = _ref.templateRows,
+    gridTemplateColumns = _ref.templateColumns,
+    xcss = _ref.xcss;
+  var Component = as || 'div';
+  var xcssClassName = xcss && parseXcss(xcss);
+  var style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
+    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(function (str) {
+      return "\"".concat(str, "\"");
+    }).join('\n') : undefined,
+    gridTemplateColumns: gridTemplateColumns,
+    gridTemplateRows: gridTemplateRows
+  }) : undefined;
+  return jsx(Component, {
+    style: style,
+    css: [baseStyles, gap && spaceStylesMap.gap[gap], columnGap && spaceStylesMap.columnGap[columnGap], rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcssClassName && xcssClassName],
+    "data-testid": testId,
+    ref: ref
+  }, children);
+}));
+Grid.displayName = 'Grid';
+export default Grid;

package/dist/esm/components/inline.js

@@ -1,57 +1,19 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { Children, forwardRef, Fragment, memo } from 'react';
 import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-import { parseXcss } from '../xcss/xcss';
-var alignItemsMap = {
-  center: css({
-    alignItems: 'center'
-  }),
-  baseline: css({
-    alignItems: 'baseline'
-  }),
-  start: css({
-    alignItems: 'flex-start'
-  }),
-  end: css({
-    alignItems: 'flex-end'
-  }),
-  stretch: css({
-    alignItems: 'stretch'
-  })
-};
-var justifyContentMap = {
-  start: css({
-    justifyContent: 'flex-start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'flex-end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 var flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-var flexWrapStyles = css({
-  flexWrap: 'wrap'
-});
-var baseStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'row'
-});
 var separatorStyles = css({
   color: "var(--ds-text-subtle, #42526E)",
   marginBlock: "var(--ds-space-0, 0px)",
@@ -96,7 +58,6 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     xcss = _ref2.xcss,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
-  var Component = as || 'div';
   var separatorComponent = typeof separator === 'string' ? jsx(Separator, null, separator) : separator;
   var children = separatorComponent ? Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return jsx(Fragment, {
@@ -104,12 +65,18 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
-  var className = xcss && parseXcss(xcss);
-  return jsx(Component, {
-    css: [
+  return jsx(Flex, {
+    as: as,
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    direction: "row",
+    gap: space,
+    rowGap: rowSpace,
+    wrap: shouldWrap ? 'wrap' : undefined,
+    xcss: grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) :
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    className, baseStyles, space && spaceStylesMap.gap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && spaceStylesMap.rowGap[rowSpace]],
-    "data-testid": testId,
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/esm/components/stack.js

@@ -1,52 +1,24 @@
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /** @jsx jsx */
 import { forwardRef, memo } from 'react';
-import { css, jsx } from '@emotion/react';
-import { spaceStylesMap } from '../xcss/style-maps.partial';
-var justifyContentMap = {
-  start: css({
-    justifyContent: 'start'
-  }),
-  center: css({
-    justifyContent: 'center'
-  }),
-  end: css({
-    justifyContent: 'end'
-  }),
-  'space-between': css({
-    justifyContent: 'space-between'
-  })
-};
-var alignItemsMap = {
-  start: css({
-    alignItems: 'start'
-  }),
-  center: css({
-    alignItems: 'center'
-  }),
-  end: css({
-    alignItems: 'end'
-  })
-};
+import { jsx } from '@emotion/react';
+import { xcss } from '../xcss/xcss';
+import Flex from './flex';
 var flexGrowMap = {
-  hug: css({
+  hug: xcss({
     flexGrow: 0
   }),
-  fill: css({
+  fill: xcss({
     width: '100%',
     flexGrow: 1
   })
 };
-var baseStyles = css({
-  display: 'flex',
-  boxSizing: 'border-box',
-  flexDirection: 'column'
-});
 
 /**
  * __Stack__
  *
- * Stack is a primitive component based on flexbox that manages the vertical layout of direct children.
+ * Stack is a primitive component based on flexbox that manages the block layout of direct children.
  *
  * @example
  * ```tsx
@@ -65,12 +37,19 @@ var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
     grow = _ref.grow,
     space = _ref.space,
     children = _ref.children,
-    testId = _ref.testId;
-  var Component = as || 'div';
+    testId = _ref.testId,
+    xcss = _ref.xcss;
   var justifyContent = spread || alignBlock;
-  return jsx(Component, {
-    css: [baseStyles, space && spaceStylesMap.gap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
-    "data-testid": testId,
+  return jsx(Flex, {
+    as: as,
+    gap: space,
+    direction: "column",
+    alignItems: alignItems,
+    justifyContent: justifyContent,
+    xcss: grow ? [flexGrowMap[grow]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])) :
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    xcss,
+    testId: testId,
     ref: ref
   }, children);
 }));

package/dist/esm/index.js

@@ -4,4 +4,5 @@ export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
 export { default as Flex } from './components/flex';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { default as Grid } from './components/grid';
+export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"sideEffects": false
 }

package/dist/esm/xcss/xcss.js

@@ -152,7 +152,7 @@ export var parseXcss = function parseXcss(args) {
 var boxWrapper = function boxWrapper(style) {
   return xcss(style);
 };
-var inlineWrapper = function inlineWrapper(style) {
+var spaceWrapper = function spaceWrapper(style) {
   return xcss(style);
 };
 /**

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

@@ -6,7 +6,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
     /**
      * The DOM element to render as the Flex. Defaults to `div`.
      */
-    as?: 'div' | 'span' | 'ul' | 'ol';
+    as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
     /**
      * Used to align children along the main axis.
      */
@@ -15,6 +15,10 @@ export type FlexProps<T extends ElementType = 'div'> = {
      * Used to align children along the cross axis.
      */
     alignItems?: AlignItems;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: Space;
     /**
      * Represents the space between each child.
      */
@@ -32,7 +36,7 @@ export type FlexProps<T extends ElementType = 'div'> = {
      */
     wrap?: Wrap;
     /**
-     * Elements to be rendered inside the Stack.
+     * Elements to be rendered inside the Flex.
      */
     children: ReactNode;
     /**
@@ -66,6 +70,7 @@ declare const alignItemsMap: {
     readonly center: import("@emotion/react").SerializedStyles;
     readonly baseline: import("@emotion/react").SerializedStyles;
     readonly end: import("@emotion/react").SerializedStyles;
+    readonly stretch: import("@emotion/react").SerializedStyles;
 };
 /**
  * __Flex__
@@ -91,15 +96,19 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * The DOM element to render as the Flex. Defaults to `div`.
      */
-    as?: "div" | "ol" | "span" | "ul" | undefined;
+    as?: "div" | "li" | "ol" | "span" | "ul" | undefined;
     /**
      * Used to align children along the main axis.
      */
-    justifyContent?: "start" | "center" | "end" | "stretch" | "space-between" | "space-around" | "space-evenly" | undefined;
+    justifyContent?: "space-around" | "space-between" | "space-evenly" | "stretch" | "center" | "end" | "start" | undefined;
     /**
      * Used to align children along the cross axis.
      */
-    alignItems?: "start" | "center" | "end" | "baseline" | undefined;
+    alignItems?: "stretch" | "center" | "end" | "start" | "baseline" | undefined;
+    /**
+     * Represents the space between each child.
+     */
+    columnGap?: "space.0" | "space.025" | "space.050" | "space.075" | "space.100" | "space.150" | "space.200" | "space.250" | "space.300" | "space.400" | "space.500" | "space.600" | "space.800" | "space.1000" | undefined;
     /**
      * Represents the space between each child.
      */
@@ -115,14 +124,14 @@ declare const Flex: import("react").MemoExoticComponent<import("react").ForwardR
     /**
      * Represents the flex wrap property of CSS flexbox.
      */
-    wrap?: "wrap" | "nowrap" | undefined;
+    wrap?: "nowrap" | "wrap" | undefined;
     /**
-     * Elements to be rendered inside the Stack.
+     * Elements to be rendered inside the Flex.
      */
     children: ReactNode;
     /**
      * Forwarded ref element
      */
     ref?: any;
-} & BasePrimitiveProps, "gap" | "rowGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "wrap"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "gap" | "rowGap" | "columnGap" | "alignItems" | "direction" | "justifyContent" | "as" | "children" | keyof BasePrimitiveProps | "wrap"> & import("react").RefAttributes<any>>>;
 export default Flex;