Dropdown

Installation

npm i @snack-uikit/dropdown

Changelog

Пакет экспортирует компонент Dropdown - компонент выпадающего контейнера общего назначения. Компонент использует под собой компонент PopoverPrivate.

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

Например:

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

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

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

Dropdown

Props

| name | type | default value | description | |------|------|---------------|-------------| | children* | ReactNode \| ChildrenFunction | - | Триггер поповера (подробнее читайте ниже) | | content* | ReactNode | - | | | className | string | - | CSS-класс | | triggerClassName | string | - | CSS-класс триггера | | open | boolean | - | Управляет состоянием показан/не показан. | | onOpenChange | (isOpen: boolean) => void | - | Колбек отображения компонента. Срабатывает при изменении состояния open. | | hoverDelayOpen | number | - | Задержка открытия по ховеру | | hoverDelayClose | number | - | Задержка закрытия по ховеру | | widthStrategy | enum PopoverWidthStrategy: "auto", "gte", "eq" | gte | Стратегия управления шириной контейнера поповера - auto - соответствует ширине контента, - gte - Great Than or Equal, равен ширине таргета или больше ее, если контент в поповере шире, - eq - Equal, строго равен ширине таргета. | | offset | number | 0 | Отступ поповера от его триггер-элемента (в пикселях). | | closeOnEscapeKey | boolean | true | Закрывать ли по нажатию на кнопку Esc | | triggerClickByKeys | boolean | true | Вызывается ли попоповер по нажатию клавиш Enter/Space (при trigger = click) | | triggerRef | ForwardedRef<ReferenceType \| HTMLElement> | - | Ref ссылка на триггер | | outsideClick | boolean \| OutsideClickHandler | - | Закрывать ли при клике вне поповера | | fallbackPlacements | Placement[] | - | Цепочка расположений которая будет применяться к поповеру от первого к последнему если при текущем он не влезает. | | disableSpanWrapper | boolean | - | Отключает для isValidElement внешнюю обертку триггера Пригодится для элементов с position: absolute | | trigger | enum Trigger: "click", "hover", "focusVisible", "focus", "hoverAndFocusVisible", "hoverAndFocus", "clickAndFocusVisible" | click | Условие отображения поповера: - click - открывать по клику - hover - открывать по ховеру - focusVisible - открывать по focus-visible - focus - открывать по фокусу - hoverAndFocusVisible - открывать по ховеру и focus-visible - hoverAndFocus - открывать по ховеру и фокусу - clickAndFocusVisible - открывать по клику и focus-visible | | placement | enum Placement: "left", "left-start", "left-end", "right", "right-start", "right-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end" | bottom-start | Положение поповера относительно своего триггера (children). |