@snack-uikit/list 0.26.4 → 0.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (50) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/cjs/components/Items/BaseItem/BaseItem.d.ts +1 -1
  3. package/dist/cjs/components/Items/BaseItem/BaseItem.js +4 -2
  4. package/dist/cjs/components/Items/GroupSelectItem/GroupSelectItem.d.ts +1 -1
  5. package/dist/cjs/components/Items/GroupSelectItem/GroupSelectItem.js +4 -2
  6. package/dist/cjs/components/Items/SearchItem/SearchItem.js +2 -4
  7. package/dist/cjs/components/Items/hooks.js +7 -7
  8. package/dist/cjs/components/Items/types.d.ts +5 -0
  9. package/dist/cjs/components/Items/utils.js +2 -2
  10. package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js +2 -1
  11. package/dist/cjs/helperComponents/HiddenTabButton/HiddenTabButton.js +2 -4
  12. package/dist/cjs/helperComponents/Separator/Separator.d.ts +1 -0
  13. package/dist/cjs/helperComponents/Separator/Separator.js +5 -5
  14. package/dist/cjs/helpers.d.ts +16 -0
  15. package/dist/cjs/helpers.js +25 -0
  16. package/dist/cjs/index.d.ts +1 -1
  17. package/dist/cjs/index.js +1 -1
  18. package/dist/cjs/utils.d.ts +2 -16
  19. package/dist/cjs/utils.js +5 -20
  20. package/dist/esm/components/Items/BaseItem/BaseItem.d.ts +1 -1
  21. package/dist/esm/components/Items/BaseItem/BaseItem.js +2 -2
  22. package/dist/esm/components/Items/GroupSelectItem/GroupSelectItem.d.ts +1 -1
  23. package/dist/esm/components/Items/GroupSelectItem/GroupSelectItem.js +2 -1
  24. package/dist/esm/components/Items/SearchItem/SearchItem.js +2 -4
  25. package/dist/esm/components/Items/hooks.js +1 -1
  26. package/dist/esm/components/Items/types.d.ts +5 -0
  27. package/dist/esm/components/Items/utils.js +1 -1
  28. package/dist/esm/components/Lists/ListPrivate/ListPrivate.js +2 -1
  29. package/dist/esm/helperComponents/HiddenTabButton/HiddenTabButton.js +2 -4
  30. package/dist/esm/helperComponents/Separator/Separator.d.ts +1 -0
  31. package/dist/esm/helperComponents/Separator/Separator.js +3 -4
  32. package/dist/esm/helpers.d.ts +16 -0
  33. package/dist/esm/helpers.js +16 -0
  34. package/dist/esm/index.d.ts +1 -1
  35. package/dist/esm/index.js +1 -1
  36. package/dist/esm/utils.d.ts +2 -16
  37. package/dist/esm/utils.js +3 -16
  38. package/package.json +2 -2
  39. package/src/components/Items/BaseItem/BaseItem.tsx +7 -1
  40. package/src/components/Items/GroupSelectItem/GroupSelectItem.tsx +2 -0
  41. package/src/components/Items/SearchItem/SearchItem.tsx +3 -6
  42. package/src/components/Items/hooks.tsx +1 -1
  43. package/src/components/Items/types.ts +5 -0
  44. package/src/components/Items/utils.ts +1 -1
  45. package/src/components/Lists/ListPrivate/ListPrivate.tsx +2 -1
  46. package/src/helperComponents/HiddenTabButton/HiddenTabButton.tsx +3 -6
  47. package/src/helperComponents/Separator/Separator.tsx +5 -5
  48. package/src/helpers.ts +20 -0
  49. package/src/index.ts +1 -1
  50. package/src/utils.ts +4 -19
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.27.1 (2025-03-06)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-1483:** ability to provide label for toggle button for list ([bc76b1f](https://github.com/cloud-ru-tech/snack-uikit/commit/bc76b1f07a342c73809bc69816cd11423b1c6454))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.27.0 (2025-03-05)
18
+
19
+
20
+ ### Features
21
+
22
+ * **PDS-1767:** custom label for clear all button in List ([ca00030](https://github.com/cloud-ru-tech/snack-uikit/commit/ca000303e274e371e540e8b23598c4dea6ac49e0))
23
+
24
+
25
+
26
+
27
+
6
28
  ## 0.26.4 (2025-03-05)
7
29
 
8
30
  ### Only dependencies have been changed
@@ -8,5 +8,5 @@ type AllBaseItemProps = FlattenBaseItem & {
8
8
  isParentNode?: boolean;
9
9
  onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
10
10
  };
11
- export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, 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;
11
+ 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;
12
12
  export {};
@@ -41,6 +41,7 @@ function BaseItem(_a) {
41
41
  open,
42
42
  itemRef,
43
43
  switch: switchProp,
44
+ showSwitchIcon,
44
45
  onKeyDown,
45
46
  onFocus,
46
47
  indeterminate,
@@ -52,7 +53,7 @@ function BaseItem(_a) {
52
53
  inactive,
53
54
  itemWrapRender
54
55
  } = _a,
55
- rest = __rest(_a, ["beforeContent", "afterContent", "content", "onClick", "onMouseDown", "id", "expandIcon", "disabled", "open", "itemRef", "switch", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
56
+ 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"]);
56
57
  const interactive = !inactive;
57
58
  const {
58
59
  size = 's',
@@ -189,7 +190,8 @@ function BaseItem(_a) {
189
190
  }), afterContent, switchProp && interactive && (0, jsx_runtime_1.jsx)(toggles_1.Switch, {
190
191
  disabled: disabled,
191
192
  checked: isChecked,
192
- "data-test-id": 'list__base-item-switch'
193
+ "data-test-id": 'list__base-item-switch',
194
+ showIcon: showSwitchIcon
193
195
  }), !switchProp && expandIcon && (0, jsx_runtime_1.jsx)("span", {
194
196
  className: styles_module_scss_2.default.expandableIcon,
195
197
  children: expandIcon
@@ -1,4 +1,4 @@
1
1
  import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
2
2
  type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
3
- export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
4
4
  export {};
@@ -16,7 +16,8 @@ function GroupSelectItem(_ref) {
16
16
  mode,
17
17
  id,
18
18
  itemRef,
19
- allChildIds
19
+ allChildIds,
20
+ selectButtonLabel
20
21
  } = _ref;
21
22
  const {
22
23
  indeterminate,
@@ -39,7 +40,8 @@ function GroupSelectItem(_ref) {
39
40
  indeterminate,
40
41
  checked,
41
42
  itemRef,
42
- onClick: handleOnSelect
43
+ onClick: handleOnSelect,
44
+ label: selectButtonLabel
43
45
  }
44
46
  }), itemsJSX]
45
47
  });
@@ -13,6 +13,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
13
13
  const classnames_1 = __importDefault(require("classnames"));
14
14
  const search_private_1 = require("@snack-uikit/search-private");
15
15
  const constants_1 = require("../../../constants");
16
+ const utils_1 = require("../../../utils");
16
17
  const contexts_1 = require("../../Lists/contexts");
17
18
  const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
18
19
  const styles_module_scss_2 = __importDefault(require('./styles.module.css'));
@@ -30,9 +31,6 @@ function SearchItem(_ref) {
30
31
  e.preventDefault();
31
32
  }
32
33
  };
33
- const handleFocus = e => {
34
- e.stopPropagation();
35
- };
36
34
  if (!search) {
37
35
  return null;
38
36
  }
@@ -44,7 +42,7 @@ function SearchItem(_ref) {
44
42
  size: size,
45
43
  tabIndex: constants_1.ITEM_PREFIXES.search === firstItemId ? 0 : -1,
46
44
  onKeyDown: handleKeyDown,
47
- onFocus: handleFocus
45
+ onFocus: utils_1.stopPropagation
48
46
  }, search, {
49
47
  ref: itemRef
50
48
  }))
@@ -11,13 +11,13 @@ const jsx_runtime_1 = require("react/jsx-runtime");
11
11
  const react_2 = require("react");
12
12
  const constants_1 = require("../../constants");
13
13
  const helperComponents_1 = require("../../helperComponents");
14
- const utils_1 = require("../../utils");
14
+ const helpers_1 = require("../../helpers");
15
15
  const contexts_1 = require("../Lists/contexts");
16
16
  const AccordionItem_1 = require("./AccordionItem");
17
17
  const BaseItem_1 = require("./BaseItem");
18
18
  const GroupSelectItem_1 = require("./GroupSelectItem");
19
19
  const NextListItem_1 = require("./NextListItem");
20
- const utils_2 = require("./utils");
20
+ const utils_1 = require("./utils");
21
21
  function getRenderItems(_ref) {
22
22
  let {
23
23
  focusCloseChildIds,
@@ -36,7 +36,7 @@ function getRenderItems(_ref) {
36
36
  items
37
37
  } = focusFlattenItems[id];
38
38
  const flattenItem = flattenItems[originalId];
39
- if ((0, utils_2.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_2.isGroupSelectItem)(flattenItem)) {
39
+ if ((0, utils_1.isGroupItem)(flattenItem) || !isSelectionMultiple && (0, utils_1.isGroupSelectItem)(flattenItem)) {
40
40
  const innerItemsJSX = getRenderItems({
41
41
  focusCloseChildIds: items,
42
42
  focusFlattenItems,
@@ -50,21 +50,21 @@ function getRenderItems(_ref) {
50
50
  mode: flattenItem.mode
51
51
  }, key + '_separator'), ...innerItemsJSX];
52
52
  }
53
- if ((0, utils_2.isGroupSelectItem)(flattenItem)) {
53
+ if ((0, utils_1.isGroupSelectItem)(flattenItem)) {
54
54
  return (0, react_1.createElement)(GroupSelectItem_1.GroupSelectItem, Object.assign({}, flattenItem, {
55
55
  items: items,
56
56
  itemRef: itemRef,
57
57
  key: key
58
58
  }));
59
59
  }
60
- if ((0, utils_2.isAccordionItem)(flattenItem)) {
60
+ if ((0, utils_1.isAccordionItem)(flattenItem)) {
61
61
  return (0, react_1.createElement)(AccordionItem_1.AccordionItem, Object.assign({}, flattenItem, {
62
62
  items: items,
63
63
  itemRef: itemRef,
64
64
  key: key
65
65
  }));
66
66
  }
67
- if ((0, utils_2.isNextListItem)(flattenItem)) {
67
+ if ((0, utils_1.isNextListItem)(flattenItem)) {
68
68
  return (0, react_1.createElement)(NextListItem_1.NextListItem, Object.assign({}, flattenItem, {
69
69
  focusId: id,
70
70
  items: items,
@@ -108,7 +108,7 @@ function useCreateBaseItems(_ref2) {
108
108
  allChildIds: []
109
109
  },
110
110
  footerItems: (_a = footerActiveElementsRefs === null || footerActiveElementsRefs === void 0 ? void 0 : footerActiveElementsRefs.map((itemRef, idx) => ({
111
- id: (0, utils_1.getFooterItemId)(idx),
111
+ id: (0, helpers_1.getFooterItemId)(idx),
112
112
  itemRef,
113
113
  parentId: constants_1.ITEM_PREFIXES.default,
114
114
  items: [],
@@ -49,6 +49,10 @@ export type BaseItem = WithSupportProps<{
49
49
  * Флаг отображения состояния выбранного элемента через switch
50
50
  */
51
51
  switch?: boolean;
52
+ /**
53
+ * Флаг отображения иконки у чекбоксов
54
+ */
55
+ showSwitchIcon?: boolean;
52
56
  itemWrapRender?(item: ReactNode): ReactNode;
53
57
  checked?: boolean;
54
58
  }>;
@@ -83,6 +87,7 @@ export type GroupItem = CommonGroupItem & {
83
87
  export type GroupSelectItem = CommonGroupItem & {
84
88
  items: Item[];
85
89
  type: 'group-select';
90
+ selectButtonLabel?: string;
86
91
  id?: ItemId;
87
92
  itemRef?: RefObject<HTMLElement>;
88
93
  };
@@ -22,7 +22,7 @@ exports.kindFlattenItems = kindFlattenItems;
22
22
  exports.extractActiveItems = extractActiveItems;
23
23
  const react_1 = require("react");
24
24
  const constants_1 = require("../../constants");
25
- const utils_1 = require("../../utils");
25
+ const helpers_1 = require("../../helpers");
26
26
  function isBaseItem(item) {
27
27
  return item && !('items' in item);
28
28
  }
@@ -61,7 +61,7 @@ function kindFlattenItems(_ref) {
61
61
  parentId = constants_1.ITEM_PREFIXES.default
62
62
  } = _ref2;
63
63
  var _a, _b;
64
- const autoId = prefix !== undefined ? (0, utils_1.getItemAutoId)(prefix, idx) : String(idx);
64
+ const autoId = prefix !== undefined ? (0, helpers_1.getItemAutoId)(prefix, idx) : String(idx);
65
65
  const itemId = (_a = !isGroupItem(item) ? item.id : undefined) !== null && _a !== void 0 ? _a : autoId;
66
66
  if (isBaseItem(item)) {
67
67
  flattenItems[itemId] = Object.assign(Object.assign({}, item), {
@@ -25,6 +25,7 @@ const loaders_1 = require("@snack-uikit/loaders");
25
25
  const scroll_1 = require("@snack-uikit/scroll");
26
26
  const utils_1 = require("@snack-uikit/utils");
27
27
  const helperComponents_1 = require("../../../helperComponents");
28
+ const utils_2 = require("../../../utils");
28
29
  const Items_1 = require("../../Items");
29
30
  const contexts_1 = require("../contexts");
30
31
  const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
@@ -190,7 +191,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
190
191
  children: itemsPinBottomJSX
191
192
  }), footer && (0, jsx_runtime_1.jsx)("div", {
192
193
  className: styles_module_scss_2.default.footer,
193
- onFocus: e => e.stopPropagation(),
194
+ onFocus: utils_2.stopPropagation,
194
195
  children: footer
195
196
  })]
196
197
  }));
@@ -11,6 +11,7 @@ Object.defineProperty(exports, "__esModule", {
11
11
  exports.HiddenTabButton = void 0;
12
12
  const jsx_runtime_1 = require("react/jsx-runtime");
13
13
  const react_1 = require("react");
14
+ const utils_1 = require("../../utils");
14
15
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
15
16
  exports.HiddenTabButton = (0, react_1.forwardRef)((_ref, ref) => {
16
17
  let {
@@ -25,14 +26,11 @@ exports.HiddenTabButton = (0, react_1.forwardRef)((_ref, ref) => {
25
26
  e.preventDefault();
26
27
  e.stopPropagation();
27
28
  }, [listRef]);
28
- const handleKeyDown = (0, react_1.useCallback)(e => {
29
- e.stopPropagation();
30
- }, []);
31
29
  return (0, jsx_runtime_1.jsx)("button", {
32
30
  type: 'button',
33
31
  "aria-hidden": true,
34
32
  ref: ref,
35
- onKeyDown: handleKeyDown,
33
+ onKeyDown: utils_1.stopPropagation,
36
34
  onFocus: handleFocus,
37
35
  className: styles_module_scss_1.default.hiddenBtn,
38
36
  tabIndex: tabIndex
@@ -12,6 +12,7 @@ export type SeparatorProps = {
12
12
  indeterminate?: boolean;
13
13
  checked?: boolean;
14
14
  itemRef?: ForwardedRef<HTMLElement>;
15
+ label?: string;
15
16
  };
16
17
  };
17
18
  export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;
@@ -16,6 +16,7 @@ const divider_1 = require("@snack-uikit/divider");
16
16
  const locale_1 = require("@snack-uikit/locale");
17
17
  const truncate_string_1 = require("@snack-uikit/truncate-string");
18
18
  const contexts_1 = require("../../components/Lists/contexts");
19
+ const utils_1 = require("../../utils");
19
20
  const constants_1 = require("./constants");
20
21
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
21
22
  function Separator(_ref) {
@@ -39,7 +40,8 @@ function Separator(_ref) {
39
40
  const {
40
41
  onClick,
41
42
  checked,
42
- itemRef
43
+ itemRef,
44
+ label
43
45
  } = selectButton;
44
46
  return (0, jsx_runtime_1.jsx)("span", {
45
47
  className: styles_module_scss_1.default.selectButton,
@@ -53,11 +55,9 @@ function Separator(_ref) {
53
55
  e.preventDefault();
54
56
  e.stopPropagation();
55
57
  },
56
- onFocus: e => {
57
- e.stopPropagation();
58
- },
58
+ onFocus: utils_1.stopPropagation,
59
59
  ref: itemRef,
60
- label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')
60
+ label: label !== null && label !== void 0 ? label : checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')
61
61
  })
62
62
  });
63
63
  }, [divider, mode, selectButton, size, t]);
@@ -0,0 +1,16 @@
1
+ import { ItemId } from './components';
2
+ /**
3
+ * Возвращает id для элемента футера
4
+ * @function helper
5
+ */
6
+ export declare const getFooterItemId: (id: ItemId) => string;
7
+ /**
8
+ * Возвращает id для элемента, подставляя перфикс
9
+ * @function helper
10
+ */
11
+ export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
12
+ /**
13
+ * Возвращает id для дефолтного элемента
14
+ * @function helper
15
+ */
16
+ export declare const getDefaultItemId: (id: ItemId) => string;
@@ -0,0 +1,25 @@
1
+ "use strict";
2
+
3
+ Object.defineProperty(exports, "__esModule", {
4
+ value: true
5
+ });
6
+ exports.getDefaultItemId = exports.getItemAutoId = exports.getFooterItemId = void 0;
7
+ const constants_1 = require("./constants");
8
+ /**
9
+ * Возвращает id для элемента футера
10
+ * @function helper
11
+ */
12
+ const getFooterItemId = id => `${constants_1.ITEM_PREFIXES.footer}__${id}`;
13
+ exports.getFooterItemId = getFooterItemId;
14
+ /**
15
+ * Возвращает id для элемента, подставляя перфикс
16
+ * @function helper
17
+ */
18
+ const getItemAutoId = (prefix, id) => [prefix, id].join('-');
19
+ exports.getItemAutoId = getItemAutoId;
20
+ /**
21
+ * Возвращает id для дефолтного элемента
22
+ * @function helper
23
+ */
24
+ const getDefaultItemId = id => (0, exports.getItemAutoId)(constants_1.ITEM_PREFIXES.default, id);
25
+ exports.getDefaultItemId = getDefaultItemId;
@@ -2,5 +2,5 @@ export * from './components';
2
2
  export type { SearchState } from './types';
3
3
  export { kindFlattenItems } from './components/Items';
4
4
  export * from './helperComponents/ItemContent';
5
- export * from './utils';
5
+ export * from './helpers';
6
6
  export * from './constants';
package/dist/cjs/index.js CHANGED
@@ -32,5 +32,5 @@ Object.defineProperty(exports, "kindFlattenItems", {
32
32
  }
33
33
  });
34
34
  __exportStar(require("./helperComponents/ItemContent"), exports);
35
- __exportStar(require("./utils"), exports);
35
+ __exportStar(require("./helpers"), exports);
36
36
  __exportStar(require("./constants"), exports);
@@ -1,16 +1,2 @@
1
- import { ItemId } from './components';
2
- /**
3
- * Возвращает id для элемента футера
4
- * @function helper
5
- */
6
- export declare const getFooterItemId: (id: ItemId) => string;
7
- /**
8
- * Возвращает id для элемента, подставляя перфикс
9
- * @function helper
10
- */
11
- export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
12
- /**
13
- * Возвращает id для дефолтного элемента
14
- * @function helper
15
- */
16
- export declare const getDefaultItemId: (id: ItemId) => string;
1
+ import { ReactEventHandler } from 'react';
2
+ export declare const stopPropagation: ReactEventHandler;
package/dist/cjs/utils.js CHANGED
@@ -3,23 +3,8 @@
3
3
  Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
- exports.getDefaultItemId = exports.getItemAutoId = exports.getFooterItemId = void 0;
7
- const constants_1 = require("./constants");
8
- /**
9
- * Возвращает id для элемента футера
10
- * @function helper
11
- */
12
- const getFooterItemId = id => `${constants_1.ITEM_PREFIXES.footer}__${id}`;
13
- exports.getFooterItemId = getFooterItemId;
14
- /**
15
- * Возвращает id для элемента, подставляя перфикс
16
- * @function helper
17
- */
18
- const getItemAutoId = (prefix, id) => [prefix, id].join('-');
19
- exports.getItemAutoId = getItemAutoId;
20
- /**
21
- * Возвращает id для дефолтного элемента
22
- * @function helper
23
- */
24
- const getDefaultItemId = id => (0, exports.getItemAutoId)(constants_1.ITEM_PREFIXES.default, id);
25
- exports.getDefaultItemId = getDefaultItemId;
6
+ exports.stopPropagation = void 0;
7
+ const stopPropagation = e => {
8
+ e.stopPropagation();
9
+ };
10
+ exports.stopPropagation = stopPropagation;
@@ -8,5 +8,5 @@ type AllBaseItemProps = FlattenBaseItem & {
8
8
  isParentNode?: boolean;
9
9
  onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
10
10
  };
11
- export declare function BaseItem({ beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, 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;
11
+ 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;
12
12
  export {};
@@ -21,7 +21,7 @@ import { CHECKBOX_SIZE_MAP } from './constants';
21
21
  import styles from './styles.module.css';
22
22
  export function BaseItem(_a) {
23
23
  var _b;
24
- var { beforeContent, afterContent, content, onClick, onMouseDown, id, expandIcon, disabled, open, itemRef, switch: switchProp, 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", "onKeyDown", "onFocus", "indeterminate", "checked", "onSelect", "onOpenNestedList", "isParentNode", "className", "inactive", "itemWrapRender"]);
24
+ 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"]);
25
25
  const interactive = !inactive;
26
26
  const { size = 's', marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
27
27
  const { level = 0 } = useCollapseLevelContext();
@@ -86,7 +86,7 @@ export function BaseItem(_a) {
86
86
  }
87
87
  };
88
88
  const props = extractSupportProps(rest);
89
- 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' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
89
+ 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 })] }) }));
90
90
  if (!itemWrapRender) {
91
91
  return itemJSX;
92
92
  }
@@ -1,4 +1,4 @@
1
1
  import { CommonFlattenProps, FlattenGroupSelectListItem } from '../types';
2
2
  type GroupSelectItemProps = Omit<FlattenGroupSelectListItem, 'type'> & CommonFlattenProps;
3
- export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
3
+ export declare function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }: GroupSelectItemProps): import("react/jsx-runtime").JSX.Element;
4
4
  export {};
@@ -1,7 +1,7 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { Separator } from '../../../helperComponents';
3
3
  import { useGroupItemSelection, useRenderItems } from '../hooks';
4
- export function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, }) {
4
+ export function GroupSelectItem({ label, truncate, divider, items, mode, id, itemRef, allChildIds, selectButtonLabel, }) {
5
5
  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
6
6
  items,
7
7
  id,
@@ -14,5 +14,6 @@ export function GroupSelectItem({ label, truncate, divider, items, mode, id, ite
14
14
  checked,
15
15
  itemRef,
16
16
  onClick: handleOnSelect,
17
+ label: selectButtonLabel,
17
18
  } }), itemsJSX] }));
18
19
  }
@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import cn from 'classnames';
3
3
  import { SearchPrivate } from '@snack-uikit/search-private';
4
4
  import { ITEM_PREFIXES } from '../../../constants';
5
+ import { stopPropagation } from '../../../utils';
5
6
  import { useNewListContext } from '../../Lists/contexts';
6
7
  import commonStyles from '../styles.module.css';
7
8
  import styles from './styles.module.css';
@@ -12,11 +13,8 @@ export function SearchItem({ search, itemRef }) {
12
13
  e.preventDefault();
13
14
  }
14
15
  };
15
- const handleFocus = (e) => {
16
- e.stopPropagation();
17
- };
18
16
  if (!search) {
19
17
  return null;
20
18
  }
21
- 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 })) }));
19
+ 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 })) }));
22
20
  }
