@sberbusiness/triplex-next-mcp-server 0.24.0-beta2 → 1.40.0-beta

package/bundle/components/Dropdown.md

@@ -1,10 +1,21 @@
 ---
 component: Dropdown
-category: Overlays
-figma-node: ""
-figma-file: ""
-related: [DropdownList, DropdownListItem, Portal, OverlayBase, MobileView, SelectField, Suggest, DatePickerExtended]
-tokens: [Dropdown_Background, DropdownList_*, DropdownMobile_*, DropdownMobileList_*]
+category: Dropdown
+related: [ButtonDropdown, ButtonDropdownExtended, Portal, MobileView, OverlayBase, SelectField, SelectExtendedField, SuggestField, MultiselectField, TabsLine]
+tokens:
+  - --triplex-next-Dropdown-Background
+  - --triplex-next-Dropdown-Shadow
+  - --triplex-next-DropdownList-Color
+  - --triplex-next-DropdownList-Background_Default
+  - --triplex-next-DropdownList-Background_Active
+  - --triplex-next-DropdownList-Background_Selected
+  - --triplex-next-DropdownMobile-Backdrop
+  - --triplex-next-DropdownMobile-Header_Background
+  - --triplex-next-DropdownMobile-Content_Background
+  - --triplex-next-DropdownMobile-Footer_Background
+  - --triplex-next-DropdownMobile-Border_Color
+  - --triplex-next-DropdownMobileList-Active_Background
+  - --triplex-next-DropdownMobileList-Selected_Background
 stories: stories/Dropdown/Dropdown.stories.tsx
 version: "1.0"
 ---
@@ -13,421 +24,812 @@ version: "1.0"
 
 ## Назначение
 
-Основной overlay-компонент библиотеки для выпадающих меню. Renders в
-`Portal` на `document.body`, **автоматически разветвляется**:
-- **Desktop (`DropdownDesktop`)** — абсолютно позиционированный блок
-  рядом с `targetRef` (top/bottom auto-flip, left/right alignment,
-  ширина content/target/min-target), слушает window resize, document
-  scroll и ResizeObserver для reposition; блокирует внешний скролл
-  и клавиатурные события при открытии.
-- **Mobile (`DropdownMobile`)** — полноэкранный bottom-overlay
-  (`OverlayBase direction=BOTTOM`), с композицией
-  `Header`/`Body`/`Footer`/`Close`.
-
-Имеет внутренние compound-структуры:
-- **`DropdownList`** + `DropdownList.Item` — список с клавиатурной
-  навигацией (↑/↓, scroll-into-view, active-descendant через
-  `DropdownListContext`).
-- **`DropdownMobileList`** + `DropdownMobileListItem` — аналог для
-  мобильной ветки.
-- **`DropdownMobileInput` / `DropdownMobileMaskedInput`** —
-  специальные input'ы в header'е мобильного Dropdown'а.
-
-Используй когда: строишь любой выпадающий UI (Select, Suggest, Menu,
-DatePicker, custom dropdown). **В большинстве случаев** бери готовую
-обёртку (`SelectField`, `Suggest`, `DatePickerExtended`) — Dropdown
-прямо в UI встречается реже.
-Не используй как: абсолютный "tooltip" — бери `Tooltip`; bottom sheet
-без target'а — `OverlayBase`/`SideOverlay`; модалку — `LightBox`/
-`ModalWindow`.
+Выпадающее меню: рендерится через `Portal` в `document.body` и фиксированно позиционируется относительно управляющего элемента (`targetRef`). Содержимое произвольное — список опций, форма фильтра, любой блок. Если задан `mobileViewProps`, на мобильной ширине экрана (<768px) вместо десктопного меню открывается полноэкранная мобильная версия.
 
----
-
-## Файловая структура
-
-```text
-src/components/Dropdown/
-├── Dropdown.tsx                            # forwardRef, разветвление MobileView
-├── DropdownListContext.ts                  # Context { activeDescendant, setActiveDescendant }
-├── index.ts                                # Barrel
-├── desktop/
-│   ├── DropdownDesktop.tsx                 # forwardRef, positioning + scroll-block
-│   ├── DropdownList.tsx                    # FC, клавиатурная навигация, role="listbox"
-│   ├── DropdownListItem.tsx                # ListItem (role="option", active, selected)
-│   ├── enums.ts                            # EDropdownDirection/Alignment/Width
-│   └── index.ts
-├── mobile/
-│   ├── DropdownMobile.tsx                  # forwardRef, OverlayBase wrapper
-│   ├── DropdownMobileInner.tsx             # Внутренняя разметка (animation, overflow)
-│   ├── DropdownMobileHeader.tsx            # Header с title/controlButtons
-│   ├── DropdownMobileBody.tsx              # Scrollable body
-│   ├── DropdownMobileFooter.tsx            # Footer (sticky)
-│   ├── DropdownMobileClose.tsx             # Кнопка закрытия
-│   ├── DropdownMobileList.tsx              # List для мобильного
-│   ├── DropdownMobileListItem.tsx          # Item для мобильного
-│   ├── DropdownMobileInput.tsx             # Input в header
-│   ├── DropdownMobileMaskedInput.tsx       # MaskedInput в header
-│   ├── DropdownMobileLoader.tsx            # Loader
-│   └── index.ts
-└── styles/
-    ├── DropdownDesktop.module.less
-    ├── DropdownDesktopList.module.less
-    ├── DropdownMobile.module.less
-    ├── DropdownMobileInput.module.less
-    └── DropdownMobileMaskedInput.module.less
-```
+Используй когда: нужно показать всплывающий блок, привязанный к элементу-триггеру, и при этом выйти за пределы контейнеров с `overflow: hidden`.
+Не используй когда:
 
