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

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,10 +60,17 @@ 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", {
+    children: [filler, node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
+        rtlFlip: true,
+        icon: core.CoreIcons.spinner,
+        className: "animate-spin text-muted"
+      })
+    }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsxRuntime.jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
         rtlFlip: true,
@@ -80,19 +91,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/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
       onClick: function onClick() {
-        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 +112,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) {
@@ -31,24 +31,36 @@ var TreePanel = function TreePanel(_ref) {
     defaultNodeIcon = _ref.defaultNodeIcon,
     _ref$expander = _ref.expander,
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
-    onChecked = _ref.onChecked;
-    _ref.onLoad;
-    var onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked,
+    onLoad = _ref.onLoad,
+    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,
+      onLoad: onLoad,
       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 +86,7 @@ var TreePanel = function TreePanel(_ref) {
         return expand(id);
       },
       select: function select(id) {
-        return expand(id);
+        return _select(id);
       }
     };
   }, []);
@@ -120,6 +132,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 +145,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,39 +19,107 @@ 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,
+    onLoad = _ref.onLoad,
     onSelect = _ref.onSelect,
-    onChecked = _ref.onChecked;
+    onChecked = _ref.onChecked,
+    defaultExpanded = _ref.defaultExpanded,
+    onExpandToggle = _ref.onExpandToggle;
   var componentEvents = react.useRef({
     onSelect: onSelect,
     onChecked: onChecked
   });
+  var intialExpand = react.useRef(defaultExpanded !== null && defaultExpanded !== void 0 ? defaultExpanded : utilities.EMPTY_ARRAY);
   var itemList = createItemList(items);
+  var fireExpandToggle = react.useCallback(function (itemMap) {
+    var expandedList = itemMap.filter(function (node) {
+      return node.open;
+    }).map(function (node) {
+      return node.id;
+    });
+    onExpandToggle === null || onExpandToggle === void 0 || onExpandToggle(expandedList);
+  }, [onExpandToggle]);
+  var loadChildren = react.useCallback(function (node) {
+    var _node$children;
+    if (node.open && !node.leaf && !((_node$children = node.children) !== null && _node$children !== void 0 && _node$children.length)) {
+      node.loading = true;
+      void Promise.resolve(onLoad === null || onLoad === void 0 ? void 0 : onLoad(node.id)).then(function () {
+        var resp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : utilities.EMPTY_ARRAY;
+        node.children = utils.refactorTree(resp, {
+          sorter: sorter,
+          defaultExpanded: defaultExpanded
+        }, {
+          level: node.level + 1,
+          parent: node.id
+        });
+      })["finally"](function () {
+        var _intialExpand$current;
+        node.loading = false;
+        dispatch({
+          type: "loaded"
+        });
+        ((_intialExpand$current = intialExpand.current) === null || _intialExpand$current === void 0 ? void 0 : _intialExpand$current.length) > 0 && dispatch({
+          type: "expand",
+          id: intialExpand.current.shift()
+        });
+      });
+    } else {
+      var _intialExpand$current2;
+      dispatch({
+        type: "loaded"
+      });
+      ((_intialExpand$current2 = intialExpand.current) === null || _intialExpand$current2 === void 0 ? void 0 : _intialExpand$current2.length) > 0 && dispatch({
+        type: "expand",
+        id: intialExpand.current.shift()
+      });
+    }
+  }, [onLoad]);
   var _useReducer = react.useReducer(function (state, action) {
       if (action.type === "load") {
-        state.items = utils.refactorTree(action.items);
+        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);
       }
       if (action.type === "toggleExpand") {
         var node = state.itemMap.get(action.id);
-        node && (node.open = !node.open);
+        if (node && !node.leaf) {
+          node && (node.open = !node.open);
+          loadChildren(node);
+          return _objectSpread({}, state);
+        }
+      }
+      if (action.type === "loaded") {
+        state.itemMap = utils.makeTreeMap(state.items);
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
+        state.selected && utils.updateSelection(state.itemMap, state.selected, true);
         return _objectSpread({}, state);
       }
       if (action.type === "expand") {
-        // TODO: check if children available, if not call onLoad to fetch node children
         var _node = state.itemMap.get(action.id);
-        _node && (_node.open = true);
-        state.tree = utils.flattenTree(state.items);
-        return _objectSpread({}, state);
+        if (_node && !_node.leaf) {
+          _node.open = true;
+          var parentId = _node.parent;
+          while (parentId) {
+            var _node2 = state.itemMap.get(parentId);
+            _node2 && (_node2.open = true);
+            parentId = _node2 === null || _node2 === void 0 ? void 0 : _node2.parent;
+          }
+          loadChildren(_node);
+          return _objectSpread({}, state);
+        }
       }
       if (action.type === "expandAll") {
-        // TODO: prevent opening dynamic nodes that dont have children
         state.itemMap.forEach(function (node) {
-          !node.leaf && (node.open = true);
+          var _node$children2;
+          !node.leaf && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) && (node.open = true);
         });
+        fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = utils.flattenTree(state.items);
         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 = utils.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) {
           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
         });
@@ -116,10 +185,15 @@ var useTree = function useTree(_ref) {
     };
   }, [onSelect, onChecked]);
   react.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]);
   react.useEffect(function () {
     selected && dispatch({

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,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/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,10 +60,17 @@ 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", {
+    children: [filler, node.loading && /*#__PURE__*/jsx("div", {
+      className: "flex-initial w-6",
+      children: /*#__PURE__*/jsx(Icon, {
+        rtlFlip: true,
+        icon: CoreIcons.spinner,
+        className: "animate-spin text-muted"
+      })
+    }), !node.leaf && !node.childFiltered && !node.loading && /*#__PURE__*/jsx("div", {
       className: "flex-initial w-6",
       children: /*#__PURE__*/jsx(Icon, {
         rtlFlip: true,
@@ -80,19 +91,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/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", (canSelect || _onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
       onClick: function onClick() {
-        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 +112,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) {
@@ -31,24 +31,36 @@ var TreePanel = function TreePanel(_ref) {
     defaultNodeIcon = _ref.defaultNodeIcon,
     _ref$expander = _ref.expander,
     expander = _ref$expander === void 0 ? "box" : _ref$expander,
-    onChecked = _ref.onChecked;
-    _ref.onLoad;
-    var onSelect = _ref.onSelect,
+    onChecked = _ref.onChecked,
+    onLoad = _ref.onLoad,
+    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,
+      onLoad: onLoad,
       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 +86,7 @@ var TreePanel = function TreePanel(_ref) {
         return expand(id);
       },
       select: function select(id) {
-        return expand(id);
+        return _select(id);
       }
     };
   }, []);
@@ -120,6 +132,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 +145,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);
         })]