@sberbusiness/triplex-next-mcp-server 1.44.0-beta → 1.46.0-beta

package/bundle/components/MultiselectField.md

@@ -1,10 +1,9 @@
 ---
 component: MultiselectField
-category: Form Controls
-figma-node: ""
-figma-file: ""
-related: [SelectExtendedField, SelectField, Dropdown, Checkbox, FormField]
-tokens: []
+category: MultiselectField
+related: [SelectField, SuggestField, SelectExtendedField, Dropdown, LoaderScreen]
+tokens:
+  - MultiselectField.Divider_Color
 stories: stories/MultiselectField/MultiselectField.stories.tsx
 version: "1.0"
 ---
@@ -13,201 +12,2253 @@ version: "1.0"
 
 ## Назначение
 
-Контейнер для **мульти-выбора** из списка: `<SelectExtendedField>` с
-`<MultiselectField.Dropdown>` внутри. Сам компонент — **тонкая обёртка**,
-прокидывающая `size` через `MultiselectFieldContext` к дочерним слотам
-(Header/Content/Footer). Список опций (чекбоксы), кнопки применения,
-заголовок с поиском — реализуются потребителем в Header/Content/Footer.
+Поле выбора нескольких значений: поле с тегами выбранного и выпадающий блок с
+произвольным содержимым — списком чекбоксов, деревом, фильтром и кнопками
+подтверждения.
 
-Используй когда: нужен выбор нескольких элементов с собственным dropdown'ом
-и UI-контролами (поиск, "выбрать все", apply). Для одиночного выбора —
-`SelectField`. Для более гибкого API — `SelectExtendedField` напрямую.
+Собственной разметки у компонента почти нет. Это надстройка над
+`SelectExtendedField`, которая добавляет три вещи: раздачу размера частям
+выпадающего блока через контекст, перехват фокуса внутри открытого блока
+(`FocusTrap`) и правило «после открытия мышью фокус на поле не возвращается».
+Состоянием открытости, закрытием по `Escape` и по нажатию вне блока по-прежнему
+владеет `SelectExtendedField`.
+
+Используй когда: нужен множественный выбор — чекбоксы со счётчиком, дерево
+категорий, фильтр с явным подтверждением — и выбранное показывается тегами в поле.
+
+Не используй когда:
+
+- нужен выбор одного значения из списка — используй `SelectField`;
+- нужен поиск по вводу с подсказками — используй `SuggestField`;
+- нужен множественный выбор в виде фильтр-чипа над таблицей — используй `ChipMultiselect` (он построен на этом компоненте);
+- содержимое выпадающего блока стандартное, а перехват фокуса не нужен — используй `SelectExtendedField` напрямую;
+- выпадающий блок не привязан к полю ввода — используй `Dropdown`.
+
+---
+
+## Варианты и props
+
+### `MultiselectField`
+
+`IMultiselectFieldProps` расширяет `ISelectExtendedFieldProps` единственным
+собственным prop'ом `size`. Всё остальное — обязательные рендер-функции
+`renderTarget` и `children`, колбэки `onOpen` / `onClose`, `closeOnTab` и
+html-атрибуты корневого `<div>` — приходит из `SelectExtendedField`, см.
+`SelectExtendedField-ai.md`.
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `size` | `EComponentSize` | `EComponentSize.MD` | Размер. Раздаётся **только частям выпадающего блока** через контекст. Полю выбора размер нужно передать отдельно |
+| `renderTarget` | `(props: ISelectExtendedFieldTargetProvideProps) => React.ReactNode` | — | Обязательный. Рендер-функция поля выбора. Получает `opened` и `setOpened` |
+| `children` | `(props: ISelectExtendedFieldDropdownProvideProps) => React.ReactNode` | — | Обязательный. Рендер-функция выпадающего блока. Получает `opened`, `setOpened`, `targetRef`, `dropdownRef` |
+
+### `MultiselectField.Target`
+
+Это `SelectExtendedFieldTarget` — тот же компонент, что и у `SelectField` и
+`ChipSelect`. Собственного варианта поля у `MultiselectField` нет. `size` и
+`status` он берёт из своих props, а не из контекста мульти-списка, поэтому
+`size` передаётся в него явно. Выбранные значения кладутся в `label` —
+как правило `TagGroup` с `Tag` на каждое значение.
+
+### `MultiselectField.Dropdown` (`MultiselectFieldDropdown`)
+
+`IMultiselectFieldDropdownProps` расширяет `IDropdownProps` одним prop'ом
+`focusTrapProps` (`FocusTrapProps` из `focus-trap-react`).
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `focusTrapProps` | `FocusTrapProps` | — | Прокидывается в `FocusTrap`. `focusTrapOptions` мержатся поверх умолчаний компонента |
+| `width` | `EDropdownWidth` | `EDropdownWidth.MIN_TARGET` | Умолчание задаёт компонент; потребитель может переопределить |
+| `size` | `EComponentSize` | из контекста | Умолчание — `size` мульти-списка; явный prop имеет приоритет |
+| `opened`, `setOpened`, `targetRef` | — | — | Обязательные, приходят из рендер-функции `children` |
+| `mobileViewProps` | `Omit<IDropdownMobileProps, "opened" \| "setOpened">` | — | Содержимое мобильной версии. Мобильная версия включена **всегда** — см. «Инварианты» |
+
+Умолчания `focusTrapOptions`: `clickOutsideDeactivates: true`,
+`preventScroll: true`, `returnFocusOnDeactivate` — по признаку «блок открыт мышью».
+Любое из них переопределяется через `focusTrapProps.focusTrapOptions`.
+
+Ссылку на контейнер блока компонент принимает через обычный `ref` (в отличие от
+`SelectExtendedField.Dropdown`, где для этого есть prop `forwardedRef`). В него
+передаётся `dropdownRef` из рендер-функции.
+
+### `MultiselectField.Dropdown.Header` / `.Content` / `.Footer`
+
+Три слота выпадающего блока. Своих props, кроме перечисленных ниже, нет —
+`className` мержится, остальные атрибуты уходят на корневой `<div>`.
+
+| Часть | Своё | Описание |
+|---|---|---|
+| `Header` | — | Верхняя фиксированная область: поле фильтра |
+| `Content` | `loading?: boolean` | Прокручиваемая область со списком. Максимальную высоту задаёт `size` из контекста (SM 208px / MD 266px / LG 296px). `loading` показывает `LoaderScreen` поверх содержимого |
+| `Footer` | — | Нижняя фиксированная область: кнопки. Отделена разделителем |
 
 ---
 
-## Файловая структура
+## Дизайн-токены
+
+Переопределяются через `ThemeProvider` (prop `tokens`) — см. `ThemeProvider-ai.md` →
+«Как переопределять токены». Значения по умолчанию —
+`src/components/DesignTokens/components/MultiselectField.ts`.
 
 ```text
-src/components/MultiselectField/
-├── MultiselectField.tsx                           # forwardRef, обёртка + Object.assign
-├── MultiselectFieldContext.ts                     # { size }
-├── index.ts                                       # Barrel (только MultiselectField)
-├── components/
-│   ├── MultiselectFieldDropdown.tsx               # Dropdown + FocusTrap + Object.assign
-│   ├── MultiselectFieldDropdownHeader.tsx         # <div>
-│   ├── MultiselectFieldDropdownContent.tsx        # <div> + опц. LoaderScreen
-│   ├── MultiselectFieldDropdownFooter.tsx         # <div>
-│   └── index.ts
-└── styles/*.module.less
+MultiselectField.Divider_Color
 ```
 
+Единственный собственный токен — цвет разделителя над `Footer`. Всё остальное
+приходит из компонентов, на которых собран мульти-список: `FormField` (поле
+выбора), `Dropdown` и `DropdownList` (выпадающий блок), `LoaderScreen` (загрузка
+содержимого), `Tag` / `TagGroup` (выбранные значения), `Checkbox` /
+`CheckboxTree` (опции).
+
 ---
 
