@inera/ids-react 7.2.0 → 8.0.0

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

@@ -1,35 +1,47 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { useState, useRef, useEffect } from 'react';
+import { useId, useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/header-inera-admin/header-inera-admin-avatar.css';
-import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import clsx from 'clsx';
+import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdminAvatar = ({ username = "", unit = "", maxwidth = "", onExpanded, onClosed, children }) => {
+const IDSHeaderIneraAdminAvatar = ({ username, unit, expanded = false, children, persistent = false, ...props }) => {
+    const dropdownId = useId();
+    const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
-    const [expanded, setExpanded] = useState(false);
-    const ref = useRef(null);
+    const containerRef = useRef(null);
+    const dropdownRef = useRef(null);
+    const toggleExpanded = () => setIsExpanded(prev => !prev);
+    const handleClickOutside = (event) => {
+        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+        }
+    };
     useEffect(() => {
-        const handleClickOutside = (event) => {
-            if (ref.current && !ref.current.contains(event.target)) {
-                if (expanded)
-                    toggleExpanded();
-            }
+        document.addEventListener("mousedown", handleClickOutside);
+        return () => {
+            document.removeEventListener("mousedown", handleClickOutside);
         };
-        document.addEventListener("click", handleClickOutside);
-        return () => document.removeEventListener("click", handleClickOutside);
-    }, [expanded]);
-    const toggleExpanded = () => {
-        const newExpanded = !expanded;
-        setExpanded(newExpanded);
-        newExpanded ? onExpanded?.() : onClosed?.();
+    }, [persistent]);
+    const handleLinkClick = () => {
+        setIsExpanded(false);
     };
-    return (jsx("div", { ref: ref, className: clsx("ids-header-inera-admin-avatar", {
-            "ids-header-inera-admin-avatar--fluid": headerContext?.fluid,
+    useEffect(() => {
+        if (!persistent && isExpanded) {
+            const links = dropdownRef.current?.querySelectorAll("a") || [];
+            links.forEach(link => link.addEventListener("click", handleLinkClick));
+            return () => {
+                links.forEach(link => link.removeEventListener("click", handleLinkClick));
+            };
+        }
+    }, [isExpanded, persistent]);
+    return (jsx("div", { ref: containerRef, className: clsx("ids-header-inera-admin-avatar", {
             "ids-header-inera-admin-avatar--unresponsive": headerContext?.unresponsive
-        }), children: jsxs("div", { className: "ids-header-inera-admin-avatar__inner", children: [jsxs("button", { "aria-expanded": expanded, onClick: toggleExpanded, className: "ids-header-inera-admin-avatar__button", children: [jsxs("div", { className: "ids-header-inera-admin-avatar__button-main", children: [jsx("div", { className: "ids-header-inera-admin-avatar__username", style: maxwidth ? { maxWidth: maxwidth } : undefined, children: username }), jsx("div", { className: "ids-header-inera-admin-avatar__unit", style: maxwidth ? { maxWidth: maxwidth } : undefined, children: unit })] }), jsx("div", { className: clsx("ids-header-inera-admin-avatar__chevron", {
-                                "ids-header-inera-admin-avatar__chevron--expanded": expanded
-                            }) })] }), expanded && jsx("div", { className: "ids-header-inera-admin-avatar__menu", children: children })] }) }));
+        }), ...props, children: jsxs("div", { className: "ids-header-inera-admin-avatar__menu-wrapper", children: [jsxs("button", { className: clsx("ids-header-inera-admin-avatar__button", {
+                        "ids-header-inera-admin-avatar__button--expanded": isExpanded
+                    }), onClick: toggleExpanded, "aria-controls": dropdownId, "aria-expanded": isExpanded, children: [jsx("div", { className: "ids-header-inera-admin-avatar__name", title: username, children: username }), unit && (jsx("div", { className: "ids-header-inera-admin-avatar__unit", title: unit, children: unit }))] }), jsx("div", { ref: dropdownRef, id: dropdownId, className: clsx("ids-header-inera-admin-avatar__menu", {
+                        "ids-header-inera-admin-avatar__menu--expanded": isExpanded
+                    }), children: children && jsx("div", { className: "ids-header-inera-admin-avatar__menu-links", children: children }) })] }) }));
 };
 
 export { IDSHeaderIneraAdminAvatar };

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

@@ -12,7 +12,7 @@ const IDSHeaderIneraAdminItem = ({ mobile = false, separatorLeft = false, icon =
         "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-label": text, children: jsx("span", { className: `ids-icon-${icon}` }) })), jsx("div", { className: "ids-header-inera-admin-item__text", children: text })] }));
