@zag-js/tooltip - npm Package Compare versions

Comparing version 1.38.2 to 1.39.0

dist/index.d.mts

@@ -5,3 +5,3 @@ export { anatomy } from './tooltip.anatomy.mjs';
 export { props, splitProps } from './tooltip.props.mjs';
-export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service } from './tooltip.types.mjs';
+export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerValueChangeDetails } from './tooltip.types.mjs';
 export { Placement, PositioningOptions } from '@zag-js/popper';
@@ -8,0 +8,0 @@ import '@zag-js/anatomy';

dist/index.d.ts

@@ -5,3 +5,3 @@ export { anatomy } from './tooltip.anatomy.js';
 export { props, splitProps } from './tooltip.props.js';
-export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service } from './tooltip.types.js';
+export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerValueChangeDetails } from './tooltip.types.js';
 export { Placement, PositioningOptions } from '@zag-js/popper';
@@ -8,0 +8,0 @@ import '@zag-js/anatomy';

dist/tooltip.connect.js

@@ -47,3 +47,3 @@ "use strict";
   const open = state.matches("open", "closing");
-  const triggerId = dom.getTriggerId(scope);
+  const triggerValue = context.get("triggerValue");
   const contentId = dom.getContentId(scope);
@@ -62,9 +62,19 @@ const disabled = prop("disabled");
     },
+    triggerValue,
+    setTriggerValue(value) {
+      send({ type: "triggerValue.set", value: value ?? void 0 });
+    },
     reposition(options = {}) {
       send({ type: "positioning.set", options });
     },
-    getTriggerProps() {
+    getTriggerProps(props = {}) {
+      const { value } = props;
+      const current = value == null ? false : triggerValue === value;
+      const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
         ...import_tooltip.parts.trigger.attrs,
         id: triggerId,
+        "data-ownedby": scope.id,
+        "data-value": value,
+        "data-current": (0, import_dom_query.dataAttr)(current),
         dir: prop("dir"),
@@ -78,12 +88,11 @@ "data-expanded": (0, import_dom_query.dataAttr)(open),
           if (!prop("closeOnClick")) return;
-          send({ type: "close", src: "trigger.click" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "close", src: "trigger.click", value, triggerId });
         },
         onFocus(event) {
-          queueMicrotask(() => {
-            if (event.defaultPrevented) return;
-            if (disabled) return;
-            if (_event.src === "trigger.pointerdown") return;
-            if (!(0, import_focus_visible.isFocusVisible)()) return;
-            send({ type: "open", src: "trigger.focus" });
-          });
+          if (event.defaultPrevented) return;
+          if (disabled) return;
+          if (!(0, import_focus_visible.isFocusVisible)()) return;
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "open", src: "trigger.focus", value, triggerId });
         },
@@ -93,4 +102,7 @@ onBlur(event) {
           if (disabled) return;
-          if (id === import_tooltip2.store.get("id")) {
-            send({ type: "close", src: "trigger.blur" });
+          if (id !== import_tooltip2.store.get("id")) return;
+          const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
+          const focusedAnotherTrigger = activeEl?.closest(`[data-ownedby="${scope.id}"]`) != null;
+          if (!focusedAnotherTrigger) {
+            send({ type: "close", src: "trigger.blur", value, triggerId });
           }
@@ -104,3 +116,3 @@ },
           if (id === import_tooltip2.store.get("id")) {
-            send({ type: "close", src: "trigger.pointerdown" });
+            send({ type: "close", src: "trigger.pointerdown", value, triggerId });
           }
@@ -112,3 +124,4 @@ },
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "pointer.move", value, triggerId });
         },
@@ -119,3 +132,3 @@ onPointerOver(event) {
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          send({ type: "pointer.move", value, triggerId });
         },
