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

package/dist/esm/tree/useTree.js

@@ -5,8 +5,8 @@ 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 { refactorTree, makeTreeMap, flattenTree, filterTree, updateSelection, updateChecked } from './utils.js';
+import { useRef, useCallback, useReducer, useEffect } from 'react';
+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; }
@@ -19,39 +19,107 @@ 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,
+    onLoad = _ref.onLoad,
     onSelect = _ref.onSelect,
-    onChecked = _ref.onChecked;
+    onChecked = _ref.onChecked,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle;
   var componentEvents = useRef({
     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) {
+      return node.open;
+    }).map(function (node) {
+      return node.id;
+    });
+    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);
+        state.items = refactorTree(action.items, {
+          sorter: sorter,
+          defaultExpanded: defaultExpanded
+        });
         state.itemMap = makeTreeMap(state.items);
         state.tree = flattenTree(state.items);
         return _objectSpread({}, state);
       }
       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);
-        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);
         return _objectSpread({}, state);
       }
@@ -59,6 +127,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 +137,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
         });
@@ -116,10 +185,15 @@ var useTree = function useTree(_ref) {
     };
   }, [onSelect, onChecked]);
   useEffect(function () {
+    var _intialExpand$current3;
     dispatch({
       type: "load",
       items: itemList
     });
+    ((_intialExpand$current3 = intialExpand.current) === null || _intialExpand$current3 === void 0 ? void 0 : _intialExpand$current3.length) > 0 && dispatch({
+      type: "expand",
+      id: intialExpand.current.shift()
+    });
   }, [itemList]);
   useEffect(function () {
     selected && dispatch({

package/dist/esm/tree/utils.js

@@ -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,21 @@ 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,
+      // defaultExpanded.includes(node.id),
       level: options.level,
       parent: options.parent,
       checked: 0,
@@ -47,6 +53,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, onLoad, 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.27",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.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.27",
+    "@react-fabric/date": "^1.0.0-beta.27",
+    "@react-fabric/form": "^1.0.0-beta.27",
+    "@react-fabric/utilities": "^1.0.0-beta.27",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -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": "02ddac152718fe86b6003f35ea5e1ef1581168f2"
 }

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,12 +95,24 @@ 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"]}
     >
       {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
@@ -125,27 +144,31 @@ export const TreeNode = ({
       <div
         role="none"
         className={classNames(
-          "group data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
+          "group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
           node.childSelected && "font-medium",
-          canSelect && "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 +177,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,12 @@ export const TreePanel = <T extends KeyValue>({
     checked,
     selected,
     matcher,
+    sorter,
+    onLoad,
     onSelect,
     onChecked,
+    defaultExpanded,
+    onExpandToggle,
   });
 
   const scrollerRef = useRef<HTMLDivElement>(null);
@@ -99,7 +111,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 +163,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 =