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

package/src/Toast.tsx

@@ -15,16 +15,16 @@ import {Button, ClearButton} from '@react-spectrum/button';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import CrossMedium from '@spectrum-icons/ui/CrossMedium';
 import {DOMProps, DOMRef} from '@react-types/shared';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import InfoMedium from '@spectrum-icons/ui/InfoMedium';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {QueuedToast, ToastState} from '@react-stately/toast';
-import React, {useContext} from 'react';
+import React 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 {useFocusRing} from '@react-aria/focus';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useToast} from '@react-aria/toast';
 
@@ -68,14 +68,15 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
   let {
     closeButtonProps,
     titleProps,
-    toastProps
+    toastProps,
+    contentProps
   } = useToast(props, state, domRef);
   let {styleProps} = useStyleProps(otherProps);
 
   let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/toast');
   let iconLabel = variant && variant !== 'neutral' ? stringFormatter.format(variant) : null;
   let Icon = ICONS[variant];
-  let isFocusVisible = useContext(ToasterContext);
+  let {isFocusVisible, focusProps} = useFocusRing();
 
   const handleAction = () => {
     if (onAction) {
@@ -90,7 +91,7 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
   return (
     <div
       {...styleProps}
-      {...toastProps}
+      {...mergeProps(toastProps, focusProps)}
       {...filterDOMProps(props.toast.content)}
       ref={domRef}
       className={classNames(styles,
@@ -100,7 +101,7 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
         classNames(
           toastContainerStyles,
           'spectrum-Toast',
-          {'focus-ring': props.toast.key === state.visibleToasts[0]?.key && isFocusVisible}
+          {'focus-ring': isFocusVisible}
         )
       )}
       style={{
@@ -113,22 +114,26 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
           state.remove(key);
         }
       }}>
-      {Icon &&
-        <Icon
-          aria-label={iconLabel}
-          UNSAFE_className={classNames(styles, 'spectrum-Toast-typeIcon')} />
-      }
-      <div className={classNames(styles, 'spectrum-Toast-body')}>
-        <div className={classNames(styles, 'spectrum-Toast-content')} {...titleProps}>{children}</div>
-        {actionLabel &&
-          <Button
-            onPress={handleAction}
-            UNSAFE_className={classNames(styles, 'spectrum-Button')}
-            variant="secondary"
-            staticColor="white">
-            {actionLabel}
-          </Button>
+      <div
+        {...contentProps}
+        className={classNames(toastContainerStyles, 'spectrum-Toast-contentWrapper')}>
+        {Icon &&
+          <Icon
+            aria-label={iconLabel}
+            UNSAFE_className={classNames(styles, 'spectrum-Toast-typeIcon')} />
         }
+        <div className={classNames(styles, 'spectrum-Toast-body')} role="presentation">
+          <div className={classNames(styles, 'spectrum-Toast-content')} role="presentation" {...titleProps}>{children}</div>
+          {actionLabel &&
+            <Button
+              onPress={handleAction}
+              UNSAFE_className={classNames(styles, 'spectrum-Button')}
+              variant="secondary"
+              staticColor="white">
+              {actionLabel}
+            </Button>
+          }
+        </div>
       </div>
       <div className={classNames(styles, 'spectrum-Toast-buttons')}>
         <ClearButton {...closeButtonProps} variant="overBackground">

package/src/ToastContainer.tsx

@@ -11,10 +11,12 @@
  */
 
 import {AriaToastRegionProps} from '@react-aria/toast';
+import {classNames} from '@react-spectrum/utils';
 import {DOMProps} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {ReactElement, useEffect, useRef} from 'react';
 import {SpectrumToastValue, Toast} from './Toast';
+import toastContainerStyles from './toastContainer.css';
 import {Toaster} from './Toaster';
 import {ToastOptions, ToastQueue, useToastQueue} from '@react-stately/toast';
 import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
@@ -80,7 +82,7 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   // 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 = useRef();
+  let ref = useRef(undefined);
 
   // eslint-disable-next-line arrow-body-style
   useEffect(() => {
@@ -105,15 +107,21 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   // Only render if this is the active toast provider instance, and there are visible toasts.
   let activeToastContainer = useActiveToastContainer();
   let state = useToastQueue(getGlobalToastQueue());
+
   if (ref === activeToastContainer && state.visibleToasts.length > 0) {
     return (
       <Toaster state={state} {...props}>
-        {state.visibleToasts.map((toast) => (
-          <Toast
-            key={toast.key}
-            toast={toast}
-            state={state} />
-        ))}
+        <ol className={classNames(toastContainerStyles, 'spectrum-ToastContainer-list')}>
+          {state.visibleToasts.slice().reverse().map((toast) => (
+            <li
+              key={toast.key}
+              className={classNames(toastContainerStyles, 'spectrum-ToastContainer-listitem')}>
+              <Toast
+                toast={toast}
+                state={state} />
+            </li>
+          ))}
+        </ol>
       </Toaster>
     );
   }

package/src/Toaster.tsx

@@ -12,13 +12,13 @@
 
 import {AriaToastRegionProps, useToastRegion} from '@react-aria/toast';
 import {classNames} from '@react-spectrum/utils';
+import {FocusScope, useFocusRing} from '@react-aria/focus';
 import {mergeProps} from '@react-aria/utils';
 import {Provider} from '@react-spectrum/provider';
 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';
 import {useUNSTABLE_PortalContext} from '@react-aria/overlays';
 
 interface ToastContainerProps extends AriaToastRegionProps {
@@ -34,26 +34,29 @@ export function Toaster(props: ToastContainerProps): ReactElement {
     state
   } = props;
 
-  let ref = useRef();
+  let ref = useRef(undefined);
   let {regionProps} = useToastRegion(props, state, ref);
   let {focusProps, isFocusVisible} = useFocusRing();
   let {getContainer} = useUNSTABLE_PortalContext();
 
   let contents = (
     <Provider UNSAFE_style={{background: 'transparent'}}>
-      <ToasterContext.Provider value={isFocusVisible}>
-        <div
-          {...mergeProps(regionProps, focusProps)}
-          ref={ref}
-          data-position="bottom"
-          data-placement="center"
-          className={classNames(
-            toastContainerStyles,
-            'react-spectrum-ToastContainer'
-          )}>
-          {children}
-        </div>
-      </ToasterContext.Provider>
+      <FocusScope>
+        <ToasterContext.Provider value={isFocusVisible}>
+          <div
+            {...mergeProps(regionProps, focusProps)}
+            ref={ref}
+            data-position="bottom"
+            data-placement="center"
+            className={classNames(
+              toastContainerStyles,
+              'react-spectrum-ToastContainer',
+              {'focus-ring': isFocusVisible}
+            )}>
+            {children}
+          </div>
+        </ToasterContext.Provider>
+      </FocusScope>
     </Provider>
   );
 

package/src/toastContainer.css

@@ -13,6 +13,11 @@
 @import "../../../@adobe/spectrum-css-temp/components/commons/focus-ring.css";
 
 .react-spectrum-ToastContainer {
+  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);
+
   position: fixed;
   inset-inline-start: 0;
   inset-inline-end: 0;
@@ -20,7 +25,9 @@
   display: flex;
   pointer-events: none;
   outline: none;
+  /* keep focus ring inside the viewport */
   margin-block-end: 8px;
+  margin-inline: 8px;
 
   .spectrum-Toast {
     margin: 8px;
@@ -29,14 +36,14 @@
 
   &[data-position=top] {
     top: 0;
-    flex-direction: column-reverse;
+    flex-direction: column;
     --slide-from: translateY(-100%);
     --slide-to: translateY(0);
   }
 
   &[data-position=bottom] {
     bottom: 0;
-    flex-direction: column;
+    flex-direction: column-reverse;
     --slide-from: translateY(100%);
     --slide-to: translateY(0);
   }
@@ -72,6 +79,9 @@
   --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);
   --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);
 
+  position: relative;
+  outline: none;
+
   &[data-animation=entering] {
     animation: slide-in 300ms;
   }
@@ -79,6 +89,26 @@
   &[data-animation=exiting] {
     animation: fade-out 300ms forwards;
   }
+
+  .spectrum-Toast-contentWrapper {
+    display: inline-flex;
+  }
+}
+
+.spectrum-ToastContainer-list {
+  display: inherit;
+  flex-direction: inherit;
+  align-items: inherit;
+  list-style-type: none;
+  margin-block-start: 0;
+  margin-block-end: 0;
+  margin-inline-start: 0;
+  margin-inline-end: 0;
+  padding-inline-start: 0;
+}
+
+.spectrum-ToastContainer-listitem {
+  display: inline-block;
 }
 
 @keyframes slide-in {

package/dist/toastContainer.b596792c.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;AAUE;;;;;AAKA;;;;;;;AAOA;;;;;;;AAOA;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;AAIA;;;;;;AAKE;;;;AAAA;;;;AAMJ;;;;;;AAME;;;;AAIA;;;;AAKF;;;;;;;;;;AAUA","sources":["packages/@react-spectrum/toast/src/toastContainer.css"],"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\n@import \"../../../@adobe/spectrum-css-temp/components/commons/focus-ring.css\";\n\n.react-spectrum-ToastContainer {\n  position: fixed;\n  inset-inline-start: 0;\n  inset-inline-end: 0;\n  z-index: 100050; /* above modals */\n  display: flex;\n  pointer-events: none;\n  outline: none;\n  margin-block-end: 8px;\n\n  .spectrum-Toast {\n    margin: 8px;\n    pointer-events: all;\n  }\n\n  &[data-position=top] {\n    top: 0;\n    flex-direction: column-reverse;\n    --slide-from: translateY(-100%);\n    --slide-to: translateY(0);\n  }\n\n  &[data-position=bottom] {\n    bottom: 0;\n    flex-direction: column;\n    --slide-from: translateY(100%);\n    --slide-to: translateY(0);\n  }\n\n  &[data-placement=left] {\n    align-items: flex-start;\n    --slide-from: translateX(-100%);\n    --slide-to: translateX(0);\n\n    &:dir(rtl) {\n      --slide-from: translateX(100%);\n    }\n  }\n\n  &[data-placement=center] {\n    align-items: center;\n  }\n\n  &[data-placement=right] {\n    align-items: flex-end;\n    --slide-from: translateX(100%);\n    --slide-to: translateX(0);\n\n    &:dir(rtl) {\n      --slide-from: translateX(-100%);\n    }\n  }\n}\n\n.spectrum-Toast {\n  composes: spectrum-FocusRing;\n  --spectrum-focus-ring-border-radius: var(--spectrum-toast-border-radius);\n  --spectrum-focus-ring-gap: var(--spectrum-alias-focus-ring-gap);\n  --spectrum-focus-ring-size: var(--spectrum-alias-focus-ring-size);\n\n  &[data-animation=entering] {\n    animation: slide-in 300ms;\n  }\n\n  &[data-animation=exiting] {\n    animation: fade-out 300ms forwards;\n  }\n}\n\n@keyframes slide-in {\n  from {\n    transform: var(--slide-from);\n  }\n\n  to {\n    transform: var(--slide-to);\n  }\n}\n\n@keyframes fade-out {\n  from {\n    opacity: 1;\n  }\n\n  to {\n    opacity: 0;\n  }\n}\n"],"names":[],"version":3,"file":"toastContainer.b596792c.css.map"}

package/dist/vars.85cde188.css.map

@@ -1 +0,0 @@
-{"mappings":"AAwBA;;;;;;;;;;;;;;;AAkBA;;;;;;;;;AAUA;;;;;;;;;AASA;;;;;;AAOI;;;;AAOJ;;;;;;;;;;AAWE;;;;;;AAoBF;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;EACE","sources":["packages/@adobe/spectrum-css-temp/components/toast/vars.css"],"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\n@import './index.css';\n@import './skin.css';\n"],"names":[],"version":3,"file":"vars.85cde188.css.map"}