@zag-js/popper 0.1.7 → 0.1.10
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/LICENSE +21 -0
- package/dist/index.d.ts +109 -3
- package/dist/index.js +62 -60
- package/dist/index.mjs +56 -63
- package/package.json +13 -10
- package/dist/auto-update.d.ts +0 -8
- package/dist/get-placement.d.ts +0 -4
- package/dist/get-styles.d.ts +0 -35
- package/dist/middleware.d.ts +0 -29
- package/dist/types.d.ts +0 -64
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Chakra UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,109 @@
|
|
|
1
|
-
|
|
2
|
-
export {
|
|
3
|
-
|
|
1
|
+
import { Placement, Boundary, ComputePositionReturn, ComputePositionConfig, VirtualElement } from '@floating-ui/dom';
|
|
2
|
+
export { Placement } from '@floating-ui/dom';
|
|
3
|
+
|
|
4
|
+
declare type AutoUpdateOptions = {
|
|
5
|
+
ancestorScroll?: boolean;
|
|
6
|
+
ancestorResize?: boolean;
|
|
7
|
+
referenceResize?: boolean;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
declare type PositioningOptions = {
|
|
11
|
+
/**
|
|
12
|
+
* The strategy to use for positioning
|
|
13
|
+
*/
|
|
14
|
+
strategy?: "absolute" | "fixed";
|
|
15
|
+
/**
|
|
16
|
+
* The initial placement of the floating element
|
|
17
|
+
*/
|
|
18
|
+
placement?: Placement;
|
|
19
|
+
/**
|
|
20
|
+
* The offset of the floating element
|
|
21
|
+
*/
|
|
22
|
+
offset?: {
|
|
23
|
+
mainAxis?: number;
|
|
24
|
+
crossAxis?: number;
|
|
25
|
+
};
|
|
26
|
+
/**
|
|
27
|
+
* The main axis offset or gap between the reference and floating elements
|
|
28
|
+
*/
|
|
29
|
+
gutter?: number;
|
|
30
|
+
/**
|
|
31
|
+
* The virtual padding around the viewport edges to check for overflow
|
|
32
|
+
*/
|
|
33
|
+
overflowPadding?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Whether to flip the placement
|
|
36
|
+
*/
|
|
37
|
+
flip?: boolean;
|
|
38
|
+
/**
|
|
39
|
+
* Whether the floating element can overlap the reference element
|
|
40
|
+
* @default false
|
|
41
|
+
*/
|
|
42
|
+
overlap?: boolean;
|
|
43
|
+
/**
|
|
44
|
+
* Whether to make the floating element same width as the reference element
|
|
45
|
+
*/
|
|
46
|
+
sameWidth?: boolean;
|
|
47
|
+
/**
|
|
48
|
+
* Whether the popover should fit the viewport.
|
|
49
|
+
*/
|
|
50
|
+
fitViewport?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* The overflow boundary of the reference element
|
|
53
|
+
*/
|
|
54
|
+
boundary?: Boundary;
|
|
55
|
+
/**
|
|
56
|
+
* Options to activate auto-update listeners
|
|
57
|
+
*/
|
|
58
|
+
listeners?: boolean | AutoUpdateOptions;
|
|
59
|
+
/**
|
|
60
|
+
* Function called when the placement is computed
|
|
61
|
+
*/
|
|
62
|
+
onComplete?(data: ComputePositionReturn & {
|
|
63
|
+
compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
|
|
64
|
+
}): void;
|
|
65
|
+
/**
|
|
66
|
+
* Function called on cleanup of all listeners
|
|
67
|
+
*/
|
|
68
|
+
onCleanup?: VoidFunction;
|
|
69
|
+
};
|
|
70
|
+
declare type BasePlacement = "top" | "right" | "bottom" | "left";
|
|
71
|
+
|
|
72
|
+
declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): (() => void) | undefined;
|
|
73
|
+
declare function getBasePlacement(placement: Placement): BasePlacement;
|
|
74
|
+
|
|
75
|
+
declare type Options = {
|
|
76
|
+
measured: boolean;
|
|
77
|
+
strategy?: "absolute" | "fixed";
|
|
78
|
+
placement?: Placement;
|
|
79
|
+
};
|
|
80
|
+
declare function getPlacementStyles(options: Options): {
|
|
81
|
+
arrow: {
|
|
82
|
+
readonly [x: string]: string | 0 | undefined;
|
|
83
|
+
readonly position: "absolute";
|
|
84
|
+
readonly width: string;
|
|
85
|
+
readonly height: string;
|
|
86
|
+
readonly opacity: 0 | undefined;
|
|
87
|
+
};
|
|
88
|
+
innerArrow: {
|
|
89
|
+
readonly transform: any;
|
|
90
|
+
readonly background: string;
|
|
91
|
+
readonly top: "0";
|
|
92
|
+
readonly left: "0";
|
|
93
|
+
readonly width: "100%";
|
|
94
|
+
readonly height: "100%";
|
|
95
|
+
readonly position: "absolute";
|
|
96
|
+
readonly zIndex: "inherit";
|
|
97
|
+
};
|
|
98
|
+
floating: {
|
|
99
|
+
position: "absolute" | "fixed";
|
|
100
|
+
readonly top?: 0 | undefined;
|
|
101
|
+
readonly left?: 0 | undefined;
|
|
102
|
+
readonly opacity?: 0 | undefined;
|
|
103
|
+
readonly transform?: "translate3d(0, -200%, 0)" | undefined;
|
|
104
|
+
readonly pointerEvents?: "none" | undefined;
|
|
105
|
+
readonly minWidth: "max-content";
|
|
106
|
+
};
|
|
107
|
+
};
|
|
108
|
+
|
|
109
|
+
export { PositioningOptions, getBasePlacement, getPlacement, getPlacementStyles };
|
package/dist/index.js
CHANGED
|
@@ -1,25 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
6
|
var __export = (target, all) => {
|
|
24
7
|
for (var name in all)
|
|
25
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -60,7 +43,7 @@ var import_dom = require("@floating-ui/dom");
|
|
|
60
43
|
// ../dom/dist/index.mjs
|
|
61
44
|
var runIfFn = (v, ...a) => {
|
|
62
45
|
const res = typeof v === "function" ? v(...a) : v;
|
|
63
|
-
return res
|
|
46
|
+
return res ?? void 0;
|
|
64
47
|
};
|
|
65
48
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
66
49
|
function isHTMLElement(v) {
|
|
@@ -129,12 +112,11 @@ function isEqual(rect1, rect2) {
|
|
|
129
112
|
|
|
130
113
|
// src/auto-update.ts
|
|
131
114
|
function resolveOptions(option) {
|
|
132
|
-
var _a, _b, _c;
|
|
133
115
|
const bool = isBoolean(option);
|
|
134
116
|
return {
|
|
135
|
-
ancestorResize: bool ? option :
|
|
136
|
-
ancestorScroll: bool ? option :
|
|
137
|
-
referenceResize: bool ? option :
|
|
117
|
+
ancestorResize: bool ? option : option.ancestorResize ?? true,
|
|
118
|
+
ancestorScroll: bool ? option : option.ancestorScroll ?? true,
|
|
119
|
+
referenceResize: bool ? option : option.referenceResize ?? true
|
|
138
120
|
};
|
|
139
121
|
}
|
|
140
122
|
function autoUpdate(reference, floating, update, options = false) {
|
|
@@ -227,10 +209,12 @@ function getPlacement(reference, floating, opts = {}) {
|
|
|
227
209
|
const arrowEl = floating.querySelector("[data-part=arrow]");
|
|
228
210
|
const middleware = [];
|
|
229
211
|
if (options.flip) {
|
|
230
|
-
middleware.push(
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
212
|
+
middleware.push(
|
|
213
|
+
(0, import_dom2.flip)({
|
|
214
|
+
boundary: options.boundary,
|
|
215
|
+
padding: options.overflowPadding
|
|
216
|
+
})
|
|
217
|
+
);
|
|
234
218
|
}
|
|
235
219
|
if (options.gutter || options.offset) {
|
|
236
220
|
const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
|
|
@@ -239,45 +223,53 @@ function getPlacement(reference, floating, opts = {}) {
|
|
|
239
223
|
data.mainAxis += arrowOffset;
|
|
240
224
|
middleware.push((0, import_dom2.offset)(data));
|
|
241
225
|
}
|
|
242
|
-
middleware.push(
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
226
|
+
middleware.push(
|
|
227
|
+
(0, import_dom2.shift)({
|
|
228
|
+
boundary: options.boundary,
|
|
229
|
+
crossAxis: options.overlap,
|
|
230
|
+
padding: options.overflowPadding
|
|
231
|
+
})
|
|
232
|
+
);
|
|
247
233
|
if (arrowEl) {
|
|
248
|
-
middleware.push(
|
|
234
|
+
middleware.push(
|
|
235
|
+
(0, import_dom2.arrow)({ element: arrowEl, padding: 8 }),
|
|
236
|
+
shiftArrow({ element: arrowEl })
|
|
237
|
+
);
|
|
249
238
|
}
|
|
250
239
|
middleware.push(transformOrigin);
|
|
251
|
-
middleware.push(
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
|
|
257
|
-
|
|
258
|
-
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
240
|
+
middleware.push(
|
|
241
|
+
(0, import_dom2.size)({
|
|
242
|
+
padding: options.overflowPadding,
|
|
243
|
+
apply({ rects, availableHeight, availableWidth }) {
|
|
244
|
+
const referenceWidth = Math.round(rects.reference.width);
|
|
245
|
+
floating.style.setProperty("--reference-width", `${referenceWidth}px`);
|
|
246
|
+
floating.style.setProperty("--available-width", `${availableWidth}px`);
|
|
247
|
+
floating.style.setProperty("--available-height", `${availableHeight}px`);
|
|
248
|
+
if (options.sameWidth) {
|
|
249
|
+
Object.assign(floating.style, {
|
|
250
|
+
width: `${referenceWidth}px`,
|
|
251
|
+
minWidth: "unset"
|
|
252
|
+
});
|
|
253
|
+
}
|
|
254
|
+
if (options.fitViewport) {
|
|
255
|
+
Object.assign(floating.style, {
|
|
256
|
+
maxWidth: `${availableWidth}px`,
|
|
257
|
+
maxHeight: `${availableHeight}px`
|
|
258
|
+
});
|
|
259
|
+
}
|
|
269
260
|
}
|
|
270
|
-
}
|
|
271
|
-
|
|
261
|
+
})
|
|
262
|
+
);
|
|
272
263
|
function compute(config = {}) {
|
|
273
264
|
if (!reference || !floating)
|
|
274
265
|
return;
|
|
275
266
|
const { placement, strategy } = options;
|
|
276
|
-
(0, import_dom2.computePosition)(reference, floating,
|
|
267
|
+
(0, import_dom2.computePosition)(reference, floating, {
|
|
277
268
|
placement,
|
|
278
269
|
middleware,
|
|
279
|
-
strategy
|
|
280
|
-
|
|
270
|
+
strategy,
|
|
271
|
+
...config
|
|
272
|
+
}).then((data) => {
|
|
281
273
|
var _a;
|
|
282
274
|
const x = Math.round(data.x);
|
|
283
275
|
const y = Math.round(data.y);
|
|
@@ -287,11 +279,14 @@ function getPlacement(reference, floating, opts = {}) {
|
|
|
287
279
|
left: "0",
|
|
288
280
|
transform: `translate3d(${x}px, ${y}px, 0)`
|
|
289
281
|
});
|
|
290
|
-
(_a = options.onComplete) == null ? void 0 : _a.call(options,
|
|
282
|
+
(_a = options.onComplete) == null ? void 0 : _a.call(options, { ...data, compute });
|
|
291
283
|
});
|
|
292
284
|
}
|
|
293
285
|
compute();
|
|
294
|
-
return callAll(
|
|
286
|
+
return callAll(
|
|
287
|
+
options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
|
|
288
|
+
options.onCleanup
|
|
289
|
+
);
|
|
295
290
|
}
|
|
296
291
|
function getBasePlacement(placement) {
|
|
297
292
|
return placement.split("-")[0];
|
|
@@ -333,9 +328,16 @@ function getPlacementStyles(options) {
|
|
|
333
328
|
position: "absolute",
|
|
334
329
|
zIndex: "inherit"
|
|
335
330
|
},
|
|
336
|
-
floating:
|
|
331
|
+
floating: {
|
|
337
332
|
position: strategy,
|
|
338
|
-
minWidth: "max-content"
|
|
339
|
-
|
|
333
|
+
minWidth: "max-content",
|
|
334
|
+
...!measured && UNMEASURED_FLOATING_STYLE
|
|
335
|
+
}
|
|
340
336
|
};
|
|
341
337
|
}
|
|
338
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
339
|
+
0 && (module.exports = {
|
|
340
|
+
getBasePlacement,
|
|
341
|
+
getPlacement,
|
|
342
|
+
getPlacementStyles
|
|
343
|
+
});
|
package/dist/index.mjs
CHANGED
|
@@ -1,23 +1,3 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
21
1
|
// src/get-placement.ts
|
|
22
2
|
import { arrow, computePosition, flip, offset, shift, size } from "@floating-ui/dom";
|
|
23
3
|
|
|
@@ -35,7 +15,7 @@ import { getOverflowAncestors } from "@floating-ui/dom";
|
|
|
35
15
|
// ../dom/dist/index.mjs
|
|
36
16
|
var runIfFn = (v, ...a) => {
|
|
37
17
|
const res = typeof v === "function" ? v(...a) : v;
|
|
38
|
-
return res
|
|
18
|
+
return res ?? void 0;
|
|
39
19
|
};
|
|
40
20
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
41
21
|
function isHTMLElement(v) {
|
|
@@ -104,12 +84,11 @@ function isEqual(rect1, rect2) {
|
|
|
104
84
|
|
|
105
85
|
// src/auto-update.ts
|
|
106
86
|
function resolveOptions(option) {
|
|
107
|
-
var _a, _b, _c;
|
|
108
87
|
const bool = isBoolean(option);
|
|
109
88
|
return {
|
|
110
|
-
ancestorResize: bool ? option :
|
|
111
|
-
ancestorScroll: bool ? option :
|
|
112
|
-
referenceResize: bool ? option :
|
|
89
|
+
ancestorResize: bool ? option : option.ancestorResize ?? true,
|
|
90
|
+
ancestorScroll: bool ? option : option.ancestorScroll ?? true,
|
|
91
|
+
referenceResize: bool ? option : option.referenceResize ?? true
|
|
113
92
|
};
|
|
114
93
|
}
|
|
115
94
|
function autoUpdate(reference, floating, update, options = false) {
|
|
@@ -202,10 +181,12 @@ function getPlacement(reference, floating, opts = {}) {
|
|
|
202
181
|
const arrowEl = floating.querySelector("[data-part=arrow]");
|
|
203
182
|
const middleware = [];
|
|
204
183
|
if (options.flip) {
|
|
205
|
-
middleware.push(
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
184
|
+
middleware.push(
|
|
185
|
+
flip({
|
|
186
|
+
boundary: options.boundary,
|
|
187
|
+
padding: options.overflowPadding
|
|
188
|
+
})
|
|
189
|
+
);
|
|
209
190
|
}
|
|
210
191
|
if (options.gutter || options.offset) {
|
|
211
192
|
const arrowOffset = arrowEl ? arrowEl.offsetHeight / 2 : 0;
|
|
@@ -214,45 +195,53 @@ function getPlacement(reference, floating, opts = {}) {
|
|
|
214
195
|
data.mainAxis += arrowOffset;
|
|
215
196
|
middleware.push(offset(data));
|
|
216
197
|
}
|
|
217
|
-
middleware.push(
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
198
|
+
middleware.push(
|
|
199
|
+
shift({
|
|
200
|
+
boundary: options.boundary,
|
|
201
|
+
crossAxis: options.overlap,
|
|
202
|
+
padding: options.overflowPadding
|
|
203
|
+
})
|
|
204
|
+
);
|
|
222
205
|
if (arrowEl) {
|
|
223
|
-
middleware.push(
|
|
206
|
+
middleware.push(
|
|
207
|
+
arrow({ element: arrowEl, padding: 8 }),
|
|
208
|
+
shiftArrow({ element: arrowEl })
|
|
209
|
+
);
|
|
224
210
|
}
|
|
225
211
|
middleware.push(transformOrigin);
|
|
226
|
-
middleware.push(
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
212
|
+
middleware.push(
|
|
213
|
+
size({
|
|
214
|
+
padding: options.overflowPadding,
|
|
215
|
+
apply({ rects, availableHeight, availableWidth }) {
|
|
216
|
+
const referenceWidth = Math.round(rects.reference.width);
|
|
217
|
+
floating.style.setProperty("--reference-width", `${referenceWidth}px`);
|
|
218
|
+
floating.style.setProperty("--available-width", `${availableWidth}px`);
|
|
219
|
+
floating.style.setProperty("--available-height", `${availableHeight}px`);
|
|
220
|
+
if (options.sameWidth) {
|
|
221
|
+
Object.assign(floating.style, {
|
|
222
|
+
width: `${referenceWidth}px`,
|
|
223
|
+
minWidth: "unset"
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
if (options.fitViewport) {
|
|
227
|
+
Object.assign(floating.style, {
|
|
228
|
+
maxWidth: `${availableWidth}px`,
|
|
229
|
+
maxHeight: `${availableHeight}px`
|
|
230
|
+
});
|
|
231
|
+
}
|
|
244
232
|
}
|
|
245
|
-
}
|
|
246
|
-
|
|
233
|
+
})
|
|
234
|
+
);
|
|
247
235
|
function compute(config = {}) {
|
|
248
236
|
if (!reference || !floating)
|
|
249
237
|
return;
|
|
250
238
|
const { placement, strategy } = options;
|
|
251
|
-
computePosition(reference, floating,
|
|
239
|
+
computePosition(reference, floating, {
|
|
252
240
|
placement,
|
|
253
241
|
middleware,
|
|
254
|
-
strategy
|
|
255
|
-
|
|
242
|
+
strategy,
|
|
243
|
+
...config
|
|
244
|
+
}).then((data) => {
|
|
256
245
|
var _a;
|
|
257
246
|
const x = Math.round(data.x);
|
|
258
247
|
const y = Math.round(data.y);
|
|
@@ -262,11 +251,14 @@ function getPlacement(reference, floating, opts = {}) {
|
|
|
262
251
|
left: "0",
|
|
263
252
|
transform: `translate3d(${x}px, ${y}px, 0)`
|
|
264
253
|
});
|
|
265
|
-
(_a = options.onComplete) == null ? void 0 : _a.call(options,
|
|
254
|
+
(_a = options.onComplete) == null ? void 0 : _a.call(options, { ...data, compute });
|
|
266
255
|
});
|
|
267
256
|
}
|
|
268
257
|
compute();
|
|
269
|
-
return callAll(
|
|
258
|
+
return callAll(
|
|
259
|
+
options.listeners ? autoUpdate(reference, floating, compute, options.listeners) : void 0,
|
|
260
|
+
options.onCleanup
|
|
261
|
+
);
|
|
270
262
|
}
|
|
271
263
|
function getBasePlacement(placement) {
|
|
272
264
|
return placement.split("-")[0];
|
|
@@ -308,10 +300,11 @@ function getPlacementStyles(options) {
|
|
|
308
300
|
position: "absolute",
|
|
309
301
|
zIndex: "inherit"
|
|
310
302
|
},
|
|
311
|
-
floating:
|
|
303
|
+
floating: {
|
|
312
304
|
position: strategy,
|
|
313
|
-
minWidth: "max-content"
|
|
314
|
-
|
|
305
|
+
minWidth: "max-content",
|
|
306
|
+
...!measured && UNMEASURED_FLOATING_STYLE
|
|
307
|
+
}
|
|
315
308
|
};
|
|
316
309
|
}
|
|
317
310
|
export {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popper",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.10",
|
|
4
4
|
"description": "Dynamic positioning logic for ui machines",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -25,17 +25,20 @@
|
|
|
25
25
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
26
26
|
},
|
|
27
27
|
"dependencies": {
|
|
28
|
-
"@floating-ui/dom": "0.
|
|
29
|
-
|
|
30
|
-
|
|
28
|
+
"@floating-ui/dom": "1.0.0"
|
|
29
|
+
},
|
|
30
|
+
"devDependencies": {
|
|
31
|
+
"@zag-js/dom-utils": "0.1.9",
|
|
32
|
+
"@zag-js/utils": "0.1.3"
|
|
31
33
|
},
|
|
32
34
|
"scripts": {
|
|
33
|
-
"build
|
|
34
|
-
"start": "
|
|
35
|
-
"build": "
|
|
35
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
36
|
+
"start": "pnpm build --watch",
|
|
37
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
36
38
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
37
39
|
"lint": "eslint src --ext .ts,.tsx",
|
|
38
|
-
"test
|
|
39
|
-
"test
|
|
40
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
41
|
+
"test-watch": "pnpm test --watch -u",
|
|
42
|
+
"typecheck": "tsc --noEmit"
|
|
40
43
|
}
|
|
41
|
-
}
|
|
44
|
+
}
|
package/dist/auto-update.d.ts
DELETED
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
import type { Placement, ReferenceElement } from "@floating-ui/dom";
|
|
2
|
-
export type { Placement };
|
|
3
|
-
export declare type AutoUpdateOptions = {
|
|
4
|
-
ancestorScroll?: boolean;
|
|
5
|
-
ancestorResize?: boolean;
|
|
6
|
-
referenceResize?: boolean;
|
|
7
|
-
};
|
|
8
|
-
export declare function autoUpdate(reference: ReferenceElement, floating: HTMLElement, update: () => void, options?: boolean | AutoUpdateOptions): () => void;
|
package/dist/get-placement.d.ts
DELETED
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import type { Placement, VirtualElement } from "@floating-ui/dom";
|
|
2
|
-
import type { BasePlacement, PositioningOptions } from "./types";
|
|
3
|
-
export declare function getPlacement(reference: HTMLElement | VirtualElement | null, floating: HTMLElement | null, opts?: PositioningOptions): () => void;
|
|
4
|
-
export declare function getBasePlacement(placement: Placement): BasePlacement;
|
package/dist/get-styles.d.ts
DELETED
|
@@ -1,35 +0,0 @@
|
|
|
1
|
-
import type { Placement } from "@floating-ui/dom";
|
|
2
|
-
declare type Options = {
|
|
3
|
-
measured: boolean;
|
|
4
|
-
strategy?: "absolute" | "fixed";
|
|
5
|
-
placement?: Placement;
|
|
6
|
-
};
|
|
7
|
-
export declare function getPlacementStyles(options: Options): {
|
|
8
|
-
arrow: {
|
|
9
|
-
readonly [x: string]: string | 0;
|
|
10
|
-
readonly position: "absolute";
|
|
11
|
-
readonly width: string;
|
|
12
|
-
readonly height: string;
|
|
13
|
-
readonly opacity: 0;
|
|
14
|
-
};
|
|
15
|
-
innerArrow: {
|
|
16
|
-
readonly transform: any;
|
|
17
|
-
readonly background: string;
|
|
18
|
-
readonly top: "0";
|
|
19
|
-
readonly left: "0";
|
|
20
|
-
readonly width: "100%";
|
|
21
|
-
readonly height: "100%";
|
|
22
|
-
readonly position: "absolute";
|
|
23
|
-
readonly zIndex: "inherit";
|
|
24
|
-
};
|
|
25
|
-
floating: {
|
|
26
|
-
readonly position: "fixed";
|
|
27
|
-
readonly top: 0;
|
|
28
|
-
readonly left: 0;
|
|
29
|
-
readonly opacity: 0;
|
|
30
|
-
readonly transform: "translate3d(0, -200%, 0)";
|
|
31
|
-
readonly pointerEvents: "none";
|
|
32
|
-
readonly minWidth: "max-content";
|
|
33
|
-
};
|
|
34
|
-
};
|
|
35
|
-
export {};
|
package/dist/middleware.d.ts
DELETED
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import type { Middleware } from "@floating-ui/dom";
|
|
2
|
-
export declare const cssVars: {
|
|
3
|
-
arrowSize: {
|
|
4
|
-
variable: string;
|
|
5
|
-
reference: string;
|
|
6
|
-
};
|
|
7
|
-
arrowSizeHalf: {
|
|
8
|
-
variable: string;
|
|
9
|
-
reference: string;
|
|
10
|
-
};
|
|
11
|
-
arrowBg: {
|
|
12
|
-
variable: string;
|
|
13
|
-
reference: string;
|
|
14
|
-
};
|
|
15
|
-
transformOrigin: {
|
|
16
|
-
variable: string;
|
|
17
|
-
reference: string;
|
|
18
|
-
};
|
|
19
|
-
arrowOffset: {
|
|
20
|
-
variable: string;
|
|
21
|
-
reference: string;
|
|
22
|
-
};
|
|
23
|
-
};
|
|
24
|
-
export declare const transformOrigin: Middleware;
|
|
25
|
-
declare type ArrowOptions = {
|
|
26
|
-
element: HTMLElement;
|
|
27
|
-
};
|
|
28
|
-
export declare const shiftArrow: (opts: ArrowOptions) => Middleware;
|
|
29
|
-
export {};
|
package/dist/types.d.ts
DELETED
|
@@ -1,64 +0,0 @@
|
|
|
1
|
-
import type { Boundary, Placement, ComputePositionReturn, ComputePositionConfig } from "@floating-ui/dom";
|
|
2
|
-
import type { AutoUpdateOptions } from "./auto-update";
|
|
3
|
-
export type { Placement };
|
|
4
|
-
export declare type PositioningOptions = {
|
|
5
|
-
/**
|
|
6
|
-
* The strategy to use for positioning
|
|
7
|
-
*/
|
|
8
|
-
strategy?: "absolute" | "fixed";
|
|
9
|
-
/**
|
|
10
|
-
* The initial placement of the floating element
|
|
11
|
-
*/
|
|
12
|
-
placement?: Placement;
|
|
13
|
-
/**
|
|
14
|
-
* The offset of the floating element
|
|
15
|
-
*/
|
|
16
|
-
offset?: {
|
|
17
|
-
mainAxis?: number;
|
|
18
|
-
crossAxis?: number;
|
|
19
|
-
};
|
|
20
|
-
/**
|
|
21
|
-
* The main axis offset or gap between the reference and floating elements
|
|
22
|
-
*/
|
|
23
|
-
gutter?: number;
|
|
24
|
-
/**
|
|
25
|
-
* The virtual padding around the viewport edges to check for overflow
|
|
26
|
-
*/
|
|
27
|
-
overflowPadding?: number;
|
|
28
|
-
/**
|
|
29
|
-
* Whether to flip the placement
|
|
30
|
-
*/
|
|
31
|
-
flip?: boolean;
|
|
32
|
-
/**
|
|
33
|
-
* Whether the floating element can overlap the reference element
|
|
34
|
-
* @default false
|
|
35
|
-
*/
|
|
36
|
-
overlap?: boolean;
|
|
37
|
-
/**
|
|
38
|
-
* Whether to make the floating element same width as the reference element
|
|
39
|
-
*/
|
|
40
|
-
sameWidth?: boolean;
|
|
41
|
-
/**
|
|
42
|
-
* Whether the popover should fit the viewport.
|
|
43
|
-
*/
|
|
44
|
-
fitViewport?: boolean;
|
|
45
|
-
/**
|
|
46
|
-
* The overflow boundary of the reference element
|
|
47
|
-
*/
|
|
48
|
-
boundary?: Boundary;
|
|
49
|
-
/**
|
|
50
|
-
* Options to activate auto-update listeners
|
|
51
|
-
*/
|
|
52
|
-
listeners?: boolean | AutoUpdateOptions;
|
|
53
|
-
/**
|
|
54
|
-
* Function called when the placement is computed
|
|
55
|
-
*/
|
|
56
|
-
onComplete?(data: ComputePositionReturn & {
|
|
57
|
-
compute: (config?: Omit<ComputePositionConfig, "platform">) => void;
|
|
58
|
-
}): void;
|
|
59
|
-
/**
|
|
60
|
-
* Function called on cleanup of all listeners
|
|
61
|
-
*/
|
|
62
|
-
onCleanup?: VoidFunction;
|
|
63
|
-
};
|
|
64
|
-
export declare type BasePlacement = "top" | "right" | "bottom" | "left";
|