DropdownMenu

کامپوننت DropdownMenu برای نمایش منوی عملیات با کلیک روی یک عنصر استفاده می‌شود؛ مثل منوی «...» کنار هر ردیف جدول یا منوی حساب کاربری. از DropdownMenu (ظرف) و DropdownMenuItem (هر گزینه) تشکیل شده است.

Import

import { DropdownMenu, DropdownMenuItem } from "fara-ui";

اگر هنوز FaraUI را نصب و راه‌اندازی نکرده‌ای، ابتدا صفحه‌ی شروع به کار را ببین.

Basic Usage

<DropdownMenu trigger={<Button variant="secondary">عملیات</Button>}>
  <DropdownMenuItem onClick={handleEdit}>ویرایش</DropdownMenuItem>
  <DropdownMenuItem danger onClick={handleDelete}>
    حذف
  </DropdownMenuItem>
</DropdownMenu>

Playground

DropdownMenuItem

هر گزینه این prop ها را دارد:

• onClick — عملیات مربوط به گزینه؛ بعد از کلیک، منو به‌صورت خودکار بسته می‌شود
• disabled — غیرفعال کردن گزینه
• danger — قرمز کردن گزینه؛ برای عملیات‌های مخرب مثل حذف

Closing Behavior

• کلیک روی هر گزینه
• کلیک بیرون از منو
• کلیک دوباره روی trigger (toggle)
• فشردن کلید Escape

Popover vs DropdownMenu

• DropdownMenu — منوی انتخاب عملیات؛ آیتم‌ها استاندارد دارند و بعد از کلیک بسته می‌شود
• Popover — ظرف عمومی برای هر محتوای تعاملی (فرم، کارت و ...)

Accessibility

• منو با role="menu" و گزینه‌ها با role="menuitem" پیاده شده‌اند.
• بستن با Escape و کلیک بیرون از منو پشتیبانی می‌شود.
• محدودیت شناخته‌شده: پیمایش بین گزینه‌ها با کلیدهای جهت و مدیریت کامل focus در حال حاضر پیاده‌سازی نشده است.
• wrapper مربوط به trigger خودش role="button" یا keyboard handler اضافه نمی‌کند؛ trigger را یک Button یا عنصر تعاملی واقعی قرار بده.

Data Attributes and Customize CSS

DropdownMenu hookهای زیر را ارائه می‌کند:

Attribute	کاربرد
data-fara-dropdown-menu	wrapper اصلی
data-fara-dropdown-menu-trigger	wrapper trigger
data-fara-dropdown-menu-menu	پنل پورتال منو
data-fara-dropdown-menu-list	عنصر دارای role="menu"
data-fara-dropdown-menu-item	هر گزینه
data-danger	گزینه‌ی مخرب
data-disabled	گزینه‌ی غیرفعال

[data-fara-dropdown-menu-menu] {
  min-width: 180px;
}

[data-fara-dropdown-menu-item][data-danger] {
  color: #dc2626;
}

[data-fara-dropdown-menu-item][data-disabled] {
  cursor: not-allowed;
  opacity: 0.5;
}

در API فعلی className برای DropdownMenu یا DropdownMenuItem وجود ندارد؛ برای پنل پورتال و گزینه‌ها از data attributes استفاده کن. پنل در document.body رندر می‌شود، پس selector آن را به wrapper والد وابسته نکن.

Props — DropdownMenu

Prop	Type	Description
trigger	ReactNode	عنصر بازکننده‌ی منو (الزامی)
children	ReactNode	گزینه‌های منو — DropdownMenuItem (الزامی)

Props — DropdownMenuItem

Prop	Type	Default	Description
children	ReactNode	-	متن گزینه (الزامی)
onClick	() => void	-	عملیات گزینه؛ بعد از آن منو بسته می‌شود
disabled	boolean	false	غیرفعال کردن گزینه
danger	boolean	false	نمایش قرمز — عملیات مخرب