@atlaskit/table-tree 9.0.12 → 9.0.13

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.12",
+	"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";
@@ -10,8 +11,9 @@ 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; } }
 
 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}

@@ -9,9 +9,21 @@ 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; } }
 
-import React, { Component } from 'react';
-import { Header as StyledHeader } from '../styled';
-import withColumnWidth from './withColumnWidth';
+/** @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}

@@ -8,8 +8,15 @@ 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; } }
 
-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
           })

package/dist/esm/components/{Chevron.js → internal/chevron.js}

@@ -11,12 +11,14 @@ 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; } }
 
+/* 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';
+import { ChevronContainer, ChevronIconContainer, iconColor } from './styled';
 
 var Chevron = /*#__PURE__*/function (_Component) {
   _inherits(Chevron, _Component);

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

@@ -0,0 +1,33 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+
+/** @jsx jsx */
+import { css, jsx } from '@emotion/core';
+import { N800 } from '@atlaskit/theme/colors';
+var 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, ".concat(N800, ")"),
+  lineHeight: '20px'
+});
+
+/**
+ * __Common cell__
+ */
+var CommonCell = function CommonCell(_ref) {
+  var indent = _ref.indent,
+      props = _objectWithoutProperties(_ref, ["indent"]);
+
+  return jsx("div", _extends({
+    style: {
+      '--indent': indent
+    },
+    css: commonStyles
+  }, props));
+};
+
+export default CommonCell;

package/dist/esm/components/{Item.js → internal/item.js}

@@ -9,9 +9,13 @@ 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; } }
 
-import React, { Component } from 'react';
-import toItemId from '../utils/toItemId';
-import Items from './Items';
+/** @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';
 
 var Item = /*#__PURE__*/function (_Component) {
   _inherits(Item, _Component);
@@ -41,13 +45,13 @@ var Item = /*#__PURE__*/function (_Component) {
       var _renderedRow$props = renderedRow.props,
           itemId = _renderedRow$props.itemId,
           items = _renderedRow$props.items;
-      return /*#__PURE__*/React.cloneElement(renderedRow, {
+      return /*#__PURE__*/cloneElement(renderedRow, {
         depth: depth,
         data: data,
         renderChildren: function renderChildren() {
-          return /*#__PURE__*/React.createElement("div", {
+          return jsx("div", {
             id: toItemId(itemId)
-          }, /*#__PURE__*/React.createElement(Items, {
+          }, jsx(Items, {
             parentData: data,
             depth: depth,
             items: items,

package/dist/esm/components/{Items.js → internal/items.js}

@@ -13,8 +13,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 /* eslint-disable react/prop-types */
 import React, { Component } from 'react';
-import Item from './Item';
-import LoaderItem from './LoaderItem';
+import Item from './item';
+import LoaderItem from './loader-item';
 
 var Items = /*#__PURE__*/function (_Component) {
   _inherits(Items, _Component);