@zag-js/tooltip 1.41.0 → 2.0.0-next.0

package/dist/tooltip.connect.js

@@ -51,7 +51,8 @@ function connect(service, normalize) {
   const disabled = prop("disabled");
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
-    placement: currentPlacement
+    placement: currentPlacement,
+    positioned: context.get("positioned")
   });
   return {
     open,
@@ -72,9 +73,8 @@ function connect(service, normalize) {
       const current = value == null ? false : triggerValue === value;
       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 +100,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(`[data-ownedby="${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,23 +139,21 @@ 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
       });
@@ -165,7 +163,7 @@ function connect(service, normalize) {
       const isPrevTooltip = import_tooltip2.store.get("prevId") === id;
       const instant = import_tooltip2.store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
       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",

package/dist/tooltip.connect.mjs

@@ -17,7 +17,8 @@ function connect(service, normalize) {
   const disabled = prop("disabled");
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
-    placement: currentPlacement
+    placement: currentPlacement,
+    positioned: context.get("positioned")
   });
   return {
     open,
@@ -38,9 +39,8 @@ function connect(service, normalize) {
       const current = value == null ? false : triggerValue === value;
       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 +66,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(`[data-ownedby="${scope.id}"]`) != null;
+          const focusedAnotherTrigger = activeEl?.closest(`[${parts.trigger.attr}="${scope.id}"]`) != null;
           if (!focusedAnotherTrigger) {
             send({ type: "close", src: "trigger.blur", value, triggerId });
           }
@@ -105,23 +105,21 @@ 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
       });
@@ -131,7 +129,7 @@ function connect(service, normalize) {
       const isPrevTooltip = store.get("prevId") === id;
       const instant = store.get("instant") && (open && isCurrentTooltip || isPrevTooltip);
       return normalize.element({
-        ...parts.content.attrs,
+        ...parts.content.attrs(scope.id),
         dir: prop("dir"),
         hidden: !open,
         "data-state": open ? "open" : "closed",

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"][data-ownedby="${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 { 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"][data-ownedby="${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

@@ -79,7 +79,8 @@ var machine = (0, import_core.createMachine)({
         const triggerElement = dom.getActiveTriggerEl(scope, value);
         onTriggerValueChange({ value, triggerElement });
       }
-    }))
+    })),
+    positioned: bindable(() => ({ defaultValue: false }))
   }),
   watch({ track, action, prop }) {
     track([() => prop("disabled")], () => {
@@ -382,6 +383,7 @@ var machine = (0, import_core.createMachine)({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
+            context.set("positioned", true);
           }
         });
       },

package/dist/tooltip.machine.mjs

@@ -45,7 +45,8 @@ var machine = createMachine({
         const triggerElement = dom.getActiveTriggerEl(scope, value);
         onTriggerValueChange({ value, triggerElement });
       }
-    }))
+    })),
+    positioned: bindable(() => ({ defaultValue: false }))
   }),
   watch({ track, action, prop }) {
     track([() => prop("disabled")], () => {
@@ -348,6 +349,7 @@ var machine = createMachine({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
+            context.set("positioned", true);
           }
         });
       },

package/dist/tooltip.types.d.mts

@@ -112,6 +112,7 @@ interface TooltipSchema {
         currentPlacement: Placement | undefined;
         hasPointerMoveOpened: string | null;
         triggerValue: string | null;
+        positioned: boolean;
     };
     event: EventObject;
     action: string;

package/dist/tooltip.types.d.ts

@@ -112,6 +112,7 @@ interface TooltipSchema {
         currentPlacement: Placement | undefined;
         hasPointerMoveOpened: string | null;
         triggerValue: string | null;
+        positioned: boolean;
     };
     event: EventObject;
     action: string;

package/package.json

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