From 75e709eba2f240ae01a9aedbb7650a80fa35c996 Mon Sep 17 00:00:00 2001
From: Hussam Ghazzi <hussam-i-am@github.com>
Date: Wed, 20 Nov 2024 19:22:17 +0000
Subject: [PATCH] fix(Popover): Update component to forward ref

---
 .changeset/hot-jobs-marry.md           |  5 +++++
 packages/react/src/Popover/Popover.tsx | 15 +++++++--------
 2 files changed, 12 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/hot-jobs-marry.md

diff --git a/.changeset/hot-jobs-marry.md b/.changeset/hot-jobs-marry.md
new file mode 100644
index 00000000000..9d0fb77920d
--- /dev/null
+++ b/.changeset/hot-jobs-marry.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+Add forward ref to Popover
diff --git a/packages/react/src/Popover/Popover.tsx b/packages/react/src/Popover/Popover.tsx
index 3f6c9b3c784..760aac62f8b 100644
--- a/packages/react/src/Popover/Popover.tsx
+++ b/packages/react/src/Popover/Popover.tsx
@@ -53,18 +53,16 @@ export type PopoverProps = {
 } & StyledPopoverProps &
   HTMLProps<HTMLDivElement>
 
-const Popover: React.FC<React.PropsWithChildren<PopoverProps>> = ({
-  className,
-  caret = 'top',
-  open,
-  relative,
-  ...props
-}) => {
+const Popover = React.forwardRef<HTMLElement, PopoverProps>(function Popover(
+  {className, caret = 'top', open, relative, ...props},
+  forwardRef,
+) {
   const enabled = useFeatureFlag(CSS_MODULES_FLAG)
   if (enabled) {
     return (
       <BaseComponent
         {...props}
+        ref={forwardRef}
         data-open={open ? '' : undefined}
         data-relative={relative ? '' : undefined}
         data-caret={caret}
@@ -74,7 +72,8 @@ const Popover: React.FC<React.PropsWithChildren<PopoverProps>> = ({
   }
 
   return <BaseComponent {...props} className={className} caret={caret} open={open} relative={relative} />
-}
+})
+Popover.displayName = 'Popover'
 
 const StyledPopoverContent = toggleStyledComponent(
   CSS_MODULES_FLAG,