@atlaskit/table 0.1.0

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TableProvider = TableProvider;
+exports.useTable = void 0;
+
+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; }
+
+function generateContext() {
+  return /*#__PURE__*/(0, _react.createContext)({
+    isSelectable: false,
+    sortKey: 'unset',
+    setSortState: _noop.default
+  });
+}
+
+var TableContext = generateContext();
+/**
+ * __Table state provider__
+ *
+ * The table context provides the data required for more complex functionality.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+
+function TableProvider(_ref) {
+  var children = _ref.children,
+      state = _ref.state;
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    _react.default.createElement(TableContext.Provider, {
+      value: state
+    }, children)
+  );
+}
+
+var useTable = function useTable() {
+  return (// @ts-expect-error
+    (0, _react.useContext)(TableContext)
+  );
+};
+
+exports.useTable = useTable;

package/dist/cjs/index.js

@@ -0,0 +1,63 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Cell", {
+  enumerable: true,
+  get: function get() {
+    return _ui.TD;
+  }
+});
+Object.defineProperty(exports, "HeadCell", {
+  enumerable: true,
+  get: function get() {
+    return _headCell.default;
+  }
+});
+Object.defineProperty(exports, "Row", {
+  enumerable: true,
+  get: function get() {
+    return _row.default;
+  }
+});
+Object.defineProperty(exports, "SortableColumn", {
+  enumerable: true,
+  get: function get() {
+    return _sortableColumn.default;
+  }
+});
+Object.defineProperty(exports, "TBody", {
+  enumerable: true,
+  get: function get() {
+    return _body.default;
+  }
+});
+Object.defineProperty(exports, "THead", {
+  enumerable: true,
+  get: function get() {
+    return _thead.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _table.default;
+  }
+});
+
+var _table = _interopRequireDefault(require("./table"));
+
+var _body = _interopRequireDefault(require("./body"));
+
+var _row = _interopRequireDefault(require("./row"));
+
+var _ui = require("./ui");
+
+var _headCell = _interopRequireDefault(require("./head-cell"));
+
+var _sortableColumn = _interopRequireDefault(require("./sortable-column"));
+
+var _thead = _interopRequireDefault(require("./thead"));

package/dist/cjs/row.js

@@ -0,0 +1,70 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _selectionProvider = require("./hooks/selection-provider");
+
+var _useRowId = require("./hooks/use-row-id");
+
+var _useTable = require("./hooks/use-table");
+
+var _useTableBody = require("./hooks/use-table-body");
+
+var _selectableCell = _interopRequireDefault(require("./selectable-cell"));
+
+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 */
+
+/**
+ * __Row__
+ *
+ * A table row.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+var Row = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var children = _ref.children,
+      testId = _ref.testId;
+  // To ensure valid nesting
+  (0, _useTableBody.useTableBody)(); // to access table state
+
+  var table = (0, _useTable.useTable)();
+
+  var _useSelection = (0, _selectionProvider.useSelection)(),
+      _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 1),
+      selectionState = _useSelection2[0];
+
+  var rowId = (0, _useRowId.useRowId)();
+
+  if (!table.isSelectable) {
+    return (0, _react2.jsx)(Primitives.TR, {
+      testId: testId
+    }, children);
+  }
+
+  var isChecked = selectionState.allChecked || selectionState.checked.includes(rowId);
+  return (0, _react2.jsx)(Primitives.TR, {
+    isSelected: !!isChecked,
+    testId: testId
+  }, (0, _react2.jsx)(_selectableCell.default, null), children);
+});
+var _default = Row;
+exports.default = _default;

package/dist/cjs/selectable-cell.js

@@ -0,0 +1,53 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
+
+var _selectionProvider = require("./hooks/selection-provider");
+
+var _useRowId = require("./hooks/use-row-id");
+
+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 */
+var SelectableCell = function SelectableCell() {
+  var _useSelection = (0, _selectionProvider.useSelection)(),
+      _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
+      state = _useSelection2[0],
+      toggleSelection = _useSelection2[1].toggleSelection;
+
+  var idx = (0, _useRowId.useRowId)();
+  var isChecked = state.allChecked || state.checked.includes(idx);
+  var onChange = (0, _react.useCallback)(function (e) {
+    return toggleSelection(idx, e.nativeEvent.shiftKey);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [idx]);
+  return (0, _react2.jsx)(Primitives.SelectableCell, {
+    as: "td"
+  }, (0, _react2.jsx)(_checkbox.default, {
+    isChecked: isChecked,
+    onChange: onChange
+  }));
+};
+
+var _default = /*#__PURE__*/(0, _react.memo)(SelectableCell);
+
+exports.default = _default;

package/dist/cjs/sortable-column.js

@@ -0,0 +1,129 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _button = _interopRequireDefault(require("@atlaskit/button"));
+
+var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
+
+var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-up"));
+
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+
+var _useTable2 = require("./hooks/use-table");
+
+var _ui = require("./ui");
+
+var _excluded = ["name", "testId", "onClick", "children"];
+
+/**
+ * TODO these need to be i18n supported
+ */
+var sortingMessages = {
+  unsorted: {
+    string: 'Sort from A to Z',
+    number: 'Sort from 0 to 9'
+  },
+  ascending: {
+    string: 'Sort from A to Z',
+    number: 'Sort from 0 to 9'
+  },
+  descending: {
+    string: 'Sort from Z to A',
+    number: 'Sort from 9 to 0'
+  }
+};
+var overrideStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  margin: '0 -2px !important',
+  gap: "var(--ds-space-050, 4px)",
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  paddingInline: "2px !important"
+});
+/**
+ * __SortableColumn__
+ *
+ * SortableColumn is used in place of the default Column when sorting is desired.
+ */
+
+var SortableColumn = function SortableColumn(_ref) {
+  var name = _ref.name,
+      testId = _ref.testId,
+      onClick = _ref.onClick,
+      children = _ref.children,
+      other = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useTable = (0, _useTable2.useTable)(),
+      sortKey = _useTable.sortKey,
+      sortDirection = _useTable.sortDirection,
+      setSortState = _useTable.setSortState;
+
+  var getSortMessage = function getSortMessage() {
+    if (sortKey === name) {
+      // TODO: Change message depending on data type (string/number)
+      return sortingMessages[sortDirection || 'unsorted'].string;
+    }
+
+    return sortingMessages.unsorted.string;
+  };
+
+  var getSortIcon = function getSortIcon() {
+    if (sortKey === name) {
+      switch (sortDirection) {
+        case undefined:
+          return undefined;
+
+        case 'ascending':
+          return (0, _react.jsx)(_arrowUp.default, {
+            size: "small",
+            label: "",
+            primaryColor: "inherit"
+          });
+
+        case 'descending':
+          return (0, _react.jsx)(_arrowDown.default, {
+            size: "small",
+            label: "",
+            primaryColor: "inherit"
+          });
+      }
+    }
+
+    return undefined;
+  };
+
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react.jsx)(_ui.TH, (0, _extends2.default)({
+      testId: testId
+    }, other), (0, _react.jsx)(_tooltip.default, {
+      content: getSortMessage(),
+      position: "top"
+    }, function (tooltipProps) {
+      return (0, _react.jsx)(_button.default, (0, _extends2.default)({
+        spacing: "compact",
+        appearance: "subtle",
+        iconAfter: getSortIcon()
+      }, tooltipProps, {
+        // @ts-expect-error
+        onClick: function onClick() {
+          return setSortState(name);
+        },
+        css: overrideStyles
+      }), children);
+    }))
+  );
+};
+
+var _default = SortableColumn;
+exports.default = _default;

