@atlaskit/table 0.2.1 → 0.2.3

package/dist/esm/selectable-cell.js

@@ -1,21 +1,19 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-
 /** @jsx jsx */
 import { memo, useCallback, useMemo } from 'react';
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 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),
-      _useSelection2$ = _useSelection2[0],
-      allChecked = _useSelection2$.allChecked,
-      checked = _useSelection2$.checked,
-      toggleSelection = _useSelection2[1].toggleSelection;
-
+    _useSelection2 = _slicedToArray(_useSelection, 2),
+    _useSelection2$ = _useSelection2[0],
+    allChecked = _useSelection2$.allChecked,
+    checked = _useSelection2$.checked,
+    toggleSelection = _useSelection2[1].toggleSelection;
   var idx = useRowId();
   var isChecked = useMemo(function () {
     return allChecked || checked.includes(idx);
@@ -27,8 +25,8 @@ var SelectableCell = function SelectableCell() {
     as: "td"
   }, jsx(Checkbox, {
     isChecked: isChecked,
-    onChange: onChange
+    onChange: onChange,
+    label: jsx(VisuallyHidden, null, "Select row ", idx + 1)
   }));
 };
-
 export default /*#__PURE__*/memo(SelectableCell);

package/dist/esm/sortable-column.js

@@ -1,9 +1,7 @@
 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 { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -11,7 +9,6 @@ import Button from '@atlaskit/button';
 import Tooltip from '@atlaskit/tooltip';
 import { useTable } from './hooks/use-table';
 import { SortIcon, TH } from './ui';
-
 /**
  * TODO these need to be i18n supported
  */
@@ -36,56 +33,56 @@ var overrideStyles = css({
   // 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);
-
+    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;
-
+    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 updateSortState = useCallback( // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
+  var updateSortState = useCallback(
+  // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
   function () {
     return setSortState(name);
   }, [setSortState, name]);
-  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: jsx(SortIcon, {
-          name: name
-        })
-      }, tooltipProps, {
-        onClick: updateSortState,
-        css: overrideStyles
-      }), children);
-    }))
-  );
+  return jsx(TH, _extends({
+    testId: testId,
+    sortDirection: sortKey === name ? sortDirection : 'none'
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, other), jsx(Tooltip, {
+    content: getSortMessage(),
+    position: "top"
+  }, function (tooltipProps) {
+    return jsx(Button, _extends({
+      testId: "".concat(testId, "--button"),
+      spacing: "compact",
+      appearance: "subtle",
+      iconAfter: jsx(SortIcon, {
+        name: name
+      })
+    }, tooltipProps, {
+      onClick: updateSortState,
+      css: overrideStyles
+      // TODO: i18n support for this attr
+      ,
+      "aria-roledescription": "Column sort button"
+    }), children);
+  }));
 };
-
 export default SortableColumn;

package/dist/esm/table.js

@@ -5,7 +5,6 @@ import SelectionProvider from './hooks/selection-provider';
 import { useSorting } from './hooks/use-sorting';
 import { TableProvider } from './hooks/use-table';
 import * as Primitives from './ui';
-
 /**
  * __Table__
  *
@@ -15,17 +14,15 @@ import * as Primitives from './ui';
  */
 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;
-
+    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,
-      sortFn = _useSorting.sortFn;
-
+    localSortKey = _useSorting.sortKey,
+    sortDirection = _useSorting.sortDirection,
+    setSortState = _useSorting.setSortState,
+    sortFn = _useSorting.sortFn;
   var tableProviderState = useMemo(function () {
     return {
       isSelectable: isSelectable,
@@ -41,5 +38,4 @@ function Table(_ref) {
     testId: testId
   }, isSelectable ? jsx(SelectionProvider, null, children) : children));
 }
-
 export default Table;

package/dist/esm/thead.js

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

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

@@ -1,5 +1,4 @@
 /* eslint-disable @atlassian/tangerine/import/entry-points */
