@react-aria/toast - npm Package Compare versions

Comparing version 3.0.0-nightly-987f174ba-241015 to 3.0.0-nightly-988096cf3-250215

dist/useToast.main.js

@@ -31,5 +31,5 @@ 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)(()=>{
-        if (!timer) return;
+        if (timer == null || timeout == null) return;
         timer.reset(timeout);
@@ -43,8 +43,2 @@ 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)();
@@ -61,4 +55,2 @@ let descriptionId = (0, $ijFUR$reactariautils.useSlotId)();
             '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
@@ -68,6 +60,3 @@ },
             role: 'alert',
-            'aria-atomic': 'true',
-            style: {
-                visibility: isEntered || animation === null ? 'visible' : 'hidden'
-            }
+            'aria-atomic': 'true'
         },
@@ -74,0 +63,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} from "react";
 import {useId as $7WpW4$useId, useSlotId as $7WpW4$useSlotId} from "@react-aria/utils";
@@ -25,5 +25,5 @@ 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)(()=>{
-        if (!timer) return;
+        if (timer == null || timeout == null) return;
         timer.reset(timeout);
@@ -37,8 +37,2 @@ 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)();
@@ -55,4 +49,2 @@ let descriptionId = (0, $7WpW4$useSlotId)();
             '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
@@ -62,6 +54,3 @@ },
             role: 'alert',
-            'aria-atomic': 'true',
-            style: {
-                visibility: isEntered || animation === null ? 'visible' : 'hidden'
-            }
+            'aria-atomic': 'true'
         },
@@ -68,0 +57,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) {
@@ -47,3 +57,3 @@ let stringFormatter = (0, $eO7VF$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($f49b2d6c91681304$exports))), '@react-aria/toast');
         // If no toast has focus, then don't do anything.