@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { createRef, useMemo } from 'react';
4
4
  import { ITEM_PREFIXES } from '../../constants';
5
5
  import { Separator } from '../../helperComponents';
6
- import { getFooterItemId } from '../../utils';
6
+ import { getFooterItemId } from '../../helpers';
7
7
  import { useNewListContext, useSelectionContext } from '../Lists/contexts';
8
8
  import { AccordionItem } from './AccordionItem';
9
9
  import { BaseItem } from './BaseItem';
@@ -49,6 +49,10 @@ export type BaseItem = WithSupportProps<{
49
49
  * Флаг отображения состояния выбранного элемента через switch
50
50
  */
51
51
  switch?: boolean;
52
+ /**
53
+ * Флаг отображения иконки у чекбоксов
54
+ */
55
+ showSwitchIcon?: boolean;
52
56
  itemWrapRender?(item: ReactNode): ReactNode;
53
57
  checked?: boolean;
54
58
  }>;
@@ -83,6 +87,7 @@ export type GroupItem = CommonGroupItem & {
83
87
  export type GroupSelectItem = CommonGroupItem & {
84
88
  items: Item[];
85
89
  type: 'group-select';
90
+ selectButtonLabel?: string;
86
91
  id?: ItemId;
87
92
  itemRef?: RefObject<HTMLElement>;
88
93
  };
@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
11
11
  };
