@atlaskit/table 0.2.7 → 0.3.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/table
 
+## 0.3.0
+
+### Minor Changes
+
+- [`bc489da7472`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bc489da7472) - [ux] - Adds new primitives to support expandable row functionality. This will supersede the `@atlaskit/table-tree` package.
+
+  - `<ExpandableRow>`
+  - `<ExpandableRowContent>`
+  - `<ExpandableCell>`
+
+## 0.2.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.2.7
 
 ### Patch Changes

package/dist/cjs/body.js

@@ -35,11 +35,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.
   (0, _react.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 = _react.Children.count(children);

package/dist/cjs/expandable-cell.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+var _useExpand2 = _interopRequireDefault(require("./hooks/use-expand"));
+var Primitives = _interopRequireWildcard(require("./ui"));
+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; }
+/** @jsx jsx */
+
+/**
+ * __Expandable cell__
+ *
+ * A cell with an expand button that controls the expanded state
+ * of the `<ExpandableRow>`.
+ */
+var ExpandableCell = /*#__PURE__*/(0, _react.memo)(function () {
+  var _useExpand = (0, _useExpand2.default)(),
+    isExpanded = _useExpand.isExpanded,
+    toggleExpanded = _useExpand.toggleExpanded;
+  var handleClick = (0, _react.useCallback)(function () {
+    toggleExpanded();
+  }, [toggleExpanded]);
+  return (0, _react2.jsx)(Primitives.ExpandableCell, {
+    as: "td"
+  }, (0, _react2.jsx)(_button.default, {
+    spacing: "compact",
+    appearance: "subtle",
+    iconAfter: (0, _react2.jsx)(Primitives.ExpandIcon, {
+      isExpanded: isExpanded
+    }),
+    onClick: handleClick,
+    "aria-pressed": isExpanded,
+    "aria-label": "Expand row"
+  }));
+});
+var _default = ExpandableCell;
+exports.default = _default;

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

@@ -0,0 +1,21 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useExpandContent = require("./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.default.createElement(_useExpandContent.ExpandContentContextProvider, null, children);
+};
+var _default = ExpandableRowContent;
+exports.default = _default;

package/dist/cjs/expandable-row.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useExpand = require("./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.default.createElement(_useExpand.ExpandContextProvider, {
+    isExpanded: isExpanded,
+    isDefaultExpanded: isDefaultExpanded
+  }, children);
+};
+var _default = ExpandableRow;
+exports.default = _default;

package/dist/cjs/head-cell.js

@@ -15,7 +15,7 @@ var _th = require("./ui/th");
  *
  * HeadCell element
  */
-var Column = function Column(_ref) {
+var HeadCell = function HeadCell(_ref) {
   var children = _ref.children,
     align = _ref.align,
     testId = _ref.testId,
@@ -27,10 +27,10 @@ var Column = function Column(_ref) {
     align: align,
     testId: testId,
     backgroundColor: backgroundColor
-  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+  }, children && (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
     color: "color.text",
     fontWeight: "medium"
   }, children));
 };
-var _default = Column;
+var _default = HeadCell;
 exports.default = _default;

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

