@zag-js/popper 0.2.7 → 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, { scope: "size" })];
+    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-AVEWKGZP.mjs";
+} from "./chunk-MLNMIWN3.mjs";
 export {
   autoUpdate
 };

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

@@ -1,6 +1,6 @@
 import {
   autoUpdate
-} from "./chunk-AVEWKGZP.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);
@@ -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-AVEWKGZP.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, { scope: "size" })];
+    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/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, { scope: "size" })];
+    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);
@@ -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-6B3BV5TE.mjs";
-import "./chunk-AVEWKGZP.mjs";
+} from "./chunk-EC2KMZAZ.mjs";
+import "./chunk-MLNMIWN3.mjs";
 import "./chunk-X5LLREVI.mjs";
 export {
   getBasePlacement,

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, { scope: "size" })];
+    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);
@@ -221,6 +222,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?.());
+  };
+}
 
 // src/get-styles.ts
 var ARROW_FLOATING_STYLE = {

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import {
   getBasePlacement,
   getPlacement
-} from "./chunk-6B3BV5TE.mjs";
-import "./chunk-AVEWKGZP.mjs";
+} from "./chunk-EC2KMZAZ.mjs";
+import "./chunk-MLNMIWN3.mjs";
 import {
   getPlacementStyles
 } from "./chunk-V4C4UQPN.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.2.7",
+  "version": "0.8.0",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -22,9 +22,9 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.2.5",
+    "@floating-ui/dom": "1.2.6",
     "@zag-js/dom-query": "0.1.4",
-    "@zag-js/element-rect": "0.3.0",
+    "@zag-js/element-rect": "0.8.0",
     "@zag-js/utils": "0.3.4"
   },
   "devDependencies": {