@snack-uikit/tree 0.8.19 → 0.8.20

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

@@ -11,7 +11,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import cn from 'classnames';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { forwardRef, useEffect, useMemo, useRef, useState, } from 'react';
 import { ButtonFunction } from '@snack-uikit/button';
 import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@snack-uikit/icons';
 import { Checkbox, Radio } from '@snack-uikit/toggles';
@@ -25,12 +25,12 @@ import { TreeLine } from '../TreeLine';
 import { TreeNodeActions } from './components';
 import styles from './styles.module.css';
 import { stopPropagationClick } from './utils';
-export function TreeNode(_a) {
+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"]);
     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 contentRef = useRef(null);
     const isExpandable = Array.isArray(nested);
     const isExpanded = isExpandable ? expandedNodes === null || expandedNodes === void 0 ? void 0 : expandedNodes.includes(id) : undefined;
     const nestedNodesSelection = useMemo(() => {
@@ -41,8 +41,8 @@ export 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;
     useEffect(() => {
-        if (ref.current && isFocused) {
-            ref.current.focus();
+        if (contentRef.current && isFocused) {
+            contentRef.current.focus();
         }
     }, [isFocused]);
     const treeNodeIcon = useMemo(() => {
@@ -74,14 +74,14 @@ export 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 => {
@@ -120,12 +120,12 @@ export 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 ' ':
@@ -139,10 +139,12 @@ export function TreeNode(_a) {
         }
     };
     const getNodeActions = 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 && !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 || ((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: 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, "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: {
+    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: {
                             id,
                             title,
                             disabled,
                             nested,
                         }, focusNode: handleFocus, onBlurActions: handleBlurActions, isDroplistTriggerFocused: isDroplistTriggerFocused, isDroplistOpen: isDroplistOpen, setDroplistOpen: setDroplistOpen }))] })] })));
-}
+});

package/dist/esm/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/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Tree",
-  "version": "0.8.19",
+  "version": "0.8.20",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -47,5 +47,5 @@
     "react-transition-state": "2.1.1",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "3528e78aec23804dca44d311947c1dcd4ed3792b"
+  "gitHead": "bad2d5ed6e54954b528c1ea9dae0b8f86e4c8147"
 }

package/src/helperComponents/ExpandableTreeNode/ExpandableTreeNode.tsx

@@ -1,4 +1,4 @@
-import { KeyboardEventHandler, useEffect, useMemo, useState } from 'react';
+import { forwardRef, KeyboardEventHandler, useEffect, useRef, useState } from 'react';
 import useTransition from 'react-transition-state';
 
 import { TEST_IDS, TRANSITION_TIMING } from '../../constants';
@@ -15,116 +15,139 @@ type ExpandableTreeNodeProps = {
   tabIndexAvailable?: boolean;
 };
 
