From 8fb275b180079a292d14f31e03dc667a41f9c4c2 Mon Sep 17 00:00:00 2001
From: Simon Green <simon@captaincodeman.com>
Date: Thu, 13 Jun 2024 13:34:02 -0600
Subject: [PATCH] tidy & reuse

---
 src/docs/05-dialog.md                 |  2 +-
 src/lib/dialog.ts                     | 11 ++++-------
 src/lib/internal/cancellable-close.ts |  9 +++++++++
 3 files changed, 14 insertions(+), 8 deletions(-)
 create mode 100644 src/lib/internal/cancellable-close.ts

diff --git a/src/docs/05-dialog.md b/src/docs/05-dialog.md
index 6f59c37..0db151b 100644
--- a/src/docs/05-dialog.md
+++ b/src/docs/05-dialog.md
@@ -103,7 +103,7 @@ A fully-managed, renderless dialog component jam-packed with accessibility and k
 If the `Esc` key is pressed or the backdrop clicked, the dialog element will raise a `close` event which can be cancelled if required to prevent accidental closure:
 
 ```svelte
-<div class="relative z-10" on:close={(e) => e.preventDefault()>
+<div class="relative z-10" on:close|preventDefault>
 	...
 </div>
 ```
\ No newline at end of file
diff --git a/src/lib/dialog.ts b/src/lib/dialog.ts
index a91be76..dd86b43 100644
--- a/src/lib/dialog.ts
+++ b/src/lib/dialog.ts
@@ -11,6 +11,7 @@ import { setRole } from './internal/set-role'
 import { getPrefix } from './internal/utils'
 import { trapFocusOnOpen } from './internal/focus'
 import { setTabIndex } from './internal/set-tab-index'
+import { cancellableClose } from './internal/cancellable-close'
 
 export interface Dialog extends Expandable, Labelable {}
 
@@ -36,11 +37,7 @@ export function createDialog(init?: Partial<Dialog>) {
 	function modal(node: HTMLElement) {
 		ensureID(node, prefix)
 
-		function cancellableClose() {
-			if (node.dispatchEvent(new Event('close', { bubbles: true, cancelable: true }))) {
-				close()
-			}
-		}
+		const tryClose = cancellableClose(node, close)
 
 		const destroy = applyBehaviors(node, [
 			setRole('dialog'),
@@ -48,8 +45,8 @@ export function createDialog(init?: Partial<Dialog>) {
 			reflectAriaModal(store),
 			reflectAriaLabel(store),
 			trapFocusOnOpen(store),
-			onClickOutside(() => [node], cancellableClose),
-			onKeydown(keyEscape(cancellableClose)),
+			onClickOutside(() => [node], tryClose),
+			onKeydown(keyEscape(tryClose)),
 		])
 
 		return {
diff --git a/src/lib/internal/cancellable-close.ts b/src/lib/internal/cancellable-close.ts
new file mode 100644
index 0000000..41fc4a7
--- /dev/null
+++ b/src/lib/internal/cancellable-close.ts
@@ -0,0 +1,9 @@
+import type { Callable } from './callable'
+
+export function cancellableClose(node: HTMLElement, close: Callable) {
+	return () => {
+		if (node.dispatchEvent(new Event('close', { bubbles: true, cancelable: true }))) {
+			close()
+		}
+	}
+}