@atlaskit/table-tree 9.6.8 → 9.6.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/table-tree
 
+## 9.6.10
+
+### Patch Changes
+
+- [#62386](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/62386) [`ac40d033cc90`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ac40d033cc90) - [ux] Remove aria-busy and add more table grid semantics
+
+## 9.6.9
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.6.8
 
 ### Patch Changes

package/dist/cjs/components/cell.js

@@ -40,19 +40,13 @@ var Cell = /*#__PURE__*/function (_Component) {
         width = _this$props.width,
         className = _this$props.className,
         props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return (
-        /*#__PURE__*/
-        // TODO: Determine whether proper `td` elements can be used instead of
-        // roles (DSP-11588)
-        _react.default.createElement(_commonCell.default, (0, _extends2.default)({
-          role: "gridcell",
-          indent: indentLevel ? "calc(".concat(_styled.indentBase, " * ").concat(indentLevel, ")") : undefined,
-          width: width,
-          className: className
-        }, props), /*#__PURE__*/_react.default.createElement(_overflowContainer.default, {
-          isSingleLine: singleLine
-        }, children))
-      );
+      return /*#__PURE__*/_react.default.createElement(_commonCell.default, (0, _extends2.default)({
+        indent: indentLevel ? "calc(".concat(_styled.indentBase, " * ").concat(indentLevel, ")") : undefined,
+        width: width,
+        className: className
+      }, props), /*#__PURE__*/_react.default.createElement(_overflowContainer.default, {
+        isSingleLine: singleLine
+      }, children));
     }
   }]);
   return Cell;

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

