@react-fabric/data 1.0.0-beta.9 → 1.0.2

package/dist/cjs/virtual/Gallery.js

@@ -6,23 +6,27 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
-var classNames = require('classnames');
-var memoizeOne = require('memoize-one');
+var memoize = require('memoize-one');
 var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "children", "columns", "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) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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 = memoize(function (items) {
   return items;
 });
-var _VirtualGallery = function _VirtualGallery(_ref) {
+var VirtualGalleryComponent = function VirtualGalleryComponent(_ref) {
   var _virtualItems$3;
   var items = _ref.items,
     children = _ref.children,
     columns = _ref.columns,
+    fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$defaultHeight = _ref.defaultHeight,
@@ -38,13 +42,13 @@ 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, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = react.useRef(null);
@@ -61,8 +65,9 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     if (scrollerRef.current) {
       var el = scrollerRef.current;
       var handler = function handler() {
-        var _el$offsetWidth;
-        setColumnCount(columns !== null && columns !== void 0 ? columns : Math.max(1, Math.floor((((_el$offsetWidth = el === null || el === void 0 ? void 0 : el.offsetWidth) !== null && _el$offsetWidth !== void 0 ? _el$offsetWidth : 800) - 32) / width)));
+        var _getComputedStyle$pad, _el$firstElementChild, _el$offsetWidth;
+        var pad = parseInt((_getComputedStyle$pad = getComputedStyle((_el$firstElementChild = el.firstElementChild) === null || _el$firstElementChild === void 0 ? void 0 : _el$firstElementChild.firstElementChild).padding) !== null && _getComputedStyle$pad !== void 0 ? _getComputedStyle$pad : 8);
+        setColumnCount(columns !== null && columns !== void 0 ? columns : Math.max(1, Math.floor((((_el$offsetWidth = el === null || el === void 0 ? void 0 : el.offsetWidth) !== null && _el$offsetWidth !== void 0 ? _el$offsetWidth : 800) - 32 - (isNaN(pad) ? 8 : pad) * 2) / width)));
       };
       var ob = new ResizeObserver(handler);
       handler();
@@ -80,14 +85,15 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     },
     estimateSize: function estimateSize() {
       return height;
-    }
+    },
+    overscan: 0
   });
   var virtualItems = virtualizer.getVirtualItems();
-  var currentIndex = react.useRef(0);
+  var currentIndexRef = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$1$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
-    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndexRef.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndexRef.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {
     var _scrollerRef$current;
@@ -102,85 +108,105 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     if (scrollTop === 0) return 1;
     if (scrollTop >= scrollHeight - offsetHeight - extraSize * 2) return 2;
     return 3;
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, []);
   var _useState3 = react.useState(0),
     _useState4 = _slicedToArray(_useState3, 2),
     scrollActive = _useState4[0],
     setScrollActive = _useState4[1];
   var fireScrollEvent = core.useDebounce(function (idx) {
-    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndex.current * idx);
+    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndexRef.current * idx);
   }, [onScroll]);
   var handleScroll = react.useCallback(function () {
     setScrollActive(calculateActiveScroll());
     fireScrollEvent(columnCount);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [columnCount, onLoadMore]);
   react.useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     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 firstIndex = firstItem * columnCount;
+      var lastIndex = (lastItem !== null && lastItem !== void 0 ? lastItem : 0) * columnCount + columnCount;
+      var canLoadPrevPage = firstItem !== undefined && items[firstIndex] === null;
+      var canLoadNextPage = lastItem !== undefined && lastIndex >= count - 1 && count < total;
       var db = utilities.debounce(onLoadMore);
-      db(firstItem * columnCount);
+      if (canLoadPrevPage) {
+        db(firstIndex);
+      } else if (!loading && canLoadNextPage) {
+        db(lastIndex + 1);
+      }
       return function () {
         return db.cancel();
       };
     }
-  }, [onLoadMore, items, columnCount, virtualItems, count]);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [onLoadMore, virtualItems]);
+  var isRenderedRef = react.useRef(false);
   react.useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-        align: "start"
