@inera/ids-react 8.2.0 → 9.0.1

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

@@ -1,36 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState, useRef, isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-1177/header-1177-region-picker-mobile.css';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { IDSHeader1177RegionPickerMobileBase } from './header-1177-region-picker-mobile-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177RegionPickerMobile = ({ text = "Välj region", expanded: propExpanded = false, onToggleRegion, children, ...props }) => {
-    const [isExpanded, setIsExpanded] = useState(propExpanded);
-    const regionIconRef = useRef(null);
+function IDSHeader1177RegionPickerMobile({ expanded = false, onToggleRegion, children, ...props }) {
+    const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
-    const toggleRegion = () => {
-        const newExpanded = !isExpanded;
-        setIsExpanded(newExpanded);
-        onToggleRegion?.(newExpanded);
-    };
-    const hasChildren = React.Children.count(children) > 0;
-    const renderChild = (child) => {
-        if (isValidElement(child)) {
-            const existingClass = child.props.className;
-            return cloneElement(child, {
-                ref: regionIconRef,
-                size: "m",
-                colorPreset: 4,
-                className: clsx(existingClass)
-            });
-        }
+    if (headerContext?.hideRegionPicker)
         return null;
+    const toggle = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        onToggleRegion?.(next);
     };
-    return headerContext?.hideRegionPicker ? null : (jsx("div", { className: clsx("ids-header-1177-region-picker-mobile", {
-            "ids-header-1177-region-picker-mobile--selected-region": hasChildren
-        }), ...props, children: jsxs("button", { onClick: toggleRegion, className: clsx("ids-header-1177-region-picker-mobile__button", {
-                "ids-header-1177-region-picker-mobile__button--expanded": isExpanded
-            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-region-picker-mobile__region-icon", children: renderChild(children) }), jsxs("span", { className: "ids-header-1177-region-picker-mobile__button-text", children: [" ", text] })] }) }));
-};
+    return (jsx(IDSHeader1177RegionPickerMobileBase, { ...props, client: true, expanded: isExpanded, onToggle: toggle, children: children }));
+}
 
 export { IDSHeader1177RegionPickerMobile };

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

@@ -1,9 +1,6 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/header-1177/header-1177-region-picker.css";
-export interface IDSHeader1177RegionPickerProps {
-    text?: string;
+import { HTMLAttributes } from "react";
+export interface IDSHeader1177RegionPickerProps extends HTMLAttributes<HTMLElement> {
     expanded?: boolean;
     onToggleRegion?: (isExpanded: boolean) => void;
-    children?: ReactNode;
 }
-export declare const IDSHeader1177RegionPicker: React.FC<IDSHeader1177RegionPickerProps>;
+export declare function IDSHeader1177RegionPicker({ expanded, onToggleRegion, children, ...props }: IDSHeader1177RegionPickerProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,34 +1,20 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-1177/header-1177-region-picker.css';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { IDSHeader1177RegionPickerBase } from './header-1177-region-picker-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177RegionPicker = ({ text = "Välj region", expanded: propExpanded = false, onToggleRegion, children, ...props }) => {
-    const [isExpanded, setIsExpanded] = useState(propExpanded);
-    const regionIconRef = useRef(null);
-    const toggleRegion = () => {
-        const newExpanded = !isExpanded;
-        setIsExpanded(newExpanded);
-        onToggleRegion?.(newExpanded);
-    };
-    const hasChildren = React.Children.count(children) > 0;
-    const renderChild = (child) => {
-        if (isValidElement(child)) {
-            const existingClass = child.props.className;
-            return cloneElement(child, {
-                ref: regionIconRef,
-                size: "m",
-                colorPreset: 3,
-                className: clsx(existingClass)
-            });
-        }
+function IDSHeader1177RegionPicker({ expanded = false, onToggleRegion, children, ...props }) {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const headerContext = useHeaderContext();
+    if (headerContext?.hideRegionPicker)
         return null;
+    const toggle = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        onToggleRegion?.(next);
     };
-    return (jsxs("div", { className: clsx("ids-header-1177-region-picker", {
-            "ids-header-1177-region-picker--selected-region": hasChildren
-        }), ...props, children: [jsx("div", { className: "ids-header-1177-region-picker__region-icon", children: renderChild(children) }), jsx("div", { className: "ids-header-1177-region-picker__selector", children: jsx("button", { onClick: toggleRegion, className: clsx("ids-header-1177-region-picker__button", {
-                        "ids-header-1177-region-picker__button--expanded": isExpanded
-                    }), "aria-label": text, children: text }) })] }));
-};
+    return (jsx(IDSHeader1177RegionPickerBase, { ...props, client: true, expanded: isExpanded, onToggle: toggle, children: children }));
+}
 
 export { IDSHeader1177RegionPicker };

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

@@ -1,18 +1,18 @@
 import React, { ReactNode, AnchorHTMLAttributes } from "react";
-import "@inera/ids-design/components/header-1177/header-1177.css";
 interface IDSHeader1177Props extends React.HTMLAttributes<HTMLDivElement> {
     hideRegionPicker?: boolean;
     unresponsive?: boolean;
+    hideAvatar?: boolean;
     logoHref?: string;
     logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
     logo?: ReactNode;
     srLogoText?: string;
     regionPicker?: ReactNode;
     skipToContentLink?: ReactNode;
-    onToggleRegion?: (isExpanded: boolean) => void;
     items?: ReactNode;
     avatar?: ReactNode;
+    mobileMenu?: ReactNode;
     children?: ReactNode;
 }
-export declare function IDSHeader1177({ srLogoText, hideRegionPicker, unresponsive, logoHref, logoProps, logo, regionPicker, skipToContentLink, items, avatar, className, children, ...props }: IDSHeader1177Props): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177({ hideRegionPicker, unresponsive, hideAvatar, children, ...props }: IDSHeader1177Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,15 +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-1177/header-1177.css';
+import { IDSHeader1177Base } from './header-1177-base.js';
 
-function IDSHeader1177({ srLogoText = "Logotyp", hideRegionPicker = false, unresponsive = false, logoHref = "", logoProps = {}, logo, regionPicker, skipToContentLink, items, avatar, className, children, ...props }) {
-    const renderLogo = () => {
-        return (jsx("div", { className: "ids-header-1177__logo-wrapper", children: jsx("div", { className: "ids-header-1177__logo", children: logo ? (jsx("span", { className: "ids-header-1177__link", children: logo })) : (jsx("a", { className: "ids-header-1177__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }) }));
-    };
-    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker }, children: jsxs("header", { className: clsx("ids-header-1177", {
-                "ids-header-1177--unresponsive": unresponsive
-            }, className), ...props, children: [skipToContentLink && jsx("div", { className: "ids-header-1177__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177__container", children: [jsx("div", { className: "ids-header-1177__left" }), jsxs("div", { className: "ids-header-1177__inner", children: [jsxs("div", { className: "ids-header-1177__inner-left", children: [renderLogo(), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177__region-picker", children: regionPicker })] }), jsxs("div", { className: "ids-header-1177__inner-right", children: [items, " ", avatar] })] }), jsx("div", { className: "ids-header-1177__right" })] }), children] }) }));
+function IDSHeader1177({ hideRegionPicker = false, unresponsive = false, hideAvatar = false, children, ...props }) {
+    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker, hideAvatar }, children: jsx(IDSHeader1177Base, { ...props, unresponsive: unresponsive, hideRegionPicker: hideRegionPicker, children: children }) }));
 }
 
 export { IDSHeader1177 };

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

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

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

@@ -0,0 +1,23 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSHeader1177AdminAvatarBase({ username, unit, expanded = false, unresponsive = false, hide = false, componentRef, menuRef, children, onToggleAvatar, client = false, ...props }) {
+    if (hide)
+        return null;
+    const menuId = `header-1177-admin-avatar-menu-${useId()}`;
+    const toggleHandler = client && onToggleAvatar
+        ? {
+            onClick: onToggleAvatar
+        }
+        : {};
+    return (jsx("div", { ref: componentRef, className: clsx("ids-header-1177-admin-avatar", {
+            "ids-header-1177-admin-avatar--unresponsive": unresponsive
+        }), ...props, children: jsxs("div", { className: "ids-header-1177-admin-avatar__menu-wrapper", children: [jsxs("button", { className: clsx("ids-header-1177-admin-avatar__button", {
+                        "ids-header-1177-admin-avatar__button--expanded": expanded
+                    }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: [jsx("div", { className: "ids-header-1177-admin-avatar__name", title: username, children: username }), unit && (jsxs(Fragment, { children: [jsx("span", { className: "ids-header-1177-admin-avatar__unit-separator", children: "|" }), jsx("span", { className: "ids-header-1177-admin-avatar__unit", title: unit, children: unit })] }))] }), jsx("div", { ref: menuRef, id: menuId, className: clsx("ids-header-1177-admin-avatar__menu", {
+                        "ids-header-1177-admin-avatar__menu--expanded": expanded
+                    }), children: children && jsx("div", { className: "ids-header-1177-admin-avatar__menu-links", children: children }) })] }) }));
+}
+
+export { IDSHeader1177AdminAvatarBase };

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

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

package/components/header-1177-admin/header-1177-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 IDSHeader1177AdminAvatarMobileBase({ username, unit, children, unresponsive, expanded = false, hide = false, client = false, onToggleAvatar, componentRef, ...props }) {
+    if (hide)
+        return null;
+    const menuId = `header-1177-admin-avatar-mobile-menu-${useId()}`;
+    const toggleHandler = client && onToggleAvatar
+        ? {
+            onClick: onToggleAvatar
+        }
+        : {};
+    return (jsx("div", { className: clsx("ids-header-1177-admin-avatar-mobile", {
+            "ids-header-1177-admin-avatar-mobile--unresponsive": unresponsive
+        }), ref: componentRef, ...props, children: jsxs("div", { className: "ids-header-1177-admin-avatar-mobile__menu-wrapper", children: [jsx("button", { className: clsx("ids-header-1177-admin-avatar-mobile__button", {
+                        "ids-header-1177-admin-avatar-mobile__button--expanded": expanded
+                    }), ...toggleHandler, "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-1177-admin-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: menuId, className: clsx("ids-header-1177-admin-avatar-mobile__menu", {
+                        "ids-header-1177-admin-avatar-mobile__menu--expanded": expanded
+                    }), children: [unit && jsx("div", { className: "ids-header-1177-admin-avatar-mobile__unit", children: unit }), jsx("div", { className: "ids-header-1177-admin-avatar-mobile__menu-links", children: children })] })] }) }));
+}
+
+export { IDSHeader1177AdminAvatarMobileBase };

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

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

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

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

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

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

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

@@ -1,47 +1,48 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { useId, useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/header-1177-admin/header-1177-admin-avatar.css';
-import clsx from 'clsx';
+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';
 
-const IDSHeader1177AdminAvatar = ({ username, unit, expanded = false, children, persistent = false, ...props }) => {
-    const dropdownId = useId();
+function IDSHeader1177AdminAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
-    const containerRef = useRef(null);
-    const dropdownRef = useRef(null);
-    const toggleExpanded = () => setIsExpanded(prev => !prev);
+    const componentRef = useRef(null);
+    const menuRef = 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("mousedown", handleClickOutside);
-        return () => {
-            document.removeEventListener("mousedown", handleClickOutside);
-        };
+        return () => document.removeEventListener("mousedown", handleClickOutside);
     }, [persistent]);
-    const handleLinkClick = () => {
-        setIsExpanded(false);
-    };
+    const handleLinkClick = () => setIsExpanded(false);
     useEffect(() => {
         if (!persistent && isExpanded) {
-            const links = dropdownRef.current?.querySelectorAll("a") || [];
+            const links = menuRef.current?.querySelectorAll("a") || [];
             links.forEach(link => link.addEventListener("click", handleLinkClick));
             return () => {
                 links.forEach(link => link.removeEventListener("click", handleLinkClick));
             };
         }
     }, [isExpanded, persistent]);
-    return (jsx("div", { ref: containerRef, className: clsx("ids-header-1177-admin-avatar", {
-            "ids-header-1177-admin-avatar--unresponsive": headerContext?.unresponsive
-        }), ...props, children: jsxs("div", { className: "ids-header-1177-admin-avatar__menu-wrapper", children: [jsxs("button", { className: clsx("ids-header-1177-admin-avatar__button", {
-                        "ids-header-1177-admin-avatar__button--expanded": isExpanded
-                    }), onClick: toggleExpanded, "aria-controls": dropdownId, "aria-expanded": isExpanded, children: [jsx("div", { className: "ids-header-1177-admin-avatar__name", title: username, children: username }), unit && (jsxs(Fragment, { children: [jsx("span", { className: "ids-header-1177-admin-avatar__unit-separator", children: "|" }), jsx("span", { className: "ids-header-1177-admin-avatar__unit", title: unit, children: unit })] }))] }), jsx("div", { ref: dropdownRef, id: dropdownId, className: clsx("ids-header-1177-admin-avatar__menu", {
-                        "ids-header-1177-admin-avatar__menu--expanded": isExpanded
-                    }), children: children && jsx("div", { className: "ids-header-1177-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(IDSHeader1177AdminAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, expanded: isExpanded, unresponsive: headerContext?.unresponsive, hide: headerContext?.hideAvatar, onToggleAvatar: toggleAvatar }));
+}
 
 export { IDSHeader1177AdminAvatar };

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

@@ -0,0 +1,18 @@
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
+import "@inera/ids-design/components/header-1177-admin/composite-header-1177-admin.css";
+interface IDSHeader1177AdminBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    unresponsive?: boolean;
+    srLogoText?: string;
+    brandTextTop?: string;
+    brandText?: string;
+    brandTextBottom?: string;
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    logo?: ReactNode;
+    avatar?: ReactNode;
+    mobileMenu?: ReactNode;
+    items?: ReactNode;
+    skipToContentLink?: ReactNode;
+}
+export declare function IDSHeader1177AdminBase({ unresponsive, srLogoText, brandTextTop, brandText, brandTextBottom, logoHref, logoProps, logo, avatar, mobileMenu, items, skipToContentLink, className, children, ...props }: IDSHeader1177AdminBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,14 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-1177-admin/composite-header-1177-admin.css';
+
+function IDSHeader1177AdminBase({ unresponsive = false, srLogoText = "Logotyp", brandTextTop = "", brandText = "", brandTextBottom = "", logoHref = "", logoProps = {}, logo, avatar, mobileMenu, items, skipToContentLink, className, children, ...props }) {
+    const renderLogo = () => {
+        return logo ? (logo) : (jsx("a", { className: "ids-header-1177-admin__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps }));
+    };
+    return (jsxs("header", { ...props, className: clsx("ids-header-1177-admin", {
+            "ids-header-1177-admin--unresponsive": unresponsive
+        }, className), style: { position: "relative", zIndex: 3 }, children: [skipToContentLink && jsx("div", { className: "ids-header-1177-admin__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177-admin__main", children: [jsxs("div", { className: "ids-header-1177-admin__main-left", children: [jsx("div", { className: "ids-header-1177-admin__logo", children: renderLogo() }), jsxs("div", { className: "ids-header-1177-admin__brand", children: [brandTextTop && jsx("div", { className: "ids-header-1177-admin__brand-text---supplement", children: brandTextTop }), brandText && jsx("div", { className: "ids-header-1177-admin__brand-text", children: brandText }), brandTextBottom && jsx("div", { className: "ids-header-1177-admin__brand-text---supplement", children: brandTextBottom })] })] }), jsxs("div", { className: "ids-header-1177-admin__main-right", children: [items, avatar, mobileMenu] })] }), children] }));
+}
+
+export { IDSHeader1177AdminBase };

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

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

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

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

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

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

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

@@ -1,33 +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 { IDSHeader1177AdminItemBase } from './header-1177-admin-item-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import '@inera/ids-design/components/header-1177-admin/header-1177-admin-item.css';
 
-function IDSHeader1177AdminItem({ mobile = false, href = "", text = "", icon, link, onClick, ...props }) {
+function IDSHeader1177AdminItem({ mobile, icon, children, ...props }) {
     const headerContext = useHeaderContext() || { unresponsive: false };
-    const classNames = clsx("ids-header-1177-admin-item", {
-        "ids-header-1177-admin-item--unresponsive": headerContext.unresponsive,
-        "ids-header-1177-admin-item--mobile": mobile
-    });
-    const renderContent = () => (jsx("div", { className: "ids-header-1177-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(linkProps.className),
-            children: hasChildren ? linkProps.children : text
-        });
-        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
-    }
-    if (onClick) {
-        return (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] }));
-    }
-    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+    return (jsx(IDSHeader1177AdminItemBase, { ...props, icon: icon, mobile: mobile, unresponsive: headerContext.unresponsive, children: children }));
 }
 
 export { IDSHeader1177AdminItem };

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

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

package/components/header-1177-admin/header-1177-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 IDSHeader1177AdminMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, client = false, children, componentRef, onToggleMenu, ...props }) {
+    const menuId = `header-1177-admin-menu-${useId()}`;
+    const toggleHandler = client && onToggleMenu
+        ? {
+            onClick: onToggleMenu
+        }
+        : {};
+    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 })] }));
+}
+
+export { IDSHeader1177AdminMenuMobileBase };

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

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