@zag-js/tooltip 0.1.10 → 0.1.11
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 +35 -75
- package/dist/index.mjs +31 -79
- 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/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2021 Chakra UI
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,93 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { RequiredBy, CommonProperties, RootProperties, PropTypes, NormalizeProps } from '@zag-js/types';
|
|
2
|
+
import * as _zag_js_core from '@zag-js/core';
|
|
3
|
+
import { StateMachine } from '@zag-js/core';
|
|
4
|
+
import { PositioningOptions } from '@zag-js/popper';
|
|
5
|
+
|
|
6
|
+
declare type ElementIds = Partial<{
|
|
7
|
+
trigger: string;
|
|
8
|
+
content: string;
|
|
9
|
+
}>;
|
|
10
|
+
declare type PublicContext = CommonProperties & {
|
|
11
|
+
/**
|
|
12
|
+
* The ids of the elements in the tooltip. Useful for composition.
|
|
13
|
+
*/
|
|
14
|
+
ids?: ElementIds;
|
|
15
|
+
/**
|
|
16
|
+
* The `id` of the tooltip.
|
|
17
|
+
*/
|
|
18
|
+
id: string;
|
|
19
|
+
/**
|
|
20
|
+
* The open delay of the tooltip.
|
|
21
|
+
*/
|
|
22
|
+
openDelay: number;
|
|
23
|
+
/**
|
|
24
|
+
* The close delay of the tooltip.
|
|
25
|
+
*/
|
|
26
|
+
closeDelay: number;
|
|
27
|
+
/**
|
|
28
|
+
* Whether to close the tooltip on pointerdown.
|
|
29
|
+
*/
|
|
30
|
+
closeOnPointerDown: boolean;
|
|
31
|
+
/**
|
|
32
|
+
* Whether to close the tooltip when the Escape key is pressed.
|
|
33
|
+
*/
|
|
34
|
+
closeOnEsc?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Whether the tooltip's content is interactive.
|
|
37
|
+
* In this mode, the tooltip will remain open when user hovers over the content.
|
|
38
|
+
* @see https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus
|
|
39
|
+
*/
|
|
40
|
+
interactive: boolean;
|
|
41
|
+
/**
|
|
42
|
+
* Function called when the tooltip is opened.
|
|
43
|
+
*/
|
|
44
|
+
onOpen?: VoidFunction;
|
|
45
|
+
/**
|
|
46
|
+
* Function called when the tooltip is closed.
|
|
47
|
+
*/
|
|
48
|
+
onClose?: VoidFunction;
|
|
49
|
+
/**
|
|
50
|
+
* Custom label for the tooltip.
|
|
51
|
+
*/
|
|
52
|
+
"aria-label"?: string;
|
|
53
|
+
/**
|
|
54
|
+
* The user provided options used to position the popover content
|
|
55
|
+
*/
|
|
56
|
+
positioning: PositioningOptions;
|
|
57
|
+
};
|
|
58
|
+
declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
59
|
+
declare type ComputedContext = Readonly<{
|
|
60
|
+
/**
|
|
61
|
+
* @computed Whether an `aria-label` is set.
|
|
62
|
+
*/
|
|
63
|
+
readonly hasAriaLabel: boolean;
|
|
64
|
+
}>;
|
|
65
|
+
declare type PrivateContext = RootProperties & {};
|
|
66
|
+
declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
67
|
+
declare type MachineState = {
|
|
68
|
+
value: "unknown" | "opening" | "open" | "closing" | "closed";
|
|
69
|
+
tags: "open" | "closed";
|
|
70
|
+
};
|
|
71
|
+
declare type State = StateMachine.State<MachineContext, MachineState>;
|
|
72
|
+
declare type Send = StateMachine.Send<StateMachine.AnyEventObject>;
|
|
73
|
+
|
|
74
|
+
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
75
|
+
isOpen: boolean;
|
|
76
|
+
open(): void;
|
|
77
|
+
close(): void;
|
|
78
|
+
getAnimationState(): {
|
|
79
|
+
enter: boolean;
|
|
80
|
+
exit: boolean;
|
|
81
|
+
};
|
|
82
|
+
triggerProps: T["button"];
|
|
83
|
+
arrowProps: T["element"];
|
|
84
|
+
innerArrowProps: T["element"];
|
|
85
|
+
positionerProps: T["element"];
|
|
86
|
+
contentProps: T["element"];
|
|
87
|
+
labelProps: T["element"];
|
|
88
|
+
createPortal(): HTMLElement;
|
|
89
|
+
};
|
|
90
|
+
|
|
91
|
+
declare function machine(ctx: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
92
|
+
|
|
93
|
+
export { UserDefinedContext as Context, connect, machine };
|
package/dist/index.js
CHANGED
|
@@ -1,25 +1,8 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
6
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
7
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
-
var __spreadValues = (a, b) => {
|
|
12
|
-
for (var prop in b || (b = {}))
|
|
13
|
-
if (__hasOwnProp.call(b, prop))
|
|
14
|
-
__defNormalProp(a, prop, b[prop]);
|
|
15
|
-
if (__getOwnPropSymbols)
|
|
16
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
-
if (__propIsEnum.call(b, prop))
|
|
18
|
-
__defNormalProp(a, prop, b[prop]);
|
|
19
|
-
}
|
|
20
|
-
return a;
|
|
21
|
-
};
|
|
22
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
6
|
var __export = (target, all) => {
|
|
24
7
|
for (var name in all)
|
|
25
8
|
__defProp(target, name, { get: all[name], enumerable: true });
|
|
@@ -43,22 +26,6 @@ __export(src_exports, {
|
|
|
43
26
|
module.exports = __toCommonJS(src_exports);
|
|
44
27
|
|
|
45
28
|
// ../../utilities/dom/dist/index.mjs
|
|
46
|
-
var __defProp2 = Object.defineProperty;
|
|
47
|
-
var __getOwnPropSymbols2 = Object.getOwnPropertySymbols;
|
|
48
|
-
var __hasOwnProp2 = Object.prototype.hasOwnProperty;
|
|
49
|
-
var __propIsEnum2 = Object.prototype.propertyIsEnumerable;
|
|
50
|
-
var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
51
|
-
var __spreadValues2 = (a, b) => {
|
|
52
|
-
for (var prop in b || (b = {}))
|
|
53
|
-
if (__hasOwnProp2.call(b, prop))
|
|
54
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
55
|
-
if (__getOwnPropSymbols2)
|
|
56
|
-
for (var prop of __getOwnPropSymbols2(b)) {
|
|
57
|
-
if (__propIsEnum2.call(b, prop))
|
|
58
|
-
__defNormalProp2(a, prop, b[prop]);
|
|
59
|
-
}
|
|
60
|
-
return a;
|
|
61
|
-
};
|
|
62
29
|
var dataAttr = (guard) => {
|
|
63
30
|
return guard ? "" : void 0;
|
|
64
31
|
};
|
|
@@ -68,13 +35,12 @@ function getCache() {
|
|
|
68
35
|
return g.__styleCache;
|
|
69
36
|
}
|
|
70
37
|
function getComputedStyle(el) {
|
|
71
|
-
var _a;
|
|
72
38
|
if (!el)
|
|
73
39
|
return {};
|
|
74
40
|
const cache = getCache();
|
|
75
41
|
let style = cache.get(el);
|
|
76
42
|
if (!style) {
|
|
77
|
-
const win = (
|
|
43
|
+
const win = (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
78
44
|
style = win.getComputedStyle(el);
|
|
79
45
|
cache.set(el, style);
|
|
80
46
|
}
|
|
@@ -82,16 +48,15 @@ function getComputedStyle(el) {
|
|
|
82
48
|
}
|
|
83
49
|
var runIfFn = (v, ...a) => {
|
|
84
50
|
const res = typeof v === "function" ? v(...a) : v;
|
|
85
|
-
return res
|
|
51
|
+
return res ?? void 0;
|
|
86
52
|
};
|
|
87
53
|
var isArray = (v) => Array.isArray(v);
|
|
88
54
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
89
55
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
90
56
|
var isDom = () => typeof window !== "undefined";
|
|
91
57
|
function getPlatform() {
|
|
92
|
-
var _a;
|
|
93
58
|
const agent = navigator.userAgentData;
|
|
94
|
-
return (
|
|
59
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
95
60
|
}
|
|
96
61
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
97
62
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -104,20 +69,17 @@ function isWindow(value) {
|
|
|
104
69
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
105
70
|
}
|
|
106
71
|
function getDocument(el) {
|
|
107
|
-
var _a;
|
|
108
72
|
if (isWindow(el))
|
|
109
73
|
return el.document;
|
|
110
74
|
if (isDocument(el))
|
|
111
75
|
return el;
|
|
112
|
-
return (
|
|
76
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
113
77
|
}
|
|
114
78
|
function getWindow(el) {
|
|
115
|
-
|
|
116
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
79
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
117
80
|
}
|
|
118
81
|
function getNodeName(node) {
|
|
119
|
-
|
|
120
|
-
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
82
|
+
return isWindow(node) ? "" : (node == null ? void 0 : node.localName) ?? "";
|
|
121
83
|
}
|
|
122
84
|
function getParent(el) {
|
|
123
85
|
const doc = getDocument(el);
|
|
@@ -128,18 +90,18 @@ function getParent(el) {
|
|
|
128
90
|
function defineDomHelpers(helpers) {
|
|
129
91
|
const dom2 = {
|
|
130
92
|
getRootNode: (ctx) => {
|
|
131
|
-
var _a, _b;
|
|
132
|
-
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
133
|
-
},
|
|
134
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
135
|
-
getWin: (ctx) => {
|
|
136
93
|
var _a;
|
|
137
|
-
return (_a =
|
|
94
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
138
95
|
},
|
|
96
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
97
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
139
98
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
140
99
|
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
141
100
|
};
|
|
142
|
-
return
|
|
101
|
+
return {
|
|
102
|
+
...dom2,
|
|
103
|
+
...helpers
|
|
104
|
+
};
|
|
143
105
|
}
|
|
144
106
|
function isHTMLElement(v) {
|
|
145
107
|
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
@@ -167,8 +129,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
167
129
|
};
|
|
168
130
|
}
|
|
169
131
|
function addPointerEvent(target, event, listener, options) {
|
|
170
|
-
|
|
171
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
132
|
+
const type = getEventName(event) ?? event;
|
|
172
133
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
173
134
|
}
|
|
174
135
|
function wrapHandler(fn, filter = false) {
|
|
@@ -179,8 +140,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
179
140
|
}
|
|
180
141
|
function filterPrimaryPointer(fn) {
|
|
181
142
|
return (event) => {
|
|
182
|
-
|
|
183
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
143
|
+
const win = event.view ?? window;
|
|
184
144
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
185
145
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
186
146
|
if (isPrimary)
|
|
@@ -263,12 +223,12 @@ var import_popper = require("@zag-js/popper");
|
|
|
263
223
|
// src/tooltip.dom.ts
|
|
264
224
|
var dom = defineDomHelpers({
|
|
265
225
|
getTriggerId: (ctx) => {
|
|
266
|
-
var _a
|
|
267
|
-
return (
|
|
226
|
+
var _a;
|
|
227
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tooltip:${ctx.id}:trigger`;
|
|
268
228
|
},
|
|
269
229
|
getContentId: (ctx) => {
|
|
270
|
-
var _a
|
|
271
|
-
return (
|
|
230
|
+
var _a;
|
|
231
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tooltip:${ctx.id}:content`;
|
|
272
232
|
},
|
|
273
233
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
274
234
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
@@ -408,18 +368,19 @@ function machine(ctx) {
|
|
|
408
368
|
return (0, import_core2.createMachine)({
|
|
409
369
|
id: "tooltip",
|
|
410
370
|
initial: "unknown",
|
|
411
|
-
context:
|
|
371
|
+
context: {
|
|
412
372
|
openDelay: 1e3,
|
|
413
373
|
closeDelay: 500,
|
|
414
374
|
closeOnPointerDown: true,
|
|
415
375
|
closeOnEsc: true,
|
|
416
376
|
interactive: true,
|
|
417
|
-
currentPlacement: void 0
|
|
418
|
-
|
|
419
|
-
positioning:
|
|
420
|
-
placement: "bottom"
|
|
421
|
-
|
|
422
|
-
|
|
377
|
+
currentPlacement: void 0,
|
|
378
|
+
...ctx,
|
|
379
|
+
positioning: {
|
|
380
|
+
placement: "bottom",
|
|
381
|
+
...ctx.positioning
|
|
382
|
+
}
|
|
383
|
+
},
|
|
423
384
|
computed: {
|
|
424
385
|
hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
|
|
425
386
|
},
|
|
@@ -519,7 +480,8 @@ function machine(ctx) {
|
|
|
519
480
|
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
520
481
|
let cleanup;
|
|
521
482
|
raf(() => {
|
|
522
|
-
cleanup = (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2),
|
|
483
|
+
cleanup = (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
|
|
484
|
+
...ctx2.positioning,
|
|
523
485
|
onComplete(data) {
|
|
524
486
|
ctx2.currentPlacement = data.placement;
|
|
525
487
|
ctx2.isPlacementComplete = true;
|
|
@@ -528,7 +490,7 @@ function machine(ctx) {
|
|
|
528
490
|
ctx2.currentPlacement = void 0;
|
|
529
491
|
ctx2.isPlacementComplete = false;
|
|
530
492
|
}
|
|
531
|
-
})
|
|
493
|
+
});
|
|
532
494
|
});
|
|
533
495
|
return cleanup;
|
|
534
496
|
},
|
|
@@ -579,13 +541,6 @@ function machine(ctx) {
|
|
|
579
541
|
}
|
|
580
542
|
},
|
|
581
543
|
actions: {
|
|
582
|
-
setupDocument(ctx2, evt) {
|
|
583
|
-
ctx2.id = evt.id;
|
|
584
|
-
if (evt.doc)
|
|
585
|
-
ctx2.doc = (0, import_core2.ref)(evt.doc);
|
|
586
|
-
if (evt.root)
|
|
587
|
-
ctx2.rootNode = (0, import_core2.ref)(evt.root);
|
|
588
|
-
},
|
|
589
544
|
setGlobalId(ctx2) {
|
|
590
545
|
store.setId(ctx2.id);
|
|
591
546
|
},
|
|
@@ -621,3 +576,8 @@ function machine(ctx) {
|
|
|
621
576
|
}
|
|
622
577
|
});
|
|
623
578
|
}
|
|
579
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
580
|
+
0 && (module.exports = {
|
|
581
|
+
connect,
|
|
582
|
+
machine
|
|
583
|
+
});
|
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,24 +335,25 @@ 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
341
|
return createMachine({
|
|
385
342
|
id: "tooltip",
|
|
386
343
|
initial: "unknown",
|
|
387
|
-
context:
|
|
344
|
+
context: {
|
|
388
345
|
openDelay: 1e3,
|
|
389
346
|
closeDelay: 500,
|
|
390
347
|
closeOnPointerDown: true,
|
|
391
348
|
closeOnEsc: true,
|
|
392
349
|
interactive: true,
|
|
393
|
-
currentPlacement: void 0
|
|
394
|
-
|
|
395
|
-
positioning:
|
|
396
|
-
placement: "bottom"
|
|
397
|
-
|
|
398
|
-
|
|
350
|
+
currentPlacement: void 0,
|
|
351
|
+
...ctx,
|
|
352
|
+
positioning: {
|
|
353
|
+
placement: "bottom",
|
|
354
|
+
...ctx.positioning
|
|
355
|
+
}
|
|
356
|
+
},
|
|
399
357
|
computed: {
|
|
400
358
|
hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
|
|
401
359
|
},
|
|
@@ -495,7 +453,8 @@ function machine(ctx) {
|
|
|
495
453
|
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
496
454
|
let cleanup;
|
|
497
455
|
raf(() => {
|
|
498
|
-
cleanup = getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2),
|
|
456
|
+
cleanup = getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
|
|
457
|
+
...ctx2.positioning,
|
|
499
458
|
onComplete(data) {
|
|
500
459
|
ctx2.currentPlacement = data.placement;
|
|
501
460
|
ctx2.isPlacementComplete = true;
|
|
@@ -504,7 +463,7 @@ function machine(ctx) {
|
|
|
504
463
|
ctx2.currentPlacement = void 0;
|
|
505
464
|
ctx2.isPlacementComplete = false;
|
|
506
465
|
}
|
|
507
|
-
})
|
|
466
|
+
});
|
|
508
467
|
});
|
|
509
468
|
return cleanup;
|
|
510
469
|
},
|
|
@@ -555,13 +514,6 @@ function machine(ctx) {
|
|
|
555
514
|
}
|
|
556
515
|
},
|
|
557
516
|
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
517
|
setGlobalId(ctx2) {
|
|
566
518
|
store.setId(ctx2.id);
|
|
567
519
|
},
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/tooltip",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.11",
|
|
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.9",
|
|
34
|
+
"@zag-js/types": "0.2.3"
|
|
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.8",
|
|
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
|
-
};
|
package/dist/tooltip.store.d.ts
DELETED
package/dist/tooltip.types.d.ts
DELETED
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import type { StateMachine as S } from "@zag-js/core";
|
|
2
|
-
import type { Placement, PositioningOptions } from "@zag-js/popper";
|
|
3
|
-
import type { CommonProperties, RequiredBy, RootProperties } from "@zag-js/types";
|
|
4
|
-
declare type ElementIds = Partial<{
|
|
5
|
-
trigger: string;
|
|
6
|
-
content: string;
|
|
7
|
-
}>;
|
|
8
|
-
declare type PublicContext = CommonProperties & {
|
|
9
|
-
/**
|
|
10
|
-
* The ids of the elements in the tooltip. Useful for composition.
|
|
11
|
-
*/
|
|
12
|
-
ids?: ElementIds;
|
|
13
|
-
/**
|
|
14
|
-
* The `id` of the tooltip.
|
|
15
|
-
*/
|
|
16
|
-
id: string;
|
|
17
|
-
/**
|
|
18
|
-
* The open delay of the tooltip.
|
|
19
|
-
*/
|
|
20
|
-
openDelay: number;
|
|
21
|
-
/**
|
|
22
|
-
* The close delay of the tooltip.
|
|
23
|
-
*/
|
|
24
|
-
closeDelay: number;
|
|
25
|
-
/**
|
|
26
|
-
* Whether to close the tooltip on pointerdown.
|
|
27
|
-
*/
|
|
28
|
-
closeOnPointerDown: boolean;
|
|
29
|
-
/**
|
|
30
|
-
* Whether to close the tooltip when the Escape key is pressed.
|
|
31
|
-
*/
|
|
32
|
-
closeOnEsc?: boolean;
|
|
33
|
-
/**
|
|
34
|
-
* Whether the tooltip's content is interactive.
|
|
35
|
-
* In this mode, the tooltip will remain open when user hovers over the content.
|
|
36
|
-
* @see https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus
|
|
37
|
-
*/
|
|
38
|
-
interactive: boolean;
|
|
39
|
-
/**
|
|
40
|
-
* Function called when the tooltip is opened.
|
|
41
|
-
*/
|
|
42
|
-
onOpen?: VoidFunction;
|
|
43
|
-
/**
|
|
44
|
-
* Function called when the tooltip is closed.
|
|
45
|
-
*/
|
|
46
|
-
onClose?: VoidFunction;
|
|
47
|
-
/**
|
|
48
|
-
* Custom label for the tooltip.
|
|
49
|
-
*/
|
|
50
|
-
"aria-label"?: string;
|
|
51
|
-
/**
|
|
52
|
-
* The user provided options used to position the popover content
|
|
53
|
-
*/
|
|
54
|
-
positioning: PositioningOptions;
|
|
55
|
-
};
|
|
56
|
-
export declare type UserDefinedContext = RequiredBy<PublicContext, "id">;
|
|
57
|
-
declare type ComputedContext = Readonly<{
|
|
58
|
-
/**
|
|
59
|
-
* @computed Whether an `aria-label` is set.
|
|
60
|
-
*/
|
|
61
|
-
readonly hasAriaLabel: boolean;
|
|
62
|
-
}>;
|
|
63
|
-
declare type PrivateContext = RootProperties & {
|
|
64
|
-
/**
|
|
65
|
-
* @internal
|
|
66
|
-
* The computed placement of the tooltip.
|
|
67
|
-
*/
|
|
68
|
-
currentPlacement?: Placement;
|
|
69
|
-
/**
|
|
70
|
-
* @internal
|
|
71
|
-
* Whether the dynamic placement has been computed
|
|
72
|
-
*/
|
|
73
|
-
isPlacementComplete?: boolean;
|
|
74
|
-
};
|
|
75
|
-
export declare type MachineContext = PublicContext & ComputedContext & PrivateContext;
|
|
76
|
-
export declare type MachineState = {
|
|
77
|
-
value: "unknown" | "opening" | "open" | "closing" | "closed";
|
|
78
|
-
tags: "open" | "closed";
|
|
79
|
-
};
|
|
80
|
-
export declare type State = S.State<MachineContext, MachineState>;
|
|
81
|
-
export declare type Send = S.Send<S.AnyEventObject>;
|
|
82
|
-
export {};
|