Dropdown

Выпадающий многоуровневый список.

Использование

Обязательным параметром является только массив items.

Внутри items может быть такой же вложенный массив items.

Формат следующий:

type ItemOption = {
    /**
     *  Значение у item.
     */
    value: string | number;
    /**
     * Label у item.
     */
    label: string;
    /**
     * Сторона открытия вложенного выпадающего списка относительно текущего элемента.
     */
    placement?: DropdownPlacement;
    /**
     * Список дочерних items.
     */
    items?: ItemOption[];
    /**
     * Слот в начале дочернего выпадающего списка.
     */
    beforeList?: ReactNode;
    /**
     * Item не активен.
     */
    disabled?: boolean;
    /**
     * Слот для контента слева.
     */
    contentLeft?: ReactNode;
    /**
     * Слот для контента справа.
     */
    contentRight?: ReactNode;
    /**
     * Отобразить ли разделитель до элемента.
     */
    dividerBefore?: boolean;
    /**
     * Отобразить ли разделитель после элемента.
     */
    dividerAfter?: boolean;
    /**
     * Classname для item.
     */
    className?: string;
    /**
     * Способ открытия дочернего списка.
     */
    trigger?: DropdownTrigger;
    /**
     * Максимальная высота дочернего выпадающего списка.
     */
    listMaxHeight?: CSSProperties['height'];
    /**
     * Скрытие элемента, а также всех его дочерних элементов.
     */
    hidden?: boolean;
};

Примеры

Default

Live Editor

Result

Open in CodeSandbox

Size

Размер Dropdown задается с помощью свойства size.
Возможные значения свойства: "s".

Live Editor

Result

Open in CodeSandbox

Placement

Параметр placement может принимать следующие значения : "top", "right", "bottom", "left", "auto".
Default value для placement - "bottom".

Live Editor

Result

Open in CodeSandbox

Trigger

Параметр trigger принимает строку: "click" или "hover".
Default value - "click".
Для примера показано значение "hover".

Live Editor

Result

Open in CodeSandbox

Portal

Иногда возникает необходимость вынесения выпадающего списка на уровни выше в DOM. К примеру, когда у родительского блока имеется скролл, и список будет обрезаться, чего хотелось бы избежать.
Для такой реализации имеется пропс portal, который принимает либо ref либо id html-тега.

Live Editor

Result

Open in CodeSandbox

Клавиатурная навигация

Данный компонент соответствует требования W3C: Combobox и частично TreeView.

• Tab - закрывает dropdown. Перемещает фокус на следующий элемент на странице;
• Enter - открывает/закрывает dropdown. Если на элементе - выбирает его;
• Space - открывает/закрывает dropdown. Если на элементе - выбирает его;
• Home - открывает dropdown и перемещает фокус на первый элемент;
• End - открывает dropdown и перемещает фокус на последний элемент;
• PageUp - перемещает фокус на 10 элементов выше либо в начало списка;
• PageDown - перемещает фокус на 10 элементов ниже либо в конце списка;
• ArrowUp - открывает dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент выше;
• ArrowDown - открывает dropdown и перемещает фокус на первый элемент. Перемещает фокус на один элемент ниже;
• ArrowRight - если фокус на элементе вложенного списка - открывает его и перемещает фокус на первый элемент;
• ArrowLeft - закрывает текущий список и перемещает фокус на предыдущий;