tidy & reuse

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>
 ```

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,20 +37,16 @@ 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'),
 			setTabIndex(-1),
 			reflectAriaModal(store),
 			reflectAriaLabel(store),
 			trapFocusOnOpen(store),
-			onClickOutside(() => [node], cancellableClose),
-			onKeydown(keyEscape(cancellableClose)),
+			onClickOutside(() => [node], tryClose),
+			onKeydown(keyEscape(tryClose)),
 		])
 
 		return {

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()
+		}
+	}
+}