@snack-uikit/list 0.22.1-preview-ef08d0db.0 → 0.22.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 (25) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/cjs/components/Items/AccordionItem/AccordionItem.js +1 -2
  3. package/dist/cjs/components/Items/BaseItem/BaseItem.js +9 -1
  4. package/dist/cjs/components/Items/BaseItem/styles.module.css +15 -6
  5. package/dist/cjs/components/Items/styles.module.css +0 -3
  6. package/dist/cjs/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts +1 -2
  7. package/dist/cjs/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js +2 -13
  8. package/dist/cjs/helperComponents/CollapseBlockPrivate/styles.module.css +6 -33
  9. package/dist/cjs/helperComponents/Separator/styles.module.css +0 -6
  10. package/dist/esm/components/Items/AccordionItem/AccordionItem.js +1 -2
  11. package/dist/esm/components/Items/BaseItem/BaseItem.js +3 -2
  12. package/dist/esm/components/Items/BaseItem/styles.module.css +15 -6
  13. package/dist/esm/components/Items/styles.module.css +0 -3
  14. package/dist/esm/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts +1 -2
  15. package/dist/esm/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js +2 -4
  16. package/dist/esm/helperComponents/CollapseBlockPrivate/styles.module.css +6 -33
  17. package/dist/esm/helperComponents/Separator/styles.module.css +0 -6
  18. package/package.json +3 -3
  19. package/src/components/Items/AccordionItem/AccordionItem.tsx +0 -2
  20. package/src/components/Items/BaseItem/BaseItem.tsx +11 -3
  21. package/src/components/Items/BaseItem/styles.module.scss +27 -1
  22. package/src/components/Items/styles.module.scss +0 -2
  23. package/src/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.tsx +2 -20
  24. package/src/helperComponents/CollapseBlockPrivate/styles.module.scss +6 -50
  25. package/src/helperComponents/Separator/styles.module.scss +6 -43
package/CHANGELOG.md CHANGED
@@ -3,6 +3,15 @@
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.1 (2024-12-25)
7
+
8
+ ### Only dependencies have been changed
9
+ * [@snack-uikit/truncate-string@0.6.3](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
10
+
11
+
12
+
13
+
14
+
6
15
  # 0.22.0 (2024-12-18)
7
16
 
8
17
 
package/dist/cjs/components/Items/AccordionItem/AccordionItem.js CHANGED
@@ -50,7 +50,7 @@ function AccordionItem(_a) {
50
50
  allChildIds
51
51
  });
52
52
  const isOpen = Boolean(openCollapseItems.includes(id !== null && id !== void 0 ? id : ''));
53
- const checked = Boolean(indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value) || isSelectionSingle && value === id || isSelectionMultiple && checkedProp);
53
+ const checked = Boolean(indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value) || isSelectionMultiple && checkedProp);
54
54
  const handleKeyDown = (0, react_1.useCallback)(() => {
55
55
  toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
56
56
  }, [id, toggleOpenCollapseItem]);
@@ -74,7 +74,6 @@ function AccordionItem(_a) {
74
74
  })),
75
75
  expanded: isOpen,
76
76
  "data-test-id": `list__accordion-item-${id}`,
