@atlaskit/table 0.1.0

package/dist/es2019/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/es2019/row.js

@@ -0,0 +1,41 @@
+/** @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)
+ */
+const Row = /*#__PURE__*/memo(({
+  children,
+  testId
+}) => {
+  // To ensure valid nesting
+  useTableBody(); // to access table state
+
+  const table = useTable();
+  const [selectionState] = useSelection();
+  const rowId = useRowId();
+
+  if (!table.isSelectable) {
+    return jsx(Primitives.TR, {
+      testId: testId
+    }, children);
+  }
+
+  const isChecked = selectionState.allChecked || selectionState.checked.includes(rowId);
+  return jsx(Primitives.TR, {
+    isSelected: !!isChecked,
+    testId: testId
+  }, jsx(SelectableCell, null), children);
+});
+export default Row;

package/dist/es2019/selectable-cell.js

@@ -0,0 +1,25 @@
+/** @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';
+
+const SelectableCell = () => {
+  const [state, {
+    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]);
+  return jsx(Primitives.SelectableCell, {
+    as: "td"
+  }, jsx(Checkbox, {
+    isChecked: isChecked,
+    onChange: onChange
+  }));
+};
+
+export default /*#__PURE__*/memo(SelectableCell);

package/dist/es2019/sortable-column.js

@@ -0,0 +1,109 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/* 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
+ */
+const 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'
+  }
+};
+const 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.
+ */
+
+const SortableColumn = ({
+  name,
+  testId,
+  onClick,
+  children,
+  ...other
+}) => {
+  const {
+    sortKey,
+    sortDirection,
+    setSortState
+  } = useTable();
+
+  const getSortMessage = () => {
+    if (sortKey === name) {
+      // TODO: Change message depending on data type (string/number)
+      return sortingMessages[sortDirection || 'unsorted'].string;
+    }
+
+    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;
+  };
+
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(TH, _extends({
+      testId: testId
+    }, other), jsx(Tooltip, {
+      content: getSortMessage(),
+      position: "top"
+    }, tooltipProps => jsx(Button, _extends({
+      spacing: "compact",
+      appearance: "subtle",
+      iconAfter: getSortIcon()
+    }, tooltipProps, {
+      // @ts-expect-error
+      onClick: () => setSortState(name),
+      css: overrideStyles
+    }), children)))
+  );
+};
+
+export default SortableColumn;

package/dist/es2019/table.js

@@ -0,0 +1,38 @@
+/** @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({
+  children,
+  isSelectable,
+  sortKey = 'unset',
+  testId
+}) {
+  const {
+    sortKey: localSortKey,
+    sortDirection,
+    setSortState
+  } = useSorting(sortKey);
+  return jsx(TableProvider, {
+    state: {
+      isSelectable,
+      sortKey: localSortKey,
+      sortDirection: sortDirection,
+      setSortState
+    }
+  }, jsx(Primitives.Table, {
+    testId: testId
+  }, isSelectable ? jsx(SelectionProvider, null, children) : children));
+}
+
+export default Table;

package/dist/es2019/thead.js

@@ -0,0 +1,46 @@
+/** @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';
+
+const THead = ({
+  actions,
+  children
+}) => {
+  const table = useTable();
+  const [state, {
+    setAll,
+    removeAll
+  }] = useSelection();
+  const 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;

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

@@ -0,0 +1,54 @@
+/* eslint-disable @atlassian/tangerine/import/entry-points */
+
+/** @jsx jsx */
+import { forwardRef } from 'react';
+import { css, jsx } from '@emotion/react';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
+const alignMap = {
+  text: 'flexStart',
+  number: 'flexEnd',
+  icon: 'center'
+};
+const baseResetStyles = css({
+  display: 'table-cell',
+  verticalAlign: 'middle',
+  '&:first-of-type': {
+    paddingLeft: "var(--ds-space-100, 8px)"
+  },
+  '&:last-of-type': {
+    paddingRight: "var(--ds-space-100, 8px)"
+  }
+});
+/**
+ * __BaseCell__
+ *
+ * @internal
+ *
+ * Basic cell element.
+ */
+
+export const BaseCell = /*#__PURE__*/forwardRef(({
+  testId,
+  as,
+  children,
+  align = 'text',
+  paddingBlock = 'scale.100',
+  paddingInline = 'scale.200',
+  backgroundColor,
+  scope,
+  className
+}, ref) => jsx(Box, {
+  css: baseResetStyles,
+  ref: ref,
+  scope: scope,
+  backgroundColor: backgroundColor,
+  paddingBlock: paddingBlock,
+  paddingInline: paddingInline,
+  as: as,
+  testId: testId,
+  className: className
+}, jsx(Inline, {
+  justifyContent: alignMap[align],
+  gap: "scale.0"
+}, children)));

package/dist/es2019/ui/bulk-action-overlay.js

@@ -0,0 +1,27 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
+const overlayStyles = css({
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 32
+});
+/**
+ * __Bulk action overlay__
+ *
+ * A bulk action overlay is used to conditionally render when a user makes a row selection
+ */
+
+export const BulkActionOverlay = ({
+  children
+}) => jsx(Box, {
+  as: "th",
+  position: "absolute",
+  paddingInline: "scale.100",
+  backgroundColor: "elevation.surface",
+  css: overlayStyles
+}, jsx(Inline, {
+  gap: "scale.300",
+  alignItems: "center"
+}, children));

package/dist/es2019/ui/index.js

@@ -0,0 +1,11 @@
+/**
+ * File exposes the HTML table primitives for use
+ */
+export { Table } from './table';
+export { TBody } from './tbody';
+export { TR } from './tr';
+export { TD } from './td';
+export { TH } from './th';
+export { SelectableCell } from './selectable-cell';
+export { THead } from './thead';
+export { BulkActionOverlay } from './bulk-action-overlay';

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

