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

package/bundle/components/MultiselectField.md

@@ -71,7 +71,7 @@ html-атрибуты корневого `<div>` — приходит из `Sele
 | `width` | `EDropdownWidth` | `EDropdownWidth.MIN_TARGET` | Умолчание задаёт компонент; потребитель может переопределить |
 | `size` | `EComponentSize` | из контекста | Умолчание — `size` мульти-списка; явный prop имеет приоритет |
 | `opened`, `setOpened`, `targetRef` | — | — | Обязательные, приходят из рендер-функции `children` |
-| `mobileViewProps` | `Omit<IDropdownMobileProps, "opened" \| "setOpened">` | — | Содержимое мобильной версии. Мобильная версия включена **всегда** — см. «Инварианты» |
+| `pullerProps` | `Omit<IPullerProps, "opened" \| "setOpened">` | — | Содержимое мобильной версии. Мобильная версия включена **всегда** — см. «Инварианты» |
 
 Умолчания `focusTrapOptions`: `clickOutsideDeactivates: true`,
 `preventScroll: true`, `returnFocusOnDeactivate` — по признаку «блок открыт мышью».
@@ -118,7 +118,7 @@ MultiselectField.Divider_Color
 - Barrel `src/components/MultiselectField/index.ts` экспортирует только `MultiselectField` и `IMultiselectFieldProps`. Части выпадающего блока публичны **через статические свойства** (`MultiselectField.Dropdown.Header` и т.д.), а не через barrel. Их типы (`IMultiselectFieldDropdownProps`, `IMultiselectFieldDropdownContentProps`, ...) в публичный API не входят — выносить их туда без отдельного решения не нужно.
 - Статические свойства `MultiselectField.Target`, `MultiselectField.Dropdown` и `MultiselectFieldDropdown.Header` / `.Content` / `.Footer` — часть публичного API.
 - `MultiselectField.Target` — это `SelectExtendedFieldTarget` по ссылке (`MultiselectField.Target === SelectExtendedFieldTarget`). Правки в нём затрагивают также `SelectField` и `ChipSelect`.
-- **Мобильная версия выпадающего блока включена всегда.** `MultiselectFieldDropdown` передаёт в `Dropdown` объект `mobileViewProps` даже когда потребитель ничего не передал — для этого есть константа-заглушка `ALWAYS_MOBILE_VIEW_PROPS`: `Dropdown` выбирает мобильную версию по truthiness этого prop'а. Убрать объект — значит на мобильной ширине отрендерить десктопный блок вместо полноэкранного. Наблюдаемое поведение, покрыто unit-тестом «Should render the mobile version on mobile width even without mobileViewProps». Visual-стори этот инвариант не держат: `PlaygroundExample` передаёт `mobileViewProps` сам, поэтому скриншоты не упадут, даже если убрать объект из компонента.
+- **Мобильная версия выпадающего блока включена всегда.** `MultiselectFieldDropdown` передаёт в `Dropdown` объект `pullerProps` даже когда потребитель ничего не передал — для этого есть константа-заглушка `ALWAYS_PULLER_PROPS`: `Dropdown` выбирает мобильную версию по truthiness этого prop'а. Убрать объект — значит на мобильной ширине отрендерить десктопный блок вместо шторки `Puller`. Наблюдаемое поведение, покрыто unit-тестом «Should render the mobile version on mobile width even without pullerProps». Visual-стори этот инвариант не держат: `PlaygroundExample` передаёт `pullerProps` сам, поэтому скриншоты не упадут, даже если убрать объект из компонента.
 - Признак «открыт мышью» живёт в `mouseUsedRef` в контексте: `MultiselectField` ставит его в `true` на `mousedown`, `MultiselectFieldDropdown` сбрасывает в `false`, когда блок закрылся. Он не state — переключение не должно вызывать перерисовку.
 - `size` из props раздаётся **только через контекст** и до поля выбора не доходит. Потребитель передаёт размер в `MultiselectField.Target` сам. Не «чинить» это без согласования: у поля и у выпадающего блока размеры могут различаться намеренно (в примерах фильтр внутри `Header` — размера SM при MD-поле).
 - `Header` / `Content` / `Footer` объявлены как `React.FC` и `ref` **не пробрасывают** — в отличие от `MultiselectField` и `MultiselectField.Dropdown`. Перевод их на `forwardRef` обратно совместим по props, но меняет тип компонента, поэтому делается отдельной задачей, а не попутно.
@@ -133,7 +133,7 @@ MultiselectField.Divider_Color
 - Пока выпадающий блок открыт, фокус заперт внутри него (`FocusTrap` из `focus-trap-react`). Содержимое обёрнуто в `<div role="presentation">` — обёртка нужна `FocusTrap` как единственный контейнер и не должна попадать в дерево доступности.
 - `clickOutsideDeactivates: true` — нажатие вне блока снимает перехват фокуса, после чего блок закрывает уже `SelectExtendedField` по своему `mousedown`-слушателю.
 - Возврат фокуса на поле при закрытии зависит от того, как блок открыли: после клавиатуры фокус возвращается, после мыши — нет (иначе клик вне блока повторно подсвечивал бы поле). Признак сбрасывается на каждое закрытие, поэтому следующее открытие оценивается заново.
-- `aria-haspopup="listbox"` и `aria-expanded` выставляет `MultiselectField.Target` (то есть `SelectExtendedFieldTarget`). Клавиши открытия поля — `Space`, `Enter`, `ArrowDown`, `ArrowUp`.
+- `aria-haspopup="listbox"` и `aria-expanded` выставляет `MultiselectField.Target` (то есть `SelectExtendedFieldTarget`). Клавиши открытия поля — `Space`, `Enter`, `ArrowDown`, `ArrowUp`, только когда фокус на самом поле, а не на кнопке тега.
 - `Escape` закрывает блок из любого места страницы — слушатель `SelectExtendedField` висит на `window`.
 - Роли и клавиатурную навигацию **внутри** блока компонент не задаёт: содержимое произвольное (чекбоксы, дерево, кнопки), связь поля со списком (`aria-controls`, `aria-activedescendant`) и `aria-label` на элементах — забота потребителя.
 - Компонент не хардкодит текстовые строки: `fieldLabel`, `placeholder`, подписи кнопок и заголовок мобильной версии передаёт потребитель — библиотека мультиязычная.
@@ -164,7 +164,7 @@ MultiselectField.Divider_Color
 
 **Инфраструктура:**
 
-- `Dropdown` — выпадающее меню через `Portal`, позиционирование и полноэкранная мобильная версия.
+- `Dropdown` — выпадающее меню через `Portal`, позиционирование и мобильная версия в нижней шторке `Puller`.
 - `LoaderScreen` — лоадер поверх содержимого при `Content loading`.
 - `FormField` — визуальный контейнер поля выбора и поля фильтра в `Header`.
 - `Tag` / `TagGroup`, `Checkbox`, `CheckboxTree` — типовое наполнение поля и выпадающего блока в примерах; частью компонента не являются.
@@ -189,7 +189,7 @@ MultiselectField.Divider_Color
 | `Example` | `ProductionExample.tsx` | Приближенный к продуктовому сценарий (в Storybook — «Example: production») |
 | `WithCheckboxTree` | `WithCheckboxTreeExample.tsx` | Дерево категорий вместо плоского списка чекбоксов (в Storybook — «Example: with CheckboxTree») |
 | `VisualTests` | `PlaygroundExample.tsx` | Скриншот-регрессия: поле с выбранным значением и раскрытый блок |
-| `VisualTestsNotFound` | `PlaygroundExample.tsx` | Скриншот-регрессия: пустой результат фильтра во всех размерах; на мобильной ширине — полноэкранная версия |
+| `VisualTestsNotFound` | `PlaygroundExample.tsx` | Скриншот-регрессия: пустой результат фильтра во всех размерах; на мобильной ширине — шторка `Puller` |
 
 ---
 
@@ -199,6 +199,8 @@ MultiselectField.Divider_Color
 |---|---|
 | 2026-09-03 | Создан документ AI-ready для `MultiselectField` (TRI-61). |
 | 2026-09-03 | AI-рефакторинг (TRI-61): JSDoc на props, контексте и всех частях выпадающего блока; значение контекста обёрнуто в `useMemo`, обработчик `onMouseDown` — в `useCallback` (выигрыша в текущей связке нет: части приходят из рендер-функции `children` и пересоздаются каждый рендер независимо от контекста, — это страховка на случай `React.memo` у потребителя); объект-заглушка `mobileViewProps` вынесен в константу, чтобы инвариант «мобильная версия включена всегда» читался из самого выражения; unit-тесты разбиты по субкомпонентам и расширены с 1 до 45 кейсов. Публичный API и наблюдаемое поведение не изменены. |
+| 2026-10-21 | **Breaking** (TRIPLEX-961): prop `mobileViewProps`, унаследованный от `Dropdown`, переименован в `pullerProps`. |
+| 2026-10-29 | TRIPLEX-1028: клик и Enter / Space на кнопках тегов и других фокусируемых элементах внутри `MultiselectField.Target` больше не переключают выпадающий блок, `stopPropagation` в `onKeyDown` тегов для этого не нужен. Клавиши открытия — см. «Accessibility». `onClear` у `MultiselectField.Target` получает событие клика. |
 
 ---
 
@@ -226,11 +228,11 @@ import {
     TagGroup,
     Text,
     ETextSize,
-    DropdownMobileFooter,
-    DropdownMobileBody,
-    DropdownMobileHeader,
-    DropdownMobileInput,
-    DropdownMobileClose,
+    PullerFooter,
+    PullerBody,
+    PullerHeader,
+    PullerInput,
+    PullerClose,
 } from "@sberbusiness/triplex-next";
 import "../MultiselectField.less";
 
@@ -315,11 +317,6 @@ export const DefaultExample = () => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
         if (selectedOptions.length > 3) {
@@ -330,7 +327,6 @@ export const DefaultExample = () => {
                     onFocus={handleTagFocus}
                     onBlur={handleTagBlur}
                     onClick={handleTagClick}
-                    onKeyDown={handleTagKeyDown}
                     onRemove={handleClearAll}
                 >
                     {`Выбрано ${selectedOptions.length} значения`}
@@ -348,7 +344,6 @@ export const DefaultExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -379,28 +374,26 @@ export const DefaultExample = () => {
                         targetRef={dropdownTargetRef}
                         ref={dropdownRef}
                         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={(event) => setFilter(event.target.value)}
                                         />
-                                    </DropdownMobileHeader>
-                                    <DropdownMobileBody>
+                                    </PullerHeader>
+                                    <PullerBody>
                                         {renderCheckboxList()}
                                         {!!filter.trim().length && !visibleOptions.length && (
                                             <Text size={ETextSize.B3} className="not-found">
                                                 Nothing was found.
                                             </Text>
                                         )}
-                                    </DropdownMobileBody>
-                                    <DropdownMobileFooter>
+                                    </PullerBody>
+                                    <PullerFooter>
                                         <Button
                                             theme={EButtonTheme.SECONDARY}
                                             size={EComponentSize.MD}
@@ -415,7 +408,7 @@ export const DefaultExample = () => {
                                         >
                                             Button link text
                                         </Button>
-                                    </DropdownMobileFooter>
+                                    </PullerFooter>
                                 </>
                             ),
                         }}
@@ -577,11 +570,6 @@ const SizeItem = ({ size }: ISizeItemProps) => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
 
@@ -595,7 +583,6 @@ const SizeItem = ({ size }: ISizeItemProps) => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -790,11 +777,6 @@ const StatusItem = ({ idPrefix, status }: IStatusItemProps) => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
 
@@ -808,7 +790,6 @@ const StatusItem = ({ idPrefix, status }: IStatusItemProps) => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -903,12 +884,12 @@ import {
     ETextSize,
     Tag,
     TagGroup,
-    DropdownMobileHeader,
-    DropdownMobileClose,
-    DropdownMobileInput,
-    DropdownMobileBody,
-    DropdownMobileFooter,
-    DropdownMobileLoader,
+    PullerHeader,
+    PullerClose,
+    PullerInput,
+    PullerBody,
+    PullerFooter,
+    PullerLoader,
 } from "@sberbusiness/triplex-next";
 import "../MultiselectField.less";
 
@@ -1010,11 +991,6 @@ const LoadingMultiselect = ({
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
 
@@ -1028,7 +1004,6 @@ const LoadingMultiselect = ({
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1059,33 +1034,33 @@ const LoadingMultiselect = ({
                     targetRef={dropdownTargetRef}
                     ref={dropdownRef}
                     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={(event) => setFilter(event.target.value)}
                                     />
-                                </DropdownMobileHeader>
-                                <DropdownMobileBody>
+                                </PullerHeader>
+                                <PullerBody>
                                     {renderCheckboxList()}
                                     {!!filter.trim().length && !visibleOptions.length && (
                                         <Text size={ETextSize.B3} className="not-found">
                                             Nothing was found.
                                         </Text>
                                     )}
-                                </DropdownMobileBody>
-                                <DropdownMobileFooter>
+                                </PullerBody>
+                                <PullerFooter>
                                     <Button
                                         theme={EButtonTheme.SECONDARY}
                                         size={EComponentSize.MD}
@@ -1096,7 +1071,7 @@ const LoadingMultiselect = ({
                                     <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={handleClearAll}>
                                         Button link text
                                     </Button>
-                                </DropdownMobileFooter>
+                                </PullerFooter>
                             </>
                         ),
                     }}
@@ -1147,11 +1122,11 @@ import {
     Button,
     Checkbox,
     CheckboxYGroup,
-    DropdownMobileBody,
-    DropdownMobileFooter,
     EButtonTheme,
     EComponentSize,
     MultiselectField,
+    PullerBody,
+    PullerFooter,
     Tag,
     TagGroup,
 } from "@sberbusiness/triplex-next";
@@ -1217,11 +1192,6 @@ export const DropdownWithoutInputExample = () => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
 
@@ -1235,7 +1205,6 @@ export const DropdownWithoutInputExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1266,11 +1235,11 @@ export const DropdownWithoutInputExample = () => {
                         targetRef={dropdownTargetRef}
                         ref={dropdownRef}
                         focusTrapProps={{ focusTrapOptions: { initialFocus: false } }}
-                        mobileViewProps={{
+                        pullerProps={{
                             children: (
                                 <>
-                                    <DropdownMobileBody>{renderCheckboxList()}</DropdownMobileBody>
-                                    <DropdownMobileFooter>
+                                    <PullerBody>{renderCheckboxList()}</PullerBody>
+                                    <PullerFooter>
                                         <Button
                                             theme={EButtonTheme.SECONDARY}
                                             size={EComponentSize.MD}
@@ -1285,7 +1254,7 @@ export const DropdownWithoutInputExample = () => {
                                         >
                                             Button link text
                                         </Button>
-                                    </DropdownMobileFooter>
+                                    </PullerFooter>
                                 </>
                             ),
                         }}
@@ -1333,11 +1302,11 @@ import {
     ETextSize,
     Tag,
     TagGroup,
-    DropdownMobileHeader,
-    DropdownMobileClose,
-    DropdownMobileInput,
-    DropdownMobileBody,
-    DropdownMobileFooter,
+    PullerHeader,
+    PullerClose,
+    PullerInput,
+    PullerBody,
+    PullerFooter,
 } from "@sberbusiness/triplex-next";
 import "../MultiselectField.less";
 
@@ -1414,11 +1383,6 @@ export const WithClearButtonExample = () => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
 
@@ -1432,7 +1396,6 @@ export const WithClearButtonExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1464,28 +1427,26 @@ export const WithClearButtonExample = () => {
                         targetRef={dropdownTargetRef}
                         ref={dropdownRef}
                         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={(event) => setFilter(event.target.value)}
                                         />
-                                    </DropdownMobileHeader>
-                                    <DropdownMobileBody>
+                                    </PullerHeader>
+                                    <PullerBody>
                                         {renderCheckboxList()}
                                         {!!filter.trim().length && !visibleOptions.length && (
                                             <Text size={ETextSize.B3} className="not-found">
                                                 Nothing was found.
                                             </Text>
                                         )}
-                                    </DropdownMobileBody>
-                                    <DropdownMobileFooter>
+                                    </PullerBody>
+                                    <PullerFooter>
                                         <Button
                                             theme={EButtonTheme.SECONDARY}
                                             size={EComponentSize.MD}
@@ -1500,7 +1461,7 @@ export const WithClearButtonExample = () => {
                                         >
                                             Button link text
                                         </Button>
-                                    </DropdownMobileFooter>
+                                    </PullerFooter>
                                 </>
                             ),
                         }}
@@ -1566,11 +1527,11 @@ import {
     ETextSize,
     Tag,
     TagGroup,
-    DropdownMobileHeader,
-    DropdownMobileClose,
-    DropdownMobileInput,
-    DropdownMobileBody,
-    DropdownMobileFooter,
+    PullerHeader,
+    PullerClose,
+    PullerInput,
+    PullerBody,
+    PullerFooter,
     IconWrapper,
 } from "@sberbusiness/triplex-next";
 import { DefaulticonStrokePrdIcon20 } from "@sberbusiness/icons-next";
@@ -1648,11 +1609,6 @@ export const WithPrefixAndPostfixExample = () => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
 
@@ -1666,7 +1622,6 @@ export const WithPrefixAndPostfixExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1703,28 +1658,26 @@ export const WithPrefixAndPostfixExample = () => {
                         targetRef={dropdownTargetRef}
                         ref={dropdownRef}
                         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={(event) => setFilter(event.target.value)}
                                         />
-                                    </DropdownMobileHeader>
-                                    <DropdownMobileBody>
+                                    </PullerHeader>
+                                    <PullerBody>
                                         {renderCheckboxList()}
                                         {!!filter.trim().length && !visibleOptions.length && (
                                             <Text size={ETextSize.B3} className="not-found">
                                                 Nothing was found.
                                             </Text>
                                         )}
-                                    </DropdownMobileBody>
-                                    <DropdownMobileFooter>
+                                    </PullerBody>
+                                    <PullerFooter>
                                         <Button
                                             theme={EButtonTheme.SECONDARY}
                                             size={EComponentSize.MD}
@@ -1739,7 +1692,7 @@ export const WithPrefixAndPostfixExample = () => {
                                         >
                                             Button link text
                                         </Button>
-                                    </DropdownMobileFooter>
+                                    </PullerFooter>
                                 </>
                             ),
                         }}
@@ -1791,11 +1744,6 @@ import {
     Button,
     Checkbox,
     CheckboxYGroup,
-    DropdownMobileBody,
-    DropdownMobileClose,
-    DropdownMobileFooter,
-    DropdownMobileHeader,
-    DropdownMobileInput,
     EButtonTheme,
     EComponentSize,
     EFontType,
@@ -1810,6 +1758,11 @@ import {
     HelpBox,
     Link,
     MultiselectField,
+    PullerBody,
+    PullerClose,
+    PullerFooter,
+    PullerHeader,
+    PullerInput,
     Tag,
     TagGroup,
     Text,
@@ -1904,11 +1857,6 @@ const ProductionMultiselect = () => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedOptions.length) return null;
 
@@ -1922,7 +1870,6 @@ const ProductionMultiselect = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1955,28 +1902,26 @@ const ProductionMultiselect = () => {
                     targetRef={dropdownTargetRef}
                     ref={dropdownRef}
                     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={(event) => setFilter(event.target.value)}
                                     />
-                                </DropdownMobileHeader>
-                                <DropdownMobileBody>
+                                </PullerHeader>
+                                <PullerBody>
                                     {renderCheckboxList()}
                                     {!!filter.trim().length && !visibleOptions.length && (
                                         <Text size={ETextSize.B3} className="not-found">
                                             Nothing was found.
                                         </Text>
                                     )}
-                                </DropdownMobileBody>
-                                <DropdownMobileFooter>
+                                </PullerBody>
+                                <PullerFooter>
                                     <Button
                                         theme={EButtonTheme.SECONDARY}
                                         size={EComponentSize.MD}
@@ -1987,7 +1932,7 @@ const ProductionMultiselect = () => {
                                     <Button theme={EButtonTheme.LINK} size={EComponentSize.MD} onClick={handleClearAll}>
                                         Button link text
                                     </Button>
-                                </DropdownMobileFooter>
+                                </PullerFooter>
                             </>
                         ),
                     }}
@@ -2159,11 +2104,6 @@ export const WithCheckboxTreeExample = () => {
         const handleTagFocus = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagBlur = (event: React.FocusEvent<HTMLSpanElement>) => event.stopPropagation();
         const handleTagClick = (event: React.MouseEvent<HTMLSpanElement>) => event.stopPropagation();
-        const handleTagKeyDown = (event: React.KeyboardEvent<HTMLSpanElement>) => {
-            if (event.code === "Enter" || event.code === "Space") {
-                event.stopPropagation();
-            }
-        };
 
         if (!selectedLeafNodes.length) return null;
         if (selectedLeafNodes.length > 3) {
@@ -2174,7 +2114,6 @@ export const WithCheckboxTreeExample = () => {
                     onFocus={handleTagFocus}
                     onBlur={handleTagBlur}
                     onClick={handleTagClick}
-                    onKeyDown={handleTagKeyDown}
                     onRemove={() => setSelectedIds([])}
                 >
                     {`Выбрано ${selectedLeafNodes.length} значения`}
@@ -2191,7 +2130,6 @@ export const WithCheckboxTreeExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => setSelectedIds((prev) => prev.filter((id) => id !== node.id))}
                     >
                         {node.label}

package/bundle/components/Notification.md

@@ -123,7 +123,7 @@ Notification.TimeColor    (цвет времени)
 
 ## Связанные компоненты
 
-- `NotificationGrouped` — обёртка для отображения уведомления стопкой.
+- `NotificationGrouped` — обёртка для отображения уведомления стопкой; см. [`NotificationGrouped-ai.md`](./NotificationGrouped-ai.md).
 - `Button` — типичное содержимое `Notification.Body.Footer`.
 - `AlertContext` — может вкладываться в `Notification.Body.Footer`.
 - `UnorderedList` — основа `Notification.Body.List`.
@@ -153,6 +153,7 @@ Notification.TimeColor    (цвет времени)
 |---|---|
 | 2026-06-16 | Создан AI-документ. `Notification`, `NotificationGrouped`, `NotificationBody` переведены на `forwardRef` (паттерн `Object.assign`); удалены типы `INotificationSFC`/`INotificationBodySFC`; тип `Notification.Time.time` расширен с `React.ReactText` до `React.ReactNode`. Stories мигрированы на modern pattern. |
 | 2026-09-28 | Токен `Notification.Shadow` ссылается на `Shadow.07` (светлая) и `DarkShadow.07` (тёмная) вместо литералов; в тёмной теме прозрачность 0.25 вместо 0.35. |
+| 2026-10-15 | Добавлена ссылка на отдельный `NotificationGrouped-ai.md`. |
 
 ---