@cloud-ru/ds-tree 1.0.0

package/src/helperComponents/TreeNode/TreeNode.tsx

@@ -0,0 +1,389 @@
+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 { FocusEvent, forwardRef, KeyboardEventHandler, MouseEvent, useEffect, useMemo, useRef, useState } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { useTreeContext } from '../../contexts/TreeContext';
+import { checkNestedNodesSelection, findAllChildNodeIds } from '../../helpers';
+import { TreeNodeProps } from '../../types';
+import { TreeLine } from '../TreeLine';
+import { TreeNodeActions, TreeNodeHref } from './components';
+import { CONTROL_SIZE_BY_TREE_SIZE } from './constants';
+import styles from './styles.module.scss';
+import { TreeNodeComponentProps } from './types';
+import { stopPropagationClick } from './utils';
+
+export type { TreeNodeProps };
+
+export const TreeNode = forwardRef<HTMLDivElement, TreeNodeComponentProps>(
+  (
+    {
+      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<HTMLDivElement | null>(null);
+
+    const anchorRef = useRef<HTMLAnchorElement | null>(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 ?? <FolderOpenSVG />) : (collapsedIconProp ?? <FolderSVG />);
+      }
+
+      return iconProp ?? <FileSVG />;
+    }, [showIcons, isExpandable, isExpanded, iconProp, expandedIconProp, collapsedIconProp]);
+
+    const handleClick: TreeNodeProps['onClick'] = e => {
+      onNodeClick(
+        {
+          id,
+          title,
+          disabled,
+          nested,
+          onClick,
+          href,
+        },
+        e,
+      );
+    };
+
+    const handleAnchorClick = (e: MouseEvent<Element>) => {
+      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?: FocusEvent) => {
+      setFocusPosition(id);
+
+      if (!e) {
+        setFocusDroplistTrigger(false);
+        contentRef.current?.focus();
+      }
+    };
+
+    const handleBlurActions = () => {
+      if (isDroplistTriggerFocused && !isDroplistOpen) {
+        setFocusDroplistTrigger(false);
+
+        contentRef.current?.blur();
+      }
+    };
+
+    const handleKeyDown: KeyboardEventHandler<HTMLElement> = 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 (
+      <div
+        role='presentation'
+        className={cn(styles.treeNode, className)}
+        {...extractSupportProps(rest)}
+        data-node-id={id}
+        data-size={size}
+        ref={ref}
+      >
+        {parentNode && <TreeLine halfWidth horizontal visible={showLines} data-test-id={TEST_IDS.line} />}
+
+        <div className={styles.treeNodeExpandButtonWrapper}>
+          {isExpandable ? (
+            <>
+              <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'}
+              >
+                <span
+                  className={styles.treeNodeExpandButtonStateLayer}
+                  aria-hidden
+                  data-state='emptyNeutralOnBackground'
+                />
+                {loading ? <Spinner size={CONTROL_SIZE_BY_TREE_SIZE[size]} /> : <ChevronRightSVG />}
+              </button>
+              <TreeLine visible={isExpanded && showLines} />
+            </>
+          ) : (
+            <div className={styles.treeNodeExpandButtonSpacer} aria-hidden />
+          )}
+        </div>
+
+        <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}
+        >
+          <span
+            className={styles.stateLayer}
+            aria-hidden
+            data-state={isSelected && !isMultiSelect ? 'activatedOnBackground' : 'emptyNeutralOnBackground'}
+          />
+          {(isMultiSelect || showToggle) && (
+            <div className={styles.treeNodeCheckboxWrap}>
+              {isMultiSelect && (
+                <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 && (
+                <Radio
+                  size={CONTROL_SIZE_BY_TREE_SIZE[size]}
+                  checked={isSelected}
+                  disabled={disabled}
+                  data-test-id={TEST_IDS.radio}
+                  tabIndex={-1}
+                />
+              )}
+            </div>
+          )}
+
+          {treeNodeIcon && (
+            <div className={styles.treeNodeIcon} data-test-id={TEST_IDS.icon}>
+              {treeNodeIcon}
+            </div>
+          )}
+
+          <Typography variant='body' size={size} as='div' className={styles.treeNodeTitle}>
+            <TreeNodeHref href={href} onClick={handleAnchorClick} ref={anchorRef}>
+              {typeof title === 'string' && (
+                <TruncateString text={title} maxLines={titleMaxLines} data-test-id={TEST_IDS.title} />
+              )}
+              {typeof title !== 'string' && title({ id, disabled, nested } as TreeNodeProps)}
+            </TreeNodeHref>
+          </Typography>
+
+          {getNodeActions && (
+            <TreeNodeActions
+              getNodeActions={getNodeActions}
+              node={{
+                id,
+                title,
+                disabled,
+                nested,
+              }}
+              focusNode={handleFocus}
+              onBlurActions={handleBlurActions}
+              isDroplistTriggerFocused={isDroplistTriggerFocused}
+              isDroplistOpen={isDroplistOpen}
+              setDroplistOpen={setDroplistOpen}
+              size={size}
+            />
+          )}
+        </div>
+      </div>
+    );
+  },
+);

