@atlaskit/table 0.12.2 → 0.12.3

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @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

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/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/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.2",
+	"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,11 +43,12 @@
 	"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": "^27.0.0",
-		"@atlaskit/primitives": "^14.8.0",
-		"@atlaskit/tokens": "^5.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",