@zag-js/tooltip 0.49.0 → 0.51.0
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.mts +9 -3
- package/dist/index.d.ts +9 -3
- package/dist/index.js +1 -511
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -480
- package/dist/index.mjs.map +1 -1
- package/package.json +8 -8
- package/src/tooltip.connect.ts +3 -3
- package/src/tooltip.machine.ts +3 -3
- package/src/tooltip.props.ts +1 -1
- package/src/tooltip.types.ts +7 -1
package/dist/index.d.mts
CHANGED
|
@@ -27,24 +27,30 @@ interface PublicContext extends DirectionProperty, CommonProperties {
|
|
|
27
27
|
id: string;
|
|
28
28
|
/**
|
|
29
29
|
* The open delay of the tooltip.
|
|
30
|
+
* @default 1000
|
|
30
31
|
*/
|
|
31
32
|
openDelay: number;
|
|
32
33
|
/**
|
|
33
34
|
* The close delay of the tooltip.
|
|
35
|
+
* @default 500
|
|
34
36
|
*/
|
|
35
37
|
closeDelay: number;
|
|
36
38
|
/**
|
|
37
39
|
* Whether to close the tooltip on pointerdown.
|
|
40
|
+
* @default true
|
|
38
41
|
*/
|
|
39
42
|
closeOnPointerDown: boolean;
|
|
40
43
|
/**
|
|
41
44
|
* Whether to close the tooltip when the Escape key is pressed.
|
|
45
|
+
* @default true
|
|
42
46
|
*/
|
|
43
|
-
|
|
47
|
+
closeOnEscape?: boolean;
|
|
44
48
|
/**
|
|
45
49
|
* Whether the tooltip's content is interactive.
|
|
46
50
|
* In this mode, the tooltip will remain open when user hovers over the content.
|
|
47
51
|
* @see https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus
|
|
52
|
+
*
|
|
53
|
+
* @default false
|
|
48
54
|
*/
|
|
49
55
|
interactive: boolean;
|
|
50
56
|
/**
|
|
@@ -113,7 +119,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
113
119
|
|
|
114
120
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
115
121
|
|
|
116
|
-
declare const props: ("dir" | "
|
|
117
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "
|
|
122
|
+
declare const props: ("dir" | "id" | "getRootNode" | "open" | "disabled" | "aria-label" | "ids" | "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "interactive" | "onOpenChange" | "positioning" | "open.controlled")[];
|
|
123
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "open" | "disabled" | "aria-label" | "ids" | "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "interactive" | "onOpenChange" | "positioning" | "open.controlled">];
|
|
118
124
|
|
|
119
125
|
export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, anatomy, connect, machine, props, splitProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -27,24 +27,30 @@ interface PublicContext extends DirectionProperty, CommonProperties {
|
|
|
27
27
|
id: string;
|
|
28
28
|
/**
|
|
29
29
|
* The open delay of the tooltip.
|
|
30
|
+
* @default 1000
|
|
30
31
|
*/
|
|
31
32
|
openDelay: number;
|
|
32
33
|
/**
|
|
33
34
|
* The close delay of the tooltip.
|
|
35
|
+
* @default 500
|
|
34
36
|
*/
|
|
35
37
|
closeDelay: number;
|
|
36
38
|
/**
|
|
37
39
|
* Whether to close the tooltip on pointerdown.
|
|
40
|
+
* @default true
|
|
38
41
|
*/
|
|
39
42
|
closeOnPointerDown: boolean;
|
|
40
43
|
/**
|
|
41
44
|
* Whether to close the tooltip when the Escape key is pressed.
|
|
45
|
+
* @default true
|
|
42
46
|
*/
|
|
43
|
-
|
|
47
|
+
closeOnEscape?: boolean;
|
|
44
48
|
/**
|
|
45
49
|
* Whether the tooltip's content is interactive.
|
|
46
50
|
* In this mode, the tooltip will remain open when user hovers over the content.
|
|
47
51
|
* @see https://www.w3.org/TR/WCAG21/#content-on-hover-or-focus
|
|
52
|
+
*
|
|
53
|
+
* @default false
|
|
48
54
|
*/
|
|
49
55
|
interactive: boolean;
|
|
50
56
|
/**
|
|
@@ -113,7 +119,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
|
|
|
113
119
|
|
|
114
120
|
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
115
121
|
|
|
116
|
-
declare const props: ("dir" | "
|
|
117
|
-
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "
|
|
122
|
+
declare const props: ("dir" | "id" | "getRootNode" | "open" | "disabled" | "aria-label" | "ids" | "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "interactive" | "onOpenChange" | "positioning" | "open.controlled")[];
|
|
123
|
+
declare const splitProps: <Props extends Partial<UserDefinedContext>>(props: Props) => [Partial<UserDefinedContext>, Omit<Props, "dir" | "id" | "getRootNode" | "open" | "disabled" | "aria-label" | "ids" | "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "interactive" | "onOpenChange" | "positioning" | "open.controlled">];
|
|
118
124
|
|
|
119
125
|
export { type MachineApi as Api, type UserDefinedContext as Context, type ElementIds, type OpenChangeDetails, anatomy, connect, machine, props, splitProps };
|
package/dist/index.js
CHANGED
|
@@ -1,512 +1,2 @@
|
|
|
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);
|
|
19
|
-
|
|
20
|
-
// src/index.ts
|
|
21
|
-
var src_exports = {};
|
|
22
|
-
__export(src_exports, {
|
|
23
|
-
anatomy: () => anatomy,
|
|
24
|
-
connect: () => connect,
|
|
25
|
-
machine: () => machine,
|
|
26
|
-
props: () => props,
|
|
27
|
-
splitProps: () => splitProps
|
|
28
|
-
});
|
|
29
|
-
module.exports = __toCommonJS(src_exports);
|
|
30
|
-
|
|
31
|
-
// src/tooltip.anatomy.ts
|
|
32
|
-
var import_anatomy = require("@zag-js/anatomy");
|
|
33
|
-
var anatomy = (0, import_anatomy.createAnatomy)("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content");
|
|
34
|
-
var parts = anatomy.build();
|
|
35
|
-
|
|
36
|
-
// src/tooltip.connect.ts
|
|
37
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
38
|
-
var import_popper = require("@zag-js/popper");
|
|
39
|
-
|
|
40
|
-
// src/tooltip.dom.ts
|
|
41
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
42
|
-
var dom = (0, import_dom_query.createScope)({
|
|
43
|
-
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
44
|
-
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
45
|
-
getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
|
|
46
|
-
getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
|
|
47
|
-
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
48
|
-
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
49
|
-
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
50
|
-
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx))
|
|
51
|
-
});
|
|
52
|
-
|
|
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 open = state.hasTag("open");
|
|
69
|
-
const triggerId = dom.getTriggerId(state.context);
|
|
70
|
-
const contentId = dom.getContentId(state.context);
|
|
71
|
-
const disabled = state.context.disabled;
|
|
72
|
-
const popperStyles = (0, import_popper.getPlacementStyles)({
|
|
73
|
-
...state.context.positioning,
|
|
74
|
-
placement: state.context.currentPlacement
|
|
75
|
-
});
|
|
76
|
-
return {
|
|
77
|
-
open,
|
|
78
|
-
setOpen(_open) {
|
|
79
|
-
if (_open === open)
|
|
80
|
-
return;
|
|
81
|
-
send(_open ? "OPEN" : "CLOSE");
|
|
82
|
-
},
|
|
83
|
-
reposition(options = {}) {
|
|
84
|
-
send({ type: "POSITIONING.SET", options });
|
|
85
|
-
},
|
|
86
|
-
triggerProps: normalize.button({
|
|
87
|
-
...parts.trigger.attrs,
|
|
88
|
-
id: triggerId,
|
|
89
|
-
dir: state.context.dir,
|
|
90
|
-
"data-expanded": (0, import_dom_query2.dataAttr)(open),
|
|
91
|
-
"data-state": open ? "open" : "closed",
|
|
92
|
-
"aria-describedby": open ? contentId : void 0,
|
|
93
|
-
onClick() {
|
|
94
|
-
if (disabled)
|
|
95
|
-
return;
|
|
96
|
-
send("CLOSE");
|
|
97
|
-
},
|
|
98
|
-
onFocus() {
|
|
99
|
-
if (disabled || state.event.type === "POINTER_DOWN")
|
|
100
|
-
return;
|
|
101
|
-
send("OPEN");
|
|
102
|
-
},
|
|
103
|
-
onBlur() {
|
|
104
|
-
if (disabled)
|
|
105
|
-
return;
|
|
106
|
-
if (id === store.id) {
|
|
107
|
-
send("CLOSE");
|
|
108
|
-
}
|
|
109
|
-
},
|
|
110
|
-
onPointerDown() {
|
|
111
|
-
if (disabled || !state.context.closeOnPointerDown)
|
|
112
|
-
return;
|
|
113
|
-
if (id === store.id) {
|
|
114
|
-
send("CLOSE");
|
|
115
|
-
}
|
|
116
|
-
},
|
|
117
|
-
onPointerMove(event) {
|
|
118
|
-
if (disabled || event.pointerType === "touch")
|
|
119
|
-
return;
|
|
120
|
-
send("POINTER_MOVE");
|
|
121
|
-
},
|
|
122
|
-
onPointerLeave() {
|
|
123
|
-
if (disabled)
|
|
124
|
-
return;
|
|
125
|
-
send("POINTER_LEAVE");
|
|
126
|
-
},
|
|
127
|
-
onPointerCancel() {
|
|
128
|
-
if (disabled)
|
|
129
|
-
return;
|
|
130
|
-
send("POINTER_LEAVE");
|
|
131
|
-
}
|
|
132
|
-
}),
|
|
133
|
-
arrowProps: normalize.element({
|
|
134
|
-
id: dom.getArrowId(state.context),
|
|
135
|
-
...parts.arrow.attrs,
|
|
136
|
-
dir: state.context.dir,
|
|
137
|
-
style: popperStyles.arrow
|
|
138
|
-
}),
|
|
139
|
-
arrowTipProps: normalize.element({
|
|
140
|
-
...parts.arrowTip.attrs,
|
|
141
|
-
dir: state.context.dir,
|
|
142
|
-
style: popperStyles.arrowTip
|
|
143
|
-
}),
|
|
144
|
-
positionerProps: normalize.element({
|
|
145
|
-
id: dom.getPositionerId(state.context),
|
|
146
|
-
...parts.positioner.attrs,
|
|
147
|
-
dir: state.context.dir,
|
|
148
|
-
style: popperStyles.floating
|
|
149
|
-
}),
|
|
150
|
-
contentProps: normalize.element({
|
|
151
|
-
...parts.content.attrs,
|
|
152
|
-
dir: state.context.dir,
|
|
153
|
-
hidden: !open,
|
|
154
|
-
"data-state": open ? "open" : "closed",
|
|
155
|
-
role: hasAriaLabel ? void 0 : "tooltip",
|
|
156
|
-
id: hasAriaLabel ? void 0 : contentId,
|
|
157
|
-
"data-placement": state.context.currentPlacement,
|
|
158
|
-
onPointerEnter() {
|
|
159
|
-
send("CONTENT.POINTER_MOVE");
|
|
160
|
-
},
|
|
161
|
-
onPointerLeave() {
|
|
162
|
-
send("CONTENT.POINTER_LEAVE");
|
|
163
|
-
},
|
|
164
|
-
style: {
|
|
165
|
-
pointerEvents: state.context.interactive ? "auto" : "none"
|
|
166
|
-
}
|
|
167
|
-
})
|
|
168
|
-
};
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
// src/tooltip.machine.ts
|
|
172
|
-
var import_core2 = require("@zag-js/core");
|
|
173
|
-
var import_dom_event = require("@zag-js/dom-event");
|
|
174
|
-
var import_dom_query3 = require("@zag-js/dom-query");
|
|
175
|
-
var import_popper2 = require("@zag-js/popper");
|
|
176
|
-
var import_utils = require("@zag-js/utils");
|
|
177
|
-
var { and, not } = import_core2.guards;
|
|
178
|
-
function machine(userContext) {
|
|
179
|
-
const ctx = (0, import_utils.compact)(userContext);
|
|
180
|
-
return (0, import_core2.createMachine)(
|
|
181
|
-
{
|
|
182
|
-
id: "tooltip",
|
|
183
|
-
initial: ctx.open ? "open" : "closed",
|
|
184
|
-
context: {
|
|
185
|
-
openDelay: 1e3,
|
|
186
|
-
closeDelay: 500,
|
|
187
|
-
closeOnPointerDown: true,
|
|
188
|
-
closeOnEsc: true,
|
|
189
|
-
interactive: false,
|
|
190
|
-
currentPlacement: void 0,
|
|
191
|
-
...ctx,
|
|
192
|
-
hasPointerMoveOpened: false,
|
|
193
|
-
positioning: {
|
|
194
|
-
placement: "bottom",
|
|
195
|
-
...ctx.positioning
|
|
196
|
-
}
|
|
197
|
-
},
|
|
198
|
-
computed: {
|
|
199
|
-
hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
|
|
200
|
-
},
|
|
201
|
-
watch: {
|
|
202
|
-
disabled: ["closeIfDisabled"],
|
|
203
|
-
open: ["toggleVisibility"]
|
|
204
|
-
},
|
|
205
|
-
states: {
|
|
206
|
-
closed: {
|
|
207
|
-
tags: ["closed"],
|
|
208
|
-
entry: ["clearGlobalId"],
|
|
209
|
-
on: {
|
|
210
|
-
"CONTROLLED.OPEN": "open",
|
|
211
|
-
OPEN: {
|
|
212
|
-
target: "open",
|
|
213
|
-
actions: ["invokeOnOpen"]
|
|
214
|
-
},
|
|
215
|
-
POINTER_LEAVE: {
|
|
216
|
-
actions: ["clearPointerMoveOpened"]
|
|
217
|
-
},
|
|
218
|
-
POINTER_MOVE: [
|
|
219
|
-
{
|
|
220
|
-
guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
|
|
221
|
-
target: "opening"
|
|
222
|
-
},
|
|
223
|
-
{
|
|
224
|
-
guard: not("hasPointerMoveOpened"),
|
|
225
|
-
target: "open",
|
|
226
|
-
actions: ["setPointerMoveOpened", "invokeOnOpen"]
|
|
227
|
-
}
|
|
228
|
-
]
|
|
229
|
-
}
|
|
230
|
-
},
|
|
231
|
-
opening: {
|
|
232
|
-
tags: ["closed"],
|
|
233
|
-
activities: ["trackScroll", "trackPointerlockChange"],
|
|
234
|
-
after: {
|
|
235
|
-
OPEN_DELAY: [
|
|
236
|
-
{
|
|
237
|
-
guard: "isOpenControlled",
|
|
238
|
-
actions: ["setPointerMoveOpened", "invokeOnOpen"]
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
target: "open",
|
|
242
|
-
actions: ["setPointerMoveOpened", "invokeOnOpen"]
|
|
243
|
-
}
|
|
244
|
-
]
|
|
245
|
-
},
|
|
246
|
-
on: {
|
|
247
|
-
"CONTROLLED.OPEN": "open",
|
|
248
|
-
"CONTROLLED.CLOSE": "closed",
|
|
249
|
-
OPEN: [
|
|
250
|
-
{
|
|
251
|
-
guard: "isOpenControlled",
|
|
252
|
-
actions: ["invokeOnOpen"]
|
|
253
|
-
},
|
|
254
|
-
{
|
|
255
|
-
target: "open",
|
|
256
|
-
actions: ["invokeOnOpen"]
|
|
257
|
-
}
|
|
258
|
-
],
|
|
259
|
-
POINTER_LEAVE: [
|
|
260
|
-
{
|
|
261
|
-
guard: "isOpenControlled",
|
|
262
|
-
actions: ["clearPointerMoveOpened", "invokeOnClose"]
|
|
263
|
-
},
|
|
264
|
-
{
|
|
265
|
-
target: "closed",
|
|
266
|
-
actions: ["clearPointerMoveOpened", "invokeOnClose"]
|
|
267
|
-
}
|
|
268
|
-
],
|
|
269
|
-
CLOSE: {
|
|
270
|
-
target: "closed",
|
|
271
|
-
actions: ["invokeOnClose"]
|
|
272
|
-
}
|
|
273
|
-
}
|
|
274
|
-
},
|
|
275
|
-
open: {
|
|
276
|
-
tags: ["open"],
|
|
277
|
-
activities: [
|
|
278
|
-
"trackEscapeKey",
|
|
279
|
-
"trackDisabledTriggerOnSafari",
|
|
280
|
-
"trackScroll",
|
|
281
|
-
"trackPointerlockChange",
|
|
282
|
-
"trackPositioning"
|
|
283
|
-
],
|
|
284
|
-
entry: ["setGlobalId"],
|
|
285
|
-
on: {
|
|
286
|
-
"CONTROLLED.CLOSE": "closed",
|
|
287
|
-
CLOSE: {
|
|
288
|
-
target: "closed",
|
|
289
|
-
actions: ["invokeOnClose"]
|
|
290
|
-
},
|
|
291
|
-
POINTER_LEAVE: [
|
|
292
|
-
{
|
|
293
|
-
guard: "isVisible",
|
|
294
|
-
target: "closing",
|
|
295
|
-
actions: ["clearPointerMoveOpened"]
|
|
296
|
-
},
|
|
297
|
-
// == group ==
|
|
298
|
-
{
|
|
299
|
-
guard: "isOpenControlled",
|
|
300
|
-
actions: ["clearPointerMoveOpened", "invokeOnClose"]
|
|
301
|
-
},
|
|
302
|
-
{
|
|
303
|
-
target: "closed",
|
|
304
|
-
actions: ["clearPointerMoveOpened", "invokeOnClose"]
|
|
305
|
-
}
|
|
306
|
-
],
|
|
307
|
-
"CONTENT.POINTER_LEAVE": {
|
|
308
|
-
guard: "isInteractive",
|
|
309
|
-
target: "closing"
|
|
310
|
-
},
|
|
311
|
-
"POSITIONING.SET": {
|
|
312
|
-
actions: "reposition"
|
|
313
|
-
}
|
|
314
|
-
}
|
|
315
|
-
},
|
|
316
|
-
closing: {
|
|
317
|
-
tags: ["open"],
|
|
318
|
-
activities: ["trackStore", "trackPositioning"],
|
|
319
|
-
after: {
|
|
320
|
-
CLOSE_DELAY: [
|
|
321
|
-
{
|
|
322
|
-
guard: "isOpenControlled",
|
|
323
|
-
actions: ["invokeOnClose"]
|
|
324
|
-
},
|
|
325
|
-
{
|
|
326
|
-
target: "closed",
|
|
327
|
-
actions: ["invokeOnClose"]
|
|
328
|
-
}
|
|
329
|
-
]
|
|
330
|
-
},
|
|
331
|
-
on: {
|
|
332
|
-
"CONTROLLED.CLOSE": "closed",
|
|
333
|
-
"CONTROLLED.OPEN": "open",
|
|
334
|
-
CLOSE: [
|
|
335
|
-
{
|
|
336
|
-
guard: "isOpenControlled",
|
|
337
|
-
actions: ["invokeOnClose"]
|
|
338
|
-
},
|
|
339
|
-
{
|
|
340
|
-
target: "closed",
|
|
341
|
-
actions: ["invokeOnClose"]
|
|
342
|
-
}
|
|
343
|
-
],
|
|
344
|
-
POINTER_MOVE: [
|
|
345
|
-
{
|
|
346
|
-
guard: "isOpenControlled",
|
|
347
|
-
actions: ["setPointerMoveOpened", "invokeOnOpen"]
|
|
348
|
-
},
|
|
349
|
-
{
|
|
350
|
-
target: "open",
|
|
351
|
-
actions: ["setPointerMoveOpened", "invokeOnOpen"]
|
|
352
|
-
}
|
|
353
|
-
],
|
|
354
|
-
"CONTENT.POINTER_MOVE": {
|
|
355
|
-
guard: "isInteractive",
|
|
356
|
-
target: "open"
|
|
357
|
-
},
|
|
358
|
-
"POSITIONING.SET": {
|
|
359
|
-
actions: "reposition"
|
|
360
|
-
}
|
|
361
|
-
}
|
|
362
|
-
}
|
|
363
|
-
}
|
|
364
|
-
},
|
|
365
|
-
{
|
|
366
|
-
activities: {
|
|
367
|
-
trackPositioning(ctx2) {
|
|
368
|
-
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
369
|
-
const getPositionerEl = () => dom.getPositionerEl(ctx2);
|
|
370
|
-
return (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), getPositionerEl, {
|
|
371
|
-
...ctx2.positioning,
|
|
372
|
-
defer: true,
|
|
373
|
-
onComplete(data) {
|
|
374
|
-
ctx2.currentPlacement = data.placement;
|
|
375
|
-
}
|
|
376
|
-
});
|
|
377
|
-
},
|
|
378
|
-
trackPointerlockChange(ctx2, _evt, { send }) {
|
|
379
|
-
const onChange = () => send({ type: "CLOSE", src: "pointerlock:change" });
|
|
380
|
-
return (0, import_dom_event.addDomEvent)(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
|
|
381
|
-
},
|
|
382
|
-
trackScroll(ctx2, _evt, { send }) {
|
|
383
|
-
const triggerEl = dom.getTriggerEl(ctx2);
|
|
384
|
-
if (!triggerEl)
|
|
385
|
-
return;
|
|
386
|
-
const overflowParents = (0, import_dom_query3.getOverflowAncestors)(triggerEl);
|
|
387
|
-
const cleanups = overflowParents.map(
|
|
388
|
-
(overflowParent) => (0, import_dom_event.addDomEvent)(overflowParent, "scroll", () => send({ type: "CLOSE", src: "scroll" }), {
|
|
389
|
-
passive: true,
|
|
390
|
-
capture: true
|
|
391
|
-
})
|
|
392
|
-
);
|
|
393
|
-
return () => {
|
|
394
|
-
cleanups.forEach((fn) => fn?.());
|
|
395
|
-
};
|
|
396
|
-
},
|
|
397
|
-
trackStore(ctx2, _evt, { send }) {
|
|
398
|
-
return (0, import_core2.subscribe)(store, () => {
|
|
399
|
-
if (store.id !== ctx2.id) {
|
|
400
|
-
send({ type: "CLOSE", src: "id:change" });
|
|
401
|
-
}
|
|
402
|
-
});
|
|
403
|
-
},
|
|
404
|
-
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
405
|
-
if (!(0, import_dom_query3.isSafari)())
|
|
406
|
-
return;
|
|
407
|
-
const doc = dom.getDoc(ctx2);
|
|
408
|
-
return (0, import_dom_event.addDomEvent)(doc, "pointermove", (event) => {
|
|
409
|
-
const selector = "[data-part=trigger][data-expanded]";
|
|
410
|
-
if ((0, import_dom_query3.isHTMLElement)(event.target) && event.target.closest(selector))
|
|
411
|
-
return;
|
|
412
|
-
send("POINTER_LEAVE");
|
|
413
|
-
});
|
|
414
|
-
},
|
|
415
|
-
trackEscapeKey(ctx2, _evt, { send }) {
|
|
416
|
-
if (!ctx2.closeOnEsc)
|
|
417
|
-
return;
|
|
418
|
-
const doc = dom.getDoc(ctx2);
|
|
419
|
-
return (0, import_dom_event.addDomEvent)(doc, "keydown", (event) => {
|
|
420
|
-
if (event.key === "Escape") {
|
|
421
|
-
send("CLOSE");
|
|
422
|
-
}
|
|
423
|
-
});
|
|
424
|
-
}
|
|
425
|
-
},
|
|
426
|
-
actions: {
|
|
427
|
-
setGlobalId(ctx2) {
|
|
428
|
-
store.setId(ctx2.id);
|
|
429
|
-
},
|
|
430
|
-
clearGlobalId(ctx2) {
|
|
431
|
-
if (ctx2.id === store.id) {
|
|
432
|
-
store.setId(null);
|
|
433
|
-
}
|
|
434
|
-
},
|
|
435
|
-
invokeOnOpen(ctx2) {
|
|
436
|
-
ctx2.onOpenChange?.({ open: true });
|
|
437
|
-
},
|
|
438
|
-
invokeOnClose(ctx2) {
|
|
439
|
-
ctx2.onOpenChange?.({ open: false });
|
|
440
|
-
},
|
|
441
|
-
closeIfDisabled(ctx2, _evt, { send }) {
|
|
442
|
-
if (!ctx2.disabled)
|
|
443
|
-
return;
|
|
444
|
-
send({ type: "CLOSE", src: "disabled:change" });
|
|
445
|
-
},
|
|
446
|
-
reposition(ctx2, evt) {
|
|
447
|
-
const getPositionerEl = () => dom.getPositionerEl(ctx2);
|
|
448
|
-
(0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), getPositionerEl, {
|
|
449
|
-
...ctx2.positioning,
|
|
450
|
-
...evt.options,
|
|
451
|
-
defer: true,
|
|
452
|
-
listeners: false,
|
|
453
|
-
onComplete(data) {
|
|
454
|
-
ctx2.currentPlacement = data.placement;
|
|
455
|
-
}
|
|
456
|
-
});
|
|
457
|
-
},
|
|
458
|
-
toggleVisibility(ctx2, evt, { send }) {
|
|
459
|
-
send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
|
|
460
|
-
},
|
|
461
|
-
setPointerMoveOpened(ctx2) {
|
|
462
|
-
ctx2.hasPointerMoveOpened = true;
|
|
463
|
-
},
|
|
464
|
-
clearPointerMoveOpened(ctx2) {
|
|
465
|
-
ctx2.hasPointerMoveOpened = false;
|
|
466
|
-
}
|
|
467
|
-
},
|
|
468
|
-
guards: {
|
|
469
|
-
noVisibleTooltip: () => store.id === null,
|
|
470
|
-
isVisible: (ctx2) => ctx2.id === store.id,
|
|
471
|
-
isInteractive: (ctx2) => ctx2.interactive,
|
|
472
|
-
hasPointerMoveOpened: (ctx2) => !!ctx2.hasPointerMoveOpened,
|
|
473
|
-
isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
|
|
474
|
-
},
|
|
475
|
-
delays: {
|
|
476
|
-
OPEN_DELAY: (ctx2) => ctx2.openDelay,
|
|
477
|
-
CLOSE_DELAY: (ctx2) => ctx2.closeDelay
|
|
478
|
-
}
|
|
479
|
-
}
|
|
480
|
-
);
|
|
481
|
-
}
|
|
482
|
-
|
|
483
|
-
// src/tooltip.props.ts
|
|
484
|
-
var import_types = require("@zag-js/types");
|
|
485
|
-
var import_utils2 = require("@zag-js/utils");
|
|
486
|
-
var props = (0, import_types.createProps)()([
|
|
487
|
-
"aria-label",
|
|
488
|
-
"closeDelay",
|
|
489
|
-
"closeOnEsc",
|
|
490
|
-
"closeOnPointerDown",
|
|
491
|
-
"dir",
|
|
492
|
-
"disabled",
|
|
493
|
-
"getRootNode",
|
|
494
|
-
"id",
|
|
495
|
-
"ids",
|
|
496
|
-
"interactive",
|
|
497
|
-
"onOpenChange",
|
|
498
|
-
"open.controlled",
|
|
499
|
-
"open",
|
|
500
|
-
"openDelay",
|
|
501
|
-
"positioning"
|
|
502
|
-
]);
|
|
503
|
-
var splitProps = (0, import_utils2.createSplitProps)(props);
|
|
504
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
505
|
-
0 && (module.exports = {
|
|
506
|
-
anatomy,
|
|
507
|
-
connect,
|
|
508
|
-
machine,
|
|
509
|
-
props,
|
|
510
|
-
splitProps
|
|
511
|
-
});
|
|
1
|
+
"use strict";var __defProp=Object.defineProperty;var __getOwnPropDesc=Object.getOwnPropertyDescriptor;var __getOwnPropNames=Object.getOwnPropertyNames;var __hasOwnProp=Object.prototype.hasOwnProperty;var __export=(target,all)=>{for(var name in all)__defProp(target,name,{get:all[name],enumerable:true})};var __copyProps=(to,from,except,desc)=>{if(from&&typeof from==="object"||typeof from==="function"){for(let key of __getOwnPropNames(from))if(!__hasOwnProp.call(to,key)&&key!==except)__defProp(to,key,{get:()=>from[key],enumerable:!(desc=__getOwnPropDesc(from,key))||desc.enumerable})}return to};var __toCommonJS=mod=>__copyProps(__defProp({},"__esModule",{value:true}),mod);var src_exports={};__export(src_exports,{anatomy:()=>anatomy,connect:()=>connect,machine:()=>machine,props:()=>props,splitProps:()=>splitProps});module.exports=__toCommonJS(src_exports);var import_anatomy=require("@zag-js/anatomy");var anatomy=(0,import_anatomy.createAnatomy)("tooltip").parts("trigger","arrow","arrowTip","positioner","content");var parts=anatomy.build();var import_dom_query2=require("@zag-js/dom-query");var import_popper=require("@zag-js/popper");var import_dom_query=require("@zag-js/dom-query");var dom=(0,import_dom_query.createScope)({getTriggerId:ctx=>ctx.ids?.trigger??`tooltip:${ctx.id}:trigger`,getContentId:ctx=>ctx.ids?.content??`tooltip:${ctx.id}:content`,getArrowId:ctx=>ctx.ids?.arrow??`tooltip:${ctx.id}:arrow`,getPositionerId:ctx=>ctx.ids?.positioner??`tooltip:${ctx.id}:popper`,getTriggerEl:ctx=>dom.getById(ctx,dom.getTriggerId(ctx)),getContentEl:ctx=>dom.getById(ctx,dom.getContentId(ctx)),getPositionerEl:ctx=>dom.getById(ctx,dom.getPositionerId(ctx)),getArrowEl:ctx=>dom.getById(ctx,dom.getArrowId(ctx))});var import_core=require("@zag-js/core");var store=(0,import_core.proxy)({id:null,prevId:null,setId(val){this.prevId=this.id;this.id=val}});function connect(state,send,normalize){const id=state.context.id;const hasAriaLabel=state.context.hasAriaLabel;const open=state.hasTag("open");const triggerId=dom.getTriggerId(state.context);const contentId=dom.getContentId(state.context);const disabled=state.context.disabled;const popperStyles=(0,import_popper.getPlacementStyles)({...state.context.positioning,placement:state.context.currentPlacement});return{open,setOpen(nextOpen){if(nextOpen===open)return;send(nextOpen?"OPEN":"CLOSE")},reposition(options={}){send({type:"POSITIONING.SET",options})},triggerProps:normalize.button({...parts.trigger.attrs,id:triggerId,dir:state.context.dir,"data-expanded":(0,import_dom_query2.dataAttr)(open),"data-state":open?"open":"closed","aria-describedby":open?contentId:void 0,onClick(){if(disabled)return;send("CLOSE")},onFocus(){if(disabled||state.event.type==="POINTER_DOWN")return;send("OPEN")},onBlur(){if(disabled)return;if(id===store.id){send("CLOSE")}},onPointerDown(){if(disabled||!state.context.closeOnPointerDown)return;if(id===store.id){send("CLOSE")}},onPointerMove(event){if(disabled||event.pointerType==="touch")return;send("POINTER_MOVE")},onPointerLeave(){if(disabled)return;send("POINTER_LEAVE")},onPointerCancel(){if(disabled)return;send("POINTER_LEAVE")}}),arrowProps:normalize.element({id:dom.getArrowId(state.context),...parts.arrow.attrs,dir:state.context.dir,style:popperStyles.arrow}),arrowTipProps:normalize.element({...parts.arrowTip.attrs,dir:state.context.dir,style:popperStyles.arrowTip}),positionerProps:normalize.element({id:dom.getPositionerId(state.context),...parts.positioner.attrs,dir:state.context.dir,style:popperStyles.floating}),contentProps:normalize.element({...parts.content.attrs,dir:state.context.dir,hidden:!open,"data-state":open?"open":"closed",role:hasAriaLabel?void 0:"tooltip",id:hasAriaLabel?void 0:contentId,"data-placement":state.context.currentPlacement,onPointerEnter(){send("CONTENT.POINTER_MOVE")},onPointerLeave(){send("CONTENT.POINTER_LEAVE")},style:{pointerEvents:state.context.interactive?"auto":"none"}})}}var import_core2=require("@zag-js/core");var import_dom_event=require("@zag-js/dom-event");var import_dom_query3=require("@zag-js/dom-query");var import_popper2=require("@zag-js/popper");var import_utils=require("@zag-js/utils");var{and,not}=import_core2.guards;function machine(userContext){const ctx=(0,import_utils.compact)(userContext);return(0,import_core2.createMachine)({id:"tooltip",initial:ctx.open?"open":"closed",context:{openDelay:1e3,closeDelay:500,closeOnPointerDown:true,closeOnEscape:true,interactive:false,...ctx,currentPlacement:void 0,hasPointerMoveOpened:false,positioning:{placement:"bottom",...ctx.positioning}},computed:{hasAriaLabel:ctx2=>!!ctx2["aria-label"]},watch:{disabled:["closeIfDisabled"],open:["toggleVisibility"]},states:{closed:{tags:["closed"],entry:["clearGlobalId"],on:{"CONTROLLED.OPEN":"open",OPEN:{target:"open",actions:["invokeOnOpen"]},POINTER_LEAVE:{actions:["clearPointerMoveOpened"]},POINTER_MOVE:[{guard:and("noVisibleTooltip",not("hasPointerMoveOpened")),target:"opening"},{guard:not("hasPointerMoveOpened"),target:"open",actions:["setPointerMoveOpened","invokeOnOpen"]}]}},opening:{tags:["closed"],activities:["trackScroll","trackPointerlockChange"],after:{OPEN_DELAY:[{guard:"isOpenControlled",actions:["setPointerMoveOpened","invokeOnOpen"]},{target:"open",actions:["setPointerMoveOpened","invokeOnOpen"]}]},on:{"CONTROLLED.OPEN":"open","CONTROLLED.CLOSE":"closed",OPEN:[{guard:"isOpenControlled",actions:["invokeOnOpen"]},{target:"open",actions:["invokeOnOpen"]}],POINTER_LEAVE:[{guard:"isOpenControlled",actions:["clearPointerMoveOpened","invokeOnClose"]},{target:"closed",actions:["clearPointerMoveOpened","invokeOnClose"]}],CLOSE:{target:"closed",actions:["invokeOnClose"]}}},open:{tags:["open"],activities:["trackEscapeKey","trackDisabledTriggerOnSafari","trackScroll","trackPointerlockChange","trackPositioning"],entry:["setGlobalId"],on:{"CONTROLLED.CLOSE":"closed",CLOSE:{target:"closed",actions:["invokeOnClose"]},POINTER_LEAVE:[{guard:"isVisible",target:"closing",actions:["clearPointerMoveOpened"]},{guard:"isOpenControlled",actions:["clearPointerMoveOpened","invokeOnClose"]},{target:"closed",actions:["clearPointerMoveOpened","invokeOnClose"]}],"CONTENT.POINTER_LEAVE":{guard:"isInteractive",target:"closing"},"POSITIONING.SET":{actions:"reposition"}}},closing:{tags:["open"],activities:["trackStore","trackPositioning"],after:{CLOSE_DELAY:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"closed",actions:["invokeOnClose"]}]},on:{"CONTROLLED.CLOSE":"closed","CONTROLLED.OPEN":"open",CLOSE:[{guard:"isOpenControlled",actions:["invokeOnClose"]},{target:"closed",actions:["invokeOnClose"]}],POINTER_MOVE:[{guard:"isOpenControlled",actions:["setPointerMoveOpened","invokeOnOpen"]},{target:"open",actions:["setPointerMoveOpened","invokeOnOpen"]}],"CONTENT.POINTER_MOVE":{guard:"isInteractive",target:"open"},"POSITIONING.SET":{actions:"reposition"}}}}},{activities:{trackPositioning(ctx2){ctx2.currentPlacement=ctx2.positioning.placement;const getPositionerEl=()=>dom.getPositionerEl(ctx2);return(0,import_popper2.getPlacement)(dom.getTriggerEl(ctx2),getPositionerEl,{...ctx2.positioning,defer:true,onComplete(data){ctx2.currentPlacement=data.placement}})},trackPointerlockChange(ctx2,_evt,{send}){const onChange=()=>send({type:"CLOSE",src:"pointerlock:change"});return(0,import_dom_event.addDomEvent)(dom.getDoc(ctx2),"pointerlockchange",onChange,false)},trackScroll(ctx2,_evt,{send}){const triggerEl=dom.getTriggerEl(ctx2);if(!triggerEl)return;const overflowParents=(0,import_dom_query3.getOverflowAncestors)(triggerEl);const cleanups=overflowParents.map(overflowParent=>(0,import_dom_event.addDomEvent)(overflowParent,"scroll",()=>send({type:"CLOSE",src:"scroll"}),{passive:true,capture:true}));return()=>{cleanups.forEach(fn=>fn?.())}},trackStore(ctx2,_evt,{send}){return(0,import_core2.subscribe)(store,()=>{if(store.id!==ctx2.id){send({type:"CLOSE",src:"id:change"})}})},trackDisabledTriggerOnSafari(ctx2,_evt,{send}){if(!(0,import_dom_query3.isSafari)())return;const doc=dom.getDoc(ctx2);return(0,import_dom_event.addDomEvent)(doc,"pointermove",event=>{const selector="[data-part=trigger][data-expanded]";if((0,import_dom_query3.isHTMLElement)(event.target)&&event.target.closest(selector))return;send("POINTER_LEAVE")})},trackEscapeKey(ctx2,_evt,{send}){if(!ctx2.closeOnEscape)return;const doc=dom.getDoc(ctx2);return(0,import_dom_event.addDomEvent)(doc,"keydown",event=>{if(event.key==="Escape"){send("CLOSE")}})}},actions:{setGlobalId(ctx2){store.setId(ctx2.id)},clearGlobalId(ctx2){if(ctx2.id===store.id){store.setId(null)}},invokeOnOpen(ctx2){ctx2.onOpenChange?.({open:true})},invokeOnClose(ctx2){ctx2.onOpenChange?.({open:false})},closeIfDisabled(ctx2,_evt,{send}){if(!ctx2.disabled)return;send({type:"CLOSE",src:"disabled:change"})},reposition(ctx2,evt){const getPositionerEl=()=>dom.getPositionerEl(ctx2);(0,import_popper2.getPlacement)(dom.getTriggerEl(ctx2),getPositionerEl,{...ctx2.positioning,...evt.options,defer:true,listeners:false,onComplete(data){ctx2.currentPlacement=data.placement}})},toggleVisibility(ctx2,evt,{send}){send({type:ctx2.open?"CONTROLLED.OPEN":"CONTROLLED.CLOSE",previousEvent:evt})},setPointerMoveOpened(ctx2){ctx2.hasPointerMoveOpened=true},clearPointerMoveOpened(ctx2){ctx2.hasPointerMoveOpened=false}},guards:{noVisibleTooltip:()=>store.id===null,isVisible:ctx2=>ctx2.id===store.id,isInteractive:ctx2=>ctx2.interactive,hasPointerMoveOpened:ctx2=>!!ctx2.hasPointerMoveOpened,isOpenControlled:ctx2=>!!ctx2["open.controlled"]},delays:{OPEN_DELAY:ctx2=>ctx2.openDelay,CLOSE_DELAY:ctx2=>ctx2.closeDelay}})}var import_types=require("@zag-js/types");var import_utils2=require("@zag-js/utils");var props=(0,import_types.createProps)()(["aria-label","closeDelay","closeOnEscape","closeOnPointerDown","dir","disabled","getRootNode","id","ids","interactive","onOpenChange","open.controlled","open","openDelay","positioning"]);var splitProps=(0,import_utils2.createSplitProps)(props);0&&(module.exports={anatomy,connect,machine,props,splitProps});
|
|
512
2
|
//# sourceMappingURL=index.js.map
|