@cloud-ru/ds-tree 1.0.0

package/dist/cjs/components/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./Tree"), exports);

package/dist/cjs/constants.d.ts

@@ -0,0 +1,26 @@
+export declare const SELECTION_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+    readonly L: "l";
+};
+export declare const TRANSITION_TIMING: {
+    readonly accordionFolding: 200;
+};
+export declare const TEST_IDS: {
+    readonly node: "tree__node";
+    readonly line: "tree__node__line";
+    readonly item: "tree__node__item";
+    readonly chevron: "tree__node__chevron";
+    readonly checkbox: "tree__node__checkbox";
+    readonly radio: "tree__node__radio";
+    readonly icon: "tree__node__icon";
+    readonly title: "tree__node__title";
+    readonly droplistTrigger: "tree__node__droplist-trigger";
+    readonly expandable: "tree__node__expandable";
+    readonly expandableContent: "tree__node__expandable-content";
+    readonly link: "tree__node__link";
+};

package/dist/cjs/constants.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TEST_IDS = exports.TRANSITION_TIMING = exports.SIZE = exports.SELECTION_MODE = void 0;
+exports.SELECTION_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};
+exports.SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+exports.TRANSITION_TIMING = {
+    accordionFolding: 200,
+};
+exports.TEST_IDS = {
+    node: 'tree__node',
+    line: 'tree__node__line',
+    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',
+    expandable: 'tree__node__expandable',
+    expandableContent: 'tree__node__expandable-content',
+    link: 'tree__node__link',
+};

package/dist/cjs/contexts/TreeContext.d.ts

