Skip to content

Commit 7b19874

Browse files
eps1loneps1lon
committed
React DOM: Add support for Popover API (#27981)
DiffTrain build for [6f90365](6f90365)
1 parent 0eecce3 commit 7b19874

17 files changed

+349
-53
lines changed

‎compiled/facebook-www/REVISION‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
7a78d030281f2f0e02e7cdbed5c1fc5c4a1a1823
1+
6f903651283861af4e5a8838b3b74d2a953a0acc

‎compiled/facebook-www/ReactDOM-dev.classic.js‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5524,6 +5524,9 @@ var possibleStandardNames = {
55245524
pointsatx: 'pointsAtX',
55255525
pointsaty: 'pointsAtY',
55265526
pointsatz: 'pointsAtZ',
5527+
popover: 'popover',
5528+
popovertarget: 'popoverTarget',
5529+
popovertargetaction: 'popoverTargetAction',
55275530
prefix: 'prefix',
55285531
preservealpha: 'preserveAlpha',
55295532
preserveaspectratio: 'preserveAspectRatio',
@@ -30846,7 +30849,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
3084630849
return root;
3084730850
}
3084830851

30849-
var ReactVersion = '19.0.0-www-classic-54329650';
30852+
var ReactVersion = '19.0.0-www-classic-c016de4d';
3085030853

3085130854
function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
3085230855
implementation) {
@@ -32239,6 +32242,13 @@ var WheelEventInterface = assign({}, MouseEventInterface, {
3223932242

3224032243
var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
3224132244

32245+
var ToggleEventInterface = assign({}, EventInterface, {
32246+
newState: 0,
32247+
oldState: 0
32248+
});
32249+
32250+
var SyntheticToggleEvent = createSyntheticEvent(ToggleEventInterface);
32251+
3224232252
var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
3224332253

3224432254
var START_KEYCODE = 229;
@@ -33702,7 +33712,7 @@ var topLevelEventsToReactNames = new Map(); // NOTE: Capitalization is important
3370233712
//
3370333713
// prettier-ignore
3370433714

33705-
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'];
33715+
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'];
3370633716

3370733717
{
3370833718
// Special case: these two events don't have on* React handler
@@ -33858,6 +33868,12 @@ function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, n
3385833868
case 'pointerup':
3385933869
SyntheticEventCtor = SyntheticPointerEvent;
3386033870
break;
33871+
33872+
case 'toggle':
33873+
case 'beforetoggle':
33874+
// MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
33875+
SyntheticEventCtor = SyntheticToggleEvent;
33876+
break;
3386133877
}
3386233878

3386333879
var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
@@ -34093,7 +34109,7 @@ var mediaEventTypes = ['abort', 'canplay', 'canplaythrough', 'durationchange', '
3409334109
// set them on the actual target element itself. This is primarily
3409434110
// because these events do not consistently bubble in the DOM.
3409534111

34096-
var nonDelegatedEvents = new Set(['cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
34112+
var nonDelegatedEvents = new Set(['beforetoggle', 'cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
3409734113

3409834114
function executeDispatch(event, listener, currentTarget) {
3409934115
event.currentTarget = currentTarget;
@@ -34691,6 +34707,7 @@ var didWarnFormActionName = false;
3469134707
var didWarnFormActionTarget = false;
3469234708
var didWarnFormActionMethod = false;
3469334709
var didWarnForNewBooleanPropsWithEmptyValue;
34710+
var didWarnPopoverTargetObject = false;
3469434711
var canDiffStyleForHydrationWarning;
3469534712

3469634713
{
@@ -35285,6 +35302,12 @@ function setProp(domElement, tag, key, value, props, prevValue) {
3528535302
break;
3528635303
}
3528735304

35305+
case 'popover':
35306+
listenToNonDelegatedEvent('beforetoggle', domElement);
35307+
listenToNonDelegatedEvent('toggle', domElement);
35308+
setValueForAttribute(domElement, 'popover', value);
35309+
break;
35310+
3528835311
case 'xlinkActuate':
3528935312
setValueForNamespacedAttribute(domElement, xlinkNamespace, 'xlink:actuate', value);
3529035313
break;
@@ -35341,6 +35364,16 @@ function setProp(domElement, tag, key, value, props, prevValue) {
3534135364
case 'innerText':
3534235365
case 'textContent':
3534335366
break;
35367+
35368+
case 'popoverTarget':
35369+
{
35370+
if (!didWarnPopoverTargetObject && value != null && typeof value === 'object') {
35371+
didWarnPopoverTargetObject = true;
35372+
35373+
error('The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.', value);
35374+
}
35375+
}
35376+
3534435377
// Fall through
3534535378

3534635379
default:
@@ -37257,6 +37290,13 @@ function hydrateProperties(domElement, tag, props, hostContext) {
3725737290
}
3725837291
}
3725937292

37293+
if (props.popover != null) {
37294+
// We listen to this event in case to ensure emulated bubble
37295+
// listeners still fire for the toggle event.
37296+
listenToNonDelegatedEvent('beforetoggle', domElement);
37297+
listenToNonDelegatedEvent('toggle', domElement);
37298+
}
37299+
3726037300
if (props.onScroll != null) {
3726137301
listenToNonDelegatedEvent('scroll', domElement);
3726237302
}
@@ -40903,6 +40943,7 @@ function getEventPriority(domEventName) {
4090340943
case 'selectstart':
4090440944
return DiscreteEventPriority;
4090540945

40946+
case 'beforetoggle':
4090640947
case 'drag':
4090740948
case 'dragenter':
4090840949
case 'dragexit':

‎compiled/facebook-www/ReactDOM-dev.modern.js‎

Lines changed: 44 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5473,6 +5473,9 @@ var possibleStandardNames = {
54735473
pointsatx: 'pointsAtX',
54745474
pointsaty: 'pointsAtY',
54755475
pointsatz: 'pointsAtZ',
5476+
popover: 'popover',
5477+
popovertarget: 'popoverTarget',
5478+
popovertargetaction: 'popoverTargetAction',
54765479
prefix: 'prefix',
54775480
preservealpha: 'preserveAlpha',
54785481
preserveaspectratio: 'preserveAspectRatio',
@@ -30021,7 +30024,7 @@ identifierPrefix, onUncaughtError, onCaughtError, onRecoverableError, transition
3002130024
return root;
3002230025
}
3002330026

30024-
var ReactVersion = '19.0.0-www-modern-811b0700';
30027+
var ReactVersion = '19.0.0-www-modern-7e811787';
3002530028

3002630029
function createPortal$1(children, containerInfo, // TODO: figure out the API for cross-renderer implementation.
3002730030
implementation) {
@@ -31396,6 +31399,13 @@ var WheelEventInterface = assign({}, MouseEventInterface, {
3139631399

3139731400
var SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface);
3139831401

31402+
var ToggleEventInterface = assign({}, EventInterface, {
31403+
newState: 0,
31404+
oldState: 0
31405+
});
31406+
31407+
var SyntheticToggleEvent = createSyntheticEvent(ToggleEventInterface);
31408+
3139931409
var END_KEYCODES = [9, 13, 27, 32]; // Tab, Return, Esc, Space
3140031410

3140131411
var START_KEYCODE = 229;
@@ -32859,7 +32869,7 @@ var topLevelEventsToReactNames = new Map(); // NOTE: Capitalization is important
3285932869
//
3286032870
// prettier-ignore
3286132871

32862-
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'];
32872+
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'];
3286332873

3286432874
{
3286532875
// Special case: these two events don't have on* React handler
@@ -33015,6 +33025,12 @@ function extractEvents$2(dispatchQueue, domEventName, targetInst, nativeEvent, n
3301533025
case 'pointerup':
3301633026
SyntheticEventCtor = SyntheticPointerEvent;
3301733027
break;
33028+
33029+
case 'toggle':
33030+
case 'beforetoggle':
33031+
// MDN claims <details> should not receive ToggleEvent contradicting the spec: https://html.spec.whatwg.org/multipage/indices.html#event-toggle
33032+
SyntheticEventCtor = SyntheticToggleEvent;
33033+
break;
3301833034
}
3301933035

3302033036
var inCapturePhase = (eventSystemFlags & IS_CAPTURE_PHASE) !== 0;
@@ -33250,7 +33266,7 @@ var mediaEventTypes = ['abort', 'canplay', 'canplaythrough', 'durationchange', '
3325033266
// set them on the actual target element itself. This is primarily
3325133267
// because these events do not consistently bubble in the DOM.
3325233268

33253-
var nonDelegatedEvents = new Set(['cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
33269+
var nonDelegatedEvents = new Set(['beforetoggle', 'cancel', 'close', 'invalid', 'load', 'scroll', 'scrollend', 'toggle'].concat(mediaEventTypes));
3325433270

3325533271
function executeDispatch(event, listener, currentTarget) {
3325633272
event.currentTarget = currentTarget;
@@ -33848,6 +33864,7 @@ var didWarnFormActionName = false;
3384833864
var didWarnFormActionTarget = false;
3384933865
var didWarnFormActionMethod = false;
3385033866
var didWarnForNewBooleanPropsWithEmptyValue;
33867+
var didWarnPopoverTargetObject = false;
3385133868
var canDiffStyleForHydrationWarning;
3385233869

3385333870
{
@@ -34442,6 +34459,12 @@ function setProp(domElement, tag, key, value, props, prevValue) {
3444234459
break;
3444334460
}
3444434461

34462+
case 'popover':
34463+
listenToNonDelegatedEvent('beforetoggle', domElement);
34464+
listenToNonDelegatedEvent('toggle', domElement);
34465+
setValueForAttribute(domElement, 'popover', value);
34466+
break;
34467+
3444534468
case 'xlinkActuate':
3444634469
setValueForNamespacedAttribute(domElement, xlinkNamespace, 'xlink:actuate', value);
3444734470
break;
@@ -34498,6 +34521,16 @@ function setProp(domElement, tag, key, value, props, prevValue) {
3449834521
case 'innerText':
3449934522
case 'textContent':
3450034523
break;
34524+
34525+
case 'popoverTarget':
34526+
{
34527+
if (!didWarnPopoverTargetObject && value != null && typeof value === 'object') {
34528+
didWarnPopoverTargetObject = true;
34529+
34530+
error('The `popoverTarget` prop expects the ID of an Element as a string. Received %s instead.', value);
34531+
}
34532+
}
34533+
3450134534
// Fall through
3450234535

3450334536
default:
@@ -36412,6 +36445,13 @@ function hydrateProperties(domElement, tag, props, hostContext) {
3641236445
}
3641336446
}
3641436447

36448+
if (props.popover != null) {
36449+
// We listen to this event in case to ensure emulated bubble
36450+
// listeners still fire for the toggle event.
36451+
listenToNonDelegatedEvent('beforetoggle', domElement);
36452+
listenToNonDelegatedEvent('toggle', domElement);
36453+
}
36454+
3641536455
if (props.onScroll != null) {
3641636456
listenToNonDelegatedEvent('scroll', domElement);
3641736457
}
@@ -40070,6 +40110,7 @@ function getEventPriority(domEventName) {
4007040110
case 'selectstart':
4007140111
return DiscreteEventPriority;
4007240112

40113+
case 'beforetoggle':
4007340114
case 'drag':
4007440115
case 'dragenter':
4007540116
case 'dragexit':

‎compiled/facebook-www/ReactDOM-prod.classic.js‎

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1751,7 +1751,10 @@ function prepareToHydrateHostInstance(fiber) {
17511751
instance.textContent === "" + type ||
17521752
!0 === props.suppressHydrationWarning ||
17531753
checkForUnmatchedText(instance.textContent, type)
1754-
? (null != props.onScroll && listenToNonDelegatedEvent("scroll", instance),
1754+
? (null != props.popover &&
1755+
(listenToNonDelegatedEvent("beforetoggle", instance),
1756+
listenToNonDelegatedEvent("toggle", instance)),
1757+
null != props.onScroll && listenToNonDelegatedEvent("scroll", instance),
17551758
null != props.onScrollEnd &&
17561759
listenToNonDelegatedEvent("scrollend", instance),
17571760
null != props.onClick && (instance.onclick = noop$1),
@@ -12945,6 +12948,11 @@ var KeyboardEventInterface = assign({}, UIEventInterface, {
1294512948
deltaMode: 0
1294612949
}),
1294712950
SyntheticWheelEvent = createSyntheticEvent(WheelEventInterface),
12951+
ToggleEventInterface = assign({}, EventInterface, {
12952+
newState: 0,
12953+
oldState: 0
12954+
}),
12955+
SyntheticToggleEvent = createSyntheticEvent(ToggleEventInterface),
1294812956
END_KEYCODES = [9, 13, 27, 32],
1294912957
canUseCompositionEvent = canUseDOM && "CompositionEvent" in window,
1295012958
documentMode = null;
@@ -13401,7 +13409,7 @@ var ANIMATION_END = getVendorPrefixedEventName("animationend"),
1340113409
TRANSITION_END = getVendorPrefixedEventName("transitionend"),
1340213410
topLevelEventsToReactNames = new Map(),
1340313411
simpleEventPluginEvents =
13404-
"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(
13412+
"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(
1340513413
" "
1340613414
);
1340713415
topLevelEventsToReactNames.set("beforeblur", null);
@@ -13568,7 +13576,7 @@ var mediaEventTypes =
1356813576
" "
1356913577
),
1357013578
nonDelegatedEvents = new Set(
13571-
"cancel close invalid load scroll scrollend toggle"
13579+
"beforetoggle cancel close invalid load scroll scrollend toggle"
1357213580
.split(" ")
1357313581
.concat(mediaEventTypes)
1357413582
);
@@ -13866,6 +13874,10 @@ function dispatchEventForPluginEventSystem(
1386613874
case "pointerover":
1386713875
case "pointerup":
1386813876
SyntheticEventCtor = SyntheticPointerEvent;
13877+
break;
13878+
case "toggle":
13879+
case "beforetoggle":
13880+
SyntheticEventCtor = SyntheticToggleEvent;
1386913881
}
1387013882
var inCapturePhase = 0 !== (eventSystemFlags & 4);
1387113883
eventSystemFlags & 1
@@ -14589,6 +14601,11 @@ function setProp(domElement, tag, key, value, props, prevValue) {
1458914601
? domElement.removeAttribute(key)
1459014602
: domElement.setAttribute(key, value);
1459114603
break;
14604+
case "popover":
14605+
listenToNonDelegatedEvent("beforetoggle", domElement);
14606+
listenToNonDelegatedEvent("toggle", domElement);
14607+
setValueForAttribute(domElement, "popover", value);
14608+
break;
1459214609
case "xlinkActuate":
1459314610
setValueForNamespacedAttribute(
1459414611
domElement,
@@ -16936,6 +16953,7 @@ function getEventPriority(domEventName) {
1693616953
case "select":
1693716954
case "selectstart":
1693816955
return 2;
16956+
case "beforetoggle":
1693916957
case "drag":
1694016958
case "dragenter":
1694116959
case "dragexit":
@@ -17036,7 +17054,7 @@ Internals.Events = [
1703617054
var devToolsConfig$jscomp$inline_1734 = {
1703717055
findFiberByHostInstance: getClosestInstanceFromNode,
1703817056
bundleType: 0,
17039-
version: "19.0.0-www-classic-564074b7",
17057+
version: "19.0.0-www-classic-c8314b58",
1704017058
rendererPackageName: "react-dom"
1704117059
};
1704217060
var internals$jscomp$inline_2178 = {
@@ -17066,7 +17084,7 @@ var internals$jscomp$inline_2178 = {
1706617084
scheduleRoot: null,
1706717085
setRefreshHandler: null,
1706817086
getCurrentFiber: null,
17069-
reconcilerVersion: "19.0.0-www-classic-564074b7"
17087+
reconcilerVersion: "19.0.0-www-classic-c8314b58"
1707017088
};
1707117089
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1707217090
var hook$jscomp$inline_2179 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17570,4 +17588,4 @@ exports.useFormState = function (action, initialState, permalink) {
1757017588
exports.useFormStatus = function () {
1757117589
return ReactSharedInternals.H.useHostTransitionStatus();
1757217590
};
17573-
exports.version = "19.0.0-www-classic-564074b7";
17591+
exports.version = "19.0.0-www-classic-c8314b58";

0 commit comments

Comments
 (0)