@inera/ids-react 8.2.0 → 9.0.1

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

@@ -1,53 +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-admin/header-inera-admin-menu-mobile.css';
+import { IDSHeaderIneraAdminMenuMobileBase } from './header-inera-admin-menu-mobile-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import clsx from 'clsx';
 
-const IDSHeaderIneraAdminMenuMobile = ({ srLabel = "Meny", persistent = false, children, onExpanded, onClosed, ...props }) => {
-    const [isExpanded, setIsExpanded] = useState(false);
+function IDSHeaderIneraAdminMenuMobile({ srLabel = "Meny", expanded = false, persistent = false, children, onExpanded, onClosed, ...props }) {
     const headerContext = useHeaderContext();
-    const containerRef = useRef(null);
-    const menuRef = useRef(null);
+    const [isExpanded, setIsExpanded] = useState(expanded);
+    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", { className: "ids-header-inera-admin-menu-mobile-component", ref: containerRef, ...props, children: [jsx("button", { onClick: toggleExpanded, "aria-expanded": isExpanded, "aria-label": srLabel, className: clsx("ids-header-inera-admin-menu-mobile", {
-                    "ids-header-inera-admin-menu-mobile--unresponsive": headerContext?.unresponsive
-                }), children: jsx("div", { className: "ids-hamburger", children: jsx("span", { className: "ids-hamburger__lines" }) }) }), isExpanded && (jsx("div", { className: "ids-header-inera-admin-menu-mobile__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(IDSHeaderIneraAdminMenuMobileBase, { ...props, client: true, children: children, srLabel: srLabel, expanded: isExpanded, unresponsive: headerContext?.unresponsive, onToggleMenu: toggleMenu, componentRef: componentRef }));
+}
 
 export { IDSHeaderIneraAdminMenuMobile };

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

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

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

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

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

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

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

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import React, { useId } from 'react';
+import clsx from 'clsx';
+
+function IDSHeaderIneraAdminNavItemBase({ label, active, expanded, children, col1, col2, col3, col4, componentRef, menuRef, onToggleItem, unresponsive, client = false, ...props }) {
+    const itemId = `header-inera-admin-item-${useId()}`;
+    const toggleHandler = client && onToggleItem
+        ? {
+            onClick: onToggleItem
+        }
+        : {};
+    return (jsxs("div", { ref: componentRef, className: clsx("ids-header-inera-admin-nav-item", {
+            "ids-header-inera-admin-nav-item--unresponsive": unresponsive,
+            "ids-header-inera-admin-nav-item--expanded": expanded,
+            "ids-header-inera-admin-nav-item--active": active
+        }), ...props, children: [!!label && (jsx("button", { "aria-controls": itemId, "aria-expanded": expanded, className: "ids-header-inera-admin-nav-item__button", ...toggleHandler, children: label })), !label && (jsx("span", { className: "ids-header-inera-admin-nav-item__link", children: React.Children.map(children, child => {
+                    if (!React.isValidElement(child))
+                        return child;
+                    const element = child;
+                    if (active && !element.props["aria-current"]) {
+                        return React.cloneElement(element, {
+                            "aria-current": "page"
+                        });
+                    }
+                    return element;
+                }) })), jsx("div", { ref: menuRef, id: itemId, className: clsx("ids-header-inera-admin-nav-item__menu", {
+                    "ids-header-inera-admin-nav-item__menu--expanded": expanded
+                }), children: jsxs("div", { className: "ids-header-inera-admin-nav-item__menu-content", children: [jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col-1", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col-2", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col-3", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav__menu-item-wrapper", children: link }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__menu-col-4", children: col4 })] }) })] }));
+}
+
+export { IDSHeaderIneraAdminNavItemBase };

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

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

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

@@ -0,0 +1,10 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSHeaderIneraAdminNavItemMobileBase({ icon = "", unresponsive = false, children, ...props }) {
+    return (jsxs("div", { ...props, className: clsx("ids-header-inera-admin-nav-item-mobile", {
+            "ids-header-inera-admin-nav-item-mobile--unresponsive": unresponsive
+        }), children: [icon && (jsx("span", { className: "ids-header-inera-admin-nav-item-mobile__icon", children: jsx("span", { className: `ids-icon-${icon}` }) })), children] }));
+}
+
+export { IDSHeaderIneraAdminNavItemMobileBase };

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

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

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

@@ -0,0 +1,11 @@
+"use client";
+import { jsx } from 'react/jsx-runtime';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
+import { IDSHeaderIneraAdminNavItemMobileBase } from './header-inera-admin-nav-item-mobile-base.js';
+
+function IDSHeaderIneraAdminNavItemMobile({ icon, unresponsive, children, ...props }) {
+    const headerContext = useHeaderContext();
+    return (jsx(IDSHeaderIneraAdminNavItemMobileBase, { ...props, unresponsive: headerContext?.unresponsive, icon: icon, children: children }));
+}
+
+export { IDSHeaderIneraAdminNavItemMobile };

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

@@ -1,14 +1,15 @@
-import React, { ReactNode, ReactElement } from "react";
-import "@inera/ids-design/components/header-inera-admin/header-inera-admin-nav-item.css";
+import { HTMLAttributes, ReactElement } from "react";
 import { IDSLinkProps } from "../link/link";
-export interface IDSHeaderIneraAdminNavItemProps {
+export interface IDSHeaderIneraAdminNavItemProps extends HTMLAttributes<HTMLElement> {
     label?: string;
     active?: boolean;
     expanded?: boolean;
-    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 IDSHeaderIneraAdminNavItem: React.FC<IDSHeaderIneraAdminNavItemProps>;
+export declare function IDSHeaderIneraAdminNavItem({ expanded, ...props }: IDSHeaderIneraAdminNavItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,46 +1,56 @@
 "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-admin/header-inera-admin-nav-item.css';
-import clsx from 'clsx';
+import { IDSHeaderIneraAdminNavItemBase } from './header-inera-admin-nav-item-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = false, children, col1, col2, col3, col4, ...props }) => {
+function IDSHeaderIneraAdminNavItem({ expanded = false, ...props }) {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const containerRef = useRef(null);
-    const contentId = useElementId();
-    const handleClickOutside = (event) => {
-        if (containerRef.current && !containerRef.current.contains(event.target)) {
-            setIsExpanded(false);
-        }
-    };
+    const componentRef = useRef(null);
+    const menuRef = useRef(null);
     useEffect(() => {
         setIsExpanded(expanded);
-        document.addEventListener("click", handleClickOutside);
-        return () => {
-            document.removeEventListener("click", handleClickOutside);
-        };
     }, [expanded]);
-    const renderNavItem = () => {
-        if (label) {
-            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 jsx("span", { className: "ids-header-inera-admin-nav-item__link", children: children });
-        }
-    };
-    const renderContent = () => {
+    // close when clicking outside the menu
+    useEffect(() => {
+        const onClickOutside = (event) => {
+            if (componentRef.current && !componentRef.current.contains(event.target)) {
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener("click", onClickOutside);
+        return () => document.removeEventListener("click", onClickOutside);
+    }, []);
+    // close when clicking any link inside the menu
+    useEffect(() => {
+        const menuEl = menuRef.current;
+        if (!menuEl)
+            return;
+        const onMenuClick = (event) => {
+            const target = event.target;
+            const anchor = target.closest("a");
+            if (anchor && menuEl.contains(anchor)) {
+                setIsExpanded(false);
+            }
+        };
+        menuEl.addEventListener("click", onMenuClick);
+        return () => menuEl.removeEventListener("click", onMenuClick);
+    }, [menuRef]);
+    // Escape should also close
+    useEffect(() => {
         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-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--expanded": isExpanded,
-            "ids-header-inera-admin-nav-item--active": active
-        }), ...props, children: [renderNavItem(), renderContent()] }));
-};
+            return;
+        const handleKeyDown = (event) => {
+            if (event.key === "Escape") {
+                event.preventDefault();
+                setIsExpanded(false);
+            }
+        };
+        document.addEventListener("keydown", handleKeyDown);
+        return () => document.removeEventListener("keydown", handleKeyDown);
+    }, [isExpanded]);
+    return (jsx(IDSHeaderIneraAdminNavItemBase, { ...props, client: true, expanded: isExpanded, unresponsive: headerContext?.unresponsive, componentRef: componentRef, menuRef: menuRef, onToggleItem: () => setIsExpanded((prev) => !prev) }));
+}
 
 export { IDSHeaderIneraAdminNavItem };

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

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

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

@@ -1,14 +1,11 @@
+"use client";
 import { jsx } from 'react/jsx-runtime';
-import clsx from 'clsx';
+import { IDSHeaderIneraAdminNavBase } from './header-inera-admin-nav-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
-import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav.css';
 
-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 }) }));
+function IDSHeaderIneraAdminNav({ children, ...props }) {
+    const headerContext = useHeaderContext() || { unresponsive: false };
+    return (jsx(IDSHeaderIneraAdminNavBase, { ...props, unresponsive: headerContext.unresponsive, children: children }));
 }
 
 export { IDSHeaderIneraAdminNav };

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

@@ -1,5 +1,4 @@
 import React, { ReactNode } from "react";
-import "@inera/ids-design/components/header-inera-admin/header-inera-admin.css";
 export interface IDSHeaderIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     brandText?: string;
     serviceName?: string;
@@ -8,9 +7,9 @@ export interface IDSHeaderIneraAdminProps extends React.HTMLAttributes<HTMLDivEl
     showLogo?: boolean;
     items?: ReactNode;
     avatar?: ReactNode;
-    skipToContent?: ReactNode;
+    skipToContentLink?: ReactNode;
     brandLink?: ReactNode;
     mobileMenu?: ReactNode;
-    children?: ReactNode;
+    hideAvatar?: boolean;
 }
-export declare function IDSHeaderIneraAdmin({ brandText, unresponsive, showLogo, items, avatar, skipToContent, brandLink, srLogoText, serviceName, mobileMenu, className, children, ...props }: IDSHeaderIneraAdminProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeaderIneraAdmin({ unresponsive, hideAvatar, children, ...props }: IDSHeaderIneraAdminProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,10 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
-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-inera-admin/header-inera-admin.css';
+import { IDSHeaderIneraAdminBase } from './header-inera-admin-base.js';
 
-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, {
-                    ...brandLink.props
-                }) }));
-        }
-        return null;
-    };
-    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] })] }) }));
+function IDSHeaderIneraAdmin({ unresponsive = false, hideAvatar = false, children, ...props }) {
+    return (jsx(HeaderProvider, { value: { unresponsive, hideAvatar, hideRegionPicker: true }, children: jsx(IDSHeaderIneraAdminBase, { ...props, unresponsive: unresponsive, children: children }) }));
 }
 
 export { IDSHeaderIneraAdmin };

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

