update xychart Tooltip to pass zIndex prop to useTooltipInPortal

airbnb · Sep 20, 2021 · 34abd9d · 34abd9d
1 parent 7ad9260
commit 34abd9d
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 1 deletion.
diff --git 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
@@ -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");
+  });
 });