@snack-uikit/list 0.13.10 → 0.13.11-preview-efdf107f.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.d.ts +0 -1
  2. package/dist/components/Items/BaseItem/BaseItem.js +2 -2
  3. package/dist/components/Items/BaseItem/styles.module.css +4 -4
  4. package/dist/components/Items/styles.module.css +2 -2
  5. package/dist/components/Items/types.d.ts +1 -0
  6. package/dist/components/Lists/ListPrivate/styles.module.css +1 -1
  7. package/dist/components/Lists/styles.module.css +2 -2
  8. package/dist/helperComponents/CollapseBlockPrivate/styles.module.css +1 -1
  9. package/dist/helperComponents/ItemContent/styles.module.css +4 -4
  10. package/dist/helperComponents/Separator/styles.module.css +6 -6
  11. package/package.json +2 -2
  12. package/src/components/Items/BaseItem/BaseItem.tsx +3 -3
  13. package/src/components/Items/types.ts +2 -0
package/dist/components/Items/BaseItem/BaseItem.d.ts CHANGED
@@ -4,7 +4,6 @@ type AllBaseItemProps = FlattenBaseItem & {
4
4
  expandIcon?: ReactNode;
5
5
  open?: boolean;
6
6
  indeterminate?: boolean;
7
- checked?: boolean;
8
7
  onSelect?(): void;
9
8
  isParentNode?: boolean;
10
9
  onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
package/dist/components/Items/BaseItem/BaseItem.js CHANGED
@@ -28,7 +28,7 @@ export function BaseItem(_a) {
28
28
  const { forceUpdateActiveItemId } = useFocusListContext();
29
29
  const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
30
30
  const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
31
- const isChecked = isSelectionSingle ? value === id : checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : '');
31
+ const isChecked = isSelectionSingle ? value === id : (checkedProp !== null && checkedProp !== void 0 ? checkedProp : value === null || value === void 0 ? void 0 : value.includes(id !== null && id !== void 0 ? id : ''));
32
32
  const handleChange = () => {
33
33
  onChange === null || onChange === void 0 ? void 0 : onChange(id);
34
34
  };
@@ -86,7 +86,7 @@ export function BaseItem(_a) {
86
86
  e.stopPropagation();
87
87
  };
88
88
  const props = extractSupportProps(rest);
89
- const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: -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 })] }) }));
89
+ const itemJSX = (_jsx("div", { className: cn(commonStyles.itemWrapper, styles.innerWrapper, className), "data-inactive": inactive || undefined, "data-disabled": disabled || undefined, "data-variant": mode || undefined, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, children: _jsxs("li", { "data-type": 'outside', role: 'menuitem', "data-test-id": props['data-test-id'] || 'list__base-item_' + id, "data-checked": (isParentNode && (indeterminate || isChecked)) || (isChecked && !switchProp) || undefined, ref: itemRef, className: cn(commonStyles.listItem, styles.droplistItem), "data-size": size, onClick: handleItemClick, onMouseDown: handleItemMouseDown, tabIndex: -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 })] }) }));
90
90
  if (!itemWrapRender) {
91
91
  return itemJSX;
92
92
  }
package/dist/components/Items/BaseItem/styles.module.css CHANGED
@@ -16,7 +16,7 @@
16
16
  justify-content:center;
17
17
  width:var(--size-icon-container-s, 24px);
18
18
  height:var(--size-icon-container-s, 24px);
