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

package/dist/useToast.module.js

@@ -1,6 +1,6 @@
 import $7WpW4$intlStringsmodulejs from "./intlStrings.module.js";
-import {useEffect as $7WpW4$useEffect, useRef as $7WpW4$useRef} from "react";
-import {useLayoutEffect as $7WpW4$useLayoutEffect, useId as $7WpW4$useId, useSlotId as $7WpW4$useSlotId} from "@react-aria/utils";
+import $7WpW4$react, {useEffect as $7WpW4$useEffect} from "react";
+import {useId as $7WpW4$useId, useSlotId as $7WpW4$useSlotId} from "@react-aria/utils";
 import {useLocalizedStringFormatter as $7WpW4$useLocalizedStringFormatter} from "@react-aria/i18n";
 
 
@@ -33,41 +33,33 @@ function $d6542812f0669241$export$a407b657d3044108(props, state, 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 = (0, $7WpW4$useRef)(null);
-    (0, $7WpW4$useLayoutEffect)(()=>{
-        let container = ref.current.closest('[role=region]');
-        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] = (0, $7WpW4$react).useState(false);
     (0, $7WpW4$useEffect)(()=>{
-        return ()=>{
-            if (focusOnUnmount.current) focusOnUnmount.current.focus();
-        };
+        if (animation === 'entering' || animation === 'queued') setIsEntered(true);
     }, [
-        ref
+        animation
     ]);
     let titleId = (0, $7WpW4$useId)();
     let descriptionId = (0, $7WpW4$useSlotId)();
     let stringFormatter = (0, $7WpW4$useLocalizedStringFormatter)((0, ($parcel$interopDefault($7WpW4$intlStringsmodulejs))), '@react-aria/toast');
     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/dist/useToast.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AA+BM,SAAS,0CAAY,KAAwB,EAAE,KAAoB,EAAE,GAAgC;IAC1G,IAAI,OACF,GAAG,SACH,KAAK,WACL,OAAO,aACP,SAAS,EACV,GAAG,MAAM,KAAK;IAEf,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,CAAC,OACH;QAGF,MAAM,KAAK,CAAC;QACZ,OAAO;YACL,MAAM,KAAK;QACb;IACF,GAAG;QAAC;QAAO;KAAQ;IAEnB,mDAAmD;IACnD,+DAA+D;IAC/D,+DAA+D;IAC/D,4BAA4B;IAC5B,IAAI,iBAAiB,CAAA,GAAA,aAAK,EAAE;IAC5B,CAAA,GAAA,sBAAc,EAAE;QACd,IAAI,YAAY,IAAI,OAAO,CAAC,OAAO,CAAC;QACpC,OAAO;YACL,IAAI,aAAa,UAAU,QAAQ,CAAC,SAAS,aAAa,GACxD,oEAAoE;YACpE,sEAAsE;YACtE,eAAe,OAAO,GAAG;QAE7B;IACF,GAAG;QAAC;KAAI;IAER,2BAA2B;IAC3B,CAAA,GAAA,gBAAQ,EAAE;QACR,OAAO;YACL,IAAI,eAAe,OAAO,EACxB,eAAe,OAAO,CAAC,KAAK;QAEhC;IACF,GAAG;QAAC;KAAI;IAER,IAAI,UAAU,CAAA,GAAA,YAAI;IAClB,IAAI,gBAAgB,CAAA,GAAA,gBAAQ;IAC5B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAEhE,OAAO;QACL,YAAY;YACV,MAAM;YACN,cAAc,KAAK,CAAC,aAAa;YACjC,mBAAmB,KAAK,CAAC,kBAAkB,IAAI;YAC/C,oBAAoB,KAAK,CAAC,mBAAmB,IAAI;YACjD,gBAAgB,KAAK,CAAC,eAAe;YACrC,yEAAyE;YACzE,eAAe,cAAc,YAAY,SAAS;QACpD;QACA,YAAY;YACV,IAAI;QACN;QACA,kBAAkB;YAChB,IAAI;QACN;QACA,kBAAkB;YAChB,cAAc,gBAAgB,MAAM,CAAC;YACrC,SAAS,IAAM,MAAM,KAAK,CAAC;QAC7B;IACF;AACF","sources":["packages/@react-aria/toast/src/useToast.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaLabelingProps, DOMAttributes, FocusableElement} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {QueuedToast, ToastState} from '@react-stately/toast';\nimport {RefObject, useEffect, useRef} from 'react';\nimport {useId, useLayoutEffect, useSlotId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaToastProps<T> extends AriaLabelingProps {\n  /** The toast object. */\n  toast: QueuedToast<T>\n}\n\nexport interface ToastAria {\n  /** Props for the toast container element. */\n  toastProps: DOMAttributes,\n  /** Props for the toast title element. */\n  titleProps: DOMAttributes,\n  /** Props for the toast description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the toast close button. */\n  closeButtonProps: AriaButtonProps\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toast component.\n * Toasts display brief, temporary notifications of actions, errors, or other events in an application.\n */\nexport function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref: RefObject<FocusableElement>): ToastAria {\n  let {\n    key,\n    timer,\n    timeout,\n    animation\n  } = props.toast;\n\n  useEffect(() => {\n    if (!timer) {\n      return;\n    }\n\n    timer.reset(timeout);\n    return () => {\n      timer.pause();\n    };\n  }, [timer, timeout]);\n\n  // Restore focus to the toast container on unmount.\n  // If there are no more toasts, the container will be unmounted\n  // and will restore focus to wherever focus was before the user\n  // focused the toast region.\n  let focusOnUnmount = useRef(null);\n  useLayoutEffect(() => {\n    let container = ref.current.closest('[role=region]') as HTMLElement;\n    return () => {\n      if (container && container.contains(document.activeElement)) {\n        // Focus must be delayed for focus ring to appear, but we can't wait\n        // until useEffect cleanup to check if focus was inside the container.\n        focusOnUnmount.current = container;\n      }\n    };\n  }, [ref]);\n\n  // eslint-disable-next-line\n  useEffect(() => {\n    return () => {\n      if (focusOnUnmount.current) {\n        focusOnUnmount.current.focus();\n      }\n    };\n  }, [ref]);\n\n  let titleId = useId();\n  let descriptionId = useSlotId();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');\n\n  return {\n    toastProps: {\n      role: 'alert',\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'] || titleId,\n      'aria-describedby': props['aria-describedby'] || descriptionId,\n      'aria-details': props['aria-details'],\n      // Hide toasts that are animating out so VoiceOver doesn't announce them.\n      'aria-hidden': animation === 'exiting' ? 'true' : undefined\n    },\n    titleProps: {\n      id: titleId\n    },\n    descriptionProps: {\n      id: descriptionId\n    },\n    closeButtonProps: {\n      'aria-label': stringFormatter.format('close'),\n      onPress: () => state.close(key)\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useToast.module.js.map"}
+{"mappings":";;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;AAkCM,SAAS,0CAAY,KAAwB,EAAE,KAAoB,EAAE,GAAuC;IACjH,IAAI,OACF,GAAG,SACH,KAAK,WACL,OAAO,aACP,SAAS,EACV,GAAG,MAAM,KAAK;IAEf,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,CAAC,OACH;QAGF,MAAM,KAAK,CAAC;QACZ,OAAO;YACL,MAAM,KAAK;QACb;IACF,GAAG;QAAC;QAAO;KAAQ;IAEnB,IAAI,CAAC,WAAW,aAAa,GAAG,CAAA,GAAA,YAAI,EAAE,QAAQ,CAAC;IAC/C,CAAA,GAAA,gBAAQ,EAAE;QACR,IAAI,cAAc,cAAc,cAAc,UAC5C,aAAa;IAEjB,GAAG;QAAC;KAAU;IAEd,IAAI,UAAU,CAAA,GAAA,YAAI;IAClB,IAAI,gBAAgB,CAAA,GAAA,gBAAQ;IAC5B,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAEhE,OAAO;QACL,YAAY;YACV,MAAM;YACN,cAAc;YACd,cAAc,KAAK,CAAC,aAAa;YACjC,mBAAmB,KAAK,CAAC,kBAAkB,IAAI;YAC/C,oBAAoB,KAAK,CAAC,mBAAmB,IAAI;YACjD,gBAAgB,KAAK,CAAC,eAAe;YACrC,yEAAyE;YACzE,eAAe,cAAc,YAAY,SAAS;YAClD,UAAU;QACZ;QACA,cAAc;YACZ,MAAM;YACN,eAAe;YACf,OAAO;gBACL,YAAY,aAAa,cAAc,OAAO,YAAY;YAC5D;QACF;QACA,YAAY;YACV,IAAI;QACN;QACA,kBAAkB;YAChB,IAAI;QACN;QACA,kBAAkB;YAChB,cAAc,gBAAgB,MAAM,CAAC;YACrC,SAAS,IAAM,MAAM,KAAK,CAAC;QAC7B;IACF;AACF","sources":["packages/@react-aria/toast/src/useToast.ts"],"sourcesContent":["/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nimport {AriaButtonProps} from '@react-types/button';\nimport {AriaLabelingProps, DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {QueuedToast, ToastState} from '@react-stately/toast';\nimport React, {useEffect} from 'react';\nimport {useId, useSlotId} from '@react-aria/utils';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaToastProps<T> extends AriaLabelingProps {\n  /** The toast object. */\n  toast: QueuedToast<T>\n}\n\nexport interface ToastAria {\n  /** Props for the toast container, non-modal dialog element. */\n  toastProps: DOMAttributes,\n  /** Props for the toast content alert message. */\n  contentProps: DOMAttributes,\n  /** Props for the toast title element. */\n  titleProps: DOMAttributes,\n  /** Props for the toast description element, if any. */\n  descriptionProps: DOMAttributes,\n  /** Props for the toast close button. */\n  closeButtonProps: AriaButtonProps\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toast component.\n * Toasts display brief, temporary notifications of actions, errors, or other events in an application.\n */\n// eslint-disable-next-line @typescript-eslint/no-unused-vars\nexport function useToast<T>(props: AriaToastProps<T>, state: ToastState<T>, ref: RefObject<FocusableElement | null>): ToastAria {\n  let {\n    key,\n    timer,\n    timeout,\n    animation\n  } = props.toast;\n\n  useEffect(() => {\n    if (!timer) {\n      return;\n    }\n\n    timer.reset(timeout);\n    return () => {\n      timer.pause();\n    };\n  }, [timer, timeout]);\n\n  let [isEntered, setIsEntered] = React.useState(false);\n  useEffect(() => {\n    if (animation === 'entering' || animation === 'queued') {\n      setIsEntered(true);\n    }\n  }, [animation]);\n\n  let titleId = useId();\n  let descriptionId = useSlotId();\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');\n\n  return {\n    toastProps: {\n      role: 'alertdialog',\n      'aria-modal': 'false',\n      'aria-label': props['aria-label'],\n      'aria-labelledby': props['aria-labelledby'] || titleId,\n      'aria-describedby': props['aria-describedby'] || descriptionId,\n      'aria-details': props['aria-details'],\n      // Hide toasts that are animating out so VoiceOver doesn't announce them.\n      'aria-hidden': animation === 'exiting' ? 'true' : undefined,\n      tabIndex: 0\n    },\n    contentProps: {\n      role: 'alert',\n      'aria-atomic': 'true',\n      style: {\n        visibility: isEntered || animation === null ? 'visible' : 'hidden'\n      }\n    },\n    titleProps: {\n      id: titleId\n    },\n    descriptionProps: {\n      id: descriptionId\n    },\n    closeButtonProps: {\n      'aria-label': stringFormatter.format('close'),\n      onPress: () => state.close(key)\n    }\n  };\n}\n"],"names":[],"version":3,"file":"useToast.module.js.map"}

package/dist/useToastRegion.main.js

@@ -25,12 +25,70 @@ function $eda7c6204a682dd4$export$b8cbbb20a51697de(props, state, ref) {
     let stringFormatter = (0, $eO7VF$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($f49b2d6c91681304$exports))), '@react-aria/toast');
     let { landmarkProps: landmarkProps } = (0, $eO7VF$reactarialandmark.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: hoverProps } = (0, $eO7VF$reactariainteractions.useHover)({
         onHoverStart: state.pauseAll,
         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 = (0, $eO7VF$react.useRef)([]);
+    let prevVisibleToasts = (0, $eO7VF$react.useRef)(state.visibleToasts);
+    let focusedToast = (0, $eO7VF$react.useRef)(null);
+    (0, $eO7VF$reactariautils.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: 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) (0, $eO7VF$reactariautils.focusWithoutScrolling)(toasts.current[prevToast]);
+            else if (nextToast >= 0 && nextToast < toasts.current.length) (0, $eO7VF$reactariautils.focusWithoutScrolling)(toasts.current[nextToast]);
+        }
+        prevVisibleToasts.current = state.visibleToasts;
+    }, [
+        state.visibleToasts,
+        ref
+    ]);
     let lastFocused = (0, $eO7VF$react.useRef)(null);
     let { focusWithinProps: focusWithinProps } = (0, $eO7VF$reactariainteractions.useFocusWithin)({
         onFocusWithin: (e)=>{
@@ -42,15 +100,27 @@ function $eda7c6204a682dd4$export$b8cbbb20a51697de(props, state, ref) {
             lastFocused.current = null;
         }
     });
-    // 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.
+    (0, $eO7VF$react.useEffect)(()=>{
+        if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+            if ((0, $eO7VF$reactariainteractions.getInteractionModality)() === 'pointer') (0, $eO7VF$reactariautils.focusWithoutScrolling)(lastFocused.current);
+            else lastFocused.current.focus();
+            lastFocused.current = null;
+        }
+    }, [
+        ref,
+        state.visibleToasts.length
+    ]);
     (0, $eO7VF$react.useEffect)(()=>{
         return ()=>{
             if (lastFocused.current && document.body.contains(lastFocused.current)) {
                 if ((0, $eO7VF$reactariainteractions.getInteractionModality)() === 'pointer') (0, $eO7VF$reactariautils.focusWithoutScrolling)(lastFocused.current);
                 else lastFocused.current.focus();
+                lastFocused.current = null;
             }
         };
     }, [
@@ -64,7 +134,16 @@ function $eda7c6204a682dd4$export$b8cbbb20a51697de(props, state, ref) {
             //   - 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;
+            }
         })
     };
 }

