@snack-uikit/list 0.21.12-preview-c6f5cbae.0 → 0.22.0

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 (28) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/README.md +2 -0
  3. package/dist/cjs/components/Items/AccordionItem/AccordionItem.js +9 -3
  4. package/dist/cjs/components/Items/BaseItem/BaseItem.js +4 -2
  5. package/dist/cjs/components/Items/BaseItem/styles.module.css +15 -6
  6. package/dist/cjs/components/Items/NextListItem/NextListItem.js +4 -1
  7. package/dist/cjs/components/Lists/List/List.d.ts +1 -0
  8. package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js +4 -3
  9. package/dist/cjs/components/Lists/types.d.ts +2 -0
  10. package/dist/cjs/helperComponents/CollapseBlockPrivate/styles.module.css +0 -11
  11. package/dist/cjs/helperComponents/Separator/styles.module.css +3 -3
  12. package/dist/esm/components/Items/AccordionItem/AccordionItem.js +6 -3
  13. package/dist/esm/components/Items/BaseItem/BaseItem.js +1 -1
  14. package/dist/esm/components/Items/BaseItem/styles.module.css +15 -6
  15. package/dist/esm/components/Items/NextListItem/NextListItem.js +4 -2
  16. package/dist/esm/components/Lists/List/List.d.ts +1 -0
  17. package/dist/esm/components/Lists/ListPrivate/ListPrivate.js +2 -2
  18. package/dist/esm/components/Lists/types.d.ts +2 -0
  19. package/dist/esm/helperComponents/CollapseBlockPrivate/styles.module.css +0 -11
  20. package/dist/esm/helperComponents/Separator/styles.module.css +3 -3
  21. package/package.json +3 -3
  22. package/src/components/Items/AccordionItem/AccordionItem.tsx +19 -3
  23. package/src/components/Items/BaseItem/BaseItem.tsx +4 -2
  24. package/src/components/Items/BaseItem/styles.module.scss +40 -2
  25. package/src/components/Items/NextListItem/NextListItem.tsx +11 -2
  26. package/src/components/Lists/ListPrivate/ListPrivate.tsx +9 -5
  27. package/src/components/Lists/types.ts +2 -0
  28. package/src/helperComponents/CollapseBlockPrivate/styles.module.scss +0 -15
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
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.22.0 (2024-12-18)
7
+
8
+
9
+ ### Features
10
+
11
+ * **PDS-1124:** add cn; fix accordion list offset; change view selection parent item ([c79e325](https://github.com/cloud-ru-tech/snack-uikit/commit/c79e325728a81541a8344bb787b301cf77b24aa8))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.21.11 (2024-12-17)
7
18
 
8
19
  ### Only dependencies have been changed
package/README.md CHANGED
@@ -75,6 +75,7 @@
75
75
  | collapse | `CollapseState` | {} | Настройки раскрытия элементов |
76
76
  | loading | `boolean` | - | Флаг, отвещающий за состояние загрузки списка |
77
77
  | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
78
+ | scrollContainerClassName | `string` | - | CSS-класс для scroll обертки основного списка айтемов |
78
79
  | selection | `SelectionSingleState \| SelectionMultipleState` | - | |
79
80
  | size | "s" \| "m" \| "l" | s | Размер списка |
80
81
  | marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
@@ -107,6 +108,7 @@
107
108
  | onKeyDown | `(e: KeyboardEvent<HTMLElement>) => void` | - | Обработчик события по нажатию клавиш |
108
109
  | hasListInFocusChain | `boolean` | true | Флаг, отвещающий за включение самого родительского контейнера листа в цепочку фокусирующихся элементов |
109
110
  | scrollToSelectedItem | `boolean` | - | Флаг, отвещающий за прокручивание до выбранного элемента |
111
+ | scrollContainerClassName | `string` | - | CSS-класс для scroll обертки основного списка айтемов |
110
112
  | selection | `SelectionSingleState \| SelectionMultipleState` | - | |
111
113
  | size | "s" \| "m" \| "l" | s | Размер списка |
112
114
  | marker | `boolean` | true | Отображать ли маркер у выбранного жлемента списка |
package/dist/cjs/components/Items/AccordionItem/AccordionItem.js CHANGED
@@ -28,16 +28,21 @@ function AccordionItem(_a) {
28
28
  } = _a,
29
29
  option = __rest(_a, ["id", "disabled", "allChildIds", "items"]);
30
30
  const {
31
- level = 1
31
+ level = 0
32
32
  } = (0, contexts_1.useCollapseLevelContext)();
33
33
  const {
34
34
  openCollapseItems = [],
35
35
  toggleOpenCollapseItem
36
36
  } = (0, contexts_1.useCollapseContext)();
37
+ const {
38
+ value,
39
+ isSelectionSingle,
40
+ isSelectionMultiple
41
+ } = (0, contexts_1.useSelectionContext)();
37
42
  const {
38
43
  indeterminate,
39
- checked,
40
- handleOnSelect
44
+ handleOnSelect,
45
+ checked: checkedProp
41
46
  } = (0, hooks_1.useGroupItemSelection)({
42
47
  items,
43
48
  id,
@@ -45,6 +50,7 @@ function AccordionItem(_a) {
45
50
  allChildIds
46
51
  });
47
52
  const isOpen = Boolean(openCollapseItems.includes(id !== null && id !== void 0 ? id : ''));
53
+ const checked = Boolean(indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value) || isSelectionMultiple && checkedProp);
48
54
  const handleKeyDown = (0, react_1.useCallback)(() => {
49
55
  toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
50
56
  }, [id, toggleOpenCollapseItem]);
package/dist/cjs/components/Items/BaseItem/BaseItem.js CHANGED
@@ -137,12 +137,11 @@ function BaseItem(_a) {
137
137
  "data-inactive": inactive || undefined,
138
138
  "data-disabled": disabled || undefined,
139
139
  "data-variant": mode || undefined,
140
- "data-checked": isParentNode && (indeterminate || isChecked) || isChecked && !switchProp || undefined,
140
+ "data-checked": isParentNode && isChecked || !isParentNode && isChecked && !switchProp || undefined,
141
141
  children: (0, jsx_runtime_1.jsxs)("li", {
142
142
  "data-type": 'outside',
143
143
  role: 'menuitem',
144
144
  "data-test-id": props['data-test-id'] || 'list__base-item_' + id,
145
- "data-checked": isParentNode && (indeterminate || isChecked) || isChecked && !switchProp || undefined,
146
145
  ref: itemRef,
147
146
  className: (0, classnames_1.default)(styles_module_scss_1.default.listItem, styles_module_scss_2.default.droplistItem),
148
147
  "data-size": size,
@@ -157,6 +156,9 @@ function BaseItem(_a) {
157
156
  style: {
158
157
  '--level': level
159
158
  },
159
+ "data-level-one": level === 1 || undefined,
160
+ "data-level-more-one": level > 1 || undefined,
161
+ "data-checked": isParentNode && (indeterminate || isChecked) || isChecked && !switchProp || undefined,
160
162
  children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (0, jsx_runtime_1.jsx)("div", {
161
163
  className: styles_module_scss_2.default.markerContainer,
162
164
  "data-test-id": 'list__base-item-marker'
package/dist/cjs/components/Items/BaseItem/styles.module.css CHANGED
@@ -52,22 +52,31 @@
52
52
  .droplistItem{
53
53
  width:100%;
54
54
  }
55
- .droplistItem[data-size=s]{
56
- padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-s-container-horizontal-padding, 8px));
55
+ .droplistItem[data-size=s][data-level-one]{
56
+ padding-left:calc(var(--space-drop-list-item-s-container-horizontal-padding, 8px) + var(--size-drop-list-item-nesting-level-gap-compensator-s, 16px) + var(--space-drop-list-item-s-container-gap, 8px));
57
+ }
58
+ .droplistItem[data-size=s][data-level-more-one]{
59
+ padding-left:calc(var(--space-drop-list-item-s-container-horizontal-padding, 8px) + var(--size-drop-list-item-nesting-level-gap-compensator-s, 16px) + var(--space-drop-list-item-s-container-gap, 8px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-offset-s, 24px));
57
60
  }
58
61
  .droplistItem[data-size=s] .headline{
59
62
  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
60
63
  min-height:var(--size-drop-list-item-headline, 24px);
61
64
  }
62
- .droplistItem[data-size=m]{
63
- padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-m-container-horizontal-padding, 10px));
65
+ .droplistItem[data-size=m][data-level-one]{
66
+ padding-left:calc(var(--space-drop-list-item-m-container-horizontal-padding, 10px) + var(--size-drop-list-item-nesting-level-gap-compensator-m, 16px) + var(--space-drop-list-item-m-container-gap, 8px));
67
+ }
68
+ .droplistItem[data-size=m][data-level-more-one]{
69
+ padding-left:calc(var(--space-drop-list-item-m-container-horizontal-padding, 10px) + var(--size-drop-list-item-nesting-level-gap-compensator-m, 16px) + var(--space-drop-list-item-m-container-gap, 8px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-offset-m, 24px));
64
70
  }
65
71
  .droplistItem[data-size=m] .headline{
66
72
  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
67
73
  min-height:var(--size-drop-list-item-headline, 24px);
68
74
  }
69
- .droplistItem[data-size=l]{
70
- padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-l-container-horizontal-padding, 12px));
75
+ .droplistItem[data-size=l][data-level-one]{
76
+ padding-left:calc(var(--space-drop-list-item-l-container-horizontal-padding, 12px) + var(--size-drop-list-item-nesting-level-gap-compensator-l, 16px) + var(--space-drop-list-item-l-container-gap, 8px));
77
+ }
78
+ .droplistItem[data-size=l][data-level-more-one]{
79
+ padding-left:calc(var(--space-drop-list-item-l-container-horizontal-padding, 12px) + var(--size-drop-list-item-nesting-level-gap-compensator-l, 16px) + var(--space-drop-list-item-l-container-gap, 8px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-offset-l, 24px));
71
80
  }
72
81
  .droplistItem[data-size=l] .headline{
73
82
  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
package/dist/cjs/components/Items/NextListItem/NextListItem.js CHANGED
@@ -43,6 +43,8 @@ function NextListItem(_a) {
43
43
  focusFlattenItems
44
44
  } = (0, contexts_1.useNewListContext)();
45
45
  const {
46
+ value,
47
+ isSelectionSingle,
46
48
  isSelectionMultiple
47
49
  } = (0, contexts_1.useSelectionContext)();
48
50
  const {
@@ -84,7 +86,7 @@ function NextListItem(_a) {
84
86
  }, [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId]);
85
87
  const {
86
88
  indeterminate,
87
- checked,
89
+ checked: checkedProp,
88
90
  handleOnSelect
89
91
  } = (0, hooks_1.useGroupItemSelection)({
90
92
  items: (0, utils_1.isNextListItem)(item) ? item.items : [],
@@ -98,6 +100,7 @@ function NextListItem(_a) {
98
100
  return true;
99
101
  }, [forceUpdateActiveItemId]);
100
102
  const isOpen = (0, react_1.useMemo)(() => Boolean(!disabled && activeItemId && focusFlattenItems[focusId].allChildIds.includes(activeItemId)), [activeItemId, disabled, focusFlattenItems, focusId]);
103
+ const checked = Boolean(indeterminate && !open && isSelectionSingle && value && allChildIds.includes(value) || isSelectionMultiple && checkedProp);
101
104
  (0, react_1.useEffect)(() => {
102
105
  setOpen(open => open && isOpen);
103
106
  }, [id, isOpen]);
package/dist/cjs/components/Lists/List/List.d.ts CHANGED
@@ -19,4 +19,5 @@ export declare const List: import("react").ForwardRefExoticComponent<{
19
19
  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
20
20
  hasListInFocusChain?: boolean;
21
21
  scrollToSelectedItem?: boolean;
22
+ scrollContainerClassName?: string;
22
23
  } & import("../contexts").SelectionState & import("../contexts").PublicListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;
package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js CHANGED
@@ -55,9 +55,10 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
55
55
  errorDataState,
56
56
  dataError,
57
57
  dataFiltered,
58
- scrollToSelectedItem = false
58
+ scrollToSelectedItem = false,
59
+ scrollContainerClassName
59
60
  } = _a,
60
- props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem"]);
61
+ props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem", "scrollContainerClassName"]);
61
62
  const {
62
63
  size = 's',
63
64
  flattenItems,
@@ -132,7 +133,7 @@ exports.ListPrivate = (0, react_1.forwardRef)((_a, ref) => {
132
133
  [styles_module_scss_1.default.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
133
134
  [styles_module_scss_1.default.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
134
135
  [styles_module_scss_1.default.scrollContainerL]: scroll && limitedScrollHeight && size === 'l'
135
- }),
136
+ }, scrollContainerClassName),
136
137
  barHideStrategy: 'never',
137
138
  size: size === 's' ? 's' : 'm',
138
139
  ref: scrollContainerRef,
package/dist/cjs/components/Lists/types.d.ts CHANGED
@@ -49,6 +49,8 @@ export type ListProps = WithSupportProps<{
49
49
  hasListInFocusChain?: boolean;
50
50
  /** Флаг, отвещающий за прокручивание до выбранного элемента */
51
51
  scrollToSelectedItem?: boolean;
52
+ /** CSS-класс для scroll обертки основного списка айтемов */
53
+ scrollContainerClassName?: string;
52
54
  } & SelectionState & PublicListContextType & ScrollProps & EmptyState>;
53
55
  export type DroplistProps = {
54
56
  /** Ссылка на элемент-триггер для дроплиста */
package/dist/cjs/helperComponents/CollapseBlockPrivate/styles.module.css CHANGED
@@ -24,15 +24,4 @@
24
24
  display:none;
25
25
  box-sizing:border-box;
26
26
  width:100%;
27
- }
28
- .content::before{
29
- pointer-events:none;
30
- content:"";
31
- position:absolute;
32
- top:0;
33
- left:0;
34
- width:100%;
35
- height:100%;
36
- opacity:var(--opacity-a004, 0.04);
37
- background-color:var(--sys-neutral-accent-default, #787b8a);
38
27
  }
package/dist/cjs/helperComponents/Separator/styles.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
13
13
  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
14
14
  gap:var(--space-drop-list-item-s-container-gap, 8px);
15
- height:var(--size-drop-list-item-s-container-separator-subheader-height, 32px);
15
+ height:var(--size-drop-list-item-container-separator-subheader-height-s, 32px);
16
16
  }
17
17
  .separatorWithLabel[data-size=s] .label[data-mode=primary]{
18
18
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
@@ -36,7 +36,7 @@
36
36
  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
37
37
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
38
38
  gap:var(--space-drop-list-item-m-container-gap, 8px);
39
- height:var(--size-drop-list-item-m-container-separator-subheader-height, 40px);
39
+ height:var(--size-drop-list-item-container-separator-subheader-height-m, 40px);
40
40
  }
41
41
  .separatorWithLabel[data-size=m] .label[data-mode=primary]{
42
42
  font-family:var(--sans-label-l-font-family, SB Sans Interface);
@@ -60,7 +60,7 @@
60
60
  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
61
61
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
62
62
  gap:var(--space-drop-list-item-l-container-gap, 8px);
63
- height:var(--size-drop-list-item-l-container-separator-subheader-height, 48px);
63
+ height:var(--size-drop-list-item-container-separator-subheader-height-l, 48px);
64
64
  }
65
65
  .separatorWithLabel[data-size=l] .label[data-mode=primary]{
66
66
  font-family:var(--sans-title-m-font-family, SB Sans Interface);
package/dist/esm/components/Items/AccordionItem/AccordionItem.js CHANGED
@@ -13,20 +13,23 @@ import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import { useCallback } from 'react';
14
14
  import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
15
15
  import { CollapseBlockPrivate } from '../../../helperComponents';
16
- import { CollapseLevelContext, useCollapseContext, useCollapseLevelContext } from '../../Lists/contexts';
16
+ import { CollapseLevelContext, useCollapseContext, useCollapseLevelContext, useSelectionContext, } from '../../Lists/contexts';
17
17
  import { BaseItem } from '../BaseItem';
18
18
  import { useGroupItemSelection, useRenderItems } from '../hooks';
19
19
  export function AccordionItem(_a) {
20
20
  var { id, disabled, allChildIds, items } = _a, option = __rest(_a, ["id", "disabled", "allChildIds", "items"]);
21
- const { level = 1 } = useCollapseLevelContext();
21
+ const { level = 0 } = useCollapseLevelContext();
22
22
  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
23
- const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
23
+ const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
24
+ const { indeterminate, handleOnSelect, checked: checkedProp, } = useGroupItemSelection({
24
25
  items,
25
26
  id,
26
27
  disabled,
27
28
  allChildIds,
28
29
  });
29
30
  const isOpen = Boolean(openCollapseItems.includes(id !== null && id !== void 0 ? id : ''));
31
+ const checked = Boolean((indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
32
+ (isSelectionMultiple && checkedProp));
30
33
  const handleKeyDown = useCallback(() => {
31
34
  toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
32
35
  }, [id, toggleOpenCollapseItem]);
package/dist/esm/components/Items/BaseItem/BaseItem.js CHANGED
@@ -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 && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, 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 }, 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' })), !switchProp && expandIcon && _jsx("span", { className: styles.expandableIcon, children: expandIcon })] }) }));
90
90
  if (!itemWrapRender) {
91
91
  return itemJSX;
92
92
  }
package/dist/esm/components/Items/BaseItem/styles.module.css CHANGED
@@ -52,22 +52,31 @@
52
52
  .droplistItem{
53
53
  width:100%;
54
54
  }
55
- .droplistItem[data-size=s]{
56
- padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-s-container-horizontal-padding, 8px));
55
+ .droplistItem[data-size=s][data-level-one]{
56
+ padding-left:calc(var(--space-drop-list-item-s-container-horizontal-padding, 8px) + var(--size-drop-list-item-nesting-level-gap-compensator-s, 16px) + var(--space-drop-list-item-s-container-gap, 8px));
57
+ }
58
+ .droplistItem[data-size=s][data-level-more-one]{
59
+ padding-left:calc(var(--space-drop-list-item-s-container-horizontal-padding, 8px) + var(--size-drop-list-item-nesting-level-gap-compensator-s, 16px) + var(--space-drop-list-item-s-container-gap, 8px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-offset-s, 24px));
57
60
  }
58
61
  .droplistItem[data-size=s] .headline{
59
62
  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
60
63
  min-height:var(--size-drop-list-item-headline, 24px);
61
64
  }
62
- .droplistItem[data-size=m]{
63
- padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-m-container-horizontal-padding, 10px));
65
+ .droplistItem[data-size=m][data-level-one]{
66
+ padding-left:calc(var(--space-drop-list-item-m-container-horizontal-padding, 10px) + var(--size-drop-list-item-nesting-level-gap-compensator-m, 16px) + var(--space-drop-list-item-m-container-gap, 8px));
67
+ }
68
+ .droplistItem[data-size=m][data-level-more-one]{
69
+ padding-left:calc(var(--space-drop-list-item-m-container-horizontal-padding, 10px) + var(--size-drop-list-item-nesting-level-gap-compensator-m, 16px) + var(--space-drop-list-item-m-container-gap, 8px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-offset-m, 24px));
64
70
  }
65
71
  .droplistItem[data-size=m] .headline{
66
72
  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
67
73
  min-height:var(--size-drop-list-item-headline, 24px);
68
74
  }
69
- .droplistItem[data-size=l]{
70
- padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-l-container-horizontal-padding, 12px));
75
+ .droplistItem[data-size=l][data-level-one]{
76
+ padding-left:calc(var(--space-drop-list-item-l-container-horizontal-padding, 12px) + var(--size-drop-list-item-nesting-level-gap-compensator-l, 16px) + var(--space-drop-list-item-l-container-gap, 8px));
77
+ }
78
+ .droplistItem[data-size=l][data-level-more-one]{
79
+ padding-left:calc(var(--space-drop-list-item-l-container-horizontal-padding, 12px) + var(--size-drop-list-item-nesting-level-gap-compensator-l, 16px) + var(--space-drop-list-item-l-container-gap, 8px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-offset-l, 24px));
71
80
  }
72
81
  .droplistItem[data-size=l] .headline{
73
82
  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
package/dist/esm/components/Items/NextListItem/NextListItem.js CHANGED
@@ -23,7 +23,7 @@ import { FALLBACK_PLACEMENTS } from './constants';
23
23
  export function NextListItem(_a) {
24
24
  var { items, placement = 'right-start', id, scroll, scrollRef, disabled, onSublistOpenChanged, allChildIds, loading = false, focusId = id, untouchableScrollbars = false } = _a, option = __rest(_a, ["items", "placement", "id", "scroll", "scrollRef", "disabled", "onSublistOpenChanged", "allChildIds", "loading", "focusId", "untouchableScrollbars"]);
25
25
  const { flattenItems, focusFlattenItems } = useNewListContext();
26
- const { isSelectionMultiple } = useSelectionContext();
26
+ const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
27
27
  const { openCollapseItems = [] } = useCollapseContext();
28
28
  const item = flattenItems[id];
29
29
  const { ids, expandedIds } = useMemo(() => {
@@ -46,7 +46,7 @@ export function NextListItem(_a) {
46
46
  return;
47
47
  }
48
48
  }, [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId]);
49
- const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
49
+ const { indeterminate, checked: checkedProp, handleOnSelect, } = useGroupItemSelection({
50
50
  items: isNextListItem(item) ? item.items : [],
51
51
  id,
52
52
  disabled,
@@ -58,6 +58,8 @@ export function NextListItem(_a) {
58
58
  return true;
59
59
  }, [forceUpdateActiveItemId]);
60
60
  const isOpen = useMemo(() => Boolean(!disabled && activeItemId && focusFlattenItems[focusId].allChildIds.includes(activeItemId)), [activeItemId, disabled, focusFlattenItems, focusId]);
61
+ const checked = Boolean((indeterminate && !open && isSelectionSingle && value && allChildIds.includes(value)) ||
62
+ (isSelectionMultiple && checkedProp));
61
63
  useEffect(() => {
62
64
  setOpen(open => open && isOpen);
63
65
  }, [id, isOpen]);
package/dist/esm/components/Lists/List/List.d.ts CHANGED
@@ -19,4 +19,5 @@ export declare const List: import("react").ForwardRefExoticComponent<{
19
19
  onKeyDown?(e: KeyboardEvent<HTMLElement>): void;
20
20
  hasListInFocusChain?: boolean;
21
21
  scrollToSelectedItem?: boolean;
22
+ scrollContainerClassName?: string;
22
23
  } & import("../contexts").SelectionState & import("../contexts").PublicListContextType & import("../../../types").ScrollProps & import("../types").EmptyState & import("react").RefAttributes<HTMLElement>>;
package/dist/esm/components/Lists/ListPrivate/ListPrivate.js CHANGED
@@ -21,7 +21,7 @@ import { useNewListContext, useSelectionContext } from '../contexts';
21
21
  import commonStyles from '../styles.module.css';
22
22
  import styles from './styles.module.css';
23
23
  export const ListPrivate = forwardRef((_a, ref) => {
24
- var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem = false } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem"]);
24
+ var { items, pinTop, pinBottom, onKeyDown, onBlur, onFocus, tabIndex, active, scroll, nested, search, searchItem, scrollRef, scrollContainerRef, onScroll, footer, loading, limitedScrollHeight, untouchableScrollbars, className, noDataState, noResultsState, errorDataState, dataError, dataFiltered, scrollToSelectedItem = false, scrollContainerClassName } = _a, props = __rest(_a, ["items", "pinTop", "pinBottom", "onKeyDown", "onBlur", "onFocus", "tabIndex", "active", "scroll", "nested", "search", "searchItem", "scrollRef", "scrollContainerRef", "onScroll", "footer", "loading", "limitedScrollHeight", "untouchableScrollbars", "className", "noDataState", "noResultsState", "errorDataState", "dataError", "dataFiltered", "scrollToSelectedItem", "scrollContainerClassName"]);
25
25
  const { size = 's', flattenItems, focusFlattenItems } = useNewListContext();
26
26
  const { value, isSelectionSingle } = useSelectionContext();
27
27
  const itemsJSX = useRenderItems(items);
@@ -49,7 +49,7 @@ export const ListPrivate = forwardRef((_a, ref) => {
49
49
  [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
50
50
  [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
51
51
  [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
52
- }), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, 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 }))] })));
52
+ }, scrollContainerClassName), barHideStrategy: 'never', size: size === 's' ? 's' : 'm', ref: scrollContainerRef, 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 }))] })));
53
53
  if (!nested) {
54
54
  return listJSX;
55
55
  }