-        if (focusedToast.current === -1 || state.visibleToasts.length === 0) {
+        if (focusedToast.current === -1 || state.visibleToasts.length === 0 || !ref.current) {
             toasts.current = [];
@@ -50,0 +60,0 @@ prevVisibleToasts.current = state.visibleToasts;

dist/useToastRegion.module.js

@@ -12,2 +12,13 @@ import $ckyCP$intlStringsmodulejs from "./intlStrings.module.js";
 }
+/*
+ * 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) {
@@ -41,3 +51,3 @@ let stringFormatter = (0, $ckyCP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($ckyCP$intlStringsmodulejs))), '@react-aria/toast');
         // If no toast has focus, then don't do anything.
-        if (focusedToast.current === -1 || state.visibleToasts.length === 0) {
+        if (focusedToast.current === -1 || state.visibleToasts.length === 0 || !ref.current) {
             toasts.current = [];
@@ -44,0 +54,0 @@ prevVisibleToasts.current = state.visibleToasts;

package.json

 {
   "name": "@react-aria/toast",
-  "version": "3.0.0-nightly-987f174ba-241015",
+  "version": "3.0.0-nightly-988096cf3-250215",
   "description": "Spectrum UI components in React",
@@ -25,18 +25,18 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/i18n": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/interactions": "^3.0.0-nightly-987f174ba-241015",
-    "@react-aria/landmark": "3.0.0-nightly-987f174ba-241015",
-    "@react-aria/utils": "^3.0.0-nightly-987f174ba-241015",
-    "@react-stately/toast": "3.0.0-nightly-987f174ba-241015",
-    "@react-types/button": "^3.0.0-nightly-987f174ba-241015",
-    "@react-types/shared": "^3.0.0-nightly-987f174ba-241015",
+    "@react-aria/i18n": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/interactions": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/landmark": "3.0.0-nightly-988096cf3-250215",
+    "@react-aria/utils": "3.0.0-nightly-988096cf3-250215",
+    "@react-stately/toast": "3.0.0-nightly-988096cf3-250215",
+    "@react-types/button": "3.0.0-nightly-988096cf3-250215",
+    "@react-types/shared": "3.0.0-nightly-988096cf3-250215",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+    "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"
   },
   "publishConfig": {
     "access": "public"
-  },
-  "stableVersion": "3.0.0-beta.17"
+  }
 }

src/useToast.ts

@@ -18,3 +18,3 @@ /*
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import React, {useEffect} from 'react';
+import {useEffect} from 'react';
 import {useId, useSlotId} from '@react-aria/utils';
@@ -50,8 +50,7 @@ import {useLocalizedStringFormatter} from '@react-aria/i18n';
     timer,
-    timeout,
-    animation
+    timeout
   } = props.toast;
 
   useEffect(() => {
-    if (!timer) {
+    if (timer == null || timeout == null) {
       return;
@@ -66,9 +65,2 @@ }
 
-  let [isEntered, setIsEntered] = React.useState(false);
-  useEffect(() => {
-    if (animation === 'entering' || animation === 'queued') {
-      setIsEntered(true);
-    }
-  }, [animation]);
-
   let titleId = useId();
@@ -86,4 +78,2 @@ let descriptionId = useSlotId();
       '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
@@ -93,6 +83,3 @@ },
       role: 'alert',
-      'aria-atomic': 'true',
-      style: {
-        visibility: isEntered || animation === null ? 'visible' : 'hidden'
-      }
+      'aria-atomic': 'true'
     },
@@ -99,0 +86,0 @@ titleProps: {

src/useToastRegion.ts

@@ -1,2 +0,14 @@
-import {AriaLabelingProps, DOMAttributes, RefObject} from '@react-types/shared';
+/*
+ * 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';
@@ -44,8 +56,8 @@ import {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';
   // if they only show one toast at a time.
-  let toasts = useRef([]);
+  let toasts = useRef<FocusableElement[]>([]);
   let prevVisibleToasts = useRef(state.visibleToasts);
-  let focusedToast = useRef(null);
+  let focusedToast = useRef<number | null>(null);
   useLayoutEffect(() => {
     // If no toast has focus, then don't do anything.
-    if (focusedToast.current === -1 || state.visibleToasts.length === 0) {
+    if (focusedToast.current === -1 || state.visibleToasts.length === 0 || !ref.current) {
       toasts.current = [];
@@ -55,3 +67,3 @@ prevVisibleToasts.current = state.visibleToasts;
     }
-    toasts.current = [...ref.current.querySelectorAll('[role="alertdialog"]')];
+    toasts.current = [...ref.current.querySelectorAll('[role="alertdialog"]')] as FocusableElement[];
     // If the visible toasts haven't changed, we don't need to do anything.
@@ -108,7 +120,7 @@ if (prevVisibleToasts.current.length === state.visibleToasts.length
 
-  let lastFocused = useRef(null);
+  let lastFocused = useRef<FocusableElement | null>(null);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithin: (e) => {
       state.pauseAll();
-      lastFocused.current = e.relatedTarget;
+      lastFocused.current = e.relatedTarget as FocusableElement;
     },
@@ -115,0 +127,0 @@ onBlurWithin: () => {

No alert changes

Worsened metrics

Total package byte prevSize

174342

decreased by-0.04%

Dependency count

10

increased by11.11%

Lines of code

2170

decreased by-0.05%

Dependency changes

• + Added@internationalized/date@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@internationalized/message@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@internationalized/number@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@internationalized/string@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/i18n@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/interactions@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/landmark@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/ssr@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-aria/utils@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/flags@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/toast@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-stately/utils@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/button@3.0.0-nightly-988096cf3-250215(transitive)

• + Added@react-types/shared@3.0.0-nightly-988096cf3-250215(transitive)

• - Removed@internationalized/date@3.7.0(transitive)

• - Removed@internationalized/message@3.1.6(transitive)

• - Removed@internationalized/number@3.6.0(transitive)

• - Removed@internationalized/string@3.2.5(transitive)

• - Removed@react-aria/i18n@3.12.5(transitive)

• - Removed@react-aria/interactions@3.23.0(transitive)

• - Removed@react-aria/landmark@3.0.0-nightly-987f174ba-241015(transitive)

• - Removed@react-aria/ssr@3.9.7(transitive)

• - Removed@react-aria/utils@3.27.0(transitive)

• - Removed@react-stately/toast@3.0.0-nightly-987f174ba-241015(transitive)

• - Removed@react-stately/utils@3.10.5(transitive)

• - Removed@react-types/button@3.10.2(transitive)

• - Removed@react-types/shared@3.27.0(transitive)

• Updated@react-aria/i18n@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/interactions@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/landmark@3.0.0-nightly-988096cf3-250215

• Updated@react-aria/utils@3.0.0-nightly-988096cf3-250215

• Updated@react-stately/toast@3.0.0-nightly-988096cf3-250215

• Updated@react-types/button@3.0.0-nightly-988096cf3-250215

• Updated@react-types/shared@3.0.0-nightly-988096cf3-250215