@inera/ids-react 7.2.0 → 8.1.0

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

@@ -1,20 +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;
+    date?: React.ReactElement;
+    dateTo?: React.ReactElement;
     noContent?: boolean;
-    noMargin?: boolean;
+    lean?: 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,49 +1,11 @@
-"use client";
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import React__default, { 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 { getMonthAsSweText, getDayAsText } from '../../utils/utils.js';
 import clsx from 'clsx';
 
-const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemLink, date = null, year = "", month = -1, monthLabel = "", day = -1, time = "", noContent = false, noMargin = false, dateLabel, className, children }) => {
-    const [presentedDate, setPresentedDate] = useState(date);
-    useEffect(() => {
-        if (date) {
-            setPresentedDate(new Date(date));
-        }
-    }, [date]);
-    const hasDate = () => date || year || month !== -1 || day !== -1;
-    const getYear = () => presentedDate?.getFullYear() || year;
-    const getMonth = () => (presentedDate ? presentedDate.getMonth() + 1 : month);
-    const getMonthText = () => (monthLabel ? monthLabel : getMonthAsSweText(getMonth() - 1, 3));
-    const getDay = () => getDayAsText(presentedDate?.getDate() || day);
-    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 getHeaderClass = (noMargin) => clsx("ids-puff-list-item__header", {
-        "ids-puff-list-item--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__default.createElement(Tag, { className: getHeaderClass(noMargin) }, cloneElement(headlineLink, {
-                ...headlineLink.props,
-                children: headlineContent
-            }));
-        }
-        return React__default.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,
@@ -53,9 +15,11 @@ const IDSPuffListItem = ({ headline = "", headlineLevel = 2, headlineLink, itemL
         }
         return content;
     };
-    return (jsx("li", { className: clsx("ids-puff-list-item", {
-            "ids-puff-list-item--interactive": !!itemLink
-        }, className), 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("div", { className: "ids-puff-list-item__date", children: [`${getDay()} ${getMonthText()} ${getYear()}`, !!getTime() && jsx("span", { className: "ids-puff-list-item__time", children: getTime() })] })), renderBody()] })] }) }));
-};
+    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: [!!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 }) => {
-    return jsx("ul", { className: clsx("ids-puff-list", className), 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,25 +1,25 @@
-"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:
                 return "2.5rem";
         }
     };
-    const classNames = clsx("ids-region-icon", `ids-region-icon--${name}`, `ids-region-icon--color-preset-${light ? 4 : colorPreset}`, { "ids-region-icon--inline": inline }, className);
-    return jsx("span", { className: classNames, style: { fontSize: getSize() }, ...props });
-};
+    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.d.ts

@@ -10,7 +10,7 @@ interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     labelNotification?: ReactNode;
     link?: ReactNode;
     children?: ReactNode;
-    onExpandedChange?: (expanded: boolean) => void;
+    onExpandedChange?: (isExpanded: boolean) => void;
 }
 export declare const IDSSideMenu: React.FC<IDSSideMenuProps>;
 export {};

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

@@ -1,12 +1,12 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React, { useState } from 'react';
 import '@inera/ids-design/components/side-menu/side-menu.css';
 import clsx from 'clsx';
 
-const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, children, className, onExpandedChange }) => {
+const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, active = false, level = 1, icon = "", labelNotification, link, children, className, onExpandedChange, ...props }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const hasChildren = React__default.Children.toArray(children).some(child => React__default.isValidElement(child) && child.type === IDSSideMenu);
+    const hasChildren = React.Children.toArray(children).some(child => React.isValidElement(child) && child.type === IDSSideMenu);
     const toggleExpanded = (e) => {
         e.stopPropagation();
         if (hasChildren) {
@@ -30,7 +30,7 @@ const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, a
                     "ids-side-menu__chevron-button--expanded": isExpanded
                 }), onClick: toggleExpanded, onKeyDown: handleKeyDown, "aria-expanded": isExpanded, "aria-label": srToggleText }));
         }