package/dist/esm/components/Lists/types.d.ts CHANGED
@@ -49,6 +49,8 @@ export type ListProps = WithSupportProps<{
49
49
  hasListInFocusChain?: boolean;
50
50
  /** Флаг, отвещающий за прокручивание до выбранного элемента */
51
51
  scrollToSelectedItem?: boolean;
52
+ /** CSS-класс для scroll обертки основного списка айтемов */
53
+ scrollContainerClassName?: string;
52
54
  } & SelectionState & PublicListContextType & ScrollProps & EmptyState>;
53
55
  export type DroplistProps = {
54
56
  /** Ссылка на элемент-триггер для дроплиста */
package/dist/esm/helperComponents/CollapseBlockPrivate/styles.module.css CHANGED
@@ -24,15 +24,4 @@
24
24
  display:none;
25
25
  box-sizing:border-box;
26
26
  width:100%;
27
- }
28
- .content::before{
29
- pointer-events:none;
30
- content:"";
31
- position:absolute;
32
- top:0;
33
- left:0;
34
- width:100%;
35
- height:100%;
36
- opacity:var(--opacity-a004, 0.04);
37
- background-color:var(--sys-neutral-accent-default, #787b8a);
38
27
  }
package/dist/esm/helperComponents/Separator/styles.module.css CHANGED
@@ -12,7 +12,7 @@
12
12
  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
13
13
  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
14
14
  gap:var(--space-drop-list-item-s-container-gap, 8px);
15
- height:var(--size-drop-list-item-s-container-separator-subheader-height, 32px);
15
+ height:var(--size-drop-list-item-container-separator-subheader-height-s, 32px);
16
16
  }
