SearchPrivate

@cloud-ru/ds-search-private — Базовый input для поиска без иконок и плейсхолдеров — фундамент для публичного @cloud-ru/ds-search и доменных search-компонентов.

@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.

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

SearchPrivateProps

| Prop | Type | Default | Description | |------|------|---------|-------------| | afterContent | ReactNode | — | Слот справа от строки ввода — после кнопки очистки, внутри поля. Типовое наполнение — иконочная кнопка того же размера, что поле: <Button size={size} view='function' appearance='neutral' icon={…} />. | | className | string | — | CSS-класс | | data-test-id | string | — | | | disabled | boolean | — | Деактивирован ли компонент | | inputMode | "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url" | search | Режим работы экранной клавиатуры | | loading | boolean | — | Состояние загрузки | | onBlur | FocusEventHandler<HTMLInputElement> | — | Колбек обработки потери фокуса | | onChange | ((value: string, e?: ChangeEvent<HTMLInputElement>) => void) | — | Колбек смены значения | | onFocus | FocusEventHandler<HTMLInputElement> | — | Колбек обработки получения фокуса | | onKeyDown | KeyboardEventHandler<HTMLInputElement> | — | Колбек обработки начала нажатия клавиши клавиатуры | | onSubmit | ((value: string) => void) | — | Колбек на подтверждение поиска по строке | | placeholder | string | — | Значение плейсхолдера | | showClearButton | boolean | true | Отображение кнопки Очистки поля | | size | "l" | "m" | "s" | m | Размер | | tabIndex | number | — | | | value | string | `` | Значение input |

Related types

• Size = "l" | "m" | "s"

Смотри также

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