@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.60

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

@@ -1,7 +1,68 @@
-/// <reference types="react" />
-export declare const useFilteredList: <T extends unknown = KeyValue<any>, Q extends unknown = string>(items: T[], matcher?: (item: T, query: Q) => boolean) => {
-    onSearch: import("react").Dispatch<import("react").SetStateAction<Q | undefined>>;
-    query: Q | undefined;
+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.
+ * 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 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/hooks/usePagination.d.ts

@@ -16,6 +16,25 @@ export interface PaginationOptions {
      */
     onChange?: (page: number) => void;
 }
+/**
+ * Custom hook to manage pagination state and logic.
+ * It calculates the total number of pages, generates page ranges,
+ * and provides a way to change the current page.
+ * It also handles the transition of page changes to optimize performance.
+ *
+ * @param options - The pagination options including total records, current page, records per page, and change handler.
+ * @returns An object containing the current page, total pages, head label, ranges for pagination pills, and a function to change the page.
+ *
+ * @example
+ * ```jsx
+ * const { page, totalPages, headLabel, ranges, onPageChange } = usePagination({
+ *   totalRecords: 100,
+ *   currentPage: 0,
+ *   perPage: 10,
+ *   onChange: (newPage) => console.log("Page changed to:", newPage),
+ * });
+ * ```
+ */
 export declare const usePagination: ({ totalRecords, currentPage, perPage, onChange, }: PaginationOptions) => {
     page: number;
     totalPages: number;

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

@@ -22,6 +22,35 @@ export interface SelectableProps {
      */
     onClick?: (id: string, isNegative: boolean) => void;
 }
+/**
+ * Custom hook to manage selection of items in a list.
+ * It allows toggling selection state of items, handling both selected and non-selected states.
+ * The hook maintains a selection state and provides a function to toggle the selection of items.
+ * It also supports callbacks for when the selection changes or when an item is clicked.
+ *
+ * @param items - The list of items to manage selection for.
+ * @param selected - An array of item IDs that are currently selected.
+ * @param nonselected - An array of item IDs that are currently non-selected.
+ * @param onChange - Callback function that is called when the selection changes.
+ * @param onClick - Callback function that is called when an item is clicked.
+ * @returns An object containing the current selection state and a function to toggle selection of items.
+ *
+ * @example
+ * ```jsx
+ * const { selection, toggleSelection } = useSelectableList({
+ *   items: [{ id: '1', label: 'Item 1' }, { id: '2', label: 'Item 2' }],
+ *   selected: ['1'],
+ *   nonselected: ['2'],
+ *   onChange: (selectedIds, nonSelectedIds) => {
+ *     console.log('Selected:', selectedIds);
+ *     console.log('Non-selected:', nonSelectedIds);
+ *   },
+ *   onClick: (id, isNegative) => {
+ *     console.log(`Item ${id} clicked, isNegative: ${isNegative}`);
+ *   },
+ * });
+ * ```
+ */
 export declare const useSelectableList: ({ items, selected, nonselected, onChange, onClick, }: SelectableProps) => {
     selection: KeyValue<number>;
     toggleSelection: (id: string, isNegative?: boolean) => void;

package/dist/types/json/JsonViewer.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CssProp } from "@react-fabric/core/dist/types/types";
 export interface JsonViewProps<T> extends CssProp {
     /**
@@ -56,4 +55,30 @@ export interface JsonViewProps<T> extends CssProp {
      */
     formatter?: (path?: string, value?: AnyObject) => string | JSX.Element | undefined;
 }
-export declare const JsonViewer: <T extends KeyValue<any> = KeyValue<any>>({ className, json, copy, propertyScheme, filters, inline, labelWidth, formatter, labeler, onFilter, emptyMessage, showPropertyTree, ...rest }: JsonViewProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * JsonViewer component to display JSON data in a structured format.
+ * It supports inline display, property filtering, and custom formatting.
+ * The component can handle nested objects and arrays, displaying them in a tree-like structure.
+ * It also provides options for copying values and filtering properties.
+ *
+ * @param {JsonViewProps<T>} props - The properties for the JsonViewer component.
+ * @returns {JSX.Element} The rendered JsonViewer component.
+ *
+ * @example
+ * ```jsx
+ * <JsonViewer
+ *   json={{ name: "John", age: 30, address: { city: "New York", zip: "10001" } }}
+ *   copy={true}
+ *   filters={true}
+ *   propertyScheme={{ date: ["createdAt"], phone: ["contact"] }}
+ *   inline={true}
+ *   labelWidth="25%"
+ *   formatter={(path, value) => (path === "age" ? `${value} years` : value)}
+ *   labeler={(path) => path.replace(/_/g, " ").toUpperCase()}
+ *   onFilter={(path, value, negate) => console.log(`Filter ${negate ? "negate" : ""} on ${path}:`, value)}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-jsonviewer--docs}
+ */
+export declare const JsonViewer: <T extends KeyValue = KeyValue>({ className, json, copy, propertyScheme, filters, inline, labelWidth, formatter, labeler, onFilter, emptyMessage, showPropertyTree, ...rest }: JsonViewProps<T>) => import("react/jsx-runtime").JSX.Element;

package/dist/types/pagination/Pagination.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 export interface PaginationProps {
     /**
      * currrent page number
@@ -21,4 +20,14 @@ export interface PaginationProps {
      */
     onPageChange: (page: number) => void;
 }
+/**
+ * Pagination component to navigate through pages of data.
+ * It displays buttons for navigating to the first, previous, next, and last pages,
+ * as well as buttons for specific page numbers based on the provided ranges.
+ * The component supports a minimal view that shows the current page and total pages.
+ * It uses memoization to optimize rendering performance.
+ *
+ * @param {PaginationProps} props - The properties for the Pagination component.
+ * @returns {JSX.Element} The rendered Pagination component.
+ */
 export declare const Pagination: import("react").MemoExoticComponent<({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,9 @@
+import { type TableColumn } from "./types";
+interface FilterProps {
+    type: TableColumn["dataType"];
+    onFilter: (value: AnyObject) => void;
+    list?: AnyObject[];
+    filter: AnyObject;
+}
+export declare const ColumnFilters: ({ type, list, filter, onFilter, }: FilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};

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

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

@@ -1,2 +1,15 @@
 import { type TableProps } from "./types";
-export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, checkableRows, initialScroll, hideableColumns, sort, loading, emptyDisplay, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Table component for displaying data in a tabular format with features like sorting, filtering, and virtual scrolling.
+ * It supports expandable rows, checkable rows, and customizable columns.
+ * The component is designed to handle large datasets efficiently by rendering only the visible rows.
+ * It also provides a way to manage column visibility and allows for custom rendering of group headers.
+ * Uses TanStack's `useVirtual` for virtualization and React's `useMemo` for performance optimization.
+ *
+ * @param {TableProps<T>} props - The properties for the Table component.
+ * @returns {JSX.Element} The rendered Table component.
+ *
+ * @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, total, onLoadMore, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,54 @@
-import { type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 export declare const COL_MIN_WIDTH = "3rem";
 export declare const COL_MAX_WIDTH = "64rem";
 export declare const COL_DEFAULT_WIDTH = "12rem";
-export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps {
+/**
+ * TableColumn interface defines the structure of a column in a table.
+ * It includes properties for column identification, display options, alignment,
+ * visibility, resizing, sorting, filtering, and rendering.
+ *
+ * @template T - The type of data the column will represent, defaulting to KeyValue.
+ * @property {keyof T | string} id - Unique identifier for the column.
+ * @property {"string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown"} [dataType] - Data type of the column values.
+ * @property {string} [label] - Display label for the column header.
+ * @property {string} [tooltip] - Tooltip text for the column header.
+ * @property {string} [format] - Format string for displaying the column values.
+ * @property {"start" | "center" | "end"} [align] - Text alignment within the column.
+ * @property {"start" | "end"} [locked] - Indicates if the column is locked at the start or end.
+ * @property {boolean} [hidden] - Whether the column is hidden.
+ * @property {boolean} [truncate] - Whether to truncate the text in the column.
+ * @property {boolean} [hideable] - Whether the column can be hidden by the user.
+ * @property {boolean} [resizable] - Whether the column can be resized by the user.
+ * @property {boolean} [sortable] - Whether the column can be sorted.
+ * @property {boolean} [filterable] - Whether the column can be filtered.
+ * @property {AnyObject} [filter] - Filter criteria for the column.
+ * @property {ReactElement[]} [actions] - Array of action elements to be displayed in the column.
+ * @property {AnyObject[]} [filterOptions] - Options for filtering the column.
+ * @property {string | number} [width] - Width of the column.
+ * @property {string | number} [minWidth] - Minimum width of the column.
+ * @property {string | number} [maxWidth] - Maximum width of the column.
+ * @property {KeyValue} [valueMap] - Mapping of values for the column.
+ * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
+ */
+export interface TableColumn<T = KeyValue> extends CssProp, TestProps {
     id: keyof T | string;
+    field?: string;
     label?: string;
     tooltip?: string;
-    actions?: ReactElement;
+    icon?: IconProps;
+    actions?: ReactElement[];
     align?: "start" | "center" | "end";
     locked?: "start" | "end";
     hidden?: boolean;
+    truncate?: boolean;
     hideable?: boolean;
     resizable?: boolean;
     sortable?: boolean;
     filterable?: boolean;
-    filterList?: AnyObject[];
+    filter?: AnyObject;
+    filterOptions?: AnyObject[];
     width?: string | number;
     minWidth?: string | number;
     maxWidth?: string | number;
@@ -33,12 +66,15 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     columns: Array<TableColumn<T>>;
     data: T[];
     keyProperty?: keyof T;
+    groupProperty?: keyof T;
+    groupRenderer?: (key: AnyObject) => ReactElement;
     emptyDisplay?: ReactElement;
     /**
      * checkable rows
      */
+    checked?: AnyObject[];
     checkableRows?: boolean;
-    onCheckedChanged?: (rows: Array<keyof T>) => void;
+    onCheckedChanged?: (rows: AnyObject[]) => void;
     /**
      * sorting
      */
@@ -57,4 +93,7 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     onScroll?: (firstItem: number) => void;
     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

@@ -1,18 +1,32 @@
-/// <reference types="react" />
-interface DataState {
-    expanded: Key[];
-    checked: Key[];
+interface DataState<T = KeyValue> {
+    data: T[];
+    items: T[];
+    grouped: KeyValue<T[]>;
+    groups: AnyObject[];
+    expanded: AnyObject[];
+    checked: AnyObject[];
     allChecked: 0 | 1 | 2;
 }
-export declare const useVirtualTable: (data: KeyValue[], keyProperty?: Key, onCheckChanged?: (checked: Key[]) => void) => {
-    scrollerRef: import("react").RefObject<HTMLDivElement>;
-    items: import("@tanstack/virtual-core").VirtualItem<Element>[];
-    checkState: DataState;
-    getData: (index: number) => KeyValue<any>;
+export declare const useVirtualTable: <T extends KeyValue = KeyValue>(data: T[], options: {
+    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>;
+    items: import("@tanstack/virtual-core").VirtualItem[];
+    checkState: DataState<T>;
+    getData: (index: number) => T;
     virtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+    hasActiveSticky: boolean;
+    isActiveSticky: (index: number) => boolean;
     top: number | undefined;
     totalSize: () => number;
     measureElement: (node: Element | null | undefined) => void;
+    toggleGroupExpand: (key: Key) => void;
     toggleExpand: (key: Key) => void;
     toggleChecked: (key: Key) => void;
     toggleAllChecked: () => void;

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,43 @@
 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;
+/**
+ * TreePanel component renders a virtualized tree structure with support for
+ * selection, expansion, and filtering. It allows for custom rendering of tree
+ * nodes and supports checkable nodes.
+ *
+ * @param {TreePanelProps<T>} props - The properties for the TreePanel component.
+ * @returns {JSX.Element} The rendered TreePanel component.
+ * @template T - The type of items in the tree, extending KeyValue.
+ *
+ * @example
+ * ```jsx
+ * <TreePanel
+ *   items={items}
+ *   selected={selectedItem}
+ *   checked={checkedItems}
+ *   checkable={true}
+ *   renderer={(item) => <span>{item.name}</span>}
+ *   searchable={true}
+ *   selectable={true}
+ *   matcher={(item, query) => item.name.toLowerCase().includes(query.toLowerCase())}
+ *   filterPlaceholder="Search..."
+ *   defaultLeafIcon={<Icon icon={CoreIcons.file} />}
+ *   defaultNodeIcon={<Icon icon={CoreIcons.folder} />}
+ *   expander="caret"
+ *   onChecked={(checkedItems) => console.log(checkedItems)}
+ *   onLoad={(id) => console.log(`Load children for ${id}`)}
+ *   onQuery={(query) => console.log(`Query: ${query}`)}
+ *   onSelect={(selectedItem) => console.log(selectedItem)}
+ *   onClick={(item) => console.log(`Clicked on ${item.id}`)}
+ *   sorter={(a, b) => a.label.localeCompare(b.label)}
+ *   makeLabel={(item) => item.name}
+ *   makeIcon={(item) => item.icon ? <Icon icon={item.icon} /> : null}
+ *   defaultExpanded={["root"]}
+ *   onExpandToggle={(id, expanded) => console.log(`Toggle expand for ${id}: ${expanded}`)}
+ *   leafClassName="leaf-node"
+ *   nodeClassName="tree-node"
+ * />
+ * ```
+ *
+ * @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, searchable, selectable, multiple, 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,11 +1,15 @@
-/// <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 IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type BadgeType, type ChildProp, type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+interface TreeBaseNode<T> extends CssProp, TestProps {
     id: string;
     /**
      * display label
      */
     label: Elements<JSX.Element>;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * full text to be used for querying purposes
      */
@@ -28,12 +32,12 @@ 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 CssProp, TestProps {
     id: string;
     label: Elements<JSX.Element>;
     queryable?: string;
@@ -50,6 +54,7 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
     loaded: boolean;
     parent?: string;
     empty?: boolean;
+    icon?: IconProps;
     errored?: string;
     selected?: true;
     childSelected?: true;
@@ -61,20 +66,51 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
 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";
+    leafClassName?: string;
+    nodeClassName?: string;
     onToggle: (id: string) => void;
-    onSelect: (id: string) => void;
+    onSelect: (id: string, shiftKey?: boolean) => void;
     onChecked: (id: string) => void;
+    onClick?: (id: string, node: any) => void;
 }
 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> {
+export type TreePanelProps<T extends KeyValue = KeyValue> = BaseTreePanelProps<T> & ({
+    /**
+     * enable multi select
+     */
+    multiple?: never | false;
+    /**
+     * selected item id
+     */
+    selected?: string;
+    /**
+     * callback on selection of tree node
+     */
+    onSelect?: (id: string, data: T) => void;
+} | {
+    /**
+     * enable multi select
+     */
+    multiple: true;
+    /**
+     * selected item id
+     */
+    selected?: string[];
+    /**
+     * callback on selection of tree node
+     */
+    onSelect?: (id: string[], data: T) => void;
+});
+interface BaseTreePanelProps<T extends KeyValue = KeyValue> extends TestProps, RefProp<TreeRef> {
     items?: Array<TreeNodeType<T>>;
     /**
      * make tree searchable
@@ -89,13 +125,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      */
     selectable?: true | "leafOnly";
     /**
-     * enable checkable
+     * enable multi select
      */
-    checkable?: true | "leafOnly";
+    multiple?: boolean;
     /**
-     * selected item id
+     * enable checkable
      */
-    selected?: string;
+    checkable?: true | "leafOnly";
     /**
      * checked items
      */
@@ -121,21 +157,31 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      */
     onLoad?: (id: string) => Promise<Array<TreeNodeType<T>> | undefined> | Array<TreeNodeType<T>> | undefined;
     /**
-     * callback on selection of tree node
+     * callback to load tree using search query
      */
-    onSelect?: (id: string) => void;
+    onQuery?: (query: string) => void;
     /**
-     * callback on change of checked list
+     * callback on click of tree node
      */
-    onChecked?: (leafs: string[], nodes: string[]) => void;
+    onClick?: (id: string, data: T) => void;
     /**
-     * item label renderer
+     * 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
      */
-    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) => Elements<JSX.Element>;
+    makeIcon?: (node: T) => Elements<JSX.Element>;
+    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,21 +1,20 @@
-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>({ items, checked, selected, multiple, sorter, matcher, onLoad, onQuery, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>> & {
+    selected?: AnyObject;
+    multiple?: boolean;
 }) => {
     tree: InternalNode[];
+    query: string | undefined;
+    selected: any;
     toggleExpand: (id: string) => void;
     expandAll: () => void;
     collapseAll: () => void;
     toggleCheck: (id: string) => void;
-    select: (id: string) => void;
+    expandAndLoad: (expandList: string[]) => void;
+    select: (id: string, shiftKey?: boolean) => void;
     expand: (id: string) => void;
     onFilter: {
-        (...args: any): void;
+        (...args: AnyObject): void;
         cancel(): void;
     };
 };

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

@@ -1,10 +1,17 @@
 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[];
 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, multiple, selected, }: {
+    nodes: Map<string, InternalNode>;
+    multiple?: boolean;
+    selected?: string | 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;