-## Compound-структура
+## Инварианты
+
+- `forwardRef` на `MultiselectField` и `MultiselectFieldDropdown` — не убирать. Ref `MultiselectField` указывает на корневой `<div>` `SelectExtendedField`, ref `MultiselectFieldDropdown` — на контейнер выпадающего блока (в него передаётся `dropdownRef`).
+- Barrel `src/components/MultiselectField/index.ts` экспортирует только `MultiselectField` и `IMultiselectFieldProps`. Части выпадающего блока публичны **через статические свойства** (`MultiselectField.Dropdown.Header` и т.д.), а не через barrel. Их типы (`IMultiselectFieldDropdownProps`, `IMultiselectFieldDropdownContentProps`, ...) в публичный API не входят — выносить их туда без отдельного решения не нужно.
+- Статические свойства `MultiselectField.Target`, `MultiselectField.Dropdown` и `MultiselectFieldDropdown.Header` / `.Content` / `.Footer` — часть публичного API.
+- `MultiselectField.Target` — это `SelectExtendedFieldTarget` по ссылке (`MultiselectField.Target === SelectExtendedFieldTarget`). Правки в нём затрагивают также `SelectField` и `ChipSelect`.
+- **Мобильная версия выпадающего блока включена всегда.** `MultiselectFieldDropdown` передаёт в `Dropdown` объект `mobileViewProps` даже когда потребитель ничего не передал — для этого есть константа-заглушка `ALWAYS_MOBILE_VIEW_PROPS`: `Dropdown` выбирает мобильную версию по truthiness этого prop'а. Убрать объект — значит на мобильной ширине отрендерить десктопный блок вместо полноэкранного. Наблюдаемое поведение, покрыто unit-тестом «Should render the mobile version on mobile width even without mobileViewProps». Visual-стори этот инвариант не держат: `PlaygroundExample` передаёт `mobileViewProps` сам, поэтому скриншоты не упадут, даже если убрать объект из компонента.
+- Признак «открыт мышью» живёт в `mouseUsedRef` в контексте: `MultiselectField` ставит его в `true` на `mousedown`, `MultiselectFieldDropdown` сбрасывает в `false`, когда блок закрылся. Он не state — переключение не должно вызывать перерисовку.
+- `size` из props раздаётся **только через контекст** и до поля выбора не доходит. Потребитель передаёт размер в `MultiselectField.Target` сам. Не «чинить» это без согласования: у поля и у выпадающего блока размеры могут различаться намеренно (в примерах фильтр внутри `Header` — размера SM при MD-поле).
+- `Header` / `Content` / `Footer` объявлены как `React.FC` и `ref` **не пробрасывают** — в отличие от `MultiselectField` и `MultiselectField.Dropdown`. Перевод их на `forwardRef` обратно совместим по props, но меняет тип компонента, поэтому делается отдельной задачей, а не попутно.
+- `Content` имеет `tabIndex={-1}`: он фокусируется программно (в том числе `FocusTrap`), но не попадает в обход по `Tab`. Не убирать.
+- Классы `sm` / `md` / `lg` в `MultiselectFieldDropdownContent.module.less` читаются через `createSizeToClassNameMap` — переименование класса ломает соответствие размеру.
+- Компонент React 17-совместим (ветка `release-0`): не использовать `useId`, `useSyncExternalStore`, `useInsertionEffect` и поведение, зависящее от automatic batching.
+
+---
+
+## Accessibility
+
+- Пока выпадающий блок открыт, фокус заперт внутри него (`FocusTrap` из `focus-trap-react`). Содержимое обёрнуто в `<div role="presentation">` — обёртка нужна `FocusTrap` как единственный контейнер и не должна попадать в дерево доступности.
+- `clickOutsideDeactivates: true` — нажатие вне блока снимает перехват фокуса, после чего блок закрывает уже `SelectExtendedField` по своему `mousedown`-слушателю.
+- Возврат фокуса на поле при закрытии зависит от того, как блок открыли: после клавиатуры фокус возвращается, после мыши — нет (иначе клик вне блока повторно подсвечивал бы поле). Признак сбрасывается на каждое закрытие, поэтому следующее открытие оценивается заново.
+- `aria-haspopup="listbox"` и `aria-expanded` выставляет `MultiselectField.Target` (то есть `SelectExtendedFieldTarget`). Клавиши открытия поля — `Space`, `Enter`, `ArrowDown`, `ArrowUp`.
+- `Escape` закрывает блок из любого места страницы — слушатель `SelectExtendedField` висит на `window`.
+- Роли и клавиатурную навигацию **внутри** блока компонент не задаёт: содержимое произвольное (чекбоксы, дерево, кнопки), связь поля со списком (`aria-controls`, `aria-activedescendant`) и `aria-label` на элементах — забота потребителя.
+- Компонент не хардкодит текстовые строки: `fieldLabel`, `placeholder`, подписи кнопок и заголовок мобильной версии передаёт потребитель — библиотека мультиязычная.
+- В состоянии `loading` у `Content` `LoaderScreen` перекрывает содержимое подложкой, но элементы под ней остаются в DOM и в порядке обхода — если содержимое нужно отключить, потребитель делает это сам.
+
+---
+
+## Связанные компоненты
+
+Отдельного AI.md нет ни у `MultiselectFieldDropdown`, ни у его частей — они
+описаны здесь. По критериям `docs/ai/CONTEXT.md` → «Когда создавать
+`{ComponentName}-ai.md`» отдельные документы им и не нужны: из barrel
+`src/components/MultiselectField/index.ts` они не экспортируются и доступны
+только как статические свойства.
+
+**Внутри папки компонента:**
+
+- `MultiselectFieldDropdown` (`MultiselectField.Dropdown`) — выпадающий блок: `Dropdown` внутри `FocusTrap`.
+- `MultiselectFieldDropdownHeader` / `Content` / `Footer` — слоты блока; своя логика есть только у `Content` (размер из контекста, `loading`).
+- `MultiselectFieldContext` — внутренний контекст (`size`, `mouseUsedRef`). Из barrel не экспортируется, в публичный API не выносить.
+
+**Основа и альтернативы:**
+
+- `SelectExtendedField` — база: состояние открытости, закрытие по `Escape` / нажатию вне блока / `Tab`. `IMultiselectFieldProps` наследует его props.
+- `SelectField` — выбор одного значения из готового списка опций.
+- `SuggestField` — поиск по вводу с подсказками; на `SelectExtendedField` не построен.
+- `ChipMultiselect` — тот же множественный выбор, но в виде фильтр-чипа. Построен на `MultiselectField`: правки здесь затрагивают его.
+
+**Инфраструктура:**
+
+- `Dropdown` — выпадающее меню через `Portal`, позиционирование и полноэкранная мобильная версия.
+- `LoaderScreen` — лоадер поверх содержимого при `Content loading`.
+- `FormField` — визуальный контейнер поля выбора и поля фильтра в `Header`.
+- `Tag` / `TagGroup`, `Checkbox`, `CheckboxTree` — типовое наполнение поля и выпадающего блока в примерах; частью компонента не являются.
+
+---
+
+## Stories
+
+Основные истории: `stories/MultiselectField/MultiselectField.stories.tsx`
+Файлы примеров: `stories/MultiselectField/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль: размер, статус, загрузка, префикс/постфикс, поле фильтра, кнопка очистки |
+| `Default` | `DefaultExample.tsx` | Базовый сценарий: теги в поле, фильтр в `Header`, чекбоксы в `Content`, кнопки в `Footer`, мобильная версия |
+| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG |
+| `Statuses` | `StatusesExample.tsx` | Состояния поля: DEFAULT / ERROR / WARNING / DISABLED |
+| `Loading` | `LoadingExample.tsx` | Загрузка поля (лоадер вместо каретки) и загрузка содержимого (`Content loading`) |
+| `DropdownWithoutInput` | `DropdownWithoutInputExample.tsx` | Выпадающий блок без поля фильтра — только список и кнопки |
+| `WithClearButton` | `WithClearButtonExample.tsx` | Кнопка очистки значения в поле через `onClear` |
+| `WithPrefixAndPostfix` | `WithPrefixAndPostfixExample.tsx` | Слоты `prefix` и `postfix` поля выбора |
+| `Example` | `ProductionExample.tsx` | Приближенный к продуктовому сценарий (в Storybook — «Example: production») |
+| `WithCheckboxTree` | `WithCheckboxTreeExample.tsx` | Дерево категорий вместо плоского списка чекбоксов (в Storybook — «Example: with CheckboxTree») |
+| `VisualTests` | `PlaygroundExample.tsx` | Скриншот-регрессия: поле с выбранным значением и раскрытый блок |
+| `VisualTestsNotFound` | `PlaygroundExample.tsx` | Скриншот-регрессия: пустой результат фильтра во всех размерах; на мобильной ширине — полноэкранная версия |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-09-03 | Создан документ AI-ready для `MultiselectField` (TRI-61). |
+| 2026-09-03 | AI-рефакторинг (TRI-61): JSDoc на props, контексте и всех частях выпадающего блока; значение контекста обёрнуто в `useMemo`, обработчик `onMouseDown` — в `useCallback` (выигрыша в текущей связке нет: части приходят из рендер-функции `children` и пересоздаются каждый рендер независимо от контекста, — это страховка на случай `React.memo` у потребителя); объект-заглушка `mobileViewProps` вынесен в константу, чтобы инвариант «мобильная версия включена всегда» читался из самого выражения; unit-тесты разбиты по субкомпонентам и расширены с 1 до 45 кейсов. Публичный API и наблюдаемое поведение не изменены. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/MultiselectField/examples/DefaultExample.tsx`
 
 ```tsx
-<MultiselectField
-    size={EComponentSize.MD}
-    opened={opened}
-    onOpenedChange={setOpened}
->
-    <MultiselectField.Target>
-        {/* Target — реэкспорт SelectExtendedFieldTarget */}
-    </MultiselectField.Target>
-
-    <MultiselectField.Dropdown>
-        <MultiselectField.Dropdown.Header>
-            {/* Поиск, "Выбрать все" */}
-        </MultiselectField.Dropdown.Header>
-
-        <MultiselectField.Dropdown.Content loading={loading}>
-            {items.map((it) => (
-                <Checkbox key={it.id} checked={...} onChange={...}>
-                    {it.label}
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    EButtonTheme,
+    EComponentSize,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    MultiselectField,
+    Tag,
+    TagGroup,
+    Text,
+    ETextSize,
+    DropdownMobileFooter,
+    DropdownMobileBody,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    DropdownMobileClose,
+} from "@sberbusiness/triplex-next";
+import "../MultiselectField.less";
+
+interface IOption {
+    id: string;
+    label: string;
+}
+
+/** Плоский список опций для примера (раньше задавался как дерево). */
+const createOptions = (): IOption[] => {
+    const group1 = [...Array(40).keys()].map((item) => ({
+        id: `multiselect-option-1-${item}`,
+        label: `Значение 1-${item}`,
+    }));
+    const group2: IOption[] = [
+        { id: "multiselect-option-2-1", label: "Значение 2-1" },
+        { id: "multiselect-option-2-2", label: "Значение 2-2" },
+    ];
+
+    return [...group1, ...group2, { id: "multiselect-option-3", label: "Значение 3" }];
+};
+
+export const DefaultExample = () => {
+    /** Ref на target, который нужен для корректного позиционирования dropdown. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Мемоизированные опции, чтобы не пересоздавать их на каждый рендер. */
+    const options = useMemo(() => createOptions(), []);
+    /** Массив id выбранных leaf-чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Текущее значение фильтра в поле поиска dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Set для быстрых O(1) проверок выбранности чекбокса по id. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return options;
+        }
+
+        return options.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter, options]);
+
+    const selectedOptions = useMemo(() => options.filter((opt) => selectedSet.has(opt.id)), [options, selectedSet]);
+
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
+
+                return [...prev, option.id];
+            }
+
+            return prev.filter((id) => id !== option.id);
+        });
+    };
+
+    const handleClearAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={EComponentSize.MD}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
                 </Checkbox>
             ))}
-        </MultiselectField.Dropdown.Content>
+        </CheckboxYGroup>
+    );
+
+    /** Рендер тегов выбранных значений или счетчика, если выбранных значений много. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
 
-        <MultiselectField.Dropdown.Footer>
-            <Button>Применить</Button>
-        </MultiselectField.Dropdown.Footer>
-    </MultiselectField.Dropdown>
-</MultiselectField>
+        if (!selectedOptions.length) return null;
+        if (selectedOptions.length > 3) {
+            return (
+                <Tag
+                    id="many"
+                    size={EComponentSize.SM}
+                    onFocus={handleTagFocus}
+                    onBlur={handleTagBlur}
+                    onClick={handleTagClick}
+                    onKeyDown={handleTagKeyDown}
+                    onRemove={handleClearAll}
+                >
+                    {`Выбрано ${selectedOptions.length} значения`}
+                </Tag>
+            );
+        }
+
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
+
+    return (
+        <div style={{ maxWidth: "320px" }}>
+            <MultiselectField
+                renderTarget={(props) => (
+                    <MultiselectField.Target
+                        {...props}
+                        ref={targetRef}
+                        size={EComponentSize.MD}
+                        fieldLabel="Label"
+                        placeholder="Select to proceed"
+                        label={renderTags()}
+                    />
+                )}
+            >
+                {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                    <MultiselectField.Dropdown
+                        opened={opened}
+                        setOpened={setOpened}
+                        targetRef={dropdownTargetRef}
+                        ref={dropdownRef}
+                        focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                        mobileViewProps={{
+                            children: (
+                                <>
+                                    <DropdownMobileHeader
+                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                    >
+                                        <DropdownMobileInput
+                                            autoFocus={true}
+                                            placeholder="Type to proceed"
+                                            value={filter}
+                                            onChange={(event) => setFilter(event.target.value)}
+                                        />
+                                    </DropdownMobileHeader>
+                                    <DropdownMobileBody>
+                                        {renderCheckboxList()}
+                                        {!!filter.trim().length && !visibleOptions.length && (
+                                            <Text size={ETextSize.B3} className="not-found">
+                                                Nothing was found.
+                                            </Text>
+                                        )}
+                                    </DropdownMobileBody>
+                                    <DropdownMobileFooter>
+                                        <Button
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                            onClick={() => setOpened(false)}
+                                        >
+                                            Button text
+                                        </Button>
+                                        <Button
+                                            theme={EButtonTheme.LINK}
+                                            size={EComponentSize.MD}
+                                            onClick={handleClearAll}
+                                        >
+                                            Button link text
+                                        </Button>
+                                    </DropdownMobileFooter>
+                                </>
+                            ),
+                        }}
+                    >
+                        <MultiselectField.Dropdown.Header>
+                            <FormField size={EComponentSize.SM}>
+                                <FormFieldLabel>Type to proceed</FormFieldLabel>
+                                <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                                <FormFieldPostfix>
+                                    <FormFieldClear onClick={() => setFilter("")} />
+                                </FormFieldPostfix>
+                            </FormField>
+                        </MultiselectField.Dropdown.Header>
+                        <MultiselectField.Dropdown.Content>
+                            {renderCheckboxList()}
+                            {!!filter.trim().length && !visibleOptions.length && (
+                                <div className="not-found md">
+                                    <Text size={ETextSize.B3}>Nothing was found.</Text>
+                                </div>
+                            )}
+                        </MultiselectField.Dropdown.Content>
+                        <MultiselectField.Dropdown.Footer>
+                            <Button
+                                theme={EButtonTheme.SECONDARY}
+                                size={EComponentSize.SM}
+                                onClick={() => setOpened(false)}
+                            >
+                                Button text
+                            </Button>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClearAll}>
+                                Button link text
+                            </Button>
+                        </MultiselectField.Dropdown.Footer>
+                    </MultiselectField.Dropdown>
+                )}
+            </MultiselectField>
+        </div>
+    );
+};
 ```
 
