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

package/dist/Tree/TreeNode.js

@@ -1,477 +1,371 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+var _excluded = ["eventKey", "className", "style", "dragOver", "dragOverGapTop", "dragOverGapBottom", "isLeaf", "isStart", "isEnd", "expanded", "selected", "checked", "halfChecked", "loading", "domRef", "active", "data", "onMouseMove", "selectable"];
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/* eslint-disable react-hooks/exhaustive-deps */
+import classNames from 'classnames';
+import React from 'react';
+import Indent from "./Indent";
+import { TreeContext, UnstableContext } from "./contextTypes";
+import getEntity from "./utils/keyUtil";
+import pickAttrs from "./utils/pickAttrs";
+import { convertNodePropsToEventData } from "./utils/treeUtil";
+var ICON_OPEN = 'open';
+var ICON_CLOSE = 'close';
+var defaultTitle = '---';
+var TreeNode = function TreeNode(props) {
+  var _unstableContext$node, _context$filterTreeNo, _classNames4;
+  var eventKey = props.eventKey,
+    className = props.className,
+    style = props.style,
+    dragOver = props.dragOver,
+    dragOverGapTop = props.dragOverGapTop,
+    dragOverGapBottom = props.dragOverGapBottom,
+    isLeaf = props.isLeaf,
+    isStart = props.isStart,
+    isEnd = props.isEnd,
+    expanded = props.expanded,
+    selected = props.selected,
+    checked = props.checked,
+    halfChecked = props.halfChecked,
+    loading = props.loading,
+    domRef = props.domRef,
+    active = props.active,
+    data = props.data,
+    onMouseMove = props.onMouseMove,
+    selectable = props.selectable,
+    otherProps = _objectWithoutProperties(props, _excluded);
+  var context = React.useContext(TreeContext);
+  var _ref = context || {},
+    treeClassNames = _ref.classNames,
+    styles = _ref.styles;
+  var unstableContext = React.useContext(UnstableContext);
+  var selectHandleRef = React.useRef(null);
+  var _React$useState = React.useState(false),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    dragNodeHighlight = _React$useState2[0],
+    setDragNodeHighlight = _React$useState2[1];
 
-// 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_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, 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;
-    if (typeof selectable === "boolean") {
+  // ======= State: Disabled State =======
+  var isDisabled = !!(context.disabled || props.disabled || (_unstableContext$node = unstableContext.nodeDisabled) !== null && _unstableContext$node !== void 0 && _unstableContext$node.call(unstableContext, data));
+  var isCheckable = React.useMemo(function () {
+    // Return false if tree or treeNode is not checkable
+    if (!context.checkable || props.checkable === false) {
+      return false;
+    }
+    return context.checkable;
+  }, [context.checkable, props.checkable]);
+
+  // ======= Event Handlers: Selection and Check =======
+  var onSelect = function onSelect(e) {
+    if (isDisabled) {
+      return;
+    }
+    context.onNodeSelect(e, convertNodePropsToEventData(props));
+  };
+  var onCheck = function onCheck(e) {
+    if (isDisabled) {
+      return;
+    }
+    if (!isCheckable || props.disableCheckbox) {
+      return;
+    }
+    context.onNodeCheck(e, convertNodePropsToEventData(props), !checked);
+  };
+
+  // ======= State: Selectable Check =======
+  var isSelectable = React.useMemo(function () {
+    // Ignore when selectable is undefined or null
+    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 /* @__PURE__ */ import_react.default.createElement(
-      "div",
-      {
-        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))
-        }),
-        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
-      },
-      /* @__PURE__ */ import_react.default.createElement(import_Indent.default, { prefixCls, level, isStart, isEnd }),
-      this.renderDragHandler(),
-      this.renderSwitcher(),
-      this.renderCheckbox(),
-      this.renderSelector()
-    );
-  }
-};
-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.defaultProps = {
-  title: defaultTitle
+    return context.selectable;
+  }, [selectable, context.selectable]);
+  var onSelectorClick = function onSelectorClick(e) {
+    // Click trigger before select/check operation
+    context.onNodeClick(e, convertNodePropsToEventData(props));
+    if (isSelectable) {
+      onSelect(e);
+    } else {
+      onCheck(e);
+    }
+  };
+  var onSelectorDoubleClick = function onSelectorDoubleClick(e) {
+    context.onNodeDoubleClick(e, convertNodePropsToEventData(props));
+  };
+  var onMouseEnter = function onMouseEnter(e) {
+    context.onNodeMouseEnter(e, convertNodePropsToEventData(props));
+  };
+  var onMouseLeave = function onMouseLeave(e) {
+    context.onNodeMouseLeave(e, convertNodePropsToEventData(props));
+  };
+  var onContextMenu = function onContextMenu(e) {
+    context.onNodeContextMenu(e, convertNodePropsToEventData(props));
+  };
+
+  // ======= Drag: Drag Enabled =======
+  var isDraggable = React.useMemo(function () {
+    return !!(context.draggable && (!context.draggable.nodeDraggable || context.draggable.nodeDraggable(data)));
+  }, [context.draggable, data]);
+
+  // ======= Drag: Drag Event Handlers =======
+  var onDragStart = function onDragStart(e) {
+    e.stopPropagation();
+    setDragNodeHighlight(true);
+    context.onNodeDragStart(e, props);
+    try {
+      // ie throw error
+      // firefox-need-it
+      e.dataTransfer.setData('text/plain', '');
+    } catch (_unused) {
+      // empty
+    }
+  };
+  var onDragEnter = function onDragEnter(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    context.onNodeDragEnter(e, props);
+  };
+  var onDragOver = function onDragOver(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    context.onNodeDragOver(e, props);
+  };
+  var onDragLeave = function onDragLeave(e) {
+    e.stopPropagation();
+    context.onNodeDragLeave(e, props);
+  };
+  var onDragEnd = function onDragEnd(e) {
+    e.stopPropagation();
+    setDragNodeHighlight(false);
+    context.onNodeDragEnd(e, props);
+  };
+  var onDrop = function onDrop(e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setDragNodeHighlight(false);
+    context.onNodeDrop(e, props);
+  };
+
+  // ======= Expand: Node Expansion =======
+  var onExpand = function onExpand(e) {
+    if (loading) {
+      return;
+    }
+    context.onNodeExpand(e, convertNodePropsToEventData(props));
+  };
+
+  // ======= State: Has Children =======
+  var hasChildren = React.useMemo(function () {
+    var _ref2 = getEntity(context.keyEntities, eventKey) || {},
+      children = _ref2.children;
+    return Boolean((children || []).length);
+  }, [context.keyEntities, eventKey]);
+
+  // ======= State: Leaf Check =======
+  var memoizedIsLeaf = React.useMemo(function () {
+    if (isLeaf === false) {
+      return false;
+    }
+    return isLeaf || !context.loadData && !hasChildren || context.loadData && props.loaded && !hasChildren;
+  }, [isLeaf, context.loadData, hasChildren, props.loaded]);
+
+  // ============== Effect ==============
+  React.useEffect(function () {
+    // Load data to avoid default expanded tree without data
+    if (loading) {
+      return;
+    }
+    // read from state to avoid loadData at same time
+    if (typeof context.loadData === 'function' && expanded && !memoizedIsLeaf && !props.loaded) {
+      // We needn't reload data when has children in sync logic
+      // It's only needed in node expanded
+      context.onNodeLoad(convertNodePropsToEventData(props));
+    }
+  }, [loading, context.loadData, context.onNodeLoad, expanded, memoizedIsLeaf, props]);
+
+  // ==================== Render: Drag Handler ====================
+  var dragHandlerNode = React.useMemo(function () {
+    var _context$draggable;
+    if (!((_context$draggable = context.draggable) !== null && _context$draggable !== void 0 && _context$draggable.icon)) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(context.prefixCls, "-draggable-icon")
+    }, context.draggable.icon);
+  }, [context.draggable]);
+
+  // ====================== Render: Switcher ======================
+  var renderSwitcherIconDom = function renderSwitcherIconDom(isInternalLeaf) {
+    var switcherIcon = props.switcherIcon || context.switcherIcon;
+    // if switcherIconDom is null, no render switcher span
+    if (typeof switcherIcon === 'function') {
+      return switcherIcon(_objectSpread(_objectSpread({}, props), {}, {
+        isLeaf: isInternalLeaf
+      }));
+    }
+    return switcherIcon;
+  };
+
+  // Switcher
+  var renderSwitcher = function renderSwitcher() {
+    if (memoizedIsLeaf) {
+      // if switcherIconDom is null, no render switcher span
+      var _switcherIconDom = renderSwitcherIconDom(true);
+      return _switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
+        className: classNames("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher-noop"))
+      }, _switcherIconDom) : null;
+    }
+    var switcherIconDom = renderSwitcherIconDom(false);
+    return switcherIconDom !== false ? /*#__PURE__*/React.createElement("span", {
+      onClick: onExpand,
+      className: classNames("".concat(context.prefixCls, "-switcher"), "".concat(context.prefixCls, "-switcher_").concat(expanded ? ICON_OPEN : ICON_CLOSE))
+    }, switcherIconDom) : null;
+  };
+
+  // ====================== Checkbox ======================
+  var checkboxNode = React.useMemo(function () {
+    if (!isCheckable) {
+      return null;
+    }
+
+    // [Legacy] Custom element should be separate with `checkable` in future
+    var $custom = typeof isCheckable !== 'boolean' ? isCheckable : null;
+    return /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(context.prefixCls, "-checkbox"), _defineProperty(_defineProperty(_defineProperty({}, "".concat(context.prefixCls, "-checkbox-checked"), checked), "".concat(context.prefixCls, "-checkbox-indeterminate"), !checked && halfChecked), "".concat(context.prefixCls, "-checkbox-disabled"), isDisabled || props.disableCheckbox)),
+      onClick: onCheck,
+      role: "checkbox",
+      "aria-checked": halfChecked ? 'mixed' : checked,
+      "aria-disabled": isDisabled || props.disableCheckbox,
+      "aria-label": "Select ".concat(typeof props.title === 'string' ? props.title : 'tree node')
+    }, $custom);
+  }, [isCheckable, checked, halfChecked, isDisabled, props.disableCheckbox, props.title]);
+
+  // ============== State: Node State (Open/Close) ==============
+  var nodeState = React.useMemo(function () {
+    if (memoizedIsLeaf) {
+      return null;
+    }
+    return expanded ? ICON_OPEN : ICON_CLOSE;
+  }, [memoizedIsLeaf, expanded]);
+
+  // ==================== Render: Title + Icon ====================
+  var iconNode = React.useMemo(function () {
+    return /*#__PURE__*/React.createElement("span", {
+      className: classNames(treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.itemIcon, "".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__").concat(nodeState || 'docu'), _defineProperty({}, "".concat(context.prefixCls, "-icon_loading"), loading)),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
+    });
+  }, [context.prefixCls, nodeState, loading]);
+
+  // =================== Drop Indicator ===================
+  var dropIndicatorNode = React.useMemo(function () {
+    var rootDraggable = Boolean(context.draggable);
+    // allowDrop is calculated in Tree.tsx, there is no need for calc it here
+    var 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]);
+
+  // Icon + Title
+  var selectorNode = React.useMemo(function () {
+    var _props$title = props.title,
+      title = _props$title === void 0 ? defaultTitle : _props$title;
+    var wrapClass = "".concat(context.prefixCls, "-node-content-wrapper");
+
+    // Icon - Still show loading icon when loading without showIcon
+    var $icon;
+    if (context.showIcon) {
+      var currentIcon = props.icon || context.icon;
+      $icon = currentIcon ? /*#__PURE__*/React.createElement("span", {
+        className: classNames(treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.itemIcon, "".concat(context.prefixCls, "-iconEle"), "".concat(context.prefixCls, "-icon__customize")),
+        style: styles === null || styles === void 0 ? void 0 : styles.itemIcon
+      }, typeof currentIcon === 'function' ? currentIcon(props) : currentIcon) : iconNode;
+    } else if (context.loadData && loading) {
+      $icon = iconNode;
+    }
+
+    // Title
+    var titleNode;
+    if (typeof title === 'function') {
+      titleNode = title(data);
+    } else if (context.titleRender) {
+      titleNode = context.titleRender(data);
+    } else {
+      titleNode = title;
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      ref: selectHandleRef,
+      title: typeof title === 'string' ? title : '',
+      className: classNames(wrapClass, "".concat(wrapClass, "-").concat(nodeState || 'normal'), _defineProperty({}, "".concat(context.prefixCls, "-node-selected"), !isDisabled && (selected || dragNodeHighlight))),
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onContextMenu: onContextMenu,
+      onClick: onSelectorClick,
+      onDoubleClick: onSelectorDoubleClick
+    }, $icon, /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(context.prefixCls, "-title"), treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.itemTitle),
+      style: styles === null || styles === void 0 ? void 0 : styles.itemTitle
+    }, titleNode), dropIndicatorNode);
+  }, [context.prefixCls, context.showIcon, props, context.icon, iconNode, context.titleRender, data, nodeState, onMouseEnter, onMouseLeave, onContextMenu, onSelectorClick, onSelectorDoubleClick]);
+  var dataOrAriaAttributeProps = pickAttrs(otherProps, {
+    aria: true,
+    data: true
+  });
+  var _ref3 = getEntity(context.keyEntities, eventKey) || {},
+    level = _ref3.level;
+  var isEndNode = isEnd[isEnd.length - 1];
+  var draggableWithoutDisabled = !isDisabled && isDraggable;
+  var dragging = context.draggingNodeKey === eventKey;
+  var ariaSelected = selectable !== undefined ? {
+    'aria-selected': !!selectable
+  } : undefined;
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: domRef,
+    role: "treeitem",
+    "aria-expanded": isLeaf ? undefined : expanded,
+    className: classNames(className, "".concat(context.prefixCls, "-treenode"), treeClassNames === null || treeClassNames === void 0 ? void 0 : treeClassNames.item, (_classNames4 = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames4, "".concat(context.prefixCls, "-treenode-disabled"), isDisabled), "".concat(context.prefixCls, "-treenode-switcher-").concat(expanded ? 'open' : 'close'), !isLeaf), "".concat(context.prefixCls, "-treenode-checkbox-checked"), checked), "".concat(context.prefixCls, "-treenode-checkbox-indeterminate"), halfChecked), "".concat(context.prefixCls, "-treenode-selected"), selected), "".concat(context.prefixCls, "-treenode-loading"), loading), "".concat(context.prefixCls, "-treenode-active"), active), "".concat(context.prefixCls, "-treenode-leaf-last"), isEndNode), "".concat(context.prefixCls, "-treenode-draggable"), isDraggable), "dragging", dragging), _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_classNames4, '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', (_context$filterTreeNo = context.filterTreeNode) === null || _context$filterTreeNo === void 0 ? void 0 : _context$filterTreeNo.call(context, convertNodePropsToEventData(props))), "".concat(context.prefixCls, "-treenode-leaf"), memoizedIsLeaf))),
+    style: _objectSpread(_objectSpread({}, style), styles === null || styles === void 0 ? void 0 : styles.item)
+    // Draggable config
+    ,
+    draggable: draggableWithoutDisabled,
+    onDragStart: draggableWithoutDisabled ? onDragStart : undefined
+    // Drop config
+    ,
+    onDragEnter: isDraggable ? onDragEnter : undefined,
+    onDragOver: isDraggable ? onDragOver : undefined,
+    onDragLeave: isDraggable ? onDragLeave : undefined,
+    onDrop: isDraggable ? onDrop : undefined,
+    onDragEnd: isDraggable ? onDragEnd : undefined,
+    onMouseMove: onMouseMove
+  }, ariaSelected, dataOrAriaAttributeProps), /*#__PURE__*/React.createElement(Indent, {
+    prefixCls: context.prefixCls,
+    level: level,
+    isStart: isStart,
+    isEnd: isEnd
+  }), dragHandlerNode, renderSwitcher(), checkboxNode, selectorNode);
 };
-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';
+}
+export default TreeNode;