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

package/dist/esm/table/Table.js

@@ -2,11 +2,11 @@
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import { useDebounce, Loading, EmptyContent } from '@react-fabric/core';
-import classNames from 'classnames';
-import { useRef, useMemo, useImperativeHandle } from 'react';
+import { debounce } from '@react-fabric/utilities';
+import { useRef, useMemo, useLayoutEffect, useImperativeHandle, useEffect } from 'react';
 import { useTranslation } from 'react-i18next';
 import { AddColumn } from './AddColumn.js';
-import { BodyCell } from './BodyCell.js';
+import { BodyRow } from './BodyRow.js';
 import { CheckboxCell } from './CheckboxCell.js';
 import { TableProvider } from './Context.js';
 import { EmptyCell } from './EmptyCell.js';
@@ -18,16 +18,21 @@ import { jsx, jsxs } from 'react/jsx-runtime';
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 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 Table = function Table(_ref) {
-  var _state$start, _state$cols, _state$end, _items$, _state$start3, _state$cols3, _state$end3;
+  var _state$start, _state$cols, _state$end, _items$, _state$start2, _state$cols2, _state$end2;
   var ref = _ref.ref,
     data = _ref.data,
     columns = _ref.columns,
     keyProperty = _ref.keyProperty,
     checkableRows = _ref.checkableRows,
+    initialScroll = _ref.initialScroll,
     hideableColumns = _ref.hideableColumns,
     sort = _ref.sort,
     loading = _ref.loading,
+    emptyDisplay = _ref.emptyDisplay,
+    canExpand = _ref.canExpand,
+    children = _ref.children,
     onSort = _ref.onSort,
+    onScroll = _ref.onScroll,
     onRowClick = _ref.onRowClick,
     onCheckedChanged = _ref.onCheckedChanged;
   var _useTranslation = useTranslation("data"),
@@ -41,7 +46,10 @@ var Table = function Table(_ref) {
   var _useVirtualTable = useVirtualTable(data, keyProperty, fireCheckChanged),
     scrollerRef = _useVirtualTable.scrollerRef,
     items = _useVirtualTable.items,
+    top = _useVirtualTable.top,
     checkState = _useVirtualTable.checkState,
+    virtualizer = _useVirtualTable.virtualizer,
+    toggleExpand = _useVirtualTable.toggleExpand,
     toggleChecked = _useVirtualTable.toggleChecked,
     toggleAllChecked = _useVirtualTable.toggleAllChecked,
     getData = _useVirtualTable.getData,
@@ -54,35 +62,46 @@ var Table = function Table(_ref) {
   var wrapperEnd = useMemo(function () {
     return "bg-inherit sticky end-0 flex flex-nowrap z-1 border-s -ms-px";
   }, []);
+  useLayoutEffect(function () {
+    setTimeout(function () {
+      initialScroll && virtualizer.scrollToIndex(initialScroll, {
+        align: "start"
+      });
+    }, 100);
+  }, []);
   useImperativeHandle(ref, function () {
     return {
-      hilight: function hilight(row) {
-        var _refBody$current, _refBody$current2;
-        (_refBody$current = refBody.current) === null || _refBody$current === void 0 || _refBody$current.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
-          return el && (el.dataset.hilight = undefined);
-        });
-        var el = (_refBody$current2 = refBody.current) === null || _refBody$current2 === void 0 ? void 0 : _refBody$current2.querySelector("[data-row=\"".concat(row, "\"]"));
-        el === null || el === void 0 || el.scrollIntoView({
-          behavior: "smooth",
-          block: "center"
+      scrollTo: function scrollTo(row) {
+        virtualizer.scrollToIndex(row, {
+          align: "start"
         });
-        el && (el.dataset.hilight = "true");
       },
-      unhilight: function unhilight() {
-        var _refBody$current3;
-        (_refBody$current3 = refBody.current) === null || _refBody$current3 === void 0 || _refBody$current3.querySelectorAll(".datatable-row[data-hilight=\"true\"]").forEach(function (el) {
-          return el && (el.dataset.hilight = undefined);
+      hilight: function hilight(row) {
+        var _scrollerRef$current;
+        (_scrollerRef$current = scrollerRef.current) === null || _scrollerRef$current === void 0 || (_scrollerRef$current = _scrollerRef$current.querySelector(".hilight")) === null || _scrollerRef$current === void 0 || _scrollerRef$current.classList.remove("hilight", "ring-1");
+        virtualizer.scrollToIndex(Math.floor(row), {
+          align: "start"
         });
+        setTimeout(function () {
+          var _scrollerRef$current2;
+          (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector("[data-index=\"".concat(row, "\"]"))) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.add("hilight", "ring-1");
+        }, 100);
       },
-      scrollTo: function scrollTo(row) {
-        var _refBody$current4;
-        var el = (_refBody$current4 = refBody.current) === null || _refBody$current4 === void 0 ? void 0 : _refBody$current4.querySelector("[data-row=\"".concat(row, "\"]"));
-        el === null || el === void 0 || el.scrollIntoView({
-          behavior: "smooth"
-        });
+      unhilight: function unhilight() {
+        var _scrollerRef$current3;
+        (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector(".hilight")) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.remove("hilight", "ring-1");
       }
     };
   }, []);
+  useEffect(function () {
+    var handle = debounce(function (top) {
+      onScroll === null || onScroll === void 0 || onScroll(top !== null && top !== void 0 ? top : 0);
+    });
+    handle(top);
+    return function () {
+      handle.cancel();
+    };
+  }, [top]);
   return /*#__PURE__*/jsx(TableProvider, {
     children: /*#__PURE__*/jsxs("div", {
       className: "grid area-content overflow-auto relative",
@@ -94,7 +113,9 @@ var Table = function Table(_ref) {
         className: "bg-base font-medium sticky top-0 area-head border-b select-none flex flex-nowrap z-2",
         children: [/*#__PURE__*/jsxs("div", {
           className: wrapperStart,
-          children: [checkableRows && /*#__PURE__*/jsx(CheckboxCell, {
+          children: [canExpand && /*#__PURE__*/jsx("div", {
+            className: "w-6"
+          }), checkableRows && /*#__PURE__*/jsx(CheckboxCell, {
             state: checkState.allChecked,
             onClick: toggleAllChecked
           }), (_state$start = state.start) === null || _state$start === void 0 ? void 0 : _state$start.map(function (col, idx) {
@@ -133,74 +154,55 @@ var Table = function Table(_ref) {
             height: (_items$ = items[0]) === null || _items$ === void 0 ? void 0 : _items$.start
           }
         }), items.map(function (_ref2) {
-          var _state$start2, _state$cols2, _state$end2;
           var index = _ref2.index,
             key = _ref2.key;
           var data = getData(index);
-          return /*#__PURE__*/jsxs("div", {
-            role: "none",
-            "data-row": index,
-            className: classNames("flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500", index % 2 ? "bg-even" : "bg-odd", onRowClick && "hover:bg-primary-50 active:bg-primary-100"),
-            onClick: function onClick() {
-              return checkableRows && keyProperty && !onRowClick ? toggleChecked(data[keyProperty]) : onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick(data);
-            },
-            "data-index": index,
-            ref: measureElement,
-            children: [/*#__PURE__*/jsxs("div", {
-              className: wrapperStart,
-              children: [checkableRows && keyProperty && /*#__PURE__*/jsx(CheckboxCell, {
-                onClick: function onClick() {
-                  return toggleChecked(data[keyProperty]);
-                },
-                state: checkState.checked.includes(data[keyProperty]) ? 1 : 0
-              }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col, ids) {
-                return /*#__PURE__*/jsx(BodyCell, {
-                  column: col,
-                  item: data
-                }, "".concat(key, ":").concat(ids));
-              })]
-            }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col, idc) {
-              return /*#__PURE__*/jsx(BodyCell, {
-                column: col,
-                item: data
-              }, "".concat(key, ":").concat(idc));
-            }), /*#__PURE__*/jsxs("div", {
-              className: wrapperEnd,
-              children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col, ide) {
-                return /*#__PURE__*/jsx(BodyCell, {
-                  column: col,
-                  item: data
-                }, "".concat(key, ":").concat(ide));
-              }), hideableColumns && /*#__PURE__*/jsx("div", {
-                className: "w-6"
-              })]
-            })]
+          return /*#__PURE__*/jsx(BodyRow, {
+            rowKey: key,
+            index: index,
+            checkableRows: checkableRows,
+            checked: keyProperty && checkState.checked.includes(data[keyProperty]) ? 1 : 0,
+            expanded: !!keyProperty && checkState.expanded.includes(data[keyProperty]),
+            data: data,
+            hideableColumns: hideableColumns,
+            keyProperty: keyProperty,
+            measureElement: measureElement,
+            onRowClick: onRowClick,
+            state: state,
+            canExpand: canExpand,
+            toggleExpand: toggleExpand,
+            expandRow: children,
+            toggleChecked: toggleChecked,
+            wrapperEnd: wrapperEnd,
+            wrapperStart: wrapperStart
           }, key);
         }), /*#__PURE__*/jsxs("div", {
           className: "flex-1 flex flex-nowrap",
           children: [/*#__PURE__*/jsxs("div", {
             className: wrapperStart,
-            children: [checkableRows && /*#__PURE__*/jsx("div", {
+            children: [canExpand && /*#__PURE__*/jsx("div", {
+              className: "w-6"
+            }), checkableRows && /*#__PURE__*/jsx("div", {
               className: "w-6"
-            }), (_state$start3 = state.start) === null || _state$start3 === void 0 ? void 0 : _state$start3.map(function (col) {
+            }), (_state$start2 = state.start) === null || _state$start2 === void 0 ? void 0 : _state$start2.map(function (col) {
               return /*#__PURE__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
             })]
-          }), (_state$cols3 = state.cols) === null || _state$cols3 === void 0 ? void 0 : _state$cols3.map(function (col) {
+          }), (_state$cols2 = state.cols) === null || _state$cols2 === void 0 ? void 0 : _state$cols2.map(function (col) {
             return /*#__PURE__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
           }), /*#__PURE__*/jsxs("div", {
             className: wrapperEnd,
-            children: [(_state$end3 = state.end) === null || _state$end3 === void 0 ? void 0 : _state$end3.map(function (col) {
+            children: [(_state$end2 = state.end) === null || _state$end2 === void 0 ? void 0 : _state$end2.map(function (col) {
               return /*#__PURE__*/jsx(EmptyCell, _objectSpread({}, col), String(col.id));
             }), hideableColumns && /*#__PURE__*/jsx("div", {
               className: "w-6"
             })]
           })]
         })]
-      }), !loading && data.length === 0 && /*#__PURE__*/jsx(EmptyContent, {
+      }), !loading && data.length === 0 && (emptyDisplay !== null && emptyDisplay !== void 0 ? emptyDisplay : /*#__PURE__*/jsx(EmptyContent, {
         size: "sm",
         className: "bg-dimmed",
         message: t("datagrid.empty")
-      })]
+      }))]
     })
   });
 };

package/dist/esm/table/useVirtualTable.js

@@ -8,6 +8,7 @@ import { useRef, useReducer, useCallback } from 'react';
 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 useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged) {
+  var _virtualizer$range;
   // TODO: refactor data into item list, apply grouping if groupColumn provided
   // TODO: when grouping maintain map of group with children, {___GROUP___:true, label, items, open}
 
@@ -22,8 +23,12 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
     }
   });
   var _useReducer = useReducer(function (state, action) {
+      if (action.type === "expand") {
+        if (state.expanded.includes(action.key)) state.expanded.splice(state.expanded.indexOf(action.key), 1);else state.expanded.push(action.key);
+      }
       if (action.type === "check") {
         if (state.checked.includes(action.key)) state.checked.splice(state.checked.indexOf(action.key), 1);else state.checked.push(action.key);
+        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       }
       if (action.type === "checkall") {
         if (state.allChecked !== 0) {
@@ -33,13 +38,14 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
             return item[keyProperty];
           });
         }
+        onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       }
-      onCheckChanged === null || onCheckChanged === void 0 || onCheckChanged(state.checked);
       return _objectSpread(_objectSpread({}, state), {}, {
         allChecked: state.checked.length === data.length ? 1 : state.checked.length ? 2 : 0
       });
     }, {
       checked: [],
+      expanded: [],
       allChecked: 0
     }),
     _useReducer2 = _slicedToArray(_useReducer, 2),
@@ -54,8 +60,16 @@ var useVirtualTable = function useVirtualTable(data, keyProperty, onCheckChanged
     items: virtualItems,
     checkState: state,
     getData: getData,
+    virtualizer: virtualizer,
+    top: (_virtualizer$range = virtualizer.range) === null || _virtualizer$range === void 0 ? void 0 : _virtualizer$range.startIndex,
     totalSize: virtualizer.getTotalSize,
     measureElement: virtualizer.measureElement,
+    toggleExpand: function toggleExpand(key) {
+      return dispatch({
+        type: "expand",
+        key: key
+      });
+    },
     toggleChecked: function toggleChecked(key) {
       return dispatch({
         type: "check",

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", "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;
 });
@@ -29,7 +34,8 @@ 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;
@@ -163,10 +169,11 @@ 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", {
@@ -220,7 +227,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,6 +12,9 @@ import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, us
 import { Scroller } from './Scroller.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+var _excluded = ["items", "children", "fullWidth", "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;
 });
@@ -31,7 +36,8 @@ 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;
@@ -154,10 +160,11 @@ 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", {
@@ -209,7 +216,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, checkableRows, initialScroll, hideableColumns, sort, loading, emptyDisplay, canExpand, children, onSort, onScroll, onRowClick, onCheckedChanged, }: TableProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,11 +1,12 @@
-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;
+    tooltip?: string;
     actions?: ReactElement;
     align?: "start" | "center" | "end";
     locked?: "start" | "end";
@@ -20,7 +21,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,9 +30,10 @@ 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;
+    emptyDisplay?: ReactElement;
     /**
      * checkable rows
      */
@@ -50,4 +53,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,5 +1,6 @@
 /// <reference types="react" />
 interface DataState {
+    expanded: Key[];
     checked: Key[];
     allChecked: 0 | 1 | 2;
 }
@@ -8,8 +9,11 @@ export declare const useVirtualTable: (data: KeyValue[], keyProperty?: Key, onCh
     items: import("@tanstack/virtual-core").VirtualItem<Element>[];
     checkState: DataState;
     getData: (index: number) => KeyValue<any>;
+    virtualizer: import("@tanstack/virtual-core").Virtualizer<HTMLDivElement, Element>;
+    top: number | undefined;
     totalSize: () => number;
     measureElement: (node: Element | null | undefined) => void;
+    toggleExpand: (key: Key) => void;
     toggleChecked: (key: Key) => void;
     toggleAllChecked: () => void;
 };

package/dist/types/virtual/Gallery.d.ts

@@ -1,10 +1,11 @@
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement, type Ref } from "react";
 export interface VirtualGalleryRef {
     scrollToItem: (index: number) => void;
     hilight: (index: number) => void;
     unhilight: () => void;
 }
-export interface VirtualGalleryProps<T> {
+export interface VirtualGalleryProps<T> extends TestProps {
     children: (props: {
         data: T;
         index: number;
@@ -50,6 +51,6 @@ export interface VirtualGalleryProps<T> {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualGallery: {
-    <T extends KeyValue<any>>({ items, children, columns, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, columns, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/dist/types/virtual/List.d.ts

@@ -1,10 +1,11 @@
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement, type Ref } from "react";
 export interface VirtualListRef {
     scrollToItem: (index: number) => void;
     hilight: (index: number) => void;
     unhilight: () => void;
 }
-export interface VirtualListProps<T> {
+export interface VirtualListProps<T> extends TestProps {
     children: (props: {
         data: T;
         index: number;
@@ -54,6 +55,6 @@ export interface VirtualListProps<T> {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualList: {
-    <T extends KeyValue<any>>({ items, children, fullWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, fullWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };