@zag-js/popper 1.31.0 → 1.31.1

package/dist/index.d.mts

@@ -90,8 +90,14 @@ interface PositioningOptions {
     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;
     /**

package/dist/index.d.ts

@@ -90,8 +90,14 @@ interface PositioningOptions {
     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;
     /**

package/dist/index.js

@@ -28,7 +28,7 @@ function getDOMRect(anchorRect) {
 }
 function getAnchorElement(anchorElement, getAnchorRect) {
   return {
-    contextElement: domQuery.isHTMLElement(anchorElement) ? anchorElement : void 0,
+    contextElement: domQuery.isHTMLElement(anchorElement) ? anchorElement : anchorElement?.contextElement,
     getBoundingClientRect: () => {
       const anchor = anchorElement;
       const anchorRect = getAnchorRect?.(anchor);
@@ -218,7 +218,8 @@ function getAutoUpdateOptions(opts) {
   return opts;
 }
 function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
-  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);
   const arrowEl = floating.querySelector("[data-part=arrow]");

package/dist/index.mjs

@@ -26,7 +26,7 @@ function getDOMRect(anchorRect) {
 }
 function getAnchorElement(anchorElement, getAnchorRect) {
   return {
-    contextElement: isHTMLElement(anchorElement) ? anchorElement : void 0,
+    contextElement: isHTMLElement(anchorElement) ? anchorElement : anchorElement?.contextElement,
     getBoundingClientRect: () => {
       const anchor = anchorElement;
       const anchorRect = getAnchorRect?.(anchor);
@@ -216,7 +216,8 @@ function getAutoUpdateOptions(opts) {
   return opts;
 }
 function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
-  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);
   const arrowEl = floating.querySelector("[data-part=arrow]");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "1.31.0",
+  "version": "1.31.1",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.7.4",
-    "@zag-js/dom-query": "1.31.0",
-    "@zag-js/utils": "1.31.0"
+    "@zag-js/dom-query": "1.31.1",
+    "@zag-js/utils": "1.31.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"