@zag-js/popper 0.1.6 → 0.1.7

package/dist/auto-update.d.ts

@@ -5,4 +5,4 @@ export declare type AutoUpdateOptions = {
     ancestorResize?: boolean;
     referenceResize?: boolean;
 };
-export declare function autoUpdate(reference: ReferenceElement, floating: HTMLElement, update: () => void, options?: boolean | AutoUpdateOptions): (v: void) => void;
+export declare function autoUpdate(reference: ReferenceElement, floating: HTMLElement, update: () => void, options?: boolean | AutoUpdateOptions): () => void;

package/dist/get-placement.d.ts

@@ -1,3 +1,4 @@
-import type { VirtualElement } from "@floating-ui/dom";
-import { PositioningOptions } from "./types";
-export declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, options?: PositioningOptions): (v: void) => void;
+import type { Placement, VirtualElement } from "@floating-ui/dom";
+import type { BasePlacement, PositioningOptions } from "./types";
+export declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): () => void;
+export declare function getBasePlacement(placement: Placement): BasePlacement;

package/dist/get-styles.d.ts

@@ -1,4 +1,4 @@
-import { Placement } from "@floating-ui/dom";
+import type { Placement } from "@floating-ui/dom";
 declare type Options = {
     measured: boolean;
     strategy?: "absolute" | "fixed";

package/dist/index.d.ts

@@ -1,3 +1,3 @@
-export { getPlacement } from "./get-placement";
+export { getPlacement, getBasePlacement } from "./get-placement";
 export { getPlacementStyles } from "./get-styles";
 export type { Placement, PositioningOptions } from "./types";

package/dist/index.js

@@ -1,6 +1,8 @@
 "use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropNames = Object.getOwnPropertyNames;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
@@ -17,6 +19,7 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -34,6 +37,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var src_exports = {};
 __export(src_exports, {
+  getBasePlacement: () => getBasePlacement,
   getPlacement: () => getPlacement,
   getPlacementStyles: () => getPlacementStyles
 });
@@ -43,20 +47,25 @@ module.exports = __toCommonJS(src_exports);
 var import_dom2 = require("@floating-ui/dom");
 
 // ../core/dist/index.mjs
-var isBoolean = (v) => v === true || v === false;
-var noop = () => {
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+var isBoolean = (v) => v === true || v === false;
 
 // src/auto-update.ts
 var import_dom = require("@floating-ui/dom");
 
 // ../dom/dist/index.mjs
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
 };
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -65,9 +74,6 @@ function addDomEvent(target, eventName, handler, options) {
     node == null ? void 0 : node.removeEventListener(eventName, handler, options);
   };
 }
