@cloud-ru/ds-list 1.0.0 → 1.1.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.1.0 (2026-08-18)
+
+### Features
+
+- **FF-8802:** add common drag&drop state ([0cefbc2](https://github.com/cloud-ru-tech/snack-v2/commit/0cefbc2609aa84b110d63c55618f6c00c454c80f))
+
 # 1.0.0 (2026-08-18)
 
 Initial stable release under the `@cloud-ru/ds-*` scope.

package/dist/cjs/components/Items/SimpleItem/components/SimpleGroupBlock/SimpleGroupBlock.js

@@ -5,10 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleGroupBlock = SimpleGroupBlock;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const core_1 = require("@dnd-kit/core");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
 const helperComponents_1 = require("../../../../../helperComponents");
 const utils_1 = require("../../../../../utils");
 const contexts_1 = require("../../../../Lists/contexts");
@@ -31,12 +31,6 @@ function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }) {
         data: { container: constants_1.REORDER_TOP_LEVEL },
         animateLayoutChanges: utils_2.animateLayoutChanges,
     });
-    // Идёт ли переупорядочивание строки этой группы (а не самой группы). Оно жёстко ограничено
-    // своим контейнером (`container === id` в `data` строки, см. `SimpleItem`), поэтому границы
-    // блока группы подсвечиваются — видно, что строка не выходит за пределы группы, а не «сломалась».
-    const { active } = (0, core_1.useDndContext)();
-    const activeContainer = active?.data.current?.container;
-    const isReorderingWithinGroup = active != null && active.id !== id && activeContainer === id;
     const style = {
         transform: utilities_1.CSS.Translate.toString(transform),
         transition,
@@ -46,7 +40,12 @@ function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }) {
         (0, utils_1.stopPropagation)(e);
         onMouseDown?.(e);
     };
-    return ((0, jsx_runtime_1.jsxs)("div", { ref: setNodeRef, style: style, className: styles_module_scss_1.default.groupBlock, "data-dragging": isDragging || undefined, "data-reorder-boundary": isReorderingWithinGroup || undefined, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.groupHeader, "data-size": size, children: [(0, jsx_runtime_1.jsx)(DragHandle_1.DragHandle
+    // Динамический перенос — тот же, что у строк (`SimpleItem`).
+    return ((0, jsx_runtime_1.jsxs)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, style: style, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.groupHeader, "data-size": size, children: [(0, jsx_runtime_1.jsx)(DragHandle_1.DragHandle
                     // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
-                    , { [bottom_sheet_1.NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, onMouseDown: handleMouseDown, onClick: utils_1.stopPropagation }), (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, { ...separatorProps })] }), (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: rowIds, strategy: sortable_1.verticalListSortingStrategy, children: children })] }));
+                    , { [bottom_sheet_1.NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, 
+                        // `useSortable` ставит ручке tabIndex=0, но список ведёт свою roving-навигацию и
+                        // перехватывает Tab (см. `useNewKeyboardNavigation`) — с ручки было некуда уйти.
+                        // Убираем её из таб-порядка: строка остаётся доступной с клавиатуры, ручка — мышью.
+                        tabIndex: -1, onMouseDown: handleMouseDown, onClick: utils_1.stopPropagation }), (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, { ...separatorProps })] }), (0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: rowIds, strategy: sortable_1.verticalListSortingStrategy, children: children })] }));
 }

package/dist/cjs/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/SimpleGroupBlockOverlay.js

@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleGroupBlockOverlay = SimpleGroupBlockOverlay;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
+const constants_1 = require("../../../../../constants");
 const helperComponents_1 = require("../../../../../helperComponents");
 const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
 const OverlayDragHandle_1 = require("../OverlayDragHandle");
