@cloud-ru/ds-tree 1.0.0

package/dist/cjs/types.d.ts

@@ -0,0 +1,151 @@
+import { ItemProps } from '@cloud-ru/ds-list';
+import { ValueOf, WithSupportProps } from '@cloud-ru/ds-utils';
+import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { SELECTION_MODE, SIZE } from './constants';
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+export type Size = ValueOf<typeof SIZE>;
+export type TreeNodeId = string;
+export type BaseTreeNode = WithSupportProps<{
+    /** Идентификатор элемента */
+    id: TreeNodeId;
+    /** Имя элемента */
+    title: string | ((value: Pick<BaseTreeNode, 'id' | 'disabled'>) => ReactNode);
+    /** Является ли элемент деактивированным */
+    disabled?: boolean;
+    /** Обработчик клика по элементу */
+    onClick?: MouseEventHandler;
+    /** CSS-класс */
+    className?: string;
+    /** Ссылка на элемент */
+    href?: string;
+}>;
+export type ChildTreeNode = BaseTreeNode & {
+    /** Иконка дочернего элемента */
+    icon?: ReactNode;
+    nested?: never;
+    expandedIcon?: never;
+    collapsedIcon?: never;
+};
+export type ParentTreeNode = BaseTreeNode & {
+    icon?: never;
+    /** Иконка элемента-родителя в открытом состоянии */
+    expandedIcon?: ReactNode;
+    /** Иконка элемента-родителя в закрытом состоянии */
+    collapsedIcon?: ReactNode;
+    /** Вложенные элементы дерева */
+    nested: (ChildTreeNode | ParentTreeNode)[];
+    /** Имя элемента-родителя (расширяет вариант из `BaseTreeNode` — в callback приходят также `nested`-узлы) */
+    title: string | ((value: Pick<ParentTreeNode, 'id' | 'disabled' | 'nested'>) => ReactNode);
+};
+export type TreeNodeProps = ChildTreeNode | ParentTreeNode;
+export type ParentNode = Pick<TreeNodeProps, 'id' | 'nested'> & {
+    parentNode?: ParentNode;
+};
+export type OnNodeClick = (node: TreeNodeProps, e: MouseEvent) => void;
+export type TreeCommonProps = {
+    /** Данные для отрисовки */
+    data: TreeNodeProps[];
+    /**
+     * Режим выбора элементов:
+     * <br> - `Single` - одиночный выбор
+     * <br> - `Multi` - множественный выбор
+     * <br> - `undefined` - без выбора
+     */
+    selectionMode?: SelectionMode;
+    /** Обработчик клика по элементу дерева */
+    onNodeClick?: OnNodeClick;
+    /** Состояние для раскрытых элементов */
+    expandedNodes?: TreeNodeId[];
+    /** Колбэк при раскрытии/закрытии элементов */
+    onExpand?(expandedKeys: TreeNodeId[], node: TreeNodeProps): void;
+    /** Состояние для выбранных элементов */
+    selected?: TreeNodeId[] | TreeNodeId;
+    /** Колбэк для асинхронной загрузки данных при раскрытии дерева */
+    onDataLoad?(node: TreeNodeProps): Promise<boolean | unknown>;
+    /** Дополнительные действия для элемента-родителя */
+    parentActions?(node: TreeNodeProps): ItemProps[];
+    /** Дополнительные действия для элемента-потомка */
+    nodeActions?(node: TreeNodeProps): ItemProps[];
+    /**
+     * Флаг отвечающий за отображение иконок у элементов дерева
+     * @default true
+     */
+    showIcons?: boolean;
+    /** Флаг отвечающий за отображение линий вложенности */
+    showLines?: boolean;
+    /**
+     * Размер строк дерева (Figma variant `size`).
+     * @default 'm'
+     */
+    size?: Size;
+    /**
+     * Максимальное число строк заголовка узла до обрезки многоточием.
+     * Значение больше 1 разрешает перенос; строка растёт по высоте.
+     * @default 1
+     */
+    titleMaxLines?: number;
+    /** CSS-класс */
+    className?: string;
+};
+export type TreeView = Omit<TreeCommonProps, 'selected' | 'selectionMode'> & {
+    selectionMode?: never;
+    selected?: never;
+    onSelect?: never;
+};
+export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
+    selectionMode: 'single';
+    /** Состояние для выбраного элемента */
+    /** <br> - При <strong>selectionMode</strong>=`Single` - принимает строку */
+    selected?: TreeNodeId;
+    /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
+    onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
+    showToggle?: boolean;
+};
+export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
+    selectionMode: 'multiple';
+    /**
+     * Состояние для выбраных элементов:
+     * <br> - При <strong>selectionMode</strong>=`Multiple` - принимает массив строк
+     */
+    selected?: TreeNodeId[];
+    /**
+     * Колбэк при изменении выбраных элементов:
+     * <br> - При <strong>selectionMode</strong>=`Multiple` - возвращает массив строк
+     */
+    onSelect?(selectedKeys: TreeNodeId[], node: TreeNodeProps): void;
+};
+export type TreeBaseProps = TreeView | TreeMultiSelect | TreeSingleSelect;
+/**
+ * Расширение `TreeNodeProps` для внутренних helper'ов поиска/сортировки.
+ *
+ * Когда `title` — функция (а не строка), helper'ы не могут отсортировать или
+ * отфильтровать узел по содержимому JSX. `getTitle` даёт строковый ключ, по
+ * которому можно сравнивать узлы.
+ */
+export type ExtendedTreeNodeProps = TreeNodeProps & {
+    /** Возвращает строковый ключ узла для сравнения/поиска, когда `title` — ReactNode. */
+    getTitle?(): string;
+};
+export type PreloadNodeHandler<TTreeNode extends TreeNodeProps> = (node: TreeNodeProps) => Promise<{
+    preloadedChildren: TTreeNode[];
+    updatedTree: TTreeNode[];
+}>;
+export type SearchableTreeDataLoadResult<TTreeNode extends TreeNodeProps, TRecordValue> = {
+    preloadedChildren: TTreeNode[];
+    updatedTree: TTreeNode[];
+    newTreeItemsRecord: Record<string, TRecordValue>;
+};
+/**
+ * Резолвер выделения для multi-select-режима: получает текущий список выбранных
+ * id, целевой узел и его новое состояние, возвращает diff (`added`/`removed`)
+ * относительно входного `selectedKeys`. Используется для кастомных стратегий
+ * каскадирования.
+ */
+export type SelectHandler = (props: {
+    selectedKeys: string[];
+    node: TreeNodeProps;
+    isSelected: boolean;
+}) => {
+    added: string[];
+    removed: string[];
+};

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/components/Tree/Tree.d.ts

