@react-aria/toast - npm Package Compare versions

Comparing version 3.0.0-nightly-50c7ada5d-241223 to 3.0.0-nightly-527c98a84-250305

dist/useToast.main.js

@@ -31,3 +31,3 @@ var $f49b2d6c91681304$exports = require("./intlStrings.main.js");
 function $ec537504faac71d2$export$a407b657d3044108(props, state, ref) {
-    let { key: key, timer: timer, timeout: timeout, animation: animation } = props.toast;
+    let { key: key, timer: timer, timeout: timeout } = props.toast;
     (0, $ijFUR$react.useEffect)(()=>{
@@ -43,11 +43,12 @@ if (timer == null || timeout == null) return;
     ]);
-    let [isEntered, setIsEntered] = (0, ($parcel$interopDefault($ijFUR$react))).useState(false);
-    (0, $ijFUR$react.useEffect)(()=>{
-        if (animation === 'entering' || animation === 'queued') setIsEntered(true);
-    }, [
-        animation
-    ]);
     let titleId = (0, $ijFUR$reactariautils.useId)();
     let descriptionId = (0, $ijFUR$reactariautils.useSlotId)();
     let stringFormatter = (0, $ijFUR$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($f49b2d6c91681304$exports))), '@react-aria/toast');
+    // This is required for NVDA announcements, without it NVDA will NOT announce the toast when it appears.
+    // Originally was tied to animationStart/End via https://github.com/adobe/react-spectrum/pull/6223/commits/e22e319df64958e822ab7cd9685e96818cae9ba5
+    // but toasts don't always have animations.
+    let [isVisible, setIsVisible] = (0, $ijFUR$react.useState)(false);
+    (0, $ijFUR$react.useEffect)(()=>{
+        setIsVisible(true);
+    }, []);
     return {
@@ -61,4 +62,2 @@ toastProps: {
             'aria-details': props['aria-details'],
-            // Hide toasts that are animating out so VoiceOver doesn't announce them.
-            'aria-hidden': animation === 'exiting' ? 'true' : undefined,
             tabIndex: 0
@@ -69,5 +68,3 @@ },
             'aria-atomic': 'true',
-            style: {
-                visibility: isEntered || animation === null ? 'visible' : 'hidden'
-            }
+            'aria-hidden': isVisible ? undefined : 'true'
         },
@@ -74,0 +71,0 @@ titleProps: {

dist/useToast.module.js

 import $7WpW4$intlStringsmodulejs from "./intlStrings.module.js";
-import $7WpW4$react, {useEffect as $7WpW4$useEffect} from "react";
+import {useEffect as $7WpW4$useEffect, useState as $7WpW4$useState} from "react";
 import {useId as $7WpW4$useId, useSlotId as $7WpW4$useSlotId} from "@react-aria/utils";
@@ -25,3 +25,3 @@ import {useLocalizedStringFormatter as $7WpW4$useLocalizedStringFormatter} from "@react-aria/i18n";
 function $d6542812f0669241$export$a407b657d3044108(props, state, ref) {
-    let { key: key, timer: timer, timeout: timeout, animation: animation } = props.toast;
+    let { key: key, timer: timer, timeout: timeout } = props.toast;
     (0, $7WpW4$useEffect)(()=>{
@@ -37,11 +37,12 @@ if (timer == null || timeout == null) return;
     ]);
-    let [isEntered, setIsEntered] = (0, $7WpW4$react).useState(false);
-    (0, $7WpW4$useEffect)(()=>{
-        if (animation === 'entering' || animation === 'queued') setIsEntered(true);
-    }, [
-        animation
-    ]);
     let titleId = (0, $7WpW4$useId)();
     let descriptionId = (0, $7WpW4$useSlotId)();
     let stringFormatter = (0, $7WpW4$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7WpW4$intlStringsmodulejs))), '@react-aria/toast');
+    // This is required for NVDA announcements, without it NVDA will NOT announce the toast when it appears.
+    // Originally was tied to animationStart/End via https://github.com/adobe/react-spectrum/pull/6223/commits/e22e319df64958e822ab7cd9685e96818cae9ba5
+    // but toasts don't always have animations.
+    let [isVisible, setIsVisible] = (0, $7WpW4$useState)(false);
+    (0, $7WpW4$useEffect)(()=>{
+        setIsVisible(true);
+    }, []);
     return {
@@ -55,4 +56,2 @@ toastProps: {
             'aria-details': props['aria-details'],
-            // Hide toasts that are animating out so VoiceOver doesn't announce them.
-            'aria-hidden': animation === 'exiting' ? 'true' : undefined,
             tabIndex: 0
@@ -63,5 +62,3 @@ },
             'aria-atomic': 'true',
-            style: {
-                visibility: isEntered || animation === null ? 'visible' : 'hidden'
-            }
+            'aria-hidden': isVisible ? undefined : 'true'
         },