@@ -15,5 +17,5 @@ const SimpleItemOverlay_1 = require("../SimpleItemOverlay");
  * подгоняет обёртку под размеры активного узла (весь блок), поэтому одним заголовком её не заполнить.
  */
 function SimpleGroupBlockOverlay({ size, rows, ...separatorProps }) {
-    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.groupBlock, "data-overlay": true, children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.groupHeader, "data-size": size, children: [(0, jsx_runtime_1.jsx)(OverlayDragHandle_1.OverlayDragHandle, {}), (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, { ...separatorProps })] }), rows.map(row => ((0, jsx_runtime_1.jsx)(SimpleItemOverlay_1.SimpleItemOverlay, { ...row, bare: true }, row.id)))] }));
+    return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.dragPreview, "data-test-id": constants_1.TEST_IDS.dragOverlay, children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.groupHeader, "data-size": size, children: [(0, jsx_runtime_1.jsx)(OverlayDragHandle_1.OverlayDragHandle, {}), (0, jsx_runtime_1.jsx)(helperComponents_1.Separator, { ...separatorProps })] }), rows.map(row => ((0, jsx_runtime_1.jsx)(SimpleItemOverlay_1.SimpleItemOverlay, { ...row, bare: true }, row.id)))] }) }));
 }

package/dist/cjs/components/Items/SimpleItem/components/SimpleItem/SimpleItem.js

@@ -1,17 +1,14 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleItem = SimpleItem;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const sortable_1 = require("@dnd-kit/sortable");
 const utilities_1 = require("@dnd-kit/utilities");
 const bottom_sheet_1 = require("@cloud-ru/ds-bottom-sheet");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
 const utils_1 = require("../../../../../utils");
 const BaseItem_1 = require("../../../BaseItem");
 const constants_1 = require("../../constants");
-const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
 const utils_2 = require("../../utils");
 const DragHandle_1 = require("../DragHandle");
 /**
@@ -26,8 +23,8 @@ function SimpleItem({ id, disabled, groupId, ...option }) {
         // `disabled` на строке отключает `Switch` и клик (`BaseItem`), но не переупорядочивание:
         // ручка всегда активна.
         // `container` читает кастомный `collisionDetection` в `ListPrivate`: drop разрешён только внутри
-        // одного контейнера. Строка без группы (`groupId` пуст) лежит в общем контейнере верхнего уровня
-        // вместе с группами (можно менять местами строку и группу); строка группы — в контейнере группы.
+        // одного контейнера. Строка без группы (`groupId` пуст) лежит в контейнере верхнего уровня,
+        // строка группы — в контейнере своей группы.
         data: { container: groupId ?? constants_1.REORDER_TOP_LEVEL },
         animateLayoutChanges: utils_2.animateLayoutChanges,
     });
@@ -42,7 +39,12 @@ function SimpleItem({ id, disabled, groupId, ...option }) {
         (0, utils_1.stopPropagation)(e);
         onMouseDown?.(e);
     };
-    return ((0, jsx_runtime_1.jsx)("div", { ref: setNodeRef, style: style, className: styles_module_scss_1.default.item, "data-dragging": isDragging || undefined, children: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...option, id: id, disabled: disabled, dragHandle: (0, jsx_runtime_1.jsx)(DragHandle_1.DragHandle
+    // Динамический перенос: точку вставки показывает пустой слот, поэтому линии (`DropIndicator`) нет.
+    return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragGhost, { innerRef: setNodeRef, style: style, dragging: isDragging, mode: drag_and_drop_1.DRAG_MODE.Dynamic, children: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...option, id: id, disabled: disabled, dragHandle: (0, jsx_runtime_1.jsx)(DragHandle_1.DragHandle
             // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
-            , { [bottom_sheet_1.NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, onMouseDown: handleMouseDown, onClick: utils_1.stopPropagation }) }) }));
+            , { [bottom_sheet_1.NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, 
+                // `useSortable` ставит ручке tabIndex=0, но список ведёт свою roving-навигацию и
+                // перехватывает Tab (см. `useNewKeyboardNavigation`) — с ручки было некуда уйти.
+                // Убираем её из таб-порядка: строка остаётся доступной с клавиатуры, ручка — мышью.
+                tabIndex: -1, onMouseDown: handleMouseDown, onClick: utils_1.stopPropagation }) }) }));
 }

package/dist/cjs/components/Items/SimpleItem/components/SimpleItemOverlay/SimpleItemOverlay.js

@@ -5,6 +5,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SimpleItemOverlay = SimpleItemOverlay;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const drag_and_drop_1 = require("@cloud-ru/ds-drag-and-drop");
+const constants_1 = require("../../../../../constants");
 const BaseItem_1 = require("../../../BaseItem");
 const styles_module_scss_1 = __importDefault(require('../../styles.module.css'));
 const OverlayDragHandle_1 = require("../OverlayDragHandle");
@@ -15,5 +17,8 @@ const OverlayDragHandle_1 = require("../OverlayDragHandle");
  * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
  */
 function SimpleItemOverlay({ bare, ...item }) {
-    return ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.item, "data-overlay": bare ? undefined : true, children: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...item, dragHandle: (0, jsx_runtime_1.jsx)(OverlayDragHandle_1.OverlayDragHandle, {}) }) }));
+    const row = (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...item, dragHandle: (0, jsx_runtime_1.jsx)(OverlayDragHandle_1.OverlayDragHandle, {}) });
+    if (bare)
+        return row;
+    return ((0, jsx_runtime_1.jsx)(drag_and_drop_1.DragPreview, { className: styles_module_scss_1.default.dragPreview, "data-test-id": constants_1.TEST_IDS.dragOverlay, children: row }));
 }

