@sberbusiness/triplex-next-mcp-server 1.43.0-beta → 1.45.0-beta

package/bundle/components/TopOverlay.md

@@ -1,10 +1,9 @@
 ---
 component: TopOverlay
-category: Overlay
-figma-node: ""
-figma-file: ""
-related: [Overlay, LightBox]
-tokens: []
+category: TopOverlay
+related: [LightBox, Overlay]
+tokens:
+  - TopOverlay.Background
 stories: stories/TopOverlay/TopOverlay.stories.tsx
 version: "1.0"
 ---
@@ -13,128 +12,189 @@ version: "1.0"
 
 ## Назначение
 
-Оверлей, выезжающий из верха экрана: обёртка над `Overlay` с
-`direction=TOP`, `Mask` + `Panel`, FocusTrap, и автокоррекцией top-позиции
-при скролле родителя/`LightBox`-контейнера. Используется для системных
-сообщений, временных панелей.
+Верхняя панель поверх контента `LightBox`: затемняющая маска на всю ширину экрана
+лайтбокса и выезжающая сверху панель с контентом. Компонент — тонкая надстройка над
+`Overlay` с зафиксированным `direction = EOverlayDirection.TOP`, ловушкой фокуса
+(`FocusTrapExtended`) и пересчётом вертикального позиционирования относительно
+экрана лайтбокса.
 
-Используй когда: нужна верхняя shading-панель внутри `LightBox` или
-прокручиваемого родителя, со встроенной фиксацией фокуса. Для общего
-оверлея — `Overlay` напрямую.
+Реэкспортируется как `LightBox.TopOverlay` — это тот же самый компонент, а не обёртка.
 
----
-
-## Файловая структура
-
-```text
-src/components/TopOverlay/
-├── TopOverlay.tsx     # FC<ITopOverlayProps>; FocusTrap + Overlay(direction=TOP)
-├── styles/TopOverlay.module.less
-├── __tests__/
-└── index.ts
-```
+Используй когда: внутри `LightBox` нужно перекрыть контент подтверждением или
+коротким сообщением, не закрывая сам лайтбокс (типовой сценарий — `Confirm` при
+попытке выйти из формы с несохранёнными данными).
+Не используй когда: панель нужна сбоку — `LightBox.SideOverlay`; нужен оверлей вне
+`LightBox` с произвольным направлением — `Overlay`; нужно самостоятельное модальное
+окно поверх страницы — `ModalWindow`.
 
 ---
 
-## Публичный API
+## Варианты и props
 
-### `ITopOverlayProps`
+### Обязательные props
 
-```ts
-extends Pick<IOverlayProps, "opened" | "onOpen" | "onClose">
-```
+| Prop | Тип | Описание |
+|---|---|---|
+| `opened` | `boolean` | Управляемое состояние панели. Компонент не хранит его сам и не поднимает наружу: `setOpened` в нижележащий `Overlay` передаётся no-op'ом, закрытие инициирует только потребитель |
 
