Function ToastContainer

packages/@react-spectrum/s2/src/Toast.tsx:357–462

(props: ToastContainerProps)

 * at the root of the app.
 */
export function ToastContainer(props: ToastContainerProps): ReactNode {
  let {placement = 'bottom'} = props;
  let queue = getGlobalToastQueue();
  let align = 'center';
  [placement, align = 'center'] = placement.split(' ') as any;
  let stringFormatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/s2');
  let regionRef = useRef<HTMLDivElement | null>(null);

  let state = useOverlayTriggerState({});
  let {isOpen: isExpanded, close, toggle} = state;
  let ctx = useMemo(
    () => ({
      isExpanded,
      toggleExpanded() {
        if (!isExpanded && queue.visibleToasts.length <= 1) {
          return;
        }

        startViewTransition(() => toggle(), isExpanded ? 'toast-collapse' : 'toast-expand');
      }
    }),
    [isExpanded, toggle, queue]
  );

  // Set the state to collapsed whenever the queue is emptied.
  useEffect(() => {
    return queue.subscribe(() => {
      if (queue.visibleToasts.length === 0 && isExpanded) {
        close();
      }
    });
  }, [queue, isExpanded, close]);

  let collapse = () => {
    regionRef.current?.focus();
    ctx.toggleExpanded();
  };

  // Prevent scroll, aria hide outside, and contain focus when expanded, since we take over the whole screen.
  // Attach event handler to the ref since ToastRegion doesn't pass through onKeyDown.
  useModalOverlay({}, state, regionRef);
  useEvent(
    regionRef,
    'keydown',
    isExpanded
      ? e => {
          if (e.key === 'Escape') {
            collapse();
          }
        }
      : undefined
  );

  let prefersReducedMotion = useMediaQuery('(prefers-reduced-motion)');
  let reduceMotion = props['PRIVATE_forceReducedMotion'] ?? prefersReducedMotion;
  useEffect(() => {
    let oldGlobalReduceMotion = globalReduceMotion;
    globalReduceMotion = reduceMotion;