@inera/ids-react 8.2.0 → 9.0.1

package/components/stepper/step.js

@@ -1,41 +1,25 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useState, useEffect } from 'react';
-import '@inera/ids-design/components/stepper/stepper.css';
-import clsx from 'clsx';
+import { jsx } from 'react/jsx-runtime';
+import React, { forwardRef, useState, useEffect, useImperativeHandle } from 'react';
+import { IDSStepBase } from './step-base.js';
 
-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);
+const IDSStep = forwardRef(({ state = "", headline, label, stepNumber = "", srIndicatorText = "", expanded: expandedProp = false, disabled = false, onToggleStep, onExpanded, onClosed, className, ...props }, ref) => {
+    const [isExpanded, setIsExpanded] = useState(expandedProp);
+    const internalRef = React.useRef(null);
     useEffect(() => {
-        setExpanded(expandedProp);
+        setIsExpanded(expandedProp);
     }, [expandedProp]);
     useEffect(() => {
-        onToggleExpansion?.(Number(stepNumber), expanded);
-        expanded ? onExpanded?.() : onClosed?.();
-    }, [expanded]);
-    const toggleExpansion = () => {
-        if (!disabled) {
-            setExpanded(prev => !prev);
-        }
+        onToggleStep?.(stepNumber, isExpanded);
+        isExpanded ? onExpanded?.() : onClosed?.();
+    }, [isExpanded]);
+    useImperativeHandle(ref, () => internalRef.current);
+    const handleToggleStep = () => {
+        if (!disabled)
+            setIsExpanded(prev => !prev);
     };
-    const handleKeyPress = (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            toggleExpansion();
-        }
-    };
-    const renderStepIndicator = () => {
-        if (state === "valid" || state === "invalid")
-            return null;
-        return stepNumber;
-    };
-    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
-                                    }) })] })] }) }), jsx("div", { className: clsx("ids-step__content", {
-                    "ids-step__content--expanded": expanded
-                }), children: children })] }));
-};
+    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 }));
+});
+IDSStep.displayName = "IDSStep";
 
 export { IDSStep };

package/components/stepper/stepper.d.ts

@@ -1,9 +1,7 @@
 import React, { ReactElement } from "react";
