feat: Expose closeToast in useToasts hook action object (#914)

* feat: Expose showStickyToast in useToasts hook

* chore: Rename to closeToast and move inside action object

* chore: Add test to describe block

Author: nats12

src/toast/static-toast.tsx

@@ -11,6 +11,7 @@ import styles from './toast.module.css'
 type ToastActionObject = {
     label: string
     onClick: () => void
+    closeToast?: boolean
 }
 
 type StaticToastProps = {

src/toast/toast.stories.tsx

@@ -88,6 +88,22 @@ export function NotificationToastsStory() {
                         >
                             Show toast with action
                         </Button>
+                        <Button
+                            variant="primary"
+                            onClick={() => {
+                                const actionLabel = getRandom(actions)
+                                showToast({
+                                    message: `${count.current++}: ${getRandom(message)}`,
+                                    action: {
+                                        label: actionLabel,
+                                        onClick: storybookAction(actionLabel),
+                                        closeToast: false,
+                                    },
+                                })
+                            }}
+                        >
+                            Show toast without closing on action
+                        </Button>
                     </Inline>
                 </Box>
                 <SwitchField

src/toast/toast.test.tsx

@@ -124,6 +124,47 @@ describe('useToast', () => {
         expect(within(screen.getByRole('alert')).getByTestId('test-icon')).toBeInTheDocument()
     })
 
+    describe('if `closeToast` is false', () => {
+        it('keeps the toast visible after the action button is clicked', () => {
+            const actionFn = jest.fn()
+            const { showToast } = renderTestCase()
+            showToast({
+                action: { label: 'A sticky toast action', onClick: actionFn, closeToast: false },
+            })
+            expect(actionFn).not.toHaveBeenCalled()
+            userEvent.click(
+                within(screen.getByRole('alert')).getByRole('button', {
+                    name: 'A sticky toast action',
+                }),
+            )
+            expect(actionFn).toHaveBeenCalledTimes(1)
+
+            // closeToast has kept it in view
+            expect(screen.getByRole('alert')).toBeInTheDocument()
+        })
+    })
+
+    describe('if `closeToast` is true', () => {
+        it('removes the toast from view after the action button is clicked', async () => {
+            const actionFn = jest.fn()
+            const { showToast } = renderTestCase()
+            showToast({
+                action: { label: 'A sticky toast action', onClick: actionFn },
+            })
+            expect(actionFn).not.toHaveBeenCalled()
+            userEvent.click(
+                within(screen.getByRole('alert')).getByRole('button', {
+                    name: 'A sticky toast action',
+                }),
+            )
+            expect(actionFn).toHaveBeenCalledTimes(1)
+
+            await waitFor(() => {
+                expect(screen.queryByRole('alert')).not.toBeInTheDocument()
+            })
+        })
+    })
+
     describe('Dismiss button', () => {
         it('is rendered with a default label', () => {
             const { showToast } = renderTestCase()

src/toast/use-toasts.tsx

@@ -109,13 +109,17 @@ const InternalToast = React.forwardRef<HTMLDivElement, InternalToastProps>(funct
 
         return {
             ...action,
+            closeToast: action.closeToast ?? true,
             onClick: function handleActionClick() {
                 if (!action) {
                     return
                 }
 
                 action.onClick()
-                removeToast()
+
+                if (action.closeToast ?? true) {
+                    removeToast()
+                }
             },
         }
     }, [action, removeToast])