-export function ExpandableTreeNode({
-  node: { 'data-test-id': dataTestId, ...node },
-  parentNode,
-  tabIndexAvailable,
-}: ExpandableTreeNodeProps) {
-  const { expandedNodes, onExpand, onDataLoad, showLines } = useTreeContext();
+export const ExpandableTreeNode = forwardRef<HTMLDivElement, ExpandableTreeNodeProps>(
+  ({ node: { 'data-test-id': dataTestId, ...node }, parentNode, tabIndexAvailable }, ref) => {
+    const { expandedNodes, onExpand, onDataLoad, showLines } = useTreeContext();
 
-  const isExpandable = Boolean(node.nested);
-  const isExpanded = expandedNodes?.includes(node.id) || false;
+    const isExpandable = Boolean(node.nested);
+    const isExpanded = expandedNodes?.includes(node.id) || false;
 
-  const [isLoading, setLoading] = useState(false);
+    const [isLoading, setLoading] = useState(false);
 
-  const [state, toggle] = useTransition({
-    timeout: TRANSITION_TIMING.accordionFolding,
-    initialEntered: isExpanded || undefined,
-    enter: isExpanded,
-  });
+    const [state, toggle] = useTransition({
+      timeout: TRANSITION_TIMING.accordionFolding,
+      initialEntered: isExpanded || undefined,
+      enter: isExpanded,
+    });
 
-  const showContent = node.nested && node.nested.length > 0 && state.status !== 'exited';
+    const showContent = node.nested && node.nested.length > 0 && state.status !== 'exited';
 
-  const isLineHalfHeight = useMemo(() => {
-    if (!node.nested?.length) return false;
+    const childrenRefs = useRef<(HTMLDivElement | null)[]>([]);
+    const [lastItemHeight, setLastItemHeight] = useState(0);
 
-    return !node.nested.at(-1)?.nested;
-  }, [node.nested]);
+    useEffect(() => {
+      const lastItem = childrenRefs.current?.at(-1);
 
-  useEffect(() => {
-    if (node.nested?.length && isExpanded && state.status === 'exited') {
-      toggle(true);
-    }
-  }, [isExpanded, node.nested, state.status]);
+      if (lastItem) {
+        const observer = new ResizeObserver(entities =>
+          entities.forEach(entity => {
+            if (entity.target === lastItem) {
+              const [{ blockSize: newHeight }] = entity.contentBoxSize;
+              setLastItemHeight(newHeight);
+            }
+          }),
+        );
 
-  const toggleExpand = async () => {
-    if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
-      setLoading(true);
+        observer.observe(lastItem);
 
-      await onDataLoad(node).finally(() => {
-        setLoading(false);
-      });
-    }
+        setLastItemHeight(lastItem.scrollHeight ?? 0);
 
-    onExpand(node);
+        return () => observer.disconnect();
+      }
+    }, [state.status]);
 
-    toggle();
-  };
+    useEffect(() => {
+      if (node.nested?.length && isExpanded && state.status === 'exited') {
+        toggle(true);
+      }
+    }, [isExpanded, node.nested, state.status]);
 
-  const handleKeyDown: KeyboardEventHandler<HTMLElement> = e => {
-    if (!isExpandable) return;
+    const toggleExpand = async () => {
+      if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
+        setLoading(true);
 
-    switch (e.key) {
-      case 'ArrowRight': {
-        if (!isExpanded) {
-          toggleExpand();
-        }
-        return;
+        await onDataLoad(node).finally(() => {
+          setLoading(false);
+        });
       }
-      case 'ArrowLeft': {
-        if (isExpanded) {
-          toggleExpand();
+
+      onExpand(node);
+
+      toggle();
+    };
+
+    const handleKeyDown: KeyboardEventHandler<HTMLElement> = e => {
+      if (!isExpandable) return;
+
+      switch (e.key) {
+        case 'ArrowRight': {
+          if (!isExpanded) {
+            toggleExpand();
+          }
+          return;
+        }
+        case 'ArrowLeft': {
+          if (isExpanded) {
+            toggleExpand();
+          }
+          return;
         }
-        return;
+        default:
+          return;
       }
-      default:
-        return;
-    }
-  };
-
-  return (
-    <div
-      className={styles.expandableTreeNode}
-      data-test-id={dataTestId}
-      data-expandable={Boolean(node.nested) || undefined}
-      data-disabled={node.disabled || undefined}
-    >
-      <TreeNode
-        {...node}
-        isLoading={isLoading}
-        parentNode={parentNode}
-        onChevronClick={toggleExpand}
-        onKeyDown={handleKeyDown}
-        tabIndexAvailable={tabIndexAvailable}
-      />
-
-      {node.nested && (
-        <div
-          className={styles.expandableWrap}
-          data-expanded={isExpanded || undefined}
-          data-test-id={TEST_IDS.expandable}
-        >
-          {showContent && (
-            <div className={styles.expandableContent} data-test-id={TEST_IDS.expandableContent}>
-              <TreeLine visible={showLines} halfHeight={isLineHalfHeight} data-test-id={TEST_IDS.line} />
-
-              <div className={styles.expandableNested}>
-                {node.nested.map(nestedNode => {
-                  const parent: ParentNode = { id: node.id, nested: node.nested, parentNode };
-
-                  return (
-                    <TreeItem
-                      key={nestedNode.id}
-                      node={{ ...nestedNode, disabled: node.disabled || nestedNode.disabled }}
-                      parentNode={parent}
-                    />
-                  );
-                })}
+    };
+
+    return (
+      <div
+        className={styles.expandableTreeNode}
+        data-test-id={dataTestId}
+        data-expandable={Boolean(node.nested) || undefined}
+        data-disabled={node.disabled || undefined}
+        ref={ref}
+      >
+        <TreeNode
+          {...node}
+          isLoading={isLoading}
+          parentNode={parentNode}
+          onChevronClick={toggleExpand}
+          onKeyDown={handleKeyDown}
+          tabIndexAvailable={tabIndexAvailable}
+        />
+
+        {node.nested && (
+          <div
+            className={styles.expandableWrap}
+            data-expanded={isExpanded || undefined}
+            data-test-id={TEST_IDS.expandable}
+          >
+            {showContent && (
+              <div className={styles.expandableContent} data-test-id={TEST_IDS.expandableContent}>
+                <TreeLine
+                  visible={showLines}
+                  data-test-id={TEST_IDS.line}
+                  height={`calc(100% - ${lastItemHeight}px)`}
+                  className={styles.treeLine}
+                />
+
+                <div className={styles.expandableNested}>
+                  {node.nested.map((nestedNode, index) => {
+                    const parent: ParentNode = { id: node.id, nested: node.nested, parentNode };
+
+                    return (
+                      <TreeItem
+                        ref={el => (childrenRefs.current[index] = el)}
+                        key={nestedNode.id}
+                        node={{ ...nestedNode, disabled: node.disabled || nestedNode.disabled }}
+                        parentNode={parent}
+                      />
+                    );
+                  })}
+                </div>
               </div>
-            </div>
-          )}
-        </div>
-      )}
-    </div>
-  );
-}
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

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

@@ -1,3 +1,5 @@
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree' as tree;
+
 .expandableTreeNode {
   position: relative;
   width: 100%;
@@ -39,3 +41,7 @@
   width: 100%;
   min-width: 0;
 }
+
+.treeLine {
+  padding-bottom: calc(#{tree.$size-tree-item-line-height} / 2);
+}

package/src/helperComponents/TreeItem/TreeItem.tsx

@@ -1,3 +1,5 @@
+import { forwardRef } from 'react';
+
 import { TEST_IDS } from '../../constants';
 import { ParentNode, TreeNodeProps } from '../../types';
 import { ExpandableTreeNode } from '../ExpandableTreeNode';
@@ -9,14 +11,16 @@ type TreeItemProps = {
   tabIndexAvailable?: boolean;
 };
 
-export function TreeItem({ node, tabIndexAvailable, parentNode }: TreeItemProps) {
+export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(({ node, tabIndexAvailable, parentNode }, ref) => {
   const dataTestId = node['data-test-id'] || TEST_IDS.node;
 
   const nodeProps: TreeNodeProps = { ...node, 'data-test-id': dataTestId };
 
   if (node.nested) {
-    return <ExpandableTreeNode node={nodeProps} tabIndexAvailable={tabIndexAvailable} parentNode={parentNode} />;
+    return (
+      <ExpandableTreeNode node={nodeProps} tabIndexAvailable={tabIndexAvailable} parentNode={parentNode} ref={ref} />
+    );
   }
 
-  return <TreeNode {...nodeProps} tabIndexAvailable={tabIndexAvailable} parentNode={parentNode} />;
-}
+  return <TreeNode {...nodeProps} tabIndexAvailable={tabIndexAvailable} parentNode={parentNode} ref={ref} />;
+});

package/src/helperComponents/TreeLine/TreeLine.tsx

@@ -1,20 +1,23 @@
+import cn from 'classnames';
+import { CSSProperties } from 'react';
+
 import { TEST_IDS } from '../../constants';
 import styles from './styles.module.scss';
 
 export type TreeLineProps = {
+  className?: string;
   halfWidth?: boolean;
-  halfHeight?: boolean;
   visible?: boolean;
   horizontal?: boolean;
-};
+} & Pick<CSSProperties, 'height' | 'width'>;
 
-export function TreeLine({ halfWidth, halfHeight, horizontal, visible }: TreeLineProps) {
+export function TreeLine({ className, halfWidth, horizontal, visible, height, width }: TreeLineProps) {
   return (
     <div
-      className={styles.treeLine}
+      className={cn(styles.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={TEST_IDS.line}
     />

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

@@ -1,4 +1,4 @@
-@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
+@use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree' as tree;
 
 .treeLine {
   pointer-events: none;
@@ -7,7 +7,7 @@
 
   flex-shrink: 0;
 
-  width: styles-tokens-element.$size-tree-item-line-width;
+  width: tree.$size-tree-item-line-width;
 
   visibility: hidden;
 
@@ -23,25 +23,21 @@
       transform: translateX(-50%);
 
       width: 1px;
-      height: calc(100% - (styles-tokens-element.$size-tree-item-height / 2));
+      height: 100%;
 
-      background: styles-tokens-element.$sys-neutral-decor-default;
-    }
-  }
-
-  &[data-half-height] {
-    &::after {
-      height: calc(100% - (styles-tokens-element.$size-tree-item-height / 2));
+      background: tree.$sys-neutral-decor-default;
     }
   }
 
   &[data-horizontal] {
+    @include tree.composite-var(tree.$tree-item-expand-wrap);
+
     &::after {
       top: 50%;
       left: -50%;
       transform: translateY(-50%);
 
-      width: calc(150% - styles-tokens-element.$space-tree-item-child-line-padding);
+      width: calc(150% - #{tree.$space-tree-item-child-line-padding});
       height: 1px;
     }
 
@@ -49,8 +45,8 @@
       width: 0;
 
       &::after {
-        left: calc(0px - styles-tokens-element.$size-tree-item-line-width / 2);
-        width: calc(styles-tokens-element.$size-tree-item-line-width / 2);
+        left: calc(0px - #{tree.$size-tree-item-line-width} / 2);
+        width: calc(#{tree.$size-tree-item-line-width} / 2);
       }
     }
   }