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

package/components/assetTree/Tree.js

@@ -1,11 +1,5 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["groups", "items", "selectedGroups", "selectedItems", "onSelectionChange", "hasMultiselect", "showRadioButtons", "hideSearch", "hideTreeHead", "summary", "hideSummary", "search", "searchPlaceholder", "onSearchChange", "className", "scrollHeight", "expandedGroups", "onExpandGroupsChange", "showEmptyGroups", "treeOptions"];
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import { __rest } from "tslib";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /* eslint-disable no-use-before-define */
 import React, { useReducer, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -40,633 +34,396 @@ import TreeOptions from './TreeOptions';
 import TreeRoot from './TreeRoot';
 import TypeCounter from './TypeCounter';
 import { searchNormalized } from '../../utils/searchNormalized';
-var SEARCH_DEBOUNCE = 100;
-var otherwise = stubTrue;
-var notEqual = negate(isEqual);
-var notEmpty = negate(isEmpty);
-var Divider = function Divider() {
-  return /*#__PURE__*/React.createElement("div", {
-    className: 'TreeSelectAllDivider bg-light width-2 height-15 ' + 'margin-top-2 margin-bottom-0 margin-left-10 margin-right-10'
-  });
+const SEARCH_DEBOUNCE = 100;
+const otherwise = stubTrue;
+const notEqual = negate(isEqual);
+const notEmpty = negate(isEmpty);
+const Divider = () => (_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 => 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);
 };
-var isNameObject = function isNameObject(item) {
-  return isObject(item.name);
+const sortGroupItemsByName = groups => {
+    const sortedGroups = {};
+    map(group => {
+        sortedGroups[group.id] = Object.assign(Object.assign({}, group), { items: orderByName(group.items) });
+    })(groups);
+    return sortedGroups;
 };
-var getFullName = function getFullName(item) {
-  return "".concat(item.name.firstName, " ").concat(item.name.lastName);
-};
-var getName = function getName(item) {
-  return isNameObject(item) ? getFullName(item) : item.name;
-};
-var getLowerCaseName = function getLowerCaseName(item) {
-  return getOr('', 'name')(item).toLowerCase();
-};
-var getLowerCaseLastName = function getLowerCaseLastName(item) {
-  return getOr('', 'name.lastName')(item).toLowerCase();
-};
-var orderByName = orderBy([function (item) {
-  return isNameObject(item) ? getLowerCaseLastName(item) : getLowerCaseName(item);
-}], ['asc']);
-var filterEmptyGroups = filter(function (group) {
-  return notEmpty(group.items);
-});
-var filterAssetByType = function filterAssetByType() {
-  var types = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
-  return filter(function (asset) {
-    return types.includes(asset.type);
-  });
-};
-var sortGroupsByName = function sortGroupsByName(groups) {
-  var fixedGroups = {};
-  var sortableGroups = {};
-  map(function (group) {
-    if (group.position === 'last') {
-      fixedGroups[group.id] = _objectSpread({}, group);
-    } else {
-      sortableGroups[group.id] = _objectSpread({}, group);
-    }
-  })(groups);
-  var sortedGroups = orderByName(sortableGroups);
-  return isEmpty(fixedGroups) ? sortedGroups : _objectSpread(_objectSpread({}, sortedGroups), fixedGroups);
-};
-var sortGroupItemsByName = function sortGroupItemsByName(groups) {
-  var sortedGroups = {};
-  map(function (group) {
-    sortedGroups[group.id] = _objectSpread(_objectSpread({}, group), {}, {
-      items: orderByName(group.items)
-    });
-  })(groups);
-  return sortedGroups;
-};
-var getMappedItemsToGroups = function getMappedItemsToGroups(groups, items) {
-  var mappedGroups = {};
-
-  // build an object for listing the groups by id
-  groups.forEach(function (group) {
-    mappedGroups[group.id] = _objectSpread(_objectSpread({}, group), {}, {
-      items: []
+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(function (item) {
-    // add items to the respective group
-    var groupIds = item.groupIds || [];
-    groupIds.forEach(function (groupId) {
-      var mappedGroup = mappedGroups[groupId];
-      if (mappedGroup) {
-        mappedGroup.items.push(item);
-      }
+    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;
+    return mappedGroups;
 };
-var filterByName = function filterByName(searchValue) {
-  return function (item) {
+const filterByName = searchValue => item => {
     if (searchValue) {
-      return searchNormalized(getName(item), searchValue);
+        return searchNormalized(getName(item), searchValue);
     }
     return true;
-  };
-};
-var filterOutByItemId = function filterOutByItemId(list) {
-  return function (item) {
-    return !list.includes(item.id);
-  };
-};
-var containsItemById = function containsItemById(list) {
-  return function (item) {
-    return list.includes(item.id);
-  };
-};
-var getFlatItems = function getFlatItems(items, searchValue) {
-  return flow(filter(filterByName(searchValue)), orderByName)(items);
-};
-var getListIds = function getListIds(list) {
-  return list.map(function (listItem) {
-    return listItem.id;
-  });
-};
-export var excludeFromList = function excludeFromList(list, itemId) {
-  return list.filter(function (item) {
-    return item !== itemId;
-  });
-};
-var getAssetTypeCounts = function getAssetTypeCounts(items) {
-  return countBy(function (item) {
-    return item.type;
-  }, items);
-};
-var debounceFn = function debounceFn(fn) {
-  return debounce(SEARCH_DEBOUNCE, fn);
-};
-var filterProps = omit(['expandedGroups', 'onExpandGroupsChange', 'onSearchChange', 'onSelectionChange', 'treeOptions']);
-var customCompare = function customCompare(prevProps, nextProps) {
-  return isEqual(filterProps(prevProps), filterProps(nextProps));
-};
-var assetCounted = function assetCounted(payload) {
-  return {
-    type: 'assetCounted',
-    payload: payload
-  };
-};
-var allCheckedChanged = function allCheckedChanged(payload) {
-  return {
-    type: 'allCheckedChanged',
-    payload: payload
-  };
-};
-var searchValueChanged = function searchValueChanged(payload) {
-  return {
-    type: 'searchValueChanged',
-    payload: payload
-  };
-};
-var flatItemsChanged = function flatItemsChanged(payload) {
-  return {
-    type: 'flatItemsChanged',
-    payload: payload
-  };
-};
-var groupedItemsChanged = function groupedItemsChanged(payload) {
-  return {
-    type: 'groupedItemsChanged',
-    payload: payload
-  };
 };
-var typeFilterChanged = function typeFilterChanged(payload) {
-  return {
-    type: 'typeFilterChanged',
-    payload: payload
-  };
-};
-var visibleTypeCountersChanged = function visibleTypeCountersChanged(payload) {
-  return {
-    type: 'visibleTypeCountersChanged',
-    payload: payload
-  };
-};
-var emptyGroupsChanged = function emptyGroupsChanged(payload) {
-  return {
-    type: 'emptyGroupsChanged',
-    payload: payload
-  };
-};
-var treeReducer = function treeReducer(state, action) {
-  switch (action.type) {
-    case 'assetCounted':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        assetCounts: action.payload
-      });
-    case 'allCheckedChanged':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        allChecked: action.payload
-      });
-    case 'searchValueChanged':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        searchValue: action.payload,
-        allChecked: false
-      });
-    case 'flatItemsChanged':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        flatItems: action.payload
-      });
-    case 'groupedItemsChanged':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        groupedItems: action.payload
-      });
-    case 'typeFilterChanged':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        typeFilter: action.payload
-      });
-    case 'visibleTypeCountersChanged':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        visibleTypeCounters: action.payload
-      });
-    case 'emptyGroupsChanged':
-      return _objectSpread(_objectSpread({}, state), {}, {
-        emptyGroups: action.payload
-      });
-    default:
-      throw new Error();
-  }
-};
-var Tree = /*#__PURE__*/React.memo(function (props) {
-  var groups = props.groups,
-    items = props.items,
-    selectedGroups = props.selectedGroups,
-    selectedItems = props.selectedItems,
-    onSelectionChange = props.onSelectionChange,
-    hasMultiselect = props.hasMultiselect,
-    showRadioButtons = props.showRadioButtons,
-    hideSearch = props.hideSearch,
-    hideTreeHead = props.hideTreeHead,
-    summary = props.summary,
-    hideSummary = props.hideSummary,
-    search = props.search,
-    searchPlaceholder = props.searchPlaceholder,
-    onSearchChange = props.onSearchChange,
-    className = props.className,
-    scrollHeight = props.scrollHeight,
-    expandedGroups = props.expandedGroups,
-    onExpandGroupsChange = props.onExpandGroupsChange,
-    showEmptyGroups = props.showEmptyGroups,
-    treeOptions = props.treeOptions,
-    remainingProps = _objectWithoutProperties(props, _excluded);
-  var _useReducer = useReducer(treeReducer, {
-      groupedItems: [],
-      flatItems: [],
-      allChecked: false,
-      searchValue: '',
-      assetCounts: {},
-      typeFilter: [],
-      visibleTypeCounters: [],
-      emptyGroups: []
-    }),
-    _useReducer2 = _slicedToArray(_useReducer, 2),
-    state = _useReducer2[0],
-    dispatch = _useReducer2[1];
-  var treeRef = useRef();
-  var previousItems = useRef();
-  var previousGroups = useRef();
-  var previousSearchValue = useRef('');
-  var internalExpandedGroups = useRef(expandedGroups);
-  useEffect(function () {
-    // Update Tree when items or groups have changed
-    if (notEqual(previousItems.current, items) || notEqual(previousGroups.current, groups)) {
-      previousItems.current = items;
-      previousGroups.current = groups;
-      var typeCounts = getAssetTypeCounts(items);
-      dispatch(assetCounted(typeCounts));
-      var allChecked = checkAllSelected({
-        items: items,
-        groups: groups,
-        selectedItems: selectedItems,
-        selectedGroups: 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]);
-  var debouncedMakeTree = debounceFn(function (losGroupos, losItems) {
-    return makeTree(losGroupos, losItems);
-  });
-  useEffect(function () {
-    // 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]);
-  useEffect(function () {
-    return makeTree(groups, items);
-  }, [state.typeFilter]);
-
-  // Update tree when empty groups are toggled from outside
-  useEffect(function () {
-    return makeTree(groups, items);
-  }, [showEmptyGroups]);
-
-  // Update "select all" state from outside when groups are selected outside programatically
-  // without using the "select all" checkbox
-  useEffect(function () {
-    var numOfAllGroups = size(groups);
-    var numOfSelectedGroups = size(selectedGroups);
-    if (numOfSelectedGroups !== numOfAllGroups && state.allChecked) {
-      dispatch(allCheckedChanged(false));
-    } else if (numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
-      dispatch(allCheckedChanged(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);
+export const excludeFromList = (list, itemId) => list.filter(item => item !== itemId);
+const getAssetTypeCounts = items => countBy(item => item.type, items);
+const debounceFn = fn => debounce(SEARCH_DEBOUNCE, fn);
+const filterProps = omit([
+    'expandedGroups',
+    'onExpandGroupsChange',
+    'onSearchChange',
+    'onSelectionChange',
+    '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();
     }
-  }, [selectedGroups]);
-  var checkAllSelected = function checkAllSelected(updatedProps, flatItems) {
-    var updatedItems = updatedProps.items,
-      updatedGroups = updatedProps.groups,
-      updatedSelectedItems = updatedProps.selectedItems,
-      updatedSelectedGroups = updatedProps.selectedGroups;
-    if (!hasGroups() && isEmpty(updatedSelectedItems) || hasNoSearchAndGroups() && isEmpty(updatedSelectedGroups) || hasSearchAndGroups() && isEmpty(updatedSelectedItems)) {
-      return false;
-    }
-    if (hasNoSearchAndGroups()) {
-      var unselectedGroups = filter(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
-      return isEmpty(unselectedGroups);
-    } else if (hasSearchAndGroups()) {
-      var unselectedSearchItems = filter(filterOutByItemId(updatedSelectedItems))(flatItems);
-      return isEmpty(unselectedSearchItems);
-    }
-    var unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
-    return isEmpty(unselectedItems);
-  };
-  var handleToggleNode = function handleToggleNode(nodeId) {
-    var newExpandedNodes = internalExpandedGroups.current.includes(nodeId) ? internalExpandedGroups.current.filter(function (item) {
-      return item !== nodeId;
-    }) : [].concat(_toConsumableArray(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);
-  };
-  var getNodeContainerDomElementById = function getNodeContainerDomElementById(nodeId) {
-    return treeRef.current.querySelector(".TreeNodeContainer[data-id=\"".concat(nodeId, "\"]"));
-  };
-  var selectAllSearchResultItems = function selectAllSearchResultItems(shouldSelect) {
-    return selectAllFlatItems(shouldSelect);
-  };
-  var handeSelectAll = function handeSelectAll(shouldSelect, isIndeterminate) {
-    var shouldSelectAll = shouldSelect && !isIndeterminate;
-    dispatch(allCheckedChanged(shouldSelectAll));
-    cond([[hasNoSearchAndGroups, function () {
-      return selectAllGroups(shouldSelectAll);
-    }], [hasSearchAndGroups, function () {
-      return selectAllSearchResultItems(shouldSelectAll);
-    }], [otherwise, function () {
-      return selectAllFlatItems(shouldSelectAll);
-    }]])();
-  };
-  var selectAllGroups = function selectAllGroups(shouldSelect) {
-    return respondSelection([], shouldSelect ? getListIds(groups) : []);
-  };
-  var selectAllFlatItems = function selectAllFlatItems(shouldSelect) {
-    return respondSelection(shouldSelect ? getListIds(state.flatItems) : [], []);
-  };
-  var respondSelection = function respondSelection(updatedSelectedItems, updatedSelectedGroups) {
-    onSelectionChange({
-      items: updatedSelectedItems,
-      groups: updatedSelectedGroups
+};
+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 [state, dispatch] = useReducer(treeReducer, {
+        groupedItems: [],
+        flatItems: [],
+        allChecked: false,
+        searchValue: '',
+        assetCounts: {},
+        typeFilter: [],
+        visibleTypeCounters: [],
+        emptyGroups: [],
     });
-  };
-  var handleGroupSelection = function handleGroupSelection(group, isIndeterminate) {
-    var groupId = group.id;
-    var isSelected = selectedGroups.includes(groupId);
-    var shouldSelectGroup = !isSelected && !isIndeterminate;
-
-    // handle group selection
-    var newSelectedGroups = shouldSelectGroup ? [].concat(_toConsumableArray(selectedGroups), [groupId]) : excludeFromList(selectedGroups, groupId);
-
-    // deselect all items of a node since they will be selected inherently via the group itself
-    var itemsInGroup = find(function (entry) {
-      return entry.id === groupId;
-    })(state.groupedItems);
-    var itemIdsOfGroup = map(function (item) {
-      return item.id;
-    })(itemsInGroup.items);
-    var updatedSelectedItems = without(itemIdsOfGroup, selectedItems);
-
-    // check if all groups are selected to change the state of TreeSelectAll
-    var groupAmount = groups.length;
-    var emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
-    var totalGroupAmount = groupAmount - emptyGroupAmount;
-    var areAllGroupsChecked = totalGroupAmount === newSelectedGroups.length;
-    dispatch(allCheckedChanged(areAllGroupsChecked));
-    respondSelection(updatedSelectedItems, newSelectedGroups);
-  };
-  var handleSearchChange = function handleSearchChange(updatedSearchValue) {
-    onSearchChange(updatedSearchValue);
-    dispatch(searchValueChanged(updatedSearchValue));
-  };
-  var hasGroups = function hasGroups() {
-    return groups && notEmpty(groups);
-  };
-  var hasSearchAndGroups = function hasSearchAndGroups() {
-    return hasInternalSearchValue() && hasGroups();
-  };
-  var hasNoSearchAndGroups = function hasNoSearchAndGroups() {
-    return !hasInternalSearchValue() && hasGroups();
-  };
-  var setFlatItemList = function setFlatItemList(updtedItems, searchValue) {
-    var flatItems = getFlatItems(updtedItems, searchValue);
-    dispatch(assetCounted(getAssetTypeCounts(flatItems)));
-    dispatch(flatItemsChanged(flatItems));
-  };
-  var setGroupedItemList = function setGroupedItemList(groupsToProcess, itemsToProcess, considerEmptyGroups) {
-    // Map items to groups with filtered items
-    var mappedItemsToGroups = getMappedItemsToGroups(groupsToProcess, itemsToProcess);
-    var newGroupedItems = flow(sortGroupsByName, sortGroupItemsByName)(mappedItemsToGroups);
-    var groupedItems = considerEmptyGroups ? newGroupedItems : filterEmptyGroups(newGroupedItems);
-
-    // Keep the empty groups in memory for later access in select all, without re-iterating on every
-    // group selection
-    var emptyGroups = filter(function (group) {
-      return isEmpty(group.items);
-    })(newGroupedItems);
-    dispatch(emptyGroupsChanged(emptyGroups));
-    dispatch(assetCounted(getAssetTypeCounts(items)));
-    dispatch(groupedItemsChanged(groupedItems));
-  };
-  var makeTree = function makeTree(updatedGroups, updatedItems) {
-    var internalSearchValue = state.searchValue;
-    var internalTypeFilter = state.typeFilter;
-    var groupsToProcess = updatedGroups;
-    var itemsToProcess = updatedItems;
-    var hasGroupList = function hasGroupList(groupList) {
-      return groupList && notEmpty(groupList);
+    const treeRef = useRef();
+    const previousItems = useRef();
+    const previousGroups = useRef();
+    const previousSearchValue = useRef('');
+    const internalExpandedGroups = useRef(expandedGroups);
+    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));
+    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]);
+    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
+    // without using the "select all" checkbox
+    useEffect(() => {
+        const numOfAllGroups = size(groups);
+        const numOfSelectedGroups = size(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() && isEmpty(updatedSelectedItems)) ||
+            (hasNoSearchAndGroups() && isEmpty(updatedSelectedGroups)) ||
+            (hasSearchAndGroups() && isEmpty(updatedSelectedItems))) {
+            return false;
+        }
+        if (hasNoSearchAndGroups()) {
+            const unselectedGroups = filter(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
+            return isEmpty(unselectedGroups);
+        }
+        else if (hasSearchAndGroups()) {
+            const unselectedSearchItems = filter(filterOutByItemId(updatedSelectedItems))(flatItems);
+            return isEmpty(unselectedSearchItems);
+        }
+        const unselectedItems = updatedItems.filter(filterOutByItemId(updatedSelectedItems));
+        return isEmpty(unselectedItems);
     };
-    var hasNoInternalSearchAndGroups = function hasNoInternalSearchAndGroups() {
-      return isEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
+    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);
     };
-    var hasInternalSearchAndGroups = function hasInternalSearchAndGroups() {
-      return notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
+    const getNodeContainerDomElementById = nodeId => {
+        return treeRef.current.querySelector(`.TreeNodeContainer[data-id="${nodeId}"]`);
     };
-    var filteredItems = isEmpty(internalTypeFilter) ? itemsToProcess : filterAssetByType(internalTypeFilter)(itemsToProcess);
-    var setGroupedItems = function setGroupedItems() {
-      return setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
+    const selectAllSearchResultItems = shouldSelect => selectAllFlatItems(shouldSelect);
+    const handeSelectAll = (shouldSelect, isIndeterminate) => {
+        const shouldSelectAll = shouldSelect && !isIndeterminate;
+        dispatch(allCheckedChanged(shouldSelectAll));
+        cond([
+            [hasNoSearchAndGroups, () => selectAllGroups(shouldSelectAll)],
+            [hasSearchAndGroups, () => selectAllSearchResultItems(shouldSelectAll)],
+            [otherwise, () => selectAllFlatItems(shouldSelectAll)],
+        ])();
     };
-    var setFlatItems = function setFlatItems() {
-      return setFlatItemList(filteredItems, internalSearchValue);
+    const selectAllGroups = shouldSelect => respondSelection([], shouldSelect ? getListIds(groups) : []);
+    const selectAllFlatItems = shouldSelect => respondSelection(shouldSelect ? getListIds(state.flatItems) : [], []);
+    const respondSelection = (updatedSelectedItems, updatedSelectedGroups) => {
+        onSelectionChange({ items: updatedSelectedItems, groups: updatedSelectedGroups });
     };
-    cond([[hasNoInternalSearchAndGroups, setGroupedItems], [hasInternalSearchAndGroups, setFlatItems], [otherwise, setFlatItems]])();
-  };
-  var renderTree = function renderTree() {
-    var groupedItems = state.groupedItems;
-    if (isEmpty(groupedItems)) {
-      return /*#__PURE__*/React.createElement(TreeNothingFound, null);
-    }
-    var result = map(function (group) {
-      var groupId = group.id;
-      var groupItems = group.items;
-      var isOpen = expandedGroups.includes(groupId);
-      var numSelectedGroupItems = filter(containsItemById(selectedItems))(groupItems).length;
-      var isGroupSelected = selectedGroups.includes(groupId);
-      var isIndeterminate = !isGroupSelected && numSelectedGroupItems > 0;
-      return /*#__PURE__*/React.createElement(TreeNodeContainer, {
-        key: groupId,
-        groupId: groupId,
-        isOpen: isOpen
-      }, /*#__PURE__*/React.createElement(TreeNode, {
-        node: group,
-        hasMultiselect: hasMultiselect,
-        onToggleNode: handleToggleNode,
-        onSelect: handleGroupSelection,
-        isSelected: isGroupSelected,
-        isIndeterminate: isIndeterminate
-      }), /*#__PURE__*/React.createElement(TreeLeafList, {
-        leafList: groupItems,
-        hasMultiselect: hasMultiselect,
-        showRadioButtons: showRadioButtons,
-        selectedItems: selectedItems,
-        selectedGroups: selectedGroups,
-        onSelectionChange: respondSelection
-      }));
-    })(groupedItems);
-    return result;
-  };
-  var renderFlatList = function renderFlatList() {
-    var flatItems = state.flatItems;
-    var hasLeafs = isEmpty(flatItems);
-    var getLeafs = function getLeafs() {
-      return /*#__PURE__*/React.createElement(TreeLeafList, {
-        leafList: flatItems,
-        hasMultiselect: hasMultiselect,
-        showRadioButtons: showRadioButtons,
-        selectedItems: selectedItems,
-        selectedGroups: selectedGroups,
-        onSelectionChange: respondSelection
-      });
+    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]
+            : 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 updatedSelectedItems = without(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);
     };
-    return /*#__PURE__*/React.createElement(TreeNodeContainer, {
-      isOpen: true
-    }, hasLeafs ? /*#__PURE__*/React.createElement(TreeNothingFound, null) : getLeafs());
-  };
-  var hasExternalGroups = notEmpty(groups);
-  var hasInternalSearchValue = function hasInternalSearchValue() {
-    return notEmpty(state.searchValue);
-  };
-  var hasSelectedAllItems = function hasSelectedAllItems() {
-    return isEqual(size(selectedItems), size(state.flatItems));
-  };
-  var hasPartialySelectedItems = function hasPartialySelectedItems() {
-    return notEmpty(selectedItems) && !hasSelectedAllItems();
-  };
-  var hasSelectedAllGroups = function hasSelectedAllGroups() {
-    var emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
-    return isEqual(size(selectedGroups), size(groups) - emptyGroupAmount);
-  };
-  var hasPartialySelectedGroups = function hasPartialySelectedGroups() {
-    return hasExternalGroups && notEmpty(selectedGroups) && !hasSelectedAllGroups();
-  };
-  var hasSearchAndNoItems = hasInternalSearchValue() && isEmpty(state.flatItems);
-  var hasSearchAndNoGroups = hasInternalSearchValue() && isEmpty(state.groupedItems) && hasExternalGroups;
-  var hideSelectAll = hasSearchAndNoItems || hasSearchAndNoGroups;
-  var isIndeterminate = hasPartialySelectedGroups() || hasPartialySelectedItems();
-  var treeClassNames = classNames('Tree', className);
-  var treeHeadClasses = classNames('TreeHead', 'display-flex align-items-center', 'padding-15');
-  var shouldRenderTree = function shouldRenderTree() {
-    return hasGroups() && !hasInternalSearchValue();
-  };
-  var content = cond([[shouldRenderTree, function () {
-    return renderTree();
-  }], [otherwise, function () {
-    return renderFlatList();
-  }]])();
-  var handleFilterByType = function handleFilterByType(type) {
-    var currentTypeFilter = new Set(state.typeFilter);
-    if (currentTypeFilter.has(type)) {
-      currentTypeFilter["delete"](type);
-    } else {
-      currentTypeFilter.add(type);
-    }
-    dispatch(typeFilterChanged(_toConsumableArray(currentTypeFilter)));
-  };
-  var isClickable = size(keys(state.assetCounts)) > 1;
-  var isFilterActive = notEmpty(state.typeFilter);
-  var showTreeHead = !hideTreeHead;
-  var showSelectAll = !hideSelectAll;
-  var showSearch = !hideSearch;
-  var showSummary = !hideSummary;
-  var hasCustomSearch = !isNil(search);
-  return /*#__PURE__*/React.createElement("div", _extends({}, remainingProps, {
-    className: treeClassNames,
-    ref: treeRef
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "TreeHeader"
-  }, showSearch && !hasCustomSearch && /*#__PURE__*/React.createElement(TreeSearch, {
-    value: state.searchValue,
-    onChange: handleSearchChange,
-    placeholder: searchPlaceholder
-  }), hasCustomSearch && search, showTreeHead && /*#__PURE__*/React.createElement("div", {
-    className: treeHeadClasses
-  }, showSelectAll && /*#__PURE__*/React.createElement(TreeSelectAll, {
-    isChecked: state.allChecked,
-    isEnabled: hasMultiselect,
-    isIndeterminate: isIndeterminate,
-    onSelect: handeSelectAll
-  }), showSelectAll && hasMultiselect && showSummary && /*#__PURE__*/React.createElement(Divider, null), /*#__PURE__*/React.createElement("div", {
-    className: "display-flex justify-content-between align-items-center width-100pct"
-  }, showSummary ? summary || /*#__PURE__*/React.createElement(TreeSummary, null, map(function (typeCounter) {
-    return /*#__PURE__*/React.createElement(TypeCounter, {
-      key: typeCounter,
-      type: typeCounter,
-      icon: "".concat(typeCounter),
-      value: state.assetCounts[typeCounter],
-      onClick: handleFilterByType,
-      isActive: state.typeFilter.includes(typeCounter),
-      hasFilter: isFilterActive,
-      enableActivity: isClickable
-    });
-  })(state.visibleTypeCounters)) : null, /*#__PURE__*/React.createElement(TreeOptions, {
-    treeOptions: treeOptions
-  })))), /*#__PURE__*/React.createElement(TreeRoot, {
-    maxHeight: scrollHeight
-  }, content));
+    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 = flow(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 = filter(group => isEmpty(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 = () => isEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
+        const hasInternalSearchAndGroups = () => notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
+        const filteredItems = isEmpty(internalTypeFilter)
+            ? itemsToProcess
+            : filterAssetByType(internalTypeFilter)(itemsToProcess);
+        const setGroupedItems = () => setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
+        const setFlatItems = () => setFlatItemList(filteredItems, internalSearchValue);
+        cond([
+            [hasNoInternalSearchAndGroups, setGroupedItems],
+            [hasInternalSearchAndGroups, setFlatItems],
+            [otherwise, setFlatItems],
+        ])();
+    };
+    const renderTree = () => {
+        const { groupedItems } = state;
+        if (isEmpty(groupedItems)) {
+            return _jsx(TreeNothingFound, {});
+        }
+        const result = map(group => {
+            const groupId = group.id;
+            const groupItems = group.items;
+            const isOpen = expandedGroups.includes(groupId);
+            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));
+        })(groupedItems);
+        return result;
+    };
+    const renderFlatList = () => {
+        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() }));
+    };
+    const hasExternalGroups = notEmpty(groups);
+    const hasInternalSearchValue = () => notEmpty(state.searchValue);
+    const hasSelectedAllItems = () => isEqual(size(selectedItems), size(state.flatItems));
+    const hasPartialySelectedItems = () => 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 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 treeHeadClasses = classNames('TreeHead', 'display-flex align-items-center', '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 isClickable = size(keys(state.assetCounts)) > 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(TreeSelectAll, { isChecked: state.allChecked, isEnabled: hasMultiselect, isIndeterminate: isIndeterminate, onSelect: handeSelectAll })), showSelectAll && hasMultiselect && showSummary && _jsx(Divider, {}), _jsxs("div", Object.assign({ className: 'display-flex justify-content-between align-items-center 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)))(state.visibleTypeCounters) }))
+                                        : null, _jsx(TreeOptions, { treeOptions: treeOptions })] }))] })))] })), _jsx(TreeRoot, 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: function onSelectionChange() {},
-  onExpandGroupsChange: function onExpandGroupsChange() {},
-  onSearchChange: function onSearchChange() {},
-  searchPlaceholder: 'Type here to filter by name',
-  treeOptions: [],
-  groups: []
+    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)
+    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;
+export default Tree;