@snack-uikit/tree 0.6.26 → 0.6.28

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.6.28 (2024-10-16)
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.17.2](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+
+
+
+
+
+## 0.6.27 (2024-10-15)
+
+
+### Bug Fixes
+
+* **PDS-556:** add render fn for tree component ([6b2608e](https://github.com/cloud-ru-tech/snack-uikit/commit/6b2608ee282abe8ac039d98ca71c4365c84774f1))
+
+
+
+
+
 ## 0.6.26 (2024-10-14)
 
 ### Only dependencies have been changed

package/README.md

@@ -55,6 +55,7 @@ const [selectedNodes, setSelected] = useState<TreeNodeId[]>([]);
 | selectionMode | "single" \| "multi" | - | Режим выбора элементов: <br> - `Single` - одиночный выбор <br> - `Multi` - множественный выбор <br> - `undefined` - без выбора |
 | selected | `string \| string[]` | - | Состояние для выбраных элементов: <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк <br> - При <strong>selectionMode</strong>=`Single` - принимает строку |
 | onSelect | `((selectedKeys: string[], node: TreeNodeProps) => void) \| ((selectedKey: string, node: TreeNodeProps) => void)` | - | Колбэк при изменении выбраных элементов: <br> - При <strong>selectionMode</strong>=`Multi` - возвращает массив строк <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку |
+| showToggle | `boolean` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/Tree/Tree.js

@@ -18,7 +18,7 @@ import styles from './styles.module.css';
 import { extractSelectableProps } from './utils';
 export function Tree(_a) {
     var { data, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines = true, showIcons = true, className } = _a, rest = __rest(_a, ["data", "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: Object.assign({ data,
+    return (_jsx("div", Object.assign({ className: cn(styles.tree, className), role: 'tree' }, extractSupportProps(rest), { children: _jsx(TreeContextProvider, { value: Object.assign({ showToggle: rest.selectionMode === 'single' && rest.showToggle, data,
                 expandedNodes,
                 onNodeClick,
                 onExpand,

package/dist/constants.d.ts

@@ -11,6 +11,7 @@ export declare const TEST_IDS: {
     item: string;
     chevron: string;
     checkbox: string;
+    radio: string;
     icon: string;
     title: string;
     droplistTrigger: string;

package/dist/constants.js

@@ -11,6 +11,7 @@ export const TEST_IDS = {
     item: 'tree__node__item',
     chevron: 'tree__node__chevron',
     checkbox: 'tree__node__checkbox',
+    radio: 'tree__node__radio',
     icon: 'tree__node__icon',
     title: 'tree__node__title',
     droplistTrigger: 'tree__node__droplist-trigger',

package/dist/contexts/TreeContext.d.ts

@@ -1,6 +1,9 @@
 import { Dispatch, ReactNode, SetStateAction } from 'react';
 import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
-type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'> & {
+type TreeContextBaseProps = TreeBaseProps & {
+    showToggle?: boolean;
+};
+type TreeContextProps = Omit<TreeContextBaseProps, 'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'> & {
     onExpand(node: TreeNodeProps): void;
     onSelect(node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>, parentNode?: ParentNode): void;
     selected?: TreeNodeId[] | TreeNodeId;
@@ -16,7 +19,7 @@ type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeCli
 };
 type TreeContextProviderProps = {
     children: ReactNode;
-    value: TreeBaseProps;
+    value: TreeContextBaseProps;
 };
 export declare const TreeContext: import("react").Context<TreeContextProps>;
 export declare function TreeContextProvider({ children, value }: TreeContextProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/contexts/TreeContext.js

@@ -47,7 +47,7 @@ export function TreeContextProvider({ children, value }) {
         if (!isSelectable || node.disabled)
             return;
         if (isSingleSelect) {
-            onSelectHandler(node.id, node);
+            onSelectHandler(node.id === selectedNodes ? undefined : node.id, node);
             return;
         }
         if (Array.isArray(selectedNodes)) {

package/dist/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js

@@ -52,8 +52,6 @@ export function ExpandableTreeNode(_a) {
         }
     }, [isExpanded, node.nested, state.status]);
     const toggleExpand = () => __awaiter(this, void 0, void 0, function* () {
-        if (node.disabled)
-            return;
         if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
             setLoading(true);
             yield onDataLoad(node).finally(() => {
@@ -85,6 +83,6 @@ export function ExpandableTreeNode(_a) {
     };
     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 => {
                                 const parent = { id: node.id, nested: node.nested, parentNode };
-                                return _jsx(TreeItem, { node: nestedNode, parentNode: parent }, nestedNode.id);
+                                return (_jsx(TreeItem, { node: Object.assign(Object.assign({}, nestedNode), { disabled: node.disabled || nestedNode.disabled }), parentNode: parent }, nestedNode.id));
                             }) })] })) }))] }));
 }

package/dist/helperComponents/TreeNode/TreeNode.js

@@ -14,7 +14,7 @@ import cn from 'classnames';
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
-import { Checkbox } from '@snack-uikit/toggles';
+import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -27,16 +27,16 @@ 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, isSelectable, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showLines, showIcons, } = useTreeContext();
+    const { isMultiSelect, isSelectable, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showToggle, showLines, showIcons, } = useTreeContext();
     const [isDroplistOpen, setDroplistOpen] = useState(false);
     const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
     const ref = useRef(null);
     const isExpandable = Array.isArray(nested);
     const isExpanded = isExpandable ? expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(id) : undefined;
     const nestedNodesSelection = useMemo(() => {
-        if (!nested || !Array.isArray(selected) || !(selected === null || selected === void 0 ? void 0 : selected.length))
+        if (!nested || !selected)
             return undefined;
-        return checkNestedNodesSelection(nested, selected);
+        return checkNestedNodesSelection(nested, Array.isArray(selected) ? selected : [selected]);
     }, [nested, selected]);
     const isSelected = (Array.isArray(selected) ? selected.includes(id) || (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.allSelected) : selected === id) || false;
     const isFocused = focusedNodeId === id;
@@ -139,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": isSelectable ? isSelected : undefined, "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: {
+    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, {}), 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": isSelectable ? isSelected : undefined, "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 || showToggle) && (_jsxs("div", { className: styles.treeNodeCheckboxWrap, children: [isMultiSelect && (_jsx(Checkbox, { size: 's', disabled: disabled, checked: isSelected, indeterminate: !isSelected && (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected), onChange: handleSelect, onClick: stopPropagationClick, "data-test-id": TEST_IDS.checkbox, tabIndex: -1 })), showToggle && (_jsx(Radio, { size: 's', checked: isSelected, disabled: disabled || (!isSelected && (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected)), "data-test-id": TEST_IDS.radio, tabIndex: -1 }))] })), treeNodeIcon && (_jsx("div", { className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon, children: treeNodeIcon })), _jsxs(Typography.SansBodyM, { tag: 'div', className: styles.treeNodeTitle, children: [typeof title === 'string' && _jsx(TruncateString, { text: title, "data-test-id": TEST_IDS.title }), typeof title !== 'string' && title({ id, disabled, nested })] }), getNodeActions && (_jsx(TreeNodeActions, { getNodeActions: getNodeActions, node: {
                             id,
                             title,
                             disabled,

package/dist/types.d.ts

@@ -8,7 +8,7 @@ export type BaseTreeNode = WithSupportProps<{
     /** Идентификатор элемента */
     id: TreeNodeId;
     /** Имя элемента */
-    title: string;
+    title: string | ((value: Pick<BaseTreeNode, 'id' | 'disabled'>) => ReactNode);
     /** Является ли элемент деактивированным */
     disabled?: boolean;
     /** Обработчик клика по элементу */
@@ -30,6 +30,7 @@ export type ParentTreeNode = BaseTreeNode & {
     collapsedIcon?: ReactNode;
     /** Вложенные элементы дерева */
     nested: (ChildTreeNode | ParentTreeNode)[];
+    title: string | ((value: Pick<ParentTreeNode, 'id' | 'disabled' | 'nested'>) => ReactNode);
 };
 export type TreeNodeProps = ChildTreeNode | ParentTreeNode;
 export type ParentNode = Pick<TreeNodeProps, 'id' | 'nested'> & {
@@ -81,6 +82,7 @@ export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
     selected?: TreeNodeId;
     /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
     onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
+    showToggle?: boolean;
 };
 export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
     selectionMode: 'multi';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.6.26",
+  "version": "0.6.28",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -34,7 +34,7 @@
   "dependencies": {
     "@snack-uikit/button": "0.17.5",
     "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/list": "0.17.1",
+    "@snack-uikit/list": "0.17.2",
     "@snack-uikit/toggles": "0.10.4",
     "@snack-uikit/truncate-string": "0.4.24",
     "@snack-uikit/typography": "0.6.3",
@@ -43,5 +43,5 @@
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "c2ae92f1626a256a9a0505c2cd74136cba9700bb"
+  "gitHead": "995adf216ab5c2a02a2722d6e7ed6c928d4e0c63"
 }

package/src/components/Tree/Tree.tsx

@@ -27,6 +27,7 @@ export function Tree({
     <div className={cn(styles.tree, className)} role='tree' {...extractSupportProps(rest)}>
       <TreeContextProvider
         value={{
+          showToggle: rest.selectionMode === 'single' && rest.showToggle,
           data,
           expandedNodes,
           onNodeClick,

package/src/constants.ts

@@ -13,6 +13,7 @@ export const TEST_IDS = {
   item: 'tree__node__item',
   chevron: 'tree__node__chevron',
   checkbox: 'tree__node__checkbox',
+  radio: 'tree__node__radio',
   icon: 'tree__node__icon',
   title: 'tree__node__title',
   droplistTrigger: 'tree__node__droplist-trigger',

package/src/contexts/TreeContext.tsx

@@ -5,7 +5,14 @@ import { SELECTION_MODE } from '../constants';
 import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../helpers';
 import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
 
-type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'> & {
+type TreeContextBaseProps = TreeBaseProps & {
+  showToggle?: boolean;
+};
+
+type TreeContextProps = Omit<
+  TreeContextBaseProps,
+  'onSelect' | 'onExpand' | 'onNodeClick' | 'selected' | 'selectionMode'
+> & {
   onExpand(node: TreeNodeProps): void;
   onSelect(node: Pick<TreeNodeProps, 'id' | 'nested' | 'disabled'>, parentNode?: ParentNode): void;
   selected?: TreeNodeId[] | TreeNodeId;
@@ -22,7 +29,7 @@ type TreeContextProps = Omit<TreeBaseProps, 'onSelect' | 'onExpand' | 'onNodeCli
 
 type TreeContextProviderProps = {
   children: ReactNode;
-  value: TreeBaseProps;
+  value: TreeContextBaseProps;
 };
 
 export const TreeContext = createContext<TreeContextProps>({
@@ -81,7 +88,7 @@ export function TreeContextProvider({ children, value }: TreeContextProviderProp
       if (!isSelectable || node.disabled) return;
 
       if (isSingleSelect) {
-        onSelectHandler(node.id, node);
+        onSelectHandler(node.id === selectedNodes ? undefined : node.id, node);
         return;
       }
 

package/src/helperComponents/ExpandableTreeNode/ExpandableTreeNode.tsx

@@ -48,8 +48,6 @@ export function ExpandableTreeNode({
   }, [isExpanded, node.nested, state.status]);
 
   const toggleExpand = async () => {
-    if (node.disabled) return;
-
     if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
       setLoading(true);
 
@@ -114,7 +112,13 @@ export function ExpandableTreeNode({
                 {node.nested.map(nestedNode => {
                   const parent: ParentNode = { id: node.id, nested: node.nested, parentNode };
 
-                  return <TreeItem key={nestedNode.id} node={nestedNode} parentNode={parent} />;
+                  return (
+                    <TreeItem
+                      key={nestedNode.id}
+                      node={{ ...nestedNode, disabled: node.disabled || nestedNode.disabled }}
+                      parentNode={parent}
+                    />
+                  );
                 })}
               </div>
             </div>

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -3,7 +3,7 @@ import { FocusEvent, KeyboardEventHandler, MouseEventHandler, useEffect, useMemo
 
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
-import { Checkbox } from '@snack-uikit/toggles';
+import { Checkbox, Radio } from '@snack-uikit/toggles';
 import { TruncateString } from '@snack-uikit/truncate-string';
 import { Typography } from '@snack-uikit/typography';
 import { extractSupportProps } from '@snack-uikit/utils';
@@ -58,6 +58,7 @@ export function TreeNode({
     focusedNodeId,
     setFocusIndex,
     focusableNodeIds,
+    showToggle,
     showLines,
     showIcons,
   } = useTreeContext();
@@ -71,9 +72,9 @@ export function TreeNode({
   const isExpanded = isExpandable ? expandedNodes?.includes(id) : undefined;
 
   const nestedNodesSelection = useMemo(() => {
-    if (!nested || !Array.isArray(selected) || !selected?.length) return undefined;
+    if (!nested || !selected) return undefined;
 
-    return checkNestedNodesSelection(nested, selected);
+    return checkNestedNodesSelection(nested, Array.isArray(selected) ? selected : [selected]);
   }, [nested, selected]);
 
   const isSelected =
@@ -221,7 +222,6 @@ export function TreeNode({
         <ButtonFunction
           size='xs'
           icon={<ChevronRightSVG />}
-          disabled={disabled}
           loading={isLoading}
           onClick={onChevronClick}
           data-expanded={isExpanded || undefined}
@@ -247,18 +247,29 @@ export function TreeNode({
         data-test-id={TEST_IDS.item}
         ref={ref}
       >
-        {isMultiSelect && (
+        {(isMultiSelect || showToggle) && (
           <div className={styles.treeNodeCheckboxWrap}>
-            <Checkbox
-              size='s'
-              disabled={disabled}
-              checked={!disabled && isSelected}
-              indeterminate={!disabled && !isSelected && nestedNodesSelection?.someSelected}
-              onChange={handleSelect}
-              onClick={stopPropagationClick}
-              data-test-id={TEST_IDS.checkbox}
-              tabIndex={-1}
-            />
+            {isMultiSelect && (
+              <Checkbox
+                size='s'
+                disabled={disabled}
+                checked={isSelected}
+                indeterminate={!isSelected && nestedNodesSelection?.someSelected}
+                onChange={handleSelect}
+                onClick={stopPropagationClick}
+                data-test-id={TEST_IDS.checkbox}
+                tabIndex={-1}
+              />
+            )}
+            {showToggle && (
+              <Radio
+                size='s'
+                checked={isSelected}
+                disabled={disabled || (!isSelected && nestedNodesSelection?.someSelected)}
+                data-test-id={TEST_IDS.radio}
+                tabIndex={-1}
+              />
+            )}
           </div>
         )}
 
@@ -269,7 +280,8 @@ export function TreeNode({
         )}
 
         <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
-          <TruncateString text={title} data-test-id={TEST_IDS.title} />
+          {typeof title === 'string' && <TruncateString text={title} data-test-id={TEST_IDS.title} />}
+          {typeof title !== 'string' && title({ id, disabled, nested } as TreeNodeProps)}
         </Typography.SansBodyM>
 
         {getNodeActions && (

package/src/types.ts

@@ -13,7 +13,7 @@ export type BaseTreeNode = WithSupportProps<{
   /** Идентификатор элемента */
   id: TreeNodeId;
   /** Имя элемента */
-  title: string;
+  title: string | ((value: Pick<BaseTreeNode, 'id' | 'disabled'>) => ReactNode);
   /** Является ли элемент деактивированным */
   disabled?: boolean;
   /** Обработчик клика по элементу */
@@ -37,6 +37,8 @@ export type ParentTreeNode = BaseTreeNode & {
   collapsedIcon?: ReactNode;
   /** Вложенные элементы дерева */
   nested: (ChildTreeNode | ParentTreeNode)[];
+
+  title: string | ((value: Pick<ParentTreeNode, 'id' | 'disabled' | 'nested'>) => ReactNode);
 };
 
 export type TreeNodeProps = ChildTreeNode | ParentTreeNode;
@@ -92,6 +94,7 @@ export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
   selected?: TreeNodeId;
   /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
   onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
+  showToggle?: boolean;
 };
 
 export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {