@rio-cloud/rio-uikit 0.16.1-beta-6 → 0.16.1-beta-7

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/ApplicationLayoutSidebar.js

@@ -16,8 +16,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var ApplicationLayoutSidebar = function ApplicationLayoutSidebar(_ref) {
   var className = _ref.className,
       children = _ref.children;
-  var classes = (0, _classnames.default)('ApplicationLayoutSidebar', className); // TODO: check for className "right" and inject prop "position={Sidebar.RIGHT}"
-
+  var classes = (0, _classnames.default)('ApplicationLayoutSidebar', className);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes
   }, children);

package/lib/components/assetTree/AssetTree.js

@@ -21,6 +21,8 @@ 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"));
@@ -110,7 +112,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', bordered && 'panel panel-default', sidebarMode === AssetTree.MODE_FLY ? 'fly' : 'fluid');
+  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 resizeLimitClasses = (0, _classnames.default)('AssetTreeResizeLimit', isResize && 'display-block');
   var resizeIndicatorPosition = maxWidth || window.innerWidth * 0.5;
   var resizeLimitStyle = {
@@ -177,13 +179,14 @@ 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
+    onClick: handleToggleTreeContent,
+    isOpen: isOpen
   }, (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

@@ -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"));
@@ -73,6 +75,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; }
@@ -82,6 +86,11 @@ 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);
@@ -113,6 +122,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 +238,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 +266,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 +294,7 @@ var treeReducer = function treeReducer(state, action) {
         assetCounts: action.payload
       });
 
-    case 'allChecked':
+    case 'allCheckedChanged':
       return _objectSpread(_objectSpread({}, state), {}, {
         allChecked: action.payload
       });
@@ -278,6 +315,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 +362,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 +381,22 @@ 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));
+      dispatch(allCheckedChanged(checkAllSelected({
         items: items,
         groups: groups,
         selectedItems: selectedItems,
         selectedGroups: selectedGroups
-      }, state.flatItems)));
+      }, state.flatItems))); // 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
@@ -349,6 +408,9 @@ var Tree = /*#__PURE__*/_react.default.memo(function (props) {
   (0, _react.useEffect)(function () {
     makeTree(groups, items);
   }, [showEmptyGroups]);
+  (0, _react.useEffect)(function () {
+    makeTree(groups, items);
+  }, [state.typeFilter]);
 
   var checkAllSelected = function checkAllSelected(updatedProps, flatItems) {
     var updatedItems = updatedProps.items,
@@ -397,7 +459,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 +497,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 +534,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 +563,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 +633,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 +648,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 +672,81 @@ 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 isFilterActive = !(0, _isEmpty.default)(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
+  }), 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", {
     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, 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, {
     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/TreeSidebar.js

@@ -19,7 +19,7 @@ var _OverlayTrigger = _interopRequireDefault(require("../overlay/OverlayTrigger"
 
 var _Tooltip = _interopRequireDefault(require("../tooltip/Tooltip"));
 
-var _excluded = ["className", "onClick"];
+var _excluded = ["className", "onClick", "isOpen"];
 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,19 +70,30 @@ 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', className);
+  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"
+    }));
+  }
+
   return /*#__PURE__*/_react.default.createElement("div", {
     className: classes
-  }, /*#__PURE__*/_react.default.createElement("ul", {
-    className: 'TreeSidebarNavigation',
+  }, isOpen && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__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';
@@ -93,6 +104,7 @@ 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/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
   }));
 };

package/lib/components/assetTree/TypeCounter.js

