@zag-js/dismissable 0.2.1 → 0.2.2
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-3ZVQOINJ.mjs → chunk-7B65L3R4.mjs} +4 -4
- package/dist/{chunk-PFLX3TD5.mjs → chunk-7N3F5DTJ.mjs} +7 -11
- package/dist/{chunk-6YFBZALL.mjs → chunk-7XK4Z5QA.mjs} +1 -1
- package/dist/{chunk-PYR5T5VL.mjs → chunk-YJ5WHWO2.mjs} +11 -14
- package/dist/dismissable-layer.js +19 -26
- package/dist/dismissable-layer.mjs +4 -4
- package/dist/escape-keydown.js +4 -4
- package/dist/escape-keydown.mjs +1 -1
- package/dist/index.js +19 -26
- package/dist/index.mjs +4 -4
- package/dist/layer-stack.js +4 -6
- package/dist/layer-stack.mjs +1 -1
- package/dist/pointer-event-outside.js +6 -9
- package/dist/pointer-event-outside.mjs +2 -2
- package/package.json +4 -4
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// ../core/src/functions.ts
|
|
2
2
|
var runIfFn = (v, ...a) => {
|
|
3
3
|
const res = typeof v === "function" ? v(...a) : v;
|
|
4
|
-
return res
|
|
4
|
+
return res ?? void 0;
|
|
5
5
|
};
|
|
6
6
|
|
|
7
7
|
// ../core/src/guard.ts
|
|
@@ -11,9 +11,9 @@ var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
|
11
11
|
var isRef = (v) => hasProp(v, "current");
|
|
12
12
|
function addDomEvent(target, eventName, handler, options) {
|
|
13
13
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
14
|
-
node
|
|
14
|
+
node?.addEventListener(eventName, handler, options);
|
|
15
15
|
return () => {
|
|
16
|
-
node
|
|
16
|
+
node?.removeEventListener(eventName, handler, options);
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
19
|
|
|
@@ -21,7 +21,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
21
21
|
function trackEscapeKeydown(fn) {
|
|
22
22
|
const handleKeyDown = (event) => {
|
|
23
23
|
if (event.key === "Escape")
|
|
24
|
-
fn
|
|
24
|
+
fn?.(event);
|
|
25
25
|
};
|
|
26
26
|
return addDomEvent(document, "keydown", handleKeyDown);
|
|
27
27
|
}
|
|
@@ -3,19 +3,17 @@ function isDocument(el) {
|
|
|
3
3
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
4
4
|
}
|
|
5
5
|
function isWindow(value) {
|
|
6
|
-
return
|
|
6
|
+
return value?.toString() === "[object Window]";
|
|
7
7
|
}
|
|
8
8
|
function getDocument(el) {
|
|
9
|
-
var _a;
|
|
10
9
|
if (isWindow(el))
|
|
11
10
|
return el.document;
|
|
12
11
|
if (isDocument(el))
|
|
13
12
|
return el;
|
|
14
|
-
return
|
|
13
|
+
return el?.ownerDocument ?? document;
|
|
15
14
|
}
|
|
16
15
|
function getEventTarget(event) {
|
|
17
|
-
|
|
18
|
-
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
16
|
+
return event.composedPath?.()[0] ?? event.target;
|
|
19
17
|
}
|
|
20
18
|
function contains(parent, child) {
|
|
21
19
|
if (!parent)
|
|
@@ -23,7 +21,7 @@ function contains(parent, child) {
|
|
|
23
21
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
24
22
|
}
|
|
25
23
|
function isHTMLElement(v) {
|
|
26
|
-
return typeof v === "object" &&
|
|
24
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
27
25
|
}
|
|
28
26
|
|
|
29
27
|
// src/layer-stack.ts
|
|
@@ -43,14 +41,13 @@ var layerStack = {
|
|
|
43
41
|
return this.pointerBlockingLayers().length > 0;
|
|
44
42
|
},
|
|
45
43
|
isBelowPointerBlockingLayer(node) {
|
|
46
|
-
var _a;
|
|
47
44
|
const index = this.indexOf(node);
|
|
48
|
-
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(
|
|
45
|
+
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
|
|
49
46
|
return index < highestBlockingIndex;
|
|
50
47
|
},
|
|
51
48
|
isTopMost(node) {
|
|
52
49
|
const layer = this.layers[this.count() - 1];
|
|
53
|
-
return
|
|
50
|
+
return layer?.node === node;
|
|
54
51
|
},
|
|
55
52
|
getNestedLayers(node) {
|
|
56
53
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
@@ -86,8 +83,7 @@ var layerStack = {
|
|
|
86
83
|
return this.layers.findIndex((layer) => layer.node === node);
|
|
87
84
|
},
|
|
88
85
|
dismiss(node) {
|
|
89
|
-
|
|
90
|
-
(_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
|
|
86
|
+
this.layers[this.indexOf(node)]?.dismiss();
|
|
91
87
|
},
|
|
92
88
|
clear() {
|
|
93
89
|
this.remove(this.layers[0].node);
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
import {
|
|
2
2
|
trackEscapeKeydown
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-7B65L3R4.mjs";
|
|
4
4
|
import {
|
|
5
5
|
assignPointerEventToLayers,
|
|
6
6
|
clearPointerEvent,
|
|
7
7
|
disablePointerEventsOutside
|
|
8
|
-
} from "./chunk-
|
|
8
|
+
} from "./chunk-7XK4Z5QA.mjs";
|
|
9
9
|
import {
|
|
10
10
|
contains,
|
|
11
11
|
getEventTarget,
|
|
12
12
|
layerStack
|
|
13
|
-
} from "./chunk-
|
|
13
|
+
} from "./chunk-7N3F5DTJ.mjs";
|
|
14
14
|
|
|
15
15
|
// ../core/src/warning.ts
|
|
16
16
|
function warn(...a) {
|
|
@@ -35,38 +35,35 @@ function trackDismissableElement(node, options) {
|
|
|
35
35
|
layerStack.add(layer);
|
|
36
36
|
assignPointerEventToLayers();
|
|
37
37
|
function onPointerDownOutside(event) {
|
|
38
|
-
var _a, _b;
|
|
39
38
|
const target = getEventTarget(event.detail.originalEvent);
|
|
40
39
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
41
40
|
return;
|
|
42
|
-
|
|
43
|
-
|
|
41
|
+
options.onPointerDownOutside?.(event);
|
|
42
|
+
options.onInteractOutside?.(event);
|
|
44
43
|
if (event.defaultPrevented)
|
|
45
44
|
return;
|
|
46
45
|
if (debug) {
|
|
47
46
|
console.log("onPointerDownOutside:", event.detail.originalEvent);
|
|
48
47
|
}
|
|
49
|
-
onDismiss
|
|
48
|
+
onDismiss?.();
|
|
50
49
|
}
|
|
51
50
|
function onFocusOutside(event) {
|
|
52
|
-
var _a, _b;
|
|
53
51
|
const target = getEventTarget(event.detail.originalEvent);
|
|
54
52
|
if (layerStack.isInBranch(target))
|
|
55
53
|
return;
|
|
56
|
-
|
|
57
|
-
|
|
54
|
+
options.onFocusOutside?.(event);
|
|
55
|
+
options.onInteractOutside?.(event);
|
|
58
56
|
if (event.defaultPrevented)
|
|
59
57
|
return;
|
|
60
58
|
if (debug) {
|
|
61
59
|
console.log("onFocusOutside:", event.detail.originalEvent);
|
|
62
60
|
}
|
|
63
|
-
onDismiss
|
|
61
|
+
onDismiss?.();
|
|
64
62
|
}
|
|
65
63
|
function onEscapeKeyDown(event) {
|
|
66
|
-
var _a;
|
|
67
64
|
if (!layerStack.isTopMost(node))
|
|
68
65
|
return;
|
|
69
|
-
|
|
66
|
+
options.onEscapeKeyDown?.(event);
|
|
70
67
|
if (!event.defaultPrevented && onDismiss) {
|
|
71
68
|
event.preventDefault();
|
|
72
69
|
onDismiss();
|
|
@@ -88,7 +85,7 @@ function trackDismissableElement(node, options) {
|
|
|
88
85
|
layerStack.remove(node);
|
|
89
86
|
assignPointerEventToLayers();
|
|
90
87
|
clearPointerEvent(node);
|
|
91
|
-
cleanups.forEach((fn) => fn
|
|
88
|
+
cleanups.forEach((fn) => fn?.());
|
|
92
89
|
};
|
|
93
90
|
}
|
|
94
91
|
|
|
@@ -27,7 +27,7 @@ module.exports = __toCommonJS(dismissable_layer_exports);
|
|
|
27
27
|
// ../core/src/functions.ts
|
|
28
28
|
var runIfFn = (v, ...a) => {
|
|
29
29
|
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
-
return res
|
|
30
|
+
return res ?? void 0;
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
// ../core/src/guard.ts
|
|
@@ -47,19 +47,17 @@ function isDocument(el) {
|
|
|
47
47
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
48
48
|
}
|
|
49
49
|
function isWindow(value) {
|
|
50
|
-
return
|
|
50
|
+
return value?.toString() === "[object Window]";
|
|
51
51
|
}
|
|
52
52
|
function getDocument(el) {
|
|
53
|
-
var _a;
|
|
54
53
|
if (isWindow(el))
|
|
55
54
|
return el.document;
|
|
56
55
|
if (isDocument(el))
|
|
57
56
|
return el;
|
|
58
|
-
return
|
|
57
|
+
return el?.ownerDocument ?? document;
|
|
59
58
|
}
|
|
60
59
|
function getEventTarget(event) {
|
|
61
|
-
|
|
62
|
-
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
60
|
+
return event.composedPath?.()[0] ?? event.target;
|
|
63
61
|
}
|
|
64
62
|
function contains(parent, child) {
|
|
65
63
|
if (!parent)
|
|
@@ -67,16 +65,16 @@ function contains(parent, child) {
|
|
|
67
65
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
68
66
|
}
|
|
69
67
|
function isHTMLElement(v) {
|
|
70
|
-
return typeof v === "object" &&
|
|
68
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
71
69
|
}
|
|
72
70
|
|
|
73
71
|
// ../dom/src/listener.ts
|
|
74
72
|
var isRef = (v) => hasProp(v, "current");
|
|
75
73
|
function addDomEvent(target, eventName, handler, options) {
|
|
76
74
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
77
|
-
node
|
|
75
|
+
node?.addEventListener(eventName, handler, options);
|
|
78
76
|
return () => {
|
|
79
|
-
node
|
|
77
|
+
node?.removeEventListener(eventName, handler, options);
|
|
80
78
|
};
|
|
81
79
|
}
|
|
82
80
|
|
|
@@ -87,7 +85,7 @@ var import_interact_outside = require("@zag-js/interact-outside");
|
|
|
87
85
|
function trackEscapeKeydown(fn) {
|
|
88
86
|
const handleKeyDown = (event) => {
|
|
89
87
|
if (event.key === "Escape")
|
|
90
|
-
fn
|
|
88
|
+
fn?.(event);
|
|
91
89
|
};
|
|
92
90
|
return addDomEvent(document, "keydown", handleKeyDown);
|
|
93
91
|
}
|
|
@@ -109,14 +107,13 @@ var layerStack = {
|
|
|
109
107
|
return this.pointerBlockingLayers().length > 0;
|
|
110
108
|
},
|
|
111
109
|
isBelowPointerBlockingLayer(node) {
|
|
112
|
-
var _a;
|
|
113
110
|
const index = this.indexOf(node);
|
|
114
|
-
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(
|
|
111
|
+
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
|
|
115
112
|
return index < highestBlockingIndex;
|
|
116
113
|
},
|
|
117
114
|
isTopMost(node) {
|
|
118
115
|
const layer = this.layers[this.count() - 1];
|
|
119
|
-
return
|
|
116
|
+
return layer?.node === node;
|
|
120
117
|
},
|
|
121
118
|
getNestedLayers(node) {
|
|
122
119
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
@@ -152,8 +149,7 @@ var layerStack = {
|
|
|
152
149
|
return this.layers.findIndex((layer) => layer.node === node);
|
|
153
150
|
},
|
|
154
151
|
dismiss(node) {
|
|
155
|
-
|
|
156
|
-
(_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
|
|
152
|
+
this.layers[this.indexOf(node)]?.dismiss();
|
|
157
153
|
},
|
|
158
154
|
clear() {
|
|
159
155
|
this.remove(this.layers[0].node);
|
|
@@ -199,38 +195,35 @@ function trackDismissableElement(node, options) {
|
|
|
199
195
|
layerStack.add(layer);
|
|
200
196
|
assignPointerEventToLayers();
|
|
201
197
|
function onPointerDownOutside(event) {
|
|
202
|
-
var _a, _b;
|
|
203
198
|
const target = getEventTarget(event.detail.originalEvent);
|
|
204
199
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
205
200
|
return;
|
|
206
|
-
|
|
207
|
-
|
|
201
|
+
options.onPointerDownOutside?.(event);
|
|
202
|
+
options.onInteractOutside?.(event);
|
|
208
203
|
if (event.defaultPrevented)
|
|
209
204
|
return;
|
|
210
205
|
if (debug) {
|
|
211
206
|
console.log("onPointerDownOutside:", event.detail.originalEvent);
|
|
212
207
|
}
|
|
213
|
-
onDismiss
|
|
208
|
+
onDismiss?.();
|
|
214
209
|
}
|
|
215
210
|
function onFocusOutside(event) {
|
|
216
|
-
var _a, _b;
|
|
217
211
|
const target = getEventTarget(event.detail.originalEvent);
|
|
218
212
|
if (layerStack.isInBranch(target))
|
|
219
213
|
return;
|
|
220
|
-
|
|
221
|
-
|
|
214
|
+
options.onFocusOutside?.(event);
|
|
215
|
+
options.onInteractOutside?.(event);
|
|
222
216
|
if (event.defaultPrevented)
|
|
223
217
|
return;
|
|
224
218
|
if (debug) {
|
|
225
219
|
console.log("onFocusOutside:", event.detail.originalEvent);
|
|
226
220
|
}
|
|
227
|
-
onDismiss
|
|
221
|
+
onDismiss?.();
|
|
228
222
|
}
|
|
229
223
|
function onEscapeKeyDown(event) {
|
|
230
|
-
var _a;
|
|
231
224
|
if (!layerStack.isTopMost(node))
|
|
232
225
|
return;
|
|
233
|
-
|
|
226
|
+
options.onEscapeKeyDown?.(event);
|
|
234
227
|
if (!event.defaultPrevented && onDismiss) {
|
|
235
228
|
event.preventDefault();
|
|
236
229
|
onDismiss();
|
|
@@ -252,7 +245,7 @@ function trackDismissableElement(node, options) {
|
|
|
252
245
|
layerStack.remove(node);
|
|
253
246
|
assignPointerEventToLayers();
|
|
254
247
|
clearPointerEvent(node);
|
|
255
|
-
cleanups.forEach((fn) => fn
|
|
248
|
+
cleanups.forEach((fn) => fn?.());
|
|
256
249
|
};
|
|
257
250
|
}
|
|
258
251
|
// Annotate the CommonJS export names for ESM import in node:
|
|
@@ -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-YJ5WHWO2.mjs";
|
|
4
|
+
import "./chunk-7B65L3R4.mjs";
|
|
5
|
+
import "./chunk-7XK4Z5QA.mjs";
|
|
6
|
+
import "./chunk-7N3F5DTJ.mjs";
|
|
7
7
|
export {
|
|
8
8
|
trackDismissableElement
|
|
9
9
|
};
|
package/dist/escape-keydown.js
CHANGED
|
@@ -27,7 +27,7 @@ module.exports = __toCommonJS(escape_keydown_exports);
|
|
|
27
27
|
// ../core/src/functions.ts
|
|
28
28
|
var runIfFn = (v, ...a) => {
|
|
29
29
|
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
-
return res
|
|
30
|
+
return res ?? void 0;
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
// ../core/src/guard.ts
|
|
@@ -37,9 +37,9 @@ var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
|
37
37
|
var isRef = (v) => hasProp(v, "current");
|
|
38
38
|
function addDomEvent(target, eventName, handler, options) {
|
|
39
39
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
40
|
-
node
|
|
40
|
+
node?.addEventListener(eventName, handler, options);
|
|
41
41
|
return () => {
|
|
42
|
-
node
|
|
42
|
+
node?.removeEventListener(eventName, handler, options);
|
|
43
43
|
};
|
|
44
44
|
}
|
|
45
45
|
|
|
@@ -47,7 +47,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
47
47
|
function trackEscapeKeydown(fn) {
|
|
48
48
|
const handleKeyDown = (event) => {
|
|
49
49
|
if (event.key === "Escape")
|
|
50
|
-
fn
|
|
50
|
+
fn?.(event);
|
|
51
51
|
};
|
|
52
52
|
return addDomEvent(document, "keydown", handleKeyDown);
|
|
53
53
|
}
|
package/dist/escape-keydown.mjs
CHANGED
package/dist/index.js
CHANGED
|
@@ -27,7 +27,7 @@ module.exports = __toCommonJS(src_exports);
|
|
|
27
27
|
// ../core/src/functions.ts
|
|
28
28
|
var runIfFn = (v, ...a) => {
|
|
29
29
|
const res = typeof v === "function" ? v(...a) : v;
|
|
30
|
-
return res
|
|
30
|
+
return res ?? void 0;
|
|
31
31
|
};
|
|
32
32
|
|
|
33
33
|
// ../core/src/guard.ts
|
|
@@ -47,19 +47,17 @@ function isDocument(el) {
|
|
|
47
47
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
48
48
|
}
|
|
49
49
|
function isWindow(value) {
|
|
50
|
-
return
|
|
50
|
+
return value?.toString() === "[object Window]";
|
|
51
51
|
}
|
|
52
52
|
function getDocument(el) {
|
|
53
|
-
var _a;
|
|
54
53
|
if (isWindow(el))
|
|
55
54
|
return el.document;
|
|
56
55
|
if (isDocument(el))
|
|
57
56
|
return el;
|
|
58
|
-
return
|
|
57
|
+
return el?.ownerDocument ?? document;
|
|
59
58
|
}
|
|
60
59
|
function getEventTarget(event) {
|
|
61
|
-
|
|
62
|
-
return (_b = (_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) != null ? _b : event.target;
|
|
60
|
+
return event.composedPath?.()[0] ?? event.target;
|
|
63
61
|
}
|
|
64
62
|
function contains(parent, child) {
|
|
65
63
|
if (!parent)
|
|
@@ -67,16 +65,16 @@ function contains(parent, child) {
|
|
|
67
65
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
68
66
|
}
|
|
69
67
|
function isHTMLElement(v) {
|
|
70
|
-
return typeof v === "object" &&
|
|
68
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
71
69
|
}
|
|
72
70
|
|
|
73
71
|
// ../dom/src/listener.ts
|
|
74
72
|
var isRef = (v) => hasProp(v, "current");
|
|
75
73
|
function addDomEvent(target, eventName, handler, options) {
|
|
76
74
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
77
|
-
node
|
|
75
|
+
node?.addEventListener(eventName, handler, options);
|
|
78
76
|
return () => {
|
|
79
|
-
node
|
|
77
|
+
node?.removeEventListener(eventName, handler, options);
|
|
80
78
|
};
|
|
81
79
|
}
|
|
82
80
|
|
|
@@ -87,7 +85,7 @@ var import_interact_outside = require("@zag-js/interact-outside");
|
|
|
87
85
|
function trackEscapeKeydown(fn) {
|
|
88
86
|
const handleKeyDown = (event) => {
|
|
89
87
|
if (event.key === "Escape")
|
|
90
|
-
fn
|
|
88
|
+
fn?.(event);
|
|
91
89
|
};
|
|
92
90
|
return addDomEvent(document, "keydown", handleKeyDown);
|
|
93
91
|
}
|
|
@@ -109,14 +107,13 @@ var layerStack = {
|
|
|
109
107
|
return this.pointerBlockingLayers().length > 0;
|
|
110
108
|
},
|
|
111
109
|
isBelowPointerBlockingLayer(node) {
|
|
112
|
-
var _a;
|
|
113
110
|
const index = this.indexOf(node);
|
|
114
|
-
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(
|
|
111
|
+
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
|
|
115
112
|
return index < highestBlockingIndex;
|
|
116
113
|
},
|
|
117
114
|
isTopMost(node) {
|
|
118
115
|
const layer = this.layers[this.count() - 1];
|
|
119
|
-
return
|
|
116
|
+
return layer?.node === node;
|
|
120
117
|
},
|
|
121
118
|
getNestedLayers(node) {
|
|
122
119
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
@@ -152,8 +149,7 @@ var layerStack = {
|
|
|
152
149
|
return this.layers.findIndex((layer) => layer.node === node);
|
|
153
150
|
},
|
|
154
151
|
dismiss(node) {
|
|
155
|
-
|
|
156
|
-
(_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
|
|
152
|
+
this.layers[this.indexOf(node)]?.dismiss();
|
|
157
153
|
},
|
|
158
154
|
clear() {
|
|
159
155
|
this.remove(this.layers[0].node);
|
|
@@ -199,38 +195,35 @@ function trackDismissableElement(node, options) {
|
|
|
199
195
|
layerStack.add(layer);
|
|
200
196
|
assignPointerEventToLayers();
|
|
201
197
|
function onPointerDownOutside(event) {
|
|
202
|
-
var _a, _b;
|
|
203
198
|
const target = getEventTarget(event.detail.originalEvent);
|
|
204
199
|
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
205
200
|
return;
|
|
206
|
-
|
|
207
|
-
|
|
201
|
+
options.onPointerDownOutside?.(event);
|
|
202
|
+
options.onInteractOutside?.(event);
|
|
208
203
|
if (event.defaultPrevented)
|
|
209
204
|
return;
|
|
210
205
|
if (debug) {
|
|
211
206
|
console.log("onPointerDownOutside:", event.detail.originalEvent);
|
|
212
207
|
}
|
|
213
|
-
onDismiss
|
|
208
|
+
onDismiss?.();
|
|
214
209
|
}
|
|
215
210
|
function onFocusOutside(event) {
|
|
216
|
-
var _a, _b;
|
|
217
211
|
const target = getEventTarget(event.detail.originalEvent);
|
|
218
212
|
if (layerStack.isInBranch(target))
|
|
219
213
|
return;
|
|
220
|
-
|
|
221
|
-
|
|
214
|
+
options.onFocusOutside?.(event);
|
|
215
|
+
options.onInteractOutside?.(event);
|
|
222
216
|
if (event.defaultPrevented)
|
|
223
217
|
return;
|
|
224
218
|
if (debug) {
|
|
225
219
|
console.log("onFocusOutside:", event.detail.originalEvent);
|
|
226
220
|
}
|
|
227
|
-
onDismiss
|
|
221
|
+
onDismiss?.();
|
|
228
222
|
}
|
|
229
223
|
function onEscapeKeyDown(event) {
|
|
230
|
-
var _a;
|
|
231
224
|
if (!layerStack.isTopMost(node))
|
|
232
225
|
return;
|
|
233
|
-
|
|
226
|
+
options.onEscapeKeyDown?.(event);
|
|
234
227
|
if (!event.defaultPrevented && onDismiss) {
|
|
235
228
|
event.preventDefault();
|
|
236
229
|
onDismiss();
|
|
@@ -252,7 +245,7 @@ function trackDismissableElement(node, options) {
|
|
|
252
245
|
layerStack.remove(node);
|
|
253
246
|
assignPointerEventToLayers();
|
|
254
247
|
clearPointerEvent(node);
|
|
255
|
-
cleanups.forEach((fn) => fn
|
|
248
|
+
cleanups.forEach((fn) => fn?.());
|
|
256
249
|
};
|
|
257
250
|
}
|
|
258
251
|
// Annotate the CommonJS export names for ESM import in node:
|
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-YJ5WHWO2.mjs";
|
|
4
|
+
import "./chunk-7B65L3R4.mjs";
|
|
5
|
+
import "./chunk-7XK4Z5QA.mjs";
|
|
6
|
+
import "./chunk-7N3F5DTJ.mjs";
|
|
7
7
|
export {
|
|
8
8
|
trackDismissableElement
|
|
9
9
|
};
|
package/dist/layer-stack.js
CHANGED
|
@@ -31,7 +31,7 @@ function contains(parent, child) {
|
|
|
31
31
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
32
32
|
}
|
|
33
33
|
function isHTMLElement(v) {
|
|
34
|
-
return typeof v === "object" &&
|
|
34
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
// src/layer-stack.ts
|
|
@@ -51,14 +51,13 @@ var layerStack = {
|
|
|
51
51
|
return this.pointerBlockingLayers().length > 0;
|
|
52
52
|
},
|
|
53
53
|
isBelowPointerBlockingLayer(node) {
|
|
54
|
-
var _a;
|
|
55
54
|
const index = this.indexOf(node);
|
|
56
|
-
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(
|
|
55
|
+
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
|
|
57
56
|
return index < highestBlockingIndex;
|
|
58
57
|
},
|
|
59
58
|
isTopMost(node) {
|
|
60
59
|
const layer = this.layers[this.count() - 1];
|
|
61
|
-
return
|
|
60
|
+
return layer?.node === node;
|
|
62
61
|
},
|
|
63
62
|
getNestedLayers(node) {
|
|
64
63
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
@@ -94,8 +93,7 @@ var layerStack = {
|
|
|
94
93
|
return this.layers.findIndex((layer) => layer.node === node);
|
|
95
94
|
},
|
|
96
95
|
dismiss(node) {
|
|
97
|
-
|
|
98
|
-
(_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
|
|
96
|
+
this.layers[this.indexOf(node)]?.dismiss();
|
|
99
97
|
},
|
|
100
98
|
clear() {
|
|
101
99
|
this.remove(this.layers[0].node);
|
package/dist/layer-stack.mjs
CHANGED
|
@@ -31,15 +31,14 @@ function isDocument(el) {
|
|
|
31
31
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
32
32
|
}
|
|
33
33
|
function isWindow(value) {
|
|
34
|
-
return
|
|
34
|
+
return value?.toString() === "[object Window]";
|
|
35
35
|
}
|
|
36
36
|
function getDocument(el) {
|
|
37
|
-
var _a;
|
|
38
37
|
if (isWindow(el))
|
|
39
38
|
return el.document;
|
|
40
39
|
if (isDocument(el))
|
|
41
40
|
return el;
|
|
42
|
-
return
|
|
41
|
+
return el?.ownerDocument ?? document;
|
|
43
42
|
}
|
|
44
43
|
function contains(parent, child) {
|
|
45
44
|
if (!parent)
|
|
@@ -47,7 +46,7 @@ function contains(parent, child) {
|
|
|
47
46
|
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
48
47
|
}
|
|
49
48
|
function isHTMLElement(v) {
|
|
50
|
-
return typeof v === "object" &&
|
|
49
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
51
50
|
}
|
|
52
51
|
|
|
53
52
|
// src/layer-stack.ts
|
|
@@ -67,14 +66,13 @@ var layerStack = {
|
|
|
67
66
|
return this.pointerBlockingLayers().length > 0;
|
|
68
67
|
},
|
|
69
68
|
isBelowPointerBlockingLayer(node) {
|
|
70
|
-
var _a;
|
|
71
69
|
const index = this.indexOf(node);
|
|
72
|
-
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(
|
|
70
|
+
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf(this.topMostPointerBlockingLayer()?.node) : -1;
|
|
73
71
|
return index < highestBlockingIndex;
|
|
74
72
|
},
|
|
75
73
|
isTopMost(node) {
|
|
76
74
|
const layer = this.layers[this.count() - 1];
|
|
77
|
-
return
|
|
75
|
+
return layer?.node === node;
|
|
78
76
|
},
|
|
79
77
|
getNestedLayers(node) {
|
|
80
78
|
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
@@ -110,8 +108,7 @@ var layerStack = {
|
|
|
110
108
|
return this.layers.findIndex((layer) => layer.node === node);
|
|
111
109
|
},
|
|
112
110
|
dismiss(node) {
|
|
113
|
-
|
|
114
|
-
(_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
|
|
111
|
+
this.layers[this.indexOf(node)]?.dismiss();
|
|
115
112
|
},
|
|
116
113
|
clear() {
|
|
117
114
|
this.remove(this.layers[0].node);
|
|
@@ -2,8 +2,8 @@ import {
|
|
|
2
2
|
assignPointerEventToLayers,
|
|
3
3
|
clearPointerEvent,
|
|
4
4
|
disablePointerEventsOutside
|
|
5
|
-
} from "./chunk-
|
|
6
|
-
import "./chunk-
|
|
5
|
+
} from "./chunk-7XK4Z5QA.mjs";
|
|
6
|
+
import "./chunk-7N3F5DTJ.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.2",
|
|
4
4
|
"description": "Dismissable layer utilities for the DOM",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -23,12 +23,12 @@
|
|
|
23
23
|
"access": "public"
|
|
24
24
|
},
|
|
25
25
|
"dependencies": {
|
|
26
|
-
"@zag-js/interact-outside": "0.2.
|
|
26
|
+
"@zag-js/interact-outside": "0.2.2"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"clean-package": "2.2.0",
|
|
30
|
-
"@zag-js/dom-utils": "0.2.
|
|
31
|
-
"@zag-js/utils": "0.3.
|
|
30
|
+
"@zag-js/dom-utils": "0.2.4",
|
|
31
|
+
"@zag-js/utils": "0.3.3"
|
|
32
32
|
},
|
|
33
33
|
"bugs": {
|
|
34
34
|
"url": "https://github.com/chakra-ui/zag/issues"
|