@zag-js/tooltip 0.1.10 → 0.1.13
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/LICENSE +21 -0
- package/dist/index.d.ts +93 -3
- package/dist/index.js +217 -254
- package/dist/index.mjs +213 -258
- package/package.json +13 -12
- package/dist/tooltip.connect.d.ts +0 -18
- package/dist/tooltip.dom.d.ts +0 -31
- package/dist/tooltip.machine.d.ts +0 -2
- package/dist/tooltip.store.d.ts +0 -8
- package/dist/tooltip.types.d.ts +0 -82
package/dist/index.mjs
CHANGED
|
@@ -1,40 +1,4 @@
|
|
|
1
|
-
var __defProp = Object.defineProperty;
|
|
2
|
-
var __defProps = Object.defineProperties;
|
|
3
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
4
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
5
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
7
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
8
|
-
var __spreadValues = (a, b) => {
|
|
9
|
-
for (var prop in b || (b = {}))
|
|
10
|
-
if (__hasOwnProp.call(b, prop))
|
|
11
|
-
__defNormalProp(a, prop, b[prop]);
|
|
12
|
-
if (__getOwnPropSymbols)
|
|
13
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
14
|
-
if (__propIsEnum.call(b, prop))
|
|
15
|
-
__defNormalProp(a, prop, b[prop]);
|
|
16
|
-
}
|
|
17
|
-
return a;
|
|
18
|
-
};
|
|
19
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
20
|
-
|
|
21
1
|
// ../../utilities/dom/dist/index.mjs
|
|
22
|
-
var __defProp2 = Object.defineProperty;
|
|
23
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
24
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
25
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
26
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
27
|
-
var __spreadValues2 = (a, b) => {
|
|
28
|
-
for (var prop in b || (b = {}))
|
|
29
|
-
if (__hasOwnProp2.call(b, prop))
|
|
30
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
31
|
-
if (__getOwnPropSymbols2)
|
|
32
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
33
|
-
if (__propIsEnum2.call(b, prop))
|
|
34
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
35
|
-
}
|
|
36
|
-
return a;
|
|
37
|
-
};
|
|
38
2
|
var dataAttr = (guard) => {
|
|
39
3
|
return guard ? "" : void 0;
|
|
40
4
|
};
|
|
@@ -44,13 +8,12 @@ function getCache() {
|
|
|
44
8
|
return g.__styleCache;
|
|
45
9
|
}
|
|
46
10
|
function getComputedStyle(el) {
|
|
47
|
-
var _a;
|
|
48
11
|
if (!el)
|
|
49
12
|
return {};
|
|
50
13
|
const cache = getCache();
|
|
51
14
|
let style = cache.get(el);
|
|
52
15
|
if (!style) {
|
|
53
|
-
const win = (
|
|
16
|
+
const win = (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
54
17
|
style = win.getComputedStyle(el);
|
|
55
18
|
cache.set(el, style);
|
|
56
19
|
}
|
|
@@ -58,16 +21,15 @@ function getComputedStyle(el) {
|
|
|
58
21
|
}
|
|
59
22
|
var runIfFn = (v, ...a) => {
|
|
60
23
|
const res = typeof v === "function" ? v(...a) : v;
|
|
61
|
-
return res
|
|
24
|
+
return res ?? void 0;
|
|
62
25
|
};
|
|
63
26
|
var isArray = (v) => Array.isArray(v);
|
|
64
27
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
65
28
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
66
29
|
var isDom = () => typeof window !== "undefined";
|
|
67
30
|
function getPlatform() {
|
|
68
|
-
var _a;
|
|
69
31
|
const agent = navigator.userAgentData;
|
|
70
|
-
return (
|
|
32
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
71
33
|
}
|
|
72
34
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
73
35
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -80,20 +42,17 @@ function isWindow(value) {
|
|
|
80
42
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
81
43
|
}
|
|
82
44
|
function getDocument(el) {
|
|
83
|
-
var _a;
|
|
84
45
|
if (isWindow(el))
|
|
85
46
|
return el.document;
|
|
86
47
|
if (isDocument(el))
|
|
87
48
|
return el;
|
|
88
|
-
return (
|
|
49
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
89
50
|
}
|
|
90
51
|
function getWindow(el) {
|
|
91
|
-
|
|
92
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
52
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
93
53
|
}
|
|
94
54
|
function getNodeName(node) {
|
|
95
|
-
|
|
96
|
-
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
55
|
+
return isWindow(node) ? "" : (node == null ? void 0 : node.localName) ?? "";
|
|
97
56
|
}
|
|
98
57
|
function getParent(el) {
|
|
99
58
|
const doc = getDocument(el);
|
|
@@ -104,18 +63,18 @@ function getParent(el) {
|
|
|
104
63
|
function defineDomHelpers(helpers) {
|
|
105
64
|
const dom2 = {
|
|
106
65
|
getRootNode: (ctx) => {
|
|
107
|
-
var _a, _b;
|
|
108
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
109
|
-
},
|
|
110
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
111
|
-
getWin: (ctx) => {
|
|
112
66
|
var _a;
|
|
113
|
-
return (_a =
|
|
67
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
114
68
|
},
|
|
69
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
70
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
115
71
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
116
72
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
117
73
|
};
|
|
118
|
-
return
|
|
74
|
+
return {
|
|
75
|
+
...dom2,
|
|
76
|
+
...helpers
|
|
77
|
+
};
|
|
119
78
|
}
|
|
120
79
|
function isHTMLElement(v) {
|
|
121
80
|
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
@@ -143,8 +102,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
143
102
|
};
|
|
144
103
|
}
|
|
145
104
|
function addPointerEvent(target, event, listener, options) {
|
|
146
|
-
|
|
147
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
105
|
+
const type = getEventName(event) ?? event;
|
|
148
106
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
149
107
|
}
|
|
150
108
|
function wrapHandler(fn, filter = false) {
|
|
@@ -155,8 +113,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
155
113
|
}
|
|
156
114
|
function filterPrimaryPointer(fn) {
|
|
157
115
|
return (event) => {
|
|
158
|
-
|
|
159
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
116
|
+
const win = event.view ?? window;
|
|
160
117
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
161
118
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
162
119
|
if (isPrimary)
|
|
@@ -239,12 +196,12 @@ import { getPlacementStyles } from "@zag-js/popper";
|
|
|
239
196
|
// src/tooltip.dom.ts
|
|
240
197
|
var dom = defineDomHelpers({
|
|
241
198
|
getTriggerId: (ctx) => {
|
|
242
|
-
var _a
|
|
243
|
-
return (
|
|
199
|
+
var _a;
|
|
200
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tooltip:${ctx.id}:trigger`;
|
|
244
201
|
},
|
|
245
202
|
getContentId: (ctx) => {
|
|
246
|
-
var _a
|
|
247
|
-
return (
|
|
203
|
+
var _a;
|
|
204
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tooltip:${ctx.id}:content`;
|
|
248
205
|
},
|
|
249
206
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
250
207
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
@@ -378,224 +335,222 @@ function connect(state, send, normalize) {
|
|
|
378
335
|
}
|
|
379
336
|
|
|
380
337
|
// src/tooltip.machine.ts
|
|
381
|
-
import { createMachine,
|
|
338
|
+
import { createMachine, subscribe } from "@zag-js/core";
|
|
382
339
|
import { getPlacement } from "@zag-js/popper";
|
|
383
340
|
function machine(ctx) {
|
|
384
|
-
return createMachine(
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
computed: {
|
|
400
|
-
hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
|
|
401
|
-
},
|
|
402
|
-
on: {
|
|
403
|
-
OPEN: "open",
|
|
404
|
-
CLOSE: "closed"
|
|
405
|
-
},
|
|
406
|
-
states: {
|
|
407
|
-
unknown: {
|
|
408
|
-
on: {
|
|
409
|
-
SETUP: "closed"
|
|
341
|
+
return createMachine(
|
|
342
|
+
{
|
|
343
|
+
id: "tooltip",
|
|
344
|
+
initial: "unknown",
|
|
345
|
+
context: {
|
|
346
|
+
openDelay: 1e3,
|
|
347
|
+
closeDelay: 500,
|
|
348
|
+
closeOnPointerDown: true,
|
|
349
|
+
closeOnEsc: true,
|
|
350
|
+
interactive: true,
|
|
351
|
+
currentPlacement: void 0,
|
|
352
|
+
...ctx,
|
|
353
|
+
positioning: {
|
|
354
|
+
placement: "bottom",
|
|
355
|
+
...ctx.positioning
|
|
410
356
|
}
|
|
411
357
|
},
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
{
|
|
419
|
-
guard: "noVisibleTooltip",
|
|
420
|
-
target: "opening"
|
|
421
|
-
},
|
|
422
|
-
{ target: "open" }
|
|
423
|
-
]
|
|
424
|
-
}
|
|
358
|
+
computed: {
|
|
359
|
+
hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
|
|
360
|
+
},
|
|
361
|
+
on: {
|
|
362
|
+
OPEN: "open",
|
|
363
|
+
CLOSE: "closed"
|
|
425
364
|
},
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
365
|
+
states: {
|
|
366
|
+
unknown: {
|
|
367
|
+
on: {
|
|
368
|
+
SETUP: "closed"
|
|
369
|
+
}
|
|
431
370
|
},
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
371
|
+
closed: {
|
|
372
|
+
tags: ["closed"],
|
|
373
|
+
entry: ["clearGlobalId", "invokeOnClose"],
|
|
374
|
+
on: {
|
|
375
|
+
FOCUS: "open",
|
|
376
|
+
POINTER_ENTER: [
|
|
377
|
+
{
|
|
378
|
+
guard: "noVisibleTooltip",
|
|
379
|
+
target: "opening"
|
|
380
|
+
},
|
|
381
|
+
{ target: "open" }
|
|
382
|
+
]
|
|
440
383
|
}
|
|
441
|
-
}
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
384
|
+
},
|
|
385
|
+
opening: {
|
|
386
|
+
tags: ["closed"],
|
|
387
|
+
activities: ["trackScroll", "trackPointerlockChange"],
|
|
388
|
+
after: {
|
|
389
|
+
OPEN_DELAY: "open"
|
|
390
|
+
},
|
|
391
|
+
on: {
|
|
392
|
+
POINTER_LEAVE: "closed",
|
|
393
|
+
BLUR: "closed",
|
|
394
|
+
SCROLL: "closed",
|
|
395
|
+
POINTER_LOCK_CHANGE: "closed",
|
|
396
|
+
POINTER_DOWN: {
|
|
397
|
+
guard: "closeOnPointerDown",
|
|
398
|
+
target: "closed"
|
|
399
|
+
}
|
|
400
|
+
}
|
|
401
|
+
},
|
|
402
|
+
open: {
|
|
403
|
+
tags: ["open"],
|
|
404
|
+
activities: [
|
|
405
|
+
"trackEscapeKey",
|
|
406
|
+
"trackDisabledTriggerOnSafari",
|
|
407
|
+
"trackScroll",
|
|
408
|
+
"trackPointerlockChange",
|
|
409
|
+
"computePlacement"
|
|
410
|
+
],
|
|
411
|
+
entry: ["setGlobalId", "invokeOnOpen"],
|
|
412
|
+
on: {
|
|
413
|
+
POINTER_LEAVE: [
|
|
414
|
+
{
|
|
415
|
+
guard: "isVisible",
|
|
416
|
+
target: "closing"
|
|
417
|
+
},
|
|
418
|
+
{ target: "closed" }
|
|
419
|
+
],
|
|
420
|
+
BLUR: "closed",
|
|
421
|
+
ESCAPE: "closed",
|
|
422
|
+
SCROLL: "closed",
|
|
423
|
+
POINTER_LOCK_CHANGE: "closed",
|
|
424
|
+
TOOLTIP_POINTER_LEAVE: {
|
|
425
|
+
guard: "isInteractive",
|
|
457
426
|
target: "closing"
|
|
458
427
|
},
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
|
|
464
|
-
|
|
465
|
-
TOOLTIP_POINTER_LEAVE: {
|
|
466
|
-
guard: "isInteractive",
|
|
467
|
-
target: "closing"
|
|
468
|
-
},
|
|
469
|
-
POINTER_DOWN: {
|
|
470
|
-
guard: "closeOnPointerDown",
|
|
471
|
-
target: "closed"
|
|
472
|
-
},
|
|
473
|
-
CLICK: "closed"
|
|
474
|
-
}
|
|
475
|
-
},
|
|
476
|
-
closing: {
|
|
477
|
-
tags: ["open"],
|
|
478
|
-
activities: ["trackStore", "computePlacement"],
|
|
479
|
-
after: {
|
|
480
|
-
CLOSE_DELAY: "closed"
|
|
428
|
+
POINTER_DOWN: {
|
|
429
|
+
guard: "closeOnPointerDown",
|
|
430
|
+
target: "closed"
|
|
431
|
+
},
|
|
432
|
+
CLICK: "closed"
|
|
433
|
+
}
|
|
481
434
|
},
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
435
|
+
closing: {
|
|
436
|
+
tags: ["open"],
|
|
437
|
+
activities: ["trackStore", "computePlacement"],
|
|
438
|
+
after: {
|
|
439
|
+
CLOSE_DELAY: "closed"
|
|
440
|
+
},
|
|
441
|
+
on: {
|
|
442
|
+
FORCE_CLOSE: "closed",
|
|
443
|
+
POINTER_ENTER: "open",
|
|
444
|
+
TOOLTIP_POINTER_ENTER: {
|
|
445
|
+
guard: "isInteractive",
|
|
446
|
+
target: "open"
|
|
447
|
+
}
|
|
488
448
|
}
|
|
489
449
|
}
|
|
490
450
|
}
|
|
491
|
-
}
|
|
492
|
-
|
|
493
|
-
|
|
494
|
-
|
|
495
|
-
|
|
496
|
-
|
|
497
|
-
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
|
|
451
|
+
},
|
|
452
|
+
{
|
|
453
|
+
activities: {
|
|
454
|
+
computePlacement(ctx2) {
|
|
455
|
+
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
456
|
+
let cleanup;
|
|
457
|
+
raf(() => {
|
|
458
|
+
cleanup = getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
|
|
459
|
+
...ctx2.positioning,
|
|
460
|
+
onComplete(data) {
|
|
461
|
+
ctx2.currentPlacement = data.placement;
|
|
462
|
+
ctx2.isPlacementComplete = true;
|
|
463
|
+
},
|
|
464
|
+
onCleanup() {
|
|
465
|
+
ctx2.currentPlacement = void 0;
|
|
466
|
+
ctx2.isPlacementComplete = false;
|
|
467
|
+
}
|
|
468
|
+
});
|
|
469
|
+
});
|
|
470
|
+
return cleanup;
|
|
471
|
+
},
|
|
472
|
+
trackPointerlockChange(ctx2, _evt, { send }) {
|
|
473
|
+
return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
|
|
474
|
+
send("POINTER_LOCK_CHANGE");
|
|
475
|
+
});
|
|
476
|
+
},
|
|
477
|
+
trackScroll(ctx2, _evt, { send }) {
|
|
478
|
+
const trigger = dom.getTriggerEl(ctx2);
|
|
479
|
+
if (!trigger)
|
|
480
|
+
return;
|
|
481
|
+
const cleanups = getScrollParents(trigger).map((el) => {
|
|
482
|
+
const opts = { passive: true, capture: true };
|
|
483
|
+
return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
484
|
+
});
|
|
485
|
+
return () => {
|
|
486
|
+
cleanups.forEach((fn) => fn == null ? void 0 : fn());
|
|
487
|
+
};
|
|
488
|
+
},
|
|
489
|
+
trackStore(ctx2, _evt, { send }) {
|
|
490
|
+
return subscribe(store, () => {
|
|
491
|
+
if (store.id !== ctx2.id) {
|
|
492
|
+
send("FORCE_CLOSE");
|
|
506
493
|
}
|
|
507
|
-
})
|
|
508
|
-
}
|
|
509
|
-
|
|
510
|
-
|
|
511
|
-
|
|
512
|
-
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
523
|
-
});
|
|
524
|
-
return () => {
|
|
525
|
-
cleanups.forEach((fn) => fn == null ? void 0 : fn());
|
|
526
|
-
};
|
|
527
|
-
},
|
|
528
|
-
trackStore(ctx2, _evt, { send }) {
|
|
529
|
-
return subscribe(store, () => {
|
|
530
|
-
if (store.id !== ctx2.id) {
|
|
531
|
-
send("FORCE_CLOSE");
|
|
532
|
-
}
|
|
533
|
-
});
|
|
534
|
-
},
|
|
535
|
-
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
536
|
-
if (!isSafari())
|
|
537
|
-
return;
|
|
538
|
-
const doc = dom.getDoc(ctx2);
|
|
539
|
-
return addPointerEvent(doc, "pointermove", (event) => {
|
|
540
|
-
const selector = "[data-part=trigger][data-expanded]";
|
|
541
|
-
if (isHTMLElement(event.target) && event.target.closest(selector))
|
|
494
|
+
});
|
|
495
|
+
},
|
|
496
|
+
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
497
|
+
if (!isSafari())
|
|
498
|
+
return;
|
|
499
|
+
const doc = dom.getDoc(ctx2);
|
|
500
|
+
return addPointerEvent(doc, "pointermove", (event) => {
|
|
501
|
+
const selector = "[data-part=trigger][data-expanded]";
|
|
502
|
+
if (isHTMLElement(event.target) && event.target.closest(selector))
|
|
503
|
+
return;
|
|
504
|
+
send("POINTER_LEAVE");
|
|
505
|
+
});
|
|
506
|
+
},
|
|
507
|
+
trackEscapeKey(ctx2, _evt, { send }) {
|
|
508
|
+
if (!ctx2.closeOnEsc)
|
|
542
509
|
return;
|
|
543
|
-
|
|
544
|
-
|
|
510
|
+
const doc = dom.getDoc(ctx2);
|
|
511
|
+
return addDomEvent(doc, "keydown", (event) => {
|
|
512
|
+
if (event.key === "Escape") {
|
|
513
|
+
send("ESCAPE");
|
|
514
|
+
}
|
|
515
|
+
});
|
|
516
|
+
}
|
|
545
517
|
},
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
if (
|
|
552
|
-
|
|
518
|
+
actions: {
|
|
519
|
+
setGlobalId(ctx2) {
|
|
520
|
+
store.setId(ctx2.id);
|
|
521
|
+
},
|
|
522
|
+
clearGlobalId(ctx2) {
|
|
523
|
+
if (ctx2.id === store.id) {
|
|
524
|
+
store.setId(null);
|
|
525
|
+
}
|
|
526
|
+
},
|
|
527
|
+
invokeOnOpen(ctx2, evt) {
|
|
528
|
+
var _a;
|
|
529
|
+
const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
|
|
530
|
+
if (!omit.includes(evt.type)) {
|
|
531
|
+
(_a = ctx2.onOpen) == null ? void 0 : _a.call(ctx2);
|
|
532
|
+
}
|
|
533
|
+
},
|
|
534
|
+
invokeOnClose(ctx2, evt) {
|
|
535
|
+
var _a;
|
|
536
|
+
const omit = ["SETUP"];
|
|
537
|
+
if (!omit.includes(evt.type)) {
|
|
538
|
+
(_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
|
|
553
539
|
}
|
|
554
|
-
});
|
|
555
|
-
}
|
|
556
|
-
},
|
|
557
|
-
actions: {
|
|
558
|
-
setupDocument(ctx2, evt) {
|
|
559
|
-
ctx2.id = evt.id;
|
|
560
|
-
if (evt.doc)
|
|
561
|
-
ctx2.doc = ref(evt.doc);
|
|
562
|
-
if (evt.root)
|
|
563
|
-
ctx2.rootNode = ref(evt.root);
|
|
564
|
-
},
|
|
565
|
-
setGlobalId(ctx2) {
|
|
566
|
-
store.setId(ctx2.id);
|
|
567
|
-
},
|
|
568
|
-
clearGlobalId(ctx2) {
|
|
569
|
-
if (ctx2.id === store.id) {
|
|
570
|
-
store.setId(null);
|
|
571
540
|
}
|
|
572
541
|
},
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
|
|
578
|
-
}
|
|
542
|
+
guards: {
|
|
543
|
+
closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
|
|
544
|
+
noVisibleTooltip: () => store.id === null,
|
|
545
|
+
isVisible: (ctx2) => ctx2.id === store.id,
|
|
546
|
+
isInteractive: (ctx2) => ctx2.interactive
|
|
579
547
|
},
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
if (!omit.includes(evt.type)) {
|
|
584
|
-
(_a = ctx2.onClose) == null ? void 0 : _a.call(ctx2);
|
|
585
|
-
}
|
|
548
|
+
delays: {
|
|
549
|
+
OPEN_DELAY: (ctx2) => ctx2.openDelay,
|
|
550
|
+
CLOSE_DELAY: (ctx2) => ctx2.closeDelay
|
|
586
551
|
}
|
|
587
|
-
},
|
|
588
|
-
guards: {
|
|
589
|
-
closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
|
|
590
|
-
noVisibleTooltip: () => store.id === null,
|
|
591
|
-
isVisible: (ctx2) => ctx2.id === store.id,
|
|
592
|
-
isInteractive: (ctx2) => ctx2.interactive
|
|
593
|
-
},
|
|
594
|
-
delays: {
|
|
595
|
-
OPEN_DELAY: (ctx2) => ctx2.openDelay,
|
|
596
|
-
CLOSE_DELAY: (ctx2) => ctx2.closeDelay
|
|
597
552
|
}
|
|
598
|
-
|
|
553
|
+
);
|
|
599
554
|
}
|
|
600
555
|
export {
|
|
601
556
|
connect,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/tooltip",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.13",
|
|
4
4
|
"description": "Core logic for the tooltip widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -29,21 +29,22 @@
|
|
|
29
29
|
"url": "https://github.com/chakra-ui/zag/issues"
|
|
30
30
|
},
|
|
31
31
|
"dependencies": {
|
|
32
|
-
"@zag-js/core": "0.1.
|
|
33
|
-
"@zag-js/popper": "0.1.
|
|
34
|
-
"@zag-js/types": "0.2.
|
|
32
|
+
"@zag-js/core": "0.1.9",
|
|
33
|
+
"@zag-js/popper": "0.1.10",
|
|
34
|
+
"@zag-js/types": "0.2.4"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zag-js/dom-utils": "0.1.
|
|
38
|
-
"@zag-js/utils": "0.1.
|
|
37
|
+
"@zag-js/dom-utils": "0.1.10",
|
|
38
|
+
"@zag-js/utils": "0.1.3"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
|
-
"build
|
|
42
|
-
"start": "
|
|
43
|
-
"build": "
|
|
41
|
+
"build-fast": "tsup src/index.ts --format=esm,cjs",
|
|
42
|
+
"start": "pnpm build --watch",
|
|
43
|
+
"build": "tsup src/index.ts --format=esm,cjs --dts",
|
|
44
44
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
45
45
|
"lint": "eslint src --ext .ts,.tsx",
|
|
46
|
-
"test
|
|
47
|
-
"test
|
|
46
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
47
|
+
"test-watch": "pnpm test --watch -u",
|
|
48
|
+
"typecheck": "tsc --noEmit"
|
|
48
49
|
}
|
|
49
|
-
}
|
|
50
|
+
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import type { NormalizeProps, PropTypes } from "@zag-js/types";
|
|
2
|
-
import type { Send, State } from "./tooltip.types";
|
|
3
|
-
export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
4
|
-
isOpen: boolean;
|
|
5
|
-
open(): void;
|
|
6
|
-
close(): void;
|
|
7
|
-
getAnimationState(): {
|
|
8
|
-
enter: boolean;
|
|
9
|
-
exit: boolean;
|
|
10
|
-
};
|
|
11
|
-
triggerProps: T["button"];
|
|
12
|
-
arrowProps: T["element"];
|
|
13
|
-
innerArrowProps: T["element"];
|
|
14
|
-
positionerProps: T["element"];
|
|
15
|
-
contentProps: T["element"];
|
|
16
|
-
labelProps: T["element"];
|
|
17
|
-
createPortal(): HTMLElement;
|
|
18
|
-
};
|
package/dist/tooltip.dom.d.ts
DELETED
|
@@ -1,31 +0,0 @@
|
|
|
1
|
-
import type { MachineContext as Ctx } from "./tooltip.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getRootNode: (ctx: {
|
|
4
|
-
getRootNode?: () => Document | Node | ShadowRoot;
|
|
5
|
-
}) => Document | ShadowRoot;
|
|
6
|
-
getDoc: (ctx: {
|
|
7
|
-
getRootNode?: () => Document | Node | ShadowRoot;
|
|
8
|
-
}) => Document;
|
|
9
|
-
getWin: (ctx: {
|
|
10
|
-
getRootNode?: () => Document | Node | ShadowRoot;
|
|
11
|
-
}) => Window & typeof globalThis;
|
|
12
|
-
getActiveElement: (ctx: {
|
|
13
|
-
getRootNode?: () => Document | Node | ShadowRoot;
|
|
14
|
-
}) => HTMLElement;
|
|
15
|
-
getById: <T_1 = HTMLElement>(ctx: {
|
|
16
|
-
getRootNode?: () => Document | Node | ShadowRoot;
|
|
17
|
-
}, id: string) => T_1;
|
|
18
|
-
} & {
|
|
19
|
-
getTriggerId: (ctx: Ctx) => string;
|
|
20
|
-
getContentId: (ctx: Ctx) => string;
|
|
21
|
-
getArrowId: (ctx: Ctx) => string;
|
|
22
|
-
getPositionerId: (ctx: Ctx) => string;
|
|
23
|
-
portalId: string;
|
|
24
|
-
getTriggerEl: (ctx: Ctx) => HTMLElement;
|
|
25
|
-
getContentEl: (ctx: Ctx) => HTMLElement;
|
|
26
|
-
getPositionerEl: (ctx: Ctx) => HTMLElement;
|
|
27
|
-
getArrowEl: (ctx: Ctx) => HTMLElement;
|
|
28
|
-
getScrollParent: (ctx: Ctx) => HTMLElement;
|
|
29
|
-
getPortalEl: (ctx: Ctx) => HTMLElement;
|
|
30
|
-
createPortalEl: (ctx: Ctx) => HTMLElement;
|
|
31
|
-
};
|