17
17
  .separatorWithLabel[data-size=s] .label[data-mode=primary]{
18
18
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
@@ -36,7 +36,7 @@
36
36
  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
37
37
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
38
38
  gap:var(--space-drop-list-item-m-container-gap, 8px);
39
- height:var(--size-drop-list-item-m-container-separator-subheader-height, 40px);
39
+ height:var(--size-drop-list-item-container-separator-subheader-height-m, 40px);
40
40
  }
41
41
  .separatorWithLabel[data-size=m] .label[data-mode=primary]{
42
42
  font-family:var(--sans-label-l-font-family, SB Sans Interface);
@@ -60,7 +60,7 @@
60
60
  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
61
61
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
62
62
  gap:var(--space-drop-list-item-l-container-gap, 8px);
63
- height:var(--size-drop-list-item-l-container-separator-subheader-height, 48px);
63
+ height:var(--size-drop-list-item-container-separator-subheader-height-l, 48px);
64
64
  }
65
65
  .separatorWithLabel[data-size=l] .label[data-mode=primary]{
66
66
  font-family:var(--sans-title-m-font-family, SB Sans Interface);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.21.12-preview-c6f5cbae.0",
7
+ "version": "0.22.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -43,7 +43,7 @@
43
43
  "@snack-uikit/info-block": "0.6.6",
44
44
  "@snack-uikit/loaders": "0.9.0",
45
45
  "@snack-uikit/scroll": "0.9.2",
46
- "@snack-uikit/search-private": "0.4.8-preview-c6f5cbae.0",
46
+ "@snack-uikit/search-private": "0.4.8",
47
47
  "@snack-uikit/toggles": "0.13.2",
48
48
  "@snack-uikit/truncate-string": "0.6.2",
49
49
  "@snack-uikit/utils": "3.6.0",
@@ -53,5 +53,5 @@
53
53
  "peerDependencies": {
54
54
  "@snack-uikit/locale": "*"
55
55
  },
56
- "gitHead": "42f6e8e6cc5306e3722a9ccf9f02cf469f879a0b"
56
+ "gitHead": "d328fa0c928a7dfaa6396374a3f639c9f61ae878"
57
57
  }
