@inera/ids-react 9.1.1 → 9.2.0

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

@@ -3,3 +3,6 @@ export interface IDSPuffListItemInfoProps extends React.HTMLAttributes<HTMLDivEl
     bottom?: boolean;
 }
 export declare function IDSPuffListItemInfo({ bottom, children, ...props }: IDSPuffListItemInfoProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffListItemInfo {
+    var displayName: string;
+}

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

@@ -4,5 +4,6 @@ import clsx from 'clsx';
 function IDSPuffListItemInfo({ bottom = false, children, ...props }) {
     return (jsx("div", { ...props, className: clsx("ids-puff-list-item__info", { "ids-puff-list-item__info--bottom": bottom }), children: children }));
 }
+IDSPuffListItemInfo.displayName = "IDSPuffListItemInfo";
 
 export { IDSPuffListItemInfo };

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

@@ -1,6 +1,6 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
-export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSPuffListItemProps extends React.HTMLAttributes<HTMLElement> {
     header?: ReactNode;
     itemLink?: React.ReactElement;
     date?: React.ReactElement;

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

@@ -4,21 +4,19 @@ 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 renderBody = () => {
-        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,
-                className: clsx("ids-puff-list-item__item-link", itemLink.props.className),
-                children: content
-            });
-        }
-        return content;
-    };
-    return (jsxs("div", { ...props, className: clsx("ids-puff-list-item", {
+    const Tag = 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, {
+            ...itemLink.props,
+            className: clsx("ids-puff-list-item__item-link", itemLink.props.className),
+            children: content
+        })
+        : content;
+    return (jsx(Tag, { ...props, className: clsx("ids-puff-list-item", {
             "ids-puff-list-item--interactive": !!itemLink,
             "ids-puff-list-item--lean": !!lean
-        }, 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-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] })), renderBody()] }), extra && jsx("div", { className: "ids-puff-list-item__extra-content", children: extra })] })] }), jsx("div", { className: "ids-puff-list-item-separator" })] }));
+        }, className), children: wrappedContent }));
 }
 IDSPuffListItem.displayName = "IDSPuffListItem";
 

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

@@ -1,7 +1,10 @@
 import React, { ReactNode } from "react";
 import "@inera/ids-design/components/puff-list/puff-list.css";
