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

package/dist/Toast.main.js

@@ -1,9 +1,8 @@
 var $1e709ec471c88b75$exports = require("./intlStrings.main.js");
-require("./vars.85cde188.css");
+require("./vars.c6e65b7e.css");
 var $b6e6aa676f8f9e47$exports = require("./toast_vars_css.main.js");
-require("./toastContainer.b596792c.css");
+require("./toastContainer.da404f80.css");
 var $e20782d0579ed886$exports = require("./toastContainer_css.main.js");
-var $5b9f2c86c1b1395c$exports = require("./Toaster.main.js");
 var $8Jify$spectrumiconsuiAlertMedium = require("@spectrum-icons/ui/AlertMedium");
 var $8Jify$reactspectrumbutton = require("@react-spectrum/button");
 var $8Jify$reactspectrumutils = require("@react-spectrum/utils");
@@ -12,6 +11,7 @@ var $8Jify$reactariautils = require("@react-aria/utils");
 var $8Jify$spectrumiconsuiInfoMedium = require("@spectrum-icons/ui/InfoMedium");
 var $8Jify$react = require("react");
 var $8Jify$spectrumiconsuiSuccessMedium = require("@spectrum-icons/ui/SuccessMedium");
+var $8Jify$reactariafocus = require("@react-aria/focus");
 var $8Jify$reactariai18n = require("@react-aria/i18n");
 var $8Jify$reactariatoast = require("@react-aria/toast");
 
@@ -55,28 +55,27 @@ const $6c5bd1047ecc310e$export$fde44257752a9f60 = {
     positive: (0, ($parcel$interopDefault($8Jify$spectrumiconsuiSuccessMedium)))
 };
 function $6c5bd1047ecc310e$var$Toast(props, ref) {
-    var _state_visibleToasts_;
     let { toast: { key: key, animation: animation, content: { children: children, variant: variant, actionLabel: actionLabel, onAction: onAction, shouldCloseOnAction: shouldCloseOnAction } }, state: state, ...otherProps } = props;
     let domRef = (0, $8Jify$reactspectrumutils.useDOMRef)(ref);
-    let { closeButtonProps: closeButtonProps, titleProps: titleProps, toastProps: toastProps } = (0, $8Jify$reactariatoast.useToast)(props, state, domRef);
+    let { closeButtonProps: closeButtonProps, titleProps: titleProps, toastProps: toastProps, contentProps: contentProps } = (0, $8Jify$reactariatoast.useToast)(props, state, domRef);
     let { styleProps: styleProps } = (0, $8Jify$reactspectrumutils.useStyleProps)(otherProps);
     let stringFormatter = (0, $8Jify$reactariai18n.useLocalizedStringFormatter)((0, ($parcel$interopDefault($1e709ec471c88b75$exports))), '@react-spectrum/toast');
     let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;
     let Icon = $6c5bd1047ecc310e$export$fde44257752a9f60[variant];
-    let isFocusVisible = (0, $8Jify$react.useContext)((0, $5b9f2c86c1b1395c$exports.ToasterContext));
+    let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $8Jify$reactariafocus.useFocusRing)();
     const handleAction = ()=>{
         if (onAction) onAction();
         if (shouldCloseOnAction) state.close(key);
     };
     return /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement("div", {
         ...styleProps,
-        ...toastProps,
+        ...(0, $8Jify$reactariautils.mergeProps)(toastProps, focusProps),
         ...(0, $8Jify$reactariautils.filterDOMProps)(props.toast.content),
         ref: domRef,
         className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b6e6aa676f8f9e47$exports))), 'spectrum-Toast', {
             ['spectrum-Toast--' + variant]: variant
         }, styleProps.className, (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e20782d0579ed886$exports))), 'spectrum-Toast', {
-            'focus-ring': props.toast.key === ((_state_visibleToasts_ = state.visibleToasts[0]) === null || _state_visibleToasts_ === void 0 ? void 0 : _state_visibleToasts_.key) && isFocusVisible
+            'focus-ring': isFocusVisible
         })),
         style: {
             ...styleProps.style,
@@ -86,20 +85,25 @@ function $6c5bd1047ecc310e$var$Toast(props, ref) {
         onAnimationEnd: ()=>{
             if (animation === 'exiting') state.remove(key);
         }
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement("div", {
+        ...contentProps,
+        className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e20782d0579ed886$exports))), 'spectrum-Toast-contentWrapper')
     }, Icon && /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement(Icon, {
         "aria-label": iconLabel,
         UNSAFE_className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b6e6aa676f8f9e47$exports))), 'spectrum-Toast-typeIcon')
     }), /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement("div", {
-        className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b6e6aa676f8f9e47$exports))), 'spectrum-Toast-body')
+        className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b6e6aa676f8f9e47$exports))), 'spectrum-Toast-body'),
+        role: "presentation"
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement("div", {
         className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b6e6aa676f8f9e47$exports))), 'spectrum-Toast-content'),
+        role: "presentation",
         ...titleProps
     }, children), actionLabel && /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement((0, $8Jify$reactspectrumbutton.Button), {
         onPress: handleAction,
         UNSAFE_className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b6e6aa676f8f9e47$exports))), 'spectrum-Button'),
         variant: "secondary",
         staticColor: "white"
