@react-fabric/data 1.0.0-beta.55 → 1.0.0-beta.57

package/dist/cjs/tree/TreeNode.js

@@ -66,6 +66,7 @@ var TreeNode = function TreeNode(_ref) {
     className: classNames("flex flex-nowrap items-center"),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
+    "data-id": node.id,
     children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {

package/dist/cjs/tree/TreePanel.js

@@ -58,10 +58,12 @@ var TreePanel = function TreePanel(_ref) {
     }),
     tree = _useTree.tree,
     query = _useTree.query,
+    currentSelected = _useTree.selected,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
+    expandAndLoad = _useTree.expandAndLoad,
     _select = _useTree.select,
     expand = _useTree.expand,
     onFilter = _useTree.onFilter;
@@ -87,11 +89,22 @@ var TreePanel = function TreePanel(_ref) {
       open: function open(id) {
         return expand(id);
       },
+      openAndLoad: function openAndLoad(list) {
+        return expandAndLoad(list);
+      },
       select: function select(id) {
         return _select(id);
       }
     };
   }, []);
+  react.useEffect(function () {
+    var index = tree.findIndex(function (n) {
+      return n.id === currentSelected;
+    });
+    virtualizer.scrollToIndex(index, {
+      align: "auto"
+    });
+  }, [currentSelected]);
   return /*#__PURE__*/jsxRuntime.jsxs(core.Section, {
     children: [/*#__PURE__*/jsxRuntime.jsxs(core.Header, {
       flex: true,

package/dist/cjs/tree/useTree.js

@@ -2,6 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var memoizeOne = require('memoize-one');
@@ -31,7 +32,7 @@ var useTree = function useTree(_ref) {
     onSelect: onSelect,
     onChecked: onChecked
   });
-  var intialExpand = react.useRef(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : utilities.EMPTY_ARRAY);
+  var intialExpand = react.useRef(_toConsumableArray(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) {
@@ -47,26 +48,29 @@ var useTree = function useTree(_ref) {
     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()
+      // delay onload callback to avoid state issues
+      setTimeout(function () {
+        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()
+          });
         });
-      });
+      }, 100);
     } else {
       var _intialExpand$current2;
       dispatch({
@@ -86,6 +90,9 @@ var useTree = function useTree(_ref) {
     var _componentEvents$curr3, _componentEvents$curr4;
     (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, leafs, nodes, partials);
   }, [onChecked]);
+  var fireQuery = core.useDebounce(function (query) {
+    onQuery === null || onQuery === void 0 || onQuery(query);
+  }, [onQuery]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "load") {
         state.items = utils.refactorTree(action.items, {
@@ -112,7 +119,7 @@ var useTree = function useTree(_ref) {
         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);
+        state.selected = utils.updateSelection(state.itemMap, selected, true);
         (_state$checked = state.checked) === null || _state$checked === void 0 || _state$checked.forEach(function (id) {
           return utils.updateChecked(state.itemMap, id, 1);
         });
@@ -151,8 +158,13 @@ var useTree = function useTree(_ref) {
       }
       if (action.type === "filter") {
         if (onQuery) {
-          var _action$query;
-          onQuery((_action$query = action.query) !== null && _action$query !== void 0 ? _action$query : "");
+          // TODO: onQuery should provide new tree listing
+          // save current tree state as preQueryState
+          // on clearing filter restore preQueryState
+          if (!utilities.isEmpty(action.query)) {
+            // state.prevItems = state.items;
+            fireQuery(action.query);
+          }
         } else {
           utils.filterTree(state.itemMap, action.query, matcher);
           state.tree = utils.flattenTree(state.items);
@@ -162,12 +174,11 @@ var useTree = function useTree(_ref) {
         });
       }
       if (action.type === "toggleSelect") {
-        if (state.selected) {
-          utils.updateSelection(state.itemMap, state.selected);
-        }
         if (!onSelect) {
-          utils.updateSelection(state.itemMap, action.id, true);
-          state.selected = action.id;
+          if (state.selected) {
+            utils.updateSelection(state.itemMap, state.selected);
+          }
+          state.selected = utils.updateSelection(state.itemMap, action.id, true);
           state.tree = utils.flattenTree(state.items);
         } else {
           var _state$itemMap$get;
@@ -179,8 +190,7 @@ var useTree = function useTree(_ref) {
         if (state.selected) {
           utils.updateSelection(state.itemMap, state.selected);
         }
-        utils.updateSelection(state.itemMap, action.id, true);
-        state.selected = action.id;
+        state.selected = utils.updateSelection(state.itemMap, action.id, true);
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -285,6 +295,15 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expandAndLoad = react.useCallback(function (expandList) {
+    if (expandList.length > 0) {
+      intialExpand.current = _toConsumableArray(expandList);
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift()
+      });
+    }
+  }, []);
   var expandAll = react.useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -304,10 +323,12 @@ var useTree = function useTree(_ref) {
   return {
     tree: state.tree,
     query: state.query,
+    selected: state.selected,
     toggleExpand: toggleExpand,
     expandAll: expandAll,
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
+    expandAndLoad: expandAndLoad,
     select: select,
     expand: expand,
     onFilter: onFilter

package/dist/cjs/tree/utils.js

@@ -96,7 +96,7 @@ var flattenTree = function flattenTree(nodes) {
   return list;
 };
 var updateSelection = function updateSelection(nodes, id, selected) {
-  var node = nodes.get(id);
+  var node = nodes.get(id !== null && id !== void 0 ? id : "");
   if (node) {
     // change selection
     node.selected = selected;
@@ -108,6 +108,7 @@ var updateSelection = function updateSelection(nodes, id, selected) {
       // selected && parentNode && (parentNode.open = true);
       parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
     }
+    return id;
   }
 };
 var updateChecked = function updateChecked(list, id, checked) {

package/dist/cjs/virtual/Gallery.js

@@ -211,9 +211,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
                 }, "".concat(key, ":").concat(col));
               })
             }, key);
-          }), onLoadMore && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "h-16",
-            children: loading && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
+          }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
           })]
         })
       }), !hideScroller && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/esm/tree/TreeNode.js

