@johly/vaul-svelte 1.0.0-next.8 → 1.0.0-next.9

package/dist/components/drawer/drawer-content.svelte

@@ -18,6 +18,8 @@
 		onpointerup = noop,
 		onpointerout = noop,
 		onpointermove = noop,
+		ontouchmove = noop,
+		ontouchend = noop,
 		children,
 		...restProps
 	}: WithChildren<WithoutChildrenOrChild<ContentProps>> = $props();
@@ -36,6 +38,8 @@
 		onpointerup: box.with(() => onpointerup ?? noop),
 		onOpenAutoFocus: box.with(() => onOpenAutoFocus),
 		onFocusOutside: box.with(() => onFocusOutside),
+		ontouchmove: box.with(() => ontouchmove ?? noop),
+		ontouchend: box.with(() => ontouchend ?? noop),
 	});
 
 	const snapPointsOffset = $state.snapshot(contentState.ctx.snapPointsOffset);

package/dist/context.d.ts

@@ -13,6 +13,7 @@ interface DrawerContextValue extends ReadableBoxedValues<{
     handleOnly: boolean;
     container: HTMLElement | null;
     autoFocus: boolean;
+    nested: boolean;
 }>, WritableBoxedValues<{
     keyboardIsOpen: boolean;
     activeSnapPoint: number | string | null;

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

@@ -69,6 +69,10 @@ export function useDrawerContent(opts) {
         opts.onpointerdown.current?.(e);
         pointerStart = { x: e.pageX, y: e.pageY };
         ctx.onPress(e);
+        // Prevent parent drawer from receiving the event
+        if (ctx.nested.current) {
+            e.stopPropagation();
+        }
     }
     function onOpenAutoFocus(e) {
         opts.onOpenAutoFocus.current?.(e);
@@ -106,6 +110,10 @@ export function useDrawerContent(opts) {
         const isAllowedToSwipe = isDeltaInDirection(delta, ctx.direction.current, swipeStartThreshold);
         if (isAllowedToSwipe) {
             ctx.onDrag(e);
+            // Prevent parent drawer from receiving the drag event
+            if (ctx.nested.current) {
+                e.stopPropagation();
+            }
         }
         else if (Math.abs(xPosition) > swipeStartThreshold ||
             Math.abs(yPosition) > swipeStartThreshold) {
@@ -117,12 +125,20 @@ export function useDrawerContent(opts) {
         pointerStart = null;
         wasBeyondThePoint = false;
         ctx.onRelease(e);
+        // Prevent parent drawer from receiving the release event
+        if (ctx.nested.current) {
+            e.stopPropagation();
+        }
     }
     function onpointerout(e) {
         opts.onpointerout.current?.(e);
         if (e.pointerType === "touch")
             return;
         handleOnPointerUp(lastKnownPointerEvent);
+        // Prevent parent drawer from receiving the event
+        if (ctx.nested.current) {
+            e.stopPropagation();
+        }
     }
     function oncontextmenu(e) {
         opts.oncontextmenu.current?.(e);
@@ -148,12 +164,20 @@ export function useDrawerContent(opts) {
         const isAllowedToSwipe = isDeltaInDirection(delta, ctx.direction.current, swipeStartThreshold);
         if (isAllowedToSwipe) {
             ctx.onDrag(syntheticEvent);
+            // Prevent parent drawer from receiving the touch drag event
+            if (ctx.nested.current) {
+                e.stopPropagation();
+            }
         }
     }
-    function ontouchend(_e) {
+    function ontouchend(e) {
         if (lastKnownPointerEvent) {
             handleOnPointerUp(lastKnownPointerEvent);
         }
+        // Prevent parent drawer from receiving the touch end event
+        if (ctx.nested.current) {
+            e.stopPropagation();
+        }
     }
     const props = $derived({
         id: opts.id.current,

package/package.json

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