@atlaskit/table-tree 9.2.4 → 9.2.6

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/table-tree
 
+## 9.2.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 9.2.5
+
+### Patch Changes
+
+- [`25348ec8a74`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25348ec8a74) - Updated to use spacing and typography tokens. With spacing tokens enabled, padding inside cells has changed slightly from 10px vertical to 8px vertical, and from 25px inline to 24px inline. No visual changes without tokens enabled.
+
 ## 9.2.4
 
 ### Patch Changes

package/dist/cjs/components/cell.js

@@ -29,6 +29,8 @@ 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"];
@@ -63,7 +65,7 @@ var Cell = /*#__PURE__*/function (_Component) {
           props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
       return /*#__PURE__*/_react.default.createElement(_commonCell.default, (0, _extends2.default)({
         role: "gridcell",
-        indent: indentLevel ? "".concat(25 * indentLevel, "px") : undefined,
+        indent: indentLevel ? "calc(".concat(_styled.indentBase, " * ").concat(indentLevel, ")") : undefined,
         width: width,
         className: className
       }, props), /*#__PURE__*/_react.default.createElement(_overflowContainer.default, {

package/dist/cjs/components/header.js

@@ -35,10 +35,10 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var headerStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-  fontSize: 12,
-  fontWeight: 'bold',
+  fontSize: "var(--ds-font-size-075, 12px)",
+  fontWeight: "var(--ds-font-weight-bold, bold)",
   letterSpacing: -0.1,
-  lineHeight: '1.67'
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
 });
 
 var Header = /*#__PURE__*/function (_Component) {

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

@@ -15,16 +15,18 @@ var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
+var _styled = require("./styled");
+
 var _excluded = ["indent", "width"];
 var commonStyles = (0, _react.css)({
   display: 'flex',
   boxSizing: 'border-box',
   minHeight: 40,
-  padding: '10px 25px 10px var(--indent, 25px)',
+  padding: "var(--ds-space-100, 10px)".concat(" ", _styled.indentBase, " ", "var(--ds-space-100, 10px)", " var(--indent, ").concat(_styled.indentBase, ")"),
   position: 'relative',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   color: "var(--ds-text, ".concat(_colors.N800, ")"),
-  lineHeight: '20px'
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
 });
 
 /**

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

@@ -75,12 +75,13 @@ var LoaderItem = /*#__PURE__*/function (_Component) {
       var depth = this.props.depth;
       var phase = this.state.phase;
       return phase === 'loading' ? /*#__PURE__*/_react.default.createElement(_styled.TreeRowContainer, null, /*#__PURE__*/_react.default.createElement(_commonCell.default, {
-        indent: "".concat(25 * depth, "px"),
+        indent: "calc(".concat(_styled.indentBase, " * ").concat(depth, ")"),
         width: "100%"
       }, /*#__PURE__*/_react.default.createElement(_styled.LoaderItemContainer, {
         isRoot: depth === 1
       }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
-        size: "small"
+        size: "small",
+        testId: "table-tree-spinner"
       })))) : null;
     }
   }], [{

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

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconColor = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronIconContainer = exports.ChevronContainer = void 0;
+exports.indentBase = exports.iconColor = exports.TreeRowContainer = exports.LoaderItemContainer = exports.ChevronIconContainer = exports.ChevronContainer = void 0;
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
@@ -18,6 +18,8 @@ var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["isRoot"];
 var iconColor = "var(--ds-text, ".concat(_colors.N800, ")");
 exports.iconColor = iconColor;
+var indentBase = "var(--ds-space-300, 25px)";
+exports.indentBase = indentBase;
 var treeRowContainerStyles = (0, _react.css)({
   display: 'flex',
   borderBottom: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
@@ -37,7 +39,8 @@ var TreeRowContainer = function TreeRowContainer(props) {
 exports.TreeRowContainer = TreeRowContainer;
 var commonChevronContainerStyles = (0, _react.css)({
   display: 'flex',
-  marginLeft: -25,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  marginLeft: "calc(".concat(indentBase, " * -1)"),
   position: 'absolute',
   top: 7,
   alignItems: 'center'
@@ -74,9 +77,11 @@ var ChevronIconContainer = function ChevronIconContainer(props // eslint-disable
 exports.ChevronIconContainer = ChevronIconContainer;
 var loadingItemContainerStyles = (0, _react.css)({
   width: '100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: 5
 });
 var paddingLeftStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingLeft: '50%'
 });
 /**

package/dist/cjs/components/row.js

@@ -44,7 +44,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.2.4";
+var packageVersion = "9.2.6";
 
 var Row = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.2.4",
+	"version": "9.2.6",
 	"sideEffects": false
 }

package/dist/es2019/components/cell.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { Component } 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';
 
 class Cell extends Component {
@@ -16,7 +17,7 @@ class Cell extends Component {
     } = this.props;
     return /*#__PURE__*/React.createElement(CommonCell, _extends({
       role: "gridcell",
-      indent: indentLevel ? `${25 * indentLevel}px` : undefined,
+      indent: indentLevel ? `calc(${indentBase} * ${indentLevel})` : undefined,
       width: width,
       className: className
     }, props), /*#__PURE__*/React.createElement(OverflowContainer, {

package/dist/es2019/components/header.js

@@ -8,10 +8,10 @@ import ColumnCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';
 const headerStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
-  fontSize: 12,
-  fontWeight: 'bold',
+  fontSize: "var(--ds-font-size-075, 12px)",
+  fontWeight: "var(--ds-font-weight-bold, bold)",
   letterSpacing: -0.1,
-  lineHeight: '1.67'
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
 });
 
 class Header extends Component {

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

@@ -3,15 +3,16 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
+import { indentBase } from './styled';
 const commonStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
   minHeight: 40,
-  padding: '10px 25px 10px var(--indent, 25px)',
+  padding: `${"var(--ds-space-100, 10px)"} ${indentBase} ${"var(--ds-space-100, 10px)"} var(--indent, ${indentBase})`,
   position: 'relative',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   color: `var(--ds-text, ${N800})`,
-  lineHeight: '20px'
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
 });
 
 /**

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Component } from 'react';
 import Spinner from '@atlaskit/spinner';
 import CommonCell from './common-cell';
-import { LoaderItemContainer, TreeRowContainer } from './styled';
+import { indentBase, LoaderItemContainer, TreeRowContainer } from './styled';
 export default class LoaderItem extends Component {
   constructor(...args) {
     super(...args);
@@ -40,12 +40,13 @@ export default class LoaderItem extends Component {
       phase
     } = this.state;
     return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
-      indent: `${25 * depth}px`,
+      indent: `calc(${indentBase} * ${depth})`,
       width: "100%"
     }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
       isRoot: depth === 1
     }, /*#__PURE__*/React.createElement(Spinner, {
-      size: "small"
+      size: "small",
+      testId: "table-tree-spinner"
     })))) : null;
   }
 

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

@@ -4,6 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { css, jsx } from '@emotion/react';
 import { N30, N800 } from '@atlaskit/theme/colors';
 export const iconColor = `var(--ds-text, ${N800})`;
+export const indentBase = "var(--ds-space-300, 25px)";
 const treeRowContainerStyles = css({
   display: 'flex',
   borderBottom: `1px solid ${`var(--ds-border, ${N30})`}`
@@ -18,7 +19,8 @@ jsx("div", _extends({
 }, props));
 const commonChevronContainerStyles = css({
   display: 'flex',
-  marginLeft: -25,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  marginLeft: `calc(${indentBase} * -1)`,
   position: 'absolute',
   top: 7,
   alignItems: 'center'
@@ -47,9 +49,11 @@ export const ChevronIconContainer = (props // eslint-disable-next-line @repo/int
 }));
 const loadingItemContainerStyles = css({
   width: '100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: 5
 });
 const paddingLeftStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingLeft: '50%'
 });
 /**

package/dist/es2019/components/row.js

@@ -8,7 +8,7 @@ import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.2.4";
+const packageVersion = "9.2.6";
 
 class Row extends Component {
   constructor(...args) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.2.4",
+	"version": "9.2.6",
 	"sideEffects": false
 }

package/dist/esm/components/cell.js

@@ -14,6 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } 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';
 
 var Cell = /*#__PURE__*/function (_Component) {
@@ -40,7 +41,7 @@ var Cell = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/React.createElement(CommonCell, _extends({
         role: "gridcell",
-        indent: indentLevel ? "".concat(25 * indentLevel, "px") : undefined,
+        indent: indentLevel ? "calc(".concat(indentBase, " * ").concat(indentLevel, ")") : undefined,
         width: width,
         className: className
       }, props), /*#__PURE__*/React.createElement(OverflowContainer, {

package/dist/esm/components/header.js

@@ -17,10 +17,10 @@ import ColumnCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';
 var headerStyles = css({
   color: "var(--ds-text-subtle, ".concat(N300, ")"),
-  fontSize: 12,
-  fontWeight: 'bold',
+  fontSize: "var(--ds-font-size-075, 12px)",
+  fontWeight: "var(--ds-font-weight-bold, bold)",
   letterSpacing: -0.1,
-  lineHeight: '1.67'
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
 });
 
 var Header = /*#__PURE__*/function (_Component) {

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

@@ -5,15 +5,16 @@ var _excluded = ["indent", "width"];
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
+import { indentBase } from './styled';
 var commonStyles = css({
   display: 'flex',
   boxSizing: 'border-box',
   minHeight: 40,
-  padding: '10px 25px 10px var(--indent, 25px)',
+  padding: "var(--ds-space-100, 10px)".concat(" ", indentBase, " ", "var(--ds-space-100, 10px)", " var(--indent, ").concat(indentBase, ")"),
   position: 'relative',
-  alignItems: 'flex-start',
+  alignItems: 'center',
   color: "var(--ds-text, ".concat(N800, ")"),
-  lineHeight: '20px'
+  lineHeight: "var(--ds-font-lineHeight-200, 20px)"
 });
 
 /**

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

@@ -14,7 +14,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import React, { Component } from 'react';
 import Spinner from '@atlaskit/spinner';
 import CommonCell from './common-cell';
-import { LoaderItemContainer, TreeRowContainer } from './styled';
+import { indentBase, LoaderItemContainer, TreeRowContainer } from './styled';
 
 var LoaderItem = /*#__PURE__*/function (_Component) {
   _inherits(LoaderItem, _Component);
@@ -54,12 +54,13 @@ var LoaderItem = /*#__PURE__*/function (_Component) {
       var depth = this.props.depth;
       var phase = this.state.phase;
       return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
-        indent: "".concat(25 * depth, "px"),
+        indent: "calc(".concat(indentBase, " * ").concat(depth, ")"),
         width: "100%"
       }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
         isRoot: depth === 1
       }, /*#__PURE__*/React.createElement(Spinner, {
-        size: "small"
+        size: "small",
+        testId: "table-tree-spinner"
       })))) : null;
     }
   }], [{

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

@@ -6,6 +6,7 @@ var _excluded = ["isRoot"];
 import { css, jsx } from '@emotion/react';
 import { N30, N800 } from '@atlaskit/theme/colors';
 export var iconColor = "var(--ds-text, ".concat(N800, ")");
+export var indentBase = "var(--ds-space-300, 25px)";
 var treeRowContainerStyles = css({
   display: 'flex',
   borderBottom: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
@@ -23,7 +24,8 @@ export var TreeRowContainer = function TreeRowContainer(props) {
 };
 var commonChevronContainerStyles = css({
   display: 'flex',
-  marginLeft: -25,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  marginLeft: "calc(".concat(indentBase, " * -1)"),
   position: 'absolute',
   top: 7,
   alignItems: 'center'
@@ -56,9 +58,11 @@ export var ChevronIconContainer = function ChevronIconContainer(props // eslint-
 };
 var loadingItemContainerStyles = css({
   width: '100%',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: 5
 });
 var paddingLeftStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingLeft: '50%'
 });
 /**

package/dist/esm/components/row.js

@@ -18,7 +18,7 @@ import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.2.4";
+var packageVersion = "9.2.6";
 
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.2.4",
+	"version": "9.2.6",
 	"sideEffects": false
 }

package/dist/types/components/internal/styled.d.ts

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { FC, HTMLAttributes } from 'react';
 export declare const iconColor: "var(--ds-text)";
+export declare const indentBase: "var(--ds-space-300)";
 /**
  * __Tree row container__
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.2.4",
+  "version": "9.2.6",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,7 +33,7 @@
     "@atlaskit/icon": "^21.11.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.11.0",
+    "@atlaskit/tokens": "^0.12.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",