@atlaskit/table-tree 9.12.2 → 10.0.0

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

@@ -6,14 +6,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-var _wrapNativeSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/wrapNativeSuper"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _cell = _interopRequireDefault(require("./cell"));
 var _header = _interopRequireDefault(require("./header"));
@@ -23,17 +17,8 @@ var _row = _interopRequireDefault(require("./row"));
 var _rows = _interopRequireDefault(require("./rows"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-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() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable react/prop-types */
-var Content = /*#__PURE__*/function (_Object) {
-  (0, _inherits2.default)(Content, _Object);
-  var _super = _createSuper(Content);
-  function Content() {
-    (0, _classCallCheck2.default)(this, Content);
-    return _super.apply(this, arguments);
-  }
-  return (0, _createClass2.default)(Content);
-}( /*#__PURE__*/(0, _wrapNativeSuper2.default)(Object));
+/* eslint-disable react/prop-types */
+
 /**
  * This is hard-coded here because our actual <TableTree /> has no typings
  * for its props.
@@ -42,107 +27,78 @@ var Content = /*#__PURE__*/function (_Object) {
  *
  * Defining it here for now lets us provide *something* without much headache.
  */
-var TableTree = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(TableTree, _Component);
-  var _super2 = _createSuper(TableTree);
-  function TableTree() {
-    var _this;
-    (0, _classCallCheck2.default)(this, TableTree);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+
+var emptyColumnWidths = [];
+function TableTree(_ref) {
+  var children = _ref.children,
+    columns = _ref.columns,
+    _ref$columnWidths = _ref.columnWidths,
+    defaultColumnWidths = _ref$columnWidths === void 0 ? emptyColumnWidths : _ref$columnWidths,
+    headers = _ref.headers,
+    shouldExpandOnClick = _ref.shouldExpandOnClick,
+    items = _ref.items,
+    mainColumnForExpandCollapseLabel = _ref.mainColumnForExpandCollapseLabel,
+    label = _ref.label,
+    referencedLabel = _ref.referencedLabel;
+  var _useState = (0, _react.useState)(defaultColumnWidths),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    columnWidths = _useState2[0],
+    setColumnWidths = _useState2[1];
+  var setColumnWidth = (0, _react.useCallback)(function (columnIndex, width) {
+    if (width === columnWidths[columnIndex]) {
+      return;
     }
-    _this = _super2.call.apply(_super2, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      columnWidths: []
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "setColumnWidth", function (columnIndex, width) {
-      var columnWidths = _this.state.columnWidths;
-      if (width === columnWidths[columnIndex]) {
-        return;
-      }
-      columnWidths[columnIndex] = width;
-      _this.setState({
-        columnWidths: columnWidths
-      });
+    setColumnWidths(function (columnWidths) {
+      var newColumnWidths = (0, _toConsumableArray2.default)(columnWidths);
+      newColumnWidths[columnIndex] = width;
+      return newColumnWidths;
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getColumnWidth", function (columnIndex) {
-      return _this.state && _this.state.columnWidths[columnIndex] || null;
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(TableTree, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var widths = this.props.columnWidths;
-      if (widths) {
-        this.setState({
-          columnWidths: widths
-        }); // eslint-disable-line
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        items = _this$props.items,
-        label = _this$props.label,
-        referencedLabel = _this$props.referencedLabel,
-        shouldExpandOnClick = _this$props.shouldExpandOnClick,
-        headers = _this$props.headers,
-        columns = _this$props.columns,
-        _this$props$columnWid = _this$props.columnWidths,
-        columnWidths = _this$props$columnWid === void 0 ? [] : _this$props$columnWid,
-        mainColumnForExpandCollapseLabel = _this$props.mainColumnForExpandCollapseLabel;
-      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, {
-            key: index,
-            columnIndex: index,
-            width: columnWidths[index]
-          }, header)
-        );
+  }, [columnWidths]);
+  var getColumnWidth = (0, _react.useCallback)(function (columnIndex) {
+    return columnWidths[columnIndex] || null;
+  }, [columnWidths]);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      setColumnWidth: setColumnWidth,
+      getColumnWidth: getColumnWidth
+    };
+  }, [setColumnWidth, getColumnWidth]);
+  var heads = headers && /*#__PURE__*/_react.default.createElement(_headers.default, null, headers.map(function (header, index) {
+    return /*#__PURE__*/_react.default.createElement(_header.default, {
+      key: index,
+      columnIndex: index,
+      width: columnWidths[index]
+    }, header);
+  }));
+  return /*#__PURE__*/_react.default.createElement(_context.TableTreeContext.Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    role: "treegrid",
+    "aria-readonly": true,
+    "aria-label": label,
+    "aria-labelledby": referencedLabel
+  }, heads, columns && items && /*#__PURE__*/_react.default.createElement(_rows.default, {
+    items: items,
+    render: function render(_ref2) {
+      var id = _ref2.id,
+        children = _ref2.children,
+        content = _ref2.content;
+      return /*#__PURE__*/_react.default.createElement(_row.default, {
+        itemId: id,
+        items: children,
+        hasChildren: !!children && children.length > 0,
+        shouldExpandOnClick: shouldExpandOnClick,
+        mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
+      }, columns.map(function (CellContent, index) {
+        return /*#__PURE__*/_react.default.createElement(_cell.default, {
+          key: "cell-".concat(index),
+          columnIndex: index,
+          width: columnWidths[index]
+        }, /*#__PURE__*/_react.default.createElement(CellContent, content));
       }));
-      var rows = null;
-      if (columns && items) {
-        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, {
-              itemId: id,
-              items: children,
-              hasChildren: hasChildren,
-              shouldExpandOnClick: shouldExpandOnClick,
-              mainColumnForExpandCollapseLabel: mainColumnForExpandCollapseLabel
-            }, columns.map(function (CellContent, index) {
-              return /*#__PURE__*/_react.default.createElement(_cell.default
-              // eslint-disable-next-line react/no-array-index-key
-              , {
-                key: index,
-                columnIndex: index,
-                width: columnWidths[index]
-              }, /*#__PURE__*/_react.default.createElement(CellContent, content));
-            }));
-          }
-        });
-      }
-      return /*#__PURE__*/_react.default.createElement(_context.TableTreeContext.Provider, {
-        value: {
-          setColumnWidth: this.setColumnWidth,
-          getColumnWidth: this.getColumnWidth
-        }
-      }, /*#__PURE__*/_react.default.createElement("div", {
-        role: "treegrid",
-        "aria-readonly": true,
-        "aria-label": label,
-        "aria-labelledby": referencedLabel
-      }, heads, rows, this.props.children));
     }
-  }]);
-  return TableTree;
-}(_react.Component);
+  }), children));
+}
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var _default = exports.default = TableTree;

