@atlaskit/table-tree 9.4.1 → 9.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/table-tree
 
+## 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
+
+- [`9d00501a414`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9d00501a414) - Ensure legacy types are published for TS 4.5-4.8
+
 ## 9.4.1
 
 ### 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/row.js

@@ -28,7 +28,7 @@ var treeRowClickableStyles = (0, _react2.css)({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.4.1";
+var packageVersion = "9.5.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

@@ -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

package/dist/cjs/version.json

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

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

@@ -53,7 +53,8 @@ export default class TableTree extends Component {
       shouldExpandOnClick,
       headers,
       columns,
-      columnWidths = []
+      columnWidths = [],
+      mainColumnForExpandCollapseLabel
     } = this.props;
     const heads = headers && /*#__PURE__*/React.createElement(Headers, null, headers.map((header, index) =>
     /*#__PURE__*/
@@ -72,18 +73,21 @@ 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", {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/table-tree",
-	"version": "9.4.1",
+	"version": "9.5.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)))));
     }
   }]);

package/dist/esm/components/row.js

@@ -20,7 +20,7 @@ var treeRowClickableStyles = css({
   cursor: 'pointer'
 });
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.4.1";
+var packageVersion = "9.5.0";
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);
   var _super = _createSuper(Row);
@@ -56,6 +56,18 @@ var Row = /*#__PURE__*/function (_Component) {
         _this.onExpandStateChange(!_this.state.isExpanded);
       }
     });
