@atlaskit/primitives 0.3.3 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/primitives
 
+## 0.4.1
+
+### Patch Changes
+
+- [`8e03331eb8b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8e03331eb8b) - Introduce 'as' prop to Inline and Stack so the resulting element can be controlled.
+
+## 0.4.0
+
+### Minor Changes
+
+- [`003c381e37d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/003c381e37d) - Apply `width: 100%` to Inline and Stack when `grow` prop is set to `fill`.
+
 ## 0.3.3
 
 ### Patch Changes

package/dist/cjs/components/box.js

@@ -14,16 +14,15 @@ var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "border
   _excluded2 = ["style", "className"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
  * __Box__
  *
- * A box {description}.
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var as = _ref.as,

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

@@ -41,6 +41,7 @@ var flexGrowMap = {
     flexGrow: 0
   }),
   fill: (0, _react2.css)({
+    width: '100%',
     flexGrow: 1
   })
 };
@@ -183,7 +184,8 @@ var Separator = function Separator(_ref) {
  *
  */
 var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
-  var alignInline = _ref2.alignInline,
+  var as = _ref2.as,
+    alignInline = _ref2.alignInline,
     alignItems = _ref2.alignBlock,
     _ref2$shouldWrap = _ref2.shouldWrap,
     shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
@@ -194,6 +196,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     separator = _ref2.separator,
     testId = _ref2.testId,
     rawChildren = _ref2.children;
+  var Component = as || 'div';
   var separatorComponent = typeof separator === 'string' ? (0, _react2.jsx)(Separator, null, separator) : separator;
   var children = separatorComponent ? _react.Children.toArray(rawChildren).filter(Boolean).map(function (child, index) {
     return (0, _react2.jsx)(_react.Fragment, {
@@ -201,7 +204,7 @@ var Inline = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(Component, {
     css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref

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

@@ -38,6 +38,7 @@ var flexGrowMap = {
     flexGrow: 0
   }),
   fill: (0, _react2.css)({
+    width: '100%',
     flexGrow: 1
   })
 };
@@ -119,15 +120,17 @@ var baseStyles = (0, _react2.css)({
  *
  */
 var Stack = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var alignItems = _ref.alignInline,
+  var as = _ref.as,
+    alignItems = _ref.alignInline,
     alignBlock = _ref.alignBlock,
     spread = _ref.spread,
     grow = _ref.grow,
     space = _ref.space,
     children = _ref.children,
     testId = _ref.testId;
+  var Component = as || 'div';
   var justifyContent = spread || alignBlock;
-  return (0, _react2.jsx)("div", {
+  return (0, _react2.jsx)(Component, {
     css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref

package/dist/cjs/version.json

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

package/dist/es2019/components/box.js

@@ -1,16 +1,15 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
 import { BaseBox } from './internal/base-box.partial';
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
  * __Box__
  *
- * A box {description}.
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 const Box = /*#__PURE__*/forwardRef(({
   as,

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

@@ -34,6 +34,7 @@ const flexGrowMap = {
     flexGrow: 0
   }),
   fill: css({
+    width: '100%',
     flexGrow: 1
   })
 };
@@ -175,6 +176,7 @@ const Separator = ({
  *
  */
 const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
   alignInline,
   alignBlock: alignItems,
   shouldWrap = false,
@@ -186,6 +188,7 @@ 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, {
@@ -193,7 +196,7 @@ const Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   const justifyContent = spread || alignInline;
-  return jsx("div", {
+  return jsx(Component, {
     css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref

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

@@ -31,6 +31,7 @@ const flexGrowMap = {
     flexGrow: 0
   }),
   fill: css({
+    width: '100%',
     flexGrow: 1
   })
 };
@@ -112,6 +113,7 @@ const baseStyles = css({
  *
  */
 const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  as,
   alignInline: alignItems,
   alignBlock,
   spread,
@@ -120,8 +122,9 @@ const Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   children,
   testId
 }, ref) => {
+  const Component = as || 'div';
   const justifyContent = spread || alignBlock;
-  return jsx("div", {
+  return jsx(Component, {
     css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref

package/dist/es2019/version.json

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

package/dist/esm/components/box.js

@@ -4,16 +4,15 @@ var _excluded = ["as", "children", "color", "backgroundColor", "shadow", "border
   _excluded2 = ["style", "className"];
 import React, { forwardRef } from 'react';
 import { BaseBox } from './internal/base-box.partial';
-// TODO: Fill in the component {description} and ensure links point to the correct {packageName} location.
-// Remove links that the component does not have (such as usage). If there are no links remove them all.
 /**
  * __Box__
  *
- * A box {description}.
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var as = _ref.as,

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

@@ -34,6 +34,7 @@ var flexGrowMap = {
     flexGrow: 0
   }),
   fill: css({
+    width: '100%',
     flexGrow: 1
   })
 };
@@ -176,7 +177,8 @@ var Separator = function Separator(_ref) {
  *
  */
 var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
-  var alignInline = _ref2.alignInline,
+  var as = _ref2.as,
+    alignInline = _ref2.alignInline,
     alignItems = _ref2.alignBlock,
     _ref2$shouldWrap = _ref2.shouldWrap,
     shouldWrap = _ref2$shouldWrap === void 0 ? false : _ref2$shouldWrap,
@@ -187,6 +189,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     separator = _ref2.separator,
     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, {
@@ -194,7 +197,7 @@ var Inline = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref2, ref) {
     }, separator && index > 0 ? separatorComponent : null, child);
   }) : rawChildren;
   var justifyContent = spread || alignInline;
-  return jsx("div", {
+  return jsx(Component, {
     css: [baseStyles, space && spaceMap[space], justifyContent && justifyContentMap[justifyContent], grow && flexGrowMap[grow], alignItems && alignItemsMap[alignItems], shouldWrap && flexWrapStyles, rowSpace && rowSpaceMap[rowSpace]],
     "data-testid": testId,
     ref: ref

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

@@ -31,6 +31,7 @@ var flexGrowMap = {
     flexGrow: 0
   }),
   fill: css({
+    width: '100%',
     flexGrow: 1
   })
 };
@@ -112,15 +113,17 @@ var baseStyles = css({
  *
  */
 var Stack = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
-  var alignItems = _ref.alignInline,
+  var as = _ref.as,
+    alignItems = _ref.alignInline,
     alignBlock = _ref.alignBlock,
     spread = _ref.spread,
     grow = _ref.grow,
     space = _ref.space,
     children = _ref.children,
     testId = _ref.testId;
+  var Component = as || 'div';
   var justifyContent = spread || alignBlock;
-  return jsx("div", {
+  return jsx(Component, {
     css: [baseStyles, space && spaceMap[space], alignItems && alignItemsMap[alignItems], grow && flexGrowMap[grow], justifyContent && justifyContentMap[justifyContent]],
     "data-testid": testId,
     ref: ref

package/dist/esm/version.json

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

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

@@ -7,11 +7,12 @@ declare type BoxComponent<T extends ElementType = 'div'> = (<T extends ElementTy
 /**
  * __Box__
  *
- * A box {description}.
+ * A Box is a primitive component that has the design decisions of the Atlassian Design System baked in.
+ * Renders a `div` by default.
  *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
+ * - [Examples](https://atlassian.design/components/primitives/box/examples)
+ * - [Code](https://atlassian.design/components/primitives/box/code)
+ * - [Usage](https://atlassian.design/components/primitives/box/usage)
  */
 declare const Box: BoxComponent;
 export default Box;

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

@@ -1,6 +1,10 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
-export interface InlineProps {
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+export interface InlineProps<T extends ElementType = 'div'> {
+    /**
+     * The DOM element to render as the Inline. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol';
     /**
      * Used to align children along the main axis.
      */
@@ -42,6 +46,7 @@ export interface InlineProps {
      * Elements to be rendered inside the Stack.
      */
     children: ReactNode;
+    ref?: ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
 export declare type AlignBlock = 'start' | 'center' | 'end' | 'baseline';
@@ -104,5 +109,5 @@ export declare type RowSpace = keyof typeof rowSpaceMap;
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<InlineProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "space" | "separator" | "as" | "children" | "testId" | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
 export default Inline;

package/dist/types/components/internal/base-box.partial.d.ts

@@ -8,7 +8,7 @@ declare type BaseBoxPropsFoundation<T extends ElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.
      */
-    as?: 'div' | 'span';
+    as?: 'div' | 'span' | 'li';
     /**
      * The HTML className attribute.
      *

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

@@ -1,6 +1,10 @@
 /** @jsx jsx */
-import { ReactNode } from 'react';
-export interface StackProps {
+import { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
+export interface StackProps<T extends ElementType = 'div'> {
+    /**
+     * The DOM element to render as the Stack. Defaults to `div`.
+     */
+    as?: 'div' | 'span' | 'ul' | 'ol';
     /**
      * Used to align children along the main axis.
      */
@@ -29,6 +33,7 @@ export interface StackProps {
      * Elements to be rendered inside the Stack.
      */
     children: ReactNode;
+    ref?: ComponentPropsWithRef<T>['ref'];
 }
 export declare type AlignInline = 'start' | 'center' | 'end';
 export declare type AlignBlock = 'start' | 'center' | 'end';
@@ -73,5 +78,5 @@ export declare type Space = keyof typeof spaceMap;
  * ```
  *
  */
-declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<StackProps & import("react").RefAttributes<HTMLDivElement>>>;
+declare const Stack: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "space" | "as" | "children" | "testId" | "alignInline" | "alignBlock" | "spread" | "grow"> & import("react").RefAttributes<any>>>;
 export default Stack;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "0.3.3",
+  "version": "0.4.1",
   "description": "Primitives are token-backed low-level building blocks.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",

package/report.api.md

@@ -130,7 +130,7 @@ type BaseBoxProps<T extends ElementType = 'div'> = Omit<
 
 // @public (undocumented)
 type BaseBoxPropsFoundation<T extends ElementType> = {
-  as?: 'div' | 'span';
+  as?: 'div' | 'li' | 'span';
   className?: string;
   children?: ReactNode;
   color?: TextColor;
@@ -356,15 +356,34 @@ const heightMap: {
 
 // @public
 export const Inline: MemoExoticComponent<
-  ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>
+  ForwardRefExoticComponent<
+    Pick<
+      InlineProps<ElementType<any>>,
+      | 'alignBlock'
+      | 'alignInline'
+      | 'as'
+      | 'children'
+      | 'grow'
+      | 'rowSpace'
+      | 'separator'
+      | 'shouldWrap'
+      | 'space'
+      | 'spread'
+      | 'testId'
+    > &
+      RefAttributes<any>
+  >
 >;
 
 // @public (undocumented)
-export interface InlineProps {
+export interface InlineProps<T extends ElementType = 'div'> {
   alignBlock?: AlignBlock;
   alignInline?: AlignInline;
+  as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow;
+  // (undocumented)
+  ref?: ComponentPropsWithRef<T>['ref'];
   rowSpace?: RowSpace;
   separator?: string;
   shouldWrap?: boolean;
@@ -566,15 +585,31 @@ type Spread_2 = 'space-between';
 
 // @public
 export const Stack: MemoExoticComponent<
-  ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>
+  ForwardRefExoticComponent<
+    Pick<
+      StackProps<ElementType<any>>,
+      | 'alignBlock'
+      | 'alignInline'
+      | 'as'
+      | 'children'
+      | 'grow'
+      | 'space'
+      | 'spread'
+      | 'testId'
+    > &
+      RefAttributes<any>
+  >
 >;
 
 // @public (undocumented)
-export interface StackProps {
+export interface StackProps<T extends ElementType = 'div'> {
   alignBlock?: AlignBlock_2;
   alignInline?: AlignInline_2;
+  as?: 'div' | 'ol' | 'span' | 'ul';
   children: ReactNode;
   grow?: Grow_2;
+  // (undocumented)
+  ref?: ComponentPropsWithRef<T>['ref'];
   space?: Space_2;
   spread?: Spread_2;
   testId?: string;

package/tmp/api-report-tmp.d.ts

@@ -114,7 +114,7 @@ type BaseBoxProps<T extends ElementType = 'div'> = Omit<ComponentPropsWithoutRef
 
 // @public (undocumented)
 type BaseBoxPropsFoundation<T extends ElementType> = {
-    as?: 'div' | 'span';
+    as?: 'div' | 'li' | 'span';
     className?: string;
     children?: ReactNode;
     color?: TextColor;
@@ -293,14 +293,17 @@ const heightMap: {
 };
 
 // @public
-export const Inline: MemoExoticComponent<ForwardRefExoticComponent<InlineProps & RefAttributes<HTMLDivElement>>>;
+export const Inline: MemoExoticComponent<ForwardRefExoticComponent<Pick<InlineProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "rowSpace" | "separator" | "shouldWrap" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
 
 // @public (undocumented)
-export interface InlineProps {
+export interface InlineProps<T extends ElementType = 'div'> {
     alignBlock?: AlignBlock;
     alignInline?: AlignInline;
+    as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow;
+    // (undocumented)
+    ref?: ComponentPropsWithRef<T>['ref'];
     rowSpace?: RowSpace;
     separator?: string;
     shouldWrap?: boolean;
@@ -501,14 +504,17 @@ type Spread = 'space-between';
 type Spread_2 = 'space-between';
 
 // @public
-export const Stack: MemoExoticComponent<ForwardRefExoticComponent<StackProps & RefAttributes<HTMLDivElement>>>;
+export const Stack: MemoExoticComponent<ForwardRefExoticComponent<Pick<StackProps<ElementType<any>>, "alignBlock" | "alignInline" | "as" | "children" | "grow" | "space" | "spread" | "testId"> & RefAttributes<any>>>;
 
 // @public (undocumented)
-export interface StackProps {
+export interface StackProps<T extends ElementType = 'div'> {
     alignBlock?: AlignBlock_2;
     alignInline?: AlignInline_2;
+    as?: 'div' | 'ol' | 'span' | 'ul';
     children: ReactNode;
     grow?: Grow_2;
+    // (undocumented)
+    ref?: ComponentPropsWithRef<T>['ref'];
     space?: Space_2;
     spread?: Spread_2;
     testId?: string;