Add cancelBubble to Event and adopt it in LegacySyntheticEvent (#57561)

Summary:
Pull Request resolved: #57561

Implements the standard `cancelBubble` accessor on the `Event` interface and refactors the legacy synthetic event to rely on it instead of tracking propagation state on its own.

- `Event` now exposes a `cancelBubble` getter/setter (per https://dom.spec.whatwg.org/#dom-event-cancelbubble): reading it returns the stop-propagation flag, setting it to `true` stops propagation, and setting it to `false` is a no-op.
- `LegacySyntheticEvent` drops its private `_propagationStopped` field and the `stopPropagation()` / `stopImmediatePropagation()` overrides (the base `Event` already sets the stop-propagation flag), and `isPropagationStopped()` now returns `cancelBubble`.

Changelog:
[Internal]

Reviewed By: cipolleschi

Differential Revision: D112102632

fbshipit-source-id: 85c530239f5722c28a826867f97d7e60ea7dad5a

Author: rubennorte

packages/react-native/src/private/renderer/events/LegacySyntheticEvent.js

@@ -31,7 +31,6 @@ export type DispatchConfig =
  */
 export default class LegacySyntheticEvent extends Event {
   _nativeEvent: {[string]: unknown};
-  _propagationStopped: boolean;
   _dispatchConfig: DispatchConfig | null;
 
   constructor(
@@ -42,7 +41,6 @@ export default class LegacySyntheticEvent extends Event {
   ) {
     super(type, options);
     this._nativeEvent = nativeEvent;
-    this._propagationStopped = false;
     this._dispatchConfig = dispatchConfig ?? null;
   }
 
@@ -54,16 +52,6 @@ export default class LegacySyntheticEvent extends Event {
     return this._dispatchConfig;
   }
 
-  stopPropagation(): void {
-    super.stopPropagation();
-    this._propagationStopped = true;
-  }
-
-  stopImmediatePropagation(): void {
-    super.stopImmediatePropagation();
-    this._propagationStopped = true;
-  }
-
   /**
    * No-op for backward compatibility. The legacy SyntheticEvent system
    * used pooling which required calling persist() to keep the event.
@@ -85,6 +73,6 @@ export default class LegacySyntheticEvent extends Event {
    * has been called.
    */
   isPropagationStopped(): boolean {
-    return this._propagationStopped;
+    return this.cancelBubble;
   }
 }

packages/react-native/src/private/webapis/dom/events/Event.js

@@ -33,6 +33,7 @@ import {
   getEventPhase,
   getInPassiveListenerFlag,
   getIsTrusted,
+  getStopPropagationFlag,
   getTarget,
   setStopImmediatePropagationFlag,
   setStopPropagationFlag,
@@ -144,6 +145,22 @@ export default class Event {
     return this._cancelable;
   }
 
+  /**
+   * Historical alias for the stop-propagation flag. Reading it returns whether
+   * `stopPropagation()` has been called (or `cancelBubble` has been set to
+   * `true`). Setting it to `true` stops propagation; setting it to `false` is a
+   * no-op. See https://dom.spec.whatwg.org/#dom-event-cancelbubble.
+   */
+  get cancelBubble(): boolean {
+    return getStopPropagationFlag(this);
+  }
+
+  set cancelBubble(value: boolean) {
+    if (value) {
+      setStopPropagationFlag(this, true);
+    }
+  }
+
   get composed(): boolean {
     return this._composed;
   }

packages/react-native/src/private/webapis/dom/events/__tests__/Event-itest.js

@@ -314,4 +314,48 @@ describe('Event', () => {
       );
     });
   });
+
+  describe('cancelBubble', () => {
+    it('defaults to false', () => {
+      const event = new Event('custom');
+
+      expect(event.cancelBubble).toBe(false);
+    });
+
+    it('stops propagation when set to true', () => {
+      const event = new Event('custom');
+
+      event.cancelBubble = true;
+
+      expect(event.cancelBubble).toBe(true);
+    });
+
+    it('is a no-op when set to false', () => {
+      const event = new Event('custom');
+
+      event.cancelBubble = false;
+      expect(event.cancelBubble).toBe(false);
+
+      // Setting it back to false does not reset a previously set flag.
+      event.cancelBubble = true;
+      event.cancelBubble = false;
+      expect(event.cancelBubble).toBe(true);
+    });
+
+    it('reflects stopPropagation()', () => {
+      const event = new Event('custom');
+
+      event.stopPropagation();
+
+      expect(event.cancelBubble).toBe(true);
+    });
+
+    it('reflects stopImmediatePropagation()', () => {
+      const event = new Event('custom');
+
+      event.stopImmediatePropagation();
+
+      expect(event.cancelBubble).toBe(true);
+    });
+  });
 });