-`MultiselectField.Target` **= реэкспорт** `SelectExtendedFieldTarget` (не собственный компонент). Используй как псевдоним.
+### Sizes
 
----
+`stories/MultiselectField/examples/SizesExample.tsx`
 
-## Варианты и props
+```tsx
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    EButtonTheme,
+    EComponentSize,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    MultiselectField,
+    Text,
+    ETextSize,
+    Tag,
+    TagGroup,
+} from "@sberbusiness/triplex-next";
+import "../MultiselectField.less";
 
-### MultiselectField — `IMultiselectFieldProps extends ISelectExtendedFieldProps`
+interface IOption {
+    id: string;
+    label: string;
+}
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `size` | `EComponentSize` | `MD` | Пишется в `MultiselectFieldContext` и пробрасывается в Dropdown. |
-| `...ISelectExtendedFieldProps` | — | — | Всё поведение outer-контейнера (opened, onOpenedChange, targetRef, …) от SelectExtendedField. |
+/** Набор размеров для демонстрации вариативности компонента. */
+const SIZES = [EComponentSize.SM, EComponentSize.MD, EComponentSize.LG];
 
-### MultiselectField.Dropdown — `IMultiselectFieldDropdownProps extends IDropdownProps`
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px", maxWidth: "320px" }}>
+        {SIZES.map((size) => (
+            <div key={size}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>{size.toUpperCase()}</div>
+                <SizeItem size={size} />
+            </div>
+        ))}
+    </div>
+);
 
-| Prop | Тип | Default | Описание |
-|---|---|---|---|
-| `focusTrapProps` | `FocusTrapProps` | — | Переопределение `focus-trap-react`. |
-| `opened`, `targetRef`, `mobileViewProps`, `...IDropdownProps` | — | — | От `Dropdown`. |
+/** Плоский список опций с уникальным префиксом id для каждого размера. */
+const createOptions = (prefix: string): IOption[] => [
+    { id: `${prefix}-option-1`, label: "Значение 1" },
+    { id: `${prefix}-option-2`, label: "Значение 2" },
+    { id: `${prefix}-option-3`, label: "Значение 3" },
+];
 
-- **`width` захардкожен `EDropdownWidth.MIN_TARGET`** — dropdown всегда минимум как target. Не переопределяется.
-- **`size` берётся из `MultiselectFieldContext`**, не от prop'а.
+/** Нормализация размера кнопок для footer в зависимости от размера поля. */
+const getButtonSize = (size: EComponentSize) => (size === EComponentSize.LG ? EComponentSize.MD : EComponentSize.SM);
 
-### MultiselectField.Dropdown.Header / Footer / Content — `HTMLAttributes<HTMLDivElement>`
+interface ISizeItemProps {
+    size: EComponentSize;
+}
 
-- Header / Footer — простые `<div>`-слоты с собственной стилизацией (padding, border).
-- Content — `<div tabIndex={-1}>` с `sizeToClassNameMap[size]` для подстройки (scroll height, padding). Имеет prop **`loading: boolean`** — при true показывает `LoaderScreen type="small"` поверх контента.
+const SizeItem = ({ size }: ISizeItemProps) => {
+    /** Ref на target для привязки dropdown. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Опции для текущего размера. */
+    const options = useMemo(() => createOptions(size), [size]);
+    /** Id выбранных чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Значение фильтра в input dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Set для быстрых проверок выбранности по id. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return options;
+        }
 
-### MultiselectFieldContext
+        return options.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter, options]);
 
-```ts
-interface IMultiselectFieldContext { size: EComponentSize; }
-```
+    const selectedOptions = useMemo(() => options.filter((opt) => selectedSet.has(opt.id)), [options, selectedSet]);
 
-Публичная точка расширения: при создании кастомных элементов в Content можно читать `size` и адаптировать под него.
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
 
----
+                return [...prev, option.id];
+            }
 
-## Ключевые особенности реализации
+            return prev.filter((id) => id !== option.id);
+        });
+    };
 
-### `size` — через Context, не через prop на Dropdown
+    const handleClearAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={size}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    /** Рендер тегов выбранных значений в target. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
+
+        if (!selectedOptions.length) return null;
+
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
+
+    return (
+        <MultiselectField
+            size={size}
+            renderTarget={(props) => (
+                <MultiselectField.Target
+                    {...props}
+                    ref={targetRef}
+                    size={size}
+                    fieldLabel="Label"
+                    placeholder="Select to proceed"
+                    label={renderTags()}
+                />
+            )}
+        >
+            {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                <MultiselectField.Dropdown
+                    opened={opened}
+                    setOpened={setOpened}
+                    targetRef={dropdownTargetRef}
+                    ref={dropdownRef}
+                    focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                >
+                    <MultiselectField.Dropdown.Header>
+                        <FormField size={getButtonSize(size)}>
+                            <FormFieldLabel>Type to proceed</FormFieldLabel>
+                            <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                            <FormFieldPostfix>
+                                <FormFieldClear onClick={() => setFilter("")} />
+                            </FormFieldPostfix>
+                        </FormField>
+                    </MultiselectField.Dropdown.Header>
+                    <MultiselectField.Dropdown.Content>
+                        {renderCheckboxList()}
+                        {!!filter.trim().length && !visibleOptions.length && (
+                            <div className={`not-found ${size}`}>
+                                <Text size={ETextSize.B3}>Nothing was found.</Text>
+                            </div>
+                        )}
+                    </MultiselectField.Dropdown.Content>
+                    <MultiselectField.Dropdown.Footer>
+                        <Button
+                            theme={EButtonTheme.SECONDARY}
+                            size={getButtonSize(size)}
+                            onClick={() => setOpened(false)}
+                        >
+                            Button text
+                        </Button>
+                        <Button theme={EButtonTheme.LINK} size={getButtonSize(size)} onClick={handleClearAll}>
+                            Button link text
+                        </Button>
+                    </MultiselectField.Dropdown.Footer>
+                </MultiselectField.Dropdown>
+            )}
+        </MultiselectField>
+    );
+};
+```
+
+### Statuses
+
+`stories/MultiselectField/examples/StatusesExample.tsx`
 
 ```tsx
-<MultiselectFieldContext.Provider value={{ size }}>
-    <SelectExtendedField {...props}>{children}</SelectExtendedField>
-</MultiselectFieldContext.Provider>
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    EButtonTheme,
+    EComponentSize,
+    EFormFieldStatus,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    MultiselectField,
+    Text,
+    ETextSize,
+    Tag,
+    TagGroup,
+    IconWrapper,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+
+import "../MultiselectField.less";
+
+/** Набор статусов для демонстрации состояний поля. */
+const STATUS_ITEMS = [
+    { id: "default", label: "DEFAULT", status: EFormFieldStatus.DEFAULT },
+    { id: "error", label: "ERROR", status: EFormFieldStatus.ERROR },
+    { id: "warning", label: "WARNING", status: EFormFieldStatus.WARNING },
+    { id: "disabled", label: "DISABLED", status: EFormFieldStatus.DISABLED },
+];
+
+export const StatusesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "24px", maxWidth: "320px" }}>
+        {STATUS_ITEMS.map((item) => (
+            <div key={item.id}>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>{item.label}</div>
+                <StatusItem status={item.status} idPrefix={item.id} />
+            </div>
+        ))}
+    </div>
+);
+
+interface IOption {
+    id: string;
+    label: string;
+}
+
+interface IStatusItemProps {
+    idPrefix: string;
+    status: EFormFieldStatus;
+}
+
+/** Плоский список опций с уникальным префиксом id для каждого статуса. */
+const createOptions = (prefix: string): IOption[] => [
+    { id: `${prefix}-option-1`, label: "Значение 1" },
+    { id: `${prefix}-option-2`, label: "Значение 2" },
+    { id: `${prefix}-option-3`, label: "Значение 3" },
+];
+
+const StatusItem = ({ idPrefix, status }: IStatusItemProps) => {
+    /** Ref на target для корректной привязки dropdown. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Опции для текущего статуса. */
+    const options = useMemo(() => createOptions(idPrefix), [idPrefix]);
+    /** Id выбранных чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Значение фильтра в input dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Set для быстрых проверок выбранности. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return options;
+        }
+
+        return options.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter, options]);
+
+    const selectedOptions = useMemo(() => options.filter((opt) => selectedSet.has(opt.id)), [options, selectedSet]);
+
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
+
+                return [...prev, option.id];
+            }
+
+            return prev.filter((id) => id !== option.id);
+        });
+    };
+
+    const handleClearAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={EComponentSize.MD}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    /** Рендер тегов выбранных значений в target. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
+
+        if (!selectedOptions.length) return null;
+
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
+
+    return (
+        <MultiselectField
+            renderTarget={(props) => (
+                <MultiselectField.Target
+                    {...props}
+                    ref={targetRef}
+                    status={status}
+                    size={EComponentSize.MD}
+                    fieldLabel="Label"
+                    placeholder="Select to proceed"
+                    label={renderTags()}
+                    prefix={
+                        <IconWrapper disableInteraction disabled={status === EFormFieldStatus.DISABLED} displayContents>
+                            <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                        </IconWrapper>
+                    }
+                />
+            )}
+        >
+            {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                <MultiselectField.Dropdown
+                    opened={opened}
+                    setOpened={setOpened}
+                    targetRef={dropdownTargetRef}
+                    ref={dropdownRef}
+                    focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                >
+                    <MultiselectField.Dropdown.Header>
+                        <FormField size={EComponentSize.SM}>
+                            <FormFieldLabel>Type to proceed</FormFieldLabel>
+                            <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                            <FormFieldPostfix>
+                                <FormFieldClear onClick={() => setFilter("")} />
+                            </FormFieldPostfix>
+                        </FormField>
+                    </MultiselectField.Dropdown.Header>
+                    <MultiselectField.Dropdown.Content>
+                        {renderCheckboxList()}
+                        {!!filter.trim().length && !visibleOptions.length && (
+                            <div className="not-found md">
+                                <Text size={ETextSize.B3}>Nothing was found.</Text>
+                            </div>
+                        )}
+                    </MultiselectField.Dropdown.Content>
+                    <MultiselectField.Dropdown.Footer>
+                        <Button
+                            theme={EButtonTheme.SECONDARY}
+                            size={EComponentSize.SM}
+                            onClick={() => setOpened(false)}
+                        >
+                            Button text
+                        </Button>
+                        <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClearAll}>
+                            Button link text
+                        </Button>
+                    </MultiselectField.Dropdown.Footer>
+                </MultiselectField.Dropdown>
+            )}
+        </MultiselectField>
+    );
+};
 ```
 
