@snack-uikit/dropdown

Dropdown

Installation

npm i @snack-uikit/dropdown

Changelog

Description

• Пакет @snack-uikit/dropdown экспортирует компонент Dropdown — универсальный выпадающий контейнер для отображения дополнительного контента (меню, подсказки, произвольные блоки) относительно управляющего элемента.
• В основе Dropdown используется внутренний компонент PopoverPrivate, за счёт чего доступны гибкие настройки положения (placement), стратегии ширины (widthStrategy), отступа (offset) и поведения при кликах/наведении/фокусе.
• Компонент может работать в контролируемом режиме через пропы open и onOpenChange, поддерживает закрытие по клику вне (outsideClick), по клавише Esc (closeOnEscapeKey) и при изменении истории браузера (closeOnPopstate).
• В качестве триггера можно использовать либо дочерний React-элемент (children), либо вынесенный наружу элемент через triggerRef; при отсутствии и того, и другого Dropdown не отрисовывается.
• Ширина выпадающего контейнера задаётся стратегией widthStrategy: можно зафиксировать её равной ширине триггера, сделать не меньше ширины триггера или полностью подогнать под контент.
• Отступ между триггером и контейнером контролируется явно через проп offset или через CSS-переменную --offset, пробрасываемую в triggerClassName (пример ниже); при одновременном указании приоритет имеет значение пропа offset.
• Figma: Dropdown.

Чтобы указать оффсет через стили, нужно в triggerClassName передать CSS-переменную --offset:

Например:

.triggerClassName {
  --offset: #{$some-var};
}

Важное уточнение: если переменная передается через scss-переменную, она должна быть обернута в #{ }.

Если значение явно передано через проп offset, то будет применено значение пропа.

Example

import { Dropdown } from '@snack-uikit/dropdown';
import { ButtonFilled } from '@snack-uikit/button';

function DropdownExample() {
  return (
    <Dropdown
      content={
        <div>
          <div>Строка 1 контента</div>
          <div>Строка 2 контента</div>
          <div>Строка 3 контента</div>
        </div>
      }
      placement='bottom-start'
      widthStrategy='gte'
      offset={8}
      data-test-id='dropdown'
    >
      <ButtonFilled label='Открыть выпадающее меню' />
    </Dropdown>
  );
}

Dropdown

Props