@rio-cloud/rio-uikit 0.16.1-beta-7 → 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/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/AssetTree.js

@@ -21,8 +21,6 @@ var _head = _interopRequireDefault(require("lodash/fp/head"));
 
 var _isArray = _interopRequireDefault(require("lodash/fp/isArray"));
 
-var _deviceUtils = require("../../utils/deviceUtils");
-
 var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
 
 var _TreeSidebar = _interopRequireDefault(require("./TreeSidebar"));
@@ -112,7 +110,7 @@ var AssetTree = /*#__PURE__*/(0, _react.memo)(function (props) {
   (0, _react.useEffect)(function () {
     return setSidebarMode(getSidebarMode(fly));
   }, [fly]);
-  var classes = (0, _classnames.default)('AssetTree', className, !isOpen && 'closed', !isOpen && _deviceUtils.isMobile && 'width-0 border-none position-absolute', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
+  var classes = (0, _classnames.default)('AssetTree', className, !isOpen && 'closed', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
   var resizeLimitClasses = (0, _classnames.default)('AssetTreeResizeLimit', isResize && 'display-block');
   var resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
   var resizeLimitStyle = {
@@ -179,14 +177,13 @@ var AssetTree = /*#__PURE__*/(0, _react.memo)(function (props) {
     className: resizeLimitClasses,
     style: resizeLimitStyle
   }), /*#__PURE__*/_react.default.createElement("div", {
-    className: "AssetTreeContent"
+    className: 'AssetTreeContent'
   }, /*#__PURE__*/_react.default.createElement(_TreeSidebar.default, {
     onSelectCategory: handleSelectCategory,
     currentCategoryId: currentCategoryId,
-    onClick: handleToggleTreeContent,
-    isOpen: isOpen
+    onClick: handleToggleTreeContent
   }, (0, _isArray.default)(children) ? children : [children]), /*#__PURE__*/_react.default.createElement("div", {
-    className: "AssetTreeBody"
+    className: 'AssetTreeBody'
   }, useOffscreen ? renderTreesOffscreen(children, categoryId) : category)), resizable && isOpen && /*#__PURE__*/_react.default.createElement(_Resizer.default, {
     onResizeStart: handleResizeStart,
     onResize: handleResize,

package/lib/components/assetTree/Tree.js

@@ -57,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"));
@@ -86,15 +88,16 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 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) { (0, _defineProperty2.default)(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; }
 
 var SEARCH_DEBOUNCE = 100;
-var TYPE_TRUCK = 'truck';
-var TYPE_TRAILER = 'trailer';
-var TYPE_VAN = 'van';
-var TYPE_BUS = 'bus';
-var TYPE_DRIVER = 'driver';
 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);
 };
@@ -383,12 +386,13 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
       previousGroups.current = groups;
       var typeCounts = getAssetTypeCounts(items);
       dispatch(assetCounted(typeCounts));
-      dispatch(allCheckedChanged(checkAllSelected({
+      var allChecked = checkAllSelected({
         items: items,
         groups: groups,
         selectedItems: selectedItems,
         selectedGroups: selectedGroups
-      }, state.flatItems))); // Get the distinct asset types from the asset list that is passed into the component
+      }, 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)));
@@ -406,24 +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 () {
-    makeTree(groups, items);
-  }, [state.typeFilter]);
+    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);
@@ -685,7 +702,8 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     dispatch(typeFilterChanged((0, _toConsumableArray2.default)(currentTypeFilter)));
   };
 
-  var isFilterActive = !(0, _isEmpty.default)(state.typeFilter);
+  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;
@@ -707,46 +725,20 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
     isEnabled: hasMultiselect,
     isIndeterminate: isIndeterminate,
     onSelect: handeSelectAll
