@hanzogui/toast 2.0.0-rc.41-hanzoai.3

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 '@hanzogui/core'
+import { XStack, YStack } from '@hanzogui/stacks'
+import { SizableText } from '@hanzogui/text'
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastPositionWrapper - handles absolute positioning and stacking animations
+ * On web: uses Hanzogui 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.HANZOGUI_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.HANZOGUI_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.HANZOGUI_HEADLESS === '1',
+  },
+})
+
+/* -------------------------------------------------------------------------------------------------
+ * DefaultCloseIcon
+ * -----------------------------------------------------------------------------------------------*/
+
+export const DefaultCloseIcon = () => (
+  <SizableText size="$1" color="$color11">
+    ✕
+  </SizableText>
+)

package/src/ToastPortal.tsx

@@ -0,0 +1,19 @@
+import { isWeb } from '@hanzogui/constants'
+import { Portal } from '@hanzogui/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>
+}

package/src/ToastProvider.tsx

@@ -0,0 +1,204 @@
+import { createCollection } from '@hanzogui/collection'
+import type { NativeValue, HanzoguiElement } from '@hanzogui/core'
+import { createStyledContext } from '@hanzogui/core'
+import { startTransition } from '@hanzogui/start-transition'
+import * as React from 'react'
+
+import { TOAST_CONTEXT } from './constants'
+import type { ToastImperativeOptions } from './ToastImperative'
+import { ToastImperativeProvider } from './ToastImperative'
+import type { BurntToastOptions } from './types'
+
+/* -------------------------------------------------------------------------------------------------
+ * ToastProvider
+ * -----------------------------------------------------------------------------------------------*/
+
+const PROVIDER_NAME = 'ToastProvider'
+
+const [Collection, useCollection] = createCollection<HanzoguiElement>('Toast')
+
+export type SwipeDirection =
+  | 'vertical'
+  | 'up'
+  | 'down'
+  | 'horizontal'
+  | 'left'
+  | 'right'
+  | 'auto'
+
+export type ToastProviderContextValue = {
+  id: string
+  toastScope: string
+  label: string
+  duration: number
+  swipeDirection: SwipeDirection
+  swipeThreshold: number
+  toastCount: number
+  viewports: Record<string, HanzoguiElement | null>
+  onViewportChange(name: string, viewport: HanzoguiElement): void
+  onToastAdd(): void
+  onToastRemove(): void
+  isFocusedToastEscapeKeyDownRef: React.MutableRefObject<boolean>
+  isClosePausedRef: React.MutableRefObject<boolean>
+  options: ToastImperativeOptions
+}
+
+export type ToastScopes = string
+
+type ScopedProps<P> = Omit<P, 'scope'> & { scope?: ToastScopes }
+
+const { Provider: ToastProviderProvider, useStyledContext: useToastProviderContext } =
+  createStyledContext<ToastProviderContextValue>(
+    // since we always provide this we can avoid setting here
+    {} as ToastProviderContextValue,
+    'Toast__'
+  )
+
+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
+  /**
+   * Will show a native toast if is true or is set to the current platform. On iOS, it wraps `SPIndicator` and `SPAlert`. On Android, it wraps `ToastAndroid`. On web, it wraps Notification API. Mobile's native features are handled by `burnt`.
+   * Only works with the imperative `useToast` hook.
+   */
+  native?: NativeValue
+  /**
+   * Options for the burnt package if you're using native toasts on mobile
+   */
+  burntOptions?: Omit<BurntToastOptions, 'title' | 'message' | 'duration'>
+  /**
+   * Options for the notification API if you're using native toasts on web
+   */
+  notificationOptions?: NotificationOptions
+}
+
+const ToastProvider: React.FC<ToastProviderProps> = (
+  props: ScopedProps<ToastProviderProps>
+) => {
+  const {
+    scope = TOAST_CONTEXT,
+    id: providedId,
+    burntOptions,
+    native,
+    notificationOptions,
+    label = 'Notification',
+    duration = 5000,
+    swipeDirection = 'right',
+    swipeThreshold = 50,
+    children,
+  } = props
+  const backupId = React.useId()
+  const id = providedId ?? backupId
+  const [viewports, setViewports] = React.useState<
+    ToastProviderContextValue['viewports']
+  >({})
+  const [toastCount, setToastCount] = React.useState(0)
+  const isFocusedToastEscapeKeyDownRef = React.useRef(false)
+  const isClosePausedRef = React.useRef(false)
+
+  const handleViewportChange = React.useCallback(
+    (name: string, viewport: HanzoguiElement | null) => {
+      startTransition(() => {
+        setViewports((prev) => ({ ...prev, [name]: viewport }))
+      })
+    },
+    []
+  )
+
+  // memo context to avoid expensive re-renders
+  const options = React.useMemo(() => {
+    return {
+      duration,
+      burntOptions,
+      native,
+      notificationOptions,
+    }
+    // nested simple object so JSON.stringify
+  }, [JSON.stringify([duration, burntOptions, native, notificationOptions])])
+
+  return (
+    <Collection.Provider scope={scope}>
+      <ToastProviderProvider
+        scope={scope}
+        id={id}
+        label={label}
+        duration={duration}
+        swipeDirection={swipeDirection}
+        swipeThreshold={swipeThreshold}
+        toastCount={toastCount}
+        viewports={viewports}
+        onViewportChange={handleViewportChange}
+        onToastAdd={React.useCallback(() => {
+          startTransition(() => {
+            setToastCount((prevCount) => prevCount + 1)
+          })
+        }, [])}
+        onToastRemove={React.useCallback(() => {
+          startTransition(() => {
+            setToastCount((prevCount) => prevCount - 1)
+          })
+        }, [])}
+        isFocusedToastEscapeKeyDownRef={isFocusedToastEscapeKeyDownRef}
+        isClosePausedRef={isClosePausedRef}
+        options={options}
+      >
+        <ToastImperativeProvider options={options}>{children}</ToastImperativeProvider>
+      </ToastProviderProvider>
+    </Collection.Provider>
+  )
+}
+
+export function ReprogapateToastProvider(props: {
+  children: React.ReactNode
+  context: ToastProviderContextValue
+}) {
+  const { children, context } = props
+  return (
+    <Collection.Provider scope={context.toastScope}>
+      <ToastProviderProvider {...context}>
+        <ToastImperativeProvider options={context.options}>
+          {children}
+        </ToastImperativeProvider>
+      </ToastProviderProvider>
+    </Collection.Provider>
+  )
+}
+
+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, useCollection, useToastProviderContext }
+export type { ScopedProps, ToastProviderProps }