@inera/ids-react 7.2.0 → 8.0.0

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-menu-mobile.css';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import clsx from 'clsx';
+
+const IDSHeader1177ProMenuMobile = ({ label = "", persistent = false, children, onExpanded, onClosed, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(false);
+    const headerContext = useHeaderContext();
+    const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    const handleLinkClick = () => {
+        setIsExpanded(false);
+        onClosed?.();
+    };
+    const handleClickOutside = (event) => {
+        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+            onClosed?.();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [persistent]);
+    useEffect(() => {
+        if (!persistent && isExpanded) {
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", handleLinkClick));
+            return () => {
+                links.forEach(link => link.removeEventListener("click", handleLinkClick));
+            };
+        }
+    }, [isExpanded, persistent]);
+    const toggleExpanded = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        if (newExpanded) {
+            onExpanded?.();
+        }
+        else {
+            onClosed?.();
+        }
+    };
+    return (jsxs("div", { className: "ids-header-1177-pro-menu-mobile-component", ref: containerRef, ...props, children: [jsxs("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-label": "Meny", className: clsx("ids-header-1177-pro-menu-mobile", {
+                    "ids-header-1177-pro-menu-mobile--unresponsive": headerContext?.unresponsive
+                }), children: [label, jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) })] }), isExpanded && (jsx("div", { className: "ids-header-1177-pro-menu-mobile__items", ref: menuRef, children: children }))] }));
+};
+
+export { IDSHeader1177ProMenuMobile };

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

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-1177-pro/header-1177-pro-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177ProNavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children }) => {
+const IDSHeader1177ProNavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children, ...props }) => {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const containerRef = useRef(null);
@@ -27,12 +27,12 @@ const IDSHeader1177ProNavItem = ({ active = false, expanded = false, label = "",
         }
         return children;
     };
-    const renderLink = (link) => {
-        return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, {
+    const renderDropdownLink = (link) => {
+        return React.isValidElement(link)
+            ? React.cloneElement(link, {
                 activeIcon: true,
                 block: true,
-                colorPreset: 1,
+                menu: true,
                 onClick: () => setIsExpanded(false)
             })
             : link;
@@ -40,12 +40,12 @@ const IDSHeader1177ProNavItem = ({ active = false, expanded = false, label = "",
     const renderDropdown = () => {
         if (!isExpanded)
             return null;
-        return (jsx("div", { id: "ids-dropdown", className: "ids-header-1177-pro__items__item-dropdown", children: jsxs("div", { className: "ids-header-1177-pro__items__item-dropdown__content", children: [jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro__items__item-dropdown__content-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro__item-wrapper", children: renderLink(link) }, idx))) })] }) }));
+        return (jsx("div", { id: "ids-dropdown", className: "ids-header-1177-pro-nav-item__menu ids-header-1177-pro-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-1177-pro-nav-item__menu__content", children: [jsx("div", { className: "ids-header-1177-pro-nav-item__menu__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: renderDropdownLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: renderDropdownLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: renderDropdownLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-pro-nav-item__menu__content-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-pro-nav__menu-item-wrapper", children: renderDropdownLink(link) }, idx))) })] }) }));
     };
-    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-pro__nav-item", {
-            "ids-header-1177-pro__nav-item--unresponsive": headerContext?.unresponsive,
-            "ids-header-1177-pro__nav-item--active": active || isExpanded
-        }), children: [renderItem(), renderDropdown()] }));
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-pro-nav-item", {
+            "ids-header-1177-pro-nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177-pro-nav-item--active": active || isExpanded
+        }), ...props, children: [renderItem(), renderDropdown()] }));
 };
 
 export { IDSHeader1177ProNavItem };

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

