fix(toast): resolve an issue with toast api

packages/frameworks/react/CHANGELOG.md

@@ -9,6 +9,7 @@ description: All notable changes to this project will be documented in this file
 ### Fixed
 
 - Resolved an issue with using `Locale` in Next.js projects.
+- Resolved an issue with `Toast` not updating its toasts and count properties when creating one or more toasts.
 
 ## [2.2.2] - 2024-02-27
 

packages/frameworks/react/src/toast/create-toaster.tsx

@@ -21,6 +21,11 @@ export const createToaster = (props: CreateToasterProps): CreateToasterReturn =>
   const service = toast.group.machine({ id: '1', placement, ...rest }).start()
   let api = toast.group.connect(service.getState(), service.send, normalizeProps)
 
+  const subscribe = (fn: CallableFunction) => {
+    // @ts-expect-error FIX LATER IT EXISTS
+    return service.subscribe((state) => fn(state.context.toasts))
+  }
+
   const Toaster = forwardRef<HTMLOListElement, HTMLArkProps<'ol'>>((props, ref) => {
     const getRootNode = useEnvironmentContext()
     const [state, send] = useActor(service)
@@ -46,7 +51,7 @@ export const createToaster = (props: CreateToasterProps): CreateToasterReturn =>
 
   Toaster.displayName = 'ToastGroup'
 
-  return [Toaster, api]
+  return [Toaster, Object.assign(api, { subscribe })]
 }
 
 interface ToastProviderFactoryProps {

packages/frameworks/react/src/toast/stories/toast.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta } from '@storybook/react'
+import { useEffect } from 'react'
 import { Toast, createToaster } from '../'
 import './toast.css'
 
@@ -21,11 +22,19 @@ export const Basic = () => {
     },
   })
 
+  useEffect(
+    () => toast.subscribe((toasts) => toasts.forEach((toast) => console.log('Toast:', toast))),
+    [toast],
+  )
+
+  const handleToast = () => {
+    const id = toast.create({ title: 'Title', description: 'Description' })
+    console.log('Toast ID:', id)
+  }
+
   return (
     <>
-      <button onClick={() => toast.create({ title: 'Title', description: 'Description' })}>
-        Toast
-      </button>
+      <button onClick={handleToast}>Toast</button>
       <Toaster />
     </>
   )

packages/frameworks/solid/CHANGELOG.md

@@ -6,6 +6,10 @@ description: All notable changes to this project will be documented in this file
 
 ## [Unreleased]
 
+### Fixed
+
+- Resolved an issue with `Toast` not updating its toasts and count properties when creating one or more toasts.
+
 ## [2.2.0] - 2024-02-27
 
 ### Added

packages/frameworks/solid/src/toast/create-toaster.tsx

@@ -24,6 +24,11 @@ export const createToaster = (props: CreateToasterProps): CreateToasterReturn =>
   const [state, send] = useActor(service)
   const api = createMemo(() => toast.group.connect(state, send, normalizeProps))
 
+  const subscribe = (fn: CallableFunction) => {
+    // @ts-expect-error FIX LATER IT EXISTS
+    return service.subscribe((state) => fn(state.context.toasts))
+  }
+
   const Toaster = (toasterProps: HTMLArkProps<'ol'>) => {
     const getRootNode = useEnvironmentContext()
 
@@ -46,7 +51,7 @@ export const createToaster = (props: CreateToasterProps): CreateToasterReturn =>
     )
   }
 
-  return [Toaster, api]
+  return [Toaster, createMemo(() => Object.assign(api(), { subscribe }))]
 }
 
 interface ToastProviderFactoryProps {

packages/frameworks/solid/src/toast/stories/toast.stories.tsx

@@ -1,3 +1,4 @@
+import { createEffect } from 'solid-js'
 import type { Meta } from 'storybook-solidjs'
 import { Toast, createToaster } from '../'
 import './toast.css'
@@ -22,11 +23,18 @@ export const Basic = () => {
     },
   })
 
+  createEffect(() =>
+    toast().subscribe((toasts) => toasts.forEach((toast) => console.log('Toast:', toast))),
+  )
+
+  const handleToast = () => {
+    const id = toast().create({ title: 'Title', description: 'Description' })
+    console.log('Toast ID:', id)
+  }
+
   return (
     <>
-      <button onClick={() => toast().create({ title: 'Title', description: 'Description' })}>
-        Toast
-      </button>
+      <button onClick={handleToast}>Toast</button>
       <Toaster />
     </>
   )