refactor(modal): call onShow$ & onClose$ in Modal directly

Author: GregOnNet

packages/kit-headless/src/components/modal/modal-behavior.ts

@@ -1,4 +1,4 @@
-import { QRL, QwikMouseEvent } from '@builder.io/qwik';
+import { QwikMouseEvent } from '@builder.io/qwik';
 import { FocusTrap, createFocusTrap } from 'focus-trap';
 
 export type WidthState = {
@@ -36,20 +36,18 @@ export function deactivateFocusTrap(focusTrap: FocusTrap | null) {
  * Applies a CSS-Class to animate the modal-showing.
  * Calls the given callback that is executed after the Modal has been opened.
  */
-export async function showModal(modal: HTMLDialogElement, onShow$?: QRL<() => void>) {
+export async function showModal(modal: HTMLDialogElement) {
   modal.showModal();
   supportShowAnimation(modal);
-  await onShow$?.();
 }
 
 /**
  * Closes the given Modal.
  * Applies a CSS-Class to animate the Modal-closing.
  * Calls the given callback that is executed after the Modal has been closed.
  */
-export async function closeModal(modal: HTMLDialogElement, onClose$?: QRL<() => void>) {
+export async function closeModal(modal: HTMLDialogElement) {
   supportClosingAnimation(modal, () => modal.close());
-  await onClose$?.();
 }
 
 /**

packages/kit-headless/src/components/modal/modal.tsx

@@ -57,14 +57,15 @@ export const Modal = component$((props: ModalProps) => {
     window.addEventListener('keydown', escapeKeydownHandler);
 
     if (isOpen) {
-      showModal(modal, props.onShow$);
+      showModal(modal);
+      props.onShow$?.();
       adjustScrollbar(scrollbar, modal);
       activateFocusTrap(focusTrap);
       lockScroll();
     } else {
       unlockScroll(scrollbar);
       closeModal(modal);
-      // animateClosing(modal, props.onClose$);
+      props.onClose$?.();
     }
 
     cleanup(() => {