@capillarytech/blaze-ui 5.18.6 → 5.18.7

package/CapHamburgerMenu/index.js

@@ -3560,6 +3560,14 @@ var _default = exports["default"] = SvgWarningCircle;
 
 /***/ }),
 
+/***/ 18073:
+/***/ ((module) => {
+
+"use strict";
+module.exports = require("react-virtuoso");
+
+/***/ }),
+
 /***/ 18173:
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
@@ -8633,14 +8641,6 @@ function isObjectLike(value) {
 module.exports = isObjectLike;
 
 
-/***/ }),
-
-/***/ 40861:
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("react-virtualized");
-
 /***/ }),
 
 /***/ 40929:
@@ -16988,27 +16988,10 @@ var ___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___ = __webpack_require__(31601);
 var ___CSS_LOADER_API_IMPORT___ = __webpack_require__(76314);
 var ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(___CSS_LOADER_API_NO_SOURCEMAP_IMPORT___);
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, `.mobile-view .ant-drawer.cap-hamburger-menu.ant-drawer-left .ant-drawer-content-wrapper{width:75% !important}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header{padding:16px 16px 4px;border-radius:0}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title{font-weight:400 !important}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title img{margin-right:6px;vertical-align:bottom}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title span.name{font-size:16px;font-weight:500}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title .user-name{font-size:14px;font-family:"Roboto-Regular",sans-serif;color:#5e6c84;margin-left:34px;max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body{padding:8px 0}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list{margin-bottom:0}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item{height:36px;padding:8px 16px}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item .item-label{padding-top:2px}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item .cap-icon-v2{color:#091e42;margin-top:-2px;margin-right:-4px}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item.selected{color:#2466ea;background:#e9f0fe;border-left:2px solid #2466ea}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item.nested{padding-left:32px}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ant-drawer-footer{font-size:14px;font-family:"Roboto-Regular",sans-serif;border-top:1px solid #e8e8e8;padding:12px;position:fixed;bottom:0;width:75%}.mobile-view .org-select-selection{width:105%;display:flex;align-items:center;font-family:"Roboto",sans-serif;font-weight:400;justify-content:space-between;cursor:pointer;margin:.571rem 0;height:2.285rem;border:1px solid rgba(0,0,0,0)}.mobile-view .org-select-selection.open{border-radius:.285rem;border:1px solid #b3bac5}.mobile-view .org-select-selection.secondary-select{margin-left:0}.mobile-view .org-select-selected-value{font-size:1rem;font-weight:500;display:flex;align-items:center}.mobile-view .org-select-overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:1px 0 0}.mobile-view .org-select-selected-value-label{max-width:150px}.mobile-view .org-select-selected-ou-value-label{display:inline-flex;align-items:baseline;justify-content:space-between;width:150px}.mobile-view .org-select-selected-icon{margin-right:.571rem}.mobile-view .org-select-selected-icon{display:flex;align-items:center;position:relative;height:2.285rem;width:2.285rem;margin-right:12px}.mobile-view .org-select-selected-icon svg{background:#dfe2e7;border-radius:12px}.mobile-view .org-select-selected-icon .text-label{font-size:14px;font-family:"Roboto-Regular",sans-serif;position:absolute;right:50%;top:50%;transform:translate(50%, -50%);line-height:14px}.mobile-view .oval{width:3.428rem;height:3.428rem;background:#dfe2e7;border-radius:50%;margin:0 1.142rem 0 3.714rem}.mobile-view .org-select-header{padding:.571rem 1.142rem 1.428rem 1.142rem;font-size:1rem;font-weight:500}.mobile-view .org-select-select-item,.mobile-view .org-select-select-ou-org-item,.mobile-view .org-select-select-ou-item{cursor:pointer}.mobile-view .org-select-select-item:hover,.mobile-view .org-select-select-ou-org-item:hover,.mobile-view .org-select-select-ou-item:hover{background-color:#faf9f4}.mobile-view .org-select-select-item.selected,.mobile-view .org-select-select-ou-org-item.selected,.mobile-view .org-select-select-ou-item.selected{color:#2466ea;font-weight:500;position:relative;background-color:rgba(36,102,234,.1)}.mobile-view .org-select-select-item.selected:before,.mobile-view .org-select-select-ou-org-item.selected:before,.mobile-view .org-select-select-ou-item.selected:before{content:" ";width:2px;height:100%;left:0;top:0;position:absolute;background-color:#2466ea}.mobile-view .org-select-select-item{padding:.571rem .571rem .571rem 1.714rem}.mobile-view .org-select-select-ou-org-item{padding:.571rem .571rem .571rem .571rem}.mobile-view .org-select-select-ou-item{padding:.571rem 1.142rem .571rem 2.857rem;display:flex;justify-content:space-between;align-items:baseline}.mobile-view .org-select-no-results{display:flex;justify-content:center;flex-direction:column}.mobile-view .org-select-no-results .org-select-no-results-wrapper{position:relative}.mobile-view .org-select-no-results .org-select-no-results-wrapper .org-select-no-results-image{height:100px;width:100px;border-radius:50%;background:#f4f5f7;text-align:center;padding:13px 15px;position:absolute;left:50%;transform:translate(-50%, 0%)}.mobile-view .org-select-no-results .org-select-no-results-wrapper .org-select-no-results-image .cap-icon-v2{font-size:74px}.mobile-view .org-select-no-results .org-select-no-results-text{margin-top:108px;text-align:center;color:#5e6c84;font-size:1rem}.mobile-view .ant-popover.org-select-popover{padding-top:0;width:260px}.mobile-view .ant-popover.org-select-popover .ant-popover-inner-content{padding-left:0;padding-right:0}.mobile-view .ant-popover.org-select-popover .ant-popover-arrow{display:none}.mobile-view .org-select-search{padding:0 1.142rem 1.142rem 1.142rem}.mobile-view .org-select-items-wrapper{max-height:200px;padding:0 16px}.mobile-view .org-select-arrow{margin-right:.571rem}.mobile-view .org-select-slidebox .cap-slide-box-v2-container{width:100vw;min-width:100vw;max-width:100vw}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header{padding:16px;height:56px}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header .back-icon{margin-right:12px;vertical-align:text-top}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header .back-icon+span{font-size:20px}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header .cap-slide-box-v2-close-icon{display:none}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container{padding:0 !important;overflow-y:hidden}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-search .ant-input-prefix .cap-icon-v2{color:#5e6c84 !important}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-search .ant-input-lg{font-size:14px;padding:2px 28px 3px 32px}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-product{height:36px;line-height:36px;padding:0 32px}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-product.selected{font-weight:500;color:#2466ea;background:#e9f0fe;border-left:2px solid #2466ea}`, ""]);
+___CSS_LOADER_EXPORT___.push([module.id, `.mobile-view .ant-drawer.cap-hamburger-menu.ant-drawer-left .ant-drawer-content-wrapper{width:75% !important}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header{padding:1.142rem 1.142rem .285rem;border-radius:0}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title{font-weight:400 !important}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title img{margin-right:.429rem;vertical-align:bottom}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title span.name{font-size:1.143rem;font-weight:500}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-header .ant-drawer-title .user-name{font-size:1rem;font-family:"Roboto-Regular",sans-serif;color:#5e6c84;margin-left:2.429rem;max-width:15.714rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body{padding:.571rem 0}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list{margin-bottom:0}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item{height:2.571rem;padding:.571rem 1.142rem}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item .item-label{padding-top:.143rem}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item .cap-icon-v2{color:#091e42;margin-top:-0.143rem;margin-right:-0.285rem}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item.listItemSelected{color:#2466ea;background:#e9f0fe;border-left:.143rem solid #2466ea}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ui.list .item.nested{padding-left:2.285rem}.mobile-view .ant-drawer.cap-hamburger-menu .ant-drawer-content-wrapper .ant-drawer-body .ant-drawer-footer{font-size:1rem;font-family:"Roboto-Regular",sans-serif;border-top:.071rem solid #e8e8e8;padding:.857rem;position:fixed;bottom:0;width:75%}.mobile-view .org-select-selection{width:105%;display:flex;align-items:center;font-family:"Roboto",sans-serif;font-weight:400;justify-content:space-between;cursor:pointer;margin:.571rem 0;height:2.285rem;border:.071rem solid rgba(0,0,0,0)}.mobile-view .org-select-selection.open{border-radius:.285rem;border:.071rem solid #b3bac5}.mobile-view .org-select-selection.secondary-select{margin-left:0}.mobile-view .org-select-selected-value{font-size:1rem;font-weight:500;display:flex;align-items:center}.mobile-view .org-select-overflow-ellipsis{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding:.071rem 0 0}.mobile-view .org-select-selected-value-label{max-width:10.714rem}.mobile-view .org-select-selected-ou-value-label{display:inline-flex;align-items:baseline;justify-content:space-between;width:10.714rem}.mobile-view .org-select-selected-icon{margin-right:.571rem}.mobile-view .org-select-selected-icon{display:flex;align-items:center;position:relative;height:2.285rem;width:2.285rem;margin-right:.857rem}.mobile-view .org-select-selected-icon svg{background:#dfe2e7;border-radius:.857rem}.mobile-view .org-select-selected-icon .text-label{font-size:1rem;font-family:"Roboto-Regular",sans-serif;position:absolute;right:50%;top:50%;transform:translate(50%, -50%);line-height:1rem}.mobile-view .oval{width:3.428rem;height:3.428rem;background:#dfe2e7;border-radius:50%;margin:0 1.142rem 0 3.714rem}.mobile-view .org-select-header{padding:.571rem 1.142rem 1.428rem 1.142rem;font-size:1rem;font-weight:500}.mobile-view .org-select-select-item,.mobile-view .org-select-select-ou-org-item,.mobile-view .org-select-select-ou-item{cursor:pointer}.mobile-view .org-select-select-item:hover,.mobile-view .org-select-select-ou-org-item:hover,.mobile-view .org-select-select-ou-item:hover{background-color:#faf9f4}.mobile-view .org-select-select-item.selected,.mobile-view .org-select-select-ou-org-item.selected,.mobile-view .org-select-select-ou-item.selected{color:#2466ea;font-weight:500;position:relative;background-color:rgba(36,102,234,.1)}.mobile-view .org-select-select-item.selected:before,.mobile-view .org-select-select-ou-org-item.selected:before,.mobile-view .org-select-select-ou-item.selected:before{content:" ";width:.143rem;height:100%;left:0;top:0;position:absolute;background-color:#2466ea}.mobile-view .org-select-select-item{padding:.571rem .571rem .571rem 1.714rem}.mobile-view .org-select-select-ou-org-item{padding:.571rem .571rem .571rem .571rem}.mobile-view .org-select-select-ou-item{padding:.571rem 1.142rem .571rem 2.857rem;display:flex;justify-content:space-between;align-items:baseline}.mobile-view .org-select-no-results{display:flex;justify-content:center;flex-direction:column}.mobile-view .org-select-no-results .org-select-no-results-wrapper{position:relative}.mobile-view .org-select-no-results .org-select-no-results-wrapper .org-select-no-results-image{height:7.143rem;width:7.143rem;border-radius:50%;background:#f4f5f7;text-align:center;padding:.929rem 1.071rem;position:absolute;left:50%;transform:translate(-50%, 0%)}.mobile-view .org-select-no-results .org-select-no-results-wrapper .org-select-no-results-image .cap-icon-v2{font-size:5.286rem}.mobile-view .org-select-no-results .org-select-no-results-text{margin-top:7.714rem;text-align:center;color:#5e6c84;font-size:1rem}.mobile-view .ant-popover.org-select-popover{padding-top:0;width:18.571rem}.mobile-view .ant-popover.org-select-popover .ant-popover-inner-content{padding-left:0;padding-right:0}.mobile-view .ant-popover.org-select-popover .ant-popover-arrow{display:none}.mobile-view .org-select-search{padding:0 1.142rem 1.142rem 1.142rem}.mobile-view .org-select-items-wrapper{max-height:14.286rem;padding:0 1.142rem}.mobile-view .org-select-arrow{margin-right:.571rem}.mobile-view .org-select-slidebox .cap-slide-box-v2-container{width:100vw;min-width:100vw;max-width:100vw}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header{padding:1.142rem;height:4rem}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header .back-icon{margin-right:.857rem;vertical-align:text-top}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header .back-icon+span{font-size:1.428rem}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-header .cap-slide-box-v2-close-icon{display:none}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container{padding:0 !important;overflow-y:hidden}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-search .ant-input-prefix .cap-icon-v2{color:#5e6c84 !important}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-search .ant-input-lg{font-size:1rem;padding:.143rem 2rem .214rem 2.285rem}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-product{height:2.571rem;line-height:2.571rem;padding:0 2.285rem}.mobile-view .org-select-slidebox .cap-slide-box-v2-container .slidebox-content-container .org-select-product.selected{font-weight:500;color:#2466ea;background:#e9f0fe;border-left:.143rem solid #2466ea}.hamburgerIcon{height:2rem;width:2rem}.capLogo{height:1.857rem;width:1.857rem}.moreApplicationsIcon{height:1.714rem;width:1.714rem;margin-bottom:.071rem;margin-right:.643rem !important}`, ""]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"mobile-view": `mobile-view`,
-	"ant-drawer": `ant-drawer`,
-	"cap-hamburger-menu": `cap-hamburger-menu`,
-	"ant-drawer-left": `ant-drawer-left`,
-	"ant-drawer-content-wrapper": `ant-drawer-content-wrapper`,
-	"ant-drawer-header": `ant-drawer-header`,
-	"ant-drawer-title": `ant-drawer-title`,
-	"name": `name`,
-	"user-name": `user-name`,
-	"ant-drawer-body": `ant-drawer-body`,
-	"ui": `ui`,
-	"list": `list`,
-	"item": `item`,
-	"item-label": `item-label`,
-	"cap-icon-v2": `cap-icon-v2`,
-	"selected": `selected`,
-	"nested": `nested`,
-	"ant-drawer-footer": `ant-drawer-footer`,
 	"org-select-selection": `org-select-selection`,
 	"open": `open`,
 	"secondary-select": `secondary-select`,
@@ -17023,14 +17006,13 @@ ___CSS_LOADER_EXPORT___.locals = {
 	"org-select-select-item": `org-select-select-item`,
 	"org-select-select-ou-org-item": `org-select-select-ou-org-item`,
 	"org-select-select-ou-item": `org-select-select-ou-item`,
+	"selected": `selected`,
 	"org-select-no-results": `org-select-no-results`,
 	"org-select-no-results-wrapper": `org-select-no-results-wrapper`,
 	"org-select-no-results-image": `org-select-no-results-image`,
+	"cap-icon-v2": `cap-icon-v2`,
 	"org-select-no-results-text": `org-select-no-results-text`,
-	"ant-popover": `ant-popover`,
 	"org-select-popover": `org-select-popover`,
-	"ant-popover-inner-content": `ant-popover-inner-content`,
-	"ant-popover-arrow": `ant-popover-arrow`,
 	"org-select-search": `org-select-search`,
 	"org-select-items-wrapper": `org-select-items-wrapper`,
 	"org-select-arrow": `org-select-arrow`,
@@ -17040,9 +17022,10 @@ ___CSS_LOADER_EXPORT___.locals = {
 	"back-icon": `back-icon`,
 	"cap-slide-box-v2-close-icon": `cap-slide-box-v2-close-icon`,
 	"slidebox-content-container": `slidebox-content-container`,
-	"ant-input-prefix": `ant-input-prefix`,
-	"ant-input-lg": `ant-input-lg`,
-	"org-select-product": `org-select-product`
+	"org-select-product": `org-select-product`,
+	"hamburgerIcon": `hamburgerIcon`,
+	"capLogo": `capLogo`,
+	"moreApplicationsIcon": `moreApplicationsIcon`
 };
 module.exports = ___CSS_LOADER_EXPORT___;
 
@@ -17354,14 +17337,6 @@ var update = _node_modules_style_loader_dist_runtime_injectStylesIntoStyleTag_js
        /* harmony default export */ const __WEBPACK_DEFAULT_EXPORT__ = ((_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default()) && (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) ? (_node_modules_css_loader_dist_cjs_js_ruleSet_1_rules_1_use_1_node_modules_sass_loader_dist_cjs_js_ruleSet_1_rules_1_use_2_styles_scss__WEBPACK_IMPORTED_MODULE_5___default().locals) : undefined);
 
 
-/***/ }),
-
-/***/ 76480:
-/***/ ((module) => {
-
-"use strict";
-module.exports = require("styled-components");
-
 /***/ }),
 
 /***/ 76545:
