@tamagui/toast 1.7.10 → 1.8.0

package/src/ToastAnnounce.tsx

@@ -0,0 +1,97 @@
+import {
+  GetProps,
+  Stack,
+  TamaguiElement,
+  Text,
+  styled,
+  useEvent,
+  useIsomorphicLayoutEffect,
+} from '@tamagui/core'
+import { Portal } from '@tamagui/portal'
+import { VisuallyHidden } from '@tamagui/visually-hidden'
+import * as React from 'react'
+
+import { ScopedProps, useToastProviderContext } from './ToastProvider'
+import { TOAST_NAME } from './constants'
+
+const ToastAnnounceExcludeFrame = styled(Stack, {
+  name: 'ToastAnnounceExclude',
+})
+type ToastAnnounceExcludeFrameProps = GetProps<typeof ToastAnnounceExcludeFrame>
+type ToastAnnounceExcludeProps = ToastAnnounceExcludeFrameProps & {
+  altText?: string
+}
+
+const ToastAnnounceExclude = React.forwardRef<TamaguiElement, ToastAnnounceExcludeProps>(
+  (props: ScopedProps<ToastAnnounceExcludeProps>, forwardedRef) => {
+    const { __scopeToast, altText, ...announceExcludeProps } = props
+
+    return (
+      <ToastAnnounceExcludeFrame
+        data-toast-announce-exclude=""
+        data-toast-announce-alt={altText || undefined}
+        {...announceExcludeProps}
+        ref={forwardedRef}
+      />
+    )
+  }
+)
+
+/* -----------------------------------------------------------------------------------------------*/
+
+interface ToastAnnounceProps
+  extends Omit<GetProps<typeof VisuallyHidden>, 'children'>,
+    ScopedProps<{ children: string[] }> {}
+
+const ToastAnnounce: React.FC<ToastAnnounceProps> = (
+  props: ScopedProps<ToastAnnounceProps>
+) => {
+  const { __scopeToast, children, ...announceProps } = props
+  const context = useToastProviderContext(TOAST_NAME, __scopeToast)
+  const [renderAnnounceText, setRenderAnnounceText] = React.useState(false)
+  const [isAnnounced, setIsAnnounced] = React.useState(false)
+
+  // render text content in the next frame to ensure toast is announced in NVDA
+  useNextFrame(() => setRenderAnnounceText(true))
+
+  // cleanup after announcing
+  React.useEffect(() => {
+    const timer = setTimeout(() => setIsAnnounced(true), 1000)
+    return () => clearTimeout(timer)
+  }, [])
+
+  return isAnnounced ? null : (
+    <Portal asChild>
+      <VisuallyHidden {...announceProps}>
+        {renderAnnounceText && (
+          <Text>
+            {context.label} {children}
+          </Text>
+        )}
+      </VisuallyHidden>
+    </Portal>
+  )
+}
+
+/* -----------------------------------------------------------------------------------------------*/
+
+function useNextFrame(callback = () => {}) {
+  const fn = useEvent(callback)
+  useIsomorphicLayoutEffect(() => {
+    let raf1 = 0
+    let raf2 = 0
+    raf1 = requestAnimationFrame(() => (raf2 = requestAnimationFrame(fn)))
+    return () => {
+      cancelAnimationFrame(raf1)
+      cancelAnimationFrame(raf2)
+    }
+  }, [fn])
+}
+
+
+export {
+  ToastAnnounce,
+  ToastAnnounceProps,
+  ToastAnnounceExclude,
+  ToastAnnounceExcludeProps,
+}

package/src/ToastImpl.tsx

