Merge branch 'main' into fix/at-general-a11y

Author: Lukas742

packages/main/src/components/AnalyticalTable/AnalyticalTable.module.css

@@ -40,17 +40,6 @@
   font-size: var(--sapFontSize);
   font-weight: normal;
   background-color: var(--sapList_Background);
-
-  /*  bottom border*/
-  &::after {
-    content: '';
-    position: absolute;
-    inset-block-end: 0;
-    inset-inline-start: 0;
-    height: var(--_ui5wcr-AnalyticalTable-HeaderBorderWidth);
-    width: 100%;
-    background: var(--sapList_HeaderBorderColor);
-  }
 }
 
 .busyIndicator {
@@ -148,6 +137,17 @@
   overflow-y: auto;
   scrollbar-width: none;
   box-sizing: border-box;
+
+  /*  bottom border*/
+  &::after {
+    content: '';
+    position: absolute;
+    inset-block-end: 0;
+    inset-inline-start: 0;
+    height: var(--_ui5wcr-AnalyticalTable-HeaderBorderWidth);
+    width: 100%;
+    background: var(--sapList_HeaderBorderColor);
+  }
 }
 
 .alternateRowColor {

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

@@ -1,4 +1,4 @@
-import type { Virtualizer } from '@tanstack/react-virtual';
+import type { Virtualizer, VirtualItem } from '@tanstack/react-virtual';
 import { clsx } from 'clsx';
 import type { MutableRefObject } from 'react';
 import { useEffect, useMemo, useRef } from 'react';
@@ -39,6 +39,15 @@ interface VirtualTableBodyProps {
   rowVirtualizer: Virtualizer<DivWithCustomScrollProp, HTMLElement>;
 }
 
+function getDirectionStyles(isRtl: boolean, virtualColumn: VirtualItem) {
+  return isRtl
+    ? {
+        transform: `translateX(-${virtualColumn.start}px)`,
+        insertInlineStart: 0,
+      }
+    : { transform: `translateX(${virtualColumn.start}px)`, insertInlineStart: 0 };
+}
+
 export const VirtualTableBody = (props: VirtualTableBodyProps) => {
   const {
     alternateRowColor,
@@ -141,7 +150,13 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
                     data-empty-row-cell="true"
                     tabIndex={-1}
                     aria-hidden="true"
-                    style={{ ...emptyRowCellProps.style, cursor: 'unset', width: item.size }}
+                    style={{
+                      ...emptyRowCellProps.style,
+                      cursor: 'unset',
+                      position: 'absolute',
+                      width: `${item.size}px`,
+                      ...getDirectionStyles(isRtl, item),
+                    }}
                   />
                 );
               })}
@@ -205,12 +220,6 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
             )}
             {columnVirtualizer.getVirtualItems().map((virtualColumn, visibleColumnIndex) => {
               const cell = row.cells[virtualColumn.index];
-              const directionStyles = isRtl
-                ? {
-                    transform: `translateX(-${virtualColumn.start}px)`,
-                    insertInlineStart: 0,
-                  }
-                : { transform: `translateX(${virtualColumn.start}px)`, insertInlineStart: 0 };
               if (!cell) {
                 return null;
               }
@@ -227,7 +236,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
                   width: `${virtualColumn.size}px`,
                   top: 0,
                   height: `${rowHeight}px`,
-                  ...directionStyles,
+                  ...getDirectionStyles(isRtl, virtualColumn),
                 },
               };
               let contentToRender: RenderColumnTypes;