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