@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.10

package/dist/Tree/NodeList.js

@@ -35,9 +35,9 @@ __export(NodeList_exports, {
   getMinimumRangeTransitionRange: () => getMinimumRangeTransitionRange
 });
 module.exports = __toCommonJS(NodeList_exports);
-var import_react = __toESM(require("react"));
-var import_omit = __toESM(require("lodash/omit"));
-var import_VirtualList = require("../VirtualList");
+var import_useLayoutEffect = __toESM(require("rc-util/lib/hooks/useLayoutEffect"));
+var import_rc_virtual_list = __toESM(require("rc-virtual-list"));
+var React = __toESM(require("react"));
 var import_MotionTreeNode = __toESM(require("./MotionTreeNode"));
 var import_diffUtil = require("./utils/diffUtil");
 var import_treeUtil = require("./utils/treeUtil");
@@ -95,10 +95,11 @@ function getAccessibilityPath(item) {
   }
   return path;
 }
-var NodeList = (0, import_react.forwardRef)((props, ref) => {
+var NodeList = React.forwardRef((props, ref) => {
   const {
     prefixCls,
     data,
+    selectable,
     checkable,
     expandedKeys,
     selectedKeys,
@@ -115,6 +116,7 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
     height,
     itemHeight,
     virtual,
+    scrollWidth,
     focusable,
     activeItem,
     focused,
@@ -127,27 +129,30 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
     onListChangeEnd,
     ...domProps
   } = props;
-  const listRef = (0, import_react.useRef)(null);
-  const indentMeasurerRef = (0, import_react.useRef)(null);
-  (0, import_react.useImperativeHandle)(ref, () => ({
+  const listRef = React.useRef(null);
+  const indentMeasurerRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => ({
     scrollTo: (scroll) => {
       listRef.current.scrollTo(scroll);
     },
     getIndentWidth: () => indentMeasurerRef.current.offsetWidth
   }));
-  const [prevExpandedKeys, setPrevExpandedKeys] = (0, import_react.useState)(expandedKeys);
-  const [prevData, setPrevData] = (0, import_react.useState)(data);
-  const [transitionData, setTransitionData] = (0, import_react.useState)(data);
-  const [transitionRange, setTransitionRange] = (0, import_react.useState)([]);
-  const [motionType, setMotionType] = (0, import_react.useState)(null);
+  const [prevExpandedKeys, setPrevExpandedKeys] = React.useState(expandedKeys);
+  const [prevData, setPrevData] = React.useState(data);
+  const [transitionData, setTransitionData] = React.useState(data);
+  const [transitionRange, setTransitionRange] = React.useState([]);
+  const [motionType, setMotionType] = React.useState(null);
+  const dataRef = React.useRef(data);
+  dataRef.current = data;
   function onMotionEnd() {
-    setPrevData(data);
-    setTransitionData(data);
+    const latestData = dataRef.current;
+    setPrevData(latestData);
+    setTransitionData(latestData);
     setTransitionRange([]);
     setMotionType(null);
     onListChangeEnd();
   }
-  (0, import_react.useEffect)(() => {
+  (0, import_useLayoutEffect.default)(() => {
     setPrevExpandedKeys(expandedKeys);
     const diffExpanded = (0, import_diffUtil.findExpandedKeys)(prevExpandedKeys, expandedKeys);
     if (diffExpanded.key !== null) {
@@ -173,7 +178,7 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
       setTransitionData(data);
     }
   }, [expandedKeys, data]);
-  (0, import_react.useEffect)(() => {
+  React.useEffect(() => {
     if (!dragging) {
       onMotionEnd();
     }
@@ -190,7 +195,7 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
     dropPosition,
     keyEntities
   };
-  return /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, focused && activeItem && /* @__PURE__ */ import_react.default.createElement("span", { style: HIDDEN_STYLE, "aria-live": "assertive" }, getAccessibilityPath(activeItem)), /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, focused && activeItem && /* @__PURE__ */ React.createElement("span", { style: HIDDEN_STYLE, "aria-live": "assertive" }, getAccessibilityPath(activeItem)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(
     "input",
     {
       style: HIDDEN_STYLE,
@@ -203,7 +208,7 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
       onChange: noop,
       "aria-label": "for screen reader"
     }
-  )), /* @__PURE__ */ import_react.default.createElement(
+  )), /* @__PURE__ */ React.createElement(
     "div",
     {
       className: `${prefixCls}-treenode`,
@@ -213,12 +218,14 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
         pointerEvents: "none",
         visibility: "hidden",
         height: 0,
-        overflow: "hidden"
+        overflow: "hidden",
+        border: 0,
+        padding: 0
       }
     },
-    /* @__PURE__ */ import_react.default.createElement("div", { className: `${prefixCls}-indent` }, /* @__PURE__ */ import_react.default.createElement("div", { ref: indentMeasurerRef, className: `${prefixCls}-indent-unit` }))
-  ), /* @__PURE__ */ import_react.default.createElement(
-    import_VirtualList.VirtualList,
+    /* @__PURE__ */ React.createElement("div", { className: `${prefixCls}-indent` }, /* @__PURE__ */ React.createElement("div", { ref: indentMeasurerRef, className: `${prefixCls}-indent-unit` }))
+  ), /* @__PURE__ */ React.createElement(
+    import_rc_virtual_list.default,
     {
       ...domProps,
       data: mergedData,
@@ -227,12 +234,12 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
       fullHeight: false,
       virtual,
       itemHeight,
+      scrollWidth,
       prefixCls: `${prefixCls}-list`,
       ref: listRef,
-      onVisibleChange: (originList, fullList) => {
-        const originSet = new Set(originList);
-        const restList = fullList.filter((item) => !originSet.has(item));
-        if (restList.some((item) => itemKey(item) === MOTION_KEY)) {
+      role: "tree",
+      onVisibleChange: (originList) => {
+        if (originList.every((item) => itemKey(item) !== MOTION_KEY)) {
           onMotionEnd();
         }
       }
@@ -250,10 +257,10 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
       delete restProps.key;
       delete restProps.children;
       const treeNodeProps = (0, import_treeUtil.getTreeNodeProps)(mergedKey, treeNodeRequiredProps);
-      return /* @__PURE__ */ import_react.default.createElement(
+      return /* @__PURE__ */ React.createElement(
         import_MotionTreeNode.default,
         {
-          ...(0, import_omit.default)(restProps, "children"),
+          ...restProps,
           ...treeNodeProps,
           title,
           active: !!activeItem && key === activeItem.key,
@@ -275,7 +282,9 @@ var NodeList = (0, import_react.forwardRef)((props, ref) => {
     }
   ));
 });
-NodeList.displayName = "NodeList";
+if (process.env.NODE_ENV !== "production") {
+  NodeList.displayName = "NodeList";
+}
 var NodeList_default = NodeList;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/Tree/RCTree.d.ts

@@ -1,11 +1,11 @@
-import React, { Component } from 'react';
-import DropIndicator from './DropIndicator';
-import { NodeListRef } from './NodeList';
+import * as React from 'react';
+import { DropIndicatorProps } from './DropIndicator';
+import { type NodeListRef } from './NodeList';
 import { NodeDragEventHandler, NodeDragEventParams, NodeMouseEventHandler, NodeMouseEventParams } from './contextTypes';
-import { BasicDataNode, DataEntity, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, NodeInstance, ScrollTo } from './typings';
+import type { BasicDataNode, DataNode, Direction, EventDataNode, FieldNames, FlattenNode, IconType, Key, KeyEntities, SafeKey, ScrollTo, TreeNodeProps } from './typings';
 export interface CheckInfo<TreeDataType extends BasicDataNode = DataNode> {
     event: 'check';
-    node: EventDataNode;
+    node: EventDataNode<TreeDataType>;
     checked: boolean;
     nativeEvent: MouseEvent;
     checkedNodes: TreeDataType[];
@@ -23,26 +23,31 @@ export interface AllowDropOptions<TreeDataType extends BasicDataNode = DataNode>
 export type AllowDrop<TreeDataType extends BasicDataNode = DataNode> = (options: AllowDropOptions<TreeDataType>) => boolean;
 export type DraggableFn = (node: DataNode) => boolean;
 export type DraggableConfig = {
-    icon?: React.ReactElement | false;
+    icon?: React.ReactNode | false;
     nodeDraggable?: DraggableFn;
 };
+export type ExpandAction = false | 'click' | 'doubleClick';
+export type SemanticName = 'itemIcon' | 'item' | 'itemTitle';
 export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
-    prefixCls?: string;
+    prefixCls: string;
     className?: string;
     style?: React.CSSProperties;
+    styles?: Partial<Record<SemanticName, React.CSSProperties>>;
+    classNames?: Partial<Record<SemanticName, string>>;
     focusable?: boolean;
-    activeKey?: Key;
+    activeKey?: Key | null;
     tabIndex?: number;
-    children?: React.ReactElement;
+    children?: React.ReactNode;
     treeData?: TreeDataType[];
     fieldNames?: FieldNames;
     showLine?: boolean;
     showIcon?: boolean;
     icon?: IconType;
     selectable?: boolean;
+    expandAction?: ExpandAction;
     disabled?: boolean;
     multiple?: boolean;
-    checkable?: boolean | React.ReactElement;
+    checkable?: boolean | React.ReactNode;
     checkStrictly?: boolean;
     draggable?: DraggableFn | boolean | DraggableConfig;
     defaultExpandParent?: boolean;
@@ -58,23 +63,17 @@ export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     defaultSelectedKeys?: Key[];
     selectedKeys?: Key[];
     allowDrop?: AllowDrop<TreeDataType>;
-    titleRender?: (node: TreeDataType) => React.ReactElement | string;
-    dropIndicatorRender?: (props: {
-        dropPosition: -1 | 0 | 1;
-        dropLevelOffset: number;
-        indent: number;
-        prefixCls: string;
-        direction: Direction;
-    }) => React.ReactElement;
+    titleRender?: (node: TreeDataType) => React.ReactNode;
+    dropIndicatorRender?: (props: DropIndicatorProps) => React.ReactNode;
     onFocus?: React.FocusEventHandler<HTMLDivElement>;
     onBlur?: React.FocusEventHandler<HTMLDivElement>;
     onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
-    onContextMenu?: React.MouseEvent<HTMLDivElement>;
-    onClick?: NodeMouseEventHandler;
-    onDoubleClick?: NodeMouseEventHandler;
+    onContextMenu?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: NodeMouseEventHandler<TreeDataType>;
+    onDoubleClick?: NodeMouseEventHandler<TreeDataType>;
     onScroll?: React.UIEventHandler<HTMLElement>;
     onExpand?: (expandedKeys: Key[], info: {
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
         expanded: boolean;
         nativeEvent: MouseEvent;
     }) => void;
@@ -85,48 +84,54 @@ export interface TreeProps<TreeDataType extends BasicDataNode = DataNode> {
     onSelect?: (selectedKeys: Key[], info: {
         event: 'select';
         selected: boolean;
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
         selectedNodes: TreeDataType[];
         nativeEvent: MouseEvent;
     }) => void;
     onLoad?: (loadedKeys: Key[], info: {
         event: 'load';
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
     }) => void;
-    loadData?: (treeNode: EventDataNode) => Promise<void>;
+    loadData?: (treeNode: EventDataNode<TreeDataType>) => Promise<any>;
     loadedKeys?: Key[];
-    onMouseEnter?: (info: NodeMouseEventParams) => void;
-    onMouseLeave?: (info: NodeMouseEventParams) => void;
+    onMouseEnter?: (info: NodeMouseEventParams<TreeDataType>) => void;
+    onMouseLeave?: (info: NodeMouseEventParams<TreeDataType>) => void;
     onRightClick?: (info: {
         event: React.MouseEvent;
-        node: EventDataNode;
+        node: EventDataNode<TreeDataType>;
     }) => void;
-    onDragStart?: (info: NodeDragEventParams) => void;
-    onDragEnter?: (info: NodeDragEventParams & {
+    onDragStart?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragEnter?: (info: NodeDragEventParams<TreeDataType> & {
         expandedKeys: Key[];
     }) => void;
-    onDragOver?: (info: NodeDragEventParams) => void;
-    onDragLeave?: (info: NodeDragEventParams) => void;
-    onDragEnd?: (info: NodeDragEventParams) => void;
-    onDrop?: (info: NodeDragEventParams & {
-        dragNode: EventDataNode;
+    onDragOver?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragLeave?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDragEnd?: (info: NodeDragEventParams<TreeDataType>) => void;
+    onDrop?: (info: NodeDragEventParams<TreeDataType> & {
+        dragNode: EventDataNode<TreeDataType>;
         dragNodesKeys: Key[];
         dropPosition: number;
         dropToGap: boolean;
     }) => void;
+    /**
+     * Used for `rc-tree-select` only.
+     * Do not use in your production code directly since this will be refactor.
+     */
     onActiveChange?: (key: Key) => void;
-    filterTreeNode?: (treeNode: EventDataNode) => boolean;
+    filterTreeNode?: (treeNode: EventDataNode<TreeDataType>) => boolean;
     motion?: any;
     switcherIcon?: IconType;
     height?: number;
     itemHeight?: number;
+    scrollWidth?: number;
+    itemScrollOffset?: number;
     virtual?: boolean;
     direction?: Direction;
     rootClassName?: string;
     rootStyle?: React.CSSProperties;
 }
 interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
-    keyEntities: Record<Key, DataEntity<TreeDataType>>;
+    keyEntities: KeyEntities<TreeDataType>;
     indent: number | null;
     selectedKeys: Key[];
     checkedKeys: Key[];
@@ -143,15 +148,15 @@ interface TreeState<TreeDataType extends BasicDataNode = DataNode> {
     dropTargetPos: string | null;
     dropAllowed: boolean;
     dragOverNodeKey: Key | null;
-    treeData: DataNode[];
-    flattenNodes: FlattenNode[];
+    treeData: TreeDataType[];
+    flattenNodes: FlattenNode<TreeDataType>[];
     focused: boolean;
-    activeKey: Key;
+    activeKey: Key | null;
     listChanging: boolean;
     prevProps: TreeProps;
     fieldNames: FieldNames;
 }
-declare class RCTree<TreeDataType extends BasicDataNode = DataNode> extends Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
+declare class Tree<TreeDataType extends DataNode | BasicDataNode = DataNode> extends React.Component<TreeProps<TreeDataType>, TreeState<TreeDataType>> {
     static defaultProps: {
         prefixCls: string;
         showLine: boolean;
@@ -168,64 +173,76 @@ declare class RCTree<TreeDataType extends BasicDataNode = DataNode> extends Comp
         defaultExpandedKeys: any[];
         defaultCheckedKeys: any[];
         defaultSelectedKeys: any[];
-        dropIndicatorRender: typeof DropIndicator;
+        dropIndicatorRender: React.FC<Readonly<DropIndicatorProps>>;
         allowDrop: () => boolean;
+        expandAction: boolean;
     };
-    static TreeNode: React.FC<import("./TreeNode").TreeNodeProps<DataNode<any>>>;
+    static TreeNode: React.FC<Readonly<TreeNodeProps<DataNode>>>;
     destroyed: boolean;
-    delayedDragEnterLogic: Record<Key, number>;
-    loadingRetryTimes: Record<Key, number>;
+    delayedDragEnterLogic: Record<SafeKey, number>;
+    loadingRetryTimes: Record<SafeKey, number>;
     state: TreeState<TreeDataType>;
     dragStartMousePosition: any;
-    dragNode: NodeInstance<TreeDataType>;
+    dragNodeProps: TreeNodeProps<TreeDataType>;
     currentMouseOverDroppableNodeKey: any;
     listRef: React.RefObject<NodeListRef>;
     componentDidMount(): void;
     componentDidUpdate(): void;
     onUpdated(): void;
     componentWillUnmount(): void;
-    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode<any>>>;
-    onNodeDragStart: NodeDragEventHandler<HTMLDivElement, TreeDataType>;
-    onNodeDragEnter: (event: any, node: NodeInstance<TreeDataType>) => void;
-    onNodeDragOver: (event: any, node: NodeInstance<TreeDataType>) => void;
-    onNodeDragLeave: NodeDragEventHandler;
+    static getDerivedStateFromProps(props: TreeProps, prevState: TreeState): Partial<TreeState<DataNode>>;
+    onNodeDragStart: NodeDragEventHandler<TreeDataType, HTMLDivElement>;
+    /**
+     * [Legacy] Select handler is smaller than node,
+     * so that this will trigger when drag enter node or select handler.
+     * This is a little tricky if customize css without padding.
+     * Better for use mouse move event to refresh drag state.
+     * But let's just keep it to avoid event trigger logic change.
+     */
+    onNodeDragEnter: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
+    onNodeDragOver: (event: React.DragEvent<HTMLDivElement>, nodeProps: TreeNodeProps<TreeDataType>) => void;
+    onNodeDragLeave: NodeDragEventHandler<TreeDataType>;
     onWindowDragEnd: (event: any) => void;
-    onNodeDragEnd: NodeDragEventHandler;
-    onNodeDrop: (event: any, node: any, outsideTree?: boolean) => void;
+    onNodeDragEnd: NodeDragEventHandler<TreeDataType>;
+    onNodeDrop: (event: React.DragEvent<HTMLDivElement>, _: TreeNodeProps<TreeDataType>, outsideTree?: boolean) => void;
     resetDragState(): void;
     cleanDragState: () => void;
-    onNodeClick: NodeMouseEventHandler;
-    onNodeDoubleClick: NodeMouseEventHandler;
-    onNodeSelect: NodeMouseEventHandler;
-    onNodeCheck: (e: any, treeNode: EventDataNode, checked: boolean) => void;
-    onNodeLoad: (treeNode: EventDataNode) => Promise<void>;
-    onNodeMouseEnter: NodeMouseEventHandler;
-    onNodeMouseLeave: NodeMouseEventHandler;
-    onNodeContextMenu: NodeMouseEventHandler;
+    triggerExpandActionExpand: NodeMouseEventHandler;
+    onNodeClick: NodeMouseEventHandler<TreeDataType>;
+    onNodeDoubleClick: NodeMouseEventHandler<TreeDataType>;
+    onNodeSelect: NodeMouseEventHandler<TreeDataType>;
+    onNodeCheck: (e: React.MouseEvent<HTMLSpanElement>, treeNode: EventDataNode<TreeDataType>, checked: boolean) => void;
+    onNodeLoad: (treeNode: EventDataNode<TreeDataType>) => Promise<void>;
+    onNodeMouseEnter: NodeMouseEventHandler<TreeDataType>;
+    onNodeMouseLeave: NodeMouseEventHandler<TreeDataType>;
+    onNodeContextMenu: NodeMouseEventHandler<TreeDataType>;
     onFocus: React.FocusEventHandler<HTMLDivElement>;
     onBlur: React.FocusEventHandler<HTMLDivElement>;
     getTreeNodeRequiredProps: () => {
-        expandedKeys: Key[];
-        selectedKeys: Key[];
-        loadedKeys: Key[];
-        loadingKeys: Key[];
-        checkedKeys: Key[];
-        halfCheckedKeys: Key[];
-        dragOverNodeKey: Key;
+        expandedKeys: React.Key[];
+        selectedKeys: React.Key[];
+        loadedKeys: React.Key[];
+        loadingKeys: React.Key[];
+        checkedKeys: React.Key[];
+        halfCheckedKeys: React.Key[];
+        dragOverNodeKey: React.Key;
         dropPosition: 0 | 1 | -1;
-        keyEntities: Record<Key, DataEntity<TreeDataType>>;
+        keyEntities: KeyEntities<TreeDataType>;
     };
+    /** Set uncontrolled `expandedKeys`. This will also auto update `flattenNodes`. */
     setExpandedKeys: (expandedKeys: Key[]) => void;
-    flattenTreeData: (expandedKeys: Key[]) => FlattenNode[];
-    onNodeExpand: (e: any, treeNode: EventDataNode) => void;
+    onNodeExpand: (e: React.MouseEvent<HTMLDivElement>, treeNode: EventDataNode<TreeDataType>) => void;
     onListChangeStart: () => void;
     onListChangeEnd: () => void;
-    onActiveChange: (newActiveKey: Key) => void;
-    getActiveItem: () => FlattenNode;
+    onActiveChange: (newActiveKey: Key | null) => void;
+    getActiveItem: () => FlattenNode<TreeDataType>;
     offsetActiveKey: (offset: number) => void;
     onKeyDown: React.KeyboardEventHandler<HTMLDivElement>;
-    setUncontrolledState: (state: Partial<TreeState>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
+    /**
+     * Only update the value which is not in props
+     */
+    setUncontrolledState: (state: Partial<TreeState<TreeDataType>>, atomic?: boolean, forceState?: Partial<TreeState<TreeDataType>> | null) => void;
     scrollTo: ScrollTo;
     render(): React.JSX.Element;
 }
-export default RCTree;
+export default Tree;