@sberbusiness/triplex-next-mcp-server 0.36.0-beta0 → 1.40.0-beta

package/bundle/components/List.md

@@ -27,7 +27,7 @@ version: "1.0"
 | Prop | Тип | По умолчанию | Описание |
 |---|---|---|---|
 | `loading` | `boolean` | `false` | Показывает `LoaderScreen` поверх содержимого. Используется при обновлении текущего списка новыми данными (например, после применения фильтра) |
-| `children` | `React.ReactNode` | — | Элементы списка (обычно `<ListItem>` или `<ListItemTable>`) |
+| `children` | `React.ReactNode` | — | Элементы списка (обычно `<ListItem>` или `<ListTableItem>`) |
 | `...HTMLUListElementAttributes` | — | — | Все стандартные атрибуты `<ul>` |
 
 ---
@@ -64,6 +64,7 @@ version: "1.0"
 | `EmptyState` | `EmptyState.tsx` | Использование `ListEmptyState` |
 | `Virtualized` | `Virtualized.tsx` | Виртуализированный список (большие наборы данных) |
 | `Sortable` | `Sortable.tsx` | DnD-сортировка через `ListSortable` + `ListSortableItem` |
+| `WithActionItems` | `WithActionItems.tsx` | Список из кликабельных строк `ListActionItem` |
 | `SortableWithInteractiveElements` | `SortableWithInteractiveElements.tsx` | DnD с интерактивными элементами внутри строк (`data-draggable="false"`) |
 
 ---