-- Dropdown и Content читают `size` из контекста.
-- **Dropdown переопределяет** `size` prop на Dropdown: `<Dropdown ... size={size} />`. То есть потребительский `size` на Dropdown **игнорируется** — всегда выигрывает context.
+### Loading
 
-### `FocusTrap` внутри Dropdown
+`stories/MultiselectField/examples/LoadingExample.tsx`
 
 ```tsx
-<FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true, preventScroll: true, ... }}>
-    <div role="presentation">{children}</div>
-</FocusTrap>
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    EButtonTheme,
+    EComponentSize,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    MultiselectField,
+    Text,
+    ETextSize,
+    Tag,
+    TagGroup,
+    DropdownMobileHeader,
+    DropdownMobileClose,
+    DropdownMobileInput,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    DropdownMobileLoader,
+} from "@sberbusiness/triplex-next";
+import "../MultiselectField.less";
+
+interface IOption {
+    id: string;
+    label: string;
+}
+
+/** Фиксированный список опций для демонстрации loading-состояния. */
+const OPTIONS: IOption[] = [
+    { id: "loading-option-1", label: "Значение 1" },
+    { id: "loading-option-2", label: "Значение 2" },
+    { id: "loading-option-3", label: "Значение 3" },
+];
+
+export const LoadingExample = () => {
+    return (
+        <div style={{ maxWidth: "320px", display: "flex", flexDirection: "column", gap: "24px" }}>
+            <div>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>Loading in target</div>
+                <LoadingMultiselect targetLoading />
+            </div>
+
+            <div>
+                <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: 700 }}>Loading in dropdown</div>
+                <LoadingMultiselect dropdownContentLoading />
+            </div>
+        </div>
+    );
+};
+
+interface ILoadingMultiselectProps {
+    targetLoading?: boolean;
+    dropdownContentLoading?: boolean;
+    forceOpened?: boolean;
+}
+
+const LoadingMultiselect = ({
+    targetLoading = false,
+    dropdownContentLoading = false,
+    forceOpened = false,
+}: ILoadingMultiselectProps) => {
+    /** Ref на target для привязки dropdown к полю. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Id выбранных чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Значение фильтра в input dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Быстрый поиск выбранного элемента по id. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return OPTIONS;
+        }
+
+        return OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
+
+    const selectedOptions = useMemo(() => OPTIONS.filter((opt) => selectedSet.has(opt.id)), [selectedSet]);
+
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
+
+                return [...prev, option.id];
+            }
+
+            return prev.filter((id) => id !== option.id);
+        });
+    };
+
+    const handleClearAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={EComponentSize.MD}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    /** Рендер тегов выбранных значений в target. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
+
+        if (!selectedOptions.length) return null;
+
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
+
+    return (
+        <MultiselectField
+            renderTarget={(props) => (
+                <MultiselectField.Target
+                    {...props}
+                    ref={targetRef}
+                    loading={targetLoading}
+                    size={EComponentSize.MD}
+                    fieldLabel="Label"
+                    placeholder="Select to proceed"
+                    label={renderTags()}
+                />
+            )}
+        >
+            {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                <MultiselectField.Dropdown
+                    opened={forceOpened ? true : opened}
+                    setOpened={setOpened}
+                    targetRef={dropdownTargetRef}
+                    ref={dropdownRef}
+                    focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                    mobileViewProps={{
+                        children: (
+                            <>
+                                <DropdownMobileHeader
+                                    controlButtons={
+                                        <>
+                                            <DropdownMobileLoader />
+                                            <DropdownMobileClose onClick={() => setOpened(false)} />
+                                        </>
+                                    }
+                                >
+                                    <DropdownMobileInput
+                                        autoFocus={true}
+                                        placeholder="Type to proceed"
+                                        value={filter}
+                                        onChange={(event) => setFilter(event.target.value)}
+                                    />
+                                </DropdownMobileHeader>
+                                <DropdownMobileBody>
+                                    {renderCheckboxList()}
+                                    {!!filter.trim().length && !visibleOptions.length && (
+                                        <Text size={ETextSize.B3} className="not-found">
+                                            Nothing was found.
+                                        </Text>
+                                    )}
+                                </DropdownMobileBody>
+                                <DropdownMobileFooter>
+                                    <Button
+                                        theme={EButtonTheme.SECONDARY}
+                                        size={EComponentSize.MD}
+                                        onClick={() => setOpened(false)}
+                                    >
+                                        Button text
+                                    </Button>
+                                    <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={handleClearAll}>
+                                        Button link text
+                                    </Button>
+                                </DropdownMobileFooter>
+                            </>
+                        ),
+                    }}
+                >
+                    <MultiselectField.Dropdown.Header>
+                        <FormField size={EComponentSize.SM}>
+                            <FormFieldLabel>Type to proceed</FormFieldLabel>
+                            <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                            <FormFieldPostfix>
+                                <FormFieldClear onClick={() => setFilter("")} />
+                            </FormFieldPostfix>
+                        </FormField>
+                    </MultiselectField.Dropdown.Header>
+                    <MultiselectField.Dropdown.Content loading={dropdownContentLoading}>
+                        {renderCheckboxList()}
+                        {!!filter.trim().length && !visibleOptions.length && (
+                            <div className="not-found md">
+                                <Text size={ETextSize.B3}>Nothing was found.</Text>
+                            </div>
+                        )}
+                    </MultiselectField.Dropdown.Content>
+                    <MultiselectField.Dropdown.Footer>
+                        <Button
+                            theme={EButtonTheme.SECONDARY}
+                            size={EComponentSize.SM}
+                            onClick={() => setOpened(false)}
+                        >
+                            Button text
+                        </Button>
+                        <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClearAll}>
+                            Button link text
+                        </Button>
+                    </MultiselectField.Dropdown.Footer>
+                </MultiselectField.Dropdown>
+            )}
+        </MultiselectField>
+    );
+};
 ```
 
