@atlaskit/table-tree 9.4.2 → 9.6.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/table-tree
 
+## 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
+
+- [`6e5546981a3`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e5546981a3) - Accessibility: Fix the chevron button label.
+  Add a new prop `mainColumnForExpandCollapseLabel` that allows you to show a chevron label with row contents instead of a row index.
+
 ## 9.4.2
 
 ### Patch Changes

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

@@ -47,20 +47,25 @@ var Chevron = /*#__PURE__*/function (_Component) {
         isExpanded = _this$props.isExpanded,
         ariaControls = _this$props.ariaControls,
         collapseLabel = _this$props.collapseLabel,
-        expandLabel = _this$props.expandLabel;
+        expandLabel = _this$props.expandLabel,
+        rowId = _this$props.rowId,
+        extendedLabel = _this$props.extendedLabel;
       var iconProps = {
         size: 'medium',
         primaryColor: _styled.iconColor
       };
+      var getLabel = function getLabel(defaultLabel) {
+        return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
+      };
       return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_button.default, {
         spacing: "none",
         appearance: "subtle",
         "aria-controls": ariaControls,
         onClick: this.handleClick
       }, /*#__PURE__*/_react.default.createElement(_styled.ChevronIconContainer, null, isExpanded ? /*#__PURE__*/_react.default.createElement(_chevronDown.default, (0, _extends2.default)({
-        label: collapseLabel
+        label: getLabel(collapseLabel)
       }, iconProps)) : /*#__PURE__*/_react.default.createElement(_chevronRight.default, (0, _extends2.default)({
-        label: expandLabel
+        label: getLabel(expandLabel)
       }, iconProps)))));
     }
   }]);

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.4.2";
+var packageVersion = "9.6.0";
 var Row = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
   var _super = _createSuper(Row);