12
12
  import { createRef } from 'react';
13
13
  import { ITEM_PREFIXES } from '../../constants';
14
- import { getItemAutoId } from '../../utils';
14
+ import { getItemAutoId } from '../../helpers';
15
15
  export function isBaseItem(item) {
16
16
  return item && !('items' in item);
17
17
  }
@@ -17,6 +17,7 @@ import { Spinner } from '@snack-uikit/loaders';
17
17
  import { Scroll } from '@snack-uikit/scroll';
18
18
  import { extractSupportProps } from '@snack-uikit/utils';
19
19
  import { ListEmptyState, useEmptyState } from '../../../helperComponents';
20
+ import { stopPropagation } from '../../../utils';
20
21
  import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
21
22
  import { useNewListContext, useSelectionContext } from '../contexts';
22
23
  import commonStyles from '../styles.module.css';
@@ -81,7 +82,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
81
82
  innerScrollRef.current = ref;
82
83
  if (scrollContainerRef)
83
84
  scrollContainerRef.current = ref;
84
- }, 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 }))] })));
85
+ }, 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 }))] })));
85
86
  if (!nested) {
86
87
  return listJSX;
87
88
  }
@@ -1,5 +1,6 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { forwardRef, useCallback } from 'react';
3
+ import { stopPropagation } from '../../utils';
3
4
  import styles from './styles.module.css';