-interface IDSPuffListProps extends React.HTMLAttributes<HTMLDivElement> {
+interface IDSPuffListProps extends React.HTMLAttributes<HTMLDListElement> {
     children?: ReactNode;
 }
 export declare function IDSPuffList({ children, className, ...props }: IDSPuffListProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSPuffList {
+    var displayName: string;
+}
 export {};

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

@@ -3,7 +3,8 @@ import clsx from 'clsx';
 import '@inera/ids-design/components/puff-list/puff-list.css';
 
 function IDSPuffList({ children, className, ...props }) {
-    return (jsx("div", { ...props, className: clsx("ids-puff-list", className), children: children }));
+    return (jsx("ul", { ...props, className: clsx("ids-puff-list", className), children: children }));
 }
+IDSPuffList.displayName = "IDSPuffList";
 
 export { IDSPuffList };

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

@@ -9,4 +9,7 @@ export interface IDSRegionIconProps extends React.HTMLAttributes<HTMLSpanElement
     inline?: boolean;
 }
 export declare function IDSRegionIcon({ name, size, colorPreset, light, inline, className, ...props }: IDSRegionIconProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSRegionIcon {
+    var displayName: string;
+}
 export {};

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

@@ -21,5 +21,6 @@ function IDSRegionIcon({ name, size = "m", colorPreset = 1, light = false, inlin
     };
     return (jsx("span", { ...props, 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() } }));
 }
+IDSRegionIcon.displayName = "IDSRegionIcon";
 
 export { IDSRegionIcon };

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

@@ -11,3 +11,6 @@ export interface IDSSideMenuProps extends React.HTMLAttributes<HTMLDivElement> {
     onToggleMenu?: (isExpanded: boolean) => void;
 }
 export declare function IDSSideMenu({ expanded, onToggleMenu, srToggleText, className, ...props }: IDSSideMenuProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSideMenu {
+    var displayName: string;
+}

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

@@ -24,5 +24,6 @@ function IDSSideMenu({ expanded = false, onToggleMenu, srToggleText = "Sektion",
     };
     return (jsx(IDSSideMenuBase, { ...props, client: true, className: className, srToggleText: srToggleText, isExpanded: isExpanded, onToggleMenu: handleToggleMenu, handleKeyDown: handleKeyDown }));
 }
+IDSSideMenu.displayName = "IDSSideMenu";
 
 export { IDSSideMenu };

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

@@ -20,5 +20,6 @@ export interface IDSSidePanelBaseProps extends React.HTMLAttributes<HTMLDivEleme
     srOpen?: string;
     noScrollAreaFocus?: boolean;
     hamburgerRef?: React.Ref<HTMLButtonElement>;
+    componentRef?: React.Ref<HTMLDivElement>;
 }
 export declare const IDSSidePanelBase: React.ForwardRefExoticComponent<IDSSidePanelBaseProps & React.RefAttributes<HTMLDivElement>>;

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

@@ -3,7 +3,7 @@ import React, { forwardRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/side-panel/side-panel.css';
 
-const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated = false, menu = false, footer = false, noScrollAreaFocus = false, footerDarkmodeToggle, size = "m", srLabel = "Sidopanel", onTogglePanel, onClosePanel, srClose, srOpen, client, headline, footerLinks, footerText, hamburgerRef, className, children, ...props }, ref) => {
+const IDSSidePanelBase = forwardRef(({ visible = false, left = false, elevated = false, menu = false, footer = false, noScrollAreaFocus = false, footerDarkmodeToggle, size = "m", srLabel = "Sidopanel", onTogglePanel, onClosePanel, srClose, srOpen, client, headline, footerLinks, footerText, hamburgerRef, componentRef, className, children, ...props }, ref) => {
     const [ready, setReady] = React.useState(false);
     React.useEffect(() => {
         setReady(true);

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

@@ -5,3 +5,6 @@ export interface IDSSidePanelProviderProps extends React.HTMLAttributes<HTMLDivE
     sidePanel: ReactNode;
 }
 export declare function IDSSidePanelProvider({ left, hideSidePanel, sidePanel, className, children, ...props }: IDSSidePanelProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSidePanelProvider {
+    var displayName: string;
+}

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

@@ -8,5 +8,6 @@ function IDSSidePanelProvider({ left, hideSidePanel, sidePanel, className, child
     }
     return (jsxs("div", { className: classNames, ...props, children: [children, " ", !hideSidePanel && sidePanel] }));
 }
+IDSSidePanelProvider.displayName = "IDSSidePanelProvider";
 
 export { IDSSidePanelProvider };

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

@@ -20,3 +20,6 @@ export interface IDSSidePanelProps extends React.HTMLAttributes<HTMLDivElement>
     noScrollAreaFocus?: boolean;
 }
 export declare function IDSSidePanel({ show, menu, noScrollAreaFocus, srLabel, onVisibilityChange, srClose, srOpen, onOpen, onClose, className, children, ...props }: IDSSidePanelProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSSidePanel {
+    var displayName: string;
+}

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

@@ -5,12 +5,19 @@ import { IDSSidePanelBase } from './side-panel-base.js';
 import { useEsc } from '../utils/hooks/useEsc.js';
 
 function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel = "Sidopanel", onVisibilityChange, srClose = "Stäng", srOpen = "Öppna", onOpen, onClose, className, children, ...props }) {
-    const internalRef = useRef(null);
+    const componentRef = useRef(null);
     const hamburgerRef = useRef(null);
     const isControlled = show !== undefined;
     const [internalShow, setInternalShow] = useState(false);
     const visible = isControlled ? show : internalShow;
-    useEsc(() => setVisible(false), hamburgerRef, internalShow);
+    const togglePanel = () => setVisible(!visible);
+    const closePanel = () => {
+        setVisible(false);
+        if (!isControlled) {
+            onClose?.();
+        }
+    };
+    useEsc(closePanel, hamburgerRef, componentRef, internalShow);
     const setVisible = (value) => {
         if (!isControlled) {
             setInternalShow(value);
@@ -21,7 +28,7 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel =
     useEffect(() => {
         if (visible) {
             onOpen?.();
-            const heading = internalRef.current?.querySelector("h1, h2, h3, h4, h5, h6");
+            const heading = componentRef.current?.querySelector("h1, h2, h3, h4, h5, h6");
             if (heading) {
                 heading.setAttribute("tabindex", "-1");
                 setTimeout(() => {
@@ -39,7 +46,7 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel =
     // Window resize ARIA attributes
     useEffect(() => {
         const handleResize = () => {
-            const panel = internalRef.current;
+            const panel = componentRef.current;
             if (!panel)
                 return;
             if (window.innerWidth <= 1024) {
@@ -57,8 +64,6 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel =
         window.addEventListener("resize", handleResize);
         return () => window.removeEventListener("resize", handleResize);
     }, [srLabel]);
-    const onClosePanel = () => setVisible(false);
-    const onTogglePanel = () => setVisible(!visible);
     useEffect(() => {
         const handleBodyScroll = () => {
             if (visible && window.innerWidth <= 1024) {
@@ -75,7 +80,24 @@ function IDSSidePanel({ show, menu = false, noScrollAreaFocus = false, srLabel =
             document.body.style.overflow = ""; // cleanup on unmount
         };
     }, [visible]);
-    return (jsx(IDSSidePanelBase, { ...props, ref: internalRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noScrollAreaFocus: noScrollAreaFocus, visible: visible, onClosePanel: onClosePanel, onTogglePanel: onTogglePanel, hamburgerRef: hamburgerRef, children: children }));
+    useEffect(() => {
+        const handleBodyScroll = () => {
+            if (visible && window.innerWidth <= 1024) {
+                document.body.style.overflow = "hidden";
+            }
+            else {
+                document.body.style.overflow = "";
+            }
+        };
+        handleBodyScroll();
+        window.addEventListener("resize", handleBodyScroll);
+        return () => {
+            window.removeEventListener("resize", handleBodyScroll);
+            document.body.style.overflow = ""; // cleanup on unmount
+        };
+    }, [visible]);
+    return (jsx(IDSSidePanelBase, { ...props, ref: componentRef, client: true, menu: menu, className: className, srClose: srClose, srOpen: srOpen, noScrollAreaFocus: noScrollAreaFocus, visible: visible, onClosePanel: closePanel, onTogglePanel: togglePanel, hamburgerRef: hamburgerRef, children: children }));
 }
+IDSSidePanel.displayName = "IDSSidePanel";
 
 export { IDSSidePanel };

package/components/stepper/step-base.js

@@ -25,7 +25,7 @@ const IDSStepBase = forwardRef(({ state = "", headline, label = "", stepNumber =
         : {};
     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", {
                     "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__label", children: label })] }), jsx("div", { className: clsx("ids-step__chevron", {
+                }), "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
                                     }) })] })] }) }), jsx("div", { className: clsx("ids-step__content", {
                     "ids-step__content--expanded": expanded

package/components/stepper/step.js

@@ -1,15 +1,22 @@
 "use client";
 import { jsx } from 'react/jsx-runtime';
-import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import React, { 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 internalRef = React.useRef(null);
+    const stepRef = React.useRef(null);
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
-    useImperativeHandle(ref, () => internalRef.current);
+    // 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;
@@ -20,7 +27,7 @@ const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIn
             return next;
         });
     };
-    return (jsx(IDSStepBase, { client: true, ref: internalRef, 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: mergedRef, state: state, headline: headline, label: label, stepNumber: stepNumber, srIndicatorText: srIndicatorText, expanded: isExpanded, disabled: disabled, onToggleStep: handleToggleStep, className: className, ...props }));
 });
 IDSStep.displayName = "IDSStep";
 

package/components/stepper/stepper.d.ts

@@ -5,3 +5,6 @@ export interface IDSStepperProps extends React.HTMLAttributes<HTMLDivElement> {
     onToggleStep?: (step: string, expanded: boolean) => void;
 }
 export declare function IDSStepper({ children, onToggleStep, className, ...props }: IDSStepperProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSStepper {
+    var displayName: string;
+}

package/components/stepper/stepper.js

@@ -14,5 +14,6 @@ function IDSStepper({ children, onToggleStep, className, ...props }) {
     }));
     return (jsx("div", { className: clsx("ids-stepper", className), ...props, children: enhancedSteps }));
 }
+IDSStepper.displayName = "IDSStepper";
 
 export { IDSStepper };

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

@@ -12,4 +12,7 @@ interface IDSTabsBaseProps extends React.HTMLAttributes<HTMLDivElement> {
     select?: ReactNode;
 }
 export declare function IDSTabsBase({ unresponsive, light, compact, breakpoint, selectLabel, tabs, className, children, select, ...props }: IDSTabsBaseProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSTabsBase {
+    var displayName: string;
+}
 export {};

package/components/tabs/tabs-base.js

@@ -11,5 +11,6 @@ function IDSTabsBase({ unresponsive = false, light = false, compact = false, bre
             "ids-tabs--responsive-on-s": responsiveOnS
         }, className), children: [jsx("div", { className: "ids-tabs__select", children: select }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: tabs }), jsx("div", { className: "ids-tabs__panels", children: children })] }));
 }
