refactor: Drawer and clickOutside action

Author: JulienAuvo

infrastructure/eid-wallet/src/lib/ui/Drawer/Drawer.svelte

@@ -53,17 +53,6 @@ $effect(() => {
 
 	return () => pane.destroy();
 });
-
-$effect(() => {
-	if (isPaneOpen) {
-		pane.present({ animate: true });
-	} else {
-		pane.destroy({ animate: true });
-	}
-	drawerElem.addEventListener("click_outside", () => {
-		handleClickOutside();
-	});
-});
 </script>
 
 <div
@@ -74,7 +63,7 @@ $effect(() => {
     })}
     onswipe={() => handleSwipe?.(isPaneOpen)}
     bind:this={drawerElem}
-    use:clickOutside
+    use:clickOutside={handleClickOutside}
     class={cn(restProps.class)}
 >
     <div class="px-6">

infrastructure/eid-wallet/src/lib/utils/clickOutside.ts

@@ -1,12 +1,13 @@
 /** Dispatch event on click outside of node */
-export const clickOutside = (node: HTMLElement) => {
+export const clickOutside = (node: HTMLElement, callback: () => void) => {
 	const handleClick = (event: Event) => {
-		// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-		// @ts-ignore
-		if (node && !node.contains(event.target) && !event.defaultPrevented) {
-			// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-			// @ts-ignore
-			node.dispatchEvent(new CustomEvent("click_outside", node));
+		if (
+			node &&
+			!node.contains(event.target as Node) &&
+			!event.defaultPrevented
+		) {
+			callback(); // Call the provided callback
+			node.dispatchEvent(new CustomEvent("click_outside"));
 		}
 	};