From 2bca84d98a5ca1ee05732bcf988ed1d47a7fddbc Mon Sep 17 00:00:00 2001
From: Quang Phan <vnphanquang@gmail.com>
Date: Fri, 17 May 2024 16:20:47 +0700
Subject: [PATCH] chore(clickoutside): change event listener typing

---
 .changeset/beige-hornets-think.md         | 5 +++++
 packages/clickoutside/README.md           | 2 +-
 packages/clickoutside/src/clickoutside.js | 2 +-
 packages/clickoutside/src/public.d.ts     | 6 +++---
 4 files changed, 10 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/beige-hornets-think.md

diff --git a/.changeset/beige-hornets-think.md b/.changeset/beige-hornets-think.md
new file mode 100644
index 00000000..22884014
--- /dev/null
+++ b/.changeset/beige-hornets-think.md
@@ -0,0 +1,5 @@
+---
+"@svelte-put/clickoutside": major
+---
+
+`onclickoutside` is now `onclickoutside` (see Svelte 5 docs)
diff --git a/packages/clickoutside/README.md b/packages/clickoutside/README.md
index d455aa41..fc5cb9b8 100644
--- a/packages/clickoutside/README.md
+++ b/packages/clickoutside/README.md
@@ -29,7 +29,7 @@ This package is part of the [@svelte-put][github.monorepo] family. For contribut
 	}
 </script>
 
-<div use:clickoutside on:clickoutside="{doSomething}" />
+<div use:clickoutside onclickoutside="{doSomething}" />
 ```
 
 ## [Changelog][github.changelog]
diff --git a/packages/clickoutside/src/clickoutside.js b/packages/clickoutside/src/clickoutside.js
index 31e8db91..74a1810a 100644
--- a/packages/clickoutside/src/clickoutside.js
+++ b/packages/clickoutside/src/clickoutside.js
@@ -28,7 +28,7 @@
  *    <aside
  *      class="absolute top-0 left-0 right-0 bottom-0"
  *      use:clickoutside={{ limit: { parent: containerNode }}}
- *      on:clickoutside={onClickOutside}
+ *      onclickoutside={onClickOutside}
  *    >
  *      ...some modal content...
  *    </aside>
diff --git a/packages/clickoutside/src/public.d.ts b/packages/clickoutside/src/public.d.ts
index 93079c04..431a50d2 100644
--- a/packages/clickoutside/src/public.d.ts
+++ b/packages/clickoutside/src/public.d.ts
@@ -12,15 +12,15 @@ import { ActionReturn, Action } from 'svelte/action';
  *   import { clickoutside } from '@svelte-put/clickoutside';
  * </script>
  *
- * <!-- on:clickoutside should be typed -->
+ * <!-- onclickoutside should be typed -->
  * <div
  *   use:clickoutside
- *   on:clickoutside
+ *   onclickoutside
  * />
  * ```
  */
 export interface ClickOutsideAttributes {
-	'on:clickoutside'?: (event: CustomEvent<MouseEvent>) => void;
+	'onclickoutside'?: (event: CustomEvent<MouseEvent>) => void;
 }
 
 /**