+IDSTabsBase.displayName = "IDSTabsBase";
 
 export { IDSTabsBase };

package/components/tabs/tabs.d.ts

@@ -10,3 +10,6 @@ export interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
     selectLabel?: string;
 }
 export declare function IDSTabs({ tabs, selectLabel, light, compact, breakpoint, children, className, onTabChange, ...props }: IDSTabsProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSTabs {
+    var displayName: string;
+}

package/components/tabs/tabs.js

@@ -82,5 +82,6 @@ function IDSTabs({ tabs = [], selectLabel, light, compact, breakpoint, children,
     });
     return (jsx(IDSTabsBase, { ...props, tabs: enhancedTabs, breakpoint: breakpoint, className: className, select: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }), children: enhancedTabPanels }));
 }
+IDSTabs.displayName = "IDSTabs";
 
 export { IDSTabs };

package/components/tag/tag.d.ts

@@ -4,4 +4,4 @@ export interface IDSTagProps extends React.HTMLAttributes<HTMLSpanElement> {
     closeButton?: ReactNode;
     clickable?: boolean;
 }
-export declare const IDSTag: React.ForwardRefExoticComponent<IDSTagProps & React.RefAttributes<HTMLSpanElement>>;
+export declare const IDSTag: React.NamedExoticComponent<IDSTagProps & React.RefAttributes<HTMLSpanElement>>;

