@cloud-ru/ds-list 2.1.5 → 2.1.6-preview-8b48fca0.0

package/README.md

@@ -252,6 +252,78 @@ export function GroupsCollapsible() {
 }
 ```
 
+#### Раскрытие только по шеврону
+
+collapse.toggleOn: 'expandIcon' — строка-ссылка ведёт на роут, раскрытие переключает шеврон.
+
+```tsx
+import { List } from '@cloud-ru/ds-list';
+import { ReactNode, useState } from 'react';
+
+import styles from './styles.module.scss';
+
+export function CollapseExpandIcon() {
+  const [route, setRoute] = useState('/guides');
+
+  // Так строку подключают к роутеру: `next/link` и аналоги отменяют свой переход, если клик уже
+  // обработали ниже по дереву (`e.defaultPrevented`). В режиме `toggleOn: 'expandIcon'` шеврон
+  // как раз гасит клик, поэтому раскрытие группы не уводит на роут.
+  const asLink = (href: string) =>
+    function wrapItem(node: ReactNode) {
+      return (
+        <a
+          href={href}
+          className={styles.link}
+          onClick={e => {
+            if (e.defaultPrevented) {
+              return;
+            }
+
+            e.preventDefault();
+            setRoute(href);
+          }}
+        >
+          {node}
+        </a>
+      );
+    };
+
+  return (
+    <div className={styles.wrapper}>
+      <div className={styles.box}>
+        <List
+          size='s'
+          collapse={{ defaultValue: ['guides'], toggleOn: 'expandIcon' }}
+          items={[
+            {
+              type: 'collapse',
+              id: 'guides',
+              content: { label: 'Руководства' },
+              itemWrapRender: asLink('/guides'),
+              items: [
+                { id: 'start', content: { label: 'Быстрый старт' }, itemWrapRender: asLink('/guides/start') },
+                { id: 'faq', content: { label: 'FAQ' }, itemWrapRender: asLink('/guides/faq') },
+              ],
+            },
+            {
+              type: 'collapse',
+              id: 'components',
+              content: { label: 'Компоненты' },
+              itemWrapRender: asLink('/components'),
+              items: [
+                { id: 'button', content: { label: 'Button' }, itemWrapRender: asLink('/components/button') },
+                { id: 'list', content: { label: 'List' }, itemWrapRender: asLink('/components/list') },
+              ],
+            },
+          ]}
+        />
+      </div>
+      <span>Текущий роут: {route}</span>
+    </div>
+  );
+}
+```
+
 #### Три уровня вложенности
 
 Группы внутри групп — подходит для каталогов, файловых деревьев.
@@ -551,7 +623,7 @@ export function ListItemWrap() {
 ### Item types
 
 - `BaseItem` — обычный элемент с `content` / `beforeContent` / `afterContent`; опционально `switch: true` для тумблер-презентации выбора.
-- `{ type: 'collapse', items }` — группа, раскрывается кликом по заголовку; управление — через `collapse`.
+- `{ type: 'collapse', items }` — группа с раскрытием; управление — через `collapse`, триггер раскрытия — через `collapse.toggleOn`.
 - `{ type: 'next-list', items, placement }` — раскрытие в соседний popover (для каскадных меню).
 - `{ type: 'group', items, groupVariant }` / `{ type: 'group-select', items, groupVariant }` — визуальная группа с label, `groupVariant` (`subtitle` / `subtitleTertiary`), опциональным `divider` и «выбрать всё» (`group-select`).
 
@@ -564,6 +636,17 @@ export function ListItemWrap() {
 - **Uncontrolled** — передавайте `defaultValue`. Компонент хранит state сам, пригодно для форм/настроек, где значения потом читаются через `onChange`.
 - **Controlled** — `value` + `onChange`. Нужен, когда state живёт в URL / query / внешнем сторе, или когда требуется программно менять выбор/раскрытие.
 
+### Триггер раскрытия группы
+
+`collapse.toggleOn` задаёт, что переключает раскрытие `type: 'collapse'`-группы мышью:
+
+- `item` (по умолчанию) — клик по всей строке группы.
+- `expandIcon` — только клик по шеврону; клик по остальной части строки остаётся потребителю.
+
+`expandIcon` нужен, когда строка уже несёт собственное действие: `itemWrapRender` оборачивает её в ссылку роутера или на ней висит свой `onClick`. В режиме `item` такой клик делал бы две вещи разом — переходил по роуту и раскрывал группу.
+
+Клавиатура от режима не зависит: `Enter` / `Space` и `ArrowRight` на строке группы раскрывают её в обоих случаях. Шеврон в цепочку табуляции не входит.
+
 ### Виртуализация
 
 - Включайте `virtualized` при размере `items` от ~1000 элементов.
@@ -938,6 +1021,7 @@ export function DroplistWithHeader() {
 |------|------|---------|-------------|
 | `defaultValue` | `ItemId` | — |  |
 | `onChange` | `((value?: ItemId[]) => void) \| undefined` | — |  |
+| `toggleOn` | `"expandIcon"` \| `"item"` | — | Что переключает раскрытие вложенного списка: <br/> <br> - `item` — клик по всей строке (по умолчанию), <br/> <br> - `expandIcon` — только клик по шеврону; клик по строке остаётся потребителю <br/> (например, когда `itemWrapRender` оборачивает строку в ссылку). <br/> Клавиатура (`Enter` / `Space` / `ArrowRight` на строке) раскрывает группу в обоих режимах. |
 | `value` | `ItemId` | — |  |
 
 **CommonGroupItem**

package/dist/cjs/components/Items/AccordionItem/AccordionItem.js

@@ -11,7 +11,7 @@ const BaseItem_1 = require("../BaseItem");
 const hooks_1 = require("../hooks");
 function AccordionItem({ id, disabled, allChildIds, items, ...option }) {
     const { level = 0 } = (0, contexts_1.useCollapseLevelContext)();
-    const { openCollapseItems = [], toggleOpenCollapseItem } = (0, contexts_1.useCollapseContext)();
+    const { openCollapseItems = [], toggleOpenCollapseItem, toggleOn = constants_1.DEFAULT_COLLAPSE_TOGGLE_ON, } = (0, contexts_1.useCollapseContext)();
     const { value, isSelectionSingle, isSelectionMultiple } = (0, contexts_1.useSelectionContext)();
     const { indeterminate, handleOnSelect, checked: checkedProp, } = (0, hooks_1.useGroupItemSelection)({
         items,
@@ -22,10 +22,10 @@ function AccordionItem({ id, disabled, allChildIds, items, ...option }) {
     const isOpen = Boolean(openCollapseItems.includes(id ?? ''));
     const checked = Boolean((indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
         (isSelectionMultiple && checkedProp));
-    // Раскрытие переключает вся строка целиком: клик/Enter по телу и ArrowRight с клавиатуры.
     const handleToggle = (0, react_1.useCallback)(() => {
         toggleOpenCollapseItem?.(id ?? '');
     }, [id, toggleOpenCollapseItem]);
+    const isExpandIconTrigger = toggleOn === constants_1.COLLAPSE_TOGGLE_ON.ExpandIcon;
     const itemsJSX = (0, hooks_1.useRenderItems)(items);
-    return ((0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockPrivate, { header: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...option, id: id, disabled: disabled, open: isOpen, expandIcon: isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), onToggleExpand: handleToggle, isParentNode: true, onOpenNestedList: handleToggle, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined }), expanded: isOpen, "data-test-id": `${constants_1.TEST_IDS.accordionItem}-${id}`, children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
+    return ((0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockPrivate, { header: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...option, id: id, disabled: disabled, open: isOpen, expandIcon: isOpen ? (0, jsx_runtime_1.jsx)(system_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(system_1.ChevronDownSVG, {}), onToggleExpand: handleToggle, onExpandIconClick: isExpandIconTrigger ? handleToggle : undefined, isParentNode: true, onOpenNestedList: handleToggle, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined }), expanded: isOpen, "data-test-id": `${constants_1.TEST_IDS.accordionItem}-${id}`, children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
 }

package/dist/cjs/components/Items/BaseItem/BaseItem.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode } from 'react';
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { FlattenBaseItem } from '../types';
 type AllBaseItemProps = FlattenBaseItem & {
     expandIcon?: ReactNode;
@@ -9,10 +9,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`) и содержимое (иконка)
@@ -20,5 +26,5 @@ type AllBaseItemProps = FlattenBaseItem & {
      */
     dragHandle?: ReactNode;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/cjs/components/Items/BaseItem/BaseItem.js

@@ -15,7 +15,7 @@ const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const utils_2 = require("../utils");
 const constants_2 = require("./constants");
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
-function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }) {
+function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }) {
     const interactive = !inactive;
     const { size = constants_1.DEFAULT_SIZE, marker, contentRender, firstItemId, focusFlattenItems } = (0, contexts_1.useNewListContext)();
     const { level = 0 } = (0, contexts_1.useCollapseLevelContext)();
@@ -51,9 +51,12 @@ function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown,
         // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
         onClick?.(e);
         if (isParentNode) {
-            // Раскрытие вложенного списка триггерит вся строка целиком: шеврон `groupIndicator` —
-            // только индикатор состояния, собственной интерактивности у него нет.
-            onToggleExpand?.();
+            // Раскрытие вложенного списка триггерит вся строка целиком — кроме режима, где тогл
+            // отдан шеврону (`onExpandIconClick`): там клик по строке принадлежит потребителю
+            // (`onClick`, ссылка из `itemWrapRender`) и раскрытия не меняет.
+            if (!onExpandIconClick) {
+                onToggleExpand?.();
+            }
         }
         else if (interactive) {
             handleChange();
@@ -90,6 +93,11 @@ function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown,
             e.preventDefault();
         }
     };