@@ -7,24 +7,61 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var TypeCounter = function TypeCounter(_ref) {
-  var icon = _ref.icon,
-      value = _ref.value;
-  return value ? /*#__PURE__*/_react.default.createElement("div", {
-    className: 'user-select-none margin-right-15'
-  }, /*#__PURE__*/_react.default.createElement("span", {
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["icon", "value", "isActive", "enableActivity", "onClick", "type", "hideOnZero"];
+
+var TypeCounter = function TypeCounter(props) {
+  var icon = props.icon,
+      value = props.value,
+      isActive = props.isActive,
+      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 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);
+    }
+  };
+
+  if (hideOnZero && !value) {
+    return null;
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({}, remainingProps, {
+    className: wrapperClassName,
+    onClick: handleClick
+  }), /*#__PURE__*/_react.default.createElement("span", {
     className: "rioglyph rioglyph-".concat(icon, " text-size-16")
   }), /*#__PURE__*/_react.default.createElement("span", {
-    className: 'TreeLabelCount margin-left-3 label label-muted label-filled label-condensed'
-  }, value)) : null;
+    className: counterClassNames
+  }, value || 0));
 };
 
+TypeCounter.defaultProps = {
+  hideOnZero: false
+};
 TypeCounter.propTypes = {
+  type: _propTypes.default.string,
   icon: _propTypes.default.string,
+  isActive: _propTypes.default.bool,
+  enableActivity: _propTypes.default.bool,
+  hideOnZero: _propTypes.default.bool,
+  onClick: _propTypes.default.func,
   value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node, _propTypes.default.number])
 };
 var _default = TypeCounter;

package/lib/components/navigation/AppNavigationBar.js

@@ -0,0 +1,64 @@
+"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.AppNavigationBar = 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 _noop = _interopRequireDefault(require("lodash/fp/noop"));
+
+var _excluded = ["className", "title", "right", "onNavigateBack"];
+
+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 AppNavigationBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+      title = props.title,
+      right = props.right,
+      onNavigateBack = props.onNavigateBack,
+      remainingProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+  var navigationClasses = (0, _classnames.default)('AppNavigationBar', 'width-100pct display-flex align-items-center justify-content-between height-45 user-select-none padding-x-10', className);
+  return /*#__PURE__*/_react.default.createElement("div", (0, _extends2.default)({
+    ref: ref
+  }, remainingProps, {
+    className: navigationClasses
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "display-flex align-items-center"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "width-30 text-size-20 text-color-darkest"
+  }, /*#__PURE__*/_react.default.createElement("span", {
+    className: "rioglyph rioglyph-arrow-left",
+    onClick: onNavigateBack
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "text-medium text-color-darker"
+  }, title)), /*#__PURE__*/_react.default.createElement("div", null, right));
+});
+exports.AppNavigationBar = AppNavigationBar;
+AppNavigationBar.defaultProps = {
+  onNavigateBack: _noop.default,
+  right: /*#__PURE__*/_react.default.createElement("span", null)
+};
+AppNavigationBar.propTypes = {
+  title: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  right: _propTypes.default.node,
+  onNavigateBack: _propTypes.default.func,
+  className: _propTypes.default.string
+};
+var _default = AppNavigationBar;
+exports.default = _default;

package/lib/components/sidebars/Sidebar.js

@@ -25,16 +25,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
+
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 
 var _head = _interopRequireDefault(require("lodash/fp/head"));
 
-var _framerMotion = require("framer-motion");
-
-var _Resizer = _interopRequireDefault(require("../resizer/Resizer"));
-
 var _addEventListener = _interopRequireDefault(require("../../utils/addEventListener"));
 
 var _ownerDocument = _interopRequireDefault(require("../../utils/ownerDocument"));
@@ -274,8 +272,7 @@ var Sidebar = /*#__PURE__*/function (_Component) {
           enableNavigationButtons = _this$props5.enableNavigationButtons,
           disableClose = _this$props5.disableClose,
           bodyRef = _this$props5.bodyRef,
-          headerButtons = _this$props5.headerButtons,
-          fly = _this$props5.fly;
+          headerButtons = _this$props5.headerButtons;
       var _this$state2 = this.state,
           width = _this$state2.width,
           isFullscreen = _this$state2.isFullscreen,
@@ -296,57 +293,10 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       } : {
         left: resizeIndicatorPosition
       };
