@react-spectrum/toast 3.0.0-beta.1 → 3.0.0-beta.10

package/dist/sv-SE.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,QAAQ,CAAC,IAAI,CAAC;IAChC,YAAY,CAAC,GAAG,CAAC;IACjB,YAAY,CAAC,QAAQ,CAAC;AACxB","sources":["packages/@react-spectrum/toast/intl/sv-SE.json"],"sourcesContent":["{\n  \"info\": \"Info\",\n  \"negative\": \"Fel\",\n  \"positive\": \"Lyckades\"\n}\n"],"names":[],"version":3,"file":"sv-SE.module.js.map"}

package/dist/tr-TR.main.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "info": `Bilgiler`,
+    "negative": `Hata`,
+    "positive": `Ba\u{15F}ar\u{131}l\u{131}`
+};
+
+
+//# sourceMappingURL=tr-TR.main.js.map

package/dist/tr-TR.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,QAAQ,CAAC,QAAQ,CAAC;IACpC,YAAY,CAAC,IAAI,CAAC;IAClB,YAAY,CAAC,0BAAQ,CAAC;AACxB","sources":["packages/@react-spectrum/toast/intl/tr-TR.json"],"sourcesContent":["{\n  \"info\": \"Bilgiler\",\n  \"negative\": \"Hata\",\n  \"positive\": \"Başarılı\"\n}\n"],"names":[],"version":3,"file":"tr-TR.main.js.map"}

package/dist/tr-TR.mjs

@@ -0,0 +1,10 @@
+var $ef512fc21e0fdf2f$exports = {};
+$ef512fc21e0fdf2f$exports = {
+    "info": `Bilgiler`,
+    "negative": `Hata`,
+    "positive": `Ba\u{15F}ar\u{131}l\u{131}`
+};
+
+
+export {$ef512fc21e0fdf2f$exports as default};
+//# sourceMappingURL=tr-TR.module.js.map

package/dist/tr-TR.module.js

@@ -0,0 +1,10 @@
+var $ef512fc21e0fdf2f$exports = {};
+$ef512fc21e0fdf2f$exports = {
+    "info": `Bilgiler`,
+    "negative": `Hata`,
+    "positive": `Ba\u{15F}ar\u{131}l\u{131}`
+};
+
+
+export {$ef512fc21e0fdf2f$exports as default};
+//# sourceMappingURL=tr-TR.module.js.map

package/dist/tr-TR.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,QAAQ,CAAC,QAAQ,CAAC;IACpC,YAAY,CAAC,IAAI,CAAC;IAClB,YAAY,CAAC,0BAAQ,CAAC;AACxB","sources":["packages/@react-spectrum/toast/intl/tr-TR.json"],"sourcesContent":["{\n  \"info\": \"Bilgiler\",\n  \"negative\": \"Hata\",\n  \"positive\": \"Başarılı\"\n}\n"],"names":[],"version":3,"file":"tr-TR.module.js.map"}

package/dist/types.d.ts

@@ -1,11 +1,11 @@
 import { AriaToastRegionProps } from "@react-aria/toast";
-import { ReactElement, ReactNode } from "react";
+import { ReactElement } from "react";
 import { ToastOptions } from "@react-stately/toast";
 export interface SpectrumToastContainerProps extends AriaToastRegionProps {
 }
 export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'> {
     /** A label for the action button within the toast. */
-    actionLabel?: ReactNode;
+    actionLabel?: string;
     /** Handler that is called when the action button is pressed. */
     onAction?: () => void;
     /** Whether the toast should automatically close when an action is performed. */
