fix: revert api change and use mouseenter/mouseleave

apps/web/src/app/(dashboard)/documents/[id]/page.tsx

@@ -13,7 +13,7 @@ import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/clie
 import { LazyPDFViewer } from '@documenso/ui/primitives/lazy-pdf-viewer';
 
 import { EditDocumentForm } from '~/app/(dashboard)/documents/[id]/edit-document';
-import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui';
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 
 export type DocumentPageProps = {
@@ -90,9 +90,9 @@ export default async function DocumentPage({ params }: DocumentPageProps) {
           <div className="text-muted-foreground flex items-center">
             <Users2 className="mr-2 h-5 w-5" />
 
-            <StackAvatarsUI recipients={recipients} position="bottom">
+            <StackAvatarsWithTooltip recipients={recipients} position="bottom">
               <span>{recipients.length} Recipient(s)</span>
-            </StackAvatarsUI>
+            </StackAvatarsWithTooltip>
           </div>
         )}
       </div>

apps/web/src/app/(dashboard)/documents/data-table.tsx

@@ -12,7 +12,7 @@ import { ExtendedDocumentStatus } from '@documenso/prisma/types/extended-documen
 import { DataTable } from '@documenso/ui/primitives/data-table';
 import { DataTablePagination } from '@documenso/ui/primitives/data-table-pagination';
 
-import { StackAvatarsUI } from '~/components/(dashboard)/avatar/stack-avatars-ui';
+import { StackAvatarsWithTooltip } from '~/components/(dashboard)/avatar/stack-avatars-with-tooltip';
 import { DocumentStatus } from '~/components/formatter/document-status';
 import { LocaleDate } from '~/components/formatter/locale-date';
 
@@ -64,7 +64,7 @@ export const DocumentsDataTable = ({ results }: DocumentsDataTableProps) => {
           {
             header: 'Recipient',
             accessorKey: 'recipient',
-            cell: ({ row }) => <StackAvatarsUI recipients={row.original.Recipient} />,
+            cell: ({ row }) => <StackAvatarsWithTooltip recipients={row.original.Recipient} />,
           },
           {
             header: 'Status',

apps/web/src/components/(dashboard)/avatar/stack-avatars-component.tsx

@@ -1,71 +0,0 @@
-import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
-import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
-import type { Recipient } from '@documenso/prisma/client';
-
-import { AvatarWithRecipient } from './avatar-with-recipient';
-import { StackAvatar } from './stack-avatar';
-
-export const StackAvatarsComponent = ({ recipients }: { recipients: Recipient[] }) => {
-  const waitingRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'waiting',
-  );
-
-  const openedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'opened',
-  );
-
-  const completedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'completed',
-  );
-
-  const uncompletedRecipients = recipients.filter(
-    (recipient) => getRecipientType(recipient) === 'unsigned',
-  );
-  return (
-    <div className="flex flex-col gap-y-5 px-1">
-      {completedRecipients.length > 0 && (
-        <div>
-          <h1 className="text-base font-medium">Completed</h1>
-          {completedRecipients.map((recipient: Recipient) => (
-            <div key={recipient.id} className="my-1 flex items-center gap-2">
-              <StackAvatar
-                first={true}
-                key={recipient.id}
-                type={getRecipientType(recipient)}
-                fallbackText={recipientAbbreviation(recipient)}
-              />
-              <span className="text-muted-foreground text-sm">{recipient.email}</span>
-            </div>
-          ))}
-        </div>
-      )}
-
-      {waitingRecipients.length > 0 && (
-        <div>
-          <h1 className="text-base font-medium">Waiting</h1>
-          {waitingRecipients.map((recipient: Recipient) => (
-            <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-          ))}
-        </div>
-      )}
-
-      {openedRecipients.length > 0 && (
-        <div>
-          <h1 className="text-base font-medium">Opened</h1>
-          {openedRecipients.map((recipient: Recipient) => (
-            <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-          ))}
-        </div>
-      )}
-
-      {uncompletedRecipients.length > 0 && (
-        <div>
-          <h1 className="text-base font-medium">Uncompleted</h1>
-          {uncompletedRecipients.map((recipient: Recipient) => (
-            <AvatarWithRecipient key={recipient.id} recipient={recipient} />
-          ))}
-        </div>
-      )}
-    </div>
-  );
-};

apps/web/src/components/(dashboard)/avatar/stack-avatars-ui.tsx

