@rio-cloud/rio-uikit 0.16.4-beta.21 → 0.16.4-beta.22

package/components/assetTree/Tree.js

@@ -1,28 +1,21 @@
 import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-use-before-define */
-import React, { useEffect, useReducer, useRef } from 'react';
-import PropTypes from 'prop-types';
+import React, { useEffect, useReducer, useRef, useState } from 'react';
 import classNames from 'classnames';
 import isNil from 'lodash/fp/isNil';
 import isEmpty from 'lodash/fp/isEmpty';
 import isEqual from 'lodash/fp/isEqual';
 import map from 'lodash/fp/map';
 import find from 'lodash/fp/find';
-import orderBy from 'lodash/fp/orderBy';
-import isObject from 'lodash/fp/isObject';
-import debounce from 'lodash/fp/debounce';
 import cond from 'lodash/fp/cond';
 import without from 'lodash/fp/without';
-import countBy from 'lodash/fp/countBy';
-import getOr from 'lodash/fp/getOr';
 import flow from 'lodash/fp/flow';
 import filter from 'lodash/fp/filter';
 import size from 'lodash/fp/size';
-import stubTrue from 'lodash/fp/stubTrue';
+import otherwise from 'lodash/fp/stubTrue';
 import omit from 'lodash/fp/omit';
-import negate from 'lodash/fp/negate';
-import keys from 'lodash/fp/keys';
+import noop from 'lodash/fp/noop';
 import TreeSearch from './TreeSearch';
 import TreeSelectAll from './TreeSelectAll';
 import TreeSummary from './TreeSummary';
@@ -33,71 +26,9 @@ import TreeNothingFound from './TreeNothingFound';
 import TreeOptions from './TreeOptions';
 import TreeRoot from './TreeRoot';
 import TypeCounter from './TypeCounter';
