@cloud-ru/ds-list 1.0.0 → 1.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-list",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Списочный UI — компонент List для плоских/вложенных списков с выбором, группами и поиском и Droplist — тот же список в поповере.",
   "repository": {
     "type": "git",
@@ -52,10 +52,11 @@
     "@cloud-ru/ds-bottom-sheet": "^1.0.0",
     "@cloud-ru/ds-button": "^1.0.0",
     "@cloud-ru/ds-divider": "^1.0.0",
+    "@cloud-ru/ds-drag-and-drop": "^1.1.0",
     "@cloud-ru/ds-dropdown": "^1.0.0",
     "@cloud-ru/ds-icons": "^1.0.0",
-    "@cloud-ru/ds-info-block": "^1.0.0",
     "@cloud-ru/ds-loader": "^1.0.0",
+    "@cloud-ru/ds-info-block": "^1.0.0",
     "@cloud-ru/ds-materials": "^1.0.0",
     "@cloud-ru/ds-portal-context": "^1.0.0",
     "@cloud-ru/ds-scroll": "^1.0.0",

package/src/components/Items/SimpleItem/components/SimpleGroupBlock/SimpleGroupBlock.tsx

@@ -1,7 +1,7 @@
-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 { CSSProperties, MouseEvent, ReactNode } from 'react';
 
 import { Separator } from '../../../../../helperComponents';
@@ -40,13 +40,6 @@ export function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }: Si
     animateLayoutChanges,
   });
 
-  // Идёт ли переупорядочивание строки этой группы (а не самой группы). Оно жёстко ограничено
-  // своим контейнером (`container === id` в `data` строки, см. `SimpleItem`), поэтому границы
-  // блока группы подсвечиваются — видно, что строка не выходит за пределы группы, а не «сломалась».
-  const { active } = useDndContext();
-  const activeContainer = (active?.data.current as { container?: ItemId } | undefined)?.container;
-  const isReorderingWithinGroup = active != null && active.id !== id && activeContainer === id;
-
   const style: CSSProperties = {
     transform: CSS.Translate.toString(transform),
     transition,
@@ -59,20 +52,19 @@ export function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }: Si
     onMouseDown?.(e);
   };
 
+  // Динамический перенос — тот же, что у строк (`SimpleItem`).
   return (
-    <div
-      ref={setNodeRef}
-      style={style}
-      className={styles.groupBlock}
-      data-dragging={isDragging || undefined}
-      data-reorder-boundary={isReorderingWithinGroup || undefined}
-    >
+    <DragGhost innerRef={setNodeRef} style={style} dragging={isDragging} mode={DRAG_MODE.Dynamic}>
       <div className={styles.groupHeader} data-size={size}>
         <DragHandle
           // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
           {...{ [NO_DRAG_ATTRIBUTE]: '' }}
           {...attributes}
           {...restListeners}
+          // `useSortable` ставит ручке tabIndex=0, но список ведёт свою roving-навигацию и
+          // перехватывает Tab (см. `useNewKeyboardNavigation`) — с ручки было некуда уйти.
+          // Убираем её из таб-порядка: строка остаётся доступной с клавиатуры, ручка — мышью.
+          tabIndex={-1}
           onMouseDown={handleMouseDown}
           onClick={stopPropagation}
         />
@@ -82,6 +74,6 @@ export function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }: Si
       <SortableContext items={rowIds} strategy={verticalListSortingStrategy}>
         {children}
       </SortableContext>
-    </div>
+    </DragGhost>
   );
 }

package/src/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/SimpleGroupBlockOverlay.tsx

@@ -1,3 +1,6 @@
+import { DragPreview } from '@cloud-ru/ds-drag-and-drop';
+
+import { TEST_IDS } from '../../../../../constants';
 import { Separator } from '../../../../../helperComponents';
 import { Size } from '../../../../../types';
 import { FlattenSimpleItem } from '../../../types';
