fix: useHoverOverlay swallowing refs (#88094)

in React 18, we were not able to access the ref prop as it used to throw
due to refs being a reserved prop. With react 19, the ref is just a
prop, meaning we can compose it correctly

Author: JonasBa

static/app/utils/useHoverOverlay.spec.tsx

@@ -33,4 +33,23 @@ describe('useHoverOverlay', () => {
     await userEvent.tab();
     expect(componentProps.onBlur).toHaveBeenCalled();
   });
+
+  it('skipWrapper=true does not swallow refs', () => {
+    function InnerComponent(
+      props: Partial<React.HTMLAttributes<HTMLDivElement>> &
+        React.RefAttributes<HTMLDivElement>
+    ) {
+      return <div {...props} />;
+    }
+
+    const ref = jest.fn();
+
+    const WrappedComponent = () => {
+      const {wrapTrigger} = useHoverOverlay({skipWrapper: true});
+      return wrapTrigger(<InnerComponent ref={ref} />);
+    };
+
+    render(<WrappedComponent />);
+    expect(ref).toHaveBeenCalled();
+  });
 });

static/app/utils/useHoverOverlay.tsx

@@ -11,7 +11,7 @@ import {
 import type {PopperProps} from 'react-popper';
 import {usePopper} from 'react-popper';
 import {useTheme} from '@emotion/react';
-import {mergeProps} from '@react-aria/utils';
+import {mergeProps, mergeRefs} from '@react-aria/utils';
 
 import type {ColorOrAlias} from 'sentry/utils/theme';
 
@@ -292,6 +292,7 @@ function useHoverOverlay({
           return cloneElement<any>(
             triggerChildren,
             Object.assign(mergeProps(triggerChildren.props as any, providedProps), {
+              ref: mergeRefs((triggerChildren.props as any).ref, setTriggerElement),
               style: triggerStyle,
             })
           );
@@ -301,6 +302,7 @@ function useHoverOverlay({
         return cloneElement<any>(
           triggerChildren,
           Object.assign(mergeProps(triggerChildren.props as any, providedProps), {
+            ref: mergeRefs((triggerChildren.props as any).ref, setTriggerElement),
             style: (triggerChildren.props as any).style,
           })
         );