@snack-uikit/list 0.10.1-preview-7a18c2ee.0 → 0.10.1-preview-cb79db34.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 (13) hide show
  1. package/dist/components/Items/BaseItem/BaseItem.js +1 -1
  2. package/dist/components/Items/BaseItem/styles.module.css +24 -10
  3. package/dist/components/Items/PinGroupItem/PinGroupItem.js +7 -3
  4. package/dist/components/Items/PinGroupItem/styles.module.css +26 -14
  5. package/dist/components/Items/SearchItem/SearchItem.js +2 -2
  6. package/dist/components/Items/styles.module.css +33 -26
  7. package/package.json +12 -13
  8. package/src/components/Items/BaseItem/BaseItem.tsx +56 -52
  9. package/src/components/Items/BaseItem/styles.module.scss +15 -11
  10. package/src/components/Items/PinGroupItem/PinGroupItem.tsx +14 -4
  11. package/src/components/Items/PinGroupItem/styles.module.scss +14 -14
  12. package/src/components/Items/SearchItem/SearchItem.tsx +2 -2
  13. package/src/components/Items/styles.module.scss +36 -25
package/dist/components/Items/BaseItem/BaseItem.js CHANGED
@@ -77,7 +77,7 @@ export function BaseItem(_a) {
77
77
  e.stopPropagation();
78
78
  };
79
79
  const props = extractSupportProps(rest);
80
- const itemJSX = (_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, className), "data-size": size, onClick: onClick, onMouseDown: handleItemMouseDown, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-inactive": inactive || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, "data-variant": mode || undefined, "data-open": open || undefined, "data-disabled": disabled || undefined, "aria-disabled": disabled || undefined, "data-parent": parent || 'list', onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? ((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content })) !== 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 })] }));
80
+ const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: onClick, onMouseDown: handleItemMouseDown, tabIndex: -1, "data-non-pointer": inactive && !onClick, "data-variant": mode || undefined, "data-open": open || undefined, onKeyDown: handleItemKeyDown, onFocus: handleItemFocus, style: { '--level': level }, children: [!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (_jsx("div", { className: styles.markerContainer, "data-test-id": 'list__base-item-marker' })), !switchProp && isSelectionMultiple && interactive && (_jsx("div", { className: styles.checkbox, children: _jsx(Checkbox, { size: CHECKBOX_SIZE_MAP[size !== null && size !== void 0 ? size : 's'], disabled: disabled, tabIndex: -1, onChange: isParentNode ? handleCheckboxChange : undefined, checked: isChecked, "data-test-id": 'list__base-item-checkbox', onClick: handleCheckboxClick, indeterminate: indeterminate }) })), beforeContent && _jsx("div", { className: styles.beforeContent, children: beforeContent }), content && isContentItem(content) ? ((_b = contentRender === null || contentRender === void 0 ? void 0 : contentRender({ id, content })) !== 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 })] }) }));
81
81
  if (!itemWrapRender) {
82
82
  return itemJSX;
83
83
  }
package/dist/components/Items/BaseItem/styles.module.css CHANGED
@@ -55,43 +55,57 @@
55
55
  .droplistItem[data-size=s]{
56
56
  padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-s-container-horizontal-padding, 8px));
57
57
  }
58
+ .droplistItem[data-size=s] .headline{
59
+ gap:var(--space-drop-list-item-s-container-headline-gap, 8px);
60
+ height:var(--size-drop-list-item-headline, 24px);
61
+ }
58
62
  .droplistItem[data-size=m]{
59
63
  padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-m-container-horizontal-padding, 10px));
60
64
  }
65
+ .droplistItem[data-size=m] .headline{
66
+ gap:var(--space-drop-list-item-m-container-headline-gap, 8px);
67
+ height:var(--size-drop-list-item-headline, 24px);
68
+ }
61
69
  .droplistItem[data-size=l]{
62
70
  padding-left:calc(var(--level, 0) * var(--dimension-050m, 4px) + var(--space-drop-list-item-l-container-horizontal-padding, 12px));
63
71
  }