-Особенности:
-- **Portal → `document.body`** — всегда, независимо от desktop/mobile.
-- **Два параллельных дерева подкомпонентов** (desktop + mobile) с
-  похожими именами, но разными props и поведением.
-- **`data-tx`** на desktop и mobile root.
-- **`useToken().scopeClassName`** на DropdownDesktop — получает
-  namespace для CSS-переменных из ThemeProvider.
+- нужна готовая кнопка со списком действий — используй `ButtonDropdown`;
+- нужна кнопка с произвольным выпадающим блоком и закрытием по Escape / Tab / клику вне — используй `ButtonDropdownExtended` (он оборачивает `Dropdown` и добавляет эту логику);
+- нужно поле выбора значения — используй `SelectField`, `SelectExtendedField`, `SuggestField`, `MultiselectField`.
 
 ---
 
 ## Варианты и props
 
-### Root: `IDropdownProps extends IDropdownDesktopProps`
+`Dropdown` расширяет `IDropdownDesktopProps`, а тот — `React.HTMLAttributes<HTMLDivElement>`. Все неизвестные компоненту атрибуты попадают на корневой `<div>` десктопного меню.
+
+### Обязательные props
 
 | Prop | Тип | Описание |
 |---|---|---|
-| `opened` | `boolean` | Открыт/закрыт. Controlled. |
-| `setOpened` | `(opened: boolean) => void` | Сеттер, вызываемый из outside-click / mobile close. |
-| `targetRef` | `RefObject<HTMLElement>` | Target для позиционирования (desktop) / точка привязки жеста. |
-| `size` | `EComponentSize` | `MD` default. |
-| `direction` | `EDropdownDirection` | `AUTO` \| `BOTTOM` \| `TOP` — desktop. |
-| `alignment` | `EDropdownAlignment` | `LEFT` \| `RIGHT` — desktop. |
-| `width` | `EDropdownWidth` | `CONTENT` \| `TARGET` \| `MIN_TARGET` — desktop. |
-| `onOpen` | `() => void` | Callback при открытии (после mount). |
-| `onClose` | `() => void` | Callback при закрытии. |
-| `mobileViewProps` | `Omit<IDropdownMobileProps, "opened" \| "setOpened">` | **Если задан** — на мобильном открывается полноэкранный DropdownMobile. Если не задан — на мобильном тот же desktop-дропдаун. |
-| `...HTMLDivAttributes` | — | — |
-
-### `DropdownDesktop` props (также все → root Dropdown)
+| `opened` | `boolean` | Состояние открытости. Компонент полностью управляемый: собственного state открытости нет |
+| `setOpened` | `(opened: boolean) => void` | Изменение состояния открытости. Используется мобильной версией (закрытие по тапу на подложку); в десктопной версии не вызывается |
+| `targetRef` | `React.RefObject<HTMLElement>` | Ссылка на управляющий элемент. От его `getBoundingClientRect()` считается положение меню |
 
-Все выше + `style`, `className`, `...HTMLDivAttributes`.
+### Опциональные props
 
-### `DropdownMobile` props (через `mobileViewProps`)
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `size` | `EComponentSize` | `EComponentSize.MD` | Размер меню (влияет на радиус скругления). Размер списка задаётся отдельно — через `size` у `DropdownList` |
+| `direction` | `EDropdownDirection` | `AUTO` | Направление раскрытия. `AUTO` — вниз, а если снизу не хватает места и сверху места больше, то вверх |
+| `alignment` | `EDropdownAlignment` | `LEFT` | Выравнивание относительно управляющего элемента. Если меню выходит за границу экрана, оно смещается внутрь области просмотра |
+| `width` | `EDropdownWidth` | `CONTENT` | Расчёт ширины: по содержимому, равна ширине управляющего элемента (`TARGET`) или не уже неё (`MIN_TARGET`) |
+| `onOpen` | `() => void` | — | Вызывается при переходе `opened` в `true`. На первом рендере не вызывается |
+| `onClose` | `() => void` | — | Вызывается при переходе `opened` в `false`. На первом рендере не вызывается |
+| `mobileViewProps` | `Omit<IDropdownMobileProps, "opened" \| "setOpened">` | — | Включает адаптивный режим. `mobileViewProps.children` заменяет `children` в мобильной версии; если не задан, используется `children` |
+| `className` | `string` | — | Дополнительный класс. В десктопной версии — на корневом `<div>` меню, в мобильной — на wrapper'е оверлея |
+| `style` | `React.CSSProperties` | — | Мержится **поверх** вычисленного положения, поэтому им можно перебить `top` / `left` / `width` |
 
-- `children` (может быть разный от desktop).
-- `className`.
-- `...HTMLDivAttributes`.
-- (opened, setOpened форвардятся из Dropdown.)
+### Список опций — `DropdownList` и `DropdownList.Item`
 
-### `DropdownList` compound
+`Dropdown` не знает про списки: клавиатурную навигацию и роли `listbox` / `option` добавляет `DropdownList`.
 
-| Prop | Тип | Default | Описание |
+| Prop `DropdownList` | Тип | По умолчанию | Описание |
 |---|---|---|---|
-| `dropdownOpened` | `boolean` | — | Необходим для подписки на keydown только когда открыто. |
-| `listRef` | `RefObject<HTMLDivElement>` | — | Ссылка на скролл-контейнер. |
-| `loading` | `boolean` | — | Добавляет loader-item в конец списка. |
-| `size` | `EComponentSize` | `MD` | Влияет на классы. |
-| `children` | `DropdownList.Item` | — | Только Item'ы. |
-
-Статик: `DropdownList.Item = DropdownListItem`.
+| `dropdownOpened` | `boolean` | — | Обязательный. Пока `true`, список слушает `ArrowUp` / `ArrowDown` на документе |
+| `size` | `EComponentSize` | `MD` | Размер списка. Пробрасывается в каждый `DropdownList.Item` |
+| `loading` | `boolean` | `false` | Добавляет в конец списка служебный элемент с лоадером |
+| `listRef` | `React.RefObject<HTMLDivElement>` | — | Внешняя ссылка на контейнер списка. Если не передана, используется внутренняя |
 