-    }, actionLabel)), /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement("div", {
+    }, actionLabel))), /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement("div", {
         className: (0, $8Jify$reactspectrumutils.classNames)((0, ($parcel$interopDefault($b6e6aa676f8f9e47$exports))), 'spectrum-Toast-buttons')
     }, /*#__PURE__*/ (0, ($parcel$interopDefault($8Jify$react))).createElement((0, $8Jify$reactspectrumbutton.ClearButton), {
         ...closeButtonProps,

package/dist/Toast.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkCM,MAAM,4CAAQ;IACnB,MAAM,CAAA,GAAA,0DAAS;IACf,UAAU,CAAA,GAAA,2DAAU;IACpB,UAAU,CAAA,GAAA,6DAAY;AACxB;AAEA,SAAS,4BAAM,KAAyB,EAAE,GAA2B;QAoDxB;IAnD3C,IAAI,EACF,OAAO,OACL,GAAG,aACH,SAAS,EACT,SAAS,YACP,QAAQ,WACR,OAAO,eACP,WAAW,YACX,QAAQ,uBACR,mBAAmB,EACpB,EACF,SACD,KAAK,EACL,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,oBACF,gBAAgB,cAChB,UAAU,cACV,UAAU,EACX,GAAG,CAAA,GAAA,8BAAO,EAAE,OAAO,OAAO;IAC3B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,YAAY,WAAW,YAAY,YAAY,gBAAgB,MAAM,CAAC,WAAW;IACrF,IAAI,OAAO,yCAAK,CAAC,QAAQ;IACzB,IAAI,iBAAiB,CAAA,GAAA,uBAAS,EAAE,CAAA,GAAA,wCAAa;IAE7C,MAAM,eAAe;QACnB,IAAI,UACF;QAGF,IAAI,qBACF,MAAM,KAAK,CAAC;IAEhB;IAEA,qBACE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,oCAAa,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC;QACvC,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GACzB,kBACA;YAAC,CAAC,qBAAqB,QAAQ,EAAE;QAAO,GACxC,WAAW,SAAS,EACpB,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAmB,GACnB,kBACA;YAAC,cAAc,MAAM,KAAK,CAAC,GAAG,OAAK,wBAAA,MAAM,aAAa,CAAC,EAAE,cAAtB,4CAAA,sBAAwB,GAAG,KAAI;QAAc;QAGpF,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,QAAQ,MAAM,KAAK,CAAC,QAAQ;QAC9B;QACA,kBAAgB;QAChB,gBAAgB;YACd,IAAI,cAAc,WAChB,MAAM,MAAM,CAAC;QAEjB;OACC,sBACC,0DAAC;QACC,cAAY;QACZ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBAEzC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA4B,GAAG,UAAU;OAAG,WAC9E,6BACC,0DAAC,CAAA,GAAA,iCAAK;QACJ,SAAS;QACT,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACrC,SAAQ;QACR,aAAY;OACX,6BAIP,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC,CAAA,GAAA,sCAAU;QAAG,GAAG,gBAAgB;QAAE,SAAQ;qBACzC,0DAAC,CAAA,GAAA,2DAAU;AAKrB;AAEA,IAAI,0DAAS,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/toast/src/Toast.tsx"],"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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {Button, ClearButton} from '@react-spectrum/button';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport CrossMedium from '@spectrum-icons/ui/CrossMedium';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport InfoMedium from '@spectrum-icons/ui/InfoMedium';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {QueuedToast, ToastState} from '@react-stately/toast';\nimport React, {useContext} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/toast/vars.css';\nimport SuccessMedium from '@spectrum-icons/ui/SuccessMedium';\nimport toastContainerStyles from './toastContainer.css';\nimport {ToasterContext} from './Toaster';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useToast} from '@react-aria/toast';\n\nexport interface SpectrumToastValue extends DOMProps {\n  children: string,\n  variant: 'positive' | 'negative' | 'info' | 'neutral',\n  actionLabel?: string,\n  onAction?: () => void,\n  shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastProps {\n  toast: QueuedToast<SpectrumToastValue>,\n  state: ToastState<SpectrumToastValue>\n}\n\n// TODO: express should use filled icons...\nexport const ICONS = {\n  info: InfoMedium,\n  negative: AlertMedium,\n  positive: SuccessMedium\n};\n\nfunction Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    toast: {\n      key,\n      animation,\n      content: {\n        children,\n        variant,\n        actionLabel,\n        onAction,\n        shouldCloseOnAction\n      }\n    },\n    state,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {\n    closeButtonProps,\n    titleProps,\n    toastProps\n  } = useToast(props, state, domRef);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/toast');\n  let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;\n  let Icon = ICONS[variant];\n  let isFocusVisible = useContext(ToasterContext);\n\n  const handleAction = () => {\n    if (onAction) {\n      onAction();\n    }\n\n    if (shouldCloseOnAction) {\n      state.close(key);\n    }\n  };\n\n  return (\n    <div\n      {...styleProps}\n      {...toastProps}\n      {...filterDOMProps(props.toast.content)}\n      ref={domRef}\n      className={classNames(styles,\n        'spectrum-Toast',\n        {['spectrum-Toast--' + variant]: variant},\n        styleProps.className,\n        classNames(\n          toastContainerStyles,\n          'spectrum-Toast',\n          {'focus-ring': props.toast.key === state.visibleToasts[0]?.key && isFocusVisible}\n        )\n      )}\n      style={{\n        ...styleProps.style,\n        zIndex: props.toast.priority\n      }}\n      data-animation={animation}\n      onAnimationEnd={() => {\n        if (animation === 'exiting') {\n          state.remove(key);\n        }\n      }}>\n      {Icon &&\n        <Icon\n          aria-label={iconLabel}\n          UNSAFE_className={classNames(styles, 'spectrum-Toast-typeIcon')} />\n      }\n      <div className={classNames(styles, 'spectrum-Toast-body')}>\n        <div className={classNames(styles, 'spectrum-Toast-content')} {...titleProps}>{children}</div>\n        {actionLabel &&\n          <Button\n            onPress={handleAction}\n            UNSAFE_className={classNames(styles, 'spectrum-Button')}\n            variant=\"secondary\"\n            staticColor=\"white\">\n            {actionLabel}\n          </Button>\n        }\n      </div>\n      <div className={classNames(styles, 'spectrum-Toast-buttons')}>\n        <ClearButton {...closeButtonProps} variant=\"overBackground\">\n          <CrossMedium />\n        </ClearButton>\n      </div>\n    </div>\n  );\n}\n\nlet _Toast = React.forwardRef(Toast);\nexport {_Toast as Toast};\n"],"names":[],"version":3,"file":"Toast.main.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkCM,MAAM,4CAAQ;IACnB,MAAM,CAAA,GAAA,0DAAS;IACf,UAAU,CAAA,GAAA,2DAAU;IACpB,UAAU,CAAA,GAAA,6DAAY;AACxB;AAEA,SAAS,4BAAM,KAAyB,EAAE,GAA2B;IACnE,IAAI,EACF,OAAO,OACL,GAAG,aACH,SAAS,EACT,SAAS,YACP,QAAQ,WACR,OAAO,eACP,WAAW,YACX,QAAQ,uBACR,mBAAmB,EACpB,EACF,SACD,KAAK,EACL,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,mCAAQ,EAAE;IACvB,IAAI,oBACF,gBAAgB,cAChB,UAAU,cACV,UAAU,gBACV,YAAY,EACb,GAAG,CAAA,GAAA,8BAAO,EAAE,OAAO,OAAO;IAC3B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,uCAAY,EAAE;IAEjC,IAAI,kBAAkB,CAAA,GAAA,gDAA0B,EAAE,CAAA,GAAA,mDAAW,GAAG;IAChE,IAAI,YAAY,WAAW,YAAY,YAAY,gBAAgB,MAAM,CAAC,WAAW;IACrF,IAAI,OAAO,yCAAK,CAAC,QAAQ;IACzB,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,kCAAW;IAE9C,MAAM,eAAe;QACnB,IAAI,UACF;QAGF,IAAI,qBACF,MAAM,KAAK,CAAC;IAEhB;IAEA,qBACE,0DAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,gCAAS,EAAE,YAAY,WAAW;QACrC,GAAG,CAAA,GAAA,oCAAa,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC;QACvC,KAAK;QACL,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GACzB,kBACA;YAAC,CAAC,qBAAqB,QAAQ,EAAE;QAAO,GACxC,WAAW,SAAS,EACpB,CAAA,GAAA,oCAAS,EACP,CAAA,GAAA,mDAAmB,GACnB,kBACA;YAAC,cAAc;QAAc;QAGjC,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,QAAQ,MAAM,KAAK,CAAC,QAAQ;QAC9B;QACA,kBAAgB;QAChB,gBAAgB;YACd,IAAI,cAAc,WAChB,MAAM,MAAM,CAAC;QAEjB;qBACA,0DAAC;QACE,GAAG,YAAY;QAChB,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAmB,GAAG;OAC3C,sBACC,0DAAC;QACC,cAAY;QACZ,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;sBAEzC,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAAwB,MAAK;qBAC9D,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QAA2B,MAAK;QAAgB,GAAG,UAAU;OAAG,WAClG,6BACC,0DAAC,CAAA,GAAA,iCAAK;QACJ,SAAS;QACT,kBAAkB,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;QACrC,SAAQ;QACR,aAAY;OACX,8BAKT,0DAAC;QAAI,WAAW,CAAA,GAAA,oCAAS,EAAE,CAAA,GAAA,mDAAK,GAAG;qBACjC,0DAAC,CAAA,GAAA,sCAAU;QAAG,GAAG,gBAAgB;QAAE,SAAQ;qBACzC,0DAAC,CAAA,GAAA,2DAAU;AAKrB;AAEA,IAAI,0DAAS,CAAA,GAAA,sCAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/toast/src/Toast.tsx"],"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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {Button, ClearButton} from '@react-spectrum/button';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport CrossMedium from '@spectrum-icons/ui/CrossMedium';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport InfoMedium from '@spectrum-icons/ui/InfoMedium';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {QueuedToast, ToastState} from '@react-stately/toast';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/toast/vars.css';\nimport SuccessMedium from '@spectrum-icons/ui/SuccessMedium';\nimport toastContainerStyles from './toastContainer.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useToast} from '@react-aria/toast';\n\nexport interface SpectrumToastValue extends DOMProps {\n  children: string,\n  variant: 'positive' | 'negative' | 'info' | 'neutral',\n  actionLabel?: string,\n  onAction?: () => void,\n  shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastProps {\n  toast: QueuedToast<SpectrumToastValue>,\n  state: ToastState<SpectrumToastValue>\n}\n\n// TODO: express should use filled icons...\nexport const ICONS = {\n  info: InfoMedium,\n  negative: AlertMedium,\n  positive: SuccessMedium\n};\n\nfunction Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    toast: {\n      key,\n      animation,\n      content: {\n        children,\n        variant,\n        actionLabel,\n        onAction,\n        shouldCloseOnAction\n      }\n    },\n    state,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {\n    closeButtonProps,\n    titleProps,\n    toastProps,\n    contentProps\n  } = useToast(props, state, domRef);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/toast');\n  let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;\n  let Icon = ICONS[variant];\n  let {isFocusVisible, focusProps} = useFocusRing();\n\n  const handleAction = () => {\n    if (onAction) {\n      onAction();\n    }\n\n    if (shouldCloseOnAction) {\n      state.close(key);\n    }\n  };\n\n  return (\n    <div\n      {...styleProps}\n      {...mergeProps(toastProps, focusProps)}\n      {...filterDOMProps(props.toast.content)}\n      ref={domRef}\n      className={classNames(styles,\n        'spectrum-Toast',\n        {['spectrum-Toast--' + variant]: variant},\n        styleProps.className,\n        classNames(\n          toastContainerStyles,\n          'spectrum-Toast',\n          {'focus-ring': isFocusVisible}\n        )\n      )}\n      style={{\n        ...styleProps.style,\n        zIndex: props.toast.priority\n      }}\n      data-animation={animation}\n      onAnimationEnd={() => {\n        if (animation === 'exiting') {\n          state.remove(key);\n        }\n      }}>\n      <div\n        {...contentProps}\n        className={classNames(toastContainerStyles, 'spectrum-Toast-contentWrapper')}>\n        {Icon &&\n          <Icon\n            aria-label={iconLabel}\n            UNSAFE_className={classNames(styles, 'spectrum-Toast-typeIcon')} />\n        }\n        <div className={classNames(styles, 'spectrum-Toast-body')} role=\"presentation\">\n          <div className={classNames(styles, 'spectrum-Toast-content')} role=\"presentation\" {...titleProps}>{children}</div>\n          {actionLabel &&\n            <Button\n              onPress={handleAction}\n              UNSAFE_className={classNames(styles, 'spectrum-Button')}\n              variant=\"secondary\"\n              staticColor=\"white\">\n              {actionLabel}\n            </Button>\n          }\n        </div>\n      </div>\n      <div className={classNames(styles, 'spectrum-Toast-buttons')}>\n        <ClearButton {...closeButtonProps} variant=\"overBackground\">\n          <CrossMedium />\n        </ClearButton>\n      </div>\n    </div>\n  );\n}\n\nlet _Toast = React.forwardRef(Toast);\nexport {_Toast as Toast};\n"],"names":[],"version":3,"file":"Toast.main.js.map"}

