@zag-js/tooltip 0.10.2 → 0.10.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.d.ts CHANGED
@@ -1,8 +1,4 @@
1
- export { anatomy } from './tooltip.anatomy.js';
2
- export { connect } from './tooltip.connect.js';
3
- export { machine } from './tooltip.machine.js';
4
- export { UserDefinedContext as Context } from './tooltip.types.js';
5
- import '@zag-js/anatomy';
6
- import '@zag-js/popper';
7
- import '@zag-js/types';
8
- import '@zag-js/core';
1
+ export { anatomy } from "./tooltip.anatomy";
2
+ export { connect } from "./tooltip.connect";
3
+ export { machine } from "./tooltip.machine";
4
+ export type { UserDefinedContext as Context, Placement, PositioningOptions } from "./tooltip.types";
package/dist/index.js CHANGED
@@ -1,422 +1,13 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ 'use strict';
19
2
 
20
- // src/index.ts
21
- var src_exports = {};
22
- __export(src_exports, {
23
- anatomy: () => anatomy,
24
- connect: () => connect,
25
- machine: () => machine
26
- });
27
- module.exports = __toCommonJS(src_exports);
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
28
4
 
29
- // src/tooltip.anatomy.ts
30
- var import_anatomy = require("@zag-js/anatomy");
31
- var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
32
- var parts = anatomy.build();
5
+ const tooltip_anatomy = require('./tooltip.anatomy.js');
6
+ const tooltip_connect = require('./tooltip.connect.js');
7
+ const tooltip_machine = require('./tooltip.machine.js');
33
8
 
34
- // src/tooltip.connect.ts
35
- var import_dom_query2 = require("@zag-js/dom-query");
36
- var import_popper = require("@zag-js/popper");
37
- var import_visually_hidden = require("@zag-js/visually-hidden");
38
9
 
39
- // src/tooltip.dom.ts
40
- var import_dom_query = require("@zag-js/dom-query");
41
- var dom = (0, import_dom_query.createScope)({
42
- getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
43
- getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
44
- getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
45
- getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
46
- getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
47
- getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
48
- getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
49
- getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
50
- getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
51
- });
52
10
 
