@react-fabric/data 1.0.0-beta.26 → 1.0.0-beta.27

package/dist/cjs/tree/TreeNode.js

@@ -63,7 +63,14 @@ var TreeNode = function TreeNode(_ref) {
     className: classNames("flex flex-nowrap items-center", node.leaf ? leafClassName : nodeClassName),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
-    children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsxRuntime.jsx("div", {
+    children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        rtlFlip: true,
+        icon: core.CoreIcons.spinner,
+        className: "animate-spin text-muted"
+      })
+    }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         rtlFlip: true,
@@ -84,7 +91,7 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
-      className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
+      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
       onClick: function onClick() {
         _onClick === null || _onClick === void 0 || _onClick(node.id, node.data);

package/dist/cjs/tree/TreePanel.js

@@ -31,9 +31,9 @@ var TreePanel = function TreePanel(_ref) {
     defaultNodeIcon = _ref.defaultNodeIcon,
     _ref$expander = _ref.expander,
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
-    onChecked = _ref.onChecked;
-    _ref.onLoad;
-    var onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked,
+    onLoad = _ref.onLoad,
+    onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
     makeLabel = _ref.makeLabel,
@@ -49,6 +49,7 @@ var TreePanel = function TreePanel(_ref) {
       selected: selected,
       matcher: matcher,
       sorter: sorter,
+      onLoad: onLoad,
       onSelect: onSelect,
       onChecked: onChecked,
       defaultExpanded: defaultExpanded,

package/dist/cjs/tree/useTree.js

@@ -21,6 +21,7 @@ var useTree = function useTree(_ref) {
     selected = _ref.selected,
     sorter = _ref.sorter,
     matcher = _ref.matcher,
+    onLoad = _ref.onLoad,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -29,6 +30,7 @@ var useTree = function useTree(_ref) {
     onSelect: onSelect,
     onChecked: onChecked
   });
+  var intialExpand = react.useRef(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : utilities.EMPTY_ARRAY);
   var itemList = createItemList(items);
   var fireExpandToggle = react.useCallback(function (itemMap) {
     var expandedList = itemMap.filter(function (node) {
@@ -38,6 +40,41 @@ var useTree = function useTree(_ref) {
     });
     onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
   }, [onExpandToggle]);
+  var loadChildren = react.useCallback(function (node) {
+    var _node$children;
+    if (node.open && !node.leaf && !((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length)) {
+      node.loading = true;
+      void Promise.resolve(onLoad === null || onLoad === void 0 ? void 0 : onLoad(node.id)).then(function () {
+        var resp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : utilities.EMPTY_ARRAY;
+        node.children = utils.refactorTree(resp, {
+          sorter: sorter,
+          defaultExpanded: defaultExpanded
+        }, {
+          level: node.level + 1,
+          parent: node.id
+        });
+      })["finally"](function () {
+        var _intialExpand$current;
+        node.loading = false;
+        dispatch({
+          type: "loaded"
+        });
+        ((_intialExpand$current = intialExpand.current) === null || _intialExpand$current === void 0 ? void 0 : _intialExpand$current.length) > 0 && dispatch({
+          type: "expand",
+          id: intialExpand.current.shift()
+        });
+      });
+    } else {
+      var _intialExpand$current2;
+      dispatch({
+        type: "loaded"
+      });
+      ((_intialExpand$current2 = intialExpand.current) === null || _intialExpand$current2 === void 0 ? void 0 : _intialExpand$current2.length) > 0 && dispatch({
+        type: "expand",
+        id: intialExpand.current.shift()
+      });
+    }
+  }, [onLoad]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "load") {
         state.items = utils.refactorTree(action.items, {
@@ -50,23 +87,37 @@ var useTree = function useTree(_ref) {
       }
       if (action.type === "toggleExpand") {
         var node = state.itemMap.get(action.id);
-        node && (node.open = !node.open);
+        if (node && !node.leaf) {
+          node && (node.open = !node.open);
+          loadChildren(node);
+          return _objectSpread({}, state);
+        }
+      }
+      if (action.type === "loaded") {
+        state.itemMap = utils.makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
+        state.selected && utils.updateSelection(state.itemMap, state.selected, true);
         return _objectSpread({}, state);
       }
       if (action.type === "expand") {
-        // TODO: check if children available, if not call onLoad to fetch node children
         var _node = state.itemMap.get(action.id);
-        _node && (_node.open = true);
-        fireExpandToggle(Array.from(state.itemMap.values()));
-        state.tree = utils.flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (_node && !_node.leaf) {
+          _node.open = true;
+          var parentId = _node.parent;
+          while (parentId) {
+            var _node2 = state.itemMap.get(parentId);
+            _node2 && (_node2.open = true);
+            parentId = _node2 === null || _node2 === void 0 ? void 0 : _node2.parent;
+          }
+          loadChildren(_node);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "expandAll") {
-        // TODO: prevent opening dynamic nodes that dont have children
         state.itemMap.forEach(function (node) {
-          !node.leaf && (node.open = true);
+          var _node$children2;
+          !node.leaf && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) && (node.open = true);
         });
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
@@ -134,10 +185,15 @@ var useTree = function useTree(_ref) {
     };
   }, [onSelect, onChecked]);
   react.useEffect(function () {
+    var _intialExpand$current3;
     dispatch({
       type: "load",
       items: itemList
     });
+    ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+      type: "expand",
+      id: intialExpand.current.shift()
+    });
   }, [itemList]);
   react.useEffect(function () {
     selected && dispatch({

package/dist/cjs/tree/utils.js

@@ -41,7 +41,8 @@ var refactorTree = function refactorTree(nodes, _ref) {
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach(function (node) {
     list.push(_objectSpread(_objectSpread({
-      open: defaultExpanded.includes(node.id),
+      open: false,
+      // defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,

package/dist/esm/tree/TreeNode.js

@@ -63,7 +63,14 @@ var TreeNode = function TreeNode(_ref) {
     className: classNames("flex flex-nowrap items-center", node.leaf ? leafClassName : nodeClassName),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
-    children: [filler, !node.leaf && !node.childFiltered && /*#__PURE__*/jsx("div", {
+    children: [filler, node.loading && /*#__PURE__*/jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsx(Icon, {
+        rtlFlip: true,
+        icon: CoreIcons.spinner,
+        className: "animate-spin text-muted"
+      })
+    }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsx(Icon, {
         rtlFlip: true,
@@ -84,7 +91,7 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), /*#__PURE__*/jsxs("div", {
       role: "none",
-      className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
+      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
       onClick: function onClick() {
         _onClick === null || _onClick === void 0 || _onClick(node.id, node.data);

package/dist/esm/tree/TreePanel.js

@@ -31,9 +31,9 @@ var TreePanel = function TreePanel(_ref) {
     defaultNodeIcon = _ref.defaultNodeIcon,
     _ref$expander = _ref.expander,
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
-    onChecked = _ref.onChecked;
-    _ref.onLoad;
-    var onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked,
+    onLoad = _ref.onLoad,
+    onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
     makeLabel = _ref.makeLabel,
@@ -49,6 +49,7 @@ var TreePanel = function TreePanel(_ref) {
       selected: selected,
       matcher: matcher,
       sorter: sorter,
+      onLoad: onLoad,
       onSelect: onSelect,
       onChecked: onChecked,
       defaultExpanded: defaultExpanded,

package/dist/esm/tree/useTree.js

@@ -6,7 +6,7 @@ import { useDebounce } from '@react-fabric/core';
 import { EMPTY_ARRAY } from '@react-fabric/utilities';
 import memoizeOne from 'memoize-one';
 import { useRef, useCallback, useReducer, useEffect } from 'react';
-import { refactorTree, makeTreeMap, flattenTree, filterTree, updateSelection, updateChecked } from './utils.js';
+import { refactorTree, makeTreeMap, flattenTree, updateSelection, filterTree, updateChecked } from './utils.js';
 
 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; }
@@ -21,6 +21,7 @@ var useTree = function useTree(_ref) {
     selected = _ref.selected,
     sorter = _ref.sorter,
     matcher = _ref.matcher,
+    onLoad = _ref.onLoad,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -29,6 +30,7 @@ var useTree = function useTree(_ref) {
     onSelect: onSelect,
     onChecked: onChecked
   });
+  var intialExpand = useRef(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : EMPTY_ARRAY);
   var itemList = createItemList(items);
   var fireExpandToggle = useCallback(function (itemMap) {
     var expandedList = itemMap.filter(function (node) {
@@ -38,6 +40,41 @@ var useTree = function useTree(_ref) {
     });
     onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
   }, [onExpandToggle]);
+  var loadChildren = useCallback(function (node) {
+    var _node$children;
+    if (node.open && !node.leaf && !((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length)) {
+      node.loading = true;
+      void Promise.resolve(onLoad === null || onLoad === void 0 ? void 0 : onLoad(node.id)).then(function () {
+        var resp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : EMPTY_ARRAY;
+        node.children = refactorTree(resp, {
+          sorter: sorter,
+          defaultExpanded: defaultExpanded
+        }, {
+          level: node.level + 1,
+          parent: node.id
+        });
+      })["finally"](function () {
+        var _intialExpand$current;
+        node.loading = false;
+        dispatch({
+          type: "loaded"
+        });
+        ((_intialExpand$current = intialExpand.current) === null || _intialExpand$current === void 0 ? void 0 : _intialExpand$current.length) > 0 && dispatch({
+          type: "expand",
+          id: intialExpand.current.shift()
+        });
+      });
+    } else {
+      var _intialExpand$current2;
+      dispatch({
+        type: "loaded"
+      });
+      ((_intialExpand$current2 = intialExpand.current) === null || _intialExpand$current2 === void 0 ? void 0 : _intialExpand$current2.length) > 0 && dispatch({
+        type: "expand",
+        id: intialExpand.current.shift()
+      });
+    }
+  }, [onLoad]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "load") {
         state.items = refactorTree(action.items, {
@@ -50,23 +87,37 @@ var useTree = function useTree(_ref) {
       }
       if (action.type === "toggleExpand") {
         var node = state.itemMap.get(action.id);
-        node && (node.open = !node.open);
+        if (node && !node.leaf) {
+          node && (node.open = !node.open);
+          loadChildren(node);
+          return _objectSpread({}, state);
+        }
+      }
+      if (action.type === "loaded") {
+        state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
+        state.selected && updateSelection(state.itemMap, state.selected, true);
         return _objectSpread({}, state);
       }
       if (action.type === "expand") {
-        // TODO: check if children available, if not call onLoad to fetch node children
         var _node = state.itemMap.get(action.id);
-        _node && (_node.open = true);
-        fireExpandToggle(Array.from(state.itemMap.values()));
-        state.tree = flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (_node && !_node.leaf) {
+          _node.open = true;
+          var parentId = _node.parent;
+          while (parentId) {
+            var _node2 = state.itemMap.get(parentId);
+            _node2 && (_node2.open = true);
+            parentId = _node2 === null || _node2 === void 0 ? void 0 : _node2.parent;
+          }
+          loadChildren(_node);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "expandAll") {
-        // TODO: prevent opening dynamic nodes that dont have children
         state.itemMap.forEach(function (node) {
-          !node.leaf && (node.open = true);
+          var _node$children2;
+          !node.leaf && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) && (node.open = true);
         });
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
@@ -134,10 +185,15 @@ var useTree = function useTree(_ref) {
     };
   }, [onSelect, onChecked]);
   useEffect(function () {
+    var _intialExpand$current3;
     dispatch({
       type: "load",
       items: itemList
     });
+    ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+      type: "expand",
+      id: intialExpand.current.shift()
+    });
   }, [itemList]);
   useEffect(function () {
     selected && dispatch({

package/dist/esm/tree/utils.js

@@ -41,7 +41,8 @@ var refactorTree = function refactorTree(nodes, _ref) {
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach(function (node) {
     list.push(_objectSpread(_objectSpread({
-      open: defaultExpanded.includes(node.id),
+      open: false,
+      // defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,

package/dist/types/tree/useTree.d.ts

@@ -1,5 +1,5 @@
 import { type InternalNode, type TreePanelProps } from "./types";
-export declare const useTree: <T extends KeyValue<any>>({ items, checked, selected, sorter, matcher, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
+export declare const useTree: <T extends KeyValue<any>>({ items, checked, selected, sorter, matcher, onLoad, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
     tree: InternalNode[];
     toggleExpand: (id: string) => void;
     expandAll: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.26",
+  "version": "1.0.0-beta.27",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.26",
-    "@react-fabric/date": "^1.0.0-beta.26",
-    "@react-fabric/form": "^1.0.0-beta.26",
-    "@react-fabric/utilities": "^1.0.0-beta.26",
+    "@react-fabric/core": "^1.0.0-beta.27",
+    "@react-fabric/date": "^1.0.0-beta.27",
+    "@react-fabric/form": "^1.0.0-beta.27",
+    "@react-fabric/utilities": "^1.0.0-beta.27",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -52,5 +52,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "452f821dc8b22c5765b3858cc53ad9d7e2f9bcf1"
+  "gitHead": "02ddac152718fe86b6003f35ea5e1ef1581168f2"
 }

package/src/tree/TreeNode.tsx

@@ -103,7 +103,16 @@ export const TreeNode = ({
       data-test-value={node["data-test-value"]}
     >
       {filler}
-      {!node.leaf && !node.childFiltered && (
+      {node.loading && (
+        <div className="flex-initial w-6">
+          <Icon
+            rtlFlip
+            icon={CoreIcons.spinner}
+            className="animate-spin text-muted"
+          />
+        </div>
+      )}
+      {!node.leaf && !node.childFiltered && !node.loading && (
         <div className="flex-initial w-6">
           <Icon
             rtlFlip
@@ -135,7 +144,7 @@ export const TreeNode = ({
       <div
         role="none"
         className={classNames(
-          "group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
+          "group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
           node.childSelected && "font-medium",
           (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer",
         )}

package/src/tree/TreePanel.tsx

@@ -81,6 +81,7 @@ export const TreePanel = <T extends KeyValue>({
     selected,
     matcher,
     sorter,
+    onLoad,
     onSelect,
     onChecked,
     defaultExpanded,

package/src/tree/useTree.ts

@@ -75,7 +75,11 @@ type TreeActions =
   /**
    * collapse all nodes
    */
-  | { type: "collapseAll" };
+  | { type: "collapseAll" }
+  /**
+   * loaded dynamic nodes
+   */
+  | { type: "loaded" };
 
 interface TreeState {
   items: InternalNode[];
@@ -93,13 +97,14 @@ export const useTree = <T extends KeyValue>({
   selected,
   sorter,
   matcher,
+  onLoad,
   onSelect,
   onChecked,
   defaultExpanded,
   onExpandToggle,
 }: Partial<TreePanelProps<T>>) => {
   const componentEvents = useRef({ onSelect, onChecked });
-
+  const intialExpand = useRef(defaultExpanded ?? EMPTY_ARRAY);
   const itemList = createItemList(items);
 
   const fireExpandToggle = useCallback(
@@ -112,6 +117,39 @@ export const useTree = <T extends KeyValue>({
     [onExpandToggle],
   );
 
+  const loadChildren = useCallback(
+    (node: InternalNode) => {
+      if (node.open && !node.leaf && !node.children?.length) {
+        node.loading = true;
+        void Promise.resolve(onLoad?.(node.id))
+          .then((resp = EMPTY_ARRAY) => {
+            node.children = refactorTree(
+              resp,
+              { sorter, defaultExpanded },
+              { level: node.level + 1, parent: node.id },
+            );
+          })
+          .finally(() => {
+            node.loading = false;
+            dispatch({ type: "loaded" });
+            intialExpand.current?.length > 0 &&
+              dispatch({
+                type: "expand",
+                id: intialExpand.current.shift() as unknown as string,
+              });
+          });
+      } else {
+        dispatch({ type: "loaded" });
+        intialExpand.current?.length > 0 &&
+          dispatch({
+            type: "expand",
+            id: intialExpand.current.shift() as unknown as string,
+          });
+      }
+    },
+    [onLoad],
+  );
+
   const [state, dispatch] = useReducer(
     (state: TreeState, action: TreeActions) => {
       if (action.type === "load") {
@@ -122,23 +160,36 @@ export const useTree = <T extends KeyValue>({
       }
       if (action.type === "toggleExpand") {
         const node = state.itemMap.get(action.id);
-        node && (node.open = !node.open);
+        if (node && !node.leaf) {
+          node && (node.open = !node.open);
+          loadChildren(node);
+          return { ...state };
+        }
+      }
+      if (action.type === "loaded") {
+        state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
+        state.selected && updateSelection(state.itemMap, state.selected, true);
         return { ...state };
       }
       if (action.type === "expand") {
-        // TODO: check if children available, if not call onLoad to fetch node children
         const node = state.itemMap.get(action.id);
-        node && (node.open = true);
-        fireExpandToggle(Array.from(state.itemMap.values()));
-        state.tree = flattenTree(state.items);
-        return { ...state };
+        if (node && !node.leaf) {
+          node.open = true;
+          let parentId = node.parent;
+          while (parentId) {
+            const node = state.itemMap.get(parentId);
+            node && (node.open = true);
+            parentId = node?.parent;
+          }
+          loadChildren(node);
+          return { ...state };
+        }
       }
       if (action.type === "expandAll") {
-        // TODO: prevent opening dynamic nodes that dont have children
         state.itemMap.forEach((node) => {
-          !node.leaf && (node.open = true);
+          !node.leaf && node.children?.length && (node.open = true);
         });
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
@@ -198,6 +249,11 @@ export const useTree = <T extends KeyValue>({
 
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
+    intialExpand.current?.length > 0 &&
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift() as unknown as string,
+      });
   }, [itemList]);
 
   useEffect(() => {

package/src/tree/utils.ts

@@ -58,7 +58,7 @@ export const refactorTree = (
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach((node) => {
     list.push({
-      open: defaultExpanded.includes(node.id),
+      open: false, // defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,