@inera/ids-react 8.1.0 → 9.0.0

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

@@ -1,46 +1,56 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/header-inera/header-inera-nav-item.css';
-import clsx from 'clsx';
+import { IDSHeaderIneraNavItemBase } from './header-inera-nav-item-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeaderIneraNavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4, ...props }) => {
+function IDSHeaderIneraNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const containerRef = useRef(null);
-    const contentId = useElementId();
-    const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-            setIsExpanded(false);
-        }
-    };
+    const componentRef = useRef(null);
+    const menuRef = useRef(null);
     useEffect(() => {
         setIsExpanded(expanded);
-        document.addEventListener("click", handleClickOutside);
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
     }, [expanded]);
-    const renderNavItem = () => {
-        if (label) {
-            return (jsxs("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: "ids-header-inera-nav-item__button", onClick: () => setIsExpanded(prev => !prev), children: [label, " ", notification] }));
-        }
-        else {
-            return (jsxs("span", { className: "ids-header-inera-nav-item__link", children: [children, " ", notification] }));
-        }
-    };
-    const renderContent = () => {
+    // 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]);
+    // Escape should also close
+    useEffect(() => {
         if (!isExpanded)
-            return null;
-        return (jsx("div", { id: contentId, className: "ids-header-inera-nav-item__menu ids-header-inera-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-inera-nav-item__menu-content", children: [jsx("div", { className: "ids-header-inera-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-4", children: col4 })] }) }));
-    };
-    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-nav-item", {
-            "ids-header-inera-nav-item--unresponsive": headerContext?.unresponsive,
-            "ids-header-inera-nav-item--expanded": isExpanded,
-            "ids-header-inera-nav-item--active": active
-        }), ...props, children: [renderNavItem(), renderContent()] }));
-};
+            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) }));
+}
 
 export { IDSHeaderIneraNavItem };

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

@@ -1,7 +1,5 @@
-import React from "react";
-import "@inera/ids-design/components/header-inera/header-inera-nav.css";
-export interface IDSHeaderIneraNavProps {
-    srText?: string;
-    children?: React.ReactNode;
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraNavProps extends HTMLAttributes<HTMLElement> {
 }
-export declare function IDSHeaderIneraNav({ srText, children, ...props }: IDSHeaderIneraNavProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraNav({ children, ...props }: IDSHeaderIneraNavProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -1,14 +1,11 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { IDSHeaderIneraNavBase } from './header-inera-nav-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import '@inera/ids-design/components/header-inera/header-inera-nav.css';
 
-function IDSHeaderIneraNav({ srText = "Huvudmeny", children, ...props }) {
+function IDSHeaderIneraNav({ children, ...props }) {
     const headerContext = useHeaderContext() || { unresponsive: false };
-    const className = clsx("ids-header-inera-nav", {
-        "ids-header-inera-nav--unresponsive": headerContext.unresponsive
-    });
-    return (jsx("nav", { className: className, "aria-label": srText, ...props, children: jsx("div", { className: "ids-header-inera-nav__nav-items", children: children }) }));
+    return (jsx(IDSHeaderIneraNavBase, { ...props, unresponsive: headerContext.unresponsive, children: children }));
 }
 
 export { IDSHeaderIneraNav };

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

@@ -1,5 +1,4 @@
 import React, { ReactNode, AnchorHTMLAttributes } from "react";
-import "@inera/ids-design/components/header-inera/header-inera.css";
 interface IDSHeaderIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     logoHref?: string;
     logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
@@ -9,7 +8,6 @@ interface IDSHeaderIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     mobileMenu?: ReactNode;
     skipToContent?: ReactNode;
     logo?: ReactNode;
-    children?: ReactNode;
 }
-export declare function IDSHeaderInera({ logoHref, logoProps, srLogoText, unresponsive, items, mobileMenu, skipToContent, logo, className, children, ...props }: IDSHeaderIneraProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderInera({ unresponsive, children, ...props }: IDSHeaderIneraProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
-import '@inera/ids-design/components/header-inera/header-inera.css';
+import { IDSHeaderIneraBase } from './header-inera-base.js';
 
-function IDSHeaderInera({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, logo, className, children, ...props }) {
-    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true }, children: jsxs("header", { className: clsx("ids-header-inera", {
-                "ids-header-inera--unresponsive": unresponsive
-            }, className), ...props, children: [skipToContent && jsx("div", { className: "ids-header-inera__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera__inner", children: [jsxs("div", { className: "ids-header-inera__main", children: [logoHref ? (jsx("a", { href: logoHref, "aria-label": srLogoText, className: "ids-header-inera__logo", ...logoProps })) : logo ? (jsx("div", { className: "ids-header-inera__logo-custom", children: logo })) : (jsx("div", { className: "ids-header-inera__logo" })), jsxs("div", { className: "ids-header-inera__items", children: [items, " ", mobileMenu] })] }), children] })] }) }));
+function IDSHeaderInera({ unresponsive = false, children, ...props }) {
+    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true, hideAvatar: true }, children: jsx(IDSHeaderIneraBase, { ...props, unresponsive: unresponsive, children: children }) }));
 }
 
 export { IDSHeaderInera };

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from "react";
+export interface IDSHeaderIneraAdminAvatarBaseProps extends HTMLAttributes<HTMLElement> {
+    username: string;
+    unit?: string;
+    expanded?: boolean;
+    hide?: boolean;
+    persistent?: boolean;
+    onToggleAvatar?: () => void;
+    componentRef?: React.RefObject<HTMLDivElement>;
+    menuRef?: React.RefObject<HTMLDivElement>;
+    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;

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

@@ -0,0 +1,23 @@
+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 }) {
+    if (hide)
+        return null;
+    const menuId = `header-inera-admin-menu-${useId()}`;
+    const toggleHandler = client && onToggleAvatar
+        ? {
+            onClick: onToggleAvatar
+        }
+        : {};
+    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", {
+                        "ids-header-inera-admin-avatar__button--expanded": expanded
+                    }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-inera-admin-avatar__name", title: username, children: username }), unit && (jsx("div", { className: "ids-header-inera-admin-avatar__unit", title: unit, children: unit }))] }), jsx("div", { ref: menuRef || undefined, id: menuId, className: clsx("ids-header-inera-admin-avatar__menu", {
+                        "ids-header-inera-admin-avatar__menu--expanded": expanded
+                    }), children: children && jsx("div", { className: "ids-header-inera-admin-avatar__menu-links", children: children }) })] }) }));
+}
+
+export { IDSHeaderIneraAdminAvatarBase };

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

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

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

