@atlaskit/table 0.1.0

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

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectableCell = void 0;
+
+var _react = require("@emotion/react");
+
+var _baseCell = require("./base-cell");
+
+/** @jsx jsx */
+var spacingStyles = (0, _react.css)({
+  width: 32,
+  padding: "var(--ds-space-0, 0px)",
+  paddingLeft: "var(--ds-space-100, 8px)",
+  // eslint-disable-next-line @repo/internal/styles/no-nested-styles
+  '& + *': {
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+    paddingLeft: '8px !important'
+  }
+});
+/**
+ * __Selectable cell__
+ *
+ * A selectable cell primitive designed to be used for light weight composition.
+ */
+
+var SelectableCell = function SelectableCell(_ref) {
+  var children = _ref.children,
+      _ref$as = _ref.as,
+      as = _ref$as === void 0 ? 'td' : _ref$as;
+  return (0, _react.jsx)(_baseCell.BaseCell, {
+    as: as,
+    css: spacingStyles
+  }, children);
+};
+
+exports.SelectableCell = SelectableCell;

package/dist/cjs/ui/table.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Table = void 0;
+
+var _react = require("@emotion/react");
+
+/** @jsx jsx */
+
+/**
+ * __Table__
+ *
+ * A primitive table container. Applies the HTML native element with no other styling.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ *
+ * @primitive
+ * @see https://hello.atlassian.net/wiki/spaces/DST/pages/1947062524/Dynamic+table+2.0+implementation+spec
+ */
+var Table = function Table(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId,
+      summary = _ref.summary;
+  return (0, _react.jsx)("table", {
+    "data-testid": testId
+  }, summary && (0, _react.jsx)("caption", null, summary), children);
+};
+
+exports.Table = Table;

package/dist/cjs/ui/tbody.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TBody = void 0;
+
+var _react = require("@emotion/react");
+
+/* eslint-disable @repo/internal/react/no-clone-element */
+
+/** @jsx jsx */
+var bodyStyles = (0, _react.css)({
+  position: 'relative',
+  border: 'none',
+  '&:after': {
+    position: 'absolute',
+    boxShadow: "inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"),
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+/**
+ * __TBody__
+ * @primitive
+ */
+
+var TBody = function TBody(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)("tbody", {
+    css: bodyStyles
+  }, children);
+};
+
+exports.TBody = TBody;
+var _default = TBody;
+exports.default = _default;

package/dist/cjs/ui/td.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TD = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = require("@emotion/react");
+
+var _baseCell = require("./base-cell");
+
+var _excluded = ["testId"];
+
+/**
+ * __Cell__
+ *
+ * A data cell.
+ *
+ * @primitive
+ */
+var TD = function TD(_ref) {
+  var testId = _ref.testId,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react.jsx)(_baseCell.BaseCell, (0, _extends2.default)({
+      as: "td",
+      testId: testId
+    }, props))
+  );
+};
+
+exports.TD = TD;

package/dist/cjs/ui/th.js

@@ -0,0 +1,40 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TH = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _baseCell = require("./base-cell");
+
+/**
+ * __Head cell__
+ *
+ * A head cell.
+ *
+ * @primitive
+ */
+var TH = function TH(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId,
+      align = _ref.align,
+      scope = _ref.scope,
+      backgroundColor = _ref.backgroundColor;
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    _react.default.createElement(_baseCell.BaseCell, {
+      as: "th",
+      testId: testId,
+      align: align,
+      scope: scope,
+      backgroundColor: backgroundColor
+    }, children)
+  );
+};
+
+exports.TH = TH;

