@inera/ids-react 9.0.3 → 9.1.0

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

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

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

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

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

@@ -3,12 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 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';
 
 function IDSHeaderIneraNavItem({ 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 IDSHeaderIneraNavItem({ 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(IDSHeaderIneraNavItemBase, { ...props, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
+    return (jsx(IDSHeaderIneraNavItemBase, { ...props, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
 
 export { IDSHeaderIneraNavItem };

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

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

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useId } from 'react';
 
-function IDSHeaderIneraAdminAvatarBase({ username, unit, children, expanded = false, hide = false, onToggleAvatar, componentRef, menuRef, unresponsive, client = false }) {
+function IDSHeaderIneraAdminAvatarBase({ username, unit, children, expanded = false, hide = false, onToggleAvatar, componentRef, menuRef, buttonRef, unresponsive, client = false }) {
     if (hide)
         return null;
     const menuId = `header-inera-admin-menu-${useId()}`;
@@ -13,7 +13,7 @@ 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", { className: clsx("ids-header-inera-admin-avatar__button", {
+        }), children: jsxs("div", { className: "ids-header-inera-admin-avatar__menu-wrapper", children: [jsxs("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

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

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

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

@@ -2,7 +2,7 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 import { useId } from 'react';
 import clsx from 'clsx';
 
-function IDSHeaderIneraAdminAvatarMobileBase({ username = "", unit = "", expanded, hide, unresponsive, componentRef, children, onToggleMenu, client = false, ...props }) {
+function IDSHeaderIneraAdminAvatarMobileBase({ username = "", unit = "", expanded, hide, unresponsive, componentRef, buttonRef, children, onToggleMenu, client = false, ...props }) {
     if (hide)
         return null;
     const menuId = `header-inera-admin-menu-${useId()}`;
@@ -13,7 +13,7 @@ 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, className: clsx("ids-header-inera-admin-avatar-mobile__button", {
+        }), 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", {
                         "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

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

@@ -1,8 +1,11 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { IDSHeaderIneraAdminAvatarMobileBase } from './header-inera-admin-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 IDSHeaderIneraAdminAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
     const headerContext = useHeaderContext();
@@ -10,30 +13,15 @@ function IDSHeaderIneraAdminAvatarMobile({ username = "", unit = "", expanded =
         return null;
     const [isExpanded, setIsExpanded] = useState(expanded);
     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(IDSHeaderIneraAdminAvatarMobileBase, { ...props, client: true, username: username, unit: unit, expanded: isExpanded, componentRef: componentRef, onToggleMenu: username ? toggleAvatar : undefined, unresponsive: headerContext?.unresponsive ?? false, children: children }));
+    });
+    useEsc(() => setIsExpanded(false), buttonRef, isExpanded && !persistent);
+    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 }));
 }
 
 export { IDSHeaderIneraAdminAvatarMobile };

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

@@ -1,17 +1,26 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } 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';
 
 function IDSHeaderIneraAdminAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
     const headerContext = useHeaderContext();
     if (headerContext?.hideAvatar)
         return null;
-    useId();
     const [isExpanded, setIsExpanded] = useState(expanded);
     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) => {
@@ -32,20 +41,7 @@ function IDSHeaderIneraAdminAvatar({ 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(IDSHeaderIneraAdminAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, expanded: isExpanded, onToggleAvatar: toggleAvatar, unresponsive: headerContext?.unresponsive ?? false }));
+    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 }));
 }
 
 export { IDSHeaderIneraAdminAvatar };

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

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

package/components/header-inera-admin/header-inera-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 IDSHeaderIneraAdminMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, children, componentRef, onToggleMenu, client = false, ...props }) {
+function IDSHeaderIneraAdminMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, children, componentRef, buttonRef, onToggleMenu, client = false, ...props }) {
     const menuId = `header-inera-admin-menu-${useId()}`;
     const toggleHandler = client && onToggleMenu
         ? {
@@ -12,7 +12,7 @@ function IDSHeaderIneraAdminMenuMobileBase({ srLabel = "Meny", expanded = false,
     return (jsxs("div", { ref: componentRef, className: clsx("ids-header-inera-admin-menu-mobile", {
             "ids-header-inera-admin-menu-mobile--expanded": expanded,
             "ids-header-inera-admin-menu-mobile--unresponsive": unresponsive
-        }), ...props, children: [jsx("button", { "aria-label": srLabel, "aria-expanded": expanded, "aria-controls": menuId, ...toggleHandler, className: "ids-header-inera-admin-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) }), jsx("div", { id: menuId, className: "ids-header-inera-admin-menu-mobile__items", children: children })] }));
+        }), ...props, children: [jsx("button", { ref: buttonRef, "aria-label": srLabel, "aria-expanded": expanded, "aria-controls": menuId, ...toggleHandler, className: "ids-header-inera-admin-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) }), jsx("div", { id: menuId, className: "ids-header-inera-admin-menu-mobile__items", children: children })] }));
 }
 
 export { IDSHeaderIneraAdminMenuMobileBase };

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

@@ -3,11 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSHeaderIneraAdminMenuMobileBase } from './header-inera-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 IDSHeaderIneraAdminMenuMobile({ srLabel = "Meny", expanded = false, persistent = false, children, onExpanded, onClosed, ...props }) {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     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 IDSHeaderIneraAdminMenuMobile({ srLabel = "Meny", expanded = false, per
         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(IDSHeaderIneraAdminMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef }));
+    return (jsx(IDSHeaderIneraAdminMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef }));
 }
 
 export { IDSHeaderIneraAdminMenuMobile };

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

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

package/components/header-inera-admin/header-inera-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 IDSHeaderIneraAdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, client = false, ...props }) {
+function IDSHeaderIneraAdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client = false, ...props }) {
     const itemId = `header-inera-admin-item-${useId()}`;
     const toggleHandler = client && onToggleItem
         ? {
@@ -13,7 +13,7 @@ function IDSHeaderIneraAdminNavItemBase({ label, active, expanded, children, col
             "ids-header-inera-admin-nav-item--unresponsive": unresponsive,
             "ids-header-inera-admin-nav-item--expanded": expanded,
             "ids-header-inera-admin-nav-item--active": active
-        }), ...props, children: [!!label && (jsx("button", { "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-admin-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-inera-admin-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-inera-admin-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-inera-admin-nav-item__link", children: React.Children.map(children, child => {
                     if (!React.isValidElement(child))
                         return child;
                     const element = child;

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

@@ -3,12 +3,19 @@ import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
 import { IDSHeaderIneraAdminNavItemBase } from './header-inera-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 IDSHeaderIneraAdminNavItem({ 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 IDSHeaderIneraAdminNavItem({ 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(IDSHeaderIneraAdminNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
+    return (jsx(IDSHeaderIneraAdminNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
 
 export { IDSHeaderIneraAdminNavItem };

package/components/popover/popover-content.js

@@ -13,7 +13,7 @@ const IDSPopoverContent = forwardRef(({ position = "bottom", srCloseText = "Stä
     const renderCaret = (pos) => (jsxs("div", { className: `ids-popover-content__caret ids-popover-content__caret--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content__caret--${pos}` })] }));
     return (jsxs("div", { ref: contentRef, className: clsx("ids-popover-content", `ids-popover-content--${position}`, {
             "ids-focus-trap": !noFocusTrap
-        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", ...closeHandler }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
+        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", ...closeHandler }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [!!headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
 });
 IDSPopoverContent.displayName = "IDSPopoverContent";
 

package/components/popover/popover.js

@@ -94,7 +94,7 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
             }
         }
     }, [isExpanded, autoFocus]);
-    return (jsx("span", { "data-popover-category": category, ref: popoverRef, children: jsx(IDSPopoverBase, { ...props, client: true, expanded: isExpanded, triggerRef: triggerRef, togglePopover: togglePopover, handleKeyPress: handleKeyPress, trigger: trigger, className: className, children: jsx(IDSPopoverContent, { client: true, contentRef: contentRef, scrollAreaRef: scrollAreaRef, noScrollAreaFocus: noScrollAreaFocus, position: position, srCloseText: srCloseText, closePopover: closePopover, contentScrollAreaStyle: contentScrollAreaStyle, noFocusTrap: noFocusTrap, children: children }) }) }));
+    return (jsx("span", { "data-popover-category": category, ref: popoverRef, children: jsx(IDSPopoverBase, { ...props, client: true, expanded: isExpanded, triggerRef: triggerRef, togglePopover: togglePopover, handleKeyPress: handleKeyPress, trigger: trigger, className: className, children: jsx(IDSPopoverContent, { client: true, headline: headline, contentRef: contentRef, scrollAreaRef: scrollAreaRef, noScrollAreaFocus: noScrollAreaFocus, position: position, srCloseText: srCloseText, closePopover: closePopover, contentScrollAreaStyle: contentScrollAreaStyle, noFocusTrap: noFocusTrap, children: children }) }) }));
 }
 
 export { IDSPopover };

package/components/puff-list/puff-list-item-header.js

@@ -5,7 +5,7 @@ function IDSPuffListItemHeader({ headlineLevel = 2, headlineExtra, noMargin = fa
     const Tag = `h${headlineLevel}`;
     return (jsxs(Tag, { ...props, className: clsx("ids-puff-list-item-header__headline", {
             "ids-puff-list-item-header__headline--no-margin": noMargin
-        }), children: [children, headlineExtra && jsx("span", { className: "ids-puff-list-item-header__extra-content", children: headlineExtra })] }));
+        }), children: [jsx("span", { className: "ids-puff-list-item-header__headline-content", children: children }), headlineExtra && jsx("span", { className: "ids-puff-list-item-header__extra-content", children: headlineExtra })] }));
 }
 IDSPuffListItemHeader.displayName = "IDSPuffListItemHeader";
 

package/components/puff-list/puff-list-item.js

@@ -18,7 +18,7 @@ function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, le
     return (jsxs("div", { ...props, className: clsx("ids-puff-list-item", {
             "ids-puff-list-item--interactive": !!itemLink,
             "ids-puff-list-item--lean": !!lean
-        }, className), children: [jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), renderBody()] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] }), jsx("div", { className: "ids-puff-list-item-separator" })] }));
+        }, className), children: [jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content-wrapper", children: [jsxs("div", { className: "ids-puff-list-item__content", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), renderBody()] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] })] }), jsx("div", { className: "ids-puff-list-item-separator" })] }));
 }
 IDSPuffListItem.displayName = "IDSPuffListItem";
 

