diff --git a/packages/design-system/src/Toast.stories.tsx b/packages/design-system/src/Toast.stories.tsx
index d8f65aa..86f7f35 100644
--- a/packages/design-system/src/Toast.stories.tsx
+++ b/packages/design-system/src/Toast.stories.tsx
@@ -47,7 +47,11 @@ export const ExternalState = () => {
not hover on it.
-
+ setOpen(false)}
+ >
Content as Children
diff --git a/packages/design-system/src/Toast.tsx b/packages/design-system/src/Toast.tsx
index bcdf43d..472492a 100644
--- a/packages/design-system/src/Toast.tsx
+++ b/packages/design-system/src/Toast.tsx
@@ -7,7 +7,7 @@ import {
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import * as RadixToast from '@radix-ui/react-toast'
import * as React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import { useRef, useState } from 'react'
import { twMerge } from 'tailwind-merge'
import Button from './Button'
@@ -21,7 +21,7 @@ interface ToastProps {
actionOnClick?: () => void
position?: string
openExternal?: boolean
- setOpenExternal?: (open: boolean) => void
+ onCloseExternal?: () => void
type?: 'default' | 'success' | 'warning' | 'error'
children?: React.ReactNode
className?: {
@@ -50,23 +50,23 @@ interface ToastPropsWithChildren extends ToastProps {
export interface ToastPropsWithTitleTrigger extends ToastPropsWithTitle {
triggerText: string
openExternal?: never
- setOpenExternal?: never
+ onCloseExternal?: never
}
export interface ToastPropsWithTitleNoTrigger extends ToastPropsWithTitle {
triggerText?: never
openExternal: boolean
- setOpenExternal: (open: boolean) => void
+ onCloseExternal: () => void
}
export interface ToastPropsWithChildrenTrigger extends ToastPropsWithChildren {
triggerText: string
openExternal?: never
- setOpenExternal?: never
+ onCloseExternal?: never
}
export interface ToastPropsWithChildrenNoTrigger
extends ToastPropsWithChildren {
triggerText?: never
openExternal: boolean
- setOpenExternal: (open: boolean) => void
+ onCloseExternal: () => void
}
export function Toast({
@@ -79,7 +79,7 @@ export function Toast({
actionOnClick,
position = 'topRight',
openExternal,
- setOpenExternal,
+ onCloseExternal,
type = 'default',
children,
className,
@@ -89,7 +89,6 @@ export function Toast({
| ToastPropsWithChildrenTrigger
| ToastPropsWithChildrenNoTrigger): React.ReactElement {
const [open, setOpen] = useState(false)
- const eventDateRef = useRef(new Date())
const timerRef = useRef(0)
const defaultDuration = dismissible ? 60000 : 4000
@@ -100,19 +99,14 @@ export function Toast({
bottomLeft: 'bottom-0 left-0',
}
- useEffect(() => {
- return () => clearTimeout(timerRef.current)
- }, [])
-
return (
- {!openExternal && !setOpenExternal && (
+ {!openExternal && !onCloseExternal ? (
- )}
+ ) : null}
{dismissible && (