-      });
-    }, 100);
-  }, [columnCount]);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      if (initialScroll) {
+        var tmr = setTimeout(function () {
+          virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+            align: "start"
+          });
+        }, 200);
+        return function () {
+          clearTimeout(tmr);
+        };
+      }
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [columnCount, initialScroll, itemList]);
   react.useImperativeHandle(galleryRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
-        (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
-        virtualizer.scrollToIndex(Math.floor(index / columnCount), {
-          align: "start"
+        var el = (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 ? void 0 : _scrollerRef$current2.querySelector("[data-selected='true']");
+        if (el) el.dataset.selected = "false";
+        virtualizer.scrollToIndex(Math.floor(index), {
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;
-          (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"))) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.add("hilight", "ring-1");
+          var el = (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 ? void 0 : _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"));
+          if (el) el.dataset.selected = "true";
         }, 100);
       },
       unhilight: function unhilight() {
         var _scrollerRef$current4;
-        (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 || (_scrollerRef$current4 = _scrollerRef$current4.querySelector(".hilight")) === null || _scrollerRef$current4 === void 0 || _scrollerRef$current4.classList.remove("hilight", "ring-1");
+        var el = (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 ? void 0 : _scrollerRef$current4.querySelector("[data-selected='true']");
+        if (el) el.dataset.selected = "false";
       }
     };
   }, [virtualizer, columnCount]);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict")
+    className: utilities.cn("area-content bg-default overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full"),
+      className: utilities.cn("flex flex-nowrap justify-center gap-2 min-h-full"),
       children: [/*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames("box-content", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        className: utilities.cn("box-content", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: /*#__PURE__*/jsxRuntime.jsxs("div", {
           style: {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             style: {
@@ -188,27 +214,32 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
             }
           }), virtualItems.map(function (_ref3) {
             var key = _ref3.key,
-              index = _ref3.index,
-              measureElement = _ref3.measureElement;
+              index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
               className: "flex",
               "data-index": index,
-              ref: measureElement,
+              ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
+                var _itemList, _itemList2;
                 return /*#__PURE__*/jsxRuntime.jsx("div", {
                   "data-index": index * columnCount + col,
-                  className: classNames("grid rounded-capped"),
-                  children: itemList[index * columnCount + col] && children(itemList[index * columnCount + col])
+                  className: utilities.cn("grid rounded-capped"),
+                  style: {
+                    minWidth: width,
+                    minHeight: height
+                  },
+                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : ((_itemList2 = itemList[index * columnCount + col]) === null || _itemList2 === void 0 ? void 0 : _itemList2.item) === null && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+                    className: "p-2"
+                  })
                 }, "".concat(key, ":").concat(col));
               })
             }, key);
-          }), onLoadMore && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "h-16",
-            children: loading && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
+          }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
           })]
         })
       }), !hideScroller && /*#__PURE__*/jsxRuntime.jsx("div", {
-        className: classNames("self-end sticky bottom-2"),
+        className: utilities.cn("self-end sticky bottom-2"),
         children: /*#__PURE__*/jsxRuntime.jsx(Scroller.Scroller, {
           vertical: true,
           scrollActive: scrollActive,
@@ -229,8 +260,35 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     })
   }));
 };
-_VirtualGallery.displayName = "VirtualGallery";
 var GenericMemo = react.memo;
-var VirtualGallery = GenericMemo(_VirtualGallery);
+
+/**
+ * VirtualGallery component provides a virtualized gallery view for displaying a large list of items efficiently.
+ * It supports features like fixed columns, loading states, and customizable item rendering.
+ * The component uses virtualization to render only the visible items, improving performance for large datasets.
+ * It also provides a scroller for easy navigation through the items.
+ *
+ * @example
+ * ```jsx
+ * <VirtualGallery
+ *   items={items}
+ *   columns={3}
+ *   defaultHeight={100}
+ *   defaultWidth={100}
+ *   fullWidth={true}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualGallery>
+ * ```
+ * @see {@link https://tanstack.com/docs/react-virtual/latest/overview}
+ */
+var VirtualGallery = GenericMemo(VirtualGalleryComponent);
 
 exports.VirtualGallery = VirtualGallery;

package/dist/cjs/virtual/List.js

@@ -6,23 +6,26 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
 var reactVirtual = require('@tanstack/react-virtual');
-var classNames = require('classnames');
-var memoizeOne = require('memoize-one');
+var memoize = require('memoize-one');
 var react = require('react');
 var Scroller = require('./Scroller.js');
 var jsxRuntime = require('react/jsx-runtime');
 
-var _excluded = ["items", "children", "fullWidth", "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) {
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).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 = memoize(function (items) {
   return items;
 });
