@zag-js/tooltip 0.1.8 → 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 +123 -158
- package/dist/index.mjs +119 -163
- package/package.json +15 -11
- package/dist/tooltip.connect.d.ts +0 -18
- package/dist/tooltip.dom.d.ts +0 -18
- 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 });
|
|
@@ -46,22 +29,91 @@ module.exports = __toCommonJS(src_exports);
|
|
|
46
29
|
var dataAttr = (guard) => {
|
|
47
30
|
return guard ? "" : void 0;
|
|
48
31
|
};
|
|
49
|
-
|
|
32
|
+
function getCache() {
|
|
33
|
+
const g = globalThis;
|
|
34
|
+
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
35
|
+
return g.__styleCache;
|
|
36
|
+
}
|
|
37
|
+
function getComputedStyle(el) {
|
|
38
|
+
if (!el)
|
|
39
|
+
return {};
|
|
40
|
+
const cache = getCache();
|
|
41
|
+
let style = cache.get(el);
|
|
42
|
+
if (!style) {
|
|
43
|
+
const win = (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
44
|
+
style = win.getComputedStyle(el);
|
|
45
|
+
cache.set(el, style);
|
|
46
|
+
}
|
|
47
|
+
return style;
|
|
48
|
+
}
|
|
49
|
+
var runIfFn = (v, ...a) => {
|
|
50
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
51
|
+
return res ?? void 0;
|
|
52
|
+
};
|
|
50
53
|
var isArray = (v) => Array.isArray(v);
|
|
51
54
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
52
55
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
56
|
+
var isDom = () => typeof window !== "undefined";
|
|
57
|
+
function getPlatform() {
|
|
58
|
+
const agent = navigator.userAgentData;
|
|
59
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
60
|
+
}
|
|
61
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
62
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
63
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
64
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
65
|
+
function isDocument(el) {
|
|
66
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
67
|
+
}
|
|
68
|
+
function isWindow(value) {
|
|
69
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
70
|
+
}
|
|
71
|
+
function getDocument(el) {
|
|
72
|
+
if (isWindow(el))
|
|
73
|
+
return el.document;
|
|
74
|
+
if (isDocument(el))
|
|
75
|
+
return el;
|
|
76
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
77
|
+
}
|
|
78
|
+
function getWindow(el) {
|
|
79
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
80
|
+
}
|
|
81
|
+
function getNodeName(node) {
|
|
82
|
+
return isWindow(node) ? "" : (node == null ? void 0 : node.localName) ?? "";
|
|
83
|
+
}
|
|
84
|
+
function getParent(el) {
|
|
85
|
+
const doc = getDocument(el);
|
|
86
|
+
if (getNodeName(el) === "html")
|
|
87
|
+
return el;
|
|
88
|
+
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
89
|
+
}
|
|
90
|
+
function defineDomHelpers(helpers) {
|
|
91
|
+
const dom2 = {
|
|
92
|
+
getRootNode: (ctx) => {
|
|
93
|
+
var _a;
|
|
94
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
95
|
+
},
|
|
96
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
97
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
98
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
99
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
100
|
+
};
|
|
101
|
+
return {
|
|
102
|
+
...dom2,
|
|
103
|
+
...helpers
|
|
104
|
+
};
|
|
105
|
+
}
|
|
106
|
+
function isHTMLElement(v) {
|
|
107
|
+
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
108
|
+
}
|
|
53
109
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
54
110
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
55
111
|
var supportsMouseEvent = () => isDom() && window.onmousedown === null;
|
|
56
112
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
57
|
-
var runIfFn = (v, ...a) => {
|
|
58
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
59
|
-
return res != null ? res : void 0;
|
|
60
|
-
};
|
|
61
113
|
var isRef = (v) => hasProp(v, "current");
|
|
62
|
-
var
|
|
114
|
+
var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
63
115
|
function extractInfo(event, type = "page") {
|
|
64
|
-
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] ||
|
|
116
|
+
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
|
|
65
117
|
return {
|
|
66
118
|
point: {
|
|
67
119
|
x: point[`${type}X`],
|
|
@@ -77,8 +129,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
77
129
|
};
|
|
78
130
|
}
|
|
79
131
|
function addPointerEvent(target, event, listener, options) {
|
|
80
|
-
|
|
81
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
132
|
+
const type = getEventName(event) ?? event;
|
|
82
133
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
83
134
|
}
|
|
84
135
|
function wrapHandler(fn, filter = false) {
|
|
@@ -89,8 +140,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
89
140
|
}
|
|
90
141
|
function filterPrimaryPointer(fn) {
|
|
91
142
|
return (event) => {
|
|
92
|
-
|
|
93
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
143
|
+
const win = event.view ?? window;
|
|
94
144
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
95
145
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
96
146
|
if (isPrimary)
|
|
@@ -128,61 +178,6 @@ function raf(fn) {
|
|
|
128
178
|
globalThis.cancelAnimationFrame(id);
|
|
129
179
|
};
|
|
130
180
|
}
|
|
131
|
-
function getStyleCache() {
|
|
132
|
-
;
|
|
133
|
-
globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
|
|
134
|
-
return globalThis.__styleCache__;
|
|
135
|
-
}
|
|
136
|
-
function getComputedStyle(el) {
|
|
137
|
-
var _a;
|
|
138
|
-
if (!el)
|
|
139
|
-
return {};
|
|
140
|
-
const cache = getStyleCache();
|
|
141
|
-
let style = cache.get(el);
|
|
142
|
-
if (!style) {
|
|
143
|
-
const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
144
|
-
style = win.getComputedStyle(el);
|
|
145
|
-
cache.set(el, style);
|
|
146
|
-
}
|
|
147
|
-
return style;
|
|
148
|
-
}
|
|
149
|
-
function isWindow(value) {
|
|
150
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
151
|
-
}
|
|
152
|
-
function getOwnerDocument(el) {
|
|
153
|
-
var _a;
|
|
154
|
-
if (isWindow(el))
|
|
155
|
-
return el.document;
|
|
156
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
157
|
-
}
|
|
158
|
-
function getOwnerWindow(el) {
|
|
159
|
-
var _a;
|
|
160
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
161
|
-
}
|
|
162
|
-
function getNodeName(node) {
|
|
163
|
-
return isWindow(node) ? "" : node ? node.localName || "" : "";
|
|
164
|
-
}
|
|
165
|
-
function getParent(el) {
|
|
166
|
-
const doc = getOwnerDocument(el);
|
|
167
|
-
if (getNodeName(el) === "html")
|
|
168
|
-
return el;
|
|
169
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
170
|
-
}
|
|
171
|
-
function isHTMLElement(v) {
|
|
172
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
173
|
-
}
|
|
174
|
-
var visuallyHiddenStyle = {
|
|
175
|
-
border: "0",
|
|
176
|
-
clip: "rect(0 0 0 0)",
|
|
177
|
-
height: "1px",
|
|
178
|
-
margin: "-1px",
|
|
179
|
-
overflow: "hidden",
|
|
180
|
-
padding: "0",
|
|
181
|
-
position: "absolute",
|
|
182
|
-
width: "1px",
|
|
183
|
-
whiteSpace: "nowrap",
|
|
184
|
-
wordWrap: "normal"
|
|
185
|
-
};
|
|
186
181
|
function addPointerlockChangeListener(doc, fn) {
|
|
187
182
|
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
188
183
|
}
|
|
@@ -192,7 +187,7 @@ function isScrollParent(el) {
|
|
|
192
187
|
}
|
|
193
188
|
function getScrollParent(el) {
|
|
194
189
|
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
195
|
-
return
|
|
190
|
+
return getDocument(el).body;
|
|
196
191
|
}
|
|
197
192
|
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
198
193
|
return el;
|
|
@@ -201,57 +196,47 @@ function getScrollParent(el) {
|
|
|
201
196
|
}
|
|
202
197
|
function getScrollParents(el, list = []) {
|
|
203
198
|
const scrollParent = getScrollParent(el);
|
|
204
|
-
const isBody = scrollParent ===
|
|
205
|
-
const win =
|
|
199
|
+
const isBody = scrollParent === getDocument(el).body;
|
|
200
|
+
const win = getWindow(scrollParent);
|
|
206
201
|
const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
|
207
202
|
const parents = list.concat(target);
|
|
208
203
|
if (isBody)
|
|
209
204
|
return parents;
|
|
210
205
|
return parents.concat(getScrollParents(getParent(target)));
|
|
211
206
|
}
|
|
207
|
+
var visuallyHiddenStyle = {
|
|
208
|
+
border: "0",
|
|
209
|
+
clip: "rect(0 0 0 0)",
|
|
210
|
+
height: "1px",
|
|
211
|
+
margin: "-1px",
|
|
212
|
+
overflow: "hidden",
|
|
213
|
+
padding: "0",
|
|
214
|
+
position: "absolute",
|
|
215
|
+
width: "1px",
|
|
216
|
+
whiteSpace: "nowrap",
|
|
217
|
+
wordWrap: "normal"
|
|
218
|
+
};
|
|
212
219
|
|
|
213
220
|
// src/tooltip.connect.ts
|
|
214
221
|
var import_popper = require("@zag-js/popper");
|
|
215
222
|
|
|
216
|
-
// ../../types/dist/index.mjs
|
|
217
|
-
function createNormalizer(fn) {
|
|
218
|
-
return new Proxy({}, {
|
|
219
|
-
get() {
|
|
220
|
-
return fn;
|
|
221
|
-
}
|
|
222
|
-
});
|
|
223
|
-
}
|
|
224
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
225
|
-
|
|
226
223
|
// src/tooltip.dom.ts
|
|
227
|
-
var dom = {
|
|
228
|
-
getDoc: (ctx) => {
|
|
229
|
-
var _a;
|
|
230
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
231
|
-
},
|
|
232
|
-
getWin: (ctx) => {
|
|
233
|
-
var _a, _b;
|
|
234
|
-
return (_b = (_a = ctx.doc) == null ? void 0 : _a.defaultView) != null ? _b : window;
|
|
235
|
-
},
|
|
236
|
-
getRootNode: (ctx) => {
|
|
237
|
-
var _a;
|
|
238
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
239
|
-
},
|
|
224
|
+
var dom = defineDomHelpers({
|
|
240
225
|
getTriggerId: (ctx) => {
|
|
241
|
-
var _a
|
|
242
|
-
return (
|
|
226
|
+
var _a;
|
|
227
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tooltip:${ctx.id}:trigger`;
|
|
243
228
|
},
|
|
244
229
|
getContentId: (ctx) => {
|
|
245
|
-
var _a
|
|
246
|
-
return (
|
|
230
|
+
var _a;
|
|
231
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tooltip:${ctx.id}:content`;
|
|
247
232
|
},
|
|
248
233
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
249
234
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
250
235
|
portalId: "tooltip-portal",
|
|
251
|
-
getTriggerEl: (ctx) => dom.
|
|
252
|
-
getContentEl: (ctx) => dom.
|
|
253
|
-
getPositionerEl: (ctx) => dom.
|
|
254
|
-
getArrowEl: (ctx) => dom.
|
|
236
|
+
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
237
|
+
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
238
|
+
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
239
|
+
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
255
240
|
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx)),
|
|
256
241
|
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
|
|
257
242
|
createPortalEl: (ctx) => {
|
|
@@ -259,7 +244,7 @@ var dom = {
|
|
|
259
244
|
portal.id = dom.portalId;
|
|
260
245
|
return portal;
|
|
261
246
|
}
|
|
262
|
-
};
|
|
247
|
+
});
|
|
263
248
|
|
|
264
249
|
// src/tooltip.store.ts
|
|
265
250
|
var import_core = require("@zag-js/core");
|
|
@@ -273,7 +258,7 @@ var store = (0, import_core.proxy)({
|
|
|
273
258
|
});
|
|
274
259
|
|
|
275
260
|
// src/tooltip.connect.ts
|
|
276
|
-
function connect(state, send, normalize
|
|
261
|
+
function connect(state, send, normalize) {
|
|
277
262
|
const id = state.context.id;
|
|
278
263
|
const hasAriaLabel = state.context.hasAriaLabel;
|
|
279
264
|
const isOpen = state.hasTag("open");
|
|
@@ -379,39 +364,23 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
379
364
|
// src/tooltip.machine.ts
|
|
380
365
|
var import_core2 = require("@zag-js/core");
|
|
381
366
|
var import_popper2 = require("@zag-js/popper");
|
|
382
|
-
|
|
383
|
-
// ../../utilities/core/dist/index.mjs
|
|
384
|
-
var isDom2 = () => typeof window !== "undefined";
|
|
385
|
-
function getPlatform() {
|
|
386
|
-
var _a;
|
|
387
|
-
const agent = navigator.userAgentData;
|
|
388
|
-
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
389
|
-
}
|
|
390
|
-
var pt = (v) => isDom2() && v.test(getPlatform());
|
|
391
|
-
var vn = (v) => isDom2() && v.test(navigator.vendor);
|
|
392
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
393
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
394
|
-
var noop = () => {
|
|
395
|
-
};
|
|
396
|
-
|
|
397
|
-
// src/tooltip.machine.ts
|
|
398
|
-
function machine(ctx = {}) {
|
|
367
|
+
function machine(ctx) {
|
|
399
368
|
return (0, import_core2.createMachine)({
|
|
400
369
|
id: "tooltip",
|
|
401
370
|
initial: "unknown",
|
|
402
|
-
context:
|
|
403
|
-
id: "",
|
|
371
|
+
context: {
|
|
404
372
|
openDelay: 1e3,
|
|
405
373
|
closeDelay: 500,
|
|
406
374
|
closeOnPointerDown: true,
|
|
407
375
|
closeOnEsc: true,
|
|
408
376
|
interactive: true,
|
|
409
|
-
currentPlacement: void 0
|
|
410
|
-
|
|
411
|
-
positioning:
|
|
412
|
-
placement: "bottom"
|
|
413
|
-
|
|
414
|
-
|
|
377
|
+
currentPlacement: void 0,
|
|
378
|
+
...ctx,
|
|
379
|
+
positioning: {
|
|
380
|
+
placement: "bottom",
|
|
381
|
+
...ctx.positioning
|
|
382
|
+
}
|
|
383
|
+
},
|
|
415
384
|
computed: {
|
|
416
385
|
hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
|
|
417
386
|
},
|
|
@@ -422,10 +391,7 @@ function machine(ctx = {}) {
|
|
|
422
391
|
states: {
|
|
423
392
|
unknown: {
|
|
424
393
|
on: {
|
|
425
|
-
SETUP:
|
|
426
|
-
target: "closed",
|
|
427
|
-
actions: "setupDocument"
|
|
428
|
-
}
|
|
394
|
+
SETUP: "closed"
|
|
429
395
|
}
|
|
430
396
|
},
|
|
431
397
|
closed: {
|
|
@@ -514,7 +480,8 @@ function machine(ctx = {}) {
|
|
|
514
480
|
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
515
481
|
let cleanup;
|
|
516
482
|
raf(() => {
|
|
517
|
-
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,
|
|
518
485
|
onComplete(data) {
|
|
519
486
|
ctx2.currentPlacement = data.placement;
|
|
520
487
|
ctx2.isPlacementComplete = true;
|
|
@@ -523,7 +490,7 @@ function machine(ctx = {}) {
|
|
|
523
490
|
ctx2.currentPlacement = void 0;
|
|
524
491
|
ctx2.isPlacementComplete = false;
|
|
525
492
|
}
|
|
526
|
-
})
|
|
493
|
+
});
|
|
527
494
|
});
|
|
528
495
|
return cleanup;
|
|
529
496
|
},
|
|
@@ -553,7 +520,7 @@ function machine(ctx = {}) {
|
|
|
553
520
|
},
|
|
554
521
|
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
555
522
|
if (!isSafari())
|
|
556
|
-
return
|
|
523
|
+
return;
|
|
557
524
|
const doc = dom.getDoc(ctx2);
|
|
558
525
|
return addPointerEvent(doc, "pointermove", (event) => {
|
|
559
526
|
const selector = "[data-part=trigger][data-expanded]";
|
|
@@ -574,13 +541,6 @@ function machine(ctx = {}) {
|
|
|
574
541
|
}
|
|
575
542
|
},
|
|
576
543
|
actions: {
|
|
577
|
-
setupDocument(ctx2, evt) {
|
|
578
|
-
ctx2.id = evt.id;
|
|
579
|
-
if (evt.doc)
|
|
580
|
-
ctx2.doc = (0, import_core2.ref)(evt.doc);
|
|
581
|
-
if (evt.root)
|
|
582
|
-
ctx2.rootNode = (0, import_core2.ref)(evt.root);
|
|
583
|
-
},
|
|
584
544
|
setGlobalId(ctx2) {
|
|
585
545
|
store.setId(ctx2.id);
|
|
586
546
|
},
|
|
@@ -616,3 +576,8 @@ function machine(ctx = {}) {
|
|
|
616
576
|
}
|
|
617
577
|
});
|
|
618
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,44 +1,92 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __defProp = Object.defineProperty;
|
|
3
|
-
var __defProps = Object.defineProperties;
|
|
4
|
-
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
5
|
-
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
6
|
-
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
7
|
-
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
8
|
-
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
9
|
-
var __spreadValues = (a, b) => {
|
|
10
|
-
for (var prop in b || (b = {}))
|
|
11
|
-
if (__hasOwnProp.call(b, prop))
|
|
12
|
-
__defNormalProp(a, prop, b[prop]);
|
|
13
|
-
if (__getOwnPropSymbols)
|
|
14
|
-
for (var prop of __getOwnPropSymbols(b)) {
|
|
15
|
-
if (__propIsEnum.call(b, prop))
|
|
16
|
-
__defNormalProp(a, prop, b[prop]);
|
|
17
|
-
}
|
|
18
|
-
return a;
|
|
19
|
-
};
|
|
20
|
-
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
21
|
-
|
|
22
1
|
// ../../utilities/dom/dist/index.mjs
|
|
23
2
|
var dataAttr = (guard) => {
|
|
24
3
|
return guard ? "" : void 0;
|
|
25
4
|
};
|
|
26
|
-
|
|
5
|
+
function getCache() {
|
|
6
|
+
const g = globalThis;
|
|
7
|
+
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
8
|
+
return g.__styleCache;
|
|
9
|
+
}
|
|
10
|
+
function getComputedStyle(el) {
|
|
11
|
+
if (!el)
|
|
12
|
+
return {};
|
|
13
|
+
const cache = getCache();
|
|
14
|
+
let style = cache.get(el);
|
|
15
|
+
if (!style) {
|
|
16
|
+
const win = (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
17
|
+
style = win.getComputedStyle(el);
|
|
18
|
+
cache.set(el, style);
|
|
19
|
+
}
|
|
20
|
+
return style;
|
|
21
|
+
}
|
|
22
|
+
var runIfFn = (v, ...a) => {
|
|
23
|
+
const res = typeof v === "function" ? v(...a) : v;
|
|
24
|
+
return res ?? void 0;
|
|
25
|
+
};
|
|
27
26
|
var isArray = (v) => Array.isArray(v);
|
|
28
27
|
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
29
28
|
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
29
|
+
var isDom = () => typeof window !== "undefined";
|
|
30
|
+
function getPlatform() {
|
|
31
|
+
const agent = navigator.userAgentData;
|
|
32
|
+
return (agent == null ? void 0 : agent.platform) ?? navigator.platform;
|
|
33
|
+
}
|
|
34
|
+
var pt = (v) => isDom() && v.test(getPlatform());
|
|
35
|
+
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
36
|
+
var isSafari = () => isApple() && vn(/apple/i);
|
|
37
|
+
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
38
|
+
function isDocument(el) {
|
|
39
|
+
return el.nodeType === Node.DOCUMENT_NODE;
|
|
40
|
+
}
|
|
41
|
+
function isWindow(value) {
|
|
42
|
+
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
43
|
+
}
|
|
44
|
+
function getDocument(el) {
|
|
45
|
+
if (isWindow(el))
|
|
46
|
+
return el.document;
|
|
47
|
+
if (isDocument(el))
|
|
48
|
+
return el;
|
|
49
|
+
return (el == null ? void 0 : el.ownerDocument) ?? document;
|
|
50
|
+
}
|
|
51
|
+
function getWindow(el) {
|
|
52
|
+
return (el == null ? void 0 : el.ownerDocument.defaultView) ?? window;
|
|
53
|
+
}
|
|
54
|
+
function getNodeName(node) {
|
|
55
|
+
return isWindow(node) ? "" : (node == null ? void 0 : node.localName) ?? "";
|
|
56
|
+
}
|
|
57
|
+
function getParent(el) {
|
|
58
|
+
const doc = getDocument(el);
|
|
59
|
+
if (getNodeName(el) === "html")
|
|
60
|
+
return el;
|
|
61
|
+
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
62
|
+
}
|
|
63
|
+
function defineDomHelpers(helpers) {
|
|
64
|
+
const dom2 = {
|
|
65
|
+
getRootNode: (ctx) => {
|
|
66
|
+
var _a;
|
|
67
|
+
return ((_a = ctx.getRootNode) == null ? void 0 : _a.call(ctx)) ?? document;
|
|
68
|
+
},
|
|
69
|
+
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
70
|
+
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
71
|
+
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
72
|
+
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
73
|
+
};
|
|
74
|
+
return {
|
|
75
|
+
...dom2,
|
|
76
|
+
...helpers
|
|
77
|
+
};
|
|
78
|
+
}
|
|
79
|
+
function isHTMLElement(v) {
|
|
80
|
+
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
81
|
+
}
|
|
30
82
|
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
31
83
|
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
32
84
|
var supportsMouseEvent = () => isDom() && window.onmousedown === null;
|
|
33
85
|
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
34
|
-
var runIfFn = (v, ...a) => {
|
|
35
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
36
|
-
return res != null ? res : void 0;
|
|
37
|
-
};
|
|
38
86
|
var isRef = (v) => hasProp(v, "current");
|
|
39
|
-
var
|
|
87
|
+
var fallback2 = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
40
88
|
function extractInfo(event, type = "page") {
|
|
41
|
-
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] ||
|
|
89
|
+
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback2 : event;
|
|
42
90
|
return {
|
|
43
91
|
point: {
|
|
44
92
|
x: point[`${type}X`],
|
|
@@ -54,8 +102,7 @@ function addDomEvent(target, eventName, handler, options) {
|
|
|
54
102
|
};
|
|
55
103
|
}
|
|
56
104
|
function addPointerEvent(target, event, listener, options) {
|
|
57
|
-
|
|
58
|
-
const type = (_a = getEventName(event)) != null ? _a : event;
|
|
105
|
+
const type = getEventName(event) ?? event;
|
|
59
106
|
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
60
107
|
}
|
|
61
108
|
function wrapHandler(fn, filter = false) {
|
|
@@ -66,8 +113,7 @@ function wrapHandler(fn, filter = false) {
|
|
|
66
113
|
}
|
|
67
114
|
function filterPrimaryPointer(fn) {
|
|
68
115
|
return (event) => {
|
|
69
|
-
|
|
70
|
-
const win = (_a = event.view) != null ? _a : window;
|
|
116
|
+
const win = event.view ?? window;
|
|
71
117
|
const isMouseEvent2 = event instanceof win.MouseEvent;
|
|
72
118
|
const isPrimary = !isMouseEvent2 || isMouseEvent2 && event.button === 0;
|
|
73
119
|
if (isPrimary)
|
|
@@ -105,61 +151,6 @@ function raf(fn) {
|
|
|
105
151
|
globalThis.cancelAnimationFrame(id);
|
|
106
152
|
};
|
|
107
153
|
}
|
|
108
|
-
function getStyleCache() {
|
|
109
|
-
;
|
|
110
|
-
globalThis.__styleCache__ = globalThis.__styleCache__ || /* @__PURE__ */ new WeakMap();
|
|
111
|
-
return globalThis.__styleCache__;
|
|
112
|
-
}
|
|
113
|
-
function getComputedStyle(el) {
|
|
114
|
-
var _a;
|
|
115
|
-
if (!el)
|
|
116
|
-
return {};
|
|
117
|
-
const cache = getStyleCache();
|
|
118
|
-
let style = cache.get(el);
|
|
119
|
-
if (!style) {
|
|
120
|
-
const win = (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
121
|
-
style = win.getComputedStyle(el);
|
|
122
|
-
cache.set(el, style);
|
|
123
|
-
}
|
|
124
|
-
return style;
|
|
125
|
-
}
|
|
126
|
-
function isWindow(value) {
|
|
127
|
-
return (value == null ? void 0 : value.toString()) === "[object Window]";
|
|
128
|
-
}
|
|
129
|
-
function getOwnerDocument(el) {
|
|
130
|
-
var _a;
|
|
131
|
-
if (isWindow(el))
|
|
132
|
-
return el.document;
|
|
133
|
-
return (_a = el == null ? void 0 : el.ownerDocument) != null ? _a : document;
|
|
134
|
-
}
|
|
135
|
-
function getOwnerWindow(el) {
|
|
136
|
-
var _a;
|
|
137
|
-
return (_a = el == null ? void 0 : el.ownerDocument.defaultView) != null ? _a : window;
|
|
138
|
-
}
|
|
139
|
-
function getNodeName(node) {
|
|
140
|
-
return isWindow(node) ? "" : node ? node.localName || "" : "";
|
|
141
|
-
}
|
|
142
|
-
function getParent(el) {
|
|
143
|
-
const doc = getOwnerDocument(el);
|
|
144
|
-
if (getNodeName(el) === "html")
|
|
145
|
-
return el;
|
|
146
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
147
|
-
}
|
|
148
|
-
function isHTMLElement(v) {
|
|
149
|
-
return typeof v === "object" && (v == null ? void 0 : v.nodeType) === Node.ELEMENT_NODE && typeof (v == null ? void 0 : v.nodeName) === "string";
|
|
150
|
-
}
|
|
151
|
-
var visuallyHiddenStyle = {
|
|
152
|
-
border: "0",
|
|
153
|
-
clip: "rect(0 0 0 0)",
|
|
154
|
-
height: "1px",
|
|
155
|
-
margin: "-1px",
|
|
156
|
-
overflow: "hidden",
|
|
157
|
-
padding: "0",
|
|
158
|
-
position: "absolute",
|
|
159
|
-
width: "1px",
|
|
160
|
-
whiteSpace: "nowrap",
|
|
161
|
-
wordWrap: "normal"
|
|
162
|
-
};
|
|
163
154
|
function addPointerlockChangeListener(doc, fn) {
|
|
164
155
|
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
165
156
|
}
|
|
@@ -169,7 +160,7 @@ function isScrollParent(el) {
|
|
|
169
160
|
}
|
|
170
161
|
function getScrollParent(el) {
|
|
171
162
|
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
172
|
-
return
|
|
163
|
+
return getDocument(el).body;
|
|
173
164
|
}
|
|
174
165
|
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
175
166
|
return el;
|
|
@@ -178,57 +169,47 @@ function getScrollParent(el) {
|
|
|
178
169
|
}
|
|
179
170
|
function getScrollParents(el, list = []) {
|
|
180
171
|
const scrollParent = getScrollParent(el);
|
|
181
|
-
const isBody = scrollParent ===
|
|
182
|
-
const win =
|
|
172
|
+
const isBody = scrollParent === getDocument(el).body;
|
|
173
|
+
const win = getWindow(scrollParent);
|
|
183
174
|
const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
|
184
175
|
const parents = list.concat(target);
|
|
185
176
|
if (isBody)
|
|
186
177
|
return parents;
|
|
187
178
|
return parents.concat(getScrollParents(getParent(target)));
|
|
188
179
|
}
|
|
180
|
+
var visuallyHiddenStyle = {
|
|
181
|
+
border: "0",
|
|
182
|
+
clip: "rect(0 0 0 0)",
|
|
183
|
+
height: "1px",
|
|
184
|
+
margin: "-1px",
|
|
185
|
+
overflow: "hidden",
|
|
186
|
+
padding: "0",
|
|
187
|
+
position: "absolute",
|
|
188
|
+
width: "1px",
|
|
189
|
+
whiteSpace: "nowrap",
|
|
190
|
+
wordWrap: "normal"
|
|
191
|
+
};
|
|
189
192
|
|
|
190
193
|
// src/tooltip.connect.ts
|
|
191
194
|
import { getPlacementStyles } from "@zag-js/popper";
|
|
192
195
|
|
|
193
|
-
// ../../types/dist/index.mjs
|
|
194
|
-
function createNormalizer(fn) {
|
|
195
|
-
return new Proxy({}, {
|
|
196
|
-
get() {
|
|
197
|
-
return fn;
|
|
198
|
-
}
|
|
199
|
-
});
|
|
200
|
-
}
|
|
201
|
-
var normalizeProp = createNormalizer((v) => v);
|
|
202
|
-
|
|
203
196
|
// src/tooltip.dom.ts
|
|
204
|
-
var dom = {
|
|
205
|
-
getDoc: (ctx) => {
|
|
206
|
-
var _a;
|
|
207
|
-
return (_a = ctx.doc) != null ? _a : document;
|
|
208
|
-
},
|
|
209
|
-
getWin: (ctx) => {
|
|
210
|
-
var _a, _b;
|
|
211
|
-
return (_b = (_a = ctx.doc) == null ? void 0 : _a.defaultView) != null ? _b : window;
|
|
212
|
-
},
|
|
213
|
-
getRootNode: (ctx) => {
|
|
214
|
-
var _a;
|
|
215
|
-
return (_a = ctx.rootNode) != null ? _a : dom.getDoc(ctx);
|
|
216
|
-
},
|
|
197
|
+
var dom = defineDomHelpers({
|
|
217
198
|
getTriggerId: (ctx) => {
|
|
218
|
-
var _a
|
|
219
|
-
return (
|
|
199
|
+
var _a;
|
|
200
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.trigger) ?? `tooltip:${ctx.id}:trigger`;
|
|
220
201
|
},
|
|
221
202
|
getContentId: (ctx) => {
|
|
222
|
-
var _a
|
|
223
|
-
return (
|
|
203
|
+
var _a;
|
|
204
|
+
return ((_a = ctx.ids) == null ? void 0 : _a.content) ?? `tooltip:${ctx.id}:content`;
|
|
224
205
|
},
|
|
225
206
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
226
207
|
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
227
208
|
portalId: "tooltip-portal",
|
|
228
|
-
getTriggerEl: (ctx) => dom.
|
|
229
|
-
getContentEl: (ctx) => dom.
|
|
230
|
-
getPositionerEl: (ctx) => dom.
|
|
231
|
-
getArrowEl: (ctx) => dom.
|
|
209
|
+
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
210
|
+
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
211
|
+
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
212
|
+
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
232
213
|
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx)),
|
|
233
214
|
getPortalEl: (ctx) => dom.getDoc(ctx).getElementById(dom.portalId),
|
|
234
215
|
createPortalEl: (ctx) => {
|
|
@@ -236,7 +217,7 @@ var dom = {
|
|
|
236
217
|
portal.id = dom.portalId;
|
|
237
218
|
return portal;
|
|
238
219
|
}
|
|
239
|
-
};
|
|
220
|
+
});
|
|
240
221
|
|
|
241
222
|
// src/tooltip.store.ts
|
|
242
223
|
import { proxy } from "@zag-js/core";
|
|
@@ -250,7 +231,7 @@ var store = proxy({
|
|
|
250
231
|
});
|
|
251
232
|
|
|
252
233
|
// src/tooltip.connect.ts
|
|
253
|
-
function connect(state, send, normalize
|
|
234
|
+
function connect(state, send, normalize) {
|
|
254
235
|
const id = state.context.id;
|
|
255
236
|
const hasAriaLabel = state.context.hasAriaLabel;
|
|
256
237
|
const isOpen = state.hasTag("open");
|
|
@@ -354,41 +335,25 @@ function connect(state, send, normalize = normalizeProp) {
|
|
|
354
335
|
}
|
|
355
336
|
|
|
356
337
|
// src/tooltip.machine.ts
|
|
357
|
-
import { createMachine,
|
|
338
|
+
import { createMachine, subscribe } from "@zag-js/core";
|
|
358
339
|
import { getPlacement } from "@zag-js/popper";
|
|
359
|
-
|
|
360
|
-
// ../../utilities/core/dist/index.mjs
|
|
361
|
-
var isDom2 = () => typeof window !== "undefined";
|
|
362
|
-
function getPlatform() {
|
|
363
|
-
var _a;
|
|
364
|
-
const agent = navigator.userAgentData;
|
|
365
|
-
return (_a = agent == null ? void 0 : agent.platform) != null ? _a : navigator.platform;
|
|
366
|
-
}
|
|
367
|
-
var pt = (v) => isDom2() && v.test(getPlatform());
|
|
368
|
-
var vn = (v) => isDom2() && v.test(navigator.vendor);
|
|
369
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
370
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
371
|
-
var noop = () => {
|
|
372
|
-
};
|
|
373
|
-
|
|
374
|
-
// src/tooltip.machine.ts
|
|
375
|
-
function machine(ctx = {}) {
|
|
340
|
+
function machine(ctx) {
|
|
376
341
|
return createMachine({
|
|
377
342
|
id: "tooltip",
|
|
378
343
|
initial: "unknown",
|
|
379
|
-
context:
|
|
380
|
-
id: "",
|
|
344
|
+
context: {
|
|
381
345
|
openDelay: 1e3,
|
|
382
346
|
closeDelay: 500,
|
|
383
347
|
closeOnPointerDown: true,
|
|
384
348
|
closeOnEsc: true,
|
|
385
349
|
interactive: true,
|
|
386
|
-
currentPlacement: void 0
|
|
387
|
-
|
|
388
|
-
positioning:
|
|
389
|
-
placement: "bottom"
|
|
390
|
-
|
|
391
|
-
|
|
350
|
+
currentPlacement: void 0,
|
|
351
|
+
...ctx,
|
|
352
|
+
positioning: {
|
|
353
|
+
placement: "bottom",
|
|
354
|
+
...ctx.positioning
|
|
355
|
+
}
|
|
356
|
+
},
|
|
392
357
|
computed: {
|
|
393
358
|
hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
|
|
394
359
|
},
|
|
@@ -399,10 +364,7 @@ function machine(ctx = {}) {
|
|
|
399
364
|
states: {
|
|
400
365
|
unknown: {
|
|
401
366
|
on: {
|
|
402
|
-
SETUP:
|
|
403
|
-
target: "closed",
|
|
404
|
-
actions: "setupDocument"
|
|
405
|
-
}
|
|
367
|
+
SETUP: "closed"
|
|
406
368
|
}
|
|
407
369
|
},
|
|
408
370
|
closed: {
|
|
@@ -491,7 +453,8 @@ function machine(ctx = {}) {
|
|
|
491
453
|
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
492
454
|
let cleanup;
|
|
493
455
|
raf(() => {
|
|
494
|
-
cleanup = getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2),
|
|
456
|
+
cleanup = getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
|
|
457
|
+
...ctx2.positioning,
|
|
495
458
|
onComplete(data) {
|
|
496
459
|
ctx2.currentPlacement = data.placement;
|
|
497
460
|
ctx2.isPlacementComplete = true;
|
|
@@ -500,7 +463,7 @@ function machine(ctx = {}) {
|
|
|
500
463
|
ctx2.currentPlacement = void 0;
|
|
501
464
|
ctx2.isPlacementComplete = false;
|
|
502
465
|
}
|
|
503
|
-
})
|
|
466
|
+
});
|
|
504
467
|
});
|
|
505
468
|
return cleanup;
|
|
506
469
|
},
|
|
@@ -530,7 +493,7 @@ function machine(ctx = {}) {
|
|
|
530
493
|
},
|
|
531
494
|
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
532
495
|
if (!isSafari())
|
|
533
|
-
return
|
|
496
|
+
return;
|
|
534
497
|
const doc = dom.getDoc(ctx2);
|
|
535
498
|
return addPointerEvent(doc, "pointermove", (event) => {
|
|
536
499
|
const selector = "[data-part=trigger][data-expanded]";
|
|
@@ -551,13 +514,6 @@ function machine(ctx = {}) {
|
|
|
551
514
|
}
|
|
552
515
|
},
|
|
553
516
|
actions: {
|
|
554
|
-
setupDocument(ctx2, evt) {
|
|
555
|
-
ctx2.id = evt.id;
|
|
556
|
-
if (evt.doc)
|
|
557
|
-
ctx2.doc = ref(evt.doc);
|
|
558
|
-
if (evt.root)
|
|
559
|
-
ctx2.rootNode = ref(evt.root);
|
|
560
|
-
},
|
|
561
517
|
setGlobalId(ctx2) {
|
|
562
518
|
store.setId(ctx2.id);
|
|
563
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,18 +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/
|
|
34
|
-
"@zag-js/
|
|
35
|
-
|
|
32
|
+
"@zag-js/core": "0.1.9",
|
|
33
|
+
"@zag-js/popper": "0.1.9",
|
|
34
|
+
"@zag-js/types": "0.2.3"
|
|
35
|
+
},
|
|
36
|
+
"devDependencies": {
|
|
37
|
+
"@zag-js/dom-utils": "0.1.8",
|
|
38
|
+
"@zag-js/utils": "0.1.3"
|
|
36
39
|
},
|
|
37
40
|
"scripts": {
|
|
38
|
-
"build
|
|
39
|
-
"start": "
|
|
40
|
-
"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",
|
|
41
44
|
"test": "jest --config ../../../jest.config.js --rootDir . --passWithNoTests",
|
|
42
45
|
"lint": "eslint src --ext .ts,.tsx",
|
|
43
|
-
"test
|
|
44
|
-
"test
|
|
46
|
+
"test-ci": "pnpm test --ci --runInBand",
|
|
47
|
+
"test-watch": "pnpm test --watch -u",
|
|
48
|
+
"typecheck": "tsc --noEmit"
|
|
45
49
|
}
|
|
46
|
-
}
|
|
50
|
+
}
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { PropTypes, ReactPropTypes } from "@zag-js/types";
|
|
2
|
-
import { Send, State } from "./tooltip.types";
|
|
3
|
-
export declare function connect<T extends PropTypes = ReactPropTypes>(state: State, send: Send, normalize?: import("@zag-js/types").NormalizeProps): {
|
|
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,18 +0,0 @@
|
|
|
1
|
-
import { MachineContext as Ctx } from "./tooltip.types";
|
|
2
|
-
export declare const dom: {
|
|
3
|
-
getDoc: (ctx: Ctx) => Document;
|
|
4
|
-
getWin: (ctx: Ctx) => Window & typeof globalThis;
|
|
5
|
-
getRootNode: (ctx: Ctx) => Document | ShadowRoot;
|
|
6
|
-
getTriggerId: (ctx: Ctx) => string;
|
|
7
|
-
getContentId: (ctx: Ctx) => string;
|
|
8
|
-
getArrowId: (ctx: Ctx) => string;
|
|
9
|
-
getPositionerId: (ctx: Ctx) => string;
|
|
10
|
-
portalId: string;
|
|
11
|
-
getTriggerEl: (ctx: Ctx) => HTMLElement;
|
|
12
|
-
getContentEl: (ctx: Ctx) => HTMLElement;
|
|
13
|
-
getPositionerEl: (ctx: Ctx) => HTMLElement;
|
|
14
|
-
getArrowEl: (ctx: Ctx) => HTMLElement;
|
|
15
|
-
getScrollParent: (ctx: Ctx) => HTMLElement;
|
|
16
|
-
getPortalEl: (ctx: Ctx) => HTMLElement;
|
|
17
|
-
createPortalEl: (ctx: Ctx) => HTMLElement;
|
|
18
|
-
};
|
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 { Placement, PositioningOptions } from "@zag-js/popper";
|
|
3
|
-
import { RootProperties } from "@zag-js/types";
|
|
4
|
-
declare type ElementIds = Partial<{
|
|
5
|
-
trigger: string;
|
|
6
|
-
content: string;
|
|
7
|
-
}>;
|
|
8
|
-
declare type PublicContext = {
|
|
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 = Partial<PublicContext>;
|
|
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 {};
|