@@ -68,0 +65,0 @@ titleProps: {

dist/useToastRegion.main.js

@@ -18,2 +18,13 @@ var $f49b2d6c91681304$exports = require("./intlStrings.main.js");
 $parcel$export(module.exports, "useToastRegion", () => $eda7c6204a682dd4$export$b8cbbb20a51697de);
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
@@ -24,3 +35,2 @@
 
-
 function $eda7c6204a682dd4$export$b8cbbb20a51697de(props, state, ref) {
@@ -34,10 +44,20 @@ let stringFormatter = (0, $eO7VF$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($f49b2d6c91681304$exports))), '@react-aria/toast');
     }, ref);
+    let isHovered = (0, $eO7VF$react.useRef)(false);
+    let isFocused = (0, $eO7VF$react.useRef)(false);
+    let updateTimers = (0, $eO7VF$reactariautils.useEffectEvent)(()=>{
+        if (isHovered.current || isFocused.current) state.pauseAll();
+        else state.resumeAll();
+    });
     let { hoverProps: hoverProps } = (0, $eO7VF$reactariainteractions.useHover)({
-        onHoverStart: state.pauseAll,
-        onHoverEnd: state.resumeAll
+        onHoverStart: ()=>{
+            isHovered.current = true;
+            updateTimers();
+        },
+        onHoverEnd: ()=>{
+            isHovered.current = false;
+            updateTimers();
+        }
     });
     // Manage focus within the toast region.
     // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.
-    // We might be making an assumption with how this works if someone implements the priority queue differently, or
-    // if they only show one toast at a time.
     let toasts = (0, $eO7VF$react.useRef)([]);
@@ -67,24 +87,30 @@ let prevVisibleToasts = (0, $eO7VF$react.useRef)(state.visibleToasts);
             }));
-        let removedFocusedToastIndex = allToasts.findIndex((t)=>t.i === focusedToast.current);
+        let removedFocusedToastIndex = allToasts.findIndex((t)=>t.i === focusedToast.current && t.isRemoved);
         // If the focused toast was removed, focus the next or previous toast.
         if (removedFocusedToastIndex > -1) {
-            let i = 0;
-            let nextToast;
-            let prevToast;
-            while(i <= removedFocusedToastIndex){
-                if (!allToasts[i].isRemoved) prevToast = Math.max(0, i - 1);
-                i++;
-            }
-            while(i < allToasts.length){
-                if (!allToasts[i].isRemoved) {
-                    nextToast = i - 1;
-                    break;
+            var _lastFocused_current;
+            // In pointer modality, move focus out of the toast region.
+            // Otherwise auto-dismiss timers will appear "stuck".
+            if ((0, $eO7VF$reactariainteractions.getInteractionModality)() === 'pointer' && ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected)) (0, $eO7VF$reactariautils.focusWithoutScrolling)(lastFocused.current);
+            else {
+                let i = 0;
+                let nextToast;
+                let prevToast;
+                while(i <= removedFocusedToastIndex){
+                    if (!allToasts[i].isRemoved) prevToast = Math.max(0, i - 1);
+                    i++;
                 }
-                i++;
+                while(i < allToasts.length){
+                    if (!allToasts[i].isRemoved) {
+                        nextToast = i - 1;
+                        break;
+                    }
+                    i++;
+                }
+                // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
+                if (prevToast === undefined && nextToast === undefined) prevToast = 0;
+                // prioritize going to newer toasts
+                if (prevToast >= 0 && prevToast < toasts.current.length) (0, $eO7VF$reactariautils.focusWithoutScrolling)(toasts.current[prevToast]);
+                else if (nextToast >= 0 && nextToast < toasts.current.length) (0, $eO7VF$reactariautils.focusWithoutScrolling)(toasts.current[nextToast]);
             }
-            // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
-            if (prevToast === undefined && nextToast === undefined) prevToast = 0;
-            // prioritize going to newer toasts
-            if (prevToast >= 0 && prevToast < toasts.current.length) (0, $eO7VF$reactariautils.focusWithoutScrolling)(toasts.current[prevToast]);
-            else if (nextToast >= 0 && nextToast < toasts.current.length) (0, $eO7VF$reactariautils.focusWithoutScrolling)(toasts.current[nextToast]);
         }
@@ -94,3 +120,4 @@ prevVisibleToasts.current = state.visibleToasts;
         state.visibleToasts,
-        ref
+        ref,
+        updateTimers
     ]);
