@snack-uikit/tree 0.3.3 → 0.4.0

package/CHANGELOG.md

@@ -3,6 +3,30 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.4.0 (2024-01-11)
+
+
+### Features
+
+* **FF-4018:** add showIcons prop to disable tree node icon ([eecda7f](https://github.com/cloud-ru-tech/snack-uikit/commit/eecda7f35fc98efeea2770098acfe7241b44b57a))
+
+
+
+
+
+## 0.3.4 (2023-12-28)
+
+### Only dependencies have been changed
+* [@snack-uikit/button@0.15.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/button/CHANGELOG.md)
+* [@snack-uikit/droplist@0.12.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/droplist/CHANGELOG.md)
+* [@snack-uikit/toggles@0.9.3](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/toggles/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.4.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+* [@snack-uikit/typography@0.6.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/typography/CHANGELOG.md)
+
+
+
+
+
 ## 0.3.3 (2023-12-25)
 
 ### Only dependencies have been changed

package/README.md

@@ -50,6 +50,7 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 | onDataLoad | `(node: TreeNodeProps) => Promise<unknown>` | - | Колбэк для асинхронной загрузки данных при раскрытии дерева |
 | parentActions | `(node: TreeNodeProps) => DroplistItemSingleProps[]` | - | Дополнительные действия для элемента-родителя |
 | nodeActions | `(node: TreeNodeProps) => DroplistItemSingleProps[]` | - | Дополнительные действия для элемента-потомка |
+| showIcons | `boolean` | true | Флаг отвечающий за отображение иконок у элементов дерева |
 | showLines | `boolean` | true | Флаг отвечающий за отображение линий вложенности |
 | className | `string` | - | CSS-класс |
 | selected | `string \| string[]` | - | Состояние для выбраных элементов: <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк <br> - При <strong>selectionMode</strong>=`Single` - принимает строку |

package/dist/components/Tree/Tree.d.ts

@@ -1,4 +1,4 @@
 import { WithSupportProps } from '@snack-uikit/utils';
 import { TreeBaseProps } from '../../types';
 export type TreeProps = WithSupportProps<TreeBaseProps>;
-export declare function Tree({ data, selected, selectionMode, onSelect, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines, className, ...rest }: TreeProps): import("react/jsx-runtime").JSX.Element;
+export declare function Tree({ data, selected, selectionMode, onSelect, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines, showIcons, className, ...rest }: TreeProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Tree/Tree.js

@@ -16,7 +16,7 @@ import { TreeContextProvider } from '../../contexts/TreeContext';
 import { TreeItem } from '../../helperComponents';
 import styles from './styles.module.css';
 export function Tree(_a) {
-    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"]);
+    var { data, selected, selectionMode, onSelect, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines = true, showIcons = true, className } = _a, rest = __rest(_a, ["data", "selected", "selectionMode", "onSelect", "onNodeClick", "onExpand", "expandedNodes", "nodeActions", "parentActions", "onDataLoad", "showLines", "showIcons", "className"]);
     return (_jsx("div", Object.assign({ className: cn(styles.tree, className), role: 'tree' }, extractSupportProps(rest), { children: _jsx(TreeContextProvider, { value: {
                 data,
                 selected: selected,
@@ -29,5 +29,6 @@ export function Tree(_a) {
                 parentActions,
                 onDataLoad,
                 showLines,
+                showIcons,
             }, children: data.map((node, index) => (_jsx(TreeItem, { node: node, tabIndexAvailable: index === 0 || index === data.length - 1 }, node.id))) }) })));
 }

package/dist/helperComponents/TreeNode/TreeNode.js

@@ -27,7 +27,7 @@ import styles from './styles.module.css';
 import { stopPropagationClick } from './utils';
 export function TreeNode(_a) {
     var { id, title, icon = _jsx(FileSVG, { size: 24 }), expandedIcon = _jsx(FolderOpenSVG, { size: 24 }), collapsedIcon = _jsx(FolderSVG, { size: 24 }), disabled, onClick, nested, className, onChevronClick, onKeyDown, isLoading, parentNode, tabIndexAvailable } = _a, rest = __rest(_a, ["id", "title", "icon", "expandedIcon", "collapsedIcon", "disabled", "onClick", "nested", "className", "onChevronClick", "onKeyDown", "isLoading", "parentNode", "tabIndexAvailable"]);
-    const { isMultiSelect, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showLines, } = useTreeContext();
+    const { isMultiSelect, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showLines, showIcons, } = useTreeContext();
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
     const ref = useRef(null);
@@ -46,11 +46,13 @@ export function TreeNode(_a) {
         }
     }, [isFocused]);
     const treeNodeIcon = useMemo(() => {
+        if (!showIcons)
+            return undefined;
         if (isExpandable) {
             return isExpanded ? expandedIcon : collapsedIcon;
         }
         return icon;
-    }, [isExpandable, icon, isExpanded, expandedIcon, collapsedIcon]);
+    }, [showIcons, isExpandable, icon, isExpanded, expandedIcon, collapsedIcon]);
     const handleClick = e => {
         onNodeClick({
             id,
@@ -137,7 +139,7 @@ export function TreeNode(_a) {
         }
     };
     const getNodeActions = Boolean(nested) ? parentActions : nodeActions;
-    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: {
+    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 }) })), treeNodeIcon && (_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: {
                             id,
                             title,
                             disabled,

package/dist/helperComponents/TreeNode/styles.module.css

@@ -45,7 +45,6 @@
   align-items:center;
   box-sizing:border-box;
   width:100%;
-  border-radius:var(--radius-tree-item-content-layout, 8px);
 }
 .treeNodeContent::before{
   pointer-events:none;

package/dist/types.d.ts

@@ -59,6 +59,11 @@ export type TreeCommonProps = {
     parentActions?(node: TreeNodeProps): ItemSingleProps[];
     /** Дополнительные действия для элемента-потомка */
     nodeActions?(node: TreeNodeProps): ItemSingleProps[];
+    /**
+     * Флаг отвечающий за отображение иконок у элементов дерева
+     * @default true
+     */
+    showIcons?: boolean;
     /** Флаг отвечающий за отображение линий вложенности */
     showLines?: boolean;
     className?: string;

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.3.3",
+  "version": "0.4.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,16 +32,16 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/button": "0.15.0",
-    "@snack-uikit/droplist": "0.12.3",
+    "@snack-uikit/button": "0.15.1",
+    "@snack-uikit/droplist": "0.12.4",
     "@snack-uikit/icons": "0.19.2",
-    "@snack-uikit/toggles": "0.9.2",
-    "@snack-uikit/truncate-string": "0.4.3",
-    "@snack-uikit/typography": "0.6.0",
+    "@snack-uikit/toggles": "0.9.3",
+    "@snack-uikit/truncate-string": "0.4.4",
+    "@snack-uikit/typography": "0.6.1",
     "@snack-uikit/utils": "3.2.0",
     "classnames": "2.3.2",
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "420ccb07e016ae79a8b783e88c24f2045fadc026"
+  "gitHead": "ebf50540bc191ed0f01ce6f1246f1a3e1263a835"
 }

package/src/components/Tree/Tree.tsx

@@ -22,6 +22,7 @@ export function Tree({
   parentActions,
   onDataLoad,
   showLines = true,
+  showIcons = true,
   className,
   ...rest
 }: TreeProps) {
@@ -44,6 +45,7 @@ export function Tree({
           parentActions,
           onDataLoad,
           showLines,
+          showIcons,
         }}
       >
         {data.map((node, index) => (

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -58,6 +58,7 @@ export function TreeNode({
     setFocusIndex,
     focusableNodeIds,
     showLines,
+    showIcons,
   } = useTreeContext();
 
   const [isDroplistOpen, setDroplistOpen] = useState(false);
@@ -86,12 +87,14 @@ export function TreeNode({
   }, [isFocused]);
 
   const treeNodeIcon = useMemo(() => {
+    if (!showIcons) return undefined;
+
     if (isExpandable) {
       return isExpanded ? expandedIcon : collapsedIcon;
     }
 
     return icon;
-  }, [isExpandable, icon, isExpanded, expandedIcon, collapsedIcon]);
+  }, [showIcons, isExpandable, icon, isExpanded, expandedIcon, collapsedIcon]);
 
   const handleClick: TreeNodeProps['onClick'] = e => {
     onNodeClick(
@@ -258,9 +261,11 @@ export function TreeNode({
           </div>
         )}
 
-        <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
-          {treeNodeIcon}
-        </div>
+        {treeNodeIcon && (
+          <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
+            {treeNodeIcon}
+          </div>
+        )}
 
         <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
           <TruncateString text={title} data-test-id={TEST_IDS.title} />

package/src/helperComponents/TreeNode/styles.module.scss

@@ -53,8 +53,6 @@
   box-sizing: border-box;
   width: 100%;
 
-  border-radius: $radius-tree-item-content-layout;
-
   &::before {
     pointer-events: none;
     content: '';

package/src/types.ts

@@ -68,6 +68,11 @@ export type TreeCommonProps = {
   parentActions?(node: TreeNodeProps): ItemSingleProps[];
   /** Дополнительные действия для элемента-потомка */
   nodeActions?(node: TreeNodeProps): ItemSingleProps[];
+  /**
+   * Флаг отвечающий за отображение иконок у элементов дерева
+   * @default true
+   */
+  showIcons?: boolean;
   /** Флаг отвечающий за отображение линий вложенности */
   showLines?: boolean;
   className?: string;