package/dist/es2019/components/cell.js

@@ -1,30 +1,26 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { Component } from 'react';
+import React from 'react';
 import CommonCell from './internal/common-cell';
 import OverflowContainer from './internal/overflow-container';
 import { indentBase } from './internal/styled';
 import withColumnWidth from './internal/with-column-width';
-class CellComponent extends Component {
-  render() {
-    const {
-      children,
-      singleLine,
-      indentLevel,
-      width,
-      className,
-      ...props
-    } = this.props;
-    return /*#__PURE__*/React.createElement(CommonCell, _extends({
-      indent: indentLevel ? `calc(${indentBase} * ${indentLevel})` : undefined,
-      width: width
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      ,
-      className: className
-    }, props), /*#__PURE__*/React.createElement(OverflowContainer, {
-      isSingleLine: singleLine
-    }, children));
-  }
-}
+const CellComponent = ({
+  children,
+  singleLine,
+  indentLevel,
+  width,
+  className,
+  ...props
+}) => /*#__PURE__*/React.createElement(CommonCell, _extends({
+  indent: indentLevel ? `calc(${indentBase} * ${indentLevel})` : undefined,
+  width: width
+  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
+  ,
+  className: className
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+}, props), /*#__PURE__*/React.createElement(OverflowContainer, {
+  isSingleLine: singleLine
+}, children));
 const Cell = withColumnWidth(CellComponent);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/header.js

