@johly/vaul-svelte 1.0.0-next.10 → 1.0.0-next.12

package/dist/components/drawer/drawer.svelte

@@ -5,12 +5,18 @@
 	import { noop } from "../../internal/noop.js";
 	import { CLOSE_THRESHOLD, SCROLL_LOCK_TIMEOUT } from "../../internal/constants.js";
 	import { useDrawerRoot } from "../../use-drawer-root.svelte.js";
+	import type { ParentDrawerState } from "../../types.js";
+	import {
+		registerDrawer,
+		unregisterDrawer,
+		getCurrentParentDrawer,
+	} from "../../drawer-registry.js";
 
 	let {
 		open = $bindable(false),
 		onOpenChange = noop,
-		onDrag = noop,
-		onRelease = noop,
+		onDrag: onDragProp = noop,
+		onRelease: onReleaseProp = noop,
 		snapPoints,
 		shouldScaleBackground = false,
 		setBackgroundColorOnScale = true,
@@ -37,6 +43,48 @@
 		...restProps
 	}: RootProps = $props();
 
+	// Track the auto-detected parent drawer
+	// If drawer starts open, try to auto-detect immediately
+	const initialParent = open && !nested ? getCurrentParentDrawer() : undefined;
+	let resolvedParentDrawer = $state<ParentDrawerState | undefined>(initialParent);
+
+	// Auto-detect parent when opening (for drawers that open after mount)
+	let wasOpen = open;
+	$effect.pre(() => {
+		// Detect parent on open transition (false -> true)
+		if (open && !wasOpen && !nested) {
+			resolvedParentDrawer = getCurrentParentDrawer();
+		}
+		wasOpen = open;
+	});
+
+	// When parentDrawer is provided or auto-detected, this drawer behaves as nested
+	const isNestedViaParent = $derived(!!resolvedParentDrawer);
+	const effectiveNested = $derived(nested || isNestedViaParent);
+
+	// Wrap onDrag to also notify parent drawer
+	function onDrag(event: PointerEvent, percentageDragged: number) {
+		onDragProp(event, percentageDragged);
+		if (resolvedParentDrawer) {
+			resolvedParentDrawer.onNestedDrag(event, percentageDragged);
+		}
+	}
+
+	// Wrap onRelease to also notify parent drawer
+	function onRelease(event: PointerEvent, isOpen: boolean) {
+		onReleaseProp(event, isOpen);
+		if (resolvedParentDrawer) {
+			resolvedParentDrawer.onNestedRelease(event, isOpen);
+		}
+	}
+
+	// Watch open state to notify parent drawer
+	$effect(() => {
+		if (resolvedParentDrawer) {
+			resolvedParentDrawer.onNestedOpenChange(open);
+		}
+	});
+
 	const rootState = useDrawerRoot({
 		open: box.with(
 			() => open,
@@ -49,7 +97,7 @@
 		scrollLockTimeout: box.with(() => scrollLockTimeout),
 		snapPoints: box.with(() => snapPoints),
 		fadeFromIndex: box.with(() => fadeFromIndex),
-		nested: box.with(() => nested),
+		nested: box.with(() => effectiveNested),
 		shouldScaleBackground: box.with(() => shouldScaleBackground),
 		activeSnapPoint: box.with(
 			() => activeSnapPoint,
@@ -77,6 +125,27 @@
 		onOpenChange: box.with(() => onOpenChange),
 		onAnimationEnd: box.with(() => onAnimationEnd),
 	});
+
+	// Get stable reference to drawer state for registry
+	const stableDrawerState = rootState.parentDrawerState;
+
+	// Register/unregister with global drawer registry
+	$effect(() => {
+		if (open) {
+			registerDrawer(stableDrawerState);
+			return () => unregisterDrawer(stableDrawerState);
+		}
+	});
+
+	// Clear auto-detected parent after drawer closes (separate effect to avoid loops)
+	$effect(() => {
+		if (!open && resolvedParentDrawer) {
+			// Use queueMicrotask to avoid triggering other effects synchronously
+			queueMicrotask(() => {
+				resolvedParentDrawer = undefined;
+			});
+		}
+	});
 </script>
 
 <DialogPrimitive.Root

package/dist/components/drawer/drawer.svelte.d.ts

@@ -1,3 +1,3 @@
-declare const Drawer: import("svelte").Component<import("./types.js").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
+declare const Drawer: import("svelte").Component<import("../../types.js").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

package/dist/components/drawer/types.d.ts

@@ -1,5 +1,6 @@
 import type { BitsPrimitiveDivAttributes, DialogContentPropsWithoutHTML, DialogOverlayPropsWithoutHTML, Dialog as DrawerPrimitive, WithChild, WithoutChildrenOrChild } from "bits-ui";
 import type { WithChildren, Without } from "svelte-toolbelt";
+import type { ParentDrawerState } from "../../types.js";
 export type WithFadeFromProps = {
     /**
      * Array of numbers from 0 to 100 that corresponds to % of the screen a given snap point should take up.
@@ -25,6 +26,19 @@ export type BaseDrawerRootPropsWithoutHTML = WithChildren<{
     activeSnapPoint?: number | string | null;
     onActiveSnapPointChange?: (snapPoint: number | string | null) => void;
     open?: boolean;
+    /**
+     * Exposes the drawer's state that can be passed to another drawer's `parentDrawer`
+     * prop to establish a parent-child relationship without component hierarchy.
+     * Useful for global/portal confirmation drawers.
+     */
+    drawerState?: ParentDrawerState;
+    /**
+     * Pass another drawer's `drawerState` here to make this drawer behave as a nested
+     * drawer of that parent, even when rendered outside the component hierarchy.
+     * When provided, this drawer will automatically have `nested` behavior enabled
+     * and will scale/animate the parent drawer appropriately.
+     */
+    parentDrawer?: ParentDrawerState;
     /**
      * Number between 0 and 1 that determines when the drawer should be closed.
      * Example: threshold of 0.5 would close the drawer if the user swiped for 50% of the height of the drawer or more.

package/dist/drawer-registry.d.ts

@@ -0,0 +1,15 @@
+import type { ParentDrawerState } from "./types.js";
+/**
+ * Register a drawer as open.
+ */
+export declare function registerDrawer(state: ParentDrawerState): void;
+/**
+ * Unregister a drawer when it closes.
+ */
+export declare function unregisterDrawer(state: ParentDrawerState): void;
+/**
+ * Get the current topmost drawer state (if any).
+ * Used to auto-detect parent drawer when a new drawer opens.
+ * Returns the most recently opened drawer, which becomes the parent of the new drawer.
+ */
+export declare function getCurrentParentDrawer(): ParentDrawerState | undefined;

package/dist/drawer-registry.js

@@ -0,0 +1,32 @@
+/**
+ * Global registry for tracking open drawers.
+ * Enables automatic parent-child relationships without manual prop passing.
+ *
+ * NOTE: This is intentionally NOT using $state to avoid creating reactive
+ * dependencies that would cause infinite effect loops.
+ */
+// Stack of open drawers (most recent last) - intentionally non-reactive
+let openDrawers = [];
+/**
+ * Register a drawer as open.
+ */
+export function registerDrawer(state) {
+    openDrawers.push(state);
+}
+/**
+ * Unregister a drawer when it closes.
+ */
+export function unregisterDrawer(state) {
+    const index = openDrawers.indexOf(state);
+    if (index !== -1) {
+        openDrawers.splice(index, 1);
+    }
+}
+/**
+ * Get the current topmost drawer state (if any).
+ * Used to auto-detect parent drawer when a new drawer opens.
+ * Returns the most recently opened drawer, which becomes the parent of the new drawer.
+ */
+export function getCurrentParentDrawer() {
+    return openDrawers.at(-1);
+}

package/dist/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
 export * from "./types.js";
+export { getCurrentParentDrawer } from "./drawer-registry.js";

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from "./components/index.js";
 export * from "./types.js";
+export { getCurrentParentDrawer } from "./drawer-registry.js";

package/dist/types.d.ts

@@ -3,6 +3,17 @@ export type DrawerDirection = "left" | "right" | "top" | "bottom";
 export type OnChangeFn<T> = (value: T) => void;
 export type OnDrag = (event: PointerEvent | MouseEvent, percentageDragged: number) => void;
 export type OnRelease = (event: PointerEvent | MouseEvent, open: boolean) => void;
+/**
+ * State object exposed by a drawer that can be passed to another drawer
+ * to establish a parent-child relationship without component hierarchy.
+ * Use this for global/portal drawers that need to behave as nested drawers.
+ */
+export type ParentDrawerState = {
+    onNestedOpenChange: (open: boolean) => void;
+    onNestedDrag: (event: PointerEvent, percentageDragged: number) => void;
+    onNestedRelease: (event: PointerEvent, open: boolean) => void;
+    direction: DrawerDirection;
+};
 export type AnyFunction = (...args: any) => any;
 export type Getters<T> = {
     [K in keyof T]: () => T[K];

package/dist/use-drawer-root.svelte.d.ts

@@ -0,0 +1,78 @@
+import { type ReadableBoxedValues, type WritableBoxedValues } from "svelte-toolbelt";
+import type { DrawerDirection, ParentDrawerState } from "./types.js";
+type UseDrawerRootProps = ReadableBoxedValues<{
+    closeThreshold: number;
+    shouldScaleBackground: boolean;
+    scrollLockTimeout: number;
+    snapPoints: (string | number)[] | undefined;
+    fadeFromIndex: number | undefined;
+    fixed: boolean;
+    dismissible: boolean;
+    direction: DrawerDirection;
+    onDrag: (event: PointerEvent, percentageDragged: number) => void;
+    onRelease: (event: PointerEvent, open: boolean) => void;
+    nested: boolean;
+    onClose: () => void;
+    modal: boolean;
+    handleOnly: boolean;
+    noBodyStyles: boolean;
+    preventScrollRestoration: boolean;
+    setBackgroundColorOnScale: boolean;
+    container: HTMLElement | null;
+    snapToSequentialPoint: boolean;
+    repositionInputs: boolean;
+    autoFocus: boolean;
+    disablePreventScroll: boolean;
+    onOpenChange: (o: boolean) => void;
+    onAnimationEnd: (open: boolean) => void;
+}> & WritableBoxedValues<{
+    open: boolean;
+    activeSnapPoint: number | string | null;
+}>;
+export declare function useDrawerRoot(opts: UseDrawerRootProps): {
+    keyboardIsOpen: import("svelte-toolbelt").WritableBox<boolean>;
+    closeDrawer: (fromWithin?: boolean) => void;
+    setDrawerNode: (node: HTMLElement | null) => void;
+    setOverlayNode: (node: HTMLElement | null) => void;
+    onDrag: (event: PointerEvent) => void;
+    onNestedDrag: (_event: PointerEvent, percentageDragged: number) => void;
+    onNestedOpenChange: (o: boolean) => void;
+    onNestedRelease: (_event: PointerEvent, o: boolean) => void;
+    onRelease: (event: PointerEvent | null) => void;
+    onPress: (event: PointerEvent) => void;
+    onDialogOpenChange: (o: boolean) => void;
+    shouldAnimate: boolean;
+    isDragging: boolean;
+    overlayNode: HTMLElement | null;
+    drawerNode: HTMLElement | null;
+    snapPointsOffset: number[];
+    shouldFade: boolean;
+    restorePositionSetting: () => void;
+    handleOpenChange: (o: boolean) => void;
+    parentDrawerState: ParentDrawerState;
+    closeThreshold: import("svelte-toolbelt").ReadableBox<number>;
+    shouldScaleBackground: import("svelte-toolbelt").ReadableBox<boolean>;
+    scrollLockTimeout: import("svelte-toolbelt").ReadableBox<number>;
+    snapPoints: import("svelte-toolbelt").ReadableBox<(string | number)[] | undefined>;
+    fadeFromIndex: import("svelte-toolbelt").ReadableBox<number | undefined>;
+    fixed: import("svelte-toolbelt").ReadableBox<boolean>;
+    dismissible: import("svelte-toolbelt").ReadableBox<boolean>;
+    direction: import("svelte-toolbelt").ReadableBox<DrawerDirection>;
+    nested: import("svelte-toolbelt").ReadableBox<boolean>;
+    onClose: import("svelte-toolbelt").ReadableBox<() => void>;
+    modal: import("svelte-toolbelt").ReadableBox<boolean>;
+    handleOnly: import("svelte-toolbelt").ReadableBox<boolean>;
+    noBodyStyles: import("svelte-toolbelt").ReadableBox<boolean>;
+    preventScrollRestoration: import("svelte-toolbelt").ReadableBox<boolean>;
+    setBackgroundColorOnScale: import("svelte-toolbelt").ReadableBox<boolean>;
+    container: import("svelte-toolbelt").ReadableBox<HTMLElement | null>;
+    snapToSequentialPoint: import("svelte-toolbelt").ReadableBox<boolean>;
+    repositionInputs: import("svelte-toolbelt").ReadableBox<boolean>;
+    autoFocus: import("svelte-toolbelt").ReadableBox<boolean>;
+    disablePreventScroll: import("svelte-toolbelt").ReadableBox<boolean>;
+    onOpenChange: import("svelte-toolbelt").ReadableBox<(o: boolean) => void>;
+    onAnimationEnd: import("svelte-toolbelt").ReadableBox<(open: boolean) => void>;
+    open: import("svelte-toolbelt").WritableBox<boolean>;
+    activeSnapPoint: import("svelte-toolbelt").WritableBox<string | number | null>;
+};
+export {};

package/dist/use-drawer-root.svelte.js

@@ -559,7 +559,7 @@ export function useDrawerRoot(opts) {
     function setDrawerNode(node) {
         drawerNode = node;
     }
-    return DrawerContext.set({
+    const contextValue = {
         ...opts,
         keyboardIsOpen,
         closeDrawer,
@@ -592,5 +592,19 @@ export function useDrawerRoot(opts) {
         },
         restorePositionSetting,
         handleOpenChange,
-    });
+        /**
+         * State that can be passed to another drawer to establish a parent-child
+         * relationship without component hierarchy (for global/portal drawers).
+         */
+        get parentDrawerState() {
+            return {
+                onNestedOpenChange,
+                onNestedDrag,
+                onNestedRelease,
+                direction: opts.direction.current,
+            };
+        },
+    };
+    DrawerContext.set(contextValue);
+    return contextValue;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@johly/vaul-svelte",
-  "version": "1.0.0-next.10",
+  "version": "1.0.0-next.12",
   "license": "MIT",
   "repository": "github:johanohly/vaul-svelte",
   "exports": {