@cloud-ru/ds-list 1.0.0

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

@@ -0,0 +1,330 @@
+/* stylelint-disable at-rule-empty-line-before */
+/* stylelint-disable scss/operator-no-newline-after */
+
+@use '@cloud-ru/ds-materials' as m;
+@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';
+
+// Слот чекбокса использует ту же модель центрирования, что и beforeContent icon
+// (Figma listItem): строка выровнена по flex-start, контрол центрируется
+// внутри centeredWrapper по высоте первой строки текста. Размер контейнера/паддинги —
+// per-size в `.droplistItem[data-size]` ниже.
+.checkbox {
+  display: inline-flex;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: content-box;
+}
+
+.beforeContent,
+.afterContent,
+.dragHandle {
+  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;
+
+  // Слот зажимает иконку потребителя: инлайновый размер из `@cloud-ru/ds-icons` перебивает `width: 100%`,
+  // и строка растёт. Приём тот же, что в `@cloud-ru/ds-button`.
+  svg {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+  }
+}
+
+// Ручка drag&drop (Figma `centeredWrapper`) — та же icon-сетка, что у beforeContent, но
+// с курсором «grab/grabbing»: сама кнопка и обработчики (`@dnd-kit`) приходят из `SimpleItem`
+// (режим `onItemsReorder` у `List`/`Droplist`), здесь только layout-слот.
+.dragHandle {
+  cursor: grab;
+
+  &:active {
+    cursor: grabbing;
+  }
+
+  button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: none;
+
+    color: inherit;
+
+    appearance: none;
+    background: transparent;
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+}
+
+.afterContent {
+  color: base.$sn-theme-color-available-version-textSecondary;
+}
+
+.expandableIcon {
+  display: flex;
+  align-items: center;
+  color: base.$sn-theme-color-available-version-textSecondary;
+  fill: currentcolor;
+}
+
+.groupIndicator {
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  padding: 0;
+  border: none;
+
+  // Token bridge: list/groupIndicator/cornerRadius (8) ещё не выгружен scss-композитом
+  // из @cloud-ru/ds-figma-variables — берём примитив dimension-8 напрямую.
+  border-radius: base.$sn-primitive-dimension-8;
+
+  // Закрытым шеврон в макете приглушён (@0.80), сплошной `textMain` — только раскрытым.
+  color: base.$sn-theme-color-available-version-textSecondary;
+
+  appearance: none;
+  background: transparent;
+  outline: none;
+
+  svg {
+    position: relative;
+    z-index: 1;
+    width: base.$sn-density-size-icon-xs;
+    height: base.$sn-density-size-icon-xs;
+  }
+
+  &:focus-visible {
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: calc(0px - base.$sn-primitive-strokeWeight-strokeSemiBold);
+  }
+
+  // В раскрытом состоянии мастер меняет скругление с 8 на 2 — кнопка становится
+  // «квадратнее» под подложкой нажатия (варианты `groupIndicatorS/Xs`, `open=true`).
+  &[data-open] {
+    border-radius: base.$sn-primitive-dimension-2;
+    color: base.$sn-theme-color-available-version-textMain;
+  }
+}
+
+.groupIndicatorState {
+  pointer-events: none;
+
+  position: absolute;
+  inset: 0;
+
+  border-radius: inherit;
+
+  background: transparent;
+}
+
+.groupIndicator:hover > .groupIndicatorState {
+  background: base.$sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled;
+}
+
+.groupIndicator:active > .groupIndicatorState {
+  background: base.$sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled;
+}
+
+// Раскрытая группа держит постоянную подложку `neutral/decorTransparent`,
+// а не pressed-слой состояния.
+.groupIndicator[data-open] > .groupIndicatorState {
+  background: base.$sn-theme-color-neutral-decorTransparent;
+}
+
+.markerContainer {
+  pointer-events: none;
+
+  position: absolute;
+  top: 0;
+  left: 0;
+
+  box-sizing: border-box;
+  height: 100%;
+
+  &::before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+$level: var(--level, 0);
+
+.droplistItem {
+  position: relative;
+  z-index: 1;
+  width: 100%;
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      $itemPaddingLeft: list.$sn-list-anatomy-size-s-listItem-paddingHorizontal;
+      $itemGap: list.$sn-list-anatomy-size-s-listItem-gap;
+
+      @if $size == 'm' {
+        $itemPaddingLeft: list.$sn-list-anatomy-size-m-listItem-paddingHorizontal;
+        $itemGap: list.$sn-list-anatomy-size-m-listItem-gap;
+      }
+
+      @if $size == 'l' {
+        $itemPaddingLeft: list.$sn-list-anatomy-size-l-listItem-paddingHorizontal;
+        $itemGap: list.$sn-list-anatomy-size-l-listItem-gap;
+      }
+
+      // Шаг вложенности — слот иконки плюс зазор строки: обёртка `nestingLevel` занимает
+      // ровно иконочный слот, а между уровнями лежит тот же gap, что и между элементами строки.
+      $nestingLevelStep: calc(#{base.simple-var(icons.$iconSizeMap, $size)} + #{$itemGap});
+
+      &[data-level-one],
+      &[data-level-more-one] {
+        padding-left: calc($itemPaddingLeft + $level * #{$nestingLevelStep});
+      }
+
+      // Чекбокс: тот же centeredWrapper, что у иконки — контейнер = icon-сетке (16/24/24),
+      // контрол центрируется внутри, верх контейнера совпадает с первой строкой текста.
+      .checkbox {
+        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');
+      }
+
+      .beforeContent,
+      .dragHandle {
+        width: base.simple-var(icons.$iconSizeMap, $size);
+        height: base.simple-var(icons.$iconSizeMap, $size);
+
+        // centeredWrapper.padding-vertical центрирует иконку по сетке textWrapper
+        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');
+      }
+
+      // afterContent — слот произвольного контента (иконка, counter, tag). Иконка центрируется
+      // по icon-сетке, но не-иконочный контент (counter/badge) не зажимается в квадрат: min-* вместо
+      // фиксированного width/height.
+      .afterContent {
+        min-width: base.simple-var(icons.$iconSizeMap, $size);
+        min-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');
+      }
+
+      .expandableIcon {
+        width: base.simple-var(icons.$iconSizeMap, $size);
+        height: base.simple-var(icons.$iconSizeMap, $size);
+      }
+
+      .groupIndicator {
+        width: base.simple-var(icons.$iconSizeMap, $size);
+        height: base.simple-var(icons.$iconSizeMap, $size);
+        // Строка выровнена по flex-start; centeredWrapper.padding-top сдвигает чеврон на центр
+        // первой строки текста (как у afterContent/beforeContent). margin (а не padding) —
+        // чтобы квадрат state-layer'а остался icon-сеткой, а не растянулся по вертикали.
+        margin-top: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'centeredWrapper', 'padding-top');
+      }
+
+      .markerContainer {
+        @include base.composite-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'markerWrapper', 'marker');
+
+        width: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'markerWrapper', 'width');
+
+        &::before {
+          border-radius: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'markerWrapper', 'border-top-left-radius')
+            base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'markerWrapper', 'border-top-right-radius')
+            base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'markerWrapper', 'border-bottom-right-radius')
+            base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'markerWrapper', 'border-bottom-left-radius');
+        }
+      }
+
+      // Базовая типографика неструктурного content (fallback-ветка `<div class="content">`
+      // в BaseItem.tsx, когда content не `ContentItem`) — та же body/<size>, что у
+      // ItemContent `.label`, иначе raw-строка наследует шрифт вместо DS-типографики.
+      .content {
+        @include base.composite-var(base.$base-styles, 'sn', 'regular', 'body', $size);
+      }
+
+      // Phase 5: токен dropList item.<size>.headline composite ещё не выгружен из Figma —
+      // типографика headline пока покрывается стилями ItemContent. Пустое правило не заводим.
+    }
+  }
+
+  &[data-non-pointer] {
+    cursor: inherit;
+  }
+}
+
+.innerWrapper {
+  &[data-disabled] {
+    .expandableIcon {
+      color: base.$sn-theme-color-available-version-textDisabled;
+    }
+
+    .groupIndicator {
+      cursor: not-allowed;
+      color: base.$sn-theme-color-available-version-textDisabled;
+    }
+
+    .beforeContent,
+    .dragHandle {
+      // TODO Phase 5 token missing: $opacity-a064 (аналог — effect-opacity-disabled 0.4)
+      opacity: base.$sn-theme-effect-opacity-disabled;
+    }
+
+    .droplistItem {
+      cursor: not-allowed;
+    }
+  }
+
+  &[data-has-checked],
+  &[data-checked] {
+    .markerContainer::before {
+      background-color: base.$sn-theme-color-primary-accent;
+    }
+
+    // В макете фокус выбранной строки красится в `primary/accent` в обоих режимах выбора,
+    // а не только в одиночном.
+    .droplistItem:focus-visible {
+      outline-color: base.$sn-theme-color-primary-accent;
+    }
+
+    &[data-disabled] {
+      .markerContainer::before {
+        // В мастере выключенный маркер — сплошной `neutral/accent`, а не полупрозрачный
+        // текстовый токен: полоса остаётся читаемой на любом фоне.
+        background-color: base.$sn-theme-color-neutral-accent;
+      }
+    }
+  }
+}
+
+.content {
+  overflow: hidden;
+  flex-grow: 1;
+  flex-shrink: 1;
+  box-sizing: border-box;
+}

package/src/components/Items/GroupSelectItem/GroupSelectItem.tsx

@@ -0,0 +1,48 @@
+import { Separator } from '../../../helperComponents';
+import { useGroupItemSelection, useRenderItems } from '../hooks';
+import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
+
+type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
+
+export function GroupSelectItem({
+  label,
+  beforeContent,
+  truncate,
+  divider,
+  items,
+  groupVariant,
+  id,
+  itemRef,
+  allChildIds,
+  selectButtonLabel,
+}: GroupSelectItemProps) {
+  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
+    items,
+    id,
+    disabled: false,
+    allChildIds,
+  });
+
+  const itemsJSX = useRenderItems(items);
+
+  return (
+    <>
+      <Separator
+        label={label}
+        beforeContent={beforeContent}
+        truncate={truncate}
+        divider={divider}
+        groupVariant={groupVariant}
+        selectButton={{
+          indeterminate,
+          checked,
+          itemRef,
+          onClick: handleOnSelect,
+          label: selectButtonLabel,
+        }}
+      />
+
+      {itemsJSX}
+    </>
+  );
+}

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

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

package/src/components/Items/NextListItem/NextListItem.tsx

@@ -0,0 +1,157 @@
+import { Dropdown } from '@cloud-ru/ds-dropdown';
+import { ChevronRightSVG } from '@cloud-ru/ds-icons/interface/system';
+import { KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+
+import { ITEM_PREFIXES } from '../../../constants';
+import { useCollapseContext, useFocusListContext, useNewListContext, useSelectionContext } from '../../Lists/contexts';
+import { ListPrivate } from '../../Lists/ListPrivate';
+import { BaseItem } from '../BaseItem';
+import { useGroupItemSelection } from '../hooks';
+import { FlattenNextListItem } from '../types';
+import { extractActiveItems, isNextListItem } from '../utils';
+import { FALLBACK_PLACEMENTS } from './constants';
+import { NextListItemProps } from './types';
+
+export function NextListItem({
+  items,
+  placement = 'right-start',
+  id,
+  scroll,
+  scrollRef,
+  disabled,
+  onSublistOpenChanged,
+  allChildIds,
+  loading = false,
+  dataError = false,
+  dataFiltered = false,
+  focusId = id,
+  untouchableScrollbars = false,
+  ...option
+}: NextListItemProps) {
+  const { flattenItems, focusFlattenItems, virtualized } = useNewListContext();
+  const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
+  const { openCollapseItems = [] } = useCollapseContext();
+
+  const item = flattenItems[id];
+
+  const { ids, expandedIds } = useMemo(() => {
+    const { ids, expandedIds } = extractActiveItems({
+      focusCloseChildIds: items,
+      focusFlattenItems,
+      openCollapseItems,
+      isSelectionMultiple,
+    });
+
+    return { ids, expandedIds: expandedIds.concat([id]) };
+  }, [focusFlattenItems, id, isSelectionMultiple, items, openCollapseItems]);
+
+  const { handleListKeyDownFactory, activeItemId, forceUpdateActiveItemId } = useFocusListContext();
+
+  const [open, setOpen] = useState<boolean>();
+
+  const handleListKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLElement>) => {
+      handleListKeyDownFactory(ids, expandedIds)(e);
+
+      if (e.key === 'ArrowLeft') {
+        forceUpdateActiveItemId?.(focusId);
+        setOpen(false);
+        e.stopPropagation();
+
+        return;
+      }
+    },
+    [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId],
+  );
+
+  const {
+    indeterminate,
+    checked: checkedProp,
+    handleOnSelect,
+  } = useGroupItemSelection({
+    items: isNextListItem<FlattenNextListItem>(item) ? item.items : [],
+    id,
+    disabled,
+    allChildIds,
+  });
+
+  const handleOutsideClick = useCallback(() => {
+    forceUpdateActiveItemId?.(ITEM_PREFIXES.dropFocus);
+    setOpen(false);
+    return true;
+  }, [forceUpdateActiveItemId]);
+
+  const isOpen = useMemo(
+    () => Boolean(!disabled && activeItemId && focusFlattenItems[focusId]?.allChildIds.includes(activeItemId)),
+    [activeItemId, disabled, focusFlattenItems, focusId],
+  );
+
+  const checked = Boolean(
+    (indeterminate && !open && isSelectionSingle && value && allChildIds.includes(value)) ||
+    (isSelectionMultiple && checkedProp),
+  );
+
+  useEffect(() => {
+    setOpen(open => open && isOpen);
+  }, [isOpen]);
+
+  const listRef = useRef<HTMLElement>(null);
+
+  const openSublist = useCallback(() => {
+    setOpen(true);
+    setTimeout(() => {
+      listRef.current?.focus();
+    }, 0);
+  }, []);
+
+  return (
+    <Dropdown
+      outsideClick={handleOutsideClick}
+      fallbackPlacements={FALLBACK_PLACEMENTS}
+      bodyPadding={false}
+      content={
+        <ListPrivate
+          onKeyDown={handleListKeyDown}
+          items={items}
+          nested
+          scroll={scroll}
+          virtualized={virtualized}
+          tabIndex={0}
+          ref={listRef}
+          onFocus={e => {
+            e.stopPropagation();
+            forceUpdateActiveItemId?.(ids[0]);
+          }}
+          scrollRef={scrollRef}
+          limitedScrollHeight
+          untouchableScrollbars={untouchableScrollbars}
+          loading={loading}
+          dataError={dataError}
+          dataFiltered={dataFiltered}
+        />
+      }
+      trigger='hover'
+      open={isOpen || open}
+      onOpenChange={value => {
+        setOpen(value);
+        onSublistOpenChanged?.(value, id);
+      }}
+      placement={placement}
+      widthStrategy='auto'
+    >
+      <BaseItem
+        {...option}
+        disabled={disabled}
+        open={isOpen || open}
+        expandIcon={<ChevronRightSVG />}
+        id={id}
+        isParentNode
+        indeterminate={indeterminate}
+        checked={checked}
+        onOpenNestedList={openSublist}
+        onExpandIconClick={openSublist}
+        onSelect={handleOnSelect}
+      />
+    </Dropdown>
+  );
+}

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

