@infinite-table/infinite-react 5.1.0-canary.0 → 5.1.0-canary.1

package/index.d.ts

@@ -266,6 +266,8 @@ declare class MatrixBrain extends Logger implements IBrain {
     private horizontalTotalSize;
     private horizontalRenderCount?;
     private verticalRenderCount?;
+    private horizontalExtendRangeBy;
+    private verticalExtendRangeBy;
     protected horizontalRenderRange: RenderRangeType;
     protected verticalRenderRange: RenderRangeType;
     protected extraSpanCells: [number, number][];
@@ -315,8 +317,9 @@ declare class MatrixBrain extends Logger implements IBrain {
      * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
      */
     extendRenderRange(options: {
-        left?: number | boolean;
-        right?: number | boolean;
+        start?: number | boolean;
+        end?: number | boolean;
+        direction: 'horizontal' | 'vertical';
     }): () => void;
     updateRenderCount(which?: WhichDirection): void;
     protected doUpdateRenderCount(which?: WhichDirection): void;
@@ -331,7 +334,7 @@ declare class MatrixBrain extends Logger implements IBrain {
     protected notifyVerticalRenderRangeChange: () => void;
     protected notifyHorizontalRenderRangeChange: () => void;
     private notifyScrollChange;
-    private computeDirectionalRenderCount;
+    protected computeDirectionalRenderCount(direction: 'horizontal' | 'vertical', itemSize: number | ItemSizeFunction, count: number, theRenderSize: Size): number;
     getFixedSize(direction: 'horizontal' | 'vertical'): number;
     getFixedStartSize(direction: 'horizontal' | 'vertical'): number;
     getFixedEndSize(direction: 'horizontal' | 'vertical'): number;
@@ -378,7 +381,7 @@ declare class MatrixBrain extends Logger implements IBrain {
     setRenderCount: ({ horizontal, vertical, }: {
         horizontal: number | undefined;
         vertical: number | undefined;
-    }, force?: boolean | undefined) => void;
+    }) => void;
     private notifyRenderCountChange;
     updateFixedCells: (config: {
         fixedColsStart?: number;

package/index.dev.js

@@ -1557,6 +1557,14 @@ var MatrixBrain = class extends Logger {
     this.horizontalTotalSize = 0;
     this.horizontalRenderCount = void 0;
     this.verticalRenderCount = void 0;
+    this.horizontalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
+    this.verticalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
     this.horizontalRenderRange = {
       startIndex: 0,
       endIndex: 0
@@ -1696,34 +1704,6 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
-      let renderCount = 0;
-      let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
-      size -= this.getFixedSize(direction);
-      if (size <= 0) {
-        return 0;
-      }
-      if (typeof itemSize === "function") {
-        const sizes = [];
-        for (let i = 0; i < count; i++) {
-          sizes.push(this.getItemSize(i, direction));
-        }
-        sizes.sort(SORT_ASC);
-        let sum2 = 0;
-        for (let i = 0; i < count; i++) {
-          sum2 += sizes[i];
-          renderCount++;
-          if (sum2 > size) {
-            break;
-          }
-        }
-        renderCount += 1;
-      } else {
-        renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
-      }
-      renderCount = Math.min(count, renderCount);
-      return renderCount;
-    };
     this.isColFixedEnd = (colIndex) => {
       if (!this.fixedColsEnd) {
         return false;
@@ -1894,7 +1874,7 @@ var MatrixBrain = class extends Logger {
     this.setRenderCount = ({
       horizontal,
       vertical
-    }, force) => {
+    }) => {
       if (horizontal === void 0) {
         horizontal = this.horizontalRenderCount;
       }
@@ -1903,14 +1883,14 @@ var MatrixBrain = class extends Logger {
       }
       const horizontalSame = horizontal === this.horizontalRenderCount;
       const verticalSame = vertical === this.verticalRenderCount;
-      if (horizontalSame && verticalSame && !force) {
+      if (horizontalSame && verticalSame) {
         return;
       }
       this.horizontalRenderCount = horizontal;
       this.verticalRenderCount = vertical;
       this.updateRenderRange({
-        horizontal: force ? true : !horizontalSame,
-        vertical: force ? true : !verticalSame
+        horizontal: !horizontalSame,
+        vertical: !verticalSame
       });
       this.notifyRenderCountChange();
     };
@@ -1990,7 +1970,7 @@ var MatrixBrain = class extends Logger {
       };
     };
     this.computeDirectionalRenderRange = (direction) => {
-      const renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
+      let renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
       const count = direction === "horizontal" ? this.cols : this.rows;
       if (!renderCount) {
         return {
@@ -2001,7 +1981,15 @@ var MatrixBrain = class extends Logger {
       const fixedStartIndex = (direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart) || 0;
       let scrollPositionForDirection = direction === "horizontal" ? this.scrollPosition.scrollLeft : this.scrollPosition.scrollTop;
       scrollPositionForDirection += this.getFixedStartSize(direction);
+      const extendBy = direction === "horizontal" ? this.horizontalExtendRangeBy : this.verticalExtendRangeBy;
       let startIndex = this.getItemAt(scrollPositionForDirection, direction);
+      if (extendBy.start) {
+        startIndex = Math.max(0, startIndex - extendBy.start);
+        renderCount += extendBy.start;
+      }
+      if (extendBy.end) {
+        renderCount += extendBy.end;
+      }
       let endIndex = startIndex + renderCount;
       const theEnd = Math.max(
         fixedStartIndex,
@@ -2045,7 +2033,6 @@ var MatrixBrain = class extends Logger {
         return searchResult;
       }
       return ~searchResult - 1;
-      return 0;
     };
     this.computeCacheFor = (itemIndex, direction) => {
       const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
@@ -2488,31 +2475,30 @@ var MatrixBrain = class extends Logger {
    * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
    */
   extendRenderRange(options) {
-    const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
-    const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
-    const currentRenderCount = this.horizontalRenderCount;
+    const { direction } = options;
+    const horizontal = direction === "horizontal";
+    const extendValueWhenTrue = horizontal ? this.horizontalRenderCount || this.getInitialCols() : this.verticalRenderCount || this.getInitialRows();
+    const startAmount = typeof options.start === "number" ? options.start : options.start === true ? extendValueWhenTrue : 0;
+    const endAmount = typeof options.end === "number" ? options.end : options.end === true ? extendValueWhenTrue : 0;
+    if (horizontal) {
+      this.horizontalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    } else {
+      this.verticalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    }
+    this.updateRenderRange({ horizontal, vertical: !horizontal });
     const restore = () => {
-      this.setRenderCount(
-        {
-          horizontal: currentRenderCount,
-          vertical: void 0
-        },
-        true
-      );
+      this.extendRenderRange({
+        start: 0,
+        end: 0,
+        direction
+      });
     };
-    const { start, end } = this.getRenderRange();
-    const [startRow, startCol] = start;
-    const [endRow, endCol] = end;
-    this.setRenderRange({
-      horizontal: {
-        startIndex: Math.max(0, startCol - leftAmount),
-        endIndex: Math.min(this.cols, endCol + rightAmount)
-      },
-      vertical: {
-        startIndex: startRow,
-        endIndex: endRow
-      }
-    });
     return restore;
   }
   updateRenderCount(which = ALL_DIRECTIONS) {
@@ -2584,6 +2570,34 @@ var MatrixBrain = class extends Logger {
       fns[i](scrollPosition);
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    let renderCount = 0;
+    let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
+    size -= this.getFixedSize(direction);
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "function") {
+      const sizes = [];
+      for (let i = 0; i < count; i++) {
+        sizes.push(this.getItemSize(i, direction));
+      }
+      sizes.sort(SORT_ASC);
+      let sum2 = 0;
+      for (let i = 0; i < count; i++) {
+        sum2 += sizes[i];
+        renderCount++;
+        if (sum2 > size) {
+          break;
+        }
+      }
+      renderCount += 1;
+    } else {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+    }
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getFixedSize(direction) {
     return direction === "horizontal" ? this.getFixedStartColsWidth() + this.getFixedEndColsWidth() : this.getFixedStartRowsHeight() + this.getFixedEndRowsHeight();
   }
@@ -2698,6 +2712,8 @@ var MatrixBrain = class extends Logger {
     this.rowspanParent.clear();
     this.colspanParent.clear();
     this.alwaysRenderedColumns.clear();
+    this.horizontalExtendRangeBy = { start: 0, end: 0 };
+    this.verticalExtendRangeBy = { start: 0, end: 0 };
     this.destroyed = true;
     this.onDestroyFns = [];
     this.onScrollFns = [];
@@ -7837,12 +7853,14 @@ var useColumnPointerEvents = ({
           if (brain2.isHorizontalLayoutBrain) {
             const extendBy = true;
             const restoreBodyRange = brain2.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             const restoreHeaderRange = headerBrain.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             restoreRenderRange = () => {
               restoreBodyRange();
@@ -9596,12 +9614,14 @@ function ResizeHandleFn(props) {
     const target = e.target;
     if (brain.isHorizontalLayoutBrain) {
       const restoreBodyRange = brain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       const restoreHeaderRange = headerBrain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       restoreRenderRange = () => {
         restoreBodyRange();
@@ -18266,6 +18286,46 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
       });
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    if (direction === "vertical") {
+      return super.computeDirectionalRenderCount(
+        direction,
+        itemSize,
+        count,
+        theRenderSize
+      );
+    }
+    let renderCount = 0;
+    let size = theRenderSize.width;
+    size -= this.getFixedSize("horizontal");
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "number") {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+      renderCount = Math.min(count, renderCount);
+      return renderCount;
+    }
+    const pagesInView = Math.floor(size / this.pageWidth);
+    renderCount += pagesInView * this.initialCols;
+    const remainingSize = size - pagesInView * this.pageWidth;
+    const sizes = [];
+    for (let i = 0; i < this.initialCols; i++) {
+      sizes.push(this.getItemSize(i, direction));
+    }
+    sizes.sort(SORT_ASC);
+    let sum2 = 0;
+    for (let i = 0; i < this.initialCols; i++) {
+      sum2 += sizes[i];
+      renderCount++;
+      if (sum2 > remainingSize) {
+        break;
+      }
+    }
+    renderCount += 1;
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getRowIndexInPage(rowIndex) {
     return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
   }
@@ -19992,7 +20052,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.1.0-canary.0"
+      version: "5.1.0-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.dev.mjs

@@ -1506,6 +1506,14 @@ var MatrixBrain = class extends Logger {
     this.horizontalTotalSize = 0;
     this.horizontalRenderCount = void 0;
     this.verticalRenderCount = void 0;
+    this.horizontalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
+    this.verticalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
     this.horizontalRenderRange = {
       startIndex: 0,
       endIndex: 0
@@ -1645,34 +1653,6 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
-      let renderCount = 0;
-      let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
-      size -= this.getFixedSize(direction);
-      if (size <= 0) {
-        return 0;
-      }
-      if (typeof itemSize === "function") {
-        const sizes = [];
-        for (let i = 0; i < count; i++) {
-          sizes.push(this.getItemSize(i, direction));
-        }
-        sizes.sort(SORT_ASC);
-        let sum2 = 0;
-        for (let i = 0; i < count; i++) {
-          sum2 += sizes[i];
-          renderCount++;
-          if (sum2 > size) {
-            break;
-          }
-        }
-        renderCount += 1;
-      } else {
-        renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
-      }
-      renderCount = Math.min(count, renderCount);
-      return renderCount;
-    };
     this.isColFixedEnd = (colIndex) => {
       if (!this.fixedColsEnd) {
         return false;
@@ -1843,7 +1823,7 @@ var MatrixBrain = class extends Logger {
     this.setRenderCount = ({
       horizontal,
       vertical
-    }, force) => {
+    }) => {
       if (horizontal === void 0) {
         horizontal = this.horizontalRenderCount;
       }
@@ -1852,14 +1832,14 @@ var MatrixBrain = class extends Logger {
       }
       const horizontalSame = horizontal === this.horizontalRenderCount;
       const verticalSame = vertical === this.verticalRenderCount;
-      if (horizontalSame && verticalSame && !force) {
+      if (horizontalSame && verticalSame) {
         return;
       }
       this.horizontalRenderCount = horizontal;
       this.verticalRenderCount = vertical;
       this.updateRenderRange({
-        horizontal: force ? true : !horizontalSame,
-        vertical: force ? true : !verticalSame
+        horizontal: !horizontalSame,
+        vertical: !verticalSame
       });
       this.notifyRenderCountChange();
     };
@@ -1939,7 +1919,7 @@ var MatrixBrain = class extends Logger {
       };
     };
     this.computeDirectionalRenderRange = (direction) => {
-      const renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
+      let renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
       const count = direction === "horizontal" ? this.cols : this.rows;
       if (!renderCount) {
         return {
@@ -1950,7 +1930,15 @@ var MatrixBrain = class extends Logger {
       const fixedStartIndex = (direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart) || 0;
       let scrollPositionForDirection = direction === "horizontal" ? this.scrollPosition.scrollLeft : this.scrollPosition.scrollTop;
       scrollPositionForDirection += this.getFixedStartSize(direction);
+      const extendBy = direction === "horizontal" ? this.horizontalExtendRangeBy : this.verticalExtendRangeBy;
       let startIndex = this.getItemAt(scrollPositionForDirection, direction);
+      if (extendBy.start) {
+        startIndex = Math.max(0, startIndex - extendBy.start);
+        renderCount += extendBy.start;
+      }
+      if (extendBy.end) {
+        renderCount += extendBy.end;
+      }
       let endIndex = startIndex + renderCount;
       const theEnd = Math.max(
         fixedStartIndex,
@@ -1994,7 +1982,6 @@ var MatrixBrain = class extends Logger {
         return searchResult;
       }
       return ~searchResult - 1;
-      return 0;
     };
     this.computeCacheFor = (itemIndex, direction) => {
       const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
@@ -2437,31 +2424,30 @@ var MatrixBrain = class extends Logger {
    * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
    */
   extendRenderRange(options) {
-    const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
-    const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
-    const currentRenderCount = this.horizontalRenderCount;
+    const { direction } = options;
+    const horizontal = direction === "horizontal";
+    const extendValueWhenTrue = horizontal ? this.horizontalRenderCount || this.getInitialCols() : this.verticalRenderCount || this.getInitialRows();
+    const startAmount = typeof options.start === "number" ? options.start : options.start === true ? extendValueWhenTrue : 0;
+    const endAmount = typeof options.end === "number" ? options.end : options.end === true ? extendValueWhenTrue : 0;
+    if (horizontal) {
+      this.horizontalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    } else {
+      this.verticalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    }
+    this.updateRenderRange({ horizontal, vertical: !horizontal });
     const restore = () => {
-      this.setRenderCount(
-        {
-          horizontal: currentRenderCount,
-          vertical: void 0
-        },
-        true
-      );
+      this.extendRenderRange({
+        start: 0,
+        end: 0,
+        direction
+      });
     };
-    const { start, end } = this.getRenderRange();
-    const [startRow, startCol] = start;
-    const [endRow, endCol] = end;
-    this.setRenderRange({
-      horizontal: {
-        startIndex: Math.max(0, startCol - leftAmount),
-        endIndex: Math.min(this.cols, endCol + rightAmount)
-      },
-      vertical: {
-        startIndex: startRow,
-        endIndex: endRow
-      }
-    });
     return restore;
   }
   updateRenderCount(which = ALL_DIRECTIONS) {
@@ -2533,6 +2519,34 @@ var MatrixBrain = class extends Logger {
       fns[i](scrollPosition);
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    let renderCount = 0;
+    let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
+    size -= this.getFixedSize(direction);
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "function") {
+      const sizes = [];
+      for (let i = 0; i < count; i++) {
+        sizes.push(this.getItemSize(i, direction));
+      }
+      sizes.sort(SORT_ASC);
+      let sum2 = 0;
+      for (let i = 0; i < count; i++) {
+        sum2 += sizes[i];
+        renderCount++;
+        if (sum2 > size) {
+          break;
+        }
+      }
+      renderCount += 1;
+    } else {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+    }
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getFixedSize(direction) {
     return direction === "horizontal" ? this.getFixedStartColsWidth() + this.getFixedEndColsWidth() : this.getFixedStartRowsHeight() + this.getFixedEndRowsHeight();
   }
@@ -2647,6 +2661,8 @@ var MatrixBrain = class extends Logger {
     this.rowspanParent.clear();
     this.colspanParent.clear();
     this.alwaysRenderedColumns.clear();
+    this.horizontalExtendRangeBy = { start: 0, end: 0 };
+    this.verticalExtendRangeBy = { start: 0, end: 0 };
     this.destroyed = true;
     this.onDestroyFns = [];
     this.onScrollFns = [];
@@ -7794,12 +7810,14 @@ var useColumnPointerEvents = ({
           if (brain2.isHorizontalLayoutBrain) {
             const extendBy = true;
             const restoreBodyRange = brain2.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             const restoreHeaderRange = headerBrain.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             restoreRenderRange = () => {
               restoreBodyRange();
@@ -9553,12 +9571,14 @@ function ResizeHandleFn(props) {
     const target = e.target;
     if (brain.isHorizontalLayoutBrain) {
       const restoreBodyRange = brain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       const restoreHeaderRange = headerBrain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       restoreRenderRange = () => {
         restoreBodyRange();
@@ -18232,6 +18252,46 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
       });
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    if (direction === "vertical") {
+      return super.computeDirectionalRenderCount(
+        direction,
+        itemSize,
+        count,
+        theRenderSize
+      );
+    }
+    let renderCount = 0;
+    let size = theRenderSize.width;
+    size -= this.getFixedSize("horizontal");
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "number") {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+      renderCount = Math.min(count, renderCount);
+      return renderCount;
+    }
+    const pagesInView = Math.floor(size / this.pageWidth);
+    renderCount += pagesInView * this.initialCols;
+    const remainingSize = size - pagesInView * this.pageWidth;
+    const sizes = [];
+    for (let i = 0; i < this.initialCols; i++) {
+      sizes.push(this.getItemSize(i, direction));
+    }
+    sizes.sort(SORT_ASC);
+    let sum2 = 0;
+    for (let i = 0; i < this.initialCols; i++) {
+      sum2 += sizes[i];
+      renderCount++;
+      if (sum2 > remainingSize) {
+        break;
+      }
+    }
+    renderCount += 1;
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getRowIndexInPage(rowIndex) {
     return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
   }
@@ -19958,7 +20018,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.1.0-canary.0"
+      version: "5.1.0-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.js

@@ -1557,6 +1557,14 @@ var MatrixBrain = class extends Logger {
     this.horizontalTotalSize = 0;
     this.horizontalRenderCount = void 0;
     this.verticalRenderCount = void 0;
+    this.horizontalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
+    this.verticalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
     this.horizontalRenderRange = {
       startIndex: 0,
       endIndex: 0
@@ -1696,34 +1704,6 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
-      let renderCount = 0;
-      let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
-      size -= this.getFixedSize(direction);
-      if (size <= 0) {
-        return 0;
-      }
-      if (typeof itemSize === "function") {
-        const sizes = [];
-        for (let i = 0; i < count; i++) {
-          sizes.push(this.getItemSize(i, direction));
-        }
-        sizes.sort(SORT_ASC);
-        let sum2 = 0;
-        for (let i = 0; i < count; i++) {
-          sum2 += sizes[i];
-          renderCount++;
-          if (sum2 > size) {
-            break;
-          }
-        }
-        renderCount += 1;
-      } else {
-        renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
-      }
-      renderCount = Math.min(count, renderCount);
-      return renderCount;
-    };
     this.isColFixedEnd = (colIndex) => {
       if (!this.fixedColsEnd) {
         return false;
@@ -1894,7 +1874,7 @@ var MatrixBrain = class extends Logger {
     this.setRenderCount = ({
       horizontal,
       vertical
-    }, force) => {
+    }) => {
       if (horizontal === void 0) {
         horizontal = this.horizontalRenderCount;
       }
@@ -1903,14 +1883,14 @@ var MatrixBrain = class extends Logger {
       }
       const horizontalSame = horizontal === this.horizontalRenderCount;
       const verticalSame = vertical === this.verticalRenderCount;
-      if (horizontalSame && verticalSame && !force) {
+      if (horizontalSame && verticalSame) {
         return;
       }
       this.horizontalRenderCount = horizontal;
       this.verticalRenderCount = vertical;
       this.updateRenderRange({
-        horizontal: force ? true : !horizontalSame,
-        vertical: force ? true : !verticalSame
+        horizontal: !horizontalSame,
+        vertical: !verticalSame
       });
       this.notifyRenderCountChange();
     };
@@ -1990,7 +1970,7 @@ var MatrixBrain = class extends Logger {
       };
     };
     this.computeDirectionalRenderRange = (direction) => {
-      const renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
+      let renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
       const count = direction === "horizontal" ? this.cols : this.rows;
       if (!renderCount) {
         return {
@@ -2001,7 +1981,15 @@ var MatrixBrain = class extends Logger {
       const fixedStartIndex = (direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart) || 0;
       let scrollPositionForDirection = direction === "horizontal" ? this.scrollPosition.scrollLeft : this.scrollPosition.scrollTop;
       scrollPositionForDirection += this.getFixedStartSize(direction);
+      const extendBy = direction === "horizontal" ? this.horizontalExtendRangeBy : this.verticalExtendRangeBy;
       let startIndex = this.getItemAt(scrollPositionForDirection, direction);
+      if (extendBy.start) {
+        startIndex = Math.max(0, startIndex - extendBy.start);
+        renderCount += extendBy.start;
+      }
+      if (extendBy.end) {
+        renderCount += extendBy.end;
+      }
       let endIndex = startIndex + renderCount;
       const theEnd = Math.max(
         fixedStartIndex,
@@ -2045,7 +2033,6 @@ var MatrixBrain = class extends Logger {
         return searchResult;
       }
       return ~searchResult - 1;
-      return 0;
     };
     this.computeCacheFor = (itemIndex, direction) => {
       const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
@@ -2488,31 +2475,30 @@ var MatrixBrain = class extends Logger {
    * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
    */
   extendRenderRange(options) {
-    const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
-    const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
-    const currentRenderCount = this.horizontalRenderCount;
+    const { direction } = options;
+    const horizontal = direction === "horizontal";
+    const extendValueWhenTrue = horizontal ? this.horizontalRenderCount || this.getInitialCols() : this.verticalRenderCount || this.getInitialRows();
+    const startAmount = typeof options.start === "number" ? options.start : options.start === true ? extendValueWhenTrue : 0;
+    const endAmount = typeof options.end === "number" ? options.end : options.end === true ? extendValueWhenTrue : 0;
+    if (horizontal) {
+      this.horizontalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    } else {
+      this.verticalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    }
+    this.updateRenderRange({ horizontal, vertical: !horizontal });
     const restore = () => {
-      this.setRenderCount(
-        {
-          horizontal: currentRenderCount,
-          vertical: void 0
-        },
-        true
-      );
+      this.extendRenderRange({
+        start: 0,
+        end: 0,
+        direction
+      });
     };
-    const { start, end } = this.getRenderRange();
-    const [startRow, startCol] = start;
-    const [endRow, endCol] = end;
-    this.setRenderRange({
-      horizontal: {
-        startIndex: Math.max(0, startCol - leftAmount),
-        endIndex: Math.min(this.cols, endCol + rightAmount)
-      },
-      vertical: {
-        startIndex: startRow,
-        endIndex: endRow
-      }
-    });
     return restore;
   }
   updateRenderCount(which = ALL_DIRECTIONS) {
@@ -2584,6 +2570,34 @@ var MatrixBrain = class extends Logger {
       fns[i](scrollPosition);
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    let renderCount = 0;
+    let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
+    size -= this.getFixedSize(direction);
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "function") {
+      const sizes = [];
+      for (let i = 0; i < count; i++) {
+        sizes.push(this.getItemSize(i, direction));
+      }
+      sizes.sort(SORT_ASC);
+      let sum2 = 0;
+      for (let i = 0; i < count; i++) {
+        sum2 += sizes[i];
+        renderCount++;
+        if (sum2 > size) {
+          break;
+        }
+      }
+      renderCount += 1;
+    } else {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+    }
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getFixedSize(direction) {
     return direction === "horizontal" ? this.getFixedStartColsWidth() + this.getFixedEndColsWidth() : this.getFixedStartRowsHeight() + this.getFixedEndRowsHeight();
   }
@@ -2698,6 +2712,8 @@ var MatrixBrain = class extends Logger {
     this.rowspanParent.clear();
     this.colspanParent.clear();
     this.alwaysRenderedColumns.clear();
+    this.horizontalExtendRangeBy = { start: 0, end: 0 };
+    this.verticalExtendRangeBy = { start: 0, end: 0 };
     this.destroyed = true;
     this.onDestroyFns = [];
     this.onScrollFns = [];
@@ -7837,12 +7853,14 @@ var useColumnPointerEvents = ({
           if (brain2.isHorizontalLayoutBrain) {
             const extendBy = true;
             const restoreBodyRange = brain2.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             const restoreHeaderRange = headerBrain.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             restoreRenderRange = () => {
               restoreBodyRange();
@@ -9596,12 +9614,14 @@ function ResizeHandleFn(props) {
     const target = e.target;
     if (brain.isHorizontalLayoutBrain) {
       const restoreBodyRange = brain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       const restoreHeaderRange = headerBrain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       restoreRenderRange = () => {
         restoreBodyRange();
@@ -18266,6 +18286,46 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
       });
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    if (direction === "vertical") {
+      return super.computeDirectionalRenderCount(
+        direction,
+        itemSize,
+        count,
+        theRenderSize
+      );
+    }
+    let renderCount = 0;
+    let size = theRenderSize.width;
+    size -= this.getFixedSize("horizontal");
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "number") {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+      renderCount = Math.min(count, renderCount);
+      return renderCount;
+    }
+    const pagesInView = Math.floor(size / this.pageWidth);
+    renderCount += pagesInView * this.initialCols;
+    const remainingSize = size - pagesInView * this.pageWidth;
+    const sizes = [];
+    for (let i = 0; i < this.initialCols; i++) {
+      sizes.push(this.getItemSize(i, direction));
+    }
+    sizes.sort(SORT_ASC);
+    let sum2 = 0;
+    for (let i = 0; i < this.initialCols; i++) {
+      sum2 += sizes[i];
+      renderCount++;
+      if (sum2 > remainingSize) {
+        break;
+      }
+    }
+    renderCount += 1;
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getRowIndexInPage(rowIndex) {
     return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
   }
@@ -19992,7 +20052,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.1.0-canary.0"
+      version: "5.1.0-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.mjs

@@ -1506,6 +1506,14 @@ var MatrixBrain = class extends Logger {
     this.horizontalTotalSize = 0;
     this.horizontalRenderCount = void 0;
     this.verticalRenderCount = void 0;
+    this.horizontalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
+    this.verticalExtendRangeBy = {
+      start: 0,
+      end: 0
+    };
     this.horizontalRenderRange = {
       startIndex: 0,
       endIndex: 0
@@ -1645,34 +1653,6 @@ var MatrixBrain = class extends Logger {
         });
       });
     };
-    this.computeDirectionalRenderCount = (direction, itemSize, count, theRenderSize) => {
-      let renderCount = 0;
-      let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
-      size -= this.getFixedSize(direction);
-      if (size <= 0) {
-        return 0;
-      }
-      if (typeof itemSize === "function") {
-        const sizes = [];
-        for (let i = 0; i < count; i++) {
-          sizes.push(this.getItemSize(i, direction));
-        }
-        sizes.sort(SORT_ASC);
-        let sum2 = 0;
-        for (let i = 0; i < count; i++) {
-          sum2 += sizes[i];
-          renderCount++;
-          if (sum2 > size) {
-            break;
-          }
-        }
-        renderCount += 1;
-      } else {
-        renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
-      }
-      renderCount = Math.min(count, renderCount);
-      return renderCount;
-    };
     this.isColFixedEnd = (colIndex) => {
       if (!this.fixedColsEnd) {
         return false;
@@ -1843,7 +1823,7 @@ var MatrixBrain = class extends Logger {
     this.setRenderCount = ({
       horizontal,
       vertical
-    }, force) => {
+    }) => {
       if (horizontal === void 0) {
         horizontal = this.horizontalRenderCount;
       }
@@ -1852,14 +1832,14 @@ var MatrixBrain = class extends Logger {
       }
       const horizontalSame = horizontal === this.horizontalRenderCount;
       const verticalSame = vertical === this.verticalRenderCount;
-      if (horizontalSame && verticalSame && !force) {
+      if (horizontalSame && verticalSame) {
         return;
       }
       this.horizontalRenderCount = horizontal;
       this.verticalRenderCount = vertical;
       this.updateRenderRange({
-        horizontal: force ? true : !horizontalSame,
-        vertical: force ? true : !verticalSame
+        horizontal: !horizontalSame,
+        vertical: !verticalSame
       });
       this.notifyRenderCountChange();
     };
@@ -1939,7 +1919,7 @@ var MatrixBrain = class extends Logger {
       };
     };
     this.computeDirectionalRenderRange = (direction) => {
-      const renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
+      let renderCount = direction === "horizontal" ? this.horizontalRenderCount : this.verticalRenderCount;
       const count = direction === "horizontal" ? this.cols : this.rows;
       if (!renderCount) {
         return {
@@ -1950,7 +1930,15 @@ var MatrixBrain = class extends Logger {
       const fixedStartIndex = (direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart) || 0;
       let scrollPositionForDirection = direction === "horizontal" ? this.scrollPosition.scrollLeft : this.scrollPosition.scrollTop;
       scrollPositionForDirection += this.getFixedStartSize(direction);
+      const extendBy = direction === "horizontal" ? this.horizontalExtendRangeBy : this.verticalExtendRangeBy;
       let startIndex = this.getItemAt(scrollPositionForDirection, direction);
+      if (extendBy.start) {
+        startIndex = Math.max(0, startIndex - extendBy.start);
+        renderCount += extendBy.start;
+      }
+      if (extendBy.end) {
+        renderCount += extendBy.end;
+      }
       let endIndex = startIndex + renderCount;
       const theEnd = Math.max(
         fixedStartIndex,
@@ -1994,7 +1982,6 @@ var MatrixBrain = class extends Logger {
         return searchResult;
       }
       return ~searchResult - 1;
-      return 0;
     };
     this.computeCacheFor = (itemIndex, direction) => {
       const itemSizeValueOrFn = direction === "horizontal" ? this.colWidth : this.rowHeight;
@@ -2437,31 +2424,30 @@ var MatrixBrain = class extends Logger {
    * @param options.right - if true, extends the right side with the amount of current visible columns, otherwise with the specified number
    */
   extendRenderRange(options) {
-    const leftAmount = typeof options.left === "number" ? options.left : options.left === true ? this.getInitialCols() : 0;
-    const rightAmount = typeof options.right === "number" ? options.right : options.right === true ? this.getInitialCols() : 0;
-    const currentRenderCount = this.horizontalRenderCount;
+    const { direction } = options;
+    const horizontal = direction === "horizontal";
+    const extendValueWhenTrue = horizontal ? this.horizontalRenderCount || this.getInitialCols() : this.verticalRenderCount || this.getInitialRows();
+    const startAmount = typeof options.start === "number" ? options.start : options.start === true ? extendValueWhenTrue : 0;
+    const endAmount = typeof options.end === "number" ? options.end : options.end === true ? extendValueWhenTrue : 0;
+    if (horizontal) {
+      this.horizontalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    } else {
+      this.verticalExtendRangeBy = {
+        start: startAmount,
+        end: endAmount
+      };
+    }
+    this.updateRenderRange({ horizontal, vertical: !horizontal });
     const restore = () => {
-      this.setRenderCount(
-        {
-          horizontal: currentRenderCount,
-          vertical: void 0
-        },
-        true
-      );
+      this.extendRenderRange({
+        start: 0,
+        end: 0,
+        direction
+      });
     };
-    const { start, end } = this.getRenderRange();
-    const [startRow, startCol] = start;
-    const [endRow, endCol] = end;
-    this.setRenderRange({
-      horizontal: {
-        startIndex: Math.max(0, startCol - leftAmount),
-        endIndex: Math.min(this.cols, endCol + rightAmount)
-      },
-      vertical: {
-        startIndex: startRow,
-        endIndex: endRow
-      }
-    });
     return restore;
   }
   updateRenderCount(which = ALL_DIRECTIONS) {
@@ -2533,6 +2519,34 @@ var MatrixBrain = class extends Logger {
       fns[i](scrollPosition);
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    let renderCount = 0;
+    let size = direction === "horizontal" ? theRenderSize.width : theRenderSize.height;
+    size -= this.getFixedSize(direction);
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "function") {
+      const sizes = [];
+      for (let i = 0; i < count; i++) {
+        sizes.push(this.getItemSize(i, direction));
+      }
+      sizes.sort(SORT_ASC);
+      let sum2 = 0;
+      for (let i = 0; i < count; i++) {
+        sum2 += sizes[i];
+        renderCount++;
+        if (sum2 > size) {
+          break;
+        }
+      }
+      renderCount += 1;
+    } else {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+    }
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getFixedSize(direction) {
     return direction === "horizontal" ? this.getFixedStartColsWidth() + this.getFixedEndColsWidth() : this.getFixedStartRowsHeight() + this.getFixedEndRowsHeight();
   }
@@ -2647,6 +2661,8 @@ var MatrixBrain = class extends Logger {
     this.rowspanParent.clear();
     this.colspanParent.clear();
     this.alwaysRenderedColumns.clear();
+    this.horizontalExtendRangeBy = { start: 0, end: 0 };
+    this.verticalExtendRangeBy = { start: 0, end: 0 };
     this.destroyed = true;
     this.onDestroyFns = [];
     this.onScrollFns = [];
@@ -7794,12 +7810,14 @@ var useColumnPointerEvents = ({
           if (brain2.isHorizontalLayoutBrain) {
             const extendBy = true;
             const restoreBodyRange = brain2.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             const restoreHeaderRange = headerBrain.extendRenderRange({
-              left: extendBy,
-              right: extendBy
+              start: extendBy,
+              end: extendBy,
+              direction: "horizontal"
             });
             restoreRenderRange = () => {
               restoreBodyRange();
@@ -9553,12 +9571,14 @@ function ResizeHandleFn(props) {
     const target = e.target;
     if (brain.isHorizontalLayoutBrain) {
       const restoreBodyRange = brain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       const restoreHeaderRange = headerBrain.extendRenderRange({
-        left: true,
-        right: true
+        start: true,
+        end: true,
+        direction: "horizontal"
       });
       restoreRenderRange = () => {
         restoreBodyRange();
@@ -18232,6 +18252,46 @@ var HorizontalLayoutMatrixBrain = class extends MatrixBrain {
       });
     }
   }
+  computeDirectionalRenderCount(direction, itemSize, count, theRenderSize) {
+    if (direction === "vertical") {
+      return super.computeDirectionalRenderCount(
+        direction,
+        itemSize,
+        count,
+        theRenderSize
+      );
+    }
+    let renderCount = 0;
+    let size = theRenderSize.width;
+    size -= this.getFixedSize("horizontal");
+    if (size <= 0) {
+      return 0;
+    }
+    if (typeof itemSize === "number") {
+      renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
+      renderCount = Math.min(count, renderCount);
+      return renderCount;
+    }
+    const pagesInView = Math.floor(size / this.pageWidth);
+    renderCount += pagesInView * this.initialCols;
+    const remainingSize = size - pagesInView * this.pageWidth;
+    const sizes = [];
+    for (let i = 0; i < this.initialCols; i++) {
+      sizes.push(this.getItemSize(i, direction));
+    }
+    sizes.sort(SORT_ASC);
+    let sum2 = 0;
+    for (let i = 0; i < this.initialCols; i++) {
+      sum2 += sizes[i];
+      renderCount++;
+      if (sum2 > remainingSize) {
+        break;
+      }
+    }
+    renderCount += 1;
+    renderCount = Math.min(count, renderCount);
+    return renderCount;
+  }
   getRowIndexInPage(rowIndex) {
     return this.rowsPerPage ? rowIndex % this.rowsPerPage : rowIndex;
   }
@@ -19958,7 +20018,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "5.1.0-canary.0"
+      version: "5.1.0-canary.1"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/package.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/infinite-table/infinite-react/issues"
   },
-  "version": "5.1.0-canary.0",
+  "version": "5.1.0-canary.1",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",
@@ -34,5 +34,5 @@
   },
   "license": "Commercial & Open Source",
   "//": "will be updated at build time",
-  "publishedAt": 1728076700767
+  "publishedAt": 1728143085224
 }