@zag-js/popover 0.0.0-dev-20220706194607 → 0.0.0-dev-20220707125149
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 +62 -69
- package/dist/index.mjs +62 -69
- package/dist/popover.types.d.ts +1 -1
- package/package.json +6 -6
package/dist/index.js
CHANGED
|
@@ -51,9 +51,22 @@ var runIfFn = (v, ...a) => {
|
|
|
51
51
|
return res != null ? res : void 0;
|
|
52
52
|
};
|
|
53
53
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
54
|
+
function isWindow(value) {
|
|
55
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
56
|
+
}
|
|
54
57
|
function isFrame(element) {
|
|
55
58
|
return element.localName === "iframe";
|
|
56
59
|
}
|
|
60
|
+
function getDocument(el) {
|
|
61
|
+
var _a;
|
|
62
|
+
if (isWindow(el))
|
|
63
|
+
return el.document;
|
|
64
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
65
|
+
}
|
|
66
|
+
function getEventTarget(event) {
|
|
67
|
+
var _a, _b;
|
|
68
|
+
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
69
|
+
}
|
|
57
70
|
function contains(parent, child) {
|
|
58
71
|
if (!parent)
|
|
59
72
|
return false;
|
|
@@ -345,12 +358,12 @@ function getPlatform() {
|
|
|
345
358
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
346
359
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
347
360
|
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
348
|
-
function
|
|
361
|
+
function isWindow2(value) {
|
|
349
362
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
350
363
|
}
|
|
351
|
-
function
|
|
364
|
+
function getDocument2(el) {
|
|
352
365
|
var _a;
|
|
353
|
-
if (
|
|
366
|
+
if (isWindow2(el))
|
|
354
367
|
return el.document;
|
|
355
368
|
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
356
369
|
}
|
|
@@ -358,7 +371,7 @@ function getWindow(el) {
|
|
|
358
371
|
var _a;
|
|
359
372
|
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
360
373
|
}
|
|
361
|
-
function
|
|
374
|
+
function getEventTarget2(event) {
|
|
362
375
|
var _a, _b;
|
|
363
376
|
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
364
377
|
}
|
|
@@ -382,7 +395,8 @@ var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaK
|
|
|
382
395
|
function fireCustomEvent(el, type, init) {
|
|
383
396
|
if (!el)
|
|
384
397
|
return;
|
|
385
|
-
const
|
|
398
|
+
const win = getWindow(el);
|
|
399
|
+
const event = new win.CustomEvent(type, init);
|
|
386
400
|
return el.dispatchEvent(event);
|
|
387
401
|
}
|
|
388
402
|
var focusableSelector2 = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
|
|
@@ -405,10 +419,10 @@ function trackInteractOutside(node, options) {
|
|
|
405
419
|
const { exclude, onFocusOutside, onPointerDownOutside } = options;
|
|
406
420
|
if (!node)
|
|
407
421
|
return;
|
|
408
|
-
const doc =
|
|
422
|
+
const doc = getDocument2(node);
|
|
409
423
|
const win = getWindow(node);
|
|
410
424
|
function isEventOutside(event) {
|
|
411
|
-
const target =
|
|
425
|
+
const target = getEventTarget2(event);
|
|
412
426
|
if (!(target instanceof win.HTMLElement)) {
|
|
413
427
|
return false;
|
|
414
428
|
}
|
|
@@ -434,7 +448,7 @@ function trackInteractOutside(node, options) {
|
|
|
434
448
|
detail: {
|
|
435
449
|
originalEvent: event,
|
|
436
450
|
contextmenu: isContextMenuEvent(event),
|
|
437
|
-
focusable: isFocusable2(
|
|
451
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
438
452
|
}
|
|
439
453
|
});
|
|
440
454
|
}
|
|
@@ -462,7 +476,7 @@ function trackInteractOutside(node, options) {
|
|
|
462
476
|
detail: {
|
|
463
477
|
originalEvent: event,
|
|
464
478
|
contextmenu: false,
|
|
465
|
-
focusable: isFocusable2(
|
|
479
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
466
480
|
}
|
|
467
481
|
});
|
|
468
482
|
}
|
|
@@ -475,48 +489,16 @@ function trackInteractOutside(node, options) {
|
|
|
475
489
|
};
|
|
476
490
|
}
|
|
477
491
|
|
|
478
|
-
// ../../utilities/dismissable/
|
|
479
|
-
var runIfFn4 = (v, ...a) => {
|
|
480
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
481
|
-
return res != null ? res : void 0;
|
|
482
|
-
};
|
|
483
|
-
var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
484
|
-
function isWindow2(value) {
|
|
485
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
486
|
-
}
|
|
487
|
-
function getDocument2(el) {
|
|
488
|
-
var _a;
|
|
489
|
-
if (isWindow2(el))
|
|
490
|
-
return el.document;
|
|
491
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
492
|
-
}
|
|
493
|
-
function getEventTarget2(event) {
|
|
494
|
-
var _a, _b;
|
|
495
|
-
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
496
|
-
}
|
|
497
|
-
function contains3(parent, child) {
|
|
498
|
-
if (!parent)
|
|
499
|
-
return false;
|
|
500
|
-
return parent === child || isHTMLElement3(parent) && isHTMLElement3(child) && parent.contains(child);
|
|
501
|
-
}
|
|
502
|
-
function isHTMLElement3(v) {
|
|
503
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
504
|
-
}
|
|
505
|
-
var isRef3 = (v) => hasProp3(v, "current");
|
|
506
|
-
function addDomEvent3(target, eventName, handler, options) {
|
|
507
|
-
const node = isRef3(target) ? target.current : runIfFn4(target);
|
|
508
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
509
|
-
return () => {
|
|
510
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
511
|
-
};
|
|
512
|
-
}
|
|
492
|
+
// ../../utilities/dismissable/src/escape-keydown.ts
|
|
513
493
|
function trackEscapeKeydown(fn) {
|
|
514
494
|
const handleKeyDown = (event) => {
|
|
515
495
|
if (event.key === "Escape")
|
|
516
496
|
fn == null ? void 0 : fn(event);
|
|
517
497
|
};
|
|
518
|
-
return
|
|
498
|
+
return addDomEvent(document, "keydown", handleKeyDown);
|
|
519
499
|
}
|
|
500
|
+
|
|
501
|
+
// ../../utilities/dismissable/src/layer-stack.ts
|
|
520
502
|
var layerStack = {
|
|
521
503
|
layers: [],
|
|
522
504
|
branches: [],
|
|
@@ -542,14 +524,14 @@ var layerStack = {
|
|
|
542
524
|
const layer = this.layers[this.count() - 1];
|
|
543
525
|
return (layer == null ? void 0 : layer.node) === node;
|
|
544
526
|
},
|
|
545
|
-
|
|
546
|
-
return this.layers.slice(this.indexOf(node));
|
|
527
|
+
getNestedLayers(node) {
|
|
528
|
+
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
547
529
|
},
|
|
548
|
-
|
|
549
|
-
return this.
|
|
530
|
+
isInNestedLayer(node, target) {
|
|
531
|
+
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
550
532
|
},
|
|
551
533
|
isInBranch(target) {
|
|
552
|
-
return
|
|
534
|
+
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
553
535
|
},
|
|
554
536
|
add(layer) {
|
|
555
537
|
this.layers.push(layer);
|
|
@@ -559,10 +541,13 @@ var layerStack = {
|
|
|
559
541
|
},
|
|
560
542
|
remove(node) {
|
|
561
543
|
const index = this.indexOf(node);
|
|
562
|
-
if (index
|
|
563
|
-
|
|
544
|
+
if (index < 0)
|
|
545
|
+
return;
|
|
546
|
+
if (index < this.count() - 1) {
|
|
547
|
+
const _layers = this.getNestedLayers(node);
|
|
548
|
+
_layers.forEach((layer) => layer.dismiss());
|
|
564
549
|
}
|
|
565
|
-
this.layers
|
|
550
|
+
this.layers.splice(index, 1);
|
|
566
551
|
},
|
|
567
552
|
removeBranch(node) {
|
|
568
553
|
const index = this.branches.indexOf(node);
|
|
@@ -580,6 +565,8 @@ var layerStack = {
|
|
|
580
565
|
this.remove(this.layers[0].node);
|
|
581
566
|
}
|
|
582
567
|
};
|
|
568
|
+
|
|
569
|
+
// ../../utilities/dismissable/src/pointer-event-outside.ts
|
|
583
570
|
var originalBodyPointerEvents;
|
|
584
571
|
function assignPointerEventToLayers() {
|
|
585
572
|
layerStack.layers.forEach(({ node }) => {
|
|
@@ -591,7 +578,7 @@ function clearPointerEvent(node) {
|
|
|
591
578
|
}
|
|
592
579
|
var DATA_ATTR = "data-inert";
|
|
593
580
|
function disablePointerEventsOutside(node) {
|
|
594
|
-
const doc =
|
|
581
|
+
const doc = getDocument(node);
|
|
595
582
|
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
596
583
|
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
597
584
|
doc.body.style.pointerEvents = "none";
|
|
@@ -606,33 +593,41 @@ function disablePointerEventsOutside(node) {
|
|
|
606
593
|
doc.body.removeAttribute("style");
|
|
607
594
|
};
|
|
608
595
|
}
|
|
596
|
+
|
|
597
|
+
// ../../utilities/dismissable/src/dismissable-layer.ts
|
|
609
598
|
function trackDismissableElement(node, options) {
|
|
610
599
|
if (!node)
|
|
611
600
|
return;
|
|
612
|
-
const { onDismiss, pointerBlocking, exclude: excludeContainers } = options;
|
|
601
|
+
const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
|
|
613
602
|
const layer = { dismiss: onDismiss, node, pointerBlocking };
|
|
614
603
|
layerStack.add(layer);
|
|
615
604
|
assignPointerEventToLayers();
|
|
616
605
|
function onPointerDownOutside(event) {
|
|
617
606
|
var _a, _b;
|
|
618
|
-
const target =
|
|
607
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
619
608
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
620
609
|
return;
|
|
621
610
|
(_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
|
|
622
611
|
(_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
|
|
623
612
|
if (event.defaultPrevented)
|
|
624
613
|
return;
|
|
614
|
+
if (debug) {
|
|
615
|
+
console.log("onPointerDownOutside:", event.detail.originalEvent);
|
|
616
|
+
}
|
|
625
617
|
onDismiss == null ? void 0 : onDismiss();
|
|
626
618
|
}
|
|
627
619
|
function onFocusOutside(event) {
|
|
628
620
|
var _a, _b;
|
|
629
|
-
const target =
|
|
621
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
630
622
|
if (layerStack.isInBranch(target))
|
|
631
623
|
return;
|
|
632
624
|
(_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
|
|
633
625
|
(_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
|
|
634
626
|
if (event.defaultPrevented)
|
|
635
627
|
return;
|
|
628
|
+
if (debug) {
|
|
629
|
+
console.log("onFocusOutside:", event.detail.originalEvent);
|
|
630
|
+
}
|
|
636
631
|
onDismiss == null ? void 0 : onDismiss();
|
|
637
632
|
}
|
|
638
633
|
function onEscapeKeyDown(event) {
|
|
@@ -646,9 +641,11 @@ function trackDismissableElement(node, options) {
|
|
|
646
641
|
}
|
|
647
642
|
}
|
|
648
643
|
function exclude(target) {
|
|
644
|
+
if (!node)
|
|
645
|
+
return false;
|
|
649
646
|
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
|
|
650
|
-
const
|
|
651
|
-
return
|
|
647
|
+
const _containers = Array.isArray(containers) ? containers : [containers];
|
|
648
|
+
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
652
649
|
}
|
|
653
650
|
const cleanups = [
|
|
654
651
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
|
@@ -683,7 +680,7 @@ function machine(ctx = {}) {
|
|
|
683
680
|
}, ctx.positioning),
|
|
684
681
|
currentPlacement: void 0
|
|
685
682
|
}, ctx), {
|
|
686
|
-
|
|
683
|
+
focusTriggerOnClose: true,
|
|
687
684
|
renderedElements: {
|
|
688
685
|
title: true,
|
|
689
686
|
description: true,
|
|
@@ -773,7 +770,7 @@ function machine(ctx = {}) {
|
|
|
773
770
|
(_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
|
|
774
771
|
if (ctx2.closeOnEsc)
|
|
775
772
|
return;
|
|
776
|
-
ctx2.
|
|
773
|
+
ctx2.focusTriggerOnClose = true;
|
|
777
774
|
event.preventDefault();
|
|
778
775
|
},
|
|
779
776
|
onInteractOutside(event) {
|
|
@@ -781,7 +778,7 @@ function machine(ctx = {}) {
|
|
|
781
778
|
(_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
782
779
|
if (event.defaultPrevented)
|
|
783
780
|
return;
|
|
784
|
-
ctx2.
|
|
781
|
+
ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
|
|
785
782
|
if (!ctx2.closeOnInteractOutside) {
|
|
786
783
|
event.preventDefault();
|
|
787
784
|
}
|
|
@@ -889,15 +886,11 @@ function machine(ctx = {}) {
|
|
|
889
886
|
});
|
|
890
887
|
},
|
|
891
888
|
focusTriggerIfNeeded(ctx2) {
|
|
892
|
-
|
|
889
|
+
if (!ctx2.focusTriggerOnClose)
|
|
890
|
+
return;
|
|
891
|
+
raf(() => {
|
|
893
892
|
var _a;
|
|
894
893
|
return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
|
|
895
|
-
};
|
|
896
|
-
raf(() => {
|
|
897
|
-
if (!ctx2.preventReturnFocus) {
|
|
898
|
-
focus();
|
|
899
|
-
ctx2.preventReturnFocus = false;
|
|
900
|
-
}
|
|
901
894
|
});
|
|
902
895
|
},
|
|
903
896
|
focusFirstTabbableElement(ctx2, evt) {
|
package/dist/index.mjs
CHANGED
|
@@ -27,9 +27,22 @@ var runIfFn = (v, ...a) => {
|
|
|
27
27
|
return res != null ? res : void 0;
|
|
28
28
|
};
|
|
29
29
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
30
|
+
function isWindow(value) {
|
|
31
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
32
|
+
}
|
|
30
33
|
function isFrame(element) {
|
|
31
34
|
return element.localName === "iframe";
|
|
32
35
|
}
|
|
36
|
+
function getDocument(el) {
|
|
37
|
+
var _a;
|
|
38
|
+
if (isWindow(el))
|
|
39
|
+
return el.document;
|
|
40
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
41
|
+
}
|
|
42
|
+
function getEventTarget(event) {
|
|
43
|
+
var _a, _b;
|
|
44
|
+
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
45
|
+
}
|
|
33
46
|
function contains(parent, child) {
|
|
34
47
|
if (!parent)
|
|
35
48
|
return false;
|
|
@@ -321,12 +334,12 @@ function getPlatform() {
|
|
|
321
334
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
322
335
|
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
323
336
|
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
324
|
-
function
|
|
337
|
+
function isWindow2(value) {
|
|
325
338
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
326
339
|
}
|
|
327
|
-
function
|
|
340
|
+
function getDocument2(el) {
|
|
328
341
|
var _a;
|
|
329
|
-
if (
|
|
342
|
+
if (isWindow2(el))
|
|
330
343
|
return el.document;
|
|
331
344
|
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
332
345
|
}
|
|
@@ -334,7 +347,7 @@ function getWindow(el) {
|
|
|
334
347
|
var _a;
|
|
335
348
|
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
336
349
|
}
|
|
337
|
-
function
|
|
350
|
+
function getEventTarget2(event) {
|
|
338
351
|
var _a, _b;
|
|
339
352
|
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
340
353
|
}
|
|
@@ -358,7 +371,8 @@ var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaK
|
|
|
358
371
|
function fireCustomEvent(el, type, init) {
|
|
359
372
|
if (!el)
|
|
360
373
|
return;
|
|
361
|
-
const
|
|
374
|
+
const win = getWindow(el);
|
|
375
|
+
const event = new win.CustomEvent(type, init);
|
|
362
376
|
return el.dispatchEvent(event);
|
|
363
377
|
}
|
|
364
378
|
var focusableSelector2 = "input:not([type='hidden']):not([disabled]), select:not([disabled]), textarea:not([disabled]), a[href], button:not([disabled]), [tabindex], iframe, object, embed, area[href], audio[controls], video[controls], [contenteditable]:not([contenteditable='false']), details > summary:first-of-type";
|
|
@@ -381,10 +395,10 @@ function trackInteractOutside(node, options) {
|
|
|
381
395
|
const { exclude, onFocusOutside, onPointerDownOutside } = options;
|
|
382
396
|
if (!node)
|
|
383
397
|
return;
|
|
384
|
-
const doc =
|
|
398
|
+
const doc = getDocument2(node);
|
|
385
399
|
const win = getWindow(node);
|
|
386
400
|
function isEventOutside(event) {
|
|
387
|
-
const target =
|
|
401
|
+
const target = getEventTarget2(event);
|
|
388
402
|
if (!(target instanceof win.HTMLElement)) {
|
|
389
403
|
return false;
|
|
390
404
|
}
|
|
@@ -410,7 +424,7 @@ function trackInteractOutside(node, options) {
|
|
|
410
424
|
detail: {
|
|
411
425
|
originalEvent: event,
|
|
412
426
|
contextmenu: isContextMenuEvent(event),
|
|
413
|
-
focusable: isFocusable2(
|
|
427
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
414
428
|
}
|
|
415
429
|
});
|
|
416
430
|
}
|
|
@@ -438,7 +452,7 @@ function trackInteractOutside(node, options) {
|
|
|
438
452
|
detail: {
|
|
439
453
|
originalEvent: event,
|
|
440
454
|
contextmenu: false,
|
|
441
|
-
focusable: isFocusable2(
|
|
455
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
442
456
|
}
|
|
443
457
|
});
|
|
444
458
|
}
|
|
@@ -451,48 +465,16 @@ function trackInteractOutside(node, options) {
|
|
|
451
465
|
};
|
|
452
466
|
}
|
|
453
467
|
|
|
454
|
-
// ../../utilities/dismissable/
|
|
455
|
-
var runIfFn4 = (v, ...a) => {
|
|
456
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
457
|
-
return res != null ? res : void 0;
|
|
458
|
-
};
|
|
459
|
-
var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
460
|
-
function isWindow2(value) {
|
|
461
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
462
|
-
}
|
|
463
|
-
function getDocument2(el) {
|
|
464
|
-
var _a;
|
|
465
|
-
if (isWindow2(el))
|
|
466
|
-
return el.document;
|
|
467
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
468
|
-
}
|
|
469
|
-
function getEventTarget2(event) {
|
|
470
|
-
var _a, _b;
|
|
471
|
-
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
472
|
-
}
|
|
473
|
-
function contains3(parent, child) {
|
|
474
|
-
if (!parent)
|
|
475
|
-
return false;
|
|
476
|
-
return parent === child || isHTMLElement3(parent) && isHTMLElement3(child) && parent.contains(child);
|
|
477
|
-
}
|
|
478
|
-
function isHTMLElement3(v) {
|
|
479
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
480
|
-
}
|
|
481
|
-
var isRef3 = (v) => hasProp3(v, "current");
|
|
482
|
-
function addDomEvent3(target, eventName, handler, options) {
|
|
483
|
-
const node = isRef3(target) ? target.current : runIfFn4(target);
|
|
484
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
485
|
-
return () => {
|
|
486
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
487
|
-
};
|
|
488
|
-
}
|
|
468
|
+
// ../../utilities/dismissable/src/escape-keydown.ts
|
|
489
469
|
function trackEscapeKeydown(fn) {
|
|
490
470
|
const handleKeyDown = (event) => {
|
|
491
471
|
if (event.key === "Escape")
|
|
492
472
|
fn == null ? void 0 : fn(event);
|
|
493
473
|
};
|
|
494
|
-
return
|
|
474
|
+
return addDomEvent(document, "keydown", handleKeyDown);
|
|
495
475
|
}
|
|
476
|
+
|
|
477
|
+
// ../../utilities/dismissable/src/layer-stack.ts
|
|
496
478
|
var layerStack = {
|
|
497
479
|
layers: [],
|
|
498
480
|
branches: [],
|
|
@@ -518,14 +500,14 @@ var layerStack = {
|
|
|
518
500
|
const layer = this.layers[this.count() - 1];
|
|
519
501
|
return (layer == null ? void 0 : layer.node) === node;
|
|
520
502
|
},
|
|
521
|
-
|
|
522
|
-
return this.layers.slice(this.indexOf(node));
|
|
503
|
+
getNestedLayers(node) {
|
|
504
|
+
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
523
505
|
},
|
|
524
|
-
|
|
525
|
-
return this.
|
|
506
|
+
isInNestedLayer(node, target) {
|
|
507
|
+
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
526
508
|
},
|
|
527
509
|
isInBranch(target) {
|
|
528
|
-
return
|
|
510
|
+
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
529
511
|
},
|
|
530
512
|
add(layer) {
|
|
531
513
|
this.layers.push(layer);
|
|
@@ -535,10 +517,13 @@ var layerStack = {
|
|
|
535
517
|
},
|
|
536
518
|
remove(node) {
|
|
537
519
|
const index = this.indexOf(node);
|
|
538
|
-
if (index
|
|
539
|
-
|
|
520
|
+
if (index < 0)
|
|
521
|
+
return;
|
|
522
|
+
if (index < this.count() - 1) {
|
|
523
|
+
const _layers = this.getNestedLayers(node);
|
|
524
|
+
_layers.forEach((layer) => layer.dismiss());
|
|
540
525
|
}
|
|
541
|
-
this.layers
|
|
526
|
+
this.layers.splice(index, 1);
|
|
542
527
|
},
|
|
543
528
|
removeBranch(node) {
|
|
544
529
|
const index = this.branches.indexOf(node);
|
|
@@ -556,6 +541,8 @@ var layerStack = {
|
|
|
556
541
|
this.remove(this.layers[0].node);
|
|
557
542
|
}
|
|
558
543
|
};
|
|
544
|
+
|
|
545
|
+
// ../../utilities/dismissable/src/pointer-event-outside.ts
|
|
559
546
|
var originalBodyPointerEvents;
|
|
560
547
|
function assignPointerEventToLayers() {
|
|
561
548
|
layerStack.layers.forEach(({ node }) => {
|
|
@@ -567,7 +554,7 @@ function clearPointerEvent(node) {
|
|
|
567
554
|
}
|
|
568
555
|
var DATA_ATTR = "data-inert";
|
|
569
556
|
function disablePointerEventsOutside(node) {
|
|
570
|
-
const doc =
|
|
557
|
+
const doc = getDocument(node);
|
|
571
558
|
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
572
559
|
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
573
560
|
doc.body.style.pointerEvents = "none";
|
|
@@ -582,33 +569,41 @@ function disablePointerEventsOutside(node) {
|
|
|
582
569
|
doc.body.removeAttribute("style");
|
|
583
570
|
};
|
|
584
571
|
}
|
|
572
|
+
|
|
573
|
+
// ../../utilities/dismissable/src/dismissable-layer.ts
|
|
585
574
|
function trackDismissableElement(node, options) {
|
|
586
575
|
if (!node)
|
|
587
576
|
return;
|
|
588
|
-
const { onDismiss, pointerBlocking, exclude: excludeContainers } = options;
|
|
577
|
+
const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
|
|
589
578
|
const layer = { dismiss: onDismiss, node, pointerBlocking };
|
|
590
579
|
layerStack.add(layer);
|
|
591
580
|
assignPointerEventToLayers();
|
|
592
581
|
function onPointerDownOutside(event) {
|
|
593
582
|
var _a, _b;
|
|
594
|
-
const target =
|
|
583
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
595
584
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
596
585
|
return;
|
|
597
586
|
(_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
|
|
598
587
|
(_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
|
|
599
588
|
if (event.defaultPrevented)
|
|
600
589
|
return;
|
|
590
|
+
if (debug) {
|
|
591
|
+
console.log("onPointerDownOutside:", event.detail.originalEvent);
|
|
592
|
+
}
|
|
601
593
|
onDismiss == null ? void 0 : onDismiss();
|
|
602
594
|
}
|
|
603
595
|
function onFocusOutside(event) {
|
|
604
596
|
var _a, _b;
|
|
605
|
-
const target =
|
|
597
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
606
598
|
if (layerStack.isInBranch(target))
|
|
607
599
|
return;
|
|
608
600
|
(_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
|
|
609
601
|
(_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
|
|
610
602
|
if (event.defaultPrevented)
|
|
611
603
|
return;
|
|
604
|
+
if (debug) {
|
|
605
|
+
console.log("onFocusOutside:", event.detail.originalEvent);
|
|
606
|
+
}
|
|
612
607
|
onDismiss == null ? void 0 : onDismiss();
|
|
613
608
|
}
|
|
614
609
|
function onEscapeKeyDown(event) {
|
|
@@ -622,9 +617,11 @@ function trackDismissableElement(node, options) {
|
|
|
622
617
|
}
|
|
623
618
|
}
|
|
624
619
|
function exclude(target) {
|
|
620
|
+
if (!node)
|
|
621
|
+
return false;
|
|
625
622
|
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
|
|
626
|
-
const
|
|
627
|
-
return
|
|
623
|
+
const _containers = Array.isArray(containers) ? containers : [containers];
|
|
624
|
+
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
628
625
|
}
|
|
629
626
|
const cleanups = [
|
|
630
627
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
|
@@ -659,7 +656,7 @@ function machine(ctx = {}) {
|
|
|
659
656
|
}, ctx.positioning),
|
|
660
657
|
currentPlacement: void 0
|
|
661
658
|
}, ctx), {
|
|
662
|
-
|
|
659
|
+
focusTriggerOnClose: true,
|
|
663
660
|
renderedElements: {
|
|
664
661
|
title: true,
|
|
665
662
|
description: true,
|
|
@@ -749,7 +746,7 @@ function machine(ctx = {}) {
|
|
|
749
746
|
(_a = ctx2.onEscapeKeyDown) == null ? void 0 : _a.call(ctx2, event);
|
|
750
747
|
if (ctx2.closeOnEsc)
|
|
751
748
|
return;
|
|
752
|
-
ctx2.
|
|
749
|
+
ctx2.focusTriggerOnClose = true;
|
|
753
750
|
event.preventDefault();
|
|
754
751
|
},
|
|
755
752
|
onInteractOutside(event) {
|
|
@@ -757,7 +754,7 @@ function machine(ctx = {}) {
|
|
|
757
754
|
(_a = ctx2.onInteractOutside) == null ? void 0 : _a.call(ctx2, event);
|
|
758
755
|
if (event.defaultPrevented)
|
|
759
756
|
return;
|
|
760
|
-
ctx2.
|
|
757
|
+
ctx2.focusTriggerOnClose = !(event.detail.focusable || event.detail.contextmenu);
|
|
761
758
|
if (!ctx2.closeOnInteractOutside) {
|
|
762
759
|
event.preventDefault();
|
|
763
760
|
}
|
|
@@ -865,15 +862,11 @@ function machine(ctx = {}) {
|
|
|
865
862
|
});
|
|
866
863
|
},
|
|
867
864
|
focusTriggerIfNeeded(ctx2) {
|
|
868
|
-
|
|
865
|
+
if (!ctx2.focusTriggerOnClose)
|
|
866
|
+
return;
|
|
867
|
+
raf(() => {
|
|
869
868
|
var _a;
|
|
870
869
|
return (_a = dom.getTriggerEl(ctx2)) == null ? void 0 : _a.focus();
|
|
871
|
-
};
|
|
872
|
-
raf(() => {
|
|
873
|
-
if (!ctx2.preventReturnFocus) {
|
|
874
|
-
focus();
|
|
875
|
-
ctx2.preventReturnFocus = false;
|
|
876
|
-
}
|
|
877
870
|
});
|
|
878
871
|
},
|
|
879
872
|
focusFirstTabbableElement(ctx2, evt) {
|
package/dist/popover.types.d.ts
CHANGED
|
@@ -90,7 +90,7 @@ declare type PrivateContext = Context<{
|
|
|
90
90
|
/**
|
|
91
91
|
* Whether to prevent returning focus to the trigger
|
|
92
92
|
*/
|
|
93
|
-
|
|
93
|
+
focusTriggerOnClose?: boolean;
|
|
94
94
|
}>;
|
|
95
95
|
export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
96
96
|
export declare type MachineState = {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/popover",
|
|
3
|
-
"version": "0.0.0-dev-
|
|
3
|
+
"version": "0.0.0-dev-20220707125149",
|
|
4
4
|
"description": "Core logic for the popover widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -30,11 +30,11 @@
|
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@zag-js/aria-hidden": "0.1.0",
|
|
33
|
-
"@zag-js/core": "0.0.0-dev-
|
|
34
|
-
"@zag-js/dom-utils": "0.0.0-dev-
|
|
35
|
-
"@zag-js/popper": "0.0.0-dev-
|
|
36
|
-
"@zag-js/remove-scroll": "0.0.0-dev-
|
|
37
|
-
"@zag-js/types": "0.0.0-dev-
|
|
33
|
+
"@zag-js/core": "0.0.0-dev-20220707125149",
|
|
34
|
+
"@zag-js/dom-utils": "0.0.0-dev-20220707125149",
|
|
35
|
+
"@zag-js/popper": "0.0.0-dev-20220707125149",
|
|
36
|
+
"@zag-js/remove-scroll": "0.0.0-dev-20220707125149",
|
|
37
|
+
"@zag-js/types": "0.0.0-dev-20220707125149",
|
|
38
38
|
"@zag-js/utils": "0.1.2",
|
|
39
39
|
"focus-trap": "6.9.4"
|
|
40
40
|
},
|