@cloud-ru/ds-tree 1.0.0

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,53 @@
+import { extractSupportProps, WithSupportProps } from '@cloud-ru/ds-utils';
+import cn from 'classnames';
+
+import { SIZE } from '../../constants';
+import { TreeContextProvider } from '../../contexts/TreeContext';
+import { TreeItem } from '../../helperComponents';
+import { TreeBaseProps } from '../../types';
+import styles from './styles.module.scss';
+import { extractSelectableProps } from './utils';
+
+export type TreeProps = WithSupportProps<TreeBaseProps>;
+
+export function Tree({
+  data,
+  onNodeClick,
+  onExpand,
+  expandedNodes,
+  nodeActions,
+  parentActions,
+  onDataLoad,
+  showLines = true,
+  showIcons = true,
+  size = SIZE.M,
+  titleMaxLines = 1,
+  className,
+  ...rest
+}: TreeProps) {
+  return (
+    <div className={cn(styles.tree, className)} role='tree' data-size={size} {...extractSupportProps(rest)}>
+      <TreeContextProvider
+        value={{
+          showToggle: rest.selectionMode === 'single' && rest.showToggle,
+          data,
+          expandedNodes,
+          onNodeClick,
+          onExpand,
+          nodeActions,
+          parentActions,
+          onDataLoad,
+          showLines,
+          showIcons,
+          size,
+          titleMaxLines,
+          ...extractSelectableProps(rest),
+        }}
+      >
+        {data.map((node, index) => (
+          <TreeItem key={node.id} node={node} tabIndexAvailable={index === 0 || index === data.length - 1} />
+        ))}
+      </TreeContextProvider>
+    </div>
+  );
+}

package/src/components/Tree/index.ts

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

package/src/components/Tree/styles.module.scss

@@ -0,0 +1,22 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+@use '@cloud-ru/ds-figma-variables/build/scss/components/tree.module' as tree;
+
+$sizes: ('s', 'm', 'l');
+
+.tree {
+  // Корневого clip'а нет: он резал elevated-тень и `:focus-visible` outline
+  // у kebab'а на правом краю строки. Контроль ширины держится через
+  // `min-width: 0` + TruncateString на title — глубоко вложенные ряды
+  // обрезают заголовок с «…», kebab остаётся видимым на правом краю строки.
+  box-sizing: border-box;
+  min-width: 0;
+  height: 100%;
+
+  // --tree-line-width на корне: trunk и L-bend должны совпасть с центром шеврона.
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      --tree-line-width: #{base.simple-var(tree.$tree, 'anatomy', 'size', $size, 'treeItem', 'centeredWrapper', 'width')};
+      --tree-item-gap: #{base.simple-var(tree.$tree, 'anatomy', 'size', $size, 'treeItem', 'gap')};
+    }
+  }
+}

package/src/components/Tree/utils.ts

@@ -0,0 +1,16 @@
+import { SELECTION_MODE } from '../../constants';
+import { TreeBaseProps, TreeMultiSelect, TreeSingleSelect, TreeView } from '../../types';
+
+type SelectableProps<T> = Pick<T, Extract<keyof T, 'selectionMode' | 'selected' | 'onSelect'>>;
+
+// Сужение discriminated union к конкретному варианту: TS не выводит ветку из switch-case по
+// дженерик-проп `selectionMode`, поэтому возвращаем строго типизированный Pick через `as`.
+export function extractSelectableProps({ selectionMode, selected, onSelect }: SelectableProps<TreeBaseProps>) {
+  if (selectionMode === SELECTION_MODE.Single) {
+    return { selectionMode, selected, onSelect } as SelectableProps<TreeSingleSelect>;
+  }
+  if (selectionMode === SELECTION_MODE.Multiple) {
+    return { selectionMode, selected, onSelect } as SelectableProps<TreeMultiSelect>;
+  }
+  return {} as SelectableProps<TreeView>;
+}

package/src/components/index.ts

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

package/src/constants.ts

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

package/src/contexts/TreeContext.tsx

