From 5d54ffadfae8c6bf9f90bc7187698677cc8c01eb Mon Sep 17 00:00:00 2001
From: Hunter Johnston <64506580+huntabyte@users.noreply.github.com>
Date: Sun, 7 Jan 2024 01:05:33 -0500
Subject: [PATCH] fix: `Drawer.Close` asChild behavior (#22)

---
 .changeset/fluffy-dancers-march.md           |  5 ++
 .eslintrc.cjs                                |  2 +-
 src/lib/vaul/components/close-wrapper.svelte | 45 ++++++++++++++++
 src/lib/vaul/components/close.svelte         | 57 ++++++++++++++------
 4 files changed, 93 insertions(+), 16 deletions(-)
 create mode 100644 .changeset/fluffy-dancers-march.md
 create mode 100644 src/lib/vaul/components/close-wrapper.svelte

diff --git a/.changeset/fluffy-dancers-march.md b/.changeset/fluffy-dancers-march.md
new file mode 100644
index 0000000..dd69851
--- /dev/null
+++ b/.changeset/fluffy-dancers-march.md
@@ -0,0 +1,5 @@
+---
+"vaul-svelte": patch
+---
+
+fix: close asChild behavior
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 2d3c2b9..a5e66ed 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -53,7 +53,7 @@ module.exports = {
 					"warn",
 					{
 						argsIgnorePattern: "^_",
-						varsIgnorePattern: "^\\$\\$(Props|Events|Slots|Generic)$"
+						varsIgnorePattern: "^(\\$\\$(Props|Events|Slots|Generic)|_*)$"
 					}
 				]
 			}
diff --git a/src/lib/vaul/components/close-wrapper.svelte b/src/lib/vaul/components/close-wrapper.svelte
new file mode 100644
index 0000000..849dc81
--- /dev/null
+++ b/src/lib/vaul/components/close-wrapper.svelte
@@ -0,0 +1,45 @@
+<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 {
+		methods: { closeDrawer }
+	} = getCtx();
+
+	$: ({ _, ...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) => {
+		const handleKeydown = (e: KeyboardEvent) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				closeDrawer(true);
+			}
+		};
+
+		const handleClick = () => {
+			closeDrawer();
+		};
+
+		node.addEventListener("keydown", handleKeydown);
+		node.addEventListener("click", handleClick);
+
+		return () => {
+			node.removeEventListener("keydown", handleKeydown);
+			node.removeEventListener("click", handleClick);
+		};
+	};
+
+	$: Object.assign(rest, {
+		action: wrappedAction
+	});
+</script>
+
+<slot newBuilder={rest} />
diff --git a/src/lib/vaul/components/close.svelte b/src/lib/vaul/components/close.svelte
index 5185f66..1aa9f5b 100644
--- a/src/lib/vaul/components/close.svelte
+++ b/src/lib/vaul/components/close.svelte
@@ -2,29 +2,56 @@
 	import { Dialog as DialogPrimitive } from "bits-ui";
 	import type { CloseProps } from "./types.js";
 	import { getCtx } from "../ctx.js";
+	import CloseWrapper from "./close-wrapper.svelte";
 
 	type $$Props = CloseProps;
 
 	export let el: $$Props["el"] = undefined;
+	export let asChild = false;
 
 	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 === " ") {
+{#if asChild}
+	<DialogPrimitive.Close
+		bind:el
+		on:click={(e) => {
 			e.preventDefault();
-			closeDrawer(true);
-		}
-	}}
-	{...$$restProps}
->
-	<slot />
-</DialogPrimitive.Close>
+			closeDrawer();
+		}}
+		on:keydown={(e) => {
+			if (e.detail.originalEvent.key === "Enter" || e.detail.originalEvent.key === " ") {
+				e.preventDefault();
+				closeDrawer(true);
+			}
+		}}
+		{...$$restProps}
+		{asChild}
+		let:builder
+	>
+		<CloseWrapper meltBuilder={builder} let:newBuilder>
+			<slot builder={newBuilder} />
+		</CloseWrapper>
+	</DialogPrimitive.Close>
+{:else}
+	<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}
+		{asChild}
+		let:builder
+	>
+		<slot {builder} />
+	</DialogPrimitive.Close>
+{/if}