rsuite 5.60.2 → 5.61.0

package/esm/Tree/hooks/useTreeWithChildren.d.ts

@@ -0,0 +1,14 @@
+import { TreeNode } from '../types';
+interface UseTreeWithChildrenOptions {
+    valueKey: string;
+    childrenKey: string;
+}
+/**
+ * Custom hook that provides functionality for managing a tree structure with children.
+ */
+export default function useTreeWithChildren<T extends TreeNode>(data: T[], options: UseTreeWithChildrenOptions): {
+    treeData: T[];
+    loadingNodeValues: never[];
+    appendChild: (node: any, getChildren: any) => void;
+};
+export {};

package/esm/Tree/hooks/useTreeWithChildren.js

@@ -0,0 +1,59 @@
+'use client';
+import { useState, useCallback, useEffect } from 'react';
+import shallowEqual from '../../utils/shallowEqual';
+import { findNodeOfTree } from '../../internals/Tree/utils';
+/**
+ * Custom hook that provides functionality for managing a tree structure with children.
+ */
+export default function useTreeWithChildren(data, options) {
+  var valueKey = options.valueKey,
+    childrenKey = options.childrenKey;
+  var _useState = useState([]),
+    loadingNodeValues = _useState[0],
+    setLoadingNodeValues = _useState[1];
+  var _useState2 = useState(data),
+    treeData = _useState2[0],
+    setTreeData = _useState2[1];
+  useEffect(function () {
+    setTreeData(data);
+  }, [data]);
+  var concatChildren = useCallback(function (treeNode, children) {
+    var value = treeNode[valueKey];
+    treeNode = findNodeOfTree(data, function (item) {
+      return value === item[valueKey];
+    });
+    treeNode[childrenKey] = children;
+    var newData = data.concat([]);
+    setTreeData(newData);
+    return newData;
+  }, [data, valueKey, childrenKey]);
+  var appendChild = useCallback(function (node, getChildren) {
+    setLoadingNodeValues(function (prev) {
+      return prev.concat(node[valueKey]);
+    });
+    var children = getChildren(node);
+    if (children instanceof Promise) {
+      children.then(function (res) {
+        var newData = concatChildren(node, res);
+        setTreeData(newData);
+        setLoadingNodeValues(function (prev) {
+          return prev.filter(function (item) {
+            return !shallowEqual(item, node[valueKey]);
+          });
+        });
+      });
+    } else {
+      setTreeData(concatChildren(node, children));
+      setLoadingNodeValues(function (prev) {
+        return prev.filter(function (item) {
+          return !shallowEqual(item, node[valueKey]);
+        });
+      });
+    }
+  }, [concatChildren, valueKey]);
+  return {
+    treeData: treeData,
+    loadingNodeValues: loadingNodeValues,
+    appendChild: appendChild
+  };
+}

package/esm/Tree/hooks/useVirtualizedTreeData.d.ts

@@ -0,0 +1,7 @@
+import type { TreeNode, TreeNodeMap } from '../types';
+declare function useVirtualizedTreeData(nodes: TreeNodeMap, data: TreeNode[], options: {
+    expandItemValues: (string | number)[];
+    cascade?: boolean;
+    searchKeyword?: string;
+}): () => TreeNode[];
+export default useVirtualizedTreeData;

package/esm/Tree/hooks/useVirtualizedTreeData.js

