@zag-js/popper 1.33.1 → 1.34.0

package/dist/index.d.mts

@@ -70,6 +70,15 @@ interface PositioningOptions {
      * Whether the popover should fit the viewport.
      */
     fitViewport?: boolean | undefined;
+    /**
+     * Whether to use the size middleware from Floating UI.
+     * It computes and sets CSS variables (`--reference-width`, `--reference-height`, `--available-width`, `--available-height`) used by `sameWidth` and `fitViewport`.
+     *
+     * Disabling it improves scroll performance with heavy content by avoiding layout thrashing on each update.
+     * Only applies when both `sameWidth` and `fitViewport` are false — the middleware is always used when either is enabled.
+     * @default true
+     */
+    sizeMiddleware?: boolean | undefined;
     /**
      * The overflow boundary of the reference element
      * Accepts a function returning a Boundary, a Boundary directly,

package/dist/index.d.ts

@@ -70,6 +70,15 @@ interface PositioningOptions {
      * Whether the popover should fit the viewport.
      */
     fitViewport?: boolean | undefined;
+    /**
+     * Whether to use the size middleware from Floating UI.
+     * It computes and sets CSS variables (`--reference-width`, `--reference-height`, `--available-width`, `--available-height`) used by `sameWidth` and `fitViewport`.
+     *
+     * Disabling it improves scroll performance with heavy content by avoiding layout thrashing on each update.
+     * Only applies when both `sameWidth` and `fitViewport` are false — the middleware is always used when either is enabled.
+     * @default true
+     */
+    sizeMiddleware?: boolean | undefined;
     /**
      * The overflow boundary of the reference element
      * Accepts a function returning a Boundary, a Boundary directly,

package/dist/index.js

@@ -145,6 +145,9 @@ function roundByDpr(win, value) {
   const dpr = win.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;
 }
+function isApproximatelyEqual(a, b) {
+  return a != null && Math.abs(a - b) < 0.5;
+}
 function resolveBoundaryOption(boundary) {
   if (typeof boundary === "function") return boundary();
   if (boundary === "clipping-ancestors") return "clippingAncestors";
@@ -191,6 +194,11 @@ function getShiftMiddleware(opts) {
   });
 }
 function getSizeMiddleware(opts) {
+  if (opts.sizeMiddleware === false && !opts.sameWidth && !opts.fitViewport) return;
+  let lastReferenceWidth;
+  let lastReferenceHeight;
+  let lastAvailableWidth;
+  let lastAvailableHeight;
   return dom.size({
     padding: opts.overflowPadding,
     apply({ elements, rects, availableHeight, availableWidth }) {
@@ -199,10 +207,22 @@ function getSizeMiddleware(opts) {
       const referenceHeight = Math.round(rects.reference.height);
       availableWidth = Math.floor(availableWidth);
       availableHeight = Math.floor(availableHeight);
-      floating.style.setProperty("--reference-width", `${referenceWidth}px`);
-      floating.style.setProperty("--reference-height", `${referenceHeight}px`);
-      floating.style.setProperty("--available-width", `${availableWidth}px`);
-      floating.style.setProperty("--available-height", `${availableHeight}px`);
+      if (!isApproximatelyEqual(lastReferenceWidth, referenceWidth)) {
+        floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+        lastReferenceWidth = referenceWidth;
+      }
+      if (!isApproximatelyEqual(lastReferenceHeight, referenceHeight)) {
+        floating.style.setProperty("--reference-height", `${referenceHeight}px`);
+        lastReferenceHeight = referenceHeight;
+      }
+      if (!isApproximatelyEqual(lastAvailableWidth, availableWidth)) {
+        floating.style.setProperty("--available-width", `${availableWidth}px`);
+        lastAvailableWidth = availableWidth;
+      }
+      if (!isApproximatelyEqual(lastAvailableHeight, availableHeight)) {
+        floating.style.setProperty("--available-height", `${availableHeight}px`);
+        lastAvailableHeight = availableHeight;
+      }
     }
   });
 }
@@ -238,6 +258,9 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     rectMiddleware
   ];
   const { placement, strategy, onComplete, onPositioned } = options;
+  let lastX;
+  let lastY;
+  let zIndexComputed = false;
   const updatePosition = async () => {
     if (!reference || !floating) return;
     const pos = await dom.computePosition(reference, floating, {
@@ -246,12 +269,18 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
       strategy
     });
     onComplete?.(pos);
-    onPositioned?.({ placed: true });
     const win = domQuery.getWindow(floating);
     const x = roundByDpr(win, pos.x);
     const y = roundByDpr(win, pos.y);
-    floating.style.setProperty("--x", `${x}px`);
-    floating.style.setProperty("--y", `${y}px`);
+    floating.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    if (!isApproximatelyEqual(lastX, x)) {
+      floating.style.setProperty("--x", `${x}px`);
+      lastX = x;
+    }
+    if (!isApproximatelyEqual(lastY, y)) {
+      floating.style.setProperty("--y", `${y}px`);
+      lastY = y;
+    }
     if (options.hideWhenDetached) {
       const isHidden = pos.middlewareData.hide?.referenceHidden;
       if (isHidden) {
@@ -262,10 +291,12 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
         floating.style.removeProperty("pointer-events");
       }
     }
-    const contentEl = floating.firstElementChild;
-    if (contentEl) {
-      const styles = domQuery.getComputedStyle(contentEl);
-      floating.style.setProperty("--z-index", styles.zIndex);
+    if (!zIndexComputed) {
+      const contentEl = floating.firstElementChild;
+      if (contentEl) {
+        floating.style.setProperty("--z-index", domQuery.getComputedStyle(contentEl).zIndex);
+        zIndexComputed = true;
+      }
     }
   };
   const update = async () => {

package/dist/index.mjs

@@ -143,6 +143,9 @@ function roundByDpr(win, value) {
   const dpr = win.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;
 }
+function isApproximatelyEqual(a, b) {
+  return a != null && Math.abs(a - b) < 0.5;
+}
 function resolveBoundaryOption(boundary) {
   if (typeof boundary === "function") return boundary();
   if (boundary === "clipping-ancestors") return "clippingAncestors";
@@ -189,6 +192,11 @@ function getShiftMiddleware(opts) {
   });
 }
 function getSizeMiddleware(opts) {
+  if (opts.sizeMiddleware === false && !opts.sameWidth && !opts.fitViewport) return;
+  let lastReferenceWidth;
+  let lastReferenceHeight;
+  let lastAvailableWidth;
+  let lastAvailableHeight;
   return size({
     padding: opts.overflowPadding,
     apply({ elements, rects, availableHeight, availableWidth }) {
@@ -197,10 +205,22 @@ function getSizeMiddleware(opts) {
       const referenceHeight = Math.round(rects.reference.height);
       availableWidth = Math.floor(availableWidth);
       availableHeight = Math.floor(availableHeight);
-      floating.style.setProperty("--reference-width", `${referenceWidth}px`);
-      floating.style.setProperty("--reference-height", `${referenceHeight}px`);
-      floating.style.setProperty("--available-width", `${availableWidth}px`);
-      floating.style.setProperty("--available-height", `${availableHeight}px`);
+      if (!isApproximatelyEqual(lastReferenceWidth, referenceWidth)) {
+        floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+        lastReferenceWidth = referenceWidth;
+      }
+      if (!isApproximatelyEqual(lastReferenceHeight, referenceHeight)) {
+        floating.style.setProperty("--reference-height", `${referenceHeight}px`);
+        lastReferenceHeight = referenceHeight;
+      }
+      if (!isApproximatelyEqual(lastAvailableWidth, availableWidth)) {
+        floating.style.setProperty("--available-width", `${availableWidth}px`);
+        lastAvailableWidth = availableWidth;
+      }
+      if (!isApproximatelyEqual(lastAvailableHeight, availableHeight)) {
+        floating.style.setProperty("--available-height", `${availableHeight}px`);
+        lastAvailableHeight = availableHeight;
+      }
     }
   });
 }
@@ -236,6 +256,9 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     rectMiddleware
   ];
   const { placement, strategy, onComplete, onPositioned } = options;
+  let lastX;
+  let lastY;
+  let zIndexComputed = false;
   const updatePosition = async () => {
     if (!reference || !floating) return;
     const pos = await computePosition(reference, floating, {
@@ -244,12 +267,18 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
       strategy
     });
     onComplete?.(pos);
-    onPositioned?.({ placed: true });
     const win = getWindow(floating);
     const x = roundByDpr(win, pos.x);
     const y = roundByDpr(win, pos.y);
-    floating.style.setProperty("--x", `${x}px`);
-    floating.style.setProperty("--y", `${y}px`);
+    floating.style.transform = `translate3d(${x}px, ${y}px, 0)`;
+    if (!isApproximatelyEqual(lastX, x)) {
+      floating.style.setProperty("--x", `${x}px`);
+      lastX = x;
+    }
+    if (!isApproximatelyEqual(lastY, y)) {
+      floating.style.setProperty("--y", `${y}px`);
+      lastY = y;
+    }
     if (options.hideWhenDetached) {
       const isHidden = pos.middlewareData.hide?.referenceHidden;
       if (isHidden) {
@@ -260,10 +289,12 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
         floating.style.removeProperty("pointer-events");
       }
     }
-    const contentEl = floating.firstElementChild;
-    if (contentEl) {
-      const styles = getComputedStyle(contentEl);
-      floating.style.setProperty("--z-index", styles.zIndex);
+    if (!zIndexComputed) {
+      const contentEl = floating.firstElementChild;
+      if (contentEl) {
+        floating.style.setProperty("--z-index", getComputedStyle(contentEl).zIndex);
+        zIndexComputed = true;
+      }
     }
   };
   const update = async () => {

package/package.json

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