[Web] Make getEffectiveBoundingRect recursive (#4303)

## Description

Currently `getEffectiveBoundingRect` takes bounding box either from
view, or children if element has `display: contents;`. However, in case
of nested detectors this brakes, as can be seen when running the example
code below.

This PR makes `getEffectiveBoundingRect` recursive, so it will not stop
on the first layer of children.

## Test plan

<details>
<summary>Tested on the following code:</summary>

```tsx
import React, { useState } from 'react';
import { StyleSheet, Text, View } from 'react-native';
import {
  GestureDetector,
  useHoverGesture,
  useNativeGesture,
} from 'react-native-gesture-handler';

// Web-only repro for the getEffectiveBoundingRect fix.
//
// The OUTER hover gesture has a `hitSlop`, which makes its handler run
// checkHitSlop() → measureView() → getEffectiveBoundingRect() on the detector's
// `display:contents` host. The INNER GestureDetector nests a SECOND
// `display:contents` host between that host and the real box (the same shape as
// a hover detector wrapping a Touchable). Before the fix, the outer host's only
// child was itself `display:contents`, so its measured rect collapsed to 0×0 at
// the origin and checkHitSlop rejected every real pointer — hover never fired.
// After the fix, getEffectiveBoundingRect recurses through the inner
// `display:contents` child to the real box, so hover activates normally.
export default function EmptyExample() {
  const [hovered, setHovered] = useState(false);

  const hover = useHoverGesture({
    manualActivation: true,
    disableReanimated: true,
    hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
    onBegin: () => setHovered(true),
    onFinalize: () => setHovered(false),
  });

  // Any inner gesture works — it exists only to nest a second detector host.
  const inner = useNativeGesture({});

  return (
    <View style={styles.container}>
      <GestureDetector gesture={hover}>
        <GestureDetector gesture={inner}>
          <View style={[styles.box, hovered && styles.boxHovered]}>
            <Text style={styles.label}>
              {hovered ? 'hovered ✅' : 'hover me (web)'}
            </Text>
          </View>
        </GestureDetector>
      </GestureDetector>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 220,
    height: 130,
    borderRadius: 16,
    backgroundColor: '#a78bfa',
    alignItems: 'center',
    justifyContent: 'center',
  },
  boxHovered: {
    backgroundColor: '#34d399',
  },
  label: { fontSize: 18, fontWeight: '700', color: '#1a1a2e' },
});
```

</details>

Author: m-bert

packages/react-native-gesture-handler/src/web/tools/GestureHandlerWebDelegate.ts

@@ -6,7 +6,9 @@ import { SingleGestureName } from '../../v3/types';
 import type IGestureHandler from '../handlers/IGestureHandler';
 import type { SVGRef } from '../interfaces';
 import {
+  firstNonContentsView,
   getEffectiveBoundingRect,
+  hasDisplayContents,
   isPointerInBounds,
   isRNSVGElement,
 } from '../utils';
@@ -141,11 +143,9 @@ export class GestureHandlerWebDelegate
       throw new Error(tagMessage('Cannot convert coords on a null view'));
     }
 
-    const localView =
-      this.gestureHandler.usesNativeOrVirtualDetector() &&
-      this.view.style.display === 'contents'
-        ? (this.view.children[0] as HTMLElement)
-        : this.view;
+    const localView = this.gestureHandler.usesNativeOrVirtualDetector()
+      ? firstNonContentsView(this.view)
+      : this.view;
 
     const rect = getEffectiveBoundingRect(localView);
     const transform = getComputedStyle(localView).transform;
@@ -345,11 +345,7 @@ export class GestureHandlerWebDelegate
   ): void {
     this.ensureView(this.view);
 
-    const hasDisplayContents =
-      this.view.style.display === 'contents' ||
-      getComputedStyle(this.view).display === 'contents';
-
-    if (hasDisplayContents) {
+    if (hasDisplayContents(this.view)) {
       for (const child of Array.from(this.view.children)) {
         if (child instanceof HTMLElement) {
           // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access

packages/react-native-gesture-handler/src/web/utils.ts

@@ -2,27 +2,52 @@ import type { StylusData } from '../handlers/gestureHandlerCommon';
 import { PointerType } from '../PointerType';
 import type { GestureHandlerRef, Point, SVGRef } from './interfaces';
 
+export function hasDisplayContents(view: HTMLElement): boolean {
+  return (
+    view.style.display === 'contents' ||
+    getComputedStyle(view).display === 'contents'
+  );
+}
+
+export function firstNonContentsView(view: HTMLElement): HTMLElement {
+  let current = view;
+
+  while (hasDisplayContents(current) && current.childElementCount > 0) {
+    current = current.children[0] as HTMLElement;
+  }
+
+  return current;
+}
+
 // For display: contents elements (like the gesture detector wrapper), getBoundingClientRect
-// returns all zeros since the element has no box. Compute the bounding box from children instead.
+// returns all zeros since the element has no box. Derive the bounds from the children instead
+// (recurse until we reach elements that actually have a box).
 export function getEffectiveBoundingRect(view: HTMLElement): DOMRect {
-  if (view.style.display === 'contents' && view.children.length > 0) {
+  if (hasDisplayContents(view) && view.children.length > 0) {
     let minX = Infinity;
     let minY = Infinity;
     let maxX = -Infinity;
     let maxY = -Infinity;
 
     // eslint-disable-next-line @typescript-eslint/prefer-for-of
     for (let i = 0; i < view.children.length; i++) {
-      const childRect = (
+      const childRect = getEffectiveBoundingRect(
         view.children[i] as HTMLElement
-      ).getBoundingClientRect();
+      );
+
+      if (childRect.width === 0 && childRect.height === 0) {
+        continue;
+      }
+
       minX = Math.min(minX, childRect.left);
       minY = Math.min(minY, childRect.top);
       maxX = Math.max(maxX, childRect.right);
       maxY = Math.max(maxY, childRect.bottom);
     }
 
-    return new DOMRect(minX, minY, maxX - minX, maxY - minY);
+    return minX === Infinity
+      ? view.getBoundingClientRect()
+      : new DOMRect(minX, minY, maxX - minX, maxY - minY);
   }
 
   return view.getBoundingClientRect();