-### Enums
-
-**`EDropdownDirection`:**
-- `AUTO = "auto"` — сначала пытается снизу, если не влезает — сверху, иначе снизу.
-- `BOTTOM = "bottom"` — принудительно снизу.
-- `TOP = "top"` — принудительно сверху.
+| Prop `DropdownList.Item` | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `id` | `string` | — | Обязательный и уникальный: используется как значение `aria-activedescendant` |
+| `onSelect` | `() => void` | — | Выбор элемента: по клику и по клавишам из `keyCodesForSelection`, когда элемент активен |
+| `selected` | `boolean` | `false` | Элемент выбран: подсветка + `aria-selected`. При открытии меню активным становится именно он |
+| `active` | `boolean` | — | Активен при навигации с клавиатуры. **Проставляется самим `DropdownList`** — снаружи задавать не нужно |
+| `keyCodesForSelection` | `number[]` | `[SPACE, ENTER]` | Числовые `keyCode` клавиш выбора |
+| `showNotificationIcon` | `boolean` | `false` | Значок новых уведомлений (`Badge.Dot`) в углу элемента |
 
-**`EDropdownAlignment`:**
-- `LEFT = "left"` — левая граница dropdown'а = левая target'а.
-- `RIGHT = "right"` — правая граница dropdown'а = правая target'а.
+### Ограничения
 
-**`EDropdownWidth`:**
-- `CONTENT = "content"` — по ширине контента.
-- `TARGET = "target"` — `width = targetRect.width`.
-- `MIN_TARGET = "min-target"` — `minWidth = targetRect.width`.
+- `DropdownList` в качестве `children` принимает только `DropdownList.Item` — остальные узлы рендерятся как есть, но не участвуют в навигации и нумерации.
+- `DropdownList` — не `forwardRef`-компонент: ссылка на контейнер списка передаётся через prop `listRef`.
+- Закрытие по `Escape`, `Tab` и клику вне меню `Dropdown` **не реализует**. Это ответственность потребителя либо `ButtonDropdownExtended`.
+- Мобильная версия строится на `OverlayBase` и имеет собственный набор субкомпонентов (`DropdownMobileHeader`, `DropdownMobileBody`, `DropdownMobileList` и т.д.), которые передаются через `mobileViewProps.children`.
 
 ---
 
-## Ключевые особенности реализации
-
-### Portal → document.body
+## Дизайн-токены
 
-```tsx
-<Portal container={document.body}>...</Portal>
 ```
-
-Dropdown всегда рендерится в `body`, чтобы не зависеть от `overflow:hidden`
-родителей и z-index-стеков. Минус: вычисление позиции в window-координатах,
-а не относительно родителя.
-
-### MobileView разветвление — только при `mobileViewProps`
-
-```tsx
-{mobileViewProps ? (
-    <MobileView fallback={<DropdownDesktop .../>}>
-        <DropdownMobile>{mobileViewProps?.children || children}</DropdownMobile>
-    </MobileView>
-) : (
-    <DropdownDesktop>{children}</DropdownDesktop>
-)}
+--triplex-next-Dropdown-Background
+--triplex-next-Dropdown-Shadow
+--triplex-next-DropdownList-Color
+--triplex-next-DropdownList-Background_Default
+--triplex-next-DropdownList-Background_Active
+--triplex-next-DropdownList-Background_Selected
+--triplex-next-DropdownMobile-Backdrop
+--triplex-next-DropdownMobile-Header_Background
+--triplex-next-DropdownMobile-Content_Background
+--triplex-next-DropdownMobile-Footer_Background
+--triplex-next-DropdownMobile-Border_Color
+--triplex-next-DropdownMobileList-Active_Background
+--triplex-next-DropdownMobileList-Selected_Background
 ```
 
-**Если `mobileViewProps` не передан — даже на мобильном будет
-DropdownDesktop.** Это разумно для меню (просто маленький dropdown),
-но для полноэкранных селектов требуется явный `mobileViewProps`.
-
-### Desktop: позиционирование через `getBoundingClientRect`
+`DropdownMobileInput` дополнительно использует токены поля ввода: `--triplex-next-FormField-Input_Color_Default`, `--triplex-next-FormField-Placeholder_Color`.
 
-```ts
-const setPosition = useCallback(() => {
-    const dropdownRect = dropdownRef.current.getBoundingClientRect();
-    const targetRect = targetRef.current.getBoundingClientRect();
-    // ...
-    setStyleState(css); // { top/bottom, left, width?, minWidth? }
-}, [...]);
-```
+---
 
-**`direction=AUTO`:** сначала пробует low (bottom), если не влезает
-→ top, если тоже не влезает → bottom (скролл). 4px offset между
-target и dropdown (`offset = 4`).
+## Инварианты
 