package/src/helperComponents/TreeNode/components/TreeNodeActions.tsx

@@ -0,0 +1,129 @@
+import { Button } from '@cloud-ru/ds-button';
+import { KebabSVG } from '@cloud-ru/ds-icons/interface/system';
+import { Droplist, ItemProps } from '@cloud-ru/ds-list';
+import { Dispatch, KeyboardEventHandler, SetStateAction, useEffect, useRef } from 'react';
+
+import { TEST_IDS } from '../../../constants';
+import { Size, TreeNodeProps } from '../../../types';
+import styles from '../styles.module.scss';
+import { stopPropagationClick, stopPropagationFocus } from '../utils';
+
+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 function TreeNodeActions({
+  getNodeActions,
+  isDroplistTriggerFocused,
+  focusNode,
+  isDroplistOpen,
+  setDroplistOpen,
+  onBlurActions,
+  node,
+  size,
+}: TreeNodeActionsProps) {
+  const droplistActions = getNodeActions(node);
+
+  const localRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    if (localRef.current && isDroplistTriggerFocused) {
+      localRef.current.focus();
+    }
+  }, [isDroplistTriggerFocused, localRef]);
+
+  const handleKeyDown: KeyboardEventHandler<HTMLElement> = 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 (
+    <div
+      role='presentation'
+      className={styles.treeNodeActions}
+      data-focused={isDroplistTriggerFocused || undefined}
+      onClick={stopPropagationClick}
+      onKeyDown={handleKeyDown}
+      onFocus={stopPropagationFocus}
+    >
+      <Droplist
+        open={isDroplistOpen}
+        onOpenChange={open => {
+          setDroplistOpen(open);
+          // Закрытие дроплиста (по клику в пункт, ESC, outside-click) должно
+          // вернуть фокус на строку и снять `isDroplistTriggerFocused` —
+          // иначе kebab остаётся в visible-hover-состоянии. Tab и ArrowLeft
+          // уже делают это сами; для пути через `closeDroplistOnItemClick`
+          // ресет навешиваем здесь.
+          if (!open) {
+            focusNode();
+          }
+        }}
+        items={droplistActions}
+        closeDroplistOnItemClick
+        placement='bottom-end'
+        size={size}
+      >
+        <Button
+          view='elevated'
+          appearance='neutral'
+          size={size}
+          icon={<KebabSVG />}
+          onBlur={onBlurActions}
+          tabIndex={-1}
+          data-test-id={TEST_IDS.droplistTrigger}
+          innerRef={localRef}
+        />
+      </Droplist>
+    </div>
+  );
+}

package/src/helperComponents/TreeNode/components/TreeNodeHref.tsx

@@ -0,0 +1,29 @@
+import { forwardRef, MouseEventHandler, ReactNode } from 'react';
+
+import { TEST_IDS } from '../../../constants';
+import styles from '../styles.module.scss';
+
+export type TreeNodeHrefProps = {
+  href?: string;
+  children: ReactNode;
+  onClick?: MouseEventHandler<HTMLAnchorElement>;
+};
+
+export const TreeNodeHref = forwardRef<HTMLAnchorElement, TreeNodeHrefProps>(({ href, children, onClick }, ref) =>
+  href ? (
+    <a
+      href={href}
+      className={styles.treeNodeLink}
+      onClick={onClick}
+      data-test-id={TEST_IDS.link}
+      tabIndex={-2}
+      ref={ref}
+    >
+      {children}
+    </a>
+  ) : (
+    children
+  ),
+);
+
+TreeNodeHref.displayName = 'TreeNodeHref';

package/src/helperComponents/TreeNode/components/index.ts

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

package/src/helperComponents/TreeNode/constants.ts

@@ -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',
+} as const;

package/src/helperComponents/TreeNode/index.ts

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