improved menu component type safety

Author: ariflogs

packages/ui/Menu/Menu.tsx

@@ -2,14 +2,13 @@
 
 import { cn } from "@/lib/utils";
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
-import React, { HTMLAttributes } from "react";
+import React, { ComponentPropsWithoutRef, HTMLAttributes } from "react";
 
 const Menu = DropdownMenu.Root;
 const Trigger = DropdownMenu.Trigger;
 
-interface IMenuContent extends HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode;
-}
+interface IMenuContent
+  extends ComponentPropsWithoutRef<typeof DropdownMenu.Content> {}
 
 const Content = ({ className, ...props }: IMenuContent) => (
   <DropdownMenu.Portal>
@@ -25,12 +24,20 @@ const Content = ({ className, ...props }: IMenuContent) => (
   </DropdownMenu.Portal>
 );
 
-const MenuItem = (props: any) => (
+const MenuItem = React.forwardRef<
+  HTMLDivElement,
+  ComponentPropsWithoutRef<typeof DropdownMenu.Item>
+>(({ className, ...props }, ref) => (
   <DropdownMenu.Item
-    className="p-2 hover:bg-primary-400 outline-none cursor-pointer "
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-primary-400 hover:text-white focus:bg-primary-400 focus:text-white data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
     {...props}
   />
-);
+));
+MenuItem.displayName = "MenuItem";
 
 const MenuComponent = Object.assign(Menu, {
   Trigger,