@@ -29,7 +29,10 @@ 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)({}, props, {
+  return (0, _react.jsx)("div", (0, _extends2.default)({
+    role: "gridcell"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props, {
     style: {
       '--indent': indent,
       width: width

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

@@ -31,7 +31,8 @@ var Item = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         depth = _this$props.depth,
         data = _this$props.data,
-        render = _this$props.render;
+        render = _this$props.render,
+        loadingLabel = _this$props.loadingLabel;
       var renderedRow = render(data);
       if (!renderedRow) {
         return null;
@@ -42,6 +43,7 @@ var Item = exports.default = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/(0, _react.cloneElement)(renderedRow, {
         depth: depth,
         data: data,
+        loadingLabel: loadingLabel,
         renderChildren: function renderChildren() {
           return (0, _react2.jsx)("div", {
             id: (0, _toItemId.default)(itemId)
@@ -49,7 +51,8 @@ var Item = exports.default = /*#__PURE__*/function (_Component) {
             parentData: data,
             depth: depth,
             items: items,
-            render: render
+            render: render,
+            loadingLabel: loadingLabel
           }));
         }
       });

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

@@ -45,11 +45,13 @@ var Items = exports.default = /*#__PURE__*/function (_Component) {
     value: function renderLoader() {
       var _this$props = this.props,
         depth = _this$props.depth,
-        items = _this$props.items;
+        items = _this$props.items,
+        loadingLabel = _this$props.loadingLabel;
       return /*#__PURE__*/_react.default.createElement(_loaderItem.default, {
         isCompleting: !!(items && items.length),
         onComplete: this.handleLoaderComplete,
-        depth: depth + 1
+        depth: depth + 1,
+        loadingLabel: loadingLabel
       });
     }
   }, {
@@ -58,6 +60,7 @@ var Items = exports.default = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         render = _this$props2.render,
         items = _this$props2.items,
+        loadingLabel = _this$props2.loadingLabel,
         _this$props2$depth = _this$props2.depth,
         depth = _this$props2$depth === void 0 ? 0 : _this$props2$depth;
       return items && items.map(function (itemData, index) {
@@ -65,7 +68,8 @@ var Items = exports.default = /*#__PURE__*/function (_Component) {
           data: itemData,
           depth: depth + 1,
           key: itemData && itemData.id || index,
-          render: render
+          render: render,
+          loadingLabel: loadingLabel
         });
       });
     }
@@ -73,11 +77,7 @@ var Items = exports.default = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var isLoaderShown = this.state.isLoaderShown;
-      var busyAttrs = isLoaderShown ? {
-        'aria-busy': true,
-        'aria-live': 'polite'
-      } : {};
-      return /*#__PURE__*/_react.default.createElement("div", busyAttrs, isLoaderShown ? this.renderLoader() : this.renderItems());
+      return isLoaderShown ? this.renderLoader() : this.renderItems();
     }
   }], [{
     key: "getDerivedStateFromProps",

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

@@ -48,7 +48,9 @@ var LoaderItem = exports.default = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var depth = this.props.depth;
+      var _this$props = this.props,
+        depth = _this$props.depth,
+        loadingLabel = _this$props.loadingLabel;
       var phase = this.state.phase;
       return phase === 'loading' ? /*#__PURE__*/_react.default.createElement(_styled.TreeRowContainer, null, /*#__PURE__*/_react.default.createElement(_commonCell.default, {
         indent: "calc(".concat(_styled.indentBase, " * ").concat(depth, ")"),
@@ -57,7 +59,8 @@ var LoaderItem = exports.default = /*#__PURE__*/function (_Component) {
         isRoot: depth === 1
       }, /*#__PURE__*/_react.default.createElement(_spinner.default, {
         size: "small",
-        testId: "table-tree-spinner"
+        testId: "table-tree-spinner",
+        label: loadingLabel
       })))) : null;
     }
   }], [{

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

@@ -15,7 +15,7 @@ var iconColor = exports.iconColor = "var(--ds-text, ".concat(_colors.N800, ")");
 var indentBase = exports.indentBase = "var(--ds-space-300, 25px)";
 var treeRowContainerStyles = (0, _react.css)({
   display: 'flex',
-  borderBottom: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
+  borderBlockEnd: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
 });
 
 /**
@@ -25,18 +25,17 @@ var TreeRowContainer = exports.TreeRowContainer = function TreeRowContainer(prop
   return (
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     (0, _react.jsx)("div", (0, _extends2.default)({
+      role: "row",
       css: treeRowContainerStyles
     }, props))
   );
 };
 var commonChevronContainerStyles = (0, _react.css)({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginLeft: "calc(".concat(indentBase, " * -1)"),
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 7,
-  alignItems: 'center'
+  alignItems: 'center',
+  insetBlockStart: 7,
+  marginInlineStart: "calc(".concat(indentBase, " * -1)")
 });
 /**
  * __Chevron container__
@@ -53,7 +52,7 @@ var ChevronContainer = exports.ChevronContainer = function ChevronContainer(prop
 var chevronIconContainerStyles = (0, _react.css)({
   position: 'relative',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 1
+  insetBlockStart: 1
 });
 
 /**
@@ -71,11 +70,11 @@ var ChevronIconContainer = exports.ChevronIconContainer = function ChevronIconCo
 var loadingItemContainerStyles = (0, _react.css)({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: 5
+  paddingBlockStart: 5
 });
 var paddingLeftStyles = (0, _react.css)({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingLeft: '50%'
+  paddingInlineStart: '50%'
 });
 /**
  * __Loader item container__

package/dist/cjs/components/row.js

@@ -28,7 +28,7 @@ var treeRowClickableStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.6.8";
+var packageVersion = "9.6.10";
 var Row = exports.RowWithoutAnalytics = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
   var _super = _createSuper(Row);
@@ -156,7 +156,6 @@ var Row = exports.RowWithoutAnalytics = /*#__PURE__*/function (_Component) {
         ariaAttrs['aria-level'] = depth;
       }
       return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_styled.TreeRowContainer, (0, _extends2.default)({
-        role: "row",
         css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
         onClick: hasChildren && shouldExpandOnClick ? this.onClickHandler : undefined
       }, ariaAttrs), _react.default.Children.map(this.props.children, function (cell, index) {

package/dist/cjs/components/rows.js

@@ -29,9 +29,14 @@ var Rows = exports.default = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         items = _this$props.items,
-        render = _this$props.render;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_items.default, {
+        render = _this$props.render,
+        _this$props$loadingLa = _this$props.loadingLabel,
+        loadingLabel = _this$props$loadingLa === void 0 ? 'Loading' : _this$props$loadingLa;
+      return /*#__PURE__*/_react.default.createElement("div", {
+        role: "rowgroup"
+      }, /*#__PURE__*/_react.default.createElement(_items.default, {
         items: items,
+        loadingLabel: loadingLabel,
         render: render
       }));
     }

package/dist/es2019/components/cell.js

@@ -14,19 +14,13 @@ class Cell extends Component {
       className,
       ...props
     } = this.props;
-    return (
-      /*#__PURE__*/
-      // TODO: Determine whether proper `td` elements can be used instead of
-      // roles (DSP-11588)
-      React.createElement(CommonCell, _extends({
-        role: "gridcell",
-        indent: indentLevel ? `calc(${indentBase} * ${indentLevel})` : undefined,
-        width: width,
-        className: className
-      }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
-        isSingleLine: singleLine
-      }, children))
-    );
+    return /*#__PURE__*/React.createElement(CommonCell, _extends({
+      indent: indentLevel ? `calc(${indentBase} * ${indentLevel})` : undefined,
+      width: width,
+      className: className
+    }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
+      isSingleLine: singleLine
+    }, children));
   }
 }
 export default withColumnWidth(Cell);

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

@@ -21,7 +21,10 @@ const CommonCell = ({
   indent,
   width,
   ...props
-}) => jsx("div", _extends({}, props, {
+}) => jsx("div", _extends({
+  role: "gridcell"
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props, {
   style: {
     '--indent': indent,
     width

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

@@ -11,7 +11,8 @@ export default class Item extends Component {
     const {
       depth,
       data,
-      render
+      render,
+      loadingLabel
     } = this.props;
     const renderedRow = render(data);
     if (!renderedRow) {
@@ -24,13 +25,15 @@ export default class Item extends Component {
     return /*#__PURE__*/cloneElement(renderedRow, {
       depth,
       data,
+      loadingLabel,
       renderChildren: () => jsx("div", {
         id: toItemId(itemId)
       }, jsx(Items, {
         parentData: data,
         depth: depth,
         items: items,
-        render: render
+        render: render,
+        loadingLabel: loadingLabel
       }))
     });
   }

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

@@ -26,36 +26,36 @@ export default class Items extends Component {
   renderLoader() {
     const {
       depth,
-      items
+      items,
+      loadingLabel
     } = this.props;
     return /*#__PURE__*/React.createElement(LoaderItem, {
       isCompleting: !!(items && items.length),
       onComplete: this.handleLoaderComplete,
-      depth: depth + 1
+      depth: depth + 1,
+      loadingLabel: loadingLabel
     });
   }
   renderItems() {
     const {
       render,
       items,
+      loadingLabel,
       depth = 0
     } = this.props;
     return items && items.map((itemData, index) => /*#__PURE__*/React.createElement(Item, {
       data: itemData,
       depth: depth + 1,
       key: itemData && itemData.id || index,
-      render: render
+      render: render,
+      loadingLabel: loadingLabel
     }));
   }
   render() {
     const {
       isLoaderShown
     } = this.state;
-    const busyAttrs = isLoaderShown ? {
-      'aria-busy': true,
-      'aria-live': 'polite'
-    } : {};
-    return /*#__PURE__*/React.createElement("div", busyAttrs, isLoaderShown ? this.renderLoader() : this.renderItems());
+    return isLoaderShown ? this.renderLoader() : this.renderItems();
   }
 }
 _defineProperty(Items, "defaultProps", {

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

@@ -28,7 +28,8 @@ export default class LoaderItem extends Component {
   }
   render() {
     const {
-      depth
+      depth,
+      loadingLabel
     } = this.props;
     const {
       phase
@@ -40,7 +41,8 @@ export default class LoaderItem extends Component {
       isRoot: depth === 1
     }, /*#__PURE__*/React.createElement(Spinner, {
       size: "small",
-      testId: "table-tree-spinner"
+      testId: "table-tree-spinner",
+      label: loadingLabel
     })))) : null;
   }
 }

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

@@ -7,7 +7,7 @@ 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})`}`
+  borderBlockEnd: `1px solid ${`var(--ds-border, ${N30})`}`
 });
 
 /**
@@ -16,16 +16,15 @@ const treeRowContainerStyles = css({
 export const TreeRowContainer = props =>
 // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 jsx("div", _extends({
+  role: "row",
   css: treeRowContainerStyles
 }, props));
 const commonChevronContainerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginLeft: `calc(${indentBase} * -1)`,
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 7,
-  alignItems: 'center'
+  alignItems: 'center',
+  insetBlockStart: 7,
+  marginInlineStart: `calc(${indentBase} * -1)`
 });
 /**
  * __Chevron container__
@@ -40,7 +39,7 @@ export const ChevronContainer = (props
 const chevronIconContainerStyles = css({
   position: 'relative',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 1
+  insetBlockStart: 1
 });
 
 /**
@@ -56,11 +55,11 @@ export const ChevronIconContainer = (props
 const loadingItemContainerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: 5
+  paddingBlockStart: 5
 });
 const paddingLeftStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingLeft: '50%'
+  paddingInlineStart: '50%'
 });
 /**
  * __Loader item container__

package/dist/es2019/components/row.js

@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.6.8";
+const packageVersion = "9.6.10";
 class Row extends Component {
   constructor(...args) {
     super(...args);
@@ -131,7 +131,6 @@ class Row extends Component {
       ariaAttrs['aria-level'] = depth;
     }
     return jsx(Fragment, null, jsx(TreeRowContainer, _extends({
-      role: "row",
       css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
       onClick: hasChildren && shouldExpandOnClick ? this.onClickHandler : undefined
     }, ariaAttrs), React.Children.map(this.props.children, (cell, index) => this.renderCell(cell, index))), hasChildren && isExpanded && renderChildren && renderChildren());

package/dist/es2019/components/rows.js

@@ -4,10 +4,14 @@ export default class Rows extends Component {
   render() {
     const {
       items,
-      render
+      render,
+      loadingLabel = 'Loading'
     } = this.props;
-    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Items, {
+    return /*#__PURE__*/React.createElement("div", {
+      role: "rowgroup"
+    }, /*#__PURE__*/React.createElement(Items, {
       items: items,
+      loadingLabel: loadingLabel,
       render: render
     }));
   }

package/dist/esm/components/cell.js

@@ -30,19 +30,13 @@ var Cell = /*#__PURE__*/function (_Component) {
         width = _this$props.width,
         className = _this$props.className,
         props = _objectWithoutProperties(_this$props, _excluded);
-      return (
-        /*#__PURE__*/
-        // TODO: Determine whether proper `td` elements can be used instead of
-        // roles (DSP-11588)
-        React.createElement(CommonCell, _extends({
-          role: "gridcell",
-          indent: indentLevel ? "calc(".concat(indentBase, " * ").concat(indentLevel, ")") : undefined,
-          width: width,
-          className: className
-        }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
-          isSingleLine: singleLine
-        }, children))
-      );
+      return /*#__PURE__*/React.createElement(CommonCell, _extends({
+        indent: indentLevel ? "calc(".concat(indentBase, " * ").concat(indentLevel, ")") : undefined,
+        width: width,
+        className: className
+      }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
+        isSingleLine: singleLine
+      }, children));
     }
   }]);
   return Cell;

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