@@ -0,0 +1,12 @@
+import { DropdownProps } from '@cloud-ru/ds-dropdown';
+
+export const FALLBACK_PLACEMENTS: DropdownProps['fallbackPlacements'] = [
+  'right',
+  'right-start',
+  'right-end',
+  'left',
+  'left-start',
+  'left-end',
+  'bottom',
+  'top',
+];

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

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

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

@@ -0,0 +1,3 @@
+import { CommonFlattenProps, FlattenNextListItem, ItemId } from '../types';
+
+export type NextListItemProps = Omit<FlattenNextListItem, 'type'> & CommonFlattenProps & { focusId?: ItemId };

package/src/components/Items/PinGroupItem/PinGroupItem.tsx

@@ -0,0 +1,38 @@
+import { Divider, VARIANT } from '@cloud-ru/ds-divider';
+import cn from 'classnames';
+import { ReactNode } from 'react';
+
+import { TEST_IDS } from '../../../constants';
+import { useNewListContext } from '../../Lists/contexts';
+import styles from './styles.module.scss';
+
+export function PinTopGroupItem({ children }: { children: ReactNode }) {
+  const { size = 'm' } = useNewListContext();
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={cn(styles.pinTopItem)} data-size={size} data-test-id={TEST_IDS.pinTopGroupItem}>
+      <div>{children}</div>
+
+      <Divider variant={VARIANT.Regular} />
+    </div>
+  );
+}
+
+export function PinBottomGroupItem({ children }: { children: ReactNode }) {
+  const { size = 'm' } = useNewListContext();
+
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <div className={cn(styles.pinBottomItem)} data-size={size} data-test-id={TEST_IDS.pinBottomGroupItem}>
+      <Divider variant={VARIANT.Regular} />
+      <div>{children}</div>
+    </div>
+  );
+}

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

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

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