package/dist/useToastRegion.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;AA2BO,SAAS,0CAAkB,KAA2B,EAAE,KAAoB,EAAE,GAA2B;IAC9G,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,oCAAU,EAAE;QAChC,MAAM;QACN,cAAc,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;IAC9D,GAAG;IAEH,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,qCAAO,EAAE;QAC1B,cAAc,MAAM,QAAQ;QAC5B,YAAY,MAAM,SAAS;IAC7B;IAEA,IAAI,cAAc,CAAA,GAAA,mBAAK,EAAE;IACzB,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,2CAAa,EAAE;QACtC,eAAe,CAAC;YACd,MAAM,QAAQ;YACd,YAAY,OAAO,GAAG,EAAE,aAAa;QACvC;QACA,cAAc;YACZ,MAAM,SAAS;YACf,YAAY,OAAO,GAAG;QACxB;IACF;IAEA,6EAA6E;IAC7E,+CAA+C;IAC/C,oEAAoE;IACpE,4CAA4C;IAC5C,CAAA,GAAA,sBAAQ,EAAE;QACR,OAAO;YACL,IAAI,YAAY,OAAO,IAAI,SAAS,IAAI,CAAC,QAAQ,CAAC,YAAY,OAAO;gBACnE,IAAI,CAAA,GAAA,mDAAqB,QAAQ,WAC/B,CAAA,GAAA,2CAAoB,EAAE,YAAY,OAAO;qBAEzC,YAAY,OAAO,CAAC,KAAK;;QAG/B;IACF,GAAG;QAAC;KAAI;IAER,OAAO;QACL,aAAa,CAAA,GAAA,gCAAS,EAAE,eAAe,YAAY,kBAAkB;YACnE,UAAU;YACV,sDAAsD;YACtD,iDAAiD;YACjD,yDAAyD;YACzD,8EAA8E;YAC9E,aAAa;YACb,6BAA6B;QAC/B;IACF;AACF","sources":["packages/@react-aria/toast/src/useToastRegion.ts"],"sourcesContent":["import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps} from '@react-aria/utils';\nimport {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {RefObject, useEffect, useRef} from 'react';\nimport {ToastState} from '@react-stately/toast';\nimport {useLandmark} from '@react-aria/landmark';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaToastRegionProps extends AriaLabelingProps {\n  /**\n   * An accessibility label for the toast region.\n   * @default \"Notifications\"\n   */\n  'aria-label'?: string\n}\n\nexport interface ToastRegionAria {\n  /** Props for the landmark region element. */\n  regionProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toast region containing one or more toasts.\n * Toasts display brief, temporary notifications of actions, errors, or other events in an application.\n */\nexport function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState<T>, ref: RefObject<HTMLElement>): ToastRegionAria {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');\n  let {landmarkProps} = useLandmark({\n    role: 'region',\n    'aria-label': props['aria-label'] || stringFormatter.format('notifications')\n  }, ref);\n\n  let {hoverProps} = useHover({\n    onHoverStart: state.pauseAll,\n    onHoverEnd: state.resumeAll\n  });\n\n  let lastFocused = useRef(null);\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithin: (e) => {\n      state.pauseAll();\n      lastFocused.current = e.relatedTarget;\n    },\n    onBlurWithin: () => {\n      state.resumeAll();\n      lastFocused.current = null;\n    }\n  });\n\n  // When the region unmounts, restore focus to the last element that had focus\n  // before the user moved focus into the region.\n  // TODO: handle when the element has unmounted like FocusScope does?\n  // eslint-disable-next-line arrow-body-style\n  useEffect(() => {\n    return () => {\n      if (lastFocused.current && document.body.contains(lastFocused.current)) {\n        if (getInteractionModality() === 'pointer') {\n          focusWithoutScrolling(lastFocused.current);\n        } else {\n          lastFocused.current.focus();\n        }\n      }\n    };\n  }, [ref]);\n\n  return {\n    regionProps: mergeProps(landmarkProps, hoverProps, focusWithinProps, {\n      tabIndex: -1,\n      // Mark the toast region as a \"top layer\", so that it:\n      //   - is not aria-hidden when opening an overlay\n      //   - allows focus even outside a containing focus scope\n      //   - doesn’t dismiss overlays when clicking on it, even though it is outside\n      // @ts-ignore\n      'data-react-aria-top-layer': true\n    })\n  };\n}\n"],"names":[],"version":3,"file":"useToastRegion.main.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/toast/src/useToastRegion.ts"],"sourcesContent":["import {AriaLabelingProps, DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ToastState} from '@react-stately/toast';\nimport {useEffect, useRef} from 'react';\nimport {useLandmark} from '@react-aria/landmark';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaToastRegionProps extends AriaLabelingProps {\n  /**\n   * An accessibility label for the toast region.\n   * @default \"Notifications\"\n   */\n  'aria-label'?: string\n}\n\nexport interface ToastRegionAria {\n  /** Props for the landmark region element. */\n  regionProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toast region containing one or more toasts.\n * Toasts display brief, temporary notifications of actions, errors, or other events in an application.\n */\nexport function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState<T>, ref: RefObject<HTMLElement | null>): ToastRegionAria {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');\n  let {landmarkProps} = useLandmark({\n    role: 'region',\n    'aria-label': props['aria-label'] || stringFormatter.format('notifications', {count: state.visibleToasts.length})\n  }, ref);\n\n  let {hoverProps} = useHover({\n    onHoverStart: state.pauseAll,\n    onHoverEnd: state.resumeAll\n  });\n\n  // Manage focus within the toast region.\n  // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.\n  // We might be making an assumption with how this works if someone implements the priority queue differently, or\n  // if they only show one toast at a time.\n  let toasts = useRef([]);\n  let prevVisibleToasts = useRef(state.visibleToasts);\n  let focusedToast = useRef(null);\n  useLayoutEffect(() => {\n    // If no toast has focus, then don't do anything.\n    if (focusedToast.current === -1 || state.visibleToasts.length === 0) {\n      toasts.current = [];\n      prevVisibleToasts.current = state.visibleToasts;\n      return;\n    }\n    toasts.current = [...ref.current.querySelectorAll('[role=\"alertdialog\"]')];\n    // If the visible toasts haven't changed, we don't need to do anything.\n    if (prevVisibleToasts.current.length === state.visibleToasts.length\n      && state.visibleToasts.every((t, i) => t.key === prevVisibleToasts.current[i].key)) {\n      prevVisibleToasts.current = state.visibleToasts;\n      return;\n    }\n    // Get a list of all toasts by index and add info if they are removed.\n    let allToasts = prevVisibleToasts.current\n      .map((t, i) => ({\n        ...t,\n        i,\n        isRemoved: !state.visibleToasts.some(t2 => t.key === t2.key)\n      }));\n\n    let removedFocusedToastIndex = allToasts.findIndex(t => t.i === focusedToast.current);\n\n    // If the focused toast was removed, focus the next or previous toast.\n    if (removedFocusedToastIndex > -1) {\n      let i = 0;\n      let nextToast;\n      let prevToast;\n      while (i <= removedFocusedToastIndex) {\n        if (!allToasts[i].isRemoved) {\n          prevToast = Math.max(0, i - 1);\n        }\n        i++;\n      }\n      while (i < allToasts.length) {\n        if (!allToasts[i].isRemoved) {\n          nextToast = i - 1;\n          break;\n        }\n        i++;\n      }\n\n      // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0\n      if (prevToast === undefined && nextToast === undefined) {\n        prevToast = 0;\n      }\n\n      // prioritize going to newer toasts\n      if (prevToast >= 0 && prevToast < toasts.current.length) {\n        focusWithoutScrolling(toasts.current[prevToast]);\n      } else if (nextToast >= 0 && nextToast < toasts.current.length) {\n        focusWithoutScrolling(toasts.current[nextToast]);\n      }\n    }\n\n    prevVisibleToasts.current = state.visibleToasts;\n  }, [state.visibleToasts, ref]);\n\n  let lastFocused = useRef(null);\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithin: (e) => {\n      state.pauseAll();\n      lastFocused.current = e.relatedTarget;\n    },\n    onBlurWithin: () => {\n      state.resumeAll();\n      lastFocused.current = null;\n    }\n  });\n\n  // When the number of visible toasts becomes 0 or the region unmounts,\n  // restore focus to the last element that had focus before the user moved focus\n  // into the region. FocusScope restore focus doesn't update whenever the focus\n  // moves in, it only happens once, so we correct it.\n  // Because we're in a hook, we can't control if the user unmounts or not.\n  useEffect(() => {\n    if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {\n      if (getInteractionModality() === 'pointer') {\n        focusWithoutScrolling(lastFocused.current);\n      } else {\n        lastFocused.current.focus();\n      }\n      lastFocused.current = null;\n    }\n  }, [ref, state.visibleToasts.length]);\n\n  useEffect(() => {\n    return () => {\n      if (lastFocused.current && document.body.contains(lastFocused.current)) {\n        if (getInteractionModality() === 'pointer') {\n          focusWithoutScrolling(lastFocused.current);\n        } else {\n          lastFocused.current.focus();\n        }\n        lastFocused.current = null;\n      }\n    };\n  }, [ref]);\n\n  return {\n    regionProps: mergeProps(landmarkProps, hoverProps, focusWithinProps, {\n      tabIndex: -1,\n      // Mark the toast region as a \"top layer\", so that it:\n      //   - is not aria-hidden when opening an overlay\n      //   - allows focus even outside a containing focus scope\n      //   - doesn’t dismiss overlays when clicking on it, even though it is outside\n      // @ts-ignore\n      'data-react-aria-top-layer': true,\n      // listen to focus events separate from focuswithin because that will only fire once\n      // and we need to follow all focus changes\n      onFocus: (e) => {\n        let target = e.target.closest('[role=\"alertdialog\"]');\n        focusedToast.current = toasts.current.findIndex(t => t === target);\n      },\n      onBlur: () => {\n        focusedToast.current = -1;\n      }\n    })\n  };\n}\n"],"names":[],"version":3,"file":"useToastRegion.main.js.map"}

package/dist/useToastRegion.mjs

@@ -1,5 +1,5 @@
 import $ckyCP$intlStringsmodulejs from "./intlStrings.mjs";
-import {focusWithoutScrolling as $ckyCP$focusWithoutScrolling, mergeProps as $ckyCP$mergeProps} from "@react-aria/utils";
+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 {useRef as $ckyCP$useRef, useEffect as $ckyCP$useEffect} from "react";
 import {useLandmark as $ckyCP$useLandmark} from "@react-aria/landmark";
@@ -19,12 +19,70 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
     let stringFormatter = (0, $ckyCP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($ckyCP$intlStringsmodulejs))), '@react-aria/toast');
     let { landmarkProps: landmarkProps } = (0, $ckyCP$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: hoverProps } = (0, $ckyCP$useHover)({
         onHoverStart: state.pauseAll,
         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 = (0, $ckyCP$useRef)([]);
+    let prevVisibleToasts = (0, $ckyCP$useRef)(state.visibleToasts);
+    let focusedToast = (0, $ckyCP$useRef)(null);
+    (0, $ckyCP$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: 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) (0, $ckyCP$focusWithoutScrolling)(toasts.current[prevToast]);
+            else if (nextToast >= 0 && nextToast < toasts.current.length) (0, $ckyCP$focusWithoutScrolling)(toasts.current[nextToast]);
+        }
+        prevVisibleToasts.current = state.visibleToasts;
+    }, [
+        state.visibleToasts,
+        ref
+    ]);
     let lastFocused = (0, $ckyCP$useRef)(null);
     let { focusWithinProps: focusWithinProps } = (0, $ckyCP$useFocusWithin)({
         onFocusWithin: (e)=>{
@@ -36,15 +94,27 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
             lastFocused.current = null;
         }
     });
