From 34abd9d366fcc0c0f1074087590e69b456c10439 Mon Sep 17 00:00:00 2001
From: Christopher Schultz <chris@librato.com>
Date: Mon, 20 Sep 2021 13:22:51 -0700
Subject: [PATCH] update xychart Tooltip to pass zIndex prop to
 useTooltipInPortal

---
 packages/visx-xychart/src/components/Tooltip.tsx       | 4 +++-
 packages/visx-xychart/test/components/Tooltip.test.tsx | 9 +++++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/visx-xychart/src/components/Tooltip.tsx b/packages/visx-xychart/src/components/Tooltip.tsx
index 7aa0e1e01a..d80adab2bd 100644
--- a/packages/visx-xychart/src/components/Tooltip.tsx
+++ b/packages/visx-xychart/src/components/Tooltip.tsx
@@ -55,7 +55,7 @@ export type TooltipProps<Datum extends object> = {
    */
   resizeObserverPolyfill?: UseTooltipPortalOptions['polyfill'];
 } & Omit<BaseTooltipProps, 'left' | 'top' | 'children'> &
-  Pick<UseTooltipPortalOptions, 'debounce' | 'detectBounds' | 'scroll'>;
+  Pick<UseTooltipPortalOptions, 'debounce' | 'detectBounds' | 'scroll' | 'zIndex'>;
 
 const INVISIBLE_STYLES: React.CSSProperties = {
   position: 'absolute',
@@ -122,6 +122,7 @@ function TooltipInner<Datum extends object>({
   snapTooltipToDatumX = false,
   snapTooltipToDatumY = false,
   verticalCrosshairStyle,
+  zIndex,
   ...tooltipProps
 }: TooltipProps<Datum>) {
   const { colorScale, theme, innerHeight, innerWidth, margin, xScale, yScale, dataRegistry } =
@@ -132,6 +133,7 @@ function TooltipInner<Datum extends object>({
     detectBounds,
     polyfill: resizeObserverPolyfill,
     scroll,
+    zIndex,
   });
 
   // To correctly position itself in a Portal, the tooltip must know its container bounds
diff --git a/packages/visx-xychart/test/components/Tooltip.test.tsx b/packages/visx-xychart/test/components/Tooltip.test.tsx
index 3a32d222bf..c0423485cf 100644
--- a/packages/visx-xychart/test/components/Tooltip.test.tsx
+++ b/packages/visx-xychart/test/components/Tooltip.test.tsx
@@ -181,4 +181,13 @@ describe('<Tooltip />', () => {
     });
     expect(container?.parentNode?.querySelectorAll('div.visx-tooltip-glyph')).toHaveLength(2);
   });
+
+  it("should pass zIndex prop to Portal", () => {
+    const { container } = setup({
+      props: { zIndex: 123 },
+      context: { tooltipOpen: true },
+    });
+    const zIndex = container?.parentNode?.querySelector('div.visx-tooltip')?.parentElement?.style.zIndex;
+    expect(zIndex).toBe("123");
+  });
 });