@atlaskit/table 0.12.1 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/table
 
+## 0.12.3
+
+### Patch Changes
+
+- [#182316](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/182316)
+  [`3e3e11916be69`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/3e3e11916be69) -
+  Migrated the internal usage of @atlaskit/focus-ring which uses Emotion for styling, to the new
+  version built with Compiled CSS-in-JS.
+- Updated dependencies
+
+## 0.12.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 0.12.1
 
 ### Patch Changes

package/dist/cjs/expandable-cell.js

@@ -9,8 +9,8 @@ exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _new = require("@atlaskit/button/new");
-var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down"));
-var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up"));
+var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down"));
+var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up"));
 var _useExpand2 = _interopRequireDefault(require("./hooks/use-expand"));
 var _expandableCell = require("./ui/expandable-cell");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
@@ -35,7 +35,8 @@ var ExpandableCell = /*#__PURE__*/(0, _react.memo)(function () {
     appearance: "subtle",
     icon: function icon(iconProps) {
       return /*#__PURE__*/_react.default.createElement(Icon, (0, _extends2.default)({}, iconProps, {
-        LEGACY_size: "small"
+        LEGACY_size: "small",
+        size: "small"
       }));
     },
     label: "Expand row",

package/dist/cjs/ui/expand-icon.js

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.ExpandIcon = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down"));
-var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up"));
+var _chevronDownHipchatChevronDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down"));
+var _chevronUpHipchatChevronUp = _interopRequireDefault(require("@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up"));
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // TODO: Using HipChat icons as the standard icon set is missing large
 // versions of `chevron-up` and `chevron-down`, despite already including
@@ -27,14 +27,16 @@ var ExpandIcon = exports.ExpandIcon = /*#__PURE__*/(0, _react.memo)(function (_r
         color: "currentColor",
         LEGACY_size: "small",
         label: "",
-        LEGACY_primaryColor: "inherit"
+        LEGACY_primaryColor: "inherit",
+        size: "small"
       });
     case false:
       return /*#__PURE__*/_react.default.createElement(_chevronDownHipchatChevronDown.default, {
         color: "currentColor",
         LEGACY_size: "small",
         label: "",
-        LEGACY_primaryColor: "inherit"
+        LEGACY_primaryColor: "inherit",
+        size: "small"
       });
   }
 });

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

@@ -7,8 +7,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.SortIcon = void 0;
 var _react = _interopRequireWildcard(require("react"));
-var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/arrow-down"));
-var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/utility/migration/arrow-up"));
+var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-down"));
+var _arrowUp = _interopRequireDefault(require("@atlaskit/icon/core/migration/arrow-up"));
 var _useTable2 = require("../hooks/use-table");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 /**
@@ -28,14 +28,16 @@ var SortIcon = exports.SortIcon = /*#__PURE__*/(0, _react.memo)(function (_ref)
           color: "currentColor",
           LEGACY_size: "small",
           label: "",
-          LEGACY_primaryColor: "inherit"
+          LEGACY_primaryColor: "inherit",
+          size: "small"
         });
       case 'descending':
         return /*#__PURE__*/_react.default.createElement(_arrowDown.default, {
           color: "currentColor",
           LEGACY_size: "small",
           label: "",
-          LEGACY_primaryColor: "inherit"
+          LEGACY_primaryColor: "inherit",
+          size: "small"
         });
     }
   }

package/dist/cjs/ui/tr.compiled.css

@@ -1,11 +1,12 @@
 
