@inera/ids-react 9.1.2 → 9.2.0

package/components/header-1177-admin/header-1177-admin-nav-item-mobile.js

@@ -7,5 +7,6 @@ function IDSHeader1177AdminNavItemMobile({ icon, unresponsive, children, ...prop
     const headerContext = useHeaderContext();
     return (jsx(IDSHeader1177AdminNavItemMobileBase, { ...props, unresponsive: headerContext?.unresponsive, icon: icon, children: children }));
 }
+IDSHeader1177AdminNavItemMobile.displayName = "IDSHeader1177AdminNavItemMobile";
 
 export { IDSHeader1177AdminNavItemMobile };

package/components/header-1177-admin/header-1177-admin-nav-item.d.ts

@@ -13,3 +13,6 @@ export interface IDSHeader1177AdminNavItemProps extends HTMLAttributes<HTMLEleme
     unresponsive?: boolean;
 }
 export declare function IDSHeader1177AdminNavItem({ expanded, ...props }: IDSHeader1177AdminNavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177AdminNavItem {
+    var displayName: string;
+}

package/components/header-1177-admin/header-1177-admin-nav-item.js

@@ -5,6 +5,7 @@ import { IDSHeader1177AdminNavItemBase } from './header-1177-admin-nav-item-base
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
 
 function IDSHeader1177AdminNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
@@ -12,39 +13,15 @@ function IDSHeader1177AdminNavItem({ expanded = false, ...props }) {
     const componentRef = useRef(null);
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
-    useClickOutside([componentRef, buttonRef], () => {
-        setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, isExpanded);
+    useLinkClick(closeMenu, menuRef, buttonRef, isExpanded);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    // close when clicking outside the menu
-    useEffect(() => {
-        const onClickOutside = (event) => {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("click", onClickOutside);
-        return () => document.removeEventListener("click", onClickOutside);
-    }, []);
-    // close when clicking any link inside the menu
-    useEffect(() => {
-        const menuEl = menuRef.current;
-        if (!menuEl)
-            return;
-        const onMenuClick = (event) => {
-            const target = event.target;
-            const anchor = target.closest("a");
-            if (anchor && menuEl.contains(anchor)) {
-                setIsExpanded(false);
-            }
-        };
-        menuEl.addEventListener("click", onMenuClick);
-        return () => menuEl.removeEventListener("click", onMenuClick);
-    }, [menuRef]);
     return (jsx(IDSHeader1177AdminNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
+IDSHeader1177AdminNavItem.displayName = "IDSHeader1177AdminNavItem";
 
 export { IDSHeader1177AdminNavItem };

package/components/header-1177-admin/header-1177-admin-nav.d.ts

@@ -1,5 +1,10 @@
 import { HTMLAttributes } from "react";
 interface IDSHeader1177AdminNavProps extends HTMLAttributes<HTMLElement> {
+    mobileOnly?: boolean;
+    srLabel?: string;
+}
+export declare function IDSHeader1177AdminNav({ mobileOnly, srLabel, children, ...props }: IDSHeader1177AdminNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177AdminNav {
+    var displayName: string;
 }
-export declare function IDSHeader1177AdminNav({ children, ...props }: IDSHeader1177AdminNavProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177-admin/header-1177-admin-nav.js

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177AdminNavBase } from './header-1177-admin-nav-base.js';
 
-function IDSHeader1177AdminNav({ children, ...props }) {
+function IDSHeader1177AdminNav({ mobileOnly, srLabel, children, ...props }) {
     const headerContext = useHeaderContext();
-    return (jsx(IDSHeader1177AdminNavBase, { ...props, unresponsive: headerContext?.unresponsive ?? false, children: children }));
+    return (jsx(IDSHeader1177AdminNavBase, { ...props, srLabel: srLabel, mobileOnly: mobileOnly, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }
+IDSHeader1177AdminNav.displayName = "IDSHeader1177AdminNav";
 
 export { IDSHeader1177AdminNav };

package/components/header-1177-admin/header-1177-admin.d.ts

@@ -15,4 +15,7 @@ interface IDSHeader1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
     skipToContentLink?: ReactNode;
 }
 export declare function IDSHeader1177Admin({ unresponsive, hideAvatar, children, ...props }: IDSHeader1177AdminProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177Admin {
+    var displayName: string;
+}
 export {};

package/components/header-1177-admin/header-1177-admin.js

@@ -6,5 +6,6 @@ import { IDSHeader1177AdminBase } from './header-1177-admin-base.js';
 function IDSHeader1177Admin({ unresponsive = false, hideAvatar = false, children, ...props }) {
     return (jsx(HeaderProvider, { value: { unresponsive, hideAvatar }, children: jsx(IDSHeader1177AdminBase, { ...props, unresponsive: unresponsive, children: children }) }));
 }
+IDSHeader1177Admin.displayName = "IDSHeader1177Admin";
 
 export { IDSHeader1177Admin };

package/components/header-1177-pro/header-1177-pro-avatar-base.d.ts

@@ -13,3 +13,6 @@ export interface IDSHeader1177ProAvatarBaseProps extends HTMLAttributes<HTMLElem
     client?: boolean;
 }
 export declare function IDSHeader1177ProAvatarBase({ username, unit, children, expanded, hide, client, onToggleAvatar, componentRef, menuRef, buttonRef, unresponsive }: IDSHeader1177ProAvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProAvatarBase {
+    var displayName: string;
+}

package/components/header-1177-pro/header-1177-pro-avatar-base.js

@@ -19,5 +19,6 @@ function IDSHeader1177ProAvatarBase({ username, unit, children, expanded = false
                         "ids-header-1177-pro-avatar__menu--expanded": expanded
                     }), children: children && jsx("div", { className: "ids-header-1177-pro-avatar__menu-links", children: children }) })] }) }));
 }
+IDSHeader1177ProAvatarBase.displayName = "IDSHeader1177ProAvatarBase";
 
 export { IDSHeader1177ProAvatarBase };

package/components/header-1177-pro/header-1177-pro-avatar-mobile-base.d.ts

@@ -11,4 +11,7 @@ interface IDSHeader1177ProAvatarMobileBaseProps extends HTMLAttributes<HTMLDivEl
     buttonRef?: React.RefObject<HTMLButtonElement>;
 }
 export declare function IDSHeader1177ProAvatarMobileBase({ username, unit, expanded, hide, unresponsive, componentRef, buttonRef, children, client, onToggleMenu, ...props }: IDSHeader1177ProAvatarMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProAvatarMobileBase {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-avatar-mobile-base.js

@@ -20,5 +20,6 @@ function IDSHeader1177ProAvatarMobileBase({ username = "", unit = "", expanded,
                         "ids-header-1177-pro-avatar-mobile__menu--expanded": expanded
                     }), children: [unit && jsx("div", { className: "ids-header-1177-pro-avatar-mobile__unit", children: unit }), jsx("div", { className: "ids-header-1177-pro-avatar-mobile__menu-links", children: children })] })] }) }));
 }