-- `clickOutsideDeactivates: true` — клик вне dropdown'а деактивирует trap и закрывает (стандарт для popover/selects).
-- Все потомки оборачиваются в `<div role="presentation">` — требование FocusTrap (нужен single wrapper-element).
+### DropdownWithoutInput
 
-### `MultiselectField.Target = SelectExtendedFieldTarget`
+`stories/MultiselectField/examples/DropdownWithoutInputExample.tsx`
 
 ```tsx
-Object.assign(..., { Dropdown, Target: SelectExtendedFieldTarget })
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    EButtonTheme,
+    EComponentSize,
+    MultiselectField,
+    Tag,
+    TagGroup,
+} from "@sberbusiness/triplex-next";
+
+interface IOption {
+    id: string;
+    label: string;
+}
+
+/** Фиксированный список опций для версии dropdown без поля фильтра. */
+const OPTIONS: IOption[] = [
+    { id: "without-input-option-1", label: "Значение 1" },
+    { id: "without-input-option-2", label: "Значение 2" },
+    { id: "without-input-option-3", label: "Значение 3" },
+];
+
+export const DropdownWithoutInputExample = () => {
+    /** Ref на target для корректного позиционирования dropdown. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Id выбранных чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Set для быстрых проверок выбранности. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+
+    const selectedOptions = useMemo(() => OPTIONS.filter((opt) => selectedSet.has(opt.id)), [selectedSet]);
+
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
+
+                return [...prev, option.id];
+            }
+
+            return prev.filter((id) => id !== option.id);
+        });
+    };
+
+    const handleClearAll = () => {
+        setSelectedIds([]);
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {OPTIONS.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={EComponentSize.MD}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    /** Рендер тегов выбранных значений в target. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
+
+        if (!selectedOptions.length) return null;
+
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
+
+    return (
+        <div style={{ maxWidth: "320px" }}>
+            <MultiselectField
+                renderTarget={(props) => (
+                    <MultiselectField.Target
+                        {...props}
+                        ref={targetRef}
+                        size={EComponentSize.MD}
+                        fieldLabel="Label"
+                        placeholder="Select to proceed"
+                        label={renderTags()}
+                    />
+                )}
+            >
+                {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                    <MultiselectField.Dropdown
+                        opened={opened}
+                        setOpened={setOpened}
+                        targetRef={dropdownTargetRef}
+                        ref={dropdownRef}
+                        focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                        mobileViewProps={{
+                            children: (
+                                <>
+                                    <DropdownMobileBody>{renderCheckboxList()}</DropdownMobileBody>
+                                    <DropdownMobileFooter>
+                                        <Button
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                            onClick={() => setOpened(false)}
+                                        >
+                                            Button text
+                                        </Button>
+                                        <Button
+                                            theme={EButtonTheme.LINK}
+                                            size={EComponentSize.MD}
+                                            onClick={handleClearAll}
+                                        >
+                                            Button link text
+                                        </Button>
+                                    </DropdownMobileFooter>
+                                </>
+                            ),
+                        }}
+                    >
+                        <MultiselectField.Dropdown.Content>{renderCheckboxList()}</MultiselectField.Dropdown.Content>
+                        <MultiselectField.Dropdown.Footer>
+                            <Button
+                                theme={EButtonTheme.SECONDARY}
+                                size={EComponentSize.SM}
+                                onClick={() => setOpened(false)}
+                            >
+                                Button text
+                            </Button>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClearAll}>
+                                Button link text
+                            </Button>
+                        </MultiselectField.Dropdown.Footer>
+                    </MultiselectField.Dropdown>
+                )}
+            </MultiselectField>
+        </div>
+    );
+};
 ```
 