77
- level: level + 1,
78
77
  children: (0, jsx_runtime_1.jsx)(contexts_1.CollapseLevelContext.Provider, {
79
78
  value: {
80
79
  level: level + 1
package/dist/cjs/components/Items/BaseItem/BaseItem.js CHANGED
@@ -61,6 +61,9 @@ function BaseItem(_a) {
61
61
  firstItemId,
62
62
  focusFlattenItems
63
63
  } = (0, contexts_1.useNewListContext)();
64
+ const {
65
+ level = 0
66
+ } = (0, contexts_1.useCollapseLevelContext)();
64
67
  const {
65
68
  closeDroplist,
66
69
  closeDroplistOnItemClick
@@ -150,8 +153,13 @@ function BaseItem(_a) {
150
153
  "data-open": open || undefined,
151
154
  onKeyDown: handleItemKeyDown,
152
155
  onFocus: handleItemFocus,
156
+ style: {
157
+ '--level': level
158
+ },
159
+ "data-level-one": level === 1 || undefined,
160
+ "data-level-more-one": level > 1 || undefined,
153
161
  "data-checked": isParentNode && (indeterminate || isChecked) || isChecked && !switchProp || undefined,
154
- children: [!switchProp && isSelectionSingle && marker && value === id && interactive && (0, jsx_runtime_1.jsx)("div", {
162
+ children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (0, jsx_runtime_1.jsx)("div", {
155
163
  className: styles_module_scss_2.default.markerContainer,
156
164
  "data-test-id": 'list__base-item-marker'
157
165
  }), !switchProp && isSelectionMultiple && interactive && (0, jsx_runtime_1.jsx)("div", {
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:var(--nesting-padding-left, 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:var(--nesting-padding-left, 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:var(--nesting-padding-left, 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/styles.module.css CHANGED
@@ -64,7 +64,6 @@
64
64
  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
65
65
  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
66
66
  gap:var(--space-drop-list-item-s-container-gap, 8px);
67
- padding-left:var(--nesting-padding-left);
68
67
  }
69
68
  .listItem[data-size=m]{
70
69
  padding-top:var(--space-drop-list-item-m-container-vertical-padding, 8px);
@@ -72,7 +71,6 @@
72
71
  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
73
72
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
74
73
  gap:var(--space-drop-list-item-m-container-gap, 8px);
75
- padding-left:var(--nesting-padding-left);
76
74
  }
77
75
  .listItem[data-size=l]{
78
76
  padding-top:var(--space-drop-list-item-l-container-vertical-padding, 12px);
@@ -80,7 +78,6 @@
80
78
  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
81
79
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
82
80
  gap:var(--space-drop-list-item-l-container-gap, 8px);
83
- padding-left:var(--nesting-padding-left);
84
81
  }
85
82
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
86
83
  outline-width:var(--border-state-focus-s-border-width, 2px);
package/dist/cjs/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts CHANGED
@@ -5,6 +5,5 @@ export type CollapseBlockPrivateProps = WithSupportProps<{
5
5
  header: ReactNode;
6
6
  expanded: boolean;
7
7
  className?: string;
8
- level: number;
9
8
  }>;
10
- export declare function CollapseBlockPrivate({ children, expanded, className, header, level, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;
package/dist/cjs/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js CHANGED
@@ -20,7 +20,6 @@ exports.CollapseBlockPrivate = CollapseBlockPrivate;
20
20
  const jsx_runtime_1 = require("react/jsx-runtime");
21
21
  const classnames_1 = __importDefault(require("classnames"));
22
22
  const utils_1 = require("@snack-uikit/utils");
23
- const contexts_1 = require("../../components/Lists/contexts");
24
23
  const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
25
24
  // TODO: Add animation. Solution like in Accordion/Tree does not work with Scroll =(
26
25
  function CollapseBlockPrivate(_a) {
@@ -28,13 +27,9 @@ function CollapseBlockPrivate(_a) {
28
27
  children,
29
28
  expanded,
30
29
  className,
31
- header,
32
- level
30
+ header
33
31
  } = _a,
34
- rest = __rest(_a, ["children", "expanded", "className", "header", "level"]);
35
- const {
36
- size = 's'
37
- } = (0, contexts_1.useNewListContext)();
32
+ rest = __rest(_a, ["children", "expanded", "className", "header"]);
38
33
  return (0, jsx_runtime_1.jsxs)("div", Object.assign({
39
34
  className: (0, classnames_1.default)(styles_module_scss_1.default.accordion, className),
40
35
  role: 'menuitem',
@@ -44,12 +39,6 @@ function CollapseBlockPrivate(_a) {
44
39
  children: [header, (0, jsx_runtime_1.jsx)("div", {
45
40
  className: styles_module_scss_1.default.contentWrapper,
46
41
  "aria-hidden": !expanded,
47
- style: {
48
- '--level': level
49
- },
50
- "data-size": size,
51
- "data-level-one": level === 1 || undefined,
52
- "data-level-more-one": level > 1 || undefined,
53
42
  children: (0, jsx_runtime_1.jsx)("div", {
54
43
  className: styles_module_scss_1.default.content,
55
44
  "data-content": true,
package/dist/cjs/helperComponents/CollapseBlockPrivate/styles.module.css CHANGED
@@ -11,13 +11,6 @@
11
11
  gap:0;
12
12
  }
13
13
 
14
- .content{
15
- position:relative;
16
- display:none;
17
- box-sizing:border-box;
18
- width:100%;
19
- }
20
-
21
14
  .contentWrapper{
22
15
  box-sizing:border-box;
23
16
  width:100%;
@@ -25,30 +18,10 @@
25
18
  .contentWrapper[aria-hidden=false] > div[data-content]{
26
19
  display:block;
27
20
  }
28
- .contentWrapper[data-size=s]{
29
- --nesting-padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
30
- }
31
- .contentWrapper[data-size=s][data-level-one]{
32
- --nesting-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));
33
- }
34
- .contentWrapper[data-size=s][data-level-more-one]{
35
- --nesting-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));
36
- }
37
- .contentWrapper[data-size=m]{
38
- --nesting-padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
39
- }
40
- .contentWrapper[data-size=m][data-level-one]{
41
- --nesting-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));
42
- }
43
- .contentWrapper[data-size=m][data-level-more-one]{
44
- --nesting-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));
45
- }
46
- .contentWrapper[data-size=l]{
47
- --nesting-padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
48
- }
49
- .contentWrapper[data-size=l][data-level-one]{
50
- --nesting-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));
51
- }
52
- .contentWrapper[data-size=l][data-level-more-one]{
53
- --nesting-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));
21
+
22
+ .content{
23
+ position:relative;
24
+ display:none;
25
+ box-sizing:border-box;
26
+ width:100%;
54
27
  }
package/dist/cjs/helperComponents/Separator/styles.module.css CHANGED
@@ -13,7 +13,6 @@
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
15
  height:var(--size-drop-list-item-container-separator-subheader-height-s, 32px);
16
- padding-left:var(--nesting-padding-left, var(--space-drop-list-item-s-container-horizontal-padding, 8px));
17
16
  }
18
17
  .separatorWithLabel[data-size=s] .label[data-mode=primary]{
19
18
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
@@ -38,7 +37,6 @@
38
37
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
39
38
  gap:var(--space-drop-list-item-m-container-gap, 8px);
40
39
  height:var(--size-drop-list-item-container-separator-subheader-height-m, 40px);
41
- padding-left:var(--nesting-padding-left, var(--space-drop-list-item-m-container-horizontal-padding, 10px));
42
40
  }
43
41
  .separatorWithLabel[data-size=m] .label[data-mode=primary]{
44
42
  font-family:var(--sans-label-l-font-family, SB Sans Interface);
@@ -63,7 +61,6 @@
63
61
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
64
62
  gap:var(--space-drop-list-item-l-container-gap, 8px);
65
63
  height:var(--size-drop-list-item-container-separator-subheader-height-l, 48px);
66
- padding-left:var(--nesting-padding-left, var(--space-drop-list-item-l-container-horizontal-padding, 12px));
67
64
  }
68
65
  .separatorWithLabel[data-size=l] .label[data-mode=primary]{
69
66
  font-family:var(--sans-title-m-font-family, SB Sans Interface);
@@ -92,21 +89,18 @@
92
89
  padding-bottom:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
93
90
  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
94
91
  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
95
- padding-left:var(--nesting-padding-left);
96
92
  }
97
93
  .separatorWithoutLabel[data-size=m]{
98
94
  padding-top:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
99
95
  padding-bottom:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
100
96
  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
101
97
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
102
- padding-left:var(--nesting-padding-left);
103
98
  }
104
99
  .separatorWithoutLabel[data-size=l]{
105
100
  padding-top:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
106
101
  padding-bottom:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
107
102
  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
108
103
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
109
- padding-left:var(--nesting-padding-left);
110
104
  }
111
105
 
112
106
  .label{
package/dist/esm/components/Items/AccordionItem/AccordionItem.js CHANGED
@@ -29,7 +29,6 @@ export function AccordionItem(_a) {
29
29
  });
30
30
  const isOpen = Boolean(openCollapseItems.includes(id !== null && id !== void 0 ? id : ''));
31
31
  const checked = Boolean((indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
32
- (isSelectionSingle && value === id) ||
33
32
  (isSelectionMultiple && checkedProp));
34
33
  const handleKeyDown = useCallback(() => {
35
34
  toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
@@ -40,5 +39,5 @@ export function AccordionItem(_a) {
40
39
  toggleOpenCollapseItem === null || toggleOpenCollapseItem === void 0 ? void 0 : toggleOpenCollapseItem(id !== null && id !== void 0 ? id : '');
41
40
  (_a = option.onClick) === null || _a === void 0 ? void 0 : _a.call(option, e);
42
41
  };
43
- return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onOpenNestedList: handleKeyDown, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined })), expanded: isOpen, "data-test-id": `list__accordion-item-${id}`, level: level + 1, children: _jsx(CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
42
+ return (_jsx(CollapseBlockPrivate, { header: _jsx(BaseItem, Object.assign({}, option, { id: id, disabled: disabled, expandIcon: isOpen ? _jsx(ChevronUpSVG, {}) : _jsx(ChevronDownSVG, {}), onClick: handleItemClick, isParentNode: true, onOpenNestedList: handleKeyDown, checked: checked, indeterminate: indeterminate, onSelect: !disabled ? handleOnSelect : undefined })), expanded: isOpen, "data-test-id": `list__accordion-item-${id}`, children: _jsx(CollapseLevelContext.Provider, { value: { level: level + 1 }, children: itemsJSX }) }));
44
43
  }
package/dist/esm/components/Items/BaseItem/BaseItem.js CHANGED
@@ -14,7 +14,7 @@ import cn from 'classnames';
14
14
  import { Checkbox, Switch } from '@snack-uikit/toggles';
15
15
  import { extractSupportProps } from '@snack-uikit/utils';
16
16
  import { ItemContent } from '../../../helperComponents';
17
- import { useNewListContext, useOpenListContext, useSelectionContext } from '../../Lists/contexts';
17
+ import { useCollapseLevelContext, useNewListContext, useOpenListContext, useSelectionContext, } from '../../Lists/contexts';
18
18
  import commonStyles from '../styles.module.css';
19
19
  import { isContentItem } from '../utils';
20
20
  import { CHECKBOX_SIZE_MAP } from './constants';
@@ -24,6 +24,7 @@ export function BaseItem(_a) {
24
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"]);
25
25
  const interactive = !inactive;
26
26
  const { size = 's', marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
27
+ const { level = 0 } = useCollapseLevelContext();
27
28
  const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
28
29
  const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
29
30
  const isChecked = isSelectionSingle ? (checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === id) : (checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : ''));
@@ -85,7 +86,7 @@ export function BaseItem(_a) {
85
86
  }
86
87
  };
87
88
  const props = extractSupportProps(rest);
88
- 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, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: [!switchProp && isSelectionSingle && marker && value === id && 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 })] }) }));
89
90
  if (!itemWrapRender) {
90
91
  return itemJSX;
91
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:var(--nesting-padding-left, 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:var(--nesting-padding-left, 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:var(--nesting-padding-left, 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/styles.module.css CHANGED
@@ -64,7 +64,6 @@
64
64
  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
65
65
  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
66
66
  gap:var(--space-drop-list-item-s-container-gap, 8px);
67
- padding-left:var(--nesting-padding-left);
68
67
  }
69
68
  .listItem[data-size=m]{
70
69
  padding-top:var(--space-drop-list-item-m-container-vertical-padding, 8px);
@@ -72,7 +71,6 @@
72
71
  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
73
72
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
74
73
  gap:var(--space-drop-list-item-m-container-gap, 8px);
75
- padding-left:var(--nesting-padding-left);
76
74
  }
77
75
  .listItem[data-size=l]{
78
76
  padding-top:var(--space-drop-list-item-l-container-vertical-padding, 12px);
@@ -80,7 +78,6 @@
80
78
  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
81
79
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
82
80
  gap:var(--space-drop-list-item-l-container-gap, 8px);
83
- padding-left:var(--nesting-padding-left);
84
81
  }
85
82
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
86
83
  outline-width:var(--border-state-focus-s-border-width, 2px);
package/dist/esm/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.d.ts CHANGED
@@ -5,6 +5,5 @@ export type CollapseBlockPrivateProps = WithSupportProps<{
5
5
  header: ReactNode;
6
6
  expanded: boolean;
7
7
  className?: string;
8
- level: number;
9
8
  }>;
10
- export declare function CollapseBlockPrivate({ children, expanded, className, header, level, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;
9
+ export declare function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps): import("react/jsx-runtime").JSX.Element;
package/dist/esm/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.js CHANGED
@@ -12,11 +12,9 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
13
  import cn from 'classnames';
14
14
  import { extractSupportProps } from '@snack-uikit/utils';
15
- import { useNewListContext } from '../../components/Lists/contexts';
16
15
  import styles from './styles.module.css';
17
16
  // TODO: Add animation. Solution like in Accordion/Tree does not work with Scroll =(
18
17
  export function CollapseBlockPrivate(_a) {
19
- var { children, expanded, className, header, level } = _a, rest = __rest(_a, ["children", "expanded", "className", "header", "level"]);
20
- const { size = 's' } = useNewListContext();
21
- return (_jsxs("div", Object.assign({ className: cn(styles.accordion, className), role: 'menuitem', "aria-haspopup": true, "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, style: { '--level': level }, "data-size": size, "data-level-one": level === 1 || undefined, "data-level-more-one": level > 1 || undefined, children: _jsx("div", { className: styles.content, "data-content": true, children: expanded && children }) })] })));
18
+ var { children, expanded, className, header } = _a, rest = __rest(_a, ["children", "expanded", "className", "header"]);
19
+ return (_jsxs("div", Object.assign({ className: cn(styles.accordion, className), role: 'menuitem', "aria-haspopup": true, "aria-expanded": expanded }, extractSupportProps(rest), { children: [header, _jsx("div", { className: styles.contentWrapper, "aria-hidden": !expanded, children: _jsx("div", { className: styles.content, "data-content": true, children: expanded && children }) })] })));
22
20
  }
package/dist/esm/helperComponents/CollapseBlockPrivate/styles.module.css CHANGED
@@ -11,13 +11,6 @@
11
11
  gap:0;
12
12
  }
13
13
 
14
- .content{
15
- position:relative;
16
- display:none;
17
- box-sizing:border-box;
18
- width:100%;
19
- }
20
-
21
14
  .contentWrapper{
22
15
  box-sizing:border-box;
23
16
  width:100%;
@@ -25,30 +18,10 @@
25
18
  .contentWrapper[aria-hidden=false] > div[data-content]{
26
19
  display:block;
27
20
  }
28
- .contentWrapper[data-size=s]{
29
- --nesting-padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
30
- }
31
- .contentWrapper[data-size=s][data-level-one]{
32
- --nesting-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));
33
- }
34
- .contentWrapper[data-size=s][data-level-more-one]{
35
- --nesting-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));
36
- }
37
- .contentWrapper[data-size=m]{
38
- --nesting-padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
39
- }
40
- .contentWrapper[data-size=m][data-level-one]{
41
- --nesting-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));
42
- }
43
- .contentWrapper[data-size=m][data-level-more-one]{
44
- --nesting-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));
45
- }
46
- .contentWrapper[data-size=l]{
47
- --nesting-padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
48
- }
49
- .contentWrapper[data-size=l][data-level-one]{
50
- --nesting-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));
51
- }
52
- .contentWrapper[data-size=l][data-level-more-one]{
53
- --nesting-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));
21
+
22
+ .content{
23
+ position:relative;
24
+ display:none;
25
+ box-sizing:border-box;
26
+ width:100%;
54
27
  }
package/dist/esm/helperComponents/Separator/styles.module.css CHANGED
@@ -13,7 +13,6 @@
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
15
  height:var(--size-drop-list-item-container-separator-subheader-height-s, 32px);
16
- padding-left:var(--nesting-padding-left, var(--space-drop-list-item-s-container-horizontal-padding, 8px));
17
16
  }
18
17
  .separatorWithLabel[data-size=s] .label[data-mode=primary]{
19
18
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
@@ -38,7 +37,6 @@
38
37
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
39
38
  gap:var(--space-drop-list-item-m-container-gap, 8px);
40
39
  height:var(--size-drop-list-item-container-separator-subheader-height-m, 40px);
41
- padding-left:var(--nesting-padding-left, var(--space-drop-list-item-m-container-horizontal-padding, 10px));
42
40
  }
43
41
  .separatorWithLabel[data-size=m] .label[data-mode=primary]{
44
42
  font-family:var(--sans-label-l-font-family, SB Sans Interface);
@@ -63,7 +61,6 @@
63
61
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
64
62
  gap:var(--space-drop-list-item-l-container-gap, 8px);
65
63
  height:var(--size-drop-list-item-container-separator-subheader-height-l, 48px);
66
- padding-left:var(--nesting-padding-left, var(--space-drop-list-item-l-container-horizontal-padding, 12px));
67
64
  }
68
65
  .separatorWithLabel[data-size=l] .label[data-mode=primary]{
69
66
  font-family:var(--sans-title-m-font-family, SB Sans Interface);
@@ -92,21 +89,18 @@
92
89
  padding-bottom:var(--space-drop-list-item-s-container-separator-subheader-vertical-padding, 4px);
93
90
  padding-left:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
94
91
  padding-right:var(--space-drop-list-item-s-container-horizontal-padding, 8px);
95
- padding-left:var(--nesting-padding-left);
96
92
  }
97
93
  .separatorWithoutLabel[data-size=m]{
98
94
  padding-top:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
99
95
  padding-bottom:var(--space-drop-list-item-m-container-separator-subheader-vertical-padding, 5px);
100
96
  padding-left:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
101
97
  padding-right:var(--space-drop-list-item-m-container-horizontal-padding, 10px);
102
- padding-left:var(--nesting-padding-left);
103
98
  }
104
99
  .separatorWithoutLabel[data-size=l]{
105
100
  padding-top:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
106
101
  padding-bottom:var(--space-drop-list-item-l-container-separator-subheader-vertical-padding, 6px);
107
102
  padding-left:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
108
103
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
109
- padding-left:var(--nesting-padding-left);
110
104
  }
111
105
 
112
106
  .label{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.22.1-preview-ef08d0db.0",
7
+ "version": "0.22.1",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -45,7 +45,7 @@
45
45
  "@snack-uikit/scroll": "0.9.2",
46
46
  "@snack-uikit/search-private": "0.4.8",
47
47
  "@snack-uikit/toggles": "0.13.2",
48
- "@snack-uikit/truncate-string": "0.6.2",
48
+ "@snack-uikit/truncate-string": "0.6.3",
49
49
  "@snack-uikit/utils": "3.6.0",
50
50
  "classnames": "2.5.1",
51
51
  "merge-refs": "1.3.0"
@@ -53,5 +53,5 @@
53
53
  "peerDependencies": {
54
54
  "@snack-uikit/locale": "*"
55
55
  },
56
- "gitHead": "14adfd6eef16f278bd45da263b6e1c43e0e105b6"
56
+ "gitHead": "5f981cd3d7c5169db2bff1d58db36b6c83da6861"
57
57
  }
package/src/components/Items/AccordionItem/AccordionItem.tsx CHANGED
@@ -36,7 +36,6 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
36
36
 
37
37
  const checked = Boolean(
38
38
  (indeterminate && !isOpen && isSelectionSingle && value && allChildIds.includes(value)) ||
39
- (isSelectionSingle && value === id) ||
40
39
  (isSelectionMultiple && checkedProp),
41
40
  );
42
41
 
@@ -69,7 +68,6 @@ export function AccordionItem({ id, disabled, allChildIds, items, ...option }: A
69
68
  }
70
69
  expanded={isOpen}
71
70
  data-test-id={`list__accordion-item-${id}`}
72
- level={level + 1}
73
71
  >
74
72
  <CollapseLevelContext.Provider value={{ level: level + 1 }}>{itemsJSX}</CollapseLevelContext.Provider>
75
73
  </CollapseBlockPrivate>
package/src/components/Items/BaseItem/BaseItem.tsx CHANGED
@@ -5,7 +5,12 @@ import { Checkbox, Switch } from '@snack-uikit/toggles';
5
5
  import { extractSupportProps } from '@snack-uikit/utils';
6
6
 
7
7
  import { ItemContent } from '../../../helperComponents';
8
- import { useNewListContext, useOpenListContext, useSelectionContext } from '../../Lists/contexts';
8
+ import {
9
+ useCollapseLevelContext,
10
+ useNewListContext,
11
+ useOpenListContext,
12
+ useSelectionContext,
13
+ } from '../../Lists/contexts';
9
14
  import commonStyles from '../styles.module.scss';
10
15
  import { FlattenBaseItem } from '../types';
11
16
  import { isContentItem } from '../utils';
@@ -48,7 +53,7 @@ export function BaseItem({
48
53
  const interactive = !inactive;
49
54
 
50
55
  const { size = 's', marker, contentRender, firstItemId, focusFlattenItems } = useNewListContext();
51
-
56
+ const { level = 0 } = useCollapseLevelContext();
52
57
  const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
53
58
  const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
54
59
 
@@ -150,9 +155,12 @@ export function BaseItem({
150
155
  data-open={open || undefined}
151
156
  onKeyDown={handleItemKeyDown}
152
157
  onFocus={handleItemFocus}
158
+ style={{ '--level': level }}
159
+ data-level-one={level === 1 || undefined}
160
+ data-level-more-one={level > 1 || undefined}
153
161
  data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
154
162
  >
155
- {!switchProp && isSelectionSingle && marker && value === id && interactive && (
163
+ {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
156
164
  <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
157
165
  )}
158
166
 
package/src/components/Items/BaseItem/styles.module.scss CHANGED
@@ -70,6 +70,22 @@ $level: var(--level, 0);
70
70
 
71
71
  @each $size in $sizes {
72
72
  &[data-size='#{$size}'] {
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
+
73
89
  $itemPaddingLeft: styles-tokens-dropList.simple-var(
74
90
  styles-tokens-dropList.$drop-list,
75
91
  'item',
@@ -78,7 +94,17 @@ $level: var(--level, 0);
78
94
  'padding-left'
79
95
  );
80
96
 
81
- padding-left: var(--nesting-padding-left, #{$itemPaddingLeft});
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
+ }
82
108
 
83
109
  .headline {
84
110
  @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'headline');
package/src/components/Items/styles.module.scss CHANGED
@@ -87,8 +87,6 @@ $sizes: 's', 'm', 'l';
87
87
  @each $size in $sizes {
88
88
  &[data-size='#{$size}'] {
89
89
  @include styles-tokens-dropList.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container');
90
-
91
- padding-left: var(--nesting-padding-left);
92
90
  }
93
91
  }
94
92
 
package/src/helperComponents/CollapseBlockPrivate/CollapseBlockPrivate.tsx CHANGED
@@ -3,7 +3,6 @@ import { ReactNode } from 'react';
3
3
 
4
4
  import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
5
5
 
6
- import { useNewListContext } from '../../components/Lists/contexts';
7
6
  import styles from './styles.module.scss';
8
7
 
9
8
  export type CollapseBlockPrivateProps = WithSupportProps<{
@@ -11,20 +10,10 @@ export type CollapseBlockPrivateProps = WithSupportProps<{
11
10
  header: ReactNode;
12
11
  expanded: boolean;
13
12
  className?: string;
14
- level: number;
15
13
  }>;
16
14
 
17
15
  // TODO: Add animation. Solution like in Accordion/Tree does not work with Scroll =(
18
- export function CollapseBlockPrivate({
19
- children,
20
- expanded,
21
- className,
22
- header,
23
- level,
24
- ...rest
25
- }: CollapseBlockPrivateProps) {
26
- const { size = 's' } = useNewListContext();
27
-
16
+ export function CollapseBlockPrivate({ children, expanded, className, header, ...rest }: CollapseBlockPrivateProps) {
28
17
  return (
29
18
  <div
30
19
  className={cn(styles.accordion, className)}
@@ -35,14 +24,7 @@ export function CollapseBlockPrivate({
35
24
  >
36
25
  {header}
37
26
 
38
- <div
39
- className={styles.contentWrapper}
40
- aria-hidden={!expanded}
41
- style={{ '--level': level }}
42
- data-size={size}
43
- data-level-one={level === 1 || undefined}
44
- data-level-more-one={level > 1 || undefined}
45
- >
27
+ <div className={styles.contentWrapper} aria-hidden={!expanded}>
46
28
  <div className={styles.content} data-content>
47
29
  {expanded && children}
48
30
  </div>
package/src/helperComponents/CollapseBlockPrivate/styles.module.scss CHANGED
@@ -1,10 +1,7 @@
1
1
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
2
- @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
3
2
 
4
3
  $duration: 300ms;
5
4
 
6
- $sizes: 's', 'm', 'l';
7
-
8
5
  .accordion {
9
6
  display: flex;
10
7
  flex-direction: column;
@@ -20,13 +17,6 @@ $sizes: 's', 'm', 'l';
20
17
  }
21
18
  }
22
19
 
23
- .content {
24
- position: relative;
25
- display: none;
26
- box-sizing: border-box;
27
- width: 100%;
28
- }
29
-
30
20
  .contentWrapper {
31
21
  box-sizing: border-box;
32
22
  width: 100%;
@@ -36,45 +26,11 @@ $sizes: 's', 'm', 'l';
36
26
  display: block;
37
27
  }
38
28
  }
29
+ }
39
30
 
40
- @each $size in $sizes {
41
- &[data-size='#{$size}'] {
42
- $nestingLevelOffset: styles-tokens-dropList.simple-var(
43
- styles-tokens-dropList.$drop-list,
44
- 'item',
45
- $size,
46
- 'nesting-level-offset',
47
- 'width'
48
- );
49
-
50
- $nestingLevelGapCompensator: styles-tokens-dropList.simple-var(
51
- styles-tokens-dropList.$drop-list,
52
- 'item',
53
- $size,
54
- 'nesting-level-gap-compensator',
55
- 'width'
56
- );
57
-
58
- $itemPaddingLeft: styles-tokens-dropList.simple-var(
59
- styles-tokens-dropList.$drop-list,
60
- 'item',
61
- $size,
62
- 'container',
63
- 'padding-left'
64
- );
65
-
66
- $itemGap: styles-tokens-dropList.simple-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container', 'gap');
67
-
68
- --nesting-padding-left: #{$itemPaddingLeft};
69
-
70
- &[data-level-one] {
71
- --nesting-padding-left: #{calc($itemPaddingLeft + $nestingLevelGapCompensator + $itemGap)};
72
- }
73
- &[data-level-more-one] {
74
- --nesting-padding-left: #{calc(
75
- $itemPaddingLeft + $nestingLevelGapCompensator + $itemGap + (var(--level, 0) - 1) * $nestingLevelOffset
76
- )};
77
- }
78
- }
79
- }
31
+ .content {
32
+ position: relative;
33
+ display: none;
34
+ box-sizing: border-box;
35
+ width: 100%;
80
36
  }
package/src/helperComponents/Separator/styles.module.scss CHANGED
@@ -1,5 +1,3 @@
1
- /* stylelint-disable scss/operator-no-newline-after */
2
- /* stylelint-disable-next-line at-rule-empty-line-before */
3
1
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-button-buttonFunction';
4
2
  @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
5
3
 
@@ -36,33 +34,14 @@ $containerSize: 1px;
36
34
 
37
35
  @each $size in $sizes {
38
36
  &[data-size='#{$size}'] {
39
- @include styles-tokens-button-buttonFunction.composite-var(
40
- styles-tokens-dropList.$drop-list,
41
- 'item',
42
- $size,
43
- 'container-separator-subheader'
44
- );
45
-
46
- $itemPaddingLeft: styles-tokens-dropList.simple-var(
47
- styles-tokens-dropList.$drop-list,
48
- 'item',
49
- $size,
50
- 'container',
51
- 'padding-left'
52
- );
53
-
54
- padding-left: var(--nesting-padding-left, $itemPaddingLeft);
37
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator-subheader');
55
38
 
56
39
  .label {
57
40
  &[data-mode='primary'] {
58
- @include styles-tokens-button-buttonFunction.composite-var(
59
- styles-tokens-button-buttonFunction.simple-var($typography-primary, $size)
60
- );
41
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-primary, $size));
61
42
  }
62
43
  &[data-mode='secondary'] {
63
- @include styles-tokens-button-buttonFunction.composite-var(
64
- styles-tokens-button-buttonFunction.simple-var($typography-secondary, $size)
65
- );
44
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-button-buttonFunction.simple-var($typography-secondary, $size));
66
45
  }
67
46
  }
68
47
  }
@@ -75,14 +54,7 @@ $containerSize: 1px;
75
54
 
76
55
  @each $size in $sizes {
77
56
  &[data-size='#{$size}'] {
78
- @include styles-tokens-button-buttonFunction.composite-var(
79
- styles-tokens-dropList.$drop-list,
80
- 'item',
81
- $size,
82
- 'container-separator'
83
- );
84
-
85
- padding-left: var(--nesting-padding-left);
57
+ @include styles-tokens-button-buttonFunction.composite-var(styles-tokens-dropList.$drop-list, 'item', $size, 'container-separator');
86
58
  }
87
59
  }
88
60
 
@@ -108,8 +80,6 @@ hr.divider {
108
80
  min-width: 0;
109
81
  }
110
82
 
111
- $level: var(--level, 0);
112
-
113
83
  .selectButton {
114
84
  display: flex;
115
85
  justify-content: flex-end;
@@ -133,15 +103,8 @@ $level: var(--level, 0);
133
103
  styles-tokens-button-buttonFunction.simple-var($button-size, $size),
134
104
  'label-only',
135
105
  'height'
136
- ) - styles-tokens-button-buttonFunction.simple-var(
137
- styles-tokens-button-buttonFunction.$theme-variables,
138
- 'sans',
139
- 'label',
140
- $size,
141
- 'line-height'
142
- )
143
- ) /
144
- 2 - var(--divider-height, 0)
106
+ ) - styles-tokens-button-buttonFunction.simple-var(styles-tokens-button-buttonFunction.$theme-variables, 'sans', 'label', $size, 'line-height')
107
+ ) / 2 - var(--divider-height, 0)
145
108
  )
146
109
  );
147
110
  }