@@ -122,0 +135,0 @@ onPointerLeave() {

dist/tooltip.connect.mjs

@@ -13,3 +13,3 @@ // src/tooltip.connect.ts
   const open = state.matches("open", "closing");
-  const triggerId = dom.getTriggerId(scope);
+  const triggerValue = context.get("triggerValue");
   const contentId = dom.getContentId(scope);
@@ -28,9 +28,19 @@ const disabled = prop("disabled");
     },
+    triggerValue,
+    setTriggerValue(value) {
+      send({ type: "triggerValue.set", value: value ?? void 0 });
+    },
     reposition(options = {}) {
       send({ type: "positioning.set", options });
     },
-    getTriggerProps() {
+    getTriggerProps(props = {}) {
+      const { value } = props;
+      const current = value == null ? false : triggerValue === value;
+      const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
         ...parts.trigger.attrs,
         id: triggerId,
+        "data-ownedby": scope.id,
+        "data-value": value,
+        "data-current": dataAttr(current),
         dir: prop("dir"),
@@ -44,12 +54,11 @@ "data-expanded": dataAttr(open),
           if (!prop("closeOnClick")) return;
-          send({ type: "close", src: "trigger.click" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "close", src: "trigger.click", value, triggerId });
         },
         onFocus(event) {
-          queueMicrotask(() => {
-            if (event.defaultPrevented) return;
-            if (disabled) return;
-            if (_event.src === "trigger.pointerdown") return;
-            if (!isFocusVisible()) return;
-            send({ type: "open", src: "trigger.focus" });
-          });
+          if (event.defaultPrevented) return;
+          if (disabled) return;
+          if (!isFocusVisible()) return;
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "open", src: "trigger.focus", value, triggerId });
         },
@@ -59,4 +68,7 @@ onBlur(event) {
           if (disabled) return;
-          if (id === store.get("id")) {
-            send({ type: "close", src: "trigger.blur" });
+          if (id !== store.get("id")) return;
+          const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
+          const focusedAnotherTrigger = activeEl?.closest(`[data-ownedby="${scope.id}"]`) != null;
+          if (!focusedAnotherTrigger) {
+            send({ type: "close", src: "trigger.blur", value, triggerId });
           }
@@ -70,3 +82,3 @@ },
           if (id === store.get("id")) {
-            send({ type: "close", src: "trigger.pointerdown" });
+            send({ type: "close", src: "trigger.pointerdown", value, triggerId });
           }
@@ -78,3 +90,4 @@ },
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          const shouldSwitch = open && value != null && !current;
+          send({ type: shouldSwitch ? "triggerValue.set" : "pointer.move", value, triggerId });
         },
@@ -85,3 +98,3 @@ onPointerOver(event) {
           if (event.pointerType === "touch") return;
-          send({ type: "pointer.move" });
+          send({ type: "pointer.move", value, triggerId });
         },
@@ -88,0 +101,0 @@ onPointerLeave() {

dist/tooltip.dom.d.mts

 import { Scope } from '@zag-js/core';
 
-declare const getTriggerId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope, value?: string) => any;
 declare const getContentId: (scope: Scope) => any;
@@ -11,3 +11,5 @@ declare const getArrowId: (scope: Scope) => any;
 declare const getArrowEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEls: (scope: Scope) => HTMLElement[];
+declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 
-export { getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerId };
+export { getActiveTriggerEl, getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerEls, getTriggerId };

dist/tooltip.dom.d.ts

 import { Scope } from '@zag-js/core';
 
-declare const getTriggerId: (scope: Scope) => any;
+declare const getTriggerId: (scope: Scope, value?: string) => any;
 declare const getContentId: (scope: Scope) => any;
@@ -11,3 +11,5 @@ declare const getArrowId: (scope: Scope) => any;
 declare const getArrowEl: (scope: Scope) => HTMLElement | null;
+declare const getTriggerEls: (scope: Scope) => HTMLElement[];
+declare const getActiveTriggerEl: (scope: Scope, value: string | null) => HTMLElement | null;
 