53
- // src/tooltip.store.ts
54
- var import_core = require("@zag-js/core");
55
- var store = (0, import_core.proxy)({
56
- id: null,
57
- prevId: null,
58
- setId(val) {
59
- this.prevId = this.id;
60
- this.id = val;
61
- }
62
- });
63
-
64
- // src/tooltip.connect.ts
65
- function connect(state, send, normalize) {
66
- const id = state.context.id;
67
- const hasAriaLabel = state.context.hasAriaLabel;
68
- const isOpen = state.hasTag("open");
69
- const triggerId = dom.getTriggerId(state.context);
70
- const contentId = dom.getContentId(state.context);
71
- const isDisabled = state.context.disabled;
72
- const popperStyles = (0, import_popper.getPlacementStyles)({
73
- placement: state.context.currentPlacement
74
- });
75
- return {
76
- /**
77
- * Whether the tooltip is open.
78
- */
79
- isOpen,
80
- /**
81
- * Function to open the tooltip.
82
- */
83
- open() {
84
- send("OPEN");
85
- },
86
- /**
87
- * Function to close the tooltip.
88
- */
89
- close() {
90
- send("CLOSE");
91
- },
92
- /**
93
- * Returns the animation state of the tooltip.
94
- */
95
- getAnimationState() {
96
- return {
97
- enter: store.prevId === null && id === store.id,
98
- exit: store.id === null
99
- };
100
- },
101
- /**
102
- * Function to reposition the popover
103
- */
104
- setPositioning(options = {}) {
105
- send({ type: "SET_POSITIONING", options });
106
- },
107
- triggerProps: normalize.button({
108
- ...parts.trigger.attrs,
109
- id: triggerId,
110
- "data-expanded": (0, import_dom_query2.dataAttr)(isOpen),
111
- "aria-describedby": isOpen ? contentId : void 0,
112
- onClick() {
113
- send("CLICK");
114
- },
115
- onFocus() {
116
- send("FOCUS");
117
- },
118
- onBlur() {
119
- if (id === store.id) {
120
- send("BLUR");
121
- }
122
- },
123
- onPointerDown() {
124
- if (isDisabled)
125
- return;
126
- if (id === store.id) {
127
- send("POINTER_DOWN");
128
- }
129
- },
130
- onPointerMove() {
131
- if (isDisabled)
132
- return;
133
- send("POINTER_ENTER");
134
- },
135
- onPointerLeave() {
136
- if (isDisabled)
137
- return;
138
- send("POINTER_LEAVE");
139
- },
140
- onPointerCancel() {
141
- if (isDisabled)
142
- return;
143
- send("POINTER_LEAVE");
144
- }
145
- }),
146
- arrowProps: normalize.element({
147
- id: dom.getArrowId(state.context),
148
- ...parts.arrow.attrs,
149
- style: popperStyles.arrow
150
- }),
151
- arrowTipProps: normalize.element({
152
- ...parts.arrowTip.attrs,
153
- style: popperStyles.arrowTip
154
- }),
155
- positionerProps: normalize.element({
156
- id: dom.getPositionerId(state.context),
157
- ...parts.positioner.attrs,
158
- style: popperStyles.floating
159
- }),
160
- contentProps: normalize.element({
161
- ...parts.content.attrs,
162
- hidden: !isOpen,
163
- role: hasAriaLabel ? void 0 : "tooltip",
164
- id: hasAriaLabel ? void 0 : contentId,
165
- "data-placement": state.context.currentPlacement,
166
- onPointerEnter() {
167
- send("TOOLTIP_POINTER_ENTER");
168
- },
169
- onPointerLeave() {
170
- send("TOOLTIP_POINTER_LEAVE");
171
- },
172
- style: {
173
- pointerEvents: state.context.interactive ? "auto" : "none"
174
- }
175
- }),
176
- labelProps: normalize.element({
177
- ...parts.label.attrs,
178
- id: contentId,
179
- role: "tooltip",
180
- style: import_visually_hidden.visuallyHiddenStyle,
181
- children: state.context["aria-label"]
182
- })
183
- };
184
- }
185
-
186
- // src/tooltip.machine.ts
187
- var import_core2 = require("@zag-js/core");
188
- var import_dom_event = require("@zag-js/dom-event");
189
- var import_dom_query3 = require("@zag-js/dom-query");
190
- var import_popper2 = require("@zag-js/popper");
191
- var import_utils = require("@zag-js/utils");
192
- function machine(userContext) {
193
- const ctx = (0, import_utils.compact)(userContext);
194
- return (0, import_core2.createMachine)(
195
- {
196
- id: "tooltip",
197
- initial: "closed",
198
- context: {
199
- openDelay: 1e3,
200
- closeDelay: 500,
201
- closeOnPointerDown: true,
202
- closeOnEsc: true,
203
- interactive: true,
204
- currentPlacement: void 0,
205
- ...ctx,
206
- positioning: {
207
- placement: "bottom",
208
- ...ctx.positioning
209
- }
210
- },
211
- computed: {
212
- hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
213
- },
214
- watch: {
215
- disabled: ["closeIfDisabled"],
216
- open: ["toggleVisibility"]
217
- },
218
- on: {
219
- OPEN: "open",
220
- CLOSE: "closed"
221
- },
222
- states: {
223
- closed: {
224
- tags: ["closed"],
225
- entry: ["clearGlobalId", "invokeOnClose"],
226
- on: {
227
- FOCUS: "open",
228
- POINTER_ENTER: [
229
- {
230
- guard: "noVisibleTooltip",
231
- target: "opening"
232
- },
233
- { target: "open" }
234
- ]
235
- }
236
- },
237
- opening: {
238
- tags: ["closed"],
239
- activities: ["trackScroll", "trackPointerlockChange"],
240
- after: {
241
- OPEN_DELAY: "open"
242
- },
243
- on: {
244
- POINTER_LEAVE: "closed",
245
- BLUR: "closed",
246
- SCROLL: "closed",
247
- POINTER_LOCK_CHANGE: "closed",
248
- POINTER_DOWN: {
249
- guard: "closeOnPointerDown",
250
- target: "closed"
251
- }
252
- }
253
- },
254
- open: {
255
- tags: ["open"],
256
- activities: [
257
- "trackEscapeKey",
258
- "trackDisabledTriggerOnSafari",
259
- "trackScroll",
260
- "trackPointerlockChange",
261
- "trackPositioning"
262
- ],
263
- entry: ["setGlobalId", "invokeOnOpen"],
264
- on: {
265
- POINTER_LEAVE: [
266
- {
267
- guard: "isVisible",
268
- target: "closing"
269
- },
270
- { target: "closed" }
271
- ],
272
- BLUR: "closed",
273
- ESCAPE: "closed",
274
- SCROLL: "closed",
275
- POINTER_LOCK_CHANGE: "closed",
276
- TOOLTIP_POINTER_LEAVE: {
277
- guard: "isInteractive",
278
- target: "closing"
279
- },
280
- POINTER_DOWN: {
281
- guard: "closeOnPointerDown",
282
- target: "closed"
283
- },
284
- CLICK: "closed",
285
- SET_POSITIONING: {
286
- actions: "setPositioning"
287
- }
288
- }
289
- },
290
- closing: {
291
- tags: ["open"],
292
- activities: ["trackStore", "trackPositioning"],
293
- after: {
294
- CLOSE_DELAY: "closed"
295
- },
296
- on: {
297
- FORCE_CLOSE: "closed",
298
- POINTER_ENTER: "open",
299
- TOOLTIP_POINTER_ENTER: {
300
- guard: "isInteractive",
301
- target: "open"
302
- }
303
- }
304
- }
305
- }
306
- },
307
- {
308
- activities: {
309
- trackPositioning(ctx2) {
310
- ctx2.currentPlacement = ctx2.positioning.placement;
311
- const getPositionerEl = () => dom.getPositionerEl(ctx2);
312
- return (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), getPositionerEl, {
313
- ...ctx2.positioning,
314
- defer: true,
315
- onComplete(data) {
316
- ctx2.currentPlacement = data.placement;
317
- },
318
- onCleanup() {
319
- ctx2.currentPlacement = void 0;
320
- }
321
- });
322
- },
323
- trackPointerlockChange(ctx2, _evt, { send }) {
324
- const onChange = () => send("POINTER_LOCK_CHANGE");
325
- return (0, import_dom_event.addDomEvent)(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
326
- },
327
- trackScroll(ctx2, _evt, { send }) {
328
- const trigger = dom.getTriggerEl(ctx2);
329
- if (!trigger)
330
- return;
331
- const cleanups = (0, import_dom_query3.getScrollParents)(trigger).map((el) => {
332
- const opts = { passive: true, capture: true };
333
- return (0, import_dom_event.addDomEvent)(el, "scroll", () => send("SCROLL"), opts);
334
- });
335
- return () => {
336
- cleanups.forEach((fn) => fn?.());
337
- };
338
- },
339
- trackStore(ctx2, _evt, { send }) {
340
- return (0, import_core2.subscribe)(store, () => {
341
- if (store.id !== ctx2.id) {
342
- send("FORCE_CLOSE");
343
- }
344
- });
345
- },
346
- trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
347
- if (!(0, import_dom_query3.isSafari)())
348
- return;
349
- const doc = dom.getDoc(ctx2);
350
- return (0, import_dom_event.addDomEvent)(doc, "pointermove", (event) => {
351
- const selector = "[data-part=trigger][data-expanded]";
352
- if ((0, import_dom_query3.isHTMLElement)(event.target) && event.target.closest(selector))
353
- return;
354
- send("POINTER_LEAVE");
355
- });
356
- },
357
- trackEscapeKey(ctx2, _evt, { send }) {
358
- if (!ctx2.closeOnEsc)
359
- return;
360
- const doc = dom.getDoc(ctx2);
361
- return (0, import_dom_event.addDomEvent)(doc, "keydown", (event) => {
362
- if (event.key === "Escape") {
363
- send("ESCAPE");
364
- }
365
- });
366
- }
367
- },
368
- actions: {
369
- setGlobalId(ctx2) {
370
- store.setId(ctx2.id);
371
- },
372
- clearGlobalId(ctx2) {
373
- if (ctx2.id === store.id) {
374
- store.setId(null);
375
- }
376
- },
377
- invokeOnOpen(ctx2, evt) {
378
- const omit = ["TOOLTIP_POINTER_ENTER", "POINTER_ENTER"];
379
- if (!omit.includes(evt.type)) {
380
- ctx2.onOpen?.();
381
- }
382
- },
383
- invokeOnClose(ctx2) {
384
- ctx2.onClose?.();
385
- },
386
- closeIfDisabled(ctx2, _evt, { send }) {
387
- if (ctx2.disabled) {
388
- send("CLOSE");
389
- }
390
- },
391
- setPositioning(ctx2, evt) {
392
- const getPositionerEl = () => dom.getPositionerEl(ctx2);
393
- (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), getPositionerEl, {
394
- ...ctx2.positioning,
395
- ...evt.options,
396
- defer: true,
397
- listeners: false
398
- });
399
- },
400
- toggleVisibility(ctx2, _evt, { send }) {
401
- send({ type: ctx2.open ? "OPEN" : "CLOSE", src: "controlled" });
402
- }
403
- },
404
- guards: {
405
- closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
406
- noVisibleTooltip: () => store.id === null,
407
- isVisible: (ctx2) => ctx2.id === store.id,
408
- isInteractive: (ctx2) => ctx2.interactive
409
- },
410
- delays: {
411
- OPEN_DELAY: (ctx2) => ctx2.openDelay,
412
- CLOSE_DELAY: (ctx2) => ctx2.closeDelay
413
- }
414
- }
415
- );
416
- }
417
- // Annotate the CommonJS export names for ESM import in node:
418
- 0 && (module.exports = {
419
- anatomy,
420
- connect,
421
- machine
422
- });
11
+ exports.anatomy = tooltip_anatomy.anatomy;
12
+ exports.connect = tooltip_connect.connect;
13
+ exports.machine = tooltip_machine.machine;
package/dist/index.mjs CHANGED
@@ -1,16 +1,3 @@
1
- import {
2
- connect
3
- } from "./chunk-F2YBSXLT.mjs";
4
- import {
5
- anatomy
6
- } from "./chunk-RRQRIZBA.mjs";
7
- import {
8
- machine
9
- } from "./chunk-GUX4YLRO.mjs";
10
- import "./chunk-BML2QVAG.mjs";
11
- import "./chunk-GQYNO326.mjs";
12
- export {
13
- anatomy,
14
- connect,
15
- machine
16
- };
1
+ export { anatomy } from './tooltip.anatomy.mjs';
2
+ export { connect } from './tooltip.connect.mjs';
3
+ export { machine } from './tooltip.machine.mjs';
@@ -1,6 +1,3 @@
1
- import * as _zag_js_anatomy from '@zag-js/anatomy';
2
-
3
- declare const anatomy: _zag_js_anatomy.AnatomyInstance<"trigger" | "arrow" | "arrowTip" | "positioner" | "content" | "label">;
4
- declare const parts: Record<"trigger" | "arrow" | "arrowTip" | "positioner" | "content" | "label", _zag_js_anatomy.AnatomyPart>;
5
-
6
- export { anatomy, parts };
1
+ import { AnatomyInstance, AnatomyPart } from '@zag-js/anatomy';
2
+ export declare const anatomy: AnatomyInstance<"trigger" | "arrow" | "arrowTip" | "positioner" | "content" | "label">;
3
+ export declare const parts: Record<"trigger" | "arrow" | "arrowTip" | "positioner" | "content" | "label", AnatomyPart>;
@@ -1,34 +1,11 @@
1
- "use strict";
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __hasOwnProp = Object.prototype.hasOwnProperty;
6
- var __export = (target, all) => {
7
- for (var name in all)
8
- __defProp(target, name, { get: all[name], enumerable: true });
9
- };
10
- var __copyProps = (to, from, except, desc) => {
11
- if (from && typeof from === "object" || typeof from === "function") {
12
- for (let key of __getOwnPropNames(from))
13
- if (!__hasOwnProp.call(to, key) && key !== except)
14
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
15
- }
16
- return to;
17
- };
18
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
1
+ 'use strict';
19
2
 
