@inera/ids-react 9.1.1 → 9.2.0

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

@@ -1,10 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { IDSHeader1177MenuMobileBase } from './header-1177-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 IDSHeader1177MenuMobile({ srLabel = "Meny", persistent = false, expanded = false, children, onExpanded, onClosed, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
@@ -12,38 +13,20 @@ function IDSHeader1177MenuMobile({ srLabel = "Meny", persistent = false, expande
     const componentRef = useRef(null);
     const menuRef = 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?.();
     };
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
     const toggleMenu = () => {
         const newExpanded = !isExpanded;
         setIsExpanded(newExpanded);
         newExpanded ? onExpanded?.() : 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 = menuRef.current?.querySelectorAll("a") ?? [];
-            links.forEach(link => link.addEventListener("click", handleLinkClick));
-            return () => links.forEach(link => link.removeEventListener("click", handleLinkClick));
-        }
-    }, [isExpanded, persistent]);
     return (jsx(IDSHeader1177MenuMobileBase, { ...props, client: true, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, children: children }));
 }
+IDSHeader1177MenuMobile.displayName = "IDSHeader1177MenuMobile";
 
 export { IDSHeader1177MenuMobile };

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

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

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

@@ -8,5 +8,6 @@ function IDSHeader1177NavBase({ hideOnTablet = false, mobileLeft, mobileRight, c
     });
     return (jsxs("nav", { className: navClass, "aria-label": "Huvudmeny", ...props, children: [jsx("div", { className: "ids-header-1177-nav__inner", children: jsx("div", { className: "ids-header-1177-nav__content", children: children }) }), jsxs("div", { className: "ids-header-1177-nav__inner-mobile", children: [jsx("div", { className: "ids-header-1177-nav__inner-mobile-left", children: mobileLeft }), jsx("div", { className: "ids-header-1177-nav__inner-mobile-right", children: mobileRight })] })] }));
 }
+IDSHeader1177NavBase.displayName = "IDSHeader1177NavBase";
 
 export { IDSHeader1177NavBase };

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ import { IDSHeader1177NavItemBase } from './header-1177-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 IDSHeader1177NavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
@@ -12,39 +13,15 @@ function IDSHeader1177NavItem({ 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(IDSHeader1177NavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
+IDSHeader1177NavItem.displayName = "IDSHeader1177NavItem";
 
 export { IDSHeader1177NavItem };

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

@@ -5,4 +5,7 @@ interface IDSHeader1177NavProps extends HTMLAttributes<HTMLElement> {
     mobileRight?: ReactNode;
 }
 export declare function IDSHeader1177Nav({ hideOnTablet, mobileLeft, mobileRight, children, ...props }: IDSHeader1177NavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177Nav {
+    var displayName: string;
+}
 export {};

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

@@ -5,7 +5,8 @@ import { IDSHeader1177NavBase } from './header-1177-nav-base.js';
 
 function IDSHeader1177Nav({ hideOnTablet = false, mobileLeft, mobileRight, children, ...props }) {
     const headerContext = useHeaderContext();
-    return (jsx(IDSHeader1177NavBase, { ...props, hideOnTablet: hideOnTablet, mobileLeft: mobileLeft, mobileRight: mobileRight, unresponsive: headerContext?.unresponsive ?? false, children: children }));
+    return (jsx(IDSHeader1177NavBase, { ...props, hideOnTablet: hideOnTablet || !headerContext?.unresponsive, mobileLeft: mobileLeft, mobileRight: mobileRight, unresponsive: headerContext?.unresponsive ?? false, children: children }));
 }
+IDSHeader1177Nav.displayName = "IDSHeader1177Nav";
 
 export { IDSHeader1177Nav };

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

@@ -7,3 +7,6 @@ export interface IDSHeader1177RegionPickerBaseProps extends HTMLAttributes<HTMLE
     client?: boolean;
 }
 export declare function IDSHeader1177RegionPickerBase({ text, expanded, hide, children, onToggle, client, ...props }: IDSHeader1177RegionPickerBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177RegionPickerBase {
+    var displayName: string;
+}

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

@@ -17,5 +17,6 @@ function IDSHeader1177RegionPickerBase({ text = "Välj region", expanded = false
                         "ids-header-1177-region-picker__button--expanded": expanded
                     }), "aria-label": text, children: text }) })] }));
 }
+IDSHeader1177RegionPickerBase.displayName = "IDSHeader1177RegionPickerBase";
 
 export { IDSHeader1177RegionPickerBase };

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

