feat(select): implement searchable select component with server search capabilities

- Enhanced the Select component to support a searchable dropdown, allowing users to filter options by label or value.
- Introduced a new useSelectServerSearch hook for server-side searching, enabling dynamic fetching of options based on user input.
- Updated TenderDetailsHeader and TenderListFilters to utilize the searchable feature, improving user experience in selecting languages and countries.
- Added utility functions for filtering select items and managing search states, ensuring efficient data handling and responsiveness.
This commit is contained in:
AmirReza Jamali
2026-05-16 09:18:12 +03:30
parent 25f8bde229
commit 7aa13bb904
6 changed files with 606 additions and 19 deletions
@@ -70,6 +70,8 @@ export function TenderDetailsHeader({
name="lang"
label="Display language"
items={Languages}
searchable
searchPlaceholder="Search language or ISO code…"
disabled={isTranslating}
prefixIcon={
<GlobeIcon className="h-[1.05rem] w-[1.05rem] text-primary dark:text-primary/90" />
@@ -77,7 +79,7 @@ export function TenderDetailsHeader({
className={cn(
"w-full shrink-0 space-y-0",
"[&_label]:sr-only",
"[&_select]:h-11 [&_select]:min-h-[2.75rem] [&_select]:rounded-full [&_select]:border-stroke/60 [&_select]:bg-white/95 [&_select]:py-0 [&_select]:text-sm [&_select]:shadow-sm dark:[&_select]:border-white/10 dark:[&_select]:bg-dark-2/92",
"[&_button]:h-11 [&_button]:min-h-[2.75rem] [&_button]:rounded-full [&_button]:border-stroke/60 [&_button]:bg-white/95 [&_button]:py-0 [&_button]:text-sm [&_button]:shadow-sm dark:[&_button]:border-white/10 dark:[&_button]:bg-dark-2/92",
)}
value={selectedLanguage}
onChange={onLanguageChange as LanguageSelectOnChange}