@@ -222,6 +223,30 @@ export const Sortable = () => {
 };
 ```
 
+### WithActionItems
+
+`stories/List/examples/List/WithActionItems.tsx`
+
+```tsx
+import React from "react";
+import { List, ListActionItem } from "@sberbusiness/triplex-next";
+
+export const WithActionItems = () => (
+    <div style={{ maxWidth: "500px" }}>
+        <List>
+            {Array.from({ length: 5 }, (_, index) => (
+                <ListActionItem
+                    key={index}
+                    listItemContentProps={{ onClick: () => alert(`Клик по элементу списка ${index}`) }}
+                >
+                    Элемент списка {index}
+                </ListActionItem>
+            ))}
+        </List>
+    </div>
+);
+```
+
 ### SortableWithInteractiveElements
 
 `stories/List/examples/List/SortableWithInteractiveElements.tsx`

package/bundle/components/ListActionItem.md

@@ -0,0 +1,157 @@
+---
+component: ListActionItem
+category: List
+related: [ListItem, ListItemContent, ListSortableItem]
+tokens:
+  - --triplex-next-ListItem-Background_Hover
+  - --triplex-next-ListItem-BorderColor_Focus
+stories: stories/List/ListItem.stories.tsx
+version: "1.0"
+---
+
+# ListActionItem
+
+## Назначение
+
+Самодостаточный интерактивный элемент списка. Сам рендерит `ListItem` и
+`ListItemContent` (по аналогии с тем, как `ListSortableItem` рендерит внутри себя
+`ListItem`), поэтому потребителю не нужно вручную составлять композицию. Добавляет
+hover-подсветку, focus-обводку по Tab и активацию по клику / Enter / Space.
+
+Ключевая идея: интерактивные атрибуты (`role`, `tabIndex`, обработчики) и класс
+`styles.listActionItem` навешиваются на сам `ListItemContent`, поэтому фоном
+управляет один элемент — базовый фон приходит из `.listItemContent`, а hover-фон
+из `.listActionItem:hover` на том же узле. Нет перекрытия фона между обёрткой и
+контентом.
+
+Используй `ListActionItem` когда: строка целиком кликабельна (навигация, открытие
+деталей, выбор из списка без чекбокса). Не используй внутри `ListTableItem` —
+там `onClickItem` вешается напрямую на `ListItemContent` без hover/focus/keyboard.
+
+Распределение пропсов:
+
+- **собственные пропсы `ListActionItem`** (`extends React.LiHTMLAttributes<HTMLLIElement>`)
+  уходят на корневой `<li>` (`ListItem`) — `className`, `style`, `id`, `data-*` строки;
+- **`listItemContentProps`** — на интерактивный `ListItemContent`: `onClick`,
+  `onKeyDown`, переопределение `role` / `tabIndex`, `className` контента и т.д.
+
+Типичная композиция:
+
+```tsx
+<List>
+    <ListActionItem listItemContentProps={{ onClick: handleClick }}>Текст строки</ListActionItem>
+</List>
+```
+
+---
+
+## Варианты и props
+
+### Опциональные props
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `children` | `React.ReactNode` | — | Содержимое строки (рендерится внутри `ListItemContent`) |
+| `listItemContentProps` | `React.HTMLAttributes<HTMLDivElement>` | — | Пропсы интерактивного слоя (`ListItemContent`): `onClick`, `onKeyDown`, `role`, `tabIndex`, `className` контента и т.д. |
+| `className` | `string` | — | CSS-класс корневого `<li>` (`ListItem`) |
+| `...HTMLLIAttributes` | — | — | Остальные атрибуты `<li>` спредятся на внутренний `ListItem` |
+
+### Пропсы внутри `listItemContentProps`
+
+| Prop | Тип | По умолчанию | Описание |
+|---|---|---|---|
+| `onClick` | `(event: React.MouseEvent<HTMLDivElement>) => void` | — | Обработчик клика по всей строке |
+| `onKeyDown` | `(event: React.KeyboardEvent<HTMLDivElement>) => void` | — | Вызывается до внутренней обработки Enter/Space |
+| `className` | `string` | — | Дополнительный CSS-класс, мержится с `styles.listActionItem` на `ListItemContent` |
+| `tabIndex` | `number` | `0` | Фокусируемость по Tab. Можно переопределить (например, `-1`) |
+| `role` | `string` | `"button"` | ARIA-роль. Можно переопределить (например, `"link"`) |
+
+---
+
+## Дизайн-токены
+
+```text
+--triplex-next-ListItem-Background_Hover    // фон при hover (desktop)
+--triplex-next-ListItem-BorderColor_Focus   // цвет focus-обводки (:focus-visible)
+```
+
+Класс `styles.listActionItem` навешивается на сам `ListItemContent`, поэтому весь
+фон живёт на одном элементе: базовый фон и `selected`/`selectable` — из
+`.listItemContent`, а hover-фон (`&:hover`) и focus-обводка (`&:focus-visible`) —
+из `.listActionItem` на том же узле.
+
+---
+
+## Инварианты
+
+- **`forwardRef`** — обязателен, target — `HTMLDivElement` (внутренний
+  `ListItemContent`). Не убирать.
+- **Самодостаточная композиция** — компонент сам рендерит `ListItem` →
+  `ListItemContent` (как `ListSortableItem` рендерит `ListItem`). Использовать
+  прямо внутри `List`, не оборачивать вручную в `ListItem`/`ListItemContent`.
+- **Интерактивность на `ListItemContent`** — `role`, `tabIndex`, обработчики и
+  класс `styles.listActionItem` навешиваются на сам `ListItemContent`, а не на
+  отдельную обёртку. Это то, что позволяет одному элементу управлять фоном. Не
+  вводить промежуточный `<div>` между `ListItemContent` и hover-фоном — вернётся
+  перекрытие слоёв.
+- **Разделение пропсов** — собственные пропсы компонента (`extends
+  LiHTMLAttributes`) идут на корневой `ListItem` (`<li>`), интерактивные — только
+  через `listItemContentProps` на `ListItemContent`. Не спредить `...rest` на
+  `ListItemContent`: тогда пропсы `<li>` и контента снова смешаются.
+- **`role="button"` и `tabIndex={0}`** — задаются по умолчанию, но переопределяются
+  через `listItemContentProps` (`{...restListItemContentProps}` идёт после дефолтов). Не
+  убирать дефолты без обновления тестов и a11y-контракта.
+- **Клавиатура** — Enter и Space обрабатываются через `isKey` из
+  `@sberbusiness/triplex-next/utils/keyboard`; Space вызывает `preventDefault()`,
+  затем `event.currentTarget.click()`. Не заменять на прямое сравнение `event.key`.
+- **`data-tx`** — атрибут версии пакета, не убирать.
+
+---
+
+## Accessibility
+
+- Элемент объявлен как `role="button"` и попадает в tab-order (`tabIndex={0}`).
+- Активация: клик мышью, Enter, Space (через программный `click()`).
+- Focus-индикатор — `border-color` на `:focus-visible`, `outline: none`.
+- **`onKeyDown` вызывается до** внутренней обработки Enter/Space.
+- **Не вкладывай другие интерактивные элементы** (кнопки, ссылки, чекбоксы) внутрь
+  `ListActionItem` — получится nested interactive elements. Для выбора с чекбоксом
+  используй `ListItemSelectable` без `ListActionItem`; для клика по всей строке в
+  табличном списке — `ListTableItem` + `onClickItem`.
+- Для навигации по ссылке предпочтительнее нативный `<a>` / роутер-линк, а не
+  `ListActionItem` с `role="link"` — компонент не даёт семантики ссылки из коробки.
+
+---
+
+## Связанные компоненты
+
+- `ListItem` — `<li>`, который `ListActionItem` рендерит сам внутри себя.
+- `ListItemContent` — слой с фоном и padding, который `ListActionItem` рендерит
+  сам и на который навешивает интерактивность. Именно он держит весь фон.
+- `ListSortableItem` — образец паттерна: тоже самодостаточный компонент, рендерит
+  `ListItem` внутри себя.
+- `ListItemSelectable` — альтернатива для multi-select с чекбоксом. Не комбинировать
+  с `ListActionItem` в одной строке без явной a11y-стратегии.
+- `ListTableItem` — использует `onClickItem` на `ListItemContent`, не `ListActionItem`.
+- `CardAction` — аналогичный паттерн интерактивной обёртки в семействе Card.
+
+---
+
+## Stories
+
+Основные истории: `stories/List/ListItem.stories.tsx`
+Файл примера: `stories/List/examples/ListItem/Action.tsx`
+
+| Story | Example file | Что демонстрирует |
+|---|---|---|
+| `Action` | `Action.tsx` | `ListActionItem` напрямую внутри `List` |
+| `WithActionItems` (в `List.stories.tsx`) | `examples/List/WithActionItems.tsx` | Список из нескольких кликабельных строк `ListActionItem` |
+
+---
+
+## История изменений
+
+| Дата | Изменение |
+|---|---|
+| 2026-07-17 | Добавлена story `WithActionItems` в `List.stories.tsx` — список из нескольких `ListActionItem`. |
+| 2026-07-16 | Создан компонент `ListActionItem` — самодостаточная интерактивная строка (hover, focus по Tab, `onClick` + Enter/Space). Сам рендерит `ListItem` + `ListItemContent`; интерактивность и весь фон живут на одном `ListItemContent`. Пропсы разделены: собственные — на `<li>`, интерактивные — через `listItemContentProps`. |

package/bundle/components/ListItem.md

@@ -1,10 +1,12 @@
 ---
 component: ListItem
 category: List
-related: [List, ListItemContent, ListItemSelectable, ListItemTable, ListSortableItem]
+related: [List, ListItemContent, ListActionItem, ListItemSelectable, ListTableItem, ListSortableItem]
 tokens:
   - --triplex-next-ListItem-Background
   - --triplex-next-ListItem-Background_Selected
+  - --triplex-next-ListItem-Background_Hover
+  - --triplex-next-ListItem-BorderColor_Focus
 stories: stories/List/ListItem.stories.tsx
 version: "1.0"
 ---
@@ -17,12 +19,11 @@ version: "1.0"
 (`ListItemContent`, `ListItemSelectable`, `SwipeableArea` и т.п.). Создаёт
 React-контекст `ListItemContext` с состояниями `selected` и `selectable`:
 `selected` управляет подсветкой `ListItemContent`, `selectable` сообщает
-дочернему `ListItemContent`, что элемент выбираемый — для применения
-скругления углов (`border-radius`). Оба флага пишутся `ListItemSelectable`
-через `useEffect`.
+дочернему `ListItemContent`, что элемент выбираемый — для применения скругления
+углов (`border-radius`). Оба флага пишутся `ListItemSelectable` через `useEffect`.
 
 Используй `ListItem` когда: нужен произвольный layout строки списка.
-Используй `ListItemTable` когда: нужна готовая табличная строка с support'ом
+Используй `ListTableItem` когда: нужна готовая табличная строка с support'ом
 swipe-actions и selectable.
 
 ---
@@ -41,11 +42,13 @@ swipe-actions и selectable.
 ## Дизайн-токены
 
 Сами стили `ListItem.tsx` пустые — токены применяются в подкомпонентах
-(`ListItemContent`, `ListItemSelectable`):
+(`ListItemContent`, `ListItemSelectable`, `ListActionItem`):
 
 ```text
