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

@@ -71,7 +71,6 @@ var DatePicker = function DatePicker(props) {
 DatePicker.defaultProps = {
   closeOnSelect: true,
   dropup: false,
-  defaultValue: (0, _moment.default)(),
   locale: 'en-GB',
   onChange: function onChange() {},
   clearableInput: false,
@@ -82,7 +81,7 @@ DatePicker.propTypes = {
   className: _propTypes.default.string,
   closeOnSelect: _propTypes.default.bool,
   clearableInput: _propTypes.default.bool,
-  defaultValue: _propTypes.default.object,
+  initialValue: _propTypes.default.object,
   locale: _propTypes.default.string,
   onChange: _propTypes.default.func,
   dropup: _propTypes.default.bool,