@snack-uikit/list 0.33.4 → 0.33.5-preview-620fd545.0

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

@@ -31,7 +31,10 @@ function AccordionItem(_a) {
   const _ref2 = (0, contexts_1.useCollapseContext)(),
     _ref2$openCollapseIte = _ref2.openCollapseItems,
     openCollapseItems = _ref2$openCollapseIte === void 0 ? [] : _ref2$openCollapseIte,
-    toggleOpenCollapseItem = _ref2.toggleOpenCollapseItem;
+    toggleOpenCollapseItem = _ref2.toggleOpenCollapseItem,
+    _ref2$toggleOn = _ref2.toggleOn,
+    toggleOn = _ref2$toggleOn === void 0 ? 'item' : _ref2$toggleOn;
+  const isIconTrigger = toggleOn === 'expandIcon';
   const _ref3 = (0, contexts_1.useSelectionContext)(),
     value = _ref3.value,
     isSelectionSingle = _ref3.isSelectionSingle,
@@ -53,7 +56,7 @@ function AccordionItem(_a) {
   const itemsJSX = (0, hooks_1.useRenderItems)(items);
   const handleItemClick = e => {
     var _a;
-    toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
+    if (!isIconTrigger) toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
     (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, e);
   };
   return (0, jsx_runtime_1.jsx)(helperComponents_1.CollapseBlockPrivate, {
@@ -61,6 +64,7 @@ function AccordionItem(_a) {
       id: id,
       disabled: disabled,
       expandIcon: isOpen ? (0, jsx_runtime_1.jsx)(icons_1.ChevronUpSVG, {}) : (0, jsx_runtime_1.jsx)(icons_1.ChevronDownSVG, {}),
+      onExpandIconClick: isIconTrigger ? () => toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '') : undefined,
       onClick: handleItemClick,
       isParentNode: true,
       onOpenNestedList: handleKeyDown,

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;
@@ -7,6 +7,7 @@ type AllBaseItemProps = FlattenBaseItem & {
     onSelect?(): void;
     isParentNode?: boolean;
     onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
+    onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...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, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -47,11 +47,12 @@ function BaseItem(_a) {
     checkedProp = _a.checked,
     onSelect = _a.onSelect,
     onOpenNestedList = _a.onOpenNestedList,
+    onExpandIconClick = _a.onExpandIconClick,
     isParentNode = _a.isParentNode,
     className = _a.className,
     inactive = _a.inactive,
     itemWrapRender = _a.itemWrapRender,
-    rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
+    rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "onExpandIconClick", "isParentNode", "className", "inactive", "itemWrapRender"]);
   const interactive = !inactive;
   const _ref = (0, contexts_1.useNewListContext)(),
     _ref$size = _ref.size,
@@ -188,8 +189,16 @@ function BaseItem(_a) {
         checked: isChecked,
         "data-test-id": 'list__base-item-switch',
         showIcon: showSwitchIcon
-      }), !switchProp && expandIcon && (0, jsx_runtime_1.jsx)("span", {
+      }), !switchProp && expandIcon &&
+      // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+      (0, jsx_runtime_1.jsx)("span", {
         className: styles_module_scss_2.default.expandableIcon,
+        "data-test-id": 'list__base-item-expand-icon',
+        onClick: onExpandIconClick && (e => {
+          e.preventDefault();
+          e.stopPropagation();
+          onExpandIconClick(e);
+        }),
         children: expandIcon
       })]
     })

package/dist/cjs/components/Lists/Droplist/DropList.js