@@ -0,0 +1,23 @@
+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 }) {
+    if (hide)
+        return null;
+    const menuId = `header-inera-admin-menu-${useId()}`;
+    const toggleHandler = client && onToggleMenu
+        ? {
+            onClick: onToggleMenu
+        }
+        : {};
+    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", {
+                        "ids-header-inera-admin-avatar-mobile__button--expanded": expanded
+                    }), "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-inera-admin-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: menuId, className: clsx("ids-header-inera-admin-avatar-mobile__menu", {
+                        "ids-header-inera-admin-avatar-mobile__menu--expanded": expanded
+                    }), children: [unit && jsx("div", { className: "ids-header-inera-admin-avatar-mobile__unit", children: unit }), jsx("div", { className: "ids-header-inera-admin-avatar-mobile__menu-links", children: children })] })] }) }));
+}
+
+export { IDSHeaderIneraAdminAvatarMobileBase };

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

@@ -1,12 +1,9 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar-mobile.css";
-interface IDSHeaderIneraAdminAvatarMobileProps {
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraAdminAvatarMobileProps extends HTMLAttributes<HTMLDivElement> {
     username?: string;
     unit?: string;
     expanded?: boolean;
-    loginLink?: ReactNode;
     persistent?: boolean;
-    children?: ReactNode;
 }
-export declare const IDSHeaderIneraAdminAvatarMobile: React.FC<IDSHeaderIneraAdminAvatarMobileProps>;
+export declare function IDSHeaderIneraAdminAvatarMobile({ username, unit, expanded, persistent, children, ...props }: IDSHeaderIneraAdminAvatarMobileProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,34 +1,39 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar-mobile.css';
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { IDSHeaderIneraAdminAvatarMobileBase } from './header-inera-admin-avatar-mobile-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import clsx from 'clsx';
 
-const IDSHeaderIneraAdminAvatarMobile = ({ username = "", unit = "", expanded = false, loginLink, persistent = false, children, ...props }) => {
-    const dropdownId = useId();
-    const [isExpanded, setIsExpanded] = useState(expanded);
+function IDSHeaderIneraAdminAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
     const headerContext = useHeaderContext();
-    const containerRef = useRef(null);
-    const toggleExpanded = () => setIsExpanded(prev => !prev);
+    if (headerContext?.hideAvatar)
+        return null;
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const componentRef = useRef(null);
+    const toggleAvatar = () => setIsExpanded(prev => !prev);
     const handleClickOutside = (event) => {
-        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+        if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
             setIsExpanded(false);
         }
     };
     useEffect(() => {
         document.addEventListener("click", handleClickOutside);
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
+        return () => document.removeEventListener("click", handleClickOutside);
     }, [persistent]);
-    return (jsxs("div", { className: clsx("ids-header-inera-admin-avatar-mobile", {
-            "ids-header-inera-admin-avatar-mobile--unresponsive": headerContext?.unresponsive
-        }), ref: containerRef, ...props, children: [!username && loginLink && jsx("span", { className: "ids-header-inera-admin-avatar-mobile__login-link", children: loginLink }), username && (jsxs("div", { className: "ids-header-inera-admin-avatar-mobile__menu-wrapper", children: [jsx("button", { className: clsx("ids-header-inera-admin-avatar-mobile__button", {
-                            "ids-header-inera-admin-avatar-mobile__button--expanded": isExpanded
-                        }), onClick: toggleExpanded, "aria-controls": dropdownId, "aria-expanded": isExpanded, children: jsx("div", { className: "ids-header-inera-admin-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: dropdownId, className: clsx("ids-header-inera-admin-avatar-mobile__menu", {
-                            "ids-header-inera-admin-avatar-mobile__menu--expanded": isExpanded
-                        }), children: [unit && jsx("div", { className: "ids-header-inera-admin-avatar-mobile__unit", children: unit }), jsx("div", { className: "ids-header-inera-admin-avatar-mobile__menu-links", children: children })] })] }))] }));
-};
+    // 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 }));
+}
 
 export { IDSHeaderIneraAdminAvatarMobile };

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