-._19itglyw{border:none}._179rmc7d{border-block-end:var(--_1748cv6)}
+._19itglyw{border:none}._12ornqa1{border-block-end-style:solid}
+._1ezz1tr0{border-block-end-color:var(--ds-border,#eee)}
+._1r62e4h9{border-block-end-width:var(--ds-border-width,1px)}
 ._4t3i1wto{height:3rem}
 ._bfhkcslv{background-color:var(--ds-background-selected,#deebff88)}
 ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
 ._btyzidpf{border-spacing:0}
 ._hpylidpf{border-image-width:0}
 ._kqswh2mm{position:relative}
-._x6vyglyw:focus-visible:after{box-shadow:none}
 ._irr3134o:hover{background-color:var(--ds-background-neutral-subtle-hovered,#f8f8f8)}
 ._irr3quvt:hover{background-color:var(--ds-background-selected-hovered,#deebff)}

package/dist/cjs/ui/tr.js

@@ -1,7 +1,6 @@
 /* tr.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -10,12 +9,15 @@ exports.TR = void 0;
 require("./tr.compiled.css");
 var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
-var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+var _css = require("@atlaskit/css");
+var _compiled = require("@atlaskit/primitives/compiled");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
-var baseStyles = null;
-var selectedStyles = null;
-var subitemStyles = null;
-var bodyRowStyles = null;
+var styles = {
+  base: "_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf",
+  selected: "_bfhkcslv _irr3quvt",
+  subitem: "_bfhkm7j4",
+  bodyRow: "_1r62e4h9 _12ornqa1 _1ezz1tr0 _irr3134o"
+};
 /**
  * __Row__
  *
@@ -30,15 +32,12 @@ var TR = exports.TR = function TR(_ref) {
     _ref$isBodyRow = _ref.isBodyRow,
     isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow,
     isSubitem = _ref.isSubitem;
-  return /*#__PURE__*/React.createElement(_focusRing.default, {
-    isInset: true
-  }, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement(_compiled.Focusable, {
+    as: "tr",
+    isInset: true,
     tabIndex: -1,
     "aria-selected": isSelected,
-    "data-testid": testId,
-    className: (0, _runtime.ax)(["_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf", isBodyRow && "_179rmc7d _x6vyglyw _irr3134o", isSelected && "_bfhkcslv _irr3quvt", isSubitem && "_bfhkm7j4"]),
-    style: {
-      "--_1748cv6": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, #eee)"))
-    }
-  }, children));
+    testId: testId,
+    xcss: (0, _css.cx)(styles.base, isBodyRow && styles.bodyRow, isSelected && styles.selected, isSubitem && styles.subitem)
+  }, children);
 };

package/dist/es2019/expandable-cell.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { memo, useCallback } from 'react';
 import { IconButton } from '@atlaskit/button/new';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
 import useExpand from './hooks/use-expand';
 import { ExpandableCell as ExpandableCellPrimitive } from './ui/expandable-cell';
 
@@ -27,7 +27,8 @@ const ExpandableCell = /*#__PURE__*/memo(() => {
     spacing: "compact",
     appearance: "subtle",
     icon: iconProps => /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
-      LEGACY_size: "small"
+      LEGACY_size: "small",
+      size: "small"
     })),
     label: "Expand row",
     onClick: handleClick,

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

@@ -3,8 +3,8 @@ import React, { memo } from 'react';
 // TODO: Using HipChat icons as the standard icon set is missing large
 // versions of `chevron-up` and `chevron-down`, despite already including
 // `chevron-left-large` and `chevron-right-large`...
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
 
 /**
  * __Expand icon__
@@ -20,14 +20,16 @@ export const ExpandIcon = /*#__PURE__*/memo(({
         color: "currentColor",
         LEGACY_size: "small",
         label: "",
-        LEGACY_primaryColor: "inherit"
+        LEGACY_primaryColor: "inherit",
+        size: "small"
       });
     case false:
       return /*#__PURE__*/React.createElement(ChevronDownIcon, {
         color: "currentColor",
         LEGACY_size: "small",
         label: "",
-        LEGACY_primaryColor: "inherit"
+        LEGACY_primaryColor: "inherit",
+        size: "small"
       });
   }
 });

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

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import ArrowDownIcon from '@atlaskit/icon/utility/migration/arrow-down';
-import ArrowUpIcon from '@atlaskit/icon/utility/migration/arrow-up';
+import ArrowDownIcon from '@atlaskit/icon/core/migration/arrow-down';
+import ArrowUpIcon from '@atlaskit/icon/core/migration/arrow-up';
 import { useTable } from '../hooks/use-table';
 
 /**
@@ -22,14 +22,16 @@ export const SortIcon = /*#__PURE__*/memo(({
           color: "currentColor",
           LEGACY_size: "small",
           label: "",
-          LEGACY_primaryColor: "inherit"
+          LEGACY_primaryColor: "inherit",
+          size: "small"
         });
       case 'descending':
         return /*#__PURE__*/React.createElement(ArrowDownIcon, {
           color: "currentColor",
           LEGACY_size: "small",
           label: "",
-          LEGACY_primaryColor: "inherit"
+          LEGACY_primaryColor: "inherit",
+          size: "small"
         });
     }
   }

package/dist/es2019/ui/tr.compiled.css

@@ -1,11 +1,12 @@
 
-._19itglyw{border:none}._179rn7ae{border-block-end:1px solid var(--ds-border,#eee)}
+._19itglyw{border:none}._12ornqa1{border-block-end-style:solid}
+._1ezz1tr0{border-block-end-color:var(--ds-border,#eee)}
+._1r62e4h9{border-block-end-width:var(--ds-border-width,1px)}
 ._4t3i1wto{height:3rem}
 ._bfhkcslv{background-color:var(--ds-background-selected,#deebff88)}
 ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
 ._btyzidpf{border-spacing:0}
 ._hpylidpf{border-image-width:0}
 ._kqswh2mm{position:relative}
-._x6vyglyw:focus-visible:after{box-shadow:none}
 ._irr3134o:hover{background-color:var(--ds-background-neutral-subtle-hovered,#f8f8f8)}
 ._irr3quvt:hover{background-color:var(--ds-background-selected-hovered,#deebff)}

package/dist/es2019/ui/tr.js

@@ -2,11 +2,14 @@
 import "./tr.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import FocusRing from '@atlaskit/focus-ring';
-const baseStyles = null;
-const selectedStyles = null;
-const subitemStyles = null;
-const bodyRowStyles = null;
+import { cx } from '@atlaskit/css';
+import { Focusable } from '@atlaskit/primitives/compiled';
+const styles = {
+  base: "_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf",
+  selected: "_bfhkcslv _irr3quvt",
+  subitem: "_bfhkm7j4",
+  bodyRow: "_1r62e4h9 _12ornqa1 _1ezz1tr0 _irr3134o"
+};
 /**
  * __Row__
  *
@@ -21,12 +24,12 @@ export const TR = ({
   isBodyRow = true,
   isSubitem
 }) => {
-  return /*#__PURE__*/React.createElement(FocusRing, {
-    isInset: true
-  }, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement(Focusable, {
+    as: "tr",
+    isInset: true,
     tabIndex: -1,
     "aria-selected": isSelected,
-    "data-testid": testId,
-    className: ax(["_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf", isBodyRow && "_179rn7ae _x6vyglyw _irr3134o", isSelected && "_bfhkcslv _irr3quvt", isSubitem && "_bfhkm7j4"])
-  }, children));
+    testId: testId,
+    xcss: cx(styles.base, isBodyRow && styles.bodyRow, isSelected && styles.selected, isSubitem && styles.subitem)
+  }, children);
 };

package/dist/esm/expandable-cell.js

@@ -1,8 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { memo, useCallback } from 'react';
 import { IconButton } from '@atlaskit/button/new';
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
 import useExpand from './hooks/use-expand';
 import { ExpandableCell as ExpandableCellPrimitive } from './ui/expandable-cell';
 
@@ -27,7 +27,8 @@ var ExpandableCell = /*#__PURE__*/memo(function () {
     appearance: "subtle",
     icon: function icon(iconProps) {
       return /*#__PURE__*/React.createElement(Icon, _extends({}, iconProps, {
-        LEGACY_size: "small"
+        LEGACY_size: "small",
+        size: "small"
       }));
     },
     label: "Expand row",

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

@@ -3,8 +3,8 @@ import React, { memo } from 'react';
 // TODO: Using HipChat icons as the standard icon set is missing large
 // versions of `chevron-up` and `chevron-down`, despite already including
 // `chevron-left-large` and `chevron-right-large`...
-import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down--hipchat-chevron-down';
-import ChevronUpIcon from '@atlaskit/icon/utility/migration/chevron-up--hipchat-chevron-up';
+import ChevronDownIcon from '@atlaskit/icon/core/migration/chevron-down--hipchat-chevron-down';
+import ChevronUpIcon from '@atlaskit/icon/core/migration/chevron-up--hipchat-chevron-up';
 
 /**
  * __Expand icon__
@@ -19,14 +19,16 @@ export var ExpandIcon = /*#__PURE__*/memo(function (_ref) {
         color: "currentColor",
         LEGACY_size: "small",
         label: "",
-        LEGACY_primaryColor: "inherit"
+        LEGACY_primaryColor: "inherit",
+        size: "small"
       });
     case false:
       return /*#__PURE__*/React.createElement(ChevronDownIcon, {
         color: "currentColor",
         LEGACY_size: "small",
         label: "",
-        LEGACY_primaryColor: "inherit"
+        LEGACY_primaryColor: "inherit",
+        size: "small"
       });
   }
 });

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

@@ -1,6 +1,6 @@
 import React, { memo } from 'react';
-import ArrowDownIcon from '@atlaskit/icon/utility/migration/arrow-down';
-import ArrowUpIcon from '@atlaskit/icon/utility/migration/arrow-up';
+import ArrowDownIcon from '@atlaskit/icon/core/migration/arrow-down';
+import ArrowUpIcon from '@atlaskit/icon/core/migration/arrow-up';
 import { useTable } from '../hooks/use-table';
 
 /**
@@ -20,14 +20,16 @@ export var SortIcon = /*#__PURE__*/memo(function (_ref) {
           color: "currentColor",
           LEGACY_size: "small",
           label: "",
-          LEGACY_primaryColor: "inherit"
+          LEGACY_primaryColor: "inherit",
+          size: "small"
         });
       case 'descending':
         return /*#__PURE__*/React.createElement(ArrowDownIcon, {
           color: "currentColor",
           LEGACY_size: "small",
           label: "",
-          LEGACY_primaryColor: "inherit"
+          LEGACY_primaryColor: "inherit",
+          size: "small"
         });
     }
   }

package/dist/esm/ui/tr.compiled.css

@@ -1,11 +1,12 @@
 
-._19itglyw{border:none}._179rmc7d{border-block-end:var(--_1748cv6)}
+._19itglyw{border:none}._12ornqa1{border-block-end-style:solid}
+._1ezz1tr0{border-block-end-color:var(--ds-border,#eee)}
+._1r62e4h9{border-block-end-width:var(--ds-border-width,1px)}
 ._4t3i1wto{height:3rem}
 ._bfhkcslv{background-color:var(--ds-background-selected,#deebff88)}
 ._bfhkm7j4{background-color:var(--ds-background-neutral,#091e420f)}
 ._btyzidpf{border-spacing:0}
 ._hpylidpf{border-image-width:0}
 ._kqswh2mm{position:relative}
-._x6vyglyw:focus-visible:after{box-shadow:none}
 ._irr3134o:hover{background-color:var(--ds-background-neutral-subtle-hovered,#f8f8f8)}
 ._irr3quvt:hover{background-color:var(--ds-background-selected-hovered,#deebff)}

package/dist/esm/ui/tr.js

@@ -2,11 +2,14 @@
 import "./tr.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import FocusRing from '@atlaskit/focus-ring';
-var baseStyles = null;
-var selectedStyles = null;
-var subitemStyles = null;
-var bodyRowStyles = null;
+import { cx } from '@atlaskit/css';
+import { Focusable } from '@atlaskit/primitives/compiled';
+var styles = {
+  base: "_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf",
+  selected: "_bfhkcslv _irr3quvt",
+  subitem: "_bfhkm7j4",
+  bodyRow: "_1r62e4h9 _12ornqa1 _1ezz1tr0 _irr3134o"
+};
 /**
  * __Row__
  *
@@ -21,15 +24,12 @@ export var TR = function TR(_ref) {
     _ref$isBodyRow = _ref.isBodyRow,
     isBodyRow = _ref$isBodyRow === void 0 ? true : _ref$isBodyRow,
     isSubitem = _ref.isSubitem;
-  return /*#__PURE__*/React.createElement(FocusRing, {
-    isInset: true
-  }, /*#__PURE__*/React.createElement("tr", {
+  return /*#__PURE__*/React.createElement(Focusable, {
+    as: "tr",
+    isInset: true,
     tabIndex: -1,
     "aria-selected": isSelected,
-    "data-testid": testId,
-    className: ax(["_19itglyw _4t3i1wto _kqswh2mm _hpylidpf _btyzidpf", isBodyRow && "_179rmc7d _x6vyglyw _irr3134o", isSelected && "_bfhkcslv _irr3quvt", isSubitem && "_bfhkm7j4"]),
-    style: {
-      "--_1748cv6": ix("1px solid ".concat("var(--ds-border, #eee)"))
-    }
-  }, children));
+    testId: testId,
+    xcss: cx(styles.base, isBodyRow && styles.bodyRow, isSelected && styles.selected, isSubitem && styles.subitem)
+  }, children);
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/table",
-	"version": "0.12.1",
+	"version": "0.12.3",
 	"description": "A table is used to display data.",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -17,8 +17,7 @@
 				"type": "intent-to-deprecate",
 				"description": "This package was an experiment, and is currently deprioritized. It is not recommended for use in production, and we are not providing support for it at this time. Consider using [@atlaskit/dynamic-table](/components/dynamic-table) instead."
 			}
-		},
-		"runReact18": true
+		}
 	},
 	"repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
 	"main": "dist/cjs/index.js",
@@ -44,12 +43,13 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/checkbox": "^17.1.0",
+		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
-		"@atlaskit/icon": "^26.4.0",
-		"@atlaskit/primitives": "^14.8.0",
-		"@atlaskit/tokens": "^5.0.0",
-		"@atlaskit/tooltip": "^20.2.0",
+		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/primitives": "^14.10.0",
+		"@atlaskit/tokens": "^5.4.0",
+		"@atlaskit/tooltip": "^20.3.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.3",
@@ -63,9 +63,9 @@
 		"@af/integration-testing": "workspace:^",
 		"@atlaskit/avatar": "^25.1.0",
 		"@atlaskit/date": "^2.0.0",
-		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/dynamic-table": "^18.1.0",
-		"@atlaskit/lozenge": "^12.2.0",
+		"@atlaskit/docs": "^11.0.0",
+		"@atlaskit/dynamic-table": "^18.2.0",
+		"@atlaskit/lozenge": "^13.0.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/ssr-tests": "^0.2.0",