Add EuiWindowProvider for multi-window support

packages/eui/changelogs/upcoming/7782.md

@@ -0,0 +1,5 @@
+- Added `EuiWindowProvider` that fixes interactivity of some components in scenarios where rendering is done via React Portals into another browser window or iframe. ([#7782](https://github.com/elastic/eui/pull/7782))
+
+**Dependency updates**
+
+- Updated `react-focus-on` to vX.Y.Z (TODO)

packages/eui/i18ntokens.json

@@ -4811,14 +4811,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 336,
+        "line": 339,
         "column": 14,
-        "index": 10903
+        "index": 11143
       },
       "end": {
-        "line": 339,
+        "line": 342,
         "column": 16,
-        "index": 11118
+        "index": 11358
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4829,14 +4829,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 341,
+        "line": 344,
         "column": 14,
-        "index": 11151
+        "index": 11391
       },
       "end": {
-        "line": 344,
+        "line": 347,
         "column": 16,
-        "index": 11329
+        "index": 11569
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4847,14 +4847,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 347,
+        "line": 350,
         "column": 14,
-        "index": 11406
+        "index": 11646
       },
       "end": {
-        "line": 350,
+        "line": 353,
         "column": 16,
-        "index": 11599
+        "index": 11839
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"

packages/eui/src-docs/src/routes.js

@@ -237,6 +237,8 @@ import { TourExample } from './views/tour/tour_example';
 
 import { WindowEventExample } from './views/window_event/window_event_example';
 
+import { WindowProviderExample } from './views/window_provider/window_provider_example';
+
 import { Changelog } from './views/package/changelog';
 
 import { I18nTokens } from './views/package/i18n_tokens';
@@ -667,6 +669,7 @@ const navigation = [
       ].map((example) => createExample(example)),
       createTabbedPage(TextTruncateExample),
       createExample(WindowEventExample),
+      createExample(WindowProviderExample),
     ],
   },
   {

packages/eui/src-docs/src/views/window_provider/props.tsx

@@ -0,0 +1,9 @@
+import React, { FunctionComponent } from 'react';
+
+import { EuiWindowProviderProps } from '../../../../src/services/window_provider/provider';
+
+export const useEuiWindowProviderProps: FunctionComponent<
+  EuiWindowProviderProps
+> = () => {
+  return <div />;
+};

packages/eui/src-docs/src/views/window_provider/window_provider.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { createPortal } from 'react-dom';
+import {
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFlyout,
+  EuiFlyoutBody,
+  EuiFlyoutHeader,
+  EuiHorizontalRule,
+  EuiLink,
+  EuiPanel,
+  EuiPopover,
+  EuiText,
+  EuiTitle,
+  EuiToolTip,
+} from '../../../../src/components';
+import { EuiWindowProvider } from '../../../../src/services';
+import createCache, { EmotionCache } from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+import { WindowProvider } from 'react-style-singleton';
+
+export default () => {
+  const [childWindow, setChildWindow] = useState<
+    | {
+        type: 'open';
+        window: Window;
+        emotionCache: EmotionCache;
+      }
+    | { type: 'closed' }
+  >({ type: 'closed' });
+
+  const openWindow = () => {
+    const newWindow = window.open('', '_blank', `width=800,height=600`);
+
+    if (!newWindow) {
+      throw new Error('Could not open the window.');
+    }
+
+    newWindow.onbeforeunload = () => {
+      setChildWindow({ type: 'closed' });
+    };
+
+    copyStyles(newWindow);
+
+    const emotionCache = createCache({
+      key: 'child-window',
+      container: newWindow.document.head,
+    });
+
+    setChildWindow({ type: 'open', window: newWindow, emotionCache });
+  };
+
+  return (
+    <div>
+      <EuiButton onClick={openWindow}>Open new window</EuiButton>
+      {childWindow.type === 'open' && (
+        <EuiWindowProvider window={childWindow.window}>
+          <WindowProvider window={childWindow.window}>
+            <CacheProvider value={childWindow.emotionCache}>
+              <NewWindow windowHandle={childWindow.window}>
+                <WindowContents />
+              </NewWindow>
+            </CacheProvider>
+          </WindowProvider>
+        </EuiWindowProvider>
+      )}
+    </div>
+  );
+};
+
+const NewWindow = ({
+  windowHandle,
+  children,
+}: {
+  windowHandle: Window;
+  children: React.ReactNode;
+}) => {
+  return createPortal(children, windowHandle.document.body);
+};
+
+const WindowContents = () => {
+  const [isFlyoutOpen, setIsFlyoutOpen] = useState(false);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  return (
+    <>
+      {isFlyoutOpen ? (
+        <EuiFlyout
+          onClose={() => {
+            setIsFlyoutOpen(false);
+          }}
+          paddingSize="m"
+        >
+          <EuiFlyoutHeader hasBorder>
+            <EuiTitle size="m">
+              <h2>Flyout header</h2>
+            </EuiTitle>
+          </EuiFlyoutHeader>
+          <EuiFlyoutBody>
+            <EuiText>Flyout contents.</EuiText>
+          </EuiFlyoutBody>
+        </EuiFlyout>
+      ) : null}
+
+      <EuiPanel hasBorder style={{ margin: '1rem' }}>
+        <EuiText>
+          <h2>Interactivity example</h2>
+        </EuiText>
+
+        <EuiHorizontalRule />
+
+        <EuiButton
+          onClick={() => {
+            setIsFlyoutOpen(true);
+          }}
+        >
+          Open flyout
+        </EuiButton>
+
+        <EuiHorizontalRule />
+
+        <EuiPopover
+          button={
+            <EuiButtonEmpty
+              iconType="documentation"
+              iconSide="right"
+              onClick={() => {
+                setIsPopoverOpen(true);
+              }}
+            >
+              Popover example (click to open)
+            </EuiButtonEmpty>
+          }
+          isOpen={isPopoverOpen}
+          closePopover={() => {
+            setIsPopoverOpen(false);
+          }}
+        >
+          <EuiText style={{ width: 300 }}>
+            <p>Popover content that&rsquo;s wider than the default width</p>
+          </EuiText>
+        </EuiPopover>
+
+        <EuiHorizontalRule />
+
+        <EuiToolTip position="top" content="Here is some tooltip text">
+          <EuiLink href="#">Tooltip example (hover to open)</EuiLink>
+        </EuiToolTip>
+      </EuiPanel>
+    </>
+  );
+};
+
+function copyStyles(targetWindow: Window) {
+  const collectedStyles: string[] = [];
+
+  const elements = [
+    ...document.head.querySelectorAll('link[data-react-helmet="true"]'),
+    ...document.head.getElementsByTagName('style'),
+  ];
+
+  elements.forEach((element) => {
+    collectedStyles.push(element.outerHTML);
+  });
+
+  targetWindow.document.head.innerHTML += collectedStyles.join('\r\n');
+}

packages/eui/src-docs/src/views/window_provider/window_provider_example.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { GuideSectionTypes } from '../../components';
+
+import { EuiCode } from '../../../../src/components';
+import WindowProviderDemo from './window_provider';
+import { EuiWindowProvider } from '../../../../src/services';
+const windowProviderSource = require('!!raw-loader!./window_provider');
+
+export const WindowProviderExample = {
+  title: 'Window provider',
+  sections: [
+    {
+      source: [
+        {
+          type: GuideSectionTypes.TSX,
+          code: windowProviderSource,
+        },
+      ],
+      text: (
+        <>
+          <p>
+            There might be situations when you need to render EUI components
+            inside iframes or in another window using React Portals. To ensure
+            that target components use the correct <EuiCode>window</EuiCode> and{' '}
+            <EuiCode>document</EuiCode> object, use the{' '}
+            <strong>EuiWindowProvider</strong> component.
+          </p>
+        </>
+      ),
+      demo: <WindowProviderDemo />,
+      props: { EuiWindowProvider },
+    },
+  ],
+};

packages/eui/src/components/flyout/flyout.tsx

@@ -30,6 +30,7 @@ import {
   useIsWithinMinBreakpoint,
   useEuiMemoizedStyles,
   useGeneratedHtmlId,
+  useEuiWindow,
 } from '../../services';
 import { logicalStyle } from '../../global_styling';
 
@@ -202,6 +203,8 @@ export const EuiFlyout = forwardRef(
   ) => {
     const Element = as || defaultElement;
     const maskRef = useRef<HTMLDivElement>(null);
+    const currentWindow = useEuiWindow();
+    const currentDocument = currentWindow?.document ?? document;
 
     const windowIsLargeEnoughToPush =
       useIsWithinMinBreakpoint(pushMinBreakpoint);
@@ -225,23 +228,23 @@ export const EuiFlyout = forwardRef(
         const paddingSide =
           side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
 
-        document.body.style[paddingSide] = `${width}px`;
+        currentDocument.body.style[paddingSide] = `${width}px`;
         return () => {
-          document.body.style[paddingSide] = '';
+          currentDocument.body.style[paddingSide] = '';
         };
       }
-    }, [isPushed, side, width]);
+    }, [isPushed, side, width, currentDocument.body.style]);
 
     /**
      * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
      */
     useEffect(() => {
-      document.body.classList.add('euiBody--hasFlyout');
+      currentDocument.body.classList.add('euiBody--hasFlyout');
       return () => {
         // Remove the hasFlyout class when the flyout is unmounted
-        document.body.classList.remove('euiBody--hasFlyout');
+        currentDocument.body.classList.remove('euiBody--hasFlyout');
       };
-    }, []);
+    }, [currentDocument.body.classList]);
 
     /**
      * ESC key closes flyout (always?)
@@ -290,12 +293,12 @@ export const EuiFlyout = forwardRef(
      * If not disabled, automatically add fixed EuiHeaders as shards
      * to EuiFlyout focus traps, to prevent focus fighting
      */
-    const flyoutToggle = useRef<Element | null>(document.activeElement);
+    const flyoutToggle = useRef<Element | null>(currentDocument.activeElement);
     const [fixedHeaders, setFixedHeaders] = useState<HTMLDivElement[]>([]);
 
     useEffect(() => {
       if (includeFixedHeadersInFocusTrap) {
-        const fixedHeaderEls = document.querySelectorAll<HTMLDivElement>(
+        const fixedHeaderEls = currentDocument.querySelectorAll<HTMLDivElement>(
           '.euiHeader[data-fixed-header]'
         );
         setFixedHeaders(Array.from(fixedHeaderEls));
@@ -311,7 +314,7 @@ export const EuiFlyout = forwardRef(
         // Clear existing headers if necessary, e.g. switching to `false`
         setFixedHeaders((headers) => (headers.length ? [] : headers));
       }
-    }, [includeFixedHeadersInFocusTrap, resizeRef]);
+    }, [includeFixedHeadersInFocusTrap, resizeRef, currentDocument]);
 
     const focusTrapProps: EuiFlyoutProps['focusTrapProps'] = useMemo(
       () => ({