React DOM: Add support for Popover API (#27981)

DiffTrain build for [6f90365](6f90365)
facebook · May 20, 2024 · 7b19874 · 7b19874
1 parent 0eecce3
commit 7b19874
Show file tree

Hide file tree

Showing 17 changed files with 349 additions and 53 deletions.
diff --git a/compiled/facebook-www/REVISION b/compiled/facebook-www/REVISION
@@ -1 +1 @@
-7a78d030281f2f0e02e7cdbed5c1fc5c4a1a1823
+6f903651283861af4e5a8838b3b74d2a953a0acc
diff --git a/compiled/facebook-www/ReactDOM-dev.classic.js b/compiled/facebook-www/ReactDOM-dev.classic.js
@@ -5524,6 +5524,9 @@ var possibleStandardNames = {
   pointsatx: 'pointsAtX',
   pointsaty: 'pointsAtY',
   pointsatz: 'pointsAtZ',
+  popover: 'popover',
+  popovertarget: 'popoverTarget',
+  popovertargetaction: 'popoverTargetAction',
   prefix: 'prefix',
   preservealpha: 'preserveAlpha',
   preserveaspectratio: 'preserveAspectRatio',
@@ -30846,7 +30849,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-classic-54329650';
+var ReactVersion = '19.0.0-www-classic-c016de4d';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {
@@ -32239,6 +32242,13 @@ var WheelEventInterface = assign({}, MouseEventInterface, {
 
 var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
 
+var ToggleEventInterface = assign({}, EventInterface, {
+  newState: 0,
+  oldState: 0
+});
+
+var SyntheticToggleEvent = createSyntheticEvent(ToggleEventInterface);
+
 var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
 
 var START_KEYCODE = 229;
@@ -33702,7 +33712,7 @@ var topLevelEventsToReactNames = new Map(); // NOTE: Capitalization is important
 //
 // prettier-ignore
 
-var simpleEventPluginEvents = ['abort', 'auxClick', 'cancel', 'canPlay', 'canPlayThrough', 'click', 'close', 'contextMenu', 'copy', 'cut', 'drag', 'dragEnd', 'dragEnter', 'dragExit', 'dragLeave', 'dragOver', 'dragStart', 'drop', 'durationChange', 'emptied', 'encrypted', 'ended', 'error', 'gotPointerCapture', 'input', 'invalid', 'keyDown', 'keyPress', 'keyUp', 'load', 'loadedData', 'loadedMetadata', 'loadStart', 'lostPointerCapture', 'mouseDown', 'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'paste', 'pause', 'play', 'playing', 'pointerCancel', 'pointerDown', 'pointerMove', 'pointerOut', 'pointerOver', 'pointerUp', 'progress', 'rateChange', 'reset', 'resize', 'seeked', 'seeking', 'stalled', 'submit', 'suspend', 'timeUpdate', 'touchCancel', 'touchEnd', 'touchStart', 'volumeChange', 'scroll', 'scrollEnd', 'toggle', 'touchMove', 'waiting', 'wheel'];
+var simpleEventPluginEvents = ['abort', 'auxClick', 'beforeToggle', 'cancel', 'canPlay', 'canPlayThrough', 'click', 'close', 'contextMenu', 'copy', 'cut', 'drag', 'dragEnd', 'dragEnter', 'dragExit', 'dragLeave', 'dragOver', 'dragStart', 'drop', 'durationChange', 'emptied', 'encrypted', 'ended', 'error', 'gotPointerCapture', 'input', 'invalid', 'keyDown', 'keyPress', 'keyUp', 'load', 'loadedData', 'loadedMetadata', 'loadStart', 'lostPointerCapture', 'mouseDown', 'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'paste', 'pause', 'play', 'playing', 'pointerCancel', 'pointerDown', 'pointerMove', 'pointerOut', 'pointerOver', 'pointerUp', 'progress', 'rateChange', 'reset', 'resize', 'seeked', 'seeking', 'stalled', 'submit', 'suspend', 'timeUpdate', 'touchCancel', 'touchEnd', 'touchStart', 'volumeChange', 'scroll', 'scrollEnd', 'toggle', 'touchMove', 'waiting', 'wheel'];
 
 {
   // Special case: these two events don't have on* React handler
@@ -33858,6 +33868,12 @@ function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, n
     case 'pointerup':
       SyntheticEventCtor = SyntheticPointerEvent;
       break;
+
+    case 'toggle':
+    case 'beforetoggle':
+      // MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
+      SyntheticEventCtor = SyntheticToggleEvent;
+      break;
   }
 
   var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
@@ -34093,7 +34109,7 @@ var mediaEventTypes = ['abort', 'canplay', 'canplaythrough', 'durationchange', '
 // set them on the actual target element itself. This is primarily
 // because these events do not consistently bubble in the DOM.
 
-var nonDelegatedEvents = new Set(['cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
+var nonDelegatedEvents = new Set(['beforetoggle', 'cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
 
 function executeDispatch(event, listener, currentTarget) {
   event.currentTarget = currentTarget;
@@ -34691,6 +34707,7 @@ var didWarnFormActionName = false;
 var didWarnFormActionTarget = false;
 var didWarnFormActionMethod = false;
 var didWarnForNewBooleanPropsWithEmptyValue;
+var didWarnPopoverTargetObject = false;
 var canDiffStyleForHydrationWarning;
 
 {
@@ -35285,6 +35302,12 @@ function setProp(domElement, tag, key, value, props, prevValue) {
         break;
       }
 
+    case 'popover':
+      listenToNonDelegatedEvent('beforetoggle', domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
+      setValueForAttribute(domElement, 'popover', value);
+      break;
+
     case 'xlinkActuate':
       setValueForNamespacedAttribute(domElement, xlinkNamespace, 'xlink:actuate', value);
       break;
@@ -35341,6 +35364,16 @@ function setProp(domElement, tag, key, value, props, prevValue) {
     case 'innerText':
     case 'textContent':
       break;
+
+    case 'popoverTarget':
+      {
+        if (!didWarnPopoverTargetObject && value != null && typeof value === 'object') {
+          didWarnPopoverTargetObject = true;
+
+          error('The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.', value);
+        }
+      }
+
     // Fall through
 
     default:
@@ -37257,6 +37290,13 @@ function hydrateProperties(domElement, tag, props, hostContext) {
     }
   }
 
+  if (props.popover != null) {
+    // We listen to this event in case to ensure emulated bubble
+    // listeners still fire for the toggle event.
+    listenToNonDelegatedEvent('beforetoggle', domElement);
+    listenToNonDelegatedEvent('toggle', domElement);
+  }
+
   if (props.onScroll != null) {
     listenToNonDelegatedEvent('scroll', domElement);
   }
@@ -40903,6 +40943,7 @@ function getEventPriority(domEventName) {
     case 'selectstart':
       return DiscreteEventPriority;
 
+    case 'beforetoggle':
     case 'drag':
     case 'dragenter':
     case 'dragexit':

diff --git a/compiled/facebook-www/ReactDOM-dev.modern.js b/compiled/facebook-www/ReactDOM-dev.modern.js
@@ -5473,6 +5473,9 @@ var possibleStandardNames = {
   pointsatx: 'pointsAtX',
   pointsaty: 'pointsAtY',
   pointsatz: 'pointsAtZ',
+  popover: 'popover',
+  popovertarget: 'popoverTarget',
+  popovertargetaction: 'popoverTargetAction',
   prefix: 'prefix',
   preservealpha: 'preserveAlpha',
   preserveaspectratio: 'preserveAspectRatio',
@@ -30021,7 +30024,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
   return root;
 }
 
-var ReactVersion = '19.0.0-www-modern-811b0700';
+var ReactVersion = '19.0.0-www-modern-7e811787';
 
 function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
 implementation) {
@@ -31396,6 +31399,13 @@ var WheelEventInterface = assign({}, MouseEventInterface, {
 
 var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
 
+var ToggleEventInterface = assign({}, EventInterface, {
+  newState: 0,
+  oldState: 0
+});
+
+var SyntheticToggleEvent = createSyntheticEvent(ToggleEventInterface);
+
 var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
 
 var START_KEYCODE = 229;
@@ -32859,7 +32869,7 @@ var topLevelEventsToReactNames = new Map(); // NOTE: Capitalization is important
 //
 // prettier-ignore
 
-var simpleEventPluginEvents = ['abort', 'auxClick', 'cancel', 'canPlay', 'canPlayThrough', 'click', 'close', 'contextMenu', 'copy', 'cut', 'drag', 'dragEnd', 'dragEnter', 'dragExit', 'dragLeave', 'dragOver', 'dragStart', 'drop', 'durationChange', 'emptied', 'encrypted', 'ended', 'error', 'gotPointerCapture', 'input', 'invalid', 'keyDown', 'keyPress', 'keyUp', 'load', 'loadedData', 'loadedMetadata', 'loadStart', 'lostPointerCapture', 'mouseDown', 'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'paste', 'pause', 'play', 'playing', 'pointerCancel', 'pointerDown', 'pointerMove', 'pointerOut', 'pointerOver', 'pointerUp', 'progress', 'rateChange', 'reset', 'resize', 'seeked', 'seeking', 'stalled', 'submit', 'suspend', 'timeUpdate', 'touchCancel', 'touchEnd', 'touchStart', 'volumeChange', 'scroll', 'scrollEnd', 'toggle', 'touchMove', 'waiting', 'wheel'];
+var simpleEventPluginEvents = ['abort', 'auxClick', 'beforeToggle', 'cancel', 'canPlay', 'canPlayThrough', 'click', 'close', 'contextMenu', 'copy', 'cut', 'drag', 'dragEnd', 'dragEnter', 'dragExit', 'dragLeave', 'dragOver', 'dragStart', 'drop', 'durationChange', 'emptied', 'encrypted', 'ended', 'error', 'gotPointerCapture', 'input', 'invalid', 'keyDown', 'keyPress', 'keyUp', 'load', 'loadedData', 'loadedMetadata', 'loadStart', 'lostPointerCapture', 'mouseDown', 'mouseMove', 'mouseOut', 'mouseOver', 'mouseUp', 'paste', 'pause', 'play', 'playing', 'pointerCancel', 'pointerDown', 'pointerMove', 'pointerOut', 'pointerOver', 'pointerUp', 'progress', 'rateChange', 'reset', 'resize', 'seeked', 'seeking', 'stalled', 'submit', 'suspend', 'timeUpdate', 'touchCancel', 'touchEnd', 'touchStart', 'volumeChange', 'scroll', 'scrollEnd', 'toggle', 'touchMove', 'waiting', 'wheel'];
 
 {
   // Special case: these two events don't have on* React handler
@@ -33015,6 +33025,12 @@ function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, n
     case 'pointerup':
       SyntheticEventCtor = SyntheticPointerEvent;
       break;
+
+    case 'toggle':
+    case 'beforetoggle':
+      // MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
+      SyntheticEventCtor = SyntheticToggleEvent;
+      break;
   }
 
   var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
@@ -33250,7 +33266,7 @@ var mediaEventTypes = ['abort', 'canplay', 'canplaythrough', 'durationchange', '
 // set them on the actual target element itself. This is primarily
 // because these events do not consistently bubble in the DOM.
 
-var nonDelegatedEvents = new Set(['cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
+var nonDelegatedEvents = new Set(['beforetoggle', 'cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
 
 function executeDispatch(event, listener, currentTarget) {
   event.currentTarget = currentTarget;
@@ -33848,6 +33864,7 @@ var didWarnFormActionName = false;
 var didWarnFormActionTarget = false;
 var didWarnFormActionMethod = false;
 var didWarnForNewBooleanPropsWithEmptyValue;
+var didWarnPopoverTargetObject = false;
 var canDiffStyleForHydrationWarning;
 
 {
@@ -34442,6 +34459,12 @@ function setProp(domElement, tag, key, value, props, prevValue) {
         break;
       }
 
+    case 'popover':
+      listenToNonDelegatedEvent('beforetoggle', domElement);
+      listenToNonDelegatedEvent('toggle', domElement);
+      setValueForAttribute(domElement, 'popover', value);
+      break;
+
     case 'xlinkActuate':
       setValueForNamespacedAttribute(domElement, xlinkNamespace, 'xlink:actuate', value);
       break;
@@ -34498,6 +34521,16 @@ function setProp(domElement, tag, key, value, props, prevValue) {
     case 'innerText':
     case 'textContent':
       break;
+
+    case 'popoverTarget':
+      {
+        if (!didWarnPopoverTargetObject && value != null && typeof value === 'object') {
+          didWarnPopoverTargetObject = true;
+
+          error('The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.', value);
+        }
+      }
+
     // Fall through
 
     default:
@@ -36412,6 +36445,13 @@ function hydrateProperties(domElement, tag, props, hostContext) {
     }
   }
 
+  if (props.popover != null) {
+    // We listen to this event in case to ensure emulated bubble
+    // listeners still fire for the toggle event.
+    listenToNonDelegatedEvent('beforetoggle', domElement);
+    listenToNonDelegatedEvent('toggle', domElement);
+  }
+
   if (props.onScroll != null) {
     listenToNonDelegatedEvent('scroll', domElement);
   }
@@ -40070,6 +40110,7 @@ function getEventPriority(domEventName) {
     case 'selectstart':
       return DiscreteEventPriority;
 
+    case 'beforetoggle':
     case 'drag':
     case 'dragenter':
     case 'dragexit':

diff --git a/compiled/facebook-www/ReactDOM-prod.classic.js b/compiled/facebook-www/ReactDOM-prod.classic.js
@@ -1751,7 +1751,10 @@ function prepareToHydrateHostInstance(fiber) {
   instance.textContent === "" + type ||
   !0 === props.suppressHydrationWarning ||
   checkForUnmatchedText(instance.textContent, type)
-    ? (null != props.onScroll && listenToNonDelegatedEvent("scroll", instance),
+    ? (null != props.popover &&
+        (listenToNonDelegatedEvent("beforetoggle", instance),
+        listenToNonDelegatedEvent("toggle", instance)),
+      null != props.onScroll && listenToNonDelegatedEvent("scroll", instance),
       null != props.onScrollEnd &&
         listenToNonDelegatedEvent("scrollend", instance),
       null != props.onClick && (instance.onclick = noop$1),
@@ -12945,6 +12948,11 @@ var KeyboardEventInterface = assign({}, UIEventInterface, {
     deltaMode: 0
   }),
   SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface),
+  ToggleEventInterface = assign({}, EventInterface, {
+    newState: 0,
+    oldState: 0
+  }),
+  SyntheticToggleEvent = createSyntheticEvent(ToggleEventInterface),
   END_KEYCODES = [9, 13, 27, 32],
   canUseCompositionEvent = canUseDOM && "CompositionEvent" in window,
   documentMode = null;
@@ -13401,7 +13409,7 @@ var ANIMATION_END = getVendorPrefixedEventName("animationend"),
   TRANSITION_END = getVendorPrefixedEventName("transitionend"),
   topLevelEventsToReactNames = new Map(),
   simpleEventPluginEvents =
-    "abort auxClick cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll scrollEnd toggle touchMove waiting wheel".split(
+    "abort auxClick beforeToggle cancel canPlay canPlayThrough click close contextMenu copy cut drag dragEnd dragEnter dragExit dragLeave dragOver dragStart drop durationChange emptied encrypted ended error gotPointerCapture input invalid keyDown keyPress keyUp load loadedData loadedMetadata loadStart lostPointerCapture mouseDown mouseMove mouseOut mouseOver mouseUp paste pause play playing pointerCancel pointerDown pointerMove pointerOut pointerOver pointerUp progress rateChange reset resize seeked seeking stalled submit suspend timeUpdate touchCancel touchEnd touchStart volumeChange scroll scrollEnd toggle touchMove waiting wheel".split(
       " "
     );
 topLevelEventsToReactNames.set("beforeblur", null);
@@ -13568,7 +13576,7 @@ var mediaEventTypes =
       " "
     ),
   nonDelegatedEvents = new Set(
-    "cancel close invalid load scroll scrollend toggle"
+    "beforetoggle cancel close invalid load scroll scrollend toggle"
       .split(" ")
       .concat(mediaEventTypes)
   );
@@ -13866,6 +13874,10 @@ function dispatchEventForPluginEventSystem(
           case "pointerover":
           case "pointerup":
             SyntheticEventCtor = SyntheticPointerEvent;
+            break;
+          case "toggle":
+          case "beforetoggle":
+            SyntheticEventCtor = SyntheticToggleEvent;
         }
         var inCapturePhase = 0 !== (eventSystemFlags & 4);
         eventSystemFlags & 1
@@ -14589,6 +14601,11 @@ function setProp(domElement, tag, key, value, props, prevValue) {
         ? domElement.removeAttribute(key)
         : domElement.setAttribute(key, value);
       break;
+    case "popover":
+      listenToNonDelegatedEvent("beforetoggle", domElement);
+      listenToNonDelegatedEvent("toggle", domElement);
+      setValueForAttribute(domElement, "popover", value);
+      break;
     case "xlinkActuate":
       setValueForNamespacedAttribute(
         domElement,
@@ -16936,6 +16953,7 @@ function getEventPriority(domEventName) {
     case "select":
     case "selectstart":
       return 2;
+    case "beforetoggle":
     case "drag":
     case "dragenter":
     case "dragexit":
@@ -17036,7 +17054,7 @@ Internals.Events = [
 var devToolsConfig$jscomp$inline_1734 = {
   findFiberByHostInstance: getClosestInstanceFromNode,
   bundleType: 0,
-  version: "19.0.0-www-classic-564074b7",
+  version: "19.0.0-www-classic-c8314b58",
   rendererPackageName: "react-dom"
 };
 var internals$jscomp$inline_2178 = {
@@ -17066,7 +17084,7 @@ var internals$jscomp$inline_2178 = {
   scheduleRoot: null,
   setRefreshHandler: null,
   getCurrentFiber: null,
-  reconcilerVersion: "19.0.0-www-classic-564074b7"
+  reconcilerVersion: "19.0.0-www-classic-c8314b58"
 };
 if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
   var hook$jscomp$inline_2179 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17570,4 +17588,4 @@ exports.useFormState = function (action, initialState, permalink) {
 exports.useFormStatus = function () {
   return ReactSharedInternals.H.useHostTransitionStatus();
 };
-exports.version = "19.0.0-www-classic-564074b7";
+exports.version = "19.0.0-www-classic-c8314b58";