# Dropdown

> Menu thả xuống từ trigger button — dùng cho user menu, action menu, filter quick select. Click outside / Esc tự đóng.

## API

### `<Dropdown>` (root)

| Prop | Type | Default | Description |
|---|---|---|---|
| `defaultOpen` | `boolean` | `false` | Mở mặc định (uncontrolled) |
| `open` | `boolean` | — | Controlled — pass kèm `onOpenChange` |
| `onOpenChange` | `(v: boolean) => void` | — | Callback khi mở/đóng |
| `className` | `string` | — | Override wrapper |

### `<Dropdown.Trigger>`

Render button. Tự bind `aria-haspopup="menu"`, `aria-expanded`, click toggle open.

### `<Dropdown.Menu align>`

| Prop | Type | Default | Description |
|---|---|---|---|
| `align` | `'start' \| 'end'` | `'start'` | Căn lề menu so với trigger (left/right) |

### `<Dropdown.Item variant>`

| Prop | Type | Default | Description |
|---|---|---|---|
| `variant` | `'default' \| 'danger'` | `'default'` | `danger` cho action xóa/destructive |
| `onClick` | `MouseEventHandler` | — | Click handler — auto-close menu sau khi chạy |

### `<Dropdown.Separator>`

Divider mỏng giữa các nhóm action.

## Variants

- Menu align `start` (mặc định) hoặc `end` (cho button góc phải)
- Item `default` hoặc `danger` (text-danger)

## Composition

```
<Dropdown>
  <Dropdown.Trigger>…</Dropdown.Trigger>
  <Dropdown.Menu>
    <Dropdown.Item>…</Dropdown.Item>
    <Dropdown.Separator />
    <Dropdown.Item variant="danger">…</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>
```

## States

- **Closed** (default): Menu unmount khỏi DOM
- **Open**: Menu render absolute position, listen mousedown outside + Esc
- **Item hover**: bg-surface-2 (hoặc bg-danger-soft cho danger variant)

## Usage

```tsx
import { Dropdown } from '@cowork/ui';

<Dropdown>
  <Dropdown.Trigger>⋯ Thao tác</Dropdown.Trigger>
  <Dropdown.Menu align="end">
    <Dropdown.Item onClick={() => edit(id)}>Sửa</Dropdown.Item>
    <Dropdown.Item onClick={() => duplicate(id)}>Nhân bản</Dropdown.Item>
    <Dropdown.Separator />
    <Dropdown.Item variant="danger" onClick={() => remove(id)}>Xoá</Dropdown.Item>
  </Dropdown.Menu>
</Dropdown>
```

## Real-world example

- An Nhien admin: menu thao tác trên mỗi đơn hàng (Sửa / In hóa đơn / Hủy đơn).
- KHI CRM: dropdown filter giai đoạn lifecycle (Trial / Active / Churn) ở góc bảng members.
- A-Kryphan blog editor: user menu góc phải navbar (Profile / Settings / Logout).

## Accessibility

- Trigger có `aria-haspopup="menu"` + `aria-expanded`
- Menu có `role="menu"`, mỗi Item có `role="menuitem"`
- Esc key đóng menu (handled in useEffect)
- Click outside đóng menu (mousedown listener trên document)
- TODO: thêm arrow key navigation giữa items (chưa implement)

## Responsive behavior

Menu absolute position theo trigger — nếu trigger gần edge phải, dùng `align="end"` tránh tràn viewport. Mobile chưa có collision detection — caller cần test khi trigger ở mép màn hình.

## Related

- [[CmdPalette]] — search-driven menu lớn hơn, modal overlay
- [[Tabs]] — chuyển section ngang, không phải menu action
- [[Modal]] — confirm action `danger` từ Dropdown (vd xác nhận xóa)

## Source

`react/src/molecules/Dropdown.tsx`