-- **Это не собственная реализация**, а пересвет. Потребитель видит `.Target` в типах, но фактически это SelectExtendedField's target.
+### WithClearButton
+
+`stories/MultiselectField/examples/WithClearButtonExample.tsx`
+
+```tsx
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    EButtonTheme,
+    EComponentSize,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    MultiselectField,
+    Text,
+    ETextSize,
+    Tag,
+    TagGroup,
+    DropdownMobileHeader,
+    DropdownMobileClose,
+    DropdownMobileInput,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+} from "@sberbusiness/triplex-next";
+import "../MultiselectField.less";
+
+interface IOption {
+    id: string;
+    label: string;
+}
+
+/** Фиксированный список опций для демонстрации кнопки очистки. */
+const OPTIONS: IOption[] = [
+    { id: "with-clear-option-1", label: "Значение 1" },
+    { id: "with-clear-option-2", label: "Значение 2" },
+    { id: "with-clear-option-3", label: "Значение 3" },
+];
+
+export const WithClearButtonExample = () => {
+    /** Ref на target для корректной привязки dropdown. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Id выбранных чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Значение фильтра в input dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Set для быстрых проверок выбранности. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return OPTIONS;
+        }
+
+        return OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
+
+    const selectedOptions = useMemo(() => OPTIONS.filter((opt) => selectedSet.has(opt.id)), [selectedSet]);
+
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
+
+                return [...prev, option.id];
+            }
+
+            return prev.filter((id) => id !== option.id);
+        });
+    };
+
+    /** Очистка фильтра и всех выбранных значений. */
+    const handleClearAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={EComponentSize.MD}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    /** Рендер тегов выбранных значений в target. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
+
+        if (!selectedOptions.length) return null;
 
-### Content `tabIndex={-1}`
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
 
-Чтобы скролл внутри Content был фокусируемым мышью/колесиком (и при этом не участвовал в Tab-последовательности). Для переключения между чекбоксами — TAB идёт по интерактивным детям.
+    return (
+        <div style={{ maxWidth: "320px" }}>
+            <MultiselectField
+                renderTarget={(props) => (
+                    <MultiselectField.Target
+                        {...props}
+                        ref={targetRef}
+                        onClear={handleClearAll}
+                        size={EComponentSize.MD}
+                        fieldLabel="Label"
+                        placeholder="Select to proceed"
+                        label={renderTags()}
+                    />
+                )}
+            >
+                {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                    <MultiselectField.Dropdown
+                        opened={opened}
+                        setOpened={setOpened}
+                        targetRef={dropdownTargetRef}
+                        ref={dropdownRef}
+                        focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                        mobileViewProps={{
+                            children: (
+                                <>
+                                    <DropdownMobileHeader
+                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                    >
+                                        <DropdownMobileInput
+                                            autoFocus={true}
+                                            placeholder="Type to proceed"
+                                            value={filter}
+                                            onChange={(event) => setFilter(event.target.value)}
+                                        />
+                                    </DropdownMobileHeader>
+                                    <DropdownMobileBody>
+                                        {renderCheckboxList()}
+                                        {!!filter.trim().length && !visibleOptions.length && (
+                                            <Text size={ETextSize.B3} className="not-found">
+                                                Nothing was found.
+                                            </Text>
+                                        )}
+                                    </DropdownMobileBody>
+                                    <DropdownMobileFooter>
+                                        <Button
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                            onClick={() => setOpened(false)}
+                                        >
+                                            Button text
+                                        </Button>
+                                        <Button
+                                            theme={EButtonTheme.LINK}
+                                            size={EComponentSize.MD}
+                                            onClick={handleClearAll}
+                                        >
+                                            Button link text
+                                        </Button>
+                                    </DropdownMobileFooter>
+                                </>
+                            ),
+                        }}
+                    >
+                        <MultiselectField.Dropdown.Header>
+                            <FormField size={EComponentSize.SM}>
+                                <FormFieldLabel>Type to proceed</FormFieldLabel>
+                                <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                                <FormFieldPostfix>
+                                    <FormFieldClear onClick={() => setFilter("")} />
+                                </FormFieldPostfix>
+                            </FormField>
+                        </MultiselectField.Dropdown.Header>
+                        <MultiselectField.Dropdown.Content>
+                            {renderCheckboxList()}
+                            {!!filter.trim().length && !visibleOptions.length && (
+                                <div className="not-found md">
+                                    <Text size={ETextSize.B3}>Nothing was found.</Text>
+                                </div>
+                            )}
+                        </MultiselectField.Dropdown.Content>
+                        <MultiselectField.Dropdown.Footer>
+                            <Button
+                                theme={EButtonTheme.SECONDARY}
+                                size={EComponentSize.SM}
+                                onClick={() => setOpened(false)}
+                            >
+                                Button text
+                            </Button>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClearAll}>
+                                Button link text
+                            </Button>
+                        </MultiselectField.Dropdown.Footer>
+                    </MultiselectField.Dropdown>
+                )}
+            </MultiselectField>
+        </div>
+    );
+};
+```
+
+### WithPrefixAndPostfix
 
-### Loader — `LoaderScreen type="small"`
+`stories/MultiselectField/examples/WithPrefixAndPostfixExample.tsx`
 
 ```tsx
-{loading && <LoaderScreen type="small" className={styles.loaderScreen} />}
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    EButtonTheme,
+    EComponentSize,
+    ETooltipSize,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    HelpBox,
+    MultiselectField,
+    Text,
+    ETextSize,
+    Tag,
+    TagGroup,
+    DropdownMobileHeader,
+    DropdownMobileClose,
+    DropdownMobileInput,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    IconWrapper,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+import "../MultiselectField.less";
+
+interface IOption {
+    id: string;
+    label: string;
+}
+
+/** Фиксированный список опций для демонстрации prefix/postfix. */
+const OPTIONS: IOption[] = [
+    { id: "prefix-postfix-option-1", label: "Значение 1" },
+    { id: "prefix-postfix-option-2", label: "Значение 2" },
+    { id: "prefix-postfix-option-3", label: "Значение 3" },
+];
+
+export const WithPrefixAndPostfixExample = () => {
+    /** Ref на target для корректной привязки dropdown. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Id выбранных чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Значение фильтра в input dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Set для быстрых проверок выбранности. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return OPTIONS;
+        }
+
+        return OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
+
+    const selectedOptions = useMemo(() => OPTIONS.filter((opt) => selectedSet.has(opt.id)), [selectedSet]);
+
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
+
+                return [...prev, option.id];
+            }
+
+            return prev.filter((id) => id !== option.id);
+        });
+    };
+
+    const handleClearAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={EComponentSize.MD}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    /** Рендер тегов выбранных значений в target. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
+
+        if (!selectedOptions.length) return null;
+
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
+
+    return (
+        <div style={{ maxWidth: "320px" }}>
+            <MultiselectField
+                renderTarget={(props) => (
+                    <MultiselectField.Target
+                        {...props}
+                        ref={targetRef}
+                        size={EComponentSize.MD}
+                        fieldLabel="Label"
+                        placeholder="Select to proceed"
+                        label={renderTags()}
+                        prefix={
+                            <IconWrapper disableInteraction displayContents>
+                                <DefaulticonStrokePrdIcon20 paletteIndex={5} />
+                            </IconWrapper>
+                        }
+                        postfix={<HelpBox tooltipSize={ETooltipSize.SM}>HelpBox text</HelpBox>}
+                    />
+                )}
+            >
+                {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                    <MultiselectField.Dropdown
+                        opened={opened}
+                        setOpened={setOpened}
+                        targetRef={dropdownTargetRef}
+                        ref={dropdownRef}
+                        focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                        mobileViewProps={{
+                            children: (
+                                <>
+                                    <DropdownMobileHeader
+                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                    >
+                                        <DropdownMobileInput
+                                            autoFocus={true}
+                                            placeholder="Type to proceed"
+                                            value={filter}
+                                            onChange={(event) => setFilter(event.target.value)}
+                                        />
+                                    </DropdownMobileHeader>
+                                    <DropdownMobileBody>
+                                        {renderCheckboxList()}
+                                        {!!filter.trim().length && !visibleOptions.length && (
+                                            <Text size={ETextSize.B3} className="not-found">
+                                                Nothing was found.
+                                            </Text>
+                                        )}
+                                    </DropdownMobileBody>
+                                    <DropdownMobileFooter>
+                                        <Button
+                                            theme={EButtonTheme.SECONDARY}
+                                            size={EComponentSize.MD}
+                                            onClick={() => setOpened(false)}
+                                        >
+                                            Button text
+                                        </Button>
+                                        <Button
+                                            theme={EButtonTheme.LINK}
+                                            size={EComponentSize.MD}
+                                            onClick={handleClearAll}
+                                        >
+                                            Button link text
+                                        </Button>
+                                    </DropdownMobileFooter>
+                                </>
+                            ),
+                        }}
+                    >
+                        <MultiselectField.Dropdown.Header>
+                            <FormField size={EComponentSize.SM}>
+                                <FormFieldLabel>Type to proceed</FormFieldLabel>
+                                <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                                <FormFieldPostfix>
+                                    <FormFieldClear onClick={() => setFilter("")} />
+                                </FormFieldPostfix>
+                            </FormField>
+                        </MultiselectField.Dropdown.Header>
+                        <MultiselectField.Dropdown.Content>
+                            {renderCheckboxList()}
+                            {!!filter.trim().length && !visibleOptions.length && (
+                                <div className="not-found md">
+                                    <Text size={ETextSize.B3}>Nothing was found.</Text>
+                                </div>
+                            )}
+                        </MultiselectField.Dropdown.Content>
+                        <MultiselectField.Dropdown.Footer>
+                            <Button
+                                theme={EButtonTheme.SECONDARY}
+                                size={EComponentSize.SM}
+                                onClick={() => setOpened(false)}
+                            >
+                                Button text
+                            </Button>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClearAll}>
+                                Button link text
+                            </Button>
+                        </MultiselectField.Dropdown.Footer>
+                    </MultiselectField.Dropdown>
+                )}
+            </MultiselectField>
+        </div>
+    );
+};
 ```
 