+IDSHeader1177ProAvatarMobileBase.displayName = "IDSHeader1177ProAvatarMobileBase";
 
 export { IDSHeader1177ProAvatarMobileBase };

package/components/header-1177-pro/header-1177-pro-avatar-mobile.d.ts

@@ -6,4 +6,7 @@ interface IDSHeader1177ProAvatarMobileProps extends HTMLAttributes<HTMLDivElemen
     persistent?: boolean;
 }
 export declare function IDSHeader1177ProAvatarMobile({ username, unit, expanded, persistent, children, ...props }: IDSHeader1177ProAvatarMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProAvatarMobile {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-avatar-mobile.js

@@ -6,6 +6,7 @@ import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
 
 function IDSHeader1177ProAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
@@ -13,13 +14,13 @@ function IDSHeader1177ProAvatarMobile({ username = "", unit = "", expanded = fal
     const componentRef = useRef(null);
     const buttonRef = useRef(null);
     useFocusTrap(componentRef.current, isExpanded && !persistent);
-    useClickOutside([componentRef, buttonRef], () => {
-        if (!persistent)
-            setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     return (jsx(IDSHeader1177ProAvatarMobileBase, { ...props, client: true, username: username, unit: unit, expanded: isExpanded, componentRef: componentRef, buttonRef: buttonRef, onToggleMenu: username ? toggleAvatar : undefined, hide: headerContext?.hideAvatar ?? false, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }
+IDSHeader1177ProAvatarMobile.displayName = "IDSHeader1177ProAvatarMobile";
 
 export { IDSHeader1177ProAvatarMobile };

package/components/header-1177-pro/header-1177-pro-avatar.d.ts

@@ -6,4 +6,7 @@ interface IDSHeader1177ProAvatarProps extends HTMLAttributes<HTMLDivElement> {
     persistent?: boolean;
 }
 export declare function IDSHeader1177ProAvatar({ username, unit, expanded, children, persistent, ...props }: IDSHeader1177ProAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProAvatar {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-avatar.js

@@ -1,46 +1,27 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { IDSHeader1177ProAvatarBase } from './header-1177-pro-avatar-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
 
 function IDSHeader1177ProAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
-    useId();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const componentRef = useRef(null);
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
     useFocusTrap(componentRef.current, isExpanded && !persistent);
-    useClickOutside([componentRef, buttonRef], () => {
-        if (!persistent)
-            setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
-    useEffect(() => {
-        const clickOutsideHandler = (e) => {
-            if (!persistent && componentRef.current && !componentRef.current.contains(e.target)) {
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("mousedown", clickOutsideHandler);
-        return () => document.removeEventListener("mousedown", clickOutsideHandler);
-    }, [persistent]);
-    // close when clicking links
-    useEffect(() => {
-        if (!persistent && isExpanded) {
-            const links = menuRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", () => setIsExpanded(false)));
-            return () => {
-                links.forEach(link => link.removeEventListener("click", () => setIsExpanded(false)));
-            };
-        }
-    }, [isExpanded, persistent]);
     return (jsx(IDSHeader1177ProAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, expanded: isExpanded, onToggleAvatar: toggleAvatar, unresponsive: headerContext?.unresponsive ?? false, hide: headerContext?.hideAvatar ?? false }));
 }
+IDSHeader1177ProAvatar.displayName = "IDSHeader1177ProAvatar";
 
 export { IDSHeader1177ProAvatar };

package/components/header-1177-pro/header-1177-pro-base.d.ts

@@ -16,4 +16,7 @@ interface IDSHeader1177ProBaseProps extends HTMLAttributes<HTMLElement> {
     mobileMenu?: ReactNode;
 }
 export declare function IDSHeader1177ProBase({ hideRegionPicker, unresponsive, logoText, srLogoText, logoHref, logoProps, avatar, logoLink, regionPicker, items, skipToContentLink, mobileMenu, className, children, ...props }: IDSHeader1177ProBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProBase {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-base.js

@@ -7,5 +7,6 @@ function IDSHeader1177ProBase({ hideRegionPicker = false, unresponsive = false,
             "ids-header-1177-pro--unresponsive": unresponsive
         }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-1177-pro__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177-pro__main", children: [jsxs("div", { className: "ids-header-1177-pro__main-left", children: [jsx("div", { className: "ids-header-1177-pro__logo", children: logoLink ? (logoLink) : (jsx("a", { className: "ids-header-1177-pro__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }), jsx("div", { className: "ids-header-1177-pro__logo-text", children: logoText }), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177-pro__region-picker", children: regionPicker })] }), jsx("div", { className: "ids-header-1177-pro__main-right", children: jsxs("div", { className: "ids-header-1177-pro__items", children: [items, " ", avatar, mobileMenu && jsx("div", { className: "ids-header-1177-pro__mobile-menu", children: mobileMenu })] }) })] }), children] }));
 }
+IDSHeader1177ProBase.displayName = "IDSHeader1177ProBase";
 
 export { IDSHeader1177ProBase };

package/components/header-1177-pro/header-1177-pro-item-base.d.ts

@@ -5,4 +5,7 @@ interface IDSHeader1177ProItemBaseProps extends HTMLAttributes<HTMLElement> {
     unresponsive?: boolean;
 }
 export declare function IDSHeader1177ProItemBase({ mobile, icon, children, unresponsive, ...props }: IDSHeader1177ProItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProItemBase {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-item-base.js

@@ -8,5 +8,6 @@ function IDSHeader1177ProItemBase({ mobile = false, icon, children, unresponsive
             "ids-header-1177-pro-item--mobile": mobile
         }), children: [renderContent(), children] }));
 }
+IDSHeader1177ProItemBase.displayName = "IDSHeader1177ProItemBase";
 
 export { IDSHeader1177ProItemBase };

package/components/header-1177-pro/header-1177-pro-item.d.ts

@@ -4,4 +4,7 @@ interface IDSHeader1177ProItemProps extends HTMLAttributes<HTMLElement> {
     icon?: string;
 }
 export declare function IDSHeader1177ProItem({ mobile, icon, children, ...props }: IDSHeader1177ProItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProItem {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-item.js

@@ -7,5 +7,6 @@ function IDSHeader1177ProItem({ mobile, icon, children, ...props }) {
     const headerContext = useHeaderContext() || { unresponsive: false };
     return (jsx(IDSHeader1177ProItemBase, { ...props, mobile: mobile, icon: icon, unresponsive: headerContext.unresponsive, children: children }));
 }
+IDSHeader1177ProItem.displayName = "IDSHeader1177ProItem";
 
 export { IDSHeader1177ProItem };

package/components/header-1177-pro/header-1177-pro-menu-mobile-base.d.ts

@@ -9,4 +9,7 @@ interface IDSHeader1177ProMenuMobileBaseProps extends HTMLAttributes<HTMLElement
     buttonRef?: React.RefObject<HTMLButtonElement>;
 }
 export declare function IDSHeader1177ProMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, buttonRef, client, onToggleMenu, ...props }: IDSHeader1177ProMenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProMenuMobileBase {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-menu-mobile-base.js

@@ -14,5 +14,6 @@ function IDSHeader1177ProMenuMobileBase({ srLabel = "Meny", expanded = false, un
             "ids-header-1177-pro-menu-mobile--unresponsive": unresponsive
         }), ref: componentRef, ...props, children: [jsx("button", { ...toggleHandler, ref: buttonRef, "aria-expanded": expanded, "aria-label": srLabel, "aria-controls": menuId, className: "ids-header-1177-pro-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }) }), jsx("div", { id: menuId, className: "ids-header-1177-pro-menu-mobile__items", children: children })] }));
 }
+IDSHeader1177ProMenuMobileBase.displayName = "IDSHeader1177ProMenuMobileBase";
 
 export { IDSHeader1177ProMenuMobileBase };

package/components/header-1177-pro/header-1177-pro-menu-mobile.d.ts

@@ -7,4 +7,7 @@ interface IDSHeader1177ProMenuMobileProps extends HTMLAttributes<HTMLElement> {
     onClosed?: () => void;
 }
 export declare function IDSHeader1177ProMenuMobile({ srLabel, persistent, expanded, children, onExpanded, onClosed, ...props }: IDSHeader1177ProMenuMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProMenuMobile {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-menu-mobile.js

@@ -1,44 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { IDSHeader1177ProMenuMobileBase } from './header-1177-pro-menu-mobile-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
 
 function IDSHeader1177ProMenuMobile({ srLabel = "Meny", persistent = false, expanded = false, children, onExpanded, onClosed, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const componentRef = useRef(null);
     const buttonRef = useRef(null);
-    useClickOutside([componentRef, buttonRef], () => {
-        if (!persistent)
-            setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, componentRef, isExpanded && !persistent);
-    const handleLinkClick = () => {
+    const closeMenu = () => {
         setIsExpanded(false);
         onClosed?.();
     };
-    const handleClickOutside = (event) => {
-        if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
-            setIsExpanded(false);
-            onClosed?.();
-        }
-    };
-    useEffect(() => {
-        document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [persistent]);
-    useEffect(() => {
-        if (!persistent && isExpanded) {
-            const links = componentRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", handleLinkClick));
-            return () => {
-                links.forEach(link => link.removeEventListener("click", handleLinkClick));
-            };
-        }
-    }, [isExpanded, persistent]);
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
     const toggleMenu = () => {
         const next = !isExpanded;
         setIsExpanded(next);
@@ -46,5 +26,6 @@ function IDSHeader1177ProMenuMobile({ srLabel = "Meny", persistent = false, expa
     };
     return (jsx(IDSHeader1177ProMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef }));
 }
+IDSHeader1177ProMenuMobile.displayName = "IDSHeader1177ProMenuMobile";
 
 export { IDSHeader1177ProMenuMobile };

package/components/header-1177-pro/header-1177-pro-nav-base.d.ts

@@ -5,6 +5,11 @@ interface IDSHeader1177ProNavBaseProps {
     mobileAvatar?: ReactNode;
     children?: ReactNode;
     unresponsive?: boolean;
+    mobileOnly?: boolean;
+    srLabel?: string;
+}
+export declare function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive, mobileOnly, srLabel, ...props }: IDSHeader1177ProNavBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProNavBase {
+    var displayName: string;
 }
-export declare function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive, ...props }: IDSHeader1177ProNavBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177-pro/header-1177-pro-nav-base.js

@@ -1,10 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive = false, ...props }) {
+function IDSHeader1177ProNavBase({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, unresponsive = false, mobileOnly = false, srLabel = "Huvudmeny", ...props }) {
     return (jsx("nav", { className: clsx("ids-header-1177-pro-nav", {
-            "ids-header-1177-pro-nav--unresponsive": unresponsive
-        }), "aria-label": "Huvudmeny", ...props, children: jsxs("div", { className: "ids-header-1177-pro-nav__inner", children: [children, mobileRegionPicker, mobileNavItems, mobileAvatar] }) }));
+            "ids-header-1177-pro-nav--unresponsive": unresponsive,
+            "ids-header-1177-pro-nav--only-mobile": mobileOnly
+        }), "aria-label": srLabel, ...props, children: jsxs("div", { className: "ids-header-1177-pro-nav__inner", children: [children, mobileRegionPicker, mobileNavItems, mobileAvatar] }) }));
 }
+IDSHeader1177ProNavBase.displayName = "IDSHeader1177ProNavBase";
 
 export { IDSHeader1177ProNavBase };

package/components/header-1177-pro/header-1177-pro-nav-item-base.d.ts

@@ -17,3 +17,6 @@ export interface IDSHeader1177ProNavItemBaseProps extends HTMLAttributes<HTMLEle
     client?: boolean;
 }
 export declare function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client, ...props }: IDSHeader1177ProNavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProNavItemBase {
+    var displayName: string;
+}

package/components/header-1177-pro/header-1177-pro-nav-item-base.js

@@ -27,5 +27,6 @@ function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1,
                     "ids-header-1177-pro-nav-item__menu--expanded": expanded
                 }), children: jsxs("div", { className: "ids-header-1177-pro-nav-item__menu-content", children: [jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: link }, idx))) })] }) })] }));
 }
