DropdownPanel

DropdownPanel — выпадающая панель, открывающаяся кликом по своему триггеру. В отличие от DropdownMenu не ограничена списком пунктов: внутрь через children кладётся произвольная вёрстка — карточка профиля, список сущностей, смешанный контент. Пункты-действия внутри собираются из MenuItemButton (@tulls/ui) — тот же вид пункта, что и в меню, но без машины Ark Menu. Триггер задаёт потребитель через trigger — это любой элемент (кнопка, иконка, аватар), на который Ark через asChild вешает onClick и aria-атрибуты. Открытость по умолчанию панель держит сама; когда открытием распоряжается хост — контролируемо парой open / onOpenChange. Положение относительно триггера настраивает positioning (по умолчанию bottom-start). Панель порталится в body, монтируется лениво при открытии и размонтируется при закрытии. Родня: DropdownMenu — та же механика открытия, но контент строго список пунктов; MenuItemButton — одиночный пункт того же вида, из которого набирается меню внутри панели.

Анатомия

DropdownPanel
Trigger (trigger, asChild)
Portal → Positioner (positioning) → Content
Children (произвольный контент)

Примеры

Произвольный контент

Главное отличие от DropdownMenu: внутрь children идёт любая вёрстка, а не только пункты. Здесь сверху карточка профиля, ниже разделитель и пункты-действия из MenuItemButton.

Позиционирование

positioning пробрасывается в Ark Popover: placement задаёт сторону и выравнивание (bottom-end, top-start, ...), gutter — отступ от триггера. По умолчанию — bottom-start.

Контролируемое открытие

Пара open / onOpenChange передаёт управление хосту: панель открывают и закрывают извне. onOpenChange срабатывает на любое закрытие — включая Esc и клик вне панели.

API

PropTypeDefault
trigger*

Элемент-триггер, открывающий панель по клику, — задаётся потребителем (кнопка, иконка и т.п.). Ark навешивает на него onClick/aria через asChild.

ReactElement-
open

Контролируемая открытость: без пропа панель управляет состоянием сама

boolean-
onOpenChange

Колбэк изменения открытости — вызывается на любое открытие/закрытие, включая Esc и клик вне панели

(open: boolean) => void-
positioning

Позиционирование относительно триггера

ComponentProps<typeof ArkPopover.Root>["positioning"]{ placement: "bottom-start" }
children*

Произвольный контент панели

ReactNode-