@snack-uikit/list 0.21.10 → 0.21.11-preview-e8062bb7.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 (18) hide show
  1. package/README.md +2 -0
  2. package/dist/cjs/components/Items/AccordionItem/AccordionItem.js +1 -1
  3. package/dist/cjs/components/Items/BaseItem/styles.module.css +3 -3
  4. package/dist/cjs/components/Lists/List/List.d.ts +1 -0
  5. package/dist/cjs/components/Lists/ListPrivate/ListPrivate.js +4 -3
  6. package/dist/cjs/components/Lists/types.d.ts +2 -0
  7. package/dist/cjs/helperComponents/Separator/styles.module.css +3 -3
  8. package/dist/esm/components/Items/AccordionItem/AccordionItem.js +1 -1
  9. package/dist/esm/components/Items/BaseItem/styles.module.css +3 -3
  10. package/dist/esm/components/Lists/List/List.d.ts +1 -0
  11. package/dist/esm/components/Lists/ListPrivate/ListPrivate.js +2 -2
  12. package/dist/esm/components/Lists/types.d.ts +2 -0
  13. package/dist/esm/helperComponents/Separator/styles.module.css +3 -3
  14. package/package.json +2 -2
  15. package/src/components/Items/AccordionItem/AccordionItem.tsx +1 -1
  16. package/src/components/Items/BaseItem/styles.module.scss +38 -2
  17. package/src/components/Lists/ListPrivate/ListPrivate.tsx +9 -5
  18. package/src/components/Lists/types.ts +2 -0
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,7 +28,7 @@ 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 = [],
package/dist/cjs/components/Items/BaseItem/styles.module.css CHANGED
@@ -53,21 +53,21 @@
53
53
  width:100%;
54
54
  }
55
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));
56
+ padding-left:calc(var(--space-drop-list-item-s-container-horizontal-padding, 8px) + var(--size-drop-list-item-nesting-level-offset-s, 24px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-gap-compensator-s, 16px));
57
57
  }
58
58
  .droplistItem[data-size=s] .headline{
59
59
  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
60
60
  min-height:var(--size-drop-list-item-headline, 24px);
61
61
  }
62
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));
63
+ padding-left:calc(var(--space-drop-list-item-m-container-horizontal-padding, 10px) + var(--size-drop-list-item-nesting-level-offset-m, 24px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-gap-compensator-m, 16px));
64
64
  }
65
65
  .droplistItem[data-size=m] .headline{
66
66
  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
67
67
  min-height:var(--size-drop-list-item-headline, 24px);
68
68
  }
69
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));
70
+ padding-left:calc(var(--space-drop-list-item-l-container-horizontal-padding, 12px) + var(--size-drop-list-item-nesting-level-offset-l, 24px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-gap-compensator-l, 16px));
71
71
  }
72
72
  .droplistItem[data-size=l] .headline{
73
73
  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
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/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
@@ -18,7 +18,7 @@ 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
23
  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
24
24
  items,
package/dist/esm/components/Items/BaseItem/styles.module.css CHANGED
@@ -53,21 +53,21 @@
53
53
  width:100%;
54
54
  }
55
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));
56
+ padding-left:calc(var(--space-drop-list-item-s-container-horizontal-padding, 8px) + var(--size-drop-list-item-nesting-level-offset-s, 24px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-gap-compensator-s, 16px));
57
57
  }
58
58
  .droplistItem[data-size=s] .headline{
59
59
  gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
60
60
  min-height:var(--size-drop-list-item-headline, 24px);
61
61
  }
62
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));
63
+ padding-left:calc(var(--space-drop-list-item-m-container-horizontal-padding, 10px) + var(--size-drop-list-item-nesting-level-offset-m, 24px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-gap-compensator-m, 16px));
64
64
  }
65
65
  .droplistItem[data-size=m] .headline{
66
66
  gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
67
67
  min-height:var(--size-drop-list-item-headline, 24px);
68
68
  }
69
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));
70
+ padding-left:calc(var(--space-drop-list-item-l-container-horizontal-padding, 12px) + var(--size-drop-list-item-nesting-level-offset-l, 24px) + (var(--level, 0) - 1) * var(--size-drop-list-item-nesting-level-gap-compensator-l, 16px));
71
71
  }
72
72
  .droplistItem[data-size=l] .headline{
73
73
  gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
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/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.10",
7
+ "version": "0.21.11-preview-e8062bb7.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -53,5 +53,5 @@
53
53
  "peerDependencies": {
54
54
  "@snack-uikit/locale": "*"
55
55
  },
56
- "gitHead": "ac8fa414e1a84f72594d9c509b0daca04b5e48be"
56
+ "gitHead": "a5506a672d6505a9aba13c7145c9d665cd4f4210"
57
57
  }
package/src/components/Items/AccordionItem/AccordionItem.tsx CHANGED
@@ -11,7 +11,7 @@ import { CommonFlattenProps, FlattenAccordionItem } from '../types';
11
11
  type AccordionItemProps = Omit<FlattenAccordionItem, 'type>'> & CommonFlattenProps;
12
12
 
13
13
  export function AccordionItem({ id, disabled, allChildIds, items, ...option }: AccordionItemProps) {
14
- const { level = 1 } = useCollapseLevelContext();
14
+ const { level = 0 } = useCollapseLevelContext();
15
15
  const { openCollapseItems = [], toggleOpenCollapseItem } = useCollapseContext();
16
16
 
17
17
  const { indeterminate, checked, handleOnSelect } = useGroupItemSelection({
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,48 @@ $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'
69
87
  );
70
88
 
89
+ $itemPaddingLeft: styles-tokens-dropList.simple-var(
90
+ styles-tokens-dropList.$drop-list,
91
+ 'item',
92
+ $size,
93
+ 'container',
94
+ 'padding-left'
95
+ );
96
+
97
+ @if $level == 0 {
98
+ padding-left: $itemPaddingLeft;
99
+ } @else {
100
+ @if $level == 1 {
101
+ padding-left: calc($itemPaddingLeft + $nestingLevelOffset + $nestingLevelGapCompensator);
102
+ } @else {
103
+ padding-left: calc($itemPaddingLeft + $nestingLevelOffset + ($level - 1) * $nestingLevelGapCompensator);
104
+ }
105
+ }
106
+
71
107
  .headline {
72
108
  @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
73
109
  }
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 &