@cloud-ru/ds-tree 1.0.0

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

@@ -0,0 +1,187 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNode = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const loader_1 = require("@cloud-ru/ds-loader");
+const toggles_1 = require("@cloud-ru/ds-toggles");
+const truncate_string_1 = require("@cloud-ru/ds-truncate-string");
+const typography_1 = require("@cloud-ru/ds-typography");
+const utils_1 = require("@cloud-ru/ds-utils");
+const classnames_1 = __importDefault(require("classnames"));
+const react_1 = require("react");
+const constants_1 = require("../../constants");
+const TreeContext_1 = require("../../contexts/TreeContext");
+const helpers_1 = require("../../helpers");
+const TreeLine_1 = require("../TreeLine");
+const components_1 = require("./components");
+const constants_2 = require("./constants");
+const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
+const utils_2 = require("./utils");
+exports.TreeNode = (0, react_1.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, } = (0, TreeContext_1.useTreeContext)();
+    const [isDroplistOpen, setDroplistOpen] = (0, react_1.useState)(false);
+    const [isDroplistTriggerFocused, setFocusDroplistTrigger] = (0, react_1.useState)(false);
+    const contentRef = (0, react_1.useRef)(null);
+    const anchorRef = (0, react_1.useRef)(null);
+    const isExpandable = Array.isArray(nested);
+    const isExpanded = isExpandable ? expandedNodes?.includes(id) : undefined;
+    const selectedIds = (0, react_1.useMemo)(() => {
+        if (Array.isArray(selected)) {
+            return selected;
+        }
+        if (selected) {
+            return [selected];
+        }
+        return [];
+    }, [selected]);
+    const descendantIds = (0, react_1.useMemo)(() => (nested?.length ? (0, helpers_1.findAllChildNodeIds)(nested) : []), [nested]);
+    const nestedNodesSelection = (0, react_1.useMemo)(() => {
+        if (!nested || !selected)
+            return undefined;
+        return (0, helpers_1.checkNestedNodesSelection)(nested, selectedIds);
+    }, [nested, selected, selectedIds]);
+    const multiSelectState = (0, react_1.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;
+    (0, react_1.useEffect)(() => {
+        if (contentRef.current && isFocused) {
+            contentRef.current.focus();
+        }
+    }, [isFocused]);
+    const treeNodeIcon = (0, react_1.useMemo)(() => {
+        if (!showIcons)
+            return undefined;
+        // Размер svg задаётся в styles.module.scss через `.treeNodeIcon svg`,
+        // зависит от data-size корня; size в JSX не прокидываем.
+        if (isExpandable) {
+            return isExpanded ? (expandedIconProp ?? (0, jsx_runtime_1.jsx)(system_1.FolderOpenSVG, {})) : (collapsedIconProp ?? (0, jsx_runtime_1.jsx)(system_1.FolderSVG, {}));
+        }
+        return iconProp ?? (0, jsx_runtime_1.jsx)(system_1.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 ((0, jsx_runtime_1.jsxs)("div", { role: 'presentation', className: (0, classnames_1.default)(styles_module_scss_1.default.treeNode, className), ...(0, utils_1.extractSupportProps)(rest), "data-node-id": id, "data-size": size, ref: ref, children: [parentNode && (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, { halfWidth: true, horizontal: true, visible: showLines, "data-test-id": constants_1.TEST_IDS.line }), (0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.treeNodeExpandButtonWrapper, children: isExpandable ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("button", { type: 'button', onClick: onChevronClick, "data-expanded": isExpanded || undefined, className: styles_module_scss_1.default.treeNodeExpandButton, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.chevron, "aria-label": isExpanded ? 'Collapse' : 'Expand', children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.treeNodeExpandButtonStateLayer, "aria-hidden": true, "data-state": 'emptyNeutralOnBackground' }), loading ? (0, jsx_runtime_1.jsx)(loader_1.Spinner, { size: constants_2.CONTROL_SIZE_BY_TREE_SIZE[size] }) : (0, jsx_runtime_1.jsx)(system_1.ChevronRightSVG, {})] }), (0, jsx_runtime_1.jsx)(TreeLine_1.TreeLine, { visible: isExpanded && showLines })] })) : ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.treeNodeExpandButtonSpacer, "aria-hidden": true })) }), (0, jsx_runtime_1.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_module_scss_1.default.treeNodeContent, "data-test-id": constants_1.TEST_IDS.item, ref: contentRef, children: [(0, jsx_runtime_1.jsx)("span", { className: styles_module_scss_1.default.stateLayer, "aria-hidden": true, "data-state": isSelected && !isMultiSelect ? 'activatedOnBackground' : 'emptyNeutralOnBackground' }), (isMultiSelect || showToggle) && ((0, jsx_runtime_1.jsxs)("div", { className: styles_module_scss_1.default.treeNodeCheckboxWrap, children: [isMultiSelect && ((0, jsx_runtime_1.jsx)(toggles_1.Checkbox, { size: constants_2.CONTROL_SIZE_BY_TREE_SIZE[size], disabled: disabled, checked: isSelected, indeterminate: isIndeterminate, onChange: handleSelect, onClick: utils_2.stopPropagationClick, "data-test-id": constants_1.TEST_IDS.checkbox, tabIndex: -1 })), showToggle && ((0, jsx_runtime_1.jsx)(toggles_1.Radio, { size: constants_2.CONTROL_SIZE_BY_TREE_SIZE[size], checked: isSelected, disabled: disabled, "data-test-id": constants_1.TEST_IDS.radio, tabIndex: -1 }))] })), treeNodeIcon && ((0, jsx_runtime_1.jsx)("div", { className: styles_module_scss_1.default.treeNodeIcon, "data-test-id": constants_1.TEST_IDS.icon, children: treeNodeIcon })), (0, jsx_runtime_1.jsx)(typography_1.Typography, { variant: 'body', size: size, as: 'div', className: styles_module_scss_1.default.treeNodeTitle, children: (0, jsx_runtime_1.jsxs)(components_1.TreeNodeHref, { href: href, onClick: handleAnchorClick, ref: anchorRef, children: [typeof title === 'string' && ((0, jsx_runtime_1.jsx)(truncate_string_1.TruncateString, { text: title, maxLines: titleMaxLines, "data-test-id": constants_1.TEST_IDS.title })), typeof title !== 'string' && title({ id, disabled, nested })] }) }), getNodeActions && ((0, jsx_runtime_1.jsx)(components_1.TreeNodeActions, { getNodeActions: getNodeActions, node: {
+                            id,
+                            title,
+                            disabled,
+                            nested,
+                        }, focusNode: handleFocus, onBlurActions: handleBlurActions, isDroplistTriggerFocused: isDroplistTriggerFocused, isDroplistOpen: isDroplistOpen, setDroplistOpen: setDroplistOpen, size: size }))] })] }));
+});

