@atlaskit/table-tree 11.2.1 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/table-tree
 
+## 12.0.0
+
+### Major Changes
+
+- [#135210](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135210)
+  [`9869db258a55a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9869db258a55a) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+  Please note, in order to use this version of `@atlaskit/table-tree`, you will need to ensure that
+  your bundler is configured to handle `.css` imports correctly. Most bundlers come with built-in
+  support for `.css` imports, so you may not need to do anything. If you are using a different
+  bundler, please refer to the documentation for that bundler to understand how to handle `.css`
+  imports.
+
+  For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.2.2
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.2.1
 
 ### Patch Changes

package/dist/cjs/components/cell.js

@@ -10,7 +10,6 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _commonCell = _interopRequireDefault(require("./internal/common-cell"));
 var _overflowContainer = _interopRequireDefault(require("./internal/overflow-container"));
-var _styled = require("./internal/styled");
 var _withColumnWidth = _interopRequireDefault(require("./internal/with-column-width"));
 var _excluded = ["children", "singleLine", "indentLevel", "width", "className"];
 var CellComponent = function CellComponent(_ref) {
@@ -21,7 +20,7 @@ var CellComponent = function CellComponent(_ref) {
     className = _ref.className,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_commonCell.default, (0, _extends2.default)({
-    indent: indentLevel ? "calc(".concat(_styled.indentBase, " * ").concat(indentLevel, ")") : undefined,
+    indent: indentLevel ? "calc(".concat("var(--ds-space-300, 25px)", " * ", indentLevel, ")") : undefined,
     width: width
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
     ,

package/dist/cjs/components/header.compiled.css

@@ -0,0 +1,3 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._syaz1vvm{color:var(--_bbz764)}

package/dist/cjs/components/header.js

@@ -1,26 +1,21 @@
+/* header.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
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
+require("./header.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _colors = require("@atlaskit/theme/colors");
 var _commonCell = _interopRequireDefault(require("./internal/common-cell"));
 var _withColumnWidth = _interopRequireDefault(require("./internal/with-column-width"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var headerStyles = (0, _react.css)({
-  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-bold, 700)"
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var headerStyles = null;
 
 /**
  * This is hard-coded here because our actual <Header /> has no typings
@@ -40,12 +35,15 @@ var HeaderComponent = function HeaderComponent(_ref) {
     role = _ref$role === void 0 ? 'columnheader' : _ref$role;
   // TODO: Determine whether proper `th` elements can be used instead of
   // roles (DSP-11588)
-  return (0, _react.jsx)(_commonCell.default, {
-    css: headerStyles,
+  return /*#__PURE__*/React.createElement(_commonCell.default, {
     role: role,
     width: width,
     id: id,
-    onClick: onClick
+    onClick: onClick,
+    className: (0, _runtime.ax)(["_11c8dcr7 _syaz1vvm _k48pmoej"]),
+    style: {
+      "--_bbz764": (0, _runtime.ix)("var(--ds-text-subtle, ".concat(_colors.N300, ")"))
+    }
   }, children);
 };
 var Header = (0, _withColumnWidth.default)(HeaderComponent);

package/dist/cjs/components/headers.compiled.css

@@ -0,0 +1,2 @@
+._179r1avd{border-block-end:var(--_zailfs)}
+._1e0c1txw{display:flex}

package/dist/cjs/components/headers.js

@@ -1,23 +1,20 @@
+/* headers.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+require("./headers.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/react/no-clone-element */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var containerStyles = (0, _react2.css)({
-  display: 'flex',
-  borderBlockEnd: "solid 2px ".concat("var(--ds-border, #dfe1e6)")
-});
+var containerStyles = null;
 /**
  * __Headers__
  *
@@ -28,18 +25,17 @@ var containerStyles = (0, _react2.css)({
  */
 var Headers = function Headers(_ref) {
   var children = _ref.children;
-  return (
-    // TODO: Determine whether proper `tr` elements can be used instead of
-    // roles (DSP-11588)
-    (0, _react2.jsx)("div", {
-      css: containerStyles,
-      role: "row"
-    }, _react.Children.map(children, function (header, index) {
-      return /*#__PURE__*/(0, _react.cloneElement)(header, {
-        key: index,
-        columnIndex: index
-      });
-    }))
-  );
+  return /*#__PURE__*/React.createElement("div", {
+    role: "row",
+    className: (0, _runtime.ax)(["_179r1avd _1e0c1txw"]),
+    style: {
+      "--_zailfs": (0, _runtime.ix)("solid 2px ".concat("var(--ds-border, #dfe1e6)"))
+    }
+  }, _react.Children.map(children, function (header, index) {
+    return /*#__PURE__*/(0, _react.cloneElement)(header, {
+      key: index,
+      columnIndex: index
+    });
+  }));
 };
 var _default = exports.default = Headers;

package/dist/cjs/components/internal/common-cell.compiled.css

@@ -0,0 +1,10 @@
+._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1yt41p08{padding:var(--_1s9siax)}
+._1e0c1txw{display:flex}
+._1nmz1hna{word-break:break-word}
+._1tke1ylp{min-height:40px}
+._4cvr1h6o{align-items:center}
+._ct361wug{-ms-hyphens:auto;hyphens:auto}
+._kqswh2mm{position:relative}
+._syaz1o8f{color:var(--_ggxzyp)}
+._vchhusvi{box-sizing:border-box}

package/dist/cjs/components/internal/common-cell.js

@@ -1,34 +1,25 @@
+/* common-cell.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
 });
 exports.default = void 0;
+require("./common-cell.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
-var _styled = require("./styled");
 var _excluded = ["indent", "width"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var commonStyles = (0, _react.css)({
-  display: 'flex',
-  boxSizing: 'border-box',
-  minHeight: 40,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: "var(--ds-space-100, 10px)".concat(" ", _styled.indentBase, " ", "var(--ds-space-100, 10px)", " var(--indent, ").concat(_styled.indentBase, ")"),
-  position: 'relative',
-  alignItems: 'center',
-  color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  hyphens: 'auto',
-  wordBreak: 'break-word'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var commonStyles = null;
 /**
  * __Common cell__
  */
@@ -36,16 +27,18 @@ var CommonCell = function CommonCell(_ref) {
   var indent = _ref.indent,
     width = _ref.width,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("div", (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     role: "gridcell"
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props, {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    style: {
+    className: (0, _runtime.ax)(["_1yt41p08 _11c82smr _1e0c1txw _vchhusvi _1tke1ylp _kqswh2mm _4cvr1h6o _syaz1o8f _ct361wug _1nmz1hna"]),
+    style: _objectSpread(_objectSpread({}, {
       '--indent': indent,
       width: width
-    },
-    css: commonStyles
+    }), {}, {
+      "--_1s9siax": (0, _runtime.ix)("var(--ds-space-100, 10px)".concat(" ", "var(--ds-space-300, 25px)", " ", "var(--ds-space-100, 10px)", " var(--indent, ", "var(--ds-space-300, 25px)", ")")),
+      "--_ggxzyp": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N800, ")"))
+    })
   }));
 };
 var _default = exports.default = CommonCell;

package/dist/cjs/components/internal/item.js

@@ -1,22 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 var _toItemId = _interopRequireDefault(require("../../utils/to-item-id"));
 var _items = _interopRequireDefault(require("./items"));
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/react/no-clone-element */
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
 /**
  * __Item__
  * Internal item component.
@@ -40,9 +36,9 @@ function Item(_ref) {
     data: data,
     loadingLabel: loadingLabel,
     renderChildren: function renderChildren() {
-      return (0, _react2.jsx)("div", {
+      return /*#__PURE__*/_react.default.createElement("div", {
         id: !!itemId ? (0, _toItemId.default)(itemId) : undefined
-      }, (0, _react2.jsx)(_items.default, {
+      }, /*#__PURE__*/_react.default.createElement(_items.default, {
         depth: depth,
         items: items,
         render: render,

package/dist/cjs/components/internal/loader-item.js

@@ -34,7 +34,7 @@ var LoaderItem = function LoaderItem(_ref) {
     }
   }, [isCompleting, onComplete, phase]);
   return phase === 'loading' ? /*#__PURE__*/_react.default.createElement(_styled.TreeRowContainer, null, /*#__PURE__*/_react.default.createElement(_commonCell.default, {
-    indent: "calc(".concat(_styled.indentBase, " * ").concat(depth, ")"),
+    indent: "calc(".concat("var(--ds-space-300, 25px)", " * ", depth, ")"),
     width: "100%"
   }, /*#__PURE__*/_react.default.createElement(_styled.LoaderItemContainer, {
     isRoot: depth === 1

package/dist/cjs/components/internal/overflow-container.compiled.css

@@ -0,0 +1,4 @@
+._18m915vq{overflow-y:hidden}
+._1bto1l2s{text-overflow:ellipsis}
+._1reo15vq{overflow-x:hidden}
+._o5721q9c{white-space:nowrap}

package/dist/cjs/components/internal/overflow-container.js

@@ -1,24 +1,21 @@
+/* overflow-container.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
 });
 exports.default = void 0;
+require("./overflow-container.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("@emotion/react");
 var _excluded = ["isSingleLine"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var overflowContainerStyles = (0, _react.css)({
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var overflowContainerStyles = null;
 
 /**
  * __Overflow container__
@@ -26,9 +23,8 @@ var overflowContainerStyles = (0, _react.css)({
 var OverflowContainer = function OverflowContainer(_ref) {
   var isSingleLine = _ref.isSingleLine,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("span", (0, _extends2.default)({
-    css: isSingleLine && overflowContainerStyles
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)([isSingleLine && "_1reo15vq _18m915vq _1bto1l2s _o5721q9c"])
+  }));
 };
 var _default = exports.default = OverflowContainer;

package/dist/cjs/components/internal/styled.compiled.css

@@ -0,0 +1,8 @@
+._179rskuj{border-block-end:var(--_1prvtx9)}
+._1bsb1osq{width:100%}
+._1e0c1txw{display:flex}
+._1pfhj39m{margin-block-start:-3px}
+._4cvr1h6o{align-items:center}
+._ahbq1dum{margin-inline-start:var(--_1izje1g)}
+._bozg1ssb{padding-inline-start:50%}
+._kqswstnw{position:absolute}

package/dist/cjs/components/internal/styled.js

@@ -1,66 +1,53 @@
+/* styled.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
 });
-exports.indentBase = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronContainer = void 0;
+exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronContainer = void 0;
+require("./styled.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["isRoot"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var indentBase = exports.indentBase = "var(--ds-space-300, 25px)";
-var treeRowContainerStyles = (0, _react.css)({
-  display: 'flex',
-  borderBlockEnd: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var treeRowContainerStyles = null;
 
 /**
  * __Tree row container__
  */
 var TreeRowContainer = exports.TreeRowContainer = function TreeRowContainer(props) {
-  return (0, _react.jsx)("div", (0, _extends2.default)({
-    role: "row",
-    css: treeRowContainerStyles
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    role: "row"
+  }, props, {
+    className: (0, _runtime.ax)(["_179rskuj _1e0c1txw"]),
+    style: {
+      "--_1prvtx9": (0, _runtime.ix)("1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")")))
+    }
+  }));
 };
-var commonCellElementStyles = (0, _react.css)({
-  display: 'flex',
-  position: 'absolute',
-  alignItems: 'center',
-  // indentBase is re-used elsewhere and is primarily used as positive value; we need to negate it here
-  marginInlineStart: "calc(".concat(indentBase, " * -1)")
-});
-var commonChevronContainerStyles = (0, _react.css)({
-  // Aligns position:absolute chevron button with the adjacent text. Any future visual breaking changes
-  // should consider setting this to `-2px` for better alignment, or refactor completely
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  marginBlockStart: -3
-});
+var commonCellElementStyles = null;
+var commonChevronContainerStyles = null;
 /**
  * __Chevron container__
  *
  * A wrapper container around the expand table tree button.
  */
 var ChevronContainer = exports.ChevronContainer = function ChevronContainer(props) {
-  return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
-    css: [commonCellElementStyles, commonChevronContainerStyles]
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1e0c1txw _kqswstnw _4cvr1h6o _ahbq1dum", "_1pfhj39m"]),
+    style: {
+      "--_1izje1g": (0, _runtime.ix)("calc(".concat("var(--ds-space-300, 25px)", " * -1)"))
+    }
   }));
 };
-var loadingItemContainerStyles = (0, _react.css)({
-  width: '100%'
-});
-var paddingLeftStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-space
-  paddingInlineStart: '50%'
-});
+var loadingItemContainerStyles = null;
+var paddingLeftStyles = null;
 /**
  * __Loader item container__
  *
@@ -69,8 +56,10 @@ var paddingLeftStyles = (0, _react.css)({
 var LoaderItemContainer = exports.LoaderItemContainer = function LoaderItemContainer(_ref) {
   var isRoot = _ref.isRoot,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _react.jsx)("span", (0, _extends2.default)({
-    css: [commonCellElementStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles]
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
+  return /*#__PURE__*/React.createElement("span", (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_1e0c1txw _kqswstnw _4cvr1h6o _ahbq1dum", "_1bsb1osq", isRoot && "_bozg1ssb"]),
+    style: {
+      "--_1izje1g": (0, _runtime.ix)("calc(".concat("var(--ds-space-300, 25px)", " * -1)"))
+    }
+  }));
 };

package/dist/cjs/components/row.compiled.css

@@ -0,0 +1 @@
+._80omtlke{cursor:pointer}

package/dist/cjs/components/row.js

@@ -1,3 +1,4 @@
+/* row.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,25 +7,17 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./row.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
-var _react2 = require("@emotion/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _toItemId = _interopRequireDefault(require("../utils/to-item-id"));
 var _chevron = _interopRequireDefault(require("./internal/chevron"));
 var _styled = require("./internal/styled");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var treeRowClickableStyles = (0, _react2.css)({
-  cursor: 'pointer'
-});
+var treeRowClickableStyles = null;
 var getExtendedLabel = function getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel) {
   /**
    * First condition - when we pass data via `items` property in `<TableTree />`
@@ -69,7 +62,7 @@ function Row(_ref) {
     actionSubject: 'tableTree',
     componentName: 'row',
     packageName: "@atlaskit/table-tree",
-    packageVersion: "11.2.1"
+    packageVersion: "12.0.0"
   });
   var onCollapse = (0, _analyticsNext.usePlatformLeafEventHandler)({
     fn: function fn(value) {
@@ -79,7 +72,7 @@ function Row(_ref) {
     actionSubject: 'tableTree',
     componentName: 'row',
     packageName: "@atlaskit/table-tree",
-    packageVersion: "11.2.1"
+    packageVersion: "12.0.0"
   });
 
   /**
@@ -118,7 +111,7 @@ function Row(_ref) {
     var cellContent = cell.props.children || [];
     var extendedLabel = getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
     if (isFirstCell && hasChildren) {
-      cellContent = [(0, _react2.jsx)(_chevron.default, {
+      cellContent = [/*#__PURE__*/_react.default.createElement(_chevron.default, {
         key: "chevron",
         expandLabel: expandLabel,
         collapseLabel: collapseLabel,
@@ -136,11 +129,11 @@ function Row(_ref) {
       indentLevel: indentLevel
     }, cellContent);
   };
-  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_styled.TreeRowContainer, {
-    css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
+  return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_styled.TreeRowContainer, {
     onClick: hasChildren && shouldExpandOnClick ? onClickHandler : undefined,
     "aria-expanded": hasChildren ? isExpandedState : undefined,
-    "aria-level": depth ? depth : undefined
+    "aria-level": depth ? depth : undefined,
+    className: (0, _runtime.ax)([hasChildren && shouldExpandOnClick && "_80omtlke"])
   }, _react.default.Children.map(children, function (cell, index) {
     return renderCell(cell, index);
   })), hasChildren && (isProvidedExpanded !== undefined ? isProvidedExpanded : isExpandedState) && renderChildren && renderChildren());

package/dist/es2019/components/cell.js

@@ -2,7 +2,6 @@ import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import CommonCell from './internal/common-cell';
 import OverflowContainer from './internal/overflow-container';
-import { indentBase } from './internal/styled';
 import withColumnWidth from './internal/with-column-width';
 const CellComponent = ({
   children,
@@ -12,7 +11,7 @@ const CellComponent = ({
   className,
   ...props
 }) => /*#__PURE__*/React.createElement(CommonCell, _extends({
-  indent: indentLevel ? `calc(${indentBase} * ${indentLevel})` : undefined,
+  indent: indentLevel ? `calc(${"var(--ds-space-300, 25px)"} * ${indentLevel})` : undefined,
   width: width
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
   ,

package/dist/es2019/components/header.compiled.css

@@ -0,0 +1,3 @@
+._11c8dcr7{font:var(--ds-font-body-UNSAFE_small,normal 400 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._k48pmoej{font-weight:var(--ds-font-weight-bold,700)}
+._syaz1n3s{color:var(--ds-text-subtle,#5e6c84)}

package/dist/es2019/components/header.js

@@ -1,18 +1,11 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* header.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./header.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { N300 } from '@atlaskit/theme/colors';
 import CommonCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';
-const headerStyles = css({
-  color: `var(--ds-text-subtle, ${N300})`,
-  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)",
-  fontWeight: "var(--ds-font-weight-bold, 700)"
-});
+const headerStyles = null;
 
 /**
  * This is hard-coded here because our actual <Header /> has no typings
@@ -32,12 +25,12 @@ const HeaderComponent = ({
 }) => {
   // TODO: Determine whether proper `th` elements can be used instead of
   // roles (DSP-11588)
-  return jsx(CommonCell, {
-    css: headerStyles,
+  return /*#__PURE__*/React.createElement(CommonCell, {
     role: role,
     width: width,
     id: id,
-    onClick: onClick
+    onClick: onClick,
+    className: ax(["_11c8dcr7 _syaz1n3s _k48pmoej"])
   }, children);
 };
 const Header = withColumnWidth(HeaderComponent);

package/dist/es2019/components/headers.compiled.css

@@ -0,0 +1,2 @@
+._179r17qy{border-block-end:solid 2px var(--ds-border,#dfe1e6)}
+._1e0c1txw{display:flex}