@inera/ids-react 9.1.2 → 9.2.0

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

@@ -1,44 +1,24 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useState, useRef } from 'react';
 import { 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';
+import { useLinkClick } from '../utils/hooks/useLinkClick.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, componentRef, isExpanded && !persistent);
-    const handleLinkClick = () => {
+    const closeMenu = () => {
         setIsExpanded(false);
         onClosed?.();
     };
-    const handleClickOutside = (event) => {
-        if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
-            setIsExpanded(false);
-            onClosed?.();
-        }
-    };
-    useEffect(() => {
-        document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [persistent]);
-    useEffect(() => {
-        if (!persistent && isExpanded) {
-            const links = componentRef.current?.querySelectorAll("a") || [];
-            links.forEach(link => link.addEventListener("click", handleLinkClick));
-            return () => {
-                links.forEach(link => link.removeEventListener("click", handleLinkClick));
-            };
-        }
-    }, [isExpanded, persistent]);
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
     const toggleMenu = () => {
         const next = !isExpanded;
         setIsExpanded(next);
@@ -46,5 +26,6 @@ function IDSHeaderIneraAdminMenuMobile({ srLabel = "Meny", expanded = false, per
     };
     return (jsx(IDSHeaderIneraAdminMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef }));
 }
+IDSHeaderIneraAdminMenuMobile.displayName = "IDSHeaderIneraAdminMenuMobile";
 
 export { IDSHeaderIneraAdminMenuMobile };

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

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

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

@@ -1,10 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeaderIneraAdminNavBase({ children, unresponsive = false, ...props }) {
+function IDSHeaderIneraAdminNavBase({ children, unresponsive = false, mobileOnly = false, srLabel = "Huvudmeny", ...props }) {
     return (jsx("nav", { className: clsx("ids-header-inera-admin-nav", {
-            "ids-header-inera-admin-nav--unresponsive": unresponsive
-        }), "aria-label": "Huvudmeny", ...props, children: jsx("div", { className: "ids-header-inera-admin-nav__nav-items", children: children }) }));
+            "ids-header-inera-admin-nav--unresponsive": unresponsive,
+            "ids-header-inera-admin-nav--only-mobile": mobileOnly
+        }), "aria-label": srLabel, ...props, children: jsx("div", { className: "ids-header-inera-admin-nav__nav-items", children: children }) }));
 }
+IDSHeaderIneraAdminNavBase.displayName = "IDSHeaderIneraAdminNavBase";
 
 export { IDSHeaderIneraAdminNavBase };

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

@@ -17,3 +17,6 @@ export interface IDSHeaderIneraAdminNavItemBaseProps extends HTMLAttributes<HTML
     client?: boolean;
 }
 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;
+export declare namespace IDSHeaderIneraAdminNavItemBase {
+    var displayName: string;
+}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -5,6 +5,7 @@ import { IDSHeaderIneraAdminNavItemBase } from './header-inera-admin-nav-item-ba
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { useClickOutside } from '../utils/hooks/useClickOutside.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
 
 function IDSHeaderIneraAdminNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
