@cloud-ru/ds-list 1.1.4-preview-5ffe9ec9.0 → 1.1.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-list",
-  "version": "1.1.4-preview-5ffe9ec9.0",
+  "version": "1.1.4",
   "description": "Списочный UI — компонент List для плоских/вложенных списков с выбором, группами и поиском и Droplist — тот же список в поповере.",
   "repository": {
     "type": "git",
@@ -48,24 +48,24 @@
     "@tanstack/react-virtual": "^3.14.8",
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
-    "@cloud-ru/ds-bottom-sheet": "1.0.1",
-    "@cloud-ru/ds-adaptive": "1.0.1",
-    "@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.1",
-    "@cloud-ru/ds-icons": "1.0.1",
-    "@cloud-ru/ds-loader": "1.0.1",
-    "@cloud-ru/ds-info-block": "1.0.1",
-    "@cloud-ru/ds-portal-context": "1.0.1",
-    "@cloud-ru/ds-materials": "1.0.1",
-    "@cloud-ru/ds-search-private": "1.0.2",
-    "@cloud-ru/ds-toggles": "1.1.1",
-    "@cloud-ru/ds-scroll": "1.0.1",
-    "@cloud-ru/ds-truncate-string": "1.0.1",
-    "@cloud-ru/ds-utils": "1.1.0"
+    "@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-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-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-toggles": "^1.1.1",
+    "@cloud-ru/ds-utils": "^1.1.0"
   },
   "peerDependencies": {
-    "@cloud-ru/ds-locale": "1.0.0"
+    "@cloud-ru/ds-locale": "^1.0.0"
   }
 }

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

@@ -39,13 +39,20 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
     (isSelectionMultiple && checkedProp),
   );
 
-  // Раскрытие переключает вся строка целиком: клик/Enter по телу и ArrowRight с клавиатуры.
-  const handleToggle = useCallback(() => {
+  const handleKeyDown = 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={
@@ -55,9 +62,9 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
           disabled={disabled}
           open={isOpen}
           expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
-          onToggleExpand={handleToggle}
+          onExpandIconClick={handleExpandIconClick}
           isParentNode
-          onOpenNestedList={handleToggle}
+          onOpenNestedList={handleKeyDown}
           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;
   /**
-   * Переключение раскрытия вложенного списка. Триггер — вся строка целиком (клик или
-   * Enter/Space), шеврон `groupIndicator` при этом остаётся неинтерактивным индикатором
-   * состояния.
+   * Клик по явной кнопке-триггеру `groupIndicator` (шеврон справа), открывающей/закрывающей
+   * вложенный список. Если передан — шеврон рендерится как отдельная интерактивная кнопка
+   * со своим state-layer'ом, а клик по телу строки больше не переключает раскрытие.
    */
-  onToggleExpand?(): void;
+  onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
   /**
    * Слот ручки drag&drop (Figma `centeredWrapper`) — рендерится первым в строке, перед
    * маркером/чекбоксом. Интерактивность (обработчики `@dnd-kit`) и содержимое (иконка)
@@ -57,7 +57,7 @@ export function BaseItem({
   checked: checkedProp,
   onSelect,
   onOpenNestedList,
-  onToggleExpand,
+  onExpandIconClick,
   isParentNode,
   className,
   inactive,
@@ -107,11 +107,7 @@ export function BaseItem({
     // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
     onClick?.(e as MouseEvent<HTMLElement>);
 
-    if (isParentNode) {
-      // Раскрытие вложенного списка триггерит вся строка целиком: шеврон `groupIndicator` —
-      // только индикатор состояния, собственной интерактивности у него нет.
-      onToggleExpand?.();
-    } else if (interactive) {
+    if (interactive && !isParentNode) {
       handleChange();
     }
 
@@ -133,20 +129,15 @@ export function BaseItem({
     }
 
     if (e.key === 'Enter' || e.key === ' ') {
-      if (isParentNode) {
-        // В multiple-режиме Enter/Space на группе выбирает всю ветку, иначе — раскрывает её.
-        if (isSelectionMultiple && onSelect) {
-          onSelect();
-        } else {
-          onToggleExpand?.();
-        }
-      } else {
-        // Повторяем клик по элементу: `handleItemClick` сам вызывает `handleChange` /
-        // `closeDroplist`. Отдельный `handleChange` здесь не нужен — иначе в multiple-режиме
-        // выбор переключался бы дважды (toggle + откат) и Enter не менял бы состояние.
-        handleItemClick(e);
+      if (isSelectionMultiple && isParentNode && onSelect) {
+        onSelect();
       }
 
+      // Повторяем клик по элементу: `handleItemClick` сам вызывает `handleChange` /
+      // `closeDroplist`. Отдельный `handleChange` здесь не нужен — иначе в multiple-режиме
+      // выбор переключался бы дважды (toggle + откат) и Enter не менял бы состояние.
+      !isParentNode && handleItemClick(e);
+
       e.stopPropagation();
       e.preventDefault();
     }
@@ -158,6 +149,18 @@ export function BaseItem({
     }
   };
 
+  const handleExpandIconClick = (e: MouseEvent<HTMLElement>) => {
+    if (disabled) {
+      return;
+    }
+
+    // Триггер раскрытия изолирован от клика по строке: всплытие останавливаем,
+    // чтобы клик по шеврону не активировал выбор/навигацию пункта.
+    e.stopPropagation();
+    e.preventDefault();
+    onExpandIconClick?.(e);
+  };
+
   const props = extractSupportProps(rest);
 
   let contentNode: ReactNode;
@@ -198,7 +201,6 @@ 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 }}
@@ -241,16 +243,26 @@ export function BaseItem({
           />
         )}
 
-        {!switchProp && expandIcon && (
-          <span
-            className={styles.groupIndicator}
-            data-open={open || undefined}
-            data-test-id={TEST_IDS.groupIndicator}
-            aria-hidden
-          >
-            {expandIcon}
-          </span>
-        )}
+        {!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>
+          ))}
       </li>
     </div>
   );

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

@@ -80,35 +80,82 @@ $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 {
-  // Шеврон — индикатор состояния, а не кнопка: раскрытие переключает клик по всей строке.
-  // Своих hover/pressed/focus-состояний у него нет.
-  pointer-events: none;
+  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;
 
-  fill: currentcolor;
+  appearance: none;
+  background: transparent;
+  outline: none;
 
   svg {
-    width: 100%;
-    height: 100%;
+    position: relative;
+    z-index: 1;
+    width: base.$sn-density-size-icon-xs;
+    height: base.$sn-density-size-icon-xs;
   }
 
-  // Раскрытая группа держит постоянную подложку `neutral/decorTransparent`
-  // (варианты мастера `groupIndicatorS/Xs`, `open=true`).
+  &: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;
-    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;
 
@@ -187,12 +234,17 @@ $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) —
-        // чтобы подложка раскрытого состояния осталась icon-сеткой, а не растянулась по вертикали.
+        // чтобы квадрат state-layer'а остался icon-сеткой, а не растянулся по вертикали.
         margin-top: base.simple-var(list.$list, 'anatomy', 'size', $size, 'listItem', 'centeredWrapper', 'padding-top');
       }
 
@@ -228,7 +280,12 @@ $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}
-        onToggleExpand={openSublist}
+        onExpandIconClick={openSublist}
         onSelect={handleOnSelect}
       />
     </Dropdown>