+    _defineProperty(_assertThisInitialized(_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;
   }
   _createClass(Row, [{
@@ -94,18 +106,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 = [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/esm/components/table-tree.js

@@ -73,7 +73,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.createElement(Headers, null, headers.map(function (header, index) {
         return (
           /*#__PURE__*/
@@ -98,7 +99,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.createElement(Cell
               // eslint-disable-next-line react/no-array-index-key

package/dist/esm/version.json

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

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

@@ -5,6 +5,8 @@ interface ChevronProps {
     isExpanded?: boolean;
     ariaControls?: string;
     onExpandToggle?: Function;
+    rowId: string;
+    extendedLabel?: string;
 }
 export default class Chevron extends Component<ChevronProps> {
     static defaultProps: {

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

@@ -14,6 +14,7 @@ declare class Row extends Component<any, any> {
     onClickHandler: (e: React.MouseEvent) => void;
     onExpandToggle: () => void;
     isExpanded(): any;
+    getExtendedLabel: (cellContent: any, cellIndex: number, mainColumnForExpandCollapseLabel: string | number) => any;
     renderCell(cell: any, cellIndex: number): React.FunctionComponentElement<{
         key: number;
         columnIndex: number;

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

@@ -0,0 +1,78 @@
+import React from 'react';
+export interface CellProps {
+    /**
+     * Whether the cell contents should wrap or display on a single line and be concatenated.
+     */
+    singleLine?: boolean;
+    /**
+     * Indent level for the cell. Each indent level adds 25px to the left padding.
+     */
+    indentLevel?: number;
+    /**
+     * Width of the header item. Takes a string or a number representing the width in pixels.
+     */
+    width?: number | string;
+    /**
+     * Class name to apply to cell.
+     */
+    className?: string;
+}
+declare const _default: {
+    new (props: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>): {
+        UNSAFE_componentWillMount(): void;
+        setColumnWidth(width?: string | number | undefined): void;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./internal/with-column-width").CellWithColumnWidthProps): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: CellProps & import("./internal/with-column-width").CellWithColumnWidthProps, context?: any): {
+        UNSAFE_componentWillMount(): void;
+        setColumnWidth(width?: string | number | undefined): void;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./internal/with-column-width").CellWithColumnWidthProps): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextTypes: {
+        tableTree: import("prop-types").Validator<object>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default _default;

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

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+declare const _default: {
+    new (props: Readonly<any>): {
+        UNSAFE_componentWillMount(): void;
+        setColumnWidth(width?: string | number | undefined): void;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./internal/with-column-width").CellWithColumnWidthProps): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<any>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<any> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: any, context?: any): {
+        UNSAFE_componentWillMount(): void;
+        setColumnWidth(width?: string | number | undefined): void;
+        UNSAFE_componentWillReceiveProps(nextProps: import("./internal/with-column-width").CellWithColumnWidthProps): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<any>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<any> & Readonly<{
+            children?: import("react").ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: import("react").ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: import("react").ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<any>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<any>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextTypes: {
+        tableTree: import("prop-types").Validator<object>;
+    };
+    contextType?: import("react").Context<any> | undefined;
+};
+export default _default;

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

@@ -0,0 +1,6 @@
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+export default class Headers extends Component<any> {
+    render(): jsx.JSX.Element;
+}

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

@@ -0,0 +1,19 @@
+import { Component } from 'react';
+interface ChevronProps {
+    expandLabel: string;
+    collapseLabel: string;
+    isExpanded?: boolean;
+    ariaControls?: string;
+    onExpandToggle?: Function;
+    rowId: string;
+    extendedLabel?: string;
+}
+export default class Chevron extends Component<ChevronProps> {
+    static defaultProps: {
+        expandLabel: string;
+        collapseLabel: string;
+    };
+    handleClick: () => void;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,12 @@
+/** @jsx jsx */
+import { FC, HTMLAttributes, ReactNode } from 'react';
+interface CommonCellProps {
+    indent?: string;
+    width?: string | number;
+    children?: ReactNode;
+}
+/**
+ * __Common cell__
+ */
+declare const CommonCell: FC<HTMLAttributes<HTMLDivElement> & CommonCellProps>;
+export default CommonCell;

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

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { Component } from 'react';
+import { jsx } from '@emotion/react';
+export default class Item extends Component<any> {
+    static defaultProps: {
+        depth: number;
+    };
+    render(): import("react").FunctionComponentElement<{
+        depth: any;
+        data: any;
+        renderChildren: () => jsx.JSX.Element;
+    }> | null;
+}

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

@@ -0,0 +1,24 @@
+import React, { Component } from 'react';
+interface ItemsProps<Item = any> {
+    parentData?: any;
+    depth: number;
+    items?: Item[];
+    render: (arg: Item) => React.ReactNode;
+}
+interface State {
+    isLoaderShown: boolean;
+}
+export default class Items<Item> extends Component<ItemsProps<Item>, State> {
+    static defaultProps: {
+        depth: number;
+    };
+    state: State;
+    static getDerivedStateFromProps(nextProps: any, prevState: any): {
+        isLoaderShown: boolean;
+    } | null;
+    handleLoaderComplete: () => void;
+    renderLoader(): JSX.Element;
+    renderItems(): JSX.Element[] | undefined;
+    render(): JSX.Element;
+}
+export {};

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

@@ -0,0 +1,20 @@
+import { Component } from 'react';
+interface LoaderItemProps {
+    depth: number;
+    onComplete: (...args: any[]) => void;
+    isCompleting?: boolean;
+}
+export default class LoaderItem extends Component<LoaderItemProps, any> {
+    static defaultProps: {
+        depth: number;
+    };
+    state: {
+        phase: string;
+    };
+    static getDerivedStateFromProps(nextProps: any, prevState: any): {
+        phase: string;
+    } | null;
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    render(): JSX.Element | null;
+}
+export {};

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

@@ -0,0 +1,11 @@
+/** @jsx jsx */
+import { FC, HTMLAttributes, ReactNode } from 'react';
+interface OverflowContainerProps {
+    isSingleLine?: boolean;
+    chilren?: ReactNode;
+}
+/**
+ * __Overflow container__
+ */
+declare const OverflowContainer: FC<OverflowContainerProps & HTMLAttributes<HTMLSpanElement>>;
+export default OverflowContainer;

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

@@ -0,0 +1,36 @@
+/** @jsx jsx */
+import { FC, HTMLAttributes, ReactNode } from 'react';
+export declare const iconColor: "var(--ds-text)";
+export declare const indentBase: "var(--ds-space-300)";
+/**
+ * __Tree row container__
+ */
+export declare const TreeRowContainer: FC<HTMLAttributes<HTMLDivElement> & {
+    children: ReactNode;
+}>;
+type ChevronContainerProps = HTMLAttributes<HTMLSpanElement> & {
+    children: ReactNode;
+};
+/**
+ * __Chevron container__
+ *
+ * A wrapper container around the expand table tree button.
+ */
+export declare const ChevronContainer: FC<ChevronContainerProps>;
+/**
+ * __Chevron icon container__
+ *
+ * A chevron icon container.
+ */
+export declare const ChevronIconContainer: FC<ChevronContainerProps>;
+type LoaderItemContainerProps = {
+    isRoot?: boolean;
+    children: ReactNode;
+};
+/**
+ * __Loader item container__
+ *
+ * A loader item container.
+ */
+export declare const LoaderItemContainer: FC<LoaderItemContainerProps>;
+export {};

package/dist/types-ts4.5/components/internal/with-column-width.d.ts

@@ -0,0 +1,64 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+export interface CellWithColumnWidthProps {
+    width?: number | string;
+    columnIndex?: number;
+}
+export default function withColumnWidth<T extends object>(Cell: React.ComponentType<T>): {
+    new (props: Readonly<T & CellWithColumnWidthProps>): {
+        UNSAFE_componentWillMount(): void;
+        setColumnWidth(width?: number | string): void;
+        UNSAFE_componentWillReceiveProps(nextProps: CellWithColumnWidthProps): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<T & CellWithColumnWidthProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<T & CellWithColumnWidthProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<T & CellWithColumnWidthProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<T & CellWithColumnWidthProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    new (props: T & CellWithColumnWidthProps, context?: any): {
+        UNSAFE_componentWillMount(): void;
+        setColumnWidth(width?: number | string): void;
+        UNSAFE_componentWillReceiveProps(nextProps: CellWithColumnWidthProps): void;
+        render(): JSX.Element;
+        context: any;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<T & CellWithColumnWidthProps>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callBack?: (() => void) | undefined): void;
+        readonly props: Readonly<T & CellWithColumnWidthProps> & Readonly<{
+            children?: React.ReactNode;
+        }>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<T & CellWithColumnWidthProps>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<T & CellWithColumnWidthProps>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    contextTypes: {
+        tableTree: PropTypes.Validator<object>;
+    };
+    contextType?: React.Context<any> | undefined;
+};

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

@@ -0,0 +1,27 @@
+/** @jsx jsx */
+import React, { Component } from 'react';
+import { jsx } from '@emotion/react';
+declare class Row extends Component<any, any> {
+    state: {
+        isExpanded: any;
+    };
+    componentDidUpdate(prevProps: any): void;
+    onExpandStateChange(isExpanded: boolean): void;
+    /**
+     * This ensures a user won't trigger a click event and expand the accordion
+     * when making a text selection.
+     */
+    onClickHandler: (e: React.MouseEvent) => void;
+    onExpandToggle: () => void;
+    isExpanded(): any;
+    getExtendedLabel: (cellContent: any, cellIndex: number, mainColumnForExpandCollapseLabel: string | number) => any;
+    renderCell(cell: any, cellIndex: number): React.FunctionComponentElement<{
+        key: number;
+        columnIndex: number;
+        indentLevel: any;
+    }>;
+    render(): jsx.JSX.Element;
+}
+export { Row as RowWithoutAnalytics };
+declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Omit<any, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, string | number | symbol> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, string | number | symbol> & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,12 @@
+import React, { Component } from 'react';
+type WithChildren<T> = T & {
+    children?: T[] | null;
+};
+export interface RowsProps<T> {
+    items?: WithChildren<T>[];
+    render: (args: WithChildren<T>) => React.ReactNode;
+}
+export default class Rows<T> extends Component<RowsProps<T>> {
+    render(): JSX.Element;
+}
+export {};

package/dist/types-ts4.5/components/table-tree.d.ts

@@ -0,0 +1,23 @@
+import { Component } from 'react';
+import PropTypes from 'prop-types';
+interface State {
+    columnWidths: number[];
+}
+export default class TableTree extends Component<any, State> {
+    static childContextTypes: {
+        tableTree: PropTypes.Validator<object>;
+    };
+    state: State;
+    componentDidMount(): void;
+    setColumnWidth: (columnIndex: number, width: number) => void;
+    getColumnWidth: (columnIndex: any) => number | null;
+    getChildContext(): {
+        tableTree: {
+            columnWidths: number[];
+            setColumnWidth: (columnIndex: number, width: number) => void;
+            getColumnWidth: (columnIndex: any) => number | null;
+        };
+    };
+    render(): JSX.Element;
+}
+export {};

package/dist/types-ts4.5/index.d.ts

@@ -0,0 +1,10 @@
+export { default } from './components/table-tree';
+export { default as Headers } from './components/headers';
+export { default as Header } from './components/header';
+export { default as Cell } from './components/cell';
+export { default as Rows } from './components/rows';
+export { default as Row } from './components/row';
+export { default as TableTreeDataHelper } from './utils/table-tree-data-helper';
+export type { CellWithColumnWidthProps } from './components/internal/with-column-width';
+export type { CellProps } from './components/cell';
+export type { RowsProps } from './components/rows';

package/dist/types-ts4.5/utils/table-tree-data-helper.d.ts

@@ -0,0 +1,25 @@
+/**
+ * This helper class will create a cache of all the id's in the items object and
+ * path to the object.
+ * Example:
+ * [{
+ *   // item 1,
+ *   id: 1,
+ *   children:[{
+ *     // item 1.1,
+ *     id: '2'
+ *   }]
+ * }]
+ *
+ * Cache will look something like:
+ * {1: 0, 2: '0.children[0]'}
+ */
+export default class TableTreeDataHelper<T extends any = any> {
+    key: keyof T;
+    keysCache: any;
+    constructor({ key }?: {
+        key?: keyof T | undefined;
+    });
+    updateItems(items: T[], allItems?: T[], parentItem?: T | null): T[];
+    appendItems(items: T[], allItems?: T[], parentItem?: T | null): T[];
+}

package/dist/types-ts4.5/utils/to-item-id.d.ts

@@ -0,0 +1 @@
+export default function toItemId(id: string): string;

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

@@ -79,6 +79,15 @@ type RowProps = {
    * Normally set by parent Item component and does not need to be configured.
    */
   depth?: number;
+  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /**
+    Adds detail to the expand and collapse row button's aria label by appending the value from the given column. If you don't set this prop, the aria label will read out "Expand `itemId` row".
+
+    Should be a string when we pass data via `items` property in `<TableTree />`, value should be one of the property `columns` names in `<TableTree />`.
+
+    Should be a number  when we pass data via `<Rows />` component as children in `<TableTree />`.
+   */
+  mainColumnForExpandCollapseLabel?: string | number;
 };
 
 const TableRow = function (props: RowProps) {

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

@@ -54,6 +54,13 @@ type TableTreeProps = {
    */
   // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
   items?: Item[] | null;
+  /**
+   * The value used to extend the expand or collapse button label in cases where `Row` has child rows.
+   *
+   * Should be a string when we pass data via `items` property, value should be one of the `columns` names.
+   * Should be a number when we pass data via `<Rows />` component as children in `<TableTree />`.
+   */
+  mainColumnForExpandCollapseLabel?: string | number;
 };
 
 export default function (props: TableTreeProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.4.1",
+  "version": "9.5.0",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",
@@ -54,7 +54,7 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/empty-state": "^7.5.0",
     "@atlaskit/section-message": "^6.4.0",
-    "@atlaskit/select": "^16.2.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",