@@ -0,0 +1,28 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import { BaseCell } from './base-cell';
+const spacingStyles = 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.
+ */
+
+export const SelectableCell = ({
+  children,
+  as = 'td'
+}) => {
+  return jsx(BaseCell, {
+    as: as,
+    css: spacingStyles
+  }, children);
+};

package/dist/es2019/ui/table.js

@@ -0,0 +1,22 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+
+/**
+ * __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
+ */
+export const Table = ({
+  children,
+  testId,
+  summary
+}) => {
+  return jsx("table", {
+    "data-testid": testId
+  }, summary && jsx("caption", null, summary), children);
+};

package/dist/es2019/ui/tbody.js

@@ -0,0 +1,26 @@
+/* eslint-disable @repo/internal/react/no-clone-element */
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+const bodyStyles = css({
+  position: 'relative',
+  border: 'none',
+  '&:after': {
+    position: 'absolute',
+    boxShadow: `inset 0 -2px 0 0 ${"var(--ds-border, #eee)"}`,
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+/**
+ * __TBody__
+ * @primitive
+ */
+
+export const TBody = ({
+  children
+}) => jsx("tbody", {
+  css: bodyStyles
+}, children);
+export default TBody;

package/dist/es2019/ui/td.js

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import { BaseCell } from './base-cell';
+/**
+ * __Cell__
+ *
+ * A data cell.
+ *
+ * @primitive
+ */
+
+export const TD = ({
+  testId,
+  ...props
+}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(BaseCell, _extends({
+  as: "td",
+  testId: testId
+}, props));

package/dist/es2019/ui/th.js

@@ -0,0 +1,26 @@
+import React from 'react';
+import { BaseCell } from './base-cell';
+
+/**
+ * __Head cell__
+ *
+ * A head cell.
+ *
+ * @primitive
+ */
+export const TH = ({
+  children,
+  testId,
+  align,
+  scope,
+  backgroundColor
+}) =>
+/*#__PURE__*/
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+React.createElement(BaseCell, {
+  as: "th",
+  testId: testId,
+  align: align,
+  scope: scope,
+  backgroundColor: backgroundColor
+}, children);

package/dist/es2019/ui/thead.js

@@ -0,0 +1,31 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+const baseStyles = css({
+  position: 'sticky',
+  zIndex: 1,
+  backgroundColor: "var(--ds-surface, white)",
+  border: 'none',
+  inset: 0,
+  '&:after': {
+    position: 'absolute',
+    boxShadow: `inset 0 -2px 0 0 ${"var(--ds-border, #eee)"}`,
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+/**
+ * __THead__
+ *
+ * A primitive table head container. Applies the HTML native element with minimal styling.
+ *
+ * @primitive
+ */
+
+export const THead = ({
+  children
+}) => {
+  return jsx("thead", {
+    css: baseStyles
+  }, children);
+};

package/dist/es2019/ui/tr.js

@@ -0,0 +1,55 @@
+/** @jsx jsx */
+import { css, jsx } from '@emotion/react';
+import FocusRing from '@atlaskit/focus-ring';
+const baseStyles = css({
+  height: 48,
+  position: 'relative',
+  border: 'none',
+  borderImageWidth: 0,
+  borderSpacing: 0
+});
+const selectedStyles = css({
+  backgroundColor: "var(--ds-background-selected, #DEEBFF88)",
+  '&:hover': {
+    backgroundColor: "var(--ds-background-selected-hovered, #DEEBFF)" // B50
+
+  }
+});
+const bodyRowStyles = css({
+  '&:hover': {
+    backgroundColor: "var(--ds-background-neutral-subtle-hovered, #f8f8f8)"
+  },
+  '&:focus-visible::after': {
+    boxShadow: 'none'
+  },
+  '&:after': {
+    position: 'absolute',
+    boxShadow: `inset 0 -1px 0 0 ${"var(--ds-border, #eee)"}`,
+    content: "''",
+    inset: 0,
+    pointerEvents: 'none'
+  }
+});
+
+/**
+ * __Row__
+ *
+ * A row primitive.
+ *
+ * - [Examples](https://atlassian.design/components/table/examples)
+ */
+export const TR = ({
+  children,
+  testId,
+  isSelected,
+  isBodyRow = true
+}) => {
+  return jsx(FocusRing, {
+    isInset: true
+  }, jsx("tr", {
+    tabIndex: -1,
+    "aria-selected": isSelected,
+    "data-testid": testId,
+    css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles]
+  }, children));
+};

package/dist/es2019/version.json

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

package/dist/esm/body.js

@@ -0,0 +1,84 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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 } 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(_ref) {
+  var rows = _ref.rows,
+      children = _ref.children;
+
+  var _useTable = useTable(),
+      sortKey = _useTable.sortKey,
+      sortDirection = _useTable.sortDirection;
+
+  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
+
+
+  useEffect(function () {
+    if (removeAll) {
+      removeAll();
+    } // eslint-disable-next-line react-hooks/exhaustive-deps
+
+  }, [rows]); // 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;
+  };
+
+  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) {
+    var idx = _ref2.idx,
+        row = _objectWithoutProperties(_ref2, _excluded);
+
+    return jsx(RowProvider, {
+      key: idx,
+      value: idx
+    }, // @ts-expect-error
+    children(row));
+  }) : Children.map(children, function (row, idx) {
+    return jsx(RowProvider, {
+      key: idx,
+      value: idx
+    }, row);
+  })));
+}
+
+export default TBody;