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

package/dist/cjs/tree/TreeNode.js

@@ -5,6 +5,7 @@ var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
+var reactI18next = require('react-i18next');
 var jsxRuntime = require('react/jsx-runtime');
 
 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; }
@@ -24,6 +25,8 @@ var TreeNode = function TreeNode(_ref) {
     children = _ref.children,
     leafClassName = _ref.leafClassName,
     nodeClassName = _ref.nodeClassName;
+  var _useTranslation = reactI18next.useTranslation("data"),
+    t = _useTranslation.t;
   var badgeProps = react.useMemo(function () {
     return core.getBadgeProps(node.badge);
   }, [node.badge]);
@@ -63,7 +66,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,
@@ -82,9 +92,9 @@ var TreeNode = function TreeNode(_ref) {
         icon: node.checked === 2 ? core.CoreIcons.checkboxInt : node.checked === 1 ? core.CoreIcons.checkboxOn : core.CoreIcons.checkboxOff,
         className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
       })
-    }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+    }), !node.empty && /*#__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);
@@ -108,6 +118,9 @@ var TreeNode = function TreeNode(_ref) {
       }), !utilities.isEmpty(node.badge) && /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
         className: classNames("me-1 self-center flex-content bg-opacity-50", badgeProps.className)
       }))]
+    }), node.empty && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "text-muted text-sm select-none",
+      children: t("tree.noItems")
     })]
   });
 };

package/dist/cjs/tree/TreePanel.js

@@ -11,7 +11,7 @@ var types = require('./types.js');
 var useTree = require('./useTree.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
 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; }
 var TreePanel = function TreePanel(_ref) {
@@ -31,9 +31,10 @@ 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,
+    onQuery = _ref.onQuery,
+    onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
     makeLabel = _ref.makeLabel,
@@ -49,6 +50,8 @@ var TreePanel = function TreePanel(_ref) {
       selected: selected,
       matcher: matcher,
       sorter: sorter,
+      onLoad: onLoad,
+      onQuery: onQuery,
       onSelect: onSelect,
       onChecked: onChecked,
       defaultExpanded: defaultExpanded,

package/dist/cjs/tree/useTree.js

@@ -21,6 +21,8 @@ var useTree = function useTree(_ref) {
     selected = _ref.selected,
     sorter = _ref.sorter,
     matcher = _ref.matcher,
+    onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -29,6 +31,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 +41,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 +88,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);
@@ -81,9 +133,14 @@ var useTree = function useTree(_ref) {
         return _objectSpread({}, state);
       }
       if (action.type === "filter") {
-        utils.filterTree(state.itemMap, action.query, matcher);
-        state.tree = utils.flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (onQuery) {
+          var _action$query;
+          onQuery((_action$query = action.query) !== null && _action$query !== void 0 ? _action$query : "");
+        } else {
+          utils.filterTree(state.itemMap, action.query, matcher);
+          state.tree = utils.flattenTree(state.items);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "select") {
         var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
@@ -134,10 +191,15 @@ var useTree = function useTree(_ref) {
     };
   }, [onSelect, onChecked]);
   react.useEffect(function () {
+    var _intialExpand$current3;
     dispatch({
       type: "load",
       items: itemList
     });
+    itemList.length && ((_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

@@ -40,8 +40,9 @@ var refactorTree = function refactorTree(nodes, _ref) {
   var list = [];
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach(function (node) {
+    var _node$children;
     list.push(_objectSpread(_objectSpread({
-      open: defaultExpanded.includes(node.id),
+      open: defaultExpanded.includes(node.id) && !!((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -80,11 +81,17 @@ var flattenTree = function flattenTree(nodes) {
     return !node.filtered;
   });
   filtered.forEach(function (node, idx) {
+    var _node$children2;
     node.lines = [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 2 : 3]);
     list.push(node);
     (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(flattenTree(node.children.filter(function (child) {
       return !child.filtered;
     }), [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1]))));
+    node.open && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) === 0 && list.push({
+      empty: true,
+      leaf: true,
+      lines: [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1, 2])
+    });
   });
   return list;
 };

package/dist/esm/tree/TreeNode.js

@@ -5,6 +5,7 @@ import { getBadgeProps, Icon, CoreIcons, Badge } from '@react-fabric/core';
 import { isString, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, isValidElement } from 'react';
+import { useTranslation } from 'react-i18next';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
 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; }
@@ -24,6 +25,8 @@ var TreeNode = function TreeNode(_ref) {
     children = _ref.children,
     leafClassName = _ref.leafClassName,
     nodeClassName = _ref.nodeClassName;
+  var _useTranslation = useTranslation("data"),
+    t = _useTranslation.t;
   var badgeProps = useMemo(function () {
     return getBadgeProps(node.badge);
   }, [node.badge]);
@@ -63,7 +66,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,
@@ -82,9 +92,9 @@ var TreeNode = function TreeNode(_ref) {
         icon: node.checked === 2 ? CoreIcons.checkboxInt : node.checked === 1 ? CoreIcons.checkboxOn : CoreIcons.checkboxOff,
         className: classNames(node.disabled ? "text-muted" : "text-primary-500 hover:text-primary-600")
       })
-    }), /*#__PURE__*/jsxs("div", {
+    }), !node.empty && /*#__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);
@@ -108,6 +118,9 @@ var TreeNode = function TreeNode(_ref) {
       }), !isEmpty(node.badge) && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
         className: classNames("me-1 self-center flex-content bg-opacity-50", badgeProps.className)
       }))]
+    }), node.empty && /*#__PURE__*/jsx("div", {
+      className: "text-muted text-sm select-none",
+      children: t("tree.noItems")
     })]
   });
 };

