@sberbusiness/triplex-next-mcp-server 1.50.0-beta → 1.53.1

package/bundle/components/CheckboxTreeExtended.md

@@ -1,7 +1,7 @@
 ---
 component: CheckboxTreeExtended
 category: Inputs
-related: [CheckboxTree, CollapsibleTreeExtended, Checkbox]
+related: [CheckboxTreeExtendedCheckbox, CheckboxTreeExtendedNode, CheckboxTree, CollapsibleTreeExtended, Checkbox]
 tokens:
   - Checkbox.BorderColor_Focus
 stories: stories/CheckboxTreeExtended/CheckboxTreeExtended.stories.tsx
@@ -49,9 +49,11 @@ version: "1.0"
 ### `CheckboxTreeExtended.Node`
 
 Наследует `ICollapsibleTreeExtendedNodeProps` без `children`, `renderBody`,
-`renderHeader` — заголовок и тело узла формирует сам компонент. Тип props
-экспортируется как `ICheckboxTreeExtendedNodeProps` — им типизируют
-собственную обёртку узла.
+`renderHeader` — заголовок и тело узла формирует сам компонент. Компонент
+`CheckboxTreeExtendedNode` и типы
+`ICheckboxTreeExtendedNodeProps`, `ICheckboxTreeExtendedCheckboxProvideProps`
+экспортируются через публичный barrel. Типом props типизируют собственную
+обёртку узла. Полный контракт — в `CheckboxTreeExtendedNode-ai.md`.
 
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
@@ -83,6 +85,8 @@ render-функции узла.
 
 `size`, переданный явно, перекрывает размер из контекста — так сделано намеренно
 (spread props идёт после), но в дереве это не нужно и ломает единый ритм.
+Подробный контракт фокуса, `labelAttributes` и наследуемых props описан в
+[CheckboxTreeExtendedCheckbox-ai.md](./CheckboxTreeExtendedCheckbox-ai.md).
 
 ---
 
@@ -117,7 +121,7 @@ Checkbox.BorderColor_Focus
 - **`ref` указывает на корневой `<ul role="tree">`.** Компонент обёрнут
   `forwardRef`, ссылка уходит в `CollapsibleTreeExtended` и дальше в `TreeView`.
   У `.Node` и `.Checkbox` своего `forwardRef` по-прежнему нет: `.Node` —
-  class-компонент, `.Checkbox` управляет фокусом сам.
+  функциональный компонент без внешнего ref, `.Checkbox` управляет фокусом сам.
 - **Публичный API** — имена `ICheckboxTreeExtendedProps`,
   `ICheckboxTreeExtendedFC` (и deprecated-алиас `ICheckboxTreeExtendedSFC`),
   `ICheckboxTreeExtendedCheckboxProvideProps`,
@@ -156,8 +160,9 @@ Checkbox.BorderColor_Focus
 
 ## Accessibility
 
-- Семантику и клавиатурную навигацию (стрелки, Home/End, перемещение по узлам)
-  обеспечивает `TreeView`. Компонент добавляет к ней только передачу фокуса.
+- Семантику и перемещение по узлам клавишами `ArrowDown` / `ArrowUp`
+  обеспечивает `TreeView`. `Home` / `End` не реализованы. Компонент добавляет
+  к навигации только передачу фокуса.
 - **Фокус при навигации с клавиатуры.** Узел сообщает в render-функцию
   `active`; `CheckboxTreeExtended.Checkbox` по этому флагу вызывает
   `focus()` на `<input>`. Правило ровно одно: фокус берётся, когда `active`
@@ -189,6 +194,12 @@ Checkbox.BorderColor_Focus
 
 ## Связанные компоненты
 
+- `CheckboxTreeExtendedCheckbox` — публичная часть `CheckboxTreeExtended.Checkbox`:
+  связывает базовый чекбокс с размером дерева и фокусом активного узла.
+  Подробности — в `CheckboxTreeExtendedCheckbox-ai.md`.
+- `CheckboxTreeExtendedNode` (`CheckboxTreeExtended.Node`) — узел дерева с
+  render-функцией чекбокса, вложенностью и передачей активности из `TreeView`.
+  Подробный контракт — в `CheckboxTreeExtendedNode-ai.md`.
 - `CheckboxTree` (`src/components/CheckboxTree`) — обёртка верхнего уровня:
   принимает массив `ICheckboxTreeCheckboxData` и сама пересчитывает `checked` /
   `bulk` вверх и вниз по дереву. Если своя структура данных не нужна — бери её.