-
 /** @jsx jsx */
 import { forwardRef } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -20,6 +19,7 @@ var baseResetStyles = css({
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
+
 /**
  * __BaseCell__
  *
@@ -27,21 +27,21 @@ var baseResetStyles = css({
  *
  * Basic cell element.
  */
-
 export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var testId = _ref.testId,
-      as = _ref.as,
-      children = _ref.children,
-      _ref$align = _ref.align,
-      align = _ref$align === void 0 ? 'text' : _ref$align,
-      _ref$paddingBlock = _ref.paddingBlock,
-      paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
-      _ref$paddingInline = _ref.paddingInline,
-      paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
-      backgroundColor = _ref.backgroundColor,
-      scope = _ref.scope,
-      width = _ref.width,
-      className = _ref.className;
+    as = _ref.as,
+    children = _ref.children,
+    _ref$align = _ref.align,
+    align = _ref$align === void 0 ? 'text' : _ref$align,
+    _ref$paddingBlock = _ref.paddingBlock,
+    paddingBlock = _ref$paddingBlock === void 0 ? 'space.100' : _ref$paddingBlock,
+    _ref$paddingInline = _ref.paddingInline,
+    paddingInline = _ref$paddingInline === void 0 ? 'space.200' : _ref$paddingInline,
+    backgroundColor = _ref.backgroundColor,
+    scope = _ref.scope,
+    width = _ref.width,
+    className = _ref.className,
+    sortDirection = _ref.sortDirection;
   return jsx(Box, {
     css: baseResetStyles,
     ref: ref,
@@ -54,7 +54,8 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className: className,
     UNSAFE_style: width ? {
       width: width
-    } : undefined
+    } : undefined,
+    "aria-sort": sortDirection
   }, jsx(Inline, {
     justifyContent: alignMap[align],
     gap: "space.0"

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { UNSAFE_Box as Box, UNSAFE_Inline as Inline } from '@atlaskit/ds-explorations';
 var overlayStyles = css({
@@ -7,12 +8,12 @@ var overlayStyles = css({
   bottom: 0,
   left: 32
 });
+
 /**
  * __Bulk action overlay__
  *
  * A bulk action overlay is used to conditionally render when a user makes a row selection
  */
-
 export var BulkActionOverlay = function BulkActionOverlay(_ref) {
   var children = _ref.children;
   return jsx(Box, {

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import { BaseCell } from './base-cell';
 var spacingStyles = css({
@@ -11,16 +12,16 @@ var spacingStyles = css({
     paddingLeft: '8px !important'
   }
 });
+
 /**
  * __Selectable cell__
  *
  * A selectable cell primitive designed to be used for light weight composition.
  */
-
 export var SelectableCell = function SelectableCell(_ref) {
   var children = _ref.children,
-      _ref$as = _ref.as,
-      as = _ref$as === void 0 ? 'td' : _ref$as;
+    _ref$as = _ref.as,
+    as = _ref$as === void 0 ? 'td' : _ref$as;
   return jsx(BaseCell, {
     as: as,
     css: spacingStyles

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

@@ -1,24 +1,21 @@
 /* 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 var SortIcon = /*#__PURE__*/memo(function (_ref) {
   var name = _ref.name;
-
   var _useTable = useTable(),
-      sortKey = _useTable.sortKey,
-      sortDirection = _useTable.sortDirection;
-
+    sortKey = _useTable.sortKey,
+    sortDirection = _useTable.sortDirection;
   if (sortKey === name) {
     switch (sortDirection) {
       case 'ascending':
@@ -27,7 +24,6 @@ export var SortIcon = /*#__PURE__*/memo(function (_ref) {
           label: "",
           primaryColor: "inherit"
         });
-
       case 'descending':
         return jsx(ArrowDownIcon, {
           size: "small",
@@ -36,6 +32,5 @@ export var SortIcon = /*#__PURE__*/memo(function (_ref) {
         });
     }
   }
-
   return null;
 });

package/dist/esm/ui/table.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
 
+import { jsx } from '@emotion/react';
 /**
  * __Table__
  *
@@ -13,8 +13,8 @@ import { jsx } from '@emotion/react';
  */
 export var Table = function Table(_ref) {
   var children = _ref.children,
-      testId = _ref.testId,
-      summary = _ref.summary;
+    testId = _ref.testId,
+    summary = _ref.summary;
   return jsx("table", {
     "data-testid": testId
   }, summary && jsx("caption", null, summary), children);

package/dist/esm/ui/tbody.js

@@ -1,6 +1,6 @@
 /* eslint-disable @repo/internal/react/no-clone-element */
-
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 var bodyStyles = css({
   position: 'relative',
@@ -13,11 +13,11 @@ var bodyStyles = css({
     pointerEvents: 'none'
   }
 });
+
 /**
  * __TBody__
  * @primitive
  */
-
 export var TBody = function TBody(_ref) {
   var children = _ref.children;
   return jsx("tbody", {

package/dist/esm/ui/td.js

@@ -1,10 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["testId"];
-
 /** @jsx jsx */
+
 import { jsx } from '@emotion/react';
 import { BaseCell } from './base-cell';
+
 /**
  * __Cell__
  *
@@ -12,12 +13,11 @@ import { BaseCell } from './base-cell';
  *
  * @primitive
  */
-
 export var TD = function TD(_ref) {
   var testId = _ref.testId,
-      props = _objectWithoutProperties(_ref, _excluded);
-
-  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    props = _objectWithoutProperties(_ref, _excluded);
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(BaseCell, _extends({
       as: "td",
       testId: testId

package/dist/esm/ui/th.js

@@ -1,6 +1,5 @@
 import React from 'react';
 import { BaseCell } from './base-cell';
-
 /**
  * __Head cell__
  *
@@ -10,11 +9,12 @@ import { BaseCell } from './base-cell';
  */
 export var TH = function TH(_ref) {
   var children = _ref.children,
-      testId = _ref.testId,
-      align = _ref.align,
-      scope = _ref.scope,
-      backgroundColor = _ref.backgroundColor,
-      width = _ref.width;
+    testId = _ref.testId,
+    align = _ref.align,
+    scope = _ref.scope,
+    backgroundColor = _ref.backgroundColor,
+    width = _ref.width,
+    sortDirection = _ref.sortDirection;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
@@ -24,7 +24,8 @@ export var TH = function TH(_ref) {
       align: align,
       scope: scope,
       width: width,
-      backgroundColor: backgroundColor
+      backgroundColor: backgroundColor,
+      sortDirection: sortDirection
     }, children)
   );
 };

package/dist/esm/ui/thead.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 var baseStyles = css({
   position: 'sticky',
@@ -9,6 +10,7 @@ var baseStyles = css({
   borderTop: '2px solid transparent',
   inset: 0
 });
+
 /**
  * __THead__
  *
@@ -16,7 +18,6 @@ var baseStyles = css({
  *
  * @primitive
  */
-
 export var THead = function THead(_ref) {
   var children = _ref.children;
   return jsx("thead", {

package/dist/esm/ui/tr.js

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
 var baseStyles = css({
@@ -12,9 +13,9 @@ var selectedStyles = css({
   backgroundColor: "var(--ds-background-selected, #DEEBFF88)",
   '&:hover': {
     backgroundColor: "var(--ds-background-selected-hovered, #DEEBFF)" // B50
-
   }
 });
+
 var bodyRowStyles = css({
   borderBottom: "1px solid ".concat("var(--ds-border, #eee)"),
   '&:hover': {
@@ -24,7 +25,6 @@ var bodyRowStyles = css({
     boxShadow: 'none'
   }
 });
-
 /**
  * __Row__
  *
@@ -34,10 +34,10 @@ var bodyRowStyles = css({
  */
 export 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;
+    testId = _ref.testId,
+    isSelected = _ref.isSelected,
+    _ref$isBodyRow = _ref.isBodyRow,
+    isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow;
   return jsx(FocusRing, {
     isInset: true
   }, jsx("tr", {

package/dist/esm/version.json

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

package/dist/types/ui/base-cell.d.ts

@@ -30,6 +30,10 @@ export declare type BaseCellProps = {
      */
     children?: ReactNode;
 } & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'className'>;
+/**
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
+ */
+export declare type SortDirection = 'ascending' | 'descending' | 'none' | 'other';
 declare const alignMap: {
     readonly text: "flexStart";
     readonly number: "flexEnd";
@@ -70,5 +74,7 @@ export declare const BaseCell: import("react").ForwardRefExoticComponent<{
      * Content of the cell.
      */
     children?: ReactNode;
-} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & import("react").RefAttributes<HTMLTableCellElement>>;
+} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & {
+    sortDirection?: SortDirection | undefined;
+} & import("react").RefAttributes<HTMLTableCellElement>>;
 export {};

package/dist/types/ui/th.d.ts

@@ -1,6 +1,9 @@
 import { FC } from 'react';
-import { BaseCellProps } from './base-cell';
+import { BaseCellProps, SortDirection } from './base-cell';
 export declare type THProps = Omit<BaseCellProps, 'as'>;
+declare type InternalTHProps = THProps & {
+    sortDirection?: SortDirection;
+};
 /**
  * __Head cell__
  *
@@ -8,4 +11,5 @@ export declare type THProps = Omit<BaseCellProps, 'as'>;
  *
  * @primitive
  */
-export declare const TH: FC<THProps>;
+export declare const TH: FC<InternalTHProps>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.2.1",
+  "version": "0.2.3",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -38,8 +38,8 @@
     "@atlaskit/ds-lib": "^2.1.2",
     "@atlaskit/focus-ring": "^1.2.1",
     "@atlaskit/icon": "^21.11.2",
-    "@atlaskit/tokens": "^0.13.0",
-    "@atlaskit/tooltip": "^17.5.16",
+    "@atlaskit/tokens": "^1.2.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -62,6 +62,7 @@
     "@atlassian/atlassian-frontend-prettier-config-1.0.0": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "jest-axe": "^4.0.0",
     "react-dom": "^16.8.0",
     "storybook-addon-designs": "^6.3.1",
     "typescript": "4.5.5",
@@ -81,15 +82,17 @@
       "analytics": [
         "analytics-next"
       ],
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "theming": [
-        "react-context",
-        "tokens"
+        "react-context"
       ],
       "ui-components": [
         "lite-mode"
       ],
       "design-system": "v1",
-      "design-tokens": "spacing",
       "deprecation": [
         "no-deprecated-imports"
       ],