@@ -0,0 +1,4 @@
+import { WithSupportProps } from '@cloud-ru/ds-utils';
+import { TreeBaseProps } from '../../types.js';
+export type TreeProps = WithSupportProps<TreeBaseProps>;
+export declare function Tree({ data, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines, showIcons, size, titleMaxLines, className, ...rest }: TreeProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Tree/Tree.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { SIZE } from '../../constants.js';
+import { TreeContextProvider } from '../../contexts/TreeContext.js';
+import { TreeItem } from '../../helperComponents/index.js';
+import styles from './styles.module.css';
+import { extractSelectableProps } from './utils.js';
+export function Tree({ data, onNodeClick, onExpand, expandedNodes, nodeActions, parentActions, onDataLoad, showLines = true, showIcons = true, size = SIZE.M, titleMaxLines = 1, className, ...rest }) {
+    return (_jsx("div", { className: cn(styles.tree, className), role: 'tree', "data-size": size, ...extractSupportProps(rest), children: _jsx(TreeContextProvider, { value: {
+                showToggle: rest.selectionMode === 'single' && rest.showToggle,
+                data,
+                expandedNodes,
+                onNodeClick,
+                onExpand,
+                nodeActions,
+                parentActions,
+                onDataLoad,
+                showLines,
+                showIcons,
+                size,
+                titleMaxLines,
+                ...extractSelectableProps(rest),
+            }, children: data.map((node, index) => (_jsx(TreeItem, { node: node, tabIndexAvailable: index === 0 || index === data.length - 1 }, node.id))) }) }));
+}

package/dist/esm/components/Tree/index.d.ts

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

package/dist/esm/components/Tree/index.js

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

package/dist/esm/components/Tree/styles.module.css

@@ -0,0 +1,17 @@
+.tree{
+  box-sizing:border-box;
+  min-width:0;
+  height:100%;
+}
+.tree[data-size=s]{
+  --tree-line-width:var(--sn-tree-anatomy-size-s-treeItem-centeredWrapper-width, var(--sn-density-size-icon-xs, var(--sn-primitive-dimension-24, 24px)));
+  --tree-item-gap:var(--sn-tree-anatomy-size-s-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-s, var(--sn-primitive-dimension-12, 12px)));
+}
+.tree[data-size=m]{
+  --tree-line-width:var(--sn-tree-anatomy-size-m-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  --tree-item-gap:var(--sn-tree-anatomy-size-m-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-m, var(--sn-primitive-dimension-16, 16px)));
+}
+.tree[data-size=l]{
+  --tree-line-width:var(--sn-tree-anatomy-size-l-treeItem-centeredWrapper-width, var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px)));
+  --tree-item-gap:var(--sn-tree-anatomy-size-l-treeItem-gap, var(--sn-density-spacing-control-container-horizontal-l, var(--sn-primitive-dimension-20, 20px)));
+}

