refactor(popover): convert some popovers to menus properly (#839)

Author: rogerantony-dev

src/components/ui/recollect/menu.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import { Menu as MenuPrimitive } from "@base-ui/react/menu";
+
+import { cn } from "@/utils/tailwind-merge";
+
+function Root({ ...props }: MenuPrimitive.Root.Props) {
+	return <MenuPrimitive.Root {...props} />;
+}
+
+function Trigger({ className, ...props }: MenuPrimitive.Trigger.Props) {
+	return <MenuPrimitive.Trigger className={cn(className)} {...props} />;
+}
+
+function Portal(props: MenuPrimitive.Portal.Props) {
+	return <MenuPrimitive.Portal {...props} />;
+}
+
+function Positioner({
+	className,
+	sideOffset = 1,
+	...props
+}: MenuPrimitive.Positioner.Props) {
+	return (
+		<MenuPrimitive.Positioner
+			className={cn("z-[51]", className)}
+			sideOffset={sideOffset}
+			{...props}
+		/>
+	);
+}
+
+function Popup({ className, ...props }: MenuPrimitive.Popup.Props) {
+	return (
+		<MenuPrimitive.Popup
+			className={cn(
+				"w-48 origin-(--transform-origin) rounded-xl bg-gray-50 p-1 shadow-custom-3 outline-hidden transition-[transform,scale,opacity] data-starting-style:scale-98 data-starting-style:opacity-0",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Item({ className, ...props }: MenuPrimitive.Item.Props) {
+	return (
+		<MenuPrimitive.Item
+			className={cn(
+				"flex cursor-pointer items-center rounded-lg px-2 py-[5px] text-13 leading-[115%] font-450 tracking-[0.01em] text-gray-800 outline-hidden data-highlighted:bg-gray-200 data-highlighted:text-gray-900",
+				className,
+			)}
+			{...props}
+		/>
+	);
+}
+
+function Group({ ...props }: MenuPrimitive.Group.Props) {
+	return <MenuPrimitive.Group {...props} />;
+}
+
+function GroupLabel({ className, ...props }: MenuPrimitive.GroupLabel.Props) {
+	return <MenuPrimitive.GroupLabel className={cn(className)} {...props} />;
+}
+
+const Separator = MenuPrimitive.Separator;
+
+export const Menu = {
+	Group,
+	GroupLabel,
+	Item,
+	Popup,
+	Portal,
+	Positioner,
+	Root,
+	Separator,
+	Trigger,
+};

src/pageComponents/dashboard/cardSection/add-to-collection-popover.tsx

@@ -1,15 +1,10 @@
 import { type Key } from "react";
-import { Popover } from "@base-ui/react/popover";
 import isEmpty from "lodash/isEmpty";
 
 import { useAddCategoryToBookmarksOptimisticMutation } from "@/async/mutationHooks/category/use-add-category-to-bookmarks-optimistic-mutation";
 import useFetchCategories from "@/async/queryHooks/category/useFetchCategories";
-import { Button } from "@/components/ui/recollect/button";
+import { Menu } from "@/components/ui/recollect/menu";
 import MoveIcon from "@/icons/moveIcon";
-import {
-	dropdownMenuClassName,
-	dropdownMenuItemClassName,
-} from "@/utils/commonClassNames";
 
 interface AddToCollectionPopoverProps {
 	onSuccess: () => void;
@@ -21,38 +16,36 @@ export function AddToCollectionPopover({
 	selectedKeys,
 }: AddToCollectionPopoverProps) {
 	return (
-		<Popover.Root>
-			<Popover.Trigger className="flex items-center rounded-lg bg-gray-200 px-2 py-[5px] text-13 leading-4 font-450 text-gray-900">
+		<Menu.Root>
+			<Menu.Trigger className="flex items-center rounded-lg bg-gray-200 px-2 py-[5px] text-13 leading-4 font-450 text-gray-900">
 				<span className="mr-[6px] text-gray-1000" aria-hidden="true">
 					<MoveIcon />
 				</span>
 				<p>Add to</p>
-			</Popover.Trigger>
-			<Popover.Portal>
-				<Popover.Positioner align="end" className="z-10" sideOffset={1}>
-					<Popover.Popup
-						className={`${dropdownMenuClassName} leading-[20px] outline-hidden`}
-					>
-						<AddToCollectionMenu
+			</Menu.Trigger>
+			<Menu.Portal>
+				<Menu.Positioner align="end">
+					<Menu.Popup className="leading-[20px]">
+						<AddToCollectionMenuItems
 							onSuccess={onSuccess}
 							selectedKeys={selectedKeys}
 						/>
-					</Popover.Popup>
-				</Popover.Positioner>
-			</Popover.Portal>
-		</Popover.Root>
+					</Menu.Popup>
+				</Menu.Positioner>
+			</Menu.Portal>
+		</Menu.Root>
 	);
 }
 
-interface AddToCollectionMenuProps {
+interface AddToCollectionMenuItemsProps {
 	onSuccess: () => void;
 	selectedKeys: Set<Key>;
 }
 
-function AddToCollectionMenu({
+function AddToCollectionMenuItems({
 	onSuccess,
 	selectedKeys,
-}: AddToCollectionMenuProps) {
+}: AddToCollectionMenuItemsProps) {
 	const { allCategories } = useFetchCategories();
 	const { addCategoryToBookmarksOptimisticMutation } =
 		useAddCategoryToBookmarksOptimisticMutation();
@@ -69,8 +62,8 @@ function AddToCollectionMenu({
 	return (
 		<>
 			{categories.map((item) => (
-				<Button
-					className={`w-full truncate text-left ${dropdownMenuItemClassName}`}
+				<Menu.Item
+					className="w-full truncate text-left"
 					key={item.value}
 					onClick={() => {
 						const selectedIds = Array.from(selectedKeys).map(Number);
@@ -82,10 +75,9 @@ function AddToCollectionMenu({
 							{ onSuccess },
 						);
 					}}
-					type="button"
 				>
 					{item.label}
-				</Button>
+				</Menu.Item>
 			))}
 		</>
 	);