@atlaskit/table 0.2.0 → 0.2.2

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,27 +8,22 @@ 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
@@ -43,10 +38,9 @@ var THead = function THead(_ref) {
     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/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,20 @@ 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 ? 'scale.100' : _ref$paddingBlock,
-      _ref$paddingInline = _ref.paddingInline,
-      paddingInline = _ref$paddingInline === void 0 ? 'scale.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;
   return jsx(Box, {
     css: baseResetStyles,
     ref: ref,
@@ -57,6 +56,6 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     } : undefined
   }, jsx(Inline, {
     justifyContent: alignMap[align],
-    gap: "scale.0"
+    gap: "space.0"
   }, children));
 });

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,22 +8,22 @@ 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, {
     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/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,11 @@ 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;
   return (
     /*#__PURE__*/
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

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.0",
+	"version": "0.2.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -34,11 +34,11 @@
   "dependencies": {
     "@atlaskit/button": "^16.5.0",
     "@atlaskit/checkbox": "^12.4.1",
-    "@atlaskit/ds-explorations": "^1.7.0",
+    "@atlaskit/ds-explorations": "^2.0.0",
     "@atlaskit/ds-lib": "^2.1.2",
     "@atlaskit/focus-ring": "^1.2.1",
     "@atlaskit/icon": "^21.11.2",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.0.0",
     "@atlaskit/tooltip": "^17.5.16",
     "@atlaskit/visually-hidden": "^1.0.0",
     "@babel/runtime": "^7.0.0",