@@ -212,6 +223,7 @@ Checkbox.BorderColor_Focus
 | `Playground` | `PlaygroundExample.tsx` | Интерактивный контроль `size` |
 | `Default` | `DefaultExample.tsx` | Дерево из двух веток с вложенным узлом, состояние чекбоксов в `useState` потребителя |
 | `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG рядом |
+| `VisualTests` | `VisualTests.tsx` | Состояния `.Checkbox` в дереве: checked, bulk, disabled и hover на SM / MD / LG, клавиатурный фокус на SM; скрыта из docs и сайдбара |
 
 ---
 
@@ -224,6 +236,8 @@ Checkbox.BorderColor_Focus
 | 2026-08-17 | Убран мёртвый селектор `.checkboxTreeCheckbox` из мобильной медиа-выборки (рабочие `> span` и `> svg` оставлены), `.caretIconWrapper:focus` заменён на `:focus-visible` (правки по ревью PR #535) |
 | 2026-08-17 | `ICheckboxTreeExtendedNodeProps` экспортируется — тип уходит в barrel и становится частью публичного API (решение владельца по ревью PR #535) |
 | 2026-09-17 | TRI-22: `CheckboxTreeExtended` обёрнут `forwardRef` — `ref` отдаёт корневой `<ul>`; тип переименован в `ICheckboxTreeExtendedFC`, старое имя оставлено deprecated-алиасом |
+| 2026-10-21 | Добавлена ссылка на отдельную документацию `CheckboxTreeExtended.Checkbox` с контрактом фокуса и наследуемых props; добавлена скрытая `VisualTests` с состояниями `.Checkbox` в дереве. |
+| 2026-10-21 | Добавлена ссылка на документацию CheckboxTreeExtendedNode, уточнены его экспорты, отсутствие внешнего ref и поддерживаемые клавиши навигации |
 
 ---
 

package/bundle/components/CheckboxTreeExtendedCheckbox.md

@@ -0,0 +1,591 @@
+---
+component: CheckboxTreeExtendedCheckbox
+category: Inputs
+related: [CheckboxTreeExtended, Checkbox]
+tokens:
+  - Checkbox.Background_Default
+  - Checkbox.BorderColor_Default
+  - Checkbox.Checkmark_Fill_Default
+  - Checkbox.Background_Hover
+  - Checkbox.BorderColor_Hover
+  - Checkbox.Background_Checked_Default
+  - Checkbox.BorderColor_Checked_Default
+  - Checkbox.Background_Disabled
+  - Checkbox.BorderColor_Disabled
+  - Checkbox.Background_Checked_Disabled
+  - Checkbox.BorderColor_Checked_Disabled
+  - Checkbox.Checkmark_Fill_Disabled
+  - Checkbox.BorderColor_Focus
+  - Checkbox.Background_Checked_Hover
+stories: stories/CheckboxTreeExtended/CheckboxTreeExtended.stories.tsx
+version: "1.0"
+---
+
+# CheckboxTreeExtendedCheckbox
+
+## Назначение
+
+Чекбокс узла декларативного `CheckboxTreeExtended`. Оборачивает базовый `Checkbox`,
+добавляет классы дерева, получает размер из контекста и переводит фокус на input
+активного узла. Состоянием выбора и связью родитель ↔ потомки управляет потребитель.
+
+Публичное обращение — `CheckboxTreeExtended.Checkbox`. Именованного экспорта
+`CheckboxTreeExtendedCheckbox` из пакета нет; собственный интерфейс props также
+не экспортируется из barrel. Для типизации обёртки можно использовать
+`React.ComponentProps<typeof CheckboxTreeExtended.Checkbox>`.
+
+```tsx
+import React from "react";
+import { CheckboxTreeExtended } from "@sberbusiness/triplex-next";
+
+export const TreeWithCheckbox = () => (
+    <CheckboxTreeExtended>
+        <CheckboxTreeExtended.Node
+            id="account"
+            checkbox={(props) => (
+                <CheckboxTreeExtended.Checkbox {...props} defaultChecked>
+                    Расчётный счёт
+                </CheckboxTreeExtended.Checkbox>
+            )}
+        />
+    </CheckboxTreeExtended>
+);
+```
+
+Используй внутри render-функции `checkbox` узла, разворачивая её аргумент в
+`CheckboxTreeExtended.Checkbox`. Для отдельного флажка вне дерева используй
+`Checkbox`; для готового каскадного выбора по массиву данных — `CheckboxTree`.
+
+---
+
+## Варианты и props
+
+Обязательных props нет. Наследует `ICheckboxProps`; сведения ниже описывают
+особенности обёртки, полный набор нативных атрибутов доступен в исходном типе.
+
+### Связь с узлом и размер
+
+| Prop | Назначение и ограничения |
+|---|---|
+| `active` | Служебный признак активного узла из render-функции `checkbox`. При монтировании и изменении этого prop запускает проверку фокуса; сам в DOM не передаётся |
+| `opened` | Принимается из той же render-функции, исключается из props input и ни на отрисовку, ни на фокус не влияет |
+| `size` | Обычно берётся из `CheckboxTreeExtendedContext`: по умолчанию `MD`, в дереве — размер родителя. Явный prop перекрывает контекст, включая мобильный `MD`, потому что spread идёт после `size={size}`. Для единого ритма дерева оставляй его родителю |
+
+### Выбор и доступность
+
+| Prop | Назначение и ограничения |
+|---|---|
+| `checked`, `defaultChecked`, `onChange` | Нативное controlled/uncontrolled состояние input и событие изменения. Компонент не пересчитывает состояние соседних узлов |
+| `bulk` | Меняет галочку на иконку частичного выбора. Для её видимости нужен `checked`; не задаёт нативный `indeterminate` или `aria-checked="mixed"` |
+| `disabled` | Отключает нативный input и задаёт оформление disabled; браузер не переводит на него фокус |
+| `children` | Видимая подпись и доступное имя чекбокса через вложенный `<label>` |
+
+### Атрибуты и события
+
+| Prop | Назначение и ограничения |
+|---|---|
+| `className` | Объединяется с классами базового Checkbox и дерева на корневом `<label>`, не попадает на input |
+| `labelAttributes` | HTML-атрибуты корневого `<label>`. Его `className` сохраняется вместе с внутренними классами. `onFocus` вызывается обёрткой после проверки режима статичности дерева |
+| `name`, `value`, `id`, `aria-*`, `data-*`, `onFocus` и остальные нативные props | Передаются базовому Checkbox на `<input type="checkbox">`; `onFocus` input отличается от `labelAttributes.onFocus` и всплывает к нему |
+
+В текущем статичном режиме обёртка сама не останавливает всплытие focus от label:
+сначала выполняется `labelAttributes.onFocus`, затем событие достигает ноды
+дерева, если потребитель не остановил его. При `isStaticCheckboxTreeExtended = false`
+обёртка сначала вызывает `event.stopPropagation()`, затем пользовательский
+`labelAttributes.onFocus`. Не меняй этот порядок при объединении обработчиков.
+
+---
+
+## Дизайн-токены
+
+Собственных токенов обёртка не вводит. Цвета и состояния приходят из базового
+`Checkbox.module.less`; дерево добавляет отступы label и мобильную область нажатия.
+Токен фокуса стрелки в общем LESS-файле семейства относится к
+`CheckboxTreeExtendedArrow`, а не к отдельному элементу этой обёртки.
+
+Переопределяются через `ThemeProvider` (prop `tokens`) — см.
+`src/components/ThemeProvider/ThemeProvider-ai.md`, раздел «Как переопределять
+токены». Значения по умолчанию — `src/components/DesignTokens/components/Checkbox.ts`.
+
+```text
+Checkbox.Background_Default
+Checkbox.BorderColor_Default
+Checkbox.Checkmark_Fill_Default
+Checkbox.Background_Hover
+Checkbox.BorderColor_Hover
+Checkbox.Background_Checked_Default
+Checkbox.BorderColor_Checked_Default
+Checkbox.Background_Disabled
+Checkbox.BorderColor_Disabled
+Checkbox.Background_Checked_Disabled
+Checkbox.BorderColor_Checked_Disabled
+Checkbox.Checkmark_Fill_Disabled
+Checkbox.BorderColor_Focus
+Checkbox.Background_Checked_Hover
+```
+
+---
+
+## Инварианты
+
+- Публичный путь — `CheckboxTreeExtended.Checkbox`, `displayName` —
+  `"CheckboxTreeExtendedCheckbox"`; существующие exports семейства сохраняются.
+- Обёртка остаётся `React.FC` без внешнего `ref`/`forwardRef`: это текущий контракт.
+  Внутренний `useRef<HTMLInputElement>` передаётся в `forwardRef` базового Checkbox
+  и нужен для управления фокусом. Не подменять его публичным ref без отдельной задачи.
+- Корневой DOM — `<label>` базового Checkbox с вложенным нативным input.
+  `className` и `labelAttributes.className` сохраняются на label вместе с классом
+  `checkboxTreeCheckboxLabel` и классами базового Checkbox; остальные нативные props — на input.
+- `active` и `opened` не попадают в DOM. `opened` намеренно не используется;
+  при статичном дереве Node передаёт `opened: true`.
+- Эффект фокуса зависит только от `active`. Он не различает mount и update:
+  если `active` истинно и `document.activeElement` не содержит текущий input,
+  вызывается `input.focus()`. При неизменном `active` новый рендер не забирает
+  фокус повторно. Не заменять проверку `contains` на сравнение элементов или
+  проверку предыдущего `active`: это изменит поведение.
+- Размер из контекста задаётся перед spread нативных props. Явный `size`
+  должен сохранять возможность его перекрыть.
+- Ветку `!isStaticCheckboxTreeExtended` в focus-обработчике label не удалять:
+  она оставлена для будущего сворачиваемого режима семейства.
+- В заголовке узла нижний margin label обнуляется, а на мобильной ширине
+  добавляется padding сверху/снизу по 16 px. Вне `CheckboxTreeExtended.Node`
+  эта раскладка не применяется.
+
+---
+
+## Accessibility
+
+- Семантику формы и переключение по Space обеспечивает нативный
+  `<input type="checkbox">`. `children` дают видимую подпись; без неё передай
+  доступное имя, например `aria-label`. Язык выбирает потребитель.
+- Семантика `tree`/`treeitem` и навигация между узлами принадлежат
+  `CheckboxTreeExtended` и нижележащему `TreeView`. Обёртка реагирует только на
+  переданный `active`, направляя фокус на input.
+- При первом рендере активный чекбокс обычно не получает фокус: активным
+  элементом является `<body>`, который содержит input. Если фокус стоит на
+  постороннем элементе, активный чекбокс заберёт его уже на mount. Когда
+  `active` меняется на `true` после клавиатурной навигации, действует та же проверка.
+- В статичном режиме focus от label всплывает к Node и делает активным
+  соответствующий узел. Пользовательский `labelAttributes.onFocus` может
+  остановить всплытие; `preventDefault` сам по себе этот контракт не заменяет.
+- Фокусное оформление использует `:focus-visible` базового Checkbox; hover
+  включается только на устройствах с `hover: hover`. `bulk` описывает иконку,
+  а доступное mixed-состояние автоматически не создаётся.
+- Ограничение начальной разметки вложенных узлов (`li` внутри `li` до регистрации
+  группы) описано в `CheckboxTreeExtended-ai.md` и исправляется на уровне `TreeView`.
+
+---
+
+## Связанные компоненты
+
+- `CheckboxTreeExtended` — родитель; владеет контекстом размера и предоставляет
+  `.Node`, чья render-функция передаёт `active` / `opened` в `.Checkbox`.
+- `Checkbox` — непосредственно рендерится обёрткой; её props наследуют
+  `ICheckboxProps`. Отвечает за input, label, состояния и визуальные токены.
+
+---
+
+## Stories
+
+Основные копируемые примеры переиспользуются из историй родителя.
+
+Основные истории: `stories/CheckboxTreeExtended/CheckboxTreeExtended.stories.tsx`
+Файлы примеров: `stories/CheckboxTreeExtended/examples/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Размер родительского дерева |
+| `Default` | `DefaultExample.tsx` | Публичное обращение `.Checkbox`, передача provide-props и controlled-состояние потребителя |
+| `Sizes` | `SizesExample.tsx` | Размеры SM / MD / LG с подписями и единым размером дерева |
+| `VisualTests` | `VisualTests.tsx` | SM / MD / LG в checked, checked bulk и disabled, реальный клавиатурный фокус в дереве (только SM — фокус в документе один) и hover выбранного input; мобильная раскладка |
+
+Композиционный пример: `stories/Chips/ChipMultiselect.stories.tsx`
+Файлы примеров: `stories/Chips/examples/ChipMultiselect/`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `WithCheckboxTree` | `WithCheckboxTreeExample.tsx` | Дерево внутри ChipMultiselect, пересчёт checked/bulk и фильтрация на стороне потребителя; исключён из скриншотов |
+
+`Playground` и `VisualTests` исключаются из MCP bundle. Focus/hover-состояния
+проверяются после play и перемонтирования истории на двух viewport: xs / xl.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-10-21 | Создан документ: описаны публичный compound-путь, наследуемые props, размер из контекста, точный эффект фокуса и порядок label onFocus. Добавлены проверки недостающих контрактов и визуальных состояний без изменения production-кода. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/CheckboxTreeExtended/examples/DefaultExample.tsx`
+
+```tsx
+import React from "react";
+import { CheckboxTreeExtended, EComponentSize } from "@sberbusiness/triplex-next";
+
+type CheckboxNode = { id: string; label: string; checked: boolean; bulk?: boolean; children?: CheckboxNode[] };
+
+const INITIAL: CheckboxNode[] = [
+    { id: "1", label: "Группа 1", checked: false, children: [{ id: "1-1", label: "Значение 1-1", checked: false }] },
+    { id: "2", label: "Группа 2", checked: false },
+];
+
+export const DefaultExample = ({ size = EComponentSize.MD }: { size?: EComponentSize }) => {
+    const [checkboxes, setCheckboxes] = React.useState<CheckboxNode[]>(INITIAL);
+
+    const onChange = (target: CheckboxNode) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        target.checked = event.target.checked;
+        setCheckboxes([...checkboxes]);
+    };
+
+    const renderNode = (node: CheckboxNode) => (
+        <CheckboxTreeExtended.Node
+            id={node.id}
+            key={node.id}
+            checkbox={(props) => (
+                <CheckboxTreeExtended.Checkbox
+                    {...props}
+                    onChange={onChange(node)}
+                    bulk={node.bulk}
+                    checked={node.checked}
+                >
+                    {node.label}
+                </CheckboxTreeExtended.Checkbox>
+            )}
+        >
+            {node.children?.map((child) => renderNode(child))}
+        </CheckboxTreeExtended.Node>
+    );
+
+    return <CheckboxTreeExtended size={size}>{checkboxes.map((node) => renderNode(node))}</CheckboxTreeExtended>;
+};
+```
+
+### Sizes
+
+`stories/CheckboxTreeExtended/examples/SizesExample.tsx`
+
+```tsx
+import React from "react";
+import { CheckboxTreeExtended, Col, EComponentSize, Row } from "@sberbusiness/triplex-next";
+
+type CheckboxNode = { id: string; label: string; checked: boolean; bulk?: boolean; children?: CheckboxNode[] };
+
+const INITIAL: CheckboxNode[] = [
+    { id: "1", label: "Группа 1", checked: false, children: [{ id: "1-1", label: "Значение 1-1", checked: false }] },
+    { id: "2", label: "Группа 2", checked: false },
+];
+
+const TreeBySize = ({ size = EComponentSize.MD }: { size?: EComponentSize }) => {
+    const [checkboxes, setCheckboxes] = React.useState<CheckboxNode[]>(INITIAL);
+
+    const onChange = (target: CheckboxNode) => (event: React.ChangeEvent<HTMLInputElement>) => {
+        target.checked = event.target.checked;
+        setCheckboxes([...checkboxes]);
+    };
+
+    const renderNode = (node: CheckboxNode) => (
+        <CheckboxTreeExtended.Node
+            id={node.id}
+            key={node.id}
+            checkbox={(props) => (
+                <CheckboxTreeExtended.Checkbox
+                    {...props}
+                    onChange={onChange(node)}
+                    bulk={node.bulk}
+                    checked={node.checked}
+                >
+                    {node.label}
+                </CheckboxTreeExtended.Checkbox>
+            )}
+        >
+            {node.children?.map((child) => renderNode(child))}
+        </CheckboxTreeExtended.Node>
+    );
+
+    return <CheckboxTreeExtended size={size}>{checkboxes.map((node) => renderNode(node))}</CheckboxTreeExtended>;
+};
+
+export const SizesExample = () => (
+    <Row>
+        <Col size={4}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>SM</div>
+            <TreeBySize size={EComponentSize.SM} />
+        </Col>
+        <Col size={4}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>MD</div>
+            <TreeBySize size={EComponentSize.MD} />
+        </Col>
+        <Col size={4}>
+            <div style={{ marginBottom: "8px", fontSize: "16px", fontWeight: "700" }}>LG</div>
+            <TreeBySize size={EComponentSize.LG} />
+        </Col>
+    </Row>
+);
+```
+
+### WithCheckboxTree
+
+`stories/Chips/examples/ChipMultiselect/WithCheckboxTreeExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import {
+    MultiselectField,
+    PullerHeader,
+    PullerInput,
+    PullerClose,
+    PullerBody,
+    PullerFooter,
+    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 },
+            }}
+            pullerProps={{
+                children: (
+                    <>
+                        <PullerHeader controlButtons={<PullerClose onClick={() => setOpened(false)} />}>
+                            <PullerInput placeholder="Type to proceed" value={filter} onChange={handleFilterChange} />
+                        </PullerHeader>
+                        <PullerBody>{renderDropdownContent()}</PullerBody>
+                        <PullerFooter>
+                            <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>
+                        </PullerFooter>
+                    </>
+                ),
+            }}
+        >
+            <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>
+    );
+};
+```
+