@atlaskit/table-tree 9.6.0 → 9.6.1

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/table-tree
 
+## 9.6.1
+
+### Patch Changes
+
+- [`fbce2074415`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fbce2074415) - Fix issues with inappropriate roles and `aria-controls` application.
+
 ## 9.6.0
 
 ### Minor Changes

package/dist/cjs/components/cell.js

@@ -40,14 +40,19 @@ var Cell = /*#__PURE__*/function (_Component) {
         width = _this$props.width,
         className = _this$props.className,
         props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/_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__*/
+        // 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 Cell;

package/dist/cjs/components/header.js

@@ -36,13 +36,17 @@ var Header = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var props = this.props;
-      return (0, _react2.jsx)(_commonCell.default, (0, _extends2.default)({
-        css: headerStyles,
-        role: "columnheader",
-        style: {
-          width: props.width
-        }
-      }, props), props.children);
+      return (
+        // TODO: Determine whether proper `th` elements can be used instead of
+        // roles (DSP-11588)
+        (0, _react2.jsx)(_commonCell.default, (0, _extends2.default)({
+          css: headerStyles,
+          role: "columnheader",
+          style: {
+            width: props.width
+          }
+        }, props), props.children)
+      );
     }
   }]);
   return Header;

package/dist/cjs/components/headers.js

@@ -28,19 +28,23 @@ var Headers = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(Headers, [{
     key: "render",
     value: function render() {
-      return (0, _react2.jsx)("div", {
-        css: containerStyles,
-        role: "row"
-      }, _react.Children.map(this.props.children, function (header, index) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line react/no-array-index-key
-          (0, _react.cloneElement)(header, {
-            key: index,
-            columnIndex: index
-          })
-        );
-      }));
+      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(this.props.children, function (header, index) {
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line react/no-array-index-key
+            (0, _react.cloneElement)(header, {
+              key: index,
+              columnIndex: index
+            })
+          );
+        }))
+      );
     }
   }]);
   return Headers;

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -78,9 +77,7 @@ var Items = /*#__PURE__*/function (_Component) {
         'aria-busy': true,
         'aria-live': 'polite'
       } : {};
-      return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
-        role: "rowgroup"
-      }, busyAttrs), isLoaderShown ? this.renderLoader() : this.renderItems());
+      return /*#__PURE__*/_react.default.createElement("div", busyAttrs, isLoaderShown ? this.renderLoader() : this.renderItems());
     }
   }], [{
     key: "getDerivedStateFromProps",

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

@@ -34,10 +34,10 @@ var TreeRowContainer = function TreeRowContainer(props) {
 exports.TreeRowContainer = TreeRowContainer;
 var commonChevronContainerStyles = (0, _react.css)({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // 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-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 7,
   alignItems: 'center'
 });
@@ -56,7 +56,7 @@ var ChevronContainer = function ChevronContainer(props
 exports.ChevronContainer = ChevronContainer;
 var chevronIconContainerStyles = (0, _react.css)({
   position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 1
 });
 
@@ -75,11 +75,11 @@ var ChevronIconContainer = function ChevronIconContainer(props
 exports.ChevronIconContainer = ChevronIconContainer;
 var loadingItemContainerStyles = (0, _react.css)({
   width: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   paddingTop: 5
 });
 var paddingLeftStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   paddingLeft: '50%'
 });
 /**

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.0";
+var packageVersion = "9.6.1";
 var Row = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
   var _super = _createSuper(Row);
@@ -128,7 +128,7 @@ var Row = /*#__PURE__*/function (_Component) {
           extendedLabel: extendedLabel,
           isExpanded: isExpanded,
           onExpandToggle: this.onExpandToggle,
-          ariaControls: (0, _toItemId.default)(props.itemId),
+          ariaControls: isExpanded ? (0, _toItemId.default)(props.itemId) : undefined,
           rowId: props.itemId
         })].concat(cellContent);
       }

