@cloud-ru/ds-uikit-product-header 2.1.7 → 2.1.8-preview-d9442369.0

package/src/components/ListCustom/helperComponents/ListItemCustom/styles.module.scss

@@ -0,0 +1,218 @@
+@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;
+
+// Figma listItemCustom (17001:42063): selectionMode × checked × disabled на anatomy size/s.
+
+$level: var(--level, 0);
+$itemPaddingHorizontal: list.$sn-list-anatomy-size-s-listItem-paddingHorizontal;
+$itemGap: list.$sn-list-anatomy-size-s-listItem-gap;
+$nestingLevelStep: list.$sn-list-anatomy-size-s-listItem-nestingLevel-paddingLeft;
+
+.stateLayer {
+  visibility: initial;
+}
+
+.listItem {
+  cursor: pointer;
+
+  position: relative;
+  z-index: 1;
+
+  display: flex;
+  flex-direction: row;
+  gap: $itemGap;
+  align-items: flex-start;
+
+  box-sizing: border-box;
+  width: max-content;
+  min-width: 100%;
+  margin: 0;
+  padding: base.$sn-primitive-dimension-0 $itemPaddingHorizontal;
+  border: none;
+
+  color: base.$sn-theme-color-available-version-textMain;
+  text-align: start;
+
+  appearance: unset;
+  background-color: transparent;
+  outline: none;
+
+  &[data-level-one],
+  &[data-level-more-one] {
+    padding-left: calc(#{$itemPaddingHorizontal} + #{$level} * #{$nestingLevelStep} + #{$itemGap});
+  }
+
+  &:not([data-inactive], [data-disabled]) {
+    &[data-focused],
+    &:focus-visible {
+      outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+      outline-offset: calc(0px - #{base.$sn-primitive-strokeWeight-strokeSemiBold});
+    }
+  }
+
+  &[data-non-pointer] {
+    cursor: inherit;
+  }
+}
+
+// Figma markerWrapper: absolute left strip, only when selectionMode=single && checked.
+.marker {
+  pointer-events: none;
+
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+
+  display: flex;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: list.$sn-list-anatomy-size-s-listItem-markerWrapper-width;
+  min-width: list.$sn-list-anatomy-size-s-listItem-markerWrapper-width;
+  max-width: list.$sn-list-anatomy-size-s-listItem-markerWrapper-width;
+  padding-top: list.$sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical;
+  padding-bottom: list.$sn-list-anatomy-size-s-listItem-markerWrapper-marker-paddingVertical;
+
+  &::before {
+    content: '';
+
+    flex: 1 0 0;
+
+    width: 100%;
+    min-width: base.$sn-primitive-dimension-0;
+    height: 100%;
+    border-top-right-radius: list.$sn-list-anatomy-size-s-listItem-markerWrapper-borderTopRightRadius;
+    border-bottom-right-radius: list.$sn-list-anatomy-size-s-listItem-markerWrapper-borderBottomRightRadius;
+
+    background-color: base.$sn-theme-color-primary-accent;
+  }
+
+  &[data-disabled] {
+    opacity: base.$sn-theme-effect-opacity-disabled;
+
+    &::before {
+      background-color: base.$sn-theme-color-neutral-accent;
+    }
+  }
+}
+
+// Figma centeredWrapper вокруг checkboxS: padding 4.
+.checkbox {
+  display: flex;
+  flex-shrink: 0;
+  align-items: flex-start;
+  padding: base.$sn-primitive-dimension-4;
+}
+
+// Figma centeredWrapper вокруг groupIndicator (17001:42268): padding 4 4 4 0.
+.expandCenteredWrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  padding: base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-4 base.$sn-primitive-dimension-4
+    base.$sn-primitive-dimension-0;
+}
+
+// Figma groupIndicator (17001:42269) на size/s: сетка icon-s (24).
+.groupIndicator {
+  pointer-events: none;
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+  width: base.$sn-density-icon-s;
+  height: base.$sn-density-icon-s;
+
+  color: base.$sn-theme-color-available-version-textSecondary;
+
+  fill: currentcolor;
+
+  svg {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    max-height: 100%;
+  }
+
+  &[data-interactive] {
+    pointer-events: auto;
+    cursor: pointer;
+  }
+
+  &[data-open] {
+    border-radius: base.$sn-density-radius-s;
+    color: base.$sn-theme-color-available-version-textMain;
+    background: base.$sn-theme-color-neutral-decorTransparent;
+  }
+
+  &[data-disabled] {
+    opacity: base.$sn-theme-effect-opacity-disabled;
+  }
+}
+
+.itemWrapper {
+  position: relative;
+  z-index: 0;
+
+  min-width: 100%;
+  margin: 0;
+  padding: 0;
+  border-radius: list.$sn-list-anatomy-size-s-listItem-borderRadius;
+
+  @include m.has-state-layer-as-child(#{stateLayer});
+
+  &[data-disabled],
+  &:disabled {
+    cursor: not-allowed;
+    background-color: transparent;
+    outline: none;
+
+    .listItem {
+      cursor: not-allowed;
+    }
+  }
+
+  &:not([data-inactive], [data-disabled]) {
+    &[data-open],
+    &[data-focused] {
+      .stateLayer[data-state='emptyNeutralOnBackground'] {
+        background: base.$sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled;
+      }
+
+      .stateLayer[data-state='activatedOnBackground'] {
+        background: base.$sn-theme-color-material-stateLayer-activated-hovered-filled;
+      }
+    }
+
+    &:active {
+      .stateLayer[data-state='emptyNeutralOnBackground'] {
+        background: base.$sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled;
+      }
+
+      .stateLayer[data-state='activatedOnBackground'] {
+        background: base.$sn-theme-color-material-stateLayer-activated-pressed-filled;
+      }
+    }
+  }
+
+  &[data-inactive] {
+    &:hover,
+    &:active {
+      .stateLayer[data-state='emptyNeutralOnBackground'],
+      .stateLayer[data-state='activatedOnBackground'] {
+        background: base.$sn-theme-color-material-stateLayer-neutral-onBackground-defaultEmpty-filled;
+      }
+    }
+  }
+
+  &[data-checked][data-selection-mode='single']:not([data-disabled]) {
+    .listItem:focus-visible {
+      outline-color: base.$sn-theme-color-primary-accent;
+    }
+  }
+}

package/src/components/ListCustom/helperComponents/ListItemCustom/types.ts

@@ -0,0 +1,18 @@
+import { ItemRenderProps, Mode } from '@cloud-ru/ds-list';
+
+export type SelectionMode = Mode;
+
+/**
+ * Пропы оболочки. Совместимы с `ItemRenderProps` списка (адаптер — spread).
+ * Для Playground часть полей опциональна: `contentNode` / `selectionMode` / `size` / `tabIndex` / `level`.
+ */
+export type ListItemCustomProps = Omit<
+  ItemRenderProps,
+  'contentNode' | 'selectionMode' | 'size' | 'tabIndex' | 'level'
+> & {
+  contentNode?: ItemRenderProps['contentNode'];
+  selectionMode?: Mode;
+  size?: ItemRenderProps['size'];
+  tabIndex?: number;
+  level?: number;
+};

package/src/components/ListCustom/helperComponents/ListItemGroupCustom/ListItemGroupCustom.tsx

@@ -0,0 +1,56 @@
+import { Divider, VARIANT } from '@cloud-ru/ds-divider';
+import { GroupItemRenderProps } from '@cloud-ru/ds-list';
+import { CSSProperties } from 'react';
+
+import { ContentWrapperCustom } from '../ContentWrapperCustom';
+import styles from './styles.module.scss';
+
+export type ListItemGroupCustomProps = GroupItemRenderProps;
+
+/**
+ * Кастомная оболочка заголовка группы `List`/`Droplist` (Figma `listItemGroupCustom`).
+ * Передаётся в `groupItemRender`: subtitle / subtitleTertiary / divider.
+ */
+export function ListItemGroupCustom({
+  label,
+  beforeContent,
+  truncate,
+  groupVariant = 'subtitleTertiary',
+  divider,
+  selectButtonNode,
+  level,
+}: ListItemGroupCustomProps) {
+  if (label) {
+    return (
+      <div
+        className={styles.root}
+        data-level-one={level === 1 || undefined}
+        data-level-more-one={level > 1 || undefined}
+        style={{ '--level': level } as CSSProperties}
+      >
+        <ContentWrapperCustom
+          layout='group'
+          beforeContent={beforeContent}
+          label={label}
+          truncate={truncate ? { variant: truncate.variant, label: 1 } : undefined}
+          groupVariant={groupVariant}
+          selectButton={selectButtonNode}
+        />
+
+        {divider && (
+          <Divider className={styles.divider} variant={groupVariant === 'subtitle' ? VARIANT.Regular : VARIANT.Thin} />
+        )}
+      </div>
+    );
+  }
+
+  if (divider) {
+    return (
+      <div className={styles.dividerOnly}>
+        <Divider variant={VARIANT.Regular} />
+      </div>
+    );
+  }
+
+  return null;
+}

package/src/components/ListCustom/helperComponents/ListItemGroupCustom/index.ts

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

package/src/components/ListCustom/helperComponents/ListItemGroupCustom/styles.module.scss

@@ -0,0 +1,52 @@
+@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;
+
+// Figma listItemGroupCustom (17001:43680): subtitle / subtitleTertiary / divider.
+
+$level: var(--level, 0);
+$groupPaddingHorizontal: base.$sn-primitive-dimension-8;
+$itemGap: list.$sn-list-anatomy-size-s-listItem-gap;
+$nestingLevelStep: list.$sn-list-anatomy-size-s-listItem-nestingLevel-paddingLeft;
+
+.root {
+  position: relative;
+
+  display: flex;
+  gap: $itemGap;
+  align-items: center;
+
+  box-sizing: border-box;
+  width: 100%;
+  min-width: 100%;
+  padding: list.$sn-list-anatomy-size-s-subtitle-paddingTop $groupPaddingHorizontal
+    list.$sn-list-anatomy-size-s-listItem-paddingVertical;
+
+  &:focus-visible {
+    outline: base.$sn-theme-color-available-complementary solid base.$sn-primitive-strokeWeight-strokeSemiBold;
+    outline-offset: calc(0px - #{base.$sn-primitive-strokeWeight-strokeSemiBold});
+  }
+
+  &[data-level-one],
+  &[data-level-more-one] {
+    padding-left: calc(#{$groupPaddingHorizontal} + #{$level} * #{$nestingLevelStep} + #{$itemGap});
+  }
+}
+
+.dividerOnly {
+  display: flex;
+  align-items: flex-end;
+
+  box-sizing: border-box;
+  width: 100%;
+  padding: list.$sn-list-anatomy-size-s-listItem-paddingVertical $groupPaddingHorizontal;
+}
+
+.divider {
+  position: absolute;
+  top: 0;
+  right: 0;
+  left: 0;
+
+  width: auto;
+  min-width: 0;
+}

package/src/components/ListCustom/index.ts

@@ -0,0 +1,3 @@
+export * from './helperComponents/ListItemCustom';
+export * from './helperComponents/ListItemGroupCustom';
+export * from './renderListCustom';

package/src/components/ListCustom/renderListCustom.tsx

@@ -0,0 +1,13 @@
+import { GroupItemRenderProps, ItemRenderProps } from '@cloud-ru/ds-list';
+
+import { ListItemCustom } from './helperComponents/ListItemCustom';
+import { ListItemGroupCustom } from './helperComponents/ListItemGroupCustom';
+
+/** Стабильные рендеры для `itemRender` / `groupItemRender` у `List`/`Droplist`. */
+export function renderListItemCustom(props: ItemRenderProps) {
+  return <ListItemCustom {...props} />;
+}
+
+export function renderListItemGroupCustom(props: GroupItemRenderProps) {
+  return <ListItemGroupCustom {...props} />;
+}

package/src/components/ListCustom/specs/readme.md

@@ -0,0 +1,197 @@
+# ListCustom — устройство и логика
+
+Спецификация кастомных оболочек строки и заголовка группы для `List` / `Droplist` в хедере. Ось размера мастера — только `s` (Figma `list/anatomy/size/s`).
+
+## Зачем
+
+Стандартный `BaseItem` / `Separator` из `@cloud-ru/ds-list` рисуют раскладку списка. Пропы `contentRender` и `itemWrapRender` не позволяют заменить отступы и типографику оболочки строки, не затрагивая остальных потребителей List.
+
+В хедере нужна раскладка мастеров `listItemCustom` / `listItemGroupCustom` / `contentWrapperCustom` (файл Figma `VcK2QJzt2cWJiHzTzpKAuZ`). Для этого в List добавлены опциональные слоты:
+
+| Проп List | Когда задан | Когда не задан |
+|-----------|-------------|----------------|
+| `itemRender` | вместо JSX строки `BaseItem` | дефолтная разметка `BaseItem` |
+| `groupItemRender` | вместо разметки `Separator` | дефолтный `Separator` |
+
+Логика выбора, клавиатуры, вложенных списков и закрытия дроплиста остаётся в List. Оболочки отвечают только за визуальную раскладку и индикаторы выбора (маркер, чекбокс, подложка) по макету хедера.
+
+`contentRender` и `itemWrapRender` не меняют сигнатуру и место в дереве: `itemWrapRender` по-прежнему оборачивает результат `itemRender` (например, ссылка профиля в UserMenu).
+
+## Состав модуля
+
+```
+ListCustom/
+├── index.ts                    # публичный экспорт
+├── renderListCustom.tsx        # адаптеры ItemRenderProps → оболочки
+├── specs/readme.md             # этот файл
+└── helperComponents/
+    ├── ContentWrapperCustom/   # приватный слот before + текст + after
+    ├── ListItemCustom/         # публичная оболочка строки
+    └── ListItemGroupCustom/    # публичная оболочка группы
+```
+
+**Публичный API пакета:** `ListItemCustom`, `ListItemGroupCustom`, `renderListItemCustom`, `renderListItemGroupCustom`, константа `SELECTION_MODE` / тип `SelectionMode`.
+
+`ContentWrapperCustom` наружу не экспортируется.
+
+## Поток данных
+
+```mermaid
+flowchart TD
+  Droplist["List / Droplist"] --> BaseItem
+  Droplist --> Separator
+  BaseItem -->|"itemRender не задан"| DefaultRow["дефолтная строка BaseItem"]
+  BaseItem -->|"itemRender задан"| Adapter["renderListItemCustom"]
+  Adapter --> ListItemCustom
+  ListItemCustom --> CWCItem["ContentWrapperCustom layout=item"]
+  Separator -->|"groupItemRender не задан"| DefaultGroup["дефолтный Separator"]
+  Separator -->|"groupItemRender задан"| AdapterG["renderListItemGroupCustom"]
+  AdapterG --> ListItemGroupCustom
+  ListItemGroupCustom --> CWCGroup["ContentWrapperCustom layout=group"]
+  ListItemCustom --> Wrap["itemWrapRender если задан"]
+  DefaultRow --> Wrap
+```
+
+Подключение в продукте:
+
+- `UserMenu` — `itemRender` / `groupItemRender` + `size="s"` на Droplist.
+- `Favorites` — то же на дроплисте действий избранного.
+
+## ContentWrapperCustom (приватный)
+
+Общий внутренний блок `beforeContent` + текст + `afterContent`. Аналог связки `contentWrapper` + `ItemContent` списка, с отступами мастера хедера (gap `primitive/6`, padding `4` / `8` для `layout=item`).
+
+| Проп | Назначение |
+|------|------------|
+| `layout` | `'item'` — строка списка; `'group'` — заголовок группы (другие отступы и типографика) |
+| `label` / `caption` / `description` | структурный текст; усечение через `TruncateString` |
+| `contentNode` | готовый узел вместо структурного текста (например результат `contentRender`) |
+| `beforeContent` / `afterContent` | иконочные / произвольные слоты |
+| `selectButton` | кнопка массового выбора в заголовке группы |
+| `groupVariant` | `'subtitle'` \| `'subtitleTertiary'` — цвет подписи группы |
+| `disabled` | пониженная opacity слотов |
+
+Структурный текст рендерится только если есть `label` и нет `contentNode`. `caption` и `description` показываются только при `layout=item`.
+
+## ListItemCustom
+
+Оболочка строки (Figma `listItemCustom`, узел `17001:42063`). Визуальный аналог `BaseItem`, но индикаторы выбора и state layer собраны внутри по декларативным пропам мастера.
+
+### Пропы выбора (Figma)
+
+| Проп | Значения | Эффект |
+|------|----------|--------|
+| `selectionMode` | `'none'` \| `'single'` \| `'multiple'` (дефолт `none`; из List приходит явно) | single → маркер; multiple → чекбокс; none — без индикаторов |
+| `checked` | `boolean` | выбранность; для single ещё включает activated-подложку |
+| `disabled` | `boolean` | курсор, opacity контента, цвет маркера; state layer не рисуется |
+
+Тип пропсов совместим с `ItemRenderProps` из `@cloud-ru/ds-list` (`SELECTION_MODE` = `MODE` списка).
+
+### Логика индикаторов выбора
+
+```
+showMarker   = single && checked && !isParentNode && !switchControl
+showCheckbox = multiple && !switchControl
+
+stateLayer   = activatedOnBackground  только если single && checked && !disabled && !isParentNode && !switchControl
+             иначе emptyNeutralOnBackground (и только если !disabled)
+```
+
+- **single + checked** — вертикальный маркер слева (`primary/accent`; при `disabled` — `neutral/accent` + opacity).
+- **multiple** — `Checkbox` size `s` (мастер `checkboxS`), всегда в потоке строки, независимо от `checked`.
+- **activated**-подложка только у single-выбранной активной строки; у multiple фон не меняется при выборе.
+- Маркер и activated не показываются у parent-строки и при наличии `switchControl` (паритет с правилами `BaseItem`).
+
+Фокус — `outline` на интерактивном `<li>`, без переноса `focusedFrame` из Figma.
+
+### Контент строки
+
+1. Если `contentFromRender` — структурный разбор пропускается, в слот текста идёт `contentNode`.
+2. Иначе `content` вида `{ label, caption?, description? }` или примитив → поля в `ContentWrapperCustom`.
+3. Слоты снаружи текста: `dragHandle` → маркер/чекбокс → `ContentWrapperCustom` → `switchControl` → `expandIcon`.
+
+Обработчики (`onClick`, `onKeyDown`, …), `itemRef`, `tabIndex`, `data-test-id` вешаются на `<li>`; выбор и клавиатура по-прежнему живут в `BaseItem`, оболочка только принимает уже подготовленные колбэки.
+
+### Вложенность
+
+`level` задаёт CSS-переменную `--level` и атрибуты `data-level-one` / `data-level-more-one` для отступа nesting из токенов списка size `s`.
+
+## ListItemGroupCustom
+
+Оболочка заголовка группы (Figma `listItemGroupCustom`, узел `17001:43680`). Тип пропсов = `GroupItemRenderProps` из `@cloud-ru/ds-list`.
+
+### Figma-триада vs API: почему нет `groupVariant: 'divider'`
+
+В мастере Figma у группы три **презентации**: подпись `subtitle`, подпись `subtitleTertiary`, только линия (divider-only). В коде это **не** один enum из трёх значений.
+
+| Ось | API | Роль |
+|-----|-----|------|
+| Стиль подписи | `groupVariant?: 'subtitle' \| 'subtitleTertiary'` | цвет / вес текста заголовка |
+| Линия | `divider?: boolean` | разделитель над/под группой (в оболочке хедера — под заголовком) |
+
+Третий вид макета (только линия) — ветка рендера **`divider: true` без `label`**, а не третье значение `groupVariant`.
+
+Почему так, а не 1:1 с Figma:
+
+1. **Оси ортогональны.** Уже есть кейс «подпись + линия»: `groupVariant: 'subtitle'` и одновременно `divider: true`. Один enum `'divider'` эту композицию не выражает без второго пропа.
+2. **Совпадение с `@cloud-ru/ds-list`.** `Separator`, `CommonGroupItem` и `GroupItemRenderProps` уже разделяют `groupVariant` и `divider`; оболочка хедера повторяет тот же контракт.
+3. **Divider-only — другая структура, не стиль текста.** Без `label` не применяется типографика `subtitle` / `subtitleTertiary`; рисуется только `Divider` (`variant=Regular`). Класть это в `groupVariant` смешивало бы «цвет подписи» и «тип строки».
+
+Итого: в Controls / данных списка достаточно связки **`groupVariant` + `divider`** (+ наличие или отсутствие `label`). Значение `'divider'` в `groupVariant` в API не добавляется.
+
+Ветки рендера:
+
+| Условие | Результат |
+|---------|-----------|
+| есть `label` | `ContentWrapperCustom` с `layout=group`; при `divider` — ещё `Divider` под заголовком (`Regular` для `subtitle`, `Thin` для `subtitleTertiary`) |
+| нет `label`, есть `divider` | только разделитель (`dividerOnly`) |
+| иначе | `null` |
+
+`selectButtonNode` из List передаётся в `ContentWrapperCustom` как `selectButton`. Уровень вложенности — тот же механизм `--level`, что у строки.
+
+## Адаптеры `renderList*`
+
+Стабильные функции для пропсов List (ссылка не меняется между рендерами). Оба — прямой spread:
+
+```ts
+export function renderListItemCustom(props: ItemRenderProps) {
+  return <ListItemCustom {...props} />;
+}
+export function renderListItemGroupCustom(props: GroupItemRenderProps) {
+  return <ListItemGroupCustom {...props} />;
+}
+```
+
+`BaseItem` кладёт в `ItemRenderProps.selectionMode` значение из `SelectionProvider` (`none` / `single` / `multiple`) и **не** передаёт готовые узлы маркера/чекбокса — их рисует оболочка.
+
+## Связь с List
+
+| Слой | Ответственность |
+|------|-----------------|
+| `SelectionProvider` / `BaseItem` | режим выбора, значение, клик; сбор `ItemRenderProps` с `selectionMode` |
+| `renderListItemCustom` | `<ListItemCustom {...props} />` |
+| `ListItemCustom` | раскладка и индикаторы выбора по `selectionMode` / `checked` / `disabled` |
+| `itemWrapRender` | опциональная обёртка поверх уже собранной оболочки (ссылка и т.п.) |
+
+Ось `size` у оболочек не дублируется: отступы зашиты под мастер `s`. Потребители в хедере ставят `size="s"` на List/Droplist, чтобы служебные узлы списка (если останутся) совпадали по шкале.
+
+## Стори
+
+| Story | Назначение |
+|-------|------------|
+| `ListItemCustom.Playground` | Controls: `selectionMode`, `checked`, `disabled`, `asParentGroup`, `asNested` |
+| `ListItemCustom.VisualMatrix` | две таблицы: `single` и `multiple`; строки enabled/disabled × колонки unchecked/checked |
+| `ListItemGroupCustom.Playground` | Controls: `groupVariant` + `divider` (+ story-only `withLabel` для divider-only) |
+| `ListItemGroupCustom.VisualMatrix` | вертикально три презентации Figma: subtitle / subtitleTertiary / divider-only |
+| `ListCustom.Playground` | smoke: List + оба рендера (legacy, будет удалена позже) |
+| `ListCustom.VisualMatrix` | объединённая матрица (legacy, будет удалена позже) |
+
+## Figma (ориентиры)
+
+| Мастер | Node |
+|--------|------|
+| `listItemCustom` | `17001:42063` |
+| `contentWrapperCustom` | `17001:43602` |
+| `listItemGroupCustom` | `17001:43680` |
+
+Варианты строки: `selectionMode` × `checked` × `disabled` (восемь комбинаций single/multiple).

package/src/components/MainMenu/helperComponents/Favorites/Favorites.tsx

@@ -6,8 +6,8 @@ import { useEventHandler, useValueControl } from '@cloud-ru/ds-utils';
 import cn from 'classnames';
 import { MouseEvent, useMemo } from 'react';
 
-import { useDesktopComfortClassName } from '../../../../hooks/useDesktopComfortClassName';
 import { headerLocale } from '../../../../locale';
+import { renderListItemCustom, renderListItemGroupCustom } from '../../../ListCustom';
 import { FavoriteProps, InnerLink } from '../../types';
 import { resolveInnerLinksByIds } from '../../utils';
 import { Content, FavoritesItemsSkeleton } from './components';
@@ -28,7 +28,6 @@ export type FavoritesProps = {
 export function Favorites({ favorite, servicesById, headerClassName, isMobile }: FavoritesProps) {
   const { t } = headerLocale.useTranslations();
   const loading = favorite.loading;
-  const comfortClassName = useDesktopComfortClassName();
 
   const [segment, setSegment] = useValueControl<FavoritesSegment>({
     value: favorite.segment,
@@ -82,7 +81,13 @@ export function Favorites({ favorite, servicesById, headerClassName, isMobile }:
         />
 
         {favorite.actions && (
-          <Droplist size='m' {...favorite.actions} className={comfortClassName} closeDroplistOnItemClick>
+          <Droplist
+            {...favorite.actions}
+            size='s'
+            closeDroplistOnItemClick
+            itemRender={renderListItemCustom}
+            groupItemRender={renderListItemGroupCustom}
+          >
             <Button
               view='simple'
               size='m'

package/src/components/UserMenu/UserMenu.tsx

@@ -1,14 +1,13 @@
 import { Avatar } from '@cloud-ru/ds-avatar';
 import { BaseItemProps, Droplist, DroplistProps, SNAP_POINTS_PRESET } from '@cloud-ru/ds-list';
 import { useValueControl } from '@cloud-ru/ds-utils';
-import cn from 'classnames';
 import { useCallback, useMemo } from 'react';
 
 import { TEST_IDS } from '../../constants';
-import { useDesktopComfortClassName } from '../../hooks/useDesktopComfortClassName';
 import { useMobileLayout } from '../../hooks/useMobileLayout';
 import { headerLocale } from '../../locale';
 import { HeaderButton } from '../HeaderButton';
+import { renderListItemCustom, renderListItemGroupCustom } from '../ListCustom';
 import { useUserMenuItems } from './hooks/useUserMenuItems';
 import styles from './styles.module.scss';
 import { ThemeProps, UserProfileProps } from './types';
@@ -75,7 +74,6 @@ export function UserMenu({
 }: UserMenuProps) {
   const { t } = headerLocale.useTranslations();
   const isMobile = useMobileLayout();
-  const comfortClassName = useDesktopComfortClassName();
 
   const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
 
@@ -130,7 +128,7 @@ export function UserMenu({
     <Droplist
       open={open}
       onOpenChange={setOpen}
-      size='m'
+      size='s'
       selection={SELECTION_STUB}
       pinTop={pinTop}
       items={menuItems}
@@ -138,13 +136,15 @@ export function UserMenu({
       scroll={!isMobile}
       trigger='click'
       placement='bottom-end'
-      className={cn(styles.userMenuDroplist, comfortClassName)}
+      className={styles.userMenuDroplist}
       closeOnPopstate
       data-test-id={TEST_IDS.userMenu.root}
       label={t('user')}
       snapPoints={SNAP_POINTS_PRESET.full}
       withDividers={false}
       triggerClassName={styles.userMenuDroplistTrigger}
+      itemRender={renderListItemCustom}
+      groupItemRender={renderListItemGroupCustom}
     >
       {trigger}
     </Droplist>

package/src/components/UserMenu/hooks/useThemeItem.tsx

@@ -3,7 +3,6 @@ import { DroplistProps } from '@cloud-ru/ds-list';
 import { useCallback, useMemo } from 'react';
 
 import { TEST_IDS } from '../../../constants';
-import { useDesktopComfortClassName } from '../../../hooks/useDesktopComfortClassName';
 import { headerLocale } from '../../../locale';
 import { THEME_MODE, ThemeMode, ThemeProps } from '../types';
 
@@ -14,7 +13,6 @@ export function useThemeItem({
   onClose,
 }: ThemeProps & { isMobile?: boolean; onClose?(): void }): DroplistProps['items'][0] {
   const { t } = headerLocale.useTranslations();
-  const comfortClassName = useDesktopComfortClassName();
 
   const handleClick = useCallback(
     (themeMode: ThemeMode) => () => {
@@ -67,8 +65,7 @@ export function useThemeItem({
       beforeContent: <ThemeContrastSVG />,
       'data-test-id': TEST_IDS.userMenu.themeMode,
       items: themeModeOptions,
-      listClassName: comfortClassName,
     }),
-    [comfortClassName, t, themeModeOptions],
+    [t, themeModeOptions],
   );
 }