@atlaskit/table 0.1.0 → 0.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/table
 
+## 0.1.2
+
+### Patch Changes
+
+- [`d2c17ae6f14`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d2c17ae6f14) - Adds the `width` prop to '@atlaskit/table' header elements.
+
+## 0.1.1
+
+### Patch Changes
+
+- [`7d3f2c3c117`](https://bitbucket.org/atlassian/atlassian-frontend/commits/7d3f2c3c117) - Iterate on typings and component performance
+
 ## 0.1.0
 
 ### Minor Changes

package/constellation/index/examples.mdx

@@ -11,7 +11,7 @@ A table is composed of simple composable elements. In its base form these UI ele
 
 <Example Component={BasicAKTableExample} packageName="@atlaskit/table" />
 
-## Basic
+## Basic data table
 
 A data table is used to display dynamic data.
 

package/constellation/index/props.mdx

@@ -1,32 +1,17 @@
-import TableProps from '!!extract-react-types-loader!../../src/table';
-import TableBodyProps from '!!extract-react-types-loader!../../src/body';
-import TableHeadProps from '!!extract-react-types-loader!../../src/thead';
-import CellProps from '!!extract-react-types-loader!../../src/ui/td';
-import HeadCellProps from '!!extract-react-types-loader!../../src/head-cell';
-import RowProps from '!!extract-react-types-loader!../../src/row';
+import TableProps from '!!extract-react-types-loader!../../extract-react-types/table.tsx';
+import RowProps from '!!extract-react-types-loader!../../extract-react-types/row.tsx';
+import CellProps from '!!extract-react-types-loader!../../extract-react-types/cell.tsx';
 
 ## Props
 
-### Table Props
+### Table props
 
 <PropsTable heading="" props={TableProps} />
 
-### Table body props
-
-<PropsTable heading="" props={TableBodyProps} />
-
-### Table head props
-
-<PropsTable heading="" props={TableHeadProps} />
-
-### HeadCell props
-
-<PropsTable heading="" props={HeadCellProps} />
-
 ### Row props
 
-<PropsTable heading="" props={RowProps} />
+<PropsTable heading="Row props" props={RowProps} />
 
 ### Cell props
 
-<PropsTable heading="" props={CellProps} />
+<PropsTable heading="Cell props" props={CellProps} />

package/dist/cjs/body.js

@@ -47,45 +47,38 @@ function TBody(_ref) {
       children = _ref.children;
 
   var _useTable = (0, _useTable2.useTable)(),
-      sortKey = _useTable.sortKey,
-      sortDirection = _useTable.sortDirection;
+      sortFn = _useTable.sortFn;
 
   var _useSelection = (0, _selectionProvider.useSelection)(),
       _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
       _state = _useSelection2[0],
       _useSelection2$ = _useSelection2[1],
       removeAll = _useSelection2$.removeAll,
-      setMax = _useSelection2$.setMax; // TODO this seems like something the user should control
+      setMax = _useSelection2$.setMax; // TODO: this seems like something the user should control or opt into.
 
 
   (0, _react.useEffect)(function () {
-    if (removeAll) {
-      removeAll();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    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]);
 
-  }, [rows]); // Set data length (via setMax) whenever data changes
+  var childrenCount = _react.Children.count(children);
 
-  (0, _react.useEffect)(function () {
-    var numRows = rows !== undefined ? rows.length : _react.Children.count(children);
-    setMax && setMax(numRows); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rows === null || rows === void 0 ? void 0 : rows.length, _react.Children.count(children)]);
-
-  var sortFn = function sortFn(rowA, rowB) {
-    if (sortKey === 'unset') {
-      return 0;
-    }
-
-    var ascendingComparator = rowA[sortKey] < rowB[sortKey] ? -1 : 1;
-    return sortDirection === 'ascending' ? ascendingComparator : -ascendingComparator;
-  };
+  var rowsLength = rows === null || rows === void 0 ? void 0 : rows.length; // Set data length (via setMax) whenever data changes
 
+  (0, _react.useEffect)(function () {
+    var numRows = rowsLength !== null && rowsLength !== void 0 ? rowsLength : childrenCount;
+    setMax === null || setMax === void 0 ? void 0 : setMax(numRows);
+  }, [rowsLength, childrenCount, setMax]);
+  var sortedRows = (0, _react.useMemo)(function () {
+    return rows === null || rows === void 0 ? void 0 : rows.map(function (row, idx) {
+      return _objectSpread(_objectSpread({}, row), {}, {
+        idx: idx
+      });
+    }).sort(sortFn);
+  }, [rows, sortFn]);
   return (0, _react2.jsx)(_useTableBody.TableBodyProvider, {
     value: true
-  }, (0, _react2.jsx)(Primitives.TBody, null, typeof children === 'function' && rows ? rows.map(function (row, idx) {
-    return _objectSpread(_objectSpread({}, row), {}, {
-      idx: idx
-    });
-  }).sort(sortFn).map(function (_ref2) {
+  }, (0, _react2.jsx)(Primitives.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/hooks/selection-provider.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
 
 Object.defineProperty(exports, "__esModule", {
@@ -11,20 +9,13 @@ exports.useSelection = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _useSelectable = _interopRequireDefault(require("./use-selectable"));
+var _useSelectable = _interopRequireWildcard(require("./use-selectable"));
 
 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 SelectionContext = /*#__PURE__*/(0, _react.createContext)([{
-  checked: [],
-  allChecked: false,
-  anyChecked: false,
-  maxChecked: 0,
-  selectionStart: -1,
-  previousSelection: []
-}, {}]);
+var SelectionContext = /*#__PURE__*/(0, _react.createContext)([_useSelectable.defaultSelectableState, {}]);
 /**
  * __Selection provider__
  *

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

@@ -5,19 +5,13 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.defaultSelectableState = exports.default = void 0;
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
 var _react = require("react");
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-var defaultState = {
+var defaultSelectableState = {
   checked: [],
   allChecked: false,
   anyChecked: false,
@@ -25,6 +19,7 @@ var defaultState = {
   selectionStart: -1,
   previousSelection: []
 };
+exports.defaultSelectableState = defaultSelectableState;
 
 var arrayFromRange = function arrayFromRange(from, to) {
   var startIdx = from;
@@ -56,15 +51,15 @@ function reducer(_ref, action) {
     case 'toggle_selection':
       {
         var _action$value = action.value,
-            id = _action$value.id,
-            shiftHeld = _action$value.shiftHeld;
+            _id = _action$value.id,
+            _shiftHeld = _action$value.shiftHeld;
         var updated = checked.slice();
         var newSelectionStart = selectionStart;
         var newPreviousSelection = previousSelection.slice();
 
-        if (shiftHeld) {
+        if (_shiftHeld) {
           if (checked.length > 0) {
-            var newIds = arrayFromRange(selectionStart, id); // create an array of the new ids
+            var newIds = arrayFromRange(selectionStart, _id); // create an array of the new ids
             // Uncheck ids from the previous selection.
             // This is done to maintain consistency with Shift-select behaviour elsewhere (e.g. macOS)
             // TODO: Code could be improved to only remove ids that are not included in the new range, avoiding needing to re-add them below
@@ -79,15 +74,15 @@ function reducer(_ref, action) {
             newPreviousSelection = newIds; // Maintain an array of the previous selection to allow for consistent Shift-select behaviour
           }
         } else {
-          var checkedIndex = checked.indexOf(id); // is index already checked
+          var checkedIndex = checked.indexOf(_id); // is index already checked
 
           if (checkedIndex !== -1) {
             updated.splice(checkedIndex, 1); // if index is already checked, uncheck
           } else {
-            updated.push(id); // if index is not checked, check
+            updated.push(_id); // if index is not checked, check
           }
 
-          newSelectionStart = id; // Reset selection start id to this non-shift-selected id
+          newSelectionStart = _id; // Reset selection start id to this non-shift-selected id
 
           newPreviousSelection = []; // Reset previous selection as it is no longer relevant once a new non-shift-selected id is added
         }
@@ -97,7 +92,7 @@ function reducer(_ref, action) {
         return {
           checked: updated,
           allChecked: updated.length === maxChecked,
-          anyChecked: _anyChecked || Boolean(updated[id]),
+          anyChecked: _anyChecked || Boolean(updated[_id]),
           maxChecked: maxChecked,
           selectionStart: newSelectionStart,
           previousSelection: newPreviousSelection
@@ -116,10 +111,10 @@ function reducer(_ref, action) {
 
     case 'set_max':
       {
-        var max = action.value;
+        var _max = action.value;
         return {
-          maxChecked: max,
-          allChecked: checked.length === max,
+          maxChecked: _max,
+          allChecked: checked.length === _max,
           anyChecked: anyChecked,
           checked: checked,
           selectionStart: selectionStart,
@@ -132,14 +127,8 @@ function reducer(_ref, action) {
   }
 }
 
-var initialiseState = function initialiseState() {
-  return _objectSpread(_objectSpread({}, defaultState), {}, {
-    checked: []
-  });
-};
-
 function useSelectable() {
-  var _useReducer = (0, _react.useReducer)(reducer, initialiseState()),
+  var _useReducer = (0, _react.useReducer)(reducer, defaultSelectableState),
       _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
       state = _useReducer2[0],
       dispatch = _useReducer2[1];

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

@@ -49,10 +49,19 @@ var useSorting = function useSorting(sortKey) {
       return localSortKey;
     });
   }, [toggleSortDirection]);
+  var sortFn = (0, _react.useCallback)(function (rowA, rowB) {
+    if (localSortKey === 'unset') {
+      return 0;
+    }
+
+    var ascendingComparator = rowA[localSortKey] < rowB[localSortKey] ? -1 : 1;
+    return localSortDirection === 'ascending' ? ascendingComparator : -ascendingComparator;
+  }, [localSortDirection, localSortKey]);
   return {
     sortKey: localSortKey,
     sortDirection: localSortDirection,
-    setSortState: setSortState
+    setSortState: setSortState,
+    sortFn: sortFn
   };
 };
 

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

@@ -22,7 +22,10 @@ function generateContext() {
   return /*#__PURE__*/(0, _react.createContext)({
     isSelectable: false,
     sortKey: 'unset',
-    setSortState: _noop.default
+    setSortState: _noop.default,
+    sortFn: function sortFn() {
+      return 0;
+    }
   });
 }
 

package/dist/cjs/row.js

@@ -19,7 +19,7 @@ var _selectionProvider = require("./hooks/selection-provider");
 
 var _useRowId = require("./hooks/use-row-id");
 
-var _useTable = require("./hooks/use-table");
+var _useTable2 = require("./hooks/use-table");
 
 var _useTableBody = require("./hooks/use-table-body");
 
@@ -46,25 +46,27 @@ var Row = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   // To ensure valid nesting
   (0, _useTableBody.useTableBody)(); // to access table state
 
-  var table = (0, _useTable.useTable)();
+  var _useTable = (0, _useTable2.useTable)(),
+      isSelectable = _useTable.isSelectable;
 
   var _useSelection = (0, _selectionProvider.useSelection)(),
       _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 1),
-      selectionState = _useSelection2[0];
+      _useSelection2$ = _useSelection2[0],
+      allChecked = _useSelection2$.allChecked,
+      checked = _useSelection2$.checked;
 
   var rowId = (0, _useRowId.useRowId)();
+  var isSelected = (0, _react.useMemo)(function () {
+    if (!isSelectable) {
+      return undefined;
+    }
 
-  if (!table.isSelectable) {
-    return (0, _react2.jsx)(Primitives.TR, {
-      testId: testId
-    }, children);
-  }
-
-  var isChecked = selectionState.allChecked || selectionState.checked.includes(rowId);
+    return allChecked || checked.includes(rowId);
+  }, [allChecked, checked, isSelectable, rowId]);
   return (0, _react2.jsx)(Primitives.TR, {
-    isSelected: !!isChecked,
+    isSelected: isSelected,
     testId: testId
-  }, (0, _react2.jsx)(_selectableCell.default, null), children);
+  }, isSelectable && (0, _react2.jsx)(_selectableCell.default, null), children);
 });
 var _default = Row;
 exports.default = _default;

package/dist/cjs/selectable-cell.js

@@ -31,15 +31,18 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var SelectableCell = function SelectableCell() {
   var _useSelection = (0, _selectionProvider.useSelection)(),
       _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
-      state = _useSelection2[0],
+      _useSelection2$ = _useSelection2[0],
+      allChecked = _useSelection2$.allChecked,
+      checked = _useSelection2$.checked,
       toggleSelection = _useSelection2[1].toggleSelection;
 
   var idx = (0, _useRowId.useRowId)();
-  var isChecked = state.allChecked || state.checked.includes(idx);
+  var isChecked = (0, _react.useMemo)(function () {
+    return allChecked || checked.includes(idx);
+  }, [allChecked, checked, idx]);
   var onChange = (0, _react.useCallback)(function (e) {
-    return toggleSelection(idx, e.nativeEvent.shiftKey);
-  }, // eslint-disable-next-line react-hooks/exhaustive-deps
-  [idx]);
+    return toggleSelection === null || toggleSelection === void 0 ? void 0 : toggleSelection(idx, e.nativeEvent.shiftKey);
+  }, [idx, toggleSelection]);
   return (0, _react2.jsx)(Primitives.SelectableCell, {
     as: "td"
   }, (0, _react2.jsx)(_checkbox.default, {

package/dist/cjs/sortable-column.js

@@ -11,13 +11,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = require("@emotion/react");
+var _react = require("react");
 
-var _button = _interopRequireDefault(require("@atlaskit/button"));
-
-var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
+var _react2 = require("@emotion/react");
 
-var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-up"));
+var _button = _interopRequireDefault(require("@atlaskit/button"));
 
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 
@@ -44,7 +42,7 @@ var sortingMessages = {
     number: 'Sort from 9 to 0'
   }
 };
-var overrideStyles = (0, _react.css)({
+var overrideStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   margin: '0 -2px !important',
   gap: "var(--ds-space-050, 4px)",
@@ -78,47 +76,25 @@ var SortableColumn = function SortableColumn(_ref) {
     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;
-  };
-
+  var updateSortState = (0, _react.useCallback)( // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
+  function () {
+    return setSortState(name);
+  }, [setSortState, name]);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _react.jsx)(_ui.TH, (0, _extends2.default)({
+    (0, _react2.jsx)(_ui.TH, (0, _extends2.default)({
       testId: testId
-    }, other), (0, _react.jsx)(_tooltip.default, {
+    }, other), (0, _react2.jsx)(_tooltip.default, {
       content: getSortMessage(),
       position: "top"
     }, function (tooltipProps) {
-      return (0, _react.jsx)(_button.default, (0, _extends2.default)({
+      return (0, _react2.jsx)(_button.default, (0, _extends2.default)({
         spacing: "compact",
         appearance: "subtle",
-        iconAfter: getSortIcon()
+        iconAfter: (0, _react2.jsx)(_ui.SortIcon, {
+          name: name
+        })
       }, tooltipProps, {
-        // @ts-expect-error
-        onClick: function onClick() {
-          return setSortState(name);
-        },
+        onClick: updateSortState,
         css: overrideStyles
       }), children);
     }))

package/dist/cjs/table.js

@@ -9,7 +9,9 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _react = require("@emotion/react");
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
 
 var _selectionProvider = _interopRequireDefault(require("./hooks/selection-provider"));
 
@@ -42,18 +44,23 @@ function Table(_ref) {
   var _useSorting = (0, _useSorting2.useSorting)(sortKey),
       localSortKey = _useSorting.sortKey,
       sortDirection = _useSorting.sortDirection,
-      setSortState = _useSorting.setSortState;
+      setSortState = _useSorting.setSortState,
+      sortFn = _useSorting.sortFn;
 
-  return (0, _react.jsx)(_useTable.TableProvider, {
-    state: {
+  var tableProviderState = (0, _react.useMemo)(function () {
+    return {
       isSelectable: isSelectable,
       sortKey: localSortKey,
       sortDirection: sortDirection,
-      setSortState: setSortState
-    }
-  }, (0, _react.jsx)(Primitives.Table, {
+      setSortState: setSortState,
+      sortFn: sortFn
+    };
+  }, [isSelectable, localSortKey, setSortState, sortDirection, sortFn]);
+  return (0, _react2.jsx)(_useTable.TableProvider, {
+    state: tableProviderState
+  }, (0, _react2.jsx)(Primitives.Table, {
     testId: testId
-  }, isSelectable ? (0, _react.jsx)(_selectionProvider.default, null, children) : children));
+  }, isSelectable ? (0, _react2.jsx)(_selectionProvider.default, null, children) : children));
 }
 
 var _default = Table;

package/dist/cjs/thead.js

@@ -21,7 +21,7 @@ var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"
 
 var _selectionProvider = require("./hooks/selection-provider");
 
-var _useTable = require("./hooks/use-table");
+var _useTable2 = require("./hooks/use-table");
 
 var Primitives = _interopRequireWildcard(require("./ui"));
 
@@ -33,7 +33,9 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var THead = function THead(_ref) {
   var actions = _ref.actions,
       children = _ref.children;
-  var table = (0, _useTable.useTable)();
+
+  var _useTable = (0, _useTable2.useTable)(),
+      isSelectable = _useTable.isSelectable;
 
   var _useSelection = (0, _selectionProvider.useSelection)(),
       _useSelection2 = (0, _slicedToArray2.default)(_useSelection, 2),
@@ -42,14 +44,13 @@ var THead = function THead(_ref) {
       setAll = _useSelection2$.setAll,
       removeAll = _useSelection2$.removeAll;
 
-  var isChecked = state.allChecked || state.anyChecked;
-
-  if (!table.isSelectable) {
+  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, {

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

@@ -53,6 +53,7 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       paddingInline = _ref$paddingInline === void 0 ? 'scale.200' : _ref$paddingInline,
       backgroundColor = _ref.backgroundColor,
       scope = _ref.scope,
+      width = _ref.width,
       className = _ref.className;
   return (0, _react2.jsx)(_box.default, {
     css: baseResetStyles,
@@ -63,7 +64,10 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     paddingInline: paddingInline,
     as: as,
     testId: testId,
-    className: className
+    className: className,
+    UNSAFE_style: width ? {
+      width: width
+    } : undefined
   }, (0, _react2.jsx)(_inline.default, {
     justifyContent: alignMap[align],
     gap: "scale.0"

package/dist/cjs/ui/index.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "SelectableCell", {
     return _selectableCell.SelectableCell;
   }
 });
+Object.defineProperty(exports, "SortIcon", {
+  enumerable: true,
+  get: function get() {
+    return _sortIcon.SortIcon;
+  }
+});
 Object.defineProperty(exports, "TBody", {
   enumerable: true,
   get: function get() {
@@ -66,4 +72,6 @@ var _selectableCell = require("./selectable-cell");
 
 var _thead = require("./thead");
 
-var _bulkActionOverlay = require("./bulk-action-overlay");
+var _bulkActionOverlay = require("./bulk-action-overlay");
+
+var _sortIcon = require("./sort-icon");

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

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortIcon = void 0;
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
+
+var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-up"));
+
+var _useTable2 = require("../hooks/use-table");
+
+/* eslint-disable no-unused-vars */
+
+/** @jsx jsx */
+
+/**
+ * __SortIcon__
+ *
+ * SortIcon is used to display the sort state in our SortableColumn.
+ */
+var SortIcon = /*#__PURE__*/(0, _react.memo)(function (_ref) {
+  var name = _ref.name;
+
+  var _useTable = (0, _useTable2.useTable)(),
+      sortKey = _useTable.sortKey,
+      sortDirection = _useTable.sortDirection;
+
+  if (sortKey === name) {
+    switch (sortDirection) {
+      case 'ascending':
+        return (0, _react2.jsx)(_arrowUp.default, {
+          size: "small",
+          label: "",
+          primaryColor: "inherit"
+        });
+
+      case 'descending':
+        return (0, _react2.jsx)(_arrowDown.default, {
+          size: "small",
+          label: "",
+          primaryColor: "inherit"
+        });
+    }
+  }
+
+  return null;
+});
+exports.SortIcon = SortIcon;

package/dist/cjs/ui/th.js

@@ -23,7 +23,8 @@ var TH = function TH(_ref) {
       testId = _ref.testId,
       align = _ref.align,
       scope = _ref.scope,
-      backgroundColor = _ref.backgroundColor;
+      backgroundColor = _ref.backgroundColor,
+      width = _ref.width;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -32,6 +33,7 @@ var TH = function TH(_ref) {
       testId: testId,
       align: align,
       scope: scope,
+      width: width,
       backgroundColor: backgroundColor
     }, children)
   );