-**`alignment=LEFT`:** dropdown.left = target.left, если влезает вправо;
-иначе target.right - dropdown.width (с `Math.max(0, ...)`).
-**`alignment=RIGHT`:** зеркально.
+- `forwardRef` на `Dropdown`, `DropdownDesktop`, `DropdownListItem` и всех мобильных субкомпонентах — не убирать. Ref `Dropdown` указывает на корневой `<div>` десктопного меню, а в мобильном режиме — на контентный `<div>` (`.dropdownMobile`).
+- Меню в закрытом состоянии не рендерит ничего (`DropdownDesktop` возвращает `null`) — на это опираются потребители, монтирующие `Dropdown` безусловно.
+- Компонент управляемый: не добавлять внутренний state открытости, иначе сломается контракт `opened` / `setOpened`.
+- `Dropdown` рендерится в `document.body` через `Portal`. Смена контейнера портала — breaking change для потребителей, которые ищут меню в DOM.
+- Публичные barrel-экспорты `src/components/Dropdown/index.ts`, `desktop/index.ts`, `mobile/index.ts` должны сохраняться: компонент используется внутри `ButtonDropdown`, `SelectField`, `SelectExtendedField`, `SuggestField`, `MultiselectField`, `TabsLine`, `DatePickerExtended`, `Chip`, `List`.
+- `DropdownList` проставляет дочерним элементам `active`, `size`, `ref`, `onMouseOver` и `onMouseOut` через `cloneElement` — эти props у `DropdownList.Item` нельзя считать «пользовательскими».
+- Пока десктопное меню открыто, на `document.body` висит класс блокировки скролла, а на документе — обработчики `wheel` и `keydown`. Снятие обработчиков в cleanup эффекта обязательно.
+- Числовой формат `keyCodesForSelection` (`number[]`, а не `KeyboardEvent.code`) — часть публичного API.
+- Хелперы из `desktop/utils.ts` внутренние: не экспортировать их через barrel.
+- У мобильного списка (`DropdownMobileList`) нет собственного класса-зацепки — в отличие от десктопного `.dropdownDesktopList`. Это осознанно: в `styles/DropdownMobile.module.less` такого класса никогда не было, стилизуются только элементы списка и лоадер. Корневой `<div>` получает только `className` снаружи; не добавлять пустое правило в LESS ради зацепки без задачи.
+- `listRef` у `DropdownList` и `setActiveDescendant` из `DropdownListContext` должны быть стабильными между рендерами (ref из `useRef`, сеттер из `useState`). Нестабильные значения переподписывают клавиатурный обработчик и сбрасывают `aria-activedescendant` на каждый рендер.
 
-### Desktop: блокировка скролла и клавиш при открытии
+---
 
-```ts
-document.addEventListener("wheel", wheelHandler, { passive: false });
-document.addEventListener("keydown", keyDownHandler);
-document.body.classList.add(overflowHiddenClassName);
-```
+## Accessibility
 
-- **`wheelHandler`:** preventDefault колеса, если target не внутри
-  dropdown'а. Эффект: страница не скроллится, но dropdown (если в нём
-  есть scroll) — скроллится.
-- **`keyDownHandler`:** preventDefault на Space/PageUp/PageDown/End/Home/
-  Arrows, **но только если `event.target === document.body`**. Это
-  защита от "прыжка страницы", когда ни одно поле не сфокусировано.
-  Если фокус в input'е — клавиши работают нормально.
-- **`body.classList.add(overflowHiddenClassName)`:** визуально
-  "замораживает" страницу.
-
-**Эффект отписки:** `removeEventListener` + `classList.remove` —
-обязательны. Memory leak и залипший overflow без них.
-
-### Desktop: ResizeObserver + scroll/resize listeners
-
-```ts
-const observer = new ResizeObserver(setPosition);
-observer.observe(dropdownRef.current);
-observer.observe(targetRef.current);
-// + document.addEventListener("scroll", updatePosition, true);
-// + window.addEventListener("resize", updatePosition);
-```
+- `DropdownList` рендерит контейнер с `role="listbox"`, `DropdownList.Item` — `role="option"` и `aria-selected`. Мобильные `DropdownMobileList` / `DropdownMobileListItem` — те же роли.
+- Клавиатурная навигация по списку: `ArrowDown` / `ArrowUp` перемещают активный элемент по кругу и прокручивают контейнер к нему, `Enter` / `Space` (или клавиши из `keyCodesForSelection`) вызывают `onSelect` активного элемента. Обработчики висят на `document`, пока `dropdownOpened === true`.
+- При открытии активным становится элемент с `selected`, иначе первый; список прокручивается к нему.
+- Пока меню открыто, `DropdownDesktop` гасит клавиши прокрутки страницы (`Space`, `PageUp`, `PageDown`, `Home`, `End`, стрелки), но только если фокус на `document.body`.
+- `aria-activedescendant` компонент сам на триггер **не выставляет**: `DropdownList` публикует id активного элемента через `DropdownListContext.setActiveDescendant`, а связать его с триггером должен потребитель (см. `SelectField`, `ButtonDropdown`). Контекст сбрасывается при закрытии и размонтировании списка.
+- Потребитель отвечает за атрибуты триггера: `aria-haspopup`, `aria-expanded`, `aria-controls`, `aria-activedescendant`.
+- Компонент не хардкодит текстовые строки: `aria-label` для `DropdownMobileClose` и заголовки мобильной версии передаёт потребитель (библиотека мультиязычная).
+- **Известное ограничение:** при уходе курсора с элемента списка (`onMouseOut`) подсветка снимается, но `activeDescendant` в контексте не сбрасывается — `aria-activedescendant` на триггере продолжает указывать на последний наведённый пункт до следующей смены активного элемента или закрытия меню. Поведение унаследованное; его исправление меняет наблюдаемый контракт для `SelectField` / `ButtonDropdown` / `SuggestField` и требует отдельного решения.
+- Фокус компонент не перехватывает и не возвращает. Если нужен focus trap, его добавляет потребитель (так делает `MultiselectField.Dropdown`).
 
-**Три источника изменений:**
-1. **ResizeObserver** — dropdown или target изменили размер (загрузка
-   данных).
-2. **`scroll` с `capture=true`** — любой предок target'а скроллится
-   → dropdown должен следовать.
-3. **`resize`** — окно поменяло размер.
+---
 
-`updatePosition = () => setTimeout(setPosition)` — пересчёт в следующем
-кадре, чтобы дать браузеру layout'нуть.
+## Связанные компоненты
 
-### Desktop: `{opacity: 0}` при закрытии
+Отдельного AI.md пока нет ни у одного субкомпонента семейства — они описаны здесь.
+Это область задачи TRI-35 («Scope: только Dropdown; соседние экспортируемые компоненты
+из `src/components/Dropdown/` — отдельные задачи»), а не вывод по критериям
+`docs/ai/CONTEXT.md` → «Когда создавать `{ComponentName}-ai.md`». По этим критериям
+`DropdownList`, `DropdownListItem`, `DropdownMobile` и `DropdownMobileListItem`
+заслуживают собственных AI.md и отдельных строк в `docs/ai/ROADMAP.md` — как это
+сделано для семейства `List`. Решение о том, заводить ли их, за владельцем репозитория.
 
