@zag-js/tooltip 0.6.0 → 0.8.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.
@@ -3,8 +3,8 @@ import { createScope, getScrollParent } from "@zag-js/dom-query";
3
3
  var dom = createScope({
4
4
  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
5
5
  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
6
- getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
7
- getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
6
+ getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
7
+ getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
8
8
  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
9
9
  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
10
10
  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
@@ -3,7 +3,7 @@ import {
3
3
  } from "./chunk-RRQRIZBA.mjs";
4
4
  import {
5
5
  dom
6
- } from "./chunk-3LXHM7BW.mjs";
6
+ } from "./chunk-BML2QVAG.mjs";
7
7
  import {
8
8
  store
9
9
  } from "./chunk-GQYNO326.mjs";
@@ -51,7 +51,7 @@ function connect(state, send, normalize) {
51
51
  /**
52
52
  * Function to reposition the popover
53
53
  */
54
- setPositioning(options) {
54
+ setPositioning(options = {}) {
55
55
  send({ type: "SET_POSITIONING", options });
56
56
  },
57
57
  triggerProps: normalize.button({
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-3LXHM7BW.mjs";
3
+ } from "./chunk-BML2QVAG.mjs";
4
4
  import {
5
5
  store
6
6
  } from "./chunk-GQYNO326.mjs";
@@ -8,7 +8,7 @@ import {
8
8
  // src/tooltip.machine.ts
9
9
  import { createMachine, subscribe } from "@zag-js/core";
10
10
  import { addDomEvent } from "@zag-js/dom-event";
11
- import { getScrollParents, isHTMLElement, isSafari, raf } from "@zag-js/dom-query";
11
+ import { getScrollParents, isHTMLElement, isSafari } from "@zag-js/dom-query";
12
12
  import { getPlacement } from "@zag-js/popper";
13
13
  import { compact } from "@zag-js/utils";
14
14
  function machine(userContext) {
@@ -130,19 +130,17 @@ function machine(userContext) {
130
130
  activities: {
131
131
  trackPositioning(ctx2) {
132
132
  ctx2.currentPlacement = ctx2.positioning.placement;
133
- let cleanup;
134
- raf(() => {
135
- cleanup = getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
136
- ...ctx2.positioning,
137
- onComplete(data) {
138
- ctx2.currentPlacement = data.placement;
139
- },
140
- onCleanup() {
141
- ctx2.currentPlacement = void 0;
142
- }
143
- });
133
+ const getPositionerEl = () => dom.getPositionerEl(ctx2);
134
+ return getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
135
+ ...ctx2.positioning,
136
+ defer: true,
137
+ onComplete(data) {
138
+ ctx2.currentPlacement = data.placement;
139
+ },
140
+ onCleanup() {
141
+ ctx2.currentPlacement = void 0;
142
+ }
144
143
  });
145
- return () => cleanup?.();
146
144
  },
147
145
  trackPointerlockChange(ctx2, _evt, { send }) {
148
146
  const onChange = () => send("POINTER_LOCK_CHANGE");
@@ -213,12 +211,12 @@ function machine(userContext) {
213
211
  }
214
212
  },
215
213
  setPositioning(ctx2, evt) {
216
- raf(() => {
217
- getPlacement(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
218
- ...ctx2.positioning,
219
- ...evt.options,
220
- listeners: false
221
- });
214
+ const getPositionerEl = () => dom.getPositionerEl(ctx2);
215
+ getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
216
+ ...ctx2.positioning,
217
+ ...evt.options,
218
+ defer: true,
219
+ listeners: false
222
220
  });
223
221
  },
224
222
  toggleVisibility(ctx2, _evt, { send }) {
package/dist/index.js CHANGED
@@ -41,8 +41,8 @@ var import_dom_query = require("@zag-js/dom-query");
41
41
  var dom = (0, import_dom_query.createScope)({
42
42
  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
43
43
  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
44
- getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
45
- getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
44
+ getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
45
+ getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
46
46
  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
47
47
  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
48
48
  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
@@ -101,7 +101,7 @@ function connect(state, send, normalize) {
101
101
  /**
102
102
  * Function to reposition the popover
103
103
  */
104
- setPositioning(options) {
104
+ setPositioning(options = {}) {
105
105
  send({ type: "SET_POSITIONING", options });
106
106
  },
107
107
  triggerProps: normalize.button({
@@ -308,19 +308,17 @@ function machine(userContext) {
308
308
  activities: {
309
309
  trackPositioning(ctx2) {
310
310
  ctx2.currentPlacement = ctx2.positioning.placement;
311
- let cleanup;
312
- (0, import_dom_query3.raf)(() => {
313
- cleanup = (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
314
- ...ctx2.positioning,
315
- onComplete(data) {
316
- ctx2.currentPlacement = data.placement;
317
- },
318
- onCleanup() {
319
- ctx2.currentPlacement = void 0;
320
- }
321
- });
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
+ }
322
321
  });
323
- return () => cleanup?.();
324
322
  },
325
323
  trackPointerlockChange(ctx2, _evt, { send }) {
326
324
  const onChange = () => send("POINTER_LOCK_CHANGE");
@@ -391,12 +389,12 @@ function machine(userContext) {
391
389
  }
392
390
  },
393
391
  setPositioning(ctx2, evt) {
394
- (0, import_dom_query3.raf)(() => {
395
- (0, import_popper2.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
396
- ...ctx2.positioning,
397
- ...evt.options,
398
- listeners: false
399
- });
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
400
398
  });
401
399
  },
402
400
  toggleVisibility(ctx2, _evt, { send }) {
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-CTBIJ67E.mjs";
3
+ } from "./chunk-F2YBSXLT.mjs";
4
4
  import {
5
5
  anatomy
6
6
  } from "./chunk-RRQRIZBA.mjs";
7
7
  import {
8
8
  machine
9
- } from "./chunk-YRDFBCFW.mjs";
10
- import "./chunk-3LXHM7BW.mjs";
9
+ } from "./chunk-GUX4YLRO.mjs";
10
+ import "./chunk-BML2QVAG.mjs";
11
11
  import "./chunk-GQYNO326.mjs";
12
12
  export {
13
13
  anatomy,
@@ -26,7 +26,7 @@ declare function connect<T extends PropTypes>(state: State, send: Send, normaliz
26
26
  /**
27
27
  * Function to reposition the popover
28
28
  */
29
- setPositioning(options: Partial<PositioningOptions>): void;
29
+ setPositioning(options?: Partial<PositioningOptions>): void;
30
30
  triggerProps: T["button"];
31
31
  arrowProps: T["element"];
32
32
  arrowTipProps: T["element"];
@@ -37,8 +37,8 @@ var import_dom_query = require("@zag-js/dom-query");
37
37
  var dom = (0, import_dom_query.createScope)({
38
38
  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
39
39
  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
40
- getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
41
- getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
40
+ getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
41
+ getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
42
42
  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
43
43
  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
44
44
  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
@@ -97,7 +97,7 @@ function connect(state, send, normalize) {
97
97
  /**
98
98
  * Function to reposition the popover
99
99
  */
100
- setPositioning(options) {
100
+ setPositioning(options = {}) {
101
101
  send({ type: "SET_POSITIONING", options });
102
102
  },
103
103
  triggerProps: normalize.button({
@@ -1,8 +1,8 @@
1
1
  import {
2
2
  connect
3
- } from "./chunk-CTBIJ67E.mjs";
3
+ } from "./chunk-F2YBSXLT.mjs";
4
4
  import "./chunk-RRQRIZBA.mjs";
5
- import "./chunk-3LXHM7BW.mjs";
5
+ import "./chunk-BML2QVAG.mjs";
6
6
  import "./chunk-GQYNO326.mjs";
7
7
  export {
8
8
  connect
@@ -27,8 +27,8 @@ var import_dom_query = require("@zag-js/dom-query");
27
27
  var dom = (0, import_dom_query.createScope)({
28
28
  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
29
29
  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
30
- getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
31
- getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
30
+ getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
31
+ getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
32
32
  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
33
33
  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
34
34
  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
@@ -1,6 +1,6 @@
1
1
  import {
2
2
  dom
3
- } from "./chunk-3LXHM7BW.mjs";
3
+ } from "./chunk-BML2QVAG.mjs";
4
4
  export {
5
5
  dom
6
6
  };
@@ -34,8 +34,8 @@ var import_dom_query = require("@zag-js/dom-query");
34
34
  var dom = (0, import_dom_query.createScope)({
35
35
  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
36
36
  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
37
- getArrowId: (ctx) => `tooltip:${ctx.id}:arrow`,
38
- getPositionerId: (ctx) => `tooltip:${ctx.id}:popper`,
37
+ getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
38
+ getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
39
39
  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
40
40
  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
41
41
  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
@@ -174,19 +174,17 @@ function machine(userContext) {
174
174
  activities: {
175
175
  trackPositioning(ctx2) {
176
176
  ctx2.currentPlacement = ctx2.positioning.placement;
177
- let cleanup;
178
- (0, import_dom_query2.raf)(() => {
179
- cleanup = (0, import_popper.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
180
- ...ctx2.positioning,
181
- onComplete(data) {
182
- ctx2.currentPlacement = data.placement;
183
- },
184
- onCleanup() {
185
- ctx2.currentPlacement = void 0;
186
- }
187
- });
177
+ const getPositionerEl = () => dom.getPositionerEl(ctx2);
178
+ return (0, import_popper.getPlacement)(dom.getTriggerEl(ctx2), getPositionerEl, {
179
+ ...ctx2.positioning,
180
+ defer: true,
181
+ onComplete(data) {
182
+ ctx2.currentPlacement = data.placement;
183
+ },
184
+ onCleanup() {
185
+ ctx2.currentPlacement = void 0;
186
+ }
188
187
  });
189
- return () => cleanup?.();
190
188
  },
191
189
  trackPointerlockChange(ctx2, _evt, { send }) {
192
190
  const onChange = () => send("POINTER_LOCK_CHANGE");
@@ -257,12 +255,12 @@ function machine(userContext) {
257
255
  }
258
256
  },
259
257
  setPositioning(ctx2, evt) {
260
- (0, import_dom_query2.raf)(() => {
261
- (0, import_popper.getPlacement)(dom.getTriggerEl(ctx2), dom.getPositionerEl(ctx2), {
262
- ...ctx2.positioning,
263
- ...evt.options,
264
- listeners: false
265
- });
258
+ const getPositionerEl = () => dom.getPositionerEl(ctx2);
259
+ (0, import_popper.getPlacement)(dom.getTriggerEl(ctx2), getPositionerEl, {
260
+ ...ctx2.positioning,
261
+ ...evt.options,
262
+ defer: true,
263
+ listeners: false
266
264
  });
267
265
  },
268
266
  toggleVisibility(ctx2, _evt, { send }) {
@@ -1,7 +1,7 @@
1
1
  import {
2
2
  machine
3
- } from "./chunk-YRDFBCFW.mjs";
4
- import "./chunk-3LXHM7BW.mjs";
3
+ } from "./chunk-GUX4YLRO.mjs";
4
+ import "./chunk-BML2QVAG.mjs";
5
5
  import "./chunk-GQYNO326.mjs";
6
6
  export {
7
7
  machine
@@ -5,6 +5,8 @@ import { RequiredBy, CommonProperties, RootProperties } from '@zag-js/types';
5
5
  type ElementIds = Partial<{
6
6
  trigger: string;
7
7
  content: string;
8
+ arrow: string;
9
+ positioner: string;
8
10
  }>;
9
11
  type PublicContext = CommonProperties & {
10
12
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zag-js/tooltip",
3
- "version": "0.6.0",
3
+ "version": "0.8.0",
4
4
  "description": "Core logic for the tooltip widget implemented as a state machine",
5
5
  "keywords": [
6
6
  "js",
@@ -27,10 +27,10 @@
27
27
  },
28
28
  "dependencies": {
29
29
  "@zag-js/anatomy": "0.1.4",
30
- "@zag-js/core": "0.5.0",
31
- "@zag-js/popper": "0.2.7",
30
+ "@zag-js/core": "0.7.0",
31
+ "@zag-js/popper": "0.8.0",
32
32
  "@zag-js/dom-query": "0.1.4",
33
- "@zag-js/dom-event": "0.6.0",
33
+ "@zag-js/dom-event": "0.8.0",
34
34
  "@zag-js/utils": "0.3.4",
35
35
  "@zag-js/visually-hidden": "0.0.1",
36
36
  "@zag-js/types": "0.5.0"