@@ -64,6 +64,18 @@ var Row = /*#__PURE__*/function (_Component) {
         _this.onExpandStateChange(!_this.state.isExpanded);
       }
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getExtendedLabel", function (cellContent, cellIndex, mainColumnForExpandCollapseLabel) {
+      /**
+       * First condition - when we pass data via `items` property in `<TableTree />`
+       * Second condition - when we pass data via `<Rows />` as children in `<TableTree />`.
+       */
+      if (cellContent.hasOwnProperty('props')) {
+        return cellContent === null || cellContent === void 0 ? void 0 : cellContent.props[mainColumnForExpandCollapseLabel === null || mainColumnForExpandCollapseLabel === void 0 ? void 0 : mainColumnForExpandCollapseLabel.toLowerCase()];
+      } else if (cellIndex === mainColumnForExpandCollapseLabel) {
+        return cellContent;
+      }
+      return undefined;
+    });
     return _this;
   }
   (0, _createClass2.default)(Row, [{
@@ -102,18 +114,22 @@ var Row = /*#__PURE__*/function (_Component) {
       var props = this.props;
       var isExpanded = this.isExpanded();
       var hasChildren = props.hasChildren,
-        depth = props.depth;
+        depth = props.depth,
+        mainColumnForExpandCollapseLabel = props.mainColumnForExpandCollapseLabel;
       var isFirstCell = cellIndex === 0;
       var indentLevel = isFirstCell ? depth : 0;
       var cellContent = cell.props.children || [];
+      var extendedLabel = this.getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
       if (isFirstCell && hasChildren) {
         cellContent = [(0, _react2.jsx)(_chevron.default, {
           key: "chevron",
           expandLabel: props.expandLabel,
           collapseLabel: props.collapseLabel,
+          extendedLabel: extendedLabel,
           isExpanded: isExpanded,
           onExpandToggle: this.onExpandToggle,
-          ariaControls: (0, _toItemId.default)(props.itemId)
+          ariaControls: (0, _toItemId.default)(props.itemId),
+          rowId: props.itemId
         })].concat(cellContent);
       }
       return /*#__PURE__*/_react.default.cloneElement(cell, {

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() {
@@ -82,7 +82,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
         headers = _this$props.headers,
         columns = _this$props.columns,
         _this$props$columnWid = _this$props.columnWidths,
-        columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid;
+        columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid,
+        mainColumnForExpandCollapseLabel = _this$props.mainColumnForExpandCollapseLabel;
       var heads = headers && /*#__PURE__*/_react.default.createElement(_headers.default, null, headers.map(function (header, index) {
         return (
           /*#__PURE__*/
@@ -107,7 +108,8 @@ var TableTree = /*#__PURE__*/function (_Component) {
               itemId: id,
               items: children,
               hasChildren: hasChildren,
-              shouldExpandOnClick: shouldExpandOnClick
+              shouldExpandOnClick: shouldExpandOnClick,
+              mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
             }, columns.map(function (CellContent, index) {
               return /*#__PURE__*/_react.default.createElement(_cell.default
               // eslint-disable-next-line react/no-array-index-key
@@ -120,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.4.2",
+	"version": "9.6.0",
 	"sideEffects": false
 }

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

@@ -21,21 +21,24 @@ export default class Chevron extends Component {
       isExpanded,
       ariaControls,
       collapseLabel,
-      expandLabel
+      expandLabel,
+      rowId,
+      extendedLabel
     } = this.props;
     const iconProps = {
       size: 'medium',
       primaryColor: iconColor
     };
+    const getLabel = defaultLabel => extendedLabel ? `${defaultLabel} ${extendedLabel} row` : `${defaultLabel} row ${rowId}`;
     return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
       spacing: "none",
       appearance: "subtle",
       "aria-controls": ariaControls,
       onClick: this.handleClick
     }, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
-      label: collapseLabel
+      label: getLabel(collapseLabel)
     }, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
-      label: expandLabel
+      label: getLabel(expandLabel)
     }, iconProps)))));
   }
 }

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.4.2";
+const packageVersion = "9.6.0";
 class Row extends Component {
   constructor(...args) {
     super(...args);
@@ -43,6 +43,18 @@ class Row extends Component {
         this.onExpandStateChange(!this.state.isExpanded);
       }
     });
+    _defineProperty(this, "getExtendedLabel", (cellContent, cellIndex, mainColumnForExpandCollapseLabel) => {
+      /**
+       * First condition - when we pass data via `items` property in `<TableTree />`
+       * Second condition - when we pass data via `<Rows />` as children in `<TableTree />`.
+       */
+      if (cellContent.hasOwnProperty('props')) {
+        return cellContent === null || cellContent === void 0 ? void 0 : cellContent.props[mainColumnForExpandCollapseLabel === null || mainColumnForExpandCollapseLabel === void 0 ? void 0 : mainColumnForExpandCollapseLabel.toLowerCase()];
+      } else if (cellIndex === mainColumnForExpandCollapseLabel) {
+        return cellContent;
+      }
+      return undefined;
+    });
   }
   componentDidUpdate(prevProps) {
     const {
@@ -78,19 +90,23 @@ class Row extends Component {
     const isExpanded = this.isExpanded();
     const {
       hasChildren,
-      depth
+      depth,
+      mainColumnForExpandCollapseLabel
     } = props;
     const isFirstCell = cellIndex === 0;
     const indentLevel = isFirstCell ? depth : 0;
     let cellContent = cell.props.children || [];
+    const extendedLabel = this.getExtendedLabel(cellContent, cellIndex, mainColumnForExpandCollapseLabel);
     if (isFirstCell && hasChildren) {
       cellContent = [jsx(Chevron, {
         key: "chevron",
         expandLabel: props.expandLabel,
         collapseLabel: props.collapseLabel,
+        extendedLabel: extendedLabel,
         isExpanded: isExpanded,
         onExpandToggle: this.onExpandToggle,
-        ariaControls: toItemId(props.itemId)
+        ariaControls: toItemId(props.itemId),
+        rowId: props.itemId
       })].concat(cellContent);
     }
     return /*#__PURE__*/React.cloneElement(cell, {

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,22 +46,14 @@ export default class TableTree extends Component {
     }
   }
 
-  getChildContext() {
-    return {
-      tableTree: {
-        columnWidths: this.state.columnWidths,
-        setColumnWidth: this.setColumnWidth,
-        getColumnWidth: this.getColumnWidth
-      }
-    };
-  }
   render() {
     const {
       items,
       shouldExpandOnClick,
       headers,
       columns,
-      columnWidths = []
+      columnWidths = [],
+      mainColumnForExpandCollapseLabel
     } = this.props;
     const heads = headers && /*#__PURE__*/React.createElement(Headers, null, headers.map((header, index) =>
     /*#__PURE__*/
@@ -72,26 +72,31 @@ export default class TableTree extends Component {
           children,
           hasChildren,
           content
-        }) => /*#__PURE__*/React.createElement(Row, {
-          itemId: id,
-          items: children,
-          hasChildren: hasChildren,
-          shouldExpandOnClick: shouldExpandOnClick
-        }, columns.map((CellContent, index) => /*#__PURE__*/React.createElement(Cell
-        // eslint-disable-next-line react/no-array-index-key
-        , {
-          key: index,
-          columnIndex: index,
-          width: columnWidths[index]
-        }, /*#__PURE__*/React.createElement(CellContent, content))))
+        }) => {
+          return /*#__PURE__*/React.createElement(Row, {
+            itemId: id,
+            items: children,
+            hasChildren: hasChildren,
+            shouldExpandOnClick: shouldExpandOnClick,
+            mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
+          }, columns.map((CellContent, index) => /*#__PURE__*/React.createElement(Cell
+          // eslint-disable-next-line react/no-array-index-key
+          , {
+            key: index,
+            columnIndex: index,
+            width: columnWidths[index]
+          }, /*#__PURE__*/React.createElement(CellContent, content))));
+        }
       });
     }
-    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.4.2",
+	"version": "9.6.0",
 	"sideEffects": false
 }

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

@@ -39,20 +39,25 @@ var Chevron = /*#__PURE__*/function (_Component) {
         isExpanded = _this$props.isExpanded,
         ariaControls = _this$props.ariaControls,
         collapseLabel = _this$props.collapseLabel,
-        expandLabel = _this$props.expandLabel;
+        expandLabel = _this$props.expandLabel,
+        rowId = _this$props.rowId,
+        extendedLabel = _this$props.extendedLabel;
       var iconProps = {
         size: 'medium',
         primaryColor: iconColor
       };
+      var getLabel = function getLabel(defaultLabel) {
+        return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
+      };
       return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(Button, {
         spacing: "none",
         appearance: "subtle",
         "aria-controls": ariaControls,
         onClick: this.handleClick
       }, /*#__PURE__*/React.createElement(ChevronIconContainer, null, isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, _extends({
-        label: collapseLabel
+        label: getLabel(collapseLabel)
       }, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
-        label: expandLabel
+        label: getLabel(expandLabel)
       }, iconProps)))));
     }
   }]);