package/dist/esm/components/Tree/utils.d.ts

@@ -0,0 +1,4 @@
+import { TreeBaseProps, TreeMultiSelect, TreeSingleSelect, TreeView } from '../../types.js';
+type SelectableProps<T> = Pick<T, Extract<keyof T, 'selectionMode' | 'selected' | 'onSelect'>>;
+export declare function extractSelectableProps({ selectionMode, selected, onSelect }: SelectableProps<TreeBaseProps>): SelectableProps<TreeSingleSelect> | SelectableProps<TreeMultiSelect> | SelectableProps<TreeView>;
+export {};

package/dist/esm/components/Tree/utils.js

@@ -0,0 +1,12 @@
+import { SELECTION_MODE } from '../../constants.js';
+// Сужение discriminated union к конкретному варианту: TS не выводит ветку из switch-case по
+// дженерик-проп `selectionMode`, поэтому возвращаем строго типизированный Pick через `as`.
+export function extractSelectableProps({ selectionMode, selected, onSelect }) {
+    if (selectionMode === SELECTION_MODE.Single) {
+        return { selectionMode, selected, onSelect };
+    }
+    if (selectionMode === SELECTION_MODE.Multiple) {
+        return { selectionMode, selected, onSelect };
+    }
+    return {};
+}

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

@@ -0,0 +1 @@
+export * from './Tree/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1 @@
+export * from './Tree/index.js';

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

@@ -0,0 +1,26 @@
+export const SELECTION_MODE = {
+    Single: 'single',
+    Multiple: 'multiple',
+};
+export const SIZE = {
+    S: 's',
+    M: 'm',
+    L: 'l',
+};
+export const TRANSITION_TIMING = {
+    accordionFolding: 200,
+};
+export const 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/esm/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.js';
+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/esm/contexts/TreeContext.js

