@infinite-table/infinite-react 6.0.15 → 6.0.17

package/index.d.ts

@@ -1628,6 +1628,12 @@ declare type TableRenderDetailRowFnParam = {
 };
 declare type TableRenderCellFn = (param: TableRenderCellFnParam) => Renderable;
 declare type TableRenderDetailRowFn = (param: TableRenderDetailRowFnParam) => Renderable;
+declare type RenderRangeOptions = {
+    force?: boolean;
+    renderCell: TableRenderCellFn;
+    renderDetailRow?: TableRenderDetailRowFn;
+    onRender: (items: Renderable[]) => void;
+};
 declare type HorizontalLayoutColVisibilityOptions = {
     horizontalLayoutPageIndex?: number;
 };
@@ -1702,12 +1708,7 @@ declare class ReactHeadlessTableRenderer extends Logger {
         rendered: boolean;
         mapped: boolean;
     };
-    renderRange(range: TableRenderRange, { renderCell, renderDetailRow, force, onRender, }: {
-        force?: boolean;
-        renderCell: TableRenderCellFn;
-        renderDetailRow?: TableRenderDetailRowFn;
-        onRender: (items: Renderable[]) => void;
-    }): Renderable[];
+    renderRange(range: TableRenderRange, { renderCell, renderDetailRow, force, onRender }: RenderRangeOptions): Renderable[];
     private renderElement;
     private renderDetailElement;
     getFixedRanges: (currentRenderRange: TableRenderRange) => TableRenderRange[];

package/index.dev.js

@@ -2690,15 +2690,22 @@ var MatrixBrain = class extends Logger {
     if (size <= 0) {
       return 0;
     }
+    const fixedStart = direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart;
+    const fixedEnd = direction === "horizontal" ? this.fixedColsEnd : this.fixedRowsEnd;
     if (typeof itemSize === "function") {
       const sizes = [];
-      for (let i = 0; i < count; i++) {
+      let start = 0;
+      let end = count;
+      start += fixedStart;
+      end -= fixedEnd;
+      for (let i = start; i < end; i++) {
         sizes.push(this.getItemSize(i, direction));
       }
       renderCount = getGreatestCountVisibleInSize(size, sizes);
     } else {
       renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
     }
+    renderCount += fixedStart + fixedEnd;
     renderCount = Math.min(count, renderCount);
     return renderCount;
   }
@@ -3993,12 +4000,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       mapped: rendered
     };
   }