package/dist/Toast.mjs

@@ -1,17 +1,17 @@
 import $iu2Jc$intlStringsmodulejs from "./intlStrings.mjs";
-import "./vars.85cde188.css";
+import "./vars.c6e65b7e.css";
 import $iu2Jc$toast_vars_cssmodulejs from "./toast_vars_css.mjs";
-import "./toastContainer.b596792c.css";
+import "./toastContainer.da404f80.css";
 import $iu2Jc$toastContainer_cssmodulejs from "./toastContainer_css.mjs";
-import {ToasterContext as $e46feef4e4c28a4b$export$9194c0aa0cd7a9ff} from "./Toaster.mjs";
 import $iu2Jc$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
 import {Button as $iu2Jc$Button, ClearButton as $iu2Jc$ClearButton} from "@react-spectrum/button";
 import {useDOMRef as $iu2Jc$useDOMRef, useStyleProps as $iu2Jc$useStyleProps, classNames as $iu2Jc$classNames} from "@react-spectrum/utils";
 import $iu2Jc$spectrumiconsuiCrossMedium from "@spectrum-icons/ui/CrossMedium";
-import {filterDOMProps as $iu2Jc$filterDOMProps} from "@react-aria/utils";
+import {mergeProps as $iu2Jc$mergeProps, filterDOMProps as $iu2Jc$filterDOMProps} from "@react-aria/utils";
 import $iu2Jc$spectrumiconsuiInfoMedium from "@spectrum-icons/ui/InfoMedium";
-import $iu2Jc$react, {useContext as $iu2Jc$useContext} from "react";
+import $iu2Jc$react from "react";
 import $iu2Jc$spectrumiconsuiSuccessMedium from "@spectrum-icons/ui/SuccessMedium";
+import {useFocusRing as $iu2Jc$useFocusRing} from "@react-aria/focus";
 import {useLocalizedStringFormatter as $iu2Jc$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useToast as $iu2Jc$useToast} from "@react-aria/toast";
 
@@ -49,28 +49,27 @@ const $7e7a2952509f3a56$export$fde44257752a9f60 = {
     positive: (0, $iu2Jc$spectrumiconsuiSuccessMedium)
 };
 function $7e7a2952509f3a56$var$Toast(props, ref) {
-    var _state_visibleToasts_;
     let { toast: { key: key, animation: animation, content: { children: children, variant: variant, actionLabel: actionLabel, onAction: onAction, shouldCloseOnAction: shouldCloseOnAction } }, state: state, ...otherProps } = props;
     let domRef = (0, $iu2Jc$useDOMRef)(ref);
-    let { closeButtonProps: closeButtonProps, titleProps: titleProps, toastProps: toastProps } = (0, $iu2Jc$useToast)(props, state, domRef);
+    let { closeButtonProps: closeButtonProps, titleProps: titleProps, toastProps: toastProps, contentProps: contentProps } = (0, $iu2Jc$useToast)(props, state, domRef);
     let { styleProps: styleProps } = (0, $iu2Jc$useStyleProps)(otherProps);
     let stringFormatter = (0, $iu2Jc$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iu2Jc$intlStringsmodulejs))), '@react-spectrum/toast');
     let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;
     let Icon = $7e7a2952509f3a56$export$fde44257752a9f60[variant];
-    let isFocusVisible = (0, $iu2Jc$useContext)((0, $e46feef4e4c28a4b$export$9194c0aa0cd7a9ff));
+    let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $iu2Jc$useFocusRing)();
     const handleAction = ()=>{
         if (onAction) onAction();
         if (shouldCloseOnAction) state.close(key);
     };
     return /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
         ...styleProps,
-        ...toastProps,
+        ...(0, $iu2Jc$mergeProps)(toastProps, focusProps),
         ...(0, $iu2Jc$filterDOMProps)(props.toast.content),
         ref: domRef,
         className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast', {
             ['spectrum-Toast--' + variant]: variant
         }, styleProps.className, (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toastContainer_cssmodulejs))), 'spectrum-Toast', {
-            'focus-ring': props.toast.key === ((_state_visibleToasts_ = state.visibleToasts[0]) === null || _state_visibleToasts_ === void 0 ? void 0 : _state_visibleToasts_.key) && isFocusVisible
+            'focus-ring': isFocusVisible
         })),
         style: {
             ...styleProps.style,
@@ -80,20 +79,25 @@ function $7e7a2952509f3a56$var$Toast(props, ref) {
         onAnimationEnd: ()=>{
             if (animation === 'exiting') state.remove(key);
         }
+    }, /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
+        ...contentProps,
+        className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toastContainer_cssmodulejs))), 'spectrum-Toast-contentWrapper')
     }, Icon && /*#__PURE__*/ (0, $iu2Jc$react).createElement(Icon, {
         "aria-label": iconLabel,
         UNSAFE_className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-typeIcon')
     }), /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
-        className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-body')
+        className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-body'),
+        role: "presentation"
     }, /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
         className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-content'),
+        role: "presentation",
         ...titleProps
     }, children), actionLabel && /*#__PURE__*/ (0, $iu2Jc$react).createElement((0, $iu2Jc$Button), {
         onPress: handleAction,
         UNSAFE_className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Button'),
         variant: "secondary",
         staticColor: "white"
-    }, actionLabel)), /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
+    }, actionLabel))), /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
         className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-buttons')
     }, /*#__PURE__*/ (0, $iu2Jc$react).createElement((0, $iu2Jc$ClearButton), {
         ...closeButtonProps,

package/dist/Toast.module.js

@@ -1,17 +1,17 @@
 import $iu2Jc$intlStringsmodulejs from "./intlStrings.module.js";
-import "./vars.85cde188.css";
+import "./vars.c6e65b7e.css";
 import $iu2Jc$toast_vars_cssmodulejs from "./toast_vars_css.module.js";
-import "./toastContainer.b596792c.css";
+import "./toastContainer.da404f80.css";
 import $iu2Jc$toastContainer_cssmodulejs from "./toastContainer_css.module.js";
-import {ToasterContext as $e46feef4e4c28a4b$export$9194c0aa0cd7a9ff} from "./Toaster.module.js";
 import $iu2Jc$spectrumiconsuiAlertMedium from "@spectrum-icons/ui/AlertMedium";
 import {Button as $iu2Jc$Button, ClearButton as $iu2Jc$ClearButton} from "@react-spectrum/button";
 import {useDOMRef as $iu2Jc$useDOMRef, useStyleProps as $iu2Jc$useStyleProps, classNames as $iu2Jc$classNames} from "@react-spectrum/utils";
 import $iu2Jc$spectrumiconsuiCrossMedium from "@spectrum-icons/ui/CrossMedium";
-import {filterDOMProps as $iu2Jc$filterDOMProps} from "@react-aria/utils";
+import {mergeProps as $iu2Jc$mergeProps, filterDOMProps as $iu2Jc$filterDOMProps} from "@react-aria/utils";
 import $iu2Jc$spectrumiconsuiInfoMedium from "@spectrum-icons/ui/InfoMedium";
-import $iu2Jc$react, {useContext as $iu2Jc$useContext} from "react";
+import $iu2Jc$react from "react";
 import $iu2Jc$spectrumiconsuiSuccessMedium from "@spectrum-icons/ui/SuccessMedium";
+import {useFocusRing as $iu2Jc$useFocusRing} from "@react-aria/focus";
 import {useLocalizedStringFormatter as $iu2Jc$useLocalizedStringFormatter} from "@react-aria/i18n";
 import {useToast as $iu2Jc$useToast} from "@react-aria/toast";
 
@@ -49,28 +49,27 @@ const $7e7a2952509f3a56$export$fde44257752a9f60 = {
     positive: (0, $iu2Jc$spectrumiconsuiSuccessMedium)
 };
 function $7e7a2952509f3a56$var$Toast(props, ref) {
-    var _state_visibleToasts_;
     let { toast: { key: key, animation: animation, content: { children: children, variant: variant, actionLabel: actionLabel, onAction: onAction, shouldCloseOnAction: shouldCloseOnAction } }, state: state, ...otherProps } = props;
     let domRef = (0, $iu2Jc$useDOMRef)(ref);
-    let { closeButtonProps: closeButtonProps, titleProps: titleProps, toastProps: toastProps } = (0, $iu2Jc$useToast)(props, state, domRef);
+    let { closeButtonProps: closeButtonProps, titleProps: titleProps, toastProps: toastProps, contentProps: contentProps } = (0, $iu2Jc$useToast)(props, state, domRef);
     let { styleProps: styleProps } = (0, $iu2Jc$useStyleProps)(otherProps);
     let stringFormatter = (0, $iu2Jc$useLocalizedStringFormatter)((0, ($parcel$interopDefault($iu2Jc$intlStringsmodulejs))), '@react-spectrum/toast');
     let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;
     let Icon = $7e7a2952509f3a56$export$fde44257752a9f60[variant];
-    let isFocusVisible = (0, $iu2Jc$useContext)((0, $e46feef4e4c28a4b$export$9194c0aa0cd7a9ff));
+    let { isFocusVisible: isFocusVisible, focusProps: focusProps } = (0, $iu2Jc$useFocusRing)();
     const handleAction = ()=>{
         if (onAction) onAction();
         if (shouldCloseOnAction) state.close(key);
     };
     return /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
         ...styleProps,
-        ...toastProps,
+        ...(0, $iu2Jc$mergeProps)(toastProps, focusProps),
         ...(0, $iu2Jc$filterDOMProps)(props.toast.content),
         ref: domRef,
         className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast', {
             ['spectrum-Toast--' + variant]: variant
         }, styleProps.className, (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toastContainer_cssmodulejs))), 'spectrum-Toast', {
-            'focus-ring': props.toast.key === ((_state_visibleToasts_ = state.visibleToasts[0]) === null || _state_visibleToasts_ === void 0 ? void 0 : _state_visibleToasts_.key) && isFocusVisible
+            'focus-ring': isFocusVisible
         })),
         style: {
             ...styleProps.style,
@@ -80,20 +79,25 @@ function $7e7a2952509f3a56$var$Toast(props, ref) {
         onAnimationEnd: ()=>{
             if (animation === 'exiting') state.remove(key);
         }
+    }, /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
+        ...contentProps,
+        className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toastContainer_cssmodulejs))), 'spectrum-Toast-contentWrapper')
     }, Icon && /*#__PURE__*/ (0, $iu2Jc$react).createElement(Icon, {
         "aria-label": iconLabel,
         UNSAFE_className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-typeIcon')
     }), /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