-    // 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.
+    (0, $ckyCP$useEffect)(()=>{
+        if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+            if ((0, $ckyCP$getInteractionModality)() === 'pointer') (0, $ckyCP$focusWithoutScrolling)(lastFocused.current);
+            else lastFocused.current.focus();
+            lastFocused.current = null;
+        }
+    }, [
+        ref,
+        state.visibleToasts.length
+    ]);
     (0, $ckyCP$useEffect)(()=>{
         return ()=>{
             if (lastFocused.current && document.body.contains(lastFocused.current)) {
                 if ((0, $ckyCP$getInteractionModality)() === 'pointer') (0, $ckyCP$focusWithoutScrolling)(lastFocused.current);
                 else lastFocused.current.focus();
+                lastFocused.current = null;
             }
         };
     }, [
@@ -58,7 +128,16 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
             //   - 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;
+            }
         })
     };
 }

package/dist/useToastRegion.module.js

@@ -1,5 +1,5 @@
 import $ckyCP$intlStringsmodulejs from "./intlStrings.module.js";
-import {focusWithoutScrolling as $ckyCP$focusWithoutScrolling, mergeProps as $ckyCP$mergeProps} from "@react-aria/utils";
+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 {useRef as $ckyCP$useRef, useEffect as $ckyCP$useEffect} from "react";
 import {useLandmark as $ckyCP$useLandmark} from "@react-aria/landmark";
