# قائمة السياق

> إجراءات العنصر الذي تحت المؤشر، تُفتح بالنقر بالزر الأيمن على الحاسوب وبالضغط المطوّل على اللمس، بصفوف القائمة نفسها.

الصفحة: https://ritla.app/ar/ui/context-menu

## التثبيت

يُفتح التثبيت من السجل قريبًا، وهذه هي الأوامر التي ستشغّلها حينها.

```bash
npx ritla add context-menu
```

أو بأداة shadcn:

```bash
npx shadcn@latest add @ritla/context-menu
```

الاعتماديات: `@base-ui/react`، `@phosphor-icons/react`

## الاستخدام

```tsx
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/components/ui/context-menu";

<ContextMenu>
  <ContextMenuTrigger>
    Statement_Sep_2026.pdf
    {/* Also give the row a visible ⋮ button with the same actions: it is the keyboard path. */}
  </ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem leadingIcon={PencilSimpleIcon} shortcut="F2" aria-keyshortcuts="F2">Rename</ContextMenuItem>
    <ContextMenuItem leadingIcon={TrashIcon} danger>Delete file</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

## مرجع الخصائص

### `ContextMenu`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `open / defaultOpen / onOpenChange` | `boolean, (open) => void` | لا يوجد | حالة الفتح، إن أردت التحكم بها. |
| `children` | `ReactNode` | لا يوجد | ‏`ContextMenuTrigger` و`ContextMenuContent`. |

### `ContextMenuTrigger`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `children` | `ReactNode` | لا يوجد | المنطقة التي تفتح القائمة: صف أو بطاقة. أبقِها خارج ترتيب التنقل بمفتاح Tab، وضع فيها زرًا ظاهرًا (⋮) يفتح الإجراءات نفسها: هذا الزر طريق لوحة المفاتيح. |

### `ContextMenuItem`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `children` | `ReactNode` | لا يوجد | خاصية Title: اسم الإجراء في كلمتين أو ثلاث، بصيغة المصدر («إعادة التسمية»). |
| `leadingIcon` | `IconComponent` | لا يوجد | خاصية Show leading: أيقونة 24 بكسل في البداية. |
| `shortcut` | `ReactNode` | لا يوجد | الاختصار كما يُطبع (‏⌘D)، عرضًا فقط؛ مرّر معه `aria-keyshortcuts`. |
| `danger` | `boolean` | لا يوجد | الإجراء الهدّام (حذف): باللون الأحمر، أخيرًا، في مجموعته. |
| `description` | `ReactNode` | لا يوجد | سطر ثانٍ تحت العنوان. |
| `onClick` | `() => void` | لا يوجد | ينفّذ الإجراء ويغلق القائمة. |

### `ContextMenuSeparator / ContextMenuGroup / ContextMenuLabel`

| الخاصية | النوع | الافتراضي | الوصف |
| --- | --- | --- | --- |
| `…` | `Menu parts` | لا يوجد | خط بين المجموعات، ومجموعة، وعنوان مجموعة، كما في القائمة. |

## إمكانية الوصول

لوحة المفاتيح (المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين، ويتبادل السهمان في الاتجاه من اليمين إلى اليسار):

- `Tab`: يصل إلى زر ⋮ في الصف، لا إلى الصف نفسه.
- `Enter` + `Space`: على زر ⋮: يفتح الإجراءات نفسها.
- `ArrowDown` + `ArrowUp`: بين الإجراءات.
- `Enter`: ينفّذ الإجراء.
- `Escape`: يغلق القائمة ويعيد التركيز إلى الزر.

ARIA:

- القائمة `menu` وكل إجراء `menuitem`، واتجاهها ولغتها من المنطقة التي فُتحت منها.
- لا تجعل قائمة السياق الطريق الوحيد إلى أي إجراء: اقرنها بزر ظاهر (‏⋮ في الصف) يفتح الإجراءات نفسها، لأن كثيرين لا ينقرون بالزر الأيمن ولا يصلون إليها بلوحة المفاتيح. يبقى الصف خارج ترتيب التنقل، والزر طريق لوحة المفاتيح.
- الإجراء الهدّام يقول ما يفعل في اسمه («حذف الملف»)، لا باللون الأحمر وحده.

## ملاحظات العربية والاتجاه

ينعكس:

- تُفتح القائمة إلى يسار المؤشر في العربية، والأيقونات على اليمين والاختصارات على اليسار.

لا ينعكس:

- ترتيب الإجراءات.
- الاختصارات تبقى بحروفها اللاتينية من اليسار إلى اليمين (‏⌘D، F2).
- أيقونات مثل التنزيل والحذف.

الأرقام: الاختصارات كما تُطبع، بلا تحويل للأرقام.

الخط العربي: الصف 48 بكسل، والعنوان `label-14` بوزن Medium، والاختصار `label-12` بوزن Medium على `container/muted`.

النص ثنائي الاتجاه: الاختصار معزول باتجاه LTR.