-var _VirtualList = function _VirtualList(_ref) {
+var VirtualListComponent = function VirtualListComponent(_ref) {
   var _virtualItems$3, _virtualItems$4;
   var items = _ref.items,
+    _ref$total = _ref.total,
+    total = _ref$total === void 0 ? 0 : _ref$total,
     children = _ref.children,
     fullWidth = _ref.fullWidth,
+    maxWidth = _ref.maxWidth,
+    minWidth = _ref.minWidth,
     _ref$padding = _ref.padding,
     padding = _ref$padding === void 0 ? "md" : _ref$padding,
     _ref$orientation = _ref.orientation,
@@ -40,18 +43,19 @@ 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, idx) {
+  var itemList = createItemList(items.map(function (item, index) {
     return {
-      index: idx,
-      data: item,
-      isLast: idx + 1 === items.length
+      index: index,
+      item: item,
+      isLast: index + 1 === items.length
     };
   }));
   var scrollerRef = react.useRef(null);
   var virtualizer = reactVirtual.useVirtualizer({
     count: count,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -61,11 +65,11 @@ var _VirtualList = function _VirtualList(_ref) {
     }
   });
   var virtualItems = virtualizer.getVirtualItems();
-  var currentIndex = react.useRef(0);
+  var currentIndexRef = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$1$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$1$index = (_virtualItems$ = virtualItems[1]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$1$index !== void 0 ? _virtualItems$1$index : 0;
-    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndexRef.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
+    if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndexRef.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {
     var _scrollerRef$current;
@@ -93,87 +97,105 @@ var _VirtualList = function _VirtualList(_ref) {
       if (Math.abs(scrollLeft) >= scrollWidth - offsetWidth - extraSize * 2) return 2;
     }
     return 3;
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [orientation]);
   var _useState = react.useState(0),
     _useState2 = _slicedToArray(_useState, 2),
     scrollActive = _useState2[0],
     setScrollActive = _useState2[1];
   var fireScrollEvent = core.useDebounce(function () {
-    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndex.current);
+    return onScroll === null || onScroll === void 0 ? void 0 : onScroll(currentIndexRef.current);
   }, [onScroll]);
   var handleScroll = react.useCallback(function () {
     setScrollActive(calculateActiveScroll());
     fireScrollEvent();
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
   }, [orientation, onLoadMore]);
   react.useEffect(function () {
+    // eslint-disable-next-line @eslint-react/set-state-in-effect
     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]);
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [onLoadMore, virtualItems]);
+  var isRenderedRef = react.useRef(false);
   react.useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(initialScroll, {
-        align: "start"
-      });
-    }, 100);
-  }, []);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      if (initialScroll) {
+        var tmr = setTimeout(function () {
+          virtualizer.scrollToIndex(Math.floor(initialScroll), {
+            align: "start"
+          });
+        }, 200);
+        return function () {
+          clearTimeout(tmr);
+        };
+      }
+    }
+    // eslint-disable-next-line @eslint-react/exhaustive-deps
+  }, [itemList, initialScroll]);
   react.useImperativeHandle(listRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
         virtualizer.scrollToIndex(index, {
-          align: "start"
+          align: "auto"
         });
       },
       hilight: function hilight(index) {
         var _scrollerRef$current2;
-        (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 || (_scrollerRef$current2 = _scrollerRef$current2.querySelector(".hilight")) === null || _scrollerRef$current2 === void 0 || _scrollerRef$current2.classList.remove("hilight", "ring-1");
+        var el = (_scrollerRef$current2 = scrollerRef.current) === null || _scrollerRef$current2 === void 0 ? void 0 : _scrollerRef$current2.querySelector("[data-selected='true']");
+        if (el) el.dataset.selected = "false";
         virtualizer.scrollToIndex(Math.floor(index), {
-          align: "start"
+          align: "auto"
         });
         setTimeout(function () {
           var _scrollerRef$current3;
-          (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 || (_scrollerRef$current3 = _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"))) === null || _scrollerRef$current3 === void 0 || _scrollerRef$current3.classList.add("hilight", "ring-1");
+          var el = (_scrollerRef$current3 = scrollerRef.current) === null || _scrollerRef$current3 === void 0 ? void 0 : _scrollerRef$current3.querySelector("[data-index=\"".concat(index, "\"]"));
+          if (el) el.dataset.selected = "true";
         }, 100);
       },
       unhilight: function unhilight() {
         var _scrollerRef$current4;
-        (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 || (_scrollerRef$current4 = _scrollerRef$current4.querySelector(".hilight")) === null || _scrollerRef$current4 === void 0 || _scrollerRef$current4.classList.remove("hilight", "ring-1");
+        var el = (_scrollerRef$current4 = scrollerRef.current) === null || _scrollerRef$current4 === void 0 ? void 0 : _scrollerRef$current4.querySelector("[data-selected='true']");
+        if (el) el.dataset.selected = "false";
       }
     };
   }, [virtualizer]);
   return /*#__PURE__*/jsxRuntime.jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto contain-strict")
+    className: utilities.cn("area-content bg-default overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: classNames("inline-flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
+      className: utilities.cn("flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
       children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
-        className: classNames("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        className: utilities.cn("box-content inline-flex flex-nowrap", orientation === "vertical" && "flex-col", orientation === "horizontal" && "flex-row", fullWidth && "flex-1", padding === "sm" && "p-1", padding === "md" && "p-2", padding === "lg" && "p-4"),
+        style: {
+          minWidth: minWidth,
+          maxWidth: maxWidth
+        },
         children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
           style: orientation === "vertical" ? {
-            height: virtualizer.getTotalSize()
+            height: virtualizer.getTotalSize() + extraSize
           } : {
-            width: virtualizer.getTotalSize()
+            width: virtualizer.getTotalSize() + extraSize
           },
           children: [/*#__PURE__*/jsxRuntime.jsx("div", {
             style: orientation === "vertical" ? {
@@ -183,21 +205,28 @@ var _VirtualList = function _VirtualList(_ref) {
               display: "inline-block"
             }
           }), virtualItems.map(function (_ref3) {
+            var _itemList$index, _itemList$index2;
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
               "data-index": index,
               ref: virtualizer.measureElement,
-              className: classNames("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
-              children: children(itemList[index])
+              className: utilities.cn("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
+              style: {
+                minWidth: width,
+                minHeight: height
+              },
+              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : ((_itemList$index2 = itemList[index]) === null || _itemList$index2 === void 0 ? void 0 : _itemList$index2.item) === null && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+                className: "p-2"
+              })
             }, 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"),
+        className: utilities.cn(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky inset-e-2"),
         children: /*#__PURE__*/jsxRuntime.jsx(Scroller.Scroller, {
           vertical: orientation === "vertical",
           scrollActive: scrollActive,
@@ -218,8 +247,40 @@ var _VirtualList = function _VirtualList(_ref) {
     })
   }));
 };
-_VirtualList.displayName = "VirtualList";
 var GenericMemo = react.memo;
-var VirtualList = GenericMemo(_VirtualList);
+
+/**
+ * VirtualList component for rendering large lists efficiently using virtualization.
+ * It supports horizontal and vertical orientations, custom item heights and widths,
+ * and provides a scroller for navigating through the list.
+ * It also supports loading more items on scroll and provides a way to hilight items.
+ * It can be used with a ref to control scrolling and hilighting of items.
+ *
+ * @example
+ * ```jsx
+ * <VirtualList
+ *   items={items}
+ *   children={({ item, index, isLast }) => (
+ *     <div key={index} className="item">
+ *       {item.label}
+ *     </div>
+ *   )}
+ *   fullWidth={true}
+ *   orientation="vertical"
+ *   defaultHeight={50}
+ *   onLoadMore={(lastIndex) => console.log("Load more items from index:", lastIndex)}
+ *   onScroll={(top) => console.log("Scrolled to top:", top)}
+ *   listRef={virtualListRef}
+ * >
+ *   {({ item, index, isLast }) => (
+ *     <div className="gallery-item" key={item.id}>
+ *       <img src={item.image} alt={item.label} />
+ *       <p>{item.label}</p>
+ *     </div>
+ *   )}
+ * </VirtualList>
+ * ```
+ */
+var VirtualList = GenericMemo(VirtualListComponent);
 
 exports.VirtualList = VirtualList;

package/dist/cjs/virtual/Scroller.js

@@ -39,35 +39,43 @@ var Scroller = function Scroller(_ref) {
     variant: "link",
     className: "outline",
     children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to top",
-      icon: vertical ? core.CoreIcons.chevronsUp : core.CoreIcons.chevronsLeft,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-double-up]" : "icon-[mdi--chevron-double-left]",
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onStart
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll up",
-      icon: vertical ? core.CoreIcons.chevronUp : core.CoreIcons.chevronLeft,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-up]" : "icon-[mdi--chevron-left]",
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onPrevious
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll down",
-      icon: vertical ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-down]" : "icon-[mdi--chevron-right]",
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onNext
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to bottom",
-      icon: vertical ? core.CoreIcons.chevronsDown : core.CoreIcons.chevronsRight,
+      icon: {
+        icon: vertical ? "icon-[mdi--chevron-double-down]" : "icon-[mdi--chevron-double-right]",
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onEnd
     })]