@inera/ids-react 8.2.0 → 9.0.0

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

@@ -0,0 +1,19 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hide = false, children, client = false, onToggleRegion, ...props }) {
+    if (hide)
+        return null;
+    const toggleHandler = client && onToggleRegion
+        ? {
+            onClick: onToggleRegion
+        }
+        : {};
+    return (jsxs("div", { className: clsx("ids-header-1177-pro-region-picker", {
+            "ids-header-1177-pro-region-picker--selected-region": !!children
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
+                        "ids-header-1177-pro-region-picker__button--expanded": expanded
+                    }), "aria-label": text, children: text }) })] }));
+}
+
+export { IDSHeader1177ProRegionPickerBase };

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

@@ -0,0 +1,9 @@
+import { HTMLAttributes } from "react";
+export interface IDSHeader1177ProRegionPickerMobileBaseProps extends HTMLAttributes<HTMLElement> {
+    text?: string;
+    expanded?: boolean;
+    hide?: boolean;
+    client?: boolean;
+    onToggleRegion?: () => void;
+}
+export declare function IDSHeader1177ProRegionPickerMobileBase({ text, expanded, children, hide, client, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expanded, children, hide = false, client = false, onToggleRegion, ...props }) {
+    if (hide)
+        return null;
+    const toggleHandler = client && onToggleRegion
+        ? {
+            onClick: onToggleRegion
+        }
+        : {};
+    return (jsx("div", { className: clsx("ids-header-1177-pro-region-picker-mobile", {
+            "ids-header-1177-pro-region-picker-mobile--selected-region": !!children
+        }), ...props, children: jsxs("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
+                "ids-header-1177-pro-region-picker-mobile__button--expanded": expanded
+            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
+}
+
+export { IDSHeader1177ProRegionPickerMobileBase };

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

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

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

@@ -1,36 +1,20 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import React, { useState, useRef, isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker-mobile.css';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { IDSHeader1177ProRegionPickerMobileBase } from './header-1177-pro-region-picker-mobile-base.js';
 
-const IDSHeader1177ProRegionPickerMobile = ({ text = "Välj region", expanded: propExpanded = false, onToggleRegion, children, ...props }) => {
-    const [isExpanded, setIsExpanded] = useState(propExpanded);
-    const regionIconRef = useRef(null);
+function IDSHeader1177ProRegionPickerMobile({ text, expanded = false, onToggleRegion, children, ...props }) {
+    const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
-    const toggleRegion = () => {
-        const newExpanded = !isExpanded;
-        setIsExpanded(newExpanded);
-        onToggleRegion?.(newExpanded);
-    };
-    const hasChildren = React.Children.count(children) > 0;
-    const renderChild = (child) => {
-        if (isValidElement(child)) {
-            const existingClass = child.props.className;
-            return cloneElement(child, {
-                ref: regionIconRef,
-                size: "m",
-                colorPreset: 4,
-                className: clsx(existingClass)
-            });
-        }
+    if (headerContext?.hideRegionPicker)
         return null;
+    const toggleRegion = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        onToggleRegion?.(next);
     };
-    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] })] }) }));
-};
+    return (jsx(IDSHeader1177ProRegionPickerMobileBase, { ...props, client: true, expanded: isExpanded, onToggleRegion: toggleRegion, children: children }));
+}
 
 export { IDSHeader1177ProRegionPickerMobile };

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

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

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

@@ -1,34 +1,20 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-1177-pro/header-1177-pro-region-picker.css';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useState } from 'react';
+import { IDSHeader1177ProRegionPickerBase } from './header-1177-pro-region-picker-base.js';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-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)
-            });
-        }
+function IDSHeader1177ProRegionPicker({ text, expanded = false, onToggleRegion, children, ...props }) {
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    const headerContext = useHeaderContext();
+    if (headerContext?.hideRegionPicker)
         return null;
+    const toggleRegion = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        onToggleRegion?.(next);
     };
-    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 }) })] }));
-};
+    return (jsx(IDSHeader1177ProRegionPickerBase, { ...props, client: true, expanded: isExpanded, onToggleRegion: toggleRegion, children: children }));
+}
 
 export { IDSHeader1177ProRegionPicker };

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

