@inera/ids-react 8.0.0 → 8.1.0

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, ...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 })] }));
-};
+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,8 +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> {
+export interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivElement> {
     bottom?: boolean;
-    children?: ReactNode;
 }
-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

@@ -2,10 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 import clsx from 'clsx';
 
-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 }));
-};
+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 };

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

@@ -1,28 +1,17 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
-interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
-    headline?: ReactNode;
-    headlineLevel?: 2 | 3 | 4 | 5;
-    headlineLink?: React.ReactElement;
+export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    header?: ReactNode;
     itemLink?: React.ReactElement;
-    date?: Date | null;
-    year?: string;
-    month?: number;
-    monthLabel?: string;
-    day?: number;
-    time?: string;
-    dateTo?: Date | null;
-    yearTo?: string;
-    monthTo?: number;
-    monthToLabel?: string;
-    dayTo?: number;
-    timeTo?: string;
+    date?: React.ReactElement;
+    dateTo?: React.ReactElement;
     noContent?: boolean;
     lean?: boolean;
-    noMargin?: boolean;
-    noListItem?: boolean;
     dateLabel?: ReactNode;
+    extra?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSPuffListItem: React.FC<IDSPuffListItemProps>;
-export {};
+export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, className, children, ...props }: IDSPuffListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffListItem {
+    var displayName: string;
+}

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

