@zag-js/dismissable 0.2.2 → 0.2.3
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/{chunk-YJ5WHWO2.mjs → chunk-5BMACJNB.mjs} +6 -15
- package/dist/chunk-BBFIKTYR.mjs +14 -0
- package/dist/{chunk-7XK4Z5QA.mjs → chunk-C5KU67MN.mjs} +2 -2
- package/dist/{chunk-7N3F5DTJ.mjs → chunk-G4GHYT27.mjs} +1 -29
- package/dist/dismissable-layer.js +16 -66
- package/dist/dismissable-layer.mjs +4 -4
- package/dist/escape-keydown.d.ts +1 -1
- package/dist/escape-keydown.js +4 -23
- package/dist/escape-keydown.mjs +1 -1
- package/dist/index.js +16 -64
- package/dist/index.mjs +4 -4
- package/dist/layer-stack.js +3 -14
- package/dist/layer-stack.mjs +1 -1
- package/dist/pointer-event-outside.js +5 -26
- package/dist/pointer-event-outside.mjs +2 -2
- package/package.json +6 -5
- package/dist/chunk-7B65L3R4.mjs +0 -31
|
@@ -1,30 +1,21 @@
|
|
|
1
1
|
import {
|
|
2
2
|
trackEscapeKeydown
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-BBFIKTYR.mjs";
|
|
4
4
|
import {
|
|
5
5
|
assignPointerEventToLayers,
|
|
6
6
|
clearPointerEvent,
|
|
7
7
|
disablePointerEventsOutside
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-C5KU67MN.mjs";
|
|
9
9
|
import {
|
|
10
|
-
contains,
|
|
11
|
-
getEventTarget,
|
|
12
10
|
layerStack
|
|
13
|
-
} from "./chunk-
|
|
14
|
-
|
|
15
|
-
// ../core/src/warning.ts
|
|
16
|
-
function warn(...a) {
|
|
17
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
18
|
-
const c = a.length === 2 ? a[0] : true;
|
|
19
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
20
|
-
console.warn(m);
|
|
21
|
-
}
|
|
22
|
-
}
|
|
11
|
+
} from "./chunk-G4GHYT27.mjs";
|
|
23
12
|
|
|
24
13
|
// src/dismissable-layer.ts
|
|
14
|
+
import { contains, getEventTarget } from "@zag-js/dom-query";
|
|
25
15
|
import {
|
|
26
16
|
trackInteractOutside
|
|
27
17
|
} from "@zag-js/interact-outside";
|
|
18
|
+
import { warn } from "@zag-js/utils";
|
|
28
19
|
function trackDismissableElement(node, options) {
|
|
29
20
|
if (!node) {
|
|
30
21
|
warn("[@zag-js/dismissable] node is `null` or `undefined`");
|
|
@@ -78,7 +69,7 @@ function trackDismissableElement(node, options) {
|
|
|
78
69
|
}
|
|
79
70
|
const cleanups = [
|
|
80
71
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
|
81
|
-
trackEscapeKeydown(onEscapeKeyDown),
|
|
72
|
+
trackEscapeKeydown(node, onEscapeKeyDown),
|
|
82
73
|
trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
|
|
83
74
|
];
|
|
84
75
|
return () => {
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
// src/escape-keydown.ts
|
|
2
|
+
import { addDomEvent } from "@zag-js/dom-event";
|
|
3
|
+
import { getDocument } from "@zag-js/dom-query";
|
|
4
|
+
function trackEscapeKeydown(node, fn) {
|
|
5
|
+
const handleKeyDown = (event) => {
|
|
6
|
+
if (event.key === "Escape")
|
|
7
|
+
fn?.(event);
|
|
8
|
+
};
|
|
9
|
+
return addDomEvent(getDocument(node), "keydown", handleKeyDown);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export {
|
|
13
|
+
trackEscapeKeydown
|
|
14
|
+
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
|
-
getDocument,
|
|
3
2
|
layerStack
|
|
4
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-G4GHYT27.mjs";
|
|
5
4
|
|
|
6
5
|
// src/pointer-event-outside.ts
|
|
6
|
+
import { getDocument } from "@zag-js/dom-query";
|
|
7
7
|
var originalBodyPointerEvents;
|
|
8
8
|
function assignPointerEventToLayers() {
|
|
9
9
|
layerStack.layers.forEach(({ node }) => {
|
|
@@ -1,30 +1,5 @@
|
|
|
1
|
-
// ../dom/src/query.ts
|
|
2
|
-
function isDocument(el) {
|
|
3
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
4
|
-
}
|
|
5
|
-
function isWindow(value) {
|
|
6
|
-
return value?.toString() === "[object Window]";
|
|
7
|
-
}
|
|
8
|
-
function getDocument(el) {
|
|
9
|
-
if (isWindow(el))
|
|
10
|
-
return el.document;
|
|
11
|
-
if (isDocument(el))
|
|
12
|
-
return el;
|
|
13
|
-
return el?.ownerDocument ?? document;
|
|
14
|
-
}
|
|
15
|
-
function getEventTarget(event) {
|
|
16
|
-
return event.composedPath?.()[0] ?? event.target;
|
|
17
|
-
}
|
|
18
|
-
function contains(parent, child) {
|
|
19
|
-
if (!parent)
|
|
20
|
-
return false;
|
|
21
|
-
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
22
|
-
}
|
|
23
|
-
function isHTMLElement(v) {
|
|
24
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
25
|
-
}
|
|
26
|
-
|
|
27
1
|
// src/layer-stack.ts
|
|
2
|
+
import { contains } from "@zag-js/dom-query";
|
|
28
3
|
var layerStack = {
|
|
29
4
|
layers: [],
|
|
30
5
|
branches: [],
|
|
@@ -91,8 +66,5 @@ var layerStack = {
|
|
|
91
66
|
};
|
|
92
67
|
|
|
93
68
|
export {
|
|
94
|
-
getDocument,
|
|
95
|
-
getEventTarget,
|
|
96
|
-
contains,
|
|
97
69
|
layerStack
|
|
98
70
|
};
|
|
@@ -23,74 +23,23 @@ __export(dismissable_layer_exports, {
|
|
|
23
23
|
trackDismissableElement: () => trackDismissableElement
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(dismissable_layer_exports);
|
|
26
|
-
|
|
27
|
-
// ../core/src/functions.ts
|
|
28
|
-
var runIfFn = (v, ...a) => {
|
|
29
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
-
return res ?? void 0;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
// ../core/src/guard.ts
|
|
34
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
35
|
-
|
|
36
|
-
// ../core/src/warning.ts
|
|
37
|
-
function warn(...a) {
|
|
38
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
39
|
-
const c = a.length === 2 ? a[0] : true;
|
|
40
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
41
|
-
console.warn(m);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// ../dom/src/query.ts
|
|
46
|
-
function isDocument(el) {
|
|
47
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
48
|
-
}
|
|
49
|
-
function isWindow(value) {
|
|
50
|
-
return value?.toString() === "[object Window]";
|
|
51
|
-
}
|
|
52
|
-
function getDocument(el) {
|
|
53
|
-
if (isWindow(el))
|
|
54
|
-
return el.document;
|
|
55
|
-
if (isDocument(el))
|
|
56
|
-
return el;
|
|
57
|
-
return el?.ownerDocument ?? document;
|
|
58
|
-
}
|
|
59
|
-
function getEventTarget(event) {
|
|
60
|
-
return event.composedPath?.()[0] ?? event.target;
|
|
61
|
-
}
|
|
62
|
-
function contains(parent, child) {
|
|
63
|
-
if (!parent)
|
|
64
|
-
return false;
|
|
65
|
-
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
66
|
-
}
|
|
67
|
-
function isHTMLElement(v) {
|
|
68
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// ../dom/src/listener.ts
|
|
72
|
-
var isRef = (v) => hasProp(v, "current");
|
|
73
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
74
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
75
|
-
node?.addEventListener(eventName, handler, options);
|
|
76
|
-
return () => {
|
|
77
|
-
node?.removeEventListener(eventName, handler, options);
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
|
-
// src/dismissable-layer.ts
|
|
26
|
+
var import_dom_query4 = require("@zag-js/dom-query");
|
|
82
27
|
var import_interact_outside = require("@zag-js/interact-outside");
|
|
28
|
+
var import_utils = require("@zag-js/utils");
|
|
83
29
|
|
|
84
30
|
// src/escape-keydown.ts
|
|
85
|
-
|
|
31
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
32
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
33
|
+
function trackEscapeKeydown(node, fn) {
|
|
86
34
|
const handleKeyDown = (event) => {
|
|
87
35
|
if (event.key === "Escape")
|
|
88
36
|
fn?.(event);
|
|
89
37
|
};
|
|
90
|
-
return addDomEvent(
|
|
38
|
+
return (0, import_dom_event.addDomEvent)((0, import_dom_query.getDocument)(node), "keydown", handleKeyDown);
|
|
91
39
|
}
|
|
92
40
|
|
|
93
41
|
// src/layer-stack.ts
|
|
42
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
94
43
|
var layerStack = {
|
|
95
44
|
layers: [],
|
|
96
45
|
branches: [],
|
|
@@ -119,10 +68,10 @@ var layerStack = {
|
|
|
119
68
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
120
69
|
},
|
|
121
70
|
isInNestedLayer(node, target) {
|
|
122
|
-
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
71
|
+
return this.getNestedLayers(node).some((layer) => (0, import_dom_query2.contains)(layer.node, target));
|
|
123
72
|
},
|
|
124
73
|
isInBranch(target) {
|
|
125
|
-
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
74
|
+
return Array.from(this.branches).some((branch) => (0, import_dom_query2.contains)(branch, target));
|
|
126
75
|
},
|
|
127
76
|
add(layer) {
|
|
128
77
|
this.layers.push(layer);
|
|
@@ -157,6 +106,7 @@ var layerStack = {
|
|
|
157
106
|
};
|
|
158
107
|
|
|
159
108
|
// src/pointer-event-outside.ts
|
|
109
|
+
var import_dom_query3 = require("@zag-js/dom-query");
|
|
160
110
|
var originalBodyPointerEvents;
|
|
161
111
|
function assignPointerEventToLayers() {
|
|
162
112
|
layerStack.layers.forEach(({ node }) => {
|
|
@@ -168,7 +118,7 @@ function clearPointerEvent(node) {
|
|
|
168
118
|
}
|
|
169
119
|
var DATA_ATTR = "data-inert";
|
|
170
120
|
function disablePointerEventsOutside(node) {
|
|
171
|
-
const doc = getDocument(node);
|
|
121
|
+
const doc = (0, import_dom_query3.getDocument)(node);
|
|
172
122
|
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
173
123
|
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
174
124
|
doc.body.style.pointerEvents = "none";
|
|
@@ -187,7 +137,7 @@ function disablePointerEventsOutside(node) {
|
|
|
187
137
|
// src/dismissable-layer.ts
|
|
188
138
|
function trackDismissableElement(node, options) {
|
|
189
139
|
if (!node) {
|
|
190
|
-
warn("[@zag-js/dismissable] node is `null` or `undefined`");
|
|
140
|
+
(0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");
|
|
191
141
|
return;
|
|
192
142
|
}
|
|
193
143
|
const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
|
|
@@ -195,7 +145,7 @@ function trackDismissableElement(node, options) {
|
|
|
195
145
|
layerStack.add(layer);
|
|
196
146
|
assignPointerEventToLayers();
|
|
197
147
|
function onPointerDownOutside(event) {
|
|
198
|
-
const target = getEventTarget(event.detail.originalEvent);
|
|
148
|
+
const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
|
|
199
149
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
200
150
|
return;
|
|
201
151
|
options.onPointerDownOutside?.(event);
|
|
@@ -208,7 +158,7 @@ function trackDismissableElement(node, options) {
|
|
|
208
158
|
onDismiss?.();
|
|
209
159
|
}
|
|
210
160
|
function onFocusOutside(event) {
|
|
211
|
-
const target = getEventTarget(event.detail.originalEvent);
|
|
161
|
+
const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
|
|
212
162
|
if (layerStack.isInBranch(target))
|
|
213
163
|
return;
|
|
214
164
|
options.onFocusOutside?.(event);
|
|
@@ -234,11 +184,11 @@ function trackDismissableElement(node, options) {
|
|
|
234
184
|
return false;
|
|
235
185
|
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
|
|
236
186
|
const _containers = Array.isArray(containers) ? containers : [containers];
|
|
237
|
-
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
187
|
+
return _containers.some((node2) => (0, import_dom_query4.contains)(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
238
188
|
}
|
|
239
189
|
const cleanups = [
|
|
240
190
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
|
241
|
-
trackEscapeKeydown(onEscapeKeyDown),
|
|
191
|
+
trackEscapeKeydown(node, onEscapeKeyDown),
|
|
242
192
|
(0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside })
|
|
243
193
|
];
|
|
244
194
|
return () => {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
trackDismissableElement
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
3
|
+
} from "./chunk-5BMACJNB.mjs";
|
|
4
|
+
import "./chunk-BBFIKTYR.mjs";
|
|
5
|
+
import "./chunk-C5KU67MN.mjs";
|
|
6
|
+
import "./chunk-G4GHYT27.mjs";
|
|
7
7
|
export {
|
|
8
8
|
trackDismissableElement
|
|
9
9
|
};
|
package/dist/escape-keydown.d.ts
CHANGED
package/dist/escape-keydown.js
CHANGED
|
@@ -23,33 +23,14 @@ __export(escape_keydown_exports, {
|
|
|
23
23
|
trackEscapeKeydown: () => trackEscapeKeydown
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(escape_keydown_exports);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
-
return res ?? void 0;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
// ../core/src/guard.ts
|
|
34
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
35
|
-
|
|
36
|
-
// ../dom/src/listener.ts
|
|
37
|
-
var isRef = (v) => hasProp(v, "current");
|
|
38
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
39
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
40
|
-
node?.addEventListener(eventName, handler, options);
|
|
41
|
-
return () => {
|
|
42
|
-
node?.removeEventListener(eventName, handler, options);
|
|
43
|
-
};
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// src/escape-keydown.ts
|
|
47
|
-
function trackEscapeKeydown(fn) {
|
|
26
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
27
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
28
|
+
function trackEscapeKeydown(node, fn) {
|
|
48
29
|
const handleKeyDown = (event) => {
|
|
49
30
|
if (event.key === "Escape")
|
|
50
31
|
fn?.(event);
|
|
51
32
|
};
|
|
52
|
-
return addDomEvent(
|
|
33
|
+
return (0, import_dom_event.addDomEvent)((0, import_dom_query.getDocument)(node), "keydown", handleKeyDown);
|
|
53
34
|
}
|
|
54
35
|
// Annotate the CommonJS export names for ESM import in node:
|
|
55
36
|
0 && (module.exports = {
|
package/dist/escape-keydown.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -24,73 +24,24 @@ __export(src_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(src_exports);
|
|
26
26
|
|
|
27
|
-
// ../core/src/functions.ts
|
|
28
|
-
var runIfFn = (v, ...a) => {
|
|
29
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
-
return res ?? void 0;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
// ../core/src/guard.ts
|
|
34
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
35
|
-
|
|
36
|
-
// ../core/src/warning.ts
|
|
37
|
-
function warn(...a) {
|
|
38
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
39
|
-
const c = a.length === 2 ? a[0] : true;
|
|
40
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
41
|
-
console.warn(m);
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// ../dom/src/query.ts
|
|
46
|
-
function isDocument(el) {
|
|
47
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
48
|
-
}
|
|
49
|
-
function isWindow(value) {
|
|
50
|
-
return value?.toString() === "[object Window]";
|
|
51
|
-
}
|
|
52
|
-
function getDocument(el) {
|
|
53
|
-
if (isWindow(el))
|
|
54
|
-
return el.document;
|
|
55
|
-
if (isDocument(el))
|
|
56
|
-
return el;
|
|
57
|
-
return el?.ownerDocument ?? document;
|
|
58
|
-
}
|
|
59
|
-
function getEventTarget(event) {
|
|
60
|
-
return event.composedPath?.()[0] ?? event.target;
|
|
61
|
-
}
|
|
62
|
-
function contains(parent, child) {
|
|
63
|
-
if (!parent)
|
|
64
|
-
return false;
|
|
65
|
-
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
66
|
-
}
|
|
67
|
-
function isHTMLElement(v) {
|
|
68
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
// ../dom/src/listener.ts
|
|
72
|
-
var isRef = (v) => hasProp(v, "current");
|
|
73
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
74
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
75
|
-
node?.addEventListener(eventName, handler, options);
|
|
76
|
-
return () => {
|
|
77
|
-
node?.removeEventListener(eventName, handler, options);
|
|
78
|
-
};
|
|
79
|
-
}
|
|
80
|
-
|
|
81
27
|
// src/dismissable-layer.ts
|
|
28
|
+
var import_dom_query4 = require("@zag-js/dom-query");
|
|
82
29
|
var import_interact_outside = require("@zag-js/interact-outside");
|
|
30
|
+
var import_utils = require("@zag-js/utils");
|
|
83
31
|
|
|
84
32
|
// src/escape-keydown.ts
|
|
85
|
-
|
|
33
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
34
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
35
|
+
function trackEscapeKeydown(node, fn) {
|
|
86
36
|
const handleKeyDown = (event) => {
|
|
87
37
|
if (event.key === "Escape")
|
|
88
38
|
fn?.(event);
|
|
89
39
|
};
|
|
90
|
-
return addDomEvent(
|
|
40
|
+
return (0, import_dom_event.addDomEvent)((0, import_dom_query.getDocument)(node), "keydown", handleKeyDown);
|
|
91
41
|
}
|
|
92
42
|
|
|
93
43
|
// src/layer-stack.ts
|
|
44
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
94
45
|
var layerStack = {
|
|
95
46
|
layers: [],
|
|
96
47
|
branches: [],
|
|
@@ -119,10 +70,10 @@ var layerStack = {
|
|
|
119
70
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
120
71
|
},
|
|
121
72
|
isInNestedLayer(node, target) {
|
|
122
|
-
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
73
|
+
return this.getNestedLayers(node).some((layer) => (0, import_dom_query2.contains)(layer.node, target));
|
|
123
74
|
},
|
|
124
75
|
isInBranch(target) {
|
|
125
|
-
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
76
|
+
return Array.from(this.branches).some((branch) => (0, import_dom_query2.contains)(branch, target));
|
|
126
77
|
},
|
|
127
78
|
add(layer) {
|
|
128
79
|
this.layers.push(layer);
|
|
@@ -157,6 +108,7 @@ var layerStack = {
|
|
|
157
108
|
};
|
|
158
109
|
|
|
159
110
|
// src/pointer-event-outside.ts
|
|
111
|
+
var import_dom_query3 = require("@zag-js/dom-query");
|
|
160
112
|
var originalBodyPointerEvents;
|
|
161
113
|
function assignPointerEventToLayers() {
|
|
162
114
|
layerStack.layers.forEach(({ node }) => {
|
|
@@ -168,7 +120,7 @@ function clearPointerEvent(node) {
|
|
|
168
120
|
}
|
|
169
121
|
var DATA_ATTR = "data-inert";
|
|
170
122
|
function disablePointerEventsOutside(node) {
|
|
171
|
-
const doc = getDocument(node);
|
|
123
|
+
const doc = (0, import_dom_query3.getDocument)(node);
|
|
172
124
|
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
173
125
|
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
174
126
|
doc.body.style.pointerEvents = "none";
|
|
@@ -187,7 +139,7 @@ function disablePointerEventsOutside(node) {
|
|
|
187
139
|
// src/dismissable-layer.ts
|
|
188
140
|
function trackDismissableElement(node, options) {
|
|
189
141
|
if (!node) {
|
|
190
|
-
warn("[@zag-js/dismissable] node is `null` or `undefined`");
|
|
142
|
+
(0, import_utils.warn)("[@zag-js/dismissable] node is `null` or `undefined`");
|
|
191
143
|
return;
|
|
192
144
|
}
|
|
193
145
|
const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
|
|
@@ -195,7 +147,7 @@ function trackDismissableElement(node, options) {
|
|
|
195
147
|
layerStack.add(layer);
|
|
196
148
|
assignPointerEventToLayers();
|
|
197
149
|
function onPointerDownOutside(event) {
|
|
198
|
-
const target = getEventTarget(event.detail.originalEvent);
|
|
150
|
+
const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
|
|
199
151
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
200
152
|
return;
|
|
201
153
|
options.onPointerDownOutside?.(event);
|
|
@@ -208,7 +160,7 @@ function trackDismissableElement(node, options) {
|
|
|
208
160
|
onDismiss?.();
|
|
209
161
|
}
|
|
210
162
|
function onFocusOutside(event) {
|
|
211
|
-
const target = getEventTarget(event.detail.originalEvent);
|
|
163
|
+
const target = (0, import_dom_query4.getEventTarget)(event.detail.originalEvent);
|
|
212
164
|
if (layerStack.isInBranch(target))
|
|
213
165
|
return;
|
|
214
166
|
options.onFocusOutside?.(event);
|
|
@@ -234,11 +186,11 @@ function trackDismissableElement(node, options) {
|
|
|
234
186
|
return false;
|
|
235
187
|
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
|
|
236
188
|
const _containers = Array.isArray(containers) ? containers : [containers];
|
|
237
|
-
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
189
|
+
return _containers.some((node2) => (0, import_dom_query4.contains)(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
238
190
|
}
|
|
239
191
|
const cleanups = [
|
|
240
192
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
|
241
|
-
trackEscapeKeydown(onEscapeKeyDown),
|
|
193
|
+
trackEscapeKeydown(node, onEscapeKeyDown),
|
|
242
194
|
(0, import_interact_outside.trackInteractOutside)(node, { exclude, onFocusOutside, onPointerDownOutside })
|
|
243
195
|
];
|
|
244
196
|
return () => {
|
package/dist/index.mjs
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
trackDismissableElement
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
6
|
-
import "./chunk-
|
|
3
|
+
} from "./chunk-5BMACJNB.mjs";
|
|
4
|
+
import "./chunk-BBFIKTYR.mjs";
|
|
5
|
+
import "./chunk-C5KU67MN.mjs";
|
|
6
|
+
import "./chunk-G4GHYT27.mjs";
|
|
7
7
|
export {
|
|
8
8
|
trackDismissableElement
|
|
9
9
|
};
|
package/dist/layer-stack.js
CHANGED
|
@@ -23,18 +23,7 @@ __export(layer_stack_exports, {
|
|
|
23
23
|
layerStack: () => layerStack
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(layer_stack_exports);
|
|
26
|
-
|
|
27
|
-
// ../dom/src/query.ts
|
|
28
|
-
function contains(parent, child) {
|
|
29
|
-
if (!parent)
|
|
30
|
-
return false;
|
|
31
|
-
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
32
|
-
}
|
|
33
|
-
function isHTMLElement(v) {
|
|
34
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
// src/layer-stack.ts
|
|
26
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
38
27
|
var layerStack = {
|
|
39
28
|
layers: [],
|
|
40
29
|
branches: [],
|
|
@@ -63,10 +52,10 @@ var layerStack = {
|
|
|
63
52
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
64
53
|
},
|
|
65
54
|
isInNestedLayer(node, target) {
|
|
66
|
-
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
55
|
+
return this.getNestedLayers(node).some((layer) => (0, import_dom_query.contains)(layer.node, target));
|
|
67
56
|
},
|
|
68
57
|
isInBranch(target) {
|
|
69
|
-
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
58
|
+
return Array.from(this.branches).some((branch) => (0, import_dom_query.contains)(branch, target));
|
|
70
59
|
},
|
|
71
60
|
add(layer) {
|
|
72
61
|
this.layers.push(layer);
|
package/dist/layer-stack.mjs
CHANGED
|
@@ -25,31 +25,10 @@ __export(pointer_event_outside_exports, {
|
|
|
25
25
|
disablePointerEventsOutside: () => disablePointerEventsOutside
|
|
26
26
|
});
|
|
27
27
|
module.exports = __toCommonJS(pointer_event_outside_exports);
|
|
28
|
-
|
|
29
|
-
// ../dom/src/query.ts
|
|
30
|
-
function isDocument(el) {
|
|
31
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
32
|
-
}
|
|
33
|
-
function isWindow(value) {
|
|
34
|
-
return value?.toString() === "[object Window]";
|
|
35
|
-
}
|
|
36
|
-
function getDocument(el) {
|
|
37
|
-
if (isWindow(el))
|
|
38
|
-
return el.document;
|
|
39
|
-
if (isDocument(el))
|
|
40
|
-
return el;
|
|
41
|
-
return el?.ownerDocument ?? document;
|
|
42
|
-
}
|
|
43
|
-
function contains(parent, child) {
|
|
44
|
-
if (!parent)
|
|
45
|
-
return false;
|
|
46
|
-
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
47
|
-
}
|
|
48
|
-
function isHTMLElement(v) {
|
|
49
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
50
|
-
}
|
|
28
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
51
29
|
|
|
52
30
|
// src/layer-stack.ts
|
|
31
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
53
32
|
var layerStack = {
|
|
54
33
|
layers: [],
|
|
55
34
|
branches: [],
|
|
@@ -78,10 +57,10 @@ var layerStack = {
|
|
|
78
57
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
79
58
|
},
|
|
80
59
|
isInNestedLayer(node, target) {
|
|
81
|
-
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
60
|
+
return this.getNestedLayers(node).some((layer) => (0, import_dom_query.contains)(layer.node, target));
|
|
82
61
|
},
|
|
83
62
|
isInBranch(target) {
|
|
84
|
-
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
63
|
+
return Array.from(this.branches).some((branch) => (0, import_dom_query.contains)(branch, target));
|
|
85
64
|
},
|
|
86
65
|
add(layer) {
|
|
87
66
|
this.layers.push(layer);
|
|
@@ -127,7 +106,7 @@ function clearPointerEvent(node) {
|
|
|
127
106
|
}
|
|
128
107
|
var DATA_ATTR = "data-inert";
|
|
129
108
|
function disablePointerEventsOutside(node) {
|
|
130
|
-
const doc = getDocument(node);
|
|
109
|
+
const doc = (0, import_dom_query2.getDocument)(node);
|
|
131
110
|
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
132
111
|
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
133
112
|
doc.body.style.pointerEvents = "none";
|
|
@@ -2,8 +2,8 @@ import {
|
|
|
2
2
|
assignPointerEventToLayers,
|
|
3
3
|
clearPointerEvent,
|
|
4
4
|
disablePointerEventsOutside
|
|
5
|
-
} from "./chunk-
|
|
6
|
-
import "./chunk-
|
|
5
|
+
} from "./chunk-C5KU67MN.mjs";
|
|
6
|
+
import "./chunk-G4GHYT27.mjs";
|
|
7
7
|
export {
|
|
8
8
|
assignPointerEventToLayers,
|
|
9
9
|
clearPointerEvent,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/dismissable",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.3",
|
|
4
4
|
"description": "Dismissable layer utilities for the DOM",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -23,12 +23,13 @@
|
|
|
23
23
|
"access": "public"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@zag-js/interact-outside": "0.2.
|
|
26
|
+
"@zag-js/interact-outside": "0.2.3",
|
|
27
|
+
"@zag-js/dom-event": "0.0.1",
|
|
28
|
+
"@zag-js/utils": "0.3.3",
|
|
29
|
+
"@zag-js/dom-query": "0.1.3"
|
|
27
30
|
},
|
|
28
31
|
"devDependencies": {
|
|
29
|
-
"clean-package": "2.2.0"
|
|
30
|
-
"@zag-js/dom-utils": "0.2.4",
|
|
31
|
-
"@zag-js/utils": "0.3.3"
|
|
32
|
+
"clean-package": "2.2.0"
|
|
32
33
|
},
|
|
33
34
|
"bugs": {
|
|
34
35
|
"url": "https://github.com/chakra-ui/zag/issues"
|
package/dist/chunk-7B65L3R4.mjs
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
// ../core/src/functions.ts
|
|
2
|
-
var runIfFn = (v, ...a) => {
|
|
3
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
4
|
-
return res ?? void 0;
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
// ../core/src/guard.ts
|
|
8
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
9
|
-
|
|
10
|
-
// ../dom/src/listener.ts
|
|
11
|
-
var isRef = (v) => hasProp(v, "current");
|
|
12
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
13
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
14
|
-
node?.addEventListener(eventName, handler, options);
|
|
15
|
-
return () => {
|
|
16
|
-
node?.removeEventListener(eventName, handler, options);
|
|
17
|
-
};
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// src/escape-keydown.ts
|
|
21
|
-
function trackEscapeKeydown(fn) {
|
|
22
|
-
const handleKeyDown = (event) => {
|
|
23
|
-
if (event.key === "Escape")
|
|
24
|
-
fn?.(event);
|
|
25
|
-
};
|
|
26
|
-
return addDomEvent(document, "keydown", handleKeyDown);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
export {
|
|
30
|
-
trackEscapeKeydown
|
|
31
|
-
};
|