Niloofar / Dropdown implementations

package.json

@@ -17,6 +17,7 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",
     "class-variance-authority": "^0.7.0",

src/components/ui/button/index.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React from 'react';
 import { Slot } from '@radix-ui/react-slot';
 import { type VariantProps } from 'class-variance-authority';
 import { cn } from 'Utils/cn';

src/components/ui/dialog/dialog.test.tsx → src/components/ui/dialog/__test__/dialog.test.tsx

@@ -1,7 +1,15 @@
 import { describe, expect, it } from 'vitest';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from '.';
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '../index';
 
 describe('Dialog', () => {
     it('should render the Dialog component', () => {

src/components/ui/dropdown-menu/__test__/dropdown-menu.test.tsx

@@ -0,0 +1,98 @@
+import { describe, expect, it } from 'vitest';
+import {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+} from '../index';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('Dropdown component', () => {
+    it('Should render the dropdown component', () => {
+        render(
+            <DropdownMenu>
+                <p>This is a test children</p>
+            </DropdownMenu>
+        );
+        expect(screen.getByText('This is a test children')).toBeInTheDocument();
+    });
+
+    it('Should open the dropdown when the Trigger is clicked', async () => {
+        render(
+            <DropdownMenu>
+                <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem>item</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+
+        await userEvent.click(screen.getByText('Trigger'));
+        expect(screen.getByText('item')).toBeInTheDocument();
+    });
+
+    it('Should render the dropdown with the passed classNames', async () => {
+        render(
+            <DropdownMenu>
+                <DropdownMenuTrigger className='bg-red'>Trigger</DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem className='m-1'>item</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+
+        const trigger_button = screen.getByText('Trigger');
+        expect(trigger_button).toHaveClass('bg-red');
+        await userEvent.click(trigger_button);
+        expect(screen.getByText('item')).toHaveClass('m-1');
+    });
+
+    it("Should render the content's label", async () => {
+        render(
+            <DropdownMenu>
+                <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuLabel>Test Label</DropdownMenuLabel>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+
+        await userEvent.click(screen.getByText('Trigger'));
+        expect(screen.getByText('Test Label')).toBeInTheDocument();
+    });
+
+    it('Should close the dropdown when an item clicked', async () => {
+        render(
+            <DropdownMenu>
+                <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuItem>item</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+
+        await userEvent.click(screen.getByText('Trigger'));
+        const dropdown_item = screen.getByText('item');
+        await userEvent.click(dropdown_item);
+        expect(dropdown_item).not.toBeInTheDocument();
+    });
+
+    it('Should show the dropdown menu separator', async () => {
+        render(
+            <DropdownMenu>
+                <DropdownMenuTrigger>Trigger</DropdownMenuTrigger>
+                <DropdownMenuContent>
+                    <DropdownMenuLabel>Test Label</DropdownMenuLabel>
+                    <DropdownMenuSeparator data-testid='dt_dropdown_menu_separator' />
+                    <DropdownMenuItem>item</DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        );
+
+        await userEvent.click(screen.getByText('Trigger'));
+        expect(screen.getByTestId('dt_dropdown_menu_separator')).toBeInTheDocument();
+    });
+});

src/components/ui/dropdown-menu/index.tsx

@@ -0,0 +1,69 @@
+import { forwardRef, ElementRef, ComponentPropsWithoutRef } from 'react';
+import {
+    Root,
+    Trigger,
+    Portal,
+    Sub,
+    SubTrigger,
+    SubContent,
+    Content,
+    Item,
+    Label,
+    Separator,
+} from '@radix-ui/react-dropdown-menu';
+
+const DropdownMenu = Root;
+const DropdownMenuTrigger = Trigger;
+const DropdownMenuPortal = Portal;
+const DropdownMenuSub = Sub;
+
+const DropdownMenuSubTrigger = forwardRef<ElementRef<typeof SubTrigger>, ComponentPropsWithoutRef<typeof SubTrigger>>(
+    ({ children, ...props }, ref) => (
+        <SubTrigger ref={ref} {...props}>
+            {children}
+        </SubTrigger>
+    )
+);
+DropdownMenuSubTrigger.displayName = SubTrigger.displayName;
+
+const DropdownMenuSubContent = forwardRef<ElementRef<typeof SubContent>, ComponentPropsWithoutRef<typeof SubContent>>(
+    (props, ref) => <SubContent ref={ref} {...props} />
+);
+DropdownMenuSubContent.displayName = SubContent.displayName;
+
+const DropdownMenuContent = forwardRef<ElementRef<typeof Content>, ComponentPropsWithoutRef<typeof Content>>(
+    ({ sideOffset = 4, ...props }, ref) => (
+        <Portal>
+            <Content ref={ref} sideOffset={sideOffset} {...props} />
+        </Portal>
+    )
+);
+DropdownMenuContent.displayName = Content.displayName;
+
+const DropdownMenuItem = forwardRef<ElementRef<typeof Item>, ComponentPropsWithoutRef<typeof Item>>((props, ref) => (
+    <Item ref={ref} {...props} />
+));
+DropdownMenuItem.displayName = Item.displayName;
+
+const DropdownMenuLabel = forwardRef<ElementRef<typeof Label>, ComponentPropsWithoutRef<typeof Label>>((props, ref) => (
+    <Label ref={ref} {...props} />
+));
+DropdownMenuLabel.displayName = Label.displayName;
+
+const DropdownMenuSeparator = forwardRef<ElementRef<typeof Separator>, ComponentPropsWithoutRef<typeof Separator>>(
+    (props, ref) => <Separator ref={ref} {...props} />
+);
+DropdownMenuSeparator.displayName = Separator.displayName;
+
+export {
+    DropdownMenu,
+    DropdownMenuTrigger,
+    DropdownMenuContent,
+    DropdownMenuItem,
+    DropdownMenuLabel,
+    DropdownMenuSeparator,
+    DropdownMenuPortal,
+    DropdownMenuSub,
+    DropdownMenuSubContent,
+    DropdownMenuSubTrigger,
+};