@inera/ids-react 9.1.1 → 9.2.0

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;
+}

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

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expanded, children, hide = false, client = false, onToggleRegion, ...props }) {
+function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expanded, children, hide = false, client = false, unresponsive = false, onToggleRegion, ...props }) {
     if (hide)
         return null;
     const toggleHandler = client && onToggleRegion
@@ -10,10 +10,12 @@ function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expande
         }
         : {};
     return (jsx("div", { className: clsx("ids-header-1177-pro-region-picker-mobile", {
-            "ids-header-1177-pro-region-picker-mobile--selected-region": !!children
+            "ids-header-1177-pro-region-picker-mobile--selected-region": !!children,
+            "ids-header-1177-pro-region-picker-mobile--unresponsive": unresponsive
         }), ...props, children: jsxs("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
                 "ids-header-1177-pro-region-picker-mobile__button--expanded": expanded
             }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
 }
+IDSHeader1177ProRegionPickerMobileBase.displayName = "IDSHeader1177ProRegionPickerMobileBase";
 
 export { IDSHeader1177ProRegionPickerMobileBase };

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

@@ -5,3 +5,6 @@ export interface IDSHeader1177ProRegionPickerMobileProps extends HTMLAttributes<
     onToggleRegion?: (isExpanded: boolean) => void;
 }
 export declare function IDSHeader1177ProRegionPickerMobile({ text, expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProRegionPickerMobile {
+    var displayName: string;
+}

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

@@ -14,7 +14,8 @@ function IDSHeader1177ProRegionPickerMobile({ text, expanded = false, onToggleRe
         setIsExpanded(next);
         onToggleRegion?.(next);
     };
-    return (jsx(IDSHeader1177ProRegionPickerMobileBase, { ...props, client: true, expanded: isExpanded, onToggleRegion: toggleRegion, children: children }));
+    return (jsx(IDSHeader1177ProRegionPickerMobileBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleRegion: toggleRegion, children: children }));
 }
+IDSHeader1177ProRegionPickerMobile.displayName = "IDSHeader1177ProRegionPickerMobile";
 
 export { IDSHeader1177ProRegionPickerMobile };

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

@@ -5,3 +5,6 @@ export interface IDSHeader1177ProRegionPickerProps extends HTMLAttributes<HTMLEl
     onToggleRegion?: (isExpanded: boolean) => void;
 }
 export declare function IDSHeader1177ProRegionPicker({ text, expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177ProRegionPicker {
+    var displayName: string;
+}

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

@@ -16,5 +16,6 @@ function IDSHeader1177ProRegionPicker({ text, expanded = false, onToggleRegion,
     };
     return (jsx(IDSHeader1177ProRegionPickerBase, { ...props, client: true, expanded: isExpanded, onToggleRegion: toggleRegion, children: children }));
 }
+IDSHeader1177ProRegionPicker.displayName = "IDSHeader1177ProRegionPicker";
 
 export { IDSHeader1177ProRegionPicker };

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

@@ -16,4 +16,7 @@ interface IDSHeader1177ProProps extends HTMLAttributes<HTMLElement> {
     mobileMenu?: ReactNode;
 }
 export declare function IDSHeader1177Pro({ hideRegionPicker, hideAvatar, unresponsive, children, ...props }: IDSHeader1177ProProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177Pro {
+    var displayName: string;
+}
 export {};

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

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

package/components/header-inera/header-inera-base.d.ts

@@ -11,4 +11,7 @@ interface IDSHeaderIneraBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     logo?: ReactNode;
 }
 export declare function IDSHeaderIneraBase({ logoHref, logoProps, srLogoText, unresponsive, items, mobileMenu, skipToContent, logo, className, children, ...props }: IDSHeaderIneraBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraBase {
+    var displayName: string;
+}
 export {};

package/components/header-inera/header-inera-base.js

@@ -7,5 +7,6 @@ function IDSHeaderIneraBase({ logoHref = "", logoProps = {}, srLogoText = "Logot
             "ids-header-inera--unresponsive": unresponsive
         }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera__inner", children: [jsxs("div", { className: "ids-header-inera__main", children: [logoHref ? (jsx("a", { href: logoHref, "aria-label": srLogoText, className: "ids-header-inera__logo", ...logoProps })) : logo ? (jsx("div", { className: "ids-header-inera__logo-custom", children: logo })) : (jsx("div", { className: "ids-header-inera__logo" })), jsxs("div", { className: "ids-header-inera__items", children: [items, " ", mobileMenu] })] }), children] })] }));
 }
+IDSHeaderIneraBase.displayName = "IDSHeaderIneraBase";
 
 export { IDSHeaderIneraBase };

package/components/header-inera/header-inera-item-base.d.ts

@@ -6,3 +6,6 @@ export interface IDSHeaderIneraItemBaseProps extends HTMLAttributes<HTMLElement>
     icon?: string;
 }
 export declare function IDSHeaderIneraItemBase({ mobile, unresponsive, separatorLeft, icon, children, ...props }: IDSHeaderIneraItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraItemBase {
+    var displayName: string;
+}

package/components/header-inera/header-inera-item-base.js

@@ -8,5 +8,6 @@ function IDSHeaderIneraItemBase({ mobile = false, unresponsive = false, separato
             "ids-header-inera-item--unresponsive": unresponsive
         }), ...props, children: [renderContent(), children] }));
 }
