feat(Overlay): allow popper virtual elements as targets (#64)

Author: kyletsang

src/Overlay.tsx

@@ -8,6 +8,7 @@ import usePopper, {
   Placement,
   UsePopperOptions,
   UsePopperState,
+  VirtualElement,
 } from './usePopper';
 import useRootClose, { RootCloseOptions } from './useRootClose';
 import useWaitForDOMRef, { DOMContainer } from './useWaitForDOMRef';
@@ -61,16 +62,16 @@ export interface OverlayProps extends TransitionCallbacks {
   popperConfig?: Omit<UsePopperOptions, 'placement'>;
 
   /**
-   * A DOM Element, Ref to an element, or function that returns either. The `container` will have the Portal children
-   * appended to it.
+   * A DOM Element, [Virtual Element](https://popper.js.org/docs/v2/virtual-elements/), Ref to an element, or
+   * function that returns either. The `target` element is where the overlay is positioned relative to.
    */
   container?: DOMContainer;
 
   /**
    * A DOM Element, Ref to an element, or function that returns either. The `target` element is where
    * the overlay is positioned relative to.
    */
-  target: DOMContainer;
+  target: DOMContainer<HTMLElement | VirtualElement>;
 
   /**
    * Set the visibility of the Overlay

src/useWaitForDOMRef.ts

@@ -2,14 +2,12 @@ import ownerDocument from 'dom-helpers/ownerDocument';
 import canUseDOM from 'dom-helpers/canUseDOM';
 import { useState, useEffect } from 'react';
 import useWindow from './useWindow';
+import { VirtualElement } from './usePopper';
 
-export type DOMContainer<T extends HTMLElement = HTMLElement> =
-  | T
-  | React.RefObject<T>
-  | null
-  | (() => T | React.RefObject<T> | null);
+export type DOMContainer<T extends HTMLElement | VirtualElement = HTMLElement> =
+  T | React.RefObject<T> | null | (() => T | React.RefObject<T> | null);
 
-export const resolveContainerRef = <T extends HTMLElement>(
+export const resolveContainerRef = <T extends HTMLElement | VirtualElement>(
   ref: DOMContainer<T> | undefined,
   document?: Document,
 ): T | HTMLBodyElement | null => {
@@ -18,12 +16,14 @@ export const resolveContainerRef = <T extends HTMLElement>(
   if (typeof ref === 'function') ref = ref();
 
   if (ref && 'current' in ref) ref = ref.current;
-  if (ref?.nodeType) return ref || null;
+  if (ref && ('nodeType' in ref || ref.getBoundingClientRect)) return ref;
 
   return null;
 };
 
-export default function useWaitForDOMRef<T extends HTMLElement = HTMLElement>(
+export default function useWaitForDOMRef<
+  T extends HTMLElement | VirtualElement = HTMLElement,
+>(
   ref: DOMContainer<T> | undefined,
   onResolved?: (element: T | HTMLBodyElement) => void,
 ) {

test/WaitForContainerSpec.js

@@ -29,6 +29,30 @@ describe('useWaitForDOMRef', () => {
     onResolved.should.have.been.calledOnce;
   });
 
+  it('should resolve on first render if possible (Virtual Element)', () => {
+    let renderCount = 0;
+    const container = {
+      getBoundingClientRect: () => new DOMRect(),
+    };
+
+    function Test({ container, onResolved }) {
+      useWaitForDOMRef(container, onResolved);
+      renderCount++;
+      return null;
+    }
+
+    const onResolved = sinon.spy((resolved) => {
+      expect(resolved).to.equal(container);
+    });
+
+    act(() => {
+      mount(<Test container={container} onResolved={onResolved} />);
+    });
+
+    renderCount.should.equal(1);
+    onResolved.should.have.been.calledOnce;
+  });
+
   it('should resolve on first render if possible (ref)', () => {
     let renderCount = 0;
     const container = React.createRef();
@@ -52,6 +76,31 @@ describe('useWaitForDOMRef', () => {
     onResolved.should.have.been.calledOnce;
   });
 
+  it('should resolve on first render if possible (Virtual Element ref)', () => {
+    let renderCount = 0;
+    const container = React.createRef();
+    container.current = {
+      getBoundingClientRect: () => new DOMRect(),
+    };
+
+    function Test({ container, onResolved }) {
+      useWaitForDOMRef(container, onResolved);
+      renderCount++;
+      return null;
+    }
+
+    const onResolved = sinon.spy((resolved) => {
+      expect(resolved).to.equal(container.current);
+    });
+
+    act(() => {
+      mount(<Test container={container} onResolved={onResolved} />);
+    });
+
+    renderCount.should.equal(1);
+    onResolved.should.have.been.calledOnce;
+  });
+
   it('should resolve on first render if possible (function)', () => {
     const div = document.createElement('div');
     const container = () => div;