refactor: popper anchor element

Author: segunadebayo

packages/utilities/popper/src/get-anchor.ts

@@ -30,7 +30,7 @@ export function getAnchorElement(
   getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,
 ): VirtualElement {
   return {
-    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,
+    contextElement: isHTMLElement(anchorElement) ? anchorElement : anchorElement?.contextElement,
     getBoundingClientRect: () => {
       const anchor = anchorElement
       const anchorRect = getAnchorRect?.(anchor)

packages/utilities/popper/src/get-placement.ts

@@ -24,21 +24,20 @@ const defaultOptions: PositioningOptions = {
 type NonNullable<T> = T extends null | undefined ? never : T
 type RequiredBy<T, K extends keyof T> = Omit<T, K> & { [P in K]-?: NonNullable<T[P]> }
 
-interface Options
-  extends RequiredBy<
-    PositioningOptions,
-    | "strategy"
-    | "placement"
-    | "listeners"
-    | "gutter"
-    | "flip"
-    | "slide"
-    | "overlap"
-    | "sameWidth"
-    | "fitViewport"
-    | "overflowPadding"
-    | "arrowPadding"
-  > {}
+interface Options extends RequiredBy<
+  PositioningOptions,
+  | "strategy"
+  | "placement"
+  | "listeners"
+  | "gutter"
+  | "flip"
+  | "slide"
+  | "overlap"
+  | "sameWidth"
+  | "fitViewport"
+  | "overflowPadding"
+  | "arrowPadding"
+> {}
 
 function roundByDpr(win: Window, value: number) {
   const dpr = win.devicePixelRatio || 1
@@ -131,7 +130,8 @@ function getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOpt
 }
 
 function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {
-  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)
+  const anchor = opts.getAnchorElement?.() ?? referenceOrVirtual
+  const reference = getAnchorElement(anchor, opts.getAnchorRect)
   if (!floating || !reference) return
   const options = Object.assign({}, defaultOptions, opts) as Options
 

packages/utilities/popper/src/types.ts

@@ -89,8 +89,14 @@ export interface PositioningOptions {
    * Function called when the floating element is positioned or not
    */
   onPositioned?: ((data: { placed: boolean }) => void) | undefined
+  /**
+   * Function that returns the anchor element.
+   * Useful when you want to use a different element as the anchor.
+   */
+  getAnchorElement?: (() => HTMLElement | VirtualElement | null) | undefined
   /**
    *  Function that returns the anchor rect
+   * @deprecated Use `getAnchorElement` instead
    */
   getAnchorRect?: ((element: HTMLElement | VirtualElement | null) => AnchorRect | null) | undefined
   /**