@snack-uikit/list 0.26.4 → 0.27.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.27.0 (2025-03-05)
+
+
+### Features
+
+* **PDS-1767:** custom label for clear all button in List ([ca00030](https://github.com/cloud-ru-tech/snack-uikit/commit/ca000303e274e371e540e8b23598c4dea6ac49e0))
+
+
+
+
+
 ## 0.26.4 (2025-03-05)
 
 ### Only dependencies have been changed

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

@@ -13,6 +13,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const search_private_1 = require("@snack-uikit/search-private");
 const constants_1 = require("../../../constants");
+const utils_1 = require("../../../utils");
 const contexts_1 = require("../../Lists/contexts");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
 const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
@@ -30,9 +31,6 @@ function SearchItem(_ref) {
       e.preventDefault();
     }
   };
-  const handleFocus = e => {
-    e.stopPropagation();
-  };
   if (!search) {
     return null;
   }
@@ -44,7 +42,7 @@ function SearchItem(_ref) {
       size: size,
       tabIndex: constants_1.ITEM_PREFIXES.search === firstItemId ? 0 : -1,
       onKeyDown: handleKeyDown,
-      onFocus: handleFocus
+      onFocus: utils_1.stopPropagation
     }, search, {
       ref: itemRef
     }))

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

@@ -11,13 +11,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_2 = require("react");
 const constants_1 = require("../../constants");
 const helperComponents_1 = require("../../helperComponents");
-const utils_1 = require("../../utils");
+const helpers_1 = require("../../helpers");
 const contexts_1 = require("../Lists/contexts");
 const AccordionItem_1 = require("./AccordionItem");
 const BaseItem_1 = require("./BaseItem");
 const GroupSelectItem_1 = require("./GroupSelectItem");
 const NextListItem_1 = require("./NextListItem");