-export { getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerId };
+export { getActiveTriggerEl, getArrowEl, getArrowId, getContentEl, getContentId, getPositionerEl, getPositionerId, getTriggerEl, getTriggerEls, getTriggerId };

dist/tooltip.dom.js

@@ -23,2 +23,3 @@ "use strict";
 __export(tooltip_dom_exports, {
+  getActiveTriggerEl: () => getActiveTriggerEl,
   getArrowEl: () => getArrowEl,
@@ -31,6 +32,13 @@ getArrowId: () => getArrowId,
   getTriggerEl: () => getTriggerEl,
+  getTriggerEls: () => getTriggerEls,
   getTriggerId: () => getTriggerId
 });
 module.exports = __toCommonJS(tooltip_dom_exports);
-var getTriggerId = (scope) => scope.ids?.trigger ?? `tooltip:${scope.id}:trigger`;
+var import_dom_query = require("@zag-js/dom-query");
+var import_utils = require("@zag-js/utils");
+var getTriggerId = (scope, value) => {
+  const customId = scope.ids?.trigger;
+  if (customId != null) return (0, import_utils.isFunction)(customId) ? customId(value) : customId;
+  return value ? `tooltip:${scope.id}:trigger:${value}` : `tooltip:${scope.id}:trigger`;
+};
 var getContentId = (scope) => scope.ids?.content ?? `tooltip:${scope.id}:content`;
@@ -43,4 +51,9 @@ var getArrowId = (scope) => scope.ids?.arrow ?? `tooltip:${scope.id}:arrow`;
 var getArrowEl = (scope) => scope.getById(getArrowId(scope));
