@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 +4 -8
- package/dist/index.js +8 -417
- package/dist/index.mjs +3 -16
- package/dist/tooltip.anatomy.d.ts +3 -6
- package/dist/tooltip.anatomy.js +10 -33
- package/dist/tooltip.anatomy.mjs +6 -8
- package/dist/tooltip.connect.d.ts +4 -8
- package/dist/tooltip.connect.js +27 -78
- package/dist/tooltip.connect.mjs +129 -9
- package/dist/tooltip.dom.d.ts +11 -17
- package/dist/tooltip.dom.js +9 -31
- package/dist/tooltip.dom.mjs +15 -6
- package/dist/tooltip.machine.d.ts +3 -8
- package/dist/tooltip.machine.js +34 -81
- package/dist/tooltip.machine.mjs +235 -8
- package/dist/tooltip.store.d.ts +2 -3
- package/dist/tooltip.store.js +8 -30
- package/dist/tooltip.store.mjs +12 -6
- package/dist/tooltip.types.d.ts +9 -11
- package/package.json +10 -15
- package/src/index.ts +1 -1
- package/src/tooltip.types.ts +2 -0
- package/dist/chunk-BML2QVAG.mjs +0 -17
- package/dist/chunk-F2YBSXLT.mjs +0 -138
- package/dist/chunk-GQYNO326.mjs +0 -14
- package/dist/chunk-GUX4YLRO.mjs +0 -242
- package/dist/chunk-RRQRIZBA.mjs +0 -9
- package/dist/tooltip.types.js +0 -18
- package/dist/tooltip.types.mjs +0 -0
package/dist/tooltip.connect.js
CHANGED
|
@@ -1,71 +1,22 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
21
|
-
var tooltip_connect_exports = {};
|
|
22
|
-
__export(tooltip_connect_exports, {
|
|
23
|
-
connect: () => connect
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(tooltip_connect_exports);
|
|
26
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
27
|
-
var import_popper = require("@zag-js/popper");
|
|
28
|
-
var import_visually_hidden = require("@zag-js/visually-hidden");
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
29
4
|
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
5
|
+
const domQuery = require('@zag-js/dom-query');
|
|
6
|
+
const popper = require('@zag-js/popper');
|
|
7
|
+
const visuallyHidden = require('@zag-js/visually-hidden');
|
|
8
|
+
const tooltip_anatomy = require('./tooltip.anatomy.js');
|
|
9
|
+
const tooltip_dom = require('./tooltip.dom.js');
|
|
10
|
+
const tooltip_store = require('./tooltip.store.js');
|
|
34
11
|
|
|
35
|
-
// src/tooltip.dom.ts
|
|
36
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
37
|
-
var dom = (0, import_dom_query.createScope)({
|
|
38
|
-
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
39
|
-
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
40
|
-
getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
|
|
41
|
-
getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
|
|
42
|
-
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
43
|
-
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
44
|
-
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
45
|
-
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
46
|
-
getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
|
|
47
|
-
});
|
|
48
|
-
|
|
49
|
-
// src/tooltip.store.ts
|
|
50
|
-
var import_core = require("@zag-js/core");
|
|
51
|
-
var store = (0, import_core.proxy)({
|
|
52
|
-
id: null,
|
|
53
|
-
prevId: null,
|
|
54
|
-
setId(val) {
|
|
55
|
-
this.prevId = this.id;
|
|
56
|
-
this.id = val;
|
|
57
|
-
}
|
|
58
|
-
});
|
|
59
|
-
|
|
60
|
-
// src/tooltip.connect.ts
|
|
61
12
|
function connect(state, send, normalize) {
|
|
62
13
|
const id = state.context.id;
|
|
63
14
|
const hasAriaLabel = state.context.hasAriaLabel;
|
|
64
15
|
const isOpen = state.hasTag("open");
|
|
65
|
-
const triggerId = dom.getTriggerId(state.context);
|
|
66
|
-
const contentId = dom.getContentId(state.context);
|
|
16
|
+
const triggerId = tooltip_dom.dom.getTriggerId(state.context);
|
|
17
|
+
const contentId = tooltip_dom.dom.getContentId(state.context);
|
|
67
18
|
const isDisabled = state.context.disabled;
|
|
68
|
-
const popperStyles =
|
|
19
|
+
const popperStyles = popper.getPlacementStyles({
|
|
69
20
|
placement: state.context.currentPlacement
|
|
70
21
|
});
|
|
71
22
|
return {
|
|
@@ -90,8 +41,8 @@ function connect(state, send, normalize) {
|
|
|
90
41
|
*/
|
|
91
42
|
getAnimationState() {
|
|
92
43
|
return {
|
|
93
|
-
enter: store.prevId === null && id === store.id,
|
|
94
|
-
exit: store.id === null
|
|
44
|
+
enter: tooltip_store.store.prevId === null && id === tooltip_store.store.id,
|
|
45
|
+
exit: tooltip_store.store.id === null
|
|
95
46
|
};
|
|
96
47
|
},
|
|
97
48
|
/**
|
|
@@ -101,9 +52,9 @@ function connect(state, send, normalize) {
|
|
|
101
52
|
send({ type: "SET_POSITIONING", options });
|
|
102
53
|
},
|
|
103
54
|
triggerProps: normalize.button({
|
|
104
|
-
...parts.trigger.attrs,
|
|
55
|
+
...tooltip_anatomy.parts.trigger.attrs,
|
|
105
56
|
id: triggerId,
|
|
106
|
-
"data-expanded":
|
|
57
|
+
"data-expanded": domQuery.dataAttr(isOpen),
|
|
107
58
|
"aria-describedby": isOpen ? contentId : void 0,
|
|
108
59
|
onClick() {
|
|
109
60
|
send("CLICK");
|
|
@@ -112,14 +63,14 @@ function connect(state, send, normalize) {
|
|
|
112
63
|
send("FOCUS");
|
|
113
64
|
},
|
|
114
65
|
onBlur() {
|
|
115
|
-
if (id === store.id) {
|
|
66
|
+
if (id === tooltip_store.store.id) {
|
|
116
67
|
send("BLUR");
|
|
117
68
|
}
|
|
118
69
|
},
|
|
119
70
|
onPointerDown() {
|
|
120
71
|
if (isDisabled)
|
|
121
72
|
return;
|
|
122
|
-
if (id === store.id) {
|
|
73
|
+
if (id === tooltip_store.store.id) {
|
|
123
74
|
send("POINTER_DOWN");
|
|
124
75
|
}
|
|
125
76
|
},
|
|
@@ -140,21 +91,21 @@ function connect(state, send, normalize) {
|
|
|
140
91
|
}
|
|
141
92
|
}),
|
|
142
93
|
arrowProps: normalize.element({
|
|
143
|
-
id: dom.getArrowId(state.context),
|
|
144
|
-
...parts.arrow.attrs,
|
|
94
|
+
id: tooltip_dom.dom.getArrowId(state.context),
|
|
95
|
+
...tooltip_anatomy.parts.arrow.attrs,
|
|
145
96
|
style: popperStyles.arrow
|
|
146
97
|
}),
|
|
147
98
|
arrowTipProps: normalize.element({
|
|
148
|
-
...parts.arrowTip.attrs,
|
|
99
|
+
...tooltip_anatomy.parts.arrowTip.attrs,
|
|
149
100
|
style: popperStyles.arrowTip
|
|
150
101
|
}),
|
|
151
102
|
positionerProps: normalize.element({
|
|
152
|
-
id: dom.getPositionerId(state.context),
|
|
153
|
-
...parts.positioner.attrs,
|
|
103
|
+
id: tooltip_dom.dom.getPositionerId(state.context),
|
|
104
|
+
...tooltip_anatomy.parts.positioner.attrs,
|
|
154
105
|
style: popperStyles.floating
|
|
155
106
|
}),
|
|
156
107
|
contentProps: normalize.element({
|
|
157
|
-
...parts.content.attrs,
|
|
108
|
+
...tooltip_anatomy.parts.content.attrs,
|
|
158
109
|
hidden: !isOpen,
|
|
159
110
|
role: hasAriaLabel ? void 0 : "tooltip",
|
|
160
111
|
id: hasAriaLabel ? void 0 : contentId,
|
|
@@ -170,15 +121,13 @@ function connect(state, send, normalize) {
|
|
|
170
121
|
}
|
|
171
122
|
}),
|
|
172
123
|
labelProps: normalize.element({
|
|
173
|
-
...parts.label.attrs,
|
|
124
|
+
...tooltip_anatomy.parts.label.attrs,
|
|
174
125
|
id: contentId,
|
|
175
126
|
role: "tooltip",
|
|
176
|
-
style:
|
|
127
|
+
style: visuallyHidden.visuallyHiddenStyle,
|
|
177
128
|
children: state.context["aria-label"]
|
|
178
129
|
})
|
|
179
130
|
};
|
|
180
131
|
}
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
connect
|
|
184
|
-
});
|
|
132
|
+
|
|
133
|
+
exports.connect = connect;
|
package/dist/tooltip.connect.mjs
CHANGED
|
@@ -1,9 +1,129 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
} from
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { dataAttr } from '@zag-js/dom-query';
|
|
2
|
+
import { getPlacementStyles } from '@zag-js/popper';
|
|
3
|
+
import { visuallyHiddenStyle } from '@zag-js/visually-hidden';
|
|
4
|
+
import { parts } from './tooltip.anatomy.mjs';
|
|
5
|
+
import { dom } from './tooltip.dom.mjs';
|
|
6
|
+
import { store } from './tooltip.store.mjs';
|
|
7
|
+
|
|
8
|
+
function connect(state, send, normalize) {
|
|
9
|
+
const id = state.context.id;
|
|
10
|
+
const hasAriaLabel = state.context.hasAriaLabel;
|
|
11
|
+
const isOpen = state.hasTag("open");
|
|
12
|
+
const triggerId = dom.getTriggerId(state.context);
|
|
13
|
+
const contentId = dom.getContentId(state.context);
|
|
14
|
+
const isDisabled = state.context.disabled;
|
|
15
|
+
const popperStyles = getPlacementStyles({
|
|
16
|
+
placement: state.context.currentPlacement
|
|
17
|
+
});
|
|
18
|
+
return {
|
|
19
|
+
/**
|
|
20
|
+
* Whether the tooltip is open.
|
|
21
|
+
*/
|
|
22
|
+
isOpen,
|
|
23
|
+
/**
|
|
24
|
+
* Function to open the tooltip.
|
|
25
|
+
*/
|
|
26
|
+
open() {
|
|
27
|
+
send("OPEN");
|
|
28
|
+
},
|
|
29
|
+
/**
|
|
30
|
+
* Function to close the tooltip.
|
|
31
|
+
*/
|
|
32
|
+
close() {
|
|
33
|
+
send("CLOSE");
|
|
34
|
+
},
|
|
35
|
+
/**
|
|
36
|
+
* Returns the animation state of the tooltip.
|
|
37
|
+
*/
|
|
38
|
+
getAnimationState() {
|
|
39
|
+
return {
|
|
40
|
+
enter: store.prevId === null && id === store.id,
|
|
41
|
+
exit: store.id === null
|
|
42
|
+
};
|
|
43
|
+
},
|
|
44
|
+
/**
|
|
45
|
+
* Function to reposition the popover
|
|
46
|
+
*/
|
|
47
|
+
setPositioning(options = {}) {
|
|
48
|
+
send({ type: "SET_POSITIONING", options });
|
|
49
|
+
},
|
|
50
|
+
triggerProps: normalize.button({
|
|
51
|
+
...parts.trigger.attrs,
|
|
52
|
+
id: triggerId,
|
|
53
|
+
"data-expanded": dataAttr(isOpen),
|
|
54
|
+
"aria-describedby": isOpen ? contentId : void 0,
|
|
55
|
+
onClick() {
|
|
56
|
+
send("CLICK");
|
|
57
|
+
},
|
|
58
|
+
onFocus() {
|
|
59
|
+
send("FOCUS");
|
|
60
|
+
},
|
|
61
|
+
onBlur() {
|
|
62
|
+
if (id === store.id) {
|
|
63
|
+
send("BLUR");
|
|
64
|
+
}
|
|
65
|
+
},
|
|
66
|
+
onPointerDown() {
|
|
67
|
+
if (isDisabled)
|
|
68
|
+
return;
|
|
69
|
+
if (id === store.id) {
|
|
70
|
+
send("POINTER_DOWN");
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
onPointerMove() {
|
|
74
|
+
if (isDisabled)
|
|
75
|
+
return;
|
|
76
|
+
send("POINTER_ENTER");
|
|
77
|
+
},
|
|
78
|
+
onPointerLeave() {
|
|
79
|
+
if (isDisabled)
|
|
80
|
+
return;
|
|
81
|
+
send("POINTER_LEAVE");
|
|
82
|
+
},
|
|
83
|
+
onPointerCancel() {
|
|
84
|
+
if (isDisabled)
|
|
85
|
+
return;
|
|
86
|
+
send("POINTER_LEAVE");
|
|
87
|
+
}
|
|
88
|
+
}),
|
|
89
|
+
arrowProps: normalize.element({
|
|
90
|
+
id: dom.getArrowId(state.context),
|
|
91
|
+
...parts.arrow.attrs,
|
|
92
|
+
style: popperStyles.arrow
|
|
93
|
+
}),
|
|
94
|
+
arrowTipProps: normalize.element({
|
|
95
|
+
...parts.arrowTip.attrs,
|
|
96
|
+
style: popperStyles.arrowTip
|
|
97
|
+
}),
|
|
98
|
+
positionerProps: normalize.element({
|
|
99
|
+
id: dom.getPositionerId(state.context),
|
|
100
|
+
...parts.positioner.attrs,
|
|
101
|
+
style: popperStyles.floating
|
|
102
|
+
}),
|
|
103
|
+
contentProps: normalize.element({
|
|
104
|
+
...parts.content.attrs,
|
|
105
|
+
hidden: !isOpen,
|
|
106
|
+
role: hasAriaLabel ? void 0 : "tooltip",
|
|
107
|
+
id: hasAriaLabel ? void 0 : contentId,
|
|
108
|
+
"data-placement": state.context.currentPlacement,
|
|
109
|
+
onPointerEnter() {
|
|
110
|
+
send("TOOLTIP_POINTER_ENTER");
|
|
111
|
+
},
|
|
112
|
+
onPointerLeave() {
|
|
113
|
+
send("TOOLTIP_POINTER_LEAVE");
|
|
114
|
+
},
|
|
115
|
+
style: {
|
|
116
|
+
pointerEvents: state.context.interactive ? "auto" : "none"
|
|
117
|
+
}
|
|
118
|
+
}),
|
|
119
|
+
labelProps: normalize.element({
|
|
120
|
+
...parts.label.attrs,
|
|
121
|
+
id: contentId,
|
|
122
|
+
role: "tooltip",
|
|
123
|
+
style: visuallyHiddenStyle,
|
|
124
|
+
children: state.context["aria-label"]
|
|
125
|
+
})
|
|
126
|
+
};
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
export { connect };
|
package/dist/tooltip.dom.d.ts
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
import { MachineContext } from
|
|
2
|
-
|
|
3
|
-
import '@zag-js/popper';
|
|
4
|
-
import '@zag-js/types';
|
|
5
|
-
|
|
6
|
-
declare const dom: {
|
|
1
|
+
import type { MachineContext as Ctx } from "./tooltip.types";
|
|
2
|
+
export declare const dom: {
|
|
7
3
|
getRootNode: (ctx: {
|
|
8
4
|
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
9
5
|
}) => Document | ShadowRoot;
|
|
@@ -23,15 +19,13 @@ declare const dom: {
|
|
|
23
19
|
getRootNode?: (() => Node | Document | ShadowRoot) | undefined;
|
|
24
20
|
}, id: string) => T_1;
|
|
25
21
|
} & {
|
|
26
|
-
getTriggerId: (ctx:
|
|
27
|
-
getContentId: (ctx:
|
|
28
|
-
getArrowId: (ctx:
|
|
29
|
-
getPositionerId: (ctx:
|
|
30
|
-
getTriggerEl: (ctx:
|
|
31
|
-
getContentEl: (ctx:
|
|
32
|
-
getPositionerEl: (ctx:
|
|
33
|
-
getArrowEl: (ctx:
|
|
34
|
-
getScrollParent: (ctx:
|
|
22
|
+
getTriggerId: (ctx: Ctx) => string;
|
|
23
|
+
getContentId: (ctx: Ctx) => string;
|
|
24
|
+
getArrowId: (ctx: Ctx) => string;
|
|
25
|
+
getPositionerId: (ctx: Ctx) => string;
|
|
26
|
+
getTriggerEl: (ctx: Ctx) => HTMLElement | null;
|
|
27
|
+
getContentEl: (ctx: Ctx) => HTMLElement | null;
|
|
28
|
+
getPositionerEl: (ctx: Ctx) => HTMLElement | null;
|
|
29
|
+
getArrowEl: (ctx: Ctx) => HTMLElement | null;
|
|
30
|
+
getScrollParent: (ctx: Ctx) => HTMLElement;
|
|
35
31
|
};
|
|
36
|
-
|
|
37
|
-
export { dom };
|
package/dist/tooltip.dom.js
CHANGED
|
@@ -1,30 +1,10 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
module.exports = __toCommonJS(tooltip_dom_exports);
|
|
26
|
-
var import_dom_query = require("@zag-js/dom-query");
|
|
27
|
-
var dom = (0, import_dom_query.createScope)({
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
4
|
+
|
|
5
|
+
const domQuery = require('@zag-js/dom-query');
|
|
6
|
+
|
|
7
|
+
const dom = domQuery.createScope({
|
|
28
8
|
getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
|
|
29
9
|
getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
|
|
30
10
|
getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
|
|
@@ -33,9 +13,7 @@ var dom = (0, import_dom_query.createScope)({
|
|
|
33
13
|
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
34
14
|
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
35
15
|
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
36
|
-
getScrollParent: (ctx) =>
|
|
37
|
-
});
|
|
38
|
-
// Annotate the CommonJS export names for ESM import in node:
|
|
39
|
-
0 && (module.exports = {
|
|
40
|
-
dom
|
|
16
|
+
getScrollParent: (ctx) => domQuery.getScrollParent(dom.getTriggerEl(ctx))
|
|
41
17
|
});
|
|
18
|
+
|
|
19
|
+
exports.dom = dom;
|
package/dist/tooltip.dom.mjs
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
|
-
import {
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
}
|
|
1
|
+
import { createScope, getScrollParent } from '@zag-js/dom-query';
|
|
2
|
+
|
|
3
|
+
const 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) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
|
|
7
|
+
getPositionerId: (ctx) => ctx.ids?.positioner ?? `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 { dom };
|
|
@@ -1,8 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
import '@zag-js/types';
|
|
5
|
-
|
|
6
|
-
declare function machine(userContext: UserDefinedContext): _zag_js_core.Machine<MachineContext, MachineState, _zag_js_core.StateMachine.AnyEventObject>;
|
|
7
|
-
|
|
8
|
-
export { machine };
|
|
1
|
+
import { Machine, StateMachine } from '@zag-js/core';
|
|
2
|
+
import type { MachineContext, MachineState, UserDefinedContext } from "./tooltip.types";
|
|
3
|
+
export declare function machine(userContext: UserDefinedContext): Machine<MachineContext, MachineState, StateMachine.AnyEventObject>;
|
package/dist/tooltip.machine.js
CHANGED
|
@@ -1,63 +1,18 @@
|
|
|
1
|
-
|
|
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
|
-
|
|
21
|
-
var tooltip_machine_exports = {};
|
|
22
|
-
__export(tooltip_machine_exports, {
|
|
23
|
-
machine: () => machine
|
|
24
|
-
});
|
|
25
|
-
module.exports = __toCommonJS(tooltip_machine_exports);
|
|
26
|
-
var import_core2 = require("@zag-js/core");
|
|
27
|
-
var import_dom_event = require("@zag-js/dom-event");
|
|
28
|
-
var import_dom_query2 = require("@zag-js/dom-query");
|
|
29
|
-
var import_popper = require("@zag-js/popper");
|
|
30
|
-
var import_utils = require("@zag-js/utils");
|
|
3
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
|
|
31
4
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
|
|
40
|
-
getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
|
|
41
|
-
getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
|
|
42
|
-
getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx)),
|
|
43
|
-
getScrollParent: (ctx) => (0, import_dom_query.getScrollParent)(dom.getTriggerEl(ctx))
|
|
44
|
-
});
|
|
5
|
+
const core = require('@zag-js/core');
|
|
6
|
+
const domEvent = require('@zag-js/dom-event');
|
|
7
|
+
const domQuery = require('@zag-js/dom-query');
|
|
8
|
+
const popper = require('@zag-js/popper');
|
|
9
|
+
const utils = require('@zag-js/utils');
|
|
10
|
+
const tooltip_dom = require('./tooltip.dom.js');
|
|
11
|
+
const tooltip_store = require('./tooltip.store.js');
|
|
45
12
|
|
|
46
|
-
// src/tooltip.store.ts
|
|
47
|
-
var import_core = require("@zag-js/core");
|
|
48
|
-
var store = (0, import_core.proxy)({
|
|
49
|
-
id: null,
|
|
50
|
-
prevId: null,
|
|
51
|
-
setId(val) {
|
|
52
|
-
this.prevId = this.id;
|
|
53
|
-
this.id = val;
|
|
54
|
-
}
|
|
55
|
-
});
|
|
56
|
-
|
|
57
|
-
// src/tooltip.machine.ts
|
|
58
13
|
function machine(userContext) {
|
|
59
|
-
const ctx =
|
|
60
|
-
return
|
|
14
|
+
const ctx = utils.compact(userContext);
|
|
15
|
+
return core.createMachine(
|
|
61
16
|
{
|
|
62
17
|
id: "tooltip",
|
|
63
18
|
initial: "closed",
|
|
@@ -174,8 +129,8 @@ function machine(userContext) {
|
|
|
174
129
|
activities: {
|
|
175
130
|
trackPositioning(ctx2) {
|
|
176
131
|
ctx2.currentPlacement = ctx2.positioning.placement;
|
|
177
|
-
const getPositionerEl = () => dom.getPositionerEl(ctx2);
|
|
178
|
-
return
|
|
132
|
+
const getPositionerEl = () => tooltip_dom.dom.getPositionerEl(ctx2);
|
|
133
|
+
return popper.getPlacement(tooltip_dom.dom.getTriggerEl(ctx2), getPositionerEl, {
|
|
179
134
|
...ctx2.positioning,
|
|
180
135
|
defer: true,
|
|
181
136
|
onComplete(data) {
|
|
@@ -188,34 +143,34 @@ function machine(userContext) {
|
|
|
188
143
|
},
|
|
189
144
|
trackPointerlockChange(ctx2, _evt, { send }) {
|
|
190
145
|
const onChange = () => send("POINTER_LOCK_CHANGE");
|
|
191
|
-
return
|
|
146
|
+
return domEvent.addDomEvent(tooltip_dom.dom.getDoc(ctx2), "pointerlockchange", onChange, false);
|
|
192
147
|
},
|
|
193
148
|
trackScroll(ctx2, _evt, { send }) {
|
|
194
|
-
const trigger = dom.getTriggerEl(ctx2);
|
|
149
|
+
const trigger = tooltip_dom.dom.getTriggerEl(ctx2);
|
|
195
150
|
if (!trigger)
|
|
196
151
|
return;
|
|
197
|
-
const cleanups =
|
|
152
|
+
const cleanups = domQuery.getScrollParents(trigger).map((el) => {
|
|
198
153
|
const opts = { passive: true, capture: true };
|
|
199
|
-
return
|
|
154
|
+
return domEvent.addDomEvent(el, "scroll", () => send("SCROLL"), opts);
|
|
200
155
|
});
|
|
201
156
|
return () => {
|
|
202
157
|
cleanups.forEach((fn) => fn?.());
|
|
203
158
|
};
|
|
204
159
|
},
|
|
205
160
|
trackStore(ctx2, _evt, { send }) {
|
|
206
|
-
return
|
|
207
|
-
if (store.id !== ctx2.id) {
|
|
161
|
+
return core.subscribe(tooltip_store.store, () => {
|
|
162
|
+
if (tooltip_store.store.id !== ctx2.id) {
|
|
208
163
|
send("FORCE_CLOSE");
|
|
209
164
|
}
|
|
210
165
|
});
|
|
211
166
|
},
|
|
212
167
|
trackDisabledTriggerOnSafari(ctx2, _evt, { send }) {
|
|
213
|
-
if (!
|
|
168
|
+
if (!domQuery.isSafari())
|
|
214
169
|
return;
|
|
215
|
-
const doc = dom.getDoc(ctx2);
|
|
216
|
-
return
|
|
170
|
+
const doc = tooltip_dom.dom.getDoc(ctx2);
|
|
171
|
+
return domEvent.addDomEvent(doc, "pointermove", (event) => {
|
|
217
172
|
const selector = "[data-part=trigger][data-expanded]";
|
|
218
|
-
if (
|
|
173
|
+
if (domQuery.isHTMLElement(event.target) && event.target.closest(selector))
|
|
219
174
|
return;
|
|
220
175
|
send("POINTER_LEAVE");
|
|
221
176
|
});
|
|
@@ -223,8 +178,8 @@ function machine(userContext) {
|
|
|
223
178
|
trackEscapeKey(ctx2, _evt, { send }) {
|
|
224
179
|
if (!ctx2.closeOnEsc)
|
|
225
180
|
return;
|
|
226
|
-
const doc = dom.getDoc(ctx2);
|
|
227
|
-
return
|
|
181
|
+
const doc = tooltip_dom.dom.getDoc(ctx2);
|
|
182
|
+
return domEvent.addDomEvent(doc, "keydown", (event) => {
|
|
228
183
|
if (event.key === "Escape") {
|
|
229
184
|
send("ESCAPE");
|
|
230
185
|
}
|
|
@@ -233,11 +188,11 @@ function machine(userContext) {
|
|
|
233
188
|
},
|
|
234
189
|
actions: {
|
|
235
190
|
setGlobalId(ctx2) {
|
|
236
|
-
store.setId(ctx2.id);
|
|
191
|
+
tooltip_store.store.setId(ctx2.id);
|
|
237
192
|
},
|
|
238
193
|
clearGlobalId(ctx2) {
|
|
239
|
-
if (ctx2.id === store.id) {
|
|
240
|
-
store.setId(null);
|
|
194
|
+
if (ctx2.id === tooltip_store.store.id) {
|
|
195
|
+
tooltip_store.store.setId(null);
|
|
241
196
|
}
|
|
242
197
|
},
|
|
243
198
|
invokeOnOpen(ctx2, evt) {
|
|
@@ -255,8 +210,8 @@ function machine(userContext) {
|
|
|
255
210
|
}
|
|
256
211
|
},
|
|
257
212
|
setPositioning(ctx2, evt) {
|
|
258
|
-
const getPositionerEl = () => dom.getPositionerEl(ctx2);
|
|
259
|
-
|
|
213
|
+
const getPositionerEl = () => tooltip_dom.dom.getPositionerEl(ctx2);
|
|
214
|
+
popper.getPlacement(tooltip_dom.dom.getTriggerEl(ctx2), getPositionerEl, {
|
|
260
215
|
...ctx2.positioning,
|
|
261
216
|
...evt.options,
|
|
262
217
|
defer: true,
|
|
@@ -269,8 +224,8 @@ function machine(userContext) {
|
|
|
269
224
|
},
|
|
270
225
|
guards: {
|
|
271
226
|
closeOnPointerDown: (ctx2) => ctx2.closeOnPointerDown,
|
|
272
|
-
noVisibleTooltip: () => store.id === null,
|
|
273
|
-
isVisible: (ctx2) => ctx2.id === store.id,
|
|
227
|
+
noVisibleTooltip: () => tooltip_store.store.id === null,
|
|
228
|
+
isVisible: (ctx2) => ctx2.id === tooltip_store.store.id,
|
|
274
229
|
isInteractive: (ctx2) => ctx2.interactive
|
|
275
230
|
},
|
|
276
231
|
delays: {
|
|
@@ -280,7 +235,5 @@ function machine(userContext) {
|
|
|
280
235
|
}
|
|
281
236
|
);
|
|
282
237
|
}
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
machine
|
|
286
|
-
});
|
|
238
|
+
|
|
239
|
+
exports.machine = machine;
|