@@ -0,0 +1,77 @@
+'use client';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import { useCallback } from 'react';
+import intersection from 'lodash/intersection';
+import isUndefined from 'lodash/isUndefined';
+import { getNodeParentKeys } from '../utils/getNodeParentKeys';
+import { isSearching } from '../utils/isSearching';
+import { UNSAFE_flattenTree } from '../utils/flattenTree';
+import { getNodeCheckState } from '../../CheckTree/utils';
+import { useItemDataKeys } from '../TreeProvider';
+
+/**
+ * Determines whether a node should be shown based on the expanded state of its parent nodes.
+ */
+function shouldShowNodeByParentExpanded(expandItemValues, parentKeys) {
+  if (expandItemValues === void 0) {
+    expandItemValues = [];
+  }
+  if (parentKeys === void 0) {
+    parentKeys = [];
+  }
+  var intersectionKeys = intersection(expandItemValues, parentKeys);
+  if (intersectionKeys.length === parentKeys.length) {
+    return true;
+  }
+  return false;
+}
+function useVirtualizedTreeData(nodes, data, options) {
+  var _useItemDataKeys = useItemDataKeys(),
+    childrenKey = _useItemDataKeys.childrenKey,
+    valueKey = _useItemDataKeys.valueKey;
+  /**
+   * Formats the virtualized tree data.
+   */
+  return useCallback(function () {
+    var cascade = options.cascade,
+      searchKeyword = options.searchKeyword,
+      expandItemValues = options.expandItemValues;
+    return UNSAFE_flattenTree(data, childrenKey, function (node) {
+      var formatted = {};
+      var curNode = nodes === null || nodes === void 0 ? void 0 : nodes[node.refKey];
+      var parentKeys = getNodeParentKeys(nodes, curNode, valueKey);
+      /**
+       * When using virtualized,
+       * if the parent node is collapsed, the child nodes should be hidden
+       * avoid component height calculation errors
+       */
+      var visible = curNode !== null && curNode !== void 0 && curNode.parent ? shouldShowNodeByParentExpanded(expandItemValues, parentKeys) : true;
+
+      /**
+       * when searching, every node default expand
+       * the node's visible should follow the original state
+       */
+      if (isSearching(searchKeyword)) {
+        visible = node.visible;
+      }
+      if (curNode) {
+        var checkState = !isUndefined(cascade) ? getNodeCheckState(curNode, {
+          cascade: cascade,
+          nodes: nodes,
+          childrenKey: childrenKey
+        }) : undefined;
+        formatted = _extends({}, node, {
+          check: curNode.check,
+          uncheckable: curNode.uncheckable,
+          hasChildren: !!node[childrenKey],
+          layer: curNode.layer,
+          parent: curNode.parent,
+          checkState: checkState,
+          visible: visible
+        });
+      }
+      return formatted;
+    });
+  }, [childrenKey, data, nodes, options, valueKey]);
+}
+export default useVirtualizedTreeData;

package/esm/Tree/types.d.ts

