@inera/ids-react 9.2.2 → 9.3.0

package/components/header-1177-pro/header-1177-pro-region-picker-base.js

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hide = false, children, client = false, onToggleRegion, ...props }) {
+function IDSHeader1177ProRegionPickerBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls, expanded, hide = false, children, client = false, onToggleRegion, ...props }) {
     if (hide)
         return null;
     const toggleHandler = client && onToggleRegion
@@ -9,11 +9,16 @@ function IDSHeader1177ProRegionPickerBase({ text = "Välj region", expanded, hid
             onClick: onToggleRegion
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsxs("div", { className: clsx("ids-header-1177-pro-region-picker", {
             "ids-header-1177-pro-region-picker--selected-region": !!children
-        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { type: "button", ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
+        }), ...props, children: [jsx("div", { className: "ids-header-1177-pro-region-picker__region-icon", children: children }), jsx("div", { className: "ids-header-1177-pro-region-picker__selector", children: jsx("button", { type: "button", ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-pro-region-picker__button", {
                         "ids-header-1177-pro-region-picker__button--expanded": expanded
-                    }), "aria-label": text, children: text }) })] }));
+                    }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: text }) })] }));
 }
 IDSHeader1177ProRegionPickerBase.displayName = "IDSHeader1177ProRegionPickerBase";
 

package/components/header-1177-pro/header-1177-pro-region-picker-mobile-base.d.ts

@@ -1,13 +1,15 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerMobileBaseProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     hide?: boolean;
     client?: boolean;
     unresponsive?: boolean;
     onToggleRegion?: () => void;
 }
-export declare function IDSHeader1177ProRegionPickerMobileBase({ text, expanded, children, hide, client, unresponsive, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPickerMobileBase({ text, ariaLabel, ariaControls, expanded, children, hide, client, unresponsive, onToggleRegion, ...props }: IDSHeader1177ProRegionPickerMobileBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPickerMobileBase {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-region-picker-mobile-base.js

@@ -1,7 +1,7 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 
-function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expanded, children, hide = false, client = false, unresponsive = false, onToggleRegion, ...props }) {
+function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", ariaLabel = "Välj region", ariaControls, expanded, children, hide = false, client = false, unresponsive = false, onToggleRegion, ...props }) {
     if (hide)
         return null;
     const toggleHandler = client && onToggleRegion
@@ -9,12 +9,17 @@ function IDSHeader1177ProRegionPickerMobileBase({ text = "Välj region", expande
             onClick: onToggleRegion
         }
         : {};
+    const ariaHandler = ariaControls
+        ? {
+            "aria-controls": ariaControls
+        }
+        : {};
     return (jsx("div", { className: clsx("ids-header-1177-pro-region-picker-mobile", {
             "ids-header-1177-pro-region-picker-mobile--selected-region": !!children,
             "ids-header-1177-pro-region-picker-mobile--unresponsive": unresponsive
-        }), ...props, children: jsxs("button", { ...toggleHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
+        }), ...props, children: jsxs("button", { ...toggleHandler, ...ariaHandler, className: clsx("ids-header-1177-pro-region-picker-mobile__button", {
                 "ids-header-1177-pro-region-picker-mobile__button--expanded": expanded
-            }), "aria-label": text, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
+            }), "aria-expanded": expanded ? "true" : "false", "aria-label": ariaLabel, children: [jsx("div", { className: "ids-header-1177-pro-region-picker-mobile__region-icon", children: children }), jsx("span", { className: "ids-header-1177-pro-region-picker-mobile__button-text", children: text })] }) }));
 }
 IDSHeader1177ProRegionPickerMobileBase.displayName = "IDSHeader1177ProRegionPickerMobileBase";
 

package/components/header-1177-pro/header-1177-pro-region-picker-mobile.d.ts

@@ -1,10 +1,12 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerMobileProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     onToggleRegion?: (isExpanded: boolean) => void;
 }
