@rio-cloud/rio-uikit 1.13.1 → 2.0.0-beta.1

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

@@ -1,320 +0,0 @@
-"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/components/assetTree/TreeCategory.d.ts

@@ -1,22 +0,0 @@
-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/components/assetTree/TreeCategory.js

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

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

@@ -1,12 +0,0 @@
-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/components/assetTree/TreeLeaf.js

@@ -1,28 +0,0 @@
-"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/components/assetTree/TreeLeafList.d.ts

@@ -1,11 +0,0 @@
-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/components/assetTree/TreeLeafList.js

@@ -1,19 +0,0 @@
-"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/components/assetTree/TreeNode.d.ts

@@ -1,14 +0,0 @@
-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/components/assetTree/TreeNode.js

@@ -1,30 +0,0 @@
-"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/components/assetTree/TreeNodeContainer.d.ts

@@ -1,8 +0,0 @@
-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/components/assetTree/TreeNodeContainer.js

@@ -1,11 +0,0 @@
-"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/components/assetTree/TreeNothingFound.d.ts

@@ -1,4 +0,0 @@
-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/components/assetTree/TreeNothingFound.js

@@ -1,10 +0,0 @@
-"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/components/assetTree/TreeOption.d.ts

@@ -1,25 +0,0 @@
-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/components/assetTree/TreeOption.js

@@ -1,13 +0,0 @@
-"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/components/assetTree/TreeOptions.d.ts

@@ -1,8 +0,0 @@
-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/components/assetTree/TreeOptions.js

@@ -1,35 +0,0 @@
-"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/components/assetTree/TreeRoot.d.ts

@@ -1,7 +0,0 @@
-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/components/assetTree/TreeRoot.js

@@ -1,13 +0,0 @@
-"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;