Merge pull request #1606 from adevinta/fix-forwardedref-popover

fix(popover): fix ref warning when forward ref without using it
adevinta · Oct 26, 2023 · 2101cbc · 2101cbc
2 parents 56d8f40 + a93320b
commit 2101cbc
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/packages/components/popover/src/PopoverAnchor.tsx b/packages/components/popover/src/PopoverAnchor.tsx
@@ -4,8 +4,13 @@ import { forwardRef } from 'react'
 export type AnchorProps = RadixPopover.PopoverAnchorProps
 
 export const Anchor = forwardRef<HTMLDivElement, AnchorProps>(
-  ({ asChild = false, children, ...rest }) => (
-    <RadixPopover.Anchor data-spark-component="popover-anchor" asChild={asChild} {...rest}>
+  ({ asChild = false, children, ...rest }, ref) => (
+    <RadixPopover.Anchor
+      data-spark-component="popover-anchor"
+      ref={ref}
+      asChild={asChild}
+      {...rest}
+    >
       {children}
     </RadixPopover.Anchor>
   )

diff --git a/packages/components/popover/src/PopoverArrow.tsx b/packages/components/popover/src/PopoverArrow.tsx
@@ -4,8 +4,8 @@ import { forwardRef } from 'react'
 
 export type ArrowProps = RadixPopover.PopoverArrowProps
 
-export const Arrow = forwardRef<HTMLDivElement, ArrowProps>(
-  ({ asChild = false, width = 16, height = 8, className, ...rest }) => {
+export const Arrow = forwardRef<SVGSVGElement, ArrowProps>(
+  ({ asChild = false, width = 16, height = 8, className, ...rest }, ref) => {
     /**
      * This is necessary to override a Radix UI behaviour.
      * Radix hides the arrow when the Popover is too misaligned from its trigger element.
@@ -15,6 +15,7 @@ export const Arrow = forwardRef<HTMLDivElement, ArrowProps>(
     return (
       <RadixPopover.Arrow
         data-spark-component="popover-arrow"
+        ref={ref}
         className={styles}
         asChild={asChild}
         width={width}

diff --git a/packages/components/popover/src/PopoverHeader.tsx b/packages/components/popover/src/PopoverHeader.tsx
@@ -10,7 +10,7 @@ export interface HeaderProps {
 }
 
 export const Header = forwardRef<HTMLDivElement, HeaderProps>(
-  ({ children, className, ...rest }) => {
+  ({ children, className, ...rest }, ref) => {
     const id = useId()
     const { setHeaderId } = usePopover()
 
@@ -21,7 +21,7 @@ export const Header = forwardRef<HTMLDivElement, HeaderProps>(
     }, [id, setHeaderId])
 
     return (
-      <header id={id} className={cx('mb-md text-headline-2', className)} {...rest}>
+      <header id={id} ref={ref} className={cx('mb-md text-headline-2', className)} {...rest}>
         {children}
       </header>
     )