From cc9a5b1a4d4e15e25f240ad6ff2587220bb95237 Mon Sep 17 00:00:00 2001
From: Philippe Oberti <philippe.oberti@elastic.co>
Date: Thu, 6 Jun 2024 12:54:56 -0500
Subject: [PATCH] [Security Solution][Expandable flyout] - add onClose to the
 API to let developers know when the expandable flyout is being closed
 (#183553)

---
 packages/kbn-expandable-flyout/README.md     |  2 ++
 packages/kbn-expandable-flyout/src/index.tsx | 11 ++++++++++-
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/kbn-expandable-flyout/README.md b/packages/kbn-expandable-flyout/README.md
index 2baa93ee6058b0..60e07a5cc84ed6 100644
--- a/packages/kbn-expandable-flyout/README.md
+++ b/packages/kbn-expandable-flyout/README.md
@@ -59,6 +59,8 @@ To control (or mutate) flyout's layout, you can utilize [useExpandableFlyoutApi]
 - **previousPreviewPanel**: navigate to the previous preview panel
 - **closeFlyout**: close the flyout
 
+> The expandable flyout propagates the `onClose` callback from the EuiFlyout component. As we recommend having a single instance of the flyout in your application, it's up to the application's code to dispatch the event (through Redux, window events, observable, prop drilling...). 
+
 ## Usage
 
 To use the expandable flyout in your plugin, first you need wrap your code with the [context provider](https://github.com/elastic/kibana/blob/main/packages/kbn-expandable-flyout/src/context.tsx) at a high enough level as follows:
diff --git a/packages/kbn-expandable-flyout/src/index.tsx b/packages/kbn-expandable-flyout/src/index.tsx
index b55efac7bec690..7bcfa050fbfa55 100644
--- a/packages/kbn-expandable-flyout/src/index.tsx
+++ b/packages/kbn-expandable-flyout/src/index.tsx
@@ -31,6 +31,10 @@ export interface ExpandableFlyoutProps extends Omit<EuiFlyoutProps, 'onClose'> {
    * Allows for custom styles to be passed to the EuiFlyout component
    */
   customStyles?: Interpolation<Theme>;
+  /**
+   * Callback function to let application's code the flyout is closed
+   */
+  onClose?: EuiFlyoutProps['onClose'];
 }
 
 /**
@@ -93,7 +97,12 @@ export const ExpandableFlyout: React.FC<ExpandableFlyoutProps> = ({
       {...flyoutProps}
       size={flyoutWidth}
       ownFocus={false}
-      onClose={closeFlyout}
+      onClose={(e) => {
+        closeFlyout();
+        if (flyoutProps.onClose) {
+          flyoutProps.onClose(e);
+        }
+      }}
       css={customStyles}
     >
       <EuiFlexGroup