package/components/tag/tag.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { forwardRef } from 'react';
+import { forwardRef, memo } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/tag/tag.css';
 
-const IDSTag = forwardRef(({ clickable, closeButton, className, children, ...props }, ref) => {
+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 })] }) }));
 });
-IDSTag.displayName = "IDSTag";
+IDSTagMemo.displayName = "IDSTag";
+const IDSTag = memo(IDSTagMemo);
 
 export { IDSTag };

package/components/toolbar/toolbar.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "@inera/ids-design/components/toolbar/toolbar.css";
+export interface IDSToolbarProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+export declare const IDSToolbar: React.ForwardRefExoticComponent<IDSToolbarProps & React.RefAttributes<HTMLDivElement>>;

package/components/toolbar/toolbar.js

@@ -0,0 +1,11 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+import '@inera/ids-design/components/toolbar/toolbar.css';
+
+const IDSToolbar = forwardRef(({ className, children, ...props }, ref) => {
+    return (jsx("div", { ref: ref, ...props, className: clsx("ids-toolbar", className), children: jsx("div", { className: "ids-toolbar__content", children: children }) }));
+});
+IDSToolbar.displayName = "IDSToolbar";
+
+export { IDSToolbar };

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

@@ -10,5 +10,9 @@ export interface IDSTooltipBaseProps extends React.HTMLAttributes<HTMLSpanElemen
     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 namespace IDSTooltipBase {
+    var displayName: string;
 }
