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

package/dist/cjs/tree/TreeNode.js

@@ -2,6 +2,7 @@
 
 var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var core = require('@react-fabric/core');
+var utilities = require('@react-fabric/utilities');
 var classNames = require('classnames');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -17,16 +18,19 @@ var TreeNode = function TreeNode(_ref) {
     defaultLeafIcon = _ref.defaultLeafIcon,
     defaultNodeIcon = _ref.defaultNodeIcon,
     onToggle = _ref.onToggle,
+    _onClick = _ref.onClick,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
-    children = _ref.children;
+    children = _ref.children,
+    leafClassName = _ref.leafClassName,
+    nodeClassName = _ref.nodeClassName;
   var badgeProps = react.useMemo(function () {
     return core.getBadgeProps(node.badge);
   }, [node.badge]);
   var filler = react.useMemo(function () {
-    return node.lines.slice(noLines ? 1 : 0).map(function (line, idx) {
+    return node.lines.slice(1).map(function (line, idx) {
       return /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames("flex-initial self-stretch flex items-center w-6 relative before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
+        className: classNames("flex-initial self-stretch flex items-center w-6 relative", !noLines && line > 0 && "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
         children: /*#__PURE__*/jsxRuntime.jsxs("svg", {
           viewBox: "0 0 24 24",
           className: "fill-tint-200",
@@ -56,7 +60,7 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: "flex flex-nowrap items-center",
+    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", {
@@ -80,19 +84,20 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), /*#__PURE__*/jsxRuntime.jsxs("div", {
       role: "none",
-      className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
+      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: function onClick() {
-        return canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
+        _onClick === null || _onClick === void 0 || _onClick(node.id, node.data);
+        canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
       },
-      children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: "flex-content w-6",
-        children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+      children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "flex-content w-6 self-center leading-none",
+        children: [/*#__PURE__*/react.isValidElement(nodeIcon) && nodeIcon, utilities.isString(nodeIcon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
           icon: nodeIcon,
           bg: node.iconBg,
           color: node.iconColor,
           rtlFlip: node.rtlFlip
-        })
+        })]
       }), node.childSelected && !node.open && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: " flex-content text-primary-500",
         children: "\u2022"
@@ -100,7 +105,7 @@ var TreeNode = function TreeNode(_ref) {
         role: "none",
         className: "flex-1 truncate",
         children: children
-      }), node.badge && /*#__PURE__*/jsxRuntime.jsx(core.Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+      }), !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)
       }))]
     })]

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"];
+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"];
 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) {
@@ -34,21 +34,32 @@ var TreePanel = function TreePanel(_ref) {
     onChecked = _ref.onChecked;
     _ref.onLoad;
     var onSelect = _ref.onSelect,
+    onClick = _ref.onClick,
+    sorter = _ref.sorter,
+    makeLabel = _ref.makeLabel,
+    makeIcon = _ref.makeIcon,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle,
+    leafClassName = _ref.leafClassName,
+    nodeClassName = _ref.nodeClassName,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useTree = useTree.useTree({
       items: items,
       checked: checked,
       selected: selected,
       matcher: matcher,
+      sorter: sorter,
       onSelect: onSelect,
-      onChecked: onChecked
+      onChecked: onChecked,
+      defaultExpanded: defaultExpanded,
+      onExpandToggle: onExpandToggle
     }),
     tree = _useTree.tree,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
-    select = _useTree.select,
+    _select = _useTree.select,
     expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = react.useRef(null);
@@ -74,7 +85,7 @@ var TreePanel = function TreePanel(_ref) {
         return expand(id);
       },
       select: function select(id) {
-        return expand(id);
+        return _select(id);
       }
     };
   }, []);
@@ -120,6 +131,7 @@ var TreePanel = function TreePanel(_ref) {
             height: (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start
           }
         }), virtualItems.map(function (_ref2) {
+          var _makeIcon, _ref3, _ref4;
           var index = _ref2.index,
             key = _ref2.key;
           return /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -132,11 +144,14 @@ var TreePanel = function TreePanel(_ref) {
               checkable: checkable,
               selectable: selectable,
               defaultLeafIcon: defaultLeafIcon,
-              defaultNodeIcon: defaultNodeIcon,
+              defaultNodeIcon: (_makeIcon = makeIcon === null || makeIcon === void 0 ? void 0 : makeIcon(tree[index].data)) !== null && _makeIcon !== void 0 ? _makeIcon : defaultNodeIcon,
               onToggle: toggleExpand,
               onChecked: toggleCheck,
-              onSelect: select,
-              children: tree[index].data && (renderer === null || renderer === void 0 ? void 0 : renderer(tree[index].data)) || tree[index].label
+              onSelect: _select,
+              onClick: onClick,
+              leafClassName: leafClassName,
+              nodeClassName: nodeClassName,
+              children: (_ref3 = (_ref4 = tree[index].data && (renderer === null || renderer === void 0 ? void 0 : renderer(tree[index].data))) !== null && _ref4 !== void 0 ? _ref4 : makeLabel === null || makeLabel === void 0 ? void 0 : makeLabel(tree[index].data)) !== null && _ref3 !== void 0 ? _ref3 : tree[index].label
             })
           }, key);
         })]

