@zag-js/popper 0.2.4 → 0.2.7

package/dist/auto-update.js

@@ -49,7 +49,7 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...(0, import_dom.getOverflowAncestors)(reference));
   }
   function addResizeListeners() {
-    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update)];
+    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update, { scope: "size" })];
     if (referenceResize && isHTMLElement(reference)) {
       cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
     }

package/dist/auto-update.mjs

@@ -1,6 +1,6 @@
 import {
   autoUpdate
-} from "./chunk-KMOWWEFH.mjs";
+} from "./chunk-AVEWKGZP.mjs";
 export {
   autoUpdate
 };

package/dist/{chunk-K6E3OR2A.mjs → chunk-6B3BV5TE.mjs}

@@ -1,6 +1,6 @@
 import {
   autoUpdate
-} from "./chunk-KMOWWEFH.mjs";
+} from "./chunk-AVEWKGZP.mjs";
 import {
   shiftArrow,
   transformOrigin
@@ -80,7 +80,7 @@ function getPlacement(reference, floating, opts = {}) {
   function compute(config = {}) {
     if (!reference || !floating)
       return;
-    const { placement, strategy } = options;
+    const { placement, strategy, onComplete } = options;
     computePosition(reference, floating, {
       placement,
       middleware,
@@ -91,11 +91,11 @@ function getPlacement(reference, floating, opts = {}) {
       const y = Math.round(data.y);
       Object.assign(floating.style, {
         position: data.strategy,
-        top: "0",
-        left: "0",
+        top: "0px",
+        left: "0px",
         transform: `translate3d(${x}px, ${y}px, 0)`
       });
-      options.onComplete?.({ ...data, compute });
+      onComplete?.(data);
     });
   }
   compute();

package/dist/{chunk-KMOWWEFH.mjs → chunk-AVEWKGZP.mjs}

@@ -25,7 +25,7 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...getOverflowAncestors(reference));
   }
   function addResizeListeners() {
-    let cleanups = [trackElementRect(floating, update)];
+    let cleanups = [trackElementRect(floating, update, { scope: "size" })];
     if (referenceResize && isHTMLElement(reference)) {
       cleanups.push(trackElementRect(reference, update));
     }

package/dist/{chunk-I46LTIWB.mjs → chunk-V4C4UQPN.mjs}

@@ -3,14 +3,6 @@ import {
 } from "./chunk-X5LLREVI.mjs";
 
 // src/get-styles.ts
-var UNMEASURED_FLOATING_STYLE = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  opacity: 0,
-  transform: "translate3d(0, -200%, 0)",
-  pointerEvents: "none"
-};
 var ARROW_FLOATING_STYLE = {
   bottom: "rotate(45deg)",
   left: "rotate(135deg)",
@@ -18,15 +10,14 @@ var ARROW_FLOATING_STYLE = {
   right: "rotate(315deg)"
 };
 function getPlacementStyles(options) {
-  const { measured, strategy = "absolute", placement = "bottom" } = options;
+  const { placement = "bottom" } = options;
   return {
     arrow: {
       position: "absolute",
       width: cssVars.arrowSize.reference,
       height: cssVars.arrowSize.reference,
       [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
-      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,
-      opacity: !measured ? 0 : void 0
+      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
     },
     arrowTip: {
       transform: ARROW_FLOATING_STYLE[placement.split("-")[0]],
@@ -39,9 +30,10 @@ function getPlacementStyles(options) {
       zIndex: "inherit"
     },
     floating: {
-      position: strategy,
+      position: "absolute",
       minWidth: "max-content",
-      ...!measured && UNMEASURED_FLOATING_STYLE
+      top: "0px",
+      left: "0px"
     }
   };
 }

package/dist/get-placement.js

@@ -54,7 +54,7 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...(0, import_dom.getOverflowAncestors)(reference));
   }
   function addResizeListeners() {
-    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update)];
+    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update, { scope: "size" })];
     if (referenceResize && isHTMLElement(reference)) {
       cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
     }