@@ -19,13 +19,13 @@ type CloseFunction = () => void;
 export function ToastContainer(props: SpectrumToastContainerProps): ReactElement;
 export const ToastQueue: {
     /** Queues a neutral toast. */
-    neutral(children: ReactNode, options?: SpectrumToastOptions): CloseFunction;
+    neutral(children: string, options?: SpectrumToastOptions): CloseFunction;
     /** Queues a positive toast. */
-    positive(children: ReactNode, options?: SpectrumToastOptions): CloseFunction;
+    positive(children: string, options?: SpectrumToastOptions): CloseFunction;
     /** Queues a negative toast. */
-    negative(children: ReactNode, options?: SpectrumToastOptions): CloseFunction;
+    negative(children: string, options?: SpectrumToastOptions): CloseFunction;
     /** Queues an informational toast. */
-    info(children: ReactNode, options?: SpectrumToastOptions): CloseFunction;
+    info(children: string, options?: SpectrumToastOptions): CloseFunction;
 };
 
 //# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":";;;AEmBA,4CAA6C,SAAQ,oBAAoB;CAAG;AAE5E,qCAAsC,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC;IAC1E,sDAAsD;IACtD,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,qBAAqB,MAAM,IAAI,CAAC;AAmChC;;;GAGG;AACH,+BAA+B,KAAK,EAAE,2BAA2B,GAAG,YAAY,CA4C/E;AAsCD,OAAA,MAAM;IACJ,8BAA8B;sBACZ,SAAS,YAAW,oBAAoB,GAAQ,aAAa;IAG/E,+BAA+B;uBACZ,SAAS,YAAW,oBAAoB,GAAQ,aAAa;IAGhF,+BAA+B;uBACZ,SAAS,YAAW,oBAAoB,GAAQ,aAAa;IAGhF,qCAAqC;mBACtB,SAAS,YAAW,oBAAoB,GAAQ,aAAa;CAG7E,CAAC","sources":["packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/Toast.tsx","packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/Toaster.tsx","packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/ToastContainer.tsx","packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/index.ts","packages/@react-spectrum/toast/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {ToastContainer, ToastQueue} from './ToastContainer';\n\nexport type {SpectrumToastOptions, SpectrumToastContainerProps} from './ToastContainer';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":";;;AEmBA,4CAA6C,SAAQ,oBAAoB;CAAG;AAE5E,qCAAsC,SAAQ,IAAI,CAAC,YAAY,EAAE,UAAU,CAAC;IAC1E,sDAAsD;IACtD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,gEAAgE;IAChE,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B;AAED,qBAAqB,MAAM,IAAI,CAAC;AAyChC;;;GAGG;AACH,+BAA+B,KAAK,EAAE,2BAA2B,GAAG,YAAY,CA4C/E;AAsCD,OAAA,MAAM;IACJ,8BAA8B;sBACZ,MAAM,YAAW,oBAAoB,GAAQ,aAAa;IAG5E,+BAA+B;uBACZ,MAAM,YAAW,oBAAoB,GAAQ,aAAa;IAG7E,+BAA+B;uBACZ,MAAM,YAAW,oBAAoB,GAAQ,aAAa;IAG7E,qCAAqC;mBACtB,MAAM,YAAW,oBAAoB,GAAQ,aAAa;CAG1E,CAAC","sources":["packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/Toaster.tsx","packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/Toast.tsx","packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/ToastContainer.tsx","packages/@react-spectrum/toast/src/packages/@react-spectrum/toast/src/index.ts","packages/@react-spectrum/toast/src/index.ts"],"sourcesContent":[null,null,null,null,"/*\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\n/// <reference types=\"css-module-types\" />\n\nexport {ToastContainer, ToastQueue} from './ToastContainer';\n\nexport type {SpectrumToastOptions, SpectrumToastContainerProps} from './ToastContainer';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/dist/uk-UA.main.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "info": `\u{406}\u{43D}\u{444}\u{43E}\u{440}\u{43C}\u{430}\u{446}\u{456}\u{44F}`,
+    "negative": `\u{41F}\u{43E}\u{43C}\u{438}\u{43B}\u{43A}\u{430}`,
+    "positive": `\u{423}\u{441}\u{43F}\u{456}\u{448}\u{43D}\u{43E}`
+};
+
+
+//# sourceMappingURL=uk-UA.main.js.map

package/dist/uk-UA.main.js.map

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,QAAQ,CAAC,sEAAU,CAAC;IACtC,YAAY,CAAC,iDAAO,CAAC;IACrB,YAAY,CAAC,iDAAO,CAAC;AACvB","sources":["packages/@react-spectrum/toast/intl/uk-UA.json"],"sourcesContent":["{\n  \"info\": \"Інформація\",\n  \"negative\": \"Помилка\",\n  \"positive\": \"Успішно\"\n}\n"],"names":[],"version":3,"file":"uk-UA.main.js.map"}

package/dist/uk-UA.mjs