-| Prop | Тип | Default | Описание |
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `opened` | `boolean` | — | **Обязателен**. Контролируемое открытие. |
-| `onOpen?` | `() => void` | — | Колбэк при открытии (вызывается из `handleOpen`, после `updateTopPosition`). |
-| `onClose?` | `() => void` | — | Колбэк при закрытии (после анимации). |
-| `focusTrapProps?` | `FocusTrapProps` | — | Пропсы для `focus-trap-react`. По умолчанию `allowOutsideClick: true, preventScroll: true`. |
-| `children?` | `ReactNode` | — | Содержимое панели. |
+| `children` | `React.ReactNode` | — | Содержимое панели. Обычный `ReactNode`, а не render-функция, как у `Overlay` |
+| `onOpen` | `() => void` | — | Вызывается по завершении анимации открытия, после того как компонент запланировал активацию ловушки фокуса и пересчёт позиции. Это обновления состояния React — к моменту вызова они ещё не обязаны быть применены к DOM. При монтировании сразу с `opened={true}` анимации нет и колбэк приходит на маунте |
+| `onClose` | `() => void` | — | Вызывается по завершении анимации закрытия, после того как компонент запланировал сброс внутреннего состояния и позиционирования. К DOM сброс так же применяется не раньше следующего рендера |
+| `focusTrapProps` | `IFocusTrapExtendedProps` | — | Свойства `FocusTrapExtended`. Мержатся поверх собственных: `focusTrapOptions.preventScroll: true` задаётся по умолчанию и переопределяется из `focusTrapProps.focusTrapOptions`; переданный `active` перекрывает внутреннее управление ловушкой |
+| `className` | `string` | — | Мержится с собственными классами обёртки через `clsx`, не затирает их |
+| `style` | `React.CSSProperties` | — | Уходит на обёртку и мержится с runtime-переменной позиционирования. Собственный `top` в нём передавать не нужно: он перекроет рассчитанную позицию, потому что inline-свойство сильнее класса |
+| `...HTMLDivAttributes` | — | — | Стандартные атрибуты корневого `<div>`-обёртки (кроме `children` и `onClose` — последний занят колбэком жизненного цикла) |
+
+Props `opened`, `onOpen` и `onClose` берутся из `IOverlayProps` через `Pick<>` —
+их типы и семантика синхронны с `Overlay`. Остальных props `Overlay`
+(`direction`, `fixed`, `setOpened`, `onOpening`, `onClosing`) у `TopOverlay` нет:
+направление зафиксировано, жизненный цикл управляется внутри.
+
+`ref` и остальные DOM-атрибуты адресуют обёртку `.topOverlayWrapper` — элемент,
+который держит `top`, классы `opened` / `closing` и внутри которого рендерится
+`Overlay`. Во вложенный `Overlay` из props потребителя не уходит ничего.
+
+### Как работает позиционирование
+
+Обёртка панели спозиционирована `absolute` внутри контента лайтбокса, поэтому её
+фактическое положение во вьюпорте зависит от прокрутки родителя — при открытии на
+прокрученном контенте панель уехала бы вверх или вниз от верхней границы экрана.
+Компонент корректирует это инкрементально: читает CSS-переменную
+`--lightBox-screen-top` у обёртки, сравнивает с `getBoundingClientRect().top` и
+публикует разницу в runtime-переменной `--triplex-next-runtime-TopOverlay-Top`
+(`utils.ts` → `getNextTopPosition`). Переменную читает `.topOverlayWrapper` в
+LESS: `top: var(--triplex-next-runtime-TopOverlay-Top, 0)` — inline-стили в
+компонентах запрещены (`docs/ai/codestyle.md`).
+
+Пересчёт делается дважды: сразу при переходе `opened` в `true` и повторно в
+`onOpen` — после завершения анимации, когда положение обёртки уже окончательное.
+При закрытии (`onClose`) смещение сбрасывается в «не рассчитано», и переменная со
+слоя снимается — позиция возвращается к дефолту `0` из LESS. Признак «не
+рассчитано» — `undefined`, а не `0`: рассчитанный ноль такой же результат, как
+любой другой, и он тоже публикуется (`0px`).
+
+При монтировании сразу с `opened={true}` пересчёт **не делается**: в этот момент
+лайтбокс ещё не на своём месте (у него собственная анимация появления), а
+`getBoundingClientRect()` учитывает `transform` родителей — измерение дало бы
+смещение в никуда (проверено: панель уезжала на `top: -832px`). Позиция остаётся
+заданной стилями (`.topOverlayWrapper { top: 0 }` + `margin-top` панели), а
+коррекция применяется при следующем открытии переходом `false → true`. Ловушка
+фокуса и `onOpen` на маунте при этом отрабатывают штатно.
 
 ---
 
-## Поведение
+## Дизайн-токены
 
-### Состояния
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию — `src/components/DesignTokens/components/TopOverlay.ts`.
 