-      var offscreenPos = isRight ? 1000 : -1000;
-      var pos = isRight ? width : width; // const initial = { opacity: 0 };
-      // if (isRight) {
-      //     initial.x = -1000;
-      // } else {
-      //     initial.x = -1000;
-      // }
-      // const contentAnimate = {};
-      // if (closed) {
-      //     if (isRight) {
-      //         // contentAnimate.x = 10000;
-      //         // contentAnimate.left = 0;
-      //     } else {
-      //         // contentAnimate.x = -1000;
-      //         contentAnimate.right = 0;
-      //     }
-      // } else {
-      //     if (isRight) {
-      //         contentAnimate.x = 0;
-      //     } else {
-      //         contentAnimate.x = 0;
-      //     }
-      //     contentAnimate.opacity = 1;
-      // }
-
-      var contentStyle = {
-        width: width,
-        top: 0,
-        position: 'absolute'
-      };
-
-      if (isRight) {
-        contentStyle.left = 0;
-      } else {
-        contentStyle.right = 0;
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
-        initial: {
-          width: closed ? 0 : width
-        },
-        animate: {
-          width: closed ? 0 : width
-        },
-        transition: {
-          duration: 2.2,
-          ease: 'easeInOut'
-        },
+      return /*#__PURE__*/_react.default.createElement("div", {
         className: classes,
         style: {
-          overflow: closed ? 'hidden' : 'auto'
+          width: width
         },
         ref: function ref(node) {
           return _this2.sidebarRef = node;
@@ -354,38 +304,36 @@ var Sidebar = /*#__PURE__*/function (_Component) {
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: resizeLimitClasses,
         style: resizeLimitStyle
-      }), /*#__PURE__*/_react.default.createElement(_framerMotion.motion.div, {
-        // animate={contentAnimate}
-        style: contentStyle,
-        className: "SidebarContent"
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: 'SidebarContent'
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: headerClassNames
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: titleClassNames
       }, title ? title : ''), /*#__PURE__*/_react.default.createElement("div", {
-        className: "SidebarButtons non-printable close"
+        className: 'SidebarButtons non-printable close'
       }, headerButtons, enableNavigationButtons && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: this.handlePrevContent
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: " rioglyph rioglyph-chevron-left"
+        className: ' rioglyph rioglyph-chevron-left'
       })), /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: this.handleNextContent
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: " rioglyph rioglyph-chevron-right"
+        className: ' rioglyph rioglyph-chevron-right'
       }))), enableFullscreenToggle && /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: this.handleFullscreenChange
       }, /*#__PURE__*/_react.default.createElement("span", {
         className: fullscreenIconClasses
       })), !disableClose && (headerButtons || enableNavigationButtons || enableFullscreenToggle) && /*#__PURE__*/_react.default.createElement("div", {
-        className: "SidebarButtons-spacer"
+        className: 'SidebarButtons-spacer'
       }), !disableClose && /*#__PURE__*/_react.default.createElement("button", {
-        className: "btn btn-muted btn-icon-only",
+        className: 'btn btn-muted btn-icon-only',
         onClick: onClose
       }, /*#__PURE__*/_react.default.createElement("span", {
-        className: "rioglyph rioglyph-remove"
+        className: 'rioglyph rioglyph-remove'
       })))), /*#__PURE__*/_react.default.createElement("div", {
         className: bodyClassNames,
         ref: bodyRef

package/lib/es/AppNavigationBar.d.ts

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

package/lib/es/AppNavigationBar.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 _AppNavigationBar2.default;
+  }
+});
+
+var _AppNavigationBar2 = _interopRequireDefault(require("../components/navigation/AppNavigationBar"));

package/lib/es/DeviceUtils.d.ts