@@ -0,0 +1,439 @@
+import { useIsPresent } from '@tamagui/animate-presence'
+import { useComposedRefs } from '@tamagui/compose-refs'
+import {
+  GetProps,
+  TamaguiElement,
+  Theme,
+  composeEventHandlers,
+  getAnimationDriver,
+  isWeb,
+  styled,
+  useEvent,
+  useThemeName,
+} from '@tamagui/core'
+import { Dismissable, DismissableProps } from '@tamagui/dismissable'
+import { PortalItem } from '@tamagui/portal'
+import { ThemeableStack } from '@tamagui/stacks'
+import * as React from 'react'
+import { Animated, GestureResponderEvent, PanResponder } from 'react-native'
+
+import { TOAST_NAME } from './constants'
+import { ToastAnnounce } from './ToastAnnounce'
+import {
+  Collection,
+  ScopedProps,
+  SwipeDirection,
+  createToastContext,
+  useToastProviderContext,
+} from './ToastProvider'
+import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'
+
+const ToastImplFrame = styled(ThemeableStack, {
+  name: 'ToastImpl',
+  variants: {
+    backgrounded: {
+      true: {
+        backgroundColor: '$color6',
+      },
+    },
+    unstyled: {
+      false: {
+        borderRadius: '$10',
+        paddingHorizontal: '$5',
+        paddingVertical: '$2',
+        marginHorizontal: 'auto',
+        marginVertical: '$1',
+      },
+    },
+  },
+  defaultVariants: {
+    backgrounded: true,
+    unstyled: false,
+  },
+})
+interface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {
+  /**
+   * 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?: true
+}
+
+type SwipeEvent = GestureResponderEvent
+
+const [ToastInteractiveProvider, useToastInteractiveContext] = createToastContext(
+  TOAST_NAME,
+  {
+    onClose() {},
+  }
+)
+
+type ToastImplPrivateProps = { open: boolean; onClose(): void }
+type ToastImplFrameProps = GetProps<typeof ToastImplFrame>
+type ToastImplProps = ToastImplPrivateProps &
+  ToastImplFrameProps & {
+    /**
+     * 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
+  }
+
+const ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(
+  (props: ScopedProps<ToastImplProps>, forwardedRef) => {
+    const {
+      __scopeToast,
+      type = 'foreground',
+      duration: durationProp,
+      open,
+      onClose,
+      onEscapeKeyDown,
+      onPause,
+      onResume,
+      onSwipeStart,
+      onSwipeMove,
+      onSwipeCancel,
+      onSwipeEnd,
+      viewportName,
+      ...toastProps
+    } = props
+    const isPresent = useIsPresent()
+    const context = useToastProviderContext(TOAST_NAME, __scopeToast)
+    const [node, setNode] = React.useState<TamaguiElement | null>(null)
+    const composedRefs = useComposedRefs(forwardedRef, (node) => setNode(node))
+    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 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 HTMLDivElement)?.contains(document.activeElement)
+        if (isFocusInToast) context.viewport?.focus()
+      }
+      onClose()
+    })
+
+    const startTimer = React.useCallback(
+      (duration: number) => {
+        if (!duration || duration === 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
+      const viewport = context.viewport as HTMLElement
+      if (viewport) {
+        viewport.addEventListener(VIEWPORT_PAUSE, handlePause)
+        viewport.addEventListener(VIEWPORT_RESUME, handleResume)
+        return () => {
+          viewport.removeEventListener(VIEWPORT_PAUSE, handlePause)
+          viewport.removeEventListener(VIEWPORT_RESUME, handleResume)
+        }
+      }
+    }, [context.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 HTMLDivElement) : null
+    }, [node])
+
+    const isHorizontalSwipe = ['left', 'right', 'horizontal'].includes(
+      context.swipeDirection
+    )
+
+    const driver = getAnimationDriver()
+    if (!driver) {
+      throw new Error('Must set animations in tamagui.config.ts')
+    }
+
+    const { useAnimatedNumber, useAnimatedNumberStyle } = driver
+
+    const animatedNumber = useAnimatedNumber(0)
+
+    // temp until reanimated useAnimatedNumber fix
+    const AnimatedView = (driver['NumberView'] ?? driver.View) as typeof Animated.View
+
+    const animatedStyles = useAnimatedNumberStyle(animatedNumber, (val) => {
+      return {
+        transform: [isHorizontalSwipe ? { translateX: val } : { translateY: val }],
+      }
+    })
+
+    const panResponder = React.useMemo(() => {
+      return PanResponder.create({
+        onMoveShouldSetPanResponder: (e) => {
+          onSwipeStart?.(e)
+          return true
+        },
+        onPanResponderGrant: (e) => {
+          if (!isWeb) {
+            handlePause?.()
+          }
+        },
+        onPanResponderMove: (e, { dy, dx }) => {
+          let y = 0
+          let x = 0
+          if (context.swipeDirection === 'horizontal') x = dx
+          else if (context.swipeDirection === 'left') x = Math.min(0, dx)
+          else if (context.swipeDirection === 'right') x = Math.max(0, dx)
+          else if (context.swipeDirection === 'vertical') y = dy
+          else if (context.swipeDirection === 'up') y = Math.min(0, dy)
+          else if (context.swipeDirection === 'down') y = Math.max(0, dy)
+
+          onSwipeMove?.(e)
+
+          const delta = { x, y }
+          animatedNumber.setValue(isHorizontalSwipe ? x : y, { type: 'direct' })
+          if (isDeltaInDirection(delta, context.swipeDirection, context.swipeThreshold)) {
+            onSwipeEnd?.(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
+            __scopeToast={__scopeToast}
+            // Toasts are always role=status to avoid stuttering issues with role=alert in SRs.
+            role="status"
+            aria-live={type === 'foreground' ? 'assertive' : 'polite'}
+            aria-atomic
+          >
+            {announceTextContent}
+          </ToastAnnounce>
+        )}
+
+        <PortalItem hostName={viewportName ?? 'default'}>
+          <ToastInteractiveProvider
+            key={props.id}
+            scope={__scopeToast}
+            onClose={() => {
+              console.log('hellooow')
+              handleClose()
+            }}
+          >
+            <Dismissable
+              // asChild
+              onEscapeKeyDown={composeEventHandlers(onEscapeKeyDown, () => {
+                if (!context.isFocusedToastEscapeKeyDownRef.current) {
+                  handleClose()
+                }
+                context.isFocusedToastEscapeKeyDownRef.current = false
+              })}
+            >
+              <Theme forceClassName name={themeName}>
+                <AnimatedView
+                  {...panResponder?.panHandlers}
+                  style={[{ margin: 'auto' }, animatedStyles]}
+                >
+                  <Collection.ItemSlot scope={__scopeToast}>
+                    <ToastImplFrame
+                      // Ensure toasts are announced as status list or status when focused
+                      role="status"
+                      aria-live="off"
+                      aria-atomic
+                      tabIndex={0}
+                      data-state={open ? 'open' : 'closed'}
+                      data-swipe-direction={context.swipeDirection}
+                      pointerEvents="auto"
+                      // touchAction="none"
+                      userSelect="none"
+                      {...toastProps}
+                      ref={composedRefs}
+                      {...(isWeb && {
+                        onKeyDown: composeEventHandlers(
+                          (props as any).onKeyDown,
+                          (event: KeyboardEvent) => {
+                            if (event.key !== 'Escape') return
+                            onEscapeKeyDown?.(event)
+                            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
+  } else {
+    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
+}
+
+export { ToastImpl, ToastImplFrame, ToastImplProps, useToastInteractiveContext }
+export type { ToastProps }

package/src/ToastProvider.tsx

@@ -0,0 +1,134 @@
+
+import { createCollection } from '@tamagui/collection'
+import { TamaguiElement, useId } from '@tamagui/core'
+import type { Scope } from '@tamagui/create-context'
+import { createContextScope } from '@tamagui/create-context'
+import { PortalProvider } from '@tamagui/portal'
+import * as React from 'react'
+
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+const PROVIDER_NAME = 'ToastProvider'
+
+const [Collection, useCollection, createCollectionScope] =
+  createCollection<TamaguiElement>('Toast')
+
+type SwipeDirection = 'vertical' | 'up' | 'down' | 'horizontal' | 'left' | 'right'
+type ToastProviderContextValue = {
+  id: string
+  label: string
+  duration: number
+  swipeDirection: SwipeDirection
+  swipeThreshold: number
+  toastCount: number
+  viewport: TamaguiElement | null
+  onViewportChange(viewport: TamaguiElement): void
+  onToastAdd(): void
+  onToastRemove(): void
+  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>
+  isClosePausedRef: React.MutableRefObject<boolean>
+}
+
+type ScopedProps<P> = P & { __scopeToast?: Scope }
+const [createToastContext, createToastScope] = createContextScope('Toast', [
+  createCollectionScope,
+])
+const [ToastProviderProvider, useToastProviderContext] =
+  createToastContext<ToastProviderContextValue>(PROVIDER_NAME)
+
+interface ToastProviderProps {
+  children?: React.ReactNode
+  /**
+   * An author-localized label for each toast. Used to help screen reader users
+   * associate the interruption with a toast.
+   * @defaultValue 'Notification'
+   */
+  label?: string
+  /**
+   * Time in milliseconds that each toast should remain visible for.
+   * @defaultValue 5000
+   */
+  duration?: number
+  /**
+   * Direction of pointer swipe that should close the toast.
+   * @defaultValue 'right'
+   */
+  swipeDirection?: SwipeDirection
+  /**
+   * Distance in pixels that the swipe must pass before a close is triggered.
+   * @defaultValue 50
+   */
+  swipeThreshold?: number
+  /**
+   * @defaultValue unique generated identifier
+   */
+  id?: string
+}
+
+const ToastProvider: React.FC<ToastProviderProps> = (
+  props: ScopedProps<ToastProviderProps>
+) => {
+  const {
+    __scopeToast,
+    id: providedId,
+    label = 'Notification',
+    duration = 5000,
+    swipeDirection = 'right',
+    swipeThreshold = 50,
+    children,
+  } = props
+  const id = providedId ?? useId()
+  const [viewport, setViewport] = React.useState<TamaguiElement | null>(null)
+  const [toastCount, setToastCount] = React.useState(0)
+  const isFocusedToastEscapeKeyDownRef = React.useRef(false)
+  const isClosePausedRef = React.useRef(false)
+
+  return (
+    <PortalProvider shouldAddRootHost={false} rootHostName="default">
+      <Collection.Provider scope={__scopeToast}>
+        <ToastProviderProvider
+          scope={__scopeToast}
+          id={id}
+          label={label}
+          duration={duration}
+          swipeDirection={swipeDirection}
+          swipeThreshold={swipeThreshold}
+          toastCount={toastCount}
+          viewport={viewport}
+          onViewportChange={setViewport}
+          onToastAdd={React.useCallback(() => {
+            setToastCount((prevCount) => prevCount + 1)
+          }, [])}
+          onToastRemove={React.useCallback(() => {
+            setToastCount((prevCount) => prevCount - 1)
+          }, [])}
+          isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}
+          isClosePausedRef={isClosePausedRef}
+        >
+          {children}
+        </ToastProviderProvider>
+      </Collection.Provider>
+    </PortalProvider>
+  )
+}
+
+ToastProvider.propTypes = {
+  label(props) {
+    if (props.label && typeof props.label === 'string' && !props.label.trim()) {
+      const error = `Invalid prop \`label\` supplied to \`${PROVIDER_NAME}\`. Expected non-empty \`string\`.`
+      return new Error(error)
+    }
+    return null
+  },
+}
+
+ToastProvider.displayName = PROVIDER_NAME
+
+export {
+  Collection, ToastProvider, createToastContext, createToastScope, useCollection, useToastProviderContext
+}
+export type { ScopedProps, SwipeDirection, ToastProviderProps }
+