@zag-js/popper 0.34.0 → 0.36.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.
- package/dist/index.d.mts +3 -9
- package/dist/index.d.ts +3 -9
- package/dist/index.js +24 -53
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +14 -43
- package/dist/index.mjs.map +1 -1
- package/package.json +4 -5
- package/src/get-placement.ts +13 -5
- package/src/types.ts +1 -2
- package/src/auto-update.ts +0 -58
package/dist/index.d.mts
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
|
|
2
|
-
export { Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
|
|
3
|
-
|
|
4
|
-
interface AutoUpdateOptions {
|
|
5
|
-
ancestorScroll?: boolean;
|
|
6
|
-
ancestorResize?: boolean;
|
|
7
|
-
referenceResize?: boolean;
|
|
8
|
-
}
|
|
1
|
+
import { Placement, Boundary, AutoUpdateOptions, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
|
|
2
|
+
export { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
|
|
9
3
|
|
|
10
4
|
type MaybeRectElement = HTMLElement | VirtualElement | null;
|
|
11
5
|
type MaybeElement = HTMLElement | null;
|
|
@@ -144,4 +138,4 @@ declare function getPlacementStyles(options?: PositioningOptions): {
|
|
|
144
138
|
declare function isValidPlacement(v: string): v is Placement;
|
|
145
139
|
declare function getPlacementSide(placement: Placement): PlacementSide;
|
|
146
140
|
|
|
147
|
-
export { type AnchorRect, type
|
|
141
|
+
export { type AnchorRect, type GetPlacementStylesOptions, type PlacementAlign, type PlacementSide, type PositioningOptions, getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
import { Placement, Boundary, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
|
|
2
|
-
export { Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
|
|
3
|
-
|
|
4
|
-
interface AutoUpdateOptions {
|
|
5
|
-
ancestorScroll?: boolean;
|
|
6
|
-
ancestorResize?: boolean;
|
|
7
|
-
referenceResize?: boolean;
|
|
8
|
-
}
|
|
1
|
+
import { Placement, Boundary, AutoUpdateOptions, ComputePositionReturn, VirtualElement } from '@floating-ui/dom';
|
|
2
|
+
export { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement } from '@floating-ui/dom';
|
|
9
3
|
|
|
10
4
|
type MaybeRectElement = HTMLElement | VirtualElement | null;
|
|
11
5
|
type MaybeElement = HTMLElement | null;
|
|
@@ -144,4 +138,4 @@ declare function getPlacementStyles(options?: PositioningOptions): {
|
|
|
144
138
|
declare function isValidPlacement(v: string): v is Placement;
|
|
145
139
|
declare function getPlacementSide(placement: Placement): PlacementSide;
|
|
146
140
|
|
|
147
|
-
export { type AnchorRect, type
|
|
141
|
+
export { type AnchorRect, type GetPlacementStylesOptions, type PlacementAlign, type PlacementSide, type PositioningOptions, getPlacement, getPlacementSide, getPlacementStyles, isValidPlacement };
|
package/dist/index.js
CHANGED
|
@@ -28,50 +28,12 @@ __export(src_exports, {
|
|
|
28
28
|
module.exports = __toCommonJS(src_exports);
|
|
29
29
|
|
|
30
30
|
// src/get-placement.ts
|
|
31
|
-
var import_dom2 = require("@floating-ui/dom");
|
|
32
|
-
var import_dom_query3 = require("@zag-js/dom-query");
|
|
33
|
-
var import_utils2 = require("@zag-js/utils");
|
|
34
|
-
|
|
35
|
-
// src/auto-update.ts
|
|
36
31
|
var import_dom = require("@floating-ui/dom");
|
|
37
|
-
var
|
|
38
|
-
var import_element_rect = require("@zag-js/element-rect");
|
|
32
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
39
33
|
var import_utils = require("@zag-js/utils");
|
|
40
|
-
var addDomEvent = (el, type, fn, options) => {
|
|
41
|
-
el.addEventListener(type, fn, options);
|
|
42
|
-
return () => el.removeEventListener(type, fn, options);
|
|
43
|
-
};
|
|
44
|
-
function resolveOptions(option) {
|
|
45
|
-
const bool = typeof option === "boolean";
|
|
46
|
-
return {
|
|
47
|
-
ancestorResize: bool ? option : option.ancestorResize ?? true,
|
|
48
|
-
ancestorScroll: bool ? option : option.ancestorScroll ?? true,
|
|
49
|
-
referenceResize: bool ? option : option.referenceResize ?? true
|
|
50
|
-
};
|
|
51
|
-
}
|
|
52
|
-
function autoUpdate(reference, floating, update, options = false) {
|
|
53
|
-
const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options);
|
|
54
|
-
const useAncestors = ancestorScroll || ancestorResize;
|
|
55
|
-
const ancestors = [];
|
|
56
|
-
if (useAncestors && (0, import_dom_query.isHTMLElement)(reference)) {
|
|
57
|
-
ancestors.push(...(0, import_dom.getOverflowAncestors)(reference));
|
|
58
|
-
}
|
|
59
|
-
function addResizeListeners() {
|
|
60
|
-
let cleanups = [(0, import_element_rect.trackElementRect)(floating, { scope: "size", onChange: update })];
|
|
61
|
-
if (referenceResize && (0, import_dom_query.isHTMLElement)(reference)) {
|
|
62
|
-
cleanups.push((0, import_element_rect.trackElementRect)(reference, { onChange: update }));
|
|
63
|
-
}
|
|
64
|
-
cleanups.push((0, import_utils.callAll)(...ancestors.map((el) => addDomEvent(el, "resize", update))));
|
|
65
|
-
return () => cleanups.forEach((fn) => fn());
|
|
66
|
-
}
|
|
67
|
-
function addScrollListeners() {
|
|
68
|
-
return (0, import_utils.callAll)(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
|
|
69
|
-
}
|
|
70
|
-
return (0, import_utils.callAll)(addResizeListeners(), addScrollListeners());
|
|
71
|
-
}
|
|
72
34
|
|
|
73
35
|
// src/get-anchor.ts
|
|
74
|
-
var
|
|
36
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
75
37
|
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
|
|
76
38
|
if (typeof DOMRect === "function") {
|
|
77
39
|
return new DOMRect(x, y, width, height);
|
|
@@ -96,7 +58,7 @@ function getDOMRect(anchorRect) {
|
|
|
96
58
|
}
|
|
97
59
|
function getAnchorElement(anchorElement, getAnchorRect) {
|
|
98
60
|
return {
|
|
99
|
-
contextElement: (0,
|
|
61
|
+
contextElement: (0, import_dom_query.isHTMLElement)(anchorElement) ? anchorElement : void 0,
|
|
100
62
|
getBoundingClientRect: () => {
|
|
101
63
|
const anchor = anchorElement;
|
|
102
64
|
const anchorRect = getAnchorRect?.(anchor);
|
|
@@ -194,25 +156,25 @@ function __dpr(win, value) {
|
|
|
194
156
|
return Math.round(value * dpr) / dpr;
|
|
195
157
|
}
|
|
196
158
|
function __boundary(opts) {
|
|
197
|
-
return (0,
|
|
159
|
+
return (0, import_utils.runIfFn)(opts.boundary);
|
|
198
160
|
}
|
|
199
161
|
function __arrow(arrowElement, opts) {
|
|
200
162
|
if (!arrowElement)
|
|
201
163
|
return;
|
|
202
|
-
return (0,
|
|
164
|
+
return (0, import_dom.arrow)({
|
|
203
165
|
element: arrowElement,
|
|
204
166
|
padding: opts.arrowPadding
|
|
205
167
|
});
|
|
206
168
|
}
|
|
207
169
|
function __offset(arrowElement, opts) {
|
|
208
|
-
if ((0,
|
|
170
|
+
if ((0, import_utils.isNull)(opts.offset ?? opts.gutter))
|
|
209
171
|
return;
|
|
210
|
-
return (0,
|
|
172
|
+
return (0, import_dom.offset)(({ placement }) => {
|
|
211
173
|
const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
|
|
212
174
|
const gutter = opts.offset?.mainAxis ?? opts.gutter;
|
|
213
175
|
const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
|
|
214
176
|
const { hasAlign } = getPlacementDetails(placement);
|
|
215
|
-
return (0,
|
|
177
|
+
return (0, import_utils.compact)({
|
|
216
178
|
crossAxis: hasAlign ? opts.shift : void 0,
|
|
217
179
|
mainAxis,
|
|
218
180
|
alignmentAxis: opts.shift
|
|
@@ -222,7 +184,7 @@ function __offset(arrowElement, opts) {
|
|
|
222
184
|
function __flip(opts) {
|
|
223
185
|
if (!opts.flip)
|
|
224
186
|
return;
|
|
225
|
-
return (0,
|
|
187
|
+
return (0, import_dom.flip)({
|
|
226
188
|
boundary: __boundary(opts),
|
|
227
189
|
padding: opts.overflowPadding,
|
|
228
190
|
fallbackPlacements: opts.flip === true ? void 0 : opts.flip
|
|
@@ -231,7 +193,7 @@ function __flip(opts) {
|
|
|
231
193
|
function __shift(opts) {
|
|
232
194
|
if (!opts.slide && !opts.overlap)
|
|
233
195
|
return;
|
|
234
|
-
return (0,
|
|
196
|
+
return (0, import_dom.shift)({
|
|
235
197
|
boundary: __boundary(opts),
|
|
236
198
|
mainAxis: opts.slide,
|
|
237
199
|
crossAxis: opts.overlap,
|
|
@@ -239,7 +201,7 @@ function __shift(opts) {
|
|
|
239
201
|
});
|
|
240
202
|
}
|
|
241
203
|
function __size(opts) {
|
|
242
|
-
return (0,
|
|
204
|
+
return (0, import_dom.size)({
|
|
243
205
|
padding: opts.overflowPadding,
|
|
244
206
|
apply({ elements, rects, availableHeight, availableWidth }) {
|
|
245
207
|
const floating = elements.floating;
|
|
@@ -252,6 +214,14 @@ function __size(opts) {
|
|
|
252
214
|
}
|
|
253
215
|
});
|
|
254
216
|
}
|
|
217
|
+
function getAutoUpdateOptions(opts) {
|
|
218
|
+
if (!opts)
|
|
219
|
+
return {};
|
|
220
|
+
if (opts === true) {
|
|
221
|
+
return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true };
|
|
222
|
+
}
|
|
223
|
+
return opts;
|
|
224
|
+
}
|
|
255
225
|
function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
256
226
|
const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect);
|
|
257
227
|
if (!floating || !reference)
|
|
@@ -271,14 +241,14 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
|
271
241
|
const updatePosition = async () => {
|
|
272
242
|
if (!reference || !floating)
|
|
273
243
|
return;
|
|
274
|
-
const pos = await (0,
|
|
244
|
+
const pos = await (0, import_dom.computePosition)(reference, floating, {
|
|
275
245
|
placement,
|
|
276
246
|
middleware,
|
|
277
247
|
strategy
|
|
278
248
|
});
|
|
279
249
|
onComplete?.(pos);
|
|
280
250
|
onPositioned?.({ placed: true });
|
|
281
|
-
const win = (0,
|
|
251
|
+
const win = (0, import_dom_query2.getWindow)(floating);
|
|
282
252
|
const x = __dpr(win, pos.x);
|
|
283
253
|
const y = __dpr(win, pos.y);
|
|
284
254
|
floating.style.setProperty("--x", `${x}px`);
|
|
@@ -297,7 +267,8 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
|
297
267
|
await updatePosition();
|
|
298
268
|
}
|
|
299
269
|
};
|
|
300
|
-
const
|
|
270
|
+
const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
|
|
271
|
+
const cancelAutoUpdate = options.listeners ? (0, import_dom.autoUpdate)(reference, floating, update, autoUpdateOptions) : import_utils.noop;
|
|
301
272
|
update();
|
|
302
273
|
return () => {
|
|
303
274
|
cancelAutoUpdate?.();
|
|
@@ -306,7 +277,7 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
|
306
277
|
}
|
|
307
278
|
function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
|
|
308
279
|
const { defer, ...options } = opts;
|
|
309
|
-
const func = defer ?
|
|
280
|
+
const func = defer ? import_dom_query2.raf : (v) => v();
|
|
310
281
|
const cleanups = [];
|
|
311
282
|
cleanups.push(
|
|
312
283
|
func(() => {
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/auto-update.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 { Middleware } from \"@floating-ui/dom\"\nimport { arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, runIfFn } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\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 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 cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, options.listeners) : undefined\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 type { ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { isHTMLElement } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { callAll } from \"@zag-js/utils\"\n\nexport interface AutoUpdateOptions {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\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 { 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","import_dom_query","import_utils","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 { __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"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,48 +1,10 @@
|
|
|
1
1
|
// src/get-placement.ts
|
|
2
|
-
import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
|
|
2
|
+
import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
|
|
3
3
|
import { getWindow, raf } from "@zag-js/dom-query";
|
|
4
|
-
import { compact, isNull, runIfFn } from "@zag-js/utils";
|
|
5
|
-
|
|
6
|
-
// src/auto-update.ts
|
|
7
|
-
import { getOverflowAncestors } from "@floating-ui/dom";
|
|
8
|
-
import { isHTMLElement } from "@zag-js/dom-query";
|
|
9
|
-
import { trackElementRect } from "@zag-js/element-rect";
|
|
10
|
-
import { callAll } from "@zag-js/utils";
|
|
11
|
-
var addDomEvent = (el, type, fn, options) => {
|
|
12
|
-
el.addEventListener(type, fn, options);
|
|
13
|
-
return () => el.removeEventListener(type, fn, options);
|
|
14
|
-
};
|
|
15
|
-
function resolveOptions(option) {
|
|
16
|
-
const bool = typeof option === "boolean";
|
|
17
|
-
return {
|
|
18
|
-
ancestorResize: bool ? option : option.ancestorResize ?? true,
|
|
19
|
-
ancestorScroll: bool ? option : option.ancestorScroll ?? true,
|
|
20
|
-
referenceResize: bool ? option : option.referenceResize ?? true
|
|
21
|
-
};
|
|
22
|
-
}
|
|
23
|
-
function autoUpdate(reference, floating, update, options = false) {
|
|
24
|
-
const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options);
|
|
25
|
-
const useAncestors = ancestorScroll || ancestorResize;
|
|
26
|
-
const ancestors = [];
|
|
27
|
-
if (useAncestors && isHTMLElement(reference)) {
|
|
28
|
-
ancestors.push(...getOverflowAncestors(reference));
|
|
29
|
-
}
|
|
30
|
-
function addResizeListeners() {
|
|
31
|
-
let cleanups = [trackElementRect(floating, { scope: "size", onChange: update })];
|
|
32
|
-
if (referenceResize && isHTMLElement(reference)) {
|
|
33
|
-
cleanups.push(trackElementRect(reference, { onChange: update }));
|
|
34
|
-
}
|
|
35
|
-
cleanups.push(callAll(...ancestors.map((el) => addDomEvent(el, "resize", update))));
|
|
36
|
-
return () => cleanups.forEach((fn) => fn());
|
|
37
|
-
}
|
|
38
|
-
function addScrollListeners() {
|
|
39
|
-
return callAll(...ancestors.map((el) => addDomEvent(el, "scroll", update, { passive: true })));
|
|
40
|
-
}
|
|
41
|
-
return callAll(addResizeListeners(), addScrollListeners());
|
|
42
|
-
}
|
|
4
|
+
import { compact, isNull, noop, runIfFn } from "@zag-js/utils";
|
|
43
5
|
|
|
44
6
|
// src/get-anchor.ts
|
|
45
|
-
import { isHTMLElement
|
|
7
|
+
import { isHTMLElement } from "@zag-js/dom-query";
|
|
46
8
|
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
|
|
47
9
|
if (typeof DOMRect === "function") {
|
|
48
10
|
return new DOMRect(x, y, width, height);
|
|
@@ -67,7 +29,7 @@ function getDOMRect(anchorRect) {
|
|
|
67
29
|
}
|
|
68
30
|
function getAnchorElement(anchorElement, getAnchorRect) {
|
|
69
31
|
return {
|
|
70
|
-
contextElement:
|
|
32
|
+
contextElement: isHTMLElement(anchorElement) ? anchorElement : void 0,
|
|
71
33
|
getBoundingClientRect: () => {
|
|
72
34
|
const anchor = anchorElement;
|
|
73
35
|
const anchorRect = getAnchorRect?.(anchor);
|
|
@@ -223,6 +185,14 @@ function __size(opts) {
|
|
|
223
185
|
}
|
|
224
186
|
});
|
|
225
187
|
}
|
|
188
|
+
function getAutoUpdateOptions(opts) {
|
|
189
|
+
if (!opts)
|
|
190
|
+
return {};
|
|
191
|
+
if (opts === true) {
|
|
192
|
+
return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true };
|
|
193
|
+
}
|
|
194
|
+
return opts;
|
|
195
|
+
}
|
|
226
196
|
function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
227
197
|
const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect);
|
|
228
198
|
if (!floating || !reference)
|
|
@@ -268,7 +238,8 @@ function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
|
268
238
|
await updatePosition();
|
|
269
239
|
}
|
|
270
240
|
};
|
|
271
|
-
const
|
|
241
|
+
const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
|
|
242
|
+
const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop;
|
|
272
243
|
update();
|
|
273
244
|
return () => {
|
|
274
245
|
cancelAutoUpdate?.();
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/get-placement.ts","../src/auto-update.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { Middleware } from \"@floating-ui/dom\"\nimport { arrow, computePosition, flip, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, runIfFn } from \"@zag-js/utils\"\nimport { autoUpdate } from \"./auto-update\"\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 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 cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, options.listeners) : undefined\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 type { ReferenceElement } from \"@floating-ui/dom\"\nimport { getOverflowAncestors } from \"@floating-ui/dom\"\nimport { isHTMLElement } from \"@zag-js/dom-query\"\nimport { trackElementRect } from \"@zag-js/element-rect\"\nimport { callAll } from \"@zag-js/utils\"\n\nexport interface AutoUpdateOptions {\n ancestorScroll?: boolean\n ancestorResize?: boolean\n referenceResize?: boolean\n}\n\ntype Ancestors = ReturnType<typeof getOverflowAncestors>\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 { 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":";AACA,SAAS,OAAO,iBAAiB,MAAM,QAAQ,OAAO,YAAY;AAClE,SAAS,WAAW,WAAW;AAC/B,SAAS,SAAS,QAAQ,eAAe;;;ACFzC,SAAS,4BAA4B;AACrC,SAAS,qBAAqB;AAC9B,SAAS,wBAAwB;AACjC,SAAS,eAAe;AAUxB,IAAM,cAAc,CAAC,IAAiB,MAAc,IAAkB,YAAgD;AACpH,KAAG,iBAAiB,MAAM,IAAI,OAAO;AACrC,SAAO,MAAM,GAAG,oBAAoB,MAAM,IAAI,OAAO;AACvD;AAEA,SAAS,eAAe,QAAqC;AAC3D,QAAM,OAAO,OAAO,WAAW;AAC/B,SAAO;AAAA,IACL,gBAAgB,OAAO,SAAS,OAAO,kBAAkB;AAAA,IACzD,gBAAgB,OAAO,SAAS,OAAO,kBAAkB;AAAA,IACzD,iBAAiB,OAAO,SAAS,OAAO,mBAAmB;AAAA,EAC7D;AACF;AAEO,SAAS,WACd,WACA,UACA,QACA,UAAuC,OACvC;AACA,QAAM,EAAE,gBAAgB,gBAAgB,gBAAgB,IAAI,eAAe,OAAO;AAElF,QAAM,eAAe,kBAAkB;AACvC,QAAM,YAAuB,CAAC;AAE9B,MAAI,gBAAgB,cAAc,SAAS,GAAG;AAC5C,cAAU,KAAK,GAAG,qBAAqB,SAAS,CAAC;AAAA,EACnD;AAEA,WAAS,qBAAqB;AAC5B,QAAI,WAA2B,CAAC,iBAAiB,UAAU,EAAE,OAAO,QAAQ,UAAU,OAAO,CAAC,CAAC;AAC/F,QAAI,mBAAmB,cAAc,SAAS,GAAG;AAC/C,eAAS,KAAK,iBAAiB,WAAW,EAAE,UAAU,OAAO,CAAC,CAAC;AAAA,IACjE;AACA,aAAS,KAAK,QAAQ,GAAG,UAAU,IAAI,CAAC,OAAY,YAAY,IAAI,UAAU,MAAM,CAAC,CAAC,CAAC;AACvF,WAAO,MAAM,SAAS,QAAQ,CAAC,OAAO,GAAG,CAAC;AAAA,EAC5C;AAEA,WAAS,qBAAqB;AAC5B,WAAO,QAAQ,GAAG,UAAU,IAAI,CAAC,OAAY,YAAY,IAAI,UAAU,QAAQ,EAAE,SAAS,KAAK,CAAC,CAAC,CAAC;AAAA,EACpG;AAEA,SAAO,QAAQ,mBAAmB,GAAG,mBAAmB,CAAC;AAC3D;;;ACzDA,SAAS,iBAAAA,sBAAqB;AAGvB,SAAS,cAAc,IAAI,GAAG,IAAI,GAAG,QAAQ,GAAG,SAAS,GAAG;AACjE,MAAI,OAAO,YAAY,YAAY;AACjC,WAAO,IAAI,QAAQ,GAAG,GAAG,OAAO,MAAM;AAAA,EACxC;AACA,QAAM,OAAO;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL,OAAO,IAAI;AAAA,IACX,QAAQ,IAAI;AAAA,IACZ,MAAM;AAAA,EACR;AACA,SAAO,EAAE,GAAG,MAAM,QAAQ,MAAM,KAAK;AACvC;AAEA,SAAS,WAAW,YAAgC;AAClD,MAAI,CAAC;AAAY,WAAO,cAAc;AACtC,QAAM,EAAE,GAAG,GAAG,OAAO,OAAO,IAAI;AAChC,SAAO,cAAc,GAAG,GAAG,OAAO,MAAM;AAC1C;AAEO,SAAS,iBACd,eACA,eACA;AACA,SAAO;AAAA,IACL,gBAAgBA,eAAc,aAAa,IAAI,gBAAgB;AAAA,IAC/D,uBAAuB,MAAM;AAC3B,YAAM,SAAS;AACf,YAAM,aAAa,gBAAgB,MAAM;AACzC,UAAI,cAAc,CAAC,QAAQ;AACzB,eAAO,WAAW,UAAU;AAAA,MAC9B;AACA,aAAO,OAAO,sBAAsB;AAAA,IACtC;AAAA,EACF;AACF;;;AClCA,IAAM,QAAQ,CAAC,WAAmB,EAAE,UAAU,OAAO,WAAW,OAAO,KAAK,IAAI;AAEzE,IAAM,UAAU;AAAA,EACrB,WAAW,MAAM,cAAc;AAAA,EAC/B,eAAe,MAAM,mBAAmB;AAAA,EACxC,SAAS,MAAM,oBAAoB;AAAA,EACnC,iBAAiB,MAAM,oBAAoB;AAAA,EAC3C,aAAa,MAAM,gBAAgB;AACrC;AAMA,IAAM,qBAAqB,CAACC,YAA6B;AAAA,EACvD,KAAK;AAAA,EACL,aAAaA,SAAQ,GAAGA,OAAM,CAAC,cAAc;AAAA,EAC7C,WAAWA,SAAQ,GAAGA,OAAM,CAAC,cAAc;AAAA,EAC3C,QAAQ;AAAA,EACR,gBAAgBA,SAAQ,GAAGA,OAAM,CAAC,WAAW;AAAA,EAC7C,cAAcA,SAAQ,GAAGA,OAAM,CAAC,WAAW;AAAA,EAC3C,MAAM;AAAA,EACN,cAAcA,SAAQ,SAASA,OAAM,CAAC,OAAO;AAAA,EAC7C,YAAYA,SAAQ,SAASA,OAAM,CAAC,OAAO;AAAA,EAC3C,OAAO;AAAA,EACP,eAAeA,SAAQ,QAAQA,OAAM,CAAC,OAAO;AAAA,EAC7C,aAAaA,SAAQ,QAAQA,OAAM,CAAC,OAAO;AAC7C;AAEO,IAAM,oBAAgC;AAAA,EAC3C,MAAM;AAAA,EACN,GAAG,EAAE,WAAW,UAAU,eAAe,GAAG;AAC1C,UAAM,EAAE,OAAAA,OAAM,IAAI;AAClB,UAAM,kBAAkB,mBAAmBA,MAAK,EAAE,SAAS;AAE3D,UAAM,EAAE,SAAS,IAAI;AACrB,aAAS,MAAM,YAAY,QAAQ,gBAAgB,UAAU,eAAe;AAE5E,WAAO;AAAA,MACL,MAAM,EAAE,gBAAgB;AAAA,IAC1B;AAAA,EACF;AACF;AAMO,IAAM,eAAe,CAAC,YAAwD;AACnF,MAAI,CAAC;AAAS;AACd,SAAO;AAAA,IACL,MAAM;AAAA,IACN,GAAG,EAAE,WAAW,eAAe,GAAG;AAChC,UAAI,CAAC,eAAe;AAAO,eAAO,CAAC;AACnC,YAAM,EAAE,GAAG,EAAE,IAAI,eAAe;AAChC,YAAM,MAAM,UAAU,MAAM,GAAG,EAAE,CAAC;AAElC,aAAO,OAAO,QAAQ,OAAO;AAAA,QAC3B,MAAM,KAAK,OAAO,GAAG,CAAC,OAAO;AAAA,QAC7B,KAAK,KAAK,OAAO,GAAG,CAAC,OAAO;AAAA,QAC5B,CAAC,GAAG,GAAG,eAAe,QAAQ,YAAY,SAAS;AAAA,MACrD,CAAC;AAED,aAAO,CAAC;AAAA,IACV;AAAA,EACF;AACF;;;ACtEO,SAAS,iBAAiB,GAA2B;AAC1D,SAAO,iDAAiD,KAAK,CAAC;AAChE;AAEO,SAAS,oBAAoB,WAAsB;AACxD,QAAM,CAAC,MAAM,KAAK,IAAI,UAAU,MAAM,GAAG;AACzC,SAAO,EAAE,MAAM,OAAO,UAAU,SAAS,KAAK;AAChD;AAEO,SAAS,iBAAiB,WAAqC;AACpE,SAAO,UAAU,MAAM,GAAG,EAAE,CAAC;AAC/B;;;AJJA,IAAM,iBAAqC;AAAA,EACzC,UAAU;AAAA,EACV,WAAW;AAAA,EACX,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,OAAO;AAAA,EACP,SAAS;AAAA,EACT,WAAW;AAAA,EACX,aAAa;AAAA,EACb,iBAAiB;AAAA,EACjB,cAAc;AAChB;AAEA,SAAS,MAAM,KAAa,OAAe;AACzC,QAAM,MAAM,IAAI,oBAAoB;AACpC,SAAO,KAAK,MAAM,QAAQ,GAAG,IAAI;AACnC;AAEA,SAAS,WAAW,MAA0B;AAC5C,SAAO,QAAQ,KAAK,QAAQ;AAC9B;AAEA,SAAS,QAAQ,cAAkC,MAA0B;AAC3E,MAAI,CAAC;AAAc;AACnB,SAAO,MAAM;AAAA,IACX,SAAS;AAAA,IACT,SAAS,KAAK;AAAA,EAChB,CAAC;AACH;AAEA,SAAS,SAAS,cAAkC,MAA0B;AAC5E,MAAI,OAAO,KAAK,UAAU,KAAK,MAAM;AAAG;AACxC,SAAO,OAAO,CAAC,EAAE,UAAU,MAAM;AAC/B,UAAM,eAAe,cAAc,gBAAgB,KAAK;AAExD,UAAM,SAAS,KAAK,QAAQ,YAAY,KAAK;AAC7C,UAAM,WAAW,OAAO,WAAW,WAAW,SAAS,cAAc,UAAU;AAE/E,UAAM,EAAE,SAAS,IAAI,oBAAoB,SAAS;AAElD,WAAO,QAAQ;AAAA,MACb,WAAW,WAAW,KAAK,QAAQ;AAAA,MACnC;AAAA,MACA,eAAe,KAAK;AAAA,IACtB,CAAC;AAAA,EACH,CAAC;AACH;AAEA,SAAS,OAAO,MAA0B;AACxC,MAAI,CAAC,KAAK;AAAM;AAChB,SAAO,KAAK;AAAA,IACV,UAAU,WAAW,IAAI;AAAA,IACzB,SAAS,KAAK;AAAA,IACd,oBAAoB,KAAK,SAAS,OAAO,SAAY,KAAK;AAAA,EAC5D,CAAC;AACH;AAEA,SAAS,QAAQ,MAA0B;AACzC,MAAI,CAAC,KAAK,SAAS,CAAC,KAAK;AAAS;AAClC,SAAO,MAAM;AAAA,IACX,UAAU,WAAW,IAAI;AAAA,IACzB,UAAU,KAAK;AAAA,IACf,WAAW,KAAK;AAAA,IAChB,SAAS,KAAK;AAAA,EAChB,CAAC;AACH;AAEA,SAAS,OAAO,MAA0B;AACxC,SAAO,KAAK;AAAA,IACV,SAAS,KAAK;AAAA,IACd,MAAM,EAAE,UAAU,OAAO,iBAAiB,eAAe,GAAG;AAC1D,YAAM,WAAW,SAAS;AAE1B,YAAM,iBAAiB,KAAK,MAAM,MAAM,UAAU,KAAK;AACvD,uBAAiB,KAAK,MAAM,cAAc;AAC1C,wBAAkB,KAAK,MAAM,eAAe;AAE5C,eAAS,MAAM,YAAY,qBAAqB,GAAG,cAAc,IAAI;AACrE,eAAS,MAAM,YAAY,qBAAqB,GAAG,cAAc,IAAI;AACrE,eAAS,MAAM,YAAY,sBAAsB,GAAG,eAAe,IAAI;AAAA,IACzE;AAAA,EACF,CAAC;AACH;AAEA,SAAS,iBAAiB,oBAAsC,UAAwB,OAA2B,CAAC,GAAG;AACrH,QAAM,YAAY,iBAAiB,oBAAoB,KAAK,aAAa;AAEzE,MAAI,CAAC,YAAY,CAAC;AAAW;AAE7B,QAAM,UAAU,OAAO,OAAO,CAAC,GAAG,gBAAgB,IAAI;AAMtD,QAAM,UAAU,SAAS,cAA2B,mBAAmB;AAEvE,QAAM,aAAyC;AAAA,IAC7C,SAAS,SAAS,OAAO;AAAA,IACzB,OAAO,OAAO;AAAA,IACd,QAAQ,OAAO;AAAA,IACf,QAAQ,SAAS,OAAO;AAAA,IACxB,aAAa,OAAO;AAAA,IACpB;AAAA,IACA,OAAO,OAAO;AAAA,EAChB;AAMA,QAAM,EAAE,WAAW,UAAU,YAAY,aAAa,IAAI;AAE1D,QAAM,iBAAiB,YAAY;AACjC,QAAI,CAAC,aAAa,CAAC;AAAU;AAE7B,UAAM,MAAM,MAAM,gBAAgB,WAAW,UAAU;AAAA,MACrD;AAAA,MACA;AAAA,MACA;AAAA,IACF,CAAC;AAED,iBAAa,GAAG;AAChB,mBAAe,EAAE,QAAQ,KAAK,CAAC;AAE/B,UAAM,MAAM,UAAU,QAAQ;AAC9B,UAAM,IAAI,MAAM,KAAK,IAAI,CAAC;AAC1B,UAAM,IAAI,MAAM,KAAK,IAAI,CAAC;AAE1B,aAAS,MAAM,YAAY,OAAO,GAAG,CAAC,IAAI;AAC1C,aAAS,MAAM,YAAY,OAAO,GAAG,CAAC,IAAI;AAE1C,UAAM,YAAY,SAAS;AAE3B,QAAI,WAAW;AACb,YAAM,SAAS,IAAI,iBAAiB,SAAS,EAAE;AAC/C,eAAS,MAAM,YAAY,aAAa,MAAM;AAAA,IAChD;AAAA,EACF;AAEA,QAAM,SAAS,YAAY;AACzB,QAAI,KAAK,gBAAgB;AACvB,YAAM,KAAK,eAAe,EAAE,eAAe,CAAC;AAC5C,qBAAe,EAAE,QAAQ,KAAK,CAAC;AAAA,IACjC,OAAO;AACL,YAAM,eAAe;AAAA,IACvB;AAAA,EACF;AAEA,QAAM,mBAAmB,QAAQ,YAAY,WAAW,WAAW,UAAU,QAAQ,QAAQ,SAAS,IAAI;AAE1G,SAAO;AAEP,SAAO,MAAM;AACX,uBAAmB;AACnB,mBAAe,EAAE,QAAQ,MAAM,CAAC;AAAA,EAClC;AACF;AAEO,SAAS,aACd,eACA,cACA,OAAiD,CAAC,GAClD;AACA,QAAM,EAAE,OAAO,GAAG,QAAQ,IAAI;AAC9B,QAAM,OAAO,QAAQ,MAAM,CAAC,MAAW,EAAE;AACzC,QAAM,WAAyC,CAAC;AAChD,WAAS;AAAA,IACP,KAAK,MAAM;AACT,YAAM,YAAY,OAAO,kBAAkB,aAAa,cAAc,IAAI;AAC1E,YAAM,WAAW,OAAO,iBAAiB,aAAa,aAAa,IAAI;AACvE,eAAS,KAAK,iBAAiB,WAAW,UAAU,OAAO,CAAC;AAAA,IAC9D,CAAC;AAAA,EACH;AACA,SAAO,MAAM;AACX,aAAS,QAAQ,CAAC,OAAO,KAAK,CAAC;AAAA,EACjC;AACF;;;AKpLA,IAAM,uBAAuB;AAAA,EAC3B,QAAQ;AAAA,EACR,MAAM;AAAA,EACN,KAAK;AAAA,EACL,OAAO;AACT;AAEO,SAAS,mBAAmB,UAA8B,CAAC,GAAG;AACnE,QAAM,EAAE,WAAW,WAAW,aAAa,WAAW,WAAW,IAAI;AAErE,SAAO;AAAA,IACL,OAAO;AAAA,MACL,UAAU;AAAA,MACV,OAAO,QAAQ,UAAU;AAAA,MACzB,QAAQ,QAAQ,UAAU;AAAA,MAC1B,CAAC,QAAQ,cAAc,QAAQ,GAAG,QAAQ,QAAQ,UAAU,SAAS;AAAA,MACrE,CAAC,QAAQ,YAAY,QAAQ,GAAG,QAAQ,QAAQ,cAAc,SAAS;AAAA,IACzE;AAAA,IAEA,UAAU;AAAA,MACR,WAAW,YAAY,qBAAqB,UAAU,MAAM,GAAG,EAAE,CAAC,CAAC,IAAI;AAAA,MACvE,YAAY,QAAQ,QAAQ;AAAA,MAC5B,KAAK;AAAA,MACL,MAAM;AAAA,MACN,OAAO;AAAA,MACP,QAAQ;AAAA,MACR,UAAU;AAAA,MACV,QAAQ;AAAA,IACV;AAAA,IAEA,UAAU;AAAA,MACR,UAAU;AAAA,MACV,WAAW;AAAA,MACX,UAAU,YAAY,SAAY;AAAA,MAClC,OAAO,YAAY,2BAA2B;AAAA,MAC9C,UAAU,cAAc,2BAA2B;AAAA,MACnD,WAAW,cAAc,4BAA4B;AAAA,MACrD,KAAK;AAAA,MACL,MAAM;AAAA;AAAA,MAEN,WAAW,YAAY,uCAAuC;AAAA,MAC9D,QAAQ;AAAA,IACV;AAAA,EACF;AACF;","names":["isHTMLElement","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 { __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"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popper",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.36.0",
|
|
4
4
|
"description": "Dynamic positioning logic for ui machines",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -23,10 +23,9 @@
|
|
|
23
23
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@floating-ui/dom": "1.6.
|
|
27
|
-
"@zag-js/dom-query": "0.
|
|
28
|
-
"@zag-js/
|
|
29
|
-
"@zag-js/utils": "0.34.0"
|
|
26
|
+
"@floating-ui/dom": "1.6.2",
|
|
27
|
+
"@zag-js/dom-query": "0.36.0",
|
|
28
|
+
"@zag-js/utils": "0.36.0"
|
|
30
29
|
},
|
|
31
30
|
"devDependencies": {
|
|
32
31
|
"clean-package": "2.2.0"
|
package/src/get-placement.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import type { Middleware } from "@floating-ui/dom"
|
|
2
|
-
import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom"
|
|
1
|
+
import type { AutoUpdateOptions, Middleware } from "@floating-ui/dom"
|
|
2
|
+
import { arrow, autoUpdate, computePosition, flip, offset, shift, size } from "@floating-ui/dom"
|
|
3
3
|
import { getWindow, raf } from "@zag-js/dom-query"
|
|
4
|
-
import { compact, isNull, runIfFn } from "@zag-js/utils"
|
|
5
|
-
import { autoUpdate } from "./auto-update"
|
|
4
|
+
import { compact, isNull, noop, runIfFn } from "@zag-js/utils"
|
|
6
5
|
import { getAnchorElement } from "./get-anchor"
|
|
7
6
|
import { __shiftArrow, __transformOrigin } from "./middleware"
|
|
8
7
|
import { getPlacementDetails } from "./placement"
|
|
@@ -93,6 +92,14 @@ function __size(opts: PositioningOptions) {
|
|
|
93
92
|
})
|
|
94
93
|
}
|
|
95
94
|
|
|
95
|
+
function getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {
|
|
96
|
+
if (!opts) return {}
|
|
97
|
+
if (opts === true) {
|
|
98
|
+
return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }
|
|
99
|
+
}
|
|
100
|
+
return opts
|
|
101
|
+
}
|
|
102
|
+
|
|
96
103
|
function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {
|
|
97
104
|
const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)
|
|
98
105
|
|
|
@@ -158,7 +165,8 @@ function getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeE
|
|
|
158
165
|
}
|
|
159
166
|
}
|
|
160
167
|
|
|
161
|
-
const
|
|
168
|
+
const autoUpdateOptions = getAutoUpdateOptions(options.listeners)
|
|
169
|
+
const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop
|
|
162
170
|
|
|
163
171
|
update()
|
|
164
172
|
|
package/src/types.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
|
-
import type { Boundary, ComputePositionReturn, Placement, VirtualElement } from "@floating-ui/dom"
|
|
2
|
-
import type { AutoUpdateOptions } from "./auto-update"
|
|
1
|
+
import type { AutoUpdateOptions, Boundary, ComputePositionReturn, Placement, VirtualElement } from "@floating-ui/dom"
|
|
3
2
|
|
|
4
3
|
export type MaybeRectElement = HTMLElement | VirtualElement | null
|
|
5
4
|
|
package/src/auto-update.ts
DELETED
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import type { ReferenceElement } from "@floating-ui/dom"
|
|
2
|
-
import { getOverflowAncestors } from "@floating-ui/dom"
|
|
3
|
-
import { isHTMLElement } from "@zag-js/dom-query"
|
|
4
|
-
import { trackElementRect } from "@zag-js/element-rect"
|
|
5
|
-
import { callAll } from "@zag-js/utils"
|
|
6
|
-
|
|
7
|
-
export interface AutoUpdateOptions {
|
|
8
|
-
ancestorScroll?: boolean
|
|
9
|
-
ancestorResize?: boolean
|
|
10
|
-
referenceResize?: boolean
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
type Ancestors = ReturnType<typeof getOverflowAncestors>
|
|
14
|
-
|
|
15
|
-
const addDomEvent = (el: HTMLElement, type: string, fn: VoidFunction, options?: boolean | AddEventListenerOptions) => {
|
|
16
|
-
el.addEventListener(type, fn, options)
|
|
17
|
-
return () => el.removeEventListener(type, fn, options)
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
function resolveOptions(option: boolean | AutoUpdateOptions) {
|
|
21
|
-
const bool = typeof option === "boolean"
|
|
22
|
-
return {
|
|
23
|
-
ancestorResize: bool ? option : option.ancestorResize ?? true,
|
|
24
|
-
ancestorScroll: bool ? option : option.ancestorScroll ?? true,
|
|
25
|
-
referenceResize: bool ? option : option.referenceResize ?? true,
|
|
26
|
-
}
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export function autoUpdate(
|
|
30
|
-
reference: ReferenceElement,
|
|
31
|
-
floating: HTMLElement,
|
|
32
|
-
update: () => void,
|
|
33
|
-
options: boolean | AutoUpdateOptions = false,
|
|
34
|
-
) {
|
|
35
|
-
const { ancestorScroll, ancestorResize, referenceResize } = resolveOptions(options)
|
|
36
|
-
|
|
37
|
-
const useAncestors = ancestorScroll || ancestorResize
|
|
38
|
-
const ancestors: Ancestors = []
|
|
39
|
-
|
|
40
|
-
if (useAncestors && isHTMLElement(reference)) {
|
|
41
|
-
ancestors.push(...getOverflowAncestors(reference))
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
function addResizeListeners() {
|
|
45
|
-
let cleanups: VoidFunction[] = [trackElementRect(floating, { scope: "size", onChange: update })]
|
|
46
|
-
if (referenceResize && isHTMLElement(reference)) {
|
|
47
|
-
cleanups.push(trackElementRect(reference, { onChange: update }))
|
|
48
|
-
}
|
|
49
|
-
cleanups.push(callAll(...ancestors.map((el: any) => addDomEvent(el, "resize", update))))
|
|
50
|
-
return () => cleanups.forEach((fn) => fn())
|
|
51
|
-
}
|
|
52
|
-
|
|
53
|
-
function addScrollListeners() {
|
|
54
|
-
return callAll(...ancestors.map((el: any) => addDomEvent(el, "scroll", update, { passive: true })))
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
return callAll(addResizeListeners(), addScrollListeners())
|
|
58
|
-
}
|