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

package/index.dev.js

@@ -1485,7 +1485,8 @@ var DevToolsTracks = {
       PrepareData: "Preparing data",
       ComputeSelectionCount: "Computing selection count",
       ComputeSelectionCountLazy: "Computing selection count (lazy)",
-      PrepareRowInfo: "Preparing row info array"
+      PrepareRowInfo: "Preparing row info array",
+      DiffRowInfoInStore: "setDataArray diffing in RowInfoStore"
     }
   },
   InfiniteTable: {
@@ -6254,16 +6255,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"]] });
@@ -6837,6 +6828,7 @@ var import_react17 = require("react");
 function InfiniteTableColumnEditor() {
   const { initialValue, setValue, confirmEdit, cancelEdit, readOnly } = useInfiniteColumnEditor();
   const domRef = (0, import_react17.useRef)(null);
+  const cancelledRef = (0, import_react17.useRef)(false);
   const refCallback = React28.useCallback((node) => {
     domRef.current = node;
     if (node) {
@@ -6848,18 +6840,24 @@ function InfiniteTableColumnEditor() {
     if (key === "Enter" || key === "Tab") {
       confirmEdit();
     } else if (key === "Escape") {
+      cancelledRef.current = true;
       cancelEdit();
     } else {
       event.stopPropagation();
     }
   }, []);
+  const onBlur = (0, import_react17.useCallback)(() => {
+    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,
@@ -6870,6 +6868,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);
@@ -6964,7 +6972,8 @@ function applyColumnStyle(existingStyle, columnStyle, param) {
 }
 function InfiniteTableColumnCellFn(props) {
   const {
-    rowInfo,
+    dataSourceStatePartialForCell,
+    rowInfoStore,
     rowStyle,
     rowClassName,
     rowIndexInHorizontalLayoutPage,
@@ -6986,8 +6995,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 = (0, import_react18.useSyncExternalStore)(
+    (0, import_react18.useCallback)(
+      (callback) => rowInfoStore.subscribeToRowIndex(rowIndex, callback),
+      [rowInfoStore, rowIndex]
+    ),
+    (0, import_react18.useCallback)(
+      () => rowInfoStore.getRowInfoAtIndex(rowIndex),
+      [rowInfoStore, rowIndex]
+    )
+  );
+  const isEmptyRowInfo = !rowInfoFromStore;
+  const isEmptyColumn = !column;
   const htmlElementRef = React29.useRef(null);
   const domRef = (0, import_react18.useCallback)(
     (node) => {
@@ -6998,23 +7029,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 = {
@@ -7099,7 +7132,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;
@@ -7458,6 +7491,9 @@ function InfiniteTableColumnCellFn(props) {
     renderChildren: (0, import_react18.useCallback)(() => 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
@@ -11441,6 +11477,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;
@@ -12130,8 +12174,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()) {
@@ -19823,6 +19871,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: [
@@ -20677,6 +20728,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) => {
@@ -20696,6 +21020,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,
@@ -20796,6 +21121,7 @@ var cleanupDataSource = (state) => {
   state.treeSelectionState?.destroy();
   state.idToPathMap.clear();
   state.idToIndexMap.clear();
+  state.rowInfoStore.clear();
 };
 var forwardProps3 = (setupState, props) => {
   return {
@@ -23351,7 +23677,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();
@@ -23359,7 +23687,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();
@@ -24234,12 +24564,14 @@ function initSetupState2({
     headerOnRenderUpdater
   } = createBrains(debugId, !!wrapRowsHorizontally);
   const domRef = (0, import_react42.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 },
@@ -24526,6 +24858,7 @@ var mapPropsToState = (params) => {
   }
   const isRowDetailEnabled = !rowDetailRenderer ? false : props.isRowDetailEnabled || true;
   let result = {
+    updatedAt: Date.now(),
     isTree: parentState.isTree,
     rowDetailRenderer,
     rowDetailState,
@@ -25746,7 +26079,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "7.4.2"
+      version: "7.5.0-canary.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -29985,7 +30318,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,
@@ -30004,7 +30337,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,
@@ -30027,7 +30366,9 @@ function useCellRendering(param) {
     onScrollStop,
     scrollToBottomOffset,
     wrapRowsHorizontally,
-    ready
+    updatedAt: componentStateUpdatedAt,
+    ready,
+    editingCell
   } = state;
   const repaintId = dataSourceState.updatedAt;
   useYourBrain({
@@ -30110,6 +30451,13 @@ function useCellRendering(param) {
   (0, import_react69.useEffect)(() => {
     rerender();
   }, [dataSourceState]);
+  const dataSourceStatePartialForCell = (0, import_react68.useMemo)(() => {
+    return {
+      isNodeReadOnly: isNodeReadOnly2,
+      selectionMode,
+      cellSelection
+    };
+  }, [isNodeReadOnly2, selectionMode, cellSelection]);
   const renderCell = (0, import_react69.useCallback)(
     (params) => {
       const {
@@ -30140,6 +30488,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,
@@ -30148,7 +30500,7 @@ function useCellRendering(param) {
         rowIndexInHorizontalLayoutPage,
         horizontalLayoutPageIndex,
         rowIndex,
-        rowInfo,
+        rowInfoStore,
         hidden,
         toggleGroupRow,
         rowHeight: rowHeight2,
@@ -30165,7 +30517,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 });
     },
@@ -30187,11 +30553,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 = (0, import_react68.useMemo)(() => {
@@ -30538,7 +30915,7 @@ var InfiniteTableComponent = React78.memo(
       if (false) {
         globalThis.infiniteApi = context.api;
       }
-    }, [componentState.ready]);
+    }, [componentState.ready, context.api]);
     const debugId = useDebugMode();
     React78.useEffect(() => {
       if (masterContext) {