package/components/side-panel/side-panel-base.js

@@ -1,11 +1,15 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/side-panel/side-panel.css';
 
 const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated = false, menu = false, footer = false, noScrollAreaFocus = false, footerDarkmodeToggle, size = "m", srLabel = "Sidopanel", onTogglePanel, onClosePanel, srClose, srOpen, client, headline, footerLinks, footerText, hamburgerRef, className, children, ...props }, ref) => {
+    const [ready, setReady] = React.useState(false);
+    React.useEffect(() => {
+        setReady(true);
+    }, []);
     const classNames = clsx("ids-side-panel", "ids-focus-trap--tablet", size && !menu && `ids-side-panel--${size}`, menu ? "ids-side-panel--menu" : "ids-side-panel--regular", {
-        "ids-side-panel--show": visible,
+        "ids-side-panel--show": visible && ready,
         "ids-side-panel--elevated": elevated,
         "ids-side-panel--left": !menu && left
     }, className);

package/components/side-panel/side-panel.js

@@ -2,34 +2,32 @@
 import { jsx } from 'react/jsx-runtime';
 import { useRef, useState, useEffect } from 'react';
 import { IDSSidePanelBase } from './side-panel-base.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
 
-function IDSSidePanel({ show = false, menu = false, noScrollAreaFocus = false, srLabel = "Sidopanel", onVisibilityChange, srClose = "Stäng", srOpen = "Öppna", onOpen, onClose, className, children, ...props }) {
+function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel = "Sidopanel", onVisibilityChange, srClose = "Stäng", srOpen = "Öppna", onOpen, onClose, className, children, ...props }) {
     const internalRef = useRef(null);
     const hamburgerRef = useRef(null);
-    const [internalShow, setInternalShow] = useState(show);
-    useEffect(() => {
-        if (show !== internalShow) {
-            setInternalShow(show);
-            onVisibilityChange?.(show);
+    const isControlled = show !== undefined;
+    const [internalShow, setInternalShow] = useState(false);
+    const visible = isControlled ? show : internalShow;
+    useEsc(() => setVisible(false), hamburgerRef, internalShow);
+    const setVisible = (value) => {
+        if (!isControlled) {
+            setInternalShow(value);
         }
-    }, [show]);
-    // Escape key
-    useEffect(() => {
-        const handleKeyDown = (e) => {
-            if (e.key === "Escape" && internalShow) {
-                setInternalShow(false);
-                onVisibilityChange?.(false);
-            }
-        };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [internalShow]);
+        onVisibilityChange?.(value);
+    };
+    // Open / close side effects
     useEffect(() => {
-        if (internalShow) {
+        if (visible) {
             onOpen?.();
             const heading = internalRef.current?.querySelector("h1, h2, h3, h4, h5, h6");
-            heading?.setAttribute("tabindex", "-1");
-            heading?.focus();
+            if (heading) {
+                heading.setAttribute("tabindex", "-1");
+                setTimeout(() => {
+                    heading.focus();
+                }, 50);
+            }
         }
         else {
             if (menu && hamburgerRef.current) {
@@ -37,36 +35,47 @@ function IDSSidePanel({ show = false, menu = false, noScrollAreaFocus = false, s
             }
             onClose?.();
         }
-    }, [internalShow]);
+    }, [visible, menu, onOpen, onClose]);
     // Window resize ARIA attributes
     useEffect(() => {
         const handleResize = () => {
             const panel = internalRef.current;
-            if (panel) {
-                if (window.innerWidth <= 1024) {
-                    panel.setAttribute("role", "dialog");
-                    panel.setAttribute("aria-modal", "true");
-                    panel.setAttribute("aria-label", srLabel);
-                }
-                else {
-                    panel.removeAttribute("role");
-                    panel.removeAttribute("aria-modal");
-                    panel.removeAttribute("aria-label");
-                }
+            if (!panel)
+                return;
+            if (window.innerWidth <= 1024) {
+                panel.setAttribute("role", "dialog");
+                panel.setAttribute("aria-modal", "true");
+                panel.setAttribute("aria-label", srLabel);
+            }
+            else {
+                panel.removeAttribute("role");
+                panel.removeAttribute("aria-modal");
+                panel.removeAttribute("aria-label");
             }
         };
         handleResize();
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, [srLabel]);
-    const onClosePanel = () => {
-        setInternalShow(false);
-        onVisibilityChange?.(false);
-    };
-    const onTogglePanel = () => {
-        setInternalShow(prev => !prev);
-    };
-    return (jsx(IDSSidePanelBase, { ...props, ref: internalRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noScrollAreaFocus: noScrollAreaFocus, visible: internalShow, onClosePanel: onClosePanel, onTogglePanel: onTogglePanel, hamburgerRef: hamburgerRef, children: children }));
+    const onClosePanel = () => setVisible(false);
+    const onTogglePanel = () => setVisible(!visible);
+    useEffect(() => {
+        const handleBodyScroll = () => {
+            if (visible && window.innerWidth <= 1024) {
+                document.body.style.overflow = "hidden";
+            }
+            else {
+                document.body.style.overflow = "";
+            }
+        };
+        handleBodyScroll();
+        window.addEventListener("resize", handleBodyScroll);
+        return () => {
+            window.removeEventListener("resize", handleBodyScroll);
+            document.body.style.overflow = ""; // cleanup on unmount
+        };
+    }, [visible]);
+    return (jsx(IDSSidePanelBase, { ...props, ref: internalRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noScrollAreaFocus: noScrollAreaFocus, visible: visible, onClosePanel: onClosePanel, onTogglePanel: onTogglePanel, hamburgerRef: hamburgerRef, children: children }));
 }
 
 export { IDSSidePanel };

package/components/stepper/step-base.js

@@ -25,7 +25,7 @@ const IDSStepBase = forwardRef(({ state = "", headline, label = "", stepNumber =
         : {};
     return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("div", { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
-                }), "aria-expanded": expanded, ...toggleHandlers, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [label && jsx("div", { className: "ids-step__label", children: label }), headline && jsx("div", { className: "ids-step__headline", children: headline })] }), jsx("div", { className: clsx("ids-step__chevron", {
+                }), "aria-expanded": expanded, ...toggleHandlers, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [headline && jsx("div", { className: "ids-step__headline", children: headline }), label && jsx("div", { className: "ids-step__label", children: label })] }), jsx("div", { className: clsx("ids-step__chevron", {
                                         "ids-step__chevron--expanded": expanded
                                     }) })] })] }) }), jsx("div", { className: clsx("ids-step__content", {
                     "ids-step__content--expanded": expanded