@copart/ops-tool-kit 1.11.4-alpha.2 → 1.11.4

package/dist/ops-tool-kit.js

@@ -33,7 +33,7 @@ var ReactDOM__namespace = /*#__PURE__*/_interopNamespace(ReactDOM);
 var ReactDOM__default = /*#__PURE__*/_interopDefaultLegacy(ReactDOM);
 
 const name$r = "@copart/ops-tool-kit";
-const version$7 = "1.11.4-alpha.2";
+const version$7 = "1.11.4";
 const main$1 = "dist/ops-tool-kit.js";
 const style = "dist/ops-tool-kit.css";
 const files = [
@@ -34860,6 +34860,7 @@ var AppBar$1 = function AppBar(props) {
     showMihelpDot = props.showMihelpDot;
   var _useWindowSize = useWindowSize(),
     width = _useWindowSize.width;
+    _useWindowSize.height;
   var _useState19 = React.useState(0),
     _useState20 = _slicedToArray(_useState19, 2),
     count = _useState20[0],
@@ -34874,6 +34875,13 @@ var AppBar$1 = function AppBar(props) {
       setNotificationsVisible(false);
     }
   }, [mihelpVisible]);
+
+  // useEffect(()=>{
+  //   if(isCalloutVisible){
+  //     setViewPortHeight(height)
+  //   }
+  // },[isCalloutVisible])
+
   React.useEffect(function () {
     if (ideaNoteVisible) {
       setMihelpVisible(false);
@@ -35040,6 +35048,27 @@ var AppBar$1 = function AppBar(props) {
       setSettingsVisible(false);
     }
   };
+  var hasTouchSupport = function hasTouchSupport() {
+    return 'ontouchstart' in window || navigator.maxTouchPoints > 0;
+  };
+  var handleCallOutDismiss = function handleCallOutDismiss() {
+    // if(hasTouchSupport()){
+    //   setTimeout(() => {
+    //     let newViewportHeight = window.innerHeight
+    //     if (newViewportHeight < viewPortHeight) {
+    //       return
+    //     } else {
+    //       setCalloutVisible(false)
+    //     }
+    //   }, 300)
+    // } else {
+    //   setCalloutVisible(false)
+    // }
+
+    if (!hasTouchSupport()) {
+      setCalloutVisible(false);
+    }
+  };
   var stack = (_window$toolkitEnv3 = window.toolkitEnv) !== null && _window$toolkitEnv3 !== void 0 && _window$toolkitEnv3.STACK ? window.toolkitEnv.STACK : process.env.STACK;
   return /*#__PURE__*/React__default["default"].createElement("div", {
     "data-e2e": "cc-AppBar",
@@ -35109,9 +35138,7 @@ var AppBar$1 = function AppBar(props) {
     role: "dialog",
     gapSpace: 0,
     target: "#".concat(calloutTarget),
-    onDismiss: function onDismiss() {
-      return setCalloutVisible(false);
-    },
+    onDismiss: handleCallOutDismiss,
     isBeakVisible: false
   }, /*#__PURE__*/React__default["default"].createElement("div", null, !stack || stack === 'c' ? /*#__PURE__*/React__default["default"].createElement(SettingsView$1, {
     onSave: onSave
@@ -37053,6 +37080,9 @@ function startWebSocketConnection(updateNotifications, updateAllNotificationsLis
       console.log('WebSocket connection has been opened');
     };
     client.onmessage = function (message) {
+      if ((message === null || message === void 0 ? void 0 : message.data) === '_pong_' || (message === null || message === void 0 ? void 0 : message.data) === '_ping_') {
+        return;
+      }
       var notification = [];
       try {
         var _newNotification$;
@@ -37478,6 +37508,10 @@ var AppBar = function AppBar(_ref) {
     setFirebaseinitialized = _useState20[1];
   var listOfAllNotificationsRef = React.useRef(listOfAllNotifications);
   var socketRetryCountRef = React.useRef(0);
+  var _useState21 = React.useState(null),
+    _useState22 = _slicedToArray(_useState21, 2),
+    pingInterval = _useState22[0],
+    setPingInterval = _useState22[1];
   React.useEffect(function () {
     listOfAllNotificationsRef.current = listOfAllNotifications;
   }, [listOfAllNotifications]);
@@ -37606,7 +37640,13 @@ var AppBar = function AppBar(_ref) {
     if (socketRetryCountRef.current < 15) {
       socketRetryCountRef.current = socketRetryCountRef.current + 1;
       socketClient && socketClient.close();
-      setSocketClient(startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket));
+      clearTimeout(pingInterval);
+      var client = startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket);
+      var pingIntervalInSec = coreAppConfig.nchanPingIntervalInSec || 30;
+      setPingInterval(setInterval(function () {
+        client.send('_ping_');
+      }, pingIntervalInSec * 1000));
+      setSocketClient(client);
     }
   };
   var handleVisibilityChange = function handleVisibilityChange() {
@@ -37630,6 +37670,7 @@ var AppBar = function AppBar(_ref) {
     setListOfAllNotifications([]);
     setListOfAllFirebaseNotifications([]);
     socketClient && socketClient.close();
+    clearTimeout(pingInterval);
     if (coreAppConfig && coreAppConfig.tiles) {
       var currentApp = window.location.pathname === '/' ? 'Ops Home' : window.location.pathname;
       var currentTile = history.location.pathname !== '/login' && coreAppConfig.tiles.find(function (tile) {
@@ -37643,7 +37684,12 @@ var AppBar = function AppBar(_ref) {
         if (notificationsSource.includes('Nchan')) {
           fetchG2Notifications(updateNotifications, updateAllNotificationsList);
           if (!(window.navigator.userAgent.includes("Chrome") && window.location.href.includes("localhost"))) {
-            setSocketClient(startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket));
+            var client = startWebSocketConnection(updateNotifications, updateAllNotificationsList, reConnectSocket);
+            var pingIntervalInSec = coreAppConfig.nchanPingIntervalInSec || 30;
+            setPingInterval(setInterval(function () {
+              client.send('_ping_');
+            }, pingIntervalInSec * 1000));
+            setSocketClient(client);
           }
         }
         if (!firebaseInitialized && notificationsSource.includes('Firebase')) {
@@ -48330,7 +48376,7 @@ var formatNumber = function formatNumber(number) {
   return sign * Math.abs(number) + unitlist[unit];
 };
 
-var css_248z$2 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: absolute;\r\n  background: #3A4454;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  height: 100%;\r\n  color: #ffffff;\r\n  font-size: 14px;\r\n  z-index: 101;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts {\r\n  min-width: 100px;\r\n  max-width: 100px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\r\n  max-width: 500px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \r\n  display: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  display: flex;\r\n  width: 100%;\r\n  padding: 6px 12px 6px 12px;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled {\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\r\n  color: #323130;\r\n  background-color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\r\n  background-color: #73A6FF;\r\n  transition: background-color 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\r\n  flex: 1;\r\n  margin: 0 10px 0;\r\n  text-align: right;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  font-size: 14px;\r\n  /* width: 20px; */\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 0px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  margin-top: 2px;\r\n  font-weight: 100;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 2px 10px 0 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 0 5px 0 0;\r\n  font-weight: 600;\r\n  margin-left: 0px;\r\n  cursor: auto;\r\n  cursor: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  margin: 0;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding-left: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\r\n  display: flex;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor {\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 95%;\r\n  left: -13px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 13px;\r\n  margin-left: 1px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 100%;\r\n  margin-left: 1px;\r\n}";
+var css_248z$2 = ".utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  position: absolute;\r\n  background: #3A4454;\r\n  min-width: 50px;\r\n  max-width: 50px;\r\n  height: 100%;\r\n  color: #ffffff;\r\n  font-size: 14px;\r\n  z-index: 101;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts {\r\n  min-width: 100px;\r\n  max-width: 100px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover {\r\n  max-width: 500px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton{\r\n  min-width: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu {\r\n  flex: 1;\r\n  overflow-y: auto;\r\n  -ms-overflow-style: none;\r\n  scrollbar-width: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenu::-webkit-scrollbar { \r\n  display: none;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  display: flex;\r\n  width: 100%;\r\n  padding: 6px 12px 6px 12px;\r\n  border-radius: 5px;\r\n  cursor: pointer;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled {\r\n  cursor: default;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected {\r\n  color: #323130;\r\n  background-color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  margin-left: auto;\r\n  margin-right: 10px;\r\n  min-width: none;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--withCounts:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton, .utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: 70px;\r\n  text-align: right;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer.utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable:not(:hover) .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton {\r\n  min-width: auto;\r\n  text-align: auto;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu {\r\n  background-color: #73A6FF;\r\n  transition: background-color 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  margin-left: auto;\r\n  font-size: 12px;\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--selected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount {\r\n  flex: 1;\r\n  margin: 0 10px 0;\r\n  text-align: right;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  min-width: 20px;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  font-size: 14px;\r\n  /* width: 20px; */\r\n  color: #fff;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  color: #323130;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 0px;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton.utilities_ops-app-frame_NavigationBar_NavigationBar--showExpandIcons i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--expandButton i{\r\n  font-size: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 0;\r\n  overflow: hidden;\r\n  white-space: nowrap;\r\n  margin-top: 2px;\r\n  font-weight: 100;\r\n  transition: all 0.5s ease-in-out;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 2px 10px 0 10px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem.utilities_ops-app-frame_NavigationBar_NavigationBar--disabled .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  color: #A19F9D;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  max-width: 100%;\r\n  margin: 0 5px 0 0;\r\n  font-weight: 600;\r\n  margin-left: 0px;\r\n  cursor: auto;\r\n  cursor: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName {\r\n  margin: 0;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemIcon {\r\n  margin-right: 0px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding-left: 12px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 > .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemName > span {\r\n  display: inline;\r\n  display: initial;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel2 {\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 {\r\n  display: flex;\r\n  position: relative;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel3 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem {\r\n  padding: 6px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--statusColor {\r\n  position: absolute;\r\n  width: 10px;\r\n  height: 95%;\r\n  left: -13px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 13px;\r\n  margin-left: 1px;\r\n}\r\n\r\n.utilities_ops-app-frame_NavigationBar_NavigationBar--NavBarContainer:hover .utilities_ops-app-frame_NavigationBar_NavigationBar--NavMenuLevel1 .utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem .utilities_ops-app-frame_NavigationBar_NavigationBar--level1NavItem {\r\n  width: 100%;\r\n  margin-left: 1px;\r\n}";
 styleInject(css_248z$2);
 
 var _styleModuleImportMap$1 = {
@@ -48343,6 +48389,7 @@ var _styleModuleImportMap$1 = {
     "NavItem": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItem",
     "disabled": "utilities_ops-app-frame_NavigationBar_NavigationBar--disabled",
     "NavItemSelected": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemSelected",
+    "countsAvailable": "utilities_ops-app-frame_NavigationBar_NavigationBar--countsAvailable",
     "expandedMenu": "utilities_ops-app-frame_NavigationBar_NavigationBar--expandedMenu",
     "selected": "utilities_ops-app-frame_NavigationBar_NavigationBar--selected",
     "NavItemCount": "utilities_ops-app-frame_NavigationBar_NavigationBar--NavItemCount",
@@ -48497,7 +48544,7 @@ var NavigationBar = function NavigationBar(_ref2) {
     onMouseLeave: function onMouseLeave() {
       return setHover(false);
     },
-    className: _getClassName("NavBarContainer ".concat(activeSubmenu && withCounts ? 'withCounts' : ''), _styleModuleImportMap$1, {
+    className: _getClassName("NavBarContainer ".concat(activeSubmenu && withCounts ? 'withCounts' : '', " ").concat(getCounts && typeof getCounts === 'function' ? 'countsAvailable' : ''), _styleModuleImportMap$1, {
       "handleMissingStyleName": "warn"
     })
   }, isConfigValid ? /*#__PURE__*/React__default["default"].createElement(NavigationMenu, {
@@ -48855,7 +48902,8 @@ var AppFrame = function AppFrame(props) {
     setShowNavigationCounts: setShowNavigationCounts
   }) : null, /*#__PURE__*/React__default["default"].createElement("div", {
     style: {
-      marginLeft: props.showNavigation ? navigationWidth : '0px'
+      marginLeft: props.showNavigation ? navigationWidth : '0px',
+      transition: 'all 0.5s ease-in-out'
     }
   }, props.children))))));
 };