-import { searchNormalized } from '../../utils/searchNormalized';
-import { excludeFromList } from './excludeFromList';
-const SEARCH_DEBOUNCE = 100;
-const otherwise = stubTrue;
-const notEqual = negate(isEqual);
-const notEmpty = negate(isEmpty);
-const isNameObject = item => isObject(item.name);
-const getFullName = item => `${item.name.firstName} ${item.name.lastName}`;
-const getName = item => (isNameObject(item) ? getFullName(item) : item.name);
-const getLowerCaseName = item => getOr('', 'name')(item).toLowerCase();
-const getLowerCaseLastName = item => getOr('', 'name.lastName')(item).toLowerCase();
-const orderByName = orderBy([item => (isNameObject(item) ? getLowerCaseLastName(item) : getLowerCaseName(item))], ['asc']);
-const filterEmptyGroups = filter(group => notEmpty(group.items));
-const filterAssetByType = (types = []) => filter(asset => types.includes(asset.type));
-const sortGroupsByName = groups => {
-    const fixedGroups = {};
-    const sortableGroups = {};
-    map(group => {
-        if (group.position === 'last') {
-            fixedGroups[group.id] = Object.assign({}, group);
-        }
-        else {
-            sortableGroups[group.id] = Object.assign({}, group);
-        }
-    })(groups);
-    const sortedGroups = orderByName(sortableGroups);
-    return isEmpty(fixedGroups) ? sortedGroups : Object.assign(Object.assign({}, sortedGroups), fixedGroups);
-};
-const sortGroupItemsByName = groups => {
-    const sortedGroups = {};
-    map(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 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) => flow(filter(filterByName(searchValue)), orderByName)(items);
-const getListIds = list => list.map(listItem => listItem.id);
-const getAssetTypeCounts = items => countBy(item => item.type, items);
-const debounceFn = fn => debounce(SEARCH_DEBOUNCE, fn);
+import { containsItemById, debounceFn, filterAssetByType, filterEmptyGroups, filterOutByItemId, getTypeCounts, getFlatItems, getListIds, notEmpty, notEqual, excludeFromList, getMappedItemsToGroups, sortGroupItemsByName, sortGroupsByName, addOrRemoveFromList, } from './treeUtils';
+import { treeReducer, assetCounted, allCheckedChanged, visibleTypeCountersChanged, searchValueChanged, flatItemsChanged, emptyGroupsChanged, groupedItemsChanged, typeFilterChanged, } from './treeReducer';
+export { getTypeCounts, getSubTypeCounts } from './treeUtils';
 const filterProps = omit([
     'expandedGroups',
     'onExpandGroupsChange',
@@ -106,38 +37,8 @@ const filterProps = omit([
     'treeOptions',
 ]);
 const customCompare = (prevProps, nextProps) => isEqual(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.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 = __rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions"]);
+const Tree = React.memo((props) => {
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop, showEmptyGroups = true, treeOptions = [], disableAnimation = false } = props, remainingProps = __rest(props, ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions", "disableAnimation"]);
     const [state, dispatch] = useReducer(treeReducer, {
         groupedItems: [],
         flatItems: [],
@@ -148,7 +49,7 @@ const Tree = React.memo(props => {
         visibleTypeCounters: [],
         emptyGroups: [],
     });
-    const treeRef = useRef();
+    const treeRef = useRef(null);
     const previousItems = useRef();
     const previousGroups = useRef();
     const previousSearchValue = useRef('');
@@ -158,7 +59,7 @@ const Tree = React.memo(props => {
         if (notEqual(previousItems.current, items) || notEqual(previousGroups.current, groups)) {
             previousItems.current = items;
             previousGroups.current = groups;
-            const typeCounts = getAssetTypeCounts(items);
+            const typeCounts = getTypeCounts(items);
             dispatch(assetCounted(typeCounts));
             const allChecked = checkAllSelected({ items, groups, selectedItems, selectedGroups }, state.flatItems);
             dispatch(allCheckedChanged(allChecked));
@@ -179,7 +80,13 @@ const Tree = React.memo(props => {
     useEffect(() => makeTree(groups, items), [state.typeFilter]);
     // Update tree when empty groups are toggled from outside
     useEffect(() => makeTree(groups, items), [showEmptyGroups]);
-    // Update "select all" state from outside when groups are selected outside programatically
+    // Update expanded groups from outside
+    const [previousExpandedGroups, setPreviousExpandedGroups] = useState(expandedGroups);
+    if (!isEqual(expandedGroups, previousExpandedGroups)) {
+        internalExpandedGroups.current = expandedGroups;
+        setPreviousExpandedGroups(expandedGroups);
+    }
+    // Update "select all" state from outside when groups are selected outside programmatically
     // without using the "select all" checkbox
     useEffect(() => {
         const numOfAllGroups = size(groups);
@@ -187,7 +94,7 @@ const Tree = React.memo(props => {
         if (numOfSelectedGroups !== numOfAllGroups && state.allChecked) {
             dispatch(allCheckedChanged(false));
         }
-        else if (numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
+        else if (numOfSelectedGroups !== 0 && numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
             dispatch(allCheckedChanged(true));
         }
     }, [selectedGroups]);
@@ -209,26 +116,32 @@ const Tree = React.memo(props => {
         const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
         return isEmpty(unselectedItems);
     };
-    const handleToggleNode = nodeId => {
-        const newExpandedNodes = internalExpandedGroups.current.includes(nodeId)
-            ? internalExpandedGroups.current.filter(item => item !== nodeId)
-            : [...internalExpandedGroups.current, nodeId];
+    const handleToggleNode = (nodeId) => {
+        const nodeContainer = getNodeContainerDomElementById(nodeId);
+        if (!(internalExpandedGroups === null || internalExpandedGroups === void 0 ? void 0 : internalExpandedGroups.current) || !nodeContainer) {
+            return;
+        }
+        const openGroups = internalExpandedGroups.current;
+        const newExpandedNodes = openGroups.includes(nodeId)
+            ? openGroups.filter(item => item !== nodeId)
+            : [...openGroups, nodeId];
         // Performance improvement to skip on render cycle and change "open" class directly
-        if (internalExpandedGroups.current.includes(nodeId)) {
-            getNodeContainerDomElementById(nodeId).classList.remove('open');
+        if (openGroups.includes(nodeId)) {
+            nodeContainer.classList.remove('open');
         }
         else {
-            getNodeContainerDomElementById(nodeId).classList.add('open');
+            nodeContainer.classList.add('open');
         }
         internalExpandedGroups.current = newExpandedNodes;
         onExpandGroupsChange(newExpandedNodes);
     };
-    const getNodeContainerDomElementById = nodeId => {
-        return treeRef.current.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
+    const getNodeContainerDomElementById = (nodeId) => {
+        var _a;
+        return (_a = treeRef === null || treeRef === void 0 ? void 0 : treeRef.current) === null || _a === void 0 ? void 0 : _a.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
     };
-    const selectAllSearchResultItems = shouldSelect => selectAllFlatItems(shouldSelect);
-    const handeSelectAll = (shouldSelect, isIndeterminate) => {
-        const shouldSelectAll = shouldSelect && !isIndeterminate;
+    const selectAllSearchResultItems = (shouldSelect) => selectAllFlatItems(shouldSelect);
+    const handleSelectAll = (shouldSelect, isStateIndeterminate) => {
+        const shouldSelectAll = shouldSelect && !isStateIndeterminate;
         dispatch(allCheckedChanged(shouldSelectAll));
         cond([
             [hasNoSearchAndGroups, () => selectAllGroups(shouldSelectAll)],
@@ -236,22 +149,25 @@ const Tree = React.memo(props => {
             [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 selectAllGroups = (shouldSelect) => respondSelection([], shouldSelect ? getListIds(groups) : []);
+    const selectAllFlatItems = (shouldSelect) => respondSelection(shouldSelect ? getListIds(state.flatItems) : [], []);
+    const respondSelection = (updatedSelectedItemIds, updatedSelectedGroupIds) => {
+        onSelectionChange({
+            items: updatedSelectedItemIds,
+            groups: updatedSelectedGroupIds,
+        });
     };
-    const handleGroupSelection = (group, isIndeterminate) => {
+    const handleGroupSelection = (group, isStateIndeterminate) => {
         const groupId = group.id;
         const isSelected = selectedGroups.includes(groupId);
-        const shouldSelectGroup = !isSelected && !isIndeterminate;
+        const shouldSelectGroup = !isSelected && !isStateIndeterminate;
         // handle group selection
         const newSelectedGroups = shouldSelectGroup
             ? [...selectedGroups, groupId]
             : excludeFromList(selectedGroups, groupId);
         // deselect all items of a node since they will be selected inherently via the group itself
-        const itemsInGroup = find(entry => entry.id === groupId)(state.groupedItems);
-        const itemIdsOfGroup = map(item => item.id)(itemsInGroup.items);
+        const itemsInGroup = find((entry) => entry.id === groupId)(state.groupedItems);
+        const itemIdsOfGroup = map((item) => item.id)(itemsInGroup === null || itemsInGroup === void 0 ? void 0 : itemsInGroup.items);
         const updatedSelectedItems = without(itemIdsOfGroup, selectedItems);
         // check if all groups are selected to change the state of TreeSelectAll
         const groupAmount = groups.length;
@@ -261,16 +177,15 @@ const Tree = React.memo(props => {
         dispatch(allCheckedChanged(areAllGroupsChecked));
         respondSelection(updatedSelectedItems, newSelectedGroups);
     };
-    const handleSearchChange = updatedSearchValue => {
+    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)));
+    const setFlatItemList = (updatedItems, searchValue) => {
+        const flatItems = getFlatItems(updatedItems, searchValue);
         dispatch(flatItemsChanged(flatItems));
     };
     const setGroupedItemList = (groupsToProcess, itemsToProcess, considerEmptyGroups) => {
@@ -280,17 +195,18 @@ const Tree = React.memo(props => {
         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 = filter(group => isEmpty(group.items))(newGroupedItems);
+        const emptyGroups = filter((group) => isEmpty(group.items))(newGroupedItems);
         dispatch(emptyGroupsChanged(emptyGroups));
-        dispatch(assetCounted(getAssetTypeCounts(items)));
+        dispatch(assetCounted(getTypeCounts(items)));
         dispatch(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 && notEmpty(groupList);
+        const hasGroupList = (groupList) => groupList && notEmpty(groupList);
         const hasNoInternalSearchAndGroups = () => isEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
         const hasInternalSearchAndGroups = () => notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
         const filteredItems = isEmpty(internalTypeFilter)
@@ -309,14 +225,15 @@ const Tree = React.memo(props => {
         if (isEmpty(groupedItems)) {
             return _jsx(TreeNothingFound, {});
         }
-        const result = map(group => {
+        const result = map((group) => {
+            var _a, _b;
             const groupId = group.id;
             const groupItems = group.items;
-            const isOpen = expandedGroups.includes(groupId);
+            const isOpen = (_b = (_a = internalExpandedGroups.current) === null || _a === void 0 ? void 0 : _a.includes(groupId)) !== null && _b !== void 0 ? _b : false;
             const numSelectedGroupItems = filter(containsItemById(selectedItems))(groupItems).length;
             const isGroupSelected = selectedGroups.includes(groupId);
-            const isIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-            return (_jsxs(TreeNodeContainer, Object.assign({ groupId: groupId, isOpen: isOpen }, { children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isIndeterminate }), _jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection })] }), groupId));
+            const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
+            return (_jsxs(TreeNodeContainer, Object.assign({ groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation }, { children: [_jsx(TreeNode, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), _jsx(TreeLeafList, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection })] }), groupId));
         })(groupedItems);
         return result;
     };
@@ -324,144 +241,41 @@ const Tree = React.memo(props => {
         const { flatItems } = state;
         const hasLeafs = isEmpty(flatItems);
         const getLeafs = () => (_jsx(TreeLeafList, { leafList: flatItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection }));
-        return _jsx(TreeNodeContainer, Object.assign({ isOpen: true }, { children: hasLeafs ? _jsx(TreeNothingFound, {}) : getLeafs() }));
+        return (_jsx(TreeNodeContainer, Object.assign({ disableAnimation: disableAnimation, isOpen: true }, { children: hasLeafs ? _jsx(TreeNothingFound, {}) : getLeafs() })));
     };
     const hasExternalGroups = notEmpty(groups);
     const hasInternalSearchValue = () => notEmpty(state.searchValue);
     const hasSelectedAllItems = () => isEqual(size(selectedItems), size(state.flatItems));
-    const hasPartialySelectedItems = () => notEmpty(selectedItems) && !hasSelectedAllItems();
+    const hasPartiallySelectedItems = () => notEmpty(selectedItems) && !hasSelectedAllItems();
     const hasSelectedAllGroups = () => {
         const emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
         return isEqual(size(selectedGroups), size(groups) - emptyGroupAmount);
     };
-    const hasPartialySelectedGroups = () => hasExternalGroups && notEmpty(selectedGroups) && !hasSelectedAllGroups();
+    const hasPartiallySelectedGroups = () => hasExternalGroups && notEmpty(selectedGroups) && !hasSelectedAllGroups();
     const hasSearchAndNoItems = hasInternalSearchValue() && isEmpty(state.flatItems);
     const hasSearchAndNoGroups = hasInternalSearchValue() && isEmpty(state.groupedItems) && hasExternalGroups;
     const hideSelectAll = hasSearchAndNoItems || hasSearchAndNoGroups;
-    const isIndeterminate = hasPartialySelectedGroups() || hasPartialySelectedItems();
-    const treeClassNames = classNames('Tree', className);
+    const isIndeterminate = hasPartiallySelectedGroups() || hasPartiallySelectedItems();
+    const treeClassNames = classNames('Tree', 'overflow-x-hidden', className);
     const treeHeadClasses = classNames('TreeHead', 'display-flex gap-5', 'padding-15');
     const shouldRenderTree = () => hasGroups() && !hasInternalSearchValue();
     const content = cond([
         [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 putItemsFirst = ({ findFunction, array }) => [
-        ...array.filter(findFunction),
-        ...array.filter(item => !findFunction(item)),
-    ];
-    const sortVisibleTypeCounters = array => {
-        let sortedVisibleTypeCounters = array;
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'fuel-netgas',
-        });
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'fuel-hydrogen',
-        });
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'fuel-electric',
-        });
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'fuel-petrol',
-        });
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'trailer',
-        });
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'van',
-        });
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'bus',
-        });
-        sortedVisibleTypeCounters = putItemsFirst({
-            array: sortedVisibleTypeCounters,
-            findFunction: item => item === 'truck',
-        });
-        return sortedVisibleTypeCounters;
+    const handleFilterByType = (type) => {
+        dispatch(typeFilterChanged(addOrRemoveFromList(state.typeFilter, type)));
     };
-    const isClickable = size(keys(state.assetCounts)) > 1;
+    const enableActivity = size(state.visibleTypeCounters) !== 1;
     const isFilterActive = notEmpty(state.typeFilter);
     const showTreeHead = !hideTreeHead;
     const showSelectAll = !hideSelectAll;
     const showSearch = !hideSearch;
     const showSummary = !hideSummary;
     const hasCustomSearch = !isNil(search);
-    return (_jsxs("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [_jsxs("div", Object.assign({ className: 'TreeHeader' }, { children: [showSearch && !hasCustomSearch && (_jsx(TreeSearch, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && (_jsxs("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && (_jsx("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: _jsx(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handeSelectAll }) }))), _jsx("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
-                                    ? summary || (_jsx(TreeSummary, { children: map(typeCounter => (_jsx(TypeCounter, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: isClickable }, typeCounter)))(sortVisibleTypeCounters(state.visibleTypeCounters)) }))
-                                    : null })), _jsx(TreeOptions, { treeOptions: treeOptions })] })))] })), _jsx(TreeRoot, Object.assign({ maxHeight: scrollHeight }, { children: content }))] })));
+    return (_jsxs("div", Object.assign({}, remainingProps, { className: treeClassNames, ref: treeRef }, { children: [_jsxs("div", Object.assign({ className: 'TreeHeader' }, { children: [showSearch && !hasCustomSearch && (_jsx(TreeSearch, { value: state.searchValue, onChange: handleSearchChange, placeholder: searchPlaceholder })), hasCustomSearch && search, showTreeHead && (_jsxs("div", Object.assign({ className: treeHeadClasses }, { children: [showSelectAll && (_jsx("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: _jsx(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), _jsx("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
+                                    ? summary || (_jsx(TreeSummary, { children: map((typeCounter) => (_jsx(TypeCounter, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
+                                    : null })), _jsx(TreeOptions, { treeOptions: treeOptions })] })))] })), _jsx(TreeRoot, Object.assign({ maxHeight: scrollHeight, disableAnimation: disableAnimation }, { 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: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        name: PropTypes.string.isRequired,
-        icon: PropTypes.string,
-        className: PropTypes.string,
-    })),
-    items: PropTypes.arrayOf(PropTypes.shape({
-        id: PropTypes.string.isRequired,
-        name: PropTypes.oneOfType([
-            PropTypes.string,
-            PropTypes.shape({
-                firstName: PropTypes.string,
-                lastName: PropTypes.string.isRequired,
-            }),
-        ]).isRequired,
-        info: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-        type: PropTypes.string.isRequired,
-        groupIds: PropTypes.arrayOf(PropTypes.string),
-        className: PropTypes.string,
-    })),
-    selectedGroups: PropTypes.arrayOf(PropTypes.string),
-    selectedItems: PropTypes.arrayOf(PropTypes.string),
-    onSelectionChange: PropTypes.func,
-    hasMultiselect: PropTypes.bool,
-    showRadioButtons: PropTypes.bool,
-    hideSearch: PropTypes.bool,
-    summary: PropTypes.node,
-    hideSummary: PropTypes.bool,
-    hideTreeHead: PropTypes.bool,
-    // This defines a custom search component.
-    search: PropTypes.node,
-    searchPlaceholder: PropTypes.string,
-    onSearchChange: PropTypes.func,
-    className: PropTypes.string,
-    scrollHeight: PropTypes.number,
-    expandedGroups: PropTypes.arrayOf(PropTypes.string),
-    onExpandGroupsChange: PropTypes.func,
-    showEmptyGroups: PropTypes.bool,
-    treeOptions: PropTypes.arrayOf(PropTypes.node),
-};
 export default Tree;

package/components/assetTree/TreeCategory.d.ts

@@ -1,12 +1,25 @@
+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;
+    displayName: string;
+};
 export default TreeCategory;
-declare function TreeCategory(props: any): any;
-declare namespace TreeCategory {
-    const displayName: string;
-    namespace propTypes {
-        const id: PropTypes.Validator<string>;
-        const icon: PropTypes.Validator<string>;
-        const label: PropTypes.Requireable<NonNullable<PropTypes.ReactNodeLike>>;
-        const hasSelection: PropTypes.Requireable<boolean>;
-    }
-}
-import PropTypes from "prop-types";

package/components/assetTree/TreeCategory.js

@@ -1,10 +1,3 @@
-import PropTypes from 'prop-types';
-const TreeCategory = props => props.children || null;
+const TreeCategory = (props) => props.children || null;
 TreeCategory.displayName = 'TreeCategory';
-TreeCategory.propTypes = {
-    id: PropTypes.string.isRequired,
-    icon: PropTypes.string.isRequired,
-    label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-    hasSelection: PropTypes.bool,
-};
 export default TreeCategory;

package/components/assetTree/TreeLeaf.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { TreeItem } from '../../types';
+import type { TreeItem } from './Tree';
 export type TreeLeafProps = {
     item: TreeItem;
     hasMultiselect: boolean;

package/components/assetTree/TreeLeaf.js

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
 import React from 'react';
 import classNames from 'classnames';
 import isObject from 'lodash/fp/isObject';
@@ -7,7 +8,7 @@ import RadioButton from '../radiobutton/RadioButton';
 const TreeLeaf = React.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = classNames('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsx("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: _jsxs("span", Object.assign({ className: 'TreeLabelName' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(React.Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (_jsx(React.Fragment, { children: item.name })) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
+    return (_jsxs("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && _jsx(Checkbox, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && (_jsx(RadioButton, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), _jsx("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: _jsxs("span", Object.assign({ className: 'TreeLabelName' }, { children: [!item.subType && _jsx("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && (_jsxs("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [_jsx("span", { className: `rioglyph rioglyph-${item.type}` }), _jsx("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), _jsxs("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [_jsx("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: isObject(item.name) ? (_jsxs(_Fragment, { children: [_jsx("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), _jsx("span", { children: item.name.lastName })] })) : (item.name) })), item.info && _jsx("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
 });
 TreeLeaf.displayName = 'TreeLeaf';
 export default TreeLeaf;

package/components/assetTree/TreeLeafList.d.ts

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

package/components/assetTree/TreeLeafList.js

@@ -1,7 +1,8 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+// @ts-ignore-next-line importsNotUsedAsValues
 import 'react';
 import TreeLeaf from './TreeLeaf';
-import { excludeFromList } from './excludeFromList';
+import { excludeFromList } from './treeUtils';
 const TreeLeafList = (props) => {
     const { leafList, hasMultiselect, showRadioButtons, selectedItems, selectedGroups, onSelectionChange } = props;
     const handleItemSelection = (itemId) => {
@@ -12,7 +13,7 @@ const TreeLeafList = (props) => {
         onSelectionChange(newSelectedItems, selectedGroups);
     };
     const handleSetItemActive = (itemId) => onSelectionChange([itemId], []);
-    return leafList.map(item => (_jsx(TreeLeaf, { item: item, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, isSelected: selectedItems.includes(item.id), onSelectItem: () => handleItemSelection(item.id), onActiveItem: () => handleSetItemActive(item.id) }, item.id)));
+    return (_jsx(_Fragment, { children: leafList.map(item => (_jsx(TreeLeaf, { item: item, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, isSelected: selectedItems.includes(item.id), onSelectItem: () => handleItemSelection(item.id), onActiveItem: () => handleSetItemActive(item.id) }, item.id))) }));
 };
 TreeLeafList.displayName = 'TreeLeafList';
 export default TreeLeafList;

package/components/assetTree/TreeNode.d.ts

@@ -1,3 +1,13 @@
+import React from 'react';
+import type { GroupedItem } from './Tree';
+export type TreeNodeProps = {
+    node: GroupedItem;
+    hasMultiselect?: boolean;
+    isSelected?: 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;
-declare const TreeNode: React.NamedExoticComponent<object>;
-import React from "react";