@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,26 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/field.module' as field;
+
+// Поиск в списке/дроплисте — это field размера `s` (в Figma list-матрице search
+// во всех колонках s/m/l зафиксирован на fieldContainer.size.s). SearchPrivate даёт
+// только inputLine (gap/padding контента); сам field-бокс (min-height + padding) задаёт
+// потребитель — здесь, по аналогии с `.fieldContainer` в @cloud-ru/ds-search.
+.searchItem {
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-height: base.simple-var(field.$field, 'anatomy', 'size', 's', 'fieldContainer', 'min-height');
+  padding: base.simple-var(field.$field, 'anatomy', 'size', 's', 'fieldContainer', 'padding-top')
+    base.simple-var(field.$field, 'anatomy', 'size', 's', 'fieldContainer', 'padding-right')
+    base.simple-var(field.$field, 'anatomy', 'size', 's', 'fieldContainer', 'padding-bottom')
+    base.simple-var(field.$field, 'anatomy', 'size', 's', 'fieldContainer', 'padding-left');
+
+  &:focus-within,
+  &:focus-visible {
+    max-width: 100%;
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: calc(0px - base.$sn-primitive-strokeWeight-strokeSemiBold);
+  }
+}

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

@@ -0,0 +1,27 @@
+import { DragDropSVG } from '@cloud-ru/ds-icons/interface/system';
+import { ButtonHTMLAttributes } from 'react';
+
+import { TEST_IDS } from '../../../../../constants';
+import { listLocale } from '../../../../../locale';
+import styles from '../../styles.module.scss';
+
+/**
+ * Ручка drag&drop строки/заголовка reorder-режима: кнопка с иконкой, `aria-label` и `data-test-id`.
+ * Живой вариант получает sortable-пропы `@dnd-kit` (`attributes`/`listeners`, `onMouseDown`/`onClick`,
+ * `NO_DRAG_ATTRIBUTE`) через `...rest`; статичная копия для `DragOverlay` — `OverlayDragHandle`.
+ */
+export function DragHandle(props: ButtonHTMLAttributes<HTMLButtonElement>) {
+  const { t } = listLocale.useTranslations();
+
+  return (
+    <button
+      type='button'
+      aria-label={t('list.dragHandle')}
+      data-test-id={TEST_IDS.dragHandle}
+      className={styles.dragHandle}
+      {...props}
+    >
+      <DragDropSVG />
+    </button>
+  );
+}

package/src/components/Items/SimpleItem/components/DragHandle/index.ts

@@ -0,0 +1 @@
+export * from './DragHandle';

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

@@ -0,0 +1,6 @@
+import { DragHandle } from '../DragHandle';
+
+/** Статичная ручка для копий строк/заголовков в `DragOverlay` (без sortable-обработчиков). */
+export function OverlayDragHandle() {
+  return <DragHandle tabIndex={-1} />;
+}

package/src/components/Items/SimpleItem/components/OverlayDragHandle/index.ts

@@ -0,0 +1 @@
+export * from './OverlayDragHandle';

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

