@rainbow-oh/yee-c 0.6.4 → 0.8.0

package/dist/cjs/Tree/tree.js

@@ -2,8 +2,22 @@ var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
 var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -35,8 +49,11 @@ __export(tree_exports, {
 module.exports = __toCommonJS(tree_exports);
 var import_clsx = __toESM(require("clsx"));
 var import_react = __toESM(require("react"));
+var import_react2 = require("motion/react");
 var import_Config_Provider = require("../Config-Provider");
+var import_useEvent = __toESM(require("../hooks/useEvent"));
 var import_useMergedState = __toESM(require("../hooks/useMergedState"));
+var import_useVirtualList = __toESM(require("../hooks/useVirtualList"));
 var import_mergeContextToProps = __toESM(require("../utils/mergeContextToProps"));
 var import_tree_node = __toESM(require("./tree-node"));
 var import_tree_tools = require("./utils/tree-tools");
@@ -48,11 +65,12 @@ var DEFAULTFIELDNAMES = {
 };
 var TreeContext = (0, import_react.createContext)({
   showIcon: true,
-  selectedKeys: [],
-  checkedKeys: [],
-  expandedKeys: [],
+  selectedUids: /* @__PURE__ */ new Set(),
+  checkedUids: /* @__PURE__ */ new Set(),
+  indeterminateUids: /* @__PURE__ */ new Set(),
+  expandedUids: /* @__PURE__ */ new Set(),
   draggable: false,
-  draggingKey: null,
+  draggingUid: null,
   dropState: null,
   onCheck: () => {
   },
@@ -69,6 +87,62 @@ var TreeContext = (0, import_react.createContext)({
   onNodeDrop: () => {
   }
 });
+var EMPTY_ARRAY = [];
+function keysToUidArray(keys, flatItems) {
+  if (!keys)
+    return void 0;
+  if (keys.length === 0)
+    return EMPTY_ARRAY;
+  const keySet = new Set(keys.map(String));
+  const uids = [];
+  for (const item of flatItems) {
+    if (keySet.has(String(item.key))) {
+      uids.push(item.uid);
+    }
+  }
+  return uids;
+}
+function useStableUidArray(keys, flatItems) {
+  const ref = (0, import_react.useRef)({
+    keys: void 0,
+    result: void 0
+  });
+  const computed = (0, import_react.useMemo)(
+    () => keysToUidArray(keys, flatItems),
+    [keys, flatItems]
+  );
+  if (computed === void 0) {
+    ref.current = { keys, result: void 0 };
+    return void 0;
+  }
+  const prev = ref.current.result;
+  if (prev && prev.length === computed.length && prev.every((v, i) => v === computed[i])) {
+    return prev;
+  }
+  ref.current = { keys, result: computed };
+  return computed;
+}
+function uidsToKeys(uids, map) {
+  const keys = [];
+  for (const uid of uids) {
+    const node = map.get(uid);
+    if (node)
+      keys.push(node.key);
+  }
+  return keys;
+}
+function arrayToSet(arr) {
+  const s = /* @__PURE__ */ new Set();
+  for (const item of arr) {
+    s.add(item);
+  }
+  return s;
+}
+function setToArray(s) {
+  const arr = [];
+  s.forEach((v) => arr.push(v));
+  return arr;
+}
 var Tree = (baseprops) => {
   const { tree } = (0, import_react.useContext)(import_Config_Provider.GlobalContext);
   const props = (0, import_mergeContextToProps.default)(baseprops, tree);
@@ -96,230 +170,391 @@ var Tree = (baseprops) => {
     onDrop,
     onSelect,
     onCheck,
-    onExpand
+    onExpand,
+    virtual = false,
+    height,
+    itemHeight = 28
   } = props;
-  const [mergedSelectedKeys, setMergedSelectedKeys] = (0, import_useMergedState.default)([], {
-    value: selectedKeys,
-    defaultValue: defaultSelectedKeys
-  });
-  const [mergedCheckedKeys, setMergedCheckedKeys] = (0, import_useMergedState.default)([], {
-    value: checkedKeys,
-    defaultValue: defaultCheckedKeys
-  });
   const [flatItems, itemMap] = (0, import_react.useMemo)(
     () => (0, import_tree_tools.tree2array)(dataSource != null ? dataSource : [], fieldNames),
     [dataSource, fieldNames]
   );
-  const allParentKeys = (0, import_react.useMemo)(() => {
-    const keys = [];
-    flatItems.forEach((item) => {
-      if (!item.isLeaf) {
-        keys.push(item.key);
-      }
-    });
-    return keys;
+  const allParentUidArray = (0, import_react.useMemo)(() => {
+    const uids = [];
+    for (const item of flatItems) {
+      if (!item.isLeaf)
+        uids.push(item.uid);
+    }
+    return uids;
   }, [flatItems]);
-  const [mergedExpandedKeys, setMergedExpandedKeys] = (0, import_useMergedState.default)(
-    () => {
-      return defaultExpandAll ? allParentKeys : [];
-    },
+  const stableExpandedValue = useStableUidArray(expandedKeys, flatItems);
+  const stableExpandedDefault = useStableUidArray(defaultExpandedKeys, flatItems);
+  const stableSelectedValue = useStableUidArray(selectedKeys, flatItems);
+  const stableSelectedDefault = useStableUidArray(defaultSelectedKeys, flatItems);
+  const stableCheckedValue = useStableUidArray(checkedKeys, flatItems);
+  const stableCheckedDefault = useStableUidArray(defaultCheckedKeys, flatItems);
+  const [expandedUidArray, setExpandedUidArray] = (0, import_useMergedState.default)(
+    () => defaultExpandAll ? allParentUidArray : [],
+    {
+      value: stableExpandedValue,
+      defaultValue: stableExpandedDefault
+    }
+  );
+  const expandedUidSet = (0, import_react.useMemo)(
+    () => arrayToSet(expandedUidArray),
+    [expandedUidArray]
+  );
+  const [selectedUidArray, setSelectedUidArray] = (0, import_useMergedState.default)(
+    [],
     {
-      value: expandedKeys,
-      defaultValue: defaultExpandedKeys
+      value: stableSelectedValue,
+      defaultValue: stableSelectedDefault
     }
   );
-  const handleCheck = (0, import_react.useCallback)(
-    (event) => {
-      const key = event.target.value;
+  const selectedUidSet = (0, import_react.useMemo)(
+    () => arrayToSet(selectedUidArray),
+    [selectedUidArray]
+  );
+  const [checkedUidArray, setCheckedUidArray] = (0, import_useMergedState.default)([], {
+    value: stableCheckedValue,
+    defaultValue: stableCheckedDefault
+  });
+  const checkedUidSet = (0, import_react.useMemo)(
+    () => arrayToSet(checkedUidArray),
+    [checkedUidArray]
+  );
+  const indeterminateUidSet = (0, import_react.useMemo)(() => {
+    const result = /* @__PURE__ */ new Set();
+    for (const item of flatItems) {
+      if (!item.isLeaf && !checkedUidSet.has(item.uid) && item.childUids && item.childUids.some((cuid) => checkedUidSet.has(cuid))) {
+        result.add(item.uid);
+      }
+    }
+    return result;
+  }, [flatItems, checkedUidSet]);
+  const visibleItems = (0, import_react.useMemo)(() => {
+    const visibleSet = /* @__PURE__ */ new Set();
+    const result = [];
+    for (const item of flatItems) {
+      if (item.depth === 0) {
+        visibleSet.add(item.uid);
+        result.push(item);
+      } else if (item.pUid && visibleSet.has(item.pUid) && expandedUidSet.has(item.pUid)) {
+        visibleSet.add(item.uid);
+        result.push(item);
+      }
+    }
+    return result;
+  }, [flatItems, expandedUidSet]);
+  const handleCheck = (0, import_useEvent.default)(
+    (event, uid) => {
       const checked = event.target.checked;
-      const treeNode = itemMap.get(key);
-      const newKeys = (0, import_tree_tools.getCheckedKeys)({
+      const treeNode = itemMap.get(uid);
+      const newUidSet = (0, import_tree_tools.getCheckedKeys)({
         checked,
-        keys: mergedCheckedKeys,
-        key,
+        keys: checkedUidSet,
+        uid,
         map: itemMap
       });
-      const nodes = newKeys.map((key2) => {
-        var _a;
-        return (_a = itemMap.get(key2)) == null ? void 0 : _a.original;
-      }).filter((node) => node !== void 0);
-      setMergedCheckedKeys(newKeys);
-      const originalNode = treeNode == null ? void 0 : treeNode.original;
-      if (originalNode) {
-        onCheck == null ? void 0 : onCheck(newKeys, {
+      const newUidArr = setToArray(newUidSet);
+      setCheckedUidArray(newUidArr);
+      if (treeNode && onCheck) {
+        const externalKeys = uidsToKeys(newUidArr, itemMap);
+        const nodes = [];
+        newUidSet.forEach((u) => {
+          var _a;
+          const n = (_a = itemMap.get(u)) == null ? void 0 : _a.original;
+          if (n)
+            nodes.push(n);
+        });
+        onCheck(externalKeys, {
           checked,
           checkedNodes: nodes,
-          node: originalNode
+          node: treeNode.original
         });
       }
-    },
-    [mergedCheckedKeys, itemMap, onCheck]
+    }
   );
-  const handleSelect = (0, import_react.useCallback)(
-    (key) => {
-      const selected = mergedSelectedKeys.includes(key);
-      const newKeys = multiple ? selected ? [...mergedSelectedKeys.filter((k) => k !== key)] : [...mergedSelectedKeys, key] : selected ? [] : [key];
-      setMergedSelectedKeys(newKeys);
-      const nodes = newKeys.map((k) => {
-        var _a;
-        return (_a = itemMap.get(k)) == null ? void 0 : _a.original;
-      }).filter((node) => node !== void 0);
-      const treeNode = itemMap.get(key);
-      const originalNode = treeNode == null ? void 0 : treeNode.original;
-      if (originalNode) {
-        onSelect == null ? void 0 : onSelect(newKeys, {
-          selected: !selected,
-          selectedNodes: nodes,
-          node: originalNode
-        });
+  const handleSelect = (0, import_useEvent.default)((uid) => {
+    var _a;
+    const selected = selectedUidSet.has(uid);
+    let newUidArr;
+    if (multiple) {
+      if (selected) {
+        newUidArr = selectedUidArray.filter((u) => u !== uid);
+      } else {
+        newUidArr = [...selectedUidArray, uid];
       }
-    },
-    [mergedSelectedKeys, itemMap, multiple, onSelect]
-  );
-  const handleExpand = (0, import_react.useCallback)(
-    (key) => {
-      const expanded = mergedExpandedKeys.includes(key);
-      const newKeys = expanded ? [...mergedExpandedKeys.filter((k) => k !== key)] : [...mergedExpandedKeys, key];
-      setMergedExpandedKeys(newKeys);
-      const nodes = newKeys.map((k) => {
-        var _a;
-        return (_a = itemMap.get(k)) == null ? void 0 : _a.original;
-      }).filter((node) => node !== void 0);
-      onExpand == null ? void 0 : onExpand(newKeys, {
+    } else {
+      newUidArr = selected ? [] : [uid];
+    }
+    setSelectedUidArray(newUidArr);
+    const treeNode = itemMap.get(uid);
+    if (treeNode && onSelect) {
+      const externalKeys = uidsToKeys(newUidArr, itemMap);
+      const nodes = [];
+      for (const u of newUidArr) {
+        const n = (_a = itemMap.get(u)) == null ? void 0 : _a.original;
+        if (n)
+          nodes.push(n);
+      }
+      onSelect(externalKeys, {
+        selected: !selected,
+        selectedNodes: nodes,
+        node: treeNode.original
+      });
+    }
+  });
+  const handleExpand = (0, import_useEvent.default)((uid) => {
+    var _a;
+    const expanded = expandedUidSet.has(uid);
+    const newUidArr = expanded ? expandedUidArray.filter((u) => u !== uid) : [...expandedUidArray, uid];
+    setExpandedUidArray(newUidArr);
+    if (onExpand) {
+      const externalKeys = uidsToKeys(newUidArr, itemMap);
+      const treeNode = itemMap.get(uid);
+      const nodes = [];
+      for (const u of newUidArr) {
+        const n = (_a = itemMap.get(u)) == null ? void 0 : _a.original;
+        if (n)
+          nodes.push(n);
+      }
+      onExpand(externalKeys, {
         expanded: !expanded,
         expandedNodes: nodes,
-        node: nodes
+        node: treeNode.original
       });
-    },
-    [mergedExpandedKeys, itemMap, onExpand]
-  );
-  const dragKeyRef = (0, import_react.useRef)(null);
-  const [draggingKey, setDraggingKey] = (0, import_react.useState)(null);
+    }
+  });
+  const dragUidRef = (0, import_react.useRef)(null);
+  const [draggingUid, setDraggingUid] = (0, import_react.useState)(null);
   const [dropState, setDropState] = (0, import_react.useState)(null);
-  const isIllegalMove = (0, import_react.useCallback)(
-    (dragKey, dropKey) => {
-      if (dragKey === dropKey)
+  const resolvePosition = (rect, clientY) => {
+    const offset = (clientY - rect.top) / rect.height;
+    if (offset < 0.25)
+      return "before";
+    if (offset > 0.75)
+      return "after";
+    return "inside";
+  };
+  const isIllegalMove = (dragUid, dropUid) => {
+    if (dragUid === dropUid)
+      return true;
+    const dropNode = itemMap.get(dropUid);
+    if (!dropNode)
+      return true;
+    let current = dropNode;
+    while (current) {
+      if (current.pUid === dragUid)
         return true;
-      const dropNode = itemMap.get(dropKey);
-      return !!dropNode && dropNode.path.includes(dragKey);
-    },
-    [itemMap]
-  );
-  const resolvePosition = (0, import_react.useCallback)(
-    (rect, clientY) => {
-      const offset = (clientY - rect.top) / rect.height;
-      if (offset < 0.25)
-        return "before";
-      if (offset > 0.75)
-        return "after";
-      return "inside";
-    },
-    []
-  );
-  const handleDragStart = (0, import_react.useCallback)(
-    (key, e) => {
-      const node = itemMap.get(key);
-      if (node == null ? void 0 : node.disabled) {
-        e.preventDefault();
-        return;
-      }
-      dragKeyRef.current = key;
-      setDraggingKey(key);
-      if (e.dataTransfer) {
-        e.dataTransfer.effectAllowed = "move";
-        try {
-          e.dataTransfer.setData("text/plain", String(key));
-        } catch (e2) {
-        }
-      }
-    },
-    [itemMap]
-  );
-  const handleDragOver = (0, import_react.useCallback)(
-    (key, e) => {
-      const dragKey = dragKeyRef.current;
-      if (dragKey === null)
-        return;
-      if (isIllegalMove(dragKey, key))
-        return;
-      const dropNode = itemMap.get(key);
-      if (!dropNode || dropNode.disabled)
-        return;
-      const position = resolvePosition(
-        e.currentTarget.getBoundingClientRect(),
-        e.clientY
-      );
-      const dragNode = itemMap.get(dragKey);
-      if (allowDrop && dragNode && allowDrop({
-        dragNode: dragNode.original,
-        dropNode: dropNode.original,
-        position
-      }) === false) {
-        return;
-      }
-      e.preventDefault();
-      if (e.dataTransfer)
-        e.dataTransfer.dropEffect = "move";
-      setDropState(
-        (prev) => prev && prev.key === key && prev.position === position ? prev : { key, position }
-      );
-    },
-    [itemMap, isIllegalMove, resolvePosition, allowDrop]
-  );
-  const handleDragLeave = (0, import_react.useCallback)(
-    // Intentionally a no-op: dragleave fires spuriously when crossing child
-    // elements. Drop state is cleared in handleDragEnd at the Tree root.
-    () => {
-    },
-    []
-  );
-  const handleDrop = (0, import_react.useCallback)(
-    (key, e) => {
+      current = current.pUid ? itemMap.get(current.pUid) : void 0;
+    }
+    return false;
+  };
+  const handleDragStart = (0, import_useEvent.default)((uid, e) => {
+    const node = itemMap.get(uid);
+    if (node == null ? void 0 : node.disabled) {
       e.preventDefault();
-      const dragKey = dragKeyRef.current;
-      if (dragKey === null)
-        return;
-      const position = resolvePosition(
-        e.currentTarget.getBoundingClientRect(),
-        e.clientY
-      );
-      if (isIllegalMove(dragKey, key))
-        return;
-      const dragNode = itemMap.get(dragKey);
-      const dropNode = itemMap.get(key);
-      if (!dragNode || !dropNode)
-        return;
-      if (allowDrop && allowDrop({
-        dragNode: dragNode.original,
-        dropNode: dropNode.original,
-        position
-      }) === false) {
-        return;
+      return;
+    }
+    dragUidRef.current = uid;
+    setDraggingUid(uid);
+    if (e.dataTransfer) {
+      e.dataTransfer.effectAllowed = "move";
+      try {
+        e.dataTransfer.setData("text/plain", uid);
+      } catch (e2) {
       }
-      onDrop == null ? void 0 : onDrop({
-        dragNode: dragNode.original,
-        dropNode: dropNode.original,
-        dragKey,
-        dropKey: key,
-        position,
-        dropToGap: position !== "inside"
+    }
+  });
+  const handleDragOver = (0, import_useEvent.default)((uid, e) => {
+    const dragUid = dragUidRef.current;
+    if (dragUid === null)
+      return;
+    if (isIllegalMove(dragUid, uid))
+      return;
+    const dropNode = itemMap.get(uid);
+    if (!dropNode || dropNode.disabled)
+      return;
+    const position = resolvePosition(
+      e.currentTarget.getBoundingClientRect(),
+      e.clientY
+    );
+    const dragNode = itemMap.get(dragUid);
+    if (allowDrop && dragNode && allowDrop({
+      dragNode: dragNode.original,
+      dropNode: dropNode.original,
+      position
+    }) === false) {
+      return;
+    }
+    e.preventDefault();
+    if (e.dataTransfer)
+      e.dataTransfer.dropEffect = "move";
+    setDropState(
+      (prev) => prev && prev.uid === uid && prev.position === position ? prev : { uid, position }
+    );
+  });
+  const handleDragLeave = (0, import_useEvent.default)(() => {
+  });
+  const handleDrop = (0, import_useEvent.default)((uid, e) => {
+    e.preventDefault();
+    const dragUid = dragUidRef.current;
+    if (dragUid === null)
+      return;
+    const position = resolvePosition(
+      e.currentTarget.getBoundingClientRect(),
+      e.clientY
+    );
+    if (isIllegalMove(dragUid, uid))
+      return;
+    const dragNode = itemMap.get(dragUid);
+    const dropNode = itemMap.get(uid);
+    if (!dragNode || !dropNode)
+      return;
+    if (allowDrop && allowDrop({
+      dragNode: dragNode.original,
+      dropNode: dropNode.original,
+      position
+    }) === false) {
+      return;
+    }
+    onDrop == null ? void 0 : onDrop({
+      dragNode: dragNode.original,
+      dropNode: dropNode.original,
+      dragKey: dragNode.key,
+      dropKey: dropNode.key,
+      dragPath: [...dragNode.path, dragNode.key],
+      dropPath: [...dropNode.path, dropNode.key],
+      position,
+      dropToGap: position !== "inside"
+    });
+    if (position === "inside") {
+      setExpandedUidArray((prev) => {
+        if (prev.includes(uid))
+          return prev;
+        return [...prev, uid];
       });
-      if (position === "inside") {
-        setMergedExpandedKeys(
-          (prev) => prev.includes(key) ? prev : [...prev, key]
-        );
-      }
-      dragKeyRef.current = null;
-      setDraggingKey(null);
-      setDropState(null);
-    },
-    [itemMap, isIllegalMove, resolvePosition, allowDrop, onDrop]
-  );
-  const handleDragEnd = (0, import_react.useCallback)(() => {
-    dragKeyRef.current = null;
-    setDraggingKey(null);
+    }
+    dragUidRef.current = null;
+    setDraggingUid(null);
+    setDropState(null);
+  });
+  const handleDragEnd = (0, import_useEvent.default)(() => {
+    dragUidRef.current = null;
+    setDraggingUid(null);
     setDropState(null);
-  }, []);
+  });
+  const contextValue = (0, import_react.useMemo)(
+    () => ({
+      prefixCls,
+      checkable,
+      showIcon,
+      icon,
+      showLine,
+      switcherIcon,
+      selectedUids: selectedUidSet,
+      checkedUids: checkedUidSet,
+      indeterminateUids: indeterminateUidSet,
+      expandedUids: expandedUidSet,
+      draggable,
+      draggingUid,
+      dropState,
+      onCheck: handleCheck,
+      onSelect: handleSelect,
+      onExpand: handleExpand,
+      onNodeDragStart: handleDragStart,
+      onNodeDragOver: handleDragOver,
+      onNodeDragLeave: handleDragLeave,
+      onNodeDrop: handleDrop
+    }),
+    [
+      prefixCls,
+      checkable,
+      showIcon,
+      icon,
+      showLine,
+      switcherIcon,
+      selectedUidSet,
+      checkedUidSet,
+      indeterminateUidSet,
+      expandedUidSet,
+      draggable,
+      draggingUid,
+      dropState,
+      // handlers are stable (useEvent), but listed for correctness
+      handleCheck,
+      handleSelect,
+      handleExpand,
+      handleDragStart,
+      handleDragOver,
+      handleDragLeave,
+      handleDrop
+    ]
+  );
+  const useVirtual = virtual && height !== null && height !== void 0;
+  const { start, end, offsetY, totalHeight, viewportRef, onScroll } = (0, import_useVirtualList.default)({
+    itemCount: useVirtual ? visibleItems.length : 0,
+    itemHeight,
+    overscan: 4
+  });
+  if (useVirtual) {
+    const slicedItems = visibleItems.slice(start, end);
+    return /* @__PURE__ */ import_react.default.createElement(
+      "div",
+      {
+        className: (0, import_clsx.default)(prefixCls, className),
+        style,
+        onDragEnd: handleDragEnd
+      },
+      /* @__PURE__ */ import_react.default.createElement(TreeContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement(
+        "div",
+        {
+          ref: viewportRef,
+          onScroll,
+          style: { height, overflowY: "auto" }
+        },
+        /* @__PURE__ */ import_react.default.createElement("div", { style: { height: totalHeight, position: "relative" } }, slicedItems.map((node, i) => /* @__PURE__ */ import_react.default.createElement(
+          import_tree_node.default,
+          {
+            node,
+            key: node.uid,
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              height: itemHeight,
+              transform: `translateY(${offsetY + i * itemHeight}px)`
+            }
+          }
+        )))
+      ))
+    );
+  }
+  const segments = [];
+  let currentGroup = null;
+  for (const node of visibleItems) {
+    if (node.depth === 0) {
+      if (currentGroup) {
+        segments.push(__spreadValues({ type: "group" }, currentGroup));
+        currentGroup = null;
+      }
+      segments.push({ type: "node", node });
+    } else {
+      if (currentGroup && currentGroup.pUid === node.pUid) {
+        currentGroup.nodes.push(node);
+      } else {
+        if (currentGroup) {
+          segments.push(__spreadValues({ type: "group" }, currentGroup));
+        }
+        currentGroup = { pUid: node.pUid, nodes: [node] };
+      }
+    }
+  }
+  if (currentGroup) {
+    segments.push(__spreadValues({ type: "group" }, currentGroup));
+  }
   return /* @__PURE__ */ import_react.default.createElement(
     "div",
     {
@@ -327,33 +562,23 @@ var Tree = (baseprops) => {
       style,
       onDragEnd: handleDragEnd
     },
-    /* @__PURE__ */ import_react.default.createElement(
-      TreeContext.Provider,
-      {
-        value: {
-          prefixCls,
-          checkable,
-          showIcon,
-          icon,
-          showLine,
-          switcherIcon,
-          selectedKeys: mergedSelectedKeys,
-          checkedKeys: mergedCheckedKeys,
-          expandedKeys: mergedExpandedKeys,
-          draggable,
-          draggingKey,
-          dropState,
-          onCheck: handleCheck,
-          onSelect: handleSelect,
-          onExpand: handleExpand,
-          onNodeDragStart: handleDragStart,
-          onNodeDragOver: handleDragOver,
-          onNodeDragLeave: handleDragLeave,
-          onNodeDrop: handleDrop
-        }
-      },
-      flatItems.map((node, index) => /* @__PURE__ */ import_react.default.createElement(import_tree_node.default, { node, key: node.key || index }))
-    )
+    /* @__PURE__ */ import_react.default.createElement(TreeContext.Provider, { value: contextValue }, /* @__PURE__ */ import_react.default.createElement(import_react2.AnimatePresence, { initial: false }, segments.map((segment) => {
+      if (segment.type === "node") {
+        return /* @__PURE__ */ import_react.default.createElement(import_tree_node.default, { node: segment.node, key: segment.node.uid });
+      }
+      return /* @__PURE__ */ import_react.default.createElement(
+        import_react2.motion.div,
+        {
+          key: segment.pUid + "
children",
+          initial: { height: 0, opacity: 0 },
+          animate: { height: "auto", opacity: 1 },
+          exit: { height: 0, opacity: 0 },
+          transition: { duration: 0.15 },
+          style: { overflow: "hidden" }
+        },
+        segment.nodes.map((node) => /* @__PURE__ */ import_react.default.createElement(import_tree_node.default, { node, key: node.uid }))
+      );
+    })))
   );
 };
 var tree_default = Tree;