fix: closing and focus issues (#18)

.changeset/dirty-dragons-nail.md

@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: closing and focus restoration issues

package.json

@@ -71,6 +71,6 @@
 	"types": "./dist/index.d.ts",
 	"type": "module",
 	"dependencies": {
-		"bits-ui": "^0.13.0"
+		"bits-ui": "^0.13.3"
 	}
 }

src/lib/internal/types.ts

@@ -1,3 +1,5 @@
+import type { Action } from 'svelte/action';
+
 export type SvelteEvent<T extends Event = Event, U extends EventTarget = EventTarget> = T & {
 	currentTarget: EventTarget & U;
 };
@@ -11,3 +13,15 @@ export type Expand<T> = T extends object
 		? { [K in keyof O]: O[K] }
 		: never
 	: T;
+
+export type Builder<
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	Element = any,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	Param = any,
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	Attributes extends Record<string, any> = Record<string, any>
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+> = Record<string, any> & {
+	action: Action<Element, Param, Attributes>;
+};

src/lib/internal/vaul.ts

@@ -110,6 +110,9 @@ export function createVaul(props: CreateVaulProps) {
 		)
 	);
 
+	// keep a reference to the trigger element so we can refocus when it closes via the keyboard
+	const triggerRef = writable<HTMLButtonElement | undefined>(undefined);
+
 	const { onDrag: onDragProp, onRelease: onReleaseProp, onClose, onOpenChange } = withDefaults;
 
 	const {
@@ -237,7 +240,7 @@ export function createVaul(props: CreateVaulProps) {
 
 		if ($drawerRef) {
 			unsub = handleEscapeKeydown($drawerRef, () => {
-				closeDrawer();
+				closeDrawer(true);
 			});
 		}
 
@@ -549,7 +552,7 @@ export function createVaul(props: CreateVaulProps) {
 		}
 	);
 
-	function closeDrawer() {
+	function closeDrawer(withKeyboard: boolean = false) {
 		if (isClosing) return;
 		const $drawerRef = get(drawerRef);
 		if (!$drawerRef) return;
@@ -572,6 +575,9 @@ export function createVaul(props: CreateVaulProps) {
 			visible.set(false);
 			isOpen.set(false);
 			isClosing = false;
+			if (withKeyboard) {
+				get(triggerRef)?.focus();
+			}
 		}, 300);
 
 		const $snapPoints = get(snapPoints);
@@ -818,7 +824,8 @@ export function createVaul(props: CreateVaulProps) {
 		},
 		refs: {
 			drawerRef,
-			overlayRef
+			overlayRef,
+			triggerRef
 		},
 		options
 	};

src/lib/vaul/components/close.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { CloseProps } from './types.js';
+	import { getCtx } from '../ctx.js';
+
+	type $$Props = CloseProps;
+
+	export let el: $$Props['el'] = undefined;
+
+	const {
+		methods: { closeDrawer }
+	} = getCtx();
+</script>
+
+<DialogPrimitive.Close
+	bind:el
+	on:click={(e) => {
+		e.preventDefault();
+		closeDrawer();
+	}}
+	on:keydown={(e) => {
+		if (e.detail.originalEvent.key === 'Enter' || e.detail.originalEvent.key === ' ') {
+			e.preventDefault();
+			closeDrawer(true);
+		}
+	}}
+	{...$$restProps}
+>
+	<slot />
+</DialogPrimitive.Close>

src/lib/vaul/components/content.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
-	import type { OverlayProps } from './types.js';
+	import type { ContentProps } from './types.js';
 	import { getCtx } from '../ctx.js';
 	import Visible from './visible.svelte';
 
-	type $$Props = OverlayProps;
+	type $$Props = ContentProps;
 
 	const {
 		refs: { drawerRef },

src/lib/vaul/components/index.ts

@@ -3,13 +3,13 @@ export { default as Root } from './root.svelte';
 export { default as Content } from './content.svelte';
 export { default as Overlay } from './overlay.svelte';
 export { default as NestedRoot } from './nested-root.svelte';
+export { default as Close } from './close.svelte';
+export { default as Trigger } from './trigger.svelte';
 
-const Trigger = DialogPrimitive.Trigger;
 const Portal = DialogPrimitive.Portal;
-const Close = DialogPrimitive.Close;
 const Title = DialogPrimitive.Title;
 const Description = DialogPrimitive.Description;
 
-export { Trigger, Portal, Close, Title, Description };
+export { Portal, Title, Description };
 
 export * from './types.js';

src/lib/vaul/components/overlay.svelte

@@ -1,5 +1,9 @@
 <script lang="ts">
 	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import type { OverlayProps } from './types.js';
+
+	type $$Props = OverlayProps;
+
 	import { getCtx } from '../ctx.js';
 
 	const {

src/lib/vaul/components/trigger-wrapper.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	// This is kinda weird but we need to be able to pass the builder down somehow
+	// if someone uses `asChild` to modify it. Since it's only exposed as a slot prop
+	// we need something in between the `<DialogPrimitive.Trigger>` and the slot
+
+	import type { Builder } from '$lib/internal/types.js';
+	import { getCtx } from '../ctx.js';
+
+	export let meltBuilder: Builder;
+
+	const {
+		refs: { triggerRef }
+	} = getCtx();
+
+	$: ({ action, ...rest } = meltBuilder);
+
+	// We're wrapping the melt action so we can set the triggerRef
+	// even if a user is using `asChild`
+	const wrappedAction = (node: HTMLElement) => {
+		triggerRef.set(node as HTMLButtonElement);
+		return action(node);
+	};
+
+	$: Object.assign(rest, {
+		action: wrappedAction
+	});
+</script>
+
+<slot newBuilder={rest} />

src/lib/vaul/components/trigger.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	import { Dialog as DialogPrimitive } from 'bits-ui';
+	import TriggerWrapper from './trigger-wrapper.svelte';
+	import { getCtx } from '../ctx.js';
+
+	type $$Props = DialogPrimitive.TriggerProps;
+	type $$Events = DialogPrimitive.TriggerEvents;
+
+	const {
+		refs: { triggerRef }
+	} = getCtx();
+
+	export let el: HTMLButtonElement | undefined = undefined;
+	export let asChild: boolean = false;
+
+	$: if (el) {
+		triggerRef.set(el);
+	}
+</script>
+
+{#if asChild}
+	<DialogPrimitive.Trigger {asChild} let:builder on:click on:keydown bind:el {...$$restProps}>
+		<TriggerWrapper meltBuilder={builder} let:newBuilder>
+			<slot builder={newBuilder} />
+		</TriggerWrapper>
+	</DialogPrimitive.Trigger>
+{:else}
+	<DialogPrimitive.Trigger let:builder on:click on:keydown bind:el {...$$restProps}>
+		<slot {builder} />
+	</DialogPrimitive.Trigger>
+{/if}

src/routes/hero.svelte

@@ -46,10 +46,9 @@
 			<Drawer.Root shouldScaleBackground>
 				<Drawer.Trigger asChild let:builder>
 					<button
+						class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
 						use:builder.action
 						{...builder}
-						type="button"
-						class="rounded-full bg-white px-4 py-2.5 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
 					>
 						Open Drawer
 					</button>