Prettier + Readme update

packages/visx-demo/src/sandboxes/visx-tooltip/Example.tsx

@@ -29,17 +29,18 @@ const tooltipStyles = {
 
 export default function Example({ width, height, showControls = true }: TooltipProps) {
   const [tooltipShouldDetectBounds, setTooltipShouldDetectBounds] = useState(true);
-  const [tooltipPortalShouldUseCustomContainer, setTooltipPortalShouldUseCustomContainer] = useState(true);
+  const [tooltipPortalShouldUseCustomContainer, setTooltipPortalShouldUseCustomContainer] =
+    useState(true);
   const [renderTooltipInPortal, setRenderTooltipInPortal] = useState(false);
   const overlayRootRef = React.useRef<HTMLDivElement | null>(null);
 
-  const { containerRef, containerBounds, TooltipInPortal } = useTooltipInPortal(
-    {
-      scroll: true,
-      detectBounds: tooltipShouldDetectBounds,
-      portalContainer: tooltipPortalShouldUseCustomContainer ? overlayRootRef.current ?? undefined : undefined,
-    }
-  );
+  const { containerRef, containerBounds, TooltipInPortal } = useTooltipInPortal({
+    scroll: true,
+    detectBounds: tooltipShouldDetectBounds,
+    portalContainer: tooltipPortalShouldUseCustomContainer
+      ? overlayRootRef.current ?? undefined
+      : undefined,
+  });
 
   const {
     showTooltip,
@@ -91,7 +92,7 @@ export default function Example({ width, height, showControls = true }: TooltipP
         <OverlayLayer
           className="overlay-layer overlay-under-tooltip"
           container={overlayRootRef.current}
-          text='We want this to appear under the tooltip.'
+          text="We want this to appear under the tooltip."
         />
         {tooltipOpen ? (
           <>
@@ -125,15 +126,13 @@ export default function Example({ width, height, showControls = true }: TooltipP
             </TooltipComponent>
           </>
         ) : (
-          <div className="no-tooltip">
-            Move or touch the canvas to see the tooltip
-          </div>
+          <div className="no-tooltip">Move or touch the canvas to see the tooltip</div>
         )}
         <OverlayLayer
           className="overlay-layer overlay-over-tooltip"
           container={overlayRootRef.current}
           placeAfterTooltipInDom // Force DOM node to be placed after tooltip for demo purposes
-          text='We want this to appear over the tooltip.'
+          text="We want this to appear over the tooltip."
         />
         <div className="z-index-bummer">
           I have an annoying z-index. Try&nbsp;
@@ -171,7 +170,9 @@ export default function Example({ width, height, showControls = true }: TooltipP
               <input
                 type="checkbox"
                 checked={tooltipPortalShouldUseCustomContainer}
-                onChange={() => setTooltipPortalShouldUseCustomContainer(!tooltipPortalShouldUseCustomContainer)}
+                onChange={() =>
+                  setTooltipPortalShouldUseCustomContainer(!tooltipPortalShouldUseCustomContainer)
+                }
               />
               &nbsp;Tooltip portal in custom container
             </label>
@@ -274,15 +275,15 @@ const OverlayLayer = function OverlayLayer({
   text,
 }: OverlayLayerProps) {
   if (container) {
-    // Since we re-render the tooltip every time the pointer moves and its DOM node 
+    // Since we re-render the tooltip every time the pointer moves and its DOM node
     // is placed at the end of the container, if placeAfterTooltipInDom is true we
     // also want to re-render the overlay layer
-    const key = placeAfterTooltipInDom ? Math.random() : "overlay-under";
+    const key = placeAfterTooltipInDom ? Math.random() : 'overlay-under';
     return ReactDOM.createPortal(
       <div className={className} key={key}>
         {text}
       </div>,
-      container
+      container,
     );
   } else {
     return null;

packages/visx-tooltip/Readme.md

@@ -113,7 +113,8 @@ object or inject it cleanly using the `polyfill` config option below.
 
 `useTooltipInPortal` is a hook which gives you a `TooltipInPortal` component for rendering `Tooltip`
 or `TooltipWithBounds` in a `Portal`, outside of your component DOM tree which can be useful in many
-circumstances (see below for more on `Portal`s).
+circumstances (see below for more on `Portal`s). A custom portal container can be provided
+via the `portalContainer` config option.
 
 ##### API
 
@@ -128,6 +129,8 @@ type Options = {
   scroll?: boolean
   /** You can optionally inject a resize-observer polyfill */
   polyfill?: { new (cb: ResizeObserverCallback): ResizeObserver }
+  /** Optional container for the portal. */
+  portalContainer?: HTMLDivElement;
   /** Optional z-index to set on the Portal div */
   zIndex?: number | string;
 }

packages/visx-tooltip/src/hooks/useTooltipInPortal.tsx

@@ -51,7 +51,8 @@ export default function useTooltipInPortal({
         ...tooltipProps
       }: TooltipInPortalProps) {
         const detectBounds = detectBoundsProp == null ? detectBoundsOption : detectBoundsProp;
-        const portalContainer = portalContainerProp == null ? portalContainerOption : portalContainerProp;
+        const portalContainer =
+          portalContainerProp == null ? portalContainerOption : portalContainerProp;
         const portalContainerRect = portalContainer?.getBoundingClientRect();
         const zIndex = zIndexProp == null ? zIndexOption : zIndexProp;
         const TooltipComponent = detectBounds ? TooltipWithBounds : Tooltip;
@@ -67,11 +68,22 @@ export default function useTooltipInPortal({
 
         return (
           <Portal container={portalContainer} zIndex={zIndex}>
-            <TooltipComponent left={portalLeft} top={portalTop} {...tooltipProps} {...additionalTooltipProps} />
+            <TooltipComponent
+              left={portalLeft}
+              top={portalTop}
+              {...tooltipProps}
+              {...additionalTooltipProps}
+            />
           </Portal>
         );
       },
-    [detectBoundsOption, portalContainerOption, zIndexOption, containerBounds.left, containerBounds.top],
+    [
+      detectBoundsOption,
+      portalContainerOption,
+      zIndexOption,
+      containerBounds.left,
+      containerBounds.top,
+    ],
   );
 
   return {

packages/visx-tooltip/test/Portal.test.tsx

@@ -6,22 +6,19 @@ import { Portal } from '../src';
 const PortalWithContainer = () => {
   // useState rather than useRef so it will react to the ref being available for testing purposes
   const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);
-  const onRefChange = React.useCallback(
-    (node) => {
-      setPortalContainer(node);
-    },
-    []
-  );
+  const onRefChange = React.useCallback((node) => {
+    setPortalContainer(node);
+  }, []);
   return (
     <>
-      <div data-testid='inner-div' ref={onRefChange} />
+      <div data-testid="inner-div" ref={onRefChange} />
       {portalContainer && (
         <Portal container={portalContainer}>
-          <div data-testid='element-in-portal'></div>
+          <div data-testid="element-in-portal"></div>
         </Portal>
       )}
     </>
-  )
+  );
 };
 
 describe('Portal', () => {
@@ -32,21 +29,25 @@ describe('Portal', () => {
   it('should render children at the document root', async () => {
     render(
       <>
-        <div data-testid='inner-div' />
+        <div data-testid="inner-div" />
         <Portal>
-          <div data-testid='element-in-portal'></div>
+          <div data-testid="element-in-portal"></div>
         </Portal>
       </>,
     );
     const elementInPortal = await screen.findByTestId('element-in-portal');
     expect(elementInPortal).toBeInTheDocument();
-    expect(within(screen.getByTestId('inner-div')).queryByTestId('element-in-portal')).not.toBeInTheDocument();
+    expect(
+      within(screen.getByTestId('inner-div')).queryByTestId('element-in-portal'),
+    ).not.toBeInTheDocument();
   });
 
   it('should render children in the provided portal container', async () => {
     render(<PortalWithContainer />);
     const elementInPortal = await screen.findByTestId('element-in-portal');
     expect(elementInPortal).toBeInTheDocument();
-    expect(within(screen.getByTestId('inner-div')).getByTestId('element-in-portal')).toBeInTheDocument();
+    expect(
+      within(screen.getByTestId('inner-div')).getByTestId('element-in-portal'),
+    ).toBeInTheDocument();
   });
 });

packages/visx-tooltip/test/useTooltipInPortal.test.tsx

@@ -23,31 +23,28 @@ interface TooltipWithPortalContainerProps {
   shouldUsePortalContainer: boolean;
 }
 
-const TooltipWithPortalContainer = ({ shouldUsePortalContainer }: TooltipWithPortalContainerProps) => {
+const TooltipWithPortalContainer = ({
+  shouldUsePortalContainer,
+}: TooltipWithPortalContainerProps) => {
   // useState rather than useRef so it will react to the ref being available for testing purposes
   const [portalContainer, setPortalContainer] = React.useState<HTMLDivElement | null>(null);
-  const onRefChange = React.useCallback(
-    (node) => {
-      setPortalContainer(node);
-    },
-    []
-  );
+  const onRefChange = React.useCallback((node) => {
+    setPortalContainer(node);
+  }, []);
 
-  const { TooltipInPortal } = useTooltipInPortal(
-    {
-      polyfill: ResizeObserver,
-      portalContainer: shouldUsePortalContainer ? portalContainer ?? undefined : undefined,
-    }
-  );
+  const { TooltipInPortal } = useTooltipInPortal({
+    polyfill: ResizeObserver,
+    portalContainer: shouldUsePortalContainer ? portalContainer ?? undefined : undefined,
+  });
 
   return (
     <>
-      <div data-testid='inner-div' ref={shouldUsePortalContainer ? onRefChange : undefined} />
+      <div data-testid="inner-div" ref={shouldUsePortalContainer ? onRefChange : undefined} />
       <TooltipInPortal>
-        <div data-testid='element-in-tooltip'></div>
+        <div data-testid="element-in-tooltip"></div>
       </TooltipInPortal>
     </>
-  )
+  );
 };
 
 describe('useTooltipInPortal()', () => {
@@ -63,7 +60,7 @@ describe('useTooltipInPortal()', () => {
       const zIndex = wrapper.find('Portal').prop('zIndex');
       expect(zIndex).toBe(1);
     });
-  
+
     it('should pass zIndex prop from component to Portal', () => {
       const wrapper = shallow(
         <TooltipWithZIndex zIndexOption={1} zIndexProp="var(--tooltip-zindex)" />,
@@ -81,14 +78,18 @@ describe('useTooltipInPortal()', () => {
       render(<TooltipWithPortalContainer shouldUsePortalContainer={false} />);
       const elementInPortal = await screen.findByTestId('element-in-tooltip');
       expect(elementInPortal).toBeInTheDocument();
-      expect(within(screen.getByTestId('inner-div')).queryByTestId('element-in-tooltip')).not.toBeInTheDocument();
+      expect(
+        within(screen.getByTestId('inner-div')).queryByTestId('element-in-tooltip'),
+      ).not.toBeInTheDocument();
     });
 
     it('it should render tooltip in the provided portal container', async () => {
       render(<TooltipWithPortalContainer shouldUsePortalContainer={true} />);
       const elementInPortal = await screen.findByTestId('element-in-tooltip');
       expect(elementInPortal).toBeInTheDocument();
-      expect(within(screen.getByTestId('inner-div')).getByTestId('element-in-tooltip')).toBeInTheDocument();
+      expect(
+        within(screen.getByTestId('inner-div')).getByTestId('element-in-tooltip'),
+      ).toBeInTheDocument();
     });
   });
 });