+IDSHeaderIneraItemBase.displayName = "IDSHeaderIneraItemBase";
 
 export { IDSHeaderIneraItemBase };

package/components/header-inera/header-inera-item.d.ts

@@ -5,3 +5,6 @@ export interface IDSHeaderIneraItemProps extends HTMLAttributes<HTMLElement> {
     icon?: string;
 }
 export declare function IDSHeaderIneraItem({ mobile, separatorLeft, icon, children, ...props }: IDSHeaderIneraItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraItem {
+    var displayName: string;
+}

package/components/header-inera/header-inera-item.js

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

package/components/header-inera/header-inera-menu-mobile-base.d.ts

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

package/components/header-inera/header-inera-menu-mobile-base.js

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

package/components/header-inera/header-inera-menu-mobile.d.ts

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

package/components/header-inera/header-inera-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 { IDSHeaderIneraMenuMobileBase } from './header-inera-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 IDSHeaderIneraMenuMobile({ srLabel = "Meny", expanded = false, persistent = 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, 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 IDSHeaderIneraMenuMobile({ srLabel = "Meny", expanded = false, persiste
     };
     return (jsx(IDSHeaderIneraMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef }));
 }
+IDSHeaderIneraMenuMobile.displayName = "IDSHeaderIneraMenuMobile";
 
 export { IDSHeaderIneraMenuMobile };

package/components/header-inera/header-inera-nav-base.d.ts

@@ -4,4 +4,7 @@ interface IDSHeaderIneraNavBaseProps {
     unresponsive?: boolean;
 }
 export declare function IDSHeaderIneraNavBase({ children, unresponsive, ...props }: IDSHeaderIneraNavBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraNavBase {
+    var displayName: string;
+}
 export {};

package/components/header-inera/header-inera-nav-base.js

@@ -6,5 +6,6 @@ function IDSHeaderIneraNavBase({ children, unresponsive = false, ...props }) {
             "ids-header-inera-nav--unresponsive": unresponsive
         }), "aria-label": "Huvudmeny", ...props, children: jsx("div", { className: "ids-header-inera-nav__nav-items", children: children }) }));
 }
+IDSHeaderIneraNavBase.displayName = "IDSHeaderIneraNavBase";
 
 export { IDSHeaderIneraNavBase };

package/components/header-inera/header-inera-nav-item-base.d.ts

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

package/components/header-inera/header-inera-nav-item-base.js

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

package/components/header-inera/header-inera-nav-item.d.ts

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

package/components/header-inera/header-inera-nav-item.js

@@ -5,6 +5,7 @@ import { IDSHeaderIneraNavItemBase } from './header-inera-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 IDSHeaderIneraNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
@@ -12,39 +13,15 @@ function IDSHeaderIneraNavItem({ expanded = false, ...props }) {
     const componentRef = useRef(null);
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
-    useClickOutside([componentRef, buttonRef], () => {
-        setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef);
+    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(IDSHeaderIneraNavItemBase, { ...props, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
+IDSHeaderIneraNavItem.displayName = "IDSHeaderIneraNavItem";
 
 export { IDSHeaderIneraNavItem };

package/components/header-inera/header-inera-nav.d.ts

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

package/components/header-inera/header-inera-nav.js

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

package/components/header-inera/header-inera.d.ts

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

package/components/header-inera/header-inera.js

@@ -6,5 +6,6 @@ import { IDSHeaderIneraBase } from './header-inera-base.js';
 function IDSHeaderInera({ unresponsive = false, children, ...props }) {
     return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true, hideAvatar: true }, children: jsx(IDSHeaderIneraBase, { ...props, unresponsive: unresponsive, children: children }) }));
 }
+IDSHeaderInera.displayName = "IDSHeaderInera";
 
 export { IDSHeaderInera };

package/components/header-inera-admin/header-inera-admin-avatar-base.d.ts

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