-Первый рендер — `{opacity: 0}`, пока `setPosition` не отработал.
-После первого layout — setStyleState с рассчитанными top/left/width.
-Это **анти-flicker трюк**: если dropdown-ом монтируется и **рендерится
-первым кадром в (0, 0)**, юзер увидит скачок. `opacity: 0` скрывает
-эту микросекунду.
+**Десктоп (`src/components/Dropdown/desktop/`):**
 
-### Desktop: `if (!opened) return null`
+- `DropdownDesktop` — десктопное меню: позиционирование, блокировка скролла страницы. `Dropdown` рендерит его напрямую или как fallback `MobileView`.
+- `DropdownList` — контейнер списка с клавиатурной навигацией, `role="listbox"`. Статическое свойство `DropdownList.Item`.
+- `DropdownListItem` — элемент списка, `role="option"`, выбор мышью и клавиатурой.
 
-При закрытии компонент **размонтируется**. Это важно:
-- Не платим за event listeners при закрытом dropdown'е.
-- Каждое открытие — новый цикл позиционирования.
-- **Потеря внутреннего state** (scroll position, focus) при закрытии.
+**Мобильная версия (`src/components/Dropdown/mobile/`):**
 
-### Desktop: `useToken().scopeClassName`
+- `DropdownMobile` — полноэкранный оверлей снизу на базе `OverlayBase`, блокирует скролл body.
+- `DropdownMobileInner` — внутренняя разметка оверлея: подложка и контент с анимацией открытия/закрытия.
+- `DropdownMobileHeader` — шапка со слотом `controlButtons` (тип `IDropdownMobileHeaderProps` объявлен в `src/components/Tooltip/types.ts`).
+- `DropdownMobileBody` — скроллируемое тело.
+- `DropdownMobileFooter` — футер для кнопок.
+- `DropdownMobileList` / `DropdownMobileListItem` — список и элемент списка мобильной версии.
+- `DropdownMobileClose` — кнопка закрытия (обёртка над `ButtonIcon`).
+- `DropdownMobileLoader` — лоадер для шапки (обёртка над `LoaderSmall`).
+- `DropdownMobileInput` / `DropdownMobileMaskedInput` — поля ввода для шапки (второе — обёртка над `FormFieldMaskedInput` с `presets`).
 
-```ts
-const { scopeClassName } = useToken();
-const classNames = clsx(styles.dropdownDesktop, sizeToClassNameMap[size], scopeClassName, className);
-```
+**Общее:**
 
-**`scopeClassName` нужен**, потому что `Portal` выносит dropdown в
-`body`, и ThemeProvider-scope родителя пропадает. `scopeClassName`
-возвращает класс, под которым активна текущая тема, — dropdown его
-тянет явно.
-
-**Без этого** dropdown получит дефолтную (светлую) тему,
-независимо от того, что родитель в `<ThemeProvider theme="dark">`.
-
-### Dropdown.onOpen/onClose — effect с `mountedRef`
-
-```ts
-const mountedRef = useRef(false);
-useEffect(() => {
-    if (!mountedRef.current) {
-        mountedRef.current = true;
-    } else if (opened) {
-        onOpen?.();
-    } else {
-        onClose?.();
-    }
-}, [opened]);
-```
+- `DropdownListContext` — контекст `activeDescendant` / `setActiveDescendant` между списком и триггером.
+- `Portal`, `MobileView`, `OverlayBase` — инфраструктура рендера.
+- `ButtonDropdown`, `ButtonDropdownExtended` — готовые кнопки с выпадающим блоком поверх `Dropdown`.
 
-**Пропуск первого вызова** (initial mount) — чтобы `onOpen`/`onClose`
-срабатывали только на **реальное** переключение, а не на initial
-`opened=false`. Если удалить `mountedRef` — `onClose` вызовется сразу
-после mount.
+---
 
-### DropdownList: keyboard navigation + activeDescendant
+## Stories
 
-```ts
-// Esc/Arrows на document, preventDefault:
-if (keyCode === ARROW_DOWN) nextIndex = (currentIndex + 1) % childrenLength;
-if (keyCode === ARROW_UP) nextIndex = (currentIndex - 1 + childrenLength) % childrenLength;
-```
+Основные истории: `stories/Dropdown/Dropdown.stories.tsx`
+Файлы примеров: `stories/Dropdown/examples/`
 
-**Wrap-around** — стрелки зацикливают навигацию (вниз с последнего →
-на первый, вверх с первого → на последний).
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `Playground.tsx` | Интерактивный контроль `size`, `direction`, `alignment`, `width` и загрузки списка |
+| `Default` | `Default.tsx` | Базовый сценарий: кнопка-триггер, список опций, выбор значения |
+| `Sizes` | `Sizes.tsx` | Размеры SM / MD / LG |
+| `Directions` | `Directions.tsx` | Раскрытие вниз (`BOTTOM`) и вверх (`TOP`) |
+| `Alignments` | `Alignments.tsx` | Выравнивание по левому и правому краю управляющего элемента |
+| `Widths` | `Widths.tsx` | `CONTENT` / `TARGET` / `MIN_TARGET` |
+| `Loading` | `Loading.tsx` | Подгрузка опций: элемент с лоадером в конце списка |
+| `WithSelectedOption` | `WithSelectedOption.tsx` | Выбранная опция подсвечена и активна при открытии |
+| `MobileView` | `MobileView.tsx` | Адаптивный режим: `mobileViewProps` и мобильные субкомпоненты |
+| `VisualTests` | `VisualTests.tsx` | Длинный список со скроллом, значок уведомления, произвольный контент вместо списка |
 
-**`scrollContainerToItem(nextIndex)`** — виртуально-скроллит контейнер,
-чтобы активный элемент был в видимой области, с 4px offset.
+---
 
-**`DropdownListContext.setActiveDescendant(id)`** — контекст для
-target'а (input/button), который использует `aria-activedescendant=id`
-для screen reader'ов. Target вне `DropdownList`, но в родительском
-контексте.
+## История изменений
 