@@ -0,0 +1,10 @@
+var $6764c871b5447c7a$exports = {};
+$6764c871b5447c7a$exports = {
+    "info": `\u{406}\u{43D}\u{444}\u{43E}\u{440}\u{43C}\u{430}\u{446}\u{456}\u{44F}`,
+    "negative": `\u{41F}\u{43E}\u{43C}\u{438}\u{43B}\u{43A}\u{430}`,
+    "positive": `\u{423}\u{441}\u{43F}\u{456}\u{448}\u{43D}\u{43E}`
+};
+
+
+export {$6764c871b5447c7a$exports as default};
+//# sourceMappingURL=uk-UA.module.js.map

package/dist/uk-UA.module.js

@@ -0,0 +1,10 @@
+var $6764c871b5447c7a$exports = {};
+$6764c871b5447c7a$exports = {
+    "info": `\u{406}\u{43D}\u{444}\u{43E}\u{440}\u{43C}\u{430}\u{446}\u{456}\u{44F}`,
+    "negative": `\u{41F}\u{43E}\u{43C}\u{438}\u{43B}\u{43A}\u{430}`,
+    "positive": `\u{423}\u{441}\u{43F}\u{456}\u{448}\u{43D}\u{43E}`
+};
+
+
+export {$6764c871b5447c7a$exports as default};
+//# sourceMappingURL=uk-UA.module.js.map

package/dist/uk-UA.module.js.map

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,QAAQ,CAAC,sEAAU,CAAC;IACtC,YAAY,CAAC,iDAAO,CAAC;IACrB,YAAY,CAAC,iDAAO,CAAC;AACvB","sources":["packages/@react-spectrum/toast/intl/uk-UA.json"],"sourcesContent":["{\n  \"info\": \"Інформація\",\n  \"negative\": \"Помилка\",\n  \"positive\": \"Успішно\"\n}\n"],"names":[],"version":3,"file":"uk-UA.module.js.map"}

package/dist/zh-CN.main.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "info": `\u{4FE1}\u{606F}`,
+    "negative": `\u{9519}\u{8BEF}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+//# sourceMappingURL=zh-CN.main.js.map

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

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-CN.json"],"sourcesContent":["{\n  \"info\": \"信息\",\n  \"negative\": \"错误\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-CN.main.js.map"}

package/dist/zh-CN.mjs

@@ -0,0 +1,10 @@
+var $b1634d37b87f243f$exports = {};
+$b1634d37b87f243f$exports = {
+    "info": `\u{4FE1}\u{606F}`,
+    "negative": `\u{9519}\u{8BEF}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$b1634d37b87f243f$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

package/dist/zh-CN.module.js