package/dist/cjs/table.js

@@ -0,0 +1,60 @@
+"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("@emotion/react");
+
+var _selectionProvider = _interopRequireDefault(require("./hooks/selection-provider"));
+
+var _useSorting2 = require("./hooks/use-sorting");
+
+var _useTable = require("./hooks/use-table");
+
+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 */
+
+/**
+ * __Table__
+ *
+ * A data table is used to display dynamic data.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+function Table(_ref) {
+  var children = _ref.children,
+      isSelectable = _ref.isSelectable,
+      _ref$sortKey = _ref.sortKey,
+      sortKey = _ref$sortKey === void 0 ? 'unset' : _ref$sortKey,
+      testId = _ref.testId;
+
+  var _useSorting = (0, _useSorting2.useSorting)(sortKey),
+      localSortKey = _useSorting.sortKey,
+      sortDirection = _useSorting.sortDirection,
+      setSortState = _useSorting.setSortState;
+
+  return (0, _react.jsx)(_useTable.TableProvider, {
+    state: {
+      isSelectable: isSelectable,
+      sortKey: localSortKey,
+      sortDirection: sortDirection,
+      setSortState: setSortState
+    }
+  }, (0, _react.jsx)(Primitives.Table, {
+    testId: testId
+  }, isSelectable ? (0, _react.jsx)(_selectionProvider.default, null, children) : children));
+}
+
+var _default = Table;
+exports.default = _default;

package/dist/cjs/thead.js

@@ -0,0 +1,73 @@
+"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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("@emotion/react");
+
+var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
+
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
+var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
+
+var _selectionProvider = require("./hooks/selection-provider");
+
+var _useTable = require("./hooks/use-table");
+
+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 */
+var THead = function THead(_ref) {
+  var actions = _ref.actions,
+      children = _ref.children;
+  var table = (0, _useTable.useTable)();
+
+  var _useSelection = (0, _selectionProvider.useSelection)(),
+      _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
+      state = _useSelection2[0],
+      _useSelection2$ = _useSelection2[1],
+      setAll = _useSelection2$.setAll,
+      removeAll = _useSelection2$.removeAll;
+
+  var isChecked = state.allChecked || state.anyChecked;
+
+  if (!table.isSelectable) {
+    return (0, _react.jsx)(Primitives.THead, null, (0, _react.jsx)(Primitives.TR, {
+      isBodyRow: false
+    }, children));
+  }
+
+  return (0, _react.jsx)(Primitives.THead, null, (0, _react.jsx)(Primitives.TR, {
+    isBodyRow: false
+  }, (0, _react.jsx)(Primitives.SelectableCell, {
+    as: "th"
+  }, (0, _react.jsx)(_checkbox.default, {
+    "aria-labelledby": "select-all",
+    onChange: isChecked ? removeAll : setAll,
+    isChecked: isChecked,
+    isIndeterminate: state.anyChecked && !state.allChecked
+  }), (0, _react.jsx)(_visuallyHidden.default, {
+    id: "select-all"
+  }, "Select all rows")), children, isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+    color: "color.text",
+    fontWeight: "500"
+  }, state.checked.length, " selected"), actions && (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
+    gap: "scale.100"
+  }, actions(state.checked)))));
+};
+
+var _default = THead;
+exports.default = _default;

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

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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/ds-explorations/inline"));
+
+/* eslint-disable @atlassian/tangerine/import/entry-points */
+
+/** @jsx jsx */
+var alignMap = {
+  text: 'flexStart',
+  number: 'flexEnd',
+  icon: 'center'
+};
+var baseResetStyles = (0, _react2.css)({
+  display: 'table-cell',
+  verticalAlign: 'middle',
+  '&:first-of-type': {
+    paddingLeft: "var(--ds-space-100, 8px)"
+  },
+  '&:last-of-type': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
+/**
+ * __BaseCell__
+ *
+ * @internal
+ *
+ * Basic cell element.
+ */
+
+var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+  var testId = _ref.testId,
+      as = _ref.as,
+      children = _ref.children,
+      _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'text' : _ref$align,
+      _ref$paddingBlock = _ref.paddingBlock,
+      paddingBlock = _ref$paddingBlock === void 0 ? 'scale.100' : _ref$paddingBlock,
+      _ref$paddingInline = _ref.paddingInline,
+      paddingInline = _ref$paddingInline === void 0 ? 'scale.200' : _ref$paddingInline,
+      backgroundColor = _ref.backgroundColor,
+      scope = _ref.scope,
+      className = _ref.className;
+  return (0, _react2.jsx)(_box.default, {
+    css: baseResetStyles,
+    ref: ref,
+    scope: scope,
+    backgroundColor: backgroundColor,
+    paddingBlock: paddingBlock,
+    paddingInline: paddingInline,
+    as: as,
+    testId: testId,
+    className: className
+  }, (0, _react2.jsx)(_inline.default, {
+    justifyContent: alignMap[align],
+    gap: "scale.0"
+  }, children));
+});
+exports.BaseCell = BaseCell;