+IDSHeader1177ProNavItemBase.displayName = "IDSHeader1177ProNavItemBase";
 
 export { IDSHeader1177ProNavItemBase };

package/components/header-1177-pro/header-1177-pro-nav-item-mobile-base.d.ts

@@ -4,4 +4,7 @@ interface IDSHeader1177ProNavItemMobileBaseProps extends HTMLAttributes<HTMLElem
     unresponsive?: boolean;
 }
 export declare function IDSHeader1177ProNavItemMobileBase({ icon, unresponsive, children, ...props }: IDSHeader1177ProNavItemMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProNavItemMobileBase {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-nav-item-mobile-base.js

@@ -6,5 +6,6 @@ function IDSHeader1177ProNavItemMobileBase({ icon = "", unresponsive = false, ch
             "ids-header-1177-pro-nav-item-mobile--unresponsive": unresponsive
         }), children: [icon && (jsx("span", { className: "ids-header-1177-pro-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) })), children] }));
 }
+IDSHeader1177ProNavItemMobileBase.displayName = "IDSHeader1177ProNavItemMobileBase";
 
 export { IDSHeader1177ProNavItemMobileBase };

package/components/header-1177-pro/header-1177-pro-nav-item-mobile.d.ts

@@ -4,4 +4,7 @@ interface IDSHeader1177ProNavItemMobileProps extends HTMLAttributes<HTMLElement>
     unresponsive?: boolean;
 }
 export declare function IDSHeader1177ProNavItemMobile({ icon, unresponsive, children, ...props }: IDSHeader1177ProNavItemMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProNavItemMobile {
+    var displayName: string;
+}
 export {};

package/components/header-1177-pro/header-1177-pro-nav-item-mobile.js

@@ -7,5 +7,6 @@ function IDSHeader1177ProNavItemMobile({ icon, unresponsive, children, ...props
     const headerContext = useHeaderContext();
     return (jsx(IDSHeader1177ProNavItemMobileBase, { ...props, unresponsive: headerContext?.unresponsive, icon: icon, children: children }));
 }
+IDSHeader1177ProNavItemMobile.displayName = "IDSHeader1177ProNavItemMobile";
 
 export { IDSHeader1177ProNavItemMobile };

package/components/header-1177-pro/header-1177-pro-nav-item.d.ts

@@ -13,3 +13,6 @@ export interface IDSHeader1177ProNavItemProps extends HTMLAttributes<HTMLElement
     unresponsive?: boolean;
 }
 export declare function IDSHeader1177ProNavItem({ expanded, ...props }: IDSHeader1177ProNavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProNavItem {
+    var displayName: string;
+}

package/components/header-1177-pro/header-1177-pro-nav-item.js

@@ -5,6 +5,7 @@ import { IDSHeader1177ProNavItemBase } from './header-1177-pro-nav-item-base.js'
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
 
 function IDSHeader1177ProNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
@@ -12,39 +13,15 @@ function IDSHeader1177ProNavItem({ expanded = false, ...props }) {
     const componentRef = useRef(null);
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
-    useClickOutside([componentRef, buttonRef], () => {
-        setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, isExpanded);
+    useLinkClick(closeMenu, menuRef, buttonRef, isExpanded);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    // close when clicking outside the menu
-    useEffect(() => {
-        const onClickOutside = (event) => {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("click", onClickOutside);
-        return () => document.removeEventListener("click", onClickOutside);
-    }, []);
-    // close when clicking any link inside the menu
-    useEffect(() => {
-        const menuEl = menuRef.current;
-        if (!menuEl)
-            return;
-        const onMenuClick = (event) => {
-            const target = event.target;
-            const anchor = target.closest("a");
-            if (anchor && menuEl.contains(anchor)) {
-                setIsExpanded(false);
-            }
-        };
-        menuEl.addEventListener("click", onMenuClick);
-        return () => menuEl.removeEventListener("click", onMenuClick);
-    }, [menuRef]);
     return (jsx(IDSHeader1177ProNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
+IDSHeader1177ProNavItem.displayName = "IDSHeader1177ProNavItem";
 
 export { IDSHeader1177ProNavItem };

package/components/header-1177-pro/header-1177-pro-nav.d.ts

@@ -3,6 +3,11 @@ interface IDSHeader1177ProNavProps extends HTMLAttributes<HTMLElement> {
     mobileRegionPicker?: ReactNode;
     mobileNavItems?: ReactNode;
     mobileAvatar?: ReactNode;
+    mobileOnly?: boolean;
+    srLabel?: string;
+}
+export declare function IDSHeader1177ProNav({ mobileRegionPicker, mobileOnly, srLabel, mobileAvatar, mobileNavItems, children, ...props }: IDSHeader1177ProNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProNav {
+    var displayName: string;
 }
-export declare function IDSHeader1177ProNav({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, ...props }: IDSHeader1177ProNavProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-1177-pro/header-1177-pro-nav.js

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { IDSHeader1177ProNavBase } from './header-1177-pro-nav-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-function IDSHeader1177ProNav({ mobileRegionPicker, mobileAvatar, mobileNavItems, children, ...props }) {
+function IDSHeader1177ProNav({ mobileRegionPicker, mobileOnly, srLabel, mobileAvatar, mobileNavItems, children, ...props }) {
     const headerContext = useHeaderContext() || { unresponsive: false };
-    return (jsx(IDSHeader1177ProNavBase, { ...props, mobileRegionPicker: mobileRegionPicker, mobileNavItems: mobileNavItems, mobileAvatar: mobileAvatar, unresponsive: headerContext.unresponsive, children: children }));
+    return (jsx(IDSHeader1177ProNavBase, { ...props, mobileOnly: mobileOnly, srLabel: srLabel, mobileRegionPicker: mobileRegionPicker, mobileNavItems: mobileNavItems, mobileAvatar: mobileAvatar, unresponsive: headerContext.unresponsive, children: children }));
 }
+IDSHeader1177ProNav.displayName = "IDSHeader1177ProNav";
 
 export { IDSHeader1177ProNav };

package/components/header-1177-pro/header-1177-pro-region-picker-base.d.ts

@@ -7,3 +7,6 @@ export interface IDSHeader1177ProRegionPickerBaseProps extends HTMLAttributes<HT
     onToggleRegion?: () => void;
 }
 export declare function IDSHeader1177ProRegionPickerBase({ text, expanded, hide, children, client, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProRegionPickerBase {
+    var displayName: string;
+}

package/components/header-1177-pro/header-1177-pro-region-picker-base.js

@@ -11,9 +11,10 @@ function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hid
         : {};
     return (jsxs("div", { className: clsx("ids-header-1177-pro-region-picker", {
             "ids-header-1177-pro-region-picker--selected-region": !!children
-        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { type: "button", ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
                         "ids-header-1177-pro-region-picker__button--expanded": expanded
                     }), "aria-label": text, children: text }) })] }));
 }
+IDSHeader1177ProRegionPickerBase.displayName = "IDSHeader1177ProRegionPickerBase";
 
 export { IDSHeader1177ProRegionPickerBase };

package/components/header-1177-pro/header-1177-pro-region-picker-mobile-base.d.ts

@@ -4,6 +4,10 @@ export interface IDSHeader1177ProRegionPickerMobileBaseProps extends HTMLAttribu
     expanded?: boolean;
     hide?: boolean;
     client?: boolean;
+    unresponsive?: boolean;
     onToggleRegion?: () => void;
 }
-export declare function IDSHeader1177ProRegionPickerMobileBase({ text, expanded, children, hide, client, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPickerMobileBase({ text, expanded, children, hide, client, unresponsive, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProRegionPickerMobileBase {
+    var displayName: string;
+}