@adatechnology/conversations-ui 0.1.0-rc.3 → 0.1.0-rc.30

package/dist/chunk-DXPSPUWF.js

@@ -0,0 +1,110 @@
+// src/Tooltip.tsx
+import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx } from "react/jsx-runtime";
+var TOOLTIP_ATTRIBUTE = "data-cv-tooltip";
+var TOOLTIP_DELAY_MS = 120;
+var TOOLTIP_GAP_PX = 8;
+var TOOLTIP_EDGE_PX = 72;
+function tooltipPositionOf({ targetRect, viewportWidth }) {
+  const placement = targetRect.top < TOOLTIP_EDGE_PX ? "bottom" : "top";
+  const centerX = targetRect.left + targetRect.width / 2;
+  return {
+    left: Math.min(Math.max(centerX, TOOLTIP_EDGE_PX), viewportWidth - TOOLTIP_EDGE_PX),
+    top: placement === "top" ? targetRect.top - TOOLTIP_GAP_PX : targetRect.bottom + TOOLTIP_GAP_PX,
+    placement
+  };
+}
+function tooltipStateFor(target, text) {
+  const position = tooltipPositionOf({
+    targetRect: target.getBoundingClientRect(),
+    viewportWidth: window.innerWidth
+  });
+  return { text, ...position };
+}
+var layerOwner;
+function TooltipLayer() {
+  const identity = useRef({});
+  const [isOwner, setIsOwner] = useState(false);
+  const [tooltip, setTooltip] = useState(void 0);
+  useEffect(() => {
+    const owned = identity.current;
+    if (layerOwner && layerOwner !== owned) return void 0;
+    layerOwner = owned;
+    setIsOwner(true);
+    return () => {
+      if (layerOwner === owned) layerOwner = void 0;
+    };
+  }, []);
+  useEffect(() => {
+    if (!isOwner) return void 0;
+    let timer;
+    function cancelPending() {
+      if (timer) clearTimeout(timer);
+      timer = void 0;
+    }
+    function hide() {
+      cancelPending();
+      setTooltip(void 0);
+    }
+    function handleEnter(event) {
+      const origin = event.target;
+      if (!(origin instanceof Element)) return;
+      const target = origin.closest(`[${TOOLTIP_ATTRIBUTE}]`);
+      if (!(target instanceof HTMLElement)) {
+        hide();
+        return;
+      }
+      const text = target.getAttribute(TOOLTIP_ATTRIBUTE);
+      if (!text) {
+        hide();
+        return;
+      }
+      cancelPending();
+      timer = setTimeout(() => setTooltip(tooltipStateFor(target, text)), TOOLTIP_DELAY_MS);
+    }
+    function handleLeaveWindow(event) {
+      if (!event.relatedTarget) hide();
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") hide();
+    }
+    document.addEventListener("pointerover", handleEnter);
+    document.addEventListener("pointerout", handleLeaveWindow);
+    document.addEventListener("focusin", handleEnter);
+    document.addEventListener("pointerdown", hide);
+    document.addEventListener("focusout", hide);
+    document.addEventListener("keydown", handleKeyDown);
+    window.addEventListener("scroll", hide, true);
+    window.addEventListener("resize", hide);
+    return () => {
+      cancelPending();
+      document.removeEventListener("pointerover", handleEnter);
+      document.removeEventListener("pointerout", handleLeaveWindow);
+      document.removeEventListener("focusin", handleEnter);
+      document.removeEventListener("pointerdown", hide);
+      document.removeEventListener("focusout", hide);
+      document.removeEventListener("keydown", handleKeyDown);
+      window.removeEventListener("scroll", hide, true);
+      window.removeEventListener("resize", hide);
+    };
+  }, [isOwner]);
+  if (!tooltip) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "tooltip",
+        className: `cv-tooltip cv-tooltip--${tooltip.placement}`,
+        style: { left: tooltip.left, top: tooltip.top },
+        children: tooltip.text
+      }
+    ),
+    document.body
+  );
+}
+
+export {
+  TOOLTIP_ATTRIBUTE,
+  TooltipLayer
+};