bits-ui 2.15.7 → 2.15.8

package/dist/bits/popover/popover.svelte.js

@@ -260,6 +260,7 @@ export class PopoverContentState {
             enabled: () => this.root.opts.open.current &&
                 this.root.openedViaHover &&
                 !this.root.hasInteractedWithContent,
+            throttlePointerMove: true,
             onPointerExit: () => {
                 this.root.handleDelayedHoverClose();
             },

package/dist/bits/tooltip/tooltip.svelte.d.ts

@@ -92,6 +92,7 @@ interface TooltipContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
 }> {
 }
 export declare class TooltipContentState {
+    #private;
     static create(opts: TooltipContentStateOpts): TooltipContentState;
     readonly opts: TooltipContentStateOpts;
     readonly root: TooltipRootState;

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

@@ -26,6 +26,20 @@ export class TooltipProviderState {
         this.#timerFn = new TimeoutFn(() => {
             this.isOpenDelayed = true;
         }, this.opts.skipDelayDuration.current);
+        onMountEffect(() => on(window, "scroll", (e) => {
+            const activeTooltip = this.#openTooltip;
+            if (!activeTooltip)
+                return;
+            const triggerNode = activeTooltip.triggerNode;
+            if (!triggerNode)
+                return;
+            const target = e.target;
+            if (!(target instanceof Element || target instanceof Document))
+                return;
+            if (target.contains(triggerNode)) {
+                activeTooltip.handleClose();
+            }
+        }));
     }
     #startTimer = () => {
         const skipDuration = this.opts.skipDelayDuration.current;
@@ -222,11 +236,21 @@ export class TooltipTriggerState {
         this.root.onTriggerEnter();
         this.#hasPointerMoveOpened = true;
     };
-    #onpointerleave = () => {
+    #onpointerleave = (e) => {
         if (this.#isDisabled)
             return;
         this.#clearTransitCheck();
-        this.root.onTriggerLeave();
+        const relatedTarget = e.relatedTarget;
+        if (!this.root.disableHoverableContent &&
+            this.root.opts.open.current &&
+            isElement(relatedTarget) &&
+            this.root.contentNode &&
+            !this.root.contentNode.contains(relatedTarget)) {
+            this.root.handleClose();
+        }
+        else {
+            this.root.onTriggerLeave();
+        }
         this.#hasPointerMoveOpened = false;
     };
     #onfocus = (e) => {