-const utils_2 = require("./utils");
+const utils_1 = require("./utils");
 function getRenderItems(_ref) {
   let {
     focusCloseChildIds,
@@ -36,7 +36,7 @@ function getRenderItems(_ref) {
       items
     } = focusFlattenItems[id];
     const flattenItem = flattenItems[originalId];
-    if ((0, utils_2.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_2.isGroupSelectItem)(flattenItem)) {
+    if ((0, utils_1.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_1.isGroupSelectItem)(flattenItem)) {
       const innerItemsJSX = getRenderItems({
         focusCloseChildIds: items,
         focusFlattenItems,
@@ -50,21 +50,21 @@ function getRenderItems(_ref) {
         mode: flattenItem.mode
       }, key + '_separator'), ...innerItemsJSX];
     }
-    if ((0, utils_2.isGroupSelectItem)(flattenItem)) {
+    if ((0, utils_1.isGroupSelectItem)(flattenItem)) {
       return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, Object.assign({}, flattenItem, {
         items: items,
         itemRef: itemRef,
         key: key
       }));
     }
-    if ((0, utils_2.isAccordionItem)(flattenItem)) {
+    if ((0, utils_1.isAccordionItem)(flattenItem)) {
       return (0, react_1.createElement)(AccordionItem_1.AccordionItem, Object.assign({}, flattenItem, {
         items: items,
         itemRef: itemRef,
         key: key
       }));
     }
-    if ((0, utils_2.isNextListItem)(flattenItem)) {
+    if ((0, utils_1.isNextListItem)(flattenItem)) {
       return (0, react_1.createElement)(NextListItem_1.NextListItem, Object.assign({}, flattenItem, {
         focusId: id,
         items: items,
@@ -108,7 +108,7 @@ function useCreateBaseItems(_ref2) {
         allChildIds: []
       },
       footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
-        id: (0, utils_1.getFooterItemId)(idx),
+        id: (0, helpers_1.getFooterItemId)(idx),
         itemRef,
         parentId: constants_1.ITEM_PREFIXES.default,
         items: [],

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

@@ -22,7 +22,7 @@ exports.kindFlattenItems = kindFlattenItems;
 exports.extractActiveItems = extractActiveItems;
 const react_1 = require("react");
 const constants_1 = require("../../constants");
-const utils_1 = require("../../utils");
+const helpers_1 = require("../../helpers");
 function isBaseItem(item) {
   return item && !('items' in item);
 }
@@ -61,7 +61,7 @@ function kindFlattenItems(_ref) {
       parentId = constants_1.ITEM_PREFIXES.default
     } = _ref2;
     var _a, _b;
-    const autoId = prefix !== undefined ? (0, utils_1.getItemAutoId)(prefix, idx) : String(idx);
+    const autoId = prefix !== undefined ? (0, helpers_1.getItemAutoId)(prefix, idx) : String(idx);
     const itemId = (_a = !isGroupItem(item) ? item.id : undefined) !== null && _a !== void 0 ? _a : autoId;
     if (isBaseItem(item)) {
       flattenItems[itemId] = Object.assign(Object.assign({}, item), {

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

@@ -25,6 +25,7 @@ const loaders_1 = require("@snack-uikit/loaders");
 const scroll_1 = require("@snack-uikit/scroll");
 const utils_1 = require("@snack-uikit/utils");
 const helperComponents_1 = require("../../../helperComponents");
+const utils_2 = require("../../../utils");
 const Items_1 = require("../../Items");
 const contexts_1 = require("../contexts");
 const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
@@ -190,7 +191,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
       children: itemsPinBottomJSX
     }), footer && (0, jsx_runtime_1.jsx)("div", {
       className: styles_module_scss_2.default.footer,
-      onFocus: e => e.stopPropagation(),
+      onFocus: utils_2.stopPropagation,
       children: footer
     })]
   }));

package/dist/cjs/helperComponents/HiddenTabButton/HiddenTabButton.js

@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.HiddenTabButton = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const utils_1 = require("../../utils");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.HiddenTabButton = (0, react_1.forwardRef)((_ref, ref) => {
   let {
@@ -25,14 +26,11 @@ exports.HiddenTabButton = (0, react_1.forwardRef)((_ref, ref) => {
     e.preventDefault();
     e.stopPropagation();
   }, [listRef]);
-  const handleKeyDown = (0, react_1.useCallback)(e => {
-    e.stopPropagation();
-  }, []);
   return (0, jsx_runtime_1.jsx)("button", {
     type: 'button',
     "aria-hidden": true,
     ref: ref,
-    onKeyDown: handleKeyDown,
+    onKeyDown: utils_1.stopPropagation,
     onFocus: handleFocus,
     className: styles_module_scss_1.default.hiddenBtn,
     tabIndex: tabIndex

package/dist/cjs/helperComponents/Separator/Separator.d.ts

@@ -12,6 +12,7 @@ export type SeparatorProps = {
         indeterminate?: boolean;
         checked?: boolean;
         itemRef?: ForwardedRef<HTMLElement>;
+        label?: string;
     };
 };
 export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/cjs/helperComponents/Separator/Separator.js

@@ -16,6 +16,7 @@ const divider_1 = require("@snack-uikit/divider");
 const locale_1 = require("@snack-uikit/locale");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const contexts_1 = require("../../components/Lists/contexts");
+const utils_1 = require("../../utils");
 const constants_1 = require("./constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Separator(_ref) {
@@ -39,7 +40,8 @@ function Separator(_ref) {
     const {
       onClick,
       checked,
-      itemRef
+      itemRef,
+      label
     } = selectButton;
     return (0, jsx_runtime_1.jsx)("span", {
       className: styles_module_scss_1.default.selectButton,
@@ -53,11 +55,9 @@ function Separator(_ref) {
           e.preventDefault();
           e.stopPropagation();
         },
-        onFocus: e => {
-          e.stopPropagation();
-        },
+        onFocus: utils_1.stopPropagation,
         ref: itemRef,
-        label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')
+        label: label !== null && label !== void 0 ? label : checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')
       })
     });
   }, [divider, mode, selectButton, size, t]);

package/dist/cjs/helpers.d.ts

@@ -0,0 +1,16 @@
+import { ItemId } from './components';
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export declare const getFooterItemId: (id: ItemId) => string;
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export declare const getDefaultItemId: (id: ItemId) => string;

package/dist/cjs/helpers.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDefaultItemId = exports.getItemAutoId = exports.getFooterItemId = void 0;
+const constants_1 = require("./constants");
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+const getFooterItemId = id => `${constants_1.ITEM_PREFIXES.footer}__${id}`;
+exports.getFooterItemId = getFooterItemId;
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+const getItemAutoId = (prefix, id) => [prefix, id].join('-');
+exports.getItemAutoId = getItemAutoId;
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+const getDefaultItemId = id => (0, exports.getItemAutoId)(constants_1.ITEM_PREFIXES.default, id);
+exports.getDefaultItemId = getDefaultItemId;

package/dist/cjs/index.d.ts

@@ -2,5 +2,5 @@ export * from './components';
 export type { SearchState } from './types';
 export { kindFlattenItems } from './components/Items';
 export * from './helperComponents/ItemContent';
-export * from './utils';
+export * from './helpers';
 export * from './constants';

package/dist/cjs/index.js

@@ -32,5 +32,5 @@ Object.defineProperty(exports, "kindFlattenItems", {
   }
 });
 __exportStar(require("./helperComponents/ItemContent"), exports);
-__exportStar(require("./utils"), exports);
+__exportStar(require("./helpers"), exports);
 __exportStar(require("./constants"), exports);

package/dist/cjs/utils.d.ts

@@ -1,16 +1,2 @@
-import { ItemId } from './components';
-/**
- * Возвращает id для элемента футера
- * @function  helper
- */
-export declare const getFooterItemId: (id: ItemId) => string;
-/**
- * Возвращает id для элемента, подставляя перфикс
- * @function  helper
- */
-export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
-/**
- * Возвращает id для дефолтного элемента
- * @function  helper
- */
-export declare const getDefaultItemId: (id: ItemId) => string;
+import { ReactEventHandler } from 'react';
+export declare const stopPropagation: ReactEventHandler;

package/dist/cjs/utils.js

@@ -3,23 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getDefaultItemId = exports.getItemAutoId = exports.getFooterItemId = void 0;
-const constants_1 = require("./constants");
-/**
- * Возвращает id для элемента футера
- * @function  helper
- */
-const getFooterItemId = id => `${constants_1.ITEM_PREFIXES.footer}__${id}`;
-exports.getFooterItemId = getFooterItemId;
-/**
- * Возвращает id для элемента, подставляя перфикс
- * @function  helper
- */
-const getItemAutoId = (prefix, id) => [prefix, id].join('-');
-exports.getItemAutoId = getItemAutoId;
-/**
- * Возвращает id для дефолтного элемента
- * @function  helper
- */
-const getDefaultItemId = id => (0, exports.getItemAutoId)(constants_1.ITEM_PREFIXES.default, id);
-exports.getDefaultItemId = getDefaultItemId;
+exports.stopPropagation = void 0;
+const stopPropagation = e => {
+  e.stopPropagation();
+};
+exports.stopPropagation = stopPropagation;

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

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import cn from 'classnames';
 import { SearchPrivate } from '@snack-uikit/search-private';
 import { ITEM_PREFIXES } from '../../../constants';
+import { stopPropagation } from '../../../utils';
 import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.css';
 import styles from './styles.module.css';
@@ -12,11 +13,8 @@ export function SearchItem({ search, itemRef }) {
             e.preventDefault();
         }
     };
-    const handleFocus = (e) => {
-        e.stopPropagation();
-    };
     if (!search) {
         return null;
     }
-    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: ITEM_PREFIXES.search === firstItemId ? 0 : -1, onKeyDown: handleKeyDown, onFocus: handleFocus }, search, { ref: itemRef })) }));
+    return (_jsx("div", { className: cn(commonStyles.listItem, styles.searchItem), "data-size": size, "data-test-id": 'list__search-item', children: _jsx(SearchPrivate, Object.assign({ size: size, tabIndex: ITEM_PREFIXES.search === firstItemId ? 0 : -1, onKeyDown: handleKeyDown, onFocus: stopPropagation }, search, { ref: itemRef })) }));
 }

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

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { createRef, useMemo } from 'react';
 import { ITEM_PREFIXES } from '../../constants';
 import { Separator } from '../../helperComponents';