@@ -100,8 +127,10 @@ let lastFocused = (0, $eO7VF$react.useRef)(null);
         onFocusWithin: (e)=>{
-            state.pauseAll();
+            isFocused.current = true;
             lastFocused.current = e.relatedTarget;
+            updateTimers();
         },
         onBlurWithin: ()=>{
-            state.resumeAll();
+            isFocused.current = false;
             lastFocused.current = null;
+            updateTimers();
         }
@@ -115,3 +144,4 @@ });
     (0, $eO7VF$react.useEffect)(()=>{
-        if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+        var _lastFocused_current;
+        if (state.visibleToasts.length === 0 && ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected)) {
             if ((0, $eO7VF$reactariainteractions.getInteractionModality)() === 'pointer') (0, $eO7VF$reactariautils.focusWithoutScrolling)(lastFocused.current);
@@ -127,3 +157,4 @@ else lastFocused.current.focus();
         return ()=>{
-            if (lastFocused.current && document.body.contains(lastFocused.current)) {
+            var _lastFocused_current;
+            if ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected) {
                 if ((0, $eO7VF$reactariainteractions.getInteractionModality)() === 'pointer') (0, $eO7VF$reactariautils.focusWithoutScrolling)(lastFocused.current);
@@ -130,0 +161,0 @@ else lastFocused.current.focus();

dist/useToastRegion.module.js

 import $ckyCP$intlStringsmodulejs from "./intlStrings.module.js";
-import {useLayoutEffect as $ckyCP$useLayoutEffect, focusWithoutScrolling as $ckyCP$focusWithoutScrolling, mergeProps as $ckyCP$mergeProps} from "@react-aria/utils";
-import {useHover as $ckyCP$useHover, useFocusWithin as $ckyCP$useFocusWithin, getInteractionModality as $ckyCP$getInteractionModality} from "@react-aria/interactions";
+import {useEffectEvent as $ckyCP$useEffectEvent, useLayoutEffect as $ckyCP$useLayoutEffect, focusWithoutScrolling as $ckyCP$focusWithoutScrolling, mergeProps as $ckyCP$mergeProps} from "@react-aria/utils";
+import {useHover as $ckyCP$useHover, getInteractionModality as $ckyCP$getInteractionModality, useFocusWithin as $ckyCP$useFocusWithin} from "@react-aria/interactions";
 import {useRef as $ckyCP$useRef, useEffect as $ckyCP$useEffect} from "react";
@@ -12,2 +12,13 @@ import {useLandmark as $ckyCP$useLandmark} from "@react-aria/landmark";
 }
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */ 
 
@@ -18,3 +29,2 @@
 
-
 function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
@@ -28,10 +38,20 @@ let stringFormatter = (0, $ckyCP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($ckyCP$intlStringsmodulejs))), '@react-aria/toast');
     }, ref);
+    let isHovered = (0, $ckyCP$useRef)(false);
+    let isFocused = (0, $ckyCP$useRef)(false);
+    let updateTimers = (0, $ckyCP$useEffectEvent)(()=>{
+        if (isHovered.current || isFocused.current) state.pauseAll();
+        else state.resumeAll();
+    });
     let { hoverProps: hoverProps } = (0, $ckyCP$useHover)({
-        onHoverStart: state.pauseAll,
-        onHoverEnd: state.resumeAll
+        onHoverStart: ()=>{
+            isHovered.current = true;
+            updateTimers();
+        },
+        onHoverEnd: ()=>{
+            isHovered.current = false;
+            updateTimers();
+        }
     });
     // Manage focus within the toast region.
     // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.
-    // We might be making an assumption with how this works if someone implements the priority queue differently, or
-    // if they only show one toast at a time.
     let toasts = (0, $ckyCP$useRef)([]);
@@ -61,24 +81,30 @@ let prevVisibleToasts = (0, $ckyCP$useRef)(state.visibleToasts);
             }));
