@atlaskit/table-tree 9.5.0 → 9.6.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+- [`60b048eae5d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/60b048eae5d) - Replaced legacy context with useContext for handling column widths
+
 ## 9.5.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/internal/with-column-width.js

@@ -8,60 +8,34 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = withColumnWidth;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _tableTree = require("../table-tree");
 var _excluded = ["width", "columnIndex"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-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; } } /* eslint-disable react/prop-types */
 function withColumnWidth(Cell) {
-  var _class;
-  return _class = /*#__PURE__*/function (_Component) {
-    (0, _inherits2.default)(CellWithColumnWidth, _Component);
-    var _super = _createSuper(CellWithColumnWidth);
-    function CellWithColumnWidth() {
-      (0, _classCallCheck2.default)(this, CellWithColumnWidth);
-      return _super.apply(this, arguments);
-    }
-    (0, _createClass2.default)(CellWithColumnWidth, [{
-      key: "UNSAFE_componentWillMount",
-      value: function UNSAFE_componentWillMount() {
-        this.setColumnWidth(this.props.width);
-      }
-    }, {
-      key: "setColumnWidth",
-      value: function setColumnWidth(width) {
-        if (width !== undefined) {
-          this.context.tableTree.setColumnWidth(this.props.columnIndex, width);
-        }
+  return function (props) {
+    var _useContext = (0, _react.useContext)(_tableTree.TableTreeContext),
+      setColumnWidth = _useContext.setColumnWidth,
+      getColumnWidth = _useContext.getColumnWidth;
+    var width = props.width,
+      columnIndex = props.columnIndex,
+      other = (0, _objectWithoutProperties2.default)(props, _excluded);
+    (0, _react.useEffect)(function () {
+      if (width !== undefined && columnIndex !== undefined) {
+        setColumnWidth(columnIndex, width);
       }
-    }, {
-      key: "UNSAFE_componentWillReceiveProps",
-      value: function UNSAFE_componentWillReceiveProps(nextProps) {
-        this.setColumnWidth(nextProps.width);
+    }, [width, columnIndex, setColumnWidth]);
+    var columnWidth;
+    if (width !== null && width !== undefined) {
+      columnWidth = width;
+    } else {
+      if (columnIndex !== undefined) {
+        columnWidth = getColumnWidth(columnIndex);
       }
-    }, {
-      key: "render",
-      value: function render() {
-        var _this$props = this.props,
-          width = _this$props.width,
-          columnIndex = _this$props.columnIndex,
-          other = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-        var columnWidth = width !== null && width !== undefined ? width : this.context.tableTree.getColumnWidth(columnIndex);
-        return /*#__PURE__*/_react.default.createElement(Cell, (0, _extends2.default)({
-          width: columnWidth
-        }, other));
-      }
-    }]);
-    return CellWithColumnWidth;
-  }(_react.Component), (0, _defineProperty2.default)(_class, "contextTypes", {
-    tableTree: _propTypes.default.object.isRequired
-  }), _class;
+    }
+    return /*#__PURE__*/_react.default.createElement(Cell, (0, _extends2.default)({
+      width: columnWidth
+    }, other));
+  };
 }

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.5.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/components/table-tree.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.default = exports.TableTreeContext = void 0;
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
 var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
@@ -14,7 +14,6 @@ var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime
 var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
-var _propTypes = _interopRequireDefault(require("prop-types"));
 var _cell = _interopRequireDefault(require("./cell"));
 var _header = _interopRequireDefault(require("./header"));
 var _headers = _interopRequireDefault(require("./headers"));
@@ -24,6 +23,18 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 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; } } /* eslint-disable react/prop-types */
+/**
+ *
+ * Context provider which maintains the column widths and access methods for use in descendent table cells
+ * Enables composed table-tree implementations to e.g. set width on header cells only
+ */
+var TableTreeContext = /*#__PURE__*/(0, _react.createContext)({
+  setColumnWidth: function setColumnWidth() {},
+  getColumnWidth: function getColumnWidth() {
+    return null;
+  }
+});
+exports.TableTreeContext = TableTreeContext;
 var TableTree = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(TableTree, _Component);
   var _super = _createSuper(TableTree);
@@ -62,17 +73,6 @@ var TableTree = /*#__PURE__*/function (_Component) {
         }); // eslint-disable-line
       }
     }
-  }, {
-    key: "getChildContext",
-    value: function getChildContext() {
-      return {
-        tableTree: {
-          columnWidths: this.state.columnWidths,
-          setColumnWidth: this.setColumnWidth,
-          getColumnWidth: this.getColumnWidth
-        }
-      };
-    }
   }, {
     key: "render",
     value: function render() {
@@ -122,15 +122,17 @@ var TableTree = /*#__PURE__*/function (_Component) {
           }
         });
       }
-      return /*#__PURE__*/_react.default.createElement("div", {
+      return /*#__PURE__*/_react.default.createElement(TableTreeContext.Provider, {
+        value: {
+          setColumnWidth: this.setColumnWidth,
+          getColumnWidth: this.getColumnWidth
+        }
+      }, /*#__PURE__*/_react.default.createElement("div", {
         role: "treegrid",
         "aria-readonly": true
-      }, heads, rows, this.props.children);
+      }, heads, rows, this.props.children));
     }
   }]);
   return TableTree;
 }(_react.Component);
-exports.default = TableTree;
-(0, _defineProperty2.default)(TableTree, "childContextTypes", {
-  tableTree: _propTypes.default.object.isRequired
-});
+exports.default = TableTree;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.5.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/internal/with-column-width.js

@@ -1,34 +1,32 @@
 import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { useContext, useEffect } from 'react';
+import { TableTreeContext } from '../table-tree';
 export default function withColumnWidth(Cell) {
-  var _class;
-  return _class = class CellWithColumnWidth extends Component {
-    UNSAFE_componentWillMount() {
-      this.setColumnWidth(this.props.width);
-    }
-    setColumnWidth(width) {
-      if (width !== undefined) {
-        this.context.tableTree.setColumnWidth(this.props.columnIndex, width);
+  return props => {
+    const {
+      setColumnWidth,
+      getColumnWidth
+    } = useContext(TableTreeContext);
+    const {
+      width,
+      columnIndex,
+      ...other
+    } = props;
+    useEffect(() => {
+      if (width !== undefined && columnIndex !== undefined) {
+        setColumnWidth(columnIndex, width);
+      }
+    }, [width, columnIndex, setColumnWidth]);
+    let columnWidth;
+    if (width !== null && width !== undefined) {
+      columnWidth = width;
+    } else {
+      if (columnIndex !== undefined) {
+        columnWidth = getColumnWidth(columnIndex);
       }
     }
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      this.setColumnWidth(nextProps.width);
-    }
-    render() {
-      const {
-        width,
-        columnIndex,
-        ...other
-      } = this.props;
-      const columnWidth = width !== null && width !== undefined ? width : this.context.tableTree.getColumnWidth(columnIndex);
-      return /*#__PURE__*/React.createElement(Cell, _extends({
-        width: columnWidth
-      }, other));
-    }
-  }, _defineProperty(_class, "contextTypes", {
-    tableTree: PropTypes.object.isRequired
-  }), _class;
+    return /*#__PURE__*/React.createElement(Cell, _extends({
+      width: columnWidth
+    }, other));
+  };
 }

package/dist/es2019/components/row.js

@@ -12,7 +12,7 @@ const treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.5.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/components/table-tree.js

@@ -1,12 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /* eslint-disable react/prop-types */
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import React, { Component, createContext } from 'react';
 import Cell from './cell';
 import Header from './header';
 import Headers from './headers';
 import Row from './row';
 import Rows from './rows';
+/**
+ *
+ * Context provider which maintains the column widths and access methods for use in descendent table cells
+ * Enables composed table-tree implementations to e.g. set width on header cells only
+ */
+export const TableTreeContext = /*#__PURE__*/createContext({
+  setColumnWidth: () => {},
+  getColumnWidth: () => null
+});
 export default class TableTree extends Component {
   constructor(...args) {
     super(...args);
@@ -38,15 +46,6 @@ export default class TableTree extends Component {
     }
   }
 
-  getChildContext() {
-    return {
-      tableTree: {
-        columnWidths: this.state.columnWidths,
-        setColumnWidth: this.setColumnWidth,
-        getColumnWidth: this.getColumnWidth
-      }
-    };
-  }
   render() {
     const {
       items,
@@ -90,12 +89,14 @@ export default class TableTree extends Component {
         }
       });
     }
-    return /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement(TableTreeContext.Provider, {
+      value: {
+        setColumnWidth: this.setColumnWidth,
+        getColumnWidth: this.getColumnWidth
+      }
+    }, /*#__PURE__*/React.createElement("div", {
       role: "treegrid",
       "aria-readonly": true
-    }, heads, rows, this.props.children);
+    }, heads, rows, this.props.children));
   }
-}
-_defineProperty(TableTree, "childContextTypes", {
-  tableTree: PropTypes.object.isRequired
-});
+}

package/dist/es2019/version.json

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