@atlaskit/table-tree 9.0.11 → 9.0.15

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

@@ -27,17 +27,15 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _styled = require("../styled");
+var _cell = _interopRequireDefault(require("./cell"));
 
-var _Cell = _interopRequireDefault(require("./Cell"));
+var _header = _interopRequireDefault(require("./header"));
 
-var _Header = _interopRequireDefault(require("./Header"));
+var _headers = _interopRequireDefault(require("./headers"));
 
-var _Headers = _interopRequireDefault(require("./Headers"));
+var _row = _interopRequireDefault(require("./row"));
 
-var _Row = _interopRequireDefault(require("./Row"));
-
-var _Rows = _interopRequireDefault(require("./Rows"));
+var _rows = _interopRequireDefault(require("./rows"));
 
 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); }
 
@@ -116,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]
@@ -131,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,
@@ -154,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

@@ -5,59 +5,59 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
+Object.defineProperty(exports, "Cell", {
   enumerable: true,
   get: function get() {
-    return _TableTree.default;
+    return _cell.default;
   }
 });
-Object.defineProperty(exports, "Headers", {
+Object.defineProperty(exports, "Header", {
   enumerable: true,
   get: function get() {
-    return _Headers.default;
+    return _header.default;
   }
 });
-Object.defineProperty(exports, "Header", {
+Object.defineProperty(exports, "Headers", {
   enumerable: true,
   get: function get() {
-    return _Header.default;
+    return _headers.default;
   }
 });
-Object.defineProperty(exports, "Cell", {
+Object.defineProperty(exports, "Row", {
   enumerable: true,
   get: function get() {
-    return _Cell.default;
+    return _row.default;
   }
 });
 Object.defineProperty(exports, "Rows", {
   enumerable: true,
   get: function get() {
-    return _Rows.default;
+    return _rows.default;
   }
 });
-Object.defineProperty(exports, "Row", {
+Object.defineProperty(exports, "TableTreeDataHelper", {
   enumerable: true,
   get: function get() {
-    return _Row.default;
+    return _tableTreeDataHelper.default;
   }
 });
-Object.defineProperty(exports, "TableTreeDataHelper", {
+Object.defineProperty(exports, "default", {
   enumerable: true,
   get: function get() {
-    return _TableTreeDataHelper.default;
+    return _tableTree.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}

@@ -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.11",
+	"version": "9.0.15",
 	"sideEffects": false
 }

package/dist/es2019/components/cell.js

@@ -0,0 +1,29 @@
+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}px` : undefined,
+      width: 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,32 @@
+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,
+  width,
+  ...props
+}) => jsx("div", _extends({}, props, {
+  style: {
+    '--indent': indent,
+    width
+  },
+  css: commonStyles
+}));
+
+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,58 @@
+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, {
+      indent: `${25 * depth}px`,
+      width: "100%"
+    }, /*#__PURE__*/React.createElement(LoaderItemContainer, {
+      isRoot: depth === 1
+    }, /*#__PURE__*/React.createElement(Spinner, {
+      size: "small"
+    })))) : null;
+  }
+
+}
+
+_defineProperty(LoaderItem, "defaultProps", {
+  depth: 1
+});

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

@@ -0,0 +1,21 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+const overflowContainerStyles = css({
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+  whiteSpace: 'nowrap'
+});
+/**
+ * __Overflow container__
+ */
+
+const OverflowContainer = ({
+  isSingleLine,
+  ...props
+}) => jsx("span", _extends({
+  css: isSingleLine && overflowContainerStyles
+}, props));
+
+export default OverflowContainer;

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

@@ -0,0 +1,63 @@
+import _extends from "@babel/runtime/helpers/extends";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N30, N800 } from '@atlaskit/theme/colors';
+export const iconColor = `var(--ds-text-highEmphasis, ${N800})`;
+const treeRowContainerStyles = css({
+  display: 'flex',
+  borderBottom: `1px solid ${`var(--ds-border-neutral, ${N30})`}`
+});
+/**
+ * __Tree row container__
+ */
+
+export const TreeRowContainer = props => jsx("div", _extends({
+  css: treeRowContainerStyles
+}, props));
+const commonChevronContainerStyles = css({
+  display: 'flex',
+  marginLeft: -25,
+  position: 'absolute',
+  top: 7,
+  alignItems: 'center'
+});
+/**
+ * __Chevron container__
+ */
+
+export const ChevronContainer = props => jsx("span", _extends({}, props, {
+  css: commonChevronContainerStyles
+}));
+const chevronIconContainerStyles = css({
+  position: 'relative',
+  top: 1
+});
+/**
+ * __Chevron icon container__
+ *
+ * A chevron icon container.
+ */
+
+export const ChevronIconContainer = props => jsx("span", _extends({}, props, {
+  css: chevronIconContainerStyles
+}));
+const loadingItemContainerStyles = css({
+  width: '100%',
+  paddingTop: 5
+});
+const paddingLeftStyles = css({
+  paddingLeft: '50%'
+});
+/**
+ * __Loader item container__
+ *
+ * A loader item container.
+ */
+
+export const LoaderItemContainer = ({
+  isRoot,
+  ...props
+}) => jsx("span", _extends({
+  css: [commonChevronContainerStyles, loadingItemContainerStyles, isRoot && paddingLeftStyles]
+}, props));

package/dist/es2019/components/internal/with-column-width.js

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