@inera/ids-react 9.2.2 → 9.4.0

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+function IDSHeaderIneraNavItemLink({ active, children }) {
+    return (jsx("span", { className: "ids-header-inera-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;
+        }) }));
+}
+IDSHeaderIneraNavItemLink.displayName = "IDSHeaderIneraNavItemLink";
+
+export { IDSHeaderIneraNavItemLink };

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

@@ -12,7 +12,7 @@ export interface IDSHeaderIneraNavItemProps extends HTMLAttributes<HTMLElement>
     itemId?: string;
     unresponsive?: boolean;
 }
-export declare function IDSHeaderIneraNavItem({ expanded, ...props }: IDSHeaderIneraNavItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraNavItem({ expanded, ...props }: IDSHeaderIneraNavItemProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraNavItem {
     var displayName: string;
 }

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

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

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

@@ -8,8 +8,9 @@ interface IDSHeaderIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     mobileMenu?: ReactNode;
     skipToContent?: ReactNode;
     logo?: ReactNode;
+    logoLink?: ReactNode;
 }
-export declare function IDSHeaderInera({ unresponsive, children, ...props }: IDSHeaderIneraProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderInera({ unresponsive, logo, logoLink, children, ...props }: IDSHeaderIneraProps): React.JSX.Element;
 export declare namespace IDSHeaderInera {
     var displayName: string;
 }

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

@@ -3,8 +3,8 @@ import { jsx } from 'react/jsx-runtime';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 import { IDSHeaderIneraBase } from './header-inera-base.js';
 
-function IDSHeaderInera({ unresponsive = false, children, ...props }) {
-    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true, hideAvatar: true }, children: jsx(IDSHeaderIneraBase, { ...props, unresponsive: unresponsive, children: children }) }));
+function IDSHeaderInera({ unresponsive = false, logo, logoLink, children, ...props }) {
+    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true, hideAvatar: true }, children: jsx(IDSHeaderIneraBase, { ...props, logoLink: logoLink ?? logo, unresponsive: unresponsive, children: children }) }));
 }
 IDSHeaderInera.displayName = "IDSHeaderInera";
 

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

@@ -12,7 +12,7 @@ export interface IDSHeaderIneraAdminAvatarBaseProps extends HTMLAttributes<HTMLE
     unresponsive?: boolean;
     client?: boolean;
 }