@@ -275,11 +299,11 @@ export class TooltipContentState {
     opts;
     root;
     attachment;
-    constructor(opts, root) {
-        this.opts = opts;
-        this.root = root;
-        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
-        new SafePolygon({
+    #safePolygon = null;
+    #createSafePolygon = () => {
+        if (this.#safePolygon)
+            return;
+        this.#safePolygon = new SafePolygon({
             triggerNode: () => this.root.triggerNode,
             contentNode: () => this.root.contentNode,
             enabled: () => this.root.opts.open.current && !this.root.disableHoverableContent,
@@ -289,14 +313,16 @@ export class TooltipContentState {
                 }
             },
         });
-        onMountEffect(() => on(window, "scroll", (e) => {
-            const target = e.target;
-            if (!target)
+    };
+    constructor(opts, root) {
+        this.opts = opts;
+        this.root = root;
+        this.attachment = attachRef(this.opts.ref, (v) => (this.root.contentNode = v));
+        watch(() => this.root.opts.open.current && !this.root.disableHoverableContent, (shouldTrackSafePolygon) => {
+            if (!shouldTrackSafePolygon)
                 return;
-            if (target.contains(this.root.triggerNode)) {
-                this.root.handleClose();
-            }
-        }));
+            this.#createSafePolygon();
+        }, { lazy: true });
     }
     onInteractOutside = (e) => {
         if (isElement(e.target) &&

package/dist/bits/utilities/floating-layer/use-floating-layer.svelte.js

@@ -181,6 +181,7 @@ export class FloatingContentState {
     constructor(opts, root) {
         this.opts = opts;
         this.root = root;
+        this.#updatePositionStrategy = opts.updatePositionStrategy;
         if (opts.customAnchor) {
             this.root.customAnchorNode.current = opts.customAnchor.current;
         }
@@ -208,10 +209,21 @@ export class FloatingContentState {
             this.opts.onPlaced?.current();
         });
         watch(() => this.contentRef.current, (contentNode) => {
-            if (!contentNode)
+            if (!contentNode || !this.opts.enabled.current)
                 return;
             const win = getWindow(contentNode);
-            this.contentZIndex = win.getComputedStyle(contentNode).zIndex;
+            const rafId = win.requestAnimationFrame(() => {
+                // avoid applying stale values when refs change quickly
+                if (this.contentRef.current !== contentNode || !this.opts.enabled.current)
+                    return;
+                const zIndex = win.getComputedStyle(contentNode).zIndex;
+                if (zIndex !== this.contentZIndex) {
+                    this.contentZIndex = zIndex;
+                }
+            });
+            return () => {
+                win.cancelAnimationFrame(rafId);
+            };
         });
         $effect(() => {
             this.floating.floating.current = this.wrapperRef.current;

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

@@ -22,6 +22,7 @@ export function useFloating(options) {
     let placement = $state(placementOption);
     let middlewareData = $state({});
     let isPositioned = $state(false);
+    let hasWhileMountedPosition = false;
     const floatingStyles = $derived.by(() => {
         // preserve last known position when floating ref is null (during transitions)
         const xVal = floating.current ? roundByDPR(floating.current, x) : x;
@@ -82,6 +83,8 @@ export function useFloating(options) {
             update();
             return;
         }
+        if (!openOption)
+            return;
         if (reference.current === null || floating.current === null)
             return;
         whileElementsMountedCleanup = whileElementsMountedOption(reference.current, floating.current, update);
@@ -91,8 +94,43 @@ export function useFloating(options) {
             isPositioned = false;
         }
     }
-    $effect(update);
+    function trackWhileMountedDeps() {
+        return [
+            middlewareOption,
+            placementOption,
+            strategyOption,
+            sideOffsetOption,
+            alignOffsetOption,
+            openOption,
+        ];
+    }
+    $effect(() => {
+        if (whileElementsMountedOption !== undefined)
+            return;
+        if (!openOption)
+            return;
+        update();
+    });
     $effect(attach);
+    $effect(() => {
+        if (whileElementsMountedOption === undefined)
+            return;
+        trackWhileMountedDeps();
+        if (!openOption) {
+            hasWhileMountedPosition = false;
+            return;
+        }
+        if (!isPositioned) {
+            hasWhileMountedPosition = false;
+            return;
+        }
+        // skip the first post-position run, since autoUpdate already computed it
+        if (!hasWhileMountedPosition) {
+            hasWhileMountedPosition = true;
+            return;
+        }
+        update();
+    });
     $effect(reset);
     $effect(() => cleanup);
     return {

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

@@ -5,6 +5,7 @@ export interface SafePolygonOptions {
     contentNode: Getter<HTMLElement | null>;
     onPointerExit: () => void;
     buffer?: number;
+    throttlePointerMove?: boolean;
 }
 /**
  * Creates a safe polygon area that allows users to move their cursor between

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

@@ -46,18 +46,52 @@ export class SafePolygon {
     #exitPoint = null;
     // tracks what we're moving toward: "content" when leaving trigger, "trigger" when leaving content
     #exitTarget = null;
+    #triggerRect = null;
+    #contentRect = null;
+    #pointerMoveRafId = null;
+    #pendingClientPoint = null;
+    #leaveFallbackRafId = null;
+    #cancelLeaveFallback() {
+        if (this.#leaveFallbackRafId !== null) {
+            cancelAnimationFrame(this.#leaveFallbackRafId);
+            this.#leaveFallbackRafId = null;
+        }
+    }
+    #scheduleLeaveFallback() {
+        this.#cancelLeaveFallback();
+        this.#leaveFallbackRafId = requestAnimationFrame(() => {
+            this.#leaveFallbackRafId = null;
+            if (!this.#exitPoint || !this.#exitTarget)
+                return;
+            this.#clearTracking();
+            this.#opts.onPointerExit();
+        });
+    }
+    #closeIfPointerEnteredOutside(target, triggerNode, contentNode) {
+        if (!isElement(target))
+            return false;
+        if (triggerNode.contains(target) || contentNode.contains(target))
+            return false;
+        this.#clearTracking();
+        this.#opts.onPointerExit();
+        return true;
+    }
     constructor(opts) {
         this.#opts = opts;
         this.#buffer = opts.buffer ?? 1;
         watch([opts.triggerNode, opts.contentNode, opts.enabled], ([triggerNode, contentNode, enabled]) => {
             if (!triggerNode || !contentNode || !enabled) {
-                this.#exitPoint = null;
-                this.#exitTarget = null;
+                this.#clearTracking();
                 return;
             }
             const doc = getDocument(triggerNode);
             const handlePointerMove = (e) => {
-                this.#onPointerMove(e, triggerNode, contentNode);
+                if (this.#opts.throttlePointerMove) {
+                    this.#onPointerMoveThrottled(e, triggerNode, contentNode);
+                }
+                else {
+                    this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
+                }
             };
             const handleTriggerLeave = (e) => {
                 // when leaving trigger toward content, record exit point
@@ -66,18 +100,21 @@ export class SafePolygon {
                 if (isElement(target) && contentNode.contains(target)) {
                     return;
                 }
+                if (this.#closeIfPointerEnteredOutside(target, triggerNode, contentNode)) {
+                    return;
+                }
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "content";
+                this.#captureRects(triggerNode, contentNode);
+                this.#scheduleLeaveFallback();
             };
             const handleTriggerEnter = () => {
                 // reached trigger, clear tracking
-                this.#exitPoint = null;
-                this.#exitTarget = null;
+                this.#clearTracking();
             };
             const handleContentEnter = () => {
                 // reached content, clear tracking
-                this.#exitPoint = null;
-                this.#exitTarget = null;
+                this.#clearTracking();
             };
             const handleContentLeave = (e) => {
                 // when leaving content, check if going directly back to trigger
@@ -86,9 +123,14 @@ export class SafePolygon {
                     // going directly to trigger, no polygon tracking needed
                     return;
                 }
+                if (this.#closeIfPointerEnteredOutside(target, triggerNode, contentNode)) {
+                    return;
+                }
                 // might be traversing gap back to trigger, set up polygon tracking
                 this.#exitPoint = [e.clientX, e.clientY];
                 this.#exitTarget = "trigger";
+                this.#captureRects(triggerNode, contentNode);
+                this.#scheduleLeaveFallback();
             };
             return [
                 on(doc, "pointermove", handlePointerMove),
@@ -102,22 +144,40 @@ export class SafePolygon {
             }, () => { });
         });
     }
-    #onPointerMove(e, triggerNode, contentNode) {
+    #onPointerMoveThrottled(e, triggerNode, contentNode) {
+        if (this.#pointerMoveRafId === null) {
+            // handle the first move in the frame immediately so close checks
+            // are not deferred when only a single pointermove fires.
+            this.#pointerMoveRafId = requestAnimationFrame(() => {
+                this.#pointerMoveRafId = null;
+                const point = this.#pendingClientPoint;
+                this.#pendingClientPoint = null;
+                if (!point)
+                    return;
+                this.#onPointerMove(point, triggerNode, contentNode);
+            });
+            this.#onPointerMove([e.clientX, e.clientY], triggerNode, contentNode);
+            return;
+        }
+        this.#pendingClientPoint = [e.clientX, e.clientY];
+    }
+    #onPointerMove(clientPoint, triggerNode, contentNode) {
         // if no exit point recorded, nothing to check
         if (!this.#exitPoint || !this.#exitTarget)
             return;
-        const clientPoint = [e.clientX, e.clientY];
-        const triggerRect = triggerNode.getBoundingClientRect();
-        const contentRect = contentNode.getBoundingClientRect();
+        this.#cancelLeaveFallback();
+        if (!this.#triggerRect || !this.#contentRect) {
+            this.#captureRects(triggerNode, contentNode);
+        }
+        const triggerRect = this.#triggerRect ?? triggerNode.getBoundingClientRect();
+        const contentRect = this.#contentRect ?? contentNode.getBoundingClientRect();
         // check if pointer reached the target
         if (this.#exitTarget === "content" && isInsideRect(clientPoint, contentRect)) {
-            this.#exitPoint = null;
-            this.#exitTarget = null;
+            this.#clearTracking();
             return;
         }
         if (this.#exitTarget === "trigger" && isInsideRect(clientPoint, triggerRect)) {
-            this.#exitPoint = null;
-            this.#exitTarget = null;
+            this.#clearTracking();
             return;
         }
         // check if pointer is in the rectangular corridor between trigger and content
@@ -133,9 +193,24 @@ export class SafePolygon {
             return;
         }
         // pointer is outside all safe zones - close
+        this.#clearTracking();
+        this.#opts.onPointerExit();
+    }
+    #captureRects(triggerNode, contentNode) {
+        this.#triggerRect = triggerNode.getBoundingClientRect();
+        this.#contentRect = contentNode.getBoundingClientRect();
+    }
+    #clearTracking() {
         this.#exitPoint = null;
         this.#exitTarget = null;
-        this.#opts.onPointerExit();
+        this.#triggerRect = null;
+        this.#contentRect = null;
+        this.#pendingClientPoint = null;
+        if (this.#pointerMoveRafId !== null) {
+            cancelAnimationFrame(this.#pointerMoveRafId);
+            this.#pointerMoveRafId = null;
+        }
+        this.#cancelLeaveFallback();
     }
     /**
      * Creates a rectangular corridor between trigger and content

package/package.json

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