@zag-js/tooltip 0.2.10 → 0.2.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunk-3LXHM7BW.mjs +17 -0
- package/dist/{chunk-ILEFGJ44.mjs → chunk-463EFHFN.mjs} +8 -124
- package/dist/{chunk-V3RC3IDL.mjs → chunk-W3OSVXCZ.mjs} +15 -20
- package/dist/index.js +32 -235
- package/dist/index.mjs +3 -3
- package/dist/tooltip.connect.d.ts +12 -0
- package/dist/tooltip.connect.js +19 -99
- package/dist/tooltip.connect.mjs +2 -2
- package/dist/tooltip.dom.d.ts +4 -1
- package/dist/tooltip.dom.js +3 -78
- package/dist/tooltip.dom.mjs +1 -1
- package/dist/tooltip.machine.js +16 -216
- package/dist/tooltip.machine.mjs +2 -2
- package/package.json +8 -6
- package/dist/chunk-W5WZYXHV.mjs +0 -105
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
// src/tooltip.dom.ts
|
|
2
|
+
import { createScope, getScrollParent } from "@zag-js/dom-query";
|
|
3
|
+
var dom = createScope({
|
|
4
|
+
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
5
|
+
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
6
|
+
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
7
|
+
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
8
|
+
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
9
|
+
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
10
|
+
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
11
|
+
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
12
|
+
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
13
|
+
});
|
|
14
|
+
|
|
15
|
+
export {
|
|
16
|
+
dom
|
|
17
|
+
};
|
|
@@ -1,131 +1,16 @@
|
|
|
1
1
|
import {
|
|
2
|
-
dom
|
|
3
|
-
|
|
4
|
-
isHTMLElement
|
|
5
|
-
} from "./chunk-W5WZYXHV.mjs";
|
|
2
|
+
dom
|
|
3
|
+
} from "./chunk-3LXHM7BW.mjs";
|
|
6
4
|
import {
|
|
7
5
|
store
|
|
8
6
|
} from "./chunk-GQYNO326.mjs";
|
|
9
7
|
|
|
10
8
|
// src/tooltip.machine.ts
|
|
11
9
|
import { createMachine, subscribe } from "@zag-js/core";
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
var runIfFn = (v, ...a) => {
|
|
15
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
16
|
-
return res ?? void 0;
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
// ../../utilities/core/src/guard.ts
|
|
20
|
-
var isArray = (v) => Array.isArray(v);
|
|
21
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
22
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
23
|
-
|
|
24
|
-
// ../../utilities/core/src/object.ts
|
|
25
|
-
function compact(obj) {
|
|
26
|
-
if (obj === void 0)
|
|
27
|
-
return obj;
|
|
28
|
-
return Object.fromEntries(
|
|
29
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
30
|
-
);
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
// ../../utilities/dom/src/platform.ts
|
|
34
|
-
var isDom = () => typeof window !== "undefined";
|
|
35
|
-
function getPlatform() {
|
|
36
|
-
const agent = navigator.userAgentData;
|
|
37
|
-
return agent?.platform ?? navigator.platform;
|
|
38
|
-
}
|
|
39
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
40
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
41
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
42
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
43
|
-
|
|
44
|
-
// ../../utilities/dom/src/event.ts
|
|
45
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
46
|
-
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
47
|
-
var supportsMouseEvent = () => isDom() && window.onmousedown === null;
|
|
48
|
-
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
49
|
-
|
|
50
|
-
// ../../utilities/dom/src/listener.ts
|
|
51
|
-
var isRef = (v) => hasProp(v, "current");
|
|
52
|
-
var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
53
|
-
function extractInfo(event, type = "page") {
|
|
54
|
-
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
|
|
55
|
-
return {
|
|
56
|
-
point: {
|
|
57
|
-
x: point[`${type}X`],
|
|
58
|
-
y: point[`${type}Y`]
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
63
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
64
|
-
node?.addEventListener(eventName, handler, options);
|
|
65
|
-
return () => {
|
|
66
|
-
node?.removeEventListener(eventName, handler, options);
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
function addPointerEvent(target, event, listener, options) {
|
|
70
|
-
const type = getEventName(event) ?? event;
|
|
71
|
-
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
72
|
-
}
|
|
73
|
-
function wrapHandler(fn, filter = false) {
|
|
74
|
-
const listener = (event) => {
|
|
75
|
-
fn(event, extractInfo(event));
|
|
76
|
-
};
|
|
77
|
-
return filter ? filterPrimaryPointer(listener) : listener;
|
|
78
|
-
}
|
|
79
|
-
function filterPrimaryPointer(fn) {
|
|
80
|
-
return (event) => {
|
|
81
|
-
const win = event.view ?? window;
|
|
82
|
-
const isMouseEvent = event instanceof win.MouseEvent;
|
|
83
|
-
const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
|
|
84
|
-
if (isPrimary)
|
|
85
|
-
fn(event);
|
|
86
|
-
};
|
|
87
|
-
}
|
|
88
|
-
var mouseEventNames = {
|
|
89
|
-
pointerdown: "mousedown",
|
|
90
|
-
pointermove: "mousemove",
|
|
91
|
-
pointerup: "mouseup",
|
|
92
|
-
pointercancel: "mousecancel",
|
|
93
|
-
pointerover: "mouseover",
|
|
94
|
-
pointerout: "mouseout",
|
|
95
|
-
pointerenter: "mouseenter",
|
|
96
|
-
pointerleave: "mouseleave"
|
|
97
|
-
};
|
|
98
|
-
var touchEventNames = {
|
|
99
|
-
pointerdown: "touchstart",
|
|
100
|
-
pointermove: "touchmove",
|
|
101
|
-
pointerup: "touchend",
|
|
102
|
-
pointercancel: "touchcancel"
|
|
103
|
-
};
|
|
104
|
-
function getEventName(evt) {
|
|
105
|
-
if (supportsPointerEvent())
|
|
106
|
-
return evt;
|
|
107
|
-
if (supportsTouchEvent())
|
|
108
|
-
return touchEventNames[evt];
|
|
109
|
-
if (supportsMouseEvent())
|
|
110
|
-
return mouseEventNames[evt];
|
|
111
|
-
return evt;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
// ../../utilities/dom/src/next-tick.ts
|
|
115
|
-
function raf(fn) {
|
|
116
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
117
|
-
return function cleanup() {
|
|
118
|
-
globalThis.cancelAnimationFrame(id);
|
|
119
|
-
};
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
// ../../utilities/dom/src/pointerlock.ts
|
|
123
|
-
function addPointerlockChangeListener(doc, fn) {
|
|
124
|
-
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
// src/tooltip.machine.ts
|
|
10
|
+
import { addDomEvent } from "@zag-js/dom-event";
|
|
11
|
+
import { getScrollParents, isHTMLElement, isSafari, raf } from "@zag-js/dom-query";
|
|
128
12
|
import { getPlacement } from "@zag-js/popper";
|
|
13
|
+
import { compact } from "@zag-js/utils";
|
|
129
14
|
function machine(userContext) {
|
|
130
15
|
const ctx = compact(userContext);
|
|
131
16
|
return createMachine(
|
|
@@ -258,9 +143,8 @@ function machine(userContext) {
|
|
|
258
143
|
return cleanup;
|
|
259
144
|
},
|
|
260
145
|
trackPointerlockChange(ctx2, _evt, { send }) {
|
|
261
|
-
|
|
262
|
-
|
|
263
|
-
});
|
|
146
|
+
const onChange = () => send("POINTER_LOCK_CHANGE");
|
|
147
|
+
return addDomEvent(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
|
|
264
148
|
},
|
|
265
149
|
trackScroll(ctx2, _evt, { send }) {
|
|
266
150
|
const trigger = dom.getTriggerEl(ctx2);
|
|
@@ -285,7 +169,7 @@ function machine(userContext) {
|
|
|
285
169
|
if (!isSafari())
|
|
286
170
|
return;
|
|
287
171
|
const doc = dom.getDoc(ctx2);
|
|
288
|
-
return
|
|
172
|
+
return addDomEvent(doc, "pointermove", (event) => {
|
|
289
173
|
const selector = "[data-part=trigger][data-expanded]";
|
|
290
174
|
if (isHTMLElement(event.target) && event.target.closest(selector))
|
|
291
175
|
return;
|
|
@@ -3,32 +3,15 @@ import {
|
|
|
3
3
|
} from "./chunk-RRQRIZBA.mjs";
|
|
4
4
|
import {
|
|
5
5
|
dom
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-3LXHM7BW.mjs";
|
|
7
7
|
import {
|
|
8
8
|
store
|
|
9
9
|
} from "./chunk-GQYNO326.mjs";
|
|
10
10
|
|
|
11
|
-
// ../../utilities/dom/src/attrs.ts
|
|
12
|
-
var dataAttr = (guard) => {
|
|
13
|
-
return guard ? "" : void 0;
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
// ../../utilities/dom/src/visually-hidden.ts
|
|
17
|
-
var visuallyHiddenStyle = {
|
|
18
|
-
border: "0",
|
|
19
|
-
clip: "rect(0 0 0 0)",
|
|
20
|
-
height: "1px",
|
|
21
|
-
margin: "-1px",
|
|
22
|
-
overflow: "hidden",
|
|
23
|
-
padding: "0",
|
|
24
|
-
position: "absolute",
|
|
25
|
-
width: "1px",
|
|
26
|
-
whiteSpace: "nowrap",
|
|
27
|
-
wordWrap: "normal"
|
|
28
|
-
};
|
|
29
|
-
|
|
30
11
|
// src/tooltip.connect.ts
|
|
12
|
+
import { dataAttr } from "@zag-js/dom-query";
|
|
31
13
|
import { getPlacementStyles } from "@zag-js/popper";
|
|
14
|
+
import { visuallyHiddenStyle } from "@zag-js/visually-hidden";
|
|
32
15
|
function connect(state, send, normalize) {
|
|
33
16
|
const id = state.context.id;
|
|
34
17
|
const hasAriaLabel = state.context.hasAriaLabel;
|
|
@@ -41,13 +24,25 @@ function connect(state, send, normalize) {
|
|
|
41
24
|
placement: state.context.currentPlacement
|
|
42
25
|
});
|
|
43
26
|
return {
|
|
27
|
+
/**
|
|
28
|
+
* Whether the tooltip is open.
|
|
29
|
+
*/
|
|
44
30
|
isOpen,
|
|
31
|
+
/**
|
|
32
|
+
* Function to open the tooltip.
|
|
33
|
+
*/
|
|
45
34
|
open() {
|
|
46
35
|
send("OPEN");
|
|
47
36
|
},
|
|
37
|
+
/**
|
|
38
|
+
* Function to close the tooltip.
|
|
39
|
+
*/
|
|
48
40
|
close() {
|
|
49
41
|
send("CLOSE");
|
|
50
42
|
},
|
|
43
|
+
/**
|
|
44
|
+
* Returns the animation state of the tooltip.
|
|
45
|
+
*/
|
|
51
46
|
getAnimationState() {
|
|
52
47
|
return {
|
|
53
48
|
enter: store.prevId === null && id === store.id,
|
package/dist/index.js
CHANGED
|
@@ -31,231 +31,14 @@ var import_anatomy = require("@zag-js/anatomy");
|
|
|
31
31
|
var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
|
|
32
32
|
var parts = anatomy.build();
|
|
33
33
|
|
|
34
|
-
// ../../utilities/dom/src/attrs.ts
|
|
35
|
-
var dataAttr = (guard) => {
|
|
36
|
-
return guard ? "" : void 0;
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
// ../../utilities/dom/src/get-computed-style.ts
|
|
40
|
-
function getCache() {
|
|
41
|
-
const g = globalThis;
|
|
42
|
-
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
43
|
-
return g.__styleCache;
|
|
44
|
-
}
|
|
45
|
-
function getComputedStyle(el) {
|
|
46
|
-
if (!el)
|
|
47
|
-
return {};
|
|
48
|
-
const cache = getCache();
|
|
49
|
-
let style = cache.get(el);
|
|
50
|
-
if (!style) {
|
|
51
|
-
const win = el?.ownerDocument.defaultView ?? window;
|
|
52
|
-
style = win.getComputedStyle(el);
|
|
53
|
-
cache.set(el, style);
|
|
54
|
-
}
|
|
55
|
-
return style;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
// ../../utilities/core/src/functions.ts
|
|
59
|
-
var runIfFn = (v, ...a) => {
|
|
60
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
61
|
-
return res ?? void 0;
|
|
62
|
-
};
|
|
63
|
-
|
|
64
|
-
// ../../utilities/core/src/guard.ts
|
|
65
|
-
var isArray = (v) => Array.isArray(v);
|
|
66
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
67
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
68
|
-
|
|
69
|
-
// ../../utilities/core/src/object.ts
|
|
70
|
-
function compact(obj) {
|
|
71
|
-
if (obj === void 0)
|
|
72
|
-
return obj;
|
|
73
|
-
return Object.fromEntries(
|
|
74
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
75
|
-
);
|
|
76
|
-
}
|
|
77
|
-
|
|
78
|
-
// ../../utilities/dom/src/platform.ts
|
|
79
|
-
var isDom = () => typeof window !== "undefined";
|
|
80
|
-
function getPlatform() {
|
|
81
|
-
const agent = navigator.userAgentData;
|
|
82
|
-
return agent?.platform ?? navigator.platform;
|
|
83
|
-
}
|
|
84
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
85
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
86
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
87
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
88
|
-
|
|
89
|
-
// ../../utilities/dom/src/query.ts
|
|
90
|
-
function isDocument(el) {
|
|
91
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
92
|
-
}
|
|
93
|
-
function isWindow(value) {
|
|
94
|
-
return value?.toString() === "[object Window]";
|
|
95
|
-
}
|
|
96
|
-
function getDocument(el) {
|
|
97
|
-
if (isWindow(el))
|
|
98
|
-
return el.document;
|
|
99
|
-
if (isDocument(el))
|
|
100
|
-
return el;
|
|
101
|
-
return el?.ownerDocument ?? document;
|
|
102
|
-
}
|
|
103
|
-
function getWindow(el) {
|
|
104
|
-
return el?.ownerDocument.defaultView ?? window;
|
|
105
|
-
}
|
|
106
|
-
function getNodeName(node) {
|
|
107
|
-
return isWindow(node) ? "" : node?.localName ?? "";
|
|
108
|
-
}
|
|
109
|
-
function getParent(el) {
|
|
110
|
-
const doc = getDocument(el);
|
|
111
|
-
if (getNodeName(el) === "html")
|
|
112
|
-
return el;
|
|
113
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
114
|
-
}
|
|
115
|
-
function defineDomHelpers(helpers) {
|
|
116
|
-
const dom2 = {
|
|
117
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
118
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
119
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
120
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
121
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
122
|
-
};
|
|
123
|
-
return {
|
|
124
|
-
...dom2,
|
|
125
|
-
...helpers
|
|
126
|
-
};
|
|
127
|
-
}
|
|
128
|
-
function isHTMLElement(v) {
|
|
129
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
// ../../utilities/dom/src/event.ts
|
|
133
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
134
|
-
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
135
|
-
var supportsMouseEvent = () => isDom() && window.onmousedown === null;
|
|
136
|
-
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
137
|
-
|
|
138
|
-
// ../../utilities/dom/src/listener.ts
|
|
139
|
-
var isRef = (v) => hasProp(v, "current");
|
|
140
|
-
var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
141
|
-
function extractInfo(event, type = "page") {
|
|
142
|
-
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
|
|
143
|
-
return {
|
|
144
|
-
point: {
|
|
145
|
-
x: point[`${type}X`],
|
|
146
|
-
y: point[`${type}Y`]
|
|
147
|
-
}
|
|
148
|
-
};
|
|
149
|
-
}
|
|
150
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
151
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
152
|
-
node?.addEventListener(eventName, handler, options);
|
|
153
|
-
return () => {
|
|
154
|
-
node?.removeEventListener(eventName, handler, options);
|
|
155
|
-
};
|
|
156
|
-
}
|
|
157
|
-
function addPointerEvent(target, event, listener, options) {
|
|
158
|
-
const type = getEventName(event) ?? event;
|
|
159
|
-
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
160
|
-
}
|
|
161
|
-
function wrapHandler(fn, filter = false) {
|
|
162
|
-
const listener = (event) => {
|
|
163
|
-
fn(event, extractInfo(event));
|
|
164
|
-
};
|
|
165
|
-
return filter ? filterPrimaryPointer(listener) : listener;
|
|
166
|
-
}
|
|
167
|
-
function filterPrimaryPointer(fn) {
|
|
168
|
-
return (event) => {
|
|
169
|
-
const win = event.view ?? window;
|
|
170
|
-
const isMouseEvent = event instanceof win.MouseEvent;
|
|
171
|
-
const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
|
|
172
|
-
if (isPrimary)
|
|
173
|
-
fn(event);
|
|
174
|
-
};
|
|
175
|
-
}
|
|
176
|
-
var mouseEventNames = {
|
|
177
|
-
pointerdown: "mousedown",
|
|
178
|
-
pointermove: "mousemove",
|
|
179
|
-
pointerup: "mouseup",
|
|
180
|
-
pointercancel: "mousecancel",
|
|
181
|
-
pointerover: "mouseover",
|
|
182
|
-
pointerout: "mouseout",
|
|
183
|
-
pointerenter: "mouseenter",
|
|
184
|
-
pointerleave: "mouseleave"
|
|
185
|
-
};
|
|
186
|
-
var touchEventNames = {
|
|
187
|
-
pointerdown: "touchstart",
|
|
188
|
-
pointermove: "touchmove",
|
|
189
|
-
pointerup: "touchend",
|
|
190
|
-
pointercancel: "touchcancel"
|
|
191
|
-
};
|
|
192
|
-
function getEventName(evt) {
|
|
193
|
-
if (supportsPointerEvent())
|
|
194
|
-
return evt;
|
|
195
|
-
if (supportsTouchEvent())
|
|
196
|
-
return touchEventNames[evt];
|
|
197
|
-
if (supportsMouseEvent())
|
|
198
|
-
return mouseEventNames[evt];
|
|
199
|
-
return evt;
|
|
200
|
-
}
|
|
201
|
-
|
|
202
|
-
// ../../utilities/dom/src/next-tick.ts
|
|
203
|
-
function raf(fn) {
|
|
204
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
205
|
-
return function cleanup() {
|
|
206
|
-
globalThis.cancelAnimationFrame(id);
|
|
207
|
-
};
|
|
208
|
-
}
|
|
209
|
-
|
|
210
|
-
// ../../utilities/dom/src/pointerlock.ts
|
|
211
|
-
function addPointerlockChangeListener(doc, fn) {
|
|
212
|
-
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
213
|
-
}
|
|
214
|
-
|
|
215
|
-
// ../../utilities/dom/src/scrollable.ts
|
|
216
|
-
function isScrollParent(el) {
|
|
217
|
-
const { overflow, overflowX, overflowY } = getComputedStyle(el);
|
|
218
|
-
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
|
219
|
-
}
|
|
220
|
-
function getScrollParent(el) {
|
|
221
|
-
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
222
|
-
return getDocument(el).body;
|
|
223
|
-
}
|
|
224
|
-
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
225
|
-
return el;
|
|
226
|
-
}
|
|
227
|
-
return getScrollParent(getParent(el));
|
|
228
|
-
}
|
|
229
|
-
function getScrollParents(el, list = []) {
|
|
230
|
-
const scrollParent = getScrollParent(el);
|
|
231
|
-
const isBody = scrollParent === getDocument(el).body;
|
|
232
|
-
const win = getWindow(scrollParent);
|
|
233
|
-
const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
|
234
|
-
const parents = list.concat(target);
|
|
235
|
-
if (isBody)
|
|
236
|
-
return parents;
|
|
237
|
-
return parents.concat(getScrollParents(getParent(target)));
|
|
238
|
-
}
|
|
239
|
-
|
|
240
|
-
// ../../utilities/dom/src/visually-hidden.ts
|
|
241
|
-
var visuallyHiddenStyle = {
|
|
242
|
-
border: "0",
|
|
243
|
-
clip: "rect(0 0 0 0)",
|
|
244
|
-
height: "1px",
|
|
245
|
-
margin: "-1px",
|
|
246
|
-
overflow: "hidden",
|
|
247
|
-
padding: "0",
|
|
248
|
-
position: "absolute",
|
|
249
|
-
width: "1px",
|
|
250
|
-
whiteSpace: "nowrap",
|
|
251
|
-
wordWrap: "normal"
|
|
252
|
-
};
|
|
253
|
-
|
|
254
34
|
// src/tooltip.connect.ts
|
|
35
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
255
36
|
var import_popper = require("@zag-js/popper");
|
|
37
|
+
var import_visually_hidden = require("@zag-js/visually-hidden");
|
|
256
38
|
|
|
257
39
|
// src/tooltip.dom.ts
|
|
258
|
-
var
|
|
40
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
41
|
+
var dom = (0, import_dom_query.createScope)({
|
|
259
42
|
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
260
43
|
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
261
44
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
@@ -264,7 +47,7 @@ var dom = defineDomHelpers({
|
|
|
264
47
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
265
48
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
266
49
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
267
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
50
|
+
getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
|
|
268
51
|
});
|
|
269
52
|
|
|
270
53
|
// src/tooltip.store.ts
|
|
@@ -291,13 +74,25 @@ function connect(state, send, normalize) {
|
|
|
291
74
|
placement: state.context.currentPlacement
|
|
292
75
|
});
|
|
293
76
|
return {
|
|
77
|
+
/**
|
|
78
|
+
* Whether the tooltip is open.
|
|
79
|
+
*/
|
|
294
80
|
isOpen,
|
|
81
|
+
/**
|
|
82
|
+
* Function to open the tooltip.
|
|
83
|
+
*/
|
|
295
84
|
open() {
|
|
296
85
|
send("OPEN");
|
|
297
86
|
},
|
|
87
|
+
/**
|
|
88
|
+
* Function to close the tooltip.
|
|
89
|
+
*/
|
|
298
90
|
close() {
|
|
299
91
|
send("CLOSE");
|
|
300
92
|
},
|
|
93
|
+
/**
|
|
94
|
+
* Returns the animation state of the tooltip.
|
|
95
|
+
*/
|
|
301
96
|
getAnimationState() {
|
|
302
97
|
return {
|
|
303
98
|
enter: store.prevId === null && id === store.id,
|
|
@@ -307,7 +102,7 @@ function connect(state, send, normalize) {
|
|
|
307
102
|
triggerProps: normalize.button({
|
|
308
103
|
...parts.trigger.attrs,
|
|
309
104
|
id: triggerId,
|
|
310
|
-
"data-expanded": dataAttr(isOpen),
|
|
105
|
+
"data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
|
|
311
106
|
"aria-describedby": isOpen ? contentId : void 0,
|
|
312
107
|
onClick() {
|
|
313
108
|
send("CLICK");
|
|
@@ -377,7 +172,7 @@ function connect(state, send, normalize) {
|
|
|
377
172
|
...parts.label.attrs,
|
|
378
173
|
id: contentId,
|
|
379
174
|
role: "tooltip",
|
|
380
|
-
style: visuallyHiddenStyle,
|
|
175
|
+
style: import_visually_hidden.visuallyHiddenStyle,
|
|
381
176
|
children: state.context["aria-label"]
|
|
382
177
|
})
|
|
383
178
|
};
|
|
@@ -385,9 +180,12 @@ function connect(state, send, normalize) {
|
|
|
385
180
|
|
|
386
181
|
// src/tooltip.machine.ts
|
|
387
182
|
var import_core2 = require("@zag-js/core");
|
|
183
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
184
|
+
var import_dom_query3 = require("@zag-js/dom-query");
|
|
388
185
|
var import_popper2 = require("@zag-js/popper");
|
|
186
|
+
var import_utils = require("@zag-js/utils");
|
|
389
187
|
function machine(userContext) {
|
|
390
|
-
const ctx = compact(userContext);
|
|
188
|
+
const ctx = (0, import_utils.compact)(userContext);
|
|
391
189
|
return (0, import_core2.createMachine)(
|
|
392
190
|
{
|
|
393
191
|
id: "tooltip",
|
|
@@ -502,7 +300,7 @@ function machine(userContext) {
|
|
|
502
300
|
computePlacement(ctx2) {
|
|
503
301
|
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
504
302
|
let cleanup;
|
|
505
|
-
raf(() => {
|
|
303
|
+
(0, import_dom_query3.raf)(() => {
|
|
506
304
|
cleanup = (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
|
|
507
305
|
...ctx2.positioning,
|
|
508
306
|
onComplete(data) {
|
|
@@ -518,17 +316,16 @@ function machine(userContext) {
|
|
|
518
316
|
return cleanup;
|
|
519
317
|
},
|
|
520
318
|
trackPointerlockChange(ctx2, _evt, { send }) {
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
});
|
|
319
|
+
const onChange = () => send("POINTER_LOCK_CHANGE");
|
|
320
|
+
return (0, import_dom_event.addDomEvent)(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
|
|
524
321
|
},
|
|
525
322
|
trackScroll(ctx2, _evt, { send }) {
|
|
526
323
|
const trigger = dom.getTriggerEl(ctx2);
|
|
527
324
|
if (!trigger)
|
|
528
325
|
return;
|
|
529
|
-
const cleanups = getScrollParents(trigger).map((el) => {
|
|
326
|
+
const cleanups = (0, import_dom_query3.getScrollParents)(trigger).map((el) => {
|
|
530
327
|
const opts = { passive: true, capture: true };
|
|
531
|
-
return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
328
|
+
return (0, import_dom_event.addDomEvent)(el, "scroll", () => send("SCROLL"), opts);
|
|
532
329
|
});
|
|
533
330
|
return () => {
|
|
534
331
|
cleanups.forEach((fn) => fn?.());
|
|
@@ -542,12 +339,12 @@ function machine(userContext) {
|
|
|
542
339
|
});
|
|
543
340
|
},
|
|
544
341
|
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
545
|
-
if (!isSafari())
|
|
342
|
+
if (!(0, import_dom_query3.isSafari)())
|
|
546
343
|
return;
|
|
547
344
|
const doc = dom.getDoc(ctx2);
|
|
548
|
-
return
|
|
345
|
+
return (0, import_dom_event.addDomEvent)(doc, "pointermove", (event) => {
|
|
549
346
|
const selector = "[data-part=trigger][data-expanded]";
|
|
550
|
-
if (isHTMLElement(event.target) && event.target.closest(selector))
|
|
347
|
+
if ((0, import_dom_query3.isHTMLElement)(event.target) && event.target.closest(selector))
|
|
551
348
|
return;
|
|
552
349
|
send("POINTER_LEAVE");
|
|
553
350
|
});
|
|
@@ -556,7 +353,7 @@ function machine(userContext) {
|
|
|
556
353
|
if (!ctx2.closeOnEsc)
|
|
557
354
|
return;
|
|
558
355
|
const doc = dom.getDoc(ctx2);
|
|
559
|
-
return addDomEvent(doc, "keydown", (event) => {
|
|
356
|
+
return (0, import_dom_event.addDomEvent)(doc, "keydown", (event) => {
|
|
560
357
|
if (event.key === "Escape") {
|
|
561
358
|
send("ESCAPE");
|
|
562
359
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import {
|
|
2
2
|
connect
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-W3OSVXCZ.mjs";
|
|
4
4
|
import {
|
|
5
5
|
anatomy
|
|
6
6
|
} from "./chunk-RRQRIZBA.mjs";
|
|
7
7
|
import {
|
|
8
8
|
machine
|
|
9
|
-
} from "./chunk-
|
|
10
|
-
import "./chunk-
|
|
9
|
+
} from "./chunk-463EFHFN.mjs";
|
|
10
|
+
import "./chunk-3LXHM7BW.mjs";
|
|
11
11
|
import "./chunk-GQYNO326.mjs";
|
|
12
12
|
export {
|
|
13
13
|
anatomy,
|
|
@@ -4,9 +4,21 @@ import '@zag-js/core';
|
|
|
4
4
|
import '@zag-js/popper';
|
|
5
5
|
|
|
6
6
|
declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
|
|
7
|
+
/**
|
|
8
|
+
* Whether the tooltip is open.
|
|
9
|
+
*/
|
|
7
10
|
isOpen: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Function to open the tooltip.
|
|
13
|
+
*/
|
|
8
14
|
open(): void;
|
|
15
|
+
/**
|
|
16
|
+
* Function to close the tooltip.
|
|
17
|
+
*/
|
|
9
18
|
close(): void;
|
|
19
|
+
/**
|
|
20
|
+
* Returns the animation state of the tooltip.
|
|
21
|
+
*/
|
|
10
22
|
getAnimationState(): {
|
|
11
23
|
enter: boolean;
|
|
12
24
|
exit: boolean;
|
package/dist/tooltip.connect.js
CHANGED
|
@@ -23,102 +23,9 @@ __export(tooltip_connect_exports, {
|
|
|
23
23
|
connect: () => connect
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(tooltip_connect_exports);
|
|
26
|
-
|
|
27
|
-
// ../../utilities/dom/src/attrs.ts
|
|
28
|
-
var dataAttr = (guard) => {
|
|
29
|
-
return guard ? "" : void 0;
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
// ../../utilities/dom/src/get-computed-style.ts
|
|
33
|
-
function getCache() {
|
|
34
|
-
const g = globalThis;
|
|
35
|
-
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
36
|
-
return g.__styleCache;
|
|
37
|
-
}
|
|
38
|
-
function getComputedStyle(el) {
|
|
39
|
-
if (!el)
|
|
40
|
-
return {};
|
|
41
|
-
const cache = getCache();
|
|
42
|
-
let style = cache.get(el);
|
|
43
|
-
if (!style) {
|
|
44
|
-
const win = el?.ownerDocument.defaultView ?? window;
|
|
45
|
-
style = win.getComputedStyle(el);
|
|
46
|
-
cache.set(el, style);
|
|
47
|
-
}
|
|
48
|
-
return style;
|
|
49
|
-
}
|
|
50
|
-
|
|
51
|
-
// ../../utilities/dom/src/query.ts
|
|
52
|
-
function isDocument(el) {
|
|
53
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
54
|
-
}
|
|
55
|
-
function isWindow(value) {
|
|
56
|
-
return value?.toString() === "[object Window]";
|
|
57
|
-
}
|
|
58
|
-
function getDocument(el) {
|
|
59
|
-
if (isWindow(el))
|
|
60
|
-
return el.document;
|
|
61
|
-
if (isDocument(el))
|
|
62
|
-
return el;
|
|
63
|
-
return el?.ownerDocument ?? document;
|
|
64
|
-
}
|
|
65
|
-
function getNodeName(node) {
|
|
66
|
-
return isWindow(node) ? "" : node?.localName ?? "";
|
|
67
|
-
}
|
|
68
|
-
function getParent(el) {
|
|
69
|
-
const doc = getDocument(el);
|
|
70
|
-
if (getNodeName(el) === "html")
|
|
71
|
-
return el;
|
|
72
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
73
|
-
}
|
|
74
|
-
function defineDomHelpers(helpers) {
|
|
75
|
-
const dom2 = {
|
|
76
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
77
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
78
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
79
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
80
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
81
|
-
};
|
|
82
|
-
return {
|
|
83
|
-
...dom2,
|
|
84
|
-
...helpers
|
|
85
|
-
};
|
|
86
|
-
}
|
|
87
|
-
function isHTMLElement(v) {
|
|
88
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
// ../../utilities/dom/src/scrollable.ts
|
|
92
|
-
function isScrollParent(el) {
|
|
93
|
-
const { overflow, overflowX, overflowY } = getComputedStyle(el);
|
|
94
|
-
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
|
95
|
-
}
|
|
96
|
-
function getScrollParent(el) {
|
|
97
|
-
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
98
|
-
return getDocument(el).body;
|
|
99
|
-
}
|
|
100
|
-
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
101
|
-
return el;
|
|
102
|
-
}
|
|
103
|
-
return getScrollParent(getParent(el));
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
// ../../utilities/dom/src/visually-hidden.ts
|
|
107
|
-
var visuallyHiddenStyle = {
|
|
108
|
-
border: "0",
|
|
109
|
-
clip: "rect(0 0 0 0)",
|
|
110
|
-
height: "1px",
|
|
111
|
-
margin: "-1px",
|
|
112
|
-
overflow: "hidden",
|
|
113
|
-
padding: "0",
|
|
114
|
-
position: "absolute",
|
|
115
|
-
width: "1px",
|
|
116
|
-
whiteSpace: "nowrap",
|
|
117
|
-
wordWrap: "normal"
|
|
118
|
-
};
|
|
119
|
-
|
|
120
|
-
// src/tooltip.connect.ts
|
|
26
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
121
27
|
var import_popper = require("@zag-js/popper");
|
|
28
|
+
var import_visually_hidden = require("@zag-js/visually-hidden");
|
|
122
29
|
|
|
123
30
|
// src/tooltip.anatomy.ts
|
|
124
31
|
var import_anatomy = require("@zag-js/anatomy");
|
|
@@ -126,7 +33,8 @@ var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arr
|
|
|
126
33
|
var parts = anatomy.build();
|
|
127
34
|
|
|
128
35
|
// src/tooltip.dom.ts
|
|
129
|
-
var
|
|
36
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
37
|
+
var dom = (0, import_dom_query.createScope)({
|
|
130
38
|
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
131
39
|
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
132
40
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
@@ -135,7 +43,7 @@ var dom = defineDomHelpers({
|
|
|
135
43
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
136
44
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
137
45
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
138
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
46
|
+
getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
|
|
139
47
|
});
|
|
140
48
|
|
|
141
49
|
// src/tooltip.store.ts
|
|
@@ -162,13 +70,25 @@ function connect(state, send, normalize) {
|
|
|
162
70
|
placement: state.context.currentPlacement
|
|
163
71
|
});
|
|
164
72
|
return {
|
|
73
|
+
/**
|
|
74
|
+
* Whether the tooltip is open.
|
|
75
|
+
*/
|
|
165
76
|
isOpen,
|
|
77
|
+
/**
|
|
78
|
+
* Function to open the tooltip.
|
|
79
|
+
*/
|
|
166
80
|
open() {
|
|
167
81
|
send("OPEN");
|
|
168
82
|
},
|
|
83
|
+
/**
|
|
84
|
+
* Function to close the tooltip.
|
|
85
|
+
*/
|
|
169
86
|
close() {
|
|
170
87
|
send("CLOSE");
|
|
171
88
|
},
|
|
89
|
+
/**
|
|
90
|
+
* Returns the animation state of the tooltip.
|
|
91
|
+
*/
|
|
172
92
|
getAnimationState() {
|
|
173
93
|
return {
|
|
174
94
|
enter: store.prevId === null && id === store.id,
|
|
@@ -178,7 +98,7 @@ function connect(state, send, normalize) {
|
|
|
178
98
|
triggerProps: normalize.button({
|
|
179
99
|
...parts.trigger.attrs,
|
|
180
100
|
id: triggerId,
|
|
181
|
-
"data-expanded": dataAttr(isOpen),
|
|
101
|
+
"data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
|
|
182
102
|
"aria-describedby": isOpen ? contentId : void 0,
|
|
183
103
|
onClick() {
|
|
184
104
|
send("CLICK");
|
|
@@ -248,7 +168,7 @@ function connect(state, send, normalize) {
|
|
|
248
168
|
...parts.label.attrs,
|
|
249
169
|
id: contentId,
|
|
250
170
|
role: "tooltip",
|
|
251
|
-
style: visuallyHiddenStyle,
|
|
171
|
+
style: import_visually_hidden.visuallyHiddenStyle,
|
|
252
172
|
children: state.context["aria-label"]
|
|
253
173
|
})
|
|
254
174
|
};
|
package/dist/tooltip.connect.mjs
CHANGED
package/dist/tooltip.dom.d.ts
CHANGED
|
@@ -16,9 +16,12 @@ declare const dom: {
|
|
|
16
16
|
getActiveElement: (ctx: {
|
|
17
17
|
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
18
18
|
}) => HTMLElement | null;
|
|
19
|
-
getById: <T = HTMLElement>(ctx: {
|
|
19
|
+
getById: <T extends HTMLElement = HTMLElement>(ctx: {
|
|
20
20
|
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
21
21
|
}, id: string) => T | null;
|
|
22
|
+
queryById: <T_1 extends HTMLElement = HTMLElement>(ctx: {
|
|
23
|
+
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
24
|
+
}, id: string) => T_1;
|
|
22
25
|
} & {
|
|
23
26
|
getTriggerId: (ctx: MachineContext) => string;
|
|
24
27
|
getContentId: (ctx: MachineContext) => string;
|
package/dist/tooltip.dom.js
CHANGED
|
@@ -23,83 +23,8 @@ __export(tooltip_dom_exports, {
|
|
|
23
23
|
dom: () => dom
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(tooltip_dom_exports);
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
function getCache() {
|
|
29
|
-
const g = globalThis;
|
|
30
|
-
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
31
|
-
return g.__styleCache;
|
|
32
|
-
}
|
|
33
|
-
function getComputedStyle(el) {
|
|
34
|
-
if (!el)
|
|
35
|
-
return {};
|
|
36
|
-
const cache = getCache();
|
|
37
|
-
let style = cache.get(el);
|
|
38
|
-
if (!style) {
|
|
39
|
-
const win = el?.ownerDocument.defaultView ?? window;
|
|
40
|
-
style = win.getComputedStyle(el);
|
|
41
|
-
cache.set(el, style);
|
|
42
|
-
}
|
|
43
|
-
return style;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
// ../../utilities/dom/src/query.ts
|
|
47
|
-
function isDocument(el) {
|
|
48
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
49
|
-
}
|
|
50
|
-
function isWindow(value) {
|
|
51
|
-
return value?.toString() === "[object Window]";
|
|
52
|
-
}
|
|
53
|
-
function getDocument(el) {
|
|
54
|
-
if (isWindow(el))
|
|
55
|
-
return el.document;
|
|
56
|
-
if (isDocument(el))
|
|
57
|
-
return el;
|
|
58
|
-
return el?.ownerDocument ?? document;
|
|
59
|
-
}
|
|
60
|
-
function getNodeName(node) {
|
|
61
|
-
return isWindow(node) ? "" : node?.localName ?? "";
|
|
62
|
-
}
|
|
63
|
-
function getParent(el) {
|
|
64
|
-
const doc = getDocument(el);
|
|
65
|
-
if (getNodeName(el) === "html")
|
|
66
|
-
return el;
|
|
67
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
68
|
-
}
|
|
69
|
-
function defineDomHelpers(helpers) {
|
|
70
|
-
const dom2 = {
|
|
71
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
72
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
73
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
74
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
75
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
76
|
-
};
|
|
77
|
-
return {
|
|
78
|
-
...dom2,
|
|
79
|
-
...helpers
|
|
80
|
-
};
|
|
81
|
-
}
|
|
82
|
-
function isHTMLElement(v) {
|
|
83
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
84
|
-
}
|
|
85
|
-
|
|
86
|
-
// ../../utilities/dom/src/scrollable.ts
|
|
87
|
-
function isScrollParent(el) {
|
|
88
|
-
const { overflow, overflowX, overflowY } = getComputedStyle(el);
|
|
89
|
-
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
|
90
|
-
}
|
|
91
|
-
function getScrollParent(el) {
|
|
92
|
-
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
93
|
-
return getDocument(el).body;
|
|
94
|
-
}
|
|
95
|
-
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
96
|
-
return el;
|
|
97
|
-
}
|
|
98
|
-
return getScrollParent(getParent(el));
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
// src/tooltip.dom.ts
|
|
102
|
-
var dom = defineDomHelpers({
|
|
26
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
27
|
+
var dom = (0, import_dom_query.createScope)({
|
|
103
28
|
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
104
29
|
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
105
30
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
@@ -108,7 +33,7 @@ var dom = defineDomHelpers({
|
|
|
108
33
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
109
34
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
110
35
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
111
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
36
|
+
getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
|
|
112
37
|
});
|
|
113
38
|
// Annotate the CommonJS export names for ESM import in node:
|
|
114
39
|
0 && (module.exports = {
|
package/dist/tooltip.dom.mjs
CHANGED
package/dist/tooltip.machine.js
CHANGED
|
@@ -24,213 +24,14 @@ __export(tooltip_machine_exports, {
|
|
|
24
24
|
});
|
|
25
25
|
module.exports = __toCommonJS(tooltip_machine_exports);
|
|
26
26
|
var import_core2 = require("@zag-js/core");
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
function getCache() {
|
|
30
|
-
const g = globalThis;
|
|
31
|
-
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
32
|
-
return g.__styleCache;
|
|
33
|
-
}
|
|
34
|
-
function getComputedStyle(el) {
|
|
35
|
-
if (!el)
|
|
36
|
-
return {};
|
|
37
|
-
const cache = getCache();
|
|
38
|
-
let style = cache.get(el);
|
|
39
|
-
if (!style) {
|
|
40
|
-
const win = el?.ownerDocument.defaultView ?? window;
|
|
41
|
-
style = win.getComputedStyle(el);
|
|
42
|
-
cache.set(el, style);
|
|
43
|
-
}
|
|
44
|
-
return style;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
// ../../utilities/core/src/functions.ts
|
|
48
|
-
var runIfFn = (v, ...a) => {
|
|
49
|
-
const res = typeof v === "function" ? v(...a) : v;
|
|
50
|
-
return res ?? void 0;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
// ../../utilities/core/src/guard.ts
|
|
54
|
-
var isArray = (v) => Array.isArray(v);
|
|
55
|
-
var isObject = (v) => !(v == null || typeof v !== "object" || isArray(v));
|
|
56
|
-
var hasProp = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop);
|
|
57
|
-
|
|
58
|
-
// ../../utilities/core/src/object.ts
|
|
59
|
-
function compact(obj) {
|
|
60
|
-
if (obj === void 0)
|
|
61
|
-
return obj;
|
|
62
|
-
return Object.fromEntries(
|
|
63
|
-
Object.entries(obj).filter(([, value]) => value !== void 0).map(([key, value]) => [key, isObject(value) ? compact(value) : value])
|
|
64
|
-
);
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// ../../utilities/dom/src/platform.ts
|
|
68
|
-
var isDom = () => typeof window !== "undefined";
|
|
69
|
-
function getPlatform() {
|
|
70
|
-
const agent = navigator.userAgentData;
|
|
71
|
-
return agent?.platform ?? navigator.platform;
|
|
72
|
-
}
|
|
73
|
-
var pt = (v) => isDom() && v.test(getPlatform());
|
|
74
|
-
var vn = (v) => isDom() && v.test(navigator.vendor);
|
|
75
|
-
var isSafari = () => isApple() && vn(/apple/i);
|
|
76
|
-
var isApple = () => pt(/mac|iphone|ipad|ipod/i);
|
|
77
|
-
|
|
78
|
-
// ../../utilities/dom/src/query.ts
|
|
79
|
-
function isDocument(el) {
|
|
80
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
81
|
-
}
|
|
82
|
-
function isWindow(value) {
|
|
83
|
-
return value?.toString() === "[object Window]";
|
|
84
|
-
}
|
|
85
|
-
function getDocument(el) {
|
|
86
|
-
if (isWindow(el))
|
|
87
|
-
return el.document;
|
|
88
|
-
if (isDocument(el))
|
|
89
|
-
return el;
|
|
90
|
-
return el?.ownerDocument ?? document;
|
|
91
|
-
}
|
|
92
|
-
function getWindow(el) {
|
|
93
|
-
return el?.ownerDocument.defaultView ?? window;
|
|
94
|
-
}
|
|
95
|
-
function getNodeName(node) {
|
|
96
|
-
return isWindow(node) ? "" : node?.localName ?? "";
|
|
97
|
-
}
|
|
98
|
-
function getParent(el) {
|
|
99
|
-
const doc = getDocument(el);
|
|
100
|
-
if (getNodeName(el) === "html")
|
|
101
|
-
return el;
|
|
102
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
103
|
-
}
|
|
104
|
-
function defineDomHelpers(helpers) {
|
|
105
|
-
const dom2 = {
|
|
106
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
107
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
108
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
109
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
110
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
111
|
-
};
|
|
112
|
-
return {
|
|
113
|
-
...dom2,
|
|
114
|
-
...helpers
|
|
115
|
-
};
|
|
116
|
-
}
|
|
117
|
-
function isHTMLElement(v) {
|
|
118
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
119
|
-
}
|
|
120
|
-
|
|
121
|
-
// ../../utilities/dom/src/event.ts
|
|
122
|
-
var supportsPointerEvent = () => isDom() && window.onpointerdown === null;
|
|
123
|
-
var supportsTouchEvent = () => isDom() && window.ontouchstart === null;
|
|
124
|
-
var supportsMouseEvent = () => isDom() && window.onmousedown === null;
|
|
125
|
-
var isTouchEvent = (v) => isObject(v) && hasProp(v, "touches");
|
|
126
|
-
|
|
127
|
-
// ../../utilities/dom/src/listener.ts
|
|
128
|
-
var isRef = (v) => hasProp(v, "current");
|
|
129
|
-
var fallback = { pageX: 0, pageY: 0, clientX: 0, clientY: 0 };
|
|
130
|
-
function extractInfo(event, type = "page") {
|
|
131
|
-
const point = isTouchEvent(event) ? event.touches[0] || event.changedTouches[0] || fallback : event;
|
|
132
|
-
return {
|
|
133
|
-
point: {
|
|
134
|
-
x: point[`${type}X`],
|
|
135
|
-
y: point[`${type}Y`]
|
|
136
|
-
}
|
|
137
|
-
};
|
|
138
|
-
}
|
|
139
|
-
function addDomEvent(target, eventName, handler, options) {
|
|
140
|
-
const node = isRef(target) ? target.current : runIfFn(target);
|
|
141
|
-
node?.addEventListener(eventName, handler, options);
|
|
142
|
-
return () => {
|
|
143
|
-
node?.removeEventListener(eventName, handler, options);
|
|
144
|
-
};
|
|
145
|
-
}
|
|
146
|
-
function addPointerEvent(target, event, listener, options) {
|
|
147
|
-
const type = getEventName(event) ?? event;
|
|
148
|
-
return addDomEvent(target, type, wrapHandler(listener, event === "pointerdown"), options);
|
|
149
|
-
}
|
|
150
|
-
function wrapHandler(fn, filter = false) {
|
|
151
|
-
const listener = (event) => {
|
|
152
|
-
fn(event, extractInfo(event));
|
|
153
|
-
};
|
|
154
|
-
return filter ? filterPrimaryPointer(listener) : listener;
|
|
155
|
-
}
|
|
156
|
-
function filterPrimaryPointer(fn) {
|
|
157
|
-
return (event) => {
|
|
158
|
-
const win = event.view ?? window;
|
|
159
|
-
const isMouseEvent = event instanceof win.MouseEvent;
|
|
160
|
-
const isPrimary = !isMouseEvent || isMouseEvent && event.button === 0;
|
|
161
|
-
if (isPrimary)
|
|
162
|
-
fn(event);
|
|
163
|
-
};
|
|
164
|
-
}
|
|
165
|
-
var mouseEventNames = {
|
|
166
|
-
pointerdown: "mousedown",
|
|
167
|
-
pointermove: "mousemove",
|
|
168
|
-
pointerup: "mouseup",
|
|
169
|
-
pointercancel: "mousecancel",
|
|
170
|
-
pointerover: "mouseover",
|
|
171
|
-
pointerout: "mouseout",
|
|
172
|
-
pointerenter: "mouseenter",
|
|
173
|
-
pointerleave: "mouseleave"
|
|
174
|
-
};
|
|
175
|
-
var touchEventNames = {
|
|
176
|
-
pointerdown: "touchstart",
|
|
177
|
-
pointermove: "touchmove",
|
|
178
|
-
pointerup: "touchend",
|
|
179
|
-
pointercancel: "touchcancel"
|
|
180
|
-
};
|
|
181
|
-
function getEventName(evt) {
|
|
182
|
-
if (supportsPointerEvent())
|
|
183
|
-
return evt;
|
|
184
|
-
if (supportsTouchEvent())
|
|
185
|
-
return touchEventNames[evt];
|
|
186
|
-
if (supportsMouseEvent())
|
|
187
|
-
return mouseEventNames[evt];
|
|
188
|
-
return evt;
|
|
189
|
-
}
|
|
190
|
-
|
|
191
|
-
// ../../utilities/dom/src/next-tick.ts
|
|
192
|
-
function raf(fn) {
|
|
193
|
-
const id = globalThis.requestAnimationFrame(fn);
|
|
194
|
-
return function cleanup() {
|
|
195
|
-
globalThis.cancelAnimationFrame(id);
|
|
196
|
-
};
|
|
197
|
-
}
|
|
198
|
-
|
|
199
|
-
// ../../utilities/dom/src/pointerlock.ts
|
|
200
|
-
function addPointerlockChangeListener(doc, fn) {
|
|
201
|
-
return addDomEvent(doc, "pointerlockchange", fn, false);
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
// ../../utilities/dom/src/scrollable.ts
|
|
205
|
-
function isScrollParent(el) {
|
|
206
|
-
const { overflow, overflowX, overflowY } = getComputedStyle(el);
|
|
207
|
-
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
|
208
|
-
}
|
|
209
|
-
function getScrollParent(el) {
|
|
210
|
-
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
211
|
-
return getDocument(el).body;
|
|
212
|
-
}
|
|
213
|
-
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
214
|
-
return el;
|
|
215
|
-
}
|
|
216
|
-
return getScrollParent(getParent(el));
|
|
217
|
-
}
|
|
218
|
-
function getScrollParents(el, list = []) {
|
|
219
|
-
const scrollParent = getScrollParent(el);
|
|
220
|
-
const isBody = scrollParent === getDocument(el).body;
|
|
221
|
-
const win = getWindow(scrollParent);
|
|
222
|
-
const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
|
223
|
-
const parents = list.concat(target);
|
|
224
|
-
if (isBody)
|
|
225
|
-
return parents;
|
|
226
|
-
return parents.concat(getScrollParents(getParent(target)));
|
|
227
|
-
}
|
|
228
|
-
|
|
229
|
-
// src/tooltip.machine.ts
|
|
27
|
+
var import_dom_event = require("@zag-js/dom-event");
|
|
28
|
+
var import_dom_query2 = require("@zag-js/dom-query");
|
|
230
29
|
var import_popper = require("@zag-js/popper");
|
|
30
|
+
var import_utils = require("@zag-js/utils");
|
|
231
31
|
|
|
232
32
|
// src/tooltip.dom.ts
|
|
233
|
-
var
|
|
33
|
+
var import_dom_query = require("@zag-js/dom-query");
|
|
34
|
+
var dom = (0, import_dom_query.createScope)({
|
|
234
35
|
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
235
36
|
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
236
37
|
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
@@ -239,7 +40,7 @@ var dom = defineDomHelpers({
|
|
|
239
40
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
240
41
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
241
42
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
242
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
43
|
+
getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
|
|
243
44
|
});
|
|
244
45
|
|
|
245
46
|
// src/tooltip.store.ts
|
|
@@ -255,7 +56,7 @@ var store = (0, import_core.proxy)({
|
|
|
255
56
|
|
|
256
57
|
// src/tooltip.machine.ts
|
|
257
58
|
function machine(userContext) {
|
|
258
|
-
const ctx = compact(userContext);
|
|
59
|
+
const ctx = (0, import_utils.compact)(userContext);
|
|
259
60
|
return (0, import_core2.createMachine)(
|
|
260
61
|
{
|
|
261
62
|
id: "tooltip",
|
|
@@ -370,7 +171,7 @@ function machine(userContext) {
|
|
|
370
171
|
computePlacement(ctx2) {
|
|
371
172
|
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
372
173
|
let cleanup;
|
|
373
|
-
raf(() => {
|
|
174
|
+
(0, import_dom_query2.raf)(() => {
|
|
374
175
|
cleanup = (0, import_popper.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
|
|
375
176
|
...ctx2.positioning,
|
|
376
177
|
onComplete(data) {
|
|
@@ -386,17 +187,16 @@ function machine(userContext) {
|
|
|
386
187
|
return cleanup;
|
|
387
188
|
},
|
|
388
189
|
trackPointerlockChange(ctx2, _evt, { send }) {
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
});
|
|
190
|
+
const onChange = () => send("POINTER_LOCK_CHANGE");
|
|
191
|
+
return (0, import_dom_event.addDomEvent)(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
|
|
392
192
|
},
|
|
393
193
|
trackScroll(ctx2, _evt, { send }) {
|
|
394
194
|
const trigger = dom.getTriggerEl(ctx2);
|
|
395
195
|
if (!trigger)
|
|
396
196
|
return;
|
|
397
|
-
const cleanups = getScrollParents(trigger).map((el) => {
|
|
197
|
+
const cleanups = (0, import_dom_query2.getScrollParents)(trigger).map((el) => {
|
|
398
198
|
const opts = { passive: true, capture: true };
|
|
399
|
-
return addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
199
|
+
return (0, import_dom_event.addDomEvent)(el, "scroll", () => send("SCROLL"), opts);
|
|
400
200
|
});
|
|
401
201
|
return () => {
|
|
402
202
|
cleanups.forEach((fn) => fn?.());
|
|
@@ -410,12 +210,12 @@ function machine(userContext) {
|
|
|
410
210
|
});
|
|
411
211
|
},
|
|
412
212
|
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
413
|
-
if (!isSafari())
|
|
213
|
+
if (!(0, import_dom_query2.isSafari)())
|
|
414
214
|
return;
|
|
415
215
|
const doc = dom.getDoc(ctx2);
|
|
416
|
-
return
|
|
216
|
+
return (0, import_dom_event.addDomEvent)(doc, "pointermove", (event) => {
|
|
417
217
|
const selector = "[data-part=trigger][data-expanded]";
|
|
418
|
-
if (isHTMLElement(event.target) && event.target.closest(selector))
|
|
218
|
+
if ((0, import_dom_query2.isHTMLElement)(event.target) && event.target.closest(selector))
|
|
419
219
|
return;
|
|
420
220
|
send("POINTER_LEAVE");
|
|
421
221
|
});
|
|
@@ -424,7 +224,7 @@ function machine(userContext) {
|
|
|
424
224
|
if (!ctx2.closeOnEsc)
|
|
425
225
|
return;
|
|
426
226
|
const doc = dom.getDoc(ctx2);
|
|
427
|
-
return addDomEvent(doc, "keydown", (event) => {
|
|
227
|
+
return (0, import_dom_event.addDomEvent)(doc, "keydown", (event) => {
|
|
428
228
|
if (event.key === "Escape") {
|
|
429
229
|
send("ESCAPE");
|
|
430
230
|
}
|
package/dist/tooltip.machine.mjs
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zag-js/tooltip",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.12",
|
|
4
4
|
"description": "Core logic for the tooltip widget implemented as a state machine",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"js",
|
|
@@ -27,14 +27,16 @@
|
|
|
27
27
|
},
|
|
28
28
|
"dependencies": {
|
|
29
29
|
"@zag-js/anatomy": "0.1.4",
|
|
30
|
-
"@zag-js/
|
|
31
|
-
"@zag-js/
|
|
30
|
+
"@zag-js/popper": "0.2.4",
|
|
31
|
+
"@zag-js/dom-query": "0.1.3",
|
|
32
|
+
"@zag-js/core": "0.2.10",
|
|
33
|
+
"@zag-js/utils": "0.3.3",
|
|
34
|
+
"@zag-js/dom-event": "0.0.1",
|
|
35
|
+
"@zag-js/visually-hidden": "0.0.1",
|
|
32
36
|
"@zag-js/types": "0.3.4"
|
|
33
37
|
},
|
|
34
38
|
"devDependencies": {
|
|
35
|
-
"clean-package": "2.2.0"
|
|
36
|
-
"@zag-js/dom-utils": "0.2.4",
|
|
37
|
-
"@zag-js/utils": "0.3.3"
|
|
39
|
+
"clean-package": "2.2.0"
|
|
38
40
|
},
|
|
39
41
|
"clean-package": "../../../clean-package.config.json",
|
|
40
42
|
"main": "dist/index.js",
|
package/dist/chunk-W5WZYXHV.mjs
DELETED
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
// ../../utilities/dom/src/get-computed-style.ts
|
|
2
|
-
function getCache() {
|
|
3
|
-
const g = globalThis;
|
|
4
|
-
g.__styleCache = g.__styleCache || /* @__PURE__ */ new WeakMap();
|
|
5
|
-
return g.__styleCache;
|
|
6
|
-
}
|
|
7
|
-
function getComputedStyle(el) {
|
|
8
|
-
if (!el)
|
|
9
|
-
return {};
|
|
10
|
-
const cache = getCache();
|
|
11
|
-
let style = cache.get(el);
|
|
12
|
-
if (!style) {
|
|
13
|
-
const win = el?.ownerDocument.defaultView ?? window;
|
|
14
|
-
style = win.getComputedStyle(el);
|
|
15
|
-
cache.set(el, style);
|
|
16
|
-
}
|
|
17
|
-
return style;
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
// ../../utilities/dom/src/query.ts
|
|
21
|
-
function isDocument(el) {
|
|
22
|
-
return el.nodeType === Node.DOCUMENT_NODE;
|
|
23
|
-
}
|
|
24
|
-
function isWindow(value) {
|
|
25
|
-
return value?.toString() === "[object Window]";
|
|
26
|
-
}
|
|
27
|
-
function getDocument(el) {
|
|
28
|
-
if (isWindow(el))
|
|
29
|
-
return el.document;
|
|
30
|
-
if (isDocument(el))
|
|
31
|
-
return el;
|
|
32
|
-
return el?.ownerDocument ?? document;
|
|
33
|
-
}
|
|
34
|
-
function getWindow(el) {
|
|
35
|
-
return el?.ownerDocument.defaultView ?? window;
|
|
36
|
-
}
|
|
37
|
-
function getNodeName(node) {
|
|
38
|
-
return isWindow(node) ? "" : node?.localName ?? "";
|
|
39
|
-
}
|
|
40
|
-
function getParent(el) {
|
|
41
|
-
const doc = getDocument(el);
|
|
42
|
-
if (getNodeName(el) === "html")
|
|
43
|
-
return el;
|
|
44
|
-
return el.assignedSlot || el.parentElement || doc.documentElement;
|
|
45
|
-
}
|
|
46
|
-
function defineDomHelpers(helpers) {
|
|
47
|
-
const dom2 = {
|
|
48
|
-
getRootNode: (ctx) => ctx.getRootNode?.() ?? document,
|
|
49
|
-
getDoc: (ctx) => getDocument(dom2.getRootNode(ctx)),
|
|
50
|
-
getWin: (ctx) => dom2.getDoc(ctx).defaultView ?? window,
|
|
51
|
-
getActiveElement: (ctx) => dom2.getDoc(ctx).activeElement,
|
|
52
|
-
getById: (ctx, id) => dom2.getRootNode(ctx).getElementById(id)
|
|
53
|
-
};
|
|
54
|
-
return {
|
|
55
|
-
...dom2,
|
|
56
|
-
...helpers
|
|
57
|
-
};
|
|
58
|
-
}
|
|
59
|
-
function isHTMLElement(v) {
|
|
60
|
-
return typeof v === "object" && v?.nodeType === Node.ELEMENT_NODE && typeof v?.nodeName === "string";
|
|
61
|
-
}
|
|
62
|
-
|
|
63
|
-
// ../../utilities/dom/src/scrollable.ts
|
|
64
|
-
function isScrollParent(el) {
|
|
65
|
-
const { overflow, overflowX, overflowY } = getComputedStyle(el);
|
|
66
|
-
return /auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX);
|
|
67
|
-
}
|
|
68
|
-
function getScrollParent(el) {
|
|
69
|
-
if (["html", "body", "#document"].includes(getNodeName(el))) {
|
|
70
|
-
return getDocument(el).body;
|
|
71
|
-
}
|
|
72
|
-
if (isHTMLElement(el) && isScrollParent(el)) {
|
|
73
|
-
return el;
|
|
74
|
-
}
|
|
75
|
-
return getScrollParent(getParent(el));
|
|
76
|
-
}
|
|
77
|
-
function getScrollParents(el, list = []) {
|
|
78
|
-
const scrollParent = getScrollParent(el);
|
|
79
|
-
const isBody = scrollParent === getDocument(el).body;
|
|
80
|
-
const win = getWindow(scrollParent);
|
|
81
|
-
const target = isBody ? [win].concat(win.visualViewport || [], isScrollParent(scrollParent) ? scrollParent : []) : scrollParent;
|
|
82
|
-
const parents = list.concat(target);
|
|
83
|
-
if (isBody)
|
|
84
|
-
return parents;
|
|
85
|
-
return parents.concat(getScrollParents(getParent(target)));
|
|
86
|
-
}
|
|
87
|
-
|
|
88
|
-
// src/tooltip.dom.ts
|
|
89
|
-
var dom = defineDomHelpers({
|
|
90
|
-
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
91
|
-
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
92
|
-
getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
|
|
93
|
-
getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
|
|
94
|
-
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
95
|
-
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
96
|
-
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
97
|
-
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
98
|
-
getScrollParent: (ctx) => getScrollParent(dom.getTriggerEl(ctx))
|
|
99
|
-
});
|
|
100
|
-
|
|
101
|
-
export {
|
|
102
|
-
isHTMLElement,
|
|
103
|
-
getScrollParents,
|
|
104
|
-
dom
|
|
105
|
-
};
|