@react-fabric/data 1.0.0-beta.20 → 1.0.0-beta.22

package/dist/cjs/table/BodyCell.js

@@ -80,7 +80,7 @@ var BodyCell = function BodyCell(_ref) {
       maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : types.COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsxRuntime.jsx("div", {
-      className: classNames("px-2 py-1", column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
+      className: classNames("px-2 py-1", column.className, column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
       children: content
     })
   });

package/dist/cjs/table/HeaderCell.js

@@ -53,21 +53,27 @@ var HeaderCell = function HeaderCell(_ref) {
     var _widths$get;
     return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
   }, [widths, _width, id]);
-  var handleSort = react.useCallback(function () {
+  var handleSort = react.useCallback(function (order) {
     sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
       id: id.toString(),
-      order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
+      order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
     }));
-  }, [onSort, name, sort, sortable]);
+  }, [onSort, sort, sortable]);
   var menus = react.useMemo(function () {
     var ret = [];
     if (sortable) {
       ret.push( /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort ascending",
-        icon: core.CoreIcons.sortAsc
+        icon: core.CoreIcons.sortAsc,
+        onClick: function onClick() {
+          return handleSort("asc");
+        }
       }, "sort-asc"), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
         label: "Sort descending",
-        icon: core.CoreIcons.sortDesc
+        icon: core.CoreIcons.sortDesc,
+        onClick: function onClick() {
+          return handleSort("desc");
+        }
       }, "sort-desc"));
     }
     return ret;