package/src/components/Items/AccordionItem/AccordionItem.tsx CHANGED
@@ -3,7 +3,12 @@ import { MouseEvent, useCallback } from 'react';
3
3
  import { ChevronDownSVG, ChevronUpSVG } from '@snack-uikit/icons';
4
4
 
5
5
  import { CollapseBlockPrivate } from '../../../helperComponents';
6
- import { CollapseLevelContext, useCollapseContext, useCollapseLevelContext } from '../../Lists/contexts';
6
+ import {
7
+ CollapseLevelContext,
8
+ useCollapseContext,
9
+ useCollapseLevelContext,
10
+ useSelectionContext,
11
+ } from '../../Lists/contexts';
7
12
  import { BaseItem } from '../BaseItem';
8
13
  import { useGroupItemSelection, useRenderItems } from '../hooks';
9
14
  import { CommonFlattenProps, FlattenAccordionItem } from '../types';
@@ -11,10 +16,16 @@ import { CommonFlattenProps, FlattenAccordionItem } from '../types';
11
16
  type AccordionItemProps = Omit<FlattenAccordionItem, 'type>'> & CommonFlattenProps;
12
17
 
13
18
  export function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps) {
14
- const { level = 1 } = useCollapseLevelContext();
19
+ const { level = 0 } = useCollapseLevelContext();
15
20
  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
16
21
 
17
- const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
22
+ const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
23
+
24
+ const {
25
+ indeterminate,
26
+ handleOnSelect,
27
+ checked: checkedProp,
28
+ } = useGroupItemSelection({
18
29
  items,
19
30
  id,
20
31
  disabled,
@@ -23,6 +34,11 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
23
34
 
24
35
  const isOpen = Boolean(openCollapseItems.includes(id ?? ''));
25
36
 
37
+ const checked = Boolean(
38
+ (indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
39
+ (isSelectionMultiple && checkedProp),
40
+ );
41
+
26
42
  const handleKeyDown = useCallback(() => {
27
43
  toggleOpenCollapseItem?.(id ?? '');
28
44
  }, [id, toggleOpenCollapseItem]);
package/src/components/Items/BaseItem/BaseItem.tsx CHANGED
@@ -138,13 +138,12 @@ export function BaseItem({
138
138
  data-inactive={inactive || undefined}
139
139
  data-disabled={disabled || undefined}
140
140
  data-variant={mode || undefined}
141
- data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
141
+ data-checked={(isParentNode && isChecked) || (!isParentNode && isChecked && !switchProp) || undefined}
142
142
  >
143
143
  <li
144
144
  data-type='outside'
145
145
  role={'menuitem'}
146
146
  data-test-id={props['data-test-id'] || 'list__base-item_' + id}
147
- data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
148
147
  ref={itemRef as unknown as RefObject<HTMLLIElement>}
149
148
  className={cn(commonStyles.listItem, styles.droplistItem)}
150
149
  data-size={size}
@@ -157,6 +156,9 @@ export function BaseItem({
157
156
  onKeyDown={handleItemKeyDown}
158
157
  onFocus={handleItemFocus}
159
158
  style={{ '--level': level }}
159
+ data-level-one={level === 1 || undefined}
160
+ data-level-more-one={level > 1 || undefined}
161
+ data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
160
162
  >
161
163
  {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
162
164
  <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
package/src/components/Items/BaseItem/styles.module.scss CHANGED
@@ -1,3 +1,6 @@
1
+ /* stylelint-disable at-rule-empty-line-before */
2
+ /* stylelint-disable scss/operator-no-newline-after */
3
+
1
4
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
5
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
6
 
@@ -59,15 +62,50 @@ $sizes: 's', 'm', 'l';
59
62
  height: 100%;
60
63
  }
61
64
  }
65
+
66
+ $level: var(--level, 0);
67
+
62
68
  .droplistItem {
63
69
  width: 100%;
64
70
 
65
71
  @each $size in $sizes {
66
72
  &[data-size='#{$size}'] {
67
- padding-left: calc(
68
- var(--level, 0) * styles-tokens-dropList.$dimension-050m + styles-tokens-dropList.simple-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container', 'padding-left')
73
+ $nestingLevelOffset: styles-tokens-dropList.simple-var(
74
+ styles-tokens-dropList.$drop-list,
75
+ 'item',
76
+ $size,
77
+ 'nesting-level-offset',
78
+ 'width'
79
+ );
80
+
81
+ $nestingLevelGapCompensator: styles-tokens-dropList.simple-var(
82
+ styles-tokens-dropList.$drop-list,
83
+ 'item',
84
+ $size,
85
+ 'nesting-level-gap-compensator',
86
+ 'width'
87
+ );
88
+
89
+ $itemPaddingLeft: styles-tokens-dropList.simple-var(
90
+ styles-tokens-dropList.$drop-list,
91
+ 'item',
92
+ $size,
93
+ 'container',
94
+ 'padding-left'
69
95
  );
70
96
 
97
+ $itemGap: styles-tokens-dropList.simple-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container', 'gap');
98
+
99
+ &[data-level-one] {
100
+ padding-left: calc($itemPaddingLeft + $nestingLevelGapCompensator + $itemGap);
101
+ }
102
+
103
+ &[data-level-more-one] {
104
+ padding-left: calc(
105
+ $itemPaddingLeft + $nestingLevelGapCompensator + $itemGap + ($level - 1) * $nestingLevelOffset
106
+ );
107
+ }
108
+
71
109
  .headline {
72
110
  @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
73
111
  }
package/src/components/Items/NextListItem/NextListItem.tsx CHANGED
@@ -29,7 +29,7 @@ export function NextListItem({
29
29
  ...option
30
30
  }: NextListItemProps) {
31
31
  const { flattenItems, focusFlattenItems } = useNewListContext();
32
- const { isSelectionMultiple } = useSelectionContext();
32
+ const { value, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
33
33
  const { openCollapseItems = [] } = useCollapseContext();
34
34
 
35
35
  const item = flattenItems[id];
@@ -64,7 +64,11 @@ export function NextListItem({
64
64
  [handleListKeyDownFactory, ids, expandedIds, forceUpdateActiveItemId, focusId],
65
65
  );
66
66
 
67
- const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
67
+ const {
68
+ indeterminate,
69
+ checked: checkedProp,
70
+ handleOnSelect,
71
+ } = useGroupItemSelection({
68
72
  items: isNextListItem<FlattenNextListItem>(item) ? item.items : [],
69
73
  id,
70
74
  disabled,
@@ -82,6 +86,11 @@ export function NextListItem({
82
86
  [activeItemId, disabled, focusFlattenItems, focusId],
83
87
  );
84
88
 
89
+ const checked = Boolean(
90
+ (indeterminate && !open && isSelectionSingle && value && allChildIds.includes(value)) ||
91
+ (isSelectionMultiple && checkedProp),
92
+ );
93
+
85
94
  useEffect(() => {
86
95
  setOpen(open => open && isOpen);
87
96
  }, [id, isOpen]);
package/src/components/Lists/ListPrivate/ListPrivate.tsx CHANGED
@@ -41,6 +41,7 @@ export const ListPrivate = forwardRef(
41
41
  dataError,
42
42
  dataFiltered,
43
43
  scrollToSelectedItem = false,
44
+ scrollContainerClassName,
44
45
  ...props
45
46
  }: ListPrivateProps,
46
47
  ref: ForwardedRef<HTMLElement>,
@@ -129,11 +130,14 @@ export const ListPrivate = forwardRef(
129
130
 
130
131
  {scroll ? (
131
132
  <Scroll
132
- className={cn({
133
- [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
134
- [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
135
- [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
136
- })}
133
+ className={cn(
134
+ {
135
+ [commonStyles.scrollContainerS]: scroll && limitedScrollHeight && size === 's',
136
+ [commonStyles.scrollContainerM]: scroll && limitedScrollHeight && size === 'm',
137
+ [commonStyles.scrollContainerL]: scroll && limitedScrollHeight && size === 'l',
138
+ },
139
+ scrollContainerClassName,
140
+ )}
137
141
  barHideStrategy='never'
138
142
  size={size === 's' ? 's' : 'm'}
139
143
  ref={scrollContainerRef}
package/src/components/Lists/types.ts CHANGED
@@ -55,6 +55,8 @@ export type ListProps = WithSupportProps<
55
55
  hasListInFocusChain?: boolean;
56
56
  /** Флаг, отвещающий за прокручивание до выбранного элемента */
57
57
  scrollToSelectedItem?: boolean;
58
+ /** CSS-класс для scroll обертки основного списка айтемов */
59
+ scrollContainerClassName?: string;
58
60
  } & SelectionState &
59
61
  PublicListContextType &
60
62
  ScrollProps &
package/src/helperComponents/CollapseBlockPrivate/styles.module.scss CHANGED
@@ -33,19 +33,4 @@ $duration: 300ms;
33
33
  display: none;
34
34
  box-sizing: border-box;
35
35
  width: 100%;
36
-
37
- &::before {
38
- pointer-events: none;
39
- content: '';
40
-
41
- position: absolute;
42
- top: 0;
43
- left: 0;
44
-
45
- width: 100%;
46
- height: 100%;
47
-
48
- opacity: styles-tokens-element.$opacity-a004;
49
- background-color: styles-tokens-element.$sys-neutral-accent-default;
50
- }
51
36
  }