@@ -1,11 +1,9 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar.css";
-interface IDSHeaderIneraAdminAvatarProps {
-    username: string;
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraAdminAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    username?: string;
     unit?: string;
     expanded?: boolean;
-    children?: ReactNode;
     persistent?: boolean;
 }
-export declare const IDSHeaderIneraAdminAvatar: React.FC<IDSHeaderIneraAdminAvatarProps>;
+export declare function IDSHeaderIneraAdminAvatar({ username, unit, expanded, children, persistent, ...props }: IDSHeaderIneraAdminAvatarProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,47 +1,51 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useId, useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar.css';
-import clsx from 'clsx';
+import { IDSHeaderIneraAdminAvatarBase } from './header-inera-admin-avatar-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdminAvatar = ({ username, unit, expanded = false, children, persistent = false, ...props }) => {
-    const dropdownId = useId();
-    const [isExpanded, setIsExpanded] = useState(expanded);
+function IDSHeaderIneraAdminAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
     const headerContext = useHeaderContext();
-    const containerRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const toggleExpanded = () => setIsExpanded(prev => !prev);
-    const handleClickOutside = (event) => {
-        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
-            setIsExpanded(false);
-        }
-    };
+    if (headerContext?.hideAvatar)
+        return null;
+    useId();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const componentRef = useRef(null);
+    const menuRef = useRef(null);
+    const toggleAvatar = () => setIsExpanded(prev => !prev);
     useEffect(() => {
-        document.addEventListener("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
+        const clickOutsideHandler = (e) => {
+            if (!persistent && componentRef.current && !componentRef.current.contains(e.target)) {
+                setIsExpanded(false);
+            }
         };
+        document.addEventListener("mousedown", clickOutsideHandler);
+        return () => document.removeEventListener("mousedown", clickOutsideHandler);
     }, [persistent]);
-    const handleLinkClick = () => {
-        setIsExpanded(false);
-    };
+    // close when clicking links
     useEffect(() => {
         if (!persistent && isExpanded) {
-            const links = dropdownRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", handleLinkClick));
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", () => setIsExpanded(false)));
             return () => {
-                links.forEach(link => link.removeEventListener("click", handleLinkClick));
+                links.forEach(link => link.removeEventListener("click", () => setIsExpanded(false)));
             };
         }
     }, [isExpanded, persistent]);
-    return (jsx("div", { ref: containerRef, className: clsx("ids-header-inera-admin-avatar", {
-            "ids-header-inera-admin-avatar--unresponsive": headerContext?.unresponsive
-        }), ...props, children: jsxs("div", { className: "ids-header-inera-admin-avatar__menu-wrapper", children: [jsxs("button", { className: clsx("ids-header-inera-admin-avatar__button", {
-                        "ids-header-inera-admin-avatar__button--expanded": isExpanded
-                    }), onClick: toggleExpanded, "aria-controls": dropdownId, "aria-expanded": isExpanded, 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: dropdownRef, id: dropdownId, className: clsx("ids-header-inera-admin-avatar__menu", {
-                        "ids-header-inera-admin-avatar__menu--expanded": isExpanded
-                    }), children: children && jsx("div", { className: "ids-header-inera-admin-avatar__menu-links", children: children }) })] }) }));
-};
+    // 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 }));
+}
 
 export { IDSHeaderIneraAdminAvatar };

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera-admin/composite-header-inera-admin.css";
+export interface IDSHeaderIneraAdminBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    brandText?: string;
+    serviceName?: string;
+    srLogoText?: string;
+    unresponsive?: boolean;
+    showLogo?: boolean;
+    items?: ReactNode;
+    avatar?: ReactNode;
+    skipToContentLink?: ReactNode;
+    brandLink?: ReactNode;
+    mobileMenu?: ReactNode;
+}
+export declare function IDSHeaderIneraAdminBase({ brandText, unresponsive, showLogo, items, avatar, skipToContentLink, brandLink, srLogoText, serviceName, mobileMenu, className, children, ...props }: IDSHeaderIneraAdminBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-inera-admin/composite-header-inera-admin.css';
+
+function IDSHeaderIneraAdminBase({ brandText = "", unresponsive = false, showLogo = false, items, avatar, skipToContentLink, brandLink, srLogoText = "Logotyp inera", serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children, ...props }) {
+    const renderBrandText = () => {
+        if (brandLink && isValidElement(brandLink)) {
+            return (jsx("span", { className: "ids-header-inera-admin__brand-link", children: cloneElement(brandLink, {
+                    ...brandLink.props
+                }) }));
+        }
+        return null;
+    };
+    return (jsxs("header", { ...props, className: clsx("ids-header-inera-admin", {
+            "ids-header-inera-admin--unresponsive": unresponsive
+        }, className), children: [skipToContentLink && jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-inera-admin__inner", children: [jsxs("div", { className: "ids-header-inera-admin__main", children: [jsx("div", { className: "ids-header-inera-admin__service-wrapper", children: jsxs("div", { className: "ids-header-inera-admin__brand", children: [showLogo && jsx("div", { className: "ids-header-inera-admin__logo", role: "img", "aria-label": srLogoText }), jsxs("div", { className: "ids-header-inera-admin__brand-inner", children: [renderBrandText(), jsx("h1", { className: "ids-header-inera-admin__brand-text", children: brandText }), jsx("h2", { className: "ids-header-inera-admin__service-name", children: serviceName })] })] }) }), jsxs("div", { className: "ids-header-inera-admin__items", children: [items, " ", avatar, " ", mobileMenu && jsx("div", { className: "ids-header-inera-admin__mobile-menu", children: mobileMenu })] })] }), children] })] }));
+}
+
+export { IDSHeaderIneraAdminBase };

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from "react";
+export interface IDSHeaderIneraAdminItemBaseProps extends HTMLAttributes<HTMLElement> {
+    mobile?: boolean;
+    unresponsive?: boolean;
+    separatorLeft?: boolean;
+    icon?: string;
+}
+export declare function IDSHeaderIneraAdminItemBase({ mobile, unresponsive, separatorLeft, icon, children, ...props }: IDSHeaderIneraAdminItemBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSHeaderIneraAdminItemBase({ mobile = false, unresponsive = false, separatorLeft = false, icon = "", children, ...props }) {
+    const renderContent = () => (jsx("div", { className: "ids-header-inera-admin-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
+    return (jsxs("div", { className: clsx("ids-header-inera-admin-item", {
+            "ids-header-inera-admin-item--mobile": mobile,
+            "ids-header-inera-admin-item--unresponsive": unresponsive,
+            "ids-header-inera-admin-item--separator": separatorLeft,
+        }), ...props, children: [renderContent(), children] }));
+}
+
+export { IDSHeaderIneraAdminItemBase };

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

@@ -1,12 +1,7 @@
-import { ReactNode } from "react";
-import "@inera/ids-design/components/header-inera-admin/header-inera-admin-item.css";
-export interface IDSHeaderIneraAdminItemProps {
+import { HTMLAttributes } from "react";
+export interface IDSHeaderIneraAdminItemProps extends HTMLAttributes<HTMLElement> {
     mobile?: boolean;
     separatorLeft?: boolean;
     icon?: string;
-    text?: string;
-    href?: string;
-    link?: ReactNode;
-    onClick?: () => void;
 }
-export declare function IDSHeaderIneraAdminItem({ mobile, separatorLeft, icon, text, href, link, onClick, ...props }: IDSHeaderIneraAdminItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdminItem({ mobile, separatorLeft, icon, children, ...props }: IDSHeaderIneraAdminItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,31 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { isValidElement, cloneElement } from 'react';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IDSHeaderIneraAdminItemBase } from './header-inera-admin-item-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import '@inera/ids-design/components/header-inera-admin/header-inera-admin-item.css';
 
-function IDSHeaderIneraAdminItem({ mobile = false, separatorLeft = false, icon = "", text, href = "", link, onClick, ...props }) {
-    const headerContext = useHeaderContext();
-    const classNames = clsx("ids-header-inera-admin-item", {
-        "ids-header-inera-admin-item--mobile": mobile,
-        "ids-header-inera-admin-item--separator": separatorLeft,
-        "ids-header-inera-admin-item--unresponsive": headerContext?.unresponsive
-    });
-    const renderContent = () => (jsx("div", { className: "ids-header-inera-admin-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
-    if (link && isValidElement(link)) {
-        const linkProps = link.props;
-        const hasChildren = !!linkProps.children &&
-            (typeof linkProps.children === "string"
-                ? linkProps.children.trim().length > 0
-                : React.Children.count(linkProps.children) > 0);
-        const newLink = cloneElement(link, {
-            ...props,
-            className: clsx(link.props.className),
-            children: hasChildren ? linkProps.children : text
-        });
-        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
-    }
-    return onClick ? (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] })) : (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+function IDSHeaderIneraAdminItem({ mobile, separatorLeft, icon, children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
+    return (jsx(IDSHeaderIneraAdminItemBase, { ...props, mobile: mobile, icon: icon, separatorLeft: separatorLeft, unresponsive: headerContext.unresponsive, children: children }));
 }
 
 export { IDSHeaderIneraAdminItem };

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

@@ -0,0 +1,11 @@
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraAdminMenuMobileBaseProps extends HTMLAttributes<HTMLElement> {
+    srLabel?: string;
+    expanded?: boolean;
+    unresponsive?: boolean;
+    onToggleMenu?: () => void;
+    componentRef?: React.RefObject<HTMLDivElement>;
+    client?: boolean;
+}
+export declare function IDSHeaderIneraAdminMenuMobileBase({ srLabel, expanded, unresponsive, children, componentRef, onToggleMenu, client, ...props }: IDSHeaderIneraAdminMenuMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,18 @@
+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 }) {
+    const menuId = `header-inera-admin-menu-${useId()}`;
+    const toggleHandler = client && onToggleMenu
+        ? {
+            onClick: onToggleMenu
+        }
+        : {};
+    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 })] }));
+}
+
+export { IDSHeaderIneraAdminMenuMobileBase };

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

@@ -1,11 +1,10 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/header-inera-admin/header-inera-admin-menu-mobile.css";
-interface IDSHeaderIneraAdminMenuMobileProps {
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraAdminMenuMobileProps extends HTMLAttributes<HTMLElement> {
     srLabel?: string;
+    expanded?: boolean;
     persistent?: boolean;
-    children?: ReactNode;
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare const IDSHeaderIneraAdminMenuMobile: React.FC<IDSHeaderIneraAdminMenuMobileProps>;
+export declare function IDSHeaderIneraAdminMenuMobile({ srLabel, expanded, persistent, children, onExpanded, onClosed, ...props }: IDSHeaderIneraAdminMenuMobileProps): import("react/jsx-runtime").JSX.Element;
 export {};