@atlaskit/table-tree 9.0.9 → 9.0.13

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;
+}

package/dist/es2019/components/row.js

@@ -0,0 +1,148 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable @repo/internal/react/no-clone-element */
+import React, { Component, Fragment } from 'react';
+import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
+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.0.13";
+
+class Row extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      isExpanded: this.props.isDefaultExpanded || false
+    });
+
+    _defineProperty(this, "onExpandToggle", () => {
+      const {
+        isExpanded
+      } = this.props;
+
+      if (isExpanded !== undefined) {
+        this.onExpandStateChange(!isExpanded);
+      } else {
+        this.setState({
+          isExpanded: !this.state.isExpanded
+        });
+        this.onExpandStateChange(!this.state.isExpanded);
+      }
+    });
+  }
+
+  componentDidUpdate(prevProps) {
+    const {
+      isDefaultExpanded,
+      isExpanded
+    } = this.props;
+
+    if (isExpanded === undefined && isDefaultExpanded !== undefined && prevProps.isDefaultExpanded !== isDefaultExpanded && this.state.isExpanded !== isDefaultExpanded) {
+      // eslint-disable-next-line react/no-did-update-set-state
+      this.setState({
+        isExpanded: isDefaultExpanded
+      });
+    }
+  }
+
+  onExpandStateChange(isExpanded) {
+    if (this.props.data) {
+      if (isExpanded && this.props.onExpand) {
+        this.props.onExpand(this.props.data);
+      } else if (!isExpanded && this.props.onCollapse) {
+        this.props.onCollapse(this.props.data);
+      }
+    }
+  }
+
+  isExpanded() {
+    const {
+      isExpanded
+    } = this.props;
+    return isExpanded !== undefined ? isExpanded : this.state.isExpanded;
+  }
+
+  renderCell(cell, cellIndex) {
+    const {
+      props
+    } = this;
+    const isExpanded = this.isExpanded();
+    const {
+      hasChildren,
+      depth
+    } = props;
+    const isFirstCell = cellIndex === 0;
+    const indentLevel = isFirstCell ? depth : 0;
+    let cellContent = cell.props.children || [];
+
+    if (isFirstCell && hasChildren) {
+      cellContent = [/*#__PURE__*/React.createElement(Chevron, {
+        key: "chevron",
+        expandLabel: props.expandLabel,
+        collapseLabel: props.collapseLabel,
+        isExpanded: isExpanded,
+        onExpandToggle: this.onExpandToggle,
+        ariaControls: toItemId(props.itemId)
+      })].concat(cellContent);
+    }
+
+    return /*#__PURE__*/React.cloneElement(cell, {
+      key: cellIndex,
+      columnIndex: cellIndex,
+      indentLevel
+    }, cellContent);
+  }
+
+  render() {
+    const {
+      hasChildren,
+      depth,
+      renderChildren
+    } = this.props;
+    const isExpanded = this.isExpanded();
+    const ariaAttrs = {};
+
+    if (hasChildren) {
+      ariaAttrs['aria-expanded'] = isExpanded;
+    }
+
+    if (depth !== undefined) {
+      ariaAttrs['aria-level'] = depth;
+    }
+
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TreeRowContainer, _extends({
+      role: "row"
+    }, ariaAttrs), React.Children.map(this.props.children, (cell, index) => this.renderCell(cell, index))), hasChildren && isExpanded && renderChildren && renderChildren());
+  }
+
+}
+
+export { Row as RowWithoutAnalytics };
+const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
+export default withAnalyticsContext({
+  componentName: 'row',
+  packageName,
+  packageVersion
+})(withAnalyticsEvents({
+  onExpand: createAndFireEventOnAtlaskit({
+    action: 'expanded',
+    actionSubject: 'tableTree',
+    attributes: {
+      componentName: 'row',
+      packageName,
+      packageVersion
+    }
+  }),
+  onCollapse: createAndFireEventOnAtlaskit({
+    action: 'collapsed',
+    actionSubject: 'tableTree',
+    attributes: {
+      componentName: 'row',
+      packageName,
+      packageVersion
+    }
+  })
+})(Row));

package/dist/es2019/components/rows.js

@@ -0,0 +1,15 @@
+import React, { Component } from 'react';
+import Items from './internal/items';
+export default class Rows extends Component {
+  render() {
+    const {
+      items,
+      render
+    } = this.props;
+    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Items, {
+      items: items,
+      render: render
+    }));
+  }
+
+}

package/dist/es2019/components/table-tree.js