@@ -0,0 +1,87 @@
+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 { CSSProperties, MouseEvent, ReactNode } from 'react';
+
+import { Separator } from '../../../../../helperComponents';
+import { stopPropagation } from '../../../../../utils';
+import { useNewListContext } from '../../../../Lists/contexts';
+import { ItemId } from '../../../types';
+import { REORDER_TOP_LEVEL } from '../../constants';
+import styles from '../../styles.module.scss';
+import { GroupHeaderContent } from '../../types';
+import { animateLayoutChanges } from '../../utils';
+import { DragHandle } from '../DragHandle';
+
+export type SimpleGroupBlockProps = GroupHeaderContent & {
+  /** Идентификатор группы — sortable identity для перестановки групп между собой. */
+  id: ItemId;
+  /** Id сортируемых строк группы для вложенного `SortableContext` (переупорядочивание строк внутри группы). */
+  rowIds: ItemId[];
+  /** Отрисованные строки группы (`SimpleItem`). */
+  children: ReactNode;
+};
+
+/**
+ * Сортируемый блок группы reorder-режима: заголовок с ручкой `@dnd-kit` + строки группы во
+ * вложенном `SortableContext`. Перетаскивается **вся группа целиком** (заголовок и строки едут
+ * вместе), потому что `useSortable` висит на контейнере блока. Строки при этом переставляются
+ * внутри своей группы (собственный `SortableContext`). Копию заголовка на время перетаскивания группы
+ * рендерит `SimpleGroupBlockOverlay` в `DragOverlay`.
+ */
+export function SimpleGroupBlock({ id, rowIds, children, ...separatorProps }: SimpleGroupBlockProps) {
+  const { size = 'm' } = useNewListContext();
+
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    // Группа — «брат» строк верхнего уровня: тот же контейнер, что и у строк без группы.
+    data: { container: REORDER_TOP_LEVEL },
+    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,
+  };
+
+  const { onMouseDown, ...restListeners } = listeners || {};
+
+  const handleMouseDown = (e: MouseEvent<HTMLElement>) => {
+    stopPropagation(e);
+    onMouseDown?.(e);
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      className={styles.groupBlock}
+      data-dragging={isDragging || undefined}
+      data-reorder-boundary={isReorderingWithinGroup || undefined}
+    >
+      <div className={styles.groupHeader} data-size={size}>
+        <DragHandle
+          // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
+          {...{ [NO_DRAG_ATTRIBUTE]: '' }}
+          {...attributes}
+          {...restListeners}
+          onMouseDown={handleMouseDown}
+          onClick={stopPropagation}
+        />
+        <Separator {...separatorProps} />
+      </div>
+
+      <SortableContext items={rowIds} strategy={verticalListSortingStrategy}>
+        {children}
+      </SortableContext>
+    </div>
+  );
+}

package/src/components/Items/SimpleItem/components/SimpleGroupBlock/index.ts

@@ -0,0 +1 @@
+export * from './SimpleGroupBlock';

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

@@ -0,0 +1,33 @@
+import { Separator } from '../../../../../helperComponents';
+import { Size } from '../../../../../types';
+import { FlattenSimpleItem } from '../../../types';
+import styles from '../../styles.module.scss';
+import { GroupHeaderContent } from '../../types';
+import { OverlayDragHandle } from '../OverlayDragHandle';
+import { SimpleItemOverlay } from '../SimpleItemOverlay';
+
+export type SimpleGroupBlockOverlayProps = GroupHeaderContent & {
+  /** Размер списка — заголовок повторяет левую раскладку строки (`padding-left` + ручка + `gap`). */
+  size?: Size;
+  /** Строки группы: копия блока рендерится целиком, вместе с ними. */
+  rows: FlattenSimpleItem[];
+};
+
+/**
+ * Статичная копия блока группы для `DragOverlay` (без `useSortable`): заголовок + строки группы.
+ * Блок рендерится целиком, чтобы копия совпадала по размеру с перетаскиваемым блоком — `DragOverlay`
+ * подгоняет обёртку под размеры активного узла (весь блок), поэтому одним заголовком её не заполнить.
+ */
+export function SimpleGroupBlockOverlay({ size, rows, ...separatorProps }: SimpleGroupBlockOverlayProps) {
+  return (
+    <div className={styles.groupBlock} data-overlay>
+      <div className={styles.groupHeader} data-size={size}>
+        <OverlayDragHandle />
+        <Separator {...separatorProps} />
+      </div>
+      {rows.map(row => (
+        <SimpleItemOverlay key={row.id} {...row} bare />
+      ))}
+    </div>
+  );
+}

package/src/components/Items/SimpleItem/components/SimpleGroupBlockOverlay/index.ts

@@ -0,0 +1 @@
+export * from './SimpleGroupBlockOverlay';

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

