@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.
@@ -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
- getScrollParents,
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
- // ../../utilities/core/src/functions.ts
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
- return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
262
- send("POINTER_LOCK_CHANGE");
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 addPointerEvent(doc, "pointermove", (event) => {
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-W5WZYXHV.mjs";
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 dom = defineDomHelpers({
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
- return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
522
- send("POINTER_LOCK_CHANGE");
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 addPointerEvent(doc, "pointermove", (event) => {
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-V3RC3IDL.mjs";
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-ILEFGJ44.mjs";
10
- import "./chunk-W5WZYXHV.mjs";
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;
@@ -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 dom = defineDomHelpers({
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
  };
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-V3RC3IDL.mjs";
3
+ } from "./chunk-W3OSVXCZ.mjs";
4
4
  import "./chunk-RRQRIZBA.mjs";
5
- import "./chunk-W5WZYXHV.mjs";
5
+ import "./chunk-3LXHM7BW.mjs";
6
6
  import "./chunk-GQYNO326.mjs";
7
7
  export {
8
8
  connect
@@ -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;
@@ -23,83 +23,8 @@ __export(tooltip_dom_exports, {
23
23
  dom: () => dom
24
24
  });
25
25
  module.exports = __toCommonJS(tooltip_dom_exports);
26
-
27
- // ../../utilities/dom/src/get-computed-style.ts
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 = {
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-W5WZYXHV.mjs";
3
+ } from "./chunk-3LXHM7BW.mjs";
4
4
  export {
5
5
  dom
6
6
  };
@@ -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
- // ../../utilities/dom/src/get-computed-style.ts
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 dom = defineDomHelpers({
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
- return addPointerlockChangeListener(dom.getDoc(ctx2), () => {
390
- send("POINTER_LOCK_CHANGE");
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 addPointerEvent(doc, "pointermove", (event) => {
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
  }
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-ILEFGJ44.mjs";
4
- import "./chunk-W5WZYXHV.mjs";
3
+ } from "./chunk-463EFHFN.mjs";
4
+ import "./chunk-3LXHM7BW.mjs";
5
5
  import "./chunk-GQYNO326.mjs";
6
6
  export {
7
7
  machine
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tooltip",
3
- "version": "0.2.10",
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/core": "0.2.8",
31
- "@zag-js/popper": "0.2.3",
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",
@@ -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
- };