@zag-js/tooltip 0.82.2 → 1.0.0

package/dist/index.mjs

@@ -1,468 +1,495 @@
 import { createAnatomy } from '@zag-js/anatomy';
-import { createScope, dataAttr, addDomEvent, getOverflowAncestors, isComposingEvent } from '@zag-js/dom-query';
-import { isFocusVisible, trackFocusVisible } from '@zag-js/focus-visible';
-import { getPlacementStyles, getPlacement } from '@zag-js/popper';
-import { proxy, createMachine, subscribe, guards } from '@zag-js/core';
-import { createSplitProps, compact } from '@zag-js/utils';
+import { addDomEvent, getOverflowAncestors, dataAttr, isComposingEvent } from '@zag-js/dom-query';
+import { trackFocusVisible, isFocusVisible } from '@zag-js/focus-visible';
+import { getPlacement, getPlacementStyles } from '@zag-js/popper';
+import { proxy, subscribe } from '@zag-js/store';
+import { createGuards, createMachine } from '@zag-js/core';
 import { createProps } from '@zag-js/types';
+import { createSplitProps } from '@zag-js/utils';
 
 // src/tooltip.anatomy.ts
 var anatomy = createAnatomy("tooltip").parts("trigger", "arrow", "arrowTip", "positioner", "content");
 var parts = anatomy.build();