@@ -0,0 +1,30 @@
+import { HierarchicalSelectionHandlers } from '@cloud-ru/ds-utils';
+import { Dispatch, ReactNode, SetStateAction } from 'react';
+import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
+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;
+    onNodeClick: OnNodeClick;
+    isMultiSelect: boolean;
+    isSingleSelect: boolean;
+    isSelectable: boolean;
+    focusedNodeId?: TreeNodeId;
+    setFocusPosition(id: TreeNodeId): void;
+    resetFocusPosition(): void;
+    setFocusIndex: Dispatch<SetStateAction<number | undefined>>;
+    focusableNodeIds: TreeNodeId[];
+    getSelectionState: HierarchicalSelectionHandlers['getSelectionState'];
+    toggleSelection: HierarchicalSelectionHandlers['toggleSelection'];
+};
+type TreeContextProviderProps = {
+    children: ReactNode;
+    value: TreeContextBaseProps;
+};
+export declare const TreeContext: import("react").Context<TreeContextProps>;
+export declare function TreeContextProvider({ children, value }: TreeContextProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare const useTreeContext: () => TreeContextProps;
+export {};

package/dist/cjs/contexts/TreeContext.js

@@ -0,0 +1,108 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useTreeContext = exports.TreeContext = void 0;
+exports.TreeContextProvider = TreeContextProvider;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const utils_1 = require("@cloud-ru/ds-utils");
+const react_1 = require("react");
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+const EMPTY_EXPANDED = [];
+exports.TreeContext = (0, react_1.createContext)({
+    data: [],
+    selected: undefined,
+    onSelect() { },
+    expandedNodes: [],
+    onExpand() { },
+    onNodeClick() { },
+    setFocusPosition() { },
+    setFocusIndex() { },
+    resetFocusPosition() { },
+    focusableNodeIds: [],
+    isMultiSelect: false,
+    isSingleSelect: false,
+    isSelectable: false,
+    getSelectionState: () => ({ checked: false, indeterminate: false }),
+    toggleSelection: ({ selectedIds }) => selectedIds,
+});
+function TreeContextProvider({ children, value }) {
+    const { onNodeClick: onNodeClickProp, onExpand: onExpandProp, onSelect: onSelectProp, selectionMode, data, ...props } = value;
+    const isMultiSelect = selectionMode === constants_1.SELECTION_MODE.Multiple;
+    const isSingleSelect = selectionMode === constants_1.SELECTION_MODE.Single;
+    const isSelectable = Boolean(selectionMode);
+    const { getSelectionState, toggleSelection } = (0, utils_1.useHierarchicalSelection)({ includeParentsInValue: true });
+    const [expandedNodes, onExpandHandler] = (0, utils_1.useUncontrolledProp)(value.expandedNodes, value.expandedNodes ?? EMPTY_EXPANDED, onExpandProp);
+    const onExpand = (0, react_1.useCallback)(node => {
+        const isExpanded = expandedNodes.includes(node.id);
+        const nodes = isExpanded ? expandedNodes.filter(id => id !== node.id) : expandedNodes.concat(node.id);
+        onExpandHandler(nodes, node);
+    }, [expandedNodes, onExpandHandler]);
+    const [selectedNodes, onSelectHandler] = (0, utils_1.useUncontrolledProp)(value.selected, [], onSelectProp);
+    const onSelect = (0, react_1.useCallback)((node, parentNode) => {
+        if (!isSelectable || node.disabled)
+            return;
+        if (isSingleSelect) {
+            onSelectHandler(node.id === selectedNodes ? undefined : node.id, node);
+            return;
+        }
+        if (Array.isArray(selectedNodes)) {
+            const updatedSelectedNodes = (0, helpers_1.lookupTreeForSelectedNodes)({
+                node,
+                parentNode,
+                selectedNodes,
+                toggleSelection,
+            });
+            onSelectHandler(updatedSelectedNodes, node);
+        }
+    }, [isSingleSelect, onSelectHandler, selectedNodes, isSelectable, toggleSelection]);
+    const focusableNodeIds = (0, react_1.useMemo)(() => {
+        if (!expandedNodes?.length) {
+            return data.map(node => node.id);
+        }
+        return data.reduce((acc, cur) => {
+            acc.push(cur.id);
+            const isExpanded = expandedNodes.includes(cur.id);
+            if (isExpanded && cur.nested?.length) {
+                acc.push(...(0, helpers_1.findAllExpandedChildNodeIds)(cur.nested, expandedNodes));
+            }
+            return acc;
+        }, []);
+    }, [data, expandedNodes]);
+    const [focusIndex, setFocusIndex] = (0, react_1.useState)();
+    const focusedNodeId = focusIndex !== undefined ? focusableNodeIds[focusIndex] : undefined;
+    const setFocusPosition = (0, react_1.useCallback)((nodeId) => {
+        const newFocusIndex = focusableNodeIds.indexOf(nodeId);
+        setFocusIndex(newFocusIndex >= 0 ? newFocusIndex : undefined);
+    }, [focusableNodeIds]);
+    const resetFocusPosition = (0, react_1.useCallback)(() => setFocusIndex(undefined), []);
+    const onNodeClick = (0, react_1.useCallback)((node, e) => {
+        if (node.disabled) {
+            return;
+        }
+        if (isSingleSelect) {
+            onSelect(node);
+        }
+        node.onClick?.(e) || onNodeClickProp?.(node, e);
+    }, [isSingleSelect, onSelect, onNodeClickProp]);
+    return ((0, jsx_runtime_1.jsx)(exports.TreeContext.Provider, { value: {
+            ...props,
+            data,
+            selected: selectedNodes,
+            isSingleSelect,
+            isMultiSelect,
+            isSelectable,
+            expandedNodes,
+            onExpand,
+            onSelect,
+            onNodeClick,
+            focusedNodeId,
+            setFocusPosition,
+            resetFocusPosition,
+            setFocusIndex,
+            focusableNodeIds,
+            getSelectionState,
+            toggleSelection,
+        }, children: children }));
+}
+const useTreeContext = () => (0, react_1.useContext)(exports.TreeContext);
+exports.useTreeContext = useTreeContext;

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

@@ -0,0 +1,11 @@
+import { ParentNode } from '../../types';
+import { TreeNodeProps } from '../TreeNode';
+type ExpandableTreeNodeProps = {
+    node: TreeNodeProps;
+    parentNode?: ParentNode & {
+        parentNode?: ParentNode;
+    };
+    tabIndexAvailable?: boolean;
+};
+export declare const ExpandableTreeNode: import("react").ForwardRefExoticComponent<ExpandableTreeNodeProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,87 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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"));
+const constants_1 = require("../../constants");
+const TreeContext_1 = require("../../contexts/TreeContext");
+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'));
+exports.ExpandableTreeNode = (0, react_1.forwardRef)(({ node: { 'data-test-id': dataTestId, ...node }, parentNode, tabIndexAvailable }, ref) => {
+    const { expandedNodes, onExpand, onDataLoad, showLines } = (0, TreeContext_1.useTreeContext)();
+    const isExpandable = Boolean(node.nested);
+    const isExpanded = expandedNodes?.includes(node.id) || false;
+    const [loading, setLoading] = (0, react_1.useState)(false);
+    const [state, toggle] = (0, react_transition_state_1.default)({
+        timeout: constants_1.TRANSITION_TIMING.accordionFolding,
+        initialEntered: isExpanded || undefined,
+        enter: isExpanded,
+    });
+    const showContent = node.nested && node.nested.length > 0 && state.status !== 'exited';
+    const childrenRefs = (0, react_1.useRef)([]);
+    const [lastItemHeight, setLastItemHeight] = (0, react_1.useState)(0);
+    (0, react_1.useEffect)(() => {
+        const lastItem = childrenRefs.current?.at(-1);
+        if (lastItem) {
+            // Trunk обрывается L-bend'ом на середине СТРОКИ последнего ребёнка, не его поддерева.
+            // Укорачиваем на (wrapperHeight - rowHeight/2); для листа == rowHeight/2.
+            const lastRow = (lastItem.hasAttribute('data-node-id') ? lastItem : lastItem.querySelector('[data-node-id]')) ?? lastItem;
+            const recompute = () => {
+                const wrapperHeight = lastItem.getBoundingClientRect().height;
+                const rowHeight = lastRow.getBoundingClientRect().height;
+                setLastItemHeight(wrapperHeight - rowHeight / 2);
+            };
+            const observer = new ResizeObserver(() => recompute());
+            observer.observe(lastItem);
+            if (lastRow !== lastItem)
+                observer.observe(lastRow);
+            recompute();
+            return () => observer.disconnect();
+        }
+    }, [state.status]);
+    (0, react_1.useEffect)(() => {
+        if (node.nested?.length && isExpanded && state.status === 'exited') {
+            toggle(true);
+        }
+    }, [isExpanded, node.nested, state.status]);
+    const toggleExpand = async () => {
+        if (node.nested && !node.nested.length && !isExpanded && onDataLoad) {
+            setLoading(true);
+            await onDataLoad(node).finally(() => {
+                setLoading(false);
+            });
+        }
+        onExpand(node);
+        toggle();
+    };
+    const handleKeyDown = e => {
+        if (!isExpandable)
+            return;
+        switch (e.key) {
+            case 'ArrowRight': {
+                if (!isExpanded) {
+                    toggleExpand();
+                }
+                return;
+            }
+            case 'ArrowLeft': {
+                if (isExpanded) {
+                    toggleExpand();
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    };
+    return ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.expandableTreeNode, "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, { ...node, loading: loading, parentNode: parentNode, onChevronClick: toggleExpand, onKeyDown: handleKeyDown, tabIndexAvailable: tabIndexAvailable }), node.nested && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.expandableWrap, "data-expanded": isExpanded || undefined, "data-test-id": constants_1.TEST_IDS.expandable, children: showContent && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.expandableContent, "data-test-id": constants_1.TEST_IDS.expandableContent, children: [(0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, { visible: showLines, "data-test-id": constants_1.TEST_IDS.line, style: { height: `calc(100% - ${lastItemHeight}px)` } }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.expandableNested, 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: { ...nestedNode, disabled: node.disabled || nestedNode.disabled }, parentNode: parent }, nestedNode.id));
+                            }) })] })) }))] }));
+});

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

