@snack-uikit/tree 0.3.0 → 0.3.2
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.
- package/CHANGELOG.md +24 -0
- package/dist/components/Tree/Tree.js +2 -2
- package/dist/contexts/TreeContext.js +2 -2
- package/dist/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js +2 -2
- package/dist/helperComponents/TreeNode/TreeNode.js +2 -2
- package/dist/helperComponents/TreeNode/components/TreeNodeActions.js +1 -1
- package/package.json +6 -6
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,30 @@
|
|
|
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.3.2 (2023-12-18)
|
|
7
|
+
|
|
8
|
+
### Only dependencies have been changed
|
|
9
|
+
* [@snack-uikit/droplist@0.12.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
|
|
10
|
+
* [@snack-uikit/icons@0.19.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
|
|
11
|
+
* [@snack-uikit/toggles@0.9.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toggles/CHANGELOG.md)
|
|
12
|
+
* [@snack-uikit/truncate-string@0.4.2](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
|
|
18
|
+
## 0.3.1 (2023-12-14)
|
|
19
|
+
|
|
20
|
+
### Only dependencies have been changed
|
|
21
|
+
* [@snack-uikit/droplist@0.12.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/droplist/CHANGELOG.md)
|
|
22
|
+
* [@snack-uikit/icons@0.19.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/icons/CHANGELOG.md)
|
|
23
|
+
* [@snack-uikit/toggles@0.9.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/toggles/CHANGELOG.md)
|
|
24
|
+
* [@snack-uikit/truncate-string@0.4.1](https://git.sbercloud.tech/sbercloud-ui/tokens-design-system/snack-uikit/-/blob/master/packages/truncate-string/CHANGELOG.md)
|
|
25
|
+
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
|
|
6
30
|
# 0.3.0 (2023-12-14)
|
|
7
31
|
|
|
8
32
|
|
|
@@ -17,7 +17,7 @@ import { TreeItem } from '../../helperComponents';
|
|
|
17
17
|
import styles from './styles.module.css';
|
|
18
18
|
export function Tree(_a) {
|
|
19
19
|
var { data, selected, selectionMode, onSelect, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines = true, className } = _a, rest = __rest(_a, ["data", "selected", "selectionMode", "onSelect", "onNodeClick", "onExpand", "expandedNodes", "nodeActions", "parentActions", "onDataLoad", "showLines", "className"]);
|
|
20
|
-
return (_jsx("div", Object.assign({ className: cn(styles.tree, className), role: 'tree' }, extractSupportProps(rest), { children: _jsx(TreeContextProvider,
|
|
20
|
+
return (_jsx("div", Object.assign({ className: cn(styles.tree, className), role: 'tree' }, extractSupportProps(rest), { children: _jsx(TreeContextProvider, { value: {
|
|
21
21
|
data,
|
|
22
22
|
selected: selected,
|
|
23
23
|
selectionMode: selectionMode,
|
|
@@ -29,5 +29,5 @@ export function Tree(_a) {
|
|
|
29
29
|
parentActions,
|
|
30
30
|
onDataLoad,
|
|
31
31
|
showLines,
|
|
32
|
-
}
|
|
32
|
+
}, children: data.map((node, index) => (_jsx(TreeItem, { node: node, tabIndexAvailable: index === 0 || index === data.length - 1 }, node.id))) }) })));
|
|
33
33
|
}
|
|
@@ -84,7 +84,7 @@ export function TreeContextProvider({ children, value }) {
|
|
|
84
84
|
}
|
|
85
85
|
((_a = node.onClick) === null || _a === void 0 ? void 0 : _a.call(node, e)) || (onNodeClickProp === null || onNodeClickProp === void 0 ? void 0 : onNodeClickProp(node, e));
|
|
86
86
|
}, [isSingleSelect, onSelect, onNodeClickProp]);
|
|
87
|
-
return (_jsx(TreeContext.Provider,
|
|
87
|
+
return (_jsx(TreeContext.Provider, { value: Object.assign(Object.assign({}, props), { data, selected: selectedNodes, isSingleSelect,
|
|
88
88
|
isMultiSelect,
|
|
89
89
|
expandedNodes,
|
|
90
90
|
onExpand,
|
|
@@ -94,6 +94,6 @@ export function TreeContextProvider({ children, value }) {
|
|
|
94
94
|
setFocusPosition,
|
|
95
95
|
resetFocusPosition,
|
|
96
96
|
setFocusIndex,
|
|
97
|
-
focusableNodeIds })
|
|
97
|
+
focusableNodeIds }), children: children }));
|
|
98
98
|
}
|
|
99
99
|
export const useTreeContext = () => useContext(TreeContext);
|
|
@@ -83,8 +83,8 @@ export function ExpandableTreeNode(_a) {
|
|
|
83
83
|
return;
|
|
84
84
|
}
|
|
85
85
|
};
|
|
86
|
-
return (_jsxs("div",
|
|
86
|
+
return (_jsxs("div", { className: styles.expandableTreeNode, "data-test-id": dataTestId, "data-expandable": Boolean(node.nested) || undefined, "data-disabled": node.disabled || undefined, children: [_jsx(TreeNode, Object.assign({}, node, { isLoading: isLoading, parentNode: parentNode, onChevronClick: toggleExpand, onKeyDown: handleKeyDown, tabIndexAvailable: tabIndexAvailable })), node.nested && (_jsx("div", { className: styles.expandableWrap, "data-expanded": isExpanded || undefined, "data-test-id": TEST_IDS.expandable, children: showContent && (_jsxs("div", { className: styles.expandableContent, "data-test-id": TEST_IDS.expandableContent, children: [_jsx(TreeLine, { visible: showLines, halfHeight: isLineHalfHeight, "data-test-id": TEST_IDS.line }), _jsx("div", { className: styles.expandableNested, children: node.nested.map(nestedNode => {
|
|
87
87
|
const parent = { id: node.id, nested: node.nested, parentNode };
|
|
88
88
|
return _jsx(TreeItem, { node: nestedNode, parentNode: parent }, nestedNode.id);
|
|
89
|
-
}) })
|
|
89
|
+
}) })] })) }))] }));
|
|
90
90
|
}
|
|
@@ -137,10 +137,10 @@ export function TreeNode(_a) {
|
|
|
137
137
|
}
|
|
138
138
|
};
|
|
139
139
|
const getNodeActions = Boolean(nested) ? parentActions : nodeActions;
|
|
140
|
-
return (_jsxs("div", Object.assign({ role: 'presentation', className: cn(styles.treeNode, className) }, extractSupportProps(rest), { "data-node-id": id
|
|
140
|
+
return (_jsxs("div", Object.assign({ role: 'presentation', className: cn(styles.treeNode, className) }, extractSupportProps(rest), { "data-node-id": id, children: [parentNode && (_jsx(TreeLine, { halfWidth: Boolean(nested), horizontal: true, visible: showLines, "data-test-id": TEST_IDS.line })), !parentNode && !Boolean(nested) && _jsx(TreeLine, { visible: false }), isExpandable && (_jsx(ButtonFunction, { size: 'xs', icon: _jsx(ChevronRightSVG, {}), disabled: disabled, loading: isLoading, onClick: onChevronClick, "data-expanded": isExpanded || undefined, className: styles.treeNodeExpandButton, tabIndex: -1, "data-test-id": TEST_IDS.chevron })), _jsxs("div", { role: 'treeitem', "aria-expanded": isExpanded, "aria-selected": isSelected, "aria-disabled": disabled, "data-multiselect": isMultiSelect || undefined, "data-droplist-active": isDroplistOpen || isDroplistTriggerFocused || undefined, onClick: handleClick, onKeyDown: handleKeyDown, onFocus: handleFocus, onBlur: resetFocusPosition, tabIndex: tabIndexAvailable ? 0 : -1, className: styles.treeNodeContent, "data-test-id": TEST_IDS.item, ref: ref, children: [isMultiSelect && (_jsx("div", { className: styles.treeNodeCheckboxWrap, children: _jsx(Checkbox, { size: 's', disabled: disabled, checked: !disabled && isSelected, indeterminate: !disabled && !isSelected && (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected), onChange: handleSelect, onClick: stopPropagationClick, "data-test-id": TEST_IDS.checkbox, tabIndex: -1 }) })), _jsx("div", { className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon, children: treeNodeIcon }), _jsx(Typography.SansBodyM, { tag: 'div', className: styles.treeNodeTitle, children: _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }) }), getNodeActions && (_jsx(TreeNodeActions, { getNodeActions: getNodeActions, node: {
|
|
141
141
|
id,
|
|
142
142
|
title,
|
|
143
143
|
disabled,
|
|
144
144
|
nested,
|
|
145
|
-
}, focusNode: handleFocus, onBlurActions: handleBlurActions, isDroplistTriggerFocused: isDroplistTriggerFocused, isDroplistOpen: isDroplistOpen, setDroplistOpen: setDroplistOpen }))] })
|
|
145
|
+
}, focusNode: handleFocus, onBlurActions: handleBlurActions, isDroplistTriggerFocused: isDroplistTriggerFocused, isDroplistOpen: isDroplistOpen, setDroplistOpen: setDroplistOpen }))] })] })));
|
|
146
146
|
}
|
|
@@ -35,5 +35,5 @@ export function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focu
|
|
|
35
35
|
return;
|
|
36
36
|
}
|
|
37
37
|
};
|
|
38
|
-
return (_jsx("div",
|
|
38
|
+
return (_jsx("div", { role: 'presentation', className: styles.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: stopPropagationClick, children: _jsx(Droplist, { open: isDroplistOpen, onOpenChange: setDroplistOpen, onFocusLeave: handleDroplistFocusLeave, firstElementRefCallback: firstElementRefCallback, triggerRef: triggerElementRef, placement: 'bottom-end', triggerElement: _jsx(ButtonFunction, { size: 'xs', icon: _jsx(KebabSVG, { size: 24 }), onKeyDown: handleKeyDown, onBlur: onBlurActions, tabIndex: -1, "data-test-id": TEST_IDS.droplistTrigger }), children: droplistActions.map(action => (_jsx(Droplist.ItemSingle, Object.assign({}, action, { onKeyDown: handleDroplistItemKeyDown, onClick: e => handleDroplistItemClick(e, action.onClick), "data-test-id": TEST_IDS.droplistAction }), action.option))) }) }));
|
|
39
39
|
}
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"title": "Tree",
|
|
7
|
-
"version": "0.3.
|
|
7
|
+
"version": "0.3.2",
|
|
8
8
|
"sideEffects": [
|
|
9
9
|
"*.css",
|
|
10
10
|
"*.woff",
|
|
@@ -33,15 +33,15 @@
|
|
|
33
33
|
"scripts": {},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@snack-uikit/button": "0.15.0",
|
|
36
|
-
"@snack-uikit/droplist": "0.12.
|
|
37
|
-
"@snack-uikit/icons": "0.19.
|
|
38
|
-
"@snack-uikit/toggles": "0.9.
|
|
39
|
-
"@snack-uikit/truncate-string": "0.4.
|
|
36
|
+
"@snack-uikit/droplist": "0.12.2",
|
|
37
|
+
"@snack-uikit/icons": "0.19.2",
|
|
38
|
+
"@snack-uikit/toggles": "0.9.2",
|
|
39
|
+
"@snack-uikit/truncate-string": "0.4.2",
|
|
40
40
|
"@snack-uikit/typography": "0.6.0",
|
|
41
41
|
"@snack-uikit/utils": "3.2.0",
|
|
42
42
|
"classnames": "2.3.2",
|
|
43
43
|
"react-transition-state": "2.1.1",
|
|
44
44
|
"uncontrollable": "8.0.4"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "50ef9bb113ec40897ffb3eeae62539ce82ade899"
|
|
47
47
|
}
|