@@ -23,7 +23,10 @@ var CommonCell = function CommonCell(_ref) {
   var indent = _ref.indent,
     width = _ref.width,
     props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("div", _extends({}, props, {
+  return jsx("div", _extends({
+    role: "gridcell"
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  }, props, {
     style: {
       '--indent': indent,
       width: width

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

@@ -26,7 +26,8 @@ var Item = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         depth = _this$props.depth,
         data = _this$props.data,
-        render = _this$props.render;
+        render = _this$props.render,
+        loadingLabel = _this$props.loadingLabel;
       var renderedRow = render(data);
       if (!renderedRow) {
         return null;
@@ -37,6 +38,7 @@ var Item = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/cloneElement(renderedRow, {
         depth: depth,
         data: data,
+        loadingLabel: loadingLabel,
         renderChildren: function renderChildren() {
           return jsx("div", {
             id: toItemId(itemId)
@@ -44,7 +46,8 @@ var Item = /*#__PURE__*/function (_Component) {
             parentData: data,
             depth: depth,
             items: items,
-            render: render
+            render: render,
+            loadingLabel: loadingLabel
           }));
         }
       });

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

@@ -36,11 +36,13 @@ var Items = /*#__PURE__*/function (_Component) {
     value: function renderLoader() {
       var _this$props = this.props,
         depth = _this$props.depth,
-        items = _this$props.items;
+        items = _this$props.items,
+        loadingLabel = _this$props.loadingLabel;
       return /*#__PURE__*/React.createElement(LoaderItem, {
         isCompleting: !!(items && items.length),
         onComplete: this.handleLoaderComplete,
-        depth: depth + 1
+        depth: depth + 1,
+        loadingLabel: loadingLabel
       });
     }
   }, {
@@ -49,6 +51,7 @@ var Items = /*#__PURE__*/function (_Component) {
       var _this$props2 = this.props,
         render = _this$props2.render,
         items = _this$props2.items,
+        loadingLabel = _this$props2.loadingLabel,
         _this$props2$depth = _this$props2.depth,
         depth = _this$props2$depth === void 0 ? 0 : _this$props2$depth;
       return items && items.map(function (itemData, index) {
@@ -56,7 +59,8 @@ var Items = /*#__PURE__*/function (_Component) {
           data: itemData,
           depth: depth + 1,
           key: itemData && itemData.id || index,
-          render: render
+          render: render,
+          loadingLabel: loadingLabel
         });
       });
     }
@@ -64,11 +68,7 @@ var Items = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var isLoaderShown = this.state.isLoaderShown;
-      var busyAttrs = isLoaderShown ? {
-        'aria-busy': true,
-        'aria-live': 'polite'
-      } : {};
-      return /*#__PURE__*/React.createElement("div", busyAttrs, isLoaderShown ? this.renderLoader() : this.renderItems());
+      return isLoaderShown ? this.renderLoader() : this.renderItems();
     }
   }], [{
     key: "getDerivedStateFromProps",

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

@@ -39,7 +39,9 @@ var LoaderItem = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var depth = this.props.depth;
+      var _this$props = this.props,
+        depth = _this$props.depth,
+        loadingLabel = _this$props.loadingLabel;
       var phase = this.state.phase;
       return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
         indent: "calc(".concat(indentBase, " * ").concat(depth, ")"),
@@ -48,7 +50,8 @@ var LoaderItem = /*#__PURE__*/function (_Component) {
         isRoot: depth === 1
       }, /*#__PURE__*/React.createElement(Spinner, {
         size: "small",
-        testId: "table-tree-spinner"
+        testId: "table-tree-spinner",
+        label: loadingLabel
       })))) : null;
     }
   }], [{

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

@@ -9,7 +9,7 @@ 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, ")"))
+  borderBlockEnd: "1px solid ".concat("var(--ds-border, ".concat(N30, ")"))
 });
 
 /**
@@ -19,18 +19,17 @@ export var TreeRowContainer = function TreeRowContainer(props) {
   return (
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     jsx("div", _extends({
+      role: "row",
       css: treeRowContainerStyles
     }, props))
   );
 };
 var commonChevronContainerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginLeft: "calc(".concat(indentBase, " * -1)"),
   position: 'absolute',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 7,
-  alignItems: 'center'
+  alignItems: 'center',
+  insetBlockStart: 7,
+  marginInlineStart: "calc(".concat(indentBase, " * -1)")
 });
 /**
  * __Chevron container__
@@ -47,7 +46,7 @@ export var ChevronContainer = function ChevronContainer(props
 var chevronIconContainerStyles = css({
   position: 'relative',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  top: 1
+  insetBlockStart: 1
 });
 
 /**
@@ -65,11 +64,11 @@ export var ChevronIconContainer = function ChevronIconContainer(props
 var loadingItemContainerStyles = css({
   width: '100%',
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: 5
+  paddingBlockStart: 5
 });
 var paddingLeftStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingLeft: '50%'
+  paddingInlineStart: '50%'
 });
 /**
  * __Loader item container__

package/dist/esm/components/row.js

@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.6.8";
+var packageVersion = "9.6.10";
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);
   var _super = _createSuper(Row);
@@ -148,7 +148,6 @@ var Row = /*#__PURE__*/function (_Component) {
         ariaAttrs['aria-level'] = depth;
       }
       return jsx(Fragment, null, jsx(TreeRowContainer, _extends({
-        role: "row",
         css: hasChildren && shouldExpandOnClick ? treeRowClickableStyles : undefined,
         onClick: hasChildren && shouldExpandOnClick ? this.onClickHandler : undefined
       }, ariaAttrs), React.Children.map(this.props.children, function (cell, index) {

package/dist/esm/components/rows.js

@@ -19,9 +19,14 @@ var Rows = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this$props = this.props,
         items = _this$props.items,
-        render = _this$props.render;
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Items, {
+        render = _this$props.render,
+        _this$props$loadingLa = _this$props.loadingLabel,
+        loadingLabel = _this$props$loadingLa === void 0 ? 'Loading' : _this$props$loadingLa;
+      return /*#__PURE__*/React.createElement("div", {
+        role: "rowgroup"
+      }, /*#__PURE__*/React.createElement(Items, {
         items: items,
+        loadingLabel: loadingLabel,
         render: render
       }));
     }

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

@@ -8,6 +8,7 @@ export default class Item extends Component<any> {
     render(): import("react").FunctionComponentElement<{
         depth: any;
         data: any;
+        loadingLabel: any;
         renderChildren: () => jsx.JSX.Element;
     }> | null;
 }

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

@@ -3,6 +3,7 @@ interface ItemsProps<Item = any> {
     parentData?: any;
     depth: number;
     items?: Item[];
+    loadingLabel?: string;
     render: (arg: Item) => React.ReactNode;
 }
 interface State {
@@ -19,6 +20,6 @@ export default class Items<Item> extends Component<ItemsProps<Item>, State> {
     handleLoaderComplete: () => void;
     renderLoader(): JSX.Element;
     renderItems(): JSX.Element[] | undefined;
-    render(): JSX.Element;
+    render(): JSX.Element | JSX.Element[] | undefined;
 }
 export {};

package/dist/types/components/internal/loader-item.d.ts

@@ -3,6 +3,7 @@ interface LoaderItemProps {
     depth: number;
     onComplete: (...args: any[]) => void;
     isCompleting?: boolean;
+    loadingLabel?: string;
 }
 export default class LoaderItem extends Component<LoaderItemProps, any> {
     static defaultProps: {

package/dist/types/components/rows.d.ts

@@ -5,6 +5,7 @@ type WithChildren<T> = T & {
 export interface RowsProps<T> {
     items?: WithChildren<T>[];
     render: (args: WithChildren<T>) => React.ReactNode;
+    loadingLabel?: string;
 }
 export default class Rows<T> extends Component<RowsProps<T>> {
     render(): JSX.Element;

package/dist/types-ts4.5/components/internal/item.d.ts

@@ -8,6 +8,7 @@ export default class Item extends Component<any> {
     render(): import("react").FunctionComponentElement<{
         depth: any;
         data: any;
+        loadingLabel: any;
         renderChildren: () => jsx.JSX.Element;
     }> | null;
 }

package/dist/types-ts4.5/components/internal/items.d.ts

@@ -3,6 +3,7 @@ interface ItemsProps<Item = any> {
     parentData?: any;
     depth: number;
     items?: Item[];
+    loadingLabel?: string;
     render: (arg: Item) => React.ReactNode;
 }
 interface State {
@@ -19,6 +20,6 @@ export default class Items<Item> extends Component<ItemsProps<Item>, State> {
     handleLoaderComplete: () => void;
     renderLoader(): JSX.Element;
     renderItems(): JSX.Element[] | undefined;
-    render(): JSX.Element;
+    render(): JSX.Element | JSX.Element[] | undefined;
 }
 export {};

package/dist/types-ts4.5/components/internal/loader-item.d.ts

@@ -3,6 +3,7 @@ interface LoaderItemProps {
     depth: number;
     onComplete: (...args: any[]) => void;
     isCompleting?: boolean;
+    loadingLabel?: string;
 }
 export default class LoaderItem extends Component<LoaderItemProps, any> {
     static defaultProps: {

package/dist/types-ts4.5/components/rows.d.ts

@@ -5,6 +5,7 @@ type WithChildren<T> = T & {
 export interface RowsProps<T> {
     items?: WithChildren<T>[];
     render: (args: WithChildren<T>) => React.ReactNode;
+    loadingLabel?: string;
 }
 export default class Rows<T> extends Component<RowsProps<T>> {
     render(): JSX.Element;

package/extract-react-types/table-tree-rows.tsx

@@ -18,6 +18,11 @@ type RowsProps = {
    */
   // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
   items?: Item[] | null;
+  /**
+   * Accessible name for loading states spinner. Can be used for internationalization.
+   * Default is "Loading".
+   */
+  loadingLabel?: string | null;
   /**
    * Render function for child rows. Render props will contain an item from the
    * `items` prop above.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.6.8",
+  "version": "9.6.10",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,11 +24,11 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/button": "^16.16.0",
+    "@atlaskit/button": "^17.1.0",
     "@atlaskit/icon": "^22.0.0",
     "@atlaskit/spinner": "^16.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.31.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21"

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

@@ -1,109 +0,0 @@
-## API Report File for "@atlaskit/table-tree"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { Component } from 'react';
-import { jsx } from '@emotion/react';
-import { default as React_2 } from 'react';
-import { ReactNode } from 'react';
-import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
-import { WithContextProps } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-export const Cell: (props: CellProps & CellWithColumnWidthProps) => JSX.Element;
-
-// @public (undocumented)
-export interface CellProps {
-    children?: ReactNode;
-    className?: string;
-    indentLevel?: number;
-    singleLine?: boolean;
-    width?: number | string;
-}
-
-// @public (undocumented)
-export interface CellWithColumnWidthProps {
-    // (undocumented)
-    columnIndex?: number;
-    // (undocumented)
-    width?: number | string;
-}
-
-// @public (undocumented)
-type ColumnWidth = number | string;
-
-// @public (undocumented)
-export const Header: (props: any) => JSX.Element;
-
-// @public (undocumented)
-class Headers_2 extends Component<any> {
-    // (undocumented)
-    render(): jsx.JSX.Element;
-}
-export { Headers_2 as Headers }
-
-// @public (undocumented)
-export const Row: React_2.ForwardRefExoticComponent<Pick<Pick<Omit<any, keyof WithAnalyticsEventsProps>, number | string | symbol> & React_2.RefAttributes<any> & WithContextProps, number | string | symbol> & React_2.RefAttributes<any>>;
-
-// @public (undocumented)
-export class Rows<T> extends Component<RowsProps<T>> {
-    // (undocumented)
-    render(): JSX.Element;
-}
-
-// @public (undocumented)
-export interface RowsProps<T> {
-    // (undocumented)
-    items?: WithChildren<T>[];
-    // (undocumented)
-    render: (args: WithChildren<T>) => React_2.ReactNode;
-}
-
-// @public (undocumented)
-interface State {
-    // (undocumented)
-    columnWidths: ColumnWidth[];
-}
-
-// @public (undocumented)
-class TableTree extends Component<any, State> {
-    // (undocumented)
-    componentDidMount(): void;
-    // (undocumented)
-    getColumnWidth: (columnIndex: any) => ColumnWidth | null;
-    // (undocumented)
-    render(): JSX.Element;
-    // (undocumented)
-    setColumnWidth: (columnIndex: number, width: ColumnWidth) => void;
-    // (undocumented)
-    state: State;
-}
-export default TableTree;
-
-// @public
-export class TableTreeDataHelper<T extends any = any> {
-    constructor({ key }?: {
-        key?: keyof T | undefined;
-    });
-    // (undocumented)
-    appendItems(items: T[], allItems?: T[], parentItem?: T | null): T[];
-    // (undocumented)
-    key: keyof T;
-    // (undocumented)
-    keysCache: any;
-    // (undocumented)
-    updateItems(items: T[], allItems?: T[], parentItem?: T | null): T[];
-}
-
-// @public (undocumented)
-type WithChildren<T> = T & {
-    children?: T[] | null;
-};
-
-// (No @packageDocumentation comment for this package)
-
-```