From a9eb40a7163bfdd5b49c48fb77a6070f2e8fbe20 Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Mon, 23 Dec 2024 13:43:21 +1300
Subject: [PATCH 01/10] Simplify KaizenProvider

---
 packages/components/src/KaizenProvider/KaizenProvider.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/KaizenProvider/KaizenProvider.tsx b/packages/components/src/KaizenProvider/KaizenProvider.tsx
index 3f178d76aa3..f8cbf0f2b22 100644
--- a/packages/components/src/KaizenProvider/KaizenProvider.tsx
+++ b/packages/components/src/KaizenProvider/KaizenProvider.tsx
@@ -11,21 +11,19 @@ export type KaizenProviderProps = {
 
 export const KaizenProvider = ({ children, locale = 'en' }: KaizenProviderProps): JSX.Element => {
   const [documentIsAvailable, setDocumentIsAvailable] = useState<boolean>(false)
-  const [notificationsList, setNotificationsList] = useState<JSX.Element>()
 
   useEffect(() => {
     // SSR does not have a document, which is required for ToastNotificationsList.
     // Await document render before rendering the component.
     if (document !== undefined) {
-      setNotificationsList(<ToastNotificationsList />)
       setDocumentIsAvailable(true)
     }
-  }, [documentIsAvailable])
+  }, [])
 
   return (
     <OptionalIntlProvider locale={locale}>
       <ToastNotificationProvider>
-        {notificationsList}
+        {documentIsAvailable && <ToastNotificationsList />}
         {children}
       </ToastNotificationProvider>
       <FontDefinitions />

From bc6f4497c8433e1406463908a4fd61f4b85ab3b6 Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Mon, 23 Dec 2024 13:43:39 +1300
Subject: [PATCH 02/10] changeset

---
 .changeset/proud-cameras-lay.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/proud-cameras-lay.md

diff --git a/.changeset/proud-cameras-lay.md b/.changeset/proud-cameras-lay.md
new file mode 100644
index 00000000000..208bd219604
--- /dev/null
+++ b/.changeset/proud-cameras-lay.md
@@ -0,0 +1,5 @@
+---
+'@kaizen/components': patch
+---
+
+Simplify KaizenProvider

From 9605a5b08648427bd9c60fc7f0c4adc2bd899291 Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Mon, 23 Dec 2024 14:47:31 +1300
Subject: [PATCH 03/10] Fix story

---
 .../_docs/ToastNotification.stories.tsx       | 37 ++++++++++---------
 1 file changed, 19 insertions(+), 18 deletions(-)

diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
index 38921d18748..0211b18547f 100644
--- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
+++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useId } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { expect, within } from '@storybook/test'
+import { expect, within, userEvent } from '@storybook/test'
 import { Button } from '~components/Button'
 import { ToastNotification, useToastNotification } from '../index'
 
