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

package/CapHamburgerMenu/index.js

@@ -1,120 +1,92 @@
-var _excluded = ["goToHome", "placement", "productName", "userData", "loadStorageItem", "changeOrgEntity", "selectOrganization", "sidebarContent", "selectedSidebarItem", "onSidebarClick", "noResultsText", "footer", "screenHeight", "screenWidth", "insights", "selectProduct", "defaultSelectedProduct"];
-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 _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-/* eslint-disable max-lines */
-/*
-  Hamburger menu for mobile view of app
-
-  Move this to cap-ui-library once hamburger menu and other needed components are prepared and tested
-  Also move hamburger.svg and cap-logo-mobile.svg images to ui library assets/images and use from there.
-*/
-
-import classNames from 'classnames';
-import findIndex from 'lodash/findIndex';
-import forOwn from 'lodash/forOwn';
-import get from 'lodash/get';
-import isEmpty from 'lodash/isEmpty';
-import isEqual from 'lodash/isEqual';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { Virtuoso } from 'react-virtuoso';
-import { List } from 'semantic-ui-react';
-import { LogoBackground } from "../assets/icons";
-import CapColumn from "../CapColumn";
-import CapDrawer from "../CapDrawer";
-import CapHeading from "../CapHeading";
-import CapIcon from "../CapIcon";
-import CapInput from "../CapInput";
-import CapLabel from "../CapLabel";
-import CapRow from "../CapRow";
-import CapSlideBox from "../CapSlideBox";
-import * as styledVars from "../styles/_variables";
-import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-var capLogo = require("../assets/icons/cap-logo-mobile.svg");
-var hamburgerIcon = require("../assets/icons/hamburger.svg");
-var moreApplications = require("../assets/icons/moreApplications.svg");
-var PRODUCT_MASTERS = 'masters';
-var CapHamburgerMenu = _ref => {
-  var {
-      goToHome,
-      placement = 'left',
-      productName,
-      userData = {},
-      loadStorageItem,
-      changeOrgEntity,
-      selectOrganization,
-      sidebarContent = [],
-      selectedSidebarItem,
-      onSidebarClick,
-      noResultsText,
-      footer,
-      screenHeight,
-      screenWidth,
-      insights,
-      selectProduct,
-      defaultSelectedProduct
-    } = _ref,
-    restProps = _objectWithoutPropertiesLoose(_ref, _excluded);
-  // Initialize menu items from sidebarContent
-  var initialMenuItems = useMemo(() => {
-    var menuItems = [];
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import classNames from "classnames";
+import findIndex from "lodash/findIndex";
+import forOwn from "lodash/forOwn";
+import get from "lodash/get";
+import isEmpty from "lodash/isEmpty";
+import isEqual from "lodash/isEqual";
+import React, { useMemo, useState, useRef, useEffect } from "react";
+import { Virtuoso } from "react-virtuoso";
+import { List } from "semantic-ui-react";
+import "../assets/icons/dropdownIcon.js";
+import "../assets/icons/add.js";
+import LogoBackground from "../assets/icons/logoBackground.js";
+import CapColumn from "../CapColumn/index.js";
+import CapDrawer from "../CapDrawer/index.js";
+import CapHeadingWithStatic from "../CapHeading/index.js";
+import CapIcon from "../CapIcon/index.js";
+import InputFinal from "../CapInput/index.js";
+import CapLabelWithStatic from "../CapLabel/index.js";
+import CapRow from "../CapRow/index.js";
+import CapSlideBox from "../CapSlideBox/index.js";
+import { CAP_G06, CAP_SPACE_08 } from "../styles/_variables.js";
+import styles from "./styles.module.scss.js";
+const capLogo = require("../assets/icons/cap-logo-mobile.svg");
+const hamburgerIcon = require("../assets/icons/hamburger.svg");
+const moreApplications = require("../assets/icons/moreApplications.svg");
+const PRODUCT_MASTERS = "masters";
+const CapHamburgerMenu = ({
+  goToHome,
+  placement = "left",
+  productName,
+  userData = {},
+  loadStorageItem,
+  changeOrgEntity,
+  selectOrganization,
+  sidebarContent = [],
+  selectedSidebarItem,
+  onSidebarClick,
+  noResultsText,
+  footer,
+  screenHeight,
+  screenWidth,
+  insights,
+  selectProduct,
+  defaultSelectedProduct,
+  ...restProps
+}) => {
+  const initialMenuItems = useMemo(() => {
+    const menuItems2 = [];
     if (!isEmpty(sidebarContent)) {
       sidebarContent.forEach((item, i) => {
         if (!isEmpty(item.children)) {
-          menuItems.push({
+          menuItems2.push({
             label: item.label,
             hasChildren: true,
             expanded: i === 0,
             children: item.children
           });
         } else {
-          menuItems.push({
+          menuItems2.push({
             label: item.label,
-            value: item.value // Store value for reference, even though MenuItemWithState doesn't require it
+            value: item.value
+            // Store value for reference, even though MenuItemWithState doesn't require it
           });
         }
       });
     }
-    return menuItems;
+    return menuItems2;
   }, [sidebarContent]);
-
-  // Helper function to get proxy org list
-  var getProxyOrgList = props => {
-    var {
-      userData: data = {}
-    } = props;
-    var proxyOrgList = [];
-    if (data != null && data.user && Object.keys(data.user).length > 0) {
-      var {
-        orgDetails = {},
-        user: _user = {}
-      } = data;
-      var {
-        name: selectedOrgName
-      } = orgDetails;
-      var {
-        org_id: selectedOrgId
-      } = orgDetails;
-      var {
-        proxyOrgList: _orgList = [],
-        accessibleOUList
-      } = _user;
-
-      // Fetching current selected org details and adding to org list dropdown
+  const getProxyOrgList = (props) => {
+    const { userData: data = {} } = props;
+    const proxyOrgList = [];
+    if ((data == null ? void 0 : data.user) && Object.keys(data.user).length > 0) {
+      const { orgDetails = {}, user: user2 = {} } = data;
+      const { name: selectedOrgName } = orgDetails;
+      let { org_id: selectedOrgId } = orgDetails;
+      const { proxyOrgList: orgList2 = [], accessibleOUList } = user2;
       if (!isEmpty(selectedOrgId)) {
         selectedOrgId = parseInt(String(selectedOrgId), 10);
-        var selectedOrg = {
-          label: selectedOrgName || '',
+        const selectedOrg = {
+          label: selectedOrgName || "",
           value: selectedOrgId,
           key: selectedOrgId
         };
-
-        // Add ou list for selected org if available
         if (!isEmpty(accessibleOUList)) {
           selectedOrg.accessibleOus = [];
           forOwn(accessibleOUList, (ouId, ouName) => {
-            var _selectedOrg$accessib;
-            (_selectedOrg$accessib = selectedOrg.accessibleOus) == null || _selectedOrg$accessib.push({
+            var _a;
+            (_a = selectedOrg.accessibleOus) == null ? void 0 : _a.push({
               label: ouName,
               value: ouId,
               key: ouId
@@ -123,16 +95,12 @@ var CapHamburgerMenu = _ref => {
         }
         proxyOrgList.push(selectedOrg);
       }
-      if (_orgList && _orgList.length) {
-        _orgList.forEach(item => {
+      if (orgList2 && orgList2.length) {
+        orgList2.forEach((item) => {
           if (parseInt(String(item.orgID), 10) !== parseInt(String(selectedOrgId), 10)) {
-            var id = parseInt(String(item.orgID), 10);
-            var name = item.orgName;
-            var orgObj = {
-              label: name,
-              value: id,
-              key: id
-            };
+            const id = parseInt(String(item.orgID), 10);
+            const name = item.orgName;
+            const orgObj = { label: name, value: id, key: id };
             if (item.ouList) {
               orgObj.accessibleOus = getOuList(item);
             }
@@ -143,13 +111,11 @@ var CapHamburgerMenu = _ref => {
     }
     return proxyOrgList;
   };
-  var getOuList = orgItem => {
-    var {
-      ouList = []
-    } = orgItem;
-    var accessibleOus = [];
+  const getOuList = (orgItem) => {
+    const { ouList = [] } = orgItem;
+    const accessibleOus = [];
     if (ouList.length) {
-      ouList.forEach(item => {
+      ouList.forEach((item) => {
         accessibleOus.push({
           label: item.ouName,
           value: item.ouID,
@@ -159,97 +125,61 @@ var CapHamburgerMenu = _ref => {
     }
     return accessibleOus;
   };
-  var [isOpen, setIsOpen] = useState(false);
-  var [orgList, setOrgList] = useState(() => getProxyOrgList(_extends({
-    userData,
-    loadStorageItem,
-    changeOrgEntity,
-    selectOrganization,
-    sidebarContent,
-    selectedSidebarItem,
-    onSidebarClick,
-    noResultsText,
-    footer,
-    screenHeight,
-    screenWidth,
-    insights,
-    selectProduct,
-    defaultSelectedProduct
-  }, restProps)));
-  var [menuItems, setMenuItems] = useState(initialMenuItems);
-  var [orgSearchText, setOrgSearchText] = useState('');
-  var [orgSelectionBoxOpen, setOrgSelectionBoxOpen] = useState(false);
-  var [productListOpen, setProductListOpen] = useState(false);
-  var prevUserRef = useRef(get(userData, 'user'));
-  var prevSidebarContentRef = useRef(sidebarContent);
-
-  // Update orgList when userData.user changes (mimicking componentWillReceiveProps behavior)
+  const [isOpen, setIsOpen] = useState(false);
+  const [orgList, setOrgList] = useState(
+    () => getProxyOrgList({
+      userData,
+      ...restProps
+    })
+  );
+  const [menuItems, setMenuItems] = useState(initialMenuItems);
+  const [orgSearchText, setOrgSearchText] = useState("");
+  const [orgSelectionBoxOpen, setOrgSelectionBoxOpen] = useState(false);
+  const [productListOpen, setProductListOpen] = useState(false);
+  const prevUserRef = useRef(get(userData, "user"));
+  const prevSidebarContentRef = useRef(sidebarContent);
   useEffect(() => {
-    var currentUser = get(userData, 'user');
+    const currentUser = get(userData, "user");
     if (!isEmpty(currentUser) && !isEqual(currentUser, prevUserRef.current)) {
       prevUserRef.current = currentUser;
-      setOrgList(getProxyOrgList(_extends({
-        userData,
-        loadStorageItem,
-        changeOrgEntity,
-        selectOrganization,
-        sidebarContent,
-        selectedSidebarItem,
-        onSidebarClick,
-        noResultsText,
-        footer,
-        screenHeight,
-        screenWidth,
-        insights,
-        selectProduct,
-        defaultSelectedProduct
-      }, restProps)));
+      setOrgList(
+        getProxyOrgList({
+          userData,
+          ...restProps
+        })
+      );
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [userData]); // Only depend on userData; other props are stable or handled separately
-
-  // Update menuItems when sidebarContent changes
+  }, [userData]);
   useEffect(() => {
-    // Only update if sidebarContent actually changed (deep comparison) to prevent infinite loops
     if (!isEqual(sidebarContent, prevSidebarContentRef.current)) {
       prevSidebarContentRef.current = sidebarContent;
       setMenuItems(initialMenuItems);
     }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [sidebarContent]); // Only depend on sidebarContent; initialMenuItems is derived from it via useMemo
-
-  var capitalize = function capitalize(text) {
-    if (text === void 0) {
-      text = '';
-    }
-    return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-  };
-  var toggleIsOpen = () => setIsOpen(prev => !prev);
-  var toggleMenuItemExpanded = i => {
-    setMenuItems(prevMenuItems => {
-      var newMenuItems = [...prevMenuItems];
+  }, [sidebarContent]);
+  const capitalize = (text = "") => text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
+  const toggleIsOpen = () => setIsOpen((prev) => !prev);
+  const toggleMenuItemExpanded = (i) => {
+    setMenuItems((prevMenuItems) => {
+      const newMenuItems = [...prevMenuItems];
       if (newMenuItems[i]) {
-        newMenuItems[i] = _extends({}, newMenuItems[i], {
+        newMenuItems[i] = {
+          ...newMenuItems[i],
           expanded: !newMenuItems[i].expanded
-        });
+        };
       }
       return newMenuItems;
     });
   };
-  var getProductList = () => {
-    var {
-      currentOrgDetails = {}
-    } = userData;
-    var {
-      module_details: moduleDetails = []
-    } = currentOrgDetails;
-    var productsList = [];
+  const getProductList = () => {
+    const { currentOrgDetails = {} } = userData;
+    const { module_details: moduleDetails = [] } = currentOrgDetails;
+    const productsList = [];
     if (Object.keys(currentOrgDetails).length !== 0) {
-      moduleDetails.forEach(module => {
+      moduleDetails.forEach((module) => {
         if (module.name.toLowerCase() !== PRODUCT_MASTERS) {
-          var _productName = module.namespace;
-          var intlProductName = restProps[_productName];
-          var moduleName = intlProductName || module.name.toLowerCase();
+          const productName2 = module.namespace;
+          const intlProductName = restProps[productName2];
+          const moduleName = intlProductName || module.name.toLowerCase();
           productsList.push({
             value: moduleName,
             url: module.url,
@@ -257,95 +187,100 @@ var CapHamburgerMenu = _ref => {
           });
         }
       });
-      // Below change is temporary and should be fixed once we get correct modules list
-      // Adding insights+ to module list
       if (insights) {
         productsList.push({
           value: insights,
-          url: 'analytics/v2/',
-          key: 'insights'
+          url: "analytics/v2/",
+          key: "insights"
         });
       }
     }
     return productsList;
   };
-  var handleProductChange = product => {
+  const handleProductChange = (product) => {
     if (product.url !== window.location.pathname) {
       window.location.pathname = product.url;
     }
   };
-  var orgSearchCondition = item => {
-    return orgSearchText === '' || (item.label || '').toLowerCase().indexOf((orgSearchText || '').toLowerCase()) !== -1;
+  const orgSearchCondition = (item) => {
+    return orgSearchText === "" || (item.label || "").toLowerCase().indexOf((orgSearchText || "").toLowerCase()) !== -1;
   };
-  var ouSearchCondition = item => {
-    return (item.accessibleOus || []).filter(ou => ou.label.toLowerCase().includes((orgSearchText || '').toLowerCase()));
+  const ouSearchCondition = (item) => {
+    return (item.accessibleOus || []).filter(
+      (ou) => ou.label.toLowerCase().includes((orgSearchText || "").toLowerCase())
+    );
   };
-  var getOrgListItem = item => {
-    var selectedItem = loadStorageItem == null ? void 0 : loadStorageItem('orgID');
-    var selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem('ouId');
-    var isOuPresent = selectedOuItem !== null && selectedOuItem !== undefined && selectedOuItem !== -1;
-    var itemLabel = item.accessibleOus ? /*#__PURE__*/_jsxs("div", {
-      style: {
-        display: 'flex',
-        alignItems: 'center'
-      },
-      children: [/*#__PURE__*/_jsx(CapIcon, {
-        type: "sitemap",
-        size: "s",
-        style: {
-          marginRight: styledVars.CAP_SPACE_08
-        }
-      }), /*#__PURE__*/_jsx("div", {
-        className: "org-select-overflow-ellipsis_o3BTx",
-        children: item.label
-      })]
-    }) : item.label;
-    var customClassname = item.accessibleOus ? "org-select-select-ou-org-item_x0mfw" : "org-select-select-item_fa62U";
-    return /*#__PURE__*/_jsx(CapHeading, {
-      type: "h6",
-      onClick: () => handleChange(item),
-      className: classNames(customClassname, {
-        ["selected_OZkrC"]: selectedItem === item.value && !isOuPresent
-      }, "org-select-overflow-ellipsis_o3BTx"),
-      title: item.label,
-      children: itemLabel
-    }, "org-key-" + item.key);
-  };
-  var getOuListItem = (item, ou) => {
-    var selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem('ouId');
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames("org-select-select-ou-item_M3tCP", {
-        ["selected_OZkrC"]: selectedOuItem === ou.value
-      }),
-      onClick: () => handleChange(item, ou),
-      children: [/*#__PURE__*/_jsx(CapHeading, {
+  const getOrgListItem = (item) => {
+    const selectedItem = loadStorageItem == null ? void 0 : loadStorageItem("orgID");
+    const selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem("ouId");
+    const isOuPresent = selectedOuItem !== null && selectedOuItem !== void 0 && selectedOuItem !== -1;
+    const itemLabel = item.accessibleOus ? /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsx(CapIcon, { type: "sitemap", size: "s", style: { marginRight: CAP_SPACE_08 } }),
+      /* @__PURE__ */ jsx("div", { className: styles["org-select-overflow-ellipsis"], children: item.label })
+    ] }) : item.label;
+    const customClassname = item.accessibleOus ? styles["org-select-select-ou-org-item"] : styles["org-select-select-item"];
+    return /* @__PURE__ */ jsx(
+      CapHeadingWithStatic,
+      {
         type: "h6",
-        style: {
-          maxWidth: 125
-        },
-        className: "org-select-overflow-ellipsis_o3BTx",
-        title: ou.label,
-        children: ou.label
-      }), /*#__PURE__*/_jsx(CapLabel, {
-        type: "label3",
-        style: {
-          maxWidth: 70
-        },
-        className: "org-select-overflow-ellipsis_o3BTx",
+        onClick: () => handleChange(item),
+        className: classNames(
+          customClassname,
+          {
+            [styles.selected]: selectedItem === item.value && !isOuPresent
+          },
+          styles["org-select-overflow-ellipsis"]
+        ),
         title: item.label,
-        children: item.label
-      })]
-    }, "ou-key-" + ou.key);
+        children: itemLabel
+      },
+      `org-key-${item.key}`
+    );
   };
-  var getOrgItems = () => {
-    var dropdownItems = [];
-    orgList.forEach(item => {
+  const getOuListItem = (item, ou) => {
+    const selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem("ouId");
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(styles["org-select-select-ou-item"], {
+          [styles.selected]: selectedOuItem === ou.value
+        }),
+        onClick: () => handleChange(item, ou),
+        children: [
+          /* @__PURE__ */ jsx(
+            CapHeadingWithStatic,
+            {
+              type: "h6",
+              style: { maxWidth: 125 },
+              className: styles["org-select-overflow-ellipsis"],
+              title: ou.label,
+              children: ou.label
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            CapLabelWithStatic,
+            {
+              type: "label3",
+              style: { maxWidth: 70 },
+              className: styles["org-select-overflow-ellipsis"],
+              title: item.label,
+              children: item.label
+            }
+          )
+        ]
+      },
+      `ou-key-${ou.key}`
+    );
+  };
+  const getOrgItems = () => {
+    const dropdownItems = [];
+    orgList.forEach((item) => {
       if (orgSearchCondition(item)) {
         dropdownItems.push(getOrgListItem(item));
       }
       if (item.accessibleOus) {
-        var ouList = orgSearchCondition(item) ? item.accessibleOus : ouSearchCondition(item);
-        ouList.forEach(ou => {
+        const ouList = orgSearchCondition(item) ? item.accessibleOus : ouSearchCondition(item);
+        ouList.forEach((ou) => {
           if (ou.key !== -1) {
             dropdownItems.push(getOuListItem(item, ou));
           }
@@ -354,266 +289,280 @@ var CapHamburgerMenu = _ref => {
     });
     return dropdownItems;
   };
-  var handleSearch = e => setOrgSearchText(e.target.value);
-  var clearSearch = () => setOrgSearchText('');
-  var handleChange = function handleChange(item, ou) {
-    if (ou === void 0) {
-      ou = {};
-    }
-    var selectedItem = loadStorageItem == null ? void 0 : loadStorageItem('orgID');
-    var selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem('ouId');
+  const handleSearch = (e) => setOrgSearchText(e.target.value);
+  const clearSearch = () => setOrgSearchText("");
+  const handleChange = (item, ou = {}) => {
+    const selectedItem = loadStorageItem == null ? void 0 : loadStorageItem("orgID");
+    const selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem("ouId");
     hideOrgSlidebox();
     if (selectedItem !== item.value || selectedOuItem !== ou.value) {
-      changeOrgEntity == null || changeOrgEntity(item.value, ou.value);
+      changeOrgEntity == null ? void 0 : changeOrgEntity(item.value, ou.value);
     }
   };
-  var hideOrgSlidebox = () => {
+  const hideOrgSlidebox = () => {
     setOrgSelectionBoxOpen(false);
-    setOrgSearchText('');
+    setOrgSearchText("");
   };
-  var renderOrgList = () => {
-    var itemsHtml = getOrgItems();
-    return /*#__PURE__*/_jsxs(_Fragment, {
-      children: [/*#__PURE__*/_jsx(CapInput.Search, {
-        placeholder: selectOrganization,
-        onChange: handleSearch,
-        value: orgSearchText,
-        onClear: clearSearch,
-        className: classNames("org-select-search_yPdV1")
-      }), itemsHtml.length > 0 ? /*#__PURE__*/_jsx("div", {
-        className: classNames("org-select-items-wrapper_Df5Fg"),
-        style: {
-          height: screenHeight ? screenHeight - 112 : undefined,
-          maxHeight: screenHeight ? screenHeight - 112 : undefined,
-          overflowY: 'auto'
-        },
-        children: screenWidth && screenHeight && /*#__PURE__*/_jsx(Virtuoso, {
+  const renderOrgList = () => {
+    const itemsHtml = getOrgItems();
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        InputFinal.Search,
+        {
+          placeholder: selectOrganization,
+          onChange: handleSearch,
+          value: orgSearchText,
+          onClear: clearSearch,
+          className: classNames(styles["org-select-search"])
+        }
+      ),
+      itemsHtml.length > 0 ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: classNames(styles["org-select-items-wrapper"]),
           style: {
-            width: screenWidth - 30,
-            height: screenHeight - 60
+            height: screenHeight ? screenHeight - 112 : void 0,
+            maxHeight: screenHeight ? screenHeight - 112 : void 0,
+            overflowY: "auto"
           },
-          totalCount: (itemsHtml || []).length,
-          fixedItemHeight: 36,
-          itemContent: index => /*#__PURE__*/_jsx("div", {
-            children: itemsHtml[index]
-          }),
-          overscan: 5
-        })
-      }) : /*#__PURE__*/_jsxs("div", {
-        className: classNames("org-select-no-results_QsQAa"),
-        style: {
-          height: screenHeight ? screenHeight - 175 : undefined
-        },
-        children: [/*#__PURE__*/_jsx("div", {
-          className: classNames("org-select-no-results-wrapper_Q-8DE"),
-          children: /*#__PURE__*/_jsx("div", {
-            className: classNames("org-select-no-results-image_ia8c1"),
-            children: /*#__PURE__*/_jsx(CapIcon, {
+          children: screenWidth && screenHeight && /* @__PURE__ */ jsx(
+            Virtuoso,
+            {
               style: {
-                color: styledVars.CAP_G06
+                width: screenWidth - 30,
+                height: screenHeight - 60
               },
-              type: "alert"
-            })
-          })
-        }), /*#__PURE__*/_jsx("div", {
-          className: classNames("org-select-no-results-text_5j2Xo"),
-          children: noResultsText
-        })]
-      })]
-    });
+              totalCount: (itemsHtml || []).length,
+              fixedItemHeight: 36,
+              itemContent: (index) => /* @__PURE__ */ jsx("div", { children: itemsHtml[index] }),
+              overscan: 5
+            }
+          )
+        }
+      ) : /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: classNames(styles["org-select-no-results"]),
+          style: { height: screenHeight ? screenHeight - 175 : void 0 },
+          children: [
+            /* @__PURE__ */ jsx("div", { className: classNames(styles["org-select-no-results-wrapper"]), children: /* @__PURE__ */ jsx("div", { className: classNames(styles["org-select-no-results-image"]), children: /* @__PURE__ */ jsx(CapIcon, { style: { color: CAP_G06 }, type: "alert" }) }) }),
+            /* @__PURE__ */ jsx("div", { className: classNames(styles["org-select-no-results-text"]), children: noResultsText })
+          ]
+        }
+      )
+    ] });
   };
-  var renderOrgSelectionBox = () => {
-    return /*#__PURE__*/_jsx(CapSlideBox, {
-      header: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("i", {
-          className: "material-icons back-icon",
-          onClick: hideOrgSlidebox,
-          children: "arrow_back"
-        }), /*#__PURE__*/_jsx("span", {
-          children: selectOrganization
-        })]
-      }),
-      show: orgSelectionBoxOpen,
-      size: "size-l",
-      className: "org-select-slidebox_nZExJ",
-      content: renderOrgList(),
-      handleClose: hideOrgSlidebox
-    });
+  const renderOrgSelectionBox = () => {
+    return /* @__PURE__ */ jsx(
+      CapSlideBox,
+      {
+        header: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("i", { className: "material-icons back-icon", onClick: hideOrgSlidebox, children: "arrow_back" }),
+          /* @__PURE__ */ jsx("span", { children: selectOrganization })
+        ] }),
+        show: orgSelectionBoxOpen,
+        size: "size-l",
+        className: styles["org-select-slidebox"],
+        content: renderOrgList(),
+        handleClose: hideOrgSlidebox
+      }
+    );
   };
-  var renderProductList = () => {
-    var productList = getProductList();
-    return /*#__PURE__*/_jsx(CapSlideBox, {
-      header: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("i", {
-          className: "material-icons back-icon",
-          onClick: () => setProductListOpen(false),
-          children: "arrow_back"
-        }), /*#__PURE__*/_jsx("span", {
-          children: selectProduct
-        })]
-      }),
-      show: productListOpen,
-      size: "size-l",
-      className: "org-select-slidebox_nZExJ",
-      content: /*#__PURE__*/_jsx(_Fragment, {
-        children: productList.map(product => /*#__PURE__*/_jsx("div", {
-          onClick: () => handleProductChange(product),
-          className: classNames("org-select-product_oG-Iq", {
-            ["selected_OZkrC"]: product.value === defaultSelectedProduct
-          }),
-          children: capitalize(product.value)
-        }, product.key || product.value))
-      }),
-      handleClose: () => setProductListOpen(false)
-    });
+  const renderProductList = () => {
+    const productList = getProductList();
+    return /* @__PURE__ */ jsx(
+      CapSlideBox,
+      {
+        header: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("i", { className: "material-icons back-icon", onClick: () => setProductListOpen(false), children: "arrow_back" }),
+          /* @__PURE__ */ jsx("span", { children: selectProduct })
+        ] }),
+        show: productListOpen,
+        size: "size-l",
+        className: styles["org-select-slidebox"],
+        content: /* @__PURE__ */ jsx(Fragment, { children: productList.map((product) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            onClick: () => handleProductChange(product),
+            className: classNames(styles["org-select-product"], {
+              [styles.selected]: product.value === defaultSelectedProduct
+            }),
+            children: capitalize(product.value)
+          },
+          product.key || product.value
+        )) }),
+        handleClose: () => setProductListOpen(false)
+      }
+    );
   };
-  var renderSelectedOrg = () => {
-    var selectedOrg = loadStorageItem == null ? void 0 : loadStorageItem('orgID');
-    var selectedOu = loadStorageItem == null ? void 0 : loadStorageItem('ouId');
-    var selectedItemIndex = findIndex(orgList, item => item.value === selectedOrg);
-    var itemDetails = orgList[selectedItemIndex] || {};
-    var selectedOuItemIndex = -1;
+  const renderSelectedOrg = () => {
+    const selectedOrg = loadStorageItem == null ? void 0 : loadStorageItem("orgID");
+    const selectedOu = loadStorageItem == null ? void 0 : loadStorageItem("ouId");
+    const selectedItemIndex = findIndex(orgList, (item) => item.value === selectedOrg);
+    const itemDetails = orgList[selectedItemIndex] || {};
+    let selectedOuItemIndex = -1;
     if (selectedOu && selectedOu !== -1) {
-      selectedOuItemIndex = findIndex(itemDetails.accessibleOus || [], ou => ou.value === selectedOu);
+      selectedOuItemIndex = findIndex(
+        itemDetails.accessibleOus || [],
+        (ou) => ou.value === selectedOu
+      );
     }
-    var selectedItemLabel = selectOrganization || '';
+    let selectedItemLabel = selectOrganization || "";
     if (selectedItemIndex !== -1) {
       selectedItemLabel = itemDetails.label;
     }
     if (selectedOuItemIndex !== -1 && itemDetails.accessibleOus) {
       selectedItemLabel = itemDetails.accessibleOus[selectedOuItemIndex].label;
     }
-    return /*#__PURE__*/_jsxs("div", {
-      className: classNames("org-select-selection_4pMlM"),
-      onClick: () => setOrgSelectionBoxOpen(true),
-      children: [/*#__PURE__*/_jsxs("div", {
-        className: "org-select-selected-value_u6WOj",
-        children: [/*#__PURE__*/_jsxs("div", {
-          className: "org-select-selected-icon_-aHVh",
-          children: [/*#__PURE__*/_jsx(LogoBackground, {}), /*#__PURE__*/_jsx("span", {
-            className: "text-label_sefgR",
-            children: selectedItemLabel[0] || ''
-          })]
-        }), selectedOuItemIndex !== -1 ? /*#__PURE__*/_jsxs("div", {
-          className: "org-select-selected-ou-value-label_fUpQ7",
-          children: [/*#__PURE__*/_jsx(CapHeading, {
-            type: "h4",
-            style: {
-              maxWidth: 110
-            },
-            className: "org-select-overflow-ellipsis_o3BTx",
-            title: selectedItemLabel,
-            children: selectedItemLabel
-          }), /*#__PURE__*/_jsx(CapLabel, {
-            type: "label3",
-            style: {
-              maxWidth: 70
-            },
-            className: "org-select-overflow-ellipsis_o3BTx",
-            title: itemDetails.label,
-            children: itemDetails.label
-          })]
-        }) : /*#__PURE__*/_jsx(CapHeading, {
-          type: "h4",
-          className: classNames("org-select-selected-value-label_-JIQe", "org-select-overflow-ellipsis_o3BTx"),
-          title: selectedItemLabel,
-          children: selectedItemLabel
-        })]
-      }), /*#__PURE__*/_jsx(CapIcon, {
-        type: "chevron-right",
-        className: classNames("org-select-arrow_T8gB6")
-      })]
-    });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: classNames(styles["org-select-selection"]),
+        onClick: () => setOrgSelectionBoxOpen(true),
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: styles["org-select-selected-value"], children: [
+            /* @__PURE__ */ jsxs("div", { className: styles["org-select-selected-icon"], children: [
+              /* @__PURE__ */ jsx(LogoBackground, {}),
+              /* @__PURE__ */ jsx("span", { className: styles["text-label"], children: selectedItemLabel[0] || "" })
+            ] }),
+            selectedOuItemIndex !== -1 ? /* @__PURE__ */ jsxs("div", { className: styles["org-select-selected-ou-value-label"], children: [
+              /* @__PURE__ */ jsx(
+                CapHeadingWithStatic,
+                {
+                  type: "h4",
+                  style: { maxWidth: 110 },
+                  className: styles["org-select-overflow-ellipsis"],
+                  title: selectedItemLabel,
+                  children: selectedItemLabel
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                CapLabelWithStatic,
+                {
+                  type: "label3",
+                  style: { maxWidth: 70 },
+                  className: styles["org-select-overflow-ellipsis"],
+                  title: itemDetails.label,
+                  children: itemDetails.label
+                }
+              )
+            ] }) : /* @__PURE__ */ jsx(
+              CapHeadingWithStatic,
+              {
+                type: "h4",
+                className: classNames(
+                  styles["org-select-selected-value-label"],
+                  styles["org-select-overflow-ellipsis"]
+                ),
+                title: selectedItemLabel,
+                children: selectedItemLabel
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx(CapIcon, { type: "chevron-right", className: classNames(styles["org-select-arrow"]) })
+        ]
+      }
+    );
   };
-  var renderSidebarContent = () => {
+  const renderSidebarContent = () => {
     if (!isEmpty(sidebarContent)) {
-      return /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx(List, {
-          children: menuItems.map((item, i) => /*#__PURE__*/_jsxs(React.Fragment, {
-            children: [/*#__PURE__*/_jsx(List.Item, {
-              onClick: () => item.hasChildren ? toggleMenuItemExpanded(i) : undefined,
-              children: /*#__PURE__*/_jsxs(CapRow, {
-                children: [/*#__PURE__*/_jsx(CapColumn, {
-                  className: "item-label",
-                  span: 22,
-                  children: item.label
-                }), /*#__PURE__*/_jsxs(CapColumn, {
-                  span: 2,
-                  children: [item.hasChildren && item.expanded && /*#__PURE__*/_jsx(CapIcon, {
-                    type: "chevron-up",
-                    className: classNames("org-select-arrow_T8gB6")
-                  }), item.hasChildren && !item.expanded && /*#__PURE__*/_jsx(CapIcon, {
-                    type: "chevron-down",
-                    className: classNames("org-select-arrow_T8gB6")
-                  })]
-                })]
-              })
-            }), item.expanded && item.children ? /*#__PURE__*/_jsx(_Fragment, {
-              children: item.children.map(childItem => /*#__PURE__*/_jsx(List.Item, {
-                className: classNames(styles.nested, {
-                  [styles.listItemSelected]: childItem.value === selectedSidebarItem
-                }),
-                onClick: () => childItem.value !== selectedSidebarItem && (onSidebarClick == null ? void 0 : onSidebarClick(childItem)),
-                children: /*#__PURE__*/_jsx(CapRow, {
-                  children: /*#__PURE__*/_jsx(CapColumn, {
-                    className: "item-label",
-                    span: 24,
-                    children: childItem.label
-                  })
-                })
-              }, childItem.value))
-            }) : null]
-          }, "menu-item-" + i))
-        }), isOpen && footer && /*#__PURE__*/_jsx("div", {
-          className: "ant-drawer-footer",
-          children: footer
-        }), isOpen && renderOrgSelectionBox(), isOpen && renderProductList()]
-      });
+      return /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(List, { children: menuItems.map((item, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            List.Item,
+            {
+              onClick: () => item.hasChildren ? toggleMenuItemExpanded(i) : void 0,
+              children: /* @__PURE__ */ jsxs(CapRow, { children: [
+                /* @__PURE__ */ jsx(CapColumn, { className: "item-label", span: 22, children: item.label }),
+                /* @__PURE__ */ jsxs(CapColumn, { span: 2, children: [
+                  item.hasChildren && item.expanded && /* @__PURE__ */ jsx(
+                    CapIcon,
+                    {
+                      type: "chevron-up",
+                      className: classNames(styles["org-select-arrow"])
+                    }
+                  ),
+                  item.hasChildren && !item.expanded && /* @__PURE__ */ jsx(
+                    CapIcon,
+                    {
+                      type: "chevron-down",
+                      className: classNames(styles["org-select-arrow"])
+                    }
+                  )
+                ] })
+              ] })
+            }
+          ),
+          item.expanded && item.children ? /* @__PURE__ */ jsx(Fragment, { children: item.children.map((childItem) => /* @__PURE__ */ jsx(
+            List.Item,
+            {
+              className: classNames(styles.nested, {
+                [styles.listItemSelected]: childItem.value === selectedSidebarItem
+              }),
+              onClick: () => childItem.value !== selectedSidebarItem && (onSidebarClick == null ? void 0 : onSidebarClick(childItem)),
+              children: /* @__PURE__ */ jsx(CapRow, { children: /* @__PURE__ */ jsx(CapColumn, { className: "item-label", span: 24, children: childItem.label }) })
+            },
+            childItem.value
+          )) }) : null
+        ] }, `menu-item-${i}`)) }),
+        isOpen && footer && /* @__PURE__ */ jsx("div", { className: "ant-drawer-footer", children: footer }),
+        isOpen && renderOrgSelectionBox(),
+        isOpen && renderProductList()
+      ] });
     }
     return null;
   };
-  var {
-    user = {}
-  } = userData;
-  return /*#__PURE__*/_jsxs("div", {
-    className: styles.sideMenu,
-    children: [/*#__PURE__*/_jsx("img", {
-      onClick: toggleIsOpen,
-      className: "hamburgerIcon_hTAyZ",
-      src: hamburgerIcon,
-      alt: "hamburger"
-    }), /*#__PURE__*/_jsx(CapDrawer, {
-      title: /*#__PURE__*/_jsxs(_Fragment, {
-        children: [/*#__PURE__*/_jsx("img", {
-          src: moreApplications,
-          alt: "moreApplications",
-          className: "moreApplicationsIcon_taKxT",
-          onClick: () => setProductListOpen(true)
-        }), /*#__PURE__*/_jsxs("span", {
-          onClick: () => {
-            toggleIsOpen();
-            goToHome == null || goToHome();
-          },
-          children: [/*#__PURE__*/_jsx("img", {
-            src: capLogo,
-            alt: "cap-logo-mobile",
-            className: "capLogo_g7wTk"
-          }), /*#__PURE__*/_jsx("span", {
-            className: "name",
-            children: productName
-          })]
-        }), !isEmpty(user.loginName) && /*#__PURE__*/_jsx("div", {
-          className: "user-name",
-          children: user.loginName
-        }), renderSelectedOrg()]
-      }),
-      className: "cap-hamburger-menu",
-      placement: placement,
-      closable: false,
-      onClose: toggleIsOpen,
-      open: isOpen,
-      content: renderSidebarContent()
-    }, "cap-hamburger-left")]
-  });
+  const { user = {} } = userData;
+  return /* @__PURE__ */ jsxs("div", { className: styles.sideMenu, children: [
+    /* @__PURE__ */ jsx(
+      "img",
+      {
+        onClick: toggleIsOpen,
+        className: styles.hamburgerIcon,
+        src: hamburgerIcon,
+        alt: "hamburger"
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      CapDrawer,
+      {
+        title: /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: moreApplications,
+              alt: "moreApplications",
+              className: styles.moreApplicationsIcon,
+              onClick: () => setProductListOpen(true)
+            }
+          ),
+          /* @__PURE__ */ jsxs(
+            "span",
+            {
+              onClick: () => {
+                toggleIsOpen();
+                goToHome == null ? void 0 : goToHome();
+              },
+              children: [
+                /* @__PURE__ */ jsx("img", { src: capLogo, alt: "cap-logo-mobile", className: styles.capLogo }),
+                /* @__PURE__ */ jsx("span", { className: "name", children: productName })
+              ]
+            }
+          ),
+          !isEmpty(user.loginName) && /* @__PURE__ */ jsx("div", { className: "user-name", children: user.loginName }),
+          renderSelectedOrg()
+        ] }),
+        className: "cap-hamburger-menu",
+        placement,
+        closable: false,
+        onClose: toggleIsOpen,
+        open: isOpen,
+        content: renderSidebarContent()
+      },
+      "cap-hamburger-left"
+    )
+  ] });
+};
+export {
+  CapHamburgerMenu as default
 };
-export default CapHamburgerMenu;