@slithy/react-grid-gallery 0.1.2 → 0.2.0

package/dist/index.d.ts

@@ -22,8 +22,12 @@ type GridLayoutRow<T> = {
     height: number;
 };
 type GridRow<T> = {
+    rowIndex: number;
+    startIndex: number;
     items: Array<{
         item: GalleryItem<T>;
+        itemIndex: number;
+        colIndex: number;
         width: number;
         height: number;
         loaded: boolean;
@@ -42,6 +46,7 @@ type VirtualWindow = {
 declare function useGridGallery<T>(items: GalleryItem<T>[], options: GridOptions, scrollContainerRef?: ScrollContainerRef): {
     containerRef: RefObject<HTMLDivElement | null>;
     rows: GridRow<T>[];
+    totalRows: number;
     cellWidth: number;
     cellHeight: number;
     gap: number;

package/dist/index.js

@@ -80,7 +80,7 @@ function useGridGallery(items, options, scrollContainerRef) {
   const [focusedIndex, setFocusedIndex] = useState2(0);
   const pendingFocusRef = useRef2(null);
   const loadedSet = useRef2(/* @__PURE__ */ new Set());
-  const [loadedVersion, setLoadedVersion] = useState2(0);
+  const [loadedTick, setLoadedTick] = useState2(0);
   const virtualRange = useVirtualWindow(containerRef, options.virtualize === true, scrollContainerRef);
   useEffect2(() => {
     const observer = new ResizeObserver((entries) => {
@@ -94,7 +94,7 @@ function useGridGallery(items, options, scrollContainerRef) {
   const onLoad = useCallback((key) => {
     if (!loadedSet.current.has(key)) {
       loadedSet.current.add(key);
-      setLoadedVersion((v) => v + 1);
+      setLoadedTick((v) => v + 1);
     }
   }, []);
   const onError = useCallback((_key) => {
@@ -110,36 +110,67 @@ function useGridGallery(items, options, scrollContainerRef) {
   const resolvedAspectRatio = finitePositive(rawAspectRatio, 1);
   const cellWidth = containerWidth > 0 ? Math.max(0, Math.floor((containerWidth - resolvedGap * (resolvedColumns - 1)) / resolvedColumns)) : 0;
   const cellHeight = cellWidth > 0 ? Math.round(cellWidth / resolvedAspectRatio) : 0;
-  const rows = useMemo(() => {
-    if (cellWidth === 0) return [];
-    const layoutRows = computeGridLayout(items, resolvedColumns, cellWidth, cellHeight);
-    return layoutRows.map((row) => ({
-      height: row.height,
-      items: row.items.map((item) => ({
-        item,
-        width: row.width,
-        height: row.height,
-        loaded: loadedSet.current.has(item.key)
-      }))
-    }));
-  }, [items, resolvedColumns, cellWidth, cellHeight, loadedVersion]);
+  const hasLayout = cellWidth > 0 && cellHeight >= 0 && items.length > 0;
+  const totalRows = hasLayout ? Math.ceil(items.length / resolvedColumns) : 0;
   const rowStride = cellHeight + resolvedGap;
   let virtualWindow = null;
-  if (options.virtualize && virtualRange !== null && rows.length > 0) {
-    const totalRows = rows.length;
+  if (options.virtualize && virtualRange !== null && totalRows > 0 && rowStride > 0) {
     const overscan = options.overscan ?? cellHeight * 4;
     const visibleTop = virtualRange.top - overscan;
     const visibleBottom = virtualRange.bottom + overscan;
-    let firstIndex = Math.max(0, Math.floor(visibleTop / rowStride));
-    let lastIndex = Math.min(totalRows - 1, Math.ceil(visibleBottom / rowStride) - 1);
+    const maxRowIndex = totalRows - 1;
+    const firstIndex = Math.min(maxRowIndex, Math.max(0, Math.floor(visibleTop / rowStride)));
+    let lastIndex = Math.min(maxRowIndex, Math.max(0, Math.ceil(visibleBottom / rowStride) - 1));
     if (firstIndex > lastIndex) {
-      firstIndex = 0;
-      lastIndex = totalRows - 1;
+      lastIndex = firstIndex;
     }
     const topSpacerHeight = firstIndex * rowStride;
     const bottomSpacerHeight = (totalRows - 1 - lastIndex) * rowStride;
     virtualWindow = { firstIndex, lastIndex, topSpacerHeight, bottomSpacerHeight };
   }
+  const rows = useMemo(() => {
+    if (!hasLayout) return [];
+    if (!options.virtualize) {
+      const layoutRows = computeGridLayout(items, resolvedColumns, cellWidth, cellHeight);
+      return layoutRows.map((row, rowIndex) => {
+        const startIndex = rowIndex * resolvedColumns;
+        return {
+          rowIndex,
+          startIndex,
+          height: row.height,
+          items: row.items.map((item, colIndex) => ({
+            item,
+            itemIndex: startIndex + colIndex,
+            colIndex,
+            width: row.width,
+            height: row.height,
+            loaded: loadedSet.current.has(item.key)
+          }))
+        };
+      });
+    }
+    if (virtualWindow === null) return [];
+    const renderRows = [];
+    for (let rowIndex = virtualWindow.firstIndex; rowIndex <= virtualWindow.lastIndex; rowIndex++) {
+      const startIndex = rowIndex * resolvedColumns;
+      const endIndex = Math.min(startIndex + resolvedColumns, items.length);
+      const rowItems = items.slice(startIndex, endIndex);
+      renderRows.push({
+        rowIndex,
+        startIndex,
+        height: cellHeight,
+        items: rowItems.map((item, colIndex) => ({
+          item,
+          itemIndex: startIndex + colIndex,
+          colIndex,
+          width: cellWidth,
+          height: cellHeight,
+          loaded: loadedSet.current.has(item.key)
+        }))
+      });
+    }
+    return renderRows;
+  }, [cellHeight, cellWidth, hasLayout, items, options.virtualize, resolvedColumns, virtualWindow, loadedTick]);
   const isControlled = options.focusedIndex !== void 0;
   const padding = options.padding ?? 0;
   function scrollToRow(rowIndex) {
@@ -233,6 +264,7 @@ function useGridGallery(items, options, scrollContainerRef) {
   return {
     containerRef,
     rows,
+    totalRows,
     cellWidth,
     cellHeight,
     gap: resolvedGap,
@@ -249,14 +281,11 @@ function useGridGallery(items, options, scrollContainerRef) {
 // src/GridGallery.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 function GridGallery({ items, renderItem, scrollContainerRef, ...options }) {
-  const { containerRef, rows, cellHeight, gap, columns, onLoad, onError, virtualWindow, focusedIndex, handleItemFocus, handleItemKeyDown } = useGridGallery(
+  const { containerRef, rows, totalRows, cellHeight, gap, columns, onLoad, onError, virtualWindow, focusedIndex, handleItemFocus, handleItemKeyDown } = useGridGallery(
     items,
     options,
     scrollContainerRef
   );
-  const firstIndex = virtualWindow?.firstIndex ?? 0;
-  const lastIndex = virtualWindow?.lastIndex ?? rows.length - 1;
-  const visibleRows = virtualWindow ? rows.slice(firstIndex, lastIndex + 1) : rows;
   const padding = options.padding ?? 0;
   const navigable = options.navigable === true;
   return /* @__PURE__ */ jsxs(
@@ -264,18 +293,16 @@ function GridGallery({ items, renderItem, scrollContainerRef, ...options }) {
     {
       ref: containerRef,
       style: { display: "flex", flexDirection: "column", gap: `${gap}px`, padding: padding > 0 ? `${padding}px` : void 0 },
-      ...navigable ? { role: "grid", "aria-rowcount": rows.length, "aria-colcount": columns } : {},
+      ...navigable ? { role: "grid", "aria-rowcount": totalRows, "aria-colcount": columns } : {},
       children: [
         virtualWindow && virtualWindow.topSpacerHeight > 0 && /* @__PURE__ */ jsx("div", { style: { height: virtualWindow.topSpacerHeight, contain: "layout" } }),
-        visibleRows.map((row, i) => {
-          const rowIndex = firstIndex + i;
+        rows.map((row) => {
           return /* @__PURE__ */ jsx(
             "div",
             {
               style: { display: "grid", gridTemplateColumns: `repeat(${columns}, 1fr)`, gap: `${gap}px`, contain: "layout" },
-              ...navigable ? { role: "row", "aria-rowindex": rowIndex + 1 } : {},
-              children: row.items.map(({ item, loaded }, colIdx) => {
-                const itemIndex = rowIndex * columns + colIdx;
+              ...navigable ? { role: "row", "aria-rowindex": row.rowIndex + 1 } : {},
+              children: row.items.map(({ item, itemIndex, colIndex, loaded }) => {
                 const focused = navigable && focusedIndex === itemIndex;
                 return /* @__PURE__ */ jsx(
                   "div",
@@ -283,7 +310,7 @@ function GridGallery({ items, renderItem, scrollContainerRef, ...options }) {
                     style: { height: `${cellHeight}px` },
                     ...navigable ? {
                       role: "gridcell",
-                      "aria-colindex": colIdx + 1,
+                      "aria-colindex": colIndex + 1,
                       tabIndex: focused ? 0 : -1,
                       "data-grid-index": itemIndex,
                       onKeyDown: (e) => handleItemKeyDown(itemIndex, e),
@@ -302,7 +329,7 @@ function GridGallery({ items, renderItem, scrollContainerRef, ...options }) {
                 );
               })
             },
-            rowIndex
+            row.rowIndex
           );
         }),
         virtualWindow && virtualWindow.bottomSpacerHeight > 0 && /* @__PURE__ */ jsx("div", { style: { height: virtualWindow.bottomSpacerHeight, contain: "layout" } })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@slithy/react-grid-gallery",
-  "version": "0.1.2",
+  "version": "0.2.0",
   "description": "React grid gallery component.",
   "type": "module",
   "exports": {