-| Имя | Тип | Назначение |
-|---|---|---|
-| `closing` | `boolean` | Анимация закрытия в процессе (`opened` стал `false`, ещё не отработал). |
-| `activeFocusTrap` | `boolean` | Включён ли FocusTrap (включается на open, отключается перед closing). |
-| `overlayWrapperTopPosition` | `number \| string` | Top-смещение wrapper'а (0 по умолчанию). |
-| `prevOpened` | `Ref<boolean>` | Для определения перехода `true → false` / `false → true`. |
-| `overlayWrapperRef` | `Ref<HTMLDivElement>` | Для расчёта `getBoundingClientRect`. |
-
-### `updateTopPosition`
-
-Вызывается в `handleOpen` и при `false → true`:
-1. Читает `--lightBox-screen-top` CSS-переменную из computed-style wrapper'а.
-2. Если `position.top < 0` (overlay выше viewport'а) — добавляет `Math.abs(position.top) + lightBoxTopPosition`.
-3. Иначе — вычитает `position.top - lightBoxTopPosition`.
-
-Цель: компенсировать прокрутку родителя/`LightBox`'а так, чтобы overlay
-встал у видимого верха.
-
-### Жизненный цикл
+```text
+TopOverlay.Background
+```
 
-- `opened: false → true`: `useEffect` зовёт `updateTopPosition`. `Overlay.onOpen` → `handleOpen` (внутри: `updateTopPosition` ещё раз + `setActiveFocusTrap(true)` + `onOpen?.()`).
-- `opened: true → false`: `setClosing(true)`. `Overlay.onClosing` (анимация началась) → `handleClosing` → `setActiveFocusTrap(false)`. `Overlay.onClose` (анимация завершилась) → `handleClose` → `setClosing(false)` + сброс `overlayWrapperTopPosition` + `onClose?.()`.
+Токен задаёт цвет маски. Панель намеренно рисуется без фона и тени
+(`background: none`, `box-shadow: none`) — фон даёт контент, который в неё кладут
+(обычно `Confirm`), поэтому токен `Overlay.Panel_Background`
+здесь не действует.
 
-### Структура
+Runtime CSS-переменная (задаётся компонентом через `style`, **не** дизайн-токен,
+в `DesignTokens` не попадает):
 
-```tsx
-<FocusTrap active={activeFocusTrap} focusTrapOptions={{allowOutsideClick: true, preventScroll: true, ...}}>
-    <div className={topOverlayWrapper {opened, closing}} ref={...} style={{top: ...}}>
-        <Overlay direction={TOP} opened={opened} onOpen={handleOpen} onClose={handleClose} onClosing={handleClosing}>
-            {(overlayProps) => (
-                <>
-                    <Overlay.Mask opened={overlayProps.opened} />
-                    <Overlay.Panel {...overlayProps}>{children}</Overlay.Panel>
-                </>
-            )}
-        </Overlay>
-    </div>
-</FocusTrap>
+```
+--triplex-next-runtime-TopOverlay-Top
 ```
 
+Кроме токена компонент читает служебные CSS-переменные `LightBox`:
+`--lightBox-screen-top` (в TS, для позиционирования), `--lightBox-screen-left` и
+`--lightBox-screen-width` (в LESS, для растяжки маски по экрану лайтбокса).
+
 ---
 
 ## Инварианты
 
-- **`FC, не forwardRef`** — ref не пробрасывается.
-- **`opened` контролируемый** — внутреннего state открытости нет. `setOpened` передаётся в `Overlay`, но это пустой no-op (`() => {}`); закрытие должно идти через внешний `opened={false}`.
-- **`direction = EOverlayDirection.TOP`** — зашито; для других направлений использовать `Overlay` напрямую.
-- **`FocusTrap` использует `focus-trap-react`** — `allowOutsideClick: true` и `preventScroll: true` зашиты как defaults; потребитель может переопределить через `focusTrapProps.focusTrapOptions`.
-- **`activeFocusTrap` отключается ДО `onClose`** (на `onClosing`) — чтобы анимация уехала с уже разблокированным фокусом.
-- **`updateTopPosition` читает `--lightBox-screen-top`** — связь с `LightBox`. Без `LightBox` переменная отсутствует → `0`.
-- **`Overlay.Mask` и `Overlay.Panel` рендерятся внутри одного render-prop'а** — порядок Mask → Panel зашит.
-- **Стили `.topOverlay`/`.topOverlayMask`/`.topOverlayPanel`/`.topOverlayWrapper` + `.opened`/`.closing`** — публичные CSS-классы (используются для управления visual transitions).
-- **Без явной валидации `children`** — потребитель отвечает за содержимое.
+- **`forwardRef` обязателен** — target ref'а — обёртка `.topOverlayWrapper`, а не
+  вложенный `Overlay`: именно на обёртке живут позиционирование и классы состояния.
+- Публичный API — `opened`, `onOpen`, `onClose`, `focusTrapProps`, `children`,
+  DOM-атрибуты обёртки и интерфейс `ITopOverlayProps`. Переименование или изменение
+  типов — breaking change.
+- `direction` жёстко задан как `EOverlayDirection.TOP` и не выносится в props —
+  на нём держатся стили панели и маски.
+- `setOpened` уходит в `Overlay` no-op'ом: компонент полностью управляемый,
+  состояние живёт у потребителя.
+- Монтирование сразу с `opened={true}` — рабочий сценарий: `OverlayBase` в этом
+  случае вызывает `onOpen` на маунте, ловушка фокуса активируется. Пересчёт
+  позиции на маунте намеренно пропускается (см. «Как работает позиционирование») —
+  не возвращать его, иначе панель уезжает за экран.
+- Позиция задаётся runtime-переменной `--triplex-next-runtime-TopOverlay-Top`, а
+  не inline-свойством `top`: inline-стили в компонентах запрещены. Не возвращать
+  `style={{ top }}` — правило проверяется ревью по `.coderabbit.yaml`.
+- Props потребителя во вложенный `Overlay` не уходят: `className` и `direction`
+  задаются ему явно, а `ref`, `className`, `style` и DOM-атрибуты остаются на
+  обёртке. Спреда `restProps` в `Overlay` больше нет — не возвращать.
+- Родительскому `LightBox` потребитель обязан передать `isTopOverlayOpened` —
+  иначе контролы лайтбокса не приглушатся под открытой панелью.
+- Классы `.topOverlayMask`, `.topOverlayPanel`, `.topOverlayWrapper` и `.topOverlay`
+  из `styles/TopOverlay.module.less` проверяются unit-тестами — не переименовывать
+  без синхронного обновления тестов.
+- `z-index` панели (`@z-index-step * 5`, 500) выбран так, чтобы панель была выше
+  `.lightBoxControls` и лоадера контента лайтбокса. Понижение вернёт баг, при
+  котором панель перекрывалась `LoaderScreen`.
 
 ---
 
 ## Accessibility
 
-- `FocusTrap` — фокус заперт внутри overlay при `activeFocusTrap = true`.
-- `allowOutsideClick: true` — клик вне overlay не блокируется (закрытие — на потребителе через external `opened`).
-- `preventScroll: true` — focus-trap не вызывает scroll при initial focus.
-- ARIA-роли (dialog/alertdialog) на overlay не выставляются — потребитель отвечает за разметку children (например, `<div role="dialog" aria-modal="true" aria-label>`).
+- Пока панель открыта, фокус удерживается внутри неё: `FocusTrapExtended`
+  активируется в `onOpen` (после анимации открытия, а при монтировании сразу
+  открытым — на маунте) и деактивируется в `onClosing` (в начале закрытия),
+  поэтому возврат фокуса на триггер происходит до того, как панель исчезнет.
+- `focusTrapOptions.preventScroll: true` задаётся по умолчанию — установка фокуса
+  внутри панели не прокручивает контент лайтбокса.
+- Роль диалога компонент на себя не берёт: `aria-modal="true"` и `role="dialog"`
+  уже стоят на корневом элементе `LightBox`, а панель рендерится внутри него.
+- Маска панели некликабельна — обработчик закрытия по клику вне контента не
+  вешается. Закрытие целиком на стороне потребителя: кнопки внутри панели или
+  `Confirm.Close` с `clickByEsc`.
+- Компонент не хардкодит тексты и `aria-label` — доступные имена задаёт потребитель
+  через содержимое панели.
 
 ---
 
 ## Связанные компоненты
 
-- `Overlay` (`Overlay.Mask`, `Overlay.Panel`) — основа.
-- `EOverlayDirection.TOP` — направление.
-- `LightBox` — типичный родитель (через CSS-переменную `--lightBox-screen-top`).
-- `focus-trap-react` (`FocusTrap`, `FocusTrapProps`) — npm-пакет для трапа фокуса.
+- `LightBox` — родитель. Реэкспортирует компонент как `LightBox.TopOverlay`,
+  задаёт CSS-переменные экрана, по `isTopOverlayOpened` приглушает свои контролы.
+- `Overlay` — база. `TopOverlay` рендерит `Overlay`, `Overlay.Mask` и
+  `Overlay.Panel`, а `ITopOverlayProps` берёт часть полей из `IOverlayProps`
+  через `Pick<>`.
+- `FocusTrapExtended` — обёртка над `focus-trap-react`, удерживающая фокус внутри
+  открытой панели; настраивается через `focusTrapProps`.
+- `Confirm` — типовое содержимое панели: подтверждение выхода из формы.
 
 ---
 
 ## Stories
 
 Основные истории: `stories/TopOverlay/TopOverlay.stories.tsx`
+Файлы примеров: `stories/TopOverlay/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивное управление `opened` в открытом лайтбоксе |
+| `Default` | `Default.tsx` | Минимальный сценарий: панель открывается кнопкой из шапки лайтбокса |
+| `WithConfirm` | `WithConfirm.tsx` | Production-like сценарий: подтверждение выхода из формы через `Confirm` |
+| `VisualTests` | `VisualTests.tsx` | Открытая панель поверх контента лайтбокса — состояние для скриншот-тестов |
+
+Стори `Default` и `WithConfirm` исключены из скриншот-тестов (`testRunner.skip`):
+лайтбокс в них открывается по клику, статичный снимок показал бы только кнопку.
+Визуальное покрытие даёт `VisualTests`, где панель отрисована открытой сразу —
+без `play`-функции, чтобы снимок не зависел от анимации выезда. Заодно эта стори
+сторожит сценарий «смонтирован открытым»: если вернуть пересчёт позиции на маунт,
+её baseline сразу разъедется.
 
 ---
 
@@ -142,4 +202,223 @@ extends Pick<IOverlayProps, "opened" | "onOpen" | "onClose">
 
 | Дата | Изменение |
 |---|---|
-| 2026-04-18 | Создан документ |
+| 2026-08-27 | `TopOverlay` переведён на `forwardRef`, `ITopOverlayProps` расширен атрибутами `<div>`: `ref`, `className`, `style` и DOM-атрибуты адресуют обёртку. Монтирование сразу с `opened={true}` запускает цикл открытия (ловушка фокуса, `onOpen`) — исправлено в `OverlayBase`, см. `Overlay-ai.md`; пересчёт позиции на маунте намеренно не делается. Рассчитанная позиция переехала из inline-`top` в runtime-переменную `--triplex-next-runtime-TopOverlay-Top`. |
+| 2026-08-25 | Создан документ. AI-рефакторинг: позиционирование вынесено в `utils.ts`, добавлен `displayName`, unit-тесты на расчёт позиции и ловушку фокуса; добавлены stories `stories/TopOverlay/` |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/TopOverlay/examples/Default.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Button,
+    EBodyPageType,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EHeaderPageType,
+    ETextSize,
+    ETitleSize,
+    FocusTrapUtils,
+    Gap,
+    LightBox,
+    Page,
+    Text,
+    Title,
+    TopOverlay,
+} from "@sberbusiness/triplex-next";
+
+export const Default = () => {
+    const [lightBoxOpened, setLightBoxOpened] = useState(false);
+    const [topOverlayOpened, setTopOverlayOpened] = useState(false);
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => setLightBoxOpened(true)}>
+                Открыть LightBox
+            </Button>
+
+            {lightBoxOpened ? (
+                <LightBox isLoading={false} isSideOverlayOpened={false} isTopOverlayOpened={topOverlayOpened}>
+                    <LightBox.Content isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Заявка на кредит
+                                        </Title>
+                                    </Page.Header.Title.Content>
+                                    <Page.Header.Title.Controls>
+                                        <Button
+                                            theme={EButtonTheme.GENERAL}
+                                            size={EComponentSize.MD}
+                                            onClick={() => setTopOverlayOpened(true)}
+                                        >
+                                            Открыть верхнюю панель
+                                        </Button>
+                                    </Page.Header.Title.Controls>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.FIRST}>
+                                <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                    Верхняя панель выезжает поверх контента лайтбокса и затемняет его маской.
+                                </Text>
+                            </Page.Body>
+                        </Page>
+
+                        <TopOverlay opened={topOverlayOpened} onOpen={() => {}} onClose={() => {}}>
+                            <div style={{ padding: 24, textAlign: "center" }}>
+                                <Title tag="h2" size={ETitleSize.H2}>
+                                    Верхняя панель
+                                </Title>
+                                <Gap size={16} />
+                                <Button
+                                    theme={EButtonTheme.SECONDARY}
+                                    size={EComponentSize.MD}
+                                    onClick={() => setTopOverlayOpened(false)}
+                                >
+                                    Закрыть панель
+                                </Button>
+                            </div>
+                        </TopOverlay>
+                    </LightBox.Content>
+
+                    <LightBox.Controls>
+                        <LightBox.Controls.Close title="Закрыть" onClick={() => setLightBoxOpened(false)} />
+                    </LightBox.Controls>
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
+
+### WithConfirm
+
+`stories/TopOverlay/examples/WithConfirm.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    Button,
+    Confirm,
+    EBodyPageType,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    EHeaderPageType,
+    ETextSize,
+    ETitleSize,
+    FocusTrapUtils,
+    LightBox,
+    Page,
+    Text,
+    Title,
+    TopOverlay,
+} from "@sberbusiness/triplex-next";
+
+/**
+ * Типовой сценарий: закрытие LightBox с несохранёнными данными подтверждается в верхней панели.
+ */
+export const WithConfirm = () => {
+    const [lightBoxOpened, setLightBoxOpened] = useState(false);
+    const [topOverlayOpened, setTopOverlayOpened] = useState(false);
+
+    const handleCloseLightBox = () => setTopOverlayOpened(true);
+    const handleCancel = () => setTopOverlayOpened(false);
+    const handleConfirm = () => {
+        setTopOverlayOpened(false);
+        setLightBoxOpened(false);
+    };
+
+    return (
+        <div>
+            <Button theme={EButtonTheme.SECONDARY} size={EComponentSize.MD} onClick={() => setLightBoxOpened(true)}>
+                Открыть LightBox
+            </Button>
+
+            {lightBoxOpened ? (
+                <LightBox isLoading={false} isSideOverlayOpened={false} isTopOverlayOpened={topOverlayOpened}>
+                    <LightBox.Content isLoading={false}>
+                        <Page>
+                            <Page.Header type={EHeaderPageType.FIRST} sticky>
+                                <Page.Header.Title>
+                                    <Page.Header.Title.Content>
+                                        <Title
+                                            tag="h1"
+                                            size={ETitleSize.H1}
+                                            tabIndex={-1}
+                                            // Устанавливает фокус на первый элемент при открытии LightBox.
+                                            {...{ [FocusTrapUtils.firstInteractionElementDataAttr]: true }}
+                                        >
+                                            Форма редактирования
+                                        </Title>
+                                    </Page.Header.Title.Content>
+                                </Page.Header.Title>
+                            </Page.Header>
+
+                            <Page.Body type={EBodyPageType.FIRST}>
+                                <Text tag="div" size={ETextSize.B3} type={EFontType.SECONDARY}>
+                                    Закройте лайтбокс крестиком — верхняя панель попросит подтвердить выход.
+                                </Text>
+                            </Page.Body>
+                        </Page>
+
+                        <TopOverlay opened={topOverlayOpened} onOpen={() => {}} onClose={() => {}}>
+                            <Confirm>
+                                <Confirm.Content>
+                                    <Confirm.Content.Title>Внимание</Confirm.Content.Title>
+                                    <Confirm.Content.SubTitle>
+                                        Несохранённые данные будут утеряны. Вы уверены, что хотите покинуть форму
+                                        редактирования?
+                                    </Confirm.Content.SubTitle>
+                                </Confirm.Content>
+                                <Confirm.Controls>
+                                    <Button
+                                        theme={EButtonTheme.SECONDARY}
+                                        size={EComponentSize.MD}
+                                        onClick={handleCancel}
+                                    >
+                                        Отмена
+                                    </Button>
+                                    <Button
+                                        theme={EButtonTheme.DANGER}
+                                        size={EComponentSize.MD}
+                                        onClick={handleConfirm}
+                                    >
+                                        Покинуть форму
+                                    </Button>
+                                </Confirm.Controls>
+                                <Confirm.Close
+                                    title="Закрыть"
+                                    // Закрыть по Esc, только если верхняя панель открыта.
+                                    clickByEsc={topOverlayOpened}
+                                    onClick={handleCancel}
+                                />
+                            </Confirm>
+                        </TopOverlay>
+                    </LightBox.Content>
+
+                    <LightBox.Controls>
+                        <LightBox.Controls.Close title="Закрыть" onClick={handleCloseLightBox} />
+                    </LightBox.Controls>
+                </LightBox>
+            ) : null}
+        </div>
+    );
+};
+```
+