fix: timers type in browser env (#3875)

(cherry picked from commit fc9981335b)

packages/component/src/components/app-sidebar/index.tsx

@@ -35,7 +35,7 @@ export type AppSidebarProps = PropsWithChildren<
 function useEnableAnimation() {
   const [enable, setEnable] = useState(false);
   useEffect(() => {
-    setTimeout(() => {
+    window.setTimeout(() => {
       setEnable(true);
     }, 500);
   }, []);

packages/component/src/components/notification-center/index.tsx

@@ -80,7 +80,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
   const [animationKey, setAnimationKey] = useState(0);
   const animationRef = useRef<SVGAnimateElement>(null);
   const notificationRef = useRef<HTMLLIElement>(null);
-  const timerIdRef = useRef<NodeJS.Timeout>();
+  const timerIdRef = useRef<number>();
   const isFront = index === 0;
   const isVisible = index + 1 <= 3;
   const progressDuration = notification.timeout || 3000;
@@ -164,7 +164,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
     setHeights(h =>
       h.filter(height => height.notificationKey !== notification.key)
     );
-    setTimeout(() => {
+    window.setTimeout(() => {
       if (!notification.key) {
         return;
       }
@@ -177,7 +177,7 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
       clearTimeout(timerIdRef.current);
     }
     if (!expand) {
-      timerIdRef.current = setTimeout(() => {
+      timerIdRef.current = window.setTimeout(() => {
         onClickRemove();
       }, duration);
     }

packages/component/src/components/workspace-avatar/default-avatar.tsx

@@ -29,7 +29,7 @@ export const DefaultAvatar = ({ name: propsName }: { name: string }) => {
     return colorsSchema[index % colorsSchema.length];
   }, [name]);
 
-  const timer = useRef<ReturnType<typeof setTimeout>>();
+  const timer = useRef<number>();
 
   const [topColor, middleColor, bottomColor] = colors;
   const [isHover, setIsHover] = useState(false);
@@ -38,7 +38,7 @@ export const DefaultAvatar = ({ name: propsName }: { name: string }) => {
     <div
       className={DefaultAvatarContainerStyle}
       onMouseEnter={() => {
-        timer.current = setTimeout(() => {
+        timer.current = window.setTimeout(() => {
           setIsHover(true);
         }, 300);
       }}

packages/component/src/ui/popper/popper.tsx

@@ -69,7 +69,7 @@ export const Popper = ({
     }
     window.clearTimeout(pointerLeaveTimer.current);
 
-    pointerEnterTimer.current = window.setTimeout(() => {
+    pointerEnterTimer.current = window.window.setTimeout(() => {
       setVisible(true);
     }, pointerEnterDelay);
   };
@@ -81,7 +81,7 @@ export const Popper = ({
       return;
     }
     window.clearTimeout(pointerEnterTimer.current);
-    pointerLeaveTimer.current = window.setTimeout(() => {
+    pointerLeaveTimer.current = window.window.setTimeout(() => {
       setVisible(false);
     }, pointerLeaveDelay);
   };