-        let removedFocusedToastIndex = allToasts.findIndex((t)=>t.i === focusedToast.current);
+        let removedFocusedToastIndex = allToasts.findIndex((t)=>t.i === focusedToast.current && t.isRemoved);
         // If the focused toast was removed, focus the next or previous toast.
         if (removedFocusedToastIndex > -1) {
-            let i = 0;
-            let nextToast;
-            let prevToast;
-            while(i <= removedFocusedToastIndex){
-                if (!allToasts[i].isRemoved) prevToast = Math.max(0, i - 1);
-                i++;
-            }
-            while(i < allToasts.length){
-                if (!allToasts[i].isRemoved) {
-                    nextToast = i - 1;
-                    break;
+            var _lastFocused_current;
+            // In pointer modality, move focus out of the toast region.
+            // Otherwise auto-dismiss timers will appear "stuck".
+            if ((0, $ckyCP$getInteractionModality)() === 'pointer' && ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected)) (0, $ckyCP$focusWithoutScrolling)(lastFocused.current);
+            else {
+                let i = 0;
+                let nextToast;
+                let prevToast;
+                while(i <= removedFocusedToastIndex){
+                    if (!allToasts[i].isRemoved) prevToast = Math.max(0, i - 1);
+                    i++;
                 }
-                i++;
+                while(i < allToasts.length){
+                    if (!allToasts[i].isRemoved) {
+                        nextToast = i - 1;
+                        break;
+                    }
+                    i++;
+                }
+                // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
+                if (prevToast === undefined && nextToast === undefined) prevToast = 0;
+                // prioritize going to newer toasts
+                if (prevToast >= 0 && prevToast < toasts.current.length) (0, $ckyCP$focusWithoutScrolling)(toasts.current[prevToast]);
+                else if (nextToast >= 0 && nextToast < toasts.current.length) (0, $ckyCP$focusWithoutScrolling)(toasts.current[nextToast]);
             }
-            // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
-            if (prevToast === undefined && nextToast === undefined) prevToast = 0;
-            // prioritize going to newer toasts
-            if (prevToast >= 0 && prevToast < toasts.current.length) (0, $ckyCP$focusWithoutScrolling)(toasts.current[prevToast]);
-            else if (nextToast >= 0 && nextToast < toasts.current.length) (0, $ckyCP$focusWithoutScrolling)(toasts.current[nextToast]);
         }
@@ -88,3 +114,4 @@ prevVisibleToasts.current = state.visibleToasts;
         state.visibleToasts,
-        ref
+        ref,
+        updateTimers
     ]);
@@ -94,8 +121,10 @@ let lastFocused = (0, $ckyCP$useRef)(null);
         onFocusWithin: (e)=>{
-            state.pauseAll();
+            isFocused.current = true;
             lastFocused.current = e.relatedTarget;
+            updateTimers();
         },
         onBlurWithin: ()=>{
-            state.resumeAll();
+            isFocused.current = false;
             lastFocused.current = null;
+            updateTimers();
         }
