@zag-js/toast 1.26.2 → 1.26.4

package/dist/index.d.mts

@@ -1,6 +1,7 @@
 import * as _zag_js_core from '@zag-js/core';
 import { EventObject, Machine, Service } from '@zag-js/core';
 import { DirectionProperty, CommonProperties, Required, Direction, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
+import { AnimationFrame } from '@zag-js/dom-query';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
 type Type = "success" | "error" | "loading" | "info" | (string & {});
@@ -188,6 +189,8 @@ type ToastGroupSchema = {
         dismissableCleanup?: VoidFunction | undefined;
         lastFocusedEl: HTMLElement | null;
         isFocusWithin: boolean;
+        isPointerWithin: boolean;
+        ignoreMouseTimer: AnimationFrame;
     };
     guard: string;
     effect: string;
@@ -353,7 +356,7 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
 
 declare function groupConnect<T extends PropTypes, O = any>(service: Service<ToastGroupSchema>, normalize: NormalizeProps<T>): ToastGroupApi<T, O>;
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "actionTrigger" | "closeTrigger">;
 
 declare function connect<T extends PropTypes, O>(service: Service<ToastSchema<O>>, normalize: NormalizeProps<T>): ToastApi<T, O>;
 

package/dist/index.d.ts

@@ -1,6 +1,7 @@
 import * as _zag_js_core from '@zag-js/core';
 import { EventObject, Machine, Service } from '@zag-js/core';
 import { DirectionProperty, CommonProperties, Required, Direction, RequiredBy, PropTypes, NormalizeProps } from '@zag-js/types';
+import { AnimationFrame } from '@zag-js/dom-query';
 import * as _zag_js_anatomy from '@zag-js/anatomy';
 
 type Type = "success" | "error" | "loading" | "info" | (string & {});
@@ -188,6 +189,8 @@ type ToastGroupSchema = {
         dismissableCleanup?: VoidFunction | undefined;
         lastFocusedEl: HTMLElement | null;
         isFocusWithin: boolean;
+        isPointerWithin: boolean;
+        ignoreMouseTimer: AnimationFrame;
     };
     guard: string;
     effect: string;
@@ -353,7 +356,7 @@ interface ToastApi<T extends PropTypes = PropTypes, O = any> {
 
 declare function groupConnect<T extends PropTypes, O = any>(service: Service<ToastGroupSchema>, normalize: NormalizeProps<T>): ToastGroupApi<T, O>;
 
-declare const anatomy: _zag_js_anatomy.AnatomyInstance<"title" | "description" | "group" | "root" | "actionTrigger" | "closeTrigger">;
+declare const anatomy: _zag_js_anatomy.AnatomyInstance<"group" | "title" | "root" | "description" | "actionTrigger" | "closeTrigger">;
 
 declare function connect<T extends PropTypes, O>(service: Service<ToastSchema<O>>, normalize: NormalizeProps<T>): ToastApi<T, O>;
 

package/dist/index.js

@@ -219,10 +219,16 @@ function groupConnect(service, normalize) {
         "aria-live": "polite",
         role: "region",
         style: getGroupPlacementStyle(service, placement),
+        onMouseEnter() {
+          if (refs.get("ignoreMouseTimer").isActive()) return;
+          send({ type: "REGION.POINTER_ENTER", placement });
+        },
         onMouseMove() {
+          if (refs.get("ignoreMouseTimer").isActive()) return;
           send({ type: "REGION.POINTER_ENTER", placement });
         },
         onMouseLeave() {
+          if (refs.get("ignoreMouseTimer").isActive()) return;
           send({ type: "REGION.POINTER_LEAVE", placement });
         },
         onFocus(event) {
@@ -241,7 +247,9 @@ function groupConnect(service, normalize) {
     }
   };
 }
-var groupMachine = core.createMachine({
+var { guards, createMachine } = core.setup();
+var { and } = guards;
+var groupMachine = createMachine({
   props({ props }) {
     return {
       dir: "ltr",
@@ -257,6 +265,8 @@ var groupMachine = core.createMachine({
     return {
       lastFocusedEl: null,
       isFocusWithin: false,
+      isPointerWithin: false,
+      ignoreMouseTimer: domQuery.AnimationFrame.create(),
       dismissableCleanup: void 0
     };
   },
@@ -286,24 +296,28 @@ var groupMachine = core.createMachine({
       });
     });
   },
-  exit: ["clearDismissableBranch", "clearLastFocusedEl"],
+  exit: ["clearDismissableBranch", "clearLastFocusedEl", "clearMouseEventTimer"],
   on: {
     "DOC.HOTKEY": {
       actions: ["focusRegionEl"]
     },
     "REGION.BLUR": [
       {
-        guard: "isOverlapping",
+        guard: and("isOverlapping", "isPointerOut"),
         target: "overlap",
-        actions: ["collapseToasts", "resumeToasts", "restoreLastFocusedEl"]
+        actions: ["collapseToasts", "resumeToasts", "restoreFocusIfPointerOut"]
       },
       {
+        guard: "isPointerOut",
         target: "stack",
-        actions: ["resumeToasts", "restoreLastFocusedEl"]
+        actions: ["resumeToasts", "restoreFocusIfPointerOut"]
+      },
+      {
+        actions: ["clearFocusWithin"]
       }
     ],
     "TOAST.REMOVE": {
-      actions: ["removeToast", "removeHeight"]
+      actions: ["removeToast", "removeHeight", "ignoreMouseEventsTemporarily"]
     },
     "TOAST.PAUSE": {
       actions: ["pauseToasts"]
@@ -316,10 +330,10 @@ var groupMachine = core.createMachine({
           {
             guard: "isOverlapping",
             target: "overlap",
-            actions: ["resumeToasts", "collapseToasts"]
+            actions: ["clearPointerWithin", "resumeToasts", "collapseToasts"]
           },
           {
-            actions: ["resumeToasts"]
+            actions: ["clearPointerWithin", "resumeToasts"]
           }
         ],
         "REGION.OVERLAP": {
@@ -330,7 +344,7 @@ var groupMachine = core.createMachine({
           actions: ["setLastFocusedEl", "pauseToasts"]
         },
         "REGION.POINTER_ENTER": {
-          actions: ["pauseToasts"]
+          actions: ["setPointerWithin", "pauseToasts"]
         }
       }
     },
@@ -342,7 +356,7 @@ var groupMachine = core.createMachine({
         },
         "REGION.POINTER_ENTER": {
           target: "stack",
-          actions: ["pauseToasts", "expandToasts"]
+          actions: ["setPointerWithin", "pauseToasts", "expandToasts"]
         },
         "REGION.FOCUS": {
           target: "stack",
@@ -353,7 +367,8 @@ var groupMachine = core.createMachine({
   },
   implementations: {
     guards: {
-      isOverlapping: ({ computed }) => computed("overlap")
+      isOverlapping: ({ computed }) => computed("overlap"),
+      isPointerOut: ({ refs }) => !refs.get("isPointerWithin")
     },
     effects: {
       subscribeToStore({ context, prop }) {
@@ -444,17 +459,36 @@ var groupMachine = core.createMachine({
         refs.set("isFocusWithin", true);
         refs.set("lastFocusedEl", event.target);
       },
-      restoreLastFocusedEl({ refs }) {
-        if (!refs.get("lastFocusedEl")) return;
+      restoreFocusIfPointerOut({ refs }) {
+        if (!refs.get("lastFocusedEl") || refs.get("isPointerWithin")) return;
         refs.get("lastFocusedEl")?.focus({ preventScroll: true });
         refs.set("lastFocusedEl", null);
         refs.set("isFocusWithin", false);
       },
+      setPointerWithin({ refs }) {
+        refs.set("isPointerWithin", true);
+      },
+      clearPointerWithin({ refs }) {
+        refs.set("isPointerWithin", false);
+        if (refs.get("lastFocusedEl") && !refs.get("isFocusWithin")) {
+          refs.get("lastFocusedEl")?.focus({ preventScroll: true });
+          refs.set("lastFocusedEl", null);
+        }
+      },
+      clearFocusWithin({ refs }) {
+        refs.set("isFocusWithin", false);
+      },
       clearLastFocusedEl({ refs }) {
         if (!refs.get("lastFocusedEl")) return;
         refs.get("lastFocusedEl")?.focus({ preventScroll: true });
         refs.set("lastFocusedEl", null);
         refs.set("isFocusWithin", false);
+      },
+      ignoreMouseEventsTemporarily({ refs }) {
+        refs.get("ignoreMouseTimer").request();
+      },
+      clearMouseEventTimer({ refs }) {
+        refs.get("ignoreMouseTimer").cancel();
       }
     }
   }

package/dist/index.mjs

@@ -1,6 +1,6 @@
-import { addDomEvent, raf, contains, dataAttr, MAX_Z_INDEX } from '@zag-js/dom-query';
+import { addDomEvent, AnimationFrame, raf, contains, dataAttr, MAX_Z_INDEX } from '@zag-js/dom-query';
 import { createAnatomy } from '@zag-js/anatomy';
-import { createMachine, createGuards } from '@zag-js/core';
+import { setup, createGuards, createMachine as createMachine$1 } from '@zag-js/core';
 import { trackDismissableBranch } from '@zag-js/dismissable';
 import { uuid, setRafTimeout, ensureProps, warn, runIfFn, compact } from '@zag-js/utils';
 
@@ -217,10 +217,16 @@ function groupConnect(service, normalize) {
         "aria-live": "polite",
         role: "region",
         style: getGroupPlacementStyle(service, placement),
+        onMouseEnter() {
+          if (refs.get("ignoreMouseTimer").isActive()) return;
+          send({ type: "REGION.POINTER_ENTER", placement });
+        },
         onMouseMove() {
+          if (refs.get("ignoreMouseTimer").isActive()) return;
           send({ type: "REGION.POINTER_ENTER", placement });
         },
         onMouseLeave() {
+          if (refs.get("ignoreMouseTimer").isActive()) return;
           send({ type: "REGION.POINTER_LEAVE", placement });
         },
         onFocus(event) {
@@ -239,6 +245,8 @@ function groupConnect(service, normalize) {
     }
   };
 }
+var { guards, createMachine } = setup();
+var { and } = guards;
 var groupMachine = createMachine({
   props({ props }) {
     return {
@@ -255,6 +263,8 @@ var groupMachine = createMachine({
     return {
       lastFocusedEl: null,
       isFocusWithin: false,
+      isPointerWithin: false,
+      ignoreMouseTimer: AnimationFrame.create(),
       dismissableCleanup: void 0
     };
   },
@@ -284,24 +294,28 @@ var groupMachine = createMachine({
       });
     });
   },
-  exit: ["clearDismissableBranch", "clearLastFocusedEl"],
+  exit: ["clearDismissableBranch", "clearLastFocusedEl", "clearMouseEventTimer"],
   on: {
     "DOC.HOTKEY": {
       actions: ["focusRegionEl"]
     },
     "REGION.BLUR": [
       {
-        guard: "isOverlapping",
+        guard: and("isOverlapping", "isPointerOut"),
         target: "overlap",
-        actions: ["collapseToasts", "resumeToasts", "restoreLastFocusedEl"]
+        actions: ["collapseToasts", "resumeToasts", "restoreFocusIfPointerOut"]
       },
       {
+        guard: "isPointerOut",
         target: "stack",
-        actions: ["resumeToasts", "restoreLastFocusedEl"]
+        actions: ["resumeToasts", "restoreFocusIfPointerOut"]
+      },
+      {
+        actions: ["clearFocusWithin"]
       }
     ],
     "TOAST.REMOVE": {
-      actions: ["removeToast", "removeHeight"]
+      actions: ["removeToast", "removeHeight", "ignoreMouseEventsTemporarily"]
     },
     "TOAST.PAUSE": {
       actions: ["pauseToasts"]
@@ -314,10 +328,10 @@ var groupMachine = createMachine({
           {
             guard: "isOverlapping",
             target: "overlap",
-            actions: ["resumeToasts", "collapseToasts"]
+            actions: ["clearPointerWithin", "resumeToasts", "collapseToasts"]
           },
           {
-            actions: ["resumeToasts"]
+            actions: ["clearPointerWithin", "resumeToasts"]
           }
         ],
         "REGION.OVERLAP": {
@@ -328,7 +342,7 @@ var groupMachine = createMachine({
           actions: ["setLastFocusedEl", "pauseToasts"]
         },
         "REGION.POINTER_ENTER": {
-          actions: ["pauseToasts"]
+          actions: ["setPointerWithin", "pauseToasts"]
         }
       }
     },
@@ -340,7 +354,7 @@ var groupMachine = createMachine({
         },
         "REGION.POINTER_ENTER": {
           target: "stack",
-          actions: ["pauseToasts", "expandToasts"]
+          actions: ["setPointerWithin", "pauseToasts", "expandToasts"]
         },
         "REGION.FOCUS": {
           target: "stack",
@@ -351,7 +365,8 @@ var groupMachine = createMachine({
   },
   implementations: {
     guards: {
-      isOverlapping: ({ computed }) => computed("overlap")
+      isOverlapping: ({ computed }) => computed("overlap"),
+      isPointerOut: ({ refs }) => !refs.get("isPointerWithin")
     },
     effects: {
       subscribeToStore({ context, prop }) {
@@ -442,17 +457,36 @@ var groupMachine = createMachine({
         refs.set("isFocusWithin", true);
         refs.set("lastFocusedEl", event.target);
       },
-      restoreLastFocusedEl({ refs }) {
-        if (!refs.get("lastFocusedEl")) return;
+      restoreFocusIfPointerOut({ refs }) {
+        if (!refs.get("lastFocusedEl") || refs.get("isPointerWithin")) return;
         refs.get("lastFocusedEl")?.focus({ preventScroll: true });
         refs.set("lastFocusedEl", null);
         refs.set("isFocusWithin", false);
       },
+      setPointerWithin({ refs }) {
+        refs.set("isPointerWithin", true);
+      },
+      clearPointerWithin({ refs }) {
+        refs.set("isPointerWithin", false);
+        if (refs.get("lastFocusedEl") && !refs.get("isFocusWithin")) {
+          refs.get("lastFocusedEl")?.focus({ preventScroll: true });
+          refs.set("lastFocusedEl", null);
+        }
+      },
+      clearFocusWithin({ refs }) {
+        refs.set("isFocusWithin", false);
+      },
       clearLastFocusedEl({ refs }) {
         if (!refs.get("lastFocusedEl")) return;
         refs.get("lastFocusedEl")?.focus({ preventScroll: true });
         refs.set("lastFocusedEl", null);
         refs.set("isFocusWithin", false);
+      },
+      ignoreMouseEventsTemporarily({ refs }) {
+        refs.get("ignoreMouseTimer").request();
+      },
+      clearMouseEventTimer({ refs }) {
+        refs.get("ignoreMouseTimer").cancel();
       }
     }
   }
@@ -570,7 +604,7 @@ function connect(service, normalize) {
   };
 }
 var { not } = createGuards();
-var machine = createMachine({
+var machine = createMachine$1({
   props({ props }) {
     ensureProps(props, ["id", "type", "parent", "removeDelay"], "toast");
     return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zag-js/toast",
-  "version": "1.26.2",
+  "version": "1.26.4",
   "description": "Core logic for the toast widget implemented as a state machine",
   "keywords": [
     "js",
@@ -26,12 +26,12 @@
     "url": "https://github.com/chakra-ui/zag/issues"
   },
   "dependencies": {
-    "@zag-js/anatomy": "1.26.2",
-    "@zag-js/core": "1.26.2",
-    "@zag-js/dom-query": "1.26.2",
-    "@zag-js/dismissable": "1.26.2",
-    "@zag-js/utils": "1.26.2",
-    "@zag-js/types": "1.26.2"
+    "@zag-js/anatomy": "1.26.4",
+    "@zag-js/core": "1.26.4",
+    "@zag-js/dom-query": "1.26.4",
+    "@zag-js/dismissable": "1.26.4",
+    "@zag-js/utils": "1.26.4",
+    "@zag-js/types": "1.26.4"
   },
   "devDependencies": {
     "clean-package": "2.2.0"