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

package/bundle/components/ChipMonthYearPicker.md

@@ -1,7 +1,7 @@
 ---
 component: ChipMonthYearPicker
 category: Chips
-related: [Chip, ChipDatePicker, MonthYearField, DatePickerExtended]
+related: [ChipMonthYearPickerTarget, Chip, ChipDatePicker, MonthYearField, DatePickerExtended]
 tokens: []
 stories: stories/Chips/ChipMonthYearPicker.stories.tsx
 version: "1.0"
@@ -169,8 +169,8 @@ selected = getPickerValues(value, format, limitRange).calendarDate !== null
   `IMonthYearFieldProps` и утилит `MonthYearPickerUtils`
 - `DatePickerExtended` — база: владеет состоянием открытости, дропдауном, календарём
   и корневым `<div>`; получает `renderTarget` и `renderDropdownHeaderTarget`
-- `ChipMonthYearPickerTarget` — чипс-таргет этого компонента (экспортируется, но
-  собственного AI.md не имеет): читает открытость из `DatePickerExtendedContext`,
+- `ChipMonthYearPickerTarget` — публичный чипс-таргет этого компонента; см.
+  [ChipMonthYearPickerTarget-ai.md](./ChipMonthYearPickerTarget-ai.md). Читает открытость из `DatePickerExtendedContext`,
   переключает её по клику и Enter/Space, рендерит `ChipClearButton` либо
   `ChipDropdownArrow` в `postfix`
 
@@ -198,6 +198,7 @@ selected = getPickerValues(value, format, limitRange).calendarDate !== null
 |---|---|
 | 2026-09-07 | Создан компонент и документ (AI-Ready Phase 1) |
 | 2026-09-29 | Аудит симметрии `related` (TRI-156): из `related` убраны несимметричные имена (`ChipGroup`). Пояснения к убранным именам сохранены прозой в «Связанные компоненты»; публичный API и поведение не затронуты. |
+| 2026-10-21 | Добавлена связь с самостоятельной AI-документацией `ChipMonthYearPickerTarget`. |
 
 ---
 

package/bundle/components/ChipMonthYearPickerTarget.md