@@ -21614,11 +21589,9 @@ var _forOwn = _interopRequireDefault(__webpack_require__(33215));
 var _get = _interopRequireDefault(__webpack_require__(58156));
 var _isEmpty = _interopRequireDefault(__webpack_require__(62193));
 var _isEqual = _interopRequireDefault(__webpack_require__(2404));
-var _propTypes = _interopRequireDefault(__webpack_require__(43363));
-var _react = _interopRequireDefault(__webpack_require__(9206));
-var Virtualized = _interopRequireWildcard(__webpack_require__(40861));
+var _react = _interopRequireWildcard(__webpack_require__(9206));
+var _reactVirtuoso = __webpack_require__(18073);
 var _semanticUiReact = __webpack_require__(96117);
-var _styledComponents = _interopRequireDefault(__webpack_require__(76480));
 var _icons = __webpack_require__(30775);
 var _CapColumn = _interopRequireDefault(__webpack_require__(4757));
 var _CapDrawer = _interopRequireDefault(__webpack_require__(78716));
@@ -21629,624 +21602,605 @@ var _CapLabel = _interopRequireDefault(__webpack_require__(92675));
 var _CapRow = _interopRequireDefault(__webpack_require__(69813));
 var _CapSlideBox = _interopRequireDefault(__webpack_require__(70225));
 var styledVars = _interopRequireWildcard(__webpack_require__(56587));
