feat(AnalyticalTable): fire onLoadMore when resizing in Interactive visibleRowCountMode (#5203)

Closes #5201 

This PR also moves the `index.tsx` types of the AnalyticalTable into a
separate folder to prevent circular imports.

Author: Lukas742

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

@@ -2,7 +2,7 @@ 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';
-import type { DivWithCustomScrollProp } from '../index.js';
+import type { DivWithCustomScrollProp } from '../types/index.js';
 import { ColumnHeader } from './index.js';
 
 const styles = {

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

@@ -18,8 +18,8 @@ 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 type { DivWithCustomScrollProp } from '../types/index.js';
 import { ColumnHeaderModal } from './ColumnHeaderModal.js';
 
 export interface ColumnHeaderProps {

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

@@ -3,8 +3,8 @@ 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, DivWithCustomScrollProp } from '../index.js';
 import type { ScrollToRefType } from '../interfaces.js';
+import type { AnalyticalTablePropTypes, DivWithCustomScrollProp } from '../types/index.js';
 import { getSubRowsByString } from '../util/index.js';
 import { EmptyRow } from './EmptyRow.js';
 import { RowSubComponent as SubComponent } from './RowSubComponent.js';

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

@@ -1,7 +1,7 @@
 import { enrichEventWithDetails } from '@ui5/webcomponents-react-base';
 import type { MutableRefObject } from 'react';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import type { AnalyticalTablePropTypes } from '../index.js';
+import type { AnalyticalTablePropTypes } from '../types/index.js';
 
 interface VirtualTableBodyContainerProps {
   tableBodyHeight: number;
@@ -81,13 +81,7 @@ export const VirtualTableBodyContainer = (props: VirtualTableBodyContainerProps)
           (popInRowHeight === internalRowHeight ? visibleRows : Math.floor(tableBodyHeight / popInRowHeight));
         if (rows.length - currentLastRow < infiniteScrollThreshold) {
           if (!firedInfiniteLoadEvents.current.has(rows.length)) {
-            const rootNodes = rows.filter((row) => row.depth === 0);
-            onLoadMore(
-              enrichEventWithDetails(event, {
-                rowCount: rootNodes.length,
-                totalRowCount: rows.length
-              })
-            );
+            onLoadMore(event);
           }
           firedInfiniteLoadEvents.current.add(rows.length);
         }

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

@@ -46,6 +46,9 @@ interface VerticalResizerProps {
   hasPopInColumns: boolean;
   popInRowHeight: number;
   portalContainer: Element;
+  rowsLength: number;
+  visibleRows: number;
+  handleOnLoadMore: (e: Event) => void;
 }
 
 const isTouchEvent = (e, touchEvent) => {
@@ -63,7 +66,10 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     internalRowHeight,
     hasPopInColumns,
     popInRowHeight,
-    portalContainer
+    portalContainer,
+    rowsLength,
+    visibleRows,
+    handleOnLoadMore
   } = props;
   const classes = useStyles();
   const startY = useRef(null);
@@ -156,6 +162,14 @@ export const VerticalResizer = (props: VerticalResizerProps) => {
     };
   }, []);
 
+  const isInitial = useRef(true);
+  useEffect(() => {
+    if (!isInitial.current && rowsLength <= visibleRows) {
+      handleOnLoadMore({ type: 'tableGrow' } as Event);
+    }
+    isInitial.current = false;
+  }, [rowsLength, visibleRows]);
+
   const canRenderPortal = useCanRenderPortal();
   if (!canRenderPortal) {
     return null;

packages/main/src/components/AnalyticalTable/hooks/useDynamicColumnWidths.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { AnalyticalTableScaleWidthMode } from '../../../enums/index.js';
 import { DEFAULT_COLUMN_WIDTH } from '../defaults/Column/index.js';
-import type { AnalyticalTableColumnDefinition } from '../index.js';
+import type { AnalyticalTableColumnDefinition } from '../types/index.js';
 
 const ROW_SAMPLE_SIZE = 20;
 const MAX_WIDTH = 700;