@elcrm/search

React-поле поиска для elCRM: debounce, clear, hotkey, minimal + tooltip, after, suggestions, loading, варианты ghost/filled, rtl, a11y.

Peer: react, react-dom, @elcrm/tooltip.

npm install @elcrm/search @elcrm/tooltip

Примеры

<Search
  variant="filled"
  dir="rtl"
  resultsCount={12}
  value={q}
  onValue={setQ}
  aria-label="بحث"
/>

<Search
  variant="ghost"
  minimal
  hotkey="/"
  aria-label="Поиск"
  after={<button type="button">Фильтр</button>}
/>

Live region объявит «12 результатов» (или resultsAnnounce).

Props

| Проп | Описание | | ---- | -------- | | variant | default · ghost · filled | | dir | ltr · rtl | | resultsCount | число для aria-live | | resultsAnnounce | свой текст / (n) => string | | size / width | s · m · l | | minimal / tip / after / hotkey | компактный режим, tooltip, слот, hotkey | | loading / onSearch / suggestions | загрузка и подсказки |

Корень: role="search". Стили: те же --field-* / --select-*, что у @elcrm/form (капсула, фокус, попап). Узкие: --field-search-min-width, --field-search-expand-min, --field-search-list-max-height.

Список suggestions — portal в document.body (position: fixed), не режется overflow у Layout/Header.

В форме с useForm — SearchField из @elcrm/form. Этот пакет — упрощённый <Search value onValue> (хедер, тулбар, без form+name).

Лицензия

MIT © MaSkal