+    const handleExpandIconClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onExpandIconClick?.(e);
+    };
     const handleCheckboxClick = (e) => {
         if (isParentNode) {
             e.stopPropagation();
@@ -111,7 +119,11 @@ function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown,
     const stateLayerState = isSelectionSingle && isChecked && !switchProp && !isParentNode
         ? 'activatedOnBackground'
         : 'emptyNeutralOnBackground';
-    const itemJSX = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, styles_module_scss_2.default.innerWrapper, className), "data-size": size, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || `${constants_1.TEST_IDS.baseItem}_${id}`, ref: itemRef, className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1, "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 }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [dragHandle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.dragHandle, children: dragHandle }), !switchProp && isSelectionSingle && marker && !isParentNode && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.markerContainer, "data-test-id": constants_1.TEST_IDS.baseItemMarker })), !switchProp && isSelectionMultiple && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.checkbox, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemCheckbox, onClick: handleCheckboxClick, indeterminate: indeterminate }) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.contentWrapper, children: [beforeContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.beforeContent, children: beforeContent }), contentNode, afterContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.afterContent, children: afterContent })] }), switchProp && interactive && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.switchWrapper, children: (0, jsx_runtime_1.jsx)(toggles_1.Switch, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemSwitch, showIcon: showSwitchIcon }) })), !switchProp && expandIcon && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.groupIndicator, "data-open": open || undefined, "data-test-id": constants_1.TEST_IDS.groupIndicator, "aria-hidden": true, children: expandIcon }))] })] }));
+    const itemJSX = ((0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.itemWrapper, styles_module_scss_2.default.innerWrapper, className), "data-size": size, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), (0, jsx_runtime_1.jsxs)("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || `${constants_1.TEST_IDS.baseItem}_${id}`, ref: itemRef, className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1, "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 }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [dragHandle && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.dragHandle, children: dragHandle }), !switchProp && isSelectionSingle && marker && !isParentNode && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.markerContainer, "data-test-id": constants_1.TEST_IDS.baseItemMarker })), !switchProp && isSelectionMultiple && interactive && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.checkbox, children: (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemCheckbox, onClick: handleCheckboxClick, indeterminate: indeterminate }) })), (0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_2.default.contentWrapper, children: [beforeContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.beforeContent, children: beforeContent }), contentNode, afterContent && (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_2.default.afterContent, children: afterContent })] }), switchProp && interactive && ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.switchWrapper, children: (0, jsx_runtime_1.jsx)(toggles_1.Switch, { size: constants_2.TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": constants_1.TEST_IDS.baseItemSwitch, showIcon: showSwitchIcon }) })), !switchProp && expandIcon && (
+                    // Интерактивный шеврон не получает роль и фокус намеренно: клавиатурный путь идёт
+                    // через строку, у неё же живёт `aria-expanded`. Лишний таб-стоп сломал бы порядок
+                    // фокуса списка, а озвучивать AT недостижимый с клавиатуры элемент незачем.
+                    (0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.groupIndicator, "data-open": open || undefined, "data-interactive": Boolean(onExpandIconClick) || undefined, "data-test-id": constants_1.TEST_IDS.groupIndicator, onClick: onExpandIconClick && handleExpandIconClick, "aria-hidden": true, children: expandIcon }))] })] }));
     if (!itemWrapRender) {
         return itemJSX;
     }