---triplex-next-ListItem-Background          // фон по умолчанию
---triplex-next-ListItem-Background_Selected // фон, когда selected=true
+--triplex-next-ListItem-Background          // фон по умолчанию (ListItemContent)
+--triplex-next-ListItem-Background_Selected // фон, когда selected=true (ListItemContent)
+--triplex-next-ListItem-Background_Hover    // фон при hover на desktop (ListActionItem на ListItemContent)
+--triplex-next-ListItem-BorderColor_Focus   // цвет focus-обводки на desktop (ListActionItem)
 ```
 
 ---
@@ -62,11 +65,12 @@ swipe-actions и selectable.
 ## Связанные компоненты
 
 - `ListItemContent` — внутренняя обёртка для контента, читает `selected` из контекста.
+- `ListActionItem` — самодостаточный интерактивный элемент: сам рендерит `ListItem` + `ListItemContent` (hover, focus по Tab, клик по всей строке — `onClick`, Enter/Space). Используется напрямую внутри `List`. Другие компоненты семейства его не используют.
 - `ListItemSelectable` — добавляет чекбокс выбора, синхронизирует `selected` в контекст через `useEffect`.
 - `ListItemLoading` — элемент-спиннер для пагинации (используется как последний элемент).
 - `ListItemControls`, `ListItemControlsButton`, `ListItemControlsButtonDropdown` — кнопки действий, обычно внутри `SwipeableArea.rightSwipeableArea`.
 - `ListItemTailLeft` / `ListItemTailRight` — декоративные хвосты для `SwipeableArea`.
-- `ListItemTable` — комбинированная высокоуровневая обёртка.
+- `ListTableItem` — комбинированная высокоуровневая обёртка.
 
 ---
 
@@ -78,6 +82,7 @@ swipe-actions и selectable.
 | Story | Example file | Что демонстрирует |
 |---|---|---|
 | `Default` | `Default.tsx` | Базовый элемент с произвольным контентом |
+| `Action` | `Action.tsx` | Использование `ListActionItem`  |
 | `Loading` | `Loading.tsx` | `ListItemLoading` как последний элемент при пагинации |
 | `Selectable` | `Selectable.tsx` | Использование `ListItemSelectable` внутри `ListItem` |
 | `Swipeable` | `Swipeable.tsx` | `ListItem` внутри `SwipeableArea` с `ListItemControls` |
@@ -90,6 +95,7 @@ swipe-actions и selectable.
 |---|---|
 | 2026-04-29 | Создан документ |
 | 2026-05-21 | `ListItemContext` расширен полями `selectable` / `setSelectable`. Исправлен цвет токена `Background_Selected` в тёмной теме (`ColorDarkNeutral.10` → `ColorDarkNeutral.60`). |
+| 2026-07-16 | Добавлен самодостаточный компонент `ListActionItem` (сам рендерит `ListItem` + `ListItemContent`; hover, focus по Tab, `onClick` + Enter/Space). Координация фона через контекст не понадобилась — `ListItemContext` без изменений. Другие компоненты семейства его не используют. |
 
 ---
 
@@ -114,6 +120,25 @@ export const Default = () => (
 );
 ```
 