@@ -20,14 +23,16 @@ export type SimpleGroupBlockOverlayProps = GroupHeaderContent & {
  */
 export function SimpleGroupBlockOverlay({ size, rows, ...separatorProps }: SimpleGroupBlockOverlayProps) {
   return (
-    <div className={styles.groupBlock} data-overlay>
-      <div className={styles.groupHeader} data-size={size}>
-        <OverlayDragHandle />
-        <Separator {...separatorProps} />
+    <DragPreview className={styles.dragPreview} data-test-id={TEST_IDS.dragOverlay}>
+      <div>
+        <div className={styles.groupHeader} data-size={size}>
+          <OverlayDragHandle />
+          <Separator {...separatorProps} />
+        </div>
+        {rows.map(row => (
+          <SimpleItemOverlay key={row.id} {...row} bare />
+        ))}
       </div>
-      {rows.map(row => (
-        <SimpleItemOverlay key={row.id} {...row} bare />
-      ))}
-    </div>
+    </DragPreview>
   );
 }

package/src/components/Items/SimpleItem/components/SimpleItem/SimpleItem.tsx

@@ -1,13 +1,13 @@
 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 { CSSProperties, MouseEvent } from 'react';
 
 import { stopPropagation } from '../../../../../utils';
 import { BaseItem } from '../../../BaseItem';
 import { FlattenSimpleItem, ItemId } from '../../../types';
 import { REORDER_TOP_LEVEL } from '../../constants';
-import styles from '../../styles.module.scss';
 import { animateLayoutChanges } from '../../utils';
 import { DragHandle } from '../DragHandle';
 
@@ -28,8 +28,8 @@ export function SimpleItem({ id, disabled, groupId, ...option }: SimpleItemProps
     // `disabled` на строке отключает `Switch` и клик (`BaseItem`), но не переупорядочивание:
     // ручка всегда активна.
     // `container` читает кастомный `collisionDetection` в `ListPrivate`: drop разрешён только внутри
-    // одного контейнера. Строка без группы (`groupId` пуст) лежит в общем контейнере верхнего уровня
-    // вместе с группами (можно менять местами строку и группу); строка группы — в контейнере группы.
+    // одного контейнера. Строка без группы (`groupId` пуст) лежит в контейнере верхнего уровня,
+    // строка группы — в контейнере своей группы.
     data: { container: groupId ?? REORDER_TOP_LEVEL },
     animateLayoutChanges,
   });
@@ -48,8 +48,9 @@ export function SimpleItem({ id, disabled, groupId, ...option }: SimpleItemProps
     onMouseDown?.(e);
   };
 
+  // Динамический перенос: точку вставки показывает пустой слот, поэтому линии (`DropIndicator`) нет.
   return (
-    <div ref={setNodeRef} style={style} className={styles.item} data-dragging={isDragging || undefined}>
+    <DragGhost innerRef={setNodeRef} style={style} dragging={isDragging} mode={DRAG_MODE.Dynamic}>
       <BaseItem
         {...option}
         id={id}
@@ -60,11 +61,15 @@ export function SimpleItem({ id, disabled, groupId, ...option }: SimpleItemProps
             {...{ [NO_DRAG_ATTRIBUTE]: '' }}
             {...attributes}
             {...restListeners}
+            // `useSortable` ставит ручке tabIndex=0, но список ведёт свою roving-навигацию и
+            // перехватывает Tab (см. `useNewKeyboardNavigation`) — с ручки было некуда уйти.
+            // Убираем её из таб-порядка: строка остаётся доступной с клавиатуры, ручка — мышью.
+            tabIndex={-1}
             onMouseDown={handleMouseDown}
             onClick={stopPropagation}
           />
         }
       />
-    </div>
+    </DragGhost>
   );
 }

package/src/components/Items/SimpleItem/components/SimpleItemOverlay/SimpleItemOverlay.tsx

@@ -1,3 +1,6 @@
+import { DragPreview } from '@cloud-ru/ds-drag-and-drop';
+
+import { TEST_IDS } from '../../../../../constants';
 import { BaseItem } from '../../../BaseItem';
 import { FlattenSimpleItem } from '../../../types';
 import styles from '../../styles.module.scss';
