diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 610ba8e301f9..4fb469ca7068 100644 --- 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 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 { onExpand: MouseEventHandler; } -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 ( - - - - - {children} - - ); -}; + ['aria-controls']: ariaControls, + ['aria-label']: ariaLabel, + ariaLabel: deprecatedAriaLabel, + className: rowClassName, + children, + isExpanded, + onExpand, + expandIconDescription, + isSelected, + expandHeader = 'expand', + ...rest + }: TableExpandRowProps, + ref: React.Ref + ) => { + 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 ( + + + + + {children} + + ); + } +); 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;