@tamagui/toast 2.0.0-rc.9 → 2.0.0

package/src/ToastImpl.tsx

@@ -21,8 +21,17 @@ import type {
   Animated,
   GestureResponderEvent,
   PanResponderGestureState,
+  PanResponder as PanResponderType,
 } from 'react-native'
-import { PanResponder } from 'react-native'
+
+// Lazy load PanResponder only on native to avoid SSR issues
+const getPanResponder = (): typeof PanResponderType | null => {
+  if (process.env.TAMAGUI_TARGET === 'native') {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    return require('react-native').PanResponder
+  }
+  return null
+}
 import { TOAST_CONTEXT, TOAST_NAME } from './constants'
 import { ToastAnnounce } from './ToastAnnounce'
 import type { ScopedProps, SwipeDirection } from './ToastProvider'
@@ -281,6 +290,8 @@ const ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(
     })
 
     const panResponder = React.useMemo(() => {
+      const PanResponder = getPanResponder()
+      if (!PanResponder) return null
       return PanResponder.create({
         onMoveShouldSetPanResponder: (e, gesture) => {
           const shouldMove = shouldGrantGestureMove(context.swipeDirection, gesture)
@@ -330,7 +341,8 @@ const ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(
         {announceTextContent && (
           <ToastAnnounce
             scope={scope}
-            // toasts are always role=status to avoid stuttering issues with role=alert in SRs
+            // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+            // biome-ignore lint/a11y/useSemanticElements: <explanation>
             role="status"
             aria-live={type === 'foreground' ? 'assertive' : 'polite'}
             aria-atomic

package/src/ToastItemFrame.tsx

@@ -0,0 +1,136 @@
+/**
+ * Shared visual styled components for toast items.
+ * Shared across web and native — imported by ToastComposable.
+ */
+
+import { styled } from '@tamagui/core'
+import { XStack, YStack } from '@tamagui/stacks'
+import { SizableText } from '@tamagui/text'
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastPositionWrapper - handles absolute positioning and stacking animations
+ * On web: uses Tamagui transition/enterStyle/exitStyle
+ * On native: replaced by Animated.View with useAnimatedStyle
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastPositionWrapper = styled(YStack, {
+  name: 'ToastPositionWrapper',
+  pointerEvents: 'auto',
+  position: 'absolute',
+  left: 0,
+  right: 0,
+  opacity: 1,
+  scale: 1,
+  y: 0,
+  x: 0,
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastItemFrame - visual styling for the toast
+ * Shared across web and native — the visual appearance of the toast card.
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastItemFrame = styled(YStack, {
+  name: 'ToastItem',
+  userSelect: 'none',
+  cursor: 'default',
+  focusable: true,
+
+  variants: {
+    unstyled: {
+      false: {
+        backgroundColor: '$background',
+        borderRadius: '$6',
+        paddingHorizontal: '$4',
+        paddingVertical: '$3',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+        shadowColor: 'rgba(0, 0, 0, 0.15)',
+        shadowOffset: { width: 0, height: 4 },
+        shadowRadius: 12,
+        focusVisibleStyle: {
+          outlineWidth: 2,
+          outlineColor: '$color8',
+          outlineStyle: 'solid',
+        },
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastCloseFrame
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastCloseFrame = styled(XStack, {
+  name: 'ToastClose',
+  render: 'button',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+
+  variants: {
+    unstyled: {
+      false: {
+        width: 18,
+        height: 18,
+        borderRadius: '$10',
+        backgroundColor: '$background',
+        borderWidth: 1,
+        borderColor: '$borderColor',
+        shadowColor: 'rgba(0, 0, 0, 0.08)',
+        shadowOffset: { width: 0, height: 1 },
+        shadowRadius: 3,
+        hoverStyle: { backgroundColor: '$color3' },
+        pressStyle: { backgroundColor: '$color4' },
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastActionFrame - for action/cancel buttons with text
+ * -----------------------------------------------------------------------------------------------*/
+
+export const ToastActionFrame = styled(XStack, {
+  name: 'ToastAction',
+  render: 'button',
+  alignItems: 'center',
+  justifyContent: 'center',
+  cursor: 'pointer',
+
+  variants: {
+    unstyled: {
+      false: {
+        borderRadius: '$2',
+        paddingHorizontal: '$2',
+        height: 24,
+        backgroundColor: '$color5',
+        hoverStyle: { backgroundColor: '$color6' },
+        pressStyle: { backgroundColor: '$color7' },
+      },
+    },
+  } as const,
+
+  defaultVariants: {
+    unstyled: process.env.TAMAGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultCloseIcon
+ * -----------------------------------------------------------------------------------------------*/
+
+export const DefaultCloseIcon = () => (
+  <SizableText size="$1" color="$color11">
+    ✕
+  </SizableText>
+)

package/src/ToastPortal.tsx

@@ -1,6 +1,6 @@
+import { isWeb } from '@tamagui/constants'
 import { Portal } from '@tamagui/portal'
 import type { ReactNode } from 'react'
-import { Platform } from 'react-native'
 import { ReprogapateToastProvider, type ToastProviderContextValue } from './ToastProvider'
 
 export function ToastPortal(props: {
@@ -10,7 +10,7 @@ export function ToastPortal(props: {
 }) {
   const { context, children, zIndex } = props
   let content = children
-  if (Platform.OS === 'android' || Platform.OS === 'ios') {
+  if (!isWeb) {
     content = (
       <ReprogapateToastProvider context={context}>{children}</ReprogapateToastProvider>
     )

package/src/ToastProvider.tsx

@@ -17,7 +17,14 @@ const PROVIDER_NAME = 'ToastProvider'
 
 const [Collection, useCollection] = createCollection<TamaguiElement>('Toast')
 
-export type SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'
+export type SwipeDirection =
+  | 'vertical'
+  | 'up'
+  | 'down'
+  | 'horizontal'
+  | 'left'
+  | 'right'
+  | 'auto'
 
 export type ToastProviderContextValue = {
   id: string

package/src/ToastState.ts

@@ -0,0 +1,398 @@
+import type React from 'react'
+import type { CreateNativeToastOptions, NativeToastRef } from './types'
+
+// counter for generating unique toast ids
+let toastsCounter = 1
+
+export type ToastType = 'default' | 'success' | 'error' | 'warning' | 'info' | 'loading'
+
+export interface ToastT {
+  id: string | number
+  title: React.ReactNode | (() => React.ReactNode)
+  description?: React.ReactNode | (() => React.ReactNode)
+  type?: ToastType
+  icon?: React.ReactNode
+  jsx?: React.ReactElement
+  dismissible?: boolean
+  duration?: number
+  promise?: PromiseT
+  action?: ToastAction
+  cancel?: ToastAction
+  closeButton?: boolean
+  onDismiss?: (toast: ToastT) => void
+  onAutoClose?: (toast: ToastT) => void
+  // internal
+  delete?: boolean
+  // style overrides
+  style?: React.CSSProperties
+  className?: string
+  // native options
+  burntOptions?: CreateNativeToastOptions['burntOptions']
+  notificationOptions?: CreateNativeToastOptions['notificationOptions']
+  /** Custom user data */
+  data?: Record<string, unknown>
+}
+
+export interface ToastAction {
+  label: string
+  onClick?: (event: React.MouseEvent) => void
+}
+
+export interface ToastToDismiss {
+  id: string | number
+  dismiss: true
+}
+
+export type ExternalToast = Omit<
+  ToastT,
+  'id' | 'title' | 'type' | 'delete' | 'promise'
+> & {
+  id?: string | number
+}
+
+export type PromiseT<Data = any> = Promise<Data> | (() => Promise<Data>)
+
+export interface PromiseData<Data = any> {
+  loading?: React.ReactNode | (() => React.ReactNode)
+  success?: React.ReactNode | ((data: Data) => React.ReactNode)
+  error?: React.ReactNode | ((error: any) => React.ReactNode)
+  description?: React.ReactNode | ((data: any) => React.ReactNode)
+  finally?: () => void
+}
+
+type TitleT = React.ReactNode | (() => React.ReactNode)
+
+/**
+ * Observer class that manages toast state globally.
+ * Follows the pattern from Sonner for a clean, decoupled architecture.
+ */
+class Observer {
+  subscribers: Array<(toast: ToastT | ToastToDismiss) => void> = []
+  toasts: ToastT[] = []
+  dismissedToasts: Set<string | number> = new Set()
+
+  /**
+   * Subscribe to toast state changes.
+   * Returns an unsubscribe function.
+   */
+  subscribe = (subscriber: (toast: ToastT | ToastToDismiss) => void) => {
+    this.subscribers.push(subscriber)
+
+    return () => {
+      const index = this.subscribers.indexOf(subscriber)
+      if (index > -1) {
+        this.subscribers.splice(index, 1)
+      }
+    }
+  }
+
+  /**
+   * Publish a toast to all subscribers
+   */
+  publish = (data: ToastT) => {
+    this.subscribers.forEach((subscriber) => subscriber(data))
+  }
+
+  /**
+   * Add a new toast to the internal array and publish to subscribers
+   */
+  addToast = (data: ToastT) => {
+    this.publish(data)
+    this.toasts = [...this.toasts, data]
+  }
+
+  /**
+   * Create or update a toast
+   */
+  create = (
+    data: ExternalToast & {
+      title?: TitleT
+      type?: ToastType
+      promise?: PromiseT
+      jsx?: React.ReactElement
+    }
+  ) => {
+    const { title, ...rest } = data
+    const id =
+      typeof data?.id === 'number' || (typeof data?.id === 'string' && data.id.length > 0)
+        ? data.id
+        : toastsCounter++
+
+    const alreadyExists = this.toasts.find((toast) => toast.id === id)
+    const dismissible = data.dismissible ?? true
+
+    // if this toast was previously dismissed, clear that
+    if (this.dismissedToasts.has(id)) {
+      this.dismissedToasts.delete(id)
+    }
+
+    if (alreadyExists) {
+      // update existing toast
+      this.toasts = this.toasts.map((toast) => {
+        if (toast.id === id) {
+          this.publish({ ...toast, ...data, id, title, dismissible })
+          return { ...toast, ...data, id, title, dismissible }
+        }
+        return toast
+      })
+    } else {
+      this.addToast({ title, ...rest, dismissible, id } as ToastT)
+    }
+
+    return id
+  }
+
+  /**
+   * Dismiss a toast by id, or all toasts if no id provided
+   */
+  dismiss = (id?: string | number) => {
+    if (id !== undefined) {
+      this.dismissedToasts.add(id)
+      // use requestAnimationFrame to batch updates
+      requestAnimationFrame(() => {
+        this.subscribers.forEach((subscriber) => subscriber({ id, dismiss: true }))
+      })
+    } else {
+      // dismiss all
+      this.toasts.forEach((toast) => {
+        this.subscribers.forEach((subscriber) =>
+          subscriber({ id: toast.id, dismiss: true })
+        )
+      })
+    }
+
+    return id
+  }
+
+  /**
+   * Show a basic toast message
+   */
+  message = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'default' })
+  }
+
+  /**
+   * Show a success toast
+   */
+  success = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'success' })
+  }
+
+  /**
+   * Show an error toast
+   */
+  error = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'error' })
+  }
+
+  /**
+   * Show a warning toast
+   */
+  warning = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'warning' })
+  }
+
+  /**
+   * Show an info toast
+   */
+  info = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'info' })
+  }
+
+  /**
+   * Show a loading toast
+   */
+  loading = (title: TitleT, data?: ExternalToast) => {
+    return this.create({ ...data, title, type: 'loading' })
+  }
+
+  /**
+   * Show a toast for a promise, automatically transitioning through
+   * loading -> success/error states
+   */
+  promise = <ToastData>(promise: PromiseT<ToastData>, data?: PromiseData<ToastData>) => {
+    if (!data) {
+      return
+    }
+
+    let id: string | number | undefined = undefined
+
+    // show loading state if provided
+    if (data.loading !== undefined) {
+      id = this.create({
+        promise,
+        type: 'loading',
+        title: data.loading,
+        description:
+          typeof data.description !== 'function' ? data.description : undefined,
+        // loading toasts shouldn't auto-dismiss
+        duration: Number.POSITIVE_INFINITY,
+      })
+    }
+
+    const p = Promise.resolve(promise instanceof Function ? promise() : promise)
+
+    let shouldDismiss = id !== undefined
+    let result: ['resolve', ToastData] | ['reject', unknown]
+
+    const originalPromise = p
+      .then(async (response) => {
+        result = ['resolve', response]
+
+        // check if response is an HTTP error
+        if (isHttpResponse(response) && !response.ok) {
+          shouldDismiss = false
+          const errorMsg =
+            typeof data.error === 'function'
+              ? await data.error(`HTTP error! status: ${response.status}`)
+              : data.error
+          const description =
+            typeof data.description === 'function'
+              ? await data.description(`HTTP error! status: ${response.status}`)
+              : data.description
+
+          this.create({ id, type: 'error', title: errorMsg, description })
+        } else if (data.success !== undefined) {
+          shouldDismiss = false
+          const successMsg =
+            typeof data.success === 'function'
+              ? await data.success(response)
+              : data.success
+          const description =
+            typeof data.description === 'function'
+              ? await data.description(response)
+              : data.description
+
+          this.create({ id, type: 'success', title: successMsg, description })
+        }
+      })
+      .catch(async (error) => {
+        result = ['reject', error]
+
+        if (data.error !== undefined) {
+          shouldDismiss = false
+          const errorMsg =
+            typeof data.error === 'function' ? await data.error(error) : data.error
+          const description =
+            typeof data.description === 'function'
+              ? await data.description(error)
+              : data.description
+
+          this.create({ id, type: 'error', title: errorMsg, description })
+        }
+      })
+      .finally(() => {
+        if (shouldDismiss) {
+          // toast is still in load state, dismiss it
+          this.dismiss(id)
+          id = undefined
+        }
+        data.finally?.()
+      })
+
+    // return a promise that can be unwrapped
+    const unwrap = () =>
+      new Promise<ToastData>((resolve, reject) =>
+        originalPromise
+          .then(() => (result[0] === 'reject' ? reject(result[1]) : resolve(result[1])))
+          .catch(reject)
+      )
+
+    if (typeof id !== 'string' && typeof id !== 'number') {
+      return { unwrap }
+    } else {
+      return Object.assign(id, { unwrap })
+    }
+  }
+
+  /**
+   * Show a custom JSX toast
+   */
+  custom = (jsx: (id: string | number) => React.ReactElement, data?: ExternalToast) => {
+    const id = data?.id ?? toastsCounter++
+    this.create({ jsx: jsx(id), ...data, id })
+    return id
+  }
+
+  /**
+   * Get all active (non-dismissed) toasts
+   */
+  getActiveToasts = () => {
+    return this.toasts.filter((toast) => !this.dismissedToasts.has(toast.id))
+  }
+
+  /**
+   * Get full toast history
+   */
+  getHistory = () => {
+    return this.toasts
+  }
+}
+
+function isHttpResponse(data: any): data is Response {
+  return (
+    data &&
+    typeof data === 'object' &&
+    'ok' in data &&
+    typeof data.ok === 'boolean' &&
+    'status' in data &&
+    typeof data.status === 'number'
+  )
+}
+
+// singleton instance
+export const ToastState = new Observer()
+
+// basic toast function
+const toastFunction = (title: TitleT, data?: ExternalToast) => {
+  return ToastState.create({ ...data, title })
+}
+
+// getters
+const getHistory = () => ToastState.getHistory()
+const getToasts = () => ToastState.getActiveToasts()
+
+/**
+ * Main toast API - call directly or use methods like toast.success()
+ *
+ * @example
+ * // basic usage
+ * toast('Hello world')
+ *
+ * // with type
+ * toast.success('Saved!')
+ * toast.error('Something went wrong')
+ *
+ * // with options
+ * toast('Hello', { duration: 5000 })
+ *
+ * // promise toast
+ * toast.promise(fetch('/api'), {
+ *   loading: 'Loading...',
+ *   success: 'Done!',
+ *   error: 'Failed'
+ * })
+ *
+ * // custom JSX
+ * toast.custom((id) => <MyToast id={id} />)
+ *
+ * // dismiss
+ * const id = toast('Hello')
+ * toast.dismiss(id)
+ * toast.dismiss() // dismiss all
+ */
+export const toast = Object.assign(toastFunction, {
+  success: ToastState.success,
+  error: ToastState.error,
+  warning: ToastState.warning,
+  info: ToastState.info,
+  loading: ToastState.loading,
+  promise: ToastState.promise,
+  custom: ToastState.custom,
+  dismiss: ToastState.dismiss,
+  message: ToastState.message,
+  getHistory,
+  getToasts,
+})
+
+export type { NativeToastRef }

package/src/ToastViewport.tsx

@@ -28,7 +28,7 @@ const ToastViewportWrapperFrame = styled(YStack, {
         bottom: 0,
         left: 0,
         right: 0,
-        position: 'fixed',
+        position: isWeb ? ('fixed' as any) : 'absolute',
         maxWidth: '100%',
         tabIndex: 0,
         zIndex: 100000,
@@ -48,7 +48,7 @@ const ToastViewportFrame = styled(YStack, {
     unstyled: {
       false: {
         pointerEvents: 'box-none',
-        position: 'fixed',
+        position: isWeb ? ('fixed' as any) : 'absolute',
         maxWidth: '100%',
       },
     },
@@ -262,6 +262,7 @@ const ToastViewport = React.memo(
       const contents = (
         <ToastViewportWrapperFrame
           ref={wrapperRef as any}
+          // biome-ignore lint/a11y/useSemanticElements: <explanation>
           role="region"
           aria-label={label.replace('{hotkey}', hotkeyLabel)}
           // // Ensure virtual cursor from landmarks menus triggers focus/blur for pause/resume
@@ -363,7 +364,7 @@ const FocusProxy = React.forwardRef<FocusProxyElement, ScopedProps<FocusProxyPro
         {...proxyProps}
         ref={forwardedRef}
         // Avoid page scrolling when focus is on the focus proxy
-        position="fixed"
+        position={isWeb ? ('fixed' as any) : 'absolute'}
         onFocus={(event) => {
           if (!isWeb) return
           const prevFocusedElement = event.relatedTarget as HTMLElement | null