@@ -175,26 +175,27 @@ export const NoDuplicatesWithSameId: Story = {
   render: () => {
     const { addToastNotification } = useToastNotification()
 
-    useEffect(() => {
-      addToastNotification({
-        id: 'id--clear-example-1',
-        title: 'First',
-        type: 'positive',
-        message: 'There should only be one notification',
-      })
-      addToastNotification({
-        id: 'id--clear-example-1',
-        title: 'First',
-        type: 'positive',
-        message: 'There should only be one notification',
-      })
-    }, [addToastNotification])
-
-    return <div>Irrelevant content</div>
+    return (
+      <Button
+        label="Create notification"
+        onClick={() =>
+          addToastNotification({
+            id: 'id--clear-example-1',
+            title: 'First',
+            type: 'positive',
+            message: 'There should only be one notification',
+          })
+        }
+      />
+    )
   },
   play: async (context) => {
     const { canvasElement } = context
-    const { findAllByText } = within(canvasElement.parentElement!)
+    const { findAllByText, findByRole } = within(canvasElement.parentElement!)
+
+    const createNotificationButton = await findByRole('button', { name: 'Create notification' })
+    await userEvent.click(createNotificationButton)
+    await userEvent.click(createNotificationButton)
 
     const notifications = await findAllByText('There should only be one notification')
     expect(notifications).toHaveLength(1)

From 032f7d8b37ec0c901009a83c4f97540ee0996e18 Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Mon, 23 Dec 2024 14:50:53 +1300
Subject: [PATCH 04/10] Fix order import

---
 .../ToastNotification/_docs/ToastNotification.stories.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
index 0211b18547f..22f3ab32e95 100644
--- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
+++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useId } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { expect, within, userEvent } from '@storybook/test'
+import { expect, userEvent, within } from '@storybook/test'
 import { Button } from '~components/Button'
 import { ToastNotification, useToastNotification } from '../index'
 

From f7bea2413386ab941aa28a33c954fc0c4fa2718f Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Mon, 6 Jan 2025 18:15:28 +1300
Subject: [PATCH 05/10] Revert change to stories and ensure that container is
 set

---
 .../ToastNotificationsList.tsx                | 31 ++++++++++------
 .../_docs/ToastNotification.stories.tsx       | 37 +++++++++----------
 2 files changed, 38 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx b/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
index b23065b2b07..3f68cc45a94 100644
--- a/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
+++ b/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useEffect, useState } from 'react'
 import { createPortal } from 'react-dom'
 import { useToastNotificationContext } from '../context/ToastNotificationContext'
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap'
@@ -6,17 +6,26 @@ import styles from './ToastNotificationsList.module.scss'
 
 export const ToastNotificationsList = (): JSX.Element => {
   const { notifications, removeToastNotification } = useToastNotificationContext()
+  const [toastContainer, setToastContainer] = useState<Element | null>(null)
 
-  const containers = document.querySelectorAll('[data-testid="toast-notifications-list"')
+  useEffect(() => {
+    const containers = document.querySelectorAll('[data-testid="toast-notifications-list"')
+    if (toastContainer && containers.length === 1) {
+      return
+    }
 
-  if (containers) {
-    // Remove any duplicate instances
-    // (eg. Storybook docs page has multiple stories each with their own context)
-    containers.forEach((c, i) => {
-      if (i === 0) return
-      c.remove()
-    })
-  }
+    if (containers) {
+      // Remove any duplicate instances
+      // (eg. Storybook docs page has multiple stories each with their own context)
+      containers.forEach((c, i) => {
+        if (i === 0) {
+          setToastContainer(c)
+          return
+        }
+        c.remove()
+      })
+    }
+  }, [toastContainer])
 
   return createPortal(
     <div
@@ -27,7 +36,7 @@ export const ToastNotificationsList = (): JSX.Element => {
       <ToastNotificationsMap
         notifications={notifications}
         onHide={removeToastNotification}
-        container={containers[0]}
+        container={toastContainer}
       />
     </div>,
     document.body,
diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
index 22f3ab32e95..38921d18748 100644
--- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
+++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useId } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
-import { expect, userEvent, within } from '@storybook/test'
+import { expect, within } from '@storybook/test'
 import { Button } from '~components/Button'
 import { ToastNotification, useToastNotification } from '../index'
 
@@ -175,27 +175,26 @@ export const NoDuplicatesWithSameId: Story = {
   render: () => {
     const { addToastNotification } = useToastNotification()
 
-    return (
-      <Button
-        label="Create notification"
-        onClick={() =>
-          addToastNotification({
-            id: 'id--clear-example-1',
-            title: 'First',
-            type: 'positive',
-            message: 'There should only be one notification',
-          })
-        }
-      />
-    )
+    useEffect(() => {
+      addToastNotification({
+        id: 'id--clear-example-1',
+        title: 'First',
+        type: 'positive',
+        message: 'There should only be one notification',
+      })
+      addToastNotification({
+        id: 'id--clear-example-1',
+        title: 'First',
+        type: 'positive',
+        message: 'There should only be one notification',
+      })
+    }, [addToastNotification])
+
+    return <div>Irrelevant content</div>
   },
   play: async (context) => {
     const { canvasElement } = context
-    const { findAllByText, findByRole } = within(canvasElement.parentElement!)
-
-    const createNotificationButton = await findByRole('button', { name: 'Create notification' })
-    await userEvent.click(createNotificationButton)
-    await userEvent.click(createNotificationButton)
+    const { findAllByText } = within(canvasElement.parentElement!)
 
     const notifications = await findAllByText('There should only be one notification')
     expect(notifications).toHaveLength(1)

From dba327884665d2f12627a1c4847602cdeec4df9d Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Tue, 7 Jan 2025 18:14:04 +1300
Subject: [PATCH 06/10] Replicate the issue

---
 .../ToastNotification/_docs/ToastNotification.stories.tsx | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
index 38921d18748..0b757ca6852 100644
--- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
+++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
@@ -2,6 +2,7 @@ import React, { useEffect, useId } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, within } from '@storybook/test'
 import { Button } from '~components/Button'
+import { KaizenProvider } from '~components/KaizenProvider'
 import { ToastNotification, useToastNotification } from '../index'
 
 const meta = {
@@ -23,6 +24,13 @@ const meta = {
       control: false,
     },
   },
+  decorators: [
+    (Story) => (
+      <KaizenProvider>
+        <Story />
+      </KaizenProvider>
+    ),
+  ],
 } satisfies Meta<typeof ToastNotification>
 
 export default meta

From bff6276a13737623180676a17d5d5ade0a17a791 Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Tue, 7 Jan 2025 18:34:29 +1300
Subject: [PATCH 07/10] Good ol js to create element

---
 .../ToastNotificationsList.tsx                | 47 +++++++------------
 1 file changed, 17 insertions(+), 30 deletions(-)

diff --git a/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx b/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
index 3f68cc45a94..8f331e9d31e 100644
--- a/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
+++ b/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from 'react'
-import { createPortal } from 'react-dom'
 import { useToastNotificationContext } from '../context/ToastNotificationContext'
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap'
 import styles from './ToastNotificationsList.module.scss'
@@ -9,37 +8,25 @@ export const ToastNotificationsList = (): JSX.Element => {
   const [toastContainer, setToastContainer] = useState<Element | null>(null)
 
   useEffect(() => {
-    const containers = document.querySelectorAll('[data-testid="toast-notifications-list"')
-    if (toastContainer && containers.length === 1) {
-      return
+    let container = document.querySelector('[data-testid="toast-notifications-list"]')
+    if (!container) {
+      container = document.createElement('div')
+      container.setAttribute('data-testid', 'toast-notifications-list')
+      container.setAttribute('role', 'status')
+      container.className = styles.toastNotificationsList
+      document.body.appendChild(container)
     }
+    setToastContainer(container)
+  }, [])
 
-    if (containers) {
-      // Remove any duplicate instances
-      // (eg. Storybook docs page has multiple stories each with their own context)
-      containers.forEach((c, i) => {
-        if (i === 0) {
-          setToastContainer(c)
-          return
-        }
-        c.remove()
-      })
-    }
-  }, [toastContainer])
-
-  return createPortal(
-    <div
-      data-testid="toast-notifications-list"
-      role="status"
-      className={styles.toastNotificationsList}
-    >
-      <ToastNotificationsMap
-        notifications={notifications}
-        onHide={removeToastNotification}
-        container={toastContainer}
-      />
-    </div>,
-    document.body,
+  return toastContainer ? (
+    <ToastNotificationsMap
+      notifications={notifications}
+      onHide={removeToastNotification}
+      container={toastContainer}
+    />
+  ) : (
+    <></>
   )
 }
 

From 8afcee793d5d7e86b17583b2f7b4aef3585d0a0e Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Wed, 8 Jan 2025 10:17:17 +1300
Subject: [PATCH 08/10] Revert changes in story

---
 .../ToastNotification/_docs/ToastNotification.stories.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
index 0b757ca6852..38921d18748 100644
--- a/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
+++ b/packages/components/src/Notification/ToastNotification/_docs/ToastNotification.stories.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useId } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { expect, within } from '@storybook/test'
 import { Button } from '~components/Button'
-import { KaizenProvider } from '~components/KaizenProvider'
 import { ToastNotification, useToastNotification } from '../index'
 
 const meta = {
@@ -24,13 +23,6 @@ const meta = {
       control: false,
     },
   },
-  decorators: [
-    (Story) => (
-      <KaizenProvider>
-        <Story />
-      </KaizenProvider>
-    ),
-  ],
 } satisfies Meta<typeof ToastNotification>
 
 export default meta

