feat: added forwardRef to TableRow (#18415)

Co-authored-by: Gururaj J <89023023+Gururajj77@users.noreply.github.com>
carbon-design-system · Jan 30, 2025 · e163b86 · e163b86
1 parent 0d507e8
commit e163b86
Show file tree

Hide file tree

Showing 3 changed files with 62 additions and 36 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2129,6 +2129,7 @@ Map {
       ],
     },
     "TableRow": Object {
+      "$$typeof": Symbol(react.forward_ref),
       "propTypes": Object {
         "className": Object {
           "type": "string",
@@ -2137,6 +2138,7 @@ Map {
           "type": "bool",
         },
       },
+      "render": [Function],
     },
     "TableSelectAll": Object {
       "propTypes": Object {
@@ -8227,6 +8229,7 @@ Map {
     ],
   },
   "TableRow" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "className": Object {
         "type": "string",
@@ -8235,6 +8238,7 @@ Map {
         "type": "bool",
       },
     },
+    "render": [Function],
   },
   "TableSelectAll" => Object {
     "propTypes": Object {

diff --git a/packages/react/src/components/DataTable/TableRow.tsx b/packages/react/src/components/DataTable/TableRow.tsx
@@ -22,49 +22,51 @@ export interface TableRowProps extends ReactAttr<HTMLTableRowElement> {
   isSelected?: boolean;
 }
 
-const TableRow = (props: TableRowProps) => {
-  const prefix = usePrefix();
+const TableRow = React.forwardRef<HTMLTableCellElement, TableRowProps>(
+  (props, ref) => {
+    const prefix = usePrefix();
 
-  let rowHasAILabel;
-  if (props?.children) {
-    React.Children.toArray(props.children).map((child: any) => {
-      if (
-        child.type?.displayName === 'TableSlugRow' ||
-        child.type?.displayName === 'TableDecoratorRow'
-      ) {
+    let rowHasAILabel;
+    if (props?.children) {
+      React.Children.toArray(props.children).map((child: any) => {
         if (
-          child.props.slug ||
-          child.props.decorator?.type.displayName === 'AILabel'
+          child.type?.displayName === 'TableSlugRow' ||
+          child.type?.displayName === 'TableDecoratorRow'
         ) {
-          rowHasAILabel = true;
+          if (
+            child.props.slug ||
+            child.props.decorator?.type.displayName === 'AILabel'
+          ) {
+            rowHasAILabel = true;
+          }
         }
-      }
+      });
+    }
+    // Remove unnecessary props if provided to this component, these are
+    // only useful in `TableExpandRow`
+    const className = cx(props.className, {
+      [`${prefix}--data-table--selected`]: props.isSelected,
+      [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]:
+        rowHasAILabel,
     });
-  }
-  // Remove unnecessary props if provided to this component, these are
-  // only useful in `TableExpandRow`
-  const className = cx(props.className, {
-    [`${prefix}--data-table--selected`]: props.isSelected,
-    [`${prefix}--data-table--slug-row ${prefix}--data-table--ai-label-row`]:
-      rowHasAILabel,
-  });
 
-  const {
-    ariaLabel,
-    'aria-label': ariaLabelAlt,
-    'aria-controls': ariaControls,
-    onExpand,
-    isExpanded,
-    isSelected,
-    ...cleanProps
-  } = props as any;
+    const {
+      ariaLabel,
+      'aria-label': ariaLabelAlt,
+      'aria-controls': ariaControls,
+      onExpand,
+      isExpanded,
+      isSelected,
+      ...cleanProps
+    } = props as any;
 
-  if (className) {
-    cleanProps.className = className;
-  }
+    if (className) {
+      cleanProps.className = className;
+    }
 
-  return <tr {...cleanProps} />;
-};
+    return <tr ref={ref} {...cleanProps} />;
+  }
+);
 
 TableRow.propTypes = {
   /**

diff --git a/packages/react/src/components/DataTable/__tests__/TableRow-test.js b/packages/react/src/components/DataTable/__tests__/TableRow-test.js
@@ -7,7 +7,7 @@
 
 import { render, screen } from '@testing-library/react';
 import React from 'react';
-import { Table, TableBody, TableRow } from '../';
+import { Table, TableBody, TableCell, TableRow } from '../';
 
 describe('TableRow', () => {
   it('should support a custom className on the outermost element', () => {
@@ -34,4 +34,24 @@ describe('TableRow', () => {
       'test'
     );
   });
+
+  it('should forward refs to the rendered Tablerow element', () => {
+    let tr = null;
+    const ref = jest.fn((node) => {
+      tr = node;
+    });
+    const { container } = render(
+      <Table>
+        <TableBody>
+          <TableRow ref={ref} data-testid="tr" className="custom-class">
+            <TableCell />
+          </TableRow>
+        </TableBody>
+      </Table>
+    );
+    expect(ref).toHaveBeenCalled();
+    expect(tr).not.toBeNull();
+    expect(tr).toEqual(container.querySelector('tr'));
+    expect(tr).toHaveClass('custom-class');
+  });
 });