@@ -0,0 +1,103 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useHierarchicalSelection, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { SELECTION_MODE } from '../constants.js';
+import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../helpers/index.js';
+const EMPTY_EXPANDED = [];
+export const TreeContext = 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,
+});
+export function TreeContextProvider({ children, value }) {
+    const { onNodeClick: onNodeClickProp, onExpand: onExpandProp, onSelect: onSelectProp, selectionMode, data, ...props } = value;
+    const isMultiSelect = selectionMode === SELECTION_MODE.Multiple;
+    const isSingleSelect = selectionMode === SELECTION_MODE.Single;
+    const isSelectable = Boolean(selectionMode);
+    const { getSelectionState, toggleSelection } = useHierarchicalSelection({ includeParentsInValue: true });
+    const [expandedNodes, onExpandHandler] = useUncontrolledProp(value.expandedNodes, value.expandedNodes ?? EMPTY_EXPANDED, onExpandProp);
+    const onExpand = 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] = useUncontrolledProp(value.selected, [], onSelectProp);
+    const onSelect = 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 = lookupTreeForSelectedNodes({
+                node,
+                parentNode,
+                selectedNodes,
+                toggleSelection,
+            });
+            onSelectHandler(updatedSelectedNodes, node);
+        }
+    }, [isSingleSelect, onSelectHandler, selectedNodes, isSelectable, toggleSelection]);
+    const focusableNodeIds = 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(...findAllExpandedChildNodeIds(cur.nested, expandedNodes));
+            }
+            return acc;
+        }, []);
+    }, [data, expandedNodes]);
+    const [focusIndex, setFocusIndex] = useState();
+    const focusedNodeId = focusIndex !== undefined ? focusableNodeIds[focusIndex] : undefined;
+    const setFocusPosition = useCallback((nodeId) => {
+        const newFocusIndex = focusableNodeIds.indexOf(nodeId);
+        setFocusIndex(newFocusIndex >= 0 ? newFocusIndex : undefined);
+    }, [focusableNodeIds]);
+    const resetFocusPosition = useCallback(() => setFocusIndex(undefined), []);
+    const onNodeClick = useCallback((node, e) => {
+        if (node.disabled) {
+            return;
+        }
+        if (isSingleSelect) {
+            onSelect(node);
+        }
+        node.onClick?.(e) || onNodeClickProp?.(node, e);
+    }, [isSingleSelect, onSelect, onNodeClickProp]);
+    return (_jsx(TreeContext.Provider, { value: {
+            ...props,
+            data,
+            selected: selectedNodes,
+            isSingleSelect,
+            isMultiSelect,
+            isSelectable,
+            expandedNodes,
+            onExpand,
+            onSelect,
+            onNodeClick,
+            focusedNodeId,
+            setFocusPosition,
+            resetFocusPosition,
+            setFocusIndex,
+            focusableNodeIds,
+            getSelectionState,
+            toggleSelection,
+        }, children: children }));
+}
+export const useTreeContext = () => useContext(TreeContext);

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

@@ -0,0 +1,11 @@
+import { ParentNode } from '../../types.js';
+import { TreeNodeProps } from '../TreeNode/index.js';
+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/esm/helperComponents/ExpandableTreeNode/ExpandableTreeNode.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useRef, useState } from 'react';
+import useTransition from 'react-transition-state';
+import { TEST_IDS, TRANSITION_TIMING } from '../../constants.js';
+import { useTreeContext } from '../../contexts/TreeContext.js';
+import { TreeItem } from '../TreeItem/index.js';
+import { TreeLine } from '../TreeLine/index.js';
+import { TreeNode } from '../TreeNode/index.js';
+import styles from './styles.module.css';
+export const ExpandableTreeNode = forwardRef(({ 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 [loading, setLoading] = useState(false);
+    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 childrenRefs = useRef([]);
+    const [lastItemHeight, setLastItemHeight] = useState(0);
+    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]);
+    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 (_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, { ...node, loading: loading, 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, style: { height: `calc(100% - ${lastItemHeight}px)` } }), _jsx("div", { className: styles.expandableNested, children: node.nested.map((nestedNode, index) => {
+                                const parent = { id: node.id, nested: node.nested, parentNode };
+                                return (_jsx(TreeItem, { ref: el => (childrenRefs.current[index] = el), node: { ...nestedNode, disabled: node.disabled || nestedNode.disabled }, parentNode: parent }, nestedNode.id));
+                            }) })] })) }))] }));
+});

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

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

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

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

package/dist/esm/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/esm/helperComponents/TreeItem/TreeItem.d.ts

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

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

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

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

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

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

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

package/dist/esm/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/esm/helperComponents/TreeLine/TreeLine.js

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

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

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

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

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