@atlaskit/table 0.2.1 → 0.2.3

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
 const overlayStyles = css({
@@ -7,12 +8,12 @@ const overlayStyles = css({
   bottom: 0,
   left: 32
 });
+
 /**
  * __Bulk action overlay__
  *
  * A bulk action overlay is used to conditionally render when a user makes a row selection
  */
-
 export const BulkActionOverlay = ({
   children
 }) => jsx(Box, {

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { BaseCell } from './base-cell';
 const spacingStyles = css({
@@ -11,12 +12,12 @@ const spacingStyles = css({
     paddingLeft: '8px !important'
   }
 });
+
 /**
  * __Selectable cell__
  *
  * A selectable cell primitive designed to be used for light weight composition.
  */
-
 export const SelectableCell = ({
   children,
   as = 'td'

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

@@ -1,17 +1,16 @@
 /* eslint-disable no-unused-vars */
-
 /** @jsx jsx */
 import { memo } from 'react';
 import { jsx } from '@emotion/react';
 import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
 import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
 import { useTable } from '../hooks/use-table';
+
 /**
  * __SortIcon__
  *
  * SortIcon is used to display the sort state in our SortableColumn.
  */
-
 export const SortIcon = /*#__PURE__*/memo(({
   name
 }) => {
@@ -19,7 +18,6 @@ export const SortIcon = /*#__PURE__*/memo(({
     sortKey,
     sortDirection
   } = useTable();
-
   if (sortKey === name) {
     switch (sortDirection) {
       case 'ascending':
@@ -28,7 +26,6 @@ export const SortIcon = /*#__PURE__*/memo(({
           label: "",
           primaryColor: "inherit"
         });
-
       case 'descending':
         return jsx(ArrowDownIcon, {
           size: "small",
@@ -37,6 +34,5 @@ export const SortIcon = /*#__PURE__*/memo(({
         });
     }
   }
-
   return null;
 });

package/dist/es2019/ui/table.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
 
+import { jsx } from '@emotion/react';
 /**
  * __Table__
  *

package/dist/es2019/ui/tbody.js

@@ -1,6 +1,6 @@
 /* eslint-disable @repo/internal/react/no-clone-element */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 const bodyStyles = css({
   position: 'relative',
@@ -13,11 +13,11 @@ const bodyStyles = css({
     pointerEvents: 'none'
   }
 });
+
 /**
  * __TBody__
  * @primitive
  */
-
 export const TBody = ({
   children
 }) => jsx("tbody", {

package/dist/es2019/ui/td.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import { BaseCell } from './base-cell';
+
 /**
  * __Cell__
  *
@@ -10,11 +11,11 @@ import { BaseCell } from './base-cell';
  *
  * @primitive
  */
-
 export const TD = ({
   testId,
   ...props
-}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}) =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx(BaseCell, _extends({
   as: "td",
   testId: testId

package/dist/es2019/ui/th.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { BaseCell } from './base-cell';
-
 /**
  * __Head cell__
  *
@@ -14,7 +13,8 @@ export const TH = ({
   align,
   scope,
   backgroundColor,
-  width
+  width,
+  sortDirection
 }) =>
 /*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -24,5 +24,6 @@ React.createElement(BaseCell, {
   align: align,
   scope: scope,
   width: width,
-  backgroundColor: backgroundColor
+  backgroundColor: backgroundColor,
+  sortDirection: sortDirection
 }, children);

package/dist/es2019/ui/thead.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 const baseStyles = css({
   position: 'sticky',
@@ -9,6 +10,7 @@ const baseStyles = css({
   borderTop: '2px solid transparent',
   inset: 0
 });
+
 /**
  * __THead__
  *
@@ -16,7 +18,6 @@ const baseStyles = css({
  *
  * @primitive
  */
-
 export const THead = ({
   children
 }) => {

package/dist/es2019/ui/tr.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 const baseStyles = css({
@@ -12,9 +13,9 @@ const selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #DEEBFF88)",
   '&:hover': {
     backgroundColor: "var(--ds-background-selected-hovered, #DEEBFF)" // B50
-
   }
 });
+
 const bodyRowStyles = css({
   borderBottom: `1px solid ${"var(--ds-border, #eee)"}`,
   '&:hover': {
@@ -24,7 +25,6 @@ const bodyRowStyles = css({
     boxShadow: 'none'
   }
 });
-
 /**
  * __Row__
  *

package/dist/es2019/version.json

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

package/dist/esm/body.js

@@ -2,13 +2,9 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var _excluded = ["idx"];
-
 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) { _defineProperty(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; }
-
 /* eslint-disable @repo/internal/react/no-clone-element */
-
 /** @jsx jsx */
 import { Children, useEffect, useMemo } from 'react';
 import { jsx } from '@emotion/react';
@@ -17,31 +13,31 @@ 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';
-
 /**
  * __Table body__
  */
 function TBody(_ref) {
   var rows = _ref.rows,
-      children = _ref.children;
-
+    children = _ref.children;
   var _useTable = useTable(),
-      sortFn = _useTable.sortFn;
-
+    sortFn = _useTable.sortFn;
   var _useSelection = useSelection(),
-      _useSelection2 = _slicedToArray(_useSelection, 2),
-      _state = _useSelection2[0],
-      _useSelection2$ = _useSelection2[1],
-      removeAll = _useSelection2$.removeAll,
-      setMax = _useSelection2$.setMax; // TODO: this seems like something the user should control or opt into.
-
+    _useSelection2 = _slicedToArray(_useSelection, 2),
+    _state = _useSelection2[0],
+    _useSelection2$ = _useSelection2[1],
+    removeAll = _useSelection2$.removeAll,
+    setMax = _useSelection2$.setMax;
 
+  // TODO: this seems like something the user should control or opt into.
   useEffect(function () {
-    removeAll === null || removeAll === void 0 ? void 0 : removeAll(); // eslint-disable-next-line react-hooks/exhaustive-deps -- When the rows change, we [currently] want to call removeAll.
+    removeAll === null || removeAll === void 0 ? void 0 : removeAll();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- When the rows change, we [currently] want to call removeAll.
   }, [rows]);
   var childrenCount = Children.count(children);
-  var rowsLength = rows === null || rows === void 0 ? void 0 : rows.length; // Set data length (via setMax) whenever data changes
+  var rowsLength = rows === null || rows === void 0 ? void 0 : rows.length;
 
+  // Set data length (via setMax) whenever data changes
   useEffect(function () {
     var numRows = rowsLength !== null && rowsLength !== void 0 ? rowsLength : childrenCount;
     setMax === null || setMax === void 0 ? void 0 : setMax(numRows);
@@ -57,12 +53,12 @@ function TBody(_ref) {
     value: true
   }, jsx(Primitives.TBody, null, typeof children === 'function' && sortedRows ? sortedRows.map(function (_ref2) {
     var idx = _ref2.idx,
-        row = _objectWithoutProperties(_ref2, _excluded);
-
+      row = _objectWithoutProperties(_ref2, _excluded);
     return jsx(RowProvider, {
       key: idx,
       value: idx
-    }, // @ts-expect-error
+    },
+    // @ts-expect-error
     children(row));
   }) : Children.map(children, function (row, idx) {
     return jsx(RowProvider, {
@@ -71,5 +67,4 @@ function TBody(_ref) {
     }, row);
   })));
 }
-
 export default TBody;

package/dist/esm/head-cell.js

@@ -1,22 +1,22 @@
 /* eslint-disable no-unused-vars */
-
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { TH } from './ui/th';
+
 /**
  * __HeadCell__
  *
  * HeadCell element
  */
-
 var Column = function Column(_ref) {
   var children = _ref.children,
-      align = _ref.align,
-      testId = _ref.testId,
-      backgroundColor = _ref.backgroundColor,
-      _ref$scope = _ref.scope,
-      scope = _ref$scope === void 0 ? 'col' : _ref$scope;
+    align = _ref.align,
+    testId = _ref.testId,
+    backgroundColor = _ref.backgroundColor,
+    _ref$scope = _ref.scope,
+    scope = _ref$scope === void 0 ? 'col' : _ref$scope;
   return jsx(TH, {
     scope: scope,
     align: align,
@@ -27,5 +27,4 @@ var Column = function Column(_ref) {
     fontWeight: "medium"
   }, children));
 };
-
 export default Column;

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

@@ -1,6 +1,7 @@
 import React, { createContext, useContext } from 'react';
 import useSelectionReducer, { defaultSelectableState } from './use-selectable';
 var SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]);
+
 /**
  * __Selection provider__
  *
@@ -10,7 +11,6 @@ var SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]);
  * - [Code](https://atlassian.design/components/{packageName}/code)
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-
 var SelectionProvider = function SelectionProvider(_ref) {
   var children = _ref.children;
   var reducer = useSelectionReducer();
@@ -18,7 +18,6 @@ var SelectionProvider = function SelectionProvider(_ref) {
     value: reducer
   }, children);
 };
-
 export var useSelection = function useSelection() {
   return useContext(SelectionContext);
 };

package/dist/esm/hooks/use-row-id.js

@@ -1,15 +1,15 @@
 import { createContext, useContext } from 'react';
 var RowContext = /*#__PURE__*/createContext(undefined);
+
 /**
  * @internal
  */
-
 export var useRowId = function useRowId() {
   return useContext(RowContext);
 };
+
 /**
  * __Row provider__
  * @internal
  */
-
 export var RowProvider = RowContext.Provider;

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

@@ -8,50 +8,45 @@ export var defaultSelectableState = {
   selectionStart: -1,
   previousSelection: []
 };
-
 var arrayFromRange = function arrayFromRange(from, to) {
   var startIdx = from;
   var stopIdx = to;
   var increment = 1;
-
   if (from > to) {
     startIdx = to;
     stopIdx = from;
     increment = 0;
-  } // Create an array with values between `from` and `to` - either ascending or descending
-
+  }
 
+  // Create an array with values between `from` and `to` - either ascending or descending
   return Array.from({
     length: stopIdx - startIdx
   }, function (_, i) {
     return startIdx + i + increment;
   });
 };
-
 function reducer(_ref, action) {
   var checked = _ref.checked,
-      anyChecked = _ref.anyChecked,
-      maxChecked = _ref.maxChecked,
-      selectionStart = _ref.selectionStart,
-      previousSelection = _ref.previousSelection;
-
+    anyChecked = _ref.anyChecked,
+    maxChecked = _ref.maxChecked,
+    selectionStart = _ref.selectionStart,
+    previousSelection = _ref.previousSelection;
   switch (action.type) {
     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 (checked.length > 0) {
             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
-
             updated = updated.filter(function (id) {
               return !previousSelection.includes(id);
             });
@@ -59,6 +54,7 @@ function reducer(_ref, action) {
               return updated.indexOf(id) === -1 && updated.push(id);
             } // If the new id is not already checked, check it
             );
+
             newPreviousSelection = newIds; // Maintain an array of the previous selection to allow for consistent Shift-select behaviour
           }
         } else {
@@ -71,12 +67,10 @@ function reducer(_ref, action) {
           }
 
           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
         }
 
         var _anyChecked = updated.length > 0;
-
         return {
           checked: updated,
           allChecked: updated.length === maxChecked,
@@ -86,7 +80,6 @@ function reducer(_ref, action) {
           previousSelection: newPreviousSelection
         };
       }
-
     case 'set_root':
       return {
         checked: action.value ? Array.from(Array(maxChecked).keys()) : [],
@@ -96,7 +89,6 @@ function reducer(_ref, action) {
         selectionStart: selectionStart,
         previousSelection: previousSelection
       };
-
     case 'set_max':
       {
         var _max = action.value;
@@ -109,18 +101,15 @@ function reducer(_ref, action) {
           previousSelection: previousSelection
         };
       }
-
     default:
       throw new Error();
   }
 }
-
 function useSelectable() {
   var _useReducer = useReducer(reducer, defaultSelectableState),
-      _useReducer2 = _slicedToArray(_useReducer, 2),
-      state = _useReducer2[0],
-      dispatch = _useReducer2[1];
-
+    _useReducer2 = _slicedToArray(_useReducer, 2),
+    state = _useReducer2[0],
+    dispatch = _useReducer2[1];
   var toggleSelection = useCallback(function (id, shiftHeld) {
     dispatch({
       type: 'toggle_selection',
@@ -155,5 +144,4 @@ function useSelectable() {
     setMax: setMax
   }];
 }
-
 export default useSelectable;

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

@@ -2,24 +2,20 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import { useCallback, useState } from 'react';
 export var useSorting = function useSorting(sortKey) {
   var _useState = useState(sortKey),
-      _useState2 = _slicedToArray(_useState, 2),
-      localSortKey = _useState2[0],
-      setLocalSortKey = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    localSortKey = _useState2[0],
+    setLocalSortKey = _useState2[1];
   var _useState3 = useState(),
-      _useState4 = _slicedToArray(_useState3, 2),
-      localSortDirection = _useState4[0],
-      setLocalSortDirection = _useState4[1];
-
+    _useState4 = _slicedToArray(_useState3, 2),
+    localSortDirection = _useState4[0],
+    setLocalSortDirection = _useState4[1];
   var toggleSortDirection = useCallback(function () {
     setLocalSortDirection(function (oldLocalSortDirection) {
       switch (oldLocalSortDirection) {
         case undefined:
           return 'ascending';
-
         case 'ascending':
           return 'descending';
-
         case 'descending':
           return 'ascending';
       }
@@ -34,7 +30,6 @@ export var useSorting = function useSorting(sortKey) {
       } else {
         toggleSortDirection();
       }
-
       return localSortKey;
     });
   }, [toggleSortDirection]);
@@ -42,7 +37,6 @@ export var useSorting = function useSorting(sortKey) {
     if (localSortKey === 'unset') {
       return 0;
     }
-
     var ascendingComparator = rowA[localSortKey] < rowB[localSortKey] ? -1 : 1;
     return localSortDirection === 'ascending' ? ascendingComparator : -ascendingComparator;
   }, [localSortDirection, localSortKey]);

package/dist/esm/hooks/use-table-body.js

@@ -1,11 +1,11 @@
 import { createContext, useContext } from 'react';
 import invariant from 'tiny-invariant';
 var TableBodyContext = /*#__PURE__*/createContext(false);
+
 /**
  * __Table body provider__
  * Ensures correct nesting of table elements.
  */
-
 export var TableBodyProvider = TableBodyContext.Provider;
 export var useTableBody = function useTableBody() {
   var hasTableBody = useContext(TableBodyContext);

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

@@ -1,6 +1,5 @@
 import React, { createContext, useContext } from 'react';
 import __noop from '@atlaskit/ds-lib/noop';
-
 function generateContext() {
   return /*#__PURE__*/createContext({
     isSelectable: false,
@@ -11,8 +10,8 @@ function generateContext() {
     }
   });
 }
-
 var TableContext = generateContext();
+
 /**
  * __Table state provider__
  *
@@ -20,10 +19,9 @@ var TableContext = generateContext();
  *
  * - [Examples](https://atlassian.design/components/table/examples)
  */
-
 export function TableProvider(_ref) {
   var children = _ref.children,
-      state = _ref.state;
+    state = _ref.state;
   return (
     /*#__PURE__*/
     // @ts-expect-error
@@ -33,7 +31,8 @@ export function TableProvider(_ref) {
   );
 }
 export var useTable = function useTable() {
-  return (// @ts-expect-error
+  return (
+    // @ts-expect-error
     useContext(TableContext)
   );
 };

package/dist/esm/row.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import { memo, useMemo } from 'react';
 import { jsx } from '@emotion/react';
@@ -9,7 +8,6 @@ import { useTable } from './hooks/use-table';
 import { useTableBody } from './hooks/use-table-body';
 import SelectableCell from './selectable-cell';
 import * as Primitives from './ui';
-
 /**
  * __Row__
  *
@@ -19,25 +17,22 @@ import * as Primitives from './ui';
  */
 var Row = /*#__PURE__*/memo(function (_ref) {
   var children = _ref.children,
-      testId = _ref.testId;
+    testId = _ref.testId;
   // To ensure valid nesting
-  useTableBody(); // to access table state
-
+  useTableBody();
+  // to access table state
   var _useTable = useTable(),
-      isSelectable = _useTable.isSelectable;
-
+    isSelectable = _useTable.isSelectable;
   var _useSelection = useSelection(),
-      _useSelection2 = _slicedToArray(_useSelection, 1),
-      _useSelection2$ = _useSelection2[0],
-      allChecked = _useSelection2$.allChecked,
-      checked = _useSelection2$.checked;
-
+    _useSelection2 = _slicedToArray(_useSelection, 1),
+    _useSelection2$ = _useSelection2[0],
+    allChecked = _useSelection2$.allChecked,
+    checked = _useSelection2$.checked;
   var rowId = useRowId();
   var isSelected = useMemo(function () {
     if (!isSelectable) {
       return undefined;
     }
-
     return allChecked || checked.includes(rowId);
   }, [allChecked, checked, isSelectable, rowId]);
   return jsx(Primitives.TR, {