-export declare function IDSHeader1177ProRegionPickerMobile({ text, expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerMobileProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPickerMobile({ expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerMobileProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPickerMobile {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-region-picker-mobile.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 import { IDSHeader1177ProRegionPickerMobileBase } from './header-1177-pro-region-picker-mobile-base.js';
 
-function IDSHeader1177ProRegionPickerMobile({ text, expanded = false, onToggleRegion, children, ...props }) {
+function IDSHeader1177ProRegionPickerMobile({ expanded = false, onToggleRegion, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     if (headerContext?.hideRegionPicker)

package/components/header-1177-pro/header-1177-pro-region-picker.d.ts

@@ -1,10 +1,12 @@
 import { HTMLAttributes } from "react";
 export interface IDSHeader1177ProRegionPickerProps extends HTMLAttributes<HTMLElement> {
     text?: string;
+    ariaControls?: string;
+    ariaLabel?: string;
     expanded?: boolean;
     onToggleRegion?: (isExpanded: boolean) => void;
 }
-export declare function IDSHeader1177ProRegionPicker({ text, expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSHeader1177ProRegionPicker({ expanded, onToggleRegion, children, ...props }: IDSHeader1177ProRegionPickerProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSHeader1177ProRegionPicker {
     var displayName: string;
 }

package/components/header-1177-pro/header-1177-pro-region-picker.js

@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { IDSHeader1177ProRegionPickerBase } from './header-1177-pro-region-picker-base.js';
 import { useHeaderContext } from '../utils/contexts/HeaderContext.js';
 
-function IDSHeader1177ProRegionPicker({ text, expanded = false, onToggleRegion, children, ...props }) {
+function IDSHeader1177ProRegionPicker({ expanded = false, onToggleRegion, children, ...props }) {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const headerContext = useHeaderContext();
     if (headerContext?.hideRegionPicker)

package/components/popover/popover-content.js

@@ -9,7 +9,7 @@ function IDSPopoverContent({ position = "bottom", caretPosition = "bottom", srCl
     const renderCaret = (pos) => (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("div", { ref: contentRef, style: style, className: clsx("ids-popover-content", `ids-popover-content--${position}`, {
             "ids-focus-trap": !noFocusTrap
-        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(caretPosition), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { "aria-label": srCloseText, className: "ids-popover-content__close-btn", ...closeHandler, ref: closeButtonRef }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [!!headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
+        }), role: "tooltip", id: contentId, "data-position": position, children: [renderCaret(caretPosition), jsx("div", { className: "ids-popover-content__close-btn-wrapper", children: jsx("button", { className: "ids-popover-content__close-btn", "aria-label": srCloseText, ...closeHandler, ref: closeButtonRef }) }), jsx("div", { ref: scrollAreaRef, className: "ids-popover-content__content-wrapper", tabIndex: noScrollAreaFocus ? -1 : 0, style: contentScrollAreaStyle, children: jsxs("div", { className: "ids-popover-content__content-wrapper-inner", children: [!!headline && jsx("div", { className: "ids-popover-content__headline", children: headline }), children] }) })] }));
 }
 IDSPopoverContent.displayName = "IDSPopoverContent";
 

package/components/popover/popover.d.ts

@@ -10,12 +10,13 @@ interface IDSPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
     noFocusTrap?: boolean;
     autoFocus?: boolean;
     srCloseText?: string;
+    zIndex?: number;
     noScrollAreaFocus?: boolean;
     onVisibilityChange?: (isVisible: boolean) => void;
     headline?: React.ReactNode;
     children?: React.ReactNode;
 }
-export declare function IDSPopover({ position, category, trigger, maxWidth, maxHeight, show, noFocusTrap, autoFocus, noScrollAreaFocus, srCloseText, headline, children, className, onVisibilityChange, ...props }: IDSPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPopover({ position, category, trigger, maxWidth, maxHeight, show, noFocusTrap, autoFocus, noScrollAreaFocus, srCloseText, zIndex, headline, children, className, onVisibilityChange, ...props }: IDSPopoverProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSPopover {
     var displayName: string;
 }

package/components/popover/popover.js

@@ -7,7 +7,7 @@ import { useFocusTrap } from '../utils/hooks/useFocusTrap.js';
 import { IDSPopoverContent } from './popover-content.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
 
-function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, noScrollAreaFocus = false, srCloseText = "Stäng", headline, children, className, onVisibilityChange, ...props }) {
+function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 260, maxHeight = 260, show = false, noFocusTrap = false, autoFocus = false, noScrollAreaFocus = false, srCloseText = "Stäng", zIndex = 9999, headline, children, className, onVisibilityChange, ...props }) {
     const popoverRef = useRef(null);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
@@ -34,11 +34,6 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
             setTimeout(() => requestAnimationFrame(() => setReady(true)), 100);
         }
     }, [isExpanded]);
-    useLayoutEffect(() => {
-        if (!ready)
-            return;
-        requestAnimationFrame(() => updatePosition());
-    }, [ready]);
     const handleVisibilityChange = (visible) => {
         setIsExpanded(visible);
         onVisibilityChange?.(visible);
@@ -161,16 +156,35 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
         });
     }, [position]);
     useLayoutEffect(() => {
-        if (!isExpanded || !triggerRef.current || !contentRef.current)
+        if (!ready)
             return;
-        updatePosition();
-        window.addEventListener("resize", updatePosition);
-        window.addEventListener("scroll", updatePosition);
+        requestAnimationFrame(() => updatePosition());
+    }, [ready, updatePosition]);
+    useLayoutEffect(() => {
+        if (!isExpanded)
+            return;
+        const update = () => {
+            requestAnimationFrame(updatePosition);
+        };
+        update();
+        const observer = new ResizeObserver(update);
+        if (triggerRef.current)
+            observer.observe(triggerRef.current);
+        if (contentRef.current)
+            observer.observe(contentRef.current);
+        observer.observe(document.documentElement);
+        window.addEventListener("resize", update);
+        window.addEventListener("scroll", update, true);
+        window.visualViewport?.addEventListener("resize", update);
+        window.visualViewport?.addEventListener("scroll", update);
         return () => {
-            window.removeEventListener("resize", updatePosition);
-            window.removeEventListener("scroll", updatePosition);
+            observer.disconnect();
+            window.removeEventListener("resize", update);
+            window.removeEventListener("scroll", update, true);
+            window.visualViewport?.removeEventListener("resize", update);
+            window.visualViewport?.removeEventListener("scroll", update);
         };
-    }, [isExpanded, position]);
+    }, [isExpanded, updatePosition]);
     return (jsxs("span", { "data-popover-category": category, ref: popoverRef, children: [jsx(IDSPopoverBase, { ...props, client: true, expanded: isExpanded, triggerRef: triggerRef, togglePopover: togglePopover, handleKeyPress: handleKeyPress, trigger: trigger, className: className }), mounted &&
                 isExpanded &&
                 createPortal(jsx(IDSPopoverContent, { client: true, headline: headline, contentRef: contentRef, scrollAreaRef: scrollAreaRef, noScrollAreaFocus: noScrollAreaFocus, caretPosition: position, srCloseText: srCloseText, closeButtonRef: closeButtonRef, closePopover: closePopover, contentScrollAreaStyle: {
@@ -181,7 +195,7 @@ function IDSPopover({ position = "bottom", category = "", trigger, maxWidth = 26
                         position: "absolute",
                         top: coords.top,
                         left: coords.left,
-                        zIndex: 9999
+                        zIndex: zIndex
                     }, children: children }), document.body)] }));
 }
 IDSPopover.displayName = "IDSPopover";

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 export interface IDSPuffListItemHeaderProps extends React.HTMLAttributes<HTMLHeadingElement> {
-    headlineLevel?: 2 | 3 | 4 | 5;
+    headlineLevel?: 2 | 3 | 4 | 5 | 6;
     headlineExtra?: ReactNode;
     noMargin?: boolean;
 }

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

@@ -9,8 +9,9 @@ export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLElement>
     lean?: boolean;
     dateLabel?: ReactNode;
     extra?: ReactNode;
+    noListItem?: boolean;
 }
-export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, className, children, ...props }: IDSPuffListItemProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSPuffListItem({ header, itemLink, date, dateTo, noContent, lean, dateLabel, extra, noListItem, className, children, ...props }: IDSPuffListItemProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSPuffListItem {
     var displayName: string;
 }

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

@@ -3,8 +3,8 @@ import { isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 
-function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, className, children, ...props }) {
-    const Tag = lean ? "div" : "li";
+function IDSPuffListItem({ header, itemLink, date, dateTo, noContent = false, lean = false, dateLabel, extra, noListItem, className, children, ...props }) {
+    const Tag = noListItem || lean ? "div" : "li";
     const content = (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-wrapper", children: [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] })), jsx("div", { className: "ids-puff-list-item-header", children: header }), !noContent && jsx("div", { className: "ids-puff-list-item__body", children: children })] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] })] }));
     const wrappedContent = itemLink && isValidElement(itemLink)
         ? cloneElement(itemLink, {

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

@@ -30,7 +30,9 @@ const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated =
         return null;
     };
     const renderContent = () => (jsxs("div", { className: "ids-side-panel__content", tabIndex: noScrollAreaFocus ? -1 : 0, children: [jsxs("div", { className: "ids-side-panel__inner", children: [headline, children] }), renderFooter()] }));
-    return (jsx("div", { className: classNames, ref: ref, ...props, children: jsxs("div", { className: "ids-side-panel__panel", children: [!noCloseButton && (jsx("div", { className: "ids-side-panel__actions", children: menu ? (jsx("button", { "aria-label": visible ? srClose : srOpen, className: "ids-side-panel__hamburger", "aria-expanded": visible, ...toggleHandler, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": visible, className: "ids-side-panel__close-button", ...closeHandler })) })), renderContent()] }) }));
+    return (jsx("div", { className: classNames, ref: ref, ...props, children: jsxs("div", { className: clsx("ids-side-panel__panel", {
+                "ids-side-panel__panel--no-close-button": noCloseButton
+            }), children: [!noCloseButton && (jsx("div", { className: "ids-side-panel__actions", children: menu ? (jsx("button", { "aria-label": visible ? srClose : srOpen, className: "ids-side-panel__hamburger", "aria-expanded": visible, ...toggleHandler, ref: hamburgerRef, children: jsx("div", { className: "ids-hamburger", children: jsx("div", { className: "ids-hamburger__lines" }) }) })) : (jsx("button", { "aria-label": srClose, "aria-expanded": visible, className: "ids-side-panel__close-button", ...closeHandler })) })), renderContent()] }) }));
 });
 IDSSidePanelBase.displayName = "IDSSidePanelBase";
 

package/components/stepper/step-base.d.ts

@@ -12,4 +12,4 @@ export interface IDSStepBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     onToggleStep?: (step: string, expanded: boolean) => void;
     client?: boolean;
 }
-export declare const IDSStepBase: React.ForwardRefExoticComponent<IDSStepBaseProps & React.RefAttributes<HTMLDivElement>>;
+export declare const IDSStepBase: React.ForwardRefExoticComponent<IDSStepBaseProps & React.RefAttributes<HTMLButtonElement>>;

package/components/stepper/step-base.js

@@ -23,7 +23,7 @@ const IDSStepBase = forwardRef(({ state = "", headline, label = "", stepNumber =
             onKeyDown: handleKeyPress
         }
         : {};
-    return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("div", { ref: ref, role: "button", tabIndex: disabled ? -1 : 0, className: clsx("ids-step__button", {
+    return (jsxs("div", { className: clsx("ids-step", className), ...props, children: [jsx("button", { ref: ref, type: "button", disabled: disabled, className: clsx("ids-step__button", {
                     "ids-step__button--disabled": disabled
                 }), "aria-expanded": expanded, ...toggleHandlers, 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: [headline && jsx("div", { className: "ids-step__headline", children: headline }), label && jsx("div", { className: "ids-step__subtitle", children: label })] }), jsx("div", { className: clsx("ids-step__chevron", {
                                         "ids-step__chevron--expanded": expanded

package/components/stepper/step.d.ts

@@ -12,4 +12,4 @@ export interface IDSStepProps extends React.HTMLAttributes<HTMLDivElement> {
     onExpanded?: () => void;
     onClosed?: () => void;
 }
-export declare const IDSStep: React.ForwardRefExoticComponent<IDSStepProps & React.RefAttributes<HTMLDivElement>>;
+export declare const IDSStep: React.ForwardRefExoticComponent<IDSStepProps & React.RefAttributes<HTMLButtonElement>>;

package/components/stepper/step.js

@@ -1,22 +1,13 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useEffect } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import { IDSStepBase } from './step-base.js';
 
 const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIndicatorText = "", expanded = false, disabled = false, onToggleStep, onExpanded, onClosed, className, ...props }, ref) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
-    const stepRef = React.useRef(null);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    // Merge forwarded + local ref
-    const mergedRef = (node) => {
-        stepRef.current = node;
-        if (typeof ref === "function")
-            ref(node);
-        else if (ref)
-            ref.current = node;
-    };
     const handleToggleStep = () => {
         if (disabled)
             return;
@@ -27,7 +18,7 @@ const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIn
             return next;
         });
     };
-    return (jsx(IDSStepBase, { client: true, ref: mergedRef, state: state, headline: headline, label: label, stepNumber: stepNumber, srIndicatorText: srIndicatorText, expanded: isExpanded, disabled: disabled, onToggleStep: handleToggleStep, className: className, ...props }));
+    return (jsx(IDSStepBase, { client: true, ref: ref, state: state, headline: headline, label: label, stepNumber: stepNumber, srIndicatorText: srIndicatorText, expanded: isExpanded, disabled: disabled, onToggleStep: handleToggleStep, className: className, ...props }));
 });
 IDSStep.displayName = "IDSStep";
 

package/components/tag/tag.js

@@ -1,10 +1,16 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef, memo } from 'react';
+import { forwardRef, isValidElement, cloneElement, memo } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/tag/tag.css';
 
 const IDSTagMemo = forwardRef(({ clickable, closeButton, className, children, ...props }, ref) => {
-    return (jsx("span", { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": clickable }, className), children: jsxs("div", { className: "ids-tag__content", children: [children, !!closeButton && jsx("span", { className: "ids-tag__close-btn", children: closeButton })] }) }));
+    // TODO remove ids-tag__close-btn and let the user supply a IDSControlButton in 10.0
+    const closeButtonElement = isValidElement(closeButton)
+        ? cloneElement(closeButton, {
+            className: clsx("ids-tag__close-btn", closeButton.props.className)
+        })
+        : closeButton;
+    return (jsx("span", { ref: ref, ...props, className: clsx("ids-tag", { "ids-tag--clickable": clickable }, className), children: jsxs("div", { className: "ids-tag__content", children: [children, !!closeButton && closeButtonElement] }) }));
 });
 IDSTagMemo.displayName = "IDSTag";
 const IDSTag = memo(IDSTagMemo);

package/components/tooltip/tooltip-base.d.ts

@@ -7,12 +7,10 @@ export interface IDSTooltipBaseProps extends React.HTMLAttributes<HTMLSpanElemen
     translateX?: string;
     translateY?: string;
     trigger: ReactNode;
-    triggerIsIcon?: boolean;
     triggerRef?: React.Ref<HTMLSpanElement>;
     tooltipContentRef?: React.Ref<HTMLSpanElement>;
-    isHidden?: boolean;
 }
-export declare function IDSTooltipBase({ position, maxWidth, translateX, translateY, trigger, triggerIsIcon, triggerRef, tooltipContentRef, isHidden, className, children, ...props }: IDSTooltipBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare function IDSTooltipBase({ position, maxWidth, translateX, translateY, trigger, triggerRef, tooltipContentRef, className, children, ...props }: IDSTooltipBaseProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace IDSTooltipBase {
     var displayName: string;
 }

package/components/tooltip/tooltip-base.js

@@ -1,18 +1,22 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId } from 'react';
+import { useId, isValidElement, cloneElement } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/tooltip/tooltip.css';
 
-function IDSTooltipBase({ position = "top", maxWidth = "20rem", translateX = position === "top" || position === "bottom" ? "-50%" : "0", translateY = position.includes("top") ? "-100%" : "100%", trigger, triggerIsIcon, triggerRef, tooltipContentRef, isHidden, className, children, ...props }) {
+function IDSTooltipBase({ position = "top", maxWidth = "20rem", translateX = position === "top" || position === "bottom" ? "-50%" : "0", translateY = position.includes("top") ? "-100%" : "100%", trigger, triggerRef, tooltipContentRef, className, children, ...props }) {
     const tooltipId = `tooltip-${useId()}`;
-    const ariaHandler = triggerIsIcon
-        ? {
-            "aria-labelledby": tooltipId
-        }
-        : {
-            "aria-describedby": tooltipId
-        };
-    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ...ariaHandler, ref: triggerRef, children: trigger }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, role: "tooltip", hidden: isHidden, id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
+    const ariaHandler = {
+        "aria-describedby": tooltipId
+    };
+    const triggerElement = isValidElement(trigger)
+        ? (() => {
+            const element = trigger;
+            return cloneElement(element, {
+                "aria-describedby": clsx(element.props["aria-describedby"], tooltipId)
+            });
+        })()
+        : trigger;
+    return (jsxs("span", { className: clsx("ids-tooltip", className), ...props, children: [jsx("span", { className: "ids-tooltip__trigger", ...(!isValidElement(trigger) ? ariaHandler : {}), ref: triggerRef, children: triggerElement }), jsx("span", { className: clsx("ids-tooltip__content", `ids-tooltip__content--${position}`), ref: tooltipContentRef, role: "tooltip", id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
 }
 IDSTooltipBase.displayName = "IDSTooltipBase";
 

package/components/tooltip/tooltip.js

@@ -5,17 +5,9 @@ import { IDSTooltipBase } from './tooltip-base.js';
 
 function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }) {
     const [internalMaxWidth, setInternalMaxWidth] = useState(maxWidth);
-    const [triggerIsIcon, setTriggerIsIcon] = useState(false);
-    const [isVisible, setIsVisible] = useState(false);
     const tooltipContentRef = useRef(null);
     const triggerRef = useRef(null);
     const hasUpdatedMaxWidthRef = useRef(false);
-    const getFirstFocusableContent = () => {
-        const wrapper = triggerRef.current?.parentElement;
-        if (!wrapper)
-            return null;
-        return wrapper.querySelector('ids-button button, button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-    };
     const handleXOverflow = () => {
         const tooltipContent = tooltipContentRef.current;
         const trigger = triggerRef.current;
@@ -56,15 +48,6 @@ function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }
             document.activeElement?.blur();
         }
     };
-    useEffect(() => {
-        const tooltipContent = tooltipContentRef.current;
-        if (!tooltipContent)
-            return;
-        const focusable = getFirstFocusableContent();
-        if (focusable) {
-            setTriggerIsIcon(!!triggerRef.current?.querySelector('[class^="ids-icon-"]'));
-        }
-    }, []);
     useEffect(() => {
         const tooltipContent = tooltipContentRef.current;
         if (!tooltipContent)
@@ -94,30 +77,7 @@ function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }
             triggerWrapper.removeEventListener("focusin", handleXOverflow);
         };
     }, [triggerRef]);
-    const isTooltipVisible = () => {
-        const tooltip = tooltipContentRef.current;
-        if (!tooltip)
-            return false;
-        const style = getComputedStyle(tooltip);
-        return style.visibility !== "hidden" && style.display !== "none" && style.opacity !== "0";
-    };
-    useEffect(() => {
-        const triggerEl = triggerRef.current;
-        if (!triggerEl)
-            return;
-        const updateVisibility = () => setIsVisible(isTooltipVisible());
-        triggerEl.addEventListener("mouseenter", updateVisibility);
-        triggerEl.addEventListener("mouseleave", updateVisibility);
-        triggerEl.addEventListener("focusin", updateVisibility); // <-- replaces focus
-        triggerEl.addEventListener("focusout", updateVisibility); // <-- replaces blur
-        return () => {
-            triggerEl.removeEventListener("mouseenter", updateVisibility);
-            triggerEl.removeEventListener("mouseleave", updateVisibility);
-            triggerEl.removeEventListener("focusin", updateVisibility);
-            triggerEl.removeEventListener("focusout", updateVisibility);
-        };
-    }, [triggerRef.current]);
-    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, triggerIsIcon: triggerIsIcon, className: className, triggerRef: triggerRef, isHidden: !isVisible, tooltipContentRef: tooltipContentRef }));
+    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, className: className, triggerRef: triggerRef, tooltipContentRef: tooltipContentRef }));
 }
 IDSTooltip.displayName = "IDSTooltip";
 

package/index.d.ts

@@ -27,6 +27,7 @@ export * from "./components/form/toggle/toggle";
 export * from "./components/form/darkmode-toggle/darkmode-toggle";
 export * from "./components/form/spinner/spinner";
 export * from "./components/button/button";
+export * from "./components/button/control-button";
 export * from "./components/button/button-group";
 export * from "./components/grid/container";
 export * from "./components/grid/row";

package/index.js

@@ -27,6 +27,7 @@ export { IDSToggle } from './components/form/toggle/toggle.js';
 export { IDSDarkmodeToggle } from './components/form/darkmode-toggle/darkmode-toggle.js';
 export { IDSSpinner } from './components/form/spinner/spinner.js';
 export { IDSButton } from './components/button/button.js';
+export { IDSControlButton } from './components/button/control-button.js';
 export { IDSButtonGroup } from './components/button/button-group.js';
 export { IDSContainer } from './components/grid/container.js';
 export { IDSRow } from './components/grid/row.js';

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "@inera/ids-react",
-  "version": "9.2.2",
+  "version": "9.3.0",
   "type": "module",
   "peerDependencies": {
     "react": "*",
-    "react-day-picker": "^9.11.3"
+    "react-day-picker": "^9.11.3",
+    "react-dom": "*"
   },
   "dependencies": {
-    "@inera/ids-design": "9.2.x",
+    "@inera/ids-design": "9.3.x",
     "clsx": "*"
   },
   "types": "index.d.ts",