From b0760993b6b9bf0f0322d715516c4ddfde5e8e5b Mon Sep 17 00:00:00 2001
From: Vladislav Lipatov <lipatov.xex@gmail.com>
Date: Sun, 21 Apr 2024 11:28:27 +0700
Subject: [PATCH] Support passing anchor element

---
 src/App.tsx       |  8 ++++++--
 src/lib/index.tsx | 10 ++++++----
 2 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 7325a2d..4ce5fe2 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -4,9 +4,13 @@ import "./App.css";
 import { flip } from "@floating-ui/dom";
 
 function App() {
+  let anchorRef: HTMLDivElement | undefined;
+
   return (
     <div style="display: flex; flex-direction: column; gap: 4rem; align-items: center; justify-content: center; height: 100dvh;">
-      <div id="anchor-element">anchor</div>
+      <div ref={anchorRef} id="anchor-element">
+        anchor
+      </div>
       <Popover
         defaultOpen
         // Minimalistic
@@ -30,7 +34,7 @@ function App() {
         dataAttributeName="data-open"
         // SSR support
         //mount="body"
-        anchorElementSelector="#anchor-element"
+        anchorElement={anchorRef}
         contentElementSelector="div"
       />
     </div>
diff --git a/src/lib/index.tsx b/src/lib/index.tsx
index 5253041..db16838 100644
--- a/src/lib/index.tsx
+++ b/src/lib/index.tsx
@@ -54,11 +54,11 @@ export type PopoverProps = {
    */
   dataAttributeName?: string;
   /**
-   * CSS selector to find anchor html element
+   * HTML element or CSS selector to find anchor element which is used for positioning
    * Can be used with Astro, because astro wraps trigger element into astro-slot
    * and position breaks
    */
-  anchorElementSelector?: string;
+  anchorElement?: string | HTMLElement;
   /**
    * CSS selector to find html element inside content
    * Can be used with Astro, because astro wraps element into astro-slot
@@ -212,8 +212,10 @@ export const Popover: VoidComponent<PopoverProps> = (props) => {
           createEffect(() => {
             const trigger = getElement(resolvedTrigger);
             const content = getElement(resolvedContent, props.contentElementSelector);
-            const anchorElement = props.anchorElementSelector
-              ? document.querySelector(props.anchorElementSelector)
+            const anchorElement = props.anchorElement
+              ? typeof props.anchorElement === "string"
+                ? document.querySelector(props.anchorElement)
+                : props.anchorElement
               : trigger;
 
             if (!(anchorElement instanceof HTMLElement)) throw new Error("Unable to find anchor element");