Function SpectrumToastList

packages/@react-spectrum/s2/src/Toast.tsx:464–502

({placement, align, reduceMotion})

}

function SpectrumToastList({placement, align, reduceMotion}) {
  let {isExpanded, toggleExpanded} = useContext(ToastContainerContext)!;

  // Attach click handler to ref since ToastList doesn't pass through onClick/onPress.
  let toastListRef = useRef(null);
  useEvent(toastListRef, 'click', e => {
    // Have to check if this is a button because stopPropagation in react events doesn't affect native events.
    if (!isExpanded && !(getEventTarget(e) as Element)?.closest('button')) {
      toggleExpanded();
    }
  });

  return (
    <ToastList<SpectrumToastValue>
      ref={toastListRef}
      style={({isHovered}) => {
        let origin = isHovered ? 95 : 55;
        return {
          perspective: 80,
          perspectiveOrigin:
            'center ' + (placement === 'top' ? `calc(100% + ${origin}px)` : `${-origin}px`),
          transition: 'perspective-origin 400ms'
        };
      }}
      className={
        toastCss[isExpanded ? 'toast-list-expanded' : 'toast-list-collapsed'] +
        toastList({placement, align, isExpanded})
      }>
      {({toast}) => (
        <SpectrumToast
          toast={toast}
          placement={placement}
          align={align}
          reduceMotion={reduceMotion}
        />
      )}
    </ToastList>
  );
}

interface SpectrumToastProps extends ToastProps<SpectrumToastValue> {
  placement?: 'top' | 'bottom';