@@ -0,0 +1,318 @@
+---
+component: ChipMonthYearPickerTarget
+category: Chips
+related: [ChipMonthYearPicker, Chip, DatePickerExtended]
+tokens: []
+stories: stories/Chips/ChipMonthYearPicker.stories.tsx
+version: "1.0"
+---
+
+# ChipMonthYearPickerTarget
+
+## Назначение
+
+Публичный чипс-таргет выбора месяца: показывает переданный контент, переключает
+открытость календаря через `DatePickerExtendedContext` и заменяет стрелку кнопкой
+очистки при `selected`.
+
+Используй когда: нужен собственный target в `renderTarget` компонента
+`DatePickerExtended`, например с иконкой, уведомлением или обработчиками самого
+чипса. Для готового управляемого выбора месяца используй `ChipMonthYearPicker`.
+Не используй когда: нужен самостоятельный календарь или форматирование значения —
+таргет не хранит дату, не парсит её и не выбирает режим календаря.
+
+Публичные named imports: `ChipMonthYearPickerTarget` и
+`IChipMonthYearPickerTargetProps` из `@sberbusiness/triplex-next`.
+
+Минимальная управляемая композиция:
+
+```tsx
+const [pickedDate, setPickedDate] = useState<moment.Moment | null>(null);
+const label = pickedDate ? pickedDate.format("MMM YYYY") : "Выберите месяц";
+
+<DatePickerExtended
+    pickType={ECalendarPickType.MONTH_YEAR}
+    pickedDate={pickedDate}
+    onDateChange={setPickedDate}
+    renderTarget={() => (
+        <ChipMonthYearPickerTarget
+            selected={pickedDate !== null}
+            onClear={() => setPickedDate(null)}
+            clearButtonProps={{ "aria-label": "Очистить месяц" }}
+        >
+            {label}
+        </ChipMonthYearPickerTarget>
+    )}
+    renderDropdownHeaderTarget={() => label}
+/>;
+```
+
+---
+
+## Варианты и props
+
+Наследует `IChipProps`. Собственные props — обязательный `onClear` и опциональный
+`clearButtonProps`. Дату, отображаемый текст и `selected` синхронизирует потребитель;
+сам `selected` не вычисляется из контекста.
+
+### Обязательные props
+
+| Prop | Тип | Описание |
+|---|---|---|
+| `onClear` | `() => void` | Вызывается без аргументов при активации кнопки очистки. Потребитель сам сбрасывает дату, текст и `selected` |
+
+### Опциональные props
+
+| Prop | По умолчанию | Описание |
+|---|---|---|
+| `children` | — | Содержимое чипса: название фильтра либо уже отформатированный месяц |
+| `selected` | `false` | Выбранный стиль и кнопка очистки вместо стрелки; не меняет `children` |
+| `disabled` | `false` | Блокирует переключение календаря и нативную кнопку очистки |
+| `clearButtonProps` | — | Атрибуты `ChipClearButton`, включая доступное имя, `title`, `shape`, `active`. `size`, `disabled`, `onClick`, `onKeyDown` исключены из типа и задаются таргетом после spread |
+| `size` | `EComponentSize.MD` | Размер чипса и его правой иконки: SM / MD / LG |
+| `type` | `EChipType.TYPE_1` | Визуальный тип из `Chip`: TYPE_1 / TYPE_2 |
+| `prefix`, `showNotificationIcon` | — / `false` | Левый слот и индикатор уведомления из `Chip` |
+| `postfix` | Стрелка либо очистка | Явное значение заменяет внутренний правый слот, в том числе кнопку очистки |
+| `onClick` | — | Получает событие после переключения открытости. При `disabled` не вызывается |
+| `onKeyDown` | — | Получает все всплывшие до таргета клавиши после внутренней обработки, включая события на `disabled`-таргете |
+| `className`, HTML-/`data-*`-/`aria-*`-атрибуты | — | Передаются в корневой `span` через `Chip`; `className` мержится с базовыми классами |
+
+### Контекст и приоритет props
+
+`DatePickerExtended` предоставляет `dropdownOpen` и `setDropdownOpen`.
+Клик и Enter/Space вызывают `setDropdownOpen(!dropdownOpen)`, если таргет не
+`disabled`. `mouseUsedRef` таргет не меняет: различие мыши и клавиатуры определяет
+контейнер `DatePickerExtended`.
+
+Вне provider используется значение контекста по умолчанию: `dropdownOpen=false`,
+setter ничего не делает. Самостоятельный target поэтому не открывает календарь.
+Возвращай таргет из `renderTarget`, как в примере выше; создавать свой
+`Context.Provider` для обычной композиции не требуется.
+
+`aria-expanded` по умолчанию отражает контекст. Внешние `aria-expanded` и `postfix`
+идут в `restProps` после внутренних значений и имеют приоритет. При их подмене
+потребитель отвечает за соответствие атрибута реальной открытости и доступность
+очистки. `onClick`/`onKeyDown` деструктурируются отдельно и внутренние обработчики
+не заменяют.
+
+---
+
+## Дизайн-токены
+
+Собственного LESS-модуля и собственных токенов нет, поэтому `tokens: []`.
+Внешний вид наследуется от `Chip`: фон, цвет, selected/disabled и тень фокуса —
+группа `Chip`. `ChipClearButton` также использует `Chip.Shadow_Focus`;
+`ChipDropdownArrow` задаёт только поворот, а цвета иконок определяет `paletteIndex`.
+
+Полный список токенов — [Chip-ai.md](./Chip-ai.md#дизайн-токены).
+Переопределение через `ThemeProvider` описано в
+[ThemeProvider-ai.md](../ThemeProvider/ThemeProvider-ai.md#как-переопределять-токены).
+
+---
+
+## Инварианты
+
+- Сохранять `forwardRef<HTMLSpanElement>`: ref указывает на корневой `span` из
+  `Chip`, а не на контейнер `DatePickerExtended` и не на кнопку очистки.
+- Сохранять публичные named exports компонента и интерфейса в barrel семейства
+  `Chip`, имена props и их типы.
+- Таргет не владеет выбранной датой и не меняет `selected` или `children` после
+  `onClear`; это ответственность потребителя.
+- Открытость берётся из `DatePickerExtendedContext`, выбранность — из props.
+  Не объединять эти независимые состояния.
+- Клик на очистке останавливает всплытие и вызывает только `onClear()` без события;
+  Enter/Space на ней не должны переключать календарь.
+- Служебные props кнопки очистки задаются после `clearButtonProps`: её размер,
+  disabled и обработчики не переопределяются этой настройкой.
+- Приоритет внешних `postfix` и `aria-expanded` сохранять.
+
+---
+
+## Accessibility
+
+- Корень — `span` с `role="button"`, `tabIndex=0` либо `-1` при `disabled` по
+  умолчанию. Это не нативная кнопка: атрибут `disabled` на `span` не ставится.
+  Остальные HTML-/ARIA-атрибуты наследуются от `Chip` и могут быть переопределены
+  потребителем. `aria-haspopup` автоматически не добавляется.
+- Доступное имя таргета задаётся содержимым либо внешним `aria-label`.
+  Иконке очистки обязательно передать доступное имя через
+  `clearButtonProps={{ "aria-label": "Очистить месяц" }}`.
+- Enter/Space на активном таргете переключают открытость с `preventDefault()`.
+  Другие клавиши только передаются в `onKeyDown`. При `disabled` переключения нет,
+  но пользовательский `onKeyDown` всё равно вызывается; базовый `Chip` дополнительно
+  предотвращает стандартное действие Space даже в disabled-состоянии.
+- Enter/Space на кнопке очистки останавливают всплытие `keydown`; нативная активация
+  кнопки создаёт клик, который также не всплывает. У `disabled`-таргета эта кнопка
+  получает нативный `disabled`.
+- Escape, ловушка фокуса календаря и возврат фокуса принадлежат `DatePickerExtended`,
+  сам таргет ими не управляет.
+
+---
+
+## Связанные компоненты
+
+- `ChipMonthYearPicker` — готовый родитель: вычисляет `selected`, форматирует месяц
+  и превращает `onClear()` в `onChange("")`; см.
+  [ChipMonthYearPicker-ai.md](./ChipMonthYearPicker-ai.md).
+- `Chip` — база props и разметки, размеров, типов, слотов, индикатора и состояний;
+  см. [Chip-ai.md](./Chip-ai.md).
+- `DatePickerExtended` — provider открытости, календарь и управление фокусом;
+  для month/year-композиции ему задают `pickType=ECalendarPickType.MONTH_YEAR`;
+  см. [DatePickerExtended-ai.md](../DatePickerExtended/DatePickerExtended-ai.md).
+- `ChipClearButton` и `ChipDropdownArrow` — внутреннее наполнение правого слота:
+  очистка при `selected`, иначе стрелка с поворотом по открытости контекста.
+
+---
+
+## Stories
+
+Основные истории: `stories/Chips/ChipMonthYearPicker.stories.tsx`
+Файлы примеров: `stories/Chips/examples/ChipMonthYearPicker/`
+
+Используются существующие истории родителя: `ChipMonthYearPicker` рендерит этот таргет.
+Отдельный stories-файл атому не требуется. Пример ручной композиции через
+`renderTarget` приведён выше в этом документе.
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Playground` | `PlaygroundExample.tsx` | Таргет с контролами `type`, `size`, `disabled`; выбор месяца включает `selected` и кнопку очистки |
+| `Default` | `DefaultExample.tsx` | Управляемое значение и `aria-label` кнопки очистки через `clearButtonProps` |
+| `Types` | `TypesExample.tsx` | TYPE_1 / TYPE_2 таргет без выбора, со стрелкой |
+| `Sizes` | `SizesExample.tsx` | SM / MD / LG таргет без выбора, со стрелкой |
+| `VisualTests` | `VisualTestsExample.tsx` | Выбранный таргет трёх размеров с кнопкой очистки; play раскрывает календарь последнего |
+
+Состояния `disabled`, hover, focus и prefix/postfix-слоты отрисовывает `Chip`;
+они покрыты stories `stories/Chips/Chip.stories.tsx`.
+
+Контракт таргета покрывает `src/components/Chip/__tests__/ChipMonthYearPickerTarget.test.tsx`;
+календарный выбор и связь с датой — существующие тесты `ChipMonthYearPicker` и
+`DatePickerExtended`.
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-10-21 | Создан документ; подтверждены публичный API, контекст, приоритет props и клавиатурный контракт. Добавлены тесты таргета без изменения production-кода. |
+
+---
+
+## Примеры использования
+
+### Default
+
+`stories/Chips/examples/ChipMonthYearPicker/DefaultExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ChipMonthYearPicker, EComponentSize, EDropdownAlignment } from "@sberbusiness/triplex-next";
+
+export const DefaultExample = () => {
+    const [value, setValue] = useState("");
+    return (
+        <ChipMonthYearPicker
+            value={value}
+            label="MonthYear label"
+            placeholder="Select to proceed"
+            onChange={setValue}
+            alignment={EDropdownAlignment.LEFT}
+            size={EComponentSize.MD}
+            clearButtonProps={{ "aria-label": "Очистить" }}
+        />
+    );
+};
+```
+
+### Types
+
+`stories/Chips/examples/ChipMonthYearPicker/TypesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ChipMonthYearPicker, EChipType, EDropdownAlignment } from "@sberbusiness/triplex-next";
+
+type TypeItemProps = {
+    type: EChipType;
+    label: string;
+};
+
+const TypeItem = ({ type, label }: TypeItemProps) => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <ChipMonthYearPicker
+                value={value}
+                label="MonthYear label"
+                placeholder="Select to proceed"
+                clearButtonProps={{ "aria-label": "Очистить" }}
+                type={type}
+                alignment={EDropdownAlignment.LEFT}
+                onChange={setValue}
+            />
+        </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/ChipMonthYearPicker/SizesExample.tsx`
+
+```tsx
+import React, { useState } from "react";
+import { ChipMonthYearPicker, EComponentSize, EDropdownAlignment } from "@sberbusiness/triplex-next";
+
+type SizeItemProps = {
+    size: EComponentSize;
+    label: string;
+};
+
+const SizeItem = ({ size, label }: SizeItemProps) => {
+    const [value, setValue] = useState("");
+
+    return (
+        <div>
+            <div style={{ marginBottom: 8, fontSize: 16, fontWeight: 700 }}>{label}</div>
+            <ChipMonthYearPicker
+                size={size}
+                alignment={EDropdownAlignment.LEFT}
+                value={value}
+                label="MonthYear label"
+                placeholder="Select to proceed"
+                clearButtonProps={{ "aria-label": "Очистить" }}
+                onChange={setValue}
+            />
+        </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>
+);
+```
+

package/bundle/components/ChipMultiselect.md

@@ -218,11 +218,11 @@ Postfix переключается тем же флагом `selected`: `ChipDro
 import React, { useMemo, useState } from "react";
 import {
     MultiselectField,
-    DropdownMobileHeader,
-    DropdownMobileInput,
-    DropdownMobileClose,
-    DropdownMobileBody,
-    DropdownMobileFooter,
+    PullerHeader,
+    PullerInput,
+    PullerClose,
+    PullerBody,
+    PullerFooter,
     EDropdownAlignment,
     Button,
     EButtonTheme,
@@ -329,21 +329,19 @@ export const DefaultExample = () => {
                     ref={dropdownRef}
                     alignment={EDropdownAlignment.LEFT}
                     focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
-                    mobileViewProps={{
+                    pullerProps={{
                         children: (
                             <>
-                                <DropdownMobileHeader
-                                    controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
-                                >
-                                    <DropdownMobileInput
+                                <PullerHeader controlButtons={<PullerClose onClick={() => setOpened(false)} />}>
+                                    <PullerInput
                                         autoFocus={true}
                                         placeholder="Type to proceed"
                                         value={filter}
                                         onChange={handleFilterChange}
                                     />
-                                </DropdownMobileHeader>
-                                <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
-                                <DropdownMobileFooter>
+                                </PullerHeader>
+                                <PullerBody>{renderDropdownContent()}</PullerBody>
+                                <PullerFooter>
                                     <Button
                                         theme={EButtonTheme.GENERAL}
                                         size={EComponentSize.SM}
@@ -358,7 +356,7 @@ export const DefaultExample = () => {
                                     >
                                         Button link text
                                     </Button>
-                                </DropdownMobileFooter>
+                                </PullerFooter>
                             </>
                         ),
                     }}
@@ -402,11 +400,11 @@ import clsx from "clsx";
 import {
     MultiselectField,
     EComponentSize,
-    DropdownMobileHeader,
-    DropdownMobileInput,
-    DropdownMobileClose,
-    DropdownMobileBody,
-    DropdownMobileFooter,
+    PullerHeader,
+    PullerInput,
+    PullerClose,
+    PullerBody,
+    PullerFooter,
     EDropdownAlignment,
     Button,
     EButtonTheme,
@@ -517,21 +515,19 @@ const TypeItem = ({ type, label }: TypeItemProps) => {
                         ref={dropdownRef}
                         alignment={EDropdownAlignment.LEFT}
                         focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
-                        mobileViewProps={{
+                        pullerProps={{
                             children: (
                                 <>
-                                    <DropdownMobileHeader
-                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
-                                    >
-                                        <DropdownMobileInput
+                                    <PullerHeader controlButtons={<PullerClose onClick={() => setOpened(false)} />}>
+                                        <PullerInput
                                             autoFocus={true}
                                             placeholder="Type to proceed"
                                             value={filter}
                                             onChange={handleFilterChange}
                                         />
-                                    </DropdownMobileHeader>
-                                    <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
-                                    <DropdownMobileFooter>
+                                    </PullerHeader>
+                                    <PullerBody>{renderDropdownContent()}</PullerBody>
+                                    <PullerFooter>
                                         <Button
                                             theme={EButtonTheme.GENERAL}
                                             size={EComponentSize.SM}
@@ -546,7 +542,7 @@ const TypeItem = ({ type, label }: TypeItemProps) => {
                                         >
                                             Button link text
                                         </Button>
-                                    </DropdownMobileFooter>
+                                    </PullerFooter>
                                 </>
                             ),
                         }}
@@ -604,11 +600,11 @@ import clsx from "clsx";
 import {
     EComponentSize,
     MultiselectField,
-    DropdownMobileHeader,
-    DropdownMobileInput,
-    DropdownMobileClose,
-    DropdownMobileBody,
-    DropdownMobileFooter,
+    PullerHeader,
+    PullerInput,
+    PullerClose,
+    PullerBody,
+    PullerFooter,
     EDropdownAlignment,
     Button,
     EButtonTheme,
@@ -719,21 +715,19 @@ const SizeItem = ({ size, label }: SizeItemProps) => {
                         ref={dropdownRef}
                         alignment={EDropdownAlignment.LEFT}
                         focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
-                        mobileViewProps={{
+                        pullerProps={{
                             children: (
                                 <>
-                                    <DropdownMobileHeader
-                                        controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}
-                                    >
-                                        <DropdownMobileInput
+                                    <PullerHeader controlButtons={<PullerClose onClick={() => setOpened(false)} />}>
+                                        <PullerInput
                                             autoFocus={true}
                                             placeholder="Type to proceed"
                                             value={filter}
                                             onChange={handleFilterChange}
                                         />
-                                    </DropdownMobileHeader>
-                                    <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
-                                    <DropdownMobileFooter>
+                                    </PullerHeader>
+                                    <PullerBody>{renderDropdownContent()}</PullerBody>
+                                    <PullerFooter>
                                         <Button
                                             theme={EButtonTheme.GENERAL}
                                             size={EComponentSize.SM}
@@ -748,7 +742,7 @@ const SizeItem = ({ size, label }: SizeItemProps) => {
                                         >
                                             Button link text
                                         </Button>
-                                    </DropdownMobileFooter>
+                                    </PullerFooter>
                                 </>
                             ),
                         }}
@@ -819,15 +813,15 @@ import {
     ChipMultiselect,
     ETextSize,
     Text,
-    DropdownMobileHeader,
-    DropdownMobileInput,
-    DropdownMobileClose,
-    DropdownMobileBody,
-    DropdownMobileFooter,
+    PullerHeader,
+    PullerInput,
+    PullerClose,
+    PullerBody,
+    PullerFooter,
     EDropdownAlignment,
     Button,
     EButtonTheme,
-    DropdownMobileLoader,
+    PullerLoader,
 } from "@sberbusiness/triplex-next";
 import { CHIP_MULTISELECT_OPTIONS } from "./storyConstants";
 
@@ -919,26 +913,26 @@ export const LoadingExample = () => {
                     ref={dropdownRef}
                     alignment={EDropdownAlignment.LEFT}
                     focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
-                    mobileViewProps={{
+                    pullerProps={{
                         children: (
                             <>
-                                <DropdownMobileHeader
+                                <PullerHeader
                                     controlButtons={
                                         <>
-                                            <DropdownMobileLoader />
-                                            <DropdownMobileClose onClick={() => setOpened(false)} />
+                                            <PullerLoader />
+                                            <PullerClose onClick={() => setOpened(false)} />
                                         </>
                                     }
                                 >
-                                    <DropdownMobileInput
+                                    <PullerInput
                                         autoFocus={true}
                                         placeholder="Type to proceed"
                                         value={filter}
                                         onChange={handleFilterChange}
                                     />
-                                </DropdownMobileHeader>
-                                <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
-                                <DropdownMobileFooter>
+                                </PullerHeader>
+                                <PullerBody>{renderDropdownContent()}</PullerBody>
+                                <PullerFooter>
                                     <Button
                                         theme={EButtonTheme.GENERAL}
                                         size={EComponentSize.SM}
@@ -953,7 +947,7 @@ export const LoadingExample = () => {
                                     >
                                         Button link text
                                     </Button>
-                                </DropdownMobileFooter>
+                                </PullerFooter>
                             </>
                         ),
                     }}
@@ -997,11 +991,11 @@ export const LoadingExample = () => {
 import React, { useState } from "react";
 import {
     MultiselectField,
-    DropdownMobileHeader,
-    DropdownMobileInput,
-    DropdownMobileClose,
-    DropdownMobileBody,
-    DropdownMobileFooter,
+    PullerHeader,
+    PullerInput,
+    PullerClose,
+    PullerBody,
+    PullerFooter,
     Button,
     EButtonTheme,
     EComponentSize,
@@ -1192,18 +1186,14 @@ export const WithCheckboxTreeExample = () => {
             focusTrapProps={{
                 focusTrapOptions: { initialFocus: false },
             }}
-            mobileViewProps={{
+            pullerProps={{
                 children: (
                     <>
-                        <DropdownMobileHeader controlButtons={<DropdownMobileClose onClick={() => setOpened(false)} />}>
-                            <DropdownMobileInput
-                                placeholder="Type to proceed"
-                                value={filter}
-                                onChange={handleFilterChange}
-                            />
-                        </DropdownMobileHeader>
-                        <DropdownMobileBody>{renderDropdownContent()}</DropdownMobileBody>
-                        <DropdownMobileFooter>
+                        <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}
@@ -1214,7 +1204,7 @@ export const WithCheckboxTreeExample = () => {
                             <Button theme={EButtonTheme.LINK} size={EComponentSize.SM} onClick={handleClickClearFilter}>
                                 Button link text
                             </Button>
-                        </DropdownMobileFooter>
+                        </PullerFooter>
                     </>
                 ),
             }}