@atlaskit/table 0.2.7 → 0.3.0

package/dist/es2019/expandable-row-content.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ExpandContentContextProvider } from './hooks/use-expand-content';
+/**
+ * __Expandable row content__
+ *
+ * Contains expandable content. Uses a context provider to allow children
+ * to identify if they are expandable content.
+ */
+const ExpandableRowContent = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(ExpandContentContextProvider, null, children);
+};
+export default ExpandableRowContent;

package/dist/es2019/expandable-row.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { ExpandContextProvider } from './hooks/use-expand';
+/**
+ * __Expandable row__
+ *
+ * A context provider for `<Row>` to support expandable content.
+ */
+const ExpandableRow = ({
+  children,
+  isExpanded,
+  isDefaultExpanded
+}) => {
+  return /*#__PURE__*/React.createElement(ExpandContextProvider, {
+    isExpanded: isExpanded,
+    isDefaultExpanded: isDefaultExpanded
+  }, children);
+};
+export default ExpandableRow;

package/dist/es2019/head-cell.js

@@ -10,7 +10,7 @@ import { TH } from './ui/th';
  *
  * HeadCell element
  */
-const Column = ({
+const HeadCell = ({
   children,
   align,
   testId,
@@ -22,9 +22,9 @@ const Column = ({
     align: align,
     testId: testId,
     backgroundColor: backgroundColor
-  }, jsx(Text, {
+  }, children && jsx(Text, {
     color: "color.text",
     fontWeight: "medium"
   }, children));
 };
-export default Column;
+export default HeadCell;

package/dist/es2019/hooks/selection-provider.js

@@ -6,10 +6,6 @@ const SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]
  * __Selection provider__
  *
  * A selection provider injects selection specific state into the table.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
 const SelectionProvider = ({
   children

package/dist/es2019/hooks/use-expand-content.js

@@ -0,0 +1,23 @@
+import React, { createContext, useContext } from 'react';
+const ExpandContentContext = /*#__PURE__*/createContext({
+  isExpandableContent: false
+});
+
+/**
+ * __Expand content provider__
+ *
+ * An expand content provider allows `<Row>` to determine if it is a subitem.
+ */
+export const ExpandContentContextProvider = ({
+  children
+}) => {
+  return /*#__PURE__*/React.createElement(ExpandContentContext.Provider, {
+    value: {
+      isExpandableContent: true
+    }
+  }, children);
+};
+const useExpandContent = () => {
+  return useContext(ExpandContentContext);
+};
+export default useExpandContent;

package/dist/es2019/hooks/use-expand.js

@@ -0,0 +1,32 @@
+import React, { createContext, useCallback, useContext, useState } from 'react';
+import __noop from '@atlaskit/ds-lib/noop';
+const ExpandContext = /*#__PURE__*/createContext({
+  isExpanded: false,
+  toggleExpanded: __noop
+});
+
+/**
+ * __Expand context provider__
+ *
+ * An expand context provider.
+ */
+export const ExpandContextProvider = ({
+  children,
+  isExpanded: isExpandedProp,
+  isDefaultExpanded = false
+}) => {
+  const [isExpanded, setIsExpanded] = useState(isDefaultExpanded);
+  const toggleExpanded = useCallback(() => {
+    setIsExpanded(v => !v);
+  }, []);
+  return /*#__PURE__*/React.createElement(ExpandContext.Provider, {
+    value: {
+      isExpanded: isExpandedProp || isExpanded,
+      toggleExpanded
+    }
+  }, children);
+};
+const useExpand = () => {
+  return useContext(ExpandContext);
+};
+export default useExpand;

package/dist/es2019/index.js

@@ -2,6 +2,9 @@ export { default } from './table';
 export { default as TBody } from './body';
 export { default as Row } from './row';
 export { TD as Cell } from './ui';
+export { default as ExpandableCell } from './expandable-cell';
+export { default as ExpandableRow } from './expandable-row';
+export { default as ExpandableRowContent } from './expandable-row-content';
 export { default as HeadCell } from './head-cell';
 export { default as SortableColumn } from './sortable-column';
 export { default as THead } from './thead';

package/dist/es2019/row.js

@@ -2,6 +2,8 @@
 import { memo, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSelection } from './hooks/selection-provider';
+import useExpand from './hooks/use-expand';
+import useExpandContent from './hooks/use-expand-content';
 import { useRowId } from './hooks/use-row-id';
 import { useTable } from './hooks/use-table';
 import { useTableBody } from './hooks/use-table-body';
@@ -28,16 +30,32 @@ const Row = /*#__PURE__*/memo(({
     allChecked,
     checked
   }] = useSelection();
+  const {
+    isExpanded
+  } = useExpand();
+  const {
+    isExpandableContent
+  } = useExpandContent();
   const rowId = useRowId();
   const isSelected = useMemo(() => {
-    if (!isSelectable) {
+    if (!isSelectable || rowId === undefined) {
       return undefined;
     }
     return allChecked || checked.includes(rowId);
   }, [allChecked, checked, isSelectable, rowId]);
+  if (isExpanded === false && isExpandableContent) {
+    return null;
+  }
+  let selectableCell = isSelectable && jsx(SelectableCell, null);
+  if (isSelectable && isExpandableContent) {
+    selectableCell = jsx(Primitives.SelectableCell, {
+      as: "td"
+    });
+  }
   return jsx(Primitives.TR, {
     isSelected: isSelected,
-    testId: testId
-  }, isSelectable && jsx(SelectableCell, null), children);
+    testId: testId,
+    isSubitem: isExpandableContent
+  }, selectableCell, children);
 });
 export default Row;

package/dist/es2019/thead.js

@@ -19,15 +19,10 @@ const THead = ({
     setAll,
     removeAll
   }] = useSelection();
-  if (!isSelectable) {
-    return jsx(Primitives.THead, null, jsx(Primitives.TR, {
-      isBodyRow: false
-    }, children));
-  }
   const isChecked = state.allChecked || state.anyChecked;
   return jsx(Primitives.THead, null, jsx(Primitives.TR, {
     isBodyRow: false
-  }, jsx(Primitives.SelectableCell, {
+  }, isSelectable && jsx(Primitives.SelectableCell, {
     as: "th"
   }, jsx(Checkbox, {
     label: jsx(VisuallyHidden, {
@@ -36,7 +31,7 @@ const THead = ({
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
+  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && jsx(Inline, {

package/dist/es2019/ui/base-cell.js

@@ -3,12 +3,6 @@
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
 import Box from '@atlaskit/ds-explorations/box';
-import Inline from '@atlaskit/primitives/inline';
-const alignMap = {
-  text: 'start',
-  number: 'end',
-  icon: 'center'
-};
 const baseResetStyles = css({
   display: 'table-cell',
   verticalAlign: 'middle',
@@ -19,6 +13,20 @@ const baseResetStyles = css({
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
+const alignLeftStyles = css({
+  textAlign: 'left'
+});
+const alignCenterStyles = css({
+  textAlign: 'center'
+});
+const alignRightStyles = css({
+  textAlign: 'right'
+});
+const alignMap = {
+  text: alignLeftStyles,
+  number: alignRightStyles,
+  icon: alignCenterStyles
+};
 
 /**
  * __BaseCell__
@@ -33,14 +41,15 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   children,
   align = 'text',
   paddingBlock = 'space.100',
-  paddingInline = 'space.200',
+  paddingInline = 'space.100',
   backgroundColor,
   scope,
   width,
   className,
-  sortDirection
+  sortDirection,
+  colSpan
 }, ref) => jsx(Box, {
-  css: baseResetStyles,
+  css: [baseResetStyles, alignMap[align]],
   ref: ref,
   scope: scope,
   backgroundColor: backgroundColor,
@@ -52,8 +61,6 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   UNSAFE_style: width ? {
     width
   } : undefined,
-  "aria-sort": sortDirection
-}, jsx(Inline, {
-  alignInline: alignMap[align],
-  space: "0"
-}, children)));
+  "aria-sort": sortDirection,
+  colSpan: colSpan
+}, children));

package/dist/es2019/ui/expand-icon.js

@@ -0,0 +1,34 @@
+/* eslint-disable no-unused-vars */
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx } from '@emotion/react';
+
+// TODO: Using HipChat icons as the standard icon set is missing large
+// versions of `chevron-up` and `chevron-down`, despite already including
+// `chevron-left-large` and `chevron-right-large`...
+import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
+
+/**
+ * __Expand icon__
+ *
+ * An icon used to display the expanded state in an `<ExpandableCell>`.
+ */
+export const ExpandIcon = /*#__PURE__*/memo(({
+  isExpanded
+}) => {
+  switch (isExpanded) {
+    case true:
+      return jsx(ChevronUpIcon, {
+        size: "small",
+        label: "",
+        primaryColor: "inherit"
+      });
+    case false:
+      return jsx(ChevronDownIcon, {
+        size: "small",
+        label: "",
+        primaryColor: "inherit"
+      });
+  }
+});

package/dist/es2019/ui/expandable-cell.js

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+
+import { css, jsx } from '@emotion/react';
+import { BaseCell } from './base-cell';
+const spacingStyles = css({
+  width: 24,
+  padding: "var(--ds-space-0, 0px)"
+});
+/**
+ * __Expandable cell__
+ *
+ * An expandable cell primitive designed to be used for light weight composition.
+ */
+export const ExpandableCell = ({
+  children,
+  as
+}) => {
+  return jsx(BaseCell, {
+    as: as,
+    css: spacingStyles
+  }, children);
+};

package/dist/es2019/ui/index.js

@@ -7,6 +7,8 @@ export { TR } from './tr';
 export { TD } from './td';
 export { TH } from './th';
 export { SelectableCell } from './selectable-cell';
+export { ExpandableCell } from './expandable-cell';
+export { ExpandIcon } from './expand-icon';
 export { THead } from './thead';
 export { BulkActionOverlay } from './bulk-action-overlay';
 export { SortIcon } from './sort-icon';

package/dist/es2019/ui/selectable-cell.js

@@ -4,13 +4,7 @@ import { css, jsx } from '@emotion/react';
 import { BaseCell } from './base-cell';
 const spacingStyles = css({
   width: 32,
-  padding: "var(--ds-space-0, 0px)",
-  paddingLeft: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& + *': {
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
-    paddingLeft: '8px !important'
-  }
+  padding: "var(--ds-space-0, 0px)"
 });
 /**
  * __Selectable cell__
@@ -19,7 +13,7 @@ const spacingStyles = css({
  */
 export const SelectableCell = ({
   children,
-  as = 'td'
+  as
 }) => {
   return jsx(BaseCell, {
     as: as,

package/dist/es2019/ui/th.js

@@ -15,10 +15,7 @@ export const TH = ({
   backgroundColor,
   width,
   sortDirection
-}) =>
-/*#__PURE__*/
-// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-React.createElement(BaseCell, {
+}) => /*#__PURE__*/React.createElement(BaseCell, {
   as: "th",
   testId: testId,
   align: align,

package/dist/es2019/ui/tr.js

@@ -16,6 +16,9 @@ const selectedStyles = css({
   }
 });
 
+const subitemStyles = css({
+  backgroundColor: "var(--ds-background-neutral, #091E420F)"
+});
 const bodyRowStyles = css({
   borderBottom: `1px solid ${"var(--ds-border, #eee)"}`,
   '&:hover': {
@@ -36,7 +39,8 @@ export const TR = ({
   children,
   testId,
   isSelected,
-  isBodyRow = true
+  isBodyRow = true,
+  isSubitem
 }) => {
   return jsx(FocusRing, {
     isInset: true
@@ -44,6 +48,6 @@ export const TR = ({
     tabIndex: -1,
     "aria-selected": isSelected,
     "data-testid": testId,
-    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles]
+    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles, isSubitem && subitemStyles]
   }, children));
 };

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.2.7",
+	"version": "0.3.0",
 	"sideEffects": false
 }

package/dist/esm/body.js

@@ -27,11 +27,9 @@ function TBody(_ref) {
     _useSelection2$ = _useSelection2[1],
     removeAll = _useSelection2$.removeAll,
     setMax = _useSelection2$.setMax;
-
   // TODO: this seems like something the user should control or opt into.
   useEffect(function () {
     removeAll === null || removeAll === void 0 ? void 0 : removeAll();
-
     // eslint-disable-next-line react-hooks/exhaustive-deps -- When the rows change, we [currently] want to call removeAll.
   }, [rows]);
   var childrenCount = Children.count(children);

package/dist/esm/expandable-cell.js

@@ -0,0 +1,34 @@
+/** @jsx jsx */
+import { memo, useCallback } from 'react';
+import { jsx } from '@emotion/react';
+import Button from '@atlaskit/button';
+import useExpand from './hooks/use-expand';
+import * as Primitives from './ui';
+
+/**
+ * __Expandable cell__
+ *
+ * A cell with an expand button that controls the expanded state
+ * of the `<ExpandableRow>`.
+ */
+var ExpandableCell = /*#__PURE__*/memo(function () {
+  var _useExpand = useExpand(),
+    isExpanded = _useExpand.isExpanded,
+    toggleExpanded = _useExpand.toggleExpanded;
+  var handleClick = useCallback(function () {
+    toggleExpanded();
+  }, [toggleExpanded]);
+  return jsx(Primitives.ExpandableCell, {
+    as: "td"
+  }, jsx(Button, {
+    spacing: "compact",
+    appearance: "subtle",
+    iconAfter: jsx(Primitives.ExpandIcon, {
+      isExpanded: isExpanded
+    }),
+    onClick: handleClick,
+    "aria-pressed": isExpanded,
+    "aria-label": "Expand row"
+  }));
+});
+export default ExpandableCell;

package/dist/esm/expandable-row-content.js

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ExpandContentContextProvider } from './hooks/use-expand-content';
+/**
+ * __Expandable row content__
+ *
+ * Contains expandable content. Uses a context provider to allow children
+ * to identify if they are expandable content.
+ */
+var ExpandableRowContent = function ExpandableRowContent(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(ExpandContentContextProvider, null, children);
+};
+export default ExpandableRowContent;

package/dist/esm/expandable-row.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ExpandContextProvider } from './hooks/use-expand';
+/**
+ * __Expandable row__
+ *
+ * A context provider for `<Row>` to support expandable content.
+ */
+var ExpandableRow = function ExpandableRow(_ref) {
+  var children = _ref.children,
+    isExpanded = _ref.isExpanded,
+    isDefaultExpanded = _ref.isDefaultExpanded;
+  return /*#__PURE__*/React.createElement(ExpandContextProvider, {
+    isExpanded: isExpanded,
+    isDefaultExpanded: isDefaultExpanded
+  }, children);
+};
+export default ExpandableRow;

package/dist/esm/head-cell.js

@@ -10,7 +10,7 @@ import { TH } from './ui/th';
  *
  * HeadCell element
  */
-var Column = function Column(_ref) {
+var HeadCell = function HeadCell(_ref) {
   var children = _ref.children,
     align = _ref.align,
     testId = _ref.testId,
@@ -22,9 +22,9 @@ var Column = function Column(_ref) {
     align: align,
     testId: testId,
     backgroundColor: backgroundColor
-  }, jsx(Text, {
+  }, children && jsx(Text, {
     color: "color.text",
     fontWeight: "medium"
   }, children));
 };
-export default Column;
+export default HeadCell;

package/dist/esm/hooks/selection-provider.js

@@ -6,10 +6,6 @@ var SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]);
  * __Selection provider__
  *
  * A selection provider injects selection specific state into the table.
- *
- * - [Examples](https://atlassian.design/components/{packageName}/examples)
- * - [Code](https://atlassian.design/components/{packageName}/code)
- * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
 var SelectionProvider = function SelectionProvider(_ref) {
   var children = _ref.children;

package/dist/esm/hooks/use-expand-content.js

@@ -0,0 +1,22 @@
+import React, { createContext, useContext } from 'react';
+var ExpandContentContext = /*#__PURE__*/createContext({
+  isExpandableContent: false
+});
+
+/**
+ * __Expand content provider__
+ *
+ * An expand content provider allows `<Row>` to determine if it is a subitem.
+ */
+export var ExpandContentContextProvider = function ExpandContentContextProvider(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/React.createElement(ExpandContentContext.Provider, {
+    value: {
+      isExpandableContent: true
+    }
+  }, children);
+};
+var useExpandContent = function useExpandContent() {
+  return useContext(ExpandContentContext);
+};
+export default useExpandContent;

package/dist/esm/hooks/use-expand.js

@@ -0,0 +1,38 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import React, { createContext, useCallback, useContext, useState } from 'react';
+import __noop from '@atlaskit/ds-lib/noop';
+var ExpandContext = /*#__PURE__*/createContext({
+  isExpanded: false,
+  toggleExpanded: __noop
+});
+
+/**
+ * __Expand context provider__
+ *
+ * An expand context provider.
+ */
+export var ExpandContextProvider = function ExpandContextProvider(_ref) {
+  var children = _ref.children,
+    isExpandedProp = _ref.isExpanded,
+    _ref$isDefaultExpande = _ref.isDefaultExpanded,
+    isDefaultExpanded = _ref$isDefaultExpande === void 0 ? false : _ref$isDefaultExpande;
+  var _useState = useState(isDefaultExpanded),
+    _useState2 = _slicedToArray(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var toggleExpanded = useCallback(function () {
+    setIsExpanded(function (v) {
+      return !v;
+    });
+  }, []);
+  return /*#__PURE__*/React.createElement(ExpandContext.Provider, {
+    value: {
+      isExpanded: isExpandedProp || isExpanded,
+      toggleExpanded: toggleExpanded
+    }
+  }, children);
+};
+var useExpand = function useExpand() {
+  return useContext(ExpandContext);
+};
+export default useExpand;

package/dist/esm/index.js

@@ -2,6 +2,9 @@ export { default } from './table';
 export { default as TBody } from './body';
 export { default as Row } from './row';
 export { TD as Cell } from './ui';
+export { default as ExpandableCell } from './expandable-cell';
+export { default as ExpandableRow } from './expandable-row';
+export { default as ExpandableRowContent } from './expandable-row-content';
 export { default as HeadCell } from './head-cell';
 export { default as SortableColumn } from './sortable-column';
 export { default as THead } from './thead';

package/dist/esm/row.js

@@ -3,6 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { memo, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSelection } from './hooks/selection-provider';
+import useExpand from './hooks/use-expand';
+import useExpandContent from './hooks/use-expand-content';
 import { useRowId } from './hooks/use-row-id';
 import { useTable } from './hooks/use-table';
 import { useTableBody } from './hooks/use-table-body';
@@ -28,16 +30,30 @@ var Row = /*#__PURE__*/memo(function (_ref) {
     _useSelection2$ = _useSelection2[0],
     allChecked = _useSelection2$.allChecked,
     checked = _useSelection2$.checked;
+  var _useExpand = useExpand(),
+    isExpanded = _useExpand.isExpanded;
+  var _useExpandContent = useExpandContent(),
+    isExpandableContent = _useExpandContent.isExpandableContent;
   var rowId = useRowId();
   var isSelected = useMemo(function () {
-    if (!isSelectable) {
+    if (!isSelectable || rowId === undefined) {
       return undefined;
     }
     return allChecked || checked.includes(rowId);
   }, [allChecked, checked, isSelectable, rowId]);
+  if (isExpanded === false && isExpandableContent) {
+    return null;
+  }
+  var selectableCell = isSelectable && jsx(SelectableCell, null);
+  if (isSelectable && isExpandableContent) {
+    selectableCell = jsx(Primitives.SelectableCell, {
+      as: "td"
+    });
+  }
   return jsx(Primitives.TR, {
     isSelected: isSelected,
-    testId: testId
-  }, isSelectable && jsx(SelectableCell, null), children);
+    testId: testId,
+    isSubitem: isExpandableContent
+  }, selectableCell, children);
 });
 export default Row;

package/dist/esm/thead.js

@@ -20,15 +20,10 @@ var THead = function THead(_ref) {
     _useSelection2$ = _useSelection2[1],
     setAll = _useSelection2$.setAll,
     removeAll = _useSelection2$.removeAll;
-  if (!isSelectable) {
-    return jsx(Primitives.THead, null, jsx(Primitives.TR, {
-      isBodyRow: false
-    }, children));
-  }
   var isChecked = state.allChecked || state.anyChecked;
   return jsx(Primitives.THead, null, jsx(Primitives.TR, {
     isBodyRow: false
-  }, jsx(Primitives.SelectableCell, {
+  }, isSelectable && jsx(Primitives.SelectableCell, {
     as: "th"
   }, jsx(Checkbox, {
     label: jsx(VisuallyHidden, {
@@ -37,7 +32,7 @@ var THead = function THead(_ref) {
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
+  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && jsx(Inline, {