package/dist/cjs/components/Items/SimpleItem/styles.module.css

@@ -1,29 +1,6 @@
-.item[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.item[data-overlay]{
+@charset "UTF-8";
+.dragPreview{
   cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-
-.groupBlock[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.groupBlock[data-overlay]{
-  cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-.groupBlock[data-reorder-boundary]{
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-  box-shadow:inset 0 6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275))), inset 0 -6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
 }
 
 .groupHeader{
@@ -83,6 +60,11 @@
      -moz-appearance:none;
           appearance:none;
   background:transparent;
+  outline:none;
+}
+.dragHandle:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
 }
 .dragHandle svg{
   width:100%;

package/dist/cjs/components/Items/SimpleItem/utils.d.ts

@@ -1,6 +1,7 @@
 /**
  * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
  * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
- * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место.
+ * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место. Расступание соседей
+ * на время переноса флаг не трогает: его ведёт стратегия `SortableContext`.
  */
 export declare function animateLayoutChanges(): boolean;

package/dist/cjs/components/Items/SimpleItem/utils.js

@@ -4,7 +4,8 @@ exports.animateLayoutChanges = animateLayoutChanges;
 /**
  * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
  * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
- * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место.
+ * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место. Расступание соседей
+ * на время переноса флаг не трогает: его ведёт стратегия `SortableContext`.
  */
 function animateLayoutChanges() {
     return false;

package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js

@@ -56,8 +56,8 @@ exports.ListPrivate = (0, react_1.forwardRef)(({ items, pinTop, pinBottom, onKey
     const virtualized = virtualizedProp && !onDragEnd;
     const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(core_1.MouseSensor, draggingOptions), (0, core_1.useSensor)(core_1.TouchSensor, {}), (0, core_1.useSensor)(core_1.KeyboardSensor, { coordinateGetter: sortable_1.sortableKeyboardCoordinates }));
     // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия живёт в портале
-    // над страницей и не режется `overflow: hidden` контейнера `List` (исходная строка остаётся
-    // на месте «призраком»). `null`, когда перетаскивание не идёт.
+    // над страницей и не режется `overflow: hidden` контейнера `List` (сама строка на время
+    // переноса уступает место — её слот пустеет). `null`, когда перетаскивание не идёт.
     const [activeDragId, setActiveDragId] = (0, react_1.useState)(null);
     const handleDragStart = (0, react_1.useCallback)((event) => setActiveDragId(event.active.id), []);
     const handleDragEnd = (0, react_1.useCallback)((event) => {

package/dist/cjs/constants.d.ts

@@ -43,6 +43,7 @@ export declare const TEST_IDS: {
     readonly accordionItem: "list__accordion-item";
     readonly groupIndicator: "list__group-indicator";
     readonly dragHandle: "list__drag-handle";
+    readonly dragOverlay: "list__drag-overlay";
     readonly mobileDroplistRoot: "list__mobile-droplist-root";
     readonly mobileDroplistTrigger: "list__mobile-droplist-trigger";
 };

package/dist/cjs/constants.js

@@ -46,6 +46,7 @@ exports.TEST_IDS = {
     accordionItem: 'list__accordion-item',
     groupIndicator: 'list__group-indicator',
     dragHandle: 'list__drag-handle',
+    dragOverlay: 'list__drag-overlay',
     mobileDroplistRoot: 'list__mobile-droplist-root',
     mobileDroplistTrigger: 'list__mobile-droplist-trigger',
 };

package/dist/cjs/style.css

@@ -335,32 +335,9 @@
   outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
   outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
 }
-.item[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.item[data-overlay]{
-  cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-
-.groupBlock[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.groupBlock[data-overlay]{
+@charset "UTF-8";
+.dragPreview{
   cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-.groupBlock[data-reorder-boundary]{
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-  box-shadow:inset 0 6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275))), inset 0 -6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
 }
 
 .groupHeader{
@@ -420,6 +397,11 @@
      -moz-appearance:none;
           appearance:none;
   background:transparent;
+  outline:none;
+}
+.dragHandle:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
 }
 .dragHandle svg{
   width:100%;

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlock/SimpleGroupBlock.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useDndContext } from '@dnd-kit/core';
 import { SortableContext, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { NO_DRAG_ATTRIBUTE } from '@cloud-ru/ds-bottom-sheet';
+import { DRAG_MODE, DragGhost } from '@cloud-ru/ds-drag-and-drop';
 import { Separator } from '../../../../../helperComponents/index.js';
 import { stopPropagation } from '../../../../../utils.js';
 import { useNewListContext } from '../../../../Lists/contexts/index.js';
@@ -25,12 +25,6 @@ export function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }) {
         data: { container: REORDER_TOP_LEVEL },
         animateLayoutChanges,
     });
-    // Идёт ли переупорядочивание строки этой группы (а не самой группы). Оно жёстко ограничено
-    // своим контейнером (`container === id` в `data` строки, см. `SimpleItem`), поэтому границы
-    // блока группы подсвечиваются — видно, что строка не выходит за пределы группы, а не «сломалась».
-    const { active } = useDndContext();
-    const activeContainer = active?.data.current?.container;
-    const isReorderingWithinGroup = active != null && active.id !== id && activeContainer === id;
     const style = {
         transform: CSS.Translate.toString(transform),
         transition,
@@ -40,7 +34,12 @@ export function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }) {
         stopPropagation(e);
         onMouseDown?.(e);
     };
-    return (_jsxs("div", { ref: setNodeRef, style: style, className: styles.groupBlock, "data-dragging": isDragging || undefined, "data-reorder-boundary": isReorderingWithinGroup || undefined, children: [_jsxs("div", { className: styles.groupHeader, "data-size": size, children: [_jsx(DragHandle
+    // Динамический перенос — тот же, что у строк (`SimpleItem`).
+    return (_jsxs(DragGhost, { innerRef: setNodeRef, style: style, dragging: isDragging, mode: DRAG_MODE.Dynamic, children: [_jsxs("div", { className: styles.groupHeader, "data-size": size, children: [_jsx(DragHandle
                     // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
-                    , { [NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, onMouseDown: handleMouseDown, onClick: stopPropagation }), _jsx(Separator, { ...separatorProps })] }), _jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: children })] }));
+                    , { [NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, 
+                        // `useSortable` ставит ручке tabIndex=0, но список ведёт свою roving-навигацию и
+                        // перехватывает Tab (см. `useNewKeyboardNavigation`) — с ручки было некуда уйти.
+                        // Убираем её из таб-порядка: строка остаётся доступной с клавиатуры, ручка — мышью.
+                        tabIndex: -1, onMouseDown: handleMouseDown, onClick: stopPropagation }), _jsx(Separator, { ...separatorProps })] }), _jsx(SortableContext, { items: rowIds, strategy: verticalListSortingStrategy, children: children })] }));
 }

package/dist/esm/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/SimpleGroupBlockOverlay.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DragPreview } from '@cloud-ru/ds-drag-and-drop';
+import { TEST_IDS } from '../../../../../constants.js';
 import { Separator } from '../../../../../helperComponents/index.js';
 import styles from '../../styles.module.css';
 import { OverlayDragHandle } from '../OverlayDragHandle/index.js';
@@ -9,5 +11,5 @@ import { SimpleItemOverlay } from '../SimpleItemOverlay/index.js';
  * подгоняет обёртку под размеры активного узла (весь блок), поэтому одним заголовком её не заполнить.
  */
 export function SimpleGroupBlockOverlay({ size, rows, ...separatorProps }) {
-    return (_jsxs("div", { className: styles.groupBlock, "data-overlay": true, children: [_jsxs("div", { className: styles.groupHeader, "data-size": size, children: [_jsx(OverlayDragHandle, {}), _jsx(Separator, { ...separatorProps })] }), rows.map(row => (_jsx(SimpleItemOverlay, { ...row, bare: true }, row.id)))] }));
+    return (_jsx(DragPreview, { className: styles.dragPreview, "data-test-id": TEST_IDS.dragOverlay, children: _jsxs("div", { children: [_jsxs("div", { className: styles.groupHeader, "data-size": size, children: [_jsx(OverlayDragHandle, {}), _jsx(Separator, { ...separatorProps })] }), rows.map(row => (_jsx(SimpleItemOverlay, { ...row, bare: true }, row.id)))] }) }));
 }

package/dist/esm/components/Items/SimpleItem/components/SimpleItem/SimpleItem.js

@@ -2,10 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { NO_DRAG_ATTRIBUTE } from '@cloud-ru/ds-bottom-sheet';
+import { DRAG_MODE, DragGhost } from '@cloud-ru/ds-drag-and-drop';
 import { stopPropagation } from '../../../../../utils.js';
 import { BaseItem } from '../../../BaseItem/index.js';
 import { REORDER_TOP_LEVEL } from '../../constants.js';
-import styles from '../../styles.module.css';
 import { animateLayoutChanges } from '../../utils.js';
 import { DragHandle } from '../DragHandle/index.js';
 /**
@@ -20,8 +20,8 @@ export function SimpleItem({ id, disabled, groupId, ...option }) {
         // `disabled` на строке отключает `Switch` и клик (`BaseItem`), но не переупорядочивание:
         // ручка всегда активна.
         // `container` читает кастомный `collisionDetection` в `ListPrivate`: drop разрешён только внутри
-        // одного контейнера. Строка без группы (`groupId` пуст) лежит в общем контейнере верхнего уровня
-        // вместе с группами (можно менять местами строку и группу); строка группы — в контейнере группы.
+        // одного контейнера. Строка без группы (`groupId` пуст) лежит в контейнере верхнего уровня,
+        // строка группы — в контейнере своей группы.
         data: { container: groupId ?? REORDER_TOP_LEVEL },
         animateLayoutChanges,
     });
@@ -36,7 +36,12 @@ export function SimpleItem({ id, disabled, groupId, ...option }) {
         stopPropagation(e);
         onMouseDown?.(e);
     };
-    return (_jsx("div", { ref: setNodeRef, style: style, className: styles.item, "data-dragging": isDragging || undefined, children: _jsx(BaseItem, { ...option, id: id, disabled: disabled, dragHandle: _jsx(DragHandle
+    // Динамический перенос: точку вставки показывает пустой слот, поэтому линии (`DropIndicator`) нет.
+    return (_jsx(DragGhost, { innerRef: setNodeRef, style: style, dragging: isDragging, mode: DRAG_MODE.Dynamic, children: _jsx(BaseItem, { ...option, id: id, disabled: disabled, dragHandle: _jsx(DragHandle
             // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
-            , { [NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, onMouseDown: handleMouseDown, onClick: stopPropagation }) }) }));
+            , { [NO_DRAG_ATTRIBUTE]: '', ...attributes, ...restListeners, 
+                // `useSortable` ставит ручке tabIndex=0, но список ведёт свою roving-навигацию и
+                // перехватывает Tab (см. `useNewKeyboardNavigation`) — с ручки было некуда уйти.
+                // Убираем её из таб-порядка: строка остаётся доступной с клавиатуры, ручка — мышью.
+                tabIndex: -1, onMouseDown: handleMouseDown, onClick: stopPropagation }) }) }));
 }

package/dist/esm/components/Items/SimpleItem/components/SimpleItemOverlay/SimpleItemOverlay.js

@@ -1,4 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { DragPreview } from '@cloud-ru/ds-drag-and-drop';
+import { TEST_IDS } from '../../../../../constants.js';
 import { BaseItem } from '../../../BaseItem/index.js';
 import styles from '../../styles.module.css';
 import { OverlayDragHandle } from '../OverlayDragHandle/index.js';
@@ -9,5 +11,8 @@ import { OverlayDragHandle } from '../OverlayDragHandle/index.js';
  * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
  */
 export function SimpleItemOverlay({ bare, ...item }) {
-    return (_jsx("div", { className: styles.item, "data-overlay": bare ? undefined : true, children: _jsx(BaseItem, { ...item, dragHandle: _jsx(OverlayDragHandle, {}) }) }));
+    const row = _jsx(BaseItem, { ...item, dragHandle: _jsx(OverlayDragHandle, {}) });
+    if (bare)
+        return row;
+    return (_jsx(DragPreview, { className: styles.dragPreview, "data-test-id": TEST_IDS.dragOverlay, children: row }));
 }

package/dist/esm/components/Items/SimpleItem/styles.module.css

@@ -1,29 +1,6 @@
-.item[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.item[data-overlay]{
+@charset "UTF-8";
+.dragPreview{
   cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-
-.groupBlock[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.groupBlock[data-overlay]{
-  cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-.groupBlock[data-reorder-boundary]{
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-  box-shadow:inset 0 6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275))), inset 0 -6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
 }
 
 .groupHeader{
@@ -83,6 +60,11 @@
      -moz-appearance:none;
           appearance:none;
   background:transparent;
+  outline:none;
+}
+.dragHandle:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
 }
 .dragHandle svg{
   width:100%;

package/dist/esm/components/Items/SimpleItem/utils.d.ts

@@ -1,6 +1,7 @@
 /**
  * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
  * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
- * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место.
+ * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место. Расступание соседей
+ * на время переноса флаг не трогает: его ведёт стратегия `SortableContext`.
  */
 export declare function animateLayoutChanges(): boolean;

package/dist/esm/components/Items/SimpleItem/utils.js

@@ -1,7 +1,8 @@
 /**
  * Отключает FLIP-анимацию перестановки после отпускания (общий контракт `SimpleItem` и `SimpleGroupBlock`).
  * Порядок применяется синхронно через `onItemsReorder`; без флага `@dnd-kit` доигрывает `transform 200ms`
- * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место.
+ * из старого слота в новый — отпущенная строка дёргается обратно и уезжает на место. Расступание соседей
+ * на время переноса флаг не трогает: его ведёт стратегия `SortableContext`.
  */
 export function animateLayoutChanges() {
     return false;

package/dist/esm/components/Lists/ListPrivate/ListPrivate.js

@@ -50,8 +50,8 @@ export const ListPrivate = forwardRef(({ items, pinTop, pinBottom, onKeyDown, on
     const virtualized = virtualizedProp && !onDragEnd;
     const sensors = useSensors(useSensor(MouseSensor, draggingOptions), useSensor(TouchSensor, {}), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
     // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия живёт в портале
-    // над страницей и не режется `overflow: hidden` контейнера `List` (исходная строка остаётся
-    // на месте «призраком»). `null`, когда перетаскивание не идёт.
+    // над страницей и не режется `overflow: hidden` контейнера `List` (сама строка на время
+    // переноса уступает место — её слот пустеет). `null`, когда перетаскивание не идёт.
     const [activeDragId, setActiveDragId] = useState(null);
     const handleDragStart = useCallback((event) => setActiveDragId(event.active.id), []);
     const handleDragEnd = useCallback((event) => {

package/dist/esm/constants.d.ts

@@ -43,6 +43,7 @@ export declare const TEST_IDS: {
     readonly accordionItem: "list__accordion-item";
     readonly groupIndicator: "list__group-indicator";
     readonly dragHandle: "list__drag-handle";
+    readonly dragOverlay: "list__drag-overlay";
     readonly mobileDroplistRoot: "list__mobile-droplist-root";
     readonly mobileDroplistTrigger: "list__mobile-droplist-trigger";
 };

package/dist/esm/constants.js

@@ -43,6 +43,7 @@ export const TEST_IDS = {
     accordionItem: 'list__accordion-item',
     groupIndicator: 'list__group-indicator',
     dragHandle: 'list__drag-handle',
+    dragOverlay: 'list__drag-overlay',
     mobileDroplistRoot: 'list__mobile-droplist-root',
     mobileDroplistTrigger: 'list__mobile-droplist-trigger',
 };

package/dist/esm/style.css

@@ -335,32 +335,9 @@
   outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
   outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
 }
-.item[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.item[data-overlay]{
-  cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-
-.groupBlock[data-dragging]{
-  position:relative;
-  z-index:1;
-  opacity:0.5;
-}
-.groupBlock[data-overlay]{
+@charset "UTF-8";
+.dragPreview{
   cursor:grabbing;
-  opacity:0.5;
-  background:var(--sn-theme-color-neutral-background2Level, var(--sn-brand-color-neutral-99, var(--sn-primitive-color-gray-99, #ffffff)));
-  box-shadow:var(--sn-boxShadow-elevation-level2, var(--sn-theme-effect-shadow-level2-layer1-positionX, 0) var(--sn-theme-effect-shadow-level2-layer1-positionY, 0) var(--sn-theme-effect-shadow-level2-layer1-blur, 4px) var(--sn-theme-effect-shadow-level2-layer1-speed, 0) var(--sn-theme-effect-shadow-layer1Color, rgba(0, 0, 0, 0.0784313725)), var(--sn-theme-effect-shadow-level2-layer2-positionX, 0) var(--sn-theme-effect-shadow-level2-layer2-positionY, 4px) var(--sn-theme-effect-shadow-level2-layer2-blur, 8px) var(--sn-theme-effect-shadow-level2-layer2-speed, 2px) var(--sn-theme-effect-shadow-layer2Color, rgba(0, 0, 0, 0.0784313725)));
-}
-.groupBlock[data-reorder-boundary]{
-  background:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
-  box-shadow:inset 0 6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275))), inset 0 -6px 12px -12px var(--sn-theme-color-blackout, var(--sn-brand-color-overlay-forLightMode-blackout, rgba(0, 0, 0, 0.3215686275)));
 }
 
 .groupHeader{
@@ -420,6 +397,11 @@
      -moz-appearance:none;
           appearance:none;
   background:transparent;
+  outline:none;
+}
+.dragHandle:focus-visible{
+  outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-available-complementary, #000000);
+  outline-offset:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
 }
 .dragHandle svg{
   width:100%;