Wraps card in fwd ref (#1823)

mongodb · Jul 11, 2023 · 3c5a64d · 3c5a64d
1 parent c08e51e
commit 3c5a64d
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 30 deletions.
diff --git a/.changeset/lucky-ducks-hide.md b/.changeset/lucky-ducks-hide.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/card': major
+---
+
+Wraps component in `React.forwardRef`
diff --git a/packages/card/src/Card/Card.tsx b/packages/card/src/Card/Card.tsx
@@ -11,38 +11,44 @@ import { CardProps, ContentStyle } from './types';
 /**
  * Cards are used to organize information into consumable chunks.
  */
-export const Card = ({
-  className,
-  contentStyle,
-  darkMode: darkModeProp,
-  ...rest
-}: BoxProps<'div', CardProps>) => {
-  if (
-    contentStyle === undefined &&
-    (('onClick' in rest && rest.onClick !== undefined) ||
-      ('href' in rest && !!rest.href))
-  ) {
-    contentStyle = ContentStyle.Clickable;
-  }
+export const Card = React.forwardRef(
+  (
+    {
+      className,
+      contentStyle,
+      darkMode: darkModeProp,
+      ...rest
+    }: BoxProps<'div', CardProps>,
+    forwardRef,
+  ) => {
+    if (
+      contentStyle === undefined &&
+      (('onClick' in rest && rest.onClick !== undefined) ||
+        ('href' in rest && !!rest.href))
+    ) {
+      contentStyle = ContentStyle.Clickable;
+    }
 
-  const { theme } = useDarkMode(darkModeProp);
+    const { theme } = useDarkMode(darkModeProp);
 
-  return (
-    <Box
-      // @ts-expect-error
-      className={cx(
-        containerStyle,
-        colorSet[theme].containerStyle,
-        {
-          [colorSet[theme].clickableStyle]:
-            contentStyle === ContentStyle.Clickable,
-        },
-        className,
-      )}
-      {...rest}
-    />
-  );
-};
+    return (
+      <Box
+        // @ts-expect-error
+        className={cx(
+          containerStyle,
+          colorSet[theme].containerStyle,
+          {
+            [colorSet[theme].clickableStyle]:
+              contentStyle === ContentStyle.Clickable,
+          },
+          className,
+        )}
+        ref={forwardRef}
+        {...rest}
+      />
+    );
+  },
+);
 
 Card.displayName = 'Card';