From f828f6952e4ff828c7ad3238f3a46064345144b9 Mon Sep 17 00:00:00 2001
From: Igor Dykhta <igorDykhta@users.noreply.github.com>
Date: Wed, 24 Aug 2022 16:38:38 +0300
Subject: [PATCH] [Feat]: Passing root context to tippy

---
 src/components/common/tippy-tooltip.tsx | 32 +++++----
 src/components/map/map-legend-panel.tsx |  2 +-
 src/components/map/map-popover.tsx      | 90 ++++++++++++++-----------
 3 files changed, 70 insertions(+), 54 deletions(-)

diff --git a/src/components/common/tippy-tooltip.tsx b/src/components/common/tippy-tooltip.tsx
index 3b173b1648..869445b822 100644
--- a/src/components/common/tippy-tooltip.tsx
+++ b/src/components/common/tippy-tooltip.tsx
@@ -20,6 +20,7 @@
 
 import styled from 'styled-components';
 import React, {useState} from 'react';
+import {RootContext} from 'components';
 import Tippy, {TippyProps} from '@tippyjs/react';
 
 const TippyArrow = styled.div`
@@ -111,19 +112,26 @@ const TippyTooltip = ({children, render, duration = 200, ...rest}: TippyProps) =
   }
 
   return (
-    <Tippy
-      {...rest}
-      animation={true}
-      render={attrs => (
-        <TippyTooltipContent {...attrs} style={{opacity, transition: `opacity ${duration}ms`}}>
-          {render?.(attrs)}
-        </TippyTooltipContent>
+    <RootContext.Consumer>
+      {context => (
+        <Tippy
+          {...rest}
+          // Using document.body would result in the CSS styles not being applied
+          // to the tooltip content when embedding the map widget as a Shadow DOM element.
+          appendTo={context?.current || 'parent'}
+          animation={true}
+          render={attrs => (
+            <TippyTooltipContent {...attrs} style={{opacity, transition: `opacity ${duration}ms`}}>
+              {render?.(attrs)}
+            </TippyTooltipContent>
+          )}
+          onMount={onMount}
+          onHide={onHide}
+        >
+          {children}
+        </Tippy>
       )}
-      onMount={onMount}
-      onHide={onHide}
-    >
-      {children}
-    </Tippy>
+    </RootContext.Consumer>
   );
 };
 
diff --git a/src/components/map/map-legend-panel.tsx b/src/components/map/map-legend-panel.tsx
index 50c301e108..4e2b021383 100644
--- a/src/components/map/map-legend-panel.tsx
+++ b/src/components/map/map-legend-panel.tsx
@@ -139,7 +139,7 @@ function MapLegendPanelFactory(MapControlTooltip, MapControlPanel, MapLegend) {
           placement="left-start"
           onCreate={setTippyInstance}
           render={attrs => <div {...attrs}>{mapControlPanel}</div>}
-          appendTo={document.body}
+          appendTo="parent"
         >
           <div>
             <MapControlTooltip id="show-legend" message="tooltip.showLegend">
diff --git a/src/components/map/map-popover.tsx b/src/components/map/map-popover.tsx
index 59242e44ca..6df0a4f1ac 100644
--- a/src/components/map/map-popover.tsx
+++ b/src/components/map/map-popover.tsx
@@ -26,6 +26,7 @@ import {ArrowLeft, ArrowRight, Pin} from 'components/common/icons';
 import {injectIntl, IntlShape} from 'react-intl';
 import {FormattedMessage} from '@kepler.gl/localization';
 import Tippy from '@tippyjs/react/headless';
+import {RootContext} from 'components';
 import {LayerHoverProp} from 'reducers/layer-utils';
 
 const MAX_WIDTH = 500;
@@ -204,48 +205,55 @@ export default function MapPopoverFactory(
     const moveLeft = () => setHorizontalPlacement('end');
     const moveRight = () => setHorizontalPlacement('start');
     return (
-      <Tippy
-        popperOptions={getPopperOptions(container)}
-        zIndex={999} /* should be below Modal which has zIndex=1000 */
-        visible={true}
-        interactive={true}
-        getReferenceClientRect={() => createVirtualReference(container, x, y)}
-        // @ts-ignore
-        placement={`bottom-${horizontalPlacement}`}
-        // @ts-ignore
-        offset={getOffsetForPlacement}
-        appendTo={document.body}
-        render={attrs => (
-          <StyledMapPopover {...attrs} className="map-popover">
-            {frozen ? (
-              <PinnedButtons>
-                {horizontalPlacement === 'start' && (
-                  <StyledIcon className="popover-arrow-left" onClick={moveLeft}>
-                    <ArrowLeft />
-                  </StyledIcon>
-                )}
-                <StyledIcon className="popover-pin" onClick={onClose}>
-                  <Pin height="16px" />
-                </StyledIcon>
-                {horizontalPlacement === 'end' && (
-                  <StyledIcon className="popover-arrow-right" onClick={moveRight}>
-                    <ArrowRight />
-                  </StyledIcon>
-                )}
-                {isBase && (
-                  <div className="primary-label">
-                    <FormattedMessage id="mapPopover.primary" />
-                  </div>
-                )}
-              </PinnedButtons>
-            ) : null}
-            <PopoverContent>
-              {Array.isArray(coordinate) && <CoordinateInfo coordinate={coordinate} zoom={zoom} />}
-              {layerHoverProp && <LayerHoverInfo {...layerHoverProp} />}
-            </PopoverContent>
-          </StyledMapPopover>
+      <RootContext.Consumer>
+        {context => (
+          <Tippy
+            popperOptions={getPopperOptions(container)}
+            zIndex={999} /* should be below Modal which has zIndex=1000 */
+            visible={true}
+            interactive={true}
+            // @ts-ignore
+            getReferenceClientRect={() => createVirtualReference(container, x, y)}
+            // @ts-ignore
+            placement={`bottom-${horizontalPlacement}`}
+            // @ts-ignore
+            offset={getOffsetForPlacement}
+            appendTo={context?.current || document.body}
+            render={attrs => (
+              <StyledMapPopover {...attrs} className="map-popover">
+                {frozen ? (
+                  <PinnedButtons>
+                    {horizontalPlacement === 'start' && (
+                      <StyledIcon className="popover-arrow-left" onClick={moveLeft}>
+                        <ArrowLeft />
+                      </StyledIcon>
+                    )}
+                    <StyledIcon className="popover-pin" onClick={onClose}>
+                      <Pin height="16px" />
+                    </StyledIcon>
+                    {horizontalPlacement === 'end' && (
+                      <StyledIcon className="popover-arrow-right" onClick={moveRight}>
+                        <ArrowRight />
+                      </StyledIcon>
+                    )}
+                    {isBase && (
+                      <div className="primary-label">
+                        <FormattedMessage id="mapPopover.primary" />
+                      </div>
+                    )}
+                  </PinnedButtons>
+                ) : null}
+                <PopoverContent>
+                  {Array.isArray(coordinate) && (
+                    <CoordinateInfo coordinate={coordinate} zoom={zoom} />
+                  )}
+                  {layerHoverProp && <LayerHoverInfo {...layerHoverProp} />}
+                </PopoverContent>
+              </StyledMapPopover>
+            )}
+          />
         )}
-      />
+      </RootContext.Consumer>
     );
   };
   return injectIntl(MapPopover);