@@ -66,6 +66,7 @@ var TreeNode = function TreeNode(_ref) {
     className: classNames("flex flex-nowrap items-center"),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
+    "data-id": node.id,
     children: [filler, node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsx(Icon, {

package/dist/esm/tree/TreePanel.js

@@ -5,7 +5,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import { CoreIcons, Section, Header, Icon, ButtonGroup, Button } from '@react-fabric/core';
 import { Search } from '@react-fabric/form';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useRef, useMemo, useImperativeHandle } from 'react';
+import { useRef, useMemo, useImperativeHandle, useEffect } from 'react';
 import { TreeNode } from './TreeNode.js';
 import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
@@ -58,10 +58,12 @@ var TreePanel = function TreePanel(_ref) {
     }),
     tree = _useTree.tree,
     query = _useTree.query,
+    currentSelected = _useTree.selected,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
+    expandAndLoad = _useTree.expandAndLoad,
     _select = _useTree.select,
     expand = _useTree.expand,
     onFilter = _useTree.onFilter;
@@ -87,11 +89,22 @@ var TreePanel = function TreePanel(_ref) {
       open: function open(id) {
         return expand(id);
       },
+      openAndLoad: function openAndLoad(list) {
+        return expandAndLoad(list);
+      },
       select: function select(id) {
         return _select(id);
       }
     };
   }, []);