@@ -191,7 +191,7 @@ function getPlacement(reference, floating, opts = {}) {
   function compute(config = {}) {
     if (!reference || !floating)
       return;
-    const { placement, strategy } = options;
+    const { placement, strategy, onComplete } = options;
     (0, import_dom2.computePosition)(reference, floating, {
       placement,
       middleware,
@@ -202,11 +202,11 @@ function getPlacement(reference, floating, opts = {}) {
       const y = Math.round(data.y);
       Object.assign(floating.style, {
         position: data.strategy,
-        top: "0",
-        left: "0",
+        top: "0px",
+        left: "0px",
         transform: `translate3d(${x}px, ${y}px, 0)`
       });
-      options.onComplete?.({ ...data, compute });
+      onComplete?.(data);
     });
   }
   compute();

package/dist/get-placement.mjs

@@ -1,8 +1,8 @@
 import {
   getBasePlacement,
   getPlacement
-} from "./chunk-K6E3OR2A.mjs";
-import "./chunk-KMOWWEFH.mjs";
+} from "./chunk-6B3BV5TE.mjs";
+import "./chunk-AVEWKGZP.mjs";
 import "./chunk-X5LLREVI.mjs";
 export {
   getBasePlacement,

package/dist/get-styles.d.ts

@@ -1,17 +1,14 @@
 import { Placement } from '@floating-ui/dom';
 
 type Options = {
-    measured: boolean;
-    strategy?: "absolute" | "fixed";
     placement?: Placement;
 };
 declare function getPlacementStyles(options: Options): {
     arrow: {
-        readonly [x: string]: string | 0 | undefined;
+        readonly [x: string]: string;
         readonly position: "absolute";
         readonly width: string;
         readonly height: string;
-        readonly opacity: 0 | undefined;
     };
     arrowTip: {
         readonly transform: any;
@@ -24,13 +21,10 @@ declare function getPlacementStyles(options: Options): {
         readonly zIndex: "inherit";
     };
     floating: {
-        position: "absolute" | "fixed";
-        readonly top?: 0 | undefined;
-        readonly left?: 0 | undefined;
-        readonly opacity?: 0 | undefined;
-        readonly transform?: "translate3d(0, -200%, 0)" | undefined;
-        readonly pointerEvents?: "none" | undefined;
+        readonly position: "absolute";
         readonly minWidth: "max-content";
+        readonly top: "0px";
+        readonly left: "0px";
     };
 };
 

package/dist/get-styles.js

@@ -35,14 +35,6 @@ var cssVars = {
 };
 
 // src/get-styles.ts
-var UNMEASURED_FLOATING_STYLE = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  opacity: 0,
-  transform: "translate3d(0, -200%, 0)",
-  pointerEvents: "none"
-};
 var ARROW_FLOATING_STYLE = {
   bottom: "rotate(45deg)",
   left: "rotate(135deg)",
@@ -50,15 +42,14 @@ var ARROW_FLOATING_STYLE = {
   right: "rotate(315deg)"
 };
 function getPlacementStyles(options) {
-  const { measured, strategy = "absolute", placement = "bottom" } = options;
+  const { placement = "bottom" } = options;
   return {
     arrow: {
       position: "absolute",
       width: cssVars.arrowSize.reference,
       height: cssVars.arrowSize.reference,
       [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
-      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,
-      opacity: !measured ? 0 : void 0
+      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
     },
     arrowTip: {
       transform: ARROW_FLOATING_STYLE[placement.split("-")[0]],
@@ -71,9 +62,10 @@ function getPlacementStyles(options) {
       zIndex: "inherit"
     },
     floating: {
-      position: strategy,
+      position: "absolute",
       minWidth: "max-content",
-      ...!measured && UNMEASURED_FLOATING_STYLE
+      top: "0px",
+      left: "0px"
     }
   };
 }

package/dist/get-styles.mjs

@@ -1,6 +1,6 @@
 import {
   getPlacementStyles
-} from "./chunk-I46LTIWB.mjs";
+} from "./chunk-V4C4UQPN.mjs";
 import "./chunk-X5LLREVI.mjs";
 export {
   getPlacementStyles

package/dist/index.js

@@ -57,7 +57,7 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...(0, import_dom.getOverflowAncestors)(reference));
   }
   function addResizeListeners() {
-    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update)];
+    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update, { scope: "size" })];
     if (referenceResize && isHTMLElement(reference)) {
       cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
     }
