@rio-cloud/rio-uikit 0.16.4-beta.2 → 0.16.4-beta.20

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

@@ -1,433 +1,430 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.excludeFromList = 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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-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 orderBy_1 = tslib_1.__importDefault(require("lodash/fp/orderBy"));
-const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
-const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
-const cond_1 = tslib_1.__importDefault(require("lodash/fp/cond"));
-const without_1 = tslib_1.__importDefault(require("lodash/fp/without"));
-const countBy_1 = tslib_1.__importDefault(require("lodash/fp/countBy"));
-const getOr_1 = tslib_1.__importDefault(require("lodash/fp/getOr"));
-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 negate_1 = tslib_1.__importDefault(require("lodash/fp/negate"));
-const keys_1 = tslib_1.__importDefault(require("lodash/fp/keys"));
-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 searchNormalized_1 = require("../../utils/searchNormalized");
-const SEARCH_DEBOUNCE = 100;
-const otherwise = stubTrue_1.default;
-const notEqual = (0, negate_1.default)(isEqual_1.default);
-const notEmpty = (0, negate_1.default)(isEmpty_1.default);
-const Divider = () => ((0, jsx_runtime_1.jsx)("div", { className: 'TreeSelectAllDivider bg-light width-2 height-15 ' +
-        'margin-top-2 margin-bottom-0 margin-left-10 margin-right-10' }));
-const isNameObject = item => (0, isObject_1.default)(item.name);
-const getFullName = item => `${item.name.firstName} ${item.name.lastName}`;
-const getName = item => (isNameObject(item) ? getFullName(item) : item.name);
-const getLowerCaseName = item => (0, getOr_1.default)('', 'name')(item).toLowerCase();
-const getLowerCaseLastName = item => (0, getOr_1.default)('', 'name.lastName')(item).toLowerCase();
-const orderByName = (0, orderBy_1.default)([item => (isNameObject(item) ? getLowerCaseLastName(item) : getLowerCaseName(item))], ['asc']);
-const filterEmptyGroups = (0, filter_1.default)(group => notEmpty(group.items));
-const filterAssetByType = (types = []) => (0, filter_1.default)(asset => types.includes(asset.type));
-const sortGroupsByName = groups => {
-    const fixedGroups = {};
-    const sortableGroups = {};
-    (0, map_1.default)(group => {
-        if (group.position === 'last') {
-            fixedGroups[group.id] = Object.assign({}, group);
-        }
-        else {
-            sortableGroups[group.id] = Object.assign({}, group);
-        }
-    })(groups);
-    const sortedGroups = orderByName(sortableGroups);
-    return (0, isEmpty_1.default)(fixedGroups) ? sortedGroups : Object.assign(Object.assign({}, sortedGroups), fixedGroups);
-};
-const sortGroupItemsByName = groups => {
-    const sortedGroups = {};
-    (0, map_1.default)(group => {
-        sortedGroups[group.id] = Object.assign(Object.assign({}, group), { items: orderByName(group.items) });
-    })(groups);
-    return sortedGroups;
-};
-const getMappedItemsToGroups = (groups, items) => {
-    const mappedGroups = {};
-    // build an object for listing the groups by id
-    groups.forEach(group => {
-        mappedGroups[group.id] = Object.assign(Object.assign({}, group), { items: [] });
-    });
-    items.forEach(item => {
-        // add items to the respective group
-        const groupIds = item.groupIds || [];
-        groupIds.forEach(groupId => {
-            const mappedGroup = mappedGroups[groupId];
-            if (mappedGroup) {
-                mappedGroup.items.push(item);
-            }
-        });
-    });
-    return mappedGroups;
-};
-const filterByName = searchValue => item => {
-    if (searchValue) {
-        return (0, searchNormalized_1.searchNormalized)(getName(item), searchValue);
-    }
-    return true;
-};
-const filterOutByItemId = list => item => !list.includes(item.id);
-const containsItemById = list => item => list.includes(item.id);
-const getFlatItems = (items, searchValue) => (0, flow_1.default)((0, filter_1.default)(filterByName(searchValue)), orderByName)(items);
-const getListIds = list => list.map(listItem => listItem.id);
-const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);
-exports.excludeFromList = excludeFromList;
-const getAssetTypeCounts = items => (0, countBy_1.default)(item => item.type, items);
-const debounceFn = fn => (0, debounce_1.default)(SEARCH_DEBOUNCE, fn);
-const filterProps = (0, omit_1.default)([
-    'expandedGroups',
-    'onExpandGroupsChange',
-    'onSearchChange',
-    'onSelectionChange',
-    'treeOptions',
-]);
-const customCompare = (prevProps, nextProps) => (0, isEqual_1.default)(filterProps(prevProps), filterProps(nextProps));
-const assetCounted = payload => ({ type: 'assetCounted', payload });
-const allCheckedChanged = payload => ({ type: 'allCheckedChanged', payload });
-const searchValueChanged = payload => ({ type: 'searchValueChanged', payload });
-const flatItemsChanged = payload => ({ type: 'flatItemsChanged', payload });
-const groupedItemsChanged = payload => ({ type: 'groupedItemsChanged', payload });
-const typeFilterChanged = payload => ({ type: 'typeFilterChanged', payload });
-const visibleTypeCountersChanged = payload => ({ type: 'visibleTypeCountersChanged', payload });
-const emptyGroupsChanged = payload => ({ type: 'emptyGroupsChanged', payload });
-const treeReducer = (state, action) => {
-    switch (action.type) {
-        case 'assetCounted':
-            return Object.assign(Object.assign({}, state), { assetCounts: action.payload });
-        case 'allCheckedChanged':
-            return Object.assign(Object.assign({}, state), { allChecked: action.payload });
-        case 'searchValueChanged':
-            return Object.assign(Object.assign({}, state), { searchValue: action.payload, allChecked: false });
-        case 'flatItemsChanged':
-            return Object.assign(Object.assign({}, state), { flatItems: action.payload });
-        case 'groupedItemsChanged':
-            return Object.assign(Object.assign({}, state), { groupedItems: action.payload });
-        case 'typeFilterChanged':
-            return Object.assign(Object.assign({}, state), { typeFilter: action.payload });
-        case 'visibleTypeCountersChanged':
-            return Object.assign(Object.assign({}, state), { visibleTypeCounters: action.payload });
-        case 'emptyGroupsChanged':
-            return Object.assign(Object.assign({}, state), { emptyGroups: action.payload });
-        default:
-            throw new Error();
-    }
-};
-const Tree = react_1.default.memo(props => {
-    const { groups, items, selectedGroups, selectedItems, onSelectionChange, hasMultiselect, showRadioButtons, hideSearch, hideTreeHead, summary, hideSummary, search, searchPlaceholder, onSearchChange, className, scrollHeight, expandedGroups, onExpandGroupsChange, showEmptyGroups, treeOptions } = props, remainingProps = tslib_1.__rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions"]);
-    const [state, dispatch] = (0, react_1.useReducer)(treeReducer, {
-        groupedItems: [],
-        flatItems: [],
-        allChecked: false,
-        searchValue: '',
-        assetCounts: {},
-        typeFilter: [],
-        visibleTypeCounters: [],
-        emptyGroups: [],
-    });
-    const treeRef = (0, react_1.useRef)();
-    const previousItems = (0, react_1.useRef)();
-    const previousGroups = (0, react_1.useRef)();
-    const previousSearchValue = (0, react_1.useRef)('');
-    const internalExpandedGroups = (0, react_1.useRef)(expandedGroups);
-    (0, react_1.useEffect)(() => {
-        // Update Tree when items or groups have changed
-        if (notEqual(previousItems.current, items) || notEqual(previousGroups.current, groups)) {
-            previousItems.current = items;
-            previousGroups.current = groups;
-            const typeCounts = getAssetTypeCounts(items);
-            dispatch(assetCounted(typeCounts));
-            const allChecked = checkAllSelected({ items, groups, selectedItems, selectedGroups }, state.flatItems);
-            dispatch(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(visibleTypeCountersChanged(Object.keys(typeCounts)));
-            makeTree(groups, items);
-        }
-    }, [items, groups]);
-    const debouncedMakeTree = 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 (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 programatically
-    // 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(allCheckedChanged(false));
-        }
-        else if (numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
-            dispatch(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)(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
-            return (0, isEmpty_1.default)(unselectedGroups);
-        }
-        else if (hasSearchAndGroups()) {
-            const unselectedSearchItems = (0, filter_1.default)(filterOutByItemId(updatedSelectedItems))(flatItems);
-            return (0, isEmpty_1.default)(unselectedSearchItems);
-        }
-        const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
-        return (0, isEmpty_1.default)(unselectedItems);
-    };
-    const handleToggleNode = nodeId => {
-        const newExpandedNodes = internalExpandedGroups.current.includes(nodeId)
-            ? internalExpandedGroups.current.filter(item => item !== nodeId)
-            : [...internalExpandedGroups.current, nodeId];
-        // Performance improvement to skip on render cycle and change "open" class directly
-        if (internalExpandedGroups.current.includes(nodeId)) {
-            getNodeContainerDomElementById(nodeId).classList.remove('open');
-        }
-        else {
-            getNodeContainerDomElementById(nodeId).classList.add('open');
-        }
-        internalExpandedGroups.current = newExpandedNodes;
-        onExpandGroupsChange(newExpandedNodes);
-    };
-    const getNodeContainerDomElementById = nodeId => {
-        return treeRef.current.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
-    };
-    const selectAllSearchResultItems = shouldSelect => selectAllFlatItems(shouldSelect);
-    const handeSelectAll = (shouldSelect, isIndeterminate) => {
-        const shouldSelectAll = shouldSelect && !isIndeterminate;
-        dispatch(allCheckedChanged(shouldSelectAll));
-        (0, cond_1.default)([
-            [hasNoSearchAndGroups, () => selectAllGroups(shouldSelectAll)],
-            [hasSearchAndGroups, () => selectAllSearchResultItems(shouldSelectAll)],
-            [otherwise, () => selectAllFlatItems(shouldSelectAll)],
-        ])();
-    };
-    const selectAllGroups = shouldSelect => respondSelection([], shouldSelect ? getListIds(groups) : []);
-    const selectAllFlatItems = shouldSelect => respondSelection(shouldSelect ? getListIds(state.flatItems) : [], []);
-    const respondSelection = (updatedSelectedItems, updatedSelectedGroups) => {
-        onSelectionChange({ items: updatedSelectedItems, groups: updatedSelectedGroups });
-    };
-    const handleGroupSelection = (group, isIndeterminate) => {
-        const groupId = group.id;
-        const isSelected = selectedGroups.includes(groupId);
-        const shouldSelectGroup = !isSelected && !isIndeterminate;
-        // handle group selection
-        const newSelectedGroups = shouldSelectGroup
-            ? [...selectedGroups, groupId]
-            : (0, exports.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(allCheckedChanged(areAllGroupsChecked));
-        respondSelection(updatedSelectedItems, newSelectedGroups);
-    };
-    const handleSearchChange = updatedSearchValue => {
-        onSearchChange(updatedSearchValue);
-        dispatch(searchValueChanged(updatedSearchValue));
-    };
-    const hasGroups = () => groups && notEmpty(groups);
-    const hasSearchAndGroups = () => hasInternalSearchValue() && hasGroups();
-    const hasNoSearchAndGroups = () => !hasInternalSearchValue() && hasGroups();
-    const setFlatItemList = (updtedItems, searchValue) => {
-        const flatItems = getFlatItems(updtedItems, searchValue);
-        dispatch(assetCounted(getAssetTypeCounts(flatItems)));
-        dispatch(flatItemsChanged(flatItems));
-    };
-    const setGroupedItemList = (groupsToProcess, itemsToProcess, considerEmptyGroups) => {
-        // Map items to groups with filtered items
-        const mappedItemsToGroups = getMappedItemsToGroups(groupsToProcess, itemsToProcess);
-        const newGroupedItems = (0, flow_1.default)(sortGroupsByName, sortGroupItemsByName)(mappedItemsToGroups);
-        const groupedItems = considerEmptyGroups ? newGroupedItems : 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(emptyGroupsChanged(emptyGroups));
-        dispatch(assetCounted(getAssetTypeCounts(items)));
-        dispatch(groupedItemsChanged(groupedItems));
-    };
-    const makeTree = (updatedGroups, updatedItems) => {
-        const internalSearchValue = state.searchValue;
-        const internalTypeFilter = state.typeFilter;
-        const groupsToProcess = updatedGroups;
-        const itemsToProcess = updatedItems;
-        const hasGroupList = groupList => groupList && notEmpty(groupList);
-        const hasNoInternalSearchAndGroups = () => (0, isEmpty_1.default)(internalSearchValue) && hasGroupList(groupsToProcess);
-        const hasInternalSearchAndGroups = () => notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
-        const filteredItems = (0, isEmpty_1.default)(internalTypeFilter)
-            ? itemsToProcess
-            : filterAssetByType(internalTypeFilter)(itemsToProcess);
-        const setGroupedItems = () => setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
-        const setFlatItems = () => setFlatItemList(filteredItems, internalSearchValue);
-        (0, cond_1.default)([
-            [hasNoInternalSearchAndGroups, setGroupedItems],
-            [hasInternalSearchAndGroups, setFlatItems],
-            [otherwise, setFlatItems],
-        ])();
-    };
-    const renderTree = () => {
-        const { groupedItems } = state;
-        if ((0, isEmpty_1.default)(groupedItems)) {
-            return (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {});
-        }
-        const result = (0, map_1.default)(group => {
-            const groupId = group.id;
-            const groupItems = group.items;
-            const isOpen = expandedGroups.includes(groupId);
-            const numSelectedGroupItems = (0, filter_1.default)(containsItemById(selectedItems))(groupItems).length;
-            const isGroupSelected = selectedGroups.includes(groupId);
-            const isIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-            return ((0, jsx_runtime_1.jsxs)(TreeNodeContainer_1.default, Object.assign({ groupId: groupId, isOpen: isOpen }, { children: [(0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isIndeterminate }), (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);
-        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, Object.assign({ isOpen: true }, { children: hasLeafs ? (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {}) : getLeafs() }));
-    };
-    const hasExternalGroups = notEmpty(groups);
-    const hasInternalSearchValue = () => notEmpty(state.searchValue);
-    const hasSelectedAllItems = () => (0, isEqual_1.default)((0, size_1.default)(selectedItems), (0, size_1.default)(state.flatItems));
-    const hasPartialySelectedItems = () => 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 hasPartialySelectedGroups = () => hasExternalGroups && 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 = hasPartialySelectedGroups() || hasPartialySelectedItems();
-    const treeClassNames = (0, classnames_1.default)('Tree', className);
-    const treeHeadClasses = (0, classnames_1.default)('TreeHead', 'display-flex align-items-center', 'padding-15');
-    const shouldRenderTree = () => hasGroups() && !hasInternalSearchValue();
-    const content = (0, cond_1.default)([
-        [shouldRenderTree, () => renderTree()],
-        [otherwise, () => renderFlatList()],
-    ])();
-    const handleFilterByType = type => {
-        const currentTypeFilter = new Set(state.typeFilter);
-        if (currentTypeFilter.has(type)) {
-            currentTypeFilter.delete(type);
-        }
-        else {
-            currentTypeFilter.add(type);
-        }
-        dispatch(typeFilterChanged([...currentTypeFilter]));
-    };
-    const isClickable = (0, size_1.default)((0, keys_1.default)(state.assetCounts)) > 1;
-    const isFilterActive = 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", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'TreeHeader' }, { children: [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", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && ((0, jsx_runtime_1.jsx)(TreeSelectAll_1.default, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handeSelectAll })), showSelectAll && hasMultiselect && showSummary && (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between align-items-center 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: isClickable }, typeCounter)))(state.visibleTypeCounters) }))
-                                        : null, (0, jsx_runtime_1.jsx)(TreeOptions_1.default, { treeOptions: treeOptions })] }))] })))] })), (0, jsx_runtime_1.jsx)(TreeRoot_1.default, Object.assign({ maxHeight: scrollHeight }, { children: content }))] })));
-}, customCompare);
-Tree.displayName = 'Tree';
-Tree.defaultProps = {
-    hasMultiselect: true,
-    showRadioButtons: false,
-    hideSearch: false,
-    hideSummary: false,
-    showEmptyGroups: true,
-    selectedGroups: [],
-    selectedItems: [],
-    onSelectionChange: () => { },
-    onExpandGroupsChange: () => { },
-    onSearchChange: () => { },
-    searchPlaceholder: 'Type here to filter by name',
-    treeOptions: [],
-    groups: [],
-};
-Tree.propTypes = {
-    groups: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        id: prop_types_1.default.string.isRequired,
-        name: prop_types_1.default.string.isRequired,
-        icon: prop_types_1.default.string,
-        className: prop_types_1.default.string,
-    })),
-    items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
-        id: prop_types_1.default.string.isRequired,
-        name: prop_types_1.default.oneOfType([
-            prop_types_1.default.string,
-            prop_types_1.default.shape({
-                firstName: prop_types_1.default.string,
-                lastName: prop_types_1.default.string.isRequired,
-            }),
-        ]).isRequired,
-        info: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-        type: prop_types_1.default.string.isRequired,
-        groupIds: prop_types_1.default.arrayOf(prop_types_1.default.string),
-        className: prop_types_1.default.string,
-    })),
-    selectedGroups: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    selectedItems: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    onSelectionChange: prop_types_1.default.func,
-    hasMultiselect: prop_types_1.default.bool,
-    showRadioButtons: prop_types_1.default.bool,
-    hideSearch: prop_types_1.default.bool,
-    summary: prop_types_1.default.node,
-    hideSummary: prop_types_1.default.bool,
-    hideTreeHead: prop_types_1.default.bool,
-    // This defines a custom search component.
-    search: prop_types_1.default.node,
-    searchPlaceholder: prop_types_1.default.string,
-    onSearchChange: prop_types_1.default.func,
-    className: prop_types_1.default.string,
-    scrollHeight: prop_types_1.default.number,
-    expandedGroups: prop_types_1.default.arrayOf(prop_types_1.default.string),
-    onExpandGroupsChange: prop_types_1.default.func,
-    showEmptyGroups: prop_types_1.default.bool,
-    treeOptions: prop_types_1.default.arrayOf(prop_types_1.default.node),
-};
-exports.default = Tree;
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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 prop_types_1 = tslib_1.__importDefault(require("prop-types"));
+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 orderBy_1 = tslib_1.__importDefault(require("lodash/fp/orderBy"));
+const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
+const debounce_1 = tslib_1.__importDefault(require("lodash/fp/debounce"));
+const cond_1 = tslib_1.__importDefault(require("lodash/fp/cond"));
+const without_1 = tslib_1.__importDefault(require("lodash/fp/without"));
+const countBy_1 = tslib_1.__importDefault(require("lodash/fp/countBy"));
+const getOr_1 = tslib_1.__importDefault(require("lodash/fp/getOr"));
+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 negate_1 = tslib_1.__importDefault(require("lodash/fp/negate"));
+const keys_1 = tslib_1.__importDefault(require("lodash/fp/keys"));
+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 searchNormalized_1 = require("../../utils/searchNormalized");
+const excludeFromList_1 = require("./excludeFromList");
+const SEARCH_DEBOUNCE = 100;
+const otherwise = stubTrue_1.default;
+const notEqual = (0, negate_1.default)(isEqual_1.default);
+const notEmpty = (0, negate_1.default)(isEmpty_1.default);
+const Divider = () => (0, jsx_runtime_1.jsx)("div", { className: 'TreeSelectDivider bg-light padding-left-1 height-10 margin-top-2 margin-x-10' });
+const isNameObject = item => (0, isObject_1.default)(item.name);
+const getFullName = item => `${item.name.firstName} ${item.name.lastName}`;
+const getName = item => (isNameObject(item) ? getFullName(item) : item.name);
+const getLowerCaseName = item => (0, getOr_1.default)('', 'name')(item).toLowerCase();
+const getLowerCaseLastName = item => (0, getOr_1.default)('', 'name.lastName')(item).toLowerCase();
+const orderByName = (0, orderBy_1.default)([item => (isNameObject(item) ? getLowerCaseLastName(item) : getLowerCaseName(item))], ['asc']);
+const filterEmptyGroups = (0, filter_1.default)(group => notEmpty(group.items));
+const filterAssetByType = (types = []) => (0, filter_1.default)(asset => types.includes(asset.type));
+const sortGroupsByName = groups => {
+    const fixedGroups = {};
+    const sortableGroups = {};
+    (0, map_1.default)(group => {
+        if (group.position === 'last') {
+            fixedGroups[group.id] = Object.assign({}, group);
+        }
+        else {
+            sortableGroups[group.id] = Object.assign({}, group);
+        }
+    })(groups);
+    const sortedGroups = orderByName(sortableGroups);
+    return (0, isEmpty_1.default)(fixedGroups) ? sortedGroups : Object.assign(Object.assign({}, sortedGroups), fixedGroups);
+};
+const sortGroupItemsByName = groups => {
+    const sortedGroups = {};
+    (0, map_1.default)(group => {
+        sortedGroups[group.id] = Object.assign(Object.assign({}, group), { items: orderByName(group.items) });
+    })(groups);
+    return sortedGroups;
+};
+const getMappedItemsToGroups = (groups, items) => {
+    const mappedGroups = {};
+    // build an object for listing the groups by id
+    groups.forEach(group => {
+        mappedGroups[group.id] = Object.assign(Object.assign({}, group), { items: [] });
+    });
+    items.forEach(item => {
+        // add items to the respective group
+        const groupIds = item.groupIds || [];
+        groupIds.forEach(groupId => {
+            const mappedGroup = mappedGroups[groupId];
+            if (mappedGroup) {
+                mappedGroup.items.push(item);
+            }
+        });
+    });
+    return mappedGroups;
+};
+const filterByName = searchValue => item => {
+    if (searchValue) {
+        return (0, searchNormalized_1.searchNormalized)(getName(item), searchValue);
+    }
+    return true;
+};
+const filterOutByItemId = list => item => !list.includes(item.id);
+const containsItemById = list => item => list.includes(item.id);
+const getFlatItems = (items, searchValue) => (0, flow_1.default)((0, filter_1.default)(filterByName(searchValue)), orderByName)(items);
+const getListIds = list => list.map(listItem => listItem.id);
+const getAssetTypeCounts = items => (0, countBy_1.default)(item => item.type, items);
+const debounceFn = fn => (0, debounce_1.default)(SEARCH_DEBOUNCE, fn);
+const filterProps = (0, omit_1.default)([
+    'expandedGroups',
+    'onExpandGroupsChange',
+    'onSearchChange',
+    'onSelectionChange',
+    'treeOptions',
+]);
+const customCompare = (prevProps, nextProps) => (0, isEqual_1.default)(filterProps(prevProps), filterProps(nextProps));
+const assetCounted = payload => ({ type: 'assetCounted', payload });
+const allCheckedChanged = payload => ({ type: 'allCheckedChanged', payload });
+const searchValueChanged = payload => ({ type: 'searchValueChanged', payload });
+const flatItemsChanged = payload => ({ type: 'flatItemsChanged', payload });
+const groupedItemsChanged = payload => ({ type: 'groupedItemsChanged', payload });
+const typeFilterChanged = payload => ({ type: 'typeFilterChanged', payload });
+const visibleTypeCountersChanged = payload => ({ type: 'visibleTypeCountersChanged', payload });
+const emptyGroupsChanged = payload => ({ type: 'emptyGroupsChanged', payload });
+const treeReducer = (state, action) => {
+    switch (action.type) {
+        case 'assetCounted':
+            return Object.assign(Object.assign({}, state), { assetCounts: action.payload });
+        case 'allCheckedChanged':
+            return Object.assign(Object.assign({}, state), { allChecked: action.payload });
+        case 'searchValueChanged':
+            return Object.assign(Object.assign({}, state), { searchValue: action.payload, allChecked: false });
+        case 'flatItemsChanged':
+            return Object.assign(Object.assign({}, state), { flatItems: action.payload });
+        case 'groupedItemsChanged':
+            return Object.assign(Object.assign({}, state), { groupedItems: action.payload });
+        case 'typeFilterChanged':
+            return Object.assign(Object.assign({}, state), { typeFilter: action.payload });
+        case 'visibleTypeCountersChanged':
+            return Object.assign(Object.assign({}, state), { visibleTypeCounters: action.payload });
+        case 'emptyGroupsChanged':
+            return Object.assign(Object.assign({}, state), { emptyGroups: action.payload });
+        default:
+            throw new Error();
+    }
+};
+const Tree = react_1.default.memo(props => {
+    const { groups, items, selectedGroups, selectedItems, onSelectionChange, hasMultiselect, showRadioButtons, hideSearch, hideTreeHead, summary, hideSummary, search, searchPlaceholder, onSearchChange, className, scrollHeight, expandedGroups, onExpandGroupsChange, showEmptyGroups, treeOptions } = props, remainingProps = tslib_1.__rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions"]);
+    const [state, dispatch] = (0, react_1.useReducer)(treeReducer, {
+        groupedItems: [],
+        flatItems: [],
+        allChecked: false,
+        searchValue: '',
+        assetCounts: {},
+        typeFilter: [],
+        visibleTypeCounters: [],
+        emptyGroups: [],
+    });
+    const treeRef = (0, react_1.useRef)();
+    const previousItems = (0, react_1.useRef)();
+    const previousGroups = (0, react_1.useRef)();
+    const previousSearchValue = (0, react_1.useRef)('');
+    const internalExpandedGroups = (0, react_1.useRef)(expandedGroups);
+    (0, react_1.useEffect)(() => {
+        // Update Tree when items or groups have changed
+        if (notEqual(previousItems.current, items) || notEqual(previousGroups.current, groups)) {
+            previousItems.current = items;
+            previousGroups.current = groups;
+            const typeCounts = getAssetTypeCounts(items);
+            dispatch(assetCounted(typeCounts));
+            const allChecked = checkAllSelected({ items, groups, selectedItems, selectedGroups }, state.flatItems);
+            dispatch(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(visibleTypeCountersChanged(Object.keys(typeCounts)));
+            makeTree(groups, items);
+        }
+    }, [items, groups]);
+    const debouncedMakeTree = 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 (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 programatically
+    // 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(allCheckedChanged(false));
+        }
+        else if (numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
+            dispatch(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)(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
+            return (0, isEmpty_1.default)(unselectedGroups);
+        }
+        else if (hasSearchAndGroups()) {
+            const unselectedSearchItems = (0, filter_1.default)(filterOutByItemId(updatedSelectedItems))(flatItems);
+            return (0, isEmpty_1.default)(unselectedSearchItems);
+        }
+        const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
+        return (0, isEmpty_1.default)(unselectedItems);
+    };
+    const handleToggleNode = nodeId => {
+        const newExpandedNodes = internalExpandedGroups.current.includes(nodeId)
+            ? internalExpandedGroups.current.filter(item => item !== nodeId)
+            : [...internalExpandedGroups.current, nodeId];
+        // Performance improvement to skip on render cycle and change "open" class directly
+        if (internalExpandedGroups.current.includes(nodeId)) {
+            getNodeContainerDomElementById(nodeId).classList.remove('open');
+        }
+        else {
+            getNodeContainerDomElementById(nodeId).classList.add('open');
+        }
+        internalExpandedGroups.current = newExpandedNodes;
+        onExpandGroupsChange(newExpandedNodes);
+    };
+    const getNodeContainerDomElementById = nodeId => {
+        return treeRef.current.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
+    };
+    const selectAllSearchResultItems = shouldSelect => selectAllFlatItems(shouldSelect);
+    const handeSelectAll = (shouldSelect, isIndeterminate) => {
+        const shouldSelectAll = shouldSelect && !isIndeterminate;
+        dispatch(allCheckedChanged(shouldSelectAll));
+        (0, cond_1.default)([
+            [hasNoSearchAndGroups, () => selectAllGroups(shouldSelectAll)],
+            [hasSearchAndGroups, () => selectAllSearchResultItems(shouldSelectAll)],
+            [otherwise, () => selectAllFlatItems(shouldSelectAll)],
+        ])();
+    };
+    const selectAllGroups = shouldSelect => respondSelection([], shouldSelect ? getListIds(groups) : []);
+    const selectAllFlatItems = shouldSelect => respondSelection(shouldSelect ? getListIds(state.flatItems) : [], []);
+    const respondSelection = (updatedSelectedItems, updatedSelectedGroups) => {
+        onSelectionChange({ items: updatedSelectedItems, groups: updatedSelectedGroups });
+    };
+    const handleGroupSelection = (group, isIndeterminate) => {
+        const groupId = group.id;
+        const isSelected = selectedGroups.includes(groupId);
+        const shouldSelectGroup = !isSelected && !isIndeterminate;
+        // handle group selection
+        const newSelectedGroups = shouldSelectGroup
+            ? [...selectedGroups, groupId]
+            : (0, excludeFromList_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(allCheckedChanged(areAllGroupsChecked));
+        respondSelection(updatedSelectedItems, newSelectedGroups);
+    };
+    const handleSearchChange = updatedSearchValue => {
+        onSearchChange(updatedSearchValue);
+        dispatch(searchValueChanged(updatedSearchValue));
+    };
+    const hasGroups = () => groups && notEmpty(groups);
+    const hasSearchAndGroups = () => hasInternalSearchValue() && hasGroups();
+    const hasNoSearchAndGroups = () => !hasInternalSearchValue() && hasGroups();
+    const setFlatItemList = (updtedItems, searchValue) => {
+        const flatItems = getFlatItems(updtedItems, searchValue);
+        dispatch(assetCounted(getAssetTypeCounts(flatItems)));
+        dispatch(flatItemsChanged(flatItems));
+    };
+    const setGroupedItemList = (groupsToProcess, itemsToProcess, considerEmptyGroups) => {
+        // Map items to groups with filtered items
+        const mappedItemsToGroups = getMappedItemsToGroups(groupsToProcess, itemsToProcess);
+        const newGroupedItems = (0, flow_1.default)(sortGroupsByName, sortGroupItemsByName)(mappedItemsToGroups);
+        const groupedItems = considerEmptyGroups ? newGroupedItems : 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(emptyGroupsChanged(emptyGroups));
+        dispatch(assetCounted(getAssetTypeCounts(items)));
+        dispatch(groupedItemsChanged(groupedItems));
+    };
+    const makeTree = (updatedGroups, updatedItems) => {
+        const internalSearchValue = state.searchValue;
+        const internalTypeFilter = state.typeFilter;
+        const groupsToProcess = updatedGroups;
+        const itemsToProcess = updatedItems;
+        const hasGroupList = groupList => groupList && notEmpty(groupList);
+        const hasNoInternalSearchAndGroups = () => (0, isEmpty_1.default)(internalSearchValue) && hasGroupList(groupsToProcess);
+        const hasInternalSearchAndGroups = () => notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
+        const filteredItems = (0, isEmpty_1.default)(internalTypeFilter)
+            ? itemsToProcess
+            : filterAssetByType(internalTypeFilter)(itemsToProcess);
+        const setGroupedItems = () => setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
+        const setFlatItems = () => setFlatItemList(filteredItems, internalSearchValue);
+        (0, cond_1.default)([
+            [hasNoInternalSearchAndGroups, setGroupedItems],
+            [hasInternalSearchAndGroups, setFlatItems],
+            [otherwise, setFlatItems],
+        ])();
+    };
+    const renderTree = () => {
+        const { groupedItems } = state;
+        if ((0, isEmpty_1.default)(groupedItems)) {
+            return (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {});
+        }
+        const result = (0, map_1.default)(group => {
+            const groupId = group.id;
+            const groupItems = group.items;
+            const isOpen = expandedGroups.includes(groupId);
+            const numSelectedGroupItems = (0, filter_1.default)(containsItemById(selectedItems))(groupItems).length;
+            const isGroupSelected = selectedGroups.includes(groupId);
+            const isIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
+            return ((0, jsx_runtime_1.jsxs)(TreeNodeContainer_1.default, Object.assign({ groupId: groupId, isOpen: isOpen }, { children: [(0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isIndeterminate }), (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);
+        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, Object.assign({ isOpen: true }, { children: hasLeafs ? (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {}) : getLeafs() }));
+    };
+    const hasExternalGroups = notEmpty(groups);
+    const hasInternalSearchValue = () => notEmpty(state.searchValue);
+    const hasSelectedAllItems = () => (0, isEqual_1.default)((0, size_1.default)(selectedItems), (0, size_1.default)(state.flatItems));
+    const hasPartialySelectedItems = () => 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 hasPartialySelectedGroups = () => hasExternalGroups && 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 = hasPartialySelectedGroups() || hasPartialySelectedItems();
+    const treeClassNames = (0, classnames_1.default)('Tree', className);
+    const treeHeadClasses = (0, classnames_1.default)('TreeHead', 'display-flex align-items-center', 'padding-15');
+    const shouldRenderTree = () => hasGroups() && !hasInternalSearchValue();
+    const content = (0, cond_1.default)([
+        [shouldRenderTree, () => renderTree()],
+        [otherwise, () => renderFlatList()],
+    ])();
+    const handleFilterByType = type => {
+        const currentTypeFilter = new Set(state.typeFilter);
+        if (currentTypeFilter.has(type)) {
+            currentTypeFilter.delete(type);
+        }
+        else {
+            currentTypeFilter.add(type);
+        }
+        dispatch(typeFilterChanged([...currentTypeFilter]));
+    };
+    const isClickable = (0, size_1.default)((0, keys_1.default)(state.assetCounts)) > 1;
+    const isFilterActive = 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", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'TreeHeader' }, { children: [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", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && ((0, jsx_runtime_1.jsx)(TreeSelectAll_1.default, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handeSelectAll })), showSelectAll && hasMultiselect && showSummary && (0, jsx_runtime_1.jsx)(Divider, {}), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: 'display-flex justify-content-between align-items-center 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: isClickable }, typeCounter)))(state.visibleTypeCounters) }))
+                                        : null, (0, jsx_runtime_1.jsx)(TreeOptions_1.default, { treeOptions: treeOptions })] }))] })))] })), (0, jsx_runtime_1.jsx)(TreeRoot_1.default, Object.assign({ maxHeight: scrollHeight }, { children: content }))] })));
+}, customCompare);
+Tree.displayName = 'Tree';
+Tree.defaultProps = {
+    hasMultiselect: true,
+    showRadioButtons: false,
+    hideSearch: false,
+    hideSummary: false,
+    showEmptyGroups: true,
+    selectedGroups: [],
+    selectedItems: [],
+    onSelectionChange: () => { },
+    onExpandGroupsChange: () => { },
+    onSearchChange: () => { },
+    searchPlaceholder: 'Type here to filter by name',
+    treeOptions: [],
+    groups: [],
+};
+Tree.propTypes = {
+    groups: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        id: prop_types_1.default.string.isRequired,
+        name: prop_types_1.default.string.isRequired,
+        icon: prop_types_1.default.string,
+        className: prop_types_1.default.string,
+    })),
+    items: prop_types_1.default.arrayOf(prop_types_1.default.shape({
+        id: prop_types_1.default.string.isRequired,
+        name: prop_types_1.default.oneOfType([
+            prop_types_1.default.string,
+            prop_types_1.default.shape({
+                firstName: prop_types_1.default.string,
+                lastName: prop_types_1.default.string.isRequired,
+            }),
+        ]).isRequired,
+        info: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
+        type: prop_types_1.default.string.isRequired,
+        groupIds: prop_types_1.default.arrayOf(prop_types_1.default.string),
+        className: prop_types_1.default.string,
+    })),
+    selectedGroups: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    selectedItems: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    onSelectionChange: prop_types_1.default.func,
+    hasMultiselect: prop_types_1.default.bool,
+    showRadioButtons: prop_types_1.default.bool,
+    hideSearch: prop_types_1.default.bool,
+    summary: prop_types_1.default.node,
+    hideSummary: prop_types_1.default.bool,
+    hideTreeHead: prop_types_1.default.bool,
+    // This defines a custom search component.
+    search: prop_types_1.default.node,
+    searchPlaceholder: prop_types_1.default.string,
+    onSearchChange: prop_types_1.default.func,
+    className: prop_types_1.default.string,
+    scrollHeight: prop_types_1.default.number,
+    expandedGroups: prop_types_1.default.arrayOf(prop_types_1.default.string),
+    onExpandGroupsChange: prop_types_1.default.func,
+    showEmptyGroups: prop_types_1.default.bool,
+    treeOptions: prop_types_1.default.arrayOf(prop_types_1.default.node),
+};
+exports.default = Tree;