@capillarytech/blaze-ui 5.23.3-beta.2 → 5.23.3-beta.4

package/CapNavigation/index.js

@@ -1,32 +1,20 @@
-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 asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
-function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
-/**
- *
- * CapNavigation
- *
- */
-
-import classNames from 'classnames';
-import { forOwn, isEmpty } from 'lodash';
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { injectIntl } from 'react-intl';
-import CapSecondaryTopBar from "../CapSecondaryTopBar";
-import CapSideBar from "../CapSideBar";
-import CapTopBar from "../CapTopBar";
-import CapUserProfile from "../CapUserProfile";
-import LocaleHoc from "../LocaleHoc";
-import { USER_PROFILE_KEY } from "./constants";
-import messages from "./messages";
-import './styles.scss';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-var DEFAULT_MODULE = 'campaign';
-var PRODUCT_MASTERS = 'masters';
-var _STAGING = 'staging';
-// const CAMP_REPORT_VIEW = 'CAMP_REPORT_VIEW';
-
-var CapNavigation = allProps => {
-  var {
+import { jsxs, jsx } from "react/jsx-runtime";
+import classNames from "classnames";
+import { isEmpty, forOwn } from "lodash";
+import React, { useState, useRef, useEffect, useMemo } from "react";
+import { injectIntl } from "react-intl";
+import CapSecondaryTopBar from "../CapSecondaryTopBar/index.js";
+import CapSideBar from "../CapSideBar/index.js";
+import CapTopBar from "../CapTopBar/index.js";
+import WrappedCapUserProfile from "../CapUserProfile/index.js";
+import LocaleHoc from "../LocaleHoc/index.js";
+import { USER_PROFILE_KEY } from "./constants.js";
+import messages from "./messages.js";
+import styles from "./styles.module.scss.js";
+const DEFAULT_MODULE = "campaign";
+const PRODUCT_MASTERS = "masters";
+const CapNavigation = (allProps) => {
+  const {
     className,
     userData = {},
     topbarMenuData,
@@ -48,42 +36,39 @@ var CapNavigation = allProps => {
     skipStateForStorage: _skipStateForStorage = false,
     fixedOrg = false,
     history: _history,
-    publicPath: _publicPath = '',
+    publicPath: _publicPath = "",
     showDocumentationBot,
     isLatestLeftNavigationEnabled = false,
-    getNavigationConfigApi: _getNavigationConfigApi = /*#__PURE__*/_asyncToGenerator(function* () {
-      return {
-        data: []
-      };
-    }),
+    getNavigationConfigApi: _getNavigationConfigApi = async () => ({ data: [] }),
     handleGTMDataPush: _handleGTMDataPush,
-    setLeftNavbarExpandedProp = () => {},
+    setLeftNavbarExpandedProp = () => {
+    },
     pushFullUrl: _pushFullUrl = false,
-    defaultActiveKey = '',
+    defaultActiveKey = "",
     headerOverideCss = {},
     overrideCss = {},
     intl,
-    request = /*#__PURE__*/_asyncToGenerator(function* () {
-      return {};
-    }),
+    request = async () => ({}),
     getAPICallObject = () => ({}),
     changeOrgEntity,
     sidebarMenuItemClick,
     children
   } = allProps;
-  // Ensure dropdownMenuProps is an array
-  var safeDropdownMenuProps = dropdownMenuProps || [];
-  var formatMessage = (intl == null ? void 0 : intl.formatMessage) || (msg => msg.defaultMessage || msg.id);
-  var [showUserProfile, setShowUserProfile] = useState(false);
-  var renderUserProfile = () => {
-    return /*#__PURE__*/_jsx(CapUserProfile, {
-      show: showUserProfile,
-      setShowUserProfile: setShowUserProfile,
-      onClose: () => setShowUserProfile(false),
-      userData: userData
-    });
+  const safeDropdownMenuProps = dropdownMenuProps || [];
+  const formatMessage = (intl == null ? void 0 : intl.formatMessage) || ((msg) => msg.defaultMessage || msg.id);
+  const [showUserProfile, setShowUserProfile] = useState(false);
+  const renderUserProfile = () => {
+    return /* @__PURE__ */ jsx(
+      WrappedCapUserProfile,
+      {
+        show: showUserProfile,
+        setShowUserProfile,
+        onClose: () => setShowUserProfile(false),
+        userData
+      }
+    );
   };
-  if (!safeDropdownMenuProps.find(item => item.key === USER_PROFILE_KEY)) {
+  if (!safeDropdownMenuProps.find((item) => item.key === USER_PROFILE_KEY)) {
     safeDropdownMenuProps.unshift({
       label: formatMessage(messages.userProfile),
       key: USER_PROFILE_KEY,
@@ -92,348 +77,357 @@ var CapNavigation = allProps => {
       }
     });
   }
-  var handleProductChange = product => {
-    updateSelectedProduct(product.value || '');
+  const handleProductChange = (product) => {
+    updateSelectedProduct(product.value || "");
     if (product.url && product.url !== window.location.pathname) {
       window.location.pathname = product.url;
     }
   };
-  var componentWrapperRef = useRef(null);
-  var handleOrgEntityChange = (orgID, entityItem, ouId) => {
-    changeOrgEntity == null || changeOrgEntity(orgID, ouId);
+  const componentWrapperRef = useRef(null);
+  const handleOrgEntityChange = (orgID, entityItem, ouId) => {
+    changeOrgEntity == null ? void 0 : changeOrgEntity(orgID, ouId);
   };
-  var handleTopbarMenuChange = option => {
-    if (option != null && option.onClickHandler) {
+  const handleTopbarMenuChange = (option) => {
+    if (option == null ? void 0 : option.onClickHandler) {
       option.onClickHandler(option);
-    } else if (option != null && option.link) {
+    } else if (option == null ? void 0 : option.link) {
       window.location.pathname = option.link;
     }
   };
-  var handleSideBarLinkClick = item => {
-    updateSelectedSidebarMenuItem(item.key || '');
-    sidebarMenuItemClick == null || sidebarMenuItemClick(item);
+  const handleSideBarLinkClick = (item) => {
+    updateSelectedSidebarMenuItem(item.key || "");
+    sidebarMenuItemClick == null ? void 0 : sidebarMenuItemClick(item);
   };
-  var getDefaultSidebarMenuItem = () => {
-    var {
-      pathname
-    } = window.location;
-    var selectedMenuItem = defaultActiveKey || '';
-    sidebarMenuData.forEach(obj => {
+  const getDefaultSidebarMenuItem = () => {
+    const { pathname } = window.location;
+    let selectedMenuItem = defaultActiveKey || "";
+    sidebarMenuData.forEach((obj) => {
       if (obj.link === pathname && obj.key) {
         selectedMenuItem = obj.key;
       }
     });
     return selectedMenuItem;
   };
-
-  // handleSetLeftNavbarExpanded kept for backward compatibility but unused since CapCollapsibleLeftNavigation is deprecated
-  var _handleSetLeftNavbarExpanded = value => {
-    setLeftNavbarExpanded(value);
-    setLeftNavbarExpandedProp(value);
-    if (componentWrapperRef.current) {
-      if (value) {
-        componentWrapperRef.current.classList.add(styles['left-nav-expanded']);
-      } else {
-        componentWrapperRef.current.classList.remove(styles['left-nav-expanded']);
-      }
-    }
-  };
-  var getProxyOrgList = () => {
-    var proxyOrgList = [];
-    if (userData && userData.user && typeof userData.user === 'object') {
-      var {
-        orgDetails = {},
-        user = {}
-      } = userData;
-      var {
-        name: selectedOrgName
-      } = orgDetails;
-      var {
-        org_id: selectedOrgId
-      } = orgDetails;
-      var orgList = user.proxyOrgList || [];
-      var accessibleOUList = user.accessibleOUList;
+  const getProxyOrgList = () => {
+    var _a, _b;
+    const proxyOrgList2 = [];
+    if (userData && userData.user && typeof userData.user === "object") {
+      const { orgDetails = {}, user = {} } = userData;
+      const { name: selectedOrgName } = orgDetails;
+      let { org_id: selectedOrgId } = orgDetails;
+      const orgList = user.proxyOrgList || [];
+      const accessibleOUList = user.accessibleOUList;
       if (!isEmpty(selectedOrgId)) {
         selectedOrgId = Number(selectedOrgId);
-        var _selectedOrg = {
+        const selectedOrg2 = {
           label: selectedOrgName,
           value: selectedOrgId,
           key: selectedOrgId
         };
-        // add ou list for selected org if available
         if (!isEmpty(accessibleOUList)) {
-          _selectedOrg.accessibleOus = [];
+          selectedOrg2.accessibleOus = [];
           forOwn(accessibleOUList, (ouId, ouName) => {
-            _selectedOrg.accessibleOus.push({
+            selectedOrg2.accessibleOus.push({
               label: ouName,
               value: ouId,
               key: ouId
             });
           });
         }
-        proxyOrgList.push(_selectedOrg);
+        proxyOrgList2.push(selectedOrg2);
       } else {
-        var _userData$user, _userData$user2;
-        var defaultOrgName = userData == null || (_userData$user = userData.user) == null ? void 0 : _userData$user.orgName;
-        var defaultOrgId = userData == null || (_userData$user2 = userData.user) == null ? void 0 : _userData$user2.orgID;
-        proxyOrgList.push({
+        const defaultOrgName = (_a = userData == null ? void 0 : userData.user) == null ? void 0 : _a.orgName;
+        const defaultOrgId = (_b = userData == null ? void 0 : userData.user) == null ? void 0 : _b.orgID;
+        proxyOrgList2.push({
           label: defaultOrgName,
-          value: defaultOrgId != null ? defaultOrgId : 0,
-          key: defaultOrgId != null ? defaultOrgId : 0
+          value: defaultOrgId ?? 0,
+          key: defaultOrgId ?? 0
         });
       }
-      if (orgList != null && orgList.length) {
-        orgList.forEach(item => {
-          var itemOrgId = typeof item.orgID === 'string' ? parseInt(item.orgID, 10) : item.orgID;
-          var selectedOrgIdNum = typeof selectedOrgId === 'string' ? parseInt(selectedOrgId, 10) : selectedOrgId;
+      if (orgList == null ? void 0 : orgList.length) {
+        orgList.forEach((item) => {
+          const itemOrgId = typeof item.orgID === "string" ? parseInt(item.orgID, 10) : item.orgID;
+          const selectedOrgIdNum = typeof selectedOrgId === "string" ? parseInt(selectedOrgId, 10) : selectedOrgId;
           if (itemOrgId !== selectedOrgIdNum) {
-            var id = item.orgID;
-            var name = item.orgName;
-            var orgObj = {
-              label: name,
-              value: id,
-              key: id
-            };
+            const id = item.orgID;
+            const name = item.orgName;
+            const orgObj = { label: name, value: id, key: id };
             if (item.ouList) {
               orgObj.accessibleOus = getOuList(item);
             }
-            proxyOrgList.push(orgObj);
+            proxyOrgList2.push(orgObj);
           }
         });
       }
     }
-    return proxyOrgList;
+    return proxyOrgList2;
   };
-  var getOuList = orgItem => {
-    var {
-      ouList = []
-    } = orgItem;
-    var accessibleOus = [];
-    if (ouList != null && ouList.length) {
-      ouList.forEach(item => {
-        accessibleOus.push({
-          label: item.ouName,
-          value: item.ouID,
-          key: item.ouID
-        });
+  const getOuList = (orgItem) => {
+    const { ouList = [] } = orgItem;
+    const accessibleOus = [];
+    if (ouList == null ? void 0 : ouList.length) {
+      ouList.forEach((item) => {
+        accessibleOus.push({ label: item.ouName, value: item.ouID, key: item.ouID });
       });
     }
     return accessibleOus;
   };
-  var getProductList = () => {
-    var {
-      currentOrgDetails = {}
-    } = userData;
-    var {
-      module_details: moduleDetails = []
-    } = currentOrgDetails;
-    var productsList = [];
+  const getProductList = () => {
+    const { currentOrgDetails = {} } = userData;
+    const { module_details: moduleDetails = [] } = currentOrgDetails;
+    const productsList2 = [];
     if (!isEmpty(currentOrgDetails)) {
-      // Match cap-ui-library behavior: props[namespace] - dynamic lookup of any prop by namespace name
-      // Convert allProps to Record for dynamic property access matching original behavior
-      var props = allProps;
-      moduleDetails.forEach(module => {
-        var _module$name;
-        if (((_module$name = module.name) == null ? void 0 : _module$name.toLowerCase()) !== PRODUCT_MASTERS) {
-          var _module$name2;
-          var productName = module.namespace;
-          // Match cap-ui-library line 214: const intlProductName = props[productName];
-          var intlProductName = productName ? props[productName] : undefined;
-          var moduleName = intlProductName || ((_module$name2 = module.name) == null ? void 0 : _module$name2.toLowerCase());
-          productsList.push({
+      const props = allProps;
+      moduleDetails.forEach((module) => {
+        var _a, _b;
+        if (((_a = module.name) == null ? void 0 : _a.toLowerCase()) !== PRODUCT_MASTERS) {
+          const productName = module.namespace;
+          const intlProductName = productName ? props[productName] : void 0;
+          const moduleName = intlProductName || ((_b = module.name) == null ? void 0 : _b.toLowerCase());
+          productsList2.push({
             value: moduleName,
             url: module.url,
             key: module.code
           });
         }
       });
-
-      // Match cap-ui-library line 224-228: always push insights (same behavior as original)
       if (allProps.insights) {
-        productsList.push({
+        productsList2.push({
           value: allProps.insights,
-          url: 'analytics/v2/',
-          key: 'insights'
+          url: "analytics/v2/",
+          key: "insights"
         });
       }
-      if (!productsList.find(product => product.key === 'connect-plus/ui')) {
+      if (!productsList2.find((product) => product.key === "connect-plus/ui")) {
         if (allProps.connectPlus) {
-          productsList.push({
+          productsList2.push({
             value: allProps.connectPlus,
-            url: 'connect/ui',
-            key: 'connectPlus'
+            url: "connect/ui",
+            key: "connectPlus"
           });
         }
       }
     }
-    return productsList;
+    return productsList2;
   };
-  var renderSecondaryTopbar = proxyOrgList => {
-    var selectedOrg = (loadStorageItem == null ? void 0 : loadStorageItem('orgID')) || null;
-    var selectedOrgObj = proxyOrgList.find(o => o.value == selectedOrg);
-    var CapSecondaryTopBarProps = {
+  const renderSecondaryTopbar = (proxyOrgList2) => {
+    const selectedOrg2 = (loadStorageItem == null ? void 0 : loadStorageItem("orgID")) || null;
+    const selectedOrgObj = proxyOrgList2.find((o) => o.value == selectedOrg2);
+    const CapSecondaryTopBarProps = {
       primaryMenuItem: {
-        key: 'primaryMenu',
-        label: selectedProduct || ''
+        key: "primaryMenu",
+        label: selectedProduct || ""
       },
       secondaryMenuItem: {
-        key: 'secondaryMenu',
-        label: (selectedOrgObj == null ? void 0 : selectedOrgObj.label) || ''
+        key: "secondaryMenu",
+        label: (selectedOrgObj == null ? void 0 : selectedOrgObj.label) || ""
       },
-      menuActions: [{
-        key: 'close-icon',
-        iconType: 'close'
-      }],
+      menuActions: [{ key: "close-icon", iconType: "close" }],
       menuActionHandler: secondaryTopBarActionHandler
     };
-    return /*#__PURE__*/_jsx(CapSecondaryTopBar, _extends({}, CapSecondaryTopBarProps));
+    return /* @__PURE__ */ jsx(CapSecondaryTopBar, { ...CapSecondaryTopBarProps });
   };
-  var proxyOrgList = getProxyOrgList();
-  var productsList = getProductList();
-  var [selectedProduct, updateSelectedProduct] = useState(defaultSelectedProduct || '');
-  var orgIdRaw = (loadStorageItem == null ? void 0 : loadStorageItem('orgID')) || undefined;
-  var ouIdRaw = (loadStorageItem == null ? void 0 : loadStorageItem('ouId')) || undefined;
-  var [selectedOrg] = useState(orgIdRaw);
-  var [selectedOu] = useState(ouIdRaw);
-  var [selectedSidebarMenuItem, updateSelectedSidebarMenuItem] = useState(getDefaultSidebarMenuItem());
-  // breadcrumbs kept for backward compatibility but unused since CapCollapsibleLeftNavigation is deprecated
-  var [breadcrumbs, _setBreadCrumbs] = useState([]);
-  var [leftNavbarExpanded, setLeftNavbarExpanded] = useState(true);
-  var showSidebar = sidebarMenuData.length > 0 && sidebarMenuItemsPosition === 'left';
+  const proxyOrgList = getProxyOrgList();
+  const productsList = getProductList();
+  const [selectedProduct, updateSelectedProduct] = useState(defaultSelectedProduct || "");
+  const orgIdRaw = (loadStorageItem == null ? void 0 : loadStorageItem("orgID")) || void 0;
+  const ouIdRaw = (loadStorageItem == null ? void 0 : loadStorageItem("ouId")) || void 0;
+  const [selectedOrg] = useState(orgIdRaw);
+  const [selectedOu] = useState(ouIdRaw);
+  const [selectedSidebarMenuItem, updateSelectedSidebarMenuItem] = useState(
+    getDefaultSidebarMenuItem()
+  );
+  const [breadcrumbs, _setBreadCrumbs] = useState([]);
+  const [leftNavbarExpanded, setLeftNavbarExpanded] = useState(true);
+  const showSidebar = sidebarMenuData.length > 0 && sidebarMenuItemsPosition === "left";
   useEffect(() => {
     if (defaultSelectedProduct) {
       updateSelectedProduct(defaultSelectedProduct);
     }
   }, [defaultSelectedProduct]);
-
-  // Memoized handlers and props to avoid recreating on each render
-  var handleProductChangeWrapper = useMemo(() => product => {
-    var productObj = product;
-    handleProductChange(productObj);
-  }, [handleProductChange]);
-  var handleOrgEntityChangeWrapper = useMemo(() => (value, item, ouValue) => {
-    if (value !== undefined) {
-      handleOrgEntityChange(value, item, ouValue);
-    }
-  }, [handleOrgEntityChange]);
-  var handleMenuItemClick = useMemo(() => item => {
-    var menuItem = topbarMenuData == null ? void 0 : topbarMenuData.find(m => m.key === item.key);
-    if (menuItem) {
-      handleTopbarMenuChange({
-        onClickHandler: menuItem.onClickHandler ? opt => menuItem.onClickHandler == null ? void 0 : menuItem.onClickHandler(opt) : undefined,
-        link: menuItem.link
-      });
-    }
-  }, [topbarMenuData, handleTopbarMenuChange]);
-  var drawerListProps = useMemo(() => ({
-    productsList,
-    selectedProduct,
-    handleProductChange: handleProductChangeWrapper,
-    title: selectProduct,
-    closable: false,
-    placement: 'left',
-    width: 320
-  }), [productsList, selectedProduct, handleProductChangeWrapper, selectProduct]);
-  var selectProps = useMemo(() => ({
-    items: proxyOrgList,
-    selectedItem: selectedOrg,
-    selectedOuItem: selectedOu,
-    handleItemChange: handleOrgEntityChangeWrapper,
-    selectPlaceholder: selectOrganization || formatMessage(messages.selectOrganization),
-    showSearch: true,
-    showHeader: false,
-    title: formatMessage(messages.selectOrganization),
-    placeholder: organization,
-    noResultText,
-    fixedOrg: fixedOrg || !proxyOrgList.length
-  }), [proxyOrgList, selectedOrg, selectedOu, handleOrgEntityChangeWrapper, selectOrganization, formatMessage, organization, noResultText, fixedOrg]);
-  var menuProps = useMemo(() => topbarMenuData ? {
-    items: topbarMenuData.map(item => ({
-      key: item.key || '',
-      label: item.label || ''
+  const handleProductChangeWrapper = useMemo(
+    () => (product) => {
+      const productObj = product;
+      handleProductChange(productObj);
+    },
+    [handleProductChange]
+  );
+  const handleOrgEntityChangeWrapper = useMemo(
+    () => (value, item, ouValue) => {
+      if (value !== void 0) {
+        handleOrgEntityChange(value, item, ouValue);
+      }
+    },
+    [handleOrgEntityChange]
+  );
+  const handleMenuItemClick = useMemo(
+    () => (item) => {
+      const menuItem = topbarMenuData == null ? void 0 : topbarMenuData.find((m) => m.key === item.key);
+      if (menuItem) {
+        handleTopbarMenuChange({
+          onClickHandler: menuItem.onClickHandler ? (opt) => {
+            var _a;
+            return (_a = menuItem.onClickHandler) == null ? void 0 : _a.call(menuItem, opt);
+          } : void 0,
+          link: menuItem.link
+        });
+      }
+    },
+    [topbarMenuData, handleTopbarMenuChange]
+  );
+  const drawerListProps = useMemo(
+    () => ({
+      productsList,
+      selectedProduct,
+      handleProductChange: handleProductChangeWrapper,
+      title: selectProduct,
+      closable: false,
+      placement: "left",
+      width: 320
+    }),
+    [productsList, selectedProduct, handleProductChangeWrapper, selectProduct]
+  );
+  const selectProps = useMemo(
+    () => ({
+      items: proxyOrgList,
+      selectedItem: selectedOrg,
+      selectedOuItem: selectedOu,
+      handleItemChange: handleOrgEntityChangeWrapper,
+      selectPlaceholder: selectOrganization || formatMessage(messages.selectOrganization),
+      showSearch: true,
+      showHeader: false,
+      title: formatMessage(messages.selectOrganization),
+      placeholder: organization,
+      noResultText,
+      fixedOrg: fixedOrg || !proxyOrgList.length
+    }),
+    [
+      proxyOrgList,
+      selectedOrg,
+      selectedOu,
+      handleOrgEntityChangeWrapper,
+      selectOrganization,
+      formatMessage,
+      organization,
+      noResultText,
+      fixedOrg
+    ]
+  );
+  const menuProps = useMemo(
+    () => topbarMenuData ? {
+      items: topbarMenuData.map((item) => ({
+        key: item.key || "",
+        label: item.label || ""
+      })),
+      defaultSelectedKeys: topbarSelectedMenuData || [DEFAULT_MODULE],
+      selectedKeys: topbarSelectedMenuData || [DEFAULT_MODULE],
+      onMenuItemClick: handleMenuItemClick
+    } : void 0,
+    [topbarMenuData, topbarSelectedMenuData, handleMenuItemClick]
+  );
+  const normalizedDropdownMenuProps = useMemo(
+    () => safeDropdownMenuProps.map((item) => ({
+      key: item.key || "",
+      label: item.label || "",
+      onClickHandler: item.onClickHandler
     })),
-    defaultSelectedKeys: topbarSelectedMenuData || [DEFAULT_MODULE],
-    selectedKeys: topbarSelectedMenuData || [DEFAULT_MODULE],
-    onMenuItemClick: handleMenuItemClick
-  } : undefined, [topbarMenuData, topbarSelectedMenuData, handleMenuItemClick]);
-  var normalizedDropdownMenuProps = useMemo(() => safeDropdownMenuProps.map(item => ({
-    key: item.key || '',
-    label: item.label || '',
-    onClickHandler: item.onClickHandler
-  })), [safeDropdownMenuProps]);
-  var normalizedTopbarIcons = useMemo(() => topbarIcons == null ? void 0 : topbarIcons.map(icon => _extends({}, icon, {
-    iconType: icon.iconType || icon.type || 'help'
-  })), [topbarIcons]);
-  var breadcrumbsString = useMemo(() => breadcrumbs.length > 0 ? breadcrumbs.join(' / ') : undefined, [breadcrumbs]);
-  var transformedUserData = useMemo(() => userData ? _extends({
-    user: userData.user ? _extends({
-      firstName: userData.user.firstName,
-      lastName: userData.user.lastName,
-      loginName: userData.user.loginName,
-      iso_lang: userData.user.iso_lang
-    }, userData.user) : undefined
-  }, userData) : undefined, [userData]);
-  return /*#__PURE__*/_jsxs("div", {
-    className: classNames(className),
-    children: [showSecondaryTopBar ? renderSecondaryTopbar(proxyOrgList) : /*#__PURE__*/_jsx(CapTopBar, {
-      drawerListProps: drawerListProps,
-      selectProps: selectProps,
-      menuProps: menuProps,
-      dropdownMenuProps: normalizedDropdownMenuProps,
-      topbarIcons: normalizedTopbarIcons,
-      breadcrumbs: breadcrumbsString,
-      leftNavbarExpanded: leftNavbarExpanded,
-      showDocumentationBot: showDocumentationBot,
-      isLatestLeftNavigationEnabled: isLatestLeftNavigationEnabled,
-      headerOverideCss: headerOverideCss,
-      userData: transformedUserData,
-      request: request,
-      getAPICallObject: getAPICallObject
-    }), showContent && /*#__PURE__*/_jsx("div", {
-      className: "cap-content-wrapper_V1-N7",
-      style: {
-        display: showSidebar ? 'flex' : 'block',
-        height: isLatestLeftNavigationEnabled ? '100vh' : 'calc(100vh - 64px)',
-        top: isLatestLeftNavigationEnabled ? 0 : 64,
-        overflow: isLatestLeftNavigationEnabled ? 'hidden' : 'auto'
-      },
-      children: /*#__PURE__*/_jsx("div", {
-        className: "cap-component-wrapper_SqUcO",
-        ref: componentWrapperRef,
-        children: /*#__PURE__*/_jsxs("div", {
-          "data-testid": 'leftnavbar-controller',
-          style: _extends({
-            marginLeft: isLatestLeftNavigationEnabled ? showSidebar ? leftNavbarExpanded ? '19.429rem' : '5.143rem' : leftNavbarExpanded ? 'calc((100vw - 82.75rem)/2 + 9.143rem)' : 'calc((100vw - 82.75rem)/2 + 2rem)' : 'initial',
-            display: showSidebar ? 'flex' : 'block',
-            overflow: 'scroll',
-            width: '100%'
-          }, overrideCss),
-          children: [showSidebar ? /*#__PURE__*/_jsx(CapSideBar, {
-            sidebarItems: sidebarMenuData.map(item => ({
-              title: item.label || item.key || '',
-              key: item.key || '',
-              link: item.link,
-              target: item.target
-            })),
-            onLinkClick: item => {
-              var sidebarItem = sidebarMenuData.find(m => m.key === item.key);
-              if (sidebarItem) {
-                handleSideBarLinkClick(sidebarItem);
-              }
+    [safeDropdownMenuProps]
+  );
+  const normalizedTopbarIcons = useMemo(
+    () => topbarIcons == null ? void 0 : topbarIcons.map((icon) => ({
+      ...icon,
+      iconType: icon.iconType || icon.type || "help"
+    })),
+    [topbarIcons]
+  );
+  const breadcrumbsString = useMemo(
+    () => breadcrumbs.length > 0 ? breadcrumbs.join(" / ") : void 0,
+    [breadcrumbs]
+  );
+  const transformedUserData = useMemo(
+    () => userData ? {
+      user: userData.user ? {
+        firstName: userData.user.firstName,
+        lastName: userData.user.lastName,
+        loginName: userData.user.loginName,
+        iso_lang: userData.user.iso_lang,
+        ...userData.user
+      } : void 0,
+      ...userData
+    } : void 0,
+    [userData]
+  );
+  return /* @__PURE__ */ jsxs("div", { className: classNames(className), children: [
+    showSecondaryTopBar ? renderSecondaryTopbar(proxyOrgList) : /* @__PURE__ */ jsx(
+      CapTopBar,
+      {
+        drawerListProps,
+        selectProps,
+        menuProps,
+        dropdownMenuProps: normalizedDropdownMenuProps,
+        topbarIcons: normalizedTopbarIcons,
+        breadcrumbs: breadcrumbsString,
+        leftNavbarExpanded,
+        showDocumentationBot,
+        isLatestLeftNavigationEnabled,
+        headerOverideCss,
+        userData: transformedUserData,
+        request,
+        getAPICallObject
+      }
+    ),
+    showContent && /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: styles["cap-content-wrapper"],
+        style: {
+          display: showSidebar ? "flex" : "block",
+          height: isLatestLeftNavigationEnabled ? "100vh" : "calc(100vh - 64px)",
+          top: isLatestLeftNavigationEnabled ? 0 : 64,
+          overflow: isLatestLeftNavigationEnabled ? "hidden" : "auto"
+        },
+        children: /* @__PURE__ */ jsx("div", { className: styles["cap-component-wrapper"], ref: componentWrapperRef, children: /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-testid": "leftnavbar-controller",
+            style: {
+              marginLeft: isLatestLeftNavigationEnabled ? showSidebar ? leftNavbarExpanded ? "19.429rem" : "5.143rem" : leftNavbarExpanded ? "calc((100vw - 82.75rem)/2 + 9.143rem)" : "calc((100vw - 82.75rem)/2 + 2rem)" : "initial",
+              display: showSidebar ? "flex" : "block",
+              overflow: "scroll",
+              width: "100%",
+              ...overrideCss
             },
-            selectedMenuItem: selectedSidebarMenuItem,
-            pageHeading: settingsLabel,
-            defaultActiveKey: defaultActiveKey
-          }) : null, /*#__PURE__*/_jsx("div", {
-            children: React.Children.toArray(children)
-          })]
-        })
-      })
-    }), showUserProfile && renderUserProfile()]
-  });
+            children: [
+              showSidebar ? /* @__PURE__ */ jsx(
+                CapSideBar,
+                {
+                  sidebarItems: sidebarMenuData.map((item) => ({
+                    title: item.label || item.key || "",
+                    key: item.key || "",
+                    link: item.link,
+                    target: item.target
+                  })),
+                  onLinkClick: (item) => {
+                    const sidebarItem = sidebarMenuData.find((m) => m.key === item.key);
+                    if (sidebarItem) {
+                      handleSideBarLinkClick(sidebarItem);
+                    }
+                  },
+                  selectedMenuItem: selectedSidebarMenuItem,
+                  pageHeading: settingsLabel,
+                  defaultActiveKey
+                }
+              ) : null,
+              /* @__PURE__ */ jsx("div", { children: React.Children.toArray(children) })
+            ]
+          }
+        ) })
+      }
+    ),
+    showUserProfile && renderUserProfile()
+  ] });
+};
+const index = injectIntl(LocaleHoc(CapNavigation, { key: "CapNavigation" }));
+export {
+  index as default
 };
-
-// @ts-ignore - Complex HOC type inference with react-intl and LocaleHoc
-export default injectIntl(LocaleHoc(CapNavigation, {
-  key: 'CapNavigation'
-}));