-import { IDSStepProps } from "./step";
-import "@inera/ids-design/components/stepper/stepper.css";
-interface IDSStepperProps extends React.HTMLAttributes<HTMLDivElement> {
+import type { IDSStepProps } from "./step";
+export interface IDSStepperProps extends React.HTMLAttributes<HTMLDivElement> {
     children: ReactElement<IDSStepProps>[] | ReactElement<IDSStepProps>;
-    onToggleExpansion?: (step: number, expanded: boolean) => void;
+    onToggleStep?: (step: string, expanded: boolean) => void;
 }
-export declare function IDSStepper({ children, onToggleExpansion, className, ...props }: IDSStepperProps): import("react/jsx-runtime").JSX.Element;
-export {};
+export declare function IDSStepper({ children, onToggleStep, className, ...props }: IDSStepperProps): import("react/jsx-runtime").JSX.Element;

package/components/stepper/stepper.js

@@ -1,22 +1,17 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
 import React, { isValidElement, cloneElement } from 'react';
-import '@inera/ids-design/components/stepper/stepper.css';
 import clsx from 'clsx';
 
-function IDSStepper({ children, onToggleExpansion, className, ...props }) {
+function IDSStepper({ children, onToggleStep, className, ...props }) {
     const stepsArray = React.Children.toArray(children).filter(isValidElement);
-    const handleExpansion = (step, expanded) => {
-        onToggleExpansion?.(step, expanded);
+    const handleToggleStep = (step, expanded) => {
+        onToggleStep?.(step, expanded);
     };
-    const enhancedSteps = stepsArray.map((step, index) => {
-        return cloneElement(step, {
-            key: `step-key-${index}`,
-            stepNumber: `${index + 1}`,
-            last: index === stepsArray.length - 1 ? "true" : "false",
-            onToggleExpansion: handleExpansion
-        });
-    });
+    const enhancedSteps = stepsArray.map((step, index) => cloneElement(step, {
+        key: `step-key-${index}`,
+        stepNumber: `${index + 1}`,
+        onToggleStep: handleToggleStep
+    }));
     return (jsx("div", { className: clsx("ids-stepper", className), ...props, children: enhancedSteps }));
 }
 

package/components/tabs/tab-link.d.ts

@@ -0,0 +1,15 @@
+import React, { ReactNode, KeyboardEventHandler } from "react";
+export interface IDSTabLinkProps {
+    notices?: number;
+    href: string;
+    label: string;
+    index?: string;
+    id?: string;
+    panelId?: string;
+    icon?: string;
+    selected?: boolean;
+    notification?: ReactNode;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    className?: string;
+}
+export declare const IDSTabLink: React.ForwardRefExoticComponent<IDSTabLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/components/tabs/tab-link.js

@@ -0,0 +1,10 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import clsx from 'clsx';
+
+const IDSTabLink = forwardRef(({ label, index = "", href, id = "", panelId = "", selected = false, icon = "", notification, onKeyDown, className, ...props }, ref) => {
+    return (jsx("a", { ...props, ref: ref, href: href, id: id, role: "tab", "aria-selected": selected, "aria-controls": panelId, className: clsx("ids-tab", { "ids-tab--selected": selected }, className), onKeyDown: onKeyDown, children: jsxs("div", { className: "ids-tab__label", children: [icon && jsx("span", { className: `ids-tab-icon ids-icon-${icon} ids-icon--m`, "aria-hidden": "true" }), label, notification] }) }));
+});
+IDSTabLink.displayName = "IDSTabLink";
+
+export { IDSTabLink };

package/components/tabs/tab-panel.d.ts

@@ -1,11 +1,9 @@
-import React, { ReactNode } from "react";
-import "@inera/ids-design/components/tabs/tab-panel.css";
+import React from "react";
 export interface IDSTabPanelProps extends React.HTMLAttributes<HTMLDivElement> {
     compact?: boolean;
     noFocus?: boolean;
     selected?: boolean;
-    children?: ReactNode;
     id?: string;
     tabId?: string;
 }
-export declare const IDSTabPanel: React.FC<IDSTabPanelProps>;
+export declare const IDSTabPanel: React.ForwardRefExoticComponent<IDSTabPanelProps & React.RefAttributes<HTMLDivElement>>;

package/components/tabs/tab-panel.js

@@ -1,20 +1,13 @@
-"use client";
 import { jsx } from 'react/jsx-runtime';
-import { useRef, useEffect } from 'react';
-import '@inera/ids-design/components/tabs/tab-panel.css';
+import { forwardRef } from 'react';
 import clsx from 'clsx';
 
-const IDSTabPanel = ({ compact = false, noFocus = false, selected = false, id = "", tabId = "", children, className, ...props }) => {
-    const panelRef = useRef(null);
-    useEffect(() => {
-        if (panelRef.current && !noFocus) {
-            panelRef.current.setAttribute("tabindex", "0");
-        }
-    }, [noFocus]);
-    return (jsx("div", { ref: panelRef, role: "tabpanel", id: id, "aria-hidden": !selected, "aria-labelledby": tabId, hidden: !selected, className: clsx("ids-tab-panel", {
+const IDSTabPanel = forwardRef(({ compact = false, noFocus = false, selected = false, id = "", tabId = "", className, children, ...props }, ref) => {
+    return (jsx("div", { ref: ref, role: "tabpanel", id: id, "aria-hidden": !selected, "aria-labelledby": tabId, hidden: !selected, tabIndex: noFocus ? undefined : 0, className: clsx("ids-tab-panel", {
             "ids-tab-panel--selected": selected,
             "ids-tab-panel--compact": compact
         }, className), ...props, children: children }));
-};
+});
+IDSTabPanel.displayName = "IDSTabPanel";
 
 export { IDSTabPanel };

package/components/tabs/tab.d.ts

@@ -1,6 +1,5 @@
-import React, { ReactNode, KeyboardEvent } from "react";
-import "@inera/ids-design/components/tabs/tab.css";
-export interface IDSTabProps extends React.HTMLAttributes<HTMLDivElement> {
+import React, { ReactNode, KeyboardEventHandler } from "react";
+export interface IDSTabProps {
     notices?: number;
     label: string;
     index?: string;
@@ -10,6 +9,7 @@ export interface IDSTabProps extends React.HTMLAttributes<HTMLDivElement> {
     selected?: boolean;
     notification?: ReactNode;
     onTabClick?: (index: string) => void;
-    onKeyDown?: (e: KeyboardEvent) => void;
+    onKeyDown?: KeyboardEventHandler<HTMLElement>;
+    className?: string;
 }
-export declare const IDSTab: React.FC<IDSTabProps>;
+export declare const IDSTab: React.ForwardRefExoticComponent<IDSTabProps & React.RefAttributes<HTMLDivElement>>;

package/components/tabs/tab.js

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

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

@@ -0,0 +1,15 @@
+import React, { ReactElement, ReactNode } from "react";
+import { IDSTabProps } from "./tab";
+import "@inera/ids-design/components/tabs/tabs.css";
+interface IDSTabsBaseProps extends React.HTMLAttributes<HTMLDivElement> {
+    activeTab?: number;
+    unresponsive?: boolean;
+    light?: boolean;
+    compact?: boolean;
+    breakpoint?: "m" | "s";
+    selectLabel?: string;
+    tabs?: ReactElement<IDSTabProps>[];
+    select?: ReactNode;
+}
+export declare function IDSTabsBase({ unresponsive, light, compact, breakpoint, selectLabel, tabs, className, children, select, ...props }: IDSTabsBaseProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/components/tabs/tabs-base.js

@@ -0,0 +1,15 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import '@inera/ids-design/components/tabs/tabs.css';
+
+function IDSTabsBase({ unresponsive = false, light = false, compact = false, breakpoint = "m", selectLabel = "", tabs = [], className, children, select, ...props }) {
+    const responsiveOnM = breakpoint === "m" && !unresponsive;
+    const responsiveOnS = breakpoint === "s" && !unresponsive;
+    return (jsxs("div", { ...props, className: clsx("ids-tabs", {
+            "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: select }), jsx("div", { className: "ids-tabs__tabs", role: "tablist", children: tabs }), jsx("div", { className: "ids-tabs__panels", children: children })] }));
+}
+
+export { IDSTabsBase };

package/components/tabs/tabs.d.ts

@@ -1,15 +1,12 @@
-import React, { ReactNode, ReactElement } from "react";
-import "@inera/ids-design/components/tabs/tabs.css";
+import React, { ReactElement } from "react";
 import { IDSTabProps } from "./tab";
-interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+export interface IDSTabsProps extends React.HTMLAttributes<HTMLDivElement> {
+    tabs?: ReactElement<IDSTabProps>[];
+    onTabChange?: (index: number) => void;
     unresponsive?: boolean;
     light?: boolean;
     compact?: boolean;
     breakpoint?: "m" | "s";
     selectLabel?: string;
-    tabs?: ReactElement<IDSTabProps>[];
-    children?: ReactNode;
-    onTabChange?: (index: number) => void;
 }
-export declare const IDSTabs: React.FC<IDSTabsProps>;
-export {};
+export declare function IDSTabs({ tabs, selectLabel, light, compact, breakpoint, children, onTabChange, ...props }: IDSTabsProps): import("react/jsx-runtime").JSX.Element;

package/components/tabs/tabs.js

@@ -1,52 +1,65 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React, { useState } from 'react';
+import { jsx } from 'react/jsx-runtime';
+import React, { useId, useState } from 'react';
+import { IDSTabsBase } from './tabs-base.js';
 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, ...props }) => {
-    const tabsId = useElementId();
+function IDSTabs({ tabs = [], selectLabel, light, compact, breakpoint, children, onTabChange, ...props }) {
+    const reactId = useId();
+    const getTabId = (index) => `tab-${reactId}-${index}`;
+    const getTabPanelId = (index) => `tab-panel-${reactId}-${index}`;
     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;
-    const handleSelect = (index) => {
+    const handleTabChange = (index) => {
         setActiveTab(index);
         onTabChange?.(index);
     };
+    const tabChangedFromSelect = (e) => {
+        handleTabChange?.(Number(e.target.value));
+    };
+    const renderTabOptions = () => tabs?.map((tab, i) => {
+        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.isValidElement(notification)) {
+            const badge = notification;
+            const childTexts = React.Children.toArray(badge.props.children)
+                .map(child => (typeof child === "string" || typeof child === "number" ? child : ""))
+                .join("");
+            notificationText = childTexts.trim();
+        }
+        const optionLabel = notificationText ? `${label} (${notificationText})` : label;
+        return (jsx("option", { value: i, children: optionLabel }, i));
+    });
     const handleKeydown = (e, index) => {
         if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
-            handleSelect(index);
+            handleTabChange?.(index);
         }
         else if (e.key === "ArrowLeft" && index > 0) {
             e.preventDefault();
-            document.getElementById(getTabId(index - 1))?.focus();
+            document.getElementById(getTabId?.(index - 1))?.focus();
         }
         else if (e.key === "ArrowRight" && index < tabs.length - 1) {
             e.preventDefault();
             document.getElementById(getTabId(index + 1))?.focus();
         }
     };
-    const getTabId = (index) => {
-        return `${tabsId}-tab-${index}`;
-    };
-    const getTabPanelId = (index) => {
-        return `${tabsId}-tab-panel-${index}`;
-    };
     const enhancedTabs = React.Children.map(tabs, (tab, idx) => {
         if (!React.isValidElement(tab))
             return tab;
         return React.cloneElement(tab, {
             key: `tab-key-${idx}`,
-            id: getTabId(idx),
-            panelId: getTabPanelId(idx),
+            id: getTabId?.(idx),
+            panelId: getTabPanelId?.(idx),
             index: `${idx}`,
             label: tab.props.label,
             selected: activeTab === idx,
-            onTabClick: () => handleSelect(idx),
+            onTabClick: () => handleTabChange?.(idx),
             onKeyDown: (e) => handleKeydown(e, idx)
         });
     });
@@ -55,41 +68,15 @@ const IDSTabs = ({ unresponsive = false, light = false, compact = false, breakpo
             return panel;
         return React.cloneElement(panel, {
             key: `tab-panel-key-${idx}`,
-            id: getTabPanelId(idx),
-            tabId: getTabId(idx),
+            id: getTabPanelId?.(idx),
+            tabId: getTabId?.(idx),
             role: "tabpanel",
             hidden: activeTab !== idx,
             selected: activeTab === idx,
             compact
         });
     });
-    const tabChangedFromSelect = (e) => {
-        const index = Number(e.target.value);
-        handleSelect(index);
-    };
-    const renderTabOptions = () => tabs?.map((tab, i) => {
-        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.isValidElement(notification)) {
-            const badge = notification;
-            const childTexts = React.Children.toArray(badge.props.children)
-                .map(child => (typeof child === "string" || typeof child === "number" ? child : ""))
-                .join("");
-            notificationText = childTexts.trim();
-        }
-        const optionLabel = notificationText ? `${label} (${notificationText})` : label;
-        return (jsx("option", { value: i, children: optionLabel }, i));
-    });
-    return (jsxs("div", { className: clsx("ids-tabs", {
-            "ids-tabs--unresponsive": unresponsive,
-            "ids-tabs--responsive-on-m": responsiveOnM,
-            "ids-tabs--responsive-on-s": responsiveOnS
-        }, 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 })] }));
-};
+    return (jsx(IDSTabsBase, { ...props, tabs: enhancedTabs, breakpoint: breakpoint, select: jsx(IDSSelect, { label: selectLabel, onChange: tabChangedFromSelect, value: activeTab, light: light, children: renderTabOptions() }), children: enhancedTabPanels }));
+}
 
 export { IDSTabs };

package/components/tag/tag.d.ts

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

package/components/tag/tag.js

@@ -1,15 +1,10 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import '@inera/ids-design/components/tag/tag.css';
 import clsx from 'clsx';
+import '@inera/ids-design/components/tag/tag.css';
 
-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?.();
-                    } }))] }) }));
+const IDSTag = 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";
 

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

