@cloud-ru/ds-list 1.1.4 → 2.0.0

package/package.json

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

package/src/components/Items/AccordionItem/AccordionItem.tsx

@@ -39,20 +39,13 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
     (isSelectionMultiple && checkedProp),
   );
 
-  const handleKeyDown = useCallback(() => {
+  // Раскрытие переключает вся строка целиком: клик/Enter по телу и ArrowRight с клавиатуры.
+  const handleToggle = useCallback(() => {
     toggleOpenCollapseItem?.(id ?? '');
   }, [id, toggleOpenCollapseItem]);
 
   const itemsJSX = useRenderItems(items);
 
-  // Раскрытие привязано к явной кнопке-триггеру `groupIndicator` (шеврон справа) и
-  // ТОЛЬКО переключает collapse — `option.onClick` сюда не зовём, иначе у потребителя,
-  // который вешает на onClick собственный toggle, выходит двойное переключение.
-  // Клик по телу строки (выбор/навигация) идёт через `option.onClick` в BaseItem.
-  const handleExpandIconClick = () => {
-    toggleOpenCollapseItem?.(id ?? '');
-  };
-
   return (
     <CollapseBlockPrivate
       header={
@@ -62,9 +55,9 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
           disabled={disabled}
           open={isOpen}
           expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
-          onExpandIconClick={handleExpandIconClick}
+          onToggleExpand={handleToggle}
           isParentNode
-          onOpenNestedList={handleKeyDown}
+          onOpenNestedList={handleToggle}
           checked={checked}
           indeterminate={indeterminate}
           onSelect={!disabled ? handleOnSelect : undefined}

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

@@ -25,11 +25,11 @@ type AllBaseItemProps = FlattenBaseItem & {
   isParentNode?: boolean;
   onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
   /**
-   * Клик по явной кнопке-триггеру `groupIndicator` (шеврон справа), открывающей/закрывающей
-   * вложенный список. Если передан — шеврон рендерится как отдельная интерактивная кнопка
-   * со своим state-layer'ом, а клик по телу строки больше не переключает раскрытие.
+   * Переключение раскрытия вложенного списка. Триггер — вся строка целиком (клик или
+   * Enter/Space), шеврон `groupIndicator` при этом остаётся неинтерактивным индикатором
+   * состояния.
    */
-  onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
+  onToggleExpand?(): void;
   /**
    * Слот ручки drag&drop (Figma `centeredWrapper`) — рендерится первым в строке, перед
    * маркером/чекбоксом. Интерактивность (обработчики `@dnd-kit`) и содержимое (иконка)
@@ -57,7 +57,7 @@ export function BaseItem({
   checked: checkedProp,
   onSelect,
   onOpenNestedList,
-  onExpandIconClick,
+  onToggleExpand,
   isParentNode,
   className,
   inactive,
@@ -107,7 +107,11 @@ export function BaseItem({
     // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
     onClick?.(e as MouseEvent<HTMLElement>);
 
-    if (interactive && !isParentNode) {
+    if (isParentNode) {
+      // Раскрытие вложенного списка триггерит вся строка целиком: шеврон `groupIndicator` —
+      // только индикатор состояния, собственной интерактивности у него нет.
+      onToggleExpand?.();
+    } else if (interactive) {
       handleChange();
     }
 
@@ -129,15 +133,20 @@ export function BaseItem({
     }
 
     if (e.key === 'Enter' || e.key === ' ') {
-      if (isSelectionMultiple && isParentNode && onSelect) {
-        onSelect();
+      if (isParentNode) {
+        // В multiple-режиме Enter/Space на группе выбирает всю ветку, иначе — раскрывает её.
+        if (isSelectionMultiple && onSelect) {
+          onSelect();
+        } else {
+          onToggleExpand?.();
+        }
+      } else {
+        // Повторяем клик по элементу: `handleItemClick` сам вызывает `handleChange` /
+        // `closeDroplist`. Отдельный `handleChange` здесь не нужен — иначе в multiple-режиме
+        // выбор переключался бы дважды (toggle + откат) и Enter не менял бы состояние.
+        handleItemClick(e);
       }
 
-      // Повторяем клик по элементу: `handleItemClick` сам вызывает `handleChange` /
-      // `closeDroplist`. Отдельный `handleChange` здесь не нужен — иначе в multiple-режиме
-      // выбор переключался бы дважды (toggle + откат) и Enter не менял бы состояние.
-      !isParentNode && handleItemClick(e);
-
       e.stopPropagation();
       e.preventDefault();
     }
@@ -149,18 +158,6 @@ export function BaseItem({
     }
   };
 
-  const handleExpandIconClick = (e: MouseEvent<HTMLElement>) => {
-    if (disabled) {
-      return;
-    }
-
-    // Триггер раскрытия изолирован от клика по строке: всплытие останавливаем,
-    // чтобы клик по шеврону не активировал выбор/навигацию пункта.
-    e.stopPropagation();
-    e.preventDefault();
-    onExpandIconClick?.(e);
-  };
-
   const props = extractSupportProps(rest);
 
   let contentNode: ReactNode;
@@ -201,6 +198,7 @@ export function BaseItem({
         data-non-pointer={(inactive && !onClick) || undefined}
         data-variant={mode || undefined}
         data-open={open || undefined}
+        aria-expanded={isParentNode ? Boolean(open) : undefined}
         onKeyDown={handleItemKeyDown}
         onFocus={handleItemFocus}
         style={{ '--level': level }}
@@ -243,26 +241,16 @@ export function BaseItem({
           />
         )}
 
-        {!switchProp &&
-          expandIcon &&
-          (onExpandIconClick ? (
-            <button
-              type='button'
-              className={styles.groupIndicator}
-              data-size={size}
-              data-open={open || undefined}
-              data-test-id={TEST_IDS.groupIndicator}
-              tabIndex={-1}
-              disabled={disabled}
-              onClick={handleExpandIconClick}
-              onMouseDown={e => e.stopPropagation()}
-            >
-              <span className={styles.groupIndicatorState} aria-hidden />
-              {expandIcon}
-            </button>
-          ) : (
-            <span className={styles.expandableIcon}>{expandIcon}</span>
-          ))}
+        {!switchProp && expandIcon && (
+          <span
+            className={styles.groupIndicator}
+            data-open={open || undefined}
+            data-test-id={TEST_IDS.groupIndicator}
+            aria-hidden
+          >
+            {expandIcon}
+          </span>
+        )}
       </li>
     </div>
   );

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

@@ -80,82 +80,35 @@ $sizes: 's', 'm', 'l';
   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;
+  // Шеврон — индикатор состояния, а не кнопка: раскрытие переключает клик по всей строке.
+  // Своих hover/pressed/focus-состояний у него нет.
+  pointer-events: none;
 
   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;
+  fill: currentcolor;
 
   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);
+    width: 100%;
+    height: 100%;
   }
 
-  // В раскрытом состоянии мастер меняет скругление с 8 на 2 — кнопка становится
-  // «квадратнее» под подложкой нажатия (варианты `groupIndicatorS/Xs`, `open=true`).
+  // Раскрытая группа держит постоянную подложку `neutral/decorTransparent`
+  // (варианты мастера `groupIndicatorS/Xs`, `open=true`).
   &[data-open] {
     border-radius: base.$sn-primitive-dimension-2;
     color: base.$sn-theme-color-available-version-textMain;
+    background: base.$sn-theme-color-neutral-decorTransparent;
   }
 }
 
-.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;
 
@@ -234,17 +187,12 @@ $level: var(--level, 0);
         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 сдвигает чеврон на центр
+        // Строка выровнена по flex-start; centeredWrapper.padding-top сдвигает шеврон на центр
         // первой строки текста (как у afterContent/beforeContent). margin (а не padding) —
-        // чтобы квадрат state-layer'а остался icon-сеткой, а не растянулся по вертикали.
+        // чтобы подложка раскрытого состояния осталась icon-сеткой, а не растянулась по вертикали.
         margin-top: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'centeredWrapper', 'padding-top');
       }
 
@@ -280,12 +228,7 @@ $level: var(--level, 0);
 
 .innerWrapper {
   &[data-disabled] {
-    .expandableIcon {
-      color: base.$sn-theme-color-available-version-textDisabled;
-    }
-
     .groupIndicator {
-      cursor: not-allowed;
       color: base.$sn-theme-color-available-version-textDisabled;
     }
 

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

@@ -149,7 +149,7 @@ export function NextListItem({
         indeterminate={indeterminate}
         checked={checked}
         onOpenNestedList={openSublist}
-        onExpandIconClick={openSublist}
+        onToggleExpand={openSublist}
         onSelect={handleOnSelect}
       />
     </Dropdown>