-var dom = createScope({
-  getTriggerId: (ctx) => ctx.ids?.trigger ?? `tooltip:${ctx.id}:trigger`,
-  getContentId: (ctx) => ctx.ids?.content ?? `tooltip:${ctx.id}:content`,
-  getArrowId: (ctx) => ctx.ids?.arrow ?? `tooltip:${ctx.id}:arrow`,
-  getPositionerId: (ctx) => ctx.ids?.positioner ?? `tooltip:${ctx.id}:popper`,
-  getTriggerEl: (ctx) => dom.getById(ctx, dom.getTriggerId(ctx)),
-  getContentEl: (ctx) => dom.getById(ctx, dom.getContentId(ctx)),
-  getPositionerEl: (ctx) => dom.getById(ctx, dom.getPositionerId(ctx)),
-  getArrowEl: (ctx) => dom.getById(ctx, dom.getArrowId(ctx))
-});
-var store = proxy({
-  id: null,
-  prevId: null,
-  setId(val) {
-    this.prevId = this.id;
-    this.id = val;
-  }
-});
+
+// src/tooltip.dom.ts
+var getTriggerId = (scope) => scope.ids?.trigger ?? `tooltip:${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 getPositionerEl = (scope) => scope.getById(getPositionerId(scope));
+var store = proxy({ id: null });
 
 // src/tooltip.connect.ts
-function connect(state, send, normalize) {
-  const id = state.context.id;
-  const hasAriaLabel = state.context.hasAriaLabel;
-  const open = state.hasTag("open");
-  const triggerId = dom.getTriggerId(state.context);
-  const contentId = dom.getContentId(state.context);
-  const disabled = state.context.disabled;
+function connect(service, normalize) {
+  const { state, context, send, scope, prop, event: _event } = service;
+  const id = prop("id");
+  const hasAriaLabel = !!prop("aria-label");
+  const open = state.matches("open", "closing");
+  const triggerId = getTriggerId(scope);
+  const contentId = getContentId(scope);
+  const disabled = prop("disabled");
   const popperStyles = getPlacementStyles({
-    ...state.context.positioning,
-    placement: state.context.currentPlacement
+    ...prop("positioning"),
+    placement: context.get("currentPlacement")
   });
   return {
     open,
     setOpen(nextOpen) {
       if (nextOpen === open) return;
-      send(nextOpen ? "OPEN" : "CLOSE");
+      send({ type: nextOpen ? "open" : "close" });
     },
     reposition(options = {}) {
-      send({ type: "POSITIONING.SET", options });
+      send({ type: "positioning.set", options });
     },
     getTriggerProps() {
       return normalize.button({
         ...parts.trigger.attrs,
         id: triggerId,
-        dir: state.context.dir,
+        dir: prop("dir"),
         "data-expanded": dataAttr(open),
         "data-state": open ? "open" : "closed",
         "aria-describedby": open ? contentId : void 0,
         onClick(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
-          if (!state.context.closeOnClick) return;
-          send({ type: "CLOSE", src: "trigger.click" });
+          if (!prop("closeOnClick")) return;
+          send({ type: "close", src: "trigger.click" });
         },
         onFocus(event) {
-          if (event.defaultPrevented) return;
-          if (disabled) return;
-          if (state.event.src === "trigger.pointerdown") return;
-          if (!isFocusVisible()) return;
-          send({ type: "OPEN", src: "trigger.focus" });
+          queueMicrotask(() => {
+            if (event.defaultPrevented) return;
+            if (disabled) return;
+            if (_event.src === "trigger.pointerdown") return;
+            if (!isFocusVisible()) return;
+            send({ type: "open", src: "trigger.focus" });
+          });
         },
         onBlur(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (id === store.id) {
-            send({ type: "CLOSE", src: "trigger.blur" });
+            send({ type: "close", src: "trigger.blur" });
           }
         },
         onPointerDown(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
-          if (!state.context.closeOnPointerDown) return;
+          if (!prop("closeOnPointerDown")) return;
           if (id === store.id) {
-            send({ type: "CLOSE", src: "trigger.pointerdown" });
+            send({ type: "close", src: "trigger.pointerdown" });
           }
         },
         onPointerMove(event) {
           if (event.defaultPrevented) return;
           if (disabled) return;
           if (event.pointerType === "touch") return;
-          send("POINTER_MOVE");
+          send({ type: "pointer.move" });
         },
         onPointerLeave() {
           if (disabled) return;
-          send("POINTER_LEAVE");
+          send({ type: "pointer.leave" });
         },
         onPointerCancel() {
           if (disabled) return;
-          send("POINTER_LEAVE");
+          send({ type: "pointer.leave" });
         }
       });
     },
     getArrowProps() {
       return normalize.element({
-        id: dom.getArrowId(state.context),
+        id: getArrowId(scope),
         ...parts.arrow.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         style: popperStyles.arrow
       });
     },
     getArrowTipProps() {
       return normalize.element({
         ...parts.arrowTip.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         style: popperStyles.arrowTip
       });
     },
     getPositionerProps() {
       return normalize.element({
-        id: dom.getPositionerId(state.context),
+        id: getPositionerId(scope),
         ...parts.positioner.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         style: popperStyles.floating
       });
     },
     getContentProps() {
       return normalize.element({
         ...parts.content.attrs,
-        dir: state.context.dir,
+        dir: prop("dir"),
         hidden: !open,
         "data-state": open ? "open" : "closed",
         role: hasAriaLabel ? void 0 : "tooltip",
         id: hasAriaLabel ? void 0 : contentId,
-        "data-placement": state.context.currentPlacement,
+        "data-placement": context.get("currentPlacement"),
         onPointerEnter() {
-          send("CONTENT.POINTER_MOVE");
+          send({ type: "content.pointer.move" });
         },
         onPointerLeave() {
-          send("CONTENT.POINTER_LEAVE");
+          send({ type: "content.pointer.leave" });
         },
         style: {
-          pointerEvents: state.context.interactive ? "auto" : "none"
+          pointerEvents: prop("interactive") ? "auto" : "none"
         }
       });
     }
   };
 }
-var { and, not } = guards;
-function machine(userContext) {
-  const ctx = compact(userContext);
-  return createMachine(
-    {
-      id: "tooltip",
-      initial: ctx.open ? "open" : "closed",
-      activities: ["trackFocusVisible"],
-      context: {
-        openDelay: 1e3,
-        closeDelay: 500,
-        closeOnPointerDown: true,
-        closeOnEscape: true,
-        interactive: false,
-        closeOnScroll: true,
-        closeOnClick: true,
-        disabled: false,
-        ...ctx,
-        currentPlacement: void 0,
-        hasPointerMoveOpened: false,
-        positioning: {
-          placement: "bottom",
-          ...ctx.positioning
-        }
-      },
-      computed: {
-        hasAriaLabel: (ctx2) => !!ctx2["aria-label"]
-      },
-      watch: {
-        disabled: ["closeIfDisabled"],
-        open: ["toggleVisibility"]
-      },
-      states: {
-        closed: {
-          tags: ["closed"],
-          entry: ["clearGlobalId"],
-          on: {
-            "CONTROLLED.OPEN": "open",
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen"]
-              }
-            ],
-            POINTER_LEAVE: {
-              actions: ["clearPointerMoveOpened"]
-            },
-            POINTER_MOVE: [
-              {
-                guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
-                target: "opening"
-              },
-              {
-                guard: not("hasPointerMoveOpened"),
-                target: "open",
-                actions: ["setPointerMoveOpened", "invokeOnOpen"]
-              }
-            ]
+var { and, not } = createGuards();
+var machine = createMachine({
+  initialState: ({ prop }) => {
+    const open = prop("open") || prop("defaultOpen");
+    return open ? "open" : "closed";
+  },
+  props({ props: props2 }) {
+    return {
+      id: "x",
+      openDelay: 1e3,
+      closeDelay: 500,
+      closeOnPointerDown: true,
+      closeOnEscape: true,
+      interactive: false,
+      closeOnScroll: true,
+      closeOnClick: true,
+      disabled: false,
+      ...props2,
+      positioning: {
+        placement: "bottom",
+        ...props2.positioning
+      }
+    };
+  },
+  effects: ["trackFocusVisible", "trackStore"],
+  context: ({ bindable }) => ({
+    currentPlacement: bindable(() => ({ defaultValue: void 0 })),
+    hasPointerMoveOpened: bindable(() => ({ defaultValue: false }))
+  }),
+  watch({ track, action, prop }) {
+    track([() => prop("disabled")], () => {
+      action(["closeIfDisabled"]);
+    });
+    track([() => prop("open")], () => {
+      action(["toggleVisibility"]);
+    });
+  },
+  states: {
+    closed: {
+      entry: ["clearGlobalId"],
+      on: {
+        "controlled.open": {
+          target: "open"
+        },
+        open: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
           }
+        ],
+        "pointer.leave": {
+          actions: ["clearPointerMoveOpened"]
         },
-        opening: {
-          tags: ["closed"],
-          activities: ["trackScroll", "trackPointerlockChange"],
-          after: {
-            OPEN_DELAY: [
-              {
-                guard: "isOpenControlled",
-                actions: ["setPointerMoveOpened", "invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["setPointerMoveOpened", "invokeOnOpen"]
-              }
-            ]
+        "pointer.move": [
+          {
+            guard: and("noVisibleTooltip", not("hasPointerMoveOpened")),
+            target: "opening"
+          },
+          {
+            guard: not("hasPointerMoveOpened"),
+            target: "open",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+          }
+        ]
+      }
+    },
+    opening: {
+      effects: ["trackScroll", "trackPointerlockChange", "waitForOpenDelay"],
+      on: {
+        "after.openDelay": [
+          {
+            guard: "isOpenControlled",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
           },
-          on: {
-            "CONTROLLED.OPEN": "open",
-            "CONTROLLED.CLOSE": "closed",
-            OPEN: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnOpen"]
-              },
-              {
-                target: "open",
-                actions: ["invokeOnOpen"]
-              }
-            ],
-            POINTER_LEAVE: [
-              {
-                guard: "isOpenControlled",
-                // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-                actions: ["clearPointerMoveOpened", "invokeOnClose", "toggleVisibility"]
-              },
-              {
-                target: "closed",
-                actions: ["clearPointerMoveOpened", "invokeOnClose"]
-              }
-            ],
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-                actions: ["invokeOnClose", "toggleVisibility"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ]
+          {
+            target: "open",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
           }
+        ],
+        "controlled.open": {
+          target: "open"
         },
-        open: {
-          tags: ["open"],
-          activities: ["trackEscapeKey", "trackScroll", "trackPointerlockChange", "trackPositioning"],
-          entry: ["setGlobalId"],
-          on: {
-            "CONTROLLED.CLOSE": "closed",
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            POINTER_LEAVE: [
-              {
-                guard: "isVisible",
-                target: "closing",
-                actions: ["clearPointerMoveOpened"]
-              },
-              // == group ==
-              {
-                guard: "isOpenControlled",
-                actions: ["clearPointerMoveOpened", "invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["clearPointerMoveOpened", "invokeOnClose"]
-              }
-            ],
-            "CONTENT.POINTER_LEAVE": {
-              guard: "isInteractive",
-              target: "closing"
-            },
-            "POSITIONING.SET": {
-              actions: "reposition"
-            }
+        "controlled.close": {
+          target: "closed"
+        },
+        open: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnOpen"]
+          },
+          {
+            target: "open",
+            actions: ["invokeOnOpen"]
+          }
+        ],
+        "pointer.leave": [
+          {
+            guard: "isOpenControlled",
+            // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
+            actions: ["clearPointerMoveOpened", "invokeOnClose", "toggleVisibility"]
+          },
+          {
+            target: "closed",
+            actions: ["clearPointerMoveOpened", "invokeOnClose"]
           }
+        ],
+        close: [
+          {
+            guard: "isOpenControlled",
+            // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
+            actions: ["invokeOnClose", "toggleVisibility"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ]
+      }
+    },
+    open: {
+      effects: ["trackEscapeKey", "trackScroll", "trackPointerlockChange", "trackPositioning"],
+      entry: ["setGlobalId"],
+      on: {
+        "controlled.close": {
+          target: "closed"
         },
-        closing: {
-          tags: ["open"],
-          activities: ["trackStore", "trackPositioning"],
-          after: {
-            CLOSE_DELAY: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ]
+        close: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
           },
-          on: {
-            "CONTROLLED.CLOSE": "closed",
-            "CONTROLLED.OPEN": "open",
-            CLOSE: [
-              {
-                guard: "isOpenControlled",
-                actions: ["invokeOnClose"]
-              },
-              {
-                target: "closed",
-                actions: ["invokeOnClose"]
-              }
-            ],
-            POINTER_MOVE: [
-              {
-                guard: "isOpenControlled",
-                // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
-                actions: ["setPointerMoveOpened", "invokeOnOpen", "toggleVisibility"]
-              },
-              {
-                target: "open",
-                actions: ["setPointerMoveOpened", "invokeOnOpen"]
-              }
-            ],
-            "CONTENT.POINTER_MOVE": {
-              guard: "isInteractive",
-              target: "open"
-            },
-            "POSITIONING.SET": {
-              actions: "reposition"
-            }
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "pointer.leave": [
+          {
+            guard: "isVisible",
+            target: "closing",
+            actions: ["clearPointerMoveOpened"]
+          },
+          // == group ==
+          {
+            guard: "isOpenControlled",
+            actions: ["clearPointerMoveOpened", "invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["clearPointerMoveOpened", "invokeOnClose"]
           }
+        ],
+        "content.pointer.leave": {
+          guard: "isInteractive",
+          target: "closing"
+        },
+        "positioning.set": {
+          actions: ["reposition"]
         }
       }
     },
-    {
-      activities: {
-        trackFocusVisible(ctx2) {
-          return trackFocusVisible({ root: dom.getRootNode(ctx2) });
+    closing: {
+      effects: ["trackPositioning", "waitForCloseDelay"],
+      on: {
+        "after.closeDelay": [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "controlled.close": {
+          target: "closed"
         },
-        trackPositioning(ctx2) {
-          ctx2.currentPlacement || (ctx2.currentPlacement = ctx2.positioning.placement);
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          return getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            defer: true,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
-            }
-          });
+        "controlled.open": {
+          target: "open"
         },
-        trackPointerlockChange(ctx2, _evt, { send }) {
-          const onChange = () => send({ type: "CLOSE", src: "pointerlock:change" });
-          return addDomEvent(dom.getDoc(ctx2), "pointerlockchange", onChange, false);
+        close: [
+          {
+            guard: "isOpenControlled",
+            actions: ["invokeOnClose"]
+          },
+          {
+            target: "closed",
+            actions: ["invokeOnClose"]
+          }
+        ],
+        "pointer.move": [
+          {
+            guard: "isOpenControlled",
+            // We trigger toggleVisibility manually since the `ctx.open` has not changed yet (at this point)
+            actions: ["setPointerMoveOpened", "invokeOnOpen", "toggleVisibility"]
+          },
+          {
+            target: "open",
+            actions: ["setPointerMoveOpened", "invokeOnOpen"]
+          }
+        ],
+        "content.pointer.move": {
+          guard: "isInteractive",
+          target: "open"
         },
-        trackScroll(ctx2, _evt, { send }) {
-          if (!ctx2.closeOnScroll) return;
-          const triggerEl = dom.getTriggerEl(ctx2);
-          if (!triggerEl) return;
-          const overflowParents = getOverflowAncestors(triggerEl);
-          const cleanups = overflowParents.map((overflowParent) => {
-            const onScroll = () => {
-              send({ type: "CLOSE", src: "scroll" });
-            };
-            return addDomEvent(overflowParent, "scroll", onScroll, { passive: true, capture: true });
+        "positioning.set": {
+          actions: ["reposition"]
+        }
+      }
+    }
+  },
+  implementations: {
+    guards: {
+      noVisibleTooltip: () => store.id === null,
+      isVisible: ({ prop }) => prop("id") === store.id,
+      isInteractive: ({ prop }) => !!prop("interactive"),
+      hasPointerMoveOpened: ({ context }) => context.get("hasPointerMoveOpened"),
+      isOpenControlled: ({ prop }) => prop("open") !== void 0
+    },
+    actions: {
+      setGlobalId: ({ prop }) => {
+        store.id = prop("id");
+      },
+      clearGlobalId: ({ prop }) => {
+        if (prop("id") === store.id) {
+          store.id = null;
+        }
+      },
+      invokeOnOpen: ({ prop }) => {
+        prop("onOpenChange")?.({ open: true });
+      },
+      invokeOnClose: ({ prop }) => {
+        prop("onOpenChange")?.({ open: false });
+      },
+      closeIfDisabled: ({ prop, send }) => {
+        if (!prop("disabled")) return;
+        send({ type: "close", src: "disabled.change" });
+      },
+      reposition: ({ context, event, prop, scope }) => {
+        if (event.type !== "positioning.set") return;
+        const getPositionerEl2 = () => getPositionerEl(scope);
+        return getPlacement(getTriggerEl(scope), getPositionerEl2, {
+          ...prop("positioning"),
+          ...event.options,
+          defer: true,
+          listeners: false,
+          onComplete(data) {
+            context.set("currentPlacement", data.placement);
+          }
+        });
+      },
+      toggleVisibility: ({ prop, event, send }) => {
+        queueMicrotask(() => {
+          send({
+            type: prop("open") ? "controlled.open" : "controlled.close",
+            previousEvent: event
           });
-          return () => {
-            cleanups.forEach((fn) => fn?.());
+        });
+      },
+      setPointerMoveOpened: ({ context }) => {
+        context.set("hasPointerMoveOpened", true);
+      },
+      clearPointerMoveOpened: ({ context }) => {
+        context.set("hasPointerMoveOpened", false);
+      }
+    },
+    effects: {
+      trackFocusVisible: ({ scope }) => {
+        return trackFocusVisible({ root: scope.getRootNode?.() });
+      },
+      trackPositioning: ({ flush, context, prop, scope }) => {
+        if (!context.get("currentPlacement")) {
+          const positioning = prop("positioning");
+          context.set("currentPlacement", positioning.placement);
+        }
+        const getPositionerEl2 = () => getPositionerEl(scope);
+        return getPlacement(getTriggerEl(scope), getPositionerEl2, {
+          ...prop("positioning"),
+          defer: true,
+          onComplete(data) {
+            flush(() => {
+              context.set("currentPlacement", data.placement);
+            });
+          }
+        });
+      },
+      trackPointerlockChange: ({ send, scope }) => {
+        const doc = scope.getDoc();
+        const onChange = () => send({ type: "close", src: "pointerlock:change" });
+        return addDomEvent(doc, "pointerlockchange", onChange, false);
+      },
+      trackScroll: ({ send, prop, scope }) => {
+        if (!prop("closeOnScroll")) return;
+        const triggerEl = getTriggerEl(scope);
+        if (!triggerEl) return;
+        const overflowParents = getOverflowAncestors(triggerEl);
+        const cleanups = overflowParents.map((overflowParent) => {
+          const onScroll = () => {
+            send({ type: "close", src: "scroll" });
           };
-        },
-        trackStore(ctx2, _evt, { send }) {
-          return subscribe(store, () => {
-            if (store.id !== ctx2.id) {
-              send({ type: "CLOSE", src: "id.change" });
-            }
+          return addDomEvent(overflowParent, "scroll", onScroll, {
+            passive: true,
+            capture: true
           });
-        },
-        trackEscapeKey(ctx2, _evt, { send }) {
-          if (!ctx2.closeOnEscape) return;
-          const onKeyDown = (event) => {
-            if (isComposingEvent(event)) return;
-            if (event.key !== "Escape") return;
-            event.stopPropagation();
-            send({ type: "CLOSE", src: "keydown.escape" });
-          };
-          return addDomEvent(dom.getDoc(ctx2), "keydown", onKeyDown, true);
-        }
+        });
+        return () => {
+          cleanups.forEach((fn) => fn?.());
+        };
       },
-      actions: {
-        setGlobalId(ctx2) {
-          store.setId(ctx2.id);
-        },
-        clearGlobalId(ctx2) {
-          if (ctx2.id === store.id) {
-            store.setId(null);
-          }
-        },
-        invokeOnOpen(ctx2) {
-          ctx2.onOpenChange?.({ open: true });
-        },
-        invokeOnClose(ctx2) {
-          ctx2.onOpenChange?.({ open: false });
-        },
-        closeIfDisabled(ctx2, _evt, { send }) {
-          if (!ctx2.disabled) return;
-          send({ type: "CLOSE", src: "disabled.change" });
-        },
-        reposition(ctx2, evt) {
-          const getPositionerEl = () => dom.getPositionerEl(ctx2);
-          getPlacement(dom.getTriggerEl(ctx2), getPositionerEl, {
-            ...ctx2.positioning,
-            ...evt.options,
-            defer: true,
-            listeners: false,
-            onComplete(data) {
-              ctx2.currentPlacement = data.placement;
+      trackStore: ({ prop, send }) => {
+        let cleanup;
+        queueMicrotask(() => {
+          cleanup = subscribe(store, () => {
+            if (store.id !== prop("id")) {
+              send({ type: "close", src: "id.change" });
             }
           });
-        },
-        toggleVisibility(ctx2, evt, { send }) {
-          queueMicrotask(() => {
-            send({ type: ctx2.open ? "CONTROLLED.OPEN" : "CONTROLLED.CLOSE", previousEvent: evt });
-          });
-        },
-        setPointerMoveOpened(ctx2) {
-          ctx2.hasPointerMoveOpened = true;
-        },
-        clearPointerMoveOpened(ctx2) {
-          ctx2.hasPointerMoveOpened = false;
-        }
+        });
+        return () => cleanup?.();
+      },
+      trackEscapeKey: ({ send, prop }) => {
+        if (!prop("closeOnEscape")) return;
+        const onKeyDown = (event) => {
+          if (isComposingEvent(event)) return;
+          if (event.key !== "Escape") return;
+          event.stopPropagation();
+          send({ type: "close", src: "keydown.escape" });
+        };
+        return addDomEvent(document, "keydown", onKeyDown, true);
       },
-      guards: {
-        noVisibleTooltip: () => store.id === null,
-        isVisible: (ctx2) => ctx2.id === store.id,
-        isInteractive: (ctx2) => ctx2.interactive,
-        hasPointerMoveOpened: (ctx2) => !!ctx2.hasPointerMoveOpened,
-        isOpenControlled: (ctx2) => !!ctx2["open.controlled"]
+      waitForOpenDelay: ({ send, prop }) => {
+        const id = setTimeout(() => {
+          send({ type: "after.openDelay" });
+        }, prop("openDelay"));
+        return () => clearTimeout(id);
       },
-      delays: {
-        OPEN_DELAY: (ctx2) => ctx2.openDelay,
-        CLOSE_DELAY: (ctx2) => ctx2.closeDelay
+      waitForCloseDelay: ({ send, prop }) => {
+        const id = setTimeout(() => {
+          send({ type: "after.closeDelay" });
+        }, prop("closeDelay"));
+        return () => clearTimeout(id);
       }
     }
-  );
-}
+  }
+});
 var props = createProps()([
   "aria-label",
   "closeDelay",
@@ -477,7 +504,7 @@ var props = createProps()([
   "ids",
   "interactive",
   "onOpenChange",
-  "open.controlled",
+  "defaultOpen",
   "open",
   "openDelay",
   "positioning"