Dropdown

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

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

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

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

type Items = Array<{
        /**
         *  Значение у item
         */
        value: string | number;
        /**
         * Метка-подпись к item
         */
        label: string;
        /**
         * Список дочерних items.
         */
        items?: Items;
        /**
         * Item не активен
         */
        disabled?: boolean;
        /**
         * Слот для контента слева
         */
        contentLeft?: ReactNode;
        /**
         * Слот для контента справа
         */
        contentRight?: ReactNode;
        /**
        * Отобразить ли разделитель до элемента
        */
        dividerBefore?: boolean;
        /**
        * Отобразить ли разделитель после элемента
        */
        dividerAfter?: boolean;
        /**
         * Выбранный item.
         * @deprecated использовать ContentLeft || ContentRight
         */
        isActive?: boolean;
        /**
         * Кастомный цвет текста
         * @deprecated
         */
        color?: string;
        /**
         * Item не активен
         * @deprecated использовать disabled
         */
        isDisabled?: boolean;
    }>;

Примеры

Default

Live Editor

Result

Open in CodeSandbox

Size

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

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. К примеру, когда у родительского блока имеется scroll, и список будет обрезаться, чего хотелось бы избежать.
Для такой реализации имеется пропс 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 - закрывает текущий список и перемещает фокус на предыдущий;