@versini/ui-tooltip 5.3.3 → 5.4.0

package/dist/index.js

@@ -1,10 +1,9 @@
 /*!
-  @versini/ui-tooltip v5.3.3
+  @versini/ui-tooltip v5.4.0
   © 2026 gizmette.com
 */
 
 import { jsx, jsxs } from "react/jsx-runtime";
-import { arrow as dom_arrow, computePosition, flip, offset, shift } from "@floating-ui/dom";
 import { useClickOutside } from "@versini/ui-hooks/use-click-outside";
 import { useInterval } from "@versini/ui-hooks/use-interval";
 import { useCallback, useEffect, useRef, useState } from "react";
@@ -20,12 +19,121 @@ const TOOLTIP_ARROW_CLASSNAME = "av-tooltip-arrow";
 
 
 
-
-const roundInteger = (value, suffix = "px")=>{
-    return typeof value === "undefined" ? "" : `${Math.round(value)}${suffix}`;
+const ARROW_PADDING = 4;
+const calculateTooltipPosition = (triggerRect, tooltipRect, placement, sideOffset, viewportWidth, viewportHeight)=>{
+    /* v8 ignore start - split always returns non-empty for valid placements */ const side = placement.split("-")[0] || "top";
+    /* v8 ignore stop */ const alignment = placement.includes("-") ? placement.split("-")[1] : "center";
+    let top = 0;
+    let left = 0;
+    let resolvedSide = side;
+    // Calculate base position based on side
+    switch(side){
+        case "bottom":
+            top = triggerRect.bottom + sideOffset;
+            break;
+        case "top":
+            top = triggerRect.top - tooltipRect.height - sideOffset;
+            break;
+        case "right":
+            left = triggerRect.right + sideOffset;
+            break;
+        case "left":
+            left = triggerRect.left - tooltipRect.width - sideOffset;
+            break;
+    }
+    // Calculate alignment
+    if (side === "bottom" || side === "top") {
+        switch(alignment){
+            case "start":
+                left = triggerRect.left;
+                break;
+            case "end":
+                left = triggerRect.right - tooltipRect.width;
+                break;
+            default:
+                left = triggerRect.left + (triggerRect.width - tooltipRect.width) / 2;
+                break;
+        }
+    } else {
+        switch(alignment){
+            case "start":
+                top = triggerRect.top;
+                break;
+            case "end":
+                top = triggerRect.bottom - tooltipRect.height;
+                break;
+            default:
+                top = triggerRect.top + (triggerRect.height - tooltipRect.height) / 2;
+                break;
+        }
+    }
+    // Auto-flip if overflowing viewport
+    /* v8 ignore start - auto-flip with fallback when flipped position also overflows */ if (side === "bottom" && top + tooltipRect.height > viewportHeight) {
+        const flippedTop = triggerRect.top - tooltipRect.height - sideOffset;
+        if (flippedTop >= 0) {
+            top = flippedTop;
+            resolvedSide = "top";
+        }
+    } else if (side === "top" && top < 0) {
+        const flippedTop = triggerRect.bottom + sideOffset;
+        if (flippedTop + tooltipRect.height <= viewportHeight) {
+            top = flippedTop;
+            resolvedSide = "bottom";
+        }
+    } else if (side === "right" && left + tooltipRect.width > viewportWidth) {
+        const flippedLeft = triggerRect.left - tooltipRect.width - sideOffset;
+        if (flippedLeft >= 0) {
+            left = flippedLeft;
+            resolvedSide = "left";
+        }
+    } else if (side === "left" && left < 0) {
+        const flippedLeft = triggerRect.right + sideOffset;
+        if (flippedLeft + tooltipRect.width <= viewportWidth) {
+            left = flippedLeft;
+            resolvedSide = "right";
+        }
+    }
+    /* v8 ignore stop */ // Clamp to viewport bounds
+    left = Math.max(0, Math.min(left, viewportWidth - tooltipRect.width));
+    top = Math.max(0, Math.min(top, viewportHeight - tooltipRect.height));
+    return {
+        top,
+        left,
+        resolvedSide
+    };
+};
+const calculateArrowPosition = (triggerRect, tooltipTop, tooltipLeft, tooltipWidth, tooltipHeight, resolvedSide, arrowWidth, arrowHeight)=>{
+    const staticSideMap = {
+        top: "bottom",
+        bottom: "top",
+        left: "right",
+        right: "left"
+    };
+    const staticSide = staticSideMap[resolvedSide];
+    let arrowLeft = "";
+    let arrowTop = "";
+    if (resolvedSide === "top" || resolvedSide === "bottom") {
+        const triggerCenterX = triggerRect.left + triggerRect.width / 2;
+        const rawArrowLeft = triggerCenterX - tooltipLeft - arrowWidth / 2;
+        const clampedArrowLeft = Math.max(ARROW_PADDING, Math.min(rawArrowLeft, tooltipWidth - arrowWidth - ARROW_PADDING));
+        arrowLeft = `${Math.round(clampedArrowLeft)}px`;
+    } else {
+        const triggerCenterY = triggerRect.top + triggerRect.height / 2;
+        const rawArrowTop = triggerCenterY - tooltipTop - arrowHeight / 2;
+        const clampedArrowTop = Math.max(ARROW_PADDING, Math.min(rawArrowTop, tooltipHeight - arrowHeight - ARROW_PADDING));
+        arrowTop = `${Math.round(clampedArrowTop)}px`;
+    }
+    return {
+        arrowTop,
+        arrowLeft,
+        arrowRight: "",
+        arrowBottom: "",
+        staticSide,
+        staticSideValue: `-${Math.round(arrowHeight / 2)}px`
+    };
 };
 const getTooltipBaseClasses = ()=>{
-    return clsx("absolute top-0 left-0 w-max py-1 px-2 rounded-sm text-sm z-50");
+    return clsx("fixed w-max py-1 px-2 rounded-sm text-sm z-50");
 };
 const getTooltipBackgroundColorClasses = ({ mode })=>{
     return clsx({
@@ -53,7 +161,7 @@ const getTooltipArrowBaseClasses = ()=>{
     return clsx("absolute", "size-2", "transform rotate-45");
 };
 const getTooltipClasses = ({ mode, className, tooltipClassName, arrowClassName })=>{
-    const wrapper = clsx("relative inline-block", className);
+    const wrapper = clsx("inline-block", className);
     const tooltip = clsx(TOOLTIP_CLASSNAME, getTooltipBaseClasses(), getTooltipBackgroundColorClasses({
         mode
     }), getTooltipTextCopyColorClasses({
@@ -78,6 +186,68 @@ const getAnimationStyles = ({ animationDuration = 300 })=>{
 
 
 
+function useTooltipPosition({ triggerRef, tooltipRef, arrowRef, placement, sideOffset, animationDuration, isOpen }) {
+    const [isPositioned, setIsPositioned] = useState(false);
+    const updatePosition = useCallback(()=>{
+        /* v8 ignore start - positioning requires real DOM layout */ if (!triggerRef.current || !tooltipRef.current || !arrowRef.current) {
+            return;
+        }
+        const triggerRect = triggerRef.current.getBoundingClientRect();
+        const tooltipRect = tooltipRef.current.getBoundingClientRect();
+        const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
+        const { top, left, resolvedSide } = calculateTooltipPosition(triggerRect, tooltipRect, placement, sideOffset, viewportWidth, viewportHeight);
+        // Use offsetWidth/offsetHeight to get the untransformed arrow size,
+        // since the arrow has transform:rotate(45deg) which inflates
+        // getBoundingClientRect() dimensions.
+        const arrowWidth = arrowRef.current.offsetWidth;
+        const arrowHeight = arrowRef.current.offsetHeight;
+        const arrowPosition = calculateArrowPosition(triggerRect, top, left, tooltipRect.width, tooltipRect.height, resolvedSide, arrowWidth, arrowHeight);
+        const animationStyles = getAnimationStyles({
+            animationDuration
+        });
+        Object.assign(tooltipRef.current.style, {
+            position: "fixed",
+            top: `${Math.round(top)}px`,
+            left: `${Math.round(left)}px`,
+            margin: "0",
+            ...animationStyles
+        });
+        Object.assign(arrowRef.current.style, {
+            left: arrowPosition.arrowLeft,
+            top: arrowPosition.arrowTop,
+            right: arrowPosition.arrowRight,
+            bottom: arrowPosition.arrowBottom,
+            [arrowPosition.staticSide]: arrowPosition.staticSideValue
+        });
+        setIsPositioned(true);
+    /* v8 ignore stop */ }, [
+        triggerRef,
+        tooltipRef,
+        arrowRef,
+        placement,
+        sideOffset,
+        animationDuration
+    ]);
+    useEffect(()=>{
+        if (isOpen) {
+            requestAnimationFrame(()=>{
+                updatePosition();
+            });
+        } else {
+            setIsPositioned(false);
+        }
+    }, [
+        isOpen,
+        updatePosition
+    ]);
+    return {
+        isPositioned
+    };
+}
+
+
+
 
 
 
@@ -87,12 +257,11 @@ const Tooltip = ({ trigger, label, placement = "top", mode = "system", animation
     const referenceRef = useClickOutside(()=>{
         /* v8 ignore start */ delayedRestartTooltip.stop(), setDisabled(false);
     /* v8 ignore stop */ });
-    const floatingRef = useRef(null);
-    const floatingArrowRef = useRef(null);
+    const tooltipRef = useRef(null);
+    const arrowRef = useRef(null);
     const showTimeoutRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
     const [disabled, setDisabled] = useState(false);
-    const [isPositioned, setIsPositioned] = useState(false);
     /* v8 ignore start - delayed interval callback */ const delayedRestartTooltip = useInterval(()=>{
         setDisabled(false);
     }, DEFAULT_DEACTIVATION_DELAY);
@@ -102,69 +271,16 @@ const Tooltip = ({ trigger, label, placement = "top", mode = "system", animation
         tooltipClassName,
         arrowClassName
     });
-    const animationStyles = getAnimationStyles({
-        animationDuration
-    });
-    /* v8 ignore start - async floating UI positioning */ const updatePosition = useCallback(async ()=>{
-        if (referenceRef.current && floatingRef.current && floatingArrowRef.current) {
-            const { x, y, middlewareData, placement: newPlacement } = await computePosition(referenceRef.current, floatingRef.current, {
-                placement,
-                middleware: [
-                    offset(10),
-                    flip({
-                        crossAxis: placement.includes("-"),
-                        fallbackAxisSideDirection: "start"
-                    }),
-                    shift({
-                        padding: 5
-                    }),
-                    dom_arrow({
-                        element: floatingArrowRef.current
-                    })
-                ]
-            });
-            if (floatingRef?.current?.style) {
-                Object.assign(floatingRef.current.style, {
-                    left: roundInteger(x),
-                    top: roundInteger(y),
-                    ...animationStyles
-                });
-            }
-            const staticSide = {
-                top: "bottom",
-                right: "left",
-                bottom: "top",
-                left: "right"
-            }[newPlacement.split("-")[0]];
-            if (floatingArrowRef?.current?.style) {
-                Object.assign(floatingArrowRef.current.style, {
-                    left: roundInteger(middlewareData.arrow?.x),
-                    top: roundInteger(middlewareData.arrow?.y),
-                    right: "",
-                    bottom: "",
-                    [staticSide]: "-4px"
-                });
-            }
-            setIsPositioned(true);
-        }
-    }, [
+    const { isPositioned } = useTooltipPosition({
+        triggerRef: referenceRef,
+        tooltipRef,
+        arrowRef,
         placement,
-        animationStyles,
-        referenceRef
-    ]);
-    /* v8 ignore stop */ /* v8 ignore start - async effect handler */ useEffect(()=>{
-        (async ()=>{
-            if (showTooltip) {
-                await updatePosition();
-            } else {
-                setIsPositioned(false);
-            }
-        })();
-    }, [
-        updatePosition,
-        showTooltip
-    ]);
-    /* v8 ignore stop */ useEffect(()=>{
+        sideOffset: 10,
+        animationDuration,
+        isOpen: showTooltip
+    });
+    useEffect(()=>{
         /* v8 ignore start - cleanup function */ return ()=>{
             if (showTimeoutRef.current) {
                 clearTimeout(showTimeoutRef.current);
@@ -212,7 +328,7 @@ const Tooltip = ({ trigger, label, placement = "top", mode = "system", animation
             trigger,
             showTooltip && /*#__PURE__*/ jsxs("div", {
                 role: "tooltip",
-                ref: floatingRef,
+                ref: tooltipRef,
                 className: tooltipClasses.tooltip,
                 style: {
                     opacity: isPositioned ? undefined : 0
@@ -220,7 +336,7 @@ const Tooltip = ({ trigger, label, placement = "top", mode = "system", animation
                 children: [
                     label,
                     /*#__PURE__*/ jsx("div", {
-                        ref: floatingArrowRef,
+                        ref: arrowRef,
                         className: tooltipClasses.arrow
                     })
                 ]

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-tooltip",
-	"version": "5.3.3",
+	"version": "5.4.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -41,7 +41,6 @@
 		"@versini/ui-types": "8.3.0"
 	},
 	"dependencies": {
-		"@floating-ui/dom": "^1.7.5",
 		"@versini/ui-hooks": "6.1.1",
 		"clsx": "2.1.1",
 		"tailwindcss": "4.2.0"
@@ -49,5 +48,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "9129610bbd6d91a2bc6cac41b0ccf8430a13fa41"
+	"gitHead": "ee67ae957439fc613daf2610a3643b45b6702320"
 }