-        className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-body')
+        className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-body'),
+        role: "presentation"
     }, /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
         className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-content'),
+        role: "presentation",
         ...titleProps
     }, children), actionLabel && /*#__PURE__*/ (0, $iu2Jc$react).createElement((0, $iu2Jc$Button), {
         onPress: handleAction,
         UNSAFE_className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Button'),
         variant: "secondary",
         staticColor: "white"
-    }, actionLabel)), /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
+    }, actionLabel))), /*#__PURE__*/ (0, $iu2Jc$react).createElement("div", {
         className: (0, $iu2Jc$classNames)((0, ($parcel$interopDefault($iu2Jc$toast_vars_cssmodulejs))), 'spectrum-Toast-buttons')
     }, /*#__PURE__*/ (0, $iu2Jc$react).createElement((0, $iu2Jc$ClearButton), {
         ...closeButtonProps,

package/dist/Toast.module.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkCM,MAAM,4CAAQ;IACnB,MAAM,CAAA,GAAA,gCAAS;IACf,UAAU,CAAA,GAAA,iCAAU;IACpB,UAAU,CAAA,GAAA,mCAAY;AACxB;AAEA,SAAS,4BAAM,KAAyB,EAAE,GAA2B;QAoDxB;IAnD3C,IAAI,EACF,OAAO,OACL,GAAG,aACH,SAAS,EACT,SAAS,YACP,QAAQ,WACR,OAAO,eACP,WAAW,YACX,QAAQ,uBACR,mBAAmB,EACpB,EACF,SACD,KAAK,EACL,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,oBACF,gBAAgB,cAChB,UAAU,cACV,UAAU,EACX,GAAG,CAAA,GAAA,eAAO,EAAE,OAAO,OAAO;IAC3B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,YAAY,WAAW,YAAY,YAAY,gBAAgB,MAAM,CAAC,WAAW;IACrF,IAAI,OAAO,yCAAK,CAAC,QAAQ;IACzB,IAAI,iBAAiB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,yCAAa;IAE7C,MAAM,eAAe;QACnB,IAAI,UACF;QAGF,IAAI,qBACF,MAAM,KAAK,CAAC;IAEhB;IAEA,qBACE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,qBAAa,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC;QACvC,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GACzB,kBACA;YAAC,CAAC,qBAAqB,QAAQ,EAAE;QAAO,GACxC,WAAW,SAAS,EACpB,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAmB,GACnB,kBACA;YAAC,cAAc,MAAM,KAAK,CAAC,GAAG,OAAK,wBAAA,MAAM,aAAa,CAAC,EAAE,cAAtB,4CAAA,sBAAwB,GAAG,KAAI;QAAc;QAGpF,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,QAAQ,MAAM,KAAK,CAAC,QAAQ;QAC9B;QACA,kBAAgB;QAChB,gBAAgB;YACd,IAAI,cAAc,WAChB,MAAM,MAAM,CAAC;QAEjB;OACC,sBACC,gCAAC;QACC,cAAY;QACZ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBAEzC,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;qBACjC,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAA4B,GAAG,UAAU;OAAG,WAC9E,6BACC,gCAAC,CAAA,GAAA,aAAK;QACJ,SAAS;QACT,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACrC,SAAQ;QACR,aAAY;OACX,6BAIP,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;qBACjC,gCAAC,CAAA,GAAA,kBAAU;QAAG,GAAG,gBAAgB;QAAE,SAAQ;qBACzC,gCAAC,CAAA,GAAA,iCAAU;AAKrB;AAEA,IAAI,0DAAS,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/toast/src/Toast.tsx"],"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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {Button, ClearButton} from '@react-spectrum/button';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport CrossMedium from '@spectrum-icons/ui/CrossMedium';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport InfoMedium from '@spectrum-icons/ui/InfoMedium';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {QueuedToast, ToastState} from '@react-stately/toast';\nimport React, {useContext} from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/toast/vars.css';\nimport SuccessMedium from '@spectrum-icons/ui/SuccessMedium';\nimport toastContainerStyles from './toastContainer.css';\nimport {ToasterContext} from './Toaster';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useToast} from '@react-aria/toast';\n\nexport interface SpectrumToastValue extends DOMProps {\n  children: string,\n  variant: 'positive' | 'negative' | 'info' | 'neutral',\n  actionLabel?: string,\n  onAction?: () => void,\n  shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastProps {\n  toast: QueuedToast<SpectrumToastValue>,\n  state: ToastState<SpectrumToastValue>\n}\n\n// TODO: express should use filled icons...\nexport const ICONS = {\n  info: InfoMedium,\n  negative: AlertMedium,\n  positive: SuccessMedium\n};\n\nfunction Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    toast: {\n      key,\n      animation,\n      content: {\n        children,\n        variant,\n        actionLabel,\n        onAction,\n        shouldCloseOnAction\n      }\n    },\n    state,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {\n    closeButtonProps,\n    titleProps,\n    toastProps\n  } = useToast(props, state, domRef);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/toast');\n  let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;\n  let Icon = ICONS[variant];\n  let isFocusVisible = useContext(ToasterContext);\n\n  const handleAction = () => {\n    if (onAction) {\n      onAction();\n    }\n\n    if (shouldCloseOnAction) {\n      state.close(key);\n    }\n  };\n\n  return (\n    <div\n      {...styleProps}\n      {...toastProps}\n      {...filterDOMProps(props.toast.content)}\n      ref={domRef}\n      className={classNames(styles,\n        'spectrum-Toast',\n        {['spectrum-Toast--' + variant]: variant},\n        styleProps.className,\n        classNames(\n          toastContainerStyles,\n          'spectrum-Toast',\n          {'focus-ring': props.toast.key === state.visibleToasts[0]?.key && isFocusVisible}\n        )\n      )}\n      style={{\n        ...styleProps.style,\n        zIndex: props.toast.priority\n      }}\n      data-animation={animation}\n      onAnimationEnd={() => {\n        if (animation === 'exiting') {\n          state.remove(key);\n        }\n      }}>\n      {Icon &&\n        <Icon\n          aria-label={iconLabel}\n          UNSAFE_className={classNames(styles, 'spectrum-Toast-typeIcon')} />\n      }\n      <div className={classNames(styles, 'spectrum-Toast-body')}>\n        <div className={classNames(styles, 'spectrum-Toast-content')} {...titleProps}>{children}</div>\n        {actionLabel &&\n          <Button\n            onPress={handleAction}\n            UNSAFE_className={classNames(styles, 'spectrum-Button')}\n            variant=\"secondary\"\n            staticColor=\"white\">\n            {actionLabel}\n          </Button>\n        }\n      </div>\n      <div className={classNames(styles, 'spectrum-Toast-buttons')}>\n        <ClearButton {...closeButtonProps} variant=\"overBackground\">\n          <CrossMedium />\n        </ClearButton>\n      </div>\n    </div>\n  );\n}\n\nlet _Toast = React.forwardRef(Toast);\nexport {_Toast as Toast};\n"],"names":[],"version":3,"file":"Toast.module.js.map"}
+{"mappings":";;;;;;;;;;;;;;;;;;;;;AAAA;;;;;;;;;;CAUC;;;;;;;;;;;;;;AAkCM,MAAM,4CAAQ;IACnB,MAAM,CAAA,GAAA,gCAAS;IACf,UAAU,CAAA,GAAA,iCAAU;IACpB,UAAU,CAAA,GAAA,mCAAY;AACxB;AAEA,SAAS,4BAAM,KAAyB,EAAE,GAA2B;IACnE,IAAI,EACF,OAAO,OACL,GAAG,aACH,SAAS,EACT,SAAS,YACP,QAAQ,WACR,OAAO,eACP,WAAW,YACX,QAAQ,uBACR,mBAAmB,EACpB,EACF,SACD,KAAK,EACL,GAAG,YACJ,GAAG;IACJ,IAAI,SAAS,CAAA,GAAA,gBAAQ,EAAE;IACvB,IAAI,oBACF,gBAAgB,cAChB,UAAU,cACV,UAAU,gBACV,YAAY,EACb,GAAG,CAAA,GAAA,eAAO,EAAE,OAAO,OAAO;IAC3B,IAAI,cAAC,UAAU,EAAC,GAAG,CAAA,GAAA,oBAAY,EAAE;IAEjC,IAAI,kBAAkB,CAAA,GAAA,kCAA0B,EAAE,CAAA,GAAA,oDAAW,GAAG;IAChE,IAAI,YAAY,WAAW,YAAY,YAAY,gBAAgB,MAAM,CAAC,WAAW;IACrF,IAAI,OAAO,yCAAK,CAAC,QAAQ;IACzB,IAAI,kBAAC,cAAc,cAAE,UAAU,EAAC,GAAG,CAAA,GAAA,mBAAW;IAE9C,MAAM,eAAe;QACnB,IAAI,UACF;QAGF,IAAI,qBACF,MAAM,KAAK,CAAC;IAEhB;IAEA,qBACE,gCAAC;QACE,GAAG,UAAU;QACb,GAAG,CAAA,GAAA,iBAAS,EAAE,YAAY,WAAW;QACrC,GAAG,CAAA,GAAA,qBAAa,EAAE,MAAM,KAAK,CAAC,OAAO,CAAC;QACvC,KAAK;QACL,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GACzB,kBACA;YAAC,CAAC,qBAAqB,QAAQ,EAAE;QAAO,GACxC,WAAW,SAAS,EACpB,CAAA,GAAA,iBAAS,EACP,CAAA,GAAA,2DAAmB,GACnB,kBACA;YAAC,cAAc;QAAc;QAGjC,OAAO;YACL,GAAG,WAAW,KAAK;YACnB,QAAQ,MAAM,KAAK,CAAC,QAAQ;QAC9B;QACA,kBAAgB;QAChB,gBAAgB;YACd,IAAI,cAAc,WAChB,MAAM,MAAM,CAAC;QAEjB;qBACA,gCAAC;QACE,GAAG,YAAY;QAChB,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,2DAAmB,GAAG;OAC3C,sBACC,gCAAC;QACC,cAAY;QACZ,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;sBAEzC,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAAwB,MAAK;qBAC9D,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QAA2B,MAAK;QAAgB,GAAG,UAAU;OAAG,WAClG,6BACC,gCAAC,CAAA,GAAA,aAAK;QACJ,SAAS;QACT,kBAAkB,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;QACrC,SAAQ;QACR,aAAY;OACX,8BAKT,gCAAC;QAAI,WAAW,CAAA,GAAA,iBAAS,EAAE,CAAA,GAAA,uDAAK,GAAG;qBACjC,gCAAC,CAAA,GAAA,kBAAU;QAAG,GAAG,gBAAgB;QAAE,SAAQ;qBACzC,gCAAC,CAAA,GAAA,iCAAU;AAKrB;AAEA,IAAI,0DAAS,CAAA,GAAA,YAAI,EAAE,UAAU,CAAC","sources":["packages/@react-spectrum/toast/src/Toast.tsx"],"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 AlertMedium from '@spectrum-icons/ui/AlertMedium';\nimport {Button, ClearButton} from '@react-spectrum/button';\nimport {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';\nimport CrossMedium from '@spectrum-icons/ui/CrossMedium';\nimport {DOMProps, DOMRef} from '@react-types/shared';\nimport {filterDOMProps, mergeProps} from '@react-aria/utils';\nimport InfoMedium from '@spectrum-icons/ui/InfoMedium';\n// @ts-ignore\nimport intlMessages from '../intl/*.json';\nimport {QueuedToast, ToastState} from '@react-stately/toast';\nimport React from 'react';\nimport styles from '@adobe/spectrum-css-temp/components/toast/vars.css';\nimport SuccessMedium from '@spectrum-icons/ui/SuccessMedium';\nimport toastContainerStyles from './toastContainer.css';\nimport {useFocusRing} from '@react-aria/focus';\nimport {useLocalizedStringFormatter} from '@react-aria/i18n';\nimport {useToast} from '@react-aria/toast';\n\nexport interface SpectrumToastValue extends DOMProps {\n  children: string,\n  variant: 'positive' | 'negative' | 'info' | 'neutral',\n  actionLabel?: string,\n  onAction?: () => void,\n  shouldCloseOnAction?: boolean\n}\n\nexport interface SpectrumToastProps {\n  toast: QueuedToast<SpectrumToastValue>,\n  state: ToastState<SpectrumToastValue>\n}\n\n// TODO: express should use filled icons...\nexport const ICONS = {\n  info: InfoMedium,\n  negative: AlertMedium,\n  positive: SuccessMedium\n};\n\nfunction Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {\n  let {\n    toast: {\n      key,\n      animation,\n      content: {\n        children,\n        variant,\n        actionLabel,\n        onAction,\n        shouldCloseOnAction\n      }\n    },\n    state,\n    ...otherProps\n  } = props;\n  let domRef = useDOMRef(ref);\n  let {\n    closeButtonProps,\n    titleProps,\n    toastProps,\n    contentProps\n  } = useToast(props, state, domRef);\n  let {styleProps} = useStyleProps(otherProps);\n\n  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/toast');\n  let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;\n  let Icon = ICONS[variant];\n  let {isFocusVisible, focusProps} = useFocusRing();\n\n  const handleAction = () => {\n    if (onAction) {\n      onAction();\n    }\n\n    if (shouldCloseOnAction) {\n      state.close(key);\n    }\n  };\n\n  return (\n    <div\n      {...styleProps}\n      {...mergeProps(toastProps, focusProps)}\n      {...filterDOMProps(props.toast.content)}\n      ref={domRef}\n      className={classNames(styles,\n        'spectrum-Toast',\n        {['spectrum-Toast--' + variant]: variant},\n        styleProps.className,\n        classNames(\n          toastContainerStyles,\n          'spectrum-Toast',\n          {'focus-ring': isFocusVisible}\n        )\n      )}\n      style={{\n        ...styleProps.style,\n        zIndex: props.toast.priority\n      }}\n      data-animation={animation}\n      onAnimationEnd={() => {\n        if (animation === 'exiting') {\n          state.remove(key);\n        }\n      }}>\n      <div\n        {...contentProps}\n        className={classNames(toastContainerStyles, 'spectrum-Toast-contentWrapper')}>\n        {Icon &&\n          <Icon\n            aria-label={iconLabel}\n            UNSAFE_className={classNames(styles, 'spectrum-Toast-typeIcon')} />\n        }\n        <div className={classNames(styles, 'spectrum-Toast-body')} role=\"presentation\">\n          <div className={classNames(styles, 'spectrum-Toast-content')} role=\"presentation\" {...titleProps}>{children}</div>\n          {actionLabel &&\n            <Button\n              onPress={handleAction}\n              UNSAFE_className={classNames(styles, 'spectrum-Button')}\n              variant=\"secondary\"\n              staticColor=\"white\">\n              {actionLabel}\n            </Button>\n          }\n        </div>\n      </div>\n      <div className={classNames(styles, 'spectrum-Toast-buttons')}>\n        <ClearButton {...closeButtonProps} variant=\"overBackground\">\n          <CrossMedium />\n        </ClearButton>\n      </div>\n    </div>\n  );\n}\n\nlet _Toast = React.forwardRef(Toast);\nexport {_Toast as Toast};\n"],"names":[],"version":3,"file":"Toast.module.js.map"}

package/dist/ToastContainer.main.js

@@ -1,5 +1,8 @@
 var $6c5bd1047ecc310e$exports = require("./Toast.main.js");
+require("./toastContainer.da404f80.css");
+var $e20782d0579ed886$exports = require("./toastContainer_css.main.js");
 var $5b9f2c86c1b1395c$exports = require("./Toaster.main.js");
+var $5IVGU$reactspectrumutils = require("@react-spectrum/utils");
 var $5IVGU$reactariautils = require("@react-aria/utils");
 var $5IVGU$react = require("react");
 var $5IVGU$reactstatelytoast = require("@react-stately/toast");
@@ -32,6 +35,8 @@ $parcel$export(module.exports, "ToastQueue", () => $56cdf77f3be52eaf$export$f1f8
 
 
 
+
+
 // There is a single global toast queue instance for the whole app, initialized lazily.
 let $56cdf77f3be52eaf$var$globalToastQueue = null;
 function $56cdf77f3be52eaf$var$getGlobalToastQueue() {
@@ -64,7 +69,7 @@ function $56cdf77f3be52eaf$export$f2815235e76a62b9(props) {
     // Only the first one will actually render.
     // We use a ref to do this, since it will have a stable identity
     // over the lifetime of the component.
-    let ref = (0, $5IVGU$react.useRef)();
+    let ref = (0, $5IVGU$react.useRef)(undefined);
     // eslint-disable-next-line arrow-body-style
     (0, $5IVGU$react.useEffect)(()=>{
         $56cdf77f3be52eaf$var$toastProviders.add(ref);
@@ -86,11 +91,15 @@ function $56cdf77f3be52eaf$export$f2815235e76a62b9(props) {
     if (ref === activeToastContainer && state.visibleToasts.length > 0) return /*#__PURE__*/ (0, ($parcel$interopDefault($5IVGU$react))).createElement((0, $5b9f2c86c1b1395c$exports.Toaster), {
         state: state,
         ...props
-    }, state.visibleToasts.map((toast)=>/*#__PURE__*/ (0, ($parcel$interopDefault($5IVGU$react))).createElement((0, $6c5bd1047ecc310e$exports.Toast), {
+    }, /*#__PURE__*/ (0, ($parcel$interopDefault($5IVGU$react))).createElement("ol", {
+        className: (0, $5IVGU$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e20782d0579ed886$exports))), 'spectrum-ToastContainer-list')
+    }, state.visibleToasts.slice().reverse().map((toast)=>/*#__PURE__*/ (0, ($parcel$interopDefault($5IVGU$react))).createElement("li", {
             key: toast.key,
+            className: (0, $5IVGU$reactspectrumutils.classNames)((0, ($parcel$interopDefault($e20782d0579ed886$exports))), 'spectrum-ToastContainer-listitem')
+        }, /*#__PURE__*/ (0, ($parcel$interopDefault($5IVGU$react))).createElement((0, $6c5bd1047ecc310e$exports.Toast), {
             toast: toast,
             state: state
-        })));
+        })))));
     return null;
 }
 function $56cdf77f3be52eaf$var$addToast(children, variant, options = {}) {

package/dist/ToastContainer.main.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/toast/src/ToastContainer.tsx"],"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 {AriaToastRegionProps} from '@react-aria/toast';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport React, {ReactElement, useEffect, useRef} from 'react';\nimport {SpectrumToastValue, Toast} from './Toast';\nimport {Toaster} from './Toaster';\nimport {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';\nimport {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';\n\nexport interface SpectrumToastContainerProps extends AriaToastRegionProps {}\n\nexport interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\ntype CloseFunction = () => void;\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n  if (!globalToastQueue) {\n    globalToastQueue = new ToastQueue({\n      maxVisibleToasts: Infinity,\n      hasExitAnimation: true\n    });\n  }\n\n  return globalToastQueue;\n}\n\n// For testing. Not exported from the package index.\nexport function clearToastQueue() {\n  globalToastQueue = null;\n}\n\nlet toastProviders = new Set();\nlet subscriptions = new Set<() => void>();\nfunction subscribe(fn: () => void) {\n  subscriptions.add(fn);\n  return () => subscriptions.delete(fn);\n}\n\nfunction triggerSubscriptions() {\n  for (let fn of subscriptions) {\n    fn();\n  }\n}\n\nfunction getActiveToastContainer() {\n  return toastProviders.values().next().value;\n}\n\nfunction useActiveToastContainer() {\n  return useSyncExternalStore(subscribe, getActiveToastContainer, getActiveToastContainer);\n}\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: SpectrumToastContainerProps): ReactElement {\n  // Track all toast provider instances in a set.\n  // Only the first one will actually render.\n  // We use a ref to do this, since it will have a stable identity\n  // over the lifetime of the component.\n  let ref = useRef();\n\n  // eslint-disable-next-line arrow-body-style\n  useEffect(() => {\n    toastProviders.add(ref);\n    triggerSubscriptions();\n\n    return () => {\n      // When this toast provider unmounts, reset all animations so that\n      // when the new toast provider renders, it is seamless.\n      for (let toast of getGlobalToastQueue().visibleToasts) {\n        toast.animation = null;\n      }\n\n      // Remove this toast provider, and call subscriptions.\n      // This will cause all other instances to re-render,\n      // and the first one to become the new active toast provider.\n      toastProviders.delete(ref);\n      triggerSubscriptions();\n    };\n  }, []);\n\n  // Only render if this is the active toast provider instance, and there are visible toasts.\n  let activeToastContainer = useActiveToastContainer();\n  let state = useToastQueue(getGlobalToastQueue());\n  if (ref === activeToastContainer && state.visibleToasts.length > 0) {\n    return (\n      <Toaster state={state} {...props}>\n        {state.visibleToasts.map((toast) => (\n          <Toast\n            key={toast.key}\n            toast={toast}\n            state={state} />\n        ))}\n      </Toaster>\n    );\n  }\n\n  return null;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {\n  // Dispatch a custom event so that toasts can be intercepted and re-targeted, e.g. when inside an iframe.\n  if (typeof CustomEvent !== 'undefined' && typeof window !== 'undefined') {\n    let event = new CustomEvent('react-spectrum-toast', {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        children,\n        variant,\n        options\n      }\n    });\n\n    let shouldContinue = window.dispatchEvent(event);\n    if (!shouldContinue) {\n      return;\n    }\n  }\n\n  let value = {\n    children,\n    variant,\n    actionLabel: options.actionLabel,\n    onAction: options.onAction,\n    shouldCloseOnAction: options.shouldCloseOnAction,\n    ...filterDOMProps(options)\n  };\n\n  // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n  // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n  // It is debatable whether non-actionable toasts would also fail.\n  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;\n  let queue = getGlobalToastQueue();\n  let key = queue.add(value, {timeout, onClose: options.onClose});\n  return () => queue.close(key);\n}\n\nconst SpectrumToastQueue = {\n  /** Queues a neutral toast. */\n  neutral(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'neutral', options);\n  },\n  /** Queues a positive toast. */\n  positive(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'positive', options);\n  },\n  /** Queues a negative toast. */\n  negative(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'negative', options);\n  },\n  /** Queues an informational toast. */\n  info(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'info', options);\n  }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n"],"names":[],"version":3,"file":"ToastContainer.main.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/toast/src/ToastContainer.tsx"],"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 {AriaToastRegionProps} from '@react-aria/toast';\nimport {classNames} from '@react-spectrum/utils';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport React, {ReactElement, useEffect, useRef} from 'react';\nimport {SpectrumToastValue, Toast} from './Toast';\nimport toastContainerStyles from './toastContainer.css';\nimport {Toaster} from './Toaster';\nimport {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';\nimport {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';\n\nexport interface SpectrumToastContainerProps extends AriaToastRegionProps {}\n\nexport interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\ntype CloseFunction = () => void;\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n  if (!globalToastQueue) {\n    globalToastQueue = new ToastQueue({\n      maxVisibleToasts: Infinity,\n      hasExitAnimation: true\n    });\n  }\n\n  return globalToastQueue;\n}\n\n// For testing. Not exported from the package index.\nexport function clearToastQueue() {\n  globalToastQueue = null;\n}\n\nlet toastProviders = new Set();\nlet subscriptions = new Set<() => void>();\nfunction subscribe(fn: () => void) {\n  subscriptions.add(fn);\n  return () => subscriptions.delete(fn);\n}\n\nfunction triggerSubscriptions() {\n  for (let fn of subscriptions) {\n    fn();\n  }\n}\n\nfunction getActiveToastContainer() {\n  return toastProviders.values().next().value;\n}\n\nfunction useActiveToastContainer() {\n  return useSyncExternalStore(subscribe, getActiveToastContainer, getActiveToastContainer);\n}\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: SpectrumToastContainerProps): ReactElement {\n  // Track all toast provider instances in a set.\n  // Only the first one will actually render.\n  // We use a ref to do this, since it will have a stable identity\n  // over the lifetime of the component.\n  let ref = useRef(undefined);\n\n  // eslint-disable-next-line arrow-body-style\n  useEffect(() => {\n    toastProviders.add(ref);\n    triggerSubscriptions();\n\n    return () => {\n      // When this toast provider unmounts, reset all animations so that\n      // when the new toast provider renders, it is seamless.\n      for (let toast of getGlobalToastQueue().visibleToasts) {\n        toast.animation = null;\n      }\n\n      // Remove this toast provider, and call subscriptions.\n      // This will cause all other instances to re-render,\n      // and the first one to become the new active toast provider.\n      toastProviders.delete(ref);\n      triggerSubscriptions();\n    };\n  }, []);\n\n  // Only render if this is the active toast provider instance, and there are visible toasts.\n  let activeToastContainer = useActiveToastContainer();\n  let state = useToastQueue(getGlobalToastQueue());\n\n  if (ref === activeToastContainer && state.visibleToasts.length > 0) {\n    return (\n      <Toaster state={state} {...props}>\n        <ol className={classNames(toastContainerStyles, 'spectrum-ToastContainer-list')}>\n          {state.visibleToasts.slice().reverse().map((toast) => (\n            <li\n              key={toast.key}\n              className={classNames(toastContainerStyles, 'spectrum-ToastContainer-listitem')}>\n              <Toast\n                toast={toast}\n                state={state} />\n            </li>\n          ))}\n        </ol>\n      </Toaster>\n    );\n  }\n\n  return null;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {\n  // Dispatch a custom event so that toasts can be intercepted and re-targeted, e.g. when inside an iframe.\n  if (typeof CustomEvent !== 'undefined' && typeof window !== 'undefined') {\n    let event = new CustomEvent('react-spectrum-toast', {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        children,\n        variant,\n        options\n      }\n    });\n\n    let shouldContinue = window.dispatchEvent(event);\n    if (!shouldContinue) {\n      return;\n    }\n  }\n\n  let value = {\n    children,\n    variant,\n    actionLabel: options.actionLabel,\n    onAction: options.onAction,\n    shouldCloseOnAction: options.shouldCloseOnAction,\n    ...filterDOMProps(options)\n  };\n\n  // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n  // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n  // It is debatable whether non-actionable toasts would also fail.\n  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;\n  let queue = getGlobalToastQueue();\n  let key = queue.add(value, {timeout, onClose: options.onClose});\n  return () => queue.close(key);\n}\n\nconst SpectrumToastQueue = {\n  /** Queues a neutral toast. */\n  neutral(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'neutral', options);\n  },\n  /** Queues a positive toast. */\n  positive(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'positive', options);\n  },\n  /** Queues a negative toast. */\n  negative(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'negative', options);\n  },\n  /** Queues an informational toast. */\n  info(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'info', options);\n  }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n"],"names":[],"version":3,"file":"ToastContainer.main.js.map"}

package/dist/ToastContainer.mjs

@@ -1,10 +1,17 @@
 import {Toast as $7e7a2952509f3a56$export$8d8dc7d5f743331b} from "./Toast.mjs";
+import "./toastContainer.da404f80.css";
+import $5lmgI$toastContainer_cssmodulejs from "./toastContainer_css.mjs";
 import {Toaster as $e46feef4e4c28a4b$export$fb98e3a2a4cd92d7} from "./Toaster.mjs";
+import {classNames as $5lmgI$classNames} from "@react-spectrum/utils";
 import {filterDOMProps as $5lmgI$filterDOMProps} from "@react-aria/utils";
 import $5lmgI$react, {useRef as $5lmgI$useRef, useEffect as $5lmgI$useEffect} from "react";
 import {ToastQueue as $5lmgI$ToastQueue, useToastQueue as $5lmgI$useToastQueue} from "@react-stately/toast";
 import {useSyncExternalStore as $5lmgI$useSyncExternalStore} from "use-sync-external-store/shim/index.js";
 
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -21,6 +28,8 @@ import {useSyncExternalStore as $5lmgI$useSyncExternalStore} from "use-sync-exte
 
 
 
+
+
 // There is a single global toast queue instance for the whole app, initialized lazily.
 let $02c59b34bd70955a$var$globalToastQueue = null;
 function $02c59b34bd70955a$var$getGlobalToastQueue() {
@@ -53,7 +62,7 @@ function $02c59b34bd70955a$export$f2815235e76a62b9(props) {
     // Only the first one will actually render.
     // We use a ref to do this, since it will have a stable identity
     // over the lifetime of the component.
-    let ref = (0, $5lmgI$useRef)();
+    let ref = (0, $5lmgI$useRef)(undefined);
     // eslint-disable-next-line arrow-body-style
     (0, $5lmgI$useEffect)(()=>{
         $02c59b34bd70955a$var$toastProviders.add(ref);
@@ -75,11 +84,15 @@ function $02c59b34bd70955a$export$f2815235e76a62b9(props) {
     if (ref === activeToastContainer && state.visibleToasts.length > 0) return /*#__PURE__*/ (0, $5lmgI$react).createElement((0, $e46feef4e4c28a4b$export$fb98e3a2a4cd92d7), {
         state: state,
         ...props
-    }, state.visibleToasts.map((toast)=>/*#__PURE__*/ (0, $5lmgI$react).createElement((0, $7e7a2952509f3a56$export$8d8dc7d5f743331b), {
+    }, /*#__PURE__*/ (0, $5lmgI$react).createElement("ol", {
+        className: (0, $5lmgI$classNames)((0, ($parcel$interopDefault($5lmgI$toastContainer_cssmodulejs))), 'spectrum-ToastContainer-list')
+    }, state.visibleToasts.slice().reverse().map((toast)=>/*#__PURE__*/ (0, $5lmgI$react).createElement("li", {
             key: toast.key,
+            className: (0, $5lmgI$classNames)((0, ($parcel$interopDefault($5lmgI$toastContainer_cssmodulejs))), 'spectrum-ToastContainer-listitem')
+        }, /*#__PURE__*/ (0, $5lmgI$react).createElement((0, $7e7a2952509f3a56$export$8d8dc7d5f743331b), {
             toast: toast,
             state: state
-        })));
+        })))));
     return null;
 }
 function $02c59b34bd70955a$var$addToast(children, variant, options = {}) {

package/dist/ToastContainer.module.js

@@ -1,10 +1,17 @@
 import {Toast as $7e7a2952509f3a56$export$8d8dc7d5f743331b} from "./Toast.module.js";
+import "./toastContainer.da404f80.css";
+import $5lmgI$toastContainer_cssmodulejs from "./toastContainer_css.module.js";
 import {Toaster as $e46feef4e4c28a4b$export$fb98e3a2a4cd92d7} from "./Toaster.module.js";
+import {classNames as $5lmgI$classNames} from "@react-spectrum/utils";
 import {filterDOMProps as $5lmgI$filterDOMProps} from "@react-aria/utils";
 import $5lmgI$react, {useRef as $5lmgI$useRef, useEffect as $5lmgI$useEffect} from "react";
 import {ToastQueue as $5lmgI$ToastQueue, useToastQueue as $5lmgI$useToastQueue} from "@react-stately/toast";
 import {useSyncExternalStore as $5lmgI$useSyncExternalStore} from "use-sync-external-store/shim/index.js";
 
+
+function $parcel$interopDefault(a) {
+  return a && a.__esModule ? a.default : a;
+}
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -21,6 +28,8 @@ import {useSyncExternalStore as $5lmgI$useSyncExternalStore} from "use-sync-exte
 
 
 
+
+
 // There is a single global toast queue instance for the whole app, initialized lazily.
 let $02c59b34bd70955a$var$globalToastQueue = null;
 function $02c59b34bd70955a$var$getGlobalToastQueue() {
@@ -53,7 +62,7 @@ function $02c59b34bd70955a$export$f2815235e76a62b9(props) {
     // Only the first one will actually render.
     // We use a ref to do this, since it will have a stable identity
     // over the lifetime of the component.
-    let ref = (0, $5lmgI$useRef)();
+    let ref = (0, $5lmgI$useRef)(undefined);
     // eslint-disable-next-line arrow-body-style
     (0, $5lmgI$useEffect)(()=>{
         $02c59b34bd70955a$var$toastProviders.add(ref);
@@ -75,11 +84,15 @@ function $02c59b34bd70955a$export$f2815235e76a62b9(props) {
     if (ref === activeToastContainer && state.visibleToasts.length > 0) return /*#__PURE__*/ (0, $5lmgI$react).createElement((0, $e46feef4e4c28a4b$export$fb98e3a2a4cd92d7), {
         state: state,
         ...props
-    }, state.visibleToasts.map((toast)=>/*#__PURE__*/ (0, $5lmgI$react).createElement((0, $7e7a2952509f3a56$export$8d8dc7d5f743331b), {
+    }, /*#__PURE__*/ (0, $5lmgI$react).createElement("ol", {
+        className: (0, $5lmgI$classNames)((0, ($parcel$interopDefault($5lmgI$toastContainer_cssmodulejs))), 'spectrum-ToastContainer-list')
+    }, state.visibleToasts.slice().reverse().map((toast)=>/*#__PURE__*/ (0, $5lmgI$react).createElement("li", {
             key: toast.key,
+            className: (0, $5lmgI$classNames)((0, ($parcel$interopDefault($5lmgI$toastContainer_cssmodulejs))), 'spectrum-ToastContainer-listitem')
+        }, /*#__PURE__*/ (0, $5lmgI$react).createElement((0, $7e7a2952509f3a56$export$8d8dc7d5f743331b), {
             toast: toast,
             state: state
-        })));
+        })))));
     return null;
 }
 function $02c59b34bd70955a$var$addToast(children, variant, options = {}) {

package/dist/ToastContainer.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-spectrum/toast/src/ToastContainer.tsx"],"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 {AriaToastRegionProps} from '@react-aria/toast';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport React, {ReactElement, useEffect, useRef} from 'react';\nimport {SpectrumToastValue, Toast} from './Toast';\nimport {Toaster} from './Toaster';\nimport {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';\nimport {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';\n\nexport interface SpectrumToastContainerProps extends AriaToastRegionProps {}\n\nexport interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\ntype CloseFunction = () => void;\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n  if (!globalToastQueue) {\n    globalToastQueue = new ToastQueue({\n      maxVisibleToasts: Infinity,\n      hasExitAnimation: true\n    });\n  }\n\n  return globalToastQueue;\n}\n\n// For testing. Not exported from the package index.\nexport function clearToastQueue() {\n  globalToastQueue = null;\n}\n\nlet toastProviders = new Set();\nlet subscriptions = new Set<() => void>();\nfunction subscribe(fn: () => void) {\n  subscriptions.add(fn);\n  return () => subscriptions.delete(fn);\n}\n\nfunction triggerSubscriptions() {\n  for (let fn of subscriptions) {\n    fn();\n  }\n}\n\nfunction getActiveToastContainer() {\n  return toastProviders.values().next().value;\n}\n\nfunction useActiveToastContainer() {\n  return useSyncExternalStore(subscribe, getActiveToastContainer, getActiveToastContainer);\n}\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: SpectrumToastContainerProps): ReactElement {\n  // Track all toast provider instances in a set.\n  // Only the first one will actually render.\n  // We use a ref to do this, since it will have a stable identity\n  // over the lifetime of the component.\n  let ref = useRef();\n\n  // eslint-disable-next-line arrow-body-style\n  useEffect(() => {\n    toastProviders.add(ref);\n    triggerSubscriptions();\n\n    return () => {\n      // When this toast provider unmounts, reset all animations so that\n      // when the new toast provider renders, it is seamless.\n      for (let toast of getGlobalToastQueue().visibleToasts) {\n        toast.animation = null;\n      }\n\n      // Remove this toast provider, and call subscriptions.\n      // This will cause all other instances to re-render,\n      // and the first one to become the new active toast provider.\n      toastProviders.delete(ref);\n      triggerSubscriptions();\n    };\n  }, []);\n\n  // Only render if this is the active toast provider instance, and there are visible toasts.\n  let activeToastContainer = useActiveToastContainer();\n  let state = useToastQueue(getGlobalToastQueue());\n  if (ref === activeToastContainer && state.visibleToasts.length > 0) {\n    return (\n      <Toaster state={state} {...props}>\n        {state.visibleToasts.map((toast) => (\n          <Toast\n            key={toast.key}\n            toast={toast}\n            state={state} />\n        ))}\n      </Toaster>\n    );\n  }\n\n  return null;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {\n  // Dispatch a custom event so that toasts can be intercepted and re-targeted, e.g. when inside an iframe.\n  if (typeof CustomEvent !== 'undefined' && typeof window !== 'undefined') {\n    let event = new CustomEvent('react-spectrum-toast', {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        children,\n        variant,\n        options\n      }\n    });\n\n    let shouldContinue = window.dispatchEvent(event);\n    if (!shouldContinue) {\n      return;\n    }\n  }\n\n  let value = {\n    children,\n    variant,\n    actionLabel: options.actionLabel,\n    onAction: options.onAction,\n    shouldCloseOnAction: options.shouldCloseOnAction,\n    ...filterDOMProps(options)\n  };\n\n  // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n  // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n  // It is debatable whether non-actionable toasts would also fail.\n  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;\n  let queue = getGlobalToastQueue();\n  let key = queue.add(value, {timeout, onClose: options.onClose});\n  return () => queue.close(key);\n}\n\nconst SpectrumToastQueue = {\n  /** Queues a neutral toast. */\n  neutral(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'neutral', options);\n  },\n  /** Queues a positive toast. */\n  positive(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'positive', options);\n  },\n  /** Queues a negative toast. */\n  negative(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'negative', options);\n  },\n  /** Queues an informational toast. */\n  info(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'info', options);\n  }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n"],"names":[],"version":3,"file":"ToastContainer.module.js.map"}
+{"mappings":"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","sources":["packages/@react-spectrum/toast/src/ToastContainer.tsx"],"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 {AriaToastRegionProps} from '@react-aria/toast';\nimport {classNames} from '@react-spectrum/utils';\nimport {DOMProps} from '@react-types/shared';\nimport {filterDOMProps} from '@react-aria/utils';\nimport React, {ReactElement, useEffect, useRef} from 'react';\nimport {SpectrumToastValue, Toast} from './Toast';\nimport toastContainerStyles from './toastContainer.css';\nimport {Toaster} from './Toaster';\nimport {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';\nimport {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';\n\nexport interface SpectrumToastContainerProps extends AriaToastRegionProps {}\n\nexport interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {\n  /** A label for the action button within the toast. */\n  actionLabel?: string,\n  /** Handler that is called when the action button is pressed. */\n  onAction?: () => void,\n  /** Whether the toast should automatically close when an action is performed. */\n  shouldCloseOnAction?: boolean\n}\n\ntype CloseFunction = () => void;\n\n// There is a single global toast queue instance for the whole app, initialized lazily.\nlet globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;\nfunction getGlobalToastQueue() {\n  if (!globalToastQueue) {\n    globalToastQueue = new ToastQueue({\n      maxVisibleToasts: Infinity,\n      hasExitAnimation: true\n    });\n  }\n\n  return globalToastQueue;\n}\n\n// For testing. Not exported from the package index.\nexport function clearToastQueue() {\n  globalToastQueue = null;\n}\n\nlet toastProviders = new Set();\nlet subscriptions = new Set<() => void>();\nfunction subscribe(fn: () => void) {\n  subscriptions.add(fn);\n  return () => subscriptions.delete(fn);\n}\n\nfunction triggerSubscriptions() {\n  for (let fn of subscriptions) {\n    fn();\n  }\n}\n\nfunction getActiveToastContainer() {\n  return toastProviders.values().next().value;\n}\n\nfunction useActiveToastContainer() {\n  return useSyncExternalStore(subscribe, getActiveToastContainer, getActiveToastContainer);\n}\n\n/**\n * A ToastContainer renders the queued toasts in an application. It should be placed\n * at the root of the app.\n */\nexport function ToastContainer(props: SpectrumToastContainerProps): ReactElement {\n  // Track all toast provider instances in a set.\n  // Only the first one will actually render.\n  // We use a ref to do this, since it will have a stable identity\n  // over the lifetime of the component.\n  let ref = useRef(undefined);\n\n  // eslint-disable-next-line arrow-body-style\n  useEffect(() => {\n    toastProviders.add(ref);\n    triggerSubscriptions();\n\n    return () => {\n      // When this toast provider unmounts, reset all animations so that\n      // when the new toast provider renders, it is seamless.\n      for (let toast of getGlobalToastQueue().visibleToasts) {\n        toast.animation = null;\n      }\n\n      // Remove this toast provider, and call subscriptions.\n      // This will cause all other instances to re-render,\n      // and the first one to become the new active toast provider.\n      toastProviders.delete(ref);\n      triggerSubscriptions();\n    };\n  }, []);\n\n  // Only render if this is the active toast provider instance, and there are visible toasts.\n  let activeToastContainer = useActiveToastContainer();\n  let state = useToastQueue(getGlobalToastQueue());\n\n  if (ref === activeToastContainer && state.visibleToasts.length > 0) {\n    return (\n      <Toaster state={state} {...props}>\n        <ol className={classNames(toastContainerStyles, 'spectrum-ToastContainer-list')}>\n          {state.visibleToasts.slice().reverse().map((toast) => (\n            <li\n              key={toast.key}\n              className={classNames(toastContainerStyles, 'spectrum-ToastContainer-listitem')}>\n              <Toast\n                toast={toast}\n                state={state} />\n            </li>\n          ))}\n        </ol>\n      </Toaster>\n    );\n  }\n\n  return null;\n}\n\nfunction addToast(children: string, variant: SpectrumToastValue['variant'], options: SpectrumToastOptions = {}) {\n  // Dispatch a custom event so that toasts can be intercepted and re-targeted, e.g. when inside an iframe.\n  if (typeof CustomEvent !== 'undefined' && typeof window !== 'undefined') {\n    let event = new CustomEvent('react-spectrum-toast', {\n      cancelable: true,\n      bubbles: true,\n      detail: {\n        children,\n        variant,\n        options\n      }\n    });\n\n    let shouldContinue = window.dispatchEvent(event);\n    if (!shouldContinue) {\n      return;\n    }\n  }\n\n  let value = {\n    children,\n    variant,\n    actionLabel: options.actionLabel,\n    onAction: options.onAction,\n    shouldCloseOnAction: options.shouldCloseOnAction,\n    ...filterDOMProps(options)\n  };\n\n  // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible\n  // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.\n  // It is debatable whether non-actionable toasts would also fail.\n  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;\n  let queue = getGlobalToastQueue();\n  let key = queue.add(value, {timeout, onClose: options.onClose});\n  return () => queue.close(key);\n}\n\nconst SpectrumToastQueue = {\n  /** Queues a neutral toast. */\n  neutral(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'neutral', options);\n  },\n  /** Queues a positive toast. */\n  positive(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'positive', options);\n  },\n  /** Queues a negative toast. */\n  negative(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'negative', options);\n  },\n  /** Queues an informational toast. */\n  info(children: string, options: SpectrumToastOptions = {}): CloseFunction {\n    return addToast(children, 'info', options);\n  }\n};\n\nexport {SpectrumToastQueue as ToastQueue};\n"],"names":[],"version":3,"file":"ToastContainer.module.js.map"}