72
+ .droplistItem[data-size=l] .headline{
73
+ gap:var(--space-drop-list-item-l-container-headline-gap, 8px);
74
+ height:var(--size-drop-list-item-headline, 24px);
75
+ }
64
76
  .droplistItem[data-non-pointer]{
65
77
  cursor:inherit;
66
78
  }
67
- .droplistItem[aria-disabled] .expandableIcon, .droplistItem[data-disabled] .expandableIcon{
79
+
80
+ .innerWrapper[data-disabled] .expandableIcon{
68
81
  color:var(--sys-neutral-text-disabled, #b3b6bf);
69
82
  }
70
- .droplistItem[aria-disabled] .beforeContent, .droplistItem[data-disabled] .beforeContent{
83
+ .innerWrapper[data-disabled] .beforeContent{
71
84
  opacity:var(--opacity-a064, 0.64);
72
85
  }
73
- .droplistItem[data-has-checked][data-variant=single]::after, .droplistItem[data-checked][data-variant=single]::after{
86
+ .innerWrapper[data-disabled] .droplistItem{
87
+ cursor:not-allowed;
88
+ }
89
+ .innerWrapper[data-has-checked][data-variant=single]::before, .innerWrapper[data-checked][data-variant=single]::before{
74
90
  opacity:var(--opacity-a008, 0.08);
75
91
  background-color:var(--sys-primary-accent-default, #794ed3);
76
92
  }
77
- .droplistItem[data-has-checked][data-variant=single]:hover::after, .droplistItem[data-checked][data-variant=single]:hover::after{
93
+ .innerWrapper[data-has-checked][data-variant=single]:hover::before, .innerWrapper[data-checked][data-variant=single]:hover::before{
78
94
  opacity:var(--opacity-a016, 0.16);
79
95
  background-color:var(--sys-primary-accent-default, #794ed3);
80
96
  }
81
- .droplistItem[data-has-checked] .markerContainer:before, .droplistItem[data-checked] .markerContainer:before{
97
+ .innerWrapper[data-has-checked] .markerContainer:before, .innerWrapper[data-checked] .markerContainer:before{
82
98
  background-color:var(--sys-primary-accent-default, #794ed3);
83
99
  }
84
- .droplistItem[data-has-checked]:focus-visible[data-variant=single], .droplistItem[data-checked]:focus-visible[data-variant=single]{
100
+ .innerWrapper[data-has-checked] .droplistItem:focus-visible[data-variant=single], .innerWrapper[data-checked] .droplistItem:focus-visible[data-variant=single]{
85
101
  outline-color:var(--sys-primary-accent-default, #794ed3);
86
102
  }
87
- .droplistItem[data-has-checked][data-disabled][data-variant=single]::before, .droplistItem[data-checked][data-disabled][data-variant=single]::before{
88
- display:none;
89
- }
90
- .droplistItem[data-has-checked][data-disabled] .markerContainer:before, .droplistItem[data-checked][data-disabled] .markerContainer:before{
103
+ .innerWrapper[data-has-checked][data-disabled] .markerContainer:before, .innerWrapper[data-checked][data-disabled] .markerContainer:before{
91
104
  background-color:var(--sys-neutral-text-disabled, #b3b6bf);
92
105
  }
93
106
 
94
107
  .content{
108
+ overflow:hidden;
95
109
  flex-grow:1;
96
110
  flex-shrink:1;
97
111
  box-sizing:border-box;
package/dist/components/Items/PinGroupItem/PinGroupItem.js CHANGED
@@ -1,15 +1,19 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import cn from 'classnames';
3
+ import { Divider } from '@snack-uikit/divider';
4
+ import { useNewListContext } from '../../Lists/contexts';
3
5
  import styles from './styles.module.css';
4
6
  export function PinTopGroupItem({ children }) {
7
+ const { size = 's' } = useNewListContext();
5
8
  if (!children) {
6
9
  return null;
7
10
  }
8
- return (_jsx("div", { className: cn(styles.pinTopItem), "data-test-id": 'list__pin-top-group-item', children: children }));
11
+ return (_jsxs("div", { className: cn(styles.pinTopItem), "data-size": size, "data-test-id": 'list__pin-top-group-item', children: [_jsx("div", { children: children }), _jsx(Divider, { weight: 'regular' })] }));
9
12
  }
10
13
  export function PinBottomGroupItem({ children }) {
14
+ const { size = 's' } = useNewListContext();
11
15
  if (!children) {
12
16
  return null;
13
17
  }
14
- return (_jsx("div", { className: cn(styles.pinBottomItem), "data-test-id": 'list__pin-bottom-group-item', children: children }));
18
+ return (_jsxs("div", { className: cn(styles.pinBottomItem), "data-size": size, "data-test-id": 'list__pin-bottom-group-item', children: [_jsx(Divider, { weight: 'regular' }), _jsx("div", { children: children })] }));
15
19
  }
package/dist/components/Items/PinGroupItem/styles.module.css CHANGED
@@ -1,13 +1,19 @@
1
1
  .pinTopItem{
2
- padding-bottom:var(--radius-drop-list-container, 8px);
3
- border-bottom:var(--border-width-droplist-pin-content, 1px);
4
2
  display:flex;
5
3
  flex-direction:column;
6
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
7
- border-style:solid;
8
- border-top:0;
9
- border-right:0;
10
- border-left:0;
4
+ border:none;
5
+ }
6
+ .pinTopItem[data-size=s]{
7
+ padding-bottom:var(--radius-drop-list-container, 8px);
8
+ gap:var(--radius-drop-list-container, 8px);
9
+ }
10
+ .pinTopItem[data-size=m]{
11
+ padding-bottom:var(--radius-drop-list-container, 8px);
12
+ gap:var(--radius-drop-list-container, 8px);
13
+ }
14
+ .pinTopItem[data-size=l]{
15
+ padding-bottom:var(--radius-drop-list-container, 8px);
16
+ gap:var(--radius-drop-list-container, 8px);
11
17
  }
12
18
  .pinTopItem li,
13
19
  .pinTopItem ul{
@@ -15,15 +21,21 @@
15
21
  }
16
22
 
17
23
  .pinBottomItem{
18
- padding-top:var(--radius-drop-list-container, 8px);
19
- border-top:var(--border-width-droplist-pin-content, 1px);
20
24
  display:flex;
21
25
  flex-direction:column;
22
- border-color:var(--sys-neutral-decor-default, #dfe2ec);
23
- border-style:solid;
24
- border-right:0;
25
- border-bottom:0;
26
- border-left:0;
26
+ border:none;
27
+ }
28
+ .pinBottomItem[data-size=s]{
29
+ padding-top:var(--radius-drop-list-container, 8px);
30
+ gap:var(--radius-drop-list-container, 8px);
31
+ }
32
+ .pinBottomItem[data-size=m]{
33
+ padding-top:var(--radius-drop-list-container, 8px);
34
+ gap:var(--radius-drop-list-container, 8px);
35
+ }
36
+ .pinBottomItem[data-size=l]{
37
+ padding-top:var(--radius-drop-list-container, 8px);
38
+ gap:var(--radius-drop-list-container, 8px);
27
39
  }
28
40
  .pinBottomItem li,
29
41
  .pinBottomItem ul{
package/dist/components/Items/SearchItem/SearchItem.js CHANGED
@@ -11,8 +11,8 @@ export function SearchItem({ search, itemRef }) {
11
11
  e.preventDefault();
12
12
  }
13
13
  if (['ArrowRight'].includes(e.key)) {
14
- // e.stopPropagation();
15
- // e.preventDefault();
14
+ e.stopPropagation();
15
+ e.preventDefault();
16
16
  }
17
17
  };
18
18
  const handleFocus = (e) => {
package/dist/components/Items/styles.module.css CHANGED
@@ -1,3 +1,36 @@
1
+ .itemWrapper{
2
+ position:relative;
3
+ min-width:100%;
4
+ margin:0;
5
+ padding:0;
6
+ }
7
+ .itemWrapper::before, .itemWrapper::after{
8
+ pointer-events:none;
9
+ content:"";
10
+ position:absolute;
11
+ top:0;
12
+ left:0;
13
+ width:100%;
14
+ height:100%;
15
+ background-color:transparent;
16
+ }
17
+ .itemWrapper[data-disabled], .itemWrapper:disabled{
18
+ cursor:not-allowed;
19
+ background-color:transparent;
20
+ outline:none;
21
+ }
22
+ .itemWrapper[data-disabled]::before, .itemWrapper:disabled::before{
23
+ display:none;
24
+ }
25
+ .itemWrapper[data-disabled]::after, .itemWrapper:disabled::after{
26
+ cursor:not-allowed;
27
+ background-color:transparent;
28
+ }
29
+ .itemWrapper:not([data-inactive], [data-disabled])[data-open]::before, .itemWrapper:not([data-inactive], [data-disabled])[data-focused]::before, .itemWrapper:not([data-inactive], [data-disabled]):hover::before, .itemWrapper:not([data-inactive], [data-disabled]):focus-visible::before{
30
+ opacity:var(--opacity-a008, 0.08);
31
+ background-color:var(--sys-neutral-accent-default, #6f717c);
32
+ }
33
+
1
34
  .listItem{
2
35
  cursor:pointer;
3
36
  position:relative;
@@ -40,32 +73,6 @@
40
73
  padding-right:var(--space-drop-list-item-l-container-horizontal-padding, 12px);
41
74
  gap:var(--space-drop-list-item-l-container-gap, 8px);
42
75
  }
43
- .listItem::after{
44
- pointer-events:none;
45
- content:"";
46
- position:absolute;
47
- top:0;
48
- left:0;
49
- width:100%;
50
- height:100%;
51
- background-color:transparent;
52
- }
53
- .listItem[data-disabled], .listItem:disabled{
54
- cursor:not-allowed;
55
- background-color:transparent;
56
- outline:none;
57
- }
58
- .listItem[data-disabled]::before, .listItem:disabled::before{
59
- display:none;
60
- }
61
- .listItem[data-disabled]::after, .listItem:disabled::after{
62
- cursor:not-allowed;
63
- background-color:transparent;
64
- }
65
- .listItem:not([data-inactive], [data-disabled])[data-open]::after, .listItem:not([data-inactive], [data-disabled])[data-focused]::after, .listItem:not([data-inactive], [data-disabled]):hover::after, .listItem:not([data-inactive], [data-disabled]):focus-visible::after{
66
- opacity:var(--opacity-a008, 0.08);
67
- background-color:var(--sys-neutral-accent-default, #6f717c);
68
- }
69
76
  .listItem:not([data-inactive], [data-disabled])[data-focused], .listItem:not([data-inactive], [data-disabled]):focus-visible{
70
77
  outline-width:var(--border-state-focus-s-border-width, 2px);
71
78
  outline-style:var(--border-state-focus-s-border-style, solid);
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.10.1-preview-7a18c2ee.0",
7
+ "version": "0.10.1-preview-cb79db34.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -32,23 +32,22 @@
32
32
  "license": "Apache-2.0",
33
33
  "scripts": {},
34
34
  "dependencies": {
35
- "@snack-uikit/button": "0.17.1-preview-7a18c2ee.0",
36
- "@snack-uikit/divider": "3.0.3-preview-7a18c2ee.0",
37
- "@snack-uikit/dropdown": "0.2.2-preview-7a18c2ee.0",
35
+ "@snack-uikit/button": "0.17.1-preview-cb79db34.0",
36
+ "@snack-uikit/divider": "3.0.3-preview-cb79db34.0",
37
+ "@snack-uikit/dropdown": "0.2.2-preview-cb79db34.0",
38
38
  "@snack-uikit/icons": "0.20.1",
39
- "@snack-uikit/info-block": "0.3.4-preview-7a18c2ee.0",
40
- "@snack-uikit/loaders": "0.5.2-preview-7a18c2ee.0",
41
- "@snack-uikit/locale": "0.6.1-preview-7a18c2ee.0",
42
- "@snack-uikit/scroll": "0.5.3-preview-7a18c2ee.0",
43
- "@snack-uikit/search-private": "0.1.6-preview-7a18c2ee.0",
44
- "@snack-uikit/toggles": "0.9.8-preview-7a18c2ee.0",
45
- "@snack-uikit/truncate-string": "0.4.13-preview-7a18c2ee.0",
46
- "@snack-uikit/utils": "3.2.1-preview-7a18c2ee.0",
39
+ "@snack-uikit/info-block": "0.3.4-preview-cb79db34.0",
40
+ "@snack-uikit/loaders": "0.5.2-preview-cb79db34.0",
41
+ "@snack-uikit/scroll": "0.5.3-preview-cb79db34.0",
42
+ "@snack-uikit/search-private": "0.1.6-preview-cb79db34.0",
43
+ "@snack-uikit/toggles": "0.9.8-preview-cb79db34.0",
44
+ "@snack-uikit/truncate-string": "0.4.13-preview-cb79db34.0",
45
+ "@snack-uikit/utils": "3.2.1-preview-cb79db34.0",
47
46
  "classnames": "2.5.1",
48
47
  "merge-refs": "1.2.2"
49
48
  },
50
49
  "peerDependencies": {
51
50
  "@snack-uikit/locale": "*"
52
51
  },
53
- "gitHead": "03534bc6a25f8c31f99d28119c4f3a777a8ae7ac"
52
+ "gitHead": "ec06c40c0ed64aa42d8842734a8c532f5c4603e6"
54
53
  }
package/src/components/Items/BaseItem/BaseItem.tsx CHANGED
@@ -124,61 +124,65 @@ export function BaseItem({
124
124
  const props = extractSupportProps(rest);
125
125
 
126
126
  const itemJSX = (
127
- <li
128
- data-type='outside'
129
- role={'menuitem'}
130
- data-test-id={props['data-test-id'] || 'list__base-item_' + id}
131
- ref={itemRef as unknown as RefObject<HTMLLIElement>}
132
- className={cn(commonStyles.listItem, styles.droplistItem, className)}
133
- data-size={size}
134
- onClick={onClick}
135
- onMouseDown={handleItemMouseDown}
136
- tabIndex={-1}
137
- data-non-pointer={inactive && !onClick}
127
+ <div
128
+ className={cn(commonStyles.itemWrapper, styles.innerWrapper, className)}
138
129
  data-inactive={inactive || undefined}
139
- data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
140
- data-variant={mode || undefined}
141
- data-open={open || undefined}
142
130
  data-disabled={disabled || undefined}
143
- aria-disabled={disabled || undefined}
144
- data-parent={parent || 'list'}
145
- onKeyDown={handleItemKeyDown}
146
- onFocus={handleItemFocus}
147
- style={{ '--level': level }}
131
+ data-variant={mode || undefined}
132
+ data-test-id={props['data-test-id'] || 'list__base-item_' + id}
133
+ data-checked={(isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined}
148
134
  >
149
- {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
150
- <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
151
- )}
152
-
153
- {!switchProp && isSelectionMultiple && interactive && (
154
- <div className={styles.checkbox}>
155
- <Checkbox
156
- size={CHECKBOX_SIZE_MAP[size ?? 's']}
157
- disabled={disabled}
158
- tabIndex={-1}
159
- onChange={isParentNode ? handleCheckboxChange : undefined}
160
- checked={isChecked}
161
- data-test-id='list__base-item-checkbox'
162
- onClick={handleCheckboxClick}
163
- indeterminate={indeterminate}
164
- />
165
- </div>
166
- )}
167
-
168
- {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
169
- {content && isContentItem(content) ? (
170
- contentRender?.({ id, content }) ?? <ItemContent disabled={disabled} {...content} />
171
- ) : (
172
- <div className={styles.content}> {content} </div>
173
- )}
174
- {afterContent}
175
-
176
- {switchProp && interactive && (
177
- <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
178
- )}
179
-
180
- {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
181
- </li>
135
+ <li
136
+ data-type='outside'
137
+ role={'menuitem'}
138
+ data-test-id={props['data-test-id'] || 'list__base-item_' + id}
139
+ ref={itemRef as unknown as RefObject<HTMLLIElement>}
140
+ className={cn(commonStyles.listItem, styles.droplistItem)}
141
+ data-size={size}
142
+ onClick={onClick}
143
+ onMouseDown={handleItemMouseDown}
144
+ tabIndex={-1}
145
+ data-non-pointer={inactive && !onClick}
146
+ data-variant={mode || undefined}
147
+ data-open={open || undefined}
148
+ onKeyDown={handleItemKeyDown}
149
+ onFocus={handleItemFocus}
150
+ style={{ '--level': level }}
151
+ >
152
+ {!switchProp && isSelectionSingle && marker && !isParentNode && interactive && (
153
+ <div className={styles.markerContainer} data-test-id='list__base-item-marker' />
154
+ )}
155
+
156
+ {!switchProp && isSelectionMultiple && interactive && (
157
+ <div className={styles.checkbox}>
158
+ <Checkbox
159
+ size={CHECKBOX_SIZE_MAP[size ?? 's']}
160
+ disabled={disabled}
161
+ tabIndex={-1}
162
+ onChange={isParentNode ? handleCheckboxChange : undefined}
163
+ checked={isChecked}
164
+ data-test-id='list__base-item-checkbox'
165
+ onClick={handleCheckboxClick}
166
+ indeterminate={indeterminate}
167
+ />
168
+ </div>
169
+ )}
170
+
171
+ {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
172
+ {content && isContentItem(content) ? (
173
+ contentRender?.({ id, content }) ?? <ItemContent disabled={disabled} {...content} />
174
+ ) : (
175
+ <div className={styles.content}> {content} </div>
176
+ )}
177
+ {afterContent}
178
+
179
+ {switchProp && interactive && (
180
+ <Switch disabled={disabled} checked={isChecked} data-test-id='list__base-item-switch' />
181
+ )}
182
+
183
+ {!switchProp && expandIcon && <span className={styles.expandableIcon}>{expandIcon}</span>}
184
+ </li>
185
+ </div>
182
186
  );
183
187
 
184
188
  if (!itemWrapRender) {
package/src/components/Items/BaseItem/styles.module.scss CHANGED
@@ -59,7 +59,6 @@ $sizes: 's', 'm', 'l';
59
59
  height: 100%;
60
60
  }
61
61
  }
62
-
63
62
  .droplistItem {
64
63
  width: 100%;
65
64
 
@@ -68,14 +67,19 @@ $sizes: 's', 'm', 'l';
68
67
  padding-left: calc(
69
68
  var(--level, 0) * $dimension-050m + simple-var($drop-list, 'item', $size, 'container', 'padding-left')
70
69
  );
70
+
71
+ .headline {
72
+ @include composite-var($drop-list, 'item', $size, 'headline');
73
+ }
71
74
  }
72
75
  }
73
76
 
74
77
  &[data-non-pointer] {
75
78
  cursor: inherit;
76
79
  }
80
+ }
77
81
 
78
- &[aria-disabled],
82
+ .innerWrapper {
79
83
  &[data-disabled] {
80
84
  .expandableIcon {
81
85
  color: $sys-neutral-text-disabled;
@@ -84,17 +88,22 @@ $sizes: 's', 'm', 'l';
84
88
  .beforeContent {
85
89
  opacity: $opacity-a064;
86
90
  }
91
+
92
+ .droplistItem {
93
+ cursor: not-allowed;
94
+ }
87
95
  }
88
96
 
89
97
  &[data-has-checked],
90
98
  &[data-checked] {
91
99
  &[data-variant='single'] {
92
- &::after {
100
+ &::before {
93
101
  opacity: $opacity-a008;
94
102
  background-color: $sys-primary-accent-default;
95
103
  }
104
+
96
105
  &:hover {
97
- &::after {
106
+ &::before {
98
107
  opacity: $opacity-a016;
99
108
  background-color: $sys-primary-accent-default;
100
109
  }
@@ -105,19 +114,13 @@ $sizes: 's', 'm', 'l';
105
114
  background-color: $sys-primary-accent-default;
106
115
  }
107
116
 
108
- &:focus-visible {
117
+ .droplistItem:focus-visible {
109
118
  &[data-variant='single'] {
110
119
  outline-color: $sys-primary-accent-default;
111
120
  }
112
121
  }
113
122
 
114
123
  &[data-disabled] {
115
- &[data-variant='single'] {
116
- &::before {
117
- display: none;
118
- }
119
- }
120
-
121
124
  .markerContainer:before {
122
125
  background-color: $sys-neutral-text-disabled;
123
126
  }
@@ -126,6 +129,7 @@ $sizes: 's', 'm', 'l';
126
129
  }
127
130
 
128
131
  .content {
132
+ overflow: hidden;
129
133
  flex-grow: 1;
130
134
  flex-shrink: 1;
131
135
  box-sizing: border-box;
package/src/components/Items/PinGroupItem/PinGroupItem.tsx CHANGED
@@ -1,28 +1,38 @@
1
1
  import cn from 'classnames';
2
2
  import { ReactNode } from 'react';
3
3
 
4
+ import { Divider } from '@snack-uikit/divider';
5
+
6
+ import { useNewListContext } from '../../Lists/contexts';
4
7
  import styles from './styles.module.scss';
5
8
 
6
9
  export function PinTopGroupItem({ children }: { children: ReactNode }) {
10
+ const { size = 's' } = useNewListContext();
11
+
7
12
  if (!children) {
8
13
  return null;
9
14
  }
10
15
 
11
16
  return (
12
- <div className={cn(styles.pinTopItem)} data-test-id='list__pin-top-group-item'>
13
- {children}
17
+ <div className={cn(styles.pinTopItem)} data-size={size} data-test-id='list__pin-top-group-item'>
18
+ <div>{children}</div>
19
+
20
+ <Divider weight='regular' />
14
21
  </div>
15
22
  );
16
23
  }
17
24
 
18
25
  export function PinBottomGroupItem({ children }: { children: ReactNode }) {
26
+ const { size = 's' } = useNewListContext();
27
+
19
28
  if (!children) {
20
29
  return null;
21
30
  }
22
31
 
23
32
  return (
24
- <div className={cn(styles.pinBottomItem)} data-test-id='list__pin-bottom-group-item'>
25
- {children}
33
+ <div className={cn(styles.pinBottomItem)} data-size={size} data-test-id='list__pin-bottom-group-item'>
34
+ <Divider weight='regular' />
35
+ <div>{children}</div>
26
36
  </div>
27
37
  );
28
38
  }
package/src/components/Items/PinGroupItem/styles.module.scss CHANGED
@@ -1,17 +1,18 @@
1
1
  @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-dropList';
2
2
  @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
3
 
4
+ $sizes: 's', 'm', 'l';
5
+
4
6
  .pinTopItem {
5
- @include composite-var($drop-list-content-pin-top);
7
+ @each $size in $sizes {
8
+ &[data-size='#{$size}'] {
9
+ @include composite-var($drop-list, 'item', $size, 'content-pin-top');
10
+ }
11
+ }
6
12
 
7
13
  display: flex;
8
14
  flex-direction: column;
9
-
10
- border-color: $sys-neutral-decor-default;
11
- border-style: solid;
12
- border-top: 0;
13
- border-right: 0;
14
- border-left: 0;
15
+ border: none;
15
16
 
16
17
  li,
17
18
  ul {
@@ -20,16 +21,15 @@
20
21
  }
21
22
 
22
23
  .pinBottomItem {
23
- @include composite-var($drop-list-content-pin-bottom);
24
+ @each $size in $sizes {
25
+ &[data-size='#{$size}'] {
26
+ @include composite-var($drop-list, 'item', $size, 'content-pin-bottom');
27
+ }
28
+ }
24
29
 
25
30
  display: flex;
26
31
  flex-direction: column;
27
-
28
- border-color: $sys-neutral-decor-default;
29
- border-style: solid;
30
- border-right: 0;
31
- border-bottom: 0;
32
- border-left: 0;
32
+ border: none;
33
33
 
34
34
  li,
35
35
  ul {
package/src/components/Items/SearchItem/SearchItem.tsx CHANGED
@@ -22,8 +22,8 @@ export function SearchItem({ search, itemRef }: SearchItemProps) {
22
22
  }
23
23
 
24
24
  if (['ArrowRight'].includes(e.key)) {
25
- // e.stopPropagation();
26
- // e.preventDefault();
25
+ e.stopPropagation();
26
+ e.preventDefault();
27
27
  }
28
28
  };
29
29
 
package/src/components/Items/styles.module.scss CHANGED
@@ -3,35 +3,13 @@
3
3
 
4
4
  $sizes: 's', 'm', 'l';
5
5
 
6
- .listItem {
7
- cursor: pointer;
8
-
6
+ .itemWrapper {
9
7
  position: relative;
10
-
11
- display: flex;
12
- flex-direction: row;
13
- align-items: center;
14
-
15
- box-sizing: border-box;
16
- width: max-content;
17
8
  min-width: 100%;
18
9
  margin: 0;
19
10
  padding: 0;
20
11
 
21
- color: $sys-neutral-text-main;
22
- text-align: start;
23
-
24
- appearance: unset;
25
- background-color: transparent;
26
- border: none;
27
- outline: none;
28
-
29
- @each $size in $sizes {
30
- &[data-size='#{$size}'] {
31
- @include composite-var($drop-list, 'item', $size, 'container');
32
- }
33
- }
34
-
12
+ &::before,
35
13
  &::after {
36
14
  pointer-events: none;
37
15
  content: '';
@@ -45,6 +23,7 @@ $sizes: 's', 'm', 'l';
45
23
 
46
24
  background-color: transparent;
47
25
  }
26
+
48
27
  &[data-disabled],
49
28
  &:disabled {
50
29
  cursor: not-allowed;
@@ -66,12 +45,44 @@ $sizes: 's', 'm', 'l';
66
45
  &[data-focused],
67
46
  &:hover,
68
47
  &:focus-visible {
69
- &::after {
48
+ &::before {
70
49
  opacity: $opacity-a008;
71
50
  background-color: $sys-neutral-accent-default;
72
51
  }
73
52
  }
53
+ }
54
+ }
74
55
 
56
+ .listItem {
57
+ cursor: pointer;
58
+
59
+ position: relative;
60
+
61
+ display: flex;
62
+ flex-direction: row;
63
+ align-items: center;
64
+
65
+ box-sizing: border-box;
66
+ width: max-content;
67
+ min-width: 100%;
68
+ margin: 0;
69
+ padding: 0;
70
+
71
+ color: $sys-neutral-text-main;
72
+ text-align: start;
73
+
74
+ appearance: unset;
75
+ background-color: transparent;
76
+ border: none;
77
+ outline: none;
78
+
79
+ @each $size in $sizes {
80
+ &[data-size='#{$size}'] {
81
+ @include composite-var($drop-list, 'item', $size, 'container');
82
+ }
83
+ }
84
+
85
+ &:not([data-inactive], [data-disabled]) {
75
86
  &[data-focused],
76
87
  &:focus-visible {
77
88
  @include outline-inside-var($container-focused-s);