-export declare function IDSHeaderIneraAdminAvatarBase({ username, unit, children, expanded, hide, onToggleAvatar, componentRef, menuRef, buttonRef, unresponsive, client }: IDSHeaderIneraAdminAvatarBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdminAvatarBase({ username, unit, children, expanded, hide, onToggleAvatar, componentRef, menuRef, buttonRef, unresponsive, client }: IDSHeaderIneraAdminAvatarBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraAdminAvatarBase {
     var displayName: string;
 }

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

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

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

@@ -5,7 +5,7 @@ interface IDSHeaderIneraAdminAvatarMobileProps extends HTMLAttributes<HTMLDivEle
     expanded?: boolean;
     persistent?: boolean;
 }
-export declare function IDSHeaderIneraAdminAvatarMobile({ username, unit, expanded, persistent, children, ...props }: IDSHeaderIneraAdminAvatarMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdminAvatarMobile({ username, unit, expanded, persistent, children, ...props }: IDSHeaderIneraAdminAvatarMobileProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraAdminAvatarMobile {
     var displayName: string;
 }

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

@@ -5,7 +5,7 @@ interface IDSHeaderIneraAdminAvatarProps extends HTMLAttributes<HTMLDivElement>
     expanded?: boolean;
     persistent?: boolean;
 }
-export declare function IDSHeaderIneraAdminAvatar({ username, unit, expanded, children, persistent, ...props }: IDSHeaderIneraAdminAvatarProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdminAvatar({ username, unit, expanded, children, persistent, ...props }: IDSHeaderIneraAdminAvatarProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraAdminAvatar {
     var displayName: string;
 }

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

@@ -12,7 +12,7 @@ export interface IDSHeaderIneraAdminBaseProps extends React.HTMLAttributes<HTMLD
     brandLink?: ReactNode;
     mobileMenu?: ReactNode;
 }
-export declare function IDSHeaderIneraAdminBase({ brandText, unresponsive, showLogo, items, avatar, skipToContentLink, brandLink, srLogoText, serviceName, mobileMenu, className, children, ...props }: IDSHeaderIneraAdminBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdminBase({ brandText, unresponsive, showLogo, items, avatar, skipToContentLink, brandLink, srLogoText, serviceName, mobileMenu, className, children, ...props }: IDSHeaderIneraAdminBaseProps): React.JSX.Element;
 export declare namespace IDSHeaderIneraAdminBase {
     var displayName: string;
 }

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

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

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

@@ -5,7 +5,7 @@ export interface IDSHeaderIneraAdminItemBaseProps extends HTMLAttributes<HTMLEle
     separatorLeft?: boolean;
     icon?: string;
 }
-export declare function IDSHeaderIneraAdminItemBase({ mobile, unresponsive, separatorLeft, icon, children, ...props }: IDSHeaderIneraAdminItemBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdminItemBase({ mobile, unresponsive, separatorLeft, icon, children, ...props }: IDSHeaderIneraAdminItemBaseProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraAdminItemBase {
     var displayName: string;
 }

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

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

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

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

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

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

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

@@ -6,7 +6,7 @@ interface IDSHeaderIneraAdminMenuMobileProps extends HTMLAttributes<HTMLElement>
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare function IDSHeaderIneraAdminMenuMobile({ srLabel, expanded, persistent, children, onExpanded, onClosed, ...props }: IDSHeaderIneraAdminMenuMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdminMenuMobile({ srLabel, expanded, persistent, children, onExpanded, onClosed, ...props }: IDSHeaderIneraAdminMenuMobileProps): import("react").JSX.Element;
 export declare namespace IDSHeaderIneraAdminMenuMobile {
     var displayName: string;
 }

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

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

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

@@ -1,11 +1,12 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeaderIneraAdminNavBase({ children, unresponsive = false, mobileOnly = false, srLabel = "Huvudmeny", ...props }) {
+function IDSHeaderIneraAdminNavBase({ children, unresponsive = false, mobileOnly = false, desktopOnly = false, srLabel = "Huvudmeny", ...props }) {
     return (jsx("nav", { className: clsx("ids-header-inera-admin-nav", {
             "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 }) }));
+            "ids-header-inera-admin-nav--mobile-only": mobileOnly,
+            "ids-header-inera-admin-nav--desktop-only": desktopOnly
+        }), "aria-label": srLabel, ...props, children: jsx("div", { className: "ids-header-inera-admin-nav__inner", children: children }) }));
 }
 IDSHeaderIneraAdminNavBase.displayName = "IDSHeaderIneraAdminNavBase";
 

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

@@ -16,7 +16,7 @@ export interface IDSHeaderIneraAdminNavItemBaseProps extends HTMLAttributes<HTML
     unresponsive?: boolean;
     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 function IDSHeaderIneraAdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client, ...props }: IDSHeaderIneraAdminNavItemBaseProps): React.JSX.Element;
 export declare namespace IDSHeaderIneraAdminNavItemBase {
     var displayName: string;
 }

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

@@ -1,6 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useId } from 'react';
+import { useId } from 'react';
 import clsx from 'clsx';
+import { IDSHeaderIneraAdminNavItemLink } from './header-inera-admin-nav-item-link.js';
 
 function IDSHeaderIneraAdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, buttonRef, onToggleItem, unresponsive, client = false, ...props }) {
     const itemId = `header-inera-admin-item-${useId()}`;
@@ -13,17 +14,7 @@ function IDSHeaderIneraAdminNavItemBase({ label, active, expanded, children, col
             "ids-header-inera-admin-nav-item--unresponsive": unresponsive,
             "ids-header-inera-admin-nav-item--expanded": expanded,
             "ids-header-inera-admin-nav-item--active": active
-        }), ...props, children: [!!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-admin-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-inera-admin-nav-item__link", children: React.Children.map(children, child => {
-                    if (!React.isValidElement(child))
-                        return child;
-                    const element = child;
-                    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-admin-nav-item__menu", {
+        }), ...props, children: [!label && jsx(IDSHeaderIneraAdminNavItemLink, { active: active, children: children }), !!label && (jsx("button", { ref: buttonRef, "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-admin-nav-item__button", ...toggleHandler, children: label })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-inera-admin-nav-item__menu", {
                     "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 })] }) })] }));
 }

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

@@ -0,0 +1,10 @@
+import React from "react";
+interface IDSHeaderIneraAdminNavItemLinkProps {
+    active?: boolean;
+    children?: React.ReactNode;
+}
+export declare function IDSHeaderIneraAdminNavItemLink({ active, children }: IDSHeaderIneraAdminNavItemLinkProps): React.JSX.Element;
+export declare namespace IDSHeaderIneraAdminNavItemLink {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,19 @@
+import { jsx } from 'react/jsx-runtime';
+import React from 'react';
+
+function IDSHeaderIneraAdminNavItemLink({ active, children }) {
+    return (jsx("span", { className: "ids-header-inera-admin-nav-item__link", children: React.Children.map(children, child => {
+            if (!React.isValidElement(child))
+                return child;
+            const element = child;
+            if (active && !element.props["aria-current"]) {
+                return React.cloneElement(element, {
+                    "aria-current": "page"
+                });
+            }
+            return element;
+        }) }));
+}
+IDSHeaderIneraAdminNavItemLink.displayName = "IDSHeaderIneraAdminNavItemLink";
+
+export { IDSHeaderIneraAdminNavItemLink };

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from "react";
+export interface IDSHeaderIneraGeneralAvatarBaseProps extends HTMLAttributes<HTMLElement> {
+    username: string;
+    unit?: string;
+    expanded?: boolean;
+    hide?: boolean;
+    persistent?: boolean;
+    onToggleAvatar?: () => void;
+    componentRef?: React.RefObject<HTMLDivElement>;
+    menuRef?: React.RefObject<HTMLDivElement>;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
+    unresponsive?: boolean;
+    client?: boolean;
+}
+export declare function IDSHeaderIneraGeneralAvatarBase({ username, unit, children, expanded, hide, onToggleAvatar, componentRef, menuRef, buttonRef, unresponsive, client }: IDSHeaderIneraGeneralAvatarBaseProps): import("react").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralAvatarBase {
+    var displayName: string;
+}

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

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

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

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraGeneralAvatarMobileBaseProps extends HTMLAttributes<HTMLDivElement> {
+    username?: string;
+    unit?: string;
+    expanded?: boolean;
+    hide?: boolean;
+    unresponsive?: boolean;
+    onToggleMenu?: () => void;
+    componentRef?: React.RefObject<HTMLDivElement>;
+    buttonRef?: React.RefObject<HTMLButtonElement>;
+    client?: boolean;
+}
+export declare function IDSHeaderIneraGeneralAvatarMobileBase({ username, unit, expanded, hide, unresponsive, componentRef, buttonRef, children, onToggleMenu, client, ...props }: IDSHeaderIneraGeneralAvatarMobileBaseProps): import("react").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralAvatarMobileBase {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,24 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSHeaderIneraGeneralAvatarMobileBase({ username = "", unit = "", expanded, hide, unresponsive, componentRef, buttonRef, children, onToggleMenu, client = false, ...props }) {
+    if (hide)
+        return null;
+    const menuId = `header-inera-general-menu-${useId()}`;
+    const toggleHandler = client && onToggleMenu
+        ? {
+            onClick: onToggleMenu
+        }
+        : {};
+    return (jsx("div", { ...props, ref: componentRef, className: clsx("ids-header-inera-general-avatar-mobile", {
+            "ids-header-inera-general-avatar-mobile--unresponsive": unresponsive
+        }), children: jsxs("div", { className: "ids-header-inera-general-avatar-mobile__menu-wrapper", children: [jsx("button", { type: "button", ...toggleHandler, ref: buttonRef, className: clsx("ids-header-inera-general-avatar-mobile__button", {
+                        "ids-header-inera-general-avatar-mobile__button--expanded": expanded
+                    }), "aria-controls": menuId, "aria-expanded": expanded, children: jsx("div", { className: "ids-header-inera-general-avatar-mobile-content__name", title: username, children: username }) }), jsxs("div", { id: menuId, className: clsx("ids-header-inera-general-avatar-mobile__menu", {
+                        "ids-header-inera-general-avatar-mobile__menu--expanded": expanded
+                    }), children: [unit && jsx("div", { className: "ids-header-inera-general-avatar-mobile__unit", children: unit }), jsx("div", { className: "ids-header-inera-general-avatar-mobile__menu-links", children: children })] })] }) }));
+}
+IDSHeaderIneraGeneralAvatarMobileBase.displayName = "IDSHeaderIneraGeneralAvatarMobileBase";
+
+export { IDSHeaderIneraGeneralAvatarMobileBase };

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraGeneralAvatarMobileProps extends HTMLAttributes<HTMLDivElement> {
+    username?: string;
+    unit?: string;
+    expanded?: boolean;
+    persistent?: boolean;
+}
+export declare function IDSHeaderIneraGeneralAvatarMobile({ username, unit, expanded, persistent, children, ...props }: IDSHeaderIneraGeneralAvatarMobileProps): import("react").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralAvatarMobile {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,28 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { IDSHeaderIneraGeneralAvatarMobileBase } from './header-inera-general-avatar-mobile-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
+
+function IDSHeaderIneraGeneralAvatarMobile({ username = "", unit = "", expanded = false, persistent = false, children, ...props }) {
+    const headerContext = useHeaderContext();
+    if (headerContext?.hideAvatar)
+        return null;
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const componentRef = useRef(null);
+    const buttonRef = useRef(null);
+    useFocusTrap(componentRef.current, isExpanded && !persistent);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    const toggleAvatar = () => setIsExpanded(prev => !prev);
+    return (jsx(IDSHeaderIneraGeneralAvatarMobileBase, { ...props, client: true, username: username, unit: unit, expanded: isExpanded, componentRef: componentRef, buttonRef: buttonRef, onToggleMenu: username ? toggleAvatar : undefined, unresponsive: headerContext?.unresponsive ?? false, children: children }));
+}
+IDSHeaderIneraGeneralAvatarMobile.displayName = "IDSHeaderIneraGeneralAvatarMobile";
+
+export { IDSHeaderIneraGeneralAvatarMobile };

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

@@ -0,0 +1,12 @@
+import { HTMLAttributes } from "react";
+interface IDSHeaderIneraGeneralAvatarProps extends HTMLAttributes<HTMLDivElement> {
+    username?: string;
+    unit?: string;
+    expanded?: boolean;
+    persistent?: boolean;
+}
+export declare function IDSHeaderIneraGeneralAvatar({ username, unit, expanded, children, persistent, ...props }: IDSHeaderIneraGeneralAvatarProps): import("react").JSX.Element;
+export declare namespace IDSHeaderIneraGeneralAvatar {
+    var displayName: string;
+}
+export {};

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

@@ -0,0 +1,29 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState, useRef } from 'react';
+import { IDSHeaderIneraGeneralAvatarBase } from './header-inera-general-avatar-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
+import { useClickOutside } from '../utils/hooks/useClickOutside.js';
+import { useEsc } from '../utils/hooks/useEsc.js';
+import { useLinkClick } from '../utils/hooks/useLinkClick.js';
+
+function IDSHeaderIneraGeneralAvatar({ username, unit, expanded = false, children, persistent = false, ...props }) {
+    const headerContext = useHeaderContext();
+    if (headerContext?.hideAvatar)
+        return null;
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const componentRef = useRef(null);
+    const menuRef = useRef(null);
+    const buttonRef = useRef(null);
+    useFocusTrap(componentRef.current, isExpanded && !persistent);
+    const closeMenu = () => setIsExpanded(false);
+    useClickOutside(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    useEsc(closeMenu, buttonRef, componentRef, !persistent && isExpanded);
+    useLinkClick(closeMenu, componentRef, buttonRef, !persistent && isExpanded);
+    const toggleAvatar = () => setIsExpanded(prev => !prev);
+    return (jsx(IDSHeaderIneraGeneralAvatarBase, { ...props, client: true, username: username, unit: unit, children: children, componentRef: componentRef, menuRef: menuRef, buttonRef: buttonRef, expanded: isExpanded, onToggleAvatar: toggleAvatar, unresponsive: headerContext?.unresponsive ?? false }));
+}
+IDSHeaderIneraGeneralAvatar.displayName = "IDSHeaderIneraGeneralAvatar";
+
+export { IDSHeaderIneraGeneralAvatar };

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

@@ -8,8 +8,9 @@ interface IDSHeaderIneraGeneralBaseProps extends React.HTMLAttributes<HTMLDivEle
     mobileMenu?: ReactNode;
     skipToContent?: ReactNode;
     logo?: ReactNode;
+    avatar?: ReactNode;
 }
-export declare function IDSHeaderIneraGeneralBase({ brandLink, brandText, unresponsive, items, mobileMenu, skipToContent, className, children, ...props }: IDSHeaderIneraGeneralBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraGeneralBase({ brandLink, brandText, unresponsive, items, avatar, mobileMenu, skipToContent, className, children, ...props }: IDSHeaderIneraGeneralBaseProps): React.JSX.Element;
 export declare namespace IDSHeaderIneraGeneralBase {
     var displayName: string;
 }

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

@@ -2,10 +2,10 @@ 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 }) {
+function IDSHeaderIneraGeneralBase({ brandLink, brandText = "Logotyp inera", unresponsive = false, items, avatar, 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] })] }));
+        }, 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, " ", avatar, " ", mobileMenu && jsx("div", { className: "ids-header-inera-general__mobile-menu", children: mobileMenu })] })] }), children] })] }));
 }
 IDSHeaderIneraGeneralBase.displayName = "IDSHeaderIneraGeneralBase";
 

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

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

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

@@ -2,11 +2,11 @@ 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--separator": separatorLeft,
             "ids-header-inera-general-item--unresponsive": unresponsive
-        }), ...props, children: [renderContent(), children] }));
+        }), ...props, children: [jsx("div", { className: "ids-header-inera-general-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }), children] }));
 }
 IDSHeaderIneraGeneralItemBase.displayName = "IDSHeaderIneraItemBase";