@@ -0,0 +1,107 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+/* eslint-disable react/prop-types */
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import Cell from './cell';
+import Header from './header';
+import Headers from './headers';
+import Row from './row';
+import Rows from './rows';
+export default class TableTree extends Component {
+  constructor(...args) {
+    super(...args);
+
+    _defineProperty(this, "state", {
+      columnWidths: []
+    });
+
+    _defineProperty(this, "setColumnWidth", (columnIndex, width) => {
+      const {
+        columnWidths
+      } = this.state;
+
+      if (width === columnWidths[columnIndex]) {
+        return;
+      }
+
+      columnWidths[columnIndex] = width;
+      this.setState({
+        columnWidths
+      });
+    });
+
+    _defineProperty(this, "getColumnWidth", columnIndex => {
+      return this.state && this.state.columnWidths[columnIndex] || null;
+    });
+  }
+
+  componentDidMount() {
+    const widths = this.props.columnWidths;
+
+    if (widths) {
+      this.setState({
+        columnWidths: widths
+      }); // eslint-disable-line
+    }
+  }
+
+  getChildContext() {
+    return {
+      tableTree: {
+        columnWidths: this.state.columnWidths,
+        setColumnWidth: this.setColumnWidth,
+        getColumnWidth: this.getColumnWidth
+      }
+    };
+  }
+
+  render() {
+    const {
+      items,
+      headers,
+      columns,
+      columnWidths = []
+    } = this.props;
+    const heads = headers && /*#__PURE__*/React.createElement(Headers, null, headers.map((header, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    React.createElement(Header, {
+      key: index,
+      columnIndex: index,
+      width: columnWidths[index]
+    }, header)));
+    let rows = null;
+
+    if (columns && items) {
+      rows = /*#__PURE__*/React.createElement(Rows, {
+        items: items,
+        render: ({
+          id,
+          children,
+          hasChildren,
+          content
+        }) => /*#__PURE__*/React.createElement(Row, {
+          itemId: id,
+          items: children,
+          hasChildren: hasChildren
+        }, 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", {
+      role: "treegrid",
+      "aria-readonly": true
+    }, heads, rows, this.props.children);
+  }
+
+}
+
+_defineProperty(TableTree, "childContextTypes", {
+  tableTree: PropTypes.object.isRequired
+});

package/dist/es2019/index.js

@@ -0,0 +1,7 @@
+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';

package/dist/es2019/utils/table-tree-data-helper.js

@@ -0,0 +1,130 @@
+import get from 'lodash/get';
+import set from 'lodash/set';
+
+function updateRootItems(rootItems, allItems = [], {
+  key,
+  keysCache,
+  operation
+}) {
+  const newKeysCache = { ...keysCache
+  }; // If it is not an append operation we can ignore allItems as they will be swaped with new items
+
+  const allBaseItems = operation === 'UPDATE' ? [] : [...allItems];
+  const startIndexWith = allBaseItems.length;
+  rootItems.forEach((rootItem, index) => {
+    const rootItemKey = rootItem[key];
+
+    if (rootItemKey === undefined) {
+      throw new Error(`[ERROR] Property '${key}' not found in rootItem[${index}]`);
+    } else {
+      newKeysCache[rootItem[key]] = index + startIndexWith;
+    }
+  });
+  return {
+    keysCache: newKeysCache,
+    items: allBaseItems.concat(rootItems)
+  };
+}
+
+function updateChildItems(newitems, allTableItems, itemParent, {
+  key,
+  keysCache,
+  operation
+}) {
+  const newKeysCache = { ...keysCache
+  };
+  const parentCacheKey = itemParent[key];
+
+  if (parentCacheKey === undefined) {
+    throw new Error(`[Table Tree] Property '${key}' not found in parent item`);
+  }
+
+  const parentLocation = newKeysCache[parentCacheKey];
+  const allItemsCopy = [...allTableItems];
+  const objectToChange = get(allItemsCopy, parentLocation);
+  const baseChildrenOfObjectToChange = operation === 'UPDATE' ? [] : get(objectToChange, 'children', []);
+  objectToChange.children = baseChildrenOfObjectToChange.concat(newitems); // Update cache
+
+  newitems.forEach((item, index) => {
+    newKeysCache[item[key]] = `${parentLocation}.children[${index + baseChildrenOfObjectToChange.length}]`;
+  });
+  return {
+    keysCache: newKeysCache,
+    items: set(allItemsCopy, parentLocation, objectToChange)
+  };
+}
+/**
+ * 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 {
+  constructor({
+    key = 'key'
+  } = {}) {
+    this.key = key;
+    this.keysCache = {};
+  }
+
+  updateItems(items, allItems = [], parentItem) {
+    const options = {
+      key: this.key,
+      keysCache: this.keysCache,
+      operation: 'UPDATE'
+    };
+
+    if (!parentItem) {
+      const {
+        keysCache,
+        items: updatedRootItems
+      } = updateRootItems(items, allItems, options);
+      this.keysCache = keysCache;
+      return updatedRootItems;
+    }
+
+    const {
+      keysCache,
+      items: updatedItems
+    } = updateChildItems(items, allItems, parentItem, options);
+    this.keysCache = keysCache;
+    return updatedItems;
+  }
+
+  appendItems(items, allItems = [], parentItem) {
+    const options = {
+      key: this.key,
+      keysCache: this.keysCache,
+      operation: 'APPEND'
+    };
+
+    if (!parentItem) {
+      const {
+        keysCache,
+        items: updatedRootItems
+      } = updateRootItems(items, allItems, options);
+      this.keysCache = keysCache;
+      return updatedRootItems;
+    }
+
+    const {
+      keysCache,
+      items: updatedItems
+    } = updateChildItems(items, allItems, parentItem, options);
+    this.keysCache = keysCache;
+    return updatedItems;
+  }
+
+}

package/dist/es2019/utils/to-item-id.js

@@ -0,0 +1,3 @@
+export default function toItemId(id) {
+  return `tabletreeitem-${id}`.replace(/[^-_a-zA-Z0-9]/g, '');
+}

package/dist/es2019/version.json

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

package/dist/esm/components/{Cell.js → cell.js}

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
 import _inherits from "@babel/runtime/helpers/inherits";
@@ -7,11 +8,12 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
 import React, { Component } from 'react';
-import { OverflowContainer, Cell as StyledCell } from '../styled';
-import withColumnWidth from './withColumnWidth';
+import CommonCell from './internal/common-cell';
+import OverflowContainer from './internal/overflow-container';
+import withColumnWidth from './internal/with-column-width';
 
 var Cell = /*#__PURE__*/function (_Component) {
   _inherits(Cell, _Component);
@@ -27,12 +29,24 @@ var Cell = /*#__PURE__*/function (_Component) {
   _createClass(Cell, [{
     key: "render",
     value: function render() {
-      var props = this.props;
-      return /*#__PURE__*/React.createElement(StyledCell, _extends({
-        role: "gridcell"
+      var _this$props = this.props,
+          children = _this$props.children,
+          singleLine = _this$props.singleLine,
+          indentLevel = _this$props.indentLevel,
+          width = _this$props.width,
+          className = _this$props.className,
+          props = _objectWithoutProperties(_this$props, ["children", "singleLine", "indentLevel", "width", "className"]);
+
+      return /*#__PURE__*/React.createElement(CommonCell, _extends({
+        role: "gridcell",
+        indent: indentLevel ? "".concat(25 * indentLevel) : undefined,
+        style: {
+          width: width
+        },
+        className: className
       }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
-        singleLine: props.singleLine
-      }, props.children));
+        isSingleLine: singleLine
+      }, children));
     }
   }]);
 

package/dist/esm/components/{Header.js → header.js}

@@ -7,11 +7,23 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
-import React, { Component } from 'react';
-import { Header as StyledHeader } from '../styled';
-import withColumnWidth from './withColumnWidth';
+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; } }
+
+/** @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';
+var headerStyles = css({
+  color: "var(--ds-text-mediumEmphasis, ".concat(N300, ")"),
+  fontSize: 12,
+  fontWeight: 'bold',
+  letterSpacing: -0.1,
+  lineHeight: '1.67'
+});
 
 var Header = /*#__PURE__*/function (_Component) {
   _inherits(Header, _Component);
@@ -28,8 +40,12 @@ var Header = /*#__PURE__*/function (_Component) {
     key: "render",
     value: function render() {
       var props = this.props;
-      return /*#__PURE__*/React.createElement(StyledHeader, _extends({
-        role: "columnheader"
+      return jsx(ColumnCell, _extends({
+        css: headerStyles,
+        role: "columnheader",
+        style: {
+          width: props.width
+        }
       }, props), props.children);
     }
   }]);

package/dist/esm/components/{Headers.js → headers.js}

@@ -6,10 +6,17 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
 
-import React, { Component } from 'react';
-import { HeadersContainer } from '../styled';
+/** @jsx jsx */
+
+/* eslint-disable @repo/internal/react/no-clone-element */
+import { Children, cloneElement, Component } from 'react';
+import { css, jsx } from '@emotion/core';
+var containerStyles = css({
+  display: 'flex',
+  borderBottom: "solid 2px ".concat("var(--ds-border-neutral, #dfe1e6)")
+});
 
 var Headers = /*#__PURE__*/function (_Component) {
   _inherits(Headers, _Component);
@@ -25,13 +32,14 @@ var Headers = /*#__PURE__*/function (_Component) {
   _createClass(Headers, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement(HeadersContainer, {
+      return jsx("div", {
+        css: containerStyles,
         role: "row"
-      }, React.Children.map(this.props.children, function (header, index) {
+      }, Children.map(this.props.children, function (header, index) {
         return (
           /*#__PURE__*/
           // eslint-disable-next-line react/no-array-index-key
-          React.cloneElement(header, {
+          cloneElement(header, {
             key: index,
             columnIndex: index
           })