-function isHTMLElement(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
-}
 function getObservedElements() {
   ;
   globalThis.__rectObserverMap__ = globalThis.__rectObserverMap__ || /* @__PURE__ */ new Map();
@@ -143,13 +149,13 @@ function autoUpdate(reference, floating, update, options = false) {
     if (referenceResize && isHTMLElement(reference)) {
       cleanups.push(observeElementRect(reference, update));
     }
-    cleanups.push(pipe(...ancestors.map((el) => addDomEvent(el, "resize", update))));
+    cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());
   }
   function addScrollListeners() {
-    return pipe(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
+    return callAll(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
   }
-  return pipe(addResizeListeners(), addScrollListeners());
+  return callAll(addResizeListeners(), addScrollListeners());
 }
 
 // src/middleware.ts
@@ -190,20 +196,16 @@ var transformOrigin = {
 var shiftArrow = (opts) => ({
   name: "shiftArrow",
   fn({ placement, middlewareData }) {
-    var _a;
     const { element: arrow2 } = opts;
-    const { x, y } = (_a = middlewareData.arrow) != null ? _a : { x: 0, y: 0 };
-    const dir = {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right"
-    }[placement.split("-")[0]];
-    Object.assign(arrow2.style, {
-      top: `${y}px`,
-      left: `${x}px`,
-      [dir]: cssVars.arrowOffset.reference
-    });
+    if (middlewareData.arrow) {
+      const { x, y } = middlewareData.arrow;
+      const dir = placement.split("-")[0];
+      Object.assign(arrow2.style, {
+        left: x != null ? `${x}px` : "",
+        top: y != null ? `${y}px` : "",
+        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
+      });
+    }
     return {};
   }
 });
@@ -218,11 +220,10 @@ var defaultOptions = {
   sameWidth: false,
   overflowPadding: 8
 };
-function getPlacement(reference, floating, options = {}) {
-  var _a;
-  if (reference == null || floating == null)
-    return noop;
-  options = Object.assign({}, defaultOptions, options);
+function getPlacement(reference, floating, opts = {}) {
+  if (!floating || !reference)
+    return;
+  const options = Object.assign({}, defaultOptions, opts);
   const arrowEl = floating.querySelector("[data-part=arrow]");
   const middleware = [];
   if (options.flip) {
@@ -247,34 +248,37 @@ function getPlacement(reference, floating, options = {}) {
     middleware.push((0, import_dom2.arrow)({ element: arrowEl, padding: 8 }), shiftArrow({ element: arrowEl }));
   }
   middleware.push(transformOrigin);
-  if (options.sameWidth || options.fitViewport) {
-    middleware.push((0, import_dom2.size)({
-      padding: options.overflowPadding,
-      apply(data) {
-        if (options.sameWidth) {
-          Object.assign(floating.style, {
-            width: `${data.rects.reference.width}px`,
-            minWidth: "unset"
-          });
-        }
-        if (options.fitViewport) {
-          Object.assign(floating.style, {
-            maxWidth: `${data.availableWidth}px`,
-            maxHeight: `${data.availableHeight}px`
-          });
-        }
+  middleware.push((0, import_dom2.size)({
+    padding: options.overflowPadding,
+    apply({ rects, availableHeight, availableWidth }) {
+      const referenceWidth = Math.round(rects.reference.width);
+      floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+      floating.style.setProperty("--available-width", `${availableWidth}px`);
+      floating.style.setProperty("--available-height", `${availableHeight}px`);
+      if (options.sameWidth) {
+        Object.assign(floating.style, {
+          width: `${referenceWidth}px`,
+          minWidth: "unset"
+        });
       }
-    }));
-  }
-  function compute() {
-    if (reference == null || floating == null)
+      if (options.fitViewport) {
+        Object.assign(floating.style, {
+          maxWidth: `${availableWidth}px`,
+          maxHeight: `${availableHeight}px`
+        });
+      }
+    }
+  }));
+  function compute(config = {}) {
+    if (!reference || !floating)
       return;
     const { placement, strategy } = options;
-    (0, import_dom2.computePosition)(reference, floating, {
+    (0, import_dom2.computePosition)(reference, floating, __spreadValues({
       placement,
       middleware,
       strategy
-    }).then((data) => {
+    }, config)).then((data) => {
+      var _a;
       const x = Math.round(data.x);
       const y = Math.round(data.y);
       Object.assign(floating.style, {
@@ -283,14 +287,14 @@ function getPlacement(reference, floating, options = {}) {
         left: "0",
         transform: `translate3d(${x}px, ${y}px, 0)`
       });
-      return data;
-    }).then((data) => {
-      var _a2;
-      (_a2 = options.onComplete) == null ? void 0 : _a2.call(options, data);
+      (_a = options.onComplete) == null ? void 0 : _a.call(options, __spreadProps(__spreadValues({}, data), { compute }));
     });
   }
   compute();
-  return pipe(autoUpdate(reference, floating, compute, options.listeners), (_a = options.onCleanup) != null ? _a : noop);
+  return callAll(options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0, options.onCleanup);
+}
+function getBasePlacement(placement) {
+  return placement.split("-")[0];
 }
 
 // src/get-styles.ts

package/dist/index.mjs

@@ -1,5 +1,6 @@
-"use strict";
 var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __propIsEnum = Object.prototype.propertyIsEnumerable;
@@ -15,25 +16,31 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 
 // src/get-placement.ts
 import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
 
 // ../core/dist/index.mjs
-var isBoolean = (v) => v === true || v === false;
-var noop = () => {
+var callAll = (...fns) => (...a) => {
+  fns.forEach(function(fn) {
+    fn == null ? void 0 : fn(...a);
+  });
 };
-var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
+var isBoolean = (v) => v === true || v === false;
 
 // src/auto-update.ts
 import { getOverflowAncestors } from "@floating-ui/dom";
 
 // ../dom/dist/index.mjs
-var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
 var runIfFn = (v, ...a) => {
   const res = typeof v === "function" ? v(...a) : v;
   return res != null ? res : void 0;
 };
+var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
+function isHTMLElement(v) {
+  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
+}
 var isRef = (v) => hasProp(v, "current");
 function addDomEvent(target, eventName, handler, options) {
   const node = isRef(target) ? target.current : runIfFn(target);
@@ -42,9 +49,6 @@ function addDomEvent(target, eventName, handler, options) {
     node == null ? void 0 : node.removeEventListener(eventName, handler, options);
   };
 }
-function isHTMLElement(v) {
-  return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
-}
 function getObservedElements() {
   ;
   globalThis.__rectObserverMap__ = globalThis.__rectObserverMap__ || /* @__PURE__ */ new Map();
@@ -120,13 +124,13 @@ function autoUpdate(reference, floating, update, options = false) {
     if (referenceResize && isHTMLElement(reference)) {
       cleanups.push(observeElementRect(reference, update));
     }
-    cleanups.push(pipe(...ancestors.map((el) => addDomEvent(el, "resize", update))));
+    cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
     return () => cleanups.forEach((fn) => fn());
   }
   function addScrollListeners() {
-    return pipe(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
+    return callAll(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
   }
-  return pipe(addResizeListeners(), addScrollListeners());
+  return callAll(addResizeListeners(), addScrollListeners());
 }
 
 // src/middleware.ts
@@ -167,20 +171,16 @@ var transformOrigin = {
 var shiftArrow = (opts) => ({
   name: "shiftArrow",
   fn({ placement, middlewareData }) {
-    var _a;
     const { element: arrow2 } = opts;
-    const { x, y } = (_a = middlewareData.arrow) != null ? _a : { x: 0, y: 0 };
-    const dir = {
-      top: "bottom",
-      right: "left",
-      bottom: "top",
-      left: "right"
-    }[placement.split("-")[0]];
-    Object.assign(arrow2.style, {
-      top: `${y}px`,
-      left: `${x}px`,
-      [dir]: cssVars.arrowOffset.reference
-    });
+    if (middlewareData.arrow) {
+      const { x, y } = middlewareData.arrow;
+      const dir = placement.split("-")[0];
+      Object.assign(arrow2.style, {
+        left: x != null ? `${x}px` : "",
+        top: y != null ? `${y}px` : "",
+        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
+      });
+    }
     return {};
   }
 });
@@ -195,11 +195,10 @@ var defaultOptions = {
   sameWidth: false,
   overflowPadding: 8
 };
-function getPlacement(reference, floating, options = {}) {
-  var _a;
-  if (reference == null || floating == null)
-    return noop;
-  options = Object.assign({}, defaultOptions, options);
+function getPlacement(reference, floating, opts = {}) {
+  if (!floating || !reference)
+    return;
+  const options = Object.assign({}, defaultOptions, opts);
   const arrowEl = floating.querySelector("[data-part=arrow]");
   const middleware = [];
   if (options.flip) {
@@ -224,34 +223,37 @@ function getPlacement(reference, floating, options = {}) {
     middleware.push(arrow({ element: arrowEl, padding: 8 }), shiftArrow({ element: arrowEl }));
   }
   middleware.push(transformOrigin);
-  if (options.sameWidth || options.fitViewport) {
-    middleware.push(size({
-      padding: options.overflowPadding,
-      apply(data) {
-        if (options.sameWidth) {
-          Object.assign(floating.style, {
-            width: `${data.rects.reference.width}px`,
-            minWidth: "unset"
-          });
-        }
-        if (options.fitViewport) {
-          Object.assign(floating.style, {
-            maxWidth: `${data.availableWidth}px`,
-            maxHeight: `${data.availableHeight}px`
-          });
-        }
+  middleware.push(size({
+    padding: options.overflowPadding,
+    apply({ rects, availableHeight, availableWidth }) {
+      const referenceWidth = Math.round(rects.reference.width);
+      floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+      floating.style.setProperty("--available-width", `${availableWidth}px`);
+      floating.style.setProperty("--available-height", `${availableHeight}px`);
+      if (options.sameWidth) {
+        Object.assign(floating.style, {
+          width: `${referenceWidth}px`,
+          minWidth: "unset"
+        });
       }
-    }));
-  }
-  function compute() {
-    if (reference == null || floating == null)
+      if (options.fitViewport) {
+        Object.assign(floating.style, {
+          maxWidth: `${availableWidth}px`,
+          maxHeight: `${availableHeight}px`
+        });
+      }
+    }
+  }));
+  function compute(config = {}) {
+    if (!reference || !floating)
       return;
     const { placement, strategy } = options;
-    computePosition(reference, floating, {
+    computePosition(reference, floating, __spreadValues({
       placement,
       middleware,
       strategy
-    }).then((data) => {
+    }, config)).then((data) => {
+      var _a;
       const x = Math.round(data.x);
       const y = Math.round(data.y);
       Object.assign(floating.style, {
@@ -260,14 +262,14 @@ function getPlacement(reference, floating, options = {}) {
         left: "0",
         transform: `translate3d(${x}px, ${y}px, 0)`
       });
-      return data;
-    }).then((data) => {
-      var _a2;
-      (_a2 = options.onComplete) == null ? void 0 : _a2.call(options, data);
+      (_a = options.onComplete) == null ? void 0 : _a.call(options, __spreadProps(__spreadValues({}, data), { compute }));
     });
   }
   compute();
-  return pipe(autoUpdate(reference, floating, compute, options.listeners), (_a = options.onCleanup) != null ? _a : noop);
+  return callAll(options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0, options.onCleanup);
+}
+function getBasePlacement(placement) {
+  return placement.split("-")[0];
 }
 
 // src/get-styles.ts
@@ -313,6 +315,7 @@ function getPlacementStyles(options) {
   };
 }
 export {
+  getBasePlacement,
   getPlacement,
   getPlacementStyles
 };

package/dist/middleware.d.ts

@@ -1,4 +1,4 @@
-import { Middleware } from "@floating-ui/dom";
+import type { Middleware } from "@floating-ui/dom";
 export declare const cssVars: {
     arrowSize: {
         variable: string;

package/dist/types.d.ts

@@ -1,5 +1,5 @@
-import type { Boundary, Placement, ComputePositionReturn } from "@floating-ui/dom";
-import { AutoUpdateOptions } from "./auto-update";
+import type { Boundary, Placement, ComputePositionReturn, ComputePositionConfig } from "@floating-ui/dom";
+import type { AutoUpdateOptions } from "./auto-update";
 export type { Placement };
 export declare type PositioningOptions = {
     /**
@@ -53,9 +53,12 @@ export declare type PositioningOptions = {
     /**
      * Function called when the placement is computed
      */
-    onComplete?(data: ComputePositionReturn): void;
+    onComplete?(data: ComputePositionReturn & {
+        compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
+    }): void;
     /**
      * Function called on cleanup of all listeners
      */
     onCleanup?: VoidFunction;
 };
+export declare type BasePlacement = "top" | "right" | "bottom" | "left";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -25,8 +25,8 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "^0.5.0",
-    "@zag-js/dom-utils": "0.1.5",
+    "@floating-ui/dom": "0.5.4",
+    "@zag-js/dom-utils": "0.1.6",
     "@zag-js/utils": "0.1.2"
   },
   "scripts": {