@procore/core-react 11.22.1 → 11.23.0

package/dist/Tree/Tree.js

@@ -1,25 +1,23 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+var _excluded = ["options", "expanded", "selected", "selectionLimit", "getRoot", "getChildren", "getIcon", "getLabel", "getParentId", "getType", "isExpandable", "isSelectable", "multiple", "onSelect", "onCollapse", "onExpand", "rowRenderer", "maxVisibleNodes", "visibleHeight", "autoExpandParent", "innerElementType", "outerElementType", "onKeyDown", "children"],
+  _excluded2 = ["nodes", "rowRenderer", "highlight", "isTreeFocused"],
+  _excluded3 = ["node", "getIcon", "getLabel", "handleExpansion", "handleSelection", "selectionLimit", "isFileLimitReached", "shouldShowTooltip", "isMouseOver", "treeContainer"],
+  _excluded4 = ["children", "isSelected"],
+  _excluded5 = ["children", "isHighlighted", "isSelected", "isSelectable", "isExpandable", "isFileLimitReached", "level"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import { File, Folder } from '@procore/core-icons/dist';
 import React from 'react';
 import { areEqual, FixedSizeList } from 'react-window';
@@ -33,10 +31,11 @@ import { useVisibility } from '../_hooks/Visibility';
 import { parseFilename } from '../_utils/filename';
 import { mergeRefs } from '../_utils/mergeRefs';
 import { useTree } from './Tree.hooks';
-import { StyledChevron, StyledChevronContainer, StyledFilenameCaption, StyledIconContainer, StyledTree, StyledTreeRowContainer, StyledTreeRowContent, StyledTreeRowWrapper, } from './Tree.styles';
+import { StyledChevron, StyledChevronContainer, StyledFilenameCaption, StyledIconContainer, StyledTree, StyledTreeRowContainer, StyledTreeRowContent, StyledTreeRowWrapper } from './Tree.styles';
 var spacing = 32;
 var rootSpacing = 24;
 var defaultRowHeight = 36;
+
 // Selected nodes have a bold text, and browsers occasionally miscalculate scrollWidth by one pixel down.
 // That situations might cause an issue when we get a second horizontal scrollbar.
 // This padding serves as compensation to prevent the described issue.
@@ -45,24 +44,38 @@ var rowRightPadding = 12;
 // To avoid tricky cross-browser calculations of scrollbar width. The maximum width is used.
 var scrollbarWidth = 20;
 function getPadding(level) {
-    return rootSpacing + level * spacing;
+  return rootSpacing + level * spacing;
 }
-var intersectionThresholds = Array.from({ length: 101 }).map(function (_, index) { return index / 100; });
+var intersectionThresholds = Array.from({
+  length: 101
+}).map(function (_, index) {
+  return index / 100;
+});
 var tooltipDelay = 300;
+
 // TODO refactor this to not be upper snake case
 export var UNSAFE_treeRootNodeId = 'ROOT_ID';
-var defaultIsExpandable = function (node) { return defaultGetType(node) === 'branch'; };
-var defaultIsSelectable = function (node) { return node.type === 'leaf'; };
-var defaultGetType = function (node) {
-    return node.type;
+var defaultIsExpandable = function defaultIsExpandable(node) {
+  return defaultGetType(node) === 'branch';
+};
+var defaultIsSelectable = function defaultIsSelectable(node) {
+  return node.type === 'leaf';
+};
+var defaultGetType = function defaultGetType(node) {
+  return node.type;
+};
+var defaultGetParentId = function defaultGetParentId(node) {
+  return node.parentId;
+};
+var defaultGetLabel = function defaultGetLabel(node) {
+  return node.name;
 };
-var defaultGetParentId = function (node) { return node.parentId; };
-var defaultGetLabel = function (node) { return node.name; };
-function noop() { }
+function noop() {}
 export function isRootNode(parentId) {
-    var rootValues = [UNSAFE_treeRootNodeId, null, undefined];
-    return rootValues.includes(parentId);
+  var rootValues = [UNSAFE_treeRootNodeId, null, undefined];
+  return rootValues.includes(parentId);
 }
+
 /**
 
  The tree allows users to navigate between folder / file directories,
@@ -75,312 +88,505 @@ export function isRootNode(parentId) {
  @see [Design Guidelines](https://design.procore.com/tree)
 
  */
-export var Tree = React.forwardRef(function (_a, ref) {
-    var options = _a.options, _b = _a.expanded, expanded = _b === void 0 ? [] : _b, _c = _a.selected, selected = _c === void 0 ? [] : _c, _d = _a.selectionLimit, selectionLimit = _d === void 0 ? Infinity : _d, getRoot_ = _a.getRoot, getChildren_ = _a.getChildren, getIconBase = _a.getIcon, _e = _a.getLabel, getLabel = _e === void 0 ? defaultGetLabel : _e, _f = _a.getParentId, getParentId_ = _f === void 0 ? defaultGetParentId : _f, _g = _a.getType, getType = _g === void 0 ? defaultGetType : _g, _h = _a.isExpandable, isExpandable = _h === void 0 ? defaultIsExpandable : _h, _j = _a.isSelectable, isSelectable = _j === void 0 ? defaultIsSelectable : _j, _k = _a.multiple, multiple = _k === void 0 ? true : _k, _l = _a.onSelect, onSelect = _l === void 0 ? noop : _l, _m = _a.onCollapse, onCollapse = _m === void 0 ? noop : _m, _o = _a.onExpand, onExpand = _o === void 0 ? function () { return Promise.resolve(); } : _o, rowRendererBase = _a.rowRenderer, _p = _a.maxVisibleNodes, maxVisibleNodes = _p === void 0 ? Infinity : _p, visibleHeight = _a.visibleHeight, _q = _a.autoExpandParent, autoExpandParent = _q === void 0 ? true : _q, innerElementType = _a.innerElementType, outerElementType = _a.outerElementType, onKeyDown = _a.onKeyDown, children = _a.children, props = __rest(_a, ["options", "expanded", "selected", "selectionLimit", "getRoot", "getChildren", "getIcon", "getLabel", "getParentId", "getType", "isExpandable", "isSelectable", "multiple", "onSelect", "onCollapse", "onExpand", "rowRenderer", "maxVisibleNodes", "visibleHeight", "autoExpandParent", "innerElementType", "outerElementType", "onKeyDown", "children"]);
-    var rowHeight = defaultRowHeight;
-    var wrapperRef = React.useRef(null);
-    var listRef = React.useRef(null);
-    var listInnerRef = React.useRef(null);
-    var listOuterRefRef = React.useRef(null);
-    var _r = React.useState(0), contentMaxWidth = _r[0], setContentMaxWidth = _r[1];
-    var getParentId = React.useMemo(function () { return getParentId_; }, []);
-    var defaultGetRoot = React.useCallback(function (nodes) {
-        return nodes.filter(function (node) {
-            return isRootNode(getParentId(node));
-        });
-    }, [getParentId]);
-    var getRoot = React.useMemo(function () { return getRoot_ || defaultGetRoot; }, [defaultGetRoot]);
-    var rootNodes = React.useMemo(function () {
-        var roots = getRoot(options);
-        return Array.isArray(roots) ? roots : [roots];
-    }, [getRoot, options]);
-    React.useEffect(function () {
-        if (!rootNodes.length) {
-            console.warn('Tree must have at least one root node. Look up `Tree#getParentId` for details.');
-        }
-    }, [rootNodes]);
-    var _s = React.useState(false), isTreeFocused = _s[0], setIsTreeFocused = _s[1];
-    var _t = React.useState({
-        width: 0,
-        height: 0,
-    }), containerSize = _t[0], setContainerSize = _t[1];
-    var handleContainerResize = React.useCallback(function (entries) {
-        if (entries[0]) {
-            var _a = entries[0]
-                .target, height = _a.clientHeight, width = _a.clientWidth;
-            setContainerSize({ width: width, height: height });
-        }
-    }, [setContainerSize]);
-    var setResizeObserverTarget = useResizeObserver(handleContainerResize);
-    var defaultGetChildren = React.useCallback(function (node) {
-        return Array.isArray(options)
-            ? options.filter(function (childNode) { return getParentId(childNode) === node.id; })
-            : [];
-    }, [getParentId, options]);
-    var getChildren = getChildren_ || defaultGetChildren;
-    var _u = useTree({
-        rootNodes: rootNodes,
-        expanded: expanded,
-        selected: selected,
-        selectionLimit: selectionLimit,
-        multiple: multiple,
-        autoExpandParent: autoExpandParent,
-        onSelect: onSelect,
-        onCollapse: onCollapse,
-        onExpand: onExpand,
-        getChildren: getChildren,
-        getParentId: getParentId,
-    }), nodes = _u.nodes, isExpanded = _u.isExpanded, isSelected = _u.isSelected, isLoading = _u.isLoading, highlightedNode = _u.highlightedNode, isNodeHighlighted = _u.isHighlighted, highlight = _u.highlight, handleSelection = _u.handleSelection, handleExpansion = _u.handleExpansion, _setExpanded = _u.setExpanded, _setSelected = _u.setSelected, isFileLimitReached = _u.isFileLimitReached, listNavigation = _u.listNavigation;
-    var setSelected = React.useCallback(function (selected) {
-        var nodes = Array.isArray(selected) ? selected : [selected];
-        _setSelected(new Set(nodes.map(function (node) { return node.id; })));
-    }, [_setSelected]);
-    var setExpanded = React.useCallback(function (expanded) {
-        var nodes = Array.isArray(expanded) ? expanded : [expanded];
-        _setExpanded(new Set(nodes.map(function (node) { return node.id; })));
-    }, [_setExpanded]);
-    React.useImperativeHandle(ref, function () { return ({
-        rootEl: wrapperRef.current,
-        setSelected: setSelected,
-        setExpanded: setExpanded,
-        toggleSelected: function (node) { return handleSelection(node); },
-        toggleExpanded: function (node) { return handleExpansion(node); },
-    }); });
-    var defaultGetIcon = React.useCallback(function (node) {
-        var isFolder = getType(node) === 'branch';
-        return isFolder ? React.createElement(Folder, null) : React.createElement(File, null);
-    }, [getType]);
-    var getIcon = getIconBase || defaultGetIcon;
-    var isHighlighted = React.useCallback(function (node) { return isTreeFocused && isNodeHighlighted(node); }, [isNodeHighlighted, isTreeFocused]);
-    var handleAccessibility = function (e) {
-        onKeyDown && onKeyDown(e);
-        var key = e.key;
-        switch (key) {
-            case 'Enter':
-                e.preventDefault();
-                isSelectable(highlightedNode) && handleSelection(highlightedNode);
-                break;
-            case 'Space Bar':
-            case ' ':
-                e.preventDefault();
-                isExpandable(highlightedNode) && handleExpansion(highlightedNode);
-                break;
-            case 'ArrowDown':
-            case 'Down':
-                e.preventDefault();
-                listNavigation.increment();
-                break;
-            case 'ArrowUp':
-            case 'Up':
-                e.preventDefault();
-                listNavigation.decrement();
-                break;
-        }
-    };
-    React.useEffect(function () {
-        var _a;
-        if (isTreeFocused) {
-            (_a = listRef.current) === null || _a === void 0 ? void 0 : _a.scrollToItem(listNavigation.index);
-        }
-    }, [isTreeFocused, listNavigation.index]);
-    var defaultRowRenderer = React.useCallback(function (props) { return React.createElement(TreeRow, __assign({}, props)); }, []);
-    React.useEffect(function () {
-        var _a;
-        var rowContentSizes = [];
-        var childNodes = Array.from(((_a = listInnerRef.current) === null || _a === void 0 ? void 0 : _a.childNodes) || []);
-        childNodes.forEach(function (child) {
-            var _a;
-            var rowContent = child.querySelector('[data-row-content]');
-            if (rowContent) {
-                var leftPadding = (_a = child.dataset.padding) !== null && _a !== void 0 ? _a : '0';
-                rowContentSizes.push(rowContent.scrollWidth + parseInt(leftPadding, 10) + rowRightPadding);
-            }
-        });
-        var maxSizeRowContent = Math.max.apply(Math, rowContentSizes) + scrollbarWidth;
-        setContentMaxWidth(maxSizeRowContent);
+export var Tree = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+  var options = _ref.options,
+    _ref$expanded = _ref.expanded,
+    expanded = _ref$expanded === void 0 ? [] : _ref$expanded,
+    _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? [] : _ref$selected,
+    _ref$selectionLimit = _ref.selectionLimit,
+    selectionLimit = _ref$selectionLimit === void 0 ? Infinity : _ref$selectionLimit,
+    getRoot_ = _ref.getRoot,
+    getChildren_ = _ref.getChildren,
+    getIconBase = _ref.getIcon,
+    _ref$getLabel = _ref.getLabel,
+    getLabel = _ref$getLabel === void 0 ? defaultGetLabel : _ref$getLabel,
+    _ref$getParentId = _ref.getParentId,
+    getParentId_ = _ref$getParentId === void 0 ? defaultGetParentId : _ref$getParentId,
+    _ref$getType = _ref.getType,
+    getType = _ref$getType === void 0 ? defaultGetType : _ref$getType,
+    _ref$isExpandable = _ref.isExpandable,
+    isExpandable = _ref$isExpandable === void 0 ? defaultIsExpandable : _ref$isExpandable,
+    _ref$isSelectable = _ref.isSelectable,
+    isSelectable = _ref$isSelectable === void 0 ? defaultIsSelectable : _ref$isSelectable,
+    _ref$multiple = _ref.multiple,
+    multiple = _ref$multiple === void 0 ? true : _ref$multiple,
+    _ref$onSelect = _ref.onSelect,
+    onSelect = _ref$onSelect === void 0 ? noop : _ref$onSelect,
+    _ref$onCollapse = _ref.onCollapse,
+    onCollapse = _ref$onCollapse === void 0 ? noop : _ref$onCollapse,
+    _ref$onExpand = _ref.onExpand,
+    onExpand = _ref$onExpand === void 0 ? function () {
+      return Promise.resolve();
+    } : _ref$onExpand,
+    rowRendererBase = _ref.rowRenderer,
+    _ref$maxVisibleNodes = _ref.maxVisibleNodes,
+    maxVisibleNodes = _ref$maxVisibleNodes === void 0 ? Infinity : _ref$maxVisibleNodes,
+    visibleHeight = _ref.visibleHeight,
+    _ref$autoExpandParent = _ref.autoExpandParent,
+    autoExpandParent = _ref$autoExpandParent === void 0 ? true : _ref$autoExpandParent,
+    innerElementType = _ref.innerElementType,
+    outerElementType = _ref.outerElementType,
+    onKeyDown = _ref.onKeyDown,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var rowHeight = defaultRowHeight;
+  var wrapperRef = React.useRef(null);
+  var listRef = React.useRef(null);
+  var listInnerRef = React.useRef(null);
+  var listOuterRefRef = React.useRef(null);
+  var _React$useState = React.useState(0),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    contentMaxWidth = _React$useState2[0],
+    setContentMaxWidth = _React$useState2[1];
+  var getParentId = React.useMemo(function () {
+    return getParentId_;
+  }, []);
+  var defaultGetRoot = React.useCallback(function (nodes) {
+    return nodes.filter(function (node) {
+      return isRootNode(getParentId(node));
     });
-    var rowRenderer = rowRendererBase || defaultRowRenderer;
-    var itemData = React.useMemo(function () { return ({
-        nodes: nodes,
-        getIcon: getIcon,
-        getLabel: getLabel,
-        getType: getType,
-        isExpandable: isExpandable,
-        isSelectable: isSelectable,
-        isExpanded: isExpanded,
-        isSelected: isSelected,
-        isLoading: isLoading,
-        highlight: highlight,
-        isHighlighted: isHighlighted,
-        handleSelection: handleSelection,
-        handleExpansion: handleExpansion,
-        rowRenderer: rowRenderer,
-        isFileLimitReached: isFileLimitReached,
-        selectionLimit: selectionLimit,
-        isTreeFocused: isTreeFocused,
-        treeContainer: wrapperRef.current,
-    }); }, [
-        getIcon,
-        getLabel,
-        getType,
-        handleExpansion,
-        handleSelection,
-        highlight,
-        isExpandable,
-        isExpanded,
-        isFileLimitReached,
-        isHighlighted,
-        isLoading,
-        isSelectable,
-        isSelected,
-        isTreeFocused,
-        nodes,
-        rowRenderer,
-        selectionLimit,
-    ]);
-    if (!rootNodes) {
-        console.error('Tree must have a valid root node');
-        return null;
+  }, [getParentId]);
+  var getRoot = React.useMemo(function () {
+    return getRoot_ || defaultGetRoot;
+  }, [defaultGetRoot]);
+  var rootNodes = React.useMemo(function () {
+    var roots = getRoot(options);
+    return Array.isArray(roots) ? roots : [roots];
+  }, [getRoot, options]);
+  React.useEffect(function () {
+    if (!rootNodes.length) {
+      console.warn('Tree must have at least one root node. Look up `Tree#getParentId` for details.');
     }
-    return (React.createElement(StyledTree, __assign({}, props, { ref: mergeRefs(wrapperRef, setResizeObserverTarget), tabIndex: 0, onFocus: function () { return setIsTreeFocused(true); }, onBlur: function () { return setIsTreeFocused(false); }, onKeyDown: handleAccessibility }),
-        React.createElement(FixedSizeList, { className: "size-list", ref: listRef, height: visibleHeight ||
-                Math.min(nodes.length * rowHeight, rowHeight * maxVisibleNodes), innerRef: listInnerRef, outerRef: listOuterRefRef, itemCount: nodes.length, itemSize: rowHeight, innerElementType: innerElementType, outerElementType: outerElementType, itemData: itemData, width: Math.max(contentMaxWidth, containerSize.width) }, TreeNode)));
-});
-var TreeNode = React.memo(function (_a) {
-    var _b = _a.data, nodes = _b.nodes, rowRenderer = _b.rowRenderer, highlight = _b.highlight, isTreeFocused = _b.isTreeFocused, props = __rest(_b, ["nodes", "rowRenderer", "highlight", "isTreeFocused"]), index = _a.index, style = _a.style;
-    var node = nodes[index];
-    var isHighlighted = props.isHighlighted(node);
-    var _c = React.useState(false), isMouseOver = _c[0], setMouseOver = _c[1];
-    var timer = useTimer({});
-    var _d = useVisibility({}), shouldShowTooltip = _d.isVisible, showTooltip = _d.show, hideTooltip = _d.hide;
-    React.useEffect(function () {
-        if (isHighlighted && !shouldShowTooltip) {
-            timer.setTimer(showTooltip, tooltipDelay);
-        }
-        return function () {
-            if (isTreeFocused && !isHighlighted && shouldShowTooltip) {
-                hideTooltip();
-            }
-        };
+  }, [rootNodes]);
+  var _React$useState3 = React.useState(false),
+    _React$useState4 = _slicedToArray(_React$useState3, 2),
+    isTreeFocused = _React$useState4[0],
+    setIsTreeFocused = _React$useState4[1];
+  var _React$useState5 = React.useState({
+      width: 0,
+      height: 0
+    }),
+    _React$useState6 = _slicedToArray(_React$useState5, 2),
+    containerSize = _React$useState6[0],
+    setContainerSize = _React$useState6[1];
+  var handleContainerResize = React.useCallback(function (entries) {
+    if (entries[0]) {
+      var _ref2 = entries[0].target,
+        height = _ref2.clientHeight,
+        width = _ref2.clientWidth;
+      setContainerSize({
+        width: width,
+        height: height
+      });
+    }
+  }, [setContainerSize]);
+  var setResizeObserverTarget = useResizeObserver(handleContainerResize);
+  var defaultGetChildren = React.useCallback(function (node) {
+    return Array.isArray(options) ? options.filter(function (childNode) {
+      return getParentId(childNode) === node.id;
+    }) : [];
+  }, [getParentId, options]);
+  var getChildren = getChildren_ || defaultGetChildren;
+  var _useTree = useTree({
+      rootNodes: rootNodes,
+      expanded: expanded,
+      selected: selected,
+      selectionLimit: selectionLimit,
+      multiple: multiple,
+      autoExpandParent: autoExpandParent,
+      onSelect: onSelect,
+      onCollapse: onCollapse,
+      onExpand: onExpand,
+      getChildren: getChildren,
+      getParentId: getParentId
+    }),
+    nodes = _useTree.nodes,
+    isExpanded = _useTree.isExpanded,
+    isSelected = _useTree.isSelected,
+    isLoading = _useTree.isLoading,
+    highlightedNode = _useTree.highlightedNode,
+    isNodeHighlighted = _useTree.isHighlighted,
+    highlight = _useTree.highlight,
+    handleSelection = _useTree.handleSelection,
+    handleExpansion = _useTree.handleExpansion,
+    _setExpanded = _useTree.setExpanded,
+    _setSelected = _useTree.setSelected,
+    isFileLimitReached = _useTree.isFileLimitReached,
+    listNavigation = _useTree.listNavigation;
+  var setSelected = React.useCallback(function (selected) {
+    var nodes = Array.isArray(selected) ? selected : [selected];
+    _setSelected(new Set(nodes.map(function (node) {
+      return node.id;
+    })));
+  }, [_setSelected]);
+  var setExpanded = React.useCallback(function (expanded) {
+    var nodes = Array.isArray(expanded) ? expanded : [expanded];
+    _setExpanded(new Set(nodes.map(function (node) {
+      return node.id;
+    })));
+  }, [_setExpanded]);
+  React.useImperativeHandle(ref, function () {
+    return {
+      rootEl: wrapperRef.current,
+      setSelected: setSelected,
+      setExpanded: setExpanded,
+      toggleSelected: function toggleSelected(node) {
+        return handleSelection(node);
+      },
+      toggleExpanded: function toggleExpanded(node) {
+        return handleExpansion(node);
+      }
+    };
+  });
+  var defaultGetIcon = React.useCallback(function (node) {
+    var isFolder = getType(node) === 'branch';
+    return isFolder ? /*#__PURE__*/React.createElement(Folder, null) : /*#__PURE__*/React.createElement(File, null);
+  }, [getType]);
+  var getIcon = getIconBase || defaultGetIcon;
+  var isHighlighted = React.useCallback(function (node) {
+    return isTreeFocused && isNodeHighlighted(node);
+  }, [isNodeHighlighted, isTreeFocused]);
+  var handleAccessibility = function handleAccessibility(e) {
+    onKeyDown && onKeyDown(e);
+    var key = e.key;
+    switch (key) {
+      case 'Enter':
+        e.preventDefault();
+        isSelectable(highlightedNode) && handleSelection(highlightedNode);
+        break;
+      case 'Space Bar':
+      case ' ':
+        e.preventDefault();
+        isExpandable(highlightedNode) && handleExpansion(highlightedNode);
+        break;
+      case 'ArrowDown':
+      case 'Down':
+        e.preventDefault();
+        listNavigation.increment();
+        break;
+      case 'ArrowUp':
+      case 'Up':
+        e.preventDefault();
+        listNavigation.decrement();
+        break;
+    }
+  };
+  React.useEffect(function () {
+    if (isTreeFocused) {
+      var _listRef$current;
+      (_listRef$current = listRef.current) === null || _listRef$current === void 0 ? void 0 : _listRef$current.scrollToItem(listNavigation.index);
+    }
+  }, [isTreeFocused, listNavigation.index]);
+  var defaultRowRenderer = React.useCallback(function (props) {
+    return /*#__PURE__*/React.createElement(TreeRow, props);
+  }, []);
+  React.useEffect(function () {
+    var _listInnerRef$current;
+    var rowContentSizes = [];
+    var childNodes = Array.from(((_listInnerRef$current = listInnerRef.current) === null || _listInnerRef$current === void 0 ? void 0 : _listInnerRef$current.childNodes) || []);
+    childNodes.forEach(function (child) {
+      var rowContent = child.querySelector('[data-row-content]');
+      if (rowContent) {
+        var _dataset$padding;
+        var leftPadding = (_dataset$padding = child.dataset.padding) !== null && _dataset$padding !== void 0 ? _dataset$padding : '0';
+        rowContentSizes.push(rowContent.scrollWidth + parseInt(leftPadding, 10) + rowRightPadding);
+      }
     });
-    var onMouseEnter = function () {
-        setMouseOver(true);
-        if (!shouldShowTooltip) {
-            timer.setTimer(showTooltip, tooltipDelay);
-        }
-        highlight(node);
+    var maxSizeRowContent = Math.max.apply(Math, rowContentSizes) + scrollbarWidth;
+    setContentMaxWidth(maxSizeRowContent);
+  });
+  var rowRenderer = rowRendererBase || defaultRowRenderer;
+  var itemData = React.useMemo(function () {
+    return {
+      nodes: nodes,
+      getIcon: getIcon,
+      getLabel: getLabel,
+      getType: getType,
+      isExpandable: isExpandable,
+      isSelectable: isSelectable,
+      isExpanded: isExpanded,
+      isSelected: isSelected,
+      isLoading: isLoading,
+      highlight: highlight,
+      isHighlighted: isHighlighted,
+      handleSelection: handleSelection,
+      handleExpansion: handleExpansion,
+      rowRenderer: rowRenderer,
+      isFileLimitReached: isFileLimitReached,
+      selectionLimit: selectionLimit,
+      isTreeFocused: isTreeFocused,
+      treeContainer: wrapperRef.current
     };
-    var onMouseLeave = function () {
-        setMouseOver(false);
-        timer.cancel();
+  }, [getIcon, getLabel, getType, handleExpansion, handleSelection, highlight, isExpandable, isExpanded, isFileLimitReached, isHighlighted, isLoading, isSelectable, isSelected, isTreeFocused, nodes, rowRenderer, selectionLimit]);
+  if (!rootNodes) {
+    console.error('Tree must have a valid root node');
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(StyledTree, _extends({}, props, {
+    ref: mergeRefs(wrapperRef, setResizeObserverTarget),
+    tabIndex: 0,
+    onFocus: function onFocus() {
+      return setIsTreeFocused(true);
+    },
+    onBlur: function onBlur() {
+      return setIsTreeFocused(false);
+    },
+    onKeyDown: handleAccessibility
+  }), /*#__PURE__*/React.createElement(FixedSizeList, {
+    className: "size-list",
+    ref: listRef,
+    height: visibleHeight || Math.min(nodes.length * rowHeight, rowHeight * maxVisibleNodes),
+    innerRef: listInnerRef,
+    outerRef: listOuterRefRef,
+    itemCount: nodes.length,
+    itemSize: rowHeight,
+    innerElementType: innerElementType,
+    outerElementType: outerElementType,
+    itemData: itemData,
+    width: Math.max(contentMaxWidth, containerSize.width)
+  }, TreeNode));
+});
+var TreeNode = /*#__PURE__*/React.memo(function (_ref3) {
+  var _ref3$data = _ref3.data,
+    nodes = _ref3$data.nodes,
+    rowRenderer = _ref3$data.rowRenderer,
+    highlight = _ref3$data.highlight,
+    isTreeFocused = _ref3$data.isTreeFocused,
+    props = _objectWithoutProperties(_ref3$data, _excluded2),
+    index = _ref3.index,
+    style = _ref3.style;
+  var node = nodes[index];
+  var isHighlighted = props.isHighlighted(node);
+  var _React$useState7 = React.useState(false),
+    _React$useState8 = _slicedToArray(_React$useState7, 2),
+    isMouseOver = _React$useState8[0],
+    setMouseOver = _React$useState8[1];
+  var timer = useTimer({});
+  var _useVisibility = useVisibility({}),
+    shouldShowTooltip = _useVisibility.isVisible,
+    showTooltip = _useVisibility.show,
+    hideTooltip = _useVisibility.hide;
+  React.useEffect(function () {
+    if (isHighlighted && !shouldShowTooltip) {
+      timer.setTimer(showTooltip, tooltipDelay);
+    }
+    return function () {
+      if (isTreeFocused && !isHighlighted && shouldShowTooltip) {
         hideTooltip();
+      }
     };
-    return (React.createElement(StyledTreeRowWrapper, { tabIndex: -1, onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, style: style, "data-padding": getPadding(node.level) }, rowRenderer(__assign({ node: node, shouldShowTooltip: shouldShowTooltip, isMouseOver: isMouseOver }, props))));
+  });
+  var onMouseEnter = function onMouseEnter() {
+    setMouseOver(true);
+    if (!shouldShowTooltip) {
+      timer.setTimer(showTooltip, tooltipDelay);
+    }
+    highlight(node);
+  };
+  var onMouseLeave = function onMouseLeave() {
+    setMouseOver(false);
+    timer.cancel();
+    hideTooltip();
+  };
+  return /*#__PURE__*/React.createElement(StyledTreeRowWrapper, {
+    tabIndex: -1,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    style: style,
+    "data-padding": getPadding(node.level)
+  }, rowRenderer(_objectSpread({
+    node: node,
+    shouldShowTooltip: shouldShowTooltip,
+    isMouseOver: isMouseOver
+  }, props)));
 }, areEqual);
-var TreeRow = function (_a) {
-    var node = _a.node, getIcon = _a.getIcon, getLabel = _a.getLabel, handleExpansion = _a.handleExpansion, handleSelection = _a.handleSelection, selectionLimit = _a.selectionLimit, isFileLimitReached = _a.isFileLimitReached, shouldShowTooltip = _a.shouldShowTooltip, isMouseOver = _a.isMouseOver, treeContainer = _a.treeContainer, props = __rest(_a, ["node", "getIcon", "getLabel", "handleExpansion", "handleSelection", "selectionLimit", "isFileLimitReached", "shouldShowTooltip", "isMouseOver", "treeContainer"]);
-    var expanderRef = React.useRef(null);
-    var isSelected = props.isSelected(node);
-    var isSelectable = props.isSelectable(node);
-    var isExpandable = props.isExpandable(node);
-    var isExpanded = props.isExpanded(node);
-    var isLoading = props.isLoading(node);
-    var isHighlighted = props.isHighlighted(node);
-    var nodeType = props.getType(node);
-    var rowLabel = getLabel(node);
-    var onClick = React.useCallback(function (event) {
-        var _a;
-        if (isSelectable && isExpandable) {
-            // @ts-ignore
-            ((_a = expanderRef === null || expanderRef === void 0 ? void 0 : expanderRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))
-                ? handleExpansion(node)
-                : handleSelection(node);
-        }
-        else if (isSelectable) {
-            handleSelection(node);
-        }
-        else if (isExpandable) {
-            handleExpansion(node);
-        }
-    }, [handleExpansion, handleSelection, isExpandable, isSelectable, node]);
-    var onMouseDown = React.useCallback(function (e) {
-        e.preventDefault();
-        treeContainer.focus();
-    }, [treeContainer]);
-    return (React.createElement(TreeRowContainer, { level: node.level, onClick: onClick, onMouseDown: onMouseDown, isSelected: isSelected, isSelectable: isSelectable, isExpandable: isExpandable, isHighlighted: isHighlighted, isFileLimitReached: isFileLimitReached, "data-qa": "core-tree-row-container" },
-        React.createElement(StyledTreeRowContent, { "data-row-content": true },
-            React.createElement(TreeRowChevron, { ref: expanderRef, isExpandable: isExpandable, isExpanded: isExpanded }),
-            React.createElement(TreeRowIcon, { isLoading: isLoading, isSelected: isSelected, icon: getIcon(node) }),
-            React.createElement(TreeRowTooltip, { isSelected: isSelected, isSelectable: isSelectable, isHighlighted: isHighlighted, selectionLimit: selectionLimit, isFileLimitReached: isFileLimitReached, shouldShowTooltip: shouldShowTooltip, isMouseOver: isMouseOver, fileName: rowLabel, nodeType: nodeType, treeContainer: treeContainer },
-                React.createElement(TreeRowName, { value: rowLabel })))));
+var TreeRow = function TreeRow(_ref4) {
+  var node = _ref4.node,
+    getIcon = _ref4.getIcon,
+    getLabel = _ref4.getLabel,
+    handleExpansion = _ref4.handleExpansion,
+    handleSelection = _ref4.handleSelection,
+    selectionLimit = _ref4.selectionLimit,
+    isFileLimitReached = _ref4.isFileLimitReached,
+    shouldShowTooltip = _ref4.shouldShowTooltip,
+    isMouseOver = _ref4.isMouseOver,
+    treeContainer = _ref4.treeContainer,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  var expanderRef = React.useRef(null);
+  var isSelected = props.isSelected(node);
+  var isSelectable = props.isSelectable(node);
+  var isExpandable = props.isExpandable(node);
+  var isExpanded = props.isExpanded(node);
+  var isLoading = props.isLoading(node);
+  var isHighlighted = props.isHighlighted(node);
+  var nodeType = props.getType(node);
+  var rowLabel = getLabel(node);
+  var onClick = React.useCallback(function (event) {
+    if (isSelectable && isExpandable) {
+      var _expanderRef$current;
+      // @ts-ignore
+      expanderRef !== null && expanderRef !== void 0 && (_expanderRef$current = expanderRef.current) !== null && _expanderRef$current !== void 0 && _expanderRef$current.contains(event.target) ? handleExpansion(node) : handleSelection(node);
+    } else if (isSelectable) {
+      handleSelection(node);
+    } else if (isExpandable) {
+      handleExpansion(node);
+    }
+  }, [handleExpansion, handleSelection, isExpandable, isSelectable, node]);
+  var onMouseDown = React.useCallback(function (e) {
+    e.preventDefault();
+    treeContainer.focus();
+  }, [treeContainer]);
+  return /*#__PURE__*/React.createElement(TreeRowContainer, {
+    level: node.level,
+    onClick: onClick,
+    onMouseDown: onMouseDown,
+    isSelected: isSelected,
+    isSelectable: isSelectable,
+    isExpandable: isExpandable,
+    isHighlighted: isHighlighted,
+    isFileLimitReached: isFileLimitReached,
+    "data-qa": "core-tree-row-container"
+  }, /*#__PURE__*/React.createElement(StyledTreeRowContent, {
+    "data-row-content": true
+  }, /*#__PURE__*/React.createElement(TreeRowChevron, {
+    ref: expanderRef,
+    isExpandable: isExpandable,
+    isExpanded: isExpanded
+  }), /*#__PURE__*/React.createElement(TreeRowIcon, {
+    isLoading: isLoading,
+    isSelected: isSelected,
+    icon: getIcon(node)
+  }), /*#__PURE__*/React.createElement(TreeRowTooltip, {
+    isSelected: isSelected,
+    isSelectable: isSelectable,
+    isHighlighted: isHighlighted,
+    selectionLimit: selectionLimit,
+    isFileLimitReached: isFileLimitReached,
+    shouldShowTooltip: shouldShowTooltip,
+    isMouseOver: isMouseOver,
+    fileName: rowLabel,
+    nodeType: nodeType,
+    treeContainer: treeContainer
+  }, /*#__PURE__*/React.createElement(TreeRowName, {
+    value: rowLabel
+  }))));
 };
-var IconContainer = function (_a) {
-    var children = _a.children, isSelected = _a.isSelected, props = __rest(_a, ["children", "isSelected"]);
-    return (React.createElement(StyledIconContainer, __assign({ "$isSelected": isSelected }, props), children));
+var IconContainer = function IconContainer(_ref5) {
+  var children = _ref5.children,
+    isSelected = _ref5.isSelected,
+    props = _objectWithoutProperties(_ref5, _excluded4);
+  return /*#__PURE__*/React.createElement(StyledIconContainer, _extends({
+    $isSelected: isSelected
+  }, props), children);
 };
-var TreeRowChevron = React.forwardRef(function (_a, ref) {
-    var isExpanded = _a.isExpanded, isExpandable = _a.isExpandable;
-    return (React.createElement(StyledChevronContainer, { ref: ref }, isExpandable ? React.createElement(StyledChevron, { "$isExpanded": isExpanded }) : null));
+var TreeRowChevron = /*#__PURE__*/React.forwardRef(function (_ref6, ref) {
+  var isExpanded = _ref6.isExpanded,
+    isExpandable = _ref6.isExpandable;
+  return /*#__PURE__*/React.createElement(StyledChevronContainer, {
+    ref: ref
+  }, isExpandable ? /*#__PURE__*/React.createElement(StyledChevron, {
+    $isExpanded: isExpanded
+  }) : null);
 });
-var TreeRowIcon = function (_a) {
-    var isSelected = _a.isSelected, isLoading = _a.isLoading, icon = _a.icon;
-    return (React.createElement(IconContainer, { isSelected: isSelected, marginLeft: "sm", marginRight: "sm" }, isLoading ? React.createElement(Spinner, { size: "sm" }) : icon));
+var TreeRowIcon = function TreeRowIcon(_ref7) {
+  var isSelected = _ref7.isSelected,
+    isLoading = _ref7.isLoading,
+    icon = _ref7.icon;
+  return /*#__PURE__*/React.createElement(IconContainer, {
+    isSelected: isSelected,
+    marginLeft: "sm",
+    marginRight: "sm"
+  }, isLoading ? /*#__PURE__*/React.createElement(Spinner, {
+    size: "sm"
+  }) : icon);
 };
-var TreeRowName = function (_a) {
-    var value = _a.value;
-    return (React.createElement(StyledFilenameCaption, null, value));
+var TreeRowName = function TreeRowName(_ref8) {
+  var value = _ref8.value;
+  return /*#__PURE__*/React.createElement(StyledFilenameCaption, null, value);
 };
-var getSelectionLimitMessage = function (selectionLimit) { return ({
+var getSelectionLimitMessage = function getSelectionLimitMessage(selectionLimit) {
+  return {
     key: 'selectionLimit',
     options: {
-        count: selectionLimit,
-    },
-}); };
-var getUnsupportedFileTypeMessage = function (fileName) {
-    var _a = parseFilename(fileName), extension = _a.extension, isFilename = _a.isFilename;
-    var key = isFilename ? 'specific' : 'unspecific';
-    return {
-        key: "unsupportedFileType.".concat(key),
-        options: {
-            fileType: ".".concat(extension.toUpperCase()),
-        },
-    };
+      count: selectionLimit
+    }
+  };
 };
-var TreeRowTooltip = function (_a) {
-    var children = _a.children, isFocused = _a.isHighlighted, isFileLimitReached = _a.isFileLimitReached, isSelectable = _a.isSelectable, isSelected = _a.isSelected, nodeType = _a.nodeType, selectionLimit = _a.selectionLimit, shouldShowTooltip = _a.shouldShowTooltip, isMouseOver = _a.isMouseOver, fileName = _a.fileName, treeContainer = _a.treeContainer;
-    var I18n = useI18nContext();
-    var rowRef = React.useRef(null);
-    var isUserInteracting = isFocused || isMouseOver;
-    var isTooltipVisible = isUserInteracting && shouldShowTooltip && !isSelected;
-    var isFile = nodeType === 'leaf';
-    var _b = React.useState(false), isCropped = _b[0], setCropped = _b[1];
-    var registerRowEl = useIntersectionObserver(function (entries) {
-        entries.forEach(function (entry) {
-            if (entry.rootBounds &&
-                entry.rootBounds.left - entry.boundingClientRect.left >= 0) {
-                setCropped(true);
-                return;
-            }
-            setCropped(false);
-        });
-    }, {
-        root: treeContainer,
-        rootMargin: '0px',
-        threshold: intersectionThresholds,
+var getUnsupportedFileTypeMessage = function getUnsupportedFileTypeMessage(fileName) {
+  var _parseFilename = parseFilename(fileName),
+    extension = _parseFilename.extension,
+    isFilename = _parseFilename.isFilename;
+  var key = isFilename ? 'specific' : 'unspecific';
+  return {
+    key: "unsupportedFileType.".concat(key),
+    options: {
+      fileType: ".".concat(extension.toUpperCase())
+    }
+  };
+};
+var TreeRowTooltip = function TreeRowTooltip(_ref9) {
+  var children = _ref9.children,
+    isFocused = _ref9.isHighlighted,
+    isFileLimitReached = _ref9.isFileLimitReached,
+    isSelectable = _ref9.isSelectable,
+    isSelected = _ref9.isSelected,
+    nodeType = _ref9.nodeType,
+    selectionLimit = _ref9.selectionLimit,
+    shouldShowTooltip = _ref9.shouldShowTooltip,
+    isMouseOver = _ref9.isMouseOver,
+    fileName = _ref9.fileName,
+    treeContainer = _ref9.treeContainer;
+  var I18n = useI18nContext();
+  var rowRef = React.useRef(null);
+  var isUserInteracting = isFocused || isMouseOver;
+  var isTooltipVisible = isUserInteracting && shouldShowTooltip && !isSelected;
+  var isFile = nodeType === 'leaf';
+  var _React$useState9 = React.useState(false),
+    _React$useState10 = _slicedToArray(_React$useState9, 2),
+    isCropped = _React$useState10[0],
+    setCropped = _React$useState10[1];
+  var registerRowEl = useIntersectionObserver(function (entries) {
+    entries.forEach(function (entry) {
+      if (entry.rootBounds && entry.rootBounds.left - entry.boundingClientRect.left >= 0) {
+        setCropped(true);
+        return;
+      }
+      setCropped(false);
     });
-    var selectionLimitMessage = getSelectionLimitMessage(selectionLimit);
-    var unsupportedFileTypeMessage = getUnsupportedFileTypeMessage(fileName);
-    var message = isSelectable
-        ? isFileLimitReached && selectionLimitMessage
-        : isFile && unsupportedFileTypeMessage;
-    var trigger = isTooltipVisible && !isCropped && message ? 'always' : 'none';
-    return (React.createElement(Tooltip, { trigger: trigger, overlay: message ? I18n.t("core.tree.".concat(message.key), message.options) : null, placement: "top-left" },
-        React.createElement("div", { ref: mergeRefs(rowRef, registerRowEl) }, children)));
+  }, {
+    root: treeContainer,
+    rootMargin: '0px',
+    threshold: intersectionThresholds
+  });
+  var selectionLimitMessage = getSelectionLimitMessage(selectionLimit);
+  var unsupportedFileTypeMessage = getUnsupportedFileTypeMessage(fileName);
+  var message = isSelectable ? isFileLimitReached && selectionLimitMessage : isFile && unsupportedFileTypeMessage;
+  var trigger = isTooltipVisible && !isCropped && message ? 'always' : 'none';
+  return /*#__PURE__*/React.createElement(Tooltip, {
+    trigger: trigger,
+    overlay: message ? I18n.t("core.tree.".concat(message.key), message.options) : null,
+    placement: "top-left"
+  }, /*#__PURE__*/React.createElement("div", {
+    ref: mergeRefs(rowRef, registerRowEl)
+  }, children));
 };
-var TreeRowContainer = function (_a) {
-    var children = _a.children, isHighlighted = _a.isHighlighted, isSelected = _a.isSelected, isSelectable = _a.isSelectable, isExpandable = _a.isExpandable, isFileLimitReached = _a.isFileLimitReached, level = _a.level, props = __rest(_a, ["children", "isHighlighted", "isSelected", "isSelectable", "isExpandable", "isFileLimitReached", "level"]);
-    return (React.createElement(StyledTreeRowContainer, __assign({ isSelectable: (isSelectable &&
-            ((isFileLimitReached && isSelected) || !isFileLimitReached)) ||
-            isExpandable, isHighlighted: isHighlighted, isSelected: isSelected, style: { paddingLeft: getPadding(level) } }, props), children));
+var TreeRowContainer = function TreeRowContainer(_ref10) {
+  var children = _ref10.children,
+    isHighlighted = _ref10.isHighlighted,
+    isSelected = _ref10.isSelected,
+    isSelectable = _ref10.isSelectable,
+    isExpandable = _ref10.isExpandable,
+    isFileLimitReached = _ref10.isFileLimitReached,
+    level = _ref10.level,
+    props = _objectWithoutProperties(_ref10, _excluded5);
+  return /*#__PURE__*/React.createElement(StyledTreeRowContainer, _extends({
+    isSelectable: isSelectable && (isFileLimitReached && isSelected || !isFileLimitReached) || isExpandable,
+    isHighlighted: isHighlighted,
+    isSelected: isSelected,
+    style: {
+      paddingLeft: getPadding(level)
+    }
+  }, props), children);
 };
 //# sourceMappingURL=Tree.js.map