@boomerang-io/carbon-addons-boomerang-react 4.6.7 → 4.6.8-beta.0

package/dist/esm/components/Header/Header.js

@@ -10,174 +10,174 @@ import useHeaderMenu from '../../hooks/useHeaderMenu.js';
 import useWindowSize from '../../hooks/useWindowSize.js';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-const MenuListId = {
-    Notifcations: "header-notifications-dialog",
-    Profile: "header-profile-menu",
-    Requests: "header-user-requests-menu",
-    RightPanel: "header-right-panel-dialog",
-    SideNav: "header-sidenav-menu",
-    Support: "header-support-menu",
-    instanceSwitcher: "header-instanceSwitcher-menu",
-    Switcher: "header-switcher-menu",
-};
-const MenuButtonId = {
-    Notifcations: "header-notifications-dialog-button",
-    Profile: "header-profile-menu-button",
-    Requests: "header-user-requests-menu-button",
-    RightPanel: "header-right-panel-dialog-button",
-    SideNav: "header-sidenav-menu-button",
-    Support: "header-support-menu-button",
-    InstanceSwitcher: "header-instanceSwitcher-menu-button",
-    Switcher: "header-switcher-menu-button",
-};
-const MenuAriaLabelRecord = {
-    Notifcations: "Notifications dialog",
-    Profile: "Profile menu",
-    Requests: "Requests menu",
-    RightPanel: "RightPanel dialog",
-    SideNav: "SideNav menu",
-    instanceSwitcher: "Instance Switcher Menu",
-    Support: "Support menu",
-    Switcher: "Switcher menu",
-};
-const headerButtonClassNames = "cds--btn--icon-only cds--header__action cds--btn cds--btn--primary cds--btn--icon-only cds--btn cds--btn--primary";
-const instanceCheckMarkContainerClass = "instance-checkmark-style-container";
-function Header(props) {
-    const { productName, baseEnvUrl, baseServicesUrl, carbonTheme = "g10", className, navLinks, platform, prefixName = "", rightPanel, skipToContentProps, templateMeteringEvent, triggerEvent, userTeams, } = props;
-    return (React.createElement(React.Fragment, null,
-        React.createElement(Theme, { theme: carbonTheme },
-            React.createElement(Header$1, { "aria-label": "App navigation header", className: className },
-                skipToContentProps ? React.createElement(SkipToContent, { ...skipToContentProps }) : null,
-                React.createElement(SidenavMenu, { leftPanel: props.leftPanel, navLinks: props.navLinks }),
-                React.createElement(HeaderName, { href: `${baseEnvUrl}/launchpad`, prefix: prefixName, "data-testid": "header-product" }, productName),
-                React.createElement(HeaderNavigation, { "aria-label": "Platform navigation" }, Array.isArray(navLinks)
-                    ? navLinks.map((link) => (React.createElement(HeaderMenuItem, { "aria-label": `Link for ${link.name}`, "data-testid": "header-menu-link", href: link.url, isCurrentPage: window?.location?.href && link.url ? window.location.href.startsWith(link.url) : false, key: link.name, target: link.isExternal ? "_blank" : undefined, rel: link.isExternal ? "noopener noreferrer" : undefined }, link.name)))
-                    : null),
-                React.createElement(HeaderGlobalBar, null,
-                    props?.instanceSwitcherEnabled && (React.createElement(InstanceSwitcherMenu, { enabled: Boolean(props.instanceSwitcherEnabled), menuItems: platform?.instances })),
-                    React.createElement(RequestsMenu, { baseEnvUrl: baseEnvUrl, enabled: Boolean(props.requestSummary), summary: props.requestSummary }),
-                    React.createElement(NotificationsMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: Boolean(props.enableNotifications), countEnabled: Boolean(props.enableNotificationsCount) }),
-                    React.createElement(SupportMenu, { enabled: Array.isArray(props.supportMenuItems) && props.supportMenuItems.length > 0, menuItems: props.supportMenuItems }),
-                    React.createElement(ProfileMenu, { enabled: Array.isArray(props.profileMenuItems) && props.profileMenuItems.length > 0, menuItems: props.profileMenuItems }),
-                    React.createElement(AppSwitcherMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: props.enableAppSwitcher, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, userTeams: userTeams }),
-                    React.createElement(RightPanelMenu, { enabled: Boolean(rightPanel && Object.keys(rightPanel).length), ...rightPanel })))),
-        React.createElement(NotificationsContainer, { enableMultiContainer: true, containerId: `${prefix}--bmrg-header-notifications` })));
-}
-function InstanceSwitcherMenu(props) {
-    const currentURL = window?.location?.href;
-    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.InstanceSwitcher);
-    if (!props.enabled) {
-        return null;
-    }
-    return (React.createElement("div", { className: `${prefix}--bmrg-header-instance-switcher`, style: { position: "relative" }, ref: ref },
-        React.createElement("button", { "aria-controls": MenuListId.instanceSwitcher, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.instanceSwitcher, className: headerButtonClassNames, "data-testid": "header-instanceSwitcher-link", id: MenuButtonId.InstanceSwitcher, onClick: toggleActive },
-            React.createElement(Wikis, { size: 20 })),
-        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.InstanceSwitcher, id: MenuListId.instanceSwitcher }, Array.isArray(props.menuItems)
-            ? props.menuItems.map((item) => (React.createElement(HeaderMenuItem, { "aria-label": `Instance Switcher for ${item.instanceName}`, "data-testid": "header-menu-instance-switcher", href: item.url, key: item.instanceName, target: "_self", rel: "noopener noreferrer" },
-                React.createElement("div", { className: instanceCheckMarkContainerClass },
-                    React.createElement("span", null, item.instanceName),
-                    item.url && currentURL?.includes(item.url) ? (React.createElement("span", null,
-                        React.createElement(Checkmark, null),
-                        " ")) : ("")))))
-            : null)) : null));
-}
-function RequestsMenu(props) {
-    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Requests);
-    if (!props.enabled) {
-        return null;
-    }
-    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
-        React.createElement("button", { "aria-controls": MenuListId.Requests, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Requests, className: headerButtonClassNames, id: MenuButtonId.Requests, "data-testid": "header-requests-link", onClick: toggleActive },
-            React.createElement(Collaborate, { size: 20 })),
-        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.Requests, id: MenuListId.Requests },
-            React.createElement(UserRequests, { baseEnvUrl: props.baseEnvUrl, summary: props.summary }))) : null));
-}
-function NotificationBadge(props) {
-    return (React.createElement("div", { className: `${prefix}--bmrg-header-notifications-badge__icon-container` },
-        React.createElement(Notification, { size: 20 }),
-        props.count > 0 && (React.createElement("span", { className: `${prefix}--bmrg-header-notifications-badge__icon-badge` }, props.count))));
-}
-function NotificationsMenu(props) {
-    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Notifcations);
-    const [hasNewNotifications, setHasNewNotifications] = React.useState(false);
-    const [notificationsCount, setNotificationsCount] = React.useState(0);
-    let icon = null;
-    if (!props.enabled || !props.baseEnvUrl || !props.baseServicesUrl) {
-        return null;
-    }
-    icon = hasNewNotifications ? React.createElement(NotificationNew, { size: 20 }) : React.createElement(Notification, { size: 20 });
-    if (props.countEnabled && hasNewNotifications) {
-        icon = React.createElement(NotificationBadge, { count: notificationsCount });
-    }
-    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
-        React.createElement("button", { "aria-controls": MenuListId.Notifcations, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": MenuAriaLabelRecord.Notifcations, className: headerButtonClassNames, "data-testid": "header-notifications-link", id: MenuButtonId.Notifcations, onClick: toggleActive }, icon),
-        React.createElement(PlatformNotificationsContainer, { "aria-labelledby": MenuButtonId.Notifcations, baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Notifcations, isOpen: isOpen, setHasNewNotifications: setHasNewNotifications, setNotificationsCount: setNotificationsCount })));
-}
-function SupportMenu(props) {
-    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Support);
-    if (!props.enabled) {
-        return null;
-    }
-    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
-        React.createElement("button", { "aria-controls": MenuListId.Support, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Support, className: headerButtonClassNames, "data-testid": "header-support-link", id: MenuButtonId.Support, onClick: toggleActive },
-            React.createElement(Help, { size: 20 })),
-        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.Support, id: MenuListId.Support }, props.menuItems)) : null));
-}
-function ProfileMenu(props) {
-    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Profile);
-    if (!props.enabled) {
-        return null;
-    }
-    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
-        React.createElement("button", { "aria-controls": MenuListId.Profile, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Profile, className: headerButtonClassNames, "data-testid": "header-profile-link", id: MenuButtonId.Profile, onClick: toggleActive },
-            React.createElement(UserAvatar, { size: 20 })),
-        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.Profile, id: MenuListId.Profile }, props.menuItems)) : null));
-}
-function AppSwitcherMenu(props) {
-    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Switcher);
-    if (!props.enabled || !props.baseServicesUrl) {
-        return null;
-    }
-    return (React.createElement("div", { ref: ref },
-        React.createElement("button", { "aria-controls": MenuListId.Switcher, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Switcher, className: headerButtonClassNames, "data-testid": "header-appswitcher-link", id: MenuButtonId.Switcher, onClick: toggleActive }, isOpen ? React.createElement(Close, { size: 20 }) : React.createElement(Switcher, { size: 20 })),
-        React.createElement(HeaderAppSwitcher, { baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Switcher, isOpen: isOpen, templateMeteringEvent: props.templateMeteringEvent, triggerEvent: props.triggerEvent, userTeams: props.userTeams })));
-}
-function RightPanelMenu(props) {
-    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.RightPanel);
-    if (!props.enabled) {
-        return null;
-    }
-    return (React.createElement("div", { ref: ref },
-        React.createElement("button", { "aria-controls": MenuListId.RightPanel, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": MenuAriaLabelRecord.RightPanel, className: headerButtonClassNames, "data-testid": "header-right-panel", id: MenuButtonId.RightPanel, onClick: toggleActive }, props.icon ?? React.createElement(OpenPanelFilledRight, { size: 20 })),
-        React.createElement(HeaderPanel, { id: MenuListId.RightPanel, role: "dialog", "aria-label": MenuAriaLabelRecord.RightPanel, expanded: isOpen }, props.component)));
-}
-function SidenavMenu(props) {
-    const { ref, isOpen, setIsOpen, toggleActive } = useHeaderMenu(MenuButtonId.SideNav);
-    const windowSize = useWindowSize();
-    const isMobileSidenavActive = windowSize.width < 1056;
-    const closeMenu = () => {
-        setIsOpen(false);
-    };
-    if (typeof props.leftPanel === "function") {
-        return (React.createElement("div", { ref: ref, "data-testid": "header-sidenav-menu" },
-            React.createElement(HeaderMenuButton, { "aria-label": isOpen ? "Close Side Nav" : "Expand Side Nav", id: MenuButtonId.SideNav, isActive: isOpen, isCollapsible: true, onClick: toggleActive }),
-            props.leftPanel({
-                isOpen: isOpen,
-                close: closeMenu,
-                navLinks: isMobileSidenavActive ? props.navLinks : undefined,
-            })));
-    }
-    return (React.createElement("div", { ref: ref, "data-testid": "header-sidenav-menu" }, isMobileSidenavActive ? (React.createElement(React.Fragment, null,
-        React.createElement(HeaderMenuButton, { "aria-label": isOpen ? "Close Side Nav" : "Expand Side Nav", id: MenuButtonId.SideNav, isActive: isOpen, isCollapsible: false, onClick: toggleActive }),
-        // @ts-ignore
-        React.createElement("div", { inert: isOpen ? undefined : "true" },
-            React.createElement(SideNav, { isChildOfHeader: true, "aria-label": "Side navigation", expanded: isOpen, isPersistent: false, onOverlayClick: closeMenu },
-                React.createElement(SideNavItems, null, props.navLinks?.map((link) => (React.createElement(SideNavLink, { large: true, "aria-label": `Link for ${link.name}`, href: link.url, isActive: window?.location?.href && link.url ? window.location.href.startsWith(link.url) : false, key: link.url + link.name }, link.name)))))))) : null));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+const MenuListId = {
+    Notifcations: "header-notifications-dialog",
+    Profile: "header-profile-menu",
+    Requests: "header-user-requests-menu",
+    RightPanel: "header-right-panel-dialog",
+    SideNav: "header-sidenav-menu",
+    Support: "header-support-menu",
+    instanceSwitcher: "header-instanceSwitcher-menu",
+    Switcher: "header-switcher-menu",
+};
+const MenuButtonId = {
+    Notifcations: "header-notifications-dialog-button",
+    Profile: "header-profile-menu-button",
+    Requests: "header-user-requests-menu-button",
+    RightPanel: "header-right-panel-dialog-button",
+    SideNav: "header-sidenav-menu-button",
+    Support: "header-support-menu-button",
+    InstanceSwitcher: "header-instanceSwitcher-menu-button",
+    Switcher: "header-switcher-menu-button",
+};
+const MenuAriaLabelRecord = {
+    Notifcations: "Notifications dialog",
+    Profile: "Profile menu",
+    Requests: "Requests menu",
+    RightPanel: "RightPanel dialog",
+    SideNav: "SideNav menu",
+    instanceSwitcher: "Instance Switcher Menu",
+    Support: "Support menu",
+    Switcher: "Switcher menu",
+};
+const headerButtonClassNames = "cds--btn--icon-only cds--header__action cds--btn cds--btn--primary cds--btn--icon-only cds--btn cds--btn--primary";
+const instanceCheckMarkContainerClass = "instance-checkmark-style-container";
+function Header(props) {
+    const { productName, baseEnvUrl, baseServicesUrl, carbonTheme = "g10", className, navLinks, platform, prefixName = "", rightPanel, skipToContentProps, templateMeteringEvent, triggerEvent, userTeams, } = props;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(Theme, { theme: carbonTheme },
+            React.createElement(Header$1, { "aria-label": "App navigation header", className: className },
+                skipToContentProps ? React.createElement(SkipToContent, { ...skipToContentProps }) : null,
+                React.createElement(SidenavMenu, { leftPanel: props.leftPanel, navLinks: props.navLinks }),
+                React.createElement(HeaderName, { href: `${baseEnvUrl}/launchpad`, prefix: prefixName, "data-testid": "header-product" }, productName),
+                React.createElement(HeaderNavigation, { "aria-label": "Platform navigation" }, Array.isArray(navLinks)
+                    ? navLinks.map((link) => (React.createElement(HeaderMenuItem, { "aria-label": `Link for ${link.name}`, "data-testid": "header-menu-link", href: link.url, isCurrentPage: window?.location?.href && link.url ? window.location.href.startsWith(link.url) : false, key: link.name, target: link.isExternal ? "_blank" : undefined, rel: link.isExternal ? "noopener noreferrer" : undefined }, link.name)))
+                    : null),
+                React.createElement(HeaderGlobalBar, null,
+                    props?.instanceSwitcherEnabled && (React.createElement(InstanceSwitcherMenu, { enabled: Boolean(props.instanceSwitcherEnabled), menuItems: platform?.instances })),
+                    React.createElement(RequestsMenu, { baseEnvUrl: baseEnvUrl, enabled: Boolean(props.requestSummary), summary: props.requestSummary }),
+                    React.createElement(NotificationsMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: Boolean(props.enableNotifications), countEnabled: Boolean(props.enableNotificationsCount) }),
+                    React.createElement(SupportMenu, { enabled: Array.isArray(props.supportMenuItems) && props.supportMenuItems.length > 0, menuItems: props.supportMenuItems }),
+                    React.createElement(ProfileMenu, { enabled: Array.isArray(props.profileMenuItems) && props.profileMenuItems.length > 0, menuItems: props.profileMenuItems }),
+                    React.createElement(AppSwitcherMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, enabled: props.enableAppSwitcher, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent, userTeams: userTeams }),
+                    React.createElement(RightPanelMenu, { enabled: Boolean(rightPanel && Object.keys(rightPanel).length), ...rightPanel })))),
+        React.createElement(NotificationsContainer, { enableMultiContainer: true, containerId: `${prefix}--bmrg-header-notifications` })));
+}
+function InstanceSwitcherMenu(props) {
+    const currentURL = window?.location?.href;
+    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.InstanceSwitcher);
+    if (!props.enabled) {
+        return null;
+    }
+    return (React.createElement("div", { className: `${prefix}--bmrg-header-instance-switcher`, style: { position: "relative" }, ref: ref },
+        React.createElement("button", { "aria-controls": MenuListId.instanceSwitcher, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.instanceSwitcher, className: headerButtonClassNames, "data-testid": "header-instanceSwitcher-link", id: MenuButtonId.InstanceSwitcher, onClick: toggleActive },
+            React.createElement(Wikis, { size: 20 })),
+        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.InstanceSwitcher, id: MenuListId.instanceSwitcher }, Array.isArray(props.menuItems)
+            ? props.menuItems.map((item) => (React.createElement(HeaderMenuItem, { "aria-label": `Instance Switcher for ${item.instanceName}`, "data-testid": "header-menu-instance-switcher", href: item.url, key: item.instanceName, target: "_self", rel: "noopener noreferrer" },
+                React.createElement("div", { className: instanceCheckMarkContainerClass },
+                    React.createElement("span", null, item.instanceName),
+                    item.url && currentURL?.includes(item.url) ? (React.createElement("span", null,
+                        React.createElement(Checkmark, null),
+                        " ")) : ("")))))
+            : null)) : null));
+}
+function RequestsMenu(props) {
+    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Requests);
+    if (!props.enabled) {
+        return null;
+    }
+    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
+        React.createElement("button", { "aria-controls": MenuListId.Requests, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Requests, className: headerButtonClassNames, id: MenuButtonId.Requests, "data-testid": "header-requests-link", onClick: toggleActive },
+            React.createElement(Collaborate, { size: 20 })),
+        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.Requests, id: MenuListId.Requests },
+            React.createElement(UserRequests, { baseEnvUrl: props.baseEnvUrl, summary: props.summary }))) : null));
+}
+function NotificationBadge(props) {
+    return (React.createElement("div", { className: `${prefix}--bmrg-header-notifications-badge__icon-container` },
+        React.createElement(Notification, { size: 20 }),
+        props.count > 0 && (React.createElement("span", { className: `${prefix}--bmrg-header-notifications-badge__icon-badge` }, props.count))));
+}
+function NotificationsMenu(props) {
+    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Notifcations);
+    const [hasNewNotifications, setHasNewNotifications] = React.useState(false);
+    const [notificationsCount, setNotificationsCount] = React.useState(0);
+    let icon = null;
+    if (!props.enabled || !props.baseEnvUrl || !props.baseServicesUrl) {
+        return null;
+    }
+    icon = hasNewNotifications ? React.createElement(NotificationNew, { size: 20 }) : React.createElement(Notification, { size: 20 });
+    if (props.countEnabled && hasNewNotifications) {
+        icon = React.createElement(NotificationBadge, { count: notificationsCount });
+    }
+    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
+        React.createElement("button", { "aria-controls": MenuListId.Notifcations, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": MenuAriaLabelRecord.Notifcations, className: headerButtonClassNames, "data-testid": "header-notifications-link", id: MenuButtonId.Notifcations, onClick: toggleActive }, icon),
+        React.createElement(PlatformNotificationsContainer, { "aria-labelledby": MenuButtonId.Notifcations, baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Notifcations, isOpen: isOpen, setHasNewNotifications: setHasNewNotifications, setNotificationsCount: setNotificationsCount })));
+}
+function SupportMenu(props) {
+    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Support);
+    if (!props.enabled) {
+        return null;
+    }
+    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
+        React.createElement("button", { "aria-controls": MenuListId.Support, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Support, className: headerButtonClassNames, "data-testid": "header-support-link", id: MenuButtonId.Support, onClick: toggleActive },
+            React.createElement(Help, { size: 20 })),
+        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.Support, id: MenuListId.Support }, props.menuItems)) : null));
+}
+function ProfileMenu(props) {
+    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Profile);
+    if (!props.enabled) {
+        return null;
+    }
+    return (React.createElement("div", { style: { position: "relative" }, ref: ref },
+        React.createElement("button", { "aria-controls": MenuListId.Profile, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Profile, className: headerButtonClassNames, "data-testid": "header-profile-link", id: MenuButtonId.Profile, onClick: toggleActive },
+            React.createElement(UserAvatar, { size: 20 })),
+        isOpen ? (React.createElement(HeaderMenu, { "aria-labelledby": MenuButtonId.Profile, id: MenuListId.Profile }, props.menuItems)) : null));
+}
+function AppSwitcherMenu(props) {
+    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.Switcher);
+    if (!props.enabled || !props.baseServicesUrl) {
+        return null;
+    }
+    return (React.createElement("div", { ref: ref },
+        React.createElement("button", { "aria-controls": MenuListId.Switcher, "aria-expanded": isOpen, "aria-haspopup": "menu", "aria-label": MenuAriaLabelRecord.Switcher, className: headerButtonClassNames, "data-testid": "header-appswitcher-link", id: MenuButtonId.Switcher, onClick: toggleActive }, isOpen ? React.createElement(Close, { size: 20 }) : React.createElement(Switcher, { size: 20 })),
+        React.createElement(HeaderAppSwitcher, { baseEnvUrl: props.baseEnvUrl, baseServicesUrl: props.baseServicesUrl, id: MenuListId.Switcher, isOpen: isOpen, templateMeteringEvent: props.templateMeteringEvent, triggerEvent: props.triggerEvent, userTeams: props.userTeams })));
+}
+function RightPanelMenu(props) {
+    const { isOpen, toggleActive, ref } = useHeaderMenu(MenuButtonId.RightPanel);
+    if (!props.enabled) {
+        return null;
+    }
+    return (React.createElement("div", { ref: ref },
+        React.createElement("button", { "aria-controls": MenuListId.RightPanel, "aria-expanded": isOpen, "aria-haspopup": "dialog", "aria-label": MenuAriaLabelRecord.RightPanel, className: headerButtonClassNames, "data-testid": "header-right-panel", id: MenuButtonId.RightPanel, onClick: toggleActive }, props.icon ?? React.createElement(OpenPanelFilledRight, { size: 20 })),
+        React.createElement(HeaderPanel, { id: MenuListId.RightPanel, role: "dialog", "aria-label": MenuAriaLabelRecord.RightPanel, expanded: isOpen }, props.component)));
+}
+function SidenavMenu(props) {
+    const { ref, isOpen, setIsOpen, toggleActive } = useHeaderMenu(MenuButtonId.SideNav);
+    const windowSize = useWindowSize();
+    const isMobileSidenavActive = windowSize.width < 1056;
+    const closeMenu = () => {
+        setIsOpen(false);
+    };
+    if (typeof props.leftPanel === "function") {
+        return (React.createElement("div", { ref: ref, "data-testid": "header-sidenav-menu" },
+            React.createElement(HeaderMenuButton, { "aria-label": isOpen ? "Close Side Nav" : "Expand Side Nav", id: MenuButtonId.SideNav, isActive: isOpen, isCollapsible: true, onClick: toggleActive }),
+            props.leftPanel({
+                isOpen: isOpen,
+                close: closeMenu,
+                navLinks: isMobileSidenavActive ? props.navLinks : undefined,
+            })));
+    }
+    return (React.createElement("div", { ref: ref, "data-testid": "header-sidenav-menu" }, isMobileSidenavActive ? (React.createElement(React.Fragment, null,
+        React.createElement(HeaderMenuButton, { "aria-label": isOpen ? "Close Side Nav" : "Expand Side Nav", id: MenuButtonId.SideNav, isActive: isOpen, isCollapsible: false, onClick: toggleActive }),
+        // @ts-ignore
+        React.createElement("div", { inert: isOpen ? undefined : "true" },
+            React.createElement(SideNav, { isChildOfHeader: true, "aria-label": "Side navigation", expanded: isOpen, isPersistent: false, onOverlayClick: closeMenu },
+                React.createElement(SideNavItems, null, props.navLinks?.map((link) => (React.createElement(SideNavLink, { large: true, "aria-label": `Link for ${link.name}`, href: link.url, isActive: window?.location?.href && link.url ? window.location.href.startsWith(link.url) : false, key: link.url + link.name }, link.name)))))))) : null));
 }
 
 export { Header as default };