@@ -194,7 +194,7 @@ function getPlacement(reference, floating, opts = {}) {
   function compute(config = {}) {
     if (!reference || !floating)
       return;
-    const { placement, strategy } = options;
+    const { placement, strategy, onComplete } = options;
     (0, import_dom2.computePosition)(reference, floating, {
       placement,
       middleware,
@@ -205,11 +205,11 @@ function getPlacement(reference, floating, opts = {}) {
       const y = Math.round(data.y);
       Object.assign(floating.style, {
         position: data.strategy,
-        top: "0",
-        left: "0",
+        top: "0px",
+        left: "0px",
         transform: `translate3d(${x}px, ${y}px, 0)`
       });
-      options.onComplete?.({ ...data, compute });
+      onComplete?.(data);
     });
   }
   compute();
@@ -223,14 +223,6 @@ function getBasePlacement(placement) {
 }
 
 // src/get-styles.ts
-var UNMEASURED_FLOATING_STYLE = {
-  position: "fixed",
-  top: 0,
-  left: 0,
-  opacity: 0,
-  transform: "translate3d(0, -200%, 0)",
-  pointerEvents: "none"
-};
 var ARROW_FLOATING_STYLE = {
   bottom: "rotate(45deg)",
   left: "rotate(135deg)",
@@ -238,15 +230,14 @@ var ARROW_FLOATING_STYLE = {
   right: "rotate(315deg)"
 };
 function getPlacementStyles(options) {
-  const { measured, strategy = "absolute", placement = "bottom" } = options;
+  const { placement = "bottom" } = options;
   return {
     arrow: {
       position: "absolute",
       width: cssVars.arrowSize.reference,
       height: cssVars.arrowSize.reference,
       [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
-      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,
-      opacity: !measured ? 0 : void 0
+      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
     },
     arrowTip: {
       transform: ARROW_FLOATING_STYLE[placement.split("-")[0]],
@@ -259,9 +250,10 @@ function getPlacementStyles(options) {
       zIndex: "inherit"
     },
     floating: {
-      position: strategy,
+      position: "absolute",
       minWidth: "max-content",
-      ...!measured && UNMEASURED_FLOATING_STYLE
+      top: "0px",
+      left: "0px"
     }
   };
 }

package/dist/index.mjs

@@ -1,11 +1,11 @@
 import {
   getBasePlacement,
   getPlacement
-} from "./chunk-K6E3OR2A.mjs";
-import "./chunk-KMOWWEFH.mjs";
+} from "./chunk-6B3BV5TE.mjs";
+import "./chunk-AVEWKGZP.mjs";
 import {
   getPlacementStyles
-} from "./chunk-I46LTIWB.mjs";
+} from "./chunk-V4C4UQPN.mjs";
 import "./chunk-X5LLREVI.mjs";
 export {
   getBasePlacement,

package/dist/types.d.ts

@@ -1,4 +1,4 @@
-import { Placement, Boundary, ComputePositionReturn, ComputePositionConfig } from '@floating-ui/dom';
+import { Placement, Boundary, ComputePositionReturn } from '@floating-ui/dom';
 export { Placement } from '@floating-ui/dom';
 import { AutoUpdateOptions } from './auto-update.js';
 
@@ -54,9 +54,7 @@ type PositioningOptions = {
     /**
      * Function called when the placement is computed
      */
-    onComplete?(data: ComputePositionReturn & {
-        compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
-    }): void;
+    onComplete?(data: ComputePositionReturn): void;
     /**
      * Function called on cleanup of all listeners
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -22,10 +22,10 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.2.1",
-    "@zag-js/dom-query": "0.1.3",
-    "@zag-js/utils": "0.3.3",
-    "@zag-js/element-rect": "0.2.2"
+    "@floating-ui/dom": "1.2.5",
+    "@zag-js/dom-query": "0.1.4",
+    "@zag-js/element-rect": "0.3.0",
+    "@zag-js/utils": "0.3.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"