package/dist/esm/tree/TreePanel.js

@@ -11,7 +11,7 @@ import { iconExpandAll, iconCollapseAll } from './types.js';
 import { useTree } from './useTree.js';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "renderer", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
 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; }
 var TreePanel = function TreePanel(_ref) {
@@ -31,9 +31,10 @@ 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,
+    onQuery = _ref.onQuery,
+    onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
     makeLabel = _ref.makeLabel,
@@ -49,6 +50,8 @@ var TreePanel = function TreePanel(_ref) {
       selected: selected,
       matcher: matcher,
       sorter: sorter,
+      onLoad: onLoad,
+      onQuery: onQuery,
       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,8 @@ var useTree = function useTree(_ref) {
     selected = _ref.selected,
     sorter = _ref.sorter,
     matcher = _ref.matcher,
+    onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -29,6 +31,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 +41,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 +88,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);
@@ -81,9 +133,14 @@ var useTree = function useTree(_ref) {
         return _objectSpread({}, state);
       }
       if (action.type === "filter") {
-        filterTree(state.itemMap, action.query, matcher);
-        state.tree = flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (onQuery) {
+          var _action$query;
+          onQuery((_action$query = action.query) !== null && _action$query !== void 0 ? _action$query : "");
+        } else {
+          filterTree(state.itemMap, action.query, matcher);
+          state.tree = flattenTree(state.items);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "select") {
         var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
@@ -134,10 +191,15 @@ var useTree = function useTree(_ref) {
     };
   }, [onSelect, onChecked]);
   useEffect(function () {
+    var _intialExpand$current3;
     dispatch({
       type: "load",
       items: itemList
     });
+    itemList.length && ((_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

@@ -40,8 +40,9 @@ var refactorTree = function refactorTree(nodes, _ref) {
   var list = [];
   if (sorter !== false) nodes = nodes.sort(sorter);
   nodes.forEach(function (node) {
+    var _node$children;
     list.push(_objectSpread(_objectSpread({
-      open: defaultExpanded.includes(node.id),
+      open: defaultExpanded.includes(node.id) && !!((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -80,11 +81,17 @@ var flattenTree = function flattenTree(nodes) {
     return !node.filtered;
   });
   filtered.forEach(function (node, idx) {
+    var _node$children2;
     node.lines = [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 2 : 3]);
     list.push(node);
     (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(flattenTree(node.children.filter(function (child) {
       return !child.filtered;
     }), [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1]))));
+    node.open && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) === 0 && list.push({
+      empty: true,
+      leaf: true,
+      lines: [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1, 2])
+    });
   });
   return list;
 };

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

@@ -1,2 +1,2 @@
 import { type TreePanelProps } from "./types";
-export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onSelect, onClick, sorter, makeLabel, makeIcon, defaultExpanded, onExpandToggle, leafClassName, nodeClassName, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onQuery, onSelect, onClick, sorter, makeLabel, makeIcon, defaultExpanded, onExpandToggle, leafClassName, nodeClassName, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -125,6 +125,10 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * callback for lazy loading tree items
      */
     onLoad?: (id: string) => Promise<Array<TreeNodeType<T>> | undefined> | Array<TreeNodeType<T>> | undefined;
+    /**
+     * callback to load tree using search query
+     */
+    onQuery?: (query: string) => void;
     /**
      * callback on click of tree node
      */

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, onQuery, 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.28",
   "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.28",
+    "@react-fabric/date": "^1.0.0-beta.28",
+    "@react-fabric/form": "^1.0.0-beta.28",
+    "@react-fabric/utilities": "^1.0.0-beta.28",
     "@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": "80f9d8a9f96dbd0e7a4287087e23996682bf2c0a"
 }

package/src/tree/TreeNode.tsx

@@ -25,6 +25,7 @@ import { Badge, CoreIcons, getBadgeProps, Icon } from "@react-fabric/core";
 import { isEmpty, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useMemo } from "react";
+import { useTranslation } from "react-i18next";
 import { type TreeNodeProps } from "./types";
 
 export const TreeNode = ({
@@ -43,6 +44,7 @@ export const TreeNode = ({
   leafClassName,
   nodeClassName,
 }: TreeNodeProps) => {
+  const { t } = useTranslation("data");
   const badgeProps = useMemo(() => {
     return getBadgeProps(node.badge);
   }, [node.badge]);
@@ -103,7 +105,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
@@ -132,52 +143,59 @@ export const TreeNode = ({
           />
         </div>
       )}
-      <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",
-        )}
-        data-selected={node.selected}
-        onClick={() => {
-          onClick?.(node.id, node.data);
-          canSelect
-            ? onSelect(node.id)
-            : canCheck
-              ? onChecked(node.id)
-              : onToggle(node.id);
-        }}
-      >
-        {nodeIcon && (
-          <div className="flex-content w-6 self-center leading-none">
-            {isValidElement(nodeIcon) && nodeIcon}
-            {isString(nodeIcon) && (
-              <Icon
-                icon={nodeIcon}
-                bg={node.iconBg}
-                color={node.iconColor}
-                rtlFlip={node.rtlFlip}
-              />
-            )}
+      {!node.empty && (
+        <div
+          role="none"
+          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={() => {
+            onClick?.(node.id, node.data);
+            canSelect
+              ? onSelect(node.id)
+              : canCheck
+                ? onChecked(node.id)
+                : onToggle(node.id);
+          }}
+        >
+          {nodeIcon && (
+            <div className="flex-content w-6 self-center leading-none">
+              {isValidElement(nodeIcon) && nodeIcon}
+              {isString(nodeIcon) && (
+                <Icon
+                  icon={nodeIcon}
+                  bg={node.iconBg}
+                  color={node.iconColor}
+                  rtlFlip={node.rtlFlip}
+                />
+              )}
+            </div>
+          )}
+          {node.childSelected && !node.open && (
+            <span className=" flex-content text-primary-500">•</span>
+          )}
+          <div role="none" className="flex-1 truncate">
+            {children}
           </div>
-        )}
-        {node.childSelected && !node.open && (
-          <span className=" flex-content text-primary-500">•</span>
-        )}
-        <div role="none" className="flex-1 truncate">
-          {children}
+          {!isEmpty(node.badge) && (
+            <Badge
+              {...badgeProps}
+              className={classNames(
+                "me-1 self-center flex-content bg-opacity-50",
+                badgeProps.className,
+              )}
+            />
+          )}
         </div>
-        {!isEmpty(node.badge) && (
-          <Badge
-            {...badgeProps}
-            className={classNames(
-              "me-1 self-center flex-content bg-opacity-50",
-              badgeProps.className,
-            )}
-          />
-        )}
-      </div>
+      )}
+      {node.empty && (
+        <div className="text-muted text-sm select-none">
+          {t("tree.noItems")}
+        </div>
+      )}
     </div>
   );
 };

package/src/tree/TreePanel.tsx

@@ -55,6 +55,7 @@ export const TreePanel = <T extends KeyValue>({
   expander = "box",
   onChecked,
   onLoad,
+  onQuery,
   onSelect,
   onClick,
   sorter,
@@ -81,6 +82,8 @@ export const TreePanel = <T extends KeyValue>({
     selected,
     matcher,
     sorter,
+    onLoad,
+    onQuery,
     onSelect,
     onChecked,
     defaultExpanded,

package/src/tree/types.ts

@@ -174,6 +174,10 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
     | Promise<Array<TreeNodeType<T>> | undefined>
     | Array<TreeNodeType<T>>
     | undefined;
+  /**
+   * callback to load tree using search query
+   */
+  onQuery?: (query: string) => void;
   /**
    * callback on click of tree node
    */

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,15 @@ export const useTree = <T extends KeyValue>({
   selected,
   sorter,
   matcher,
+  onLoad,
+  onQuery,
   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 +118,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 +161,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);
@@ -153,9 +205,13 @@ export const useTree = <T extends KeyValue>({
         return { ...state };
       }
       if (action.type === "filter") {
-        filterTree(state.itemMap, action.query, matcher);
-        state.tree = flattenTree(state.items);
-        return { ...state };
+        if (onQuery) {
+          onQuery(action.query ?? "");
+        } else {
+          filterTree(state.itemMap, action.query, matcher);
+          state.tree = flattenTree(state.items);
+          return { ...state };
+        }
       }
       if (action.type === "select") {
         if (state.selected) {
@@ -198,6 +254,12 @@ export const useTree = <T extends KeyValue>({
 
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
+    itemList.length &&
+      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: defaultExpanded.includes(node.id) && !!node.children?.length,
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -114,6 +114,13 @@ export const flattenTree = (
           [...lines, idx === filtered.length - 1 ? 0 : 1],
         ),
       );
+    node.open &&
+      node.children?.length === 0 &&
+      list.push({
+        empty: true,
+        leaf: true,
+        lines: [...lines, idx === filtered.length - 1 ? 0 : 1, 2],
+      } as any);
   });
   return list;
 };