@yandex/ui/Menu/Menu.d.ts

Yandex UI components

import React, { ReactNode, PureComponent, CSSProperties, Ref } from 'react';
import { RenderOverride } from '../lib/render-override';
import { IMenuItemProps as MenuItemProps } from './Item/Menu-Item';
import './Menu.css';
export { MenuItemProps };
export declare type ItemSimple = {
    /**
     * Значение, которое соответствует пункту меню. Это значение передается в обработчик, который указан в `onChange`
     */
    value: any;
    /**
     * Содержимое пункта меню. Например: строка с названием пункта меню или иконка
     */
    content: ReactNode;
    /**
     * Неактивное состояние элемента
     */
    disabled?: boolean;
    /**
     * Идентификатор компонента
     */
    id?: string;
};
export declare type ItemGroup = {
    /**
     * Заголовок группы
     */
    title?: string;
    /**
     * Набор элементов в группе
     */
    items: ItemSimple[];
};
export declare type MixedItem = ItemSimple | ItemGroup;
export declare type ChangeEvent<T> = React.ChangeEvent<T & {
    name?: string;
    value: any;
}>;
export declare type ChangeEventHandler<T> = (event: ChangeEvent<T>) => void;
export interface IMenuProps {
    /**
     * Состояние фокуса на меню. Необходимо для активации клавиатурной навигации
     */
    focused?: boolean;
    /**
     * Список пунктов меню
     */
    items: MixedItem[];
    /**
     * Обработчик изменения значения
     */
    onChange?: ChangeEventHandler<HTMLElement>;
    /**
     * Обработчик изменения активного значения в меню
     */
    onActiveItemChange?: (id: string) => void;
    /**
     * Пункт меню или список пунктов, которые выбраны по умолчанию.
     * Значения должны совпадать со значениями `value`, которые указаны в `items`
     */
    value?: any;
    /**
     * Неактивное состояние компонента.
     * Состояние, при котором меню отображается, но недоступно для действий пользователя
     */
    disabled?: boolean;
    /**
     * Ссылка на корневой DOM-элемент компонента
     */
    innerRef?: Ref<HTMLElement>;
    /**
     * Дополнительный класс
     */
    className?: string;
    /**
     * Html атрибут `style`
     */
    style?: CSSProperties;
    /**
     * Переопределяет компонент `Item`
     */
    renderItem?: RenderOverride<MenuItemProps>;
}
export declare const cnMenu: import("@bem-react/classname").ClassNameFormatter;
/**
 * Компонент для создания меню.
 * @param {IMenuProps} props
 */
export declare class Menu extends PureComponent<IMenuProps> {
    static displayName: string;
    readonly state: {
        hoveredIndex: number;
    };
    /**
     * Контейнер с ссылкой на корневой DOM элемент меню.
     */
    private readonly innerRef;
    /**
     * Массив ссылок на пункты меню для правильного подскролла.
     */
    private itemsRef;
    private uniqId;
    componentDidMount(): void;
    componentDidUpdate(prevProps: IMenuProps): void;
    componentWillUnmount(): void;
    render(): JSX.Element;
    private forwardRefs;
    private mapChildren;
    private onKeyDown;
    private static scrollToItem;
    private onMenuItemClick;
    private subscribeToEvents;
    private unsubscribeFromEvents;
    private setHoveredOnMouseEnter;
    private setHoveredOnMouseLeave;
    private hoverAndScrollToFirstSelectedElement;
    /**
     * Возвращает следующий индекс активного элемента для выделения в меню.
     *
     * @param direction Направление, может быть `1` — down, либо `-1` — up.
     */
    private getNextNotDisabledIndex;
    /**
     * Вызывает событие onActiveItemChange.
     */
    private triggerOnMenuItemChange;
    /**
     * Вызывает событие onChange.
     */
    private triggerOnChange;
}