Merge remote-tracking branch 'origin/master' into devtools

Author: radubrehar

examples/src/pages/tests/table/perf/default-horizontal-scrolling-2025-04-08_20:27:54.trace.json

@@ -25,7 +25,7 @@
   "bugs": {
     "url": "https://github.com/infinite-table/infinite-react/issues"
   },
-  "version": "6.2.10",
+  "version": "6.2.11",
   "main": "index.js",
   "module": "index.mjs",
   "typings": "index.d.ts",

source/package-lock.json

@@ -28,12 +28,12 @@ import { ActiveCellIndicator } from '../InfiniteTable/components/ActiveCellIndic
 import { join } from '../../utils/join';
 import { TableRenderCellFn, TableRenderDetailRowFn } from './rendererTypes';
 import { GridRenderer } from './ReactHeadlessTableRenderer';
-import { InternalVars } from '../InfiniteTable/internalVars.css';
-import { stripVar } from '../../utils/stripVar';
+// import { InternalVars } from '../InfiniteTable/internalVars.css';
+// import { stripVar } from '../../utils/stripVar';
 import { CELL_DETACHED_CLASSNAMES } from '../InfiniteTable/components/cellDetachedCls';
 
-const virtualScrollLeftOffset = stripVar(InternalVars.virtualScrollLeftOffset);
-const virtualScrollTopOffset = stripVar(InternalVars.virtualScrollTopOffset);
+// const virtualScrollLeftOffset = stripVar(InternalVars.virtualScrollLeftOffset);
+// const virtualScrollTopOffset = stripVar(InternalVars.virtualScrollTopOffset);
 
 export type HeadlessTableProps = {
   scrollerDOMRef?: MutableRefObject<HTMLElement | null>;
@@ -215,30 +215,33 @@ export function HeadlessTable(
 
   const updateDOMTransform = useCallback((scrollPos: ScrollPosition) => {
     requestAnimationFrame(() => {
-      const scrollVarHost = scrollVarHostRef?.current;
-
-      if (!scrollVarHost) {
-        if (!domRef.current) {
-          // we're in a raf, so the component might have been unmounted in the meantime
-          // so we protect against that
-          return;
-        }
-        domRef.current!.style.setProperty(
-          'transform',
-          `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`,
-        );
+      // const scrollVarHost = scrollVarHostRef?.current;
+
+      // if (!scrollVarHost) {
+      // seems like it's a lot less performant to scroll via CSS vars
+      // as STYLE RECALCULATION is a lot more expensive than using the transform property
+
+      if (!domRef.current) {
+        // we're in a raf, so the component might have been unmounted in the meantime
+        // so we protect against that
         return;
       }
-
-      scrollVarHost.style.setProperty(
-        virtualScrollLeftOffset,
-        `-${scrollPos.scrollLeft}px`,
+      domRef.current!.style.setProperty(
+        'transform',
+        `translate3d(${-scrollPos.scrollLeft}px, ${-scrollPos.scrollTop}px, 0px)`,
       );
+      return;
+      // }
 
-      scrollVarHost.style.setProperty(
-        virtualScrollTopOffset,
-        `-${scrollPos.scrollTop}px`,
-      );
+      // scrollVarHost.style.setProperty(
+      //   virtualScrollLeftOffset,
+      //   `-${scrollPos.scrollLeft}px`,
+      // );
+
+      // scrollVarHost.style.setProperty(
+      //   virtualScrollTopOffset,
+      //   `-${scrollPos.scrollTop}px`,
+      // );
     });
   }, []);
 

source/package.json

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useCallback, useRef } from 'react';
+import { useCallback, useEffect, useRef } from 'react';
 
 import { join } from '../../../../utils/join';
 import { RawTable } from '../../../HeadlessTable/RawTable';
@@ -18,6 +18,7 @@ import { HeaderClsRecipe } from './header.css';
 import { InfiniteTableHeaderCell } from './InfiniteTableHeaderCell';
 import { InfiniteTableHeaderGroup } from './InfiniteTableHeaderGroup';
 import type { InfiniteTableHeaderProps } from './InfiniteTableHeaderTypes';
+import type { ScrollPosition } from '../../../types/ScrollPosition';
 
 const { rootClassName } = internalProps;
 
@@ -52,6 +53,22 @@ function InfiniteTableHeaderFn<T>(
   const { computedColumnsMap } = computed;
 
   const domRef = useRef<HTMLDivElement | null>(null);
+  const updateDOMTransform = useCallback((scrollPosition: ScrollPosition) => {
+    if (domRef.current) {
+      domRef.current.style.transform = `translate3d(-${scrollPosition.scrollLeft}px, 0px, 0px)`;
+    }
+  }, []);
+
+  useEffect(() => {
+    const removeOnScroll = headerBrain.onScroll(updateDOMTransform);
+
+    // useful when the brain is changed - when toggling the value of wrapRowsHorizontally
+    updateDOMTransform(
+      headerBrain.getScrollPosition() || { scrollLeft: 0, scrollTop: 0 },
+    );
+
+    return removeOnScroll;
+  }, [headerBrain]);
 
   const domProps: React.HTMLProps<HTMLDivElement> = {
     ref: domRef,

source/src/components/HeadlessTable/index.tsx

@@ -22,7 +22,6 @@ import {
   CellClsVariants,
   ColumnCellVariantsObject,
 } from '../cell.css';
-import { InternalVars } from '../../internalVars.css';
 
 export { CellCls, CellClsVariants };
 
@@ -84,7 +83,8 @@ export const HeaderClsRecipe = recipe({
     {
       background: ThemeVars.components.Header.background,
       color: ThemeVars.components.Header.color,
-      transform: `translate3d(${InternalVars.virtualScrollLeftOffset}, 0px, 0px)`,
+      // transform: `translate3d(${InternalVars.virtualScrollLeftOffset}, 0px, 0px)`,
+      transform: `translate3d(0px, 0px, 0px)`,
     },
   ],
 

source/src/components/InfiniteTable/components/InfiniteTableHeader/InfiniteTableHeader.tsx

@@ -45,6 +45,6 @@ export const InternalVars = createThemeContract({
   scrollLeft: null,
   scrollTop: null,
 
-  virtualScrollLeftOffset: null,
-  virtualScrollTopOffset: null,
+  // virtualScrollLeftOffset: null,
+  // virtualScrollTopOffset: null,
 });

source/src/components/InfiniteTable/components/InfiniteTableHeader/header.css.ts

@@ -1,5 +1,4 @@
 import { style } from '@vanilla-extract/css';
-import { InternalVars } from '../InfiniteTable/internalVars.css';
 import { boxSizingBorderBox } from '../InfiniteTable/utilities.css';
 
 export const VirtualScrollContainerCls = style([
@@ -30,7 +29,8 @@ export const VirtualScrollContainerCls = style([
 export const VirtualScrollContainerChildToScrollCls = style({
   position: 'sticky',
   willChange: 'transform',
-  transform: `translate3d(${InternalVars.virtualScrollLeftOffset}, ${InternalVars.virtualScrollTopOffset}, 0px)`,
+  // transform: `translate3d(${InternalVars.virtualScrollLeftOffset}, ${InternalVars.virtualScrollTopOffset}, 0px)`,
+  transform: `translate3d(0px, 0px, 0px)`,
   contain: 'size layout', // TODO THIS MIGHT MISBEHAVE!!! CAN REMOVE IF IT INTRODUCES BROWSER REPAINT/RELAYOUT BUGS
   top: 0,
   left: 0,

source/src/components/InfiniteTable/internalVars.css.ts

@@ -3,6 +3,10 @@ title: Releases
 description: All releases | Infinite Table DataGrid for React
 ---
 
+## 6.2.11
+
+Improve performance on heavy scrolling by avoiding CSS vars for scroll pos.
+
 ## 6.2.10
 
 Recompute DataSource repeat wrapped group rows when `wrapRowsHorizontally` changes.

source/src/components/VirtualScrollContainer/VirtualScrollContainer.css.ts

@@ -1,6 +1,6 @@
 'use client';
 import cn from 'classnames';
-import { ReactNode } from '@mdx-js/react/lib';
+import { ReactNode } from 'react';
 import Link from 'next/link';
 
 import * as React from 'react';