@react-spectrum/toast 3.0.0-nightly.3114 → 3.0.0

package/src/ToastContainer.tsx

@@ -14,16 +14,21 @@ 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 {flushSync} from 'react-dom';
+import React, {ReactElement, useEffect, useMemo, 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';
 
-export interface SpectrumToastContainerProps extends AriaToastRegionProps {}
+export type ToastPlacement = 'top' | 'top end' | 'bottom' | 'bottom end';
 
-export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {
+export interface SpectrumToastContainerProps extends AriaToastRegionProps {
+  placement?: ToastPlacement
+}
+
+export interface SpectrumToastOptions extends ToastOptions, DOMProps {
   /** A label for the action button within the toast. */
   actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
@@ -34,13 +39,23 @@ export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DO
 
 type CloseFunction = () => void;
 
+function wrapInViewTransition(fn: () => void): void {
+  if ('startViewTransition' in document) {
+    document.startViewTransition(() => {
+      flushSync(fn);
+    }).ready.catch(() => {});
+  } else {
+    fn();
+  }
+}
+
 // There is a single global toast queue instance for the whole app, initialized lazily.
 let globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;
 function getGlobalToastQueue() {
   if (!globalToastQueue) {
     globalToastQueue = new ToastQueue({
       maxVisibleToasts: Infinity,
-      hasExitAnimation: true
+      wrapUpdate: wrapInViewTransition
     });
   }
 
@@ -77,25 +92,19 @@ function useActiveToastContainer() {
  * A ToastContainer renders the queued toasts in an application. It should be placed
  * at the root of the app.
  */
-export function ToastContainer(props: SpectrumToastContainerProps): ReactElement {
+export function ToastContainer(props: SpectrumToastContainerProps): ReactElement | null {
   // Track all toast provider instances in a set.
   // 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(undefined);
+  let ref = useRef(null);
+
 
-  // eslint-disable-next-line arrow-body-style
   useEffect(() => {
     toastProviders.add(ref);
     triggerSubscriptions();
 
     return () => {
-      // When this toast provider unmounts, reset all animations so that
-      // when the new toast provider renders, it is seamless.
-      for (let toast of getGlobalToastQueue().visibleToasts) {
-        toast.animation = null;
-      }
-
       // Remove this toast provider, and call subscriptions.
       // This will cause all other instances to re-render,
       // and the first one to become the new active toast provider.
@@ -108,19 +117,38 @@ export function ToastContainer(props: SpectrumToastContainerProps): ReactElement
   let activeToastContainer = useActiveToastContainer();
   let state = useToastQueue(getGlobalToastQueue());
 
+  let {placement, isCentered} = useMemo(() => {
+    let placements = (props.placement ?? 'bottom').split(' ');
+    let placement = placements[placements.length - 1];
+    let isCentered = placements.length === 1;
+    return {placement, isCentered};
+  }, [props.placement]);
+
   if (ref === activeToastContainer && state.visibleToasts.length > 0) {
     return (
       <Toaster state={state} {...props}>
         <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>
-          ))}
+          {state.visibleToasts.map((toast, index) => {
+            let shouldFade = isCentered && index !== 0;
+            return (
+              <li
+                key={toast.key}
+                className={classNames(toastContainerStyles, 'spectrum-ToastContainer-listitem')}
+                style={{
+                  viewTransitionName: toast.key,
+                  viewTransitionClass: classNames(
+                    toastContainerStyles,
+                    'toast',
+                    placement,
+                    {'fadeOnly': shouldFade}
+                  )
+                }}>
+                <Toast
+                  toast={toast}
+                  state={state} />
+              </li>
+            );
+          })}
         </ol>
       </Toaster>
     );
@@ -144,7 +172,7 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
 
     let shouldContinue = window.dispatchEvent(event);
     if (!shouldContinue) {
-      return;
+      return () => {};
     }
   }
 
@@ -160,7 +188,7 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
   // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible
   // Actionable toasts cannot be auto dismissed. That would fail WCAG SC 2.2.1.
   // It is debatable whether non-actionable toasts would also fail.
-  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;
+  let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : undefined;
   let queue = getGlobalToastQueue();
   let key = queue.add(value, {timeout, onClose: options.onClose});
   return () => queue.close(key);

package/src/Toaster.tsx

@@ -15,15 +15,17 @@ 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 React, {createContext, ReactElement, ReactNode, useMemo, useRef} from 'react';
 import ReactDOM from 'react-dom';
 import toastContainerStyles from './toastContainer.css';
+import type {ToastPlacement} from './ToastContainer';
 import {ToastState} from '@react-stately/toast';
 import {useUNSTABLE_PortalContext} from '@react-aria/overlays';
 
 interface ToastContainerProps extends AriaToastRegionProps {
   children: ReactNode,
-  state: ToastState<unknown>
+  state: ToastState<unknown>,
+  placement?: ToastPlacement
 }
 
 export const ToasterContext = createContext(false);
@@ -34,11 +36,16 @@ export function Toaster(props: ToastContainerProps): ReactElement {
     state
   } = props;
 
-  let ref = useRef(undefined);
+  let ref = useRef(null);
   let {regionProps} = useToastRegion(props, state, ref);
   let {focusProps, isFocusVisible} = useFocusRing();
   let {getContainer} = useUNSTABLE_PortalContext();
 
+  let [position, placement] = useMemo(() => {
+    let [pos = 'bottom', place = 'center'] = props.placement?.split(' ') || [];
+    return [pos, place];
+  }, [props.placement]);
+
   let contents = (
     <Provider UNSAFE_style={{background: 'transparent'}}>
       <FocusScope>
@@ -46,8 +53,8 @@ export function Toaster(props: ToastContainerProps): ReactElement {
           <div
             {...mergeProps(regionProps, focusProps)}
             ref={ref}
-            data-position="bottom"
-            data-placement="center"
+            data-position={position}
+            data-placement={placement}
             className={classNames(
               toastContainerStyles,
               'react-spectrum-ToastContainer',

package/src/toastContainer.css

@@ -38,20 +38,17 @@
     top: 0;
     flex-direction: column;
     --slide-from: translateY(-100%);
-    --slide-to: translateY(0);
   }
 
   &[data-position=bottom] {
     bottom: 0;
     flex-direction: column-reverse;
     --slide-from: translateY(100%);
-    --slide-to: translateY(0);
   }
 
-  &[data-placement=left] {
+  &[data-placement=start] {
     align-items: flex-start;
     --slide-from: translateX(-100%);
-    --slide-to: translateX(0);
 
     &:dir(rtl) {
       --slide-from: translateX(100%);
@@ -62,10 +59,9 @@
     align-items: center;
   }
 
-  &[data-placement=right] {
+  &[data-placement=end] {
     align-items: flex-end;
     --slide-from: translateX(100%);
-    --slide-to: translateX(0);
 
     &:dir(rtl) {
       --slide-from: translateX(-100%);
@@ -82,14 +78,6 @@
   position: relative;
   outline: none;
 
-  &[data-animation=entering] {
-    animation: slide-in 300ms;
-  }
-
-  &[data-animation=exiting] {
-    animation: fade-out 300ms forwards;
-  }
-
   .spectrum-Toast-contentWrapper {
     display: inline-flex;
   }
@@ -100,33 +88,67 @@
   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;
+  margin: 0;
   padding-inline-start: 0;
 }
 
 .spectrum-ToastContainer-listitem {
   display: inline-block;
+  view-transition-class: toast;
 }
 
 @keyframes slide-in {
   from {
-    transform: var(--slide-from);
+    translate: var(--slideX) var(--slideY);
+    opacity: 0;
   }
+}
 
+@keyframes slide-out {
   to {
-    transform: var(--slide-to);
+    translate: var(--slideX) var(--slideY);
+    opacity: 0;
   }
 }
 
 @keyframes fade-out {
-  from {
-    opacity: 1;
-  }
-
   to {
     opacity: 0;
   }
 }
+
+::view-transition-group(.toast) {
+  animation-duration: 300ms;
+}
+
+::view-transition-group(.toast.bottom) {
+  --slideX: 0;
+  --slideY: calc(100% + 12px);
+}
+
+::view-transition-group(.toast.top) {
+  --slideX: 0;
+  --slideY: calc(-100% - 12px);
+}
+
+::view-transition-group(.toast.start) {
+  --slideX: calc(-100% - 12px);
+  --slideY: 0;
+}
+
+::view-transition-group(.toast.end) {
+  --slideX: calc(100% + 12px);
+  --slideY: 0;
+}
+
+::view-transition-new(.toast):only-child {
+  animation-name: slide-in;
+}
+
+::view-transition-old(.toast):only-child {
+  animation-name: slide-out;
+}
+
+::view-transition-old(.toast.fadeOnly):only-child {
+  animation-name: fade-out;
+}

package/dist/toastContainer.da404f80.css.map

@@ -1 +0,0 @@
-{"mappings":"AAYA;;;;;;;;AAOE;;;;;;;;;;;AAqBE;;;;;AAQF;;;;AAKE;;;;;AAOJ;EACE;;;;EAIE;;;;;AAMJ;;;;;;;;;;;;;;;AAiBE;;;;;AAKA;;;;;;;AAOA;;;;;;;AAOA;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;AAIA;;;;;;AAKE;;;;AAAA;;;;AAMJ;;;;;;;;AASE;;;;AAIA;;;;AAIA;;;;AAKF;;;;;;;;;;AAYA;;;;AAIA;;;;;;;;;;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  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  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  /* keep focus ring inside the viewport */\n  margin-block-end: 8px;\n  margin-inline: 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;\n    --slide-from: translateY(-100%);\n    --slide-to: translateY(0);\n  }\n\n  &[data-position=bottom] {\n    bottom: 0;\n    flex-direction: column-reverse;\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  position: relative;\n  outline: none;\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  .spectrum-Toast-contentWrapper {\n    display: inline-flex;\n  }\n}\n\n.spectrum-ToastContainer-list {\n  display: inherit;\n  flex-direction: inherit;\n  align-items: inherit;\n  list-style-type: none;\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  padding-inline-start: 0;\n}\n\n.spectrum-ToastContainer-listitem {\n  display: inline-block;\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.da404f80.css.map"}