@snack-uikit/dropdown NPM

Dropdown

Installation

npm i @snack-uikit/dropdown

Пакет экспортирует компонент 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).