Rework cascade internal store initialization to be data-driven from the provider

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/data_cascade_header/cascade_header.test.tsx

@@ -15,7 +15,11 @@ import { CascadeHeaderPrimitive } from './cascade_header';
 describe('CascadeHeaderPrimitive', () => {
   it('renders the table title with the default group selector when the `tableTitleSlot` props is provided', () => {
     render(
-      <DataCascadeProvider cascadeGroups={['group1', 'group2']} initialGroupColumn={['group1']}>
+      <DataCascadeProvider
+        data={[]}
+        cascadeGroups={['group1', 'group2']}
+        initialGroupColumn={['group1']}
+      >
         <CascadeHeaderPrimitive
           id="test-id"
           tableInstance={null as any} // Ignored in test
@@ -30,7 +34,11 @@ describe('CascadeHeaderPrimitive', () => {
 
   it('renders the custom table header when the `customTableHeader` prop is provided', () => {
     render(
-      <DataCascadeProvider cascadeGroups={['group1', 'group2']} initialGroupColumn={['group1']}>
+      <DataCascadeProvider
+        data={[]}
+        cascadeGroups={['group1', 'group2']}
+        initialGroupColumn={['group1']}
+      >
         <CascadeHeaderPrimitive
           id="test-id"
           tableInstance={null as any} // Ignored in test

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/data_cascade_impl.tsx

@@ -53,7 +53,6 @@ export const DataCascadeRow = <G extends GroupNode, L extends LeafNode>(
 };
 
 export function DataCascadeImpl<G extends GroupNode, L extends LeafNode>({
-  data,
   onCascadeGroupingChange,
   size = 'm',
   tableTitleSlot: TableTitleSlot,
@@ -128,7 +127,6 @@ export function DataCascadeImpl<G extends GroupNode, L extends LeafNode>({
   );
 
   const { headerColumns, rows } = useCascadeTable<G, L>({
-    initialData: data,
     enableRowSelection,
     allowMultipleRowToggle,
     header: cascadeHeaderElement,

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/data_cascade_row/components/cascade_row_header.test.tsx

@@ -40,7 +40,11 @@ describe('CascadeRowHeaderPrimitive', () => {
     ...overrides
   }: Partial<ComponentProps<typeof CascadeRowHeaderPrimitive>> = {}) => {
     return render(
-      <DataCascadeProvider cascadeGroups={cascadeGroups} initialGroupColumn={initialGroupColumn}>
+      <DataCascadeProvider
+        data={[]}
+        cascadeGroups={cascadeGroups}
+        initialGroupColumn={initialGroupColumn}
+      >
         <CascadeRowHeaderPrimitive {...defaultProps} {...overrides} />
       </DataCascadeProvider>
     );

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/data_cascade_row_cell/cascade_row_cell.test.tsx

@@ -31,7 +31,11 @@ const renderComponent = ({
     'cascadeGroups' | 'initialGroupColumn'
   >) => {
   return render(
-    <DataCascadeProvider cascadeGroups={cascadeGroups} initialGroupColumn={initialGroupColumn}>
+    <DataCascadeProvider
+      data={[]}
+      cascadeGroups={cascadeGroups}
+      initialGroupColumn={initialGroupColumn}
+    >
       {/* @ts-expect-error -- we don't need to provide all the props */}
       <CascadeRowCellPrimitive
         size="m"

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/data_cascade_impl/types.ts

@@ -237,10 +237,6 @@ export interface CascadeHeaderPrimitiveProps<G extends GroupNode> {
 interface DataCascadeImplBaseProps<G extends GroupNode, L extends LeafNode>
   extends Pick<CascadeVirtualizerProps<G>, 'overscan'>,
     Pick<CascadeRowPrimitiveProps<G, L>, 'enableRowSelection'> {
-  /**
-   * The data to be displayed in the cascade. It should be an array of group nodes.
-   */
-  data: G[];
   /**
    * Callback function that is called when the group by selection changes. Only required if component is not used in a controlled manner
    */

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/components/index.tsx

@@ -68,7 +68,6 @@ export const DataCascade = forwardRef(function DataCascadeWithProvider<
       enableStickyGroupHeader,
       allowMultipleRowToggle,
       enableRowSelection,
-      data,
       overscan,
       children,
       cascadeRef: ref,
@@ -81,7 +80,6 @@ export const DataCascade = forwardRef(function DataCascadeWithProvider<
     allowMultipleRowToggle,
     children,
     customTableHeader,
-    data,
     enableRowSelection,
     overscan,
     onCascadeGroupingChange,
@@ -97,6 +95,7 @@ export const DataCascade = forwardRef(function DataCascadeWithProvider<
         cascadeGroups={cascadeGroups}
         initialGroupColumn={initialGroupColumn}
         initialTableState={initialTableStateRef.current}
+        data={data as G[]}
       >
         <DataCascadeImpl<G, L>
           {...cascadeImplProps}
@@ -105,6 +104,6 @@ export const DataCascade = forwardRef(function DataCascadeWithProvider<
         />
       </DataCascadeProvider>
     ),
-    [cascadeGroups, cascadeImplProps, initialGroupColumn]
+    [cascadeGroups, cascadeImplProps, data, initialGroupColumn]
   );
 }) as DataCascadeComponent;

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/lib/core/api/index.test.tsx

@@ -23,7 +23,9 @@ describe('useExposePublicApi', () => {
       () => useExposePublicApi(mockRefObject, { rows: [], enableStickyGroupHeader: false }),
       {
         wrapper: ({ children }) => (
-          <DataCascadeProvider cascadeGroups={[]}>{children}</DataCascadeProvider>
+          <DataCascadeProvider data={[]} cascadeGroups={[]}>
+            {children}
+          </DataCascadeProvider>
         ),
       }
     );
@@ -43,7 +45,9 @@ describe('useExposePublicApi', () => {
         () => useExposePublicApi(mockRefObject, { rows: [], enableStickyGroupHeader: false }),
         {
           wrapper: ({ children }) => (
-            <DataCascadeProvider cascadeGroups={[]}>{children}</DataCascadeProvider>
+            <DataCascadeProvider data={[]} cascadeGroups={[]}>
+              {children}
+            </DataCascadeProvider>
           ),
         }
       );
@@ -75,7 +79,9 @@ describe('useExposePublicApi', () => {
         () => useExposePublicApi(mockRefObject, { rows: [], enableStickyGroupHeader: false }),
         {
           wrapper: ({ children }) => (
-            <DataCascadeProvider cascadeGroups={[]}>{children}</DataCascadeProvider>
+            <DataCascadeProvider data={[]} cascadeGroups={[]}>
+              {children}
+            </DataCascadeProvider>
           ),
         }
       );
@@ -133,7 +139,9 @@ describe('useExposePublicApi', () => {
         () => useExposePublicApi(mockRefObject, { rows: [], enableStickyGroupHeader: false }),
         {
           wrapper: ({ children }) => (
-            <DataCascadeProvider cascadeGroups={[]}>{children}</DataCascadeProvider>
+            <DataCascadeProvider data={[]} cascadeGroups={[]}>
+              {children}
+            </DataCascadeProvider>
           ),
         }
       );

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/lib/core/table/index.test.tsx

@@ -17,9 +17,10 @@ import { useCascadeTable, useAdaptedTableRows, type TableProps } from '.';
 describe('table', () => {
   const createHookWrapper = ({
     children,
+    data = [],
     helper: Helper = React.Fragment,
-  }: PropsWithChildren<{ helper?: React.FC<PropsWithChildren> }>) => (
-    <DataCascadeProvider cascadeGroups={[]}>
+  }: PropsWithChildren<{ data?: GroupNode[]; helper?: React.FC<PropsWithChildren> }>) => (
+    <DataCascadeProvider data={data} cascadeGroups={[]}>
       <Helper>{children}</Helper>
     </DataCascadeProvider>
   );
@@ -38,7 +39,6 @@ describe('table', () => {
       const { result } = renderHook(useCascadeTable, {
         wrapper: createHookWrapper,
         initialProps: {
-          initialData: [],
           allowMultipleRowToggle: false,
           enableRowSelection: false,
           header: jest.fn(),
@@ -50,7 +50,7 @@ describe('table', () => {
       expect(result.current).toHaveProperty('rows');
     });
 
-    it('table rows value and length is derived from the `initialData` prop', () => {
+    it('table rows value and length is derived from the provider data', () => {
       const data = Array.from(new Array(10)).map((_, index) => ({
         id: String(index),
         name: `Item ${index}`,
@@ -60,10 +60,10 @@ describe('table', () => {
         wrapper: ({ children }) =>
           createHookWrapper({
             children,
+            data,
             helper: TestHelper,
           }),
         initialProps: {
-          initialData: data,
           allowMultipleRowToggle: false,
           enableRowSelection: false,
           header: jest.fn(),
@@ -85,10 +85,10 @@ describe('table', () => {
           wrapper: ({ children }) =>
             createHookWrapper({
               children,
+              data,
               helper: TestHelper,
             }),
           initialProps: {
-            initialData: data,
             allowMultipleRowToggle: true,
             enableRowSelection: false,
             header: jest.fn(),
@@ -116,10 +116,10 @@ describe('table', () => {
           wrapper: ({ children }) =>
             createHookWrapper({
               children,
+              data,
               helper: TestHelper,
             }),
           initialProps: {
-            initialData: data,
             allowMultipleRowToggle: false,
             enableRowSelection: false,
             header: jest.fn(),
@@ -153,10 +153,10 @@ describe('table', () => {
           wrapper: ({ children }) =>
             createHookWrapper({
               children,
+              data,
               helper: TestHelper,
             }),
           initialProps: {
-            initialData: data,
             allowMultipleRowToggle: false,
             enableRowSelection: false,
             header: jest.fn(),

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/lib/core/table/index.tsx

@@ -7,7 +7,7 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import React, { type FC, useMemo, useEffect } from 'react';
+import React, { type FC, useCallback, useMemo, useRef } from 'react';
 import {
   createColumnHelper,
   getCoreRowModel,
@@ -43,7 +43,6 @@ export interface TableProps<G, L>
     | 'onRowSelectionChange'
     | 'getRowCanExpand'
   > {
-  initialData: G[];
   allowMultipleRowToggle: boolean;
   header: FC<{ table: Table<G> }>;
   rowCell: FC<CellContext<G, L>>;
@@ -54,40 +53,39 @@ export const useCascadeTable = <G extends GroupNode, L extends LeafNode>({
   enableRowSelection,
   header: Header,
   rowCell: RowCell,
-  initialData,
   ...rest
 }: TableProps<G, L>) => {
-  const columnHelper = createColumnHelper<G>();
+  const columnHelper = useMemo(() => createColumnHelper<G>(), []);
   const actions = useDataCascadeActions<G, L>();
   const state = useDataCascadeState<G, L>();
+  const tableRef = useRef<ReturnType<typeof useReactTable<G>> | null>(null);
 
-  useEffect(() => {
-    actions.setInitialState(initialData);
-  }, [initialData, actions]);
+  const coreRowModel = useMemo(() => getCoreRowModel<G>(), []);
+  const expandedRowModel = useMemo(() => getExpandedRowModel<G>(), []);
 
-  const table = useReactTable<G>({
-    ...rest,
-    data: state.groupNodes,
-    state: state.table,
-    columns: [
+  const columns = useMemo(
+    () => [
       columnHelper.display({
         id: 'cascade',
         header: Header,
-        // type cast is needed here to satisfy the generic CellContext type for column display
         cell: RowCell as FC<CellContext<G, unknown>>,
       }),
     ],
-    enableRowSelection,
-    getCoreRowModel: getCoreRowModel(),
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand: () => true,
-    onRowSelectionChange: (updater) => {
+    [columnHelper, Header, RowCell]
+  );
+
+  const onRowSelectionChange = useCallback<NonNullable<TableOptions<G>['onRowSelectionChange']>>(
+    (updater) => {
       const proposedSelectedState =
         typeof updater === 'function' ? updater(state.table.rowSelection) : updater;
 
       actions.setSelectedRows(proposedSelectedState);
     },
-    onExpandedChange: (updater) => {
+    [actions, state.table.rowSelection]
+  );
+
+  const onExpandedChangeHandler = useCallback<NonNullable<TableOptions<G>['onExpandedChange']>>(
+    (updater) => {
       const proposedExpandedState =
         typeof updater === 'function' ? updater(state.table.expanded) : updater;
 
@@ -106,7 +104,7 @@ export const useCascadeTable = <G extends GroupNode, L extends LeafNode>({
 
       // Compute the new expanded rows, comparing the proposed expanded rows with the previous expanded rows
       for (const proposedRowId of proposedExpandedRows) {
-        const row = table.getRow(proposedRowId);
+        const row = tableRef.current?.getRow(proposedRowId);
 
         // special treatment for root rows
         if (!row?.parentId) {
@@ -121,7 +119,7 @@ export const useCascadeTable = <G extends GroupNode, L extends LeafNode>({
         } else if (row?.parentId && proposedExpandedRows.includes(row?.parentId)) {
           // when row is a child, and its parent id is in previous expanded row,
           // we need to check if it has a sibling then apply a fitting treatment
-          const siblings = table.getRow(row?.parentId)?.getLeafRows() ?? [];
+          const siblings = tableRef.current?.getRow(row?.parentId)?.getLeafRows() ?? [];
           const expandedRowSiblings = siblings.filter(
             (sibling) => proposedExpandedRows.includes(sibling.id) && sibling.id !== proposedRowId
           );
@@ -140,20 +138,39 @@ export const useCascadeTable = <G extends GroupNode, L extends LeafNode>({
 
       return actions.setExpandedRows(newRootRow ? { [newRootRow]: true } : newExpandedRows);
     },
-    getRowId: (rowData) => rowData.id,
-    getSubRows: (row) => row.children as G[],
+    [state.table.expanded, actions, allowMultipleRowToggle]
+  );
+
+  const getRowCanExpand = useCallback(() => true, []);
+  const getRowId = useCallback((rowData: G) => rowData.id, []);
+  const getSubRows = useCallback((row: G) => row.children as G[], []);
+
+  tableRef.current = useReactTable<G>({
+    ...rest,
+    data: state.groupNodes,
+    state: state.table,
+    columns,
+    debugTable: false,
+    enableRowSelection,
+    getCoreRowModel: coreRowModel,
+    getExpandedRowModel: expandedRowModel,
+    getRowCanExpand,
+    onRowSelectionChange,
+    onExpandedChange: onExpandedChangeHandler,
+    getRowId,
+    getSubRows,
   });
 
   return useMemo(
     () => ({
       get headerColumns() {
-        return table.getHeaderGroups()[0].headers;
+        return tableRef.current!.getHeaderGroups()[0].headers;
       },
       get rows() {
-        return table.getRowModel().rows;
+        return tableRef.current!.getRowModel().rows;
       },
     }),
-    [table]
+    []
   );
 };
 

src/platform/packages/shared/shared-ux/document_data_cascade/impl/src/store_provider/index.test.tsx

@@ -14,7 +14,11 @@ import { DataCascadeProvider } from '.';
 describe('DataCascadeProvider', () => {
   it('should render children', () => {
     render(
-      <DataCascadeProvider cascadeGroups={[]}>
+      <DataCascadeProvider
+        data={[]}
+        cascadeGroups={['group1', 'group2']}
+        initialGroupColumn={['group1']}
+      >
         <div>Test Child</div>
       </DataCascadeProvider>
     );