@@ -7,3 +7,6 @@ export interface IDSHeader1177RegionPickerMobileBaseProps extends HTMLAttributes
     client?: boolean;
 }
 export declare function IDSHeader1177RegionPickerMobileBase({ text, expanded, children, onToggle, hide, client, ...props }: IDSHeader1177RegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177RegionPickerMobileBase {
+    var displayName: string;
+}

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

@@ -17,5 +17,6 @@ function IDSHeader1177RegionPickerMobileBase({ text = "Välj region", expanded =
                 "ids-header-1177-region-picker-mobile__button--expanded": expanded
             }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-region-picker-mobile__button-text", children: text })] }) }));
 }
+IDSHeader1177RegionPickerMobileBase.displayName = "IDSHeader1177RegionPickerMobileBase";
 
 export { IDSHeader1177RegionPickerMobileBase };

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

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

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

@@ -16,5 +16,6 @@ function IDSHeader1177RegionPickerMobile({ expanded = false, onToggleRegion, chi
     };
     return (jsx(IDSHeader1177RegionPickerMobileBase, { ...props, client: true, expanded: isExpanded, onToggle: toggle, children: children }));
 }
+IDSHeader1177RegionPickerMobile.displayName = "IDSHeader1177RegionPickerMobile";
 
 export { IDSHeader1177RegionPickerMobile };

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

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

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

@@ -16,5 +16,6 @@ function IDSHeader1177RegionPicker({ expanded = false, onToggleRegion, children,
     };
     return (jsx(IDSHeader1177RegionPickerBase, { ...props, client: true, expanded: isExpanded, onToggle: toggle, children: children }));
 }
+IDSHeader1177RegionPicker.displayName = "IDSHeader1177RegionPicker";
 
 export { IDSHeader1177RegionPicker };

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

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

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

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

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

@@ -12,4 +12,7 @@ interface IDSHeader1177AdminAvatarBaseProps extends HTMLAttributes<HTMLElement>
     client?: boolean;
 }
 export declare function IDSHeader1177AdminAvatarBase({ username, unit, expanded, unresponsive, hide, componentRef, menuRef, buttonRef, children, onToggleAvatar, client, ...props }: IDSHeader1177AdminAvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177AdminAvatarBase {
+    var displayName: string;
+}
 export {};

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

@@ -15,9 +15,10 @@ function IDSHeader1177AdminAvatarBase({ username, unit, expanded = false, unresp
             "ids-header-1177-admin-avatar--unresponsive": unresponsive
         }), ...props, children: jsxs("div", { className: "ids-header-1177-admin-avatar__menu-wrapper", children: [jsxs("button", { ref: buttonRef, className: clsx("ids-header-1177-admin-avatar__button", {
                         "ids-header-1177-admin-avatar__button--expanded": expanded
-                    }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-1177-admin-avatar__name", title: username, children: username }), unit && (jsxs(Fragment, { children: [jsx("span", { className: "ids-header-1177-admin-avatar__unit-separator", children: "|" }), jsx("span", { className: "ids-header-1177-admin-avatar__unit", title: unit, children: unit })] }))] }), jsx("div", { ref: menuRef, id: menuId, className: clsx("ids-header-1177-admin-avatar__menu", {
+                    }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-1177-admin-avatar__name", title: username, children: username }), unit && (jsx(Fragment, { children: jsx("div", { className: "ids-header-1177-admin-avatar__unit", title: unit, children: unit }) }))] }), jsx("div", { ref: menuRef, id: menuId, className: clsx("ids-header-1177-admin-avatar__menu", {
                         "ids-header-1177-admin-avatar__menu--expanded": expanded
                     }), children: children && jsx("div", { className: "ids-header-1177-admin-avatar__menu-links", children: children }) })] }) }));
 }
+IDSHeader1177AdminAvatarBase.displayName = "IDSHeader1177AdminAvatarBase";
 
 export { IDSHeader1177AdminAvatarBase };

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

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

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

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

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

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

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

@@ -1,26 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef } from 'react';
+import { useState, useRef } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177AdminAvatarMobileBase } from './header-1177-admin-avatar-mobile-base.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 IDSHeader1177AdminAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
-    useId();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     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(IDSHeader1177AdminAvatarMobileBase, { ...props, client: true, username: username, unit: unit, unresponsive: headerContext?.unresponsive ?? false, hide: headerContext?.hideAvatar, expanded: isExpanded, onToggleAvatar: toggleAvatar, componentRef: componentRef, buttonRef: buttonRef, children: children }));
 }
