bits-ui 2.16.2 → 2.16.4

package/dist/bits/menu/menu.svelte.js

@@ -183,6 +183,10 @@ export class MenuContentState {
         this.opts.onCloseAutoFocus.current?.(e);
         if (e.defaultPrevented || this.#isSub)
             return;
+        if (this.parentMenu.root.ignoreCloseAutoFocus) {
+            e.preventDefault();
+            return;
+        }
         if (this.parentMenu.triggerNode && isTabbable(this.parentMenu.triggerNode)) {
             e.preventDefault();
             this.parentMenu.triggerNode.focus();
@@ -306,7 +310,17 @@ export class MenuContentState {
         }
         if (e.target.closest(`#${triggerId}`)) {
             e.preventDefault();
+            return;
         }
+        /**
+         * when the menu closes due to an outside pointer interaction (for example,
+         * clicking another dropdown trigger), avoid focusing this menu's trigger
+         * to prevent stealing focus from the new interaction target.
+         */
+        this.parentMenu.root.ignoreCloseAutoFocus = true;
+        afterTick(() => {
+            this.parentMenu.root.ignoreCloseAutoFocus = false;
+        });
     }
     get shouldRender() {
         return this.parentMenu.contentPresence.shouldRender;

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/bits/utilities/popper-layer/popper-layer-inner.svelte

@@ -52,6 +52,11 @@
 		enabled: boolean;
 		contentPointerEvents?: "auto" | "none";
 	} = $props();
+
+	const resolvedPreventScroll = $derived(preventScroll ?? true);
+	const effectiveStrategy = $derived(
+		strategy ?? (resolvedPreventScroll ? "fixed" : "absolute")
+	);
 </script>
 
 <PopperContent
@@ -68,7 +73,7 @@
 	{sticky}
 	{hideWhenDetached}
 	{updatePositionStrategy}
-	{strategy}
+	strategy={effectiveStrategy}
 	{dir}
 	{wrapperId}
 	{style}
@@ -79,9 +84,9 @@
 >
 	{#snippet content({ props: floatingProps, wrapperProps })}
 		{#if restProps.forceMount && enabled}
-			<ScrollLock {preventScroll} />
+			<ScrollLock preventScroll={resolvedPreventScroll} />
 		{:else if !restProps.forceMount}
-			<ScrollLock {preventScroll} />
+			<ScrollLock preventScroll={resolvedPreventScroll} />
 		{/if}
 		<FocusScope
 			{onOpenAutoFocus}

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

@@ -23,6 +23,7 @@ export function useFloating(options) {
     let middlewareData = $state({});
     let isPositioned = $state(false);
     let hasWhileMountedPosition = false;
+    let updateRequestId = 0;
     const floatingStyles = $derived.by(() => {
         // preserve last known position when floating ref is null (during transitions)
         const xVal = floating.current ? roundByDPR(floating.current, x) : x;
@@ -50,12 +51,20 @@ export function useFloating(options) {
     function update() {
         if (reference.current === null || floating.current === null)
             return;
-        computePosition(reference.current, floating.current, {
+        const referenceNode = reference.current;
+        const floatingNode = floating.current;
+        const requestId = ++updateRequestId;
+        computePosition(referenceNode, floatingNode, {
             middleware: middlewareOption,
             placement: placementOption,
             strategy: strategyOption,
         }).then((position) => {
-            const referenceNode = reference.current;
+            // ignore stale async resolutions when newer updates were requested.
+            if (requestId !== updateRequestId)
+                return;
+            // ignore stale resolutions after ref replacement.
+            if (reference.current !== referenceNode || floating.current !== floatingNode)
+                return;
             const referenceHidden = isReferenceHidden(referenceNode);
             if (referenceHidden) {
                 // keep last good coordinates when the anchor disappears to avoid
@@ -91,6 +100,7 @@ export function useFloating(options) {
             whileElementsMountedCleanup();
             whileElementsMountedCleanup = undefined;
         }
+        updateRequestId++;
     }
     function attach() {
         cleanup();
@@ -105,7 +115,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.4",
   "license": "MIT",
   "repository": "github:huntabyte/bits-ui",
   "funding": "https://github.com/sponsors/huntabyte",