Merge remote-tracking branch 'origin/main' into fix/tanstack-virtual-…

…3-beta.54
SAP · Aug 31, 2023 · a56f732 · a56f732
2 parents 25fbf9e + cca7428
commit a56f732
Show file tree

Hide file tree

Showing 12 changed files with 213 additions and 45 deletions.
diff --git a/examples/vite-ts/package.json b/examples/vite-ts/package.json
@@ -26,7 +26,7 @@
     "@typescript-eslint/parser": "^6.0.0",
     "@vitejs/plugin-react": "^4.0.0",
     "@ui5/webcomponents-cypress-commands": "^1.12.0",
-    "cypress": "^12.12.0",
+    "cypress": "^13.0.0",
     "eslint": "^8.38.0",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.0",

diff --git a/package.json b/package.json
@@ -63,7 +63,7 @@
     "@vitejs/plugin-react": "^4.0.0",
     "chromatic": "^6.5.3",
     "cssnano": "^6.0.1",
-    "cypress": "^12.1.0",
+    "cypress": "^13.0.0",
     "cypress-real-events": "^1.8.1",
     "dedent": "^1.0.0",
     "eslint": "^8.35.0",

diff --git a/packages/cypress-commands/package.json b/packages/cypress-commands/package.json
@@ -21,7 +21,7 @@
     "clean": "rimraf dist api.json"
   },
   "peerDependencies": {
-    "cypress": "^12.0.0"
+    "cypress": "^12.0.0 || ^13.0.0"
   },
   "publishConfig": {
     "access": "public"

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.cy.tsx
@@ -1,3 +1,4 @@
+import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 import { ThemingParameters } from '@ui5/webcomponents-react-base';
 import { useCallback, useEffect, useRef, useState } from 'react';
 import type { AnalyticalTablePropTypes } from '../..';
@@ -6,13 +7,13 @@ import {
   AnalyticalTableHooks,
   AnalyticalTableScaleWidthMode,
   AnalyticalTableSelectionBehavior,
+  AnalyticalTableSubComponentsBehavior,
   Button,
   Input
 } from '../..';
 import { AnalyticalTableSelectionMode, AnalyticalTableVisibleRowCountMode, ValueState } from '../../enums/index.js';
 import { useManualRowSelect } from './pluginHooks/useManualRowSelect';
 import { useRowDisableSelection } from './pluginHooks/useRowDisableSelection';
-import { cssVarToRgb, cypressPassThroughTestsFactory } from '@/cypress/support/utils';
 
 const generateMoreData = (count) => {
   return new Array(count).fill('').map((item, index) => ({
@@ -1476,6 +1477,13 @@ describe('AnalyticalTable', () => {
   });
 
   it('render subcomponents', () => {
+    const renderRowSubComponentLarge = (row) => {
+      return (
+        <div title="subcomponent" style={{ height: '200px', width: '100%', display: 'flex', alignItems: 'end' }}>
+          {`SubComponent ${row.index}`}
+        </div>
+      );
+    };
     const renderRowSubComponent = () => {
       return <div title="subcomponent">SubComponent</div>;
     };
@@ -1519,7 +1527,7 @@ describe('AnalyticalTable', () => {
         data={data}
         columns={columns}
         renderRowSubComponent={renderRowSubComponent}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
       />
     );
     cy.findAllByText('SubComponent').should('be.visible').should('have.length', 4);
@@ -1531,12 +1539,40 @@ describe('AnalyticalTable', () => {
         data={data}
         columns={columns}
         renderRowSubComponent={onlyFirstRowWithSubcomponent}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
       />
     );
     cy.findByText('SingleSubComponent').should('be.visible').should('have.length', 1);
     cy.findByTitle('Expand Node').should('not.exist');
     cy.findByTitle('Collapse Node').should('not.exist');
+
+    cy.mount(
+      <AnalyticalTable
+        data={data}
+        columns={columns}
+        renderRowSubComponent={renderRowSubComponentLarge}
+        visibleRows={3}
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
+      />
+    );
+
+    cy.findByText('SubComponent 1').should('exist').and('not.be.visible');
+    cy.findByTitle('Expand Node').should('not.exist');
+    cy.findByTitle('Collapse Node').should('not.exist');
+
+    cy.mount(
+      <AnalyticalTable
+        data={data}
+        columns={columns}
+        renderRowSubComponent={renderRowSubComponentLarge}
+        visibleRows={3}
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.IncludeHeight}
+      />
+    );
+    cy.findByText('SubComponent 1').should('be.visible');
+    cy.findByText('SubComponent 2').should('be.visible');
+    cy.findByTitle('Expand Node').should('not.exist');
+    cy.findByTitle('Collapse Node').should('not.exist');
   });
 
   it('pop-in columns', () => {
@@ -2300,7 +2336,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={generateMoreData(50)}
         columns={columns.slice(0, 2)}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
         renderRowSubComponent={renderSubComp}
       />
     );
@@ -2344,7 +2380,7 @@ describe('AnalyticalTable', () => {
       <AnalyticalTable
         data={generateMoreData(50)}
         columns={columns.slice(0, 2)}
-        alwaysShowSubComponent
+        subComponentsBehavior={AnalyticalTableSubComponentsBehavior.Visible}
         renderRowSubComponent={renderSubComp2}
       />
     );

diff --git a/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx b/packages/main/src/components/AnalyticalTable/AnalyticalTable.mdx
@@ -276,14 +276,14 @@ const InfiniteScrollTable = (props) => {
 ## AnalyticalTable with subcomponents
 
 Adding custom subcomponents below table rows can be achieved by setting the `renderRowSubComponent` prop.
-The prop expects a function with an optional parameter containing the `row` instance, there you can control which row should display subcomponents. If you want to display the subcomponent at the bottom of the row without an expandable container, you can set the `alwaysShowSubComponent` prop to `true`.
+The prop expects a function with an optional parameter containing the `row` instance, there you can control which row should display subcomponents. If you want to display the subcomponent at the bottom of the row without an expandable container, you can set `subComponentsBehavior` prop to `"Visible"` or to `"IncludeHeight"`. "Visible" simply adds the subcomponent to the row without including its height in the initial calculation of the table body, whereas "IncludeHeight" does.
 
 ### Notes
 
 - When `renderRowSubComponent` is set, `grouping` is disabled.
 - When rendering active elements inside the subcomponent, make sure to add the `data-subcomponent-active-element' attribute, otherwise focus behavior won't be consistent.
 
-<ControlsWithNote of={ComponentStories.Subcomponents} include={['alwaysShowSubComponent', 'renderRowSubComponent']} />
+<ControlsWithNote of={ComponentStories.Subcomponents} include={['renderRowSubComponent', 'subComponentsBehavior']} />
 
 <Canvas sourceState="none" of={ComponentStories.Subcomponents} />
 

diff --git a/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx b/packages/main/src/components/AnalyticalTable/TableBody/RowSubComponent.tsx
@@ -85,6 +85,19 @@ export const RowSubComponent = (props: RowSubComponent) => {
               });
             }
           }
+          // recalc if row id of row index has changed
+          if (
+            subComponentsHeight?.[virtualRow.index]?.rowId != null &&
+            subComponentsHeight?.[virtualRow.index]?.rowId !== row.id
+          ) {
+            dispatch({
+              type: 'SUB_COMPONENTS_HEIGHT',
+              payload: {
+                ...subComponentsHeight,
+                [virtualRow.index]: { subComponentHeight: subCompHeight, rowId: row.id }
+              }
+            });
+          }
         }
       });
     });

diff --git a/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx b/packages/main/src/components/AnalyticalTable/TableBody/VirtualTableBody.tsx
@@ -3,7 +3,7 @@ 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 { DivWithCustomScrollProp } 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';
@@ -25,13 +25,14 @@ interface VirtualTableBodyProps {
   renderRowSubComponent: (row?: Record<string, unknown>) => ReactNode;
   popInRowHeight: number;
   isRtl: boolean;
-  markNavigatedRow?: (row?: Record<string, unknown>) => boolean;
+  markNavigatedRow?: AnalyticalTablePropTypes['markNavigatedRow'];
   alwaysShowSubComponent: boolean;
   dispatch?: (e: { type: string; payload?: Record<string, unknown> }) => void;
   subComponentsHeight?: Record<string, { rowId: string; subComponentHeight?: number }>;
   columnVirtualizer: Virtualizer<DivWithCustomScrollProp, Element>;
   manualGroupBy?: boolean;
   subRowsKey: string;
+  scrollContainerRef?: MutableRefObject<HTMLDivElement>;
 }
 
 const measureElement = (el) => el.offsetHeight;
@@ -59,7 +60,8 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
     subComponentsHeight,
     columnVirtualizer,
     manualGroupBy,
-    subRowsKey
+    subRowsKey,
+    scrollContainerRef
   } = props;
 
   const itemCount = Math.max(minRows, rows.length);
@@ -104,6 +106,7 @@ export const VirtualTableBody = (props: VirtualTableBodyProps) => {
   );
   return (
     <div
+      ref={scrollContainerRef}
       data-component-name="AnalyticalTableBodyScrollableContainer"
       style={{
         position: 'relative',