@@ -1,13 +1,11 @@
-import React, { ReactNode } from "react";
 import "@inera/ids-design/components/header-patient/header-patient.css";
 interface IDSHeaderPatientProps extends React.HTMLAttributes<HTMLDivElement> {
-    buttons?: ReactNode;
+    buttons?: React.ReactNode;
     collapse?: boolean;
     name?: string;
     srLabel?: string;
     ssn?: string;
     stack?: boolean;
-    children?: ReactNode;
 }
-export declare const IDSHeaderPatient: React.FC<IDSHeaderPatientProps>;
+export declare function IDSHeaderPatient({ srLabel, name, ssn, collapse, stack, buttons, className, children, ...props }: IDSHeaderPatientProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/header-patient/header-patient.js

@@ -1,21 +1,17 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useMemo } from 'react';
-import '@inera/ids-design/components/header-patient/header-patient.css';
 import { clsx } from 'clsx';
+import '@inera/ids-design/components/header-patient/header-patient.css';
 
-const IDSHeaderPatient = ({ srLabel = "", name = "", ssn = "", collapse = false, stack = false, buttons, className, children, ...props }) => {
-    const isLong = useMemo(() => {
-        const trimmed = name.trim();
-        const whitespaceCount = (trimmed.match(/\s/g) || []).length;
-        return whitespaceCount > 2 && trimmed.length > 20;
-    }, [name]);
+function IDSHeaderPatient({ srLabel = "", name = "", ssn = "", collapse = false, stack = false, buttons, className, children, ...props }) {
+    const trimmed = name.trim();
+    const whitespaceCount = (trimmed.match(/\s/g) || []).length;
+    const isLong = whitespaceCount > 2 && trimmed.length > 20;
     const classNames = clsx("ids-header-patient", {
         "ids-header-patient--stack": stack,
         "ids-header-patient--collapse": collapse,
         "ids-header-patient--long-name": isLong
     }, className);
     return (jsx("section", { className: classNames, "aria-label": srLabel, ...props, children: jsxs("div", { className: "ids-patient-header__inner", children: [jsxs("div", { className: "ids-header-patient__content", children: [jsxs("div", { className: "ids-header-patient__id", children: [jsx("span", { className: "ids-header-patient__name", children: name }), jsx("span", { className: "ids-header-patient__ssn", children: ssn })] }), jsx("div", { className: "ids-header-patient__info", children: children })] }), buttons && jsx("div", { className: "ids-header-patient__buttons", children: buttons })] }) }));
-};
+}
 
 export { IDSHeaderPatient };

