@cloud-ru/ds-list 2.1.5 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cloud-ru/ds-list",
-  "version": "2.1.5",
+  "version": "2.2.0",
   "description": "Списочный UI — компонент List для плоских/вложенных списков с выбором, группами и поиском и Droplist — тот же список в поповере.",
   "repository": {
     "type": "git",
@@ -49,21 +49,21 @@
     "classnames": "^2.5.1",
     "merge-refs": "^2.0.0",
     "@cloud-ru/ds-adaptive": "^1.0.1",
-    "@cloud-ru/ds-button": "^1.0.2",
     "@cloud-ru/ds-bottom-sheet": "^1.1.2",
+    "@cloud-ru/ds-button": "^1.0.2",
+    "@cloud-ru/ds-icons": "^1.2.0",
     "@cloud-ru/ds-divider": "^1.0.1",
     "@cloud-ru/ds-dropdown": "^1.0.9",
     "@cloud-ru/ds-drag-and-drop": "^1.1.1",
-    "@cloud-ru/ds-icons": "^1.2.0",
+    "@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-info-block": "^1.0.1",
+    "@cloud-ru/ds-search-private": "^1.0.8",
     "@cloud-ru/ds-portal-context": "^1.0.1",
     "@cloud-ru/ds-scroll": "^1.0.2",
-    "@cloud-ru/ds-search-private": "^1.0.8",
     "@cloud-ru/ds-toggles": "^1.1.4",
-    "@cloud-ru/ds-utils": "^1.1.0",
-    "@cloud-ru/ds-truncate-string": "^1.0.5"
+    "@cloud-ru/ds-truncate-string": "^1.0.5",
+    "@cloud-ru/ds-utils": "^1.1.0"
   },
   "peerDependencies": {
     "@cloud-ru/ds-locale": "^1.0.0"

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

@@ -1,7 +1,7 @@
 import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
 import { useCallback } from 'react';
 
-import { TEST_IDS } from '../../../constants';
+import { COLLAPSE_TOGGLE_ON, DEFAULT_COLLAPSE_TOGGLE_ON, TEST_IDS } from '../../../constants';
 import { CollapseBlockPrivate } from '../../../helperComponents';
 import {
   CollapseLevelContext,
@@ -17,7 +17,11 @@ type AccordionItemProps = Omit<FlattenAccordionItem, 'type'> & CommonFlattenProp
 
 export function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps) {
   const { level = 0 } = useCollapseLevelContext();
-  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
+  const {
+    openCollapseItems = [],
+    toggleOpenCollapseItem,
+    toggleOn = DEFAULT_COLLAPSE_TOGGLE_ON,
+  } = useCollapseContext();
 
   const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
@@ -39,11 +43,12 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
     (isSelectionMultiple && checkedProp),
   );
 
-  // Раскрытие переключает вся строка целиком: клик/Enter по телу и ArrowRight с клавиатуры.
   const handleToggle = useCallback(() => {
     toggleOpenCollapseItem?.(id ?? '');
   }, [id, toggleOpenCollapseItem]);
 
+  const isExpandIconTrigger = toggleOn === COLLAPSE_TOGGLE_ON.ExpandIcon;
+
   const itemsJSX = useRenderItems(items);
 
   return (
@@ -56,6 +61,7 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
           open={isOpen}
           expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
           onToggleExpand={handleToggle}
+          onExpandIconClick={isExpandIconTrigger ? handleToggle : undefined}
           isParentNode
           onOpenNestedList={handleToggle}
           checked={checked}

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

@@ -26,10 +26,16 @@ type AllBaseItemProps = FlattenBaseItem & {
   onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
   /**
    * Переключение раскрытия вложенного списка. Триггер — вся строка целиком (клик или
-   * Enter/Space), шеврон `groupIndicator` при этом остаётся неинтерактивным индикатором
-   * состояния.
+   * Enter/Space). Если передан `onExpandIconClick`, клик по строке раскрытие больше не
+   * переключает и остаётся только клавиатурным триггером.
    */
   onToggleExpand?(): void;
+  /**
+   * Переключение раскрытия кликом по шеврону `groupIndicator`. Наличие обработчика и есть
+   * режим: пока он не передан, шеврон — неинтерактивный индикатор состояния, а раскрытие
+   * переключает клик по всей строке (`onToggleExpand`).
+   */
+  onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
   /**
    * Слот ручки drag&drop (Figma `centeredWrapper`) — рендерится первым в строке, перед
    * маркером/чекбоксом. Интерактивность (обработчики `@dnd-kit`) и содержимое (иконка)
@@ -58,6 +64,7 @@ export function BaseItem({
   onSelect,
   onOpenNestedList,
   onToggleExpand,
+  onExpandIconClick,
   isParentNode,
   className,
   inactive,
@@ -108,9 +115,12 @@ export function BaseItem({
     onClick?.(e as MouseEvent<HTMLElement>);
 
     if (isParentNode) {
-      // Раскрытие вложенного списка триггерит вся строка целиком: шеврон `groupIndicator` —
-      // только индикатор состояния, собственной интерактивности у него нет.
-      onToggleExpand?.();
+      // Раскрытие вложенного списка триггерит вся строка целиком — кроме режима, где тогл
+      // отдан шеврону (`onExpandIconClick`): там клик по строке принадлежит потребителю
+      // (`onClick`, ссылка из `itemWrapRender`) и раскрытия не меняет.
+      if (!onExpandIconClick) {
+        onToggleExpand?.();
+      }
     } else if (interactive) {
       handleChange();
     }
@@ -152,6 +162,13 @@ export function BaseItem({
     }
   };
 
+  const handleExpandIconClick = (e: MouseEvent<HTMLElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    onExpandIconClick?.(e);
+  };
+
   const handleCheckboxClick = (e: MouseEvent) => {
     if (isParentNode) {
       e.stopPropagation();
@@ -249,10 +266,15 @@ export function BaseItem({
         )}
 
         {!switchProp && expandIcon && (
+          // Интерактивный шеврон не получает роль и фокус намеренно: клавиатурный путь идёт
+          // через строку, у неё же живёт `aria-expanded`. Лишний таб-стоп сломал бы порядок
+          // фокуса списка, а озвучивать AT недостижимый с клавиатуры элемент незачем.
           <span
             className={styles.groupIndicator}
             data-open={open || undefined}
+            data-interactive={Boolean(onExpandIconClick) || undefined}
             data-test-id={TEST_IDS.groupIndicator}
+            onClick={onExpandIconClick && handleExpandIconClick}
             aria-hidden
           >
             {expandIcon}

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

@@ -81,8 +81,9 @@ $sizes: 's', 'm', 'l';
 }
 
 .groupIndicator {
-  // Шеврон — индикатор состояния, а не кнопка: раскрытие переключает клик по всей строке.
-  // Своих hover/pressed/focus-состояний у него нет.
+  // По умолчанию шеврон — индикатор состояния, а не кнопка: раскрытие переключает клик по
+  // всей строке, поэтому клики шеврон не перехватывает. Своих hover/pressed/focus-состояний
+  // у него нет ни в одном из режимов.
   pointer-events: none;
 
   display: flex;
@@ -100,6 +101,13 @@ $sizes: 's', 'm', 'l';
     height: 100%;
   }
 
+  // Режим `collapse.toggleOn: 'expandIcon'`: тогл висит на шевроне, значит он должен
+  // принимать клики. Атрибут ставит `BaseItem` ровно тогда, когда пришёл `onExpandIconClick`.
+  &[data-interactive] {
+    pointer-events: auto;
+    cursor: pointer;
+  }
+
   // Раскрытая группа держит постоянную подложку `neutral/decorTransparent`
   // (варианты мастера `groupIndicatorS/Xs`, `open=true`).
   &[data-open] {

package/src/components/Lists/List/List.tsx

@@ -87,8 +87,8 @@ const ListImpl = forwardRef(
     };
 
     const collapseContextValue = useMemo(
-      () => ({ openCollapseItems, toggleOpenCollapseItem }),
-      [openCollapseItems, toggleOpenCollapseItem],
+      () => ({ openCollapseItems, toggleOpenCollapseItem, toggleOn: collapse.toggleOn }),
+      [openCollapseItems, toggleOpenCollapseItem, collapse.toggleOn],
     );
 
     const focusListContextValue = useMemo(

package/src/components/Lists/contexts/CollapseProvider.tsx

@@ -1,5 +1,6 @@
 import { createContext, useContext } from 'react';
 
+import { CollapseToggleOn } from '../../../types';
 import { ItemId } from '../../Items';
 
 export type CollapseLevelContextType = {
@@ -11,6 +12,7 @@ export const useCollapseLevelContext = () => useContext(CollapseLevelContext);
 export type CollapseContextType = {
   openCollapseItems?: ItemId[];
   toggleOpenCollapseItem?(id: ItemId): void;
+  toggleOn?: CollapseToggleOn;
 };
 export const CollapseContext = createContext<CollapseContextType>({});
 export const useCollapseContext = () => useContext(CollapseContext);
@@ -19,4 +21,13 @@ export type CollapseState = {
   value?: ItemId[];
   onChange?(value?: ItemId[]): void;
   defaultValue?: ItemId[];
+  /**
+   * Что переключает раскрытие вложенного списка:
+   * <br> - `item` — клик по всей строке (по умолчанию),
+   * <br> - `expandIcon` — только клик по шеврону; клик по строке остаётся потребителю
+   * (например, когда `itemWrapRender` оборачивает строку в ссылку).
+   *
+   * Клавиатура (`Enter` / `Space` / `ArrowRight` на строке) раскрывает группу в обоих режимах.
+   */
+  toggleOn?: CollapseToggleOn;
 };

package/src/constants.ts

@@ -21,6 +21,13 @@ export const MODE = {
   Multiple: 'multiple',
 } as const;
 
+export const COLLAPSE_TOGGLE_ON = {
+  Item: 'item',
+  ExpandIcon: 'expandIcon',
+} as const;
+
+export const DEFAULT_COLLAPSE_TOGGLE_ON = COLLAPSE_TOGGLE_ON.Item;
+
 export const ITEM_TYPE = {
   NextList: 'next-list',
   Collapse: 'collapse',

package/src/helperComponents/DesktopDroplist/DesktopDroplist.tsx

@@ -208,8 +208,8 @@ export function DesktopDroplist({
   ) : undefined;
 
   const collapseContextValue = useMemo(
-    () => ({ openCollapseItems, toggleOpenCollapseItem }),
-    [openCollapseItems, toggleOpenCollapseItem],
+    () => ({ openCollapseItems, toggleOpenCollapseItem, toggleOn: collapse.toggleOn }),
+    [openCollapseItems, toggleOpenCollapseItem, collapse.toggleOn],
   );
 
   const focusListContextValue = useMemo(

package/src/types.ts

@@ -2,7 +2,7 @@ import { ScrollProps as OriginalScrollProps } from '@cloud-ru/ds-scroll';
 import { ValueOf } from '@cloud-ru/ds-utils';
 import { ChangeEvent, KeyboardEvent, Ref } from 'react';
 
-import { ITEM_TYPE, MODE, SIZE } from './constants';
+import { COLLAPSE_TOGGLE_ON, ITEM_TYPE, MODE, SIZE } from './constants';
 
 /** Размер списка и его элементов */
 export type Size = ValueOf<typeof SIZE>;
@@ -13,6 +13,9 @@ export type Mode = ValueOf<typeof MODE>;
 /** Тип группового / составного элемента списка */
 export type ItemType = ValueOf<typeof ITEM_TYPE>;
 
+/** Триггер раскрытия вложенного списка у айтема `type: 'collapse'` */
+export type CollapseToggleOn = ValueOf<typeof COLLAPSE_TOGGLE_ON>;
+
 /** Настройки поисковой строки списка */
 export type SearchState = {
   placeholder?: string;