Remove react references from core OverlayService apis

docs/development/core/public/kibana-plugin-public.mountpoint.md

@@ -9,5 +9,5 @@ A function that should mount DOM content inside the provided container element a
 <b>Signature:</b>
 
 ```typescript
-export declare type MountPoint = (element: HTMLElement) => UnmountCallback;
+export declare type MountPoint<T extends HTMLElement = HTMLElement> = (element: T) => UnmountCallback;
 ```

docs/development/core/public/kibana-plugin-public.overlaystart.md

@@ -16,6 +16,6 @@ export interface OverlayStart
 |  Property | Type | Description |
 |  --- | --- | --- |
 |  [banners](./kibana-plugin-public.overlaystart.banners.md) | <code>OverlayBannersStart</code> | [OverlayBannersStart](./kibana-plugin-public.overlaybannersstart.md) |
-|  [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | <code>(flyoutChildren: React.ReactNode, flyoutProps?: {</code><br/><code>        closeButtonAriaLabel?: string;</code><br/><code>        'data-test-subj'?: string;</code><br/><code>    }) =&gt; OverlayRef</code> |  |
-|  [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | <code>(modalChildren: React.ReactNode, modalProps?: {</code><br/><code>        className?: string;</code><br/><code>        closeButtonAriaLabel?: string;</code><br/><code>        'data-test-subj'?: string;</code><br/><code>    }) =&gt; OverlayRef</code> |  |
+|  [openFlyout](./kibana-plugin-public.overlaystart.openflyout.md) | <code>OverlayFlyoutStart['open']</code> |  |
+|  [openModal](./kibana-plugin-public.overlaystart.openmodal.md) | <code>OverlayModalStart['open']</code> |  |
 

docs/development/core/public/kibana-plugin-public.overlaystart.openflyout.md

@@ -4,11 +4,9 @@
 
 ## OverlayStart.openFlyout property
 
+
 <b>Signature:</b>
 
 ```typescript
-openFlyout: (flyoutChildren: React.ReactNode, flyoutProps?: {
-        closeButtonAriaLabel?: string;
-        'data-test-subj'?: string;
-    }) => OverlayRef;
+openFlyout: OverlayFlyoutStart['open'];
 ```

docs/development/core/public/kibana-plugin-public.overlaystart.openmodal.md

@@ -4,12 +4,9 @@
 
 ## OverlayStart.openModal property
 
+
 <b>Signature:</b>
 
 ```typescript
-openModal: (modalChildren: React.ReactNode, modalProps?: {
-        className?: string;
-        closeButtonAriaLabel?: string;
-        'data-test-subj'?: string;
-    }) => OverlayRef;
+openModal: OverlayModalStart['open'];
 ```

src/core/public/notifications/toasts/error_toast.tsx

@@ -18,6 +18,7 @@
  */
 
 import React from 'react';
+import ReactDOM from 'react-dom';
 
 import {
   EuiButton,
@@ -29,7 +30,7 @@ import {
   EuiModalHeaderTitle,
 } from '@elastic/eui';
 import { EuiSpacer } from '@elastic/eui';
-import { FormattedMessage } from '@kbn/i18n/react';
+import { FormattedMessage, I18nProvider } from '@kbn/i18n/react';
 
 import { OverlayStart } from '../../overlays';
 
@@ -40,6 +41,11 @@ interface ErrorToastProps {
   openModal: OverlayStart['openModal'];
 }
 
+const mount = (component: React.ReactElement) => (element: HTMLElement) => {
+  ReactDOM.render(<I18nProvider>{component}</I18nProvider>, element);
+  return () => ReactDOM.unmountComponentAtNode(element);
+};
+
 /**
  * This should instead be replaced by the overlay service once it's available.
  * This does not use React portals so that if the parent toast times out, this modal
@@ -52,27 +58,32 @@ function showErrorDialog({
   openModal,
 }: Pick<ErrorToastProps, 'error' | 'title' | 'openModal'>) {
   const modal = openModal(
-    <React.Fragment>
-      <EuiModalHeader>
-        <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
-      </EuiModalHeader>
-      <EuiModalBody>
-        <EuiCallOut size="s" color="danger" iconType="alert" title={error.message} />
-        {error.stack && (
-          <React.Fragment>
-            <EuiSpacer size="s" />
-            <EuiCodeBlock isCopyable={true} paddingSize="s">
-              {error.stack}
-            </EuiCodeBlock>
-          </React.Fragment>
-        )}
-      </EuiModalBody>
-      <EuiModalFooter>
-        <EuiButton onClick={() => modal.close()} fill>
-          <FormattedMessage id="core.notifications.errorToast.closeModal" defaultMessage="Close" />
-        </EuiButton>
-      </EuiModalFooter>
-    </React.Fragment>
+    mount(
+      <React.Fragment>
+        <EuiModalHeader>
+          <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
+        </EuiModalHeader>
+        <EuiModalBody>
+          <EuiCallOut size="s" color="danger" iconType="alert" title={error.message} />
+          {error.stack && (
+            <React.Fragment>
+              <EuiSpacer size="s" />
+              <EuiCodeBlock isCopyable={true} paddingSize="s">
+                {error.stack}
+              </EuiCodeBlock>
+            </React.Fragment>
+          )}
+        </EuiModalBody>
+        <EuiModalFooter>
+          <EuiButton onClick={() => modal.close()} fill>
+            <FormattedMessage
+              id="core.notifications.errorToast.closeModal"
+              defaultMessage="Close"
+            />
+          </EuiButton>
+        </EuiModalFooter>
+      </React.Fragment>
+    )
   );
 }
 

src/core/public/overlays/_index.scss

@@ -1 +1,2 @@
 @import './banners/index';
+@import './mount_wrapper';

src/core/public/overlays/_mount_wrapper.scss

@@ -0,0 +1,5 @@
+.kbnOverlayMountWrapper {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}

src/core/public/overlays/banners/banners_service.tsx

@@ -97,20 +97,16 @@ export class OverlayBannersService {
         if (!banners$.value.has(id)) {
           return false;
         }
-
         banners$.next(banners$.value.remove(id));
-
         return true;
       },
 
       replace(id: string | undefined, mount: MountPoint, priority = 0) {
         if (!id || !banners$.value.has(id)) {
           return this.add(mount, priority);
         }
-
         const nextId = genId();
         const nextBanner = { id: nextId, mount, priority };
-
         banners$.next(banners$.value.remove(id).add(nextId, nextBanner));
         return nextId;
       },