@@ -12,39 +13,15 @@ function IDSHeaderIneraAdminNavItem({ expanded = false, ...props }) {
     const componentRef = useRef(null);
     const menuRef = useRef(null);
     const buttonRef = useRef(null);
-    useClickOutside([componentRef, buttonRef], () => {
-        setIsExpanded(false);
-    });
-    useEsc(() => setIsExpanded(false), buttonRef, componentRef);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, isExpanded);
+    useLinkClick(closeMenu, menuRef, buttonRef, isExpanded);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    // close when clicking outside the menu
-    useEffect(() => {
-        const onClickOutside = (event) => {
-            if (componentRef.current && !componentRef.current.contains(event.target)) {
-                setIsExpanded(false);
-            }
-        };
-        document.addEventListener("click", onClickOutside);
-        return () => document.removeEventListener("click", onClickOutside);
-    }, []);
-    // close when clicking any link inside the menu
-    useEffect(() => {
-        const menuEl = menuRef.current;
-        if (!menuEl)
-            return;
-        const onMenuClick = (event) => {
-            const target = event.target;
-            const anchor = target.closest("a");
-            if (anchor && menuEl.contains(anchor)) {
-                setIsExpanded(false);
-            }
-        };
-        menuEl.addEventListener("click", onMenuClick);
-        return () => menuEl.removeEventListener("click", onMenuClick);
-    }, [menuRef]);
     return (jsx(IDSHeaderIneraAdminNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
 }
+IDSHeaderIneraAdminNavItem.displayName = "IDSHeaderIneraAdminNavItem";
 
 export { IDSHeaderIneraAdminNavItem };

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

@@ -1,5 +1,10 @@
 import { HTMLAttributes } from "react";
 interface IDSHeaderIneraAdminNavProps extends HTMLAttributes<HTMLElement> {
+    mobileOnly?: boolean;
+    srLabel?: string;
+}
+export declare function IDSHeaderIneraAdminNav({ mobileOnly, srLabel, children, ...props }: IDSHeaderIneraAdminNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraAdminNav {
+    var displayName: string;
 }
-export declare function IDSHeaderIneraAdminNav({ children, ...props }: IDSHeaderIneraAdminNavProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -3,9 +3,10 @@ import { jsx } from 'react/jsx-runtime';
 import { IDSHeaderIneraAdminNavBase } from './header-inera-admin-nav-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-function IDSHeaderIneraAdminNav({ children, ...props }) {
+function IDSHeaderIneraAdminNav({ mobileOnly, srLabel, children, ...props }) {
     const headerContext = useHeaderContext() || { unresponsive: false };
-    return (jsx(IDSHeaderIneraAdminNavBase, { ...props, unresponsive: headerContext.unresponsive, children: children }));
+    return (jsx(IDSHeaderIneraAdminNavBase, { ...props, srLabel: srLabel, mobileOnly: mobileOnly, unresponsive: headerContext.unresponsive, children: children }));
 }
+IDSHeaderIneraAdminNav.displayName = "IDSHeaderIneraAdminNav";
 
 export { IDSHeaderIneraAdminNav };

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

@@ -13,3 +13,6 @@ export interface IDSHeaderIneraAdminProps extends React.HTMLAttributes<HTMLDivEl
     hideAvatar?: boolean;
 }
 export declare function IDSHeaderIneraAdmin({ unresponsive, hideAvatar, children, ...props }: IDSHeaderIneraAdminProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraAdmin {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,16 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera-general/composite-header-inera-general.css";
+interface IDSHeaderIneraGeneralBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    brandLink?: ReactNode;
+    brandText?: string;
+    unresponsive?: boolean;
+    items?: ReactNode;
+    mobileMenu?: ReactNode;
+    skipToContent?: ReactNode;
+    logo?: ReactNode;
+}
+export declare function IDSHeaderIneraGeneralBase({ brandLink, brandText, unresponsive, items, mobileMenu, skipToContent, className, children, ...props }: IDSHeaderIneraGeneralBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralBase {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,12 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-inera-general/composite-header-inera-general.css';
+
+function IDSHeaderIneraGeneralBase({ brandLink, brandText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, className, children, ...props }) {
+    return (jsxs("header", { ...props, className: clsx("ids-header-inera-general", {
+            "ids-header-inera-general--unresponsive": unresponsive
+        }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera-general__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera-general__inner", children: [jsxs("div", { className: "ids-header-inera-general__main", children: [jsx("div", { className: "ids-header-inera-general__brand", children: brandLink ? (jsxs(Fragment, { children: [jsx("span", { className: "ids-header-inera-general__brand-text", children: brandText }), jsx("span", { className: "ids-header-inera-general__brand-link", children: brandLink })] })) : (jsx("h1", { className: "ids-header-inera-general__brand-text", children: brandText })) }), jsxs("div", { className: "ids-header-inera-general__items", children: [items, " ", mobileMenu] })] }), children] })] }));
+}
+IDSHeaderIneraGeneralBase.displayName = "IDSHeaderIneraGeneralBase";
+
+export { IDSHeaderIneraGeneralBase };

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

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

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

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

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

@@ -0,0 +1,10 @@
+import { HTMLAttributes } from "react";
+export interface IDSHeaderIneraGeneralItemProps extends HTMLAttributes<HTMLElement> {
+    mobile?: boolean;
+    separatorLeft?: boolean;
+    icon?: string;
+}
+export declare function IDSHeaderIneraGeneralItem({ mobile, separatorLeft, icon, children, ...props }: IDSHeaderIneraGeneralItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralItem {
+    var displayName: string;
+}

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IDSHeaderIneraGeneralItemBase } from './header-inera-general-item-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+
+function IDSHeaderIneraGeneralItem({ mobile, separatorLeft, icon, children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
+    return (jsx(IDSHeaderIneraGeneralItemBase, { ...props, mobile: mobile, icon: icon, unresponsive: headerContext.unresponsive, children: children }));
+}
+IDSHeaderIneraGeneralItem.displayName = "IDSHeaderIneraGeneralItem";
+
+export { IDSHeaderIneraGeneralItem };

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

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

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

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSHeaderIneraGeneralMenuMobileBase({ srLabel = "Meny", expanded = false, unresponsive = false, children, componentRef, buttonRef, onToggleMenu, client = false, ...props }) {
+    const menuId = `header-inera-general-menu-${useId()}`;
+    const toggleHandler = client && onToggleMenu
+        ? {
+            onClick: onToggleMenu
+        }
+        : {};
+    return (jsxs("div", { ...props, ref: componentRef, className: clsx("ids-header-inera-general-menu-mobile", {
+            "ids-header-inera-general-menu-mobile--expanded": expanded,
+            "ids-header-inera-general-menu-mobile--unresponsive": unresponsive
+        }), children: [jsx("button", { type: "button", "aria-label": srLabel, "aria-expanded": expanded, "aria-controls": menuId, ...toggleHandler, ref: buttonRef, className: "ids-header-inera-general-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) }), jsx("div", { id: menuId, className: "ids-header-inera-general-menu-mobile__items", children: children })] }));
+}
+IDSHeaderIneraGeneralMenuMobileBase.displayName = "IDSHeaderIneraGeneralMenuMobileBase";
+
+export { IDSHeaderIneraGeneralMenuMobileBase };

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

@@ -0,0 +1,13 @@
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraGeneralMenuMobileProps extends HTMLAttributes<HTMLElement> {
+    srLabel?: string;
+    expanded?: boolean;
+    persistent?: boolean;
+    onExpanded?: () => void;
+    onClosed?: () => void;
+}
+export declare function IDSHeaderIneraGeneralMenuMobile({ srLabel, expanded, persistent, children, onExpanded, onClosed, ...props }: IDSHeaderIneraGeneralMenuMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralMenuMobile {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,31 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { IDSHeaderIneraGeneralMenuMobileBase } from './header-inera-general-menu-mobile-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
+
+function IDSHeaderIneraGeneralMenuMobile({ srLabel = "Meny", expanded = false, persistent = false, children, onExpanded, onClosed, ...props }) {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const headerContext = useHeaderContext();
+    const componentRef = useRef(null);
+    const buttonRef = useRef(null);
+    const closeMenu = () => {
+        setIsExpanded(false);
+        onClosed?.();
+    };
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    const toggleMenu = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        next ? onExpanded?.() : onClosed?.();
+    };
+    return (jsx(IDSHeaderIneraGeneralMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef, buttonRef: buttonRef }));
+}
+IDSHeaderIneraGeneralMenuMobile.displayName = "IDSHeaderIneraGeneralMenuMobile";
+
+export { IDSHeaderIneraGeneralMenuMobile };

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

@@ -0,0 +1,10 @@
+import { ReactNode } from "react";
+interface IDSHeaderIneraGeneralNavBaseProps {
+    children?: ReactNode;
+    unresponsive?: boolean;
+}
+export declare function IDSHeaderIneraGeneralNavBase({ children, unresponsive, ...props }: IDSHeaderIneraGeneralNavBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralNavBase {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSHeaderIneraGeneralNavBase({ children, unresponsive = false, ...props }) {
+    return (jsx("nav", { className: clsx("ids-header-inera-general-nav", {
+            "ids-header-inera-general-nav--unresponsive": unresponsive
+        }), "aria-label": "Huvudmeny", ...props, children: jsx("div", { className: "ids-header-inera-general-nav__nav-items", children: children }) }));
+}
+IDSHeaderIneraGeneralNavBase.displayName = "IDSHeaderIneraGeneralNavBase";
+
+export { IDSHeaderIneraGeneralNavBase };

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

@@ -0,0 +1,21 @@
+import React, { HTMLAttributes, ReactElement } from "react";
+import { IDSLinkProps } from "../link/link";
+export interface IDSHeaderIneraGeneralNavItemBaseProps extends HTMLAttributes<HTMLElement> {
+    label?: string;
+    active?: boolean;
+    expanded?: boolean;
+    children?: React.ReactNode;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col4?: React.ReactNode;
+    componentRef?: React.Ref<HTMLDivElement>;
+    menuRef?: React.Ref<HTMLDivElement>;
+    buttonRef?: React.Ref<HTMLButtonElement>;
+    onToggleItem?: () => void;
+    unresponsive?: boolean;
+}
+export declare function IDSHeaderIneraGeneralNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, ...props }: IDSHeaderIneraGeneralNavItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralNavItemBase {
+    var displayName: string;
+}

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

@@ -0,0 +1,27 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSHeaderIneraGeneralNavItemBase({ 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-general-nav-item", {
+            "ids-header-inera-general-nav-item--unresponsive": unresponsive,
+            "ids-header-inera-general-nav-item--expanded": expanded,
+            "ids-header-inera-general-nav-item--active": active
+        }), children: [!!label && (jsx("button", { type: "button", ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-general-nav-item__button", onClick: onToggleItem, children: label })), !label && (jsx("span", { className: "ids-header-inera-general-nav-item__link", children: React.Children.map(children, child => {
+                    if (!React.isValidElement(child))
+                        return child;
+                    const element = child;
+                    if (active && !element.props["aria-current"]) {
+                        return React.cloneElement(element, {
+                            "aria-current": "page"
+                        });
+                    }
+                    return element;
+                }) })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-inera-general-nav-item__menu", {
+                    "ids-header-inera-general-nav-item__menu--expanded": expanded
+                }), children: jsxs("div", { className: "ids-header-inera-general-nav-item__menu-content", children: [jsx("div", { className: "ids-header-inera-general-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-general-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-general-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-general-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-general-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-general-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-general-nav-item__menu-col-4", children: col4 })] }) })] }));
+}
+IDSHeaderIneraGeneralNavItemBase.displayName = "IDSHeaderIneraGeneralNavItemBase";
+
+export { IDSHeaderIneraGeneralNavItemBase };

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes, ReactElement } from "react";
+import { IDSLinkProps } from "../link/link";
+export interface IDSHeaderIneraGeneralNavItemProps extends HTMLAttributes<HTMLElement> {
+    label?: string;
+    active?: boolean;
+    expanded?: boolean;
+    children?: React.ReactNode;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    col4?: React.ReactNode;
+    itemId?: string;
+    unresponsive?: boolean;
+}
+export declare function IDSHeaderIneraGeneralNavItem({ expanded, ...props }: IDSHeaderIneraGeneralNavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralNavItem {
+    var displayName: string;
+}

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

@@ -0,0 +1,27 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import { IDSHeaderIneraGeneralNavItemBase } from './header-inera-general-nav-item-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
+
+function IDSHeaderIneraGeneralNavItem({ expanded = false, ...props }) {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const componentRef = useRef(null);
+    const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, isExpanded);
+    useLinkClick(closeMenu, menuRef, buttonRef, isExpanded);
+    useEffect(() => {
+        setIsExpanded(expanded);
+    }, [expanded]);
+    return (jsx(IDSHeaderIneraGeneralNavItemBase, { ...props, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
+}
+IDSHeaderIneraGeneralNavItem.displayName = "IDSHeaderIneraGeneralNavItem";
+
+export { IDSHeaderIneraGeneralNavItem };

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

@@ -0,0 +1,8 @@
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraGeneralNavProps extends HTMLAttributes<HTMLElement> {
+}
+export declare function IDSHeaderIneraGeneralNav({ children, ...props }: IDSHeaderIneraGeneralNavProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralNav {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,12 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IDSHeaderIneraGeneralNavBase } from './header-inera-general-nav-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+
+function IDSHeaderIneraGeneralNav({ children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
+    return (jsx(IDSHeaderIneraGeneralNavBase, { ...props, unresponsive: headerContext.unresponsive, children: children }));
+}
+IDSHeaderIneraGeneralNav.displayName = "IDSHeaderIneraGeneralNav";
+
+export { IDSHeaderIneraGeneralNav };

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

@@ -0,0 +1,15 @@
+import React, { ReactNode } from "react";
+interface IDSHeaderIneraGeneralProps extends React.HTMLAttributes<HTMLDivElement> {
+    brandLink?: ReactNode;
+    brandText?: string;
+    unresponsive?: boolean;
+    items?: ReactNode;
+    mobileMenu?: ReactNode;
+    skipToContent?: ReactNode;
+    logo?: ReactNode;
+}
+export declare function IDSHeaderIneraGeneral({ unresponsive, children, ...props }: IDSHeaderIneraGeneralProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderIneraGeneral {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
+import { IDSHeaderIneraGeneralBase } from './header-inera-general-base.js';
+
+function IDSHeaderIneraGeneral({ unresponsive = false, children, ...props }) {
+    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true, hideAvatar: true }, children: jsx(IDSHeaderIneraGeneralBase, { ...props, unresponsive: unresponsive, children: children }) }));
+}
+IDSHeaderIneraGeneral.displayName = "IDSHeaderIneraGeneral";
+
+export { IDSHeaderIneraGeneral };

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

@@ -8,4 +8,7 @@ interface IDSHeaderPatientProps extends React.HTMLAttributes<HTMLDivElement> {
     stack?: boolean;
 }
 export declare function IDSHeaderPatient({ srLabel, name, ssn, collapse, stack, buttons, className, children, ...props }: IDSHeaderPatientProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSHeaderPatient {
+    var displayName: string;
+}
 export {};

package/components/header-patient/header-patient.js

@@ -13,5 +13,6 @@ function IDSHeaderPatient({ srLabel = "", name = "", ssn = "", collapse = false,
     }, className);
     return (jsx("section", { className: classNames, "aria-label": srLabel, ...props, children: jsxs("div", { className: "ids-patient-header__inner", children: [jsxs("div", { className: "ids-header-patient__content", children: [jsxs("div", { className: "ids-header-patient__id", children: [jsx("span", { className: "ids-header-patient__name", children: name }), jsx("span", { className: "ids-header-patient__ssn", children: ssn })] }), jsx("div", { className: "ids-header-patient__info", children: children })] }), buttons && jsx("div", { className: "ids-header-patient__buttons", children: buttons })] }) }));
 }
+IDSHeaderPatient.displayName = "IDSHeaderPatient";
 
 export { IDSHeaderPatient };

package/components/link/action-link.d.ts

@@ -4,3 +4,6 @@ export interface IDSActionLinkProps extends React.HTMLAttributes<HTMLDivElement>
     image?: ReactNode;
 }
 export declare function IDSActionLink({ image, children, className, ...props }: IDSActionLinkProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSActionLink {
+    var displayName: string;
+}