package/components/header-inera-admin/header-inera-admin-avatar-base.js

@@ -13,11 +13,12 @@ function IDSHeaderIneraAdminAvatarBase({ username, unit, children, expanded = fa
         : {};
     return (jsx("div", { ref: componentRef || undefined, className: clsx("ids-header-inera-admin-avatar", {
             "ids-header-inera-admin-avatar--unresponsive": unresponsive
-        }), children: jsxs("div", { className: "ids-header-inera-admin-avatar__menu-wrapper", children: [jsxs("button", { ref: buttonRef, className: clsx("ids-header-inera-admin-avatar__button", {
+        }), children: jsxs("div", { className: "ids-header-inera-admin-avatar__menu-wrapper", children: [jsxs("button", { type: "button", ref: buttonRef, className: clsx("ids-header-inera-admin-avatar__button", {
                         "ids-header-inera-admin-avatar__button--expanded": expanded
                     }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-inera-admin-avatar__name", title: username, children: username }), unit && (jsx("div", { className: "ids-header-inera-admin-avatar__unit", title: unit, children: unit }))] }), jsx("div", { ref: menuRef || undefined, id: menuId, className: clsx("ids-header-inera-admin-avatar__menu", {
                         "ids-header-inera-admin-avatar__menu--expanded": expanded
                     }), children: children && jsx("div", { className: "ids-header-inera-admin-avatar__menu-links", children: children }) })] }) }));
 }
+IDSHeaderIneraAdminAvatarBase.displayName = "IDSHeaderIneraAdminAvatarBase";
 
 export { IDSHeaderIneraAdminAvatarBase };

package/components/header-inera-admin/header-inera-admin-avatar-mobile-base.d.ts

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

package/components/header-inera-admin/header-inera-admin-avatar-mobile-base.js

@@ -13,11 +13,12 @@ function IDSHeaderIneraAdminAvatarMobileBase({ username = "", unit = "", expande
         : {};
     return (jsx("div", { ...props, ref: componentRef, className: clsx("ids-header-inera-admin-avatar-mobile", {
             "ids-header-inera-admin-avatar-mobile--unresponsive": unresponsive
-        }), children: jsxs("div", { className: "ids-header-inera-admin-avatar-mobile__menu-wrapper", children: [jsx("button", { ...toggleHandler, ref: buttonRef, className: clsx("ids-header-inera-admin-avatar-mobile__button", {
+        }), children: jsxs("div", { className: "ids-header-inera-admin-avatar-mobile__menu-wrapper", children: [jsx("button", { type: "button", ...toggleHandler, ref: buttonRef, className: clsx("ids-header-inera-admin-avatar-mobile__button", {
                         "ids-header-inera-admin-avatar-mobile__button--expanded": expanded
                     }), "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-inera-admin-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: menuId, className: clsx("ids-header-inera-admin-avatar-mobile__menu", {
                         "ids-header-inera-admin-avatar-mobile__menu--expanded": expanded
                     }), children: [unit && jsx("div", { className: "ids-header-inera-admin-avatar-mobile__unit", children: unit }), jsx("div", { className: "ids-header-inera-admin-avatar-mobile__menu-links", children: children })] })] }) }));
 }
+IDSHeaderIneraAdminAvatarMobileBase.displayName = "IDSHeaderIneraAdminAvatarMobileBase";
 
 export { IDSHeaderIneraAdminAvatarMobileBase };

package/components/header-inera-admin/header-inera-admin-avatar-mobile.d.ts

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

package/components/header-inera-admin/header-inera-admin-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 IDSHeaderIneraAdminAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
     const headerContext = useHeaderContext();
@@ -15,13 +16,13 @@ function IDSHeaderIneraAdminAvatarMobile({ username = "", unit = "", expanded =
     const componentRef = useRef(null);
     const buttonRef = useRef(null);
     useFocusTrap(componentRef.current, isExpanded && !persistent);
-    useClickOutside([componentRef, buttonRef], () => {
-        if (!persistent)
-            setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, 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(IDSHeaderIneraAdminAvatarMobileBase, { ...props, client: true, username: username, unit: unit, expanded: isExpanded, componentRef: componentRef, buttonRef: buttonRef, onToggleMenu: username ? toggleAvatar : undefined, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }
+IDSHeaderIneraAdminAvatarMobile.displayName = "IDSHeaderIneraAdminAvatarMobile";
 
 export { IDSHeaderIneraAdminAvatarMobile };

package/components/header-inera-admin/header-inera-admin-avatar.d.ts

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

package/components/header-inera-admin/header-inera-admin-avatar.js

@@ -1,11 +1,12 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { IDSHeaderIneraAdminAvatarBase } from './header-inera-admin-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 IDSHeaderIneraAdminAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
     const headerContext = useHeaderContext();
@@ -16,32 +17,13 @@ function IDSHeaderIneraAdminAvatar({ username, unit, expanded = false, children,
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
     useFocusTrap(componentRef.current, isExpanded && !persistent);
-    useClickOutside([componentRef, buttonRef], () => {
-        if (!persistent)
-            setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, 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(IDSHeaderIneraAdminAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, expanded: isExpanded, onToggleAvatar: toggleAvatar, unresponsive: headerContext?.unresponsive ?? false }));
 }
+IDSHeaderIneraAdminAvatar.displayName = "IDSHeaderIneraAdminAvatar";
 
 export { IDSHeaderIneraAdminAvatar };

package/components/header-inera-admin/header-inera-admin-base.d.ts

@@ -13,3 +13,6 @@ export interface IDSHeaderIneraAdminBaseProps extends React.HTMLAttributes<HTMLD
     mobileMenu?: ReactNode;
 }
 export declare function IDSHeaderIneraAdminBase({ brandText, unresponsive, showLogo, items, avatar, skipToContentLink, brandLink, srLogoText, serviceName, mobileMenu, className, children, ...props }: IDSHeaderIneraAdminBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraAdminBase {
+    var displayName: string;
+}

package/components/header-inera-admin/header-inera-admin-base.js

@@ -16,5 +16,6 @@ function IDSHeaderIneraAdminBase({ brandText = "", unresponsive = false, showLog
             "ids-header-inera-admin--unresponsive": unresponsive
         }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-inera-admin__inner", children: [jsxs("div", { className: "ids-header-inera-admin__main", children: [jsx("div", { className: "ids-header-inera-admin__service-wrapper", children: jsxs("div", { className: "ids-header-inera-admin__brand", children: [showLogo && jsx("div", { className: "ids-header-inera-admin__logo", role: "img", "aria-label": srLogoText }), jsxs("div", { className: "ids-header-inera-admin__brand-inner", children: [renderBrandText(), jsx("h1", { className: "ids-header-inera-admin__brand-text", children: brandText }), jsx("h2", { className: "ids-header-inera-admin__service-name", children: serviceName })] })] }) }), jsxs("div", { className: "ids-header-inera-admin__items", children: [items, " ", avatar, " ", mobileMenu && jsx("div", { className: "ids-header-inera-admin__mobile-menu", children: mobileMenu })] })] }), children] })] }));
 }
+IDSHeaderIneraAdminBase.displayName = "IDSHeaderIneraAdminBase";
 
 export { IDSHeaderIneraAdminBase };

package/components/header-inera-admin/header-inera-admin-item-base.d.ts

@@ -6,3 +6,6 @@ export interface IDSHeaderIneraAdminItemBaseProps extends HTMLAttributes<HTMLEle
     icon?: string;
 }
 export declare function IDSHeaderIneraAdminItemBase({ mobile, unresponsive, separatorLeft, icon, children, ...props }: IDSHeaderIneraAdminItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraAdminItemBase {
+    var displayName: string;
+}

package/components/header-inera-admin/header-inera-admin-item-base.js

@@ -9,5 +9,6 @@ function IDSHeaderIneraAdminItemBase({ mobile = false, unresponsive = false, sep
             "ids-header-inera-admin-item--separator": separatorLeft,
         }), ...props, children: [renderContent(), children] }));
 }
+IDSHeaderIneraAdminItemBase.displayName = "IDSHeaderIneraAdminItemBase";
 
 export { IDSHeaderIneraAdminItemBase };

package/components/header-inera-admin/header-inera-admin-item.d.ts

@@ -5,3 +5,6 @@ export interface IDSHeaderIneraAdminItemProps extends HTMLAttributes<HTMLElement
     icon?: string;
 }
 export declare function IDSHeaderIneraAdminItem({ mobile, separatorLeft, icon, children, ...props }: IDSHeaderIneraAdminItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraAdminItem {
+    var displayName: string;
+}

package/components/header-inera-admin/header-inera-admin-item.js

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

package/components/header-inera-admin/header-inera-admin-menu-mobile-base.d.ts

@@ -9,4 +9,7 @@ interface IDSHeaderIneraAdminMenuMobileBaseProps extends HTMLAttributes<HTMLElem
     client?: boolean;
 }
 export declare function IDSHeaderIneraAdminMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, buttonRef, onToggleMenu, client, ...props }: IDSHeaderIneraAdminMenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraAdminMenuMobileBase {
+    var displayName: string;
+}
 export {};