@zag-js/popper 0.19.1 → 0.21.0

package/dist/index.d.mts

@@ -1,13 +1,13 @@
 import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
 export { Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
 
-type AutoUpdateOptions = {
+interface AutoUpdateOptions {
     ancestorScroll?: boolean;
     ancestorResize?: boolean;
     referenceResize?: boolean;
-};
+}
 
-type PositioningOptions = {
+interface PositioningOptions {
     /**
      * The strategy to use for positioning
      */
@@ -64,7 +64,7 @@ type PositioningOptions = {
      * Function called on cleanup of all listeners
      */
     onCleanup?: VoidFunction;
-};
+}
 type BasePlacement = "top" | "right" | "bottom" | "left";
 
 type MaybeRectElement = HTMLElement | VirtualElement | null;
@@ -75,9 +75,9 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
     defer?: boolean;
 }): () => void;
 
-type GetPlacementStylesOptions = {
+interface GetPlacementStylesOptions {
     placement?: Placement;
-};
+}
 declare function getPlacementStyles(options?: PositioningOptions): {
     arrow: {
         readonly [x: string]: string;
@@ -104,6 +104,7 @@ declare function getPlacementStyles(options?: PositioningOptions): {
         readonly top: "0px";
         readonly left: "0px";
         readonly transform: "translate3d(var(--x), var(--y), 0)";
+        readonly zIndex: "var(--z-index)";
     };
 };
 

package/dist/index.d.ts

@@ -1,13 +1,13 @@
 import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
 export { Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
 
-type AutoUpdateOptions = {
+interface AutoUpdateOptions {
     ancestorScroll?: boolean;
     ancestorResize?: boolean;
     referenceResize?: boolean;
-};
+}
 
-type PositioningOptions = {
+interface PositioningOptions {
     /**
      * The strategy to use for positioning
      */
@@ -64,7 +64,7 @@ type PositioningOptions = {
      * Function called on cleanup of all listeners
      */
     onCleanup?: VoidFunction;
-};
+}
 type BasePlacement = "top" | "right" | "bottom" | "left";
 
 type MaybeRectElement = HTMLElement | VirtualElement | null;
@@ -75,9 +75,9 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
     defer?: boolean;
 }): () => void;
 
-type GetPlacementStylesOptions = {
+interface GetPlacementStylesOptions {
     placement?: Placement;
-};
+}
 declare function getPlacementStyles(options?: PositioningOptions): {
     arrow: {
         readonly [x: string]: string;
@@ -104,6 +104,7 @@ declare function getPlacementStyles(options?: PositioningOptions): {
         readonly top: "0px";
         readonly left: "0px";
         readonly transform: "translate3d(var(--x), var(--y), 0)";
+        readonly zIndex: "var(--z-index)";
     };
 };
 

package/dist/index.js

@@ -183,9 +183,9 @@ function getPlacementImpl(reference, floating, opts = {}) {
     })
   );
   function compute(config = {}) {
+    const { placement, strategy, onComplete } = options;
     if (!reference || !floating)
       return;
-    const { placement, strategy, onComplete } = options;
     (0, import_dom2.computePosition)(reference, floating, {
       placement,
       middleware,
@@ -193,9 +193,15 @@ function getPlacementImpl(reference, floating, opts = {}) {
       ...config
     }).then((data) => {
       const x = Math.round(data.x);
-      floating.style.setProperty("--x", `${x}px`);
       const y = Math.round(data.y);
+      floating.style.setProperty("--x", `${x}px`);
       floating.style.setProperty("--y", `${y}px`);
+      const win = (0, import_dom_query.getWindow)(floating);
+      const contentEl = floating.firstElementChild;
+      if (contentEl) {
+        const zIndex = win.getComputedStyle(contentEl).zIndex;
+        floating.style.setProperty("--z-index", zIndex);
+      }
       onComplete?.(data);
     });
   }
@@ -259,7 +265,8 @@ function getPlacementStyles(options = {}) {
       maxHeight: fitViewport ? "var(--available-height)" : void 0,
       top: "0px",
       left: "0px",
-      transform: `translate3d(var(--x), var(--y), 0)`
+      transform: `translate3d(var(--x), var(--y), 0)`,
+      zIndex: "var(--z-index)"
     }
   };
 }

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["export { getBasePlacement, getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport type {\n  AutoUpdateOptions,\n  BasePlacement,\n  Boundary,\n  ComputePositionReturn,\n  Placement,\n  PositioningOptions,\n} from \"./types\"\n","import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll, compact } 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\n    let mainAxis = options.offset?.mainAxis ?? options.gutter\n    let crossAxis = options.offset?.crossAxis\n\n    if (mainAxis != null) mainAxis += arrowOffset\n\n    const offsetOptions = compact({ mainAxis, crossAxis })\n    middleware.push(offset(offsetOptions))\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        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    }),\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      floating.style.setProperty(\"--x\", `${x}px`)\n\n      const y = Math.round(data.y)\n      floating.style.setProperty(\"--y\", `${y}px`)\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\"\nimport type { PositioningOptions } from \"./types\"\n\nexport type GetPlacementStylesOptions = {\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: PositioningOptions = {}) {\n  const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\" } = 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: strategy,\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      transform: `translate3d(var(--x), var(--y), 0)`,\n    } as const,\n  }\n}\n"],"mappings":"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","names":["import_dom","arrow","transformOrigin"]}
+{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["export { getBasePlacement, getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport type {\n  AutoUpdateOptions,\n  BasePlacement,\n  Boundary,\n  ComputePositionReturn,\n  Placement,\n  PositioningOptions,\n} from \"./types\"\n","import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { arrow, computePosition, flip, offset, shift, size, type ComputePositionConfig } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { callAll, compact } 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\n    let mainAxis = options.offset?.mainAxis ?? options.gutter\n    let crossAxis = options.offset?.crossAxis\n\n    if (mainAxis != null) mainAxis += arrowOffset\n\n    const offsetOptions = compact({ mainAxis, crossAxis })\n    middleware.push(offset(offsetOptions))\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        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    }),\n  )\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n    const { placement, strategy, onComplete } = options\n\n    if (!reference || !floating) return\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      floating.style.setProperty(\"--x\", `${x}px`)\n      floating.style.setProperty(\"--y\", `${y}px`)\n\n      const win = getWindow(floating)\n      const contentEl = floating.firstElementChild\n\n      if (contentEl) {\n        const zIndex = win.getComputedStyle(contentEl).zIndex\n        floating.style.setProperty(\"--z-index\", zIndex)\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 interface 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\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\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: PositioningOptions = {}) {\n  const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\" } = 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: strategy,\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      transform: `translate3d(var(--x), var(--y), 0)`,\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["import_dom","arrow","transformOrigin"]}

package/dist/index.mjs

@@ -1,6 +1,6 @@
 // src/get-placement.ts
 import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
-import { raf } from "@zag-js/dom-query";
+import { getWindow, raf } from "@zag-js/dom-query";
 import { callAll as callAll2, compact } from "@zag-js/utils";
 
 // src/auto-update.ts
@@ -155,9 +155,9 @@ function getPlacementImpl(reference, floating, opts = {}) {
     })
   );
   function compute(config = {}) {
+    const { placement, strategy, onComplete } = options;
     if (!reference || !floating)
       return;
-    const { placement, strategy, onComplete } = options;
     computePosition(reference, floating, {
       placement,
       middleware,
@@ -165,9 +165,15 @@ function getPlacementImpl(reference, floating, opts = {}) {
       ...config
     }).then((data) => {
       const x = Math.round(data.x);
-      floating.style.setProperty("--x", `${x}px`);
       const y = Math.round(data.y);
+      floating.style.setProperty("--x", `${x}px`);
       floating.style.setProperty("--y", `${y}px`);
+      const win = getWindow(floating);
+      const contentEl = floating.firstElementChild;
+      if (contentEl) {
+        const zIndex = win.getComputedStyle(contentEl).zIndex;
+        floating.style.setProperty("--z-index", zIndex);
+      }
       onComplete?.(data);
     });
   }
@@ -231,7 +237,8 @@ function getPlacementStyles(options = {}) {
       maxHeight: fitViewport ? "var(--available-height)" : void 0,
       top: "0px",
       left: "0px",
-      transform: `translate3d(var(--x), var(--y), 0)`
+      transform: `translate3d(var(--x), var(--y), 0)`,
+      zIndex: "var(--z-index)"
     }
   };
 }

