@capillarytech/blaze-ui 5.23.3-beta.1 → 5.23.3-beta.10

package/CapCollapsibleNavbar/index.js

@@ -1,101 +1,86 @@
-var _templateObject, _templateObject2, _templateObject3;
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
-/**
- *
- * CapCollapsibleNavbar
- *
- * Configuration driven collapsible navbar to navigate between routes of an app
- *
- */
-
-import { Collapse } from 'antd';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import PropTypes from 'prop-types';
-import React from 'react';
-import styled from 'styled-components';
-import dayjs from "../../utils/dayjs";
-import CapButton from "../CapButton";
-import CapColumn from "../CapColumn";
-import CapDivider from "../CapDivider";
-import CapMenu from "../CapMenu";
-import CapPopover from "../CapPopover";
-import CapRow from "../CapRow";
-import CapTooltip from "../CapTooltip";
-import { COLLAPSE, COLLAPSED, EXPAND, EXPANDED, FILLER, DIVIDER, CONFIG_DEFAULT_SELECTED_KEY, PARENT, CHILD, CLICKED, HOVERED, STATE, SCROLL, STATE_SELECTED, RESIZE, REPORT, NOT_FOUND, PARENT_VALUE, CREATE_NEW } from "./constants";
-import "./styles.scss";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-var chevronDown = require("./assets/chevron-down.svg");
-var chevronLeftBlue = require("./assets/chevron-left-blue.svg");
-var chevronLeft = require("./assets/chevron-left.svg");
-var chevronRight = require("./assets/chevron-right.svg");
-var leftNavAddBlack = require("./assets/left-nav-add-black.svg");
-var ChevronLeftIcon = styled.img(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: 24px;\n  width: 24px;\n"])));
-var LeftNavAddIcon = styled.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  height: 24px;\n  width: 24px;\n"])));
-var GenericNavIcon = styled.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 22px;\n  width: 22px;\n"])));
-var {
-  Panel
-} = Collapse;
-
-// const PANEL_HEIGHT_FACTOR = 3.64; // factor by which to divide screen height to get max height collapse panel
-
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { Collapse } from "antd";
+import get from "lodash/get";
+import isEmpty from "lodash/isEmpty";
+import PropTypes from "prop-types";
+import React from "react";
+import styled from "styled-components";
+import "../utils/dayjs.js";
+import CapButton from "../CapButton/index.js";
+import CapColumn from "../CapColumn/index.js";
+import CapDivider from "../CapDivider/index.js";
+import CapMenu from "../CapMenu/index.js";
+import CapPopover from "../CapPopover/index.js";
+import CapRow from "../CapRow/index.js";
+import CapTooltip from "../CapTooltip/index.js";
+import { NOT_FOUND, EXPAND, COLLAPSE, PARENT, CHILD, CONFIG_DEFAULT_SELECTED_KEY, FILLER, CREATE_NEW, STATE_SELECTED, STATE, EXPANDED, SCROLL, PARENT_VALUE, COLLAPSED, DIVIDER, REPORT, RESIZE, CLICKED, HOVERED } from "./constants.js";
+import './styles.css';/* empty css            */
+import dayjs from "dayjs";
+const chevronDown = require("./assets/chevron-down.svg");
+const chevronLeftBlue = require("./assets/chevron-left-blue.svg");
+const chevronLeft = require("./assets/chevron-left.svg");
+const chevronRight = require("./assets/chevron-right.svg");
+const leftNavAddBlack = require("./assets/left-nav-add-black.svg");
+const ChevronLeftIcon = styled.img`
+  height: 24px;
+  width: 24px;
+`;
+const LeftNavAddIcon = styled.img`
+  height: 24px;
+  width: 24px;
+`;
+const GenericNavIcon = styled.img`
+  height: 22px;
+  width: 22px;
+`;
+const { Panel } = Collapse;
 class CapCollapsibleNavbar extends React.Component {
-  constructor(_props) {
-    var _this;
-    super(_props);
-    _this = this;
+  constructor(props) {
+    super(props);
     this.getKeyAndSectionId = (eachState, selectedKey, sectionId) => {
-      var cfg = this.getClickedItemConfig(eachState);
-      var response = {
-        key: NOT_FOUND,
-        sectionId: NOT_FOUND
-      };
+      const cfg = this.getClickedItemConfig(eachState);
+      let response = { key: NOT_FOUND, sectionId: NOT_FOUND };
       if (!isEmpty(cfg.route)) {
         if (selectedKey.indexOf(cfg.route) > -1) {
           response.key = eachState.value;
           response.cfgKey = cfg.key;
           response.sectionId = sectionId;
         } else if (!isEmpty(eachState.children)) {
-          eachState.children.every(eachChild => {
-            var returnObj = this.getKeyAndSectionId(_extends({}, eachChild, {
-              parent: eachState
-            }), selectedKey, sectionId);
-            if (typeof returnObj === 'object' && returnObj.key !== NOT_FOUND) {
+          eachState.children.every((eachChild) => {
+            const returnObj = this.getKeyAndSectionId(
+              { ...eachChild, parent: eachState },
+              selectedKey,
+              sectionId
+            );
+            if (typeof returnObj === "object" && returnObj.key !== NOT_FOUND) {
               response = returnObj;
               return false;
             }
             return true;
           });
         } else {
-          response = {
-            key: NOT_FOUND,
-            sectionId: NOT_FOUND
-          };
+          response = { key: NOT_FOUND, sectionId: NOT_FOUND };
         }
       } else if (!isEmpty(eachState.children)) {
-        eachState.children.every(eachChild => {
-          var returnObj = this.getKeyAndSectionId(_extends({}, eachChild, {
-            parent: eachState
-          }), selectedKey, sectionId);
-          if (typeof returnObj === 'object' && returnObj.key !== NOT_FOUND) {
+        eachState.children.every((eachChild) => {
+          const returnObj = this.getKeyAndSectionId(
+            { ...eachChild, parent: eachState },
+            selectedKey,
+            sectionId
+          );
+          if (typeof returnObj === "object" && returnObj.key !== NOT_FOUND) {
             response = returnObj;
             return false;
           }
           return true;
         });
       } else {
-        response = {
-          key: NOT_FOUND,
-          sectionId: NOT_FOUND
-        };
+        response = { key: NOT_FOUND, sectionId: NOT_FOUND };
       }
       return response;
     };
     this.updateWindowDimensions = () => {
-      this.setState({
-        height: window.innerHeight
-      });
+      this.setState({ height: window.innerHeight });
     };
     this.handleCollapseChange = (key, sectionId, defaultActiveKeys, expansionType, newActiveKey, level, expansionLevelProp, hasChildren, childrenLength) => {
       this.props.handleCollapseChange({
@@ -103,12 +88,10 @@ class CapCollapsibleNavbar extends React.Component {
         type: !isEmpty(newActiveKey) ? EXPAND : COLLAPSE,
         level
       });
-      var screenAddOnHeight = Math.round((window.innerHeight - 768) / 100);
-      var variableMaxHeight = this.state.defaultEnabledHeight;
-      var {
-        expansionLevel
-      } = this.state;
-      var defaultKeys = _extends({}, defaultActiveKeys);
+      const screenAddOnHeight = Math.round((window.innerHeight - 768) / 100);
+      let variableMaxHeight = this.state.defaultEnabledHeight;
+      let { expansionLevel } = this.state;
+      const defaultKeys = { ...defaultActiveKeys };
       defaultKeys[sectionId] = key;
       if (expansionType === PARENT && sectionId !== 0) {
         switch (expansionLevelProp) {
@@ -116,9 +99,7 @@ class CapCollapsibleNavbar extends React.Component {
           case 2:
           case 3:
           case 4:
-            key === undefined ? (variableMaxHeight = this.state.defaultEnabledHeight, expansionLevel = 1) : (variableMaxHeight = (parseInt(variableMaxHeight) + (childrenLength <= 3 ? Math.round(41.6 * childrenLength) : 125)).toString(), expansionLevel = 2);
-            break;
-          default:
+            key === void 0 ? (variableMaxHeight = this.state.defaultEnabledHeight, expansionLevel = 1) : (variableMaxHeight = (parseInt(variableMaxHeight) + (childrenLength <= 3 ? Math.round(41.6 * childrenLength) : 125)).toString(), expansionLevel = 2);
             break;
         }
       }
@@ -128,7 +109,7 @@ class CapCollapsibleNavbar extends React.Component {
           case 2:
           case 3:
           case 4:
-            if (newActiveKey === undefined && level === 1) {
+            if (newActiveKey === void 0 && level === 1) {
               variableMaxHeight = variableMaxHeight = (parseInt(variableMaxHeight) + 125).toString();
               expansionLevel = 2;
             } else if (level === 1 && !hasChildren) {
@@ -140,7 +121,7 @@ class CapCollapsibleNavbar extends React.Component {
             } else if (level === 1 && hasChildren && childrenLength <= 3) {
               variableMaxHeight = variableMaxHeight = (parseInt(variableMaxHeight) + +Math.round(60 * childrenLength)).toString();
               expansionLevel = 3;
-            } else if (newActiveKey === undefined && level === 2) {
+            } else if (newActiveKey === void 0 && level === 2) {
               variableMaxHeight = variableMaxHeight = (parseInt(variableMaxHeight) + 210).toString();
               expansionLevel = 3;
             } else if (level === 2 && !hasChildren) {
@@ -151,8 +132,6 @@ class CapCollapsibleNavbar extends React.Component {
               expansionLevel = 4;
             }
             break;
-          default:
-            break;
         }
       }
       if (sectionId === 0 && expansionType === PARENT) {
@@ -173,12 +152,10 @@ class CapCollapsibleNavbar extends React.Component {
             expansionLevel = 4;
             variableMaxHeight = variableMaxHeight = (parseInt(variableMaxHeight) + 280 + 38 * screenAddOnHeight).toString();
             break;
-          default:
-            break;
         }
       }
       if (sectionId === 0 && expansionType === CHILD) {
-        Object.keys(defaultKeys).forEach(eachKey => {
+        Object.keys(defaultKeys).forEach((eachKey) => {
           if (parseInt(eachKey) !== sectionId) {
             defaultKeys[eachKey] = null;
           }
@@ -191,195 +168,168 @@ class CapCollapsibleNavbar extends React.Component {
             expansionLevel = 1;
             variableMaxHeight = this.state.defaultEnabledHeight;
             break;
-          default:
-            break;
         }
       }
-      this.setState({
-        defaultActiveKeys: defaultKeys,
-        activeKey: this.getActiveKeys(defaultKeys),
-        isPristine: false,
-        expansionLevel,
-        defaultMaxHeight: variableMaxHeight
-      }, this.triggerFillerResize);
+      this.setState(
+        {
+          defaultActiveKeys: defaultKeys,
+          activeKey: this.getActiveKeys(defaultKeys),
+          isPristine: false,
+          expansionLevel,
+          defaultMaxHeight: variableMaxHeight
+        },
+        this.triggerFillerResize
+      );
     };
     this.setCollapsedValue = (cfg, item, key) => {
-      key = "" + key + (!isEmpty(key) ? '.' : '') + item.value;
+      key = `${key}${!isEmpty(key) ? "." : ""}${item.value}`;
       if (!isEmpty(item.children)) {
         if (item.popover) {
           cfg[key] = true;
         }
-        item.children.forEach(i => this.setCollapsedValue(cfg, i, key));
+        item.children.forEach((i) => this.setCollapsedValue(cfg, i, key));
       }
       return cfg;
     };
     this.resetLowerLevelCollapse = () => {
-      var {
-        lowerLevelMenuCollapsed = {}
-      } = this.state;
-      Object.keys(lowerLevelMenuCollapsed).forEach(key => {
+      const { lowerLevelMenuCollapsed = {} } = this.state;
+      Object.keys(lowerLevelMenuCollapsed).forEach((key) => {
         lowerLevelMenuCollapsed[key] = true;
       });
       return {
         lowerLevelMenuCollapsed
       };
     };
-    this.setMenuHovered = value => this.setState(prevState => ({
-      menuHovered: value,
-      createNewClicked: value ? prevState.createNewClicked : false
-    }), this.triggerFillerResize);
-    this.toggleCreateNewClicked = () => this.setState(prevState => ({
+    this.setMenuHovered = (value) => this.setState(
+      (prevState) => ({
+        menuHovered: value,
+        createNewClicked: value ? prevState.createNewClicked : false
+      }),
+      this.triggerFillerResize
+    );
+    this.toggleCreateNewClicked = () => this.setState((prevState) => ({
       createNewClicked: !prevState.createNewClicked
     }));
-    this.toggleMenuCollapsed = () => this.setState(prevState => {
-      var newState = {
-        createNewClicked: false
-      };
-      if (!prevState.switcherClicked && prevState.menuHovered) {
-        newState.switcherClicked = true;
-        newState.menuCollapsed = false;
-      } else {
-        newState.switcherClicked = !prevState.switcherClicked;
-        newState.menuHovered = false;
-        newState.menuCollapsed = prevState.switcherClicked ? true : !prevState.menuCollapsed;
+    this.toggleMenuCollapsed = () => this.setState(
+      (prevState) => {
+        const newState = {
+          createNewClicked: false
+        };
+        if (!prevState.switcherClicked && prevState.menuHovered) {
+          newState.switcherClicked = true;
+          newState.menuCollapsed = false;
+        } else {
+          newState.switcherClicked = !prevState.switcherClicked;
+          newState.menuHovered = false;
+          newState.menuCollapsed = prevState.switcherClicked ? true : !prevState.menuCollapsed;
+        }
+        return newState;
+      },
+      () => {
+        this.resetLowerLevelCollapse();
+        this.triggerFillerResize();
+        this.props.switcherClicked(this.state.switcherClicked);
       }
-      return newState;
-    }, () => {
-      this.resetLowerLevelCollapse();
-      this.triggerFillerResize();
-      this.props.switcherClicked(this.state.switcherClicked);
-    });
-    this.setSwitcherHovered = value => this.setState({
-      switcherHovered: value
-    });
-    this.setCreateNewHovered = value => this.setState({
-      createNewHovered: value
+    );
+    this.setSwitcherHovered = (value) => this.setState({ switcherHovered: value });
+    this.setCreateNewHovered = (value) => this.setState({ createNewHovered: value });
+    this.setHoveredState = (key, value) => this.setState((prevState) => {
+      const { hoverConfig } = prevState;
+      hoverConfig[`${key}Hovered`] = value;
+      return { hoverConfig };
     });
-    this.setHoveredState = (key, value) => this.setState(prevState => {
-      var {
-        hoverConfig
-      } = prevState;
-      hoverConfig[key + "Hovered"] = value;
-      return {
-        hoverConfig
-      };
+    this.setPanelHoveredState = (key, sectionId, value) => this.setState((prevState) => {
+      const { panelHoverConfig } = prevState;
+      panelHoverConfig[`${sectionId}`][`${key}Hovered`] = value;
+      return { panelHoverConfig };
     });
-    this.setPanelHoveredState = (key, sectionId, value) => this.setState(prevState => {
-      var {
-        panelHoverConfig
-      } = prevState;
-      panelHoverConfig["" + sectionId][key + "Hovered"] = value;
-      return {
-        panelHoverConfig
-      };
-    });
-    this.toggleItemCollapsed = item => {
-      var {
-        key
-      } = this.getClickedItemConfig(item);
+    this.toggleItemCollapsed = (item) => {
+      const { key } = this.getClickedItemConfig(item);
       if (!isEmpty(key)) {
-        var menuKey = this.reverseKey(key);
-        this.setState(prevState => {
-          var {
-            lowerLevelMenuCollapsed
-          } = prevState;
+        const menuKey = this.reverseKey(key);
+        this.setState((prevState) => {
+          const { lowerLevelMenuCollapsed } = prevState;
           lowerLevelMenuCollapsed[menuKey] = !lowerLevelMenuCollapsed[menuKey];
-          return {
-            lowerLevelMenuCollapsed
-          };
+          return { lowerLevelMenuCollapsed };
         });
       }
     };
     this.isMenuCollapsed = () => {
-      var {
-        menuCollapsed,
-        menuHovered,
-        switcherClicked
-      } = this.state;
+      const { menuCollapsed, menuHovered, switcherClicked } = this.state;
       if (switcherClicked) {
         return menuCollapsed;
       }
       return !menuHovered;
     };
-    this.isNavItemSelected = item => {
-      var {
-        pathname
-      } = window.location;
+    this.isNavItemSelected = (item) => {
+      const { pathname } = window.location;
       return pathname.indexOf(item.value) > -1;
     };
-    this.isChildNavActive = function (item, key) {
-      if (key === void 0) {
-        key = '';
-      }
-      if (_this.state.isPristine && item.defaultExpanded) {
+    this.isChildNavActive = (item, key = "") => {
+      if (this.state.isPristine && item.defaultExpanded) {
         return true;
       }
       if (key.indexOf(item.value) > -1) {
         return true;
       }
-      var {
-        key: itemKey
-      } = _this.getClickedItemConfig(item);
-      if (_this.state.isPristine && itemKey === _this.state.selectedKey) {
+      const { key: itemKey } = this.getClickedItemConfig(item);
+      if (this.state.isPristine && itemKey === this.state.selectedKey) {
         return true;
       }
       if (!isEmpty(item.children)) {
-        return item.children.reduce((result, child) => result || _this.isChildNavActive(_extends({}, child, {
-          parent: item
-        }), key), false);
+        return item.children.reduce(
+          (result, child) => result || this.isChildNavActive({ ...child, parent: item }, key),
+          false
+        );
       }
       return false;
     };
-    this.getDefaultState = function (props, skipNavStatus) {
-      if (props === void 0) {
-        props = _this.props;
-      }
-      if (skipNavStatus === void 0) {
-        skipNavStatus = false;
-      }
-      var hoverConfig;
-      var panelHoverConfig;
-      var lowerLevelMenuCollapsed;
-      var defaultActiveKeys;
-      if (!isEmpty(props.config) && !isEmpty(props.config.sections)) {
+    this.getDefaultState = (props2 = this.props, skipNavStatus = false) => {
+      let hoverConfig;
+      let panelHoverConfig;
+      let lowerLevelMenuCollapsed;
+      let defaultActiveKeys;
+      if (!isEmpty(props2.config) && !isEmpty(props2.config.sections)) {
         hoverConfig = {};
         panelHoverConfig = {};
         lowerLevelMenuCollapsed = {};
         defaultActiveKeys = {};
-        props.config.sections.forEach((section, i) => {
-          defaultActiveKeys["" + i] = null;
-          hoverConfig["" + i] = section.states.reduce((cfg, s) => {
-            cfg[s.value + "Hovered"] = false;
+        props2.config.sections.forEach((section, i) => {
+          defaultActiveKeys[`${i}`] = null;
+          hoverConfig[`${i}`] = section.states.reduce((cfg, s) => {
+            cfg[`${s.value}Hovered`] = false;
             return cfg;
           }, {});
-          panelHoverConfig["" + i] = section.states.reduce((cfg, s) => {
-            cfg[s.value + "Hovered"] = false;
+          panelHoverConfig[`${i}`] = section.states.reduce((cfg, s) => {
+            cfg[`${s.value}Hovered`] = false;
             return cfg;
           }, {});
-          lowerLevelMenuCollapsed["" + i] = {};
-          section.states.forEach(item => _this.setCollapsedValue(lowerLevelMenuCollapsed["" + i], item, ''));
+          lowerLevelMenuCollapsed[`${i}`] = {};
+          section.states.forEach(
+            (item) => this.setCollapsedValue(lowerLevelMenuCollapsed[`${i}`], item, "")
+          );
         });
       }
-      var selectedKey = !skipNavStatus && get(_this.props, CONFIG_DEFAULT_SELECTED_KEY) || _this.getSelectedKey();
-      var defaultActiveKey = _this.getLastKey(selectedKey);
-      var noOfStates = 0;
-      if (!isEmpty(props.config) && !isEmpty(props.config.sections)) {
-        props.config.sections.forEach((section, i) => {
-          section.states.forEach(each => {
+      const selectedKey = !skipNavStatus && get(this.props, CONFIG_DEFAULT_SELECTED_KEY) || this.getSelectedKey();
+      const defaultActiveKey = this.getLastKey(selectedKey);
+      let noOfStates = 0;
+      if (!isEmpty(props2.config) && !isEmpty(props2.config.sections)) {
+        props2.config.sections.forEach((section, i) => {
+          section.states.forEach((each) => {
             if (each.defaultExpanded === true) {
-              defaultActiveKeys["" + i] = each.value;
+              defaultActiveKeys[`${i}`] = each.value;
             }
             if (each.value === defaultActiveKey) {
-              defaultActiveKeys["" + i] = defaultActiveKey;
+              defaultActiveKeys[`${i}`] = defaultActiveKey;
             }
             if (skipNavStatus) {
-              each.children && each.children.forEach(eachChildren => {
+              each.children && each.children.forEach((eachChildren) => {
                 if (eachChildren.value === defaultActiveKey) {
-                  defaultActiveKeys["" + i] = defaultActiveKey;
+                  defaultActiveKeys[`${i}`] = defaultActiveKey;
                 }
-                eachChildren.children && eachChildren.children.forEach(eachSubState => {
+                eachChildren.children && eachChildren.children.forEach((eachSubState) => {
                   if (eachSubState.value === defaultActiveKey) {
-                    defaultActiveKeys["" + i] = defaultActiveKey;
+                    defaultActiveKeys[`${i}`] = defaultActiveKey;
                   }
                 });
               });
@@ -388,11 +338,11 @@ class CapCollapsibleNavbar extends React.Component {
           });
         });
       }
-      var newState = {
+      const newState = {
         switcherHovered: false,
         menuHovered: false,
-        switcherClicked: props.navExpandedDefault,
-        menuCollapsed: !props.navExpandedDefault,
+        switcherClicked: props2.navExpandedDefault,
+        menuCollapsed: !props2.navExpandedDefault,
         createNewHovered: false,
         createNewClicked: false,
         hoverConfig,
@@ -401,11 +351,11 @@ class CapCollapsibleNavbar extends React.Component {
         selectedKey,
         defaultActiveKey,
         defaultActiveKeys,
-        defaultMaxHeight: (140 + (noOfStates - 1) * 50 + (props.displaySyncBanner === true ? 40 : 0)).toString(),
-        stateMaxheight: '36vh',
-        defaultEnabledHeight: (140 + (noOfStates - 1) * 50 + (props.displaySyncBanner === true ? 40 : 0)).toString(),
+        defaultMaxHeight: (140 + (noOfStates - 1) * 50 + (props2.displaySyncBanner === true ? 40 : 0)).toString(),
+        stateMaxheight: "36vh",
+        defaultEnabledHeight: (140 + (noOfStates - 1) * 50 + (props2.displaySyncBanner === true ? 40 : 0)).toString(),
         expansionLevel: 1,
-        activeKey: _this.getActiveKeys(defaultActiveKeys)
+        activeKey: this.getActiveKeys(defaultActiveKeys)
       };
       if (skipNavStatus) {
         delete newState.switcherClicked;
@@ -414,41 +364,32 @@ class CapCollapsibleNavbar extends React.Component {
       }
       return newState;
     };
-    this.getLastKey = key => {
-      var keyParts = !isEmpty(key) ? key.split('.') : [];
-      return isEmpty(keyParts) ? '' : keyParts.length === 3 ? keyParts[keyParts.length - 2] : keyParts.length === 2 ? keyParts[keyParts.length - 2] : keyParts[1];
+    this.getLastKey = (key) => {
+      const keyParts = !isEmpty(key) ? key.split(".") : [];
+      return isEmpty(keyParts) ? "" : keyParts.length === 3 ? keyParts[keyParts.length - 2] : keyParts.length === 2 ? keyParts[keyParts.length - 2] : keyParts[1];
     };
     this.getSelectedKey = () => {
-      var {
-        search = '',
-        pathname = ''
-      } = window.location;
-      var queryParts = search.split('query=');
+      const { search = "", pathname = "" } = window.location;
+      const queryParts = search.split("query=");
       if (!isEmpty(queryParts) && queryParts.length > 1) {
         return queryParts[1];
       }
-      var locationPaths = pathname.split('/');
-      return "/" + locationPaths.slice(3).join('/');
+      const locationPaths = pathname.split("/");
+      return `/${locationPaths.slice(3).join("/")}`;
     };
     this.getSelectedRouteKey = (route, value) => {
       if (Array.isArray(route)) {
-        if (route.some(r => window.location.pathname.indexOf(r) > -1)) {
+        if (route.some((r) => window.location.pathname.indexOf(r) > -1)) {
           return true;
         }
         return false;
       }
       return window.location.pathname.indexOf(route) > -1 || window.location.pathname.indexOf(value) > -1;
     };
-    this.getClickedItemConfig = function (item, key, route) {
-      if (key === void 0) {
-        key = '';
-      }
-      if (route === void 0) {
-        route = '';
-      }
-      key = "" + key + (!isEmpty(key) ? '.' : '') + item.value;
+    this.getClickedItemConfig = (item, key = "", route = "") => {
+      key = `${key}${!isEmpty(key) ? "." : ""}${item.value}`;
       if (!isEmpty(item.parent)) {
-        return _this.getClickedItemConfig(item.parent, key, isEmpty(route) ? item.route : route);
+        return this.getClickedItemConfig(item.parent, key, isEmpty(route) ? item.route : route);
       }
       if (isEmpty(route) && !isEmpty(item.route)) {
         return {
@@ -462,25 +403,26 @@ class CapCollapsibleNavbar extends React.Component {
       };
     };
     this.getFillerSize = () => {
-      var fillerSize = 0;
-      var isCollapsed = this.isMenuCollapsed();
-      var navElement = document.getElementById('cap-collapsible-navbar');
-      var bannerElement = document.getElementById('sync-details-banner');
+      let fillerSize = 0;
+      const isCollapsed = this.isMenuCollapsed();
+      const navElement = document.getElementById("cap-collapsible-navbar");
+      const bannerElement = document.getElementById("sync-details-banner");
       if (navElement) {
-        var totalHeight = navElement.clientHeight;
-        var contentHeight = 0;
+        const totalHeight = navElement.clientHeight;
+        let contentHeight = 0;
         if (isCollapsed) {
-          var typeHeightMap = {
+          const typeHeightMap = {
             divider: 16,
             filler: 0,
             state: 48
           };
-          contentHeight = get(this.props, 'config.sections', []).reduce((acc, state) => acc + typeHeightMap[state.type], 96);
+          contentHeight = get(this.props, "config.sections", []).reduce(
+            (acc, state) => acc + typeHeightMap[state.type],
+            96
+          );
         } else {
-          var {
-            children = []
-          } = navElement;
-          for (var i = 0; i < children.length; i++) {
+          const { children = [] } = navElement;
+          for (let i = 0; i < children.length; i++) {
             if (children[i].classList[0] !== FILLER) {
               contentHeight += children[i].clientHeight;
             }
@@ -494,26 +436,23 @@ class CapCollapsibleNavbar extends React.Component {
       return fillerSize;
     };
     this.triggerFillerResize = () => {
-      var isFillerPresent = get(this.props, 'config.states', []).some(item => item.type === FILLER);
+      const isFillerPresent = get(this.props, "config.states", []).some(
+        (item) => item.type === FILLER
+      );
       if (isFillerPresent) {
         setTimeout(() => {
-          this.setState({
-            stateLastUpdated: new Date().getTime()
-          });
+          this.setState({ stateLastUpdated: (/* @__PURE__ */ new Date()).getTime() });
         }, 175);
       }
     };
-    this.reverseKey = function (key) {
-      if (key === void 0) {
-        key = '';
-      }
-      var parts = key.split('.');
-      return parts.reverse().join('.');
+    this.reverseKey = (key = "") => {
+      const parts = key.split(".");
+      return parts.reverse().join(".");
     };
     this.leftNavClicked = (type, item) => {
-      var cfg = this.getClickedItemConfig(item, '');
+      const cfg = this.getClickedItemConfig(item, "");
       this.setState(this.getDefaultState(this.props, true), () => {
-        var defaultActiveKey = this.getLastKey(cfg.key);
+        const defaultActiveKey = this.getLastKey(cfg.key);
         this.setState({
           selectedKey: cfg.key,
           defaultActiveKey,
@@ -522,266 +461,255 @@ class CapCollapsibleNavbar extends React.Component {
         this.resetLowerLevelCollapse();
         if (!isEmpty(cfg.route)) {
           if (item.replace) {
-            this.props.history.push('/');
+            this.props.history.push("/");
             this.props.history.replace({
-              pathname: Array.isArray(cfg.route) ? '' : cfg.route,
-              search: "?query=" + cfg.key + "&time=" + dayjs().valueOf()
+              pathname: Array.isArray(cfg.route) ? "" : cfg.route,
+              search: `?query=${cfg.key}&time=${dayjs().valueOf()}`
             });
           } else {
             this.props.history.push({
-              pathname: Array.isArray(cfg.route) ? '' : cfg.route,
-              search: "?query=" + cfg.key
+              pathname: Array.isArray(cfg.route) ? "" : cfg.route,
+              search: `?query=${cfg.key}`
             });
           }
         }
-        this.props.navItemClicked(_extends({
-          type
-        }, cfg));
+        this.props.navItemClicked({ type, ...cfg });
         this.props.switcherClicked(this.state.switcherClicked);
       });
     };
-    this.renderCreateNewOptions = newStates => /*#__PURE__*/_jsx(CapMenu, {
-      className: "new-state",
-      children: newStates.map(state => /*#__PURE__*/_jsx(CapMenu.Item, {
+    this.renderCreateNewOptions = (newStates) => /* @__PURE__ */ jsx(CapMenu, { className: "new-state", children: newStates.map((state) => /* @__PURE__ */ jsx(
+      CapMenu.Item,
+      {
         className: "new-state-item",
         onClick: () => this.leftNavClicked(CREATE_NEW, state),
         children: state.label
-      }, state.value))
-    });
-    this.renderLeafItem = function (item, parent, isSelected, firstLevel, level) {
-      if (parent === void 0) {
-        parent = {};
-      }
-      if (isSelected === void 0) {
-        isSelected = false;
-      }
-      if (firstLevel === void 0) {
-        firstLevel = false;
-      }
-      var {
-        key
-      } = _this.getClickedItemConfig(item);
-      var isKeySelected = _this.state.selectedKey.indexOf(key) > -1;
-      if (isEmpty(_this.state.selectedKey)) {
-        isKeySelected = _this.getSelectedRouteKey(item.route, item.value);
-      }
-      var selected = firstLevel && isSelected || isSelected && isKeySelected;
-      return /*#__PURE__*/_jsx("div", {
-        "data-level": level,
-        className: "leaf-item data-level-" + level + " " + (firstLevel ? 'first-level' : '') + " " + (selected ? STATE_SELECTED : ''),
-        onClick: () => _this.leftNavClicked(STATE, _extends({}, item, {
-          parent
-        })),
-        children: /*#__PURE__*/_jsx("span", {
-          className: "text",
-          title: item.labelTooltip ? item.labelTooltip : item.label,
-          children: item.label
-        })
-      }, item.value);
+      },
+      state.value
+    )) });
+    this.renderLeafItem = (item, parent = {}, isSelected = false, firstLevel = false, level) => {
+      const { key } = this.getClickedItemConfig(item);
+      let isKeySelected = this.state.selectedKey.indexOf(key) > -1;
+      if (isEmpty(this.state.selectedKey)) {
+        isKeySelected = this.getSelectedRouteKey(item.route, item.value);
+      }
+      const selected = firstLevel && isSelected || isSelected && isKeySelected;
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          "data-level": level,
+          className: `leaf-item data-level-${level} ${firstLevel ? "first-level" : ""} ${selected ? STATE_SELECTED : ""}`,
+          onClick: () => this.leftNavClicked(STATE, { ...item, parent }),
+          children: /* @__PURE__ */ jsx("span", { className: "text", title: item.labelTooltip ? item.labelTooltip : item.label, children: item.label })
+        },
+        item.value
+      );
     };
-    this.renderCollapseItem = function (item, sectionId, isSelected, level) {
-      if (isSelected === void 0) {
-        isSelected = false;
-      }
+    this.renderCollapseItem = (item, sectionId, isSelected = false, level) => {
       if (item.popover) {
-        var {
-          key: _key
-        } = _this.getClickedItemConfig(item);
-        var _isKeySelected = _this.state.selectedKey.indexOf(_key) > -1;
-        if (isEmpty(_this.state.selectedKey)) {
-          _isKeySelected = _this.getSelectedRouteKey(item.route);
+        const { key: key2 } = this.getClickedItemConfig(item);
+        let isKeySelected2 = this.state.selectedKey.indexOf(key2) > -1;
+        if (isEmpty(this.state.selectedKey)) {
+          isKeySelected2 = this.getSelectedRouteKey(item.route);
         }
-        var menuKey = !isEmpty(_key) ? _this.reverseKey(_key) : '';
-        return /*#__PURE__*/_jsx(CapPopover, {
-          overlayClassName: "nav-popover low-level-menu",
-          popupAlign: {
-            offset: [-0.25, 0]
-          },
-          trigger: "hover",
-          visible: !_this.state.lowerLevelMenuCollapsed[menuKey],
-          placement: "rightTop",
-          onVisibleChange: () => _this.toggleItemCollapsed(item),
-          getPopupContainer: trigger => trigger.parentNode,
-          content: /*#__PURE__*/_jsx(_Fragment, {
-            children: item.children.map(child => {
-              var {
-                key: childKey
-              } = _this.getClickedItemConfig(_extends({}, child, {
+        const menuKey = !isEmpty(key2) ? this.reverseKey(key2) : "";
+        return /* @__PURE__ */ jsx(
+          CapPopover,
+          {
+            overlayClassName: "nav-popover low-level-menu",
+            popupAlign: { offset: [-0.25, 0] },
+            trigger: "hover",
+            visible: !this.state.lowerLevelMenuCollapsed[menuKey],
+            placement: "rightTop",
+            onVisibleChange: () => this.toggleItemCollapsed(item),
+            getPopupContainer: (trigger) => trigger.parentNode,
+            content: /* @__PURE__ */ jsx(Fragment, { children: item.children.map((child) => {
+              const { key: childKey } = this.getClickedItemConfig({
+                ...child,
                 parent: item
-              }));
-              var currentLevel = level + 1;
-              return /*#__PURE__*/_jsx("div", {
-                "data-level": currentLevel,
-                className: "leaf-item data-level-" + currentLevel + " " + (isSelected && _this.state.selectedKey.indexOf(childKey) > -1 ? STATE_SELECTED : ''),
-                onClick: () => _this.leftNavClicked(STATE, _extends({}, child, {
-                  parent: item
-                })),
-                children: /*#__PURE__*/_jsx("span", {
-                  className: "text",
-                  title: child.label,
-                  children: child.label
-                })
-              }, child.value);
-            })
-          }),
-          children: /*#__PURE__*/_jsxs("div", {
-            "data-level": level,
-            className: "leaf-item popover-trigger data-level-" + level + " " + (!_this.state.lowerLevelMenuCollapsed[menuKey] ? EXPANDED : '') + " " + (isSelected && _isKeySelected ? STATE_SELECTED : ''),
-            children: [/*#__PURE__*/_jsx("span", {
-              className: "text",
-              title: item.label,
-              children: item.label
-            }), /*#__PURE__*/_jsx(ChevronLeftIcon, {
-              src: chevronRight
-            })]
-          }, item.value)
-        });
-      }
-      var {
-        key
-      } = _this.getClickedItemConfig(item);
-      var isKeySelected = _this.state.selectedKey.indexOf(key) > -1;
-      if (isEmpty(_this.state.selectedKey)) {
-        isKeySelected = _this.getSelectedRouteKey(item.route);
-      }
-      var isTopLevel = isEmpty(item.parent) || level === 0;
-      return /*#__PURE__*/_jsx(Collapse, {
-        "data-level": level,
-        defaultActiveKey: [_this.state.defaultActiveKey],
-        activeKey: _this.isChildNavActive(item, _this.state.activeKey) ? item.value : null,
-        className: "data-level-" + level + " " + (isSelected && (isTopLevel && isEmpty(_this.state.selectedKey) || isKeySelected) ? STATE_SELECTED : ''),
-        bordered: false,
-        accordion: true,
-        onChange: newActiveKey => {
-          _this.handleCollapseChange(!isEmpty(newActiveKey) ? newActiveKey : get(item, PARENT_VALUE, undefined), sectionId, _this.state.defaultActiveKeys, item.type === STATE ? PARENT : CHILD, newActiveKey, level, _this.state.expansionLevel, !isEmpty(item.children), !isEmpty(item.children) ? item.children.length : 0);
-        },
-        expandIconPosition: "right",
-        expandIcon: _ref => {
-          var {
-            isActive
-          } = _ref;
-          return /*#__PURE__*/_jsx(ChevronLeftIcon, {
-            style: isActive ? {
-              transform: 'rotate(180deg)',
-              marginTop: '-12px'
-            } : {},
-            src: chevronDown
-          });
-        },
-        children: /*#__PURE__*/_jsx(Panel, {
-          header: /*#__PURE__*/_jsx("div", {
-            onMouseOver: () => isTopLevel && _this.setPanelHoveredState(item.value, sectionId, true),
-            onMouseOut: () => isTopLevel && _this.setPanelHoveredState(item.value, sectionId, false),
-            title: item.title,
-            children: item.label
-          }),
-          children: /*#__PURE__*/_jsx("div", {
-            style: sectionId === 0 && item.type === STATE ? {
-              maxHeight: "calc(100vh - " + (_this.state.defaultMaxHeight + "px") + ")",
-              height: "calc(100vh - " + (_this.state.defaultMaxHeight + "px") + ")",
-              overflowY: SCROLL
-            } : item.type === STATE && level <= 2 ? {
-              maxHeight: "" + _this.state.stateMaxheight,
-              overflowY: SCROLL
-            } : {},
-            onMouseOver: () => isTopLevel && _this.setPanelHoveredState(item.value, sectionId, true),
-            onMouseOut: () => isTopLevel && _this.setPanelHoveredState(item.value, sectionId, false),
-            children: !isEmpty(item.children) && item.children.map(child => !isEmpty(child.children) && child.children.length > 0 ? _this.renderCollapseItem(_extends({}, child, {
-              parent: item
-            }), sectionId, isSelected, level + 1) : _this.renderLeafItem(_extends({}, child, {
-              parent: item
-            }), item, isSelected, false, level + 1))
-          })
-        }, item.value)
-      });
+              });
+              const currentLevel = level + 1;
+              return /* @__PURE__ */ jsx(
+                "div",
+                {
+                  "data-level": currentLevel,
+                  className: `leaf-item data-level-${currentLevel} ${isSelected && this.state.selectedKey.indexOf(childKey) > -1 ? STATE_SELECTED : ""}`,
+                  onClick: () => this.leftNavClicked(STATE, { ...child, parent: item }),
+                  children: /* @__PURE__ */ jsx("span", { className: "text", title: child.label, children: child.label })
+                },
+                child.value
+              );
+            }) }),
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                "data-level": level,
+                className: `leaf-item popover-trigger data-level-${level} ${!this.state.lowerLevelMenuCollapsed[menuKey] ? EXPANDED : ""} ${isSelected && isKeySelected2 ? STATE_SELECTED : ""}`,
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "text", title: item.label, children: item.label }),
+                  /* @__PURE__ */ jsx(ChevronLeftIcon, { src: chevronRight })
+                ]
+              },
+              item.value
+            )
+          }
+        );
+      }
+      const { key } = this.getClickedItemConfig(item);
+      let isKeySelected = this.state.selectedKey.indexOf(key) > -1;
+      if (isEmpty(this.state.selectedKey)) {
+        isKeySelected = this.getSelectedRouteKey(item.route);
+      }
+      const isTopLevel = isEmpty(item.parent) || level === 0;
+      return /* @__PURE__ */ jsx(
+        Collapse,
+        {
+          "data-level": level,
+          defaultActiveKey: [this.state.defaultActiveKey],
+          activeKey: this.isChildNavActive(item, this.state.activeKey) ? item.value : null,
+          className: `data-level-${level} ${isSelected && (isTopLevel && isEmpty(this.state.selectedKey) || isKeySelected) ? STATE_SELECTED : ""}`,
+          bordered: false,
+          accordion: true,
+          onChange: (newActiveKey) => {
+            this.handleCollapseChange(
+              !isEmpty(newActiveKey) ? newActiveKey : get(item, PARENT_VALUE, void 0),
+              sectionId,
+              this.state.defaultActiveKeys,
+              item.type === STATE ? PARENT : CHILD,
+              newActiveKey,
+              level,
+              this.state.expansionLevel,
+              !isEmpty(item.children),
+              !isEmpty(item.children) ? item.children.length : 0
+            );
+          },
+          expandIconPosition: "right",
+          expandIcon: ({ isActive }) => /* @__PURE__ */ jsx(
+            ChevronLeftIcon,
+            {
+              style: isActive ? {
+                transform: "rotate(180deg)",
+                marginTop: "-12px"
+              } : {},
+              src: chevronDown
+            }
+          ),
+          children: /* @__PURE__ */ jsx(
+            Panel,
+            {
+              header: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  onMouseOver: () => isTopLevel && this.setPanelHoveredState(item.value, sectionId, true),
+                  onMouseOut: () => isTopLevel && this.setPanelHoveredState(item.value, sectionId, false),
+                  title: item.title,
+                  children: item.label
+                }
+              ),
+              children: /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: sectionId === 0 && item.type === STATE ? {
+                    maxHeight: `calc(100vh - ${`${this.state.defaultMaxHeight}px`})`,
+                    height: `calc(100vh - ${`${this.state.defaultMaxHeight}px`})`,
+                    overflowY: SCROLL
+                  } : item.type === STATE && level <= 2 ? {
+                    maxHeight: `${this.state.stateMaxheight}`,
+                    overflowY: SCROLL
+                  } : {},
+                  onMouseOver: () => isTopLevel && this.setPanelHoveredState(item.value, sectionId, true),
+                  onMouseOut: () => isTopLevel && this.setPanelHoveredState(item.value, sectionId, false),
+                  children: !isEmpty(item.children) && item.children.map(
+                    (child) => !isEmpty(child.children) && child.children.length > 0 ? this.renderCollapseItem(
+                      { ...child, parent: item },
+                      sectionId,
+                      isSelected,
+                      level + 1
+                    ) : this.renderLeafItem(
+                      { ...child, parent: item },
+                      item,
+                      isSelected,
+                      false,
+                      level + 1
+                    )
+                  )
+                }
+              )
+            },
+            item.value
+          )
+        }
+      );
     };
-    this.renderNavItem = function (item, sectionId, level) {
-      if (level === void 0) {
-        level = 0;
-      }
-      var {
-        defaultIcon,
-        stateLastUpdated
-      } = _this.state;
-      var isCollapsed = _this.isMenuCollapsed();
+    this.renderNavItem = (item, sectionId, level = 0) => {
+      const { defaultIcon, stateLastUpdated } = this.state;
+      const isCollapsed = this.isMenuCollapsed();
       if (item.type === FILLER) {
-        return /*#__PURE__*/_jsx("div", {
-          className: "filler " + (isCollapsed ? COLLAPSED : EXPANDED),
-          style: {
-            height: _this.getFillerSize() + "px"
-          }
-        }, stateLastUpdated);
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `filler ${isCollapsed ? COLLAPSED : EXPANDED}`,
+            style: { height: `${this.getFillerSize()}px` }
+          },
+          stateLastUpdated
+        );
       }
       if (item.type === DIVIDER) {
-        return /*#__PURE__*/_jsxs(CapRow, {
-          className: "divider",
-          children: [/*#__PURE__*/_jsx(CapColumn, {
+        return /* @__PURE__ */ jsxs(CapRow, { className: "divider", children: [
+          /* @__PURE__ */ jsx(CapColumn, { span: isCollapsed ? 24 : 3, className: "icon-column" }),
+          /* @__PURE__ */ jsx(CapColumn, { span: 21, className: `menu-item ${isCollapsed ? COLLAPSED : EXPANDED}`, children: /* @__PURE__ */ jsx(CapDivider, {}) })
+        ] });
+      }
+      const isSelected = this.isNavItemSelected(item) || this.isChildNavActive(item, this.state.activeKey);
+      const { key } = this.getClickedItemConfig(item);
+      let isKeySelected = this.state.selectedKey.indexOf(key) > -1;
+      if (isEmpty(this.state.selectedKey)) {
+        isKeySelected = this.getSelectedRouteKey(item.route);
+      }
+      const isTopLevel = isEmpty(item.parent) || level === 0;
+      const itemSelected = isSelected && (isTopLevel && isEmpty(this.state.selectedKey) || isKeySelected);
+      return /* @__PURE__ */ jsxs(CapRow, { span: 24, children: [
+        /* @__PURE__ */ jsxs(
+          CapColumn,
+          {
             span: isCollapsed ? 24 : 3,
-            className: "icon-column"
-          }), /*#__PURE__*/_jsx(CapColumn, {
-            span: 21,
-            className: "menu-item " + (isCollapsed ? COLLAPSED : EXPANDED),
-            children: /*#__PURE__*/_jsx(CapDivider, {})
-          })]
-        });
-      }
-      var isSelected = _this.isNavItemSelected(item) || _this.isChildNavActive(item, _this.state.activeKey);
-      var {
-        key
-      } = _this.getClickedItemConfig(item);
-      var isKeySelected = _this.state.selectedKey.indexOf(key) > -1;
-      if (isEmpty(_this.state.selectedKey)) {
-        isKeySelected = _this.getSelectedRouteKey(item.route);
-      }
-      var isTopLevel = isEmpty(item.parent) || level === 0;
-      var itemSelected = isSelected && (isTopLevel && isEmpty(_this.state.selectedKey) || isKeySelected);
-      return /*#__PURE__*/_jsxs(CapRow, {
-        span: 24,
-        children: [/*#__PURE__*/_jsxs(CapColumn, {
-          span: isCollapsed ? 24 : 3,
-          className: "icon-column",
-          style: sectionId === 0 && item.type === STATE ? _this.state.menuCollapsed === true && _this.state.menuHovered === false ? {
-            maxHeight: "calc(100vh - " + (_this.state.defaultEnabledHeight - 50 + "px") + ")",
-            height: "calc(100vh - " + (_this.state.defaultEnabledHeight - 50 + "px") + ")"
-          } : {
-            maxHeight: "calc(100vh - " + (_this.state.defaultMaxHeight - 50 + "px") + ")",
-            height: "calc(100vh - " + (_this.state.defaultMaxHeight - 50 + "px") + ")"
-          } : {},
-          children: [/*#__PURE__*/_jsx("div", {
-            className: "icon-container " + (itemSelected ? STATE_SELECTED : ''),
-            children: /*#__PURE__*/_jsx(GenericNavIcon, {
-              style: {
-                height: '20px',
-                width: '20px'
-              },
-              src: require("./assets/" + (item.icon || defaultIcon) + "-black.svg"),
-              alt: (item.icon || defaultIcon) + "-black"
-            })
-          }), sectionId === level && /*#__PURE__*/_jsx("div", {
-            className: "line"
-          })]
-        }, item.value), /*#__PURE__*/_jsxs(CapColumn, {
-          span: 21,
-          className: "menu-item " + (isCollapsed ? COLLAPSED : EXPANDED),
-          children: [!isEmpty(item.children) && item.children.length > 0 ? _this.renderCollapseItem(item, sectionId, isSelected, level) : _this.renderLeafItem(item, {}, isSelected, true, level), sectionId === level && /*#__PURE__*/_jsx("div", {
-            className: "line"
-          })]
-        })]
-      });
+            className: "icon-column",
+            style: sectionId === 0 && item.type === STATE ? this.state.menuCollapsed === true && this.state.menuHovered === false ? {
+              maxHeight: `calc(100vh - ${`${this.state.defaultEnabledHeight - 50}px`})`,
+              height: `calc(100vh - ${`${this.state.defaultEnabledHeight - 50}px`})`
+            } : {
+              maxHeight: `calc(100vh - ${`${this.state.defaultMaxHeight - 50}px`})`,
+              height: `calc(100vh - ${`${this.state.defaultMaxHeight - 50}px`})`
+            } : {},
+            children: [
+              /* @__PURE__ */ jsx("div", { className: `icon-container ${itemSelected ? STATE_SELECTED : ""}`, children: /* @__PURE__ */ jsx(
+                GenericNavIcon,
+                {
+                  style: { height: "20px", width: "20px" },
+                  src: require(`./assets/${item.icon || defaultIcon}-black.svg`),
+                  alt: `${item.icon || defaultIcon}-black`
+                }
+              ) }),
+              sectionId === level && /* @__PURE__ */ jsx("div", { className: "line" })
+            ]
+          },
+          item.value
+        ),
+        /* @__PURE__ */ jsxs(CapColumn, { span: 21, className: `menu-item ${isCollapsed ? COLLAPSED : EXPANDED}`, children: [
+          !isEmpty(item.children) && item.children.length > 0 ? this.renderCollapseItem(item, sectionId, isSelected, level) : this.renderLeafItem(item, {}, isSelected, true, level),
+          sectionId === level && /* @__PURE__ */ jsx("div", { className: "line" })
+        ] })
+      ] });
     };
     this.renderSection = (section, i) => {
-      var {
-        states = []
-      } = section;
-      return /*#__PURE__*/_jsx(_Fragment, {
-        children: !isEmpty(states) && states.map(item => this.renderNavItem(item, i, 0))
-      });
+      const { states = [] } = section;
+      return /* @__PURE__ */ jsx(Fragment, { children: !isEmpty(states) && states.map((item) => this.renderNavItem(item, i, 0)) });
     };
-    this.state = _extends({
+    this.state = {
       defaultIcon: REPORT,
       height: 0,
-      expansionLevel: 1
-    }, this.getDefaultState(_props));
+      expansionLevel: 1,
+      ...this.getDefaultState(props)
+    };
   }
   componentDidMount() {
     this.updateWindowDimensions();
@@ -792,28 +720,27 @@ class CapCollapsibleNavbar extends React.Component {
     if (nextProps.displaySyncBanner !== this.props.displaySyncBanner) {
       this.triggerFillerResize();
     }
-    var {
-      search = ''
-    } = window.location;
-    var queryParts = search.split('query=');
+    const { search = "" } = window.location;
+    const queryParts = search.split("query=");
     if (nextProps.displaySyncBanner !== this.props.displaySyncBanner && queryParts.length <= 1) {
       this.setState(this.getDefaultState(nextProps, true));
     }
-    var selectedKey = this.getSelectedKey();
-    var defaultActiveKey = this.getLastKey(selectedKey);
+    const selectedKey = this.getSelectedKey();
+    const defaultActiveKey = this.getLastKey(selectedKey);
     if (queryParts.length > 1) {
-      this.setState(this.getDefaultState(nextProps, true), () => this.getInit(this.state.defaultActiveKeys, defaultActiveKey, nextProps));
+      this.setState(
+        this.getDefaultState(nextProps, true),
+        () => this.getInit(this.state.defaultActiveKeys, defaultActiveKey, nextProps)
+      );
     } else if (queryParts.length === 1) {
-      var res = {};
-      var {
-        defaultActiveKeysObj = {}
-      } = this.state;
+      const res = {};
+      const { defaultActiveKeysObj = {} } = this.state;
       if (!isEmpty(this.props.config) && !isEmpty(this.props.config.sections)) {
-        var defaultSection;
-        var defaultKey = get(this.props, CONFIG_DEFAULT_SELECTED_KEY);
+        let defaultSection;
+        const defaultKey = get(this.props, CONFIG_DEFAULT_SELECTED_KEY);
         if (!isEmpty(defaultKey)) {
           this.props.config.sections.every((eachSection, _i) => {
-            eachSection.states.every(eachState => {
+            eachSection.states.every((eachState) => {
               if (defaultKey.indexOf(eachState.value) > -1) {
                 defaultSection = eachState.value;
               }
@@ -824,9 +751,9 @@ class CapCollapsibleNavbar extends React.Component {
         }
         this.props.config.sections.every((eachSection, sectionNo) => {
           defaultActiveKeysObj[sectionNo] = defaultSection;
-          eachSection.states.every(eachState => {
-            var returnObj = this.getKeyAndSectionId(eachState, selectedKey, sectionNo);
-            if (typeof returnObj === 'object' && returnObj.key !== NOT_FOUND) {
+          eachSection.states.every((eachState) => {
+            const returnObj = this.getKeyAndSectionId(eachState, selectedKey, sectionNo);
+            if (typeof returnObj === "object" && returnObj.key !== NOT_FOUND) {
               defaultActiveKeysObj[sectionNo] = returnObj.key;
               res.key = returnObj.key;
               res.cfgKey = returnObj.cfgKey;
@@ -839,44 +766,84 @@ class CapCollapsibleNavbar extends React.Component {
         });
       }
       if (!isEmpty(res)) {
-        this.setState({
-          activeKey: [res.key],
-          defaultActiveKeys: defaultActiveKeysObj,
-          selectedKey: res.cfgKey,
-          defaultActiveKey: res.key
-        }, () => {
-          this.getInit(this.state.defaultActiveKeys, res.key, nextProps);
-        });
+        this.setState(
+          {
+            activeKey: [res.key],
+            defaultActiveKeys: defaultActiveKeysObj,
+            selectedKey: res.cfgKey,
+            defaultActiveKey: res.key
+          },
+          () => {
+            this.getInit(this.state.defaultActiveKeys, res.key, nextProps);
+          }
+        );
       }
     }
   }
   getActiveKeys(defaultActiveKeys) {
-    return Object.values(defaultActiveKeys || {}).filter(e => !isEmpty(e));
+    return Object.values(defaultActiveKeys || {}).filter((e) => !isEmpty(e));
   }
   componentWillUnmount() {
     window.removeEventListener(RESIZE, this.updateWindowDimensions);
   }
-  getInit(defaultActiveKeys, defaultActiveKey, props) {
-    if (defaultActiveKeys === void 0) {
-      defaultActiveKeys = {};
-    }
-    if (Object.values(defaultActiveKeys).filter(e => !isEmpty(e)).length !== 0) {
+  getInit(defaultActiveKeys = {}, defaultActiveKey, props) {
+    if (Object.values(defaultActiveKeys).filter((e) => !isEmpty(e)).length !== 0) {
       props.config.sections.forEach((eachSection, sectionId) => {
-        eachSection.states.forEach(eachState => {
+        eachSection.states.forEach((eachState) => {
           if (eachState.value === defaultActiveKey) {
-            this.handleCollapseChange(!isEmpty(defaultActiveKey) ? defaultActiveKey : get(eachState, PARENT_VALUE, undefined), sectionId, defaultActiveKeys, eachState.type === STATE ? PARENT : CHILD, defaultActiveKey, 0, 1, !isEmpty(eachState.children), !isEmpty(eachState.children) ? eachState.children.length : 0);
+            this.handleCollapseChange(
+              !isEmpty(defaultActiveKey) ? defaultActiveKey : get(eachState, PARENT_VALUE, void 0),
+              sectionId,
+              defaultActiveKeys,
+              eachState.type === STATE ? PARENT : CHILD,
+              defaultActiveKey,
+              0,
+              1,
+              !isEmpty(eachState.children),
+              !isEmpty(eachState.children) ? eachState.children.length : 0
+            );
           } else {
-            eachState.children && eachState.children.forEach(eachChild => {
+            eachState.children && eachState.children.forEach((eachChild) => {
               if (eachChild.value === defaultActiveKey) {
-                this.handleCollapseChange(!isEmpty(defaultActiveKey) ? defaultActiveKey : get(eachChild, PARENT_VALUE, undefined), sectionId, defaultActiveKeys, eachChild.type === STATE ? PARENT : CHILD, defaultActiveKey, 1, 2, !isEmpty(eachChild.children), !isEmpty(eachChild.children) ? eachChild.children.length : 0);
+                this.handleCollapseChange(
+                  !isEmpty(defaultActiveKey) ? defaultActiveKey : get(eachChild, PARENT_VALUE, void 0),
+                  sectionId,
+                  defaultActiveKeys,
+                  eachChild.type === STATE ? PARENT : CHILD,
+                  defaultActiveKey,
+                  1,
+                  2,
+                  !isEmpty(eachChild.children),
+                  !isEmpty(eachChild.children) ? eachChild.children.length : 0
+                );
               } else {
-                eachChild.children && eachChild.children.forEach(eachLeaf => {
+                eachChild.children && eachChild.children.forEach((eachLeaf) => {
                   if (eachLeaf.value === defaultActiveKey) {
-                    this.handleCollapseChange(!isEmpty(defaultActiveKey) ? defaultActiveKey : get(eachLeaf, PARENT_VALUE, undefined), sectionId, defaultActiveKeys, eachLeaf.type === STATE ? PARENT : CHILD, defaultActiveKey, 2, 3, !isEmpty(eachLeaf.children), !isEmpty(eachLeaf.children) ? eachLeaf.children.length : 0);
+                    this.handleCollapseChange(
+                      !isEmpty(defaultActiveKey) ? defaultActiveKey : get(eachLeaf, PARENT_VALUE, void 0),
+                      sectionId,
+                      defaultActiveKeys,
+                      eachLeaf.type === STATE ? PARENT : CHILD,
+                      defaultActiveKey,
+                      2,
+                      3,
+                      !isEmpty(eachLeaf.children),
+                      !isEmpty(eachLeaf.children) ? eachLeaf.children.length : 0
+                    );
                   } else {
-                    eachLeaf.children && eachLeaf.children.forEach(lowerMenuLeaf => {
+                    eachLeaf.children && eachLeaf.children.forEach((lowerMenuLeaf) => {
                       if (lowerMenuLeaf.value === defaultActiveKey) {
-                        this.handleCollapseChange(!isEmpty(defaultActiveKey) ? defaultActiveKey : get(lowerMenuLeaf, PARENT_VALUE, undefined), sectionId, defaultActiveKeys, lowerMenuLeaf.type === STATE ? PARENT : CHILD, defaultActiveKey, 3, 4, !isEmpty(lowerMenuLeaf.children), !isEmpty(lowerMenuLeaf.children) ? lowerMenuLeaf.children.length : 0);
+                        this.handleCollapseChange(
+                          !isEmpty(defaultActiveKey) ? defaultActiveKey : get(lowerMenuLeaf, PARENT_VALUE, void 0),
+                          sectionId,
+                          defaultActiveKeys,
+                          lowerMenuLeaf.type === STATE ? PARENT : CHILD,
+                          defaultActiveKey,
+                          3,
+                          4,
+                          !isEmpty(lowerMenuLeaf.children),
+                          !isEmpty(lowerMenuLeaf.children) ? lowerMenuLeaf.children.length : 0
+                        );
                       }
                     });
                   }
@@ -889,87 +856,71 @@ class CapCollapsibleNavbar extends React.Component {
     }
   }
   render() {
-    var {
-      config,
-      className,
-      messages
-    } = this.props;
-    var {
-      createNewStates,
-      sections
-    } = config;
-    var {
-      switcherClicked,
-      createNewClicked,
-      switcherHovered,
-      menuHovered
-    } = this.state;
-    var isCollapsed = this.isMenuCollapsed();
-    return /*#__PURE__*/_jsxs("div", {
-      id: "cap-collapsible-navbar",
-      className: "cap-collapsible-nav " + (isCollapsed ? COLLAPSED : EXPANDED) + " " + (switcherClicked ? CLICKED : HOVERED) + " " + (menuHovered ? 'menu-hovered' : '') + " " + className,
-      onMouseOver: () => this.setMenuHovered(true),
-      onMouseLeave: () => this.setMenuHovered(false),
-      style: {
-        height: '100%'
-      },
-      children: [/*#__PURE__*/_jsxs(CapRow, {
-        span: 24,
-        className: "controls",
+    const { config, className, messages } = this.props;
+    const { createNewStates, sections } = config;
+    const { switcherClicked, createNewClicked, switcherHovered, menuHovered } = this.state;
+    const isCollapsed = this.isMenuCollapsed();
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        id: "cap-collapsible-navbar",
+        className: `cap-collapsible-nav ${isCollapsed ? COLLAPSED : EXPANDED} ${switcherClicked ? CLICKED : HOVERED} ${menuHovered ? "menu-hovered" : ""} ${className}`,
         onMouseOver: () => this.setMenuHovered(true),
         onMouseLeave: () => this.setMenuHovered(false),
-        children: [/*#__PURE__*/_jsx(CapColumn, {
-          span: isCollapsed ? 24 : 3,
-          className: "icon-column",
-          children: /*#__PURE__*/_jsx(CapTooltip, {
-            placement: "right",
-            title: !switcherClicked ? messages.switcherExpand : messages.switcherCollapse,
-            children: /*#__PURE__*/_jsx("div", {
-              className: "switcher",
-              onClick: this.toggleMenuCollapsed,
-              onMouseOver: () => this.setSwitcherHovered(true),
-              onMouseLeave: () => this.setSwitcherHovered(false),
-              children: /*#__PURE__*/_jsx(ChevronLeftIcon, {
-                src: switcherHovered ? chevronLeftBlue : chevronLeft
-              })
-            })
-          })
-        }), /*#__PURE__*/_jsx(CapColumn, {
-          span: 21,
-          className: "menu-item " + (isCollapsed ? COLLAPSED : EXPANDED)
-        })]
-      }, "controls"), !isEmpty(createNewStates) && /*#__PURE__*/_jsxs(CapRow, {
-        span: 24,
-        className: "create-new",
-        children: [/*#__PURE__*/_jsx(CapColumn, {
-          span: isCollapsed ? 24 : 3,
-          className: "icon-column",
-          children: /*#__PURE__*/_jsx("div", {
-            className: "icon-container",
-            children: /*#__PURE__*/_jsx(LeftNavAddIcon, {
-              src: require("./assets/left-nav-add-black.svg")
-            })
-          })
-        }), /*#__PURE__*/_jsx(CapColumn, {
-          span: 21,
-          className: "menu-item " + (isCollapsed ? COLLAPSED : EXPANDED),
-          children: /*#__PURE__*/_jsx(CapPopover, {
-            content: this.renderCreateNewOptions(createNewStates),
-            trigger: "hover",
-            placement: "bottom",
-            overlayClassName: "nav-popover new-state-popup",
-            onVisibleChange: this.toggleCreateNewClicked,
-            visible: createNewClicked,
-            children: /*#__PURE__*/_jsxs(CapButton, {
-              type: "secondary",
-              children: [/*#__PURE__*/_jsx(LeftNavAddIcon, {
-                src: leftNavAddBlack
-              }), messages.createNew]
-            })
-          })
-        })]
-      }, "create-new"), !isEmpty(sections) && sections.map(this.renderSection)]
-    });
+        style: { height: "100%" },
+        children: [
+          /* @__PURE__ */ jsxs(
+            CapRow,
+            {
+              span: 24,
+              className: "controls",
+              onMouseOver: () => this.setMenuHovered(true),
+              onMouseLeave: () => this.setMenuHovered(false),
+              children: [
+                /* @__PURE__ */ jsx(CapColumn, { span: isCollapsed ? 24 : 3, className: "icon-column", children: /* @__PURE__ */ jsx(
+                  CapTooltip,
+                  {
+                    placement: "right",
+                    title: !switcherClicked ? messages.switcherExpand : messages.switcherCollapse,
+                    children: /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        className: "switcher",
+                        onClick: this.toggleMenuCollapsed,
+                        onMouseOver: () => this.setSwitcherHovered(true),
+                        onMouseLeave: () => this.setSwitcherHovered(false),
+                        children: /* @__PURE__ */ jsx(ChevronLeftIcon, { src: switcherHovered ? chevronLeftBlue : chevronLeft })
+                      }
+                    )
+                  }
+                ) }),
+                /* @__PURE__ */ jsx(CapColumn, { span: 21, className: `menu-item ${isCollapsed ? COLLAPSED : EXPANDED}` })
+              ]
+            },
+            "controls"
+          ),
+          !isEmpty(createNewStates) && /* @__PURE__ */ jsxs(CapRow, { span: 24, className: "create-new", children: [
+            /* @__PURE__ */ jsx(CapColumn, { span: isCollapsed ? 24 : 3, className: "icon-column", children: /* @__PURE__ */ jsx("div", { className: "icon-container", children: /* @__PURE__ */ jsx(LeftNavAddIcon, { src: require("./assets/left-nav-add-black.svg") }) }) }),
+            /* @__PURE__ */ jsx(CapColumn, { span: 21, className: `menu-item ${isCollapsed ? COLLAPSED : EXPANDED}`, children: /* @__PURE__ */ jsx(
+              CapPopover,
+              {
+                content: this.renderCreateNewOptions(createNewStates),
+                trigger: "hover",
+                placement: "bottom",
+                overlayClassName: "nav-popover new-state-popup",
+                onVisibleChange: this.toggleCreateNewClicked,
+                visible: createNewClicked,
+                children: /* @__PURE__ */ jsxs(CapButton, { type: "secondary", children: [
+                  /* @__PURE__ */ jsx(LeftNavAddIcon, { src: leftNavAddBlack }),
+                  messages.createNew
+                ] })
+              }
+            ) })
+          ] }, "create-new"),
+          !isEmpty(sections) && sections.map(this.renderSection)
+        ]
+      }
+    );
   }
 }
 CapCollapsibleNavbar.defaultProps = {
@@ -977,13 +928,16 @@ CapCollapsibleNavbar.defaultProps = {
     createNewStates: [],
     sections: []
   },
-  className: '',
+  className: "",
   displaySyncBanner: false,
   history: {},
   messages: {},
-  navItemClicked: () => {},
-  handleCollapseChange: () => {},
-  switcherClicked: () => {},
+  navItemClicked: () => {
+  },
+  handleCollapseChange: () => {
+  },
+  switcherClicked: () => {
+  },
   navExpandedDefault: false
 };
 CapCollapsibleNavbar.propTypes = {
@@ -997,4 +951,6 @@ CapCollapsibleNavbar.propTypes = {
   navExpandedDefault: PropTypes.bool,
   messages: PropTypes.object
 };
-export default CapCollapsibleNavbar;
+export {
+  CapCollapsibleNavbar as default
+};