@infinite-table/infinite-react 8.0.0-canary.1 → 8.0.0

package/index.d.ts

@@ -1110,9 +1110,7 @@ type HorizontalLayoutColVisibilityOptions = {
 
 interface GridCellInterface<T_ADDITIONAL_CELL_INFO = any> {
     debugId: string;
-    update(content: Renderable, additionalInfo?: T_ADDITIONAL_CELL_INFO, scrollingObjectParam?: {
-        scrolling: boolean;
-    }): void;
+    update(content: Renderable, additionalInfo?: T_ADDITIONAL_CELL_INFO): void;
     getElement(): HTMLElement | null;
     getNode(): Renderable;
     destroy(): void;
@@ -1120,6 +1118,7 @@ interface GridCellInterface<T_ADDITIONAL_CELL_INFO = any> {
     getAdditionalInfo(): T_ADDITIONAL_CELL_INFO | undefined;
     isMounted(): boolean;
     ref: React.RefCallback<HTMLElement | undefined>;
+    setPendingAfterCommitWork(fn: (() => void) | null): void;
 }
 
 type CellPos = [number, number];
@@ -1140,10 +1139,7 @@ declare class GridCellManager<T_ADDITIONAL_CELL_INFO> extends Logger {
     private clearCellFromMatrix;
     private addCellToMatrix;
     private setCellPositionInMatrix;
-    renderNodeAtCell(node: Renderable, cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>, cellPos: CellPos, additionalInfo?: T_ADDITIONAL_CELL_INFO, scrollingObjectParam?: {
-        scrolling: boolean;
-        isHorizontalLayout: boolean;
-    }): GridCellInterface<T_ADDITIONAL_CELL_INFO>;
+    renderNodeAtCell(node: Renderable, cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>, cellPos: CellPos, additionalInfo?: T_ADDITIONAL_CELL_INFO): GridCellInterface<T_ADDITIONAL_CELL_INFO>;
     getCellPosition(cell: GridCellInterface<T_ADDITIONAL_CELL_INFO>): CellPos | null;
     getCellAt(cellPos: CellPos): GridCellInterface<T_ADDITIONAL_CELL_INFO> | undefined;
     /**
@@ -1326,6 +1322,7 @@ declare class GridRenderer extends Logger {
     };
     protected onMouseEnterNotBound: (event: React.MouseEvent<HTMLElement>) => void;
     protected onMouseLeaveNotBound: (event: React.MouseEvent<HTMLElement>) => void;
+    private getMatrixRowIndexFromElement;
     protected renderCellAt(rowIndex: number, colIndex: number, cell: GridCellInterface, renderCell: TableRenderCellFn): void;
     protected onMouseEnter: (rowIndex: number) => void;
     private addHoverClass;

package/index.dev.js

@@ -2117,7 +2117,7 @@ function InfiniteTableFooter(props) {
 // src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeaderCell.tsx
 var React51 = __toESM(require("react"));
 var import_react36 = require("react");
-var import_react_dom2 = require("react-dom");
+var import_react_dom = require("react-dom");
 
 // src/utils/keyMirror.ts
 function keyMirror(obj) {
@@ -8856,41 +8856,23 @@ var import_react28 = require("react");
 
 // src/components/RawList/AvoidReactDiff.tsx
 var React37 = __toESM(require("react"));
-var import_react_dom = require("react-dom");
 var import_react27 = require("react");
-var SHOULD_FLUSH_SYNC = () => false;
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = (0, import_react27.useState)(props.updater.get);
   const rafId = (0, import_react27.useRef)(null);
-  const shouldFlushSync = props.shouldFlushSync ?? SHOULD_FLUSH_SYNC;
+  const afterCommitRef = (0, import_react27.useRef)(props.afterCommit);
+  afterCommitRef.current = props.afterCommit;
   (0, import_react27.useLayoutEffect)(() => {
     function onChange(children2) {
-      let FLUSH_SYNC = shouldFlushSync();
       if (props.useraf) {
         if (rafId.current != null) {
           cancelAnimationFrame(rafId.current);
         }
         rafId.current = requestAnimationFrame(() => {
-          if (FLUSH_SYNC) {
-            queueMicrotask(() => {
-              (0, import_react_dom.flushSync)(() => {
-                setChildren(children2);
-              });
-            });
-          } else {
-            setChildren(children2);
-          }
+          setChildren(children2);
         });
       } else {
-        if (FLUSH_SYNC) {
-          queueMicrotask(() => {
-            (0, import_react_dom.flushSync)(() => {
-              setChildren(children2);
-            });
-          });
-        } else {
-          setChildren(children2);
-        }
+        setChildren(children2);
       }
     }
     const remove = props.updater.onChange(onChange);
@@ -8900,7 +8882,10 @@ function AvoidReactDiffFn(props) {
       }
       remove();
     };
-  }, [props.updater, props.useraf, shouldFlushSync]);
+  }, [props.updater, props.useraf]);
+  (0, import_react27.useLayoutEffect)(() => {
+    afterCommitRef.current?.();
+  });
   return children ?? null;
 }
 var AvoidReactDiff = React37.memo(AvoidReactDiffFn);
@@ -10229,10 +10214,14 @@ var GridCellForReact = class {
   constructor(debugId, cellInfo) {
     this.element = null;
     this.mounted = false;
-    this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT = false;
+    this.pendingAfterCommitWork = null;
     this.mountSubscription = buildSubscriptionCallback();
-    this.isUpdatedWhileScrolling = () => {
-      return this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT;
+    this.afterCommit = () => {
+      if (this.pendingAfterCommitWork) {
+        const work = this.pendingAfterCommitWork;
+        this.pendingAfterCommitWork = null;
+        work();
+      }
     };
     const count = CELL_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
     const key = `${debugId}:GridCellReact:${count}`;
@@ -10246,7 +10235,7 @@ var GridCellForReact = class {
         key,
         name: key,
         updater: this.updater,
-        shouldFlushSync: this.isUpdatedWhileScrolling
+        afterCommit: this.afterCommit
       }
     );
     this.ref = (htmlElement) => {
@@ -10259,6 +10248,9 @@ var GridCellForReact = class {
       }
     };
   }
+  setPendingAfterCommitWork(fn) {
+    this.pendingAfterCommitWork = fn;
+  }
   isMounted() {
     return this.mounted;
   }
@@ -10273,6 +10265,7 @@ var GridCellForReact = class {
   destroy() {
     this.mountSubscription.destroy();
     this.updater.destroy();
+    this.pendingAfterCommitWork = null;
     this.ref = emptyFn;
     this.element = null;
     this.node = null;
@@ -10280,8 +10273,7 @@ var GridCellForReact = class {
   getNode() {
     return this.node;
   }
-  update(content, additionalInfo, scrollingObjectParam) {
-    this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT = scrollingObjectParam ? scrollingObjectParam.scrolling && scrollingObjectParam.isHorizontalLayout : false;
+  update(content, additionalInfo) {
     this.updater(content);
     this.cellInfo = additionalInfo;
   }
@@ -10573,14 +10565,14 @@ var GridCellManager = class extends Logger {
     }
     this.addCellToMatrix(cell, cellPos);
   }
-  renderNodeAtCell(node, cell, cellPos, additionalInfo, scrollingObjectParam) {
+  renderNodeAtCell(node, cell, cellPos, additionalInfo) {
     const currentCellAtPos = this.getCellAt(cellPos);
     if (currentCellAtPos && currentCellAtPos !== cell) {
       this.detachCellAt(cellPos);
     }
     this.pool.attachCell(cell);
     this.setCellPositionInMatrix(cell, cellPos);
-    cell.update(node, additionalInfo, scrollingObjectParam);
+    cell.update(node, additionalInfo);
     return cell;
   }
   getCellPosition(cell) {
@@ -11163,10 +11155,6 @@ var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnOffsetAtIndexWhileReordering2 = stripVar(
   InternalVars.columnOffsetAtIndexWhileReordering
 );
-var SCROLLING_OBJECT_PARAM_FLYWEIGHT = {
-  scrolling: false,
-  isHorizontalLayout: false
-};
 var GridRenderer = class extends Logger {
   constructor(brain, debugId) {
     debugId = debugId || "ReactHeadlessTableRenderer";
@@ -11606,11 +11594,11 @@ var GridRenderer = class extends Logger {
       return covered ? [rowspanParent, colspanParent] : false;
     };
     this.onMouseEnterNotBound = (event) => {
-      const rowIndex = Number(event.currentTarget.dataset.rowIndex);
+      const rowIndex = this.getMatrixRowIndexFromElement(event.currentTarget);
       this.onMouseEnter(rowIndex);
     };
     this.onMouseLeaveNotBound = (event) => {
-      const rowIndex = Number(event.currentTarget.dataset.rowIndex);
+      const rowIndex = this.getMatrixRowIndexFromElement(event.currentTarget);
       this.onMouseLeave(rowIndex);
     };
     this.onMouseEnter = (rowIndex) => {
@@ -11697,28 +11685,35 @@ var GridRenderer = class extends Logger {
       }
       const { x, y } = itemPosition;
       if (itemElement) {
-        this.updateHoverClassNamesForRow(rowIndex);
-        const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
-        itemElement.dataset.rowIndex = realCoords.rowIndex;
-        itemElement.dataset.colIndex = realCoords.colIndex;
-        if (ITEM_POSITION_WITH_TRANSFORM) {
-          this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
-          itemElement.style.willChange = "transform";
-          itemElement.style.backfaceVisibility = "hidden";
-          const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          const zIndex2 = hidden ? "-1" : (
-            // #updatezindex - we need to allow elements use their own zIndex, so we
-            // resort to allowing them to have it as a data-z-index attribute
-            itemElement.dataset.zIndex || "auto"
-          );
-          if (itemElement.__zIndex !== zIndex2) {
-            itemElement.__zIndex = zIndex2;
-            itemElement.style.zIndex = zIndex2;
+        const applyPosition = () => {
+          this.updateHoverClassNamesForRow(rowIndex);
+          const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
+          itemElement.dataset.rowIndex = realCoords.rowIndex;
+          itemElement.dataset.colIndex = realCoords.colIndex;
+          if (ITEM_POSITION_WITH_TRANSFORM) {
+            this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
+            itemElement.style.willChange = "transform";
+            itemElement.style.backfaceVisibility = "hidden";
+            const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
+            const zIndex2 = hidden ? "-1" : (
+              // #updatezindex - we need to allow elements use their own zIndex, so we
+              // resort to allowing them to have it as a data-z-index attribute
+              itemElement.dataset.zIndex || "auto"
+            );
+            if (itemElement.__zIndex !== zIndex2) {
+              itemElement.__zIndex = zIndex2;
+              itemElement.style.zIndex = zIndex2;
+            }
+          } else {
+            itemElement.style.display = "";
+            itemElement.style.left = `${x}px`;
+            itemElement.style.top = `${y}px`;
           }
+        };
+        if (this.scrolling && this.brain.isHorizontalLayoutBrain) {
+          cell.setPendingAfterCommitWork(applyPosition);
         } else {
-          itemElement.style.display = "";
-          itemElement.style.left = `${x}px`;
-          itemElement.style.top = `${y}px`;
+          applyPosition();
         }
       }
     };
@@ -12273,6 +12268,13 @@ var GridRenderer = class extends Logger {
       colIndex
     };
   }
+  getMatrixRowIndexFromElement(element) {
+    const renderedRowIndex = Number(element.dataset.rowIndex);
+    if (this.brain.isHorizontalLayoutBrain) {
+      return this.brain.getRowIndexInPage(renderedRowIndex);
+    }
+    return renderedRowIndex;
+  }
   renderCellAt(rowIndex, colIndex, cell, renderCell) {
     if (this.destroyed) {
       return;
@@ -12334,14 +12336,11 @@ var GridRenderer = class extends Logger {
       }
       return;
     }
-    SCROLLING_OBJECT_PARAM_FLYWEIGHT.scrolling = this.scrolling;
-    SCROLLING_OBJECT_PARAM_FLYWEIGHT.isHorizontalLayout = isHorizontalLayout;
     this.cellManager.renderNodeAtCell(
       renderedNode,
       cell,
       [rowIndex, colIndex],
-      cellAdditionalInfo,
-      SCROLLING_OBJECT_PARAM_FLYWEIGHT
+      cellAdditionalInfo
     );
     this.updateElementPosition(cell, { hidden, rowspan, colspan });
     return;
@@ -13980,7 +13979,7 @@ function InfiniteTableHeaderCellFn(props) {
       ),
       currentHeader
     );
-    draggingProxy = (0, import_react_dom2.createPortal)(draggingProxy, portalDOMRef.current);
+    draggingProxy = (0, import_react_dom.createPortal)(draggingProxy, portalDOMRef.current);
   }
   return /* @__PURE__ */ React51.createElement(ContextProvider, { value: renderParam }, /* @__PURE__ */ React51.createElement(
     InfiniteTableCell,
@@ -26433,7 +26432,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "8.0.0-canary.1"
+      version: "8.0.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;
@@ -27298,7 +27297,7 @@ var import_react59 = require("react");
 // src/components/hooks/useOverlay/index.tsx
 var React57 = __toESM(require("react"));
 var import_react55 = require("react");
-var import_react_dom3 = require("react-dom");
+var import_react_dom2 = require("react-dom");
 
 // src/utils/pageGeometry/alignment/index.ts
 function isHTMLElement(v) {
@@ -27550,7 +27549,7 @@ function useOverlayPortal(content, portalContainer) {
     }
     getContainer();
   }, [portalContainer]);
-  return portalContainer ? container ? (0, import_react_dom3.createPortal)(content, container) : (
+  return portalContainer ? container ? (0, import_react_dom2.createPortal)(content, container) : (
     // we're probably still fetching the container
     /* @__PURE__ */ React57.createElement(React57.Fragment, null)
   ) : portalContainer === null || portalContainer === false ? content : /* @__PURE__ */ React57.createElement(DefaultOverlayPortal, null, content);
@@ -32265,7 +32264,7 @@ var FlashingColumnCell = createFlashingColumnCellComponent();
 // src/components/HeadlessTable/MatrixDebugger.tsx
 var React82 = __toESM(require("react"));
 var import_react77 = require("react");
-var import_react_dom4 = require("react-dom");
+var import_react_dom3 = require("react-dom");
 function INTERNAL_MatrixDebugger(props) {
   const [getState, setGetState] = React82.useState(null);
   (0, import_react77.useEffect)(() => {
@@ -32305,7 +32304,7 @@ function MatrixDebuggerUI() {
   const columnsIndexes = cellManager.getColumnsWithCells();
   const domRef = (0, import_react77.useRef)(null);
   const displayTimeoutRef = (0, import_react77.useRef)(null);
-  return /* @__PURE__ */ React82.createElement("div", { style: { overflow: "auto" } }, (0, import_react_dom4.createPortal)(
+  return /* @__PURE__ */ React82.createElement("div", { style: { overflow: "auto" } }, (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ React82.createElement(
       "div",
       {

package/index.dev.mjs

@@ -8795,41 +8795,23 @@ import { useLayoutEffect as useLayoutEffect8, useMemo as useMemo6 } from "react"
 
 // src/components/RawList/AvoidReactDiff.tsx
 import * as React37 from "react";
-import { flushSync } from "react-dom";
 import { useLayoutEffect as useLayoutEffect7, useRef as useRef15, useState as useState12 } from "react";
-var SHOULD_FLUSH_SYNC = () => false;
 function AvoidReactDiffFn(props) {
   const [children, setChildren] = useState12(props.updater.get);
   const rafId = useRef15(null);
-  const shouldFlushSync = props.shouldFlushSync ?? SHOULD_FLUSH_SYNC;
+  const afterCommitRef = useRef15(props.afterCommit);
+  afterCommitRef.current = props.afterCommit;
   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);
-          }
+          setChildren(children2);
         });
       } else {
-        if (FLUSH_SYNC) {
-          queueMicrotask(() => {
-            flushSync(() => {
-              setChildren(children2);
-            });
-          });
-        } else {
-          setChildren(children2);
-        }
+        setChildren(children2);
       }
     }
     const remove = props.updater.onChange(onChange);
@@ -8839,7 +8821,10 @@ function AvoidReactDiffFn(props) {
       }
       remove();
     };
-  }, [props.updater, props.useraf, shouldFlushSync]);
+  }, [props.updater, props.useraf]);
+  useLayoutEffect7(() => {
+    afterCommitRef.current?.();
+  });
   return children ?? null;
 }
 var AvoidReactDiff = React37.memo(AvoidReactDiffFn);
@@ -10168,10 +10153,14 @@ var GridCellForReact = class {
   constructor(debugId, cellInfo) {
     this.element = null;
     this.mounted = false;
-    this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT = false;
+    this.pendingAfterCommitWork = null;
     this.mountSubscription = buildSubscriptionCallback();
-    this.isUpdatedWhileScrolling = () => {
-      return this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT;
+    this.afterCommit = () => {
+      if (this.pendingAfterCommitWork) {
+        const work = this.pendingAfterCommitWork;
+        this.pendingAfterCommitWork = null;
+        work();
+      }
     };
     const count = CELL_COUNT_BY_DEBUG_ID.get(debugId) ?? 0;
     const key = `${debugId}:GridCellReact:${count}`;
@@ -10185,7 +10174,7 @@ var GridCellForReact = class {
         key,
         name: key,
         updater: this.updater,
-        shouldFlushSync: this.isUpdatedWhileScrolling
+        afterCommit: this.afterCommit
       }
     );
     this.ref = (htmlElement) => {
@@ -10198,6 +10187,9 @@ var GridCellForReact = class {
       }
     };
   }
+  setPendingAfterCommitWork(fn) {
+    this.pendingAfterCommitWork = fn;
+  }
   isMounted() {
     return this.mounted;
   }
@@ -10212,6 +10204,7 @@ var GridCellForReact = class {
   destroy() {
     this.mountSubscription.destroy();
     this.updater.destroy();
+    this.pendingAfterCommitWork = null;
     this.ref = emptyFn;
     this.element = null;
     this.node = null;
@@ -10219,8 +10212,7 @@ var GridCellForReact = class {
   getNode() {
     return this.node;
   }
-  update(content, additionalInfo, scrollingObjectParam) {
-    this.IS_UPDATED_WHILE_SCROLLING_IN_HORIZONTAL_LAYOUT = scrollingObjectParam ? scrollingObjectParam.scrolling && scrollingObjectParam.isHorizontalLayout : false;
+  update(content, additionalInfo) {
     this.updater(content);
     this.cellInfo = additionalInfo;
   }
@@ -10512,14 +10504,14 @@ var GridCellManager = class extends Logger {
     }
     this.addCellToMatrix(cell, cellPos);
   }
-  renderNodeAtCell(node, cell, cellPos, additionalInfo, scrollingObjectParam) {
+  renderNodeAtCell(node, cell, cellPos, additionalInfo) {
     const currentCellAtPos = this.getCellAt(cellPos);
     if (currentCellAtPos && currentCellAtPos !== cell) {
       this.detachCellAt(cellPos);
     }
     this.pool.attachCell(cell);
     this.setCellPositionInMatrix(cell, cellPos);
-    cell.update(node, additionalInfo, scrollingObjectParam);
+    cell.update(node, additionalInfo);
     return cell;
   }
   getCellPosition(cell) {
@@ -11102,10 +11094,6 @@ var columnOffsetAtIndex2 = stripVar(InternalVars.columnOffsetAtIndex);
 var columnOffsetAtIndexWhileReordering2 = stripVar(
   InternalVars.columnOffsetAtIndexWhileReordering
 );
-var SCROLLING_OBJECT_PARAM_FLYWEIGHT = {
-  scrolling: false,
-  isHorizontalLayout: false
-};
 var GridRenderer = class extends Logger {
   constructor(brain, debugId) {
     debugId = debugId || "ReactHeadlessTableRenderer";
@@ -11545,11 +11533,11 @@ var GridRenderer = class extends Logger {
       return covered ? [rowspanParent, colspanParent] : false;
     };
     this.onMouseEnterNotBound = (event) => {
-      const rowIndex = Number(event.currentTarget.dataset.rowIndex);
+      const rowIndex = this.getMatrixRowIndexFromElement(event.currentTarget);
       this.onMouseEnter(rowIndex);
     };
     this.onMouseLeaveNotBound = (event) => {
-      const rowIndex = Number(event.currentTarget.dataset.rowIndex);
+      const rowIndex = this.getMatrixRowIndexFromElement(event.currentTarget);
       this.onMouseLeave(rowIndex);
     };
     this.onMouseEnter = (rowIndex) => {
@@ -11636,28 +11624,35 @@ var GridRenderer = class extends Logger {
       }
       const { x, y } = itemPosition;
       if (itemElement) {
-        this.updateHoverClassNamesForRow(rowIndex);
-        const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
-        itemElement.dataset.rowIndex = realCoords.rowIndex;
-        itemElement.dataset.colIndex = realCoords.colIndex;
-        if (ITEM_POSITION_WITH_TRANSFORM) {
-          this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
-          itemElement.style.willChange = "transform";
-          itemElement.style.backfaceVisibility = "hidden";
-          const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
-          const zIndex2 = hidden ? "-1" : (
-            // #updatezindex - we need to allow elements use their own zIndex, so we
-            // resort to allowing them to have it as a data-z-index attribute
-            itemElement.dataset.zIndex || "auto"
-          );
-          if (itemElement.__zIndex !== zIndex2) {
-            itemElement.__zIndex = zIndex2;
-            itemElement.style.zIndex = zIndex2;
+        const applyPosition = () => {
+          this.updateHoverClassNamesForRow(rowIndex);
+          const realCoords = this.getCellRealCoordinates(rowIndex, colIndex);
+          itemElement.dataset.rowIndex = realCoords.rowIndex;
+          itemElement.dataset.colIndex = realCoords.colIndex;
+          if (ITEM_POSITION_WITH_TRANSFORM) {
+            this.setTransform(itemElement, rowIndex, colIndex, { x, y }, null);
+            itemElement.style.willChange = "transform";
+            itemElement.style.backfaceVisibility = "hidden";
+            const hidden = options ? options.hidden : !!this.isCellCovered(rowIndex, colIndex);
+            const zIndex2 = hidden ? "-1" : (
+              // #updatezindex - we need to allow elements use their own zIndex, so we
+              // resort to allowing them to have it as a data-z-index attribute
+              itemElement.dataset.zIndex || "auto"
+            );
+            if (itemElement.__zIndex !== zIndex2) {
+              itemElement.__zIndex = zIndex2;
+              itemElement.style.zIndex = zIndex2;
+            }
+          } else {
+            itemElement.style.display = "";
+            itemElement.style.left = `${x}px`;
+            itemElement.style.top = `${y}px`;
           }
+        };
+        if (this.scrolling && this.brain.isHorizontalLayoutBrain) {
+          cell.setPendingAfterCommitWork(applyPosition);
         } else {
-          itemElement.style.display = "";
-          itemElement.style.left = `${x}px`;
-          itemElement.style.top = `${y}px`;
+          applyPosition();
         }
       }
     };
@@ -12212,6 +12207,13 @@ var GridRenderer = class extends Logger {
       colIndex
     };
   }
+  getMatrixRowIndexFromElement(element) {
+    const renderedRowIndex = Number(element.dataset.rowIndex);
+    if (this.brain.isHorizontalLayoutBrain) {
+      return this.brain.getRowIndexInPage(renderedRowIndex);
+    }
+    return renderedRowIndex;
+  }
   renderCellAt(rowIndex, colIndex, cell, renderCell) {
     if (this.destroyed) {
       return;
@@ -12273,14 +12275,11 @@ var GridRenderer = class extends Logger {
       }
       return;
     }
-    SCROLLING_OBJECT_PARAM_FLYWEIGHT.scrolling = this.scrolling;
-    SCROLLING_OBJECT_PARAM_FLYWEIGHT.isHorizontalLayout = isHorizontalLayout;
     this.cellManager.renderNodeAtCell(
       renderedNode,
       cell,
       [rowIndex, colIndex],
-      cellAdditionalInfo,
-      SCROLLING_OBJECT_PARAM_FLYWEIGHT
+      cellAdditionalInfo
     );
     this.updateElementPosition(cell, { hidden, rowspan, colspan });
     return;
@@ -26381,7 +26380,7 @@ var useLicense = (licenseKey = "") => {
     }
     let valid2 = isValidLicense(licenseKey, {
       publishedAt: 1624970570587,
-      version: "8.0.0-canary.1"
+      version: "8.0.0"
     });
     if (!licenseKey && !valid2 && isInsidePlayground) {
       return true;