@@ -1,82 +1,11 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React, { useState, useEffect, isValidElement, cloneElement } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/puff-list/puff-list.css';
-import { getDayAsText, getMonthAsSweText } from '../../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", dateTo = null, yearTo = "", monthTo = -1, monthToLabel = "", dayTo = -1, timeTo = "", noContent = false, noMargin = false, noListItem = false, lean = false, dateLabel, className, children, ...props }) => {
-    const [presentedDate, setPresentedDate] = useState(date ? new Date(date) : null);
-    const [presentedToDate, setPresentedToDate] = useState(dateTo ? new Date(dateTo) : null);
-    useEffect(() => {
-        if (date) {
-            setPresentedDate(new Date(date));
-        }
-    }, [date]);
-    useEffect(() => {
-        if (dateTo) {
-            setPresentedToDate(new Date(dateTo));
-        }
-    }, [dateTo]);
-    const hasDate = () => date !== null ||
-        (year !== "" && year !== undefined) ||
-        (month !== null && month !== undefined && month > 0) ||
-        (day !== null && day !== undefined && day > 0);
-    const hasToDate = () => dateTo !== null ||
-        (yearTo !== "" && yearTo !== undefined) ||
-        (monthTo !== null && monthTo !== undefined && monthTo > 0) ||
-        (dayTo !== null && dayTo !== undefined && dayTo > 0);
-    const getYear = () => (presentedDate ? presentedDate.getFullYear() : year);
-    const getYearTo = () => (presentedToDate ? presentedToDate.getFullYear() : yearTo);
-    const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
-    const getMonthTo = () => (presentedToDate ? presentedToDate.getMonth() + 1 : monthTo);
-    const getDay = () => {
-        const dayNumber = presentedDate ? presentedDate.getDate() : day;
-        return getDayAsText(dayNumber);
-    };
-    const getDayTo = () => {
-        const dayNumber = presentedToDate ? presentedToDate.getDate() : dayTo;
-        return getDayAsText(dayNumber);
-    };
-    const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
-    const getMonthToText = () => (monthToLabel ? monthToLabel : getMonthAsSweText(getMonthTo() - 1, 3));
-    const getTime = () => {
-        if (time)
-            return time;
-        if (presentedDate) {
-            const hour = presentedDate.getHours();
-            const min = presentedDate.getMinutes();
-            return `${hour.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")}`;
-        }
-        return "";
-    };
-    const getTimeTo = () => {
-        if (timeTo)
-            return timeTo;
-        if (presentedToDate) {
-            const hour = presentedToDate.getHours();
-            const min = presentedToDate.getMinutes();
-            return `${hour.toString().padStart(2, "0")}:${min.toString().padStart(2, "0")}`;
-        }
-        return "";
-    };
-    const getHeaderClass = (noMargin) => clsx("ids-puff-list-item__header", {
-        "ids-puff-list-item__header--no-margin": noMargin
-    });
-    const renderHeadline = () => {
-        const level = [2, 3, 4, 5].includes(headlineLevel) ? headlineLevel : 2;
-        const Tag = `h${level}`;
-        const headlineContent = jsx(Fragment, { children: headline });
-        if (headlineLink && isValidElement(headlineLink)) {
-            return React.createElement(Tag, { className: getHeaderClass(noMargin) }, cloneElement(headlineLink, {
-                ...headlineLink.props,
-                children: headlineContent
-            }));
-        }
-        return React.createElement(Tag, { className: getHeaderClass(noMargin) }, headline);
-    };
+function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, className, children, ...props }) {
     const renderBody = () => {
-        const content = (jsxs(Fragment, { children: [renderHeadline(), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
+        const content = (jsxs(Fragment, { children: [jsx("div", { className: "ids-puff-list-item-header", children: header }), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }));
         if (itemLink && isValidElement(itemLink)) {
             return cloneElement(itemLink, {
                 ...itemLink.props,
@@ -86,10 +15,11 @@ const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemL
         }
         return content;
     };
-    return (jsx("div", { className: clsx("ids-puff-list-item", {
+    return (jsxs("div", { className: clsx("ids-puff-list-item", {
             "ids-puff-list-item--interactive": !!itemLink,
             "ids-puff-list-item--lean": !!lean
-        }, className), ...props, children: jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content", children: [hasDate() && (jsxs("span", { className: "ids-puff-list-item__date", children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] })), hasDate() && hasToDate() && (jsxs("span", { className: "ids-puff-list-item__date", children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), `${getDayTo()} ${getMonthToText()} ${getYearTo()}`, !!getTimeTo() && jsx("span", { className: "ids-puff-list-item__time", children: getTimeTo() })] })), renderBody()] })] }) }));
-};
+        }, className), ...props, children: [jsxs("div", { className: "ids-puff-list-item__inner", children: [dateLabel && jsx("div", { className: "ids-puff-list-item__date-label", children: dateLabel }), jsxs("div", { className: "ids-puff-list-item__content", children: [!!date && date, !!date && !!dateTo && (jsxs(Fragment, { children: [jsx("span", { className: "ids-puff-list-item__date-spacer", children: "\u2015" }), dateTo] })), renderBody()] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] }), jsx("div", { className: "ids-puff-list-item-separator" })] }));
+}
+IDSPuffListItem.displayName = "IDSPuffListItem";
 
 export { IDSPuffListItem };

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

@@ -3,5 +3,5 @@ import "@inera/ids-design/components/puff-list/puff-list.css";
 interface IDSPuffListProps extends React.HTMLAttributes<HTMLDivElement> {
     children?: ReactNode;
 }
-export declare const IDSPuffList: React.FC<IDSPuffListProps>;
+export declare function IDSPuffList({ children, className, ...props }: IDSPuffListProps): import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -2,8 +2,9 @@ import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 import clsx from 'clsx';
 
-const IDSPuffList = ({ children, className, ...props }) => {
-    return (jsx("div", { className: clsx("ids-puff-list", className), ...props, children: children }));
-};
+function IDSPuffList({ children, className, ...props }) {
+    const classes = clsx("ids-puff-list", className);
+    return (jsx("div", { className: classes, ...props, children: children }));
+}
 
 export { IDSPuffList };

package/components/region-icon/region-icon.d.ts

@@ -1,12 +1,12 @@
 import React from "react";
 import "@inera/ids-design/components/region-icon/region-icon.css";
 type Size = "xs" | "s" | "m" | "l" | "ml";
-interface IDSRegionIconProps extends React.HTMLAttributes<HTMLSpanElement> {
+export interface IDSRegionIconProps extends React.HTMLAttributes<HTMLSpanElement> {
     name: string;
     size?: Size;
     colorPreset?: number;
     light?: boolean;
     inline?: boolean;
 }
-export declare const IDSRegionIcon: React.FC<IDSRegionIconProps>;
+export declare function IDSRegionIcon({ name, size, colorPreset, light, inline, className, ...props }: IDSRegionIconProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/region-icon/region-icon.js

@@ -1,17 +1,18 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 import '@inera/ids-design/components/region-icon/region-icon.css';
 import clsx from 'clsx';
 
-const IDSRegionIcon = ({ name, size = "m", colorPreset = 1, light = false, inline = false, className, ...props }) => {
+function IDSRegionIcon({ name, size = "m", colorPreset = 1, light = false, inline = false, className, ...props }) {
     const getSize = () => {
         switch (size) {
             case "l":
                 return "3rem";
+            case "ml":
+                return "2.75rem";
             case "m":
                 return "2.5rem";
             case "s":
-                return "2.0rem";
+                return "2rem";
             case "xs":
                 return "1.5rem";
             default:
@@ -19,6 +20,6 @@ const IDSRegionIcon = ({ name, size = "m", colorPreset = 1, light = false, inlin
         }
     };
     return (jsx("span", { className: clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 3 : colorPreset}`, { "ids-region-icon--inline": inline }, className), style: { fontSize: getSize() }, ...props }));
-};
+}
 
 export { IDSRegionIcon };

package/components/side-menu/side-menu.js

@@ -44,7 +44,7 @@ const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, a
         if (label) {
             return renderLabel();
         }
-        return (jsxs(Fragment, { children: [renderExpandButton(), jsx("div", { className: "ids-side-menu__link", onClick: e => e.stopPropagation(), onKeyDown: e => e.code !== "Escape" && e.stopPropagation(), children: link })] }));
+        return (jsxs(Fragment, { children: [renderExpandButton(), jsx("div", { className: "ids-side-menu__link", children: link })] }));
     };
     return (jsxs("div", { className: clsx("ids-side-menu", className), ...props, children: [jsx("div", { className: clsx("ids-side-menu__header", `ids-side-menu--level-${level}`, {
                     "ids-side-menu--active": active,

package/components/stepper/stepper.d.ts

@@ -5,5 +5,5 @@ interface IDSStepperProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactElement<IDSStepProps>[] | ReactElement<IDSStepProps>;
     onToggleExpansion?: (step: number, expanded: boolean) => void;
 }
-export declare const IDSStepper: React.FC<IDSStepperProps>;
+export declare function IDSStepper({ children, onToggleExpansion, className, ...props }: IDSStepperProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/components/stepper/stepper.js

@@ -4,7 +4,7 @@ import React, { isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/stepper/stepper.css';
 import clsx from 'clsx';
 
-const IDSStepper = ({ children, onToggleExpansion, className, ...props }) => {
+function IDSStepper({ children, onToggleExpansion, className, ...props }) {
     const stepsArray = React.Children.toArray(children).filter(isValidElement);
     const handleExpansion = (step, expanded) => {
         onToggleExpansion?.(step, expanded);
@@ -18,6 +18,6 @@ const IDSStepper = ({ children, onToggleExpansion, className, ...props }) => {
         });
     });
     return (jsx("div", { className: clsx("ids-stepper", className), ...props, children: enhancedSteps }));
-};
+}
 
 export { IDSStepper };

package/components/tag/tag.d.ts

@@ -1,10 +1,17 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/tag/tag.css";
-interface IDSTagProps extends React.HTMLAttributes<HTMLButtonElement> {
+type ButtonTagProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
+    onClick: () => void;
+    onClose?: () => void;
     srCloseLabel?: string;
+    children?: ReactNode;
+};
+type SpanTagProps = React.HTMLAttributes<HTMLSpanElement> & {
+    onClick?: undefined;
     onClose?: () => void;
-    onClick?: () => void;
+    srCloseLabel?: string;
     children?: ReactNode;
-}
-export declare const IDSTag: React.FC<IDSTagProps>;
+};
+type IDSTagProps = ButtonTagProps | SpanTagProps;
+export declare const IDSTag: React.ForwardRefExoticComponent<IDSTagProps & React.RefAttributes<HTMLButtonElement | HTMLSpanElement>>;
 export {};

package/components/tag/tag.js

@@ -1,16 +1,16 @@
-"use client";
 import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
 import '@inera/ids-design/components/tag/tag.css';
 import clsx from 'clsx';
 
-const IDSTag = ({ srCloseLabel = "", onClose, onClick, children, className, ...props }) => {
-    const TagWrapper = !!onClick ? "button" : "span";
-    return (jsx(TagWrapper, { className: clsx("ids-tag", {
-            "ids-tag--clickable": !!onClick
-        }, className), onClick: !!onClick ? onClick : undefined, ...props, children: jsxs("div", { className: "ids-tag__content", children: [children, !onClick && !!onClose && (jsx("button", { className: "ids-tag__close-btn", "aria-label": srCloseLabel, onClick: e => {
+const IDSTag = forwardRef(({ srCloseLabel = "", onClose, onClick, className, children, ...props }, ref) => {
+    const isClickable = !!onClick;
+    const TagWrapper = isClickable ? "button" : "span";
+    return (jsx(TagWrapper, { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": isClickable }, className), onClick: isClickable ? onClick : undefined, children: jsxs("div", { className: "ids-tag__content", children: [children, !isClickable && !!onClose && (jsx("button", { type: "button", className: "ids-tag__close-btn", "aria-label": srCloseLabel, onClick: e => {
                         e.stopPropagation();
                         onClose?.();
                     } }))] }) }));
-};
+});
+IDSTag.displayName = "IDSTag";
 
 export { IDSTag };

package/components/tooltip/tooltip.d.ts

@@ -3,6 +3,7 @@ import "@inera/ids-design/components/tooltip/tooltip.css";
 export type TooltipPosition = "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
 interface IDSTooltipProps extends React.HTMLAttributes<HTMLDivElement> {
     position?: TooltipPosition;
+    maxWidth?: string;
     trigger: ReactNode;
     children?: ReactNode;
 }

package/components/tooltip/tooltip.js

@@ -5,7 +5,7 @@ import '@inera/ids-design/components/tooltip/tooltip.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSTooltip = ({ position = "top", trigger, children, className, ...props }) => {
+const IDSTooltip = ({ position = "top", maxWidth = "20rem", trigger, children, className, ...props }) => {
     const [translateX, setTranslateX] = useState(position === "top" || position === "bottom" ? "-50%" : "0");
     const [translateY, setTranslateY] = useState(position.includes("top") ? "-100%" : "100%");
     const tooltipContentRef = useRef(null);
@@ -19,9 +19,11 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
     };
     const handleOverflow = () => {
         const tooltipContent = tooltipContentRef.current;
-        if (!tooltipContent)
+        const trigger = triggerRef.current;
+        if (!tooltipContent || !trigger)
             return;
         const rect = tooltipContent.getBoundingClientRect();
+        const triggerHeight = trigger.getBoundingClientRect().height;
         const vw = window.innerWidth;
         const vh = window.innerHeight;
         if (rect.right > vw) {
@@ -35,10 +37,10 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
             setTranslateX("0");
         }
         if (rect.bottom > vh) {
-            setTranslateY("-100%");
+            setTranslateY(`-${triggerHeight + 16}px`);
         }
         if (rect.top < 0) {
-            setTranslateY("100%");
+            setTranslateY(`${triggerHeight + 16}px`);
         }
     };
     const checkKey = (e) => {
@@ -53,8 +55,7 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
         tooltipContent.setAttribute("role", "tooltip");
         const focusable = getFirstFocusableContent();
         if (focusable) {
-            if (triggerRef.current?.querySelector('[class^="ids-icon-"]') ||
-                triggerRef.current?.querySelector("ids-icon")) {
+            if (triggerRef.current?.querySelector('[class^="ids-icon-"]') || triggerRef.current?.querySelector("ids-icon")) {
                 focusable.setAttribute("role", "img");
                 focusable.setAttribute("aria-labelledby", tooltipId);
             }
@@ -76,7 +77,7 @@ const IDSTooltip = ({ position = "top", trigger, children, className, ...props }
             triggerWrapper.removeEventListener("focusin", handleOverflow);
         };
     }, [triggerRef]);
-    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})` }, children: children })] }));
+    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
 };
 
 export { IDSTooltip };

package/components/utils/hooks/useFocusTrap.js

@@ -8,7 +8,8 @@ function useFocusTrap(container, active) {
             "a[href]",
             "button:not([disabled])",
             "textarea:not([disabled])",
-            "input:not([disabled])",
+            "input:not([disabled]):not([type='radio'])",
+            ".ids-focus-anchor",
             "select:not([disabled])",
             '[tabindex]:not([tabindex="-1"])'
         ];

package/index.d.ts

@@ -30,6 +30,8 @@ export * from "./components/tabs/tab";
 export * from "./components/tabs/tab-panel";
 export * from "./components/puff-list/puff-list";
 export * from "./components/puff-list/puff-list-item/puff-list-item";
+export * from "./components/puff-list/puff-list-item/puff-list-item-date";
+export * from "./components/puff-list/puff-list-item/puff-list-item-header";
 export * from "./components/puff-list/puff-list-item/puff-list-item-info";
 export * from "./components/date-label/date-label";
 export * from "./components/breadcrumbs/breadcrumbs";

package/index.js

@@ -30,6 +30,8 @@ export { IDSTab } from './components/tabs/tab.js';
 export { IDSTabPanel } from './components/tabs/tab-panel.js';
 export { IDSPuffList } from './components/puff-list/puff-list.js';
 export { IDSPuffListItem } from './components/puff-list/puff-list-item/puff-list-item.js';
+export { IDSPuffListItemDate } from './components/puff-list/puff-list-item/puff-list-item-date.js';
+export { IDSPuffListItemHeader } from './components/puff-list/puff-list-item/puff-list-item-header.js';
 export { IDSPuffListItemInfo } from './components/puff-list/puff-list-item/puff-list-item-info.js';
 export { IDSDateLabel } from './components/date-label/date-label.js';
 export { IDSBreadcrumbs } from './components/breadcrumbs/breadcrumbs.js';

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@inera/ids-react",
-  "version": "8.0.0",
+  "version": "8.1.0",
   "type": "module",
   "peerDependencies": {
     "react": "*"
   },
   "dependencies": {
-    "@inera/ids-design": "8.0.x",
+    "@inera/ids-design": "8.1.x",
     "clsx": "*"
   },
   "types": "index.d.ts",