bits-ui 1.0.0-next.31 → 1.0.0-next.32

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

@@ -10,6 +10,7 @@
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
 	import { useDialogContent } from "../../dialog/dialog.svelte.js";
+	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
 	let {
 		id = useId(),
@@ -24,6 +25,7 @@
 		onInteractOutside = noop,
 		preventScroll = true,
 		trapFocus = true,
+		restoreScrollDelay = null,
 		...restProps
 	}: AlertDialogContentProps = $props();
 
@@ -38,12 +40,16 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer {...mergedProps} present={contentState.root.open.current || forceMount}>
+<PresenceLayer {...mergedProps} {forceMount} present={contentState.root.open.current || forceMount}>
 	{#snippet presence({ present })}
-		<ScrollLock {preventScroll} />
 		<FocusScope
 			loop
-			trapFocus={present.current && trapFocus}
+			trapFocus={shouldTrapFocus({
+				forceMount,
+				present: present.current,
+				trapFocus,
+				open: contentState.root.open.current,
+			})}
 			{...mergedProps}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
@@ -79,18 +85,16 @@
 					>
 						<TextSelectionLayer {...mergedProps} enabled={present.current}>
 							{#if child}
+								{#if contentState.root.open.current}
+									<ScrollLock {preventScroll} {restoreScrollDelay} />
+								{/if}
 								{@render child({
 									props: mergeProps(mergedProps, focusScopeProps),
 									...contentState.snippetProps,
 								})}
 							{:else}
-								<div
-									{...mergeProps(mergedProps, focusScopeProps, {
-										style: {
-											pointerEvents: "auto",
-										},
-									})}
-								>
+								<ScrollLock {preventScroll} />
+								<div {...mergeProps(mergedProps, focusScopeProps)}>
 									{@render children?.()}
 								</div>
 							{/if}

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

@@ -10,6 +10,7 @@
 	import { useId } from "../../../internal/use-id.js";
 	import { noop } from "../../../internal/noop.js";
 	import ScrollLock from "../../utilities/scroll-lock/scroll-lock.svelte";
+	import { shouldTrapFocus } from "../../../internal/should-trap-focus.js";
 
 	let {
 		id = useId(),
@@ -22,6 +23,7 @@
 		onInteractOutside = noop,
 		trapFocus = true,
 		preventScroll = true,
+		restoreScrollDelay = null,
 		...restProps
 	}: DialogContentProps = $props();
 
@@ -36,11 +38,16 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<PresenceLayer {...mergedProps} present={contentState.root.open.current || forceMount}>
+<PresenceLayer {...mergedProps} {forceMount} present={contentState.root.open.current || forceMount}>
 	{#snippet presence({ present })}
 		<FocusScope
 			loop
-			trapFocus={present.current && trapFocus}
+			trapFocus={shouldTrapFocus({
+				forceMount,
+				present: present.current,
+				trapFocus,
+				open: contentState.root.open.current,
+			})}
 			{...mergedProps}
 			onCloseAutoFocus={(e) => {
 				onCloseAutoFocus(e);
@@ -68,20 +75,17 @@
 						}}
 					>
 						<TextSelectionLayer {...mergedProps} enabled={present.current}>
-							<ScrollLock {preventScroll} />
 							{#if child}
+								{#if contentState.root.open.current}
+									<ScrollLock {preventScroll} {restoreScrollDelay} />
+								{/if}
 								{@render child({
 									props: mergeProps(mergedProps, focusScopeProps),
 									...contentState.snippetProps,
 								})}
 							{:else}
-								<div
-									{...mergeProps(mergedProps, focusScopeProps, {
-										style: {
-											pointerEvents: "auto",
-										},
-									})}
-								>
+								<ScrollLock {preventScroll} />
+								<div {...mergeProps(mergedProps, focusScopeProps)}>
 									{@render children?.()}
 								</div>
 							{/if}

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

@@ -112,6 +112,9 @@ declare class DialogContentState {
         readonly role: "dialog" | "alertdialog";
         readonly "aria-describedby": string | undefined;
         readonly "aria-labelledby": string | undefined;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
     };
 }
 type DialogOverlayStateProps = WithRefProps;
@@ -125,6 +128,9 @@ declare class DialogOverlayState {
     props: {
         readonly "data-state": "open" | "closed";
         readonly id: string;
+        readonly style: {
+            readonly pointerEvents: "auto";
+        };
     };
 }
 type AlertDialogCancelStateProps = WithRefProps & ReadableBoxedValues<{

package/dist/bits/dialog/dialog.svelte.js

@@ -254,6 +254,9 @@ class DialogContentState {
         "aria-describedby": this.root.descriptionId,
         "aria-labelledby": this.root.titleId,
         [this.root.attrs.content]: "",
+        style: {
+            pointerEvents: "auto",
+        },
         ...this.root.sharedProps,
     }));
 }
@@ -275,6 +278,9 @@ class DialogOverlayState {
     props = $derived.by(() => ({
         id: this.#id.current,
         [this.root.attrs.overlay]: "",
+        style: {
+            pointerEvents: "auto",
+        },
         ...this.root.sharedProps,
     }));
 }

package/dist/bits/dialog/types.d.ts

@@ -3,6 +3,7 @@ import type { DismissibleLayerProps } from "../utilities/dismissible-layer/types
 import type { PresenceLayerProps } from "../utilities/presence-layer/types.js";
 import type { FocusScopeProps } from "../utilities/focus-scope/types.js";
 import type { TextSelectionLayerProps } from "../utilities/text-selection-layer/types.js";
+import type { ScrollLockProps } from "../utilities/scroll-lock/index.js";
 import type { OnChangeFn, WithChild, WithChildNoChildrenSnippetProps, WithChildren, Without } from "../../internal/types.js";
 import type { BitsPrimitiveButtonAttributes, BitsPrimitiveDivAttributes } from "../../shared/attributes.js";
 import type { PortalProps } from "../utilities/portal/index.js";
@@ -28,9 +29,7 @@ export type DialogRootProps = DialogRootPropsWithoutHTML;
 export type DialogContentSnippetProps = {
     open: boolean;
 };
-export type DialogContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & FocusScopeProps & TextSelectionLayerProps & {
-    preventScroll?: boolean;
-}, "loop">, DialogContentSnippetProps>;
+export type DialogContentPropsWithoutHTML = WithChildNoChildrenSnippetProps<Omit<EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & FocusScopeProps & TextSelectionLayerProps & ScrollLockProps, "loop">, DialogContentSnippetProps>;
 export type DialogContentProps = DialogContentPropsWithoutHTML & Without<BitsPrimitiveDivAttributes, DialogContentPropsWithoutHTML>;
 export type DialogOverlaySnippetProps = {
     open: boolean;

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

@@ -84,19 +84,19 @@ export function useFocusScope({ id, loop, enabled, onOpenAutoFocus, onCloseAutoF
         };
     });
     $effect(() => {
-        let container = untrack(() => ref.current);
+        let container = ref.current;
         const previouslyFocusedElement = document.activeElement;
         untrack(() => {
             if (!container) {
-                container = document.getElementById(untrack(() => id.current));
+                container = document.getElementById(id.current);
             }
             if (!container)
                 return;
-            untrack(() => focusScopeStack.add(focusScope));
+            focusScopeStack.add(focusScope);
             const hasFocusedCandidate = container.contains(previouslyFocusedElement);
             if (!hasFocusedCandidate) {
                 const mountEvent = new CustomEvent(AUTOFOCUS_ON_MOUNT, EVENT_OPTIONS);
-                container.addEventListener(AUTOFOCUS_ON_MOUNT, untrack(() => onOpenAutoFocus.current));
+                container.addEventListener(AUTOFOCUS_ON_MOUNT, onOpenAutoFocus.current);
                 container.dispatchEvent(mountEvent);
                 if (!mountEvent.defaultPrevented) {
                     afterTick(() => {

package/dist/bits/utilities/popper-layer/types.d.ts

@@ -7,8 +7,8 @@ import type { PresenceLayerImplProps, PresenceLayerProps } from "../presence-lay
 import type { FocusScopeImplProps, FocusScopeProps } from "../focus-scope/types.js";
 import type { ScrollLockProps } from "../scroll-lock/index.js";
 import type { Direction } from "../../../shared/index.js";
-export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & ScrollLockProps;
-export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & ScrollLockProps & {
+export type PopperLayerProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & FloatingLayerContentProps & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay">;
+export type PopperLayerStaticProps = EscapeLayerProps & Omit<DismissibleLayerProps, "onInteractOutsideStart"> & PresenceLayerProps & TextSelectionLayerProps & FocusScopeProps & Omit<ScrollLockProps, "restoreScrollDelay"> & {
     content?: Snippet<[{
         props: Record<string, unknown>;
     }]>;

package/dist/bits/utilities/scroll-lock/index.d.ts

@@ -5,4 +5,14 @@ export type ScrollLockProps = {
      * @defaultValue true
      */
     preventScroll?: boolean;
+    /**
+     * The delay in milliseconds before the scrollbar is restored after closing the
+     * dialog. This is only applicable when using the `child` snippet for custom
+     * transitions and `preventScroll` is `true`. You should set this to a value
+     * greater than the transition duration to prevent content from shifting during
+     * the transition.
+     *
+     * @defaultValue null
+     */
+    restoreScrollDelay?: number | null;
 };

package/dist/bits/utilities/scroll-lock/scroll-lock.svelte

@@ -2,7 +2,7 @@
 	import type { ScrollLockProps } from "./index.js";
 	import { useBodyScrollLock } from "../../../internal/use-body-scroll-lock.svelte.js";
 
-	let { preventScroll = true }: ScrollLockProps = $props();
+	let { preventScroll = true, restoreScrollDelay = null }: ScrollLockProps = $props();
 
-	useBodyScrollLock(preventScroll);
+	useBodyScrollLock(preventScroll, () => restoreScrollDelay);
 </script>

package/dist/internal/should-trap-focus.d.ts

@@ -0,0 +1,6 @@
+export declare function shouldTrapFocus({ forceMount, present, trapFocus, open, }: {
+    forceMount: boolean;
+    present: boolean;
+    trapFocus: boolean;
+    open: boolean;
+}): boolean;

package/dist/internal/should-trap-focus.js

@@ -0,0 +1,6 @@
+export function shouldTrapFocus({ forceMount, present, trapFocus, open, }) {
+    if (forceMount) {
+        return open && trapFocus;
+    }
+    return present && trapFocus;
+}

package/dist/internal/use-body-scroll-lock.svelte.d.ts

@@ -1,5 +1,6 @@
+import { type Getter } from "svelte-toolbelt";
 export type ScrollBodyOption = {
     padding?: boolean | number;
     margin?: boolean | number;
 };
-export declare function useBodyScrollLock(initialState?: boolean | undefined): import("svelte-toolbelt").WritableBox<boolean>;
+export declare function useBodyScrollLock(initialState?: boolean | undefined, restoreScrollDelay?: Getter<number | null>): import("svelte-toolbelt").WritableBox<boolean>;

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

@@ -1,6 +1,6 @@
 import { SvelteMap } from "svelte/reactivity";
-import { afterTick, box } from "svelte-toolbelt";
-import { Previous, watch } from "runed";
+import { afterSleep, afterTick, box } from "svelte-toolbelt";
+import { Previous } from "runed";
 import { untrack } from "svelte";
 import { isBrowser, isIOS } from "./is.js";
 import { addEventListener } from "./events.js";
@@ -80,9 +80,10 @@ const useBodyLockStackCount = createSharedHook(() => {
         resetBodyStyle,
     };
 });
-export function useBodyScrollLock(initialState) {
+export function useBodyScrollLock(initialState, restoreScrollDelay = () => null) {
     const id = useId();
     const countState = useBodyLockStackCount();
+    const _restoreScrollDelay = $derived(restoreScrollDelay());
     countState.map.set(id, initialState ?? false);
     const locked = box.with(() => countState.map.get(id) ?? false, (v) => countState.map.set(id, v));
     $effect(() => {
@@ -90,7 +91,12 @@ export function useBodyScrollLock(initialState) {
             countState.map.delete(id);
             const length = Array.from(countState.map.values()).length;
             if (length === 0) {
-                countState.resetBodyStyle();
+                if (_restoreScrollDelay === null) {
+                    countState.resetBodyStyle();
+                }
+                else {
+                    afterSleep(_restoreScrollDelay, () => countState.resetBodyStyle());
+                }
             }
         };
     });

package/package.json

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