+var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getDoc(), `[data-scope="tooltip"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getActiveTriggerEl = (scope, value) => {
+  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+};
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  getActiveTriggerEl,
   getArrowEl,
@@ -53,3 +66,4 @@ getArrowId,
   getTriggerEl,
+  getTriggerEls,
   getTriggerId
 });

dist/tooltip.dom.mjs

 // src/tooltip.dom.ts
-var getTriggerId = (scope) => scope.ids?.trigger ?? `tooltip:${scope.id}:trigger`;
+import { queryAll } from "@zag-js/dom-query";
+import { isFunction } from "@zag-js/utils";
+var getTriggerId = (scope, value) => {
+  const customId = scope.ids?.trigger;
+  if (customId != null) return isFunction(customId) ? customId(value) : customId;
+  return value ? `tooltip:${scope.id}:trigger:${value}` : `tooltip:${scope.id}:trigger`;
+};
 var getContentId = (scope) => scope.ids?.content ?? `tooltip:${scope.id}:content`;
@@ -10,3 +16,8 @@ var getArrowId = (scope) => scope.ids?.arrow ?? `tooltip:${scope.id}:arrow`;
 var getArrowEl = (scope) => scope.getById(getArrowId(scope));
+var getTriggerEls = (scope) => queryAll(scope.getDoc(), `[data-scope="tooltip"][data-part="trigger"][data-ownedby="${scope.id}"]`);
+var getActiveTriggerEl = (scope, value) => {
+  return value == null ? getTriggerEls(scope)[0] : scope.getById(getTriggerId(scope, value));
+};
 export {
+  getActiveTriggerEl,
   getArrowEl,
@@ -19,3 +30,4 @@ getArrowId,
   getTriggerEl,
+  getTriggerEls,
   getTriggerId
 };

dist/tooltip.machine.js

@@ -40,5 +40,5 @@ "use strict";
 var import_popper = require("@zag-js/popper");
+var import_utils = require("@zag-js/utils");
 var dom = __toESM(require("./tooltip.dom.js"));
 var import_tooltip = require("./tooltip.store.js");
-var import_utils = require("@zag-js/utils");
 var { and, not } = (0, import_core.createGuards)();
@@ -71,5 +71,15 @@ var machine = (0, import_core.createMachine)({
   effects: ["trackFocusVisible", "trackStore"],
-  context: ({ bindable }) => ({
+  context: ({ bindable, prop, scope }) => ({
     currentPlacement: bindable(() => ({ defaultValue: void 0 })),
-    hasPointerMoveOpened: bindable(() => ({ defaultValue: false }))
+    hasPointerMoveOpened: bindable(() => ({ defaultValue: null })),
+    triggerValue: bindable(() => ({
+      defaultValue: prop("defaultTriggerValue") ?? null,
+      value: prop("triggerValue"),
+      onChange(value) {
+        const onTriggerValueChange = prop("onTriggerValueChange");
+        if (!onTriggerValueChange) return;
+        const triggerElement = dom.getActiveTriggerEl(scope, value);
+        onTriggerValueChange({ value, triggerElement });
+      }
+    }))
   }),
@@ -83,3 +93,11 @@ watch({ track, action, prop }) {
     });
+    track([() => prop("triggerValue")], () => {
+      action(["repositionImmediate"]);
+    });
   },
+  on: {
+    "triggerValue.set": {
+      actions: ["setTriggerValue", "repositionImmediate"]
+    }
+  },
   states: {
@@ -95,7 +113,7 @@ closed: {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
@@ -109,3 +127,4 @@ ],
             guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
-            target: "opening"
+            target: "opening",
+            actions: ["setTriggerValue"]
           },
@@ -115,3 +134,3 @@ {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "invokeOnOpen", "setTriggerValue"]
           }
@@ -143,7 +162,7 @@ ]
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
@@ -214,2 +233,8 @@ ],
           actions: ["reposition"]
+        },
+        "triggerValue.set": {
+          // Transition to closing (which cleans up trackPositioning) then immediately back to open
+          // This re-creates the positioning effect with the new trigger
+          target: "closing",
+          actions: ["setTriggerValue", "immediateReopen"]
         }
@@ -251,9 +276,16 @@ }
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-            actions: ["setPointerMoveOpened", "invokeOnOpen", "toggleVisibility"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen"]
           }
         ],
+        "triggerValue.set": {
+          target: "open",
+          actions: ["setTriggerValue", "repositionImmediate"]
+        },
+        reopen: {
+          target: "open"
+        },
         "content.pointer.move": {
@@ -274,3 +306,3 @@ guard: "isInteractive",
       isInteractive: ({ prop }) => !!prop("interactive"),
-      hasPointerMoveOpened: ({ context }) => context.get("hasPointerMoveOpened"),
+      hasPointerMoveOpened: ({ context }) => !!context.get("hasPointerMoveOpened"),
       isOpenControlled: ({ prop }) => prop("open") !== void 0
@@ -302,6 +334,6 @@ },
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return (0, import_popper.getPlacement)(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
-          defer: true,
           listeners: false,
@@ -313,2 +345,13 @@ onComplete(data) {
       },
+      repositionImmediate: ({ context, event, prop, scope }) => {
+        const triggerValue = event.value ?? context.get("triggerValue");
+        const getPositionerEl2 = () => dom.getPositionerEl(scope);
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, triggerValue);
+        return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
+          ...prop("positioning"),
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
       toggleVisibility: ({ prop, event, send }) => {
@@ -322,7 +365,17 @@ queueMicrotask(() => {
       },
-      setPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", true);
+      setPointerMoveOpened: ({ context, event }) => {
+        const triggerId = event.triggerId ?? event.previousEvent?.triggerId;
+        context.set("hasPointerMoveOpened", triggerId ?? null);
       },
       clearPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", false);
+        context.set("hasPointerMoveOpened", null);
+      },
+      setTriggerValue: ({ context, event }) => {
+        if (event.value === void 0) return;
+        context.set("triggerValue", event.value);
+      },
+      immediateReopen: ({ send }) => {
+        queueMicrotask(() => {
+          send({ type: "reopen" });
+        });
       }
@@ -339,3 +392,4 @@ },
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return (0, import_popper.getPlacement)(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return (0, import_popper.getPlacement)(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
@@ -353,5 +407,6 @@ defer: true,
       },
-      trackScroll: ({ send, prop, scope }) => {
+      trackScroll: ({ send, prop, scope, context }) => {
         if (!prop("closeOnScroll")) return;
-        const triggerEl = dom.getTriggerEl(scope);
+        const triggerValue = context.get("triggerValue");
+        const triggerEl = dom.getActiveTriggerEl(scope, triggerValue);
         if (!triggerEl) return;
@@ -393,11 +448,11 @@ const overflowParents = (0, import_dom_query.getOverflowAncestors)(triggerEl);
       },
-      waitForOpenDelay: ({ send, prop }) => {
+      waitForOpenDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.openDelay" });
+          send({ type: "after.openDelay", previousEvent: event });
         }, prop("openDelay"));
         return () => clearTimeout(id);
       },
-      waitForCloseDelay: ({ send, prop }) => {
+      waitForCloseDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.closeDelay" });
+          send({ type: "after.closeDelay", previousEvent: event });
         }, prop("closeDelay"));
@@ -404,0 +459,0 @@ return () => clearTimeout(id);

dist/tooltip.machine.mjs

@@ -6,5 +6,5 @@ // src/tooltip.machine.ts
 import { getPlacement } from "@zag-js/popper";
+import { ensureProps } from "@zag-js/utils";
 import * as dom from "./tooltip.dom.mjs";
 import { store } from "./tooltip.store.mjs";
-import { ensureProps } from "@zag-js/utils";
 var { and, not } = createGuards();
@@ -37,5 +37,15 @@ var machine = createMachine({
   effects: ["trackFocusVisible", "trackStore"],
-  context: ({ bindable }) => ({
+  context: ({ bindable, prop, scope }) => ({
     currentPlacement: bindable(() => ({ defaultValue: void 0 })),
-    hasPointerMoveOpened: bindable(() => ({ defaultValue: false }))
+    hasPointerMoveOpened: bindable(() => ({ defaultValue: null })),
+    triggerValue: bindable(() => ({
+      defaultValue: prop("defaultTriggerValue") ?? null,
+      value: prop("triggerValue"),
+      onChange(value) {
+        const onTriggerValueChange = prop("onTriggerValueChange");
+        if (!onTriggerValueChange) return;
+        const triggerElement = dom.getActiveTriggerEl(scope, value);
+        onTriggerValueChange({ value, triggerElement });
+      }
+    }))
   }),
@@ -49,3 +59,11 @@ watch({ track, action, prop }) {
     });
+    track([() => prop("triggerValue")], () => {
+      action(["repositionImmediate"]);
+    });
   },
+  on: {
+    "triggerValue.set": {
+      actions: ["setTriggerValue", "repositionImmediate"]
+    }
+  },
   states: {
@@ -61,7 +79,7 @@ closed: {
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
@@ -75,3 +93,4 @@ ],
             guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
-            target: "opening"
+            target: "opening",
+            actions: ["setTriggerValue"]
           },
@@ -81,3 +100,3 @@ {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "invokeOnOpen", "setTriggerValue"]
           }
@@ -109,7 +128,7 @@ ]
             guard: "isOpenControlled",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           },
           {
             target: "open",
-            actions: ["invokeOnOpen"]
+            actions: ["setTriggerValue", "invokeOnOpen"]
           }
@@ -180,2 +199,8 @@ ],
           actions: ["reposition"]
+        },
+        "triggerValue.set": {
+          // Transition to closing (which cleans up trackPositioning) then immediately back to open
+          // This re-creates the positioning effect with the new trigger
+          target: "closing",
+          actions: ["setTriggerValue", "immediateReopen"]
         }
@@ -217,9 +242,16 @@ }
             // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-            actions: ["setPointerMoveOpened", "invokeOnOpen", "toggleVisibility"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen", "toggleVisibility"]
           },
           {
             target: "open",
-            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+            actions: ["setPointerMoveOpened", "setTriggerValue", "invokeOnOpen"]
           }
         ],
+        "triggerValue.set": {
+          target: "open",
+          actions: ["setTriggerValue", "repositionImmediate"]
+        },
+        reopen: {
+          target: "open"
+        },
         "content.pointer.move": {
@@ -240,3 +272,3 @@ guard: "isInteractive",
       isInteractive: ({ prop }) => !!prop("interactive"),
-      hasPointerMoveOpened: ({ context }) => context.get("hasPointerMoveOpened"),
+      hasPointerMoveOpened: ({ context }) => !!context.get("hasPointerMoveOpened"),
       isOpenControlled: ({ prop }) => prop("open") !== void 0
@@ -268,6 +300,6 @@ },
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return getPlacement(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
           ...event.options,
-          defer: true,
           listeners: false,
@@ -279,2 +311,13 @@ onComplete(data) {
       },
+      repositionImmediate: ({ context, event, prop, scope }) => {
+        const triggerValue = event.value ?? context.get("triggerValue");
+        const getPositionerEl2 = () => dom.getPositionerEl(scope);
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, triggerValue);
+        return getPlacement(getTriggerEl, getPositionerEl2, {
+          ...prop("positioning"),
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
       toggleVisibility: ({ prop, event, send }) => {
@@ -288,7 +331,17 @@ queueMicrotask(() => {
       },
-      setPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", true);
+      setPointerMoveOpened: ({ context, event }) => {
+        const triggerId = event.triggerId ?? event.previousEvent?.triggerId;
+        context.set("hasPointerMoveOpened", triggerId ?? null);
       },
       clearPointerMoveOpened: ({ context }) => {
-        context.set("hasPointerMoveOpened", false);
+        context.set("hasPointerMoveOpened", null);
+      },
+      setTriggerValue: ({ context, event }) => {
+        if (event.value === void 0) return;
+        context.set("triggerValue", event.value);
+      },
+      immediateReopen: ({ send }) => {
+        queueMicrotask(() => {
+          send({ type: "reopen" });
+        });
       }
@@ -305,3 +358,4 @@ },
         const getPositionerEl2 = () => dom.getPositionerEl(scope);
-        return getPlacement(dom.getTriggerEl(scope), getPositionerEl2, {
+        const getTriggerEl = () => dom.getActiveTriggerEl(scope, context.get("triggerValue"));
+        return getPlacement(getTriggerEl, getPositionerEl2, {
           ...prop("positioning"),
@@ -319,5 +373,6 @@ defer: true,
       },
-      trackScroll: ({ send, prop, scope }) => {
+      trackScroll: ({ send, prop, scope, context }) => {
         if (!prop("closeOnScroll")) return;
-        const triggerEl = dom.getTriggerEl(scope);
+        const triggerValue = context.get("triggerValue");
+        const triggerEl = dom.getActiveTriggerEl(scope, triggerValue);
         if (!triggerEl) return;
@@ -359,11 +414,11 @@ const overflowParents = getOverflowAncestors(triggerEl);
       },
-      waitForOpenDelay: ({ send, prop }) => {
+      waitForOpenDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.openDelay" });
+          send({ type: "after.openDelay", previousEvent: event });
         }, prop("openDelay"));
         return () => clearTimeout(id);
       },
-      waitForCloseDelay: ({ send, prop }) => {
+      waitForCloseDelay: ({ send, prop, event }) => {
         const id = setTimeout(() => {
-          send({ type: "after.closeDelay" });
+          send({ type: "after.closeDelay", previousEvent: event });
         }, prop("closeDelay"));
@@ -370,0 +425,0 @@ return () => clearTimeout(id);

dist/tooltip.props.js

@@ -32,6 +32,8 @@ "use strict";
   "closeDelay",
+  "closeOnClick",
   "closeOnEscape",
   "closeOnPointerDown",
   "closeOnScroll",
-  "closeOnClick",
+  "defaultOpen",
+  "defaultTriggerValue",
   "dir",
@@ -44,6 +46,7 @@ "disabled",
   "onOpenChange",
-  "defaultOpen",
+  "onTriggerValueChange",
   "open",
   "openDelay",
-  "positioning"
+  "positioning",
+  "triggerValue"
 ]);
@@ -50,0 +53,0 @@ var splitProps = (0, import_utils.createSplitProps)(props);

dist/tooltip.props.mjs

@@ -7,6 +7,8 @@ // src/tooltip.props.ts
   "closeDelay",
+  "closeOnClick",
   "closeOnEscape",
   "closeOnPointerDown",
   "closeOnScroll",
-  "closeOnClick",
+  "defaultOpen",
+  "defaultTriggerValue",
   "dir",
@@ -19,6 +21,7 @@ "disabled",
   "onOpenChange",
-  "defaultOpen",
+  "onTriggerValueChange",
   "open",
   "openDelay",
-  "positioning"
+  "positioning",
+  "triggerValue"
 ]);
@@ -25,0 +28,0 @@ var splitProps = createSplitProps(props);

dist/tooltip.types.d.mts

@@ -9,4 +9,14 @@ import { Machine, EventObject, Service } from '@zag-js/core';
 }
+interface TriggerValueChangeDetails {
+    /**
+     * The value of the trigger
+     */
+    value: string | null;
+    /**
+     * The trigger element
+     */
+    triggerElement: HTMLElement | null;
+}
 type ElementIds = Partial<{
-    trigger: string;
+    trigger: string | ((value?: string) => string);
     content: string;
@@ -84,2 +94,15 @@ arrow: string;
     defaultOpen?: boolean | undefined;
+    /**
+     * The controlled trigger value
+     */
+    triggerValue?: string | null | undefined;
+    /**
+     * The initial trigger value when rendered.
+     * Use when you don't need to control the trigger value.
+     */
+    defaultTriggerValue?: string | null | undefined;
+    /**
+     * Function called when the trigger value changes.
+     */
+    onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
@@ -92,3 +115,4 @@ type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
         currentPlacement: Placement | undefined;
-        hasPointerMoveOpened: boolean;
+        hasPointerMoveOpened: string | null;
+        triggerValue: string | null;
     };
@@ -102,2 +126,8 @@ event: EventObject;
 type TooltipMachine = Machine<TooltipSchema>;
+interface TriggerProps {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value?: string;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
@@ -113,6 +143,14 @@ /**
     /**
+     * The trigger value
+     */
+    triggerValue: string | null;
+    /**
+     * Function to set the trigger value
+     */
+    setTriggerValue: (value: string | null) => void;
+    /**
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
-    getTriggerProps: () => T["button"];
+    getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
@@ -124,2 +162,2 @@ getArrowTipProps: () => T["element"];
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService };
+export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };

dist/tooltip.types.d.ts

@@ -9,4 +9,14 @@ import { Machine, EventObject, Service } from '@zag-js/core';
 }
+interface TriggerValueChangeDetails {
+    /**
+     * The value of the trigger
+     */
+    value: string | null;
+    /**
+     * The trigger element
+     */
+    triggerElement: HTMLElement | null;
+}
 type ElementIds = Partial<{
-    trigger: string;
+    trigger: string | ((value?: string) => string);
     content: string;
@@ -84,2 +94,15 @@ arrow: string;
     defaultOpen?: boolean | undefined;
+    /**
+     * The controlled trigger value
+     */
+    triggerValue?: string | null | undefined;
+    /**
+     * The initial trigger value when rendered.
+     * Use when you don't need to control the trigger value.
+     */
+    defaultTriggerValue?: string | null | undefined;
+    /**
+     * Function called when the trigger value changes.
+     */
+    onTriggerValueChange?: ((details: TriggerValueChangeDetails) => void) | undefined;
 }
@@ -92,3 +115,4 @@ type PropsWithDefault = "openDelay" | "closeDelay" | "closeOnPointerDown" | "closeOnEscape" | "closeOnScroll" | "closeOnClick" | "interactive" | "id" | "positioning";
         currentPlacement: Placement | undefined;
-        hasPointerMoveOpened: boolean;
+        hasPointerMoveOpened: string | null;
+        triggerValue: string | null;
     };
@@ -102,2 +126,8 @@ event: EventObject;
 type TooltipMachine = Machine<TooltipSchema>;
+interface TriggerProps {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value?: string;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
@@ -113,6 +143,14 @@ /**
     /**
+     * The trigger value
+     */
+    triggerValue: string | null;
+    /**
+     * Function to set the trigger value
+     */
+    setTriggerValue: (value: string | null) => void;
+    /**
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
-    getTriggerProps: () => T["button"];
+    getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
@@ -124,2 +162,2 @@ getArrowTipProps: () => T["element"];
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService };
+export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };

package.json

 {
   "name": "@zag-js/tooltip",
-  "version": "1.38.2",
+  "version": "1.39.0",
   "description": "Core logic for the tooltip widget implemented as a state machine",
@@ -29,9 +29,9 @@ "keywords": [
   "dependencies": {
-    "@zag-js/anatomy": "1.38.2",
-    "@zag-js/core": "1.38.2",
-    "@zag-js/popper": "1.38.2",
-    "@zag-js/focus-visible": "1.38.2",
-    "@zag-js/dom-query": "1.38.2",
-    "@zag-js/utils": "1.38.2",
-    "@zag-js/types": "1.38.2"
+    "@zag-js/anatomy": "1.39.0",
+    "@zag-js/core": "1.39.0",
+    "@zag-js/popper": "1.39.0",
+    "@zag-js/focus-visible": "1.39.0",
+    "@zag-js/dom-query": "1.39.0",
+    "@zag-js/utils": "1.39.0",
+    "@zag-js/types": "1.39.0"
   },
@@ -38,0 +38,0 @@ "devDependencies": {

New alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

72037

17.66%

Lines of code

1746

13.52%

Dependency changes

• + Added

  @zag-js/anatomy@1.39.0
  (transitive)

• + Added

  @zag-js/core@1.39.0
  (transitive)

• + Added

  @zag-js/dom-query@1.39.0
  (transitive)

• + Added

  @zag-js/focus-visible@1.39.0
  (transitive)

• + Added

  @zag-js/popper@1.39.0
  (transitive)

• + Added

  @zag-js/types@1.39.0
  (transitive)

• + Added

  @zag-js/utils@1.39.0
  (transitive)

• - Removed

  @zag-js/anatomy@1.38.2
  (transitive)

• - Removed

  @zag-js/core@1.38.2
  (transitive)

• - Removed

  @zag-js/dom-query@1.38.2
  (transitive)

• - Removed

  @zag-js/focus-visible@1.38.2
  (transitive)

• - Removed

  @zag-js/popper@1.38.2
  (transitive)

• - Removed

  @zag-js/types@1.38.2
  (transitive)

• - Removed

  @zag-js/utils@1.38.2
  (transitive)

• Updated

  @zag-js/anatomy@1.39.0

• Updated

  @zag-js/core@1.39.0

• Updated

  @zag-js/dom-query@1.39.0

• Updated

  @zag-js/focus-visible@1.39.0

• Updated

  @zag-js/popper@1.39.0

• Updated

  @zag-js/types@1.39.0

• Updated

  @zag-js/utils@1.39.0