@zag-js/popper 0.36.3 → 0.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/index.d.mts +2 -2
  2. package/dist/index.d.ts +2 -2
  3. package/dist/index.js +10 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +10 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +4 -4
  8. package/src/get-placement.ts +2 -3
  9. package/src/get-styles.ts +3 -1
  10. package/src/middleware.ts +13 -0
  11. package/src/types.ts +1 -1
package/dist/index.d.mts CHANGED
@@ -85,7 +85,7 @@ interface PositioningOptions {
85
85
  placed: boolean;
86
86
  }): void;
87
87
  /**
88
- * Function that returns the anchor rect of the combobox
88
+ * Function that returns the anchor rect
89
89
  */
90
90
  getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null;
91
91
  /**
@@ -104,7 +104,7 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
104
104
  interface GetPlacementStylesOptions {
105
105
  placement?: Placement;
106
106
  }
107
- declare function getPlacementStyles(options?: PositioningOptions): {
107
+ declare function getPlacementStyles(options?: Pick<PositioningOptions, "placement" | "sameWidth" | "fitViewport" | "strategy">): {
108
108
  arrow: {
109
109
  readonly [x: string]: string;
110
110
  readonly position: "absolute";
package/dist/index.d.ts CHANGED
@@ -85,7 +85,7 @@ interface PositioningOptions {
85
85
  placed: boolean;
86
86
  }): void;
87
87
  /**
88
- * Function that returns the anchor rect of the combobox
88
+ * Function that returns the anchor rect
89
89
  */
90
90
  getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null;