4
5
  export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
5
6
  const handleFocus = useCallback((e) => {
@@ -10,8 +11,5 @@ export const HiddenTabButton = forwardRef(({ listRef, tabIndex }, ref) => {
10
11
  e.preventDefault();
11
12
  e.stopPropagation();
12
13
  }, [listRef]);
13
- const handleKeyDown = useCallback((e) => {
14
- e.stopPropagation();
15
- }, []);
16
- return (_jsx("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: handleKeyDown, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
14
+ return (_jsx("button", { type: 'button', "aria-hidden": true, ref: ref, onKeyDown: stopPropagation, onFocus: handleFocus, className: styles.hiddenBtn, tabIndex: tabIndex }));
17
15
  });
@@ -12,6 +12,7 @@ export type SeparatorProps = {
12
12
  indeterminate?: boolean;
13
13
  checked?: boolean;
14
14
  itemRef?: ForwardedRef<HTMLElement>;
15
+ label?: string;
15
16
  };
16
17
  };
17
18
  export declare function Separator({ label, truncate, divider, mode, selectButton }: SeparatorProps): import("react/jsx-runtime").JSX.Element | null;
@@ -5,6 +5,7 @@ import { Divider } from '@snack-uikit/divider';
5
5
  import { useLocale } from '@snack-uikit/locale';
6
6
  import { TruncateString } from '@snack-uikit/truncate-string';
7
7
  import { useNewListContext } from '../../components/Lists/contexts';
8
+ import { stopPropagation } from '../../utils';
8
9
  import { SELECT_BUTTON_SIZE_MAP } from './constants';
9
10
  import styles from './styles.module.css';
10
11
  export function Separator({ label, truncate, divider, mode = 'secondary', selectButton }) {
@@ -14,14 +15,12 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
14
15
  if (!selectButton) {
15
16
  return null;
16
17
  }
17
- const { onClick, checked, itemRef } = selectButton;
18
+ const { onClick, checked, itemRef, label } = selectButton;
18
19
  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 => {
19
20
  onClick === null || onClick === void 0 ? void 0 : onClick(e);
20
21
  e.preventDefault();
21
22
  e.stopPropagation();
22
- }, onFocus: e => {
23
- e.stopPropagation();
24
- }, ref: itemRef, label: checked ? t('groupSelectButton.reset') : t('groupSelectButton.select') }) }));
23
+ }, onFocus: stopPropagation, ref: itemRef, label: label !== null && label !== void 0 ? label : (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')) }) }));
25
24
  }, [divider, mode, selectButton, size, t]);