+  useEffect(function () {
+    var index = tree.findIndex(function (n) {
+      return n.id === currentSelected;
+    });
+    virtualizer.scrollToIndex(index, {
+      align: "auto"
+    });
+  }, [currentSelected]);
   return /*#__PURE__*/jsxs(Section, {
     children: [/*#__PURE__*/jsxs(Header, {
       flex: true,

package/dist/esm/tree/useTree.js

@@ -2,8 +2,9 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import { useDebounce } from '@react-fabric/core';
-import { EMPTY_ARRAY } from '@react-fabric/utilities';
+import { EMPTY_ARRAY, isEmpty } from '@react-fabric/utilities';
 import memoizeOne from 'memoize-one';
 import { useRef, useCallback, useReducer, useEffect } from 'react';
 import { refactorTree, makeTreeMap, flattenTree, updateSelection, updateChecked, filterTree } from './utils.js';
@@ -31,7 +32,7 @@ var useTree = function useTree(_ref) {
     onSelect: onSelect,
     onChecked: onChecked
   });
-  var intialExpand = useRef(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : EMPTY_ARRAY);
+  var intialExpand = useRef(_toConsumableArray(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : EMPTY_ARRAY));
   var itemList = createItemList(items);
   var fireExpandToggle = useCallback(function (itemMap) {
     var expandedList = itemMap.filter(function (node) {
@@ -47,26 +48,29 @@ var useTree = function useTree(_ref) {
     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()
+      // delay onload callback to avoid state issues
+      setTimeout(function () {
+        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()
+          });
         });
-      });
+      }, 100);
     } else {
       var _intialExpand$current2;
       dispatch({
@@ -86,6 +90,9 @@ var useTree = function useTree(_ref) {
     var _componentEvents$curr3, _componentEvents$curr4;
     (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, leafs, nodes, partials);
   }, [onChecked]);
+  var fireQuery = useDebounce(function (query) {
+    onQuery === null || onQuery === void 0 || onQuery(query);
+  }, [onQuery]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "load") {
         state.items = refactorTree(action.items, {
@@ -112,7 +119,7 @@ var useTree = function useTree(_ref) {
         state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
-        state.selected && updateSelection(state.itemMap, state.selected, true);
+        state.selected = updateSelection(state.itemMap, selected, true);
         (_state$checked = state.checked) === null || _state$checked === void 0 || _state$checked.forEach(function (id) {
           return updateChecked(state.itemMap, id, 1);
         });
@@ -151,8 +158,13 @@ var useTree = function useTree(_ref) {
       }
       if (action.type === "filter") {
         if (onQuery) {
-          var _action$query;
-          onQuery((_action$query = action.query) !== null && _action$query !== void 0 ? _action$query : "");
+          // TODO: onQuery should provide new tree listing
+          // save current tree state as preQueryState
+          // on clearing filter restore preQueryState
+          if (!isEmpty(action.query)) {
+            // state.prevItems = state.items;
+            fireQuery(action.query);
+          }
         } else {
           filterTree(state.itemMap, action.query, matcher);
           state.tree = flattenTree(state.items);
@@ -162,12 +174,11 @@ var useTree = function useTree(_ref) {
         });
       }
       if (action.type === "toggleSelect") {
-        if (state.selected) {
-          updateSelection(state.itemMap, state.selected);
-        }
         if (!onSelect) {
-          updateSelection(state.itemMap, action.id, true);
-          state.selected = action.id;
+          if (state.selected) {
+            updateSelection(state.itemMap, state.selected);
+          }
+          state.selected = updateSelection(state.itemMap, action.id, true);
           state.tree = flattenTree(state.items);
         } else {
           var _state$itemMap$get;
@@ -179,8 +190,7 @@ var useTree = function useTree(_ref) {
         if (state.selected) {
           updateSelection(state.itemMap, state.selected);
         }
-        updateSelection(state.itemMap, action.id, true);
-        state.selected = action.id;
+        state.selected = updateSelection(state.itemMap, action.id, true);
         state.tree = flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -285,6 +295,15 @@ var useTree = function useTree(_ref) {
       id: id
     });
   }, []);
+  var expandAndLoad = useCallback(function (expandList) {
+    if (expandList.length > 0) {
+      intialExpand.current = _toConsumableArray(expandList);
+      dispatch({
+        type: "expand",
+        id: intialExpand.current.shift()
+      });
+    }
+  }, []);
   var expandAll = useCallback(function () {
     dispatch({
       type: "expandAll"
@@ -304,10 +323,12 @@ var useTree = function useTree(_ref) {
   return {
     tree: state.tree,
     query: state.query,
+    selected: state.selected,
     toggleExpand: toggleExpand,
     expandAll: expandAll,
     collapseAll: collapseAll,
     toggleCheck: toggleCheck,
+    expandAndLoad: expandAndLoad,
     select: select,
     expand: expand,
     onFilter: onFilter

package/dist/esm/tree/utils.js

@@ -96,7 +96,7 @@ var flattenTree = function flattenTree(nodes) {
   return list;
 };
 var updateSelection = function updateSelection(nodes, id, selected) {
-  var node = nodes.get(id);
+  var node = nodes.get(id !== null && id !== void 0 ? id : "");
   if (node) {
     // change selection
     node.selected = selected;
@@ -108,6 +108,7 @@ var updateSelection = function updateSelection(nodes, id, selected) {
       // selected && parentNode && (parentNode.open = true);
       parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
     }
+    return id;
   }
 };
 var updateChecked = function updateChecked(list, id, checked) {

package/dist/esm/virtual/Gallery.js

@@ -211,9 +211,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
                 }, "".concat(key, ":").concat(col));
               })
             }, key);
-          }), onLoadMore && /*#__PURE__*/jsx("div", {
-            className: "h-16",
-            children: loading && /*#__PURE__*/jsx(Skeleton, {})
+          }), loading && /*#__PURE__*/jsx("div", {
+            children: /*#__PURE__*/jsx(Skeleton, {})
           })]
         })
       }), !hideScroller && /*#__PURE__*/jsx("div", {

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

@@ -77,6 +77,7 @@ export interface TreeNodeProps extends ChildProp {
 export interface TreeRef {
     select: (id: string) => void;
     open: (id: string) => void;
+    openAndLoad: (list: string[]) => void;
 }
 export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
     items?: Array<TreeNodeType<T>>;

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

@@ -2,10 +2,12 @@ import { type InternalNode, type TreePanelProps } from "./types";
 export declare const useTree: <T extends KeyValue>({ items, checked, selected, sorter, matcher, onLoad, onQuery, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
     tree: InternalNode[];
     query: string | undefined;
+    selected: string | undefined;
     toggleExpand: (id: string) => void;
     expandAll: () => void;
     collapseAll: () => void;
     toggleCheck: (id: string) => void;
+    expandAndLoad: (expandList: string[]) => void;
     select: (id: string) => void;
     expand: (id: string) => void;
     onFilter: {

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

@@ -8,6 +8,6 @@ export declare const refactorTree: (nodes: TreeNodeType[], { sorter, defaultExpa
 }) => InternalNode[];
 export declare const makeTreeMap: (nodes: InternalNode[], map?: Map<any, any>) => Map<any, any>;
 export declare const flattenTree: (nodes: InternalNode[], lines?: Array<0 | 1 | 2 | 3>) => InternalNode[];
-export declare const updateSelection: (nodes: Map<string, InternalNode>, id: string, selected?: true) => void;
+export declare const updateSelection: (nodes: Map<string, InternalNode>, id?: string, selected?: true) => string | undefined;
 export declare const updateChecked: (list: Map<string, AnyObject>, id: string, checked?: 0 | 1 | 2) => void;
 export declare const filterTree: (nodes: Map<string, InternalNode>, query?: string, matcher?: AnyObject) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.55",
+  "version": "1.0.0-beta.57",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.55",
-    "@react-fabric/date": "^1.0.0-beta.55",
-    "@react-fabric/form": "^1.0.0-beta.55",
+    "@react-fabric/core": "^1.0.0-beta.57",
+    "@react-fabric/date": "^1.0.0-beta.57",
+    "@react-fabric/form": "^1.0.0-beta.57",
     "@react-fabric/utilities": "^1.0.0-beta.52",
     "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "c8454798fb7546174ee8c7ea10e491c5e903e789"
+  "gitHead": "9b596a0a8d6cecaa8479f80c495b64fb42ce739f"
 }

package/src/tree/TreeNode.tsx

@@ -100,6 +100,7 @@ export const TreeNode = ({
       className={classNames("flex flex-nowrap items-center")}
       data-testid={node["data-testid"]}
       data-test-value={node["data-test-value"]}
+      data-id={node.id}
     >
       {filler}
       {node.loading && (

package/src/tree/TreePanel.tsx

@@ -31,7 +31,7 @@ import {
 } from "@react-fabric/core";
 import { Search } from "@react-fabric/form";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useImperativeHandle, useMemo, useRef } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { TreeNode } from "./TreeNode";
 import { iconCollapseAll, iconExpandAll, type TreePanelProps } from "./types";
 import { useTree } from "./useTree";
@@ -110,10 +110,12 @@ export const TreePanel = <T extends KeyValue>({
   const {
     tree,
     query,
+    selected: currentSelected,
     toggleExpand,
     toggleCheck,
     expandAll,
     collapseAll,
+    expandAndLoad,
     select,
     expand,
     onFilter,
@@ -154,11 +156,17 @@ export const TreePanel = <T extends KeyValue>({
     ref,
     () => ({
       open: (id: string) => expand(id),
+      openAndLoad: (list: string[]) => expandAndLoad(list),
       select: (id: string) => select(id),
     }),
     [],
   );
 
+  useEffect(() => {
+    const index = tree.findIndex((n) => n.id === currentSelected);
+    virtualizer.scrollToIndex(index, { align: "auto" });
+  }, [currentSelected]);
+
   return (
     <Section>
       <Header

package/src/tree/types.ts

@@ -21,7 +21,6 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import {
   type BadgeType,
   type ChildProp,
@@ -31,7 +30,6 @@ import {
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
-import { type ElementType } from "react";
 
 interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
   id: string;
@@ -120,6 +118,7 @@ export interface TreeNodeProps extends ChildProp {
 export interface TreeRef {
   select: (id: string) => void;
   open: (id: string) => void;
+  openAndLoad: (list: string[]) => void;
 }
 
 export interface TreePanelProps<T extends KeyValue = KeyValue>

package/src/tree/useTree.ts

@@ -22,7 +22,7 @@
  */
 
 import { useDebounce } from "@react-fabric/core";
-import { EMPTY_ARRAY } from "@react-fabric/utilities";
+import { EMPTY_ARRAY, isEmpty } from "@react-fabric/utilities";
 import memoizeOne from "memoize-one";
 import { useCallback, useEffect, useReducer, useRef } from "react";
 import {
@@ -110,7 +110,7 @@ export const useTree = <T extends KeyValue>({
   onExpandToggle,
 }: Partial<TreePanelProps<T>>) => {
   const componentEvents = useRef({ onSelect, onChecked });
-  const intialExpand = useRef(defaultExpanded ?? EMPTY_ARRAY);
+  const intialExpand = useRef([...(defaultExpanded ?? EMPTY_ARRAY)]);
   const itemList = createItemList(items);
 
   const fireExpandToggle = useCallback(
@@ -127,23 +127,26 @@ export const useTree = <T extends KeyValue>({
     (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,
-              });
-          });
+        // delay onload callback to avoid state issues
+        setTimeout(() => {
+          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,
+                });
+            });
+        }, 100);
       } else {
         dispatch({ type: "loaded" });
         intialExpand.current?.length > 0 &&
@@ -170,6 +173,13 @@ export const useTree = <T extends KeyValue>({
     [onChecked],
   );
 
+  const fireQuery = useDebounce(
+    (query: string) => {
+      onQuery?.(query);
+    },
+    [onQuery],
+  );
+
   const [state, dispatch] = useReducer(
     (state: TreeState, action: TreeActions) => {
       if (action.type === "load") {
@@ -193,7 +203,7 @@ export const useTree = <T extends KeyValue>({
         state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
-        state.selected && updateSelection(state.itemMap, state.selected, true);
+        state.selected = updateSelection(state.itemMap, selected, true);
         state.checked?.forEach((id) => updateChecked(state.itemMap, id, 1));
         return { ...state };
       }
@@ -229,7 +239,16 @@ export const useTree = <T extends KeyValue>({
       }
       if (action.type === "filter") {
         if (onQuery) {
-          onQuery(action.query ?? "");
+          // TODO: onQuery should provide new tree listing
+          // save current tree state as preQueryState
+          // on clearing filter restore preQueryState
+          if (!isEmpty(action.query)) {
+            // state.prevItems = state.items;
+            fireQuery(action.query);
+          } else {
+            // state.items = state.prevItems;
+            // build tree map
+          }
         } else {
           filterTree(state.itemMap, action.query, matcher);
           state.tree = flattenTree(state.items);
@@ -237,12 +256,11 @@ export const useTree = <T extends KeyValue>({
         return { ...state, query: action.query };
       }
       if (action.type === "toggleSelect") {
-        if (state.selected) {
-          updateSelection(state.itemMap, state.selected);
-        }
         if (!onSelect) {
-          updateSelection(state.itemMap, action.id, true);
-          state.selected = action.id;
+          if (state.selected) {
+            updateSelection(state.itemMap, state.selected);
+          }
+          state.selected = updateSelection(state.itemMap, action.id, true);
           state.tree = flattenTree(state.items);
         } else {
           fireSelected(action.id, state.itemMap.get(action.id)?.data);
@@ -253,8 +271,7 @@ export const useTree = <T extends KeyValue>({
         if (state.selected) {
           updateSelection(state.itemMap, state.selected);
         }
-        updateSelection(state.itemMap, action.id, true);
-        state.selected = action.id;
+        state.selected = updateSelection(state.itemMap, action.id, true);
         state.tree = flattenTree(state.items);
         return { ...state };
       }
@@ -329,6 +346,13 @@ export const useTree = <T extends KeyValue>({
     dispatch({ type: "expand", id });
   }, []);
 
+  const expandAndLoad = useCallback((expandList: string[]) => {
+    if (expandList.length > 0) {
+      intialExpand.current = [...expandList];
+      dispatch({ type: "expand", id: intialExpand.current.shift() as string });
+    }
+  }, []);
+
   const expandAll = useCallback(() => {
     dispatch({ type: "expandAll" });
   }, []);
@@ -348,10 +372,12 @@ export const useTree = <T extends KeyValue>({
   return {
     tree: state.tree,
     query: state.query,
+    selected: state.selected,
     toggleExpand,
     expandAll,
     collapseAll,
     toggleCheck,
+    expandAndLoad,
     select,
     expand,
     onFilter,

package/src/tree/utils.ts

@@ -127,10 +127,10 @@ export const flattenTree = (
 
 export const updateSelection = (
   nodes: Map<string, InternalNode>,
-  id: string,
+  id?: string,
   selected?: true,
 ) => {
-  const node = nodes.get(id);
+  const node = nodes.get(id ?? "");
   if (node) {
     // change selection
     node.selected = selected;
@@ -142,6 +142,7 @@ export const updateSelection = (
       // selected && parentNode && (parentNode.open = true);
       parent = parentNode?.parent;
     }
+    return id;
   }
 };
 

package/src/virtual/Gallery.tsx

@@ -337,8 +337,10 @@ const _VirtualGallery = <T extends AnyObject>({
                 ))}
               </div>
             ))}
-            {onLoadMore && (
-              <div className="h-16">{loading && <Skeleton />}</div>
+            {loading && (
+              <div>
+                <Skeleton />
+              </div>
             )}
           </div>
         </div>