React DOM: Add support for Popover API

[eps1lon]

Summary

Closes https://github.com/facebook/react/issues/27479 Alternate to https://github.com/facebook/react/pull/27480

This includes support for popover, popoverTarget, popoverTargetAction, onToggle and onBeforeToggle. The events are only triggered for elements that have a popover prop matching the spec.

The Popover API is currently supported in all major browsers (Chrome, Safari, Firefox)

We decided to go with popoverTarget instead of popoverTargetElement for the prop naming since popoverTarget takes string just like popovertarget does. popoverTargetElement reads and writes HTMLElement.

How did you test this change?

• [x] Attribute fixture (commited changes with non-experimental build since this is the build we were using before)
• [x] Codesandbox supports basic Popover functionality

[react-sizebot]

Comparing: 1d6eebfb7ff44b24627ef404112bb151f683efe7...085028133f5b4ceddaa5df37a7733f3b4048d2d6

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.js	=	6.66 kB	6.66 kB	+0.05%	1.82 kB	1.82 kB
oss-stable/react-dom/cjs/react-dom-client.production.js	+0.14%	495.01 kB	495.71 kB	+0.12%	88.68 kB	88.78 kB
oss-experimental/react-dom/cjs/react-dom.production.js	=	6.67 kB	6.67 kB	+0.05%	1.83 kB	1.83 kB
oss-experimental/react-dom/cjs/react-dom-client.production.js	+0.14%	499.81 kB	500.51 kB	+0.13%	89.36 kB	89.47 kB
facebook-www/ReactDOM-prod.classic.js	+0.12%	592.16 kB	592.86 kB	+0.12%	104.15 kB	104.28 kB
facebook-www/ReactDOM-prod.modern.js	+0.12%	568.39 kB	569.08 kB	+0.15%	100.55 kB	100.70 kB
test_utils/ReactAllWarnings.js	Deleted	64.26 kB	0.00 kB	Deleted	16.02 kB	0.00 kB

Significant size changes

Includes any change greater than 0.2%:

Expand to show

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
facebook-www/ReactTestUtils-dev.classic.js	+0.34%	44.53 kB	44.68 kB	+0.24%	12.75 kB	12.78 kB
facebook-www/ReactTestUtils-dev.modern.js	+0.34%	44.53 kB	44.68 kB	+0.24%	12.75 kB	12.78 kB
test_utils/ReactAllWarnings.js	Deleted	64.26 kB	0.00 kB	Deleted	16.02 kB	0.00 kB

Generated by :no_entry_sign: dangerJS against 085028133f5b4ceddaa5df37a7733f3b4048d2d6

[acusti]

@eps1lon first of all, can’t wait for this to land! the browser console and linting errors are distracting and painful. i asked this on the previous PR but never heard a reply, so trying again here: do you know how much of a lift it would be to extend support to include the new toggle and beforetoggle events associated with the Popover API?

[eps1lon]

@acusti Thank you for raising this. These events should be part of this PR. I'll add some tests.

[acusti]

@eps1lon i just tried out this build (based on your instructions, thank you) and it’s looking great! way better to be able to use onToggle={handleToggle} and not a bunch of nonsense with refs / state / effects to (add|remove)EventListener during the component lifecycle.

one thing i noticed is that the ToggleEvent’s instance properties newState and oldState aren’t available on the SyntheticBaseEvent event that is received when using the onToggle prop to assign a handler. the instance properties are available on the event.nativeEvent, so i’m not blocked, but it surprised me.

i will be using this build and will report if anything else comes up, but based on using it so far, i’m very excited for this support to land. and for anyone following this PR, you can try out the builds from this PR by installing react and react-dom using these identifiers:

react@https://react-builds.vercel.app/api/prs/27981/packages/react react-dom@https://react-builds.vercel.app/api/prs/27981/packages/react-dom

UPDATE see below for latest dependency strings

[mariusGundersen]

Will this be part of react 19?

[eps1lon]

@acusti Good catch, thank you. Should work with the latest version of this branch: https://codesandbox.io/p/github/eps1lon/react-popover-api-demo/main

[acusti]

@eps1lon i just tried it out using the dependency strings from your codesandbox and the toggle event newState / oldState properties are there and correct :tada:

react@https://react-builds.vercel.app/api/commits/29b66a538dfca92616c145c811f810ca2987ae29/packages/react react-dom@https://react-builds.vercel.app/api/commits/29b66a538dfca92616c145c811f810ca2987ae29/packages/react-dom

UPDATE see below for latest dependency strings

[vercel[bot]]

@eps1lon is attempting to deploy a commit to the Meta Open Source Team on Vercel.

A member of the Team first needs to authorize it.

[eps1lon]

We decided to go with popoverTarget instead of popoverTargetElement for the prop naming since popoverTarget takes a string just like popovertarget does. popoverTargetElement reads and writes HTMLElement.

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
react-compiler-playground	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 20, 2024 7:10pm

[acusti]

dependency strings for those who want to try out the latest version of support (rebased off of latest react/react-dom and including the prop name change reversion back from popoverTargetElement → popoverTarget):

react@https://react-builds.vercel.app/api/commits/f74fb57f87832af99696214075e48246018678ec/packages/react react-dom@https://react-builds.vercel.app/api/commits/f74fb57f87832af99696214075e48246018678ec/packages/react-dom

[weilbith]

I'm highly interested in this feature. Is it worth to wait, because it will just take a few days till a new release or...? No idea about the release process of React. But I really wanna use this in combination with a polyfill where needed. Would be a bummer if that's not possible. 😕

[acusti]

@weilbith if you use the latest react RC, all popover API attributes and event handlers are available and working. i'm using the following versions (prepend the code with npm i or yarn add to upgrade to this version):

[email protected] [email protected]

@mariusGundersen yes! it's landed in the latest react v19 RC as of the version string above.

[acusti]

one last note for @weilbith and @mariusGundersen and anyone else trying to use React’s popover API support in a typescript project. you will need to use the latest version of @types/react (18.3.3) and enable the react/canary types, which you can do so by including /// <reference types="react/canary" /> in any file in your project (more details here).

[peteruithoven]

Is there any change the Popover API can be backported to v18?