feat: updated collapsable rows for grouped rows and expansion state t…

…oggle (#302)

src/components/Detail/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -3,6 +3,7 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../../../../Table/common/utils";
 import { CollapsableCell } from "../../../../../../../Table/components/TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../../../../../Table/components/TableRow/tableRow.styles";
+import { useCollapsableRows } from "../../../../../../../Table/components/TableRows/components/CollapsableRows/hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
@@ -13,6 +14,7 @@ export const CollapsableRows = <T extends RowData>({
 }: CollapsableRowsProps<T>): JSX.Element => {
   const { getRowModel } = tableInstance;
   const { rows } = getRowModel();
+  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {rows.map((row) => {

src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -6,7 +6,6 @@ import {
   getTableCellPadding,
 } from "../../../../../Table/components/TableCell/common/utils";
 import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
-import { getRowId } from "../../../../../Table/components/TableRows/utils";
 import { TableView } from "../../table";
 
 export interface TableRowsProps<T extends RowData> {
@@ -27,9 +26,9 @@ export const TableRows = <T extends RowData>({
       {rows.map((row) => {
         return (
           <TableRow
-            id={getRowId(row)}
-            isPreview={row.getIsPreview()}
             key={row.id}
+            isGrouped={row.getIsGrouped()}
+            isPreview={row.getIsPreview()}
           >
             {row.getVisibleCells().map((cell) => {
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.

src/components/Table/common/gridTable.styles.ts

@@ -1,7 +1,6 @@
 import styled from "@emotion/styled";
 import { Table as MTable } from "@mui/material";
-import { smokeLightest, white } from "../../../styles/common/mixins/colors";
-import { textBodySmall500 } from "../../../styles/common/mixins/fonts";
+import { white } from "../../../styles/common/mixins/colors";
 
 export interface GridTableProps {
   gridTemplateColumns: string;
@@ -18,7 +17,7 @@ export const GridTable = styled(MTable, {
   tbody,
   thead,
   tr {
-    display: contents; /* required; allows grandchildren of grid template to appear as though direct child */
+    display: contents; /* required; allows grandchildren of grid template to appear as though direct child */ /* TODO(cc) use new sub-grid */
   }
 
   tr {
@@ -40,14 +39,4 @@ export const GridTable = styled(MTable, {
       min-width: 0; /* required; flexbox child min-width property is "auto" by default making overflow-wrap ineffectual */
     }
   }
-
-  [id^="grouped-row"] {
-    background-color: ${smokeLightest};
-
-    td {
-      ${textBodySmall500};
-      background-color: inherit;
-      grid-column: 1 / -1;
-    }
-  }
 `;

src/components/Table/components/TableCell/components/CollapsableCell/collapsableCell.tsx

@@ -1,5 +1,6 @@
 import { Collapse, IconButton, Typography } from "@mui/material";
 import { Cell, flexRender, Row, RowData } from "@tanstack/react-table";
+import { Virtualizer } from "@tanstack/react-virtual";
 import React from "react";
 import { TEXT_BODY_400_2_LINES } from "../../../../../../theme/common/typography";
 import { UnfoldMoreIcon } from "../../../../../common/CustomIcon/components/UnfoldMoreIcon/unfoldMoreIcon";
@@ -14,11 +15,13 @@ import {
 export interface CollapsableCellProps<T extends RowData> {
   isDisabled?: boolean;
   row: Row<T>;
+  virtualizer?: Virtualizer<Window, Element>;
 }
 
 export const CollapsableCell = <T extends RowData>({
   isDisabled = false,
   row,
+  virtualizer,
 }: CollapsableCellProps<T>): JSX.Element => {
   const [pinnedCell, pinnedIndex] = getPinnedCellIndex(row);
   return (
@@ -35,7 +38,11 @@ export const CollapsableCell = <T extends RowData>({
           <UnfoldMoreIcon fontSize="small" />
         </IconButton>
       </PinnedCell>
-      <Collapse in={row.getIsExpanded()}>
+      <Collapse
+        in={row.getIsExpanded()}
+        onEntered={() => virtualizer?.measure()} // Measure when cell is opened.
+        onExited={() => virtualizer?.measure()} // Measure when cell is closed.
+      >
         <CollapsedContents>
           {getRowVisibleCells(row).map((cell, i) => {
             if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.

src/components/Table/components/TableRow/tableRow.styles.ts

@@ -1,18 +1,35 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { TableRow as MTableRow } from "@mui/material";
-import { primaryLightest } from "../../../../styles/common/mixins/colors";
+import {
+  primaryLightest,
+  smokeLightest,
+} from "../../../../styles/common/mixins/colors";
+import { textBodySmall500 } from "../../../../styles/common/mixins/fonts";
 
 interface Props {
+  isGrouped?: boolean;
   isPreview?: boolean;
 }
 
 export const TableRow = styled(MTableRow, {
-  shouldForwardProp: (prop) => prop !== "isPreview",
+  shouldForwardProp: (prop) => prop !== "isPreview" && prop !== "isGrouped",
 })<Props>`
   && {
     transition: background-color 300ms ease-in;
 
+    ${(props) =>
+      props.isGrouped &&
+      css`
+        background-color: ${smokeLightest(props)};
+
+        td {
+          ${textBodySmall500(props)};
+          background-color: inherit;
+          grid-column: 1 / -1;
+        }
+      `}
+
     ${(props) =>
       props.isPreview &&
       css`

src/components/Table/components/TableRows/components/CollapsableRows/collapsableRows.tsx

@@ -4,6 +4,7 @@ import React, { Fragment } from "react";
 import { isCollapsableRowDisabled } from "../../../../common/utils";
 import { CollapsableCell } from "../../../TableCell/components/CollapsableCell/collapsableCell";
 import { TableRow } from "../../../TableRow/tableRow.styles";
+import { useCollapsableRows } from "./hook";
 
 export interface CollapsableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
@@ -14,14 +15,17 @@ export const CollapsableRows = <T extends RowData>({
   tableInstance,
   virtualizer,
 }: CollapsableRowsProps<T>): JSX.Element => {
-  const { getRowModel } = tableInstance;
+  const { getRowModel, getState } = tableInstance;
   const { rows } = getRowModel();
+  const { grouping } = getState();
   const virtualItems = virtualizer.getVirtualItems();
+  useCollapsableRows(tableInstance);
   return (
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
         const { getIsPreview } = row;
+        if (grouping.length > 0 && row.depth > 0) return null; // TODO(cc) hide sub rows -- sub-rows are within collapsed content -- UI TBD.
         return (
           <TableRow
             key={row.id}
@@ -32,6 +36,7 @@ export const CollapsableRows = <T extends RowData>({
             <CollapsableCell
               isDisabled={isCollapsableRowDisabled(tableInstance)}
               row={row}
+              virtualizer={virtualizer}
             />
           </TableRow>
         );

src/components/Table/components/TableRows/components/CollapsableRows/hook.ts

@@ -0,0 +1,20 @@
+import { RowData, Table } from "@tanstack/react-table";
+import { useEffect } from "react";
+
+/**
+ * Hook to manage the expanded row state during viewport transitions (e.g., desktop to mobile and vice versa).
+ * Designed for use with the `CollapsableRows` component, where row expansion is a work in progress for desktop viewports.
+ * This hook ensures that all rows are collapsed when transitioning from desktop to mobile (when `CollapsableRows` component is mounted).
+ * It also resets the expanded row state when transitioning back to desktop (when the `CollapsableRows` component is unmounted).
+ * @param table - Table.
+ */
+export function useCollapsableRows<T extends RowData>(table: Table<T>): void {
+  const { resetExpanded, toggleAllRowsExpanded } = table;
+
+  useEffect(() => {
+    toggleAllRowsExpanded(false);
+    return (): void => {
+      resetExpanded();
+    };
+  }, [resetExpanded, toggleAllRowsExpanded]);
+}

src/components/Table/components/TableRows/tableRows.tsx

@@ -7,7 +7,6 @@ import {
   getTableCellPadding,
 } from "../TableCell/common/utils";
 import { TableRow } from "../TableRow/tableRow.styles";
-import { getRowId } from "./utils";
 
 export interface TableRowsProps<T extends RowData> {
   tableInstance: Table<T>;
@@ -25,12 +24,12 @@ export const TableRows = <T extends RowData>({
     <Fragment>
       {virtualItems.map((virtualRow) => {
         const row = rows[virtualRow.index] as Row<T>;
-        const { getIsPreview } = row;
+        const { getIsGrouped, getIsPreview } = row;
         return (
           <TableRow
             key={row.id}
             data-index={virtualRow.index}
-            id={getRowId(row)}
+            isGrouped={getIsGrouped()}
             isPreview={getIsPreview()}
             ref={virtualizer.measureElement}
           >

src/components/TableCreator/options/expanded/constants.ts

@@ -6,8 +6,9 @@ import {
 
 export const EXPANDED_OPTIONS: Pick<
   ExpandedOptions<RowData>,
-  "enableExpanding" | "getExpandedRowModel"
+  "autoResetExpanded" | "enableExpanding" | "getExpandedRowModel"
 > = {
+  autoResetExpanded: false,
   enableExpanding: false,
   getExpandedRowModel: getExpandedRowModel(),
 };