@inera/ids-react 8.0.0 → 8.1.0

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

@@ -1,26 +1,42 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-inera/header-inera-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-inera/header-inera-item.css';
 
-const IDSHeaderIneraItem = ({ mobile = false, separatorLeft = false, icon = "", text = "", href = "", link, onClick, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeaderIneraItem({ mobile = false, separatorLeft = false, icon = "", text = "", href = "", link, onClick, ...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
+        "ids-header-inera-item--unresponsive": headerContext.unresponsive
     });
-    const renderContent = () => (jsxs(Fragment, { children: [jsx("div", { className: "ids-header-inera-item__icon", "aria-hidden": "true", children: icon && jsx("span", { className: `ids-icon-${icon}` }) }), jsx("div", { className: "ids-header-inera-item__text", children: text })] }));
+    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)) {
-        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,
-            style: { textDecoration: "none" },
-            className: clsx(link.props.className, classNames),
-            children: renderContent()
+            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 onClick ? (jsx("button", { className: classNames, onClick: onClick, ...props, children: renderContent() })) : (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 { IDSHeaderIneraItem };

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

@@ -1,6 +1,6 @@
 "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-inera/header-inera-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
@@ -25,34 +25,21 @@ const IDSHeaderIneraNavItem = ({ label = "", active = false, expanded = false, n
     }, [expanded]);
     const renderNavItem = () => {
         if (label) {
-            return (jsxs("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: clsx("ids-header-inera-nav-item__button", {
-                    "ids-header-inera-nav-item__button--expanded": isExpanded,
-                    "ids-header-inera-nav-item__button--active": active
-                }), onClick: () => setIsExpanded(prev => !prev), children: [label, " ", notification] }));
+            return (jsxs("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: "ids-header-inera-nav-item__button", onClick: () => setIsExpanded(prev => !prev), children: [label, " ", notification] }));
         }
         else {
-            return (jsxs("span", { className: clsx("ids-header-inera-nav-item__link", {
-                    "ids-header-inera-nav-item__link--active": active
-                }), children: [children, " ", notification] }));
+            return (jsxs("span", { className: "ids-header-inera-nav-item__link", children: [children, " ", notification] }));
         }
     };
-    const renderLink = (link) => {
-        return React.isValidElement(link)
-            ? React.cloneElement(link, {
-                activeIcon: true,
-                block: true,
-                colorPreset: 2,
-                onClick: () => setIsExpanded(false)
-            })
-            : link;
-    };
     const renderContent = () => {
         if (!isExpanded)
             return null;
-        return (jsx("div", { id: contentId, className: "ids-header-inera-nav-item__menu ids-header-inera-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-inera-nav-item__menu-inner", children: [jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-nav-item__menu-col", children: col4 })] }) }));
+        return (jsx("div", { id: contentId, className: "ids-header-inera-nav-item__menu ids-header-inera-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-inera-nav-item__menu-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 })] }) }));
     };
     return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-nav-item", {
-            "ids-header-inera-nav-item--unresponsive": headerContext?.unresponsive
+            "ids-header-inera-nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-inera-nav-item--expanded": isExpanded,
+            "ids-header-inera-nav-item--active": active
         }), ...props, children: [renderNavItem(), renderContent()] }));
 };
 

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

@@ -4,4 +4,4 @@ export interface IDSHeaderIneraNavProps {
     srText?: string;
     children?: React.ReactNode;
 }
-export declare const IDSHeaderIneraNav: React.FC<IDSHeaderIneraNavProps>;
+export declare function IDSHeaderIneraNav({ srText, children, ...props }: IDSHeaderIneraNavProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,14 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/header-inera/header-inera-nav.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-inera/header-inera-nav.css';
 
-const IDSHeaderIneraNav = ({ srText = "Huvudmeny", children, ...props }) => {
-    const headerContext = useHeaderContext();
+function IDSHeaderIneraNav({ srText = "Huvudmeny", children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
     const className = clsx("ids-header-inera-nav", {
-        "ids-header-inera-nav--unresponsive": headerContext?.unresponsive
+        "ids-header-inera-nav--unresponsive": headerContext.unresponsive
     });
     return (jsx("nav", { className: className, "aria-label": srText, ...props, children: jsx("div", { className: "ids-header-inera-nav__nav-items", children: children }) }));
-};
+}
 
 export { IDSHeaderIneraNav };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode, PropsWithChildren, AnchorHTMLAttributes } from "react";
+import React, { ReactNode, AnchorHTMLAttributes } from "react";
 import "@inera/ids-design/components/header-inera/header-inera.css";
 interface IDSHeaderIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     logoHref?: string;
@@ -11,5 +11,5 @@ interface IDSHeaderIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     logo?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSHeaderInera: React.FC<PropsWithChildren<IDSHeaderIneraProps>>;
+export declare function IDSHeaderInera({ logoHref, logoProps, srLogoText, unresponsive, items, mobileMenu, skipToContent, logo, className, children, ...props }: IDSHeaderIneraProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -1,16 +1,12 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import '@inera/ids-design/components/header-inera/header-inera.css';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-inera/header-inera.css';
 
-const IDSHeaderInera = ({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, logo, className, children, ...props }) => {
-    return (jsx(HeaderProvider, { value: {
-            unresponsive,
-            hideRegionPicker: true
-        }, children: jsxs("header", { className: clsx("ids-header-inera", {
+function IDSHeaderInera({ logoHref = "", logoProps = {}, srLogoText = "Logotyp inera", unresponsive = false, items, mobileMenu, skipToContent, logo, className, children, ...props }) {
+    return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true }, children: jsxs("header", { className: clsx("ids-header-inera", {
                 "ids-header-inera--unresponsive": unresponsive
             }, className), ...props, children: [skipToContent && jsx("div", { className: "ids-header-inera__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera__inner", children: [jsxs("div", { className: "ids-header-inera__main", children: [logoHref ? (jsx("a", { href: logoHref, "aria-label": srLogoText, className: "ids-header-inera__logo", ...logoProps })) : logo ? (jsx("div", { className: "ids-header-inera__logo-custom", children: logo })) : (jsx("div", { className: "ids-header-inera__logo" })), jsxs("div", { className: "ids-header-inera__items", children: [items, " ", mobileMenu] })] }), children] })] }) }));
-};
+}
 
 export { IDSHeaderInera };

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

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

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

@@ -1,27 +1,31 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-inera-admin/header-inera-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-inera-admin/header-inera-admin-item.css';
 
-const IDSHeaderIneraAdminItem = ({ mobile = false, separatorLeft = false, icon = "", text, href = "", link, onClick, ...props }) => {
+function IDSHeaderIneraAdminItem({ mobile = false, separatorLeft = false, icon = "", text, href = "", link, onClick, ...props }) {
     const headerContext = useHeaderContext();
     const classNames = clsx("ids-header-inera-admin-item", {
         "ids-header-inera-admin-item--mobile": mobile,
-        "ids-header-inera-admin-item__separator": separatorLeft,
+        "ids-header-inera-admin-item--separator": separatorLeft,
         "ids-header-inera-admin-item--unresponsive": headerContext?.unresponsive
     });
-    const renderContent = () => (jsxs(Fragment, { children: [icon && (jsx("div", { className: "ids-header-inera-admin-item__icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-inera-admin-item__text", children: text })] }));
+    const renderContent = () => (jsx("div", { className: "ids-header-inera-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,
-            style: { textDecoration: "none" },
-            className: clsx(link.props.className, classNames),
-            children: renderContent()
+            className: clsx(link.props.className),
+            children: hasChildren ? linkProps.children : text
         });
+        return (jsxs("div", { className: classNames, children: [renderContent(), " ", newLink] }));
     }
-    return onClick ? (jsx("button", { className: classNames, onClick: onClick, ...props, children: renderContent() })) : (jsx("a", { className: classNames, href: href, style: { textDecoration: "none" }, ...props, children: renderContent() }));
-};
+    return onClick ? (jsxs("div", { className: classNames, children: [renderContent(), jsx("button", { onClick: onClick, ...props, children: text })] })) : (jsxs("div", { className: classNames, children: [renderContent(), jsx("a", { href: href, ...props, children: text })] }));
+}
 
 export { IDSHeaderIneraAdminItem };

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

@@ -1,11 +1,10 @@
 import React, { ReactNode, ReactElement } from "react";
 import "@inera/ids-design/components/header-inera-admin/header-inera-admin-nav-item.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSHeaderIneraAdminNavItemProps {
+export interface IDSHeaderIneraAdminNavItemProps {
     label?: string;
     active?: boolean;
     expanded?: boolean;
-    notification?: ReactNode;
     children?: ReactNode;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
@@ -13,4 +12,3 @@ interface IDSHeaderIneraAdminNavItemProps {
     col4?: ReactNode;
 }
 export declare const IDSHeaderIneraAdminNavItem: React.FC<IDSHeaderIneraAdminNavItemProps>;
-export {};

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

@@ -1,58 +1,45 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState, useRef, useCallback, useEffect } from 'react';
+import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav-item.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4, ...props }) => {
+const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = false, children, col1, col2, col3, col4, ...props }) => {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const containerRef = useRef(null);
     const contentId = useElementId();
-    const handleClickOutside = useCallback((event) => {
+    const handleClickOutside = (event) => {
         if (containerRef.current && !containerRef.current.contains(event.target)) {
             setIsExpanded(false);
         }
-    }, [containerRef]);
+    };
     useEffect(() => {
         setIsExpanded(expanded);
-    }, [expanded]);
-    useEffect(() => {
         document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [handleClickOutside]);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [expanded]);
     const renderNavItem = () => {
         if (label) {
-            return (jsxs("button", { className: clsx("ids-header-inera-admin-nav-item__button", {
-                    "ids-header-inera-admin-nav-item__button--expanded": isExpanded,
-                    "ids-header-inera-admin-nav-item__button--active": active
-                }), "aria-controls": contentId, "aria-expanded": isExpanded, onClick: () => setIsExpanded(!isExpanded), children: [label, notification] }));
+            return (jsx("button", { "aria-controls": contentId, "aria-expanded": isExpanded, className: "ids-header-inera-admin-nav-item__button", onClick: () => setIsExpanded(prev => !prev), children: label }));
         }
         else {
-            return (jsxs("span", { className: clsx("ids-header-inera-admin-nav-item__link", {
-                    "ids-header-inera-admin-nav-item__link--active": active
-                }), children: [children, notification] }));
+            return jsx("span", { className: "ids-header-inera-admin-nav-item__link", children: children });
         }
     };
-    const renderLink = (link) => {
-        return React.isValidElement(link)
-            ? React.cloneElement(link, {
-                activeIcon: true,
-                block: true,
-                colorPreset: 2,
-                onClick: () => setIsExpanded(false)
-            })
-            : link;
-    };
     const renderContent = () => {
         if (!isExpanded)
             return null;
-        return (jsx("div", { id: contentId, className: "ids-header-inera-admin-nav-item__menu ids-header-inera-admin-nav-item__menu--expanded", children: jsxs("div", { className: "ids-header-inera-admin-nav-item__menu-inner", children: [jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav__menu-item-wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col", children: col4 })] }) }));
+        return (jsx("div", { id: contentId, className: "ids-header-inera-admin-nav-item__menu ids-header-inera-admin-nav-item__menu--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 })] }) }));
     };
     return (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-admin-nav-item", {
-            "ids-header-inera-admin-nav-item--unresponsive": headerContext?.unresponsive
+            "ids-header-inera-admin-nav-item--unresponsive": headerContext?.unresponsive,
+            "ids-header-inera-admin-nav-item--expanded": isExpanded,
+            "ids-header-inera-admin-nav-item--active": active
         }), ...props, children: [renderNavItem(), renderContent()] }));
 };
 

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

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

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

@@ -1,15 +1,14 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav.css';
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav.css';
 
-const IDSHeaderIneraAdminNav = ({ srText = "Huvudmeny", children, ...props }) => {
+function IDSHeaderIneraAdminNav({ srText = "Huvudmeny", children, ...props }) {
     const headerContext = useHeaderContext();
     const classNames = clsx("ids-header-inera-admin-nav", {
         "ids-header-inera-admin-nav--unresponsive": headerContext?.unresponsive
     });
     return (jsx("nav", { className: classNames, "aria-label": srText, ...props, children: jsx("div", { className: "ids-header-inera-admin-nav__nav-items", children: children }) }));
-};
+}
 
 export { IDSHeaderIneraAdminNav };

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

@@ -13,4 +13,4 @@ export interface IDSHeaderIneraAdminProps extends React.HTMLAttributes<HTMLDivEl
     mobileMenu?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSHeaderIneraAdmin: React.FC<IDSHeaderIneraAdminProps>;
+export declare function IDSHeaderIneraAdmin({ brandText, unresponsive, showLogo, items, avatar, skipToContent, brandLink, srLogoText, serviceName, mobileMenu, className, children, ...props }: IDSHeaderIneraAdminProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,10 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/header-inera-admin/header-inera-admin.css';
 import clsx from 'clsx';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
+import '@inera/ids-design/components/header-inera-admin/header-inera-admin.css';
 
-const IDSHeaderIneraAdmin = ({ brandText = "", unresponsive = false, showLogo = false, items, avatar, skipToContent, brandLink, srLogoText = "Logotyp inera", serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children, ...props }) => {
+function IDSHeaderIneraAdmin({ brandText = "", unresponsive = false, showLogo = false, items, avatar, skipToContent, 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, {
@@ -17,6 +16,6 @@ const IDSHeaderIneraAdmin = ({ brandText = "", unresponsive = false, showLogo =
     return (jsx(HeaderProvider, { value: { unresponsive, hideRegionPicker: true }, children: jsxs("header", { className: clsx("ids-header-inera-admin", {
                 "ids-header-inera-admin--unresponsive": unresponsive
             }, className), ...props, children: [skipToContent && jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContent }), 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] })] }) }));
-};
+}
 
 export { IDSHeaderIneraAdmin };

package/components/link/link.d.ts

@@ -14,4 +14,4 @@ export interface IDSLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElemen
     endItem?: ReactNode;
     children?: ReactElement;
 }
-export declare const IDSLink: React.FC<IDSLinkProps>;
+export declare function IDSLink({ colorPreset, menu, footer, active, activeIcon, block, underlined, noUnderline, small, focusAnchor, endItem, children, ...props }: IDSLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;

package/components/link/link.js

@@ -1,6 +1,5 @@
-"use client";
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { useRef, isValidElement, cloneElement } from 'react';
+import { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 
 const containsIcon = (node) => {
@@ -14,14 +13,17 @@ const containsIcon = (node) => {
     }
     return false;
 };
-const IDSLink = ({ colorPreset = 0, menu = false, footer = false, active = false, activeIcon = false, block = false, underlined = false, noUnderline = false, small = false, focusAnchor = false, endItem, children, className, ...props }) => {
-    const ref = useRef(null);
+function IDSLink({ colorPreset = 0, menu = false, footer = false, active = false, activeIcon = false, block = false, underlined = false, noUnderline = false, small = false, focusAnchor = false, endItem, children, ...props }) {
+    // Ensure valid child
     if (!isValidElement(children)) {
-        console.error("IDSLink requires a single valid React element (e.g., <a> or <Link>) as a child.");
+        if (process.env.NODE_ENV !== "production") {
+            console.error("IDSLink requires a single valid React element (e.g., <a> or <Link>) as a child.");
+        }
         return null;
     }
-    const hasIcon = containsIcon(children.props.children);
-    const classNames = clsx("ids-link", colorPreset > 0 && `ids-link--color-${colorPreset}`, {
+    const innerChildren = children.props.children;
+    const hasIcon = containsIcon(innerChildren);
+    const mergedClasses = clsx("ids-link", colorPreset > 0 && `ids-link--color-${colorPreset}`, {
         "ids-link--icon": hasIcon,
         "ids-link--active-icon": activeIcon,
         "ids-link--block": block,
@@ -32,14 +34,14 @@ const IDSLink = ({ colorPreset = 0, menu = false, footer = false, active = false
         "ids-link--underlined": underlined,
         "ids-link--no-underline": noUnderline,
         "ids-focus-anchor": focusAnchor
-    }, children.props.className, className);
-    const linkContent = (jsxs(Fragment, { children: [children.props.children, endItem && jsx("span", { style: { marginLeft: "0.5rem" }, children: endItem })] }));
+    }, children.props.className, props.className);
+    const wrappedContent = (jsxs(Fragment, { children: [innerChildren, endItem && jsx("span", { style: { marginLeft: "0.5rem" }, children: endItem })] }));
     return cloneElement(children, {
+        ...children.props,
         ...props,
-        className: classNames,
-        ref,
-        children: linkContent
+        className: mergedClasses,
+        children: wrappedContent
     });
-};
+}
 
 export { IDSLink };

package/components/navigation/content/navigation-content.d.ts

@@ -1,8 +1,7 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/navigation/content/navigation-content.css";
 export interface IDSNavigationContentProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     maxHeight?: string;
-    children?: ReactNode;
 }
-export declare const IDSNavigationContent: React.FC<IDSNavigationContentProps>;
+export declare function IDSNavigationContent({ headline, maxHeight, className, children, ...props }: IDSNavigationContentProps): import("react/jsx-runtime").JSX.Element;

package/components/navigation/content/navigation-content.js

@@ -1,22 +1,15 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import '@inera/ids-design/components/navigation/content/navigation-content.css';
 import clsx from 'clsx';
 
-const IDSNavigationContent = ({ headline = "", maxHeight = "", children, className, ...props }) => {
-    const enhancedLinks = React.Children.map(children, (link, i) => {
+function IDSNavigationContent({ headline = "", maxHeight = "", className, children, ...props }) {
+    const linkWrappers = React.Children.map(children, (link, i) => {
         if (!React.isValidElement(link))
             return link;
-        const cloned = React.cloneElement(link, {
-            key: `navigation-content-link-${i}`,
-            block: true,
-            activeIcon: true,
-            noUnderline: true
-        });
-        return (jsx("div", { className: "ids-navigation-content__link-wrapper", children: cloned }, `link-wrapper-${i}`));
+        return (jsx("div", { className: "ids-navigation-content__link-wrapper", children: link }, i));
     });
-    return (jsxs("div", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline }), jsx("div", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight }, children: enhancedLinks })] })] }));
-};
+    return (jsxs("div", { className: clsx("ids-navigation-content", { "ids-navigation-content--scrollable": maxHeight }, className), ...props, children: [jsx("div", { className: "ids-navigation-content__border-top", children: jsx("div", { className: "ids-navigation-content__border-top-content" }) }), jsxs("nav", { className: "ids-navigation-content__inner", "aria-labelledby": "content-navigation-headline", id: "content-navigation-inner", children: [headline && (jsx("h2", { className: "ids-navigation-content__inner__headline", id: "content-navigation-headline", children: headline })), jsx("div", { className: "ids-navigation-content__links", style: { maxHeight: maxHeight || "auto" }, children: linkWrappers })] })] }));
+}
 
 export { IDSNavigationContent };

package/components/navigation/local/navigation-local.d.ts

@@ -1,7 +1,6 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/navigation/local/navigation-local.css";
 export interface IDSNavigationLocalProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
-    children?: ReactNode;
 }
-export declare const IDSNavigationLocal: React.FC<IDSNavigationLocalProps>;
+export declare function IDSNavigationLocal({ headline, className, children, ...props }: IDSNavigationLocalProps): import("react/jsx-runtime").JSX.Element;

package/components/navigation/local/navigation-local.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/navigation/local/navigation-local.css';
 import clsx from 'clsx';
 
-const IDSNavigationLocal = ({ headline = "", children, className, ...props }) => {
+function IDSNavigationLocal({ headline = "", className, children, ...props }) {
     return (jsxs("div", { className: clsx("ids-navigation-local", className), ...props, children: [jsx("h2", { className: "ids-navigation-local__headline", children: headline }), jsx("div", { className: "ids-navigation-local__links", children: children })] }));
-};
+}
 
 export { IDSNavigationLocal };

package/components/notification/badge/notification-badge.d.ts

@@ -1,10 +1,9 @@
-import React, { ReactNode } from "react";
+import React from "react";
 import "@inera/ids-design/components/notification-badge/notification-badge.css";
 interface IDSNotificationBadgeProps extends React.HTMLAttributes<HTMLDivElement> {
     type?: "primary" | "secondary" | "neutral" | "info" | "attention" | "success" | "error";
     icon?: string;
     onClick?: () => void;
-    children?: ReactNode;
 }
-export declare const IDSNotificationBadge: React.FC<IDSNotificationBadgeProps>;
+export declare function IDSNotificationBadge({ type, icon, onClick, className, children, ...props }: IDSNotificationBadgeProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/notification/badge/notification-badge.js

@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/notification-badge/notification-badge.css';
 import clsx from 'clsx';
 
-const IDSNotificationBadge = ({ type = "primary", icon = "", onClick, children, className, ...props }) => {
+function IDSNotificationBadge({ type = "primary", icon = "", onClick, className, children, ...props }) {
     return (jsxs("div", { className: clsx("ids-notification-badge", `ids-notification-badge--${type}`, className), onClick: onClick, ...props, children: [icon && jsx("span", { className: `ids-icon-${icon}` }), children] }));
-};
+}
 
 export { IDSNotificationBadge };

package/components/pagination/data-pagination/data-pagination.d.ts

@@ -5,7 +5,7 @@ export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElem
     from: number;
     to: number;
     of?: string;
-    total: number;
+    total: number | string;
     defaultValue?: string;
     selectId?: string;
     light?: boolean;
@@ -15,6 +15,5 @@ export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElem
     nextButton?: ReactNode;
     lastPageButton?: ReactNode;
     onSelectChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
-    children?: ReactNode;
 }
 export declare const IDSDataPagination: React.ForwardRefExoticComponent<IDSDataPaginationProps & React.RefAttributes<HTMLSelectElement>>;

package/components/pagination/data-pagination/data-pagination.js

@@ -1,4 +1,3 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useRef, useImperativeHandle } from 'react';
 import '@inera/ids-design/components/pagination/data-pagination/data-pagination.css';

package/components/pagination/list-pagination/list-pagination.d.ts

@@ -16,4 +16,4 @@ export interface IDSListPaginationProps extends React.HTMLAttributes<HTMLDivElem
     onPrevPage?: (page: number) => void;
     onNextPage?: (page: number) => void;
 }
-export declare const IDSListPagination: React.FC<IDSListPaginationProps>;
+export declare function IDSListPagination({ showing, from, to, of, total, current, pages, srCurrentPage, srGoToPage, srPrevious, srNext, onChangePage, onPrevPage, onNextPage, className, ...props }: IDSListPaginationProps): import("react/jsx-runtime").JSX.Element;

package/components/pagination/list-pagination/list-pagination.js

@@ -1,9 +1,8 @@
-"use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/pagination/list-pagination/list-pagination.css';
 import clsx from 'clsx';
 
-const IDSListPagination = ({ showing = "Visar", from = 0, to = 0, of = "av", total = 0, current = 1, pages = 1, srCurrentPage = "Aktuell sida", srGoToPage = "Gå till sida", srPrevious = "Föregående sida", srNext = "Nästa sida", className, onChangePage, onPrevPage, onNextPage, ...props }) => {
+function IDSListPagination({ showing = "Visar", from = 0, to = 0, of = "av", total = 0, current = 1, pages = 1, srCurrentPage = "Aktuell sida", srGoToPage = "Gå till sida", srPrevious = "Föregående sida", srNext = "Nästa sida", onChangePage, onPrevPage, onNextPage, className, ...props }) {
     const renderSummary = () => {
         if (from && to && total) {
             return jsx("div", { className: "ids-list-pagination__summary", children: `${showing} ${from} - ${to} ${of} ${total}` });
@@ -44,6 +43,6 @@ const IDSListPagination = ({ showing = "Visar", from = 0, to = 0, of = "av", tot
         return (jsx("nav", { children: jsx("ul", { className: "ids-list-pagination__list", children: buttonArray }) }));
     };
     return (jsxs("div", { className: clsx("ids-list-pagination", className), ...props, children: [renderSummary(), jsxs("div", { className: "ids-list-pagination__content", children: [jsx("div", { className: "ids-list-pagination__prev-button", children: renderPrevButton() }), jsx("div", { className: "ids-list-pagination__nav-buttons", children: renderButtons() }), jsx("div", { className: "ids-list-pagination__next-button", children: renderNextButton() })] })] }));
-};
+}
 
 export { IDSListPagination };