@@ -0,0 +1 @@
+export * from './ExpandableTreeNode';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./ExpandableTreeNode"), exports);

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

@@ -0,0 +1,37 @@
+.expandableTreeNode{
+  position:relative;
+  width:100%;
+}
+
+.expandableContent{
+  overflow:visible hidden;
+  display:flex;
+  gap:var(--tree-item-gap);
+  box-sizing:border-box;
+  min-width:0;
+  min-height:0;
+  visibility:hidden;
+  transition:visibility 200ms;
+}
+
+.expandableWrap{
+  overflow:visible hidden;
+  display:grid;
+  grid-template-rows:0fr;
+  box-sizing:border-box;
+  width:100%;
+  transition:grid-template-rows 200ms;
+}
+.expandableWrap[data-expanded=true]{
+  overflow:unset;
+  grid-template-rows:1fr;
+}
+.expandableWrap[data-expanded=true] .expandableContent{
+  overflow:unset;
+  visibility:visible;
+}
+
+.expandableNested{
+  width:100%;
+  min-width:0;
+}

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

@@ -0,0 +1,8 @@
+import { ParentNode, TreeNodeProps } from '../../types';
+type TreeItemProps = {
+    node: TreeNodeProps;
+    parentNode?: ParentNode;
+    tabIndexAvailable?: boolean;
+};
+export declare const TreeItem: import("react").ForwardRefExoticComponent<TreeItemProps & import("react").RefAttributes<HTMLDivElement>>;
+export {};

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

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+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");
+exports.TreeItem = (0, react_1.forwardRef)(({ node, tabIndexAvailable, parentNode }, ref) => {
+    const dataTestId = node['data-test-id'] || constants_1.TEST_IDS.node;
+    const nodeProps = { ...node, 'data-test-id': dataTestId };
+    if (node.nested) {
+        return ((0, jsx_runtime_1.jsx)(ExpandableTreeNode_1.ExpandableTreeNode, { node: nodeProps, tabIndexAvailable: tabIndexAvailable, parentNode: parentNode, ref: ref }));
+    }
+    return (0, jsx_runtime_1.jsx)(TreeNode_1.TreeNode, { ...nodeProps, tabIndexAvailable: tabIndexAvailable, parentNode: parentNode, ref: ref });
+});

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

