@atlaskit/table 0.1.0

package/dist/esm/head-cell.js

@@ -0,0 +1,31 @@
+/* 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;
+  return jsx(TH, {
+    scope: scope,
+    align: align,
+    testId: testId,
+    backgroundColor: backgroundColor
+  }, jsx(Text, {
+    color: "color.text",
+    fontWeight: "500"
+  }, children));
+};
+
+export default Column;

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

@@ -0,0 +1,32 @@
+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: []
+}, {}]);
+/**
+ * __Selection provider__
+ *
+ * A selection provider injects selection specific state into the table.
+ *
+ * - [Examples](https://atlassian.design/components/{packageName}/examples)
+ * - [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();
+  return /*#__PURE__*/React.createElement(SelectionContext.Provider, {
+    value: reducer
+  }, children);
+};
+
+export var useSelection = function useSelection() {
+  return useContext(SelectionContext);
+};
+export default SelectionProvider;

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

@@ -0,0 +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

@@ -0,0 +1,171 @@
+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 = {
+  checked: [],
+  allChecked: false,
+  anyChecked: false,
+  maxChecked: 0,
+  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
+
+
+  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;
+
+  switch (action.type) {
+    case 'toggle_selection':
+      {
+        var _action$value = action.value,
+            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);
+            });
+            newIds.forEach(function (id) {
+              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 {
+          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
+          }
+
+          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,
+          anyChecked: _anyChecked || Boolean(updated[id]),
+          maxChecked: maxChecked,
+          selectionStart: newSelectionStart,
+          previousSelection: newPreviousSelection
+        };
+      }
+
+    case 'set_root':
+      return {
+        checked: action.value ? Array.from(Array(maxChecked).keys()) : [],
+        allChecked: action.value,
+        anyChecked: Boolean(action.value),
+        maxChecked: maxChecked,
+        selectionStart: selectionStart,
+        previousSelection: previousSelection
+      };
+
+    case 'set_max':
+      {
+        var max = action.value;
+        return {
+          maxChecked: max,
+          allChecked: checked.length === max,
+          anyChecked: anyChecked,
+          checked: checked,
+          selectionStart: selectionStart,
+          previousSelection: previousSelection
+        };
+      }
+
+    default:
+      throw new Error();
+  }
+}
+
+var initialiseState = function initialiseState() {
+  return _objectSpread(_objectSpread({}, defaultState), {}, {
+    checked: []
+  });
+};
+
+function useSelectable() {
+  var _useReducer = useReducer(reducer, initialiseState()),
+      _useReducer2 = _slicedToArray(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var toggleSelection = useCallback(function (id, shiftHeld) {
+    dispatch({
+      type: 'toggle_selection',
+      value: {
+        id: id,
+        shiftHeld: shiftHeld
+      }
+    });
+  }, []);
+  var setAll = useCallback(function () {
+    dispatch({
+      type: 'set_root',
+      value: true
+    });
+  }, []);
+  var removeAll = useCallback(function () {
+    dispatch({
+      type: 'set_root',
+      value: false
+    });
+  }, []);
+  var setMax = useCallback(function (max) {
+    dispatch({
+      type: 'set_max',
+      value: max
+    });
+  }, []);
+  return [state, {
+    setAll: setAll,
+    removeAll: removeAll,
+    toggleSelection: toggleSelection,
+    setMax: setMax
+  }];
+}
+
+export default useSelectable;

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

@@ -0,0 +1,46 @@
+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];
+
+  var _useState3 = useState(),
+      _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';
+      }
+    });
+  }, []);
+  var setSortState = useCallback(function (key) {
+    setLocalSortKey(function (localSortKey) {
+      if (key !== localSortKey) {
+        // sorting by different column
+        setLocalSortDirection('ascending');
+        return key;
+      } else {
+        toggleSortDirection();
+      }
+
+      return localSortKey;
+    });
+  }, [toggleSortDirection]);
+  return {
+    sortKey: localSortKey,
+    sortDirection: localSortDirection,
+    setSortState: setSortState
+  };
+};

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

@@ -0,0 +1,13 @@
+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);
+  invariant(hasTableBody, '<Row /> must be nested inside a <TableBody>');
+};

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

@@ -0,0 +1,36 @@
+import React, { createContext, useContext } from 'react';
+import __noop from '@atlaskit/ds-lib/noop';
+
+function generateContext() {
+  return /*#__PURE__*/createContext({
+    isSelectable: false,
+    sortKey: 'unset',
+    setSortState: __noop
+  });
+}
+
+var TableContext = generateContext();
+/**
+ * __Table state provider__
+ *
+ * The table context provides the data required for more complex functionality.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+
+export function TableProvider(_ref) {
+  var children = _ref.children,
+      state = _ref.state;
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    React.createElement(TableContext.Provider, {
+      value: state
+    }, children)
+  );
+}
+export var useTable = function useTable() {
+  return (// @ts-expect-error
+    useContext(TableContext)
+  );
+};

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+export { default } from './table';
+export { default as TBody } from './body';
+export { default as Row } from './row';
+export { TD as Cell } from './ui';
+export { default as HeadCell } from './head-cell';
+export { default as SortableColumn } from './sortable-column';
+export { default as THead } from './thead';

package/dist/esm/row.js

@@ -0,0 +1,46 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { memo } from 'react';
+import { jsx } from '@emotion/react';
+import { useSelection } from './hooks/selection-provider';
+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';
+
+/**
+ * __Row__
+ *
+ * A table row.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+var Row = /*#__PURE__*/memo(function (_ref) {
+  var children = _ref.children,
+      testId = _ref.testId;
+  // To ensure valid nesting
+  useTableBody(); // to access table state
+
+  var table = useTable();
+
+  var _useSelection = useSelection(),
+      _useSelection2 = _slicedToArray(_useSelection, 1),
+      selectionState = _useSelection2[0];
+
+  var rowId = useRowId();
+
+  if (!table.isSelectable) {
+    return jsx(Primitives.TR, {
+      testId: testId
+    }, children);
+  }
+
+  var isChecked = selectionState.allChecked || selectionState.checked.includes(rowId);
+  return jsx(Primitives.TR, {
+    isSelected: !!isChecked,
+    testId: testId
+  }, jsx(SelectableCell, null), children);
+});
+export default Row;

