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

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";
@@ -78,6 +77,7 @@ export interface TreeNodeProps extends ChildProp {
 export interface TreeRef {
     select: (id: string) => void;
     open: (id: string) => void;
+    openAndLoad: (list: string[]) => void;
 }
 export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
     items?: Array<TreeNodeType<T>>;
@@ -136,22 +136,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,10 +1,13 @@
 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;
+    selected: string | undefined;
     toggleExpand: (id: string) => void;
     expandAll: () => void;
     collapseAll: () => void;
     toggleCheck: (id: string) => void;
+    expandAndLoad: (expandList: string[]) => void;
     select: (id: string) => void;
     expand: (id: string) => void;
     onFilter: {

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

@@ -8,6 +8,6 @@ export declare const refactorTree: (nodes: TreeNodeType[], { sorter, defaultExpa
 }) => InternalNode[];
 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 updateSelection: (nodes: Map<string, InternalNode>, id?: string, selected?: true) => string | undefined;
+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.56",
   "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.56",
     "@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": "fd9dd6cfd1a58efb5c4bfb6446928a78cb4f4266"
 }

package/src/hooks/useFilteredList.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isString, matchString } from "@react-fabric/utilities";
+import { isArray, isString, matchString } from "@react-fabric/utilities";
 import {
   useCallback,
   useDeferredValue,
@@ -33,6 +33,7 @@ import {
 const filterList = (
   items: AnyObject[],
   query: AnyObject = "",
+  matchAll: boolean = true,
   matcher?: AnyObject,
 ) => {
   const newList: AnyObject[] = [];
@@ -40,7 +41,20 @@ const filterList = (
     if (matcher) {
       return matcher?.(item, query) && newList.push(item);
     }
-    if (query && isString(query)) {
+    if (query && isArray(query) && query.length > 0) {
+      if (
+        matchAll &&
+        query.every((q) => matchString(item.label ?? item.toString(), q))
+      ) {
+        return newList.push(item);
+      }
+      if (
+        !matchAll &&
+        query.some((q) => matchString(item.label ?? item.toString(), q))
+      ) {
+        return newList.push(item);
+      }
+    } else if (query && isString(query)) {
       if (matchString(item.label ?? item.toString(), query)) {
         return newList.push(item);
       }
@@ -51,6 +65,61 @@ const filterList = (
   return newList;
 };
 
+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 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.
+ * 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 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 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.
@@ -58,6 +127,7 @@ const filterList = (
  * 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.
  *
@@ -70,28 +140,39 @@ const filterList = (
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
  */
-export const useFilteredList = <
+export function useFilteredList<
   T extends AnyObject = KeyValue,
   Q extends AnyObject = string,
 >(
   items: T[],
+  matchAll?: boolean,
   matcher?: (item: T, query: Q) => boolean,
-) => {
+): RetType<T, Q>;
+
+export function useFilteredList<
+  T extends AnyObject = KeyValue,
+  Q extends AnyObject = string,
+>(items: T[], matchAll?: AnyObject, matcher?: (item: T, query: Q) => boolean) {
   const [query, setQuery] = useState<Q>();
   const _items = useDeferredValue(items ?? []);
   const [filteredList, setFilteredList] = useState<T[]>([]);
   const [isSearching, startTransition] = useTransition();
 
+  const matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  const matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+
   const filterItems = useCallback(
-    (items: T[], query?: Q) =>
-      startTransition(() => setFilteredList(filterList(items, query, matcher))),
+    (items: T[], query?: Q, matchingAll?: boolean) =>
+      startTransition(() =>
+        setFilteredList(filterList(items, query, matchingAll, matcherFn)),
+      ),
     [],
   );
 
   useEffect(() => {
-    if (query) filterItems(_items, query);
+    if (query) filterItems(_items, query, matchingAll);
     else setFilteredList(items);
-  }, [query, _items]);
+  }, [query, matchingAll, _items]);
 
   return { onSearch: setQuery, query, filteredList, isSearching };
-};
+}

package/src/table/HeaderCell.tsx

@@ -45,6 +45,7 @@ import {
 
 export const HeaderCell = ({
   id,
+  field,
   dataType,
   label,
   icon,
@@ -99,7 +100,7 @@ export const HeaderCell = ({
             type={dataType}
             list={filterOptions}
             filter={filter}
-            onFilter={(value) => onFilter?.(id, value)}
+            onFilter={(value) => onFilter?.(field ?? id, value)}
           />
         </Menu>,
       );
@@ -131,7 +132,7 @@ export const HeaderCell = ({
           type={dataType}
           list={filterOptions}
           filter={filter}
-          onFilter={(value) => onFilter?.(id, value)}
+          onFilter={(value) => onFilter?.(field ?? id, value)}
         />,
       ];
     }

package/src/table/Table.tsx

@@ -82,6 +82,8 @@ export const Table = <T extends KeyValue = KeyValue>({
   onScroll,
   onRowClick,
   onCheckedChanged,
+  total = 0,
+  onLoadMore,
 }: TableProps<T>) => {
   const { t } = useTranslation("data");
   const fireCheckChanged = useDebounce(
@@ -109,6 +111,9 @@ export const Table = <T extends KeyValue = KeyValue>({
     checked,
     keyProperty,
     groupProperty,
+    total,
+    loading,
+    onLoadMore,
     onCheckChanged: fireCheckChanged,
   });
   const refBody = useRef<HTMLDivElement>(null);

package/src/table/types.ts

@@ -67,6 +67,7 @@ export interface TableColumn<T = KeyValue>
     IconProps,
     TestProps {
   id: keyof T | string;
+  field?: string;
   label?: string;
   tooltip?: string;
   actions?: ReactElement[];
@@ -134,4 +135,7 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   children?: (record: T) => Elements<AnyObject>;
 
   onFilter?: (id: keyof T | string, value?: AnyObject) => void;
+
+  total?: number;
+  onLoadMore?: (lastIndex?: number) => void;
 }

package/src/table/useVirtualTable.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { compareValues, groupBy } from "@react-fabric/utilities";
+import { compareValues, debounce, groupBy } from "@react-fabric/utilities";
 import {
   defaultRangeExtractor,
   type Range,
@@ -60,6 +60,9 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
     checked?: AnyObject[];
     keyProperty: keyof T;
     groupProperty?: keyof T;
+    loading?: boolean;
+    total: number;
+    onLoadMore?: (startIndex: number) => void;
     onCheckChanged?: (checked: AnyObject[]) => void;
   },
 ) => {
@@ -202,6 +205,26 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
     dispatch({ type: "updateState", checked: options.checked ?? [] });
   }, [options.checked]);
 
+  useEffect(() => {
+    if (options.onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const canLoadPrevPage =
+        firstItem !== undefined && state.items[firstItem] === null;
+      const canLoadNextPage =
+        lastItem !== undefined &&
+        lastItem === state.items.length - 1 &&
+        state.items.length < options.total;
+      const db = debounce(options.onLoadMore);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!options.loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
+      return () => db.cancel();
+    }
+  }, [options.onLoadMore, virtualItems]);
+
   return {
     scrollerRef,
     items: virtualItems,

package/src/tree/TreeNode.tsx

@@ -97,13 +97,10 @@ export const TreeNode = ({
     <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"]}
+      data-id={node.id}
     >
       {filler}
       {node.loading && (
@@ -147,6 +144,8 @@ export const TreeNode = ({
             "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",

package/src/tree/TreePanel.tsx

@@ -31,7 +31,7 @@ import {
 } from "@react-fabric/core";
 import { Search } from "@react-fabric/form";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useImperativeHandle, useMemo, useRef } from "react";
+import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { TreeNode } from "./TreeNode";
 import { iconCollapseAll, iconExpandAll, type TreePanelProps } from "./types";
 import { useTree } from "./useTree";
@@ -86,7 +86,6 @@ export const TreePanel = <T extends KeyValue>({
   checked,
   checkable,
   noLines,
-  renderer,
   searchable,
   selectable,
   matcher,
@@ -110,10 +109,13 @@ export const TreePanel = <T extends KeyValue>({
 }: TreePanelProps<T>) => {
   const {
     tree,
+    query,
+    selected: currentSelected,
     toggleExpand,
     toggleCheck,
     expandAll,
     collapseAll,
+    expandAndLoad,
     select,
     expand,
     onFilter,
@@ -154,11 +156,17 @@ export const TreePanel = <T extends KeyValue>({
     ref,
     () => ({
       open: (id: string) => expand(id),
+      openAndLoad: (list: string[]) => expandAndLoad(list),
       select: (id: string) => select(id),
     }),
     [],
   );
 
+  useEffect(() => {
+    const index = tree.findIndex((n) => n.id === currentSelected);
+    virtualizer.scrollToIndex(index, { align: "auto" });
+  }, [currentSelected]);
+
   return (
     <Section>
       <Header
@@ -167,6 +175,7 @@ export const TreePanel = <T extends KeyValue>({
       >
         {searchable && (
           <Search
+            value={query}
             onSearch={onFilter}
             allowClear
             placeholder={filterPlaceholder}
@@ -216,8 +225,7 @@ export const TreePanel = <T extends KeyValue>({
                 leafClassName={leafClassName}
                 nodeClassName={nodeClassName}
               >
-                {(tree[index].data && renderer?.(tree[index].data)) ??
-                  makeLabel?.(tree[index].data) ??
+                {(tree[index].data && makeLabel?.(tree[index].data)) ??
                   tree[index].label}
               </TreeNode>
             </div>

package/src/tree/types.ts

@@ -30,7 +30,6 @@ import {
   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;
@@ -56,7 +55,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> &
@@ -90,7 +89,7 @@ export interface InternalNode
   loaded: boolean;
   parent?: string;
   empty?: boolean;
-  icon?: ElementType<IconProps> | string;
+  icon?: Elements<JSX.Element>;
   errored?: string;
   selected?: true;
   childSelected?: true;
@@ -103,8 +102,8 @@ export interface InternalNode
 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";
@@ -119,6 +118,7 @@ export interface TreeNodeProps extends ChildProp {
 export interface TreeRef {
   select: (id: string) => void;
   open: (id: string) => void;
+  openAndLoad: (list: string[]) => void;
 }
 
 export interface TreePanelProps<T extends KeyValue = KeyValue>
@@ -185,23 +185,22 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
   /**
    * 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;