@@ -0,0 +1,189 @@
+import { HierarchicalSelectionHandlers, useHierarchicalSelection, useUncontrolledProp } from '@cloud-ru/ds-utils';
+import { createContext, Dispatch, ReactNode, SetStateAction, useCallback, useContext, useMemo, useState } from 'react';
+
+import { SELECTION_MODE } from '../constants';
+import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../helpers';
+import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
+
+const EMPTY_EXPANDED: TreeNodeId[] = [];
+
+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 const TreeContext = createContext<TreeContextProps>({
+  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 }: TreeContextProviderProps) {
+  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<TreeNodeId[], NonNullable<TreeBaseProps['onExpand']>>(
+    value.expandedNodes,
+    value.expandedNodes ?? EMPTY_EXPANDED,
+    onExpandProp,
+  );
+
+  const onExpand = useCallback<TreeContextProps['onExpand']>(
+    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<typeof value.selected>(value.selected, [], onSelectProp);
+
+  const onSelect = useCallback<TreeContextProps['onSelect']>(
+    (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<string[]>((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<number>();
+
+  const focusedNodeId = focusIndex !== undefined ? focusableNodeIds[focusIndex] : undefined;
+
+  const setFocusPosition = useCallback(
+    (nodeId: TreeNodeId) => {
+      const newFocusIndex = focusableNodeIds.indexOf(nodeId);
+      setFocusIndex(newFocusIndex >= 0 ? newFocusIndex : undefined);
+    },
+    [focusableNodeIds],
+  );
+
+  const resetFocusPosition = useCallback(() => setFocusIndex(undefined), []);
+
+  const onNodeClick = useCallback<OnNodeClick>(
+    (node, e) => {
+      if (node.disabled) {
+        return;
+      }
+
+      if (isSingleSelect) {
+        onSelect(node);
+      }
+
+      node.onClick?.(e) || onNodeClickProp?.(node, e);
+    },
+    [isSingleSelect, onSelect, onNodeClickProp],
+  );
+
+  return (
+    <TreeContext.Provider
+      value={{
+        ...props,
+        data,
+        selected: selectedNodes,
+        isSingleSelect,
+        isMultiSelect,
+        isSelectable,
+        expandedNodes,
+        onExpand,
+        onSelect,
+        onNodeClick,
+        focusedNodeId,
+        setFocusPosition,
+        resetFocusPosition,
+        setFocusIndex,
+        focusableNodeIds,
+        getSelectionState,
+        toggleSelection,
+      }}
+    >
+      {children}
+    </TreeContext.Provider>
+  );
+}
+
+export const useTreeContext = () => useContext(TreeContext);

package/src/helperComponents/ExpandableTreeNode/ExpandableTreeNode.tsx

@@ -0,0 +1,156 @@
+import { forwardRef, KeyboardEventHandler, useEffect, useRef, useState } from 'react';
+import useTransition from 'react-transition-state';
+
+import { TEST_IDS, TRANSITION_TIMING } from '../../constants';
+import { useTreeContext } from '../../contexts/TreeContext';
+import { ParentNode } from '../../types';
+import { TreeItem } from '../TreeItem';
+import { TreeLine } from '../TreeLine';
+import { TreeNode, TreeNodeProps } from '../TreeNode';
+import styles from './styles.module.scss';
+
+type ExpandableTreeNodeProps = {
+  node: TreeNodeProps;
+  parentNode?: ParentNode & { parentNode?: ParentNode };
+  tabIndexAvailable?: boolean;
+};
+
+export const ExpandableTreeNode = forwardRef<HTMLDivElement, ExpandableTreeNodeProps>(
+  ({ 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<(HTMLDivElement | null)[]>([]);
+    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: KeyboardEventHandler<HTMLElement> = e => {
+      if (!isExpandable) return;
+
+      switch (e.key) {
+        case 'ArrowRight': {
+          if (!isExpanded) {
+            toggleExpand();
+          }
+          return;
+        }
+        case 'ArrowLeft': {
+          if (isExpanded) {
+            toggleExpand();
+          }
+          return;
+        }
+        default:
+          return;
+      }
+    };
+
+    return (
+      <div
+        className={styles.expandableTreeNode}
+        data-test-id={dataTestId}
+        data-expandable={Boolean(node.nested) || undefined}
+        data-disabled={node.disabled || undefined}
+        ref={ref}
+      >
+        <TreeNode
+          {...node}
+          loading={loading}
+          parentNode={parentNode}
+          onChevronClick={toggleExpand}
+          onKeyDown={handleKeyDown}
+          tabIndexAvailable={tabIndexAvailable}
+        />
+
+        {node.nested && (
+          <div
+            className={styles.expandableWrap}
+            data-expanded={isExpanded || undefined}
+            data-test-id={TEST_IDS.expandable}
+          >
+            {showContent && (
+              <div className={styles.expandableContent} data-test-id={TEST_IDS.expandableContent}>
+                <TreeLine
+                  visible={showLines}
+                  data-test-id={TEST_IDS.line}
+                  style={{ height: `calc(100% - ${lastItemHeight}px)` }}
+                />
+
+                <div className={styles.expandableNested}>
+                  {node.nested.map((nestedNode, index) => {
+                    const parent: ParentNode = { id: node.id, nested: node.nested, parentNode };
+
+                    return (
+                      <TreeItem
+                        ref={el => (childrenRefs.current[index] = el)}
+                        key={nestedNode.id}
+                        node={{ ...nestedNode, disabled: node.disabled || nestedNode.disabled }}
+                        parentNode={parent}
+                      />
+                    );
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/helperComponents/ExpandableTreeNode/index.ts

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

package/src/helperComponents/ExpandableTreeNode/styles.module.scss

@@ -0,0 +1,55 @@
+.expandableTreeNode {
+  position: relative;
+  width: 100%;
+}
+
+.expandableContent {
+  // overflow-y клиппирует во время slide-анимации высоты; -x оставляем visible,
+  // иначе срезается тень elevated-кнопок (kebab-actions) по правому краю.
+  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;
+
+  &[data-expanded='true'] {
+    overflow: unset;
+    grid-template-rows: 1fr;
+
+    .expandableContent {
+      // После раскрытия снимаем вертикальный клип — иначе режет focus-outline
+      // и shadow elevated-кнопок у вложенных строк (тень/outline выходит за bbox).
+      overflow: unset;
+      visibility: visible;
+    }
+  }
+}
+
+.expandableNested {
+  // Deep-leaf клипуется корневым `.tree { overflow-x: hidden }`. Локальный
+  // `overflow-x: clip` сюда ставить нельзя: горизонтальный L-bend каждой
+  // строки — `::after` псевдоэлемент, который выезжает влево на
+  // `--tree-line-width / 2 + gap`, чтобы дотянуться до trunk'а в соседнем
+  // `.expandableContent`-столбце. Клип режет эту левую часть → L-bend
+  // визуально не доходит до trunk'а.
+  width: 100%;
+  min-width: 0;
+}
+

package/src/helperComponents/TreeItem/TreeItem.tsx

@@ -0,0 +1,26 @@
+import { forwardRef } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import { ParentNode, TreeNodeProps } from '../../types';
+import { ExpandableTreeNode } from '../ExpandableTreeNode';
+import { TreeNode } from '../TreeNode';
+
+type TreeItemProps = {
+  node: TreeNodeProps;
+  parentNode?: ParentNode;
+  tabIndexAvailable?: boolean;
+};
+
+export const TreeItem = forwardRef<HTMLDivElement, TreeItemProps>(({ node, tabIndexAvailable, parentNode }, ref) => {
+  const dataTestId = node['data-test-id'] || TEST_IDS.node;
+
+  const nodeProps: TreeNodeProps = { ...node, 'data-test-id': dataTestId };
+
+  if (node.nested) {
+    return (
+      <ExpandableTreeNode node={nodeProps} tabIndexAvailable={tabIndexAvailable} parentNode={parentNode} ref={ref} />
+    );
+  }
+
+  return <TreeNode {...nodeProps} tabIndexAvailable={tabIndexAvailable} parentNode={parentNode} ref={ref} />;
+});

package/src/helperComponents/TreeItem/index.ts

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

package/src/helperComponents/TreeLine/TreeLine.tsx

@@ -0,0 +1,27 @@
+import cn from 'classnames';
+import { CSSProperties } from 'react';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type TreeLineProps = {
+  className?: string;
+  /** Доп. инлайн-стили для контейнера (height/width передаются здесь, а не отдельными пропами). */
+  style?: CSSProperties;
+  halfWidth?: boolean;
+  visible?: boolean;
+  horizontal?: boolean;
+};
+
+export function TreeLine({ className, style, halfWidth, horizontal, visible }: TreeLineProps) {
+  return (
+    <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/src/helperComponents/TreeLine/index.ts

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

package/src/helperComponents/TreeLine/styles.module.scss

@@ -0,0 +1,58 @@
+@use '@cloud-ru/ds-figma-variables/build/scss/styles/styles.module' as base;
+
+// Ширина дорожки = ширина шевронной колонки; прокидывается через --tree-line-width от [data-size].
+$line-width: var(--tree-line-width, #{base.$sn-density-size-icon-s});
+
+.treeLine {
+  pointer-events: none;
+
+  position: relative;
+
+  flex-shrink: 0;
+
+  width: $line-width;
+
+  visibility: hidden;
+
+  &[data-visible] {
+    visibility: visible;
+
+    &::after {
+      content: '';
+
+      position: absolute;
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+
+      width: base.$sn-primitive-strokeWeight-strokeRegular;
+      height: 100%;
+
+      // Мастер levelLine/lineWrapper (7098:16549): #bcc3dc α0.35 = available-borderColor,
+      // как все линии-разделители DS; neutral-decor (#e3e5ed опак) — расхождение.
+      background: base.$sn-theme-color-available-borderColor;
+    }
+  }
+
+  &[data-horizontal] {
+    box-sizing: border-box;
+
+    &::after {
+      top: 50%;
+      left: calc(-50% - var(--tree-item-gap, 0px));
+      transform: translateY(-50%);
+
+      width: calc(150% + var(--tree-item-gap, 0px));
+      height: base.$sn-primitive-strokeWeight-strokeRegular;
+    }
+
+    &[data-half-width] {
+      width: 0;
+
+      &::after {
+        left: calc(0px - #{$line-width} / 2 - var(--tree-item-gap, 0px));
+        width: calc(#{$line-width} / 2 + var(--tree-item-gap, 0px));
+      }
+    }
+  }
+}