@@ -2,6 +2,8 @@ declare module '@rio-cloud/rio-uikit/lib/es/DeviceUtils' {
     export function hasTouch(): boolean;
     export function isDesktop(): boolean;
     export function isMobile(): boolean;
+    export function isMobileScreen(): boolean;
     export function inIframe(): boolean;
     export function toggleZoomOnMobile(): boolean;
+    export type MOBILE_SCREEN = number; 
 }

package/lib/es/deviceUtils.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "MOBILE_SCREEN", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.MOBILE_SCREEN;
+  }
+});
 Object.defineProperty(exports, "hasTouch", {
   enumerable: true,
   get: function get() {
@@ -27,6 +33,12 @@ Object.defineProperty(exports, "isMobile", {
     return _deviceUtils.isMobile;
   }
 });
+Object.defineProperty(exports, "isMobileScreen", {
+  enumerable: true,
+  get: function get() {
+    return _deviceUtils.isMobileScreen;
+  }
+});
 Object.defineProperty(exports, "toggleZoomOnMobile", {
   enumerable: true,
   get: function get() {

package/lib/es/useResizeObserver.d.ts

@@ -0,0 +1,4 @@
+declare module '@rio-cloud/rio-uikit/lib/es/useResizeObserver' {
+    import { UseResizeObserver } from '../types';
+    export default UseResizeObserver;
+}

package/lib/es/useResizeObserver.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 _useResizeObserver2.default;
+  }
+});
+
+var _useResizeObserver2 = _interopRequireDefault(require("../hooks/useResizeObserver"));

package/lib/hooks/useResizeObserver.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = require("react");
+
+// inspired from https://tobbelindstrom.com/blog/resize-observer-hook/
+var useResizeObserver = function useResizeObserver() {
+  var _useState = (0, _react.useState)({}),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      observerEntry = _useState2[0],
+      setObserverEntry = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(null),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      node = _useState4[0],
+      setNode = _useState4[1];
+
+  var observer = (0, _react.useRef)(null);
+  var disconnect = (0, _react.useCallback)(function () {
+    var _observer$current;
+
+    return (_observer$current = observer.current) === null || _observer$current === void 0 ? void 0 : _observer$current.disconnect();
+  }, []);
+  var observe = (0, _react.useCallback)(function () {
+    observer.current = new ResizeObserver(function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
+          entry = _ref2[0];
+
+      return setObserverEntry(entry);
+    });
+
+    if (node) {
+      observer.current.observe(node);
+    }
+  }, [node]);
+  (0, _react.useLayoutEffect)(function () {
+    observe();
+    return function () {
+      return disconnect();
+    };
+  }, [disconnect, observe]);
+  return [setNode, observerEntry];
+};
+
+var _default = useResizeObserver;
+exports.default = _default;

package/lib/hooks/useWindowResize.js

@@ -5,19 +5,22 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useWindowResize;
+exports.default = void 0;
 
 var _react = require("react");
 
 var _throttle = _interopRequireDefault(require("lodash/fp/throttle"));
 
-function useWindowResize(onResizeCallback) {
+var useWindowResize = function useWindowResize(onResizeCallback) {
   var timeout = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 300;
   (0, _react.useEffect)(function () {
     var throttledCallback = (0, _throttle.default)(timeout, onResizeCallback);
-    window.addEventListener('resize', throttledCallback, false);
+    window.addEventListener('resize', throttledCallback);
     return function () {
-      return window.removeEventListener('resize', throttledCallback, true);
+      window.removeEventListener('resize', throttledCallback);
     };
   }, [onResizeCallback, timeout]);
-}
+};
+
+var _default = useWindowResize;
+exports.default = _default;

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

@@ -554,6 +554,29 @@ body .module-content {
             }
           }
 