+    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 })] }));
     if (link && isValidElement(link)) {
         return cloneElement(link, {
             ...props,

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

@@ -0,0 +1,11 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/header-inera-admin/header-inera-admin-menu-mobile.css";
+interface IDSHeaderIneraAdminMenuMobileProps {
+    srLabel?: string;
+    persistent?: boolean;
+    children?: ReactNode;
+    onExpanded?: () => void;
+    onClosed?: () => void;
+}
+export declare const IDSHeaderIneraAdminMenuMobile: React.FC<IDSHeaderIneraAdminMenuMobileProps>;
+export {};

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

@@ -0,0 +1,53 @@
+"use client";
+import { jsxs, 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 { 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);
+    const headerContext = useHeaderContext();
+    const containerRef = useRef(null);
+    const menuRef = useRef(null);
+    const handleLinkClick = () => {
+        setIsExpanded(false);
+        onClosed?.();
+    };
+    const handleClickOutside = (event) => {
+        if (!persistent && containerRef.current && !containerRef.current.contains(event.target)) {
+            setIsExpanded(false);
+            onClosed?.();
+        }
+    };
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => {
+            document.removeEventListener("click", handleClickOutside);
+        };
+    }, [persistent]);
+    useEffect(() => {
+        if (!persistent && isExpanded) {
+            const links = menuRef.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?.();
+        }
+    };
+    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 }))] }));
+};
+
+export { IDSHeaderIneraAdminMenuMobile };

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useCallback, useEffect } from 'react';
+import React, { useState, useRef, useCallback, 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 }) => {
+const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = false, notification, children, col1, col2, col3, col4, ...props }) => {
     const headerContext = useHeaderContext();
     const [isExpanded, setIsExpanded] = useState(expanded);
     const containerRef = useRef(null);
@@ -37,8 +37,8 @@ const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = fal
         }
     };
     const renderLink = (link) => {
-        return React__default.isValidElement(link)
-            ? React__default.cloneElement(link, {
+        return React.isValidElement(link)
+            ? React.cloneElement(link, {
                 activeIcon: true,
                 block: true,
                 colorPreset: 2,
@@ -49,14 +49,11 @@ const IDSHeaderIneraAdminNavItem = ({ label = "", active = false, expanded = fal
     const renderContent = () => {
         if (!isExpanded)
             return null;
-        return (jsx("div", { id: contentId, className: "ids-header-inera-admin-nav-item__content", children: jsxs("div", { className: clsx("ids-header-inera-admin-nav-item__content-inner", {
-                    "ids-header-inera-admin-nav-item__content-inner--fluid": headerContext?.fluid
-                }), children: [jsx("div", { className: "ids-header-inera-admin-nav-item__content-col", children: col1?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__content-col", children: col2?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__content-col", children: col3?.map((link, idx) => (jsx("div", { className: "ids-header-inera-admin-nav-item__wrapper", children: renderLink(link) }, idx))) }), jsx("div", { className: "ids-header-inera-admin-nav-item__content-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-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 (jsxs("div", { ref: containerRef, className: clsx("ids-header-inera-admin-nav-item", {
-            "ids-header-inera-admin-nav-item--fluid": headerContext?.fluid,
             "ids-header-inera-admin-nav-item--unresponsive": headerContext?.unresponsive
-        }), children: [renderNavItem(), renderContent()] }));
+        }), ...props, children: [renderNavItem(), renderContent()] }));
 };
 
 export { IDSHeaderIneraAdminNavItem };

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

@@ -4,13 +4,12 @@ import '@inera/ids-design/components/header-inera-admin/header-inera-admin-nav.c
 import clsx from 'clsx';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdminNav = ({ srText = "Huvudmeny", children }) => {
+const IDSHeaderIneraAdminNav = ({ srText = "Huvudmeny", children, ...props }) => {
     const headerContext = useHeaderContext();
     const classNames = clsx("ids-header-inera-admin-nav", {
-        "ids-header-inera-admin-nav--fluid": headerContext?.fluid,
         "ids-header-inera-admin-nav--unresponsive": headerContext?.unresponsive
     });
-    return (jsx("nav", { className: classNames, "aria-label": srText, children: jsx("div", { className: "ids-header-inera-admin-nav__nav-items", children: children }) }));
+    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

@@ -3,7 +3,7 @@ import "@inera/ids-design/components/header-inera-admin/header-inera-admin.css";
 export interface IDSHeaderIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     brandText?: string;
     serviceName?: string;
-    fluid?: boolean;
+    srLogoText?: string;
     unresponsive?: boolean;
     showLogo?: boolean;
     items?: ReactNode;

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

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/header-inera-admin/header-inera-admin.css';
 import clsx from 'clsx';
 import { HeaderProvider } from '../utils/contexts/HeaderContext.js';
 
-const IDSHeaderIneraAdmin = ({ brandText = "", fluid = false, unresponsive = false, showLogo = false, items, avatar, skipToContent, brandLink, serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children }) => {
+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 }) => {
     const renderBrandText = () => {
         if (brandLink && isValidElement(brandLink)) {
             return (jsx("span", { className: "ids-header-inera-admin__brand-link", children: cloneElement(brandLink, {
@@ -14,10 +14,9 @@ const IDSHeaderIneraAdmin = ({ brandText = "", fluid = false, unresponsive = fal
         }
         return null;
     };
-    return (jsx(HeaderProvider, { value: { unresponsive, fluid, hideRegionPicker: true, regionPickerText: "" }, children: jsxs("header", { className: clsx("ids-header-inera-admin", {
-                "ids-header-inera-admin--unresponsive": unresponsive,
-                "ids-header-inera-admin--fluid": fluid
-            }, className), children: [skipToContent && jsx("div", { className: "ids-header-inera-admin__skip-to-content", children: skipToContent }), jsxs("div", { className: "ids-header-inera-admin__inner", 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", "aria-label": "Logotyp inera" }), 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] })] }), children] }) }));
+    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/header-patient/header-patient.d.ts

@@ -1,12 +1,12 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/header-patient/header-patient.css";
 interface IDSHeaderPatientProps extends React.HTMLAttributes<HTMLDivElement> {
-    srLabel?: string;
+    buttons?: ReactNode;
+    collapse?: boolean;
     name?: string;
+    srLabel?: string;
     ssn?: string;
-    collapse?: boolean;
     stack?: boolean;
-    buttons?: ReactNode;
     children?: ReactNode;
 }
 export declare const IDSHeaderPatient: React.FC<IDSHeaderPatientProps>;

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

@@ -4,7 +4,7 @@ import { useMemo } from 'react';
 import '@inera/ids-design/components/header-patient/header-patient.css';
 import { clsx } from 'clsx';
 
-const IDSHeaderPatient = ({ srLabel = "", name = "", ssn = "", collapse = false, stack = false, buttons, className, children }) => {
+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;
@@ -15,7 +15,7 @@ const IDSHeaderPatient = ({ srLabel = "", name = "", ssn = "", collapse = false,
         "ids-header-patient--collapse": collapse,
         "ids-header-patient--long-name": isLong
     }, className);
-    return (jsx("section", { className: classNames, "aria-label": srLabel, 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 })] }) }));
+    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/link/link.d.ts

@@ -1,15 +1,15 @@
 import React, { ReactNode, ReactElement, AnchorHTMLAttributes } from "react";
-export type ColorPreset = 0 | 1 | 2 | 3 | 4;
+export type ColorPreset = 0 | 1 | 2 | 3;
 export interface IDSLinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "children"> {
     colorPreset?: ColorPreset;
-    light?: boolean;
     active?: boolean;
     activeIcon?: boolean;
     block?: boolean;
+    footer?: boolean;
+    menu?: boolean;
     underlined?: boolean;
     noUnderline?: boolean;
     small?: boolean;
-    large?: boolean;
     focusAnchor?: boolean;
     endItem?: ReactNode;
     children?: ReactElement;

package/components/link/link.js

@@ -14,7 +14,7 @@ const containsIcon = (node) => {
     }
     return false;
 };
-const IDSLink = ({ colorPreset = 0, light = false, active = false, activeIcon = false, block = false, underlined = false, noUnderline = false, small = false, large = false, focusAnchor = false, endItem, children, className, ...props }) => {
+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);
     if (!isValidElement(children)) {
         console.error("IDSLink requires a single valid React element (e.g., <a> or <Link>) as a child.");
@@ -24,10 +24,10 @@ const IDSLink = ({ colorPreset = 0, light = false, active = false, activeIcon =
     const classNames = clsx("ids-link", colorPreset > 0 && `ids-link--color-${colorPreset}`, {
         "ids-link--icon": hasIcon,
         "ids-link--active-icon": activeIcon,
-        "ids-link--light": light || colorPreset === 4,
         "ids-link--block": block,
+        "ids-link--menu": menu,
+        "ids-link--footer": footer,
         "ids-link--small": small,
-        "ids-link--large": large,
         "ids-link--active": active,
         "ids-link--underlined": underlined,
         "ids-link--no-underline": noUnderline,

package/components/mobile/menu/item/mobile-item.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect } from 'react';
+import React, { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/mobile-menu/mobile-menu.css';
 import clsx from 'clsx';
 import { useElementId } from '../../../utils/hooks/useElementId.js';
 
-const IDSMobileMenuItem = ({ level = 1, secondary = false, expanded = false, headline = "", link, active = false, showText = "Visa meddelande", hideText = "Dölj meddelande", children, onToggleExpansion, ...props }) => {
+const IDSMobileMenuItem = ({ level = 1, secondary = false, expanded = false, headline = "", link, active = false, showText = "Expandera", hideText = "Minimera", children, onToggleExpansion, ...props }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const subItemId = useRef(useElementId());
     const contentRef = useRef(null);
@@ -50,8 +50,8 @@ const IDSMobileMenuItem = ({ level = 1, secondary = false, expanded = false, hea
             return link;
         }
     };
-    return (jsxs("div", { ref: contentRef, className: clsx(getItemLevelClass(), isExpanded && "ids-mobile-menu-item--expanded", active && "ids-mobile-menu-item--active", secondary && "ids-mobile-menu-item--secondary"), ...props, children: [jsx("div", { className: `ids-mobile-menu-item__inner ${level && "ids-mobile-menu-item__inner--level-" + level}`, children: renderItem() }), jsx("div", { id: subItemId.current, className: "ids-mobile-menu-item__sub-items", children: React__default.Children.map(children, child => React__default.isValidElement(child)
-                    ? React__default.cloneElement(child, {
+    return (jsxs("div", { ref: contentRef, className: clsx(getItemLevelClass(), isExpanded && "ids-mobile-menu-item--expanded", active && "ids-mobile-menu-item--active", secondary && "ids-mobile-menu-item--secondary"), ...props, children: [jsx("div", { className: `ids-mobile-menu-item__inner ${level && "ids-mobile-menu-item__inner--level-" + level}`, children: renderItem() }), jsx("div", { id: subItemId.current, className: "ids-mobile-menu-item__sub-items", children: React.Children.map(children, child => React.isValidElement(child)
+                    ? React.cloneElement(child, {
                         "data-ids-sub-item": true,
                         level: level + 1
                     })

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

@@ -2,6 +2,7 @@ import React, { ReactNode } 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>;

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

@@ -1,21 +1,22 @@
 "use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default from 'react';
+import React from 'react';
 import '@inera/ids-design/components/navigation/content/navigation-content.css';
 import clsx from 'clsx';
 
-const IDSNavigationContent = ({ headline = "", children, className, ...props }) => {
-    const enhancedLinks = React__default.Children.map(children, (link, i) => {
-        if (!React__default.isValidElement(link))
+const IDSNavigationContent = ({ headline = "", maxHeight = "", children, className, ...props }) => {
+    const enhancedLinks = React.Children.map(children, (link, i) => {
+        if (!React.isValidElement(link))
             return link;
-        const cloned = React__default.cloneElement(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 (jsxs("div", { className: clsx("ids-navigation-content", 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", 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: [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 })] })] }));
 };
 
 export { IDSNavigationContent };

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, ChangeEvent } from "react";
 import "@inera/ids-design/components/pagination/data-pagination/data-pagination.css";
 export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElement> {
     label?: string;
@@ -8,17 +8,13 @@ export interface IDSDataPaginationProps extends React.HTMLAttributes<HTMLDivElem
     total: number;
     defaultValue?: string;
     selectId?: string;
-    prevId?: string;
-    nextId?: string;
     light?: boolean;
     noSelect?: boolean;
-    prevDisabled?: boolean;
-    nextDisabled?: boolean;
-    srPrevious?: string;
-    srNext?: string;
-    onNext?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onPrevious?: (event: React.MouseEvent<HTMLButtonElement>) => void;
-    onSelectChange?: (event: React.ChangeEvent<HTMLSelectElement>) => void;
+    firstPageButton?: ReactNode;
+    previousButton?: ReactNode;
+    nextButton?: ReactNode;
+    lastPageButton?: ReactNode;
+    onSelectChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
     children?: ReactNode;
 }
-export declare const IDSDataPagination: React.FC<IDSDataPaginationProps>;
+export declare const IDSDataPagination: React.ForwardRefExoticComponent<IDSDataPaginationProps & React.RefAttributes<HTMLSelectElement>>;

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

@@ -1,17 +1,17 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef } from 'react';
+import { forwardRef, useRef, useImperativeHandle } from 'react';
 import '@inera/ids-design/components/pagination/data-pagination/data-pagination.css';
 import clsx from 'clsx';
 import { useElementId } from '../../utils/hooks/useElementId.js';
 
-const IDSDataPagination = ({ label = "Rader per sida", from, to, of = "av", total, defaultValue = "", selectId = "", prevId = "", nextId = "", light = false, noSelect = false, prevDisabled = false, nextDisabled = false, srPrevious = "Föregående sida", srNext = "Nästa sida", onNext, onPrevious, onSelectChange, className, children }) => {
+const IDSDataPagination = forwardRef(({ label = "Rader per sida", from, to, of = "av", total, defaultValue = "", selectId = "", firstPageButton, previousButton, nextButton, lastPageButton, light = false, noSelect = false, onSelectChange, className, children, ...props }, ref) => {
     const summaryText = `${from} - ${to} ${of} ${total}`;
     const selectElementId = useElementId(selectId);
-    const prevRef = useRef(null);
-    const nextRef = useRef(null);
-    const selectRef = useRef(null);
-    return (jsxs("div", { className: clsx("ids-data-pagination", { "ids-data-pagination--light": light }, className), children: [!noSelect && (jsxs("div", { className: "ids-data-pagination__select", children: [jsx("label", { slot: "pagination-select", htmlFor: selectElementId, children: label }), jsx("select", { id: selectElementId, ref: selectRef, name: "data-pagination-select-options", defaultValue: defaultValue, onChange: onSelectChange, children: children })] })), jsx("div", { className: "ids-data-pagination__summary", children: summaryText }), jsxs("div", { className: "ids-data-pagination__buttons", children: [jsx("div", { className: "ids-data-pagination__prev-button", children: jsx("button", { ref: prevRef, "aria-label": srPrevious, disabled: prevDisabled, id: prevId, onClick: onPrevious }) }), jsx("div", { className: "ids-data-pagination__next-button", children: jsx("button", { ref: nextRef, "aria-label": srNext, disabled: nextDisabled, id: nextId, onClick: onNext }) })] })] }));
-};
+    const internalSelectRef = useRef(null);
+    useImperativeHandle(ref, () => internalSelectRef.current);
+    return (jsxs("div", { className: clsx("ids-data-pagination", { "ids-data-pagination--light": light }, className), ...props, children: [!noSelect && (jsxs("div", { className: "ids-data-pagination__select", children: [jsx("label", { htmlFor: selectElementId, children: label }), jsx("select", { id: selectElementId, ref: internalSelectRef, name: "data-pagination-select-options", defaultValue: defaultValue, onChange: onSelectChange, children: children })] })), jsx("div", { className: "ids-data-pagination__summary", children: summaryText }), jsxs("div", { className: "ids-data-pagination__buttons", children: [firstPageButton && jsx("div", { className: "ids-data-pagination__first-page-button", children: firstPageButton }), previousButton && jsx("div", { className: "ids-data-pagination__prev-button", children: previousButton }), nextButton && jsx("div", { className: "ids-data-pagination__next-button", children: nextButton }), lastPageButton && jsx("div", { className: "ids-data-pagination__last-page-button", children: lastPageButton })] })] }));
+});
+IDSDataPagination.displayName = "IDSDataPagination";
 
 export { IDSDataPagination };

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

@@ -3,22 +3,22 @@ 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 }) => {
+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 }) => {
     const renderSummary = () => {
         if (from && to && total) {
-            return (jsx("div", { className: "ids-list-pagination__summary", children: `${showing} ${from} - ${to} ${of} ${total}` }));
+            return jsx("div", { className: "ids-list-pagination__summary", children: `${showing} ${from} - ${to} ${of} ${total}` });
         }
         return null;
     };
     const renderPrevButton = () => {
         if (current > 1) {
-            return (jsx("button", { "aria-label": srPrevious, onClick: () => onPrevPage?.(current - 1), id: "prev-button" }));
+            return jsx("button", { "aria-label": srPrevious, onClick: () => onPrevPage?.(current - 1), id: "prev-button" });
         }
         return null;
     };
     const renderNextButton = () => {
         if (current < pages) {
-            return (jsx("button", { "aria-label": srNext, onClick: () => onNextPage?.(current + 1), id: "next-button" }));
+            return jsx("button", { "aria-label": srNext, onClick: () => onNextPage?.(current + 1), id: "next-button" });
         }
         return null;
     };
@@ -37,18 +37,13 @@ const IDSListPagination = ({ showing = "Visar", from = 0, to = 0, of = "av", tot
                         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 &&
-                    buttonArray[i - 2]?.props.hidden &&
-                    !buttonArray[i - 1]?.props.hidden
-                    ? true
-                    : undefined, children: jsx("button", { className: clsx("ids-list-pagination__button", {
+                    ].includes(i), "data-hidden-before": pages > 7 && i > 1 && buttonArray[i - 2]?.props.hidden && !buttonArray[i - 1]?.props.hidden ? true : undefined, children: jsx("button", { className: clsx("ids-list-pagination__button", {
                         "ids-list-pagination__button--current": isCurrent
                     }), "aria-label": isCurrent ? srCurrentPage : `${srGoToPage} ${i}`, onClick: () => !isCurrent && onChangePage?.(i), disabled: isCurrent, children: i }) }, i));
         }
         return (jsx("nav", { children: jsx("ul", { className: "ids-list-pagination__list", children: buttonArray }) }));
     };
-    return (jsxs("div", { className: clsx("ids-list-pagination", className), 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() })] })] }));
+    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 };

package/components/popover/popover.js

@@ -5,8 +5,10 @@ import '@inera/ids-design/components/popover/popover.css';
 import '@inera/ids-design/components/popover/popover-content.css';
 import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import clsx from 'clsx';
+import { useElementId } from '../utils/hooks/useElementId.js';
 
-const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, srCloseText = "Stäng", headline, children, className, onVisibilityChange }) => {
+const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, srCloseText = "Stäng", headline, children, className, onVisibilityChange, ...props }) => {
+    const contentId = useElementId();
     const [isVisible, setIsVisible] = useState(show);
     const [popoverContentStyle, setPopoverContentStyle] = useState({
         position: "absolute",
@@ -19,7 +21,6 @@ const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 26
     });
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
-    const topBarRef = useRef(null);
     const contentWrapperRef = useRef(null);
     const popoverContentRef = useRef(null);
     useFocusTrap(popoverContentRef.current, isVisible && !noFocusTrap);
@@ -103,12 +104,11 @@ const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 26
         return () => document.removeEventListener("keydown", handleEsc);
     }, [isVisible]);
     useEffect(() => {
-        if (topBarRef.current && contentWrapperRef.current) {
-            const topBarHeight = topBarRef.current.getBoundingClientRect().height;
+        if (contentWrapperRef.current) {
             const contentWrapperHeight = contentWrapperRef.current.getBoundingClientRect().height;
-            if (contentWrapperHeight >= maxHeight - topBarHeight) {
+            if (contentWrapperHeight >= maxHeight - 40) {
                 setPopoverContentWrapperStyle({
-                    height: `${maxHeight - topBarHeight}px`,
+                    height: `${maxHeight - 40}px`,
                     paddingRight: "1rem"
                 });
             }
@@ -119,7 +119,7 @@ const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 26
                 });
             }
         }
-    }, [topBarRef, contentWrapperRef, isVisible]);
+    }, [contentWrapperRef, isVisible]);
     useEffect(() => {
         const content = popoverContentRef?.current;
         if (!content)
@@ -186,9 +186,9 @@ const IDSPopover = ({ position = "bottom", category = "", trigger, maxWidth = 26
         }));
     }, [position, isVisible]);
     const renderCaret = (pos) => {
-        return (jsxs("div", { className: `ids-popover-content__caret ids-popover-content--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content--${pos}` })] }));
+        return (jsxs("div", { className: `ids-popover-content__caret ids-popover-content__caret--${pos}`, children: [jsx("span", { className: `ids-popover-content__caret-body ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-border ids-popover-content__caret--${pos}` }), jsx("span", { className: `ids-popover-content__caret-shadow ids-popover-content__caret--${pos}` })] }));
     };
-    return (jsxs("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible ? { "data-show": "true" } : {}), children: [jsx("span", { className: "ids-popover-trigger", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, ref: popoverContentRef, style: popoverContentStyle, "data-position": position, children: [renderCaret(position), jsxs("div", { className: "ids-popover-content__top-bar", ref: topBarRef, children: [jsx("div", { className: "ids-popover-content__headline", children: headline }), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", onClick: closePopover }) })] }), jsx("div", { className: "ids-popover-content__content-wrapper", tabIndex: 0, ref: contentWrapperRef, style: popoverContentWrapperStyle, children: jsx("div", { className: "ids-popover-content__content-wrapper-inner", children: children }) })] }))] }));
+    return (jsxs("span", { className: clsx("ids-popover", className), ref: popoverRef, "data-popover-category": category, ...(isVisible ? { "data-show": "true" } : {}), ...props, children: [jsx("span", { className: "ids-popover-trigger", "aria-haspopup": "dialog", onClick: togglePopover, onKeyDown: handleTriggerKeyDown, ref: triggerRef, children: trigger }), isVisible && (jsxs("div", { className: `ids-popover-content ${!noFocusTrap && "ids-focus-trap"}`, role: "tooltip", id: contentId, ref: popoverContentRef, style: popoverContentStyle, "data-position": position, children: [renderCaret(position), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", onClick: closePopover }) }), jsx("div", { className: "ids-popover-content__content-wrapper", tabIndex: 0, ref: contentWrapperRef, style: popoverContentWrapperStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }))] }));
 };
 
 export { IDSPopover };

package/components/progressbar/progressbar.js

@@ -3,8 +3,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/progressbar/progressbar.css';
 import clsx from 'clsx';
 
-const IDSProgressbar = ({ label = "", hideLabel = false, value = 0, srLabel = "", className }) => {
-    return (jsxs("div", { className: clsx("ids-progressbar", className), children: [hideLabel ? null : (jsxs("div", { className: "ids-progressbar__label", children: [label, " ", value, "%"] })), jsx("div", { className: "ids-progressbar__bar", role: "progressbar", "aria-label": srLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, children: value > 0 ? (jsx("div", { className: "ids-progressbar__progress", style: { width: `calc(${value}% + 0.125rem)` } })) : null })] }));
+const IDSProgressbar = ({ label = "", hideLabel = false, value = 0, srLabel = "", className, ...props }) => {
+    return (jsxs("div", { className: clsx("ids-progressbar", className), ...props, children: [hideLabel ? null : (jsxs("div", { className: "ids-progressbar__label", children: [label, " ", value, "%"] })), jsx("div", { className: "ids-progressbar__bar", role: "progressbar", "aria-label": srLabel, "aria-valuemin": 0, "aria-valuemax": 100, "aria-valuenow": value, children: value > 0 ? (jsx("div", { className: "ids-progressbar__progress", style: { width: `calc(${value}% + 0.125rem)` } })) : null })] }));
 };
 
 export { IDSProgressbar };

package/components/puff-list/puff-list-item/puff-list-item-info.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
 interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivElement> {
+    bottom?: boolean;
     children?: ReactNode;
 }
 export declare const IDSPuffListItemInfo: React.FC<IDSPuffListItemInfoProps>;

package/components/puff-list/puff-list-item/puff-list-item-info.js

@@ -1,8 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/puff-list/puff-list.css';
+import clsx from 'clsx';
 
-const IDSPuffListItemInfo = ({ children }) => {
-    return jsx("div", { className: "ids-puff-list-item__info", children: children });
+const IDSPuffListItemInfo = ({ bottom, children, ...props }) => {
+    return (jsx("div", { className: clsx("ids-puff-list-item__info", {
+            "ids-puff-list-item__info--bottom": bottom
+        }), ...props, children: children }));
 };
 
 export { IDSPuffListItemInfo };