From 2aea89dba41b3127c83d6ad83501134a19882aed Mon Sep 17 00:00:00 2001
From: Rajat v <rd.rajat23@gmail.com>
Date: Thu, 19 Oct 2023 18:06:54 +0000
Subject: [PATCH 1/2] feat: allow forwardingref

---
 .../components/DataTable/TableExpandRow.tsx   | 102 ++++++++++--------
 1 file changed, 55 insertions(+), 47 deletions(-)

diff --git a/packages/react/src/components/DataTable/TableExpandRow.tsx b/packages/react/src/components/DataTable/TableExpandRow.tsx
index 9c2e604a76a6..24356f76cc2f 100644
--- a/packages/react/src/components/DataTable/TableExpandRow.tsx
+++ b/packages/react/src/components/DataTable/TableExpandRow.tsx
@@ -54,66 +54,73 @@ interface TableExpandRowProps extends PropsWithChildren<TableRowProps> {
   onExpand: MouseEventHandler<HTMLButtonElement>;
 }
 
-const TableExpandRow = ({
-  ['aria-controls']: ariaControls,
-  ['aria-label']: ariaLabel,
-  ariaLabel: deprecatedAriaLabel,
-  className: rowClassName,
-  children,
-  isExpanded,
-  onExpand,
-  expandIconDescription,
-  isSelected,
-  expandHeader = 'expand',
-  ...rest
-}: TableExpandRowProps) => {
-  const prefix = usePrefix();
-  const className = cx(
+const TableExpandRow = React.forwardRef(
+  (
     {
-      [`${prefix}--parent-row`]: true,
-      [`${prefix}--expandable-row`]: isExpanded,
-      [`${prefix}--data-table--selected`]: isSelected,
-    },
-    rowClassName
-  );
-  const previousValue = isExpanded ? 'collapsed' : undefined;
-
-  return (
-    <tr {...rest} className={className} data-parent-row>
-      <TableCell
-        className={`${prefix}--table-expand`}
-        data-previous-value={previousValue}
-        headers={expandHeader}>
-        <button
-          type="button"
-          className={`${prefix}--table-expand__button`}
-          onClick={onExpand}
-          title={expandIconDescription}
-          aria-label={deprecatedAriaLabel || ariaLabel}
-          aria-expanded={isExpanded}
-          aria-controls={ariaControls}>
-          <ChevronRight
-            className={`${prefix}--table-expand__svg`}
-            aria-label={expandIconDescription}
-          />
-        </button>
-      </TableCell>
-      {children}
-    </tr>
-  );
-};
+      ['aria-controls']: ariaControls,
+      ['aria-label']: ariaLabel,
+      ariaLabel: deprecatedAriaLabel,
+      className: rowClassName,
+      children,
+      isExpanded,
+      onExpand,
+      expandIconDescription,
+      isSelected,
+      expandHeader = 'expand',
+      ...rest
+    }: TableExpandRowProps,
+    ref: React.Ref<HTMLTableCellElement>
+  ) => {
+    const prefix = usePrefix();
+    const className = cx(
+      {
+        [`${prefix}--parent-row`]: true,
+        [`${prefix}--expandable-row`]: isExpanded,
+        [`${prefix}--data-table--selected`]: isSelected,
+      },
+      rowClassName
+    );
+    const previousValue = isExpanded ? 'collapsed' : undefined;
+
+    return (
+      <tr {...rest} ref={ref as never} className={className} data-parent-row>
+        <TableCell
+          className={`${prefix}--table-expand`}
+          data-previous-value={previousValue}
+          headers={expandHeader}>
+          <button
+            type="button"
+            className={`${prefix}--table-expand__button`}
+            onClick={onExpand}
+            title={expandIconDescription}
+            aria-label={deprecatedAriaLabel || ariaLabel}
+            aria-expanded={isExpanded}
+            aria-controls={ariaControls}>
+            <ChevronRight
+              className={`${prefix}--table-expand__svg`}
+              aria-label={expandIconDescription}
+            />
+          </button>
+        </TableCell>
+        {children}
+      </tr>
+    );
+  }
+);
 
 TableExpandRow.propTypes = {
   /**
    * Space separated list of one or more ID values referencing the TableExpandedRow(s) being controlled by the TableExpandRow
    * TODO: make this required in v12
    */
+  /**@ts-ignore*/
   ['aria-controls']: PropTypes.string,
 
   /**
    * Specify the string read by a voice reader when the expand trigger is
    * focused
    */
+  /**@ts-ignore*/
   ['aria-label']: PropTypes.string,
 
   /**
@@ -152,4 +159,5 @@ TableExpandRow.propTypes = {
   onExpand: PropTypes.func.isRequired,
 };
 
+TableExpandRow.displayName = 'TableExpandRow';
 export default TableExpandRow;

From 0086502ea82e9c6c3f1666b90656a456b77ea8ad Mon Sep 17 00:00:00 2001
From: Rajat v <rd.rajat23@gmail.com>
Date: Thu, 19 Oct 2023 18:58:26 +0000
Subject: [PATCH 2/2] fix: update snapshot

---
 packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 8fb6a6a07696..2cfe84daea22 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -2047,6 +2047,7 @@ Map {
       },
     },
     "TableExpandRow": Object {
+      "$$typeof": Symbol(react.forward_ref),
       "propTypes": Object {
         "aria-controls": Object {
           "type": "string",
@@ -2081,6 +2082,7 @@ Map {
           "type": "func",
         },
       },
+      "render": [Function],
     },
     "TableExpandedRow": Object {
       "propTypes": Object {
@@ -7922,6 +7924,7 @@ Map {
     },
   },
   "TableExpandRow" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "aria-controls": Object {
         "type": "string",
@@ -7956,6 +7959,7 @@ Map {
         "type": "func",
       },
     },
+    "render": [Function],
   },
   "TableExpandedRow" => Object {
     "propTypes": Object {