@atlaskit/table 0.2.0 → 0.2.2

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.0",
+	"version": "0.2.2",
 	"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,
@@ -24,8 +24,7 @@ const Column = ({
     backgroundColor: backgroundColor
   }, jsx(Text, {
     color: "color.text",
-    fontWeight: "500"
+    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

@@ -5,7 +5,6 @@ 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 [{
     allChecked,
@@ -23,5 +22,4 @@ const SelectableCell = () => {
     onChange: onChange
   }));
 };
-
 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,19 +49,18 @@ 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
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx(TH, _extends({
       testId: testId
     }, other), jsx(Tooltip, {
@@ -82,5 +78,4 @@ const SortableColumn = ({
     }), 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,13 +18,11 @@ 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
@@ -39,10 +37,9 @@ const THead = ({
     id: "select-all"
   }, "Select all rows")), children, isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
     color: "color.text",
-    fontWeight: "500"
+    fontWeight: "medium"
   }, state.checked.length, " selected"), actions && jsx(Inline, {
-    gap: "scale.100"
+    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,14 +27,13 @@ const baseResetStyles = css({
  *
  * Basic cell element.
  */
-
 export const BaseCell = /*#__PURE__*/forwardRef(({
   testId,
   as,
   children,
   align = 'text',
-  paddingBlock = 'scale.100',
-  paddingInline = 'scale.200',
+  paddingBlock = 'space.100',
+  paddingInline = 'space.200',
   backgroundColor,
   scope,
   width,
@@ -54,5 +53,5 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   } : undefined
 }, jsx(Inline, {
   justifyContent: alignMap[align],
-  gap: "scale.0"
+  gap: "space.0"
 }, children)));

package/dist/es2019/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';
 const overlayStyles = css({
@@ -7,21 +8,21 @@ const 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 const BulkActionOverlay = ({
   children
 }) => jsx(Box, {
   as: "th",
   position: "absolute",
-  paddingInline: "scale.100",
+  paddingInline: "space.100",
   backgroundColor: "elevation.surface",
   css: overlayStyles
 }, jsx(Inline, {
-  gap: "scale.300",
+  gap: "space.300",
   alignItems: "center"
 }, children));

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

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

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

@@ -1,17 +1,16 @@
 /* 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 const SortIcon = /*#__PURE__*/memo(({
   name
 }) => {
@@ -19,7 +18,6 @@ export const SortIcon = /*#__PURE__*/memo(({
     sortKey,
     sortDirection
   } = useTable();
-
   if (sortKey === name) {
     switch (sortDirection) {
       case 'ascending':
@@ -28,7 +26,6 @@ export const SortIcon = /*#__PURE__*/memo(({
           label: "",
           primaryColor: "inherit"
         });
-
       case 'descending':
         return jsx(ArrowDownIcon, {
           size: "small",
@@ -37,6 +34,5 @@ export const SortIcon = /*#__PURE__*/memo(({
         });
     }
   }
-
   return null;
 });

package/dist/es2019/ui/table.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
 
+import { jsx } from '@emotion/react';
 /**
  * __Table__
  *