@zag-js/popper 0.10.5 → 0.11.0

package/dist/index.mjs

@@ -1,2 +1,253 @@
-export { getBasePlacement, getPlacement } from './get-placement.mjs';
-export { getPlacementStyles } from './get-styles.mjs';
+// src/get-placement.ts
+import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
+import { raf } from "@zag-js/dom-query";
+import { callAll as callAll2 } from "@zag-js/utils";
+
+// 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, { scope: "size", onChange: update })];
+    if (referenceResize && isHTMLElement(reference)) {
+      cleanups.push(trackElementRect(reference, { onChange: 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());
+}
+
+// src/middleware.ts
+var toVar = (value) => ({ variable: value, reference: `var(${value})` });
+var cssVars = {
+  arrowSize: toVar("--arrow-size"),
+  arrowSizeHalf: toVar("--arrow-size-half"),
+  arrowBg: toVar("--arrow-background"),
+  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 transformOrigin = {
+  name: "transformOrigin",
+  fn({ placement, elements, middlewareData }) {
+    const { arrow: arrow2 } = middlewareData;
+    const transformOrigin2 = getTransformOrigin(arrow2)[placement];
+    const { floating } = elements;
+    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin2);
+    return {
+      data: { transformOrigin: transformOrigin2 }
+    };
+  }
+};
+var shiftArrow = (opts) => ({
+  name: "shiftArrow",
+  fn({ placement, middlewareData }) {
+    const { element: arrow2 } = opts;
+    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 {};
+  }
+});
+
+// src/get-placement.ts
+var defaultOptions = {
+  strategy: "absolute",
+  placement: "bottom",
+  listeners: true,
+  gutter: 8,
+  flip: true,
+  sameWidth: false,
+  overflowPadding: 8
+};
+function getPlacementImpl(reference, floating, opts = {}) {
+  if (!floating || !reference)
+    return;
+  const options = Object.assign({}, defaultOptions, opts);
+  const arrowEl = floating.querySelector("[data-part=arrow]");
+  const middleware = [];
+  const boundary = typeof options.boundary === "function" ? options.boundary() : options.boundary;
+  if (options.flip) {
+    middleware.push(
+      flip({
+        boundary,
+        padding: options.overflowPadding
+      })
+    );
+  }
+  if (options.gutter || options.offset) {
+    const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
+    const data = options.offset ? options.offset : { mainAxis: options.gutter };
+    if (data?.mainAxis != null)
+      data.mainAxis += arrowOffset;
+    middleware.push(offset(data));
+  }
+  middleware.push(
+    shift({
+      boundary,
+      crossAxis: options.overlap,
+      padding: options.overflowPadding
+    })
+  );
+  if (arrowEl) {
+    middleware.push(
+      arrow({ element: arrowEl, padding: 8 }),
+      shiftArrow({ element: arrowEl })
+    );
+  }
+  middleware.push(transformOrigin);
+  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"
+          });
+        }
+        if (options.fitViewport) {
+          Object.assign(floating.style, {
+            maxWidth: `${availableWidth}px`,
+            maxHeight: `${availableHeight}px`
+          });
+        }
+      }
+    })
+  );
+  function compute(config = {}) {
+    if (!reference || !floating)
+      return;
+    const { placement, strategy, onComplete } = options;
+    computePosition(reference, floating, {
+      placement,
+      middleware,
+      strategy,
+      ...config
+    }).then((data) => {
+      const x = Math.round(data.x);
+      const y = Math.round(data.y);
+      Object.assign(floating.style, {
+        position: data.strategy,
+        top: "0px",
+        left: "0px",
+        transform: `translate3d(${x}px, ${y}px, 0)`
+      });
+      onComplete?.(data);
+    });
+  }
+  compute();
+  return callAll2(
+    options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
+    options.onCleanup
+  );
+}
+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?.());
+  };
+}
+
+// src/get-styles.ts
+var ARROW_FLOATING_STYLE = {
+  bottom: "rotate(45deg)",
+  left: "rotate(135deg)",
+  top: "rotate(225deg)",
+  right: "rotate(315deg)"
+};
+function getPlacementStyles(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)`
+    },
+    arrowTip: {
+      transform: ARROW_FLOATING_STYLE[placement.split("-")[0]],
+      background: cssVars.arrowBg.reference,
+      top: "0",
+      left: "0",
+      width: "100%",
+      height: "100%",
+      position: "absolute",
+      zIndex: "inherit"
+    },
+    floating: {
+      position: "absolute",
+      minWidth: "max-content",
+      top: "0px",
+      left: "0px"
+    }
+  };
+}
+export {
+  getBasePlacement,
+  getPlacement,
+  getPlacementStyles
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  sameWidth: false,\n  overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  if (!floating || !reference) return\n\n  const options = Object.assign({}, defaultOptions, opts)\n\n  /* -----------------------------------------------------------------------------\n   * The middleware stack\n   * -----------------------------------------------------------------------------*/\n\n  const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n  const middleware: Middleware[] = []\n\n  const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n  if (options.flip) {\n    middleware.push(\n      flip({\n        boundary,\n        padding: options.overflowPadding,\n      }),\n    )\n  }\n\n  if (options.gutter || options.offset) {\n    const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n    const data = options.offset ? options.offset : { mainAxis: options.gutter }\n    if (data?.mainAxis != null) data.mainAxis += arrowOffset\n    middleware.push(offset(data))\n  }\n\n  middleware.push(\n    shift({\n      boundary,\n      crossAxis: options.overlap,\n      padding: options.overflowPadding,\n    }),\n  )\n\n  if (arrowEl) {\n    // prettier-ignore\n    middleware.push(\n      arrow({ element: arrowEl, padding: 8 }),\n      shiftArrow({ element: arrowEl }),\n    )\n  }\n\n  middleware.push(transformOrigin)\n\n  middleware.push(\n    size({\n      padding: options.overflowPadding,\n      apply({ rects, availableHeight, availableWidth }) {\n        const referenceWidth = Math.round(rects.reference.width)\n\n        floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n        floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n        floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n\n        if (options.sameWidth) {\n          Object.assign(floating.style, {\n            width: `${referenceWidth}px`,\n            minWidth: \"unset\",\n          })\n        }\n\n        if (options.fitViewport) {\n          Object.assign(floating.style, {\n            maxWidth: `${availableWidth}px`,\n            maxHeight: `${availableHeight}px`,\n          })\n        }\n      },\n    }),\n  )\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n    if (!reference || !floating) return\n    const { placement, strategy, onComplete } = options\n\n    computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n      ...config,\n    }).then((data) => {\n      const x = Math.round(data.x)\n      const y = Math.round(data.y)\n\n      Object.assign(floating.style, {\n        position: data.strategy,\n        top: \"0px\",\n        left: \"0px\",\n        transform: `translate3d(${x}px, ${y}px, 0)`,\n      })\n\n      onComplete?.(data)\n    })\n  }\n\n  compute()\n\n  return callAll(\n    options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n    options.onCleanup,\n  )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n  return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...restOptions } = opts\n  const func = defer ? raf : (v: any) => v()\n  const cleanups: (VoidFunction | undefined)[] = []\n  cleanups.push(\n    func(() => {\n      const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n      const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n      cleanups.push(getPlacementImpl(reference, floating, restOptions))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n  ancestorScroll?: boolean\n  ancestorResize?: boolean\n  referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n  (...fns: VoidFunction[]) =>\n  () =>\n    fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n  return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n  el.addEventListener(type, fn, options)\n  return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n  const bool = typeof option === \"boolean\"\n  return {\n    ancestorResize: bool ? option : option.ancestorResize ?? true,\n    ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n    referenceResize: bool ? option : option.referenceResize ?? true,\n  }\n}\n\nexport function autoUpdate(\n  reference: ReferenceElement,\n  floating: HTMLElement,\n  update: () => void,\n  options: boolean | AutoUpdateOptions = false,\n) {\n  const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n  const useAncestors = ancestorScroll || ancestorResize\n  const ancestors: Ancestors = []\n\n  if (useAncestors && isHTMLElement(reference)) {\n    ancestors.push(...getOverflowAncestors(reference))\n  }\n\n  function addResizeListeners() {\n    let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n    if (referenceResize && isHTMLElement(reference)) {\n      cleanups.push(trackElementRect(reference, { onChange: update }))\n    }\n    cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n    return () => cleanups.forEach((fn) => fn())\n  }\n\n  function addScrollListeners() {\n    return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n  }\n\n  return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n  arrowSize: toVar(\"--arrow-size\"),\n  arrowSizeHalf: toVar(\"--arrow-size-half\"),\n  arrowBg: toVar(\"--arrow-background\"),\n  transformOrigin: toVar(\"--transform-origin\"),\n  arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n  top: \"bottom center\",\n  \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n  \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n  bottom: \"top center\",\n  \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n  \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n  left: \"right center\",\n  \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n  \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n  right: \"left center\",\n  \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n  \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOrigin: Middleware = {\n  name: \"transformOrigin\",\n  fn({ placement, elements, middlewareData }) {\n    const { arrow } = middlewareData\n    const transformOrigin = getTransformOrigin(arrow)[placement]\n\n    const { floating } = elements\n    floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n    return {\n      data: { transformOrigin },\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n  name: \"shiftArrow\",\n  fn({ placement, middlewareData }) {\n    const { element: arrow } = opts\n\n    if (middlewareData.arrow) {\n      const { x, y } = middlewareData.arrow\n\n      const dir = placement.split(\"-\")[0] as BasePlacement\n\n      Object.assign(arrow.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n    }\n\n    return {}\n  },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\n\ntype Options = {\n  placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n  bottom: \"rotate(45deg)\",\n  left: \"rotate(135deg)\",\n  top: \"rotate(225deg)\",\n  right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(options: Options) {\n  const { placement = \"bottom\" } = options\n\n  return {\n    arrow: {\n      position: \"absolute\",\n      width: cssVars.arrowSize.reference,\n      height: cssVars.arrowSize.reference,\n      [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n      [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n    } as const,\n\n    arrowTip: {\n      transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\n      background: cssVars.arrowBg.reference,\n      top: \"0\",\n      left: \"0\",\n      width: \"100%\",\n      height: \"100%\",\n      position: \"absolute\",\n      zIndex: \"inherit\",\n    } as const,\n\n    floating: {\n      position: \"absolute\",\n      minWidth: \"max-content\",\n      top: \"0px\",\n      left: \"0px\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["callAll","arrow","transformOrigin","callAll"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/popper",
-  "version": "0.10.5",
+  "version": "0.11.0",
   "description": "Dynamic positioning logic for ui machines",
   "keywords": [
     "js",
@@ -23,10 +23,10 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.4.3",
-    "@zag-js/dom-query": "0.10.5",
-    "@zag-js/element-rect": "0.10.5",
-    "@zag-js/utils": "0.10.5"
+    "@floating-ui/dom": "1.4.4",
+    "@zag-js/dom-query": "0.11.0",
+    "@zag-js/element-rect": "0.11.0",
+    "@zag-js/utils": "0.11.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"
@@ -44,7 +44,7 @@
     "./package.json": "./package.json"
   },
   "scripts": {
-    "build": "vite build -c ../../../vite.config.ts",
+    "build": "tsup",
     "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc --noEmit"
   }

package/dist/auto-update.d.ts

@@ -1,8 +0,0 @@
-import type { Placement, ReferenceElement } from "@floating-ui/dom";
-export type { Placement };
-export type AutoUpdateOptions = {
-    ancestorScroll?: boolean;
-    ancestorResize?: boolean;
-    referenceResize?: boolean;
-};
-export declare function autoUpdate(reference: ReferenceElement, floating: HTMLElement, update: () => void, options?: boolean | AutoUpdateOptions): () => void;

package/dist/auto-update.js

@@ -1,45 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const dom = require('@floating-ui/dom');
-const elementRect = require('@zag-js/element-rect');
-
-const callAll = (...fns) => () => fns.forEach((fn) => fn());
-const isHTMLElement = (el) => {
-  return typeof el === "object" && el !== null && el.nodeType === 1;
-};
-const 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(...dom.getOverflowAncestors(reference));
-  }
-  function addResizeListeners() {
-    let cleanups = [elementRect.trackElementRect(floating, { scope: "size", onChange: update })];
-    if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push(elementRect.trackElementRect(reference, { onChange: 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());
-}
-
-exports.autoUpdate = autoUpdate;

package/dist/auto-update.mjs

@@ -1,41 +0,0 @@
-import { getOverflowAncestors } from '@floating-ui/dom';
-import { trackElementRect } from '@zag-js/element-rect';
-
-const callAll = (...fns) => () => fns.forEach((fn) => fn());
-const isHTMLElement = (el) => {
-  return typeof el === "object" && el !== null && el.nodeType === 1;
-};
-const 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, { scope: "size", onChange: update })];
-    if (referenceResize && isHTMLElement(reference)) {
-      cleanups.push(trackElementRect(reference, { onChange: 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.d.ts

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

package/dist/get-placement.js

@@ -1,126 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
-
-const dom = require('@floating-ui/dom');
-const domQuery = require('@zag-js/dom-query');
-const utils = require('@zag-js/utils');
-const autoUpdate = require('./auto-update.js');
-const middleware = require('./middleware.js');
-
-const defaultOptions = {
-  strategy: "absolute",
-  placement: "bottom",
-  listeners: true,
-  gutter: 8,
-  flip: true,
-  sameWidth: false,
-  overflowPadding: 8
-};
-function getPlacementImpl(reference, floating, opts = {}) {
-  if (!floating || !reference)
-    return;
-  const options = Object.assign({}, defaultOptions, opts);
-  const arrowEl = floating.querySelector("[data-part=arrow]");
-  const middleware$1 = [];
-  const boundary = typeof options.boundary === "function" ? options.boundary() : options.boundary;
-  if (options.flip) {
-    middleware$1.push(
-      dom.flip({
-        boundary,
-        padding: options.overflowPadding
-      })
-    );
-  }
-  if (options.gutter || options.offset) {
-    const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
-    const data = options.offset ? options.offset : { mainAxis: options.gutter };
-    if (data?.mainAxis != null)
-      data.mainAxis += arrowOffset;
-    middleware$1.push(dom.offset(data));
-  }
-  middleware$1.push(
-    dom.shift({
-      boundary,
-      crossAxis: options.overlap,
-      padding: options.overflowPadding
-    })
-  );
-  if (arrowEl) {
-    middleware$1.push(
-      dom.arrow({ element: arrowEl, padding: 8 }),
-      middleware.shiftArrow({ element: arrowEl })
-    );
-  }
-  middleware$1.push(middleware.transformOrigin);
-  middleware$1.push(
-    dom.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"
-          });
-        }
-        if (options.fitViewport) {
-          Object.assign(floating.style, {
-            maxWidth: `${availableWidth}px`,
-            maxHeight: `${availableHeight}px`
-          });
-        }
-      }
-    })
-  );
-  function compute(config = {}) {
-    if (!reference || !floating)
-      return;
-    const { placement, strategy, onComplete } = options;
-    dom.computePosition(reference, floating, {
-      placement,
-      middleware: middleware$1,
-      strategy,
-      ...config
-    }).then((data) => {
-      const x = Math.round(data.x);
-      const y = Math.round(data.y);
-      Object.assign(floating.style, {
-        position: data.strategy,
-        top: "0px",
-        left: "0px",
-        transform: `translate3d(${x}px, ${y}px, 0)`
-      });
-      onComplete?.(data);
-    });
-  }
-  compute();
-  return utils.callAll(
-    options.listeners ? autoUpdate.autoUpdate(reference, floating, compute, options.listeners) : void 0,
-    options.onCleanup
-  );
-}
-function getBasePlacement(placement) {
-  return placement.split("-")[0];
-}
-function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
-  const { defer, ...restOptions } = opts;
-  const func = defer ? domQuery.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?.());
-  };
-}
-
-exports.getBasePlacement = getBasePlacement;
-exports.getPlacement = getPlacement;

package/dist/get-placement.mjs

@@ -1,121 +0,0 @@
-import { flip, offset, shift, arrow, size, computePosition } from '@floating-ui/dom';
-import { raf } from '@zag-js/dom-query';
-import { callAll } from '@zag-js/utils';
-import { autoUpdate } from './auto-update.mjs';
-import { shiftArrow, transformOrigin } from './middleware.mjs';
-
-const defaultOptions = {
-  strategy: "absolute",
-  placement: "bottom",
-  listeners: true,
-  gutter: 8,
-  flip: true,
-  sameWidth: false,
-  overflowPadding: 8
-};
-function getPlacementImpl(reference, floating, opts = {}) {
-  if (!floating || !reference)
-    return;
-  const options = Object.assign({}, defaultOptions, opts);
-  const arrowEl = floating.querySelector("[data-part=arrow]");
-  const middleware = [];
-  const boundary = typeof options.boundary === "function" ? options.boundary() : options.boundary;
-  if (options.flip) {
-    middleware.push(
-      flip({
-        boundary,
-        padding: options.overflowPadding
-      })
-    );
-  }
-  if (options.gutter || options.offset) {
-    const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
-    const data = options.offset ? options.offset : { mainAxis: options.gutter };
-    if (data?.mainAxis != null)
-      data.mainAxis += arrowOffset;
-    middleware.push(offset(data));
-  }
-  middleware.push(
-    shift({
-      boundary,
-      crossAxis: options.overlap,
-      padding: options.overflowPadding
-    })
-  );
-  if (arrowEl) {
-    middleware.push(
-      arrow({ element: arrowEl, padding: 8 }),
-      shiftArrow({ element: arrowEl })
-    );
-  }
-  middleware.push(transformOrigin);
-  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"
-          });
-        }
-        if (options.fitViewport) {
-          Object.assign(floating.style, {
-            maxWidth: `${availableWidth}px`,
-            maxHeight: `${availableHeight}px`
-          });
-        }
-      }
-    })
-  );
-  function compute(config = {}) {
-    if (!reference || !floating)
-      return;
-    const { placement, strategy, onComplete } = options;
-    computePosition(reference, floating, {
-      placement,
-      middleware,
-      strategy,
-      ...config
-    }).then((data) => {
-      const x = Math.round(data.x);
-      const y = Math.round(data.y);
-      Object.assign(floating.style, {
-        position: data.strategy,
-        top: "0px",
-        left: "0px",
-        transform: `translate3d(${x}px, ${y}px, 0)`
-      });
-      onComplete?.(data);
-    });
-  }
-  compute();
-  return callAll(
-    options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
-    options.onCleanup
-  );
-}
-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 { getBasePlacement, getPlacement };