FloatingPanel

FloatingPanel — плавающее окно: шапка с заголовком и кнопками, под ней область произвольного контента (children). Окно двигается за шапку (draggable), меняет размер за края и углы (resizable), сворачивается до шапки (minimizable), разворачивается на весь экран (maximizable) и закрывается крестиком (closable) — каждую способность можно отключить по отдельности. Открытость всегда контролируемая — пара open / onOpenChange: onOpenChange(false) приходит при закрытии крестиком, Esc или (при overlayClose) кликом мимо окна, а open меняет хост. Режим modal кладёт под окно невидимый слой-блокиратор, отсекающий страницу. Стартовые размер и позиция — defaultSize / defaultPosition, границы ресайза — minSize / maxSize. Несколько окон наводятся друг на друга через stackIndex (z-index) и onBringToFront (сигнал поднять окно при фокусе). Окно порталится в body, монтируется лениво при открытии и размонтируется при закрытии; первое поле контентной области получает автофокус. Собрано на Ark UI FloatingPanel в каркасе Panel из ДС. В IDE поверх него построена оболочка модалок ModalWindow (связывает окно со стором модалок, центрирует и каскадирует) — прямо FloatingPanel там обычно не используют.

Использует: ButtonIcon, Panel

Анатомия

FloatingPanel

Blocker (modal)

Portal → Positioner (stackIndex) → Content (onBringToFront)

Panel.Header → DragArea (draggable)

Title (title)

Controls (minimizable | maximizable | closable)

Panel.Content → Children

ResizeTrigger ×8 (resizable)

Примеры

Модальное окно

modal кладёт под окно невидимый слой-блокиратор: страница не реагирует на клики, пока окно открыто. Само окно при этом по-прежнему двигается и меняет размер.

Отключённые способности

resizable, draggable, minimizable, maximizable, closable выключаются по отдельности. Здесь сняты ресайз и обе кнопки стадии — в шапке остаётся только крестик, окно можно лишь двигать.

Размер и его границы

defaultSize задаёт размер при открытии, minSize / maxSize — диапазон ресайза (дальше границ края не тянутся). defaultPosition ставит левый верхний угол окна.

API

Prop	Type	Default
`open`* Открыто ли окно. Компонент контролируемый — состоянием распоряжается хост	`boolean`	-
`onOpenChange`* Запрос на смену состояния: `false` при закрытии крестиком, Esc или кликом мимо окна (при `overlayClose`). Хост меняет `open` в ответ	`(open: boolean) => void`	-
`title`* Заголовок окна — одна строка, обрезается с многоточием	`ReactNode`	-
`children`* Содержимое окна — произвольная вёрстка в области под шапкой	`ReactNode`	-
`modal` Блокировать взаимодействие с сайтом, пока окно открыто (невидимый слой-блокиратор под окном)	`boolean`	`false`
`overlayClose` Закрывать окно кликом вне его области. При нескольких открытых окнах закрывается только верхнее	`boolean`	`true`
`draggable` Перетаскивание окна за шапку	`boolean`	`true`
`resizable` Изменение размера за края и углы окна	`boolean`	`true`
`defaultSize` Размер окна при открытии (px). Дальше размер держит само окно	`FloatingPanelSize`	-
`minSize` Нижняя граница размера при ресайзе (px)	`FloatingPanelSize`	-
`maxSize` Верхняя граница размера при ресайзе (px)	`FloatingPanelSize`	-
`defaultPosition` Позиция левого верхнего угла при открытии (px от края вьюпорта)	`FloatingPanelPoint`	-
`minimizable` Кнопка «свернуть» (схлопывает окно до шапки)	`boolean`	`true`
`maximizable` Кнопка «развернуть на весь экран»	`boolean`	`true`
`closable` Кнопка «закрыть»	`boolean`	`true`
`stackIndex` Позиция окна в стеке: z-index = var(--z-modal) + stackIndex	`number`	`0`
`onBringToFront` Вызывается при фокусе/клике внутри окна — сигнал поднять его наверх	`() => void`	-