@atlaskit/table 0.2.1 → 0.2.3

package/dist/cjs/ui/th.js

@@ -1,16 +1,12 @@
 "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__
  *
@@ -20,11 +16,12 @@ var _baseCell = require("./base-cell");
  */
 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
@@ -34,9 +31,9 @@ var TH = function TH(_ref) {
       align: align,
       scope: scope,
       width: width,
-      backgroundColor: backgroundColor
+      backgroundColor: backgroundColor,
+      sortDirection: sortDirection
     }, children)
   );
 };
-
 exports.TH = TH;

package/dist/cjs/ui/thead.js

@@ -4,10 +4,9 @@ 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,
@@ -17,6 +16,7 @@ var baseStyles = (0, _react.css)({
   borderTop: '2px solid transparent',
   inset: 0
 });
+
 /**
  * __THead__
  *
@@ -24,12 +24,10 @@ var baseStyles = (0, _react.css)({
  *
  * @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

@@ -1,17 +1,14 @@
 "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',
@@ -23,9 +20,9 @@ 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)({
   borderBottom: "1px solid ".concat("var(--ds-border, #eee)"),
   '&:hover': {
@@ -35,7 +32,6 @@ var bodyRowStyles = (0, _react.css)({
     boxShadow: 'none'
   }
 });
-
 /**
  * __Row__
  *
@@ -45,10 +41,10 @@ var bodyRowStyles = (0, _react.css)({
  */
 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 (0, _react.jsx)(_focusRing.default, {
     isInset: true
   }, (0, _react.jsx)("tr", {
@@ -58,5 +54,4 @@ var TR = function TR(_ref) {
     css: [baseStyles, isBodyRow && bodyRowStyles, isSelected && selectedStyles]
   }, children));
 };
-
 exports.TR = TR;

package/dist/cjs/version.json

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

package/dist/es2019/body.js

@@ -1,5 +1,4 @@
 /* eslint-disable @repo/internal/react/no-clone-element */
-
 /** @jsx jsx */
 import { Children, useEffect, useMemo } from 'react';
 import { jsx } from '@emotion/react';
@@ -8,7 +7,6 @@ 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__
  */
@@ -22,19 +20,24 @@ function TBody({
   const [_state, {
     removeAll,
     setMax
-  }] = useSelection(); // TODO: this seems like something the user should control or opt into.
+  }] = useSelection();
 
+  // TODO: this seems like something the user should control or opt into.
   useEffect(() => {
-    removeAll === null || removeAll === void 0 ? void 0 : removeAll(); // eslint-disable-next-line react-hooks/exhaustive-deps -- When the rows change, we [currently] want to call removeAll.
+    removeAll === null || removeAll === void 0 ? void 0 : removeAll();
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- When the rows change, we [currently] want to call removeAll.
   }, [rows]);
   const childrenCount = Children.count(children);
-  const rowsLength = rows === null || rows === void 0 ? void 0 : rows.length; // Set data length (via setMax) whenever data changes
+  const rowsLength = rows === null || rows === void 0 ? void 0 : rows.length;
 
+  // Set data length (via setMax) whenever data changes
   useEffect(() => {
     const numRows = rowsLength !== null && rowsLength !== void 0 ? rowsLength : childrenCount;
     setMax === null || setMax === void 0 ? void 0 : setMax(numRows);
   }, [rowsLength, childrenCount, setMax]);
