@snack-uikit/tree 0.1.8-preview-85c5f47b.0

package/dist/helpers.js

@@ -0,0 +1,78 @@
+function findAllChildNodeIds(nodes) {
+    var _a;
+    const stack = [...nodes];
+    const ids = [];
+    let node;
+    while ((node = stack.pop())) {
+        if (!node.disabled) {
+            ids.push(node.id);
+            if ((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) {
+                stack.push(...node.nested);
+            }
+        }
+    }
+    return ids;
+}
+export function checkNestedNodesSelection(nodes, selectedKeys) {
+    const allIds = findAllChildNodeIds(nodes);
+    const selected = allIds.filter(id => selectedKeys.includes(id));
+    const someSelected = selected.length > 0;
+    const allSelected = someSelected && allIds.length === selected.length;
+    return {
+        someSelected: !allSelected && someSelected,
+        allSelected,
+    };
+}
+export function findAllExpandedChildNodeIds(nodes, expandedNodes) {
+    var _a;
+    const stack = [...nodes];
+    const ids = [];
+    let node;
+    while ((node = stack.shift())) {
+        ids.push(node.id);
+        if (((_a = node.nested) === null || _a === void 0 ? void 0 : _a.length) && expandedNodes.includes(node.id)) {
+            stack.unshift(...node.nested);
+        }
+    }
+    return ids;
+}
+export function lookupTreeForSelectedNodes({ node, selectedNodes, parentNode, }) {
+    var _a;
+    const { nested } = node;
+    const childSelection = (nested === null || nested === void 0 ? void 0 : nested.length) ? checkNestedNodesSelection(nested, selectedNodes) : undefined;
+    const isSelected = childSelection
+        ? childSelection.someSelected || childSelection.allSelected
+        : selectedNodes.includes(node.id);
+    let updatedSelectedNodes = [];
+    const allIdsFromNode = [node.id];
+    if (nested === null || nested === void 0 ? void 0 : nested.length) {
+        allIdsFromNode.push(...findAllChildNodeIds(nested));
+    }
+    if (isSelected) {
+        updatedSelectedNodes = selectedNodes.filter(id => !allIdsFromNode.includes(id));
+    }
+    else {
+        updatedSelectedNodes = selectedNodes.concat(allIdsFromNode);
+    }
+    if (parentNode) {
+        let parent = parentNode;
+        while (parent) {
+            if ((_a = parent.nested) === null || _a === void 0 ? void 0 : _a.length) {
+                const parentNestedSelection = checkNestedNodesSelection(parent.nested, updatedSelectedNodes);
+                if (isSelected) {
+                    if (parentNestedSelection.allSelected || parentNestedSelection.someSelected) {
+                        const parentIdIndex = updatedSelectedNodes.findIndex(id => id === (parent === null || parent === void 0 ? void 0 : parent.id));
+                        if (parentIdIndex > -1) {
+                            updatedSelectedNodes.splice(parentIdIndex, 1);
+                        }
+                    }
+                }
+                else if (!isSelected && parentNestedSelection.allSelected) {
+                    updatedSelectedNodes.push(parent.id);
+                }
+            }
+            parent = parent.parentNode;
+        }
+    }
+    return updatedSelectedNodes;
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './components';
+export type { OnNodeClick, TreeNodeId, TreeNodeProps } from './types';

package/dist/index.js

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

package/dist/types.d.ts

@@ -0,0 +1,86 @@
+import { MouseEvent, MouseEventHandler, ReactNode } from 'react';
+import { ItemSingleProps } from '@snack-uikit/droplist';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { SelectionMode } from './constants';
+export type TreeNodeId = string;
+export type BaseTreeNode = WithSupportProps<{
+    /** Идентификатор элемента */
+    id: TreeNodeId;
+    /** Имя элемента */
+    title: string;
+    /** Является ли элемент деактивированным */
+    disabled?: boolean;
+    /** Обработчик клика по элементу */
+    onClick?: MouseEventHandler;
+    className?: 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)[];
+};
+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` - множественный выбор
+     */
+    selectionMode?: SelectionMode;
+    /** Обработчик клика по элементу дерева */
+    onNodeClick?: OnNodeClick;
+    /** Состояние для раскрытых элементов */
+    expandedNodes?: TreeNodeId[];
+    /** Колбэк при раскрытии/закрытии элементов */
+    onExpand?(expandedKeys: TreeNodeId[], nodeId: TreeNodeId): void;
+    /** Состояние для выбранных элементов */
+    selected?: TreeNodeId[] | TreeNodeId;
+    /** Колбэк для асинхронной загрузки данных при раскрытии дерева */
+    onDataLoad?(node: TreeNodeProps): Promise<boolean | unknown>;
+    /** Дополнительные действия для элемента-родителя */
+    parentActions?(node: TreeNodeProps): ItemSingleProps[];
+    /** Дополнительные действия для элемента-потомка */
+    nodeActions?(node: TreeNodeProps): ItemSingleProps[];
+    /** Флаг отвечающий за отображение линий вложенности */
+    showLines?: boolean;
+    className?: string;
+};
+export type TreeSingleSelect = Omit<TreeCommonProps, 'selected'> & {
+    selectionMode: SelectionMode.Single;
+    /** Состояние для выбраного элемента */
+    /** <br> - При <strong>selectionMode</strong>=`Single` - принимает строку */
+    selected?: TreeNodeId;
+    /** <br> - При <strong>selectionMode</strong>=`Single` - возвращает строку */
+    onSelect?(selectedKey: TreeNodeId, node: TreeNodeProps): void;
+};
+export type TreeMultiSelect = Omit<TreeCommonProps, 'selected'> & {
+    selectionMode: SelectionMode.Multi;
+    /**
+     * Состояние для выбраных элементов:
+     * <br> - При <strong>selectionMode</strong>=`Multi` - принимает массив строк
+     */
+    selected?: TreeNodeId[];
+    /**
+     * Колбэк при изменении выбраных элементов:
+     * <br> - При <strong>selectionMode</strong>=`Multi` - возвращает массив строк
+     */
+    onSelect?(selectedKeys: TreeNodeId[], node: TreeNodeProps): void;
+};
+export type TreeBaseProps = TreeMultiSelect | TreeSingleSelect;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@snack-uikit/tree",
+  "publishConfig": {
+    "access": "public"
+  },
+  "title": "Tree",
+  "version": "0.1.8-preview-85c5f47b.0",
+  "sideEffects": [
+    "*.css",
+    "*.woff",
+    "*.woff2"
+  ],
+  "description": "",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/tree",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloud-ru-tech/snack-uikit.git",
+    "directory": "packages/tree"
+  },
+  "author": "Белов Алексей <anbelov@cloud.ru>",
+  "contributors": [
+    "Белов Алексей <anbelov@cloud.ru>"
+  ],
+  "files": [
+    "dist",
+    "src",
+    "./CHANGELOG.md",
+    "./LICENSE"
+  ],
+  "license": "Apache-2.0",
+  "scripts": {},
+  "dependencies": {
+    "@snack-uikit/button": "0.13.7-preview-85c5f47b.0",
+    "@snack-uikit/droplist": "0.10.13-preview-85c5f47b.0",
+    "@snack-uikit/icons": "0.18.2-preview-85c5f47b.0",
+    "@snack-uikit/toggles": "0.7.1-preview-85c5f47b.0",
+    "@snack-uikit/truncate-string": "0.2.17-preview-85c5f47b.0",
+    "@snack-uikit/typography": "0.4.5-preview-85c5f47b.0",
+    "@snack-uikit/utils": "2.0.2-preview-85c5f47b.0",
+    "classnames": "2.3.2",
+    "react-transition-state": "2.1.1",
+    "uncontrollable": "8.0.4"
+  },
+  "gitHead": "6a7eef41d780d945f64f791448eaa72b9e0ae72d"
+}

package/src/components/Tree/Tree.tsx

@@ -0,0 +1,55 @@
+import cn from 'classnames';
+
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { SelectionMode } from '../../constants';
+import { TreeContextProvider } from '../../contexts/TreeContext';
+import { TreeItem } from '../../helperComponents';
+import { TreeBaseProps, TreeMultiSelect, TreeNodeId, TreeSingleSelect } from '../../types';
+import styles from './styles.module.scss';
+
+export type TreeProps = WithSupportProps<TreeBaseProps>;
+
+export function Tree({
+  data,
+  selected,
+  selectionMode,
+  onSelect,
+  onNodeClick,
+  onExpand,
+  expandedNodes,
+  nodeActions,
+  parentActions,
+  onDataLoad,
+  showLines = true,
+  className,
+  ...rest
+}: TreeProps) {
+  return (
+    <div className={cn(styles.tree, className)} role='tree' {...extractSupportProps(rest)}>
+      <TreeContextProvider
+        value={{
+          data,
+          selected: selected as typeof SelectionMode extends SelectionMode.Single ? TreeNodeId : TreeNodeId[],
+          selectionMode: selectionMode as typeof selected extends string ? SelectionMode.Single : SelectionMode.Multi,
+          onSelect: onSelect as typeof SelectionMode extends SelectionMode.Single
+            ? TreeSingleSelect['onSelect']
+            : TreeMultiSelect['onSelect'],
+          expandedNodes,
+          onNodeClick,
+          onExpand,
+          nodeActions,
+          parentActions,
+          onDataLoad,
+          showLines,
+        }}
+      >
+        {data.map((node, index) => (
+          <TreeItem key={node.id} node={node} tabIndexAvailable={index === 0 || index === data.length - 1} />
+        ))}
+      </TreeContextProvider>
+    </div>
+  );
+}
+
+Tree.selectionModes = SelectionMode;

package/src/components/Tree/index.ts

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

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

@@ -0,0 +1,4 @@
+.tree {
+  box-sizing: border-box;
+  height: 100%;
+}

package/src/components/index.ts

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

package/src/constants.ts

@@ -0,0 +1,22 @@
+export enum SelectionMode {
+  Single = 'single',
+  Multi = 'multi',
+}
+
+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',
+  icon: 'tree__node__icon',
+  title: 'tree__node__title',
+  droplistTrigger: 'tree__node__droplist-trigger',
+  droplistAction: 'tree__node__droplist-action',
+  expandable: 'tree__node__expandable',
+  expandableContent: 'tree__node__expandable-content',
+};

package/src/contexts/TreeContext.tsx

@@ -0,0 +1,165 @@
+import { createContext, Dispatch, ReactNode, SetStateAction, useCallback, useContext, useMemo, useState } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { SelectionMode } from '../constants';
+import { findAllExpandedChildNodeIds, lookupTreeForSelectedNodes } from '../helpers';
+import { OnNodeClick, ParentNode, TreeBaseProps, TreeNodeId, TreeNodeProps } from '../types';
+
+type TreeContextProps = Omit<TreeBaseProps, '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;
+  focusedNodeId?: TreeNodeId;
+  setFocusPosition(id: TreeNodeId): void;
+  resetFocusPosition(): void;
+  setFocusIndex: Dispatch<SetStateAction<number | undefined>>;
+  focusableNodeIds: TreeNodeId[];
+};
+
+type TreeContextProviderProps = {
+  children: ReactNode;
+  value: TreeBaseProps;
+};
+
+export const TreeContext = createContext<TreeContextProps>({
+  data: [],
+  selected: undefined,
+  onSelect() {},
+  expandedNodes: [],
+  onExpand() {
+    return new Promise(resolve => resolve);
+  },
+  onNodeClick() {},
+  setFocusPosition() {},
+  setFocusIndex() {},
+  resetFocusPosition() {},
+  focusableNodeIds: [],
+  isMultiSelect: false,
+  isSingleSelect: false,
+});
+
+export function TreeContextProvider({ children, value }: TreeContextProviderProps) {
+  const {
+    onNodeClick: onNodeClickProp,
+    onExpand: onExpandProp,
+    onSelect: onSelectProp,
+    selectionMode,
+    data,
+    ...props
+  } = value;
+
+  const isMultiSelect = selectionMode === SelectionMode.Multi;
+  const isSingleSelect = selectionMode === SelectionMode.Single;
+
+  const [expandedNodes, onExpandHandler] = useUncontrolledProp<TreeNodeId[]>(
+    value.expandedNodes,
+    value.expandedNodes || [],
+    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 (node.disabled) return;
+
+      if (isSingleSelect) {
+        onSelectHandler(node.id, node);
+        return;
+      }
+
+      if (Array.isArray(selectedNodes)) {
+        const updatedSelectedNodes = lookupTreeForSelectedNodes({ node, parentNode, selectedNodes });
+
+        onSelectHandler(updatedSelectedNodes, node);
+      }
+    },
+    [isSingleSelect, onSelectHandler, selectedNodes],
+  );
+
+  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,
+        expandedNodes,
+        onExpand,
+        onSelect,
+        onNodeClick,
+        focusedNodeId,
+        setFocusPosition,
+        resetFocusPosition,
+        setFocusIndex,
+        focusableNodeIds,
+      }}
+    >
+      {children}
+    </TreeContext.Provider>
+  );
+}
+
+export const useTreeContext = () => useContext(TreeContext);

package/src/helperComponents/ExpandableTreeNode/ExpandableTreeNode.tsx

@@ -0,0 +1,126 @@
+import { KeyboardEventHandler, useEffect, useMemo, 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 function ExpandableTreeNode({
+  node: { 'data-test-id': dataTestId, ...node },
+  parentNode,
+  tabIndexAvailable,
+}: ExpandableTreeNodeProps) {
+  const { expandedNodes, onExpand, onDataLoad, showLines } = useTreeContext();
+
+  const isExpandable = Boolean(node.nested);
+  const isExpanded = expandedNodes?.includes(node.id) || false;
+
+  const [isLoading, 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 isLineHalfHeight = useMemo(() => {
+    if (!node.nested?.length) return false;
+
+    return !node.nested.at(-1)?.nested;
+  }, [node.nested]);
+
+  useEffect(() => {
+    if (node.nested?.length && isExpanded && state.status === 'exited') {
+      toggle(true);
+    }
+  }, [isExpanded, node.nested, state.status]);
+
+  const toggleExpand = async () => {
+    if (node.disabled) return;
+
+    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}
+    >
+      <TreeNode
+        {...node}
+        isLoading={isLoading}
+        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} halfHeight={isLineHalfHeight} data-test-id={TEST_IDS.line} />
+
+              <div className={styles.expandableNested}>
+                {node.nested.map(nestedNode => {
+                  const parent: ParentNode = { id: node.id, nested: node.nested, parentNode };
+
+                  return <TreeItem key={nestedNode.id} node={nestedNode} 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,43 @@
+@import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-tree';
+
+.expandableTreeNode {
+  position: relative;
+  width: 100%;
+}
+
+.expandableContent {
+  overflow: hidden;
+  display: flex;
+
+  box-sizing: border-box;
+  min-height: 0;
+
+  visibility: hidden;
+
+  transition: visibility 200ms;
+}
+
+.expandableWrap {
+  overflow: 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 {
+      visibility: visible;
+    }
+  }
+}
+
+.expandableNested {
+  width: 100%;
+  min-width: 0;
+}

package/src/helperComponents/TreeItem/TreeItem.tsx

@@ -0,0 +1,22 @@
+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 function TreeItem({ node, tabIndexAvailable, parentNode }: TreeItemProps) {
+  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} />;
+  }
+
+  return <TreeNode {...nodeProps} tabIndexAvailable={tabIndexAvailable} parentNode={parentNode} />;
+}

package/src/helperComponents/TreeItem/index.ts

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