@react-fabric/data 1.0.0-beta.21 → 1.0.0-beta.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/cjs/table/HeaderCell.js +14 -6
  2. package/dist/cjs/virtual/Gallery.js +17 -17
  3. package/dist/cjs/virtual/List.js +19 -20
  4. package/dist/esm/table/HeaderCell.js +14 -6
  5. package/dist/esm/virtual/Gallery.js +17 -17
  6. package/dist/esm/virtual/List.js +19 -20
  7. package/dist/types/virtual/Gallery.d.ts +2 -1
  8. package/dist/types/virtual/List.d.ts +2 -1
  9. package/package.json +6 -6
  10. package/src/table/HeaderCell.tsx +14 -8
  11. package/src/virtual/Gallery.tsx +17 -23
  12. package/src/virtual/List.tsx +19 -17
package/dist/cjs/table/HeaderCell.js CHANGED
@@ -53,21 +53,27 @@ var HeaderCell = function HeaderCell(_ref) {
53
53
  var _widths$get;
54
54
  return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
55
55
  }, [widths, _width, id]);
56
- var handleSort = react.useCallback(function () {
56
+ var handleSort = react.useCallback(function (order) {
57
57
  sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
58
58
  id: id.toString(),
59
- order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
59
+ order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
60
60
  }));
61
- }, [onSort, name, sort, sortable]);
61
+ }, [onSort, sort, sortable]);
62
62
  var menus = react.useMemo(function () {
63
63
  var ret = [];
64
64
  if (sortable) {
65
65
  ret.push( /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
66
66
  label: "Sort ascending",
67
- icon: core.CoreIcons.sortAsc
67
+ icon: core.CoreIcons.sortAsc,
68
+ onClick: function onClick() {
69
+ return handleSort("asc");
70
+ }
68
71
  }, "sort-asc"), /*#__PURE__*/jsxRuntime.jsx(core.MenuItem, {
69
72
  label: "Sort descending",
70
- icon: core.CoreIcons.sortDesc
73
+ icon: core.CoreIcons.sortDesc,
74
+ onClick: function onClick() {
75
+ return handleSort("desc");
76
+ }
71
77
  }, "sort-desc"));
72
78
  }
73
79
  return ret;
