bits-ui 2.9.4 → 2.9.6

package/dist/bits/alert-dialog/components/alert-dialog-content.svelte

@@ -57,11 +57,7 @@
 				present: contentState.root.opts.open.current,
 				open: contentState.root.opts.open.current,
 			})}
-			onCloseAutoFocus={(e) => {
-				onCloseAutoFocus(e);
-				if (e.defaultPrevented) return;
-				afterSleep(0, () => contentState.root.triggerNode?.focus());
-			}}
+			{onCloseAutoFocus}
 			onOpenAutoFocus={(e) => {
 				onOpenAutoFocus(e);
 				if (e.defaultPrevented) return;

package/dist/bits/dialog/components/dialog-content.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { afterSleep, box, mergeProps } from "svelte-toolbelt";
+	import { box, mergeProps } from "svelte-toolbelt";
 	import { DialogContentState } from "../dialog.svelte.js";
 	import type { DialogContentProps } from "../types.js";
 	import DismissibleLayer from "../../utilities/dismissible-layer/dismissible-layer.svelte";
@@ -57,11 +57,7 @@
 				open: contentState.root.opts.open.current,
 			})}
 			{onOpenAutoFocus}
-			onCloseAutoFocus={(e) => {
-				onCloseAutoFocus(e);
-				if (e.defaultPrevented) return;
-				afterSleep(1, () => contentState.root.triggerNode?.focus());
-			}}
+			{onCloseAutoFocus}
 		>
 			{#snippet focusScope({ props: focusScopeProps })}
 				<EscapeLayer

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

@@ -6,6 +6,7 @@
 	import { FloatingLayer } from "../../utilities/floating-layer/index.js";
 
 	let {
+		disabled = false,
 		open = $bindable(false),
 		onOpenChange = noop,
 		onOpenChangeComplete = noop,
@@ -15,6 +16,7 @@
 	}: LinkPreviewRootProps = $props();
 
 	LinkPreviewRootState.create({
+		disabled: box.with(() => disabled),
 		open: box.with(
 			() => open,
 			(v) => {

package/dist/bits/link-preview/link-preview.svelte.d.ts

@@ -3,6 +3,7 @@ import type { BitsFocusEvent, BitsPointerEvent, OnChangeFn, RefAttachment, WithR
 interface LinkPreviewRootStateOpts extends WritableBoxedValues<{
     open: boolean;
 }>, ReadableBoxedValues<{
+    disabled: boolean;
     openDelay: number;
     closeDelay: number;
     onOpenChangeComplete: OnChangeFn<boolean>;

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

@@ -76,7 +76,7 @@ export class LinkPreviewRootState {
     }
     handleOpen() {
         this.clearTimeout();
-        if (this.opts.open.current)
+        if (this.opts.open.current || this.opts.disabled.current)
             return;
         this.isOpening = true;
         this.timeout = this.domContext.setTimeout(() => {

package/dist/bits/popover/components/popover-content-static.svelte

@@ -21,7 +21,6 @@
 		onInteractOutside = noop,
 		trapFocus = true,
 		preventScroll = false,
-
 		...restProps
 	}: PopoverContentStaticProps = $props();
 
@@ -33,7 +32,6 @@
 		),
 		onInteractOutside: box.with(() => onInteractOutside),
 		onEscapeKeydown: box.with(() => onEscapeKeydown),
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 		customAnchor: box.with(() => null),
 	});
 
@@ -52,6 +50,7 @@
 		{preventScroll}
 		loop
 		forceMount={true}
+		{onCloseAutoFocus}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {
@@ -78,6 +77,7 @@
 		{preventScroll}
 		loop
 		forceMount={false}
+		{onCloseAutoFocus}
 	>
 		{#snippet popper({ props })}
 			{@const finalProps = mergeProps(props, {

package/dist/bits/popover/components/popover-content.svelte

@@ -33,7 +33,6 @@
 		),
 		onInteractOutside: box.with(() => onInteractOutside),
 		onEscapeKeydown: box.with(() => onEscapeKeydown),
-		onCloseAutoFocus: box.with(() => onCloseAutoFocus),
 		customAnchor: box.with(() => customAnchor),
 	});
 
@@ -52,6 +51,7 @@
 		loop
 		forceMount={true}
 		{customAnchor}
+		{onCloseAutoFocus}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {
@@ -80,6 +80,7 @@
 		loop
 		forceMount={false}
 		{customAnchor}
+		{onCloseAutoFocus}
 	>
 		{#snippet popper({ props, wrapperProps })}
 			{@const finalProps = mergeProps(props, {

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

@@ -43,7 +43,6 @@ export declare class PopoverTriggerState {
 interface PopoverContentStateOpts extends WithRefOpts, ReadableBoxedValues<{
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
-    onCloseAutoFocus: (e: Event) => void;
     customAnchor: string | HTMLElement | null | Measurable;
 }> {
 }
@@ -55,7 +54,6 @@ export declare class PopoverContentState {
     constructor(opts: PopoverContentStateOpts, root: PopoverRootState);
     onInteractOutside: (e: PointerEvent) => void;
     onEscapeKeydown: (e: KeyboardEvent) => void;
-    onCloseAutoFocus: (e: Event) => void;
     readonly snippetProps: {
         open: boolean;
     };
@@ -70,7 +68,6 @@ export declare class PopoverContentState {
     readonly popperProps: {
         onInteractOutside: (e: PointerEvent) => void;
         onEscapeKeydown: (e: KeyboardEvent) => void;
-        onCloseAutoFocus: (e: Event) => void;
     };
 }
 interface PopoverCloseStateOpts extends WithRefOpts {

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

@@ -124,13 +124,6 @@ export class PopoverContentState {
             return;
         this.root.handleClose();
     };
-    onCloseAutoFocus = (e) => {
-        this.opts.onCloseAutoFocus.current?.(e);
-        if (e.defaultPrevented)
-            return;
-        e.preventDefault();
-        this.root.triggerNode?.focus();
-    };
     snippetProps = $derived.by(() => ({ open: this.root.opts.open.current }));
     props = $derived.by(() => ({
         id: this.opts.id.current,
@@ -145,7 +138,6 @@ export class PopoverContentState {
     popperProps = {
         onInteractOutside: this.onInteractOutside,
         onEscapeKeydown: this.onEscapeKeydown,
-        onCloseAutoFocus: this.onCloseAutoFocus,
     };
 }
 export class PopoverCloseState {

package/dist/bits/utilities/focus-scope/focus-scope-manager.d.ts

@@ -9,4 +9,7 @@ export declare class FocusScopeManager {
     setFocusMemory(scope: FocusScope, element: HTMLElement): void;
     getFocusMemory(scope: FocusScope): HTMLElement | undefined;
     isActiveScope(scope: FocusScope): boolean;
+    setPreFocusMemory(scope: FocusScope, element: HTMLElement): void;
+    getPreFocusMemory(scope: FocusScope): HTMLElement | undefined;
+    clearPreFocusMemory(scope: FocusScope): void;
 }

package/dist/bits/utilities/focus-scope/focus-scope-manager.js

@@ -4,6 +4,7 @@ export class FocusScopeManager {
     static instance;
     #scopeStack = box([]);
     #focusHistory = new WeakMap();
+    #preFocusHistory = new WeakMap();
     static getInstance() {
         if (!this.instance) {
             this.instance = new FocusScopeManager();
@@ -15,6 +16,11 @@ export class FocusScopeManager {
         if (current && current !== scope) {
             current.pause();
         }
+        // capture the currently focused element before this scope becomes active
+        const activeElement = document.activeElement;
+        if (activeElement && activeElement !== document.body) {
+            this.#preFocusHistory.set(scope, activeElement);
+        }
         this.#scopeStack.current = this.#scopeStack.current.filter((s) => s !== scope);
         this.#scopeStack.current.unshift(scope);
     }
@@ -37,4 +43,13 @@ export class FocusScopeManager {
     isActiveScope(scope) {
         return this.getActive() === scope;
     }
+    setPreFocusMemory(scope, element) {
+        this.#preFocusHistory.set(scope, element);
+    }
+    getPreFocusMemory(scope) {
+        return this.#preFocusHistory.get(scope);
+    }
+    clearPreFocusMemory(scope) {
+        this.#preFocusHistory.delete(scope);
+    }
 }

package/dist/bits/utilities/focus-scope/focus-scope.svelte.js

@@ -43,6 +43,7 @@ export class FocusScope {
         // handle close auto-focus
         this.#handleCloseAutoFocus();
         this.#manager.unregister(this);
+        this.#manager.clearPreFocusMemory(this);
         this.#container = null;
     }
     #handleOpenAutoFocus() {
@@ -75,10 +76,17 @@ export class FocusScope {
         });
         this.#opts.onCloseAutoFocus.current?.(event);
         if (!event.defaultPrevented) {
-            // return focus to previously focused element
-            const prevFocused = document.activeElement;
-            if (prevFocused && prevFocused !== document.body) {
-                prevFocused.focus();
+            // return focus to the element that was focused before this scope opened
+            const preFocusedElement = this.#manager.getPreFocusMemory(this);
+            if (preFocusedElement && document.contains(preFocusedElement)) {
+                // ensure the element is still focusable and in the document
+                try {
+                    preFocusedElement.focus();
+                }
+                catch {
+                    // fallback if focus fails
+                    document.body.focus();
+                }
             }
         }
     }

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

@@ -11,6 +11,7 @@ const lockMap = new SvelteMap();
 let initialBodyStyle = $state(null);
 let stopTouchMoveListener = null;
 let cleanupTimeoutId = null;
+let isInCleanupTransition = false;
 const anyLocked = box.with(() => {
     for (const value of lockMap.values()) {
         if (value)
@@ -35,7 +36,6 @@ const bodyLockStackCount = new SharedState(() => {
         isIOS && stopTouchMoveListener?.();
         // reset initialBodyStyle so next locker captures the correct styles
         initialBodyStyle = null;
-        hasEverBeenLocked = false;
     }
     function cancelPendingCleanup() {
         if (cleanupTimeoutId === null)
@@ -45,6 +45,7 @@ const bodyLockStackCount = new SharedState(() => {
     }
     function scheduleCleanupIfNoNewLocks(delay, callback) {
         cancelPendingCleanup();
+        isInCleanupTransition = true;
         cleanupScheduledAt = Date.now();
         const currentCleanupId = cleanupScheduledAt;
         /**
@@ -64,24 +65,20 @@ const bodyLockStackCount = new SharedState(() => {
                 return;
             // ensure no new locks were added during the delay
             if (!isAnyLocked(lockMap)) {
+                isInCleanupTransition = false;
                 callback();
             }
+            else {
+                isInCleanupTransition = false;
+            }
         };
-        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);
-        }
+        const actualDelay = delay === null ? 24 : delay;
+        cleanupTimeoutId = window.setTimeout(cleanupFn, actualDelay);
     }
-    // track if we've ever applied lock styles in this session
-    let hasEverBeenLocked = false;
     function ensureInitialStyleCaptured() {
-        if (!hasEverBeenLocked && initialBodyStyle === null) {
+        // only capture initial style once, when no locks exist and no cleanup is in progress
+        if (initialBodyStyle === null && lockMap.size === 0 && !isInCleanupTransition) {
             initialBodyStyle = document.body.getAttribute("style");
-            hasEverBeenLocked = true;
         }
     }
     watch(() => anyLocked.current, () => {
@@ -89,6 +86,8 @@ const bodyLockStackCount = new SharedState(() => {
             return;
         // ensure we've captured the initial style before applying any lock styles
         ensureInitialStyleCaptured();
+        // if we're applying lock styles, we're no longer in a cleanup transition
+        isInCleanupTransition = false;
         const bodyStyle = getComputedStyle(document.body);
         // TODO: account for RTL direction, etc.
         const verticalScrollbarWidth = window.innerWidth - document.documentElement.clientWidth;

package/package.json

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