+### Action
+
+`stories/List/examples/ListItem/Action.tsx`
+
+```tsx
+import React from "react";
+import { List, ListActionItem } from "@sberbusiness/triplex-next";
+
+export const Action = () => (
+    <div style={{ maxWidth: "500px" }}>
+        <List>
+            <ListActionItem listItemContentProps={{ onClick: () => alert("Клик по элементу списка") }}>
+                Элемент списка
+            </ListActionItem>
+        </List>
+    </div>
+);
+```
+
 ### Loading
 
 `stories/List/examples/ListItem/Loading.tsx`

package/bundle/components/ListItemSelectable.md

@@ -67,7 +67,7 @@ version: "1.0"
 
 - Чекбокс — встроенный `<Checkbox>` из библиотеки, имеет нативный `<input type="checkbox">`.
 - Клик по любой части `.childrenWrapper` **не** переключает чекбокс — только клик по самому чекбоксу или его расширенной области (`.checkboxLabelClickArea`, `+4px` со всех сторон).
-- Если нужен клик по всей строке — оборачивай в `<label>` или используй `ListItemTable` + `onClickItem`.
+- Если нужен клик по всей строке — оборачивай в `<label>` или используй `ListTableItem` + `onClickItem`.
 
 ---
 
@@ -76,7 +76,7 @@ version: "1.0"
 - `ListItem` — родительский `<li>`, провайдер `ListItemContext`.
 - `ListItemContent` — потребитель `ListItemContext.selected` для применения класса `selected`.
 - `Checkbox` — встроенный чекбокс выбора.