From ff941557b66108c7dbe58ccfddd5b985b399707b Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Wed, 8 Jan 2025 10:37:32 +1300
Subject: [PATCH 09/10] Refactor

---
 .../ToastNotificationsList/ToastNotificationsList.tsx      | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx b/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
index 8f331e9d31e..95bf6ff450a 100644
--- a/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
+++ b/packages/components/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx
@@ -3,15 +3,18 @@ import { useToastNotificationContext } from '../context/ToastNotificationContext
 import { ToastNotificationsMap } from './subcomponents/ToastNotificationsMap'
 import styles from './ToastNotificationsList.module.scss'
 
+const toastNotificationListId = 'toast-notifications-list'
+
 export const ToastNotificationsList = (): JSX.Element => {
   const { notifications, removeToastNotification } = useToastNotificationContext()
   const [toastContainer, setToastContainer] = useState<Element | null>(null)
 
   useEffect(() => {
-    let container = document.querySelector('[data-testid="toast-notifications-list"]')
+    // this is to ensure that the container is created only once. Regardless of how many KaizenProvider is set up, they will also reuse the same container.
+    let container = document.querySelector(`[id="${toastNotificationListId}"]`)
     if (!container) {
       container = document.createElement('div')
-      container.setAttribute('data-testid', 'toast-notifications-list')
+      container.setAttribute('id', toastNotificationListId)
       container.setAttribute('role', 'status')
       container.className = styles.toastNotificationsList
       document.body.appendChild(container)

From ce636f3f27365a2c3ff4887aef4909fc481102fc Mon Sep 17 00:00:00 2001
From: Viet Anh Tran <viet.anhtran@cultureamp.com>
Date: Wed, 8 Jan 2025 10:48:44 +1300
Subject: [PATCH 10/10] Update changeset

---
 .changeset/proud-cameras-lay.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/.changeset/proud-cameras-lay.md b/.changeset/proud-cameras-lay.md
index 208bd219604..d73bc1d47a2 100644
--- a/.changeset/proud-cameras-lay.md
+++ b/.changeset/proud-cameras-lay.md
@@ -2,4 +2,6 @@
 '@kaizen/components': patch
 ---
 
-Simplify KaizenProvider
+Support having multiple KaizenProvider on the same page.
+
+This is helpful when publishing a package which relies toast notification - setting up its own KaizenProvider (which also set up ToastNofitification) will ensure that we won't run into `useToastNotificationContext must be used within the ToastNotificationContext.Provider` as this relies on the consumers' applications having the exact `@kaizen/components` version and depends on how package manager resolves peer deps. Especially for [pnpm](https://pnpm.io/how-peers-are-resolved), it might end up with 2 copies of the exact same version of kaizen/components therefore won't be able to find the `ToastNotificationContext.Provider` set up by the application.