Feat: Forwarding Ref in TableExpandRow component (#14950)

* feat: allow forwardingref * fix: update snapshot --------- Co-authored-by: Andrea N. Cardona <[email protected]> Co-authored-by: Taylor Jones <[email protected]>
carbon-design-system · Oct 31, 2023 · cb2e75a · cb2e75a
1 parent 083740a
commit cb2e75a
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 47 deletions.
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -1948,6 +1948,7 @@ Map {
       },
     },
     "TableExpandRow": Object {
+      "$$typeof": Symbol(react.forward_ref),
       "propTypes": Object {
         "aria-controls": Object {
           "type": "string",
@@ -1982,6 +1983,7 @@ Map {
           "type": "func",
         },
       },
+      "render": [Function],
     },
     "TableExpandedRow": Object {
       "propTypes": Object {
@@ -7560,6 +7562,7 @@ Map {
     },
   },
   "TableExpandRow" => Object {
+    "$$typeof": Symbol(react.forward_ref),
     "propTypes": Object {
       "aria-controls": Object {
         "type": "string",
@@ -7594,6 +7597,7 @@ Map {
         "type": "func",
       },
     },
+    "render": [Function],
   },
   "TableExpandedRow" => Object {
     "propTypes": Object {

diff --git 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;