feat(Toast): allow action without dismissing toast

docs/content/docs/components/toast.md

@@ -139,6 +139,20 @@ An action that is safe to ignore to ensure users are not expected to complete ta
 
 When obtaining a user response is necessary, portal an ["AlertDialog"](/docs/components/alert-dialog) styled as a toast into the viewport instead.
 
+By default, clicking `ToastAction` dismisses the toast. Set `closeOnClick` to `false` when the action should run while keeping the toast visible.
+
+```vue
+<template>
+  <ToastAction
+    alt-text="Retry sending the message"
+    :close-on-click="false"
+    @click="retry"
+  >
+    Retry
+  </ToastAction>
+</template>
+```
+
 <!-- @include: @/meta/ToastAction.md -->
 
 ### Close

docs/content/meta/ToastAction.md

@@ -13,13 +13,20 @@
     'description': '<p>The element or component this component should render as. Can be overwritten by <code>asChild</code>.</p>\n',
     'type': 'AsTag | Component',
     'required': false,
-    'default': '\'div\''
+    'default': '\'button\''
   },
   {
     'name': 'asChild',
     'description': '<p>Change the default rendered element for the one passed as a child, merging their props and behavior.</p>\n<p>Read our <a href=\'https://www.reka-ui.com/docs/guides/composition\'>Composition</a> guide for more details.</p>\n',
     'type': 'boolean',
     'required': false
+  },
+  {
+    'name': 'closeOnClick',
+    'description': '<p>Whether the action should close the toast when clicked.</p>\n',
+    'type': 'boolean',
+    'required': false,
+    'default': 'true'
   }
 ]" />
 </llm-exclude>
@@ -31,7 +38,8 @@
 | Name | Description | Type | Required | Default |
 | --- | --- | --- | --- | --- |
 | `altText` | A short description for an alternate way to carry out the action. For screen reader users who will not be able to navigate to the button easily/quickly. | `string` | Yes | - |
-| `as` | The element or component this component should render as. Can be overwritten by asChild. | `AsTag \| Component` | No | `"div"` |
+| `as` | The element or component this component should render as. Can be overwritten by asChild. | `AsTag \| Component` | No | `"button"` |
 | `asChild` | Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details. | `boolean` | No | - |
+| `closeOnClick` | Whether the action should close the toast when clicked. | `boolean` | No | `true` |
 
 </llm-only>

packages/core/src/Toast/Toast.test.ts

@@ -3,11 +3,48 @@ import { findByText, fireEvent } from '@testing-library/vue'
 import { mount } from '@vue/test-utils'
 import { beforeEach, describe, expect, it } from 'vitest'
 import { axe } from 'vitest-axe'
-import { nextTick } from 'vue'
+import { defineComponent, h, nextTick, ref } from 'vue'
+import { ToastAction, ToastDescription, ToastProvider, ToastRoot, ToastViewport } from '.'
 import Toast from './story/_Toast.vue'
 
 const CLOSE_TEXT = 'Close'
 
+const ToastWithPersistentAction = defineComponent({
+  setup() {
+    const open = ref(true)
+    const actionClicks = ref(0)
+
+    return {
+      open,
+      actionClicks,
+    }
+  },
+  render() {
+    return h(ToastProvider, null, {
+      default: () => [
+        h(ToastRoot, {
+          'open': this.open,
+          'onUpdate:open': (value: boolean) => {
+            this.open = value
+          },
+        }, {
+          default: () => [
+            h(ToastDescription, null, { default: () => 'Action available' }),
+            h(ToastAction, {
+              altText: 'Keep toast open after action',
+              closeOnClick: false,
+              onClick: () => {
+                this.actionClicks += 1
+              },
+            }, { default: () => 'Undo' }),
+          ],
+        }),
+        h(ToastViewport),
+      ],
+    })
+  },
+})
+
 describe('given a default Toast', () => {
   let wrapper: VueWrapper<InstanceType<typeof Toast>>
   let trigger: DOMWrapper<HTMLElement>
@@ -66,6 +103,17 @@ describe('given a default Toast', () => {
     expect(text).toContain('Scheduled: Catch up')
   })
 
+  it('should keep the toast open when action closeOnClick is false', async () => {
+    const wrapper = mount(ToastWithPersistentAction, { attachTo: document.body })
+
+    const action = await findByText(document.body, 'Undo')
+    await fireEvent.click(action)
+
+    expect(wrapper.vm.actionClicks).toBe(1)
+    expect(wrapper.vm.open).toBe(true)
+    expect(document.body.innerHTML).toContain('Action available')
+  })
+
   describe('after clicking the trigger', () => {
     beforeEach(async () => {
       fireEvent.click(trigger.element)

packages/core/src/Toast/ToastAction.vue

@@ -9,15 +9,25 @@ export interface ToastActionProps extends ToastCloseProps {
    * @example <ToastAction altText="Undo (Alt+U)">Undo</ToastAction>
    */
   altText: string
+  /**
+   * Whether the action should close the toast when clicked.
+   *
+   * @defaultValue true
+   */
+  closeOnClick?: boolean
 }
 </script>
 
 <script setup lang="ts">
+import { Primitive } from '@/Primitive'
 import { useForwardExpose } from '@/shared'
 import ToastAnnounceExclude from './ToastAnnounceExclude.vue'
 import ToastClose from './ToastClose.vue'
 
-const props = defineProps<ToastActionProps>()
+const props = withDefaults(defineProps<ToastActionProps>(), {
+  as: 'button',
+  closeOnClick: true,
+})
 
 if (!props.altText)
   throw new Error('Missing prop `altText` expected on `ToastAction`')
@@ -32,11 +42,22 @@ const { forwardRef } = useForwardExpose()
     as-child
   >
     <ToastClose
+      v-if="closeOnClick"
       :ref="forwardRef"
       :as="as"
       :as-child="asChild"
     >
       <slot />
     </ToastClose>
+
+    <Primitive
+      v-else
+      :ref="forwardRef"
+      :as="as"
+      :as-child="asChild"
+      :type="as === 'button' ? 'button' : undefined"
+    >
+      <slot />
+    </Primitive>
   </ToastAnnounceExclude>
 </template>