@zag-js/popover 0.0.0-dev-20220604091726 → 0.0.0-dev-20220604123738
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 +10 -251
- package/dist/index.js.map +3 -3
- package/dist/index.mjs +9 -250
- package/dist/index.mjs.map +3 -3
- package/dist/popover.machine.d.ts.map +1 -1
- package/dist/popover.types.d.ts +4 -0
- package/dist/popover.types.d.ts.map +1 -1
- package/package.json +7 -6
package/dist/index.js
CHANGED
|
@@ -41,115 +41,6 @@ __export(src_exports, {
|
|
|
41
41
|
});
|
|
42
42
|
module.exports = __toCommonJS(src_exports);
|
|
43
43
|
|
|
44
|
-
// ../../../node_modules/compute-scroll-into-view/dist/index.module.js
|
|
45
|
-
function t(t2) {
|
|
46
|
-
return typeof t2 == "object" && t2 != null && t2.nodeType === 1;
|
|
47
|
-
}
|
|
48
|
-
function e(t2, e2) {
|
|
49
|
-
return (!e2 || t2 !== "hidden") && t2 !== "visible" && t2 !== "clip";
|
|
50
|
-
}
|
|
51
|
-
function n(t2, n2) {
|
|
52
|
-
if (t2.clientHeight < t2.scrollHeight || t2.clientWidth < t2.scrollWidth) {
|
|
53
|
-
var r2 = getComputedStyle(t2, null);
|
|
54
|
-
return e(r2.overflowY, n2) || e(r2.overflowX, n2) || function(t3) {
|
|
55
|
-
var e2 = function(t4) {
|
|
56
|
-
if (!t4.ownerDocument || !t4.ownerDocument.defaultView)
|
|
57
|
-
return null;
|
|
58
|
-
try {
|
|
59
|
-
return t4.ownerDocument.defaultView.frameElement;
|
|
60
|
-
} catch (t5) {
|
|
61
|
-
return null;
|
|
62
|
-
}
|
|
63
|
-
}(t3);
|
|
64
|
-
return !!e2 && (e2.clientHeight < t3.scrollHeight || e2.clientWidth < t3.scrollWidth);
|
|
65
|
-
}(t2);
|
|
66
|
-
}
|
|
67
|
-
return false;
|
|
68
|
-
}
|
|
69
|
-
function r(t2, e2, n2, r2, i, o, l, d) {
|
|
70
|
-
return o < t2 && l > e2 || o > t2 && l < e2 ? 0 : o <= t2 && d <= n2 || l >= e2 && d >= n2 ? o - t2 - r2 : l > e2 && d < n2 || o < t2 && d > n2 ? l - e2 + i : 0;
|
|
71
|
-
}
|
|
72
|
-
function index_module_default(e2, i) {
|
|
73
|
-
var o = window, l = i.scrollMode, d = i.block, u = i.inline, h = i.boundary, a = i.skipOverflowHiddenElements, c = typeof h == "function" ? h : function(t2) {
|
|
74
|
-
return t2 !== h;
|
|
75
|
-
};
|
|
76
|
-
if (!t(e2))
|
|
77
|
-
throw new TypeError("Invalid target");
|
|
78
|
-
for (var f = document.scrollingElement || document.documentElement, s = [], p = e2; t(p) && c(p); ) {
|
|
79
|
-
if ((p = p.parentElement) === f) {
|
|
80
|
-
s.push(p);
|
|
81
|
-
break;
|
|
82
|
-
}
|
|
83
|
-
p != null && p === document.body && n(p) && !n(document.documentElement) || p != null && n(p, a) && s.push(p);
|
|
84
|
-
}
|
|
85
|
-
for (var m = o.visualViewport ? o.visualViewport.width : innerWidth, g = o.visualViewport ? o.visualViewport.height : innerHeight, w = window.scrollX || pageXOffset, v = window.scrollY || pageYOffset, W = e2.getBoundingClientRect(), b = W.height, H = W.width, y = W.top, E = W.right, M = W.bottom, V = W.left, x = d === "start" || d === "nearest" ? y : d === "end" ? M : y + b / 2, I = u === "center" ? V + H / 2 : u === "end" ? E : V, C = [], T = 0; T < s.length; T++) {
|
|
86
|
-
var k = s[T], B = k.getBoundingClientRect(), D = B.height, O = B.width, R = B.top, X = B.right, Y = B.bottom, L = B.left;
|
|
87
|
-
if (l === "if-needed" && y >= 0 && V >= 0 && M <= g && E <= m && y >= R && M <= Y && V >= L && E <= X)
|
|
88
|
-
return C;
|
|
89
|
-
var S = getComputedStyle(k), j = parseInt(S.borderLeftWidth, 10), q = parseInt(S.borderTopWidth, 10), z = parseInt(S.borderRightWidth, 10), A = parseInt(S.borderBottomWidth, 10), F = 0, G = 0, J = "offsetWidth" in k ? k.offsetWidth - k.clientWidth - j - z : 0, K = "offsetHeight" in k ? k.offsetHeight - k.clientHeight - q - A : 0;
|
|
90
|
-
if (f === k)
|
|
91
|
-
F = d === "start" ? x : d === "end" ? x - g : d === "nearest" ? r(v, v + g, g, q, A, v + x, v + x + b, b) : x - g / 2, G = u === "start" ? I : u === "center" ? I - m / 2 : u === "end" ? I - m : r(w, w + m, m, j, z, w + I, w + I + H, H), F = Math.max(0, F + v), G = Math.max(0, G + w);
|
|
92
|
-
else {
|
|
93
|
-
F = d === "start" ? x - R - q : d === "end" ? x - Y + A + K : d === "nearest" ? r(R, Y, D, q, A + K, x, x + b, b) : x - (R + D / 2) + K / 2, G = u === "start" ? I - L - j : u === "center" ? I - (L + O / 2) + J / 2 : u === "end" ? I - X + z + J : r(L, X, O, j, z + J, I, I + H, H);
|
|
94
|
-
var N = k.scrollLeft, P = k.scrollTop;
|
|
95
|
-
x += P - (F = Math.max(0, Math.min(P + F, k.scrollHeight - D + K))), I += N - (G = Math.max(0, Math.min(N + G, k.scrollWidth - O + J)));
|
|
96
|
-
}
|
|
97
|
-
C.push({ el: k, top: F, left: G });
|
|
98
|
-
}
|
|
99
|
-
return C;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
// ../../utilities/dom/node_modules/scroll-into-view-if-needed/es/index.js
|
|
103
|
-
function isOptionsObject(options) {
|
|
104
|
-
return options === Object(options) && Object.keys(options).length !== 0;
|
|
105
|
-
}
|
|
106
|
-
function defaultBehavior(actions, behavior) {
|
|
107
|
-
if (behavior === void 0) {
|
|
108
|
-
behavior = "auto";
|
|
109
|
-
}
|
|
110
|
-
var canSmoothScroll = "scrollBehavior" in document.body.style;
|
|
111
|
-
actions.forEach(function(_ref) {
|
|
112
|
-
var el = _ref.el, top = _ref.top, left = _ref.left;
|
|
113
|
-
if (el.scroll && canSmoothScroll) {
|
|
114
|
-
el.scroll({
|
|
115
|
-
top,
|
|
116
|
-
left,
|
|
117
|
-
behavior
|
|
118
|
-
});
|
|
119
|
-
} else {
|
|
120
|
-
el.scrollTop = top;
|
|
121
|
-
el.scrollLeft = left;
|
|
122
|
-
}
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
function getOptions(options) {
|
|
126
|
-
if (options === false) {
|
|
127
|
-
return {
|
|
128
|
-
block: "end",
|
|
129
|
-
inline: "nearest"
|
|
130
|
-
};
|
|
131
|
-
}
|
|
132
|
-
if (isOptionsObject(options)) {
|
|
133
|
-
return options;
|
|
134
|
-
}
|
|
135
|
-
return {
|
|
136
|
-
block: "start",
|
|
137
|
-
inline: "nearest"
|
|
138
|
-
};
|
|
139
|
-
}
|
|
140
|
-
function scrollIntoView(target, options) {
|
|
141
|
-
var isTargetAttached = target.isConnected || target.ownerDocument.documentElement.contains(target);
|
|
142
|
-
if (isOptionsObject(options) && typeof options.behavior === "function") {
|
|
143
|
-
return options.behavior(isTargetAttached ? index_module_default(target, options) : []);
|
|
144
|
-
}
|
|
145
|
-
if (!isTargetAttached) {
|
|
146
|
-
return;
|
|
147
|
-
}
|
|
148
|
-
var computeOptions = getOptions(options);
|
|
149
|
-
return defaultBehavior(index_module_default(target, computeOptions), computeOptions.behavior);
|
|
150
|
-
}
|
|
151
|
-
var es_default = scrollIntoView;
|
|
152
|
-
|
|
153
44
|
// ../../utilities/dom/dist/index.mjs
|
|
154
45
|
var dataAttr = (guard) => {
|
|
155
46
|
return guard ? "" : void 0;
|
|
@@ -191,6 +82,10 @@ function raf(fn) {
|
|
|
191
82
|
globalThis.cancelAnimationFrame(id);
|
|
192
83
|
};
|
|
193
84
|
}
|
|
85
|
+
var isDom = () => typeof window !== "undefined";
|
|
86
|
+
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
87
|
+
var isTouchDevice = isDom() && !!navigator.maxTouchPoints;
|
|
88
|
+
var isLeftClick = (v) => v.button === 0;
|
|
194
89
|
var runIfFn = (v, ...a) => {
|
|
195
90
|
const res = typeof v === "function" ? v(...a) : v;
|
|
196
91
|
return res != null ? res : void 0;
|
|
@@ -198,14 +93,6 @@ var runIfFn = (v, ...a) => {
|
|
|
198
93
|
var noop = () => {
|
|
199
94
|
};
|
|
200
95
|
var pipe = (...fns) => (v) => fns.reduce((a, b) => b(a), v);
|
|
201
|
-
var platform = (v) => isDom() && v.test(navigator.platform);
|
|
202
|
-
var isDom = () => typeof window !== "undefined";
|
|
203
|
-
var isMac = () => platform(/^Mac/);
|
|
204
|
-
var isIPhone = () => platform(/^iPhone/);
|
|
205
|
-
var isIPad = () => platform(/^iPad/) || isMac() && navigator.maxTouchPoints > 1;
|
|
206
|
-
var isIos = () => isIPhone() || isIPad();
|
|
207
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
208
|
-
var isLeftClick = (v) => v.button === 0;
|
|
209
96
|
function getListenerElements() {
|
|
210
97
|
;
|
|
211
98
|
globalThis.__listenerElements__ = globalThis.__listenerElements__ || /* @__PURE__ */ new Map();
|
|
@@ -331,21 +218,6 @@ function preventBodyPointerEvents(el, opts = {}) {
|
|
|
331
218
|
cleanups.forEach((cleanup) => cleanup == null ? void 0 : cleanup());
|
|
332
219
|
};
|
|
333
220
|
}
|
|
334
|
-
function getOwnerDocument(el) {
|
|
335
|
-
var _a;
|
|
336
|
-
if (isWindow(el))
|
|
337
|
-
return el.document;
|
|
338
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
339
|
-
}
|
|
340
|
-
function getNodeName(node) {
|
|
341
|
-
return isWindow(node) ? "" : node ? node.localName || "" : "";
|
|
342
|
-
}
|
|
343
|
-
function getParent(el) {
|
|
344
|
-
const doc = getOwnerDocument(el);
|
|
345
|
-
if (getNodeName(el) === "html")
|
|
346
|
-
return el;
|
|
347
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
348
|
-
}
|
|
349
221
|
function contains(parent, child) {
|
|
350
222
|
if (!parent)
|
|
351
223
|
return false;
|
|
@@ -354,124 +226,9 @@ function contains(parent, child) {
|
|
|
354
226
|
function isHTMLElement(v) {
|
|
355
227
|
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
356
228
|
}
|
|
357
|
-
function isWindow(value) {
|
|
358
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
359
|
-
}
|
|
360
229
|
var isDisabled = (el) => {
|
|
361
230
|
return (el == null ? void 0 : el.getAttribute("disabled")) != null || !!(el == null ? void 0 : el.getAttribute("aria-disabled")) === true;
|
|
362
231
|
};
|
|
363
|
-
function isScrollParent(el) {
|
|
364
|
-
const { overflow, overflowX, overflowY } = getComputedStyle2(el);
|
|
365
|
-
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
|
366
|
-
}
|
|
367
|
-
function getScrollParent(el) {
|
|
368
|
-
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
369
|
-
return getOwnerDocument(el).body;
|
|
370
|
-
}
|
|
371
|
-
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
372
|
-
return el;
|
|
373
|
-
}
|
|
374
|
-
return getScrollParent(getParent(el));
|
|
375
|
-
}
|
|
376
|
-
var nonTextInputTypes = /* @__PURE__ */ new Set(["checkbox", "radio", "range", "color", "file", "image", "button", "submit", "reset"]);
|
|
377
|
-
function preventBodyScroll(opts) {
|
|
378
|
-
var _a;
|
|
379
|
-
const { document: docProp, disabled = false, allowPinchZoom } = opts != null ? opts : {};
|
|
380
|
-
const doc = docProp != null ? docProp : document;
|
|
381
|
-
const win = (_a = doc == null ? void 0 : doc.defaultView) != null ? _a : window;
|
|
382
|
-
const viewport = isDom() ? win.visualViewport : null;
|
|
383
|
-
const docEl = doc.documentElement;
|
|
384
|
-
function preventScrollStandard() {
|
|
385
|
-
if (docEl.hasAttribute("scroll-lock"))
|
|
386
|
-
return;
|
|
387
|
-
const fn = pipe(setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden"), () => docEl.setAttribute("scroll-lock", "true"));
|
|
388
|
-
return pipe(fn, () => docEl.removeAttribute("scroll-lock"));
|
|
389
|
-
}
|
|
390
|
-
function preventScrollMobileSafari() {
|
|
391
|
-
if (docEl.hasAttribute("scroll-lock"))
|
|
392
|
-
return;
|
|
393
|
-
let scrollable;
|
|
394
|
-
let lastY = 0;
|
|
395
|
-
let onTouchStart = (e2) => {
|
|
396
|
-
scrollable = getScrollParent(e2.target);
|
|
397
|
-
if (scrollable === docEl && scrollable === doc.body) {
|
|
398
|
-
return;
|
|
399
|
-
}
|
|
400
|
-
lastY = e2.changedTouches[0].pageY;
|
|
401
|
-
};
|
|
402
|
-
let onTouchMove = (e2) => {
|
|
403
|
-
if (e2.touches.length === 2 && allowPinchZoom)
|
|
404
|
-
return;
|
|
405
|
-
if (!scrollable || scrollable === docEl || scrollable === doc.body) {
|
|
406
|
-
e2.preventDefault();
|
|
407
|
-
return;
|
|
408
|
-
}
|
|
409
|
-
let y = e2.changedTouches[0].pageY;
|
|
410
|
-
let scrollTop = scrollable.scrollTop;
|
|
411
|
-
let bottom = scrollable.scrollHeight - scrollable.clientHeight;
|
|
412
|
-
if (scrollTop <= 0 && y > lastY || scrollTop >= bottom && y < lastY) {
|
|
413
|
-
e2.preventDefault();
|
|
414
|
-
}
|
|
415
|
-
lastY = y;
|
|
416
|
-
};
|
|
417
|
-
let onTouchEnd = (e2) => {
|
|
418
|
-
let target = e2.target;
|
|
419
|
-
if (target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target.type)) {
|
|
420
|
-
e2.preventDefault();
|
|
421
|
-
target.style.transform = "translateY(-2000px)";
|
|
422
|
-
target.focus();
|
|
423
|
-
win.requestAnimationFrame(() => {
|
|
424
|
-
target.style.transform = "";
|
|
425
|
-
});
|
|
426
|
-
}
|
|
427
|
-
};
|
|
428
|
-
let onFocus = (e2) => {
|
|
429
|
-
let target = e2.target;
|
|
430
|
-
if (target instanceof win.HTMLInputElement && !nonTextInputTypes.has(target.type)) {
|
|
431
|
-
target.style.transform = "translateY(-2000px)";
|
|
432
|
-
win.requestAnimationFrame(() => {
|
|
433
|
-
target.style.transform = "";
|
|
434
|
-
if (!viewport)
|
|
435
|
-
return;
|
|
436
|
-
if (viewport.height < win.innerHeight) {
|
|
437
|
-
win.requestAnimationFrame(function() {
|
|
438
|
-
es_default(target, { scrollMode: "if-needed" });
|
|
439
|
-
});
|
|
440
|
-
} else {
|
|
441
|
-
const onResize = () => {
|
|
442
|
-
es_default(target, { scrollMode: "if-needed" });
|
|
443
|
-
};
|
|
444
|
-
addDomEvent(viewport, "resize", onResize, { once: true });
|
|
445
|
-
}
|
|
446
|
-
});
|
|
447
|
-
}
|
|
448
|
-
};
|
|
449
|
-
let onWindowScroll = () => {
|
|
450
|
-
win.scrollTo(0, 0);
|
|
451
|
-
};
|
|
452
|
-
let scrollX = win.scrollX;
|
|
453
|
-
let scrollY = win.scrollY;
|
|
454
|
-
let restoreStyles = pipe(setStyle(docEl, "paddingRight", `${win.innerWidth - docEl.clientWidth}px`), setStyle(docEl, "overflow", "hidden"), setStyle(doc.body, "marginTop", `-${scrollY}px`));
|
|
455
|
-
win.scrollTo(0, 0);
|
|
456
|
-
let removeEvents = pipe(addDomEvent(doc, "touchstart", onTouchStart, { passive: false, capture: true }), addDomEvent(doc, "touchmove", onTouchMove, { passive: false, capture: true }), addDomEvent(doc, "touchend", onTouchEnd, { passive: false, capture: true }), addDomEvent(doc, "focus", onFocus, true), addDomEvent(win, "scroll", onWindowScroll), () => docEl.setAttribute("scroll-lock", "true"));
|
|
457
|
-
return () => {
|
|
458
|
-
restoreStyles();
|
|
459
|
-
removeEvents();
|
|
460
|
-
win.scrollTo(scrollX, scrollY);
|
|
461
|
-
docEl.removeAttribute("scroll-lock");
|
|
462
|
-
};
|
|
463
|
-
}
|
|
464
|
-
if (disabled)
|
|
465
|
-
return noop;
|
|
466
|
-
return isIos() ? preventScrollMobileSafari() : preventScrollStandard();
|
|
467
|
-
}
|
|
468
|
-
function setStyle(el, key, value) {
|
|
469
|
-
let cur = el.style[key];
|
|
470
|
-
el.style[key] = value;
|
|
471
|
-
return () => {
|
|
472
|
-
el.style[key] = cur;
|
|
473
|
-
};
|
|
474
|
-
}
|
|
475
232
|
function validateBlur(event, opts) {
|
|
476
233
|
var _a;
|
|
477
234
|
const exclude = Array.isArray(opts.exclude) ? opts.exclude : [opts.exclude];
|
|
@@ -626,6 +383,8 @@ function nextIndex(v, idx, opts = {}) {
|
|
|
626
383
|
function next(v, idx, opts = {}) {
|
|
627
384
|
return v[nextIndex(v, idx, opts)];
|
|
628
385
|
}
|
|
386
|
+
var isDom2 = () => typeof window !== "undefined";
|
|
387
|
+
var isTouchDevice2 = isDom2() && !!navigator.maxTouchPoints;
|
|
629
388
|
var runIfFn2 = (v, ...a) => {
|
|
630
389
|
const res = typeof v === "function" ? v(...a) : v;
|
|
631
390
|
return res != null ? res : void 0;
|
|
@@ -805,6 +564,7 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
805
564
|
var import_aria_hidden = require("@zag-js/aria-hidden");
|
|
806
565
|
var import_core = require("@zag-js/core");
|
|
807
566
|
var import_popper2 = require("@zag-js/popper");
|
|
567
|
+
var import_remove_scroll = require("@zag-js/remove-scroll");
|
|
808
568
|
var import_focus_trap = require("focus-trap");
|
|
809
569
|
var { and, or } = import_core.guards;
|
|
810
570
|
function machine(ctx = {}) {
|
|
@@ -835,7 +595,7 @@ function machine(ctx = {}) {
|
|
|
835
595
|
unknown: {
|
|
836
596
|
on: {
|
|
837
597
|
SETUP: {
|
|
838
|
-
target: "closed",
|
|
598
|
+
target: ctx.open ? "open" : "closed",
|
|
839
599
|
actions: ["setupDocument", "checkRenderedElements"]
|
|
840
600
|
}
|
|
841
601
|
}
|
|
@@ -933,8 +693,7 @@ function machine(ctx = {}) {
|
|
|
933
693
|
return () => unhide == null ? void 0 : unhide();
|
|
934
694
|
},
|
|
935
695
|
preventScroll(ctx2) {
|
|
936
|
-
return preventBodyScroll({
|
|
937
|
-
allowPinchZoom: true,
|
|
696
|
+
return (0, import_remove_scroll.preventBodyScroll)({
|
|
938
697
|
disabled: !ctx2.modal,
|
|
939
698
|
document: dom.getDoc(ctx2)
|
|
940
699
|
});
|
|
@@ -957,7 +716,7 @@ function machine(ctx = {}) {
|
|
|
957
716
|
});
|
|
958
717
|
try {
|
|
959
718
|
trap.activate();
|
|
960
|
-
} catch (
|
|
719
|
+
} catch (e) {
|
|
961
720
|
}
|
|
962
721
|
});
|
|
963
722
|
return () => trap == null ? void 0 : trap.deactivate();
|