@@ -109,3 +138,4 @@ });
     (0, $ckyCP$useEffect)(()=>{
-        if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+        var _lastFocused_current;
+        if (state.visibleToasts.length === 0 && ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected)) {
             if ((0, $ckyCP$getInteractionModality)() === 'pointer') (0, $ckyCP$focusWithoutScrolling)(lastFocused.current);
@@ -121,3 +151,4 @@ else lastFocused.current.focus();
         return ()=>{
-            if (lastFocused.current && document.body.contains(lastFocused.current)) {
+            var _lastFocused_current;
+            if ((_lastFocused_current = lastFocused.current) === null || _lastFocused_current === void 0 ? void 0 : _lastFocused_current.isConnected) {
                 if ((0, $ckyCP$getInteractionModality)() === 'pointer') (0, $ckyCP$focusWithoutScrolling)(lastFocused.current);
@@ -124,0 +155,0 @@ else lastFocused.current.focus();

package.json

 {
   "name": "@react-aria/toast",
-  "version": "3.0.0-nightly-50c7ada5d-241223",
+  "version": "3.0.0-nightly-527c98a84-250305",
   "description": "Spectrum UI components in React",
@@ -25,13 +25,14 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/i18n": "3.0.0-nightly-50c7ada5d-241223",
-    "@react-aria/interactions": "3.0.0-nightly-50c7ada5d-241223",
-    "@react-aria/landmark": "3.0.0-nightly-50c7ada5d-241223",
-    "@react-aria/utils": "3.0.0-nightly-50c7ada5d-241223",
-    "@react-stately/toast": "3.0.0-nightly-50c7ada5d-241223",
-    "@react-types/button": "3.0.0-nightly-50c7ada5d-241223",
-    "@react-types/shared": "3.0.0-nightly-50c7ada5d-241223",
+    "@react-aria/i18n": "3.0.0-nightly-527c98a84-250305",
+    "@react-aria/interactions": "3.0.0-nightly-527c98a84-250305",
+    "@react-aria/landmark": "3.0.0-nightly-527c98a84-250305",
+    "@react-aria/utils": "3.0.0-nightly-527c98a84-250305",
+    "@react-stately/toast": "3.0.0-nightly-527c98a84-250305",
+    "@react-types/button": "3.0.0-nightly-527c98a84-250305",
+    "@react-types/shared": "3.0.0-nightly-527c98a84-250305",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+    "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
   },
@@ -38,0 +39,0 @@ "publishConfig": {

src/useToast.ts

@@ -18,3 +18,3 @@ /*
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import React, {useEffect} from 'react';
+import {useEffect, useState} from 'react';
 import {useId, useSlotId} from '@react-aria/utils';
@@ -50,4 +50,3 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
     timer,
-    timeout,
-    animation
+    timeout
   } = props.toast;
@@ -66,9 +65,2 @@
 
-  let [isEntered, setIsEntered] = React.useState(false);
-  useEffect(() => {
-    if (animation === 'entering' || animation === 'queued') {
-      setIsEntered(true);
-    }
-  }, [animation]);
-
   let titleId = useId();
@@ -78,2 +70,10 @@ let descriptionId = useSlotId();
 
+  // This is required for NVDA announcements, without it NVDA will NOT announce the toast when it appears.
+  // Originally was tied to animationStart/End via https://github.com/adobe/react-spectrum/pull/6223/commits/e22e319df64958e822ab7cd9685e96818cae9ba5
+  // but toasts don't always have animations.
+  let [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    setIsVisible(true);
+  }, []);
+
   return {
@@ -87,4 +87,2 @@ toastProps: {
       'aria-details': props['aria-details'],
-      // Hide toasts that are animating out so VoiceOver doesn't announce them.
-      'aria-hidden': animation === 'exiting' ? 'true' : undefined,
       tabIndex: 0
@@ -95,5 +93,3 @@ },
       'aria-atomic': 'true',
-      style: {
-        visibility: isEntered || animation === null ? 'visible' : 'hidden'
-      }
+      'aria-hidden': isVisible ? undefined : 'true'
     },
@@ -100,0 +96,0 @@ titleProps: {

src/useToastRegion.ts

@@ -0,3 +1,15 @@
+/*
+ * Copyright 2025 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
 import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
-import {focusWithoutScrolling, mergeProps, useLayoutEffect} from '@react-aria/utils';
+import {focusWithoutScrolling, mergeProps, useEffectEvent, useLayoutEffect} from '@react-aria/utils';
 import {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';
@@ -35,5 +47,21 @@ // @ts-ignore
 
+  let isHovered = useRef(false);
+  let isFocused = useRef(false);
+  let updateTimers = useEffectEvent(() => {
+    if (isHovered.current || isFocused.current) {
+      state.pauseAll();
+    } else {
+      state.resumeAll();
+    }
+  });
+
   let {hoverProps} = useHover({
-    onHoverStart: state.pauseAll,
-    onHoverEnd: state.resumeAll
+    onHoverStart: () => {
+      isHovered.current = true;
+      updateTimers();
+    },
+    onHoverEnd: () => {
+      isHovered.current = false;
+      updateTimers();
+    }
   });
@@ -43,4 +71,2 @@
   // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.
-  // We might be making an assumption with how this works if someone implements the priority queue differently, or
-  // if they only show one toast at a time.
   let toasts = useRef<FocusableElement[]>([]);
@@ -71,33 +97,39 @@ let prevVisibleToasts = useRef(state.visibleToasts);
 
-    let removedFocusedToastIndex = allToasts.findIndex(t => t.i === focusedToast.current);
+    let removedFocusedToastIndex = allToasts.findIndex(t => t.i === focusedToast.current && t.isRemoved);
 
     // If the focused toast was removed, focus the next or previous toast.
     if (removedFocusedToastIndex > -1) {
-      let i = 0;
-      let nextToast;
-      let prevToast;
-      while (i <= removedFocusedToastIndex) {
-        if (!allToasts[i].isRemoved) {
-          prevToast = Math.max(0, i - 1);
+      // In pointer modality, move focus out of the toast region.
+      // Otherwise auto-dismiss timers will appear "stuck".
+      if (getInteractionModality() === 'pointer' && lastFocused.current?.isConnected) {
+        focusWithoutScrolling(lastFocused.current);
+      } else {
+        let i = 0;
+        let nextToast;
+        let prevToast;
+        while (i <= removedFocusedToastIndex) {
+          if (!allToasts[i].isRemoved) {
+            prevToast = Math.max(0, i - 1);
+          }
+          i++;
         }
-        i++;
-      }
-      while (i < allToasts.length) {
-        if (!allToasts[i].isRemoved) {
-          nextToast = i - 1;
-          break;
+        while (i < allToasts.length) {
+          if (!allToasts[i].isRemoved) {
+            nextToast = i - 1;
+            break;
+          }
+          i++;
         }
-        i++;
-      }
 
-      // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
-      if (prevToast === undefined && nextToast === undefined) {
-        prevToast = 0;
-      }
+        // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0
+        if (prevToast === undefined && nextToast === undefined) {
+          prevToast = 0;
+        }
 
-      // prioritize going to newer toasts
-      if (prevToast >= 0 && prevToast < toasts.current.length) {
-        focusWithoutScrolling(toasts.current[prevToast]);
-      } else if (nextToast >= 0 && nextToast < toasts.current.length) {
-        focusWithoutScrolling(toasts.current[nextToast]);
+        // prioritize going to newer toasts
+        if (prevToast >= 0 && prevToast < toasts.current.length) {
+          focusWithoutScrolling(toasts.current[prevToast]);
+        } else if (nextToast >= 0 && nextToast < toasts.current.length) {
+          focusWithoutScrolling(toasts.current[nextToast]);
+        }
       }
@@ -107,3 +139,3 @@ }
     prevVisibleToasts.current = state.visibleToasts;
-  }, [state.visibleToasts, ref]);
+  }, [state.visibleToasts, ref, updateTimers]);
 
@@ -113,8 +145,10 @@ let lastFocused = useRef<FocusableElement | null>(null);
     onFocusWithin: (e) => {
-      state.pauseAll();
+      isFocused.current = true;
       lastFocused.current = e.relatedTarget as FocusableElement;
+      updateTimers();
     },
     onBlurWithin: () => {
-      state.resumeAll();
+      isFocused.current = false;
       lastFocused.current = null;
+      updateTimers();
     }
@@ -129,3 +163,3 @@ });
   useEffect(() => {
-    if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+    if (state.visibleToasts.length === 0 && lastFocused.current?.isConnected) {
       if (getInteractionModality() === 'pointer') {
@@ -142,3 +176,3 @@ focusWithoutScrolling(lastFocused.current);
     return () => {
-      if (lastFocused.current && document.body.contains(lastFocused.current)) {
+      if (lastFocused.current?.isConnected) {
         if (getInteractionModality() === 'pointer') {
@@ -145,0 +179,0 @@ focusWithoutScrolling(lastFocused.current);

No alert changes

Improved metrics

Total package byte prevSize

183623

5.54%

Lines of code

2287

5.34%

Worsened metrics

Dependency count

10

11.11%

Dependency changes

• + Added

  @internationalized/date@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @internationalized/message@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @internationalized/number@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @internationalized/string@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-aria/i18n@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-aria/interactions@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-aria/landmark@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-aria/ssr@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-aria/utils@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-stately/flags@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-stately/toast@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-stately/utils@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-types/button@3.0.0-nightly-527c98a84-250305
  (transitive)

• + Added

  @react-types/shared@3.0.0-nightly-527c98a84-250305
  (transitive)

• - Removed

  @internationalized/date@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @internationalized/message@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @internationalized/number@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @internationalized/string@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-aria/i18n@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-aria/interactions@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-aria/landmark@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-aria/ssr@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-aria/utils@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-stately/toast@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-stately/utils@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-types/button@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• - Removed

  @react-types/shared@3.0.0-nightly-50c7ada5d-241223
  (transitive)

• Updated

  @react-aria/i18n@3.0.0-nightly-527c98a84-250305

• Updated

  @react-aria/interactions@3.0.0-nightly-527c98a84-250305

• Updated

  @react-aria/landmark@3.0.0-nightly-527c98a84-250305

• Updated

  @react-aria/utils@3.0.0-nightly-527c98a84-250305

• Updated

  @react-stately/toast@3.0.0-nightly-527c98a84-250305

• Updated

  @react-types/button@3.0.0-nightly-527c98a84-250305

• Updated

  @react-types/shared@3.0.0-nightly-527c98a84-250305