20
- // src/tooltip.anatomy.ts
21
- var tooltip_anatomy_exports = {};
22
- __export(tooltip_anatomy_exports, {
23
- anatomy: () => anatomy,
24
- parts: () => parts
25
- });
26
- module.exports = __toCommonJS(tooltip_anatomy_exports);
27
- var import_anatomy = require("@zag-js/anatomy");
28
- var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
29
- var parts = anatomy.build();
30
- // Annotate the CommonJS export names for ESM import in node:
31
- 0 && (module.exports = {
32
- anatomy,
33
- parts
34
- });
3
+ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
4
+
5
+ const anatomy$1 = require('@zag-js/anatomy');
6
+
7
+ const anatomy = anatomy$1.createAnatomy("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
8
+ const parts = anatomy.build();
9
+
10
+ exports.anatomy = anatomy;
11
+ exports.parts = parts;
@@ -1,8 +1,6 @@
1
- import {
2
- anatomy,
3
- parts
4
- } from "./chunk-RRQRIZBA.mjs";
5
- export {
6
- anatomy,
7
- parts
8
- };
1
+ import { createAnatomy } from '@zag-js/anatomy';
2
+
3
+ const anatomy = createAnatomy("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content", "label");
4
+ const parts = anatomy.build();
5
+
6
+ export { anatomy, parts };
@@ -1,9 +1,7 @@
1
- import { PositioningOptions } from '@zag-js/popper';
2
- import { PropTypes, NormalizeProps } from '@zag-js/types';
3
- import { State, Send } from './tooltip.types.js';
4
- import '@zag-js/core';
5
-
6
- declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
1
+ import { PositioningOptions } from "@zag-js/popper";
2
+ import type { NormalizeProps, PropTypes } from "@zag-js/types";
3
+ import type { Send, State } from "./tooltip.types";
4
+ export declare function connect<T extends PropTypes>(state: State, send: Send, normalize: NormalizeProps<T>): {
7
5
  /**
8
6
  * Whether the tooltip is open.
9
7
  */
@@ -34,5 +32,3 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
34
32
  contentProps: T["element"];
35
33
  labelProps: T["element"];
36
34
  };
37
-
38
- export { connect };