-        return icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" }));
+        return icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" }));
     };
     const renderLabel = () => {
         if (hasChildren) {
@@ -38,15 +38,15 @@ const IDSSideMenu = ({ label = "", srToggleText = "Sektion", expanded = false, a
                             "ids-side-menu__label-chevron--expanded": isExpanded
                         }) }), jsxs("div", { className: "ids-side-menu__label", children: [label, labelNotification] })] }));
         }
-        return (jsxs(Fragment, { children: [icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" })), jsxs("div", { className: "ids-side-menu__label", children: [jsx("span", { className: "ids-side-menu__label-text", children: label }), labelNotification] })] }));
+        return (jsxs(Fragment, { children: [icon ? (jsx("div", { className: "ids-side-menu__leaf-icon", "aria-hidden": "true", children: jsx("span", { className: `ids-icon-${icon}` }) })) : (jsx("div", { className: "ids-side-menu__leaf-icon--empty" })), jsxs("div", { className: "ids-side-menu__label", children: [jsx("span", { className: "ids-side-menu__label-text", children: label }), labelNotification] })] }));
     };
     const renderMenuPost = () => {
         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), children: [jsx("div", { className: clsx("ids-side-menu__header", `ids-side-menu--level-${level}`, {
+    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,
                     "ids-side-menu--node-label": hasChildren && label
                 }), children: jsx("div", { className: "ids-side-menu__header-inner", children: renderMenuPost() }) }), isExpanded && jsx("div", { className: "ids-side-menu__children", children: children })] }));

package/components/side-panel/side-panel.d.ts

@@ -1,5 +1,6 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/side-panel/side-panel.css";
+type PanelSize = "s" | "m" | "l";
 interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
     show?: boolean;
     left?: boolean;
