cleanup; config opts

src/lib/default-overlay.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { IsFocusWithin } from 'runed';
   import { createEventDispatcher, onDestroy, onMount } from 'svelte';
   import type { ModalInstance } from './modal-instance';
 
@@ -14,51 +13,45 @@
     externalClickEvent: (e: PointerEvent) => void;
   }
 
-  onMount(() => {
-    instance.element = ref;
-    // Focus the modal content div when the component is mounted
-    modalContentRef?.focus();
-  });
-
-  onDestroy(() => {
-    dispatch('close');
-    document.removeEventListener('click', handleClick, true);
-  });
-
   let ref: HTMLElement = $state();
   let modalContentRef: HTMLDivElement;
 
   const dispatch = createEventDispatcher<Record<keyof $$Events, any>>();
 
   const handleClick = (e: MouseEvent) => {
-    // const target = e.target as Node;
-    // if (ref && !ref.contains(target)) {
-    //   if (instance.manager.isOnTop(instance.config.id)) {
-    //     instance.manager.close(instance.config.id);
-    //   }
-    // }
+    if (instance.config.closeOnExternalClick) {
+      const target = e.target as Node;
+      // Check if the click target is outside the modal content
+      if (modalContentRef && !modalContentRef.contains(target)) {
+        if (instance.manager.isOnTop(instance.config.id)) {
+          instance.manager.close(instance.config.id);
+        }
+      }
+    }
   };
 
-  const focusWithin = new IsFocusWithin(() => ref);
-
-  const handleKeyDown = (e: KeyboardEvent) => {
-    console.log(e.key);
-
-    if (e.key === 'Escape') {
+  const handleKeyDown = async (e: KeyboardEvent) => {
+    if (e.key === 'Escape' && instance.config.closeOnEscape) {
+      await instance.config.escFn?.();
       instance.manager.close(instance.config.id);
     }
   };
 
-  document.addEventListener('click', handleClick, true);
+  onMount(() => {
+    instance.element = ref;
+    modalContentRef?.focus();
+    document.addEventListener('mousedown', handleClick);
+  });
 
-  $effect(() => {
-    console.log(focusWithin.current);
+  onDestroy(() => {
+    dispatch('close');
+    // Remove click event listener on cleanup
+    document.removeEventListener('mousedown', handleClick);
   });
 </script>
 
 <div bind:this={ref} class="modal-overlay absolute bottom-0 left-0 right-0 top-0 flex h-full w-full items-center justify-center bg-black/50 backdrop-blur-sm transition-all duration-500 {instance.config.classes}">
-  <div bind:this={modalContentRef} role="modal" tabindex="0" onkeydown={handleKeyDown} onclick={handleClick} class="modal-content">
-    {focusWithin.current}
+  <div bind:this={modalContentRef} role="dialog" tabindex="0" on:keydown={handleKeyDown} class="modal-content">
     <instance.config.component {instance} {...rest} />
   </div>
 </div>

src/lib/modal-config.ts

@@ -3,9 +3,10 @@ export class ModalConfig<T = any> {
   public classes?: string;
   public component: any;
   public closeIcon?: boolean;
-  public closeOnEscape?: boolean;
-  public closeOnExternalClick?: boolean;
+  public closeOnEscape?: boolean = true;
+  public closeOnExternalClick?: boolean = true;
   public data?: T;
+  public escFn?: () => Promise<void>;
 
   public constructor(obj: ModalConfig<T>) {
     Object.assign(this, obj);

src/lib/modal-manager.ts

@@ -2,7 +2,7 @@ import { mount, unmount } from 'svelte';
 import DefaultOverlay from './default-overlay.svelte';
 import type { ModalConfig } from './modal-config';
 import { ModalInstance } from './modal-instance';
-import { visible } from './store';
+
 export class ModalManager {
   public modals: { [name: string]: ModalInstance<any> } = {};
 
@@ -31,14 +31,6 @@ export class ModalManager {
     delete this.modals[id];
   }
 
-  public show(id: string): void {
-    visible.set(true);
-  }
-
-  public hide(id: string): void {
-    visible.set(false);
-  }
-
   public getIndex(id: string): number {
     return this.modals[id].index;
   }

test/app/src/app.svelte

@@ -13,4 +13,16 @@
 </script>
 
 <button on:click={() => modalManager.open({ id: 'modal-one', component: ModalOne }, { name: 'one' })}>Open Modal One</button>
-<button on:click={() => modalManager.open({ id: 'modal-two', component: ModalTwo }, { name: 'two' })}>Open Modal Two</button>
+<button
+  on:click={() =>
+    modalManager.open({
+      id: 'modal-two',
+      component: ModalTwo,
+      escFn: async () => {
+        // simulate some async work
+        console.log('esc pressed, waiting 1 second before closing');
+        await new Promise((resolve) => setTimeout(resolve, 1000));
+      }
+    })}>
+  Open Modal Two (delayed esc key closing)
+</button>