@react-fabric/data 1.0.0-beta.54 → 1.0.0-beta.55

package/dist/esm/table/useVirtualTable.js

@@ -3,7 +3,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { groupBy, compareValues } from '@react-fabric/utilities';
+import { groupBy, compareValues, debounce } from '@react-fabric/utilities';
 import { useVirtualizer, defaultRangeExtractor } from '@tanstack/react-virtual';
 import { useReducer, useRef, useMemo, useState, useCallback, useEffect } from 'react';
 
@@ -137,6 +137,24 @@ var useVirtualTable = function useVirtualTable(data, options) {
       checked: (_options$checked = options.checked) !== null && _options$checked !== void 0 ? _options$checked : []
     });
   }, [options.checked]);
+  useEffect(function () {
+    if (options.onLoadMore) {
+      var _virtualItems$, _virtualItems$slice$p;
+      var firstItem = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index;
+      var lastItem = virtualItems === null || virtualItems === void 0 || (_virtualItems$slice$p = virtualItems.slice(-1).pop()) === null || _virtualItems$slice$p === void 0 ? void 0 : _virtualItems$slice$p.index;
+      var canLoadPrevPage = firstItem !== undefined && state.items[firstItem] === null;
+      var canLoadNextPage = lastItem !== undefined && lastItem === state.items.length - 1 && state.items.length < options.total;
+      var db = debounce(options.onLoadMore);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!options.loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
+      return function () {
+        return db.cancel();
+      };
+    }
+  }, [options.onLoadMore, virtualItems]);
   return {
     scrollerRef: scrollerRef,
     items: virtualItems,

package/dist/esm/tree/TreeNode.js

@@ -63,7 +63,7 @@ var TreeNode = function TreeNode(_ref) {
   return /*#__PURE__*/jsxs("div", {
     role: "treeitem",
     "aria-selected": node.selected,
-    className: classNames("flex flex-nowrap items-center", node.className, node.leaf ? leafClassName : nodeClassName),
+    className: classNames("flex flex-nowrap items-center"),
     "data-testid": node["data-testid"],
     "data-test-value": node["data-test-value"],
     children: [filler, node.loading && /*#__PURE__*/jsx("div", {
@@ -93,7 +93,7 @@ var TreeNode = function TreeNode(_ref) {
       })
     }), !node.empty && /*#__PURE__*/jsxs("div", {
       role: "none",
-      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", node.disabled && "text-muted opacity-65", !node.disabled && (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer"),
+      className: classNames("group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none", node.childSelected && "font-medium", node.disabled && "text-muted opacity-65", node.className, node.leaf ? leafClassName : nodeClassName, !node.disabled && (canSelect || onClick) && "hover:bg-primary-50 cursor-pointer"),
       "data-selected": node.selected,
       onClick: node.disabled ? undefined : function () {
         onClick === null || onClick === void 0 || onClick(node.id, node.data);

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", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
+var _excluded = ["ref", "items", "selected", "checked", "checkable", "noLines", "searchable", "selectable", "matcher", "filterPlaceholder", "defaultLeafIcon", "defaultNodeIcon", "expander", "onChecked", "onLoad", "onQuery", "onSelect", "onClick", "sorter", "makeLabel", "makeIcon", "defaultExpanded", "onExpandToggle", "leafClassName", "nodeClassName"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var TreePanel = function TreePanel(_ref) {
@@ -22,7 +22,6 @@ var TreePanel = function TreePanel(_ref) {
     checked = _ref.checked,
     checkable = _ref.checkable,
     noLines = _ref.noLines,
-    renderer = _ref.renderer,
     searchable = _ref.searchable,
     selectable = _ref.selectable,
     matcher = _ref.matcher,
@@ -58,6 +57,7 @@ var TreePanel = function TreePanel(_ref) {
       onExpandToggle: onExpandToggle
     }),
     tree = _useTree.tree,
+    query = _useTree.query,
     toggleExpand = _useTree.toggleExpand,
     toggleCheck = _useTree.toggleCheck,
     expandAll = _useTree.expandAll,
@@ -97,6 +97,7 @@ var TreePanel = function TreePanel(_ref) {
       flex: true,
       className: "items-center p-px justify-end overflow-hidden border-b",
       children: [searchable && /*#__PURE__*/jsx(Search, {
+        value: query,
         onSearch: onFilter,
         allowClear: true,
         placeholder: filterPlaceholder,
@@ -134,7 +135,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 _makeIcon, _ref3;
           var index = _ref2.index,
             key = _ref2.key;
           return /*#__PURE__*/jsx("div", {
@@ -154,7 +155,7 @@ var TreePanel = function TreePanel(_ref) {
               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
+              children: (_ref3 = tree[index].data && (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

@@ -6,7 +6,7 @@ import { useDebounce } from '@react-fabric/core';
 import { EMPTY_ARRAY } from '@react-fabric/utilities';
 import memoizeOne from 'memoize-one';
 import { useRef, useCallback, useReducer, useEffect } from 'react';
-import { refactorTree, makeTreeMap, flattenTree, updateSelection, filterTree, updateChecked } from './utils.js';
+import { refactorTree, makeTreeMap, flattenTree, updateSelection, updateChecked, filterTree } 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; }
@@ -78,6 +78,14 @@ var useTree = function useTree(_ref) {
       });
     }
   }, [onLoad]);
+  var fireSelected = useDebounce(function (nodeId, data) {
+    var _componentEvents$curr, _componentEvents$curr2;
+    (_componentEvents$curr = (_componentEvents$curr2 = componentEvents.current).onSelect) === null || _componentEvents$curr === void 0 || _componentEvents$curr.call(_componentEvents$curr2, nodeId, data);
+  }, [onSelect]);
+  var fireChecked = useDebounce(function (leafs, nodes, partials) {
+    var _componentEvents$curr3, _componentEvents$curr4;
+    (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, leafs, nodes, partials);
+  }, [onChecked]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "load") {
         state.items = refactorTree(action.items, {
@@ -86,6 +94,9 @@ var useTree = function useTree(_ref) {
         });
         state.itemMap = makeTreeMap(state.items);
         state.tree = flattenTree(state.items);
+        state.selected = undefined;
+        state.checked = undefined;
+        state.query = "";
         return _objectSpread({}, state);
       }
       if (action.type === "toggleExpand") {
@@ -97,10 +108,14 @@ var useTree = function useTree(_ref) {
         }
       }
       if (action.type === "loaded") {
+        var _state$checked;
         state.itemMap = makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         state.selected && updateSelection(state.itemMap, state.selected, true);
+        (_state$checked = state.checked) === null || _state$checked === void 0 || _state$checked.forEach(function (id) {
+          return updateChecked(state.itemMap, id, 1);
+        });
         return _objectSpread({}, state);
       }
       if (action.type === "expand") {
@@ -141,36 +156,58 @@ var useTree = function useTree(_ref) {
         } else {
           filterTree(state.itemMap, action.query, matcher);
           state.tree = flattenTree(state.items);
-          return _objectSpread({}, state);
         }
+        return _objectSpread(_objectSpread({}, state), {}, {
+          query: action.query
+        });
+      }
+      if (action.type === "toggleSelect") {
+        if (state.selected) {
+          updateSelection(state.itemMap, state.selected);
+        }
+        if (!onSelect) {
+          updateSelection(state.itemMap, action.id, true);
+          state.selected = action.id;
+          state.tree = flattenTree(state.items);
+        } else {
+          var _state$itemMap$get;
+          fireSelected(action.id, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
+        }
+        return _objectSpread({}, state);
       }
       if (action.type === "select") {
-        var _componentEvents$curr, _componentEvents$curr2, _state$itemMap$get;
         if (state.selected) {
           updateSelection(state.itemMap, state.selected);
         }
         updateSelection(state.itemMap, action.id, true);
+        state.selected = action.id;
         state.tree = flattenTree(state.items);
-        (_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
-        });
+        return _objectSpread({}, state);
       }
       if (action.type === "toggleCheck") {
-        var _componentEvents$curr3, _componentEvents$curr4;
         updateChecked(state.itemMap, action.id);
-        var checkList = [[], []];
+        var checkList = [[], [], []];
         Array.from(state.itemMap.values()).filter(function (node) {
-          return node.checked === 1;
+          return node.checked !== 0;
         }).forEach(function (node) {
-          return checkList[node.leaf ? 0 : 1].push(node.id);
+          return checkList[node.leaf ? 0 : node.checked].push(node.id);
+        });
+        fireChecked(checkList[0],
+        // leafs
+        checkList[1],
+        // nodes
+        checkList[2] // partials
+        );
+        return _objectSpread(_objectSpread({}, state), {}, {
+          checked: checkList[0]
         });
-        (_componentEvents$curr3 = (_componentEvents$curr4 = componentEvents.current).onChecked) === null || _componentEvents$curr3 === void 0 || _componentEvents$curr3.call(_componentEvents$curr4, checkList[0], checkList[1]);
-        return _objectSpread({}, state);
       }
       if (action.type === "checked") {
+        state.itemMap.forEach(function (item) {
+          return item.checked = 0;
+        });
         action.id.forEach(function (id) {
-          return updateChecked(state.itemMap, id);
+          return updateChecked(state.itemMap, id, 1);
         });
         return _objectSpread(_objectSpread({}, state), {}, {
           checked: action.id
@@ -181,7 +218,8 @@ var useTree = function useTree(_ref) {
       itemMap: new Map(),
       items: [],
       tree: [],
-      checked: []
+      checked: [],
+      query: ""
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -202,6 +240,14 @@ var useTree = function useTree(_ref) {
       type: "expand",
       id: intialExpand.current.shift()
     });
+    selected && dispatch({
+      type: "select",
+      id: selected
+    });
+    checked && dispatch({
+      type: "checked",
+      id: checked
+    });
   }, [itemList]);
   useEffect(function () {
     selected && dispatch({
@@ -229,7 +275,7 @@ var useTree = function useTree(_ref) {
   }, []);
   var select = useCallback(function (id) {
     dispatch({
-      type: "select",
+      type: "toggleSelect",
       id: id
     });
   }, []);
@@ -257,6 +303,7 @@ var useTree = function useTree(_ref) {
   }, [], 300);
   return {
     tree: state.tree,
+    query: state.query,
     toggleExpand: toggleExpand,
     expandAll: expandAll,
     collapseAll: collapseAll,

package/dist/esm/tree/utils.js

@@ -105,15 +105,15 @@ var updateSelection = function updateSelection(nodes, id, selected) {
     while (parent) {
       var parentNode = nodes.get(parent);
       parentNode && (parentNode.childSelected = selected);
-      selected && parentNode && (parentNode.open = true);
+      // selected && parentNode && (parentNode.open = true);
       parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
     }
   }
 };
-var updateChecked = function updateChecked(list, id) {
+var updateChecked = function updateChecked(list, id, checked) {
   var node = list.get(id);
   if (node) {
-    node.checked = node.checked === 1 ? 0 : 1;
+    node.checked = checked === undefined ? node.checked === 0 ? 1 : 0 : checked;
     // check all children
     node.children && getChildren(node.children).forEach(function (child) {
       return child.checked = node.checked;

package/dist/esm/virtual/Gallery.js

@@ -92,8 +92,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = useRef(0);
   useEffect(function () {
-    var _virtualItems$1$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    var _virtualItems$2$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = useCallback(function () {

package/dist/esm/virtual/List.js

@@ -68,8 +68,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = useRef(0);
   useEffect(function () {
-    var _virtualItems$1$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
+    var _virtualItems$2$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = useCallback(function () {

package/dist/types/hooks/useFilteredList.d.ts

@@ -1,3 +1,29 @@
+interface RetType<T, Q> {
+    onSearch: (query?: Q) => void;
+    query: Q;
+    filteredList: T[];
+    isSearching: boolean;
+}
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+export declare function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matchAll?: boolean): RetType<T, Q>;
 /**
  * Custom hook to filter a list of items based on a query.
  * It provides a way to search through the items and returns the filtered list.
@@ -17,9 +43,26 @@
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
  */
-export declare const useFilteredList: <T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matcher?: (item: T, query: Q) => boolean) => {
-    onSearch: import("react").Dispatch<import("react").SetStateAction<Q | undefined>>;
-    query: Q | undefined;
-    filteredList: T[];
-    isSearching: boolean;
-};
+export declare function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matcher?: (item: T, query: Q) => boolean): RetType<T, Q>;
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+export declare function useFilteredList<T extends AnyObject = KeyValue, Q extends AnyObject = string>(items: T[], matchAll?: boolean, matcher?: (item: T, query: Q) => boolean): RetType<T, Q>;
+export {};

package/dist/types/table/HeaderCell.d.ts

@@ -1,2 +1,2 @@
 import { type TableColumn, type TableProps } from "./types";
-export declare const HeaderCell: ({ id, dataType, label, icon, iconBg, iconColor, rtlFlip, actions, locked, filter, filterable, filterOptions, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, onFilter, }: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderCell: ({ id, field, dataType, label, icon, iconBg, iconColor, rtlFlip, actions, locked, filter, filterable, filterOptions, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, onFilter, }: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/Table.d.ts

@@ -12,4 +12,4 @@ import { type TableProps } from "./types";
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/data-table--table}
  * @see {@link https://tanstack.com/table/v8/docs/api/virtual}
  */
-export declare const Table: <T extends KeyValue = KeyValue>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onFilter, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends KeyValue = KeyValue>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onFilter, onScroll, onRowClick, onCheckedChanged, total, onLoadMore, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/types.d.ts

@@ -33,6 +33,7 @@ export declare const COL_DEFAULT_WIDTH = "12rem";
  */
 export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps {
     id: keyof T | string;
+    field?: string;
     label?: string;
     tooltip?: string;
     actions?: ReactElement[];
@@ -91,4 +92,6 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     canExpand?: (record: T) => boolean;
     children?: (record: T) => Elements<AnyObject>;
     onFilter?: (id: keyof T | string, value?: AnyObject) => void;
+    total?: number;
+    onLoadMore?: (lastIndex?: number) => void;
 }

package/dist/types/table/useVirtualTable.d.ts

@@ -11,6 +11,9 @@ export declare const useVirtualTable: <T extends KeyValue = KeyValue>(data: T[],
     checked?: AnyObject[];
     keyProperty: keyof T;
     groupProperty?: keyof T;
+    loading?: boolean;
+    total: number;
+    onLoadMore?: (startIndex: number) => void;
     onCheckChanged?: (checked: AnyObject[]) => void;
 }) => {
     scrollerRef: import("react").RefObject<HTMLDivElement | null>;

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

@@ -40,4 +40,4 @@ import { type TreePanelProps } from "./types";
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-treepanel--docs}
  */
-export declare const TreePanel: <T extends KeyValue>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onQuery, onSelect, onClick, sorter, makeLabel, makeIcon, defaultExpanded, onExpandToggle, leafClassName, nodeClassName, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TreePanel: <T extends KeyValue>({ ref, items, selected, checked, checkable, noLines, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onQuery, onSelect, onClick, sorter, makeLabel, makeIcon, defaultExpanded, onExpandToggle, leafClassName, nodeClassName, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,4 @@
 import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
-import { type ElementType } from "react";
 interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
     id: string;
     /**
@@ -23,7 +22,7 @@ interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
      */
     disabled?: boolean;
     data?: T;
-    icon?: ElementType<IconProps> | string;
+    icon?: Elements<JSX.Element>;
 }
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
     leaf: true;
@@ -51,7 +50,7 @@ export interface InternalNode extends Omit<IconProps, "icon">, CssProp, TestProp
     loaded: boolean;
     parent?: string;
     empty?: boolean;
-    icon?: ElementType<IconProps> | string;
+    icon?: Elements<JSX.Element>;
     errored?: string;
     selected?: true;
     childSelected?: true;
@@ -63,8 +62,8 @@ export interface InternalNode extends Omit<IconProps, "icon">, CssProp, TestProp
 export interface TreeNodeProps extends ChildProp {
     node: InternalNode;
     expanders: [string, string];
-    defaultNodeIcon?: string;
-    defaultLeafIcon?: string;
+    defaultNodeIcon?: Elements<JSX.Element>;
+    defaultLeafIcon?: Elements<JSX.Element>;
     noLines?: boolean;
     selectable?: true | "leafOnly";
     checkable?: true | "leafOnly";
@@ -136,22 +135,21 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
     /**
      * callback on selection of tree node
      */
-    onSelect?: (id: string, data: T) => void;
+    onSelect?: (id: string, data: T) => boolean | undefined;
     /**
      * callback on change of checked list
+     * @param leafs - list of checked leaf nodes
+     * @param nodes - list of checked nodes
+     * @param partials - list of partially checked nodes
      */
-    onChecked?: (leafs: string[], nodes: string[]) => void;
-    /**
-     * item label renderer
-     */
-    renderer?: (data: T) => JSX.Element;
+    onChecked?: (leafs: string[], nodes: string[], partials: string[]) => void;
     /**
      * item filter matcher
      */
     matcher?: (data: T, query: string) => boolean;
     sorter?: false | ((a: T, b: T) => number);
-    makeLabel?: (node: T) => string;
-    makeIcon?: (node: T) => string;
+    makeLabel?: (node: T) => Elements<JSX.Element>;
+    makeIcon?: (node: T) => Elements<JSX.Element>;
     defaultExpanded?: string[];
     onExpandToggle?: (id: string[]) => void;
     leafClassName?: string;

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

@@ -1,6 +1,7 @@
 import { type InternalNode, type TreePanelProps } from "./types";
 export declare const useTree: <T extends KeyValue>({ items, checked, selected, sorter, matcher, onLoad, onQuery, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
     tree: InternalNode[];
+    query: string | undefined;
     toggleExpand: (id: string) => void;
     expandAll: () => void;
     collapseAll: () => void;

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

@@ -9,5 +9,5 @@ export declare const refactorTree: (nodes: TreeNodeType[], { sorter, defaultExpa
 export declare const makeTreeMap: (nodes: InternalNode[], map?: Map<any, any>) => Map<any, any>;
 export declare const flattenTree: (nodes: InternalNode[], lines?: Array<0 | 1 | 2 | 3>) => InternalNode[];
 export declare const updateSelection: (nodes: Map<string, InternalNode>, id: string, selected?: true) => void;
-export declare const updateChecked: (list: Map<string, AnyObject>, id: string) => void;
+export declare const updateChecked: (list: Map<string, AnyObject>, id: string, checked?: 0 | 1 | 2) => void;
 export declare const filterTree: (nodes: Map<string, InternalNode>, query?: string, matcher?: AnyObject) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.54",
+  "version": "1.0.0-beta.55",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,9 +35,9 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.54",
-    "@react-fabric/date": "^1.0.0-beta.54",
-    "@react-fabric/form": "^1.0.0-beta.54",
+    "@react-fabric/core": "^1.0.0-beta.55",
+    "@react-fabric/date": "^1.0.0-beta.55",
+    "@react-fabric/form": "^1.0.0-beta.55",
     "@react-fabric/utilities": "^1.0.0-beta.52",
     "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
@@ -54,5 +54,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "242f15e3de29d365cce6f41f4ef99ab36bb6b995"
+  "gitHead": "c8454798fb7546174ee8c7ea10e491c5e903e789"
 }