Return intersection rect

Summary: Changelog: [General][Changed] Return the clipped `intersectionRect` in IntersectionObserverEntry regardless of whether the observer `isIntersecting` or not. This addresses a deviance from the [web spec](https://www.w3.org/TR/intersection-observer/?fbclid=IwZXh0bgNhZW0CMTEAAR1XaWZim1ij0N1p07aCM__SYerXhu88UTDZRFCZEvRhQW2crRMwEvfwAdQ_aem_zH8WjTh0VFjEeORG76rcew#intersection-observer-entry) Reviewed By: rubennorte Differential Revision: D66516179
lunaleaps · Dec 3, 2024 · d5be6be · d5be6be
1 parent d6f286a
commit d5be6be
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/...native/ReactCommon/react/nativemodule/intersectionobserver/NativeIntersectionObserver.cpp b/...native/ReactCommon/react/nativemodule/intersectionobserver/NativeIntersectionObserver.cpp
@@ -93,14 +93,11 @@ NativeIntersectionObserver::convertToNativeModuleEntry(
       entry.rootRect.origin.y,
       entry.rootRect.size.width,
       entry.rootRect.size.height};
-  std::optional<RectAsTuple> intersectionRect;
-  if (entry.intersectionRect) {
-    intersectionRect = {
-        entry.intersectionRect.value().origin.x,
-        entry.intersectionRect.value().origin.y,
-        entry.intersectionRect.value().size.width,
-        entry.intersectionRect.value().size.height};
-  }
+  RectAsTuple intersectionRect = {
+      entry.intersectionRect.origin.x,
+      entry.intersectionRect.origin.y,
+      entry.intersectionRect.size.width,
+      entry.intersectionRect.size.height};
 
   NativeIntersectionObserverEntry nativeModuleEntry = {
       entry.intersectionObserverId,

diff --git a/...s/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.cpp b/...s/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.cpp
@@ -135,7 +135,8 @@ IntersectionObserver::updateIntersectionObservation(
       : intersectionRectArea / targetBoundingRectArea;
 
   if (intersectionRatio == 0) {
-    return setNotIntersectingState(rootBoundingRect, targetBoundingRect, time);
+    return setNotIntersectingState(
+        rootBoundingRect, targetBoundingRect, intersectionRect, time);
   }
 
   auto highestThresholdCrossed =
@@ -154,7 +155,8 @@ IntersectionObserver::updateIntersectionObservation(
 
   if (highestThresholdCrossed == -1.0f &&
       highestRootThresholdCrossed == -1.0f) {
-    return setNotIntersectingState(rootBoundingRect, targetBoundingRect, time);
+    return setNotIntersectingState(
+        rootBoundingRect, targetBoundingRect, intersectionRect, time);
   }
 
   return setIntersectingState(
@@ -169,7 +171,7 @@ IntersectionObserver::updateIntersectionObservation(
 std::optional<IntersectionObserverEntry>
 IntersectionObserver::updateIntersectionObservationForSurfaceUnmount(
     double time) {
-  return setNotIntersectingState(Rect{}, Rect{}, time);
+  return setNotIntersectingState(Rect{}, Rect{}, Rect{}, time);
 }
 
 std::optional<IntersectionObserverEntry>
@@ -204,6 +206,7 @@ std::optional<IntersectionObserverEntry>
 IntersectionObserver::setNotIntersectingState(
     const Rect& rootBoundingRect,
     const Rect& targetBoundingRect,
+    const Rect& intersectionRect,
     double time) {
   if (state_ != IntersectionObserverState::NotIntersecting()) {
     state_ = IntersectionObserverState::NotIntersecting();
@@ -212,7 +215,7 @@ IntersectionObserver::setNotIntersectingState(
         targetShadowNode_,
         targetBoundingRect,
         rootBoundingRect,
-        std::nullopt,
+        intersectionRect,
         false,
         time,
     };

diff --git a/...ges/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.h b/...ges/react-native/ReactCommon/react/renderer/observers/intersection/IntersectionObserver.h
@@ -23,7 +23,7 @@ struct IntersectionObserverEntry {
   ShadowNode::Shared shadowNode;
   Rect targetRect;
   Rect rootRect;
-  std::optional<Rect> intersectionRect;
+  Rect intersectionRect;
   bool isIntersectingAboveThresholds;
   // TODO(T156529385) Define `DOMHighResTimeStamp` as an alias for `double` and
   // use it here.
@@ -71,6 +71,7 @@ class IntersectionObserver {
   std::optional<IntersectionObserverEntry> setNotIntersectingState(
       const Rect& rootBoundingRect,
       const Rect& targetBoundingRect,
+      const Rect& intersectionRect,
       double time);
 
   IntersectionObserverObserverId intersectionObserverId_;

diff --git a/...react-native/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js b/...react-native/src/private/webapis/intersectionobserver/specs/NativeIntersectionObserver.js
@@ -17,6 +17,7 @@ export type NativeIntersectionObserverEntry = {
   targetInstanceHandle: mixed,
   targetRect: $ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
   rootRect: $ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
+  // TODO(T209328432) - Remove optionality of intersectionRect when native changes are released
   intersectionRect: ?$ReadOnlyArray<number>, // It's actually a tuple with x, y, width and height
   isIntersectingAboveThresholds: boolean,
   time: number,