@infinite-table/infinite-react 7.4.1 → 7.5.0-canary.0

package/index.dev.mjs

@@ -1328,6 +1328,13 @@ var toUpperFirst = (s) => {
   return s ? s.substr(0, 1).toUpperCase() + s.substr(1) : s;
 };
 
+// src/components/InfiniteTable/types/Utility.ts
+function notNullable(value) {
+  if (value === null || value === void 0) return false;
+  const testDummyForCompileError = value;
+  return true;
+}
+
 // src/components/utils/isControlledValue.ts
 function isControlledValue(value) {
   const controlled = value !== void 0;
@@ -1401,6 +1408,165 @@ var usePrevious = (value, initialValue) => {
   return ref.current;
 };
 
+// src/utils/devTools/devToolsTracks.ts
+var DevToolsTracks = {
+  DataSource: {
+    track: "DataSource",
+    labels: {
+      RemoteDataLoad: "Remote data load",
+      TreeUnfilteredTreePaths: "Computing unfiltered tree paths",
+      Filter: "Filter",
+      Sort: "Sort",
+      Group: "Group",
+      LazyGroup: "Lazy group",
+      Tree: "Tree",
+      FlattenTree: "Flatten tree",
+      Flatten: "Flatten groups",
+      PrepareData: "Preparing data",
+      ComputeSelectionCount: "Computing selection count",
+      ComputeSelectionCountLazy: "Computing selection count (lazy)",
+      PrepareRowInfo: "Preparing row info array",
+      DiffRowInfoInStore: "setDataArray diffing in RowInfoStore"
+    }
+  },
+  InfiniteTable: {
+    track: "InfiniteTable",
+    labels: {
+      Render: "Rendering"
+    }
+  },
+  MatrixBrain: {
+    track: "Layout Computations",
+    labels: {
+      ComputeRenderRange: "Computing render range"
+    }
+  },
+  ComponentState: {
+    track: "ComponentState",
+    labels: {
+      PropUpdate: "Prop update"
+    }
+  }
+};
+
+// src/utils/devTools/index.ts
+var DevToolsMarker = class _DevToolsMarker {
+  constructor(debugId) {
+    this.debugId = debugId;
+    this.markerDetails = {
+      label: "",
+      track: "",
+      trackGroup: void 0,
+      color: void 0,
+      details: [],
+      tooltip: void 0
+    };
+    this.stopped = false;
+    this.start = (startDetails) => {
+      if (this.markerDetails.startTs) {
+        return this;
+      }
+      const start = performance.now();
+      this.markerDetails.details = startDetails?.details ?? [];
+      this.markerDetails.startTs = start;
+      return this;
+    };
+    this.end = (markerDetails = {}) => {
+      if (this.stopped) {
+        return this;
+      }
+      this.stopped = true;
+      const start = markerDetails.startTs ?? this.markerDetails.startTs;
+      const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
+      const color = markerDetails.color || this.markerDetails.color || "primary";
+      const trackGroup = markerDetails.trackGroup || this.markerDetails.trackGroup || `Infinite Table (${this.debugId})`;
+      const details = [
+        ...this.markerDetails.details || [],
+        ...markerDetails.details || []
+      ];
+      const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
+      const label = markerDetails.label || this.markerDetails.label || "Unknown";
+      const track = markerDetails.track || this.markerDetails.track || "Unknown";
+      performance.measure(label, {
+        start,
+        end,
+        detail: {
+          devtools: {
+            dataType: "track-entry",
+            trackGroup,
+            track,
+            color,
+            properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : void 0,
+            tooltipText: tooltip
+          }
+        }
+      });
+      return this;
+    };
+    this.debugId = debugId;
+  }
+  static create(debugId) {
+    return new _DevToolsMarker(debugId);
+  }
+  get startTimestamp() {
+    return this.markerDetails.startTs;
+  }
+  get track() {
+    const self = this;
+    return Object.keys(DevToolsTracks).reduce(
+      (acc, track) => {
+        const trackObj = {
+          start: self.start,
+          end: (markerDetails) => {
+            return self.end({
+              ...markerDetails,
+              track: DevToolsTracks[track].track,
+              label: markerDetails.label
+            });
+          },
+          get label() {
+            const currentTrack = DevToolsTracks[track];
+            return Object.keys(currentTrack.labels).reduce(
+              (labelAcc, label) => {
+                const labelObj = {
+                  start: self.start,
+                  end: (markerDetails) => {
+                    return self.end({
+                      ...markerDetails,
+                      track: currentTrack.track,
+                      label: currentTrack.labels[label]
+                    });
+                  }
+                };
+                Object.defineProperty(labelAcc, label, {
+                  get: () => {
+                    self.markerDetails.label = currentTrack.labels[label];
+                    return labelObj;
+                  }
+                });
+                return labelAcc;
+              },
+              {}
+            );
+          }
+        };
+        Object.defineProperty(acc, track, {
+          get: () => {
+            const currentTrack = DevToolsTracks[track];
+            self.markerDetails.track = currentTrack.track;
+            return trackObj;
+          }
+        });
+        return acc;
+      },
+      {}
+    );
+  }
+};
+function getMarker(debugId) {
+  return DevToolsMarker.create(debugId);
+}
+
 // src/components/hooks/useComponentState/index.tsx
 var notifyChange = (props, callbackPropName, values) => {
   const callbackProp = props[callbackPropName];
@@ -1657,9 +1823,10 @@ function buildManagedComponent(config) {
         }
       });
       if (updatedPropsToStateCount > 0 || newMappedStateCount > 0) {
-        const logger2 = config.debugName ? dbg(
-          typeof config.debugName === "function" ? `${config.debugName(currentProps)}:rerender` : `${config.debugName}:rerender`
-        ) : dbg("rerender");
+        const debugId = state.debugId;
+        const marker = debugId ? getMarker(debugId).track.ComponentState.label.PropUpdate.start() : void 0;
+        const debugChannelName = config.debugName ? typeof config.debugName === "function" ? `${config.debugName(currentProps)}:rerender` : `${config.debugName}:rerender` : "rerender";
+        const logger2 = dbg(debugChannelName);
         logger2(
           "Triggered by new values for the following props",
           ...[
@@ -1667,6 +1834,25 @@ function buildManagedComponent(config) {
             ...Object.keys(updatedPropsToState ?? {})
           ]
         );
+        if (marker) {
+          marker.end({
+            label: debugChannelName,
+            details: [
+              newMappedStateCount > 0 ? {
+                name: "Updated properties",
+                value: Object.keys(newMappedState).join(", ")
+              } : void 0,
+              updatedPropsToStateCount > 0 ? {
+                name: "Updated props",
+                value: Object.keys(updatedPropsToState).join(", ")
+              } : void 0,
+              updatedPropsToStateCount > 0 || updatedPropsToState ? {
+                name: "Details",
+                value: "The time for this marker is not accurate. The marker is only displayed so you can easily identify the props that triggered the rerender."
+              } : void 0
+            ].filter(notNullable)
+          });
+        }
         const action = {
           payload: {
             mappedState: newMappedStateCount ? newMappedState : null,
@@ -5713,7 +5899,7 @@ import * as React30 from "react";
 
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 import * as React29 from "react";
-import { useCallback as useCallback12, useContext as useContext7, useMemo as useMemo4 } from "react";
+import { useCallback as useCallback12, useContext as useContext7, useMemo as useMemo4, useSyncExternalStore } from "react";
 
 // src/components/InfiniteTable/utils/getColumnForGroupBy.tsx
 import * as React25 from "react";
@@ -6009,16 +6195,6 @@ function getSingleGroupColumn(options, toggleGroupRow, groupColumnFromProps) {
   return generatedGroupColumn;
 }
 
-// src/components/InfiniteTable/utils/objectValuesExcept.ts
-function objectValuesExcept(obj, exceptList) {
-  const result = [];
-  for (const k in obj)
-    if (obj.hasOwnProperty(k) && !exceptList.hasOwnProperty(k)) {
-      result.push(obj[k]);
-    }
-  return result;
-}
-
 // src/components/InfiniteTable/components/cell.css.ts
 var ColumnCellCls = "_1eexc2a7 _1eexc2a6";
 var ColumnCellRecipe = createRuntimeFn({ defaultClassName: "_1eexc2an", variantClassNames: { dragging: { false: "_1eexc2ao", true: "_1eexc2ap" }, insideDisabledDraggingPage: { true: "_1eexc2aq", false: "_1eexc2ar" }, cellSelected: { false: "_1eexc2as", true: "_1eexc2at" }, treeNode: { parent: "_1eexc2au", leaf: "_1eexc2av", false: "_1eexc2aw" }, align: { start: "_1eexc2ax", end: "_1eexc2ay", center: "_1eexc2az" }, verticalAlign: { start: "_1eexc2a10", end: "_1eexc2a11", center: "_1eexc2a12" }, rowActive: { false: "_1eexc2a13", true: "_1eexc2a14" }, groupRow: { false: "_1eexc2a15", true: "_1eexc2a16" }, groupCell: { false: "_1eexc2a17", true: "_1eexc2a18" }, rowDisabled: { false: "_1eexc2a19", true: "_1eexc2a1a" }, zebra: { false: "_1eexc2a1b", even: "_1eexc2a1c", odd: "_1eexc2a1d" }, rowSelected: { true: "_1eexc2a1e", false: "_1eexc2a1f", null: "_1eexc2a1g" }, first: { true: "_1eexc2a1h", false: "_1eexc2a1i" }, last: { true: "_1eexc2a1j", false: "_1eexc2a1k" }, groupByField: { true: "_1eexc2a1l", false: "_1eexc2a1m" }, firstInCategory: { true: "_1eexc2a1n", false: "_1eexc2a1o" }, firstRow: { true: "_1eexc2a1p", false: "_1eexc2a1q" }, firstRowInHorizontalLayoutPage: { true: "_1eexc2a1r", false: "_1eexc2a1s" }, lastInCategory: { true: "_1eexc2a1t", false: "_1eexc2a1u" }, pinned: { start: "_1eexc2a1v", end: "_1eexc2a1w", false: "_1eexc2a1x" }, filtered: { true: "_1eexc2a1y", false: "_1eexc2a1z" } }, defaultVariants: {}, compoundVariants: [[{ firstRowInHorizontalLayoutPage: true, firstRow: false }, "_1eexc2a20"], [{ pinned: "start", lastInCategory: true }, "_1eexc2a21"], [{ pinned: "start", firstInCategory: true }, "_1eexc2a22"], [{ pinned: "end", firstInCategory: true }, "_1eexc2a23"], [{ pinned: "end", lastInCategory: true }, "_1eexc2a24"], [{ align: "center", groupCell: false }, "_1eexc2a25"], [{ rowDisabled: true, zebra: "odd" }, "_1eexc2a26"]] });
@@ -6592,6 +6768,7 @@ import { useCallback as useCallback10, useRef as useRef9 } from "react";
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
   const domRef = useRef9(null);
+  const cancelledRef = useRef9(false);
   const refCallback = React28.useCallback((node) => {
     domRef.current = node;
     if (node) {
@@ -6603,18 +6780,24 @@ function InfiniteTableColumnEditor() {
     if (key === "Enter" || key === "Tab") {
       confirmEdit();
     } else if (key === "Escape") {
+      cancelledRef.current = true;
       cancelEdit();
     } else {
       event.stopPropagation();
     }
   }, []);
+  const onBlur = useCallback10(() => {
+    if (!cancelledRef.current) {
+      confirmEdit();
+    }
+  }, []);
   return /* @__PURE__ */ React28.createElement(React28.Fragment, null, /* @__PURE__ */ React28.createElement(
     "input",
     {
       readOnly,
       ref: refCallback,
       onKeyDown: onKeyDown2,
-      onBlur: () => confirmEdit(),
+      onBlur,
       className: join(absoluteCover, outline.none),
       type: "text",
       defaultValue: initialValue,
@@ -6625,6 +6808,16 @@ function InfiniteTableColumnEditor() {
   ));
 }
 
+// src/components/InfiniteTable/utils/objectValuesExcept.ts
+function objectValuesExcept(obj, exceptList) {
+  const result = [];
+  for (const k in obj)
+    if (obj.hasOwnProperty(k) && !exceptList.hasOwnProperty(k)) {
+      result.push(obj[k]);
+    }
+  return result;
+}
+
 // src/components/InfiniteTable/components/InfiniteTableRow/InfiniteTableColumnCell.tsx
 var columnZIndexAtIndex3 = stripVar(InternalVars.columnZIndexAtIndex);
 var columnVisibilityAtIndex2 = stripVar(InternalVars.columnVisibilityAtIndex);
@@ -6719,7 +6912,8 @@ function applyColumnStyle(existingStyle, columnStyle, param) {
 }
 function InfiniteTableColumnCellFn(props) {
   const {
-    rowInfo,
+    dataSourceStatePartialForCell,
+    rowInfoStore,
     rowStyle,
     rowClassName,
     rowIndexInHorizontalLayoutPage,
@@ -6741,8 +6935,30 @@ function InfiniteTableColumnCellFn(props) {
     fieldsToColumn,
     domRef: initialDomRef,
     hidden,
-    showZebraRows
+    showZebraRows,
+    // DataSource context values passed as props
+    getDataSourceState,
+    dataSourceApi,
+    dataSourceActions,
+    // InfiniteTable context values passed as props
+    getState,
+    imperativeApi,
+    componentActions,
+    getComputed,
+    getDataSourceMasterContext
   } = props;
+  const rowInfoFromStore = useSyncExternalStore(
+    useCallback12(
+      (callback) => rowInfoStore.subscribeToRowIndex(rowIndex, callback),
+      [rowInfoStore, rowIndex]
+    ),
+    useCallback12(
+      () => rowInfoStore.getRowInfoAtIndex(rowIndex),
+      [rowInfoStore, rowIndex]
+    )
+  );
+  const isEmptyRowInfo = !rowInfoFromStore;
+  const isEmptyColumn = !column;
   const htmlElementRef = React29.useRef(null);
   const domRef = useCallback12(
     (node) => {
@@ -6753,23 +6969,25 @@ function InfiniteTableColumnCellFn(props) {
     },
     [initialDomRef]
   );
-  if (!column) {
-    return /* @__PURE__ */ React29.createElement("div", { ref: domRef }, "no column");
-  }
+  const rowInfo = rowInfoFromStore ?? {
+    id: "",
+    indexInAll: rowIndex,
+    rowSelected: false,
+    rowDisabled: false,
+    isCellSelected: () => false,
+    hasSelectedCells: () => false,
+    isGroupRow: false,
+    isTreeNode: false,
+    isParentNode: false,
+    treeNesting: 0,
+    nodePath: [],
+    collapsed: false,
+    dataSourceHasGrouping: false,
+    selfLoaded: true,
+    data: {}
+  };
   const { rowSelected } = rowInfo;
-  const {
-    getState,
-    actions: componentActions,
-    computed,
-    api: imperativeApi,
-    getDataSourceMasterContext
-  } = useInfiniteTable();
-  const {
-    componentState: dataSourceState,
-    getState: getDataSourceState,
-    api: dataSourceApi,
-    componentActions: dataSourceActions
-  } = useDataSourceContextValue();
+  const computed = getComputed();
   const { activeRowIndex, keyboardNavigation, columnReorderInPageIndex } = getState();
   const rowActive = rowIndex === activeRowIndex && keyboardNavigation === "row";
   const renderingContext = {
@@ -6854,7 +7072,7 @@ function InfiniteTableColumnCellFn(props) {
     },
     [rowIndex, rowDisabled, column.computedVisibleIndex, keyboardNavigation]
   );
-  const { selectionMode, cellSelection, isNodeReadOnly: isNodeReadOnly2 } = dataSourceState;
+  const { selectionMode, cellSelection, isNodeReadOnly: isNodeReadOnly2 } = dataSourceStatePartialForCell;
   const cellSelected = renderParam.cellSelected;
   renderParam.domRef = domRef;
   renderParam.htmlElementRef = htmlElementRef;
@@ -7213,6 +7431,9 @@ function InfiniteTableColumnCellFn(props) {
     renderChildren: useCallback12(() => theChildren, [renderChildren])
   };
   const ContextProvider = InfiniteTableColumnCellContext.Provider;
+  if (isEmptyColumn || isEmptyRowInfo) {
+    return /* @__PURE__ */ React29.createElement("div", { ref: domRef, style: { display: "none" } });
+  }
   return (
     // this context is here for supporting useInfiniteColumnCell to be used
     // with a custom column component, specified via column.components.ColumnCell
@@ -8450,28 +8671,39 @@ import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo6 } from "react"
 import * as React39 from "react";
 import { flushSync } from "react-dom";
 import { useLayoutEffect as useLayoutEffect7, useRef as useRef14, useState as useState12 } from "react";
+var SHOULD_FLUSH_SYNC = () => false;
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = useState12(props.updater.get);
   const rafId = useRef14(null);
+  const shouldFlushSync = props.shouldFlushSync ?? SHOULD_FLUSH_SYNC;
   useLayoutEffect7(() => {
     function onChange(children2) {
+      let FLUSH_SYNC = shouldFlushSync();
       if (props.useraf) {
         if (rafId.current != null) {
           cancelAnimationFrame(rafId.current);
         }
         rafId.current = requestAnimationFrame(() => {
+          if (FLUSH_SYNC) {
+            queueMicrotask(() => {
+              flushSync(() => {
+                setChildren(children2);
+              });
+            });
+          } else {
+            setChildren(children2);
+          }
+        });
+      } else {
+        if (FLUSH_SYNC) {
           queueMicrotask(() => {
             flushSync(() => {
               setChildren(children2);
             });
           });
-        });
-      } else {
-        queueMicrotask(() => {
-          flushSync(() => {
-            setChildren(children2);
-          });
-        });
+        } else {
+          setChildren(children2);
+        }
       }
     }
     const remove = props.updater.onChange(onChange);
@@ -8481,7 +8713,7 @@ function AvoidReactDiffFn(props) {
       }
       remove();
     };
-  }, [props.updater, props.useraf]);
+  }, [props.updater, props.useraf, shouldFlushSync]);
   return children ?? null;
 }
 var AvoidReactDiff = React39.memo(AvoidReactDiffFn);
@@ -9810,14 +10042,26 @@ var GridCellForReact = class {
   constructor(debugId, cellInfo) {
     this.element = null;
     this.mounted = false;
+    this.IS_UPDATED_WHILE_SCROLLING = false;
     this.mountSubscription = buildSubscriptionCallback();
+    this.isUpdatedWhileScrolling = () => {
+      return this.IS_UPDATED_WHILE_SCROLLING;
+    };
     const count = CELL_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
     const key = `${debugId}:GridCellReact:${count}`;
     CELL_COUNT_BY_DEBUG_ID.set(debugId, count + 1);
     this.debugId = key;
     this.cellInfo = cellInfo;
     this.updater = buildSubscriptionCallback();
-    this.node = /* @__PURE__ */ React40.createElement(AvoidReactDiff, { key, name: key, updater: this.updater });
+    this.node = /* @__PURE__ */ React40.createElement(
+      AvoidReactDiff,
+      {
+        key,
+        name: key,
+        updater: this.updater,
+        shouldFlushSync: this.isUpdatedWhileScrolling
+      }
+    );
     this.ref = (htmlElement) => {
       this.element = htmlElement;
       if (htmlElement) {
@@ -9849,7 +10093,8 @@ var GridCellForReact = class {
   getNode() {
     return this.node;
   }
-  update(content, additionalInfo) {
+  update(content, additionalInfo, scrollingObjectParam) {
+    this.IS_UPDATED_WHILE_SCROLLING = scrollingObjectParam ? scrollingObjectParam.scrolling : false;
     this.updater(content);
     this.cellInfo = additionalInfo;
   }
@@ -10141,14 +10386,14 @@ var GridCellManager = class extends Logger {
     }
     this.addCellToMatrix(cell, cellPos);
   }
-  renderNodeAtCell(node, cell, cellPos, additionalInfo) {
+  renderNodeAtCell(node, cell, cellPos, additionalInfo, scrollingObjectParam) {
     const currentCellAtPos = this.getCellAt(cellPos);
     if (currentCellAtPos && currentCellAtPos !== cell) {
       this.detachCellAt(cellPos);
     }
     this.pool.attachCell(cell);
     this.setCellPositionInMatrix(cell, cellPos);
-    cell.update(node, additionalInfo);
+    cell.update(node, additionalInfo, scrollingObjectParam);
     return cell;
   }
   getCellPosition(cell) {
@@ -10731,6 +10976,9 @@ var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnOffsetAtIndexWhileReordering2 = stripVar(
   InternalVars.columnOffsetAtIndexWhileReordering
 );
+var SCROLLING_OBJECT_PARAM_FLYWEIGHT = {
+  scrolling: false
+};
 var GridRenderer = class extends Logger {
   constructor(brain, debugId) {
     debugId = debugId || "ReactHeadlessTableRenderer";
@@ -11169,6 +11417,14 @@ var GridRenderer = class extends Logger {
       const covered = coveredByAnotherRow || coveredByAnotherCol;
       return covered ? [rowspanParent, colspanParent] : false;
     };
+    this.onMouseEnterNotBound = (event) => {
+      const rowIndex = Number(event.target.dataset.rowIndex);
+      this.onMouseEnter(rowIndex);
+    };
+    this.onMouseLeaveNotBound = (event) => {
+      const rowIndex = Number(event.target.dataset.rowIndex);
+      this.onMouseLeave(rowIndex);
+    };
     this.onMouseEnter = (rowIndex) => {
       this.lastEnteredRow = rowIndex;
       this.lastExitedRow = -1;
@@ -11858,8 +12114,12 @@ var GridRenderer = class extends Logger {
       hidden,
       heightWithRowspan,
       widthWithColspan,
-      onMouseEnter: this.onMouseEnter.bind(null, rowIndex),
-      onMouseLeave: this.onMouseLeave.bind(null, rowIndex),
+      // onMouseEnter: this.onMouseEnter.bind(null, rowIndex),
+      onMouseEnter: this.onMouseEnterNotBound,
+      //.bind(null, rowIndex),
+      // onMouseLeave: this.onMouseLeave.bind(null, rowIndex),
+      onMouseLeave: this.onMouseLeaveNotBound,
+      //.bind(null, rowIndex),
       domRef: cell.ref
     });
     if (!cell.isMounted()) {
@@ -11885,11 +12145,13 @@ var GridRenderer = class extends Logger {
       }
       return;
     }
+    SCROLLING_OBJECT_PARAM_FLYWEIGHT.scrolling = this.scrolling;
     this.cellManager.renderNodeAtCell(
       renderedNode,
       cell,
       [rowIndex, colIndex],
-      cellAdditionalInfo
+      cellAdditionalInfo,
+      SCROLLING_OBJECT_PARAM_FLYWEIGHT
     );
     this.updateElementPosition(cell, { hidden, rowspan, colspan });
     return;
@@ -18772,165 +19034,6 @@ function finishRowInfoReducersFor(params) {
   return results;
 }
 
-// src/utils/devTools/devToolsTracks.ts
-var DevToolsTracks = {
-  DataSource: {
-    track: "DataSource",
-    labels: {
-      RemoteDataLoad: "Remote data load",
-      TreeUnfilteredTreePaths: "Computing unfiltered tree paths",
-      Filter: "Filter",
-      Sort: "Sort",
-      Group: "Group",
-      LazyGroup: "Lazy group",
-      Tree: "Tree",
-      FlattenTree: "Flatten tree",
-      Flatten: "Flatten groups",
-      PrepareData: "Preparing data",
-      ComputeSelectionCount: "Computing selection count",
-      ComputeSelectionCountLazy: "Computing selection count (lazy)",
-      PrepareRowInfo: "Preparing row info array"
-    }
-  },
-  InfiniteTable: {
-    track: "InfiniteTable",
-    labels: {
-      Render: "Rendering"
-    }
-  },
-  MatrixBrain: {
-    track: "Layout Computations",
-    labels: {
-      ComputeRenderRange: "Computing render range"
-    }
-  }
-};
-
-// src/utils/devTools/index.ts
-var DevToolsMarker = class _DevToolsMarker {
-  constructor(debugId) {
-    this.debugId = debugId;
-    this.markerDetails = {
-      label: "",
-      track: "",
-      trackGroup: void 0,
-      color: void 0,
-      details: [],
-      tooltip: void 0
-    };
-    this.stopped = false;
-    this.start = (startDetails) => {
-      if (this.markerDetails.startTs) {
-        return this;
-      }
-      const start = performance.now();
-      this.markerDetails.details = startDetails?.details ?? [];
-      this.markerDetails.startTs = start;
-      return this;
-    };
-    this.end = (markerDetails = {}) => {
-      if (this.stopped) {
-        return this;
-      }
-      this.stopped = true;
-      const start = markerDetails.startTs ?? this.markerDetails.startTs;
-      const end = markerDetails.endTs ?? this.markerDetails.endTs ?? performance.now();
-      const color = markerDetails.color || this.markerDetails.color || "primary";
-      const trackGroup = markerDetails.trackGroup || this.markerDetails.trackGroup || `Infinite Table (${this.debugId})`;
-      const details = [
-        ...this.markerDetails.details || [],
-        ...markerDetails.details || []
-      ];
-      const tooltip = markerDetails.tooltip || this.markerDetails.tooltip;
-      const label = markerDetails.label || this.markerDetails.label || "Unknown";
-      const track = markerDetails.track || this.markerDetails.track || "Unknown";
-      performance.measure(label, {
-        start,
-        end,
-        detail: {
-          devtools: {
-            dataType: "track-entry",
-            trackGroup,
-            track,
-            color,
-            properties: details.length > 0 ? details.map((detail) => [detail.name, detail.value]) : void 0,
-            tooltipText: tooltip
-          }
-        }
-      });
-      return this;
-    };
-    this.debugId = debugId;
-  }
-  static create(debugId) {
-    return new _DevToolsMarker(debugId);
-  }
-  get startTimestamp() {
-    return this.markerDetails.startTs;
-  }
-  get track() {
-    const self = this;
-    return Object.keys(DevToolsTracks).reduce(
-      (acc, track) => {
-        const trackObj = {
-          start: self.start,
-          end: (markerDetails) => {
-            return self.end({
-              ...markerDetails,
-              track: DevToolsTracks[track].track,
-              label: markerDetails.label
-            });
-          },
-          get label() {
-            const currentTrack = DevToolsTracks[track];
-            return Object.keys(currentTrack.labels).reduce(
-              (labelAcc, label) => {
-                const labelObj = {
-                  start: self.start,
-                  end: (markerDetails) => {
-                    return self.end({
-                      ...markerDetails,
-                      track: currentTrack.track,
-                      label: currentTrack.labels[label]
-                    });
-                  }
-                };
-                Object.defineProperty(labelAcc, label, {
-                  get: () => {
-                    self.markerDetails.label = currentTrack.labels[label];
-                    return labelObj;
-                  }
-                });
-                return labelAcc;
-              },
-              {}
-            );
-          }
-        };
-        Object.defineProperty(acc, track, {
-          get: () => {
-            const currentTrack = DevToolsTracks[track];
-            self.markerDetails.track = currentTrack.track;
-            return trackObj;
-          }
-        });
-        return acc;
-      },
-      {}
-    );
-  }
-};
-function getMarker(debugId) {
-  return DevToolsMarker.create(debugId);
-}
-
-// src/components/InfiniteTable/types/Utility.ts
-function notNullable(value) {
-  if (value === null || value === void 0) return false;
-  const testDummyForCompileError = value;
-  return true;
-}
-
 // src/components/DataSource/state/reducer.ts
 function cleanupEmptyFilterValues(filterValue, filterTypes) {
   if (!filterValue) {
@@ -19708,6 +19811,9 @@ function concludeReducer(params) {
       treeMutations: treeMutations?.size ? treeMutations : void 0
     };
   }
+  state.rowInfoStore.notifyDataArray(rowInfoDataArray, {
+    marker: debugId ? getMarker(debugId).track.DataSource.label.DiffRowInfoInStore : void 0
+  });
   if (rootMarker) {
     rootMarker?.track.DataSource.label.PrepareData.end({
       details: [
@@ -20562,6 +20668,279 @@ var normalizeSortInfo = (initialSortInfo, weakMap3) => {
   return result;
 };
 
+// src/components/DataSource/RowInfoStore.ts
+function deepEqual(a, b) {
+  if (a === b) return true;
+  if (a == null || b == null) return a === b;
+  if (typeof a !== typeof b) return false;
+  if (Array.isArray(a) && Array.isArray(b)) {
+    if (a.length !== b.length) return false;
+    for (let i = 0, len = a.length; i < len; i++) {
+      if (!deepEqual(a[i], b[i])) return false;
+    }
+    return true;
+  }
+  if (typeof a === "object") {
+    const keysA = Object.keys(a);
+    const keysB = Object.keys(b);
+    if (keysA.length !== keysB.length) return false;
+    for (const key of keysA) {
+      if (!Object.prototype.hasOwnProperty.call(b, key)) return false;
+      if (!deepEqual(a[key], b[key])) return false;
+    }
+    return true;
+  }
+  return false;
+}
+function isSameRowInfoType(one, two) {
+  if (one === void 0 || two === void 0) return false;
+  if (one.isGroupRow !== two.isGroupRow) return false;
+  if (one.dataSourceHasGrouping !== two.dataSourceHasGrouping) return false;
+  if (one.isTreeNode !== two.isTreeNode) return false;
+  if (one.isTreeNode) {
+    if (one.isParentNode !== two.isParentNode)
+      return false;
+  }
+  return true;
+}
+var rowInfoBase_KeysRecord = {
+  id: true,
+  value: true,
+  indexInAll: true,
+  rowSelected: true,
+  rowDisabled: true,
+  isCellSelected: false,
+  hasSelectedCells: false
+};
+var rowInfo_NoGrouping_RowInfoNormal_KeysRecord = {
+  ...rowInfoBase_KeysRecord,
+  dataSourceHasGrouping: true,
+  isTreeNode: true,
+  data: false,
+  isGroupRow: true,
+  selfLoaded: true
+};
+var rowInfo_HasGrouping_RowInfoBase_KeysRecord = {
+  indexInGroup: true,
+  groupKeys: true,
+  groupBy: true,
+  rootGroupBy: true,
+  parents: false,
+  indexInParentGroups: true,
+  groupCount: true,
+  groupNesting: true,
+  collapsed: true,
+  selfLoaded: true
+};
+var rowInfo_HasGrouping_RowInfoGroup_KeysRecord = {
+  ...rowInfoBase_KeysRecord,
+  ...rowInfo_HasGrouping_RowInfoBase_KeysRecord,
+  dataSourceHasGrouping: true,
+  isTreeNode: true,
+  data: false,
+  reducerData: true,
+  isGroupRow: true,
+  duplicateOf: false,
+  deepRowInfoArray: false,
+  error: true,
+  reducerResults: true,
+  groupCount: true,
+  groupData: true,
+  selectedChildredCount: true,
+  deselectedChildredCount: true,
+  totalChildrenCount: true,
+  collapsedChildrenCount: true,
+  collapsedGroupsCount: true,
+  directChildrenCount: true,
+  directChildrenLoadedCount: true,
+  pivotValuesMap: true,
+  childrenAvailable: true,
+  childrenLoading: true
+};
+var rowInfo_Tree_RowInfoBase_KeysRecord = {
+  isTreeNode: true,
+  isParentNode: true,
+  indexInParent: true,
+  nodePath: true,
+  parentNodes: false,
+  indexInParentNodes: true,
+  totalLeafNodesCount: true,
+  collapsedLeafNodesCount: true,
+  treeNesting: true,
+  selfLoaded: true
+};
+var rowInfo_Tree_RowInfoLeafNode_KeysRecord = {
+  ...rowInfoBase_KeysRecord,
+  ...rowInfo_Tree_RowInfoBase_KeysRecord,
+  dataSourceHasGrouping: true,
+  isTreeNode: true,
+  isGroupRow: true,
+  isParentNode: true,
+  data: false
+};
+var rowInfo_Tree_RowInfoParentNode_KeysRecord = {
+  ...rowInfoBase_KeysRecord,
+  ...rowInfo_Tree_RowInfoBase_KeysRecord,
+  dataSourceHasGrouping: true,
+  isParentNode: true,
+  isGroupRow: true,
+  nodeExpanded: true,
+  selfExpanded: true,
+  data: false,
+  selectedLeafNodesCount: true,
+  deepRowInfoArray: false,
+  deselectedLeafNodesCount: true,
+  duplicateOf: false
+};
+var rowInfoKeys_noGrouping = Object.entries(
+  rowInfo_NoGrouping_RowInfoNormal_KeysRecord
+).map(([key, value]) => value ? key : void 0).filter(Boolean);
+var rowInfoKeys_hasGrouping_normalRow = Object.entries(
+  rowInfo_NoGrouping_RowInfoNormal_KeysRecord
+).map(
+  ([key, value]) => value ? key : void 0
+);
+var rowInfoKeys_hasGrouping_groupRow = Object.entries(
+  rowInfo_HasGrouping_RowInfoGroup_KeysRecord
+).map(
+  ([key, value]) => value ? key : void 0
+);
+var rowInfoKeys_tree_leafNode = Object.entries(
+  rowInfo_Tree_RowInfoLeafNode_KeysRecord
+).map(
+  ([key, value]) => value ? key : void 0
+);
+var rowInfoKeys_tree_parentNode = Object.entries(
+  rowInfo_Tree_RowInfoParentNode_KeysRecord
+).map(
+  ([key, value]) => value ? key : void 0
+);
+function deepEqualRowInfo(oldRowInfo, newRowInfo) {
+  if (oldRowInfo === newRowInfo) return true;
+  if (!oldRowInfo || !newRowInfo) {
+    return false;
+  }
+  if (!isSameRowInfoType(oldRowInfo, newRowInfo)) {
+    return false;
+  }
+  if (oldRowInfo.id !== newRowInfo.id) return false;
+  if (oldRowInfo.data !== newRowInfo.data) {
+    if (!deepEqual(oldRowInfo.data, newRowInfo.data)) {
+      return false;
+    }
+  }
+  let allKeys = [];
+  if (!oldRowInfo.dataSourceHasGrouping) {
+    if (oldRowInfo.isTreeNode) {
+      allKeys = oldRowInfo.isTreeNode && oldRowInfo.isParentNode ? rowInfoKeys_tree_parentNode : rowInfoKeys_tree_leafNode;
+    } else {
+      allKeys = rowInfoKeys_noGrouping;
+    }
+  } else {
+    allKeys = oldRowInfo.isGroupRow ? rowInfoKeys_hasGrouping_groupRow : rowInfoKeys_hasGrouping_normalRow;
+  }
+  for (const key of allKeys) {
+    const oldValue = oldRowInfo[key];
+    const newValue = newRowInfo[key];
+    if (typeof oldValue === "function" || typeof newValue === "function") {
+      continue;
+    }
+    if (!deepEqual(oldValue, newValue)) {
+      return false;
+    }
+  }
+  return true;
+}
+function createRowInfoStore() {
+  let dataArray = [];
+  const subscribers = /* @__PURE__ */ new Map();
+  const notifyDataArray = (newDataArray, params) => {
+    const oldDataArray = dataArray;
+    const marker = params?.marker;
+    if (marker) {
+      marker.start({
+        details: [
+          { name: "new dataArray length", value: newDataArray.length },
+          {
+            name: "old dataArray length",
+            value: oldDataArray.length
+          }
+        ]
+      });
+    }
+    const changedIndices = [];
+    const subscribedRowIndexes = getSubscribedRowIndexes();
+    for (const index of subscribedRowIndexes) {
+      const oldRowInfo = oldDataArray[index];
+      const newRowInfo = newDataArray[index];
+      if (newRowInfo === void 0) {
+        changedIndices.push(index);
+        continue;
+      }
+      if (!deepEqualRowInfo(oldRowInfo, newRowInfo)) {
+        changedIndices.push(index);
+      }
+    }
+    dataArray = newDataArray;
+    if (changedIndices.length > 0) {
+      queueMicrotask(() => {
+        console.log("notify", changedIndices);
+        for (let i = 0, len = changedIndices.length; i < len; i++) {
+          const index = changedIndices[i];
+          const indexSubscribers = subscribers.get(index);
+          if (indexSubscribers) {
+            for (const callback of indexSubscribers) {
+              callback();
+            }
+          }
+        }
+      });
+    }
+    if (marker) {
+      marker.end({
+        details: [{ name: "updated row infos", value: changedIndices.length }]
+      });
+    }
+  };
+  const getRowInfoAtIndex = (index) => {
+    return dataArray[index];
+  };
+  const subscribeToRowIndex = (rowIndex, callback) => {
+    let indexSubscribers = subscribers.get(rowIndex);
+    if (!indexSubscribers) {
+      indexSubscribers = /* @__PURE__ */ new Set();
+      subscribers.set(rowIndex, indexSubscribers);
+    }
+    indexSubscribers.add(callback);
+    return () => {
+      const subs = subscribers.get(rowIndex);
+      if (subs) {
+        subs.delete(callback);
+        if (subs.size === 0) {
+          subscribers.delete(rowIndex);
+        }
+      }
+    };
+  };
+  const getSubscribedRowIndexes = () => {
+    return Array.from(subscribers.keys());
+  };
+  const getDataArray = () => {
+    return dataArray;
+  };
+  const clear = () => {
+    dataArray = [];
+    subscribers.clear();
+  };
+  return {
+    notifyDataArray,
+    getRowInfoAtIndex,
+    subscribeToRowIndex,
+    getDataArray,
+    clear
+  };
+}
+
 // src/components/DataSource/state/getInitialState.ts
 var defaultCursorId = Symbol("cursorId");
 var isNodeReadOnly = (rowInfo) => {
@@ -20581,6 +20960,7 @@ function initSetupState(props) {
     debugTimings: /* @__PURE__ */ new Map(),
     debugWarnings: /* @__PURE__ */ new Map(),
     devToolsDetected: !!globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__,
+    rowInfoStore: createRowInfoStore(),
     // TODO cleanup indexer on unmount
     indexer: new Indexer(),
     totalLeafNodesCount: 0,
@@ -20681,6 +21061,7 @@ var cleanupDataSource = (state) => {
   state.treeSelectionState?.destroy();
   state.idToPathMap.clear();
   state.idToIndexMap.clear();
+  state.rowInfoStore.clear();
 };
 var forwardProps3 = (setupState, props) => {
   return {
@@ -22392,6 +22773,9 @@ function isSortInfoForColumn(sortInfo, col) {
 }
 var InfiniteTableApiImpl = class {
   constructor(context) {
+    this.getVisibleRenderRange = () => {
+      return this.getState().brain.getRenderRange();
+    };
     this.hideFilterOperatorMenu = () => {
       this.actions.filterOperatorMenuVisibleForColumnId = null;
     };
@@ -23238,7 +23622,9 @@ var InfiniteTableApiImpl = class {
   }
   set scrollLeft(scrollLeft2) {
     const state = this.getState();
-    state.scrollerDOMRef.current.scrollLeft = Math.max(scrollLeft2, 0);
+    if (state.scrollerDOMRef.current) {
+      state.scrollerDOMRef.current.scrollLeft = Math.max(scrollLeft2, 0);
+    }
   }
   get scrollTop() {
     const state = this.getState();
@@ -23246,7 +23632,9 @@ var InfiniteTableApiImpl = class {
   }
   set scrollTop(scrollTop2) {
     const state = this.getState();
-    state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
+    if (state.scrollerDOMRef.current) {
+      state.scrollerDOMRef.current.scrollTop = Math.max(scrollTop2, 0);
+    }
   }
   scrollRowIntoView(rowIndex, config = { offset: 0 }) {
     const state = this.getState();
@@ -24125,12 +24513,14 @@ function initSetupState2({
     headerOnRenderUpdater
   } = createBrains(debugId, !!wrapRowsHorizontally);
   const domRef = createRef();
+  const now = Date.now();
   return {
     debugWarnings: /* @__PURE__ */ new Map(),
     renderer,
     onRenderUpdater,
     headerRenderer,
     headerOnRenderUpdater,
+    updatedAt: now,
     devToolsDetected: !!globalThis.__INFINITE_TABLE_DEVTOOLS_HOOK__,
     propsCache: /* @__PURE__ */ new Map([]),
     lastRowToCollapseRef: { current: null },
@@ -24417,6 +24807,7 @@ var mapPropsToState = (params) => {
   }
   const isRowDetailEnabled = !rowDetailRenderer ? false : props.isRowDetailEnabled || true;
   let result = {
+    updatedAt: Date.now(),
     isTree: parentState.isTree,
     rowDetailRenderer,
     rowDetailState,
@@ -25637,7 +26028,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.4.1"
+      version: "7.5.0-canary.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -29886,7 +30277,7 @@ var InfiniteTableDetailRow = React73.memo(
 var SCROLL_BOTTOM_OFFSET = 1;
 function useCellRendering(param) {
   const { computed, bodySize, imperativeApi } = param;
-  const { actions, state, getState } = useInfiniteTable();
+  const { actions, state, getState, getComputed, getDataSourceMasterContext } = useInfiniteTable();
   const {
     computedPinnedStartColumns,
     computedPinnedEndColumns,
@@ -29905,7 +30296,13 @@ function useCellRendering(param) {
     componentActions: dataSourceActions,
     api: dataSourceApi
   } = useDataSourceContextValue();
-  const { dataArray, isNodeReadOnly: isNodeReadOnly2 } = dataSourceState;
+  const {
+    dataArray,
+    rowInfoStore,
+    selectionMode,
+    cellSelection,
+    isNodeReadOnly: isNodeReadOnly2
+  } = dataSourceState;
   const getData = useLatest(dataArray);
   const {
     rowHeight,
@@ -29928,7 +30325,9 @@ function useCellRendering(param) {
     onScrollStop,
     scrollToBottomOffset,
     wrapRowsHorizontally,
-    ready
+    updatedAt: componentStateUpdatedAt,
+    ready,
+    editingCell
   } = state;
   const repaintId = dataSourceState.updatedAt;
   useYourBrain({
@@ -30011,6 +30410,13 @@ function useCellRendering(param) {
   useEffect38(() => {
     rerender();
   }, [dataSourceState]);
+  const dataSourceStatePartialForCell = useMemo17(() => {
+    return {
+      isNodeReadOnly: isNodeReadOnly2,
+      selectionMode,
+      cellSelection
+    };
+  }, [isNodeReadOnly2, selectionMode, cellSelection]);
   const renderCell = useCallback31(
     (params) => {
       const {
@@ -30041,6 +30447,10 @@ function useCellRendering(param) {
       }
       const rowIndexInHorizontalLayoutPage = wrapRowsHorizontally ? brain.getRowIndexInPage(rowIndex) : null;
       const horizontalLayoutPageIndex = wrapRowsHorizontally ? brain.getPageIndexForRow(rowIndex) : null;
+      const inEditMode = imperativeApi.isEditorVisibleForCell({
+        rowIndex,
+        columnId: column.id
+      });
       const cellProps = {
         getData,
         virtualized: true,
@@ -30049,7 +30459,7 @@ function useCellRendering(param) {
         rowIndexInHorizontalLayoutPage,
         horizontalLayoutPageIndex,
         rowIndex,
-        rowInfo,
+        rowInfoStore,
         hidden,
         toggleGroupRow,
         rowHeight: rowHeight2,
@@ -30066,7 +30476,21 @@ function useCellRendering(param) {
         rowStyle,
         rowClassName,
         cellStyle,
-        cellClassName
+        cellClassName,
+        // Whether this specific cell is in edit mode
+        // Passed as prop to trigger re-render when editing state changes
+        inEditMode,
+        // DataSource context values passed as props to avoid context re-renders
+        getDataSourceState,
+        dataSourceApi,
+        dataSourceActions,
+        // InfiniteTable context values passed as props to avoid context re-renders
+        getState,
+        imperativeApi,
+        componentActions: actions,
+        getComputed,
+        getDataSourceMasterContext,
+        dataSourceStatePartialForCell
       };
       return /* @__PURE__ */ React74.createElement(InfiniteTableColumnCell, { ...cellProps });
     },
@@ -30088,11 +30512,22 @@ function useCellRendering(param) {
       showZebraRows,
       brain,
       repaintId,
-      isNodeReadOnly2,
+      rowInfoStore,
       rowStyle,
       rowClassName,
       cellClassName,
-      cellStyle
+      cellStyle,
+      getDataSourceState,
+      dataSourceApi,
+      dataSourceActions,
+      getState,
+      imperativeApi,
+      actions,
+      getComputed,
+      getDataSourceMasterContext,
+      componentStateUpdatedAt,
+      editingCell,
+      dataSourceStatePartialForCell
     ]
   );
   const renderDetailRow = useMemo17(() => {
@@ -30439,7 +30874,7 @@ var InfiniteTableComponent = React78.memo(
       if (false) {
         globalThis.infiniteApi = context.api;
       }
-    }, [componentState.ready]);
+    }, [componentState.ready, context.api]);
     const debugId = useDebugMode();
     React78.useEffect(() => {
       if (masterContext) {