26
25
  if (label) {
27
26
  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 })] })] }));
@@ -0,0 +1,16 @@
1
+ import { ItemId } from './components';
2
+ /**
3
+ * Возвращает id для элемента футера
4
+ * @function helper
5
+ */
6
+ export declare const getFooterItemId: (id: ItemId) => string;
7
+ /**
8
+ * Возвращает id для элемента, подставляя перфикс
9
+ * @function helper
10
+ */
11
+ export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
12
+ /**
13
+ * Возвращает id для дефолтного элемента
14
+ * @function helper
15
+ */
16
+ export declare const getDefaultItemId: (id: ItemId) => string;
@@ -0,0 +1,16 @@
1
+ import { ITEM_PREFIXES } from './constants';
2
+ /**
3
+ * Возвращает id для элемента футера
4
+ * @function helper
5
+ */
6
+ export const getFooterItemId = (id) => `${ITEM_PREFIXES.footer}__${id}`;
7
+ /**
8
+ * Возвращает id для элемента, подставляя перфикс
9
+ * @function helper
10
+ */
11
+ export const getItemAutoId = (prefix, id) => [prefix, id].join('-');
12
+ /**
13
+ * Возвращает id для дефолтного элемента
14
+ * @function helper
15
+ */
16
+ export const getDefaultItemId = (id) => getItemAutoId(ITEM_PREFIXES.default, id);
@@ -2,5 +2,5 @@ export * from './components';
2
2
  export type { SearchState } from './types';
