@zag-js/dismissable 0.1.3 → 0.1.5
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 +8 -33
- package/package.json +7 -7
- package/dist/index.mjs +0 -229
package/dist/index.js
CHANGED
|
@@ -1,30 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
-
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __export = (target, all) => {
|
|
7
|
-
for (var name in all)
|
|
8
|
-
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
trackDismissableElement: () => trackDismissableElement
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(src_exports);
|
|
26
|
-
|
|
27
|
-
// ../dom/dist/index.mjs
|
|
1
|
+
// ../dom/dist/index.js
|
|
28
2
|
var runIfFn = (v, ...a) => {
|
|
29
3
|
const res = typeof v === "function" ? v(...a) : v;
|
|
30
4
|
return res ?? void 0;
|
|
@@ -65,9 +39,11 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
65
39
|
}
|
|
66
40
|
|
|
67
41
|
// src/dismissable-layer.ts
|
|
68
|
-
|
|
42
|
+
import {
|
|
43
|
+
trackInteractOutside
|
|
44
|
+
} from "@zag-js/interact-outside";
|
|
69
45
|
|
|
70
|
-
// ../core/dist/index.
|
|
46
|
+
// ../core/dist/index.js
|
|
71
47
|
function warn(...a) {
|
|
72
48
|
const m = a.length === 1 ? a[0] : a[1];
|
|
73
49
|
const c = a.length === 2 ? a[0] : true;
|
|
@@ -239,7 +215,7 @@ function trackDismissableElement(node, options) {
|
|
|
239
215
|
const cleanups = [
|
|
240
216
|
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
|
241
217
|
trackEscapeKeydown(onEscapeKeyDown),
|
|
242
|
-
|
|
218
|
+
trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
|
|
243
219
|
];
|
|
244
220
|
return () => {
|
|
245
221
|
layerStack.remove(node);
|
|
@@ -248,7 +224,6 @@ function trackDismissableElement(node, options) {
|
|
|
248
224
|
cleanups.forEach((fn) => fn == null ? void 0 : fn());
|
|
249
225
|
};
|
|
250
226
|
}
|
|
251
|
-
|
|
252
|
-
0 && (module.exports = {
|
|
227
|
+
export {
|
|
253
228
|
trackDismissableElement
|
|
254
|
-
}
|
|
229
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
|
+
"type": "module",
|
|
2
3
|
"name": "@zag-js/dismissable",
|
|
3
|
-
"version": "0.1.
|
|
4
|
+
"version": "0.1.5",
|
|
4
5
|
"description": "Dismissable layer utilities for the DOM",
|
|
5
6
|
"keywords": [
|
|
6
7
|
"js",
|
|
@@ -15,7 +16,6 @@
|
|
|
15
16
|
"homepage": "https://github.com/chakra-ui/zag#readme",
|
|
16
17
|
"license": "MIT",
|
|
17
18
|
"main": "dist/index.js",
|
|
18
|
-
"module": "dist/index.mjs",
|
|
19
19
|
"types": "dist/index.d.ts",
|
|
20
20
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/interact-outside",
|
|
21
21
|
"sideEffects": false,
|
|
@@ -26,19 +26,19 @@
|
|
|
26
26
|
"access": "public"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@zag-js/interact-outside": "0.1.
|
|
29
|
+
"@zag-js/interact-outside": "0.1.5"
|
|
30
30
|
},
|
|
31
31
|
"devDependencies": {
|
|
32
|
-
"@zag-js/dom-utils": "0.1.
|
|
33
|
-
"@zag-js/utils": "0.1.
|
|
32
|
+
"@zag-js/dom-utils": "0.1.12",
|
|
33
|
+
"@zag-js/utils": "0.1.5"
|
|
34
34
|
},
|
|
35
35
|
"bugs": {
|
|
36
36
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
37
37
|
},
|
|
38
38
|
"scripts": {
|
|
39
|
-
"build-fast": "tsup src/index.ts --format=esm
|
|
39
|
+
"build-fast": "tsup src/index.ts --format=esm",
|
|
40
40
|
"start": "pnpm build --watch",
|
|
41
|
-
"build": "tsup src/index.ts --format=esm
|
|
41
|
+
"build": "tsup src/index.ts --format=esm --dts",
|
|
42
42
|
"test": "jest --config ../../../jest.config.js --rootDir tests",
|
|
43
43
|
"lint": "eslint src --ext .ts,.tsx",
|
|
44
44
|
"test-ci": "pnpm test --ci --runInBand -u",
|
package/dist/index.mjs
DELETED
|
@@ -1,229 +0,0 @@
|
|
|
1
|
-
// ../dom/dist/index.mjs
|
|
2
|
-
var runIfFn = (v, ...a) => {
|
|
3
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
4
|
-
return res ?? void 0;
|
|
5
|
-
};
|
|
6
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
7
|
-
function isDocument(el) {
|
|
8
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
9
|
-
}
|
|
10
|
-
function isWindow(value) {
|
|
11
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
12
|
-
}
|
|
13
|
-
function getDocument(el) {
|
|
14
|
-
if (isWindow(el))
|
|
15
|
-
return el.document;
|
|
16
|
-
if (isDocument(el))
|
|
17
|
-
return el;
|
|
18
|
-
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
19
|
-
}
|
|
20
|
-
function getEventTarget(event) {
|
|
21
|
-
var _a;
|
|
22
|
-
return ((_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) ?? event.target;
|
|
23
|
-
}
|
|
24
|
-
function contains(parent, child) {
|
|
25
|
-
if (!parent)
|
|
26
|
-
return false;
|
|
27
|
-
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
28
|
-
}
|
|
29
|
-
function isHTMLElement(v) {
|
|
30
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
31
|
-
}
|
|
32
|
-
var isRef = (v) => hasProp(v, "current");
|
|
33
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
34
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
35
|
-
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
36
|
-
return () => {
|
|
37
|
-
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
38
|
-
};
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
// src/dismissable-layer.ts
|
|
42
|
-
import {
|
|
43
|
-
trackInteractOutside
|
|
44
|
-
} from "@zag-js/interact-outside";
|
|
45
|
-
|
|
46
|
-
// ../core/dist/index.mjs
|
|
47
|
-
function warn(...a) {
|
|
48
|
-
const m = a.length === 1 ? a[0] : a[1];
|
|
49
|
-
const c = a.length === 2 ? a[0] : true;
|
|
50
|
-
if (c && process.env.NODE_ENV !== "production") {
|
|
51
|
-
console.warn(m);
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
// src/escape-keydown.ts
|
|
56
|
-
function trackEscapeKeydown(fn) {
|
|
57
|
-
const handleKeyDown = (event) => {
|
|
58
|
-
if (event.key === "Escape")
|
|
59
|
-
fn == null ? void 0 : fn(event);
|
|
60
|
-
};
|
|
61
|
-
return addDomEvent(document, "keydown", handleKeyDown);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
// src/layer-stack.ts
|
|
65
|
-
var layerStack = {
|
|
66
|
-
layers: [],
|
|
67
|
-
branches: [],
|
|
68
|
-
count() {
|
|
69
|
-
return this.layers.length;
|
|
70
|
-
},
|
|
71
|
-
pointerBlockingLayers() {
|
|
72
|
-
return this.layers.filter((layer) => layer.pointerBlocking);
|
|
73
|
-
},
|
|
74
|
-
topMostPointerBlockingLayer() {
|
|
75
|
-
return [...this.pointerBlockingLayers()].slice(-1)[0];
|
|
76
|
-
},
|
|
77
|
-
hasPointerBlockingLayer() {
|
|
78
|
-
return this.pointerBlockingLayers().length > 0;
|
|
79
|
-
},
|
|
80
|
-
isBelowPointerBlockingLayer(node) {
|
|
81
|
-
var _a;
|
|
82
|
-
const index = this.indexOf(node);
|
|
83
|
-
const highestBlockingIndex = this.topMostPointerBlockingLayer() ? this.indexOf((_a = this.topMostPointerBlockingLayer()) == null ? void 0 : _a.node) : -1;
|
|
84
|
-
return index < highestBlockingIndex;
|
|
85
|
-
},
|
|
86
|
-
isTopMost(node) {
|
|
87
|
-
const layer = this.layers[this.count() - 1];
|
|
88
|
-
return (layer == null ? void 0 : layer.node) === node;
|
|
89
|
-
},
|
|
90
|
-
getNestedLayers(node) {
|
|
91
|
-
return Array.from(this.layers).slice(this.indexOf(node) + 1);
|
|
92
|
-
},
|
|
93
|
-
isInNestedLayer(node, target) {
|
|
94
|
-
return this.getNestedLayers(node).some((layer) => contains(layer.node, target));
|
|
95
|
-
},
|
|
96
|
-
isInBranch(target) {
|
|
97
|
-
return Array.from(this.branches).some((branch) => contains(branch, target));
|
|
98
|
-
},
|
|
99
|
-
add(layer) {
|
|
100
|
-
this.layers.push(layer);
|
|
101
|
-
},
|
|
102
|
-
addBranch(node) {
|
|
103
|
-
this.branches.push(node);
|
|
104
|
-
},
|
|
105
|
-
remove(node) {
|
|
106
|
-
const index = this.indexOf(node);
|
|
107
|
-
if (index < 0)
|
|
108
|
-
return;
|
|
109
|
-
if (index < this.count() - 1) {
|
|
110
|
-
const _layers = this.getNestedLayers(node);
|
|
111
|
-
_layers.forEach((layer) => layer.dismiss());
|
|
112
|
-
}
|
|
113
|
-
this.layers.splice(index, 1);
|
|
114
|
-
},
|
|
115
|
-
removeBranch(node) {
|
|
116
|
-
const index = this.branches.indexOf(node);
|
|
117
|
-
if (index >= 0)
|
|
118
|
-
this.branches.splice(index, 1);
|
|
119
|
-
},
|
|
120
|
-
indexOf(node) {
|
|
121
|
-
return this.layers.findIndex((layer) => layer.node === node);
|
|
122
|
-
},
|
|
123
|
-
dismiss(node) {
|
|
124
|
-
var _a;
|
|
125
|
-
(_a = this.layers[this.indexOf(node)]) == null ? void 0 : _a.dismiss();
|
|
126
|
-
},
|
|
127
|
-
clear() {
|
|
128
|
-
this.remove(this.layers[0].node);
|
|
129
|
-
}
|
|
130
|
-
};
|
|
131
|
-
|
|
132
|
-
// src/pointer-event-outside.ts
|
|
133
|
-
var originalBodyPointerEvents;
|
|
134
|
-
function assignPointerEventToLayers() {
|
|
135
|
-
layerStack.layers.forEach(({ node }) => {
|
|
136
|
-
node.style.pointerEvents = layerStack.isBelowPointerBlockingLayer(node) ? "none" : "auto";
|
|
137
|
-
});
|
|
138
|
-
}
|
|
139
|
-
function clearPointerEvent(node) {
|
|
140
|
-
node.style.pointerEvents = "";
|
|
141
|
-
}
|
|
142
|
-
var DATA_ATTR = "data-inert";
|
|
143
|
-
function disablePointerEventsOutside(node) {
|
|
144
|
-
const doc = getDocument(node);
|
|
145
|
-
if (layerStack.hasPointerBlockingLayer() && !doc.body.hasAttribute(DATA_ATTR)) {
|
|
146
|
-
originalBodyPointerEvents = document.body.style.pointerEvents;
|
|
147
|
-
doc.body.style.pointerEvents = "none";
|
|
148
|
-
doc.body.setAttribute(DATA_ATTR, "");
|
|
149
|
-
}
|
|
150
|
-
return () => {
|
|
151
|
-
if (layerStack.hasPointerBlockingLayer())
|
|
152
|
-
return;
|
|
153
|
-
doc.body.style.pointerEvents = originalBodyPointerEvents;
|
|
154
|
-
doc.body.removeAttribute(DATA_ATTR);
|
|
155
|
-
if (doc.body.style.length === 0)
|
|
156
|
-
doc.body.removeAttribute("style");
|
|
157
|
-
};
|
|
158
|
-
}
|
|
159
|
-
|
|
160
|
-
// src/dismissable-layer.ts
|
|
161
|
-
function trackDismissableElement(node, options) {
|
|
162
|
-
if (!node) {
|
|
163
|
-
warn("[@zag-js/dismissable] node is `null` or `undefined`");
|
|
164
|
-
return;
|
|
165
|
-
}
|
|
166
|
-
const { onDismiss, pointerBlocking, exclude: excludeContainers, debug } = options;
|
|
167
|
-
const layer = { dismiss: onDismiss, node, pointerBlocking };
|
|
168
|
-
layerStack.add(layer);
|
|
169
|
-
assignPointerEventToLayers();
|
|
170
|
-
function onPointerDownOutside(event) {
|
|
171
|
-
var _a, _b;
|
|
172
|
-
const target = getEventTarget(event.detail.originalEvent);
|
|
173
|
-
if (layerStack.isBelowPointerBlockingLayer(node) || layerStack.isInBranch(target))
|
|
174
|
-
return;
|
|
175
|
-
(_a = options.onPointerDownOutside) == null ? void 0 : _a.call(options, event);
|
|
176
|
-
(_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
|
|
177
|
-
if (event.defaultPrevented)
|
|
178
|
-
return;
|
|
179
|
-
if (debug) {
|
|
180
|
-
console.log("onPointerDownOutside:", event.detail.originalEvent);
|
|
181
|
-
}
|
|
182
|
-
onDismiss == null ? void 0 : onDismiss();
|
|
183
|
-
}
|
|
184
|
-
function onFocusOutside(event) {
|
|
185
|
-
var _a, _b;
|
|
186
|
-
const target = getEventTarget(event.detail.originalEvent);
|
|
187
|
-
if (layerStack.isInBranch(target))
|
|
188
|
-
return;
|
|
189
|
-
(_a = options.onFocusOutside) == null ? void 0 : _a.call(options, event);
|
|
190
|
-
(_b = options.onInteractOutside) == null ? void 0 : _b.call(options, event);
|
|
191
|
-
if (event.defaultPrevented)
|
|
192
|
-
return;
|
|
193
|
-
if (debug) {
|
|
194
|
-
console.log("onFocusOutside:", event.detail.originalEvent);
|
|
195
|
-
}
|
|
196
|
-
onDismiss == null ? void 0 : onDismiss();
|
|
197
|
-
}
|
|
198
|
-
function onEscapeKeyDown(event) {
|
|
199
|
-
var _a;
|
|
200
|
-
if (!layerStack.isTopMost(node))
|
|
201
|
-
return;
|
|
202
|
-
(_a = options.onEscapeKeyDown) == null ? void 0 : _a.call(options, event);
|
|
203
|
-
if (!event.defaultPrevented && onDismiss) {
|
|
204
|
-
event.preventDefault();
|
|
205
|
-
onDismiss();
|
|
206
|
-
}
|
|
207
|
-
}
|
|
208
|
-
function exclude(target) {
|
|
209
|
-
if (!node)
|
|
210
|
-
return false;
|
|
211
|
-
const containers = typeof excludeContainers === "function" ? excludeContainers() : excludeContainers;
|
|
212
|
-
const _containers = Array.isArray(containers) ? containers : [containers];
|
|
213
|
-
return _containers.some((node2) => contains(node2, target)) || layerStack.isInNestedLayer(node, target);
|
|
214
|
-
}
|
|
215
|
-
const cleanups = [
|
|
216
|
-
pointerBlocking ? disablePointerEventsOutside(node) : void 0,
|
|
217
|
-
trackEscapeKeydown(onEscapeKeyDown),
|
|
218
|
-
trackInteractOutside(node, { exclude, onFocusOutside, onPointerDownOutside })
|
|
219
|
-
];
|
|
220
|
-
return () => {
|
|
221
|
-
layerStack.remove(node);
|
|
222
|
-
assignPointerEventToLayers();
|
|
223
|
-
clearPointerEvent(node);
|
|
224
|
-
cleanups.forEach((fn) => fn == null ? void 0 : fn());
|
|
225
|
-
};
|
|
226
|
-
}
|
|
227
|
-
export {
|
|
228
|
-
trackDismissableElement
|
|
229
|
-
};
|