fix(toast): update notifications to use react portal (#2510)

* fix(toast): update notifications to use react portal

* chore: add react-dom to Utils dependencies

* fix: remove Notification from website page

packages/Toast/package.json

@@ -54,6 +54,7 @@
     "@welcome-ui/close-button": "^5.17.2",
     "@welcome-ui/system": "^5.17.1",
     "@welcome-ui/text": "^5.18.0",
+    "@welcome-ui/utils": "^5.17.1",
     "react-hot-toast": "^2.4.1"
   },
   "peerDependencies": {

packages/Toast/src/index.tsx

@@ -1,5 +1,6 @@
 import React, { useContext } from 'react'
 import { ThemeContext, ThemeProvider } from '@xstyled/styled-components'
+import { useCreatePortal } from '@welcome-ui/utils'
 import { TextProps } from '@welcome-ui/text'
 import toastRHT, { ToastPosition, useToaster } from 'react-hot-toast/headless'
 
@@ -21,6 +22,7 @@ export type ToastOptions = {
 
 export const Notifications: React.FC<NotificationsProps> = ({ pauseOnHover = true }) => {
   const themeContext = useContext(ThemeContext)
+  const createPortal = useCreatePortal()
   const { handlers, toasts } = useToaster()
   const { calculateOffset, endPause, startPause, updateHeight } = handlers
 
@@ -29,16 +31,19 @@ export const Notifications: React.FC<NotificationsProps> = ({ pauseOnHover = tru
 
   return (
     <ThemeProvider theme={themeContext}>
-      <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
-        {toasts.map(toast => (
-          <ToastWrapper
-            calculateOffset={calculateOffset}
-            key={toast.id}
-            toast={toast}
-            updateHeight={updateHeight}
-          />
-        ))}
-      </div>
+      {toasts.length > 0 &&
+        createPortal(
+          <div onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>
+            {toasts.map(toast => (
+              <ToastWrapper
+                calculateOffset={calculateOffset}
+                key={toast.id}
+                toast={toast}
+                updateHeight={updateHeight}
+              />
+            ))}
+          </div>
+        )}
     </ThemeProvider>
   )
 }

packages/Utils/package.json

@@ -45,7 +45,8 @@
   "peerDependencies": {
     "@xstyled/styled-components": "^3.7.3",
     "react": "^18.0.0",
-    "styled-components": "^5.3.9"
+    "styled-components": "^5.3.9",
+    "react-dom": "^18.1.0"
   },
   "gitHead": "974e7bfd71f8cfe846cbffd678c3860a8952f9e9",
   "sideEffects": false,

packages/Utils/src/index.ts

@@ -10,6 +10,7 @@ export * from './hex-to-rgba'
 export * from './hide-focus-rings-root'
 export * from './overflow-ellipsis'
 export * from './throttle'
+export * from './use-create-portal'
 export * from './use-fork-ref'
 export * from './use-isomorphic-layout-effect'
 export * from './use-next-frame'

packages/Utils/src/use-create-portal.ts

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+type CreatePortal = typeof createPortal
+
+/**
+ * Hook that mimic the React createPortal function in order to make it SSR friendly
+ */
+export function useCreatePortal(disable = false) {
+  const [mounted, setMounted] = useState<boolean>(false)
+
+  useEffect(() => {
+    setMounted(true)
+  }, [])
+
+  return useMemo(() => {
+    if (disable) {
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      return (children: React.ReactNode) => children as any
+    }
+
+    return mounted
+      ? (children: React.ReactNode, container?: Element | DocumentFragment, key?: string | null) =>
+          createPortal(children, container || document.body, key)
+      : () => null as unknown as CreatePortal
+  }, [disable, mounted])
+}

website/app/layout.tsx

@@ -1,5 +1,6 @@
 import type { Metadata } from 'next'
 import { Box } from '@welcome-ui/box'
+import { Notifications } from '@welcome-ui/toast'
 
 import StyledComponentsRegistry from '@/build-app/registry'
 import { ThemeProvider } from '@/build-app/components/ThemeProvider'
@@ -34,6 +35,7 @@ const RootLayout = ({ children }: { children: React.ReactNode }) => {
           <ThemeProvider>
             <Box backgroundColor="light-900">
               <Header components={pagesComponents} foundations={pagesFoundations} />
+              <Notifications />
               {children}
               <Footer />
             </Box>

website/app/page.tsx

@@ -3,7 +3,6 @@ import NextLink from 'next/link'
 import { Button } from '@welcome-ui/button'
 import { Box } from '@welcome-ui/box'
 import { GithubIcon, HeartIcon, RightIcon } from '@welcome-ui/icons'
-import { Notifications } from '@welcome-ui/toast'
 
 import { Components } from '@/build-app/components/Homepage/Components'
 import { Stats } from '@/build-app/components/Homepage/Stats'
@@ -14,7 +13,6 @@ import { Section } from '@/build-app/components/Section'
 const Home = () => {
   return (
     <main>
-      <Notifications pauseOnHover={false} />
       <Section backgroundColor="nude-200">
         <Text as="span" color="dark-900" textTransform="uppercase" variant="subtitle-md">
           Welcome UI

yarn.lock

@@ -263,6 +263,16 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.25.0.tgz#f858ddfa984350bc3d3b7f125073c9af6988f18e"
+  integrity sha512-3LEEcj3PVW8pW2R1SR1M89g/qrYk/m/mB/tLqn7dn4sbBUQyTqnlod+II2U4dqiGtUmkcnAmkMDralTFZttRiw==
+  dependencies:
+    "@babel/types" "^7.25.0"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.16.0", "@babel/helper-annotate-as-pure@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.18.6.tgz#eaa49f6f80d5a33f9a5dd2276e6d6e451be0a6bb"
@@ -614,6 +624,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.8.tgz#58a4dbbcad7eb1d48930524a3fd93d93e9084c6f"
   integrity sha512-WzfbgXOkGzZiXXCqk43kKwZjzwx4oulxZi3nq2TYL9mOjQv6kYwul9mz6ID36njuL7Xkp6nJEfok848Zj10j/w==
 
+"@babel/parser@^7.25.0", "@babel/parser@^7.25.3":
+  version "7.25.3"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.25.3.tgz#91fb126768d944966263f0657ab222a642b82065"
+  integrity sha512-iLTJKDbJ4hMvFPgQwwsVoxtHyWpKKPBrxkANrSYewDPaPpT5py5yeVkgPIJ7XYXhndxJpaA3PyALSXQ7u8e/Dw==
+  dependencies:
+    "@babel/types" "^7.25.2"
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.7":
   version "7.24.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.7.tgz#fd059fd27b184ea2b4c7e646868a9a381bbc3055"
@@ -1471,19 +1488,25 @@
     "@babel/parser" "^7.24.7"
     "@babel/types" "^7.24.7"
 
+"@babel/template@^7.25.0":
+  version "7.25.0"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
+  integrity sha512-aOOgh1/5XzKvg1jvVz7AVrx2piJ2XBi227DHmbY6y+bM9H2FlN+IfecYu4Xl0cNiiVejlsCri89LUsbj8vJD9Q==
+  dependencies:
+    "@babel/code-frame" "^7.24.7"
+    "@babel/parser" "^7.25.0"
+    "@babel/types" "^7.25.0"
+
 "@babel/[email protected]", "@babel/traverse@>=7.23.2", "@babel/traverse@^7.19.1", "@babel/traverse@^7.24.7", "@babel/traverse@^7.24.8", "@babel/traverse@^7.4.5", "@babel/traverse@^7.8.3":
-  version "7.24.8"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.8.tgz#6c14ed5232b7549df3371d820fbd9abfcd7dfab7"
-  integrity sha512-t0P1xxAPzEDcEPmjprAQq19NWum4K0EQPjMwZQZbHt+GiZqvjCHjj755Weq1YRPVzBI+3zSfvScfpnuIecVFJQ==
+  version "7.25.3"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.25.3.tgz#f1b901951c83eda2f3e29450ce92743783373490"
+  integrity sha512-HefgyP1x754oGCsKmV5reSmtV7IXj/kpaE1XYY+D9G5PvKKoFfSbiS4M77MdjuwlZKDIKFCffq9rPU+H/s3ZdQ==
   dependencies:
     "@babel/code-frame" "^7.24.7"
-    "@babel/generator" "^7.24.8"
-    "@babel/helper-environment-visitor" "^7.24.7"
-    "@babel/helper-function-name" "^7.24.7"
-    "@babel/helper-hoist-variables" "^7.24.7"
-    "@babel/helper-split-export-declaration" "^7.24.7"
-    "@babel/parser" "^7.24.8"
-    "@babel/types" "^7.24.8"
+    "@babel/generator" "^7.25.0"
+    "@babel/parser" "^7.25.3"
+    "@babel/template" "^7.25.0"
+    "@babel/types" "^7.25.2"
     debug "^4.3.1"
     globals "^11.1.0"
 
@@ -1496,6 +1519,15 @@
     "@babel/helper-validator-identifier" "^7.24.7"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.25.0", "@babel/types@^7.25.2":
+  version "7.25.2"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.25.2.tgz#55fb231f7dc958cd69ea141a4c2997e819646125"
+  integrity sha512-YTnYtra7W9e6/oAZEHj0bJehPRUlLH9/fbpT5LfB0NhQXyALCRkRs3zH9v07IYhkgpqX6Z78FnuccZr/l4Fs4Q==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.8"
+    "@babel/helper-validator-identifier" "^7.24.7"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"