package/dist/esm/components/Header/HeaderAppSwitcher.js

@@ -7,106 +7,106 @@ import cx from 'classnames';
 import { resolver, serviceUrl } from '../../config/servicesConfig.js';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-const externalProps = {
-    target: "_blank",
-    rel: "noreferrer noopener",
-};
-const panelClassName = `${prefix}--bmrg-header-switcher-panel`;
-const contentClassName = `${prefix}--bmrg-header-switcher`;
-const skeletonClassName = `${prefix}--bmrg-header-switcher__skeleton`;
-function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, templateMeteringEvent, triggerEvent, userTeams }) {
-    const hasUserTeams = Boolean(userTeams);
-    const userTeamsUrl = serviceUrl.getUserTeamsServices({ baseServicesUrl });
-    const teamsQuery = useQuery({
-        queryKey: userTeamsUrl,
-        queryFn: resolver.query(userTeamsUrl, null),
-        enabled: !hasUserTeams
-    });
-    if (userTeams?.isLoading || teamsQuery?.isLoading) {
-        return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, expanded: isOpen, id: id, role: "menu" },
-            React.createElement("div", { className: cx(contentClassName, "--is-loading", { "--is-hidden": !isOpen }) },
-                React.createElement(SkeletonText, { className: skeletonClassName }),
-                React.createElement(SkeletonText, { className: skeletonClassName }),
-                React.createElement(SkeletonText, { className: skeletonClassName }),
-                React.createElement(SkeletonText, { className: skeletonClassName }),
-                React.createElement(SkeletonText, { className: skeletonClassName }))));
-    }
-    if (userTeams?.error || teamsQuery?.error) {
-        return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", id: id, role: "menu", className: panelClassName, expanded: isOpen },
-            React.createElement(Error, { className: cx(contentClassName, { "--is-hidden": !isOpen }) })));
-    }
-    if (userTeams?.data || teamsQuery?.data) {
-        let accountTeams, standardTeams, personalTeam = [];
-        if (hasUserTeams) {
-            accountTeams = userTeams?.data?.accountTeams;
-            standardTeams = userTeams?.data?.standardTeams;
-            personalTeam = userTeams?.data?.personalTeam;
-        }
-        else {
-            accountTeams = teamsQuery?.data?.accountTeams;
-            standardTeams = teamsQuery?.data?.standardTeams;
-            personalTeam = teamsQuery?.data?.personalTeam;
-        }
-        if (accountTeams?.length || standardTeams?.length) {
-            return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
-                React.createElement("div", { className: cx(contentClassName, { "--is-hidden": !isOpen }) },
-                    [...personalTeam, ...standardTeams].map((team) => (React.createElement(TeamServiceListMenu, { key: team.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: team, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }))),
-                    accountTeams?.map((account) => (React.createElement("div", { key: account.id },
-                        React.createElement(SwitcherDivider, null),
-                        React.createElement(TeamServiceListMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isAccount: true, isMember: account.isAccountTeamMember, team: account, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }),
-                        Boolean(account.projectTeams) &&
-                            account.projectTeams.map((project) => (React.createElement(TeamServiceListMenu, { key: project.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: project, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent })))))))));
-        }
-        return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
-            React.createElement("div", { className: cx(contentClassName, "--is-empty", { "--is-hidden": !isOpen }) },
-                React.createElement("h1", { className: `${prefix}--bmrg-header-switcher__empty-title` }, "No teams"),
-                React.createElement("p", { className: `${prefix}--bmrg-header-switcher__empty-subtitle` }, "You must be new here"))));
-    }
-    return null;
-}
-function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent }) {
-    const { name, displayName, services } = team;
-    const nameToDisplay = displayName ? displayName : name;
-    const isNameTruncated = nameToDisplay?.length > 30;
-    if (!isMember) {
-        return (React.createElement("div", { className: `${prefix}--side-nav__item`, title: isNameTruncated ? nameToDisplay : undefined },
-            React.createElement("button", { disabled: true, className: `${prefix}--side-nav__submenu`, "data-testid": "header-app-switcher-service" },
-                React.createElement("span", { className: `${prefix}--side-nav__submenu-title` }, nameToDisplay))));
-    }
-    return (
-    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
-    React.createElement("ul", { className: `${prefix}--bmrg-header-team`, title: isNameTruncated ? nameToDisplay : undefined },
-        React.createElement(SideNavMenu, { title: nameToDisplay },
-            React.createElement(ServiceList, { baseEnvUrl: baseEnvUrl, isAccount: isAccount, servicesData: services, team: team, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }))));
-}
-function ServiceList(props) {
-    const { baseEnvUrl = "", isAccount, servicesData, team, templateMeteringEvent, triggerEvent } = props;
-    const handleLinkClick = (service) => {
-        if (templateMeteringEvent) {
-            templateMeteringEvent({ service, team });
-        }
-        triggerEvent && triggerEvent(service);
-    };
-    if (!!servicesData) {
-        if (Boolean(servicesData?.length)) {
-            return (React.createElement(React.Fragment, null, servicesData.map((service) => {
-                const isExternalLink = typeof service?.url?.includes === "function" && !service.url.includes(baseEnvUrl);
-                const isNameTruncated = isExternalLink ? service.name.length > 28 : service.name.length > 32;
-                return (React.createElement(SideNavMenuItem, { key: service.name, href: service.url, title: isNameTruncated ? service.name : undefined, onClick: () => handleLinkClick(service), "data-testid": "header-app-switcher-service", ...(isExternalLink ? externalProps : undefined) },
-                    React.createElement("span", null, service.name),
-                    isExternalLink ? React.createElement(Launch, { size: 16, title: "Opens page in new tab" }) : undefined));
-            })));
-        }
-        else {
-            return (React.createElement("div", { className: `${prefix}--bmrg-header-team__message`, "data-testid": "header-app-switcher-service" }, `This ${isAccount ? "account" : "team"} has no assets`));
-        }
-    }
-    return null;
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+const externalProps = {
+    target: "_blank",
+    rel: "noreferrer noopener",
+};
+const panelClassName = `${prefix}--bmrg-header-switcher-panel`;
+const contentClassName = `${prefix}--bmrg-header-switcher`;
+const skeletonClassName = `${prefix}--bmrg-header-switcher__skeleton`;
+function HeaderAppSwitcher({ baseServicesUrl, baseEnvUrl, id, isOpen, templateMeteringEvent, triggerEvent, userTeams }) {
+    const hasUserTeams = Boolean(userTeams);
+    const userTeamsUrl = serviceUrl.getUserTeamsServices({ baseServicesUrl });
+    const teamsQuery = useQuery({
+        queryKey: userTeamsUrl,
+        queryFn: resolver.query(userTeamsUrl, null),
+        enabled: !hasUserTeams
+    });
+    if (userTeams?.isLoading || teamsQuery?.isLoading) {
+        return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, expanded: isOpen, id: id, role: "menu" },
+            React.createElement("div", { className: cx(contentClassName, "--is-loading", { "--is-hidden": !isOpen }) },
+                React.createElement(SkeletonText, { className: skeletonClassName }),
+                React.createElement(SkeletonText, { className: skeletonClassName }),
+                React.createElement(SkeletonText, { className: skeletonClassName }),
+                React.createElement(SkeletonText, { className: skeletonClassName }),
+                React.createElement(SkeletonText, { className: skeletonClassName }))));
+    }
+    if (userTeams?.error || teamsQuery?.error) {
+        return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", id: id, role: "menu", className: panelClassName, expanded: isOpen },
+            React.createElement(Error, { className: cx(contentClassName, { "--is-hidden": !isOpen }) })));
+    }
+    if (userTeams?.data || teamsQuery?.data) {
+        let accountTeams, standardTeams, personalTeam = [];
+        if (hasUserTeams) {
+            accountTeams = userTeams?.data?.accountTeams;
+            standardTeams = userTeams?.data?.standardTeams;
+            personalTeam = userTeams?.data?.personalTeam;
+        }
+        else {
+            accountTeams = teamsQuery?.data?.accountTeams;
+            standardTeams = teamsQuery?.data?.standardTeams;
+            personalTeam = teamsQuery?.data?.personalTeam;
+        }
+        if (accountTeams?.length || standardTeams?.length) {
+            return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
+                React.createElement("div", { className: cx(contentClassName, { "--is-hidden": !isOpen }) },
+                    [...personalTeam, ...standardTeams].map((team) => (React.createElement(TeamServiceListMenu, { key: team.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: team, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }))),
+                    accountTeams?.map((account) => (React.createElement("div", { key: account.id },
+                        React.createElement(SwitcherDivider, null),
+                        React.createElement(TeamServiceListMenu, { baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isAccount: true, isMember: account.isAccountTeamMember, team: account, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }),
+                        Boolean(account.projectTeams) &&
+                            account.projectTeams.map((project) => (React.createElement(TeamServiceListMenu, { key: project.id, baseEnvUrl: baseEnvUrl, baseServicesUrl: baseServicesUrl, isMember: true, team: project, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent })))))))));
+        }
+        return (React.createElement(HeaderPanel, { "aria-label": "App Switcher", className: panelClassName, "data-testid": "header-app-switcher", expanded: isOpen, id: id, role: "menu" },
+            React.createElement("div", { className: cx(contentClassName, "--is-empty", { "--is-hidden": !isOpen }) },
+                React.createElement("h1", { className: `${prefix}--bmrg-header-switcher__empty-title` }, "No teams"),
+                React.createElement("p", { className: `${prefix}--bmrg-header-switcher__empty-subtitle` }, "You must be new here"))));
+    }
+    return null;
+}
+function TeamServiceListMenu({ baseEnvUrl, isAccount, isMember, team, templateMeteringEvent, triggerEvent }) {
+    const { name, displayName, services } = team;
+    const nameToDisplay = displayName ? displayName : name;
+    const isNameTruncated = nameToDisplay?.length > 30;
+    if (!isMember) {
+        return (React.createElement("div", { className: `${prefix}--side-nav__item`, title: isNameTruncated ? nameToDisplay : undefined },
+            React.createElement("button", { disabled: true, className: `${prefix}--side-nav__submenu`, "data-testid": "header-app-switcher-service" },
+                React.createElement("span", { className: `${prefix}--side-nav__submenu-title` }, nameToDisplay))));
+    }
+    return (
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    React.createElement("ul", { className: `${prefix}--bmrg-header-team`, title: isNameTruncated ? nameToDisplay : undefined },
+        React.createElement(SideNavMenu, { title: nameToDisplay },
+            React.createElement(ServiceList, { baseEnvUrl: baseEnvUrl, isAccount: isAccount, servicesData: services, team: team, templateMeteringEvent: templateMeteringEvent, triggerEvent: triggerEvent }))));
+}
+function ServiceList(props) {
+    const { baseEnvUrl = "", isAccount, servicesData, team, templateMeteringEvent, triggerEvent } = props;
+    const handleLinkClick = (service) => {
+        if (templateMeteringEvent) {
+            templateMeteringEvent({ service, team });
+        }
+        triggerEvent && triggerEvent(service);
+    };
+    if (!!servicesData) {
+        if (Boolean(servicesData?.length)) {
+            return (React.createElement(React.Fragment, null, servicesData.map((service) => {
+                const isExternalLink = typeof service?.url?.includes === "function" && !service.url.includes(baseEnvUrl);
+                const isNameTruncated = isExternalLink ? service.name.length > 28 : service.name.length > 32;
+                return (React.createElement(SideNavMenuItem, { key: service.name, href: service.url, title: isNameTruncated ? service.name : undefined, onClick: () => handleLinkClick(service), "data-testid": "header-app-switcher-service", ...(isExternalLink ? externalProps : undefined) },
+                    React.createElement("span", null, service.name),
+                    isExternalLink ? React.createElement(Launch, { size: 16, title: "Opens page in new tab" }) : undefined));
+            })));
+        }
+        else {
+            return (React.createElement("div", { className: `${prefix}--bmrg-header-team__message`, "data-testid": "header-app-switcher-service" }, `This ${isAccount ? "account" : "team"} has no assets`));
+        }
+    }
+    return null;
 }
 
 export { HeaderAppSwitcher as default };

package/dist/esm/components/Header/HeaderMenu.js

@@ -1,13 +1,13 @@
 import React from 'react';
 import { prefix } from '../../internal/settings.js';
 
-/*
-IBM Confidential
-694970X, 69497O0
-© Copyright IBM Corp. 2022, 2024
-*/
-function HeaderMenu({ children, id, ...rest }) {
-    return (React.createElement("ul", { className: `${prefix}--bmrg-header-drop-down`, id: id, role: "menu", ...rest }, children));
+/*
+IBM Confidential
+694970X, 69497O0
+© Copyright IBM Corp. 2022, 2024
+*/
+function HeaderMenu({ children, id, ...rest }) {
+    return (React.createElement("ul", { className: `${prefix}--bmrg-header-drop-down`, id: id, role: "menu", ...rest }, children));
 }
 
 export { HeaderMenu as default };