@atlaskit/table-tree 9.1.7 → 9.1.10

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/table-tree
 
+## 9.1.10
+
+### Patch Changes
+
+- [`70c2c0e00ea`](https://bitbucket.org/atlassian/atlassian-frontend/commits/70c2c0e00ea) - Updates `@emotion/core` v10 to `@emotion/react` v11. No expected behaviour change.
+
+## 9.1.9
+
+### Patch Changes
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
+## 9.1.8
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.1.7
 
 ### Patch Changes

package/dist/cjs/components/header.js

@@ -21,7 +21,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -33,7 +33,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 
 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; } }
 
-var headerStyles = (0, _core.css)({
+var headerStyles = (0, _react2.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: 12,
   fontWeight: 'bold',
@@ -55,7 +55,7 @@ var Header = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var props = this.props;
-      return (0, _core.jsx)(_commonCell.default, (0, _extends2.default)({
+      return (0, _react2.jsx)(_commonCell.default, (0, _extends2.default)({
         css: headerStyles,
         role: "columnheader",
         style: {

package/dist/cjs/components/headers.js

@@ -19,13 +19,13 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 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; } }
 
-var containerStyles = (0, _core.css)({
+var containerStyles = (0, _react2.css)({
   display: 'flex',
   borderBottom: "solid 2px ".concat("var(--ds-border, #dfe1e6)")
 });
@@ -43,7 +43,7 @@ var Headers = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(Headers, [{
     key: "render",
     value: function render() {
-      return (0, _core.jsx)("div", {
+      return (0, _react2.jsx)("div", {
         css: containerStyles,
         role: "row"
       }, _react.Children.map(this.props.children, function (header, index) {

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

@@ -11,12 +11,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _excluded = ["indent", "width"];
-var commonStyles = (0, _core.css)({
+var commonStyles = (0, _react.css)({
   display: 'flex',
   boxSizing: 'border-box',
   minHeight: 40,
@@ -34,7 +34,7 @@ var CommonCell = function CommonCell(_ref) {
   var indent = _ref.indent,
       width = _ref.width,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)("div", (0, _extends2.default)({}, props, {
     style: {
       '--indent': indent,
       width: width

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

@@ -21,7 +21,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _toItemId = _interopRequireDefault(require("../../utils/to-item-id"));
 
@@ -62,9 +62,9 @@ var Item = /*#__PURE__*/function (_Component) {
         depth: depth,
         data: data,
         renderChildren: function renderChildren() {
-          return (0, _core.jsx)("div", {
+          return (0, _react2.jsx)("div", {
             id: (0, _toItemId.default)(itemId)
-          }, (0, _core.jsx)(_items.default, {
+          }, (0, _react2.jsx)(_items.default, {
             parentData: data,
             depth: depth,
             items: items,

package/dist/cjs/components/internal/overflow-container.js

@@ -11,10 +11,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _excluded = ["isSingleLine"];
-var overflowContainerStyles = (0, _core.css)({
+var overflowContainerStyles = (0, _react.css)({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -27,7 +27,7 @@ var OverflowContainer = function OverflowContainer(_ref) {
   var isSingleLine = _ref.isSingleLine,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)("span", (0, _extends2.default)({
+    (0, _react.jsx)("span", (0, _extends2.default)({
       css: isSingleLine && overflowContainerStyles
     }, props))
   );

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

@@ -11,14 +11,14 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
 var _excluded = ["isRoot"];
 var iconColor = "var(--ds-text, ".concat(_colors.N800, ")");
 exports.iconColor = iconColor;
-var treeRowContainerStyles = (0, _core.css)({
+var treeRowContainerStyles = (0, _react.css)({
   display: 'flex',
   borderBottom: "1px solid ".concat("var(--ds-border, ".concat(_colors.N30, ")"))
 });
@@ -28,14 +28,14 @@ var treeRowContainerStyles = (0, _core.css)({
 
 var TreeRowContainer = function TreeRowContainer(props) {
   return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    (0, _core.jsx)("div", (0, _extends2.default)({
+    (0, _react.jsx)("div", (0, _extends2.default)({
       css: treeRowContainerStyles
     }, props))
   );
 };
 
 exports.TreeRowContainer = TreeRowContainer;
-var commonChevronContainerStyles = (0, _core.css)({
+var commonChevronContainerStyles = (0, _react.css)({
   display: 'flex',
   marginLeft: -25,
   position: 'absolute',
@@ -48,13 +48,13 @@ var commonChevronContainerStyles = (0, _core.css)({
 
 var ChevronContainer = function ChevronContainer(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 ) {
-  return (0, _core.jsx)("span", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
     css: commonChevronContainerStyles
   }));
 };
 
 exports.ChevronContainer = ChevronContainer;
-var chevronIconContainerStyles = (0, _core.css)({
+var chevronIconContainerStyles = (0, _react.css)({
   position: 'relative',
   top: 1
 });
@@ -66,17 +66,17 @@ var chevronIconContainerStyles = (0, _core.css)({
 
 var ChevronIconContainer = function ChevronIconContainer(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 ) {
-  return (0, _core.jsx)("span", (0, _extends2.default)({}, props, {
+  return (0, _react.jsx)("span", (0, _extends2.default)({}, props, {
     css: chevronIconContainerStyles
   }));
 };
 
 exports.ChevronIconContainer = ChevronIconContainer;
-var loadingItemContainerStyles = (0, _core.css)({
+var loadingItemContainerStyles = (0, _react.css)({
   width: '100%',
   paddingTop: 5
 });
-var paddingLeftStyles = (0, _core.css)({
+var paddingLeftStyles = (0, _react.css)({
   paddingLeft: '50%'
 });
 /**
@@ -88,7 +88,7 @@ var paddingLeftStyles = (0, _core.css)({
 var LoaderItemContainer = function LoaderItemContainer(_ref) {
   var isRoot = _ref.isRoot,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)("span", (0, _extends2.default)({
+  return (0, _react.jsx)("span", (0, _extends2.default)({
     css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles] // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 
   }, props));

package/dist/cjs/components/row.js

@@ -44,7 +44,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 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; } }
 
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.1.7";
+var packageVersion = "9.1.10";
 
 var Row = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);

package/dist/cjs/version.json

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

package/dist/es2019/components/header.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import ColumnCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';

package/dist/es2019/components/headers.js

@@ -2,7 +2,7 @@
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { Children, cloneElement, Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 const containerStyles = css({
   display: 'flex',
   borderBottom: `solid 2px ${"var(--ds-border, #dfe1e6)"}`

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 const commonStyles = css({
   display: 'flex',

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

@@ -4,7 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { cloneElement, Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import toItemId from '../../utils/to-item-id';
 import Items from './items';
 export default class Item extends Component {

package/dist/es2019/components/internal/overflow-container.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 const overflowContainerStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N30, N800 } from '@atlaskit/theme/colors';
 export const iconColor = `var(--ds-text, ${N800})`;
 const treeRowContainerStyles = css({

package/dist/es2019/components/row.js

@@ -8,7 +8,7 @@ import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
 const packageName = "@atlaskit/table-tree";
-const packageVersion = "9.1.7";
+const packageVersion = "9.1.10";
 
 class Row extends Component {
   constructor(...args) {

package/dist/es2019/version.json

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

package/dist/esm/components/header.js

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /** @jsx jsx */
 import { Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
 import ColumnCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';

package/dist/esm/components/headers.js

@@ -12,7 +12,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { Children, cloneElement, Component } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 var containerStyles = css({
   display: 'flex',
   borderBottom: "solid 2px ".concat("var(--ds-border, #dfe1e6)")

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

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["indent", "width"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N800 } from '@atlaskit/theme/colors';
 var commonStyles = css({
   display: 'flex',

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

@@ -13,7 +13,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /* eslint-disable @repo/internal/react/no-clone-element */
 import { cloneElement, Component } from 'react';
-import { jsx } from '@emotion/core';
+import { jsx } from '@emotion/react';
 import toItemId from '../../utils/to-item-id';
 import Items from './items';
 

package/dist/esm/components/internal/overflow-container.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["isSingleLine"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 var overflowContainerStyles = css({
   overflow: 'hidden',
   textOverflow: 'ellipsis',

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

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/extends";
 var _excluded = ["isRoot"];
 
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N30, N800 } from '@atlaskit/theme/colors';
 export var iconColor = "var(--ds-text, ".concat(N800, ")");
 var treeRowContainerStyles = css({

package/dist/esm/components/row.js

@@ -18,7 +18,7 @@ import toItemId from '../utils/to-item-id';
 import Chevron from './internal/chevron';
 import { TreeRowContainer } from './internal/styled';
 var packageName = "@atlaskit/table-tree";
-var packageVersion = "9.1.7";
+var packageVersion = "9.1.10";
 
 var Row = /*#__PURE__*/function (_Component) {
   _inherits(Row, _Component);

package/dist/esm/version.json

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

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

@@ -1,8 +1,20 @@
 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: {
@@ -59,7 +71,7 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<CellProps & import("./internal/with-column-width").CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     contextTypes: {
-        tableTree: import("prop-types").Validator<any>;
+        tableTree: import("prop-types").Validator<object>;
     };
     contextType?: React.Context<any> | undefined;
 };

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

@@ -53,7 +53,7 @@ declare const _default: {
         UNSAFE_componentWillUpdate?(nextProps: Readonly<any>, nextState: Readonly<{}>, nextContext: any): void;
     };
     contextTypes: {
-        tableTree: import("prop-types").Validator<any>;
+        tableTree: import("prop-types").Validator<object>;
     };
     contextType?: import("react").Context<any> | undefined;
 };

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

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

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

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

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

@@ -58,7 +58,7 @@ export default function withColumnWidth<T extends object>(Cell: React.ComponentT
         UNSAFE_componentWillUpdate?(nextProps: Readonly<T & CellWithColumnWidthProps>, nextState: Readonly<{}>, nextContext: any): void;
     };
     contextTypes: {
-        tableTree: PropTypes.Validator<any>;
+        tableTree: PropTypes.Validator<object>;
     };
     contextType?: React.Context<any> | undefined;
 };

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

@@ -15,5 +15,5 @@ declare class Row extends Component<any, any> {
     render(): JSX.Element;
 }
 export { Row as RowWithoutAnalytics };
-declare const _default: React.ForwardRefExoticComponent<Pick<Pick<Pick<any, string | number | symbol>, string | number | symbol> & React.RefAttributes<any> & import("@atlaskit/analytics-next").WithContextProps, string | number | symbol> & React.RefAttributes<any>>;
+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/components/table-tree.d.ts

@@ -5,7 +5,7 @@ interface State {
 }
 export default class TableTree extends Component<any, State> {
     static childContextTypes: {
-        tableTree: PropTypes.Validator<any>;
+        tableTree: PropTypes.Validator<object>;
     };
     state: State;
     componentDidMount(): void;

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

@@ -0,0 +1,7 @@
+import { CellProps } from '../src/components/cell';
+
+const TableRows = function (props: CellProps) {
+  return null;
+};
+
+export default TableRows;

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

@@ -0,0 +1,20 @@
+/**
+ * This is hard-coded here because our actual <Header /> has no typings
+ * for its props.
+ *
+ * Adding types for real *might* break things so will need a little care.
+ *
+ * Defining it here for now lets us provide *something* without much headache.
+ */
+type HeaderProps = {
+  /**
+   * Width of the header item. Takes a string, or a number representing the width in pixels.
+   */
+  width?: string | number;
+};
+
+const TableHeader = function (props: HeaderProps) {
+  return null;
+};
+
+export default TableHeader;

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

@@ -0,0 +1,85 @@
+import { ReactNode } from 'react';
+
+import { Item } from './table-tree';
+
+/**
+ * This is hard-coded here because our actual <TableTree /> has no typings
+ * for its props.
+ *
+ * Adding types for real *might* break things so will need a little care.
+ *
+ * Defining it here for now lets us provide *something* without much headache.
+ */
+type RowProps = {
+  /**
+   * Whether the row has children
+   */
+  hasChildren?: boolean;
+  /**
+   * Children contained in the row. Should be one or more Cell components.
+   */
+  children?: React.ReactNode;
+  /**
+   * ID for the row item
+   */
+  itemId?: string;
+  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /**
+    The data used to render the row and descendants. Pass down from `children` render prop.
+
+    In addition to these props, any other data can be added to the object, and it will
+    be provided as props when rendering each cell.
+   */
+  // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
+  items?: Item[] | null;
+  /**
+   * Controls the expanded state of the row.
+   */
+  isExpanded?: ReactNode;
+  /**
+   * Sets the default expanded state of the row.
+   */
+  isDefaultExpanded?: ReactNode;
+  /**
+   * `aria-label` attached to the expand chevron button
+   */
+  expandLabel?: string;
+  /**
+   * `aria-label` attached to the collapse chevron button
+   */
+  collapseLabel?: string;
+  /**
+   * Callback called when row collapses.
+   */
+  onCollapse?: (data: Item) => void;
+  /**
+   * Callback called when row expands.
+   */
+  onExpand?: (data: Item) => void;
+  /**
+   * Children to render under row.
+   * Normally set by parent Item component and does not need to be configured.
+   */
+  renderChildren?: () => React.ReactNode;
+  /**
+   * Data to render. Passed down by Item and passed into onExpand and onCollapse callbacks.
+   * Normally set by parent Item component and does not need to be configured.
+   */
+  // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
+  data?: Item;
+  /**
+   * Depth used for rendering indent.
+   * Normally set by parent Item component and does not need to be configured.
+   */
+  depth?: number;
+};
+
+const TableRow = function (props: RowProps) {
+  return null;
+};
+
+TableRow.defaultProps = {
+  isDefaultExpanded: false,
+};
+
+export default TableRow;

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

@@ -0,0 +1,34 @@
+import { Item } from './table-tree';
+
+/**
+ * This is hard-coded here because our actual <Rows /> has no typings
+ * for its props.
+ *
+ * Adding types for real *might* break things so will need a little care.
+ *
+ * Defining it here for now lets us provide *something* without much headache.
+ */
+type RowsProps = {
+  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
+  /**
+    The data used to render the set of rows. Will be passed down via the `children` render prop.
+
+    In addition to these props, any other data can be added to the object, and it will
+    be provided as props when rendering each cell.
+   */
+  // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
+  items?: Item[] | null;
+  /**
+   * Render function for child rows. Render props will contain an item from the
+   * `items` prop above.
+   */
+  render?: (item: Item) => React.ReactNode;
+};
+
+const TableRows = function (props: RowsProps) {
+  return null;
+};
+
+TableRows.defaultProps = {};
+
+export default TableRows;

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

@@ -2,9 +2,8 @@ import { ElementType, ReactNode } from 'react';
 
 class Content extends Object {}
 
-type Item = {
+export type Item = {
   id: string;
-  content: Content;
   hasChildren: boolean;
   children?: Item[];
 };
@@ -37,10 +36,12 @@ type TableTreeProps = {
    * The header text of the respective columns of the table.
    */
   headers?: string[];
+  // eslint-disable-next-line jsdoc/require-asterisk-prefix, jsdoc/check-alignment
   /**
-   * The data used to render the table.
-   * The type of `content` can be whatever you would like, and its value will be
-   * provided as props when rendering each cell.
+    The data used to render the table.
+
+    In addition to these props, any other data can be added, and it will
+    be provided as props when rendering each cell.
    */
   // eslint-disable-next-line @repo/internal/react/consistent-props-definitions
   items?: Item[] | null;

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/table-tree",
-  "version": "9.1.7",
+  "version": "9.1.10",
   "description": "A table tree is an expandable table for showing nested hierarchies of information.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -19,7 +19,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Table tree"
+      "name": "Table tree",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -27,13 +28,13 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.2.0",
-    "@atlaskit/button": "^16.2.0",
+    "@atlaskit/button": "^16.3.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/spinner": "^15.0.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9",
+    "@emotion/react": "^11.7.1",
     "lodash": "^4.17.21",
     "prop-types": "^15.5.10"
   },
@@ -44,11 +45,11 @@
     "@atlaskit/docs": "*",
     "@atlaskit/empty-state": "^7.3.0",
     "@atlaskit/section-message": "^6.0.0",
-    "@atlaskit/select": "^15.0.0",
+    "@atlaskit/select": "^15.6.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
-    "@emotion/styled": "^10.0.7",
+    "@emotion/styled": "^11.0.0",
     "enzyme": "^3.10.0",
     "exenv": "^1.2.2",
     "react-dom": "^16.8.0",
@@ -68,6 +69,7 @@
       "circular-dependencies": "file-and-folder-level"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",

package/report.api.md

@@ -0,0 +1,369 @@
+## API Report File for "@atlaskit/table-tree"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { Component } from 'react';
+import { Context } from 'react';
+import { ErrorInfo } from 'react';
+import PropTypes from 'prop-types';
+import { default as React_2 } from 'react';
+import { ReactInstance } from 'react';
+import { ReactNode } from 'react';
+import { Validator } from 'prop-types';
+import { WithAnalyticsEventsProps } from '@atlaskit/analytics-next';
+import { WithContextProps } from '@atlaskit/analytics-next';
+
+export declare const Cell: {
+  new (props: Readonly<CellProps & CellWithColumnWidthProps>): {
+    UNSAFE_componentWillMount(): void;
+    setColumnWidth(width?: string | number | undefined): void;
+    UNSAFE_componentWillReceiveProps(nextProps: CellWithColumnWidthProps): void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<CellProps & CellWithColumnWidthProps>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callBack?: (() => void) | undefined): void;
+    readonly props: Readonly<CellProps & CellWithColumnWidthProps> &
+      Readonly<{
+        children?: React_2.ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: React_2.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React_2.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  new (props: CellProps & CellWithColumnWidthProps, context?: any): {
+    UNSAFE_componentWillMount(): void;
+    setColumnWidth(width?: string | number | undefined): void;
+    UNSAFE_componentWillReceiveProps(nextProps: CellWithColumnWidthProps): void;
+    render(): JSX.Element;
+    context: any;
+    setState<K extends never>(
+      state:
+        | {}
+        | ((
+            prevState: Readonly<{}>,
+            props: Readonly<CellProps & CellWithColumnWidthProps>,
+          ) => {} | Pick<{}, K> | null)
+        | Pick<{}, K>
+        | null,
+      callback?: (() => void) | undefined,
+    ): void;
+    forceUpdate(callBack?: (() => void) | undefined): void;
+    readonly props: Readonly<CellProps & CellWithColumnWidthProps> &
+      Readonly<{
+        children?: React_2.ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: React_2.ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: React_2.ErrorInfo): void;
+    getSnapshotBeforeUpdate?(
+      prevProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      prevState: Readonly<{}>,
+    ): any;
+    componentDidUpdate?(
+      prevProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      prevState: Readonly<{}>,
+      snapshot?: any,
+    ): void;
+    componentWillMount?(): void;
+    componentWillReceiveProps?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextContext: any,
+    ): void;
+    componentWillUpdate?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+    UNSAFE_componentWillUpdate?(
+      nextProps: Readonly<CellProps & CellWithColumnWidthProps>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): void;
+  };
+  contextTypes: {
+    tableTree: Validator<object>;
+  };
+  contextType?: React_2.Context<any> | undefined;
+};
+
+export declare 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;
+}
+
+export declare interface CellWithColumnWidthProps {
+  width?: number | string;
+  columnIndex?: number;
+}
+
+export declare const Header: {
+  new (props: Readonly<any>): {
+    UNSAFE_componentWillMount(): void;
+    setColumnWidth(width?: string | number | undefined): void;
+    UNSAFE_componentWillReceiveProps(nextProps: 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?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<any>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: 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: 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?: ReactNode;
+      }>;
+    state: Readonly<{}>;
+    refs: {
+      [key: string]: ReactInstance;
+    };
+    componentDidMount?(): void;
+    shouldComponentUpdate?(
+      nextProps: Readonly<any>,
+      nextState: Readonly<{}>,
+      nextContext: any,
+    ): boolean;
+    componentWillUnmount?(): void;
+    componentDidCatch?(error: Error, errorInfo: 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: Validator<object>;
+  };
+  contextType?: Context<any> | undefined;
+};
+
+declare class Headers_2 extends Component<any> {
+  render(): JSX.Element;
+}
+export { Headers_2 as Headers };
+
+export declare const Row: React_2.ForwardRefExoticComponent<
+  Pick<
+    Pick<Omit<any, keyof WithAnalyticsEventsProps>, string | number | symbol> &
+      React_2.RefAttributes<any> &
+      WithContextProps,
+    string | number | symbol
+  > &
+    React_2.RefAttributes<any>
+>;
+
+export declare class Rows<T> extends Component<RowsProps<T>> {
+  render(): JSX.Element;
+}
+
+export declare interface RowsProps<T> {
+  items?: WithChildren<T>[];
+  render: (args: WithChildren<T>) => React_2.ReactNode;
+}
+
+declare interface State {
+  columnWidths: number[];
+}
+
+declare 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 default TableTree;
+
+/**
+ * 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 declare 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[];
+}
+
+declare type WithChildren<T> = T & {
+  children?: T[] | null;
+};
+
+export {};
+```