bits-ui 2.9.1 → 2.9.3

package/dist/bits/link-preview/components/link-preview-content-static.svelte

@@ -6,6 +6,7 @@
 	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";
 	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";
 	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";
+	import Mounted from "../../utilities/mounted.svelte";
 	import { noop } from "../../../internal/noop.js";
 
 	const uid = $props.id();
@@ -58,6 +59,7 @@
 					{@render children?.()}
 				</div>
 			{/if}
+			<Mounted bind:mounted={contentState.root.contentMounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}

package/dist/bits/link-preview/components/link-preview-content.svelte

@@ -79,6 +79,7 @@
 					</div>
 				</div>
 			{/if}
+			<Mounted bind:mounted={contentState.root.contentMounted} />
 		{/snippet}
 	</PopperLayerForceMount>
 {:else if !forceMount}

package/dist/bits/link-preview/link-preview.svelte.js

@@ -126,7 +126,7 @@ export class LinkPreviewTriggerState {
     onpointerleave(e) {
         if (isTouch(e))
             return;
-        if (!this.root.contentMounted) {
+        if (!this.root.contentMounted || !this.root.opts.open.current) {
             this.root.immediateClose();
         }
     }

package/dist/internal/body-scroll-lock.svelte.js

@@ -1,32 +1,94 @@
 import { SvelteMap } from "svelte/reactivity";
-import { afterSleep, afterTick, box, onDestroyEffect, } from "svelte-toolbelt";
-import { isBrowser, isIOS } from "./is.js";
+import { afterTick, box, onDestroyEffect } from "svelte-toolbelt";
+import { isIOS } from "./is.js";
 import { addEventListener } from "./events.js";
 import { useId } from "./use-id.js";
 import { watch } from "runed";
 import { SharedState } from "./shared-state.svelte.js";
+import { BROWSER } from "esm-env";
+/** A map of lock ids to their `locked` state. */
+const lockMap = new SvelteMap();
+let initialBodyStyle = $state(null);
+let stopTouchMoveListener = null;
+let cleanupTimeoutId = null;
+const anyLocked = box.with(() => {
+    for (const value of lockMap.values()) {
+        if (value)
+            return true;
+    }
+    return false;
+});
+/**
+ * We track the time we scheduled the cleanup to prevent race conditions
+ * when multiple locks are created/destroyed in the same tick, ensuring
+ * only the last one to schedule the cleanup will run.
+ *
+ * reference: https://github.com/huntabyte/bits-ui/issues/1639
+ */
+let cleanupScheduledAt = null;
 const bodyLockStackCount = new SharedState(() => {
-    const map = new SvelteMap();
-    const locked = $derived.by(() => {
-        for (const value of map.values()) {
-            if (value)
-                return true;
-        }
-        return false;
-    });
-    let initialBodyStyle = $state(null);
-    let stopTouchMoveListener = null;
     function resetBodyStyle() {
-        if (!isBrowser)
+        if (!BROWSER)
             return;
         document.body.setAttribute("style", initialBodyStyle ?? "");
         document.body.style.removeProperty("--scrollbar-width");
         isIOS && stopTouchMoveListener?.();
+        // reset initialBodyStyle so next locker captures the correct styles
+        initialBodyStyle = null;
+        hasEverBeenLocked = false;
     }
-    watch(() => locked, () => {
-        if (!locked)
+    function cancelPendingCleanup() {
+        if (cleanupTimeoutId === null)
             return;
-        initialBodyStyle = document.body.getAttribute("style");
+        window.clearTimeout(cleanupTimeoutId);
+        cleanupTimeoutId = null;
+    }
+    function scheduleCleanupIfNoNewLocks(delay, callback) {
+        cancelPendingCleanup();
+        cleanupScheduledAt = Date.now();
+        const currentCleanupId = cleanupScheduledAt;
+        /**
+         * We schedule the cleanup to run after a delay to allow new locks to register
+         * that might have been added in the same tick as the current cleanup.
+         *
+         * If a new lock is added in the same tick, the cleanup will be cancelled and
+         * a new cleanup will be scheduled.
+         *
+         * This is to prevent the cleanup from running too early and resetting the body
+         * style before the new lock has had a chance to apply its styles.
+         */
+        const cleanupFn = () => {
+            cleanupTimeoutId = null;
+            // check if this cleanup is still valid (no newer cleanups scheduled)
+            if (cleanupScheduledAt !== currentCleanupId)
+                return;
+            // ensure no new locks were added during the delay
+            if (!isAnyLocked(lockMap)) {
+                callback();
+            }
+        };
+        if (delay === null) {
+            // use a small delay even when no restoreScrollDelay is set
+            // to handle same-tick destroy/create scenarios (~1 frame)
+            cleanupTimeoutId = window.setTimeout(cleanupFn, 16);
+        }
+        else {
+            cleanupTimeoutId = window.setTimeout(cleanupFn, delay);
+        }
+    }
+    // track if we've ever applied lock styles in this session
+    let hasEverBeenLocked = false;
+    function ensureInitialStyleCaptured() {
+        if (!hasEverBeenLocked && initialBodyStyle === null) {
+            initialBodyStyle = document.body.getAttribute("style");
+            hasEverBeenLocked = true;
+        }
+    }
+    watch(() => anyLocked.current, () => {
+        if (!anyLocked.current)
+            return;
+        // ensure we've captured the initial style before applying any lock styles
+        ensureInitialStyleCaptured();
         const bodyStyle = getComputedStyle(document.body);
         // TODO: account for RTL direction, etc.
         const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
@@ -42,6 +104,7 @@ const bodyLockStackCount = new SharedState(() => {
             document.body.style.overflow = "hidden";
         }
         if (isIOS) {
+            // IOS devices are special and require a touchmove listener to prevent scrolling
             stopTouchMoveListener = addEventListener(document, "touchmove", (e) => {
                 if (e.target !== document.documentElement)
                     return;
@@ -50,6 +113,14 @@ const bodyLockStackCount = new SharedState(() => {
                 e.preventDefault();
             }, { passive: false });
         }
+        /**
+         * We ensure pointer-events: none is applied _after_ DOM updates, so that any focus/
+         * interaction changes from opening overlays/menus complete _before_ we block pointer
+         * events.
+         *
+         * this avoids race conditions where pointer-events could be set too early and break
+         * focus/interaction.
+         */
         afterTick(() => {
             document.body.style.pointerEvents = "none";
             document.body.style.overflow = "hidden";
@@ -61,10 +132,13 @@ const bodyLockStackCount = new SharedState(() => {
         };
     });
     return {
-        get map() {
-            return map;
+        get lockMap() {
+            return lockMap;
         },
         resetBodyStyle,
+        scheduleCleanupIfNoNewLocks,
+        cancelPendingCleanup,
+        ensureInitialStyleCaptured,
     };
 });
 export class BodyScrollLock {
@@ -79,21 +153,33 @@ export class BodyScrollLock {
         this.#countState = bodyLockStackCount.get();
         if (!this.#countState)
             return;
-        this.#countState.map.set(this.#id, this.#initialState ?? false);
-        this.locked = box.with(() => this.#countState.map.get(this.#id) ?? false, (v) => this.#countState.map.set(this.#id, v));
+        /**
+         * Since a new lock is being created, we cancel any pending cleanup to
+         * prevent the cleanup from running too early and resetting the body style
+         * before the new lock has had a chance to apply its styles.
+         *
+         * reference: https://github.com/huntabyte/bits-ui/issues/1639
+         */
+        this.#countState.cancelPendingCleanup();
+        // capture initial style before this lock is registered
+        this.#countState.ensureInitialStyleCaptured();
+        this.#countState.lockMap.set(this.#id, this.#initialState ?? false);
+        this.locked = box.with(() => this.#countState.lockMap.get(this.#id) ?? false, (v) => this.#countState.lockMap.set(this.#id, v));
         onDestroyEffect(() => {
-            this.#countState.map.delete(this.#id);
-            // if any locks are still active, we don't reset the body style
-            if (isAnyLocked(this.#countState.map))
+            this.#countState.lockMap.delete(this.#id);
+            // if not the last lock, we don't need to do anything
+            if (isAnyLocked(this.#countState.lockMap))
                 return;
             const restoreScrollDelay = this.#restoreScrollDelay();
-            // if no locks are active (meaning this was the last lock), we reset the body style
-            if (restoreScrollDelay === null) {
-                requestAnimationFrame(() => this.#countState.resetBodyStyle());
-            }
-            else {
-                afterSleep(restoreScrollDelay, () => this.#countState.resetBodyStyle());
-            }
+            /**
+             * We schedule the cleanup to run after a delay to handle same-tick
+             * destroy/create scenarios.
+             *
+             * reference: https://github.com/huntabyte/bits-ui/issues/1639
+             */
+            this.#countState.scheduleCleanupIfNoNewLocks(restoreScrollDelay, () => {
+                this.#countState.resetBodyStyle();
+            });
         });
     }
 }

package/package.json

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