-__webpack_require__(27945);
+var _styles = _interopRequireDefault(__webpack_require__(27945));
 var _jsxRuntime = __webpack_require__(74848);
-var _templateObject, _templateObject2, _templateObject3;
+const _excluded = ["goToHome", "placement", "productName", "userData", "loadStorageItem", "changeOrgEntity", "selectOrganization", "sidebarContent", "selectedSidebarItem", "onSidebarClick", "noResultsText", "footer", "screenHeight", "screenWidth", "insights", "selectProduct", "defaultSelectedProduct"];
+/* 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 { LogoBackground } from '../assets/icons';
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-function _taggedTemplateLiteralLoose(e, t) { return t || (t = e.slice(0)), e.raw = t, e; }
-const clsPrefix = 'org-select';
+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; }
 const capLogo = __webpack_require__(73770);
 const hamburgerIcon = __webpack_require__(94052);
 const moreApplications = __webpack_require__(39761);
 const PRODUCT_MASTERS = 'masters';
-const HamburgerIcon = _styledComponents.default.img(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  height: 28px;\n  width: 28px;\n"])));
-const CapLogo = _styledComponents.default.img(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  height: 26px;\n  width: 26px;\n"])));
-const MoreApplicationsIcon = _styledComponents.default.img(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  height: 24px;\n  width: 24px;\n  margin-bottom: 1px;\n  margin-right: 9px !important;\n"])));
-class CapHamburgerMenu extends _react.default.Component {
-  constructor(_props) {
-    var _this;
-    super(_props);
-    _this = this;
-    this.capitalize = function (text) {
-      if (text === void 0) {
-        text = '';
-      }
-      return text.charAt(0).toUpperCase() + text.slice(1).toLowerCase();
-    };
-    this.setOrgSelectionBoxOpen = val => this.setState({
-      orgSelectionBoxOpen: val
-    });
-    this.toggleIsOpen = () => this.setState(prevState => ({
-      isOpen: !prevState.isOpen
-    }));
-    this.toggleMenuItemExpanded = i => this.setState(prevState => {
+const CapHamburgerMenu = _ref => {
+  let {
+      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
+  const initialMenuItems = (0, _react.useMemo)(() => {
+    const menuItems = [];
+    if (!(0, _isEmpty.default)(sidebarContent)) {
+      sidebarContent.forEach((item, i) => {
+        if (!(0, _isEmpty.default)(item.children)) {
+          menuItems.push({
+            label: item.label,
+            hasChildren: true,
+            expanded: i === 0,
+            children: item.children
+          });
+        } else {
+          menuItems.push({
+            label: item.label,
+            value: item.value // Store value for reference, even though MenuItemWithState doesn't require it
+          });
+        }
+      });
+    }
+    return menuItems;
+  }, [sidebarContent]);
+
+  // Helper function to get proxy org list
+  const getProxyOrgList = props => {
+    const {
+      userData: data = {}
+    } = props;
+    const proxyOrgList = [];
+    if (data != null && data.user && Object.keys(data.user).length > 0) {
       const {
-        menuItems = []
-      } = prevState;
-      menuItems[i].expanded = !menuItems[i].expanded;
-      return {
-        menuItems
-      };
-    });
-    this.getOuList = orgItem => {
+        orgDetails = {},
+        user = {}
+      } = data;
       const {
-        ouList = []
-      } = orgItem;
-      const accessibleOus = [];
-      if (ouList.length) {
-        ouList.forEach(item => {
-          accessibleOus.push({
-            label: item.ouName,
-            value: item.ouID,
-            key: item.ouID
-          });
-        });
-      }
-      return accessibleOus;
-    };
-    this.getProxyOrgList = function (props) {
-      if (props === void 0) {
-        props = _this.props;
-      }
+        name: selectedOrgName
+      } = orgDetails;
+      let {
+        org_id: selectedOrgId
+      } = orgDetails;
       const {
-        userData = {}
-      } = props;
-      const proxyOrgList = [];
-      if (userData && userData.user && userData.user !== '') {
-        const {
-          orgDetails = {},
-          user = {}
-        } = userData;
-        const {
-          name: selectedOrgName
-        } = orgDetails;
-        let {
-          org_id: selectedOrgId
-        } = orgDetails;
-        const {
-          proxyOrgList: orgList = [],
-          accessibleOUList
-        } = user;
-        // fetching current selected org details and adding to org list dropdown
-        if (!(0, _isEmpty.default)(selectedOrgId)) {
-          selectedOrgId = parseInt(selectedOrgId, 10);
-          const selectedOrg = {
-            label: selectedOrgName,
-            value: selectedOrgId,
-            key: selectedOrgId
-          };
-          // add ou list for selected org if available
-          if (!(0, _isEmpty.default)(accessibleOUList)) {
-            selectedOrg.accessibleOus = [];
-            (0, _forOwn.default)(accessibleOUList, (ouId, ouName) => {
-              selectedOrg.accessibleOus.push({
-                label: ouName,
-                value: ouId,
-                key: ouId
-              });
+        proxyOrgList: orgList = [],
+        accessibleOUList
+      } = user;
+
+      // Fetching current selected org details and adding to org list dropdown
+      if (!(0, _isEmpty.default)(selectedOrgId)) {
+        selectedOrgId = parseInt(String(selectedOrgId), 10);
+        const selectedOrg = {
+          label: selectedOrgName || '',
+          value: selectedOrgId,
+          key: selectedOrgId
+        };
+
+        // Add ou list for selected org if available
+        if (!(0, _isEmpty.default)(accessibleOUList)) {
+          selectedOrg.accessibleOus = [];
+          (0, _forOwn.default)(accessibleOUList, (ouId, ouName) => {
+            var _selectedOrg$accessib;
+            (_selectedOrg$accessib = selectedOrg.accessibleOus) == null || _selectedOrg$accessib.push({
+              label: ouName,
+              value: ouId,
+              key: ouId
             });
-          }
-          proxyOrgList.push(selectedOrg);
-        }
-        if (orgList && orgList.length) {
-          orgList.forEach(item => {
-            if (parseInt(item.orgID, 10) !== parseInt(selectedOrgId, 10)) {
-              const id = parseInt(item.orgID, 10);
-              const name = item.orgName;
-              const orgObj = {
-                label: name,
-                value: id,
-                key: id
-              };
-              if (item.ouList) {
-                orgObj.accessibleOus = _this.getOuList(item);
-              }
-              proxyOrgList.push(orgObj);
-            }
           });
         }
+        proxyOrgList.push(selectedOrg);
       }
-      return proxyOrgList;
-    };
-    this.getProductList = () => {
-      const {
-        currentOrgDetails = {}
-      } = this.props.userData;
-      const {
-        module_details: moduleDetails = []
-      } = currentOrgDetails;
-      const productsList = [];
-      if (Object.keys(currentOrgDetails).length !== 0) {
-        moduleDetails.forEach(module => {
-          if (module.name.toLowerCase() !== PRODUCT_MASTERS) {
-            const productName = module.namespace;
-            const intlProductName = this.props[productName];
-            const moduleName = intlProductName || module.name.toLowerCase();
-            productsList.push({
-              value: moduleName,
-              url: module.url,
-              key: module.code
-            });
+      if (orgList && orgList.length) {
+        orgList.forEach(item => {
+          if (parseInt(String(item.orgID), 10) !== parseInt(String(selectedOrgId), 10)) {
+            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);
+            }
+            proxyOrgList.push(orgObj);
           }
         });
-        // below change is temporary and should be fixed once we get correct modules list
-        // adding insights+ to module list
-        // if (Auth.hasAccess(CAMP_REPORT_VIEW)) {
+      }
+    }
+    return proxyOrgList;
+  };
+  const getOuList = orgItem => {
+    const {
+      ouList = []
+    } = orgItem;
+    const accessibleOus = [];
+    if (ouList.length) {
+      ouList.forEach(item => {
+        accessibleOus.push({
+          label: item.ouName,
+          value: item.ouID,
+          key: item.ouID
+        });
+      });
+    }
+    return accessibleOus;
+  };
+  const [isOpen, setIsOpen] = (0, _react.useState)(false);
+  const [orgList, setOrgList] = (0, _react.useState)(() => getProxyOrgList(_extends({
+    userData,
+    loadStorageItem,
+    changeOrgEntity,
+    selectOrganization,
+    sidebarContent,
+    selectedSidebarItem,
+    onSidebarClick,
+    noResultsText,
+    footer,
+    screenHeight,
+    screenWidth,
+    insights,
+    selectProduct,
+    defaultSelectedProduct
+  }, restProps)));
+  const [menuItems, setMenuItems] = (0, _react.useState)(initialMenuItems);
+  const [orgSearchText, setOrgSearchText] = (0, _react.useState)('');
+  const [orgSelectionBoxOpen, setOrgSelectionBoxOpen] = (0, _react.useState)(false);
+  const [productListOpen, setProductListOpen] = (0, _react.useState)(false);
+  const prevUserRef = (0, _react.useRef)((0, _get.default)(userData, 'user'));
+  const prevSidebarContentRef = (0, _react.useRef)(sidebarContent);
+
+  // Update orgList when userData.user changes (mimicking componentWillReceiveProps behavior)
+  (0, _react.useEffect)(() => {
+    const currentUser = (0, _get.default)(userData, 'user');
+    if (!(0, _isEmpty.default)(currentUser) && !(0, _isEqual.default)(currentUser, prevUserRef.current)) {
+      prevUserRef.current = currentUser;
+      setOrgList(getProxyOrgList(_extends({
+        userData,
+        loadStorageItem,
+        changeOrgEntity,
+        selectOrganization,
+        sidebarContent,
+        selectedSidebarItem,
+        onSidebarClick,
+        noResultsText,
+        footer,
+        screenHeight,
+        screenWidth,
+        insights,
+        selectProduct,
+        defaultSelectedProduct
+      }, 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
+  (0, _react.useEffect)(() => {
+    // Only update if sidebarContent actually changed (deep comparison) to prevent infinite loops
+    if (!(0, _isEqual.default)(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
+
+  const capitalize = function (text) {
+    if (text === void 0) {
+      text = '';
+    }
+    return 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], {
+          expanded: !newMenuItems[i].expanded
+        });
+      }
+      return newMenuItems;
+    });
+  };
+  const getProductList = () => {
+    const {
+      currentOrgDetails = {}
+    } = userData;
+    const {
+      module_details: moduleDetails = []
+    } = currentOrgDetails;
+    const productsList = [];
+    if (Object.keys(currentOrgDetails).length !== 0) {
+      moduleDetails.forEach(module => {
+        if (module.name.toLowerCase() !== PRODUCT_MASTERS) {
+          const productName = module.namespace;
+          const intlProductName = restProps[productName];
+          const moduleName = intlProductName || module.name.toLowerCase();
+          productsList.push({
+            value: moduleName,
+            url: module.url,
+            key: module.code
+          });
+        }
+      });
+      // Below change is temporary and should be fixed once we get correct modules list
+      // Adding insights+ to module list
+      if (insights) {
         productsList.push({
-          value: this.props.insights,
+          value: insights,
           url: 'analytics/v2/',
           key: 'insights'
         });
-        // }
       }
-      return productsList;
-    };
-    this.handleProductChange = product => {
-      if (product.url !== window.location.pathname) {
-        window.location.pathname = product.url;
-      }
-    };
-    this.rowRenderer = (_ref, itemsList) => {
-      let {
-        index,
-        isScrolling: _isScrolling,
-        key,
-        style
-      } = _ref;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        style: style,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: itemsList[index]
-        })
-      }, key);
-    };
-    this.orgSearchCondition = item => {
-      const {
-        orgSearchText
-      } = this.state;
-      return orgSearchText === '' || (item.label || '').toLowerCase().indexOf((orgSearchText || '').toLowerCase()) !== -1;
-    };
-    this.ouSearchCondition = item => {
-      const {
-        orgSearchText
-      } = this.state;
-      return (item.accessibleOus || []).filter(ou => ou.label.toLowerCase().includes((orgSearchText || '').toLowerCase()));
-    };
-    this.getOrgListItem = item => {
-      const selectedItem = this.props.loadStorageItem('orgID');
-      const selectedOuItem = this.props.loadStorageItem('ouId');
-      const isOuPresent = selectedOuItem !== null && selectedOuItem !== undefined && selectedOuItem !== -1;
-      const itemLabel = item.accessibleOus ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    }
+    return productsList;
+  };
+  const handleProductChange = product => {
+    if (product.url !== window.location.pathname) {
+      window.location.pathname = product.url;
+    }
+  };
+  const orgSearchCondition = item => {
+    return orgSearchText === '' || (item.label || '').toLowerCase().indexOf((orgSearchText || '').toLowerCase()) !== -1;
+  };
+  const ouSearchCondition = item => {
+    return (item.accessibleOus || []).filter(ou => ou.label.toLowerCase().includes((orgSearchText || '').toLowerCase()));
+  };
+  const getOrgListItem = item => {
+    const selectedItem = loadStorageItem == null ? void 0 : loadStorageItem('orgID');
+    const selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem('ouId');
+    const isOuPresent = selectedOuItem !== null && selectedOuItem !== undefined && selectedOuItem !== -1;
+    const itemLabel = item.accessibleOus ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
+        type: "sitemap",
+        size: "s",
         style: {
-          display: 'flex',
-          alignItems: 'center'
-        },
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
-          type: "sitemap",
-          size: "s",
-          style: {
-            marginRight: styledVars.CAP_SPACE_08
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: clsPrefix + "-overflow-ellipsis",
-          children: item.label
-        })]
-      }) : item.label;
-      const customClassname = item.accessibleOus ? clsPrefix + "-select-ou-org-item" : clsPrefix + "-select-item";
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
+          marginRight: styledVars.CAP_SPACE_08
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: _styles.default['org-select-overflow-ellipsis'],
+        children: item.label
+      })]
+    }) : item.label;
+    const customClassname = item.accessibleOus ? _styles.default['org-select-select-ou-org-item'] : _styles.default['org-select-select-item'];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
+      type: "h6",
+      onClick: () => handleChange(item),
+      className: (0, _classnames.default)(customClassname, {
+        [_styles.default.selected]: selectedItem === item.value && !isOuPresent
+      }, _styles.default['org-select-overflow-ellipsis']),
+      title: item.label,
+      children: itemLabel
+    }, "org-key-" + item.key);
+  };
+  const getOuListItem = (item, ou) => {
+    const selectedOuItem = loadStorageItem == null ? void 0 : loadStorageItem('ouId');
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(_styles.default['org-select-select-ou-item'], {
+        [_styles.default.selected]: selectedOuItem === ou.value
+      }),
+      onClick: () => handleChange(item, ou),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
         type: "h6",
-        onClick: () => this.handleChange(item),
-        className: (0, _classnames.default)(customClassname, {
-          selected: selectedItem === item.value && !isOuPresent
-        }, clsPrefix + "-overflow-ellipsis"),
+        style: {
+          maxWidth: 125
+        },
+        className: _styles.default['org-select-overflow-ellipsis'],
+        title: ou.label,
+        children: ou.label
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+        type: "label3",
+        style: {
+          maxWidth: 70
+        },
+        className: _styles.default['org-select-overflow-ellipsis'],
         title: item.label,
-        children: itemLabel
-      }, "org-key-" + item.key);
-    };
-    this.getOuListItem = (item, ou) => {
-      const selectedOuItem = this.props.loadStorageItem('ouId');
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)(clsPrefix + "-select-ou-item", {
-          selected: selectedOuItem === ou.value
-        }),
-        onClick: () => this.handleChange(item, ou),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
-          type: "h6",
-          style: {
-            maxWidth: 125
-          },
-          className: clsPrefix + "-overflow-ellipsis",
-          title: ou.label,
-          children: ou.label
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
-          type: "label3",
-          style: {
-            maxWidth: 70
-          },
-          className: clsPrefix + "-overflow-ellipsis",
-          title: item.label,
-          children: item.label
-        })]
-      }, "ou-key-" + ou.key);
-    };
-    this.getOrgItems = () => {
-      const {
-        orgList = []
-      } = this.state;
-      const dropdownItems = [];
-      orgList.forEach(item => {
-        if (this.orgSearchCondition(item)) {
-          dropdownItems.push(this.getOrgListItem(item));
-        }
-        if (item.accessibleOus) {
-          const ouList = this.orgSearchCondition(item) ? item.accessibleOus : this.ouSearchCondition(item);
-          ouList.forEach(ou => {
-            if (ou.key !== -1) {
-              dropdownItems.push(this.getOuListItem(item, ou));
-            }
-          });
-        }
-      });
-      return dropdownItems;
-    };
-    this.handleSearch = e => this.setState({
-      orgSearchText: e.target.value
-    });
-    this.clearSearch = () => this.setState({
-      orgSearchText: ''
-    });
-    this.handleChange = function (item, ou) {
-      if (ou === void 0) {
-        ou = {};
+        children: item.label
+      })]
+    }, "ou-key-" + ou.key);
+  };
+  const getOrgItems = () => {
+    const dropdownItems = [];
+    orgList.forEach(item => {
+      if (orgSearchCondition(item)) {
+        dropdownItems.push(getOrgListItem(item));
       }
-      const selectedItem = _this.props.loadStorageItem('orgID');
-      const selectedOuItem = _this.props.loadStorageItem('ouId');
-      _this.hideOrgSlidebox();
-      if (selectedItem !== item.value || selectedOuItem !== ou.value) {
-        _this.props.changeOrgEntity(item.value, ou.value);
+      if (item.accessibleOus) {
+        const ouList = orgSearchCondition(item) ? item.accessibleOus : ouSearchCondition(item);
+        ouList.forEach(ou => {
+          if (ou.key !== -1) {
+            dropdownItems.push(getOuListItem(item, ou));
+          }
+        });
       }
-    };
-    this.hideOrgSlidebox = () => this.setState({
-      orgSelectionBoxOpen: false,
-      orgSearchText: ''
     });
-    this.renderOrgList = () => {
-      const {
-        selectOrganization,
-        noResultsText,
-        screenHeight,
-        screenWidth
-      } = this.props;
-      const {
-        orgSearchText = ''
-      } = this.state;
-      const itemsHtml = this.getOrgItems();
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapInput.default.Search, {
-          placeholder: selectOrganization,
-          onChange: this.handleSearch,
-          value: orgSearchText,
-          onClear: this.clearSearch,
-          className: (0, _classnames.default)(clsPrefix + "-search")
-        }), itemsHtml.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-          className: (0, _classnames.default)(clsPrefix + "-items-wrapper"),
+    return dropdownItems;
+  };
+  const handleSearch = e => setOrgSearchText(e.target.value);
+  const clearSearch = () => setOrgSearchText('');
+  const handleChange = function (item, ou) {
+    if (ou === void 0) {
+      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);
+    }
+  };
+  const hideOrgSlidebox = () => {
+    setOrgSelectionBoxOpen(false);
+    setOrgSearchText('');
+  };
+  const renderOrgList = () => {
+    const itemsHtml = getOrgItems();
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapInput.default.Search, {
+        placeholder: selectOrganization,
+        onChange: handleSearch,
+        value: orgSearchText,
+        onClear: clearSearch,
+        className: (0, _classnames.default)(_styles.default['org-select-search'])
+      }), itemsHtml.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _classnames.default)(_styles.default['org-select-items-wrapper']),
+        style: {
+          height: screenHeight ? screenHeight - 112 : undefined,
+          maxHeight: screenHeight ? screenHeight - 112 : undefined,
+          overflowY: 'auto'
+        },
+        children: screenWidth && screenHeight && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
           style: {
-            height: screenHeight - 112,
-            maxHeight: screenHeight - 112,
-            overflowY: 'auto'
-          },
-          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Virtualized.List, {
-            rowCount: (itemsHtml || []).length,
             width: screenWidth - 30,
-            height: screenHeight - 60,
-            rowHeight: 36,
-            rowRenderer: value => this.rowRenderer(value, itemsHtml),
-            overscanRowCount: 5
-          })
-        }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: (0, _classnames.default)(clsPrefix + "-no-results"),
-          style: {
-            height: screenHeight - 175
+            height: screenHeight - 60
           },
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames.default)(clsPrefix + "-no-results-wrapper"),
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames.default)(clsPrefix + "-no-results-image"),
-              children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
-                style: {
-                  color: styledVars.CAP_G06
-                },
-                type: "alert"
-              })
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: (0, _classnames.default)(clsPrefix + "-no-results-text"),
-            children: noResultsText
-          })]
-        })]
-      });
-    };
-    this.renderOrgSelectionBox = () => {
-      const {
-        selectOrganization
-      } = this.props;
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapSlideBox.default, {
-        header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "material-icons back-icon",
-            onClick: () => this.hideOrgSlidebox(),
-            children: "arrow_back"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: selectOrganization
-          })]
-        }),
-        show: this.state.orgSelectionBoxOpen,
-        size: "size-l",
-        className: clsPrefix + "-slidebox",
-        content: this.renderOrgList(),
-        handleClose: () => this.hideOrgSlidebox()
-      });
-    };
-    this.renderProductList = () => {
-      const {
-        selectProduct,
-        defaultSelectedProduct
-      } = this.props;
-      const productList = this.getProductList();
-      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapSlideBox.default, {
-        header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
-            className: "material-icons back-icon",
-            onClick: () => this.setState({
-              productListOpen: false
-            }),
-            children: "arrow_back"
-          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: selectProduct
-          })]
-        }),
-        show: this.state.productListOpen,
-        size: "size-l",
-        className: clsPrefix + "-slidebox",
-        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-          children: productList.map(product => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            onClick: () => this.handleProductChange(product),
-            className: clsPrefix + "-product" + (product.value === defaultSelectedProduct ? ' selected' : ''),
-            children: this.capitalize(product.value)
-          }, product.key || product.name))
-        }),
-        handleClose: () => this.setState({
-          productListOpen: false
+          totalCount: (itemsHtml || []).length,
+          fixedItemHeight: 36,
+          itemContent: index => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: itemsHtml[index]
+          }),
+          overscan: 5
         })
-      });
-    };
-    this.renderSelectedOrg = () => {
-      const {
-        loadStorageItem,
-        selectOrganization
-      } = this.props;
-      const {
-        orgList = []
-      } = this.state;
-      const selectedOrg = loadStorageItem('orgID');
-      const selectedOu = loadStorageItem('ouId');
-      const selectedItemIndex = (0, _findIndex.default)(orgList, item => item.value === selectedOrg);
-      const itemDetails = orgList[selectedItemIndex] || {};
-      let selectedOuItemIndex = -1;
-      if (selectedOu && selectedOu !== -1) {
-        selectedOuItemIndex = (0, _findIndex.default)(itemDetails.accessibleOus, ou => ou.value === selectedOu);
-      }
-      let selectedItemLabel = selectOrganization;
-      if (selectedItemIndex !== -1) {
-        selectedItemLabel = itemDetails.label;
-      }
-      if (selectedOuItemIndex !== -1) {
-        selectedItemLabel = itemDetails.accessibleOus[selectedOuItemIndex].label;
-      }
-      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: (0, _classnames.default)(clsPrefix + "-selection"),
-        onClick: () => this.setOrgSelectionBoxOpen(true),
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-          className: clsPrefix + "-selected-value",
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: clsPrefix + "-selected-icon",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LogoBackground, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "text-label",
-              children: selectedItemLabel[0]
-            })]
-          }), selectedOuItemIndex !== -1 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-            className: clsPrefix + "-selected-ou-value-label",
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
-              type: "h4",
-              style: {
-                maxWidth: 110
-              },
-              className: clsPrefix + "-overflow-ellipsis",
-              title: selectedItemLabel,
-              children: selectedItemLabel
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
-              type: "label3",
+      }) : /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _classnames.default)(_styles.default['org-select-no-results']),
+        style: {
+          height: screenHeight ? screenHeight - 175 : undefined
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)(_styles.default['org-select-no-results-wrapper']),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: (0, _classnames.default)(_styles.default['org-select-no-results-image']),
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
               style: {
-                maxWidth: 70
+                color: styledVars.CAP_G06
               },
-              className: clsPrefix + "-overflow-ellipsis",
-              title: itemDetails.label,
-              children: itemDetails.label
-            })]
-          }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
+              type: "alert"
+            })
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: (0, _classnames.default)(_styles.default['org-select-no-results-text']),
+          children: noResultsText
+        })]
+      })]
+    });
+  };
+  const renderOrgSelectionBox = () => {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapSlideBox.default, {
+      header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "material-icons back-icon",
+          onClick: hideOrgSlidebox,
+          children: "arrow_back"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: selectOrganization
+        })]
+      }),
+      show: orgSelectionBoxOpen,
+      size: "size-l",
+      className: _styles.default['org-select-slidebox'],
+      content: renderOrgList(),
+      handleClose: hideOrgSlidebox
+    });
+  };
+  const renderProductList = () => {
+    const productList = getProductList();
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapSlideBox.default, {
+      header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("i", {
+          className: "material-icons back-icon",
+          onClick: () => setProductListOpen(false),
+          children: "arrow_back"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+          children: selectProduct
+        })]
+      }),
+      show: productListOpen,
+      size: "size-l",
+      className: _styles.default['org-select-slidebox'],
+      content: /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+        children: productList.map(product => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          onClick: () => handleProductChange(product),
+          className: (0, _classnames.default)(_styles.default['org-select-product'], {
+            [_styles.default.selected]: product.value === defaultSelectedProduct
+          }),
+          children: capitalize(product.value)
+        }, product.key || product.value))
+      }),
+      handleClose: () => setProductListOpen(false)
+    });
+  };
+  const renderSelectedOrg = () => {
+    const selectedOrg = loadStorageItem == null ? void 0 : loadStorageItem('orgID');
+    const selectedOu = loadStorageItem == null ? void 0 : loadStorageItem('ouId');
+    const selectedItemIndex = (0, _findIndex.default)(orgList, item => item.value === selectedOrg);
+    const itemDetails = orgList[selectedItemIndex] || {};
+    let selectedOuItemIndex = -1;
+    if (selectedOu && selectedOu !== -1) {
+      selectedOuItemIndex = (0, _findIndex.default)(itemDetails.accessibleOus || [], ou => ou.value === selectedOu);
+    }
+    let selectedItemLabel = selectOrganization || '';
+    if (selectedItemIndex !== -1) {
+      selectedItemLabel = itemDetails.label;
+    }
+    if (selectedOuItemIndex !== -1 && itemDetails.accessibleOus) {
+      selectedItemLabel = itemDetails.accessibleOus[selectedOuItemIndex].label;
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: (0, _classnames.default)(_styles.default['org-select-selection']),
+      onClick: () => setOrgSelectionBoxOpen(true),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: _styles.default['org-select-selected-value'],
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _styles.default['org-select-selected-icon'],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.LogoBackground, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: _styles.default['text-label'],
+            children: selectedItemLabel[0] || ''
+          })]
+        }), selectedOuItemIndex !== -1 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: _styles.default['org-select-selected-ou-value-label'],
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
             type: "h4",
-            className: (0, _classnames.default)(clsPrefix + "-selected-value-label", clsPrefix + "-overflow-ellipsis"),
+            style: {
+              maxWidth: 110
+            },
+            className: _styles.default['org-select-overflow-ellipsis'],
             title: selectedItemLabel,
             children: selectedItemLabel
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapLabel.default, {
+            type: "label3",
+            style: {
+              maxWidth: 70
+            },
+            className: _styles.default['org-select-overflow-ellipsis'],
+            title: itemDetails.label,
+            children: itemDetails.label
           })]
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
-          type: "chevron-right",
-          className: (0, _classnames.default)(clsPrefix + "-arrow")
+        }) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapHeading.default, {
+          type: "h4",
+          className: (0, _classnames.default)(_styles.default['org-select-selected-value-label'], _styles.default['org-select-overflow-ellipsis']),
+          title: selectedItemLabel,
+          children: selectedItemLabel
         })]
-      });
-    };
-    this.renderSidebarContent = () => {
-      const {
-        sidebarContent = [],
-        selectedSidebarItem,
-        onSidebarClick,
-        footer = ''
-      } = this.props;
-      if (!(0, _isEmpty.default)(sidebarContent)) {
-        return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.List, {
-            children: this.state.menuItems.map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.List.Item, {
-                onClick: () => item.hasChildren ? this.toggleMenuItemExpanded(i) : '',
-                children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
-                  span: 24,
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColumn.default, {
-                    className: "item-label",
-                    span: 22,
-                    children: item.label
-                  }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapColumn.default, {
-                    span: 2,
-                    children: [item.hasChildren && item.expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
-                      type: "chevron-up",
-                      className: (0, _classnames.default)(clsPrefix + "-arrow")
-                    }), item.hasChildren && !item.expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
-                      type: "chevron-down",
-                      className: (0, _classnames.default)(clsPrefix + "-arrow")
-                    })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
+        type: "chevron-right",
+        className: (0, _classnames.default)(_styles.default['org-select-arrow'])
+      })]
+    });
+  };
+  const renderSidebarContent = () => {
+    if (!(0, _isEmpty.default)(sidebarContent)) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.List, {
+          children: menuItems.map((item, i) => /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.List.Item, {
+              onClick: () => item.hasChildren ? toggleMenuItemExpanded(i) : undefined,
+              children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapRow.default, {
+                children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColumn.default, {
+                  className: "item-label",
+                  span: 22,
+                  children: item.label
+                }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_CapColumn.default, {
+                  span: 2,
+                  children: [item.hasChildren && item.expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
+                    type: "chevron-up",
+                    className: (0, _classnames.default)(_styles.default['org-select-arrow'])
+                  }), item.hasChildren && !item.expanded && /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapIcon.default, {
+                    type: "chevron-down",
+                    className: (0, _classnames.default)(_styles.default['org-select-arrow'])
                   })]
-                })
-              }), item.expanded ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
-                children: item.children.map(childItem => /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.List.Item, {
-                  className: "nested" + (childItem.value === selectedSidebarItem ? ' selected' : ''),
-                  onClick: () => childItem.value !== selectedSidebarItem && onSidebarClick(childItem),
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRow.default, {
+                })]
+              })
+            }), item.expanded && item.children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
+              children: item.children.map(childItem => /*#__PURE__*/(0, _jsxRuntime.jsx)(_semanticUiReact.List.Item, {
+                className: (0, _classnames.default)(_styles.default.nested, {
+                  [_styles.default.listItemSelected]: childItem.value === selectedSidebarItem
+                }),
+                onClick: () => childItem.value !== selectedSidebarItem && (onSidebarClick == null ? void 0 : onSidebarClick(childItem)),
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapRow.default, {
+                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColumn.default, {
+                    className: "item-label",
                     span: 24,
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapColumn.default, {
-                      className: "item-label",
-                      span: 24,
-                      children: childItem.label
-                    })
+                    children: childItem.label
                   })
-                }, childItem.value))
-              }) : '']
-            }))
-          }), this.state.isOpen && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "ant-drawer-footer",
-            children: footer
-          }), this.state.isOpen && this.renderOrgSelectionBox(), this.state.isOpen && this.renderProductList()]
-        });
-      }
-      return '';
-    };
-    const _menuItems = [];
-    if (!(0, _isEmpty.default)(_props.sidebarContent)) {
-      _props.sidebarContent.forEach((item, i) => {
-        if (!(0, _isEmpty.default)(item.children)) {
-          _menuItems.push({
-            label: item.label,
-            hasChildren: true,
-            expanded: i === 0,
-            children: item.children
-          });
-        } else {
-          _menuItems.push(item);
-        }
-      });
-    }
-    this.state = {
-      isOpen: false,
-      orgList: this.getProxyOrgList(_props),
-      menuItems: _menuItems,
-      orgSearchText: '',
-      orgSelectionBoxOpen: false,
-      productListOpen: false
-    };
-  }
-  componentWillReceiveProps(nextProps) {
-    if (!(0, _isEmpty.default)((0, _get.default)(nextProps, 'userData.user')) && !(0, _isEqual.default)((0, _get.default)(nextProps, 'userData.user'), (0, _get.default)(this.props, 'userData.user'))) {
-      this.setState({
-        orgList: this.getProxyOrgList(nextProps)
+                })
+              }, childItem.value))
+            }) : null]
+          }, "menu-item-" + i))
+        }), isOpen && footer && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: "ant-drawer-footer",
+          children: footer
+        }), isOpen && renderOrgSelectionBox(), isOpen && renderProductList()]
       });
     }