-export declare function IDSTooltipBase({ position, maxWidth, translateX, translateY, trigger, triggerIsIcon, triggerRef, tooltipContentRef, className, children, ...props }: IDSTooltipBaseProps): import("react/jsx-runtime").JSX.Element;

package/components/tooltip/tooltip-base.js

@@ -3,7 +3,7 @@ import { useId } 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, className, children, ...props }) {
+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 }) {
     const tooltipId = `tooltip-${useId()}`;
     const ariaHandler = triggerIsIcon
         ? {
@@ -12,7 +12,8 @@ function IDSTooltipBase({ position = "top", maxWidth = "20rem", translateX = pos
         : {
             "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", id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
+    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 })] }));
 }
+IDSTooltipBase.displayName = "IDSTooltipBase";
 
 export { IDSTooltipBase };

package/components/tooltip/tooltip.d.ts

@@ -2,3 +2,6 @@ import { IDSTooltipBaseProps } from "./tooltip-base";
 export interface IDSTooltipProps extends Omit<IDSTooltipBaseProps, "translateX" | "translateY"> {
 }
 export declare function IDSTooltip({ position, maxWidth, trigger, className, ...props }: IDSTooltipProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace IDSTooltip {
+    var displayName: string;
+}

package/components/tooltip/tooltip.js

@@ -6,6 +6,7 @@ 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);
@@ -93,7 +94,31 @@ function IDSTooltip({ position = "top", maxWidth, trigger, className, ...props }
             triggerWrapper.removeEventListener("focusin", handleXOverflow);
         };
     }, [triggerRef]);
-    return (jsx(IDSTooltipBase, { ...props, position: position, maxWidth: internalMaxWidth, trigger: trigger, triggerIsIcon: triggerIsIcon, className: className, triggerRef: triggerRef, tooltipContentRef: tooltipContentRef }));
+    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 }));
 }
+IDSTooltip.displayName = "IDSTooltip";
 
 export { IDSTooltip };

package/components/utils/hooks/useClickOutside.d.ts

@@ -1,10 +1,2 @@
 import { RefObject } from "react";
-/**
- * useClickOutside
- * Calls handler when a click occurs outside the provided ref(s)
- *
- * @param refs - one or more refs to consider "inside"
- * @param handler - callback when a click outside occurs
- * @param enabled - optional, defaults to true; disable the listener when false
- */
-export declare function useClickOutside(refs: RefObject<HTMLElement> | RefObject<HTMLElement>[], handler: (event: MouseEvent | TouchEvent) => void, enabled?: boolean): void;
+export declare function useClickOutside(callback: (event: MouseEvent | TouchEvent) => void, refs: RefObject<HTMLElement> | RefObject<HTMLElement>[], focusRef?: RefObject<HTMLElement>, enabled?: boolean): void;

package/components/utils/hooks/useClickOutside.js

@@ -1,31 +1,24 @@
 import { useEffect } from 'react';
 
