more

Author: huntabyte

packages/vaul-svelte/src/lib/components/drawer/drawer-content.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive, useId } from "bits-ui";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild, useId } from "bits-ui";
+	import { type WithChildren, box, mergeProps } from "svelte-toolbelt";
+	import Mounted from "../utils/mounted.svelte";
 	import type { DrawerContentProps } from "./types.js";
 	import { useDrawerContent } from "$lib/vaul.svelte.js";
 	import { noop } from "$lib/internal/helpers/noop.js";
@@ -12,8 +13,9 @@
 		onEscapeKeydown = noop,
 		onInteractOutside = noop,
 		onFocusOutside = noop,
+		children,
 		...restProps
-	}: DrawerContentProps = $props();
+	}: WithChildren<WithoutChildrenOrChild<DrawerContentProps>> = $props();
 
 	const contentState = useDrawerContent({
 		id: box.with(() => id),
@@ -29,6 +31,7 @@
 <DialogPrimitive.Content
 	bind:ref
 	{...mergedProps}
+	preventScroll={false}
 	onMountAutoFocus={(e) => {
 		onMountAutoFocus(e);
 		if (e.defaultPrevented) return;
@@ -37,20 +40,29 @@
 	onEscapeKeydown={(e) => {
 		onEscapeKeydown(e);
 		if (e.defaultPrevented) return;
-		if (!contentState.root.modal.current) {
-			e.preventDefault();
-		}
+		e.preventDefault();
+		if (!contentState.root.modal.current) return;
+		contentState.root.closeDrawer();
 	}}
 	onFocusOutside={(e) => {
 		onFocusOutside(e);
 		if (e.defaultPrevented) return;
-		if (!contentState.root.modal.current) {
-			e.preventDefault();
-		}
+		contentState.onFocusOutside(e);
 	}}
 	onInteractOutside={(e) => {
 		onInteractOutside(e);
 		if (e.defaultPrevented) return;
 		contentState.onInteractOutside(e);
 	}}
-/>
+>
+	<Mounted
+		onMounted={(mounted) => {
+			if (mounted) {
+				contentState.root.visible = true;
+			} else {
+				contentState.root.drawerNode = null;
+			}
+		}}
+	/>
+	{@render children?.()}
+</DialogPrimitive.Content>

packages/vaul-svelte/src/lib/components/drawer/drawer-overlay.svelte

@@ -1,10 +1,16 @@
 <script lang="ts">
-	import { Dialog as DialogPrimitive, useId } from "bits-ui";
-	import { box, mergeProps } from "svelte-toolbelt";
+	import { Dialog as DialogPrimitive, type WithoutChildrenOrChild, useId } from "bits-ui";
+	import { type WithChildren, box, mergeProps } from "svelte-toolbelt";
+	import Mounted from "../utils/mounted.svelte";
 	import type { DrawerOverlayProps } from "./types.js";
 	import { useDrawerOverlay } from "$lib/vaul.svelte.js";
 
-	let { id = useId(), ref = $bindable(null), ...restProps }: DrawerOverlayProps = $props();
+	let {
+		id = useId(),
+		ref = $bindable(null),
+		children,
+		...restProps
+	}: WithChildren<WithoutChildrenOrChild<DrawerOverlayProps>> = $props();
 
 	const overlayState = useDrawerOverlay({
 		id: box.with(() => id),
@@ -17,4 +23,13 @@
 	const mergedProps = $derived(mergeProps(restProps, overlayState.props));
 </script>
 
-<DialogPrimitive.Overlay bind:ref {...mergedProps} />
+<DialogPrimitive.Overlay bind:ref {...mergedProps}>
+	<Mounted
+		onMounted={(mounted) => {
+			if (!mounted) {
+				overlayState.root.overlayNode = null;
+			}
+		}}
+	/>
+	{@render children?.()}
+</DialogPrimitive.Overlay>

packages/vaul-svelte/src/lib/components/drawer/drawer.svelte

@@ -31,6 +31,7 @@
 		noBodyStyles = false,
 		preventScrollRestoration = true,
 		setBackgroundColorOnScale = true,
+		disablePreventScroll = false,
 		...restProps
 	}: DrawerRootProps = $props();
 
@@ -67,25 +68,23 @@
 		noBodyStyles: box.with(() => noBodyStyles),
 		preventScrollRestoration: box.with(() => preventScrollRestoration),
 		setBackgroundColorOnScale: box.with(() => setBackgroundColorOnScale),
+		disablePreventScroll: box.with(() => disablePreventScroll),
 	});
 </script>
 
 <DialogPrimitive.Root
 	bind:open
 	onOpenChange={(o) => {
 		onOpenChange(o);
-		if (!o) {
-			rootState.closeDrawer();
-		} else if (o) {
-			rootState.openDrawer();
-		}
+		rootState.onOpenChange(o);
 	}}
 	{...restProps}
 />
 
-<style>
+<style global>
 	:global([data-vaul-drawer]) {
 		touch-action: none;
+		will-change: transform;
 		transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
 	}
 
@@ -105,18 +104,18 @@
 		transform: translate3d(100%, 0, 0);
 	}
 
-	:global(.vaul-dragging .vaul-scrollable [data-vaul-drawer-direction="top"]) {
+	:global(.vaul-dragging .vaul-scrollable [data-vault-drawer-direction="top"]) {
 		overflow-y: hidden !important;
 	}
-
-	:global(.vaul-dragging .vaul-scrollable [data-vaul-drawer-direction="bottom"]) {
+	:global(.vaul-dragging .vaul-scrollable [data-vault-drawer-direction="bottom"]) {
 		overflow-y: hidden !important;
 	}
 
-	:global(.vaul-dragging .vaul-scrollable [data-vaul-drawer-direction="left"]) {
+	:global(.vaul-dragging .vaul-scrollable [data-vault-drawer-direction="left"]) {
 		overflow-x: hidden !important;
 	}
-	:global(.vaul-dragging .vaul-scrollable [data-vaul-drawer-direction="right"]) {
+
+	:global(.vaul-dragging .vaul-scrollable [data-vault-drawer-direction="right"]) {
 		overflow-x: hidden !important;
 	}
 
@@ -190,22 +189,6 @@
 		width: 200%;
 	}
 
-	:global(
-			[data-vaul-overlay][data-vaul-snap-points="true"]:not(
-					[data-vaul-snap-points-overlay="true"]
-				):not([data-state="closed"])
-		) {
-		opacity: 0;
-	}
-
-	:global(
-			[data-vaul-overlay][data-vaul-snap-points-overlay="true"]:not(
-					[data-vaul-drawer-visible="false"]
-				)
-		) {
-		opacity: 1;
-	}
-
 	:global([data-vaul-handle]) {
 		display: block;
 		position: relative;
@@ -237,8 +220,24 @@
 		touch-action: inherit;
 	}
 
-	/* This will allow us to not animate via animation, but still benefit from delaying
-	unmount via Bits */
+	:global(
+			[data-vaul-overlay][data-vaul-snap-points="true"]:not(
+					[data-vaul-snap-points-overlay="true"]
+				):not([data-state="closed"])
+		) {
+		opacity: 0;
+	}
+
+	:global(
+			[data-vaul-overlay][data-vaul-snap-points-overlay="true"]:not(
+					[data-vaul-drawer-visible="false"]
+				)
+		) {
+		opacity: 1;
+	}
+
+	/* This will allow us to not animate via animation, but still benefit from delaying unmount via Radix. */
+
 	@keyframes -global-fake-animation {
 		from {
 		}
@@ -251,4 +250,11 @@
 			user-select: none;
 		}
 	}
+
+	@media (pointer: fine) {
+		:global([data-vaul-handle-hitarea]) {
+			width: 100%;
+			height: 100%;
+		}
+	}
 </style>

packages/vaul-svelte/src/lib/components/drawer/types.ts

@@ -159,6 +159,13 @@ type BaseDrawerRootPropsWithoutHTML = WithChildren<{
 	 * @default true
 	 */
 	setBackgroundColorOnScale?: boolean;
+
+	/**
+	 * When `true` scroll will not be prevented outside the drawer.
+	 *
+	 * @default false
+	 */
+	disablePreventScroll?: boolean;
 }>;
 
 export type DrawerRootPropsWithoutHTML = BaseDrawerRootPropsWithoutHTML &

packages/vaul-svelte/src/lib/components/utils/mounted.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import { onMount } from "svelte";
+
+	let { onMounted }: { onMounted: (bool: boolean) => void } = $props();
+
+	onMount(() => {
+		onMounted(true);
+
+		return () => {
+			onMounted(false);
+		};
+	});
+</script>

packages/vaul-svelte/src/lib/internal/helpers/is.ts

@@ -29,8 +29,16 @@ export function isInput(target: Element) {
 }
 
 export function isVertical(direction: DrawerDirection) {
-	if (direction === "top" || direction === "bottom") return true;
-	return false;
+	switch (direction) {
+		case "top":
+		case "bottom":
+			return true;
+		case "left":
+		case "right":
+			return false;
+		default:
+			return direction satisfies never;
+	}
 }
 
 export function isBottomOrRight(direction: DrawerDirection) {

packages/vaul-svelte/src/lib/internal/helpers/style.ts

@@ -7,9 +7,12 @@ interface Style {
 
 const cache = new WeakMap();
 
-export function setStyles(el?: Element | HTMLElement | null, styles?: Style, ignoreCache = false) {
-	if (!el || !(el instanceof HTMLElement) || !styles) return;
-
+export function setStyles(
+	el: Element | HTMLElement | null | undefined,
+	styles: Style,
+	ignoreCache = false
+) {
+	if (!el || !(el instanceof HTMLElement)) return;
 	const originalStyles: Style = {};
 
 	Object.entries(styles).forEach(([key, value]: [string, string]) => {
@@ -49,6 +52,7 @@ export function resetStyles(el: Element | HTMLElement | null, prop?: string) {
 }
 
 export function getTranslate(element: HTMLElement, direction: DrawerDirection): number | null {
+	if (!element) return null;
 	const style = window.getComputedStyle(element);
 	const transform =
 		// @ts-expect-error - vendor prefix
@@ -62,10 +66,3 @@ export function getTranslate(element: HTMLElement, direction: DrawerDirection):
 	mat = transform.match(/^matrix\((.+)\)$/);
 	return mat ? Number.parseFloat(mat[1].split(", ")[isVertical(direction) ? 5 : 4]) : null;
 }
-
-export function styleToString(style: Record<string, number | string | undefined>): string {
-	return Object.keys(style).reduce((str, key) => {
-		if (style[key] === undefined) return str;
-		return `${str}${key}:${style[key]};`;
-	}, "");
-}