@zag-js/popper 1.21.9 → 1.22.0

package/dist/index.d.mts

@@ -72,8 +72,10 @@ interface PositioningOptions {
     fitViewport?: boolean | undefined;
     /**
      * The overflow boundary of the reference element
+     * Accepts a function returning a Boundary, a Boundary directly,
+     * or the shorthand string 'clipping-ancestors' which maps to Floating UI's 'clippingAncestors'.
      */
-    boundary?: (() => Boundary) | undefined;
+    boundary?: (() => Boundary) | Boundary | "clipping-ancestors" | undefined;
     /**
      * Options to activate auto-update listeners
      */

package/dist/index.d.ts

@@ -72,8 +72,10 @@ interface PositioningOptions {
     fitViewport?: boolean | undefined;
     /**
      * The overflow boundary of the reference element
+     * Accepts a function returning a Boundary, a Boundary directly,
+     * or the shorthand string 'clipping-ancestors' which maps to Floating UI's 'clippingAncestors'.
      */
-    boundary?: (() => Boundary) | undefined;
+    boundary?: (() => Boundary) | Boundary | "clipping-ancestors" | undefined;
     /**
      * Options to activate auto-update listeners
      */

package/dist/index.js

@@ -49,32 +49,46 @@ var cssVars = {
   transformOrigin: toVar("--transform-origin"),
   arrowOffset: toVar("--arrow-offset")
 };
-var getTransformOrigin = (arrow2) => ({
-  top: "bottom center",
-  "top-start": arrow2 ? `${arrow2.x}px bottom` : "left bottom",
-  "top-end": arrow2 ? `${arrow2.x}px bottom` : "right bottom",
-  bottom: "top center",
-  "bottom-start": arrow2 ? `${arrow2.x}px top` : "top left",
-  "bottom-end": arrow2 ? `${arrow2.x}px top` : "top right",
-  left: "right center",
-  "left-start": arrow2 ? `right ${arrow2.y}px` : "right top",
-  "left-end": arrow2 ? `right ${arrow2.y}px` : "right bottom",
-  right: "left center",
-  "right-start": arrow2 ? `left ${arrow2.y}px` : "left top",
-  "right-end": arrow2 ? `left ${arrow2.y}px` : "left bottom"
-});
-var transformOriginMiddleware = {
-  name: "transformOrigin",
-  fn({ placement, elements, middlewareData }) {
-    const { arrow: arrow2 } = middlewareData;
-    const transformOrigin = getTransformOrigin(arrow2)[placement];
-    const { floating } = elements;
-    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
-    return {
-      data: { transformOrigin }
-    };
-  }
-};
+var getSideAxis = (side) => side === "top" || side === "bottom" ? "y" : "x";
+function createTransformOriginMiddleware(opts, arrowEl) {
+  return {
+    name: "transformOrigin",
+    fn(state) {
+      const { elements, middlewareData, placement, rects, y } = state;
+      const side = placement.split("-")[0];
+      const axis = getSideAxis(side);
+      const arrowX = middlewareData.arrow?.x || 0;
+      const arrowY = middlewareData.arrow?.y || 0;
+      const arrowWidth = arrowEl?.clientWidth || 0;
+      const arrowHeight = arrowEl?.clientHeight || 0;
+      const transformX = arrowX + arrowWidth / 2;
+      const transformY = arrowY + arrowHeight / 2;
+      const shiftY = Math.abs(middlewareData.shift?.y || 0);
+      const halfAnchorHeight = rects.reference.height / 2;
+      const arrowOffset = arrowHeight / 2;
+      const gutter = opts.offset?.mainAxis ?? opts.gutter;
+      const sideOffsetValue = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+      const isOverlappingAnchor = shiftY > sideOffsetValue;
+      const adjacentTransformOrigin = {
+        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+        bottom: `${transformX}px ${-sideOffsetValue}px`,
+        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+        right: `${-sideOffsetValue}px ${transformY}px`
+      }[side];
+      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+      const useOverlap = Boolean(opts.overlap) && axis === "y" && isOverlappingAnchor;
+      elements.floating.style.setProperty(
+        cssVars.transformOrigin.variable,
+        useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+      );
+      return {
+        data: {
+          transformOrigin: useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+        }
+      };
+    }
+  };
+}
 var rectMiddleware = {
   name: "rects",
   fn({ rects }) {
@@ -131,15 +145,14 @@ function roundByDpr(win, value) {
   const dpr = win.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;
 }
-function getBoundaryMiddleware(opts) {
-  return utils.runIfFn(opts.boundary);
+function resolveBoundaryOption(boundary) {
+  if (typeof boundary === "function") return boundary();
+  if (boundary === "clipping-ancestors") return "clippingAncestors";
+  return boundary;
 }
-function getArrowMiddleware(arrowElement, opts) {
-  if (!arrowElement) return;
-  return dom.arrow({
-    element: arrowElement,
-    padding: opts.arrowPadding
-  });
+function getArrowMiddleware(arrowElement, doc, opts) {
+  const element = arrowElement || doc.createElement("div");
+  return dom.arrow({ element, padding: opts.arrowPadding });
 }
 function getOffsetMiddleware(arrowElement, opts) {
   if (utils.isNull(opts.offset ?? opts.gutter)) return;
@@ -159,16 +172,18 @@ function getOffsetMiddleware(arrowElement, opts) {
 }
 function getFlipMiddleware(opts) {
   if (!opts.flip) return;
+  const boundary = resolveBoundaryOption(opts.boundary);
   return dom.flip({
-    boundary: getBoundaryMiddleware(opts),
+    ...boundary ? { boundary } : void 0,
     padding: opts.overflowPadding,
     fallbackPlacements: opts.flip === true ? void 0 : opts.flip
   });
 }
 function getShiftMiddleware(opts) {
   if (!opts.slide && !opts.overlap) return;
+  const boundary = resolveBoundaryOption(opts.boundary);
   return dom.shift({
-    boundary: getBoundaryMiddleware(opts),
+    ...boundary ? { boundary } : void 0,
     mainAxis: opts.slide,
     crossAxis: opts.overlap,
     padding: opts.overflowPadding,
@@ -181,9 +196,11 @@ function getSizeMiddleware(opts) {
     apply({ elements, rects, availableHeight, availableWidth }) {
       const floating = elements.floating;
       const referenceWidth = Math.round(rects.reference.width);
+      const referenceHeight = Math.round(rects.reference.height);
       availableWidth = Math.floor(availableWidth);
       availableHeight = Math.floor(availableHeight);
       floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+      floating.style.setProperty("--reference-height", `${referenceHeight}px`);
       floating.style.setProperty("--available-width", `${availableWidth}px`);
       floating.style.setProperty("--available-height", `${availableHeight}px`);
     }
@@ -191,7 +208,7 @@ function getSizeMiddleware(opts) {
 }
 function hideWhenDetachedMiddleware(opts) {
   if (!opts.hideWhenDetached) return;
-  return dom.hide({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" });
+  return dom.hide({ strategy: "referenceHidden", boundary: resolveBoundaryOption(opts.boundary) ?? "clippingAncestors" });
 }
 function getAutoUpdateOptions(opts) {
   if (!opts) return {};
@@ -209,9 +226,12 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     getOffsetMiddleware(arrowEl, options),
     getFlipMiddleware(options),
     getShiftMiddleware(options),
-    getArrowMiddleware(arrowEl, options),
+    getArrowMiddleware(arrowEl, floating.ownerDocument, options),
     shiftArrowMiddleware(arrowEl),
-    transformOriginMiddleware,
+    createTransformOriginMiddleware(
+      { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
+      arrowEl
+    ),
     getSizeMiddleware(options),
     hideWhenDetachedMiddleware(options),
     rectMiddleware

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import { autoUpdate, offset, flip, shift, limitShift, arrow, size, hide, computePosition } from '@floating-ui/dom';
 import { raf, isHTMLElement, getWindow, getComputedStyle } from '@zag-js/dom-query';
-import { noop, isNull, compact, runIfFn } from '@zag-js/utils';
+import { noop, isNull, compact } from '@zag-js/utils';
 
 // src/get-placement.ts
 function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
@@ -47,32 +47,46 @@ var cssVars = {
   transformOrigin: toVar("--transform-origin"),
   arrowOffset: toVar("--arrow-offset")
 };
-var getTransformOrigin = (arrow2) => ({
-  top: "bottom center",
-  "top-start": arrow2 ? `${arrow2.x}px bottom` : "left bottom",
-  "top-end": arrow2 ? `${arrow2.x}px bottom` : "right bottom",
-  bottom: "top center",
-  "bottom-start": arrow2 ? `${arrow2.x}px top` : "top left",
-  "bottom-end": arrow2 ? `${arrow2.x}px top` : "top right",
-  left: "right center",
-  "left-start": arrow2 ? `right ${arrow2.y}px` : "right top",
-  "left-end": arrow2 ? `right ${arrow2.y}px` : "right bottom",
-  right: "left center",
-  "right-start": arrow2 ? `left ${arrow2.y}px` : "left top",
-  "right-end": arrow2 ? `left ${arrow2.y}px` : "left bottom"
-});
-var transformOriginMiddleware = {
-  name: "transformOrigin",
-  fn({ placement, elements, middlewareData }) {
-    const { arrow: arrow2 } = middlewareData;
-    const transformOrigin = getTransformOrigin(arrow2)[placement];
-    const { floating } = elements;
-    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
-    return {
-      data: { transformOrigin }
-    };
-  }
-};
+var getSideAxis = (side) => side === "top" || side === "bottom" ? "y" : "x";
+function createTransformOriginMiddleware(opts, arrowEl) {
+  return {
+    name: "transformOrigin",
+    fn(state) {
+      const { elements, middlewareData, placement, rects, y } = state;
+      const side = placement.split("-")[0];
+      const axis = getSideAxis(side);
+      const arrowX = middlewareData.arrow?.x || 0;
+      const arrowY = middlewareData.arrow?.y || 0;
+      const arrowWidth = arrowEl?.clientWidth || 0;
+      const arrowHeight = arrowEl?.clientHeight || 0;
+      const transformX = arrowX + arrowWidth / 2;
+      const transformY = arrowY + arrowHeight / 2;
+      const shiftY = Math.abs(middlewareData.shift?.y || 0);
+      const halfAnchorHeight = rects.reference.height / 2;
+      const arrowOffset = arrowHeight / 2;
+      const gutter = opts.offset?.mainAxis ?? opts.gutter;
+      const sideOffsetValue = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
+      const isOverlappingAnchor = shiftY > sideOffsetValue;
+      const adjacentTransformOrigin = {
+        top: `${transformX}px calc(100% + ${sideOffsetValue}px)`,
+        bottom: `${transformX}px ${-sideOffsetValue}px`,
+        left: `calc(100% + ${sideOffsetValue}px) ${transformY}px`,
+        right: `${-sideOffsetValue}px ${transformY}px`
+      }[side];
+      const overlapTransformOrigin = `${transformX}px ${rects.reference.y + halfAnchorHeight - y}px`;
+      const useOverlap = Boolean(opts.overlap) && axis === "y" && isOverlappingAnchor;
+      elements.floating.style.setProperty(
+        cssVars.transformOrigin.variable,
+        useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+      );
+      return {
+        data: {
+          transformOrigin: useOverlap ? overlapTransformOrigin : adjacentTransformOrigin
+        }
+      };
+    }
+  };
+}
 var rectMiddleware = {
   name: "rects",
   fn({ rects }) {
@@ -129,15 +143,14 @@ function roundByDpr(win, value) {
   const dpr = win.devicePixelRatio || 1;
   return Math.round(value * dpr) / dpr;
 }
-function getBoundaryMiddleware(opts) {
-  return runIfFn(opts.boundary);
+function resolveBoundaryOption(boundary) {
+  if (typeof boundary === "function") return boundary();
+  if (boundary === "clipping-ancestors") return "clippingAncestors";
+  return boundary;
 }
-function getArrowMiddleware(arrowElement, opts) {
-  if (!arrowElement) return;
-  return arrow({
-    element: arrowElement,
-    padding: opts.arrowPadding
-  });
+function getArrowMiddleware(arrowElement, doc, opts) {
+  const element = arrowElement || doc.createElement("div");
+  return arrow({ element, padding: opts.arrowPadding });
 }
 function getOffsetMiddleware(arrowElement, opts) {
   if (isNull(opts.offset ?? opts.gutter)) return;
@@ -157,16 +170,18 @@ function getOffsetMiddleware(arrowElement, opts) {
 }
 function getFlipMiddleware(opts) {
   if (!opts.flip) return;
+  const boundary = resolveBoundaryOption(opts.boundary);
   return flip({
-    boundary: getBoundaryMiddleware(opts),
+    ...boundary ? { boundary } : void 0,
     padding: opts.overflowPadding,
     fallbackPlacements: opts.flip === true ? void 0 : opts.flip
   });
 }
 function getShiftMiddleware(opts) {
   if (!opts.slide && !opts.overlap) return;
+  const boundary = resolveBoundaryOption(opts.boundary);
   return shift({
-    boundary: getBoundaryMiddleware(opts),
+    ...boundary ? { boundary } : void 0,
     mainAxis: opts.slide,
     crossAxis: opts.overlap,
     padding: opts.overflowPadding,
@@ -179,9 +194,11 @@ function getSizeMiddleware(opts) {
     apply({ elements, rects, availableHeight, availableWidth }) {
       const floating = elements.floating;
       const referenceWidth = Math.round(rects.reference.width);
+      const referenceHeight = Math.round(rects.reference.height);
       availableWidth = Math.floor(availableWidth);
       availableHeight = Math.floor(availableHeight);
       floating.style.setProperty("--reference-width", `${referenceWidth}px`);
+      floating.style.setProperty("--reference-height", `${referenceHeight}px`);
       floating.style.setProperty("--available-width", `${availableWidth}px`);
       floating.style.setProperty("--available-height", `${availableHeight}px`);
     }
@@ -189,7 +206,7 @@ function getSizeMiddleware(opts) {
 }
 function hideWhenDetachedMiddleware(opts) {
   if (!opts.hideWhenDetached) return;
-  return hide({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" });
+  return hide({ strategy: "referenceHidden", boundary: resolveBoundaryOption(opts.boundary) ?? "clippingAncestors" });
 }
 function getAutoUpdateOptions(opts) {
   if (!opts) return {};
@@ -207,9 +224,12 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     getOffsetMiddleware(arrowEl, options),
     getFlipMiddleware(options),
     getShiftMiddleware(options),
-    getArrowMiddleware(arrowEl, options),
+    getArrowMiddleware(arrowEl, floating.ownerDocument, options),
     shiftArrowMiddleware(arrowEl),
-    transformOriginMiddleware,
+    createTransformOriginMiddleware(
+      { gutter: options.gutter, offset: options.offset, overlap: options.overlap },
+      arrowEl
+    ),
     getSizeMiddleware(options),
     hideWhenDetachedMiddleware(options),
     rectMiddleware

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "1.21.9",
+  "version": "1.22.0",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@floating-ui/dom": "1.7.4",
-    "@zag-js/dom-query": "1.21.9",
-    "@zag-js/utils": "1.21.9"
+    "@zag-js/dom-query": "1.22.0",
+    "@zag-js/utils": "1.22.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"