package/dist/cjs/ui/thead.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.THead = void 0;
+
+var _react = require("@emotion/react");
+
+/** @jsx jsx */
+var baseStyles = (0, _react.css)({
+  position: 'sticky',
+  zIndex: 1,
+  backgroundColor: "var(--ds-surface, white)",
+  border: 'none',
+  inset: 0,
+  '&:after': {
+    position: 'absolute',
+    boxShadow: "inset 0 -2px 0 0 ".concat("var(--ds-border, #eee)"),
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+/**
+ * __THead__
+ *
+ * A primitive table head container. Applies the HTML native element with minimal styling.
+ *
+ * @primitive
+ */
+
+var THead = function THead(_ref) {
+  var children = _ref.children;
+  return (0, _react.jsx)("thead", {
+    css: baseStyles
+  }, children);
+};
+
+exports.THead = THead;

package/dist/cjs/ui/tr.js

@@ -0,0 +1,68 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TR = void 0;
+
+var _react = require("@emotion/react");
+
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
+/** @jsx jsx */
+var baseStyles = (0, _react.css)({
+  height: 48,
+  position: 'relative',
+  border: 'none',
+  borderImageWidth: 0,
+  borderSpacing: 0
+});
+var selectedStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-background-selected, #DEEBFF88)",
+  '&:hover': {
+    backgroundColor: "var(--ds-background-selected-hovered, #DEEBFF)" // B50
+
+  }
+});
+var bodyRowStyles = (0, _react.css)({
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
+  },
+  '&:focus-visible::after': {
+    boxShadow: 'none'
+  },
+  '&:after': {
+    position: 'absolute',
+    boxShadow: "inset 0 -1px 0 0 ".concat("var(--ds-border, #eee)"),
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+
+/**
+ * __Row__
+ *
+ * A row primitive.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+var TR = function TR(_ref) {
+  var children = _ref.children,
+      testId = _ref.testId,
+      isSelected = _ref.isSelected,
+      _ref$isBodyRow = _ref.isBodyRow,
+      isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow;
+  return (0, _react.jsx)(_focusRing.default, {
+    isInset: true
+  }, (0, _react.jsx)("tr", {
+    tabIndex: -1,
+    "aria-selected": isSelected,
+    "data-testid": testId,
+    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles]
+  }, children));
+};
+
+exports.TR = TR;

package/dist/cjs/version.json

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

package/dist/es2019/body.js

@@ -0,0 +1,66 @@
+/* eslint-disable @repo/internal/react/no-clone-element */
+
+/** @jsx jsx */
+import { Children, useEffect } from 'react';
+import { jsx } from '@emotion/react';
+import { useSelection } from './hooks/selection-provider';
+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({
+  rows,
+  children
+}) {
+  const {
+    sortKey,
+    sortDirection
+  } = useTable();
+  const [_state, {
+    removeAll,
+    setMax
+  }] = useSelection(); // TODO this seems like something the user should control
+
+  useEffect(() => {
+    if (removeAll) {
+      removeAll();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [rows]); // 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;
+  };
+
+  return jsx(TableBodyProvider, {
+    value: true
+  }, jsx(Primitives.TBody, null, typeof children === 'function' && rows ? rows.map((row, idx) => ({ ...row,
+    idx
+  })).sort(sortFn).map(({
+    idx,
+    ...row
+  }) => jsx(RowProvider, {
+    key: idx,
+    value: idx
+  }, // @ts-expect-error
+  children(row))) : Children.map(children, (row, idx) => jsx(RowProvider, {
+    key: idx,
+    value: idx
+  }, row))));
+}
+
+export default TBody;

package/dist/es2019/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
+ */
+
+const Column = ({
+  children,
+  align,
+  testId,
+  backgroundColor,
+  scope = 'col'
+}) => {
+  return jsx(TH, {
+    scope: scope,
+    align: align,
+    testId: testId,
+    backgroundColor: backgroundColor
+  }, jsx(Text, {
+    color: "color.text",
+    fontWeight: "500"
+  }, children));
+};
+
+export default Column;

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

@@ -0,0 +1,33 @@
+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: []
+}, {}]);
+/**
+ * __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)
+ */
+
+const SelectionProvider = ({
+  children
+}) => {
+  const reducer = useSelectionReducer();
+  return /*#__PURE__*/React.createElement(SelectionContext.Provider, {
+    value: reducer
+  }, children);
+};
+
+export const useSelection = () => {
+  return useContext(SelectionContext);
+};
+export default SelectionProvider;

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+const RowContext = /*#__PURE__*/createContext(undefined);
+/**
+ * @internal
+ */
+
+export const useRowId = () => useContext(RowContext);
+/**
+ * __Row provider__
+ * @internal
+ */
+
+export const RowProvider = RowContext.Provider;

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

@@ -0,0 +1,158 @@
+import { useCallback, useReducer } from 'react';
+const defaultState = {
+  checked: [],
+  allChecked: false,
+  anyChecked: false,
+  maxChecked: 0,
+  selectionStart: -1,
+  previousSelection: []
+};
+
+const arrayFromRange = (from, to) => {
+  let startIdx = from;
+  let stopIdx = to;
+  let 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
+  }, (_, i) => startIdx + i + increment);
+};
+
+function reducer({
+  checked,
+  anyChecked,
+  maxChecked,
+  selectionStart,
+  previousSelection
+}, action) {
+  switch (action.type) {
+    case 'toggle_selection':
+      {
+        const {
+          value: {
+            id,
+            shiftHeld
+          }
+        } = action;
+        let updated = checked.slice();
+        let newSelectionStart = selectionStart;
+        let newPreviousSelection = previousSelection.slice();
+
+        if (shiftHeld) {
+          if (checked.length > 0) {
+            const 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(id => !previousSelection.includes(id));
+            newIds.forEach(id => 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 {
+          const 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
+        }
+
+        const anyChecked = updated.length > 0;
+        return {
+          checked: updated,
+          allChecked: updated.length === maxChecked,
+          anyChecked: anyChecked || Boolean(updated[id]),
+          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,
+        selectionStart,
+        previousSelection
+      };
+
+    case 'set_max':
+      {
+        const {
+          value: max
+        } = action;
+        return {
+          maxChecked: max,
+          allChecked: checked.length === max,
+          anyChecked,
+          checked,
+          selectionStart,
+          previousSelection
+        };
+      }
+
+    default:
+      throw new Error();
+  }
+}
+
+const initialiseState = () => {
+  return { ...defaultState,
+    checked: []
+  };
+};
+
+function useSelectable() {
+  const [state, dispatch] = useReducer(reducer, initialiseState());
+  const toggleSelection = useCallback((id, shiftHeld) => {
+    dispatch({
+      type: 'toggle_selection',
+      value: {
+        id,
+        shiftHeld
+      }
+    });
+  }, []);
+  const setAll = useCallback(() => {
+    dispatch({
+      type: 'set_root',
+      value: true
+    });
+  }, []);
+  const removeAll = useCallback(() => {
+    dispatch({
+      type: 'set_root',
+      value: false
+    });
+  }, []);
+  const setMax = useCallback(max => {
+    dispatch({
+      type: 'set_max',
+      value: max
+    });
+  }, []);
+  return [state, {
+    setAll,
+    removeAll,
+    toggleSelection,
+    setMax
+  }];
+}
+
+export default useSelectable;

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

@@ -0,0 +1,37 @@
+import { useCallback, useState } from 'react';
+export const useSorting = sortKey => {
+  const [localSortKey, setLocalSortKey] = useState(sortKey);
+  const [localSortDirection, setLocalSortDirection] = useState();
+  const toggleSortDirection = useCallback(() => {
+    setLocalSortDirection(oldLocalSortDirection => {
+      switch (oldLocalSortDirection) {
+        case undefined:
+          return 'ascending';
+
+        case 'ascending':
+          return 'descending';
+
+        case 'descending':
+          return 'ascending';
+      }
+    });
+  }, []);
+  const setSortState = useCallback(key => {
+    setLocalSortKey(localSortKey => {
+      if (key !== localSortKey) {
+        // sorting by different column
+        setLocalSortDirection('ascending');
+        return key;
+      } else {
+        toggleSortDirection();
+      }
+
+      return localSortKey;
+    });
+  }, [toggleSortDirection]);
+  return {
+    sortKey: localSortKey,
+    sortDirection: localSortDirection,
+    setSortState
+  };
+};

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

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import invariant from 'tiny-invariant';
+const TableBodyContext = /*#__PURE__*/createContext(false);
+/**
+ * __Table body provider__
+ * Ensures correct nesting of table elements.
+ */
+
+export const TableBodyProvider = TableBodyContext.Provider;
+export const useTableBody = () => {
+  const hasTableBody = useContext(TableBodyContext);
+  invariant(hasTableBody, '<Row /> must be nested inside a <TableBody>');
+};

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

@@ -0,0 +1,34 @@
+import React, { createContext, useContext } from 'react';
+import __noop from '@atlaskit/ds-lib/noop';
+
+function generateContext() {
+  return /*#__PURE__*/createContext({
+    isSelectable: false,
+    sortKey: 'unset',
+    setSortState: __noop
+  });
+}
+
+const 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({
+  children,
+  state
+}) {
+  return (
+    /*#__PURE__*/
+    // @ts-expect-error
+    React.createElement(TableContext.Provider, {
+      value: state
+    }, children)
+  );
+}
+export const useTable = () => // @ts-expect-error
+useContext(TableContext);