diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index 7a201908c4..a86e172472 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -18,6 +18,7 @@ import CardTitle from './CardTitle'; import { getCardColors } from './utils'; import { useInternalTheme } from '../../core/theming'; import type { $Omit, ThemeProp } from '../../types'; +import { forwardRef } from '../../utils/forwardRef'; import hasTouchHandler from '../../utils/hasTouchHandler'; import { splitStyles } from '../../utils/splitStyles'; import Surface from '../Surface'; @@ -130,23 +131,26 @@ export type Props = $Omit, 'mode'> & { * export default MyComponent; * ``` */ -const Card = ({ - elevation: cardElevation = 1, - delayLongPress, - onPress, - onLongPress, - onPressOut, - onPressIn, - mode: cardMode = 'elevated', - children, - style, - contentStyle, - theme: themeOverrides, - testID = 'card', - accessible, - disabled, - ...rest -}: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props) => { +const CardComponent = ( + { + elevation: cardElevation = 1, + delayLongPress, + onPress, + onLongPress, + onPressOut, + onPressIn, + mode: cardMode = 'elevated', + children, + style, + contentStyle, + theme: themeOverrides, + testID = 'card', + accessible, + disabled, + ...rest + }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props, + ref: React.ForwardedRef +) => { const theme = useInternalTheme(themeOverrides); const isMode = React.useCallback( (modeToCompare: Mode) => { @@ -274,6 +278,7 @@ const Card = ({ return (