package/dist/esm/selectable-cell.js

@@ -0,0 +1,31 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+
+/** @jsx jsx */
+import { memo, useCallback } from 'react';
+import { jsx } from '@emotion/react';
+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),
+      state = _useSelection2[0],
+      toggleSelection = _useSelection2[1].toggleSelection;
+
+  var idx = useRowId();
+  var isChecked = state.allChecked || state.checked.includes(idx);
+  var onChange = useCallback(function (e) {
+    return toggleSelection(idx, e.nativeEvent.shiftKey);
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  [idx]);
+  return jsx(Primitives.SelectableCell, {
+    as: "td"
+  }, jsx(Checkbox, {
+    isChecked: isChecked,
+    onChange: onChange
+  }));
+};
+
+export default /*#__PURE__*/memo(SelectableCell);

package/dist/esm/sortable-column.js

@@ -0,0 +1,114 @@
+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 { 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';
+
+/**
+ * TODO these need to be i18n supported
+ */
+var sortingMessages = {
+  unsorted: {
+    string: 'Sort from A to Z',
+    number: 'Sort from 0 to 9'
+  },
+  ascending: {
+    string: 'Sort from A to Z',
+    number: 'Sort from 0 to 9'
+  },
+  descending: {
+    string: 'Sort from Z to A',
+    number: 'Sort from 9 to 0'
+  }
+};
+var overrideStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  margin: '0 -2px !important',
+  gap: "var(--ds-space-050, 4px)",
+  // 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);
+
+  var _useTable = useTable(),
+      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 getSortIcon = function 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;
+  };
+
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(TH, _extends({
+      testId: testId
+    }, other), jsx(Tooltip, {
+      content: getSortMessage(),
+      position: "top"
+    }, function (tooltipProps) {
+      return jsx(Button, _extends({
+        spacing: "compact",
+        appearance: "subtle",
+        iconAfter: getSortIcon()
+      }, tooltipProps, {
+        // @ts-expect-error
+        onClick: function onClick() {
+          return setSortState(name);
+        },
+        css: overrideStyles
+      }), children);
+    }))
+  );
+};
+
+export default SortableColumn;

package/dist/esm/table.js

@@ -0,0 +1,39 @@
+/** @jsx jsx */
+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';
+
+/**
+ * __Table__
+ *
+ * A data table is used to display dynamic data.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+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;
+
+  var _useSorting = useSorting(sortKey),
+      localSortKey = _useSorting.sortKey,
+      sortDirection = _useSorting.sortDirection,
+      setSortState = _useSorting.setSortState;
+
+  return jsx(TableProvider, {
+    state: {
+      isSelectable: isSelectable,
+      sortKey: localSortKey,
+      sortDirection: sortDirection,
+      setSortState: setSortState
+    }
+  }, jsx(Primitives.Table, {
+    testId: testId
+  }, isSelectable ? jsx(SelectionProvider, null, children) : children));
+}
+
+export default Table;

package/dist/esm/thead.js

@@ -0,0 +1,51 @@
+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';
+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;
+  var table = useTable();
+
+  var _useSelection = useSelection(),
+      _useSelection2 = _slicedToArray(_useSelection, 2),
+      state = _useSelection2[0],
+      _useSelection2$ = _useSelection2[1],
+      setAll = _useSelection2$.setAll,
+      removeAll = _useSelection2$.removeAll;
+
+  var isChecked = state.allChecked || state.anyChecked;
+
+  if (!table.isSelectable) {
+    return jsx(Primitives.THead, null, jsx(Primitives.TR, {
+      isBodyRow: false
+    }, children));
+  }
+
+  return jsx(Primitives.THead, null, jsx(Primitives.TR, {
+    isBodyRow: false
+  }, jsx(Primitives.SelectableCell, {
+    as: "th"
+  }, jsx(Checkbox, {
+    "aria-labelledby": "select-all",
+    onChange: isChecked ? removeAll : setAll,
+    isChecked: isChecked,
+    isIndeterminate: state.anyChecked && !state.allChecked
+  }), jsx(VisuallyHidden, {
+    id: "select-all"
+  }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
+    color: "color.text",
+    fontWeight: "500"
+  }, state.checked.length, " selected"), actions && jsx(Inline, {
+    gap: "scale.100"
+  }, actions(state.checked)))));
+};
+
+export default THead;