@@ -0,0 +1,70 @@
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { NO_DRAG_ATTRIBUTE } from '@cloud-ru/ds-bottom-sheet';
+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';
+
+type SimpleItemProps = FlattenSimpleItem & {
+  /** Id группы-родителя (если строка внутри группы) — уходит в `data` `useSortable` (kind=row). */
+  groupId?: ItemId;
+};
+
+/**
+ * Листовая сортируемая строка `List`/`Droplist` в reorder-режиме (проп `onItemsReorder`):
+ * `BaseItem` + ручка `@dnd-kit` слева. Группировку задаёт `SimpleGroupItem` уровнем выше.
+ */
+// `option` несёт и служебные поля flatten-модели (`items`/`allChildIds`) — `BaseItem` их не знает
+// и отбрасывает через `extractSupportProps`, в DOM они не попадают.
+export function SimpleItem({ id, disabled, groupId, ...option }: SimpleItemProps) {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
+    id,
+    // `disabled` на строке отключает `Switch` и клик (`BaseItem`), но не переупорядочивание:
+    // ручка всегда активна.
+    // `container` читает кастомный `collisionDetection` в `ListPrivate`: drop разрешён только внутри
+    // одного контейнера. Строка без группы (`groupId` пуст) лежит в общем контейнере верхнего уровня
+    // вместе с группами (можно менять местами строку и группу); строка группы — в контейнере группы.
+    data: { container: groupId ?? REORDER_TOP_LEVEL },
+    animateLayoutChanges,
+  });
+
+  const style: CSSProperties = {
+    // Только трансляция без scale: иначе `@dnd-kit` подмешивает scaleY (`adjustScale`) и короткая
+    // строка растягивается под высоту соседа. `CSS.Translate` даёт `translate3d` без scale.
+    transform: CSS.Translate.toString(transform),
+    transition,
+  };
+
+  const { onMouseDown, ...restListeners } = listeners || {};
+
+  const handleMouseDown = (e: MouseEvent<HTMLElement>) => {
+    stopPropagation(e);
+    onMouseDown?.(e);
+  };
+
+  return (
+    <div ref={setNodeRef} style={style} className={styles.item} data-dragging={isDragging || undefined}>
+      <BaseItem
+        {...option}
+        id={id}
+        disabled={disabled}
+        dragHandle={
+          <DragHandle
+            // Pointer-жест не доходит до BottomSheet: иначе vertical drag одновременно закрывает sheet.
+            {...{ [NO_DRAG_ATTRIBUTE]: '' }}
+            {...attributes}
+            {...restListeners}
+            onMouseDown={handleMouseDown}
+            onClick={stopPropagation}
+          />
+        }
+      />
+    </div>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './SimpleItem';

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

@@ -0,0 +1,26 @@
+import { BaseItem } from '../../../BaseItem';
+import { FlattenSimpleItem } from '../../../types';
+import styles from '../../styles.module.scss';
+import { OverlayDragHandle } from '../OverlayDragHandle';
+
+export type SimpleItemOverlayProps = FlattenSimpleItem & {
+  /**
+   * Строка внутри копии блока группы (`SimpleGroupBlockOverlay`): поверхность и тень несёт сам
+   * блок, поэтому у строки их не дублируем.
+   */
+  bare?: boolean;
+};
+
+/**
+ * Презентационная копия строки для `DragOverlay` (`@dnd-kit`). Рендерится в портале над всей
+ * страницей и едет за курсором, поэтому строку не режет `overflow: hidden` контейнера `List`
+ * (см. [visual-regression] клиппинг). В отличие от `SimpleItem`, не вызывает `useSortable` —
+ * это неинтерактивный снимок: ручка и содержимое статичны, перетаскивание ведёт исходная строка.
+ */
+export function SimpleItemOverlay({ bare, ...item }: SimpleItemOverlayProps) {
+  return (
+    <div className={styles.item} data-overlay={bare ? undefined : true}>
+      <BaseItem {...item} dragHandle={<OverlayDragHandle />} />
+    </div>
+  );
+}

package/src/components/Items/SimpleItem/components/SimpleItemOverlay/index.ts

@@ -0,0 +1 @@
+export * from './SimpleItemOverlay';

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

@@ -0,0 +1,4 @@
+export * from './SimpleGroupBlock';
+export * from './SimpleGroupBlockOverlay';
+export * from './SimpleItem';
+export * from './SimpleItemOverlay';

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

@@ -0,0 +1,8 @@
+import { ItemId } from '../types';
+
+/**
+ * Sortable-контейнер верхнего уровня reorder-режима. Строки без группы и сами группы лежат в одном
+ * контейнере (переставляются как «братья»), строки внутри группы — в контейнере со `id` группы.
+ * Кастомный `collisionDetection` в `ListPrivate` пускает drop только в пределах одного контейнера.
+ */
+export const REORDER_TOP_LEVEL: ItemId = '__reorder-top-level__';

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

@@ -0,0 +1,2 @@
+export * from './components';
+export * from './types';

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

@@ -0,0 +1,149 @@
+@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 '../../../iconSizes' as icons;
+
+$sizes: 's', 'm', 'l';
+
+// Отступ слева и gap строки списка по размеру — чтобы ручка заголовка группы вставала ровно над
+// ручками строк. Используются плоские Figma-переменные (как в `BaseItem`), навигация по
+// `list.$list` тут не проходит.
+$listItemPaddingLeft: (
+  's': list.$sn-list-anatomy-size-s-listItem-paddingHorizontal,
+  'm': list.$sn-list-anatomy-size-m-listItem-paddingHorizontal,
+  'l': list.$sn-list-anatomy-size-l-listItem-paddingHorizontal,
+);
+$listItemGap: (
+  's': list.$sn-list-anatomy-size-s-listItem-gap,
+  'm': list.$sn-list-anatomy-size-m-listItem-gap,
+  'l': list.$sn-list-anatomy-size-l-listItem-gap,
+);
+// Асимметричные вертикальные отступы заголовка группы (`Separator`): сверху — `subtitle.paddingTop`
+// (визуальный зазор над группой), снизу — `listItem.paddingVertical`. Из-за перекоса текст стоит
+// ниже центра box'а, поэтому ручка перетаскивания сдвинута вниз на их разницу (см. `.dragHandle`
+// ниже).
+$subtitlePaddingTop: (
+  's': list.$sn-list-anatomy-size-s-subtitle-paddingTop,
+  'm': list.$sn-list-anatomy-size-m-subtitle-paddingTop,
+  'l': list.$sn-list-anatomy-size-l-subtitle-paddingTop,
+);
+$listItemPaddingVertical: (
+  's': list.$sn-list-anatomy-size-s-listItem-paddingVertical,
+  'm': list.$sn-list-anatomy-size-m-listItem-paddingVertical,
+  '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;
+  }
+}
+
+// Строка-заголовок внутри блока группы: ручка перетаскивания + `Separator`. Отступ слева и gap — как у
+// строки (`listItem`), чтобы ручка заголовка стояла ровно над ручками строк.
+.groupHeader {
+  display: flex;
+  align-items: center;
+
+  // Separator занимает всю оставшуюся ширину.
+  > :last-child {
+    flex: 1 1 auto;
+    min-width: 0;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      gap: base.simple-var($listItemGap, $size);
+      padding-left: base.simple-var($listItemPaddingLeft, $size);
+
+      // Собственный `padding-left` `Separator`'а компенсируется отрицательным margin: иначе левый
+      // отступ удваивается и контент заголовка не встаёт ровно над контентом строк.
+      > :last-child {
+        margin-left: calc(-1 * #{base.simple-var($listItemPaddingLeft, $size)});
+      }
+
+      // Ручка заголовка по icon-сетке строки (как before/after слоты у BaseItem).
+      .dragHandle {
+        width: base.simple-var(icons.$iconSizeMap, $size);
+        height: base.simple-var(icons.$iconSizeMap, $size);
+
+        // Верхний отступ `Separator`'а (`subtitle.paddingTop`) больше нижнего, поэтому текст стоит
+        // ниже центра box'а — ручка сдвинута вниз на разницу отступов, чтобы её центр совпал с текстом.
+        margin-top: calc(
+          #{base.simple-var($subtitlePaddingTop, $size)} - #{base.simple-var($listItemPaddingVertical, $size)}
+        );
+      }
+    }
+  }
+}
+
+// Ручка перетаскивания — плоская иконка-кнопка: дефолтные обводка и фон сброшены, цвет вторичный.
+// То же, что у ручки строки, которую `BaseItem` сбрасывает через свою `.dragHandle button`.
+.dragHandle {
+  cursor: grab;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0;
+  border: none;
+
+  color: base.$sn-theme-color-available-version-textSecondary;
+
+  appearance: none;
+  background: transparent;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+}

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

@@ -0,0 +1,7 @@
+import { SeparatorProps } from '../../../helperComponents';
+
+/** Поля заголовка группы, общие для сортируемого блока и его копии в `DragOverlay`. */
+export type GroupHeaderContent = Pick<
+  SeparatorProps,
+  'label' | 'beforeContent' | 'truncate' | 'divider' | 'groupVariant'
+>;

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

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