@inera/ids-react 7.2.0 → 8.1.0

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;
@@ -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 = "", fluid = false, unresponsive = false, showLogo = false, items, avatar, skipToContent, brandLink, serviceName = "EN TJÄNST FRÅN INERA", mobileMenu, className, children }) => {
+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, {
@@ -14,10 +13,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,17 +1,17 @@
 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;
 }
-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,32 +13,35 @@ 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 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--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,
         "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/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

@@ -1,7 +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;
-    children?: ReactNode;
+    maxHeight?: string;
 }
-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,21 +1,15 @@
-"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))
+function IDSNavigationContent({ headline = "", maxHeight = "", className, children, ...props }) {
+    const linkWrappers = React.Children.map(children, (link, i) => {
+        if (!React.isValidElement(link))
             return link;
-        const cloned = React__default.cloneElement(link, {
-            key: `navigation-content-link-${i}`,
-            block: 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", 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: [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

@@ -1,24 +1,19 @@
-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;
     from: number;
     to: number;
     of?: string;
-    total: number;
+    total: number | string;
     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;
-    children?: ReactNode;
+    firstPageButton?: ReactNode;
+    previousButton?: ReactNode;
+    nextButton?: ReactNode;
+    lastPageButton?: ReactNode;
+    onSelectChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
 }
-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,16 @@
-"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.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,24 +1,23 @@
-"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 }) => {
+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}` }));
+            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 +36,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.d.ts

@@ -1,10 +1,12 @@
 import React from "react";
 import "@inera/ids-design/components/progressbar/progressbar.css";
-interface IDSProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSProgressbarProps extends React.HTMLAttributes<HTMLDivElement> {
     label: string;
     hideLabel?: boolean;
     value?: number;
     srLabel: string;
 }
-export declare const IDSProgressbar: React.FC<IDSProgressbarProps>;
-export {};
+export declare function IDSProgressbar({ label, hideLabel, value, srLabel, className, ...props }: IDSProgressbarProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSProgressbar {
+    var displayName: string;
+}

package/components/progressbar/progressbar.js

@@ -1,10 +1,10 @@
-"use client";
 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 })] }));
-};
+function IDSProgressbar({ label = "", hideLabel = false, value = 0, srLabel = "", className, ...props }) {
+    return (jsxs("div", { className: clsx("ids-progressbar", className), ...props, children: [!hideLabel && (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)` } }) })] }));
+}
+IDSProgressbar.displayName = "IDSProgressbar";
 
 export { IDSProgressbar };

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

@@ -0,0 +1,13 @@
+import React from "react";
+import "@inera/ids-design/components/puff-list/puff-list.css";
+interface IDSPuffListItemDateProps extends React.HTMLAttributes<HTMLDivElement> {
+    date?: Date | null;
+    showTime?: boolean;
+    day?: number;
+    year?: number;
+    month?: number;
+    monthLabel?: string;
+    time?: string;
+}
+export declare function IDSPuffListItemDate({ date, showTime, day, year, month, monthLabel, time, ...props }: IDSPuffListItemDateProps): import("react/jsx-runtime").JSX.Element;
+export {};

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

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import '@inera/ids-design/components/puff-list/puff-list.css';
+import { getDayAsText, getMonthAsSweText } from '../../utils/utils.js';
+
+function IDSPuffListItemDate({ date, showTime = false, day = 0, year = 0, month = 0, monthLabel = "", time = "", ...props }) {
+    const getDay = () => getDayAsText(date ? date.getDate() : day);
+    const getMonth = () => (date ? date.getMonth() + 1 : month);
+    const getYear = () => (date ? date.getFullYear() : year);
+    const getMonthText = () => monthLabel || getMonthAsSweText(getMonth() - 1, 3);
+    const getTime = () => {
+        if (time)
+            return time;
+        if (showTime && date) {
+            const h = date.getHours();
+            const m = date.getMinutes();
+            return `${h.toString().padStart(2, "0")}:${m.toString().padStart(2, "0")}`;
+        }
+        return "";
+    };
+    return (jsxs("span", { className: "ids-puff-list-item__date", ...props, children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] }));
+}
+
+export { IDSPuffListItemDate };

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

@@ -0,0 +1,10 @@
+import React, { ReactNode } from "react";
+export interface IDSPuffListItemHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    headlineLevel?: 2 | 3 | 4 | 5;
+    headlineExtra?: ReactNode;
+    noMargin?: boolean;
+}
+export declare function IDSPuffListItemHeader({ headlineLevel, headlineExtra, noMargin, className, children, ...props }: IDSPuffListItemHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffListItemHeader {
+    var displayName: string;
+}

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

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+
+function IDSPuffListItemHeader({ headlineLevel = 2, headlineExtra, noMargin = false, className, children, ...props }) {
+    const Tag = `h${headlineLevel}`;
+    const headerClass = clsx("ids-puff-list-item-header__headline", { "ids-puff-list-item-header__headline--no-margin": noMargin }, className);
+    return (jsxs(Tag, { className: headerClass, ...props, children: [children, headlineExtra && jsx("span", { className: "ids-puff-list-item-header__extra-content", children: headlineExtra })] }));
+}
+IDSPuffListItemHeader.displayName = "IDSPuffListItemHeader";
+
+export { IDSPuffListItemHeader };

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

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

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

@@ -1,8 +1,10 @@
 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 });
-};
+function IDSPuffListItemInfo({ bottom = false, children, className, ...props }) {
+    const classes = clsx("ids-puff-list-item__info", { "ids-puff-list-item__info--bottom": bottom }, className);
+    return (jsx("div", { className: classes, ...props, children: children }));
+}
 
 export { IDSPuffListItemInfo };