انتخاب ترتیب (SortSelect)

معرفی

SortSelect ترتیب یک فهرست را طوری نشان می‌دهد که در یک نگاه خوانده شود: دکمه می‌گوید چه کاری می‌کند («مرتب‌سازی») و ترتیب را با کلمه می‌گوید («مهم‌ترین»، «تازه‌ترین»). برچسب مقدار صفت موارد فهرست است، نه نام یک ستون: «امتیاز» نمی‌گوید کدام سر فهرست اول می‌آید، «مهم‌ترین» می‌گوید. (Supabase هم «Sorted by created at» می‌نویسد.)

چه زمانی استفاده کنیم:

• در sort قالب ListPage، DetailSection و PageToolbar — اندازه را نوار ابزار می‌دهد
• هر جا ترتیب فهرست کارت یا فید انتخاب می‌شود

چه زمانی استفاده نکنیم:

• برای مرتب‌سازی ستون‌های جدول — سرستون‌های DataTable همین کار را می‌کنند
• به‌عنوان فیلتر — ترتیب فیلتر نیست و «پاک کردن همه» آن را عوض نمی‌کند

استفاده

import { SortSelect } from '@partodata/ui'

const SORT_OPTIONS = [
  { value: 'critical', label: 'مهم‌ترین' },
  { value: 'growth', label: 'بیشترین افزایش' },
  { value: 'recent', label: 'تازه‌ترین' },
  { value: 'name', label: 'الفبایی' },
] as const

<ListPage
  search={<SearchInput aria-label="جست‌وجو" />}
  sort={<SortSelect value={sort} onValueChange={setSort} options={SORT_OPTIONS} />}
  …
/>

حالت‌ها و انواع

ترتیب پیش‌فرض اولین گزینه است. برای زبان دیگر، پیشوند از locale می‌آید («Sort»، «الترتيب»)؛ برای کلمهٔ دیگر prefix را بدهید.

راهنمای استفاده

Props

دسترسی‌پذیری

• نام دسترسی همان متن دیده‌شده است: «مرتب‌سازی: مهم‌ترین» (WCAG 2.5.3).
• صفحه‌کلید همان Select است: Enter یا Space باز می‌کند، پیکان‌ها جابه‌جا می‌کنند، Escape می‌بندد.

کامپوننت‌های مرتبط

• اگر ترتیب یک جدول است → سرستون‌های DataTable با sort، نه این کنترل.
• اگر انتخاب، دامنهٔ نتیجه را کم می‌کند → فیلتر است: FilterPanel یا filters قالب.
• اگر فقط یک فهرست ساده از گزینه‌ها لازم است → Select.