From faf0dbd4a85849270567ec631b02b001c6f615d9 Mon Sep 17 00:00:00 2001
From: Stefan Dietz <mail@stefan-dietz.eu>
Date: Mon, 9 Oct 2023 10:50:58 +0200
Subject: [PATCH] Call onClose callback when Modal gets closed

---
 packages/components/src/components/modal/component.tsx | 8 ++++++++
 packages/components/src/types/modal.ts                 | 4 +---
 packages/samples/react/src/components/modal/basic.tsx  | 2 +-
 3 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/modal/component.tsx b/packages/components/src/components/modal/component.tsx
index dd3a6601a7..8acaf6e308 100644
--- a/packages/components/src/components/modal/component.tsx
+++ b/packages/components/src/components/modal/component.tsx
@@ -119,6 +119,14 @@ export class KolModal implements API {
 	public validateActiveElement(value?: HTMLElement | null): void {
 		watchValidator(this, '_activeElement', (value): boolean => typeof value === 'object' || value === null, new Set(['HTMLElement', 'null']), value, {
 			defaultValue: null,
+			hooks: {
+				afterPatch: () => {
+					/* Call onClose event in the _activeElement watcher because activeElement can be set internally and from the outside and closes the modal when set to null. */
+					if (this._activeElement === null && this.state._on?.onClose) {
+						this.state._on.onClose();
+					}
+				},
+			},
 		});
 	}
 
diff --git a/packages/components/src/types/modal.ts b/packages/components/src/types/modal.ts
index f0874ae26c..1ae71e637e 100644
--- a/packages/components/src/types/modal.ts
+++ b/packages/components/src/types/modal.ts
@@ -1,5 +1,3 @@
-import { EventCallback } from './callbacks';
-
 export type KoliBriModalEventCallbacks = {
-	onClose?: EventCallback<Event>;
+	onClose?: () => void;
 };
diff --git a/packages/samples/react/src/components/modal/basic.tsx b/packages/samples/react/src/components/modal/basic.tsx
index 265702447a..e3820f4c07 100644
--- a/packages/samples/react/src/components/modal/basic.tsx
+++ b/packages/samples/react/src/components/modal/basic.tsx
@@ -6,7 +6,7 @@ export const ModalBasic: FC = () => {
 
 	return (
 		<div>
-			<KolModal _ariaLabel="" _width="80%" ref={modalElement}>
+			<KolModal _ariaLabel="" _width="80%" ref={modalElement} _on={{ onClose: () => console.log('Modal closed') }}>
 				<KolCard _heading="Ich bin ein Modal" style={{ width: '100%' }}>
 					<div slot="content">
 						<KolButton