@sberbusiness/triplex-next-mcp-server 1.53.0 → 1.54.0

package/bundle/components/MultiselectField.md

@@ -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`, подписи кнопок и заголовок мобильной версии передаёт потребитель — библиотека мультиязычная.
@@ -200,6 +200,7 @@ 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` получает событие клика. |
 
 ---
 
@@ -316,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) {
@@ -331,7 +327,6 @@ export const DefaultExample = () => {
                     onFocus={handleTagFocus}
                     onBlur={handleTagBlur}
                     onClick={handleTagClick}
-                    onKeyDown={handleTagKeyDown}
                     onRemove={handleClearAll}
                 >
                     {`Выбрано ${selectedOptions.length} значения`}
@@ -349,7 +344,6 @@ export const DefaultExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -576,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;
 
@@ -594,7 +583,6 @@ const SizeItem = ({ size }: ISizeItemProps) => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -789,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;
 
@@ -807,7 +790,6 @@ const StatusItem = ({ idPrefix, status }: IStatusItemProps) => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1009,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;
 
@@ -1027,7 +1004,6 @@ const LoadingMultiselect = ({
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1216,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;
 
@@ -1234,7 +1205,6 @@ export const DropdownWithoutInputExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1413,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;
 
@@ -1431,7 +1396,6 @@ export const WithClearButtonExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1645,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;
 
@@ -1663,7 +1622,6 @@ export const WithPrefixAndPostfixExample = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -1899,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;
 
@@ -1917,7 +1870,6 @@ const ProductionMultiselect = () => {
                         onFocus={handleTagFocus}
                         onBlur={handleTagBlur}
                         onClick={handleTagClick}
-                        onKeyDown={handleTagKeyDown}
                         onRemove={() => handleToggle(opt, false)}
                     >
                         {opt.label}
@@ -2152,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) {
@@ -2167,7 +2114,6 @@ export const WithCheckboxTreeExample = () => {
                     onFocus={handleTagFocus}
                     onBlur={handleTagBlur}
                     onClick={handleTagClick}
-                    onKeyDown={handleTagKeyDown}
                     onRemove={() => setSelectedIds([])}
                 >
                     {`Выбрано ${selectedLeafNodes.length} значения`}
@@ -2184,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/Portal.md

@@ -86,9 +86,12 @@ version: "1.0"
 ## Связанные компоненты
 
 - `Dropdown` (`src/components/Dropdown/`) — рендерит выпадающий слой через
-  Portal в `document.body`.
+  Portal в `document.body`; мобильная версия — через `Puller`, в
+  `pullerProps.renderContainer ?? document.body`.
 - `Tooltip` (`src/components/Tooltip/`) — desktop- и mobile-реализации
-  рендерят тултип через Portal: mobile — всегда в `document.body`, desktop — в
+  рендерят тултип через Portal: mobile — через `Puller`, всегда в
+  `document.body`, desktop — в `renderContainer ?? document.body`.
+- `Puller` (`src/components/Puller/`) — рендерит шторку через Portal в
   `renderContainer ?? document.body`.
 
 ---

package/bundle/components/Puller.md

@@ -1,7 +1,7 @@
 ---
 component: Puller
 category: Puller
-related: [Overlay, ButtonIcon, LoaderSmall, Badge, FormField]
+related: [Overlay, Portal, ButtonIcon, LoaderSmall, Badge, FormField]
 tokens:
   - Puller.Backdrop
   - Puller.Body_Background
@@ -46,7 +46,11 @@ version: "1.0"
 
 #### Опциональные props
 
-Нет, кроме HTML-атрибутов `<div>`.
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `renderContainer` | `Element \| DocumentFragment` | `document.body` | DOM-узел, в который рендерится шторка |
+
+Остальные — HTML-атрибуты `<div>`.
 
 ### Субкомпоненты
 
@@ -64,7 +68,8 @@ version: "1.0"
 
 ### Ограничения
 
-- `Puller` не выносит себя в `Portal`: предок с `transform`, `filter`, `perspective`, `contain` или собственным stacking context сдвинет, обрежет или перекроет шторку (`.pullerWrapper` — `position: fixed`). При прямом использовании оберни `Puller` в `<Portal container={document.body}>`; `pullerProps` у `Dropdown` оборачивать не нужно.
+- `.pullerWrapper` — `position: fixed`: `transform`, `filter`, `perspective`, `contain` или собственный stacking context у `renderContainer` и его родителей сдвинут, обрежут или перекроют шторку.
+- Пока шторка открыта, скролл блокируется на `body`, а не на `renderContainer`.
 - Шторка не закрывается по `Escape` и не перехватывает фокус — это добавляет потребитель (как `MultiselectField.Dropdown` и `DatePickerExtended`).
 - Высота ограничена `50vh`: длинное содержимое кладётся в прокручиваемый `PullerBody`.
 
@@ -92,6 +97,7 @@ PullerList.Selected_Background
 ## Инварианты
 
 - `forwardRef` на `Puller` и всех субкомпонентах, кроме `PullerLoader`, — не убирать. Ref `Puller` указывает на контентный `<div>` (`.puller`), а не на wrapper. На это опирается `Dropdown`: его ref в мобильном режиме ведёт сюда.
+- `Puller` рендерится через `Portal`, по умолчанию в `document.body`. Смена контейнера по умолчанию — breaking change для потребителей, которые ищут шторку в DOM.
 - В закрытом состоянии (`opened`, `opening` и `closing` равны `false`) `PullerInner` возвращает `null`. Анимация закрытия доигрывает до `transitionend` на подложке и только потом снимает разметку.
 - Непрозрачность подложки задаётся альфа-каналом токена `Puller.Backdrop`; `opacity` подложки только анимирует появление (0 → 1).
 - Анимация открытия требует сначала отрендерить шторку закрытой: `openingState` / `openedState` выставляются через `setTimeout`. Не заменять на синхронную установку, иначе переход не проиграется.
@@ -115,6 +121,7 @@ PullerList.Selected_Background
 ## Связанные компоненты
 
 - `Overlay` — семейство, к которому относится `OverlayBase`: `Puller` рендерит `OverlayBase` с `direction={EOverlayDirection.BOTTOM}` и получает от него флаги `opening` / `closing` и сеттеры анимации.
+- `Portal` — выносит шторку из дерева родителя, см. «Инварианты».
 - `ButtonIcon` — база `PullerClose`, `IPullerCloseProps` расширяет `IButtonIconProps`.
 - `LoaderSmall` — рендерится в `PullerLoader` (тема `BRAND`, SM) и в элементе-лоадере `PullerList` (MD). `IPullerLoaderProps` расширяет `ILoaderSmallProps`.
 - `Badge` — `Badge.Dot` в углу `PullerListItem` при `showNotificationIcon`.
@@ -130,7 +137,7 @@ PullerList.Selected_Background
 Основные истории: `stories/Puller/Puller.stories.tsx`
 Файлы примеров: `stories/Puller/examples/`
 
-Примеры рендерят `Puller` в `<Portal container={document.body}>` и стартуют закрытыми. Шторку открывает `play`; на docs-странице (`viewMode === "docs"`) он ничего не делает.
+Примеры стартуют закрытыми. Шторку открывает `play`; на docs-странице (`viewMode === "docs"`) он ничего не делает.
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
@@ -138,7 +145,7 @@ PullerList.Selected_Background
 | `Default` | `Default.tsx` | Кнопка открывает шторку: шапка с заголовком и `PullerClose`, тело, футер с кнопкой |
 | `WithList` | `WithList.tsx` | `PullerList` с выбранным элементом, значком уведомления и `loading`; выбор закрывает шторку |
 | `WithInput` | `WithInput.tsx` | Шапка с `PullerInput`, `PullerLoader` и `PullerClose` — раскладка мобильного suggest |
-| `SMSPuller` («Example: SMSPuller») | `SMSPuller.tsx` | Подтверждение операции СМС-кодом: `SMSField` с обратным отсчётом в `PullerBody` |
+| `RenderContainer` («Render container») | `RenderContainer.tsx` | Рендер шторки в заданный контейнер через `renderContainer` |
 | `VisualTests` | `VisualTests.tsx` | Длинный заголовок, лоадер, скролл длинного списка, выбранный элемент, значок, футер с двумя кнопками |
 
 ---
@@ -148,6 +155,7 @@ PullerList.Selected_Background
 | Дата | Изменение |
 |---|---|
 | 2026-10-21 | Создан документ (TRIPLEX-961). |
+| 2026-10-31 | **Breaking**: `Puller` сам рендерится через `Portal`: по умолчанию в `document.body`, контейнер задаёт новый prop `renderContainer` (TRIPLEX-961). |
 
 ---
 
@@ -164,7 +172,6 @@ import {
     EButtonTheme,
     EComponentSize,
     ETextSize,
-    Portal,
     Puller,
     PullerBody,
     PullerClose,
@@ -187,31 +194,29 @@ export const Default = () => {
             >
                 Open
             </Button>
-            <Portal container={document.body}>
-                <Puller opened={opened} setOpened={setOpened} role="dialog" aria-labelledby="puller-default-title">
-                    <PullerHeader controlButtons={<PullerClose aria-label="Close" onClick={() => setOpened(false)} />}>
-                        <Text id="puller-default-title" size={ETextSize.B1}>
-                            Title
-                        </Text>
-                    </PullerHeader>
-                    <PullerBody>
-                        <Text tag="div" size={ETextSize.B3} style={{ padding: "16px" }}>
-                            Puller content. The puller closes via the close button, the footer button or a tap on the
-                            backdrop.
-                        </Text>
-                    </PullerBody>
-                    <PullerFooter>
-                        <Button
-                            theme={EButtonTheme.GENERAL}
-                            size={EComponentSize.MD}
-                            block
-                            onClick={() => setOpened(false)}
-                        >
-                            Done
-                        </Button>
-                    </PullerFooter>
-                </Puller>
-            </Portal>
+            <Puller opened={opened} setOpened={setOpened} role="dialog" aria-labelledby="puller-default-title">
+                <PullerHeader controlButtons={<PullerClose aria-label="Close" onClick={() => setOpened(false)} />}>
+                    <Text id="puller-default-title" size={ETextSize.B1}>
+                        Title
+                    </Text>
+                </PullerHeader>
+                <PullerBody>
+                    <Text tag="div" size={ETextSize.B3} style={{ padding: "16px" }}>
+                        Puller content. The puller closes via the close button, the footer button or a tap on the
+                        backdrop.
+                    </Text>
+                </PullerBody>
+                <PullerFooter>
+                    <Button
+                        theme={EButtonTheme.GENERAL}
+                        size={EComponentSize.MD}
+                        block
+                        onClick={() => setOpened(false)}
+                    >
+                        Done
+                    </Button>
+                </PullerFooter>
+            </Puller>
         </div>
     );
 };
@@ -228,7 +233,6 @@ import {
     EButtonTheme,
     EComponentSize,
     ETextSize,
-    Portal,
     Puller,
     PullerBody,
     PullerClose,
@@ -264,30 +268,28 @@ export const WithList = () => {
             >
                 Open
             </Button>
-            <Portal container={document.body}>
-                <Puller opened={opened} setOpened={setOpened} role="dialog" aria-labelledby="puller-with-list-title">
-                    <PullerHeader controlButtons={<PullerClose aria-label="Close" onClick={() => setOpened(false)} />}>
-                        <Text id="puller-with-list-title" size={ETextSize.B1}>
-                            Select a value
-                        </Text>
-                    </PullerHeader>
-                    <PullerBody>
-                        <PullerList loading aria-labelledby="puller-with-list-title">
-                            {OPTIONS.map((option) => (
-                                <PullerListItem
-                                    key={option.id}
-                                    id={option.id}
-                                    selected={option.id === selectedId}
-                                    showNotificationIcon={option.hasNotifications}
-                                    onSelect={() => handleSelect(option.id)}
-                                >
-                                    {option.label}
-                                </PullerListItem>
-                            ))}
-                        </PullerList>
-                    </PullerBody>
-                </Puller>
-            </Portal>
+            <Puller opened={opened} setOpened={setOpened} role="dialog" aria-labelledby="puller-with-list-title">
+                <PullerHeader controlButtons={<PullerClose aria-label="Close" onClick={() => setOpened(false)} />}>
+                    <Text id="puller-with-list-title" size={ETextSize.B1}>
+                        Select a value
+                    </Text>
+                </PullerHeader>
+                <PullerBody>
+                    <PullerList loading aria-labelledby="puller-with-list-title">
+                        {OPTIONS.map((option) => (
+                            <PullerListItem
+                                key={option.id}
+                                id={option.id}
+                                selected={option.id === selectedId}
+                                showNotificationIcon={option.hasNotifications}
+                                onSelect={() => handleSelect(option.id)}
+                            >
+                                {option.label}
+                            </PullerListItem>
+                        ))}
+                    </PullerList>
+                </PullerBody>
+            </Puller>
         </div>
     );
 };
@@ -303,7 +305,6 @@ import {
     Button,
     EButtonTheme,
     EComponentSize,
-    Portal,
     Puller,
     PullerBody,
     PullerClose,
@@ -340,39 +341,33 @@ export const WithInput = () => {
             >
                 Open
             </Button>
-            <Portal container={document.body}>
-                <Puller opened={opened} setOpened={setOpened} role="dialog" aria-label="City search">
-                    <PullerHeader
-                        controlButtons={
-                            <>
-                                {/* В реальном сценарии лоадер показывается на время запроса подсказок. */}
-                                <PullerLoader />
-                                <PullerClose aria-label="Close" onClick={() => setOpened(false)} />
-                            </>
-                        }
-                    >
-                        <PullerInput
-                            value={inputValue}
-                            placeholder="Enter a city"
-                            aria-label="City"
-                            onChange={(event) => setInputValue(event.target.value)}
-                        />
-                    </PullerHeader>
-                    <PullerBody>
-                        <PullerList aria-label="Suggestions">
-                            {OPTIONS.map((option) => (
-                                <PullerListItem
-                                    key={option.id}
-                                    id={option.id}
-                                    onSelect={() => handleSelect(option.label)}
-                                >
-                                    {option.label}
-                                </PullerListItem>
-                            ))}
-                        </PullerList>
-                    </PullerBody>
-                </Puller>
-            </Portal>
+            <Puller opened={opened} setOpened={setOpened} role="dialog" aria-label="City search">
+                <PullerHeader
+                    controlButtons={
+                        <>
+                            {/* В реальном сценарии лоадер показывается на время запроса подсказок. */}
+                            <PullerLoader />
+                            <PullerClose aria-label="Close" onClick={() => setOpened(false)} />
+                        </>
+                    }
+                >
+                    <PullerInput
+                        value={inputValue}
+                        placeholder="Enter a city"
+                        aria-label="City"
+                        onChange={(event) => setInputValue(event.target.value)}
+                    />
+                </PullerHeader>
+                <PullerBody>
+                    <PullerList aria-label="Suggestions">
+                        {OPTIONS.map((option) => (
+                            <PullerListItem key={option.id} id={option.id} onSelect={() => handleSelect(option.label)}>
+                                {option.label}
+                            </PullerListItem>
+                        ))}
+                    </PullerList>
+                </PullerBody>
+            </Puller>
         </div>
     );
 };

package/bundle/components/SelectExtendedField.md

@@ -75,8 +75,8 @@ version: "1.0"
 | `label` | `React.ReactNode` | — | Выбранное значение |
 | `placeholder` | `React.ReactNode` | — | Отображается, пока нет `label` |
 | `loading` | `boolean` | `false` | Вместо каретки — лоадер; клик и клавиатура не открывают блок |
-| `onClear` | `() => void` | — | Если передан, в постфиксе появляется кнопка очистки |
-| `prefix` / `postfix` | `React.ReactNode` | — | Слоты `FormFieldPrefix` / `FormFieldPostfix`. Постфикс идёт **после** каретки |
+| `onClear` | `React.MouseEventHandler<HTMLButtonElement>` | — | Если передан, в постфиксе появляется кнопка очистки |
+| `prefix` / `postfix` | `React.ReactNode` | — | Слоты `FormFieldPrefix` / `FormFieldPostfix`. Постфикс идёт **после** каретки. Обработка событий — см. «Ограничения» |
 | `size` | `EComponentSize` | `EComponentSize.MD` | Размер поля. Определяет размер каретки и лоадера |
 | `status` | `EFormFieldStatus` | `EFormFieldStatus.DEFAULT` | Визуальное состояние. `DISABLED` блокирует открытие |
 
@@ -94,7 +94,8 @@ version: "1.0"
 - `SelectExtendedFieldDropdown` — не `forwardRef`-компонент. Ссылка передаётся через `forwardedRef`.
 - Выпадающий блок компонент не рендерит сам и не знает, открыт ли он визуально: `opened` нужно передать в `SelectExtendedFieldDropdown` (или в свою разметку) самостоятельно.
 - Компонент не хранит выбранное значение и не знает про опции. Значение — целиком забота потребителя.
-- Клик по кнопке очистки (`onClear`) не раскрывает выпадающий блок: `SelectExtendedFieldTarget` останавливает всплытие в обработчике `FormFieldClear`. Без этого событие дошло бы до `onClick` на `FormField` и переключило `opened` — так же гасят всплытие `Chip.Select` и `Chip.DatePicker`. Не убирать: затрагивает `SelectField` и `MultiselectField.Target`, которые рендерят тот же `Target`.
+- Клик по фокусируемым элементам внутри поля (`tabIndex >= 0`: кнопка очистки, `HelpBox`, кнопки тегов в значении) и по содержимому порталов (Tooltip) не переключает выпадающий блок; Enter / Space на них не открывают блок и не отменяют их нативный клик. Клик по остальному содержимому поля, включая элементы с `tabIndex < 0` (`<button tabIndex={-1}>`, `div` с `onClick` без `tabIndex`), блок переключает. Затрагивает `SelectField` и `MultiselectField.Target`.
+- Клик по кнопке очистки (`onClear`) не всплывает: `onClick` поля и обработчики внешних элементов его не получают.
 
 ---
 
@@ -135,7 +136,7 @@ version: "1.0"
 
 - `SelectExtendedFieldTarget` выставляет на корневом элементе `aria-haspopup="listbox"` и `aria-expanded`, отражающий `opened`.
 - Роли `listbox` / `option` и клавиатурную навигацию по опциям (`ArrowUp` / `ArrowDown`, выбор по `Enter` / `Space`) даёт `DropdownList` — то есть `SelectExtendedField.Dropdown.List`. Если выпадающий блок не список, эти роли не появляются и навигацию организует потребитель.
-- Клавиши открытия на поле выбора: `Space`, `Enter`, `ArrowDown`, `ArrowUp`. Обработчик вызывает `preventDefault` (чтобы страница не прокручивалась) и `stopPropagation` — иначе то же нажатие поймает документный обработчик `DropdownListItem` и список сразу выберет опцию.
+- Клавиши открытия на поле выбора: `Space`, `Enter`, `ArrowDown`, `ArrowUp` (только когда фокус на самом поле). Обработчик вызывает `preventDefault` (чтобы страница не прокручивалась) и `stopPropagation` — иначе то же нажатие поймает документный обработчик `DropdownListItem` и список сразу выберет опцию.
 - В состояниях `loading` и `status={EFormFieldStatus.DISABLED}` поле не реагирует ни на клик, ни на клавиатуру; `onClick` / `onKeyDown` потребителя в этих состояниях тоже не вызываются.
 - `Escape` закрывает блок из любого места страницы — слушатель `KeyDownListener` висит на `window`.
 - `Tab` закрывает блок только при `closeOnTab`. Фокус компонент не перехватывает и не возвращает: focus trap, если нужен, добавляет потребитель.
@@ -206,6 +207,7 @@ version: "1.0"
 | 2026-08-07 | AI-рефакторинг (TRI-74): `onOpen` / `onClose` сравнивают предыдущее значение `opened` вместо флага «смонтирован» — колбэки больше не срабатывают ложно при двойном маунте в React 18 StrictMode. Удалены ссылки на несуществующие CSS-классы в `SelectExtendedFieldTarget` (в `class` попадал литерал `undefined`). Клик по кнопке очистки больше не раскрывает выпадающий блок — всплытие останавливается, как в `Chip.Select`. Слушатель `mousedown` навешивается только пока блок открыт, callback-ref стабилизирован через `useCallback`, убран мёртвый внутренний `targetRef` в `SelectExtendedFieldTarget`, дедуплицирован список опций десктопной и мобильной версий в `SelectExtendedFieldDropdownDefault`. JSDoc на всех props, unit-тесты разбиты по субкомпонентам и расширены с 42 до 69 кейсов. Stories переведены на modern pattern. Публичный API не изменён. |
 | 2026-09-29 | Аудит симметрии `related` (TRI-156): из `related` убраны несимметричные имена (`Chip`). Пояснения к убранным именам сохранены прозой в «Связанные компоненты»; публичный API и поведение не затронуты. |
 | 2026-10-21 | **Breaking** (TRIPLEX-961): prop `mobileViewProps`, унаследованный `SelectExtendedField.Dropdown` от `Dropdown`, переименован в `pullerProps`. |
+| 2026-10-29 | TRIPLEX-1028: `SelectExtendedField.Target` переключает выпадающий блок только по событиям самого поля — см. «Ограничения». `onClear` получает событие клика. |
 
 ---
 

package/bundle/components/SelectField.md

@@ -147,8 +147,9 @@ version: "1.0"
   `SelectField` рендерит вокруг выпадающего блока. Без этого провайдера связка не работает.
 - `aria-expanded` и `aria-haspopup="listbox"` выставляет `SelectExtendedFieldTarget`;
   роли `listbox` / `option` и навигацию `ArrowUp` / `ArrowDown` — `DropdownList`.
-- Клавиши открытия списка: `Space`, `Enter`, `ArrowDown`, `ArrowUp`. Закрытие — `Escape`
-  (из любого места страницы), `Tab` (`closeOnTab`) и нажатие мышью вне поля и списка.
+- Клавиши открытия списка: `Space`, `Enter`, `ArrowDown`, `ArrowUp` (только когда фокус на самом
+  поле). Закрытие — `Escape` (из любого места страницы), `Tab` (`closeOnTab`) и нажатие мышью
+  вне поля и списка.
 - В состояниях `loading` и `status={EFormFieldStatus.DISABLED}` поле не реагирует ни на клик,
   ни на клавиатуру.
 - **Доступное имя задаёт потребитель.** Компонент не хардкодит текст (библиотека мультиязычная):
@@ -207,6 +208,7 @@ version: "1.0"
 | 2026-09-03 | Создан документ (TRI-75). AI-рефакторинг: удалён мёртвый внутренний `targetRef`, внешний `ref` пробрасывается напрямую и больше не пересоздаётся на каждый рендер; идентификатор списка переведён с `useRef(uniqueId())` на `useState(() => uniqueId())`, чтобы счётчик не крутился на каждом рендере; параметры рендер-функций перестали затенять `props` компонента; импорты приведены к алиасу пакета; JSDoc на всех props и на компоненте. Unit-тесты расширены с 15 до 24 кейсов (`onChange` с аргументом, опции и выбранное значение, `aria-activedescendant` через `DropdownListContext`, стабильность `listId`, ref-target). Stories переведены на modern pattern, `States` разделена на `Statuses` и `Loading`. Публичный API не изменён |
 | 2026-09-29 | Аудит симметрии `related` (TRI-156): из `related` убраны несимметричные имена (`Chip`); добавлены обратные ссылки (`FormField`). Пояснения к убранным именам сохранены прозой в «Связанные компоненты»; публичный API и поведение не затронуты. |
 | 2026-10-21 | Переход на `Puller` (TRIPLEX-961): мобильный элемент списка — `PullerListItem` (бывший `DropdownMobileListItem`). |
+| 2026-10-29 | TRIPLEX-1028: Enter / Space на кнопке очистки и других фокусируемых элементах внутри поля больше не открывают список, клик по таким элементам, кроме очистки, — не переключает. Клавиши открытия — см. «Accessibility». `targetProps.onClear` получает событие клика. |
 
 ---
 

package/bundle/manifest.json

@@ -1,7 +1,7 @@
 {
   "schemaVersion": 1,
-  "triplexVersion": "1.53.0",
-  "generatedAt": "2026-10-30T17:09:54.308Z",
+  "triplexVersion": "1.54.0",
+  "generatedAt": "2026-11-06T17:58:45.272Z",
   "components": [
     {
       "name": "AbstractTree",
@@ -267,6 +267,12 @@
       "file": "components/ChipSelect.md",
       "ai_ready": true
     },
+    {
+      "name": "ChipSelectTarget",
+      "path": "src/components/Chip/ChipSelectTarget-ai.md",
+      "file": "components/ChipSelectTarget.md",
+      "ai_ready": true
+    },
     {
       "name": "ChipSort",
       "path": "src/components/Chip/ChipSort-ai.md",
@@ -279,6 +285,12 @@
       "file": "components/ChipSuggest.md",
       "ai_ready": true
     },
+    {
+      "name": "ChipSuggestTarget",
+      "path": "src/components/Chip/ChipSuggestTarget-ai.md",
+      "file": "components/ChipSuggestTarget.md",
+      "ai_ready": true
+    },
     {
       "name": "CodeText",
       "path": "src/components/Typography/CodeText-ai.md",
@@ -1304,6 +1316,11 @@
       "file": "release-notes/1.54.0.mdx",
       "path": "stories/release-notes/v1/1.54.0.mdx"
     },
+    {
+      "version": "1.55.0",
+      "file": "release-notes/1.55.0.mdx",
+      "path": "stories/release-notes/v1/1.55.0.mdx"
+    },
     {
       "version": "1.6.0",
       "file": "release-notes/1.6.0.mdx",

package/bundle/release-notes/1.53.0.mdx

@@ -21,7 +21,7 @@ import { Meta, Title, Heading } from "@storybook/addon-docs/blocks";
 
 <Heading>Ломающие изменения</Heading>
 
-**Dropdown / MultiselectField.Dropdown / SelectExtendedField.Dropdown / ChipSuggest / Suggest**
+**ChipSuggest / Dropdown / MultiselectField.Dropdown / SelectExtendedField.Dropdown / Suggest**
 
 - Prop `mobileViewProps` переименован в `pullerProps` (тип `Omit<IPullerProps, "opened" | "setOpened">`), поведение прежнее. Переименование распространяется на props, унаследованные от `IDropdownProps`: `IMultiselectFieldDropdownProps`, `ISelectExtendedFieldDropdownProps`, `ISuggestDropdownProps`, `dropdownProps` у `ChipSuggest`.
 - CSS-класс блокировки скролла на `body` у десктопного меню переименован: `.dropdownDesktopOverflowHidden` → `.dropdownDesktopScrollLock`.