@atlaskit/primitives 1.0.0 → 1.0.2

package/dist/cjs/responsive/media-helper.js

@@ -20,10 +20,25 @@ var UNSAFE_media = {
      * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
      */
     xxs: "@media all",
+    /**
+     * Used for mobile viewports.
+     */
     xs: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xs.min, ")"),
+    /**
+     * Used for tablet viewports.
+     */
     sm: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.sm.min, ")"),
+    /**
+     * Used for laptop viewports.
+     */
     md: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.md.min, ")"),
+    /**
+     * Used for desktop viewports.
+     */
     lg: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.lg.min, ")"),
+    /**
+     * Used for wide screen desktop viewports.
+     */
     xl: "@media (min-width: ".concat(_constants.UNSAFE_BREAKPOINTS_CONFIG.xl.min, ")")
   },
   /**

package/dist/cjs/version.json

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

package/dist/cjs/xcss/xcss.js

@@ -161,7 +161,7 @@ exports.parseXcss = parseXcss;
 var boxWrapper = function boxWrapper(style) {
   return xcss(style);
 };
-var inlineWrapper = function inlineWrapper(style) {
+var spaceWrapper = function spaceWrapper(style) {
   return xcss(style);
 };
 /**

package/dist/es2019/components/flex.js

@@ -0,0 +1,111 @@
+/* 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';
+const 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'
+  })
+};
+const flexDirectionMap = {
+  column: css({
+    flexDirection: 'column'
+  }),
+  row: css({
+    flexDirection: 'row'
+  })
+};
+const flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  }),
+  nowrap: css({
+    flexWrap: 'nowrap'
+  })
+};
+const alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  }),
+  stretch: css({
+    alignItems: 'stretch'
+  })
+};
+const baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box'
+});
+
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as: Component = 'div',
+  alignItems,
+  justifyContent,
+  gap,
+  columnGap,
+  rowGap,
+  children,
+  testId,
+  direction,
+  wrap,
+  xcss
+}, ref) => {
+  const xcssClassName = xcss && parseXcss(xcss);
+  return jsx(Component, {
+    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,
+    ref: ref
+  }, children);
+}));
+Flex.displayName = 'Flex';
+export default Flex;

package/dist/es2019/components/grid.js

@@ -0,0 +1,118 @@
+/* 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';
+const 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'
+  })
+};
+const alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  })
+};
+const baseStyles = css({
+  display: 'grid',
+  boxSizing: 'border-box'
+});
+const 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>
+ * )
+ * ```
+ */
+const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
+  alignItems,
+  justifyContent,
+  gap,
+  columnGap,
+  rowGap,
+  children,
+  testId,
+  autoFlow,
+  templateAreas: gridTemplateAreas,
+  templateRows: gridTemplateRows,
+  templateColumns: gridTemplateColumns,
+  xcss
+}, ref) => {
+  const Component = as || 'div';
+  const xcssClassName = xcss && parseXcss(xcss);
+  const style = gridTemplateAreas || gridTemplateColumns || gridTemplateRows ? Object.assign({}, {
+    gridTemplateAreas: gridTemplateAreas ? gridTemplateAreas.map(str => `"${str}"`).join('\n') : undefined,
+    gridTemplateColumns,
+    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/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

@@ -3,4 +3,6 @@ export { default as Pressable } from './components/pressable';
 export { default as Inline } from './components/inline';
 export { xcss } from './xcss/xcss';
 export { default as Stack } from './components/stack';
-export { UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
+export { default as Flex } from './components/flex';
+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/responsive/media-helper.js

@@ -15,10 +15,25 @@ export const UNSAFE_media = {
      * `above.xxs` is redundant and no media query should be used, but it's included for programatic purposes…
      */
     xxs: `@media all`,
+    /**
+     * Used for mobile viewports.
+     */
     xs: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xs.min})`,
+    /**
+     * Used for tablet viewports.
+     */
     sm: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.sm.min})`,
+    /**
+     * Used for laptop viewports.
+     */
     md: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.md.min})`,
+    /**
+     * Used for desktop viewports.
+     */
     lg: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.lg.min})`,
+    /**
+     * Used for wide screen desktop viewports.
+     */
     xl: `@media (min-width: ${UNSAFE_BREAKPOINTS_CONFIG.xl.min})`
   },
   /**

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "1.0.0",
+	"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

@@ -0,0 +1,111 @@
+/* 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 flexDirectionMap = {
+  column: css({
+    flexDirection: 'column'
+  }),
+  row: css({
+    flexDirection: 'row'
+  })
+};
+var flexWrapMap = {
+  wrap: css({
+    flexWrap: 'wrap'
+  }),
+  nowrap: css({
+    flexWrap: 'nowrap'
+  })
+};
+var alignItemsMap = {
+  start: css({
+    alignItems: 'start'
+  }),
+  center: css({
+    alignItems: 'center'
+  }),
+  baseline: css({
+    alignItems: 'baseline'
+  }),
+  end: css({
+    alignItems: 'end'
+  }),
+  stretch: css({
+    alignItems: 'stretch'
+  })
+};
+var baseStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box'
+});
+
+/**
+ * __Flex__
+ *
+ * `Flex` is a primitive component that implements the CSS Flexbox API.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/flex/examples)
+ * - [Code](https://atlassian.design/components/primitives/flex/code)
+ *
+ * @example
+ * ```tsx
+ * import { Flex, Box } from '@atlaskit/primitives'
+ *
+ * const Component = () => (
+ *   <Flex direction="column">
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *     <Box padding="space.100" backgroundColor="neutral"></Box>
+ *   </Flex>
+ * )
+ * ```
+ */
+var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
+  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 xcssClassName = xcss && parseXcss(xcss);
+  return jsx(Component, {
+    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,
+    ref: ref
+  }, children);
+}));
+Flex.displayName = 'Flex';
+export default Flex;