@yandex/ui/Select/Select.d.ts

Yandex UI components

import React, { ReactNode, RefObject, SelectHTMLAttributes, FocusEventHandler, MouseEventHandler, KeyboardEventHandler, Ref } from 'react';
import { Omit } from '../typings/utility-types';
import { RenderOverride } from '../lib/render-override';
import { ItemSimple, ChangeEventHandler } from '../Menu/Menu';
import { IWithTogglableProps } from '../withTogglable/withTogglable';
import { IIconEnhancedProps } from './Select.registry';
import './Button/Select-Button.css';
import './Menu/Select-Menu.css';
import './Select.css';
export declare type OptionSimple = ItemSimple & {
    /**
     * Текст, который будет отображен в компоненте `Trigger` когда пункт будет выбран.
     */
    checkedText?: string;
};
/**
 * Набор пунктов объединенных в группу.
 */
export declare type OptionGroup = {
    /**
     * Заголовок группы
     */
    title?: string;
    /**
     * Набор элементов в группе
     */
    items: OptionSimple[];
};
/**
 * Пункт списка.
 *
 * В touch-реализациях поле `content` не поддерживает JSX.
 */
export declare type Option = OptionSimple | OptionGroup;
declare type SelectAllHTMLAttributes = Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size' | 'value'>;
export interface ISelectProps extends IWithTogglableProps, SelectAllHTMLAttributes {
    /**
     * Событие, которое вызывается при потере фокуса компонентом. Например, при клике на другом месте экрана.
     */
    onBlur?: FocusEventHandler<HTMLElement>;
    /**
     * Событие, которое вызывается при нажатии на компонент.
     */
    onClick?: MouseEventHandler<HTMLElement>;
    /**
     * Событие, которое вызывается при нажатии клавиш клавиатуры.
     */
    onKeyDown?: KeyboardEventHandler<HTMLElement>;
    /**
     * Дополнительный контент после компонента `Trigger`.
     */
    addonAfter?: ReactNode;
    /**
     * Дополнительный контент перед компонентом `Trigger`.
     */
    addonBefore?: ReactNode;
    /**
     * Ссылка на корневой DOM элемент компонента.
     */
    innerRef?: Ref<HTMLElement>;
    /**
     * Набор опций.
     */
    options: Option[];
    /**
     * Вспомогательный текст внутри компонента. Отображается, когда значение не выбрано.
     *
     * @default —
     */
    placeholder?: string;
    /**
     * Размер компонента.
     */
    size?: string;
    /**
     * Стилевое оформление компонента.
     */
    theme?: string;
    /**
     * Ссылка на корневой DOM элемент компонента `Trigger`.
     */
    triggerRef?: RefObject<HTMLElement>;
    /**
     * Значение, выбранное в компоненте по умолчанию.
     *
     * Если передана строка или число, то компонент будет работать в режиме `radio` — выбрать можно только один пункт.
     * Если передан массив,
     * то компонент будет работать в режиме `check` — выбрать можно произвольное количество пунктов.
     *
     * @default ''
     */
    value?: any;
    /**
     * Внешний вид компонента.
     */
    view?: string;
    /**
     * Показывать всегда значение из свойства `placeholder` вне зависимости от выбранного значения.
     */
    showAlwaysPlaceholder?: boolean;
    /**
     * Включает/отключает модификатор `checked` на кнопке селекта.
     */
    checkable?: boolean;
    /**
     * Дополнительные свойства для иконки.
     */
    iconProps?: IIconEnhancedProps;
    /**
     * Обработчик изменения значения.
     */
    onChange?: ChangeEventHandler<HTMLSelectElement>;
    /**
     * Переопределяет компонент `Trigger`
     */
    renderTrigger?: RenderOverride;
    /**
     * Переопределяет компонент `TriggerIcon`
     */
    renderTriggerIcon?: RenderOverride;
    /**
     * id активного элемента меню.
     */
    activeDescendant?: string;
}
export declare const cnSelect: import("@bem-react/classname").ClassNameFormatter;
/**
 * Компонент для создания раскрывающегося списка с меню.
 * @param {ISelectProps} props
 */
export declare const Select: React.ComponentClass<ISelectProps, any>;
export {};