@inera/ids-react 9.0.3 → 9.1.0

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

@@ -1,38 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect } from 'react';
+import { useId, 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';
 
 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 toggleAvatar = () => setIsExpanded(prev => !prev);
-    useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [persistent]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177AdminAvatarMobileBase, { ...props, client: true, username: username, unit: unit, unresponsive: headerContext?.unresponsive ?? false, hide: headerContext?.hideAvatar, expanded: isExpanded, onToggleAvatar: toggleAvatar, componentRef: componentRef, children: children }));
+    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 }));
 }
 
 export { IDSHeader1177AdminAvatarMobile };

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

@@ -3,12 +3,22 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } 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';
 
 function IDSHeader1177AdminAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const componentRef = useRef(null);
     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 toggleAvatar = () => setIsExpanded(prev => !prev);
     const handleClickOutside = (event) => {
         if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
@@ -29,20 +39,7 @@ function IDSHeader1177AdminAvatar({ username, unit, expanded = false, children,
             };
         }
     }, [isExpanded, persistent]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177AdminAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, expanded: isExpanded, unresponsive: headerContext?.unresponsive, hide: headerContext?.hideAvatar, onToggleAvatar: toggleAvatar }));
+    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 }));
 }
 
 export { IDSHeader1177AdminAvatar };

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

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

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177AdminMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, client = false, children, componentRef, onToggleMenu, ...props }) {
+function IDSHeader1177AdminMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, client = false, children, componentRef, buttonRef, onToggleMenu, ...props }) {
     const menuId = `header-1177-admin-menu-${useId()}`;
     const toggleHandler = client && onToggleMenu
         ? {
@@ -12,7 +12,7 @@ function IDSHeader1177AdminMenuMobileBase({ srLabel = "Meny", expanded = false,
     return (jsxs("div", { className: clsx("ids-header-1177-admin-menu-mobile", {
             "ids-header-1177-admin-menu-mobile--expanded": expanded,
             "ids-header-1177-admin-menu-mobile--unresponsive": unresponsive
-        }), ref: componentRef, ...props, children: [jsx("button", { ...toggleHandler, "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 })] }));
+        }), 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 })] }));
 }
 
 export { IDSHeader1177AdminMenuMobileBase };

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

@@ -3,11 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } 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';
 
 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 = () => {
         setIsExpanded(false);
         onClosed?.();
@@ -36,20 +44,7 @@ function IDSHeader1177AdminMenuMobile({ srLabel = "Meny", persistent = false, ex
         setIsExpanded(next);
         next ? onExpanded?.() : onClosed?.();
     };
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177AdminMenuMobileBase, { ...props, client: true, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, children: children }));
+    return (jsx(IDSHeader1177AdminMenuMobileBase, { ...props, client: true, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef, children: children }));
 }
 
 export { IDSHeader1177AdminMenuMobile };

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

@@ -11,8 +11,9 @@ export interface IDSHeader1177AdminNavItemBaseProps extends HTMLAttributes<HTMLE
     col4?: ReactElement<IDSLinkProps>[];
     componentRef?: React.Ref<HTMLDivElement>;
     menuRef?: React.Ref<HTMLDivElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
     onToggleItem?: () => void;
     unresponsive?: boolean;
     client?: boolean;
 }
