@zag-js/tooltip 0.1.16 → 0.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -1
- package/dist/index.js +59 -17
- package/dist/index.mjs +59 -17
- package/package.json +6 -6
package/dist/index.d.ts
CHANGED
|
@@ -92,6 +92,6 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
92
92
|
createPortal(): HTMLElement;
|
|
93
93
|
};
|
|
94
94
|
|
|
95
|
-
declare function machine(
|
|
95
|
+
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
96
96
|
|
|
97
97
|
export { UserDefinedContext as Context, connect, machine };
|
package/dist/index.js
CHANGED
|
@@ -35,12 +35,13 @@ function getCache() {
|
|
|
35
35
|
return g.__styleCache;
|
|
36
36
|
}
|
|
37
37
|
function getComputedStyle(el) {
|
|
38
|
+
var _a;
|
|
38
39
|
if (!el)
|
|
39
40
|
return {};
|
|
40
41
|
const cache = getCache();
|
|
41
42
|
let style = cache.get(el);
|
|
42
43
|
if (!style) {
|
|
43
|
-
const win = (el == null ? void 0 : el.ownerDocument.defaultView)
|
|
44
|
+
const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
44
45
|
style = win.getComputedStyle(el);
|
|
45
46
|
cache.set(el, style);
|
|
46
47
|
}
|
|
@@ -48,15 +49,16 @@ function getComputedStyle(el) {
|
|
|
48
49
|
}
|
|
49
50
|
var runIfFn = (v, ...a) => {
|
|
50
51
|
const res = typeof v === "function" ? v(...a) : v;
|
|
51
|
-
return res
|
|
52
|
+
return res != null ? res : void 0;
|
|
52
53
|
};
|
|
53
54
|
var isArray = (v) => Array.isArray(v);
|
|
54
55
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
55
56
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
56
57
|
var isDom = () => typeof window !== "undefined";
|
|
57
58
|
function getPlatform() {
|
|
59
|
+
var _a;
|
|
58
60
|
const agent = navigator.userAgentData;
|
|
59
|
-
return (agent == null ? void 0 : agent.platform)
|
|
61
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
60
62
|
}
|
|
61
63
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
62
64
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -69,17 +71,20 @@ function isWindow(value) {
|
|
|
69
71
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
70
72
|
}
|
|
71
73
|
function getDocument(el) {
|
|
74
|
+
var _a;
|
|
72
75
|
if (isWindow(el))
|
|
73
76
|
return el.document;
|
|
74
77
|
if (isDocument(el))
|
|
75
78
|
return el;
|
|
76
|
-
return (el == null ? void 0 : el.ownerDocument)
|
|
79
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
77
80
|
}
|
|
78
81
|
function getWindow(el) {
|
|
79
|
-
|
|
82
|
+
var _a;
|
|
83
|
+
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
80
84
|
}
|
|
81
85
|
function getNodeName(node) {
|
|
82
|
-
|
|
86
|
+
var _a;
|
|
87
|
+
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
83
88
|
}
|
|
84
89
|
function getParent(el) {
|
|
85
90
|
const doc = getDocument(el);
|
|
@@ -90,13 +95,34 @@ function getParent(el) {
|
|
|
90
95
|
function defineDomHelpers(helpers) {
|
|
91
96
|
const dom2 = {
|
|
92
97
|
getRootNode: (ctx) => {
|
|
93
|
-
var _a;
|
|
94
|
-
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx))
|
|
98
|
+
var _a, _b;
|
|
99
|
+
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
95
100
|
},
|
|
96
101
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
97
|
-
getWin: (ctx) =>
|
|
102
|
+
getWin: (ctx) => {
|
|
103
|
+
var _a;
|
|
104
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
105
|
+
},
|
|
98
106
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
99
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
107
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
108
|
+
createEmitter: (ctx, target) => {
|
|
109
|
+
const win = dom2.getWin(ctx);
|
|
110
|
+
return function emit(evt, detail, options) {
|
|
111
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
112
|
+
const eventName = `zag:${evt}`;
|
|
113
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
114
|
+
const event = new win.CustomEvent(eventName, init);
|
|
115
|
+
target.dispatchEvent(event);
|
|
116
|
+
};
|
|
117
|
+
},
|
|
118
|
+
createListener: (target) => {
|
|
119
|
+
return function listen(evt, handler) {
|
|
120
|
+
const eventName = `zag:${evt}`;
|
|
121
|
+
const listener = (e) => handler(e);
|
|
122
|
+
target.addEventListener(eventName, listener);
|
|
123
|
+
return () => target.removeEventListener(eventName, listener);
|
|
124
|
+
};
|
|
125
|
+
}
|
|
100
126
|
};
|
|
101
127
|
return {
|
|
102
128
|
...dom2,
|
|
@@ -129,7 +155,8 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
129
155
|
};
|
|
130
156
|
}
|
|
131
157
|
function addPointerEvent(target, event, listener, options) {
|
|
132
|
-
|
|
158
|
+
var _a;
|
|
159
|
+
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
133
160
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
134
161
|
}
|
|
135
162
|
function wrapHandler(fn, filter = false) {
|
|
@@ -140,7 +167,8 @@ function wrapHandler(fn, filter = false) {
|
|
|
140
167
|
}
|
|
141
168
|
function filterPrimaryPointer(fn) {
|
|
142
169
|
return (event) => {
|
|
143
|
-
|
|
170
|
+
var _a;
|
|
171
|
+
const win = (_a = event.view) != null ? _a : window;
|
|
144
172
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
145
173
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
146
174
|
if (isPrimary)
|
|
@@ -223,12 +251,12 @@ var import_popper = require("@zag-js/popper");
|
|
|
223
251
|
// src/tooltip.dom.ts
|
|
224
252
|
var dom = defineDomHelpers({
|
|
225
253
|
getTriggerId: (ctx) => {
|
|
226
|
-
var _a;
|
|
227
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.trigger)
|
|
254
|
+
var _a, _b;
|
|
255
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
|
|
228
256
|
},
|
|
229
257
|
getContentId: (ctx) => {
|
|
230
|
-
var _a;
|
|
231
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.content)
|
|
258
|
+
var _a, _b;
|
|
259
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
|
|
232
260
|
},
|
|
233
261
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
234
262
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
@@ -373,7 +401,21 @@ function connect(state, send, normalize) {
|
|
|
373
401
|
// src/tooltip.machine.ts
|
|
374
402
|
var import_core2 = require("@zag-js/core");
|
|
375
403
|
var import_popper2 = require("@zag-js/popper");
|
|
376
|
-
|
|
404
|
+
|
|
405
|
+
// ../../utilities/core/dist/index.mjs
|
|
406
|
+
var isArray2 = (v) => Array.isArray(v);
|
|
407
|
+
var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
|
|
408
|
+
function compact(obj) {
|
|
409
|
+
if (obj === void 0)
|
|
410
|
+
return obj;
|
|
411
|
+
return Object.fromEntries(
|
|
412
|
+
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject2(value) ? compact(value) : value])
|
|
413
|
+
);
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
// src/tooltip.machine.ts
|
|
417
|
+
function machine(userContext) {
|
|
418
|
+
const ctx = compact(userContext);
|
|
377
419
|
return (0, import_core2.createMachine)(
|
|
378
420
|
{
|
|
379
421
|
id: "tooltip",
|
package/dist/index.mjs
CHANGED
|
@@ -8,12 +8,13 @@ function getCache() {
|
|
|
8
8
|
return g.__styleCache;
|
|
9
9
|
}
|
|
10
10
|
function getComputedStyle(el) {
|
|
11
|
+
var _a;
|
|
11
12
|
if (!el)
|
|
12
13
|
return {};
|
|
13
14
|
const cache = getCache();
|
|
14
15
|
let style = cache.get(el);
|
|
15
16
|
if (!style) {
|
|
16
|
-
const win = (el == null ? void 0 : el.ownerDocument.defaultView)
|
|
17
|
+
const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
17
18
|
style = win.getComputedStyle(el);
|
|
18
19
|
cache.set(el, style);
|
|
19
20
|
}
|
|
@@ -21,15 +22,16 @@ function getComputedStyle(el) {
|
|
|
21
22
|
}
|
|
22
23
|
var runIfFn = (v, ...a) => {
|
|
23
24
|
const res = typeof v === "function" ? v(...a) : v;
|
|
24
|
-
return res
|
|
25
|
+
return res != null ? res : void 0;
|
|
25
26
|
};
|
|
26
27
|
var isArray = (v) => Array.isArray(v);
|
|
27
28
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
28
29
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
29
30
|
var isDom = () => typeof window !== "undefined";
|
|
30
31
|
function getPlatform() {
|
|
32
|
+
var _a;
|
|
31
33
|
const agent = navigator.userAgentData;
|
|
32
|
-
return (agent == null ? void 0 : agent.platform)
|
|
34
|
+
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
33
35
|
}
|
|
34
36
|
var pt = (v) => isDom() && v.test(getPlatform());
|
|
35
37
|
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
@@ -42,17 +44,20 @@ function isWindow(value) {
|
|
|
42
44
|
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
43
45
|
}
|
|
44
46
|
function getDocument(el) {
|
|
47
|
+
var _a;
|
|
45
48
|
if (isWindow(el))
|
|
46
49
|
return el.document;
|
|
47
50
|
if (isDocument(el))
|
|
48
51
|
return el;
|
|
49
|
-
return (el == null ? void 0 : el.ownerDocument)
|
|
52
|
+
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
50
53
|
}
|
|
51
54
|
function getWindow(el) {
|
|
52
|
-
|
|
55
|
+
var _a;
|
|
56
|
+
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
53
57
|
}
|
|
54
58
|
function getNodeName(node) {
|
|
55
|
-
|
|
59
|
+
var _a;
|
|
60
|
+
return isWindow(node) ? "" : (_a = node == null ? void 0 : node.localName) != null ? _a : "";
|
|
56
61
|
}
|
|
57
62
|
function getParent(el) {
|
|
58
63
|
const doc = getDocument(el);
|
|
@@ -63,13 +68,34 @@ function getParent(el) {
|
|
|
63
68
|
function defineDomHelpers(helpers) {
|
|
64
69
|
const dom2 = {
|
|
65
70
|
getRootNode: (ctx) => {
|
|
66
|
-
var _a;
|
|
67
|
-
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx))
|
|
71
|
+
var _a, _b;
|
|
72
|
+
return (_b = (_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) != null ? _b : document;
|
|
68
73
|
},
|
|
69
74
|
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
70
|
-
getWin: (ctx) =>
|
|
75
|
+
getWin: (ctx) => {
|
|
76
|
+
var _a;
|
|
77
|
+
return (_a = dom2.getDoc(ctx).defaultView) != null ? _a : window;
|
|
78
|
+
},
|
|
71
79
|
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
72
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
80
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id),
|
|
81
|
+
createEmitter: (ctx, target) => {
|
|
82
|
+
const win = dom2.getWin(ctx);
|
|
83
|
+
return function emit(evt, detail, options) {
|
|
84
|
+
const { bubbles = true, cancelable, composed = true } = options != null ? options : {};
|
|
85
|
+
const eventName = `zag:${evt}`;
|
|
86
|
+
const init = { bubbles, cancelable, composed, detail };
|
|
87
|
+
const event = new win.CustomEvent(eventName, init);
|
|
88
|
+
target.dispatchEvent(event);
|
|
89
|
+
};
|
|
90
|
+
},
|
|
91
|
+
createListener: (target) => {
|
|
92
|
+
return function listen(evt, handler) {
|
|
93
|
+
const eventName = `zag:${evt}`;
|
|
94
|
+
const listener = (e) => handler(e);
|
|
95
|
+
target.addEventListener(eventName, listener);
|
|
96
|
+
return () => target.removeEventListener(eventName, listener);
|
|
97
|
+
};
|
|
98
|
+
}
|
|
73
99
|
};
|
|
74
100
|
return {
|
|
75
101
|
...dom2,
|
|
@@ -102,7 +128,8 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
102
128
|
};
|
|
103
129
|
}
|
|
104
130
|
function addPointerEvent(target, event, listener, options) {
|
|
105
|
-
|
|
131
|
+
var _a;
|
|
132
|
+
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
106
133
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
107
134
|
}
|
|
108
135
|
function wrapHandler(fn, filter = false) {
|
|
@@ -113,7 +140,8 @@ function wrapHandler(fn, filter = false) {
|
|
|
113
140
|
}
|
|
114
141
|
function filterPrimaryPointer(fn) {
|
|
115
142
|
return (event) => {
|
|
116
|
-
|
|
143
|
+
var _a;
|
|
144
|
+
const win = (_a = event.view) != null ? _a : window;
|
|
117
145
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
118
146
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
119
147
|
if (isPrimary)
|
|
@@ -196,12 +224,12 @@ import { getPlacementStyles } from "@zag-js/popper";
|
|
|
196
224
|
// src/tooltip.dom.ts
|
|
197
225
|
var dom = defineDomHelpers({
|
|
198
226
|
getTriggerId: (ctx) => {
|
|
199
|
-
var _a;
|
|
200
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.trigger)
|
|
227
|
+
var _a, _b;
|
|
228
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.trigger) != null ? _b : `tooltip:${ctx.id}:trigger`;
|
|
201
229
|
},
|
|
202
230
|
getContentId: (ctx) => {
|
|
203
|
-
var _a;
|
|
204
|
-
return ((_a = ctx.ids) == null ? void 0 : _a.content)
|
|
231
|
+
var _a, _b;
|
|
232
|
+
return (_b = (_a = ctx.ids) == null ? void 0 : _a.content) != null ? _b : `tooltip:${ctx.id}:content`;
|
|
205
233
|
},
|
|
206
234
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
207
235
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
@@ -346,7 +374,21 @@ function connect(state, send, normalize) {
|
|
|
346
374
|
// src/tooltip.machine.ts
|
|
347
375
|
import { createMachine, subscribe } from "@zag-js/core";
|
|
348
376
|
import { getPlacement } from "@zag-js/popper";
|
|
349
|
-
|
|
377
|
+
|
|
378
|
+
// ../../utilities/core/dist/index.mjs
|
|
379
|
+
var isArray2 = (v) => Array.isArray(v);
|
|
380
|
+
var isObject2 = (v) => !(v == null || typeof v !== "object" || isArray2(v));
|
|
381
|
+
function compact(obj) {
|
|
382
|
+
if (obj === void 0)
|
|
383
|
+
return obj;
|
|
384
|
+
return Object.fromEntries(
|
|
385
|
+
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject2(value) ? compact(value) : value])
|
|
386
|
+
);
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
// src/tooltip.machine.ts
|
|
390
|
+
function machine(userContext) {
|
|
391
|
+
const ctx = compact(userContext);
|
|
350
392
|
return createMachine(
|
|
351
393
|
{
|
|
352
394
|
id: "tooltip",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/tooltip",
|
|
3
|
-
"version": "0.1
|
|
3
|
+
"version": "0.2.1",
|
|
4
4
|
"description": "Core logic for the tooltip widget implemented as a state machine",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.mjs",
|
|
@@ -29,13 +29,13 @@
|
|
|
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.
|
|
34
|
-
"@zag-js/types": "0.
|
|
32
|
+
"@zag-js/core": "0.2.1",
|
|
33
|
+
"@zag-js/popper": "0.2.0",
|
|
34
|
+
"@zag-js/types": "0.3.0"
|
|
35
35
|
},
|
|
36
36
|
"devDependencies": {
|
|
37
|
-
"@zag-js/dom-utils": "0.
|
|
38
|
-
"@zag-js/utils": "0.
|
|
37
|
+
"@zag-js/dom-utils": "0.2.0",
|
|
38
|
+
"@zag-js/utils": "0.3.0"
|
|
39
39
|
},
|
|
40
40
|
"scripts": {
|
|
41
41
|
"build-fast": "tsup src/index.ts --format=esm,cjs",
|