-/**
- * useClickOutside
- * Calls handler when a click occurs outside the provided ref(s)
- *
- * @param refs - one or more refs to consider "inside"
- * @param handler - callback when a click outside occurs
- * @param enabled - optional, defaults to true; disable the listener when false
- */
-function useClickOutside(refs, handler, enabled = true) {
+function useClickOutside(callback, refs, focusRef, enabled = true) {
     useEffect(() => {
         if (!enabled)
             return;
         const elements = Array.isArray(refs) ? refs.map(r => r.current) : [refs.current];
-        const listener = (event) => {
+        const handler = (event) => {
             // If any element contains the click, do nothing
             if (elements.some(el => el && el.contains(event.target)))
                 return;
-            handler(event);
+            callback(event);
+            focusRef?.current?.focus({ preventScroll: true });
         };
-        document.addEventListener("mousedown", listener);
-        document.addEventListener("touchstart", listener);
+        document.addEventListener("mousedown", handler);
+        document.addEventListener("touchstart", handler);
         return () => {
-            document.removeEventListener("mousedown", listener);
-            document.removeEventListener("touchstart", listener);
+            document.removeEventListener("mousedown", handler);
+            document.removeEventListener("touchstart", handler);
         };
-    }, [refs, handler, enabled]);
+    }, [refs, callback, enabled]);
 }
 
 export { useClickOutside };

package/components/utils/hooks/useEsc.d.ts

@@ -1,10 +1,2 @@
 import { RefObject } from "react";
-/**
- * useEsc
- * Calls the provided callback when Escape is pressed and optionally focuses a ref
- *
- * @param callback - function to call when Escape is pressed
- * @param focusRef - optional ref to focus when Escape is pressed
- * @param enabled - optional, defaults to true; disables listener when false
- */
-export declare function useEsc(callback: () => void, focusRef?: RefObject<HTMLElement>, enabled?: boolean): void;
+export declare function useEsc(callback: (event: KeyboardEvent) => void, focusRef?: RefObject<HTMLElement>, containerRef?: RefObject<HTMLElement>, enabled?: boolean): void;

package/components/utils/hooks/useEsc.js

@@ -1,27 +1,24 @@
 import { useEffect } from 'react';
 
-/**
- * useEsc
- * Calls the provided callback when Escape is pressed and optionally focuses a ref
- *
- * @param callback - function to call when Escape is pressed
- * @param focusRef - optional ref to focus when Escape is pressed
- * @param enabled - optional, defaults to true; disables listener when false
- */
-function useEsc(callback, focusRef, enabled = true) {
+function useEsc(callback, focusRef, containerRef, enabled = true) {
     useEffect(() => {
         if (!enabled)
             return;
-        const handleKeyDown = (event) => {
-            if (event.key === "Escape") {
-                event.preventDefault();
-                callback();
-                focusRef?.current?.focus();
+        const handler = (event) => {
+            if (event.key !== "Escape")
+                return;
+            if (containerRef?.current) {
+                const active = document.activeElement;
+                if (!containerRef.current.contains(active))
+                    return;
             }
+            event.preventDefault();
+            callback(event);
+            focusRef?.current?.focus();
         };
-        document.addEventListener("keydown", handleKeyDown);
-        return () => document.removeEventListener("keydown", handleKeyDown);
-    }, [callback, focusRef, enabled]);
+        document.addEventListener("keydown", handler);
+        return () => document.removeEventListener("keydown", handler);
+    }, [callback, focusRef, enabled, containerRef]);
 }
 
 export { useEsc };

package/components/utils/hooks/useLinkClick.d.ts

@@ -0,0 +1,2 @@
+import { RefObject } from "react";
+export declare function useLinkClick(callback: (event: MouseEvent | TouchEvent) => void, containerRef: React.RefObject<HTMLElement>, focusRef?: RefObject<HTMLElement>, active?: boolean): void;

package/components/utils/hooks/useLinkClick.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react';
+
+function useLinkClick(callback, containerRef, focusRef, active = true) {
+    useEffect(() => {
+        if (!active)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        const elements = container.querySelectorAll("a");
+        const handler = (event) => {
+            callback(event);
+            focusRef?.current?.focus();
+        };
+        elements.forEach(el => el.addEventListener("click", handler));
+        return () => {
+            elements.forEach(el => el.removeEventListener("click", handler));
+        };
+    }, [containerRef, callback, active]);
+}
+
+export { useLinkClick };