@zag-js/popper 0.67.0 → 0.68.0

package/dist/index.d.mts

@@ -13,6 +13,10 @@ interface AnchorRect {
     height?: number;
 }
 interface PositioningOptions {
+    /**
+     * Whether the popover should be hidden when the reference element is detached
+     */
+    hideWhenDetached?: boolean;
     /**
      * The strategy to use for positioning
      */

package/dist/index.d.ts

@@ -13,6 +13,10 @@ interface AnchorRect {
     height?: number;
 }
 interface PositioningOptions {
+    /**
+     * Whether the popover should be hidden when the reference element is detached
+     */
+    hideWhenDetached?: boolean;
     /**
      * The strategy to use for positioning
      */

package/dist/index.js

@@ -218,6 +218,10 @@ function getSizeMiddleware(opts) {
     }
   });
 }
+function hideWhenDetachedMiddleware(opts) {
+  if (!opts.hideWhenDetached) return;
+  return (0, import_dom.hide)({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" });
+}
 function getAutoUpdateOptions(opts) {
   if (!opts) return {};
   if (opts === true) {
@@ -238,6 +242,7 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     shiftArrowMiddleware(arrowEl),
     transformOriginMiddleware,
     getSizeMiddleware(options),
+    hideWhenDetachedMiddleware(options),
     rectMiddleware
   ];
   const { placement, strategy, onComplete, onPositioned } = options;
@@ -255,6 +260,9 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     const y = roundByDpr(win, pos.y);
     floating.style.setProperty("--x", `${x}px`);
     floating.style.setProperty("--y", `${y}px`);
+    if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {
+      floating.style.setProperty("visibility", "hidden");
+    }
     const contentEl = floating.firstElementChild;
     if (contentEl) {
       const zIndex = win.getComputedStyle(contentEl).zIndex;

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport { getPlacementSide, isValidPlacement } from \"./placement\"\nexport type {\n  AnchorRect,\n  AutoUpdateOptions,\n  Boundary,\n  ComputePositionReturn,\n  Placement,\n  PlacementAlign,\n  PlacementSide,\n  PositioningOptions,\n} from \"./types\"\n","import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n    const { hasAlign } = getPlacementDetails(placement)\n    const shift = !hasAlign ? opts.shift : undefined\n    const crossAxis = opts.offset?.crossAxis ?? shift\n\n    return compact({\n      crossAxis: crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: getBoundaryMiddleware(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: getBoundaryMiddleware(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n    limiter: limitShift(),\n  })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\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  })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\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\n  const middleware: (Middleware | undefined)[] = [\n    getOffsetMiddleware(arrowEl, options),\n    getFlipMiddleware(options),\n    getShiftMiddleware(options),\n    getArrowMiddleware(arrowEl, options),\n    shiftArrowMiddleware(arrowEl),\n    transformOriginMiddleware,\n    getSizeMiddleware(options),\n    rectMiddleware,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = roundByDpr(win, pos.x)\n    const y = roundByDpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\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\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = 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, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\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 transformOriginMiddleware: 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 * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\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(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, 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      // @ts-expect-error - Fix this\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\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      isolation: \"isolate\",\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      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["import_dom_query","arrow","shift"]}
+{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport { getPlacementSide, isValidPlacement } from \"./placement\"\nexport type {\n  AnchorRect,\n  AutoUpdateOptions,\n  Boundary,\n  ComputePositionReturn,\n  Placement,\n  PlacementAlign,\n  PlacementSide,\n  PositioningOptions,\n} from \"./types\"\n","import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : (gutter ?? arrowOffset)\n\n    const { hasAlign } = getPlacementDetails(placement)\n    const shift = !hasAlign ? opts.shift : undefined\n    const crossAxis = opts.offset?.crossAxis ?? shift\n\n    return compact({\n      crossAxis: crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: getBoundaryMiddleware(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: getBoundaryMiddleware(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n    limiter: limitShift(),\n  })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\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  })\n}\n\nfunction hideWhenDetachedMiddleware(opts: PositioningOptions) {\n  if (!opts.hideWhenDetached) return\n  return hide({ strategy: \"referenceHidden\", boundary: opts.boundary?.() ?? \"clippingAncestors\" })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\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\n  const middleware: (Middleware | undefined)[] = [\n    getOffsetMiddleware(arrowEl, options),\n    getFlipMiddleware(options),\n    getShiftMiddleware(options),\n    getArrowMiddleware(arrowEl, options),\n    shiftArrowMiddleware(arrowEl),\n    transformOriginMiddleware,\n    getSizeMiddleware(options),\n    hideWhenDetachedMiddleware(options),\n    rectMiddleware,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = roundByDpr(win, pos.x)\n    const y = roundByDpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\n    if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {\n      floating.style.setProperty(\"visibility\", \"hidden\")\n    }\n\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\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = 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, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\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 transformOriginMiddleware: 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 * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\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(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, 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      // @ts-expect-error - Fix this\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\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      isolation: \"isolate\",\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      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["import_dom_query","arrow","shift"]}

package/dist/index.mjs

@@ -1,5 +1,5 @@
 // src/get-placement.ts
-import { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
+import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom";
 import { getWindow, raf } from "@zag-js/dom-query";
 import { compact, isNull, noop, runIfFn } from "@zag-js/utils";
 
@@ -189,6 +189,10 @@ function getSizeMiddleware(opts) {
     }
   });
 }
+function hideWhenDetachedMiddleware(opts) {
+  if (!opts.hideWhenDetached) return;
+  return hide({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" });
+}
 function getAutoUpdateOptions(opts) {
   if (!opts) return {};
   if (opts === true) {
@@ -209,6 +213,7 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     shiftArrowMiddleware(arrowEl),
     transformOriginMiddleware,
     getSizeMiddleware(options),
+    hideWhenDetachedMiddleware(options),
     rectMiddleware
   ];
   const { placement, strategy, onComplete, onPositioned } = options;
@@ -226,6 +231,9 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
     const y = roundByDpr(win, pos.y);
     floating.style.setProperty("--x", `${x}px`);
     floating.style.setProperty("--y", `${y}px`);
+    if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {
+      floating.style.setProperty("visibility", "hidden");
+    }
     const contentEl = floating.firstElementChild;
     if (contentEl) {
       const zIndex = win.getComputedStyle(contentEl).zIndex;

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n    const { hasAlign } = getPlacementDetails(placement)\n    const shift = !hasAlign ? opts.shift : undefined\n    const crossAxis = opts.offset?.crossAxis ?? shift\n\n    return compact({\n      crossAxis: crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: getBoundaryMiddleware(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: getBoundaryMiddleware(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n    limiter: limitShift(),\n  })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\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  })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\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\n  const middleware: (Middleware | undefined)[] = [\n    getOffsetMiddleware(arrowEl, options),\n    getFlipMiddleware(options),\n    getShiftMiddleware(options),\n    getArrowMiddleware(arrowEl, options),\n    shiftArrowMiddleware(arrowEl),\n    transformOriginMiddleware,\n    getSizeMiddleware(options),\n    rectMiddleware,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = roundByDpr(win, pos.x)\n    const y = roundByDpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\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\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = 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, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\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 transformOriginMiddleware: 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 * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\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(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, 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      // @ts-expect-error - Fix this\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\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      isolation: \"isolate\",\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      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["arrow","shift"]}
+{"version":3,"sources":["../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n  strategy: \"absolute\",\n  placement: \"bottom\",\n  listeners: true,\n  gutter: 8,\n  flip: true,\n  slide: true,\n  overlap: false,\n  sameWidth: false,\n  fitViewport: false,\n  overflowPadding: 8,\n  arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n  const dpr = win.devicePixelRatio || 1\n  return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n  return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (!arrowElement) return\n  return arrow({\n    element: arrowElement,\n    padding: opts.arrowPadding,\n  })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n  if (isNull(opts.offset ?? opts.gutter)) return\n  return offset(({ placement }) => {\n    const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n    const gutter = opts.offset?.mainAxis ?? opts.gutter\n    const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : (gutter ?? arrowOffset)\n\n    const { hasAlign } = getPlacementDetails(placement)\n    const shift = !hasAlign ? opts.shift : undefined\n    const crossAxis = opts.offset?.crossAxis ?? shift\n\n    return compact({\n      crossAxis: crossAxis,\n      mainAxis: mainAxis,\n      alignmentAxis: opts.shift,\n    })\n  })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n  if (!opts.flip) return\n  return flip({\n    boundary: getBoundaryMiddleware(opts),\n    padding: opts.overflowPadding,\n    fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n  })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n  if (!opts.slide && !opts.overlap) return\n  return shift({\n    boundary: getBoundaryMiddleware(opts),\n    mainAxis: opts.slide,\n    crossAxis: opts.overlap,\n    padding: opts.overflowPadding,\n    limiter: limitShift(),\n  })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n  return size({\n    padding: opts.overflowPadding,\n    apply({ elements, rects, availableHeight, availableWidth }) {\n      const floating = elements.floating\n\n      const referenceWidth = Math.round(rects.reference.width)\n      availableWidth = Math.floor(availableWidth)\n      availableHeight = Math.floor(availableHeight)\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  })\n}\n\nfunction hideWhenDetachedMiddleware(opts: PositioningOptions) {\n  if (!opts.hideWhenDetached) return\n  return hide({ strategy: \"referenceHidden\", boundary: opts.boundary?.() ?? \"clippingAncestors\" })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n  if (!opts) return {}\n  if (opts === true) {\n    return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n  }\n  return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n  if (!floating || !reference) return\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\n  const middleware: (Middleware | undefined)[] = [\n    getOffsetMiddleware(arrowEl, options),\n    getFlipMiddleware(options),\n    getShiftMiddleware(options),\n    getArrowMiddleware(arrowEl, options),\n    shiftArrowMiddleware(arrowEl),\n    transformOriginMiddleware,\n    getSizeMiddleware(options),\n    hideWhenDetachedMiddleware(options),\n    rectMiddleware,\n  ]\n\n  /* -----------------------------------------------------------------------------\n   * The actual positioning function\n   * -----------------------------------------------------------------------------*/\n\n  const { placement, strategy, onComplete, onPositioned } = options\n\n  const updatePosition = async () => {\n    if (!reference || !floating) return\n\n    const pos = await computePosition(reference, floating, {\n      placement,\n      middleware,\n      strategy,\n    })\n\n    onComplete?.(pos)\n    onPositioned?.({ placed: true })\n\n    const win = getWindow(floating)\n    const x = roundByDpr(win, pos.x)\n    const y = roundByDpr(win, pos.y)\n\n    floating.style.setProperty(\"--x\", `${x}px`)\n    floating.style.setProperty(\"--y\", `${y}px`)\n\n    if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {\n      floating.style.setProperty(\"visibility\", \"hidden\")\n    }\n\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\n  const update = async () => {\n    if (opts.updatePosition) {\n      await opts.updatePosition({ updatePosition })\n      onPositioned?.({ placed: true })\n    } else {\n      await updatePosition()\n    }\n  }\n\n  const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n  const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n  update()\n\n  return () => {\n    cancelAutoUpdate?.()\n    onPositioned?.({ placed: false })\n  }\n}\n\nexport function getPlacement(\n  referenceOrFn: MaybeFn<MaybeRectElement>,\n  floatingOrFn: MaybeFn<MaybeElement>,\n  opts: PositioningOptions & { defer?: boolean } = {},\n) {\n  const { defer, ...options } = 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, options))\n    }),\n  )\n  return () => {\n    cleanups.forEach((fn) => fn?.())\n  }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n  if (typeof DOMRect === \"function\") {\n    return new DOMRect(x, y, width, height)\n  }\n  const rect = {\n    x,\n    y,\n    width,\n    height,\n    top: y,\n    right: x + width,\n    bottom: y + height,\n    left: x,\n  }\n  return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n  if (!anchorRect) return createDOMRect()\n  const { x, y, width, height } = anchorRect\n  return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n  anchorElement: MaybeRectElement,\n  getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n  return {\n    contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n    getBoundingClientRect: () => {\n      const anchor = anchorElement\n      const anchorRect = getAnchorRect?.(anchor)\n      if (anchorRect || !anchor) {\n        return getDOMRect(anchorRect)\n      }\n      return anchor.getBoundingClientRect()\n    },\n  }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\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 transformOriginMiddleware: 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 * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n  name: \"rects\",\n  fn({ rects }) {\n    return {\n      data: rects,\n    }\n  },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n  if (!arrowEl) return\n  return {\n    name: \"shiftArrow\",\n    fn({ placement, middlewareData }) {\n      if (!middlewareData.arrow) return {}\n      const { x, y } = middlewareData.arrow\n      const dir = placement.split(\"-\")[0] as PlacementSide\n\n      Object.assign(arrowEl.style, {\n        left: x != null ? `${x}px` : \"\",\n        top: y != null ? `${y}px` : \"\",\n        [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n      })\n\n      return {}\n    },\n  }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n  return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n  const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n  return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n  return placement.split(\"-\")[0] as PlacementSide\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(\n  options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n  const { placement, 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      // @ts-expect-error - Fix this\n      transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\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      isolation: \"isolate\",\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      // move off-screen if placement is not defined\n      transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n      zIndex: \"var(--z-index)\",\n    } as const,\n  }\n}\n"],"mappings":"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","names":["arrow","shift"]}

package/package.json

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

package/src/get-placement.ts

@@ -1,5 +1,5 @@
 import type { AutoUpdateOptions, Middleware } from "@floating-ui/dom"
-import { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom"
+import { arrow, autoUpdate, computePosition, flip, hide, limitShift, offset, shift, size } from "@floating-ui/dom"
 import { getWindow, raf } from "@zag-js/dom-query"
 import { compact, isNull, noop, runIfFn } from "@zag-js/utils"
 import { getAnchorElement } from "./get-anchor"
@@ -44,7 +44,7 @@ function getOffsetMiddleware(arrowElement: HTMLElement | null, opts: Positioning
     const arrowOffset = (arrowElement?.clientHeight || 0) / 2
 
     const gutter = opts.offset?.mainAxis ?? opts.gutter
-    const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset
+    const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : (gutter ?? arrowOffset)
 
     const { hasAlign } = getPlacementDetails(placement)
     const shift = !hasAlign ? opts.shift : undefined
@@ -95,6 +95,11 @@ function getSizeMiddleware(opts: PositioningOptions) {
   })
 }
 
+function hideWhenDetachedMiddleware(opts: PositioningOptions) {
+  if (!opts.hideWhenDetached) return
+  return hide({ strategy: "referenceHidden", boundary: opts.boundary?.() ?? "clippingAncestors" })
+}
+
 function getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {
   if (!opts) return {}
   if (opts === true) {
@@ -122,6 +127,7 @@ function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeE
     shiftArrowMiddleware(arrowEl),
     transformOriginMiddleware,
     getSizeMiddleware(options),
+    hideWhenDetachedMiddleware(options),
     rectMiddleware,
   ]
 
@@ -150,6 +156,10 @@ function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeE
     floating.style.setProperty("--x", `${x}px`)
     floating.style.setProperty("--y", `${y}px`)
 
+    if (options.hideWhenDetached && pos.middlewareData.hide?.referenceHidden) {
+      floating.style.setProperty("visibility", "hidden")
+    }
+
     const contentEl = floating.firstElementChild
 
     if (contentEl) {

package/src/types.ts

@@ -17,6 +17,10 @@ export interface AnchorRect {
 }
 
 export interface PositioningOptions {
+  /**
+   * Whether the popover should be hidden when the reference element is detached
+   */
+  hideWhenDetached?: boolean
   /**
    * The strategy to use for positioning
    */