91
91
  /**
@@ -104,7 +104,7 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
104
104
  interface GetPlacementStylesOptions {
105
105
  placement?: Placement;
106
106
  }
107
- declare function getPlacementStyles(options?: PositioningOptions): {
107
+ declare function getPlacementStyles(options?: Pick<PositioningOptions, "placement" | "sameWidth" | "fitViewport" | "strategy">): {
108
108
  arrow: {
109
109
  readonly [x: string]: string;
110
110
  readonly position: "absolute";
package/dist/index.js CHANGED
@@ -105,6 +105,14 @@ var __transformOrigin = {
105
105
  };
106
106
  }
107
107
  };
108
+ var __rects = {
109
+ name: "rects",
110
+ fn({ rects }) {
111
+ return {
112
+ data: rects
113
+ };
114
+ }
115
+ };
108
116
  var __shiftArrow = (arrowEl) => {
109
117
  if (!arrowEl)
110
118
  return;
@@ -235,7 +243,8 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
235
243
  __arrow(arrowEl, options),
236
244
  __shiftArrow(arrowEl),
237
245
  __transformOrigin,
238
- __size(options)
246
+ __size(options),
247
+ __rects
239
248
  ];
240
249
  const { placement, strategy, onComplete, onPositioned } = options;
241
250
  const updatePosition = async () => {
package/dist/index.js.map CHANGED
@@ -1 +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, 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 { __shiftArrow, __transformOrigin } 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 __dpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction __boundary(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction __offset(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\n return compact({\n crossAxis: hasAlign ? opts.shift : undefined,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction __flip(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: __boundary(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction __shift(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: __boundary(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n })\n}\n\nfunction __size(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\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\n const middleware: (Middleware | undefined)[] = [\n __offset(arrowEl, options),\n __flip(options),\n __shift(options),\n __arrow(arrowEl, options),\n __shiftArrow(arrowEl),\n __transformOrigin,\n __size(options),\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 = __dpr(win, pos.x)\n const y = __dpr(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 __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\nexport const __shiftArrow = (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(options: PositioningOptions = {}) {\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 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"]}
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, 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 { __rects, __shiftArrow, __transformOrigin } 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 __dpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction __boundary(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction __offset(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\n return compact({\n crossAxis: hasAlign ? opts.shift : undefined,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction __flip(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: __boundary(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction __shift(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: __boundary(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n })\n}\n\nfunction __size(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 __offset(arrowEl, options),\n __flip(options),\n __shift(options),\n __arrow(arrowEl, options),\n __shiftArrow(arrowEl),\n __transformOrigin,\n __size(options),\n __rects,\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 = __dpr(win, pos.x)\n const y = __dpr(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 __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 * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const __rects: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const __shiftArrow = (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 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"]}
package/dist/index.mjs CHANGED
@@ -76,6 +76,14 @@ var __transformOrigin = {
76
76
  };
77
77
  }
78
78
  };
79
+ var __rects = {
80
+ name: "rects",
81
+ fn({ rects }) {
82
+ return {
83
+ data: rects
84
+ };
85
+ }
86
+ };
79
87
  var __shiftArrow = (arrowEl) => {
80
88
  if (!arrowEl)
81
89
  return;
@@ -206,7 +214,8 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
206
214
  __arrow(arrowEl, options),
207
215
  __shiftArrow(arrowEl),
208
216
  __transformOrigin,
209
- __size(options)
217
+ __size(options),
218
+ __rects
210
219
  ];
211
220
  const { placement, strategy, onComplete, onPositioned } = options;
212
221
  const updatePosition = async () => {
package/dist/index.mjs.map CHANGED
@@ -1 +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, 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 { __shiftArrow, __transformOrigin } 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 __dpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction __boundary(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction __offset(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\n return compact({\n crossAxis: hasAlign ? opts.shift : undefined,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction __flip(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: __boundary(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction __shift(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: __boundary(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n })\n}\n\nfunction __size(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\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\n const middleware: (Middleware | undefined)[] = [\n __offset(arrowEl, options),\n __flip(options),\n __shift(options),\n __arrow(arrowEl, options),\n __shiftArrow(arrowEl),\n __transformOrigin,\n __size(options),\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 = __dpr(win, pos.x)\n const y = __dpr(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 __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\nexport const __shiftArrow = (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(options: PositioningOptions = {}) {\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 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"]}
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, 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 { __rects, __shiftArrow, __transformOrigin } 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 __dpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction __boundary(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction __arrow(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction __offset(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\n return compact({\n crossAxis: hasAlign ? opts.shift : undefined,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction __flip(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: __boundary(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction __shift(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: __boundary(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n })\n}\n\nfunction __size(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 __offset(arrowEl, options),\n __flip(options),\n __shift(options),\n __arrow(arrowEl, options),\n __shiftArrow(arrowEl),\n __transformOrigin,\n __size(options),\n __rects,\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 = __dpr(win, pos.x)\n const y = __dpr(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 __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 * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const __rects: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const __shiftArrow = (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 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"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/popper",
3
- "version": "0.36.3",
3
+ "version": "0.37.0",
4
4
  "description": "Dynamic positioning logic for ui machines",
5
5
  "keywords": [
6
6
  "js",
@@ -23,9 +23,9 @@
23
23
  "url": "https://github.com/chakra-ui/zag/issues"
24
24
  },
25
25
  "dependencies": {
26
- "@floating-ui/dom": "1.6.2",
27
- "@zag-js/dom-query": "0.36.3",
28
- "@zag-js/utils": "0.36.3"
26
+ "@floating-ui/dom": "1.6.3",
27
+ "@zag-js/dom-query": "0.37.0",
28
+ "@zag-js/utils": "0.37.0"
29
29
  },
30
30
  "devDependencies": {
31
31
  "clean-package": "2.2.0"
package/src/get-placement.ts CHANGED
@@ -3,7 +3,7 @@ import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from "@
3
3
  import { getWindow, raf } from "@zag-js/dom-query"
4
4
  import { compact, isNull, noop, runIfFn } from "@zag-js/utils"
5
5
  import { getAnchorElement } from "./get-anchor"
6
- import { __shiftArrow, __transformOrigin } from "./middleware"
6
+ import { __rects, __shiftArrow, __transformOrigin } from "./middleware"
7
7
  import { getPlacementDetails } from "./placement"
8
8
  import type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from "./types"
9
9
 
@@ -102,9 +102,7 @@ function getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOpt
102
102
 
103
103
  function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {
104
104
  const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)
105
-
106
105
  if (!floating || !reference) return
107
-
108
106
  const options = Object.assign({}, defaultOptions, opts)
109
107
 
110
108
  /* -----------------------------------------------------------------------------
@@ -121,6 +119,7 @@ function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeE
121
119
  __shiftArrow(arrowEl),
122
120
  __transformOrigin,
123
121
  __size(options),
122
+ __rects,
124
123
  ]
125
124
 
126
125
  /* -----------------------------------------------------------------------------
package/src/get-styles.ts CHANGED
@@ -13,7 +13,9 @@ const ARROW_FLOATING_STYLE = {
13
13
  right: "rotate(315deg)",
14
14
  } as const
15
15
 
16
- export function getPlacementStyles(options: PositioningOptions = {}) {
16
+ export function getPlacementStyles(
17
+ options: Pick<PositioningOptions, "placement" | "sameWidth" | "fitViewport" | "strategy"> = {},
18
+ ) {
17
19
  const { placement, sameWidth, fitViewport, strategy = "absolute" } = options
18
20
 
19
21
  return {
package/src/middleware.ts CHANGED
@@ -49,6 +49,19 @@ export const __transformOrigin: Middleware = {
49
49
  },
50
50
  }
51
51
 
52
+ /* -----------------------------------------------------------------------------
53
+ * Rect Middleware (to expose the rect data)
54
+ * -----------------------------------------------------------------------------*/
55
+
56
+ export const __rects: Middleware = {
57
+ name: "rects",
58
+ fn({ rects }) {
59
+ return {
60
+ data: rects,
61
+ }
62
+ },
63
+ }
64
+
52
65
  /* -----------------------------------------------------------------------------
53
66
  * Arrow Middleware
54
67
  * -----------------------------------------------------------------------------*/
package/src/types.ts CHANGED
@@ -84,7 +84,7 @@ export interface PositioningOptions {
84
84
  */
85
85
  onPositioned?(data: { placed: boolean }): void
86
86
  /**
87
- * Function that returns the anchor rect of the combobox
87
+ * Function that returns the anchor rect
88
88
  */
89
89
  getAnchorRect?: (element: HTMLElement | VirtualElement | null) => AnchorRect | null
90
90
  /**