@atlaskit/table 0.4.26 → 0.4.28

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/table
 
+## 0.4.28
+
+### Patch Changes
+
+- [#92007](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/92007) [`85525725cb0d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/85525725cb0d) - Migrated to the new button component
+- Updated dependencies
+
+## 0.4.27
+
+### Patch Changes
+
+- [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
+
 ## 0.4.26
 
 ### Patch Changes

package/dist/cjs/body.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,10 +14,8 @@ var _selectionProvider = require("./hooks/selection-provider");
 var _useRowId = require("./hooks/use-row-id");
 var _useTable2 = require("./hooks/use-table");
 var _useTableBody = require("./hooks/use-table-body");
-var Primitives = _interopRequireWildcard(require("./ui"));
+var _ui = require("./ui");
 var _excluded = ["idx"];
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @repo/internal/react/no-clone-element */ /** @jsx jsx */
 /**
@@ -57,7 +54,7 @@ function TBody(_ref) {
   }, [rows, sortFn]);
   return (0, _react2.jsx)(_useTableBody.TableBodyProvider, {
     value: true
-  }, (0, _react2.jsx)(Primitives.TBody, null, typeof children === 'function' && sortedRows ? sortedRows.map(function (_ref2) {
+  }, (0, _react2.jsx)(_ui.TBody, null, typeof children === 'function' && sortedRows ? sortedRows.map(function (_ref2) {
     var idx = _ref2.idx,
       row = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
     return (0, _react2.jsx)(_useRowId.RowProvider, {

package/dist/cjs/expandable-cell.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -12,9 +11,7 @@ var _new = require("@atlaskit/button/new");
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-down"));
 var _chevronUp = _interopRequireDefault(require("@atlaskit/icon/glyph/hipchat/chevron-up"));
 var _useExpand2 = _interopRequireDefault(require("./hooks/use-expand"));
-var Primitives = _interopRequireWildcard(require("./ui"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _expandableCell = require("./ui/expandable-cell");
 /** @jsx jsx */
 
 /**
@@ -30,7 +27,7 @@ var ExpandableCell = /*#__PURE__*/(0, _react.memo)(function () {
   var handleClick = (0, _react.useCallback)(function () {
     toggleExpanded();
   }, [toggleExpanded]);
-  return (0, _react2.jsx)(Primitives.ExpandableCell, {
+  return (0, _react2.jsx)(_expandableCell.ExpandableCell, {
     as: "td"
   }, (0, _react2.jsx)(_new.IconButton, {
     spacing: "compact",

package/dist/cjs/row.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -16,9 +15,8 @@ var _useRowId = require("./hooks/use-row-id");
 var _useTable2 = require("./hooks/use-table");
 var _useTableBody = require("./hooks/use-table-body");
 var _selectableCell = _interopRequireDefault(require("./selectable-cell"));
-var Primitives = _interopRequireWildcard(require("./ui"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _selectableCell2 = require("./ui/selectable-cell");
+var _tr = require("./ui/tr");
 /** @jsx jsx */
 
 /**
@@ -57,11 +55,11 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   }
   var selectableCell = isSelectable && (0, _react2.jsx)(_selectableCell.default, null);
   if (isSelectable && isExpandableContent) {
-    selectableCell = (0, _react2.jsx)(Primitives.SelectableCell, {
+    selectableCell = (0, _react2.jsx)(_selectableCell2.SelectableCell, {
       as: "td"
     });
   }
-  return (0, _react2.jsx)(Primitives.TR, {
+  return (0, _react2.jsx)(_tr.TR, {
     isSelected: isSelected,
     testId: testId,
     isSubitem: isExpandableContent

package/dist/cjs/selectable-cell.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +12,7 @@ var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _selectionProvider = require("./hooks/selection-provider");
 var _useRowId = require("./hooks/use-row-id");
-var Primitives = _interopRequireWildcard(require("./ui"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _ui = require("./ui");
 /** @jsx jsx */
 
 var SelectableCell = function SelectableCell() {
@@ -32,7 +29,7 @@ var SelectableCell = function SelectableCell() {
   var onChange = (0, _react.useCallback)(function (e) {
     return toggleSelection === null || toggleSelection === void 0 ? void 0 : toggleSelection(idx, e.nativeEvent.shiftKey);
   }, [idx, toggleSelection]);
-  return (0, _react2.jsx)(Primitives.SelectableCell, {
+  return (0, _react2.jsx)(_ui.SelectableCell, {
     as: "td"
   }, (0, _react2.jsx)(_checkbox.default, {
     isChecked: isChecked,

package/dist/cjs/sortable-column.js

@@ -12,7 +12,8 @@ var _react2 = require("@emotion/react");
 var _button = _interopRequireDefault(require("@atlaskit/button"));
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _useTable2 = require("./hooks/use-table");
-var _ui = require("./ui");
+var _sortIcon = require("./ui/sort-icon");
+var _th = require("./ui/th");
 var _excluded = ["name", "testId", "onClick", "children"];
 /* eslint-disable no-unused-vars */
 /** @jsx jsx */
@@ -68,7 +69,7 @@ var SortableColumn = function SortableColumn(_ref) {
   function () {
     return setSortState(name);
   }, [setSortState, name]);
-  return (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
+  return (0, _react2.jsx)(_th.TH, (0, _extends2.default)({
     testId: testId,
     sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -80,7 +81,7 @@ var SortableColumn = function SortableColumn(_ref) {
       testId: "".concat(testId, "--button"),
       spacing: "compact",
       appearance: "subtle",
-      iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
+      iconAfter: (0, _react2.jsx)(_sortIcon.SortIcon, {
         name: name
       })
     }, tooltipProps, {

package/dist/cjs/table.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,9 +10,7 @@ var _react2 = 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(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _ui = require("./ui");
 /** @jsx jsx */
 
 /**
@@ -45,7 +42,7 @@ function Table(_ref) {
   }, [isSelectable, localSortKey, setSortState, sortDirection, sortFn]);
   return (0, _react2.jsx)(_useTable.TableProvider, {
     state: tableProviderState
-  }, (0, _react2.jsx)(Primitives.Table, {
+  }, (0, _react2.jsx)(_ui.Table, {
     testId: testId
   }, isSelectable ? (0, _react2.jsx)(_selectionProvider.default, null, children) : children));
 }

package/dist/cjs/thead.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,9 +12,10 @@ var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _selectionProvider = require("./hooks/selection-provider");
 var _useTable2 = require("./hooks/use-table");
-var Primitives = _interopRequireWildcard(require("./ui"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var _bulkActionOverlay = require("./ui/bulk-action-overlay");
+var _selectableCell = require("./ui/selectable-cell");
+var _thead = require("./ui/thead");
+var _tr = require("./ui/tr");
 /** @jsx jsx */
 
 var THead = function THead(_ref) {
@@ -30,9 +30,9 @@ var THead = function THead(_ref) {
     setAll = _useSelection2$.setAll,
     removeAll = _useSelection2$.removeAll;
   var isChecked = state.allChecked || state.anyChecked;
-  return (0, _react.jsx)(Primitives.THead, null, (0, _react.jsx)(Primitives.TR, {
+  return (0, _react.jsx)(_thead.THead, null, (0, _react.jsx)(_tr.TR, {
     isBodyRow: false
-  }, isSelectable && (0, _react.jsx)(Primitives.SelectableCell, {
+  }, isSelectable && (0, _react.jsx)(_selectableCell.SelectableCell, {
     as: "th"
   }, (0, _react.jsx)(_checkbox.default, {
     label: (0, _react.jsx)(_visuallyHidden.default, {
@@ -41,7 +41,7 @@ var THead = function THead(_ref) {
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isSelectable && isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)("span", {
+  })), children, isSelectable && isChecked && (0, _react.jsx)(_bulkActionOverlay.BulkActionOverlay, null, (0, _react.jsx)("span", {
     style: {
       color: "var(--ds-text, #172B4D)",
       /* @ts-ignore migrate to Text */

package/dist/es2019/body.js

@@ -6,7 +6,7 @@ import { useSelection } from './hooks/selection-provider';
 import { RowProvider } from './hooks/use-row-id';
 import { useTable } from './hooks/use-table';
 import { TableBodyProvider } from './hooks/use-table-body';
-import * as Primitives from './ui';
+import { TBody as TBodyPrimitive } from './ui';
 /**
  * __Table body__
  */
@@ -40,7 +40,7 @@ function TBody({
   })).sort(sortFn), [rows, sortFn]);
   return jsx(TableBodyProvider, {
     value: true
-  }, jsx(Primitives.TBody, null, typeof children === 'function' && sortedRows ? sortedRows.map(({
+  }, jsx(TBodyPrimitive, null, typeof children === 'function' && sortedRows ? sortedRows.map(({
     idx,
     ...row
   }) => jsx(RowProvider, {

package/dist/es2019/expandable-cell.js

@@ -5,7 +5,7 @@ import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import useExpand from './hooks/use-expand';
-import * as Primitives from './ui';
+import { ExpandableCell as ExpandableCellPrimitive } from './ui/expandable-cell';
 
 /**
  * __Expandable cell__
@@ -21,7 +21,7 @@ const ExpandableCell = /*#__PURE__*/memo(() => {
   const handleClick = useCallback(() => {
     toggleExpanded();
   }, [toggleExpanded]);
-  return jsx(Primitives.ExpandableCell, {
+  return jsx(ExpandableCellPrimitive, {
     as: "td"
   }, jsx(IconButton, {
     spacing: "compact",

package/dist/es2019/row.js

@@ -8,7 +8,8 @@ import { useRowId } from './hooks/use-row-id';
 import { useTable } from './hooks/use-table';
 import { useTableBody } from './hooks/use-table-body';
 import SelectableCell from './selectable-cell';
-import * as Primitives from './ui';
+import { SelectableCell as SelectableCellPrimitive } from './ui/selectable-cell';
+import { TR as TRPrimitive } from './ui/tr';
 /**
  * __Row__
  *
@@ -48,11 +49,11 @@ const Row = /*#__PURE__*/memo(({
   }
   let selectableCell = isSelectable && jsx(SelectableCell, null);
   if (isSelectable && isExpandableContent) {
-    selectableCell = jsx(Primitives.SelectableCell, {
+    selectableCell = jsx(SelectableCellPrimitive, {
       as: "td"
     });
   }
-  return jsx(Primitives.TR, {
+  return jsx(TRPrimitive, {
     isSelected: isSelected,
     testId: testId,
     isSubitem: isExpandableContent

package/dist/es2019/selectable-cell.js

@@ -5,7 +5,7 @@ import Checkbox from '@atlaskit/checkbox';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
-import * as Primitives from './ui';
+import { SelectableCell as SelectableCellPrimitive } from './ui';
 const SelectableCell = () => {
   const [{
     allChecked,
@@ -16,7 +16,7 @@ const SelectableCell = () => {
   const idx = useRowId();
   const isChecked = useMemo(() => allChecked || checked.includes(idx), [allChecked, checked, idx]);
   const onChange = useCallback(e => toggleSelection === null || toggleSelection === void 0 ? void 0 : toggleSelection(idx, e.nativeEvent.shiftKey), [idx, toggleSelection]);
-  return jsx(Primitives.SelectableCell, {
+  return jsx(SelectableCellPrimitive, {
     as: "td"
   }, jsx(Checkbox, {
     isChecked: isChecked,

package/dist/es2019/sortable-column.js

@@ -6,7 +6,8 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
 import { useTable } from './hooks/use-table';
-import { SortIcon, TH } from './ui';
+import { SortIcon as SortIconPrimitive } from './ui/sort-icon';
+import { TH as THPrimitive } from './ui/th';
 /**
  * TODO these need to be i18n supported
  */
@@ -59,7 +60,7 @@ const SortableColumn = ({
   const updateSortState = useCallback(
   // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
   () => setSortState(name), [setSortState, name]);
-  return jsx(TH, _extends({
+  return jsx(THPrimitive, _extends({
     testId: testId,
     sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -70,7 +71,7 @@ const SortableColumn = ({
     testId: `${testId}--button`,
     spacing: "compact",
     appearance: "subtle",
-    iconAfter: jsx(SortIcon, {
+    iconAfter: jsx(SortIconPrimitive, {
       name: name
     })
   }, tooltipProps, {

package/dist/es2019/table.js

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import SelectionProvider from './hooks/selection-provider';
 import { useSorting } from './hooks/use-sorting';
 import { TableProvider } from './hooks/use-table';
-import * as Primitives from './ui';
+import { Table as TablePrimitive } from './ui';
 /**
  * __Table__
  *
@@ -33,7 +33,7 @@ function Table({
   }), [isSelectable, localSortKey, setSortState, sortDirection, sortFn]);
   return jsx(TableProvider, {
     state: tableProviderState
-  }, jsx(Primitives.Table, {
+  }, jsx(TablePrimitive, {
     testId: testId
   }, isSelectable ? jsx(SelectionProvider, null, children) : children));
 }

package/dist/es2019/thead.js

@@ -6,7 +6,10 @@ import Inline from '@atlaskit/primitives/inline';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useTable } from './hooks/use-table';
-import * as Primitives from './ui';
+import { BulkActionOverlay as BulkActionOverlayPrimitive } from './ui/bulk-action-overlay';
+import { SelectableCell as SelectableCellPrimitive } from './ui/selectable-cell';
+import { THead as THeadPrimitive } from './ui/thead';
+import { TR as TRPrimitive } from './ui/tr';
 const THead = ({
   actions,
   children
@@ -19,9 +22,9 @@ const THead = ({
     removeAll
   }] = useSelection();
   const isChecked = state.allChecked || state.anyChecked;
-  return jsx(Primitives.THead, null, jsx(Primitives.TR, {
+  return jsx(THeadPrimitive, null, jsx(TRPrimitive, {
     isBodyRow: false
-  }, isSelectable && jsx(Primitives.SelectableCell, {
+  }, isSelectable && jsx(SelectableCellPrimitive, {
     as: "th"
   }, jsx(Checkbox, {
     label: jsx(VisuallyHidden, {
@@ -30,7 +33,7 @@ const THead = ({
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx("span", {
+  })), children, isSelectable && isChecked && jsx(BulkActionOverlayPrimitive, null, jsx("span", {
     style: {
       color: "var(--ds-text, #172B4D)",
       /* @ts-ignore migrate to Text */

package/dist/esm/body.js

@@ -12,7 +12,7 @@ import { useSelection } from './hooks/selection-provider';
 import { RowProvider } from './hooks/use-row-id';
 import { useTable } from './hooks/use-table';
 import { TableBodyProvider } from './hooks/use-table-body';
-import * as Primitives from './ui';
+import { TBody as TBodyPrimitive } from './ui';
 /**
  * __Table body__
  */
@@ -49,7 +49,7 @@ function TBody(_ref) {
   }, [rows, sortFn]);
   return jsx(TableBodyProvider, {
     value: true
-  }, jsx(Primitives.TBody, null, typeof children === 'function' && sortedRows ? sortedRows.map(function (_ref2) {
+  }, jsx(TBodyPrimitive, null, typeof children === 'function' && sortedRows ? sortedRows.map(function (_ref2) {
     var idx = _ref2.idx,
       row = _objectWithoutProperties(_ref2, _excluded);
     return jsx(RowProvider, {

package/dist/esm/expandable-cell.js

@@ -5,7 +5,7 @@ import { IconButton } from '@atlaskit/button/new';
 import ChevronDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-down';
 import ChevronUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-up';
 import useExpand from './hooks/use-expand';
-import * as Primitives from './ui';
+import { ExpandableCell as ExpandableCellPrimitive } from './ui/expandable-cell';
 
 /**
  * __Expandable cell__
@@ -20,7 +20,7 @@ var ExpandableCell = /*#__PURE__*/memo(function () {
   var handleClick = useCallback(function () {
     toggleExpanded();
   }, [toggleExpanded]);
-  return jsx(Primitives.ExpandableCell, {
+  return jsx(ExpandableCellPrimitive, {
     as: "td"
   }, jsx(IconButton, {
     spacing: "compact",

package/dist/esm/row.js

@@ -9,7 +9,8 @@ import { useRowId } from './hooks/use-row-id';
 import { useTable } from './hooks/use-table';
 import { useTableBody } from './hooks/use-table-body';
 import SelectableCell from './selectable-cell';
-import * as Primitives from './ui';
+import { SelectableCell as SelectableCellPrimitive } from './ui/selectable-cell';
+import { TR as TRPrimitive } from './ui/tr';
 /**
  * __Row__
  *
@@ -46,11 +47,11 @@ var Row = /*#__PURE__*/memo(function (_ref) {
   }
   var selectableCell = isSelectable && jsx(SelectableCell, null);
   if (isSelectable && isExpandableContent) {
-    selectableCell = jsx(Primitives.SelectableCell, {
+    selectableCell = jsx(SelectableCellPrimitive, {
       as: "td"
     });
   }
-  return jsx(Primitives.TR, {
+  return jsx(TRPrimitive, {
     isSelected: isSelected,
     testId: testId,
     isSubitem: isExpandableContent

package/dist/esm/selectable-cell.js

@@ -6,7 +6,7 @@ import Checkbox from '@atlaskit/checkbox';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
-import * as Primitives from './ui';
+import { SelectableCell as SelectableCellPrimitive } from './ui';
 var SelectableCell = function SelectableCell() {
   var _useSelection = useSelection(),
     _useSelection2 = _slicedToArray(_useSelection, 2),
@@ -21,7 +21,7 @@ var SelectableCell = function SelectableCell() {
   var onChange = useCallback(function (e) {
     return toggleSelection === null || toggleSelection === void 0 ? void 0 : toggleSelection(idx, e.nativeEvent.shiftKey);
   }, [idx, toggleSelection]);
-  return jsx(Primitives.SelectableCell, {
+  return jsx(SelectableCellPrimitive, {
     as: "td"
   }, jsx(Checkbox, {
     isChecked: isChecked,

package/dist/esm/sortable-column.js

@@ -8,7 +8,8 @@ import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
 import { useTable } from './hooks/use-table';
-import { SortIcon, TH } from './ui';
+import { SortIcon as SortIconPrimitive } from './ui/sort-icon';
+import { TH as THPrimitive } from './ui/th';
 /**
  * TODO these need to be i18n supported
  */
@@ -61,7 +62,7 @@ var SortableColumn = function SortableColumn(_ref) {
   function () {
     return setSortState(name);
   }, [setSortState, name]);
-  return jsx(TH, _extends({
+  return jsx(THPrimitive, _extends({
     testId: testId,
     sortDirection: sortKey === name ? sortDirection : 'none'
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -73,7 +74,7 @@ var SortableColumn = function SortableColumn(_ref) {
       testId: "".concat(testId, "--button"),
       spacing: "compact",
       appearance: "subtle",
-      iconAfter: jsx(SortIcon, {
+      iconAfter: jsx(SortIconPrimitive, {
         name: name
       })
     }, tooltipProps, {

package/dist/esm/table.js

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import SelectionProvider from './hooks/selection-provider';
 import { useSorting } from './hooks/use-sorting';
 import { TableProvider } from './hooks/use-table';
-import * as Primitives from './ui';
+import { Table as TablePrimitive } from './ui';
 /**
  * __Table__
  *
@@ -34,7 +34,7 @@ function Table(_ref) {
   }, [isSelectable, localSortKey, setSortState, sortDirection, sortFn]);
   return jsx(TableProvider, {
     state: tableProviderState
-  }, jsx(Primitives.Table, {
+  }, jsx(TablePrimitive, {
     testId: testId
   }, isSelectable ? jsx(SelectionProvider, null, children) : children));
 }

package/dist/esm/thead.js

@@ -7,7 +7,10 @@ import Inline from '@atlaskit/primitives/inline';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useTable } from './hooks/use-table';
-import * as Primitives from './ui';
+import { BulkActionOverlay as BulkActionOverlayPrimitive } from './ui/bulk-action-overlay';
+import { SelectableCell as SelectableCellPrimitive } from './ui/selectable-cell';
+import { THead as THeadPrimitive } from './ui/thead';
+import { TR as TRPrimitive } from './ui/tr';
 var THead = function THead(_ref) {
   var actions = _ref.actions,
     children = _ref.children;
@@ -20,9 +23,9 @@ var THead = function THead(_ref) {
     setAll = _useSelection2$.setAll,
     removeAll = _useSelection2$.removeAll;
   var isChecked = state.allChecked || state.anyChecked;
-  return jsx(Primitives.THead, null, jsx(Primitives.TR, {
+  return jsx(THeadPrimitive, null, jsx(TRPrimitive, {
     isBodyRow: false
-  }, isSelectable && jsx(Primitives.SelectableCell, {
+  }, isSelectable && jsx(SelectableCellPrimitive, {
     as: "th"
   }, jsx(Checkbox, {
     label: jsx(VisuallyHidden, {
@@ -31,7 +34,7 @@ var THead = function THead(_ref) {
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx("span", {
+  })), children, isSelectable && isChecked && jsx(BulkActionOverlayPrimitive, null, jsx("span", {
     style: {
       color: "var(--ds-text, #172B4D)",
       /* @ts-ignore migrate to Text */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.4.26",
+  "version": "0.4.28",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -40,14 +40,14 @@
     "./primitives": "./src/ui/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/button": "^17.7.0",
+    "@atlaskit/button": "^17.14.0",
     "@atlaskit/checkbox": "^13.1.0",
-    "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/ds-lib": "^2.3.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/icon": "^22.1.0",
-    "@atlaskit/primitives": "^5.0.0",
-    "@atlaskit/tokens": "^1.41.0",
-    "@atlaskit/tooltip": "^18.1.0",
+    "@atlaskit/primitives": "^5.6.0",
+    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tooltip": "^18.2.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -65,7 +65,7 @@
     "@testing-library/react-hooks": "^8.0.1",
     "react-dom": "^16.8.0",
     "storybook-addon-designs": "^6.3.1",
-    "typescript": "~4.9.5",
+    "typescript": "~5.4.2",
     "wait-for-expect": "^1.2.0"
   },
   "techstack": {

package/primitives/package.json

@@ -6,7 +6,7 @@
   "sideEffects": false,
   "types": "../dist/types/ui/index.d.ts",
   "typesVersions": {
-    ">=4.5 <4.9": {
+    ">=4.5 <5.4": {
       "*": [
         "../dist/types-ts4.5/ui/index.d.ts"
       ]