-- Маленький оверлей (см. LoaderScreen-AI).
-- Visibility — потребитель контролирует `loading` prop.
+### Example
 
----
+`stories/MultiselectField/examples/ProductionExample.tsx`
 
-## Инварианты
+```tsx
+import React, { useMemo, useRef, useState } from "react";
+import {
+    Button,
+    Checkbox,
+    CheckboxYGroup,
+    DropdownMobileBody,
+    DropdownMobileClose,
+    DropdownMobileFooter,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    EButtonTheme,
+    EComponentSize,
+    EFontType,
+    ETextSize,
+    ETooltipSize,
+    FormField,
+    FormFieldClear,
+    FormFieldDescription,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    HelpBox,
+    Link,
+    MultiselectField,
+    Tag,
+    TagGroup,
+    Text,
+} from "@sberbusiness/triplex-next";
+import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
+import "../MultiselectField.less";
 
-- **`size` через `MultiselectFieldContext`** — публичная точка расширения; не заменять на prop-drilling без решения по обратной совместимости.
-- **`MultiselectField.Target = SelectExtendedFieldTarget`** — псевдоним, не своя реализация. При рефакторинге SelectExtendedField — проверять, что Target совместим.
-- **`EDropdownWidth.MIN_TARGET`** захардкожен — ширина dropdown'а всегда ≥ ширины target'а.
-- **`FocusTrap clickOutsideDeactivates: true`** — контракт: клик вне → закрытие. При смене — потребуется явное `onOpenedChange`.
-- **`MultiselectFieldContext.size` default `MD`** — не менять без breaking-проверки.
-- **`Content.loading`** — контроль loader'а, типичное API.
-- **ForwardRef** на корне `MultiselectField` и на `MultiselectFieldDropdown`.
-- **Header/Footer/Content — `React.FC`** (без forwardRef).
+interface IOption {
+    id: string;
+    label: string;
+}
 
----
+/** Фиксированный список опций для production-like примера. */
+const OPTIONS: IOption[] = [
+    { id: "production-option-1", label: "Значение 1" },
+    { id: "production-option-2", label: "Значение 2" },
+    { id: "production-option-3", label: "Значение 3" },
+];
 
-## Accessibility
+export const ProductionExample = () => (
+    <div style={{ maxWidth: "320px" }}>
+        <ProductionMultiselect />
+        <FormFieldDescription>
+            <Text tag="div" size={ETextSize.B4} type={EFontType.SECONDARY}>
+                (21) Description{" "}
+                <Link href="#" onClick={(event) => event.preventDefault()}>
+                    Link text
+                </Link>
+            </Text>
+        </FormFieldDescription>
+    </div>
+);
 
-- FocusTrap удерживает фокус внутри dropdown'а → клавиатурная навигация между чекбоксами/кнопками корректна.
-- `role="presentation"` на wrapper'е FocusTrap — правильно: обёртка не несёт семантики.
-- **Нет `aria-multiselectable="true"` на dropdown'е** — потребителям для скринридеров имеет смысл добавить через `...rest` на Content / Dropdown.
-- Чекбоксы внутри Content — стандартный `<Checkbox>` с нативной keyboard-семантикой.
-- Target — `SelectExtendedFieldTarget` обеспечивает `aria-expanded` / `aria-haspopup="listbox"` (проверь в SelectExtendedField, если не — гэп).
+const ProductionMultiselect = () => {
+    /** Ref на target для корректного позиционирования dropdown. */
+    const targetRef = useRef<HTMLDivElement>(null);
+    /** Id выбранных чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Значение фильтра в input dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Set для быстрых проверок выбранности. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return OPTIONS;
+        }
 
----
+        return OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
 
-## Дизайн-токены
+    const selectedOptions = useMemo(() => OPTIONS.filter((opt) => selectedSet.has(opt.id)), [selectedSet]);
 
-Нет собственных. Размеры/padding/цвет от `Dropdown`, `SelectExtendedField`, `Checkbox`.
+    const handleToggle = (option: IOption, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(option.id)) {
+                    return prev;
+                }
 
----
+                return [...prev, option.id];
+            }
 
-## Связанные компоненты
+            return prev.filter((id) => id !== option.id);
+        });
+    };
 
-- `SelectExtendedField` / `SelectExtendedFieldTarget` — основа.
-- `Dropdown` — popover-container.
-- `Checkbox` — типичный элемент в Content.
-- `LoaderScreen` — loader в Content.
-- `focus-trap-react` — FocusTrap.
+    /** Очистка фильтра и всех выбранных значений. */
+    const handleClearAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
 
----
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={EComponentSize.MD}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
 
-## Stories
+    /** Рендер тегов выбранных значений в target. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
 
-`stories/MultiselectField/MultiselectField.stories.tsx`
-Примеры: `stories/MultiselectField/examples/`
+        if (!selectedOptions.length) return null;
 
----
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedOptions.map((opt) => (
+                    <Tag
+                        key={opt.id}
+                        id={`tag-${opt.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => handleToggle(opt, false)}
+                    >
+                        {opt.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
 
-## История изменений
+    return (
+        <MultiselectField
+            renderTarget={(props) => (
+                <MultiselectField.Target
+                    {...props}
+                    ref={targetRef}
+                    size={EComponentSize.MD}
+                    onClear={handleClearAll}
+                    fieldLabel="Label"
+                    placeholder="Select to proceed"
+                    label={renderTags()}
+                    prefix={<DefaulticonStrokePrdIcon20 paletteIndex={5} />}
+                    postfix={<HelpBox tooltipSize={ETooltipSize.SM}>HelpBox text</HelpBox>}
+                />
+            )}
+        >
+            {({ opened, setOpened, targetRef: dropdownTargetRef, dropdownRef }) => (
+                <MultiselectField.Dropdown
+                    opened={opened}
+                    setOpened={setOpened}
+                    targetRef={dropdownTargetRef}
+                    ref={dropdownRef}
+                    focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                    mobileViewProps={{
+                        children: (
+                            <>
+                                <DropdownMobileHeader
+                                    controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                >
+                                    <DropdownMobileInput
+                                        autoFocus={true}
+                                        placeholder="Type to proceed"
+                                        value={filter}
+                                        onChange={(event) => setFilter(event.target.value)}
+                                    />
+                                </DropdownMobileHeader>
+                                <DropdownMobileBody>
+                                    {renderCheckboxList()}
+                                    {!!filter.trim().length && !visibleOptions.length && (
+                                        <Text size={ETextSize.B3} className="not-found">
+                                            Nothing was found.
+                                        </Text>
+                                    )}
+                                </DropdownMobileBody>
+                                <DropdownMobileFooter>
+                                    <Button
+                                        theme={EButtonTheme.SECONDARY}
+                                        size={EComponentSize.MD}
+                                        onClick={() => setOpened(false)}
+                                    >
+                                        Button text
+                                    </Button>
+                                    <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={handleClearAll}>
+                                        Button link text
+                                    </Button>
+                                </DropdownMobileFooter>
+                            </>
+                        ),
+                    }}
+                >
+                    <MultiselectField.Dropdown.Header>
+                        <FormField size={EComponentSize.SM}>
+                            <FormFieldLabel>Type to proceed</FormFieldLabel>
+                            <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                            <FormFieldPostfix>
+                                <FormFieldClear onClick={() => setFilter("")} />
+                            </FormFieldPostfix>
+                        </FormField>
+                    </MultiselectField.Dropdown.Header>
+                    <MultiselectField.Dropdown.Content>
+                        {renderCheckboxList()}
+                        {!!filter.trim().length && !visibleOptions.length && (
+                            <div className="not-found md">
+                                <Text size={ETextSize.B3}>Nothing was found.</Text>
+                            </div>
+                        )}
+                    </MultiselectField.Dropdown.Content>
+                    <MultiselectField.Dropdown.Footer>
+                        <Button
+                            theme={EButtonTheme.SECONDARY}
+                            size={EComponentSize.SM}
+                            onClick={() => setOpened(false)}
+                        >
+                            Button text
+                        </Button>
+                        <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClearAll}>
+                            Button link text
+                        </Button>
+                    </MultiselectField.Dropdown.Footer>
+                </MultiselectField.Dropdown>
+            )}
+        </MultiselectField>
+    );
+};
+```
+
+### WithCheckboxTree
+
+`stories/MultiselectField/examples/WithCheckboxTreeExample.tsx`
+
+```tsx
+import React, { useMemo, useState } from "react";
+import {
+    Button,
+    CheckboxTreeExtended,
+    EButtonTheme,
+    EComponentSize,
+    FormField,
+    FormFieldClear,
+    FormFieldInput,
+    FormFieldLabel,
+    FormFieldPostfix,
+    MultiselectField,
+    Tag,
+    TagGroup,
+    Text,
+    ETextSize,
+} from "@sberbusiness/triplex-next";
+import "../MultiselectField.less";
+
+interface INode {
+    id: string;
+    label: string;
+    children?: INode[];
+}
+
+/** Генерация исходного дерева чекбоксов для примера. */
+const createNodes = (): INode[] => [
+    {
+        id: "multiselect-option-0",
+        label: "Все",
+        children: [
+            {
+                id: "multiselect-option-1",
+                label: "Группа 1",
+                children: [...Array(5).keys()].map((item) => ({
+                    id: `multiselect-option-1-${item}`,
+                    label: `Значение 1-${item}`,
+                })),
+            },
+            {
+                id: "multiselect-option-2",
+                label: "Группа 2",
+                children: [
+                    { id: "multiselect-option-2-1", label: "Значение 2-1" },
+                    { id: "multiselect-option-2-2", label: "Значение 2-2" },
+                ],
+            },
+            { id: "multiselect-option-3", label: "Значение 3" },
+        ],
+    },
+];
+
+/** Получение всех leaf-id для ноды и ее потомков. */
+const getLeafIds = (node: INode): string[] => (node.children ? node.children.flatMap(getLeafIds) : [node.id]);
+
+export const WithCheckboxTreeExample = () => {
+    /** Мемоизированные исходные ноды дерева, чтобы не пересоздавать их на каждый рендер. */
+    const nodes = useMemo(() => createNodes(), []);
+    /** Массив id выбранных leaf-чекбоксов. */
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    /** Текущее значение фильтра в поле поиска dropdown. */
+    const [filter, setFilter] = useState("");
+    /** Set для быстрых O(1) проверок выбранности чекбокса по id. */
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    /** Переключение состояния ноды: выбирает/снимает все leaf-потомки. */
+    const handleToggle = (node: INode, checked: boolean) => {
+        const leafIds = getLeafIds(node);
+        const leafSet = new Set(leafIds);
+
+        setSelectedIds((prev) => {
+            if (checked) {
+                return Array.from(new Set([...prev, ...leafIds]));
+            }
+
+            return prev.filter((id) => !leafSet.has(id));
+        });
+    };
+    /** Проверка, подходит ли нода под фильтр сама или через дочерние элементы. */
+    const doesNodeMatchFilter = (node: INode): boolean => {
+        const lowerFilter = filter.trim().toLowerCase();
+        if (!lowerFilter.length) return true;
+        if (node.label.toLowerCase().includes(lowerFilter)) return true;
+        return Boolean(node.children?.some(doesNodeMatchFilter));
+    };
+
+    /** Рекурсивный рендер ноды дерева с вычислением checked/bulk состояния. */
+    const renderNode = (node: INode): React.ReactNode => {
+        if (!doesNodeMatchFilter(node)) return null;
+
+        const leafIds = getLeafIds(node);
+        const checkedCount = leafIds.filter((id) => selectedSet.has(id)).length;
+        const checked = checkedCount > 0;
+        const bulk = checked && checkedCount < leafIds.length;
+
+        return (
+            <CheckboxTreeExtended.Node
+                key={node.id}
+                id={node.id}
+                opened={Boolean(node.children)}
+                checkbox={(props) => (
+                    <CheckboxTreeExtended.Checkbox
+                        {...props}
+                        checked={checked}
+                        bulk={bulk}
+                        onChange={(event) => handleToggle(node, event.target.checked)}
+                    >
+                        {" "}
+                        {node.label}
+                    </CheckboxTreeExtended.Checkbox>
+                )}
+            >
+                {node.children?.map(renderNode)}
+            </CheckboxTreeExtended.Node>
+        );
+    };
+
+    /** Плоский список выбранных leaf-нод для рендера тегов в target. */
+    const selectedLeafNodes = nodes
+        .flatMap(getLeafIds)
+        .filter((id) => selectedSet.has(id))
+        .map((id) => ({ id, label: id.replace("multiselect-option-", "Значение ") }));
+    /** Рендер тегов выбранных значений или счетчика, если выбранных значений много. */
+    const renderTags = () => {
+        const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
+        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
+            if (event.code === "Enter" || event.code === "Space") {
+                event.stopPropagation();
+            }
+        };
+
+        if (!selectedLeafNodes.length) return null;
+        if (selectedLeafNodes.length > 3) {
+            return (
+                <Tag
+                    id="many"
+                    size={EComponentSize.SM}
+                    onFocus={handleTagFocus}
+                    onBlur={handleTagBlur}
+                    onClick={handleTagClick}
+                    onKeyDown={handleTagKeyDown}
+                    onRemove={() => setSelectedIds([])}
+                >
+                    {`Выбрано ${selectedLeafNodes.length} значения`}
+                </Tag>
+            );
+        }
+        return (
+            <TagGroup size={EComponentSize.SM}>
+                {selectedLeafNodes.map((node) => (
+                    <Tag
+                        key={node.id}
+                        id={`tag-${node.id}`}
+                        size={EComponentSize.SM}
+                        onFocus={handleTagFocus}
+                        onBlur={handleTagBlur}
+                        onClick={handleTagClick}
+                        onKeyDown={handleTagKeyDown}
+                        onRemove={() => setSelectedIds((prev) => prev.filter((id) => id !== node.id))}
+                    >
+                        {node.label}
+                    </Tag>
+                ))}
+            </TagGroup>
+        );
+    };
+
+    return (
+        <div style={{ maxWidth: "320px" }}>
+            <MultiselectField
+                renderTarget={(props) => (
+                    <MultiselectField.Target
+                        {...props}
+                        size={EComponentSize.MD}
+                        fieldLabel="Label"
+                        placeholder="Select to proceed"
+                        label={renderTags()}
+                    />
+                )}
+            >
+                {({ opened, setOpened, dropdownRef, targetRef }) => (
+                    <MultiselectField.Dropdown
+                        opened={opened}
+                        setOpened={setOpened}
+                        targetRef={targetRef}
+                        ref={dropdownRef}
+                        focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                    >
+                        <MultiselectField.Dropdown.Header>
+                            <FormField size={EComponentSize.SM}>
+                                <FormFieldLabel>Type to proceed</FormFieldLabel>
+                                <FormFieldInput value={filter} onChange={(event) => setFilter(event.target.value)} />
+                                <FormFieldPostfix>
+                                    <FormFieldClear onClick={() => setFilter("")} />
+                                </FormFieldPostfix>
+                            </FormField>
+                        </MultiselectField.Dropdown.Header>
+                        <MultiselectField.Dropdown.Content>
+                            <CheckboxTreeExtended>{nodes.map(renderNode)}</CheckboxTreeExtended>
+                            {!!filter.length && !nodes.some(doesNodeMatchFilter) && (
+                                <Text size={ETextSize.B3}>Nothing was found.</Text>
+                            )}
+                        </MultiselectField.Dropdown.Content>
+
+                        <MultiselectField.Dropdown.Footer>
+                            <Button
+                                theme={EButtonTheme.SECONDARY}
+                                size={EComponentSize.SM}
+                                onClick={() => setOpened(false)}
+                            >
+                                Button text
+                            </Button>
+                            <Button
+                                theme={EButtonTheme.LINK}
+                                size={EComponentSize.SM}
+                                onClick={() => setSelectedIds([])}
+                            >
+                                Button link text
+                            </Button>
+                        </MultiselectField.Dropdown.Footer>
+                    </MultiselectField.Dropdown>
+                )}
+            </MultiselectField>
+        </div>
+    );
+};
+```
 
-| Дата | Изменение |
-|---|---|
-| 2026-04-18 | Создан документ |