fix(AnalyticalTable): update @tanstack/react-virtual to 3.0.0-beta.61 (#4899)

Co-authored-by: Lukas Harbarth <[email protected]>

Author: MarcusNotheis

packages/main/package.json

@@ -52,7 +52,7 @@
     "watch:css": "postcss --watch --dir ../../temp src/**/*.css"
   },
   "dependencies": {
-    "@tanstack/react-virtual": "3.0.0-beta.18",
+    "@tanstack/react-virtual": "3.0.0-beta.61",
     "@ui5/webcomponents-react-base": "workspace:~",
     "clsx": "2.0.0",
     "react-jss": "^10.10.0",

packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx

@@ -1884,12 +1884,14 @@ describe('AnalyticalTable', () => {
     });
     cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
     cy.findByText('X').trigger('keydown', {
-      key: 'Enter'
+      key: 'Enter',
+      force: true
     });
     cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
     cy.get('[data-component-name="AnalyticalTableBody"]').scrollTo('bottom');
     cy.findByText('X').trigger('keydown', {
-      key: 'Enter'
+      key: 'Enter',
+      force: true
     });
     cy.get('[data-component-name="AnalyticalTableBody"]').invoke('scrollTop').should('not.equal', 0);
   });
@@ -2294,7 +2296,7 @@ describe('AnalyticalTable', () => {
     // last currently rendered row
     cy.focused().should('have.attr', 'data-row-index', '22').should('have.attr', 'data-column-index', '0');
     cy.realPress('PageDown');
-    cy.focused().should('have.attr', 'data-row-index', '36').should('have.attr', 'data-column-index', '0');
+    cy.focused().should('have.attr', 'data-row-index', '37').should('have.attr', 'data-column-index', '0');
     cy.realPress('PageDown');
     cy.focused().should('have.attr', 'data-row-index', '50').should('have.attr', 'data-column-index', '0');
     cy.realPress('PageUp');

packages/main/src/components/AnalyticalTable/AnayticalTable.jss.ts

@@ -104,6 +104,7 @@ const styles = {
     overflowY: 'auto',
     scrollbarWidth: 'none',
     borderBlockEnd: `1px solid ${ThemingParameters.sapList_TableFooterBorder}`,
+    boxSizing: 'border-box',
     '-ms-overflow-style': 'none',
     '&::-webkit-scrollbar': {
       width: '0 !important',

packages/main/src/components/AnalyticalTable/ColumnHeader/ColumnHeaderContainer.tsx

@@ -1,4 +1,4 @@
-import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
+import type { Virtualizer } from '@tanstack/react-virtual';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import React, { forwardRef, Fragment } from 'react';
 import { createUseStyles } from 'react-jss';
@@ -23,20 +23,14 @@ const styles = {
 
 interface ColumnHeaderContainerProps {
   headerProps: Record<string, unknown>;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   headerGroup: Record<string, any>;
   onSort: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
   onGroupByChanged: (e: CustomEvent<{ column?: Record<string, unknown>; isGrouped?: boolean }>) => void;
-  onDragStart: any;
-  onDragOver: any;
-  onDrop: any;
-  onDragEnter: any;
-  onDragEnd: any;
-  dragOver: any;
   resizeInfo: Record<string, unknown>;
   isRtl: boolean;
   portalContainer: Element;
-  columnVirtualizer: Virtualizer<DivWithCustomScrollProp>;
-  scaleXFactor?: number;
+  columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   uniqueId: string;
   showVerticalEndBorder: boolean;
 }
@@ -49,17 +43,10 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
     headerGroup,
     onSort,
     onGroupByChanged,
-    onDragStart,
-    onDragOver,
-    onDrop,
-    onDragEnter,
-    onDragEnd,
-    dragOver,
     resizeInfo,
     isRtl,
     portalContainer,
     columnVirtualizer,
-    scaleXFactor,
     uniqueId,
     showVerticalEndBorder
   } = props;
@@ -73,7 +60,7 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
       ref={ref}
       data-component-name="AnalyticalTableHeaderRow"
     >
-      {columnVirtualizer.getVirtualItems().map((virtualColumn: VirtualItem<Record<string, unknown>>, index) => {
+      {columnVirtualizer.getVirtualItems().map((virtualColumn, index) => {
         const column = headerGroup.headers[virtualColumn.index];
         if (!column) {
           return null;
@@ -106,21 +93,14 @@ export const ColumnHeaderContainer = forwardRef<HTMLDivElement, ColumnHeaderCont
               id={`${uniqueId}${rest?.id ?? ''}`}
               columnId={rest.id}
               visibleColumnIndex={index}
-              columnIndex={virtualColumn.index}
               onSort={onSort}
               onGroupBy={onGroupByChanged}
-              onDragStart={onDragStart}
-              onDragOver={onDragOver}
-              onDrop={onDrop}
-              onDragEnter={onDragEnter}
-              onDragEnd={onDragEnd}
-              dragOver={column.id === dragOver}
               headerTooltip={column.headerTooltip}
               isDraggable={(column.canReorder || !column.disableDragAndDrop) && !resizeInfo.isResizingColumn}
               virtualColumn={virtualColumn}
+              columnVirtualizer={columnVirtualizer}
               isRtl={isRtl}
               portalContainer={portalContainer}
-              scaleXFactor={scaleXFactor}
             >
               {column.render('Header')}
             </ColumnHeader>

packages/main/src/components/AnalyticalTable/ColumnHeader/index.tsx

@@ -1,4 +1,4 @@
-import type { VirtualItem } from '@tanstack/react-virtual';
+import type { VirtualItem, Virtualizer } from '@tanstack/react-virtual';
 import iconFilter from '@ui5/webcomponents-icons/dist/filter.js';
 import iconGroup from '@ui5/webcomponents-icons/dist/group-2.js';
 import iconSortAscending from '@ui5/webcomponents-icons/dist/sort-ascending.js';
@@ -18,12 +18,12 @@ import { createUseStyles } from 'react-jss';
 import { CustomThemingParameters } from '../../../themes/CustomVariables.js';
 import { Icon } from '../../../webComponents/Icon/index.js';
 import { Text } from '../../Text/index.js';
+import type { DivWithCustomScrollProp } from '../index.js';
 import type { ColumnType } from '../types/ColumnType.js';
 import { ColumnHeaderModal } from './ColumnHeaderModal.js';
 
 export interface ColumnHeaderProps {
   visibleColumnIndex: number;
-  columnIndex: number;
   onSort?: (e: CustomEvent<{ column: unknown; sortDirection: string }>) => void;
   onGroupBy?: (e: CustomEvent<{ column: unknown; isGrouped: boolean }>) => void;
   onDragStart: DragEventHandler<HTMLDivElement>;
@@ -34,11 +34,11 @@ export interface ColumnHeaderProps {
   dragOver: boolean;
   isDraggable: boolean;
   headerTooltip: string;
-  virtualColumn: VirtualItem<Record<string, any>>;
+  virtualColumn: VirtualItem;
+  columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   isRtl: boolean;
   children: ReactNode | ReactNode[];
   portalContainer: Element;
-  scaleXFactor?: number;
   columnId?: string;
   showVerticalEndBorder: boolean;
 
@@ -135,20 +135,21 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
     dragOver,
     role,
     virtualColumn,
+    columnVirtualizer,
     isRtl,
-    columnIndex,
     visibleColumnIndex,
     onClick,
     onKeyDown,
     portalContainer,
-    scaleXFactor,
     isFiltered,
     title,
     'aria-label': ariaLabel,
     'aria-sort': ariaSort,
     showVerticalEndBorder
   } = props;
 
+  const columnIndex = virtualColumn.index;
+
   const [popoverOpen, setPopoverOpen] = useState(false);
   const columnHeaderRef = useRef<HTMLDivElement>(null);
 
@@ -227,16 +228,7 @@ export const ColumnHeader = (props: ColumnHeaderProps) => {
       }}
     >
       <div
-        ref={(node) => {
-          const clientRect = node?.getBoundingClientRect();
-          if (clientRect && scaleXFactor > 0) {
-            const scaledGetBoundingClientRect = () => ({ ...clientRect, width: clientRect.width / scaleXFactor });
-            const updatedNode = { ...node, getBoundingClientRect: scaledGetBoundingClientRect };
-            virtualColumn.measureElement(updatedNode);
-          } else {
-            virtualColumn.measureElement(node);
-          }
-        }}
+        ref={columnVirtualizer.measureElement}
         data-visible-column-index={visibleColumnIndex}
         data-visible-row-index={0}
         data-row-index={0}

packages/main/src/components/AnalyticalTable/TableBody/EmptyRow.tsx

@@ -7,7 +7,7 @@ export const EmptyRow = ({
   className,
   children
 }: {
-  virtualRow: VirtualItem<any>;
+  virtualRow: VirtualItem;
   className: string;
   children?: ReactNode;
 }) => {

packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx

@@ -18,7 +18,7 @@ const useStyles = createUseStyles(styles, { name: 'RowSubComponent' });
 
 interface RowSubComponent {
   subComponentsHeight: Record<string, { rowId: string; subComponentHeight?: number }>;
-  virtualRow: VirtualItem<Record<string, unknown>>;
+  virtualRow: VirtualItem;
   dispatch: (e: { type: string; payload?: Record<string, unknown> }) => void;
   row: Record<string, unknown>;
   rowHeight: number;

packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx

@@ -1,8 +1,9 @@
+import type { Virtualizer } from '@tanstack/react-virtual';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { clsx } from 'clsx';
 import type { MutableRefObject, ReactNode } from 'react';
 import React, { useCallback, useMemo, useRef } from 'react';
-import type { AnalyticalTablePropTypes } from '../index.js';
+import type { AnalyticalTablePropTypes, DivWithCustomScrollProp } from '../index.js';
 import type { ScrollToRefType } from '../interfaces.js';
 import { getSubRowsByString } from '../util/index.js';
 import { EmptyRow } from './EmptyRow.js';
@@ -28,13 +29,15 @@ interface VirtualTableBodyProps {
   alwaysShowSubComponent: boolean;
   dispatch?: (e: { type: string; payload?: Record<string, unknown> }) => void;
   subComponentsHeight?: Record<string, { rowId: string; subComponentHeight?: number }>;
-  columnVirtualizer: Record<string, any>;
+  columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   manualGroupBy?: boolean;
   subRowsKey: string;
   scrollContainerRef?: MutableRefObject<HTMLDivElement>;
 }
 
-const measureElement = (el) => el.offsetHeight;
+const measureElement = (el: HTMLElement) => {
+  return el.offsetHeight;
+};
 
 export const VirtualTableBody = (props: VirtualTableBodyProps) => {
   const {
@@ -85,7 +88,8 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
       [rowHeight, rows, renderRowSubComponent, alwaysShowSubComponent, subComponentsHeight]
     ),
     overscan,
-    measureElement
+    measureElement,
+    indexAttribute: 'data-virtual-row-index'
   });
   scrollToRef.current = {
     ...scrollToRef.current,
@@ -161,7 +165,10 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
           lastNonEmptyRow.current = row;
         }
         prepareRow(row);
-        const rowProps = row.getRowProps({ 'aria-rowindex': virtualRow.index });
+        const rowProps = row.getRowProps({
+          'aria-rowindex': virtualRow.index + 1,
+          'data-virtual-row-index': virtualRow.index
+        });
         const isNavigatedCell = markNavigatedRow(row);
         const RowSubComponent = typeof renderRowSubComponent === 'function' ? renderRowSubComponent(row) : undefined;
 
@@ -182,21 +189,19 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
         ) {
           updatedHeight += subComponentsHeight?.[virtualRow.index]?.subComponentHeight ?? 0;
         }
+
         return (
           // eslint-disable-next-line react/jsx-key
           <div
             {...rowProps}
+            ref={rowVirtualizer.measureElement}
             style={{
               ...(rowProps.style ?? {}),
               transform: `translateY(${virtualRow.start}px)`,
               position: 'absolute',
               boxSizing: 'border-box',
               height: `${updatedHeight}px`
             }}
-            ref={(node) => {
-              virtualRow.measureElement(node);
-            }}
-            aria-rowindex={rowProps['aria-rowindex'] + 1}
           >
             {RowSubComponent && (row.isExpanded || alwaysShowSubComponent) && (
               <SubComponent
@@ -217,9 +222,9 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
               const directionStyles = isRtl
                 ? {
                     transform: `translateX(-${virtualColumn.start}px)`,
-                    right: 0
+                    insertInlineStart: 0
                   }
-                : { transform: `translateX(${virtualColumn.start}px)`, left: 0 };
+                : { transform: `translateX(${virtualColumn.start}px)`, insertInlineStart: 0 };
               if (!cell) {
                 return null;
               }