@rio-cloud/rio-uikit 0.16.4-beta.8 → 1.1.0

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

@@ -1,31 +1,24 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.excludeFromList = void 0;
+exports.getSubTypeCounts = exports.getTypeCounts = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable no-use-before-define */
 const react_1 = tslib_1.__importStar(require("react"));
-const 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 noop_1 = tslib_1.__importDefault(require("lodash/fp/noop"));
 const TreeSearch_1 = tslib_1.__importDefault(require("./TreeSearch"));
 const TreeSelectAll_1 = tslib_1.__importDefault(require("./TreeSelectAll"));
 const TreeSummary_1 = tslib_1.__importDefault(require("./TreeSummary"));
@@ -36,73 +29,11 @@ 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: '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 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 treeUtils_1 = require("./treeUtils");
+const treeReducer_1 = require("./treeReducer");
+var treeUtils_2 = require("./treeUtils");
+Object.defineProperty(exports, "getTypeCounts", { enumerable: true, get: function () { return treeUtils_2.getTypeCounts; } });
+Object.defineProperty(exports, "getSubTypeCounts", { enumerable: true, get: function () { return treeUtils_2.getSubTypeCounts; } });
 const filterProps = (0, omit_1.default)([
     'expandedGroups',
     'onExpandGroupsChange',
@@ -111,39 +42,9 @@ const filterProps = (0, omit_1.default)([
     '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, {
+const Tree = react_1.default.memo((props) => {
+    const { groups = [], items = [], selectedGroups = [], selectedItems = [], onSelectionChange = noop_1.default, hasMultiselect = true, showRadioButtons = false, hideSearch = false, hideTreeHead, summary, hideSummary = false, search, searchPlaceholder = 'Type here to filter by name', onSearchChange = noop_1.default, className, scrollHeight, expandedGroups, onExpandGroupsChange = noop_1.default, showEmptyGroups = true, treeOptions = [], treeOptionsTooltip, disableAnimation = false } = 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", "treeOptionsTooltip", "disableAnimation"]);
+    const [state, dispatch] = (0, react_1.useReducer)(treeReducer_1.treeReducer, {
         groupedItems: [],
         flatItems: [],
         allChecked: false,
@@ -153,30 +54,30 @@ const Tree = react_1.default.memo(props => {
         visibleTypeCounters: [],
         emptyGroups: [],
     });
-    const treeRef = (0, react_1.useRef)();
+    const treeRef = (0, react_1.useRef)(null);
     const previousItems = (0, react_1.useRef)();
     const previousGroups = (0, react_1.useRef)();
     const previousSearchValue = (0, react_1.useRef)('');
     const internalExpandedGroups = (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)) {
+        if ((0, treeUtils_1.notEqual)(previousItems.current, items) || (0, treeUtils_1.notEqual)(previousGroups.current, groups)) {
             previousItems.current = items;
             previousGroups.current = groups;
-            const typeCounts = getAssetTypeCounts(items);
-            dispatch(assetCounted(typeCounts));
+            const typeCounts = (0, treeUtils_1.getTypeCounts)(items);
+            dispatch((0, treeReducer_1.assetCounted)(typeCounts));
             const allChecked = checkAllSelected({ items, groups, selectedItems, selectedGroups }, state.flatItems);
-            dispatch(allCheckedChanged(allChecked));
+            dispatch((0, treeReducer_1.allCheckedChanged)(allChecked));
             // Get the distinct asset types from the asset list that is passed into the component
             // to know which asset type counter to render
-            dispatch(visibleTypeCountersChanged(Object.keys(typeCounts)));
+            dispatch((0, treeReducer_1.visibleTypeCountersChanged)(Object.keys(typeCounts)));
             makeTree(groups, items);
         }
     }, [items, groups]);
-    const debouncedMakeTree = debounceFn((losGroupos, losItems) => makeTree(losGroupos, losItems));
+    const debouncedMakeTree = (0, treeUtils_1.debounceFn)((losGroupos, losItems) => makeTree(losGroupos, losItems));
     (0, react_1.useEffect)(() => {
         // To prevent executing the effect on first render, use a ref to check previous render values
-        if (notEqual(previousSearchValue.current, state.searchValue)) {
+        if ((0, treeUtils_1.notEqual)(previousSearchValue.current, state.searchValue)) {
             debouncedMakeTree(groups, items);
             previousSearchValue.current = state.searchValue;
         }
@@ -184,16 +85,22 @@ const Tree = react_1.default.memo(props => {
     (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
+    // Update expanded groups from outside
+    const [previousExpandedGroups, setPreviousExpandedGroups] = (0, react_1.useState)(expandedGroups);
+    if (!(0, isEqual_1.default)(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
     (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));
+            dispatch((0, treeReducer_1.allCheckedChanged)(false));
         }
-        else if (numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
-            dispatch(allCheckedChanged(true));
+        else if (numOfSelectedGroups !== 0 && numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
+            dispatch((0, treeReducer_1.allCheckedChanged)(true));
         }
     }, [selectedGroups]);
     const checkAllSelected = (updatedProps, flatItems) => {
@@ -204,109 +111,118 @@ const Tree = react_1.default.memo(props => {
             return false;
         }
         if (hasNoSearchAndGroups()) {
-            const unselectedGroups = (0, filter_1.default)(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
+            const unselectedGroups = (0, filter_1.default)((0, treeUtils_1.filterOutByItemId)(updatedSelectedGroups))(updatedGroups);
             return (0, isEmpty_1.default)(unselectedGroups);
         }
-        else if (hasSearchAndGroups()) {
-            const unselectedSearchItems = (0, filter_1.default)(filterOutByItemId(updatedSelectedItems))(flatItems);
+        if (hasSearchAndGroups()) {
+            const unselectedSearchItems = (0, filter_1.default)((0, treeUtils_1.filterOutByItemId)(updatedSelectedItems))(flatItems);
             return (0, isEmpty_1.default)(unselectedSearchItems);
         }
-        const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
+        const unselectedItems = updatedItems.filter((0, treeUtils_1.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];
+    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;
-        dispatch(allCheckedChanged(shouldSelectAll));
+    const selectAllSearchResultItems = (shouldSelect) => selectAllFlatItems(shouldSelect);
+    const handleSelectAll = (shouldSelect, isStateIndeterminate) => {
+        const shouldSelectAll = shouldSelect && !isStateIndeterminate;
+        dispatch((0, treeReducer_1.allCheckedChanged)(shouldSelectAll));
         (0, cond_1.default)([
             [hasNoSearchAndGroups, () => selectAllGroups(shouldSelectAll)],
             [hasSearchAndGroups, () => selectAllSearchResultItems(shouldSelectAll)],
-            [otherwise, () => selectAllFlatItems(shouldSelectAll)],
+            [stubTrue_1.default, () => 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 ? (0, treeUtils_1.getListIds)(groups) : []);
+    const selectAllFlatItems = (shouldSelect) => respondSelection(shouldSelect ? (0, treeUtils_1.getListIds)(state.flatItems) : [], []);
+    const respondSelection = (updatedSelectedItemIds, updatedSelectedGroupIds) => {
+        onSelectionChange({
+            items: updatedSelectedItemIds,
+            groups: updatedSelectedGroupIds,
+        });
     };
-    const handleGroupSelection = (group, 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]
-            : (0, exports.excludeFromList)(selectedGroups, groupId);
+            : (0, treeUtils_1.excludeFromList)(selectedGroups, groupId);
         // deselect all items of a node since they will be selected inherently via the group itself
-        const itemsInGroup = (0, find_1.default)(entry => entry.id === groupId)(state.groupedItems);
-        const itemIdsOfGroup = (0, map_1.default)(item => item.id)(itemsInGroup.items);
+        const itemsInGroup = (0, find_1.default)((entry) => entry.id === groupId)(state.groupedItems);
+        const itemIdsOfGroup = (0, map_1.default)((item) => item.id)(itemsInGroup === null || itemsInGroup === void 0 ? void 0 : 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));
+        dispatch((0, treeReducer_1.allCheckedChanged)(areAllGroupsChecked));
         respondSelection(updatedSelectedItems, newSelectedGroups);
     };
-    const handleSearchChange = updatedSearchValue => {
+    const handleSearchChange = (updatedSearchValue) => {
         onSearchChange(updatedSearchValue);
-        dispatch(searchValueChanged(updatedSearchValue));
+        dispatch((0, treeReducer_1.searchValueChanged)(updatedSearchValue));
     };
-    const hasGroups = () => groups && notEmpty(groups);
+    const hasGroups = () => groups && (0, treeUtils_1.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 setFlatItemList = (updatedItems, searchValue) => {
+        const flatItems = (0, treeUtils_1.getFlatItems)(updatedItems, searchValue);
+        dispatch((0, treeReducer_1.flatItemsChanged)(flatItems));
     };
     const setGroupedItemList = (groupsToProcess, itemsToProcess, considerEmptyGroups) => {
         // Map items to groups with filtered items
-        const mappedItemsToGroups = getMappedItemsToGroups(groupsToProcess, itemsToProcess);
-        const newGroupedItems = (0, flow_1.default)(sortGroupsByName, sortGroupItemsByName)(mappedItemsToGroups);
-        const groupedItems = considerEmptyGroups ? newGroupedItems : filterEmptyGroups(newGroupedItems);
+        const mappedItemsToGroups = (0, treeUtils_1.getMappedItemsToGroups)(groupsToProcess, itemsToProcess);
+        const newGroupedItems = (0, flow_1.default)(treeUtils_1.sortGroupsByName, treeUtils_1.sortGroupItemsByName)(mappedItemsToGroups);
+        const groupedItems = considerEmptyGroups ? newGroupedItems : (0, treeUtils_1.filterEmptyGroups)(newGroupedItems);
         // Keep the empty groups in memory for later access in select all, without re-iterating on every
         // group selection
-        const emptyGroups = (0, filter_1.default)(group => (0, isEmpty_1.default)(group.items))(newGroupedItems);
-        dispatch(emptyGroupsChanged(emptyGroups));
-        dispatch(assetCounted(getAssetTypeCounts(items)));
-        dispatch(groupedItemsChanged(groupedItems));
+        const emptyGroups = (0, filter_1.default)((group) => (0, isEmpty_1.default)(group.items))(newGroupedItems);
+        dispatch((0, treeReducer_1.emptyGroupsChanged)(emptyGroups));
+        dispatch((0, treeReducer_1.assetCounted)((0, treeUtils_1.getTypeCounts)(items)));
+        dispatch((0, treeReducer_1.groupedItemsChanged)(groupedItems));
+        // Update expanded groups again
     };
     const makeTree = (updatedGroups, updatedItems) => {
         const internalSearchValue = state.searchValue;
         const internalTypeFilter = state.typeFilter;
         const groupsToProcess = updatedGroups;
         const itemsToProcess = updatedItems;
-        const hasGroupList = groupList => groupList && notEmpty(groupList);
+        const hasGroupList = (groupList) => groupList && (0, treeUtils_1.notEmpty)(groupList);
         const hasNoInternalSearchAndGroups = () => (0, isEmpty_1.default)(internalSearchValue) && hasGroupList(groupsToProcess);
-        const hasInternalSearchAndGroups = () => notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
+        const hasInternalSearchAndGroups = () => (0, treeUtils_1.notEmpty)(internalSearchValue) && hasGroupList(groupsToProcess);
         const filteredItems = (0, isEmpty_1.default)(internalTypeFilter)
             ? itemsToProcess
-            : filterAssetByType(internalTypeFilter)(itemsToProcess);
+            : (0, treeUtils_1.filterAssetByType)(internalTypeFilter)(itemsToProcess);
         const setGroupedItems = () => setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
         const setFlatItems = () => setFlatItemList(filteredItems, internalSearchValue);
         (0, cond_1.default)([
             [hasNoInternalSearchAndGroups, setGroupedItems],
             [hasInternalSearchAndGroups, setFlatItems],
-            [otherwise, setFlatItems],
+            [stubTrue_1.default, setFlatItems],
         ])();
     };
     const renderTree = () => {
@@ -314,14 +230,15 @@ const Tree = react_1.default.memo(props => {
         if ((0, isEmpty_1.default)(groupedItems)) {
             return (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {});
         }
-        const result = (0, map_1.default)(group => {
+        const result = (0, map_1.default)((group) => {
+            var _a, _b;
             const groupId = group.id;
             const groupItems = group.items;
-            const isOpen = expandedGroups.includes(groupId);
-            const numSelectedGroupItems = (0, filter_1.default)(containsItemById(selectedItems))(groupItems).length;
+            const isOpen = (_b = (_a = internalExpandedGroups.current) === null || _a === void 0 ? void 0 : _a.includes(groupId)) !== null && _b !== void 0 ? _b : false;
+            const numSelectedGroupItems = (0, filter_1.default)((0, treeUtils_1.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));
+            const isStateIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
+            return ((0, jsx_runtime_1.jsxs)(TreeNodeContainer_1.default, Object.assign({ groupId: groupId, isOpen: isOpen, disableAnimation: disableAnimation }, { children: [(0, jsx_runtime_1.jsx)(TreeNode_1.default, { node: group, hasMultiselect: hasMultiselect, onToggleNode: handleToggleNode, onSelect: handleGroupSelection, isSelected: isGroupSelected, isIndeterminate: isStateIndeterminate }), (0, jsx_runtime_1.jsx)(TreeLeafList_1.default, { leafList: groupItems, hasMultiselect: hasMultiselect, showRadioButtons: showRadioButtons, selectedItems: selectedItems, selectedGroups: selectedGroups, onSelectionChange: respondSelection })] }), groupId));
         })(groupedItems);
         return result;
     };
@@ -329,104 +246,40 @@ const Tree = react_1.default.memo(props => {
         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() }));
+        return ((0, jsx_runtime_1.jsx)(TreeNodeContainer_1.default, Object.assign({ disableAnimation: disableAnimation, isOpen: true }, { children: hasLeafs ? (0, jsx_runtime_1.jsx)(TreeNothingFound_1.default, {}) : getLeafs() })));
     };
-    const hasExternalGroups = notEmpty(groups);
-    const hasInternalSearchValue = () => notEmpty(state.searchValue);
+    const hasExternalGroups = (0, treeUtils_1.notEmpty)(groups);
+    const hasInternalSearchValue = () => (0, treeUtils_1.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 hasPartiallySelectedItems = () => (0, treeUtils_1.notEmpty)(selectedItems) && !hasSelectedAllItems();
     const hasSelectedAllGroups = () => {
         const emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
         return (0, isEqual_1.default)((0, size_1.default)(selectedGroups), (0, size_1.default)(groups) - emptyGroupAmount);
     };
-    const hasPartialySelectedGroups = () => hasExternalGroups && notEmpty(selectedGroups) && !hasSelectedAllGroups();
+    const hasPartiallySelectedGroups = () => hasExternalGroups && (0, treeUtils_1.notEmpty)(selectedGroups) && !hasSelectedAllGroups();
     const hasSearchAndNoItems = hasInternalSearchValue() && (0, isEmpty_1.default)(state.flatItems);
     const hasSearchAndNoGroups = hasInternalSearchValue() && (0, isEmpty_1.default)(state.groupedItems) && hasExternalGroups;
     const hideSelectAll = hasSearchAndNoItems || hasSearchAndNoGroups;
-    const isIndeterminate = hasPartialySelectedGroups() || hasPartialySelectedItems();
+    const isIndeterminate = hasPartiallySelectedGroups() || hasPartiallySelectedItems();
     const treeClassNames = (0, classnames_1.default)('Tree', className);
-    const treeHeadClasses = (0, classnames_1.default)('TreeHead', 'display-flex align-items-center', 'padding-15');
+    const treeHeadClasses = (0, classnames_1.default)('TreeHead', 'display-flex gap-5', 'padding-15');
     const shouldRenderTree = () => hasGroups() && !hasInternalSearchValue();
     const content = (0, cond_1.default)([
         [shouldRenderTree, () => renderTree()],
-        [otherwise, () => renderFlatList()],
+        [stubTrue_1.default, () => 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 handleFilterByType = (type) => {
+        dispatch((0, treeReducer_1.typeFilterChanged)((0, treeUtils_1.addOrRemoveFromList)(state.typeFilter, type)));
     };
-    const isClickable = (0, size_1.default)((0, keys_1.default)(state.assetCounts)) > 1;
-    const isFilterActive = notEmpty(state.typeFilter);
+    const enableActivity = (0, size_1.default)(state.visibleTypeCounters) !== 1;
+    const isFilterActive = (0, treeUtils_1.notEmpty)(state.typeFilter);
     const showTreeHead = !hideTreeHead;
     const showSelectAll = !hideSelectAll;
     const showSearch = !hideSearch;
     const showSummary = !hideSummary;
     const hasCustomSearch = !(0, isNil_1.default)(search);
-    return ((0, jsx_runtime_1.jsxs)("div", 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 }))] })));
+    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)("div", Object.assign({ className: 'border border-right-only hidden-empty padding-right-10 margin-right-2' }, { children: (0, jsx_runtime_1.jsx)(TreeSelectAll_1.default, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handleSelectAll }) }))), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: 'display-flex justify-content-between align-items-start width-100pct' }, { children: showSummary
+                                    ? summary || ((0, jsx_runtime_1.jsx)(TreeSummary_1.default, { children: (0, map_1.default)((typeCounter) => ((0, jsx_runtime_1.jsx)(TypeCounter_1.default, { type: typeCounter, icon: `${typeCounter}`, value: state.assetCounts[typeCounter], onClick: handleFilterByType, isActive: state.typeFilter.includes(typeCounter), hasFilter: isFilterActive, enableActivity: enableActivity }, typeCounter)))(state.visibleTypeCounters) }))
+                                    : null })), (0, jsx_runtime_1.jsx)(TreeOptions_1.default, { treeOptions: treeOptions, treeOptionsTooltip: treeOptionsTooltip })] })))] })), (0, jsx_runtime_1.jsx)(TreeRoot_1.default, 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: 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;

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

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

@@ -1,13 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-const tslib_1 = require("tslib");
-const prop_types_1 = tslib_1.__importDefault(require("prop-types"));
-const TreeCategory = props => props.children || null;
-TreeCategory.displayName = 'TreeCategory';
-TreeCategory.propTypes = {
-    id: prop_types_1.default.string.isRequired,
-    icon: prop_types_1.default.string.isRequired,
-    label: prop_types_1.default.oneOfType([prop_types_1.default.string, prop_types_1.default.node]),
-    hasSelection: prop_types_1.default.bool,
-};
+const TreeCategory = (props) => props.children || null;
 exports.default = TreeCategory;

package/lib/es/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/lib/es/components/assetTree/TreeLeaf.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+// @ts-ignore-next-line importsNotUsedAsValues
 const react_1 = tslib_1.__importDefault(require("react"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const isObject_1 = tslib_1.__importDefault(require("lodash/fp/isObject"));
@@ -10,7 +11,6 @@ const RadioButton_1 = tslib_1.__importDefault(require("../radiobutton/RadioButto
 const TreeLeaf = react_1.default.memo((props) => {
     const { item, hasMultiselect, showRadioButtons, isSelected, onSelectItem, onActiveItem } = props;
     const treeNodeClassNames = (0, classnames_1.default)('TreeLeaf', 'form-group margin-bottom-0', isSelected && 'active', item.className && item.className);
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelName' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type} margin-top--1` }), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, { children: item.name })) })), item.info && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: treeNodeClassNames, "data-key": item.id }, { children: [hasMultiselect && (0, jsx_runtime_1.jsx)(Checkbox_1.default, { className: 'TreeCheckbox', checked: isSelected, onClick: onSelectItem }), !hasMultiselect && showRadioButtons && ((0, jsx_runtime_1.jsx)(RadioButton_1.default, { className: 'TreeRadioButton', checked: isSelected, onChange: onSelectItem })), (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabel', onClick: onActiveItem }, { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelName' }, { children: [!item.subType && (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), item.subType && ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'rioglyph-icon-pair' }, { children: [(0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.type}` }), (0, jsx_runtime_1.jsx)("span", { className: `rioglyph rioglyph-${item.subType}` })] }))), (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: 'TreeLabelNameText' }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextHeadline' }, { children: (0, isObject_1.default)(item.name) ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'text-light margin-right-3' }, { children: item.name.firstName })), (0, jsx_runtime_1.jsx)("span", { children: item.name.lastName })] })) : (item.name) })), item.info && (0, jsx_runtime_1.jsx)("span", Object.assign({ className: 'TreeLabelNameTextSubline' }, { children: item.info }))] }))] })) }))] })));
 });
-TreeLeaf.displayName = 'TreeLeaf';
 exports.default = TreeLeaf;