-  }), showSelectAll && hasMultiselect && showSummary && /*#__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'
-  }), /*#__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"
-  }, showSummary ? summary || /*#__PURE__*/_react.default.createElement(_TreeSummary.default, null, state.visibleTypeCounters.includes(TYPE_TRUCK) && /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    type: TYPE_TRUCK,
-    icon: "truck-baseline",
-    value: state.assetCounts.truck,
-    onClick: handleFilterByType,
-    isActive: state.typeFilter.includes(TYPE_TRUCK),
-    enableActivity: isFilterActive
-  }), state.visibleTypeCounters.includes(TYPE_TRAILER) && /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    type: TYPE_TRAILER,
-    icon: "trailer-baseline",
-    value: state.assetCounts.trailer,
-    onClick: handleFilterByType,
-    isActive: state.typeFilter.includes(TYPE_TRAILER),
-    enableActivity: isFilterActive
-  }), state.visibleTypeCounters.includes(TYPE_BUS) && /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    type: TYPE_BUS,
-    icon: "bus-baseline",
-    value: state.assetCounts.bus,
-    onClick: handleFilterByType,
-    isActive: state.typeFilter.includes(TYPE_BUS),
-    enableActivity: isFilterActive
-  }), state.visibleTypeCounters.includes(TYPE_VAN) && /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    type: TYPE_VAN,
-    icon: "van-baseline",
-    value: state.assetCounts.van,
-    onClick: handleFilterByType,
-    isActive: state.typeFilter.includes(TYPE_VAN),
-    enableActivity: isFilterActive
-  }), state.visibleTypeCounters.includes(TYPE_DRIVER) && /*#__PURE__*/_react.default.createElement(_TypeCounter.default, {
-    type: TYPE_DRIVER,
-    icon: TYPE_DRIVER,
-    value: state.assetCounts.driver,
-    onClick: handleFilterByType,
-    isActive: state.typeFilter.includes(TYPE_DRIVER),
-    enableActivity: isFilterActive
-  })) : null, /*#__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/TreeSidebar.js

@@ -19,7 +19,7 @@ var _OverlayTrigger = _interopRequireDefault(require("../overlay/OverlayTrigger"
 
 var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
 
-var _excluded = ["className", "onClick", "isOpen"];
+var _excluded = ["className", "onClick"];
 var ACTIVE_CLASS_NAME = 'active';
 var SELECTED_CLASS_NAME = 'selected';
 var LABEL_TOOLTIP_DELAY = 1500;
@@ -44,7 +44,7 @@ var TreeSidebarCategories = function TreeSidebarCategories(_ref) {
       onClick: handleSelectCategory,
       className: statusClassName
     }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "selection-bubble"
+      className: 'selection-bubble'
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "rioglyph ".concat(icon)
     })));
@@ -57,8 +57,8 @@ var TreeSidebarCategories = function TreeSidebarCategories(_ref) {
         placement: _Tooltip.default.RIGHT,
         delayShow: LABEL_TOOLTIP_DELAY,
         overlay: /*#__PURE__*/_react.default.createElement(_Tooltip.default, {
-          id: "tooltip",
-          width: "auto"
+          id: 'tooltip',
+          width: 'auto'
         }, tooltip)
       }, category);
     }
@@ -70,30 +70,19 @@ var TreeSidebarCategories = function TreeSidebarCategories(_ref) {
 var TreeSidebar = /*#__PURE__*/_react.default.memo(function (props) {
   var className = props.className,
       onClick = props.onClick,
-      isOpen = props.isOpen,
       remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var classes = (0, _classnames.default)('TreeSidebar', !isOpen && 'width-0', className);
-
-  if (!isOpen) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "TreeSidebarToggle position-absolute bottom-0 left--5 height-50 width-50 border rounded bg-lightest display-flex justify-content-center align-items-center",
-      onClick: onClick
-    }, /*#__PURE__*/_react.default.createElement("span", {
-      className: "rioglyph rioglyph-chevron-left"
-    }));
-  }
-
+  var classes = (0, _classnames.default)('TreeSidebar', className);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes
-  }, isOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("ul", {
-    className: "TreeSidebarNavigation",
+  }, /*#__PURE__*/_react.default.createElement("ul", {
+    className: 'TreeSidebarNavigation',
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement(TreeSidebarCategories, remainingProps)), /*#__PURE__*/_react.default.createElement("div", {
-    className: "TreeSidebarToggle",
+    className: 'TreeSidebarToggle',
     onClick: onClick
   }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "rioglyph rioglyph-chevron-left"
-  }))));
+    className: 'rioglyph rioglyph-chevron-left'
+  })));
 });
 
 TreeSidebar.displayName = 'TreeSidebar';
@@ -104,7 +93,6 @@ TreeSidebar.propTypes = {
   currentCategoryId: _propTypes.default.string,
   children: _propTypes.default.arrayOf(_propTypes.default.node),
   onClick: _propTypes.default.func.isRequired,
-  isOpen: _propTypes.default.bool,
   className: _propTypes.default.string
 };
 var _default = TreeSidebar;