-export declare function IDSHeader1177AdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, client, ...props }: IDSHeader1177AdminNavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177AdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client, ...props }: IDSHeader1177AdminNavItemBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177AdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, client = false, ...props }) {
+function IDSHeader1177AdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client = false, ...props }) {
     const itemId = `header-1177-admin-item-${useId()}`;
     const toggleHandler = client && onToggleItem
         ? {
@@ -13,7 +13,7 @@ function IDSHeader1177AdminNavItemBase({ label, active, expanded, children, col1
             "ids-header-1177-admin-nav-item--unresponsive": unresponsive,
             "ids-header-1177-admin-nav-item--expanded": expanded,
             "ids-header-1177-admin-nav-item--active": active
-        }), children: [!!label && (jsx("button", { "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-1177-admin-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-admin-nav-item__link", children: React.Children.map(children, child => {
+        }), children: [!!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-1177-admin-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-admin-nav-item__link", children: React.Children.map(children, child => {
                     if (!React.isValidElement(child))
                         return child;
                     const element = child;

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

@@ -3,12 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSHeader1177AdminNavItemBase } from './header-1177-admin-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';
 
 function IDSHeader1177AdminNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const componentRef = useRef(null);
     const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    useClickOutside([componentRef, buttonRef], () => {
+        setIsExpanded(false);
+    });
+    useEsc(() => setIsExpanded(false), buttonRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
@@ -37,20 +44,7 @@ function IDSHeader1177AdminNavItem({ expanded = false, ...props }) {
         menuEl.addEventListener("click", onMenuClick);
         return () => menuEl.removeEventListener("click", onMenuClick);
     }, [menuRef]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded]);
-    return (jsx(IDSHeader1177AdminNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
+    return (jsx(IDSHeader1177AdminNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
 
 export { IDSHeader1177AdminNavItem };

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

@@ -8,7 +8,8 @@ export interface IDSHeader1177ProAvatarBaseProps extends HTMLAttributes<HTMLElem
     onToggleAvatar?: () => void;
     componentRef?: React.RefObject<HTMLDivElement>;
     menuRef?: React.RefObject<HTMLDivElement>;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
     unresponsive?: boolean;
     client?: boolean;
 }
-export declare function IDSHeader1177ProAvatarBase({ username, unit, children, expanded, hide, client, onToggleAvatar, componentRef, menuRef, unresponsive }: IDSHeader1177ProAvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProAvatarBase({ username, unit, children, expanded, hide, client, onToggleAvatar, componentRef, menuRef, buttonRef, unresponsive }: IDSHeader1177ProAvatarBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from 'react';
 
-function IDSHeader1177ProAvatarBase({ username, unit, children, expanded = false, hide = false, client = false, onToggleAvatar, componentRef, menuRef, unresponsive }) {
+function IDSHeader1177ProAvatarBase({ username, unit, children, expanded = false, hide = false, client = false, onToggleAvatar, componentRef, menuRef, buttonRef, unresponsive }) {
     if (hide)
         return null;
     const menuId = `header-1177-pro-avatar-menu-${useId()}`;
@@ -15,7 +15,7 @@ function IDSHeader1177ProAvatarBase({ username, unit, children, expanded = false
             "ids-header-1177-pro-avatar--unresponsive": unresponsive
         }), children: jsxs("div", { className: "ids-header-1177-pro-avatar__menu-wrapper", children: [jsxs("button", { className: clsx("ids-header-1177-pro-avatar__button", {
                         "ids-header-1177-pro-avatar__button--expanded": expanded
-                    }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-1177-pro-avatar__name", title: username, children: username }), unit && (jsx("div", { className: "ids-header-1177-pro-avatar__unit", title: unit, children: unit }))] }), jsx("div", { ref: menuRef || undefined, id: menuId, className: clsx("ids-header-1177-pro-avatar__menu", {
+                    }), ...toggleHandler, ref: buttonRef, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-1177-pro-avatar__name", title: username, children: username }), unit && (jsx("div", { className: "ids-header-1177-pro-avatar__unit", title: unit, children: unit }))] }), jsx("div", { ref: menuRef || undefined, id: menuId, className: clsx("ids-header-1177-pro-avatar__menu", {
                         "ids-header-1177-pro-avatar__menu--expanded": expanded
                     }), children: children && jsx("div", { className: "ids-header-1177-pro-avatar__menu-links", children: children }) })] }) }));
 }

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

@@ -8,6 +8,7 @@ interface IDSHeader1177ProAvatarMobileBaseProps extends HTMLAttributes<HTMLDivEl
     onToggleMenu?: () => void;
     client?: ReactNode;
     componentRef?: React.RefObject<HTMLDivElement>;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
 }
-export declare function IDSHeader1177ProAvatarMobileBase({ username, unit, expanded, hide, unresponsive, componentRef, children, client, onToggleMenu, ...props }: IDSHeader1177ProAvatarMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProAvatarMobileBase({ username, unit, expanded, hide, unresponsive, componentRef, buttonRef, children, client, onToggleMenu, ...props }: IDSHeader1177ProAvatarMobileBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177ProAvatarMobileBase({ username = "", unit = "", expanded, hide, unresponsive, componentRef, children, client = false, onToggleMenu, ...props }) {
+function IDSHeader1177ProAvatarMobileBase({ username = "", unit = "", expanded, hide, unresponsive, componentRef, buttonRef, children, client = false, onToggleMenu, ...props }) {
     if (hide)
         return null;
     const menuId = `header-1177-pro-avatar-mobile-menu-${useId()}`;
@@ -14,7 +14,7 @@ function IDSHeader1177ProAvatarMobileBase({ username = "", unit = "", expanded,
     return (jsx("div", { ref: componentRef, className: clsx("ids-header-1177-pro-avatar-mobile", {
             "ids-header-1177-pro-avatar-mobile--logged-in": !!username,
             "ids-header-1177-pro-avatar-mobile--unresponsive": unresponsive
-        }), ...props, children: jsxs("div", { className: "ids-header-1177-pro-avatar-mobile__menu-wrapper", children: [jsx("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-avatar-mobile__button", {
+        }), ...props, children: jsxs("div", { className: "ids-header-1177-pro-avatar-mobile__menu-wrapper", children: [jsx("button", { ...toggleHandler, ref: buttonRef, className: clsx("ids-header-1177-pro-avatar-mobile__button", {
                         "ids-header-1177-pro-avatar-mobile__button--expanded": expanded
                     }), "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-pro-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: menuId, className: clsx("ids-header-1177-pro-avatar-mobile__menu", {
                         "ids-header-1177-pro-avatar-mobile__menu--expanded": expanded

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

@@ -1,37 +1,25 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { IDSHeader1177ProAvatarMobileBase } from './header-1177-pro-avatar-mobile-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';
 
 function IDSHeader1177ProAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     const componentRef = useRef(null);
-    const toggleAvatar = () => setIsExpanded(prev => !prev);
-    const handleClickOutside = (event) => {
-        if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
+    const buttonRef = useRef(null);
+    useFocusTrap(componentRef.current, isExpanded && !persistent);
+    useClickOutside([componentRef, buttonRef], () => {
+        if (!persistent)
             setIsExpanded(false);
-        }
-    };
-    useEffect(() => {
-        document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [persistent]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177ProAvatarMobileBase, { ...props, client: true, username: username, unit: unit, expanded: isExpanded, componentRef: componentRef, onToggleMenu: username ? toggleAvatar : undefined, hide: headerContext?.hideAvatar ?? false, unresponsive: headerContext?.unresponsive ?? false, children: children }));
+    });
+    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    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 }));
 }
 
 export { IDSHeader1177ProAvatarMobile };

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

@@ -3,6 +3,9 @@ import { jsx } from 'react/jsx-runtime';
 import { useId, useState, useRef, useEffect } 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';
 
 function IDSHeader1177ProAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
     useId();
@@ -10,6 +13,13 @@ function IDSHeader1177ProAvatar({ username, unit, expanded = false, children, pe
     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, isExpanded && !persistent);
     const toggleAvatar = () => setIsExpanded(prev => !prev);
     useEffect(() => {
         const clickOutsideHandler = (e) => {
@@ -30,20 +40,7 @@ function IDSHeader1177ProAvatar({ username, unit, expanded = false, children, pe
             };
         }
     }, [isExpanded, persistent]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177ProAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, expanded: isExpanded, onToggleAvatar: toggleAvatar, unresponsive: headerContext?.unresponsive ?? false, hide: headerContext?.hideAvatar ?? false }));
+    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 }));
 }
 
 export { IDSHeader1177ProAvatar };

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

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

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177ProMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, children, componentRef, client = false, onToggleMenu, ...props }) {
+function IDSHeader1177ProMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, children, componentRef, buttonRef, client = false, onToggleMenu, ...props }) {
     const menuId = `header-1177-pro-menu-${useId()}`;
     const toggleHandler = client && onToggleMenu
         ? {
@@ -12,7 +12,7 @@ function IDSHeader1177ProMenuMobileBase({ srLabel = "Meny", expanded = false, un
     return (jsxs("div", { className: clsx("ids-header-1177-pro-menu-mobile", {
             "ids-header-1177-pro-menu-mobile--expanded": expanded,
             "ids-header-1177-pro-menu-mobile--unresponsive": unresponsive
-        }), ref: componentRef, ...props, children: [jsx("button", { ...toggleHandler, "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 })] }));
+        }), 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 })] }));
 }
 
 export { IDSHeader1177ProMenuMobileBase };

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

@@ -3,11 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } 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';
 
 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, isExpanded && !persistent);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();
@@ -36,20 +44,7 @@ function IDSHeader1177ProMenuMobile({ srLabel = "Meny", persistent = false, expa
         setIsExpanded(next);
         next ? onExpanded?.() : onClosed?.();
     };
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeader1177ProMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef }));
+    return (jsx(IDSHeader1177ProMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef }));
 }
 
 export { IDSHeader1177ProMenuMobile };

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

@@ -11,8 +11,9 @@ export interface IDSHeader1177ProNavItemBaseProps extends HTMLAttributes<HTMLEle
     col4?: ReactElement<IDSLinkProps>[];
     componentRef?: React.Ref<HTMLDivElement>;
     menuRef?: React.Ref<HTMLDivElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
     onToggleItem?: () => void;
     unresponsive?: boolean;
     client?: boolean;
 }
-export declare function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, client, ...props }: IDSHeader1177ProNavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+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;

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, client = false, ...props }) {
+function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client = false, ...props }) {
     const itemId = `header-1177-pro-item-${useId()}`;
     const toggleHandler = client && onToggleItem
         ? {
@@ -13,7 +13,7 @@ function IDSHeader1177ProNavItemBase({ label, active, expanded, children, col1,
             "ids-header-1177-pro-nav-item--unresponsive": unresponsive,
             "ids-header-1177-pro-nav-item--expanded": expanded,
             "ids-header-1177-pro-nav-item--active": active
-        }), ...props, children: [!!label && (jsx("button", { "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-1177-pro-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-pro-nav-item__link", children: React.Children.map(children, child => {
+        }), ...props, children: [!!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-1177-pro-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-1177-pro-nav-item__link", children: React.Children.map(children, child => {
                     if (!React.isValidElement(child))
                         return child;
                     const element = child;

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

@@ -3,12 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 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';
 
 function IDSHeader1177ProNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const componentRef = useRef(null);
     const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    useClickOutside([componentRef, buttonRef], () => {
+        setIsExpanded(false);
+    });
+    useEsc(() => setIsExpanded(false), buttonRef);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
@@ -37,20 +44,7 @@ function IDSHeader1177ProNavItem({ expanded = false, ...props }) {
         menuEl.addEventListener("click", onMenuClick);
         return () => menuEl.removeEventListener("click", onMenuClick);
     }, [menuRef]);
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded]);
-    return (jsx(IDSHeader1177ProNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
+    return (jsx(IDSHeader1177ProNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
 
 export { IDSHeader1177ProNavItem };

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

@@ -5,7 +5,8 @@ interface IDSHeaderIneraMenuMobileBaseProps extends HTMLAttributes<HTMLElement>
     unresponsive?: boolean;
     onToggleMenu?: () => void;
     componentRef?: React.RefObject<HTMLDivElement>;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
     client?: boolean;
 }
-export declare function IDSHeaderIneraMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, onToggleMenu, client, ...props }: IDSHeaderIneraMenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, buttonRef, onToggleMenu, client, ...props }: IDSHeaderIneraMenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,7 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeaderIneraMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, children, componentRef, onToggleMenu, client = false, ...props }) {
+function IDSHeaderIneraMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, children, componentRef, buttonRef, onToggleMenu, client = false, ...props }) {
     const menuId = `header-inera-menu-${useId()}`;
     const toggleHandler = client && onToggleMenu
         ? {
@@ -12,7 +12,7 @@ function IDSHeaderIneraMenuMobileBase({ srLabel = "Meny", expanded = false, unre
     return (jsxs("div", { ...props, ref: componentRef, className: clsx("ids-header-inera-menu-mobile", {
             "ids-header-inera-menu-mobile--expanded": expanded,
             "ids-header-inera-menu-mobile--unresponsive": unresponsive
-        }), children: [jsx("button", { "aria-label": srLabel, "aria-expanded": expanded, "aria-controls": menuId, ...toggleHandler, 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 })] }));
+        }), 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 })] }));
 }
 
 export { IDSHeaderIneraMenuMobileBase };

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

@@ -3,11 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } 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';
 
 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 = () => {
         setIsExpanded(false);
         onClosed?.();
@@ -36,20 +44,7 @@ function IDSHeaderIneraMenuMobile({ srLabel = "Meny", expanded = false, persiste
         setIsExpanded(next);
         next ? onExpanded?.() : onClosed?.();
     };
-    // Escape should also close
-    useEffect(() => {
-        if (!isExpanded || persistent)
-            return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [isExpanded, persistent]);
-    return (jsx(IDSHeaderIneraMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef }));
+    return (jsx(IDSHeaderIneraMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef }));
 }
 
 export { IDSHeaderIneraMenuMobile };