19
- color:var(--sys-neutral-text-light, #868892);
19
+ color:var(--sys-neutral-text-light, #8b8e9b);
20
20
  }
21
21
  .beforeContent svg{
22
22
  max-width:100%;
@@ -26,7 +26,7 @@
26
26
  .expandableIcon{
27
27
  display:flex;
28
28
  align-items:center;
29
- color:var(--sys-neutral-text-light, #868892);
29
+ color:var(--sys-neutral-text-light, #8b8e9b);
30
30
  fill:currentColor;
31
31
  }
32
32
 
@@ -78,7 +78,7 @@
78
78
  }
79
79
 
80
80
  .innerWrapper[data-disabled] .expandableIcon{
81
- color:var(--sys-neutral-text-disabled, #b3b6bf);
81
+ color:var(--sys-neutral-text-disabled, #aaaebd);
82
82
  }
83
83
  .innerWrapper[data-disabled] .beforeContent{
84
84
  opacity:var(--opacity-a064, 0.64);
@@ -101,7 +101,7 @@
101
101
  outline-color:var(--sys-primary-accent-default, #794ed3);
102
102
  }
103
103
  .innerWrapper[data-has-checked][data-disabled] .markerContainer:before, .innerWrapper[data-checked][data-disabled] .markerContainer:before{
104
- background-color:var(--sys-neutral-text-disabled, #b3b6bf);
104
+ background-color:var(--sys-neutral-text-disabled, #aaaebd);
105
105
  }
106
106
 
107
107
  .content{
package/dist/components/Items/styles.module.css CHANGED
@@ -28,7 +28,7 @@
28
28
  }
29
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
30
  opacity:var(--opacity-a008, 0.08);
31
- background-color:var(--sys-neutral-accent-default, #6f717c);
31
+ background-color:var(--sys-neutral-accent-default, #787b8a);
32
32
  }
33
33
 
34
34
  .listItem{
@@ -43,7 +43,7 @@
43
43
  min-width:100%;
44
44
  margin:0;
45
45
  padding:0;
46
- color:var(--sys-neutral-text-main, #33333b);
46
+ color:var(--sys-neutral-text-main, #33343f);
47
47
  text-align:start;
48
48
  -webkit-appearance:unset;
49
49
  -moz-appearance:unset;
package/dist/components/Items/types.d.ts CHANGED
@@ -50,6 +50,7 @@ export type BaseItem = WithSupportProps<{
50
50
  */
51
51
  switch?: boolean;
52
52
  itemWrapRender?(item: ReactNode): ReactNode;
53
+ checked?: boolean;
53
54
  }>;
54
55
  type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;
55
56
  export type Item = BaseItem | AccordionItem | NextListItem | GroupItem | GroupSelectItem;
package/dist/components/Lists/ListPrivate/styles.module.css CHANGED
@@ -29,7 +29,7 @@
29
29
  outline-style:var(--border-state-focus-s-border-style, solid);
30
30
  outline-color:var(--border-state-focus-s-border-color, );
31
31
  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
32
- outline-color:var(--sys-available-complementary, #141415);
32
+ outline-color:var(--sys-available-complementary, #15151b);
33
33
  }
34
34
 
35
35
  .scrollStub{
package/dist/components/Lists/styles.module.css CHANGED
@@ -14,7 +14,7 @@
14
14
  outline-style:var(--border-state-focus-s-border-style, solid);
15
15
  outline-color:var(--border-state-focus-s-border-color, );
16
16
  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
17
- outline-color:var(--sys-available-complementary, #141415);
17
+ outline-color:var(--sys-available-complementary, #15151b);
18
18
  }
19
19
  .listContainer:focus-visible[data-active] *{
20
20
  cursor:inherit;
@@ -36,7 +36,7 @@
36
36
  outline-style:var(--border-state-focus-s-border-style, solid);
37
37
  outline-color:var(--border-state-focus-s-border-color, );
38
38
  outline-offset:calc(var(--border-state-focus-s-border-width, 2px) * -1);
39
- outline-color:var(--sys-available-complementary, #141415);
39
+ outline-color:var(--sys-available-complementary, #15151b);
40
40
  }
41
41
  .wrapper li,
42
42
  .wrapper ul{
package/dist/helperComponents/CollapseBlockPrivate/styles.module.css CHANGED
@@ -34,5 +34,5 @@
34
34
  width:100%;
35
35
  height:100%;
36
36
  opacity:var(--opacity-a004, 0.04);
37
- background-color:var(--sys-neutral-accent-default, #6f717c);
37
+ background-color:var(--sys-neutral-accent-default, #787b8a);
38
38
  }
package/dist/helperComponents/ItemContent/styles.module.css CHANGED
@@ -6,18 +6,18 @@
6
6
  .label{
7
7
  overflow:hidden;
8
8
  flex:1;
9
- color:var(--sys-neutral-text-main, #33333b);
9
+ color:var(--sys-neutral-text-main, #33343f);
10
10
  }
11
11
 
12
12
  .caption{
13
13
  overflow:hidden;
14
- color:var(--sys-neutral-text-light, #868892);
14
+ color:var(--sys-neutral-text-light, #8b8e9b);
15
15
  text-overflow:ellipsis;
16
16
  white-space:nowrap;
17
17
  }
18
18
 
19
19
  .description{
20
- color:var(--sys-neutral-text-support, #656771);
20
+ color:var(--sys-neutral-text-support, #6d707f);
21
21
  }
22
22
 
23
23
  .content{
@@ -113,5 +113,5 @@
113
113
  .content[data-disabled] .label,
114
114
  .content[data-disabled] .description,
115
115
  .content[data-disabled] .caption{
116
- color:var(--sys-neutral-text-disabled, #b3b6bf);
116
+ color:var(--sys-neutral-text-disabled, #aaaebd);
117
117
  }
package/dist/helperComponents/Separator/styles.module.css CHANGED
@@ -19,7 +19,7 @@
19
19
  font-weight:var(--sans-label-m-font-weight, Semibold);
20
20
  line-height:var(--sans-label-m-line-height, 16px);
21
21
  font-size:var(--sans-label-m-font-size, 12px);
22
- letter-spacing:var(--sans-label-m-letter-spacing, -0.1px);
22
+ letter-spacing:var(--sans-label-m-letter-spacing, 0px);
23
23
  paragraph-spacing:var(--sans-label-m-paragraph-spacing, 6.6px);
24
24
  }
25
25
  .separatorWithLabel[data-size=s] .label[data-mode=secondary]{
@@ -27,7 +27,7 @@
27
27
  font-weight:var(--light-label-m-font-weight, Regular);
28
28
  line-height:var(--light-label-m-line-height, 16px);
29
29
  font-size:var(--light-label-m-font-size, 12px);
30
- letter-spacing:var(--light-label-m-letter-spacing, -0.1px);
30
+ letter-spacing:var(--light-label-m-letter-spacing, 0px);
31
31
  paragraph-spacing:var(--light-label-m-paragraph-spacing, 6.6px);
32
32
  }
33
33
  .separatorWithLabel[data-size=m]{
@@ -43,7 +43,7 @@
43
43
  font-weight:var(--sans-label-l-font-weight, Semibold);
44
44
  line-height:var(--sans-label-l-line-height, 20px);
45
45
  font-size:var(--sans-label-l-font-size, 14px);
46
- letter-spacing:var(--sans-label-l-letter-spacing, -0.1px);
46
+ letter-spacing:var(--sans-label-l-letter-spacing, 0px);
47
47
  paragraph-spacing:var(--sans-label-l-paragraph-spacing, 7.7px);
48
48
  }
49
49
  .separatorWithLabel[data-size=m] .label[data-mode=secondary]{
@@ -51,7 +51,7 @@
51
51
  font-weight:var(--light-label-l-font-weight, Regular);
52
52
  line-height:var(--light-label-l-line-height, 20px);
53
53
  font-size:var(--light-label-l-font-size, 14px);
54
- letter-spacing:var(--light-label-l-letter-spacing, -0.1px);
54
+ letter-spacing:var(--light-label-l-letter-spacing, 0px);
55
55
  paragraph-spacing:var(--light-label-l-paragraph-spacing, 7.7px);
56
56
  }
57
57
  .separatorWithLabel[data-size=l]{
@@ -108,10 +108,10 @@
108
108
  flex-shrink:1;
109
109
  }
110
110
  .label[data-mode=primary]{
111
- color:var(--sys-neutral-text-main, #33333b);
111
+ color:var(--sys-neutral-text-main, #33343f);
112
112
  }
113
113
  .label[data-mode=secondary]{
114
- color:var(--sys-neutral-text-light, #868892);
114
+ color:var(--sys-neutral-text-light, #8b8e9b);
115
115
  }
116
116
 
117
117
  hr.divider{
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.13.10",
7
+ "version": "0.13.11-preview-efdf107f.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -49,5 +49,5 @@
49
49
  "peerDependencies": {
50
50
  "@snack-uikit/locale": "*"
51
51
  },
52
- "gitHead": "0c81fa6b2657f51768401ba7ce5015fe8d293805"
52
+ "gitHead": "4192642547dd9d7a68194264c1db4a0f6bacc6c5"
53
53
  }
package/src/components/Items/BaseItem/BaseItem.tsx CHANGED
@@ -22,7 +22,7 @@ type AllBaseItemProps = FlattenBaseItem & {
22
22
  expandIcon?: ReactNode;
23
23
  open?: boolean;
24
24
  indeterminate?: boolean;
25
- checked?: boolean;
25
+ // checked?: boolean;
26
26
  onSelect?(): void;
27
27
  isParentNode?: boolean;
28
28
  onOpenNestedList?(e?: KeyboardEvent<HTMLElement>): void;
@@ -60,7 +60,7 @@ export function BaseItem({
60
60
  const { closeDroplist, closeDroplistOnItemClick } = useOpenListContext();
61
61
  const { value, onChange, mode, isSelectionSingle, isSelectionMultiple } = useSelectionContext();
62
62
 
63
- const isChecked = isSelectionSingle ? value === id : checkedProp ?? value?.includes(id ?? '');
63
+ const isChecked = isSelectionSingle ? value === id : (checkedProp ?? value?.includes(id ?? ''));
64
64
 
65
65
  const handleChange = () => {
66
66
  onChange?.(id);
@@ -182,7 +182,7 @@ export function BaseItem({
182
182
 
183
183
  {beforeContent && <div className={styles.beforeContent}>{beforeContent}</div>}
184
184
  {content && isContentItem(content) ? (
185
- contentRender?.({ id, content }) ?? <ItemContent disabled={disabled} {...content} />
185
+ (contentRender?.({ id, content }) ?? <ItemContent disabled={disabled} {...content} />)
186
186
  ) : (
187
187
  <div className={styles.content}> {content} </div>
188
188
  )}
package/src/components/Items/types.ts CHANGED
@@ -60,6 +60,8 @@ export type BaseItem = WithSupportProps<{
60
60
  switch?: boolean;
61
61
 
62
62
  itemWrapRender?(item: ReactNode): ReactNode;
63
+
64
+ checked?: boolean;
63
65
  }>;
64
66
 
65
67
  type BaseItemWithoutNonGroup = Omit<BaseItem, 'switch' | 'inactive'>;