@react-aria/toast 3.0.0-beta.12 → 3.0.0-beta.13

package/dist/zh-TW.module.js

@@ -1,7 +1,10 @@
 var $52e8b1b00094e5a3$exports = {};
 $52e8b1b00094e5a3$exports = {
     "close": `\u{95DC}\u{9589}`,
-    "notifications": `\u{901A}\u{77E5}`
+    "notifications": (args, formatter)=>`${formatter.plural(args.count, {
+            one: ()=>`${formatter.number(args.count)} \u{500B}\u{901A}\u{77E5}`,
+            other: ()=>`${formatter.number(args.count)} \u{500B}\u{901A}\u{77E5}`
+        })}\u{3002}`
 };
 
 

package/dist/zh-TW.module.js.map

@@ -1 +1 @@
-{"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,gBAAE,CAAC;IAC/B,iBAAiB,CAAC,gBAAE,CAAC;AACvB","sources":["packages/@react-aria/toast/intl/zh-TW.json"],"sourcesContent":["{\n  \"close\": \"關閉\",\n  \"notifications\": \"通知\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}
+{"mappings":";AAAA,4BAAiB;IAAG,SAAS,CAAC,gBAAE,CAAC;IAC/B,iBAAiB,CAAC,MAAM,YAAc,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE;YAAC,KAAK,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yBAAI,CAAC;YAAE,OAAO,IAAM,CAAC,EAAE,UAAU,MAAM,CAAC,KAAK,KAAK,EAAE,yBAAI,CAAC;QAAA,GAAG,QAAC,CAAC;AAClL","sources":["packages/@react-aria/toast/intl/zh-TW.json"],"sourcesContent":["{\n  \"close\": \"關閉\",\n  \"notifications\": \"{count, plural, one {# 個通知} other {# 個通知}}。\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/toast",
-  "version": "3.0.0-beta.12",
+  "version": "3.0.0-beta.13",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,20 +22,20 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/i18n": "^3.11.1",
-    "@react-aria/interactions": "^3.21.3",
-    "@react-aria/landmark": "3.0.0-beta.12",
-    "@react-aria/utils": "^3.24.1",
-    "@react-stately/toast": "3.0.0-beta.4",
-    "@react-types/button": "^3.9.4",
-    "@react-types/shared": "^3.23.1",
+    "@react-aria/i18n": "^3.12.0",
+    "@react-aria/interactions": "^3.22.0",
+    "@react-aria/landmark": "3.0.0-beta.13",
+    "@react-aria/utils": "^3.25.0",
+    "@react-stately/toast": "3.0.0-beta.5",
+    "@react-types/button": "^3.9.5",
+    "@react-types/shared": "^3.24.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "b77d7d594dff4dcfb5359bffbcfd18142b146433"
+  "gitHead": "86d80e3216bc32e75108831cf3a5a720bc849206"
 }

package/src/useToast.ts

@@ -11,12 +11,12 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {AriaLabelingProps, DOMAttributes, FocusableElement} from '@react-types/shared';
+import {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import {RefObject, useEffect, useRef} from 'react';
-import {useId, useLayoutEffect, useSlotId} from '@react-aria/utils';
+import React, {useEffect} from 'react';
+import {useId, useSlotId} from '@react-aria/utils';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
 export interface AriaToastProps<T> extends AriaLabelingProps {
@@ -25,8 +25,10 @@ export interface AriaToastProps<T> extends AriaLabelingProps {
 }
 
 export interface ToastAria {
-  /** Props for the toast container element. */
+  /** Props for the toast container, non-modal dialog element. */
   toastProps: DOMAttributes,
+  /** Props for the toast content alert message. */
+  contentProps: DOMAttributes,
   /** Props for the toast title element. */
   titleProps: DOMAttributes,
   /** Props for the toast description element, if any. */
@@ -39,7 +41,8 @@ export interface ToastAria {
  * Provides the behavior and accessibility implementation for a toast component.
  * Toasts display brief, temporary notifications of actions, errors, or other events in an application.
  */
-export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref: RefObject<FocusableElement>): ToastAria {
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref: RefObject<FocusableElement | null>): ToastAria {
   let {
     key,
     timer,
@@ -58,30 +61,12 @@ export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref:
     };
   }, [timer, timeout]);
 
-  // Restore focus to the toast container on unmount.
-  // If there are no more toasts, the container will be unmounted
-  // and will restore focus to wherever focus was before the user
-  // focused the toast region.
-  let focusOnUnmount = useRef(null);
-  useLayoutEffect(() => {
-    let container = ref.current.closest('[role=region]') as HTMLElement;
-    return () => {
-      if (container && container.contains(document.activeElement)) {
-        // Focus must be delayed for focus ring to appear, but we can't wait
-        // until useEffect cleanup to check if focus was inside the container.
-        focusOnUnmount.current = container;
-      }
-    };
-  }, [ref]);
-
-  // eslint-disable-next-line
+  let [isEntered, setIsEntered] = React.useState(false);
   useEffect(() => {
-    return () => {
-      if (focusOnUnmount.current) {
-        focusOnUnmount.current.focus();
-      }
-    };
-  }, [ref]);
+    if (animation === 'entering' || animation === 'queued') {
+      setIsEntered(true);
+    }
+  }, [animation]);
 
   let titleId = useId();
   let descriptionId = useSlotId();
@@ -89,13 +74,22 @@ export function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref:
 
   return {
     toastProps: {
-      role: 'alert',
+      role: 'alertdialog',
+      'aria-modal': 'false',
       'aria-label': props['aria-label'],
       'aria-labelledby': props['aria-labelledby'] || titleId,
       'aria-describedby': props['aria-describedby'] || descriptionId,
       'aria-details': props['aria-details'],
       // Hide toasts that are animating out so VoiceOver doesn't announce them.
-      'aria-hidden': animation === 'exiting' ? 'true' : undefined
+      'aria-hidden': animation === 'exiting' ? 'true' : undefined,
+      tabIndex: 0
+    },
+    contentProps: {
+      role: 'alert',
+      'aria-atomic': 'true',
+      style: {
+        visibility: isEntered || animation === null ? 'visible' : 'hidden'
+      }
     },
     titleProps: {
       id: titleId

package/src/useToastRegion.ts

@@ -1,10 +1,10 @@
-import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';
-import {focusWithoutScrolling, mergeProps} from '@react-aria/utils';
+import {AriaLabelingProps, DOMAttributes, RefObject} from '@react-types/shared';
+import {focusWithoutScrolling, mergeProps, useLayoutEffect} from '@react-aria/utils';
 import {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {RefObject, useEffect, useRef} from 'react';
 import {ToastState} from '@react-stately/toast';
+import {useEffect, useRef} from 'react';
 import {useLandmark} from '@react-aria/landmark';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 
@@ -25,11 +25,11 @@ export interface ToastRegionAria {
  * Provides the behavior and accessibility implementation for a toast region containing one or more toasts.
  * Toasts display brief, temporary notifications of actions, errors, or other events in an application.
  */
-export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState<T>, ref: RefObject<HTMLElement>): ToastRegionAria {
+export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState<T>, ref: RefObject<HTMLElement | null>): ToastRegionAria {
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');
   let {landmarkProps} = useLandmark({
     role: 'region',
-    'aria-label': props['aria-label'] || stringFormatter.format('notifications')
+    'aria-label': props['aria-label'] || stringFormatter.format('notifications', {count: state.visibleToasts.length})
   }, ref);
 
   let {hoverProps} = useHover({
@@ -37,6 +37,72 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
     onHoverEnd: state.resumeAll
   });
 
+  // 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 = useRef([]);
+  let prevVisibleToasts = useRef(state.visibleToasts);
+  let focusedToast = useRef(null);
+  useLayoutEffect(() => {
+    // If no toast has focus, then don't do anything.
+    if (focusedToast.current === -1 || state.visibleToasts.length === 0) {
+      toasts.current = [];
+      prevVisibleToasts.current = state.visibleToasts;
+      return;
+    }
+    toasts.current = [...ref.current.querySelectorAll('[role="alertdialog"]')];
+    // If the visible toasts haven't changed, we don't need to do anything.
+    if (prevVisibleToasts.current.length === state.visibleToasts.length
+      && state.visibleToasts.every((t, i) => t.key === prevVisibleToasts.current[i].key)) {
+      prevVisibleToasts.current = state.visibleToasts;
+      return;
+    }
+    // Get a list of all toasts by index and add info if they are removed.
+    let allToasts = prevVisibleToasts.current
+      .map((t, i) => ({
+        ...t,
+        i,
+        isRemoved: !state.visibleToasts.some(t2 => t.key === t2.key)
+      }));
+
+    let removedFocusedToastIndex = allToasts.findIndex(t => t.i === focusedToast.current);
+
+    // 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;
+        }
+        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) {
+        focusWithoutScrolling(toasts.current[prevToast]);
+      } else if (nextToast >= 0 && nextToast < toasts.current.length) {
+        focusWithoutScrolling(toasts.current[nextToast]);
+      }
+    }
+
+    prevVisibleToasts.current = state.visibleToasts;
+  }, [state.visibleToasts, ref]);
+
   let lastFocused = useRef(null);
   let {focusWithinProps} = useFocusWithin({
     onFocusWithin: (e) => {
@@ -49,10 +115,22 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
     }
   });
 
-  // When the region unmounts, restore focus to the last element that had focus
-  // before the user moved focus into the region.
-  // TODO: handle when the element has unmounted like FocusScope does?
-  // eslint-disable-next-line arrow-body-style
+  // When the number of visible toasts becomes 0 or the region unmounts,
+  // restore focus to the last element that had focus before the user moved focus
+  // into the region. FocusScope restore focus doesn't update whenever the focus
+  // moves in, it only happens once, so we correct it.
+  // Because we're in a hook, we can't control if the user unmounts or not.
+  useEffect(() => {
+    if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+      if (getInteractionModality() === 'pointer') {
+        focusWithoutScrolling(lastFocused.current);
+      } else {
+        lastFocused.current.focus();
+      }
+      lastFocused.current = null;
+    }
+  }, [ref, state.visibleToasts.length]);
+
   useEffect(() => {
     return () => {
       if (lastFocused.current && document.body.contains(lastFocused.current)) {
@@ -61,6 +139,7 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
         } else {
           lastFocused.current.focus();
         }
+        lastFocused.current = null;
       }
     };
   }, [ref]);
@@ -73,7 +152,16 @@ export function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState
       //   - allows focus even outside a containing focus scope
       //   - doesn’t dismiss overlays when clicking on it, even though it is outside
       // @ts-ignore
-      'data-react-aria-top-layer': true
+      'data-react-aria-top-layer': true,
+      // listen to focus events separate from focuswithin because that will only fire once
+      // and we need to follow all focus changes
+      onFocus: (e) => {
+        let target = e.target.closest('[role="alertdialog"]');
+        focusedToast.current = toasts.current.findIndex(t => t === target);
+      },
+      onBlur: () => {
+        focusedToast.current = -1;
+      }
     })
   };
 }