@rio-cloud/rio-uikit 0.16.1-beta-4 → 0.16.1-beta-8

package/lib/components/applicationHeader/ApplicationHeader.js

@@ -46,7 +46,7 @@ function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflec
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 var RESIZE_THROTTELING = 10;
-var MOBILE_MAX_WIDTH = 580; //const COLLAPSED_DROPDOWN_WIDTH = 50;
+var MOBILE_MAX_WIDTH = 580; // const COLLAPSED_DROPDOWN_WIDTH = 50;
 
 var ApplicationHeader = /*#__PURE__*/function (_PureComponent) {
   (0, _inherits2.default)(ApplicationHeader, _PureComponent);
@@ -71,10 +71,10 @@ var ApplicationHeader = /*#__PURE__*/function (_PureComponent) {
   (0, _createClass2.default)(ApplicationHeader, [{
     key: "isMobile",
     value: function isMobile() {
-      //const node = this.navRef;
+      // const node = this.navRef;
       // FIXME: collision check need to be done after second rendering of NavItems
 
-      /*let isColliding = false;
+      /* let isColliding = false;
        // check for collision of NavItems and ActionBar
       if (this.refNavItems && this.refActionBar) {
           const navItemsNode = ReactDOM.findDOMNode(this.refNavItems);
@@ -92,14 +92,14 @@ var ApplicationHeader = /*#__PURE__*/function (_PureComponent) {
           }
       }*/
       return (
-        /*isColliding || */
+        /* isColliding || */
         this.getContainerWidth() < MOBILE_MAX_WIDTH && this.props.label
       );
     }
   }, {
     key: "getContainerWidth",
     value: function getContainerWidth() {
-      //return this.navRef.clientWidth;
+      // return this.navRef.clientWidth;
       return window.innerWidth;
     }
   }, {
@@ -152,7 +152,7 @@ var ApplicationHeader = /*#__PURE__*/function (_PureComponent) {
           appMenuItems = _this$props.appMenuItems,
           navItems = _this$props.navItems,
           actionBarItems = _this$props.actionBarItems;
-      var classNames = (0, _classnames.default)('ApplicationHeader', 'navbar navbar-default', 'user-select-none', this.state.isMobile && 'mobile', className && className);
+      var classNames = (0, _classnames.default)('ApplicationHeader', 'user-select-none', this.state.isMobile && 'mobile', className && className);
 
       var renderNavItems = /*#__PURE__*/_react.default.createElement(_NavItems.default, {
         key: "NavItems",

package/lib/components/applicationHeader/NavItems.js

@@ -234,11 +234,11 @@ var NavItems = /*#__PURE__*/function (_Component) {
 
       return /*#__PURE__*/_react.default.createElement("li", {
         className: "CollapsedDropdown dropdown ".concat(collapsedDropdownClass),
-        key: 'collapsed-dropdown'
+        key: "collapsed-dropdown"
       }, /*#__PURE__*/_react.default.createElement("a", {
         id: "basic-nav-dropdown",
         role: "button",
-        className: "dropdown-toggle",
+        className: "dropdown-toggle text-color-gray",
         "aria-haspopup": "true",
         "aria-expanded": "true",
         onClick: this.handleCollapsedDropdown
@@ -246,16 +246,16 @@ var NavItems = /*#__PURE__*/function (_Component) {
         className: "rioglyph rioglyph-option-horizontal",
         "aria-hidden": "true"
       })), /*#__PURE__*/_react.default.createElement("ul", {
-        className: 'dropdown-menu',
+        className: "dropdown-menu",
         role: "menu",
         "aria-labelledby": "basic-nav-dropdown",
         style: inlineStyle
-      }, /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
+      }, isMobile && /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
         items: this.props.actionBarItems
       }), collapsedNavItems.map(function (navItem) {
         return /*#__PURE__*/_react.default.createElement("li", {
           key: navItem.key,
-          className: 'submodule nav-link-item',
+          className: "submodule",
           onClick: _this3.handleCollapsedNavItemSelected,
           "data-nav-item-key": navItem.key
         }, navItem.route);
@@ -266,7 +266,7 @@ var NavItems = /*#__PURE__*/function (_Component) {
     value: function renderNavItem(navItem, isOffscreen) {
       return /*#__PURE__*/_react.default.createElement("li", {
         key: navItem.key,
-        className: "submodule nav-link-item ".concat(isOffscreen ? 'offscreen' : ''),
+        className: "submodule ".concat(isOffscreen ? 'offscreen' : ''),
         "data-nav-item-key": navItem.key
       }, navItem.route);
     }
@@ -286,7 +286,7 @@ var NavItems = /*#__PURE__*/function (_Component) {
       if (isMobile) {
         return !hasNavItems && hasSingleActionItem ? /*#__PURE__*/_react.default.createElement(_ApplicationActionBar.ApplicationActionBar, {
           items: actionBarItems,
-          className: 'position-relative'
+          className: "position-relative"
         }) : this.renderCollapsedNavItem(navItems);
       }
 
@@ -310,7 +310,7 @@ var NavItems = /*#__PURE__*/function (_Component) {
       // As all navItems need to be added to the DOM first in order to get their real size
       // the computation wheather a navItem need to be shown under the collapsed dropdown or not
       // needs to be done after the component did mount to the DOM.
-      var classes = (0, _classnames.default)('SubmoduleNavigation', 'NavItems', 'nav', 'navbar-nav');
+      var classes = (0, _classnames.default)('SubmoduleNavigation', 'nav');
       return /*#__PURE__*/_react.default.createElement("ul", {
         className: classes,
         ref: function ref(node) {

package/lib/components/applicationLayout/ApplicationLayout.js

@@ -2,14 +2,12 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = exports.ApplicationLayout = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -23,18 +21,16 @@ var _ApplicationLayoutBody = _interopRequireDefault(require("./ApplicationLayout
 
 var _init = require("../../utils/init");
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 // initializes document bootstrapping - keep the import to avoid being tree-shaked
 _init.initDocumentBootstrapping;
 
 var ApplicationLayout = function ApplicationLayout(_ref) {
   var className = _ref.className,
+      layoutRef = _ref.layoutRef,
       children = _ref.children;
   var classes = (0, _classnames.default)('ApplicationLayout', className);
   return /*#__PURE__*/_react.default.createElement("div", {
+    ref: layoutRef,
     className: classes
   }, children);
 };
@@ -44,7 +40,8 @@ ApplicationLayout.Header = _ApplicationLayoutHeader.default;
 ApplicationLayout.Sidebar = _ApplicationLayoutSidebar.default;
 ApplicationLayout.Body = _ApplicationLayoutBody.default;
 ApplicationLayout.propTypes = {
-  className: _propTypes.default.string
+  className: _propTypes.default.string,
+  layoutRef: _propTypes.default.func
 };
 var _default = ApplicationLayout;
 exports.default = _default;

package/lib/components/applicationLayout/ApplicationLayoutBody.js

@@ -19,8 +19,6 @@ var _debounce = _interopRequireDefault(require("lodash/fp/debounce"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _ApplicationLayoutBodyBottomBar = require("./ApplicationLayoutBodyBottomBar");
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -71,7 +69,7 @@ var ApplicationLayoutBody = function ApplicationLayoutBody(props) {
     className: classes
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "module-content-wrapper"
-  }, banner && banner, navigation && navigation, /*#__PURE__*/_react.default.createElement("div", {
+  }, navigation && navigation, banner && banner, /*#__PURE__*/_react.default.createElement("div", {
     className: innerClasses,
     onScroll: handleScroll,
     ref: moduleContentRef

package/lib/components/applicationLayout/SubNavigation.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SubNavigation = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["className", "navItems", "right"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var SubNavigation = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      navItems = props.navItems,
+      right = props.right,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var navigationClasses = (0, _classnames.default)('SubNavigation', 'width-100pct display-flex align-items-center justify-content-between overflow-auto', className);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: ref
+  }, remainingProps, {
+    className: navigationClasses
+  }), /*#__PURE__*/_react.default.createElement("ul", {
+    className: "SubmoduleNavigation nav"
+  }, navItems.map(function (navItem) {
+    return /*#__PURE__*/_react.default.createElement("li", {
+      className: "submodule",
+      key: navItem.key,
+      "data-nav-item-key": navItem.key
+    }, navItem.route);
+  })));
+});
+exports.SubNavigation = SubNavigation;
+SubNavigation.defaultProps = {
+  navItems: []
+};
+SubNavigation.propTypes = {
+  navItems: _propTypes.default.arrayOf(_propTypes.default.shape({
+    key: _propTypes.default.string.isRequired,
+    route: _propTypes.default.node.isRequired
+  })),
+  className: _propTypes.default.string
+};
+var _default = SubNavigation;
+exports.default = _default;

package/lib/components/assetTree/Tree.js

@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _isNil = _interopRequireDefault(require("lodash/fp/isNil"));
+
 var _isEmpty = _interopRequireDefault(require("lodash/fp/isEmpty"));
 
 var _isEqual = _interopRequireDefault(require("lodash/fp/isEqual"));
@@ -55,6 +57,8 @@ var _omit = _interopRequireDefault(require("lodash/fp/omit"));
 
 var _negate = _interopRequireDefault(require("lodash/fp/negate"));
 
+var _keys = _interopRequireDefault(require("lodash/fp/keys"));
+
 var _TreeSearch = _interopRequireDefault(require("./TreeSearch"));
 
 var _TreeSelectAll = _interopRequireDefault(require("./TreeSelectAll"));
@@ -73,6 +77,8 @@ var _TreeOptions = _interopRequireDefault(require("./TreeOptions"));
 
 var _TreeRoot = _interopRequireDefault(require("./TreeRoot"));
 
+var _TypeCounter = _interopRequireDefault(require("./TypeCounter"));
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -86,6 +92,12 @@ var otherwise = _stubTrue.default;
 var notEqual = (0, _negate.default)(_isEqual.default);
 var notEmpty = (0, _negate.default)(_isEmpty.default);
 
+var Divider = function Divider() {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: 'TreeSelectAllDivider bg-light width-2 height-15 ' + 'margin-top-2 margin-bottom-0 margin-left-10 margin-right-10'
+  });
+};
+
 var isNameObject = function isNameObject(item) {
   return (0, _isObject.default)(item.name);
 };
@@ -113,6 +125,13 @@ var filterEmptyGroups = (0, _filter.default)(function (group) {
   return notEmpty(group.items);
 });
 
+var filterAssetByType = function filterAssetByType() {
+  var types = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
+  return (0, _filter.default)(function (asset) {
+    return types.includes(asset.type);
+  });
+};
+
 var sortGroupsByName = function sortGroupsByName(groups) {
   var fixedGroups = {};
   var sortableGroups = {};
@@ -222,9 +241,9 @@ var assetCounted = function assetCounted(payload) {
   };
 };
 
-var allChecked = function allChecked(payload) {
+var allCheckedChanged = function allCheckedChanged(payload) {
   return {
-    type: 'allChecked',
+    type: 'allCheckedChanged',
     payload: payload
   };
 };
@@ -250,6 +269,27 @@ var groupedItemsChanged = function groupedItemsChanged(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':
@@ -257,7 +297,7 @@ var treeReducer = function treeReducer(state, action) {
         assetCounts: action.payload
       });
 
-    case 'allChecked':
+    case 'allCheckedChanged':
       return _objectSpread(_objectSpread({}, state), {}, {
         allChecked: action.payload
       });
@@ -278,6 +318,21 @@ var treeReducer = function treeReducer(state, action) {
         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();
   }
@@ -310,7 +365,10 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     flatItems: [],
     allChecked: false,
     searchValue: '',
-    assetCounts: {}
+    assetCounts: {},
+    typeFilter: [],
+    visibleTypeCounters: [],
+    emptyGroups: []
   }),
       _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
       state = _useReducer2[0],
@@ -326,18 +384,23 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     if (notEqual(previousItems.current, items) || notEqual(previousGroups.current, groups)) {
       previousItems.current = items;
       previousGroups.current = groups;
-      dispatch(assetCounted(getAssetTypeCounts(items)));
-      dispatch(allChecked(checkAllSelected({
+      var typeCounts = getAssetTypeCounts(items);
+      dispatch(assetCounted(typeCounts));
+      var allChecked = checkAllSelected({
         items: items,
         groups: groups,
         selectedItems: selectedItems,
         selectedGroups: selectedGroups
-      }, state.flatItems)));
+      }, 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 (g, i) {
-    return makeTree(g, i);
+  var debouncedMakeTree = debounceFn(function (losGroupos, losItems) {
+    return makeTree(losGroupos, losItems);
   });
   (0, _react.useEffect)(function () {
     // To prevent executing the effect on first render, use a ref to check previous render values
@@ -347,21 +410,37 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     }
   }, [state.searchValue]);
   (0, _react.useEffect)(function () {
-    makeTree(groups, items);
-  }, [showEmptyGroups]);
+    return makeTree(groups, items);
+  }, [state.typeFilter]); // Update tree when empty groups are toggled from outside
+
+  (0, _react.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
+
+  (0, _react.useEffect)(function () {
+    var numOfAllGroups = (0, _size.default)(groups);
+    var numOfSelectedGroups = (0, _size.default)(selectedGroups);
+
+    if (numOfSelectedGroups !== numOfAllGroups && state.allChecked) {
+      dispatch(allCheckedChanged(false));
+    } else if (numOfSelectedGroups === numOfAllGroups && !state.allChecked) {
+      dispatch(allCheckedChanged(true));
+    }
+  }, [selectedGroups]);
 
   var checkAllSelected = function checkAllSelected(updatedProps, flatItems) {
     var updatedItems = updatedProps.items,
         updatedGroups = updatedProps.groups,
         updatedSelectedItems = updatedProps.selectedItems,
-        updatedSlectedGroups = updatedProps.selectedGroups;
+        updatedSelectedGroups = updatedProps.selectedGroups;
 
-    if (!hasGroups() && (0, _isEmpty.default)(updatedSelectedItems) || hasNoSearchAndGroups() && (0, _isEmpty.default)(updatedSlectedGroups) || hasSearchAndGroups() && (0, _isEmpty.default)(updatedSelectedItems)) {
+    if (!hasGroups() && (0, _isEmpty.default)(updatedSelectedItems) || hasNoSearchAndGroups() && (0, _isEmpty.default)(updatedSelectedGroups) || hasSearchAndGroups() && (0, _isEmpty.default)(updatedSelectedItems)) {
       return false;
     }
 
     if (hasNoSearchAndGroups()) {
-      var unselectedGroups = (0, _filter.default)(filterOutByItemId(updatedSlectedGroups))(updatedGroups);
+      var unselectedGroups = (0, _filter.default)(filterOutByItemId(updatedSelectedGroups))(updatedGroups);
       return (0, _isEmpty.default)(unselectedGroups);
     } else if (hasSearchAndGroups()) {
       var unselectedSearchItems = (0, _filter.default)(filterOutByItemId(updatedSelectedItems))(flatItems);
@@ -397,7 +476,7 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
 
   var handeSelectAll = function handeSelectAll(shouldSelect, isIndeterminate) {
     var shouldSelectAll = shouldSelect && !isIndeterminate;
-    dispatch(allChecked(shouldSelectAll));
+    dispatch(allCheckedChanged(shouldSelectAll));
     (0, _cond.default)([[hasNoSearchAndGroups, function () {
       return selectAllGroups(shouldSelectAll);
     }], [hasSearchAndGroups, function () {
@@ -435,7 +514,13 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     var itemIdsOfGroup = (0, _map.default)(function (item) {
       return item.id;
     })(itemsInGroup.items);
-    var updatedSelectedItems = (0, _without.default)(itemIdsOfGroup, selectedItems);
+    var updatedSelectedItems = (0, _without.default)(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);
   };
 
@@ -466,13 +551,20 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     // Map items to groups with filtered items
     var mappedItemsToGroups = getMappedItemsToGroups(groupsToProcess, itemsToProcess);
     var newGroupedItems = (0, _flow.default)(sortGroupsByName, sortGroupItemsByName)(mappedItemsToGroups);
-    var groupedItems = considerEmptyGroups ? newGroupedItems : filterEmptyGroups(newGroupedItems);
+    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 = (0, _filter.default)(function (group) {
+      return (0, _isEmpty.default)(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;
 
@@ -488,12 +580,14 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
       return notEmpty(internalSearchValue) && hasGroupList(groupsToProcess);
     };
 
+    var filteredItems = (0, _isEmpty.default)(internalTypeFilter) ? itemsToProcess : filterAssetByType(internalTypeFilter)(itemsToProcess);
+
     var setGroupedItems = function setGroupedItems() {
-      return setGroupedItemList(groupsToProcess, itemsToProcess, showEmptyGroups);
+      return setGroupedItemList(groupsToProcess, filteredItems, showEmptyGroups);
     };
 
     var setFlatItems = function setFlatItems() {
-      return setFlatItemList(itemsToProcess, internalSearchValue);
+      return setFlatItemList(filteredItems, internalSearchValue);
     };
 
     (0, _cond.default)([[hasNoInternalSearchAndGroups, setGroupedItems], [hasInternalSearchAndGroups, setFlatItems], [otherwise, setFlatItems]])();
@@ -556,16 +650,6 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     }, hasLeafs ? /*#__PURE__*/_react.default.createElement(_TreeNothingFound.default, null) : getLeafs());
   };
 
-  var renderSummary = function renderSummary() {
-    if (hideSummary) {
-      return null;
-    }
-
-    return summary || /*#__PURE__*/_react.default.createElement(_TreeSummary.default, {
-      assetCounts: state.assetCounts
-    });
-  };
-
   var hasExternalGroups = notEmpty(groups);
 
   var hasInternalSearchValue = function hasInternalSearchValue() {
@@ -581,7 +665,8 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
   };
 
   var hasSelectedAllGroups = function hasSelectedAllGroups() {
-    return (0, _isEqual.default)((0, _size.default)(selectedGroups), (0, _size.default)(groups));
+    var emptyGroupAmount = showEmptyGroups ? 0 : state.emptyGroups.length;
+    return (0, _isEqual.default)((0, _size.default)(selectedGroups), (0, _size.default)(groups) - emptyGroupAmount);
   };
 
   var hasPartialySelectedGroups = function hasPartialySelectedGroups() {
@@ -604,25 +689,56 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
   }], [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((0, _toConsumableArray2.default)(currentTypeFilter)));
+  };
+
+  var isClickable = (0, _size.default)((0, _keys.default)(state.assetCounts)) > 1;
+  var isFilterActive = notEmpty(state.typeFilter);
+  var showTreeHead = !hideTreeHead;
+  var showSelectAll = !hideSelectAll;
+  var showSearch = !hideSearch;
+  var showSummary = !hideSummary;
+  var hasCustomSearch = !(0, _isNil.default)(search);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: treeClassNames,
     ref: treeRef
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "TreeHeader"
-  }, !hideSearch && !search && /*#__PURE__*/_react.default.createElement(_TreeSearch.default, {
+  }, showSearch && !hasCustomSearch && /*#__PURE__*/_react.default.createElement(_TreeSearch.default, {
     value: state.searchValue,
     onChange: handleSearchChange,
     placeholder: searchPlaceholder
-  }), search && search, !hideTreeHead && /*#__PURE__*/_react.default.createElement("div", {
+  }), hasCustomSearch && search, showTreeHead && /*#__PURE__*/_react.default.createElement("div", {
     className: treeHeadClasses
-  }, !hideSelectAll && /*#__PURE__*/_react.default.createElement(_TreeSelectAll.default, {
+  }, showSelectAll && /*#__PURE__*/_react.default.createElement(_TreeSelectAll.default, {
     isChecked: state.allChecked,
     isEnabled: hasMultiselect,
     isIndeterminate: isIndeterminate,
     onSelect: handeSelectAll
-  }), /*#__PURE__*/_react.default.createElement("div", {
+  }), showSelectAll && hasMultiselect && showSummary && /*#__PURE__*/_react.default.createElement(Divider, null), /*#__PURE__*/_react.default.createElement("div", {
     className: "display-flex justify-content-between align-items-center width-100pct"
-  }, renderSummary(), /*#__PURE__*/_react.default.createElement(_TreeOptions.default, {
+  }, showSummary ? summary || /*#__PURE__*/_react.default.createElement(_TreeSummary.default, null, (0, _map.default)(function (typeCounter) {
+    return /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
+      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.default.createElement(_TreeOptions.default, {
     treeOptions: treeOptions
   })))), /*#__PURE__*/_react.default.createElement(_TreeRoot.default, {
     maxHeight: scrollHeight

package/lib/components/assetTree/TreeSelectAll.js

@@ -25,7 +25,7 @@ var TreeSelectAll = function TreeSelectAll(props) {
   };
 
   return isEnabled ? /*#__PURE__*/_react.default.createElement("div", {
-    className: 'TreeSelectAll display-flex align-items-center'
+    className: "TreeSelectAll display-flex align-items-center"
   }, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
     checked: isChecked,
     onClick: handleSelectAll,

package/lib/components/assetTree/TreeSummary.js

@@ -23,21 +23,26 @@ var DefaultAssetCounts = function DefaultAssetCounts(_ref) {
       trailer = assetCounts.trailer,
       driver = assetCounts.driver;
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: 'display-flex'
+    className: "display-flex"
   }, /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    icon: 'truck-baseline',
+    hideOnZero: true,
+    icon: "truck-baseline",
     value: truck
   }), /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    icon: 'trailer-baseline',
+    hideOnZero: true,
+    icon: "trailer-baseline",
     value: trailer
   }), /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    icon: 'bus-baseline',
+    hideOnZero: true,
+    icon: "bus-baseline",
     value: bus
   }), /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    icon: 'van-baseline',
+    hideOnZero: true,
+    icon: "van-baseline",
     value: van
   }), /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    icon: 'driver',
+    hideOnZero: true,
+    icon: "driver",
     value: driver
   }));
 };