@zag-js/popper 0.0.0-dev-20230822174453 → 0.0.0-dev-20230823143850

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 (8) hide show
  1. package/dist/index.d.mts +9 -1
  2. package/dist/index.d.ts +9 -1
  3. package/dist/index.js +4 -1
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +4 -1
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +4 -4
  8. package/src/get-styles.ts +9 -2
package/dist/index.d.mts CHANGED
@@ -78,7 +78,13 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
78
78
  type GetPlacementStylesOptions = {
79
79
  placement?: Placement;
80
80
  };
81
- declare function getPlacementStyles(options?: PositioningOptions): {
81
+ type PlacementStyleOptions = PositioningOptions & {
82
+ anchorPoint?: {
83
+ x: number;
84
+ y: number;
85
+ } | null;
86
+ };
87
+ declare function getPlacementStyles(options?: PlacementStyleOptions): {
82
88
  arrow: {
83
89
  readonly [x: string]: string;
84
90
  readonly position: "absolute";
@@ -103,6 +109,8 @@ declare function getPlacementStyles(options?: PositioningOptions): {
103
109
  readonly maxHeight: "var(--available-height)" | undefined;
104
110
  readonly top: "0px";
105
111
  readonly left: "0px";
112
+ readonly "--x": `${number}px`;
113
+ readonly "--y": `${number}px`;
106
114
  readonly transform: "translate3d(var(--x), var(--y), 0)";
107
115
  };
108
116
  };
package/dist/index.d.ts CHANGED
@@ -78,7 +78,13 @@ declare function getPlacement(referenceOrFn: MaybeFn<MaybeRectElement>, floating
78
78
  type GetPlacementStylesOptions = {
79
79
  placement?: Placement;
80
80
  };
81
- declare function getPlacementStyles(options?: PositioningOptions): {
81
+ type PlacementStyleOptions = PositioningOptions & {
82
+ anchorPoint?: {
83
+ x: number;
84
+ y: number;
85
+ } | null;
86
+ };
87
+ declare function getPlacementStyles(options?: PlacementStyleOptions): {
82
88
  arrow: {
83
89
  readonly [x: string]: string;
84
90
  readonly position: "absolute";
@@ -103,6 +109,8 @@ declare function getPlacementStyles(options?: PositioningOptions): {
103
109
  readonly maxHeight: "var(--available-height)" | undefined;
104
110
  readonly top: "0px";
105
111
  readonly left: "0px";
112
+ readonly "--x": `${number}px`;
113
+ readonly "--y": `${number}px`;
106
114
  readonly transform: "translate3d(var(--x), var(--y), 0)";
107
115
  };
108
116
  };
package/dist/index.js CHANGED
@@ -230,7 +230,8 @@ var ARROW_FLOATING_STYLE = {
230
230
  right: "rotate(315deg)"
231
231
  };
232
232
  function getPlacementStyles(options = {}) {
233
- const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute" } = options;
233
+ const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute", anchorPoint } = options;
234
+ const point = anchorPoint || { x: 0, y: 0 };
234
235
  return {
235
236
  arrow: {
236
237
  position: "absolute",
@@ -257,6 +258,8 @@ function getPlacementStyles(options = {}) {
257
258
  maxHeight: fitViewport ? "var(--available-height)" : void 0,
258
259
  top: "0px",
259
260
  left: "0px",
261
+ "--x": `${point.x}px`,
262
+ "--y": `${point.y}px`,
260
263
  transform: `translate3d(var(--x), var(--y), 0)`
261
264
  }
262
265
  };
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["export { getBasePlacement, getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport type {\n AutoUpdateOptions,\n BasePlacement,\n Boundary,\n ComputePositionReturn,\n Placement,\n PositioningOptions,\n} from \"./types\"\n","import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n floating.style.setProperty(\"--x\", `${x}px`)\n\n const y = Math.round(data.y)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOrigin: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport type GetPlacementStylesOptions = {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(options: PositioningOptions = {}) {\n const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n transform: `translate3d(var(--x), var(--y), 0)`,\n } as const,\n }\n}\n"],"mappings":"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","names":["import_dom","arrow","transformOrigin"]}
1
+ {"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["export { getBasePlacement, getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport type {\n AutoUpdateOptions,\n BasePlacement,\n Boundary,\n ComputePositionReturn,\n Placement,\n PositioningOptions,\n} from \"./types\"\n","import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n floating.style.setProperty(\"--x\", `${x}px`)\n\n const y = Math.round(data.y)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOrigin: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport type GetPlacementStylesOptions = {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\ntype PlacementStyleOptions = PositioningOptions & {\n anchorPoint?: { x: number; y: number } | null\n}\n\nexport function getPlacementStyles(options: PlacementStyleOptions = {}) {\n const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\", anchorPoint } = options\n const point = anchorPoint || { x: 0, y: 0 }\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n \"--x\": `${point.x}px`,\n \"--y\": `${point.y}px`,\n transform: `translate3d(var(--x), var(--y), 0)`,\n } as const,\n }\n}\n"],"mappings":"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","names":["import_dom","arrow","transformOrigin"]}
package/dist/index.mjs CHANGED
@@ -202,7 +202,8 @@ var ARROW_FLOATING_STYLE = {
202
202
  right: "rotate(315deg)"
203
203
  };
204
204
  function getPlacementStyles(options = {}) {
205
- const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute" } = options;
205
+ const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute", anchorPoint } = options;
206
+ const point = anchorPoint || { x: 0, y: 0 };
206
207
  return {
207
208
  arrow: {
208
209
  position: "absolute",
@@ -229,6 +230,8 @@ function getPlacementStyles(options = {}) {
229
230
  maxHeight: fitViewport ? "var(--available-height)" : void 0,
230
231
  top: "0px",
231
232
  left: "0px",
233
+ "--x": `${point.x}px`,
234
+ "--y": `${point.y}px`,
232
235
  transform: `translate3d(var(--x), var(--y), 0)`
233
236
  }
234
237
  };
package/dist/index.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n floating.style.setProperty(\"--x\", `${x}px`)\n\n const y = Math.round(data.y)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOrigin: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport type GetPlacementStylesOptions = {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(options: PositioningOptions = {}) {\n const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n transform: `translate3d(var(--x), var(--y), 0)`,\n } as const,\n }\n}\n"],"mappings":"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","names":["callAll","arrow","transformOrigin","callAll"]}
1
+ {"version":3,"sources":["../src/get-placement.ts","../src/auto-update.ts","../src/middleware.ts","../src/get-styles.ts"],"sourcesContent":["import type { Middleware, Placement, VirtualElement } from \"@floating-ui/dom\"\nimport { type ComputePositionConfig, arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { raf } from \"@zag-js/dom-query\"\nimport { callAll } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\nimport { shiftArrow, transformOrigin } from \"./middleware\"\nimport type { BasePlacement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n sameWidth: false,\n overflowPadding: 8,\n}\n\ntype MaybeRectElement = HTMLElement | VirtualElement | null\ntype MaybeElement = HTMLElement | null\ntype MaybeFn<T> = T | (() => T)\n\nfunction getPlacementImpl(reference: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n if (!floating || !reference) return\n\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n const middleware: Middleware[] = []\n\n const boundary = typeof options.boundary === \"function\" ? options.boundary() : options.boundary\n\n if (options.flip) {\n middleware.push(\n flip({\n boundary,\n padding: options.overflowPadding,\n }),\n )\n }\n\n if (options.gutter || options.offset) {\n const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0\n const data = options.offset ? options.offset : { mainAxis: options.gutter }\n if (data?.mainAxis != null) data.mainAxis += arrowOffset\n middleware.push(offset(data))\n }\n\n middleware.push(\n shift({\n boundary,\n crossAxis: options.overlap,\n padding: options.overflowPadding,\n }),\n )\n\n if (arrowEl) {\n // prettier-ignore\n middleware.push(\n arrow({ element: arrowEl, padding: 8 }),\n shiftArrow({ element: arrowEl }),\n )\n }\n\n middleware.push(transformOrigin)\n\n middleware.push(\n size({\n padding: options.overflowPadding,\n apply({ rects, availableHeight, availableWidth }) {\n const referenceWidth = Math.round(rects.reference.width)\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n }),\n )\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n function compute(config: Omit<ComputePositionConfig, \"platform\"> = {}) {\n if (!reference || !floating) return\n const { placement, strategy, onComplete } = options\n\n computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n ...config,\n }).then((data) => {\n const x = Math.round(data.x)\n floating.style.setProperty(\"--x\", `${x}px`)\n\n const y = Math.round(data.y)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n onComplete?.(data)\n })\n }\n\n compute()\n\n return callAll(\n options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : undefined,\n options.onCleanup,\n )\n}\n\nexport function getBasePlacement(placement: Placement): BasePlacement {\n return placement.split(\"-\")[0] as BasePlacement\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...restOptions } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, restOptions))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import type { Placement, ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\n\nexport type { Placement }\n\nexport type AutoUpdateOptions = {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\n\nconst callAll =\n (...fns: VoidFunction[]) =>\n () =>\n fns.forEach((fn) => fn())\n\nconst isHTMLElement = (el: any): el is HTMLElement => {\n return typeof el === \"object\" && el !== null && el.nodeType === 1\n}\n\nconst addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {\n el.addEventListener(type, fn, options)\n return () => el.removeEventListener(type, fn, options)\n}\n\nfunction resolveOptions(option: boolean | AutoUpdateOptions) {\n const bool = typeof option === \"boolean\"\n return {\n ancestorResize: bool ? option : option.ancestorResize ?? true,\n ancestorScroll: bool ? option : option.ancestorScroll ?? true,\n referenceResize: bool ? option : option.referenceResize ?? true,\n }\n}\n\nexport function autoUpdate(\n reference: ReferenceElement,\n floating: HTMLElement,\n update: () => void,\n options: boolean | AutoUpdateOptions = false,\n) {\n const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)\n\n const useAncestors = ancestorScroll || ancestorResize\n const ancestors: Ancestors = []\n\n if (useAncestors && isHTMLElement(reference)) {\n ancestors.push(...getOverflowAncestors(reference))\n }\n\n function addResizeListeners() {\n let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: \"size\", onChange: update })]\n if (referenceResize && isHTMLElement(reference)) {\n cleanups.push(trackElementRect(reference, { onChange: update }))\n }\n cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, \"resize\", update))))\n return () => cleanups.forEach((fn) => fn())\n }\n\n function addScrollListeners() {\n return callAll(...ancestors.map((el: any) => addDomEvent(el, \"scroll\", update, { passive: true })))\n }\n\n return callAll(addResizeListeners(), addScrollListeners())\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOrigin: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\ntype ArrowOptions = { element: HTMLElement }\n\ntype BasePlacement = \"top\" | \"bottom\" | \"left\" | \"right\"\n\nexport const shiftArrow = (opts: ArrowOptions): Middleware => ({\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n const { element: arrow } = opts\n\n if (middlewareData.arrow) {\n const { x, y } = middlewareData.arrow\n\n const dir = placement.split(\"-\")[0] as BasePlacement\n\n Object.assign(arrow.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n }\n\n return {}\n },\n})\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport type GetPlacementStylesOptions = {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\ntype PlacementStyleOptions = PositioningOptions & {\n anchorPoint?: { x: number; y: number } | null\n}\n\nexport function getPlacementStyles(options: PlacementStyleOptions = {}) {\n const { placement = \"bottom\", sameWidth, fitViewport, strategy = \"absolute\", anchorPoint } = options\n const point = anchorPoint || { x: 0, y: 0 }\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: ARROW_FLOATING_STYLE[placement.split(\"-\")[0]],\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n \"--x\": `${point.x}px`,\n \"--y\": `${point.y}px`,\n transform: `translate3d(var(--x), var(--y), 0)`,\n } as const,\n }\n}\n"],"mappings":"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","names":["callAll","arrow","transformOrigin","callAll"]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/popper",
3
- "version": "0.0.0-dev-20230822174453",
3
+ "version": "0.0.0-dev-20230823143850",
4
4
  "description": "Dynamic positioning logic for ui machines",
5
5
  "keywords": [
6
6
  "js",
@@ -24,9 +24,9 @@
24
24
  },
25
25
  "dependencies": {
26
26
  "@floating-ui/dom": "1.5.1",
27
- "@zag-js/dom-query": "0.0.0-dev-20230822174453",
28
- "@zag-js/element-rect": "0.0.0-dev-20230822174453",
29
- "@zag-js/utils": "0.0.0-dev-20230822174453"
27
+ "@zag-js/dom-query": "0.0.0-dev-20230823143850",
28
+ "@zag-js/element-rect": "0.0.0-dev-20230823143850",
29
+ "@zag-js/utils": "0.0.0-dev-20230823143850"
30
30
  },
31
31
  "devDependencies": {
32
32
  "clean-package": "2.2.0"
package/src/get-styles.ts CHANGED
@@ -13,8 +13,13 @@ const ARROW_FLOATING_STYLE = {
13
13
  right: "rotate(315deg)",
14
14
  } as const
15
15
 
16
- export function getPlacementStyles(options: PositioningOptions = {}) {
17
- const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute" } = options
16
+ type PlacementStyleOptions = PositioningOptions & {
17
+ anchorPoint?: { x: number; y: number } | null
18
+ }
19
+
20
+ export function getPlacementStyles(options: PlacementStyleOptions = {}) {
21
+ const { placement = "bottom", sameWidth, fitViewport, strategy = "absolute", anchorPoint } = options
22
+ const point = anchorPoint || { x: 0, y: 0 }
18
23
 
19
24
  return {
20
25
  arrow: {
@@ -44,6 +49,8 @@ export function getPlacementStyles(options: PositioningOptions = {}) {
44
49
  maxHeight: fitViewport ? "var(--available-height)" : undefined,
45
50
  top: "0px",
46
51
  left: "0px",
52
+ "--x": `${point.x}px`,
53
+ "--y": `${point.y}px`,
47
54
  transform: `translate3d(var(--x), var(--y), 0)`,
48
55
  } as const,
49
56
  }