+          &.btn-default {
+            .btn {
+              .button-variant(
+                ~'!important';
+                @btn-default-bg;
+                @btn-default-border;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                @btn-default-color;
+                darken(@btn-default-color, 17%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 12%);
+                darken(@btn-default-border, 25%);
+                darken(@btn-default-border, 25%);
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+                @btn-default-bg;
+              );
+            }
+          }
+
           &.btn-white {
             .btn {
               .button-variant(
@@ -1544,6 +1567,26 @@ body .module-content {
           }
         }
       }
+
+      &-always {
+        .section-layout {
+          padding-left: 0;
+          padding-right: 0;
+
+          .section-layout-container {
+            max-width: none;
+            padding-left: 0;
+            padding-right: 0;
+
+            .section-layout-container-row {
+              .section-content-container-col {
+                padding-left: 0;
+                padding-right: 0;
+              }
+            }
+          }
+        }
+      }
     }
 
     &-marketplace-details-panel {
@@ -1612,6 +1655,14 @@ body .module-content {
       }
     }
 
+    &-hide-background-on-mobile {
+      @media (max-width: @screen-ls) {
+        .section-wrapper-background-image {
+          display: none;
+        }
+      }
+    }
+
     &-overlay-light {
       .section-wrapper-background-image,
       .section-content-container-background-image {
@@ -1852,12 +1903,6 @@ blockquote {
     .anchor {
       margin-top: -50px;
     }
-
-    // .preset-rimless {
-    //   > .anchor {
-    //     margin-top: -50px;
-    //   }
-    // }
   }
 
   .ApplicationLayoutBody {

package/lib/style/css/animations/_imports.less

@@ -1,6 +1,7 @@
 @import (less) "collapse.less";
 @import (less) "fade.less";
 @import (less) "pinging.less";
+@import (less) "pulsing.less";
 @import (less) "rotate.less";
 @import (less) "scale.less";
 @import (less) "slide.less";

package/lib/style/css/animations/pulsing.less

@@ -0,0 +1,5 @@
+@keyframes pulsing {
+  50% {
+   opacity:.5
+  }
+ }

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

@@ -59,7 +59,7 @@
         border-bottom: 1px solid @gray-light;
         display: flex;
         justify-content: space-between;
-        padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
+        // padding: 0 @ApplicationLayoutBodyPadding*0.25 0 @ApplicationLayoutBodyPadding*0.5;
       }
 
       &:not(.header-has-no-application-menu) {
@@ -69,6 +69,8 @@
       }
 
       .nav-pills {
+        padding-left: @ApplicationLayoutBodyPadding*0.5;
+
         &:not(.nav-stacked) {
           box-shadow: none;
 

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

@@ -42,7 +42,7 @@
 
   &.closed {
     box-shadow: none !important;
-    width: 50px !important;
+    width: 50px;
 
     .TreeSidebarToggle {
       transform: rotate(180deg);
@@ -237,10 +237,6 @@
 
   .TreeHead {
     min-height: 50px;
-
-    .TreeSelectAll {
-      margin-right: 5px;
-    }
   }
 
   &Options {

package/lib/style/css/design/buttons.less

@@ -318,9 +318,12 @@
 
     &:before {
       .rioglyph;
+      animation-name: spinning;
+      animation-duration: 1s;
+      animation-iteration-count: infinite;
+      animation-timing-function: linear;
       content: "\e9c7";
       color: @brand-primary;
-      animation: spinning 1s linear infinite;
       font-size: 20px;
     }
 

package/lib/style/css/design/rioglyph.less

@@ -1,16 +1,5 @@
 @import (less) '../../fonts/rioglyph/rioglyph.less';
 
-@keyframes spinning {
-  from { transform: rotate(0deg) }
-  to   { transform: rotate(359deg) }
-}
-
-@keyframes pulse {
-  50% {
-   opacity:.5
-  }
- }
-
 .rioglyph {
   &.spinning:before {
     display: inline-block;
@@ -19,6 +8,6 @@
 
   &.pulsing:before {
     display: inline-block;
-    animation: pulse 2s cubic-bezier(.4,0,.6,1) infinite;
+    animation: pulsing 2s cubic-bezier(.4,0,.6,1) infinite;
   }
 }

package/lib/types.ts

@@ -57,6 +57,14 @@ export interface AnimatedNumberProps {
     className?: string;
 }
 
+export interface AppNavigationBarProps {
+    ref?: React.MutableRefObject<object>;
+    title?: string | React.ReactNode;
+    right?: React.ReactNode;
+    onNavigateBack?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+}
+
 export interface ApplicationHeaderProps {
     label?: React.ReactNode;
     homeRoute?: React.ReactNode;
@@ -73,6 +81,7 @@ export interface ApplicationHeaderProps {
 
 export interface ApplicationLayoutProps {
     className?: string;
+    layoutRef: React.MutableRefObject<object>;
 }
 
 export interface ApplicationLayoutHeaderProps {
@@ -2029,7 +2038,12 @@ export interface TreeSummaryProps {
 }
 
 export interface TypeCounterProps {
+    type?: string;
     icon?: string;
+    isActive?: boolean;
+    enableActivity?: boolean;
+    hideOnZero?: boolean;
+    onClick?: (type: string) => void;
     value?: string | React.ReactNode | number;
 }
 
@@ -2117,6 +2131,8 @@ export type UseOnScreen = (
 
 export type UseRenderCount = () => number;
 
+export type UseResizeObserver = () => [React.MutableRefObject<object>, ResizeObserverEntry];
+
 export type UseStateWithValidation = (validationFn: Function, initialValue: any) => [any, Function, boolean];
 
 export type UseLocalStorage = (key: string, defaultValue: any) => [any, Function, Function];

package/lib/utils/deviceUtils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleZoomOnMobile = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = void 0;
+exports.toggleZoomOnMobile = exports.isMobileScreen = exports.isMobile = exports.isDesktop = exports.inIframe = exports.hasTouch = 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
@@ -34,9 +34,18 @@ var hasTouch = function hasTouch() {
   }
 
   return false;
-};
+}; // Screen sizes
+
 
 exports.hasTouch = hasTouch;
+var MOBILE_SCREEN = 480;
+exports.MOBILE_SCREEN = MOBILE_SCREEN;
+
+var isMobileScreen = function isMobileScreen() {
+  return window.matchMedia("(max-width: ".concat(MOBILE_SCREEN, "px)")).matches;
+};
+
+exports.isMobileScreen = isMobileScreen;
 
 var isMobile = function isMobile() {
   return document && document.documentElement.classList.contains('ua-mobile');

package/lib/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rio-cloud/rio-uikit",
-    "version": "0.16.1-beta-6",
+    "version": "0.16.1-beta-7",
     "description": "The RIO UIKIT component library",
     "repository": "https://collaboration.msi.audi.com/stash/projects/RIOFRONT/repos/uikit-web/browse",
     "scripts": {
@@ -127,10 +127,11 @@
         "@dnd-kit/modifiers": "5.0.0",
         "@dnd-kit/sortable": "6.0.1",
         "@popperjs/core": "2.11.5",
+        "@types/resize-observer-browser": "^0.1.7",
         "classlist-polyfill": "1.2.0",
         "classnames": "2.3.1",
         "cssuseragent": "2.1.31",
-        "framer-motion": "^6.3.3",
+        "framer-motion": "4.1.17",
         "lodash": "4.17.21",
         "moment": "2.29.3",
         "natural-orderby": "2.0.3",
@@ -144,6 +145,7 @@
         "react-notifications": "1.7.3",
         "react-onclickoutside": "6.12.1",
         "react-popper": "2.3.0",
+        "react-responsive": "^9.0.0-beta.8",
         "react-transition-group": "4.4.2",
         "recharts": "2.1.9",
         "regenerator-runtime": "0.13.9",