@snack-uikit/tree 0.9.28 → 0.9.30

package/CHANGELOG.md

@@ -3,6 +3,24 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## <small>0.9.30 (2025-11-14)</small>
+
+### Only dependencies have been changed
+* [@snack-uikit/list@0.32.7](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.7.4](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
+## <small>0.9.29 (2025-11-13)</small>
+
+* feat(PDS-2935): add href param to TreeNode ([c508075](https://github.com/cloud-ru-tech/snack-uikit/commit/c508075))
+
+
+
+
+
 ## <small>0.9.28 (2025-10-28)</small>
 
 ### Only dependencies have been changed

package/dist/cjs/constants.d.ts

@@ -18,4 +18,6 @@ export declare const TEST_IDS: {
     droplistAction: string;
     expandable: string;
     expandableContent: string;
+    link: string;
 };
+export declare const LINK_TEST_HREF = "/snack/?path=/story/welcome--welcome";

package/dist/cjs/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TEST_IDS = exports.TRANSITION_TIMING = exports.SELECTION_MODE = void 0;
+exports.LINK_TEST_HREF = exports.TEST_IDS = exports.TRANSITION_TIMING = exports.SELECTION_MODE = void 0;
 exports.SELECTION_MODE = {
   Single: 'single',
   Multi: 'multi'
@@ -23,5 +23,7 @@ exports.TEST_IDS = {
   droplistTrigger: 'tree__node__droplist-trigger',
   droplistAction: 'tree__node__droplist-action',
   expandable: 'tree__node__expandable',
-  expandableContent: 'tree__node__expandable-content'
-};
+  expandableContent: 'tree__node__expandable-content',
+  link: 'tree__node__link'
+};
+exports.LINK_TEST_HREF = '/snack/?path=/story/welcome--welcome';

package/dist/cjs/helperComponents/TreeNode/TreeNode.js

@@ -54,9 +54,10 @@ exports.TreeNode = (0, react_1.forwardRef)((_a, ref) => {
       onKeyDown,
       isLoading,
       parentNode,
-      tabIndexAvailable
+      tabIndexAvailable,
+      href
     } = _a,
-    rest = __rest(_a, ["id", "title", "icon", "expandedIcon", "collapsedIcon", "disabled", "onClick", "nested", "className", "onChevronClick", "onKeyDown", "isLoading", "parentNode", "tabIndexAvailable"]);
+    rest = __rest(_a, ["id", "title", "icon", "expandedIcon", "collapsedIcon", "disabled", "onClick", "nested", "className", "onChevronClick", "onKeyDown", "isLoading", "parentNode", "tabIndexAvailable", "href"]);
   const {
     isMultiSelect,
     isSelectable,
@@ -78,6 +79,7 @@ exports.TreeNode = (0, react_1.forwardRef)((_a, ref) => {
   const [isDroplistOpen, setDroplistOpen] = (0, react_1.useState)(false);
   const [isDroplistTriggerFocused, setFocusDroplistTrigger] = (0, react_1.useState)(false);
   const contentRef = (0, react_1.useRef)(null);
+  const anchorRef = (0, react_1.useRef)(null);
   const isExpandable = Array.isArray(nested);
   const isExpanded = isExpandable ? expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(id) : undefined;
   const nestedNodesSelection = (0, react_1.useMemo)(() => {
@@ -104,9 +106,20 @@ exports.TreeNode = (0, react_1.forwardRef)((_a, ref) => {
       title,
       disabled,
       nested,
-      onClick
+      onClick,
+      href
     }, e);
   };
+  const handleAnchorClick = e => {
+    e.stopPropagation();
+    if ((e === null || e === void 0 ? void 0 : e.metaKey) || (e === null || e === void 0 ? void 0 : e.ctrlKey) || (e === null || e === void 0 ? void 0 : e.button) === 1) {
+      return;
+    }
+    if (onClick) {
+      e.preventDefault();
+      handleClick(e);
+    }
+  };
   const handleSelect = () => {
     onSelect({
       id,
@@ -185,6 +198,9 @@ exports.TreeNode = (0, react_1.forwardRef)((_a, ref) => {
         {
           e.preventDefault();
           handleSelect();
+          if (href && anchorRef.current) {
+            anchorRef.current.click();
+          }
           return;
         }
       default:
@@ -257,17 +273,22 @@ exports.TreeNode = (0, react_1.forwardRef)((_a, ref) => {
         className: styles_module_scss_1.default.treeNodeIcon,
         "data-test-id": constants_1.TEST_IDS.icon,
         children: treeNodeIcon
-      }), (0, jsx_runtime_1.jsxs)(typography_1.Typography.SansBodyM, {
+      }), (0, jsx_runtime_1.jsx)(typography_1.Typography.SansBodyM, {
         tag: 'div',
         className: styles_module_scss_1.default.treeNodeTitle,
-        children: [typeof title === 'string' && (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
-          text: title,
-          "data-test-id": constants_1.TEST_IDS.title
-        }), typeof title !== 'string' && title({
-          id,
-          disabled,
-          nested
-        })]
+        children: (0, jsx_runtime_1.jsxs)(components_1.TreeNodeHref, {
+          href: href,
+          onClick: handleAnchorClick,
+          ref: anchorRef,
+          children: [typeof title === 'string' && (0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, {
+            text: title,
+            "data-test-id": constants_1.TEST_IDS.title
+          }), typeof title !== 'string' && title({
+            id,
+            disabled,
+            nested
+          })]
+        })
       }), getNodeActions && (0, jsx_runtime_1.jsx)(components_1.TreeNodeActions, {
         getNodeActions: getNodeActions,
         node: {

package/dist/cjs/helperComponents/TreeNode/components/TreeNodeActions.d.ts

@@ -4,8 +4,8 @@ import { TreeNodeProps } from '../../../types';
 type TreeNodeActionsProps = {
     isDroplistOpen: boolean;
     setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-    getNodeActions(node: TreeNodeProps): ItemProps[];
-    node: TreeNodeProps;
+    getNodeActions(node: Omit<TreeNodeProps, 'href'>): ItemProps[];
+    node: Omit<TreeNodeProps, 'href'>;
     isDroplistTriggerFocused: boolean;
     focusNode(): void;
     onBlurActions(): void;

package/dist/cjs/helperComponents/TreeNode/components/TreeNodeHref.d.ts

@@ -0,0 +1,7 @@
+import { MouseEventHandler, ReactNode } from 'react';
+export type TreeNodeHrefProps = {
+    href?: string;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+export declare const TreeNodeHref: import("react").ForwardRefExoticComponent<TreeNodeHrefProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/cjs/helperComponents/TreeNode/components/TreeNodeHref.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TreeNodeHref = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+exports.TreeNodeHref = (0, react_1.forwardRef)((_ref, ref) => {
+  let {
+    href,
+    children,
+    onClick
+  } = _ref;
+  return href ? (0, jsx_runtime_1.jsx)("a", {
+    href: href,
+    className: styles_module_scss_1.default.treeNodeLink,
+    onClick: onClick,
+    "data-test-id": constants_1.TEST_IDS.link,
+    tabIndex: -2,
+    ref: ref,
+    children: children
+  }) : children;
+});
+exports.TreeNodeHref.displayName = 'TreeNodeHref';

package/dist/cjs/helperComponents/TreeNode/components/index.d.ts

@@ -1 +1,2 @@
 export * from './TreeNodeActions';
+export * from './TreeNodeHref';

package/dist/cjs/helperComponents/TreeNode/components/index.js

@@ -22,4 +22,5 @@ var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-__exportStar(require("./TreeNodeActions"), exports);
+__exportStar(require("./TreeNodeActions"), exports);
+__exportStar(require("./TreeNodeHref"), exports);

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

@@ -124,4 +124,11 @@
   flex-direction:column;
   align-self:stretch;
   min-width:var(--size-button-xs, 24px);
+}
+
+.treeNodeLink{
+  display:block;
+  width:100%;
+  color:inherit;
+  text-decoration:none;
 }

package/dist/cjs/types.d.ts

@@ -14,6 +14,8 @@ export type BaseTreeNode = WithSupportProps<{
     /** Обработчик клика по элементу */
     onClick?: MouseEventHandler;
     className?: string;
+    /** Ссылка на элемент */
+    href?: string;
 }>;
 export type ChildTreeNode = BaseTreeNode & {
     /** Иконка дочернего элемента */

package/dist/esm/constants.d.ts

@@ -18,4 +18,6 @@ export declare const TEST_IDS: {
     droplistAction: string;
     expandable: string;
     expandableContent: string;
+    link: string;
 };
+export declare const LINK_TEST_HREF = "/snack/?path=/story/welcome--welcome";

package/dist/esm/constants.js

@@ -18,4 +18,6 @@ export const TEST_IDS = {
     droplistAction: 'tree__node__droplist-action',
     expandable: 'tree__node__expandable',
     expandableContent: 'tree__node__expandable-content',
+    link: 'tree__node__link',
 };
+export const LINK_TEST_HREF = '/snack/?path=/story/welcome--welcome';

package/dist/esm/helperComponents/TreeNode/TreeNode.js

@@ -22,15 +22,16 @@ import { TEST_IDS } from '../../constants';
 import { useTreeContext } from '../../contexts/TreeContext';
 import { checkNestedNodesSelection } from '../../helpers';
 import { TreeLine } from '../TreeLine';
-import { TreeNodeActions } from './components';
+import { TreeNodeActions, TreeNodeHref } from './components';
 import styles from './styles.module.css';
 import { stopPropagationClick } from './utils';
 export const TreeNode = forwardRef((_a, ref) => {
-    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"]);
+    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, href } = _a, rest = __rest(_a, ["id", "title", "icon", "expandedIcon", "collapsedIcon", "disabled", "onClick", "nested", "className", "onChevronClick", "onKeyDown", "isLoading", "parentNode", "tabIndexAvailable", "href"]);
     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 contentRef = useRef(null);
+    const anchorRef = useRef(null);
     const isExpandable = Array.isArray(nested);
     const isExpanded = isExpandable ? expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(id) : undefined;
     const nestedNodesSelection = useMemo(() => {
@@ -60,8 +61,19 @@ export const TreeNode = forwardRef((_a, ref) => {
             disabled,
             nested,
             onClick,
+            href,
         }, e);
     };
+    const handleAnchorClick = (e) => {
+        e.stopPropagation();
+        if ((e === null || e === void 0 ? void 0 : e.metaKey) || (e === null || e === void 0 ? void 0 : e.ctrlKey) || (e === null || e === void 0 ? void 0 : e.button) === 1) {
+            return;
+        }
+        if (onClick) {
+            e.preventDefault();
+            handleClick(e);
+        }
+    };
     const handleSelect = () => {
         onSelect({
             id,
@@ -132,6 +144,9 @@ export const TreeNode = forwardRef((_a, ref) => {
             case 'Enter': {
                 e.preventDefault();
                 handleSelect();
+                if (href && anchorRef.current) {
+                    anchorRef.current.click();
+                }
                 return;
             }
             default:
@@ -141,7 +156,7 @@ export const TreeNode = forwardRef((_a, ref) => {
     const getNodeActions = nested ? parentActions : nodeActions;
     return (_jsxs("div", Object.assign({ role: 'presentation', className: cn(styles.treeNode, className) }, extractSupportProps(rest), { "data-node-id": id, ref: ref, children: [parentNode && (_jsx(TreeLine, { halfWidth: Boolean(nested), horizontal: true, visible: showLines, "data-test-id": TEST_IDS.line })), !parentNode && !nested && _jsx(TreeLine, { visible: false }), isExpandable && (_jsxs("div", { className: styles.treeNodeExpandButtonWrapper, children: [_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 }), _jsx(TreeLine, { visible: isExpanded && showLines, height: '100%' })] })), _jsxs("div", { role: 'treeitem', "aria-expanded": isExpanded, "aria-selected": isSelectable
                     ? isSelected || ((nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.someSelected) && !isExpanded && !isMultiSelect)
-                    : 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: contentRef, 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, "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: {
+                    : 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: contentRef, 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, "data-test-id": TEST_IDS.radio, 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: _jsxs(TreeNodeHref, { href: href, onClick: handleAnchorClick, ref: anchorRef, 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/esm/helperComponents/TreeNode/components/TreeNodeActions.d.ts

@@ -4,8 +4,8 @@ import { TreeNodeProps } from '../../../types';
 type TreeNodeActionsProps = {
     isDroplistOpen: boolean;
     setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-    getNodeActions(node: TreeNodeProps): ItemProps[];
-    node: TreeNodeProps;
+    getNodeActions(node: Omit<TreeNodeProps, 'href'>): ItemProps[];
+    node: Omit<TreeNodeProps, 'href'>;
     isDroplistTriggerFocused: boolean;
     focusNode(): void;
     onBlurActions(): void;

package/dist/esm/helperComponents/TreeNode/components/TreeNodeHref.d.ts

@@ -0,0 +1,7 @@
+import { MouseEventHandler, ReactNode } from 'react';
+export type TreeNodeHrefProps = {
+    href?: string;
+    children: ReactNode;
+    onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+export declare const TreeNodeHref: import("react").ForwardRefExoticComponent<TreeNodeHrefProps & import("react").RefAttributes<HTMLAnchorElement>>;

package/dist/esm/helperComponents/TreeNode/components/TreeNodeHref.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
+import { TEST_IDS } from '../../../constants';
+import styles from '../styles.module.css';
+export const TreeNodeHref = forwardRef(({ href, children, onClick }, ref) => href ? (_jsx("a", { href: href, className: styles.treeNodeLink, onClick: onClick, "data-test-id": TEST_IDS.link, tabIndex: -2, ref: ref, children: children })) : (children));
+TreeNodeHref.displayName = 'TreeNodeHref';

package/dist/esm/helperComponents/TreeNode/components/index.d.ts

@@ -1 +1,2 @@
 export * from './TreeNodeActions';
+export * from './TreeNodeHref';

package/dist/esm/helperComponents/TreeNode/components/index.js

@@ -1 +1,2 @@
 export * from './TreeNodeActions';
+export * from './TreeNodeHref';

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

@@ -124,4 +124,11 @@
   flex-direction:column;
   align-self:stretch;
   min-width:var(--size-button-xs, 24px);
+}
+
+.treeNodeLink{
+  display:block;
+  width:100%;
+  color:inherit;
+  text-decoration:none;
 }

package/dist/esm/types.d.ts

@@ -14,6 +14,8 @@ export type BaseTreeNode = WithSupportProps<{
     /** Обработчик клика по элементу */
     onClick?: MouseEventHandler;
     className?: string;
+    /** Ссылка на элемент */
+    href?: string;
 }>;
 export type ChildTreeNode = BaseTreeNode & {
     /** Иконка дочернего элемента */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.9.28",
+  "version": "0.9.30",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,14 +38,14 @@
   "dependencies": {
     "@snack-uikit/button": "0.19.16",
     "@snack-uikit/icons": "0.27.3",
-    "@snack-uikit/list": "0.32.6",
+    "@snack-uikit/list": "0.32.7",
     "@snack-uikit/toggles": "0.13.22",
-    "@snack-uikit/truncate-string": "0.7.3",
+    "@snack-uikit/truncate-string": "0.7.4",
     "@snack-uikit/typography": "0.8.11",
     "@snack-uikit/utils": "4.0.0",
     "classnames": "2.5.1",
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "4b590b25862e58fae2addec0ca0ddbb56d6d39f5"
+  "gitHead": "fc6ef99551b60c7b9d2f8cacc87cfb0fd35030bf"
 }

package/src/constants.ts

@@ -20,4 +20,7 @@ export const TEST_IDS = {
   droplistAction: 'tree__node__droplist-action',
   expandable: 'tree__node__expandable',
   expandableContent: 'tree__node__expandable-content',
+  link: 'tree__node__link',
 };
+
+export const LINK_TEST_HREF = '/snack/?path=/story/welcome--welcome';

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -22,7 +22,7 @@ import { useTreeContext } from '../../contexts/TreeContext';
 import { checkNestedNodesSelection } from '../../helpers';
 import { ParentNode, TreeNodeProps } from '../../types';
 import { TreeLine } from '../TreeLine';
-import { TreeNodeActions } from './components';
+import { TreeNodeActions, TreeNodeHref } from './components';
 import styles from './styles.module.scss';
 import { stopPropagationClick } from './utils';
 
@@ -53,6 +53,7 @@ export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
       isLoading,
       parentNode,
       tabIndexAvailable,
+      href,
       ...rest
     },
     ref,
@@ -81,6 +82,8 @@ export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
 
     const contentRef = useRef<HTMLDivElement | null>(null);
 
+    const anchorRef = useRef<HTMLAnchorElement | null>(null);
+
     const isExpandable = Array.isArray(nested);
     const isExpanded = isExpandable ? expandedNodes?.includes(id) : undefined;
 
@@ -119,11 +122,24 @@ export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
           disabled,
           nested,
           onClick,
+          href,
         },
         e,
       );
     };
 
+    const handleAnchorClick = (e: React.MouseEvent<Element>) => {
+      e.stopPropagation();
+      if (e?.metaKey || e?.ctrlKey || e?.button === 1) {
+        return;
+      }
+
+      if (onClick) {
+        e.preventDefault();
+        handleClick(e);
+      }
+    };
+
     const handleSelect = () => {
       onSelect(
         {
@@ -209,6 +225,11 @@ export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
         case 'Enter': {
           e.preventDefault();
           handleSelect();
+
+          if (href && anchorRef.current) {
+            anchorRef.current.click();
+          }
+
           return;
         }
         default:
@@ -296,8 +317,10 @@ export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
           )}
 
           <Typography.SansBodyM tag='div' className={styles.treeNodeTitle}>
-            {typeof title === 'string' && <TruncateString text={title} data-test-id={TEST_IDS.title} />}
-            {typeof title !== 'string' && title({ id, disabled, nested } as TreeNodeProps)}
+            <TreeNodeHref href={href} onClick={handleAnchorClick} ref={anchorRef}>
+              {typeof title === 'string' && <TruncateString text={title} data-test-id={TEST_IDS.title} />}
+              {typeof title !== 'string' && title({ id, disabled, nested } as TreeNodeProps)}
+            </TreeNodeHref>
           </Typography.SansBodyM>
 
           {getNodeActions && (

package/src/helperComponents/TreeNode/components/TreeNodeActions.tsx

@@ -12,8 +12,8 @@ import { stopPropagationClick, stopPropagationFocus } from '../utils';
 type TreeNodeActionsProps = {
   isDroplistOpen: boolean;
   setDroplistOpen: Dispatch<SetStateAction<boolean>>;
-  getNodeActions(node: TreeNodeProps): ItemProps[];
-  node: TreeNodeProps;
+  getNodeActions(node: Omit<TreeNodeProps, 'href'>): ItemProps[];
+  node: Omit<TreeNodeProps, 'href'>;
   isDroplistTriggerFocused: boolean;
   focusNode(): void;
   onBlurActions(): void;

package/src/helperComponents/TreeNode/components/TreeNodeHref.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, MouseEventHandler, ReactNode } from 'react';
+
+import { TEST_IDS } from '../../../constants';
+import styles from '../styles.module.scss';
+
+export type TreeNodeHrefProps = {
+  href?: string;
+  children: ReactNode;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+
+export const TreeNodeHref = forwardRef<HTMLAnchorElement, TreeNodeHrefProps>(({ href, children, onClick }, ref) =>
+  href ? (
+    <a
+      href={href}
+      className={styles.treeNodeLink}
+      onClick={onClick}
+      data-test-id={TEST_IDS.link}
+      tabIndex={-2}
+      ref={ref}
+    >
+      {children}
+    </a>
+  ) : (
+    children
+  ),
+);
+
+TreeNodeHref.displayName = 'TreeNodeHref';

package/src/helperComponents/TreeNode/components/index.ts

@@ -1 +1,2 @@
 export * from './TreeNodeActions';
+export * from './TreeNodeHref';

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

@@ -157,3 +157,10 @@
 
   min-width: tree.$size-button-xs;
 }
+
+.treeNodeLink {
+  display: block;
+  width: 100%;
+  color: inherit;
+  text-decoration: none;
+}

package/src/types.ts

@@ -19,6 +19,8 @@ export type BaseTreeNode = WithSupportProps<{
   /** Обработчик клика по элементу */
   onClick?: MouseEventHandler;
   className?: string;
+  /** Ссылка на элемент */
+  href?: string;
 }>;
 
 export type ChildTreeNode = BaseTreeNode & {