@@ -19,12 +19,70 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
     let stringFormatter = (0, $ckyCP$useLocalizedStringFormatter)((0, ($parcel$interopDefault($ckyCP$intlStringsmodulejs))), '@react-aria/toast');
     let { landmarkProps: landmarkProps } = (0, $ckyCP$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: hoverProps } = (0, $ckyCP$useHover)({
         onHoverStart: state.pauseAll,
         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 = (0, $ckyCP$useRef)([]);
+    let prevVisibleToasts = (0, $ckyCP$useRef)(state.visibleToasts);
+    let focusedToast = (0, $ckyCP$useRef)(null);
+    (0, $ckyCP$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: 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) (0, $ckyCP$focusWithoutScrolling)(toasts.current[prevToast]);
+            else if (nextToast >= 0 && nextToast < toasts.current.length) (0, $ckyCP$focusWithoutScrolling)(toasts.current[nextToast]);
+        }
+        prevVisibleToasts.current = state.visibleToasts;
+    }, [
+        state.visibleToasts,
+        ref
+    ]);
     let lastFocused = (0, $ckyCP$useRef)(null);
     let { focusWithinProps: focusWithinProps } = (0, $ckyCP$useFocusWithin)({
         onFocusWithin: (e)=>{
@@ -36,15 +94,27 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
             lastFocused.current = null;
         }
     });
