@atlaskit/table 0.1.0 → 0.1.2

package/dist/cjs/version.json

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

package/dist/es2019/body.js

@@ -1,7 +1,7 @@
 /* eslint-disable @repo/internal/react/no-clone-element */
 
 /** @jsx jsx */
-import { Children, useEffect } from 'react';
+import { Children, useEffect, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSelection } from './hooks/selection-provider';
 import { RowProvider } from './hooks/use-row-id';
@@ -17,40 +17,29 @@ function TBody({
   children
 }) {
   const {
-    sortKey,
-    sortDirection
+    sortFn
   } = useTable();
   const [_state, {
     removeAll,
     setMax
-  }] = useSelection(); // TODO this seems like something the user should control
+  }] = useSelection(); // TODO: this seems like something the user should control or opt into.
 
   useEffect(() => {
-    if (removeAll) {
-      removeAll();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [rows]); // Set data length (via setMax) whenever data changes
+    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]);
+  const childrenCount = Children.count(children);
+  const rowsLength = rows === null || rows === void 0 ? void 0 : rows.length; // Set data length (via setMax) whenever data changes
 
   useEffect(() => {
-    const numRows = rows !== undefined ? rows.length : Children.count(children);
-    setMax && setMax(numRows); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rows === null || rows === void 0 ? void 0 : rows.length, Children.count(children)]);
-
-  const sortFn = (rowA, rowB) => {
-    if (sortKey === 'unset') {
-      return 0;
-    }
-
-    const ascendingComparator = rowA[sortKey] < rowB[sortKey] ? -1 : 1;
-    return sortDirection === 'ascending' ? ascendingComparator : -ascendingComparator;
-  };
-
+    const numRows = rowsLength !== null && rowsLength !== void 0 ? rowsLength : childrenCount;
+    setMax === null || setMax === void 0 ? void 0 : setMax(numRows);
+  }, [rowsLength, childrenCount, setMax]);
+  const sortedRows = useMemo(() => rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => ({ ...row,
+    idx
+  })).sort(sortFn), [rows, sortFn]);
   return jsx(TableBodyProvider, {
     value: true
-  }, jsx(Primitives.TBody, null, typeof children === 'function' && rows ? rows.map((row, idx) => ({ ...row,
-    idx
-  })).sort(sortFn).map(({
+  }, jsx(Primitives.TBody, null, typeof children === 'function' && sortedRows ? sortedRows.map(({
     idx,
     ...row
   }) => jsx(RowProvider, {

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

@@ -1,13 +1,6 @@
 import React, { createContext, useContext } from 'react';
-import useSelectionReducer from './use-selectable';
-const SelectionContext = /*#__PURE__*/createContext([{
-  checked: [],
-  allChecked: false,
-  anyChecked: false,
-  maxChecked: 0,
-  selectionStart: -1,
-  previousSelection: []
-}, {}]);
+import useSelectionReducer, { defaultSelectableState } from './use-selectable';
+const SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]);
 /**
  * __Selection provider__
  *

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

@@ -1,5 +1,5 @@
 import { useCallback, useReducer } from 'react';
-const defaultState = {
+export const defaultSelectableState = {
   checked: [],
   allChecked: false,
   anyChecked: false,
@@ -112,14 +112,8 @@ function reducer({
   }
 }
 
-const initialiseState = () => {
-  return { ...defaultState,
-    checked: []
-  };
-};
-
 function useSelectable() {
-  const [state, dispatch] = useReducer(reducer, initialiseState());
+  const [state, dispatch] = useReducer(reducer, defaultSelectableState);
   const toggleSelection = useCallback((id, shiftHeld) => {
     dispatch({
       type: 'toggle_selection',

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

@@ -29,9 +29,18 @@ export const useSorting = sortKey => {
       return localSortKey;
     });
   }, [toggleSortDirection]);
+  const sortFn = useCallback((rowA, rowB) => {
+    if (localSortKey === 'unset') {
+      return 0;
+    }
+
+    const ascendingComparator = rowA[localSortKey] < rowB[localSortKey] ? -1 : 1;
+    return localSortDirection === 'ascending' ? ascendingComparator : -ascendingComparator;
+  }, [localSortDirection, localSortKey]);
   return {
     sortKey: localSortKey,
     sortDirection: localSortDirection,
-    setSortState
+    setSortState,
+    sortFn
   };
 };

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

@@ -5,7 +5,8 @@ function generateContext() {
   return /*#__PURE__*/createContext({
     isSelectable: false,
     sortKey: 'unset',
-    setSortState: __noop
+    setSortState: __noop,
+    sortFn: () => 0
   });
 }
 

package/dist/es2019/row.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { memo } from 'react';
+import { memo, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSelection } from './hooks/selection-provider';
 import { useRowId } from './hooks/use-row-id';
@@ -22,20 +22,24 @@ const Row = /*#__PURE__*/memo(({
   // To ensure valid nesting
   useTableBody(); // to access table state
 
-  const table = useTable();
-  const [selectionState] = useSelection();
+  const {
+    isSelectable
+  } = useTable();
+  const [{
+    allChecked,
+    checked
+  }] = useSelection();
   const rowId = useRowId();
+  const isSelected = useMemo(() => {
+    if (!isSelectable) {
+      return undefined;
+    }
 
-  if (!table.isSelectable) {
-    return jsx(Primitives.TR, {
-      testId: testId
-    }, children);
-  }
-
-  const isChecked = selectionState.allChecked || selectionState.checked.includes(rowId);
+    return allChecked || checked.includes(rowId);
+  }, [allChecked, checked, isSelectable, rowId]);
   return jsx(Primitives.TR, {
-    isSelected: !!isChecked,
+    isSelected: isSelected,
     testId: testId
-  }, jsx(SelectableCell, null), children);
+  }, isSelectable && jsx(SelectableCell, null), children);
 });
 export default Row;

package/dist/es2019/selectable-cell.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { memo, useCallback } from 'react';
+import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
 import { useSelection } from './hooks/selection-provider';
@@ -7,13 +7,15 @@ import { useRowId } from './hooks/use-row-id';
 import * as Primitives from './ui';
 
 const SelectableCell = () => {
-  const [state, {
+  const [{
+    allChecked,
+    checked
+  }, {
     toggleSelection
   }] = useSelection();
   const idx = useRowId();
-  const isChecked = state.allChecked || state.checked.includes(idx);
-  const onChange = useCallback(e => toggleSelection(idx, e.nativeEvent.shiftKey), // eslint-disable-next-line react-hooks/exhaustive-deps
-  [idx]);
+  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, {
     as: "td"
   }, jsx(Checkbox, {

package/dist/es2019/sortable-column.js

@@ -3,13 +3,12 @@ import _extends from "@babel/runtime/helpers/extends";
 /* eslint-disable no-unused-vars */
 
 /** @jsx jsx */
+import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button';
-import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
-import ArrowUpIcon from '@atlaskit/icon/glyph/arrow-up';
 import Tooltip from '@atlaskit/tooltip';
 import { useTable } from './hooks/use-table';
-import { TH } from './ui';
+import { SortIcon, TH } from './ui';
 
 /**
  * TODO these need to be i18n supported
@@ -63,31 +62,8 @@ const SortableColumn = ({
     return sortingMessages.unsorted.string;
   };
 
-  const getSortIcon = () => {
-    if (sortKey === name) {
-      switch (sortDirection) {
-        case undefined:
-          return undefined;
-
-        case 'ascending':
-          return jsx(ArrowUpIcon, {
-            size: "small",
-            label: "",
-            primaryColor: "inherit"
-          });
-
-        case 'descending':
-          return jsx(ArrowDownIcon, {
-            size: "small",
-            label: "",
-            primaryColor: "inherit"
-          });
-      }
-    }
-
-    return undefined;
-  };
-
+  const updateSortState = useCallback( // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
+  () => setSortState(name), [setSortState, name]);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(TH, _extends({
       testId: testId
@@ -97,10 +73,11 @@ const SortableColumn = ({
     }, tooltipProps => jsx(Button, _extends({
       spacing: "compact",
       appearance: "subtle",
-      iconAfter: getSortIcon()
+      iconAfter: jsx(SortIcon, {
+        name: name
+      })
     }, tooltipProps, {
-      // @ts-expect-error
-      onClick: () => setSortState(name),
+      onClick: updateSortState,
       css: overrideStyles
     }), children)))
   );

package/dist/es2019/table.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+import { useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import SelectionProvider from './hooks/selection-provider';
 import { useSorting } from './hooks/use-sorting';
@@ -21,15 +22,18 @@ function Table({
   const {
     sortKey: localSortKey,
     sortDirection,
-    setSortState
+    setSortState,
+    sortFn
   } = useSorting(sortKey);
+  const tableProviderState = useMemo(() => ({
+    isSelectable,
+    sortKey: localSortKey,
+    sortDirection: sortDirection,
+    setSortState,
+    sortFn
+  }), [isSelectable, localSortKey, setSortState, sortDirection, sortFn]);
   return jsx(TableProvider, {
-    state: {
-      isSelectable,
-      sortKey: localSortKey,
-      sortDirection: sortDirection,
-      setSortState
-    }
+    state: tableProviderState
   }, jsx(Primitives.Table, {
     testId: testId
   }, isSelectable ? jsx(SelectionProvider, null, children) : children));

package/dist/es2019/thead.js

@@ -11,19 +11,21 @@ const THead = ({
   actions,
   children
 }) => {
-  const table = useTable();
+  const {
+    isSelectable
+  } = useTable();
   const [state, {
     setAll,
     removeAll
   }] = useSelection();
-  const isChecked = state.allChecked || state.anyChecked;
 
-  if (!table.isSelectable) {
+  if (!isSelectable) {
     return jsx(Primitives.THead, null, jsx(Primitives.TR, {
       isBodyRow: false
     }, children));
   }
 
+  const isChecked = state.allChecked || state.anyChecked;
   return jsx(Primitives.THead, null, jsx(Primitives.TR, {
     isBodyRow: false
   }, jsx(Primitives.SelectableCell, {

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

@@ -37,6 +37,7 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   paddingInline = 'scale.200',
   backgroundColor,
   scope,
+  width,
   className
 }, ref) => jsx(Box, {
   css: baseResetStyles,
@@ -47,7 +48,10 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   paddingInline: paddingInline,
   as: as,
   testId: testId,
-  className: className
+  className: className,
+  UNSAFE_style: width ? {
+    width
+  } : undefined
 }, jsx(Inline, {
   justifyContent: alignMap[align],
   gap: "scale.0"

package/dist/es2019/ui/index.js

@@ -8,4 +8,5 @@ export { TD } from './td';
 export { TH } from './th';
 export { SelectableCell } from './selectable-cell';
 export { THead } from './thead';
-export { BulkActionOverlay } from './bulk-action-overlay';
+export { BulkActionOverlay } from './bulk-action-overlay';
+export { SortIcon } from './sort-icon';

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

@@ -0,0 +1,42 @@
+/* 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
+}) => {
+  const {
+    sortKey,
+    sortDirection
+  } = useTable();
+
+  if (sortKey === name) {
+    switch (sortDirection) {
+      case 'ascending':
+        return jsx(ArrowUpIcon, {
+          size: "small",
+          label: "",
+          primaryColor: "inherit"
+        });
+
+      case 'descending':
+        return jsx(ArrowDownIcon, {
+          size: "small",
+          label: "",
+          primaryColor: "inherit"
+        });
+    }
+  }
+
+  return null;
+});

package/dist/es2019/ui/th.js

@@ -13,7 +13,8 @@ export const TH = ({
   testId,
   align,
   scope,
-  backgroundColor
+  backgroundColor,
+  width
 }) =>
 /*#__PURE__*/
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -22,5 +23,6 @@ React.createElement(BaseCell, {
   testId: testId,
   align: align,
   scope: scope,
+  width: width,
   backgroundColor: backgroundColor
 }, children);

package/dist/es2019/version.json

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

package/dist/esm/body.js

@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /* eslint-disable @repo/internal/react/no-clone-element */
 
 /** @jsx jsx */
-import { Children, useEffect } from 'react';
+import { Children, useEffect, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import { useSelection } from './hooks/selection-provider';
 import { RowProvider } from './hooks/use-row-id';
@@ -26,45 +26,36 @@ function TBody(_ref) {
       children = _ref.children;
 
   var _useTable = useTable(),
-      sortKey = _useTable.sortKey,
-      sortDirection = _useTable.sortDirection;
+      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
+      setMax = _useSelection2$.setMax; // TODO: this seems like something the user should control or opt into.
 
 
   useEffect(function () {
-    if (removeAll) {
-      removeAll();
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, [rows]); // Set data length (via setMax) whenever data changes
+    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
 
   useEffect(function () {
-    var numRows = rows !== undefined ? rows.length : Children.count(children);
-    setMax && setMax(numRows); // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [rows === null || rows === void 0 ? void 0 : rows.length, 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 numRows = rowsLength !== null && rowsLength !== void 0 ? rowsLength : childrenCount;
+    setMax === null || setMax === void 0 ? void 0 : setMax(numRows);
+  }, [rowsLength, childrenCount, setMax]);
+  var sortedRows = 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 jsx(TableBodyProvider, {
     value: true
-  }, jsx(Primitives.TBody, null, typeof children === 'function' && rows ? rows.map(function (row, idx) {
-    return _objectSpread(_objectSpread({}, row), {}, {
-      idx: idx
-    });
-  }).sort(sortFn).map(function (_ref2) {
+  }, jsx(Primitives.TBody, null, typeof children === 'function' && sortedRows ? sortedRows.map(function (_ref2) {
     var idx = _ref2.idx,
         row = _objectWithoutProperties(_ref2, _excluded);
 

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

@@ -1,13 +1,6 @@
 import React, { createContext, useContext } from 'react';
-import useSelectionReducer from './use-selectable';
-var SelectionContext = /*#__PURE__*/createContext([{
-  checked: [],
-  allChecked: false,
-  anyChecked: false,
-  maxChecked: 0,
-  selectionStart: -1,
-  previousSelection: []
-}, {}]);
+import useSelectionReducer, { defaultSelectableState } from './use-selectable';
+var SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]);
 /**
  * __Selection provider__
  *

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

@@ -1,12 +1,6 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-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; }
-
 import { useCallback, useReducer } from 'react';
-var defaultState = {
+export var defaultSelectableState = {
   checked: [],
   allChecked: false,
   anyChecked: false,
@@ -45,15 +39,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
@@ -68,15 +62,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
         }
@@ -86,7 +80,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
@@ -105,10 +99,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,
@@ -121,14 +115,8 @@ function reducer(_ref, action) {
   }
 }
 
-var initialiseState = function initialiseState() {
-  return _objectSpread(_objectSpread({}, defaultState), {}, {
-    checked: []
-  });
-};
-
 function useSelectable() {
-  var _useReducer = useReducer(reducer, initialiseState()),
+  var _useReducer = useReducer(reducer, defaultSelectableState),
       _useReducer2 = _slicedToArray(_useReducer, 2),
       state = _useReducer2[0],
       dispatch = _useReducer2[1];

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

@@ -38,9 +38,18 @@ export var useSorting = function useSorting(sortKey) {
       return localSortKey;
     });
   }, [toggleSortDirection]);
+  var sortFn = 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/esm/hooks/use-table.js

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