@@ -1,14 +1,12 @@
-import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { Component } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { N300 } from '@atlaskit/theme/colors';
-import ColumnCell from './internal/common-cell';
+import CommonCell from './internal/common-cell';
 import withColumnWidth from './internal/with-column-width';
 const headerStyles = css({
   color: `var(--ds-text-subtle, ${N300})`,
@@ -25,24 +23,22 @@ const headerStyles = css({
  * Defining it here for now lets us provide *something* without much headache.
  */
 
-class HeaderComponent extends Component {
-  render() {
-    const {
-      props
-    } = this;
-    return (
-      // TODO: Determine whether proper `th` elements can be used instead of
-      // roles (DSP-11588)
-      jsx(ColumnCell, _extends({
-        css: headerStyles,
-        role: "columnheader",
-        style: {
-          width: props.width
-        }
-      }, props), props.children)
-    );
-  }
-}
+const HeaderComponent = ({
+  width,
+  children,
+  onClick,
+  id
+}) => {
+  // TODO: Determine whether proper `th` elements can be used instead of
+  // roles (DSP-11588)
+  return jsx(CommonCell, {
+    css: headerStyles,
+    role: "columnheader",
+    width: width,
+    id: id,
+    onClick: onClick
+  }, children);
+};
 const Header = withColumnWidth(HeaderComponent);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/headers.js

@@ -3,7 +3,7 @@
  * @jsx jsx
  */
 /* eslint-disable @repo/internal/react/no-clone-element */
-import { Children, cloneElement, Component } from 'react';
+import { Children, cloneElement } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
@@ -11,21 +11,24 @@ const containerStyles = css({
   display: 'flex',
   borderBlockEnd: `solid 2px ${"var(--ds-border, #dfe1e6)"}`
 });
-export default class Headers extends Component {
-  render() {
-    return (
-      // TODO: Determine whether proper `tr` elements can be used instead of
-      // roles (DSP-11588)
-      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
-      })))
-    );
-  }
-}
+/**
+ * __Headers__
+ *
+ * Headers component for advanced composition of data, allowing custom data structures.
+ *
+ * - [Examples](https://atlassian.design/components/table-tree/examples#advanced)
+ * - [Code](https://atlassian.design/components/table-tree/code#headers-props)
+ */
+const Headers = ({
+  children
+}) =>
+// TODO: Determine whether proper `tr` elements can be used instead of
+// roles (DSP-11588)
+jsx("div", {
+  css: containerStyles,
+  role: "row"
+}, Children.map(children, (header, index) => /*#__PURE__*/cloneElement(header, {
+  key: index,
+  columnIndex: index
+})));
+export default Headers;

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

@@ -1,41 +1,31 @@
-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 React from 'react';
 import { IconButton } from '@atlaskit/button/new';
+import __noop from '@atlaskit/ds-lib/noop';
 import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
 import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
 import { ChevronContainer } 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,
-      rowId,
-      extendedLabel
-    } = this.props;
-    const getLabel = defaultLabel => extendedLabel ? `${defaultLabel} ${extendedLabel} row` : `${defaultLabel} row ${rowId}`;
-    return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(IconButton, {
-      appearance: "subtle",
-      onClick: this.handleClick,
-      spacing: "compact",
-      icon: isExpanded ? ChevronDownIcon : ChevronRightIcon,
-      "aria-controls": ariaControls,
-      label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
-    }));
-  }
-}
-_defineProperty(Chevron, "defaultProps", {
-  expandLabel: 'Expand',
-  collapseLabel: 'Collapse'
-});
+/**
+ * Internal chevron component.
+ */
+const Chevron = ({
+  isExpanded,
+  ariaControls,
+  collapseLabel = 'Collapse',
+  expandLabel = 'Expand',
+  rowId,
+  extendedLabel,
+  onExpandToggle = __noop
+}) => {
+  const getLabel = defaultLabel => extendedLabel ? `${defaultLabel} ${extendedLabel} row` : `${defaultLabel} row ${rowId}`;
+  return /*#__PURE__*/React.createElement(ChevronContainer, null, /*#__PURE__*/React.createElement(IconButton, {
+    appearance: "subtle",
+    onClick: onExpandToggle,
+    spacing: "compact",
+    icon: isExpanded ? ChevronDownIcon : ChevronRightIcon,
+    "aria-controls": ariaControls,
+    label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+  }));
+};
+export default Chevron;

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