package/dist/index.mjs.map

@@ -1 +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 { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll, compact } 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\n    let mainAxis = options.offset?.mainAxis ?? options.gutter\n    let crossAxis = options.offset?.crossAxis\n\n    if (mainAxis != null) mainAxis += arrowOffset\n\n    const offsetOptions = compact({ mainAxis, crossAxis })\n    middleware.push(offset(offsetOptions))\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        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    }),\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      floating.style.setProperty(\"--x\", `${x}px`)\n\n      const y = Math.round(data.y)\n      floating.style.setProperty(\"--y\", `${y}px`)\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\"\nimport type { PositioningOptions } from \"./types\"\n\nexport type GetPlacementStylesOptions = {\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: PositioningOptions = {}) {\n  const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\" } = 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: strategy,\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      transform: `translate3d(var(--x), var(--y), 0)`,\n    } as const,\n  }\n}\n"],"mappings":"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","names":["callAll","arrow","transformOrigin","callAll"]}
+{"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 { arrow, computePosition, flip, offset, shift, size, type ComputePositionConfig } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { callAll, compact } 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\n    let mainAxis = options.offset?.mainAxis ?? options.gutter\n    let crossAxis = options.offset?.crossAxis\n\n    if (mainAxis != null) mainAxis += arrowOffset\n\n    const offsetOptions = compact({ mainAxis, crossAxis })\n    middleware.push(offset(offsetOptions))\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        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    }),\n  )\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n    const { placement, strategy, onComplete } = options\n\n    if (!reference || !floating) return\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      floating.style.setProperty(\"--x\", `${x}px`)\n      floating.style.setProperty(\"--y\", `${y}px`)\n\n      const win = getWindow(floating)\n      const contentEl = floating.firstElementChild\n\n      if (contentEl) {\n        const zIndex = win.getComputedStyle(contentEl).zIndex\n        floating.style.setProperty(\"--z-index\", zIndex)\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 interface 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\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\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: PositioningOptions = {}) {\n  const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\" } = 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: strategy,\n      minWidth: sameWidth ? undefined : \"max-content\",\n      width: sameWidth ? \"var(--reference-width)\" : undefined,\n      maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n      maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n      top: \"0px\",\n      left: \"0px\",\n      transform: `translate3d(var(--x), var(--y), 0)`,\n      zIndex: \"var(--z-index)\",\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.19.1",
+  "version": "0.21.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.5.1",
-    "@zag-js/dom-query": "0.19.1",
-    "@zag-js/element-rect": "0.19.1",
-    "@zag-js/utils": "0.19.1"
+    "@floating-ui/dom": "1.5.3",
+    "@zag-js/dom-query": "0.21.0",
+    "@zag-js/element-rect": "0.21.0",
+    "@zag-js/utils": "0.21.0"
   },
   "devDependencies": {
     "clean-package": "2.2.0"

package/src/auto-update.ts

@@ -4,7 +4,7 @@ import { trackElementRect } from "@zag-js/element-rect"
 
 export type { Placement }
 
-export type AutoUpdateOptions = {
+export interface AutoUpdateOptions {
   ancestorScroll?: boolean
   ancestorResize?: boolean
   referenceResize?: boolean

package/src/get-placement.ts

@@ -1,6 +1,6 @@
 import type { Middleware, Placement, VirtualElement } from "@floating-ui/dom"
-import { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom"
-import { raf } from "@zag-js/dom-query"
+import { arrow, computePosition, flip, offset, shift, size, type ComputePositionConfig } from "@floating-ui/dom"
+import { getWindow, raf } from "@zag-js/dom-query"
 import { callAll, compact } from "@zag-js/utils"
 import { autoUpdate } from "./auto-update"
 import { shiftArrow, transformOrigin } from "./middleware"
@@ -90,9 +90,10 @@ function getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, o
    * -----------------------------------------------------------------------------*/
 
   function compute(config: Omit<ComputePositionConfig, "platform"> = {}) {
-    if (!reference || !floating) return
     const { placement, strategy, onComplete } = options
 
+    if (!reference || !floating) return
+
     computePosition(reference, floating, {
       placement,
       middleware,
@@ -100,11 +101,19 @@ function getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, o
       ...config,
     }).then((data) => {
       const x = Math.round(data.x)
-      floating.style.setProperty("--x", `${x}px`)
-
       const y = Math.round(data.y)
+
+      floating.style.setProperty("--x", `${x}px`)
       floating.style.setProperty("--y", `${y}px`)
 
+      const win = getWindow(floating)
+      const contentEl = floating.firstElementChild
+
+      if (contentEl) {
+        const zIndex = win.getComputedStyle(contentEl).zIndex
+        floating.style.setProperty("--z-index", zIndex)
+      }
+
       onComplete?.(data)
     })
   }

package/src/get-styles.ts

@@ -2,7 +2,7 @@ import type { Placement } from "@floating-ui/dom"
 import { cssVars } from "./middleware"
 import type { PositioningOptions } from "./types"
 
-export type GetPlacementStylesOptions = {
+export interface GetPlacementStylesOptions {
   placement?: Placement
 }
 
@@ -45,6 +45,7 @@ export function getPlacementStyles(options: PositioningOptions = {}) {
       top: "0px",
       left: "0px",
       transform: `translate3d(var(--x), var(--y), 0)`,
+      zIndex: "var(--z-index)",
     } as const,
   }
 }

package/src/types.ts

@@ -3,7 +3,7 @@ import type { AutoUpdateOptions } from "./auto-update"
 
 export type { Placement, Boundary, ComputePositionReturn, AutoUpdateOptions }
 
-export type PositioningOptions = {
+export interface PositioningOptions {
   /**
    * The strategy to use for positioning
    */