@zag-js/tooltip 0.2.7 → 0.2.9
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-ANNOJ3Y7.mjs → chunk-ILEFGJ44.mjs} +12 -25
- package/dist/{chunk-Y37ZX4UJ.mjs → chunk-V3RC3IDL.mjs} +2 -11
- package/dist/{chunk-X5RNQNZU.mjs → chunk-W5WZYXHV.mjs} +11 -34
- package/dist/index.js +23 -68
- package/dist/index.mjs +3 -3
- package/dist/tooltip.connect.d.ts +0 -1
- package/dist/tooltip.connect.js +16 -47
- package/dist/tooltip.connect.mjs +2 -2
- package/dist/tooltip.dom.d.ts +0 -3
- package/dist/tooltip.dom.js +10 -32
- package/dist/tooltip.dom.mjs +1 -1
- package/dist/tooltip.machine.js +22 -58
- package/dist/tooltip.machine.mjs +2 -2
- package/dist/tooltip.types.d.ts +1 -1
- package/package.json +7 -7
|
@@ -2,7 +2,7 @@ import {
|
|
|
2
2
|
dom,
|
|
3
3
|
getScrollParents,
|
|
4
4
|
isHTMLElement
|
|
5
|
-
} from "./chunk-
|
|
5
|
+
} from "./chunk-W5WZYXHV.mjs";
|
|
6
6
|
import {
|
|
7
7
|
store
|
|
8
8
|
} from "./chunk-GQYNO326.mjs";
|
|
@@ -13,7 +13,7 @@ import { createMachine, subscribe } from "@zag-js/core";
|
|
|
13
13
|
// ../../utilities/core/src/functions.ts
|
|
14
14
|
var runIfFn = (v, ...a) => {
|
|
15
15
|
const res = typeof v === "function" ? v(...a) : v;
|
|
16
|
-
return res
|
|
16
|
+
return res ?? void 0;
|
|
17
17
|
};
|
|
18
18
|
|
|
19
19
|
// ../../utilities/core/src/guard.ts
|
|
@@ -33,9 +33,8 @@ function compact(obj) {
|
|
|
33
33
|
// ../../utilities/dom/src/platform.ts
|
|
34
34
|
var isDom = () => typeof window !== "undefined";
|
|
35
35
|
function getPlatform() {
|
|
36
|
-
var _a;
|
|
37
36
|
const agent = navigator.userAgentData;
|
|
38
|
-
return
|
|
37
|
+
return agent?.platform ?? navigator.platform;
|
|
39
38
|
}
|
|
40
39
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
41
40
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -62,14 +61,13 @@ function extractInfo(event, type = "page") {
|
|
|
62
61
|
}
|
|
63
62
|
function addDomEvent(target, eventName, handler, options) {
|
|
64
63
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
65
|
-
node
|
|
64
|
+
node?.addEventListener(eventName, handler, options);
|
|
66
65
|
return () => {
|
|
67
|
-
node
|
|
66
|
+
node?.removeEventListener(eventName, handler, options);
|
|
68
67
|
};
|
|
69
68
|
}
|
|
70
69
|
function addPointerEvent(target, event, listener, options) {
|
|
71
|
-
|
|
72
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
70
|
+
const type = getEventName(event) ?? event;
|
|
73
71
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
74
72
|
}
|
|
75
73
|
function wrapHandler(fn, filter = false) {
|
|
@@ -80,8 +78,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
80
78
|
}
|
|
81
79
|
function filterPrimaryPointer(fn) {
|
|
82
80
|
return (event) => {
|
|
83
|
-
|
|
84
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
81
|
+
const win = event.view ?? window;
|
|
85
82
|
const isMouseEvent = event instanceof win.MouseEvent;
|
|
86
83
|
const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
|
|
87
84
|
if (isPrimary)
|
|
@@ -134,7 +131,7 @@ function machine(userContext) {
|
|
|
134
131
|
return createMachine(
|
|
135
132
|
{
|
|
136
133
|
id: "tooltip",
|
|
137
|
-
initial: "
|
|
134
|
+
initial: "closed",
|
|
138
135
|
context: {
|
|
139
136
|
openDelay: 1e3,
|
|
140
137
|
closeDelay: 500,
|
|
@@ -159,11 +156,6 @@ function machine(userContext) {
|
|
|
159
156
|
CLOSE: "closed"
|
|
160
157
|
},
|
|
161
158
|
states: {
|
|
162
|
-
unknown: {
|
|
163
|
-
on: {
|
|
164
|
-
SETUP: "closed"
|
|
165
|
-
}
|
|
166
|
-
},
|
|
167
159
|
closed: {
|
|
168
160
|
tags: ["closed"],
|
|
169
161
|
entry: ["clearGlobalId", "invokeOnClose"],
|
|
@@ -279,7 +271,7 @@ function machine(userContext) {
|
|
|
279
271
|
return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
280
272
|
});
|
|
281
273
|
return () => {
|
|
282
|
-
cleanups.forEach((fn) => fn
|
|
274
|
+
cleanups.forEach((fn) => fn?.());
|
|
283
275
|
};
|
|
284
276
|
},
|
|
285
277
|
trackStore(ctx2, _evt, { send }) {
|
|
@@ -321,18 +313,13 @@ function machine(userContext) {
|
|
|
321
313
|
}
|
|
322
314
|
},
|
|
323
315
|
invokeOnOpen(ctx2, evt) {
|
|
324
|
-
var _a;
|
|
325
316
|
const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
|
|
326
317
|
if (!omit.includes(evt.type)) {
|
|
327
|
-
|
|
318
|
+
ctx2.onOpen?.();
|
|
328
319
|
}
|
|
329
320
|
},
|
|
330
|
-
invokeOnClose(ctx2
|
|
331
|
-
|
|
332
|
-
const omit = ["SETUP"];
|
|
333
|
-
if (!omit.includes(evt.type)) {
|
|
334
|
-
(_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
|
|
335
|
-
}
|
|
321
|
+
invokeOnClose(ctx2) {
|
|
322
|
+
ctx2.onClose?.();
|
|
336
323
|
},
|
|
337
324
|
closeIfDisabled(ctx2, _evt, { send }) {
|
|
338
325
|
if (ctx2.disabled) {
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
} from "./chunk-RRQRIZBA.mjs";
|
|
4
4
|
import {
|
|
5
5
|
dom
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-W5WZYXHV.mjs";
|
|
7
7
|
import {
|
|
8
8
|
store
|
|
9
9
|
} from "./chunk-GQYNO326.mjs";
|
|
@@ -129,16 +129,7 @@ function connect(state, send, normalize) {
|
|
|
129
129
|
role: "tooltip",
|
|
130
130
|
style: visuallyHiddenStyle,
|
|
131
131
|
children: state.context["aria-label"]
|
|
132
|
-
})
|
|
133
|
-
createPortal() {
|
|
134
|
-
const doc = dom.getDoc(state.context);
|
|
135
|
-
const exist = dom.getPortalEl(state.context);
|
|
136
|
-
if (exist)
|
|
137
|
-
return exist;
|
|
138
|
-
const portal = dom.createPortalEl(state.context);
|
|
139
|
-
doc.body.appendChild(portal);
|
|
140
|
-
return portal;
|
|
141
|
-
}
|
|
132
|
+
})
|
|
142
133
|
};
|
|
143
134
|
}
|
|
144
135
|
|
|
@@ -5,13 +5,12 @@ function getCache() {
|
|
|
5
5
|
return g.__styleCache;
|
|
6
6
|
}
|
|
7
7
|
function getComputedStyle(el) {
|
|
8
|
-
var _a;
|
|
9
8
|
if (!el)
|
|
10
9
|
return {};
|
|
11
10
|
const cache = getCache();
|
|
12
11
|
let style = cache.get(el);
|
|
13
12
|
if (!style) {
|
|
14
|
-
const win =
|
|
13
|
+
const win = el?.ownerDocument.defaultView ?? window;
|
|
15
14
|
style = win.getComputedStyle(el);
|
|
16
15
|
cache.set(el, style);
|
|
17
16
|
}
|
|
@@ -23,23 +22,20 @@ function isDocument(el) {
|
|
|
23
22
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
24
23
|
}
|
|
25
24
|
function isWindow(value) {
|
|
26
|
-
return
|
|
25
|
+
return value?.toString() === "[object Window]";
|
|
27
26
|
}
|
|
28
27
|
function getDocument(el) {
|
|
29
|
-
var _a;
|
|
30
28
|
if (isWindow(el))
|
|
31
29
|
return el.document;
|
|
32
30
|
if (isDocument(el))
|
|
33
31
|
return el;
|
|
34
|
-
return
|
|
32
|
+
return el?.ownerDocument ?? document;
|
|
35
33
|
}
|
|
36
34
|
function getWindow(el) {
|
|
37
|
-
|
|
38
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
35
|
+
return el?.ownerDocument.defaultView ?? window;
|
|
39
36
|
}
|
|
40
37
|
function getNodeName(node) {
|
|
41
|
-
|
|
42
|
-
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
38
|
+
return isWindow(node) ? "" : node?.localName ?? "";
|
|
43
39
|
}
|
|
44
40
|
function getParent(el) {
|
|
45
41
|
const doc = getDocument(el);
|
|
@@ -49,15 +45,9 @@ function getParent(el) {
|
|
|
49
45
|
}
|
|
50
46
|
function defineDomHelpers(helpers) {
|
|
51
47
|
const dom2 = {
|
|
52
|
-
getRootNode: (ctx) =>
|
|
53
|
-
var _a, _b;
|
|
54
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
55
|
-
},
|
|
48
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
56
49
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
57
|
-
getWin: (ctx) =>
|
|
58
|
-
var _a;
|
|
59
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
60
|
-
},
|
|
50
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
61
51
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
62
52
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
63
53
|
};
|
|
@@ -67,7 +57,7 @@ function defineDomHelpers(helpers) {
|
|
|
67
57
|
};
|
|
68
58
|
}
|
|
69
59
|
function isHTMLElement(v) {
|
|
70
|
-
return typeof v === "object" &&
|
|
60
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
71
61
|
}
|
|
72
62
|
|
|
73
63
|
// ../../utilities/dom/src/scrollable.ts
|
|
@@ -97,28 +87,15 @@ function getScrollParents(el, list = []) {
|
|
|
97
87
|
|
|
98
88
|
// src/tooltip.dom.ts
|
|
99
89
|
var dom = defineDomHelpers({
|
|
100
|
-
getTriggerId: (ctx) => {
|
|
101
|
-
|
|
102
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
|
|
103
|
-
},
|
|
104
|
-
getContentId: (ctx) => {
|
|
105
|
-
var _a, _b;
|
|
106
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
|
|
107
|
-
},
|
|
90
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
91
|
+
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
108
92
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
109
93
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
110
|
-
portalId: "tooltip-portal",
|
|
111
94
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
112
95
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
113
96
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
114
97
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
115
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
116
|
-
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
|
|
117
|
-
createPortalEl: (ctx) => {
|
|
118
|
-
const portal = dom.getDoc(ctx).createElement(dom.portalId);
|
|
119
|
-
portal.id = dom.portalId;
|
|
120
|
-
return portal;
|
|
121
|
-
}
|
|
98
|
+
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
122
99
|
});
|
|
123
100
|
|
|
124
101
|
export {
|
package/dist/index.js
CHANGED
|
@@ -43,13 +43,12 @@ function getCache() {
|
|
|
43
43
|
return g.__styleCache;
|
|
44
44
|
}
|
|
45
45
|
function getComputedStyle(el) {
|
|
46
|
-
var _a;
|
|
47
46
|
if (!el)
|
|
48
47
|
return {};
|
|
49
48
|
const cache = getCache();
|
|
50
49
|
let style = cache.get(el);
|
|
51
50
|
if (!style) {
|
|
52
|
-
const win =
|
|
51
|
+
const win = el?.ownerDocument.defaultView ?? window;
|
|
53
52
|
style = win.getComputedStyle(el);
|
|
54
53
|
cache.set(el, style);
|
|
55
54
|
}
|
|
@@ -59,7 +58,7 @@ function getComputedStyle(el) {
|
|
|
59
58
|
// ../../utilities/core/src/functions.ts
|
|
60
59
|
var runIfFn = (v, ...a) => {
|
|
61
60
|
const res = typeof v === "function" ? v(...a) : v;
|
|
62
|
-
return res
|
|
61
|
+
return res ?? void 0;
|
|
63
62
|
};
|
|
64
63
|
|
|
65
64
|
// ../../utilities/core/src/guard.ts
|
|
@@ -79,9 +78,8 @@ function compact(obj) {
|
|
|
79
78
|
// ../../utilities/dom/src/platform.ts
|
|
80
79
|
var isDom = () => typeof window !== "undefined";
|
|
81
80
|
function getPlatform() {
|
|
82
|
-
var _a;
|
|
83
81
|
const agent = navigator.userAgentData;
|
|
84
|
-
return
|
|
82
|
+
return agent?.platform ?? navigator.platform;
|
|
85
83
|
}
|
|
86
84
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
87
85
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -93,23 +91,20 @@ function isDocument(el) {
|
|
|
93
91
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
94
92
|
}
|
|
95
93
|
function isWindow(value) {
|
|
96
|
-
return
|
|
94
|
+
return value?.toString() === "[object Window]";
|
|
97
95
|
}
|
|
98
96
|
function getDocument(el) {
|
|
99
|
-
var _a;
|
|
100
97
|
if (isWindow(el))
|
|
101
98
|
return el.document;
|
|
102
99
|
if (isDocument(el))
|
|
103
100
|
return el;
|
|
104
|
-
return
|
|
101
|
+
return el?.ownerDocument ?? document;
|
|
105
102
|
}
|
|
106
103
|
function getWindow(el) {
|
|
107
|
-
|
|
108
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
104
|
+
return el?.ownerDocument.defaultView ?? window;
|
|
109
105
|
}
|
|
110
106
|
function getNodeName(node) {
|
|
111
|
-
|
|
112
|
-
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
107
|
+
return isWindow(node) ? "" : node?.localName ?? "";
|
|
113
108
|
}
|
|
114
109
|
function getParent(el) {
|
|
115
110
|
const doc = getDocument(el);
|
|
@@ -119,15 +114,9 @@ function getParent(el) {
|
|
|
119
114
|
}
|
|
120
115
|
function defineDomHelpers(helpers) {
|
|
121
116
|
const dom2 = {
|
|
122
|
-
getRootNode: (ctx) =>
|
|
123
|
-
var _a, _b;
|
|
124
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
125
|
-
},
|
|
117
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
126
118
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
127
|
-
getWin: (ctx) =>
|
|
128
|
-
var _a;
|
|
129
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
130
|
-
},
|
|
119
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
131
120
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
132
121
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
133
122
|
};
|
|
@@ -137,7 +126,7 @@ function defineDomHelpers(helpers) {
|
|
|
137
126
|
};
|
|
138
127
|
}
|
|
139
128
|
function isHTMLElement(v) {
|
|
140
|
-
return typeof v === "object" &&
|
|
129
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
141
130
|
}
|
|
142
131
|
|
|
143
132
|
// ../../utilities/dom/src/event.ts
|
|
@@ -160,14 +149,13 @@ function extractInfo(event, type = "page") {
|
|
|
160
149
|
}
|
|
161
150
|
function addDomEvent(target, eventName, handler, options) {
|
|
162
151
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
163
|
-
node
|
|
152
|
+
node?.addEventListener(eventName, handler, options);
|
|
164
153
|
return () => {
|
|
165
|
-
node
|
|
154
|
+
node?.removeEventListener(eventName, handler, options);
|
|
166
155
|
};
|
|
167
156
|
}
|
|
168
157
|
function addPointerEvent(target, event, listener, options) {
|
|
169
|
-
|
|
170
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
158
|
+
const type = getEventName(event) ?? event;
|
|
171
159
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
172
160
|
}
|
|
173
161
|
function wrapHandler(fn, filter = false) {
|
|
@@ -178,8 +166,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
178
166
|
}
|
|
179
167
|
function filterPrimaryPointer(fn) {
|
|
180
168
|
return (event) => {
|
|
181
|
-
|
|
182
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
169
|
+
const win = event.view ?? window;
|
|
183
170
|
const isMouseEvent = event instanceof win.MouseEvent;
|
|
184
171
|
const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
|
|
185
172
|
if (isPrimary)
|
|
@@ -269,28 +256,15 @@ var import_popper = require("@zag-js/popper");
|
|
|
269
256
|
|
|
270
257
|
// src/tooltip.dom.ts
|
|
271
258
|
var dom = defineDomHelpers({
|
|
272
|
-
getTriggerId: (ctx) => {
|
|
273
|
-
|
|
274
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
|
|
275
|
-
},
|
|
276
|
-
getContentId: (ctx) => {
|
|
277
|
-
var _a, _b;
|
|
278
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
|
|
279
|
-
},
|
|
259
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
260
|
+
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
280
261
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
281
262
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
282
|
-
portalId: "tooltip-portal",
|
|
283
263
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
284
264
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
285
265
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
286
266
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
287
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
288
|
-
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
|
|
289
|
-
createPortalEl: (ctx) => {
|
|
290
|
-
const portal = dom.getDoc(ctx).createElement(dom.portalId);
|
|
291
|
-
portal.id = dom.portalId;
|
|
292
|
-
return portal;
|
|
293
|
-
}
|
|
267
|
+
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
294
268
|
});
|
|
295
269
|
|
|
296
270
|
// src/tooltip.store.ts
|
|
@@ -405,16 +379,7 @@ function connect(state, send, normalize) {
|
|
|
405
379
|
role: "tooltip",
|
|
406
380
|
style: visuallyHiddenStyle,
|
|
407
381
|
children: state.context["aria-label"]
|
|
408
|
-
})
|
|
409
|
-
createPortal() {
|
|
410
|
-
const doc = dom.getDoc(state.context);
|
|
411
|
-
const exist = dom.getPortalEl(state.context);
|
|
412
|
-
if (exist)
|
|
413
|
-
return exist;
|
|
414
|
-
const portal = dom.createPortalEl(state.context);
|
|
415
|
-
doc.body.appendChild(portal);
|
|
416
|
-
return portal;
|
|
417
|
-
}
|
|
382
|
+
})
|
|
418
383
|
};
|
|
419
384
|
}
|
|
420
385
|
|
|
@@ -426,7 +391,7 @@ function machine(userContext) {
|
|
|
426
391
|
return (0, import_core2.createMachine)(
|
|
427
392
|
{
|
|
428
393
|
id: "tooltip",
|
|
429
|
-
initial: "
|
|
394
|
+
initial: "closed",
|
|
430
395
|
context: {
|
|
431
396
|
openDelay: 1e3,
|
|
432
397
|
closeDelay: 500,
|
|
@@ -451,11 +416,6 @@ function machine(userContext) {
|
|
|
451
416
|
CLOSE: "closed"
|
|
452
417
|
},
|
|
453
418
|
states: {
|
|
454
|
-
unknown: {
|
|
455
|
-
on: {
|
|
456
|
-
SETUP: "closed"
|
|
457
|
-
}
|
|
458
|
-
},
|
|
459
419
|
closed: {
|
|
460
420
|
tags: ["closed"],
|
|
461
421
|
entry: ["clearGlobalId", "invokeOnClose"],
|
|
@@ -571,7 +531,7 @@ function machine(userContext) {
|
|
|
571
531
|
return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
572
532
|
});
|
|
573
533
|
return () => {
|
|
574
|
-
cleanups.forEach((fn) => fn
|
|
534
|
+
cleanups.forEach((fn) => fn?.());
|
|
575
535
|
};
|
|
576
536
|
},
|
|
577
537
|
trackStore(ctx2, _evt, { send }) {
|
|
@@ -613,18 +573,13 @@ function machine(userContext) {
|
|
|
613
573
|
}
|
|
614
574
|
},
|
|
615
575
|
invokeOnOpen(ctx2, evt) {
|
|
616
|
-
var _a;
|
|
617
576
|
const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
|
|
618
577
|
if (!omit.includes(evt.type)) {
|
|
619
|
-
|
|
578
|
+
ctx2.onOpen?.();
|
|
620
579
|
}
|
|
621
580
|
},
|
|
622
|
-
invokeOnClose(ctx2
|
|
623
|
-
|
|
624
|
-
const omit = ["SETUP"];
|
|
625
|
-
if (!omit.includes(evt.type)) {
|
|
626
|
-
(_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
|
|
627
|
-
}
|
|
581
|
+
invokeOnClose(ctx2) {
|
|
582
|
+
ctx2.onClose?.();
|
|
628
583
|
},
|
|
629
584
|
closeIfDisabled(ctx2, _evt, { send }) {
|
|
630
585
|
if (ctx2.disabled) {
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
connect
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-V3RC3IDL.mjs";
|
|
4
4
|
import {
|
|
5
5
|
anatomy
|
|
6
6
|
} from "./chunk-RRQRIZBA.mjs";
|
|
7
7
|
import {
|
|
8
8
|
machine
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import "./chunk-
|
|
9
|
+
} from "./chunk-ILEFGJ44.mjs";
|
|
10
|
+
import "./chunk-W5WZYXHV.mjs";
|
|
11
11
|
import "./chunk-GQYNO326.mjs";
|
|
12
12
|
export {
|
|
13
13
|
anatomy,
|
package/dist/tooltip.connect.js
CHANGED
|
@@ -36,13 +36,12 @@ function getCache() {
|
|
|
36
36
|
return g.__styleCache;
|
|
37
37
|
}
|
|
38
38
|
function getComputedStyle(el) {
|
|
39
|
-
var _a;
|
|
40
39
|
if (!el)
|
|
41
40
|
return {};
|
|
42
41
|
const cache = getCache();
|
|
43
42
|
let style = cache.get(el);
|
|
44
43
|
if (!style) {
|
|
45
|
-
const win =
|
|
44
|
+
const win = el?.ownerDocument.defaultView ?? window;
|
|
46
45
|
style = win.getComputedStyle(el);
|
|
47
46
|
cache.set(el, style);
|
|
48
47
|
}
|
|
@@ -54,19 +53,17 @@ function isDocument(el) {
|
|
|
54
53
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
55
54
|
}
|
|
56
55
|
function isWindow(value) {
|
|
57
|
-
return
|
|
56
|
+
return value?.toString() === "[object Window]";
|
|
58
57
|
}
|
|
59
58
|
function getDocument(el) {
|
|
60
|
-
var _a;
|
|
61
59
|
if (isWindow(el))
|
|
62
60
|
return el.document;
|
|
63
61
|
if (isDocument(el))
|
|
64
62
|
return el;
|
|
65
|
-
return
|
|
63
|
+
return el?.ownerDocument ?? document;
|
|
66
64
|
}
|
|
67
65
|
function getNodeName(node) {
|
|
68
|
-
|
|
69
|
-
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
66
|
+
return isWindow(node) ? "" : node?.localName ?? "";
|
|
70
67
|
}
|
|
71
68
|
function getParent(el) {
|
|
72
69
|
const doc = getDocument(el);
|
|
@@ -76,15 +73,9 @@ function getParent(el) {
|
|
|
76
73
|
}
|
|
77
74
|
function defineDomHelpers(helpers) {
|
|
78
75
|
const dom2 = {
|
|
79
|
-
getRootNode: (ctx) =>
|
|
80
|
-
var _a, _b;
|
|
81
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
82
|
-
},
|
|
76
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
83
77
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
84
|
-
getWin: (ctx) =>
|
|
85
|
-
var _a;
|
|
86
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
87
|
-
},
|
|
78
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
88
79
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
89
80
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
90
81
|
};
|
|
@@ -94,7 +85,7 @@ function defineDomHelpers(helpers) {
|
|
|
94
85
|
};
|
|
95
86
|
}
|
|
96
87
|
function isHTMLElement(v) {
|
|
97
|
-
return typeof v === "object" &&
|
|
88
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
98
89
|
}
|
|
99
90
|
|
|
100
91
|
// ../../utilities/dom/src/scrollable.ts
|
|
@@ -129,30 +120,22 @@ var visuallyHiddenStyle = {
|
|
|
129
120
|
// src/tooltip.connect.ts
|
|
130
121
|
var import_popper = require("@zag-js/popper");
|
|
131
122
|
|
|
123
|
+
// src/tooltip.anatomy.ts
|
|
124
|
+
var import_anatomy = require("@zag-js/anatomy");
|
|
125
|
+
var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
|
|
126
|
+
var parts = anatomy.build();
|
|
127
|
+
|
|
132
128
|
// src/tooltip.dom.ts
|
|
133
129
|
var dom = defineDomHelpers({
|
|
134
|
-
getTriggerId: (ctx) => {
|
|
135
|
-
|
|
136
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
|
|
137
|
-
},
|
|
138
|
-
getContentId: (ctx) => {
|
|
139
|
-
var _a, _b;
|
|
140
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
|
|
141
|
-
},
|
|
130
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
131
|
+
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
142
132
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
143
133
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
144
|
-
portalId: "tooltip-portal",
|
|
145
134
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
146
135
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
147
136
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
148
137
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
149
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
150
|
-
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
|
|
151
|
-
createPortalEl: (ctx) => {
|
|
152
|
-
const portal = dom.getDoc(ctx).createElement(dom.portalId);
|
|
153
|
-
portal.id = dom.portalId;
|
|
154
|
-
return portal;
|
|
155
|
-
}
|
|
138
|
+
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
156
139
|
});
|
|
157
140
|
|
|
158
141
|
// src/tooltip.store.ts
|
|
@@ -166,11 +149,6 @@ var store = (0, import_core.proxy)({
|
|
|
166
149
|
}
|
|
167
150
|
});
|
|
168
151
|
|
|
169
|
-
// src/tooltip.anatomy.ts
|
|
170
|
-
var import_anatomy = require("@zag-js/anatomy");
|
|
171
|
-
var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
|
|
172
|
-
var parts = anatomy.build();
|
|
173
|
-
|
|
174
152
|
// src/tooltip.connect.ts
|
|
175
153
|
function connect(state, send, normalize) {
|
|
176
154
|
const id = state.context.id;
|
|
@@ -272,16 +250,7 @@ function connect(state, send, normalize) {
|
|
|
272
250
|
role: "tooltip",
|
|
273
251
|
style: visuallyHiddenStyle,
|
|
274
252
|
children: state.context["aria-label"]
|
|
275
|
-
})
|
|
276
|
-
createPortal() {
|
|
277
|
-
const doc = dom.getDoc(state.context);
|
|
278
|
-
const exist = dom.getPortalEl(state.context);
|
|
279
|
-
if (exist)
|
|
280
|
-
return exist;
|
|
281
|
-
const portal = dom.createPortalEl(state.context);
|
|
282
|
-
doc.body.appendChild(portal);
|
|
283
|
-
return portal;
|
|
284
|
-
}
|
|
253
|
+
})
|
|
285
254
|
};
|
|
286
255
|
}
|
|
287
256
|
// Annotate the CommonJS export names for ESM import in node:
|
package/dist/tooltip.connect.mjs
CHANGED
package/dist/tooltip.dom.d.ts
CHANGED
|
@@ -24,14 +24,11 @@ declare const dom: {
|
|
|
24
24
|
getContentId: (ctx: MachineContext) => string;
|
|
25
25
|
getArrowId: (ctx: MachineContext) => string;
|
|
26
26
|
getPositionerId: (ctx: MachineContext) => string;
|
|
27
|
-
portalId: string;
|
|
28
27
|
getTriggerEl: (ctx: MachineContext) => HTMLElement | null;
|
|
29
28
|
getContentEl: (ctx: MachineContext) => HTMLElement | null;
|
|
30
29
|
getPositionerEl: (ctx: MachineContext) => HTMLElement | null;
|
|
31
30
|
getArrowEl: (ctx: MachineContext) => HTMLElement | null;
|
|
32
31
|
getScrollParent: (ctx: MachineContext) => HTMLElement;
|
|
33
|
-
getPortalEl: (ctx: MachineContext) => HTMLElement | null;
|
|
34
|
-
createPortalEl: (ctx: MachineContext) => HTMLElement;
|
|
35
32
|
};
|
|
36
33
|
|
|
37
34
|
export { dom };
|
package/dist/tooltip.dom.js
CHANGED
|
@@ -31,13 +31,12 @@ function getCache() {
|
|
|
31
31
|
return g.__styleCache;
|
|
32
32
|
}
|
|
33
33
|
function getComputedStyle(el) {
|
|
34
|
-
var _a;
|
|
35
34
|
if (!el)
|
|
36
35
|
return {};
|
|
37
36
|
const cache = getCache();
|
|
38
37
|
let style = cache.get(el);
|
|
39
38
|
if (!style) {
|
|
40
|
-
const win =
|
|
39
|
+
const win = el?.ownerDocument.defaultView ?? window;
|
|
41
40
|
style = win.getComputedStyle(el);
|
|
42
41
|
cache.set(el, style);
|
|
43
42
|
}
|
|
@@ -49,19 +48,17 @@ function isDocument(el) {
|
|
|
49
48
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
50
49
|
}
|
|
51
50
|
function isWindow(value) {
|
|
52
|
-
return
|
|
51
|
+
return value?.toString() === "[object Window]";
|
|
53
52
|
}
|
|
54
53
|
function getDocument(el) {
|
|
55
|
-
var _a;
|
|
56
54
|
if (isWindow(el))
|
|
57
55
|
return el.document;
|
|
58
56
|
if (isDocument(el))
|
|
59
57
|
return el;
|
|
60
|
-
return
|
|
58
|
+
return el?.ownerDocument ?? document;
|
|
61
59
|
}
|
|
62
60
|
function getNodeName(node) {
|
|
63
|
-
|
|
64
|
-
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
61
|
+
return isWindow(node) ? "" : node?.localName ?? "";
|
|
65
62
|
}
|
|
66
63
|
function getParent(el) {
|
|
67
64
|
const doc = getDocument(el);
|
|
@@ -71,15 +68,9 @@ function getParent(el) {
|
|
|
71
68
|
}
|
|
72
69
|
function defineDomHelpers(helpers) {
|
|
73
70
|
const dom2 = {
|
|
74
|
-
getRootNode: (ctx) =>
|
|
75
|
-
var _a, _b;
|
|
76
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
77
|
-
},
|
|
71
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
78
72
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
79
|
-
getWin: (ctx) =>
|
|
80
|
-
var _a;
|
|
81
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
82
|
-
},
|
|
73
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
83
74
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
84
75
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
85
76
|
};
|
|
@@ -89,7 +80,7 @@ function defineDomHelpers(helpers) {
|
|
|
89
80
|
};
|
|
90
81
|
}
|
|
91
82
|
function isHTMLElement(v) {
|
|
92
|
-
return typeof v === "object" &&
|
|
83
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
93
84
|
}
|
|
94
85
|
|
|
95
86
|
// ../../utilities/dom/src/scrollable.ts
|
|
@@ -109,28 +100,15 @@ function getScrollParent(el) {
|
|
|
109
100
|
|
|
110
101
|
// src/tooltip.dom.ts
|
|
111
102
|
var dom = defineDomHelpers({
|
|
112
|
-
getTriggerId: (ctx) => {
|
|
113
|
-
|
|
114
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
|
|
115
|
-
},
|
|
116
|
-
getContentId: (ctx) => {
|
|
117
|
-
var _a, _b;
|
|
118
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
|
|
119
|
-
},
|
|
103
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
104
|
+
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
120
105
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
121
106
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
122
|
-
portalId: "tooltip-portal",
|
|
123
107
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
124
108
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
125
109
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
126
110
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
127
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
128
|
-
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
|
|
129
|
-
createPortalEl: (ctx) => {
|
|
130
|
-
const portal = dom.getDoc(ctx).createElement(dom.portalId);
|
|
131
|
-
portal.id = dom.portalId;
|
|
132
|
-
return portal;
|
|
133
|
-
}
|
|
111
|
+
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
134
112
|
});
|
|
135
113
|
// Annotate the CommonJS export names for ESM import in node:
|
|
136
114
|
0 && (module.exports = {
|
package/dist/tooltip.dom.mjs
CHANGED
package/dist/tooltip.machine.js
CHANGED
|
@@ -32,13 +32,12 @@ function getCache() {
|
|
|
32
32
|
return g.__styleCache;
|
|
33
33
|
}
|
|
34
34
|
function getComputedStyle(el) {
|
|
35
|
-
var _a;
|
|
36
35
|
if (!el)
|
|
37
36
|
return {};
|
|
38
37
|
const cache = getCache();
|
|
39
38
|
let style = cache.get(el);
|
|
40
39
|
if (!style) {
|
|
41
|
-
const win =
|
|
40
|
+
const win = el?.ownerDocument.defaultView ?? window;
|
|
42
41
|
style = win.getComputedStyle(el);
|
|
43
42
|
cache.set(el, style);
|
|
44
43
|
}
|
|
@@ -48,7 +47,7 @@ function getComputedStyle(el) {
|
|
|
48
47
|
// ../../utilities/core/src/functions.ts
|
|
49
48
|
var runIfFn = (v, ...a) => {
|
|
50
49
|
const res = typeof v === "function" ? v(...a) : v;
|
|
51
|
-
return res
|
|
50
|
+
return res ?? void 0;
|
|
52
51
|
};
|
|
53
52
|
|
|
54
53
|
// ../../utilities/core/src/guard.ts
|
|
@@ -68,9 +67,8 @@ function compact(obj) {
|
|
|
68
67
|
// ../../utilities/dom/src/platform.ts
|
|
69
68
|
var isDom = () => typeof window !== "undefined";
|
|
70
69
|
function getPlatform() {
|
|
71
|
-
var _a;
|
|
72
70
|
const agent = navigator.userAgentData;
|
|
73
|
-
return
|
|
71
|
+
return agent?.platform ?? navigator.platform;
|
|
74
72
|
}
|
|
75
73
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
76
74
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -82,23 +80,20 @@ function isDocument(el) {
|
|
|
82
80
|
return el.nodeType === Node.DOCUMENT_NODE;
|
|
83
81
|
}
|
|
84
82
|
function isWindow(value) {
|
|
85
|
-
return
|
|
83
|
+
return value?.toString() === "[object Window]";
|
|
86
84
|
}
|
|
87
85
|
function getDocument(el) {
|
|
88
|
-
var _a;
|
|
89
86
|
if (isWindow(el))
|
|
90
87
|
return el.document;
|
|
91
88
|
if (isDocument(el))
|
|
92
89
|
return el;
|
|
93
|
-
return
|
|
90
|
+
return el?.ownerDocument ?? document;
|
|
94
91
|
}
|
|
95
92
|
function getWindow(el) {
|
|
96
|
-
|
|
97
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
93
|
+
return el?.ownerDocument.defaultView ?? window;
|
|
98
94
|
}
|
|
99
95
|
function getNodeName(node) {
|
|
100
|
-
|
|
101
|
-
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
96
|
+
return isWindow(node) ? "" : node?.localName ?? "";
|
|
102
97
|
}
|
|
103
98
|
function getParent(el) {
|
|
104
99
|
const doc = getDocument(el);
|
|
@@ -108,15 +103,9 @@ function getParent(el) {
|
|
|
108
103
|
}
|
|
109
104
|
function defineDomHelpers(helpers) {
|
|
110
105
|
const dom2 = {
|
|
111
|
-
getRootNode: (ctx) =>
|
|
112
|
-
var _a, _b;
|
|
113
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
114
|
-
},
|
|
106
|
+
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
115
107
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
116
|
-
getWin: (ctx) =>
|
|
117
|
-
var _a;
|
|
118
|
-
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
119
|
-
},
|
|
108
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
120
109
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
121
110
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
122
111
|
};
|
|
@@ -126,7 +115,7 @@ function defineDomHelpers(helpers) {
|
|
|
126
115
|
};
|
|
127
116
|
}
|
|
128
117
|
function isHTMLElement(v) {
|
|
129
|
-
return typeof v === "object" &&
|
|
118
|
+
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
130
119
|
}
|
|
131
120
|
|
|
132
121
|
// ../../utilities/dom/src/event.ts
|
|
@@ -149,14 +138,13 @@ function extractInfo(event, type = "page") {
|
|
|
149
138
|
}
|
|
150
139
|
function addDomEvent(target, eventName, handler, options) {
|
|
151
140
|
const node = isRef(target) ? target.current : runIfFn(target);
|
|
152
|
-
node
|
|
141
|
+
node?.addEventListener(eventName, handler, options);
|
|
153
142
|
return () => {
|
|
154
|
-
node
|
|
143
|
+
node?.removeEventListener(eventName, handler, options);
|
|
155
144
|
};
|
|
156
145
|
}
|
|
157
146
|
function addPointerEvent(target, event, listener, options) {
|
|
158
|
-
|
|
159
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
147
|
+
const type = getEventName(event) ?? event;
|
|
160
148
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
161
149
|
}
|
|
162
150
|
function wrapHandler(fn, filter = false) {
|
|
@@ -167,8 +155,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
167
155
|
}
|
|
168
156
|
function filterPrimaryPointer(fn) {
|
|
169
157
|
return (event) => {
|
|
170
|
-
|
|
171
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
158
|
+
const win = event.view ?? window;
|
|
172
159
|
const isMouseEvent = event instanceof win.MouseEvent;
|
|
173
160
|
const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
|
|
174
161
|
if (isPrimary)
|
|
@@ -244,28 +231,15 @@ var import_popper = require("@zag-js/popper");
|
|
|
244
231
|
|
|
245
232
|
// src/tooltip.dom.ts
|
|
246
233
|
var dom = defineDomHelpers({
|
|
247
|
-
getTriggerId: (ctx) => {
|
|
248
|
-
|
|
249
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
|
|
250
|
-
},
|
|
251
|
-
getContentId: (ctx) => {
|
|
252
|
-
var _a, _b;
|
|
253
|
-
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
|
|
254
|
-
},
|
|
234
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
235
|
+
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
255
236
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
256
237
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
257
|
-
portalId: "tooltip-portal",
|
|
258
238
|
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
259
239
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
260
240
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
261
241
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
262
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
263
|
-
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
|
|
264
|
-
createPortalEl: (ctx) => {
|
|
265
|
-
const portal = dom.getDoc(ctx).createElement(dom.portalId);
|
|
266
|
-
portal.id = dom.portalId;
|
|
267
|
-
return portal;
|
|
268
|
-
}
|
|
242
|
+
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
269
243
|
});
|
|
270
244
|
|
|
271
245
|
// src/tooltip.store.ts
|
|
@@ -285,7 +259,7 @@ function machine(userContext) {
|
|
|
285
259
|
return (0, import_core2.createMachine)(
|
|
286
260
|
{
|
|
287
261
|
id: "tooltip",
|
|
288
|
-
initial: "
|
|
262
|
+
initial: "closed",
|
|
289
263
|
context: {
|
|
290
264
|
openDelay: 1e3,
|
|
291
265
|
closeDelay: 500,
|
|
@@ -310,11 +284,6 @@ function machine(userContext) {
|
|
|
310
284
|
CLOSE: "closed"
|
|
311
285
|
},
|
|
312
286
|
states: {
|
|
313
|
-
unknown: {
|
|
314
|
-
on: {
|
|
315
|
-
SETUP: "closed"
|
|
316
|
-
}
|
|
317
|
-
},
|
|
318
287
|
closed: {
|
|
319
288
|
tags: ["closed"],
|
|
320
289
|
entry: ["clearGlobalId", "invokeOnClose"],
|
|
@@ -430,7 +399,7 @@ function machine(userContext) {
|
|
|
430
399
|
return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
431
400
|
});
|
|
432
401
|
return () => {
|
|
433
|
-
cleanups.forEach((fn) => fn
|
|
402
|
+
cleanups.forEach((fn) => fn?.());
|
|
434
403
|
};
|
|
435
404
|
},
|
|
436
405
|
trackStore(ctx2, _evt, { send }) {
|
|
@@ -472,18 +441,13 @@ function machine(userContext) {
|
|
|
472
441
|
}
|
|
473
442
|
},
|
|
474
443
|
invokeOnOpen(ctx2, evt) {
|
|
475
|
-
var _a;
|
|
476
444
|
const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
|
|
477
445
|
if (!omit.includes(evt.type)) {
|
|
478
|
-
|
|
446
|
+
ctx2.onOpen?.();
|
|
479
447
|
}
|
|
480
448
|
},
|
|
481
|
-
invokeOnClose(ctx2
|
|
482
|
-
|
|
483
|
-
const omit = ["SETUP"];
|
|
484
|
-
if (!omit.includes(evt.type)) {
|
|
485
|
-
(_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
|
|
486
|
-
}
|
|
449
|
+
invokeOnClose(ctx2) {
|
|
450
|
+
ctx2.onClose?.();
|
|
487
451
|
},
|
|
488
452
|
closeIfDisabled(ctx2, _evt, { send }) {
|
|
489
453
|
if (ctx2.disabled) {
|
package/dist/tooltip.machine.mjs
CHANGED
package/dist/tooltip.types.d.ts
CHANGED
|
@@ -68,7 +68,7 @@ type ComputedContext = Readonly<{
|
|
|
68
68
|
type PrivateContext = RootProperties & {};
|
|
69
69
|
type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
70
70
|
type MachineState = {
|
|
71
|
-
value: "
|
|
71
|
+
value: "opening" | "open" | "closing" | "closed";
|
|
72
72
|
tags: "open" | "closed";
|
|
73
73
|
};
|
|
74
74
|
type State = StateMachine.State<MachineContext, MachineState>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/tooltip",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.9",
|
|
4
4
|
"description": "Core logic for the tooltip widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -26,15 +26,15 @@
|
|
|
26
26
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
|
-
"@zag-js/anatomy": "0.1.
|
|
30
|
-
"@zag-js/core": "0.2.
|
|
31
|
-
"@zag-js/popper": "0.2.
|
|
32
|
-
"@zag-js/types": "0.3.
|
|
29
|
+
"@zag-js/anatomy": "0.1.4",
|
|
30
|
+
"@zag-js/core": "0.2.7",
|
|
31
|
+
"@zag-js/popper": "0.2.3",
|
|
32
|
+
"@zag-js/types": "0.3.4"
|
|
33
33
|
},
|
|
34
34
|
"devDependencies": {
|
|
35
35
|
"clean-package": "2.2.0",
|
|
36
|
-
"@zag-js/dom-utils": "0.2.
|
|
37
|
-
"@zag-js/utils": "0.3.
|
|
36
|
+
"@zag-js/dom-utils": "0.2.4",
|
|
37
|
+
"@zag-js/utils": "0.3.3"
|
|
38
38
|
},
|
|
39
39
|
"clean-package": "../../../clean-package.config.json",
|
|
40
40
|
"main": "dist/index.js",
|