@@ -1,52 +0,0 @@
-'use client';
-
-import { useWindowSize } from '@documenso/lib/client-only/hooks/use-window-size';
-import type { Recipient } from '@documenso/prisma/client';
-import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from '@documenso/ui/primitives/tooltip';
-
-import { StackAvatars } from './stack-avatars';
-import { StackAvatarsComponent } from './stack-avatars-component';
-
-export type StackAvatarsUIProps = {
-  recipients: Recipient[];
-  position?: 'top' | 'bottom';
-  children?: React.ReactNode;
-};
-
-export const StackAvatarsUI = ({ recipients, position, children }: StackAvatarsUIProps) => {
-  const size = useWindowSize();
-
-  return (
-    <>
-      {size.width > 1050 ? (
-        <TooltipProvider>
-          <Tooltip delayDuration={200}>
-            <TooltipTrigger className="flex cursor-pointer">
-              {children || <StackAvatars recipients={recipients} />}
-            </TooltipTrigger>
-
-            <TooltipContent side={position}>
-              <StackAvatarsComponent recipients={recipients} />
-            </TooltipContent>
-          </Tooltip>
-        </TooltipProvider>
-      ) : (
-        <Popover>
-          <PopoverTrigger className="flex cursor-pointer">
-            {children || <StackAvatars recipients={recipients} />}
-          </PopoverTrigger>
-
-          <PopoverContent side={position}>
-            <StackAvatarsComponent recipients={recipients} />
-          </PopoverContent>
-        </Popover>
-      )}
-    </>
-  );
-};

apps/web/src/components/(dashboard)/avatar/stack-avatars-with-tooltip.tsx

@@ -0,0 +1,140 @@
+import { useRef, useState } from 'react';
+
+import { getRecipientType } from '@documenso/lib/client-only/recipient-type';
+import { recipientAbbreviation } from '@documenso/lib/utils/recipient-formatter';
+import type { Recipient } from '@documenso/prisma/client';
+import { Popover, PopoverContent, PopoverTrigger } from '@documenso/ui/primitives/popover';
+
+import { AvatarWithRecipient } from './avatar-with-recipient';
+import { StackAvatar } from './stack-avatar';
+import { StackAvatars } from './stack-avatars';
+
+export type StackAvatarsWithTooltipProps = {
+  recipients: Recipient[];
+  position?: 'top' | 'bottom';
+  children?: React.ReactNode;
+};
+
+export const StackAvatarsWithTooltip = ({
+  recipients,
+  position,
+  children,
+}: StackAvatarsWithTooltipProps) => {
+  const [open, setOpen] = useState(false);
+
+  const isControlled = useRef(false);
+  const isMouseOverTimeout = useRef<NodeJS.Timeout | null>(null);
+
+  const waitingRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'waiting',
+  );
+
+  const openedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'opened',
+  );
+
+  const completedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'completed',
+  );
+
+  const uncompletedRecipients = recipients.filter(
+    (recipient) => getRecipientType(recipient) === 'unsigned',
+  );
+
+  const onMouseEnter = () => {
+    if (isMouseOverTimeout.current) {
+      clearTimeout(isMouseOverTimeout.current);
+    }
+
+    if (isControlled.current) {
+      return;
+    }
+
+    isMouseOverTimeout.current = setTimeout(() => {
+      setOpen((o) => (!o ? true : o));
+    }, 200);
+  };
+
+  const onMouseLeave = () => {
+    if (isMouseOverTimeout.current) {
+      clearTimeout(isMouseOverTimeout.current);
+    }
+
+    if (isControlled.current) {
+      return;
+    }
+
+    setTimeout(() => {
+      setOpen((o) => (o ? false : o));
+    }, 200);
+  };
+
+  const onOpenChange = (newOpen: boolean) => {
+    isControlled.current = newOpen;
+
+    setOpen(newOpen);
+  };
+
+  return (
+    <Popover open={open} onOpenChange={onOpenChange}>
+      <PopoverTrigger
+        className="flex cursor-pointer"
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+      >
+        {children || <StackAvatars recipients={recipients} />}
+      </PopoverTrigger>
+
+      <PopoverContent
+        side={position}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        className="flex flex-col gap-y-5 py-2"
+      >
+        {completedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Completed</h1>
+            {completedRecipients.map((recipient: Recipient) => (
+              <div key={recipient.id} className="my-1 flex items-center gap-2">
+                <StackAvatar
+                  first={true}
+                  key={recipient.id}
+                  type={getRecipientType(recipient)}
+                  fallbackText={recipientAbbreviation(recipient)}
+                />
+                <span className="text-muted-foreground text-sm">{recipient.email}</span>
+              </div>
+            ))}
+          </div>
+        )}
+
+        {waitingRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Waiting</h1>
+            {waitingRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+
+        {openedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Opened</h1>
+            {openedRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+
+        {uncompletedRecipients.length > 0 && (
+          <div>
+            <h1 className="text-base font-medium">Uncompleted</h1>
+            {uncompletedRecipients.map((recipient: Recipient) => (
+              <AvatarWithRecipient key={recipient.id} recipient={recipient} />
+            ))}
+          </div>
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+};