package/dist/cjs/version.json

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

package/dist/es2019/components/cell.js

@@ -14,14 +14,19 @@ class Cell extends Component {
       className,
       ...props
     } = this.props;
-    return /*#__PURE__*/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__*/
+      // 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))
+    );
   }
 }
 export default withColumnWidth(Cell);

package/dist/es2019/components/header.js

@@ -17,13 +17,17 @@ class Header extends Component {
     const {
       props
     } = this;
-    return jsx(ColumnCell, _extends({
-      css: headerStyles,
-      role: "columnheader",
-      style: {
-        width: props.width
-      }
-    }, props), props.children);
+    return (
+      // TODO: Determine whether proper `th` elements can be used instead of
+      // roles (DSP-11588)
+      jsx(ColumnCell, _extends({
+        css: headerStyles,
+        role: "columnheader",
+        style: {
+          width: props.width
+        }
+      }, props), props.children)
+    );
   }
 }
 export default withColumnWidth(Header);

package/dist/es2019/components/headers.js

@@ -8,15 +8,19 @@ const containerStyles = css({
 });
 export default class Headers extends Component {
   render() {
-    return jsx("div", {
-      css: containerStyles,
-      role: "row"
-    }, Children.map(this.props.children, (header, index) =>
-    /*#__PURE__*/
-    // eslint-disable-next-line react/no-array-index-key
-    cloneElement(header, {
-      key: index,
-      columnIndex: index
-    })));
+    return (
+      // TODO: Determine whether proper `tr` elements can be used instead of
+      // roles (DSP-11588)
+      jsx("div", {
+        css: containerStyles,
+        role: "row"
+      }, Children.map(this.props.children, (header, index) =>
+      /*#__PURE__*/
+      // eslint-disable-next-line react/no-array-index-key
+      cloneElement(header, {
+        key: index,
+        columnIndex: index
+      })))
+    );
   }
 }

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
@@ -56,9 +55,7 @@ export default class Items extends Component {
       'aria-busy': true,
       'aria-live': 'polite'
     } : {};
-    return /*#__PURE__*/React.createElement("div", _extends({
-      role: "rowgroup"
-    }, busyAttrs), isLoaderShown ? this.renderLoader() : this.renderItems());
+    return /*#__PURE__*/React.createElement("div", busyAttrs, isLoaderShown ? this.renderLoader() : this.renderItems());
   }
 }
 _defineProperty(Items, "defaultProps", {

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

@@ -20,10 +20,10 @@ jsx("div", _extends({
 }, props));
 const commonChevronContainerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // 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-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 7,
   alignItems: 'center'
 });
@@ -39,7 +39,7 @@ export const ChevronContainer = (props
 }));
 const chevronIconContainerStyles = css({
   position: 'relative',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 1
 });
 
@@ -55,11 +55,11 @@ export const ChevronIconContainer = (props
 }));
 const loadingItemContainerStyles = css({
   width: '100%',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   paddingTop: 5
 });
 const paddingLeftStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   paddingLeft: '50%'
 });
 /**

package/dist/es2019/components/row.js

@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.6.0";
+const packageVersion = "9.6.1";
 class Row extends Component {
   constructor(...args) {
     super(...args);
@@ -105,7 +105,7 @@ class Row extends Component {
         extendedLabel: extendedLabel,
         isExpanded: isExpanded,
         onExpandToggle: this.onExpandToggle,
-        ariaControls: toItemId(props.itemId),
+        ariaControls: isExpanded ? toItemId(props.itemId) : undefined,
         rowId: props.itemId
       })].concat(cellContent);
     }

package/dist/es2019/version.json

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

package/dist/esm/components/cell.js

@@ -30,14 +30,19 @@ var Cell = /*#__PURE__*/function (_Component) {
         width = _this$props.width,
         className = _this$props.className,
         props = _objectWithoutProperties(_this$props, _excluded);
-      return /*#__PURE__*/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__*/
+        // 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 Cell;

package/dist/esm/components/header.js

@@ -30,13 +30,17 @@ var Header = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var props = this.props;
-      return jsx(ColumnCell, _extends({
-        css: headerStyles,
-        role: "columnheader",
-        style: {
-          width: props.width
-        }
-      }, props), props.children);
+      return (
+        // TODO: Determine whether proper `th` elements can be used instead of
+        // roles (DSP-11588)
+        jsx(ColumnCell, _extends({
+          css: headerStyles,
+          role: "columnheader",
+          style: {
+            width: props.width
+          }
+        }, props), props.children)
+      );
     }
   }]);
   return Header;

