@cloud-ru/ds-list 1.0.0

package/src/helperComponents/Separator/styles.module.scss

@@ -0,0 +1,255 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/components/list.module' as list;
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '../../iconSizes' as icons;
+
+$sizes: 's', 'm', 'l';
+
+// Typography map (legacy separator primary = sans-label/title, secondary = light-label/title)
+$subtitle-typography-map: (
+  's': (
+    'weight': 'regular',
+    'role': 'label',
+    'size': 'm',
+  ),
+  'm': (
+    'weight': 'regular',
+    'role': 'label',
+    'size': 'l',
+  ),
+  'l': (
+    'weight': 'regular',
+    'role': 'title',
+    'size': 'm',
+  ),
+);
+
+// 'light' weight в base-styles отсутствует — используем 'regular', subtitleTertiary
+// отличаем цветом (см. .label[data-group-variant='subtitleTertiary']).
+$subtitle-tertiary-typography-map: (
+  's': (
+    'weight': 'regular',
+    'role': 'label',
+    'size': 'm',
+  ),
+  'm': (
+    'weight': 'regular',
+    'role': 'label',
+    'size': 'l',
+  ),
+  'l': (
+    'weight': 'regular',
+    'role': 'title',
+    'size': 'm',
+  ),
+);
+
+$level: var(--level, 0);
+
+// Composites dropList item.<size>.container-separator(-subheader) в токен-наборе отсутствуют —
+// приближаем через list anatomy.size.<size>.listItem.padding-*.
+// Figma listItemGroup: root flex, align-items: flex-start, gap=listItem.gap,
+// padding-top=subtitle.paddingTop, padding-bottom=listItem.paddingVertical,
+// padding-horizontal=listItem.paddingHorizontal. Иконка и label — на одной линии по центру (textWrapper).
+
+// Figma centeredWrapper (list.listItem.centeredWrapper): padding-vertical вокруг иконки.
+// Размер иконочного слота — общий с listItem (см. icons.$iconSizeMap).
+// Используем content-box, чтобы padding не зажимал SVG.
+.beforeContent {
+  display: inline-flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: content-box;
+
+  color: base.$sn-theme-color-available-version-textTertiary;
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
+// Figma listItemGroup (0:5323): nestingLevel (16×29 indicator scale per level) + focusedFrameRegular/inside (outline при focus-visible).
+// nestingLevel рендерится тем же механизмом, что и в BaseItem: padding-left на родительском узле, шаг —
+// list.anatomy.size.<size>.listItem.nestingLevel.levelWrapper.padding-left (для s — `levellWrapper`, опечатка в Figma).
+.separatorWithLabel {
+  position: relative;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 100%;
+
+  // focusedFrameRegular/inside — клавиатурный focus на group-заголовке (через bulkSelectButton).
+  &:focus-visible {
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: calc(0px - base.$sn-primitive-strokeWeight-strokeSemiBold);
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      $subtitle: base.simple-var($subtitle-typography-map, $size);
+      $subtitleTertiary: base.simple-var($subtitle-tertiary-typography-map, $size);
+      $itemPaddingLeft: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-left');
+      $itemGap: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'gap');
+
+      gap: $itemGap;
+      padding: base.simple-var(list.$list, 'anatomy', 'size', $size, 'subtitle', 'padding-top')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-right')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-bottom')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-left');
+
+      // nestingLevel — индентация заголовка группы, если она вложена внутрь другой группы.
+      // Шаг тот же, что у строки: слот иконки плюс зазор (см. BaseItem/styles.module.scss).
+      &[data-level-one],
+      &[data-level-more-one] {
+        padding-left: calc(
+          $itemPaddingLeft + $level * calc(#{base.simple-var(icons.$iconSizeMap, $size)} + #{$itemGap})
+        );
+      }
+
+      .beforeContent {
+        width: base.simple-var(icons.$iconSizeMap, $size);
+        height: base.simple-var(icons.$iconSizeMap, $size);
+        padding-top: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'centeredWrapper',
+          'padding-top'
+        );
+        padding-bottom: base.simple-var(
+          list.$list,
+          'anatomy',
+          'size',
+          $size,
+          'listItem',
+          'centeredWrapper',
+          'padding-bottom'
+        );
+      }
+
+      .label {
+        padding: base.simple-var(
+            list.$list,
+            'anatomy',
+            'size',
+            $size,
+            'listItem',
+            'contentWrapper',
+            'textWrapper',
+            'padding-top'
+          )
+          base.simple-var(
+            list.$list,
+            'anatomy',
+            'size',
+            $size,
+            'listItem',
+            'contentWrapper',
+            'textWrapper',
+            'textContent',
+            'padding-right'
+          )
+          base.simple-var(
+            list.$list,
+            'anatomy',
+            'size',
+            $size,
+            'listItem',
+            'contentWrapper',
+            'textWrapper',
+            'padding-bottom'
+          )
+          base.simple-var(
+            list.$list,
+            'anatomy',
+            'size',
+            $size,
+            'listItem',
+            'contentWrapper',
+            'textWrapper',
+            'textContent',
+            'padding-left'
+          );
+
+        &[data-group-variant='subtitle'] {
+          @include base.composite-var(
+            base.$base-styles,
+            'sn',
+            base.simple-var($subtitle, 'weight'),
+            base.simple-var($subtitle, 'role'),
+            base.simple-var($subtitle, 'size')
+          );
+        }
+
+        &[data-group-variant='subtitleTertiary'] {
+          @include base.composite-var(
+            base.$base-styles,
+            'sn',
+            base.simple-var($subtitleTertiary, 'weight'),
+            base.simple-var($subtitleTertiary, 'role'),
+            base.simple-var($subtitleTertiary, 'size')
+          );
+        }
+      }
+    }
+  }
+}
+
+// Группа-разделитель в макете не голая линия: у неё те же поля, что у строки списка
+// (`listItem` padding — 2/4 у s и m, 4/8 у l), поэтому вариант занимает 5 / 5 / 9 по высоте.
+.separatorWithoutLabel {
+  display: flex;
+  align-items: flex-end;
+  box-sizing: border-box;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      padding: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-top')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-right')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-bottom')
+        base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'padding-left');
+    }
+  }
+}
+
+.label {
+  overflow: hidden;
+  flex-shrink: 1;
+
+  &[data-group-variant='subtitle'] {
+    color: base.$sn-theme-color-available-version-textMain;
+  }
+
+  &[data-group-variant='subtitleTertiary'] {
+    color: base.$sn-theme-color-available-version-textTertiary;
+  }
+}
+
+.divider {
+  flex: 1;
+  width: auto;
+  min-width: 0;
+}
+
+.labelEnd {
+  display: flex;
+  flex: 1 0 0;
+  flex-direction: column;
+  align-items: flex-end;
+  justify-content: center;
+
+  min-width: 0;
+}
+
+.selectButton {
+  display: flex;
+  justify-content: flex-end;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,5 @@
+export * from './CollapseBlockPrivate';
+export * from './Separator';
+export * from './HiddenTabButton';
+export * from './ListEmptyState';
+export * from './ItemContent';

package/src/index.ts

@@ -0,0 +1,19 @@
+export * from './components';
+
+export * from './types';
+export { kindFlattenItems } from './components/Items';
+
+// helperComponents — публичные вспомогательные компоненты для построения
+// собственных раскладок без полного List (Figma-reference в stories,
+// custom layouts в потребительских пакетах).
+export * from './helperComponents';
+
+// Context-провайдер размера: нужен, чтобы Separator/ListEmptyState и др.
+// подхватывали size при рендере вне List (читают useNewListContext()).
+export { NewListContextProvider } from './components/Lists/contexts';
+
+export { getDefaultItemId, getFooterItemId, getItemAutoId } from './utils';
+export * from './constants';
+
+export { setNonce } from '@cloud-ru/ds-scroll';
+export * from './locale';

package/src/locale/index.ts

@@ -0,0 +1,45 @@
+import { defineLocale, defineMessages } from '@cloud-ru/ds-locale';
+
+const LIST_MESSAGES = defineMessages({
+  'en-GB': {
+    noData: {
+      description: 'No data',
+    },
+    noResults: {
+      description: 'Nothing found',
+    },
+    errorData: {
+      description: 'Error loading data',
+    },
+    groupSelectButton: {
+      reset: 'Reset all',
+      select: 'Select all',
+    },
+    list: {
+      dragHandle: 'Drag to reorder',
+    },
+  },
+  'ru-RU': {
+    noData: {
+      description: 'Нет данных',
+    },
+    noResults: {
+      description: 'Не найдено',
+    },
+    errorData: {
+      description: 'Ошибка загрузки данных',
+    },
+    groupSelectButton: {
+      reset: 'Сбросить все',
+      select: 'Выбрать все',
+    },
+    list: {
+      dragHandle: 'Перетащить для изменения порядка',
+    },
+  },
+});
+
+export type ListMessages = (typeof LIST_MESSAGES)['en-GB'];
+
+/** locale компонента List: `listLocale.useTranslations()` в коде, `listLocale.extend(...)` в сервисе. */
+export const listLocale = defineLocale('@cloud-ru/ds-list', LIST_MESSAGES);

package/src/types.ts

@@ -0,0 +1,44 @@
+import { ScrollProps as OriginalScrollProps } from '@cloud-ru/ds-scroll';
+import { ValueOf } from '@cloud-ru/ds-utils';
+import { ChangeEvent, KeyboardEvent, Ref } from 'react';
+
+import { ITEM_TYPE, MODE, SIZE } from './constants';
+
+/** Размер списка и его элементов */
+export type Size = ValueOf<typeof SIZE>;
+
+/** Режим выбора элементов списка */
+export type Mode = ValueOf<typeof MODE>;
+
+/** Тип группового / составного элемента списка */
+export type ItemType = ValueOf<typeof ITEM_TYPE>;
+
+/** Настройки поисковой строки списка */
+export type SearchState = {
+  placeholder?: string;
+  loading?: boolean;
+  value?: string;
+  onChange(value: string, e?: ChangeEvent<HTMLInputElement>): void;
+  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+};
+
+export type ScrollProps = {
+  /** Включить ли скролл для основной части списка */
+  scroll?: boolean;
+  /** Ссылка на элемент, обозначающий самый конец прокручиваемого списка */
+  scrollRef?: Ref<HTMLElement>;
+  /** Ссылка на контейнер, который скроллится */
+  scrollContainerRef?: Ref<HTMLElement>;
+  /** Отключает возможность взаимодействовать со скролбарами мышью. */
+  untouchableScrollbars?: boolean;
+  /**
+   * Управление скрытием скролл баров:
+   * <br> - `Never` - показывать всегда
+   * <br> - `Leave` - скрывать когда курсор покидает компонент
+   * <br> - `Scroll` - показывать только когда происходит скроллинг
+   * <br> - `Move` - показывать при движении курсора над компонентом
+   */
+  barHideStrategy?: OriginalScrollProps['barHideStrategy'];
+  /** Колбек на скролл прокручиваемого списка */
+  onScroll?: OriginalScrollProps['onScroll'];
+};

package/src/utils.ts

@@ -0,0 +1,26 @@
+import { ReactEventHandler } from 'react';
+
+import { ItemId } from './components';
+import { ITEM_PREFIXES } from './constants';
+
+export const stopPropagation: ReactEventHandler = e => {
+  e.stopPropagation();
+};
+
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
+
+/**
+ * Возвращает id для элемента, подставляя префикс
+ * @function  helper
+ */
+export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
+
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);