@@ -0,0 +1,257 @@
+/// <reference types="react" />
+import type { CheckStateType } from '../utils/constants';
+import type { StandardProps } from '../@types/common';
+import type { ListProps } from '../internals/Windowing';
+/**
+ * Represents a single node in a tree.
+ */
+export interface TreeNode extends Record<string, any> {
+    /**
+     * Specifies whether the node is uncheckable.
+     */
+    uncheckable?: boolean;
+    /**
+     * The reference key of the node.
+     */
+    refKey?: string;
+    /**
+     * Specifies whether the node is checked.
+     */
+    check?: boolean;
+    /**
+     * The parent node of the current node.
+     */
+    parent?: TreeNode;
+    /**
+     * Specifies whether all child nodes are checked.
+     */
+    checkAll?: boolean;
+    /**
+     * Specifies whether the node is visible.
+     */
+    visible?: boolean;
+    /**
+     * Specifies whether the node is expanded.
+     */
+    expand?: boolean;
+    /**
+     * The layer of the node in the tree hierarchy.
+     */
+    layer?: number;
+    /**
+     * The label of the node.
+     */
+    label?: string | React.ReactNode;
+    /**
+     * The value of the node.
+     */
+    value?: string | number;
+    /**
+     * The property to group nodes by.
+     */
+    groupBy?: string;
+    /**
+     * The child nodes of the current node.
+     */
+    children?: TreeNode[];
+    /**
+     * Specifies whether the node has children.
+     */
+    hasChildren?: boolean;
+    /**
+     * The check state of the node.
+     */
+    checkState?: CheckStateType;
+}
+/**
+ * Represents a map of tree nodes.
+ */
+export interface TreeNodeMap {
+    [key: string]: TreeNode;
+}
+/**
+ * Tree Node Drag Type
+ */
+export declare enum TREE_NODE_DROP_POSITION {
+    DRAG_OVER = 0,
+    DRAG_OVER_TOP = 1,
+    DRAG_OVER_BOTTOM = 2
+}
+export interface DropData<T> {
+    /** drag node data */
+    dragNode: T;
+    /** dropNode data */
+    dropNode: T;
+    /** node drop position */
+    dropNodePosition: TREE_NODE_DROP_POSITION;
+    /** Update Data when drop node */
+    createUpdateDataFunction: (data: T[]) => T[];
+}
+/**
+ * Represents the drag-related props for the Tree component.
+ */
+export interface TreeDragProps<T = Record<string, any>> {
+    /**
+     * Specifies whether the node can be dragged.
+     */
+    draggable?: boolean;
+    /**
+     * Called when scrolling.
+     * @param event - The scroll event.
+     */
+    onScroll?: (event: React.SyntheticEvent) => void;
+    /**
+     * Called when the node drag starts.
+     * @param nodeData - The data associated with the dragged node.
+     * @param e - The drag event.
+     */
+    onDragStart?: (nodeData: T, e: React.DragEvent) => void;
+    /**
+     * Called when the node is dragged over.
+     * @param nodeData - The data associated with the dragged node.
+     * @param e - The drag event.
+     */
+    onDragEnter?: (nodeData: T, e: React.DragEvent) => void;
+    /**
+     * Called when the node is dragged over.
+     * @param nodeData - The data associated with the dragged node.
+     * @param e - The drag event.
+     */
+    onDragOver?: (nodeData: T, e: React.DragEvent) => void;
+    /**
+     * Called when the node is dragged out.
+     * @param nodeData - The data associated with the dragged node.
+     * @param e - The drag event.
+     */
+    onDragLeave?: (nodeData: T, e: React.DragEvent) => void;
+    /**
+     * Called when the node drag ends.
+     * @param nodeData - The data associated with the dragged node.
+     * @param e - The drag event.
+     */
+    onDragEnd?: (nodeData: T, e: React.DragEvent) => void;
+    /**
+     * Called when a node is dropped.
+     * @param dropData - The data associated with the dropped node.
+     * @param e - The drag event.
+     */
+    onDrop?: (dropData: DropData<T>, e: React.DragEvent) => void;
+}
+/**
+ * Represents the base props for the Tree component.
+ *
+ * @template V - The type of the value associated with each tree node.
+ * @template T - The type of the tree node.
+ */
+/**
+ * Represents the props for the Tree component.
+ */
+export interface TreeViewBaseProps<V = string | number, T = TreeNode> extends StandardProps {
+    /**
+     * The height of the tree.
+     */
+    height?: number;
+    /**
+     * Whether to display the search input box.
+     */
+    searchable?: boolean;
+    /**
+     * Whether to display an auxiliary line when the tree node is indented.
+     */
+    showIndentLine?: boolean;
+    /**
+     * Whether to use virtualized list.
+     */
+    virtualized?: boolean;
+    /**
+     * Props for the virtualized list.
+     */
+    listProps?: Partial<ListProps>;
+    /**
+     * The search keyword (controlled).
+     */
+    searchKeyword?: string;
+    /**
+     * The option values for the expand nodes with controlled.
+     */
+    expandItemValues?: any[];
+    /**
+     * Callback function for expanding tree nodes.
+     * @param expandItemValues - The values of the expanded nodes.
+     * @param activeNode - The currently active node.
+     * @param concat - A function to concatenate data and children.
+     */
+    onExpand?: (expandItemValues: T[], activeNode: T, concat: (data: T[], children: T[]) => T[]) => void;
+    /**
+     * Callback function after selecting a tree node.
+     * @param activeNode - The currently active node.
+     * @param value - The value of the selected node.
+     * @param event - The event object.
+     */
+    onSelect?: (activeNode: T, value: V, event: React.SyntheticEvent) => void;
+    /**
+     * Callback when a tree item is clicked.
+     * @param item - The clicked tree item.
+     * @param path - The path of the clicked item.
+     */
+    onSelectItem?: (item: T, path: T[]) => void;
+    /**
+     * Callback fired when searching.
+     * @param searchKeyword - The search keyword.
+     * @param event - The event object.
+     */
+    onSearch?: (searchKeyword: string, event: React.SyntheticEvent) => void;
+    /**
+     * Callback fired when cleaning.
+     * @param event - The event object.
+     */
+    onClean?: (event: React.SyntheticEvent) => void;
+    /**
+     * Custom search rules.
+     * @param keyword - The search keyword.
+     * @param label - The label of the tree item.
+     * @param item - The tree item.
+     * @returns Whether the item matches the search criteria.
+     */
+    searchBy?: (keyword: string, label: React.ReactNode, item: any) => boolean;
+    /**
+     * Callback function called after the value has been changed.
+     * @param value - The new value.
+     * @param event - The event object.
+     */
+    onChange?: (value: V, event: React.SyntheticEvent) => void;
+}
+export interface TreeExtraProps<T = TreeNode> {
+    /**
+     * Whether to expand all nodes by default.
+     */
+    defaultExpandAll?: boolean;
+    /**
+     * The option values for the expand nodes by default.
+     */
+    defaultExpandItemValues?: any[];
+    /**
+     * Function to load node children data asynchronously.
+     * @param activeNode - The currently active node.
+     * @returns The children of the active node.
+     */
+    getChildren?: (activeNode: T) => T[] | Promise<T[]>;
+    /**
+     * Custom render function for the tree.
+     * @param menu - The menu to be rendered.
+     * @returns The rendered tree.
+     */
+    renderTree?: (menu: React.ReactNode) => React.ReactNode;
+    /**
+     * Custom render function for tree nodes.
+     * @param nodeData - The data of the tree node.
+     * @returns The rendered node.
+     */
+    renderTreeNode?: (nodeData: T) => React.ReactNode;
+    /**
+     * Custom render function for tree icons.
+     * @param nodeData - The data of the tree node.
+     * @returns The rendered icon.
+     */
+    renderTreeIcon?: (nodeData: T, expanded?: boolean) => React.ReactNode;
+}