package/dist/esm/components/headers.js

@@ -23,19 +23,23 @@ var Headers = /*#__PURE__*/function (_Component) {
   _createClass(Headers, [{
     key: "render",
     value: function render() {
-      return jsx("div", {
-        css: containerStyles,
-        role: "row"
-      }, Children.map(this.props.children, function (header, index) {
-        return (
-          /*#__PURE__*/
-          // eslint-disable-next-line react/no-array-index-key
-          cloneElement(header, {
-            key: index,
-            columnIndex: index
-          })
-        );
-      }));
+      return (
+        // TODO: Determine whether proper `tr` elements can be used instead of
+        // roles (DSP-11588)
+        jsx("div", {
+          css: containerStyles,
+          role: "row"
+        }, Children.map(this.props.children, function (header, index) {
+          return (
+            /*#__PURE__*/
+            // eslint-disable-next-line react/no-array-index-key
+            cloneElement(header, {
+              key: index,
+              columnIndex: index
+            })
+          );
+        }))
+      );
     }
   }]);
   return Headers;

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

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
@@ -69,9 +68,7 @@ var Items = /*#__PURE__*/function (_Component) {
         'aria-busy': true,
         'aria-live': 'polite'
       } : {};
-      return /*#__PURE__*/React.createElement("div", _extends({
-        role: "rowgroup"
-      }, busyAttrs), isLoaderShown ? this.renderLoader() : this.renderItems());
+      return /*#__PURE__*/React.createElement("div", busyAttrs, isLoaderShown ? this.renderLoader() : this.renderItems());
     }
   }], [{
     key: "getDerivedStateFromProps",

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

@@ -25,10 +25,10 @@ export var TreeRowContainer = function TreeRowContainer(props) {
 };
 var commonChevronContainerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // 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-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 7,
   alignItems: 'center'
 });
@@ -46,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-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   top: 1
 });
 
@@ -64,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-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   paddingTop: 5
 });
 var paddingLeftStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   paddingLeft: '50%'
 });
 /**

package/dist/esm/components/row.js

@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.6.0";
+var packageVersion = "9.6.1";
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);
   var _super = _createSuper(Row);
@@ -120,7 +120,7 @@ var Row = /*#__PURE__*/function (_Component) {
           extendedLabel: extendedLabel,
           isExpanded: isExpanded,
           onExpandToggle: this.onExpandToggle,
-          ariaControls: toItemId(props.itemId),
+          ariaControls: isExpanded ? toItemId(props.itemId) : undefined,
           rowId: props.itemId
         })].concat(cellContent);
       }

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.6.0",
+  "version": "9.6.1",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,17 +12,8 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
-  "homepage": "https://atlassian.design/components/table-tree/",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "continuous",
@@ -31,16 +22,13 @@
       "category": "Components"
     }
   },
-  "af:exports": {
-    ".": "./src/index.tsx"
-  },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.10.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21"
@@ -49,11 +37,9 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/docs": "*",
+    "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/ds-lib": "^2.2.0",
-    "@atlaskit/empty-state": "^7.6.0",
-    "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.5.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -92,5 +78,17 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
+  "homepage": "https://atlassian.design/components/table-tree/",
+  "af:exports": {
+    ".": "./src/index.tsx"
+  },
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }