[LG-5589] fix(table): add type assert to allow passing row to ExtendedContent (#3176)

* Add type assert to allow passing row to ExtendedContent

* Update stories.testutils.tsx

* Update getTestUtils.spec.tsx

* fix(table): Enhance ExpandedContent tests with type assertions for styled components

---------

Co-authored-by: Adam Thompson <[email protected]>
Co-authored-by: Shaneeza <[email protected]>

Author: 3 people

.changeset/sixty-trees-rescue.md

@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/table': patch
+---
+
+Fix ExtendedContent types to allow passing row prop

packages/table/src/ExpandedContent/ExpandedContent.spec.tsx

@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React, { ComponentType, Fragment } from 'react';
 import styled from '@emotion/styled';
 import { flexRender } from '@tanstack/react-table';
 import { render } from '@testing-library/react';
@@ -16,7 +16,7 @@ import {
   useMockTestRowData,
   useTestHookCall,
 } from '../utils/testHookCalls.testutils';
-import { Table, TableProps } from '..';
+import { ExpandedContentProps, Table, TableProps } from '..';
 
 import ExpandedContent from './ExpandedContent';
 
@@ -60,7 +60,6 @@ const RowWithExpandableContent = (args: TableProps<Person>) => {
                     })}
                   </Row>
                 )}
-                {/* @ts-expect-error FIXME: ExpandedContent is incorrectly generic */}
                 {isExpandedContent && <ExpandedContent row={row} />}
               </Fragment>
             );
@@ -129,12 +128,15 @@ describe('packages/table/Row/ExpandableContent', () => {
       const { result } = renderHook(() => useMockTestRowData());
       const mockRow = result.current.firstRow;
 
-      const StyledExpandedContent = styled(ExpandedContent)`
+      // type assertion is needed in R17 with R16 types(@types/react 16.9.56)
+      // styled is not preserving the required row prop
+      const StyledExpandedContent = styled(
+        ExpandedContent as ComponentType<ExpandedContentProps<any>>,
+      )`
         color: #69ffc6;
-      `;
+      ` as typeof ExpandedContent;
 
       const { getByTestId } = render(
-        // @ts-expect-error ExpandedContent is incorrectly generic FIXME:
         <StyledExpandedContent row={mockRow} data-testid="styled" />,
       );
 
@@ -149,14 +151,17 @@ describe('packages/table/Row/ExpandableContent', () => {
       const { result } = renderHook(() => useMockTestRowData());
       const mockRow = result.current.firstRow;
 
-      const StyledExpandedContent = styled(ExpandedContent)<StyledProps>`
+      // type assertion is needed in R17 with R16 types(@types/react 16.9.56)
+      // styled is not preserving the required row prop
+      const StyledExpandedContent = styled(
+        ExpandedContent as ComponentType<ExpandedContentProps<any>>,
+      )<StyledProps>`
         color: ${props => props.color};
-      `;
+      ` as typeof ExpandedContent;
 
       const { getByTestId } = render(
         <StyledExpandedContent
           data-testid="styled"
-          // @ts-expect-error ExpandedContent is incorrectly generic FIXME:
           row={mockRow}
           color="#69ffc6"
         />,
@@ -175,15 +180,9 @@ describe('packages/table/Row/ExpandableContent', () => {
     <>
       {/* @ts-expect-error - row is missing */}
       <ExpandedContent />
-
-      {/* @ts-expect-error - ExpandedContent is incorrectly generic */}
       <ExpandedContent row={firstRow} />
-      {/* @ts-expect-error - ExpandedContent is incorrectly generic */}
       <ExpandedContent row={firstRow} ref={ref} />
-
-      {/* @ts-expect-error - ExpandedContent is incorrectly generic */}
       <ExpandedContent row={firstRow} virtualRow={firstVirtualRow} />
-      {/* @ts-expect-error - ExpandedContent is incorrectly generic */}
       <ExpandedContent row={firstRow} virtualRow={firstVirtualRow} ref={ref} />
     </>;
   });

packages/table/src/ExpandedContent/ExpandedContent.tsx

@@ -12,7 +12,10 @@ import {
   baseStyles,
   expandedContentThemeStyles,
 } from './ExpandedContent.styles';
-import { ExpandedContentProps } from './ExpandedContent.types';
+import {
+  ExpandedContentComponentType,
+  ExpandedContentProps,
+} from './ExpandedContent.types';
 
 const ExpandedContentWithRef = <T extends RowData>(
   { row, virtualRow, ...rest }: ExpandedContentProps<T>,
@@ -48,7 +51,9 @@ const ExpandedContentWithRef = <T extends RowData>(
 
 // React.forwardRef can only work with plain function types, i.e. types with a single call signature and no other members.
 // This assertion has an interface that restores the original function signature to work with generics.
-export const ExpandedContent = React.forwardRef(ExpandedContentWithRef);
+export const ExpandedContent = React.forwardRef(
+  ExpandedContentWithRef,
+) as ExpandedContentComponentType;
 
 ExpandedContent.displayName = 'ExpandedContent';
 

packages/table/src/testing/getTestUtils.spec.tsx

@@ -78,7 +78,6 @@ function TableWithHook(props: TestTableWithHookProps) {
                       })}
                   </Row>
                 )}
-                {/* @ts-expect-error FIXME: ExpandedContent is incorrectly generic */}
                 {isExpandedContent && <ExpandedContent row={row} />}
               </Fragment>
             );

packages/table/src/utils/stories.testutils.tsx

@@ -127,7 +127,6 @@ export const DynamicDataComponent: StoryFn<StoryTableProps> = args => {
                     })}
                   </Row>
                 )}
-                {/* @ts-expect-error FIXME: ExpandedContent is incorrectly generic<unknown> */}
                 {isExpandedContent && <ExpandedContent row={row} />}
               </Fragment>
             );