+IDSHeader1177AdminAvatarMobile.displayName = "IDSHeader1177AdminAvatarMobile";
 
 export { IDSHeader1177AdminAvatarMobile };

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

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

package/components/header-1177-admin/header-1177-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 { IDSHeader1177AdminAvatarBase } from './header-1177-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 IDSHeader1177AdminAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
@@ -14,32 +15,13 @@ function IDSHeader1177AdminAvatar({ username, unit, expanded = false, children,
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
     useFocusTrap(menuRef.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);
-    const handleClickOutside = (event) => {
-        if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
-            setIsExpanded(false);
-        }
-    };
-    useEffect(() => {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => document.removeEventListener("mousedown", handleClickOutside);
-    }, [persistent]);
-    const handleLinkClick = () => setIsExpanded(false);
-    useEffect(() => {
-        if (!persistent && isExpanded) {
-            const links = menuRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", handleLinkClick));
-            return () => {
-                links.forEach(link => link.removeEventListener("click", handleLinkClick));
-            };
-        }
-    }, [isExpanded, persistent]);
     return (jsx(IDSHeader1177AdminAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, expanded: isExpanded, unresponsive: headerContext?.unresponsive, hide: headerContext?.hideAvatar, onToggleAvatar: toggleAvatar }));
 }
+IDSHeader1177AdminAvatar.displayName = "IDSHeader1177AdminAvatar";
 
 export { IDSHeader1177AdminAvatar };

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

@@ -15,4 +15,7 @@ interface IDSHeader1177AdminBaseProps extends React.HTMLAttributes<HTMLDivElemen
     skipToContentLink?: ReactNode;
 }
 export declare function IDSHeader1177AdminBase({ unresponsive, srLogoText, brandTextTop, brandText, brandTextBottom, logoHref, logoProps, logo, avatar, mobileMenu, items, skipToContentLink, className, children, ...props }: IDSHeader1177AdminBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177AdminBase {
+    var displayName: string;
+}
 export {};

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

@@ -10,5 +10,6 @@ function IDSHeader1177AdminBase({ unresponsive = false, srLogoText = "Logotyp",
             "ids-header-1177-admin--unresponsive": unresponsive
         }, className), style: { position: "relative", zIndex: 3 }, children: [skipToContentLink && jsx("div", { className: "ids-header-1177-admin__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177-admin__main", children: [jsxs("div", { className: "ids-header-1177-admin__main-left", children: [jsx("div", { className: "ids-header-1177-admin__logo", children: renderLogo() }), jsxs("div", { className: "ids-header-1177-admin__brand", children: [brandTextTop && jsx("div", { className: "ids-header-1177-admin__brand-text---supplement", children: brandTextTop }), brandText && jsx("div", { className: "ids-header-1177-admin__brand-text", children: brandText }), brandTextBottom && jsx("div", { className: "ids-header-1177-admin__brand-text---supplement", children: brandTextBottom })] })] }), jsxs("div", { className: "ids-header-1177-admin__main-right", children: [items, avatar, mobileMenu] })] }), children] }));
 }
+IDSHeader1177AdminBase.displayName = "IDSHeader1177AdminBase";
 
 export { IDSHeader1177AdminBase };

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

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

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

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

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

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

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

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

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

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

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

@@ -14,5 +14,6 @@ function IDSHeader1177AdminMenuMobileBase({ srLabel = "Meny", expanded = false,
             "ids-header-1177-admin-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-admin-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }) }), jsx("div", { id: menuId, className: "ids-header-1177-admin-menu-mobile__items", children: children })] }));
 }
+IDSHeader1177AdminMenuMobileBase.displayName = "IDSHeader1177AdminMenuMobileBase";
 
 export { IDSHeader1177AdminMenuMobileBase };

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

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

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

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

@@ -2,6 +2,11 @@ import { HTMLAttributes, ReactNode } from "react";
 interface IDSHeader1177AdminNavBaseProps extends HTMLAttributes<HTMLElement> {
     children?: ReactNode;
     unresponsive?: boolean;
+    mobileOnly?: boolean;
+    srLabel?: string;
+}
+export declare function IDSHeader1177AdminNavBase({ mobileOnly, srLabel, unresponsive, children, ...props }: IDSHeader1177AdminNavBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeader1177AdminNavBase {
+    var displayName: string;
 }
-export declare function IDSHeader1177AdminNavBase({ children, unresponsive, ...props }: IDSHeader1177AdminNavBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};