-  }
-  render() {
-    const {
-      placement = 'left',
-      productName,
-      userData = {},
-      goToHome
-    } = this.props;
-    const {
-      user = {}
-    } = userData;
-    return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "side-menu",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HamburgerIcon, {
-        onClick: this.toggleIsOpen,
-        className: "trigger",
-        src: hamburgerIcon,
-        alt: "hamburger"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapDrawer.default, {
-        title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(MoreApplicationsIcon, {
-            src: moreApplications,
-            alte: "moreApplications",
-            onClick: () => this.setState({
-              productListOpen: true
-            })
-          }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
-            onClick: () => {
-              this.toggleIsOpen();
-              goToHome();
-            },
-            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(CapLogo, {
-              src: capLogo,
-              alt: "cap-logo-mobile"
-            }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-              className: "name",
-              children: productName
-            })]
-          }), !(0, _isEmpty.default)(user.loginName) && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-            className: "user-name",
-            children: user.loginName
-          }), this.renderSelectedOrg()]
-        }),
-        className: "cap-hamburger-menu",
-        placement: placement,
-        closable: false,
-        onClose: this.toggleIsOpen,
-        visible: this.state.isOpen,
-        content: this.renderSidebarContent()
-      }, "cap-hamburger-left")]
-    });
-  }
-}
-CapHamburgerMenu.propTypes = {
-  goToHome: _propTypes.default.func,
-  placement: _propTypes.default.string,
-  productName: _propTypes.default.string,
-  userData: _propTypes.default.object,
-  loadStorageItem: _propTypes.default.func,
-  changeOrgEntity: _propTypes.default.func,
-  selectOrganization: _propTypes.default.string,
-  sidebarContent: _propTypes.default.array,
-  selectedSidebarItem: _propTypes.default.string,
-  onSidebarClick: _propTypes.default.func,
-  noResultsText: _propTypes.default.string,
-  footer: _propTypes.default.element,
-  screenHeight: _propTypes.default.number,
-  screenWidth: _propTypes.default.number,
-  insights: _propTypes.default.string,
-  selectProduct: _propTypes.default.string,
-  defaultSelectedProduct: _propTypes.default.string
+    return null;
+  };
+  const {
+    user = {}
+  } = userData;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    className: _styles.default.sideMenu,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+      onClick: toggleIsOpen,
+      className: _styles.default.hamburgerIcon,
+      src: hamburgerIcon,
+      alt: "hamburger"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_CapDrawer.default, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+          src: moreApplications,
+          alt: "moreApplications",
+          className: _styles.default.moreApplicationsIcon,
+          onClick: () => setProductListOpen(true)
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("span", {
+          onClick: () => {
+            toggleIsOpen();
+            goToHome == null || goToHome();
+          },
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("img", {
+            src: capLogo,
+            alt: "cap-logo-mobile",
+            className: _styles.default.capLogo
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+            className: "name",
+            children: productName
+          })]
+        }), !(0, _isEmpty.default)(user.loginName) && /*#__PURE__*/(0, _jsxRuntime.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")]
+  });
 };
 var _default = exports["default"] = CapHamburgerMenu;
 })();