@snack-uikit/list 0.11.2 → 0.11.4-preview-7afaf1cf.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 (6) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/components/Items/BaseItem/BaseItem.js +6 -1
  3. package/dist/components/Items/hooks.js +10 -3
  4. package/package.json +2 -2
  5. package/src/components/Items/BaseItem/BaseItem.tsx +7 -1
  6. package/src/components/Items/hooks.tsx +19 -3
package/CHANGELOG.md CHANGED
@@ -3,6 +3,17 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## 0.11.3 (2024-04-27)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * **PDS-0000:** fix disabled item click event ([81a5cb1](https://github.com/cloud-ru-tech/snack-uikit/commit/81a5cb193f37bf4aee1839a36380ab6c2fc08c4f))
12
+
13
+
14
+
15
+
16
+
6
17
  ## 0.11.2 (2024-04-25)
7
18
 
8
19
 
package/dist/components/Items/BaseItem/BaseItem.js CHANGED
@@ -73,11 +73,16 @@ export function BaseItem(_a) {
73
73
  handleChange();
74
74
  }
75
75
  };
76
+ const handleItemClick = (e) => {
77
+ if (!disabled) {
78
+ onClick === null || onClick === void 0 ? void 0 : onClick(e);
79
+ }
80
+ };
76
81
  const handleCheckboxClick = (e) => {
77
82
  e.stopPropagation();
78
83
  };
79
84
  const props = extractSupportProps(rest);
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-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: 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 })] }) }));
85
+ 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 })] }) }));
81
86
  if (!itemWrapRender) {
82
87
  return itemJSX;
83
88
  }
package/dist/components/Items/hooks.js CHANGED
@@ -62,18 +62,25 @@ export function useGroupItemSelection({ id, allChildIds }) {
62
62
  const item = flattenItems[itemId];
63
63
  return item && !('type' in item);
64
64
  }), [allChildIds, flattenItems]);
65
+ const enableChildIds = useMemo(() => baseChildIds.filter(itemId => {
66
+ const item = flattenItems[itemId];
67
+ return item && !('type' in item) && !item.disabled;
68
+ }), [baseChildIds, flattenItems]);
65
69
  const checked = isSelectionMultiple
66
70
  ? value && Boolean(value.length) && baseChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
67
71
  : undefined;
72
+ const allEnabledChecked = isSelectionMultiple
73
+ ? value && Boolean(value.length) && enableChildIds.every(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
74
+ : undefined;
68
75
  const indeterminate = isSelectionMultiple
69
76
  ? !checked && baseChildIds.some(childId => value === null || value === void 0 ? void 0 : value.includes(childId))
70
77
  : baseChildIds.includes(value !== null && value !== void 0 ? value : '');
71
78
  const handleOnSelect = () => {
72
- if (checked) {
73
- setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !baseChildIds.includes(itemId)));
79
+ if (checked || allEnabledChecked) {
80
+ setValue === null || setValue === void 0 ? void 0 : setValue((value) => (value !== null && value !== void 0 ? value : []).filter(itemId => itemId !== id && !enableChildIds.includes(itemId)));
74
81
  return;
75
82
  }
76
- setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...baseChildIds])));
83
+ setValue === null || setValue === void 0 ? void 0 : setValue((value) => Array.from(new Set([...(value !== null && value !== void 0 ? value : []), ...enableChildIds])));
77
84
  };
78
85
  return { checked, indeterminate, handleOnSelect };
79
86
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "List",
7
- "version": "0.11.2",
7
+ "version": "0.11.4-preview-7afaf1cf.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": "17bfcf1150776cd35c77d9cca8f45dde97472bf1"
52
+ "gitHead": "8558e521d80e9ac37ea81152a6ca736713c41c26"
53
53
  }
package/src/components/Items/BaseItem/BaseItem.tsx CHANGED
@@ -117,6 +117,12 @@ export function BaseItem({
117
117
  }
118
118
  };
119
119
 
120
+ const handleItemClick = (e: MouseEvent<HTMLElement>) => {
121
+ if (!disabled) {
122
+ onClick?.(e);
123
+ }
124
+ };
125
+
120
126
  const handleCheckboxClick = (e: MouseEvent) => {
121
127
  e.stopPropagation();
122
128
  };
@@ -139,7 +145,7 @@ export function BaseItem({
139
145
  ref={itemRef as unknown as RefObject<HTMLLIElement>}
140
146
  className={cn(commonStyles.listItem, styles.droplistItem)}
141
147
  data-size={size}
142
- onClick={onClick}
148
+ onClick={handleItemClick}
143
149
  onMouseDown={handleItemMouseDown}
144
150
  tabIndex={-1}
145
151
  data-non-pointer={inactive && !onClick}
package/src/components/Items/hooks.tsx CHANGED
@@ -103,21 +103,37 @@ export function useGroupItemSelection({ id, allChildIds }: UseGroupItemSelection
103
103
  [allChildIds, flattenItems],
104
104
  );
105
105
 
106
+ const enableChildIds = useMemo(
107
+ () =>
108
+ baseChildIds.filter(itemId => {
109
+ const item = flattenItems[itemId];
110
+
111
+ return item && !('type' in item) && !item.disabled;
112
+ }),
113
+ [baseChildIds, flattenItems],
114
+ );
115
+
106
116
  const checked = isSelectionMultiple
107
117
  ? value && Boolean(value.length) && baseChildIds.every(childId => value?.includes(childId))
108
118
  : undefined;
109
119
 
120
+ const allEnabledChecked = isSelectionMultiple
121
+ ? value && Boolean(value.length) && enableChildIds.every(childId => value?.includes(childId))
122
+ : undefined;
123
+
110
124
  const indeterminate = isSelectionMultiple
111
125
  ? !checked && baseChildIds.some(childId => value?.includes(childId))
112
126
  : baseChildIds.includes(value ?? '');
113
127
 
114
128
  const handleOnSelect = () => {
115
- if (checked) {
116
- setValue?.((value: ItemId[]) => (value ?? []).filter(itemId => itemId !== id && !baseChildIds.includes(itemId)));
129
+ if (checked || allEnabledChecked) {
130
+ setValue?.((value: ItemId[]) =>
131
+ (value ?? []).filter(itemId => itemId !== id && !enableChildIds.includes(itemId)),
132
+ );
117
133
  return;
118
134
  }
119
135
 
120
- setValue?.((value: ItemId[]) => Array.from(new Set([...(value ?? []), ...baseChildIds])));
136
+ setValue?.((value: ItemId[]) => Array.from(new Set([...(value ?? []), ...enableChildIds])));
121
137
  };
122
138
 
123
139
  return { checked, indeterminate, handleOnSelect };