@@ -2,8 +2,8 @@ import React, { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177-pro/header-1177-pro-nav.css";
 import "@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css";
 interface IDSHeader1177ProNavProps {
-    regionIconMobile?: ReactNode;
-    mobileMenu?: ReactNode;
+    mobileRegionPicker?: ReactNode;
+    mobileAvatar?: ReactNode;
     children?: ReactNode;
 }
 export declare const IDSHeader1177ProNav: React.FC<IDSHeader1177ProNavProps>;

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

@@ -1,30 +1,15 @@
 "use client";
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/header-1177-pro/header-1177-pro-nav.css';
 import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177ProNav = ({ regionIconMobile, mobileMenu, children }) => {
+const IDSHeader1177ProNav = ({ mobileRegionPicker, mobileAvatar, children, ...props }) => {
     const headerContext = useHeaderContext();
-    const [regionPickerExpanded, setRegionPickerExpanded] = useState(false);
-    const toggleRegion = () => {
-        setRegionPickerExpanded(prev => !prev);
-    };
-    const renderRegionPicker = () => {
-        if (headerContext?.hideRegionPicker)
-            return null;
-        return (jsx("button", { className: clsx("ids-header-1177-pro__region-picker-button--mobile", {
-                "ids-header-1177-pro__region-picker-button--mobile--expanded": regionPickerExpanded
-            }), "aria-label": headerContext?.regionPickerText, "aria-expanded": regionPickerExpanded, onClick: toggleRegion, children: regionIconMobile ? (regionIconMobile) : (jsxs("div", { className: "ids-header-1177-pro__region-picker__text", children: [jsx("span", { className: "ids-header-1177-pro__region-picker-icon" }), headerContext?.regionPickerText] })) }));
-    };
-    return (jsx("nav", { className: clsx("ids-header-1177-pro__nav", {
-            "ids-header-1177-pro__nav--fluid": headerContext?.fluid,
-            "ids-header-1177-pro__nav--unresponsive": headerContext?.unresponsive
-        }), children: jsxs("div", { className: clsx("ids-header-1177-pro__nav-inner", {
-                "ids-header-1177-pro__nav-inner--no-region-picker": headerContext?.hideRegionPicker
-            }), children: [renderRegionPicker(), children, mobileMenu] }) }));
+    return (jsxs("nav", { className: clsx("ids-header-1177-pro-nav", {
+            "ids-header-1177-pro-nav--unresponsive": headerContext?.unresponsive
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-nav__inner", children: children }), jsxs("div", { className: "ids-header-1177-pro-nav__inner-mobile", children: [mobileRegionPicker, mobileAvatar] })] }));
 };
 
 export { IDSHeader1177ProNav };

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

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker-mobile.css";
+export interface IDSHeader1177ProRegionPickerMobileProps {
+    text?: string;
+    expanded?: boolean;
+    onToggleRegion?: (isExpanded: boolean) => void;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177ProRegionPickerMobile: React.FC<IDSHeader1177ProRegionPickerMobileProps>;

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

@@ -0,0 +1,36 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React, { useState, useRef, isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker-mobile.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+
+const IDSHeader1177ProRegionPickerMobile = ({ text = "Välj region", expanded: propExpanded = false, onToggleRegion, children, ...props }) => {
+    const [isExpanded, setIsExpanded] = useState(propExpanded);
+    const regionIconRef = useRef(null);
+    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)
+            });
+        }
+        return null;
+    };
+    return headerContext?.hideRegionPicker ? null : (jsx("div", { className: clsx("ids-header-1177-pro-region-picker-mobile", {
+            "ids-header-1177-pro-region-picker-mobile--selected-region": hasChildren
+        }), ...props, children: jsxs("button", { onClick: toggleRegion, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
+                "ids-header-1177-pro-region-picker-mobile__button--expanded": isExpanded
+            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: renderChild(children) }), jsxs("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: [" ", text] })] }) }));
+};
+
+export { IDSHeader1177ProRegionPickerMobile };

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

@@ -0,0 +1,9 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css";
+export interface IDSHeader1177ProRegionPickerProps {
+    text?: string;
+    expanded?: boolean;
+    onToggleRegion?: (isExpanded: boolean) => void;
+    children?: ReactNode;
+}
+export declare const IDSHeader1177ProRegionPicker: React.FC<IDSHeader1177ProRegionPickerProps>;

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

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useState, useRef, isValidElement, cloneElement } from 'react';
+import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css';
+import clsx from 'clsx';
+
+const IDSHeader1177ProRegionPicker = ({ 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: 4,
+                className: clsx(existingClass)
+            });
+        }
+        return null;
+    };
+    return (jsxs("div", { className: clsx("ids-header-1177-pro-region-picker", {
+            "ids-header-1177-pro-region-picker--selected-region": hasChildren
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: renderChild(children) }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { onClick: toggleRegion, className: clsx("ids-header-1177-pro-region-picker__button", {
+                        "ids-header-1177-pro-region-picker__button--expanded": isExpanded
+                    }), "aria-label": text, children: text }) })] }));
+};
+
+export { IDSHeader1177ProRegionPicker };

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

@@ -1,22 +1,19 @@
 import React, { ReactNode, PropsWithChildren, AnchorHTMLAttributes } from "react";
 import "@inera/ids-design/components/header-1177-pro/header-1177-pro.css";
-import "@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css";
 interface IDSHeader1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
-    regionPickerText?: string;
-    regionPickerExpanded?: boolean;
     hideRegionPicker?: boolean;
-    fluid?: boolean;
     unresponsive?: boolean;
     logoText?: string;
-    srLogoLabel?: string;
+    srLogoText?: string;
     logoHref?: string;
     logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
-    onToggleRegion?: (isExpanded: boolean) => void;
+    regionPicker?: ReactNode;
     avatar?: ReactNode;
-    logo?: ReactNode;
+    logoLink?: ReactNode;
     regionIcon?: ReactNode;
     items?: ReactNode;
     skipToContentLink?: ReactNode;
+    mobileMenu?: ReactNode;
     children?: ReactNode;
 }
 export declare const IDSHeader1177Pro: React.FC<PropsWithChildren<IDSHeader1177ProProps>>;

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

