[Security Solution][Expandable flyout] - add onClose to the API to le…

…t developers know when the expandable flyout is being closed (elastic#183553)

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:

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