@cloud-ru/ds-list 1.1.4 → 2.0.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 2.0.0 (2026-08-25)
+
+### BREAKING CHANGES
+
+- **FF-8948:** toggle collapse item by clicking the whole row, chevron is a state indicator ([40ceab4](https://github.com/cloud-ru-tech/snack-v2/commit/40ceab47b8075c866a592ebf02f37b773f534fe1))
+
 ## 1.1.4 (2026-08-25)
 
 **Note:** Version bump only for package @ds/list

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

@@ -22,16 +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));
-    const handleKeyDown = (0, react_1.useCallback)(() => {
+    // Раскрытие переключает вся строка целиком: клик/Enter по телу и ArrowRight с клавиатуры.
+    const handleToggle = (0, react_1.useCallback)(() => {
         toggleOpenCollapseItem?.(id ?? '');
     }, [id, toggleOpenCollapseItem]);
     const itemsJSX = (0, hooks_1.useRenderItems)(items);
-    // Раскрытие привязано к явной кнопке-триггеру `groupIndicator` (шеврон справа) и
-    // ТОЛЬКО переключает collapse — `option.onClick` сюда не зовём, иначе у потребителя,
-    // который вешает на onClick собственный toggle, выходит двойное переключение.
-    // Клик по телу строки (выбор/навигация) идёт через `option.onClick` в BaseItem.
-    const handleExpandIconClick = () => {
-        toggleOpenCollapseItem?.(id ?? '');
-    };
-    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, {}), onExpandIconClick: handleExpandIconClick, isParentNode: true, onOpenNestedList: handleKeyDown, 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, 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, MouseEvent, ReactNode } from 'react';
+import { KeyboardEvent, ReactNode } from 'react';
 import { FlattenBaseItem } from '../types';
 type AllBaseItemProps = FlattenBaseItem & {
     expandIcon?: ReactNode;
@@ -8,11 +8,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`) и содержимое (иконка)
@@ -20,5 +20,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, onExpandIconClick, 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, 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, onExpandIconClick, 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, 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)();
@@ -50,7 +50,12 @@ function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown,
         // `onClick` в публичном API типизирован под `MouseEvent` (это семантически клик по
         // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
         onClick?.(e);
-        if (interactive && !isParentNode) {
+        if (isParentNode) {
+            // Раскрытие вложенного списка триггерит вся строка целиком: шеврон `groupIndicator` —
+            // только индикатор состояния, собственной интерактивности у него нет.
+            onToggleExpand?.();
+        }
+        else if (interactive) {
             handleChange();
         }
         if (!isSelectionMultiple && closeDroplistOnItemClick) {
@@ -66,13 +71,21 @@ function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown,
             return;
         }
         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();
         }
@@ -82,16 +95,6 @@ function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown,
             e.stopPropagation();
         }
     };
-    const handleExpandIconClick = (e) => {
-        if (disabled) {
-            return;
-        }
-        // Триггер раскрытия изолирован от клика по строке: всплытие останавливаем,
-        // чтобы клик по шеврону не активировал выбор/навигацию пункта.
-        e.stopPropagation();
-        e.preventDefault();
-        onExpandIconClick?.(e);
-    };
     const props = (0, utils_1.extractSupportProps)(rest);
     let contentNode;
     if (content && (0, utils_2.isContentItem)(content)) {
@@ -108,9 +111,7 @@ 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-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, 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 }) })), 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)(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 &&
-                        (onExpandIconClick ? ((0, jsx_runtime_1.jsxs)("button", { type: 'button', className: styles_module_scss_2.default.groupIndicator, "data-size": size, "data-open": open || undefined, "data-test-id": constants_1.TEST_IDS.groupIndicator, tabIndex: -1, disabled: disabled, onClick: handleExpandIconClick, onMouseDown: e => e.stopPropagation(), children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.groupIndicatorState, "aria-hidden": true }), expandIcon] })) : ((0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_2.default.expandableIcon, 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-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 }) })), 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)(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 }))] })] }));
     if (!itemWrapRender) {
         return itemJSX;
     }

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

@@ -56,62 +56,22 @@
   color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
 }
 
-.expandableIcon{
-  display:flex;
-  align-items:center;
-  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
-  fill:currentcolor;
-}
-
 .groupIndicator{
-  cursor:pointer;
-  position:relative;
+  pointer-events:none;
   display:flex;
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  padding:0;
-  border:none;
-  border-radius:var(--sn-primitive-dimension-8, 8px);
   color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  background:transparent;
-  outline:none;
+  fill:currentcolor;
 }
 .groupIndicator svg{
-  position:relative;
-  z-index:1;
-  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-}
-.groupIndicator:focus-visible{
-  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
-  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+  width:100%;
+  height:100%;
 }
 .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));
-}
-
-.groupIndicatorState{
-  pointer-events:none;
-  position:absolute;
-  inset:0;
-  border-radius:inherit;
-  background:transparent;
-}
-
-.groupIndicator:hover > .groupIndicatorState{
-  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
-}
-
-.groupIndicator:active > .groupIndicatorState{
-  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
-}
-
-.groupIndicator[data-open] > .groupIndicatorState{
   background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
 
@@ -157,10 +117,6 @@
   padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
   padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
 }
-.droplistItem[data-size=s] .expandableIcon{
-  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-}
 .droplistItem[data-size=s] .groupIndicator{
   width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -204,10 +160,6 @@
   padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
   padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
 }
-.droplistItem[data-size=m] .expandableIcon{
-  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-}
 .droplistItem[data-size=m] .groupIndicator{
   width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -251,10 +203,6 @@
   padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
   padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
 }
-.droplistItem[data-size=l] .expandableIcon{
-  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-}
 .droplistItem[data-size=l] .groupIndicator{
   width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -280,11 +228,7 @@
   cursor:inherit;
 }
 
-.innerWrapper[data-disabled] .expandableIcon{
-  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
-}
 .innerWrapper[data-disabled] .groupIndicator{
-  cursor:not-allowed;
   color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
 }
 .innerWrapper[data-disabled] .beforeContent,

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

@@ -67,5 +67,5 @@ function NextListItem({ items, placement = 'right-start', id, scroll, scrollRef,
             }, scrollRef: scrollRef, limitedScrollHeight: true, untouchableScrollbars: untouchableScrollbars, loading: loading, dataError: dataError, dataFiltered: dataFiltered }), trigger: 'hover', open: isOpen || open, onOpenChange: value => {
             setOpen(value);
             onSublistOpenChanged?.(value, id);
-        }, placement: placement, widthStrategy: 'auto', children: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...option, disabled: disabled, open: isOpen || open, expandIcon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: openSublist, onExpandIconClick: openSublist, onSelect: handleOnSelect }) }));
+        }, placement: placement, widthStrategy: 'auto', children: (0, jsx_runtime_1.jsx)(BaseItem_1.BaseItem, { ...option, disabled: disabled, open: isOpen || open, expandIcon: (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {}), id: id, isParentNode: true, indeterminate: indeterminate, checked: checked, onOpenNestedList: openSublist, onToggleExpand: openSublist, onSelect: handleOnSelect }) }));
 }

package/dist/cjs/style.css

@@ -56,62 +56,22 @@
   color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
 }
 
-.expandableIcon{
-  display:flex;
-  align-items:center;
-  color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
-  fill:currentcolor;
-}
-
 .groupIndicator{
-  cursor:pointer;
-  position:relative;
+  pointer-events:none;
   display:flex;
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  padding:0;
-  border:none;
-  border-radius:var(--sn-primitive-dimension-8, 8px);
   color:var(--sn-theme-color-available-version-textSecondary, var(--sn-brand-color-text-version-secondary, rgba(65, 66, 78, 0.8)));
-  -webkit-appearance:none;
-     -moz-appearance:none;
-          appearance:none;
-  background:transparent;
-  outline:none;
+  fill:currentcolor;
 }
 .groupIndicator svg{
-  position:relative;
-  z-index:1;
-  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-}
-.groupIndicator:focus-visible{
-  outline:var(--sn-theme-color-available-complementary, #000000) solid var(--sn-primitive-strokeWeight-strokeSemiBold, 2px);
-  outline-offset:calc(0px - var(--sn-primitive-strokeWeight-strokeSemiBold, 2px));
+  width:100%;
+  height:100%;
 }
 .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));
-}
-
-.groupIndicatorState{
-  pointer-events:none;
-  position:absolute;
-  inset:0;
-  border-radius:inherit;
-  background:transparent;
-}
-
-.groupIndicator:hover > .groupIndicatorState{
-  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-hovered-filled, var(--sn-brand-color-state-neutral-forLightMode-hovered-background, rgba(188, 195, 220, 0.1490196078)));
-}
-
-.groupIndicator:active > .groupIndicatorState{
-  background:var(--sn-theme-color-material-stateLayer-neutral-onBackground-pressed-filled, var(--sn-brand-color-state-neutral-forLightMode-pressed-background, rgba(188, 195, 220, 0.3019607843)));
-}
-
-.groupIndicator[data-open] > .groupIndicatorState{
   background:var(--sn-theme-color-neutral-decorTransparent, var(--sn-brand-color-neutral-transparent-forLightMode, rgba(124, 131, 182, 0.0784313725)));
 }
 
@@ -157,10 +117,6 @@
   padding-top:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
   padding-bottom:var(--sn-list-anatomy-size-s-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-s, var(--sn-primitive-dimension-6, 6px)));
 }
-.droplistItem[data-size=s] .expandableIcon{
-  width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
-}
 .droplistItem[data-size=s] .groupIndicator{
   width:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px));
@@ -204,10 +160,6 @@
   padding-top:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
   padding-bottom:var(--sn-list-anatomy-size-m-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-m, var(--sn-primitive-dimension-8, 8px)));
 }
-.droplistItem[data-size=m] .expandableIcon{
-  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-}
 .droplistItem[data-size=m] .groupIndicator{
   width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -251,10 +203,6 @@
   padding-top:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
   padding-bottom:var(--sn-list-anatomy-size-l-listItem-centeredWrapper-paddingVertical, var(--sn-density-spacing-control-container-vertical-l, var(--sn-primitive-dimension-10, 10px)));
 }
-.droplistItem[data-size=l] .expandableIcon{
-  width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-  height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
-}
 .droplistItem[data-size=l] .groupIndicator{
   width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
   height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
@@ -280,11 +228,7 @@
   cursor:inherit;
 }
 
-.innerWrapper[data-disabled] .expandableIcon{
-  color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
-}
 .innerWrapper[data-disabled] .groupIndicator{
-  cursor:not-allowed;
   color:var(--sn-theme-color-available-version-textDisabled, var(--sn-brand-color-text-version-disabled, rgba(65, 66, 78, 0.3490196078)));
 }
 .innerWrapper[data-disabled] .beforeContent,

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

@@ -19,16 +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));
-    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 (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, { ...option, id: id, disabled: disabled, open: isOpen, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onExpandIconClick: handleExpandIconClick, isParentNode: true, onOpenNestedList: handleKeyDown, 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, 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, MouseEvent, ReactNode } from 'react';
+import { KeyboardEvent, ReactNode } from 'react';
 import { FlattenBaseItem } from '../types.js';
 type AllBaseItemProps = FlattenBaseItem & {
     expandIcon?: ReactNode;
@@ -8,11 +8,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`) и содержимое (иконка)
@@ -20,5 +20,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, onExpandIconClick, 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, 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, onExpandIconClick, 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, isParentNode, className, inactive, itemWrapRender, dragHandle, ...rest }) {
     const interactive = !inactive;
     const { size = DEFAULT_SIZE, marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
     const { level = 0 } = useCollapseLevelContext();
@@ -44,7 +44,12 @@ export function BaseItem({ beforeContent, afterContent, content, onClick, onMous
         // `onClick` в публичном API типизирован под `MouseEvent` (это семантически клик по
         // пункту меню), поэтому keyboard-событие пробрасывается под тем же типом.
         onClick?.(e);
-        if (interactive && !isParentNode) {
+        if (isParentNode) {
+            // Раскрытие вложенного списка триггерит вся строка целиком: шеврон `groupIndicator` —
+            // только индикатор состояния, собственной интерактивности у него нет.
+            onToggleExpand?.();
+        }
+        else if (interactive) {
             handleChange();
         }
         if (!isSelectionMultiple && closeDroplistOnItemClick) {
@@ -60,13 +65,21 @@ export function BaseItem({ beforeContent, afterContent, content, onClick, onMous
             return;
         }
         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();
         }
@@ -76,16 +89,6 @@ export function BaseItem({ beforeContent, afterContent, content, onClick, onMous
             e.stopPropagation();
         }
     };
-    const handleExpandIconClick = (e) => {
-        if (disabled) {
-            return;
-        }
-        // Триггер раскрытия изолирован от клика по строке: всплытие останавливаем,
-        // чтобы клик по шеврону не активировал выбор/навигацию пункта.
-        e.stopPropagation();
-        e.preventDefault();
-        onExpandIconClick?.(e);
-    };
     const props = extractSupportProps(rest);
     let contentNode;
     if (content && isContentItem(content)) {
@@ -102,9 +105,7 @@ 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-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, 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 }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), contentNode, afterContent && _jsx("div", { className: styles.afterContent, children: afterContent }), switchProp && interactive && (_jsx(Switch, { size: TOGGLE_SIZE_MAP[size], disabled: disabled, checked: isChecked, "data-test-id": TEST_IDS.baseItemSwitch, showIcon: showSwitchIcon })), !switchProp &&
-                        expandIcon &&
-                        (onExpandIconClick ? (_jsxs("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(), children: [_jsx("span", { className: styles.groupIndicatorState, "aria-hidden": true }), expandIcon] })) : (_jsx("span", { className: styles.expandableIcon, children: expandIcon })))] })] }));
+    const itemJSX = (_jsxs("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "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 }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), contentNode, afterContent && _jsx("div", { className: styles.afterContent, children: afterContent }), switchProp && interactive && (_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 }))] })] }));
     if (!itemWrapRender) {
         return itemJSX;
     }