@kaizen/components 1.70.4 → 1.70.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/components",
-  "version": "1.70.4",
+  "version": "1.70.6",
   "description": "Kaizen component library",
   "author": "Geoffrey Chong <geoff.chong@cultureamp.com>",
   "homepage": "https://cultureamp.design",

package/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 />

package/src/Notification/ToastNotification/ToastNotificationsList/ToastNotificationsList.tsx

@@ -1,36 +1,35 @@
-import React from 'react'
-import { createPortal } from 'react-dom'
+import React, { useEffect, useState } from 'react'
 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)
 
-  const containers = document.querySelectorAll('[data-testid="toast-notifications-list"')
-
-  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()
-    })
-  }
+  useEffect(() => {
+    // 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('id', toastNotificationListId)
+      container.setAttribute('role', 'status')
+      container.className = styles.toastNotificationsList
+      document.body.appendChild(container)
+    }
+    setToastContainer(container)
+  }, [])
 
-  return createPortal(
-    <div
-      data-testid="toast-notifications-list"
-      role="status"
-      className={styles.toastNotificationsList}
-    >
-      <ToastNotificationsMap
-        notifications={notifications}
-        onHide={removeToastNotification}
-        container={containers[0]}
-      />
-    </div>,
-    document.body,
+  return toastContainer ? (
+    <ToastNotificationsMap
+      notifications={notifications}
+      onHide={removeToastNotification}
+      container={toastContainer}
+    />
+  ) : (
+    <></>
   )
 }
 

package/src/__rc__/Menu/MenuItem.module.css

@@ -5,7 +5,7 @@
   letter-spacing: var(--typography-paragraph-body-letter-spacing);
   font-weight: var(--typography-paragraph-body-font-weight);
   line-height: var(--typography-paragraph-body-line-height);
-  color: rgba(var(--color-purple-800-rgb), 0.7);
+  color: var(--color-purple-800);
   padding: var(--spacing-6) var(--spacing-8);
   border: var(--border-focus-ring-border-width) var(--border-focus-ring-border-style) transparent;
   border-radius: 4px;