@react-fabric/data 1.0.0-beta.4 → 1.0.0-beta.40

package/dist/esm/virtual/Gallery.js

@@ -1,6 +1,8 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useEffectDebugger, useDebounce, Skeleton } from '@react-fabric/core';
 import { debounce } from '@react-fabric/utilities';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -10,6 +12,9 @@ import { useDeferredValue, useMemo, useRef, useState, useEffect, useCallback, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "total", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
+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 createItemList = memoizeOne(function (items) {
   return items;
 });
@@ -18,6 +23,11 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   var items = _ref.items,
     children = _ref.children,
     columns = _ref.columns,
+    fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$defaultHeight = _ref.defaultHeight,
@@ -29,16 +39,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     loading = _ref.loading,
     onLoadMore = _ref.onLoadMore,
     onScroll = _ref.onScroll,
-    galleryRef = _ref.galleryRef;
+    galleryRef = _ref.galleryRef,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var count = useDeferredValue(items.length);
   var extraSize = useMemo(function () {
-    return onLoadMore ? 64 : 0;
+    return onLoadMore ? 8 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = useRef(null);
@@ -112,26 +123,24 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     setScrollActive(calculateActiveScroll());
   }, [count, calculateActiveScroll]);
   useEffect(function () {
-    var db = debounce(function () {
-      var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index * columnCount + columnCount >= count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
-    });
-    db();
-    return function () {
-      return db.cancel();
-    };
-  }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
-  useEffect(function () {
-    var _virtualItems$2;
-    var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem * columnCount] === null) {
+    if (onLoadMore) {
+      var _virtualItems$2, _virtualItems$slice$p;
+      var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.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 lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
+      var canLoadPrevPage = firstItem !== undefined && items[firstItem * columnCount] === null;
+      var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
       var db = debounce(onLoadMore);
-      db(firstItem * columnCount);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return function () {
         return db.cancel();
       };
     }
-  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
   useLayoutEffect(function () {
     setTimeout(function () {
       initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
@@ -143,14 +152,14 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;
@@ -163,17 +172,22 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       }
     };
   }, [virtualizer, columnCount]);
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    className: classNames("area-content bg-base overflow-auto contain-strict")
+  }, aria), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
       children: [/*#__PURE__*/jsx("div", {
-        className: classNames("box-content", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        className: classNames("box-content", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: /*#__PURE__*/jsxs("div", {
           style: {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsx("div", {
             style: {
@@ -184,7 +198,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               index = _ref3.index,
               measureElement = _ref3.measureElement;
             return /*#__PURE__*/jsx("div", {
-              className: "flex",
+              className: "flex justify-start",
               "data-index": index,
               ref: measureElement,
               children: columnMap.map(function (col) {
@@ -220,7 +234,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualGallery.displayName = "VirtualGallery";
 var GenericMemo = memo;

package/dist/esm/virtual/List.js

@@ -1,6 +1,8 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { useDebounce, Skeleton } from '@react-fabric/core';
 import { debounce } from '@react-fabric/utilities';
 import { useVirtualizer } from '@tanstack/react-virtual';
@@ -10,14 +12,21 @@ import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var _excluded = ["items", "total", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+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 createItemList = memoizeOne(function (items) {
   return items;
 });
 var _VirtualList = function _VirtualList(_ref) {
   var _virtualItems$3, _virtualItems$4;
   var items = _ref.items,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
     children = _ref.children,
     fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$orientation = _ref.orientation,
@@ -31,16 +40,17 @@ var _VirtualList = function _VirtualList(_ref) {
     loading = _ref.loading,
     onLoadMore = _ref.onLoadMore,
     onScroll = _ref.onScroll,
-    listRef = _ref.listRef;
+    listRef = _ref.listRef,
+    aria = _objectWithoutProperties(_ref, _excluded);
   var count = useDeferredValue(items.length);
   var extraSize = useMemo(function () {
-    return onLoadMore ? 64 : 0;
+    return onLoadMore ? 8 : 0;
   }, [onLoadMore]);
-  var itemList = createItemList(items.map(function (item, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = useRef(null);
@@ -103,26 +113,23 @@ var _VirtualList = function _VirtualList(_ref) {
     setScrollActive(calculateActiveScroll());
   }, [itemList, calculateActiveScroll]);
   useEffect(function () {
-    var db = debounce(function () {
-      var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index === count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
-    });
-    db();
-    return function () {
-      return db.cancel();
-    };
-  }, [onLoadMore, loading, itemList, virtualItems, count]);
-  useEffect(function () {
-    var _virtualItems$2;
-    var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
+    if (onLoadMore) {
+      var _virtualItems$2, _virtualItems$slice$p;
+      var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.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 && items[firstItem] === null;
+      var canLoadNextPage = lastItem !== undefined && lastItem === count - 1 && count < total;
       var db = debounce(onLoadMore);
-      db(firstItem);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return function () {
         return db.cancel();
       };
     }
-  }, [onLoadMore, items, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
   useLayoutEffect(function () {
     setTimeout(function () {
       initialScroll && virtualizer.scrollToIndex(initialScroll, {
@@ -134,14 +141,14 @@ var _VirtualList = function _VirtualList(_ref) {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(index, {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
         (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;
@@ -154,19 +161,24 @@ var _VirtualList = function _VirtualList(_ref) {
       }
     };
   }, [virtualizer]);
-  return /*#__PURE__*/jsx("div", {
+  return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict"),
+    className: classNames("area-content bg-base overflow-auto contain-strict")
+  }, aria), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/jsxs("div", {
         className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: [/*#__PURE__*/jsxs("div", {
           style: orientation === "vertical" ? {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           } : {
-            width: virtualizer.getTotalSize()
+            width: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsx("div", {
             style: orientation === "vertical" ? {
@@ -185,9 +197,9 @@ var _VirtualList = function _VirtualList(_ref) {
               children: children(itemList[index])
             }, key);
           })]
-        }), onLoadMore && /*#__PURE__*/jsx("div", {
-          className: orientation === "horizontal" ? "min-w-16" : "h-16",
-          children: loading && /*#__PURE__*/jsx(Skeleton, {})
+        }), loading && /*#__PURE__*/jsx("div", {
+          className: orientation === "horizontal" ? "min-w-16" : "",
+          children: /*#__PURE__*/jsx(Skeleton, {})
         })]
       }), !hideScroller && /*#__PURE__*/jsx("div", {
         className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
@@ -209,7 +221,7 @@ var _VirtualList = function _VirtualList(_ref) {
         })
       })]
     })
-  });
+  }));
 };
 _VirtualList.displayName = "VirtualList";
 var GenericMemo = memo;

package/dist/types/checklist/CheckList.d.ts

@@ -1,4 +1,4 @@
-import { type BadgeType } from "@react-fabric/core/dist/types/types";
+import { type BadgeType, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type FC } from "react";
 import { type SelectableProps } from "../hooks/useSelectableList";
 export interface CheckListItem extends KeyValue {
@@ -8,7 +8,7 @@ export interface CheckListItem extends KeyValue {
     badge?: BadgeType;
     isDisabled?: boolean;
 }
-export interface CheckListProps extends SelectableProps {
+export interface CheckListProps extends SelectableProps, TestProps {
     /**
      * list items
      */

package/dist/types/histogram/Histogram.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import { type ColorType, type PaletteType } from "@react-fabric/core/dist/types/types";
+import { type ColorType, type PaletteType, type TestProps } from "@react-fabric/core/dist/types/types";
 interface HistogramItem {
     id: string;
     label: string;
@@ -7,7 +7,7 @@ interface HistogramItem {
     total?: number;
     disabled?: boolean;
 }
-export interface HistogramProps {
+export interface HistogramProps extends TestProps {
     /**
      * histogram items list
      */
@@ -37,5 +37,5 @@ export interface HistogramProps {
      */
     onClick?: (id: string, negative?: true) => void;
 }
-export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Histogram: ({ items, total, color, sortBy, emptyTitle, emptyMessage, onClick, ...aria }: HistogramProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/types/index.d.ts

@@ -4,7 +4,7 @@ export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
 export { Table } from "./table/Table";
-export { type TableRef } from "./table/types";
+export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";
 export { type TreeNodeType as TreeNode } from "./tree/types";
 export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";

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

@@ -1,5 +1,5 @@
-import { type ColumnType } from "./types";
+import { type TableColumn } from "./types";
 export declare const AddColumn: ({ columns, onClick, }: {
-    columns: ColumnType[];
+    columns: TableColumn[];
     onClick: (id: string) => void;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,5 +1,6 @@
-import { type ColumnType } from "./types";
-export declare const BodyCell: ({ column, item, }: {
-    column: ColumnType;
+import { type TableColumn } from "./types";
+export declare const BodyCell: ({ column, item, index, }: {
+    column: TableColumn;
     item: KeyValue;
+    index: number;
 }) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,20 @@
+import { type TableColumn } from "./types";
+export declare const BodyRow: ({ rowKey, index, data, keyProperty, measureElement, state, hideableColumns, wrapperStart, wrapperEnd, onRowClick, checkableRows, checked, toggleChecked, canExpand, expanded, toggleExpand, expandRow, }: {
+    rowKey: Key;
+    index: number;
+    data: KeyValue;
+    keyProperty?: Key;
+    measureElement: AnyObject;
+    state: KeyValue<TableColumn[]>;
+    hideableColumns?: boolean;
+    wrapperStart: string;
+    wrapperEnd: string;
+    checkableRows?: boolean;
+    checked: 0 | 1;
+    onRowClick?: AnyObject;
+    canExpand?: AnyObject;
+    expandRow?: AnyObject;
+    expanded: boolean;
+    toggleExpand: (key: Key) => void;
+    toggleChecked: (key: Key) => void;
+}) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,2 +1,2 @@
-import { type ColumnType } from "./types";
-export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: ColumnType) => import("react/jsx-runtime").JSX.Element;
+import { type TableColumn } from "./types";
+export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: TableColumn) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,2 +1,2 @@
 import { type TableProps } from "./types";
-export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, checkableRows, hideableColumns, sort, loading, onSort, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: <T extends KeyValue<any> = KeyValue<any>>({ ref, data, columns, keyProperty, groupProperty, checkableRows, initialScroll, hideableColumns, sort, loading, checked, emptyDisplay, groupRenderer, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,15 +1,17 @@
-import { type CssProp, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { type CssProp, type Elements, type IconProps, 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 ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps {
+export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps {
     id: keyof T | string;
     label?: string;
-    actions?: ReactElement;
+    tooltip?: string;
+    actions?: ReactElement[];
     align?: "start" | "center" | "end";
     locked?: "start" | "end";
     hidden?: boolean;
+    truncate?: boolean;
     hideable?: boolean;
     resizable?: boolean;
     sortable?: boolean;
@@ -20,7 +22,8 @@ export interface ColumnType<T = KeyValue> extends CssProp, IconProps, TestProps
     maxWidth?: string | number;
     dataType?: "string" | "number" | "boolean" | "datetime" | "date" | "time" | "unknown";
     format?: string;
-    renderer?: (value: AnyObject, data: T) => void;
+    valueMap?: KeyValue;
+    renderer?: (value: AnyObject, data: T, index: number) => Elements<AnyObject>;
 }
 export interface TableRef {
     hilight: (row: number) => void;
@@ -28,14 +31,18 @@ export interface TableRef {
     scrollTo: (row: number) => void;
 }
 export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
-    columns: Array<ColumnType<T>>;
+    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
      */
@@ -50,4 +57,8 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
     loading?: boolean;
     hideableColumns?: boolean;
     onRowClick?: (data: T) => void;
+    initialScroll?: number;
+    onScroll?: (firstItem: number) => void;
+    canExpand?: (record: T) => boolean;
+    children?: (record: T) => Elements<AnyObject>;
 }

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

@@ -1,10 +1,10 @@
-import { type ColumnType } from "./types";
-export declare const useTableColumns: (columns: ColumnType[]) => {
+import { type TableColumn } from "./types";
+export declare const useTableColumns: (columns: TableColumn[]) => {
     state: {
-        start: ColumnType<KeyValue<any>>[];
-        end: ColumnType<KeyValue<any>>[];
-        cols: ColumnType<KeyValue<any>>[];
-        columns: ColumnType[];
+        start: TableColumn<KeyValue<any>>[];
+        end: TableColumn<KeyValue<any>>[];
+        cols: TableColumn<KeyValue<any>>[];
+        columns: TableColumn[];
     };
     onHide: (id: string) => void;
 };

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

@@ -1,15 +1,30 @@
 /// <reference types="react" />
-interface DataState {
-    checked: Key[];
+interface DataState<T = KeyValue> {
+    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) => {
+export declare const useVirtualTable: <T extends KeyValue<any> = KeyValue<any>>(data: T[], options: {
+    checked?: AnyObject[];
+    keyProperty: keyof T;
+    groupProperty?: keyof T;
+    onCheckChanged?: (checked: AnyObject[]) => void;
+}) => {
     scrollerRef: import("react").RefObject<HTMLDivElement>;
     items: import("@tanstack/virtual-core").VirtualItem<Element>[];
-    checkState: DataState;
-    getData: (index: number) => KeyValue<any>;
+    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,2 @@
 import { type TreePanelProps } from "./types";
-export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, onSelect, ...aria }: TreePanelProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const TreePanel: <T extends KeyValue<any>>({ ref, items, selected, checked, checkable, noLines, renderer, searchable, selectable, matcher, filterPlaceholder, defaultLeafIcon, defaultNodeIcon, expander, onChecked, onLoad, 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,6 +1,6 @@
-/// <reference types="react" />
 import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
-interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
+import { type ElementType } from "react";
+interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
     id: string;
     /**
      * display label
@@ -23,17 +23,18 @@ interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
      */
     disabled?: boolean;
     data?: T;
+    icon?: ElementType<IconProps> | string;
 }
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
     leaf: true;
     children?: never;
 } | {
-    leaf?: false;
+    leaf?: boolean;
     children?: Array<TreeNodeType<T>>;
     open?: boolean;
     iconOpen?: string;
 });
-export interface InternalNode extends IconProps, CssProp, TestProps {
+export interface InternalNode extends Omit<IconProps, "icon">, CssProp, TestProps {
     id: string;
     label: Elements<JSX.Element>;
     queryable?: string;
@@ -50,6 +51,7 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
     loaded: boolean;
     parent?: string;
     empty?: boolean;
+    icon?: ElementType<IconProps> | string;
     errored?: string;
     selected?: true;
     childSelected?: true;
@@ -66,9 +68,12 @@ export interface TreeNodeProps extends ChildProp {
     noLines?: boolean;
     selectable?: true | "leafOnly";
     checkable?: true | "leafOnly";
+    leafClassName?: string;
+    nodeClassName?: string;
     onToggle: (id: string) => void;
     onSelect: (id: string) => void;
     onChecked: (id: string) => void;
+    onClick?: (id: string, node: any) => void;
 }
 export interface TreeRef {
     select: (id: string) => void;
@@ -120,10 +125,18 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * callback for lazy loading tree items
      */
     onLoad?: (id: string) => Promise<Array<TreeNodeType<T>> | undefined> | Array<TreeNodeType<T>> | undefined;
+    /**
+     * callback to load tree using search query
+     */
+    onQuery?: (query: string) => void;
+    /**
+     * callback on click of tree node
+     */
+    onClick?: (id: string, data: T) => void;
     /**
      * callback on selection of tree node
      */
-    onSelect?: (id: string) => void;
+    onSelect?: (id: string, data: T) => void;
     /**
      * callback on change of checked list
      */
@@ -136,6 +149,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * item filter matcher
      */
     matcher?: (data: T, query: string) => boolean;
+    sorter?: false | ((a: T, b: T) => number);
+    makeLabel?: (node: T) => string;
+    makeIcon?: (node: T) => string;
+    defaultExpanded?: string[];
+    onExpandToggle?: (id: string[]) => void;
+    leafClassName?: string;
+    nodeClassName?: string;
 }
 export declare const iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
 export declare const iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";