3
3
  export { kindFlattenItems } from './components/Items';
4
4
  export * from './helperComponents/ItemContent';
5
- export * from './utils';
5
+ export * from './helpers';
6
6
  export * from './constants';
package/dist/esm/index.js CHANGED
@@ -1,5 +1,5 @@
1
1
  export * from './components';
2
2
  export { kindFlattenItems } from './components/Items';
3
3
  export * from './helperComponents/ItemContent';
4
- export * from './utils';
4
+ export * from './helpers';
5
5
  export * from './constants';
@@ -1,16 +1,2 @@
1
- import { ItemId } from './components';
2
- /**
3
- * Возвращает id для элемента футера
4
- * @function helper
5
- */
6
- export declare const getFooterItemId: (id: ItemId) => string;
7
- /**
8
- * Возвращает id для элемента, подставляя перфикс
9
- * @function helper
10
- */
11
- export declare const getItemAutoId: (prefix: ItemId, id: ItemId) => string;
12
- /**
13
- * Возвращает id для дефолтного элемента
14
- * @function helper
15
- */
16
- export declare const getDefaultItemId: (id: ItemId) => string;
1
+ import { ReactEventHandler } from 'react';
2
+ export declare const stopPropagation: ReactEventHandler;
package/dist/esm/utils.js CHANGED
@@ -1,16 +1,3 @@
1
- import { ITEM_PREFIXES } from './constants';
2
- /**
3
- * Возвращает id для элемента футера
4
- * @function helper
5
- */
6
- export const getFooterItemId = (id) => `${ITEM_PREFIXES.footer}__${id}`;
7
- /**
8
- * Возвращает id для элемента, подставляя перфикс
9
- * @function helper
10
- */
11
- export const getItemAutoId = (prefix, id) => [prefix, id].join('-');
12
- /**
13
- * Возвращает id для дефолтного элемента
14
- * @function helper
15
- */
16
- export const getDefaultItemId = (id) => getItemAutoId(ITEM_PREFIXES.default, id);
1
+ export const stopPropagation = e => {
2
+ e.stopPropagation();
3
+ };
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.26.4",
7
+ "version": "0.27.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -54,5 +54,5 @@
54
54
  "peerDependencies": {
55
55
  "@snack-uikit/locale": "*"
56
56
  },