-    // 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.
+    (0, $ckyCP$useEffect)(()=>{
+        if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {
+            if ((0, $ckyCP$getInteractionModality)() === 'pointer') (0, $ckyCP$focusWithoutScrolling)(lastFocused.current);
+            else lastFocused.current.focus();
+            lastFocused.current = null;
+        }
+    }, [
+        ref,
+        state.visibleToasts.length
+    ]);
     (0, $ckyCP$useEffect)(()=>{
         return ()=>{
             if (lastFocused.current && document.body.contains(lastFocused.current)) {
                 if ((0, $ckyCP$getInteractionModality)() === 'pointer') (0, $ckyCP$focusWithoutScrolling)(lastFocused.current);
                 else lastFocused.current.focus();
+                lastFocused.current = null;
             }
         };
     }, [
@@ -58,7 +128,16 @@ function $6cc546b19ee7130a$export$b8cbbb20a51697de(props, state, ref) {
             //   - 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;
+            }
         })
     };
 }

package/dist/useToastRegion.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;AA2BO,SAAS,0CAAkB,KAA2B,EAAE,KAAoB,EAAE,GAA2B;IAC9G,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,iBAAC,aAAa,EAAC,GAAG,CAAA,GAAA,kBAAU,EAAE;QAChC,MAAM;QACN,cAAc,KAAK,CAAC,aAAa,IAAI,gBAAgB,MAAM,CAAC;IAC9D,GAAG;IAEH,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,eAAO,EAAE;QAC1B,cAAc,MAAM,QAAQ;QAC5B,YAAY,MAAM,SAAS;IAC7B;IAEA,IAAI,cAAc,CAAA,GAAA,aAAK,EAAE;IACzB,IAAI,oBAAC,gBAAgB,EAAC,GAAG,CAAA,GAAA,qBAAa,EAAE;QACtC,eAAe,CAAC;YACd,MAAM,QAAQ;YACd,YAAY,OAAO,GAAG,EAAE,aAAa;QACvC;QACA,cAAc;YACZ,MAAM,SAAS;YACf,YAAY,OAAO,GAAG;QACxB;IACF;IAEA,6EAA6E;IAC7E,+CAA+C;IAC/C,oEAAoE;IACpE,4CAA4C;IAC5C,CAAA,GAAA,gBAAQ,EAAE;QACR,OAAO;YACL,IAAI,YAAY,OAAO,IAAI,SAAS,IAAI,CAAC,QAAQ,CAAC,YAAY,OAAO;gBACnE,IAAI,CAAA,GAAA,6BAAqB,QAAQ,WAC/B,CAAA,GAAA,4BAAoB,EAAE,YAAY,OAAO;qBAEzC,YAAY,OAAO,CAAC,KAAK;;QAG/B;IACF,GAAG;QAAC;KAAI;IAER,OAAO;QACL,aAAa,CAAA,GAAA,iBAAS,EAAE,eAAe,YAAY,kBAAkB;YACnE,UAAU;YACV,sDAAsD;YACtD,iDAAiD;YACjD,yDAAyD;YACzD,8EAA8E;YAC9E,aAAa;YACb,6BAA6B;QAC/B;IACF;AACF","sources":["packages/@react-aria/toast/src/useToastRegion.ts"],"sourcesContent":["import {AriaLabelingProps, DOMAttributes} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps} from '@react-aria/utils';\nimport {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {RefObject, useEffect, useRef} from 'react';\nimport {ToastState} from '@react-stately/toast';\nimport {useLandmark} from '@react-aria/landmark';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaToastRegionProps extends AriaLabelingProps {\n  /**\n   * An accessibility label for the toast region.\n   * @default \"Notifications\"\n   */\n  'aria-label'?: string\n}\n\nexport interface ToastRegionAria {\n  /** Props for the landmark region element. */\n  regionProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toast region containing one or more toasts.\n * Toasts display brief, temporary notifications of actions, errors, or other events in an application.\n */\nexport function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState<T>, ref: RefObject<HTMLElement>): ToastRegionAria {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');\n  let {landmarkProps} = useLandmark({\n    role: 'region',\n    'aria-label': props['aria-label'] || stringFormatter.format('notifications')\n  }, ref);\n\n  let {hoverProps} = useHover({\n    onHoverStart: state.pauseAll,\n    onHoverEnd: state.resumeAll\n  });\n\n  let lastFocused = useRef(null);\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithin: (e) => {\n      state.pauseAll();\n      lastFocused.current = e.relatedTarget;\n    },\n    onBlurWithin: () => {\n      state.resumeAll();\n      lastFocused.current = null;\n    }\n  });\n\n  // When the region unmounts, restore focus to the last element that had focus\n  // before the user moved focus into the region.\n  // TODO: handle when the element has unmounted like FocusScope does?\n  // eslint-disable-next-line arrow-body-style\n  useEffect(() => {\n    return () => {\n      if (lastFocused.current && document.body.contains(lastFocused.current)) {\n        if (getInteractionModality() === 'pointer') {\n          focusWithoutScrolling(lastFocused.current);\n        } else {\n          lastFocused.current.focus();\n        }\n      }\n    };\n  }, [ref]);\n\n  return {\n    regionProps: mergeProps(landmarkProps, hoverProps, focusWithinProps, {\n      tabIndex: -1,\n      // Mark the toast region as a \"top layer\", so that it:\n      //   - is not aria-hidden when opening an overlay\n      //   - allows focus even outside a containing focus scope\n      //   - doesn’t dismiss overlays when clicking on it, even though it is outside\n      // @ts-ignore\n      'data-react-aria-top-layer': true\n    })\n  };\n}\n"],"names":[],"version":3,"file":"useToastRegion.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/toast/src/useToastRegion.ts"],"sourcesContent":["import {AriaLabelingProps, DOMAttributes, RefObject} from '@react-types/shared';\nimport {focusWithoutScrolling, mergeProps, useLayoutEffect} from '@react-aria/utils';\nimport {getInteractionModality, useFocusWithin, useHover} from '@react-aria/interactions';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {ToastState} from '@react-stately/toast';\nimport {useEffect, useRef} from 'react';\nimport {useLandmark} from '@react-aria/landmark';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\n\nexport interface AriaToastRegionProps extends AriaLabelingProps {\n  /**\n   * An accessibility label for the toast region.\n   * @default \"Notifications\"\n   */\n  'aria-label'?: string\n}\n\nexport interface ToastRegionAria {\n  /** Props for the landmark region element. */\n  regionProps: DOMAttributes\n}\n\n/**\n * Provides the behavior and accessibility implementation for a toast region containing one or more toasts.\n * Toasts display brief, temporary notifications of actions, errors, or other events in an application.\n */\nexport function useToastRegion<T>(props: AriaToastRegionProps, state: ToastState<T>, ref: RefObject<HTMLElement | null>): ToastRegionAria {\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-aria/toast');\n  let {landmarkProps} = useLandmark({\n    role: 'region',\n    'aria-label': props['aria-label'] || stringFormatter.format('notifications', {count: state.visibleToasts.length})\n  }, ref);\n\n  let {hoverProps} = useHover({\n    onHoverStart: state.pauseAll,\n    onHoverEnd: state.resumeAll\n  });\n\n  // Manage focus within the toast region.\n  // If a focused containing toast is removed, move focus to the next toast, or the previous toast if there is no next toast.\n  // We might be making an assumption with how this works if someone implements the priority queue differently, or\n  // if they only show one toast at a time.\n  let toasts = useRef([]);\n  let prevVisibleToasts = useRef(state.visibleToasts);\n  let focusedToast = useRef(null);\n  useLayoutEffect(() => {\n    // If no toast has focus, then don't do anything.\n    if (focusedToast.current === -1 || state.visibleToasts.length === 0) {\n      toasts.current = [];\n      prevVisibleToasts.current = state.visibleToasts;\n      return;\n    }\n    toasts.current = [...ref.current.querySelectorAll('[role=\"alertdialog\"]')];\n    // If the visible toasts haven't changed, we don't need to do anything.\n    if (prevVisibleToasts.current.length === state.visibleToasts.length\n      && state.visibleToasts.every((t, i) => t.key === prevVisibleToasts.current[i].key)) {\n      prevVisibleToasts.current = state.visibleToasts;\n      return;\n    }\n    // Get a list of all toasts by index and add info if they are removed.\n    let allToasts = prevVisibleToasts.current\n      .map((t, i) => ({\n        ...t,\n        i,\n        isRemoved: !state.visibleToasts.some(t2 => t.key === t2.key)\n      }));\n\n    let removedFocusedToastIndex = allToasts.findIndex(t => t.i === focusedToast.current);\n\n    // If the focused toast was removed, focus the next or previous toast.\n    if (removedFocusedToastIndex > -1) {\n      let i = 0;\n      let nextToast;\n      let prevToast;\n      while (i <= removedFocusedToastIndex) {\n        if (!allToasts[i].isRemoved) {\n          prevToast = Math.max(0, i - 1);\n        }\n        i++;\n      }\n      while (i < allToasts.length) {\n        if (!allToasts[i].isRemoved) {\n          nextToast = i - 1;\n          break;\n        }\n        i++;\n      }\n\n      // in the case where it's one toast at a time, both will be undefined, but we know the index must be 0\n      if (prevToast === undefined && nextToast === undefined) {\n        prevToast = 0;\n      }\n\n      // prioritize going to newer toasts\n      if (prevToast >= 0 && prevToast < toasts.current.length) {\n        focusWithoutScrolling(toasts.current[prevToast]);\n      } else if (nextToast >= 0 && nextToast < toasts.current.length) {\n        focusWithoutScrolling(toasts.current[nextToast]);\n      }\n    }\n\n    prevVisibleToasts.current = state.visibleToasts;\n  }, [state.visibleToasts, ref]);\n\n  let lastFocused = useRef(null);\n  let {focusWithinProps} = useFocusWithin({\n    onFocusWithin: (e) => {\n      state.pauseAll();\n      lastFocused.current = e.relatedTarget;\n    },\n    onBlurWithin: () => {\n      state.resumeAll();\n      lastFocused.current = null;\n    }\n  });\n\n  // When the number of visible toasts becomes 0 or the region unmounts,\n  // restore focus to the last element that had focus before the user moved focus\n  // into the region. FocusScope restore focus doesn't update whenever the focus\n  // moves in, it only happens once, so we correct it.\n  // Because we're in a hook, we can't control if the user unmounts or not.\n  useEffect(() => {\n    if (state.visibleToasts.length === 0 && lastFocused.current && document.body.contains(lastFocused.current)) {\n      if (getInteractionModality() === 'pointer') {\n        focusWithoutScrolling(lastFocused.current);\n      } else {\n        lastFocused.current.focus();\n      }\n      lastFocused.current = null;\n    }\n  }, [ref, state.visibleToasts.length]);\n\n  useEffect(() => {\n    return () => {\n      if (lastFocused.current && document.body.contains(lastFocused.current)) {\n        if (getInteractionModality() === 'pointer') {\n          focusWithoutScrolling(lastFocused.current);\n        } else {\n          lastFocused.current.focus();\n        }\n        lastFocused.current = null;\n      }\n    };\n  }, [ref]);\n\n  return {\n    regionProps: mergeProps(landmarkProps, hoverProps, focusWithinProps, {\n      tabIndex: -1,\n      // Mark the toast region as a \"top layer\", so that it:\n      //   - is not aria-hidden when opening an overlay\n      //   - allows focus even outside a containing focus scope\n      //   - doesn’t dismiss overlays when clicking on it, even though it is outside\n      // @ts-ignore\n      'data-react-aria-top-layer': true,\n      // listen to focus events separate from focuswithin because that will only fire once\n      // and we need to follow all focus changes\n      onFocus: (e) => {\n        let target = e.target.closest('[role=\"alertdialog\"]');\n        focusedToast.current = toasts.current.findIndex(t => t === target);\n      },\n      onBlur: () => {\n        focusedToast.current = -1;\n      }\n    })\n  };\n}\n"],"names":[],"version":3,"file":"useToastRegion.module.js.map"}

package/dist/zh-CN.main.js

@@ -1,6 +1,9 @@
 module.exports = {
     "close": `\u{5173}\u{95ED}`,
-    "notifications": `\u{901A}\u{77E5}`
+    "notifications": (args, formatter)=>`${formatter.plural(args.count, {
+            one: ()=>`${formatter.number(args.count)} \u{4E2A}\u{901A}\u{77E5}`,
+            other: ()=>`${formatter.number(args.count)} \u{4E2A}\u{901A}\u{77E5}`
+        })}\u{3002}`
 };
 
 

package/dist/zh-CN.main.js.map

@@ -1 +1 @@
-{"mappings":"AAAA,iBAAiB;IAAG,SAAS,CAAC,gBAAE,CAAC;IAC/B,iBAAiB,CAAC,gBAAE,CAAC;AACvB","sources":["packages/@react-aria/toast/intl/zh-CN.json"],"sourcesContent":["{\n  \"close\": \"关闭\",\n  \"notifications\": \"通知\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}
+{"mappings":"AAAA,iBAAiB;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-CN.json"],"sourcesContent":["{\n  \"close\": \"关闭\",\n  \"notifications\": \"{count, plural, one {# 个通知} other {# 个通知}}。\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -1,7 +1,10 @@
 var $122525af1cb737c7$exports = {};
 $122525af1cb737c7$exports = {
     "close": `\u{5173}\u{95ED}`,
-    "notifications": `\u{901A}\u{77E5}`
+    "notifications": (args, formatter)=>`${formatter.plural(args.count, {
+            one: ()=>`${formatter.number(args.count)} \u{4E2A}\u{901A}\u{77E5}`,
+            other: ()=>`${formatter.number(args.count)} \u{4E2A}\u{901A}\u{77E5}`
+        })}\u{3002}`
 };
 
 

package/dist/zh-CN.module.js

@@ -1,7 +1,10 @@
 var $122525af1cb737c7$exports = {};
 $122525af1cb737c7$exports = {
     "close": `\u{5173}\u{95ED}`,
-    "notifications": `\u{901A}\u{77E5}`
+    "notifications": (args, formatter)=>`${formatter.plural(args.count, {
+            one: ()=>`${formatter.number(args.count)} \u{4E2A}\u{901A}\u{77E5}`,
+            other: ()=>`${formatter.number(args.count)} \u{4E2A}\u{901A}\u{77E5}`
+        })}\u{3002}`
 };
 
 

package/dist/zh-CN.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-CN.json"],"sourcesContent":["{\n  \"close\": \"关闭\",\n  \"notifications\": \"通知\"\n}\n"],"names":[],"version":3,"file":"zh-CN.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-CN.json"],"sourcesContent":["{\n  \"close\": \"关闭\",\n  \"notifications\": \"{count, plural, one {# 个通知} other {# 个通知}}。\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -1,6 +1,9 @@
 module.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.main.js.map

@@ -1 +1 @@
-{"mappings":"AAAA,iBAAiB;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.main.js.map"}
+{"mappings":"AAAA,iBAAiB;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.main.js.map"}

package/dist/zh-TW.mjs

@@ -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}`
 };