import * as React from 'react'; import { type FilterFn } from '../../lib/select'; import { type HasDataAttribute, type HasRootRef } from '../../types'; import { type CustomSelectDropdownProps } from '../CustomSelectDropdown/CustomSelectDropdown'; import type { FormFieldProps } from '../FormField/FormField'; import { type NativeSelectProps } from '../NativeSelect/NativeSelect'; import type { SelectType } from '../Select/Select'; import { type CustomSelectClearButtonProps } from './CustomSelectClearButton'; import { type CustomSelectInputProps } from './CustomSelectInput/CustomSelectInput'; import type { CustomSelectOptionInterface, CustomSelectRenderOption, PopupDirection } from './types'; export type { CustomSelectClearButtonProps }; export interface SelectProps extends Omit, Omit, Pick, Pick { /** * Свойства, которые можно прокинуть внутрь компонента: * - `root`: свойства для прокидывания в корень компонента; * - `select`: свойства для прокидывания в нативный `select`; * - `input`: свойства для прокидывания в нативный `input`. */ slotProps?: NativeSelectProps['slotProps'] & { input?: React.InputHTMLAttributes & HasDataAttribute & HasRootRef; }; /** * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ input: { getRootRef: ... } }`. * * Ref на внутрений компонент input. */ getSelectInputRef?: React.Ref; /** * Если `true`, то при нажатии на `CustomSelect` в нём появится текстовое поле для поиска по `options`. По умолчанию поиск * производится по `option.label`. */ searchable?: boolean; /** * Текст, который будет отображен, если приходит пустой `options`. */ emptyText?: string; /** * Событие изменения текстового поля. */ onInputChange?: (e: React.ChangeEvent) => void; /** * Список опций в списке. */ options: OptionInterfaceT[]; /** * Функция для кастомной фильтрации. По умолчанию поиск производится по `option.label`. */ filterFn?: false | FilterFn; /** * Направление раскрытия выпадающего списка. */ popupDirection?: PopupDirection; /** * Рендер-проп для кастомного рендера опции. * В объекте аргумента приходят [свойства опции](https://vkui.io/components/custom-select#custom-select-option-api). * * > ⚠️ Важно: свойство опции `disabled` должно выставляться только через проп `options`. * > Запрещается выставлять `disabled` проп опциям в обход `options`, иначе `CustomSelect` не будет знать об актуальном состоянии * опции. */ renderOption?: (props: CustomSelectRenderOption) => React.ReactNode; /** * Рендер-проп для кастомного рендера содержимого дропдауна. * В `defaultDropdownContent` содержится список опций в виде скроллящегося блока. */ renderDropdown?: ({ defaultDropdownContent, }: { defaultDropdownContent: React.ReactNode; }) => React.ReactNode; /** * Если `true`, то в дропдауне вместо списка опций рисуется спиннер. При переданных `renderDropdown` и `fetching: true` * "победит" `renderDropdown`. */ fetching?: boolean; /** * Обработчик закрытия выпадающего списка. */ onClose?: VoidFunction; /** * Обработчик открытия выпадающего списка. */ onOpen?: VoidFunction; /** * Иконка раскрывающегося списка. */ icon?: React.ReactNode; /** * Кастомная кнопка для очистки значения. * Должна принимать обязательное свойство `onClick`. */ ClearButton?: React.ComponentType; /** * Если `true`, то справа будет отображаться кнопка для очистки значения. */ allowClearButton?: boolean; /** * Передает атрибут `data-testid` для кнопки очистки. */ clearButtonTestId?: string; /** * Отступ от выпадающего списка. */ dropdownOffsetDistance?: number; /** * Ширина раскрывающегося списка зависит от контента. */ dropdownAutoWidth?: boolean; /** * Использовать Portal для рендеринга выпадающего списка. */ forceDropdownPortal?: boolean; /** * Тип отображения компонента. */ selectType?: SelectType; /** * Отключает максимальную высоту по умолчанию. */ noMaxHeight?: boolean; /** * Передает атрибут `data-testid` для элемента, внутри которого отображается текст выбранной опции `CustomSelect` или плейсхолдер. */ labelTextTestId?: string; /** * @deprecated Since 7.9.0. Вместо этого используйте `slotProps={ select: { 'data-testid': ... } }`. * * Передает атрибут `data-testid` для нативного элемента `select`. */ nativeSelectTestId?: string; /** * Обработчик события `keyDown` в поле ввода. */ onInputKeyDown?: (e: React.KeyboardEvent, isOpen: boolean) => void; /** * Включает режим в котором выбранное значение `CustomSelect` читается скринридерами корректно. * В данном режиме введенное в поле ввода значение не сбрасывается при потере фокуса. */ accessible?: boolean; /** * Текстовая метка для индикации процесса загрузки данных для пользователей скринридерами. По умолчанию: `"Список опций загружается..."`. */ fetchingInProgressLabel?: string; /** * Текстовая метка для индикации завершения процесса загрузки данных для пользователей скринридерами. По умолчанию: `"Загружено опций: ${options.length}"`. */ fetchingCompletedLabel?: string | ((optionsCount: number) => string); } /** * @see https://vkui.io/components/custom-select */ export declare function CustomSelect(props: SelectProps): React.ReactNode; //# sourceMappingURL=CustomSelect.d.ts.map