@@ -0,0 +1,14 @@
+import React, { ReactNode } from "react";
+import "@inera/ids-design/components/tooltip/tooltip.css";
+export type TooltipPosition = "top-left" | "top" | "top-right" | "bottom-left" | "bottom" | "bottom-right";
+export interface IDSTooltipBaseProps extends React.HTMLAttributes<HTMLSpanElement> {
+    position?: TooltipPosition;
+    maxWidth?: string;
+    translateX?: string;
+    translateY?: string;
+    trigger: ReactNode;
+    triggerIsIcon?: boolean;
+    triggerRef?: React.Ref<HTMLSpanElement>;
+    tooltipContentRef?: React.Ref<HTMLSpanElement>;
+}
+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

@@ -0,0 +1,18 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+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 }) {
+    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", id: tooltipId, style: { transform: `translate(${translateX}, ${translateY})`, maxWidth }, children: children })] }));
+}
+
+export { IDSTooltipBase };

package/components/tooltip/tooltip.d.ts

@@ -1,11 +1,4 @@
-import React, { ReactNode } from "react";
-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;
+import { IDSTooltipBaseProps } from "./tooltip-base";
+export interface IDSTooltipProps extends Omit<IDSTooltipBaseProps, "translateX" | "translateY"> {
 }
-export declare const IDSTooltip: React.FC<IDSTooltipProps>;
-export {};
+export declare function IDSTooltip({ position, maxWidth, trigger, className, ...props }: IDSTooltipProps): import("react/jsx-runtime").JSX.Element;