package/components/{action-link → link}/action-link.js

@@ -1,9 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '@inera/ids-design/components/action-link/action-link.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/action-link/action-link.css';
 
 function IDSActionLink({ image, children, className, ...props }) {
-    return (jsx("div", { className: clsx("ids-action-link", className), ...props, children: jsxs("div", { className: "ids-action-link__inner", children: [jsx("div", { className: "ids-action-link__image", children: image }), children, jsx("div", { className: "ids-action-link__icon", "aria-hidden": "true" })] }) }));
+    return (jsx("div", { ...props, className: clsx("ids-action-link", className), children: jsxs("div", { className: "ids-action-link__inner", children: [jsx("div", { className: "ids-action-link__image", children: image }), children, jsx("div", { className: "ids-action-link__icon", "aria-hidden": "true" })] }) }));
 }
 
 export { IDSActionLink };

package/components/link/box-link.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/box-link/box-link.css";
+export interface IDSBoxLinkProps extends React.HTMLAttributes<HTMLDivElement> {
+    button?: ReactNode;
+}
+export declare function IDSBoxLink({ button, children, className, ...props }: IDSBoxLinkProps): import("react/jsx-runtime").JSX.Element;

package/components/link/box-link.js

@@ -0,0 +1,9 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/box-link/box-link.css';
+
+function IDSBoxLink({ button, children, className, ...props }) {
+    return (jsx("div", { ...props, className: clsx("ids-box-link", { "ids-box-link--has-button": !!button }, className), children: jsxs("div", { className: "ids-box-link__inner", children: [jsx("span", { className: "ids-box-link__link", children: children }), !!button && jsx("div", { className: "ids-box-link__button", children: button })] }) }));
+}
+
+export { IDSBoxLink };

