Add more tests

packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx

@@ -1,9 +1,14 @@
-import { it, expect, describe } from "vitest";
-import { render, screen } from "@testing-library/react";
+import {
+  act,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
 import React from "react";
+import { describe, expect, it, vi } from "vitest";
 import { DropdownButton } from "./components/DropdownButton";
 import { DropdownMenu } from "./DropdownMenu";
-import { DropdownContent } from "./components/DropdownContent";
 
 describe("DropdownMenu", () => {
   it("should render the dropdown menu", () => {
@@ -32,4 +37,45 @@ describe("DropdownMenu", () => {
     );
     expect(screen.queryByTestId("dropdown-arrow")).not.toBeInTheDocument();
   });
+
+  it("should render items using render prop", async () => {
+    type Item = { id: number; label: string; disabled?: boolean };
+    const items: Item[] = [
+      { id: 1, label: "Item 1" },
+      { id: 2, label: "Item 2", disabled: true },
+    ];
+
+    const onSelectMock = vi.fn();
+
+    render(
+      <DropdownMenu
+        items={items}
+        onSelect={onSelectMock}
+        renderItem={(item) => <div>{item.label}</div>}
+        defaultOpen
+      >
+        <DropdownButton>Click me</DropdownButton>
+      </DropdownMenu>
+    );
+
+    // Check if items are rendered
+    expect(screen.getByText("Item 1")).toBeInTheDocument();
+    expect(screen.getByText("Item 2")).toBeInTheDocument();
+
+    // Check if disabled item has correct attributes
+    const disabledItem = screen.getByText("Item 2");
+    expect(disabledItem.parentElement).toHaveAttribute("data-disabled");
+
+    // Check if the item is clickable and triggers onSelect
+    const activeItem = screen.getByText("Item 1");
+    act(() => {
+      fireEvent(activeItem, new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(onSelectMock).toHaveBeenCalled();
+
+    await waitFor(() => {
+      expect(screen.queryByText("Item 1")).not.toBeInTheDocument();
+    });
+  });
 });

packages/ui-v2/src/components/DropdownMenu/components/DropdownItem.tsx

@@ -1,6 +1,5 @@
 import * as RadixDropdownMenu from "@radix-ui/react-dropdown-menu";
-import React, { useContext } from "react";
-import { DropdownMenuContext } from "../DropdownMenu";
+import React from "react";
 
 export const DropdownItem = ({
   children,
@@ -14,10 +13,11 @@ export const DropdownItem = ({
   return (
     <RadixDropdownMenu.Item
       onSelect={(e) => onSelect(e)}
-      className="py-1 border-b border-border-subtle first:pt-0 last:border-b-0 last:pb-0 
+      className="p-1 first:pt-0 last:border-b-0 last:pb-0 
+      rounded
       hover:bg-bg-neutral-subtle
-      // focus:outline-none
-      active:bg-bg-neutral-emphasis
+      focus:bg-bg-neutral-subtle
+      focus:outline-none
       cursor-pointer
 
       data-[disabled]:pointer-events-none