package/dist/cjs/tree/useTree.js

@@ -19,17 +19,31 @@ var useTree = function useTree(_ref) {
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? utilities.EMPTY_ARRAY : _ref$checked,
     selected = _ref.selected,
+    sorter = _ref.sorter,
     matcher = _ref.matcher,
     onSelect = _ref.onSelect,
-    onChecked = _ref.onChecked;
+    onChecked = _ref.onChecked,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle;
   var componentEvents = react.useRef({
     onSelect: onSelect,
     onChecked: onChecked
   });
   var itemList = createItemList(items);
+  var fireExpandToggle = react.useCallback(function (itemMap) {
+    var expandedList = itemMap.filter(function (node) {
+      return node.open;
+    }).map(function (node) {
+      return node.id;
+    });
+    onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
+  }, [onExpandToggle]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "load") {
-        state.items = utils.refactorTree(action.items);
+        state.items = utils.refactorTree(action.items, {
+          sorter: sorter,
+          defaultExpanded: defaultExpanded
+        });
         state.itemMap = utils.makeTreeMap(state.items);
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
@@ -37,6 +51,7 @@ var useTree = function useTree(_ref) {
       if (action.type === "toggleExpand") {
         var node = state.itemMap.get(action.id);
         node && (node.open = !node.open);
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -44,6 +59,7 @@ var useTree = function useTree(_ref) {
         // 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);
       }
@@ -52,6 +68,7 @@ var useTree = function useTree(_ref) {
         state.itemMap.forEach(function (node) {
           !node.leaf && (node.open = true);
         });
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -59,6 +76,7 @@ var useTree = function useTree(_ref) {
         state.itemMap.forEach(function (node) {
           !node.leaf && (node.open = false);
         });
+        fireExpandToggle([]);
         state.tree = utils.flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -68,13 +86,13 @@ var useTree = function useTree(_ref) {
         return _objectSpread({}, state);
       }
       if (action.type === "select") {
-        var _componentEvents$curr, _componentEvents$curr2;
+        var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
         if (state.selected) {
           utils.updateSelection(state.itemMap, state.selected);
         }
         utils.updateSelection(state.itemMap, action.id, true);
         state.tree = utils.flattenTree(state.items);
-        (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, action.id);
+        (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, action.id, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
         return _objectSpread(_objectSpread({}, state), {}, {
           selected: action.id
         });

package/dist/cjs/tree/utils.js

@@ -6,7 +6,7 @@ var utilities = require('@react-fabric/utilities');
 
 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 sorter = function sorter(a, b) {
+var defaultSorter = function defaultSorter(a, b) {
   if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
   return utilities.compareValues()(a.label, b.label);
 };
@@ -28,15 +28,20 @@ var getIntermediate = function getIntermediate() {
 };
 
 // convert node item to internal node used by the tree
-var refactorTree = function refactorTree(nodes) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+var refactorTree = function refactorTree(nodes, _ref) {
+  var _ref$sorter = _ref.sorter,
+    sorter = _ref$sorter === void 0 ? defaultSorter : _ref$sorter,
+    _ref$defaultExpanded = _ref.defaultExpanded,
+    defaultExpanded = _ref$defaultExpanded === void 0 ? [] : _ref$defaultExpanded;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     level: 0,
     parent: undefined
   };
   var list = [];
-  nodes.sort(sorter).forEach(function (node) {
+  if (sorter !== false) nodes = nodes.sort(sorter);
+  nodes.forEach(function (node) {
     list.push(_objectSpread(_objectSpread({
-      open: false,
+      open: defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -47,6 +52,9 @@ var refactorTree = function refactorTree(nodes) {
     }, node), {}, {
       leaf: !!node.leaf,
       children: node.children && refactorTree(node.children, {
+        sorter: sorter,
+        defaultExpanded: defaultExpanded
+      }, {
         level: options.level + 1,
         parent: node.id
       })

package/dist/esm/tree/TreeNode.js

@@ -2,8 +2,9 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { getBadgeProps, Icon, CoreIcons, Badge } from '@react-fabric/core';
+import { isString, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
-import { useMemo } from 'react';
+import { useMemo, isValidElement } from 'react';
 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; }
@@ -17,16 +18,19 @@ var TreeNode = function TreeNode(_ref) {
     defaultLeafIcon = _ref.defaultLeafIcon,
     defaultNodeIcon = _ref.defaultNodeIcon,
     onToggle = _ref.onToggle,
+    _onClick = _ref.onClick,
     onSelect = _ref.onSelect,
     onChecked = _ref.onChecked,
-    children = _ref.children;
+    children = _ref.children,
+    leafClassName = _ref.leafClassName,
+    nodeClassName = _ref.nodeClassName;
   var badgeProps = useMemo(function () {
     return getBadgeProps(node.badge);
   }, [node.badge]);
   var filler = useMemo(function () {
-    return node.lines.slice(noLines ? 1 : 0).map(function (line, idx) {
+    return node.lines.slice(1).map(function (line, idx) {
       return /*#__PURE__*/jsx("div", {
-        className: classNames("flex-initial self-stretch flex items-center w-6 relative before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
+        className: classNames("flex-initial self-stretch flex items-center w-6 relative", !noLines && line > 0 && "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]", !noLines && line !== 2 && "before:h-full"),
         children: /*#__PURE__*/jsxs("svg", {
           viewBox: "0 0 24 24",
           className: "fill-tint-200",
@@ -56,7 +60,7 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: "flex flex-nowrap items-center",
+    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", {
@@ -80,19 +84,20 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), /*#__PURE__*/jsxs("div", {
       role: "none",
-      className: classNames("group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", canSelect && "hover:bg-primary-50 cursor-pointer"),
+      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: function onClick() {
-        return canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
+        _onClick === null || _onClick === void 0 || _onClick(node.id, node.data);
+        canSelect ? onSelect(node.id) : canCheck ? onChecked(node.id) : onToggle(node.id);
       },
-      children: [nodeIcon && /*#__PURE__*/jsx("div", {
-        className: "flex-content w-6",
-        children: /*#__PURE__*/jsx(Icon, {
+      children: [nodeIcon && /*#__PURE__*/jsxs("div", {
+        className: "flex-content w-6 self-center leading-none",
+        children: [/*#__PURE__*/isValidElement(nodeIcon) && nodeIcon, isString(nodeIcon) && /*#__PURE__*/jsx(Icon, {
           icon: nodeIcon,
           bg: node.iconBg,
           color: node.iconColor,
           rtlFlip: node.rtlFlip
-        })
+        })]
       }), node.childSelected && !node.open && /*#__PURE__*/jsx("span", {
         className: " flex-content text-primary-500",
         children: "\u2022"
@@ -100,7 +105,7 @@ var TreeNode = function TreeNode(_ref) {
         role: "none",
         className: "flex-1 truncate",
         children: children
-      }), node.badge && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
+      }), !isEmpty(node.badge) && /*#__PURE__*/jsx(Badge, _objectSpread(_objectSpread({}, badgeProps), {}, {
         className: classNames("me-1 self-center flex-content bg-opacity-50", badgeProps.className)
       }))]
     })]

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"];
+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"];
 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) {
@@ -34,21 +34,32 @@ var TreePanel = function TreePanel(_ref) {
     onChecked = _ref.onChecked;
     _ref.onLoad;
     var onSelect = _ref.onSelect,
+    onClick = _ref.onClick,
+    sorter = _ref.sorter,
+    makeLabel = _ref.makeLabel,
+    makeIcon = _ref.makeIcon,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle,
+    leafClassName = _ref.leafClassName,
+    nodeClassName = _ref.nodeClassName,
     aria = _objectWithoutProperties(_ref, _excluded);
   var _useTree = useTree({
       items: items,
       checked: checked,
       selected: selected,
       matcher: matcher,
+      sorter: sorter,
       onSelect: onSelect,
-      onChecked: onChecked
+      onChecked: onChecked,
+      defaultExpanded: defaultExpanded,
+      onExpandToggle: onExpandToggle
     }),
     tree = _useTree.tree,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
     collapseAll = _useTree.collapseAll,
-    select = _useTree.select,
+    _select = _useTree.select,
     expand = _useTree.expand,
     onFilter = _useTree.onFilter;
   var scrollerRef = useRef(null);
@@ -74,7 +85,7 @@ var TreePanel = function TreePanel(_ref) {
         return expand(id);
       },
       select: function select(id) {
-        return expand(id);
+        return _select(id);
       }
     };
   }, []);
@@ -120,6 +131,7 @@ var TreePanel = function TreePanel(_ref) {
             height: (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.start
           }
         }), virtualItems.map(function (_ref2) {
+          var _makeIcon, _ref3, _ref4;
           var index = _ref2.index,
             key = _ref2.key;
           return /*#__PURE__*/jsx("div", {
@@ -132,11 +144,14 @@ var TreePanel = function TreePanel(_ref) {
               checkable: checkable,
               selectable: selectable,
               defaultLeafIcon: defaultLeafIcon,
-              defaultNodeIcon: defaultNodeIcon,
+              defaultNodeIcon: (_makeIcon = makeIcon === null || makeIcon === void 0 ? void 0 : makeIcon(tree[index].data)) !== null && _makeIcon !== void 0 ? _makeIcon : defaultNodeIcon,
               onToggle: toggleExpand,
               onChecked: toggleCheck,
-              onSelect: select,
-              children: tree[index].data && (renderer === null || renderer === void 0 ? void 0 : renderer(tree[index].data)) || tree[index].label
+              onSelect: _select,
+              onClick: onClick,
+              leafClassName: leafClassName,
+              nodeClassName: nodeClassName,
+              children: (_ref3 = (_ref4 = tree[index].data && (renderer === null || renderer === void 0 ? void 0 : renderer(tree[index].data))) !== null && _ref4 !== void 0 ? _ref4 : makeLabel === null || makeLabel === void 0 ? void 0 : makeLabel(tree[index].data)) !== null && _ref3 !== void 0 ? _ref3 : tree[index].label
             })
           }, key);
         })]

package/dist/esm/tree/useTree.js

@@ -5,7 +5,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import { useDebounce } from '@react-fabric/core';
 import { EMPTY_ARRAY } from '@react-fabric/utilities';
 import memoizeOne from 'memoize-one';
-import { useRef, useReducer, useEffect, useCallback } from 'react';
+import { useRef, useCallback, useReducer, useEffect } from 'react';
 import { refactorTree, makeTreeMap, flattenTree, filterTree, updateSelection, 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; }
@@ -19,17 +19,31 @@ var useTree = function useTree(_ref) {
     _ref$checked = _ref.checked,
     checked = _ref$checked === void 0 ? EMPTY_ARRAY : _ref$checked,
     selected = _ref.selected,
+    sorter = _ref.sorter,
     matcher = _ref.matcher,
     onSelect = _ref.onSelect,
-    onChecked = _ref.onChecked;
+    onChecked = _ref.onChecked,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle;
   var componentEvents = useRef({
     onSelect: onSelect,
     onChecked: onChecked
   });
   var itemList = createItemList(items);
+  var fireExpandToggle = useCallback(function (itemMap) {
+    var expandedList = itemMap.filter(function (node) {
+      return node.open;
+    }).map(function (node) {
+      return node.id;
+    });
+    onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
+  }, [onExpandToggle]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "load") {
-        state.items = refactorTree(action.items);
+        state.items = refactorTree(action.items, {
+          sorter: sorter,
+          defaultExpanded: defaultExpanded
+        });
         state.itemMap = makeTreeMap(state.items);
         state.tree = flattenTree(state.items);
         return _objectSpread({}, state);
@@ -37,6 +51,7 @@ var useTree = function useTree(_ref) {
       if (action.type === "toggleExpand") {
         var node = state.itemMap.get(action.id);
         node && (node.open = !node.open);
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -44,6 +59,7 @@ var useTree = function useTree(_ref) {
         // 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);
       }
@@ -52,6 +68,7 @@ var useTree = function useTree(_ref) {
         state.itemMap.forEach(function (node) {
           !node.leaf && (node.open = true);
         });
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -59,6 +76,7 @@ var useTree = function useTree(_ref) {
         state.itemMap.forEach(function (node) {
           !node.leaf && (node.open = false);
         });
+        fireExpandToggle([]);
         state.tree = flattenTree(state.items);
         return _objectSpread({}, state);
       }
@@ -68,13 +86,13 @@ var useTree = function useTree(_ref) {
         return _objectSpread({}, state);
       }
       if (action.type === "select") {
-        var _componentEvents$curr, _componentEvents$curr2;
+        var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
         if (state.selected) {
           updateSelection(state.itemMap, state.selected);
         }
         updateSelection(state.itemMap, action.id, true);
         state.tree = flattenTree(state.items);
-        (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, action.id);
+        (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, action.id, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
         return _objectSpread(_objectSpread({}, state), {}, {
           selected: action.id
         });

package/dist/esm/tree/utils.js

@@ -6,7 +6,7 @@ import { isString, matchString, compareValues } from '@react-fabric/utilities';
 
 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 sorter = function sorter(a, b) {
+var defaultSorter = function defaultSorter(a, b) {
   if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
   return compareValues()(a.label, b.label);
 };
@@ -28,15 +28,20 @@ var getIntermediate = function getIntermediate() {
 };
 
 // convert node item to internal node used by the tree
-var refactorTree = function refactorTree(nodes) {
-  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
+var refactorTree = function refactorTree(nodes, _ref) {
+  var _ref$sorter = _ref.sorter,
+    sorter = _ref$sorter === void 0 ? defaultSorter : _ref$sorter,
+    _ref$defaultExpanded = _ref.defaultExpanded,
+    defaultExpanded = _ref$defaultExpanded === void 0 ? [] : _ref$defaultExpanded;
+  var options = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {
     level: 0,
     parent: undefined
   };
   var list = [];
-  nodes.sort(sorter).forEach(function (node) {
+  if (sorter !== false) nodes = nodes.sort(sorter);
+  nodes.forEach(function (node) {
     list.push(_objectSpread(_objectSpread({
-      open: false,
+      open: defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -47,6 +52,9 @@ var refactorTree = function refactorTree(nodes) {
     }, node), {}, {
       leaf: !!node.leaf,
       children: node.children && refactorTree(node.children, {
+        sorter: sorter,
+        defaultExpanded: defaultExpanded
+      }, {
         level: options.level + 1,
         parent: node.id
       })

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

@@ -1,2 +1,2 @@
 import { type TreeNodeProps } from "./types";
-export declare const TreeNode: ({ node, noLines, expanders, checkable, selectable, defaultLeafIcon, defaultNodeIcon, onToggle, onSelect, onChecked, children, }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element;
+export declare const TreeNode: ({ node, noLines, expanders, checkable, selectable, defaultLeafIcon, defaultNodeIcon, onToggle, onClick, onSelect, onChecked, children, leafClassName, nodeClassName, }: TreeNodeProps) => import("react/jsx-runtime").JSX.Element;

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, ...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, 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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
-interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
+import { type ElementType } from "react";
+interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
     id: string;
     /**
      * display label
@@ -23,17 +23,18 @@ interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
      */
     disabled?: boolean;
     data?: T;
+    icon?: ElementType<IconProps> | string;
 }
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
     leaf: true;
     children?: never;
 } | {
-    leaf?: false;
+    leaf?: boolean;
     children?: Array<TreeNodeType<T>>;
     open?: boolean;
     iconOpen?: string;
 });
-export interface InternalNode extends IconProps, CssProp, TestProps {
+export interface InternalNode extends Omit<IconProps, "icon">, CssProp, TestProps {
     id: string;
     label: Elements<JSX.Element>;
     queryable?: string;
@@ -50,6 +51,7 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
     loaded: boolean;
     parent?: string;
     empty?: boolean;
+    icon?: ElementType<IconProps> | string;
     errored?: string;
     selected?: true;
     childSelected?: true;
@@ -66,9 +68,12 @@ export interface TreeNodeProps extends ChildProp {
     noLines?: boolean;
     selectable?: true | "leafOnly";
     checkable?: true | "leafOnly";
+    leafClassName?: string;
+    nodeClassName?: string;
     onToggle: (id: string) => void;
     onSelect: (id: string) => void;
     onChecked: (id: string) => void;
+    onClick?: (id: string, node: any) => void;
 }
 export interface TreeRef {
     select: (id: string) => void;
@@ -120,10 +125,14 @@ 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 on click of tree node
+     */
+    onClick?: (id: string, data: T) => void;
     /**
      * callback on selection of tree node
      */
-    onSelect?: (id: string) => void;
+    onSelect?: (id: string, data: T) => void;
     /**
      * callback on change of checked list
      */
@@ -136,6 +145,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * item filter matcher
      */
     matcher?: (data: T, query: string) => boolean;
+    sorter?: false | ((a: T, b: T) => number);
+    makeLabel?: (node: T) => string;
+    makeIcon?: (node: T) => string;
+    defaultExpanded?: string[];
+    onExpandToggle?: (id: string[]) => void;
+    leafClassName?: string;
+    nodeClassName?: string;
 }
 export declare const iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
 export declare const iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";

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

@@ -1,12 +1,5 @@
-import { type InternalNode, type TreeNodeType } from "./types";
-export declare const useTree: <T extends KeyValue<any>>({ items, checked, selected, matcher, onSelect, onChecked, }: {
-    items?: Array<TreeNodeType<T>>;
-    selected?: string;
-    checked?: string[];
-    onSelect?: (id: string) => void;
-    onChecked?: (leafs: string[], nodes: string[]) => void;
-    matcher?: (data: T, query: string) => boolean;
-}) => {
+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>>) => {
     tree: InternalNode[];
     toggleExpand: (id: string) => void;
     expandAll: () => void;

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

@@ -1,5 +1,8 @@
 import { type InternalNode, type TreeNodeType } from "./types";
-export declare const refactorTree: (nodes: TreeNodeType[], options?: {
+export declare const refactorTree: (nodes: TreeNodeType[], { sorter, defaultExpanded, }: {
+    sorter?: any;
+    defaultExpanded?: string[];
+}, options?: {
     level: number;
     parent?: string;
 }) => InternalNode[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.25",
+  "version": "1.0.0-beta.26",
   "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.25",
-    "@react-fabric/date": "^1.0.0-beta.25",
-    "@react-fabric/form": "^1.0.0-beta.25",
-    "@react-fabric/utilities": "^1.0.0-beta.25",
+    "@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",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -44,13 +44,13 @@
   },
   "peerDependencies": {
     "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-i18next": "^15.0.2"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "34640e2473c7823254e82aa7aed920c9c6f8f503"
+  "gitHead": "452f821dc8b22c5765b3858cc53ad9d7e2f9bcf1"
 }

package/src/tree/TreeNode.tsx

@@ -22,8 +22,9 @@
  */
 
 import { Badge, CoreIcons, getBadgeProps, Icon } from "@react-fabric/core";
+import { isEmpty, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
-import { useMemo } from "react";
+import { isValidElement, useMemo } from "react";
 import { type TreeNodeProps } from "./types";
 
 export const TreeNode = ({
@@ -35,20 +36,26 @@ export const TreeNode = ({
   defaultLeafIcon,
   defaultNodeIcon,
   onToggle,
+  onClick,
   onSelect,
   onChecked,
   children,
+  leafClassName,
+  nodeClassName,
 }: TreeNodeProps) => {
   const badgeProps = useMemo(() => {
     return getBadgeProps(node.badge);
   }, [node.badge]);
 
   const filler = useMemo(() => {
-    return node.lines.slice(noLines ? 1 : 0).map((line, idx) => (
+    return node.lines.slice(1).map((line, idx) => (
       <div
         key={idx}
         className={classNames(
-          "flex-initial self-stretch flex items-center w-6 relative before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]",
+          "flex-initial self-stretch flex items-center w-6 relative",
+          !noLines &&
+            line > 0 &&
+            "before:absolute before:top-0 before:start-[7px] before:bg-tint-200 before:min-h-[50%] before:w-[2px] before:scale-x-[.625]",
           !noLines && line !== 2 && "before:h-full",
         )}
       >
@@ -88,7 +95,10 @@ export const TreeNode = ({
     <div
       role="treeitem"
       aria-selected={node.selected}
-      className="flex flex-nowrap items-center"
+      className={classNames(
+        "flex flex-nowrap items-center",
+        node.leaf ? leafClassName : nodeClassName,
+      )}
       data-testid={node["data-testid"]}
       data-test-value={node["data-test-value"]}
     >
@@ -127,25 +137,29 @@ export const TreeNode = ({
         className={classNames(
           "group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
           node.childSelected && "font-medium",
-          canSelect && "hover:bg-primary-50 cursor-pointer",
+          (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer",
         )}
         data-selected={node.selected}
-        onClick={() =>
+        onClick={() => {
+          onClick?.(node.id, node.data);
           canSelect
             ? onSelect(node.id)
             : canCheck
               ? onChecked(node.id)
-              : onToggle(node.id)
-        }
+              : onToggle(node.id);
+        }}
       >
         {nodeIcon && (
-          <div className="flex-content w-6">
-            <Icon
-              icon={nodeIcon}
-              bg={node.iconBg}
-              color={node.iconColor}
-              rtlFlip={node.rtlFlip}
-            />
+          <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 && (
@@ -154,7 +168,7 @@ export const TreeNode = ({
         <div role="none" className="flex-1 truncate">
           {children}
         </div>
-        {node.badge && (
+        {!isEmpty(node.badge) && (
           <Badge
             {...badgeProps}
             className={classNames(

package/src/tree/TreePanel.tsx

@@ -56,6 +56,14 @@ export const TreePanel = <T extends KeyValue>({
   onChecked,
   onLoad,
   onSelect,
+  onClick,
+  sorter,
+  makeLabel,
+  makeIcon,
+  defaultExpanded,
+  onExpandToggle,
+  leafClassName,
+  nodeClassName,
   ...aria
 }: TreePanelProps<T>) => {
   const {
@@ -72,8 +80,11 @@ export const TreePanel = <T extends KeyValue>({
     checked,
     selected,
     matcher,
+    sorter,
     onSelect,
     onChecked,
+    defaultExpanded,
+    onExpandToggle,
   });
 
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -99,7 +110,7 @@ export const TreePanel = <T extends KeyValue>({
     ref,
     () => ({
       open: (id: string) => expand(id),
-      select: (id: string) => expand(id),
+      select: (id: string) => select(id),
     }),
     [],
   );
@@ -151,12 +162,18 @@ export const TreePanel = <T extends KeyValue>({
                 checkable={checkable}
                 selectable={selectable}
                 defaultLeafIcon={defaultLeafIcon}
-                defaultNodeIcon={defaultNodeIcon}
+                defaultNodeIcon={
+                  makeIcon?.(tree[index].data) ?? defaultNodeIcon
+                }
                 onToggle={toggleExpand}
                 onChecked={toggleCheck}
                 onSelect={select}
+                onClick={onClick}
+                leafClassName={leafClassName}
+                nodeClassName={nodeClassName}
               >
-                {(tree[index].data && renderer?.(tree[index].data)) ||
+                {(tree[index].data && renderer?.(tree[index].data)) ??
+                  makeLabel?.(tree[index].data) ??
                   tree[index].label}
               </TreeNode>
             </div>

package/src/tree/types.ts

@@ -30,8 +30,9 @@ import {
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
+import { type ElementType } from "react";
 
-interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
+interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
   id: string;
   /**
    * display label
@@ -54,20 +55,25 @@ interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
    */
   disabled?: boolean;
   data?: T;
+
+  icon?: ElementType<IconProps> | string;
 }
 
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> &
   (
     | { leaf: true; children?: never }
     | {
-        leaf?: false;
+        leaf?: boolean;
         children?: Array<TreeNodeType<T>>;
         open?: boolean;
         iconOpen?: string;
       }
   );
 
-export interface InternalNode extends IconProps, CssProp, TestProps {
+export interface InternalNode
+  extends Omit<IconProps, "icon">,
+    CssProp,
+    TestProps {
   id: string;
   label: Elements<JSX.Element>;
   queryable?: string;
@@ -84,6 +90,7 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
   loaded: boolean;
   parent?: string;
   empty?: boolean;
+  icon?: ElementType<IconProps> | string;
   errored?: string;
   selected?: true;
   childSelected?: true;
@@ -101,9 +108,12 @@ export interface TreeNodeProps extends ChildProp {
   noLines?: boolean;
   selectable?: true | "leafOnly";
   checkable?: true | "leafOnly";
+  leafClassName?: string;
+  nodeClassName?: string;
   onToggle: (id: string) => void;
   onSelect: (id: string) => void;
   onChecked: (id: string) => void;
+  onClick?: (id: string, node: any) => void;
 }
 
 export interface TreeRef {
@@ -164,10 +174,14 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
     | Promise<Array<TreeNodeType<T>> | undefined>
     | Array<TreeNodeType<T>>
     | undefined;
+  /**
+   * callback on click of tree node
+   */
+  onClick?: (id: string, data: T) => void;
   /**
    * callback on selection of tree node
    */
-  onSelect?: (id: string) => void;
+  onSelect?: (id: string, data: T) => void;
   /**
    * callback on change of checked list
    */
@@ -180,6 +194,16 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
    * item filter matcher
    */
   matcher?: (data: T, query: string) => boolean;
+
+  sorter?: false | ((a: T, b: T) => number);
+  makeLabel?: (node: T) => string;
+  makeIcon?: (node: T) => string;
+
+  defaultExpanded?: string[];
+  onExpandToggle?: (id: string[]) => void;
+
+  leafClassName?: string;
+  nodeClassName?: string;
 }
 
 export const iconExpandAll =

package/src/tree/useTree.ts

@@ -25,7 +25,11 @@ import { useDebounce } from "@react-fabric/core";
 import { EMPTY_ARRAY } from "@react-fabric/utilities";
 import memoizeOne from "memoize-one";
 import { useCallback, useEffect, useReducer, useRef } from "react";
-import { type InternalNode, type TreeNodeType } from "./types";
+import {
+  type InternalNode,
+  type TreeNodeType,
+  type TreePanelProps,
+} from "./types";
 import {
   filterTree,
   flattenTree,
@@ -87,25 +91,31 @@ export const useTree = <T extends KeyValue>({
   items = EMPTY_ARRAY,
   checked = EMPTY_ARRAY,
   selected,
+  sorter,
   matcher,
   onSelect,
   onChecked,
-}: {
-  items?: Array<TreeNodeType<T>>;
-  selected?: string;
-  checked?: string[];
-  onSelect?: (id: string) => void;
-  onChecked?: (leafs: string[], nodes: string[]) => void;
-  matcher?: (data: T, query: string) => boolean;
-}) => {
+  defaultExpanded,
+  onExpandToggle,
+}: Partial<TreePanelProps<T>>) => {
   const componentEvents = useRef({ onSelect, onChecked });
 
   const itemList = createItemList(items);
 
+  const fireExpandToggle = useCallback(
+    (itemMap: InternalNode[]) => {
+      const expandedList = itemMap
+        .filter((node) => node.open)
+        .map((node) => node.id);
+      onExpandToggle?.(expandedList);
+    },
+    [onExpandToggle],
+  );
+
   const [state, dispatch] = useReducer(
     (state: TreeState, action: TreeActions) => {
       if (action.type === "load") {
-        state.items = refactorTree(action.items);
+        state.items = refactorTree(action.items, { sorter, defaultExpanded });
         state.itemMap = makeTreeMap(state.items);
         state.tree = flattenTree(state.items);
         return { ...state };
@@ -113,6 +123,7 @@ export const useTree = <T extends KeyValue>({
       if (action.type === "toggleExpand") {
         const node = state.itemMap.get(action.id);
         node && (node.open = !node.open);
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         return { ...state };
       }
@@ -120,6 +131,7 @@ export const useTree = <T extends KeyValue>({
         // 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 };
       }
@@ -128,6 +140,7 @@ export const useTree = <T extends KeyValue>({
         state.itemMap.forEach((node) => {
           !node.leaf && (node.open = true);
         });
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         return { ...state };
       }
@@ -135,6 +148,7 @@ export const useTree = <T extends KeyValue>({
         state.itemMap.forEach((node) => {
           !node.leaf && (node.open = false);
         });
+        fireExpandToggle([]);
         state.tree = flattenTree(state.items);
         return { ...state };
       }
@@ -149,7 +163,10 @@ export const useTree = <T extends KeyValue>({
         }
         updateSelection(state.itemMap, action.id, true);
         state.tree = flattenTree(state.items);
-        componentEvents.current.onSelect?.(action.id);
+        componentEvents.current.onSelect?.(
+          action.id,
+          state.itemMap.get(action.id)?.data,
+        );
         return { ...state, selected: action.id };
       }
       if (action.type === "toggleCheck") {

package/src/tree/utils.ts

@@ -24,7 +24,7 @@
 import { compareValues, isString, matchString } from "@react-fabric/utilities";
 import { type InternalNode, type TreeNodeType } from "./types";
 
-const sorter = (a: TreeNodeType, b: TreeNodeType) => {
+const defaultSorter = (a: TreeNodeType, b: TreeNodeType) => {
   if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
   return compareValues()(a.label, b.label);
 };
@@ -48,13 +48,17 @@ const getIntermediate = (list: AnyObject[] = []) => {
 // convert node item to internal node used by the tree
 export const refactorTree = (
   nodes: TreeNodeType[],
+  {
+    sorter = defaultSorter,
+    defaultExpanded = [],
+  }: { sorter?: any; defaultExpanded?: string[] },
   options: { level: number; parent?: string } = { level: 0, parent: undefined },
 ) => {
   const list: InternalNode[] = [];
-
-  nodes.sort(sorter).forEach((node) => {
+  if (sorter !== false) nodes = nodes.sort(sorter);
+  nodes.forEach((node) => {
     list.push({
-      open: false,
+      open: defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -66,10 +70,14 @@ export const refactorTree = (
       leaf: !!node.leaf,
       children:
         node.children &&
-        refactorTree(node.children, {
-          level: options.level + 1,
-          parent: node.id,
-        }),
+        refactorTree(
+          node.children,
+          { sorter, defaultExpanded },
+          {
+            level: options.level + 1,
+            parent: node.id,
+          },
+        ),
     });
   });