package/dist/cjs/components/Items/BaseItem/styles.module.css

@@ -69,6 +69,10 @@
   width:100%;
   height:100%;
 }
+.groupIndicator[data-interactive]{
+  pointer-events:auto;
+  cursor:pointer;
+}
 .groupIndicator[data-open]{
   border-radius:var(--sn-primitive-dimension-2, 2px);
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));

package/dist/cjs/components/Lists/List/List.js

@@ -45,7 +45,7 @@ const ListImpl = (0, react_1.forwardRef)(({ items: itemsProp = [], search, pinBo
     const handleOnFocus = () => {
         resetActiveItemId();
     };
-    const collapseContextValue = (0, react_1.useMemo)(() => ({ openCollapseItems, toggleOpenCollapseItem }), [openCollapseItems, toggleOpenCollapseItem]);
+    const collapseContextValue = (0, react_1.useMemo)(() => ({ openCollapseItems, toggleOpenCollapseItem, toggleOn: collapse.toggleOn }), [openCollapseItems, toggleOpenCollapseItem, collapse.toggleOn]);
     const focusListContextValue = (0, react_1.useMemo)(() => ({ activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId }), [activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId]);
     return ((0, jsx_runtime_1.jsx)(contexts_1.NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, virtualized: props.virtualized, children: (0, jsx_runtime_1.jsx)(contexts_1.SelectionProvider, { ...selection, children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, { value: collapseContextValue, children: (0, jsx_runtime_1.jsx)(contexts_1.FocusListContext.Provider, { value: focusListContextValue, children: (0, jsx_runtime_1.jsxs)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.wrapper, className), "data-active": isActive || undefined, children: [(0, jsx_runtime_1.jsx)(ListPrivate_1.ListPrivate, { ...props, items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, searchItem: searchItem, ref: (0, merge_refs_1.default)(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: hasListInFocusChain ? tabIndex : undefined, search: search, nested: false, onDragEnd: onDragEnd, sortableIds: sortableIds }), hasListInFocusChain && (0, jsx_runtime_1.jsx)(helperComponents_1.HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) }) }) }));
 });

package/dist/cjs/components/Lists/contexts/CollapseProvider.d.ts

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

package/dist/cjs/constants.d.ts

@@ -17,6 +17,11 @@ export declare const MODE: {
     readonly Single: "single";
     readonly Multiple: "multiple";
 };
+export declare const COLLAPSE_TOGGLE_ON: {
+    readonly Item: "item";
+    readonly ExpandIcon: "expandIcon";
+};
+export declare const DEFAULT_COLLAPSE_TOGGLE_ON: "item";
 export declare const ITEM_TYPE: {
     readonly NextList: "next-list";
     readonly Collapse: "collapse";

package/dist/cjs/constants.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.TEST_IDS = exports.ITEM_TYPE = exports.MODE = exports.DEFAULT_SIZE = exports.SIZE = exports.ITEM_PREFIXES = void 0;
+exports.TEST_IDS = exports.ITEM_TYPE = exports.DEFAULT_COLLAPSE_TOGGLE_ON = exports.COLLAPSE_TOGGLE_ON = exports.MODE = exports.DEFAULT_SIZE = exports.SIZE = exports.ITEM_PREFIXES = void 0;
 exports.ITEM_PREFIXES = {
     default: '~main',
     pinTop: '~pinTop',
@@ -20,6 +20,11 @@ exports.MODE = {
     Single: 'single',
     Multiple: 'multiple',
 };
+exports.COLLAPSE_TOGGLE_ON = {
+    Item: 'item',
+    ExpandIcon: 'expandIcon',
+};
+exports.DEFAULT_COLLAPSE_TOGGLE_ON = exports.COLLAPSE_TOGGLE_ON.Item;
 exports.ITEM_TYPE = {
     NextList: 'next-list',
     Collapse: 'collapse',

package/dist/cjs/helperComponents/DesktopDroplist/DesktopDroplist.js

@@ -110,7 +110,7 @@ function DesktopDroplist({ items: itemsProp, search, pinBottom: pinBottomProp =
     const footerNode = footer ? (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     (0, jsx_runtime_1.jsx)("div", { onKeyDown: handleListKeyDown, children: footer })) : undefined;
-    const collapseContextValue = (0, react_1.useMemo)(() => ({ openCollapseItems, toggleOpenCollapseItem }), [openCollapseItems, toggleOpenCollapseItem]);
+    const collapseContextValue = (0, react_1.useMemo)(() => ({ openCollapseItems, toggleOpenCollapseItem, toggleOn: collapse.toggleOn }), [openCollapseItems, toggleOpenCollapseItem, collapse.toggleOn]);
     const focusListContextValue = (0, react_1.useMemo)(() => ({ activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId }), [activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId]);
     const closeDroplist = (0, react_1.useCallback)(() => {
         setOpen(false);

package/dist/cjs/style.css

@@ -69,6 +69,10 @@
   width:100%;
   height:100%;
 }
+.groupIndicator[data-interactive]{
+  pointer-events:auto;
+  cursor:pointer;
+}
 .groupIndicator[data-open]{
   border-radius:var(--sn-primitive-dimension-2, 2px);
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));

package/dist/cjs/types.d.ts

@@ -1,13 +1,15 @@
 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>;
 /** Режим выбора элементов списка */
 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;

package/dist/esm/components/Items/AccordionItem/AccordionItem.js

@@ -1,14 +1,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/ds-icons/interface/system';
 import { useCallback } from 'react';
-import { TEST_IDS } from '../../../constants.js';
+import { COLLAPSE_TOGGLE_ON, DEFAULT_COLLAPSE_TOGGLE_ON, TEST_IDS } from '../../../constants.js';
 import { CollapseBlockPrivate } from '../../../helperComponents/index.js';
 import { CollapseLevelContext, useCollapseContext, useCollapseLevelContext, useSelectionContext, } from '../../Lists/contexts/index.js';
 import { BaseItem } from '../BaseItem/index.js';
 import { useGroupItemSelection, useRenderItems } from '../hooks.js';
 export function AccordionItem({ id, disabled, allChildIds, items, ...option }) {
     const { level = 0 } = useCollapseLevelContext();
-    const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
+    const { openCollapseItems = [], toggleOpenCollapseItem, toggleOn = DEFAULT_COLLAPSE_TOGGLE_ON, } = useCollapseContext();
     const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     const { indeterminate, handleOnSelect, checked: checkedProp, } = useGroupItemSelection({
         items,
@@ -19,10 +19,10 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }) {
     const isOpen = Boolean(openCollapseItems.includes(id ?? ''));
     const checked = Boolean((indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
         (isSelectionMultiple && checkedProp));
-    // Раскрытие переключает вся строка целиком: клик/Enter по телу и ArrowRight с клавиатуры.
     const handleToggle = useCallback(() => {
         toggleOpenCollapseItem?.(id ?? '');
     }, [id, toggleOpenCollapseItem]);
+    const isExpandIconTrigger = toggleOn === COLLAPSE_TOGGLE_ON.ExpandIcon;
     const itemsJSX = useRenderItems(items);
-    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, { ...option, id: id, disabled: disabled, open: isOpen, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onToggleExpand: handleToggle, isParentNode: true, onOpenNestedList: handleToggle, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined }), expanded: isOpen, "data-test-id": `${TEST_IDS.accordionItem}-${id}`, children: _jsx(CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
+    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, { ...option, id: id, disabled: disabled, open: isOpen, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onToggleExpand: handleToggle, onExpandIconClick: isExpandIconTrigger ? handleToggle : undefined, isParentNode: true, onOpenNestedList: handleToggle, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined }), expanded: isOpen, "data-test-id": `${TEST_IDS.accordionItem}-${id}`, children: _jsx(CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
 }

package/dist/esm/components/Items/BaseItem/BaseItem.d.ts

@@ -1,4 +1,4 @@
-import { KeyboardEvent, ReactNode } from 'react';
+import { KeyboardEvent, MouseEvent, ReactNode } from 'react';
 import { FlattenBaseItem } from '../types.js';
 type AllBaseItemProps = FlattenBaseItem & {
     expandIcon?: ReactNode;
@@ -9,10 +9,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`) и содержимое (иконка)
@@ -20,5 +26,5 @@ type AllBaseItemProps = FlattenBaseItem & {
      */
     dragHandle?: ReactNode;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

package/dist/esm/components/Items/BaseItem/BaseItem.js

@@ -9,7 +9,7 @@ import commonStyles from '../styles.module.css';
 import { isContentItem, isPrimitiveContent } from '../utils.js';
 import { TOGGLE_SIZE_MAP } from './constants.js';
 import styles from './styles.module.css';
-export function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }) {
+export function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, onToggleExpand, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }) {
     const interactive = !inactive;
     const { size = DEFAULT_SIZE, marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
     const { level = 0 } = useCollapseLevelContext();
@@ -45,9 +45,12 @@ export function BaseItem({ beforeContent, afterContent, content, onClick, onMous
         // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
         onClick?.(e);
         if (isParentNode) {
-            // Раскрытие вложенного списка триггерит вся строка целиком: шеврон `groupIndicator` —
-            // только индикатор состояния, собственной интерактивности у него нет.
-            onToggleExpand?.();
+            // Раскрытие вложенного списка триггерит вся строка целиком — кроме режима, где тогл
+            // отдан шеврону (`onExpandIconClick`): там клик по строке принадлежит потребителю
+            // (`onClick`, ссылка из `itemWrapRender`) и раскрытия не меняет.
+            if (!onExpandIconClick) {
+                onToggleExpand?.();
+            }
         }
         else if (interactive) {
             handleChange();
@@ -84,6 +87,11 @@ export function BaseItem({ beforeContent, afterContent, content, onClick, onMous
             e.preventDefault();
         }
     };
+    const handleExpandIconClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onExpandIconClick?.(e);
+    };
     const handleCheckboxClick = (e) => {
         if (isParentNode) {
             e.stopPropagation();
@@ -105,7 +113,11 @@ export function BaseItem({ beforeContent, afterContent, content, onClick, onMous
     const stateLayerState = isSelectionSingle && isChecked && !switchProp && !isParentNode
         ? 'activatedOnBackground'
         : 'emptyNeutralOnBackground';
-    const itemJSX = (_jsxs("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-size": size, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: [_jsx("span", { className: commonStyles.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || `${TEST_IDS.baseItem}_${id}`, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1, "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 }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [dragHandle && _jsx("div", { className: styles.dragHandle, children: dragHandle }), !switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": TEST_IDS.baseItemMarker })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: TOGGLE_SIZE_MAP[size], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": TEST_IDS.baseItemCheckbox, onClick: handleCheckboxClick, indeterminate: indeterminate }) })), _jsxs("div", { className: styles.contentWrapper, children: [beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), contentNode, afterContent && _jsx("div", { className: styles.afterContent, children: afterContent })] }), switchProp && interactive && (_jsx("span", { className: styles.switchWrapper, children: _jsx(Switch, { size: TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": TEST_IDS.baseItemSwitch, showIcon: showSwitchIcon }) })), !switchProp && expandIcon && (_jsx("span", { className: styles.groupIndicator, "data-open": open || undefined, "data-test-id": TEST_IDS.groupIndicator, "aria-hidden": true, children: expandIcon }))] })] }));
+    const itemJSX = (_jsxs("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-size": size, "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined, children: [_jsx("span", { className: commonStyles.stateLayer, "aria-hidden": true, "data-state": stateLayerState }), _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || `${TEST_IDS.baseItem}_${id}`, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: firstItemId && id === focusFlattenItems[firstItemId]?.originalId ? 0 : -1, "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 }, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [dragHandle && _jsx("div", { className: styles.dragHandle, children: dragHandle }), !switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": TEST_IDS.baseItemMarker })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: TOGGLE_SIZE_MAP[size], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": TEST_IDS.baseItemCheckbox, onClick: handleCheckboxClick, indeterminate: indeterminate }) })), _jsxs("div", { className: styles.contentWrapper, children: [beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), contentNode, afterContent && _jsx("div", { className: styles.afterContent, children: afterContent })] }), switchProp && interactive && (_jsx("span", { className: styles.switchWrapper, children: _jsx(Switch, { size: TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": TEST_IDS.baseItemSwitch, showIcon: showSwitchIcon }) })), !switchProp && expandIcon && (
+                    // Интерактивный шеврон не получает роль и фокус намеренно: клавиатурный путь идёт
+                    // через строку, у неё же живёт `aria-expanded`. Лишний таб-стоп сломал бы порядок
+                    // фокуса списка, а озвучивать AT недостижимый с клавиатуры элемент незачем.
+                    _jsx("span", { className: styles.groupIndicator, "data-open": open || undefined, "data-interactive": Boolean(onExpandIconClick) || undefined, "data-test-id": TEST_IDS.groupIndicator, onClick: onExpandIconClick && handleExpandIconClick, "aria-hidden": true, children: expandIcon }))] })] }));
     if (!itemWrapRender) {
         return itemJSX;
     }

package/dist/esm/components/Items/BaseItem/styles.module.css

@@ -69,6 +69,10 @@
   width:100%;
   height:100%;
 }
+.groupIndicator[data-interactive]{
+  pointer-events:auto;
+  cursor:pointer;
+}
 .groupIndicator[data-open]{
   border-radius:var(--sn-primitive-dimension-2, 2px);
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));

package/dist/esm/components/Lists/List/List.js

@@ -39,7 +39,7 @@ const ListImpl = forwardRef(({ items: itemsProp = [], search, pinBottom: pinBott
     const handleOnFocus = () => {
         resetActiveItemId();
     };
-    const collapseContextValue = useMemo(() => ({ openCollapseItems, toggleOpenCollapseItem }), [openCollapseItems, toggleOpenCollapseItem]);
+    const collapseContextValue = useMemo(() => ({ openCollapseItems, toggleOpenCollapseItem, toggleOn: collapse.toggleOn }), [openCollapseItems, toggleOpenCollapseItem, collapse.toggleOn]);
     const focusListContextValue = useMemo(() => ({ activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId }), [activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId]);
     return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, virtualized: props.virtualized, children: _jsx(SelectionProvider, { ...selection, children: _jsx(CollapseContext.Provider, { value: collapseContextValue, children: _jsx(FocusListContext.Provider, { value: focusListContextValue, children: _jsxs("div", { className: cn(styles.wrapper, className), "data-active": isActive || undefined, children: [_jsx(ListPrivate, { ...props, items: memorizedItems.items.focusCloseChildIds, pinTop: memorizedItems.pinTop.focusCloseChildIds, pinBottom: memorizedItems.pinBottom.focusCloseChildIds, searchItem: searchItem, ref: mergeRefs(ref, listRef), onFocus: handleOnFocus, onKeyDown: mergedHandlerKeyDown, tabIndex: hasListInFocusChain ? tabIndex : undefined, search: search, nested: false, onDragEnd: onDragEnd, sortableIds: sortableIds }), hasListInFocusChain && _jsx(HiddenTabButton, { ref: btnRef, listRef: listRef, tabIndex: tabIndex })] }) }) }) }) }));
 });

package/dist/esm/components/Lists/contexts/CollapseProvider.d.ts

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

package/dist/esm/constants.d.ts

@@ -17,6 +17,11 @@ export declare const MODE: {
     readonly Single: "single";
     readonly Multiple: "multiple";
 };
+export declare const COLLAPSE_TOGGLE_ON: {
+    readonly Item: "item";
+    readonly ExpandIcon: "expandIcon";
+};
+export declare const DEFAULT_COLLAPSE_TOGGLE_ON: "item";
 export declare const ITEM_TYPE: {
     readonly NextList: "next-list";
     readonly Collapse: "collapse";

package/dist/esm/constants.js

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

package/dist/esm/helperComponents/DesktopDroplist/DesktopDroplist.js

@@ -104,7 +104,7 @@ export function DesktopDroplist({ items: itemsProp, search, pinBottom: pinBottom
     const footerNode = footer ? (
     // eslint-disable-next-line jsx-a11y/no-static-element-interactions
     _jsx("div", { onKeyDown: handleListKeyDown, children: footer })) : undefined;
-    const collapseContextValue = useMemo(() => ({ openCollapseItems, toggleOpenCollapseItem }), [openCollapseItems, toggleOpenCollapseItem]);
+    const collapseContextValue = useMemo(() => ({ openCollapseItems, toggleOpenCollapseItem, toggleOn: collapse.toggleOn }), [openCollapseItems, toggleOpenCollapseItem, collapse.toggleOn]);
     const focusListContextValue = useMemo(() => ({ activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId }), [activeItemId, handleListKeyDownFactory, forceUpdateActiveItemId]);
     const closeDroplist = useCallback(() => {
         setOpen(false);

package/dist/esm/style.css

@@ -69,6 +69,10 @@
   width:100%;
   height:100%;
 }
+.groupIndicator[data-interactive]{
+  pointer-events:auto;
+  cursor:pointer;
+}
 .groupIndicator[data-open]{
   border-radius:var(--sn-primitive-dimension-2, 2px);
   color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));

package/dist/esm/types.d.ts

@@ -1,13 +1,15 @@
 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.js';
+import { COLLAPSE_TOGGLE_ON, ITEM_TYPE, MODE, SIZE } from './constants.js';
 /** Размер списка и его элементов */
 export type Size = ValueOf<typeof SIZE>;
 /** Режим выбора элементов списка */
 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;