@atlaskit/table-tree 9.12.2 → 10.0.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/table-tree
 
+## 10.0.0
+
+### Major Changes
+
+- [#138959](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/138959)
+  [`779f52fe8935c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/779f52fe8935c) -
+  `id` is now a required property in the `Item` type that is passed into the `data` and `items`
+  properties. Internal re-factor to move from class components to function components. Refactored
+  analytics-next usages to move away from legacy React context.
+
 ## 9.12.2
 
 ### Patch Changes

package/dist/cjs/components/cell.js

@@ -1,58 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-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 _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _commonCell = _interopRequireDefault(require("./internal/common-cell"));
 var _overflowContainer = _interopRequireDefault(require("./internal/overflow-container"));
 var _styled = require("./internal/styled");
 var _withColumnWidth = _interopRequireDefault(require("./internal/with-column-width"));
 var _excluded = ["children", "singleLine", "indentLevel", "width", "className"];
-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; })(); }
-var CellComponent = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(CellComponent, _Component);
-  var _super = _createSuper(CellComponent);
-  function CellComponent() {
-    (0, _classCallCheck2.default)(this, CellComponent);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(CellComponent, [{
-    key: "render",
-    value: function render() {
-      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 = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
-      return /*#__PURE__*/_react.default.createElement(_commonCell.default, (0, _extends2.default)({
-        indent: indentLevel ? "calc(".concat(_styled.indentBase, " * ").concat(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.default.createElement(_overflowContainer.default, {
-        isSingleLine: singleLine
-      }, children));
-    }
-  }]);
-  return CellComponent;
-}(_react.Component);
+var CellComponent = function CellComponent(_ref) {
+  var children = _ref.children,
+    singleLine = _ref.singleLine,
+    indentLevel = _ref.indentLevel,
+    width = _ref.width,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_commonCell.default, (0, _extends2.default)({
+    indent: indentLevel ? "calc(".concat(_styled.indentBase, " * ").concat(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.default.createElement(_overflowContainer.default, {
+    isSingleLine: singleLine
+  }, children));
+};
 var Cell = (0, _withColumnWidth.default)(CellComponent);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/header.js

@@ -5,23 +5,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-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 _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _colors = require("@atlaskit/theme/colors");
 var _commonCell = _interopRequireDefault(require("./internal/common-cell"));
 var _withColumnWidth = _interopRequireDefault(require("./internal/with-column-width"));
-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; })(); } /**
+/**
  * @jsxRuntime classic
  * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var headerStyles = (0, _react2.css)({
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var headerStyles = (0, _react.css)({
   color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   fontWeight: "var(--ds-font-weight-bold, 700)"
@@ -35,32 +30,22 @@ var headerStyles = (0, _react2.css)({
  *
  * Defining it here for now lets us provide *something* without much headache.
  */
-var HeaderComponent = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(HeaderComponent, _Component);
-  var _super = _createSuper(HeaderComponent);
-  function HeaderComponent() {
-    (0, _classCallCheck2.default)(this, HeaderComponent);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(HeaderComponent, [{
-    key: "render",
-    value: function render() {
-      var props = this.props;
-      return (
-        // TODO: Determine whether proper `th` elements can be used instead of
-        // roles (DSP-11588)
-        (0, _react2.jsx)(_commonCell.default, (0, _extends2.default)({
-          css: headerStyles,
-          role: "columnheader",
-          style: {
-            width: props.width
-          }
-        }, props), props.children)
-      );
-    }
-  }]);
-  return HeaderComponent;
-}(_react.Component);
+
+var HeaderComponent = function HeaderComponent(_ref) {
+  var width = _ref.width,
+    children = _ref.children,
+    onClick = _ref.onClick,
+    id = _ref.id;
+  // TODO: Determine whether proper `th` elements can be used instead of
+  // roles (DSP-11588)
+  return (0, _react.jsx)(_commonCell.default, {
+    css: headerStyles,
+    role: "columnheader",
+    width: width,
+    id: id,
+    onClick: onClick
+  }, children);
+};
 var Header = (0, _withColumnWidth.default)(HeaderComponent);
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/cjs/components/headers.js

@@ -1,54 +1,45 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-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 _react = require("react");
 var _react2 = require("@emotion/react");
-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; })(); } /**
+/**
  * @jsxRuntime classic
  * @jsx jsx
- */ /* eslint-disable @repo/internal/react/no-clone-element */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ */
+/* eslint-disable @repo/internal/react/no-clone-element */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
 var containerStyles = (0, _react2.css)({
   display: 'flex',
   borderBlockEnd: "solid 2px ".concat("var(--ds-border, #dfe1e6)")
 });
-var Headers = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Headers, _Component);
-  var _super = _createSuper(Headers);
-  function Headers() {
-    (0, _classCallCheck2.default)(this, Headers);
-    return _super.apply(this, arguments);
-  }
-  (0, _createClass2.default)(Headers, [{
-    key: "render",
-    value: function render() {
-      return (
-        // TODO: Determine whether proper `tr` elements can be used instead of
-        // roles (DSP-11588)
-        (0, _react2.jsx)("div", {
-          css: containerStyles,
-          role: "row"
-        }, _react.Children.map(this.props.children, function (header, index) {
-          return (
-            /*#__PURE__*/
-            // eslint-disable-next-line react/no-array-index-key
-            (0, _react.cloneElement)(header, {
-              key: index,
-              columnIndex: index
-            })
-          );
-        }))
-      );
-    }
-  }]);
-  return Headers;
-}(_react.Component);
+/**
+ * __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)
+ */
+var Headers = function Headers(_ref) {
+  var children = _ref.children;
+  return (
+    // TODO: Determine whether proper `tr` elements can be used instead of
+    // roles (DSP-11588)
+    (0, _react2.jsx)("div", {
+      css: containerStyles,
+      role: "row"
+    }, _react.Children.map(children, function (header, index) {
+      return /*#__PURE__*/(0, _react.cloneElement)(header, {
+        key: index,
+        columnIndex: index
+      });
+    }))
+  );
+};
+var _default = exports.default = Headers;

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

@@ -1,70 +1,43 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 var _new = require("@atlaskit/button/new");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
 var _styled = require("./styled");
-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 @repo/internal/react/consistent-props-definitions */ /* eslint-disable react/prop-types */
-var Chevron = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Chevron, _Component);
-  var _super = _createSuper(Chevron);
-  function Chevron() {
-    var _this;
-    (0, _classCallCheck2.default)(this, Chevron);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClick", function () {
-      if (_this.props.onExpandToggle) {
-        _this.props.onExpandToggle();
-      }
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(Chevron, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        isExpanded = _this$props.isExpanded,
-        ariaControls = _this$props.ariaControls,
-        collapseLabel = _this$props.collapseLabel,
-        expandLabel = _this$props.expandLabel,
-        rowId = _this$props.rowId,
-        extendedLabel = _this$props.extendedLabel;
-      var getLabel = function getLabel(defaultLabel) {
-        return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
-      };
-      return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
-        appearance: "subtle",
-        onClick: this.handleClick,
-        spacing: "compact",
-        icon: isExpanded ? _chevronDown.default : _chevronRight.default,
-        "aria-controls": ariaControls,
-        label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
-      }));
-    }
-  }]);
-  return Chevron;
-}(_react.Component);
-(0, _defineProperty2.default)(Chevron, "defaultProps", {
-  expandLabel: 'Expand',
-  collapseLabel: 'Collapse'
-});
+/* eslint-disable @repo/internal/react/consistent-props-definitions */
+/* eslint-disable react/prop-types */
+
+/**
+ * Internal chevron component.
+ */
+var Chevron = function Chevron(_ref) {
+  var isExpanded = _ref.isExpanded,
+    ariaControls = _ref.ariaControls,
+    _ref$collapseLabel = _ref.collapseLabel,
+    collapseLabel = _ref$collapseLabel === void 0 ? 'Collapse' : _ref$collapseLabel,
+    _ref$expandLabel = _ref.expandLabel,
+    expandLabel = _ref$expandLabel === void 0 ? 'Expand' : _ref$expandLabel,
+    rowId = _ref.rowId,
+    extendedLabel = _ref.extendedLabel,
+    _ref$onExpandToggle = _ref.onExpandToggle,
+    onExpandToggle = _ref$onExpandToggle === void 0 ? _noop.default : _ref$onExpandToggle;
+  var getLabel = function getLabel(defaultLabel) {
+    return extendedLabel ? "".concat(defaultLabel, " ").concat(extendedLabel, " row") : "".concat(defaultLabel, " row ").concat(rowId);
+  };
+  return /*#__PURE__*/_react.default.createElement(_styled.ChevronContainer, null, /*#__PURE__*/_react.default.createElement(_new.IconButton, {
+    appearance: "subtle",
+    onClick: onExpandToggle,
+    spacing: "compact",
+    icon: isExpanded ? _chevronDown.default : _chevronRight.default,
+    "aria-controls": ariaControls,
+    label: isExpanded ? getLabel(collapseLabel) : getLabel(expandLabel)
+  }));
+};
+var _default = exports.default = Chevron;

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

@@ -5,64 +5,50 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _toItemId = _interopRequireDefault(require("../../utils/to-item-id"));
 var _items = _interopRequireDefault(require("./items"));
-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; })(); } /**
+/**
  * @jsxRuntime classic
  * @jsx jsx
- */ /* eslint-disable @repo/internal/react/no-clone-element */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-var Item = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Item, _Component);
-  var _super = _createSuper(Item);
-  function Item() {
-    (0, _classCallCheck2.default)(this, Item);
-    return _super.apply(this, arguments);
+ */
+/* eslint-disable @repo/internal/react/no-clone-element */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+/**
+ * __Item__
+ * Internal item component.
+ */
+function Item(_ref) {
+  var _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    data = _ref.data,
+    render = _ref.render,
+    loadingLabel = _ref.loadingLabel;
+  var renderedRow = render(data);
+  if (!renderedRow) {
+    return null;
   }
-  (0, _createClass2.default)(Item, [{
-    key: "render",
-    value: function render() {
-      // eslint-disable-next-line react/prop-types
-      var _this$props = this.props,
-        depth = _this$props.depth,
-        data = _this$props.data,
-        render = _this$props.render,
-        loadingLabel = _this$props.loadingLabel;
-      var renderedRow = render(data);
-      if (!renderedRow) {
-        return null;
-      }
-      var _renderedRow$props = renderedRow.props,
-        itemId = _renderedRow$props.itemId,
-        items = _renderedRow$props.items;
-      return /*#__PURE__*/(0, _react.cloneElement)(renderedRow, {
+
+  // itemId exists on RowProps, but not on RowsProps
+  var itemId = 'itemId' in renderedRow.props ? renderedRow.props.itemId : undefined;
+  var items = renderedRow.props.items;
+  return /*#__PURE__*/(0, _react.cloneElement)(renderedRow, {
+    depth: depth,
+    data: data,
+    loadingLabel: loadingLabel,
+    renderChildren: function renderChildren() {
+      return (0, _react2.jsx)("div", {
+        id: !!itemId ? (0, _toItemId.default)(itemId) : undefined
+      }, (0, _react2.jsx)(_items.default, {
         depth: depth,
-        data: data,
-        loadingLabel: loadingLabel,
-        renderChildren: function renderChildren() {
-          return (0, _react2.jsx)("div", {
-            id: (0, _toItemId.default)(itemId)
-          }, (0, _react2.jsx)(_items.default, {
-            parentData: data,
-            depth: depth,
-            items: items,
-            render: render,
-            loadingLabel: loadingLabel
-          }));
-        }
-      });
+        items: items,
+        render: render,
+        loadingLabel: loadingLabel
+      }));
     }
-  }]);
-  return Item;
-}(_react.Component);
-(0, _defineProperty2.default)(Item, "defaultProps", {
-  depth: 0
-});
+  });
+}
+var _default = exports.default = Item;

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

@@ -6,92 +6,40 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _item = _interopRequireDefault(require("./item"));
 var _loaderItem = _interopRequireDefault(require("./loader-item"));
 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 Items = exports.default = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(Items, _Component);
-  var _super = _createSuper(Items);
-  function Items() {
-    var _this;
-    (0, _classCallCheck2.default)(this, Items);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      isLoaderShown: false
+function Items(_ref) {
+  var _ref$depth = _ref.depth,
+    depth = _ref$depth === void 0 ? 0 : _ref$depth,
+    items = _ref.items,
+    loadingLabel = _ref.loadingLabel,
+    render = _ref.render;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isLoaderShown = _useState2[0],
+    setIsLoaderShown = _useState2[1];
+  var handleLoaderComplete = function handleLoaderComplete() {
+    return setIsLoaderShown(false);
+  };
+  return !items || isLoaderShown ? /*#__PURE__*/_react.default.createElement(_loaderItem.default, {
+    isCompleting: !!(items && items.length),
+    onComplete: handleLoaderComplete,
+    depth: depth + 1,
+    loadingLabel: loadingLabel
+  }) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, items.map(function (data) {
+    return /*#__PURE__*/_react.default.createElement(_item.default, {
+      data: data,
+      depth: depth + 1,
+      key: data.id,
+      render: render,
+      loadingLabel: loadingLabel
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleLoaderComplete", function () {
-      _this.setState({
-        isLoaderShown: false
-      });
-    });
-    return _this;
-  }
-  (0, _createClass2.default)(Items, [{
-    key: "renderLoader",
-    value: function renderLoader() {
-      var _this$props = this.props,
-        depth = _this$props.depth,
-        items = _this$props.items,
-        loadingLabel = _this$props.loadingLabel;
-      return /*#__PURE__*/_react.default.createElement(_loaderItem.default, {
-        isCompleting: !!(items && items.length),
-        onComplete: this.handleLoaderComplete,
-        depth: depth + 1,
-        loadingLabel: loadingLabel
-      });
-    }
-  }, {
-    key: "renderItems",
-    value: function renderItems() {
-      var _this$props2 = this.props,
-        render = _this$props2.render,
-        items = _this$props2.items,
-        loadingLabel = _this$props2.loadingLabel,
-        _this$props2$depth = _this$props2.depth,
-        depth = _this$props2$depth === void 0 ? 0 : _this$props2$depth;
-      return items && items.map(function (itemData, index) {
-        return /*#__PURE__*/_react.default.createElement(_item.default, {
-          data: itemData,
-          depth: depth + 1,
-          key: itemData && itemData.id || index,
-          render: render,
-          loadingLabel: loadingLabel
-        });
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var isLoaderShown = this.state.isLoaderShown;
-      return isLoaderShown ? this.renderLoader() : this.renderItems();
-    }
-  }], [{
-    key: "getDerivedStateFromProps",
-    value: function getDerivedStateFromProps(nextProps, prevState) {
-      if (!nextProps.items && !prevState.isLoaderShown) {
-        return {
-          isLoaderShown: true
-        };
-      }
-      return null;
-    }
-  }]);
-  return Items;
-}(_react.Component);
-(0, _defineProperty2.default)(Items, "defaultProps", {
-  depth: 0
-});
+  }));
+}
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var _default = exports.default = Items;