@react-fabric/data 1.0.0-beta.27 → 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]);
@@ -89,7 +92,7 @@ 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/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,
@@ -115,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) {
@@ -33,6 +33,7 @@ var TreePanel = function TreePanel(_ref) {
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
     onChecked = _ref.onChecked,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
@@ -50,6 +51,7 @@ var TreePanel = function TreePanel(_ref) {
       matcher: matcher,
       sorter: sorter,
       onLoad: onLoad,
+      onQuery: onQuery,
       onSelect: onSelect,
       onChecked: onChecked,
       defaultExpanded: defaultExpanded,

package/dist/cjs/tree/useTree.js

@@ -22,6 +22,7 @@ var useTree = function useTree(_ref) {
     sorter = _ref.sorter,
     matcher = _ref.matcher,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -132,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;
@@ -190,7 +196,7 @@ var useTree = function useTree(_ref) {
       type: "load",
       items: itemList
     });
-    ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+    itemList.length && ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
       type: "expand",
       id: intialExpand.current.shift()
     });

package/dist/cjs/tree/utils.js

@@ -40,9 +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: false,
-      // 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,
@@ -81,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]);
@@ -89,7 +92,7 @@ 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/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,
@@ -115,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) {
@@ -33,6 +33,7 @@ var TreePanel = function TreePanel(_ref) {
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
     onChecked = _ref.onChecked,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onClick = _ref.onClick,
     sorter = _ref.sorter,
@@ -50,6 +51,7 @@ var TreePanel = function TreePanel(_ref) {
       matcher: matcher,
       sorter: sorter,
       onLoad: onLoad,
+      onQuery: onQuery,
       onSelect: onSelect,
       onChecked: onChecked,
       defaultExpanded: defaultExpanded,

package/dist/esm/tree/useTree.js

@@ -22,6 +22,7 @@ var useTree = function useTree(_ref) {
     sorter = _ref.sorter,
     matcher = _ref.matcher,
     onLoad = _ref.onLoad,
+    onQuery = _ref.onQuery,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
     defaultExpanded = _ref.defaultExpanded,
@@ -132,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;
@@ -190,7 +196,7 @@ var useTree = function useTree(_ref) {
       type: "load",
       items: itemList
     });
-    ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+    itemList.length && ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
       type: "expand",
       id: intialExpand.current.shift()
     });

package/dist/esm/tree/utils.js

@@ -40,9 +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: false,
-      // 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,
@@ -81,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, onLoad, 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.27",
+  "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.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",
+    "@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": "02ddac152718fe86b6003f35ea5e1ef1581168f2"
+  "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]);
@@ -141,52 +143,59 @@ export const TreeNode = ({
           />
         </div>
       )}
-      <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}
-              />
-            )}
+      {!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,
@@ -82,6 +83,7 @@ export const TreePanel = <T extends KeyValue>({
     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

@@ -98,6 +98,7 @@ export const useTree = <T extends KeyValue>({
   sorter,
   matcher,
   onLoad,
+  onQuery,
   onSelect,
   onChecked,
   defaultExpanded,
@@ -204,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) {
@@ -249,7 +254,8 @@ export const useTree = <T extends KeyValue>({
 
   useEffect(() => {
     dispatch({ type: "load", items: itemList });
-    intialExpand.current?.length > 0 &&
+    itemList.length &&
+      intialExpand.current?.length > 0 &&
       dispatch({
         type: "expand",
         id: intialExpand.current.shift() as unknown as string,

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: false, // 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;
 };