package/dist/cjs/ui/bulk-action-overlay.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BulkActionOverlay = void 0;
+
+var _react = require("@emotion/react");
+
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
+/** @jsx jsx */
+var overlayStyles = (0, _react.css)({
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 32
+});
+/**
+ * __Bulk action overlay__
+ *
+ * A bulk action overlay is used to conditionally render when a user makes a row selection
+ */
+
+var BulkActionOverlay = function BulkActionOverlay(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, {
+    as: "th",
+    position: "absolute",
+    paddingInline: "scale.100",
+    backgroundColor: "elevation.surface",
+    css: overlayStyles
+  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Inline, {
+    gap: "scale.300",
+    alignItems: "center"
+  }, children));
+};
+
+exports.BulkActionOverlay = BulkActionOverlay;

package/dist/cjs/ui/index.js

@@ -0,0 +1,69 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BulkActionOverlay", {
+  enumerable: true,
+  get: function get() {
+    return _bulkActionOverlay.BulkActionOverlay;
+  }
+});
+Object.defineProperty(exports, "SelectableCell", {
+  enumerable: true,
+  get: function get() {
+    return _selectableCell.SelectableCell;
+  }
+});
+Object.defineProperty(exports, "TBody", {
+  enumerable: true,
+  get: function get() {
+    return _tbody.TBody;
+  }
+});
+Object.defineProperty(exports, "TD", {
+  enumerable: true,
+  get: function get() {
+    return _td.TD;
+  }
+});
+Object.defineProperty(exports, "TH", {
+  enumerable: true,
+  get: function get() {
+    return _th.TH;
+  }
+});
+Object.defineProperty(exports, "THead", {
+  enumerable: true,
+  get: function get() {
+    return _thead.THead;
+  }
+});
+Object.defineProperty(exports, "TR", {
+  enumerable: true,
+  get: function get() {
+    return _tr.TR;
+  }
+});
+Object.defineProperty(exports, "Table", {
+  enumerable: true,
+  get: function get() {
+    return _table.Table;
+  }
+});
+
+var _table = require("./table");
+
+var _tbody = require("./tbody");
+
+var _tr = require("./tr");
+
+var _td = require("./td");
+
+var _th = require("./th");
+
+var _selectableCell = require("./selectable-cell");
+
+var _thead = require("./thead");
+
+var _bulkActionOverlay = require("./bulk-action-overlay");