@zag-js/popper 0.10.5 → 0.11.0

package/dist/index.d.mts

@@ -0,0 +1,106 @@
+import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
+export { Placement } from '@floating-ui/dom';
+
+type AutoUpdateOptions = {
+    ancestorScroll?: boolean;
+    ancestorResize?: boolean;
+    referenceResize?: boolean;
+};
+
+type PositioningOptions = {
+    /**
+     * The strategy to use for positioning
+     */
+    strategy?: "absolute" | "fixed";
+    /**
+     * The initial placement of the floating element
+     */
+    placement?: Placement;
+    /**
+     * The offset of the floating element
+     */
+    offset?: {
+        mainAxis?: number;
+        crossAxis?: number;
+    };
+    /**
+     * The main axis offset or gap between the reference and floating elements
+     */
+    gutter?: number;
+    /**
+     * The virtual padding around the viewport edges to check for overflow
+     */
+    overflowPadding?: number;
+    /**
+     * Whether to flip the placement
+     */
+    flip?: boolean;
+    /**
+     * Whether the floating element can overlap the reference element
+     * @default false
+     */
+    overlap?: boolean;
+    /**
+     * Whether to make the floating element same width as the reference element
+     */
+    sameWidth?: boolean;
+    /**
+     * Whether the popover should fit the viewport.
+     */
+    fitViewport?: boolean;
+    /**
+     * The overflow boundary of the reference element
+     */
+    boundary?: Boundary | (() => Boundary);
+    /**
+     * Options to activate auto-update listeners
+     */
+    listeners?: boolean | AutoUpdateOptions;
+    /**
+     * Function called when the placement is computed
+     */
+    onComplete?(data: ComputePositionReturn): void;
+    /**
+     * Function called on cleanup of all listeners
+     */
+    onCleanup?: VoidFunction;
+};
+type BasePlacement = "top" | "right" | "bottom" | "left";
+
+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;
+
+type Options = {
+    placement?: Placement;
+};
+declare function getPlacementStyles(options: Options): {
+    arrow: {
+        readonly [x: string]: string;
+        readonly position: "absolute";
+        readonly width: string;
+        readonly height: string;
+    };
+    arrowTip: {
+        readonly transform: any;
+        readonly background: string;
+        readonly top: "0";
+        readonly left: "0";
+        readonly width: "100%";
+        readonly height: "100%";
+        readonly position: "absolute";
+        readonly zIndex: "inherit";
+    };
+    floating: {
+        readonly position: "absolute";
+        readonly minWidth: "max-content";
+        readonly top: "0px";
+        readonly left: "0px";
+    };
+};
+
+export { PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };

package/dist/index.d.ts

@@ -1,3 +1,106 @@
-export { getPlacement, getBasePlacement } from "./get-placement";
-export { getPlacementStyles } from "./get-styles";
-export type { Placement, PositioningOptions } from "./types";
+import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
+export { Placement } from '@floating-ui/dom';
+
+type AutoUpdateOptions = {
+    ancestorScroll?: boolean;
+    ancestorResize?: boolean;
+    referenceResize?: boolean;
+};
+
+type PositioningOptions = {
+    /**
+     * The strategy to use for positioning
+     */
+    strategy?: "absolute" | "fixed";
+    /**
+     * The initial placement of the floating element
+     */
+    placement?: Placement;
+    /**
+     * The offset of the floating element
+     */
+    offset?: {
+        mainAxis?: number;
+        crossAxis?: number;
+    };
+    /**
+     * The main axis offset or gap between the reference and floating elements
+     */
+    gutter?: number;
+    /**
+     * The virtual padding around the viewport edges to check for overflow
+     */
+    overflowPadding?: number;
+    /**
+     * Whether to flip the placement
+     */
+    flip?: boolean;
+    /**
+     * Whether the floating element can overlap the reference element
+     * @default false
+     */
+    overlap?: boolean;
+    /**
+     * Whether to make the floating element same width as the reference element
+     */
+    sameWidth?: boolean;
+    /**
+     * Whether the popover should fit the viewport.
+     */
+    fitViewport?: boolean;
+    /**
+     * The overflow boundary of the reference element
+     */
+    boundary?: Boundary | (() => Boundary);
+    /**
+     * Options to activate auto-update listeners
+     */
+    listeners?: boolean | AutoUpdateOptions;
+    /**
+     * Function called when the placement is computed
+     */
+    onComplete?(data: ComputePositionReturn): void;
+    /**
+     * Function called on cleanup of all listeners
+     */
+    onCleanup?: VoidFunction;
+};
+type BasePlacement = "top" | "right" | "bottom" | "left";
+
+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;
+
+type Options = {
+    placement?: Placement;
+};
+declare function getPlacementStyles(options: Options): {
+    arrow: {
+        readonly [x: string]: string;
+        readonly position: "absolute";
+        readonly width: string;
+        readonly height: string;
+    };
+    arrowTip: {
+        readonly transform: any;
+        readonly background: string;
+        readonly top: "0";
+        readonly left: "0";
+        readonly width: "100%";
+        readonly height: "100%";
+        readonly position: "absolute";
+        readonly zIndex: "inherit";
+    };
+    floating: {
+        readonly position: "absolute";
+        readonly minWidth: "max-content";
+        readonly top: "0px";
+        readonly left: "0px";
+    };
+};
+
+export { PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };

package/dist/index.js

@@ -1,12 +1,282 @@
-'use strict';
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
-Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  getBasePlacement: () => getBasePlacement,
+  getPlacement: () => getPlacement,
+  getPlacementStyles: () => getPlacementStyles
+});
+module.exports = __toCommonJS(src_exports);
 
-const getPlacement = require('./get-placement.js');
-const getStyles = require('./get-styles.js');
+// 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
+var import_dom = require("@floating-ui/dom");
+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 = 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(...(0, import_dom.getOverflowAncestors)(reference));
+  }
+  function addResizeListeners() {
+    let cleanups = [(0, import_element_rect.trackElementRect)(floating, { scope: "size", onChange: update })];
+    if (referenceResize && isHTMLElement(reference)) {
+      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());
+  }
+  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 {};
+  }
+});
 
-exports.getBasePlacement = getPlacement.getBasePlacement;
-exports.getPlacement = getPlacement.getPlacement;
-exports.getPlacementStyles = getStyles.getPlacementStyles;
+// 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(
+      (0, import_dom2.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((0, import_dom2.offset)(data));
+  }
+  middleware.push(
+    (0, import_dom2.shift)({
+      boundary,
+      crossAxis: options.overlap,
+      padding: options.overflowPadding
+    })
+  );
+  if (arrowEl) {
+    middleware.push(
+      (0, import_dom2.arrow)({ element: arrowEl, padding: 8 }),
+      shiftArrow({ element: arrowEl })
+    );
+  }
+  middleware.push(transformOrigin);
+  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"
+          });
+        }
+        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;
+    (0, import_dom2.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 (0, import_utils.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 ? 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 = {
+  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"
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getBasePlacement,
+  getPlacement,
+  getPlacementStyles
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement, getBasePlacement } from \"./get-placement\"\nexport { getPlacementStyles } from \"./get-styles\"\nexport type { Placement, PositioningOptions } from \"./types\"\n","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":["import_dom","arrow","transformOrigin"]}