diff --git a/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx b/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx
index 47cad0fee5..3dd1e184a1 100644
--- a/packages/ui-v2/src/components/DropdownMenu/DropdownMenu.test.tsx
+++ b/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(
+ {item.label}
}
+ defaultOpen
+ >
+ Click me
+
+ );
+
+ // 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();
+ });
+ });
});
diff --git a/packages/ui-v2/src/components/DropdownMenu/components/DropdownItem.tsx b/packages/ui-v2/src/components/DropdownMenu/components/DropdownItem.tsx
index 289fd62dbb..3d29eac9bf 100644
--- a/packages/ui-v2/src/components/DropdownMenu/components/DropdownItem.tsx
+++ b/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 (
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