57
- "gitHead": "245f761e18557fddf0d10e8277e6b2e2740a81a4"
57
+ "gitHead": "cafb29b74a6ac4d38594e9d46599617925165935"
58
58
  }
@@ -38,6 +38,7 @@ export function BaseItem({
38
38
  open,
39
39
  itemRef,
40
40
  switch: switchProp,
41
+ showSwitchIcon,
41
42
  onKeyDown,
42
43
  onFocus,
43
44
  indeterminate,
@@ -188,7 +189,12 @@ export function BaseItem({
188
189
  {afterContent}
189
190
 
190
191
  {switchProp && interactive && (
191
- <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
192
+ <Switch
193
+ disabled={disabled}
194
+ checked={isChecked}
195
+ data-test-id='list__base-item-switch'
196
+ showIcon={showSwitchIcon}
197
+ />
192
198
  )}
193
199
 
194
200
  {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
@@ -13,6 +13,7 @@ export function GroupSelectItem({
13
13
  id,
14
14
  itemRef,
15
15
  allChildIds,
16
+ selectButtonLabel,
16
17
  }: GroupSelectItemProps) {
17
18
  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
18
19
  items,
@@ -35,6 +36,7 @@ export function GroupSelectItem({
35
36
  checked,
36
37
  itemRef,
37
38
  onClick: handleOnSelect,
39
+ label: selectButtonLabel,
38
40
  }}
39
41
  />
40
42
 
@@ -1,10 +1,11 @@
1
1
  import cn from 'classnames';
2
- import { FocusEvent, KeyboardEvent, RefObject } from 'react';
2
+ import { KeyboardEvent, RefObject } from 'react';
3
3
 
4
4
  import { SearchPrivate } from '@snack-uikit/search-private';
5
5
 
6
6
  import { ITEM_PREFIXES } from '../../../constants';
7
7
  import { SearchState } from '../../../types';
8
+ import { stopPropagation } from '../../../utils';
8
9
  import { useNewListContext } from '../../Lists/contexts';
9
10
  import commonStyles from '../styles.module.scss';
10
11
  import styles from './styles.module.scss';
@@ -23,10 +24,6 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
23
24
  }
24
25
  };
25
26
 
26
- const handleFocus = (e: FocusEvent<HTMLInputElement>) => {
27
- e.stopPropagation();
28
- };
29
-
30
27
  if (!search) {
31
28
  return null;
32
29
  }
@@ -37,7 +34,7 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
37
34
  size={size}
38
35
  tabIndex={ITEM_PREFIXES.search === firstItemId ? 0 : -1}
39
36
  onKeyDown={handleKeyDown}
40
- onFocus={handleFocus}
37
+ onFocus={stopPropagation}
41
38
  {...search}
42
39
  ref={itemRef as RefObject<HTMLInputElement>}
43
40
  />
@@ -2,7 +2,7 @@ import { createRef, RefObject, useMemo } from 'react';
2
2
 
3
3
  import { ITEM_PREFIXES } from '../../constants';
4
4
  import { Separator } from '../../helperComponents';
5
- import { getFooterItemId } from '../../utils';
5
+ import { getFooterItemId } from '../../helpers';
6
6
  import { useNewListContext, useSelectionContext } from '../Lists/contexts';
7
7
  import { AccordionItem } from './AccordionItem';
8
8
  import { BaseItem } from './BaseItem';
@@ -58,6 +58,10 @@ export type BaseItem = WithSupportProps<{
58
58
  * Флаг отображения состояния выбранного элемента через switch
59
59
  */
60
60
  switch?: boolean;
61
+ /**
62
+ * Флаг отображения иконки у чекбоксов
63
+ */
64
+ showSwitchIcon?: boolean;
61
65
 
62
66
  itemWrapRender?(item: ReactNode): ReactNode;
63
67
 
@@ -106,6 +110,7 @@ export type GroupItem = CommonGroupItem & {
106
110
  export type GroupSelectItem = CommonGroupItem & {
107
111
  items: Item[];
108
112
  type: 'group-select';
113
+ selectButtonLabel?: string;
109
114
 
110
115
  id?: ItemId;
111
116
  itemRef?: RefObject<HTMLElement>;
@@ -2,7 +2,7 @@ import { createRef } from 'react';
2
2
 
3
3
  import { ITEM_PREFIXES } from '../../constants';
4
4
  import { ItemContentProps } from '../../helperComponents';
5
- import { getItemAutoId } from '../../utils';
5
+ import { getItemAutoId } from '../../helpers';
6
6
  import {
7
7
  AccordionItem,
8
8
  AnyType,
@@ -7,6 +7,7 @@ import { Scroll } from '@snack-uikit/scroll';
7
7
  import { extractSupportProps } from '@snack-uikit/utils';
8
8
 
9
9
  import { ListEmptyState, useEmptyState } from '../../../helperComponents';
10
+ import { stopPropagation } from '../../../utils';
10
11
  import { PinBottomGroupItem, PinTopGroupItem, SearchItem, useRenderItems } from '../../Items';
11
12
  import { useNewListContext, useSelectionContext } from '../contexts';
12
13
  import commonStyles from '../styles.module.scss';
@@ -209,7 +210,7 @@ export const ListPrivate = forwardRef(
209
210
  {Number(pinBottom?.length) > 0 && <PinBottomGroupItem>{itemsPinBottomJSX}</PinBottomGroupItem>}
210
211
 
211
212
  {footer && (
212
- <div className={styles.footer} onFocus={e => e.stopPropagation()}>
213
+ <div className={styles.footer} onFocus={stopPropagation}>
213
214
  {footer}
214
215
  </div>
215
216
  )}
@@ -1,5 +1,6 @@
1
- import { FocusEvent, forwardRef, KeyboardEvent, RefObject, useCallback } from 'react';
1
+ import { FocusEvent, forwardRef, RefObject, useCallback } from 'react';
2
2
 
3
+ import { stopPropagation } from '../../utils';
3
4
  import styles from './styles.module.scss';
4
5
 
5
6
  type HiddenTabButtonProps = {
@@ -20,16 +21,12 @@ export const HiddenTabButton = forwardRef<HTMLButtonElement, HiddenTabButtonProp
20
21
  [listRef],
21
22
  );
22
23
 
23
- const handleKeyDown = useCallback((e: KeyboardEvent<HTMLButtonElement>) => {
24
- e.stopPropagation();
25
- }, []);
26
-
27
24
  return (
28
25
  <button
29
26
  type='button'
30
27
  aria-hidden
31
28
  ref={ref}
32
- onKeyDown={handleKeyDown}
29
+ onKeyDown={stopPropagation}
33
30
  onFocus={handleFocus}
34
31
  className={styles.hiddenBtn}
35
32
  tabIndex={tabIndex}
@@ -6,6 +6,7 @@ import { useLocale } from '@snack-uikit/locale';
6
6
  import { TruncateString, TruncateStringProps } from '@snack-uikit/truncate-string';
7
7
 
8
8
  import { useNewListContext } from '../../components/Lists/contexts';
9
+ import { stopPropagation } from '../../utils';
9
10
  import { SELECT_BUTTON_SIZE_MAP } from './constants';
10
11
  import styles from './styles.module.scss';
11
12
 
@@ -21,6 +22,7 @@ export type SeparatorProps = {
21
22
  indeterminate?: boolean;
22
23
  checked?: boolean;
23
24
  itemRef?: ForwardedRef<HTMLElement>;
25
+ label?: string;
24
26
  };
25
27
  };
26
28
 
@@ -34,7 +36,7 @@ export function Separator({ label, truncate, divider, mode = 'secondary', select
34
36
  return null;
35
37
  }
36
38
 
37
- const { onClick, checked, itemRef } = selectButton;
39
+ const { onClick, checked, itemRef, label } = selectButton;
38
40
 
39
41
  return (
40
42
  <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
46
48
  e.preventDefault();
47
49
  e.stopPropagation();
48
50
  }}
49
- onFocus={e => {
50
- e.stopPropagation();
51
- }}
51
+ onFocus={stopPropagation}
52
52
  ref={itemRef as RefObject<HTMLButtonElement>}
53
- label={checked ? t('groupSelectButton.reset') : t('groupSelectButton.select')}
53
+ label={label ?? (checked ? t('groupSelectButton.reset') : t('groupSelectButton.select'))}
54
54
  />
55
55
  </span>
56
56
  );
package/src/helpers.ts ADDED
@@ -0,0 +1,20 @@
1
+ import { ItemId } from './components';
2
+ import { ITEM_PREFIXES } from './constants';
3
+
4
+ /**
5
+ * Возвращает id для элемента футера
6
+ * @function helper
7
+ */
8
+ export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
9
+
10
+ /**
11
+ * Возвращает id для элемента, подставляя перфикс
12
+ * @function helper
13
+ */
14
+ export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
15
+
16
+ /**
17
+ * Возвращает id для дефолтного элемента
18
+ * @function helper
19
+ */
20
+ export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);
package/src/index.ts CHANGED
@@ -5,5 +5,5 @@ export { kindFlattenItems } from './components/Items';
5
5
 
6
6
  export * from './helperComponents/ItemContent';
7
7
 
8
- export * from './utils';
8
+ export * from './helpers';
9
9
  export * from './constants';
package/src/utils.ts CHANGED
@@ -1,20 +1,5 @@
1
- import { ItemId } from './components';
2
- import { ITEM_PREFIXES } from './constants';
1
+ import { ReactEventHandler } from 'react';
3
2
 
4
- /**
5
- * Возвращает id для элемента футера
6
- * @function helper
7
- */
8
- export const getFooterItemId = (id: ItemId) => `${ITEM_PREFIXES.footer}__${id}`;
9
-
10
- /**
11
- * Возвращает id для элемента, подставляя перфикс
12
- * @function helper
13
- */
14
- export const getItemAutoId = (prefix: ItemId, id: ItemId) => [prefix, id].join('-');
15
-
16
- /**
17
- * Возвращает id для дефолтного элемента
18
- * @function helper
19
- */
20
- export const getDefaultItemId = (id: ItemId) => getItemAutoId(ITEM_PREFIXES.default, id);
3
+ export const stopPropagation: ReactEventHandler = e => {
4
+ e.stopPropagation();
5
+ };