-  renderRange(range, {
-    renderCell,
-    renderDetailRow,
-    force,
-    onRender
-  }) {
+  renderRange(range, { renderCell, renderDetailRow, force, onRender }) {
     if (this.destroyed) {
       return [];
     }
@@ -4143,7 +4145,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (cellRendered && !force && cellMappedCorrectly) {
             continue;
           }
-          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
+          let elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
             // TODO when horizontal layout, just do elementsOutsideItemRange.pop()
             horizontalLayout ? mappedCells.getElementFromListForRow(
               elementsOutsideItemRange,
@@ -4153,6 +4155,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
               col
             )
           );
+          if (elementIndex == null) {
+            for (let i = this.itemDOMElements.length; i <= this.itemDOMRefs.length; i++) {
+              if (!this.itemDOMElements[i] && this.itemDOMRefs[i]) {
+                elementIndex = i;
+                break;
+              }
+            }
+          }
           if (elementIndex == null) {
             if (false) {
               this.error(`Cannot find element to render cell ${row}:${col}`);
@@ -4692,7 +4702,7 @@ var ActiveRowIndicatorFn = (props) => {
       setInfiniteVarsOnNode(
         {
           scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
-          scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
+          scrollLeftForActiveRowWhenHorizontalLayout: brain.isHorizontalLayoutBrain ? `${-scrollPosition.scrollLeft}px` : "0px"
         },
         domRef.current
       );
@@ -5423,7 +5433,7 @@ var Icon = (props) => {
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
 var React17 = __toESM(require("react"));
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
+  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4H11.14M12 6.29L14.03 11.71H9.96L12 6.29" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
@@ -6818,7 +6828,7 @@ function NumberFilterEditor() {
       type: "number",
       "data-yyy": true,
       disabled,
-      value,
+      value: value ?? "",
       onChange: (event) => {
         let value2 = isNaN(event.target.valueAsNumber) ? event.target.value : event.target.valueAsNumber;
         setValue(value2);
@@ -22499,7 +22509,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.15"
+      version: "6.0.17"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.dev.mjs

@@ -2631,15 +2631,22 @@ var MatrixBrain = class extends Logger {
     if (size <= 0) {
       return 0;
     }
+    const fixedStart = direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart;
+    const fixedEnd = direction === "horizontal" ? this.fixedColsEnd : this.fixedRowsEnd;
     if (typeof itemSize === "function") {
       const sizes = [];
-      for (let i = 0; i < count; i++) {
+      let start = 0;
+      let end = count;
+      start += fixedStart;
+      end -= fixedEnd;
+      for (let i = start; i < end; i++) {
         sizes.push(this.getItemSize(i, direction));
       }
       renderCount = getGreatestCountVisibleInSize(size, sizes);
     } else {
       renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
     }
+    renderCount += fixedStart + fixedEnd;
     renderCount = Math.min(count, renderCount);
     return renderCount;
   }
@@ -3934,12 +3941,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       mapped: rendered
     };
   }
-  renderRange(range, {
-    renderCell,
-    renderDetailRow,
-    force,
-    onRender
-  }) {
+  renderRange(range, { renderCell, renderDetailRow, force, onRender }) {
     if (this.destroyed) {
       return [];
     }
@@ -4084,7 +4086,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (cellRendered && !force && cellMappedCorrectly) {
             continue;
           }
-          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
+          let elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
             // TODO when horizontal layout, just do elementsOutsideItemRange.pop()
             horizontalLayout ? mappedCells.getElementFromListForRow(
               elementsOutsideItemRange,
@@ -4094,6 +4096,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
               col
             )
           );
+          if (elementIndex == null) {
+            for (let i = this.itemDOMElements.length; i <= this.itemDOMRefs.length; i++) {
+              if (!this.itemDOMElements[i] && this.itemDOMRefs[i]) {
+                elementIndex = i;
+                break;
+              }
+            }
+          }
           if (elementIndex == null) {
             if (false) {
               this.error(`Cannot find element to render cell ${row}:${col}`);
@@ -4633,7 +4643,7 @@ var ActiveRowIndicatorFn = (props) => {
       setInfiniteVarsOnNode(
         {
           scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
-          scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
+          scrollLeftForActiveRowWhenHorizontalLayout: brain.isHorizontalLayoutBrain ? `${-scrollPosition.scrollLeft}px` : "0px"
         },
         domRef.current
       );
@@ -5372,7 +5382,7 @@ var Icon = (props) => {
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
 import * as React17 from "react";
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
+  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4H11.14M12 6.29L14.03 11.71H9.96L12 6.29" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
@@ -6767,7 +6777,7 @@ function NumberFilterEditor() {
       type: "number",
       "data-yyy": true,
       disabled,
-      value,
+      value: value ?? "",
       onChange: (event) => {
         let value2 = isNaN(event.target.valueAsNumber) ? event.target.value : event.target.valueAsNumber;
         setValue(value2);
@@ -22457,7 +22467,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.15"
+      version: "6.0.17"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.js

@@ -2690,15 +2690,22 @@ var MatrixBrain = class extends Logger {
     if (size <= 0) {
       return 0;
     }
+    const fixedStart = direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart;
+    const fixedEnd = direction === "horizontal" ? this.fixedColsEnd : this.fixedRowsEnd;
     if (typeof itemSize === "function") {
       const sizes = [];
-      for (let i = 0; i < count; i++) {
+      let start = 0;
+      let end = count;
+      start += fixedStart;
+      end -= fixedEnd;
+      for (let i = start; i < end; i++) {
         sizes.push(this.getItemSize(i, direction));
       }
       renderCount = getGreatestCountVisibleInSize(size, sizes);
     } else {
       renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
     }
+    renderCount += fixedStart + fixedEnd;
     renderCount = Math.min(count, renderCount);
     return renderCount;
   }
@@ -3993,12 +4000,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       mapped: rendered
     };
   }
-  renderRange(range, {
-    renderCell,
-    renderDetailRow,
-    force,
-    onRender
-  }) {
+  renderRange(range, { renderCell, renderDetailRow, force, onRender }) {
     if (this.destroyed) {
       return [];
     }
@@ -4143,7 +4145,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (cellRendered && !force && cellMappedCorrectly) {
             continue;
           }
-          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
+          let elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
             // TODO when horizontal layout, just do elementsOutsideItemRange.pop()
             horizontalLayout ? mappedCells.getElementFromListForRow(
               elementsOutsideItemRange,
@@ -4153,6 +4155,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
               col
             )
           );
+          if (elementIndex == null) {
+            for (let i = this.itemDOMElements.length; i <= this.itemDOMRefs.length; i++) {
+              if (!this.itemDOMElements[i] && this.itemDOMRefs[i]) {
+                elementIndex = i;
+                break;
+              }
+            }
+          }
           if (elementIndex == null) {
             if (false) {
               this.error(`Cannot find element to render cell ${row}:${col}`);
@@ -4692,7 +4702,7 @@ var ActiveRowIndicatorFn = (props) => {
       setInfiniteVarsOnNode(
         {
           scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
-          scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
+          scrollLeftForActiveRowWhenHorizontalLayout: brain.isHorizontalLayoutBrain ? `${-scrollPosition.scrollLeft}px` : "0px"
         },
         domRef.current
       );
@@ -5423,7 +5433,7 @@ var Icon = (props) => {
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
 var React17 = __toESM(require("react"));
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
+  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4H11.14M12 6.29L14.03 11.71H9.96L12 6.29" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
@@ -6818,7 +6828,7 @@ function NumberFilterEditor() {
       type: "number",
       "data-yyy": true,
       disabled,
-      value,
+      value: value ?? "",
       onChange: (event) => {
         let value2 = isNaN(event.target.valueAsNumber) ? event.target.value : event.target.valueAsNumber;
         setValue(value2);
@@ -22499,7 +22509,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.15"
+      version: "6.0.17"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/index.mjs

@@ -2631,15 +2631,22 @@ var MatrixBrain = class extends Logger {
     if (size <= 0) {
       return 0;
     }
+    const fixedStart = direction === "horizontal" ? this.fixedColsStart : this.fixedRowsStart;
+    const fixedEnd = direction === "horizontal" ? this.fixedColsEnd : this.fixedRowsEnd;
     if (typeof itemSize === "function") {
       const sizes = [];
-      for (let i = 0; i < count; i++) {
+      let start = 0;
+      let end = count;
+      start += fixedStart;
+      end -= fixedEnd;
+      for (let i = start; i < end; i++) {
         sizes.push(this.getItemSize(i, direction));
       }
       renderCount = getGreatestCountVisibleInSize(size, sizes);
     } else {
       renderCount = (itemSize ? Math.ceil(size / itemSize) : 0) + 1;
     }
+    renderCount += fixedStart + fixedEnd;
     renderCount = Math.min(count, renderCount);
     return renderCount;
   }
@@ -3934,12 +3941,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
       mapped: rendered
     };
   }
-  renderRange(range, {
-    renderCell,
-    renderDetailRow,
-    force,
-    onRender
-  }) {
+  renderRange(range, { renderCell, renderDetailRow, force, onRender }) {
     if (this.destroyed) {
       return [];
     }
@@ -4084,7 +4086,7 @@ var ReactHeadlessTableRenderer = class extends Logger {
           if (cellRendered && !force && cellMappedCorrectly) {
             continue;
           }
-          const elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
+          let elementIndex = cellRendered ? mappedCells.getElementIndexForCell(row, col) : (
             // TODO when horizontal layout, just do elementsOutsideItemRange.pop()
             horizontalLayout ? mappedCells.getElementFromListForRow(
               elementsOutsideItemRange,
@@ -4094,6 +4096,14 @@ var ReactHeadlessTableRenderer = class extends Logger {
               col
             )
           );
+          if (elementIndex == null) {
+            for (let i = this.itemDOMElements.length; i <= this.itemDOMRefs.length; i++) {
+              if (!this.itemDOMElements[i] && this.itemDOMRefs[i]) {
+                elementIndex = i;
+                break;
+              }
+            }
+          }
           if (elementIndex == null) {
             if (false) {
               this.error(`Cannot find element to render cell ${row}:${col}`);
@@ -4633,7 +4643,7 @@ var ActiveRowIndicatorFn = (props) => {
       setInfiniteVarsOnNode(
         {
           scrollTopForActiveRow: `${-scrollPosition.scrollTop}px`,
-          scrollLeftForActiveRowWhenHorizontalLayout: `${-scrollPosition.scrollLeft}px`
+          scrollLeftForActiveRowWhenHorizontalLayout: brain.isHorizontalLayoutBrain ? `${-scrollPosition.scrollLeft}px` : "0px"
         },
         domRef.current
       );
@@ -5372,7 +5382,7 @@ var Icon = (props) => {
 // src/components/InfiniteTable/components/icons/IncludesOperatorIcon.tsx
 import * as React17 from "react";
 var IncludesOperatorIcon = (props) => {
-  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4M12 6.29L14.03 11.71H9.96M20" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
+  return /* @__PURE__ */ React17.createElement(Icon, { ...props }, /* @__PURE__ */ React17.createElement("path", { d: "M11.14 4L6.43 16H8.36L9.32 13.43H14.67L15.64 16H17.57L12.86 4H11.14M12 6.29L14.03 11.71H9.96L12 6.29" }), /* @__PURE__ */ React17.createElement("path", { d: "M4 18V15H2V20H22V18Z" }), /* @__PURE__ */ React17.createElement("path", { d: "M20 14V18H2V20H22V14Z" }));
 };
 
 // src/components/InfiniteTable/components/icons/EndsWithOperatorIcon.tsx
@@ -6767,7 +6777,7 @@ function NumberFilterEditor() {
       type: "number",
       "data-yyy": true,
       disabled,
-      value,
+      value: value ?? "",
       onChange: (event) => {
         let value2 = isNaN(event.target.valueAsNumber) ? event.target.value : event.target.valueAsNumber;
         setValue(value2);
@@ -22457,7 +22467,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "6.0.15"
+      version: "6.0.17"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;

package/package.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/infinite-table/infinite-react/issues"
   },
-  "version": "6.0.15",
+  "version": "6.0.17",
   "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": 1732057249050
+  "publishedAt": 1737123923656
 }