-  const sortedRows = useMemo(() => rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => ({ ...row,
+  const sortedRows = useMemo(() => rows === null || rows === void 0 ? void 0 : rows.map((row, idx) => ({
+    ...row,
     idx
   })).sort(sortFn), [rows, sortFn]);
   return jsx(TableBodyProvider, {
@@ -45,11 +48,11 @@ function TBody({
   }) => jsx(RowProvider, {
     key: idx,
     value: idx
-  }, // @ts-expect-error
+  },
+  // @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

@@ -1,15 +1,15 @@
 /* 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,
@@ -27,5 +27,4 @@ const Column = ({
     fontWeight: "medium"
   }, children));
 };
-
 export default Column;

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

@@ -1,6 +1,7 @@
 import React, { createContext, useContext } from 'react';
 import useSelectionReducer, { defaultSelectableState } from './use-selectable';
 const SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]);
+
 /**
  * __Selection provider__
  *
@@ -10,7 +11,6 @@ const SelectionContext = /*#__PURE__*/createContext([defaultSelectableState, {}]
  * - [Code](https://atlassian.design/components/{packageName}/code)
  * - [Usage](https://atlassian.design/components/{packageName}/usage)
  */
-
 const SelectionProvider = ({
   children
 }) => {
@@ -19,7 +19,6 @@ const SelectionProvider = ({
     value: reducer
   }, children);
 };
-
 export const useSelection = () => {
   return useContext(SelectionContext);
 };

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

@@ -1,13 +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

@@ -7,24 +7,21 @@ export const defaultSelectableState = {
   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
-
+  }
 
+  // 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,
@@ -44,17 +41,17 @@ function reducer({
         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 {
@@ -67,7 +64,6 @@ function reducer({
           }
 
           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
         }
 
@@ -81,7 +77,6 @@ function reducer({
           previousSelection: newPreviousSelection
         };
       }
-
     case 'set_root':
       return {
         checked: action.value ? Array.from(Array(maxChecked).keys()) : [],
@@ -91,7 +86,6 @@ function reducer({
         selectionStart,
         previousSelection
       };
-
     case 'set_max':
       {
         const {
@@ -106,12 +100,10 @@ function reducer({
           previousSelection
         };
       }
-
     default:
       throw new Error();
   }
 }
-
 function useSelectable() {
   const [state, dispatch] = useReducer(reducer, defaultSelectableState);
   const toggleSelection = useCallback((id, shiftHeld) => {
@@ -148,5 +140,4 @@ function useSelectable() {
     setMax
   }];
 }
-
 export default useSelectable;

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

@@ -7,10 +7,8 @@ export const useSorting = sortKey => {
       switch (oldLocalSortDirection) {
         case undefined:
           return 'ascending';
-
         case 'ascending':
           return 'descending';
-
         case 'descending':
           return 'ascending';
       }
@@ -25,7 +23,6 @@ export const useSorting = sortKey => {
       } else {
         toggleSortDirection();
       }
-
       return localSortKey;
     });
   }, [toggleSortDirection]);
@@ -33,7 +30,6 @@ export const useSorting = sortKey => {
     if (localSortKey === 'unset') {
       return 0;
     }
-
     const ascendingComparator = rowA[localSortKey] < rowB[localSortKey] ? -1 : 1;
     return localSortDirection === 'ascending' ? ascendingComparator : -ascendingComparator;
   }, [localSortDirection, localSortKey]);

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

@@ -1,11 +1,11 @@
 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);

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

@@ -1,6 +1,5 @@
 import React, { createContext, useContext } from 'react';
 import __noop from '@atlaskit/ds-lib/noop';
-
 function generateContext() {
   return /*#__PURE__*/createContext({
     isSelectable: false,
@@ -9,8 +8,8 @@ function generateContext() {
     sortFn: () => 0
   });
 }
-
 const TableContext = generateContext();
+
 /**
  * __Table state provider__
  *
@@ -18,7 +17,6 @@ const TableContext = generateContext();
  *
  * - [Examples](https://atlassian.design/components/table/examples)
  */
-
 export function TableProvider({
   children,
   state
@@ -31,5 +29,6 @@ export function TableProvider({
     }, children)
   );
 }
-export const useTable = () => // @ts-expect-error
+export const useTable = () =>
+// @ts-expect-error
 useContext(TableContext);

package/dist/es2019/row.js

@@ -7,7 +7,6 @@ import { useTable } from './hooks/use-table';
 import { useTableBody } from './hooks/use-table-body';
 import SelectableCell from './selectable-cell';
 import * as Primitives from './ui';
-
 /**
  * __Row__
  *
@@ -20,8 +19,8 @@ const Row = /*#__PURE__*/memo(({
   testId
 }) => {
   // To ensure valid nesting
-  useTableBody(); // to access table state
-
+  useTableBody();
+  // to access table state
   const {
     isSelectable
   } = useTable();
@@ -34,7 +33,6 @@ const Row = /*#__PURE__*/memo(({
     if (!isSelectable) {
       return undefined;
     }
-
     return allChecked || checked.includes(rowId);
   }, [allChecked, checked, isSelectable, rowId]);
   return jsx(Primitives.TR, {

package/dist/es2019/selectable-cell.js

@@ -2,10 +2,10 @@
 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';
-
 const SelectableCell = () => {
   const [{
     allChecked,
@@ -20,8 +20,8 @@ const 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/es2019/sortable-column.js

@@ -1,7 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-
 /* eslint-disable no-unused-vars */
-
 /** @jsx jsx */
 import { useCallback } from 'react';
 import { css, jsx } from '@emotion/react';
@@ -9,7 +7,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
  */
@@ -34,12 +31,12 @@ const 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.
  */
-
 const SortableColumn = ({
   name,
   testId,
@@ -52,35 +49,36 @@ const SortableColumn = ({
     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 updateSortState = useCallback( // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
+  const updateSortState = useCallback(
+  // @ts-expect-error: TODO: Our `name` typing is off; refer to `SortKey`
   () => 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"
-    }, tooltipProps => 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"
+  }, tooltipProps => jsx(Button, _extends({
+    testId: `${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/es2019/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__
  *
@@ -38,5 +37,4 @@ function Table({
     testId: testId
   }, isSelectable ? jsx(SelectionProvider, null, children) : children));
 }
-
 export default Table;

package/dist/es2019/thead.js

@@ -1,4 +1,5 @@
 /** @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';
@@ -6,7 +7,6 @@ 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
@@ -18,31 +18,28 @@ const THead = ({
     setAll,
     removeAll
   }] = useSelection();
-
   if (!isSelectable) {
     return jsx(Primitives.THead, null, jsx(Primitives.TR, {
       isBodyRow: false
     }, children));
   }
-
   const 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/es2019/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 @@ const baseResetStyles = css({
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
+
 /**
  * __BaseCell__
  *
@@ -27,7 +27,6 @@ const baseResetStyles = css({
  *
  * Basic cell element.
  */
-
 export const BaseCell = /*#__PURE__*/forwardRef(({
   testId,
   as,
@@ -38,7 +37,8 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   backgroundColor,
   scope,
   width,
-  className
+  className,
+  sortDirection
 }, ref) => jsx(Box, {
   css: baseResetStyles,
   ref: ref,
@@ -51,7 +51,8 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   className: className,
   UNSAFE_style: width ? {
     width
-  } : undefined
+  } : undefined,
+  "aria-sort": sortDirection
 }, jsx(Inline, {
   justifyContent: alignMap[align],
   gap: "space.0"