@@ -9,6 +10,7 @@ interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement> {
     srLabel?: string;
     srClose?: string;
     srOpen?: string;
+    size?: PanelSize;
     onVisibilityChange?: (visible: boolean) => void;
     onOpen?: () => void;
     onClose?: () => void;

package/components/side-panel/side-panel.js

@@ -4,11 +4,11 @@ import { useState, useRef, useEffect } from 'react';
 import '@inera/ids-design/components/side-panel/side-panel.css';
 import clsx from 'clsx';
 
-const IDSSidePanel = ({ show = false, left = false, elevated = false, menu = false, footer = false, srLabel = "Sidopanel", srClose = "Stäng", srOpen = "Öppna", onVisibilityChange, onOpen, onClose, footerLinks, footerText, headline, className, children, ...props }) => {
+const IDSSidePanel = ({ show = false, left = false, elevated = false, menu = false, footer = false, size = "m", srLabel = "Sidopanel", srClose = "Stäng", srOpen = "Öppna", onVisibilityChange, onOpen, onClose, footerLinks, footerText, headline, className, children, ...props }) => {
     const [isVisible, setIsVisible] = useState(show);
     const hamburgerRef = useRef(null);
     const panelRef = useRef(null);
-    const classNames = clsx("ids-side-panel", "ids-focus-trap--tablet", menu ? "ids-side-panel--menu" : "ids-side-panel--regular", {
+    const classNames = clsx("ids-side-panel", "ids-focus-trap--tablet", size && !menu && `ids-side-panel--${size}`, menu ? "ids-side-panel--menu" : "ids-side-panel--regular", {
         "ids-side-panel--show": isVisible,
         "ids-side-panel--elevated": elevated,
         "ids-side-panel--left": !menu && left
@@ -48,9 +48,9 @@ const IDSSidePanel = ({ show = false, left = false, elevated = false, menu = fal
         onVisibilityChange?.(isVisible);
         if (isVisible) {
             onOpen?.();
-            // Set focus to headline if available
-            const headlineSlot = panelRef.current?.querySelector("[slot=headline]");
-            headlineSlot?.focus();
+            const heading = panelRef.current?.querySelector("h1, h2, h3, h4, h5, h6");
+            heading?.setAttribute("tabindex", "-1");
+            heading?.focus();
         }
         else {
             onClose?.();

package/components/stepper/step.js

@@ -4,7 +4,7 @@ import { useState, useEffect } from 'react';
 import '@inera/ids-design/components/stepper/stepper.css';
 import clsx from 'clsx';
 
-const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicatorText = "", last = "false", expanded: expandedProp = false, disabled = false, onToggleExpansion, onExpanded, onClosed, className, children }) => {
+const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicatorText = "", last = "false", expanded: expandedProp = false, disabled = false, onToggleExpansion, onExpanded, onClosed, className, children, ...props }) => {
     const [expanded, setExpanded] = useState(expandedProp);
     useEffect(() => {
         setExpanded(expandedProp);
@@ -29,7 +29,7 @@ const IDSStep = ({ state = "", headline, label = "", stepNumber = "", srIndicato
             return null;
         return stepNumber;
     };
-    return (jsxs("div", { className: clsx("ids-step", className), ...(last ? { last } : {}), children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+    return (jsxs("div", { className: clsx("ids-step", className), ...(last ? { last } : {}), ...props, children: [jsx("div", { role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
                 }), "aria-expanded": expanded, onClick: toggleExpansion, onKeyDown: handleKeyPress, children: jsxs("div", { className: "ids-step__button-inner", children: [jsx("div", { className: "ids-step__indicator-wrapper", children: jsx("div", { "aria-label": srIndicatorText || stepNumber, role: "img", className: `ids-step__indicator ids-step__indicator--${state}`, children: renderStepIndicator() }) }), jsxs("div", { className: "ids-step__button-text", children: [jsxs("div", { className: "ids-step__headline-label", children: [label && jsx("div", { className: "ids-step__label", children: label }), headline && jsx("div", { className: "ids-step__headline", children: headline })] }), jsx("div", { className: clsx("ids-step__chevron", {
                                         "ids-step__chevron--expanded": expanded

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

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

package/components/tabs/tab-panel.js

@@ -4,7 +4,7 @@ import { useRef, useEffect } from 'react';
 import '@inera/ids-design/components/tabs/tab-panel.css';
 import clsx from 'clsx';
 
-const IDSTabPanel = ({ compact = false, noFocus = false, selected = false, id = "", tabId = "", children, className }) => {
+const IDSTabPanel = ({ compact = false, noFocus = false, selected = false, id = "", tabId = "", children, className, ...props }) => {
     const panelRef = useRef(null);
     useEffect(() => {
         if (panelRef.current && !noFocus) {
@@ -14,7 +14,7 @@ const IDSTabPanel = ({ compact = false, noFocus = false, selected = false, id =
     return (jsx("div", { ref: panelRef, role: "tabpanel", id: id, "aria-hidden": !selected, "aria-labelledby": tabId, hidden: !selected, className: clsx("ids-tab-panel", {
             "ids-tab-panel--selected": selected,
             "ids-tab-panel--compact": compact
-        }, className), children: children }));
+        }, className), ...props, children: children }));
 };
 
 export { IDSTabPanel };

package/components/tabs/tab.js

@@ -4,7 +4,7 @@ import { useRef } from 'react';
 import '@inera/ids-design/components/tabs/tab.css';
 import clsx from 'clsx';
 
-const IDSTab = ({ label, index, id = "", panelId = "", selected = false, icon = "", notification, className, onTabClick, onKeyDown }) => {
+const IDSTab = ({ label, index, id = "", panelId = "", selected = false, icon = "", notification, className, onTabClick, onKeyDown, ...props }) => {
     const tabRef = useRef(null);
     const handleClick = () => {
         if (!selected) {
@@ -13,7 +13,7 @@ const IDSTab = ({ label, index, id = "", panelId = "", selected = false, icon =
     };
     return (jsx("div", { id: id, ref: tabRef, role: "tab", tabIndex: 0, onClick: handleClick, onKeyDown: onKeyDown, className: clsx("ids-tab", {
             "ids-tab--selected": selected
-        }, className), "aria-selected": selected, "aria-controls": panelId, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-icon-${icon} ids-icon--m` }), label, notification] }) }));
+        }, className), "aria-selected": selected, "aria-controls": panelId, ...props, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-icon-${icon} ids-icon--m`, "aria-hidden": "true" }), label, notification] }) }));
 };
 
 export { IDSTab };

package/components/tabs/tabs.js

@@ -1,14 +1,14 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState } from 'react';
+import React, { useState } from 'react';
 import { IDSSelect } from '../form/select/select.js';
 import '@inera/ids-design/components/tabs/tabs.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], children, className, onTabChange }) => {
+const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], children, className, onTabChange, ...props }) => {
     const tabsId = useElementId();
-    const initialSelectedIndex = tabs.findIndex(tab => React__default.isValidElement(tab) && tab.props.selected === true);
+    const initialSelectedIndex = tabs.findIndex(tab => React.isValidElement(tab) && tab.props.selected === true);
     const [activeTab, setActiveTab] = useState(initialSelectedIndex !== -1 ? initialSelectedIndex : 0);
     const responsiveOnM = breakpoint === "m" && !unresponsive;
     const responsiveOnS = breakpoint === "s" && !unresponsive;
@@ -36,10 +36,10 @@ const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpo
     const getTabPanelId = (index) => {
         return `${tabsId}-tab-panel-${index}`;
     };
-    const enhancedTabs = React__default.Children.map(tabs, (tab, idx) => {
-        if (!React__default.isValidElement(tab))
+    const enhancedTabs = React.Children.map(tabs, (tab, idx) => {
+        if (!React.isValidElement(tab))
             return tab;
-        return React__default.cloneElement(tab, {
+        return React.cloneElement(tab, {
             key: `tab-key-${idx}`,
             id: getTabId(idx),
             panelId: getTabPanelId(idx),
@@ -50,10 +50,10 @@ const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpo
             onKeyDown: (e) => handleKeydown(e, idx)
         });
     });
-    const enhancedTabPanels = React__default.Children.map(children, (panel, idx) => {
-        if (!React__default.isValidElement(panel))
+    const enhancedTabPanels = React.Children.map(children, (panel, idx) => {
+        if (!React.isValidElement(panel))
             return panel;
-        return React__default.cloneElement(panel, {
+        return React.cloneElement(panel, {
             key: `tab-panel-key-${idx}`,
             id: getTabPanelId(idx),
             tabId: getTabId(idx),
@@ -68,16 +68,16 @@ const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpo
         handleSelect(index);
     };
     const renderTabOptions = () => tabs?.map((tab, i) => {
-        if (!React__default.isValidElement(tab))
+        if (!React.isValidElement(tab))
             return null;
         const { label, notification } = tab.props;
         let notificationText = "";
         if (typeof notification === "string" || typeof notification === "number") {
             notificationText = String(notification);
         }
-        else if (React__default.isValidElement(notification)) {
+        else if (React.isValidElement(notification)) {
             const badge = notification;
-            const childTexts = React__default.Children.toArray(badge.props.children)
+            const childTexts = React.Children.toArray(badge.props.children)
                 .map(child => (typeof child === "string" || typeof child === "number" ? child : ""))
                 .join("");
             notificationText = childTexts.trim();
@@ -89,7 +89,7 @@ const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpo
             "ids-tabs--unresponsive": unresponsive,
             "ids-tabs--responsive-on-m": responsiveOnM,
             "ids-tabs--responsive-on-s": responsiveOnS
-        }, className), children: [jsx("div", { className: "ids-tabs__select", children: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }) }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: enhancedTabs }), jsx("div", { className: "ids-tabs__panels", children: enhancedTabPanels })] }));
+        }, className), ...props, children: [jsx("div", { className: "ids-tabs__select", children: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }) }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: enhancedTabs }), jsx("div", { className: "ids-tabs__panels", children: enhancedTabPanels })] }));
 };
 
 export { IDSTabs };

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 }) => {
+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 }) => {
     };
     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 }) => {
             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 }) => {
         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 }) => {
             triggerWrapper.removeEventListener("focusin", handleOverflow);
         };
     }, [triggerRef]);
-    return (jsxs("span", { className: clsx("ids-tooltip", className), 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/contexts/HeaderContext.d.ts

@@ -1,8 +1,6 @@
 export interface IDSHeaderConfig {
     unresponsive: boolean;
-    fluid: boolean;
     hideRegionPicker?: boolean;
-    regionPickerText?: string;
 }
 export declare const HeaderContext: import("react").Context<IDSHeaderConfig>;
 export declare const useHeaderContext: () => IDSHeaderConfig;

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"])'
         ];