@@ -75,7 +81,9 @@ var HeaderCell = function HeaderCell(_ref) {
   return /*#__PURE__*/jsxRuntime.jsxs("div", {
     role: "none",
     "data-id": id,
-    onClick: handleSort,
+    onClick: function onClick() {
+      return handleSort();
+    },
     className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
     style: {
       width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,

package/dist/cjs/virtual/Gallery.js

@@ -12,7 +12,7 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
+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) {
@@ -26,6 +26,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     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,
@@ -41,7 +43,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     aria = _objectWithoutProperties(_ref, _excluded);
   var count = react.useDeferredValue(items.length);
   var extraSize = react.useMemo(function () {
-    return onLoadMore ? 64 : 0;
+    return onLoadMore ? 8 : 0;
   }, [onLoadMore]);
   var itemList = createItemList(items.map(function (item, index) {
     return {
@@ -121,26 +123,24 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     setScrollActive(calculateActiveScroll());
   }, [count, calculateActiveScroll]);
   react.useEffect(function () {
-    var db = utilities.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]);
-  react.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 = utilities.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]);
   react.useLayoutEffect(function () {
     setTimeout(function () {
       initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {

package/dist/cjs/virtual/List.js

@@ -12,7 +12,7 @@ var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+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) {
@@ -21,6 +21,8 @@ var createItemList = memoizeOne(function (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,
@@ -42,7 +44,7 @@ var _VirtualList = function _VirtualList(_ref) {
     aria = _objectWithoutProperties(_ref, _excluded);
   var count = react.useDeferredValue(items.length);
   var extraSize = react.useMemo(function () {
-    return onLoadMore ? 64 : 0;
+    return onLoadMore ? 8 : 0;
   }, [onLoadMore]);
   var itemList = createItemList(items.map(function (item, index) {
     return {
@@ -111,26 +113,23 @@ var _VirtualList = function _VirtualList(_ref) {
     setScrollActive(calculateActiveScroll());
   }, [itemList, calculateActiveScroll]);
   react.useEffect(function () {
-    var db = utilities.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]);
-  react.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 = utilities.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]);
   react.useLayoutEffect(function () {
     setTimeout(function () {
       initialScroll && virtualizer.scrollToIndex(initialScroll, {
@@ -198,9 +197,9 @@ var _VirtualList = function _VirtualList(_ref) {
               children: children(itemList[index])
             }, key);
           })]
-        }), onLoadMore && /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: orientation === "horizontal" ? "min-w-16" : "h-16",
-          children: loading && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
+        }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: orientation === "horizontal" ? "min-w-16" : "",
+          children: /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
         })]
       }), !hideScroller && /*#__PURE__*/jsxRuntime.jsx("div", {
         className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),

package/dist/esm/table/BodyCell.js

@@ -80,7 +80,7 @@ var BodyCell = function BodyCell(_ref) {
       maxWidth: (_column$maxWidth = column.maxWidth) !== null && _column$maxWidth !== void 0 ? _column$maxWidth : COL_MAX_WIDTH
     },
     children: /*#__PURE__*/jsx("div", {
-      className: classNames("px-2 py-1", column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
+      className: classNames("px-2 py-1", column.className, column.truncate && "truncate", column.align === "center" && "text-center", column.align === "end" && "text-end"),
       children: content
     })
   });

package/dist/esm/table/HeaderCell.js

@@ -53,21 +53,27 @@ var HeaderCell = function HeaderCell(_ref) {
     var _widths$get;
     return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
   }, [widths, _width, id]);
-  var handleSort = useCallback(function () {
+  var handleSort = useCallback(function (order) {
     sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
       id: id.toString(),
-      order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
+      order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
     }));
-  }, [onSort, name, sort, sortable]);
+  }, [onSort, sort, sortable]);
   var menus = useMemo(function () {
     var ret = [];
     if (sortable) {
       ret.push( /*#__PURE__*/jsx(MenuItem, {
         label: "Sort ascending",
-        icon: CoreIcons.sortAsc
+        icon: CoreIcons.sortAsc,
+        onClick: function onClick() {
+          return handleSort("asc");
+        }
       }, "sort-asc"), /*#__PURE__*/jsx(MenuItem, {
         label: "Sort descending",
-        icon: CoreIcons.sortDesc
+        icon: CoreIcons.sortDesc,
+        onClick: function onClick() {
+          return handleSort("desc");
+        }
       }, "sort-desc"));
     }
     return ret;
@@ -75,7 +81,9 @@ var HeaderCell = function HeaderCell(_ref) {
   return /*#__PURE__*/jsxs("div", {
     role: "none",
     "data-id": id,
-    onClick: handleSort,
+    onClick: function onClick() {
+      return handleSort();
+    },
     className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
     style: {
       width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,

package/dist/esm/virtual/Gallery.js

@@ -12,7 +12,7 @@ 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", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
+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) {
@@ -26,6 +26,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     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,
@@ -41,7 +43,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     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, index) {
     return {
@@ -121,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), {

package/dist/esm/virtual/List.js

@@ -12,7 +12,7 @@ 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", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
+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) {
@@ -21,6 +21,8 @@ var createItemList = memoizeOne(function (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,
@@ -42,7 +44,7 @@ var _VirtualList = function _VirtualList(_ref) {
     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, index) {
     return {
@@ -111,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, {
@@ -198,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"),

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

@@ -38,6 +38,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
      * data list
      */
     items: T[];
+    total?: number;
     /**
      * loading state
      */
@@ -57,6 +58,6 @@ export interface VirtualGalleryProps<T> extends TestProps {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualGallery: {
-    <T extends KeyValue<any>>({ items, children, columns, fullWidth, maxWidth, minWidth, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, columns, fullWidth, maxWidth, minWidth, total, 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

@@ -38,6 +38,7 @@ export interface VirtualListProps<T> extends TestProps {
      * data list
      */
     items: T[];
+    total?: number;
     initialScroll?: number;
     /**
      * loading state
@@ -57,6 +58,6 @@ export interface VirtualListProps<T> extends TestProps {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualList: {
-    <T extends KeyValue<any>>({ items, children, fullWidth, maxWidth, minWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, total, children, fullWidth, maxWidth, minWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.20",
+  "version": "1.0.0-beta.22",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,10 +33,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.20",
-    "@react-fabric/date": "^1.0.0-beta.20",
-    "@react-fabric/form": "^1.0.0-beta.20",
-    "@react-fabric/utilities": "^1.0.0-beta.20",
+    "@react-fabric/core": "^1.0.0-beta.22",
+    "@react-fabric/date": "^1.0.0-beta.22",
+    "@react-fabric/form": "^1.0.0-beta.22",
+    "@react-fabric/utilities": "^1.0.0-beta.22",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -52,5 +52,5 @@
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "b265afe1779c1654fc9cf8d9de6e7396b64515d3"
+  "gitHead": "71904746bcfbbb6b4ee39c5fc7a00c8f4a18a052"
 }

package/src/table/BodyCell.tsx

@@ -84,6 +84,7 @@ export const BodyCell = ({
       <div
         className={classNames(
           "px-2 py-1",
+          column.className,
           column.truncate && "truncate",
           column.align === "center" && "text-center",
           column.align === "end" && "text-end",

package/src/table/HeaderCell.tsx

@@ -64,13 +64,17 @@ export const HeaderCell = ({
     [widths, _width, id],
   );
 
-  const handleSort = useCallback(() => {
-    sortable &&
-      onSort?.({
-        id: id.toString(),
-        order: sort?.id === id && sort.order === "asc" ? "desc" : "asc",
-      });
-  }, [onSort, name, sort, sortable]);
+  const handleSort = useCallback(
+    (order?: "asc" | "desc") => {
+      sortable &&
+        onSort?.({
+          id: id.toString(),
+          order:
+            order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
+        });
+    },
+    [onSort, sort, sortable],
+  );
 
   const menus = useMemo(() => {
     const ret = [];
@@ -80,11 +84,13 @@ export const HeaderCell = ({
           key="sort-asc"
           label="Sort ascending"
           icon={CoreIcons.sortAsc}
+          onClick={() => handleSort("asc")}
         />,
         <MenuItem
           key="sort-desc"
           label="Sort descending"
           icon={CoreIcons.sortDesc}
+          onClick={() => handleSort("desc")}
         />,
       );
     }
@@ -95,7 +101,7 @@ export const HeaderCell = ({
     <div
       role="none"
       data-id={id}
-      onClick={handleSort}
+      onClick={() => handleSort()}
       className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,

package/src/virtual/Gallery.tsx

@@ -81,6 +81,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
    * data list
    */
   items: T[];
+  total?: number;
   /**
    * loading state
    */
@@ -109,6 +110,7 @@ const _VirtualGallery = <T extends KeyValue>({
   fullWidth,
   maxWidth,
   minWidth,
+  total = 0,
   padding = "md",
   defaultHeight: height = 48,
   defaultWidth: width = 48,
@@ -121,7 +123,7 @@ const _VirtualGallery = <T extends KeyValue>({
   ...aria
 }: VirtualGalleryProps<T>) => {
   const count = useDeferredValue(items.length);
-  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
     item: T;
@@ -214,31 +216,23 @@ const _VirtualGallery = <T extends KeyValue>({
   }, [count, calculateActiveScroll]);
 
   useEffect(() => {
-    const db = debounce(() => {
-      const lastItem = virtualItems?.slice(-1).pop();
-      if (
-        lastItem &&
-        !loading &&
-        lastItem.index * columnCount + columnCount >= count - 1
-      )
-        onLoadMore?.();
-    });
-    db();
-    return () => db.cancel();
-  }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
-
-  useEffect(() => {
-    const firstItem = virtualItems[0]?.index;
-    if (
-      onLoadMore &&
-      firstItem !== undefined &&
-      items[firstItem * columnCount] === null
-    ) {
+    if (onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const lastIndex = (lastItem ?? 0) * columnCount + columnCount;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstItem * columnCount] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastIndex >= count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem * columnCount);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, columnCount, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
   useLayoutEffect(() => {
     setTimeout(() => {

package/src/virtual/List.tsx

@@ -88,6 +88,7 @@ export interface VirtualListProps<T> extends TestProps {
    * data list
    */
   items: T[];
+  total?: number;
   initialScroll?: number;
   /**
    * loading state
@@ -111,6 +112,7 @@ const createItemList = memoizeOne((items) => items);
 
 const _VirtualList = <T extends KeyValue>({
   items,
+  total = 0,
   children,
   fullWidth,
   maxWidth,
@@ -128,7 +130,7 @@ const _VirtualList = <T extends KeyValue>({
   ...aria
 }: VirtualListProps<T>) => {
   const count = useDeferredValue(items.length);
-  const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
+  const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
     data: T;
@@ -205,22 +207,22 @@ const _VirtualList = <T extends KeyValue>({
   }, [itemList, calculateActiveScroll]);
 
   useEffect(() => {
-    const db = debounce(() => {
-      const lastItem = virtualItems?.slice(-1).pop();
-      if (lastItem && !loading && lastItem.index === count - 1) onLoadMore?.();
-    });
-    db();
-    return () => db.cancel();
-  }, [onLoadMore, loading, itemList, virtualItems, count]);
-
-  useEffect(() => {
-    const firstItem = virtualItems[0]?.index;
-    if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
+    if (onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const canLoadPrevPage =
+        firstItem !== undefined && items[firstItem] === null;
+      const canLoadNextPage =
+        lastItem !== undefined && lastItem === count - 1 && count < total;
       const db = debounce(onLoadMore);
-      db(firstItem);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
       return () => db.cancel();
     }
-  }, [onLoadMore, items, virtualItems, count]);
+  }, [onLoadMore, virtualItems]);
 
   useLayoutEffect(() => {
     setTimeout(() => {
@@ -315,9 +317,9 @@ const _VirtualList = <T extends KeyValue>({
               </div>
             ))}
           </div>
-          {onLoadMore && (
-            <div className={orientation === "horizontal" ? "min-w-16" : "h-16"}>
-              {loading && <Skeleton />}
+          {loading && (
+            <div className={orientation === "horizontal" ? "min-w-16" : ""}>
+              <Skeleton />
             </div>
           )}
         </div>