-import { getFooterItemId } from '../../utils';
+import { getFooterItemId } from '../../helpers';
 import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { createRef } from 'react';
 import { ITEM_PREFIXES } from '../../constants';
-import { getItemAutoId } from '../../utils';
+import { getItemAutoId } from '../../helpers';
 export function isBaseItem(item) {
     return item && !('items' in item);
 }

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

@@ -17,6 +17,7 @@ import { Spinner } from '@snack-uikit/loaders';
 import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
+import { stopPropagation } from '../../../utils';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
 import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.css';
@@ -81,7 +82,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
                     innerScrollRef.current = ref;
                     if (scrollContainerRef)
                         scrollContainerRef.current = ref;
-                }, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: e => e.stopPropagation(), children: footer }))] })));
+                }, untouchableScrollbars: untouchableScrollbars, onScroll: onScroll, onInitialized: onScrollInitialized, children: [content, _jsx("div", { className: styles.scrollStub, ref: scrollRef })] })) : (_jsx(_Fragment, { children: content })), Number(pinBottom === null || pinBottom === void 0 ? void 0 : pinBottom.length) > 0 && _jsx(PinBottomGroupItem, { children: itemsPinBottomJSX }), footer && (_jsx("div", { className: styles.footer, onFocus: stopPropagation, children: footer }))] })));
     if (!nested) {
         return listJSX;
     }

