Minor improvements on Toaster

src/packages/Toaster/index.tsx

@@ -10,39 +10,41 @@ export type ToasterProps = {
   duration?: number | null
   closable?: boolean
   initialVisible?: boolean
+  showProgress?: boolean
 } & Omit<AlertProps, 'header'> // Omit the 'header' prop from AlertProps
 
 const Toaster = ({
   duration,
   closable = true,
   initialVisible = true,
+  showProgress = true,
   severity = 'success',
   onClose,
   ...props
 }: ToasterProps) => {
   const [isVisible, setIsVisible] = useState(initialVisible)
 
+  const handleClose = useCallback(() => {
+    setIsVisible(false)
+    onClose && onClose()
+  }, [onClose])
+
   useEffect(() => {
     if (typeof duration === 'number') {
       const timer = setTimeout(() => {
-        setIsVisible(false)
+        handleClose()
       }, duration)
 
       return () => {
         clearTimeout(timer)
       }
     }
-  }, [duration])
+  }, [duration, handleClose])
 
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const theme = useContext(ThemeContext)
 
-  const handleClose = useCallback(() => {
-    setIsVisible(false)
-    onClose && onClose()
-  }, [onClose])
-
   if (!isVisible) {
     return null
   }
@@ -55,7 +57,9 @@ const Toaster = ({
         severity={severity}
         onClose={() => handleClose()}
       />
-      <ProgressBar indeterminate={true} color={theme.colors.base[severity]} />
+      {showProgress && (
+        <ProgressBar indeterminate={true} color={theme.colors.base[severity]} />
+      )}
     </S.Toaster>
   )
 }

src/packages/Toaster/stories.tsx

@@ -9,7 +9,8 @@ export default {
     children: 'This is a toaster message',
     severity: 'info',
     showIcon: true,
-    closable: true
+    closable: true,
+    onClose: () => console.log('closed')
   }
 } as Meta