-**Initial active:** при открытии — ищет первый `selected` child
-(`child.props.selected === true`), если не найдено — ставит active=0.
-Скроллит в начало при отсутствии selected.
+| Дата | Изменение |
+|---|---|
+| 2026-07-31 | Создан документ AI-ready для `Dropdown` (TRI-35). |
+| 2026-07-31 | AI-рефакторинг: `DropdownList` больше не создаёт ref через `React.createRef()` в рендере (из-за этого автопрокрутка к активному элементу не работала), сброс активного элемента при открытии переведён на корректировку state в рендере вместо `setState` в эффекте, прокрутка вынесена в `desktop/utils.ts`, в `DropdownListItem` починен устаревший обработчик клавиатуры, в `Dropdown` актуальные `onOpen` / `onClose` хранятся в ref. Публичный API не изменён. Добавлены unit-тесты (109 кейсов) и stories. |
+| 2026-07-31 | Правки по ревью PR #491: эффект `onOpen` / `onClose` в `Dropdown` сравнивает предыдущее значение `opened` вместо флага «смонтирован» — колбэки больше не срабатывают ложно при двойном маунте в React 18 StrictMode (регрессионный тест `__tests__/Dropdown.strictMode.test.tsx`). Документационные stories стартуют закрытыми и раскрываются через `play`. Сброс активного элемента `DropdownList` сделан симметричным: при закрытии подсветка снимается вместе с `activeDescendant`. |
 
-### DropdownList: cloneElement + MouseOver/MouseOut
+---
 
-Каждый child клонируется с `active={activeListItemIndex === index}` +
-`onMouseOver/Out` переопределены — move mouse на item тоже меняет
-активный.
+## Примеры использования
 
-**Dual navigation:** клавиатура и мышь вместе работают. Движение
-мыши "отбрасывает" клавиатурный активный индекс и синхронизирует с
-местом курсора.
+### Default
 
-### Mobile: OverlayBase + body-overflow block
+`stories/Dropdown/examples/Default.tsx`
 
 ```tsx
-<OverlayBase setOpened={setOpened} opened={opened} direction={EOverlayDirection.BOTTOM}>
-    {(props) => <DropdownMobileInner {...props} ... />}
-</OverlayBase>
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownWidth,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "default-option-1", label: "Значение 1" },
+    { id: "default-option-2", label: "Значение 2" },
+    { id: "default-option-3", label: "Значение 3" },
+];
+
+export const Default = () => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+    const [selectedId, setSelectedId] = useState<string>();
+
+    const handleSelect = (id: string) => {
+        setSelectedId(id);
+        setOpened(false);
+    };
+
+    return (
+        <div>
+            <Button
+                theme={EButtonTheme.SECONDARY}
+                size={EComponentSize.MD}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={EComponentSize.MD}
+                width={EDropdownWidth.MIN_TARGET}
+            >
+                <DropdownList dropdownOpened={opened} size={EComponentSize.MD}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item
+                            key={option.id}
+                            id={option.id}
+                            selected={option.id === selectedId}
+                            onSelect={() => handleSelect(option.id)}
+                        >
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
 ```
 
-**OverlayBase** — базовый "шторка" оверлей с анимацией bottom-up,
-swipe-to-close и overlay-backdrop. DropdownMobile — лишь стайлинг
-поверх.
-
-**`document.body.classList.add(dropdownMobileBodyOverflowClassName)`**
-— блокирует скролл body, пока открыт мобильный dropdown.
+### Sizes
 
-### `data-tx={process.env.npm_package_version}` — на desktop и mobile root
+`stories/Dropdown/examples/Sizes.tsx`
 
-Стандарт. Оба разветвления ставят `data-tx`. Не удалять.
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownDirection,
+    EDropdownWidth,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "option-1", label: "Значение 1" },
+    { id: "option-2", label: "Значение 2" },
+    { id: "option-3", label: "Значение 3" },
+];
+
+const SIZES = Object.values(EComponentSize);
+
+interface ISizeItemProps {
+    size: EComponentSize;
+}
+
+const SizeItem = ({ size }: ISizeItemProps) => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{size.toUpperCase()}</div>
+            <Button
+                theme={EButtonTheme.SECONDARY}
+                size={size}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={size}
+                direction={EDropdownDirection.BOTTOM}
+                width={EDropdownWidth.MIN_TARGET}
+            >
+                <DropdownList dropdownOpened={opened} size={size}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item
+                            key={option.id}
+                            id={`${size}-${option.id}`}
+                            onSelect={() => setOpened(false)}
+                        >
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Sizes = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "180px" }}>
+        {SIZES.map((size) => (
+            <SizeItem key={size} size={size} />
+        ))}
+    </div>
+);
+```
 
----
+### Directions
 
-## Инварианты
+`stories/Dropdown/examples/Directions.tsx`
 
-- **`opened` + `setOpened`** — обязательная пара (controlled).
-- **`targetRef` обязателен** — без него desktop не может позиционироваться.
-  Если target недоступен — dropdown не откроется корректно.
-- **Portal → document.body всегда** — не менять на inline.
-- **`scopeClassName` из `useToken()`** — обязателен на DropdownDesktop.
-  Без него Portal-теряет контекст темы.
-- **Desktop `if (!opened) return null`** — компонент размонтируется,
-  не скрывается через CSS. Не менять.
-- **`data-tx`** на desktop и mobile root.
-- **`mobileViewProps` — необязательный**. Если не задан — мобильная
-  версия использует DropdownDesktop.
-- **`DropdownList.Item`** — единственный допустимый child (технически
-  клонирование игнорирует не-ReactElement'ы, но API об этом).
-- **Wrap-around navigation в DropdownList** — поведение, не менять.
-- **`mountedRef` в Dropdown.tsx** — skip first effect fire, не удалять.
-- **`wheelHandler` с `passive: false`** — обязательно для preventDefault.
-- **`keyDownHandler` фильтрует по `event.target === document.body`** —
-  не preventDefault'ить клавиши в input'ах.
-- **`overflowHiddenClassName` add/remove на body** — аккуратно
-  отписываться.
-- **Selected→active логика при открытии DropdownList** — работает
-  как "scroll to selected". Не сломать.
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownDirection,
+    EDropdownWidth,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "option-1", label: "Значение 1" },
+    { id: "option-2", label: "Значение 2" },
+    { id: "option-3", label: "Значение 3" },
+];
+
+const DIRECTIONS = [EDropdownDirection.BOTTOM, EDropdownDirection.TOP];
+
+interface IDirectionItemProps {
+    direction: EDropdownDirection;
+}
+
+const DirectionItem = ({ direction }: IDirectionItemProps) => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{direction.toUpperCase()}</div>
+            <Button
+                theme={EButtonTheme.SECONDARY}
+                size={EComponentSize.MD}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={EComponentSize.MD}
+                direction={direction}
+                width={EDropdownWidth.MIN_TARGET}
+            >
+                <DropdownList dropdownOpened={opened} size={EComponentSize.MD}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item
+                            key={option.id}
+                            id={`${direction}-${option.id}`}
+                            onSelect={() => setOpened(false)}
+                        >
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Directions = () => (
+    // Отступы резервируют место для выпадающего меню сверху и снизу от управляющего элемента.
+    <div style={{ display: "flex", gap: "40px", padding: "200px 0" }}>
+        {DIRECTIONS.map((direction) => (
+            <DirectionItem key={direction} direction={direction} />
+        ))}
+    </div>
+);
+```
 