package/dist/cjs/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';
+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/cjs/helperComponents/TreeNode/components/TreeNodeActions.js

@@ -0,0 +1,76 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNodeActions = TreeNodeActions;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const button_1 = require("@cloud-ru/ds-button");
+const system_1 = require("@cloud-ru/ds-icons/interface/system");
+const list_1 = require("@cloud-ru/ds-list");
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+const utils_1 = require("../utils");
+function TreeNodeActions({ getNodeActions, isDroplistTriggerFocused, focusNode, isDroplistOpen, setDroplistOpen, onBlurActions, node, size, }) {
+    const droplistActions = getNodeActions(node);
+    const localRef = (0, react_1.useRef)(null);
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { role: 'presentation', className: styles_module_scss_1.default.treeNodeActions, "data-focused": isDroplistTriggerFocused || undefined, onClick: utils_1.stopPropagationClick, onKeyDown: handleKeyDown, onFocus: utils_1.stopPropagationFocus, children: (0, jsx_runtime_1.jsx)(list_1.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: (0, jsx_runtime_1.jsx)(button_1.Button, { view: 'elevated', appearance: 'neutral', size: size, icon: (0, jsx_runtime_1.jsx)(system_1.KebabSVG, {}), onBlur: onBlurActions, tabIndex: -1, "data-test-id": constants_1.TEST_IDS.droplistTrigger, innerRef: localRef }) }) }));
+}

package/dist/cjs/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/cjs/helperComponents/TreeNode/components/TreeNodeHref.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TreeNodeHref = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const constants_1 = require("../../../constants");
+const styles_module_scss_1 = __importDefault(require('../styles.module.css'));
+exports.TreeNodeHref = (0, react_1.forwardRef)(({ href, children, onClick }, ref) => href ? ((0, jsx_runtime_1.jsx)("a", { href: href, className: styles_module_scss_1.default.treeNodeLink, onClick: onClick, "data-test-id": constants_1.TEST_IDS.link, tabIndex: -2, ref: ref, children: children })) : (children));
+exports.TreeNodeHref.displayName = 'TreeNodeHref';

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

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

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

@@ -0,0 +1,18 @@
+"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("./TreeNodeActions"), exports);
+__exportStar(require("./TreeNodeHref"), exports);

package/dist/cjs/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/cjs/helperComponents/TreeNode/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CONTROL_SIZE_BY_TREE_SIZE = void 0;
+// Size-ось контролов (Checkbox / Radio / Spinner) короче, чем у Tree:
+// 's'-строка → 'xs'-контрол, 'm'/'l' → 's'.
+exports.CONTROL_SIZE_BY_TREE_SIZE = {
+    s: 'xs',
+    m: 's',
+    l: 's',
+};

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

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

package/dist/cjs/helperComponents/TreeNode/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("./TreeNode"), exports);