@zag-js/popper 1.39.0 → 1.40.0

package/dist/get-placement.js

@@ -166,34 +166,88 @@ function createStyleCleanup(el, props) {
     }
   };
 }
-function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
-  const anchor = opts.getAnchorElement?.() ?? referenceOrVirtual;
-  const reference = (0, import_get_anchor.getAnchorElement)(anchor, opts.getAnchorRect);
-  if (!floating || !reference) return;
+function anchorIdentity(anchor) {
+  if (anchor == null) return null;
+  if ((0, import_dom_query.isHTMLElement)(anchor)) return anchor;
+  if (typeof anchor === "object" && anchor && "contextElement" in anchor && anchor.contextElement) {
+    return anchor.contextElement;
+  }
+  return anchor;
+}
+function getPlacementImpl(referenceOrVirtual, floatingOrVirtual, opts = {}) {
+  const resolveFloating = () => {
+    const raw = typeof floatingOrVirtual === "function" ? floatingOrVirtual() : floatingOrVirtual;
+    return raw ?? null;
+  };
+  const resolveAnchor = () => {
+    const raw = typeof referenceOrVirtual === "function" ? referenceOrVirtual() : referenceOrVirtual;
+    return opts.getAnchorElement?.() ?? raw;
+  };
+  const resolveReference = () => {
+    const anchor = resolveAnchor();
+    if (!anchor && !opts.getAnchorRect) return null;
+    return (0, import_get_anchor.getAnchorElement)(anchor, opts.getAnchorRect);
+  };
   const options = Object.assign({}, defaultOptions, opts);
-  const arrowEl = floating.querySelector("[data-part=arrow]");
-  const restoreFloatingStyles = options.restoreStyles ? createStyleCleanup(floating, floatingStyleProps) : void 0;
-  const restoreArrowStyles = options.restoreStyles ? createStyleCleanup(arrowEl, arrowStyleProps) : void 0;
-  const middleware = [
-    getOffsetMiddleware(arrowEl, options),
-    getFlipMiddleware(options),
-    getShiftMiddleware(options),
-    getArrowMiddleware(arrowEl, floating.ownerDocument, options),
-    (0, import_middleware.shiftArrowMiddleware)(arrowEl),
-    (0, import_middleware.createTransformOriginMiddleware)(
-      { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
-      arrowEl
-    ),
-    getSizeMiddleware(options),
-    hideWhenDetachedMiddleware(options),
-    import_middleware.rectMiddleware
-  ];
+  let middleware = [];
+  let cachedMiddlewareFloating = null;
+  let restoreFloatingStyles;
+  let restoreArrowStyles;
+  function rebuildMiddlewareForFloating(floating) {
+    restoreFloatingStyles?.();
+    restoreArrowStyles?.();
+    cachedMiddlewareFloating = floating;
+    restoreFloatingStyles = options.restoreStyles ? createStyleCleanup(floating, floatingStyleProps) : void 0;
+    const arrowEl = floating.querySelector("[data-part=arrow]");
+    restoreArrowStyles = options.restoreStyles ? createStyleCleanup(arrowEl, arrowStyleProps) : void 0;
+    middleware = [
+      getOffsetMiddleware(arrowEl, options),
+      getFlipMiddleware(options),
+      getShiftMiddleware(options),
+      getArrowMiddleware(arrowEl, floating.ownerDocument, options),
+      (0, import_middleware.shiftArrowMiddleware)(arrowEl),
+      (0, import_middleware.createTransformOriginMiddleware)(
+        { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
+        arrowEl
+      ),
+      getSizeMiddleware(options),
+      hideWhenDetachedMiddleware(options),
+      import_middleware.rectMiddleware
+    ];
+  }
   const { placement, strategy, onComplete, onPositioned } = options;
   let lastX;
   let lastY;
   let zIndexComputed = false;
-  const updatePosition = async () => {
+  let lastAnchorForObserve = void 0;
+  let lastFloatingForObserve = void 0;
+  let cancelAutoUpdate = import_utils.noop;
+  const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
+  function syncAutoUpdateObservers() {
+    if (!options.listeners) return;
+    const anchor = resolveAnchor();
+    const reference = resolveReference();
+    const floating = resolveFloating();
     if (!reference || !floating) return;
+    const anchorChanged = anchorIdentity(anchor) !== anchorIdentity(lastAnchorForObserve);
+    const floatingChanged = floating !== lastFloatingForObserve;
+    if (anchorChanged || floatingChanged) {
+      cancelAutoUpdate();
+      lastAnchorForObserve = anchor;
+      lastFloatingForObserve = floating;
+      cancelAutoUpdate = (0, import_dom.autoUpdate)(reference, floating, runUpdate, autoUpdateOptions);
+    }
+  }
+  async function updatePosition() {
+    syncAutoUpdateObservers();
+    const floating = resolveFloating();
+    if (!floating) return;
+    if (floating !== cachedMiddlewareFloating) {
+      rebuildMiddlewareForFloating(floating);
+      zIndexComputed = false;
+    }
+    const reference = resolveReference();
+    if (!reference) return;
     const pos = await (0, import_dom.computePosition)(reference, floating, {
       placement,
       middleware,
@@ -203,7 +257,6 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     const win = (0, import_dom_query.getWindow)(floating);
     const x = roundByDpr(win, pos.x);
     const y = roundByDpr(win, pos.y);
-    floating.style.transform = `translate3d(${x}px, ${y}px, 0)`;
     if (!isApproximatelyEqual(lastX, x)) {
       floating.style.setProperty("--x", `${x}px`);
       lastX = x;
@@ -229,20 +282,18 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
         zIndexComputed = true;
       }
     }
-  };
-  const update = async () => {
+  }
+  async function runUpdate() {
     if (opts.updatePosition) {
-      await opts.updatePosition({ updatePosition, floatingElement: floating });
+      await opts.updatePosition({ updatePosition, floatingElement: resolveFloating() });
       onPositioned?.({ placed: true });
     } else {
       await updatePosition();
     }
-  };
-  const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
-  const cancelAutoUpdate = options.listeners ? (0, import_dom.autoUpdate)(reference, floating, update, autoUpdateOptions) : import_utils.noop;
-  update();
+  }
+  runUpdate();
   return () => {
-    cancelAutoUpdate?.();
+    cancelAutoUpdate();
     restoreArrowStyles?.();
     restoreFloatingStyles?.();
     onPositioned?.({ placed: false });
@@ -254,9 +305,7 @@ function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
   const cleanups = [];
   cleanups.push(
     func(() => {
-      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
-      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
-      cleanups.push(getPlacementImpl(reference, floating, options));
+      cleanups.push(getPlacementImpl(referenceOrFn, floatingOrFn, options));
     })
   );
   return () => {

package/dist/get-placement.mjs

@@ -1,6 +1,6 @@
 // src/get-placement.ts
 import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom";
-import { getComputedStyle, getWindow, raf } from "@zag-js/dom-query";
+import { getComputedStyle, getWindow, isHTMLElement, raf } from "@zag-js/dom-query";
 import { compact, isNull, noop } from "@zag-js/utils";
 import { getAnchorElement } from "./get-anchor.mjs";
 import { createTransformOriginMiddleware, rectMiddleware, shiftArrowMiddleware } from "./middleware.mjs";
@@ -142,34 +142,88 @@ function createStyleCleanup(el, props) {
     }
   };
 }
-function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
-  const anchor = opts.getAnchorElement?.() ?? referenceOrVirtual;
-  const reference = getAnchorElement(anchor, opts.getAnchorRect);
-  if (!floating || !reference) return;
+function anchorIdentity(anchor) {
+  if (anchor == null) return null;
+  if (isHTMLElement(anchor)) return anchor;
+  if (typeof anchor === "object" && anchor && "contextElement" in anchor && anchor.contextElement) {
+    return anchor.contextElement;
+  }
+  return anchor;
+}
+function getPlacementImpl(referenceOrVirtual, floatingOrVirtual, opts = {}) {
+  const resolveFloating = () => {
+    const raw = typeof floatingOrVirtual === "function" ? floatingOrVirtual() : floatingOrVirtual;
+    return raw ?? null;
+  };
+  const resolveAnchor = () => {
+    const raw = typeof referenceOrVirtual === "function" ? referenceOrVirtual() : referenceOrVirtual;
+    return opts.getAnchorElement?.() ?? raw;
+  };
+  const resolveReference = () => {
+    const anchor = resolveAnchor();
+    if (!anchor && !opts.getAnchorRect) return null;
+    return getAnchorElement(anchor, opts.getAnchorRect);
+  };
   const options = Object.assign({}, defaultOptions, opts);
-  const arrowEl = floating.querySelector("[data-part=arrow]");
-  const restoreFloatingStyles = options.restoreStyles ? createStyleCleanup(floating, floatingStyleProps) : void 0;
-  const restoreArrowStyles = options.restoreStyles ? createStyleCleanup(arrowEl, arrowStyleProps) : void 0;
-  const middleware = [
-    getOffsetMiddleware(arrowEl, options),
-    getFlipMiddleware(options),
-    getShiftMiddleware(options),
-    getArrowMiddleware(arrowEl, floating.ownerDocument, options),
-    shiftArrowMiddleware(arrowEl),
-    createTransformOriginMiddleware(
-      { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
-      arrowEl
-    ),
-    getSizeMiddleware(options),
-    hideWhenDetachedMiddleware(options),
-    rectMiddleware
-  ];
+  let middleware = [];
+  let cachedMiddlewareFloating = null;
+  let restoreFloatingStyles;
+  let restoreArrowStyles;
+  function rebuildMiddlewareForFloating(floating) {
+    restoreFloatingStyles?.();
+    restoreArrowStyles?.();
+    cachedMiddlewareFloating = floating;
+    restoreFloatingStyles = options.restoreStyles ? createStyleCleanup(floating, floatingStyleProps) : void 0;
+    const arrowEl = floating.querySelector("[data-part=arrow]");
+    restoreArrowStyles = options.restoreStyles ? createStyleCleanup(arrowEl, arrowStyleProps) : void 0;
+    middleware = [
+      getOffsetMiddleware(arrowEl, options),
+      getFlipMiddleware(options),
+      getShiftMiddleware(options),
+      getArrowMiddleware(arrowEl, floating.ownerDocument, options),
+      shiftArrowMiddleware(arrowEl),
+      createTransformOriginMiddleware(
+        { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
+        arrowEl
+      ),
+      getSizeMiddleware(options),
+      hideWhenDetachedMiddleware(options),
+      rectMiddleware
+    ];
+  }
   const { placement, strategy, onComplete, onPositioned } = options;
   let lastX;
   let lastY;
   let zIndexComputed = false;
-  const updatePosition = async () => {
+  let lastAnchorForObserve = void 0;
+  let lastFloatingForObserve = void 0;
+  let cancelAutoUpdate = noop;
+  const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
+  function syncAutoUpdateObservers() {
+    if (!options.listeners) return;
+    const anchor = resolveAnchor();
+    const reference = resolveReference();
+    const floating = resolveFloating();
     if (!reference || !floating) return;
+    const anchorChanged = anchorIdentity(anchor) !== anchorIdentity(lastAnchorForObserve);
+    const floatingChanged = floating !== lastFloatingForObserve;
+    if (anchorChanged || floatingChanged) {
+      cancelAutoUpdate();
+      lastAnchorForObserve = anchor;
+      lastFloatingForObserve = floating;
+      cancelAutoUpdate = autoUpdate(reference, floating, runUpdate, autoUpdateOptions);
+    }
+  }
+  async function updatePosition() {
+    syncAutoUpdateObservers();
+    const floating = resolveFloating();
+    if (!floating) return;
+    if (floating !== cachedMiddlewareFloating) {
+      rebuildMiddlewareForFloating(floating);
+      zIndexComputed = false;
+    }
+    const reference = resolveReference();
+    if (!reference) return;
     const pos = await computePosition(reference, floating, {
       placement,
       middleware,
@@ -179,7 +233,6 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     const win = getWindow(floating);
     const x = roundByDpr(win, pos.x);
     const y = roundByDpr(win, pos.y);
-    floating.style.transform = `translate3d(${x}px, ${y}px, 0)`;
     if (!isApproximatelyEqual(lastX, x)) {
       floating.style.setProperty("--x", `${x}px`);
       lastX = x;
@@ -205,20 +258,18 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
         zIndexComputed = true;
       }
     }
-  };
-  const update = async () => {
+  }
+  async function runUpdate() {
     if (opts.updatePosition) {
-      await opts.updatePosition({ updatePosition, floatingElement: floating });
+      await opts.updatePosition({ updatePosition, floatingElement: resolveFloating() });
       onPositioned?.({ placed: true });
     } else {
       await updatePosition();
     }
-  };
-  const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
-  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop;
-  update();
+  }
+  runUpdate();
   return () => {
-    cancelAutoUpdate?.();
+    cancelAutoUpdate();
     restoreArrowStyles?.();
     restoreFloatingStyles?.();
     onPositioned?.({ placed: false });
@@ -230,9 +281,7 @@ function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
   const cleanups = [];
   cleanups.push(
     func(() => {
-      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
-      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
-      cleanups.push(getPlacementImpl(reference, floating, options));
+      cleanups.push(getPlacementImpl(referenceOrFn, floatingOrFn, options));
     })
   );
   return () => {

package/dist/get-styles.d.mts

@@ -24,7 +24,7 @@ declare function getPlacementStyles(options?: Pick<PositioningOptions, "placemen
         readonly zIndex: "inherit";
     };
     floating: {
-        readonly position: "fixed" | "absolute";
+        readonly position: "absolute" | "fixed";
         readonly isolation: "isolate";
         readonly minWidth: "max-content" | undefined;
         readonly width: "var(--reference-width)" | undefined;

package/dist/get-styles.d.ts

@@ -24,7 +24,7 @@ declare function getPlacementStyles(options?: Pick<PositioningOptions, "placemen
         readonly zIndex: "inherit";
     };
     floating: {
-        readonly position: "fixed" | "absolute";
+        readonly position: "absolute" | "fixed";
         readonly isolation: "isolate";
         readonly minWidth: "max-content" | undefined;
         readonly width: "var(--reference-width)" | undefined;

package/package.json

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