package/dist/esm/helperComponents/HiddenTabButton/HiddenTabButton.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { forwardRef, useCallback } from 'react';
+import { stopPropagation } from '../../utils';
 import styles from './styles.module.css';
 export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
     const handleFocus = useCallback((e) => {
@@ -10,8 +11,5 @@ export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
         e.preventDefault();
         e.stopPropagation();
     }, [listRef]);
-    const handleKeyDown = useCallback((e) => {
-        e.stopPropagation();
-    }, []);
-    return (_jsx("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
+    return (_jsx("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: stopPropagation, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
 });

package/dist/esm/helperComponents/Separator/Separator.d.ts

@@ -12,6 +12,7 @@ export type SeparatorProps = {
         indeterminate?: boolean;
         checked?: boolean;
         itemRef?: ForwardedRef<HTMLElement>;
+        label?: string;
     };
 };
 export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;

package/dist/esm/helperComponents/Separator/Separator.js

@@ -5,6 +5,7 @@ import { Divider } from '@snack-uikit/divider';
 import { useLocale } from '@snack-uikit/locale';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { useNewListContext } from '../../components/Lists/contexts';
+import { stopPropagation } from '../../utils';
 import { SELECT_BUTTON_SIZE_MAP } from './constants';
 import styles from './styles.module.css';
 export function Separator({ label, truncate, divider, mode = 'secondary', selectButton }) {
@@ -14,14 +15,12 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
         if (!selectButton) {
             return null;
         }
-        const { onClick, checked, itemRef } = selectButton;
+        const { onClick, checked, itemRef, label } = selectButton;
         return (_jsx("span", { className: styles.selectButton, "data-size": size, "data-weight": (divider && mode) || undefined, children: _jsx(ButtonFunction, { size: SELECT_BUTTON_SIZE_MAP[size], tabIndex: 0, onClick: e => {
                     onClick === null || onClick === void 0 ? void 0 : onClick(e);
                     e.preventDefault();
                     e.stopPropagation();
-                }, onFocus: e => {
-                    e.stopPropagation();
-                }, ref: itemRef, label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select') }) }));
+                }, onFocus: stopPropagation, ref: itemRef, label: label !== null && label !== void 0 ? label : (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')) }) }));
     }, [divider, mode, selectButton, size, t]);
     if (label) {
         return (_jsxs("div", { className: styles.separatorWithLabel, "data-size": size, children: [_jsx("span", { className: styles.label, "data-mode": mode, children: _jsx(TruncateString, { variant: truncate === null || truncate === void 0 ? void 0 : truncate.variant, text: label, maxLines: 1 }) }), _jsxs("div", { style: { flex: 1 }, children: [selectButtonJSX, divider && _jsx(Divider, { weight: mode === 'primary' ? 'regular' : 'light', className: styles.divider })] })] }));

package/dist/esm/helpers.d.ts

@@ -0,0 +1,16 @@
+import { ItemId } from './components';
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export declare const getFooterItemId: (id: ItemId) => string;
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export declare const getDefaultItemId: (id: ItemId) => string;

package/dist/esm/helpers.js

@@ -0,0 +1,16 @@
+import { ITEM_PREFIXES } from './constants';
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export const getFooterItemId = (id) => `${ITEM_PREFIXES.footer}__${id}`;
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+export const getItemAutoId = (prefix, id) => [prefix, id].join('-');
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export const getDefaultItemId = (id) => getItemAutoId(ITEM_PREFIXES.default, id);

package/dist/esm/index.d.ts

@@ -2,5 +2,5 @@ export * from './components';
 export type { SearchState } from './types';
 export { kindFlattenItems } from './components/Items';
 export * from './helperComponents/ItemContent';
-export * from './utils';
+export * from './helpers';
 export * from './constants';

package/dist/esm/index.js

@@ -1,5 +1,5 @@
 export * from './components';
 export { kindFlattenItems } from './components/Items';
 export * from './helperComponents/ItemContent';
-export * from './utils';
+export * from './helpers';
 export * from './constants';

package/dist/esm/utils.d.ts

@@ -1,16 +1,2 @@
-import { ItemId } from './components';
-/**
- * Возвращает id для элемента футера
- * @function  helper
- */
-export declare const getFooterItemId: (id: ItemId) => string;
-/**
- * Возвращает id для элемента, подставляя перфикс
- * @function  helper
- */
-export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
-/**
- * Возвращает id для дефолтного элемента
- * @function  helper
- */
-export declare const getDefaultItemId: (id: ItemId) => string;
+import { ReactEventHandler } from 'react';
+export declare const stopPropagation: ReactEventHandler;

package/dist/esm/utils.js

@@ -1,16 +1,3 @@
-import { ITEM_PREFIXES } from './constants';
-/**
- * Возвращает id для элемента футера
- * @function  helper
- */
-export const getFooterItemId = (id) => `${ITEM_PREFIXES.footer}__${id}`;
-/**
- * Возвращает id для элемента, подставляя перфикс
- * @function  helper
- */
-export const getItemAutoId = (prefix, id) => [prefix, id].join('-');
-/**
- * Возвращает id для дефолтного элемента
- * @function  helper
- */
-export const getDefaultItemId = (id) => getItemAutoId(ITEM_PREFIXES.default, id);
+export const stopPropagation = e => {
+    e.stopPropagation();
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "List",
-  "version": "0.26.4",
+  "version": "0.27.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -54,5 +54,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "245f761e18557fddf0d10e8277e6b2e2740a81a4"
+  "gitHead": "d8510c4d566cee9fd0e96ff969fdefb7fb11ac49"
 }

package/src/components/Items/SearchItem/SearchItem.tsx

@@ -1,10 +1,11 @@
 import cn from 'classnames';
-import { FocusEvent, KeyboardEvent, RefObject } from 'react';
+import { KeyboardEvent, RefObject } from 'react';
 
 import { SearchPrivate } from '@snack-uikit/search-private';
 
 import { ITEM_PREFIXES } from '../../../constants';
 import { SearchState } from '../../../types';
+import { stopPropagation } from '../../../utils';
 import { useNewListContext } from '../../Lists/contexts';
 import commonStyles from '../styles.module.scss';
 import styles from './styles.module.scss';
@@ -23,10 +24,6 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
     }
   };
 
-  const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
-    e.stopPropagation();
-  };
-
   if (!search) {
     return null;
   }
@@ -37,7 +34,7 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
         size={size}
         tabIndex={ITEM_PREFIXES.search === firstItemId ? 0 : -1}
         onKeyDown={handleKeyDown}
-        onFocus={handleFocus}
+        onFocus={stopPropagation}
         {...search}
         ref={itemRef as RefObject<HTMLInputElement>}
       />

package/src/components/Items/hooks.tsx

@@ -2,7 +2,7 @@ import { createRef, RefObject, useMemo } from 'react';
 
 import { ITEM_PREFIXES } from '../../constants';
 import { Separator } from '../../helperComponents';
-import { getFooterItemId } from '../../utils';
+import { getFooterItemId } from '../../helpers';
 import { useNewListContext, useSelectionContext } from '../Lists/contexts';
 import { AccordionItem } from './AccordionItem';
 import { BaseItem } from './BaseItem';

package/src/components/Items/utils.ts

@@ -2,7 +2,7 @@ import { createRef } from 'react';
 
 import { ITEM_PREFIXES } from '../../constants';
 import { ItemContentProps } from '../../helperComponents';
-import { getItemAutoId } from '../../utils';
+import { getItemAutoId } from '../../helpers';
 import {
   AccordionItem,
   AnyType,

package/src/components/Lists/ListPrivate/ListPrivate.tsx

@@ -7,6 +7,7 @@ import { Scroll } from '@snack-uikit/scroll';
 import { extractSupportProps } from '@snack-uikit/utils';
 
 import { ListEmptyState, useEmptyState } from '../../../helperComponents';
+import { stopPropagation } from '../../../utils';
 import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
 import { useNewListContext, useSelectionContext } from '../contexts';
 import commonStyles from '../styles.module.scss';
@@ -209,7 +210,7 @@ export const ListPrivate = forwardRef(
         {Number(pinBottom?.length) > 0 && <PinBottomGroupItem>{itemsPinBottomJSX}</PinBottomGroupItem>}
 
         {footer && (
-          <div className={styles.footer} onFocus={e => e.stopPropagation()}>
+          <div className={styles.footer} onFocus={stopPropagation}>
             {footer}
           </div>
         )}

package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx

@@ -1,5 +1,6 @@
-import { FocusEvent, forwardRef, KeyboardEvent, RefObject, useCallback } from 'react';
+import { FocusEvent, forwardRef, RefObject, useCallback } from 'react';
 
+import { stopPropagation } from '../../utils';
 import styles from './styles.module.scss';
 
 type HiddenTabButtonProps = {
@@ -20,16 +21,12 @@ export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProp
     [listRef],
   );
 
-  const handleKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-  }, []);
-
   return (
     <button
       type='button'
       aria-hidden
       ref={ref}
-      onKeyDown={handleKeyDown}
+      onKeyDown={stopPropagation}
       onFocus={handleFocus}
       className={styles.hiddenBtn}
       tabIndex={tabIndex}

package/src/helperComponents/Separator/Separator.tsx

@@ -6,6 +6,7 @@ import { useLocale } from '@snack-uikit/locale';
 import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
 
 import { useNewListContext } from '../../components/Lists/contexts';
+import { stopPropagation } from '../../utils';
 import { SELECT_BUTTON_SIZE_MAP } from './constants';
 import styles from './styles.module.scss';
 
@@ -21,6 +22,7 @@ export type SeparatorProps = {
     indeterminate?: boolean;
     checked?: boolean;
     itemRef?: ForwardedRef<HTMLElement>;
+    label?: string;
   };
 };
 
@@ -34,7 +36,7 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
       return null;
     }
 
-    const { onClick, checked, itemRef } = selectButton;
+    const { onClick, checked, itemRef, label } = selectButton;
 
     return (
       <span className={styles.selectButton} data-size={size} data-weight={(divider && mode) || undefined}>
@@ -46,11 +48,9 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
             e.preventDefault();
             e.stopPropagation();
           }}
-          onFocus={e => {
-            e.stopPropagation();
-          }}
+          onFocus={stopPropagation}
           ref={itemRef as RefObject<HTMLButtonElement>}
-          label={checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')}
+          label={label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select'))}
         />
       </span>
     );

package/src/helpers.ts

@@ -0,0 +1,20 @@
+import { ItemId } from './components';
+import { ITEM_PREFIXES } from './constants';
+
+/**
+ * Возвращает id для элемента футера
+ * @function  helper
+ */
+export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
+
+/**
+ * Возвращает id для элемента, подставляя перфикс
+ * @function  helper
+ */
+export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
+
+/**
+ * Возвращает id для дефолтного элемента
+ * @function  helper
+ */
+export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);

package/src/index.ts

@@ -5,5 +5,5 @@ export { kindFlattenItems } from './components/Items';
 
 export * from './helperComponents/ItemContent';
 
-export * from './utils';
+export * from './helpers';
 export * from './constants';

package/src/utils.ts

@@ -1,20 +1,5 @@
-import { ItemId } from './components';
-import { ITEM_PREFIXES } from './constants';
+import { ReactEventHandler } from 'react';
 
-/**
- * Возвращает id для элемента футера
- * @function  helper
- */
-export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
-
-/**
- * Возвращает id для элемента, подставляя перфикс
- * @function  helper
- */
-export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
-
-/**
- * Возвращает id для дефолтного элемента
- * @function  helper
- */
-export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);
+export const stopPropagation: ReactEventHandler = e => {
+  e.stopPropagation();
+};