@@ -18,9 +21,13 @@ export type SimpleItemOverlayProps = FlattenSimpleItem & {
  * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
  */
 export function SimpleItemOverlay({ bare, ...item }: SimpleItemOverlayProps) {
+  const row = <BaseItem {...item} dragHandle={<OverlayDragHandle />} />;
+
+  if (bare) return row;
+
   return (
-    <div className={styles.item} data-overlay={bare ? undefined : true}>
-      <BaseItem {...item} dragHandle={<OverlayDragHandle />} />
-    </div>
+    <DragPreview className={styles.dragPreview} data-test-id={TEST_IDS.dragOverlay}>
+      {row}
+    </DragPreview>
   );
 }

package/src/components/Items/SimpleItem/styles.module.scss

@@ -1,5 +1,6 @@
 @use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
 @use '@cloud-ru/ds-figma-variables/build/scss/components/list.module' as list;
+@use '@cloud-ru/ds-materials' as m;
 @use '../../../iconSizes' as icons;
 
 $sizes: 's', 'm', 'l';
@@ -32,51 +33,9 @@ $listItemPaddingVertical: (
   'l': list.$sn-list-anatomy-size-l-listItem-paddingVertical,
 );
 
-.item {
-  // Исходная строка во время переноса — приглушённый «призрак» на месте будущей позиции.
-  // Саму перетаскиваемую копию рендерит `DragOverlay` (`SimpleItemOverlay`) в портале.
-  &[data-dragging] {
-    position: relative;
-    z-index: 1;
-    opacity: 0.5;
-  }
-
-  // Плавающая копия в `DragOverlay`: сплошная поверхность + elevation, чтобы строка читалась
-  // над фоном страницы (портал вне контейнера List, своего фона у строки нет).
-  &[data-overlay] {
-    cursor: grabbing;
-    opacity: 0.5;
-    background: base.$sn-theme-color-neutral-background2Level;
-    box-shadow: base.$sn-boxShadow-elevation-level2;
-  }
-}
-
-// Сортируемый блок группы (`SimpleGroupBlock`): заголовок + строки едут вместе (`useSortable` на
-// блоке). Во время перетаскивания блок целиком приглушён «призраком».
-.groupBlock {
-  &[data-dragging] {
-    position: relative;
-    z-index: 1;
-    opacity: 0.5;
-  }
-
-  // Плавающая копия блока в `DragOverlay` (перетаскивание группы): сплошная поверхность + elevation
-  // на весь блок (заголовок + строки), чтобы читалась над фоном страницы.
-  &[data-overlay] {
-    cursor: grabbing;
-    opacity: 0.5;
-    background: base.$sn-theme-color-neutral-background2Level;
-    box-shadow: base.$sn-boxShadow-elevation-level2;
-  }
-
-  // Подсветка границ группы при переупорядочивании строки внутри неё (`data-reorder-boundary`):
-  // даёт понять, что перестановка ограничена группой, иначе остановка у границы читается как баг.
-  &[data-reorder-boundary] {
-    background: base.$sn-theme-color-neutral-background1Level;
-    box-shadow:
-      inset 0 6px 12px -12px base.$sn-theme-color-blackout,
-      inset 0 -6px 12px -12px base.$sn-theme-color-blackout;
-  }
+// Поверхность и тень копии даёт `DragPreview`, здесь остаётся только курсор переноса.
+.dragPreview {
+  cursor: grabbing;
 }
 
 // Строка-заголовок внутри блока группы: ручка перетаскивания + `Separator`. Отступ слева и gap — как у
@@ -133,6 +92,10 @@ $listItemPaddingVertical: (
 
   appearance: none;
   background: transparent;
+  outline: none;
+
+  // Без своей рамки браузер рисует дефолтное синее кольцо — на Tab после переноса оно и вылезало.
+  @include m.with-focus-frame('regular', 'outsideOffset');
 
   svg {
     width: 100%;

package/src/components/Items/SimpleItem/utils.ts

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

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -128,8 +128,8 @@ export const ListPrivate = forwardRef(
       useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
     );
     // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия живёт в портале
-    // над страницей и не режется `overflow: hidden` контейнера `List` (исходная строка остаётся
-    // на месте «призраком»). `null`, когда перетаскивание не идёт.
+    // над страницей и не режется `overflow: hidden` контейнера `List` (сама строка на время
+    // переноса уступает место — её слот пустеет). `null`, когда перетаскивание не идёт.
     const [activeDragId, setActiveDragId] = useState<ItemId | null>(null);
     const handleDragStart = useCallback((event: DragStartEvent) => setActiveDragId(event.active.id), []);
     const handleDragEnd = useCallback(
@@ -416,6 +416,8 @@ export const ListPrivate = forwardRef(
           onDragEnd={handleDragEnd}
           onDragCancel={handleDragCancel}
         >
+          {/* Зону приёма (`DropTarget`) список не рисует: рамка означает перенос между зонами,
+              а здесь перестановка идёт строго внутри своей. */}
           <SortableContext items={sortableIds ?? []} strategy={verticalListSortingStrategy}>
             {itemsBody}
           </SortableContext>

package/src/constants.ts

@@ -48,6 +48,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',
 } as const;