package/lib/components/assetTree/TypeCounter.js

@@ -17,25 +17,23 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _excluded = ["icon", "value", "isActive", "enableActivity", "onClick", "type", "hideOnZero"];
+var _excluded = ["icon", "value", "isActive", "hasFilter", "enableActivity", "onClick", "type", "hideOnZero"];
 
 var TypeCounter = function TypeCounter(props) {
   var icon = props.icon,
       value = props.value,
       isActive = props.isActive,
+      hasFilter = props.hasFilter,
       enableActivity = props.enableActivity,
       onClick = props.onClick,
       type = props.type,
       hideOnZero = props.hideOnZero,
       remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var isClickable = onClick !== undefined;
-  var wrapperClassName = (0, _classnames.default)('TypeCounter', 'user-select-none margin-right-15', isClickable && 'cursor-pointer', enableActivity && !isActive && 'opacity-50');
+  var wrapperClassName = (0, _classnames.default)('TypeCounter', 'user-select-none margin-right-15', enableActivity ? 'cursor-pointer' : 'pointer-events-none', enableActivity && hasFilter && !isActive && 'opacity-50');
   var counterClassNames = (0, _classnames.default)('TreeLabelCount', 'margin-left-3', 'label label-condensed', isActive ? 'label-primary' : 'label-muted label-filled');
 
   var handleClick = function handleClick() {
-    if (isClickable) {
-      onClick(type);
-    }
+    return onClick(type);
   };
 
   if (hideOnZero && !value) {
@@ -58,7 +56,11 @@ TypeCounter.defaultProps = {
 TypeCounter.propTypes = {
   type: _propTypes.default.string,
   icon: _propTypes.default.string,
+  // Highlights the current active filter
   isActive: _propTypes.default.bool,
+  // Defined if there is a filter
+  hasFilter: _propTypes.default.bool,
+  // Allow the counter to be clickable
   enableActivity: _propTypes.default.bool,
   hideOnZero: _propTypes.default.bool,
   onClick: _propTypes.default.func,

package/lib/es/DeviceUtils.d.ts

@@ -5,5 +5,9 @@ declare module '@rio-cloud/rio-uikit/lib/es/DeviceUtils' {
     export function isMobileScreen(): boolean;
     export function inIframe(): boolean;
     export function toggleZoomOnMobile(): boolean;
-    export type MOBILE_SCREEN = number; 
+    export type MOBILE_SCREEN = number;
+    export type SCREEN_SM = number;
+    export type SCREEN_MD = number;
+    export type SCREEN_LG = number;
+    export type SCREEN_XL = number;
 }

package/lib/es/SubNavigation.d.ts

@@ -0,0 +1,5 @@
+declare module '@rio-cloud/rio-uikit/lib/es/SubNavigation' {
+    import React from 'react';
+    import { SubNavigationProps } from '../types';
+    export default class SubNavigation extends React.Component<SubNavigationProps> {}
+}

package/lib/es/SubNavigation.js

@@ -0,0 +1,15 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _SubNavigation2.default;
+  }
+});
+
+var _SubNavigation2 = _interopRequireDefault(require("../components/applicationLayout/SubNavigation"));

package/lib/es/deviceUtils.js

@@ -9,6 +9,30 @@ Object.defineProperty(exports, "MOBILE_SCREEN", {
     return _deviceUtils.MOBILE_SCREEN;
   }
 });
