@cloud-ru/ds-list 2.0.1 → 2.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-list",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "description": "Списочный UI — компонент List для плоских/вложенных списков с выбором, группами и поиском и Droplist — тот же список в поповере.",
   "repository": {
     "type": "git",
@@ -48,22 +48,22 @@
     "@tanstack/react-virtual": "^3.14.8",
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
-    "@cloud-ru/ds-drag-and-drop": "^1.1.1",
+    "@cloud-ru/ds-button": "^1.0.1",
     "@cloud-ru/ds-divider": "^1.0.1",
-    "@cloud-ru/ds-adaptive": "^1.0.1",
+    "@cloud-ru/ds-drag-and-drop": "^1.1.1",
+    "@cloud-ru/ds-dropdown": "^1.0.4",
     "@cloud-ru/ds-info-block": "^1.0.1",
-    "@cloud-ru/ds-materials": "^1.0.1",
-    "@cloud-ru/ds-dropdown": "^1.0.3",
     "@cloud-ru/ds-loader": "^1.0.1",
+    "@cloud-ru/ds-bottom-sheet": "^1.0.3",
+    "@cloud-ru/ds-adaptive": "^1.0.1",
     "@cloud-ru/ds-portal-context": "^1.0.1",
+    "@cloud-ru/ds-materials": "^1.0.1",
     "@cloud-ru/ds-icons": "^1.0.2",
-    "@cloud-ru/ds-bottom-sheet": "^1.0.3",
-    "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-search-private": "^1.0.3",
-    "@cloud-ru/ds-toggles": "^1.1.2",
     "@cloud-ru/ds-truncate-string": "^1.0.3",
+    "@cloud-ru/ds-scroll": "^1.0.2",
     "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-button": "^1.0.1"
+    "@cloud-ru/ds-search-private": "^1.0.3",
+    "@cloud-ru/ds-toggles": "^1.1.2"
   },
   "peerDependencies": {
     "@cloud-ru/ds-locale": "^1.0.0"

package/src/components/Items/BaseItem/BaseItem.tsx

@@ -179,6 +179,7 @@ export function BaseItem({
   const itemJSX = (
     <div
       className={cn(commonStyles.itemWrapper, styles.innerWrapper, className)}
+      data-size={size}
       data-inactive={inactive || undefined}
       data-disabled={disabled || undefined}
       data-variant={mode || undefined}
@@ -227,18 +228,24 @@ export function BaseItem({
           </div>
         )}
 
-        {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
-        {contentNode}
-        {afterContent && <div className={styles.afterContent}>{afterContent}</div>}
+        {/* contentWrapper мастера: иконочные слоты и текст лежат в одном узле без gap —
+            их разделяют только горизонтальные поля textContent. */}
+        <div className={styles.contentWrapper}>
+          {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
+          {contentNode}
+          {afterContent && <div className={styles.afterContent}>{afterContent}</div>}
+        </div>
 
         {switchProp && interactive && (
-          <Switch
-            size={TOGGLE_SIZE_MAP[size]}
-            disabled={disabled}
-            checked={isChecked}
-            data-test-id={TEST_IDS.baseItemSwitch}
-            showIcon={showSwitchIcon}
-          />
+          <span className={styles.switchWrapper}>
+            <Switch
+              size={TOGGLE_SIZE_MAP[size]}
+              disabled={disabled}
+              checked={isChecked}
+              data-test-id={TEST_IDS.baseItemSwitch}
+              showIcon={showSwitchIcon}
+            />
+          </span>
         )}
 
         {!switchProp && expandIcon && (

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

@@ -185,6 +185,37 @@ $level: var(--level, 0);
         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');
+
+        // Иконка в слоте ограничена icon-сеткой размера. Через max-*, потому что у svg
+        // из @cloud-ru/ds-icons размер приходит инлайновым style и обычный width его не перебивает.
+        // Произвольный контент (counter, tag) правило не задевает — адресуется только прямой svg.
+        > svg {
+          max-width: base.simple-var(icons.$iconSizeMap, $size);
+          max-height: base.simple-var(icons.$iconSizeMap, $size);
+        }
+      }
+
+      // Switch выравнивается по центру первой строки текста тем же centeredWrapper-паддингом,
+      // что иконочные слоты: строка выровнена по flex-start, иначе контрол липнет к верхней кромке.
+      .switchWrapper {
+        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'
+        );
       }
 
       .groupIndicator {
@@ -256,10 +287,14 @@ $level: var(--level, 0);
     }
 
     &[data-disabled] {
-      .markerContainer::before {
-        // В мастере выключенный маркер — сплошной `neutral/accent`, а не полупрозрачный
-        // текстовый токен: полоса остаётся читаемой на любом фоне.
-        background-color: base.$sn-theme-color-neutral-accent;
+      .markerContainer {
+        opacity: base.$sn-theme-effect-opacity-disabled;
+
+        &::before {
+          // В мастере выключенный маркер — сплошной `neutral/accent`, а не полупрозрачный
+          // текстовый токен: полоса остаётся читаемой на любом фоне.
+          background-color: base.$sn-theme-color-neutral-accent;
+        }
       }
     }
   }
@@ -271,3 +306,21 @@ $level: var(--level, 0);
   flex-shrink: 1;
   box-sizing: border-box;
 }
+
+// contentWrapper мастера: собственного зазора не имеет — иконочные слоты отделены от текста
+// горизонтальными полями textContent, поэтому gap здесь не задаётся.
+.switchWrapper {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  box-sizing: content-box;
+}
+
+.contentWrapper {
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  align-items: flex-start;
+
+  min-width: 0;
+}

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

@@ -28,7 +28,7 @@ export function SearchItem({ search, itemRef, onNavKeyDown, onFocus, inTopBar }:
   const { firstItemId, size = 'm' } = useNewListContext();
 
   const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    // Поиск — текстовый input: гасим только Up/Down (навигация по списку), горизонтальные
+    // Поиск — текстовый input: перехватываются только Up/Down (навигация по списку), горизонтальные
     // стрелки оставляем каретке.
     preventScrollOnVerticalArrows(e);
 

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

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

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

@@ -24,6 +24,14 @@ $sizes: 's', 'm', 'l';
   // data-state переключается в BaseItem.tsx: emptyNeutralOnBackground ↔ activatedOnBackground.
   @include m.has-state-layer-as-child(#{stateLayer});
 
+  // Радиус дублируется здесь, а не задан только на `.listItem`: подложка state-layer
+  // отрисовывается на этом узле и без радиуса выходит за скругление строки.
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      border-radius: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'border-radius');
+    }
+  }
+
   &[data-disabled],
   &:disabled {
     cursor: not-allowed;
@@ -54,9 +62,9 @@ $sizes: 's', 'm', 'l';
     }
   }
 
-  // Миксин has-state-layer-as-child гасит hover/active state-layer только для
+  // Миксин has-state-layer-as-child отключает hover/active state-layer только для
   // data-disabled/data-loading. data-inactive — list-специфичный «неинтерактивный» флаг,
-  // миксин про него не знает → глушим state-layer и для него (перебиваем по специфичности).
+  // миксин про него не знает → state-layer отключается и для него (перебивается по специфичности).
   &[data-inactive] {
     &:hover,
     &:active {

package/src/components/Items/types.ts

@@ -40,7 +40,7 @@ export type BaseItem = WithSupportProps<{
   id?: ItemId;
   /** Флаг неактивности элемента */
   disabled?: boolean;
-  /** Скрыть элемент из списка (не рендерится и выпадает из навигации) */
+  /** Скрыть элемент из списка (не рендерится и исключается из навигации) */
   hidden?: boolean;
   /** Ссылка на DOM-элемент айтема */
   itemRef?: RefObject<HTMLElement>;
@@ -49,7 +49,7 @@ export type BaseItem = WithSupportProps<{
   /**
    * Флаг отображения отключения реакции на любое css состояние (hover/focus и тд)
    * <br>
-   * Так же элемент пропадает из навигации с клавиатуры, и не может быть выбран (selection)
+   * Также элемент исключается из навигации с клавиатуры и не может быть выбран (selection)
    */
   inactive?: boolean;
   /**
@@ -174,11 +174,7 @@ export type FlattenSimpleItem = FlattenBaseItem & CommonFlattenProps;
 export type FlattenItem =
   | FlattenBaseItem
   | ((
-      | FlattenNextListItem
-      | FlattenGroupListItem
-      | FlattenAccordionItem
-      | FlattenGroupSelectListItem
-      | FlattenSimpleItem
+      FlattenNextListItem | FlattenGroupListItem | FlattenAccordionItem | FlattenGroupSelectListItem | FlattenSimpleItem
     ) &
       CommonFlattenProps);
 

package/src/components/Items/utils.ts

@@ -134,7 +134,7 @@ export function kindFlattenItems({ items, prefix, parentId, sortable }: KindFlat
         key: itemId,
         originalId: itemId,
         id: autoId,
-        // `inactive` элемент выпадает из клавиатурной навигации наравне с `disabled`
+        // `inactive` элемент исключается из клавиатурной навигации наравне с `disabled`
         // (см. JSDoc `BaseItem.inactive`). Гейтит только nav/bulk-select через
         // `extractActiveItems`; рендерный `disabled` в `flattenItems` остаётся исходным.
         disabled: item.disabled || item.inactive,

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

@@ -127,7 +127,7 @@ export const ListPrivate = forwardRef(
       useSensor(TouchSensor, {}),
       useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }),
     );
-    // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия живёт в портале
+    // Id перетаскиваемой строки — для рендера её копии в `DragOverlay`. Копия рендерится в портале
     // над страницей и не режется `overflow: hidden` контейнера `List` (сама строка на время
     // переноса уступает место — её слот пустеет). `null`, когда перетаскивание не идёт.
     const [activeDragId, setActiveDragId] = useState<ItemId | null>(null);

package/src/components/Lists/ListPrivate/styles.module.scss

@@ -62,12 +62,13 @@ $loader-height: (
   gap: popupPrivate.$sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-gap;
 
   box-sizing: border-box;
-  padding: 0 popupPrivate.$sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal
-    popupPrivate.$sn-popupPrivate-anatomy-dropdown-header-gap;
+  padding: 0 popupPrivate.$sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal;
 
+  // В мастере (popupDropdownHeader) шапка — вертикальный стек, в котором divider такой же
+  // элемент, как titleWrapper: `header-gap` отделяет заголовок от линии, а под линией отступа
+  // нет — контейнер dropdown размещает шапку и список без зазора.
   &[data-divider] {
-    margin-bottom: popupPrivate.$sn-popupPrivate-anatomy-dropdown-header-gap;
-    padding-bottom: popupPrivate.$sn-popupPrivate-anatomy-dropdown-header-headlineWrapper-paddingHorizontal;
+    padding-bottom: popupPrivate.$sn-popupPrivate-anatomy-dropdown-header-gap;
     border-bottom: base.$sn-primitive-strokeWeight-strokeRegular solid base.$sn-theme-color-available-borderColor;
   }
 }

package/src/components/Lists/hooks.ts

@@ -54,7 +54,7 @@ type UseListItemsModelProps = {
  * Единая модель данных списка для `List` и `Droplist`: collapse-состояние,
  * плоские карты айтемов (`flattenItems` / `focusFlattenItems`) и производный
  * порядок навигации (`ids` / `expandedIds`). Оба компонента собирают одну и ту же
- * структуру, поэтому она живёт в одном хуке — расхождение между списком и дроплистом
+ * структуру, поэтому она собрана в одном хуке — расхождение между списком и дроплистом
  * физически невозможно.
  */
 export function useListItemsModel({
@@ -217,7 +217,7 @@ export function useNewKeyboardNavigation<T extends HTMLElement>({
 
   const handleListKeyDownFactory = useCallback(
     (ids: ItemId[], expandedIds: ItemId[]) => (e: KeyboardEvent<T>) => {
-      // Стрелки навигации по списку гасим централизованно — иначе нативное поведение скроллит
+      // Стрелки навигации по списку перехватываются централизованно — иначе нативное поведение скроллит
       // страницу (элементы — кнопки/li, не текст, поэтому безопасны все четыре стрелки).
       preventScrollOnArrowKeys(e);
 

package/src/helperComponents/DesktopDroplist/DesktopDroplist.tsx

@@ -145,7 +145,7 @@ export function DesktopDroplist({
 
   const onKeyDown = useCallback(
     (e: KeyboardEvent<HTMLElement>, cb?: (e: KeyboardEvent<HTMLElement>) => void) => {
-      // Up/Down открывают/закрывают дроплист — гасим их нативный скролл страницы. Только
+      // Up/Down открывают/закрывают дроплист — их нативный скролл страницы подавляется. Только
       // вертикальные: триггером может быть текстовое поле, где Left/Right двигают каретку.
       preventScrollOnVerticalArrows(e);
 

package/src/helperComponents/ItemContent/ItemContent.tsx

@@ -49,32 +49,34 @@ export function ItemContent({
 
   return (
     <div
-      className={cn(styles.content, className)}
+      className={cn(styles.textWrapper, className)}
       {...extractSupportProps(rest)}
       data-size={size ?? 's'}
       data-disabled={disabled || undefined}
     >
-      <div className={styles.headline}>
-        <div className={styles.label}>
-          <TruncateString
-            variant={truncate.variant}
-            text={String(label)}
-            maxLines={truncate.label}
-            data-test-id={TEST_IDS.baseItemLabel}
-          />
+      <div className={styles.textContent}>
+        <div className={styles.headline}>
+          <div className={styles.label}>
+            <TruncateString
+              variant={truncate.variant}
+              text={String(label)}
+              maxLines={truncate.label}
+              data-test-id={TEST_IDS.baseItemLabel}
+            />
+          </div>
+          {caption && <span className={styles.caption}>{caption}</span>}
         </div>
-        {caption && <span className={styles.caption}>{caption}</span>}
-      </div>
 
-      {description && (
-        <div className={styles.description}>
-          <TruncateString
-            text={description}
-            maxLines={truncate.description}
-            data-test-id={TEST_IDS.baseItemDescription}
-          />
-        </div>
-      )}
+        {description && (
+          <div className={styles.description}>
+            <TruncateString
+              text={description}
+              maxLines={truncate.description}
+              data-test-id={TEST_IDS.baseItemDescription}
+            />
+          </div>
+        )}
+      </div>
     </div>
   );
 }

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

@@ -48,10 +48,11 @@ $description-size-map: (
   color: base.$sn-theme-color-available-version-textSecondary;
 }
 
-.content {
+// Структура повторяет мастер: contentWrapper → textWrapper (вертикальные поля) →
+// textContent (горизонтальные поля и зазор headline ↔ description).
+.textWrapper {
   overflow: hidden;
   display: flex;
-  flex-direction: column;
   flex-grow: 1;
   flex-shrink: 1;
 
@@ -59,14 +60,15 @@ $description-size-map: (
 
   @each $size in $sizes {
     &[data-size='#{$size}'] {
-
-      // textContent.gap — вертикальный зазор headline ↔ description. s/m = 0, l = 2.
-      gap: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'gap');
-      // textWrapper: vertical padding вокруг строки контента, textContent: horizontal padding.
-      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');
+      padding-top: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'padding-top');
+      padding-bottom: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'padding-bottom');
+
+      .textContent {
+        // textContent.gap — вертикальный зазор headline ↔ description. s/m = 0, l = 2.
+        gap: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'gap');
+        padding-right: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'padding-right');
+        padding-left: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'padding-left');
+      }
 
       .headline {
         gap: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'contentWrapper', 'textWrapper', 'textContent', 'headline', 'gap');
@@ -90,11 +92,19 @@ $description-size-map: (
     }
   }
 
+  // В мастере выключенное состояние — общая opacity на contentWrapper, без смены цвета текста:
+  // так различие label/caption/description сохраняется и в disabled.
   &[data-disabled] {
-    .label,
-    .description,
-    .caption {
-      color: base.$sn-theme-color-available-version-textDisabled;
-    }
+    opacity: base.$sn-theme-effect-opacity-disabled;
   }
 }
+
+.textContent {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  flex-shrink: 1;
+
+  box-sizing: border-box;
+}

package/src/helperComponents/Separator/Separator.tsx

@@ -7,7 +7,6 @@ import { useCollapseLevelContext, useNewListContext } from '../../components/Lis
 import { TEST_IDS } from '../../constants';
 import { listLocale } from '../../locale';
 import { stopPropagation } from '../../utils';
-import { SELECT_BUTTON_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
 export type SeparatorProps = {
@@ -49,11 +48,11 @@ export function Separator({
     const { onClick, checked, itemRef, label } = selectButton;
 
     return (
-      <span className={styles.selectButton} data-size={size} data-weight={(divider && groupVariant) || undefined}>
+      <span className={styles.selectButton} data-size={size}>
         <Button
           view='function'
           appearance='neutral'
-          size={SELECT_BUTTON_SIZE_MAP[size]}
+          size={size}
           tabIndex={0}
           data-test-id={TEST_IDS.bulkSelectButton}
           onClick={(e: MouseEvent<HTMLElement>) => {
@@ -67,7 +66,7 @@ export function Separator({
         />
       </span>
     );
-  }, [divider, groupVariant, selectButton, size, t]);
+  }, [selectButton, size, t]);
 
   if (label) {
     return (
@@ -78,27 +77,29 @@ export function Separator({
         data-level-more-one={level > 1 || undefined}
         style={{ '--level': level } as CSSProperties}
       >
-        {beforeContent && (
-          <span className={styles.beforeContent} aria-hidden>
-            {beforeContent}
-          </span>
-        )}
-
-        <span className={styles.label} data-group-variant={groupVariant}>
-          <TruncateString variant={truncate?.variant} text={label} maxLines={1} />
-        </span>
+        <div className={styles.contentWrapper}>
+          {beforeContent && (
+            <span className={styles.centeredWrapper} aria-hidden>
+              {beforeContent}
+            </span>
+          )}
 
-        <div className={styles.labelEnd}>
-          {selectButtonJSX}
+          <div className={styles.textWrapper}>
+            <div className={styles.textContent}>
+              <span className={styles.headline} data-group-variant={groupVariant}>
+                <TruncateString variant={truncate?.variant} text={label} maxLines={1} />
+              </span>
+            </div>
 
-          {/* Figma weight-ось дивайдера = @cloud-ru/ds-divider `variant`: subtitle → regular, subtitleTertiary → thin (легаси light). */}
-          {divider && (
-            <Divider
-              className={styles.divider}
-              variant={groupVariant === 'subtitle' ? VARIANT.Regular : VARIANT.Thin}
-            />
-          )}
+            {selectButtonJSX}
+          </div>
         </div>
+
+        {/* Figma weight-ось дивайдера = @cloud-ru/ds-divider `variant`: subtitle → regular, subtitleTertiary → thin (легаси light).
+            Линия подчёркивает строку заголовка целиком, поэтому вынесена из потока. */}
+        {divider && (
+          <Divider className={styles.divider} variant={groupVariant === 'subtitle' ? VARIANT.Regular : VARIANT.Thin} />
+        )}
       </div>
     );
   }