@tamagui/toast 1.76.0 → 1.77.0

package/src/Toast.tsx

@@ -5,7 +5,6 @@ import {
   TamaguiElement,
   composeEventHandlers,
   styled,
-  themeable,
   useEvent,
   withStaticProperties,
 } from '@tamagui/core'
@@ -23,6 +22,7 @@ import {
   useToastState,
 } from './ToastImperative'
 import {
+  ToastExtraProps,
   ToastImpl,
   ToastImplFrame,
   ToastProps,
@@ -134,6 +134,7 @@ const ToastCloseFrame = styled(ThemeableStack, {
   name: CLOSE_NAME,
   tag: 'button',
 })
+
 type ToastCloseFrameProps = GetProps<typeof ToastCloseFrame>
 type ToastCloseProps = ToastCloseFrameProps & {}
 
@@ -161,8 +162,8 @@ ToastClose.displayName = CLOSE_NAME
  * Toast
  * -----------------------------------------------------------------------------------------------*/
 
-const ToastComponent = React.forwardRef<TamaguiElement, ScopedProps<ToastProps>>(
-  ToastImplFrame.extractable((props: ScopedProps<ToastProps>, forwardedRef) => {
+const ToastComponent = ToastImplFrame.styleable<ToastExtraProps>(
+  (props, forwardedRef) => {
     const { forceMount, open: openProp, defaultOpen, onOpenChange, ...toastProps } = props
     const [open, setOpen] = useControllableState({
       prop: openProp,
@@ -192,20 +193,17 @@ const ToastComponent = React.forwardRef<TamaguiElement, ScopedProps<ToastProps>>
         })}
       />
     )
-  })
+  }
 )
 
 ToastComponent.displayName = TOAST_NAME
 
-const Toast = withStaticProperties(
-  themeable(ToastComponent, ToastImplFrame.staticConfig),
-  {
-    Title: ToastTitle,
-    Description: ToastDescription,
-    Action: ToastAction,
-    Close: ToastClose,
-  }
-)
+const Toast = withStaticProperties(ToastComponent, {
+  Title: ToastTitle,
+  Description: ToastDescription,
+  Action: ToastAction,
+  Close: ToastClose,
+})
 
 /* ---------------------------------------------------------------------------------------------- */
 

package/src/ToastImpl.tsx

@@ -36,6 +36,7 @@ import { VIEWPORT_PAUSE, VIEWPORT_RESUME } from './ToastViewport'
 const ToastImplFrame = styled(ThemeableStack, {
   name: 'ToastImpl',
   focusable: true,
+
   variants: {
     unstyled: {
       false: {
@@ -53,15 +54,36 @@ const ToastImplFrame = styled(ThemeableStack, {
       },
     },
   } as const,
+
   defaultVariants: {
     unstyled: process.env.TAMAGUI_HEADLESS === '1' ? true : false,
   },
 })
-interface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {
+
+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.
    */
@@ -75,73 +97,61 @@ interface ToastProps extends Omit<ToastImplProps, keyof ToastImplPrivateProps> {
    * controlling animation with React animation libraries.
    */
   forceMount?: true
-}
 
-type SwipeEvent = GestureResponderEvent
-
-const {
-  Provider: ToastInteractiveProvider,
-  useStyledContext: useToastInteractiveContext,
-} = createStyledContext({
-  onClose() {},
-})
+  /**
+   * 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 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
-    /**
-     *
-     */
-    id?: string
-  }
+type ToastImplProps = ToastImplPrivateProps & ToastImplFrameProps & ToastExtraProps
 
 const ToastImpl = React.forwardRef<TamaguiElement, ToastImplProps>(
   (props: ScopedProps<ToastImplProps>, forwardedRef) => {