@atlaskit/table 0.4.11 → 0.4.13

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/table
 
+## 0.4.13
+
+### Patch Changes
+
+- [`a981691b65e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a981691b65e) - Updated internal dependencies.
+
+## 0.4.12
+
+### Patch Changes
+
+- [`4ae083a7e66`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4ae083a7e66) - Use `@af/accessibility-testing` for default jest-axe config and jest-axe import in accessibility testing.
+
 ## 0.4.11
 
 ### Patch Changes

package/dist/cjs/head-cell.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _react = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _th = require("./ui/th");
 /* eslint-disable no-unused-vars */
 /** @jsx jsx */
@@ -27,9 +26,14 @@ var HeadCell = function HeadCell(_ref) {
     align: align,
     testId: testId,
     backgroundColor: backgroundColor
-  }, children && (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
-    color: "color.text",
-    fontWeight: "medium"
+  }, children &&
+  // migrate to <Text />
+  (0, _react.jsx)("span", {
+    style: {
+      color: "var(--ds-text, #172B4D)",
+      /* @ts-ignore migrate to Text */
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }
   }, children));
 };
 var _default = HeadCell;

package/dist/cjs/thead.js

@@ -9,7 +9,6 @@ exports.default = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("@emotion/react");
 var _checkbox = _interopRequireDefault(require("@atlaskit/checkbox"));
-var _dsExplorations = require("@atlaskit/ds-explorations");
 var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _selectionProvider = require("./hooks/selection-provider");
@@ -42,9 +41,12 @@ var THead = function THead(_ref) {
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isSelectable && isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)(_dsExplorations.UNSAFE_Text, {
-    color: "color.text",
-    fontWeight: "medium"
+  })), children, isSelectable && isChecked && (0, _react.jsx)(Primitives.BulkActionOverlay, null, (0, _react.jsx)("span", {
+    style: {
+      color: "var(--ds-text, #172B4D)",
+      /* @ts-ignore migrate to Text */
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }
   }, state.checked.length, " selected"), actions && (0, _react.jsx)(_inline.default, {
     alignBlock: "stretch",
     space: "space.100"

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

@@ -1,43 +1,40 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BaseCell = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
-/* eslint-disable @atlassian/tangerine/import/entry-points */
-/** @jsx jsx */
-
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _primitives = require("@atlaskit/primitives");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 /**
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
  */
 
-var baseResetStyles = (0, _react2.css)({
+var baseResetStyles = (0, _primitives.xcss)({
   display: 'table-cell',
   verticalAlign: 'middle',
-  '&:first-of-type': {
+  ':first-of-type': {
     paddingLeft: "var(--ds-space-100, 8px)"
   },
-  '&:last-of-type': {
+  ':last-of-type': {
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
-var alignLeftStyles = (0, _react2.css)({
-  textAlign: 'left'
-});
-var alignCenterStyles = (0, _react2.css)({
-  textAlign: 'center'
-});
-var alignRightStyles = (0, _react2.css)({
-  textAlign: 'right'
-});
-var alignMap = {
-  text: alignLeftStyles,
-  number: alignRightStyles,
-  icon: alignCenterStyles
+var alignMapStyles = {
+  text: (0, _primitives.xcss)({
+    textAlign: 'left'
+  }),
+  icon: (0, _primitives.xcss)({
+    textAlign: 'center'
+  }),
+  number: (0, _primitives.xcss)({
+    textAlign: 'right'
+  })
 };
 
 /**
@@ -60,20 +57,21 @@ var BaseCell = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
-    className = _ref.className,
+    xcss = _ref.xcss,
     sortDirection = _ref.sortDirection,
     colSpan = _ref.colSpan;
-  return (0, _react2.jsx)(_box.default, {
-    css: [baseResetStyles, alignMap[align]],
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: [baseResetStyles, alignMapStyles[align]].concat((0, _toConsumableArray2.default)(Array.isArray(xcss) ? xcss : [xcss])),
     ref: ref,
     scope: scope,
     backgroundColor: backgroundColor,
     paddingBlock: paddingBlock,
-    paddingInline: paddingInline,
+    paddingInline: paddingInline
+    // @ts-expect-error
+    ,
     as: as,
     testId: testId,
-    className: className,
-    UNSAFE_style: width ? {
+    style: width ? {
       width: width
     } : undefined,
     "aria-sort": sortDirection,

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

@@ -5,14 +5,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.BulkActionOverlay = void 0;
-var _react = require("@emotion/react");
-var _dsExplorations = require("@atlaskit/ds-explorations");
-var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
-/** @jsx jsx */
-
-var overlayStyles = (0, _react.css)({
-  inset: 0,
-  left: "var(--ds-space-400, 32px)"
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
+var overlayStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  position: 'absolute',
+  inset: 'space.0',
+  left: 'space.400'
 });
 
 /**
@@ -22,13 +21,14 @@ var overlayStyles = (0, _react.css)({
  */
 var BulkActionOverlay = function BulkActionOverlay(_ref) {
   var children = _ref.children;
-  return (0, _react.jsx)(_dsExplorations.UNSAFE_Box, {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box
+  // @ts-expect-error should box support table elements?
+  , {
     as: "th",
-    position: "absolute",
     paddingInline: "space.100",
     backgroundColor: "elevation.surface",
-    css: overlayStyles
-  }, (0, _react.jsx)(_inline.default, {
+    xcss: overlayStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.300",
     alignBlock: "center"
   }, children));

package/dist/cjs/ui/expandable-cell.js

@@ -1,16 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ExpandableCell = void 0;
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
 var _baseCell = require("./base-cell");
-/** @jsx jsx */
-
-var spacingStyles = (0, _react.css)({
-  width: 24,
-  padding: "var(--ds-space-0, 0px)"
+var spacingStyles = (0, _primitives.xcss)({
+  width: 'size.200',
+  padding: 'space.0'
 });
 /**
  * __Expandable cell__
@@ -20,9 +20,9 @@ var spacingStyles = (0, _react.css)({
 var ExpandableCell = function ExpandableCell(_ref) {
   var children = _ref.children,
     as = _ref.as;
-  return (0, _react.jsx)(_baseCell.BaseCell, {
+  return /*#__PURE__*/_react.default.createElement(_baseCell.BaseCell, {
     as: as,
-    css: spacingStyles
+    xcss: spacingStyles
   }, children);
 };
 exports.ExpandableCell = ExpandableCell;

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

@@ -1,16 +1,16 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.SelectableCell = void 0;
-var _react = require("@emotion/react");
+var _react = _interopRequireDefault(require("react"));
+var _primitives = require("@atlaskit/primitives");
 var _baseCell = require("./base-cell");
-/** @jsx jsx */
-
-var spacingStyles = (0, _react.css)({
-  width: 32,
-  padding: "var(--ds-space-0, 0px)"
+var spacingStyles = (0, _primitives.xcss)({
+  width: 'size.300',
+  padding: 'space.0'
 });
 /**
  * __Selectable cell__
@@ -20,9 +20,9 @@ var spacingStyles = (0, _react.css)({
 var SelectableCell = function SelectableCell(_ref) {
   var children = _ref.children,
     as = _ref.as;
-  return (0, _react.jsx)(_baseCell.BaseCell, {
+  return /*#__PURE__*/_react.default.createElement(_baseCell.BaseCell, {
     as: as,
-    css: spacingStyles
+    xcss: spacingStyles
   }, children);
 };
 exports.SelectableCell = SelectableCell;

package/dist/cjs/version.json

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

package/dist/es2019/head-cell.js

@@ -2,7 +2,6 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { TH } from './ui/th';
 
 /**
@@ -22,9 +21,14 @@ const HeadCell = ({
     align: align,
     testId: testId,
     backgroundColor: backgroundColor
-  }, children && jsx(Text, {
-    color: "color.text",
-    fontWeight: "medium"
+  }, children &&
+  // migrate to <Text />
+  jsx("span", {
+    style: {
+      color: "var(--ds-text, #172B4D)",
+      /* @ts-ignore migrate to Text */
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }
   }, children));
 };
 export default HeadCell;

package/dist/es2019/thead.js

@@ -2,7 +2,6 @@
 
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import Inline from '@atlaskit/primitives/inline';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
@@ -31,9 +30,12 @@ const THead = ({
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
-    color: "color.text",
-    fontWeight: "medium"
+  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx("span", {
+    style: {
+      color: "var(--ds-text, #172B4D)",
+      /* @ts-ignore migrate to Text */
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }
   }, state.checked.length, " selected"), actions && jsx(Inline, {
     alignBlock: "stretch",
     space: "space.100"

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

@@ -1,36 +1,30 @@
-/* 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 React, { forwardRef } from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
  */
 
-const baseResetStyles = css({
+const baseResetStyles = xcss({
   display: 'table-cell',
   verticalAlign: 'middle',
-  '&:first-of-type': {
+  ':first-of-type': {
     paddingLeft: "var(--ds-space-100, 8px)"
   },
-  '&:last-of-type': {
+  ':last-of-type': {
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
-const alignLeftStyles = css({
-  textAlign: 'left'
-});
-const alignCenterStyles = css({
-  textAlign: 'center'
-});
-const alignRightStyles = css({
-  textAlign: 'right'
-});
-const alignMap = {
-  text: alignLeftStyles,
-  number: alignRightStyles,
-  icon: alignCenterStyles
+const alignMapStyles = {
+  text: xcss({
+    textAlign: 'left'
+  }),
+  icon: xcss({
+    textAlign: 'center'
+  }),
+  number: xcss({
+    textAlign: 'right'
+  })
 };
 
 /**
@@ -50,20 +44,21 @@ export const BaseCell = /*#__PURE__*/forwardRef(({
   backgroundColor,
   scope,
   width,
-  className,
+  xcss,
   sortDirection,
   colSpan
-}, ref) => jsx(Box, {
-  css: [baseResetStyles, alignMap[align]],
+}, ref) => /*#__PURE__*/React.createElement(Box, {
+  xcss: [baseResetStyles, alignMapStyles[align], ...(Array.isArray(xcss) ? xcss : [xcss])],
   ref: ref,
   scope: scope,
   backgroundColor: backgroundColor,
   paddingBlock: paddingBlock,
-  paddingInline: paddingInline,
+  paddingInline: paddingInline
+  // @ts-expect-error
+  ,
   as: as,
   testId: testId,
-  className: className,
-  UNSAFE_style: width ? {
+  style: width ? {
     width
   } : undefined,
   "aria-sort": sortDirection,

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

@@ -1,11 +1,10 @@
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
-import Inline from '@atlaskit/primitives/inline';
-const overlayStyles = css({
-  inset: 0,
-  left: "var(--ds-space-400, 32px)"
+import React from 'react';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+const overlayStyles = xcss({
+  display: 'flex',
+  position: 'absolute',
+  inset: 'space.0',
+  left: 'space.400'
 });
 
 /**
@@ -15,13 +14,14 @@ const overlayStyles = css({
  */
 export const BulkActionOverlay = ({
   children
-}) => jsx(Box, {
+}) => /*#__PURE__*/React.createElement(Box
+// @ts-expect-error should box support table elements?
+, {
   as: "th",
-  position: "absolute",
   paddingInline: "space.100",
   backgroundColor: "elevation.surface",
-  css: overlayStyles
-}, jsx(Inline, {
+  xcss: overlayStyles
+}, /*#__PURE__*/React.createElement(Inline, {
   space: "space.300",
   alignBlock: "center"
 }, children));

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

@@ -1,10 +1,9 @@
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
+import React from 'react';
+import { xcss } from '@atlaskit/primitives';
 import { BaseCell } from './base-cell';
-const spacingStyles = css({
-  width: 24,
-  padding: "var(--ds-space-0, 0px)"
+const spacingStyles = xcss({
+  width: 'size.200',
+  padding: 'space.0'
 });
 /**
  * __Expandable cell__
@@ -15,8 +14,8 @@ export const ExpandableCell = ({
   children,
   as
 }) => {
-  return jsx(BaseCell, {
+  return /*#__PURE__*/React.createElement(BaseCell, {
     as: as,
-    css: spacingStyles
+    xcss: spacingStyles
   }, children);
 };

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

@@ -1,10 +1,9 @@
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
+import React from 'react';
+import { xcss } from '@atlaskit/primitives';
 import { BaseCell } from './base-cell';
-const spacingStyles = css({
-  width: 32,
-  padding: "var(--ds-space-0, 0px)"
+const spacingStyles = xcss({
+  width: 'size.300',
+  padding: 'space.0'
 });
 /**
  * __Selectable cell__
@@ -15,8 +14,8 @@ export const SelectableCell = ({
   children,
   as
 }) => {
-  return jsx(BaseCell, {
+  return /*#__PURE__*/React.createElement(BaseCell, {
     as: as,
-    css: spacingStyles
+    xcss: spacingStyles
   }, children);
 };

package/dist/es2019/version.json

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

package/dist/esm/head-cell.js

@@ -2,7 +2,6 @@
 /** @jsx jsx */
 
 import { jsx } from '@emotion/react';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import { TH } from './ui/th';
 
 /**
@@ -22,9 +21,14 @@ var HeadCell = function HeadCell(_ref) {
     align: align,
     testId: testId,
     backgroundColor: backgroundColor
-  }, children && jsx(Text, {
-    color: "color.text",
-    fontWeight: "medium"
+  }, children &&
+  // migrate to <Text />
+  jsx("span", {
+    style: {
+      color: "var(--ds-text, #172B4D)",
+      /* @ts-ignore migrate to Text */
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }
   }, children));
 };
 export default HeadCell;

package/dist/esm/thead.js

@@ -3,7 +3,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 import { jsx } from '@emotion/react';
 import Checkbox from '@atlaskit/checkbox';
-import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import Inline from '@atlaskit/primitives/inline';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { useSelection } from './hooks/selection-provider';
@@ -32,9 +31,12 @@ var THead = function THead(_ref) {
     onChange: isChecked ? removeAll : setAll,
     isChecked: isChecked,
     isIndeterminate: state.anyChecked && !state.allChecked
-  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx(Text, {
-    color: "color.text",
-    fontWeight: "medium"
+  })), children, isSelectable && isChecked && jsx(Primitives.BulkActionOverlay, null, jsx("span", {
+    style: {
+      color: "var(--ds-text, #172B4D)",
+      /* @ts-ignore migrate to Text */
+      fontWeight: "var(--ds-font-weight-medium, 500)"
+    }
   }, state.checked.length, " selected"), actions && jsx(Inline, {
     alignBlock: "stretch",
     space: "space.100"

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

@@ -1,36 +1,31 @@
-/* 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 _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+import React, { forwardRef } from 'react';
+import { Box, xcss } from '@atlaskit/primitives';
 
 /**
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
  */
 
-var baseResetStyles = css({
+var baseResetStyles = xcss({
   display: 'table-cell',
   verticalAlign: 'middle',
-  '&:first-of-type': {
+  ':first-of-type': {
     paddingLeft: "var(--ds-space-100, 8px)"
   },
-  '&:last-of-type': {
+  ':last-of-type': {
     paddingRight: "var(--ds-space-100, 8px)"
   }
 });
-var alignLeftStyles = css({
-  textAlign: 'left'
-});
-var alignCenterStyles = css({
-  textAlign: 'center'
-});
-var alignRightStyles = css({
-  textAlign: 'right'
-});
-var alignMap = {
-  text: alignLeftStyles,
-  number: alignRightStyles,
-  icon: alignCenterStyles
+var alignMapStyles = {
+  text: xcss({
+    textAlign: 'left'
+  }),
+  icon: xcss({
+    textAlign: 'center'
+  }),
+  number: xcss({
+    textAlign: 'right'
+  })
 };
 
 /**
@@ -53,20 +48,21 @@ export var BaseCell = /*#__PURE__*/forwardRef(function (_ref, ref) {
     backgroundColor = _ref.backgroundColor,
     scope = _ref.scope,
     width = _ref.width,
-    className = _ref.className,
+    xcss = _ref.xcss,
     sortDirection = _ref.sortDirection,
     colSpan = _ref.colSpan;
-  return jsx(Box, {
-    css: [baseResetStyles, alignMap[align]],
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: [baseResetStyles, alignMapStyles[align]].concat(_toConsumableArray(Array.isArray(xcss) ? xcss : [xcss])),
     ref: ref,
     scope: scope,
     backgroundColor: backgroundColor,
     paddingBlock: paddingBlock,
-    paddingInline: paddingInline,
+    paddingInline: paddingInline
+    // @ts-expect-error
+    ,
     as: as,
     testId: testId,
-    className: className,
-    UNSAFE_style: width ? {
+    style: width ? {
       width: width
     } : undefined,
     "aria-sort": sortDirection,

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

@@ -1,11 +1,10 @@
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
-import { UNSAFE_Box as Box } from '@atlaskit/ds-explorations';
-import Inline from '@atlaskit/primitives/inline';
-var overlayStyles = css({
-  inset: 0,
-  left: "var(--ds-space-400, 32px)"
+import React from 'react';
+import { Box, Inline, xcss } from '@atlaskit/primitives';
+var overlayStyles = xcss({
+  display: 'flex',
+  position: 'absolute',
+  inset: 'space.0',
+  left: 'space.400'
 });
 
 /**
@@ -15,13 +14,14 @@ var overlayStyles = css({
  */
 export var BulkActionOverlay = function BulkActionOverlay(_ref) {
   var children = _ref.children;
-  return jsx(Box, {
+  return /*#__PURE__*/React.createElement(Box
+  // @ts-expect-error should box support table elements?
+  , {
     as: "th",
-    position: "absolute",
     paddingInline: "space.100",
     backgroundColor: "elevation.surface",
-    css: overlayStyles
-  }, jsx(Inline, {
+    xcss: overlayStyles
+  }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.300",
     alignBlock: "center"
   }, children));

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

@@ -1,10 +1,9 @@
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
+import React from 'react';
+import { xcss } from '@atlaskit/primitives';
 import { BaseCell } from './base-cell';
-var spacingStyles = css({
-  width: 24,
-  padding: "var(--ds-space-0, 0px)"
+var spacingStyles = xcss({
+  width: 'size.200',
+  padding: 'space.0'
 });
 /**
  * __Expandable cell__
@@ -14,8 +13,8 @@ var spacingStyles = css({
 export var ExpandableCell = function ExpandableCell(_ref) {
   var children = _ref.children,
     as = _ref.as;
-  return jsx(BaseCell, {
+  return /*#__PURE__*/React.createElement(BaseCell, {
     as: as,
-    css: spacingStyles
+    xcss: spacingStyles
   }, children);
 };

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

@@ -1,10 +1,9 @@
-/** @jsx jsx */
-
-import { css, jsx } from '@emotion/react';
+import React from 'react';
+import { xcss } from '@atlaskit/primitives';
 import { BaseCell } from './base-cell';
-var spacingStyles = css({
-  width: 32,
-  padding: "var(--ds-space-0, 0px)"
+var spacingStyles = xcss({
+  width: 'size.300',
+  padding: 'space.0'
 });
 /**
  * __Selectable cell__
@@ -14,8 +13,8 @@ var spacingStyles = css({
 export var SelectableCell = function SelectableCell(_ref) {
   var children = _ref.children,
     as = _ref.as;
-  return jsx(BaseCell, {
+  return /*#__PURE__*/React.createElement(BaseCell, {
     as: as,
-    css: spacingStyles
+    xcss: spacingStyles
   }, children);
 };

package/dist/esm/version.json

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

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { BoxProps } from '@atlaskit/ds-explorations/box';
+import React, { ReactNode } from 'react';
+import { BoxProps } from '@atlaskit/primitives';
 export type BaseCellProps = {
     /**
      * A percentage of pixel width of the table to apply to a column.
@@ -9,7 +8,7 @@ export type BaseCellProps = {
     /**
      * Horizontal alignment of content.
      */
-    align?: keyof typeof alignMap;
+    align?: 'icon' | 'text' | 'number';
     /**
      * Whether the cell should render as a `td` or `th` element.
      */
@@ -33,16 +32,11 @@ export type BaseCellProps = {
      * Number of columns to span.
      */
     colSpan?: number;
-} & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'className'>;
+} & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'xcss'>;
 /**
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
  */
 export type SortDirection = 'ascending' | 'descending' | 'none' | 'other';
-declare const alignMap: {
-    readonly text: import("@emotion/react").SerializedStyles;
-    readonly number: import("@emotion/react").SerializedStyles;
-    readonly icon: import("@emotion/react").SerializedStyles;
-};
 /**
  * __BaseCell__
  *
@@ -50,7 +44,7 @@ declare const alignMap: {
  *
  * Basic cell element.
  */
-export declare const BaseCell: import("react").ForwardRefExoticComponent<{
+export declare const BaseCell: React.ForwardRefExoticComponent<{
     /**
      * A percentage of pixel width of the table to apply to a column.
      */
@@ -82,7 +76,6 @@ export declare const BaseCell: import("react").ForwardRefExoticComponent<{
      * Number of columns to span.
      */
     colSpan?: number | undefined;
-} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & {
+} & Pick<BoxProps<"div">, "backgroundColor" | "paddingBlock" | "paddingInline" | "xcss"> & {
     sortDirection?: SortDirection | undefined;
-} & import("react").RefAttributes<HTMLTableCellElement>>;
-export {};
+} & React.RefAttributes<HTMLTableCellElement>>;

package/dist/types/ui/bulk-action-overlay.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { FC, ReactNode } from 'react';
 /**
  * __Bulk action overlay__

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 type ExpandableCellProps = {
     as: 'td' | 'th';
     children?: ReactNode;
@@ -10,5 +8,5 @@ type ExpandableCellProps = {
  *
  * An expandable cell primitive designed to be used for light weight composition.
  */
-export declare const ExpandableCell: ({ children, as }: ExpandableCellProps) => jsx.JSX.Element;
+export declare const ExpandableCell: ({ children, as }: ExpandableCellProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 type SelectableCellProps = {
     as: 'td' | 'th';
     children?: ReactNode;
@@ -10,5 +8,5 @@ type SelectableCellProps = {
  *
  * A selectable cell primitive designed to be used for light weight composition.
  */
-export declare const SelectableCell: ({ children, as }: SelectableCellProps) => jsx.JSX.Element;
+export declare const SelectableCell: ({ children, as }: SelectableCellProps) => JSX.Element;
 export {};

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

@@ -1,6 +1,5 @@
-/** @jsx jsx */
-import { ReactNode } from 'react';
-import { BoxProps } from '@atlaskit/ds-explorations/box';
+import React, { ReactNode } from 'react';
+import { BoxProps } from '@atlaskit/primitives';
 export type BaseCellProps = {
     /**
      * A percentage of pixel width of the table to apply to a column.
@@ -9,7 +8,7 @@ export type BaseCellProps = {
     /**
      * Horizontal alignment of content.
      */
-    align?: keyof typeof alignMap;
+    align?: 'icon' | 'text' | 'number';
     /**
      * Whether the cell should render as a `td` or `th` element.
      */
@@ -33,16 +32,11 @@ export type BaseCellProps = {
      * Number of columns to span.
      */
     colSpan?: number;
-} & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'className'>;
+} & Pick<BoxProps, 'paddingBlock' | 'paddingInline' | 'backgroundColor' | 'xcss'>;
 /**
  * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort
  */
 export type SortDirection = 'ascending' | 'descending' | 'none' | 'other';
-declare const alignMap: {
-    readonly text: import("@emotion/react").SerializedStyles;
-    readonly number: import("@emotion/react").SerializedStyles;
-    readonly icon: import("@emotion/react").SerializedStyles;
-};
 /**
  * __BaseCell__
  *
@@ -50,7 +44,7 @@ declare const alignMap: {
  *
  * Basic cell element.
  */
-export declare const BaseCell: import("react").ForwardRefExoticComponent<{
+export declare const BaseCell: React.ForwardRefExoticComponent<{
     /**
      * A percentage of pixel width of the table to apply to a column.
      */
@@ -82,7 +76,6 @@ export declare const BaseCell: import("react").ForwardRefExoticComponent<{
      * Number of columns to span.
      */
     colSpan?: number | undefined;
-} & Pick<BoxProps<"div">, "className" | "backgroundColor" | "paddingBlock" | "paddingInline"> & {
+} & Pick<BoxProps<"div">, "backgroundColor" | "paddingBlock" | "paddingInline" | "xcss"> & {
     sortDirection?: SortDirection | undefined;
-} & import("react").RefAttributes<HTMLTableCellElement>>;
-export {};
+} & React.RefAttributes<HTMLTableCellElement>>;

package/dist/types-ts4.5/ui/bulk-action-overlay.d.ts

@@ -1,4 +1,3 @@
-/** @jsx jsx */
 import { FC, ReactNode } from 'react';
 /**
  * __Bulk action overlay__

package/dist/types-ts4.5/ui/expandable-cell.d.ts

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 type ExpandableCellProps = {
     as: 'td' | 'th';
     children?: ReactNode;
@@ -10,5 +8,5 @@ type ExpandableCellProps = {
  *
  * An expandable cell primitive designed to be used for light weight composition.
  */
-export declare const ExpandableCell: ({ children, as }: ExpandableCellProps) => jsx.JSX.Element;
+export declare const ExpandableCell: ({ children, as }: ExpandableCellProps) => JSX.Element;
 export {};

package/dist/types-ts4.5/ui/selectable-cell.d.ts

@@ -1,6 +1,4 @@
-/** @jsx jsx */
 import { ReactNode } from 'react';
-import { jsx } from '@emotion/react';
 type SelectableCellProps = {
     as: 'td' | 'th';
     children?: ReactNode;
@@ -10,5 +8,5 @@ type SelectableCellProps = {
  *
  * A selectable cell primitive designed to be used for light weight composition.
  */
-export declare const SelectableCell: ({ children, as }: SelectableCellProps) => jsx.JSX.Element;
+export declare const SelectableCell: ({ children, as }: SelectableCellProps) => JSX.Element;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table",
-  "version": "0.4.11",
+  "version": "0.4.13",
   "description": "A table is used to display data.",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
@@ -42,12 +42,11 @@
   "dependencies": {
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/checkbox": "^12.6.0",
-    "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/primitives": "^1.0.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.12.0",
     "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
@@ -58,13 +57,13 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
+    "@af/accessibility-testing": "*",
     "@atlaskit/ds-lib": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@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.9.5",
@@ -105,4 +104,4 @@
     }
   },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
-}
+}

package/report.api.md

@@ -17,26 +17,18 @@
 ```ts
 /// <reference types="react" />
 
-import { BoxProps } from '@atlaskit/ds-explorations/box';
+import { BoxProps } from '@atlaskit/primitives';
 import { FC } from 'react';
 import { jsx } from '@emotion/react';
 import { MemoExoticComponent } from 'react';
 import { default as React_2 } from 'react';
 import { ReactElement } from 'react';
 import { ReactNode } from 'react';
-import { SerializedStyles } from '@emotion/react';
-
-// @public (undocumented)
-const alignMap: {
-  readonly text: SerializedStyles;
-  readonly number: SerializedStyles;
-  readonly icon: SerializedStyles;
-};
 
 // @public (undocumented)
 type BaseCellProps = {
   width?: string;
-  align?: keyof typeof alignMap;
+  align?: 'icon' | 'number' | 'text';
   as?: 'td' | 'th';
   scope?: 'col' | 'row';
   testId?: string;
@@ -44,7 +36,7 @@ type BaseCellProps = {
   colSpan?: number;
 } & Pick<
   BoxProps,
-  'backgroundColor' | 'className' | 'paddingBlock' | 'paddingInline'
+  'backgroundColor' | 'paddingBlock' | 'paddingInline' | 'xcss'
 >;
 
 // @public (undocumented)

package/tmp/api-report-tmp.d.ts

@@ -1,130 +0,0 @@
-## API Report File for "@atlaskit/table"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { BoxProps } from '@atlaskit/ds-explorations/box';
-import { FC } from 'react';
-import { jsx } from '@emotion/react';
-import { MemoExoticComponent } from 'react';
-import { default as React_2 } from 'react';
-import { ReactElement } from 'react';
-import { ReactNode } from 'react';
-import { SerializedStyles } from '@emotion/react';
-
-// @public (undocumented)
-const alignMap: {
-    readonly text: SerializedStyles;
-    readonly number: SerializedStyles;
-    readonly icon: SerializedStyles;
-};
-
-// @public (undocumented)
-type BaseCellProps = {
-    width?: string;
-    align?: keyof typeof alignMap;
-    as?: 'td' | 'th';
-    scope?: 'col' | 'row';
-    testId?: string;
-    children?: ReactNode;
-    colSpan?: number;
-} & Pick<BoxProps, 'backgroundColor' | 'className' | 'paddingBlock' | 'paddingInline'>;
-
-// @public (undocumented)
-type BodyProps<Item extends object> = {
-    rows: Item[];
-    children: (row: Item) => ReactElement;
-} | {
-    rows?: never;
-    children: ReactElement | ReactElement[];
-};
-
-// @public
-export const Cell: FC<Omit<BaseCellProps, 'as'>>;
-
-// @public (undocumented)
-interface CellProps {
-    // (undocumented)
-    children?: ReactNode;
-    name: string;
-    // (undocumented)
-    onClick?: React.MouseEventHandler;
-    testId?: string;
-}
-
-// @public
-export const ExpandableCell: MemoExoticComponent<() => jsx.JSX.Element>;
-
-// @public
-export const ExpandableRow: ({ children, isExpanded, isDefaultExpanded, }: ExpandableRowProps) => JSX.Element;
-
-// @public
-export const ExpandableRowContent: ({ children }: ExpandableRowContentProps) => JSX.Element;
-
-// @public (undocumented)
-type ExpandableRowContentProps = {
-    children?: React_2.ReactNode;
-};
-
-// @public (undocumented)
-type ExpandableRowProps = {
-    children: React_2.ReactNode;
-    isExpanded?: boolean;
-    isDefaultExpanded?: boolean;
-};
-
-// @public
-export const HeadCell: FC<THProps>;
-
-// @public
-export const Row: FC<RowProps>;
-
-// @public (undocumented)
-type RowProps = {
-    testId?: string;
-    children?: ReactNode;
-};
-
-// @public
-export const SortableColumn: FC<CellProps>;
-
-// @public (undocumented)
-type SortKey<Key extends number | string | symbol> = 'unset' | Key;
-
-// @public
-function Table<ItemType extends object = object>({ children, isSelectable, sortKey, testId, }: TableProps<ItemType>): jsx.JSX.Element;
-export default Table;
-
-// @public (undocumented)
-type TableProps<ItemType extends object = {}> = {
-    testId?: string;
-    sortKey?: SortKey<keyof ItemType>;
-    children: ReactElement | ReactElement[];
-} & ({
-    isSelectable: true;
-    defaultSelected?: number;
-} | {
-    isSelectable?: false;
-});
-
-// @public
-export function TBody<ObjectType extends object>({ rows, children, }: BodyProps<ObjectType>): jsx.JSX.Element;
-
-// @public (undocumented)
-export const THead: FC<THeadProps>;
-
-// @public (undocumented)
-type THeadProps = {
-    actions?: (selected: number[]) => ReactNode;
-    children?: ReactNode;
-};
-
-// @public (undocumented)
-type THProps = Omit<BaseCellProps, 'as'>;
-
-// (No @packageDocumentation comment for this package)
-
-```