@zag-js/popper 0.2.5 → 0.8.0

package/dist/auto-update.js

@@ -49,9 +49,9 @@ 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, { scope: "size", onChange: update })];
     if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
+      cleanups.push((0, import_element_rect.trackElementRect)(reference, { onChange: update }));
     }
     cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());

package/dist/auto-update.mjs

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

package/dist/{chunk-K6E3OR2A.mjs → chunk-EC2KMZAZ.mjs}

@@ -1,6 +1,6 @@
 import {
   autoUpdate
-} from "./chunk-KMOWWEFH.mjs";
+} from "./chunk-MLNMIWN3.mjs";
 import {
   shiftArrow,
   transformOrigin
@@ -8,6 +8,7 @@ import {
 
 // src/get-placement.ts
 import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+import { raf } from "@zag-js/dom-query";
 import { callAll } from "@zag-js/utils";
 var defaultOptions = {
   strategy: "absolute",
@@ -18,7 +19,7 @@ var defaultOptions = {
   sameWidth: false,
   overflowPadding: 8
 };
-function getPlacement(reference, floating, opts = {}) {
+function getPlacementImpl(reference, floating, opts = {}) {
   if (!floating || !reference)
     return;
   const options = Object.assign({}, defaultOptions, opts);
@@ -80,7 +81,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 +92,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();
@@ -107,8 +108,23 @@ function getPlacement(reference, floating, opts = {}) {
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
+function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
+  const { defer, ...restOptions } = opts;
+  const func = defer ? raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
+      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
+      cleanups.push(getPlacementImpl(reference, floating, restOptions));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
 
 export {
-  getPlacement,
-  getBasePlacement
+  getBasePlacement,
+  getPlacement
 };

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

@@ -25,9 +25,9 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...getOverflowAncestors(reference));
   }
   function addResizeListeners() {
-    let cleanups = [trackElementRect(floating, update)];
+    let cleanups = [trackElementRect(floating, { scope: "size", onChange: update })];
     if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push(trackElementRect(reference, update));
+      cleanups.push(trackElementRect(reference, { onChange: update }));
     }
     cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());

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.d.ts

@@ -1,8 +1,13 @@
-import { VirtualElement, Placement } from '@floating-ui/dom';
-import { PositioningOptions, BasePlacement } from './types.js';
+import { Placement, VirtualElement } from '@floating-ui/dom';
+import { BasePlacement, PositioningOptions } from './types.js';
 import './auto-update.js';
 
-declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): (() => void) | undefined;
+type MaybeRectElement = HTMLElement | VirtualElement | null;
+type MaybeElement = HTMLElement | null;
+type MaybeFn<T> = T | (() => T);
 declare function getBasePlacement(placement: Placement): BasePlacement;
+declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floatingOrFn: MaybeFn<MaybeElement>, opts?: PositioningOptions & {
+    defer?: boolean;
+}): () => void;
 
 export { getBasePlacement, getPlacement };

package/dist/get-placement.js

@@ -25,6 +25,7 @@ __export(get_placement_exports, {
 });
 module.exports = __toCommonJS(get_placement_exports);
 var import_dom2 = require("@floating-ui/dom");
+var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
 
 // src/auto-update.ts
@@ -54,9 +55,9 @@ 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, { scope: "size", onChange: update })];
     if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
+      cleanups.push((0, import_element_rect.trackElementRect)(reference, { onChange: update }));
     }
     cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());
@@ -129,7 +130,7 @@ var defaultOptions = {
   sameWidth: false,
   overflowPadding: 8
 };
-function getPlacement(reference, floating, opts = {}) {
+function getPlacementImpl(reference, floating, opts = {}) {
   if (!floating || !reference)
     return;
   const options = Object.assign({}, defaultOptions, opts);
@@ -191,7 +192,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 +203,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();
@@ -218,6 +219,21 @@ function getPlacement(reference, floating, opts = {}) {
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
+function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
+  const { defer, ...restOptions } = opts;
+  const func = defer ? import_dom_query.raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
+      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
+      cleanups.push(getPlacementImpl(reference, floating, restOptions));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   getBasePlacement,

package/dist/get-placement.mjs

@@ -1,8 +1,8 @@
 import {
   getBasePlacement,
   getPlacement
-} from "./chunk-K6E3OR2A.mjs";
-import "./chunk-KMOWWEFH.mjs";
+} from "./chunk-EC2KMZAZ.mjs";
+import "./chunk-MLNMIWN3.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

@@ -28,6 +28,7 @@ module.exports = __toCommonJS(src_exports);
 
 // src/get-placement.ts
 var import_dom2 = require("@floating-ui/dom");
+var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
 
 // src/auto-update.ts
@@ -57,9 +58,9 @@ 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, { scope: "size", onChange: update })];
     if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
+      cleanups.push((0, import_element_rect.trackElementRect)(reference, { onChange: update }));
     }
     cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());
@@ -132,7 +133,7 @@ var defaultOptions = {
   sameWidth: false,
   overflowPadding: 8
 };
-function getPlacement(reference, floating, opts = {}) {
+function getPlacementImpl(reference, floating, opts = {}) {
   if (!floating || !reference)
     return;
   const options = Object.assign({}, defaultOptions, opts);
@@ -194,7 +195,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 +206,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();
@@ -221,16 +222,23 @@ function getPlacement(reference, floating, opts = {}) {
 function getBasePlacement(placement) {
   return placement.split("-")[0];
 }
+function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
+  const { defer, ...restOptions } = opts;
+  const func = defer ? import_dom_query.raf : (v) => v();
+  const cleanups = [];
+  cleanups.push(
+    func(() => {
+      const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
+      const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
+      cleanups.push(getPlacementImpl(reference, floating, restOptions));
+    })
+  );
+  return () => {
+    cleanups.forEach((fn) => fn?.());
+  };
+}
 
 // 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 +246,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 +266,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-EC2KMZAZ.mjs";
+import "./chunk-MLNMIWN3.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.5",
+  "version": "0.8.0",
   "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",
+    "@floating-ui/dom": "1.2.6",
     "@zag-js/dom-query": "0.1.4",
-    "@zag-js/element-rect": "0.2.2",
-    "@zag-js/utils": "0.3.3"
+    "@zag-js/element-rect": "0.8.0",
+    "@zag-js/utils": "0.3.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"