@atlaskit/table 0.2.1 → 0.2.2

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.2",
 	"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, {

package/dist/esm/selectable-cell.js

@@ -1,5 +1,4 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
@@ -7,15 +6,13 @@ import Checkbox from '@atlaskit/checkbox';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
 import * as Primitives from './ui';
-
 var SelectableCell = function SelectableCell() {
   var _useSelection = useSelection(),
-      _useSelection2 = _slicedToArray(_useSelection, 2),
-      _useSelection2$ = _useSelection2[0],
-      allChecked = _useSelection2$.allChecked,
-      checked = _useSelection2$.checked,
-      toggleSelection = _useSelection2[1].toggleSelection;
-
+    _useSelection2 = _slicedToArray(_useSelection, 2),
+    _useSelection2$ = _useSelection2[0],
+    allChecked = _useSelection2$.allChecked,
+    checked = _useSelection2$.checked,
+    toggleSelection = _useSelection2[1].toggleSelection;
   var idx = useRowId();
   var isChecked = useMemo(function () {
     return allChecked || checked.includes(idx);
@@ -30,5 +27,4 @@ var SelectableCell = function SelectableCell() {
     onChange: onChange
   }));
 };
-
 export default /*#__PURE__*/memo(SelectableCell);

package/dist/esm/sortable-column.js

@@ -1,9 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["name", "testId", "onClick", "children"];
-
 /* eslint-disable no-unused-vars */
-
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -11,7 +9,6 @@ import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
 import { useTable } from './hooks/use-table';
 import { SortIcon, TH } from './ui';
-
 /**
  * TODO these need to be i18n supported
  */
@@ -36,38 +33,36 @@ var overrideStyles = css({
   // 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 = _objectWithoutProperties(_ref, _excluded);
-
+    testId = _ref.testId,
+    onClick = _ref.onClick,
+    children = _ref.children,
+    other = _objectWithoutProperties(_ref, _excluded);
   var _useTable = useTable(),
-      sortKey = _useTable.sortKey,
-      sortDirection = _useTable.sortDirection,
-      setSortState = _useTable.setSortState;
-
+    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 updateSortState = useCallback( // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
+  var updateSortState = 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
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(TH, _extends({
       testId: testId
     }, other), jsx(Tooltip, {
@@ -87,5 +82,4 @@ var SortableColumn = function SortableColumn(_ref) {
     }))
   );
 };
-
 export default SortableColumn;

package/dist/esm/table.js

@@ -5,7 +5,6 @@ import SelectionProvider from './hooks/selection-provider';
 import { useSorting } from './hooks/use-sorting';
 import { TableProvider } from './hooks/use-table';
 import * as Primitives from './ui';
-
 /**
  * __Table__
  *
@@ -15,17 +14,15 @@ import * as Primitives from './ui';
  */
 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;
-
+    isSelectable = _ref.isSelectable,
+    _ref$sortKey = _ref.sortKey,
+    sortKey = _ref$sortKey === void 0 ? 'unset' : _ref$sortKey,
+    testId = _ref.testId;
   var _useSorting = useSorting(sortKey),
-      localSortKey = _useSorting.sortKey,
-      sortDirection = _useSorting.sortDirection,
-      setSortState = _useSorting.setSortState,
-      sortFn = _useSorting.sortFn;
-
+    localSortKey = _useSorting.sortKey,
+    sortDirection = _useSorting.sortDirection,
+    setSortState = _useSorting.setSortState,
+    sortFn = _useSorting.sortFn;
   var tableProviderState = useMemo(function () {
     return {
       isSelectable: isSelectable,
@@ -41,5 +38,4 @@ function Table(_ref) {
     testId: testId
   }, isSelectable ? jsx(SelectionProvider, null, children) : children));
 }
-
 export default Table;

package/dist/esm/thead.js

@@ -1,6 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
 import { UNSAFE_Inline as Inline, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
@@ -8,27 +8,22 @@ import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
 import { useTable } from './hooks/use-table';
 import * as Primitives from './ui';
-
 var THead = function THead(_ref) {
   var actions = _ref.actions,
-      children = _ref.children;
-
+    children = _ref.children;
   var _useTable = useTable(),
-      isSelectable = _useTable.isSelectable;
-
+    isSelectable = _useTable.isSelectable;
   var _useSelection = useSelection(),
-      _useSelection2 = _slicedToArray(_useSelection, 2),
-      state = _useSelection2[0],
-      _useSelection2$ = _useSelection2[1],
-      setAll = _useSelection2$.setAll,
-      removeAll = _useSelection2$.removeAll;
-
+    _useSelection2 = _slicedToArray(_useSelection, 2),
+    state = _useSelection2[0],
+    _useSelection2$ = _useSelection2[1],
+    setAll = _useSelection2$.setAll,
+    removeAll = _useSelection2$.removeAll;
   if (!isSelectable) {
     return jsx(Primitives.THead, null, jsx(Primitives.TR, {
       isBodyRow: false
     }, children));
   }
-
   var isChecked = state.allChecked || state.anyChecked;
   return jsx(Primitives.THead, null, jsx(Primitives.TR, {
     isBodyRow: false
@@ -48,5 +43,4 @@ var THead = function THead(_ref) {
     gap: "space.100"
   }, actions(state.checked)))));
 };
-
 export default THead;