@zag-js/popper 0.2.3 → 0.2.4

package/dist/auto-update.js

@@ -24,94 +24,17 @@ __export(auto_update_exports, {
 });
 module.exports = __toCommonJS(auto_update_exports);
 var import_dom = require("@floating-ui/dom");
-
-// ../core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
+var import_element_rect = require("@zag-js/element-rect");
+var callAll = (...fns) => () => fns.forEach((fn) => fn());
+var isHTMLElement = (el) => {
+  return typeof el === "object" && el !== null && el.nodeType === 1;
 };
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
+var addDomEvent = (el, type, fn, options) => {
+  el.addEventListener(type, fn, options);
+  return () => el.removeEventListener(type, fn, options);
 };
-
-// ../core/src/guard.ts
-var isBoolean = (v) => v === true || v === false;
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../dom/src/query.ts
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-
-// ../dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-
-// ../dom/src/rect-observer.ts
-function getObservedElements() {
-  ;
-  globalThis.__rectObserverMap__ = globalThis.__rectObserverMap__ || /* @__PURE__ */ new Map();
-  return globalThis.__rectObserverMap__;
-}
-function observeElementRect(el, fn) {
-  const observedElements = getObservedElements();
-  const data = observedElements.get(el);
-  if (!data) {
-    observedElements.set(el, { rect: {}, callbacks: [fn] });
-    if (observedElements.size === 1) {
-      rafId = requestAnimationFrame(runLoop);
-    }
-  } else {
-    data.callbacks.push(fn);
-    fn(el.getBoundingClientRect());
-  }
-  return function unobserve() {
-    const data2 = observedElements.get(el);
-    if (!data2)
-      return;
-    const index = data2.callbacks.indexOf(fn);
-    if (index > -1) {
-      data2.callbacks.splice(index, 1);
-    }
-    if (data2.callbacks.length === 0) {
-      observedElements.delete(el);
-      if (observedElements.size === 0) {
-        cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-var rafId;
-function runLoop() {
-  const observedElements = getObservedElements();
-  const changedRectsData = [];
-  observedElements.forEach((data, element) => {
-    const newRect = element.getBoundingClientRect();
-    if (!isEqual(data.rect, newRect)) {
-      data.rect = newRect;
-      changedRectsData.push(data);
-    }
-  });
-  changedRectsData.forEach((data) => {
-    data.callbacks.forEach((callback) => callback(data.rect));
-  });
-  rafId = requestAnimationFrame(runLoop);
-}
-function isEqual(rect1, rect2) {
-  return rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
-}
-
-// src/auto-update.ts
 function resolveOptions(option) {
-  const bool = isBoolean(option);
+  const bool = typeof option === "boolean";
   return {
     ancestorResize: bool ? option : option.ancestorResize ?? true,
     ancestorScroll: bool ? option : option.ancestorScroll ?? true,
@@ -126,9 +49,9 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...(0, import_dom.getOverflowAncestors)(reference));
   }
   function addResizeListeners() {
-    let cleanups = [observeElementRect(floating, update)];
+    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update)];
     if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push(observeElementRect(reference, update));
+      cleanups.push((0, import_element_rect.trackElementRect)(reference, 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-A2YMJLJJ.mjs";
+} from "./chunk-KMOWWEFH.mjs";
 export {
   autoUpdate
 };

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

@@ -1,7 +1,6 @@
 import {
-  autoUpdate,
-  callAll
-} from "./chunk-A2YMJLJJ.mjs";
+  autoUpdate
+} from "./chunk-KMOWWEFH.mjs";
 import {
   shiftArrow,
   transformOrigin
@@ -9,6 +8,7 @@ import {
 
 // src/get-placement.ts
 import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+import { callAll } from "@zag-js/utils";
 var defaultOptions = {
   strategy: "absolute",
   placement: "bottom",

package/dist/chunk-KMOWWEFH.mjs

@@ -0,0 +1,43 @@
+// src/auto-update.ts
+import { getOverflowAncestors } from "@floating-ui/dom";
+import { trackElementRect } from "@zag-js/element-rect";
+var callAll = (...fns) => () => fns.forEach((fn) => fn());
+var isHTMLElement = (el) => {
+  return typeof el === "object" && el !== null && el.nodeType === 1;
+};
+var addDomEvent = (el, type, fn, options) => {
+  el.addEventListener(type, fn, options);
+  return () => el.removeEventListener(type, fn, options);
+};
+function resolveOptions(option) {
+  const bool = typeof option === "boolean";
+  return {
+    ancestorResize: bool ? option : option.ancestorResize ?? true,
+    ancestorScroll: bool ? option : option.ancestorScroll ?? true,
+    referenceResize: bool ? option : option.referenceResize ?? true
+  };
+}
+function autoUpdate(reference, floating, update, options = false) {
+  const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options);
+  const useAncestors = ancestorScroll || ancestorResize;
+  const ancestors = [];
+  if (useAncestors && isHTMLElement(reference)) {
+    ancestors.push(...getOverflowAncestors(reference));
+  }
+  function addResizeListeners() {
+    let cleanups = [trackElementRect(floating, update)];
+    if (referenceResize && isHTMLElement(reference)) {
+      cleanups.push(trackElementRect(reference, update));
+    }
+    cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
+    return () => cleanups.forEach((fn) => fn());
+  }
+  function addScrollListeners() {
+    return callAll(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
+  }
+  return callAll(addResizeListeners(), addScrollListeners());
+}
+
+export {
+  autoUpdate
+};

package/dist/get-placement.js

@@ -25,97 +25,21 @@ __export(get_placement_exports, {
 });
 module.exports = __toCommonJS(get_placement_exports);
 var import_dom2 = require("@floating-ui/dom");
-
-// ../core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../core/src/guard.ts
-var isBoolean = (v) => v === true || v === false;
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var import_utils = require("@zag-js/utils");
 
 // src/auto-update.ts
 var import_dom = require("@floating-ui/dom");
-
-// ../dom/src/query.ts
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-
-// ../dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-
-// ../dom/src/rect-observer.ts
-function getObservedElements() {
-  ;
-  globalThis.__rectObserverMap__ = globalThis.__rectObserverMap__ || /* @__PURE__ */ new Map();
-  return globalThis.__rectObserverMap__;
-}
-function observeElementRect(el, fn) {
-  const observedElements = getObservedElements();
-  const data = observedElements.get(el);
-  if (!data) {
-    observedElements.set(el, { rect: {}, callbacks: [fn] });
-    if (observedElements.size === 1) {
-      rafId = requestAnimationFrame(runLoop);
-    }
-  } else {
-    data.callbacks.push(fn);
-    fn(el.getBoundingClientRect());
-  }
-  return function unobserve() {
-    const data2 = observedElements.get(el);
-    if (!data2)
-      return;
-    const index = data2.callbacks.indexOf(fn);
-    if (index > -1) {
-      data2.callbacks.splice(index, 1);
-    }
-    if (data2.callbacks.length === 0) {
-      observedElements.delete(el);
-      if (observedElements.size === 0) {
-        cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-var rafId;
-function runLoop() {
-  const observedElements = getObservedElements();
-  const changedRectsData = [];
-  observedElements.forEach((data, element) => {
-    const newRect = element.getBoundingClientRect();
-    if (!isEqual(data.rect, newRect)) {
-      data.rect = newRect;
-      changedRectsData.push(data);
-    }
-  });
-  changedRectsData.forEach((data) => {
-    data.callbacks.forEach((callback) => callback(data.rect));
-  });
-  rafId = requestAnimationFrame(runLoop);
-}
-function isEqual(rect1, rect2) {
-  return rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
-}
-
-// src/auto-update.ts
+var import_element_rect = require("@zag-js/element-rect");
+var callAll = (...fns) => () => fns.forEach((fn) => fn());
+var isHTMLElement = (el) => {
+  return typeof el === "object" && el !== null && el.nodeType === 1;
+};
+var addDomEvent = (el, type, fn, options) => {
+  el.addEventListener(type, fn, options);
+  return () => el.removeEventListener(type, fn, options);
+};
 function resolveOptions(option) {
-  const bool = isBoolean(option);
+  const bool = typeof option === "boolean";
   return {
     ancestorResize: bool ? option : option.ancestorResize ?? true,
     ancestorScroll: bool ? option : option.ancestorScroll ?? true,
@@ -130,9 +54,9 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...(0, import_dom.getOverflowAncestors)(reference));
   }
   function addResizeListeners() {
-    let cleanups = [observeElementRect(floating, update)];
+    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update)];
     if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push(observeElementRect(reference, update));
+      cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
     }
     cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());
@@ -286,7 +210,7 @@ function getPlacement(reference, floating, opts = {}) {
     });
   }
   compute();
-  return callAll(
+  return (0, import_utils.callAll)(
     options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
     options.onCleanup
   );

package/dist/get-placement.mjs

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

package/dist/get-styles.d.ts

@@ -24,7 +24,7 @@ declare function getPlacementStyles(options: Options): {
         readonly zIndex: "inherit";
     };
     floating: {
-        position: "fixed" | "absolute";
+        position: "absolute" | "fixed";
         readonly top?: 0 | undefined;
         readonly left?: 0 | undefined;
         readonly opacity?: 0 | undefined;

package/dist/index.js

@@ -28,97 +28,21 @@ module.exports = __toCommonJS(src_exports);
 
 // src/get-placement.ts
 var import_dom2 = require("@floating-ui/dom");
-
-// ../core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../core/src/guard.ts
-var isBoolean = (v) => v === true || v === false;
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+var import_utils = require("@zag-js/utils");
 
 // src/auto-update.ts
 var import_dom = require("@floating-ui/dom");
-
-// ../dom/src/query.ts
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-
-// ../dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-
-// ../dom/src/rect-observer.ts
-function getObservedElements() {
-  ;
-  globalThis.__rectObserverMap__ = globalThis.__rectObserverMap__ || /* @__PURE__ */ new Map();
-  return globalThis.__rectObserverMap__;
-}
-function observeElementRect(el, fn) {
-  const observedElements = getObservedElements();
-  const data = observedElements.get(el);
-  if (!data) {
-    observedElements.set(el, { rect: {}, callbacks: [fn] });
-    if (observedElements.size === 1) {
-      rafId = requestAnimationFrame(runLoop);
-    }
-  } else {
-    data.callbacks.push(fn);
-    fn(el.getBoundingClientRect());
-  }
-  return function unobserve() {
-    const data2 = observedElements.get(el);
-    if (!data2)
-      return;
-    const index = data2.callbacks.indexOf(fn);
-    if (index > -1) {
-      data2.callbacks.splice(index, 1);
-    }
-    if (data2.callbacks.length === 0) {
-      observedElements.delete(el);
-      if (observedElements.size === 0) {
-        cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-var rafId;
-function runLoop() {
-  const observedElements = getObservedElements();
-  const changedRectsData = [];
-  observedElements.forEach((data, element) => {
-    const newRect = element.getBoundingClientRect();
-    if (!isEqual(data.rect, newRect)) {
-      data.rect = newRect;
-      changedRectsData.push(data);
-    }
-  });
-  changedRectsData.forEach((data) => {
-    data.callbacks.forEach((callback) => callback(data.rect));
-  });
-  rafId = requestAnimationFrame(runLoop);
-}
-function isEqual(rect1, rect2) {
-  return rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
-}
-
-// src/auto-update.ts
+var import_element_rect = require("@zag-js/element-rect");
+var callAll = (...fns) => () => fns.forEach((fn) => fn());
+var isHTMLElement = (el) => {
+  return typeof el === "object" && el !== null && el.nodeType === 1;
+};
+var addDomEvent = (el, type, fn, options) => {
+  el.addEventListener(type, fn, options);
+  return () => el.removeEventListener(type, fn, options);
+};
 function resolveOptions(option) {
-  const bool = isBoolean(option);
+  const bool = typeof option === "boolean";
   return {
     ancestorResize: bool ? option : option.ancestorResize ?? true,
     ancestorScroll: bool ? option : option.ancestorScroll ?? true,
@@ -133,9 +57,9 @@ function autoUpdate(reference, floating, update, options = false) {
     ancestors.push(...(0, import_dom.getOverflowAncestors)(reference));
   }
   function addResizeListeners() {
-    let cleanups = [observeElementRect(floating, update)];
+    let cleanups = [(0, import_element_rect.trackElementRect)(floating, update)];
     if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push(observeElementRect(reference, update));
+      cleanups.push((0, import_element_rect.trackElementRect)(reference, update));
     }
     cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());
@@ -289,7 +213,7 @@ function getPlacement(reference, floating, opts = {}) {
     });
   }
   compute();
-  return callAll(
+  return (0, import_utils.callAll)(
     options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
     options.onCleanup
   );

package/dist/index.mjs

@@ -1,8 +1,8 @@
 import {
   getBasePlacement,
   getPlacement
-} from "./chunk-L7FW633C.mjs";
-import "./chunk-A2YMJLJJ.mjs";
+} from "./chunk-K6E3OR2A.mjs";
+import "./chunk-KMOWWEFH.mjs";
 import {
   getPlacementStyles
 } from "./chunk-I46LTIWB.mjs";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -22,12 +22,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.1.0"
+    "@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"
   },
   "devDependencies": {
-    "clean-package": "2.2.0",
-    "@zag-js/dom-utils": "0.2.4",
-    "@zag-js/utils": "0.3.3"
+    "clean-package": "2.2.0"
   },
   "clean-package": "../../../clean-package.config.json",
   "main": "dist/index.js",

package/dist/chunk-A2YMJLJJ.mjs

@@ -1,121 +0,0 @@
-// src/auto-update.ts
-import { getOverflowAncestors } from "@floating-ui/dom";
-
-// ../core/src/functions.ts
-var runIfFn = (v, ...a) => {
-  const res = typeof v === "function" ? v(...a) : v;
-  return res ?? void 0;
-};
-var callAll = (...fns) => (...a) => {
-  fns.forEach(function(fn) {
-    fn?.(...a);
-  });
-};
-
-// ../core/src/guard.ts
-var isBoolean = (v) => v === true || v === false;
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
-
-// ../dom/src/query.ts
-function isHTMLElement(v) {
-  return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
-}
-
-// ../dom/src/listener.ts
-var isRef = (v) => hasProp(v, "current");
-function addDomEvent(target, eventName, handler, options) {
-  const node = isRef(target) ? target.current : runIfFn(target);
-  node?.addEventListener(eventName, handler, options);
-  return () => {
-    node?.removeEventListener(eventName, handler, options);
-  };
-}
-
-// ../dom/src/rect-observer.ts
-function getObservedElements() {
-  ;
-  globalThis.__rectObserverMap__ = globalThis.__rectObserverMap__ || /* @__PURE__ */ new Map();
-  return globalThis.__rectObserverMap__;
-}
-function observeElementRect(el, fn) {
-  const observedElements = getObservedElements();
-  const data = observedElements.get(el);
-  if (!data) {
-    observedElements.set(el, { rect: {}, callbacks: [fn] });
-    if (observedElements.size === 1) {
-      rafId = requestAnimationFrame(runLoop);
-    }
-  } else {
-    data.callbacks.push(fn);
-    fn(el.getBoundingClientRect());
-  }
-  return function unobserve() {
-    const data2 = observedElements.get(el);
-    if (!data2)
-      return;
-    const index = data2.callbacks.indexOf(fn);
-    if (index > -1) {
-      data2.callbacks.splice(index, 1);
-    }
-    if (data2.callbacks.length === 0) {
-      observedElements.delete(el);
-      if (observedElements.size === 0) {
-        cancelAnimationFrame(rafId);
-      }
-    }
-  };
-}
-var rafId;
-function runLoop() {
-  const observedElements = getObservedElements();
-  const changedRectsData = [];
-  observedElements.forEach((data, element) => {
-    const newRect = element.getBoundingClientRect();
-    if (!isEqual(data.rect, newRect)) {
-      data.rect = newRect;
-      changedRectsData.push(data);
-    }
-  });
-  changedRectsData.forEach((data) => {
-    data.callbacks.forEach((callback) => callback(data.rect));
-  });
-  rafId = requestAnimationFrame(runLoop);
-}
-function isEqual(rect1, rect2) {
-  return rect1.width === rect2.width && rect1.height === rect2.height && rect1.top === rect2.top && rect1.right === rect2.right && rect1.bottom === rect2.bottom && rect1.left === rect2.left;
-}
-
-// src/auto-update.ts
-function resolveOptions(option) {
-  const bool = isBoolean(option);
-  return {
-    ancestorResize: bool ? option : option.ancestorResize ?? true,
-    ancestorScroll: bool ? option : option.ancestorScroll ?? true,
-    referenceResize: bool ? option : option.referenceResize ?? true
-  };
-}
-function autoUpdate(reference, floating, update, options = false) {
-  const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options);
-  const useAncestors = ancestorScroll || ancestorResize;
-  const ancestors = [];
-  if (useAncestors && isHTMLElement(reference)) {
-    ancestors.push(...getOverflowAncestors(reference));
-  }
-  function addResizeListeners() {
-    let cleanups = [observeElementRect(floating, update)];
-    if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push(observeElementRect(reference, update));
-    }
-    cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
-    return () => cleanups.forEach((fn) => fn());
-  }
-  function addScrollListeners() {
-    return callAll(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
-  }
-  return callAll(addResizeListeners(), addScrollListeners());
-}
-
-export {
-  callAll,
-  autoUpdate
-};