next fix scroll restoration

huntabyte · Oct 27, 2024 · 285c9e1 · 285c9e1
1 parent 1a6a0a8
commit 285c9e1
Show file tree

Hide file tree

Showing 8 changed files with 179 additions and 140 deletions.
diff --git a/package.json b/package.json
@@ -26,7 +26,7 @@
 		"prettier": "^3.2.5",
 		"prettier-plugin-svelte": "^3.2.7",
 		"prettier-plugin-tailwindcss": "0.6.8",
-		"svelte": "^5.0.0-next.260",
+		"svelte": "^5.0.0",
 		"svelte-eslint-parser": "^0.41.1",
 		"wrangler": "^3.44.0"
 	},

diff --git a/packages/vaul-svelte/package.json b/packages/vaul-svelte/package.json
@@ -24,12 +24,12 @@
 		"!dist/**/*.spec.*"
 	],
 	"peerDependencies": {
-		"svelte": "5.0.0-next.1"
+		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
 		"@sveltejs/kit": "^2.6.1",
 		"@sveltejs/package": "^2.3.5",
-		"@sveltejs/vite-plugin-svelte": "4.0.0-next.7",
+		"@sveltejs/vite-plugin-svelte": "4.0.0",
 		"@testing-library/dom": "^10.4.0",
 		"@testing-library/jest-dom": "^6.4.8",
 		"@testing-library/svelte": "^5.2.1",
@@ -41,7 +41,7 @@
 		"autoprefixer": "^10.4.16",
 		"jsdom": "^24.1.0",
 		"publint": "^0.2.8",
-		"svelte": "^5.0.0-next.260",
+		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.4",
 		"tslib": "^2.6.3",
 		"typescript": "^5.5.4",
@@ -53,8 +53,8 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"bits-ui": "1.0.0-next.15",
-		"svelte-toolbelt": "^0.4.2"
+		"bits-ui": "1.0.0-next.28",
+		"svelte-toolbelt": "^0.4.4"
 	},
 	"engines": {
 		"pnpm": ">=8.7.0",

diff --git a/packages/vaul-svelte/src/lib/components/drawer/drawer-content.svelte b/packages/vaul-svelte/src/lib/components/drawer/drawer-content.svelte
@@ -39,7 +39,7 @@
 	const mergedProps = $derived(mergeProps(restProps, contentState.props));
 </script>
 
-<DialogPrimitive.Content {...mergedProps}>
+<DialogPrimitive.Content {...mergedProps} preventScroll={true}>
 	{@render children?.()}
 	<Mounted onMounted={(m) => (contentState.mounted = m)} />
 </DialogPrimitive.Content>
diff --git a/packages/vaul-svelte/src/lib/components/drawer/drawer.svelte b/packages/vaul-svelte/src/lib/components/drawer/drawer.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from "bits-ui";
-	import { box } from "svelte-toolbelt";
+	import { afterSleep, box } from "svelte-toolbelt";
 	import type { RootProps } from "./index.js";
 	import { noop } from "$lib/internal/helpers/noop.js";
 	import { useDrawerRoot } from "$lib/vaul.svelte.js";
@@ -88,8 +88,19 @@
 		container: box.with(() => container),
 	});
 
+	let bodyStyles: any;
+
 	function handleOpenChange(o: boolean) {
 		onOpenChange?.(o);
+
+		if (o && !nested) {
+			bodyStyles = document.body.style.cssText;
+		} else if (!o && !nested) {
+			afterSleep(TRANSITIONS.DURATION * 1000, () => {
+				document.body.style.cssText = bodyStyles;
+			});
+		}
+
 		if (!o && !nested) {
 			rootState.positionFixedState.restorePositionSetting();
 		}
@@ -111,13 +122,21 @@
 			document.body.style.pointerEvents = "auto";
 		}
 	}
+
+	$effect(() => {
+		return () => {
+			if (nested) return;
+			document.body.style.cssText = bodyStyles;
+		};
+	});
 </script>
 
 <DialogPrimitive.Root
 	controlledOpen
 	open={rootState.open.current}
 	onOpenChange={(o) => {
 		rootState.onDialogOpenChange(o);
+		handleOpenChange(o);
 	}}
 	{...restProps}
 />

diff --git a/packages/vaul-svelte/src/lib/vaul.svelte.ts b/packages/vaul-svelte/src/lib/vaul.svelte.ts
@@ -1,12 +1,11 @@
 import { untrack } from "svelte";
-import {
-	type Box,
-	type Getter,
-	type ReadableBoxedValues,
-	type WithRefProps,
-	type WritableBox,
-	type WritableBoxedValues,
-	afterTick,
+import type {
+	Box,
+	Getter,
+	ReadableBoxedValues,
+	WithRefProps,
+	WritableBox,
+	WritableBoxedValues,
 } from "svelte-toolbelt";
 import type { MouseEventHandler, PointerEventHandler } from "svelte/elements";
 import { isInput, isVertical } from "./internal/helpers/is.js";
@@ -132,7 +131,6 @@ export class DrawerRootState {
 		this.autoFocus = props.autoFocus;
 		//
 		this.snapPointsState = new SnapPointsState(this);
-
 		this.positionFixedState = new PositionFixed(this);
 
 		$effect(() => {
@@ -228,13 +226,13 @@ export class DrawerRootState {
 			});
 		});
 
-		$effect(() => {
-			if (!this.modal.current) {
-				window.requestAnimationFrame(() => {
-					document.body.style.pointerEvents = "auto";
-				});
-			}
-		});
+		// $effect(() => {
+		// 	if (!this.modal.current) {
+		// 		window.requestAnimationFrame(() => {
+		// 			document.body.style.pointerEvents = "auto";
+		// 		});
+		// 	}
+		// });
 	}
 
 	setActiveSnapPoint = (snapPoint: string | number | null) => {
@@ -746,7 +744,7 @@ class DrawerOverlayState {
 
 type DrawerContentStateProps = WithRefProps &
 	ReadableBoxedValues<{
-		onInteractOutside: (e: MouseEvent | TouchEvent | PointerEvent) => void;
+		onInteractOutside: (e: PointerEvent) => void;
 		onPointerDown: PointerEventHandler<HTMLDivElement>;
 		onPointerMove: PointerEventHandler<HTMLDivElement>;
 		onPointerUp: PointerEventHandler<HTMLDivElement>;
@@ -855,7 +853,7 @@ class DrawerContentState {
 		// }
 	};
 
-	onInteractOutside = (e: MouseEvent | TouchEvent | PointerEvent) => {
+	onInteractOutside = (e: PointerEvent) => {
 		this.#onInteractOutsideProp.current(e);
 
 		if (!this.#root.modal.current || e.defaultPrevented) {