@inera/ids-react 8.0.0 → 8.2.0

package/components/grid/column.js

@@ -1,13 +1,12 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 import { useRef } from 'react';
 import '@inera/ids-design/components/grid/column/column.css';
 import clsx from 'clsx';
 
-const IDSColumn = ({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) => {
+function IDSColumn({ cols, s, m, offset, sOffset, mOffset, alignSelf, className, children, style, ...props }) {
     const colRef = useRef(null);
     const classNames = clsx("ids-col", cols && `ids-col--${cols}`, s && `ids-col--s-${s}`, m && `ids-col--m-${m}`, offset && `ids-col--offset-${offset}`, sOffset && `ids-col--s-offset-${sOffset}`, mOffset && `ids-col--m-offset-${mOffset}`, alignSelf && `ids-col--align-${alignSelf}`, className);
     return (jsx("div", { ref: colRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+}
 
 export { IDSColumn };

package/components/grid/container.d.ts

@@ -1,8 +1,10 @@
-import React, { ReactNode } from "react";
+import { ReactNode, HTMLAttributes } from "react";
 import "@inera/ids-design/components/grid/container/container.css";
-export interface IDSContainerProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSContainerProps extends HTMLAttributes<HTMLDivElement> {
     width?: string;
+    maxWidth?: string;
     gutterless?: boolean;
+    rowGap?: string;
     children?: ReactNode;
 }
-export declare const IDSContainer: React.FC<IDSContainerProps>;
+export declare const IDSContainer: import("react").ForwardRefExoticComponent<IDSContainerProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid/container.js

@@ -1,24 +1,17 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/grid/container/container.css';
 import clsx from 'clsx';
 
-const IDSContainer = ({ width = "", gutterless = false, children, className, style, ...props }) => {
-    const containerRef = useRef(null);
-    const classNames = clsx("ids-container", gutterless && `ids-container--gutterless-${gutterless}`, className);
-    useEffect(() => {
-        const el = containerRef.current;
-        if (el) {
-            if (width) {
-                el.style.maxWidth = `${width}px`;
-            }
-            else {
-                el.style.maxWidth = "";
-            }
-        }
-    }, [width]);
-    return (jsx("div", { ref: containerRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+const IDSContainer = forwardRef(({ gutterless = false, width, maxWidth, rowGap, children, className, style, ...props }, ref) => {
+    const mergedStyle = {
+        ...style,
+        width: width ?? style?.width,
+        maxWidth: maxWidth ?? style?.maxWidth,
+        rowGap: rowGap ?? style?.rowGap
+    };
+    return (jsx("div", { ref: ref, className: clsx("ids-container", { "ids-container--gutterless": gutterless }, className), style: mergedStyle, ...props, children: children }));
+});
+IDSContainer.displayName = "IDSContainer";
 
 export { IDSContainer };

package/components/grid/row.d.ts

@@ -1,9 +1,9 @@
-import React, { ReactNode } from "react";
+import { ReactNode, HTMLAttributes } from "react";
 import "@inera/ids-design/components/grid/row/row.css";
-export interface IDSRowProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSRowProps extends HTMLAttributes<HTMLDivElement> {
+    gap?: string;
     align?: "start" | "center" | "end" | "baseline" | "stretch";
     justify?: "start" | "center" | "end" | "space-between" | "space-around";
-    gap?: string;
     children?: ReactNode;
 }
-export declare const IDSRow: React.FC<IDSRowProps>;
+export declare const IDSRow: import("react").ForwardRefExoticComponent<IDSRowProps & import("react").RefAttributes<HTMLDivElement>>;

package/components/grid/row.js

@@ -1,18 +1,13 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/grid/row/row.css';
 import clsx from 'clsx';
 
-const IDSRow = ({ align, justify, gap, className, children, style, ...props }) => {
-    const rowRef = useRef(null);
+const IDSRow = forwardRef(({ gap, align, justify, children, className, style, ...props }, ref) => {
     const classNames = clsx("ids-row", align && `ids-row--align-${align}`, justify && `ids-row--justify-${justify}`, className);
-    useEffect(() => {
-        if (rowRef.current) {
-            rowRef.current.style.gap = gap ?? "";
-        }
-    }, [gap]);
-    return (jsx("div", { ref: rowRef, className: classNames, style: { ...style }, ...props, children: children }));
-};
+    const mergedStyle = { ...style, gap: gap ?? style?.gap };
+    return (jsx("div", { ref: ref, className: classNames, style: mergedStyle, ...props, children: children }));
+});
+IDSRow.displayName = "IDSRow";
 
 export { IDSRow };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, PropsWithChildren, HTMLAttributes } from "react";
+import { ReactNode, HTMLAttributes, PropsWithChildren } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-item.css";
 interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
     mobile?: boolean;
@@ -9,5 +9,5 @@ interface IDSHeader1177ItemProps extends HTMLAttributes<HTMLElement> {
     link?: ReactNode;
     onClick?: () => void;
 }
-export declare const IDSHeader1177Item: React.FC<PropsWithChildren<IDSHeader1177ItemProps>>;
+export declare function IDSHeader1177Item({ mobile, keepTextOnMobile, text, href, icon, link, onClick, ...props }: PropsWithChildren<IDSHeader1177ItemProps>): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,29 +1,34 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
-import '@inera/ids-design/components/header-1177/header-1177-item.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-1177/header-1177-item.css';
 
-const IDSHeader1177Item = ({ mobile = false, keepTextOnMobile = false, text = "", href = "", icon, link, onClick, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeader1177Item({ mobile = false, keepTextOnMobile = false, text = "", href = "", icon, link, onClick, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
     const classNames = clsx("ids-header-1177-item", {
-        "ids-header-1177-item--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177-item--unresponsive": headerContext.unresponsive,
         "ids-header-1177-item--mobile": mobile,
         "ids-header-1177-item--keep-text": keepTextOnMobile
     });
-    const renderContent = () => (jsxs(Fragment, { children: [icon && (jsx("div", { className: "ids-header-1177-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-1177-item-text", children: text })] }));
+    const renderContent = () => (jsx("div", { className: "ids-header-1177-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     if (link && isValidElement(link)) {
-        return cloneElement(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, classNames),
-            children: renderContent()
+            className: clsx(linkProps.className),
+            children: hasChildren ? linkProps.children : text
         });
+        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
     }
     if (onClick) {
-        return (jsx("button", { className: classNames, onClick: onClick, style: { cursor: "pointer" }, ...props, children: renderContent() }));
+        return (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] }));
     }
-    return (jsx("a", { className: classNames, href: href, ...props, children: renderContent() }));
-};
+    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+}
 
 export { IDSHeader1177Item };

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

@@ -1,6 +1,6 @@
 "use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { isValidElement } from 'react';
 import '@inera/ids-design/components/header-1177/header-1177-nav-item-mobile.css';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import clsx from 'clsx';
@@ -11,17 +11,12 @@ const IDSHeader1177NavItemMobile = ({ text = "", href = "", icon = "", link, chi
         "ids-header-1177-nav-item-mobile--unresponsive": headerContext?.unresponsive
     });
     const renderContent = () => {
-        return (jsxs(Fragment, { children: [icon && (jsx("span", { className: "ids-header-1177-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) })), text] }));
+        return (jsx("span", { className: "ids-header-1177-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     };
     if (link && isValidElement(link)) {
-        return cloneElement(link, {
-            ...props,
-            style: { textDecoration: "none" },
-            className: clsx(link.props.className, classNames),
-            children: renderContent()
-        });
+        return (jsxs("div", { className: classNames, children: [renderContent(), link] }));
     }
-    return (jsx("a", { className: classNames, href: href, style: { textDecoration: "none" }, ...props, children: renderContent() }));
+    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
 };
 
 export { IDSHeader1177NavItemMobile };

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

@@ -1,15 +1,15 @@
 import React, { ReactNode, ReactElement } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-nav-item.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSHeader1177NavItemProps {
+export interface IDSHeader1177NavItemProps {
+    label?: string;
     active?: boolean;
     expanded?: boolean;
-    label?: string;
+    notification?: ReactNode;
+    children?: ReactNode;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
     col4?: ReactNode;
-    children?: ReactNode;
 }
 export declare const IDSHeader1177NavItem: React.FC<IDSHeader1177NavItemProps>;
-export {};

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

@@ -1,14 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-1177/header-1177-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children, ...props }) => {
-    const [isExpanded, setIsExpanded] = useState(expanded);
+const IDSHeader1177NavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4, ...props }) => {
     const headerContext = useHeaderContext();
+    const [isExpanded, setIsExpanded] = useState(expanded);
     const containerRef = useRef(null);
+    const contentId = useElementId();
+    //FIXME click on link should also close menu
     const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
             setIsExpanded(false);
@@ -21,21 +24,24 @@ const IDSHeader1177NavItem = ({ active = false, expanded = false, label = "", co
             document.removeEventListener("click", handleClickOutside);
         };
     }, [expanded]);
-    const renderLink = (link) => {
-        return React.isValidElement(link)
-            ? React.cloneElement(link, {
-                activeIcon: true,
-                block: true,
-                colorPreset: 2,
-                onClick: () => setIsExpanded(false)
-            })
-            : link;
+    const renderNavItem = () => {
+        if (label) {
+            return (jsxs("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: "ids-header-1177-nav-item__button", onClick: () => setIsExpanded(prev => !prev), children: [label, " ", notification] }));
+        }
+        else {
+            return (jsxs("span", { className: "ids-header-1177-nav-item__link", children: [children, " ", notification] }));
+        }
+    };
+    const renderContent = () => {
+        if (!isExpanded)
+            return null;
+        return (jsx("div", { id: contentId, className: "ids-header-1177-nav-item__menu ids-header-1177-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-1177-nav-item__menu-content", children: [jsx("div", { className: "ids-header-1177-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu-col-4", children: col4 })] }) }));
     };
-    const renderDropdown = () => isExpanded && (jsx("div", { id: "ids-header-1177-nav-dropdown", className: "ids-header-1177-nav-item__menu ids-header-1177-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-1177-nav-item__menu__content", children: [jsx("div", { className: "ids-header-1177-nav-item__menu__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-nav-item__menu__content-col-4", children: col4 })] }) }));
-    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177__nav-item", {
-            "ids-header-1177__nav-item--unresponsive": headerContext?.unresponsive,
-            "ids-header-1177__nav-item--active": active || isExpanded
-        }), ...props, children: [label ? (jsx("button", { onClick: () => setIsExpanded(prev => !prev), "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-nav-dropdown", children: label })) : (children), renderDropdown()] }));
+    return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-nav-item", {
+            "ids-header-1177-nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-1177-nav-item--expanded": isExpanded,
+            "ids-header-1177-nav-item--active": active
+        }), ...props, children: [renderNavItem(), renderContent()] }));
 };
 
 export { IDSHeader1177NavItem };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177/header-1177-nav.css";
 interface IDSHeader1177NavProps {
     hideOnTablet?: boolean;
@@ -6,5 +6,5 @@ interface IDSHeader1177NavProps {
     mobileRight?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSHeader1177Nav: React.FC<IDSHeader1177NavProps>;
+export declare function IDSHeader1177Nav({ hideOnTablet, mobileLeft, mobileRight, children, ...props }: IDSHeader1177NavProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,15 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/header-1177/header-1177-nav.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeader1177Nav = ({ hideOnTablet = false, mobileLeft, mobileRight, children, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeader1177Nav({ hideOnTablet = false, mobileLeft, mobileRight, children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
     const navClass = clsx("ids-header-1177__nav", {
-        "ids-header-1177__nav--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177__nav--unresponsive": headerContext.unresponsive,
         "ids-header-1177__nav--hide-on-tablet": hideOnTablet
     });
     return (jsxs("nav", { className: navClass, ...props, children: [jsx("div", { className: "ids-header-1177__nav-inner", children: jsx("div", { className: "ids-header-1177__nav-content", children: children }) }), jsxs("div", { className: "ids-header-1177__nav-inner-mobile", children: [jsx("div", { className: "ids-header-1177__nav-inner-mobile-left", children: mobileLeft }), jsx("div", { className: "ids-header-1177__nav-inner-mobile-right", children: mobileRight })] })] }));
-};
+}
 
 export { IDSHeader1177Nav };

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

@@ -14,5 +14,5 @@ interface IDSHeader1177Props extends React.HTMLAttributes<HTMLDivElement> {
     avatar?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSHeader1177: React.FC<IDSHeader1177Props>;
+export declare function IDSHeader1177({ srLogoText, hideRegionPicker, unresponsive, logoHref, logoProps, logo, regionPicker, skipToContentLink, items, avatar, className, children, ...props }: IDSHeader1177Props): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,28 +1,15 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
 import clsx from 'clsx';
-import '@inera/ids-design/components/header-1177/header-1177.css';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-1177/header-1177.css';
 
-const IDSHeader1177 = ({ srLogoText = "Logotyp", hideRegionPicker: initialRegionPicker = false, unresponsive = false, logoHref = "", logoProps = {}, logo, regionPicker, skipToContentLink, items, avatar, className, children, ...props }) => {
-    const [hideRegionPicker, setHideRegionPicker] = useState(initialRegionPicker);
-    useRef(null);
-    useEffect(() => {
-        if (avatar) {
-            // No region picker when avatar
-            setHideRegionPicker(true);
-        }
-        else {
-            setHideRegionPicker(initialRegionPicker);
-        }
-    }, [avatar]);
+function IDSHeader1177({ srLogoText = "Logotyp", hideRegionPicker = false, unresponsive = false, logoHref = "", logoProps = {}, logo, regionPicker, skipToContentLink, items, avatar, className, children, ...props }) {
     const renderLogo = () => {
         return (jsx("div", { className: "ids-header-1177__logo-wrapper", children: jsx("div", { className: "ids-header-1177__logo", children: logo ? (jsx("span", { className: "ids-header-1177__link", children: logo })) : (jsx("a", { className: "ids-header-1177__logo-link", href: logoHref, "aria-label": srLogoText, ...logoProps })) }) }));
     };
     return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker }, children: jsxs("header", { className: clsx("ids-header-1177", {
                 "ids-header-1177--unresponsive": unresponsive
             }, className), ...props, children: [skipToContentLink && jsx("div", { className: "ids-header-1177__skip-to-content", children: skipToContentLink }), jsxs("div", { className: "ids-header-1177__container", children: [jsx("div", { className: "ids-header-1177__left" }), jsxs("div", { className: "ids-header-1177__inner", children: [jsxs("div", { className: "ids-header-1177__inner-left", children: [renderLogo(), !hideRegionPicker && regionPicker && jsx("div", { className: "ids-header-1177__region-picker", children: regionPicker })] }), jsxs("div", { className: "ids-header-1177__inner-right", children: [items, " ", avatar] })] }), jsx("div", { className: "ids-header-1177__right" })] }), children] }) }));
-};
+}
 
 export { IDSHeader1177 };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177-admin/header-1177-admin-item.css";
 interface IDSHeader1177AdminItemProps {
     mobile?: boolean;
@@ -8,5 +8,5 @@ interface IDSHeader1177AdminItemProps {
     link?: ReactNode;
     onClick?: () => void;
 }
-export declare const IDSHeader1177AdminItem: React.FC<IDSHeader1177AdminItemProps>;
+export declare function IDSHeader1177AdminItem({ mobile, href, text, icon, link, onClick, ...props }: IDSHeader1177AdminItemProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,29 +1,33 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-1177-admin/header-1177-admin-item.css';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-1177-admin/header-1177-admin-item.css';
 
-const IDSHeader1177AdminItem = ({ mobile = false, href = "", text = "", icon, link, onClick, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeader1177AdminItem({ mobile = false, href = "", text = "", icon, link, onClick, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
     const classNames = clsx("ids-header-1177-admin-item", {
-        "ids-header-1177-admin-item--unresponsive": headerContext?.unresponsive,
+        "ids-header-1177-admin-item--unresponsive": headerContext.unresponsive,
         "ids-header-1177-admin-item--mobile": mobile
     });
-    const renderContent = () => {
-        return (jsxs(Fragment, { children: [jsx("div", { className: "ids-header-1177-admin-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }), jsx("div", { className: "ids-header-1177-admin-item-text", children: text })] }));
-    };
+    const renderContent = () => (jsx("div", { className: "ids-header-1177-admin-item-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) }));
     if (link && isValidElement(link)) {
-        return cloneElement(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, classNames),
-            children: renderContent()
+            className: clsx(linkProps.className),
+            children: hasChildren ? linkProps.children : text
         });
+        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
+    }
+    if (onClick) {
+        return (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] }));
     }
-    return onClick ? (jsx("button", { className: classNames, onClick: onClick, style: {
-            cursor: "pointer"
-        }, ...props, children: renderContent() })) : (jsx("a", { className: classNames, href: href, ...props, children: renderContent() }));
-};
+    return (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+}
 
 export { IDSHeader1177AdminItem };

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

@@ -1,15 +1,15 @@
 import React, { ReactNode, ReactElement } from "react";
 import "@inera/ids-design/components/header-1177-admin/header-1177-admin-nav-item.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSHeader1177AdminNavItemProps {
+export interface IDSHeader1177AdminNavItemProps {
+    label?: string;
     active?: boolean;
     expanded?: boolean;
-    label?: string;
+    notification?: ReactNode;
+    children?: ReactNode;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
     col4?: ReactElement<IDSLinkProps>[];
-    children?: ReactNode;
 }
 export declare const IDSHeader1177AdminNavItem: React.FC<IDSHeader1177AdminNavItemProps>;
-export {};

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

@@ -1,14 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-1177-admin/header-1177-admin-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeader1177AdminNavItem = ({ active = false, expanded = false, label = "", col1, col2, col3, col4, children, ...props }) => {
+const IDSHeader1177AdminNavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4, ...props }) => {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const containerRef = useRef(null);
+    const contentId = useElementId();
+    //FIXME click on link should also close menu
     const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
             setIsExpanded(false);
@@ -21,21 +24,24 @@ const IDSHeader1177AdminNavItem = ({ active = false, expanded = false, label = "
             document.removeEventListener("click", handleClickOutside);
         };
     }, [expanded]);
-    const renderLink = (link) => {
-        return React.isValidElement(link)
-            ? React.cloneElement(link, {
-                activeIcon: true,
-                block: true,
-                menu: true,
-                onClick: () => setIsExpanded(false)
-            })
-            : link;
+    const renderNavItem = () => {
+        if (label) {
+            return (jsxs("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: "ids-header-1177-admin-nav-item__button", onClick: () => setIsExpanded(prev => !prev), children: [label, " ", notification] }));
+        }
+        else {
+            return (jsxs("span", { className: "ids-header-1177-admin-nav-item__link", children: [children, " ", notification] }));
+        }
+    };
+    const renderContent = () => {
+        if (!isExpanded)
+            return null;
+        return (jsx("div", { id: contentId, className: "ids-header-1177-admin-nav-item__menu ids-header-1177-admin-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-1177-admin-nav-item__menu-content", children: [jsx("div", { className: "ids-header-1177-admin-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-admin-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-admin-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-1177-admin-nav-item__menu-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: link }, idx))) })] }) }));
     };
-    const renderDropdown = () => isExpanded && (jsx("div", { id: "ids-header-1177-admin-nav-dropdown", className: "ids-header-1177-admin-nav-item__menu ids-header-1177-admin-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-1177-admin-nav-item__menu__content", children: [jsx("div", { className: "ids-header-1177-admin-nav-item__menu__content-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin-nav-item__menu__content-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin-nav-item__menu__content-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-1177-admin-nav-item__menu__content-col-4", children: col4?.map((link, idx) => (jsx("div", { className: "ids-header-1177-admin-nav__menu-item-wrapper", children: renderLink(link) }, idx))) })] }) }));
     return (jsxs("div", { ref: containerRef, className: clsx("ids-header-1177-admin-nav-item", {
             "ids-header-1177-admin-nav-item--unresponsive": headerContext?.unresponsive,
-            "ids-header-1177-admin-nav-item--active": active || isExpanded
-        }), ...props, children: [label ? (jsx("button", { onClick: () => setIsExpanded(prev => !prev), "aria-expanded": isExpanded, "aria-controls": "ids-header-1177-admin-nav-dropdown", children: label })) : (children), renderDropdown()] }));
+            "ids-header-1177-admin-nav-item--expanded": isExpanded,
+            "ids-header-1177-admin-nav-item--active": active
+        }), ...props, children: [renderNavItem(), renderContent()] }));
 };
 
 export { IDSHeader1177AdminNavItem };

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

@@ -1,7 +1,7 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177-admin/header-1177-admin-nav.css";
 interface IDSHeader1177AdminNavProps {
     children?: ReactNode;
 }
-export declare const IDSHeader1177AdminNav: React.FC<IDSHeader1177AdminNavProps>;
+export declare function IDSHeader1177AdminNav({ children, ...props }: IDSHeader1177AdminNavProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,14 +1,13 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/header-1177-admin/header-1177-admin-nav.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-1177-admin/header-1177-admin-nav.css';
 
-const IDSHeader1177AdminNav = ({ children, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeader1177AdminNav({ children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
     return (jsx("nav", { className: clsx("ids-header-1177-admin-nav", {
-            "ids-header-1177-admin-nav--unresponsive": headerContext?.unresponsive
+            "ids-header-1177-admin-nav--unresponsive": headerContext.unresponsive
         }), ...props, children: jsx("div", { className: "ids-header-1177-admin-nav__inner", children: jsx("div", { className: "ids-header-1177-admin-nav__items", children: children }) }) }));
-};
+}
 
 export { IDSHeader1177AdminNav };

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

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

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

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

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import { ReactNode } from "react";
 import "@inera/ids-design/components/header-1177-pro/header-1177-pro-item.css";
 interface IDSHeader1177ProItemProps {
     mobile?: boolean;
@@ -8,5 +8,5 @@ interface IDSHeader1177ProItemProps {
     link?: ReactNode;
     onClick?: () => void;
 }
-export declare const IDSHeader1177ProItem: React.FC<IDSHeader1177ProItemProps>;
+export declare function IDSHeader1177ProItem({ mobile, icon, text, href, link, onClick, ...props }: IDSHeader1177ProItemProps): import("react/jsx-runtime").JSX.Element;
 export {};