@zag-js/interact-outside 0.1.5 → 0.1.6
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 +31 -4
- package/dist/index.mjs +161 -0
- package/package.json +8 -8
package/dist/index.js
CHANGED
|
@@ -1,4 +1,30 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
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
|
+
trackInteractOutside: () => trackInteractOutside
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(src_exports);
|
|
26
|
+
|
|
27
|
+
// ../dom/dist/index.mjs
|
|
2
28
|
var runIfFn = (v, ...a) => {
|
|
3
29
|
const res = typeof v === "function" ? v(...a) : v;
|
|
4
30
|
return res ?? void 0;
|
|
@@ -71,7 +97,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
71
97
|
};
|
|
72
98
|
}
|
|
73
99
|
|
|
74
|
-
// ../core/dist/index.
|
|
100
|
+
// ../core/dist/index.mjs
|
|
75
101
|
var callAll = (...fns) => (...a) => {
|
|
76
102
|
fns.forEach(function(fn) {
|
|
77
103
|
fn == null ? void 0 : fn(...a);
|
|
@@ -156,6 +182,7 @@ function trackInteractOutside(node, options) {
|
|
|
156
182
|
cleanups.forEach((fn) => fn());
|
|
157
183
|
};
|
|
158
184
|
}
|
|
159
|
-
export
|
|
185
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
186
|
+
0 && (module.exports = {
|
|
160
187
|
trackInteractOutside
|
|
161
|
-
};
|
|
188
|
+
});
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,161 @@
|
|
|
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
|
+
var isDom = () => typeof window !== "undefined";
|
|
8
|
+
function getPlatform() {
|
|
9
|
+
const agent = navigator.userAgentData;
|
|
10
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
11
|
+
}
|
|
12
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
13
|
+
var isTouchDevice = () => isDom() && !!navigator.maxTouchPoints;
|
|
14
|
+
var isMac = () => pt(/^Mac/) && !isTouchDevice;
|
|
15
|
+
function isDocument(el) {
|
|
16
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
17
|
+
}
|
|
18
|
+
function isWindow(value) {
|
|
19
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
20
|
+
}
|
|
21
|
+
function getDocument(el) {
|
|
22
|
+
if (isWindow(el))
|
|
23
|
+
return el.document;
|
|
24
|
+
if (isDocument(el))
|
|
25
|
+
return el;
|
|
26
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
27
|
+
}
|
|
28
|
+
function getWindow(el) {
|
|
29
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
30
|
+
}
|
|
31
|
+
function getEventTarget(event) {
|
|
32
|
+
var _a;
|
|
33
|
+
return ((_a = event.composedPath) == null ? void 0 : _a.call(event)[0]) ?? event.target;
|
|
34
|
+
}
|
|
35
|
+
function contains(parent, child) {
|
|
36
|
+
if (!parent)
|
|
37
|
+
return false;
|
|
38
|
+
return parent === child || isHTMLElement(parent) && isHTMLElement(child) && parent.contains(child);
|
|
39
|
+
}
|
|
40
|
+
function isHTMLElement(v) {
|
|
41
|
+
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
42
|
+
}
|
|
43
|
+
function isVisible(el) {
|
|
44
|
+
if (!isHTMLElement(el))
|
|
45
|
+
return false;
|
|
46
|
+
return el.offsetWidth > 0 || el.offsetHeight > 0 || el.getClientRects().length > 0;
|
|
47
|
+
}
|
|
48
|
+
var isContextMenuEvent = (e) => {
|
|
49
|
+
return e.button === 2 || isCtrlKey(e) && e.button === 0;
|
|
50
|
+
};
|
|
51
|
+
var isCtrlKey = (v) => isMac() ? v.metaKey && !v.ctrlKey : v.ctrlKey && !v.metaKey;
|
|
52
|
+
function fireCustomEvent(el, type, init) {
|
|
53
|
+
if (!el)
|
|
54
|
+
return;
|
|
55
|
+
const win = getWindow(el);
|
|
56
|
+
const event = new win.CustomEvent(type, init);
|
|
57
|
+
return el.dispatchEvent(event);
|
|
58
|
+
}
|
|
59
|
+
var focusableSelector = "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";
|
|
60
|
+
function isFocusable(element) {
|
|
61
|
+
if (!element)
|
|
62
|
+
return false;
|
|
63
|
+
return element.matches(focusableSelector) && isVisible(element);
|
|
64
|
+
}
|
|
65
|
+
var isRef = (v) => hasProp(v, "current");
|
|
66
|
+
function addDomEvent(target, eventName, handler, options) {
|
|
67
|
+
const node = isRef(target) ? target.current : runIfFn(target);
|
|
68
|
+
node == null ? void 0 : node.addEventListener(eventName, handler, options);
|
|
69
|
+
return () => {
|
|
70
|
+
node == null ? void 0 : node.removeEventListener(eventName, handler, options);
|
|
71
|
+
};
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
// ../core/dist/index.mjs
|
|
75
|
+
var callAll = (...fns) => (...a) => {
|
|
76
|
+
fns.forEach(function(fn) {
|
|
77
|
+
fn == null ? void 0 : fn(...a);
|
|
78
|
+
});
|
|
79
|
+
};
|
|
80
|
+
|
|
81
|
+
// src/index.ts
|
|
82
|
+
var POINTER_OUTSIDE_EVENT = "pointerdown.outside";
|
|
83
|
+
var FOCUS_OUTSIDE_EVENT = "focus.outside";
|
|
84
|
+
function trackInteractOutside(node, options) {
|
|
85
|
+
const { exclude, onFocusOutside, onPointerDownOutside, onInteractOutside } = options;
|
|
86
|
+
if (!node)
|
|
87
|
+
return;
|
|
88
|
+
const doc = getDocument(node);
|
|
89
|
+
const win = getWindow(node);
|
|
90
|
+
function isEventOutside(event) {
|
|
91
|
+
const target = getEventTarget(event);
|
|
92
|
+
if (!(target instanceof win.HTMLElement)) {
|
|
93
|
+
return false;
|
|
94
|
+
}
|
|
95
|
+
if (!contains(doc.documentElement, target)) {
|
|
96
|
+
return false;
|
|
97
|
+
}
|
|
98
|
+
if (contains(node, target)) {
|
|
99
|
+
return false;
|
|
100
|
+
}
|
|
101
|
+
return !(exclude == null ? void 0 : exclude(target));
|
|
102
|
+
}
|
|
103
|
+
let clickHandler;
|
|
104
|
+
function onPointerDown(event) {
|
|
105
|
+
function handler() {
|
|
106
|
+
if (!node || !isEventOutside(event))
|
|
107
|
+
return;
|
|
108
|
+
if (onPointerDownOutside || onInteractOutside) {
|
|
109
|
+
const handler2 = callAll(onPointerDownOutside, onInteractOutside);
|
|
110
|
+
node.addEventListener(POINTER_OUTSIDE_EVENT, handler2, { once: true });
|
|
111
|
+
}
|
|
112
|
+
fireCustomEvent(node, POINTER_OUTSIDE_EVENT, {
|
|
113
|
+
bubbles: false,
|
|
114
|
+
cancelable: true,
|
|
115
|
+
detail: {
|
|
116
|
+
originalEvent: event,
|
|
117
|
+
contextmenu: isContextMenuEvent(event),
|
|
118
|
+
focusable: isFocusable(getEventTarget(event))
|
|
119
|
+
}
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
if (event.pointerType === "touch") {
|
|
123
|
+
doc.removeEventListener("click", handler);
|
|
124
|
+
clickHandler = handler;
|
|
125
|
+
doc.addEventListener("click", handler, { once: true });
|
|
126
|
+
} else {
|
|
127
|
+
handler();
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
const cleanups = /* @__PURE__ */ new Set();
|
|
131
|
+
const timer = setTimeout(() => {
|
|
132
|
+
cleanups.add(addDomEvent(doc, "pointerdown", onPointerDown, true));
|
|
133
|
+
}, 0);
|
|
134
|
+
function onFocusin(event) {
|
|
135
|
+
if (!node || !isEventOutside(event))
|
|
136
|
+
return;
|
|
137
|
+
if (onFocusOutside || onInteractOutside) {
|
|
138
|
+
const handler = callAll(onFocusOutside, onInteractOutside);
|
|
139
|
+
node.addEventListener(FOCUS_OUTSIDE_EVENT, handler, { once: true });
|
|
140
|
+
}
|
|
141
|
+
fireCustomEvent(node, FOCUS_OUTSIDE_EVENT, {
|
|
142
|
+
bubbles: false,
|
|
143
|
+
cancelable: true,
|
|
144
|
+
detail: {
|
|
145
|
+
originalEvent: event,
|
|
146
|
+
contextmenu: false,
|
|
147
|
+
focusable: isFocusable(getEventTarget(event))
|
|
148
|
+
}
|
|
149
|
+
});
|
|
150
|
+
}
|
|
151
|
+
cleanups.add(addDomEvent(doc, "focusin", onFocusin, true));
|
|
152
|
+
return () => {
|
|
153
|
+
clearTimeout(timer);
|
|
154
|
+
if (clickHandler)
|
|
155
|
+
doc.removeEventListener("click", clickHandler);
|
|
156
|
+
cleanups.forEach((fn) => fn());
|
|
157
|
+
};
|
|
158
|
+
}
|
|
159
|
+
export {
|
|
160
|
+
trackInteractOutside
|
|
161
|
+
};
|
package/package.json
CHANGED
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
{
|
|
2
|
-
"type": "module",
|
|
3
2
|
"name": "@zag-js/interact-outside",
|
|
4
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.6",
|
|
5
4
|
"description": "Track interations or focus outside an element",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"module": "dist/index.mjs",
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
6
8
|
"keywords": [
|
|
7
9
|
"js",
|
|
8
10
|
"utils",
|
|
@@ -11,16 +13,14 @@
|
|
|
11
13
|
"author": "Segun Adebayo <sage@adebayosegun.com>",
|
|
12
14
|
"homepage": "https://github.com/chakra-ui/zag#readme",
|
|
13
15
|
"license": "MIT",
|
|
14
|
-
"main": "dist/index.js",
|
|
15
|
-
"types": "dist/index.d.ts",
|
|
16
16
|
"repository": "https://github.com/chakra-ui/zag/tree/main/packages/utilities/interact-outside",
|
|
17
17
|
"sideEffects": false,
|
|
18
18
|
"files": [
|
|
19
19
|
"dist/**/*"
|
|
20
20
|
],
|
|
21
21
|
"devDependencies": {
|
|
22
|
-
"@zag-js/dom-utils": "0.1.
|
|
23
|
-
"@zag-js/utils": "0.1.
|
|
22
|
+
"@zag-js/dom-utils": "0.1.13",
|
|
23
|
+
"@zag-js/utils": "0.1.6"
|
|
24
24
|
},
|
|
25
25
|
"publishConfig": {
|
|
26
26
|
"access": "public"
|
|
@@ -29,9 +29,9 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"scripts": {
|
|
32
|
-
"build-fast": "tsup src/index.ts --format=esm",
|
|
32
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
33
33
|
"start": "pnpm build --watch",
|
|
34
|
-
"build": "tsup src/index.ts --format=esm --dts",
|
|
34
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
35
35
|
"test": "jest --config ../../../jest.config.js --rootDir tests",
|
|
36
36
|
"lint": "eslint src --ext .ts,.tsx",
|
|
37
37
|
"test-ci": "pnpm test --ci --runInBand -u",
|