@tamagui/toast 2.7.7 → 3.0.0-beta.643.1

package/src/ToastImpl.tsx

@@ -1,514 +0,0 @@
-import { useIsPresent } from '@tamagui/animate-presence'
-import { useComposedRefs } from '@tamagui/compose-refs'
-import { isWeb } from '@tamagui/constants'
-import type { GetProps, TamaguiElement } from '@tamagui/core'
-import {
-  View,
-  Theme,
-  createStyledContext,
-  styled,
-  useConfiguration,
-  useEvent,
-  useThemeName,
-} from '@tamagui/core'
-import type { DismissableProps } from '@tamagui/dismissable'
-import { Dismissable } from '@tamagui/dismissable'
-import { composeEventHandlers } from '@tamagui/helpers'
-import { PortalItem } from '@tamagui/portal'
-import { YStack } from '@tamagui/stacks'
-import * as React from 'react'
-import type {
-  Animated,
-  GestureResponderEvent,
-  PanResponderGestureState,
-  PanResponder as PanResponderType,
-} 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'
-import { Collection, useToastProviderContext } from './ToastProvider'
-import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'
-
-const ToastImplFrame = styled(YStack, {
-  name: 'ToastImpl',
-  tabIndex: 0,
-
-  variants: {
-    unstyled: {
-      false: {
-        focusStyle: {
-          outlineStyle: 'solid',
-          outlineWidth: 2,
-          outlineColor: '$outlineColor',
-        },
-        backgroundColor: '$color6',
-        borderRadius: '$4',
-        paddingHorizontal: '$4',
-        paddingVertical: '$3',
-        marginHorizontal: 'auto',
-        marginVertical: '$1',
-        elevation: '$3',
-      },
-    },
-  } as const,
-
-  defaultVariants: {
-    unstyled: process.env.TAMAGUI_HEADLESS === '1',
-  },
-})
-
-type ToastProps = Omit<ToastImplProps, keyof ToastImplPrivateProps>
-
-type SwipeEvent = GestureResponderEvent
-
-const {
-  Provider: ToastInteractiveProvider,
-  useStyledContext: useToastInteractiveContext,
-} = createStyledContext({
-  onClose() {},
-})
-
-type ToastImplPrivateProps = {
-  open?: boolean
-  onClose(): void
-}
-
-type ToastImplFrameProps = GetProps<typeof ToastImplFrame>
-
-export type ToastExtraProps = {
-  /**
-   * The controlled open state of the dialog. Must be used in conjunction with `onOpenChange`.
-   */
-  open?: boolean
-
-  /**
-   * The open state of the dialog when it is initially rendered. Use when you do not need to control its open state.
-   */
-  defaultOpen?: boolean
-  /**
-   * Event handler called when the open state of the dialog changes.
-   */
-  onOpenChange?(open: boolean): void
-  /**
-   * Used to force mounting when more control is needed. Useful when
-   * controlling animation with React animation libraries.
-   */
-  forceMount?: boolean
-
-  /**
-   * Control the sensitivity of the toast for accessibility purposes.
-   * For toasts that are the result of a user action, choose foreground. Toasts generated from background tasks should use background.
-   */
-  type?: 'foreground' | 'background'
-  /**
-   * Time in milliseconds that toast should remain visible for. Overrides value given to `ToastProvider`.
-   */
-  duration?: number
-  /**
-   * Event handler called when the escape key is down. It can be prevented by calling `event.preventDefault`.
-   */
-  onEscapeKeyDown?: DismissableProps['onEscapeKeyDown']
-  /**
-   * Event handler called when the dismiss timer is paused.
-   * On web, this occurs when the pointer is moved over the viewport, the viewport is focused or when the window is blurred.
-   * On mobile, this occurs when the toast is touched.
-   */
-  onPause?(): void
-  /**
-   * Event handler called when the dismiss timer is resumed.
-   * On web, this occurs when the pointer is moved away from the viewport, the viewport is blurred or when the window is focused.
-   * On mobile, this occurs when the toast is released.
-   */
-  onResume?(): void
-  /**
-   * Event handler called when starting a swipe interaction. It can be prevented by calling `event.preventDefault`.
-   */
-  onSwipeStart?(event: SwipeEvent): void
-  /**
-   * Event handler called during a swipe interaction. It can be prevented by calling `event.preventDefault`.
-   */
-  onSwipeMove?(event: SwipeEvent): void
-  /**
-   * Event handler called at the cancellation of a swipe interaction. It can be prevented by calling `event.preventDefault`.
-   */
-  onSwipeCancel?(event: SwipeEvent): void
-  /**
-   * Event handler called at the end of a swipe interaction. It can be prevented by calling `event.preventDefault`.
-   */
-  onSwipeEnd?(event: SwipeEvent): void
-  /**
-   * The viewport's name to send the toast to. Used when using multiple viewports and want to forward toasts to different ones.
-   *
-   * @default "default"
-   */
-  viewportName?: string
-  /**
-   *
-   */
-  id?: string
-}
-
-type ToastImplProps = ScopedProps<
-  ToastImplPrivateProps & ToastImplFrameProps & ToastExtraProps
->
-
-const ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(
-  (props, forwardedRef) => {
-    const {
-      scope,
-      type = 'foreground',
-      duration: durationProp,
-      open,
-      onClose,
-      onEscapeKeyDown,
-      onPause,
-      onResume,
-      onSwipeStart,
-      onSwipeMove,
-      onSwipeCancel,
-      onSwipeEnd,
-      viewportName = 'default',
-      ...toastProps
-    } = props
-    const isPresent = useIsPresent()
-    const context = useToastProviderContext(scope)
-    const [node, setNode] = React.useState<TamaguiElement | null>(null)
-    const composedRefs = useComposedRefs(forwardedRef, setNode)
-    const duration = durationProp || context.duration
-    const closeTimerStartTimeRef = React.useRef(0)
-    const closeTimerRemainingTimeRef = React.useRef(duration)
-    const closeTimerRef = React.useRef(0)
-    const { onToastAdd, onToastRemove } = context
-
-    const viewport = React.useMemo(() => {
-      return context.viewports[viewportName] as HTMLElement | null | undefined
-    }, [context.viewports, viewportName])
-
-    const handleClose = useEvent(() => {
-      if (!isPresent) {
-        // already removed from the react tree
-        return
-      }
-      // focus viewport if focus is within toast to read the remaining toast
-      // count to SR users and ensure focus isn't lost
-      if (isWeb) {
-        const isFocusInToast = (node as unknown as HTMLDivElement)?.contains(
-          document.activeElement
-        )
-        if (isFocusInToast) viewport?.focus()
-      }
-      onClose()
-    })
-
-    const startTimer = React.useCallback(
-      (duration: number) => {
-        if (!duration || duration === Number.POSITIVE_INFINITY) return
-        clearTimeout(closeTimerRef.current)
-        closeTimerStartTimeRef.current = new Date().getTime()
-        closeTimerRef.current = setTimeout(handleClose, duration) as unknown as number
-      },
-      [handleClose]
-    )
-
-    const handleResume = React.useCallback(() => {
-      startTimer(closeTimerRemainingTimeRef.current)
-      onResume?.()
-    }, [onResume, startTimer])
-
-    const handlePause = React.useCallback(() => {
-      const elapsedTime = new Date().getTime() - closeTimerStartTimeRef.current
-      closeTimerRemainingTimeRef.current =
-        closeTimerRemainingTimeRef.current - elapsedTime
-      window.clearTimeout(closeTimerRef.current)
-      onPause?.()
-    }, [onPause])
-
-    React.useEffect(() => {
-      if (!isWeb) return
-
-      if (viewport) {
-        viewport.addEventListener(VIEWPORT_PAUSE, handlePause)
-        viewport.addEventListener(VIEWPORT_RESUME, handleResume)
-        return () => {
-          viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)
-          viewport.removeEventListener(VIEWPORT_RESUME, handleResume)
-        }
-      }
-    }, [viewport, duration, onPause, onResume, startTimer])
-
-    // start timer when toast opens or duration changes.
-    // we include `open` in deps because closed !== unmounted when animating
-    // so it could reopen before being completely unmounted
-    React.useEffect(() => {
-      if (open && !context.isClosePausedRef.current) {
-        startTimer(duration)
-      }
-    }, [open, duration, context.isClosePausedRef, startTimer])
-
-    React.useEffect(() => {
-      onToastAdd()
-      return () => onToastRemove()
-    }, [onToastAdd, onToastRemove])
-
-    const announceTextContent = React.useMemo(() => {
-      if (!isWeb) return null
-      return node ? getAnnounceTextContent(node as unknown as HTMLDivElement) : null
-    }, [node])
-
-    const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(
-      context.swipeDirection
-    )
-
-    const { animationDriver } = useConfiguration()
-    if (!animationDriver) {
-      throw new Error('Must set animations in tamagui.config.ts')
-    }
-
-    const { useAnimatedNumber, useAnimatedNumberStyle } = animationDriver
-
-    const animatedNumber = useAnimatedNumber(0)
-
-    // temp until reanimated useAnimatedNumber fix
-    const AnimatedView = (animationDriver['NumberView'] ??
-      animationDriver.View ??
-      View) as typeof Animated.View
-
-    const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {
-      'worklet'
-      return {
-        transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],
-      }
-    })
-
-    const panResponder = React.useMemo(() => {
-      const PanResponder = getPanResponder()
-      if (!PanResponder) return null
-      return PanResponder.create({
-        onMoveShouldSetPanResponder: (e, gesture) => {
-          const shouldMove = shouldGrantGestureMove(context.swipeDirection, gesture)
-          if (shouldMove) {
-            onSwipeStart?.(e)
-            return true
-          }
-          return false
-        },
-        onPanResponderGrant: (e) => {
-          if (!isWeb) {
-            handlePause?.()
-          }
-        },
-        onPanResponderMove: (e, gesture) => {
-          const { x, y } = getGestureDistance(context.swipeDirection, gesture)
-          const delta = { x, y }
-          animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })
-          if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
-            onSwipeEnd?.(e)
-          }
-          onSwipeMove?.(e)
-        },
-        onPanResponderEnd: (e, { dx, dy }) => {
-          if (
-            !isDeltaInDirection(
-              { x: dx, y: dy },
-              context.swipeDirection,
-              context.swipeThreshold
-            )
-          ) {
-            if (!isWeb) {
-              handleResume?.()
-            }
-            onSwipeCancel?.(e)
-            animatedNumber.setValue(0, { type: 'spring' })
-          }
-        },
-      })
-    }, [handlePause, handleResume])
-
-    // need to get the theme name from context and apply it again since portals don't retain the theme
-    const themeName = useThemeName()
-
-    return (
-      <>
-        {announceTextContent && (
-          <ToastAnnounce
-            scope={scope}
-            // 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
-          >
-            {announceTextContent}
-          </ToastAnnounce>
-        )}
-
-        <PortalItem hostName={viewportName ?? 'default'}>
-          <ToastInteractiveProvider
-            key={props.id}
-            scope={scope}
-            onClose={() => {
-              handleClose()
-            }}
-          >
-            <Dismissable
-              // asChild
-              onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
-                if (!context.isFocusedToastEscapeKeyDownRef.current) {
-                  handleClose()
-                }
-                context.isFocusedToastEscapeKeyDownRef.current = false
-              })}
-            >
-              <Theme contain forceClassName name={themeName}>
-                <AnimatedView
-                  {...panResponder?.panHandlers}
-                  style={[{ margin: 'auto' }, animatedStyles]}
-                >
-                  <Collection.ItemSlot scope={context.toastScope}>
-                    <ToastImplFrame
-                      // Ensure toasts are announced as status list or status when focused
-                      role="status"
-                      aria-live="off"
-                      aria-atomic
-                      data-state={open ? 'open' : 'closed'}
-                      data-swipe-direction={context.swipeDirection}
-                      pointerEvents="auto"
-                      $platform-web={{
-                        touchAction: 'none',
-                        userSelect: 'none',
-                      }}
-                      {...toastProps}
-                      ref={composedRefs}
-                      {...(isWeb && {
-                        onKeyDown: composeEventHandlers(props.onKeyDown, (event) => {
-                          if (event.key !== 'Escape') return
-                          onEscapeKeyDown?.(event)
-                          if (!event.defaultPrevented) {
-                            context.isFocusedToastEscapeKeyDownRef.current = true
-                            handleClose()
-                          }
-                        }),
-                      })}
-                    />
-                  </Collection.ItemSlot>
-                </AnimatedView>
-              </Theme>
-            </Dismissable>
-          </ToastInteractiveProvider>
-        </PortalItem>
-      </>
-    )
-  }
-)
-
-ToastImpl.propTypes = {
-  type(props) {
-    if (props.type && !['foreground', 'background'].includes(props.type)) {
-      const error = `Invalid prop \`type\` supplied to \`${TOAST_NAME}\`. Expected \`foreground | background\`.`
-      return new Error(error)
-    }
-    return null
-  },
-}
-
-/* ---------------------------------------------------------------------------------------------- */
-
-const isDeltaInDirection = (
-  delta: { x: number; y: number },
-  direction: SwipeDirection,
-  threshold = 0
-) => {
-  const deltaX = Math.abs(delta.x)
-  const deltaY = Math.abs(delta.y)
-  const isDeltaX = deltaX > deltaY
-  if (direction === 'left' || direction === 'right' || direction === 'horizontal') {
-    return isDeltaX && deltaX > threshold
-  }
-  return !isDeltaX && deltaY > threshold
-}
-
-function getAnnounceTextContent(container: HTMLElement) {
-  if (!isWeb) return ''
-  const textContent: string[] = []
-  const childNodes = Array.from(container.childNodes)
-
-  childNodes.forEach((node) => {
-    if (node.nodeType === node.TEXT_NODE && node.textContent)
-      textContent.push(node.textContent)
-    if (isHTMLElement(node)) {
-      const isHidden = node.ariaHidden || node.hidden || node.style.display === 'none'
-      const isExcluded = node.dataset.toastAnnounceExclude === ''
-
-      if (!isHidden) {
-        if (isExcluded) {
-          const altText = node.dataset.toastAnnounceAlt
-          if (altText) textContent.push(altText)
-        } else {
-          textContent.push(...getAnnounceTextContent(node))
-        }
-      }
-    }
-  })
-
-  // We return a collection of text rather than a single concatenated string.
-  // This allows SR VO to naturally pause break between nodes while announcing.
-  return textContent
-}
-
-function isHTMLElement(node: any): node is HTMLElement {
-  return node.nodeType === node.ELEMENT_NODE
-}
-
-const GESTURE_GRANT_THRESHOLD = 10
-
-const shouldGrantGestureMove = (
-  dir: SwipeDirection,
-  { dx, dy }: PanResponderGestureState
-) => {
-  if ((dir === 'horizontal' || dir === 'left') && dx < -GESTURE_GRANT_THRESHOLD) {
-    return true
-  }
-  if ((dir === 'horizontal' || dir === 'right') && dx > GESTURE_GRANT_THRESHOLD) {
-    return true
-  }
-  if ((dir === 'vertical' || dir === 'up') && dy > -GESTURE_GRANT_THRESHOLD) {
-    return true
-  }
-  if ((dir === 'vertical' || dir === 'down') && dy < GESTURE_GRANT_THRESHOLD) {
-    return true
-  }
-
-  return false
-}
-
-const getGestureDistance = (
-  dir: SwipeDirection,
-  { dx, dy }: PanResponderGestureState
-) => {
-  let y = 0
-  let x = 0
-
-  if (dir === 'horizontal') x = dx
-  else if (dir === 'left') x = Math.min(0, dx)
-  else if (dir === 'right') x = Math.max(0, dx)
-  else if (dir === 'vertical') y = dy
-  else if (dir === 'up') y = Math.min(0, dy)
-  else if (dir === 'down') y = Math.max(0, dy)
-
-  return {
-    x,
-    y,
-  }
-}
-
-export { ToastImpl, ToastImplFrame, useToastInteractiveContext, type ToastImplProps }
-export type { ToastProps }

package/src/ToastPortal.tsx

@@ -1,19 +0,0 @@
-import { isWeb } from '@tamagui/constants'
-import { Portal } from '@tamagui/portal'
-import type { ReactNode } from 'react'
-import { ReprogapateToastProvider, type ToastProviderContextValue } from './ToastProvider'
-
-export function ToastPortal(props: {
-  children: ReactNode
-  zIndex?: number
-  context: ToastProviderContextValue
-}) {
-  const { context, children, zIndex } = props
-  let content = children
-  if (!isWeb) {
-    content = (
-      <ReprogapateToastProvider context={context}>{children}</ReprogapateToastProvider>
-    )
-  }
-  return <Portal zIndex={zIndex || Number.MAX_SAFE_INTEGER}>{content}</Portal>
-}