@johly/vaul-svelte 1.0.0-next.11 → 1.0.0-next.13

package/dist/components/drawer/drawer.svelte

@@ -6,11 +6,14 @@
 	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),
-		drawerState = $bindable(),
-		parentDrawer,
 		onOpenChange = noop,
 		onDrag: onDragProp = noop,
 		onRelease: onReleaseProp = noop,
@@ -38,35 +41,47 @@
 		autoFocus = false,
 		disablePreventScroll = true,
 		...restProps
-	}: RootProps & {
-		drawerState?: ParentDrawerState;
-		parentDrawer?: ParentDrawerState;
-	} = $props();
+	}: 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, this drawer behaves as nested
-	const isNestedViaParent = $derived(!!parentDrawer);
+	// 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 (parentDrawer) {
-			parentDrawer.onNestedDrag(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 (parentDrawer) {
-			parentDrawer.onNestedRelease(event, isOpen);
+		if (resolvedParentDrawer) {
+			resolvedParentDrawer.onNestedRelease(event, isOpen);
 		}
 	}
 
 	// Watch open state to notify parent drawer
 	$effect(() => {
-		if (parentDrawer) {
-			parentDrawer.onNestedOpenChange(open);
+		if (resolvedParentDrawer) {
+			resolvedParentDrawer.onNestedOpenChange(open);
 		}
 	});
 
@@ -111,9 +126,25 @@
 		onAnimationEnd: box.with(() => onAnimationEnd),
 	});
 
-	// Expose drawer state for parent-child relationships with global/portal drawers
+	// 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(() => {
-		drawerState = rootState.parentDrawerState;
+		if (!open && resolvedParentDrawer) {
+			// Use queueMicrotask to avoid triggering other effects synchronously
+			queueMicrotask(() => {
+				resolvedParentDrawer = undefined;
+			});
+		}
 	});
 </script>
 

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

@@ -1,9 +1,3 @@
-import type { RootProps } from "./index.js";
-import type { ParentDrawerState } from "../../types.js";
-type $$ComponentProps = RootProps & {
-    drawerState?: ParentDrawerState;
-    parentDrawer?: ParentDrawerState;
-};
-declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open" | "activeSnapPoint" | "drawerState">;
+declare const Drawer: import("svelte").Component<import("../../types.js").DrawerRootPropsWithoutHTML, {}, "open" | "activeSnapPoint">;
 type Drawer = ReturnType<typeof Drawer>;
 export default Drawer;

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/use-drawer-content.svelte.js

@@ -109,6 +109,10 @@ export function useDrawerContent(opts) {
         const delta = { x: xPosition, y: yPosition };
         const isAllowedToSwipe = isDeltaInDirection(delta, ctx.direction.current, swipeStartThreshold);
         if (isAllowedToSwipe) {
+            // Prevent scrollable content from scrolling while dragging the drawer
+            if (ctx.isDragging) {
+                e.preventDefault();
+            }
             ctx.onDrag(e);
             // Prevent parent drawer from receiving the drag event
             if (ctx.nested.current) {
@@ -163,6 +167,10 @@ export function useDrawerContent(opts) {
         const delta = { x: xPosition, y: yPosition };
         const isAllowedToSwipe = isDeltaInDirection(delta, ctx.direction.current, swipeStartThreshold);
         if (isAllowedToSwipe) {
+            // Prevent scrollable content from scrolling while dragging the drawer
+            if (ctx.isDragging) {
+                e.preventDefault();
+            }
             ctx.onDrag(syntheticEvent);
             // Prevent parent drawer from receiving the touch drag event
             if (ctx.nested.current) {

package/package.json

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