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

package/bundle/components/ChipMultiselect.md

@@ -0,0 +1,1251 @@
+---
+component: ChipMultiselect
+category: Chips
+related: [Chip, ChipGroup, ChipSelect, MultiselectField, SelectExtendedField]
+tokens: []
+stories: stories/Chips/ChipMultiselect.stories.tsx
+version: "1.0"
+---
+
+# ChipMultiselect
+
+## Назначение
+
+Фильтр-чипс с множественным выбором: поле выбора выглядит как `Chip`, а по нажатию
+раскрывается произвольный выпадающий блок — список чекбоксов, дерево категорий,
+поиск с кнопками подтверждения.
+
+Собственной разметки у компонента нет. Это связка двух готовых компонентов:
+`MultiselectField` владеет состоянием открытости и выпадающим блоком, а в его
+`renderTarget` подставляется `Chip` со счётчиком выбранного, стрелкой раскрытия
+и кнопкой сброса.
+
+Компонент **не владеет выбором**. Он не знает, что выбрано и сколько: `selected`,
+текст в `label` / `displayedValue` и реакция на `clearSelected` — целиком на
+потребителе. Компонент только отражает переданное состояние и сообщает о намерении
+сбросить его.
+
+Используй когда: над таблицей или списком нужен компактный фильтр с множественным
+выбором, а выбранное сворачивается в счётчик («Выбрано 3») вместо тегов.
+
+Не используй когда:
+
+- нужно полноразмерное поле формы с тегами выбранного — используй `MultiselectField` напрямую;
+- нужен выбор одного значения в виде чипса — используй `ChipSelect`;
+- нужен чипс-переключатель без выпадающего блока — используй `Chip`;
+- нужен выпадающий блок без поля выбора — используй `Dropdown`.
+
+---
+
+## Варианты и props
+
+`IChipMultiselectProps` собирается из трёх источников:
+
+1. `Omit<IMultiselectFieldProps, "renderTarget">` — всё поведение выпадающего
+   блока: обязательный render-prop `children`, `size`, `onOpen` / `onClose`,
+   `closeOnTab` и атрибуты корневого `<div>`. `renderTarget` исключён:
+   поле выбора компонент рисует сам и переопределить его нельзя.
+2. `Pick<IChipProps, "type">` — визуальный тип чипса (`EChipType`).
+3. Собственные props — ниже.
+
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `label` | `React.ReactNode` | Название фильтра. Показывается, пока ничего не выбрано, и как запасной вариант при `selected` без `displayedValue` |
+| `clearSelected` | `() => void` | Вызывается по нажатию на кнопку сброса. Компонент сам ничего не сбрасывает — снять выбор должен потребитель |
+| `children` | render-prop | Выпадающий блок. Приходит из `MultiselectField`: `({ opened, setOpened, targetRef, dropdownRef }) => ReactNode` |
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `selected` | `boolean` | `undefined` | Признак «выбран хотя бы один вариант». Переключает и внешний вид чипса, и содержимое postfix: стрелка → кнопка сброса |
+| `displayedValue` | `React.ReactNode` | `undefined` | Текст вместо `label` при `selected`. Обычно счётчик выбранного |
+| `disabled` | `boolean` | `undefined` | Уходит только на target-`Chip`: приглушает его и убирает из таба. Открытие списка по клику **не** блокирует — см. «Ограничения» |
+| `size` | `EComponentSize` | `EComponentSize.MD` | Раздаётся одновременно target-чипсу (и его иконкам) и частям выпадающего блока через `MultiselectFieldContext` |
+| `type` | `EChipType` | `EChipType.TYPE_1` | Визуальный тип target-чипса |
+
+### Как считается содержимое чипса
+
+Одна строка, о которой стоит помнить при правках:
+`selected ? (displayedValue ?? label) : label`.
+
+- ничего не выбрано → всегда `label`, `displayedValue` игнорируется;
+- выбрано и `displayedValue` задан → `displayedValue`;
+- выбрано, а `displayedValue` не задан (или `null`) → снова `label`.
+
+Postfix переключается тем же флагом `selected`: `ChipDropdownArrow` (со стрелкой,
+повёрнутой при `opened`) → `ChipClearButton`.
+
+### Ограничения
+
+Известные особенности текущей реализации — учитывай при использовании, но не
+«чини» их попутно: это заметные изменения поведения, они решаются отдельными
+задачами.
+
+- **`disabled` приглушает чипс, но ничего не запрещает.** Уходит он только на
+  target-`Chip`, и тот при `disabled` лишь добавляет класс и ставит
+  `tabIndex={-1}` — обработчик `onClick` остаётся на элементе. Отсюда два
+  следствия: клик мышью по отключённому чипсу раскроет выпадающий блок
+  (с клавиатуры — нет, элемент не в табе), а кнопка сброса при
+  `disabled` + `selected` вообще не получает `disabled`: она остаётся в табе
+  и по клику по-прежнему вызывает `clearSelected`. То же верно для `ChipSelect`.
+  Если продукту нужен настоящий запрет — не рендери компонент или перехвати
+  события выше.
+- **У кнопки сброса нет доступного имени.** `ChipClearButton` — `ButtonIcon`
+  с `aria-hidden` иконкой и без `aria-label`, а прокинуть его снаружи нельзя:
+  в `IChipMultiselectProps` нет пути к props кнопки сброса. Скринридер прочитает
+  её как безымянную кнопку.
+- **Нет связки `aria-controls`** между полем выбора и выпадающим блоком,
+  а роль поля — `listbox` вместо `combobox` (см. «Accessibility»).
+
+---
+
+## Дизайн-токены
+
+Собственных токенов нет. Единственный класс, который компонент добавляет сам —
+`chipGroupItem` из `Chip.module.less`, и в нём только `display: inline-block`
+(чтобы чипс корректно вставал в ряд `ChipGroup`).
+
+Внешний вид приходит целиком из вложенных компонентов: цвета и состояния — из
+`Chip` (группа токенов `Chip.*`, см. `Chip-ai.md`), фокус кнопки сброса — из
+`Chip.Shadow_Focus`, разделитель выпадающего блока — из `MultiselectField.Divider_Color`.
+Переопределять их нужно там, а не здесь.
+
+---
+
+## Инварианты
+
+- `forwardRef` на компоненте — не убирать.
+- **Ref уходит на target-`Chip`, а не на корневой элемент `MultiselectField`.**
+  Это осознанный контракт (потребителю нужен именно чипс — для позиционирования
+  и измерений), он зафиксирован unit-тестом и используется в stories.
+  Известное расхождение: тип объявлен как `HTMLDivElement`, а фактический
+  элемент — `<span>` (`HTMLSpanElement`), потому что `Chip` рендерит `<span>`.
+  Исправление типа — breaking change для потребителей с `useRef<HTMLDivElement>`,
+  поэтому тип оставлен как есть; не «чини» его попутно.
+- `renderTarget` исключён из публичных props через `Omit` — поле выбора всегда
+  рисует сам компонент. Не открывать его наружу без обсуждения.
+- `role="listbox"` на target-`Chip` перебивает `role="button"`, который `Chip`
+  ставит по умолчанию: в `Chip` `...restProps` разложены после `role`.
+  Порядок спреда в `Chip.tsx` менять нельзя, иначе роль здесь молча вернётся к `button`.
+- Публичные имена `ChipMultiselect`, `IChipMultiselectProps` экспортируются из
+  `src/components/Chip/index.ts` — сохранять.
+- Класс `chipGroupItem` на корневом элементе — по нему `ChipGroup` раскладывает
+  дочерние элементы; не убирать и не переименовывать.
+- `clearSelected` обязателен и вызывается без аргументов — сигнатуру не расширять
+  без обсуждения.
+
+---
+
+## Accessibility
+
+- Поле выбора — `<span role="listbox">` с `tabIndex=0` (`-1` при `disabled`) и
+  `aria-expanded`, отражающим состояние выпадающего блока.
+- Клавиатура на поле выбора: `Enter` и `Space` переключают открытость (открывают
+  и закрывают). Прокрутку страницы по `Space` гасит сам `Chip`. `Escape` и клик
+  вне поля закрывают блок — это делает `SelectExtendedField` уровнем ниже.
+- Кнопка сброса живёт внутри поля выбора, поэтому её события специально
+  **не** доходят до чипса: `click`, `Enter` и `Space` останавливают всплытие.
+  Иначе сброс выбора попутно открывал бы список. Другие клавиши всплывают штатно.
+- Кнопка сброса — `ButtonIcon` с `aria-hidden` иконкой внутри. Доступного имени
+  у неё сейчас нет, и задать его снаружи нечем: props кнопки сброса не
+  прокидываются через `IChipMultiselectProps`. Скринридер прочитает её как
+  безымянную кнопку — известный пробел, см. «Ограничения».
+- `role="listbox"` описывает не раскрывающий элемент, а список: эталонная роль
+  для такого триггера — `combobox` (как в `ChipSort`). Связки `aria-controls`
+  между полем выбора и выпадающим блоком тоже нет. Менять это здесь — заметное
+  изменение поведения, поэтому решается отдельной задачей.
+- Перехват фокуса внутри открытого блока и возврат фокуса на поле после закрытия
+  с клавиатуры обеспечивает `MultiselectField` — см. `MultiselectField-ai.md`.
+
+---
+
+## Связанные компоненты
+
+- `Chip` — база поля выбора. Компонент рендерит его в `renderTarget` и наследует от
+  него prop `type`; все визуальные состояния и токены живут там.
+- `ChipGroup` — контейнер для ряда чипсов; корневой класс `chipGroupItem`
+  проставляется именно ради него.
+- `ChipSelect` — тот же чипс-фильтр, но для выбора одного значения.
+- `MultiselectField` — родитель по типам и по рендеру: даёт состояние открытости,
+  выпадающий блок (`MultiselectField.Dropdown`), focus trap и раздачу размера.
+- `SelectExtendedField` — уровнем ниже `MultiselectField`; из него приходит тип
+  `ISelectExtendedFieldTargetProvideProps` (`opened` / `setOpened`) и закрытие по
+  `Escape` и клику вне поля.
+- `ChipClearButton` и `ChipDropdownArrow` — части postfix внутри той же папки.
+  Отдельных AI.md у них нет: это тривиальные обёртки над `ButtonIcon` и `<span>`
+  с иконкой, выбирающие иконку по `size`.
+
+---
+
+## Stories
+
+Основные истории: `stories/Chips/ChipMultiselect.stories.tsx`
+Файлы примеров: `stories/Chips/examples/ChipMultiselect/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `type`, `size`, `label`, `displayedValue`, `disabled` |
+| `Default` | `DefaultExample.tsx` | Базовое использование: чекбоксы в выпадающем блоке, фильтр по вводу, сброс через `clearSelected`, мобильный вид |
+| `Types` | `TypesExample.tsx` | `TYPE_1` и `TYPE_2` |
+| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG — размер раздаётся и чипсу, и выпадающему блоку |
+| `Loading` | `LoadingExample.tsx` | Загрузка содержимого выпадающего блока (`MultiselectField.Dropdown.Content` с `loading`) |
+| `VisualTests` | `VisualTestsExample.tsx` | Скриншот-регрессия: все размеры с раскрытыми списками — пример сам открывает их в `useLayoutEffect`, `play`-функции у story нет |
+| `Example: with CheckboxTree` | `WithCheckboxTreeExample.tsx` | Дерево категорий вместо плоского списка чекбоксов |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-09-07 | Создан документ (TRI-135). AI-рефакторинг: JSDoc на props и компоненте, мемоизация обработчиков кнопки сброса, порядок импортов; поведение и публичный API не менялись |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Chips/examples/ChipMultiselect/DefaultExample.tsx`
+
+```tsx
+import React, { useMemo, useState } from "react";
+import {
+    MultiselectField,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    DropdownMobileClose,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    EDropdownAlignment,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    FormField,
+    FormFieldLabel,
+    FormFieldInput,
+    FormFieldPostfix,
+    FormFieldClear,
+    Checkbox,
+    CheckboxYGroup,
+    ChipMultiselect,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+import { CHIP_MULTISELECT_OPTIONS } from "./storyConstants";
+
+export const DefaultExample = () => {
+    const chipSize = EComponentSize.MD;
+
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [filter, setFilter] = useState("");
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return CHIP_MULTISELECT_OPTIONS;
+        }
+
+        return CHIP_MULTISELECT_OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
+
+    const handleToggle = (optionId: string, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(optionId)) {
+                    return prev;
+                }
+
+                return [...prev, optionId];
+            }
+
+            return prev.filter((id) => id !== optionId);
+        });
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={chipSize}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt.id, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    const renderDropdownContent = () => {
+        const renderCheckboxes = !filter.trim() || visibleOptions.length > 0;
+        return renderCheckboxes ? (
+            renderCheckboxList()
+        ) : (
+            <div className={`not-found ${chipSize}`}>
+                <Text size={ETextSize.B3}>Nothing was found</Text>
+            </div>
+        );
+    };
+
+    const unselectAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const handleClickClearFilter = () => {
+        unselectAll();
+    };
+
+    const handleClearInput = () => {
+        setFilter("");
+    };
+
+    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+    };
+
+    return (
+        <ChipMultiselect
+            size={chipSize}
+            clearSelected={unselectAll}
+            selected={selectedIds.length > 0}
+            label="Multiselect label"
+            displayedValue="Multiselect value"
+        >
+            {({ opened, setOpened, targetRef, dropdownRef }) => (
+                <MultiselectField.Dropdown
+                    opened={opened}
+                    setOpened={setOpened}
+                    targetRef={targetRef}
+                    ref={dropdownRef}
+                    alignment={EDropdownAlignment.LEFT}
+                    focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                    mobileViewProps={{
+                        children: (
+                            <>
+                                <DropdownMobileHeader
+                                    controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                >
+                                    <DropdownMobileInput
+                                        autoFocus={true}
+                                        placeholder="Type to proceed"
+                                        value={filter}
+                                        onChange={handleFilterChange}
+                                    />
+                                </DropdownMobileHeader>
+                                <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
+                                <DropdownMobileFooter>
+                                    <Button
+                                        theme={EButtonTheme.GENERAL}
+                                        size={EComponentSize.SM}
+                                        onClick={() => setOpened(false)}
+                                    >
+                                        Button text
+                                    </Button>
+                                    <Button
+                                        theme={EButtonTheme.LINK}
+                                        size={EComponentSize.SM}
+                                        onClick={handleClickClearFilter}
+                                    >
+                                        Button link text
+                                    </Button>
+                                </DropdownMobileFooter>
+                            </>
+                        ),
+                    }}
+                >
+                    <MultiselectField.Dropdown.Header>
+                        <FormField size={EComponentSize.SM}>
+                            <FormFieldLabel>Type to proceed</FormFieldLabel>
+                            <FormFieldInput value={filter} onChange={handleFilterChange} />
+                            <FormFieldPostfix>
+                                <FormFieldClear onClick={handleClearInput} />
+                            </FormFieldPostfix>
+                        </FormField>
+                    </MultiselectField.Dropdown.Header>
+                    <MultiselectField.Dropdown.Content>{renderDropdownContent()}</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={handleClickClearFilter}>
+                            Button link text
+                        </Button>
+                    </MultiselectField.Dropdown.Footer>
+                </MultiselectField.Dropdown>
+            )}
+        </ChipMultiselect>
+    );
+};
+```
+
+### Types
+
+`stories/Chips/examples/ChipMultiselect/TypesExample.tsx`
+
+```tsx
+import React, { useMemo, useState } from "react";
+import clsx from "clsx";
+import {
+    MultiselectField,
+    EComponentSize,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    DropdownMobileClose,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    EDropdownAlignment,
+    Button,
+    EButtonTheme,
+    FormField,
+    FormFieldLabel,
+    FormFieldInput,
+    FormFieldPostfix,
+    FormFieldClear,
+    Checkbox,
+    CheckboxYGroup,
+    ChipMultiselect,
+    EChipType,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+import { CHIP_MULTISELECT_OPTIONS } from "./storyConstants";
+
+type TypeItemProps = {
+    type: EChipType;
+    label: string;
+};
+
+const TypeItem = ({ type, label }: TypeItemProps) => {
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [filter, setFilter] = useState("");
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return CHIP_MULTISELECT_OPTIONS;
+        }
+
+        return CHIP_MULTISELECT_OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
+
+    const handleToggle = (optionId: string, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(optionId)) {
+                    return prev;
+                }
+
+                return [...prev, optionId];
+            }
+
+            return prev.filter((id) => id !== optionId);
+        });
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt.id, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    const renderDropdownContent = () => {
+        const renderCheckboxes = !filter.trim() || visibleOptions.length > 0;
+        return renderCheckboxes ? (
+            renderCheckboxList()
+        ) : (
+            <div className={clsx("not-found", "md")}>
+                <Text size={ETextSize.B3}>Nothing was found</Text>
+            </div>
+        );
+    };
+
+    const unselectAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const handleClickClearFilter = () => {
+        unselectAll();
+    };
+
+    const handleClearInput = () => {
+        setFilter("");
+    };
+
+    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+    };
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <ChipMultiselect
+                type={type}
+                clearSelected={unselectAll}
+                selected={selectedIds.length > 0}
+                label="Multiselect label"
+                displayedValue="Multiselect value"
+            >
+                {({ opened, setOpened, targetRef, dropdownRef }) => (
+                    <MultiselectField.Dropdown
+                        opened={opened}
+                        setOpened={setOpened}
+                        targetRef={targetRef}
+                        ref={dropdownRef}
+                        alignment={EDropdownAlignment.LEFT}
+                        focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                        mobileViewProps={{
+                            children: (
+                                <>
+                                    <DropdownMobileHeader
+                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                    >
+                                        <DropdownMobileInput
+                                            autoFocus={true}
+                                            placeholder="Type to proceed"
+                                            value={filter}
+                                            onChange={handleFilterChange}
+                                        />
+                                    </DropdownMobileHeader>
+                                    <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
+                                    <DropdownMobileFooter>
+                                        <Button
+                                            theme={EButtonTheme.GENERAL}
+                                            size={EComponentSize.SM}
+                                            onClick={() => setOpened(false)}
+                                        >
+                                            Button text
+                                        </Button>
+                                        <Button
+                                            theme={EButtonTheme.LINK}
+                                            size={EComponentSize.SM}
+                                            onClick={handleClickClearFilter}
+                                        >
+                                            Button link text
+                                        </Button>
+                                    </DropdownMobileFooter>
+                                </>
+                            ),
+                        }}
+                    >
+                        <MultiselectField.Dropdown.Header>
+                            <FormField size={EComponentSize.SM}>
+                                <FormFieldLabel>Type to proceed</FormFieldLabel>
+                                <FormFieldInput value={filter} onChange={handleFilterChange} />
+                                <FormFieldPostfix>
+                                    <FormFieldClear onClick={handleClearInput} />
+                                </FormFieldPostfix>
+                            </FormField>
+                        </MultiselectField.Dropdown.Header>
+                        <MultiselectField.Dropdown.Content>{renderDropdownContent()}</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={handleClickClearFilter}>
+                                Button link text
+                            </Button>
+                        </MultiselectField.Dropdown.Footer>
+                    </MultiselectField.Dropdown>
+                )}
+            </ChipMultiselect>
+        </div>
+    );
+};
+
+const typeOptions = Object.values(EChipType).map((type) => ({
+    value: type,
+    label: type.toUpperCase(),
+}));
+
+export const TypesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {typeOptions.map(({ value, label }) => (
+            <TypeItem key={value} type={value} label={label} />
+        ))}
+    </div>
+);
+```
+
+### Sizes
+
+`stories/Chips/examples/ChipMultiselect/SizesExample.tsx`
+
+```tsx
+import React, { useMemo, useState } from "react";
+import clsx from "clsx";
+import {
+    EComponentSize,
+    MultiselectField,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    DropdownMobileClose,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    EDropdownAlignment,
+    Button,
+    EButtonTheme,
+    FormField,
+    FormFieldLabel,
+    FormFieldInput,
+    FormFieldPostfix,
+    FormFieldClear,
+    Checkbox,
+    CheckboxYGroup,
+    ChipMultiselect,
+    ETextSize,
+    Text,
+} from "@sberbusiness/triplex-next";
+import { CHIP_MULTISELECT_OPTIONS } from "./storyConstants";
+
+type SizeItemProps = {
+    size: EComponentSize;
+    label: string;
+};
+
+const SizeItem = ({ size, label }: SizeItemProps) => {
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [filter, setFilter] = useState("");
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return CHIP_MULTISELECT_OPTIONS;
+        }
+
+        return CHIP_MULTISELECT_OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
+
+    const handleToggle = (optionId: string, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(optionId)) {
+                    return prev;
+                }
+
+                return [...prev, optionId];
+            }
+
+            return prev.filter((id) => id !== optionId);
+        });
+    };
+
+    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.id, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    const renderDropdownContent = () => {
+        const renderCheckboxes = !filter.trim() || visibleOptions.length > 0;
+        return renderCheckboxes ? (
+            renderCheckboxList()
+        ) : (
+            <div className={clsx("not-found", size)}>
+                <Text size={ETextSize.B3}>Nothing was found</Text>
+            </div>
+        );
+    };
+
+    const unselectAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const handleClickClearFilter = () => {
+        unselectAll();
+    };
+
+    const handleClearInput = () => {
+        setFilter("");
+    };
+
+    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+    };
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <ChipMultiselect
+                size={size}
+                clearSelected={unselectAll}
+                selected={selectedIds.length > 0}
+                label="Multiselect label"
+                displayedValue="Multiselect value"
+            >
+                {({ opened, setOpened, targetRef, dropdownRef }) => (
+                    <MultiselectField.Dropdown
+                        opened={opened}
+                        setOpened={setOpened}
+                        targetRef={targetRef}
+                        ref={dropdownRef}
+                        alignment={EDropdownAlignment.LEFT}
+                        focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                        mobileViewProps={{
+                            children: (
+                                <>
+                                    <DropdownMobileHeader
+                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
+                                    >
+                                        <DropdownMobileInput
+                                            autoFocus={true}
+                                            placeholder="Type to proceed"
+                                            value={filter}
+                                            onChange={handleFilterChange}
+                                        />
+                                    </DropdownMobileHeader>
+                                    <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
+                                    <DropdownMobileFooter>
+                                        <Button
+                                            theme={EButtonTheme.GENERAL}
+                                            size={EComponentSize.SM}
+                                            onClick={() => setOpened(false)}
+                                        >
+                                            Button text
+                                        </Button>
+                                        <Button
+                                            theme={EButtonTheme.LINK}
+                                            size={EComponentSize.SM}
+                                            onClick={handleClickClearFilter}
+                                        >
+                                            Button link text
+                                        </Button>
+                                    </DropdownMobileFooter>
+                                </>
+                            ),
+                        }}
+                    >
+                        <MultiselectField.Dropdown.Header>
+                            <FormField size={size === EComponentSize.LG ? EComponentSize.MD : EComponentSize.SM}>
+                                <FormFieldLabel>Type to proceed</FormFieldLabel>
+                                <FormFieldInput value={filter} onChange={handleFilterChange} />
+                                <FormFieldPostfix>
+                                    <FormFieldClear onClick={handleClearInput} />
+                                </FormFieldPostfix>
+                            </FormField>
+                        </MultiselectField.Dropdown.Header>
+                        <MultiselectField.Dropdown.Content>{renderDropdownContent()}</MultiselectField.Dropdown.Content>
+                        <MultiselectField.Dropdown.Footer>
+                            <Button
+                                theme={EButtonTheme.SECONDARY}
+                                size={size === EComponentSize.LG ? EComponentSize.MD : EComponentSize.SM}
+                                onClick={() => setOpened(false)}
+                            >
+                                Button text
+                            </Button>
+                            <Button
+                                theme={EButtonTheme.LINK}
+                                size={size === EComponentSize.LG ? EComponentSize.MD : EComponentSize.SM}
+                                onClick={handleClickClearFilter}
+                            >
+                                Button link text
+                            </Button>
+                        </MultiselectField.Dropdown.Footer>
+                    </MultiselectField.Dropdown>
+                )}
+            </ChipMultiselect>
+        </div>
+    );
+};
+
+const sizeOptions = Object.values(EComponentSize).map((size) => ({
+    value: size,
+    label: size.toUpperCase(),
+}));
+
+export const SizesExample = () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
+        {sizeOptions.map(({ value, label }) => (
+            <SizeItem key={value} size={value} label={label} />
+        ))}
+    </div>
+);
+```
+
+### Loading
+
+`stories/Chips/examples/ChipMultiselect/LoadingExample.tsx`
+
+```tsx
+import React, { useMemo, useState } from "react";
+import {
+    EComponentSize,
+    MultiselectField,
+    FormField,
+    FormFieldLabel,
+    FormFieldInput,
+    FormFieldPostfix,
+    FormFieldClear,
+    Checkbox,
+    CheckboxYGroup,
+    ChipMultiselect,
+    ETextSize,
+    Text,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    DropdownMobileClose,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    EDropdownAlignment,
+    Button,
+    EButtonTheme,
+    DropdownMobileLoader,
+} from "@sberbusiness/triplex-next";
+import { CHIP_MULTISELECT_OPTIONS } from "./storyConstants";
+
+export const LoadingExample = () => {
+    const chipSize = EComponentSize.MD;
+
+    const [selectedIds, setSelectedIds] = useState<string[]>([]);
+    const [filter, setFilter] = useState("");
+    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+    const visibleOptions = useMemo(() => {
+        const lower = filter.trim().toLowerCase();
+        if (!lower.length) {
+            return CHIP_MULTISELECT_OPTIONS;
+        }
+
+        return CHIP_MULTISELECT_OPTIONS.filter((opt) => opt.label.toLowerCase().includes(lower));
+    }, [filter]);
+
+    const handleToggle = (optionId: string, checked: boolean) => {
+        setSelectedIds((prev) => {
+            if (checked) {
+                if (prev.includes(optionId)) {
+                    return prev;
+                }
+
+                return [...prev, optionId];
+            }
+
+            return prev.filter((id) => id !== optionId);
+        });
+    };
+
+    const renderCheckboxList = () => (
+        <CheckboxYGroup aria-label="Options">
+            {visibleOptions.map((opt) => (
+                <Checkbox
+                    key={opt.id}
+                    id={opt.id}
+                    size={chipSize}
+                    checked={selectedSet.has(opt.id)}
+                    onChange={(event) => handleToggle(opt.id, event.target.checked)}
+                >
+                    {opt.label}
+                </Checkbox>
+            ))}
+        </CheckboxYGroup>
+    );
+
+    const renderDropdownContent = () => {
+        const renderCheckboxes = !filter.trim() || visibleOptions.length > 0;
+        return renderCheckboxes ? (
+            renderCheckboxList()
+        ) : (
+            <div className={`not-found ${chipSize}`}>
+                <Text size={ETextSize.B3}>Nothing was found</Text>
+            </div>
+        );
+    };
+
+    const unselectAll = () => {
+        setSelectedIds([]);
+        setFilter("");
+    };
+
+    const handleClickClearFilter = () => {
+        unselectAll();
+    };
+
+    const handleClearInput = () => {
+        setFilter("");
+    };
+
+    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        setFilter(event.target.value);
+    };
+
+    return (
+        <ChipMultiselect
+            size={chipSize}
+            clearSelected={unselectAll}
+            selected={selectedIds.length > 0}
+            label="Multiselect label"
+        >
+            {({ opened, setOpened, targetRef, dropdownRef }) => (
+                <MultiselectField.Dropdown
+                    opened={opened}
+                    setOpened={setOpened}
+                    targetRef={targetRef}
+                    ref={dropdownRef}
+                    alignment={EDropdownAlignment.LEFT}
+                    focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
+                    mobileViewProps={{
+                        children: (
+                            <>
+                                <DropdownMobileHeader
+                                    controlButtons={
+                                        <>
+                                            <DropdownMobileLoader />
+                                            <DropdownMobileClose onClick={() => setOpened(false)} />
+                                        </>
+                                    }
+                                >
+                                    <DropdownMobileInput
+                                        autoFocus={true}
+                                        placeholder="Type to proceed"
+                                        value={filter}
+                                        onChange={handleFilterChange}
+                                    />
+                                </DropdownMobileHeader>
+                                <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
+                                <DropdownMobileFooter>
+                                    <Button
+                                        theme={EButtonTheme.GENERAL}
+                                        size={EComponentSize.SM}
+                                        onClick={() => setOpened(false)}
+                                    >
+                                        Button text
+                                    </Button>
+                                    <Button
+                                        theme={EButtonTheme.LINK}
+                                        size={EComponentSize.SM}
+                                        onClick={handleClickClearFilter}
+                                    >
+                                        Button link text
+                                    </Button>
+                                </DropdownMobileFooter>
+                            </>
+                        ),
+                    }}
+                >
+                    <MultiselectField.Dropdown.Header>
+                        <FormField size={EComponentSize.SM}>
+                            <FormFieldLabel>Type to proceed</FormFieldLabel>
+                            <FormFieldInput value={filter} onChange={handleFilterChange} />
+                            <FormFieldPostfix>
+                                <FormFieldClear onClick={handleClearInput} />
+                            </FormFieldPostfix>
+                        </FormField>
+                    </MultiselectField.Dropdown.Header>
+                    <MultiselectField.Dropdown.Content loading>
+                        {renderDropdownContent()}
+                    </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={handleClickClearFilter}>
+                            Button link text
+                        </Button>
+                    </MultiselectField.Dropdown.Footer>
+                </MultiselectField.Dropdown>
+            )}
+        </ChipMultiselect>
+    );
+};
+```
+
+### Example: with CheckboxTree
+
+`stories/Chips/examples/ChipMultiselect/WithCheckboxTreeExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    MultiselectField,
+    DropdownMobileHeader,
+    DropdownMobileInput,
+    DropdownMobileClose,
+    DropdownMobileBody,
+    DropdownMobileFooter,
+    Button,
+    EButtonTheme,
+    EComponentSize,
+    FormField,
+    FormFieldLabel,
+    FormFieldInput,
+    FormFieldPostfix,
+    FormFieldClear,
+    ChipMultiselect,
+    ETextSize,
+    Text,
+    CheckboxTreeExtended,
+    checkChildrenCheckboxes,
+    traverseCheckboxes,
+    checkParentCheckboxes,
+    ICheckboxTreeCheckboxData,
+} from "@sberbusiness/triplex-next";
+
+export const WithCheckboxTreeExample = () => {
+    const checkboxesInitial = [
+        {
+            bulk: false,
+            checked: false,
+            children: [
+                {
+                    bulk: false,
+                    checked: false,
+                    children: [
+                        {
+                            checked: false,
+                            id: "multiselect-option-1-1",
+                            label: "Значение 1-1",
+                        },
+                        {
+                            checked: false,
+                            id: "multiselect-option-1-2",
+                            label: "Значение 1-2",
+                        },
+                        {
+                            checked: false,
+                            id: "multiselect-option-1-3",
+                            label: "Значение 1-3",
+                        },
+                    ],
+                    id: "multiselect-option-1",
+                    label: "Группа 1",
+                },
+                {
+                    bulk: false,
+                    checked: false,
+                    children: [
+                        {
+                            checked: false,
+                            id: "multiselect-option-2-1",
+                            label: "Значение 2-1",
+                        },
+                        {
+                            checked: false,
+                            id: "multiselect-option-2-2",
+                            label: "Значение 2-2",
+                        },
+                    ],
+                    id: "multiselect-option-2",
+                    label: "Группа 2",
+                },
+                {
+                    checked: false,
+                    id: "multiselect-option-3",
+                    label: "Значение 3",
+                },
+            ],
+            id: "multiselect-option-0",
+            label: "Все",
+        },
+    ];
+
+    const [checkboxes, setCheckboxes] = useState(() => structuredClone(checkboxesInitial));
+    const [filter, setFilter] = useState("");
+    const [filteredCheckboxesId, setFilteredCheckboxesId] = useState<string[]>([]);
+
+    const handleChange = (checkbox: ICheckboxTreeCheckboxData) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        checkbox.checked = checkbox.bulk ? true : event.target.checked;
+        checkChildrenCheckboxes(checkbox);
+        traverseCheckboxes(checkboxes, checkParentCheckboxes);
+        setCheckboxes([...checkboxes]);
+    };
+
+    const renderCheckboxNode = (checkbox: ICheckboxTreeCheckboxData) => {
+        if (filter && !filteredCheckboxesId.includes(checkbox.id)) return null;
+        return (
+            <CheckboxTreeExtended.Node
+                key={checkbox.id}
+                id={checkbox.id}
+                checkbox={(props) => (
+                    <CheckboxTreeExtended.Checkbox
+                        {...props}
+                        bulk={checkbox.bulk}
+                        checked={checkbox.checked}
+                        onChange={handleChange(checkbox)}
+                    >
+                        {checkbox.label}
+                    </CheckboxTreeExtended.Checkbox>
+                )}
+            >
+                {checkbox.children && checkbox.children.map((child) => renderCheckboxNode(child))}
+            </CheckboxTreeExtended.Node>
+        );
+    };
+
+    const renderDropdownContent = () => {
+        const renderCheckboxes = !filter || (filteredCheckboxesId.length && filter);
+        return renderCheckboxes ? (
+            <CheckboxTreeExtended>{checkboxes.map((checkbox) => renderCheckboxNode(checkbox))}</CheckboxTreeExtended>
+        ) : (
+            <div className="not-found md">
+                <Text size={ETextSize.B3}>Nothing was found</Text>
+            </div>
+        );
+    };
+
+    const unselectAll = () => {
+        const nextCheckboxes = [...checkboxes];
+        traverseCheckboxes(nextCheckboxes, (checkbox) => {
+            checkbox.checked = false;
+            checkbox.bulk = false;
+        });
+        setCheckboxes(nextCheckboxes);
+    };
+
+    const handleClickClearFilter = () => {
+        setFilter("");
+        setFilteredCheckboxesId([]);
+        unselectAll();
+    };
+
+    const handleClearInput = () => {
+        setFilter("");
+    };
+
+    const handleFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+        const { value } = event.target;
+        const filteredCheckboxes = [...checkboxes];
+        const filteredCheckboxesId = new Set<string>();
+
+        const addMatchedSubtree = (node: ICheckboxTreeCheckboxData) => {
+            filteredCheckboxesId.add(node.id);
+            node.children?.forEach(addMatchedSubtree);
+        };
+
+        const setFilteredValue = (checkbox: ICheckboxTreeCheckboxData) => {
+            if (
+                checkbox.label &&
+                typeof checkbox.label === "string" &&
+                checkbox.label.toLowerCase().includes(value.toLowerCase())
+            ) {
+                addMatchedSubtree(checkbox);
+            } else if (checkbox.children) {
+                const intersection = checkbox.children
+                    .map((item: ICheckboxTreeCheckboxData) => item.id)
+                    .filter((id) => Array.from(filteredCheckboxesId).includes(id));
+
+                if (intersection.length) filteredCheckboxesId.add(checkbox.id);
+            }
+        };
+
+        traverseCheckboxes(filteredCheckboxes, setFilteredValue);
+
+        setFilter(value);
+        setFilteredCheckboxesId(Array.from(filteredCheckboxesId));
+    };
+
+    const renderDropdown = ({
+        opened,
+        setOpened,
+        targetRef,
+        dropdownRef,
+    }: {
+        opened: boolean;
+        setOpened: (opened: boolean) => void;
+        targetRef: React.RefObject<HTMLDivElement>;
+        dropdownRef: React.RefObject<HTMLDivElement>;
+    }) => (
+        <MultiselectField.Dropdown
+            opened={opened}
+            setOpened={setOpened}
+            targetRef={targetRef}
+            ref={dropdownRef}
+            focusTrapProps={{
+                focusTrapOptions: { initialFocus: false },
+            }}
+            mobileViewProps={{
+                children: (
+                    <>
+                        <DropdownMobileHeader controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}>
+                            <DropdownMobileInput
+                                placeholder="Type to proceed"
+                                value={filter}
+                                onChange={handleFilterChange}
+                            />
+                        </DropdownMobileHeader>
+                        <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
+                        <DropdownMobileFooter>
+                            <Button
+                                theme={EButtonTheme.GENERAL}
+                                size={EComponentSize.SM}
+                                onClick={() => setOpened(false)}
+                            >
+                                Button text
+                            </Button>
+                            <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClickClearFilter}>
+                                Button link text
+                            </Button>
+                        </DropdownMobileFooter>
+                    </>
+                ),
+            }}
+        >
+            <MultiselectField.Dropdown.Header>
+                <FormField size={EComponentSize.SM}>
+                    <FormFieldLabel>Type to proceed</FormFieldLabel>
+                    <FormFieldInput value={filter} onChange={handleFilterChange} />
+                    <FormFieldPostfix>
+                        <FormFieldClear onClick={handleClearInput} />
+                    </FormFieldPostfix>
+                </FormField>
+            </MultiselectField.Dropdown.Header>
+            <MultiselectField.Dropdown.Content>{renderDropdownContent()}</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={handleClickClearFilter}>
+                    Button link text
+                </Button>
+            </MultiselectField.Dropdown.Footer>
+        </MultiselectField.Dropdown>
+    );
+
+    return (
+        <ChipMultiselect
+            clearSelected={unselectAll}
+            selected={Boolean(checkboxes.filter((checkbox) => checkbox.checked).length)}
+            label="Multiselect label"
+        >
+            {(dropdownProps) => renderDropdown(dropdownProps)}
+        </ChipMultiselect>
+    );
+};
+```
+