QuickSearch

QuickSearch — модалка быстрого поиска, аналог Search Everywhere в IDE. В шапке — ряд табов типов документов и строка поиска, ниже — область результатов. Компонент презентационный: он рисует каркас, но сам ничего не ищет — и список результатов (children), и набор табов (tabs) приходят снаружи. Внутрь children кладётся любая вёрстка: секции по типам, строки-Cell, заглушка «ничего не найдено», индикатор загрузки. Табы фильтруют выдачу по типу — активный задаёт tab, переключение ловит onTabChange; в tabs приходят готовые Tabs.Item, а Tabs.Root вокруг них рисует сам QuickSearch. Строка поиска отдаёт ввод с задержкой (дебаунс) через onSearchChange; search — лишь начальное значение, дальше поле хранит текст само, searchPlaceholder задаёт подсказку. Открытость всегда контролируемая — пара open / onOpenChange: onOpenChange(false) приходит при закрытии крестиком, по Esc или клику по затемнению вокруг окна, а open меняет хост. Окно прижато к верху экрана, порталится в body, монтируется лениво при открытии и размонтируется при закрытии; при открытии автофокус уходит в строку поиска, список результатов скроллится внутри. Собрано на Ark UI Dialog в каркасе Panel из ДС (Tabs и Search — оттуда же). В IDE смонтирован один раз в корневом layout и открывается двойным нажатием Shift.

Анатомия

QuickSearch
Backdrop (скрим)
Portal → Positioner → Content
Panel.Root
Panel.Header
Tabs.Root (tabs, tab, onTabChange)
CloseTrigger → ButtonIcon
Search (search, onSearchChange, searchPlaceholder)
Panel.Content → Children (результаты)

Примеры

Пустое состояние

Область результатов целиком за потребителем: что показать, когда ничего не найдено (или пока идёт загрузка), решает children — здесь это просто заглушка с текстом.

API

PropTypeDefault
open*

Открыто ли окно. Открытость всегда контролируемая — держит её хост

boolean-
onOpenChange*

Запрос сменить открытость: false приходит при закрытии крестиком, по Esc или клику вне окна; хост меняет open в ответ

(open: boolean) => void-
tabs*

Табы в шапке — типы документов; готовые Tabs.Item приходят извне

ReactNode-
tab

Активный таб (value из tabs)

string-
onTabChange

Вызывается при переключении таба

(value: string) => void-
onSearchChange

Вызывается с задержкой после последнего ввода

(value: string) => void-
searchPlaceholder

Плейсхолдер строки поиска

string-
children*

Контент — список результатов, передаётся извне

ReactNode-