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

package/src/Toast.tsx

@@ -14,7 +14,8 @@ import AlertMedium from '@spectrum-icons/ui/AlertMedium';
 import {Button, ClearButton} from '@react-spectrum/button';
 import {classNames, useDOMRef, useStyleProps} from '@react-spectrum/utils';
 import CrossMedium from '@spectrum-icons/ui/CrossMedium';
-import {DOMRef} from '@react-types/shared';
+import {DOMProps, DOMRef} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
 import InfoMedium from '@spectrum-icons/ui/InfoMedium';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
@@ -27,7 +28,7 @@ import {ToasterContext} from './Toaster';
 import {useLocalizedStringFormatter} from '@react-aria/i18n';
 import {useToast} from '@react-aria/toast';
 
-export interface SpectrumToastValue {
+export interface SpectrumToastValue extends DOMProps {
   children: string,
   variant: 'positive' | 'negative' | 'info' | 'neutral',
   actionLabel?: string,
@@ -90,6 +91,7 @@ function Toast(props: SpectrumToastProps, ref: DOMRef<HTMLDivElement>) {
     <div
       {...styleProps}
       {...toastProps}
+      {...filterDOMProps(props.toast.content)}
       ref={domRef}
       className={classNames(styles,
         'spectrum-Toast',

package/src/ToastContainer.tsx

@@ -11,6 +11,8 @@
  */
 
 import {AriaToastRegionProps} from '@react-aria/toast';
+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 {Toaster} from './Toaster';
@@ -19,7 +21,7 @@ import {useSyncExternalStore} from 'use-sync-external-store/shim/index.js';
 
 export interface SpectrumToastContainerProps extends AriaToastRegionProps {}
 
-export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'> {
+export interface SpectrumToastOptions extends Omit<ToastOptions, 'priority'>, DOMProps {
   /** A label for the action button within the toast. */
   actionLabel?: string,
   /** Handler that is called when the action button is pressed. */
@@ -35,7 +37,7 @@ let globalToastQueue: ToastQueue<SpectrumToastValue> | null = null;
 function getGlobalToastQueue() {
   if (!globalToastQueue) {
     globalToastQueue = new ToastQueue({
-      maxVisibleToasts: 1,
+      maxVisibleToasts: Infinity,
       hasExitAnimation: true
     });
   }
@@ -143,7 +145,8 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
     variant,
     actionLabel: options.actionLabel,
     onAction: options.onAction,
-    shouldCloseOnAction: options.shouldCloseOnAction
+    shouldCloseOnAction: options.shouldCloseOnAction,
+    ...filterDOMProps(options)
   };
 
   // Minimum time of 5s from https://spectrum.adobe.com/page/toast/#Auto-dismissible
@@ -151,7 +154,7 @@ function addToast(children: string, variant: SpectrumToastValue['variant'], opti
   // It is debatable whether non-actionable toasts would also fail.
   let timeout = options.timeout && !options.onAction ? Math.max(options.timeout, 5000) : null;
   let queue = getGlobalToastQueue();
-  let key = queue.add(value, {priority: getPriority(variant, options), timeout, onClose: options.onClose});
+  let key = queue.add(value, {timeout, onClose: options.onClose});
   return () => queue.close(key);
 }
 
@@ -175,20 +178,3 @@ const SpectrumToastQueue = {
 };
 
 export {SpectrumToastQueue as ToastQueue};
-
-// https://spectrum.adobe.com/page/toast/#Priority-queue
-// TODO: if a lower priority toast comes in, no way to know until you dismiss the higher priority one.
-const VARIANT_PRIORITY = {
-  negative: 10,
-  positive: 3,
-  info: 2,
-  neutral: 1
-};
-
-function getPriority(variant: SpectrumToastValue['variant'], options: SpectrumToastOptions) {
-  let priority = VARIANT_PRIORITY[variant] || 1;
-  if (options.onAction) {
-    priority += 4;
-  }
-  return priority;
-}

package/src/Toaster.tsx

@@ -19,6 +19,7 @@ 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 {
   children: ReactNode,
@@ -36,6 +37,7 @@ export function Toaster(props: ToastContainerProps): ReactElement {
   let ref = useRef();
   let {regionProps} = useToastRegion(props, state, ref);
   let {focusProps, isFocusVisible} = useFocusRing();
+  let {getContainer} = useUNSTABLE_PortalContext();
 
   let contents = (
     <Provider UNSAFE_style={{background: 'transparent'}}>
@@ -55,5 +57,5 @@ export function Toaster(props: ToastContainerProps): ReactElement {
     </Provider>
   );
 
-  return ReactDOM.createPortal(contents, document.body);
+  return ReactDOM.createPortal(contents, getContainer?.() ?? document.body);
 }

package/src/toastContainer.css

@@ -20,23 +20,23 @@
   display: flex;
   pointer-events: none;
   outline: none;
+  margin-block-end: 8px;
 
   .spectrum-Toast {
-    position: absolute;
-    margin: 16px;
+    margin: 8px;
     pointer-events: all;
   }
 
   &[data-position=top] {
     top: 0;
-    flex-direction: column;
+    flex-direction: column-reverse;
     --slide-from: translateY(-100%);
     --slide-to: translateY(0);
   }
 
   &[data-position=bottom] {
     bottom: 0;
-    flex-direction: column-reverse;
+    flex-direction: column;
     --slide-from: translateY(100%);
     --slide-to: translateY(0);
   }

package/dist/main.css.map

@@ -1 +0,0 @@
-{"mappings":"AAwBA;;;;;;;;;;;;;;;AAkBA;;;;;;;;;AAUA;;;;;;;;;AASA;;;;;;AAOI;;;;AAAA;;;;AAAA;;;;AAAA;;;;AAOJ;;;;;;;;;;AAWE;;;;;;AAoBF;;;;;AAKA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;;;;AAIA;EACE;;;;;AC5HF;;;;;;;;AAOE;;;;;;;;;;;;;;AAiBF;;;AAII;;;;;AAQF;;;;AAKE;;;;;AAOJ;;;;;;;;;;AASE;;;;;;AAMA;;;;;;;AAOA;;;;;;;AAOA;;;;;;AAKE;;;;AAAA;;;;AAKF;;;;AAIA;;;;;;AAKE;;;;AAAA;;;;AAMJ;;;;;;AAME;;;;AAIA;;;;AAKF;;;;;;;;;;AAUA","sources":["packages/@adobe/spectrum-css-temp/components/toast/vars.css","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 './index.css';\n@import './skin.css';\n","/*\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\n  .spectrum-Toast {\n    position: absolute;\n    margin: 16px;\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  &[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":"main.css.map"}