@zag-js/popover 0.0.0-dev-20220709094240 → 0.0.0-dev-20220709094318
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 +22 -51
- package/dist/index.mjs +22 -51
- package/dist/popover.dom.d.ts +3 -3
- package/package.json +5 -5
package/dist/index.js
CHANGED
|
@@ -84,6 +84,10 @@ function getDocument(el) {
|
|
|
84
84
|
return el;
|
|
85
85
|
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
86
86
|
}
|
|
87
|
+
function getEventTarget(event) {
|
|
88
|
+
var _a, _b;
|
|
89
|
+
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
90
|
+
}
|
|
87
91
|
function withRootHelpers(domUtils) {
|
|
88
92
|
const roots = {
|
|
89
93
|
getRootNode: (ctx) => {
|
|
@@ -395,7 +399,7 @@ function getWindow(el) {
|
|
|
395
399
|
var _a;
|
|
396
400
|
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
397
401
|
}
|
|
398
|
-
function
|
|
402
|
+
function getEventTarget2(event) {
|
|
399
403
|
var _a, _b;
|
|
400
404
|
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
401
405
|
}
|
|
@@ -446,7 +450,7 @@ function trackInteractOutside(node, options) {
|
|
|
446
450
|
const doc = getDocument2(node);
|
|
447
451
|
const win = getWindow(node);
|
|
448
452
|
function isEventOutside(event) {
|
|
449
|
-
const target =
|
|
453
|
+
const target = getEventTarget2(event);
|
|
450
454
|
if (!(target instanceof win.HTMLElement)) {
|
|
451
455
|
return false;
|
|
452
456
|
}
|
|
@@ -472,7 +476,7 @@ function trackInteractOutside(node, options) {
|
|
|
472
476
|
detail: {
|
|
473
477
|
originalEvent: event,
|
|
474
478
|
contextmenu: isContextMenuEvent(event),
|
|
475
|
-
focusable: isFocusable2(
|
|
479
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
476
480
|
}
|
|
477
481
|
});
|
|
478
482
|
}
|
|
@@ -500,7 +504,7 @@ function trackInteractOutside(node, options) {
|
|
|
500
504
|
detail: {
|
|
501
505
|
originalEvent: event,
|
|
502
506
|
contextmenu: false,
|
|
503
|
-
focusable: isFocusable2(
|
|
507
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
504
508
|
}
|
|
505
509
|
});
|
|
506
510
|
}
|
|
@@ -513,53 +517,16 @@ function trackInteractOutside(node, options) {
|
|
|
513
517
|
};
|
|
514
518
|
}
|
|
515
519
|
|
|
516
|
-
// ../../utilities/dismissable/
|
|
517
|
-
var runIfFn4 = (v, ...a) => {
|
|
518
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
519
|
-
return res != null ? res : void 0;
|
|
520
|
-
};
|
|
521
|
-
var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
522
|
-
function isDocument3(el) {
|
|
523
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
524
|
-
}
|
|
525
|
-
function isWindow3(value) {
|
|
526
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
527
|
-
}
|
|
528
|
-
function getDocument3(el) {
|
|
529
|
-
var _a;
|
|
530
|
-
if (isWindow3(el))
|
|
531
|
-
return el.document;
|
|
532
|
-
if (isDocument3(el))
|
|
533
|
-
return el;
|
|
534
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
535
|
-
}
|
|
536
|
-
function getEventTarget2(event) {
|
|
537
|
-
var _a, _b;
|
|
538
|
-
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
539
|
-
}
|
|
540
|
-
function contains3(parent, child) {
|
|
541
|
-
if (!parent)
|
|
542
|
-
return false;
|
|
543
|
-
return parent === child || isHTMLElement3(parent) && isHTMLElement3(child) && parent.contains(child);
|
|
544
|
-
}
|
|
545
|
-
function isHTMLElement3(v) {
|
|
546
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
547
|
-
}
|
|
548
|
-
var isRef3 = (v) => hasProp3(v, "current");
|
|
549
|
-
function addDomEvent3(target, eventName, handler, options) {
|
|
550
|
-
const node = isRef3(target) ? target.current : runIfFn4(target);
|
|
551
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
552
|
-
return () => {
|
|
553
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
554
|
-
};
|
|
555
|
-
}
|
|
520
|
+
// ../../utilities/dismissable/src/escape-keydown.ts
|
|
556
521
|
function trackEscapeKeydown(fn) {
|
|
557
522
|
const handleKeyDown = (event) => {
|
|
558
523
|
if (event.key === "Escape")
|
|
559
524
|
fn == null ? void 0 : fn(event);
|
|
560
525
|
};
|
|
561
|
-
return
|
|
526
|
+
return addDomEvent(document, "keydown", handleKeyDown);
|
|
562
527
|
}
|
|
528
|
+
|
|
529
|
+
// ../../utilities/dismissable/src/layer-stack.ts
|
|
563
530
|
var layerStack = {
|
|
564
531
|
layers: [],
|
|
565
532
|
branches: [],
|
|
@@ -589,10 +556,10 @@ var layerStack = {
|
|
|
589
556
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
590
557
|
},
|
|
591
558
|
isInNestedLayer(node, target) {
|
|
592
|
-
return this.getNestedLayers(node).some((layer) =>
|
|
559
|
+
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
593
560
|
},
|
|
594
561
|
isInBranch(target) {
|
|
595
|
-
return Array.from(this.branches).some((branch) =>
|
|
562
|
+
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
596
563
|
},
|
|
597
564
|
add(layer) {
|
|
598
565
|
this.layers.push(layer);
|
|
@@ -626,6 +593,8 @@ var layerStack = {
|
|
|
626
593
|
this.remove(this.layers[0].node);
|
|
627
594
|
}
|
|
628
595
|
};
|
|
596
|
+
|
|
597
|
+
// ../../utilities/dismissable/src/pointer-event-outside.ts
|
|
629
598
|
var originalBodyPointerEvents;
|
|
630
599
|
function assignPointerEventToLayers() {
|
|
631
600
|
layerStack.layers.forEach(({ node }) => {
|
|
@@ -637,7 +606,7 @@ function clearPointerEvent(node) {
|
|
|
637
606
|
}
|
|
638
607
|
var DATA_ATTR = "data-inert";
|
|
639
608
|
function disablePointerEventsOutside(node) {
|
|
640
|
-
const doc =
|
|
609
|
+
const doc = getDocument(node);
|
|
641
610
|
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
642
611
|
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
643
612
|
doc.body.style.pointerEvents = "none";
|
|
@@ -652,6 +621,8 @@ function disablePointerEventsOutside(node) {
|
|
|
652
621
|
doc.body.removeAttribute("style");
|
|
653
622
|
};
|
|
654
623
|
}
|
|
624
|
+
|
|
625
|
+
// ../../utilities/dismissable/src/dismissable-layer.ts
|
|
655
626
|
function trackDismissableElement(node, options) {
|
|
656
627
|
if (!node)
|
|
657
628
|
return;
|
|
@@ -661,7 +632,7 @@ function trackDismissableElement(node, options) {
|
|
|
661
632
|
assignPointerEventToLayers();
|
|
662
633
|
function onPointerDownOutside(event) {
|
|
663
634
|
var _a, _b;
|
|
664
|
-
const target =
|
|
635
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
665
636
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
666
637
|
return;
|
|
667
638
|
(_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
|
|
@@ -675,7 +646,7 @@ function trackDismissableElement(node, options) {
|
|
|
675
646
|
}
|
|
676
647
|
function onFocusOutside(event) {
|
|
677
648
|
var _a, _b;
|
|
678
|
-
const target =
|
|
649
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
679
650
|
if (layerStack.isInBranch(target))
|
|
680
651
|
return;
|
|
681
652
|
(_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
|
|
@@ -702,7 +673,7 @@ function trackDismissableElement(node, options) {
|
|
|
702
673
|
return false;
|
|
703
674
|
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
|
|
704
675
|
const _containers = Array.isArray(containers) ? containers : [containers];
|
|
705
|
-
return _containers.some((node2) =>
|
|
676
|
+
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
706
677
|
}
|
|
707
678
|
const cleanups = [
|
|
708
679
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
package/dist/index.mjs
CHANGED
|
@@ -60,6 +60,10 @@ function getDocument(el) {
|
|
|
60
60
|
return el;
|
|
61
61
|
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
62
62
|
}
|
|
63
|
+
function getEventTarget(event) {
|
|
64
|
+
var _a, _b;
|
|
65
|
+
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
66
|
+
}
|
|
63
67
|
function withRootHelpers(domUtils) {
|
|
64
68
|
const roots = {
|
|
65
69
|
getRootNode: (ctx) => {
|
|
@@ -371,7 +375,7 @@ function getWindow(el) {
|
|
|
371
375
|
var _a;
|
|
372
376
|
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
373
377
|
}
|
|
374
|
-
function
|
|
378
|
+
function getEventTarget2(event) {
|
|
375
379
|
var _a, _b;
|
|
376
380
|
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
377
381
|
}
|
|
@@ -422,7 +426,7 @@ function trackInteractOutside(node, options) {
|
|
|
422
426
|
const doc = getDocument2(node);
|
|
423
427
|
const win = getWindow(node);
|
|
424
428
|
function isEventOutside(event) {
|
|
425
|
-
const target =
|
|
429
|
+
const target = getEventTarget2(event);
|
|
426
430
|
if (!(target instanceof win.HTMLElement)) {
|
|
427
431
|
return false;
|
|
428
432
|
}
|
|
@@ -448,7 +452,7 @@ function trackInteractOutside(node, options) {
|
|
|
448
452
|
detail: {
|
|
449
453
|
originalEvent: event,
|
|
450
454
|
contextmenu: isContextMenuEvent(event),
|
|
451
|
-
focusable: isFocusable2(
|
|
455
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
452
456
|
}
|
|
453
457
|
});
|
|
454
458
|
}
|
|
@@ -476,7 +480,7 @@ function trackInteractOutside(node, options) {
|
|
|
476
480
|
detail: {
|
|
477
481
|
originalEvent: event,
|
|
478
482
|
contextmenu: false,
|
|
479
|
-
focusable: isFocusable2(
|
|
483
|
+
focusable: isFocusable2(getEventTarget2(event))
|
|
480
484
|
}
|
|
481
485
|
});
|
|
482
486
|
}
|
|
@@ -489,53 +493,16 @@ function trackInteractOutside(node, options) {
|
|
|
489
493
|
};
|
|
490
494
|
}
|
|
491
495
|
|
|
492
|
-
// ../../utilities/dismissable/
|
|
493
|
-
var runIfFn4 = (v, ...a) => {
|
|
494
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
495
|
-
return res != null ? res : void 0;
|
|
496
|
-
};
|
|
497
|
-
var hasProp3 = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
498
|
-
function isDocument3(el) {
|
|
499
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
500
|
-
}
|
|
501
|
-
function isWindow3(value) {
|
|
502
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
503
|
-
}
|
|
504
|
-
function getDocument3(el) {
|
|
505
|
-
var _a;
|
|
506
|
-
if (isWindow3(el))
|
|
507
|
-
return el.document;
|
|
508
|
-
if (isDocument3(el))
|
|
509
|
-
return el;
|
|
510
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
511
|
-
}
|
|
512
|
-
function getEventTarget2(event) {
|
|
513
|
-
var _a, _b;
|
|
514
|
-
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
515
|
-
}
|
|
516
|
-
function contains3(parent, child) {
|
|
517
|
-
if (!parent)
|
|
518
|
-
return false;
|
|
519
|
-
return parent === child || isHTMLElement3(parent) && isHTMLElement3(child) && parent.contains(child);
|
|
520
|
-
}
|
|
521
|
-
function isHTMLElement3(v) {
|
|
522
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
523
|
-
}
|
|
524
|
-
var isRef3 = (v) => hasProp3(v, "current");
|
|
525
|
-
function addDomEvent3(target, eventName, handler, options) {
|
|
526
|
-
const node = isRef3(target) ? target.current : runIfFn4(target);
|
|
527
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
528
|
-
return () => {
|
|
529
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
530
|
-
};
|
|
531
|
-
}
|
|
496
|
+
// ../../utilities/dismissable/src/escape-keydown.ts
|
|
532
497
|
function trackEscapeKeydown(fn) {
|
|
533
498
|
const handleKeyDown = (event) => {
|
|
534
499
|
if (event.key === "Escape")
|
|
535
500
|
fn == null ? void 0 : fn(event);
|
|
536
501
|
};
|
|
537
|
-
return
|
|
502
|
+
return addDomEvent(document, "keydown", handleKeyDown);
|
|
538
503
|
}
|
|
504
|
+
|
|
505
|
+
// ../../utilities/dismissable/src/layer-stack.ts
|
|
539
506
|
var layerStack = {
|
|
540
507
|
layers: [],
|
|
541
508
|
branches: [],
|
|
@@ -565,10 +532,10 @@ var layerStack = {
|
|
|
565
532
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
566
533
|
},
|
|
567
534
|
isInNestedLayer(node, target) {
|
|
568
|
-
return this.getNestedLayers(node).some((layer) =>
|
|
535
|
+
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
569
536
|
},
|
|
570
537
|
isInBranch(target) {
|
|
571
|
-
return Array.from(this.branches).some((branch) =>
|
|
538
|
+
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
572
539
|
},
|
|
573
540
|
add(layer) {
|
|
574
541
|
this.layers.push(layer);
|
|
@@ -602,6 +569,8 @@ var layerStack = {
|
|
|
602
569
|
this.remove(this.layers[0].node);
|
|
603
570
|
}
|
|
604
571
|
};
|
|
572
|
+
|
|
573
|
+
// ../../utilities/dismissable/src/pointer-event-outside.ts
|
|
605
574
|
var originalBodyPointerEvents;
|
|
606
575
|
function assignPointerEventToLayers() {
|
|
607
576
|
layerStack.layers.forEach(({ node }) => {
|
|
@@ -613,7 +582,7 @@ function clearPointerEvent(node) {
|
|
|
613
582
|
}
|
|
614
583
|
var DATA_ATTR = "data-inert";
|
|
615
584
|
function disablePointerEventsOutside(node) {
|
|
616
|
-
const doc =
|
|
585
|
+
const doc = getDocument(node);
|
|
617
586
|
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
618
587
|
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
619
588
|
doc.body.style.pointerEvents = "none";
|
|
@@ -628,6 +597,8 @@ function disablePointerEventsOutside(node) {
|
|
|
628
597
|
doc.body.removeAttribute("style");
|
|
629
598
|
};
|
|
630
599
|
}
|
|
600
|
+
|
|
601
|
+
// ../../utilities/dismissable/src/dismissable-layer.ts
|
|
631
602
|
function trackDismissableElement(node, options) {
|
|
632
603
|
if (!node)
|
|
633
604
|
return;
|
|
@@ -637,7 +608,7 @@ function trackDismissableElement(node, options) {
|
|
|
637
608
|
assignPointerEventToLayers();
|
|
638
609
|
function onPointerDownOutside(event) {
|
|
639
610
|
var _a, _b;
|
|
640
|
-
const target =
|
|
611
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
641
612
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
642
613
|
return;
|
|
643
614
|
(_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
|
|
@@ -651,7 +622,7 @@ function trackDismissableElement(node, options) {
|
|
|
651
622
|
}
|
|
652
623
|
function onFocusOutside(event) {
|
|
653
624
|
var _a, _b;
|
|
654
|
-
const target =
|
|
625
|
+
const target = getEventTarget(event.detail.originalEvent);
|
|
655
626
|
if (layerStack.isInBranch(target))
|
|
656
627
|
return;
|
|
657
628
|
(_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
|
|
@@ -678,7 +649,7 @@ function trackDismissableElement(node, options) {
|
|
|
678
649
|
return false;
|
|
679
650
|
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
|
|
680
651
|
const _containers = Array.isArray(containers) ? containers : [containers];
|
|
681
|
-
return _containers.some((node2) =>
|
|
652
|
+
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
682
653
|
}
|
|
683
654
|
const cleanups = [
|
|
684
655
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
package/dist/popover.dom.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import type { MachineContext as Ctx } from "./popover.types";
|
|
2
2
|
export declare const dom: {
|
|
3
3
|
getRootNode: (ctx: {
|
|
4
|
-
getRootNode?: () =>
|
|
4
|
+
getRootNode?: () => Document | Node | ShadowRoot;
|
|
5
5
|
}) => Document | ShadowRoot;
|
|
6
6
|
getDoc: (ctx: {
|
|
7
|
-
getRootNode?: () =>
|
|
7
|
+
getRootNode?: () => Document | Node | ShadowRoot;
|
|
8
8
|
}) => Document;
|
|
9
9
|
getWin: (ctx: {
|
|
10
|
-
getRootNode?: () =>
|
|
10
|
+
getRootNode?: () => Document | Node | ShadowRoot;
|
|
11
11
|
}) => Window & typeof globalThis;
|
|
12
12
|
} & {
|
|
13
13
|
getActiveEl: (ctx: Ctx) => Element;
|
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-20220709094318",
|
|
4
4
|
"description": "Core logic for the popover widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -31,10 +31,10 @@
|
|
|
31
31
|
"dependencies": {
|
|
32
32
|
"@zag-js/aria-hidden": "0.1.0",
|
|
33
33
|
"@zag-js/core": "0.1.7",
|
|
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-
|
|
34
|
+
"@zag-js/dom-utils": "0.0.0-dev-20220709094318",
|
|
35
|
+
"@zag-js/popper": "0.0.0-dev-20220709094318",
|
|
36
|
+
"@zag-js/remove-scroll": "0.0.0-dev-20220709094318",
|
|
37
|
+
"@zag-js/types": "0.0.0-dev-20220709094318",
|
|
38
38
|
"@zag-js/utils": "0.1.2",
|
|
39
39
|
"focus-trap": "6.9.4"
|
|
40
40
|
},
|