@atlaskit/table 0.1.0

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @atlaskit/table
+
+## 0.1.0
+
+### Minor Changes
+
+- [`e2e5705f5d8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e2e5705f5d8) - Create initial component from Figma spec. Dev release, not intended for consumption.

package/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright 2022 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,83 @@
+# Table
+
+**WARNING!**
+
+This is an experimental package for exploration and validation of the foundations for the Atlassian Design System.
+
+## Description
+
+A table is used to display and organise complex data.
+
+## Usage
+
+`import Table from '@atlaskit/table';`
+
+Detailed docs and example usage can be found [here](https://atlaskit.atlassian.com/packages/design-system/table).
+
+### Render Prop
+
+```tsx
+import '@atlaskit/css-reset';
+import Table, { Row, Cell, TBody, THead, HeadCell } from '@atlaskit/table';
+
+import { presidents } from './data';
+
+type President = typeof presidents[number];
+
+/**
+ * Primary UI component for user interaction
+ */
+export const RenderProp = ({ isSelectable }) => {
+  return (
+    <Table isSelectable={isSelectable}>
+      <THead>
+        <HeadCell>Name</HeadCell>
+        <HeadCell>Party</HeadCell>
+        <HeadCell>Year</HeadCell>
+      </THead>
+      <TBody<President> rows={presidents}>
+        {row => (
+          <Row key={row.id} {...row}>
+            <Cell>{row.nm}</Cell>
+            <Cell>{row.pp}</Cell>
+            <Cell>{row.tm}</Cell>
+          </Row>
+        )}
+      </TBody>
+    </Table>
+  );
+};
+```
+
+### Composition
+
+```tsx
+import '@atlaskit/css-reset';
+import Table, { Row, Cell, TBody, THead, HeadCell } from '@atlaskit/table';
+
+import { presidents } from './data';
+
+/**
+ * Primary UI component for user interaction
+ */
+export const CompositionExample = ({ isSelectable }) => {
+  return (
+    <Table isSelectable={isSelectable}>
+      <THead>
+        <HeadCell>Name</HeadCell>
+        <HeadCell>Party</HeadCell>
+        <HeadCell>Year</HeadCell>
+      </THead>
+      <TBody>
+        {presidents.map(row => (
+          <Row key={row.id}>
+            <Cell>{row.nm}</Cell>
+            <Cell>{row.pp}</Cell>
+            <Cell>{row.tm}</Cell>
+          </Row>
+        ))}
+      </TBody>
+    </Table>
+  );
+};
+```

package/constellation/index/examples.mdx

@@ -0,0 +1,19 @@
+---
+order: 0
+---
+
+import BasicAKTableExample from '../../examples/composed';
+import AKTableExample from '../../examples/basic';
+
+## Basic
+
+A table is composed of simple composable elements. In its base form these UI elements are purely presentational.
+
+<Example Component={BasicAKTableExample} packageName="@atlaskit/table" />
+
+## Basic
+
+A data table is used to display dynamic data.
+
+<Example Component={AKTableExample} packageName="@atlaskit/table" />
+

package/constellation/index/props.mdx

@@ -0,0 +1,32 @@
+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';
+
+## 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} />
+
+### Cell props
+
+<PropsTable heading="" props={CellProps} />

package/dist/cjs/body.js

@@ -0,0 +1,105 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var _react2 = require("@emotion/react");
+
+var _selectionProvider = require("./hooks/selection-provider");
+
+var _useRowId = require("./hooks/use-row-id");
+
+var _useTable2 = require("./hooks/use-table");
+
+var _useTableBody = require("./hooks/use-table-body");
+
+var Primitives = _interopRequireWildcard(require("./ui"));
+
+var _excluded = ["idx"];
+
+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; }
+
+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; }
+
+/**
+ * __Table body__
+ */
+function TBody(_ref) {
+  var rows = _ref.rows,
+      children = _ref.children;
+
+  var _useTable = (0, _useTable2.useTable)(),
+      sortKey = _useTable.sortKey,
+      sortDirection = _useTable.sortDirection;
+
+  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
+
+
+  (0, _react.useEffect)(function () {
+    if (removeAll) {
+      removeAll();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [rows]); // Set data length (via setMax) whenever data changes
+
+  (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;
+  };
+
+  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) {
+    var idx = _ref2.idx,
+        row = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
+    return (0, _react2.jsx)(_useRowId.RowProvider, {
+      key: idx,
+      value: idx
+    }, // @ts-expect-error
+    children(row));
+  }) : _react.Children.map(children, function (row, idx) {
+    return (0, _react2.jsx)(_useRowId.RowProvider, {
+      key: idx,
+      value: idx
+    }, row);
+  })));
+}
+
+var _default = TBody;
+exports.default = _default;

package/dist/cjs/head-cell.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = require("@emotion/react");
+
+var _dsExplorations = require("@atlaskit/ds-explorations");
+
+var _th = require("./ui/th");
+
+/* eslint-disable no-unused-vars */
+
+/** @jsx jsx */
+
+/**
+ * __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 (0, _react.jsx)(_th.TH, {
+    scope: scope,
+    align: align,
+    testId: testId,
+    backgroundColor: backgroundColor
+  }, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
+    color: "color.text",
+    fontWeight: "500"
+  }, children));
+};
+
+var _default = Column;
+exports.default = _default;

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

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelection = exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _useSelectable = _interopRequireDefault(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: []
+}, {}]);
+/**
+ * __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 = (0, _useSelectable.default)();
+  return /*#__PURE__*/_react.default.createElement(SelectionContext.Provider, {
+    value: reducer
+  }, children);
+};
+
+var useSelection = function useSelection() {
+  return (0, _react.useContext)(SelectionContext);
+};
+
+exports.useSelection = useSelection;
+var _default = SelectionProvider;
+exports.default = _default;

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

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRowId = exports.RowProvider = void 0;
+
+var _react = require("react");
+
+var RowContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+/**
+ * @internal
+ */
+
+var useRowId = function useRowId() {
+  return (0, _react.useContext)(RowContext);
+};
+/**
+ * __Row provider__
+ * @internal
+ */
+
+
+exports.useRowId = useRowId;
+var RowProvider = RowContext.Provider;
+exports.RowProvider = RowProvider;

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

@@ -0,0 +1,183 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+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 = {
+  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 = (0, _react.useReducer)(reducer, initialiseState()),
+      _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
+      state = _useReducer2[0],
+      dispatch = _useReducer2[1];
+
+  var toggleSelection = (0, _react.useCallback)(function (id, shiftHeld) {
+    dispatch({
+      type: 'toggle_selection',
+      value: {
+        id: id,
+        shiftHeld: shiftHeld
+      }
+    });
+  }, []);
+  var setAll = (0, _react.useCallback)(function () {
+    dispatch({
+      type: 'set_root',
+      value: true
+    });
+  }, []);
+  var removeAll = (0, _react.useCallback)(function () {
+    dispatch({
+      type: 'set_root',
+      value: false
+    });
+  }, []);
+  var setMax = (0, _react.useCallback)(function (max) {
+    dispatch({
+      type: 'set_max',
+      value: max
+    });
+  }, []);
+  return [state, {
+    setAll: setAll,
+    removeAll: removeAll,
+    toggleSelection: toggleSelection,
+    setMax: setMax
+  }];
+}
+
+var _default = useSelectable;
+exports.default = _default;

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

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSorting = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+var useSorting = function useSorting(sortKey) {
+  var _useState = (0, _react.useState)(sortKey),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      localSortKey = _useState2[0],
+      setLocalSortKey = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      localSortDirection = _useState4[0],
+      setLocalSortDirection = _useState4[1];
+
+  var toggleSortDirection = (0, _react.useCallback)(function () {
+    setLocalSortDirection(function (oldLocalSortDirection) {
+      switch (oldLocalSortDirection) {
+        case undefined:
+          return 'ascending';
+
+        case 'ascending':
+          return 'descending';
+
+        case 'descending':
+          return 'ascending';
+      }
+    });
+  }, []);
+  var setSortState = (0, _react.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
+  };
+};
+
+exports.useSorting = useSorting;

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

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useTableBody = exports.TableBodyProvider = void 0;
+
+var _react = require("react");
+
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+
+var TableBodyContext = /*#__PURE__*/(0, _react.createContext)(false);
+/**
+ * __Table body provider__
+ * Ensures correct nesting of table elements.
+ */
+
+var TableBodyProvider = TableBodyContext.Provider;
+exports.TableBodyProvider = TableBodyProvider;
+
+var useTableBody = function useTableBody() {
+  var hasTableBody = (0, _react.useContext)(TableBodyContext);
+  (0, _tinyInvariant.default)(hasTableBody, '<Row /> must be nested inside a <TableBody>');
+};
+
+exports.useTableBody = useTableBody;