@@ -222,7 +222,8 @@ function Droplist(_a) {
       children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
         value: {
           openCollapseItems,
-          toggleOpenCollapseItem
+          toggleOpenCollapseItem,
+          toggleOn: collapse.toggleOn
         },
         children: (0, jsx_runtime_1.jsx)(contexts_1.FocusListContext.Provider, {
           value: {

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

@@ -176,7 +176,8 @@ exports.List = (0, react_1.forwardRef)((_a, ref) => {
       children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseContext.Provider, {
         value: {
           openCollapseItems,
-          toggleOpenCollapseItem
+          toggleOpenCollapseItem,
+          toggleOn: collapse.toggleOn
         },
         children: (0, jsx_runtime_1.jsx)(contexts_1.FocusListContext.Provider, {
           value: {

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

@@ -7,6 +7,7 @@ export declare const useCollapseLevelContext: () => CollapseLevelContextType;
 export type CollapseContextType = {
     openCollapseItems?: ItemId[];
     toggleOpenCollapseItem?(id: ItemId): void;
+    toggleOn?: 'item' | 'expandIcon';
 };
 export declare const CollapseContext: import("react").Context<CollapseContextType>;
 export declare const useCollapseContext: () => CollapseContextType;
@@ -14,4 +15,10 @@ export type CollapseState = {
     value?: ItemId[];
     onChange?(value?: ItemId[]): void;
     defaultValue?: ItemId[];
+    /**
+     * Что переключает раскрытие вложенного списка:
+     * * `item` - клик по всей строке (по умолчанию),
+     * * `expandIcon` - только клик по шеврону.
+     */
+    toggleOn?: 'item' | 'expandIcon';
 };

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

@@ -19,7 +19,8 @@ import { useGroupItemSelection, useRenderItems } from '../hooks';
 export function AccordionItem(_a) {
     var { id, disabled, allChildIds, items } = _a, option = __rest(_a, ["id", "disabled", "allChildIds", "items"]);
     const { level = 0 } = useCollapseLevelContext();
-    const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
+    const { openCollapseItems = [], toggleOpenCollapseItem, toggleOn = 'item' } = useCollapseContext();
+    const isIconTrigger = toggleOn === 'expandIcon';
     const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
     const { indeterminate, handleOnSelect, checked: checkedProp, } = useGroupItemSelection({
         items,
@@ -36,8 +37,9 @@ export function AccordionItem(_a) {
     const itemsJSX = useRenderItems(items);
     const handleItemClick = (e) => {
         var _a;
-        toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
+        if (!isIconTrigger)
+            toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
         (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, e);
     };
-    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onOpenNestedList: handleKeyDown, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined })), expanded: isOpen, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
+    return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onExpandIconClick: isIconTrigger ? () => toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '') : undefined, onClick: handleItemClick, isParentNode: true, onOpenNestedList: handleKeyDown, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined })), expanded: isOpen, "data-test-id": `list__accordion-item-${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';
 type AllBaseItemProps = FlattenBaseItem & {
     expandIcon?: ReactNode;
@@ -7,6 +7,7 @@ type AllBaseItemProps = FlattenBaseItem & {
     onSelect?(): void;
     isParentNode?: boolean;
     onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
+    onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
 };
-export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender, ...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, onExpandIconClick, isParentNode, className, inactive, itemWrapRender, ...rest }: AllBaseItemProps): string | number | boolean | Iterable<ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
 export {};

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

@@ -21,13 +21,13 @@ import { CHECKBOX_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function BaseItem(_a) {
     var _b;
-    var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, showSwitchIcon, onKeyDown, onFocus, indeterminate, checked: checkedProp, onSelect, onOpenNestedList, isParentNode, className, inactive, itemWrapRender } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
+    var { 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 } = _a, rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "showSwitchIcon", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "onExpandIconClick", "isParentNode", "className", "inactive", "itemWrapRender"]);
     const interactive = !inactive;
     const { size = 's', marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
     const { level = 0 } = useCollapseLevelContext();
     const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
     const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
-    const isChecked = isSelectionSingle ? (checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === id) : (checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : ''));
+    const isChecked = isSelectionSingle ? checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === id : checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : '');
     const handleChange = () => {
         onChange === null || onChange === void 0 ? void 0 : onChange(id);
     };
@@ -86,7 +86,14 @@ export function BaseItem(_a) {
         }
     };
     const props = extractSupportProps(rest);
-    const itemJSX = (_jsx("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: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + 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, "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: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? (((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content)))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch', showIcon: showSwitchIcon })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
+    const itemJSX = (_jsx("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: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + 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, "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: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? ((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content, disabled })) !== null && _b !== void 0 ? _b : _jsx(ItemContent, Object.assign({ disabled: disabled }, content))) : (_jsxs("div", { className: styles.content, children: [" ", content, " "] })), afterContent, switchProp && interactive && (_jsx(Switch, { disabled: disabled, checked: isChecked, "data-test-id": 'list__base-item-switch', showIcon: showSwitchIcon })), !switchProp && expandIcon && (
+                // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+                _jsx("span", { className: styles.expandableIcon, "data-test-id": 'list__base-item-expand-icon', onClick: onExpandIconClick &&
+                        (e => {
+                            e.preventDefault();
+                            e.stopPropagation();
+                            onExpandIconClick(e);
+                        }), children: expandIcon }))] }) }));
     if (!itemWrapRender) {
         return itemJSX;
     }

package/dist/esm/components/Lists/Droplist/DropList.js

@@ -131,6 +131,7 @@ export function Droplist(_a) {
     return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, virtualized: virtualized, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
                     openCollapseItems,
                     toggleOpenCollapseItem,
+                    toggleOn: collapse.toggleOn,
                 }, children: _jsx(FocusListContext.Provider, { value: {
                         activeItemId,
                         handleListKeyDownFactory,

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

@@ -102,6 +102,7 @@ export const List = forwardRef((_a, ref) => {
     return (_jsx(NewListContextProvider, { flattenItems: flattenItems, focusFlattenItems: focusFlattenItems, contentRender: contentRender, size: size, marker: marker, firstItemId: firstItemId, virtualized: props.virtualized, children: _jsx(SelectionProvider, Object.assign({}, selection, { children: _jsx(CollapseContext.Provider, { value: {
                     openCollapseItems,
                     toggleOpenCollapseItem,
+                    toggleOn: collapse.toggleOn,
                 }, children: _jsx(FocusListContext.Provider, { value: {
                         activeItemId,
                         handleListKeyDownFactory,

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

@@ -7,6 +7,7 @@ export declare const useCollapseLevelContext: () => CollapseLevelContextType;
 export type CollapseContextType = {
     openCollapseItems?: ItemId[];
     toggleOpenCollapseItem?(id: ItemId): void;
+    toggleOn?: 'item' | 'expandIcon';
 };
 export declare const CollapseContext: import("react").Context<CollapseContextType>;
 export declare const useCollapseContext: () => CollapseContextType;
@@ -14,4 +15,10 @@ export type CollapseState = {
     value?: ItemId[];
     onChange?(value?: ItemId[]): void;
     defaultValue?: ItemId[];
+    /**
+     * Что переключает раскрытие вложенного списка:
+     * * `item` - клик по всей строке (по умолчанию),
+     * * `expandIcon` - только клик по шеврону.
+     */
+    toggleOn?: 'item' | 'expandIcon';
 };

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.33.4",
+  "version": "0.33.5-preview-620fd545.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "9e6abdd71a846caf1f1252b9504560a3b796942f"
+  "gitHead": "a0ea1647ffd8d5a1b3e980901ed6842844927ac1"
 }

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

@@ -17,7 +17,8 @@ type AccordionItemProps = Omit<FlattenAccordionItem, 'type>'> & CommonFlattenPro
 
 export function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps) {
   const { level = 0 } = useCollapseLevelContext();
-  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
+  const { openCollapseItems = [], toggleOpenCollapseItem, toggleOn = 'item' } = useCollapseContext();
+  const isIconTrigger = toggleOn === 'expandIcon';
 
   const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
@@ -46,7 +47,7 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
   const itemsJSX = useRenderItems(items);
 
   const handleItemClick = (e: MouseEvent<HTMLElement>) => {
-    toggleOpenCollapseItem?.(id ?? '');
+    if (!isIconTrigger) toggleOpenCollapseItem?.(id ?? '');
     option.onClick?.(e);
   };
 
@@ -58,6 +59,7 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
           id={id}
           disabled={disabled}
           expandIcon={isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
+          onExpandIconClick={isIconTrigger ? () => toggleOpenCollapseItem?.(id ?? '') : undefined}
           onClick={handleItemClick}
           isParentNode
           onOpenNestedList={handleKeyDown}

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

@@ -24,6 +24,7 @@ type AllBaseItemProps = FlattenBaseItem & {
   onSelect?(): void;
   isParentNode?: boolean;
   onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
+  onExpandIconClick?(e: MouseEvent<HTMLElement>): void;
 };
 
 export function BaseItem({
@@ -45,6 +46,7 @@ export function BaseItem({
   checked: checkedProp,
   onSelect,
   onOpenNestedList,
+  onExpandIconClick,
   isParentNode,
   className,
   inactive,
@@ -58,7 +60,7 @@ export function BaseItem({
   const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
   const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
 
-  const isChecked = isSelectionSingle ? (checkedProp ?? value === id) : (checkedProp ?? value?.includes(id ?? ''));
+  const isChecked = isSelectionSingle ? checkedProp ?? value === id : checkedProp ?? value?.includes(id ?? '');
 
   const handleChange = () => {
     onChange?.(id);
@@ -182,7 +184,7 @@ export function BaseItem({
 
         {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
         {content && isContentItem(content) ? (
-          (contentRender?.({ id, content, disabled }) ?? <ItemContent disabled={disabled} {...content} />)
+          contentRender?.({ id, content, disabled }) ?? <ItemContent disabled={disabled} {...content} />
         ) : (
           <div className={styles.content}> {content} </div>
         )}
@@ -197,7 +199,23 @@ export function BaseItem({
           />
         )}
 
-        {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
+        {!switchProp && expandIcon && (
+          // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+          <span
+            className={styles.expandableIcon}
+            data-test-id='list__base-item-expand-icon'
+            onClick={
+              onExpandIconClick &&
+              (e => {
+                e.preventDefault();
+                e.stopPropagation();
+                onExpandIconClick(e);
+              })
+            }
+          >
+            {expandIcon}
+          </span>
+        )}
       </li>
     </div>
   );

package/src/components/Lists/Droplist/DropList.tsx

@@ -216,6 +216,7 @@ export function Droplist({
           value={{
             openCollapseItems,
             toggleOpenCollapseItem,
+            toggleOn: collapse.toggleOn,
           }}
         >
           <FocusListContext.Provider

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

@@ -160,6 +160,7 @@ export const List = forwardRef(
             value={{
               openCollapseItems,
               toggleOpenCollapseItem,
+              toggleOn: collapse.toggleOn,
             }}
           >
             <FocusListContext.Provider

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

@@ -11,6 +11,7 @@ export const useCollapseLevelContext = () => useContext(CollapseLevelContext);
 export type CollapseContextType = {
   openCollapseItems?: ItemId[];
   toggleOpenCollapseItem?(id: ItemId): void;
+  toggleOn?: 'item' | 'expandIcon';
 };
 export const CollapseContext = createContext<CollapseContextType>({});
 export const useCollapseContext = () => useContext(CollapseContext);
@@ -19,4 +20,10 @@ export type CollapseState = {
   value?: ItemId[];
   onChange?(value?: ItemId[]): void;
   defaultValue?: ItemId[];
+  /**
+   * Что переключает раскрытие вложенного списка:
+   * * `item` - клик по всей строке (по умолчанию),
+   * * `expandIcon` - только клик по шеврону.
+   */
+  toggleOn?: 'item' | 'expandIcon';
 };