package/esm/Tree/types.js

@@ -0,0 +1,30 @@
+'use client';
+/**
+ * Represents a single node in a tree.
+ */
+
+/**
+ * Represents a map of tree nodes.
+ */
+
+/**
+ * Tree Node Drag Type
+ */
+export var TREE_NODE_DROP_POSITION;
+(function (TREE_NODE_DROP_POSITION) {
+  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER"] = 0] = "DRAG_OVER";
+  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER_TOP"] = 1] = "DRAG_OVER_TOP";
+  TREE_NODE_DROP_POSITION[TREE_NODE_DROP_POSITION["DRAG_OVER_BOTTOM"] = 2] = "DRAG_OVER_BOTTOM";
+})(TREE_NODE_DROP_POSITION || (TREE_NODE_DROP_POSITION = {}));
+/**
+ * Represents the drag-related props for the Tree component.
+ */
+/**
+ * Represents the base props for the Tree component.
+ *
+ * @template V - The type of the value associated with each tree node.
+ * @template T - The type of the tree node.
+ */
+/**
+ * Represents the props for the Tree component.
+ */

package/esm/Tree/utils/flattenTree.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Strategy for walking the tree.
+ */
+export declare enum WalkTreeStrategy {
+    DFS = 0,
+    BFS = 1
+}
+/**
+ * Flattens a tree structure into an array.
+ */
+export declare function flattenTree<T>(rootNodes: readonly T[], getChildren: (node: T) => readonly T[] | undefined, walkStrategy?: WalkTreeStrategy): T[];
+/**
+ * Walks the tree in a breadth-first search (BFS) manner.
+ */
+export declare function walkTreeBfs<T>(rootNodes: readonly T[], getChildren: (node: T) => readonly T[] | undefined, callback: (node: T) => void): void;
+/**
+ * Walks the tree in a depth-first search (DFS) manner.
+ */
+export declare function walkTreeDfs<T>(rootNodes: readonly T[], getChildren: (node: T) => readonly T[] | undefined, callback: (node: T) => void): void;
+/**
+ * Flattens a tree structure to an array (deprecated).
+ * @deprecated This function is considered unsafe because it mutates the `tree` argument in-place.
+ *             Use the `flattenTree` function instead.
+ */
+export declare function UNSAFE_flattenTree<TItem>(tree: TItem[], childrenKey?: string, executor?: (node: any, index: number) => any): TItem[];

package/esm/Tree/utils/flattenTree.js

@@ -0,0 +1,88 @@
+'use client';
+function _createForOfIteratorHelperLoose(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (it) return (it = it.call(o)).next.bind(it); if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; return function () { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+import { attachParent } from '../../utils/attachParent';
+
+/**
+ * Strategy for walking the tree.
+ */
+export var WalkTreeStrategy;
+
+/**
+ * Flattens a tree structure into an array.
+ */
+(function (WalkTreeStrategy) {
+  WalkTreeStrategy[WalkTreeStrategy["DFS"] = 0] = "DFS";
+  WalkTreeStrategy[WalkTreeStrategy["BFS"] = 1] = "BFS";
+})(WalkTreeStrategy || (WalkTreeStrategy = {}));
+export function flattenTree(rootNodes, getChildren, walkStrategy) {
+  if (walkStrategy === void 0) {
+    walkStrategy = WalkTreeStrategy.BFS;
+  }
+  var result = [];
+  if (walkStrategy === WalkTreeStrategy.BFS) {
+    walkTreeBfs(rootNodes, getChildren, function (node) {
+      return result.push(node);
+    });
+  } else if (walkStrategy === WalkTreeStrategy.DFS) {
+    walkTreeDfs(rootNodes, getChildren, function (node) {
+      return result.push(node);
+    });
+  }
+  return result;
+}
+
+/**
+ * Walks the tree in a breadth-first search (BFS) manner.
+ */
+export function walkTreeBfs(rootNodes, getChildren, callback) {
+  for (var queue = [].concat(rootNodes); queue.length > 0;) {
+    var _node = queue.shift();
+    callback(_node);
+    var children = getChildren(_node);
+    if (children) {
+      queue.push.apply(queue, children);
+    }
+  }
+}
+
+/**
+ * Walks the tree in a depth-first search (DFS) manner.
+ */
+export function walkTreeDfs(rootNodes, getChildren, callback) {
+  for (var _iterator = _createForOfIteratorHelperLoose(rootNodes), _step; !(_step = _iterator()).done;) {
+    var _node2 = _step.value;
+    callback(_node2);
+    var children = getChildren(_node2);
+    if (children) {
+      walkTreeDfs(children, getChildren, callback);
+    }
+  }
+}
+
+/**
+ * Flattens a tree structure to an array (deprecated).
+ * @deprecated This function is considered unsafe because it mutates the `tree` argument in-place.
+ *             Use the `flattenTree` function instead.
+ */
+export function UNSAFE_flattenTree(tree, childrenKey, executor) {
+  if (childrenKey === void 0) {
+    childrenKey = 'children';
+  }
+  var flattenData = [];
+  var traverse = function traverse(data, parent) {
+    if (!Array.isArray(data)) {
+      return;
+    }
+    data.forEach(function (item, index) {
+      var node = typeof executor === 'function' ? executor(item, index) : item;
+      flattenData.push(attachParent(node, parent));
+      if (item[childrenKey]) {
+        traverse(item[childrenKey], item);
+      }
+    });
+  };
+  traverse(tree, null);
+  return flattenData;
+}

package/esm/Tree/utils/focusableTree.d.ts

@@ -0,0 +1,55 @@
+import { TreeNode, TreeNodeMap } from '../types';
+import { ListHandle } from '../../internals/Windowing';
+interface FocusableItemsProps {
+    disabledItemValues: any;
+    valueKey: string;
+    childrenKey: string;
+    expandItemValues: any;
+}
+/**
+ * Retrieves the focusable items from the filtered data based on the provided props.
+ * Excludes nodes that are not visible or are disabled.
+ */
+export declare const getFocusableItems: <TItem extends TreeNode>(filteredData: TItem[], props: FocusableItemsProps, isSearching?: boolean) => TItem[];
+/**
+ * Retrieves the active item from the flattened nodes based on the provided focus item value.
+ */
+export declare const getActiveItem: (focusItemValue: string | number, flattenedNodes: TreeNodeMap, valueKey: string) => any;
+/**
+ * Focuses on a specific tree node element.
+ *
+ */
+export declare const focusTreeNode: (refKey: string, treeNodeRefs: any) => void;
+interface FocusItemProps {
+    focusItemValue?: string | number | null;
+    focusableItems: any[];
+    treeNodesRefs: any;
+    selector?: string;
+    valueKey: string;
+}
+/**
+ * Focuses on the next item in a tree.
+ */
+export declare const focusNextItem: (props: FocusItemProps) => any;
+/**
+ * Focuses on the previous item in a tree.
+ */
+export declare const focusPreviousItem: (props: FocusItemProps) => any;
+interface ScrollToActiveTreeNodeProps {
+    value: any;
+    valueKey: string;
+    virtualized: boolean;
+    list?: ListHandle;
+    formattedNodes: TreeNode[];
+}
+/**
+ * Scrolls the list to the active tree node.
+ *
+ * @param props - The props object containing the necessary parameters.
+ */
+export declare function scrollToActiveTreeNode(props: ScrollToActiveTreeNodeProps): void;
+export declare const focusCurrentItem: (props: {
+    selector?: string;
+    container?: HTMLElement | null;
+}) => string | undefined;
+export {};