fix(Popover): Update component to forward ref

primer · Nov 20, 2024 · 75e709e · 75e709e
1 parent 56ff1c0
commit 75e709e
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 8 deletions.
diff --git a/.changeset/hot-jobs-marry.md 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
@@ -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,