@@ -0,0 +1,10 @@
+var $b1634d37b87f243f$exports = {};
+$b1634d37b87f243f$exports = {
+    "info": `\u{4FE1}\u{606F}`,
+    "negative": `\u{9519}\u{8BEF}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$b1634d37b87f243f$exports as default};
+//# sourceMappingURL=zh-CN.module.js.map

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

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-CN.json"],"sourcesContent":["{\n  \"info\": \"信息\",\n  \"negative\": \"错误\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-CN.module.js.map"}

package/dist/zh-TW.main.js

@@ -0,0 +1,8 @@
+module.exports = {
+    "info": `\u{8CC7}\u{8A0A}`,
+    "negative": `\u{932F}\u{8AA4}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+//# sourceMappingURL=zh-TW.main.js.map

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

@@ -0,0 +1 @@
+{"mappings":"AAAA,iBAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-TW.json"],"sourcesContent":["{\n  \"info\": \"資訊\",\n  \"negative\": \"錯誤\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-TW.main.js.map"}

package/dist/zh-TW.mjs

@@ -0,0 +1,10 @@
+var $19cbd4230357935e$exports = {};
+$19cbd4230357935e$exports = {
+    "info": `\u{8CC7}\u{8A0A}`,
+    "negative": `\u{932F}\u{8AA4}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$19cbd4230357935e$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

package/dist/zh-TW.module.js

@@ -0,0 +1,10 @@
+var $19cbd4230357935e$exports = {};
+$19cbd4230357935e$exports = {
+    "info": `\u{8CC7}\u{8A0A}`,
+    "negative": `\u{932F}\u{8AA4}`,
+    "positive": `\u{6210}\u{529F}`
+};
+
+
+export {$19cbd4230357935e$exports as default};
+//# sourceMappingURL=zh-TW.module.js.map

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

@@ -0,0 +1 @@
+{"mappings":";AAAA,4BAAiB;IAAG,QAAQ,CAAC,gBAAE,CAAC;IAC9B,YAAY,CAAC,gBAAE,CAAC;IAChB,YAAY,CAAC,gBAAE,CAAC;AAClB","sources":["packages/@react-spectrum/toast/intl/zh-TW.json"],"sourcesContent":["{\n  \"info\": \"資訊\",\n  \"negative\": \"錯誤\",\n  \"positive\": \"成功\"\n}\n"],"names":[],"version":3,"file":"zh-TW.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-spectrum/toast",
-  "version": "3.0.0-beta.1",
+  "version": "3.0.0-beta.10",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -36,15 +36,16 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.12.1",
-    "@react-aria/i18n": "^3.7.2",
-    "@react-aria/toast": "3.0.0-beta.1",
-    "@react-spectrum/button": "^3.12.2",
-    "@react-spectrum/utils": "^3.9.2",
-    "@react-stately/toast": "3.0.0-beta.0",
-    "@react-types/shared": "^3.18.1",
-    "@spectrum-icons/ui": "^3.5.2",
-    "@swc/helpers": "^0.4.14",
+    "@react-aria/focus": "^3.16.2",
+    "@react-aria/i18n": "^3.10.2",
+    "@react-aria/toast": "3.0.0-beta.10",
+    "@react-aria/utils": "^3.23.2",
+    "@react-spectrum/button": "^3.16.2",
+    "@react-spectrum/utils": "^3.11.5",
+    "@react-stately/toast": "3.0.0-beta.2",
+    "@react-types/shared": "^3.22.1",
+    "@spectrum-icons/ui": "^3.6.5",
+    "@swc/helpers": "^0.5.0",
     "use-sync-external-store": "^1.2.0"
   },
   "devDependencies": {
@@ -60,5 +61,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5911ed21de4b76d66f6254c02302519e02d50e16"
+  "gitHead": "de9f84a22583fc741c29b341d14cd35ef4cca161"
 }

package/src/Toast.tsx

@@ -19,17 +19,18 @@ import InfoMedium from '@spectrum-icons/ui/InfoMedium';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import React, {ReactNode} from 'react';
+import React, {useContext} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/toast/vars.css';
 import SuccessMedium from '@spectrum-icons/ui/SuccessMedium';
 import toastContainerStyles from './toastContainer.css';
+import {ToasterContext} from './Toaster';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useToast} from '@react-aria/toast';
 
 export interface SpectrumToastValue {
-  children: ReactNode,
+  children: string,
   variant: 'positive' | 'negative' | 'info' | 'neutral',
-  actionLabel?: ReactNode,
+  actionLabel?: string,
   onAction?: () => void,
   shouldCloseOnAction?: boolean
 }
@@ -70,9 +71,10 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
   } = useToast(props, state, domRef);
   let {styleProps} = useStyleProps(otherProps);
 
-  let stringFormatter = useLocalizedStringFormatter(intlMessages);
+  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/toast');
   let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;
   let Icon = ICONS[variant];
+  let isFocusVisible = useContext(ToasterContext);
 
   const handleAction = () => {
     if (onAction) {
@@ -95,7 +97,8 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
         styleProps.className,
         classNames(
           toastContainerStyles,
-          'spectrum-Toast'
+          'spectrum-Toast',
+          {'focus-ring': props.toast.key === state.visibleToasts[0]?.key && isFocusVisible}
         )
       )}
       style={{

package/src/ToastContainer.tsx

@@ -11,7 +11,7 @@
  */
 
 import {AriaToastRegionProps} from '@react-aria/toast';
-import React, {ReactElement, ReactNode, useEffect, useRef} from 'react';
+import React, {ReactElement, useEffect, useRef} from 'react';
 import {SpectrumToastValue, Toast} from './Toast';
 import {Toaster} from './Toaster';
 import {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';
@@ -21,7 +21,7 @@ export interface SpectrumToastContainerProps extends AriaToastRegionProps {}
 
 export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'> {
   /** A label for the action button within the toast. */
-  actionLabel?: ReactNode,
+  actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
   onAction?: () => void,
   /** Whether the toast should automatically close when an action is performed. */
@@ -55,6 +55,12 @@ function subscribe(fn: () => void) {
   return () => subscriptions.delete(fn);
 }
 
+function triggerSubscriptions() {
+  for (let fn of subscriptions) {
+    fn();
+  }
+}
+
 function getActiveToastContainer() {
   return toastProviders.values().next().value;
 }
@@ -73,10 +79,12 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   // We use a ref to do this, since it will have a stable identity
   // over the lifetime of the component.
   let ref = useRef();
-  toastProviders.add(ref);
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
+    toastProviders.add(ref);
+    triggerSubscriptions();
+
     return () => {
       // When this toast provider unmounts, reset all animations so that
       // when the new toast provider renders, it is seamless.
@@ -88,9 +96,7 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
       // This will cause all other instances to re-render,
       // and the first one to become the new active toast provider.
       toastProviders.delete(ref);
-      for (let fn of subscriptions) {
-        fn();
-      }
+      triggerSubscriptions();
     };
   }, []);
 
@@ -113,7 +119,7 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   return null;
 }
 
-function addToast(children: ReactNode, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {
+function addToast(children: string, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {
   // Dispatch a custom event so that toasts can be intercepted and re-targeted, e.g. when inside an iframe.
   if (typeof CustomEvent !== 'undefined' && typeof window !== 'undefined') {
     let event = new CustomEvent('react-spectrum-toast', {
@@ -151,19 +157,19 @@ function addToast(children: ReactNode, variant: SpectrumToastValue['variant'], o
 
 const SpectrumToastQueue = {
   /** Queues a neutral toast. */
-  neutral(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  neutral(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'neutral', options);
   },
   /** Queues a positive toast. */
-  positive(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  positive(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'positive', options);
   },
   /** Queues a negative toast. */
-  negative(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  negative(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'negative', options);
   },
   /** Queues an informational toast. */
-  info(children: ReactNode, options: SpectrumToastOptions = {}): CloseFunction {
+  info(children: string, options: SpectrumToastOptions = {}): CloseFunction {
     return addToast(children, 'info', options);
   }
 };

package/src/Toaster.tsx

@@ -11,44 +11,47 @@
  */
 
 import {AriaToastRegionProps, useToastRegion} from '@react-aria/toast';
-import {classNames, useIsMobileDevice} from '@react-spectrum/utils';
-import {FocusRing} from '@react-aria/focus';
+import {classNames} from '@react-spectrum/utils';
+import {mergeProps} from '@react-aria/utils';
 import {Provider} from '@react-spectrum/provider';
-import React, {ReactElement, ReactNode, useRef} from 'react';
+import React, {createContext, ReactElement, ReactNode, useRef} from 'react';
 import ReactDOM from 'react-dom';
 import toastContainerStyles from './toastContainer.css';
 import {ToastState} from '@react-stately/toast';
+import {useFocusRing} from '@react-aria/focus';
 
 interface ToastContainerProps extends AriaToastRegionProps {
   children: ReactNode,
   state: ToastState<unknown>
 }
 
+export const ToasterContext = createContext(false);
+
 export function Toaster(props: ToastContainerProps): ReactElement {
   let {
     children,
     state
   } = props;
-  let containerPlacement = useIsMobileDevice() ? 'center' : 'right';
 
   let ref = useRef();
   let {regionProps} = useToastRegion(props, state, ref);
+  let {focusProps, isFocusVisible} = useFocusRing();
 
   let contents = (
     <Provider UNSAFE_style={{background: 'transparent'}}>
-      <FocusRing focusRingClass={classNames(toastContainerStyles, 'focus-ring')}>
+      <ToasterContext.Provider value={isFocusVisible}>
         <div
-          {...regionProps}
+          {...mergeProps(regionProps, focusProps)}
           ref={ref}
           data-position="bottom"
-          data-placement={containerPlacement}
+          data-placement="center"
           className={classNames(
             toastContainerStyles,
             'react-spectrum-ToastContainer'
           )}>
           {children}
         </div>
-      </FocusRing>
+      </ToasterContext.Provider>
     </Provider>
   );
 

package/src/toastContainer.css

@@ -21,17 +21,6 @@
   pointer-events: none;
   outline: none;
 
-  > :first-child {
-    @inherit %spectrum-FocusRing-ring;
-    --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
-    --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
-    --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
-  }
-
-  &:focus-ring > :first-child {
-    @inherit %spectrum-FocusRing-active;
-  }
-
   .spectrum-Toast {
     position: absolute;
     margin: 16px;
@@ -78,6 +67,11 @@
 }
 
 .spectrum-Toast {
+  composes: spectrum-FocusRing;
+  --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);
+  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
+  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
+
   &[data-animation=entering] {
     animation: slide-in 300ms;
   }