+Object.defineProperty(exports, "SCREEN_LG", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_LG;
+  }
+});
+Object.defineProperty(exports, "SCREEN_MD", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_MD;
+  }
+});
+Object.defineProperty(exports, "SCREEN_SM", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_SM;
+  }
+});
+Object.defineProperty(exports, "SCREEN_XL", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.SCREEN_XL;
+  }
+});
 Object.defineProperty(exports, "hasTouch", {
   enumerable: true,
   get: function get() {

package/lib/hooks/useClickOutside.js

@@ -7,6 +7,7 @@ exports.default = useClickOutside;
 
 var _react = require("react");
 
+/* eslint-disable prefer-arrow/prefer-arrow-functions */
 // eslint-disable-next-line max-len
 // Inspired from https://github.com/mantinedev/mantine/blob/master/src/mantine-hooks/src/use-click-outside/use-click-outside.ts
 function useClickOutside(callback) {
@@ -15,7 +16,7 @@ function useClickOutside(callback) {
   (0, _react.useEffect)(function () {
     var listener = function listener(event) {
       if (targetRef.current && !targetRef.current.contains(event.target)) {
-        callback();
+        callback(event);
       }
     };
 

package/lib/style/css/_exports/rio-website.less

@@ -195,6 +195,10 @@ body .module-content {
     background-size: cover;
   }
 
+  .SubmoduleNavigation .SubmoduleNavigation {
+    padding-left: 0;
+  }
+
   html.show-handheld-navigation & {
     position: fixed;
     top: 0;
@@ -222,6 +226,7 @@ body .module-content {
     }
 
     .SubmoduleNavigation {
+      border-bottom: none;
       display: block;
       margin: 50px 0;
       padding-left: 0;
@@ -329,6 +334,7 @@ body .module-content {
         @media (min-width: @screen-ls) {
           > .SubmoduleNavigation {
             max-height: calc(~"100vh - 100px");
+            height: auto;
             overflow: auto;
             -webkit-overflow-scrolling: touch;
           }

package/lib/style/css/_exports/vw-uikit.less

@@ -173,7 +173,7 @@
     display: none;
   }
 
-  .navbar-nav {
+  .nav {
     display: flex;
     justify-content: center !important;
 

package/lib/style/css/components/ApplicationHeader.less

@@ -1,14 +1,6 @@
-.ApplicationHeader .SubmoduleNavigation .submodule,
-.navbar .SubmoduleNavigation .submodule {
-  white-space: nowrap;
-}
-
 .ApplicationHeader {
   background-color: @color-white;
-  border-bottom: 1px solid @gray-light;
-  border-left: none;
-  border-right: none;
-  border-top: none;
+  border: none;
   display: flex;
   float: none !important;
   margin-bottom: 0;
@@ -64,7 +56,7 @@
     background-image: @navbar-brand-icon !important;
     background-size: cover;
     display: block;
-    height: @navbar-height-without-border;
+    height: @navbar-height;
     margin: 0;
     padding: 0;
     position: relative;
@@ -91,241 +83,6 @@
     }
   }
 
-  .navbar-nav {
-    float: none;
-    margin: 0;
-
-    > li {
-      float: none !important;
-
-      > a {
-        line-height: @navbar-height-without-border - (@navbar-padding-vertical * 2);
-        padding-bottom: @navbar-padding-vertical;
-        padding-top: @navbar-padding-vertical;
-      }
-    }
-
-    &:not(.navbar-right) {
-      > li {
-        &:empty {
-          display: none;
-        }
-
-        &:empty + .submodule,
-        &:first-child:not(:empty) {
-          margin-left: 15px;
-        }
-
-        > a {
-          background-color: transparent;
-          color: @gray;
-          cursor: pointer;
-          font-size: 14px;
-          font-weight: @font-medium;
-          margin: 0 15px;
-          padding: 15px 0;
-          text-transform: uppercase;
-          transition: all 100ms ease-in-out;
-          user-select: none;
-        }
-
-        &.disabled,
-        &:disabled {
-          > a {
-            color: @gray-light
-          }
-        }
-
-        &:not(.disabled):not(:disabled) {
-          > a.active,
-          &.active > a,
-          &:focus > a,
-          &:hover > a {
-            &:not(.disabled):not(:disabled) {
-              background-color: transparent;
-              box-shadow: inset 0 -3px 0 @color-black, 0 1px 0 @color-black;
-              color: @color-black;
-
-              &:after {
-                background-color: @color-black;
-                height: 3px;
-                width: 100%;
-                z-index: 1;
-              }
-            }
-          }
-        }
-
-        &.dropdown {
-          &.active > a,
-          &:hover > a {
-            box-shadow: none;
-          }
-
-          > .dropdown-menu {
-            border: none;
-          }
-        }
-      }
-    }
-  }
-
-  .ModuleNavigation {
-    border: none;
-    height: @navbar-height-without-border;
-    line-height: @navbar-height-without-border;
-    list-style: none;
-    margin-bottom: 0;
-    padding-left: 0;
-    position: relative;
-
-    // avoid floating content on mobile
-    max-width: calc(~'100% - @{navbar-height}');
-
-    // NOTE: enforce it with important so all services look similar
-    background-color: @color-white !important;
-    color: @color-black !important;
-
-    .dropdown {
-      width: 300px;
-
-      &.open {
-        background-color: inherit;
-
-        .ModuleNavigation-dropdown,
-        .dropdown-toggle {
-          &:after {
-            bottom: 0;
-            top: 0;
-          }
-        }
-      }
-    }
-
-    .ModuleNavigation-dropdown,
-    .dropdown-toggle {
-      align-items: center;
-      display: flex;
-      padding: 0;
-
-      &.inactive {
-        pointer-events: none;
-      }
-
-      // Style the separator between main dropdown and submodules
-      &:after {
-        background-color: @gray-lighter;
-        bottom: 15px;
-        content: '';
-        display: block;
-        position: absolute;
-        right: 0;
-        top: 15px;
-        transition: all 0.1s ease-in-out;
-        width: 3px;
-      }
-
-      &:first-child:not(:last-child) {
-        &:hover:after {
-          bottom: 0;
-          top: 0;
-        }
-      }
-
-      > span {
-        &:not(.caret) {
-          .ellipsis-1;
-          flex: 1 0 auto;
-          //max-width: @navbar-application-dropdown-width - @navbar-height;
-          padding-left: @navbar-padding-horizontal;
-        }
-
-        &.caret {
-          margin: 0;
-          text-align: center;
-          width: @navbar-height;
-        }
-      }
-    }
-
-    // Style for the main dropdown
-    > li > a,
-    > a {
-      background-color: transparent;
-      color: inherit;
-      font-size: 18px;
-      font-weight: @font-medium;
-      text-decoration: none;
-      text-transform: uppercase;
-    }
-
-    .dropdown-menu {
-      -webkit-overflow-scrolling: touch;
-      border: none;
-      border-radius: 0 0 @border-radius-default @border-radius-default;
-      max-height: ~'calc(100vh - @{navbar-height} - 20px)'; // --vh fallback
-      max-height: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height} - 20px)';
-      max-width: calc(~'100% - 3px');
-      width: 100%;
-      overflow-x: hidden;
-      overflow-y: auto;
-
-      > li > a {
-        color: @color-black;
-        font-size: 14px;
-        font-weight: @font-medium;
-        padding: 5px @navbar-padding-horizontal;
-        text-transform: uppercase;
-
-        &.inactive {
-          pointer-events: none;
-        }
-      }
-    }
-
-    &.hasModules,
-    &.hasModules > li > a {
-      cursor: pointer;
-    }
-
-    > li > a {
-      .ellipsis-1;
-      cursor: default;
-      height: 100%;
-      padding-left: @navbar-padding-horizontal;
-    }
-  }
-
-  .SubmoduleNavigation {
-    display: flex;
-    flex: 1 1 0;
-
-    .submodule {
-      white-space: nowrap;
-
-      &.offscreen {
-        opacity: 0;
-        position: absolute;
-      }
-    }
-
-    .CollapsedDropdown {
-      > .dropdown-menu {
-        left: auto;
-        right: 0;
-      }
-
-      > .dropdown-toggle {
-        margin: 0 !important;
-        padding: 15px 15px !important;
-
-        .rioglyph-option-horizontal {
-          font-size: 18px;
-        }
-      }
-    }
-  }
-
   .ApplicationActionBar {
     background-color: @color-white;
     cursor: auto;
@@ -436,3 +193,243 @@
     margin-bottom: 5px;
   }
 }
+
+.ModuleNavigation {
+  border-bottom: 1px solid @gray-light;
+  height: @navbar-height;
+  line-height: @navbar-height;
+  list-style: none;
+  margin-bottom: 0;
+  padding-left: 0;
+  position: relative;
+
+  // avoid floating content on mobile
+  max-width: calc(~'100% - @{navbar-height}');
+
+  // NOTE: enforce it with important so all services look similar
+  background-color: @color-white !important;
+  color: @color-black !important;
+
+  .dropdown {
+    width: 300px;
+
+    &.open {
+      background-color: inherit;
+
+      .ModuleNavigation-dropdown,
+      .dropdown-toggle {
+        &:after {
+          bottom: 0;
+          top: 0;
+        }
+      }
+    }
+  }
+
+  .ModuleNavigation-dropdown,
+  .dropdown-toggle {
+    align-items: center;
+    display: flex;
+    padding: 0;
+
+    &.inactive {
+      pointer-events: none;
+    }
+
+    // Style the separator between main dropdown and submodules
+    &:after {
+      background-color: @gray-lighter;
+      bottom: 15px;
+      content: '';
+      display: block;
+      position: absolute;
+      right: 0;
+      top: 15px;
+      transition: all 0.1s ease-in-out;
+      width: 3px;
+    }
+
+    &:first-child:not(:last-child) {
+      &:hover:after {
+        bottom: 0;
+        top: 0;
+      }
+    }
+
+    > span {
+      &:not(.caret) {
+        .ellipsis-1;
+        flex: 1 0 auto;
+        //max-width: @navbar-application-dropdown-width - @navbar-height;
+        padding-left: @navbar-padding-horizontal;
+      }
+
+      &.caret {
+        margin: 0;
+        text-align: center;
+        width: @navbar-height;
+      }
+    }
+  }
+
+  // Style for the main dropdown
+  > li > a,
+  > a {
+    background-color: transparent;
+    color: inherit;
+    font-size: 18px;
+    font-weight: @font-medium;
+    text-decoration: none;
+    text-transform: uppercase;
+  }
+
+  .dropdown-menu {
+    -webkit-overflow-scrolling: touch;
+    border: none;
+    border-radius: 0 0 @border-radius-default @border-radius-default;
+    max-height: ~'calc(100vh - @{navbar-height} - 20px)'; // --vh fallback
+    max-height: ~'calc(var(--vh, 1vh) * 100 - @{navbar-height} - 20px)';
+    max-width: calc(~'100% - 3px');
+    width: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+
+    > li > a {
+      color: @color-black;
+      font-size: 14px;
+      font-weight: @font-medium;
+      padding: 5px @navbar-padding-horizontal;
+      text-transform: uppercase;
+
+      &.inactive {
+        pointer-events: none;
+      }
+    }
+  }
+
+  &.hasModules,
+  &.hasModules > li > a {
+    cursor: pointer;
+  }
+
+  > li > a {
+    .ellipsis-1;
+    cursor: default;
+    height: 100%;
+    padding-left: @navbar-padding-horizontal;
+  }
+}
+
+.SubmoduleNavigation {
+  border-bottom: 1px solid @gray-light;
+  height: @navbar-height;
+  display: flex;
+  flex: 1 1 0;
+
+  .ApplicationLayoutBodyNavigation & {
+    .submodule:first-of-type > a {
+      margin-left: 0;
+    }
+
+    @media (max-width: @screen-xs-max) {
+      padding-left: @ApplicationLayoutBodyPadding*0.5;
+    }
+
+    @media (min-width: @screen-ls) {
+      padding-left: @ApplicationLayoutBodyPadding;
+    }
+  }
+
+  .ApplicationLayoutBodyNavigation.has-offset & {
+    @media (min-width: @screen-ls) {
+      padding-left: 380px;
+    }
+  }
+
+  .ApplicationHeader:not(.mobile) & {
+    padding-left: 15px;
+  }
+
+  > .submodule {
+    white-space: nowrap;
+
+    &:empty {
+      display: none;
+    }
+
+    > a {
+      background-color: transparent;
+      color: @gray;
+      cursor: pointer;
+      font-size: 14px;
+      margin: 0 15px;
+      padding: 15px 0;
+      transition: all 100ms ease-in-out;
+      user-select: none;
+
+      .ApplicationHeader & {
+        font-weight: @font-medium;
+        text-transform: uppercase;
+      }
+    }
+
+    &.disabled,
+    &:disabled {
+      > a {
+        color: @gray-light
+      }
+    }
+
+    &:not(.disabled):not(:disabled) {
+      > a.active,
+      &.active > a,
+      &:focus > a,
+      &:hover > a {
+        &:not(.disabled):not(:disabled) {
+          background-color: transparent;
+          box-shadow: inset 0 -4px 0 @color-black, 0 0px 0 @color-black;
+          color: @color-black;
+
+          &:after {
+            background-color: @color-black;
+            height: 3px;
+            width: 100%;
+            z-index: 1;
+          }
+        }
+      }
+    }
+
+    &.dropdown {
+      &.active > a,
+      &:hover > a {
+        box-shadow: none;
+      }
+
+      > .dropdown-menu {
+        border: none;
+      }
+    }
+
+    &.offscreen {
+      opacity: 0;
+      position: absolute;
+    }
+  }
+
+  .CollapsedDropdown {
+    > .dropdown-menu {
+      left: auto;
+      right: 0;
+    }
+
+    > .dropdown-toggle {
+      margin: 0 !important;
+      padding: 15px 15px !important;
+
+      .rioglyph-option-horizontal {
+        font-size: 18px;
+      }
+    }
+  }
+}

package/lib/style/css/components/ApplicationLayout.less

@@ -52,6 +52,7 @@
       height: @ApplicationLayoutBodyHeightWithoutFooterAndViewportFix;
     }
 
+    // TODO remove with v1.0 (downward compatibility) - remove when cleanup
     .ApplicationLayoutBodyNavigation {
       &:not(.unstyled) {
         align-items: center;
@@ -62,11 +63,11 @@
         // padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
       }
 
-      &:not(.header-has-no-application-menu) {
-        @media (min-width: @screen-lg) {
-          padding-left: 365px;
-        }
-      }
+      // &:not(.header-has-no-application-menu) {
+      //   @media (min-width: @screen-lg) {
+      //     padding-left: 365px;
+      //   }
+      // }
 
       .nav-pills {
         padding-left: @ApplicationLayoutBodyPadding*0.5;
@@ -98,6 +99,7 @@
         }
       }
     }
+    // END TODO
 
     body:not(.modal-open) & {
       -webkit-overflow-scrolling: touch;

package/lib/style/css/components/AssetTree.less

@@ -42,7 +42,7 @@
 
   &.closed {
     box-shadow: none !important;
-    width: 50px;
+    width: 50px !important;
 
     .TreeSidebarToggle {
       transform: rotate(180deg);

package/lib/types.ts

@@ -1737,6 +1737,11 @@ export interface SteppedProgressBarProps {
     variant?: 'circle' | 'rectangle' | 'roadsign';
 }
 
+export interface SubNavigationProps {
+    navItems?: ModulePropTypes[];
+    className?: string;
+}
+
 export interface SwitchProps {
     keyName?: string;
     onChange: (toggleState: boolean) => void;
@@ -2041,6 +2046,7 @@ export interface TypeCounterProps {
     type?: string;
     icon?: string;
     isActive?: boolean;
+    hasFilter?: boolean;
     enableActivity?: boolean;
     hideOnZero?: boolean;
     onClick?: (type: string) => void;
@@ -2052,7 +2058,7 @@ export interface TypeCounterProps {
 export type UseAfterMount = (callback: () => void, deps?: any[]) => void;
 
 export type UseClickOutside<T extends HTMLElement = any> = (
-    callback: () => void,
+    callback: (event: React.MouseEvent<HTMLButtonElement>) => void,
     events?: ['mousedown', 'touchstart']
 ) => React.MutableRefObject<T>;
 

package/lib/utils/deviceUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleZoomOnMobile = exports.isMobileScreen = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = exports.MOBILE_SCREEN = void 0;
+exports.toggleZoomOnMobile = exports.isMobileScreen = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = exports.SCREEN_XL = exports.SCREEN_SM = exports.SCREEN_MD = exports.SCREEN_LG = exports.MOBILE_SCREEN = void 0;
 
 // As "cssuseragent" is accessing the html dom object directly without checking whether it exists or not, we need to
 // use old shool require() to have a conditional import only when html really exists. This avoids issues when
@@ -40,6 +40,14 @@ var hasTouch = function hasTouch() {
 exports.hasTouch = hasTouch;
 var MOBILE_SCREEN = 480;
 exports.MOBILE_SCREEN = MOBILE_SCREEN;
+var SCREEN_SM = 768;
+exports.SCREEN_SM = SCREEN_SM;
+var SCREEN_MD = 992;
+exports.SCREEN_MD = SCREEN_MD;
+var SCREEN_LG = 1200;
+exports.SCREEN_LG = SCREEN_LG;
+var SCREEN_XL = 1700;
+exports.SCREEN_XL = SCREEN_XL;
 
 var isMobileScreen = function isMobileScreen() {
   return window.matchMedia("(max-width: ".concat(MOBILE_SCREEN, "px)")).matches;

package/lib/version.json

@@ -1,3 +1,3 @@
 {
-"version": "0.16.1-beta-7"
+"version": "0.16.1-beta-8"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.1-beta-7",
+    "version": "0.16.1-beta-8",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {