@rio-cloud/rio-uikit 1.10.1 → 1.12.0

package/lib/es/src/components/assetTree/Tree.js

@@ -0,0 +1,320 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSubTypeCounts = exports.getTypeCounts = void 0;
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+/* eslint-disable no-use-before-define */
+const react_1 = tslib_1.__importStar(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isNil_1 = tslib_1.__importDefault(require("lodash/fp/isNil"));
+const isEmpty_1 = tslib_1.__importDefault(require("lodash/fp/isEmpty"));
+const isEqual_1 = tslib_1.__importDefault(require("lodash/fp/isEqual"));
+const map_1 = tslib_1.__importDefault(require("lodash/fp/map"));
+const find_1 = tslib_1.__importDefault(require("lodash/fp/find"));
+const cond_1 = tslib_1.__importDefault(require("lodash/fp/cond"));
+const without_1 = tslib_1.__importDefault(require("lodash/fp/without"));
+const flow_1 = tslib_1.__importDefault(require("lodash/fp/flow"));
+const filter_1 = tslib_1.__importDefault(require("lodash/fp/filter"));
+const size_1 = tslib_1.__importDefault(require("lodash/fp/size"));
+const stubTrue_1 = tslib_1.__importDefault(require("lodash/fp/stubTrue"));
+const omit_1 = tslib_1.__importDefault(require("lodash/fp/omit"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const TreeSearch_1 = tslib_1.__importDefault(require("./TreeSearch"));
+const TreeSelectAll_1 = tslib_1.__importDefault(require("./TreeSelectAll"));
+const TreeSummary_1 = tslib_1.__importDefault(require("./TreeSummary"));
+const TreeNodeContainer_1 = tslib_1.__importDefault(require("./TreeNodeContainer"));
+const TreeNode_1 = tslib_1.__importDefault(require("./TreeNode"));
+const TreeLeafList_1 = tslib_1.__importDefault(require("./TreeLeafList"));
+const TreeNothingFound_1 = tslib_1.__importDefault(require("./TreeNothingFound"));
+const TreeOptions_1 = tslib_1.__importDefault(require("./TreeOptions"));
+const TreeRoot_1 = tslib_1.__importDefault(require("./TreeRoot"));
+const TypeCounter_1 = tslib_1.__importDefault(require("./TypeCounter"));
+const treeUtils_1 = require("./treeUtils");
+const treeReducer_1 = require("./treeReducer");
+const useTreeVirtualization_1 = require("./useTreeVirtualization");
+const useTreeExpansion_1 = require("./useTreeExpansion");
+const useTreeHeight_1 = require("./useTreeHeight");
+const useTreeScrollPosition_1 = require("./useTreeScrollPosition");
+const SmoothScrollbars_1 = tslib_1.__importDefault(require("../../SmoothScrollbars"));
+var treeUtils_2 = require("./treeUtils");
+Object.defineProperty(exports, "getTypeCounts", { enumerable: true, get: function () { return treeUtils_2.getTypeCounts; } });
+Object.defineProperty(exports, "getSubTypeCounts", { enumerable: true, get: function () { return treeUtils_2.getSubTypeCounts; } });
+const filterProps = (0, omit_1.default)([
+    'expandedGroups',
+    'onExpandGroupsChange',
+    'onSearchChange',
+    'onSelectionChange',
+    'treeOptions',
+]);
+const customCompare = (prevProps, nextProps) => (0, isEqual_1.default)(filterProps(prevProps), filterProps(nextProps));
+const VIRTUALIZED_THRESHOLD = 50;
+const DEFAULT_VIRTUALIZED_OVERSCAN = 5;
+const Tree = react_1.default.memo((props) => {
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, treeHeaderContent, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false, onTypeFilterChange = noop_1.default, virtualizeThreshold = VIRTUALIZED_THRESHOLD, overscan = DEFAULT_VIRTUALIZED_OVERSCAN, ...remainingProps } = props;
+    const [state, dispatch] = (0, react_1.useReducer)(treeReducer_1.treeReducer, {
+        groupedItems: [],
+        flatItems: [],
+        allChecked: false,
+        searchValue: '',
+        assetCounts: {},
+        typeFilter: [],
+        visibleTypeCounters: [],
+        emptyGroups: [],
+    });
+    const treeRef = (0, react_1.useRef)(null);
+    const previousItems = (0, react_1.useRef)();
+    const previousGroups = (0, react_1.useRef)();
+    const previousSearchValue = (0, react_1.useRef)('');
+    const { internalExpandedGroups, handleToggleNode } = (0, useTreeExpansion_1.useTreeExpansion)(props.expandedGroups, props.onExpandGroupsChange);
+    const hasGroups = () => groups && (0, treeUtils_1.notEmpty)(groups);
+    const hasInternalSearchValue = () => (0, treeUtils_1.notEmpty)(state.searchValue);
+    const hasSearchAndGroups = () => hasInternalSearchValue() && hasGroups();
+    const hasNoSearchAndGroups = () => !hasInternalSearchValue() && hasGroups();
+    const scrollElementRef = (0, react_1.useRef)(null);
+    const { virtualizedItems, virtualizer } = (0, useTreeVirtualization_1.useTreeVirtualization)(state.groupedItems, state.flatItems, hasInternalSearchValue(), hasGroups(), internalExpandedGroups, scrollElementRef, overscan);
+    const { scrollToTop } = (0, useTreeScrollPosition_1.useTreeScrollPosition)(virtualizer, scrollElementRef);
+    // Enhance the handleToggleNode function
+    const enhancedHandleToggleNode = (0, react_1.useCallback)((nodeId) => {
+        // Execute the original toggle logic
+        handleToggleNode(nodeId);
+    }, [handleToggleNode]);
+    // Create a callback for scroll events that works with the virtualizer
+    const handleVirtualizedScroll = (0, react_1.useCallback)((event) => {
+        if (virtualizer && event?.target) {
+            const scrollElement = event.target;
+            virtualizer.scrollToOffset(scrollElement.scrollTop, { align: 'start' });
+        }
+    }, [virtualizer]);
+    (0, react_1.useEffect)(() => {
+        // Update Tree when items or groups have changed
+        if ((0, treeUtils_1.notEqual)(previousItems.current, items) || (0, treeUtils_1.notEqual)(previousGroups.current, groups)) {
+            previousItems.current = items;
+            previousGroups.current = groups;
+            const typeCounts = (0, treeUtils_1.getTypeCounts)(items);
+            dispatch((0, treeReducer_1.assetCounted)(typeCounts));
+            const allChecked = checkAllSelected({ items, groups, selectedItems, selectedGroups }, state.flatItems);
+            dispatch((0, treeReducer_1.allCheckedChanged)(allChecked));
+            // Get the distinct asset types from the asset list that is passed into the component
+            // to know which asset type counter to render
+            dispatch((0, treeReducer_1.visibleTypeCountersChanged)(Object.keys(typeCounts)));
+            makeTree(groups, items);
+        }
+    }, [items, groups]);
+    const debouncedMakeTree = (0, treeUtils_1.debounceFn)((losGroupos, losItems) => makeTree(losGroupos, losItems));
+    (0, react_1.useEffect)(() => {
+        // To prevent executing the effect on first render, use a ref to check previous render values
+        if ((0, treeUtils_1.notEqual)(previousSearchValue.current, state.searchValue)) {
+            debouncedMakeTree(groups, items);
+            previousSearchValue.current = state.searchValue;
+        }
+    }, [state.searchValue]);
+    (0, react_1.useEffect)(() => makeTree(groups, items), [state.typeFilter]);
+    // Update tree when empty groups are toggled from outside
+    (0, react_1.useEffect)(() => makeTree(groups, items), [showEmptyGroups]);
+    // Update "select all" state from outside when groups are selected outside programmatically
+    // without using the "select all" checkbox
+    (0, react_1.useEffect)(() => {
+        const numOfAllGroups = (0, size_1.default)(groups);
+        const numOfSelectedGroups = (0, size_1.default)(selectedGroups);
+        if (numOfSelectedGroups !== numOfAllGroups && state.allChecked) {
+            dispatch((0, treeReducer_1.allCheckedChanged)(false));
+        }
+        else if (numOfSelectedGroups !== 0 && numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
+            dispatch((0, treeReducer_1.allCheckedChanged)(true));
+        }
+    }, [selectedGroups]);
+    const checkAllSelected = (updatedProps, flatItems) => {
+        const { items: updatedItems, groups: updatedGroups, selectedItems: updatedSelectedItems, selectedGroups: updatedSelectedGroups, } = updatedProps;
+        if ((!hasGroups() && (0, isEmpty_1.default)(updatedSelectedItems)) ||
+            (hasNoSearchAndGroups() && (0, isEmpty_1.default)(updatedSelectedGroups)) ||
+            (hasSearchAndGroups() && (0, isEmpty_1.default)(updatedSelectedItems))) {
+            return false;
+        }
+        if (hasNoSearchAndGroups()) {
+            const unselectedGroups = (0, filter_1.default)((0, treeUtils_1.filterOutByItemId)(updatedSelectedGroups))(updatedGroups);
+            return (0, isEmpty_1.default)(unselectedGroups);
+        }
+        if (hasSearchAndGroups()) {
+            const unselectedSearchItems = (0, filter_1.default)((0, treeUtils_1.filterOutByItemId)(updatedSelectedItems))(flatItems);
+            return (0, isEmpty_1.default)(unselectedSearchItems);
+        }
+        const unselectedItems = updatedItems.filter((0, treeUtils_1.filterOutByItemId)(updatedSelectedItems));
+        return (0, isEmpty_1.default)(unselectedItems);
+    };
+    const selectAllSearchResultItems = (shouldSelect) => selectAllFlatItems(shouldSelect);
+    const handleSelectAll = (shouldSelect, isStateIndeterminate) => {
+        const shouldSelectAll = shouldSelect && !isStateIndeterminate;
+        dispatch((0, treeReducer_1.allCheckedChanged)(shouldSelectAll));
+        (0, cond_1.default)([
+            [hasNoSearchAndGroups, () => selectAllGroups(shouldSelectAll)],
+            [hasSearchAndGroups, () => selectAllSearchResultItems(shouldSelectAll)],
+            [stubTrue_1.default, () => selectAllFlatItems(shouldSelectAll)],
+        ])();
+    };
+    const selectAllGroups = (shouldSelect) => respondSelection([], shouldSelect ? (0, treeUtils_1.getListIds)(groups) : []);
+    const selectAllFlatItems = (shouldSelect) => respondSelection(shouldSelect ? (0, treeUtils_1.getListIds)(state.flatItems) : [], []);
+    const respondSelection = (updatedSelectedItemIds, updatedSelectedGroupIds) => {
+        onSelectionChange({
+            items: updatedSelectedItemIds,
+            groups: updatedSelectedGroupIds,
+        });
+    };
+    const handleGroupSelection = (group, isStateIndeterminate) => {
+        const groupId = group.id;
+        const isSelected = selectedGroups.includes(groupId);
+        const shouldSelectGroup = !isSelected && !isStateIndeterminate;
+        // handle group selection
+        const newSelectedGroups = shouldSelectGroup
+            ? [...selectedGroups, groupId]
+            : (0, treeUtils_1.excludeFromList)(selectedGroups, groupId);
+        // deselect all items of a node since they will be selected inherently via the group itself
+        const itemsInGroup = (0, find_1.default)((entry) => entry.id === groupId)(state.groupedItems);
+        const itemIdsOfGroup = (0, map_1.default)((item) => item.id)(itemsInGroup?.items);
+        const updatedSelectedItems = (0, without_1.default)(itemIdsOfGroup, selectedItems);
+        // check if all groups are selected to change the state of TreeSelectAll
+        const groupAmount = groups.length;
+        const emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
+        const totalGroupAmount = groupAmount - emptyGroupAmount;
+        const areAllGroupsChecked = totalGroupAmount === newSelectedGroups.length;
+        dispatch((0, treeReducer_1.allCheckedChanged)(areAllGroupsChecked));
+        respondSelection(updatedSelectedItems, newSelectedGroups);
+    };
+    const handleSearchChange = (updatedSearchValue) => {
+        onSearchChange(updatedSearchValue);
+        dispatch((0, treeReducer_1.searchValueChanged)(updatedSearchValue));
+        if (virtualizer) {
+            // Every time search changes or is cleared, scroll to the top
+            setTimeout(() => {
+                scrollToTop();
+            }, 10);
+        }
+    };
+    const setFlatItemList = (updatedItems, searchValue) => {
+        const flatItems = (0, treeUtils_1.getFlatItems)(updatedItems, searchValue);
+        dispatch((0, treeReducer_1.flatItemsChanged)(flatItems));
+    };
+    const setGroupedItemList = (groupsToProcess, itemsToProcess, considerEmptyGroups) => {
+        // Map items to groups with filtered items
+        const mappedItemsToGroups = (0, treeUtils_1.getMappedItemsToGroups)(groupsToProcess, itemsToProcess);
+        const newGroupedItems = (0, flow_1.default)(treeUtils_1.sortGroupsByName, treeUtils_1.sortGroupItemsByName)(mappedItemsToGroups);
+        const groupedItems = considerEmptyGroups ? newGroupedItems : (0, treeUtils_1.filterEmptyGroups)(newGroupedItems);
+        // Keep the empty groups in memory for later access in select all, without re-iterating on every
+        // group selection
+        const emptyGroups = (0, filter_1.default)((group) => (0, isEmpty_1.default)(group.items))(newGroupedItems);
+        dispatch((0, treeReducer_1.emptyGroupsChanged)(emptyGroups));
+        dispatch((0, treeReducer_1.assetCounted)((0, treeUtils_1.getTypeCounts)(items)));
+        dispatch((0, treeReducer_1.groupedItemsChanged)(groupedItems));
+        // Update expanded groups again
+    };
+    const makeTree = (updatedGroups, updatedItems) => {
+        const internalSearchValue = state.searchValue;
+        const internalTypeFilter = state.typeFilter;
+        const groupsToProcess = updatedGroups;
+        const itemsToProcess = updatedItems;
+        const hasGroupList = (groupList) => groupList && (0, treeUtils_1.notEmpty)(groupList);
+        const hasNoInternalSearchAndGroups = () => (0, isEmpty_1.default)(internalSearchValue) && hasGroupList(groupsToProcess);
+        const hasInternalSearchAndGroups = () => (0, treeUtils_1.notEmpty)(internalSearchValue) && hasGroupList(groupsToProcess);
+        const filteredItems = (0, isEmpty_1.default)(internalTypeFilter)
+            ? itemsToProcess
+            : (0, treeUtils_1.filterAssetByType)(internalTypeFilter)(itemsToProcess);
+        const setGroupedItems = () => setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
+        const setFlatItems = () => setFlatItemList(filteredItems, internalSearchValue);
+        (0, cond_1.default)([
+            [hasNoInternalSearchAndGroups, setGroupedItems],
+            [hasInternalSearchAndGroups, setFlatItems],
+            [stubTrue_1.default, setFlatItems],
+        ])();
+    };
+    const containerHeight = (0, useTreeHeight_1.useTreeHeight)(treeRef, scrollHeight);
+    const renderVirtualizedTree = () => {
+        const items = virtualizer.getVirtualItems();
+        const isGroupedList = hasGroups() && !hasInternalSearchValue();
+        return ((0, jsx_runtime_1.jsx)(SmoothScrollbars_1.default, { ref: scrollElementRef, className: 'tree-virtual-scrollbar', onScroll: handleVirtualizedScroll, autoHeight: false, slideIn: true, style: {
+                height: `${containerHeight}px`,
+            }, children: (0, jsx_runtime_1.jsx)("div", { className: isGroupedList ? 'grouped-list' : 'flat-list', style: {
+                    height: `${virtualizer.getTotalSize()}px`,
+                    position: 'relative',
+                }, children: items.map(virtualItem => {
+                    const item = virtualizedItems[virtualItem.index];
+                    if (!item) {
+                        return null;
+                    }
+                    const isGroupSelected = selectedGroups.includes(item.id) ||
+                        (item.type === 'leaf' && selectedGroups.includes(item.groupId));
+                    return ((0, jsx_runtime_1.jsx)("div", { "data-index": virtualItem.index, ref: virtualizer.measureElement, className: `virtualized-tree-item ${item.type === 'group' ? 'group-item' : 'leaf-item'} ${isGroupSelected ? 'checked' : ''}`, style: {
+                            position: 'absolute',
+                            top: 0,
+                            left: 0,
+                            width: '100%',
+                            height: `${virtualItem.size}px`,
+                            transform: `translateY(${virtualItem.start}px)`,
+                        }, children: item.type === 'group' ? ((0, jsx_runtime_1.jsx)(TreeNodeContainer_1.default, { groupId: item.id, isOpen: item.isExpanded, disableAnimation: disableAnimation, children: (0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: item.data, hasMultiselect: hasMultiselect, onToggleNode: enhancedHandleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isOpen: item.isExpanded, isIndeterminate: !isGroupSelected &&
+                                    item.data.items.some(groupItem => selectedItems.includes(groupItem.id)) }) }, item.id)) : (
+                        // Render individual leaf item with proper styling
+                        (0, jsx_runtime_1.jsx)(TreeNodeContainer_1.default, { isOpen: true, disableAnimation: disableAnimation, children: (0, jsx_runtime_1.jsx)(TreeLeafList_1.default, { leafList: [item.data], hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }) }, item.id)) }, `${item.type}-${item.id}-${virtualItem.index}`));
+                }) }) }));
+    };
+    const renderTree = () => {
+        const { groupedItems } = state;
+        if ((0, isEmpty_1.default)(groupedItems)) {
+            return (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {});
+        }
+        if (virtualizedItems.length > virtualizeThreshold) {
+            return renderVirtualizedTree();
+        }
+        const result = (0, map_1.default)((group) => {
+            const groupId = group.id;
+            const groupItems = group.items;
+            const isOpen = internalExpandedGroups?.includes(groupId) ?? false;
+            const numSelectedGroupItems = (0, filter_1.default)((0, treeUtils_1.containsItemById)(selectedItems))(groupItems).length;
+            const isGroupSelected = selectedGroups.includes(groupId);
+            const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
+            return ((0, jsx_runtime_1.jsxs)(TreeNodeContainer_1.default, { groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation, children: [(0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate, isOpen: isOpen }), isOpen && ((0, jsx_runtime_1.jsx)(TreeLeafList_1.default, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }))] }, groupId));
+        })(groupedItems);
+        return result;
+    };
+    const renderFlatList = () => {
+        const { flatItems } = state;
+        const hasLeafs = (0, isEmpty_1.default)(flatItems);
+        if (virtualizedItems.length > virtualizeThreshold) {
+            return renderVirtualizedTree();
+        }
+        const getLeafs = () => ((0, jsx_runtime_1.jsx)(TreeLeafList_1.default, { leafList: flatItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }));
+        return ((0, jsx_runtime_1.jsx)(TreeNodeContainer_1.default, { disableAnimation: disableAnimation, isOpen: true, children: hasLeafs ? (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {}) : getLeafs() }));
+    };
+    const hasExternalGroups = (0, treeUtils_1.notEmpty)(groups);
+    const hasSelectedAllItems = () => (0, isEqual_1.default)((0, size_1.default)(selectedItems), (0, size_1.default)(state.flatItems));
+    const hasPartiallySelectedItems = () => (0, treeUtils_1.notEmpty)(selectedItems) && !hasSelectedAllItems();
+    const hasSelectedAllGroups = () => {
+        const emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
+        return (0, isEqual_1.default)((0, size_1.default)(selectedGroups), (0, size_1.default)(groups) - emptyGroupAmount);
+    };
+    const hasPartiallySelectedGroups = () => hasExternalGroups && (0, treeUtils_1.notEmpty)(selectedGroups) && !hasSelectedAllGroups();
+    const hasSearchAndNoItems = hasInternalSearchValue() && (0, isEmpty_1.default)(state.flatItems);
+    const hasSearchAndNoGroups = hasInternalSearchValue() && (0, isEmpty_1.default)(state.groupedItems) && hasExternalGroups;
+    const hideSelectAll = hasSearchAndNoItems || hasSearchAndNoGroups;
+    const isIndeterminate = hasPartiallySelectedGroups() || hasPartiallySelectedItems();
+    const treeClassNames = (0, classnames_1.default)('Tree', className);
+    const treeHeadClasses = (0, classnames_1.default)('TreeHead', 'display-flex gap-5', 'padding-15');
+    const shouldRenderTree = () => hasGroups() && !hasInternalSearchValue();
+    const content = (0, cond_1.default)([
+        [shouldRenderTree, () => renderTree()],
+        [stubTrue_1.default, () => renderFlatList()],
+    ])();
+    const handleFilterByType = (type) => {
+        const updatedTypeFilter = (0, treeUtils_1.addOrRemoveFromList)(state.typeFilter, type);
+        dispatch((0, treeReducer_1.typeFilterChanged)(updatedTypeFilter));
+        onTypeFilterChange(updatedTypeFilter);
+    };
+    const enableActivity = (0, size_1.default)(state.visibleTypeCounters) !== 1;
+    const isFilterActive = (0, treeUtils_1.notEmpty)(state.typeFilter);
+    const showTreeHead = !hideTreeHead;
+    const showSelectAll = !hideSelectAll;
+    const showSearch = !hideSearch;
+    const showSummary = !hideSummary;
+    const hasCustomSearch = !(0, isNil_1.default)(search);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: treeClassNames, ref: treeRef, children: [(0, jsx_runtime_1.jsxs)("div", { className: 'TreeHeader', children: [treeHeaderContent, showSearch && !hasCustomSearch && ((0, jsx_runtime_1.jsx)(TreeSearch_1.default, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && ((0, jsx_runtime_1.jsxs)("div", { className: treeHeadClasses, children: [showSelectAll && ((0, jsx_runtime_1.jsx)("div", { className: 'border border-right-only hidden-empty padding-right-10 margin-right-2', children: (0, jsx_runtime_1.jsx)(TreeSelectAll_1.default, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) })), (0, jsx_runtime_1.jsx)("div", { className: 'display-flex justify-content-between align-items-start width-100pct', children: showSummary
+                                    ? summary || ((0, jsx_runtime_1.jsx)(TreeSummary_1.default, { children: (0, map_1.default)((typeCounter) => ((0, jsx_runtime_1.jsx)(TypeCounter_1.default, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
+                                    : null }), (0, jsx_runtime_1.jsx)(TreeOptions_1.default, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] }))] }), (0, jsx_runtime_1.jsx)(TreeRoot_1.default, { maxHeight: scrollHeight, disableAnimation: disableAnimation, children: content })] }));
+}, customCompare);
+exports.default = Tree;

package/lib/es/src/components/assetTree/TreeCategory.d.ts

@@ -0,0 +1,22 @@
+import type { PropsWithChildren } from 'react';
+export type TreeCategoryProps = {
+    /**
+     * A unique identifier for that category.
+     */
+    id: string;
+    /**
+     * The rioglyph icon name for that category.
+     */
+    icon: string;
+    /**
+     * The optional label for the category which will be shown in a tooltip.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * Defines whether or not a selection indicator should be shown.
+     */
+    hasSelection?: boolean;
+};
+export type TreeCategoryNode = React.ReactElement<TreeCategoryProps>;
+declare const TreeCategory: (props: PropsWithChildren<TreeCategoryProps>) => string | number | true | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null;
+export default TreeCategory;

package/lib/es/src/components/assetTree/TreeCategory.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const TreeCategory = (props) => props.children || null;
+exports.default = TreeCategory;

package/lib/es/src/components/assetTree/TreeLeaf.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { TreeItem } from './Tree';
+export type TreeLeafProps = {
+    item: TreeItem;
+    hasMultiselect: boolean;
+    showRadioButtons: boolean;
+    isSelected: boolean;
+    onSelectItem: VoidFunction;
+    onActiveItem: VoidFunction;
+};
+declare const TreeLeaf: React.MemoExoticComponent<(props: TreeLeafProps) => import("react/jsx-runtime").JSX.Element>;
+export default TreeLeaf;

package/lib/es/src/components/assetTree/TreeLeaf.js

@@ -0,0 +1,28 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
+const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
+const RadioButton_1 = tslib_1.__importDefault(require("../radiobutton/RadioButton"));
+const treeUtils_1 = require("./treeUtils");
+const getIconRenderInfo = (item) => {
+    if (item.icon === null) {
+        // explicit opt-out
+        return { primaryIcon: null, subIcon: null };
+    }
+    // fallback to type
+    const primaryIcon = item.icon ?? item.type;
+    // pairIcon with fallback to subType
+    const subIcon = item.pairIcon === null ? null : (item.pairIcon ?? item.subType ?? null);
+    return { primaryIcon: (0, treeUtils_1.withRioglyphPrefix)(primaryIcon), subIcon: (0, treeUtils_1.withRioglyphPrefix)(subIcon) };
+};
+const TreeLeaf = react_1.default.memo((props) => {
+    const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
+    const treeNodeClassNames = (0, classnames_1.default)('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
+    const { primaryIcon, subIcon } = getIconRenderInfo(item);
+    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": item.id, children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', onClick: onActiveItem, children: [primaryIcon && !subIcon && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${primaryIcon}` }), primaryIcon && subIcon && ((0, jsx_runtime_1.jsxs)("span", { className: 'rioglyph-icon-pair', children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${primaryIcon}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${subIcon}` })] })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabelNameText', children: [(0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", { className: 'text-light margin-right-3', children: item.name.firstName }), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) }), item.info && (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextSubline', children: item.info })] })] })] }));
+});
+exports.default = TreeLeaf;

package/lib/es/src/components/assetTree/TreeLeafList.d.ts

@@ -0,0 +1,11 @@
+import type { TreeItem } from './Tree';
+export type TreeLeafListProps = {
+    leafList: TreeItem[];
+    hasMultiselect: boolean;
+    showRadioButtons: boolean;
+    selectedItems: string[];
+    selectedGroups: string[];
+    onSelectionChange: (selectedItems: string[], selectedGroups: string[]) => void;
+};
+declare const TreeLeafList: (props: TreeLeafListProps) => import("react/jsx-runtime").JSX.Element;
+export default TreeLeafList;

package/lib/es/src/components/assetTree/TreeLeafList.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const TreeLeaf_1 = tslib_1.__importDefault(require("./TreeLeaf"));
+const treeUtils_1 = require("./treeUtils");
+const TreeLeafList = (props) => {
+    const { leafList, hasMultiselect, showRadioButtons, selectedItems, selectedGroups, onSelectionChange } = props;
+    const handleItemSelection = (itemId) => {
+        const isSelected = selectedItems.includes(itemId);
+        const newSelectedItems = isSelected
+            ? (0, treeUtils_1.excludeFromList)(selectedItems, itemId)
+            : [...selectedItems, itemId];
+        onSelectionChange(newSelectedItems, selectedGroups);
+    };
+    const handleSetItemActive = (itemId) => onSelectionChange([itemId], []);
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: leafList.map(item => ((0, jsx_runtime_1.jsx)(TreeLeaf_1.default, { item: item, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, isSelected: selectedItems.includes(item.id), onSelectItem: () => handleItemSelection(item.id), onActiveItem: () => handleSetItemActive(item.id) }, item.id))) }));
+};
+exports.default = TreeLeafList;

package/lib/es/src/components/assetTree/TreeNode.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { GroupedItem } from './Tree';
+export type TreeNodeProps = {
+    node: GroupedItem;
+    hasMultiselect?: boolean;
+    isSelected?: boolean;
+    isOpen?: boolean;
+    isIndeterminate?: boolean;
+    onToggleNode: (nodeId: string) => void;
+    onSelect: (node: GroupedItem, isIndeterminate: boolean) => void;
+    className?: string;
+};
+declare const TreeNode: React.MemoExoticComponent<(props: TreeNodeProps) => import("react/jsx-runtime").JSX.Element>;
+export default TreeNode;

package/lib/es/src/components/assetTree/TreeNode.js

@@ -0,0 +1,30 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const Checkbox_1 = tslib_1.__importDefault(require("../checkbox/Checkbox"));
+const treeUtils_1 = require("./treeUtils");
+const TreeNode = react_1.default.memo((props) => {
+    const { node, hasMultiselect = false, isSelected = false, isOpen = false, isIndeterminate = false, onToggleNode, onSelect, } = props;
+    const treeNodeClassNames = (0, classnames_1.default)('TreeNode', 'from-group', isSelected && 'checked', node.className && node.className);
+    const hasChildren = !!node.items.length;
+    const expandedIcon = node.expandedIcon || node.icon;
+    const iconName = isOpen ? (0, treeUtils_1.withRioglyphPrefix)(expandedIcon) : (0, treeUtils_1.withRioglyphPrefix)(node.icon);
+    const handleNodeSelection = () => {
+        onSelect(node, isIndeterminate);
+    };
+    const handleContainerClick = (event) => {
+        // Ignore clicks on checkboxes and don't expand or collapse on checkbox clicks
+        const isCheckbox = event.target.closest('.TreeCheckbox');
+        if (isCheckbox) {
+            return;
+        }
+        if (hasChildren) {
+            onToggleNode(node.id);
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: treeNodeClassNames, "data-key": node.id, onClick: handleContainerClick, children: [hasMultiselect && ((0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, disabled: node.disabled, indeterminate: isIndeterminate, onClick: handleNodeSelection })), (0, jsx_runtime_1.jsxs)("span", { className: 'TreeLabel TreeLabelName', children: [iconName && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph ${iconName}` }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameText', children: (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelNameTextHeadline', children: node.name }) }), (0, jsx_runtime_1.jsx)("span", { className: 'TreeLabelCount label label-muted label-filled label-condensed', children: node.items.length }), (0, jsx_runtime_1.jsx)("span", { className: `TreeLabelExpander rioglyph rioglyph-chevron-down ${hasChildren ? '' : 'text-color-light'}` })] })] }));
+});
+exports.default = TreeNode;

package/lib/es/src/components/assetTree/TreeNodeContainer.d.ts

@@ -0,0 +1,8 @@
+import type { PropsWithChildren } from 'react';
+export type TreeNodeContainerProps = {
+    isOpen: boolean;
+    groupId?: string;
+    disableAnimation: boolean;
+};
+declare const TreeNodeContainer: (props: PropsWithChildren<TreeNodeContainerProps>) => import("react/jsx-runtime").JSX.Element;
+export default TreeNodeContainer;

package/lib/es/src/components/assetTree/TreeNodeContainer.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const TreeNodeContainer = (props) => {
+    const { isOpen, groupId, disableAnimation, children } = props;
+    const treeNodeContainerClasses = (0, classnames_1.default)('TreeNodeContainer', 'user-select-none overflow-hidden', isOpen && 'open');
+    return ((0, jsx_runtime_1.jsx)("div", { className: treeNodeContainerClasses, "data-id": groupId, children: children }));
+};
+exports.default = TreeNodeContainer;

package/lib/es/src/components/assetTree/TreeNothingFound.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+type TreeNothingFoundProps = {};
+declare const TreeNothingFound: React.MemoExoticComponent<(props: TreeNothingFoundProps) => import("react/jsx-runtime").JSX.Element>;
+export default TreeNothingFound;

package/lib/es/src/components/assetTree/TreeNothingFound.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = tslib_1.__importDefault(require("react"));
+const TreeNothingFound = react_1.default.memo((props) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: `TreeTreeNothingFound display-flex justify-content-center text-size-20
+                padding-top-25 margin-top-25 margin-bottom-25`, children: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-looking-glass-man text-size-400pct text-color-light' }) }));
+});
+exports.default = TreeNothingFound;

package/lib/es/src/components/assetTree/TreeOption.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+export type TreeOptionProps = {
+    /**
+     * Defines whether the option is set.
+     *
+     * @default false
+     */
+    isChecked?: boolean;
+    /**
+     * Callback triggered when option is selected.
+     * @param event
+     * @returns
+     */
+    onChange?: (event: React.MouseEvent<HTMLDivElement>) => void;
+    /**
+     * The label for the option.
+     */
+    label: string | React.ReactNode;
+    /**
+     * Additional classes added to the wrapping element.
+     */
+    className?: string;
+};
+declare const TreeOption: (props: TreeOptionProps) => import("react/jsx-runtime").JSX.Element;
+export default TreeOption;

package/lib/es/src/components/assetTree/TreeOption.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
+const Switch_1 = tslib_1.__importDefault(require("../switch/Switch"));
+const TreeOption = (props) => {
+    const { isChecked = false, className, label, onChange = noop_1.default, ...remainingProps } = props;
+    const optionClasses = (0, classnames_1.default)('TreeOption', 'display-flex', 'justify-content-start', 'align-items-center', 'gap-10', 'cursor-pointer', className);
+    return ((0, jsx_runtime_1.jsxs)("div", { ...remainingProps, className: optionClasses, onClick: onChange, children: [(0, jsx_runtime_1.jsx)("span", { className: 'flex-1-1', children: label }), (0, jsx_runtime_1.jsx)("span", { className: 'pointer-events-none scale-80', children: (0, jsx_runtime_1.jsx)(Switch_1.default, { keyName: 'TreeOption-switch', checked: isChecked }) })] }));
+};
+exports.default = TreeOption;

package/lib/es/src/components/assetTree/TreeOptions.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export type TreeOptionsProps = {
+    treeOptions?: React.ReactNode[];
+    treeOptionsTooltip?: React.ReactNode;
+    className?: string;
+};
+declare const TreeOptions: (props: TreeOptionsProps) => import("react/jsx-runtime").JSX.Element | null;
+export default TreeOptions;

package/lib/es/src/components/assetTree/TreeOptions.js

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const lodash_1 = require("lodash");
+const ButtonDropdown_1 = tslib_1.__importDefault(require("../dropdown/ButtonDropdown"));
+const SimpleTooltip_1 = tslib_1.__importDefault(require("../tooltip/SimpleTooltip"));
+const TreeOptions = (props) => {
+    const { treeOptions = [], treeOptionsTooltip, className } = props;
+    if ((0, lodash_1.isEmpty)(treeOptions)) {
+        return null;
+    }
+    const dropdownClasses = (0, classnames_1.default)('display-flex flex-column gap-10', 'width-250', 'padding-15', className);
+    const customDropdown = (0, jsx_runtime_1.jsx)("div", { className: dropdownClasses, children: treeOptions });
+    const dropdown = ((0, jsx_runtime_1.jsx)(ButtonDropdown_1.default, { title: (0, jsx_runtime_1.jsx)("span", { className: 'rioglyph rioglyph-option-vertical', "aria-hidden": 'true' }), bsStyle: 'default', bsSize: 'sm', customDropdown: customDropdown, toggleClassName: 'hover-bg-white border-none text-color-gray hover-text-color-dark', className: 'TreeHeaderOptions height-20', pullRight: true, iconOnly: true }));
+    if (treeOptionsTooltip) {
+        return ((0, jsx_runtime_1.jsx)(SimpleTooltip_1.default, { content: treeOptionsTooltip, placement: 'bottom-end', delay: { show: 1000, hide: 0 }, popperConfig: {
+                modifiers: [
+                    {
+                        name: 'offset',
+                        options: {
+                            offset: [10, 5],
+                        },
+                    },
+                    {
+                        name: 'arrow',
+                        options: {},
+                    },
+                ],
+            }, children: (0, jsx_runtime_1.jsx)("div", { children: dropdown }) }));
+    }
+    return dropdown;
+};
+exports.default = TreeOptions;

package/lib/es/src/components/assetTree/TreeRoot.d.ts

@@ -0,0 +1,7 @@
+import { PropsWithChildren } from 'react';
+export type TreeRootProps = {
+    disableAnimation: boolean;
+    maxHeight?: number;
+};
+declare const TreeRoot: ({ maxHeight, disableAnimation, children }: PropsWithChildren<TreeRootProps>) => import("react/jsx-runtime").JSX.Element;
+export default TreeRoot;

package/lib/es/src/components/assetTree/TreeRoot.js

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const react_1 = require("@formkit/auto-animate/react");
+const TreeRoot = ({ maxHeight, disableAnimation, children }) => {
+    const treeRootClasses = (0, classnames_1.default)('TreeRoot', 'user-select-none', maxHeight ? 'overflow-auto' : 'overflow-hidden');
+    const [parent, enableAnimations] = (0, react_1.useAutoAnimate)();
+    enableAnimations(!disableAnimation);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: parent, className: treeRootClasses, style: { maxHeight }, children: children }));
+};
+exports.default = TreeRoot;