@zag-js/tooltip 1.43.0 → 2.0.0-next.1

package/dist/index.d.mts

@@ -2,7 +2,7 @@ export { anatomy } from './tooltip.anatomy.mjs';
 export { connect } from './tooltip.connect.mjs';
 export { machine } from './tooltip.machine.mjs';
 export { props, splitProps } from './tooltip.props.mjs';
-export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerValueChangeDetails } from './tooltip.types.mjs';
+export { TooltipApi as Api, ContentState, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './tooltip.types.mjs';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/core';

package/dist/index.d.ts

@@ -2,7 +2,7 @@ export { anatomy } from './tooltip.anatomy.js';
 export { connect } from './tooltip.connect.js';
 export { machine } from './tooltip.machine.js';
 export { props, splitProps } from './tooltip.props.js';
-export { TooltipApi as Api, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerValueChangeDetails } from './tooltip.types.js';
+export { TooltipApi as Api, ContentState, ElementIds, TooltipMachine as Machine, OpenChangeDetails, TooltipProps as Props, TooltipService as Service, TriggerProps, TriggerState, TriggerValueChangeDetails } from './tooltip.types.js';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import '@zag-js/anatomy';
 import '@zag-js/core';

package/dist/tooltip.connect.js

@@ -53,6 +53,17 @@ function connect(service, normalize) {
     ...prop("positioning"),
     placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getContentState() {
+    const isCurrentTooltip = import_tooltip2.store.get("id") === id;
+    const isPrevTooltip = import_tooltip2.store.get("prevId") === id;
+    const instant = !!import_tooltip2.store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+    return { open, instant, placement: currentPlacement, side: currentPlacementSide };
+  }
   return {
     open,
     setOpen(nextOpen) {
@@ -67,14 +78,14 @@ function connect(service, normalize) {
     reposition(options = {}) {
       send({ type: "positioning.set", options });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const { current } = getTriggerState(props);
       const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
-        ...import_tooltip.parts.trigger.attrs,
+        ...import_tooltip.parts.trigger.attrs(scope.id),
         id: triggerId,
-        "data-ownedby": scope.id,
         "data-value": value,
         "data-current": (0, import_dom_query.dataAttr)(current),
         dir: prop("dir"),
@@ -100,7 +111,7 @@ function connect(service, normalize) {
           if (disabled) return;
           if (id !== import_tooltip2.store.get("id")) return;
           const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
-          const focusedAnotherTrigger = activeEl?.closest((0, import_dom_query.getByOwnerId)(scope.id)) != null;
+          const focusedAnotherTrigger = activeEl?.closest(`[${import_tooltip.parts.trigger.attr}="${scope.id}"]`) != null;
           if (!focusedAnotherTrigger) {
             send({ type: "close", src: "trigger.blur", value, triggerId });
           }
@@ -139,41 +150,38 @@ function connect(service, normalize) {
     },
     getArrowProps() {
       return normalize.element({
-        id: dom.getArrowId(scope),
-        ...import_tooltip.parts.arrow.attrs,
+        ...import_tooltip.parts.arrow.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrow
       });
     },
     getArrowTipProps() {
       return normalize.element({
-        ...import_tooltip.parts.arrowTip.attrs,
+        ...import_tooltip.parts.arrowTip.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrowTip
       });
     },
     getPositionerProps() {
       return normalize.element({
-        id: dom.getPositionerId(scope),
-        ...import_tooltip.parts.positioner.attrs,
+        ...import_tooltip.parts.positioner.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.floating
       });
     },
+    getContentState,
     getContentProps() {
-      const isCurrentTooltip = import_tooltip2.store.get("id") === id;
-      const isPrevTooltip = import_tooltip2.store.get("prevId") === id;
-      const instant = import_tooltip2.store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+      const contentState = getContentState();
       return normalize.element({
-        ...import_tooltip.parts.content.attrs,
+        ...import_tooltip.parts.content.attrs(scope.id),
         dir: prop("dir"),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-instant": (0, import_dom_query.dataAttr)(instant),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-instant": (0, import_dom_query.dataAttr)(contentState.instant),
         role: hasAriaLabel ? void 0 : "tooltip",
         id: hasAriaLabel ? void 0 : contentId,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
         onPointerEnter() {
           send({ type: "content.pointer.move" });
         },

package/dist/tooltip.connect.mjs

@@ -1,5 +1,5 @@
 // src/tooltip.connect.ts
-import { dataAttr, getByOwnerId, isLeftClick } from "@zag-js/dom-query";
+import { dataAttr, isLeftClick } from "@zag-js/dom-query";
 import { isFocusVisible } from "@zag-js/focus-visible";
 import { getPlacementSide, getPlacementStyles } from "@zag-js/popper";
 import { parts } from "./tooltip.anatomy.mjs";
@@ -19,6 +19,17 @@ function connect(service, normalize) {
     ...prop("positioning"),
     placement: currentPlacement
   });
+  function getTriggerState(props = {}) {
+    const { value } = props;
+    const current = value == null ? false : triggerValue === value;
+    return { value, current, open: value == null ? open : open && current };
+  }
+  function getContentState() {
+    const isCurrentTooltip = store.get("id") === id;
+    const isPrevTooltip = store.get("prevId") === id;
+    const instant = !!store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+    return { open, instant, placement: currentPlacement, side: currentPlacementSide };
+  }
   return {
     open,
     setOpen(nextOpen) {
@@ -33,14 +44,14 @@ function connect(service, normalize) {
     reposition(options = {}) {
       send({ type: "positioning.set", options });
     },
+    getTriggerState,
     getTriggerProps(props = {}) {
       const { value } = props;
-      const current = value == null ? false : triggerValue === value;
+      const { current } = getTriggerState(props);
       const triggerId = dom.getTriggerId(scope, value);
       return normalize.button({
-        ...parts.trigger.attrs,
+        ...parts.trigger.attrs(scope.id),
         id: triggerId,
-        "data-ownedby": scope.id,
         "data-value": value,
         "data-current": dataAttr(current),
         dir: prop("dir"),
@@ -66,7 +77,7 @@ function connect(service, normalize) {
           if (disabled) return;
           if (id !== store.get("id")) return;
           const activeEl = event.relatedTarget ?? scope.getDoc().activeElement;
-          const focusedAnotherTrigger = activeEl?.closest(getByOwnerId(scope.id)) != null;
+          const focusedAnotherTrigger = activeEl?.closest(`[${parts.trigger.attr}="${scope.id}"]`) != null;
           if (!focusedAnotherTrigger) {
             send({ type: "close", src: "trigger.blur", value, triggerId });
           }
@@ -105,41 +116,38 @@ function connect(service, normalize) {
     },
     getArrowProps() {
       return normalize.element({
-        id: dom.getArrowId(scope),
-        ...parts.arrow.attrs,
+        ...parts.arrow.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrow
       });
     },
     getArrowTipProps() {
       return normalize.element({
-        ...parts.arrowTip.attrs,
+        ...parts.arrowTip.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.arrowTip
       });
     },
     getPositionerProps() {
       return normalize.element({
-        id: dom.getPositionerId(scope),
-        ...parts.positioner.attrs,
+        ...parts.positioner.attrs(scope.id),
         dir: prop("dir"),
         style: popperStyles.floating
       });
     },
+    getContentState,
     getContentProps() {
-      const isCurrentTooltip = store.get("id") === id;
-      const isPrevTooltip = store.get("prevId") === id;
-      const instant = store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
+      const contentState = getContentState();
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts.content.attrs(scope.id),
         dir: prop("dir"),
-        hidden: !open,
-        "data-state": open ? "open" : "closed",
-        "data-instant": dataAttr(instant),
+        hidden: !contentState.open,
+        "data-state": contentState.open ? "open" : "closed",
+        "data-instant": dataAttr(contentState.instant),
         role: hasAriaLabel ? void 0 : "tooltip",
         id: hasAriaLabel ? void 0 : contentId,
-        "data-placement": currentPlacement,
-        "data-side": currentPlacementSide,
+        "data-placement": contentState.placement,
+        "data-side": contentState.side,
         onPointerEnter() {
           send({ type: "content.pointer.move" });
         },

package/dist/tooltip.dom.js

@@ -32,26 +32,24 @@ __export(tooltip_dom_exports, {
   getTriggerId: () => getTriggerId
 });
 module.exports = __toCommonJS(tooltip_dom_exports);
-var import_dom_query = require("@zag-js/dom-query");
 var import_utils = require("@zag-js/utils");
+var import_tooltip = require("./tooltip.anatomy.js");
 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`;
+  return value ? `${scope.id}:trigger:${value}` : `${scope.id}:trigger`;
 };
-var getContentId = (scope) => scope.ids?.content ?? `tooltip:${scope.id}:content`;
-var getArrowId = (scope) => scope.ids?.arrow ?? `tooltip:${scope.id}:arrow`;
-var getPositionerId = (scope) => scope.ids?.positioner ?? `tooltip:${scope.id}:popper`;
-var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
-var getContentEl = (scope) => scope.getById(getContentId(scope));
-var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
-var getArrowEl = (scope) => scope.getById(getArrowId(scope));
-var getTriggerEls = (scope) => (0, import_dom_query.queryAll)(scope.getRootNode(), `[data-scope="tooltip"][data-part="trigger"]${(0, import_dom_query.getByOwnerId)(scope.id)}`);
+var getContentId = (scope) => scope.ids?.content ?? `${scope.id}:content`;
+var getArrowId = (scope) => scope.ids?.arrow ?? `${scope.id}:arrow`;
+var getPositionerId = (scope) => scope.ids?.positioner ?? `${scope.id}:popper`;
+var getTriggerEl = (scope) => scope.query(scope.selector(import_tooltip.parts.trigger));
+var getContentEl = (scope) => scope.query(scope.selector(import_tooltip.parts.content));
+var getPositionerEl = (scope) => scope.query(scope.selector(import_tooltip.parts.positioner));
+var getArrowEl = (scope) => scope.query(scope.selector(import_tooltip.parts.arrow));
+var getTriggerEls = (scope) => scope.queryAll(scope.selector(import_tooltip.parts.trigger));
 var getActiveTriggerEl = (scope, value) => {
-  if (value == null) {
-    return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
-  }
-  return scope.getById(getTriggerId(scope, value));
+  if (value == null) return getTriggerEls(scope)[0];
+  return scope.query(`${scope.selector(import_tooltip.parts.trigger)}[data-value="${value}"]`);
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/tooltip.dom.mjs

@@ -1,24 +1,22 @@
 // src/tooltip.dom.ts
-import { getByOwnerId, queryAll } from "@zag-js/dom-query";
 import { isFunction } from "@zag-js/utils";
+import { parts } from "./tooltip.anatomy.mjs";
 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`;
+  return value ? `${scope.id}:trigger:${value}` : `${scope.id}:trigger`;
 };
-var getContentId = (scope) => scope.ids?.content ?? `tooltip:${scope.id}:content`;
-var getArrowId = (scope) => scope.ids?.arrow ?? `tooltip:${scope.id}:arrow`;
-var getPositionerId = (scope) => scope.ids?.positioner ?? `tooltip:${scope.id}:popper`;
-var getTriggerEl = (scope) => scope.getById(getTriggerId(scope));
-var getContentEl = (scope) => scope.getById(getContentId(scope));
-var getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
-var getArrowEl = (scope) => scope.getById(getArrowId(scope));
-var getTriggerEls = (scope) => queryAll(scope.getRootNode(), `[data-scope="tooltip"][data-part="trigger"]${getByOwnerId(scope.id)}`);
+var getContentId = (scope) => scope.ids?.content ?? `${scope.id}:content`;
+var getArrowId = (scope) => scope.ids?.arrow ?? `${scope.id}:arrow`;
+var getPositionerId = (scope) => scope.ids?.positioner ?? `${scope.id}:popper`;
+var getTriggerEl = (scope) => scope.query(scope.selector(parts.trigger));
+var getContentEl = (scope) => scope.query(scope.selector(parts.content));
+var getPositionerEl = (scope) => scope.query(scope.selector(parts.positioner));
+var getArrowEl = (scope) => scope.query(scope.selector(parts.arrow));
+var getTriggerEls = (scope) => scope.queryAll(scope.selector(parts.trigger));
 var getActiveTriggerEl = (scope, value) => {
-  if (value == null) {
-    return getTriggerEl(scope) ?? getTriggerEls(scope)[0];
-  }
-  return scope.getById(getTriggerId(scope, value));
+  if (value == null) return getTriggerEls(scope)[0];
+  return scope.query(`${scope.selector(parts.trigger)}[data-value="${value}"]`);
 };
 export {
   getActiveTriggerEl,

package/dist/tooltip.machine.js

@@ -298,10 +298,10 @@ var machine = (0, import_core.createMachine)({
       isOpenControlled: ({ prop }) => prop("open") !== void 0
     },
     actions: {
-      setGlobalId: ({ prop }) => {
+      setGlobalId: ({ prop, event }) => {
         const prevId = import_tooltip.store.get("id");
-        const isInstant = prevId !== null && prevId !== prop("id");
-        import_tooltip.store.update({ id: prop("id"), prevId: isInstant ? prevId : null, instant: isInstant });
+        const isInstant = event.src === "trigger.focus" || prevId !== null && prevId !== prop("id");
+        import_tooltip.store.update({ id: prop("id"), prevId: isInstant && prevId !== null ? prevId : null, instant: isInstant });
       },
       clearGlobalId: ({ prop }) => {
         if (prop("id") === import_tooltip.store.get("id")) {
@@ -413,7 +413,8 @@ var machine = (0, import_core.createMachine)({
         let cleanup;
         queueMicrotask(() => {
           cleanup = import_tooltip.store.subscribe(() => {
-            if (import_tooltip.store.get("id") !== prop("id")) {
+            const id = import_tooltip.store.get("id");
+            if (id !== null && id !== prop("id")) {
               send({ type: "close", src: "id.change" });
             }
           });

package/dist/tooltip.machine.mjs

@@ -264,10 +264,10 @@ var machine = createMachine({
       isOpenControlled: ({ prop }) => prop("open") !== void 0
     },
     actions: {
-      setGlobalId: ({ prop }) => {
+      setGlobalId: ({ prop, event }) => {
         const prevId = store.get("id");
-        const isInstant = prevId !== null && prevId !== prop("id");
-        store.update({ id: prop("id"), prevId: isInstant ? prevId : null, instant: isInstant });
+        const isInstant = event.src === "trigger.focus" || prevId !== null && prevId !== prop("id");
+        store.update({ id: prop("id"), prevId: isInstant && prevId !== null ? prevId : null, instant: isInstant });
       },
       clearGlobalId: ({ prop }) => {
         if (prop("id") === store.get("id")) {
@@ -379,7 +379,8 @@ var machine = createMachine({
         let cleanup;
         queueMicrotask(() => {
           cleanup = store.subscribe(() => {
-            if (store.get("id") !== prop("id")) {
+            const id = store.get("id");
+            if (id !== null && id !== prop("id")) {
               send({ type: "close", src: "id.change" });
             }
           });

package/dist/tooltip.types.d.mts

@@ -1,5 +1,5 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
 
@@ -126,6 +126,38 @@ interface TriggerProps {
      */
     value?: string;
 }
+interface TriggerState {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the tooltip
+     */
+    current: boolean;
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+    /**
+     * Whether the tooltip should skip its enter animation, following a rapid switch between triggers
+     */
+    instant: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the tooltip is open.
@@ -147,11 +179,19 @@ interface TooltipApi<T extends PropTypes = PropTypes> {
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
 }
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/dist/tooltip.types.d.ts

@@ -1,5 +1,5 @@
 import { Machine, EventObject, Service } from '@zag-js/core';
-import { PositioningOptions, Placement } from '@zag-js/popper';
+import { PositioningOptions, Placement, PlacementSide } from '@zag-js/popper';
 export { Placement, PositioningOptions } from '@zag-js/popper';
 import { PropTypes, RequiredBy, DirectionProperty, CommonProperties } from '@zag-js/types';
 
@@ -126,6 +126,38 @@ interface TriggerProps {
      */
     value?: string;
 }
+interface TriggerState {
+    /**
+     * The value that identifies this specific trigger
+     */
+    value: string | undefined;
+    /**
+     * Whether this trigger is the one that opened the tooltip
+     */
+    current: boolean;
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+}
+interface ContentState {
+    /**
+     * Whether the tooltip is open
+     */
+    open: boolean;
+    /**
+     * Whether the tooltip should skip its enter animation, following a rapid switch between triggers
+     */
+    instant: boolean;
+    /**
+     * The current placement of the content relative to the trigger
+     */
+    placement: Placement | undefined;
+    /**
+     * The side of the trigger the content is placed on
+     */
+    side: PlacementSide | undefined;
+}
 interface TooltipApi<T extends PropTypes = PropTypes> {
     /**
      * Whether the tooltip is open.
@@ -147,11 +179,19 @@ interface TooltipApi<T extends PropTypes = PropTypes> {
      * Function to reposition the popover
      */
     reposition: (options?: Partial<PositioningOptions>) => void;
+    /**
+     * Returns the state of a specific trigger, including whether it's the currently active one
+     */
+    getTriggerState: (props?: TriggerProps) => TriggerState;
     getTriggerProps: (props?: TriggerProps) => T["button"];
     getArrowProps: () => T["element"];
     getArrowTipProps: () => T["element"];
     getPositionerProps: () => T["element"];
+    /**
+     * Returns the state of the content
+     */
+    getContentState: () => ContentState;
     getContentProps: () => T["element"];
 }
 
-export type { ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerValueChangeDetails };
+export type { ContentState, ElementIds, OpenChangeDetails, TooltipApi, TooltipMachine, TooltipProps, TooltipSchema, TooltipService, TriggerProps, TriggerState, TriggerValueChangeDetails };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/tooltip",
-  "version": "1.43.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the tooltip widget implemented as a state machine",
   "keywords": [
     "js",
@@ -29,13 +29,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.43.0",
-    "@zag-js/core": "1.43.0",
-    "@zag-js/popper": "1.43.0",
-    "@zag-js/focus-visible": "1.43.0",
-    "@zag-js/dom-query": "1.43.0",
-    "@zag-js/utils": "1.43.0",
-    "@zag-js/types": "1.43.0"
+    "@zag-js/anatomy": "2.0.0-next.1",
+    "@zag-js/core": "2.0.0-next.1",
+    "@zag-js/popper": "2.0.0-next.1",
+    "@zag-js/focus-visible": "2.0.0-next.1",
+    "@zag-js/dom-query": "2.0.0-next.1",
+    "@zag-js/utils": "2.0.0-next.1",
+    "@zag-js/types": "2.0.0-next.1"
   },
   "devDependencies": {
     "clean-package": "2.2.0"