@@ -1,40 +1,16 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/header-1177-pro/header-1177-pro.css';
-import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Pro = ({ regionPickerText = "Välj region", hideRegionPicker: initialRegionPicker = false, regionPickerExpanded: initialExpanded = false, fluid = false, unresponsive = false, logoText = "för vårdpersonal", srLogoLabel = "Logotyp", logoHref = "", logoProps = {}, onToggleRegion, avatar, logo, regionIcon, items, skipToContentLink, className, children }) => {
-    const [isRegionExpanded, setIsRegionExpanded] = useState(initialExpanded);
-    const [hideRegionPicker, setHideRegionPicker] = useState(initialRegionPicker);
-    useEffect(() => {
-        if (avatar) {
-            // No region picker when avatar
-            setIsRegionExpanded(false);
-            setHideRegionPicker(true);
-        }
-        else {
-            setHideRegionPicker(initialRegionPicker);
-        }
-    }, [avatar]);
-    const toggleRegion = () => {
-        const newValue = !isRegionExpanded;
-        setIsRegionExpanded(newValue);
-        onToggleRegion?.(newValue);
-    };
+const IDSHeader1177Pro = ({ hideRegionPicker = false, unresponsive = false, logoText = "för vårdpersonal", srLogoText = "Logotyp", logoHref = "", logoProps = {}, avatar, logoLink, regionPicker, items, skipToContentLink, mobileMenu, className, children, ...props }) => {
     return (jsx(HeaderProvider, { value: {
             unresponsive,
-            fluid,
-            hideRegionPicker,
-            regionPickerText
+            hideRegionPicker
         }, children: jsxs("header", { className: clsx("ids-header-1177-pro", {
-                "ids-header-1177-pro--unresponsive": unresponsive,
-                "ids-header-1177-pro--fluid": fluid
-            }, className), children: [skipToContentLink && (jsx("div", { className: "ids-header-1177-pro__skip-to-content", children: skipToContentLink })), jsx("div", { className: "ids-header-1177-pro__container", children: jsxs("div", { className: "ids-header-1177-pro__inner", children: [jsxs("div", { className: "ids-header-1177-pro__logo-col", children: [jsx("div", { className: "ids-header-1177-pro__logo", children: logo ? (logo) : (jsx("a", { className: "ids-header-1177-pro__logo-link", href: logoHref, "aria-label": srLogoLabel, ...logoProps })) }), jsx("div", { className: "ids-header-1177-pro__logo-text", children: logoText }), !hideRegionPicker && !avatar && (jsx("button", { className: clsx("ids-header-1177-pro__region-picker-button", {
-                                            "ids-header-1177-pro__region-picker-button--expanded": isRegionExpanded
-                                        }), onClick: toggleRegion, "aria-label": regionPickerText, "aria-expanded": isRegionExpanded, children: regionIcon || regionPickerText }))] }), jsx("div", { className: "ids-header-1177-pro__items", children: jsxs("div", { className: "ids-header-1177-pro__items-inner", children: [items, " ", avatar] }) })] }) }), children] }) }));
+                "ids-header-1177-pro--unresponsive": unresponsive
+            }, className), ...props, children: [skipToContentLink && jsx("div", { className: "ids-header-1177-pro__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177-pro__main", children: [jsxs("div", { className: "ids-header-1177-pro__main-left", children: [jsx("div", { className: "ids-header-1177-pro__logo", children: logoLink ? (logoLink) : (jsx("a", { className: "ids-header-1177-pro__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }), jsx("div", { className: "ids-header-1177-pro__logo-text", children: logoText }), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177-pro__region-picker", children: regionPicker })] }), jsx("div", { className: "ids-header-1177-pro__main-right", children: jsxs("div", { className: "ids-header-1177-pro__items", children: [items, " ", avatar, mobileMenu && jsx("div", { className: "ids-header-1177-pro__mobile-menu", children: mobileMenu })] }) })] }), children] }) }));
 };
 
 export { IDSHeader1177Pro };

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