@@ -0,0 +1 @@
+export * from './TreeItem';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TreeItem"), exports);

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export type TreeLineProps = {
+    className?: string;
+    /** Доп. инлайн-стили для контейнера (height/width передаются здесь, а не отдельными пропами). */
+    style?: CSSProperties;
+    halfWidth?: boolean;
+    visible?: boolean;
+    horizontal?: boolean;
+};
+export declare function TreeLine({ className, style, halfWidth, horizontal, visible }: TreeLineProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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({ className, style, halfWidth, horizontal, visible }) {
+    return ((0, jsx_runtime_1.jsx)("div", { className: (0, classnames_1.default)(styles_module_scss_1.default.treeLine, className), style: style, "data-horizontal": horizontal || undefined, "data-half-width": halfWidth || undefined, "data-visible": visible || undefined, "data-test-id": constants_1.TEST_IDS.line }));
+}

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

@@ -0,0 +1 @@
+export * from './TreeLine';

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./TreeLine"), exports);

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

@@ -0,0 +1,37 @@
+.treeLine{
+  pointer-events:none;
+  position:relative;
+  flex-shrink:0;
+  width:var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  visibility:hidden;
+}
+.treeLine[data-visible]{
+  visibility:visible;
+}
+.treeLine[data-visible]::after{
+  content:"";
+  position:absolute;
+  top:0;
+  left:50%;
+  transform:translateX(-50%);
+  width:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+  height:100%;
+  background:var(--sn-theme-color-available-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-default-borderColor, rgba(159, 166, 198, 0.3019607843)));
+}
+.treeLine[data-horizontal]{
+  box-sizing:border-box;
+}
+.treeLine[data-horizontal]::after{
+  top:50%;
+  left:calc(-50% - var(--tree-item-gap, 0px));
+  transform:translateY(-50%);
+  width:calc(150% + var(--tree-item-gap, 0px));
+  height:var(--sn-primitive-strokeWeight-strokeRegular, 1px);
+}
+.treeLine[data-horizontal][data-half-width]{
+  width:0;
+}
+.treeLine[data-horizontal][data-half-width]::after{
+  left:calc(0px - var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2 - var(--tree-item-gap, 0px));
+  width:calc(var(--tree-line-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px))) / 2 + var(--tree-item-gap, 0px));
+}

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

@@ -0,0 +1,4 @@
+import { TreeNodeProps } from '../../types';
+import { TreeNodeComponentProps } from './types';
+export type { TreeNodeProps };
+export declare const TreeNode: import("react").ForwardRefExoticComponent<TreeNodeComponentProps & import("react").RefAttributes<HTMLDivElement>>;