----
+### Alignments
 
-## Accessibility
+`stories/Dropdown/examples/Alignments.tsx`
 
-- **`role="listbox"`** на DropdownList; `role="option"` на DropdownListItem
-  (последнее в соответствующем компоненте).
-- **`aria-activedescendant`** — target (input/button) должен
-  выставлять его из `DropdownListContext.activeDescendant`. Screen
-  reader объявляет активный option.
-- **Клавиатура:**
-  - Esc — закрыть (обрабатывается потребителем, Dropdown сам не ловит).
-  - ↑/↓ — навигация по DropdownList.
-  - Enter — выбор (DropdownListItem сам обрабатывает).
-  - Tab — не работает внутри (DropdownList не в tab-order).
-- **Mobile:** OverlayBase + swipe-to-close. Focus-trap через OverlayBase.
-- **`role="dialog" aria-modal="true"`** — не проставляется автоматически,
-  потребитель может передать через `...rest` (как делает
-  `DatePickerExtendedDropdown`).
-- **Body-scroll lock** — предотвращает "прыжки" при скролле на
-  мобильных.
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownAlignment,
+    EDropdownDirection,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "option-1", label: "Значение с длинным названием" },
+    { id: "option-2", label: "Значение 2" },
+    { id: "option-3", label: "Значение 3" },
+];
+
+const ALIGNMENTS = Object.values(EDropdownAlignment);
+
+interface IAlignmentItemProps {
+    alignment: EDropdownAlignment;
+}
+
+const AlignmentItem = ({ alignment }: IAlignmentItemProps) => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <div>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{alignment.toUpperCase()}</div>
+            <Button
+                theme={EButtonTheme.SECONDARY}
+                size={EComponentSize.MD}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={EComponentSize.MD}
+                alignment={alignment}
+                direction={EDropdownDirection.BOTTOM}
+            >
+                <DropdownList dropdownOpened={opened} size={EComponentSize.MD}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item
+                            key={option.id}
+                            id={`${alignment}-${option.id}`}
+                            onSelect={() => setOpened(false)}
+                        >
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Alignments = () => (
+    // Отступ слева даёт место выпадающему меню при выравнивании по правому краю управляющего элемента.
+    <div style={{ display: "flex", flexDirection: "column", gap: "180px", paddingLeft: "120px" }}>
+        {ALIGNMENTS.map((alignment) => (
+            <AlignmentItem key={alignment} alignment={alignment} />
+        ))}
+    </div>
+);
+```
 
----
+### Widths
 
-## Дизайн-токены
+`stories/Dropdown/examples/Widths.tsx`
 
-Группы в `src/components/DesignTokens/components/`:
-- **`Dropdown.ts`** — `--triplex-next-Dropdown-Background` + border/shadow
-- **`DropdownList.ts`** — hover/active/selected для item'ов
-- **`DropdownMobile.ts`** — фон, border-radius, header/footer
-- **`DropdownMobileList.ts`** — item'ы в мобильной ветке
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownDirection,
+    EDropdownWidth,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "option-1", label: "Значение 1" },
+    { id: "option-2", label: "Значение 2" },
+    { id: "option-3", label: "Значение 3" },
+];
+
+const WIDTHS = Object.values(EDropdownWidth);
+
+interface IWidthItemProps {
+    width: EDropdownWidth;
+}
+
+const WidthItem = ({ width }: IWidthItemProps) => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <div style={{ width: "280px" }}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>{width.toUpperCase()}</div>
+            <Button
+                block
+                theme={EButtonTheme.SECONDARY}
+                size={EComponentSize.MD}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={EComponentSize.MD}
+                width={width}
+                direction={EDropdownDirection.BOTTOM}
+            >
+                <DropdownList dropdownOpened={opened} size={EComponentSize.MD}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item
+                            key={option.id}
+                            id={`${width}-${option.id}`}
+                            onSelect={() => setOpened(false)}
+                        >
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
+
+export const Widths = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "180px" }}>
+        {WIDTHS.map((width) => (
+            <WidthItem key={width} width={width} />
+        ))}
+    </div>
+);
+```
 
----
+### Loading
 
-## Связанные компоненты
+`stories/Dropdown/examples/Loading.tsx`
 
