@snack-uikit/tree 0.8.19 → 0.8.20

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.8.20 (2025-01-31)
+
+
+### Bug Fixes
+
+* **PDS-1461:** fix height of tree node with custom content ([c53e1cc](https://github.com/cloud-ru-tech/snack-uikit/commit/c53e1cc2a90634bee4619c2b8f1d4690ef49d461))
+
+
+
+
+
 ## 0.8.19 (2025-01-23)
 
 ### Only dependencies have been changed

package/dist/cjs/helperComponents/ExpandableTreeNode/ExpandableTreeNode.d.ts

@@ -7,5 +7,5 @@ type ExpandableTreeNodeProps = {
     };
     tabIndexAvailable?: boolean;
 };
-export declare function ExpandableTreeNode({ node: { 'data-test-id': dataTestId, ...node }, parentNode, tabIndexAvailable, }: ExpandableTreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableTreeNode: import("react").ForwardRefExoticComponent<ExpandableTreeNodeProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/cjs/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js

@@ -43,7 +43,7 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ExpandableTreeNode = ExpandableTreeNode;
+exports.ExpandableTreeNode = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_transition_state_1 = __importDefault(require("react-transition-state"));
@@ -53,7 +53,7 @@ const TreeItem_1 = require("../TreeItem");
 const TreeLine_1 = require("../TreeLine");
 const TreeNode_1 = require("../TreeNode");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
-function ExpandableTreeNode(_a) {
+exports.ExpandableTreeNode = (0, react_1.forwardRef)((_a, ref) => {
   var _b = _a.node,
     {
       'data-test-id': dataTestId
@@ -78,18 +78,32 @@ function ExpandableTreeNode(_a) {
     enter: isExpanded
   });
   const showContent = node.nested && node.nested.length > 0 && state.status !== 'exited';
-  const isLineHalfHeight = (0, react_1.useMemo)(() => {
+  const childrenRefs = (0, react_1.useRef)([]);
+  const [lastItemHeight, setLastItemHeight] = (0, react_1.useState)(0);
+  (0, react_1.useEffect)(() => {
     var _a, _b;
-    if (!((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length)) return false;
-    return !((_b = node.nested.at(-1)) === null || _b === void 0 ? void 0 : _b.nested);
-  }, [node.nested]);
+    const lastItem = (_a = childrenRefs.current) === null || _a === void 0 ? void 0 : _a.at(-1);
+    if (lastItem) {
+      const observer = new ResizeObserver(entities => entities.forEach(entity => {
+        if (entity.target === lastItem) {
+          const [{
+            blockSize: newHeight
+          }] = entity.contentBoxSize;
+          setLastItemHeight(newHeight);
+        }
+      }));
+      observer.observe(lastItem);
+      setLastItemHeight((_b = lastItem.scrollHeight) !== null && _b !== void 0 ? _b : 0);
+      return () => observer.disconnect();
+    }
+  }, [state.status]);
   (0, react_1.useEffect)(() => {
     var _a;
     if (((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) && isExpanded && state.status === 'exited') {
       toggle(true);
     }
   }, [isExpanded, node.nested, state.status]);
-  const toggleExpand = () => __awaiter(this, void 0, void 0, function* () {
+  const toggleExpand = () => __awaiter(void 0, void 0, void 0, function* () {
     if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
       setLoading(true);
       yield onDataLoad(node).finally(() => {
@@ -125,6 +139,7 @@ function ExpandableTreeNode(_a) {
     "data-test-id": dataTestId,
     "data-expandable": Boolean(node.nested) || undefined,
     "data-disabled": node.disabled || undefined,
+    ref: ref,
     children: [(0, jsx_runtime_1.jsx)(TreeNode_1.TreeNode, Object.assign({}, node, {
       isLoading: isLoading,
       parentNode: parentNode,
@@ -140,17 +155,19 @@ function ExpandableTreeNode(_a) {
         "data-test-id": constants_1.TEST_IDS.expandableContent,
         children: [(0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
           visible: showLines,
-          halfHeight: isLineHalfHeight,
-          "data-test-id": constants_1.TEST_IDS.line
+          "data-test-id": constants_1.TEST_IDS.line,
+          height: `calc(100% - ${lastItemHeight}px)`,
+          className: styles_module_scss_1.default.treeLine
         }), (0, jsx_runtime_1.jsx)("div", {
           className: styles_module_scss_1.default.expandableNested,
-          children: node.nested.map(nestedNode => {
+          children: node.nested.map((nestedNode, index) => {
             const parent = {
               id: node.id,
               nested: node.nested,
               parentNode
             };
             return (0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, {
+              ref: el => childrenRefs.current[index] = el,
               node: Object.assign(Object.assign({}, nestedNode), {
                 disabled: node.disabled || nestedNode.disabled
               }),
@@ -161,4 +178,4 @@ function ExpandableTreeNode(_a) {
       })
     })]
   });
-}
+});

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

@@ -31,4 +31,8 @@
 .expandableNested{
   width:100%;
   min-width:0;
+}
+
+.treeLine{
+  padding-bottom:calc(var(--size-tree-item-line-height, 32px) / 2);
 }

package/dist/cjs/helperComponents/TreeItem/TreeItem.d.ts

@@ -4,5 +4,5 @@ type TreeItemProps = {
     parentNode?: ParentNode;
     tabIndexAvailable?: boolean;
 };
-export declare function TreeItem({ node, tabIndexAvailable, parentNode }: TreeItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/cjs/helperComponents/TreeItem/TreeItem.js

@@ -3,12 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeItem = TreeItem;
+exports.TreeItem = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const constants_1 = require("../../constants");
 const ExpandableTreeNode_1 = require("../ExpandableTreeNode");
 const TreeNode_1 = require("../TreeNode");
-function TreeItem(_ref) {
+exports.TreeItem = (0, react_1.forwardRef)((_ref, ref) => {
   let {
     node,
     tabIndexAvailable,
@@ -22,11 +23,13 @@ function TreeItem(_ref) {
     return (0, jsx_runtime_1.jsx)(ExpandableTreeNode_1.ExpandableTreeNode, {
       node: nodeProps,
       tabIndexAvailable: tabIndexAvailable,
-      parentNode: parentNode
+      parentNode: parentNode,
+      ref: ref
     });
   }
   return (0, jsx_runtime_1.jsx)(TreeNode_1.TreeNode, Object.assign({}, nodeProps, {
     tabIndexAvailable: tabIndexAvailable,
-    parentNode: parentNode
+    parentNode: parentNode,
+    ref: ref
   }));
-}
+});

package/dist/cjs/helperComponents/TreeLine/TreeLine.d.ts

@@ -1,7 +1,8 @@
+import { CSSProperties } from 'react';
 export type TreeLineProps = {
+    className?: string;
     halfWidth?: boolean;
-    halfHeight?: boolean;
     visible?: boolean;
     horizontal?: boolean;
-};
-export declare function TreeLine({ halfWidth, halfHeight, horizontal, visible }: TreeLineProps): import("react/jsx-runtime").JSX.Element;
+} & Pick<CSSProperties, 'height' | 'width'>;
+export declare function TreeLine({ className, halfWidth, horizontal, visible, height, width }: TreeLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/cjs/helperComponents/TreeLine/TreeLine.js

@@ -10,20 +10,26 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TreeLine = TreeLine;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const classnames_1 = __importDefault(require("classnames"));
 const constants_1 = require("../../constants");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function TreeLine(_ref) {
   let {
+    className,
     halfWidth,
-    halfHeight,
     horizontal,
-    visible
+    visible,
+    height,
+    width
   } = _ref;
   return (0, jsx_runtime_1.jsx)("div", {
-    className: styles_module_scss_1.default.treeLine,
+    className: (0, classnames_1.default)(styles_module_scss_1.default.treeLine, className),
+    style: {
+      height,
+      width
+    },
     "data-horizontal": horizontal || undefined,
     "data-half-width": halfWidth || undefined,
-    "data-half-height": halfHeight || undefined,
     "data-visible": visible || undefined,
     "data-test-id": constants_1.TEST_IDS.line
   });

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

@@ -15,11 +15,11 @@
   left:50%;
   transform:translateX(-50%);
   width:1px;
-  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+  height:100%;
   background:var(--sys-neutral-decor-default, #dde0ea);
 }
-.treeLine[data-half-height]::after{
-  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+.treeLine[data-horizontal]{
+  min-height:var(--size-tree-item-height, 32px);
 }
 .treeLine[data-horizontal]::after{
   top:50%;

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

@@ -8,4 +8,4 @@ type TreeNodeComponentProps = TreeNodeProps & {
     parentNode?: ParentNode;
     tabIndexAvailable?: boolean;
 };
-export declare function TreeNode({ id, title, icon, expandedIcon, collapsedIcon, disabled, onClick, nested, className, onChevronClick, onKeyDown, isLoading, parentNode, tabIndexAvailable, ...rest }: TreeNodeComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare const TreeNode: import("react").ForwardRefExoticComponent<TreeNodeComponentProps & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -16,7 +16,7 @@ var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TreeNode = TreeNode;
+exports.TreeNode = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const classnames_1 = __importDefault(require("classnames"));
 const react_1 = require("react");
@@ -33,7 +33,7 @@ const TreeLine_1 = require("../TreeLine");
 const components_1 = require("./components");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 const utils_2 = require("./utils");
-function TreeNode(_a) {
+exports.TreeNode = (0, react_1.forwardRef)((_a, ref) => {
   var {
       id,
       title,
@@ -77,7 +77,7 @@ function TreeNode(_a) {
   } = (0, TreeContext_1.useTreeContext)();
   const [isDroplistOpen, setDroplistOpen] = (0, react_1.useState)(false);
   const [isDroplistTriggerFocused, setFocusDroplistTrigger] = (0, react_1.useState)(false);
-  const ref = (0, react_1.useRef)(null);
+  const contentRef = (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)(() => {
@@ -87,8 +87,8 @@ function TreeNode(_a) {
   const isSelected = (Array.isArray(selected) ? selected.includes(id) || (nestedNodesSelection === null || nestedNodesSelection === void 0 ? void 0 : nestedNodesSelection.allSelected) : selected === id) || false;
   const isFocused = focusedNodeId === id;
   (0, react_1.useEffect)(() => {
-    if (ref.current && isFocused) {
-      ref.current.focus();
+    if (contentRef.current && isFocused) {
+      contentRef.current.focus();
     }
   }, [isFocused]);
   const treeNodeIcon = (0, react_1.useMemo)(() => {
@@ -119,14 +119,14 @@ function TreeNode(_a) {
     setFocusPosition(id);
     if (!e) {
       setFocusDroplistTrigger(false);
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
     }
   };
   const handleBlurActions = () => {
     var _a;
     if (isDroplistTriggerFocused && !isDroplistOpen) {
       setFocusDroplistTrigger(false);
-      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.blur();
+      (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.blur();
     }
   };
   const handleKeyDown = e => {
@@ -171,13 +171,13 @@ function TreeNode(_a) {
           e.preventDefault();
           if (isDroplistTriggerFocused) {
             setFocusDroplistTrigger(false);
-            (_a = ref.current) === null || _a === void 0 ? void 0 : _a.focus();
+            (_a = contentRef.current) === null || _a === void 0 ? void 0 : _a.focus();
           }
           return;
         }
       case 'Escape':
         {
-          (_b = ref.current) === null || _b === void 0 ? void 0 : _b.blur();
+          (_b = contentRef.current) === null || _b === void 0 ? void 0 : _b.blur();
           return;
         }
       case ' ':
@@ -197,6 +197,7 @@ function TreeNode(_a) {
     className: (0, classnames_1.default)(styles_module_scss_1.default.treeNode, className)
   }, (0, utils_1.extractSupportProps)(rest), {
     "data-node-id": id,
+    ref: ref,
     children: [parentNode && (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
       halfWidth: Boolean(nested),
       horizontal: true,
@@ -204,15 +205,21 @@ function TreeNode(_a) {
       "data-test-id": constants_1.TEST_IDS.line
     }), !parentNode && !nested && (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
       visible: false
-    }), isExpandable && (0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
-      size: 'xs',
-      icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronRightSVG, {}),
-      loading: isLoading,
-      onClick: onChevronClick,
-      "data-expanded": isExpanded || undefined,
-      className: styles_module_scss_1.default.treeNodeExpandButton,
-      tabIndex: -1,
-      "data-test-id": constants_1.TEST_IDS.chevron
+    }), isExpandable && (0, jsx_runtime_1.jsxs)("div", {
+      className: styles_module_scss_1.default.treeNodeExpandButtonWrapper,
+      children: [(0, jsx_runtime_1.jsx)(button_1.ButtonFunction, {
+        size: 'xs',
+        icon: (0, jsx_runtime_1.jsx)(icons_1.ChevronRightSVG, {}),
+        loading: isLoading,
+        onClick: onChevronClick,
+        "data-expanded": isExpanded || undefined,
+        className: styles_module_scss_1.default.treeNodeExpandButton,
+        tabIndex: -1,
+        "data-test-id": constants_1.TEST_IDS.chevron
+      }), (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, {
+        visible: isExpanded && showLines,
+        height: '100%'
+      })]
     }), (0, jsx_runtime_1.jsxs)("div", {
       role: 'treeitem',
       "aria-expanded": isExpanded,
@@ -227,7 +234,7 @@ function TreeNode(_a) {
       tabIndex: tabIndexAvailable ? 0 : -1,
       className: styles_module_scss_1.default.treeNodeContent,
       "data-test-id": constants_1.TEST_IDS.item,
-      ref: ref,
+      ref: contentRef,
       children: [(isMultiSelect || showToggle) && (0, jsx_runtime_1.jsxs)("div", {
         className: styles_module_scss_1.default.treeNodeCheckboxWrap,
         children: [isMultiSelect && (0, jsx_runtime_1.jsx)(toggles_1.Checkbox, {
@@ -277,4 +284,4 @@ function TreeNode(_a) {
       })]
     })]
   }));
-}
+});

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

@@ -1,6 +1,6 @@
 .treeNode{
   display:flex;
-  align-items:center;
+  align-items:flex-start;
   box-sizing:border-box;
   width:100%;
 }
@@ -19,9 +19,12 @@
 }
 
 .treeNodeTitle{
+  min-height:var(--size-tree-item-wrap, 24px);
+  display:flex;
   flex-grow:1;
+  align-items:center;
   box-sizing:border-box;
-  min-width:var(--size-tree-item-checkbox-wrap, 24px);
+  min-width:var(--size-tree-item-wrap, 24px);
   color:var(--sys-neutral-text-main, #41424e);
 }
 
@@ -34,15 +37,17 @@
 }
 
 .treeNodeContent{
-  height:var(--size-tree-item-height, 32px);
   gap:var(--space-tree-item-content-layout-gap, 4px);
+  padding-top:var(--space-tree-item-content-layout-padding, 4px);
   padding-right:var(--space-tree-item-content-layout-padding, 4px);
+  padding-bottom:var(--space-tree-item-content-layout-padding, 4px);
   padding-left:var(--space-tree-item-content-layout-padding, 4px);
   border-radius:var(--radius-tree-item-content-layout, 8px);
+  min-height:var(--size-tree-item-height, 32px);
   cursor:pointer;
   position:relative;
   display:flex;
-  align-items:center;
+  align-items:flex-start;
   box-sizing:border-box;
   width:100%;
 }
@@ -93,8 +98,8 @@
 }
 
 .treeNodeCheckboxWrap{
-  width:var(--size-tree-item-checkbox-wrap, 24px);
-  height:var(--size-tree-item-checkbox-wrap, 24px);
+  width:var(--size-tree-item-wrap, 24px);
+  height:var(--size-tree-item-wrap, 24px);
   display:flex;
   flex-shrink:0;
   align-items:center;
@@ -103,6 +108,7 @@
 }
 
 .treeNodeExpandButton{
+  min-height:var(--size-tree-item-height, 32px);
   box-sizing:border-box;
 }
 .treeNodeExpandButton svg{
@@ -110,4 +116,12 @@
 }
 .treeNodeExpandButton[data-expanded] svg{
   transform:rotate(90deg);
+}
+
+.treeNodeExpandButtonWrapper{
+  overflow:hidden;
+  display:flex;
+  flex-direction:column;
+  align-self:stretch;
+  min-width:var(--size-button-xs, 24px);
 }

package/dist/esm/helperComponents/ExpandableTreeNode/ExpandableTreeNode.d.ts

@@ -7,5 +7,5 @@ type ExpandableTreeNodeProps = {
     };
     tabIndexAvailable?: boolean;
 };
-export declare function ExpandableTreeNode({ node: { 'data-test-id': dataTestId, ...node }, parentNode, tabIndexAvailable, }: ExpandableTreeNodeProps): import("react/jsx-runtime").JSX.Element;
+export declare const ExpandableTreeNode: import("react").ForwardRefExoticComponent<ExpandableTreeNodeProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/esm/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js

@@ -19,7 +19,7 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useState } from 'react';
+import { forwardRef, useEffect, useRef, useState } from 'react';
 import useTransition from 'react-transition-state';
 import { TEST_IDS, TRANSITION_TIMING } from '../../constants';
 import { useTreeContext } from '../../contexts/TreeContext';
@@ -27,7 +27,7 @@ import { TreeItem } from '../TreeItem';
 import { TreeLine } from '../TreeLine';
 import { TreeNode } from '../TreeNode';
 import styles from './styles.module.css';
-export function ExpandableTreeNode(_a) {
+export const ExpandableTreeNode = forwardRef((_a, ref) => {
     var _b = _a.node, { 'data-test-id': dataTestId } = _b, node = __rest(_b, ['data-test-id']), { parentNode, tabIndexAvailable } = _a;
     const { expandedNodes, onExpand, onDataLoad, showLines } = useTreeContext();
     const isExpandable = Boolean(node.nested);
@@ -39,19 +39,30 @@ export function ExpandableTreeNode(_a) {
         enter: isExpanded,
     });
     const showContent = node.nested && node.nested.length > 0 && state.status !== 'exited';
-    const isLineHalfHeight = useMemo(() => {
+    const childrenRefs = useRef([]);
+    const [lastItemHeight, setLastItemHeight] = useState(0);
+    useEffect(() => {
         var _a, _b;
-        if (!((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length))
-            return false;
-        return !((_b = node.nested.at(-1)) === null || _b === void 0 ? void 0 : _b.nested);
-    }, [node.nested]);
+        const lastItem = (_a = childrenRefs.current) === null || _a === void 0 ? void 0 : _a.at(-1);
+        if (lastItem) {
+            const observer = new ResizeObserver(entities => entities.forEach(entity => {
+                if (entity.target === lastItem) {
+                    const [{ blockSize: newHeight }] = entity.contentBoxSize;
+                    setLastItemHeight(newHeight);
+                }
+            }));
+            observer.observe(lastItem);
+            setLastItemHeight((_b = lastItem.scrollHeight) !== null && _b !== void 0 ? _b : 0);
+            return () => observer.disconnect();
+        }
+    }, [state.status]);
     useEffect(() => {
         var _a;
         if (((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) && isExpanded && state.status === 'exited') {
             toggle(true);
         }
     }, [isExpanded, node.nested, state.status]);
-    const toggleExpand = () => __awaiter(this, void 0, void 0, function* () {
+    const toggleExpand = () => __awaiter(void 0, void 0, void 0, function* () {
         if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
             setLoading(true);
             yield onDataLoad(node).finally(() => {
@@ -81,8 +92,8 @@ export function ExpandableTreeNode(_a) {
                 return;
         }
     };
-    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 => {
+    return (_jsxs("div", { className: styles.expandableTreeNode, "data-test-id": dataTestId, "data-expandable": Boolean(node.nested) || undefined, "data-disabled": node.disabled || undefined, ref: ref, 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, "data-test-id": TEST_IDS.line, height: `calc(100% - ${lastItemHeight}px)`, className: styles.treeLine }), _jsx("div", { className: styles.expandableNested, children: node.nested.map((nestedNode, index) => {
                                 const parent = { id: node.id, nested: node.nested, parentNode };
-                                return (_jsx(TreeItem, { node: Object.assign(Object.assign({}, nestedNode), { disabled: node.disabled || nestedNode.disabled }), parentNode: parent }, nestedNode.id));
+                                return (_jsx(TreeItem, { ref: el => (childrenRefs.current[index] = el), node: Object.assign(Object.assign({}, nestedNode), { disabled: node.disabled || nestedNode.disabled }), parentNode: parent }, nestedNode.id));
                             }) })] })) }))] }));
-}
+});

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

@@ -31,4 +31,8 @@
 .expandableNested{
   width:100%;
   min-width:0;
+}
+
+.treeLine{
+  padding-bottom:calc(var(--size-tree-item-line-height, 32px) / 2);
 }

package/dist/esm/helperComponents/TreeItem/TreeItem.d.ts

@@ -4,5 +4,5 @@ type TreeItemProps = {
     parentNode?: ParentNode;
     tabIndexAvailable?: boolean;
 };
-export declare function TreeItem({ node, tabIndexAvailable, parentNode }: TreeItemProps): import("react/jsx-runtime").JSX.Element;
+export declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/dist/esm/helperComponents/TreeItem/TreeItem.js

@@ -1,12 +1,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from 'react';
 import { TEST_IDS } from '../../constants';
 import { ExpandableTreeNode } from '../ExpandableTreeNode';
 import { TreeNode } from '../TreeNode';
-export function TreeItem({ node, tabIndexAvailable, parentNode }) {
+export const TreeItem = forwardRef(({ node, tabIndexAvailable, parentNode }, ref) => {
     const dataTestId = node['data-test-id'] || TEST_IDS.node;
     const nodeProps = Object.assign(Object.assign({}, node), { 'data-test-id': dataTestId });
     if (node.nested) {
-        return _jsx(ExpandableTreeNode, { node: nodeProps, tabIndexAvailable: tabIndexAvailable, parentNode: parentNode });
+        return (_jsx(ExpandableTreeNode, { node: nodeProps, tabIndexAvailable: tabIndexAvailable, parentNode: parentNode, ref: ref }));
     }
-    return _jsx(TreeNode, Object.assign({}, nodeProps, { tabIndexAvailable: tabIndexAvailable, parentNode: parentNode }));
-}
+    return _jsx(TreeNode, Object.assign({}, nodeProps, { tabIndexAvailable: tabIndexAvailable, parentNode: parentNode, ref: ref }));
+});

package/dist/esm/helperComponents/TreeLine/TreeLine.d.ts

@@ -1,7 +1,8 @@
+import { CSSProperties } from 'react';
 export type TreeLineProps = {
+    className?: string;
     halfWidth?: boolean;
-    halfHeight?: boolean;
     visible?: boolean;
     horizontal?: boolean;
-};
-export declare function TreeLine({ halfWidth, halfHeight, horizontal, visible }: TreeLineProps): import("react/jsx-runtime").JSX.Element;
+} & Pick<CSSProperties, 'height' | 'width'>;
+export declare function TreeLine({ className, halfWidth, horizontal, visible, height, width }: TreeLineProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/TreeLine/TreeLine.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import cn from 'classnames';
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.css';
-export function TreeLine({ halfWidth, halfHeight, horizontal, visible }) {
-    return (_jsx("div", { className: styles.treeLine, "data-horizontal": horizontal || undefined, "data-half-width": halfWidth || undefined, "data-half-height": halfHeight || undefined, "data-visible": visible || undefined, "data-test-id": TEST_IDS.line }));
+export function TreeLine({ className, halfWidth, horizontal, visible, height, width }) {
+    return (_jsx("div", { className: cn(styles.treeLine, className), style: { height, width }, "data-horizontal": horizontal || undefined, "data-half-width": halfWidth || undefined, "data-visible": visible || undefined, "data-test-id": TEST_IDS.line }));
 }

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

@@ -15,11 +15,11 @@
   left:50%;
   transform:translateX(-50%);
   width:1px;
-  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+  height:100%;
   background:var(--sys-neutral-decor-default, #dde0ea);
 }
-.treeLine[data-half-height]::after{
-  height:calc(100% - var(--size-tree-item-height, 32px) / 2);
+.treeLine[data-horizontal]{
+  min-height:var(--size-tree-item-height, 32px);
 }
 .treeLine[data-horizontal]::after{
   top:50%;

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

@@ -8,4 +8,4 @@ type TreeNodeComponentProps = TreeNodeProps & {
     parentNode?: ParentNode;
     tabIndexAvailable?: boolean;
 };
-export declare function TreeNode({ id, title, icon, expandedIcon, collapsedIcon, disabled, onClick, nested, className, onChevronClick, onKeyDown, isLoading, parentNode, tabIndexAvailable, ...rest }: TreeNodeComponentProps): import("react/jsx-runtime").JSX.Element;
+export declare const TreeNode: import("react").ForwardRefExoticComponent<TreeNodeComponentProps & import("react").RefAttributes<HTMLDivElement>>;