@atlaskit/table-tree 9.0.9 → 9.0.13

package/dist/cjs/components/{Row.js → row.js}

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -29,18 +29,22 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
-var _styled = require("../styled");
+var _toItemId = _interopRequireDefault(require("../utils/to-item-id"));
+
+var _chevron = _interopRequireDefault(require("./internal/chevron"));
+
+var _styled = require("./internal/styled");
 
-var _toItemId = _interopRequireDefault(require("../utils/toItemId"));
+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); }
 
-var _Chevron = _interopRequireDefault(require("./Chevron"));
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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.0.9";
+var packageVersion = "9.0.13";
 
 var Row = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Row, _Component);
@@ -119,7 +123,7 @@ var Row = /*#__PURE__*/function (_Component) {
       var cellContent = cell.props.children || [];
 
       if (isFirstCell && hasChildren) {
-        cellContent = [/*#__PURE__*/_react.default.createElement(_Chevron.default, {
+        cellContent = [/*#__PURE__*/_react.default.createElement(_chevron.default, {
           key: "chevron",
           expandLabel: props.expandLabel,
           collapseLabel: props.collapseLabel,

package/dist/cjs/components/{Rows.js → rows.js}

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,11 +21,15 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Items = _interopRequireDefault(require("./Items"));
+var _items = _interopRequireDefault(require("./internal/items"));
+
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 Rows = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Rows, _Component);
@@ -40,11 +44,10 @@ var Rows = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(Rows, [{
     key: "render",
     value: function render() {
-      // eslint-disable-next-line react/prop-types
       var _this$props = this.props,
           items = _this$props.items,
           render = _this$props.render;
-      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Items.default, {
+      return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_items.default, {
         items: items,
         render: render
       }));

package/dist/cjs/components/{TableTree.js → table-tree.js}

@@ -1,9 +1,9 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -27,21 +27,23 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = require("../styled");
+var _cell = _interopRequireDefault(require("./cell"));
+
+var _header = _interopRequireDefault(require("./header"));
 
-var _Cell = _interopRequireDefault(require("./Cell"));
+var _headers = _interopRequireDefault(require("./headers"));
 
-var _Header = _interopRequireDefault(require("./Header"));
+var _row = _interopRequireDefault(require("./row"));
 
-var _Headers = _interopRequireDefault(require("./Headers"));
+var _rows = _interopRequireDefault(require("./rows"));
 
-var _Row = _interopRequireDefault(require("./Row"));
+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); }
 
-var _Rows = _interopRequireDefault(require("./Rows"));
+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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+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 TableTree = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(TableTree, _Component);
@@ -112,11 +114,11 @@ var TableTree = /*#__PURE__*/function (_Component) {
           _this$props$columnWid = _this$props.columnWidths,
           columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid;
 
-      var heads = headers && /*#__PURE__*/_react.default.createElement(_Headers.default, null, headers.map(function (header, index) {
+      var heads = headers && /*#__PURE__*/_react.default.createElement(_headers.default, null, headers.map(function (header, index) {
         return (
           /*#__PURE__*/
           // eslint-disable-next-line react/no-array-index-key
-          _react.default.createElement(_Header.default, {
+          _react.default.createElement(_header.default, {
             key: index,
             columnIndex: index,
             width: columnWidths[index]
@@ -127,19 +129,19 @@ var TableTree = /*#__PURE__*/function (_Component) {
       var rows = null;
 
       if (columns && items) {
-        rows = /*#__PURE__*/_react.default.createElement(_Rows.default, {
+        rows = /*#__PURE__*/_react.default.createElement(_rows.default, {
           items: items,
           render: function render(_ref) {
             var id = _ref.id,
                 children = _ref.children,
                 hasChildren = _ref.hasChildren,
                 content = _ref.content;
-            return /*#__PURE__*/_react.default.createElement(_Row.default, {
+            return /*#__PURE__*/_react.default.createElement(_row.default, {
               itemId: id,
               items: children,
               hasChildren: hasChildren
             }, columns.map(function (CellContent, index) {
-              return /*#__PURE__*/_react.default.createElement(_Cell.default // eslint-disable-next-line react/no-array-index-key
+              return /*#__PURE__*/_react.default.createElement(_cell.default // eslint-disable-next-line react/no-array-index-key
               , {
                 key: index,
                 columnIndex: index,
@@ -150,7 +152,7 @@ var TableTree = /*#__PURE__*/function (_Component) {
         });
       }
 
-      return /*#__PURE__*/_react.default.createElement(_styled.TableTreeContainer, {
+      return /*#__PURE__*/_react.default.createElement("div", {
         role: "treegrid",
         "aria-readonly": true
       }, heads, rows, this.props.children);

package/dist/cjs/index.js

@@ -8,56 +8,56 @@ Object.defineProperty(exports, "__esModule", {
 Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _TableTree.default;
+    return _tableTree.default;
   }
 });
 Object.defineProperty(exports, "Headers", {
   enumerable: true,
   get: function get() {
-    return _Headers.default;
+    return _headers.default;
   }
 });
 Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _Header.default;
+    return _header.default;
   }
 });
 Object.defineProperty(exports, "Cell", {
   enumerable: true,
   get: function get() {
-    return _Cell.default;
+    return _cell.default;
   }
 });
 Object.defineProperty(exports, "Rows", {
   enumerable: true,
   get: function get() {
-    return _Rows.default;
+    return _rows.default;
   }
 });
 Object.defineProperty(exports, "Row", {
   enumerable: true,
   get: function get() {
-    return _Row.default;
+    return _row.default;
   }
 });
 Object.defineProperty(exports, "TableTreeDataHelper", {
   enumerable: true,
   get: function get() {
-    return _TableTreeDataHelper.default;
+    return _tableTreeDataHelper.default;
   }
 });
 
-var _TableTree = _interopRequireDefault(require("./components/TableTree"));
+var _tableTree = _interopRequireDefault(require("./components/table-tree"));
 
-var _Headers = _interopRequireDefault(require("./components/Headers"));
+var _headers = _interopRequireDefault(require("./components/headers"));
 
-var _Header = _interopRequireDefault(require("./components/Header"));
+var _header = _interopRequireDefault(require("./components/header"));
 
-var _Cell = _interopRequireDefault(require("./components/Cell"));
+var _cell = _interopRequireDefault(require("./components/cell"));
 
-var _Rows = _interopRequireDefault(require("./components/Rows"));
+var _rows = _interopRequireDefault(require("./components/rows"));
 
-var _Row = _interopRequireDefault(require("./components/Row"));
+var _row = _interopRequireDefault(require("./components/row"));
 
-var _TableTreeDataHelper = _interopRequireDefault(require("./utils/TableTreeDataHelper"));
+var _tableTreeDataHelper = _interopRequireDefault(require("./utils/table-tree-data-helper"));

package/dist/cjs/utils/{TableTreeDataHelper.js → table-tree-data-helper.js}

@@ -19,7 +19,7 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _set = _interopRequireDefault(require("lodash/set"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
@@ -103,8 +103,6 @@ var TableTreeDataHelper = /*#__PURE__*/function () {
         key = _ref3$key === void 0 ? 'key' : _ref3$key;
 
     (0, _classCallCheck2.default)(this, TableTreeDataHelper);
-    (0, _defineProperty2.default)(this, "key", void 0);
-    (0, _defineProperty2.default)(this, "keysCache", void 0);
     this.key = key;
     this.keysCache = {};
   }

package/dist/cjs/version.json

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

package/dist/es2019/components/cell.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import React, { Component } from 'react';
+import CommonCell from './internal/common-cell';
+import OverflowContainer from './internal/overflow-container';
+import withColumnWidth from './internal/with-column-width';
+
+class Cell extends Component {
+  render() {
+    const {
+      children,
+      singleLine,
+      indentLevel,
+      width,
+      className,
+      ...props
+    } = this.props;
+    return /*#__PURE__*/React.createElement(CommonCell, _extends({
+      role: "gridcell",
+      indent: indentLevel ? `${25 * indentLevel}` : undefined,
+      style: {
+        width
+      },
+      className: className
+    }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
+      isSingleLine: singleLine
+    }, children));
+  }
+
+}
+
+export default withColumnWidth(Cell);

package/dist/es2019/components/header.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+import { Component } from 'react';
+import { css, jsx } from '@emotion/core';
+import { N300 } from '@atlaskit/theme/colors';
+import ColumnCell from './internal/common-cell';
+import withColumnWidth from './internal/with-column-width';
+const headerStyles = css({
+  color: `var(--ds-text-mediumEmphasis, ${N300})`,
+  fontSize: 12,
+  fontWeight: 'bold',
+  letterSpacing: -0.1,
+  lineHeight: '1.67'
+});
+
+class Header extends Component {
+  render() {
+    const {
+      props
+    } = this;
+    return jsx(ColumnCell, _extends({
+      css: headerStyles,
+      role: "columnheader",
+      style: {
+        width: props.width
+      }
+    }, props), props.children);
+  }
+
+}
+
+export default withColumnWidth(Header);

package/dist/es2019/components/headers.js

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+
+/* eslint-disable @repo/internal/react/no-clone-element */
+import { Children, cloneElement, Component } from 'react';
+import { css, jsx } from '@emotion/core';
+const containerStyles = css({
+  display: 'flex',
+  borderBottom: `solid 2px ${"var(--ds-border-neutral, #dfe1e6)"}`
+});
+export default class Headers extends Component {
+  render() {
+    return jsx("div", {
+      css: containerStyles,
+      role: "row"
+    }, Children.map(this.props.children, (header, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    cloneElement(header, {
+      key: index,
+      columnIndex: index
+    })));
+  }
+
+}

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

@@ -0,0 +1,51 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @repo/internal/react/consistent-props-definitions */
+
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+import Button from '@atlaskit/button';
+import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import { ChevronContainer, ChevronIconContainer, iconColor } from './styled';
+export default class Chevron extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "handleClick", () => {
+      if (this.props.onExpandToggle) {
+        this.props.onExpandToggle();
+      }
+    });
+  }
+
+  render() {
+    const {
+      isExpanded,
+      ariaControls,
+      collapseLabel,
+      expandLabel
+    } = this.props;
+    const iconProps = {
+      size: 'medium',
+      primaryColor: iconColor
+    };
+    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
+    }, iconProps)) : /*#__PURE__*/React.createElement(ChevronRightIcon, _extends({
+      label: expandLabel
+    }, iconProps)))));
+  }
+
+}
+
+_defineProperty(Chevron, "defaultProps", {
+  expandLabel: 'Expand',
+  collapseLabel: 'Collapse'
+});

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

@@ -0,0 +1,30 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N800 } from '@atlaskit/theme/colors';
+const commonStyles = css({
+  display: 'flex',
+  boxSizing: 'border-box',
+  minHeight: 40,
+  padding: '10px 25px 10px var(--indent, 25px)',
+  position: 'relative',
+  alignItems: 'flex-start',
+  color: `var(--ds-text-highEmphasis, ${N800})`,
+  lineHeight: '20px'
+});
+
+/**
+ * __Common cell__
+ */
+const CommonCell = ({
+  indent,
+  ...props
+}) => jsx("div", _extends({
+  style: {
+    '--indent': indent
+  },
+  css: commonStyles
+}, props));
+
+export default CommonCell;

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

@@ -0,0 +1,46 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/** @jsx jsx */
+
+/* eslint-disable @repo/internal/react/no-clone-element */
+import { cloneElement, Component } from 'react';
+import { jsx } from '@emotion/core';
+import toItemId from '../../utils/to-item-id';
+import Items from './items';
+export default class Item extends Component {
+  render() {
+    // eslint-disable-next-line react/prop-types
+    const {
+      depth,
+      data,
+      render
+    } = this.props;
+    const renderedRow = render(data);
+
+    if (!renderedRow) {
+      return null;
+    }
+
+    const {
+      itemId,
+      items
+    } = renderedRow.props;
+    return /*#__PURE__*/cloneElement(renderedRow, {
+      depth,
+      data,
+      renderChildren: () => jsx("div", {
+        id: toItemId(itemId)
+      }, jsx(Items, {
+        parentData: data,
+        depth: depth,
+        items: items,
+        render: render
+      }))
+    });
+  }
+
+}
+
+_defineProperty(Item, "defaultProps", {
+  depth: 0
+});

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

@@ -0,0 +1,76 @@
+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 Item from './item';
+import LoaderItem from './loader-item';
+export default class Items extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      isLoaderShown: false
+    });
+
+    _defineProperty(this, "handleLoaderComplete", () => {
+      this.setState({
+        isLoaderShown: false
+      });
+    });
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (!nextProps.items && !prevState.isLoaderShown) {
+      return {
+        isLoaderShown: true
+      };
+    }
+
+    return null;
+  }
+
+  renderLoader() {
+    const {
+      depth,
+      items
+    } = this.props;
+    return /*#__PURE__*/React.createElement(LoaderItem, {
+      isCompleting: !!(items && items.length),
+      onComplete: this.handleLoaderComplete,
+      depth: depth + 1
+    });
+  }
+
+  renderItems() {
+    const {
+      render,
+      items,
+      depth = 0
+    } = this.props;
+    return items && items.map((itemData, index) => /*#__PURE__*/React.createElement(Item, {
+      data: itemData,
+      depth: depth + 1,
+      key: itemData && itemData.id || index,
+      render: render
+    }));
+  }
+
+  render() {
+    const {
+      isLoaderShown
+    } = this.state;
+    const busyAttrs = isLoaderShown ? {
+      'aria-busy': true,
+      'aria-live': 'polite'
+    } : {};
+    return /*#__PURE__*/React.createElement("div", _extends({
+      role: "rowgroup"
+    }, busyAttrs), isLoaderShown ? this.renderLoader() : this.renderItems());
+  }
+
+}
+
+_defineProperty(Items, "defaultProps", {
+  depth: 0
+});

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

@@ -0,0 +1,60 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+import Spinner from '@atlaskit/spinner';
+import CommonCell from './common-cell';
+import { LoaderItemContainer, TreeRowContainer } from './styled';
+export default class LoaderItem extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      phase: 'loading'
+    });
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    if (nextProps.isCompleting && prevState.phase === 'loading') {
+      return {
+        phase: 'complete'
+      };
+    }
+
+    return null;
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.phase === 'loading' && this.state.phase === 'complete') {
+      if (this.props.onComplete) {
+        this.props.onComplete();
+      }
+    }
+  }
+
+  render() {
+    const {
+      depth
+    } = this.props;
+    const {
+      phase
+    } = this.state;
+    return phase === 'loading' ? /*#__PURE__*/React.createElement(TreeRowContainer, null, /*#__PURE__*/React.createElement(CommonCell, {
+      style: {
+        paddingLeft: 25 * depth,
+        width: '100%'
+      }
+    }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
+      isRoot: depth === 1
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small"
+    })))) : null;
+  }
+
+}
+
+_defineProperty(LoaderItem, "defaultProps", {
+  depth: 1
+});