@@ -0,0 +1,14 @@
+// Pin-группы не имеют собственных горизонтальных отступов: вложенные пункты выровнены
+// со строками тела списка (свой listItem.padding-left у каждого), а дивайдер идёт во всю
+// ширину контейнера — как в макете.
+.pinTopItem,
+.pinBottomItem {
+  display: flex;
+  flex-direction: column;
+  border: none;
+
+  li,
+  ul {
+    list-style-type: none;
+  }
+}

package/src/components/Items/SearchItem/SearchItem.tsx

@@ -0,0 +1,55 @@
+import { SearchPrivate } from '@cloud-ru/ds-search-private';
+import { preventScrollOnVerticalArrows } from '@cloud-ru/ds-utils';
+import { FocusEvent, KeyboardEvent, RefObject } from 'react';
+
+import { ITEM_PREFIXES, TEST_IDS } from '../../../constants';
+import { SearchState } from '../../../types';
+import { stopPropagation } from '../../../utils';
+import { useNewListContext } from '../../Lists/contexts';
+import styles from './styles.module.scss';
+
+export type SearchItemProps = {
+  search?: SearchState;
+  itemRef?: RefObject<HTMLElement>;
+  /**
+   * Доп. обработчик клавиш навигации по списку. Нужен, когда поле поиска вынесено
+   * из `<ul>` в шапку dropdown (topBar) и события клавиатуры больше не всплывают
+   * на `<ul>`-onKeyDown — DropList передаёт сюда `handleListKeyDown` (factory).
+   */
+  onNavKeyDown?(e: KeyboardEvent<HTMLElement>): void;
+  /** onFocus поля (синхронизация активного item, когда search вне `<ul>`). */
+  onFocus?(e: FocusEvent<HTMLInputElement>): void;
+  /** Рендер для шапки dropdown — без `.listItem`-обёртки. */
+  inTopBar?: boolean;
+};
+
+export function SearchItem({ search, itemRef, onNavKeyDown, onFocus, inTopBar }: SearchItemProps) {
+  // Размер поиска следует за размером айтемов списка (size из контекста), а не фиксирован 's'.
+  const { firstItemId, size = 'm' } = useNewListContext();
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    // Поиск — текстовый input: гасим только Up/Down (навигация по списку), горизонтальные
+    // стрелки оставляем каретке.
+    preventScrollOnVerticalArrows(e);
+
+    search?.onKeyDown?.(e);
+    onNavKeyDown?.(e);
+  };
+
+  if (!search) {
+    return null;
+  }
+
+  return (
+    <div className={styles.searchItem} data-in-top-bar={inTopBar || undefined} data-test-id={TEST_IDS.searchItem}>
+      <SearchPrivate
+        size={size}
+        tabIndex={ITEM_PREFIXES.search === firstItemId ? 0 : -1}
+        onKeyDown={handleKeyDown}
+        onFocus={onFocus ?? stopPropagation}
+        {...search}
+        ref={itemRef as RefObject<HTMLInputElement>}
+      />
+    </div>
+  );
+}

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

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