feat: add displayname to portal

components/documents/documents-list.tsx

@@ -1,4 +1,4 @@
-import { memo, useCallback, useMemo, useState } from "react";
+import { memo, useCallback, useState } from "react";
 import React from "react";
 
 import { TeamContextType } from "@/context/team-context";
@@ -26,10 +26,9 @@ import UploadZone from "@/components/upload-zone";
 
 import { FolderWithCount } from "@/lib/swr/use-documents";
 import { DocumentWithLinksAndLinkCountAndViewCount } from "@/lib/types";
-import { cn } from "@/lib/utils";
 
 import { Button } from "../ui/button";
-import Portal from "../ui/portal";
+import { Portal } from "../ui/portal";
 import DocumentCard from "./document-card";
 import { DraggableItem } from "./drag-and-drop/draggable-item";
 import { DroppableFolder } from "./drag-and-drop/droppable-folder";

components/ui/portal.tsx

@@ -1,26 +1,29 @@
-import { useLayoutEffect, useState } from "react";
+import * as React from "react";
 
-import * as Portal from "@radix-ui/react-portal";
+import * as PortalPrimitive from "@radix-ui/react-portal";
 
-export default ({
+const Portal = ({
   containerId,
   children,
 }: {
   containerId?: string | null;
   children: React.ReactElement;
 }) => {
-  const [mounted, setMounted] = useState(false);
-  useLayoutEffect(() => setMounted(true), []);
+  const [mounted, setMounted] = React.useState(false);
+  React.useLayoutEffect(() => setMounted(true), []);
 
   return (
-    <Portal.Root
+    <PortalPrimitive.Root
       container={
         containerId && mounted
           ? document.getElementById(containerId)
           : undefined
       }
     >
       {children}
-    </Portal.Root>
+    </PortalPrimitive.Root>
   );
 };
+Portal.displayName = PortalPrimitive.Root.displayName;
+
+export { Portal };