@zag-js/popper 0.53.0 → 0.54.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.js +354 -1
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +324 -1
- package/dist/index.mjs.map +1 -1
- package/package.json +3 -3
package/dist/index.js
CHANGED
|
@@ -1,2 +1,355 @@
|
|
|
1
|
-
"use strict";
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var src_exports = {};
|
|
22
|
+
__export(src_exports, {
|
|
23
|
+
getPlacement: () => getPlacement,
|
|
24
|
+
getPlacementSide: () => getPlacementSide,
|
|
25
|
+
getPlacementStyles: () => getPlacementStyles,
|
|
26
|
+
isValidPlacement: () => isValidPlacement
|
|
27
|
+
});
|
|
28
|
+
module.exports = __toCommonJS(src_exports);
|
|
29
|
+
|
|
30
|
+
// src/get-placement.ts
|
|
31
|
+
var import_dom = require("@floating-ui/dom");
|
|
32
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
33
|
+
var import_utils = require("@zag-js/utils");
|
|
34
|
+
|
|
35
|
+
// src/get-anchor.ts
|
|
36
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
37
|
+
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
|
|
38
|
+
if (typeof DOMRect === "function") {
|
|
39
|
+
return new DOMRect(x, y, width, height);
|
|
40
|
+
}
|
|
41
|
+
const rect = {
|
|
42
|
+
x,
|
|
43
|
+
y,
|
|
44
|
+
width,
|
|
45
|
+
height,
|
|
46
|
+
top: y,
|
|
47
|
+
right: x + width,
|
|
48
|
+
bottom: y + height,
|
|
49
|
+
left: x
|
|
50
|
+
};
|
|
51
|
+
return { ...rect, toJSON: () => rect };
|
|
52
|
+
}
|
|
53
|
+
function getDOMRect(anchorRect) {
|
|
54
|
+
if (!anchorRect)
|
|
55
|
+
return createDOMRect();
|
|
56
|
+
const { x, y, width, height } = anchorRect;
|
|
57
|
+
return createDOMRect(x, y, width, height);
|
|
58
|
+
}
|
|
59
|
+
function getAnchorElement(anchorElement, getAnchorRect) {
|
|
60
|
+
return {
|
|
61
|
+
contextElement: (0, import_dom_query.isHTMLElement)(anchorElement) ? anchorElement : void 0,
|
|
62
|
+
getBoundingClientRect: () => {
|
|
63
|
+
const anchor = anchorElement;
|
|
64
|
+
const anchorRect = getAnchorRect?.(anchor);
|
|
65
|
+
if (anchorRect || !anchor) {
|
|
66
|
+
return getDOMRect(anchorRect);
|
|
67
|
+
}
|
|
68
|
+
return anchor.getBoundingClientRect();
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
// src/middleware.ts
|
|
74
|
+
var toVar = (value) => ({ variable: value, reference: `var(${value})` });
|
|
75
|
+
var cssVars = {
|
|
76
|
+
arrowSize: toVar("--arrow-size"),
|
|
77
|
+
arrowSizeHalf: toVar("--arrow-size-half"),
|
|
78
|
+
arrowBg: toVar("--arrow-background"),
|
|
79
|
+
transformOrigin: toVar("--transform-origin"),
|
|
80
|
+
arrowOffset: toVar("--arrow-offset")
|
|
81
|
+
};
|
|
82
|
+
var getTransformOrigin = (arrow2) => ({
|
|
83
|
+
top: "bottom center",
|
|
84
|
+
"top-start": arrow2 ? `${arrow2.x}px bottom` : "left bottom",
|
|
85
|
+
"top-end": arrow2 ? `${arrow2.x}px bottom` : "right bottom",
|
|
86
|
+
bottom: "top center",
|
|
87
|
+
"bottom-start": arrow2 ? `${arrow2.x}px top` : "top left",
|
|
88
|
+
"bottom-end": arrow2 ? `${arrow2.x}px top` : "top right",
|
|
89
|
+
left: "right center",
|
|
90
|
+
"left-start": arrow2 ? `right ${arrow2.y}px` : "right top",
|
|
91
|
+
"left-end": arrow2 ? `right ${arrow2.y}px` : "right bottom",
|
|
92
|
+
right: "left center",
|
|
93
|
+
"right-start": arrow2 ? `left ${arrow2.y}px` : "left top",
|
|
94
|
+
"right-end": arrow2 ? `left ${arrow2.y}px` : "left bottom"
|
|
95
|
+
});
|
|
96
|
+
var transformOriginMiddleware = {
|
|
97
|
+
name: "transformOrigin",
|
|
98
|
+
fn({ placement, elements, middlewareData }) {
|
|
99
|
+
const { arrow: arrow2 } = middlewareData;
|
|
100
|
+
const transformOrigin = getTransformOrigin(arrow2)[placement];
|
|
101
|
+
const { floating } = elements;
|
|
102
|
+
floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
|
|
103
|
+
return {
|
|
104
|
+
data: { transformOrigin }
|
|
105
|
+
};
|
|
106
|
+
}
|
|
107
|
+
};
|
|
108
|
+
var rectMiddleware = {
|
|
109
|
+
name: "rects",
|
|
110
|
+
fn({ rects }) {
|
|
111
|
+
return {
|
|
112
|
+
data: rects
|
|
113
|
+
};
|
|
114
|
+
}
|
|
115
|
+
};
|
|
116
|
+
var shiftArrowMiddleware = (arrowEl) => {
|
|
117
|
+
if (!arrowEl)
|
|
118
|
+
return;
|
|
119
|
+
return {
|
|
120
|
+
name: "shiftArrow",
|
|
121
|
+
fn({ placement, middlewareData }) {
|
|
122
|
+
if (!middlewareData.arrow)
|
|
123
|
+
return {};
|
|
124
|
+
const { x, y } = middlewareData.arrow;
|
|
125
|
+
const dir = placement.split("-")[0];
|
|
126
|
+
Object.assign(arrowEl.style, {
|
|
127
|
+
left: x != null ? `${x}px` : "",
|
|
128
|
+
top: y != null ? `${y}px` : "",
|
|
129
|
+
[dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
|
|
130
|
+
});
|
|
131
|
+
return {};
|
|
132
|
+
}
|
|
133
|
+
};
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
// src/placement.ts
|
|
137
|
+
function isValidPlacement(v) {
|
|
138
|
+
return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v);
|
|
139
|
+
}
|
|
140
|
+
function getPlacementDetails(placement) {
|
|
141
|
+
const [side, align] = placement.split("-");
|
|
142
|
+
return { side, align, hasAlign: align != null };
|
|
143
|
+
}
|
|
144
|
+
function getPlacementSide(placement) {
|
|
145
|
+
return placement.split("-")[0];
|
|
146
|
+
}
|
|
147
|
+
|
|
148
|
+
// src/get-placement.ts
|
|
149
|
+
var defaultOptions = {
|
|
150
|
+
strategy: "absolute",
|
|
151
|
+
placement: "bottom",
|
|
152
|
+
listeners: true,
|
|
153
|
+
gutter: 8,
|
|
154
|
+
flip: true,
|
|
155
|
+
slide: true,
|
|
156
|
+
overlap: false,
|
|
157
|
+
sameWidth: false,
|
|
158
|
+
fitViewport: false,
|
|
159
|
+
overflowPadding: 8,
|
|
160
|
+
arrowPadding: 4
|
|
161
|
+
};
|
|
162
|
+
function roundByDpr(win, value) {
|
|
163
|
+
const dpr = win.devicePixelRatio || 1;
|
|
164
|
+
return Math.round(value * dpr) / dpr;
|
|
165
|
+
}
|
|
166
|
+
function getBoundaryMiddleware(opts) {
|
|
167
|
+
return (0, import_utils.runIfFn)(opts.boundary);
|
|
168
|
+
}
|
|
169
|
+
function getArrowMiddleware(arrowElement, opts) {
|
|
170
|
+
if (!arrowElement)
|
|
171
|
+
return;
|
|
172
|
+
return (0, import_dom.arrow)({
|
|
173
|
+
element: arrowElement,
|
|
174
|
+
padding: opts.arrowPadding
|
|
175
|
+
});
|
|
176
|
+
}
|
|
177
|
+
function getOffsetMiddleware(arrowElement, opts) {
|
|
178
|
+
if ((0, import_utils.isNull)(opts.offset ?? opts.gutter))
|
|
179
|
+
return;
|
|
180
|
+
return (0, import_dom.offset)(({ placement }) => {
|
|
181
|
+
const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
|
|
182
|
+
const gutter = opts.offset?.mainAxis ?? opts.gutter;
|
|
183
|
+
const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
|
|
184
|
+
const { hasAlign } = getPlacementDetails(placement);
|
|
185
|
+
const shift2 = !hasAlign ? opts.shift : void 0;
|
|
186
|
+
const crossAxis = opts.offset?.crossAxis ?? shift2;
|
|
187
|
+
return (0, import_utils.compact)({
|
|
188
|
+
crossAxis,
|
|
189
|
+
mainAxis,
|
|
190
|
+
alignmentAxis: opts.shift
|
|
191
|
+
});
|
|
192
|
+
});
|
|
193
|
+
}
|
|
194
|
+
function getFlipMiddleware(opts) {
|
|
195
|
+
if (!opts.flip)
|
|
196
|
+
return;
|
|
197
|
+
return (0, import_dom.flip)({
|
|
198
|
+
boundary: getBoundaryMiddleware(opts),
|
|
199
|
+
padding: opts.overflowPadding,
|
|
200
|
+
fallbackPlacements: opts.flip === true ? void 0 : opts.flip
|
|
201
|
+
});
|
|
202
|
+
}
|
|
203
|
+
function getShiftMiddleware(opts) {
|
|
204
|
+
if (!opts.slide && !opts.overlap)
|
|
205
|
+
return;
|
|
206
|
+
return (0, import_dom.shift)({
|
|
207
|
+
boundary: getBoundaryMiddleware(opts),
|
|
208
|
+
mainAxis: opts.slide,
|
|
209
|
+
crossAxis: opts.overlap,
|
|
210
|
+
padding: opts.overflowPadding,
|
|
211
|
+
limiter: (0, import_dom.limitShift)()
|
|
212
|
+
});
|
|
213
|
+
}
|
|
214
|
+
function getSizeMiddleware(opts) {
|
|
215
|
+
return (0, import_dom.size)({
|
|
216
|
+
padding: opts.overflowPadding,
|
|
217
|
+
apply({ elements, rects, availableHeight, availableWidth }) {
|
|
218
|
+
const floating = elements.floating;
|
|
219
|
+
const referenceWidth = Math.round(rects.reference.width);
|
|
220
|
+
availableWidth = Math.floor(availableWidth);
|
|
221
|
+
availableHeight = Math.floor(availableHeight);
|
|
222
|
+
floating.style.setProperty("--reference-width", `${referenceWidth}px`);
|
|
223
|
+
floating.style.setProperty("--available-width", `${availableWidth}px`);
|
|
224
|
+
floating.style.setProperty("--available-height", `${availableHeight}px`);
|
|
225
|
+
}
|
|
226
|
+
});
|
|
227
|
+
}
|
|
228
|
+
function getAutoUpdateOptions(opts) {
|
|
229
|
+
if (!opts)
|
|
230
|
+
return {};
|
|
231
|
+
if (opts === true) {
|
|
232
|
+
return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true };
|
|
233
|
+
}
|
|
234
|
+
return opts;
|
|
235
|
+
}
|
|
236
|
+
function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
237
|
+
const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect);
|
|
238
|
+
if (!floating || !reference)
|
|
239
|
+
return;
|
|
240
|
+
const options = Object.assign({}, defaultOptions, opts);
|
|
241
|
+
const arrowEl = floating.querySelector("[data-part=arrow]");
|
|
242
|
+
const middleware = [
|
|
243
|
+
getOffsetMiddleware(arrowEl, options),
|
|
244
|
+
getFlipMiddleware(options),
|
|
245
|
+
getShiftMiddleware(options),
|
|
246
|
+
getArrowMiddleware(arrowEl, options),
|
|
247
|
+
shiftArrowMiddleware(arrowEl),
|
|
248
|
+
transformOriginMiddleware,
|
|
249
|
+
getSizeMiddleware(options),
|
|
250
|
+
rectMiddleware
|
|
251
|
+
];
|
|
252
|
+
const { placement, strategy, onComplete, onPositioned } = options;
|
|
253
|
+
const updatePosition = async () => {
|
|
254
|
+
if (!reference || !floating)
|
|
255
|
+
return;
|
|
256
|
+
const pos = await (0, import_dom.computePosition)(reference, floating, {
|
|
257
|
+
placement,
|
|
258
|
+
middleware,
|
|
259
|
+
strategy
|
|
260
|
+
});
|
|
261
|
+
onComplete?.(pos);
|
|
262
|
+
onPositioned?.({ placed: true });
|
|
263
|
+
const win = (0, import_dom_query2.getWindow)(floating);
|
|
264
|
+
const x = roundByDpr(win, pos.x);
|
|
265
|
+
const y = roundByDpr(win, pos.y);
|
|
266
|
+
floating.style.setProperty("--x", `${x}px`);
|
|
267
|
+
floating.style.setProperty("--y", `${y}px`);
|
|
268
|
+
const contentEl = floating.firstElementChild;
|
|
269
|
+
if (contentEl) {
|
|
270
|
+
const zIndex = win.getComputedStyle(contentEl).zIndex;
|
|
271
|
+
floating.style.setProperty("--z-index", zIndex);
|
|
272
|
+
}
|
|
273
|
+
};
|
|
274
|
+
const update = async () => {
|
|
275
|
+
if (opts.updatePosition) {
|
|
276
|
+
await opts.updatePosition({ updatePosition });
|
|
277
|
+
onPositioned?.({ placed: true });
|
|
278
|
+
} else {
|
|
279
|
+
await updatePosition();
|
|
280
|
+
}
|
|
281
|
+
};
|
|
282
|
+
const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
|
|
283
|
+
const cancelAutoUpdate = options.listeners ? (0, import_dom.autoUpdate)(reference, floating, update, autoUpdateOptions) : import_utils.noop;
|
|
284
|
+
update();
|
|
285
|
+
return () => {
|
|
286
|
+
cancelAutoUpdate?.();
|
|
287
|
+
onPositioned?.({ placed: false });
|
|
288
|
+
};
|
|
289
|
+
}
|
|
290
|
+
function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
|
|
291
|
+
const { defer, ...options } = opts;
|
|
292
|
+
const func = defer ? import_dom_query2.raf : (v) => v();
|
|
293
|
+
const cleanups = [];
|
|
294
|
+
cleanups.push(
|
|
295
|
+
func(() => {
|
|
296
|
+
const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
|
|
297
|
+
const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
|
|
298
|
+
cleanups.push(getPlacementImpl(reference, floating, options));
|
|
299
|
+
})
|
|
300
|
+
);
|
|
301
|
+
return () => {
|
|
302
|
+
cleanups.forEach((fn) => fn?.());
|
|
303
|
+
};
|
|
304
|
+
}
|
|
305
|
+
|
|
306
|
+
// src/get-styles.ts
|
|
307
|
+
var ARROW_FLOATING_STYLE = {
|
|
308
|
+
bottom: "rotate(45deg)",
|
|
309
|
+
left: "rotate(135deg)",
|
|
310
|
+
top: "rotate(225deg)",
|
|
311
|
+
right: "rotate(315deg)"
|
|
312
|
+
};
|
|
313
|
+
function getPlacementStyles(options = {}) {
|
|
314
|
+
const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
|
|
315
|
+
return {
|
|
316
|
+
arrow: {
|
|
317
|
+
position: "absolute",
|
|
318
|
+
width: cssVars.arrowSize.reference,
|
|
319
|
+
height: cssVars.arrowSize.reference,
|
|
320
|
+
[cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
|
|
321
|
+
[cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
|
|
322
|
+
},
|
|
323
|
+
arrowTip: {
|
|
324
|
+
transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
|
|
325
|
+
background: cssVars.arrowBg.reference,
|
|
326
|
+
top: "0",
|
|
327
|
+
left: "0",
|
|
328
|
+
width: "100%",
|
|
329
|
+
height: "100%",
|
|
330
|
+
position: "absolute",
|
|
331
|
+
zIndex: "inherit"
|
|
332
|
+
},
|
|
333
|
+
floating: {
|
|
334
|
+
position: strategy,
|
|
335
|
+
isolation: "isolate",
|
|
336
|
+
minWidth: sameWidth ? void 0 : "max-content",
|
|
337
|
+
width: sameWidth ? "var(--reference-width)" : void 0,
|
|
338
|
+
maxWidth: fitViewport ? "var(--available-width)" : void 0,
|
|
339
|
+
maxHeight: fitViewport ? "var(--available-height)" : void 0,
|
|
340
|
+
top: "0px",
|
|
341
|
+
left: "0px",
|
|
342
|
+
// move off-screen if placement is not defined
|
|
343
|
+
transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
|
|
344
|
+
zIndex: "var(--z-index)"
|
|
345
|
+
}
|
|
346
|
+
};
|
|
347
|
+
}
|
|
348
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
349
|
+
0 && (module.exports = {
|
|
350
|
+
getPlacement,
|
|
351
|
+
getPlacementSide,
|
|
352
|
+
getPlacementStyles,
|
|
353
|
+
isValidPlacement
|
|
354
|
+
});
|
|
2
355
|
//# sourceMappingURL=index.js.map
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport { getPlacementSide, isValidPlacement } from \"./placement\"\nexport type {\n AnchorRect,\n AutoUpdateOptions,\n Boundary,\n ComputePositionReturn,\n Placement,\n PlacementAlign,\n PlacementSide,\n PositioningOptions,\n} from \"./types\"\n","import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n slide: true,\n overlap: false,\n sameWidth: false,\n fitViewport: false,\n overflowPadding: 8,\n arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (isNull(opts.offset ?? opts.gutter)) return\n return offset(({ placement }) => {\n const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n const gutter = opts.offset?.mainAxis ?? opts.gutter\n const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n const { hasAlign } = getPlacementDetails(placement)\n const shift = !hasAlign ? opts.shift : undefined\n const crossAxis = opts.offset?.crossAxis ?? shift\n\n return compact({\n crossAxis: crossAxis,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: getBoundaryMiddleware(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: getBoundaryMiddleware(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n limiter: limitShift(),\n })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n return size({\n padding: opts.overflowPadding,\n apply({ elements, rects, availableHeight, availableWidth }) {\n const floating = elements.floating\n\n const referenceWidth = Math.round(rects.reference.width)\n availableWidth = Math.floor(availableWidth)\n availableHeight = Math.floor(availableHeight)\n\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n if (!opts) return {}\n if (opts === true) {\n return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n }\n return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n if (!floating || !reference) return\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n const middleware: (Middleware | undefined)[] = [\n getOffsetMiddleware(arrowEl, options),\n getFlipMiddleware(options),\n getShiftMiddleware(options),\n getArrowMiddleware(arrowEl, options),\n shiftArrowMiddleware(arrowEl),\n transformOriginMiddleware,\n getSizeMiddleware(options),\n rectMiddleware,\n ]\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n const { placement, strategy, onComplete, onPositioned } = options\n\n const updatePosition = async () => {\n if (!reference || !floating) return\n\n const pos = await computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n })\n\n onComplete?.(pos)\n onPositioned?.({ placed: true })\n\n const win = getWindow(floating)\n const x = roundByDpr(win, pos.x)\n const y = roundByDpr(win, pos.y)\n\n floating.style.setProperty(\"--x\", `${x}px`)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n const contentEl = floating.firstElementChild\n\n if (contentEl) {\n const zIndex = win.getComputedStyle(contentEl).zIndex\n floating.style.setProperty(\"--z-index\", zIndex)\n }\n }\n\n const update = async () => {\n if (opts.updatePosition) {\n await opts.updatePosition({ updatePosition })\n onPositioned?.({ placed: true })\n } else {\n await updatePosition()\n }\n }\n\n const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n update()\n\n return () => {\n cancelAutoUpdate?.()\n onPositioned?.({ placed: false })\n }\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...options } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n if (typeof DOMRect === \"function\") {\n return new DOMRect(x, y, width, height)\n }\n const rect = {\n x,\n y,\n width,\n height,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x,\n }\n return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n if (!anchorRect) return createDOMRect()\n const { x, y, width, height } = anchorRect\n return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n anchorElement: MaybeRectElement,\n getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n return {\n contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n getBoundingClientRect: () => {\n const anchor = anchorElement\n const anchorRect = getAnchorRect?.(anchor)\n if (anchorRect || !anchor) {\n return getDOMRect(anchorRect)\n }\n return anchor.getBoundingClientRect()\n },\n }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n if (!arrowEl) return\n return {\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n if (!middlewareData.arrow) return {}\n const { x, y } = middlewareData.arrow\n const dir = placement.split(\"-\")[0] as PlacementSide\n\n Object.assign(arrowEl.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n\n return {}\n },\n }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n isolation: \"isolate\",\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n // move off-screen if placement is not defined\n transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n zIndex: \"var(--z-index)\",\n } as const,\n }\n}\n"],"mappings":"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","names":["import_dom_query","arrow","shift"]}
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["export { getPlacement } from \"./get-placement\"\nexport { getPlacementStyles, type GetPlacementStylesOptions } from \"./get-styles\"\nexport { getPlacementSide, isValidPlacement } from \"./placement\"\nexport type {\n AnchorRect,\n AutoUpdateOptions,\n Boundary,\n ComputePositionReturn,\n Placement,\n PlacementAlign,\n PlacementSide,\n PositioningOptions,\n} from \"./types\"\n","import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n slide: true,\n overlap: false,\n sameWidth: false,\n fitViewport: false,\n overflowPadding: 8,\n arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (isNull(opts.offset ?? opts.gutter)) return\n return offset(({ placement }) => {\n const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n const gutter = opts.offset?.mainAxis ?? opts.gutter\n const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n const { hasAlign } = getPlacementDetails(placement)\n const shift = !hasAlign ? opts.shift : undefined\n const crossAxis = opts.offset?.crossAxis ?? shift\n\n return compact({\n crossAxis: crossAxis,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: getBoundaryMiddleware(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: getBoundaryMiddleware(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n limiter: limitShift(),\n })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n return size({\n padding: opts.overflowPadding,\n apply({ elements, rects, availableHeight, availableWidth }) {\n const floating = elements.floating\n\n const referenceWidth = Math.round(rects.reference.width)\n availableWidth = Math.floor(availableWidth)\n availableHeight = Math.floor(availableHeight)\n\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n if (!opts) return {}\n if (opts === true) {\n return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n }\n return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n if (!floating || !reference) return\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n const middleware: (Middleware | undefined)[] = [\n getOffsetMiddleware(arrowEl, options),\n getFlipMiddleware(options),\n getShiftMiddleware(options),\n getArrowMiddleware(arrowEl, options),\n shiftArrowMiddleware(arrowEl),\n transformOriginMiddleware,\n getSizeMiddleware(options),\n rectMiddleware,\n ]\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n const { placement, strategy, onComplete, onPositioned } = options\n\n const updatePosition = async () => {\n if (!reference || !floating) return\n\n const pos = await computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n })\n\n onComplete?.(pos)\n onPositioned?.({ placed: true })\n\n const win = getWindow(floating)\n const x = roundByDpr(win, pos.x)\n const y = roundByDpr(win, pos.y)\n\n floating.style.setProperty(\"--x\", `${x}px`)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n const contentEl = floating.firstElementChild\n\n if (contentEl) {\n const zIndex = win.getComputedStyle(contentEl).zIndex\n floating.style.setProperty(\"--z-index\", zIndex)\n }\n }\n\n const update = async () => {\n if (opts.updatePosition) {\n await opts.updatePosition({ updatePosition })\n onPositioned?.({ placed: true })\n } else {\n await updatePosition()\n }\n }\n\n const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n update()\n\n return () => {\n cancelAutoUpdate?.()\n onPositioned?.({ placed: false })\n }\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...options } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n if (typeof DOMRect === \"function\") {\n return new DOMRect(x, y, width, height)\n }\n const rect = {\n x,\n y,\n width,\n height,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x,\n }\n return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n if (!anchorRect) return createDOMRect()\n const { x, y, width, height } = anchorRect\n return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n anchorElement: MaybeRectElement,\n getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n return {\n contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n getBoundingClientRect: () => {\n const anchor = anchorElement\n const anchorRect = getAnchorRect?.(anchor)\n if (anchorRect || !anchor) {\n return getDOMRect(anchorRect)\n }\n return anchor.getBoundingClientRect()\n },\n }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n if (!arrowEl) return\n return {\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n if (!middlewareData.arrow) return {}\n const { x, y } = middlewareData.arrow\n const dir = placement.split(\"-\")[0] as PlacementSide\n\n Object.assign(arrowEl.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n\n return {}\n },\n }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n isolation: \"isolate\",\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n // move off-screen if placement is not defined\n transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n zIndex: \"var(--z-index)\",\n } as const,\n }\n}\n"],"mappings":"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","names":["import_dom_query","arrow","shift"]}
|
package/dist/index.mjs
CHANGED
|
@@ -1,2 +1,325 @@
|
|
|
1
|
-
|
|
1
|
+
// src/get-placement.ts
|
|
2
|
+
import { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from "@floating-ui/dom";
|
|
3
|
+
import { getWindow, raf } from "@zag-js/dom-query";
|
|
4
|
+
import { compact, isNull, noop, runIfFn } from "@zag-js/utils";
|
|
5
|
+
|
|
6
|
+
// src/get-anchor.ts
|
|
7
|
+
import { isHTMLElement } from "@zag-js/dom-query";
|
|
8
|
+
function createDOMRect(x = 0, y = 0, width = 0, height = 0) {
|
|
9
|
+
if (typeof DOMRect === "function") {
|
|
10
|
+
return new DOMRect(x, y, width, height);
|
|
11
|
+
}
|
|
12
|
+
const rect = {
|
|
13
|
+
x,
|
|
14
|
+
y,
|
|
15
|
+
width,
|
|
16
|
+
height,
|
|
17
|
+
top: y,
|
|
18
|
+
right: x + width,
|
|
19
|
+
bottom: y + height,
|
|
20
|
+
left: x
|
|
21
|
+
};
|
|
22
|
+
return { ...rect, toJSON: () => rect };
|
|
23
|
+
}
|
|
24
|
+
function getDOMRect(anchorRect) {
|
|
25
|
+
if (!anchorRect)
|
|
26
|
+
return createDOMRect();
|
|
27
|
+
const { x, y, width, height } = anchorRect;
|
|
28
|
+
return createDOMRect(x, y, width, height);
|
|
29
|
+
}
|
|
30
|
+
function getAnchorElement(anchorElement, getAnchorRect) {
|
|
31
|
+
return {
|
|
32
|
+
contextElement: isHTMLElement(anchorElement) ? anchorElement : void 0,
|
|
33
|
+
getBoundingClientRect: () => {
|
|
34
|
+
const anchor = anchorElement;
|
|
35
|
+
const anchorRect = getAnchorRect?.(anchor);
|
|
36
|
+
if (anchorRect || !anchor) {
|
|
37
|
+
return getDOMRect(anchorRect);
|
|
38
|
+
}
|
|
39
|
+
return anchor.getBoundingClientRect();
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
// src/middleware.ts
|
|
45
|
+
var toVar = (value) => ({ variable: value, reference: `var(${value})` });
|
|
46
|
+
var cssVars = {
|
|
47
|
+
arrowSize: toVar("--arrow-size"),
|
|
48
|
+
arrowSizeHalf: toVar("--arrow-size-half"),
|
|
49
|
+
arrowBg: toVar("--arrow-background"),
|
|
50
|
+
transformOrigin: toVar("--transform-origin"),
|
|
51
|
+
arrowOffset: toVar("--arrow-offset")
|
|
52
|
+
};
|
|
53
|
+
var getTransformOrigin = (arrow2) => ({
|
|
54
|
+
top: "bottom center",
|
|
55
|
+
"top-start": arrow2 ? `${arrow2.x}px bottom` : "left bottom",
|
|
56
|
+
"top-end": arrow2 ? `${arrow2.x}px bottom` : "right bottom",
|
|
57
|
+
bottom: "top center",
|
|
58
|
+
"bottom-start": arrow2 ? `${arrow2.x}px top` : "top left",
|
|
59
|
+
"bottom-end": arrow2 ? `${arrow2.x}px top` : "top right",
|
|
60
|
+
left: "right center",
|
|
61
|
+
"left-start": arrow2 ? `right ${arrow2.y}px` : "right top",
|
|
62
|
+
"left-end": arrow2 ? `right ${arrow2.y}px` : "right bottom",
|
|
63
|
+
right: "left center",
|
|
64
|
+
"right-start": arrow2 ? `left ${arrow2.y}px` : "left top",
|
|
65
|
+
"right-end": arrow2 ? `left ${arrow2.y}px` : "left bottom"
|
|
66
|
+
});
|
|
67
|
+
var transformOriginMiddleware = {
|
|
68
|
+
name: "transformOrigin",
|
|
69
|
+
fn({ placement, elements, middlewareData }) {
|
|
70
|
+
const { arrow: arrow2 } = middlewareData;
|
|
71
|
+
const transformOrigin = getTransformOrigin(arrow2)[placement];
|
|
72
|
+
const { floating } = elements;
|
|
73
|
+
floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin);
|
|
74
|
+
return {
|
|
75
|
+
data: { transformOrigin }
|
|
76
|
+
};
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
var rectMiddleware = {
|
|
80
|
+
name: "rects",
|
|
81
|
+
fn({ rects }) {
|
|
82
|
+
return {
|
|
83
|
+
data: rects
|
|
84
|
+
};
|
|
85
|
+
}
|
|
86
|
+
};
|
|
87
|
+
var shiftArrowMiddleware = (arrowEl) => {
|
|
88
|
+
if (!arrowEl)
|
|
89
|
+
return;
|
|
90
|
+
return {
|
|
91
|
+
name: "shiftArrow",
|
|
92
|
+
fn({ placement, middlewareData }) {
|
|
93
|
+
if (!middlewareData.arrow)
|
|
94
|
+
return {};
|
|
95
|
+
const { x, y } = middlewareData.arrow;
|
|
96
|
+
const dir = placement.split("-")[0];
|
|
97
|
+
Object.assign(arrowEl.style, {
|
|
98
|
+
left: x != null ? `${x}px` : "",
|
|
99
|
+
top: y != null ? `${y}px` : "",
|
|
100
|
+
[dir]: `calc(100% + ${cssVars.arrowOffset.reference})`
|
|
101
|
+
});
|
|
102
|
+
return {};
|
|
103
|
+
}
|
|
104
|
+
};
|
|
105
|
+
};
|
|
106
|
+
|
|
107
|
+
// src/placement.ts
|
|
108
|
+
function isValidPlacement(v) {
|
|
109
|
+
return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v);
|
|
110
|
+
}
|
|
111
|
+
function getPlacementDetails(placement) {
|
|
112
|
+
const [side, align] = placement.split("-");
|
|
113
|
+
return { side, align, hasAlign: align != null };
|
|
114
|
+
}
|
|
115
|
+
function getPlacementSide(placement) {
|
|
116
|
+
return placement.split("-")[0];
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// src/get-placement.ts
|
|
120
|
+
var defaultOptions = {
|
|
121
|
+
strategy: "absolute",
|
|
122
|
+
placement: "bottom",
|
|
123
|
+
listeners: true,
|
|
124
|
+
gutter: 8,
|
|
125
|
+
flip: true,
|
|
126
|
+
slide: true,
|
|
127
|
+
overlap: false,
|
|
128
|
+
sameWidth: false,
|
|
129
|
+
fitViewport: false,
|
|
130
|
+
overflowPadding: 8,
|
|
131
|
+
arrowPadding: 4
|
|
132
|
+
};
|
|
133
|
+
function roundByDpr(win, value) {
|
|
134
|
+
const dpr = win.devicePixelRatio || 1;
|
|
135
|
+
return Math.round(value * dpr) / dpr;
|
|
136
|
+
}
|
|
137
|
+
function getBoundaryMiddleware(opts) {
|
|
138
|
+
return runIfFn(opts.boundary);
|
|
139
|
+
}
|
|
140
|
+
function getArrowMiddleware(arrowElement, opts) {
|
|
141
|
+
if (!arrowElement)
|
|
142
|
+
return;
|
|
143
|
+
return arrow({
|
|
144
|
+
element: arrowElement,
|
|
145
|
+
padding: opts.arrowPadding
|
|
146
|
+
});
|
|
147
|
+
}
|
|
148
|
+
function getOffsetMiddleware(arrowElement, opts) {
|
|
149
|
+
if (isNull(opts.offset ?? opts.gutter))
|
|
150
|
+
return;
|
|
151
|
+
return offset(({ placement }) => {
|
|
152
|
+
const arrowOffset = (arrowElement?.clientHeight || 0) / 2;
|
|
153
|
+
const gutter = opts.offset?.mainAxis ?? opts.gutter;
|
|
154
|
+
const mainAxis = typeof gutter === "number" ? gutter + arrowOffset : gutter ?? arrowOffset;
|
|
155
|
+
const { hasAlign } = getPlacementDetails(placement);
|
|
156
|
+
const shift2 = !hasAlign ? opts.shift : void 0;
|
|
157
|
+
const crossAxis = opts.offset?.crossAxis ?? shift2;
|
|
158
|
+
return compact({
|
|
159
|
+
crossAxis,
|
|
160
|
+
mainAxis,
|
|
161
|
+
alignmentAxis: opts.shift
|
|
162
|
+
});
|
|
163
|
+
});
|
|
164
|
+
}
|
|
165
|
+
function getFlipMiddleware(opts) {
|
|
166
|
+
if (!opts.flip)
|
|
167
|
+
return;
|
|
168
|
+
return flip({
|
|
169
|
+
boundary: getBoundaryMiddleware(opts),
|
|
170
|
+
padding: opts.overflowPadding,
|
|
171
|
+
fallbackPlacements: opts.flip === true ? void 0 : opts.flip
|
|
172
|
+
});
|
|
173
|
+
}
|
|
174
|
+
function getShiftMiddleware(opts) {
|
|
175
|
+
if (!opts.slide && !opts.overlap)
|
|
176
|
+
return;
|
|
177
|
+
return shift({
|
|
178
|
+
boundary: getBoundaryMiddleware(opts),
|
|
179
|
+
mainAxis: opts.slide,
|
|
180
|
+
crossAxis: opts.overlap,
|
|
181
|
+
padding: opts.overflowPadding,
|
|
182
|
+
limiter: limitShift()
|
|
183
|
+
});
|
|
184
|
+
}
|
|
185
|
+
function getSizeMiddleware(opts) {
|
|
186
|
+
return size({
|
|
187
|
+
padding: opts.overflowPadding,
|
|
188
|
+
apply({ elements, rects, availableHeight, availableWidth }) {
|
|
189
|
+
const floating = elements.floating;
|
|
190
|
+
const referenceWidth = Math.round(rects.reference.width);
|
|
191
|
+
availableWidth = Math.floor(availableWidth);
|
|
192
|
+
availableHeight = Math.floor(availableHeight);
|
|
193
|
+
floating.style.setProperty("--reference-width", `${referenceWidth}px`);
|
|
194
|
+
floating.style.setProperty("--available-width", `${availableWidth}px`);
|
|
195
|
+
floating.style.setProperty("--available-height", `${availableHeight}px`);
|
|
196
|
+
}
|
|
197
|
+
});
|
|
198
|
+
}
|
|
199
|
+
function getAutoUpdateOptions(opts) {
|
|
200
|
+
if (!opts)
|
|
201
|
+
return {};
|
|
202
|
+
if (opts === true) {
|
|
203
|
+
return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true };
|
|
204
|
+
}
|
|
205
|
+
return opts;
|
|
206
|
+
}
|
|
207
|
+
function getPlacementImpl(referenceOrVirtual, floating, opts = {}) {
|
|
208
|
+
const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect);
|
|
209
|
+
if (!floating || !reference)
|
|
210
|
+
return;
|
|
211
|
+
const options = Object.assign({}, defaultOptions, opts);
|
|
212
|
+
const arrowEl = floating.querySelector("[data-part=arrow]");
|
|
213
|
+
const middleware = [
|
|
214
|
+
getOffsetMiddleware(arrowEl, options),
|
|
215
|
+
getFlipMiddleware(options),
|
|
216
|
+
getShiftMiddleware(options),
|
|
217
|
+
getArrowMiddleware(arrowEl, options),
|
|
218
|
+
shiftArrowMiddleware(arrowEl),
|
|
219
|
+
transformOriginMiddleware,
|
|
220
|
+
getSizeMiddleware(options),
|
|
221
|
+
rectMiddleware
|
|
222
|
+
];
|
|
223
|
+
const { placement, strategy, onComplete, onPositioned } = options;
|
|
224
|
+
const updatePosition = async () => {
|
|
225
|
+
if (!reference || !floating)
|
|
226
|
+
return;
|
|
227
|
+
const pos = await computePosition(reference, floating, {
|
|
228
|
+
placement,
|
|
229
|
+
middleware,
|
|
230
|
+
strategy
|
|
231
|
+
});
|
|
232
|
+
onComplete?.(pos);
|
|
233
|
+
onPositioned?.({ placed: true });
|
|
234
|
+
const win = getWindow(floating);
|
|
235
|
+
const x = roundByDpr(win, pos.x);
|
|
236
|
+
const y = roundByDpr(win, pos.y);
|
|
237
|
+
floating.style.setProperty("--x", `${x}px`);
|
|
238
|
+
floating.style.setProperty("--y", `${y}px`);
|
|
239
|
+
const contentEl = floating.firstElementChild;
|
|
240
|
+
if (contentEl) {
|
|
241
|
+
const zIndex = win.getComputedStyle(contentEl).zIndex;
|
|
242
|
+
floating.style.setProperty("--z-index", zIndex);
|
|
243
|
+
}
|
|
244
|
+
};
|
|
245
|
+
const update = async () => {
|
|
246
|
+
if (opts.updatePosition) {
|
|
247
|
+
await opts.updatePosition({ updatePosition });
|
|
248
|
+
onPositioned?.({ placed: true });
|
|
249
|
+
} else {
|
|
250
|
+
await updatePosition();
|
|
251
|
+
}
|
|
252
|
+
};
|
|
253
|
+
const autoUpdateOptions = getAutoUpdateOptions(options.listeners);
|
|
254
|
+
const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop;
|
|
255
|
+
update();
|
|
256
|
+
return () => {
|
|
257
|
+
cancelAutoUpdate?.();
|
|
258
|
+
onPositioned?.({ placed: false });
|
|
259
|
+
};
|
|
260
|
+
}
|
|
261
|
+
function getPlacement(referenceOrFn, floatingOrFn, opts = {}) {
|
|
262
|
+
const { defer, ...options } = opts;
|
|
263
|
+
const func = defer ? raf : (v) => v();
|
|
264
|
+
const cleanups = [];
|
|
265
|
+
cleanups.push(
|
|
266
|
+
func(() => {
|
|
267
|
+
const reference = typeof referenceOrFn === "function" ? referenceOrFn() : referenceOrFn;
|
|
268
|
+
const floating = typeof floatingOrFn === "function" ? floatingOrFn() : floatingOrFn;
|
|
269
|
+
cleanups.push(getPlacementImpl(reference, floating, options));
|
|
270
|
+
})
|
|
271
|
+
);
|
|
272
|
+
return () => {
|
|
273
|
+
cleanups.forEach((fn) => fn?.());
|
|
274
|
+
};
|
|
275
|
+
}
|
|
276
|
+
|
|
277
|
+
// src/get-styles.ts
|
|
278
|
+
var ARROW_FLOATING_STYLE = {
|
|
279
|
+
bottom: "rotate(45deg)",
|
|
280
|
+
left: "rotate(135deg)",
|
|
281
|
+
top: "rotate(225deg)",
|
|
282
|
+
right: "rotate(315deg)"
|
|
283
|
+
};
|
|
284
|
+
function getPlacementStyles(options = {}) {
|
|
285
|
+
const { placement, sameWidth, fitViewport, strategy = "absolute" } = options;
|
|
286
|
+
return {
|
|
287
|
+
arrow: {
|
|
288
|
+
position: "absolute",
|
|
289
|
+
width: cssVars.arrowSize.reference,
|
|
290
|
+
height: cssVars.arrowSize.reference,
|
|
291
|
+
[cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,
|
|
292
|
+
[cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`
|
|
293
|
+
},
|
|
294
|
+
arrowTip: {
|
|
295
|
+
transform: placement ? ARROW_FLOATING_STYLE[placement.split("-")[0]] : void 0,
|
|
296
|
+
background: cssVars.arrowBg.reference,
|
|
297
|
+
top: "0",
|
|
298
|
+
left: "0",
|
|
299
|
+
width: "100%",
|
|
300
|
+
height: "100%",
|
|
301
|
+
position: "absolute",
|
|
302
|
+
zIndex: "inherit"
|
|
303
|
+
},
|
|
304
|
+
floating: {
|
|
305
|
+
position: strategy,
|
|
306
|
+
isolation: "isolate",
|
|
307
|
+
minWidth: sameWidth ? void 0 : "max-content",
|
|
308
|
+
width: sameWidth ? "var(--reference-width)" : void 0,
|
|
309
|
+
maxWidth: fitViewport ? "var(--available-width)" : void 0,
|
|
310
|
+
maxHeight: fitViewport ? "var(--available-height)" : void 0,
|
|
311
|
+
top: "0px",
|
|
312
|
+
left: "0px",
|
|
313
|
+
// move off-screen if placement is not defined
|
|
314
|
+
transform: placement ? "translate3d(var(--x), var(--y), 0)" : "translate3d(0, -100vh, 0)",
|
|
315
|
+
zIndex: "var(--z-index)"
|
|
316
|
+
}
|
|
317
|
+
};
|
|
318
|
+
}
|
|
319
|
+
export {
|
|
320
|
+
getPlacement,
|
|
321
|
+
getPlacementSide,
|
|
322
|
+
getPlacementStyles,
|
|
323
|
+
isValidPlacement
|
|
324
|
+
};
|
|
2
325
|
//# sourceMappingURL=index.mjs.map
|
package/dist/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n slide: true,\n overlap: false,\n sameWidth: false,\n fitViewport: false,\n overflowPadding: 8,\n arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (isNull(opts.offset ?? opts.gutter)) return\n return offset(({ placement }) => {\n const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n const gutter = opts.offset?.mainAxis ?? opts.gutter\n const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n const { hasAlign } = getPlacementDetails(placement)\n const shift = !hasAlign ? opts.shift : undefined\n const crossAxis = opts.offset?.crossAxis ?? shift\n\n return compact({\n crossAxis: crossAxis,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: getBoundaryMiddleware(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: getBoundaryMiddleware(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n limiter: limitShift(),\n })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n return size({\n padding: opts.overflowPadding,\n apply({ elements, rects, availableHeight, availableWidth }) {\n const floating = elements.floating\n\n const referenceWidth = Math.round(rects.reference.width)\n availableWidth = Math.floor(availableWidth)\n availableHeight = Math.floor(availableHeight)\n\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n if (!opts) return {}\n if (opts === true) {\n return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n }\n return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n if (!floating || !reference) return\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n const middleware: (Middleware | undefined)[] = [\n getOffsetMiddleware(arrowEl, options),\n getFlipMiddleware(options),\n getShiftMiddleware(options),\n getArrowMiddleware(arrowEl, options),\n shiftArrowMiddleware(arrowEl),\n transformOriginMiddleware,\n getSizeMiddleware(options),\n rectMiddleware,\n ]\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n const { placement, strategy, onComplete, onPositioned } = options\n\n const updatePosition = async () => {\n if (!reference || !floating) return\n\n const pos = await computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n })\n\n onComplete?.(pos)\n onPositioned?.({ placed: true })\n\n const win = getWindow(floating)\n const x = roundByDpr(win, pos.x)\n const y = roundByDpr(win, pos.y)\n\n floating.style.setProperty(\"--x\", `${x}px`)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n const contentEl = floating.firstElementChild\n\n if (contentEl) {\n const zIndex = win.getComputedStyle(contentEl).zIndex\n floating.style.setProperty(\"--z-index\", zIndex)\n }\n }\n\n const update = async () => {\n if (opts.updatePosition) {\n await opts.updatePosition({ updatePosition })\n onPositioned?.({ placed: true })\n } else {\n await updatePosition()\n }\n }\n\n const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n update()\n\n return () => {\n cancelAutoUpdate?.()\n onPositioned?.({ placed: false })\n }\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...options } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n if (typeof DOMRect === \"function\") {\n return new DOMRect(x, y, width, height)\n }\n const rect = {\n x,\n y,\n width,\n height,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x,\n }\n return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n if (!anchorRect) return createDOMRect()\n const { x, y, width, height } = anchorRect\n return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n anchorElement: MaybeRectElement,\n getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n return {\n contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n getBoundingClientRect: () => {\n const anchor = anchorElement\n const anchorRect = getAnchorRect?.(anchor)\n if (anchorRect || !anchor) {\n return getDOMRect(anchorRect)\n }\n return anchor.getBoundingClientRect()\n },\n }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n if (!arrowEl) return\n return {\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n if (!middlewareData.arrow) return {}\n const { x, y } = middlewareData.arrow\n const dir = placement.split(\"-\")[0] as PlacementSide\n\n Object.assign(arrowEl.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n\n return {}\n },\n }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n isolation: \"isolate\",\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n // move off-screen if placement is not defined\n transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n zIndex: \"var(--z-index)\",\n } as const,\n }\n}\n"],"mappings":"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","names":["arrow","shift"]}
|
|
1
|
+
{"version":3,"sources":["../src/get-placement.ts","../src/get-anchor.ts","../src/middleware.ts","../src/placement.ts","../src/get-styles.ts"],"sourcesContent":["import type { AutoUpdateOptions, Middleware } from \"@floating-ui/dom\"\nimport { arrow, autoUpdate, computePosition, flip, limitShift, offset, shift, size } from \"@floating-ui/dom\"\nimport { getWindow, raf } from \"@zag-js/dom-query\"\nimport { compact, isNull, noop, runIfFn } from \"@zag-js/utils\"\nimport { getAnchorElement } from \"./get-anchor\"\nimport { rectMiddleware, shiftArrowMiddleware, transformOriginMiddleware } from \"./middleware\"\nimport { getPlacementDetails } from \"./placement\"\nimport type { MaybeElement, MaybeFn, MaybeRectElement, PositioningOptions } from \"./types\"\n\nconst defaultOptions: PositioningOptions = {\n strategy: \"absolute\",\n placement: \"bottom\",\n listeners: true,\n gutter: 8,\n flip: true,\n slide: true,\n overlap: false,\n sameWidth: false,\n fitViewport: false,\n overflowPadding: 8,\n arrowPadding: 4,\n}\n\nfunction roundByDpr(win: Window, value: number) {\n const dpr = win.devicePixelRatio || 1\n return Math.round(value * dpr) / dpr\n}\n\nfunction getBoundaryMiddleware(opts: PositioningOptions) {\n return runIfFn(opts.boundary)\n}\n\nfunction getArrowMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (!arrowElement) return\n return arrow({\n element: arrowElement,\n padding: opts.arrowPadding,\n })\n}\n\nfunction getOffsetMiddleware(arrowElement: HTMLElement | null, opts: PositioningOptions) {\n if (isNull(opts.offset ?? opts.gutter)) return\n return offset(({ placement }) => {\n const arrowOffset = (arrowElement?.clientHeight || 0) / 2\n\n const gutter = opts.offset?.mainAxis ?? opts.gutter\n const mainAxis = typeof gutter === \"number\" ? gutter + arrowOffset : gutter ?? arrowOffset\n\n const { hasAlign } = getPlacementDetails(placement)\n const shift = !hasAlign ? opts.shift : undefined\n const crossAxis = opts.offset?.crossAxis ?? shift\n\n return compact({\n crossAxis: crossAxis,\n mainAxis: mainAxis,\n alignmentAxis: opts.shift,\n })\n })\n}\n\nfunction getFlipMiddleware(opts: PositioningOptions) {\n if (!opts.flip) return\n return flip({\n boundary: getBoundaryMiddleware(opts),\n padding: opts.overflowPadding,\n fallbackPlacements: opts.flip === true ? undefined : opts.flip,\n })\n}\n\nfunction getShiftMiddleware(opts: PositioningOptions) {\n if (!opts.slide && !opts.overlap) return\n return shift({\n boundary: getBoundaryMiddleware(opts),\n mainAxis: opts.slide,\n crossAxis: opts.overlap,\n padding: opts.overflowPadding,\n limiter: limitShift(),\n })\n}\n\nfunction getSizeMiddleware(opts: PositioningOptions) {\n return size({\n padding: opts.overflowPadding,\n apply({ elements, rects, availableHeight, availableWidth }) {\n const floating = elements.floating\n\n const referenceWidth = Math.round(rects.reference.width)\n availableWidth = Math.floor(availableWidth)\n availableHeight = Math.floor(availableHeight)\n\n floating.style.setProperty(\"--reference-width\", `${referenceWidth}px`)\n floating.style.setProperty(\"--available-width\", `${availableWidth}px`)\n floating.style.setProperty(\"--available-height\", `${availableHeight}px`)\n },\n })\n}\n\nfunction getAutoUpdateOptions(opts?: boolean | AutoUpdateOptions): AutoUpdateOptions {\n if (!opts) return {}\n if (opts === true) {\n return { ancestorResize: true, ancestorScroll: true, elementResize: true, layoutShift: true }\n }\n return opts\n}\n\nfunction getPlacementImpl(referenceOrVirtual: MaybeRectElement, floating: MaybeElement, opts: PositioningOptions = {}) {\n const reference = getAnchorElement(referenceOrVirtual, opts.getAnchorRect)\n if (!floating || !reference) return\n const options = Object.assign({}, defaultOptions, opts)\n\n /* -----------------------------------------------------------------------------\n * The middleware stack\n * -----------------------------------------------------------------------------*/\n\n const arrowEl = floating.querySelector<HTMLElement>(\"[data-part=arrow]\")\n\n const middleware: (Middleware | undefined)[] = [\n getOffsetMiddleware(arrowEl, options),\n getFlipMiddleware(options),\n getShiftMiddleware(options),\n getArrowMiddleware(arrowEl, options),\n shiftArrowMiddleware(arrowEl),\n transformOriginMiddleware,\n getSizeMiddleware(options),\n rectMiddleware,\n ]\n\n /* -----------------------------------------------------------------------------\n * The actual positioning function\n * -----------------------------------------------------------------------------*/\n\n const { placement, strategy, onComplete, onPositioned } = options\n\n const updatePosition = async () => {\n if (!reference || !floating) return\n\n const pos = await computePosition(reference, floating, {\n placement,\n middleware,\n strategy,\n })\n\n onComplete?.(pos)\n onPositioned?.({ placed: true })\n\n const win = getWindow(floating)\n const x = roundByDpr(win, pos.x)\n const y = roundByDpr(win, pos.y)\n\n floating.style.setProperty(\"--x\", `${x}px`)\n floating.style.setProperty(\"--y\", `${y}px`)\n\n const contentEl = floating.firstElementChild\n\n if (contentEl) {\n const zIndex = win.getComputedStyle(contentEl).zIndex\n floating.style.setProperty(\"--z-index\", zIndex)\n }\n }\n\n const update = async () => {\n if (opts.updatePosition) {\n await opts.updatePosition({ updatePosition })\n onPositioned?.({ placed: true })\n } else {\n await updatePosition()\n }\n }\n\n const autoUpdateOptions = getAutoUpdateOptions(options.listeners)\n const cancelAutoUpdate = options.listeners ? autoUpdate(reference, floating, update, autoUpdateOptions) : noop\n\n update()\n\n return () => {\n cancelAutoUpdate?.()\n onPositioned?.({ placed: false })\n }\n}\n\nexport function getPlacement(\n referenceOrFn: MaybeFn<MaybeRectElement>,\n floatingOrFn: MaybeFn<MaybeElement>,\n opts: PositioningOptions & { defer?: boolean } = {},\n) {\n const { defer, ...options } = opts\n const func = defer ? raf : (v: any) => v()\n const cleanups: (VoidFunction | undefined)[] = []\n cleanups.push(\n func(() => {\n const reference = typeof referenceOrFn === \"function\" ? referenceOrFn() : referenceOrFn\n const floating = typeof floatingOrFn === \"function\" ? floatingOrFn() : floatingOrFn\n cleanups.push(getPlacementImpl(reference, floating, options))\n }),\n )\n return () => {\n cleanups.forEach((fn) => fn?.())\n }\n}\n","import { isHTMLElement } from \"@zag-js/dom-query\"\nimport type { AnchorRect, MaybeRectElement } from \"./types\"\n\nexport function createDOMRect(x = 0, y = 0, width = 0, height = 0) {\n if (typeof DOMRect === \"function\") {\n return new DOMRect(x, y, width, height)\n }\n const rect = {\n x,\n y,\n width,\n height,\n top: y,\n right: x + width,\n bottom: y + height,\n left: x,\n }\n return { ...rect, toJSON: () => rect }\n}\n\nfunction getDOMRect(anchorRect?: AnchorRect | null) {\n if (!anchorRect) return createDOMRect()\n const { x, y, width, height } = anchorRect\n return createDOMRect(x, y, width, height)\n}\n\nexport function getAnchorElement(\n anchorElement: MaybeRectElement,\n getAnchorRect?: (anchor: MaybeRectElement) => AnchorRect | null,\n) {\n return {\n contextElement: isHTMLElement(anchorElement) ? anchorElement : undefined,\n getBoundingClientRect: () => {\n const anchor = anchorElement\n const anchorRect = getAnchorRect?.(anchor)\n if (anchorRect || !anchor) {\n return getDOMRect(anchorRect)\n }\n return anchor.getBoundingClientRect()\n },\n }\n}\n","import type { Coords, Middleware } from \"@floating-ui/dom\"\nimport type { PlacementSide } from \"./types\"\n\n/* -----------------------------------------------------------------------------\n * Shared middleware utils\n * -----------------------------------------------------------------------------*/\n\nconst toVar = (value: string) => ({ variable: value, reference: `var(${value})` })\n\nexport const cssVars = {\n arrowSize: toVar(\"--arrow-size\"),\n arrowSizeHalf: toVar(\"--arrow-size-half\"),\n arrowBg: toVar(\"--arrow-background\"),\n transformOrigin: toVar(\"--transform-origin\"),\n arrowOffset: toVar(\"--arrow-offset\"),\n}\n\n/* -----------------------------------------------------------------------------\n * Transform Origin Middleware\n * -----------------------------------------------------------------------------*/\n\nconst getTransformOrigin = (arrow?: Partial<Coords>) => ({\n top: \"bottom center\",\n \"top-start\": arrow ? `${arrow.x}px bottom` : \"left bottom\",\n \"top-end\": arrow ? `${arrow.x}px bottom` : \"right bottom\",\n bottom: \"top center\",\n \"bottom-start\": arrow ? `${arrow.x}px top` : \"top left\",\n \"bottom-end\": arrow ? `${arrow.x}px top` : \"top right\",\n left: \"right center\",\n \"left-start\": arrow ? `right ${arrow.y}px` : \"right top\",\n \"left-end\": arrow ? `right ${arrow.y}px` : \"right bottom\",\n right: \"left center\",\n \"right-start\": arrow ? `left ${arrow.y}px` : \"left top\",\n \"right-end\": arrow ? `left ${arrow.y}px` : \"left bottom\",\n})\n\nexport const transformOriginMiddleware: Middleware = {\n name: \"transformOrigin\",\n fn({ placement, elements, middlewareData }) {\n const { arrow } = middlewareData\n const transformOrigin = getTransformOrigin(arrow)[placement]\n\n const { floating } = elements\n floating.style.setProperty(cssVars.transformOrigin.variable, transformOrigin)\n\n return {\n data: { transformOrigin },\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Rect Middleware (to expose the rect data)\n * -----------------------------------------------------------------------------*/\n\nexport const rectMiddleware: Middleware = {\n name: \"rects\",\n fn({ rects }) {\n return {\n data: rects,\n }\n },\n}\n\n/* -----------------------------------------------------------------------------\n * Arrow Middleware\n * -----------------------------------------------------------------------------*/\n\nexport const shiftArrowMiddleware = (arrowEl: HTMLElement | null): Middleware | undefined => {\n if (!arrowEl) return\n return {\n name: \"shiftArrow\",\n fn({ placement, middlewareData }) {\n if (!middlewareData.arrow) return {}\n const { x, y } = middlewareData.arrow\n const dir = placement.split(\"-\")[0] as PlacementSide\n\n Object.assign(arrowEl.style, {\n left: x != null ? `${x}px` : \"\",\n top: y != null ? `${y}px` : \"\",\n [dir]: `calc(100% + ${cssVars.arrowOffset.reference})`,\n })\n\n return {}\n },\n }\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport type { PlacementAlign, PlacementSide } from \"./types\"\n\nexport function isValidPlacement(v: string): v is Placement {\n return /^(?:top|bottom|left|right)(?:-(?:start|end))?$/.test(v)\n}\n\nexport function getPlacementDetails(placement: Placement) {\n const [side, align] = placement.split(\"-\") as [PlacementSide, PlacementAlign | undefined]\n return { side, align, hasAlign: align != null }\n}\n\nexport function getPlacementSide(placement: Placement): PlacementSide {\n return placement.split(\"-\")[0] as PlacementSide\n}\n","import type { Placement } from \"@floating-ui/dom\"\nimport { cssVars } from \"./middleware\"\nimport type { PositioningOptions } from \"./types\"\n\nexport interface GetPlacementStylesOptions {\n placement?: Placement\n}\n\nconst ARROW_FLOATING_STYLE = {\n bottom: \"rotate(45deg)\",\n left: \"rotate(135deg)\",\n top: \"rotate(225deg)\",\n right: \"rotate(315deg)\",\n} as const\n\nexport function getPlacementStyles(\n options: Pick<PositioningOptions, \"placement\" | \"sameWidth\" | \"fitViewport\" | \"strategy\"> = {},\n) {\n const { placement, sameWidth, fitViewport, strategy = \"absolute\" } = options\n\n return {\n arrow: {\n position: \"absolute\",\n width: cssVars.arrowSize.reference,\n height: cssVars.arrowSize.reference,\n [cssVars.arrowSizeHalf.variable]: `calc(${cssVars.arrowSize.reference} / 2)`,\n [cssVars.arrowOffset.variable]: `calc(${cssVars.arrowSizeHalf.reference} * -1)`,\n } as const,\n\n arrowTip: {\n transform: placement ? ARROW_FLOATING_STYLE[placement.split(\"-\")[0]] : undefined,\n background: cssVars.arrowBg.reference,\n top: \"0\",\n left: \"0\",\n width: \"100%\",\n height: \"100%\",\n position: \"absolute\",\n zIndex: \"inherit\",\n } as const,\n\n floating: {\n position: strategy,\n isolation: \"isolate\",\n minWidth: sameWidth ? undefined : \"max-content\",\n width: sameWidth ? \"var(--reference-width)\" : undefined,\n maxWidth: fitViewport ? \"var(--available-width)\" : undefined,\n maxHeight: fitViewport ? \"var(--available-height)\" : undefined,\n top: \"0px\",\n left: \"0px\",\n // move off-screen if placement is not defined\n transform: placement ? \"translate3d(var(--x), var(--y), 0)\" : \"translate3d(0, -100vh, 0)\",\n zIndex: \"var(--z-index)\",\n } as const,\n }\n}\n"],"mappings":"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","names":["arrow","shift"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popper",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.54.0",
|
|
4
4
|
"description": "Dynamic positioning logic for ui machines",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
26
|
"@floating-ui/dom": "1.6.5",
|
|
27
|
-
"@zag-js/dom-query": "0.
|
|
28
|
-
"@zag-js/utils": "0.
|
|
27
|
+
"@zag-js/dom-query": "0.54.0",
|
|
28
|
+
"@zag-js/utils": "0.54.0"
|
|
29
29
|
},
|
|
30
30
|
"devDependencies": {
|
|
31
31
|
"clean-package": "2.2.0"
|