@zag-js/tooltip 2.0.0-next.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

@@ -51,9 +51,19 @@ function connect(service, normalize) {
   const disabled = prop("disabled");
   const popperStyles = (0, import_popper.getPlacementStyles)({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    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) {
@@ -68,9 +78,10 @@ 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(scope.id),
@@ -158,20 +169,19 @@ function connect(service, normalize) {
         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(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

@@ -17,9 +17,19 @@ function connect(service, normalize) {
   const disabled = prop("disabled");
   const popperStyles = getPlacementStyles({
     ...prop("positioning"),
-    placement: currentPlacement,
-    positioned: context.get("positioned")
+    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) {
@@ -34,9 +44,10 @@ 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(scope.id),
@@ -124,20 +135,19 @@ function connect(service, normalize) {
         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(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.machine.js

@@ -79,8 +79,7 @@ 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")], () => {
@@ -299,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")) {
@@ -383,7 +382,6 @@ var machine = (0, import_core.createMachine)({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
@@ -415,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

@@ -45,8 +45,7 @@ var machine = createMachine({
         const triggerElement = dom.getActiveTriggerEl(scope, value);
         onTriggerValueChange({ value, triggerElement });
       }
-    })),
-    positioned: bindable(() => ({ defaultValue: false }))
+    }))
   }),
   watch({ track, action, prop }) {
     track([() => prop("disabled")], () => {
@@ -265,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")) {
@@ -349,7 +348,6 @@ var machine = createMachine({
           defer: true,
           onComplete(data) {
             context.set("currentPlacement", data.placement);
-            context.set("positioned", true);
           }
         });
       },
@@ -381,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';
 
@@ -112,7 +112,6 @@ interface TooltipSchema {
         currentPlacement: Placement | undefined;
         hasPointerMoveOpened: string | null;
         triggerValue: string | null;
-        positioned: boolean;
     };
     event: EventObject;
     action: string;
@@ -127,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.
@@ -148,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';
 
@@ -112,7 +112,6 @@ interface TooltipSchema {
         currentPlacement: Placement | undefined;
         hasPointerMoveOpened: string | null;
         triggerValue: string | null;
-        positioned: boolean;
     };
     event: EventObject;
     action: string;
@@ -127,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.
@@ -148,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": "2.0.0-next.0",
+  "version": "2.0.0-next.1",
   "description": "Core logic for the tooltip widget implemented as a state machine",
   "keywords": [
     "js",
@@ -14,7 +14,10 @@
   "author": "Segun Adebayo <sage@adebayosegun.com>",
   "homepage": "https://github.com/chakra-ui/zag#readme",
   "license": "MIT",
-  "repository": "https://github.com/chakra-ui/zag/tree/main/packages/tooltip",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/chakra-ui/zag/tree/main/packages/tooltip"
+  },
   "sideEffects": false,
   "files": [
     "dist"
@@ -26,13 +29,13 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@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"
+    "@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"