bits-ui 2.16.2 → 2.16.3

package/dist/bits/tooltip/tooltip.svelte.js

@@ -524,14 +524,19 @@ export class TooltipTriggerState {
         const relatedTarget = e.relatedTarget;
         // when moving to a sibling trigger and skip delay is active, don't close —
         // the sibling's enter handler will switch the active trigger instantly.
-        // if skipDelayDuration is 0 there's no grace period, so let the tooltip
-        // close and make the sibling wait through the full delay (and re-animate).
-        if (isElement(relatedTarget) && root.provider.opts.skipDelayDuration.current > 0) {
+        // if skipDelayDuration is 0 there's no grace period, so close now and let
+        // the sibling wait through the full delay (and re-animate).
+        if (isElement(relatedTarget)) {
             for (const record of root.registry.triggers.values()) {
-                if (record.node === relatedTarget) {
+                if (record.node !== relatedTarget)
+                    continue;
+                if (root.provider.opts.skipDelayDuration.current > 0) {
                     this.#hasPointerMoveOpened = false;
                     return;
                 }
+                root.handleClose();
+                this.#hasPointerMoveOpened = false;
+                return;
             }
         }
         root.onTriggerLeave();
@@ -606,6 +611,7 @@ export class TooltipContentState {
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
+            transitIntentTimeout: 180,
             ignoredTargets: () => {
                 // only skip closing for sibling triggers when there's a skip-delay grace period;
                 // with skipDelayDuration=0 the close+reopen is intentional (full delay + re-animation)

package/dist/internal/floating-svelte/use-floating.svelte.js

@@ -105,7 +105,7 @@ export function useFloating(options) {
         whileElementsMountedCleanup = whileElementsMountedOption(reference.current, floating.current, update);
     }
     function reset() {
-        if (!openOption) {
+        if (!openOption && floating.current === null) {
             isPositioned = false;
         }
     }

package/dist/internal/safe-polygon.svelte.d.ts

@@ -5,6 +5,7 @@ export interface SafePolygonOptions {
     contentNode: Getter<HTMLElement | null>;
     onPointerExit: () => void;
     buffer?: number;
+    transitIntentTimeout?: number;
     /** nodes that should not trigger a close when they become the relatedTarget on trigger leave (e.g. sibling triggers in singleton mode) */
     ignoredTargets?: Getter<HTMLElement[]>;
 }

package/dist/internal/safe-polygon.svelte.js

@@ -42,11 +42,15 @@ function getSide(triggerRect, contentRect) {
 export class SafePolygon {
     #opts;
     #buffer;
+    #transitIntentTimeout;
     // tracks the cursor position when leaving trigger or content
     #exitPoint = null;
     // tracks what we're moving toward: "content" when leaving trigger, "trigger" when leaving content
     #exitTarget = null;
+    #transitTargets = [];
+    #trackedTriggerNode = null;
     #leaveFallbackRafId = null;
+    #transitIntentTimeoutId = null;
     #cancelLeaveFallback() {
         if (this.#leaveFallbackRafId !== null) {
             cancelAnimationFrame(this.#leaveFallbackRafId);
@@ -63,14 +67,42 @@ export class SafePolygon {
             this.#opts.onPointerExit();
         });
     }
+    #cancelTransitIntentTimeout() {
+        if (this.#transitIntentTimeoutId !== null) {
+            clearTimeout(this.#transitIntentTimeoutId);
+            this.#transitIntentTimeoutId = null;
+        }
+    }
+    #scheduleTransitIntentTimeout() {
+        if (this.#transitIntentTimeout === null)
+            return;
+        this.#cancelTransitIntentTimeout();
+        this.#transitIntentTimeoutId = window.setTimeout(() => {
+            this.#transitIntentTimeoutId = null;
+            if (!this.#exitPoint || !this.#exitTarget)
+                return;
+            this.#clearTracking();
+            this.#opts.onPointerExit();
+        }, this.#transitIntentTimeout);
+    }
     constructor(opts) {
         this.#opts = opts;
         this.#buffer = opts.buffer ?? 1;
+        const transitIntentTimeout = opts.transitIntentTimeout;
+        this.#transitIntentTimeout =
+            typeof transitIntentTimeout === "number" && transitIntentTimeout > 0
+                ? transitIntentTimeout
+                : null;
         watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
             if (!triggerNode || !contentNode || !enabled) {
+                this.#trackedTriggerNode = null;
                 this.#clearTracking();
                 return;
             }
+            if (this.#trackedTriggerNode && this.#trackedTriggerNode !== triggerNode) {
+                this.#clearTracking();
+            }
+            this.#trackedTriggerNode = triggerNode;
             const doc = getDocument(triggerNode);
             const handlePointerMove = (e) => {
                 this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
@@ -89,16 +121,13 @@ export class SafePolygon {
                     ignoredTargets.some((n) => n === target || n.contains(target))) {
                     return;
                 }
-                // if relatedTarget is completely unrelated to the floating tree
-                // (not an ancestor of content, not inside content/trigger), close now
-                if (isElement(target) &&
-                    !triggerNode.contains(target) &&
-                    !contentNode.contains(target) &&
-                    !target.contains(contentNode)) {
-                    this.#clearTracking();
-                    this.#opts.onPointerExit();
-                    return;
-                }
+                this.#transitTargets =
+                    isElement(target) && ignoredTargets.length > 0
+                        ? ignoredTargets.filter((n) => target.contains(n))
+                        : [];
+                // for unrelated elements, defer close decisions to pointer geometry checks.
+                // this allows the cursor to pass through intermediate elements on the way
+                // to content without immediately closing.
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "content";
                 this.#scheduleLeaveFallback();
@@ -140,6 +169,7 @@ export class SafePolygon {
         if (!this.#exitPoint || !this.#exitTarget)
             return;
         this.#cancelLeaveFallback();
+        this.#scheduleTransitIntentTimeout();
         const triggerRect = triggerNode.getBoundingClientRect();
         const contentRect = contentNode.getBoundingClientRect();
         // check if pointer reached the target
@@ -151,6 +181,17 @@ export class SafePolygon {
             this.#clearTracking();
             return;
         }
+        if (this.#exitTarget === "content" && this.#transitTargets.length > 0) {
+            for (const transitTarget of this.#transitTargets) {
+                const transitRect = transitTarget.getBoundingClientRect();
+                if (isInsideRect(clientPoint, transitRect))
+                    return;
+                const transitSide = getSide(triggerRect, transitRect);
+                const transitCorridor = this.#getCorridorPolygon(triggerRect, transitRect, transitSide);
+                if (transitCorridor && isPointInPolygon(clientPoint, transitCorridor))
+                    return;
+            }
+        }
         // check if pointer is in the rectangular corridor between trigger and content
         const side = getSide(triggerRect, contentRect);
         const corridorPoly = this.#getCorridorPolygon(triggerRect, contentRect, side);
@@ -170,7 +211,9 @@ export class SafePolygon {
     #clearTracking() {
         this.#exitPoint = null;
         this.#exitTarget = null;
+        this.#transitTargets = [];
         this.#cancelLeaveFallback();
+        this.#cancelTransitIntentTimeout();
     }
     /**
      * Creates a rectangular corridor between trigger and content

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bits-ui",
-  "version": "2.16.2",
+  "version": "2.16.3",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",