feat: include onClick outside utility

README.md

@@ -23,20 +23,18 @@ Popover options:
 
 ```html
   <script>
-    import Popdown from 'svelte-popdown';
+    import Popdown, { onClickOutside } from 'svelte-popdown';
     let clickContentVisible = false;
 
-	const onClickOutside = (e: MouseEvent) => {
-		const target = e.target as HTMLElement;
-		if (!target.closest('.content') && !target.closest('.trigger')) {
-			clickContentVisible = false;
-		}
-	};
   </script>
-
-  <svelte:body on:click={onClickOutside} />
   <Popdown position="below middle" showContent={clickContentVisible}>
-    <button slot="trigger" on:click={() => (clickContentVisible = !clickContentVisible)}>click me</button>
+    <button
+      slot="trigger"
+      on:click={() => (clickContentVisible = !clickContentVisible)}
+      use:onClickOutside={() => (clickContentVisible = false)}
+    >
+      click me
+    </button>
     <div class="content" slot="content" transition:fade>content</div>
   </Popdown>
 ```

package.json

@@ -36,6 +36,7 @@
     "vite": "^3.0.0"
   },
   "type": "module",
+  "main": "./index.js",
   "release": {
     "branches": [
       "main"

src/lib/index.ts

@@ -0,0 +1,4 @@
+import Popdown from './Popdown.svelte';
+import { onClickOutside } from './util/on-click-outside';
+export default Popdown;
+export { Popdown, onClickOutside };

src/lib/util/on-click-outside.ts

@@ -0,0 +1,22 @@
+const createListener = (node: HTMLElement, cb: () => void) => (e: MouseEvent) => {
+  if (node.contains(e.target as Node)) {
+    return;
+  }
+  cb();
+};
+
+const onClickOutside = (node: HTMLElement, cb: () => void) => {
+  const listener = createListener(node, cb);
+  window.addEventListener('click', listener);
+
+  return {
+    update: (cb: () => void) => {
+      window.removeEventListener('click', listener);
+      const newListener = createListener(node, cb);
+      window.addEventListener('click', newListener);
+    },
+    destroy: () => window.removeEventListener('click', listener),
+  };
+};
+
+export { onClickOutside };

src/routes/index.svelte

@@ -2,30 +2,25 @@
   import Popdown from '$lib/Popdown.svelte';
   import PositionExample from '../components/PositionExample.svelte';
   import { fade } from 'svelte/transition';
+  import { onClickOutside } from '$lib/util/on-click-outside';
 
   const horizontalOptions = ['outer-left', 'inner-left', 'center', 'inner-right', 'outer-right'];
   const verticalOptions = ['above', 'top', 'bottom', 'below', 'middle'];
 
   let overflow = true;
   let clickContentVisible = false;
   let hoverContentVisible = false;
-
-  const onClickOutside = (e: MouseEvent) => {
-    const target = e.target as HTMLElement;
-    if (!target.closest('.content') && !target.closest('.trigger')) {
-      clickContentVisible = false;
-    }
-  };
 </script>
 
-<svelte:body on:click={onClickOutside} />
-
 <h1>Popdown Demo</h1>
 <h2>Onclick content:</h2>
 <div>
   <Popdown position="below center" showContent={clickContentVisible}>
     <svelte:fragment slot="trigger">
-      <button on:click={() => (clickContentVisible = !clickContentVisible)}>click me</button>
+      <button
+        on:click={() => (clickContentVisible = !clickContentVisible)}
+        use:onClickOutside={() => (clickContentVisible = false)}>click me</button
+      >
     </svelte:fragment>
     <svelte:fragment slot="content">
       <div class="content" transition:fade>content</div>