llms.txt

SearchPrivate

@cloud-ru/ds-search-private — нижний слой поиска: контролируемый <input type='search'> с состояниями (focus, disabled, loading, error), кнопкой очистки и debounce. На нём собран публичный @cloud-ru/ds-search — там добавляются иконка-лупа, плейсхолдер из локали, layout. В продуктовом коде используйте @cloud-ru/ds-search.

Когда использовать

  • Реализация кастомного поиска с иной разметкой (например, без иконки или со встроенным фильтром), который нельзя выразить пропсами @cloud-ru/ds-search.

В большинстве случаев — берите публичный @cloud-ru/ds-search.

Установка

pnpm add @cloud-ru/ds-search-private
import { SearchPrivate } from '@cloud-ru/ds-search-private'

Примеры использования

Базовый поиск

Базовый поискControlled value + `onSubmit`.
Значение: — · Отправлено: —
tsx
import { SearchPrivate } from '@cloud-ru/ds-search-private';
import { useState } from 'react';

export function Basic() {
  const [value, setValue] = useState('');
  const [submitted, setSubmitted] = useState('');

  return (
    <div style={{ display: 'flex', gap: 12, flexDirection: 'column' }}>
      <SearchPrivate value={value} onChange={setValue} onSubmit={setSubmitted} />
      <span>
        Значение: {value || '—'} · Отправлено: {submitted || '—'}
      </span>
    </div>
  );
}

Props

Types

PropsSearchPrivateProps
PropTypeDefaultRequiredDescription
afterContentReactNode—noСлот справа от строки ввода — после кнопки очистки, внутри поля. Типовое наполнение — иконочная кнопка того же размера, что поле: `<Button size={size} view='function' appearance='neutral' icon={…} />`.
classNamestring—noCSS-класс
data-test-idstring—no
disabledboolean—noДеактивирован ли компонент
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"searchnoРежим работы экранной клавиатуры
loadingboolean—noСостояние загрузки
onBlurFocusEventHandler<HTMLInputElement>—noКолбек обработки потери фокуса
onChange((value: string, e?: ChangeEvent<HTMLInputElement>) => void)—noКолбек смены значения
onFocusFocusEventHandler<HTMLInputElement>—noКолбек обработки получения фокуса
onKeyDownKeyboardEventHandler<HTMLInputElement>—noКолбек обработки начала нажатия клавиши клавиатуры
onSubmit((value: string) => void)—noКолбек на подтверждение поиска по строке
placeholderstring—noЗначение плейсхолдера
showClearButtonbooleantruenoОтображение кнопки Очистки поля
size"l" | "m" | "s"mnoРазмер
tabIndexnumber—no
valuestringnoЗначение input

Unions

Sizeunion

"l" | "m" | "s"

Related props

InputModeunion

"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

Types

SearchPrivateProps

Unions

Смотри также

  • Search — публичный поиск, который большинству продуктов и нужен.
  • InputPrivate — общая обвязка полей ввода.