@@ -15,10 +15,6 @@ var SelectionContext = /*#__PURE__*/(0, _react.createContext)([_useSelectable.de
  * __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/cjs/hooks/use-expand-content.js

@@ -0,0 +1,33 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExpandContentContextProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+var ExpandContentContext = /*#__PURE__*/(0, _react.createContext)({
+  isExpandableContent: false
+});
+
+/**
+ * __Expand content provider__
+ *
+ * An expand content provider allows `<Row>` to determine if it is a subitem.
+ */
+var ExpandContentContextProvider = function ExpandContentContextProvider(_ref) {
+  var children = _ref.children;
+  return /*#__PURE__*/_react.default.createElement(ExpandContentContext.Provider, {
+    value: {
+      isExpandableContent: true
+    }
+  }, children);
+};
+exports.ExpandContentContextProvider = ExpandContentContextProvider;
+var useExpandContent = function useExpandContent() {
+  return (0, _react.useContext)(ExpandContentContext);
+};
+var _default = useExpandContent;
+exports.default = _default;

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

@@ -0,0 +1,50 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExpandContextProvider = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+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; }
+var ExpandContext = /*#__PURE__*/(0, _react.createContext)({
+  isExpanded: false,
+  toggleExpanded: _noop.default
+});
+
+/**
+ * __Expand context provider__
+ *
+ * An expand context provider.
+ */
+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 = (0, _react.useState)(isDefaultExpanded),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isExpanded = _useState2[0],
+    setIsExpanded = _useState2[1];
+  var toggleExpanded = (0, _react.useCallback)(function () {
+    setIsExpanded(function (v) {
+      return !v;
+    });
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(ExpandContext.Provider, {
+    value: {
+      isExpanded: isExpandedProp || isExpanded,
+      toggleExpanded: toggleExpanded
+    }
+  }, children);
+};
+exports.ExpandContextProvider = ExpandContextProvider;
+var useExpand = function useExpand() {
+  return (0, _react.useContext)(ExpandContext);
+};
+var _default = useExpand;
+exports.default = _default;

package/dist/cjs/index.js

@@ -10,6 +10,24 @@ Object.defineProperty(exports, "Cell", {
     return _ui.TD;
   }
 });
+Object.defineProperty(exports, "ExpandableCell", {
+  enumerable: true,
+  get: function get() {
+    return _expandableCell.default;
+  }
+});
+Object.defineProperty(exports, "ExpandableRow", {
+  enumerable: true,
+  get: function get() {
+    return _expandableRow.default;
+  }
+});
+Object.defineProperty(exports, "ExpandableRowContent", {
+  enumerable: true,
+  get: function get() {
+    return _expandableRowContent.default;
+  }
+});
 Object.defineProperty(exports, "HeadCell", {
   enumerable: true,
   get: function get() {
@@ -50,6 +68,9 @@ var _table = _interopRequireDefault(require("./table"));
 var _body = _interopRequireDefault(require("./body"));
 var _row = _interopRequireDefault(require("./row"));
 var _ui = require("./ui");
+var _expandableCell = _interopRequireDefault(require("./expandable-cell"));
+var _expandableRow = _interopRequireDefault(require("./expandable-row"));
+var _expandableRowContent = _interopRequireDefault(require("./expandable-row-content"));
 var _headCell = _interopRequireDefault(require("./head-cell"));
 var _sortableColumn = _interopRequireDefault(require("./sortable-column"));
 var _thead = _interopRequireDefault(require("./thead"));

package/dist/cjs/row.js

@@ -10,6 +10,8 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _selectionProvider = require("./hooks/selection-provider");
+var _useExpand2 = _interopRequireDefault(require("./hooks/use-expand"));
+var _useExpandContent2 = _interopRequireDefault(require("./hooks/use-expand-content"));
 var _useRowId = require("./hooks/use-row-id");
 var _useTable2 = require("./hooks/use-table");
 var _useTableBody = require("./hooks/use-table-body");
@@ -39,17 +41,31 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     _useSelection2$ = _useSelection2[0],
     allChecked = _useSelection2$.allChecked,
     checked = _useSelection2$.checked;
+  var _useExpand = (0, _useExpand2.default)(),
+    isExpanded = _useExpand.isExpanded;
+  var _useExpandContent = (0, _useExpandContent2.default)(),
+    isExpandableContent = _useExpandContent.isExpandableContent;
   var rowId = (0, _useRowId.useRowId)();
   var isSelected = (0, _react.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 && (0, _react2.jsx)(_selectableCell.default, null);
+  if (isSelectable && isExpandableContent) {
+    selectableCell = (0, _react2.jsx)(Primitives.SelectableCell, {
+      as: "td"
+    });
+  }
   return (0, _react2.jsx)(Primitives.TR, {
     isSelected: isSelected,
-    testId: testId
-  }, isSelectable && (0, _react2.jsx)(_selectableCell.default, null), children);
+    testId: testId,
+    isSubitem: isExpandableContent
+  }, selectableCell, children);
 });
 var _default = Row;
 exports.default = _default;

package/dist/cjs/thead.js

@@ -30,15 +30,10 @@ var THead = function THead(_ref) {
     _useSelection2$ = _useSelection2[1],
     setAll = _useSelection2$.setAll,
     removeAll = _useSelection2$.removeAll;
-  if (!isSelectable) {
-    return (0, _react.jsx)(Primitives.THead, null, (0, _react.jsx)(Primitives.TR, {
-      isBodyRow: false
-    }, children));
-  }
   var isChecked = state.allChecked || state.anyChecked;
   return (0, _react.jsx)(Primitives.THead, null, (0, _react.jsx)(Primitives.TR, {
     isBodyRow: false
-  }, (0, _react.jsx)(Primitives.SelectableCell, {
+  }, isSelectable && (0, _react.jsx)(Primitives.SelectableCell, {
     as: "th"
   }, (0, _react.jsx)(_checkbox.default, {
     label: (0, _react.jsx)(_visuallyHidden.default, {
@@ -47,7 +42,7 @@ var THead = function THead(_ref) {
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+  })), children, isSelectable && isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
     color: "color.text",
     fontWeight: "medium"
   }, state.checked.length, " selected"), actions && (0, _react.jsx)(_inline.default, {

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

@@ -8,15 +8,9 @@ exports.BaseCell = void 0;
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 /* eslint-disable @atlassian/tangerine/import/entry-points */
 /** @jsx jsx */
 
-var alignMap = {
-  text: 'start',
-  number: 'end',
-  icon: 'center'
-};
 var baseResetStyles = (0, _react2.css)({
   display: 'table-cell',
   verticalAlign: 'middle',
@@ -27,6 +21,20 @@ var baseResetStyles = (0, _react2.css)({
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
+var alignLeftStyles = (0, _react2.css)({
+  textAlign: 'left'
+});
+var alignCenterStyles = (0, _react2.css)({
+  textAlign: 'center'
+});
+var alignRightStyles = (0, _react2.css)({
+  textAlign: 'right'
+});
+var alignMap = {
+  text: alignLeftStyles,
+  number: alignRightStyles,
+  icon: alignCenterStyles
+};
 
 /**
  * __BaseCell__
@@ -44,14 +52,15 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     _ref$paddingBlock = _ref.paddingBlock,
     paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
     _ref$paddingInline = _ref.paddingInline,
-    paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
+    paddingInline = _ref$paddingInline === void 0 ? 'space.100' : _ref$paddingInline,
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
     className = _ref.className,
-    sortDirection = _ref.sortDirection;
+    sortDirection = _ref.sortDirection,
+    colSpan = _ref.colSpan;
   return (0, _react2.jsx)(_box.default, {
-    css: baseResetStyles,
+    css: [baseResetStyles, alignMap[align]],
     ref: ref,
     scope: scope,
     backgroundColor: backgroundColor,
@@ -63,10 +72,8 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     UNSAFE_style: width ? {
       width: width
     } : undefined,
-    "aria-sort": sortDirection
-  }, (0, _react2.jsx)(_inline.default, {
-    alignInline: alignMap[align],
-    space: "0"
-  }, children));
+    "aria-sort": sortDirection,
+    colSpan: colSpan
+  }, children);
 });
 exports.BaseCell = BaseCell;

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

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandIcon = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
+var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
+/* eslint-disable no-unused-vars */
+/** @jsx jsx */
+
+// 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`...
+
+/**
+ * __Expand icon__
+ *
+ * An icon used to display the expanded state in an `<ExpandableCell>`.
+ */
+var ExpandIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var isExpanded = _ref.isExpanded;
+  switch (isExpanded) {
+    case true:
+      return (0, _react2.jsx)(_chevronUp.default, {
+        size: "small",
+        label: "",
+        primaryColor: "inherit"
+      });
+    case false:
+      return (0, _react2.jsx)(_chevronDown.default, {
+        size: "small",
+        label: "",
+        primaryColor: "inherit"
+      });
+  }
+});
+exports.ExpandIcon = ExpandIcon;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ExpandableCell = void 0;
+var _react = require("@emotion/react");
+var _baseCell = require("./base-cell");
+/** @jsx jsx */
+
+var spacingStyles = (0, _react.css)({
+  width: 24,
+  padding: "var(--ds-space-0, 0px)"
+});
+/**
+ * __Expandable cell__
+ *
+ * An expandable cell primitive designed to be used for light weight composition.
+ */
+var ExpandableCell = function ExpandableCell(_ref) {
+  var children = _ref.children,
+    as = _ref.as;
+  return (0, _react.jsx)(_baseCell.BaseCell, {
+    as: as,
+    css: spacingStyles
+  }, children);
+};
+exports.ExpandableCell = ExpandableCell;

package/dist/cjs/ui/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "BulkActionOverlay", {
     return _bulkActionOverlay.BulkActionOverlay;
   }
 });
+Object.defineProperty(exports, "ExpandIcon", {
+  enumerable: true,
+  get: function get() {
+    return _expandIcon.ExpandIcon;
+  }
+});
+Object.defineProperty(exports, "ExpandableCell", {
+  enumerable: true,
+  get: function get() {
+    return _expandableCell.ExpandableCell;
+  }
+});
 Object.defineProperty(exports, "SelectableCell", {
   enumerable: true,
   get: function get() {
@@ -63,6 +75,8 @@ var _tr = require("./tr");
 var _td = require("./td");
 var _th = require("./th");
 var _selectableCell = require("./selectable-cell");
+var _expandableCell = require("./expandable-cell");
+var _expandIcon = require("./expand-icon");
 var _thead = require("./thead");
 var _bulkActionOverlay = require("./bulk-action-overlay");
 var _sortIcon = require("./sort-icon");

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

@@ -10,13 +10,7 @@ var _baseCell = require("./base-cell");
 
 var spacingStyles = (0, _react.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__
@@ -25,8 +19,7 @@ var spacingStyles = (0, _react.css)({
  */
 var SelectableCell = function SelectableCell(_ref) {
   var children = _ref.children,
-    _ref$as = _ref.as,
-    as = _ref$as === void 0 ? 'td' : _ref$as;
+    as = _ref.as;
   return (0, _react.jsx)(_baseCell.BaseCell, {
     as: as,
     css: spacingStyles

package/dist/cjs/ui/th.js

@@ -22,18 +22,14 @@ var TH = function TH(_ref) {
     backgroundColor = _ref.backgroundColor,
     width = _ref.width,
     sortDirection = _ref.sortDirection;
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    _react.default.createElement(_baseCell.BaseCell, {
-      as: "th",
-      testId: testId,
-      align: align,
-      scope: scope,
-      width: width,
-      backgroundColor: backgroundColor,
-      sortDirection: sortDirection
-    }, children)
-  );
+  return /*#__PURE__*/_react.default.createElement(_baseCell.BaseCell, {
+    as: "th",
+    testId: testId,
+    align: align,
+    scope: scope,
+    width: width,
+    backgroundColor: backgroundColor,
+    sortDirection: sortDirection
+  }, children);
 };
 exports.TH = TH;

package/dist/cjs/ui/tr.js

@@ -23,6 +23,9 @@ var selectedStyles = (0, _react.css)({
   }
 });
 
+var subitemStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-background-neutral, #091E420F)"
+});
 var bodyRowStyles = (0, _react.css)({
   borderBottom: "1px solid ".concat("var(--ds-border, #eee)"),
   '&:hover': {
@@ -44,14 +47,15 @@ var TR = function TR(_ref) {
     testId = _ref.testId,
     isSelected = _ref.isSelected,
     _ref$isBodyRow = _ref.isBodyRow,
-    isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow;
+    isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow,
+    isSubitem = _ref.isSubitem;
   return (0, _react.jsx)(_focusRing.default, {
     isInset: true
   }, (0, _react.jsx)("tr", {
     tabIndex: -1,
     "aria-selected": isSelected,
     "data-testid": testId,
-    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles]
+    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles, isSubitem && subitemStyles]
   }, children));
 };
 exports.TR = TR;

package/dist/cjs/version.json

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

package/dist/es2019/body.js

@@ -21,11 +21,9 @@ function TBody({
     removeAll,
     setMax
   }] = useSelection();
-
   // TODO: this seems like something the user should control or opt into.
   useEffect(() => {
     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]);
   const childrenCount = Children.count(children);

package/dist/es2019/expandable-cell.js

@@ -0,0 +1,35 @@
+/** @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>`.
+ */
+const ExpandableCell = /*#__PURE__*/memo(() => {
+  const {
+    isExpanded,
+    toggleExpanded
+  } = useExpand();
+  const handleClick = useCallback(() => {
+    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;