@@ -1,48 +1,44 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 /* eslint-disable @repo/internal/react/no-clone-element */
-import { cloneElement, Component } from 'react';
+import { cloneElement } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
 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,
-      loadingLabel
-    } = this.props;
-    const renderedRow = render(data);
-    if (!renderedRow) {
-      return null;
-    }
-    const {
-      itemId,
-      items
-    } = renderedRow.props;
-    return /*#__PURE__*/cloneElement(renderedRow, {
-      depth,
-      data,
-      loadingLabel,
-      renderChildren: () => jsx("div", {
-        id: toItemId(itemId)
-      }, jsx(Items, {
-        parentData: data,
-        depth: depth,
-        items: items,
-        render: render,
-        loadingLabel: loadingLabel
-      }))
-    });
+/**
+ * __Item__
+ * Internal item component.
+ */
+function Item({
+  depth = 0,
+  data,
+  render,
+  loadingLabel
+}) {
+  const renderedRow = render(data);
+  if (!renderedRow) {
+    return null;
   }
+
+  // itemId exists on RowProps, but not on RowsProps
+  const itemId = 'itemId' in renderedRow.props ? renderedRow.props.itemId : undefined;
+  const items = renderedRow.props.items;
+  return /*#__PURE__*/cloneElement(renderedRow, {
+    depth,
+    data,
+    loadingLabel,
+    renderChildren: () => jsx("div", {
+      id: !!itemId ? toItemId(itemId) : undefined
+    }, jsx(Items, {
+      depth: depth,
+      items: items,
+      render: render,
+      loadingLabel: loadingLabel
+    }))
+  });
 }
-_defineProperty(Item, "defaultProps", {
-  depth: 0
-});
+export default Item;

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

@@ -1,63 +1,27 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-/* eslint-disable react/prop-types */
-import React, { Component } from 'react';
+import React, { useState } 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,
-      loadingLabel
-    } = this.props;
-    return /*#__PURE__*/React.createElement(LoaderItem, {
-      isCompleting: !!(items && items.length),
-      onComplete: this.handleLoaderComplete,
-      depth: depth + 1,
-      loadingLabel: loadingLabel
-    });
-  }
-  renderItems() {
-    const {
-      render,
-      items,
-      loadingLabel,
-      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,
-      loadingLabel: loadingLabel
-    }));
-  }
-  render() {
-    const {
-      isLoaderShown
-    } = this.state;
-    return isLoaderShown ? this.renderLoader() : this.renderItems();
-  }
+function Items({
+  depth = 0,
+  items,
+  loadingLabel,
+  render
+}) {
+  const [isLoaderShown, setIsLoaderShown] = useState(false);
+  const handleLoaderComplete = () => setIsLoaderShown(false);
+  return !items || isLoaderShown ? /*#__PURE__*/React.createElement(LoaderItem, {
+    isCompleting: !!(items && items.length),
+    onComplete: handleLoaderComplete,
+    depth: depth + 1,
+    loadingLabel: loadingLabel
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, items.map(data => /*#__PURE__*/React.createElement(Item, {
+    data: data,
+    depth: depth + 1,
+    key: data.id,
+    render: render,
+    loadingLabel: loadingLabel
+  })));
 }
-_defineProperty(Items, "defaultProps", {
-  depth: 0
-});
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export default Items;