package/components/link/link.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode, ReactElement, AnchorHTMLAttributes } from "react";
+import { ReactNode, ReactElement, AnchorHTMLAttributes } from "react";
 export type ColorPreset = 0 | 1 | 2 | 3;
 export interface IDSLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
     colorPreset?: ColorPreset;
@@ -14,4 +14,4 @@ export interface IDSLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElemen
     endItem?: ReactNode;
     children?: ReactElement;
 }
-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>>;
+export declare function IDSLink({ colorPreset, menu, footer, active, activeIcon, block, underlined, noUnderline, small, focusAnchor, endItem, className, children, ...props }: IDSLinkProps): ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;

package/components/link/link.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { isValidElement, cloneElement } from 'react';
+import { cloneElement, isValidElement } from 'react';
 import clsx from 'clsx';
 
 const containsIcon = (node) => {
@@ -13,14 +13,7 @@ const containsIcon = (node) => {
     }
     return false;
 };
-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)) {
-        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;
-    }
+function IDSLink({ colorPreset = 0, menu = false, footer = false, active = false, activeIcon = false, block = false, underlined = false, noUnderline = false, small = false, focusAnchor = false, endItem, className, children, ...props }) {
     const innerChildren = children.props.children;
     const hasIcon = containsIcon(innerChildren);
     const mergedClasses = clsx("ids-link", colorPreset > 0 && `ids-link--color-${colorPreset}`, {
@@ -34,7 +27,7 @@ function 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, props.className);
+    }, className);
     const wrappedContent = (jsxs(Fragment, { children: [innerChildren, endItem && jsx("span", { style: { marginLeft: "0.5rem" }, children: endItem })] }));
     return cloneElement(children, {
         ...children.props,

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

@@ -0,0 +1,19 @@
+import React from "react";
+import "@inera/ids-design/components/list-pagination/list-pagination.css";
+export interface IDSListPaginationLinksProps extends React.HTMLAttributes<HTMLDivElement> {
+    showing?: string;
+    from?: number;
+    to?: number;
+    of?: string;
+    total?: number;
+    current?: number;
+    pages?: number;
+    srCurrentPage?: string;
+    srGoToPage?: string;
+    srPrevious?: string;
+    srNext?: string;
+    linkPrefix?: string;
+    prevHref?: string;
+    nextHref?: string;
+}
+export declare function IDSListPaginationLinks({ showing, from, to, of, total, current, pages, srCurrentPage, srGoToPage, srPrevious, srNext, linkPrefix, prevHref, nextHref, className, ...props }: IDSListPaginationLinksProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/list-pagination/list-pagination.css';
+
+function IDSListPaginationLinks({ 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", linkPrefix, prevHref, nextHref, className, ...props }) {
+    const renderSummary = () => {
+        if (from && to && total) {
+            return jsx("div", { className: "ids-list-pagination__summary", children: `${showing} ${from} - ${to} ${of} ${total}` });
+        }
+        return null;
+    };
+    const renderPrevLink = () => {
+        if (current > 1) {
+            return jsx("a", { "aria-label": srPrevious, href: linkPrefix + (current - 1), id: "prev-link" });
+        }
+        return null;
+    };
+    const renderNextLink = () => {
+        if (current < pages) {
+            return jsx("a", { "aria-label": srNext, href: linkPrefix + (current + 1), id: "next-link" });
+        }
+        return null;
+    };
+    const renderLinks = () => {
+        const linkArray = [];
+        for (let i = 1; i <= pages; i++) {
+            const isCurrent = i === current;
+            linkArray.push(jsx("li", { className: clsx("ids-list-pagination__list-item", {
+                    "ids-list-pagination__list-item--current": isCurrent
+                }), hidden: pages > 7 &&
+                    ![
+                        1,
+                        pages,
+                        current - 1,
+                        current,
+                        current + 1,
+                        ...(current < 4 ? [2, 3, 4] : []),
+                        ...(current > pages - 3 ? [pages - 1, pages - 2, pages - 3] : [])
+                    ].includes(i), "data-hidden-before": pages > 7 && i > 1 && linkArray[i - 2]?.props.hidden && !linkArray[i - 1]?.props.hidden ? true : undefined, children: jsx("a", { className: clsx("ids-list-pagination__link", {
+                        "ids-list-pagination__link--current": isCurrent
+                    }), "aria-disabled": isCurrent, "aria-label": isCurrent ? srCurrentPage : `${srGoToPage} ${i}`, href: linkPrefix + i, children: i }) }, i));
+        }
+        return (jsx("nav", { children: jsx("ul", { className: "ids-list-pagination__list", children: linkArray }) }));
+    };
+    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-link", children: renderPrevLink() }), jsx("div", { className: "ids-list-pagination__nav-links", children: renderLinks() }), jsx("div", { className: "ids-list-pagination__next-link", children: renderNextLink() })] })] }));
+}
+
+export { IDSListPaginationLinks };

package/components/{pagination/list-pagination → list-pagination}/list-pagination.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import "@inera/ids-design/components/pagination/list-pagination/list-pagination.css";
+import "@inera/ids-design/components/list-pagination/list-pagination.css";
 export interface IDSListPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     showing?: string;
     from?: number;
@@ -12,8 +12,9 @@ export interface IDSListPaginationProps extends React.HTMLAttributes<HTMLDivElem
     srGoToPage?: string;
     srPrevious?: string;
     srNext?: string;
+    srNav?: string;
     onChangePage?: (page: number) => void;
     onPrevPage?: (page: number) => void;
     onNextPage?: (page: number) => void;
 }
-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;
+export declare function IDSListPagination({ showing, from, to, of, total, current, pages, srCurrentPage, srGoToPage, srPrevious, srNext, srNav, onChangePage, onPrevPage, onNextPage, className, ...props }: IDSListPaginationProps): import("react/jsx-runtime").JSX.Element;