@cloud-ru/ds-tree 1.0.0

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

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

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

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronRightSVG, FileSVG, FolderOpenSVG, FolderSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Spinner } from '@cloud-ru/ds-loader';
+import { Checkbox, Radio } from '@cloud-ru/ds-toggles';
+import { TruncateString } from '@cloud-ru/ds-truncate-string';
+import { Typography } from '@cloud-ru/ds-typography';
+import { extractSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+import { forwardRef, useEffect, useMemo, useRef, useState } from 'react';
+import { TEST_IDS } from '../../constants.js';
+import { useTreeContext } from '../../contexts/TreeContext.js';
+import { checkNestedNodesSelection, findAllChildNodeIds } from '../../helpers/index.js';
+import { TreeLine } from '../TreeLine/index.js';
+import { TreeNodeActions, TreeNodeHref } from './components/index.js';
+import { CONTROL_SIZE_BY_TREE_SIZE } from './constants.js';
+import styles from './styles.module.css';
+import { stopPropagationClick } from './utils.js';
+export const TreeNode = forwardRef(({ id, title, icon: iconProp, expandedIcon: expandedIconProp, collapsedIcon: collapsedIconProp, disabled, onClick, nested, className, onChevronClick, onKeyDown, loading, parentNode, tabIndexAvailable, href, ...rest }, ref) => {
+    const { isMultiSelect, isSelectable, onNodeClick, selected, expandedNodes, onSelect, nodeActions, parentActions, setFocusPosition, resetFocusPosition, focusedNodeId, setFocusIndex, focusableNodeIds, showToggle, showLines, showIcons, size = 'm', titleMaxLines = 1, getSelectionState, } = useTreeContext();
+    const [isDroplistOpen, setDroplistOpen] = useState(false);
+    const [isDroplistTriggerFocused, setFocusDroplistTrigger] = useState(false);
+    const contentRef = useRef(null);
+    const anchorRef = useRef(null);
+    const isExpandable = Array.isArray(nested);
+    const isExpanded = isExpandable ? expandedNodes?.includes(id) : undefined;
+    const selectedIds = useMemo(() => {
+        if (Array.isArray(selected)) {
+            return selected;
+        }
+        if (selected) {
+            return [selected];
+        }
+        return [];
+    }, [selected]);
+    const descendantIds = useMemo(() => (nested?.length ? findAllChildNodeIds(nested) : []), [nested]);
+    const nestedNodesSelection = useMemo(() => {
+        if (!nested || !selected)
+            return undefined;
+        return checkNestedNodesSelection(nested, selectedIds);
+    }, [nested, selected, selectedIds]);
+    const multiSelectState = useMemo(() => {
+        if (!isMultiSelect) {
+            return { checked: false, indeterminate: false };
+        }
+        return getSelectionState({
+            nodeId: id,
+            childIds: descendantIds,
+            selectedIds,
+        });
+    }, [descendantIds, getSelectionState, id, isMultiSelect, selectedIds]);
+    const isSelected = isMultiSelect ? multiSelectState.checked : selected === id || false;
+    const isIndeterminate = isMultiSelect && multiSelectState.indeterminate;
+    const isFocused = focusedNodeId === id;
+    useEffect(() => {
+        if (contentRef.current && isFocused) {
+            contentRef.current.focus();
+        }
+    }, [isFocused]);
+    const treeNodeIcon = useMemo(() => {
+        if (!showIcons)
+            return undefined;
+        // Размер svg задаётся в styles.module.scss через `.treeNodeIcon svg`,
+        // зависит от data-size корня; size в JSX не прокидываем.
+        if (isExpandable) {
+            return isExpanded ? (expandedIconProp ?? _jsx(FolderOpenSVG, {})) : (collapsedIconProp ?? _jsx(FolderSVG, {}));
+        }
+        return iconProp ?? _jsx(FileSVG, {});
+    }, [showIcons, isExpandable, isExpanded, iconProp, expandedIconProp, collapsedIconProp]);
+    const handleClick = e => {
+        onNodeClick({
+            id,
+            title,
+            disabled,
+            nested,
+            onClick,
+            href,
+        }, e);
+    };
+    const handleAnchorClick = (e) => {
+        e.stopPropagation();
+        if (e?.metaKey || e?.ctrlKey || e?.button === 1) {
+            return;
+        }
+        // preventDefault только если есть кастомный onClick на ноде — иначе
+        // позволяем браузеру навигировать по href. Но handleClick зовём всегда,
+        // чтобы Tree успел прокинуть onNodeClick/onSelect.
+        if (onClick) {
+            e.preventDefault();
+        }
+        handleClick(e);
+    };
+    const handleSelect = () => {
+        onSelect({
+            id,
+            disabled,
+            nested,
+        }, parentNode);
+    };
+    const handleFocus = (e) => {
+        setFocusPosition(id);
+        if (!e) {
+            setFocusDroplistTrigger(false);
+            contentRef.current?.focus();
+        }
+    };
+    const handleBlurActions = () => {
+        if (isDroplistTriggerFocused && !isDroplistOpen) {
+            setFocusDroplistTrigger(false);
+            contentRef.current?.blur();
+        }
+    };
+    const handleKeyDown = e => {
+        onKeyDown?.(e);
+        const focusableCount = focusableNodeIds.length;
+        switch (e.key) {
+            case 'ArrowDown': {
+                e.preventDefault();
+                setFocusIndex((prev = 0) => {
+                    if (prev >= focusableCount - 1) {
+                        return focusableCount - 1;
+                    }
+                    return prev + 1;
+                });
+                return;
+            }
+            case 'ArrowUp': {
+                e.preventDefault();
+                setFocusIndex((prev = 0) => {
+                    if (!prev) {
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+                return;
+            }
+            case 'ArrowRight': {
+                e.preventDefault();
+                // ArrowRight уводит фокус на droplist trigger row-actions — это нужно
+                // только если на строке вообще есть actions. Без них клавиша не
+                // должна давать визуального hover-эффекта (`data-droplist-active`).
+                const hasRowActions = Boolean(nested ? parentActions : nodeActions);
+                if (hasRowActions && (isExpanded || !isExpandable || disabled)) {
+                    setFocusDroplistTrigger(true);
+                }
+                return;
+            }
+            case 'ArrowLeft': {
+                e.preventDefault();
+                if (isDroplistTriggerFocused) {
+                    setFocusDroplistTrigger(false);
+                    contentRef.current?.focus();
+                }
+                return;
+            }
+            case 'Escape': {
+                contentRef.current?.blur();
+                return;
+            }
+            case ' ':
+            case 'Enter': {
+                e.preventDefault();
+                handleSelect();
+                if (href && anchorRef.current) {
+                    anchorRef.current.click();
+                }
+                return;
+            }
+            default:
+                return;
+        }
+    };
+    const getNodeActions = nested ? parentActions : nodeActions;
+    return (_jsxs("div", { role: 'presentation', className: cn(styles.treeNode, className), ...extractSupportProps(rest), "data-node-id": id, "data-size": size, ref: ref, children: [parentNode && _jsx(TreeLine, { halfWidth: true, horizontal: true, visible: showLines, "data-test-id": TEST_IDS.line }), _jsx("div", { className: styles.treeNodeExpandButtonWrapper, children: isExpandable ? (_jsxs(_Fragment, { children: [_jsxs("button", { type: 'button', onClick: onChevronClick, "data-expanded": isExpanded || undefined, className: styles.treeNodeExpandButton, tabIndex: -1, "data-test-id": TEST_IDS.chevron, "aria-label": isExpanded ? 'Collapse' : 'Expand', children: [_jsx("span", { className: styles.treeNodeExpandButtonStateLayer, "aria-hidden": true, "data-state": 'emptyNeutralOnBackground' }), loading ? _jsx(Spinner, { size: CONTROL_SIZE_BY_TREE_SIZE[size] }) : _jsx(ChevronRightSVG, {})] }), _jsx(TreeLine, { visible: isExpanded && showLines })] })) : (_jsx("div", { className: styles.treeNodeExpandButtonSpacer, "aria-hidden": true })) }), _jsxs("div", { role: 'treeitem', "aria-expanded": isExpanded, "aria-selected": isSelectable
+                    ? isSelected || (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: [_jsx("span", { className: styles.stateLayer, "aria-hidden": true, "data-state": isSelected && !isMultiSelect ? 'activatedOnBackground' : 'emptyNeutralOnBackground' }), (isMultiSelect || showToggle) && (_jsxs("div", { className: styles.treeNodeCheckboxWrap, children: [isMultiSelect && (_jsx(Checkbox, { size: CONTROL_SIZE_BY_TREE_SIZE[size], disabled: disabled, checked: isSelected, indeterminate: isIndeterminate, onChange: handleSelect, onClick: stopPropagationClick, "data-test-id": TEST_IDS.checkbox, tabIndex: -1 })), showToggle && (_jsx(Radio, { size: CONTROL_SIZE_BY_TREE_SIZE[size], checked: isSelected, disabled: disabled, "data-test-id": TEST_IDS.radio, tabIndex: -1 }))] })), treeNodeIcon && (_jsx("div", { className: styles.treeNodeIcon, "data-test-id": TEST_IDS.icon, children: treeNodeIcon })), _jsx(Typography, { variant: 'body', size: size, as: 'div', className: styles.treeNodeTitle, children: _jsxs(TreeNodeHref, { href: href, onClick: handleAnchorClick, ref: anchorRef, children: [typeof title === 'string' && (_jsx(TruncateString, { text: title, maxLines: titleMaxLines, "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, size: size }))] })] }));
+});

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

@@ -0,0 +1,15 @@
+import { ItemProps } from '@cloud-ru/ds-list';
+import { Dispatch, SetStateAction } from 'react';
+import { Size, TreeNodeProps } from '../../../types.js';
+type TreeNodeActionsProps = {
+    isDroplistOpen: boolean;
+    setDroplistOpen: Dispatch<SetStateAction<boolean>>;
+    getNodeActions(node: Omit<TreeNodeProps, 'href'>): ItemProps[];
+    node: Omit<TreeNodeProps, 'href'>;
+    isDroplistTriggerFocused: boolean;
+    focusNode(): void;
+    onBlurActions(): void;
+    size: Size;
+};
+export declare function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focusNode, isDroplistOpen, setDroplistOpen, onBlurActions, node, size, }: TreeNodeActionsProps): import("react/jsx-runtime").JSX.Element | null;
+export {};

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

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Button } from '@cloud-ru/ds-button';
+import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist } from '@cloud-ru/ds-list';
+import { useEffect, useRef } from 'react';
+import { TEST_IDS } from '../../../constants.js';
+import styles from '../styles.module.css';
+import { stopPropagationClick, stopPropagationFocus } from '../utils.js';
+export function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focusNode, isDroplistOpen, setDroplistOpen, onBlurActions, node, size, }) {
+    const droplistActions = getNodeActions(node);
+    const localRef = useRef(null);
+    useEffect(() => {
+        if (localRef.current && isDroplistTriggerFocused) {
+            localRef.current.focus();
+        }
+    }, [isDroplistTriggerFocused, localRef]);
+    const handleKeyDown = e => {
+        switch (e.key) {
+            case 'Tab': {
+                focusNode();
+                setDroplistOpen(false);
+                e.preventDefault();
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowLeft': {
+                if (isDroplistTriggerFocused) {
+                    focusNode();
+                    setDroplistOpen(false);
+                    e.stopPropagation();
+                }
+                return;
+            }
+            case ' ':
+            case 'Enter': {
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowDown': {
+                if (isDroplistTriggerFocused) {
+                    setDroplistOpen(true);
+                }
+                e.stopPropagation();
+                return;
+            }
+            case 'ArrowUp': {
+                setDroplistOpen(false);
+                localRef.current?.focus();
+                e.stopPropagation();
+                return;
+            }
+            default:
+                return;
+        }
+    };
+    if (!droplistActions.length) {
+        return null;
+    }
+    return (_jsx("div", { role: 'presentation', className: styles.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: stopPropagationClick, onKeyDown: handleKeyDown, onFocus: stopPropagationFocus, children: _jsx(Droplist, { open: isDroplistOpen, onOpenChange: open => {
+                setDroplistOpen(open);
+                // Закрытие дроплиста (по клику в пункт, ESC, outside-click) должно
+                // вернуть фокус на строку и снять `isDroplistTriggerFocused` —
+                // иначе kebab остаётся в visible-hover-состоянии. Tab и ArrowLeft
+                // уже делают это сами; для пути через `closeDroplistOnItemClick`
+                // ресет навешиваем здесь.
+                if (!open) {
+                    focusNode();
+                }
+            }, items: droplistActions, closeDroplistOnItemClick: true, placement: 'bottom-end', size: size, children: _jsx(Button, { view: 'elevated', appearance: 'neutral', size: size, icon: _jsx(KebabSVG, {}), onBlur: onBlurActions, tabIndex: -1, "data-test-id": TEST_IDS.droplistTrigger, innerRef: localRef }) }) }));
+}

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,5 @@
+export declare const CONTROL_SIZE_BY_TREE_SIZE: {
+    readonly s: "xs";
+    readonly m: "s";
+    readonly l: "s";
+};

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

@@ -0,0 +1,7 @@
+// Size-ось контролов (Checkbox / Radio / Spinner) короче, чем у Tree:
+// 's'-строка → 'xs'-контрол, 'm'/'l' → 's'.
+export const CONTROL_SIZE_BY_TREE_SIZE = {
+    s: 'xs',
+    m: 's',
+    l: 's',
+};

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

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

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

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