docs: fix client error for learning path (#10102)

www/packages/docs-ui/src/components/Notification/Item/index.tsx

@@ -1,6 +1,10 @@
+"use client"
+
 import clsx from "clsx"
-import React, { Children, ReactElement } from "react"
+import React, { Children, ReactElement, useRef } from "react"
 import { NotificationItemLayoutDefault } from "./Layout/Default"
+// @ts-expect-error can't install the types package because it doesn't support React v19
+import { CSSTransition } from "react-transition-group"
 
 export type NotificationItemProps = {
   layout?: "default" | "empty"
@@ -16,65 +20,70 @@ export type NotificationItemProps = {
   setShow?: (value: boolean) => void
   onClose?: () => void
   closeButtonText?: string
+  passRef?: React.RefObject<HTMLDivElement>
 } & React.HTMLAttributes<HTMLDivElement>
 
 type EmptyLayoutProps = {
   onClose?: () => void
 }
 
-export const NotificationItem = React.forwardRef<
-  HTMLDivElement,
-  NotificationItemProps
->(function NotificationItem(
-  {
-    className = "",
-    placement = "bottom",
-    show = true,
-    layout = "default",
-    setShow,
-    onClose,
-    children,
-    ...rest
-  },
-  ref
-) {
+export const NotificationItem = ({
+  className = "",
+  placement = "bottom",
+  show = true,
+  layout = "default",
+  setShow,
+  onClose,
+  children,
+  ...rest
+}: NotificationItemProps) => {
+  const ref = useRef<HTMLDivElement>(null)
   const handleClose = () => {
     setShow?.(false)
     onClose?.()
   }
 
   return (
-    <div
-      className={clsx(
-        "md:max-w-[320px] md:w-[320px] w-full",
-        "fixed md:right-docs_1 left-0 md:m-docs_1",
-        placement === "bottom" && "md:bottom-docs_1 bottom-0",
-        placement === "top" && "md:top-docs_1 top-0",
-        "opacity-100 transition-opacity duration-200 ease-ease",
-        !show && "!opacity-0",
-        className
-      )}
-      ref={ref}
+    <CSSTransition
+      timeout={200}
+      classNames={{
+        enter: "animate-slideInRight animate-fast",
+        exit: "animate-slideOutRight animate-fast",
+      }}
+      nodeRef={ref}
     >
-      {layout === "default" && (
-        <NotificationItemLayoutDefault {...rest} handleClose={handleClose}>
-          {children}
-        </NotificationItemLayoutDefault>
-      )}
-      {layout === "empty" &&
-        Children.map(children, (child) => {
-          if (child) {
-            return React.cloneElement<EmptyLayoutProps>(
-              child as React.ReactElement<
-                EmptyLayoutProps,
-                React.FunctionComponent<EmptyLayoutProps>
-              >,
-              {
-                onClose: handleClose,
-              }
-            )
-          }
-        })}
-    </div>
+      <div
+        className={clsx(
+          "md:max-w-[320px] md:w-[320px] w-full",
+          "fixed md:right-docs_1 left-0 md:m-docs_1",
+          placement === "bottom" && "md:bottom-docs_1 bottom-0",
+          placement === "top" && "md:top-docs_1 top-0",
+          "opacity-100 transition-opacity duration-200 ease-ease",
+          !show && "!opacity-0",
+          className
+        )}
+        ref={ref}
+      >
+        {layout === "default" && (
+          <NotificationItemLayoutDefault {...rest} handleClose={handleClose}>
+            {children}
+          </NotificationItemLayoutDefault>
+        )}
+        {layout === "empty" &&
+          Children.map(children, (child) => {
+            if (child) {
+              return React.cloneElement<EmptyLayoutProps>(
+                child as React.ReactElement<
+                  EmptyLayoutProps,
+                  React.FunctionComponent<EmptyLayoutProps>
+                >,
+                {
+                  onClose: handleClose,
+                }
+              )
+            }
+          })}
+      </div>
+    </CSSTransition>
   )
-})
+}

www/packages/docs-ui/src/components/Notification/index.tsx

@@ -5,25 +5,16 @@ import {
   NotificationItemType,
   useNotifications,
 } from "@/providers"
-import React, { useEffect, useRef } from "react"
+import React from "react"
 import { NotificationItem } from "./Item"
 // @ts-expect-error can't install the types package because it doesn't support React v19
-import { CSSTransition, TransitionGroup } from "react-transition-group"
+import { TransitionGroup } from "react-transition-group"
 import clsx from "clsx"
 
 export const NotificationContainer = () => {
   const { notifications, removeNotification } =
     useNotifications() as NotificationContextType
 
-  const notificationRefs = useRef([])
-
-  useEffect(() => {
-    notificationRefs.current = notificationRefs.current.slice(
-      0,
-      notifications.length
-    )
-  }, [notifications])
-
   const handleClose = (notification: NotificationItemType) => {
     notification.onClose?.()
     if (notification.id) {
@@ -45,26 +36,16 @@ export const NotificationContainer = () => {
           className
         )}
       >
-        {notifications.filter(condition).map((notification, index) => (
-          <CSSTransition
+        {notifications.filter(condition).map((notification) => (
+          <NotificationItem
+            {...notification}
+            onClose={() => handleClose(notification)}
+            className={clsx(
+              notification.className,
+              "!relative !top-0 !bottom-0 !right-0"
+            )}
             key={notification.id}
-            timeout={200}
-            classNames={{
-              enter: "animate-slideInRight animate-fast",
-              exit: "animate-slideOutRight animate-fast",
-            }}
-            nodeRef={notificationRefs.current[index]}
-          >
-            <NotificationItem
-              {...notification}
-              onClose={() => handleClose(notification)}
-              ref={notificationRefs.current[index]}
-              className={clsx(
-                notification.className,
-                "!relative !top-0 !bottom-0 !right-0"
-              )}
-            />
-          </CSSTransition>
+          />
         ))}
       </TransitionGroup>
     )