-- `Portal` (`src/components/Portal`) — рендер в body.
-- `MobileView` (`src/components/MobileView`) — разветвление.
-- `OverlayBase` (`src/components/Overlay`) — база для мобильного.
-- `useToken` / `ThemeProvider` — scopeClassName.
-- `DropdownList` / `DropdownListItem` — compound-список (desktop).
-- `DropdownMobile*` — mobile compound-семейство.
-- Основные обёртки: `SelectField`, `SelectExtendedField`, `Suggest`,
-  `SuggestField`, `DatePickerExtended`, `MultiselectField`.
-- `createSizeToClassNameMap` — утилита для size-класса.
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownDirection,
+    EDropdownWidth,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "loading-option-1", label: "Значение 1" },
+    { id: "loading-option-2", label: "Значение 2" },
+];
+
+export const Loading = () => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+
+    return (
+        <div>
+            <Button
+                theme={EButtonTheme.SECONDARY}
+                size={EComponentSize.MD}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={EComponentSize.MD}
+                direction={EDropdownDirection.BOTTOM}
+                width={EDropdownWidth.MIN_TARGET}
+            >
+                <DropdownList loading dropdownOpened={opened} size={EComponentSize.MD}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item key={option.id} id={option.id} onSelect={() => setOpened(false)}>
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
+```
 
----
+### WithSelectedOption
 
-## Stories
+`stories/Dropdown/examples/WithSelectedOption.tsx`
 
-`stories/Dropdown/Dropdown.stories.tsx`
-Примеры: `stories/Dropdown/examples/`
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownDirection,
+    EDropdownWidth,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "selected-option-1", label: "Значение 1" },
+    { id: "selected-option-2", label: "Значение 2" },
+    { id: "selected-option-3", label: "Значение 3" },
+];
+
+export const WithSelectedOption = () => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+    const [selectedId, setSelectedId] = useState("selected-option-2");
+
+    const handleSelect = (id: string) => {
+        setSelectedId(id);
+        setOpened(false);
+    };
+
+    return (
+        <div>
+            <Button
+                theme={EButtonTheme.SECONDARY}
+                size={EComponentSize.MD}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={EComponentSize.MD}
+                direction={EDropdownDirection.BOTTOM}
+                width={EDropdownWidth.MIN_TARGET}
+            >
+                <DropdownList dropdownOpened={opened} size={EComponentSize.MD}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item
+                            key={option.id}
+                            id={option.id}
+                            selected={option.id === selectedId}
+                            onSelect={() => handleSelect(option.id)}
+                        >
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
+```
 
-Типовые stories:
-- `Default` — базовый открывающийся dropdown
-- `Directions` — auto/bottom/top
-- `Alignments` — left/right
-- `Widths` — content/target/min-target
-- `MobileView` — с `mobileViewProps`
-- `DropdownList` — список с item'ами
-- `Playground` — интерактив
+### MobileView
 
----
+`stories/Dropdown/examples/MobileView.tsx`
 
-## История изменений
+```tsx
+import React, { useRef, useState } from "react";
+import {
+    Button,
+    Dropdown,
+    DropdownList,
+    DropdownMobileBody,
+    DropdownMobileClose,
+    DropdownMobileFooter,
+    DropdownMobileHeader,
+    DropdownMobileList,
+    DropdownMobileListItem,
+    EButtonTheme,
+    EComponentSize,
+    EDropdownWidth,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+
+const OPTIONS = [
+    { id: "mobile-option-1", label: "Значение 1" },
+    { id: "mobile-option-2", label: "Значение 2" },
+    { id: "mobile-option-3", label: "Значение 3" },
+];
+
+export const MobileView = () => {
+    const targetRef = useRef<HTMLButtonElement>(null);
+    const [opened, setOpened] = useState(false);
+    const [selectedId, setSelectedId] = useState<string>();
+
+    const handleSelect = (id: string) => {
+        setSelectedId(id);
+        setOpened(false);
+    };
+
+    return (
+        <div>
+            <Button
+                theme={EButtonTheme.SECONDARY}
+                size={EComponentSize.MD}
+                aria-haspopup="listbox"
+                aria-expanded={opened}
+                onClick={() => setOpened(!opened)}
+                ref={targetRef}
+            >
+                Button text
+            </Button>
+            <Dropdown
+                opened={opened}
+                setOpened={setOpened}
+                targetRef={targetRef}
+                size={EComponentSize.MD}
+                width={EDropdownWidth.MIN_TARGET}
+                mobileViewProps={{
+                    children: (
+                        <>
+                            <DropdownMobileHeader
+                                controlButtons={
+                                    <DropdownMobileClose aria-label="Закрыть" onClick={() => setOpened(false)} />
+                                }
+                            >
+                                <Text size={ETextSize.B1}>Заголовок</Text>
+                            </DropdownMobileHeader>
+                            <DropdownMobileBody>
+                                <DropdownMobileList>
+                                    {OPTIONS.map((option) => (
+                                        <DropdownMobileListItem
+                                            key={option.id}
+                                            id={`mobile-${option.id}`}
+                                            selected={option.id === selectedId}
+                                            onSelect={() => handleSelect(option.id)}
+                                        >
+                                            {option.label}
+                                        </DropdownMobileListItem>
+                                    ))}
+                                </DropdownMobileList>
+                            </DropdownMobileBody>
+                            <DropdownMobileFooter>
+                                <Button
+                                    theme={EButtonTheme.SECONDARY}
+                                    size={EComponentSize.MD}
+                                    onClick={() => setOpened(false)}
+                                >
+                                    Button text
+                                </Button>
+                            </DropdownMobileFooter>
+                        </>
+                    ),
+                }}
+            >
+                <DropdownList dropdownOpened={opened} size={EComponentSize.MD}>
+                    {OPTIONS.map((option) => (
+                        <DropdownList.Item
+                            key={option.id}
+                            id={option.id}
+                            selected={option.id === selectedId}
+                            onSelect={() => handleSelect(option.id)}
+                        >
+                            {option.label}
+                        </DropdownList.Item>
+                    ))}
+                </DropdownList>
+            </Dropdown>
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |