Merge pull request #6 from elite174/anchor-node

Support passing anchor element

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>

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");