-- `ListItemTable` — использует `ListItemSelectable` автоматически в selectable-варианте.
+- `ListTableItem` — использует `ListItemSelectable` автоматически в selectable-варианте.
 
 ---
 

package/bundle/components/ListMaster.md

@@ -82,7 +82,7 @@ sticky-футер с агрегатами и действиями. Сам по
 
 | Story | Example file | Что демонстрирует |
 |---|---|---|
-| `Default` | `Default.tsx` | Production-like пример: TabsLine + `ChipGroup`-фильтры + selectable `ListItemTable` + sticky Header при выделении + sticky Footer с суммой и действиями + LightBox с расширенными фильтрами + пустое состояние |
+| `Default` | `Default.tsx` | Production-like пример: TabsLine + `ChipGroup`-фильтры + selectable `ListTableItem` + sticky Header при выделении + sticky Footer с суммой и действиями + LightBox с расширенными фильтрами + пустое состояние |
 
 ---
 
@@ -133,7 +133,7 @@ import {
     ListEmptyState,
     ListItemControlsButton,
     ListItemControlsButtonDropdown,
-    ListItemTable,
+    ListTableItem,
     ListMaster,
     MarkerStatus,
     MultiselectField,
@@ -561,7 +561,6 @@ export const Default = () => {
                                                 display: "flex",
                                                 flexDirection: "column",
                                                 gap: 8,
-                                                padding: "12px 12px 0 12px",
                                             }}
                                         >
                                             {statusOptions.map((opt) => {
@@ -621,7 +620,7 @@ export const Default = () => {
                     {sortedItems.length ? (
                         <List>
                             {sortedItems.map((item) => (
-                                <ListItemTable
+                                <ListTableItem
                                     key={item.id}
                                     selected={selectedListItemIds.includes(item.id)}
                                     onSelect={(sel) => handleSelectListItem(item.id, sel)}
@@ -659,7 +658,7 @@ export const Default = () => {
                                     <MarkerStatus status={statusToMarker[item.status]} size={EComponentSize.LG}>
                                         {item.statusText}
                                     </MarkerStatus>
-                                </ListItemTable>
+                                </ListTableItem>
                             ))}
                         </List>
                     ) : (