@@ -75,7 +81,9 @@ var HeaderCell = function HeaderCell(_ref) {
75
81
  return /*#__PURE__*/jsxRuntime.jsxs("div", {
76
82
  role: "none",
77
83
  "data-id": id,
78
- onClick: handleSort,
84
+ onClick: function onClick() {
85
+ return handleSort();
86
+ },
79
87
  className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
80
88
  style: {
81
89
  width: width !== null && width !== void 0 ? width : types.COL_DEFAULT_WIDTH,
package/dist/cjs/virtual/Gallery.js CHANGED
@@ -12,7 +12,7 @@ var react = require('react');
12
12
  var Scroller = require('./Scroller.js');
13
13
  var jsxRuntime = require('react/jsx-runtime');
14
14
 
15
- var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
15
+ var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "total", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
16
16
  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; }
17
17
  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; }
18
18
  var createItemList = memoizeOne(function (items) {
@@ -26,6 +26,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
26
26
  fullWidth = _ref.fullWidth,
27
27
  maxWidth = _ref.maxWidth,
28
28
  minWidth = _ref.minWidth,
29
+ _ref$total = _ref.total,
30
+ total = _ref$total === void 0 ? 0 : _ref$total,
29
31
  _ref$padding = _ref.padding,
30
32
  padding = _ref$padding === void 0 ? "md" : _ref$padding,
31
33
  _ref$defaultHeight = _ref.defaultHeight,
@@ -41,7 +43,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
41
43
  aria = _objectWithoutProperties(_ref, _excluded);
42
44
  var count = react.useDeferredValue(items.length);
43
45
  var extraSize = react.useMemo(function () {
44
- return onLoadMore ? 64 : 0;
46
+ return onLoadMore ? 8 : 0;
45
47
  }, [onLoadMore]);
46
48
  var itemList = createItemList(items.map(function (item, index) {
47
49
  return {
@@ -121,26 +123,24 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
121
123
  setScrollActive(calculateActiveScroll());
122
124
  }, [count, calculateActiveScroll]);
123
125
  react.useEffect(function () {
124
- var db = utilities.debounce(function () {
125
- var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
126
- if (lastItem && !loading && lastItem.index * columnCount + columnCount >= count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
127
- });
128
- db();
129
- return function () {
130
- return db.cancel();
131
- };
132
- }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
133
- react.useEffect(function () {
134
- var _virtualItems$2;
135
- var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
136
- if (onLoadMore && firstItem !== undefined && items[firstItem * columnCount] === null) {
126
+ if (onLoadMore) {
127
+ var _virtualItems$2, _virtualItems$slice$p;
128
+ var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
129
+ 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;
130
+ var lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
131
+ var canLoadPrevPage = firstItem !== undefined && items[firstItem * columnCount] === null;
132
+ var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
137
133
  var db = utilities.debounce(onLoadMore);
138
- db(firstItem * columnCount);
134
+ if (canLoadPrevPage) {
135
+ db(firstItem);
136
+ } else if (!loading && canLoadNextPage) {
137
+ db(lastItem + 1);
138
+ }
139
139
  return function () {
140
140
  return db.cancel();
141
141
  };
142
142
  }
143
- }, [onLoadMore, items, columnCount, virtualItems, count]);
143
+ }, [onLoadMore, virtualItems]);
144
144
  react.useLayoutEffect(function () {
145
145
  setTimeout(function () {
146
146
  initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
package/dist/cjs/virtual/List.js CHANGED
@@ -12,7 +12,7 @@ var react = require('react');
12
12
  var Scroller = require('./Scroller.js');
13
13
  var jsxRuntime = require('react/jsx-runtime');
14
14
 
15
- var _excluded = ["items", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
15
+ var _excluded = ["items", "total", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
16
16
  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; }
17
17
  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; }
18
18
  var createItemList = memoizeOne(function (items) {
@@ -21,6 +21,8 @@ var createItemList = memoizeOne(function (items) {
21
21
  var _VirtualList = function _VirtualList(_ref) {
22
22
  var _virtualItems$3, _virtualItems$4;
23
23
  var items = _ref.items,
24
+ _ref$total = _ref.total,
25
+ total = _ref$total === void 0 ? 0 : _ref$total,
24
26
  children = _ref.children,
25
27
  fullWidth = _ref.fullWidth,
26
28
  maxWidth = _ref.maxWidth,
@@ -42,7 +44,7 @@ var _VirtualList = function _VirtualList(_ref) {
42
44
  aria = _objectWithoutProperties(_ref, _excluded);
43
45
  var count = react.useDeferredValue(items.length);
44
46
  var extraSize = react.useMemo(function () {
45
- return onLoadMore ? 64 : 0;
47
+ return onLoadMore ? 8 : 0;
46
48
  }, [onLoadMore]);
47
49
  var itemList = createItemList(items.map(function (item, index) {
48
50
  return {
@@ -111,26 +113,23 @@ var _VirtualList = function _VirtualList(_ref) {
111
113
  setScrollActive(calculateActiveScroll());
112
114
  }, [itemList, calculateActiveScroll]);
113
115
  react.useEffect(function () {
114
- var db = utilities.debounce(function () {
115
- var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
116
- if (lastItem && !loading && lastItem.index === count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
117
- });
118
- db();
119
- return function () {
120
- return db.cancel();
121
- };
122
- }, [onLoadMore, loading, itemList, virtualItems, count]);
123
- react.useEffect(function () {
124
- var _virtualItems$2;
125
- var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
126
- if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
116
+ if (onLoadMore) {
117
+ var _virtualItems$2, _virtualItems$slice$p;
118
+ var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
119
+ 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;
120
+ var canLoadPrevPage = firstItem !== undefined && items[firstItem] === null;
121
+ var canLoadNextPage = lastItem !== undefined && lastItem === count - 1 && count < total;
127
122
  var db = utilities.debounce(onLoadMore);
128
- db(firstItem);
123
+ if (canLoadPrevPage) {
124
+ db(firstItem);
125
+ } else if (!loading && canLoadNextPage) {
126
+ db(lastItem + 1);
127
+ }
129
128
  return function () {
130
129
  return db.cancel();
131
130
  };
132
131
  }
133
- }, [onLoadMore, items, virtualItems, count]);
132
+ }, [onLoadMore, virtualItems]);
134
133
  react.useLayoutEffect(function () {
135
134
  setTimeout(function () {
136
135
  initialScroll && virtualizer.scrollToIndex(initialScroll, {
@@ -198,9 +197,9 @@ var _VirtualList = function _VirtualList(_ref) {
198
197
  children: children(itemList[index])
199
198
  }, key);
200
199
  })]
201
- }), onLoadMore && /*#__PURE__*/jsxRuntime.jsx("div", {
202
- className: orientation === "horizontal" ? "min-w-16" : "h-16",
203
- children: loading && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
200
+ }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
201
+ className: orientation === "horizontal" ? "min-w-16" : "",
202
+ children: /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
204
203
  })]
205
204
  }), !hideScroller && /*#__PURE__*/jsxRuntime.jsx("div", {
206
205
  className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
package/dist/esm/table/HeaderCell.js CHANGED
@@ -53,21 +53,27 @@ var HeaderCell = function HeaderCell(_ref) {
53
53
  var _widths$get;
54
54
  return (_widths$get = widths.get(id.toString())) !== null && _widths$get !== void 0 ? _widths$get : _width;
55
55
  }, [widths, _width, id]);
56
- var handleSort = useCallback(function () {
56
+ var handleSort = useCallback(function (order) {
57
57
  sortable && (onSort === null || onSort === void 0 ? void 0 : onSort({
58
58
  id: id.toString(),
59
- order: (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
59
+ order: order !== null && order !== void 0 ? order : (sort === null || sort === void 0 ? void 0 : sort.id) === id && sort.order === "asc" ? "desc" : "asc"
60
60
  }));
61
- }, [onSort, name, sort, sortable]);
61
+ }, [onSort, sort, sortable]);
62
62
  var menus = useMemo(function () {
63
63
  var ret = [];
64
64
  if (sortable) {
65
65
  ret.push( /*#__PURE__*/jsx(MenuItem, {
66
66
  label: "Sort ascending",
67
- icon: CoreIcons.sortAsc
67
+ icon: CoreIcons.sortAsc,
68
+ onClick: function onClick() {
69
+ return handleSort("asc");
70
+ }
68
71
  }, "sort-asc"), /*#__PURE__*/jsx(MenuItem, {
69
72
  label: "Sort descending",
70
- icon: CoreIcons.sortDesc
73
+ icon: CoreIcons.sortDesc,
74
+ onClick: function onClick() {
75
+ return handleSort("desc");
76
+ }
71
77
  }, "sort-desc"));
72
78
  }
73
79
  return ret;
@@ -75,7 +81,9 @@ var HeaderCell = function HeaderCell(_ref) {
75
81
  return /*#__PURE__*/jsxs("div", {
76
82
  role: "none",
77
83
  "data-id": id,
78
- onClick: handleSort,
84
+ onClick: function onClick() {
85
+ return handleSort();
86
+ },
79
87
  className: "group font-medium border-e flex flex-nowrap text-start items-center table-header-cell",
80
88
  style: {
81
89
  width: width !== null && width !== void 0 ? width : COL_DEFAULT_WIDTH,
package/dist/esm/virtual/Gallery.js CHANGED
@@ -12,7 +12,7 @@ import { useDeferredValue, useMemo, useRef, useState, useEffect, useCallback, us
12
12
  import { Scroller } from './Scroller.js';
13
13
  import { jsx, jsxs } from 'react/jsx-runtime';
14
14
 
15
- var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
15
+ var _excluded = ["items", "children", "columns", "fullWidth", "maxWidth", "minWidth", "total", "padding", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "galleryRef"];
16
16
  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; }
17
17
  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; }
18
18
  var createItemList = memoizeOne(function (items) {
@@ -26,6 +26,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
26
26
  fullWidth = _ref.fullWidth,
27
27
  maxWidth = _ref.maxWidth,
28
28
  minWidth = _ref.minWidth,
29
+ _ref$total = _ref.total,
30
+ total = _ref$total === void 0 ? 0 : _ref$total,
29
31
  _ref$padding = _ref.padding,
30
32
  padding = _ref$padding === void 0 ? "md" : _ref$padding,
31
33
  _ref$defaultHeight = _ref.defaultHeight,
@@ -41,7 +43,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
41
43
  aria = _objectWithoutProperties(_ref, _excluded);
42
44
  var count = useDeferredValue(items.length);
43
45
  var extraSize = useMemo(function () {
44
- return onLoadMore ? 64 : 0;
46
+ return onLoadMore ? 8 : 0;
45
47
  }, [onLoadMore]);
46
48
  var itemList = createItemList(items.map(function (item, index) {
47
49
  return {
@@ -121,26 +123,24 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
121
123
  setScrollActive(calculateActiveScroll());
122
124
  }, [count, calculateActiveScroll]);
123
125
  useEffect(function () {
124
- var db = debounce(function () {
125
- var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
126
- if (lastItem && !loading && lastItem.index * columnCount + columnCount >= count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
127
- });
128
- db();
129
- return function () {
130
- return db.cancel();
131
- };
132
- }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
133
- useEffect(function () {
134
- var _virtualItems$2;
135
- var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
136
- if (onLoadMore && firstItem !== undefined && items[firstItem * columnCount] === null) {
126
+ if (onLoadMore) {
127
+ var _virtualItems$2, _virtualItems$slice$p;
128
+ var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
129
+ 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;
130
+ var lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
131
+ var canLoadPrevPage = firstItem !== undefined && items[firstItem * columnCount] === null;
132
+ var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
137
133
  var db = debounce(onLoadMore);
138
- db(firstItem * columnCount);
134
+ if (canLoadPrevPage) {
135
+ db(firstItem);
136
+ } else if (!loading && canLoadNextPage) {
137
+ db(lastItem + 1);
138
+ }
139
139
  return function () {
140
140
  return db.cancel();
141
141
  };
142
142
  }
143
- }, [onLoadMore, items, columnCount, virtualItems, count]);
143
+ }, [onLoadMore, virtualItems]);
144
144
  useLayoutEffect(function () {
145
145
  setTimeout(function () {
146
146
  initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
package/dist/esm/virtual/List.js CHANGED
@@ -12,7 +12,7 @@ import { useDeferredValue, useMemo, useRef, useEffect, useCallback, useState, us
12
12
  import { Scroller } from './Scroller.js';
13
13
  import { jsx, jsxs } from 'react/jsx-runtime';
14
14
 
15
- var _excluded = ["items", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
15
+ var _excluded = ["items", "total", "children", "fullWidth", "maxWidth", "minWidth", "padding", "orientation", "defaultHeight", "defaultWidth", "hideScroller", "initialScroll", "loading", "onLoadMore", "onScroll", "listRef"];
16
16
  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; }
17
17
  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; }
18
18
  var createItemList = memoizeOne(function (items) {
@@ -21,6 +21,8 @@ var createItemList = memoizeOne(function (items) {
21
21
  var _VirtualList = function _VirtualList(_ref) {
22
22
  var _virtualItems$3, _virtualItems$4;
23
23
  var items = _ref.items,
24
+ _ref$total = _ref.total,
25
+ total = _ref$total === void 0 ? 0 : _ref$total,
24
26
  children = _ref.children,
25
27
  fullWidth = _ref.fullWidth,
26
28
  maxWidth = _ref.maxWidth,
@@ -42,7 +44,7 @@ var _VirtualList = function _VirtualList(_ref) {
42
44
  aria = _objectWithoutProperties(_ref, _excluded);
43
45
  var count = useDeferredValue(items.length);
44
46
  var extraSize = useMemo(function () {
45
- return onLoadMore ? 64 : 0;
47
+ return onLoadMore ? 8 : 0;
46
48
  }, [onLoadMore]);
47
49
  var itemList = createItemList(items.map(function (item, index) {
48
50
  return {
@@ -111,26 +113,23 @@ var _VirtualList = function _VirtualList(_ref) {
111
113
  setScrollActive(calculateActiveScroll());
112
114
  }, [itemList, calculateActiveScroll]);
113
115
  useEffect(function () {
114
- var db = debounce(function () {
115
- var lastItem = virtualItems === null || virtualItems === void 0 ? void 0 : virtualItems.slice(-1).pop();
116
- if (lastItem && !loading && lastItem.index === count - 1) onLoadMore === null || onLoadMore === void 0 || onLoadMore();
117
- });
118
- db();
119
- return function () {
120
- return db.cancel();
121
- };
122
- }, [onLoadMore, loading, itemList, virtualItems, count]);
123
- useEffect(function () {
124
- var _virtualItems$2;
125
- var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
126
- if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
116
+ if (onLoadMore) {
117
+ var _virtualItems$2, _virtualItems$slice$p;
118
+ var firstItem = (_virtualItems$2 = virtualItems[0]) === null || _virtualItems$2 === void 0 ? void 0 : _virtualItems$2.index;
119
+ 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;
120
+ var canLoadPrevPage = firstItem !== undefined && items[firstItem] === null;
121
+ var canLoadNextPage = lastItem !== undefined && lastItem === count - 1 && count < total;
127
122
  var db = debounce(onLoadMore);
128
- db(firstItem);
123
+ if (canLoadPrevPage) {
124
+ db(firstItem);
125
+ } else if (!loading && canLoadNextPage) {
126
+ db(lastItem + 1);
127
+ }
129
128
  return function () {
130
129
  return db.cancel();
131
130
  };
132
131
  }
133
- }, [onLoadMore, items, virtualItems, count]);
132
+ }, [onLoadMore, virtualItems]);
134
133
  useLayoutEffect(function () {
135
134
  setTimeout(function () {
136
135
  initialScroll && virtualizer.scrollToIndex(initialScroll, {
@@ -198,9 +197,9 @@ var _VirtualList = function _VirtualList(_ref) {
198
197
  children: children(itemList[index])
199
198
  }, key);
200
199
  })]
201
- }), onLoadMore && /*#__PURE__*/jsx("div", {
202
- className: orientation === "horizontal" ? "min-w-16" : "h-16",
203
- children: loading && /*#__PURE__*/jsx(Skeleton, {})
200
+ }), loading && /*#__PURE__*/jsx("div", {
201
+ className: orientation === "horizontal" ? "min-w-16" : "",
202
+ children: /*#__PURE__*/jsx(Skeleton, {})
204
203
  })]
205
204
  }), !hideScroller && /*#__PURE__*/jsx("div", {
206
205
  className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
package/dist/types/virtual/Gallery.d.ts CHANGED
@@ -38,6 +38,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
38
38
  * data list
39
39
  */
40
40
  items: T[];
41
+ total?: number;
41
42
  /**
42
43
  * loading state
43
44
  */
@@ -57,6 +58,6 @@ export interface VirtualGalleryProps<T> extends TestProps {
57
58
  onScroll?: (top: number) => void;
58
59
  }
59
60
  export declare const VirtualGallery: {
60
- <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;
61
+ <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;
61
62
  displayName: string;
62
63
  };
package/dist/types/virtual/List.d.ts CHANGED
@@ -38,6 +38,7 @@ export interface VirtualListProps<T> extends TestProps {
38
38
  * data list
39
39
  */
40
40
  items: T[];
41
+ total?: number;
41
42
  initialScroll?: number;
42
43
  /**
43
44
  * loading state
@@ -57,6 +58,6 @@ export interface VirtualListProps<T> extends TestProps {
57
58
  onScroll?: (top: number) => void;
58
59
  }
59
60
  export declare const VirtualList: {
60
- <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;
61
+ <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;
61
62
  displayName: string;
62
63
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@react-fabric/data",
3
- "version": "1.0.0-beta.21",
3
+ "version": "1.0.0-beta.23",
4
4
  "description": "RUF: Data package",
5
5
  "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
6
6
  "license": "MIT",
@@ -33,10 +33,10 @@
33
33
  "watch": "npm-run-all -p watch:rollup watch:dts"
34
34
  },
35
35
  "dependencies": {
36
- "@react-fabric/core": "^1.0.0-beta.21",
37
- "@react-fabric/date": "^1.0.0-beta.21",
38
- "@react-fabric/form": "^1.0.0-beta.21",
39
- "@react-fabric/utilities": "^1.0.0-beta.21",
36
+ "@react-fabric/core": "^1.0.0-beta.23",
37
+ "@react-fabric/date": "^1.0.0-beta.23",
38
+ "@react-fabric/form": "^1.0.0-beta.23",
39
+ "@react-fabric/utilities": "^1.0.0-beta.23",
40
40
  "@tanstack/react-virtual": "^3.8.6",
41
41
  "classnames": "^2.5.1",
42
42
  "color": "^4.2.3",
@@ -52,5 +52,5 @@
52
52
  "node": ">=18.12.0",
53
53
  "npm": ">=8.19.0"
54
54
  },
55
- "gitHead": "31c3d5c19bce7df519a62bd43efd1c9e6341be04"
55
+ "gitHead": "96cac942a837ec03886660d398de74b8bcb2dbac"
56
56
  }
package/src/table/HeaderCell.tsx CHANGED
@@ -64,13 +64,17 @@ export const HeaderCell = ({
64
64
  [widths, _width, id],
65
65
  );
66
66
 
67
- const handleSort = useCallback(() => {
68
- sortable &&
69
- onSort?.({
70
- id: id.toString(),
71
- order: sort?.id === id && sort.order === "asc" ? "desc" : "asc",
72
- });
73
- }, [onSort, name, sort, sortable]);
67
+ const handleSort = useCallback(
68
+ (order?: "asc" | "desc") => {
69
+ sortable &&
70
+ onSort?.({
71
+ id: id.toString(),
72
+ order:
73
+ order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
74
+ });
75
+ },
76
+ [onSort, sort, sortable],
77
+ );
74
78
 
75
79
  const menus = useMemo(() => {
76
80
  const ret = [];
@@ -80,11 +84,13 @@ export const HeaderCell = ({
80
84
  key="sort-asc"
81
85
  label="Sort ascending"
82
86
  icon={CoreIcons.sortAsc}
87
+ onClick={() => handleSort("asc")}
83
88
  />,
84
89
  <MenuItem
85
90
  key="sort-desc"
86
91
  label="Sort descending"
87
92
  icon={CoreIcons.sortDesc}
93
+ onClick={() => handleSort("desc")}
88
94
  />,
89
95
  );
90
96
  }
@@ -95,7 +101,7 @@ export const HeaderCell = ({
95
101
  <div
96
102
  role="none"
97
103
  data-id={id}
98
- onClick={handleSort}
104
+ onClick={() => handleSort()}
99
105
  className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
100
106
  style={{
101
107
  width: width ?? COL_DEFAULT_WIDTH,
package/src/virtual/Gallery.tsx CHANGED
@@ -81,6 +81,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
81
81
  * data list
82
82
  */
83
83
  items: T[];
84
+ total?: number;
84
85
  /**
85
86
  * loading state
86
87
  */
@@ -109,6 +110,7 @@ const _VirtualGallery = <T extends KeyValue>({
109
110
  fullWidth,
110
111
  maxWidth,
111
112
  minWidth,
113
+ total = 0,
112
114
  padding = "md",
113
115
  defaultHeight: height = 48,
114
116
  defaultWidth: width = 48,
@@ -121,7 +123,7 @@ const _VirtualGallery = <T extends KeyValue>({
121
123
  ...aria
122
124
  }: VirtualGalleryProps<T>) => {
123
125
  const count = useDeferredValue(items.length);
124
- const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
126
+ const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
125
127
  const itemList: Array<{
126
128
  index: number;
127
129
  item: T;
@@ -214,31 +216,23 @@ const _VirtualGallery = <T extends KeyValue>({
214
216
  }, [count, calculateActiveScroll]);
215
217
 
216
218
  useEffect(() => {
217
- const db = debounce(() => {
218
- const lastItem = virtualItems?.slice(-1).pop();
219
- if (
220
- lastItem &&
221
- !loading &&
222
- lastItem.index * columnCount + columnCount >= count - 1
223
- )
224
- onLoadMore?.();
225
- });
226
- db();
227
- return () => db.cancel();
228
- }, [onLoadMore, loading, itemList, virtualItems, count, columnCount]);
229
-
230
- useEffect(() => {
231
- const firstItem = virtualItems[0]?.index;
232
- if (
233
- onLoadMore &&
234
- firstItem !== undefined &&
235
- items[firstItem * columnCount] === null
236
- ) {
219
+ if (onLoadMore) {
220
+ const firstItem = virtualItems[0]?.index;
221
+ const lastItem = virtualItems?.slice(-1).pop()?.index;
222
+ const lastIndex = (lastItem ?? 0) * columnCount + columnCount;
223
+ const canLoadPrevPage =
224
+ firstItem !== undefined && items[firstItem * columnCount] === null;
225
+ const canLoadNextPage =
226
+ lastItem !== undefined && lastIndex >= count - 1 && count < total;
237
227
  const db = debounce(onLoadMore);
238
- db(firstItem * columnCount);
228
+ if (canLoadPrevPage) {
229
+ db(firstItem);
230
+ } else if (!loading && canLoadNextPage) {
231
+ db(lastItem + 1);
232
+ }
239
233
  return () => db.cancel();
240
234
  }
241
- }, [onLoadMore, items, columnCount, virtualItems, count]);
235
+ }, [onLoadMore, virtualItems]);
242
236
 
243
237
  useLayoutEffect(() => {
244
238
  setTimeout(() => {
package/src/virtual/List.tsx CHANGED
@@ -88,6 +88,7 @@ export interface VirtualListProps<T> extends TestProps {
88
88
  * data list
89
89
  */
90
90
  items: T[];
91
+ total?: number;
91
92
  initialScroll?: number;
92
93
  /**
93
94
  * loading state
@@ -111,6 +112,7 @@ const createItemList = memoizeOne((items) => items);
111
112
 
112
113
  const _VirtualList = <T extends KeyValue>({
113
114
  items,
115
+ total = 0,
114
116
  children,
115
117
  fullWidth,
116
118
  maxWidth,
@@ -128,7 +130,7 @@ const _VirtualList = <T extends KeyValue>({
128
130
  ...aria
129
131
  }: VirtualListProps<T>) => {
130
132
  const count = useDeferredValue(items.length);
131
- const extraSize = useMemo(() => (onLoadMore ? 64 : 0), [onLoadMore]);
133
+ const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
132
134
  const itemList: Array<{
133
135
  index: number;
134
136
  data: T;
@@ -205,22 +207,22 @@ const _VirtualList = <T extends KeyValue>({
205
207
  }, [itemList, calculateActiveScroll]);
206
208
 
207
209
  useEffect(() => {
208
- const db = debounce(() => {
209
- const lastItem = virtualItems?.slice(-1).pop();
210
- if (lastItem && !loading && lastItem.index === count - 1) onLoadMore?.();
211
- });
212
- db();
213
- return () => db.cancel();
214
- }, [onLoadMore, loading, itemList, virtualItems, count]);
215
-
216
- useEffect(() => {
217
- const firstItem = virtualItems[0]?.index;
218
- if (onLoadMore && firstItem !== undefined && items[firstItem] === null) {
210
+ if (onLoadMore) {
211
+ const firstItem = virtualItems[0]?.index;
212
+ const lastItem = virtualItems?.slice(-1).pop()?.index;
213
+ const canLoadPrevPage =
214
+ firstItem !== undefined && items[firstItem] === null;
215
+ const canLoadNextPage =
216
+ lastItem !== undefined && lastItem === count - 1 && count < total;
219
217
  const db = debounce(onLoadMore);
220
- db(firstItem);
218
+ if (canLoadPrevPage) {
219
+ db(firstItem);
220
+ } else if (!loading && canLoadNextPage) {
221
+ db(lastItem + 1);
222
+ }
221
223
  return () => db.cancel();
222
224
  }
223
- }, [onLoadMore, items, virtualItems, count]);
225
+ }, [onLoadMore, virtualItems]);
224
226
 
225
227
  useLayoutEffect(() => {
226
228
  setTimeout(() => {
@@ -315,9 +317,9 @@ const _VirtualList = <T extends KeyValue>({
315
317
  </div>
316
318
  ))}
317
319
  </div>
318
- {onLoadMore && (
319
- <div className={orientation === "horizontal" ? "min-w-16" : "h-16"}>
320
- {loading && <Skeleton />}
320
+ {loading && (
321
+ <div className={orientation === "horizontal" ? "min-w-16" : ""}>
322
+ <Skeleton />
321
323
  </div>
322
324
  )}
323
325
  </div>