@qsxy/element-plus-react 1.0.0-next.5 → 1.0.0-next.7

package/dist/Tree/TreeNode.js

@@ -29,446 +29,344 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/Tree/TreeNode.tsx
 var TreeNode_exports = {};
 __export(TreeNode_exports, {
-  InternalTreeNode: () => InternalTreeNode,
   default: () => TreeNode_default
 });
 module.exports = __toCommonJS(TreeNode_exports);
 var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
-var import_Checkbox = require("../Checkbox");
-var import_Icon = require("../Icon");
 var import_Indent = __toESM(require("./Indent"));
 var import_contextTypes = require("./contextTypes");
+var import_keyUtil = __toESM(require("./utils/keyUtil"));
 var import_pickAttrs = __toESM(require("./utils/pickAttrs"));
 var import_treeUtil = require("./utils/treeUtil");
 var ICON_OPEN = "open";
 var ICON_CLOSE = "close";
 var defaultTitle = "---";
-var InternalTreeNode = class extends import_react.Component {
-  constructor() {
-    super(...arguments);
-    this.state = {
-      dragNodeHighlight: false
-    };
-    this.onSelectorClick = (e) => {
-      const {
-        context: { onNodeClick }
-      } = this.props;
-      onNodeClick(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props));
-      if (this.isSelectable()) {
-        this.onSelect(e);
-      } else {
-        this.onCheck(e);
-      }
-    };
-    this.onSelectorDoubleClick = (e) => {
-      const {
-        context: { onNodeDoubleClick }
-      } = this.props;
-      onNodeDoubleClick(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props));
-    };
-    this.onSelect = (e) => {
-      if (this.isDisabled()) {
-        return;
-      }
-      const {
-        context: { onNodeSelect }
-      } = this.props;
-      e.preventDefault();
-      onNodeSelect(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props));
-    };
-    this.onCheck = (e) => {
-      if (this.isDisabled()) {
-        return;
-      }
-      const { disableCheckbox, checked } = this.props;
-      const {
-        context: { onNodeCheck }
-      } = this.props;
-      if (!this.isCheckable() || disableCheckbox) {
-        return;
-      }
-      e.preventDefault();
-      const targetChecked = !checked;
-      onNodeCheck(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props), targetChecked);
-    };
-    this.onMouseEnter = (e) => {
-      const {
-        context: { onNodeMouseEnter }
-      } = this.props;
-      onNodeMouseEnter(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props));
-    };
-    this.onMouseLeave = (e) => {
-      const {
-        context: { onNodeMouseLeave }
-      } = this.props;
-      onNodeMouseLeave(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props));
-    };
-    this.onContextMenu = (e) => {
-      const {
-        context: { onNodeContextMenu }
-      } = this.props;
-      onNodeContextMenu(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props));
-    };
-    this.onDragStart = (e) => {
-      const {
-        context: { onNodeDragStart }
-      } = this.props;
-      e.stopPropagation();
-      this.setState({
-        dragNodeHighlight: true
-      });
-      onNodeDragStart(e, this);
-      try {
-        e.dataTransfer.setData("text/plain", "");
-      } catch (error) {
-      }
-    };
-    this.onDragEnter = (e) => {
-      const {
-        context: { onNodeDragEnter }
-      } = this.props;
-      e.preventDefault();
-      e.stopPropagation();
-      onNodeDragEnter(e, this);
-    };
-    this.onDragOver = (e) => {
-      const {
-        context: { onNodeDragOver }
-      } = this.props;
-      e.preventDefault();
-      e.stopPropagation();
-      onNodeDragOver(e, this);
-    };
-    this.onDragLeave = (e) => {
-      const {
-        context: { onNodeDragLeave }
-      } = this.props;
-      e.stopPropagation();
-      onNodeDragLeave(e, this);
-    };
-    this.onDragEnd = (e) => {
-      const {
-        context: { onNodeDragEnd }
-      } = this.props;
-      e.stopPropagation();
-      this.setState({
-        dragNodeHighlight: false
-      });
-      onNodeDragEnd(e, this);
-    };
-    this.onDrop = (e) => {
-      const {
-        context: { onNodeDrop }
-      } = this.props;
-      e.preventDefault();
-      e.stopPropagation();
-      this.setState({
-        dragNodeHighlight: false
-      });
-      onNodeDrop(e, this);
-    };
-    // Disabled item still can be switch
-    this.onExpand = (e) => {
-      const {
-        loading,
-        context: { onNodeExpand }
-      } = this.props;
-      if (loading) {
-        return;
-      }
-      onNodeExpand(e, (0, import_treeUtil.convertNodePropsToEventData)(this.props));
-    };
-    // Drag usage
-    this.setSelectHandle = (node) => {
-      this.selectHandle = node;
-    };
-    this.getNodeState = () => {
-      const { expanded } = this.props;
-      if (this.isLeaf()) {
-        return null;
-      }
-      return expanded ? ICON_OPEN : ICON_CLOSE;
-    };
-    this.hasChildren = () => {
-      const { eventKey } = this.props;
-      const {
-        context: { keyEntities }
-      } = this.props;
-      const { children } = keyEntities[eventKey] || {};
-      return !!(children || []).length;
-    };
-    this.isLeaf = () => {
-      const { isLeaf, loaded } = this.props;
-      const {
-        context: { loadData }
-      } = this.props;
-      const hasChildren = this.hasChildren();
-      if (isLeaf === false) {
-        return false;
-      }
-      return isLeaf || !loadData && !hasChildren || loadData && loaded && !hasChildren;
-    };
-    this.isDisabled = () => {
-      const { disabled } = this.props;
-      const {
-        context: { disabled: treeDisabled }
-      } = this.props;
-      return !!(treeDisabled || disabled);
-    };
-    this.isCheckable = () => {
-      const { checkable } = this.props;
-      const {
-        context: { checkable: treeCheckable }
-      } = this.props;
-      if (!treeCheckable || checkable === false) {
-        return false;
-      }
-      return treeCheckable;
-    };
-    // Load data to avoid default expanded tree without data
-    this.syncLoadData = (props) => {
-      const { expanded, loading, loaded } = props;
-      const {
-        context: { loadData, onNodeLoad }
-      } = this.props;
-      if (loading) {
-        return;
-      }
-      if (loadData && expanded && !this.isLeaf()) {
-        if (!this.hasChildren() && !loaded) {
-          onNodeLoad((0, import_treeUtil.convertNodePropsToEventData)(this.props));
-        }
-      }
-    };
-    this.isDraggable = () => {
-      const {
-        data,
-        context: { draggable }
-      } = this.props;
-      return !!(draggable && (!draggable.nodeDraggable || draggable.nodeDraggable(data)));
-    };
-    // ==================== Render: Drag Handler ====================
-    this.renderDragHandler = () => {
-      const {
-        context: { draggable, prefixCls }
-      } = this.props;
-      return (draggable == null ? void 0 : draggable.icon) ? /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-draggable-icon` }, draggable.icon) : null;
-    };
-    // ====================== Render: Switcher ======================
-    this.renderSwitcherIconDom = (isLeaf) => {
-      const { switcherIcon: switcherIconFromProps } = this.props;
-      const {
-        context: { switcherIcon: switcherIconFromCtx }
-      } = this.props;
-      const switcherIcon = switcherIconFromProps || switcherIconFromCtx;
-      if (typeof switcherIcon === "function") {
-        return switcherIcon({ ...this.props, isLeaf });
-      }
-      return switcherIcon;
-    };
-    // Switcher
-    this.renderSwitcher = () => {
-      const { expanded } = this.props;
-      const {
-        context: { prefixCls }
-      } = this.props;
-      if (this.isLeaf()) {
-        const switcherIconDom2 = this.renderSwitcherIconDom(true);
-        return switcherIconDom2 !== false ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${prefixCls}-switcher`, `${prefixCls}-switcher-noop`) }, switcherIconDom2) : null;
-      }
-      const switcherCls = (0, import_classnames.default)(`${prefixCls}-switcher`, `${prefixCls}-switcher_${expanded ? ICON_OPEN : ICON_CLOSE}`);
-      const switcherIconDom = this.renderSwitcherIconDom(false);
-      return switcherIconDom !== false ? /* @__PURE__ */ import_react.default.createElement("span", { onClick: this.onExpand, className: switcherCls }, switcherIconDom) : null;
-    };
-    // ====================== Render: Checkbox ======================
-    // Checkbox
-    this.renderCheckbox = () => {
-      const { checked, halfChecked, disableCheckbox } = this.props;
-      const disabled = this.isDisabled();
-      const checkable = this.isCheckable();
-      if (!checkable) {
-        return null;
-      }
-      const $custom = typeof checkable !== "boolean" ? checkable : null;
-      return (
-        // @ts-ignore
-        /* @__PURE__ */ import_react.default.createElement(import_Checkbox.Checkbox, { checked, indeterminate: !checked && halfChecked, disabled: disabled || disableCheckbox, onChange: (_, e) => this.onCheck(e) }, $custom)
-      );
-    };
-    // ==================== Render: Title + Icon ====================
-    this.renderIcon = () => {
-      const { loading } = this.props;
-      const {
-        context: { prefixCls }
-      } = this.props;
-      return /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${prefixCls}-iconEle`, `${prefixCls}-icon__${this.getNodeState() || "docu"}`, loading && `${prefixCls}-icon_loading`) });
-    };
-    this.renderUserIcon = (currentIcon) => {
-      if (typeof currentIcon === "function") {
-        return currentIcon(this.props);
-      } else if (typeof currentIcon === "string") {
-        return /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: currentIcon });
-      } else {
-        return currentIcon;
-      }
-    };
-    // Icon + Title
-    this.renderSelector = () => {
-      const { dragNodeHighlight } = this.state;
-      const { title = defaultTitle, selected, icon, loading, data } = this.props;
-      const {
-        context: { prefixCls, showIcon, icon: treeIcon, loadData, titleRender }
-      } = this.props;
-      const disabled = this.isDisabled();
-      const wrapClass = `${prefixCls}-node-content-wrapper`;
-      let $icon;
-      if (showIcon) {
-        const currentIcon = icon || treeIcon;
-        $icon = currentIcon ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${prefixCls}-iconEle`, `${prefixCls}-icon__customize`) }, this.renderUserIcon(currentIcon)) : this.renderIcon();
-      } else if (loadData && loading) {
-        $icon = this.renderIcon();
-      }
-      let titleNode;
-      if (typeof title === "function") {
-        titleNode = title(data);
-      } else if (titleRender) {
-        titleNode = titleRender(data);
-      } else {
-        titleNode = title;
-      }
-      const $title = /* @__PURE__ */ import_react.default.createElement("span", { className: `${prefixCls}-title` }, titleNode);
-      return /* @__PURE__ */ import_react.default.createElement(
-        "span",
-        {
-          ref: this.setSelectHandle,
-          title: typeof title === "string" ? title : "",
-          className: (0, import_classnames.default)(
-            `${wrapClass}`,
-            `${wrapClass}-${this.getNodeState() || "normal"}`,
-            !disabled && (selected || dragNodeHighlight) && `${prefixCls}-node-selected`
-          ),
-          onMouseEnter: this.onMouseEnter,
-          onMouseLeave: this.onMouseLeave,
-          onContextMenu: this.onContextMenu,
-          onClick: this.onSelectorClick,
-          onDoubleClick: this.onSelectorDoubleClick
-        },
-        $icon,
-        $title,
-        this.renderDropIndicator()
-      );
-    };
-    // =================== Render: Drop Indicator ===================
-    this.renderDropIndicator = () => {
-      const { disabled, eventKey } = this.props;
-      const {
-        context: { draggable, dropLevelOffset, dropPosition, prefixCls, indent, dropIndicatorRender, dragOverNodeKey, direction }
-      } = this.props;
-      const rootDraggable = draggable !== false;
-      const showIndicator = !disabled && rootDraggable && dragOverNodeKey === eventKey;
-      return showIndicator ? dropIndicatorRender({ dropPosition, dropLevelOffset, indent, prefixCls, direction }) : null;
-    };
-  }
-  // Isomorphic needn't load data in server side
-  componentDidMount() {
-    this.syncLoadData(this.props);
-  }
-  componentDidUpdate() {
-    this.syncLoadData(this.props);
-  }
-  isSelectable() {
-    const { selectable } = this.props;
-    const {
-      context: { selectable: treeSelectable }
-    } = this.props;
+var TreeNode = (props) => {
+  var _a, _b;
+  const {
+    eventKey,
+    className,
+    style,
+    dragOver,
+    dragOverGapTop,
+    dragOverGapBottom,
+    isLeaf,
+    isStart,
+    isEnd,
+    expanded,
+    selected,
+    checked,
+    halfChecked,
+    loading,
+    domRef,
+    active,
+    data,
+    onMouseMove,
+    selectable,
+    ...otherProps
+  } = props;
+  const context = import_react.default.useContext(import_contextTypes.TreeContext);
+  const { classNames: treeClassNames, styles } = context || {};
+  const unstableContext = import_react.default.useContext(import_contextTypes.UnstableContext);
+  const selectHandleRef = import_react.default.useRef(null);
+  const [dragNodeHighlight, setDragNodeHighlight] = import_react.default.useState(false);
+  const isDisabled = !!(context.disabled || props.disabled || ((_a = unstableContext.nodeDisabled) == null ? void 0 : _a.call(unstableContext, data)));
+  const isCheckable = import_react.default.useMemo(() => {
+    if (!context.checkable || props.checkable === false) {
+      return false;
+    }
+    return context.checkable;
+  }, [context.checkable, props.checkable]);
+  const onSelect = (e) => {
+    if (isDisabled) {
+      return;
+    }
+    context.onNodeSelect(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  };
+  const onCheck = (e) => {
+    if (isDisabled) {
+      return;
+    }
+    if (!isCheckable || props.disableCheckbox) {
+      return;
+    }
+    context.onNodeCheck(e, (0, import_treeUtil.convertNodePropsToEventData)(props), !checked);
+  };
+  const isSelectable = import_react.default.useMemo(() => {
     if (typeof selectable === "boolean") {
       return selectable;
     }
-    return treeSelectable;
-  }
-  // =========================== Render ===========================
-  render() {
-    const {
-      eventKey,
-      className,
-      style,
-      dragOver,
-      dragOverGapTop,
-      dragOverGapBottom,
-      isLeaf,
-      isStart,
-      isEnd,
-      expanded,
-      selected,
-      checked,
-      halfChecked,
-      loading,
-      domRef,
-      active,
-      onMouseMove,
-      selectable,
-      ...otherProps
-    } = this.props;
-    const {
-      context: { prefixCls, filterTreeNode, keyEntities, dropContainerKey, dropTargetKey, draggingNodeKey }
-    } = this.props;
-    const disabled = this.isDisabled();
-    const dataOrAriaAttributeProps = (0, import_pickAttrs.default)(otherProps, { aria: true, data: true });
-    const { level } = keyEntities[eventKey] || {};
-    const isEndNode = isEnd[isEnd.length - 1];
-    const mergedDraggable = this.isDraggable();
-    const draggableWithoutDisabled = !disabled && mergedDraggable;
-    const dragging = draggingNodeKey === eventKey;
-    const ariaSelected = selectable !== void 0 ? { "aria-selected": !!selectable } : void 0;
+    return context.selectable;
+  }, [selectable, context.selectable]);
+  const onSelectorClick = (e) => {
+    context.onNodeClick(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+    if (isSelectable) {
+      onSelect(e);
+    } else {
+      onCheck(e);
+    }
+  };
+  const onSelectorDoubleClick = (e) => {
+    context.onNodeDoubleClick(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  };
+  const onMouseEnter = (e) => {
+    context.onNodeMouseEnter(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  };
+  const onMouseLeave = (e) => {
+    context.onNodeMouseLeave(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  };
+  const onContextMenu = (e) => {
+    context.onNodeContextMenu(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  };
+  const isDraggable = import_react.default.useMemo(() => {
+    return !!(context.draggable && (!context.draggable.nodeDraggable || context.draggable.nodeDraggable(data)));
+  }, [context.draggable, data]);
+  const onDragStart = (e) => {
+    e.stopPropagation();
+    setDragNodeHighlight(true);
+    context.onNodeDragStart(e, props);
+    try {
+      e.dataTransfer.setData("text/plain", "");
+    } catch {
+    }
+  };
+  const onDragEnter = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    context.onNodeDragEnter(e, props);
+  };
+  const onDragOver = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    context.onNodeDragOver(e, props);
+  };
+  const onDragLeave = (e) => {
+    e.stopPropagation();
+    context.onNodeDragLeave(e, props);
+  };
+  const onDragEnd = (e) => {
+    e.stopPropagation();
+    setDragNodeHighlight(false);
+    context.onNodeDragEnd(e, props);
+  };
+  const onDrop = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragNodeHighlight(false);
+    context.onNodeDrop(e, props);
+  };
+  const onExpand = (e) => {
+    if (loading) {
+      return;
+    }
+    context.onNodeExpand(e, (0, import_treeUtil.convertNodePropsToEventData)(props));
+  };
+  const hasChildren = import_react.default.useMemo(() => {
+    const { children } = (0, import_keyUtil.default)(context.keyEntities, eventKey) || {};
+    return Boolean((children || []).length);
+  }, [context.keyEntities, eventKey]);
+  const memoizedIsLeaf = import_react.default.useMemo(() => {
+    if (isLeaf === false) {
+      return false;
+    }
+    return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
+  }, [isLeaf, context.loadData, hasChildren, props.loaded]);
+  import_react.default.useEffect(() => {
+    if (loading) {
+      return;
+    }
+    if (typeof context.loadData === "function" && expanded && !memoizedIsLeaf && !props.loaded) {
+      context.onNodeLoad((0, import_treeUtil.convertNodePropsToEventData)(props));
+    }
+  }, [loading, context.loadData, context.onNodeLoad, expanded, memoizedIsLeaf, props]);
+  const dragHandlerNode = import_react.default.useMemo(() => {
+    var _a2;
+    if (!((_a2 = context.draggable) == null ? void 0 : _a2.icon)) {
+      return null;
+    }
+    return /* @__PURE__ */ import_react.default.createElement("span", { className: `${context.prefixCls}-draggable-icon` }, context.draggable.icon);
+  }, [context.draggable]);
+  const renderSwitcherIconDom = (isInternalLeaf) => {
+    const switcherIcon = props.switcherIcon || context.switcherIcon;
+    if (typeof switcherIcon === "function") {
+      return switcherIcon({ ...props, isLeaf: isInternalLeaf });
+    }
+    return switcherIcon;
+  };
+  const renderSwitcher = () => {
+    if (memoizedIsLeaf) {
+      const switcherIconDom2 = renderSwitcherIconDom(true);
+      return switcherIconDom2 !== false ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher-noop`) }, switcherIconDom2) : null;
+    }
+    const switcherIconDom = renderSwitcherIconDom(false);
+    return switcherIconDom !== false ? /* @__PURE__ */ import_react.default.createElement("span", { onClick: onExpand, className: (0, import_classnames.default)(`${context.prefixCls}-switcher`, `${context.prefixCls}-switcher_${expanded ? ICON_OPEN : ICON_CLOSE}`) }, switcherIconDom) : null;
+  };
+  const checkboxNode = import_react.default.useMemo(() => {
+    if (!isCheckable) {
+      return null;
+    }
+    const $custom = typeof isCheckable !== "boolean" ? isCheckable : null;
     return /* @__PURE__ */ import_react.default.createElement(
-      "div",
+      "span",
       {
-        ref: domRef,
-        className: (0, import_classnames.default)(className, `${prefixCls}-treenode`, {
-          [`${prefixCls}-treenode-disabled`]: disabled,
-          [`${prefixCls}-treenode-switcher-${expanded ? "open" : "close"}`]: !isLeaf,
-          [`${prefixCls}-treenode-checkbox-checked`]: checked,
-          [`${prefixCls}-treenode-checkbox-indeterminate`]: halfChecked,
-          [`${prefixCls}-treenode-selected`]: selected,
-          [`${prefixCls}-treenode-loading`]: loading,
-          [`${prefixCls}-treenode-active`]: active,
-          [`${prefixCls}-treenode-leaf-last`]: isEndNode,
-          [`${prefixCls}-treenode-draggable`]: draggableWithoutDisabled,
-          dragging,
-          "drop-target": dropTargetKey === eventKey,
-          "drop-container": dropContainerKey === eventKey,
-          "drag-over": !disabled && dragOver,
-          "drag-over-gap-top": !disabled && dragOverGapTop,
-          "drag-over-gap-bottom": !disabled && dragOverGapBottom,
-          "filter-node": filterTreeNode && filterTreeNode((0, import_treeUtil.convertNodePropsToEventData)(this.props))
+        className: (0, import_classnames.default)(`${context.prefixCls}-checkbox`, {
+          [`${context.prefixCls}-checkbox-checked`]: checked,
+          [`${context.prefixCls}-checkbox-indeterminate`]: !checked && halfChecked,
+          [`${context.prefixCls}-checkbox-disabled`]: isDisabled || props.disableCheckbox
         }),
-        style,
-        draggable: draggableWithoutDisabled,
-        "aria-grabbed": dragging,
-        onDragStart: draggableWithoutDisabled ? this.onDragStart : void 0,
-        onDragEnter: mergedDraggable ? this.onDragEnter : void 0,
-        onDragOver: mergedDraggable ? this.onDragOver : void 0,
-        onDragLeave: mergedDraggable ? this.onDragLeave : void 0,
-        onDrop: mergedDraggable ? this.onDrop : void 0,
-        onDragEnd: mergedDraggable ? this.onDragEnd : void 0,
-        onMouseMove,
-        ...ariaSelected,
-        ...dataOrAriaAttributeProps
+        onClick: onCheck,
+        role: "checkbox",
+        "aria-checked": halfChecked ? "mixed" : checked,
+        "aria-disabled": isDisabled || props.disableCheckbox,
+        "aria-label": `Select ${typeof props.title === "string" ? props.title : "tree node"}`
       },
-      /* @__PURE__ */ import_react.default.createElement(import_Indent.default, { prefixCls, level, isStart, isEnd }),
-      this.renderDragHandler(),
-      this.renderSwitcher(),
-      this.renderCheckbox(),
-      this.renderSelector()
+      $custom
     );
-  }
+  }, [isCheckable, checked, halfChecked, isDisabled, props.disableCheckbox, props.title]);
+  const nodeState = import_react.default.useMemo(() => {
+    if (memoizedIsLeaf) {
+      return null;
+    }
+    return expanded ? ICON_OPEN : ICON_CLOSE;
+  }, [memoizedIsLeaf, expanded]);
+  const iconNode = import_react.default.useMemo(() => {
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        className: (0, import_classnames.default)(treeClassNames == null ? void 0 : treeClassNames.itemIcon, `${context.prefixCls}-iconEle`, `${context.prefixCls}-icon__${nodeState || "docu"}`, {
+          [`${context.prefixCls}-icon_loading`]: loading
+        }),
+        style: styles == null ? void 0 : styles.itemIcon
+      }
+    );
+  }, [context.prefixCls, nodeState, loading]);
+  const dropIndicatorNode = import_react.default.useMemo(() => {
+    const rootDraggable = Boolean(context.draggable);
+    const showIndicator = !props.disabled && rootDraggable && context.dragOverNodeKey === eventKey;
+    if (!showIndicator) {
+      return null;
+    }
+    return context.dropIndicatorRender({
+      dropPosition: context.dropPosition,
+      dropLevelOffset: context.dropLevelOffset,
+      indent: context.indent,
+      prefixCls: context.prefixCls,
+      direction: context.direction
+    });
+  }, [
+    context.dropPosition,
+    context.dropLevelOffset,
+    context.indent,
+    context.prefixCls,
+    context.direction,
+    context.draggable,
+    context.dragOverNodeKey,
+    context.dropIndicatorRender
+  ]);
+  const selectorNode = import_react.default.useMemo(() => {
+    const { title = defaultTitle } = props;
+    const wrapClass = `${context.prefixCls}-node-content-wrapper`;
+    let $icon;
+    if (context.showIcon) {
+      const currentIcon = props.icon || context.icon;
+      $icon = currentIcon ? /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(treeClassNames == null ? void 0 : treeClassNames.itemIcon, `${context.prefixCls}-iconEle`, `${context.prefixCls}-icon__customize`), style: styles == null ? void 0 : styles.itemIcon }, typeof currentIcon === "function" ? currentIcon(props) : currentIcon) : iconNode;
+    } else if (context.loadData && loading) {
+      $icon = iconNode;
+    }
+    let titleNode;
+    if (typeof title === "function") {
+      titleNode = title(data);
+    } else if (context.titleRender) {
+      titleNode = context.titleRender(data);
+    } else {
+      titleNode = title;
+    }
+    return /* @__PURE__ */ import_react.default.createElement(
+      "span",
+      {
+        ref: selectHandleRef,
+        title: typeof title === "string" ? title : "",
+        className: (0, import_classnames.default)(wrapClass, `${wrapClass}-${nodeState || "normal"}`, {
+          [`${context.prefixCls}-node-selected`]: !isDisabled && (selected || dragNodeHighlight)
+        }),
+        onMouseEnter,
+        onMouseLeave,
+        onContextMenu,
+        onClick: onSelectorClick,
+        onDoubleClick: onSelectorDoubleClick
+      },
+      $icon,
+      /* @__PURE__ */ import_react.default.createElement("span", { className: (0, import_classnames.default)(`${context.prefixCls}-title`, treeClassNames == null ? void 0 : treeClassNames.itemTitle), style: styles == null ? void 0 : styles.itemTitle }, titleNode),
+      dropIndicatorNode
+    );
+  }, [
+    context.prefixCls,
+    context.showIcon,
+    props,
+    context.icon,
+    iconNode,
+    context.titleRender,
+    data,
+    nodeState,
+    onMouseEnter,
+    onMouseLeave,
+    onContextMenu,
+    onSelectorClick,
+    onSelectorDoubleClick
+  ]);
+  const dataOrAriaAttributeProps = (0, import_pickAttrs.default)(otherProps, { aria: true, data: true });
+  const { level } = (0, import_keyUtil.default)(context.keyEntities, eventKey) || {};
+  const isEndNode = isEnd[isEnd.length - 1];
+  const draggableWithoutDisabled = !isDisabled && isDraggable;
+  const dragging = context.draggingNodeKey === eventKey;
+  const ariaSelected = selectable !== void 0 ? { "aria-selected": !!selectable } : void 0;
+  return /* @__PURE__ */ import_react.default.createElement(
+    "div",
+    {
+      ref: domRef,
+      role: "treeitem",
+      "aria-expanded": isLeaf ? void 0 : expanded,
+      className: (0, import_classnames.default)(className, `${context.prefixCls}-treenode`, treeClassNames == null ? void 0 : treeClassNames.item, {
+        [`${context.prefixCls}-treenode-disabled`]: isDisabled,
+        [`${context.prefixCls}-treenode-switcher-${expanded ? "open" : "close"}`]: !isLeaf,
+        [`${context.prefixCls}-treenode-checkbox-checked`]: checked,
+        [`${context.prefixCls}-treenode-checkbox-indeterminate`]: halfChecked,
+        [`${context.prefixCls}-treenode-selected`]: selected,
+        [`${context.prefixCls}-treenode-loading`]: loading,
+        [`${context.prefixCls}-treenode-active`]: active,
+        [`${context.prefixCls}-treenode-leaf-last`]: isEndNode,
+        [`${context.prefixCls}-treenode-draggable`]: isDraggable,
+        dragging,
+        "drop-target": context.dropTargetKey === eventKey,
+        "drop-container": context.dropContainerKey === eventKey,
+        "drag-over": !isDisabled && dragOver,
+        "drag-over-gap-top": !isDisabled && dragOverGapTop,
+        "drag-over-gap-bottom": !isDisabled && dragOverGapBottom,
+        "filter-node": (_b = context.filterTreeNode) == null ? void 0 : _b.call(context, (0, import_treeUtil.convertNodePropsToEventData)(props)),
+        [`${context.prefixCls}-treenode-leaf`]: memoizedIsLeaf
+      }),
+      style: { ...style, ...styles == null ? void 0 : styles.item },
+      draggable: draggableWithoutDisabled,
+      onDragStart: draggableWithoutDisabled ? onDragStart : void 0,
+      onDragEnter: isDraggable ? onDragEnter : void 0,
+      onDragOver: isDraggable ? onDragOver : void 0,
+      onDragLeave: isDraggable ? onDragLeave : void 0,
+      onDrop: isDraggable ? onDrop : void 0,
+      onDragEnd: isDraggable ? onDragEnd : void 0,
+      onMouseMove,
+      ...ariaSelected,
+      ...dataOrAriaAttributeProps
+    },
+    /* @__PURE__ */ import_react.default.createElement(import_Indent.default, { prefixCls: context.prefixCls, level, isStart, isEnd }),
+    dragHandlerNode,
+    renderSwitcher(),
+    checkboxNode,
+    selectorNode
+  );
 };
-var ContextTreeNode = (props) => /* @__PURE__ */ import_react.default.createElement(import_contextTypes.TreeContext.Consumer, null, (context) => /* @__PURE__ */ import_react.default.createElement(InternalTreeNode, { ...props, context }));
-ContextTreeNode.displayName = "TreeNode";
-ContextTreeNode.isTreeNode = 1;
-var TreeNode_default = ContextTreeNode;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  InternalTreeNode
-});
+TreeNode.isTreeNode = 1;
+if (process.env.NODE_ENV !== "production") {
+  TreeNode.displayName = "TreeNode";
+}
+var TreeNode_default = TreeNode;