@@ -1,7 +1,7 @@
-import React, { ReactNode, AnchorHTMLAttributes } from "react";
-import "@inera/ids-design/components/header-1177-pro/header-1177-pro.css";
-interface IDSHeader1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
+import { ReactNode, AnchorHTMLAttributes, HTMLAttributes } from "react";
+interface IDSHeader1177ProProps extends HTMLAttributes<HTMLElement> {
     hideRegionPicker?: boolean;
+    hideAvatar?: boolean;
     unresponsive?: boolean;
     logoText?: string;
     srLogoText?: string;
@@ -14,7 +14,6 @@ interface IDSHeader1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
     items?: ReactNode;
     skipToContentLink?: ReactNode;
     mobileMenu?: ReactNode;
-    children?: ReactNode;
 }
-export declare function IDSHeader1177Pro({ hideRegionPicker, unresponsive, logoText, srLogoText, logoHref, logoProps, avatar, logoLink, regionPicker, items, skipToContentLink, mobileMenu, className, children, ...props }: IDSHeader1177ProProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177Pro({ hideRegionPicker, hideAvatar, unresponsive, children, ...props }: IDSHeader1177ProProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,12 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
-import '@inera/ids-design/components/header-1177-pro/header-1177-pro.css';
+import { IDSHeader1177ProBase } from './header-1177-pro-base.js';
 
-function 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, hideRegionPicker }, children: jsxs("header", { className: clsx("ids-header-1177-pro", {
-                "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] }) }));
+function IDSHeader1177Pro({ hideRegionPicker = false, hideAvatar = false, unresponsive = false, children, ...props }) {
+    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker, hideAvatar }, children: jsx(IDSHeader1177ProBase, { ...props, unresponsive: unresponsive, hideRegionPicker: hideRegionPicker, children: children }) }));
 }
 
 export { IDSHeader1177Pro };

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

@@ -0,0 +1,14 @@
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
+import "@inera/ids-design/components/header-inera/composite-header-inera.css";
+interface IDSHeaderIneraBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    logoHref?: string;
+    logoProps?: AnchorHTMLAttributes<HTMLAnchorElement>;
+    srLogoText?: string;
+    unresponsive?: boolean;
+    items?: ReactNode;
+    mobileMenu?: ReactNode;
+    skipToContent?: ReactNode;
+    logo?: ReactNode;
+}
+export declare function IDSHeaderIneraBase({ logoHref, logoProps, srLogoText, unresponsive, items, mobileMenu, skipToContent, logo, className, children, ...props }: IDSHeaderIneraBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/header-inera/composite-header-inera.css';
+
+function IDSHeaderIneraBase({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, logo, className, children, ...props }) {
+    return (jsxs("header", { ...props, className: clsx("ids-header-inera", {
+            "ids-header-inera--unresponsive": unresponsive
+        }, className), 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 { IDSHeaderIneraBase };

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

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

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

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

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

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

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

@@ -1,42 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { isValidElement, cloneElement } from 'react';
-import clsx from 'clsx';
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { IDSHeaderIneraItemBase } from './header-inera-item-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import '@inera/ids-design/components/header-inera/header-inera-item.css';
 
-function IDSHeaderIneraItem({ mobile = false, separatorLeft = false, icon = "", text = "", href = "", link, onClick, ...props }) {
+function IDSHeaderIneraItem({ mobile, separatorLeft, icon, children, ...props }) {
     const headerContext = useHeaderContext() || { unresponsive: false };
-    const classNames = clsx("ids-header-inera-item", {
-        "ids-header-inera-item--mobile": mobile,
-        "ids-header-inera-item--unresponsive": headerContext.unresponsive
-    });
-    const renderContent = () => (jsx("div", { className: "ids-header-inera-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
-    // FIXME 9.0 let the user provide a link or button for all react header items to align with structure for the other frameworks
-    /*  if (link && isValidElement(link)) {
-      return (
-        <div className={classNames}>
-          {renderContent()}
-          {link}
-        </div>
-      );
-    } */
-    if (link && isValidElement(link)) {
-        const linkProps = link.props;
-        const hasChildren = !!linkProps.children &&
-            (typeof linkProps.children === "string"
-                ? linkProps.children.trim().length > 0
-                : React.Children.count(linkProps.children) > 0);
-        const newLink = cloneElement(link, {
-            ...props,
-            className: clsx(link.props.className),
-            children: hasChildren ? linkProps.children : text
-        });
-        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
-    }
-    if (onClick) {
-        return (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] }));
-    }
-    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+    return (jsx(IDSHeaderIneraItemBase, { ...props, mobile: mobile, icon: icon, unresponsive: headerContext.unresponsive, children: children }));
 }
 
 export { IDSHeaderIneraItem };

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

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

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

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

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

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

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

@@ -1,54 +1,55 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx } from 'react/jsx-runtime';
 import { useState, useRef, useEffect } from 'react';
-import '@inera/ids-design/components/header-inera/header-inera-menu-mobile.css';
-import clsx from 'clsx';
+import { IDSHeaderIneraMenuMobileBase } from './header-inera-menu-mobile-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraMenuMobile = ({ expanded = false, persistent = false, srLabel = "Meny", children, onExpanded, onClosed, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeaderIneraMenuMobile({ srLabel = "Meny", expanded = false, persistent = false, children, onExpanded, onClosed, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const containerRef = useRef(null);
-    const menuRef = useRef(null);
+    const headerContext = useHeaderContext();
+    const componentRef = useRef(null);
     const handleLinkClick = () => {
         setIsExpanded(false);
         onClosed?.();
     };
     const handleClickOutside = (event) => {
-        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+        if (!persistent && componentRef.current && !componentRef.current.contains(event.target)) {
             setIsExpanded(false);
             onClosed?.();
         }
     };
     useEffect(() => {
         document.addEventListener("click", handleClickOutside);
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
+        return () => document.removeEventListener("click", handleClickOutside);
     }, [persistent]);
     useEffect(() => {
         if (!persistent && isExpanded) {
-            const links = menuRef.current?.querySelectorAll("a") || [];
+            const links = componentRef.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?.();
-        }
+    const toggleMenu = () => {
+        const next = !isExpanded;
+        setIsExpanded(next);
+        next ? onExpanded?.() : 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 }))] }));
-};
+    // Escape should also close
+    useEffect(() => {
+        if (!isExpanded || persistent)
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isExpanded, persistent]);
+    return (jsx(IDSHeaderIneraMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef }));
+}
 
 export { IDSHeaderIneraMenuMobile };

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