@@ -9,10 +9,9 @@ const IDSHeaderIneraItem = ({ mobile = false, separatorLeft = false, icon = "",
     const headerContext = useHeaderContext();
     const classNames = clsx("ids-header-inera-item", {
         "ids-header-inera-item--mobile": mobile,
-        "ids-header-inera-item__separator": separatorLeft,
         "ids-header-inera-item--unresponsive": headerContext?.unresponsive
     });
-    const renderContent = () => (jsxs(Fragment, { children: [jsx("div", { className: "ids-header-inera-item__icon", "aria-label": text, children: icon && jsx("span", { className: `ids-icon-${icon}` }) }), jsx("div", { className: "ids-header-inera-item__text", children: text })] }));
+    const renderContent = () => (jsxs(Fragment, { children: [jsx("div", { className: "ids-header-inera-item__icon", "aria-hidden": "true", children: icon && jsx("span", { className: `ids-icon-${icon}` }) }), jsx("div", { className: "ids-header-inera-item__text", children: text })] }));
     if (link && isValidElement(link)) {
         return cloneElement(link, {
             ...props,

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera/header-inera-menu-mobile.css";
+export interface IDSHeaderIneraMenuMobileProps {
+    expanded?: boolean;
+    persistent?: boolean;
+    srLabel?: string;
+    children?: ReactNode;
+    onExpanded?: () => void;
+    onClosed?: () => void;
+}
+export declare const IDSHeaderIneraMenuMobile: React.FC<IDSHeaderIneraMenuMobileProps>;

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

@@ -0,0 +1,54 @@
+"use client";
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import '@inera/ids-design/components/header-inera/header-inera-menu-mobile.css';
+import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+
+const IDSHeaderIneraMenuMobile = ({ expanded = false, persistent = false, srLabel = "Meny", children, onExpanded, onClosed, ...props }) => {
+    const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    const handleLinkClick = () => {
+        setIsExpanded(false);
+        onClosed?.();
+    };
+    const handleClickOutside = (event) => {
+        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+            onClosed?.();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [persistent]);
+    useEffect(() => {
+        if (!persistent && isExpanded) {
+            const links = menuRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", handleLinkClick));
+            return () => {
+                links.forEach(link => link.removeEventListener("click", handleLinkClick));
+            };
+        }
+    }, [isExpanded, persistent]);
+    const toggleExpanded = () => {
+        const newExpanded = !isExpanded;
+        setIsExpanded(newExpanded);
+        if (newExpanded) {
+            onExpanded?.();
+        }
+        else {
+            onClosed?.();
+        }
+    };
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-menu-mobile", {
+            "ids-header-inera-menu-mobile--expanded": isExpanded,
+            "ids-header-inera-menu-mobile--unresponsive": headerContext?.unresponsive
+        }), ...props, children: [jsx("button", { "aria-label": srLabel, "aria-expanded": isExpanded, onClick: toggleExpanded, className: "ids-header-inera-menu-mobile__button", children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) }), isExpanded && (jsx("nav", { className: "ids-header-inera-menu-mobile__menu-items", ref: menuRef, children: children }))] }));
+};
+
+export { IDSHeaderIneraMenuMobile };

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-inera/header-inera-nav-item.css';
 import clsx from 'clsx';
 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 }) => {
+const IDSHeaderIneraNavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4, ...props }) => {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const containerRef = useRef(null);
@@ -37,8 +37,8 @@ const IDSHeaderIneraNavItem = ({ label = "", active = false, expanded = false, n
         }
     };
     const renderLink = (link) => {
-        return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, {
+        return React.isValidElement(link)
+            ? React.cloneElement(link, {
                 activeIcon: true,
                 block: true,
                 colorPreset: 2,
@@ -49,14 +49,11 @@ const IDSHeaderIneraNavItem = ({ label = "", active = false, expanded = false, n
     const renderContent = () => {
         if (!isExpanded)
             return null;
-        return (jsx("div", { id: contentId, className: "ids-header-inera-nav-item__content", children: jsxs("div", { className: clsx("ids-header-inera-nav-item__content-inner", {
-                    "ids-header-inera-nav-item__content-inner--fluid": headerContext?.fluid
-                }), children: [jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__content-col", children: col4 })] }) }));
+        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-inner", children: [jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col4 })] }) }));
     };
     return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-nav-item", {
-            "ids-header-inera-nav-item--fluid": headerContext?.fluid,
             "ids-header-inera-nav-item--unresponsive": headerContext?.unresponsive
-        }), children: [renderNavItem(), renderContent()] }));
+        }), ...props, children: [renderNavItem(), renderContent()] }));
 };
 
 export { IDSHeaderIneraNavItem };

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

@@ -4,13 +4,12 @@ import '@inera/ids-design/components/header-inera/header-inera-nav.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraNav = ({ srText = "Huvudmeny", children }) => {
+const IDSHeaderIneraNav = ({ srText = "Huvudmeny", children, ...props }) => {
     const headerContext = useHeaderContext();
     const className = clsx("ids-header-inera-nav", {
-        "ids-header-inera-nav--fluid": headerContext?.fluid,
         "ids-header-inera-nav--unresponsive": headerContext?.unresponsive
     });
-    return (jsx("nav", { className: className, "aria-label": srText, children: jsx("div", { className: "ids-header-inera-nav__nav-items", children: children }) }));
+    return (jsx("nav", { className: className, "aria-label": srText, ...props, children: jsx("div", { className: "ids-header-inera-nav__nav-items", children: children }) }));
 };
 
 export { IDSHeaderIneraNav };

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

@@ -3,8 +3,7 @@ import "@inera/ids-design/components/header-inera/header-inera.css";
 interface IDSHeaderIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     logoHref?: string;
     logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
-    srLogoLabel?: string;
-    fluid?: boolean;
+    srLogoText?: string;
     unresponsive?: boolean;
     items?: ReactNode;
     mobileMenu?: ReactNode;

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

@@ -4,16 +4,13 @@ import clsx from 'clsx';
 import '@inera/ids-design/components/header-inera/header-inera.css';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderInera = ({ logoHref = "", logoProps = {}, srLogoLabel = "Logotyp inera", fluid = false, unresponsive = false, items, mobileMenu, skipToContent, logo, className, children }) => {
+const IDSHeaderInera = ({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, logo, className, children, ...props }) => {
     return (jsx(HeaderProvider, { value: {
             unresponsive,
-            fluid,
-            hideRegionPicker: true,
-            regionPickerText: ""
+            hideRegionPicker: true
         }, children: jsxs("header", { className: clsx("ids-header-inera", {
-                "ids-header-inera--unresponsive": unresponsive,
-                "ids-header-inera--fluid": fluid
-            }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera__inner", children: [logoHref ? (jsx("a", { href: logoHref, "aria-label": srLogoLabel, 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] }) }));
+                "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] })] }) }));
 };
 
 export { IDSHeaderInera };

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

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

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

@@ -1,14 +1,34 @@
 "use client";
-import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+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 { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import clsx from 'clsx';
 
-const IDSHeaderIneraAdminAvatarMobile = ({ username = "", unit = "", children }) => {
+const IDSHeaderIneraAdminAvatarMobile = ({ username = "", unit = "", expanded = false, loginLink, persistent = false, children, ...props }) => {
+    const dropdownId = 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);
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("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
-        }), children: [username && (jsx(Fragment, { children: jsxs("div", { className: "ids-header-inera-admin-avatar-mobile__user-info", children: [jsx("div", { className: "ids-header-inera-admin-avatar-mobile__username", children: username }), jsx("div", { className: "ids-header-inera-admin-avatar-mobile__unit", children: unit })] }) })), jsx("div", { className: "ids-header-inera-admin-avatar-mobile__links", children: children })] }));
+        }), 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 })] })] }))] }));
 };
 
 export { IDSHeaderIneraAdminAvatarMobile };

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

@@ -1,12 +1,11 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar.css";
 interface IDSHeaderIneraAdminAvatarProps {
-    username?: string;
+    username: string;
     unit?: string;
-    maxwidth?: string;
-    onExpanded?: () => void;
-    onClosed?: () => void;
+    expanded?: boolean;
     children?: ReactNode;
+    persistent?: boolean;
 }
 export declare const IDSHeaderIneraAdminAvatar: React.FC<IDSHeaderIneraAdminAvatarProps>;
 export {};