@db-ux/react-core-components 4.11.1 → 4.12.1

package/dist/components/tooltip/tooltip.js

@@ -1,162 +1,199 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, delay as r, getBooleanAsString as i } from "../../utils/index.js";
-import { DEFAULT_ID as a } from "../../shared/constants.js";
-import { DocumentScrollListener as o } from "../../utils/document-scroll-listener.js";
-import { handleFixedPopover as s } from "../../utils/floating-components.js";
-import { forwardRef as c, useEffect as l, useId as u, useRef as d, useState as f } from "react";
-import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
-//#region src/components/tooltip/tooltip.tsx
-function g(c, g) {
-	let _ = u(), v = g || d(g), [y, b] = f(() => a), [x, S] = f(() => !1), [C, w] = f(() => void 0), [T, E] = f(() => void 0), [D, O] = f(() => void 0), [k, A] = f(() => void 0), [j, M] = f(() => 0), [N, P] = f(() => []);
-	function F(e) {
-		e.stopPropagation();
-	}
-	function I(e) {
-		(!e || e.key === "Escape") && v.current && getComputedStyle(v.current).visibility === "visible" && L().blur();
-	}
-	function L() {
-		let e = v.current.parentElement;
-		return e && e.localName.includes("tooltip") && (e = e.parentElement), e;
-	}
-	function R(e) {
-		e && v.current && r(() => {
-			v.current && s(v.current, e, c.placement ?? "bottom");
-		}, 1);
-	}
-	function z(e, t) {
-		e?.target?.contains && e?.target?.contains(v.current) && R(t);
-	}
-	function B() {
-		M(Math.max((j ?? 0) - 1, 0)), !((j ?? 0) > 0) && (C && (new o().removeCallback(C), w(void 0)), T?.unobserve(L()));
-	}
-	function V(e) {
-		M((j ?? 0) + 1), j === 1 && (w(new o().addCallback((t) => z(t, e))), T?.observe(L())), R(e);
-	}
-	function H() {
-		b(c.id ?? c.propOverrides?.id ?? "tooltip-" + _);
-	}
-	function U() {
-		let e = C;
-		e && (new o().removeCallback(e), w(void 0)), T?.disconnect(), E(void 0), M(0), (N ?? []).forEach((e) => {
-			e.parent.removeEventListener(e.type, e.fn);
-		}), P([]);
-		let t = D;
-		if (t) {
-			let e = k ?? y, n = t.querySelectorAll(".db-tooltip"), r = Array.from(n).some((e) => e !== v.current);
-			t.dataset.hasTooltip === "true" && !r && delete t.dataset.hasTooltip, t.getAttribute("aria-labelledby") === e && t.removeAttribute("aria-labelledby"), t.getAttribute("aria-describedby") === e && t.removeAttribute("aria-describedby"), O(void 0), A(void 0);
-		}
-	}
-	return l(() => {
-		H(), S(!0);
-	}, []), l(() => {
-		(c.id ?? c.propOverrides?.id) && H();
-	}, [c.id, c.propOverrides?.id]), l(() => {
-		if (v.current && x && y) {
-			let e = L();
-			if (e) {
-				R(e);
-				let t = () => V(e), n = () => B(), r = (e) => I(e);
-				e.addEventListener("mouseenter", t), e.addEventListener("focusin", t), e.addEventListener("keydown", r), e.addEventListener("mouseleave", n), e.addEventListener("focusout", n), P([
-					...N ?? [],
-					{
-						parent: e,
-						type: "mouseenter",
-						fn: t
-					},
-					{
-						parent: e,
-						type: "focusin",
-						fn: t
-					},
-					{
-						parent: e,
-						type: "keydown",
-						fn: r
-					},
-					{
-						parent: e,
-						type: "mouseleave",
-						fn: n
-					},
-					{
-						parent: e,
-						type: "focusout",
-						fn: n
-					}
-				]), e.dataset.hasTooltip = "true", c.variant === "label" ? e.setAttribute("aria-labelledby", y) : e.setAttribute("aria-describedby", y), O(e), A(y);
-			}
-			typeof window < "u" && "IntersectionObserver" in window && E(new IntersectionObserver((e) => {
-				let t = e.find(({ target: e }) => e === L());
-				t && !t.isIntersecting && I(!1);
-			})), S(!1);
-		}
-	}, [
-		v.current,
-		x,
-		y
-	]), l(() => () => {
-		U();
-	}, []), /* @__PURE__ */ h("i", {
-		role: "tooltip",
-		"aria-hidden": "true",
-		"data-gap": "true",
-		ref: v,
-		...e(c, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		...t(c, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-tooltip", c.className),
-		id: y,
-		"data-emphasis": c.emphasis,
-		"data-wrap": i(c.wrap, "wrap"),
-		"data-animation": i(c.animation ?? !0, "animation"),
-		"data-delay": c.delay,
-		"data-width": c.width,
-		"data-show-arrow": i(c.showArrow ?? !0, "showArrow"),
-		"data-placement": c.placement,
-		onClick: (e) => F(e),
-		children: [c.text ? /* @__PURE__ */ m(p, { children: c.text }) : null, c.children]
-	});
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_ID } from "../../shared/constants.js";
+import { cls, getBooleanAsString, delay as utilsDelay } from "../../utils/index.js";
+import { DocumentScrollListener } from "../../utils/document-scroll-listener.js";
+import { handleFixedPopover } from "../../utils/floating-components.js";
+import { useId } from "react";
+function DBTooltipFn(props, component) {
+    const uuid = useId();
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => DEFAULT_ID);
+    const [initialized, setInitialized] = useState(() => false);
+    const [_documentScrollListenerCallbackId, set_documentScrollListenerCallbackId,] = useState(() => undefined);
+    const [_observer, set_observer] = useState(() => undefined);
+    const [_attachedParent, set_attachedParent] = useState(() => undefined);
+    const [_attachedId, set_attachedId] = useState(() => undefined);
+    const [_activeTriggerCount, set_activeTriggerCount] = useState(() => 0);
+    const [_boundListeners, set_boundListeners] = useState(() => []);
+    function handleClick(event) {
+        event.stopPropagation();
+    }
+    function handleEscape(event) {
+        if ((!event || event.key === "Escape") &&
+            _ref.current &&
+            getComputedStyle(_ref.current).visibility === "visible") {
+            getParent().blur();
+        }
+    }
+    function getParent() {
+        let parent = _ref.current.parentElement;
+        if (parent && parent.localName.includes("tooltip")) {
+            // Angular workaround
+            parent = parent.parentElement;
+        }
+        return parent;
+    }
+    function handleAutoPlacement(parent) {
+        if (!parent)
+            return;
+        if (_ref.current) {
+            // This is a workaround for angular
+            void utilsDelay(() => {
+                // Due to race conditions we need to check for _ref again
+                if (_ref.current) {
+                    handleFixedPopover(_ref.current, parent, props.placement ?? "bottom");
+                }
+            }, 1);
+        }
+    }
+    function handleDocumentScroll(event, parent) {
+        if (event?.target?.contains && event?.target?.contains(_ref.current)) {
+            handleAutoPlacement(parent);
+        }
+    }
+    function handleLeave() {
+        // Multiple triggers (hover + focus) can be active at once. Only tear
+        // down the shared scroll callback/observer once the last one leaves.
+        set_activeTriggerCount(Math.max((_activeTriggerCount ?? 0) - 1, 0));
+        if ((_activeTriggerCount ?? 0) > 0) {
+            return;
+        }
+        if (_documentScrollListenerCallbackId) {
+            new DocumentScrollListener().removeCallback(_documentScrollListenerCallbackId);
+            set_documentScrollListenerCallbackId(undefined);
+        }
+        _observer?.unobserve(getParent());
+    }
+    function handleEnter(parent) {
+        // Register the shared scroll callback only for the first active
+        // trigger; a second enter (e.g. focusin after mouseenter) must not
+        // orphan the first callback.
+        set_activeTriggerCount((_activeTriggerCount ?? 0) + 1);
+        if (_activeTriggerCount === 1) {
+            set_documentScrollListenerCallbackId(new DocumentScrollListener().addCallback((event) => handleDocumentScroll(event, parent)));
+            _observer?.observe(getParent());
+        }
+        handleAutoPlacement(parent);
+    }
+    function resetIds() {
+        set_id(props.id ?? props.propOverrides?.id ?? "tooltip-" + uuid);
+    }
+    function _detachListeners() {
+        const callbackId = _documentScrollListenerCallbackId;
+        if (callbackId) {
+            new DocumentScrollListener().removeCallback(callbackId);
+            set_documentScrollListenerCallbackId(undefined);
+        }
+        _observer?.disconnect();
+        set_observer(undefined);
+        set_activeTriggerCount(0);
+        const bound = _boundListeners ?? [];
+        bound.forEach((entry) => {
+            entry.parent.removeEventListener(entry.type, entry.fn);
+        });
+        set_boundListeners([]);
+        // Remove attributes this tooltip set on its parent, but only while
+        // they still belong to this tooltip (avoid clobbering another one).
+        const parent = _attachedParent;
+        if (parent) {
+            const attachedId = _attachedId ?? _id;
+            // Only remove data-has-tooltip when no other .db-tooltip
+            // siblings remain inside the same parent.
+            const remainingTooltips = parent.querySelectorAll(".db-tooltip");
+            const otherTooltipsExist = Array.from(remainingTooltips).some((el) => el !== _ref.current);
+            if (parent.dataset["hasTooltip"] === "true" && !otherTooltipsExist) {
+                delete parent.dataset["hasTooltip"];
+            }
+            if (parent.getAttribute("aria-labelledby") === attachedId) {
+                parent.removeAttribute("aria-labelledby");
+            }
+            if (parent.getAttribute("aria-describedby") === attachedId) {
+                parent.removeAttribute("aria-describedby");
+            }
+            set_attachedParent(undefined);
+            set_attachedId(undefined);
+        }
+    }
+    useEffect(() => {
+        resetIds();
+        setInitialized(true);
+    }, []);
+    useEffect(() => {
+        if (props.id ?? props.propOverrides?.id) {
+            resetIds();
+        }
+    }, [props.id, props.propOverrides?.id]);
+    useEffect(() => {
+        if (_ref.current && initialized && _id) {
+            const parent = getParent();
+            if (parent) {
+                handleAutoPlacement(parent);
+                const enterListener = () => handleEnter(parent);
+                const leaveListener = () => handleLeave();
+                const keyDownListener = (event) => handleEscape(event);
+                parent.addEventListener("mouseenter", enterListener);
+                parent.addEventListener("focusin", enterListener);
+                parent.addEventListener("keydown", keyDownListener);
+                parent.addEventListener("mouseleave", leaveListener);
+                parent.addEventListener("focusout", leaveListener);
+                set_boundListeners([
+                    ...(_boundListeners ?? []),
+                    {
+                        parent,
+                        type: "mouseenter",
+                        fn: enterListener,
+                    },
+                    {
+                        parent,
+                        type: "focusin",
+                        fn: enterListener,
+                    },
+                    {
+                        parent,
+                        type: "keydown",
+                        fn: keyDownListener,
+                    },
+                    {
+                        parent,
+                        type: "mouseleave",
+                        fn: leaveListener,
+                    },
+                    {
+                        parent,
+                        type: "focusout",
+                        fn: leaveListener,
+                    },
+                ]);
+                parent.dataset["hasTooltip"] = "true";
+                if (props.variant === "label") {
+                    parent.setAttribute("aria-labelledby", _id);
+                }
+                else {
+                    parent.setAttribute("aria-describedby", _id);
+                }
+                set_attachedParent(parent);
+                set_attachedId(_id);
+            }
+            if (typeof window !== "undefined" && "IntersectionObserver" in window) {
+                set_observer(new IntersectionObserver((payload) => {
+                    const entry = payload.find(({ target }) => target === getParent());
+                    if (entry && !entry.isIntersecting) {
+                        handleEscape(false);
+                    }
+                }));
+            }
+            setInitialized(false);
+        }
+    }, [_ref.current, initialized, _id]);
+    useEffect(() => {
+        return () => {
+            _detachListeners();
+        };
+    }, []);
+    return (_jsxs("i", { role: "tooltip", "aria-hidden": "true", "data-gap": "true", ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-tooltip", props.className), id: _id, "data-emphasis": props.emphasis, "data-wrap": getBooleanAsString(props.wrap, "wrap"), "data-animation": getBooleanAsString(props.animation ?? true, "animation"), "data-delay": props.delay, "data-width": props.width, "data-show-arrow": getBooleanAsString(props.showArrow ?? true, "showArrow"), "data-placement": props.placement, onClick: (event) => handleClick(event), children: [props.text ? _jsx(_Fragment, { children: props.text }) : null, props.children] }));
 }
-var _ = c(g);
-//#endregion
-export { _ as default };
+const DBTooltip = forwardRef(DBTooltipFn);
+export default DBTooltip;

package/dist/index.d.ts

@@ -1,97 +1,97 @@
-export * from './components/accordion';
-export * from './components/accordion-item';
-export * from './components/accordion-item/model';
-export * from './components/accordion/model';
-export * from './components/badge';
-export * from './components/badge/model';
-export * from './components/brand';
-export * from './components/brand/model';
-export * from './components/button';
-export * from './components/button/model';
-export * from './components/card';
-export * from './components/card/model';
-export * from './components/checkbox';
-export * from './components/checkbox/model';
-export * from './components/custom-button';
-export * from './components/custom-button/model';
-export * from './components/custom-select';
-export * from './components/custom-select-dropdown';
-export * from './components/custom-select-dropdown/model';
-export * from './components/custom-select-form-field';
-export * from './components/custom-select-form-field/model';
-export * from './components/custom-select-list';
-export * from './components/custom-select-list-item';
-export * from './components/custom-select-list-item/model';
-export * from './components/custom-select-list/model';
-export * from './components/custom-select/model';
-export * from './components/divider';
-export * from './components/divider/model';
-export * from './components/drawer';
-export * from './components/drawer/model';
-export * from './components/header';
-export * from './components/header/model';
-export * from './components/icon';
-export * from './components/icon/model';
-export * from './components/infotext';
-export * from './components/infotext/model';
-export * from './components/input';
-export * from './components/input/model';
-export * from './components/link';
-export * from './components/link/model';
-export * from './components/navigation';
-export * from './components/navigation-item';
-export * from './components/navigation-item/model';
-export * from './components/navigation/model';
-export * from './components/notification';
-export * from './components/notification/model';
-export * from './components/page';
-export * from './components/page/model';
-export * from './components/popover';
-export * from './components/popover/model';
-export * from './components/radio';
-export * from './components/radio/model';
-export * from './components/section';
-export * from './components/section/model';
-export * from './components/select';
-export * from './components/select/model';
-export * from './components/stack';
-export * from './components/stack/model';
-export * from './components/switch';
-export * from './components/switch/model';
-export * from './components/tab-item';
-export * from './components/tab-item/model';
-export * from './components/tab-list';
-export * from './components/tab-list/model';
-export * from './components/tab-panel';
-export * from './components/tab-panel/model';
-export * from './components/table';
-export * from './components/table-body';
-export * from './components/table-body/model';
-export * from './components/table-caption';
-export * from './components/table-caption/model';
-export * from './components/table-data-cell';
-export * from './components/table-data-cell/model';
-export * from './components/table-footer';
-export * from './components/table-footer/model';
-export * from './components/table-head';
-export * from './components/table-head/model';
-export * from './components/table-header-cell';
-export * from './components/table-header-cell/model';
-export * from './components/table-row';
-export * from './components/table-row/model';
-export * from './components/table/model';
-export * from './components/tabs';
-export * from './components/tabs/model';
-export * from './components/tag';
-export * from './components/tag/model';
-export * from './components/textarea';
-export * from './components/textarea/model';
-export * from './components/tooltip';
-export * from './components/tooltip/model';
-export * from './shared/constants';
-export * from './shared/model';
-export * from './utils/document-click-listener';
-export * from './utils/document-scroll-listener';
-export * from './utils/floating-components';
-export * from './utils/index';
-export * from './utils/navigation';
+export * from './components/accordion/index.js';
+export * from './components/accordion-item/index.js';
+export * from './components/accordion-item/model.js';
+export * from './components/accordion/model.js';
+export * from './components/badge/index.js';
+export * from './components/badge/model.js';
+export * from './components/brand/index.js';
+export * from './components/brand/model.js';
+export * from './components/button/index.js';
+export * from './components/button/model.js';
+export * from './components/card/index.js';
+export * from './components/card/model.js';
+export * from './components/checkbox/index.js';
+export * from './components/checkbox/model.js';
+export * from './components/custom-button/index.js';
+export * from './components/custom-button/model.js';
+export * from './components/custom-select/index.js';
+export * from './components/custom-select-dropdown/index.js';
+export * from './components/custom-select-dropdown/model.js';
+export * from './components/custom-select-form-field/index.js';
+export * from './components/custom-select-form-field/model.js';
+export * from './components/custom-select-list/index.js';
+export * from './components/custom-select-list-item/index.js';
+export * from './components/custom-select-list-item/model.js';
+export * from './components/custom-select-list/model.js';
+export * from './components/custom-select/model.js';
+export * from './components/divider/index.js';
+export * from './components/divider/model.js';
+export * from './components/drawer/index.js';
+export * from './components/drawer/model.js';
+export * from './components/header/index.js';
+export * from './components/header/model.js';
+export * from './components/icon/index.js';
+export * from './components/icon/model.js';
+export * from './components/infotext/index.js';
+export * from './components/infotext/model.js';
+export * from './components/input/index.js';
+export * from './components/input/model.js';
+export * from './components/link/index.js';
+export * from './components/link/model.js';
+export * from './components/navigation/index.js';
+export * from './components/navigation-item/index.js';
+export * from './components/navigation-item/model.js';
+export * from './components/navigation/model.js';
+export * from './components/notification/index.js';
+export * from './components/notification/model.js';
+export * from './components/page/index.js';
+export * from './components/page/model.js';
+export * from './components/popover/index.js';
+export * from './components/popover/model.js';
+export * from './components/radio/index.js';
+export * from './components/radio/model.js';
+export * from './components/section/index.js';
+export * from './components/section/model.js';
+export * from './components/select/index.js';
+export * from './components/select/model.js';
+export * from './components/stack/index.js';
+export * from './components/stack/model.js';
+export * from './components/switch/index.js';
+export * from './components/switch/model.js';
+export * from './components/tab-item/index.js';
+export * from './components/tab-item/model.js';
+export * from './components/tab-list/index.js';
+export * from './components/tab-list/model.js';
+export * from './components/tab-panel/index.js';
+export * from './components/tab-panel/model.js';
+export * from './components/table/index.js';
+export * from './components/table-body/index.js';
+export * from './components/table-body/model.js';
+export * from './components/table-caption/index.js';
+export * from './components/table-caption/model.js';
+export * from './components/table-data-cell/index.js';
+export * from './components/table-data-cell/model.js';
+export * from './components/table-footer/index.js';
+export * from './components/table-footer/model.js';
+export * from './components/table-head/index.js';
+export * from './components/table-head/model.js';
+export * from './components/table-header-cell/index.js';
+export * from './components/table-header-cell/model.js';
+export * from './components/table-row/index.js';
+export * from './components/table-row/model.js';
+export * from './components/table/model.js';
+export * from './components/tabs/index.js';
+export * from './components/tabs/model.js';
+export * from './components/tag/index.js';
+export * from './components/tag/model.js';
+export * from './components/textarea/index.js';
+export * from './components/textarea/model.js';
+export * from './components/tooltip/index.js';
+export * from './components/tooltip/model.js';
+export * from './shared/constants.js';
+export * from './shared/model.js';
+export * from './utils/document-click-listener.js';
+export * from './utils/document-scroll-listener.js';
+export * from './utils/floating-components.js';
+export * from './utils/index.js';
+export * from './utils/navigation.js';