@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+interface IDSHeaderIneraNavBaseProps {
+    children?: ReactNode;
+    unresponsive?: boolean;
+}
+export declare function IDSHeaderIneraNavBase({ children, unresponsive, ...props }: IDSHeaderIneraNavBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

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

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

@@ -0,0 +1,17 @@
+import React, { HTMLAttributes, ReactElement } from "react";
+import { IDSLinkProps } from "../link/link";
+export interface IDSHeaderIneraNavItemBaseProps 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>;
+    onToggleItem?: () => void;
+    unresponsive?: boolean;
+}
+export declare function IDSHeaderIneraNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, ...props }: IDSHeaderIneraNavItemBaseProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,26 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSHeaderIneraNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, ...props }) {
+    const itemId = `header-inera-item-${useId()}`;
+    return (jsxs("div", { ...props, ref: componentRef, className: clsx("ids-header-inera-nav-item", {
+            "ids-header-inera-nav-item--unresponsive": unresponsive,
+            "ids-header-inera-nav-item--expanded": expanded,
+            "ids-header-inera-nav-item--active": active
+        }), children: [!!label && (jsx("button", { "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-nav-item__button", onClick: onToggleItem, children: label })), !label && (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;
+                }) })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-inera-nav-item__menu", {
+                    "ids-header-inera-nav-item__menu--expanded": expanded
+                }), children: jsxs("div", { className: "ids-header-inera-nav-item__menu-content", children: [jsx("div", { className: "ids-header-inera-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col-4", children: col4 })] }) })] }));
+}
+
+export { IDSHeaderIneraNavItemBase };

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

@@ -1,15 +1,15 @@
-import React, { ReactNode, ReactElement } from "react";
-import "@inera/ids-design/components/header-inera/header-inera-nav-item.css";
+import { HTMLAttributes, ReactElement } from "react";
 import { IDSLinkProps } from "../link/link";
-export interface IDSHeaderIneraNavItemProps {
+export interface IDSHeaderIneraNavItemProps extends HTMLAttributes<HTMLElement> {
     label?: string;
     active?: boolean;
     expanded?: boolean;
-    notification?: ReactNode;
-    children?: ReactNode;
+    children?: React.ReactNode;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
-    col4?: ReactNode;
+    col4?: React.ReactNode;
+    itemId?: string;
+    unresponsive?: boolean;
 }
-export declare const IDSHeaderIneraNavItem: React.FC<IDSHeaderIneraNavItemProps>;
+export declare function IDSHeaderIneraNavItem({ expanded, ...props }: IDSHeaderIneraNavItemProps): import("react/jsx-runtime").JSX.Element;