feat[popover]:added trigger ref to support external trigger outside root

[piyushzala158]

• [x] I have followed (at least) the PR section of the contributing guide.

Issue: https://github.com/mui/base-ui/issues/2157

[pkg-pr-new[bot]]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2168

commit: 4f2f582

[mui-bot]

Bundle size report

Bundle	Parsed Size	Gzip Size
@base-ui-components/react	🔺+130B(+0.04%)	🔺+102B(+0.11%)

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 4f2f582ce283bf11f1eeb261be02c9c9bec1f92c

[netlify[bot]]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	4f2f582ce283bf11f1eeb261be02c9c9bec1f92c
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/685d5838123f4900086975cb
😎 Deploy Preview	https://deploy-preview-2168--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[oleksandr-danylchenko]

Thank you, @piyushzala158! Do I understand correctly that the reference passed down to the useFloatingRootContext will get its aria attributes and event listeners properly populated?

[piyushzala158]

Thank you, @piyushzala158! Do I understand correctly that the reference passed down to the useFloatingRootContext will get its aria attributes and event listeners properly populated?

Yes

[atomiks]

Thanks for the contribution @piyushzala158

Right now, though, this isn't going to work 😅: the trigger's props (getReferenceProps) are generated inside Popover.Root, and they can't be passed to the external trigger without bubbling them using an effect.

https://github.com/mui/base-ui/blob/bb26cbe3af94c6c5c6400773c291c3675f13ef7d/packages/react/src/popover/root/PopoverRoot.tsx#L164

We discussed this somewhat briefly yesterday and thought something like Toast's API could possibly work for things like Dialogs and Popovers.

This means you render your Popover(s) high up in the tree and use a hook to "create" them by passing structured data that the renderer uses as a template.

That said, I don't know if this solves @oleksandr-danylchenko's use case with the [data-page-family-id] needing to be query selected?

[oleksandr-danylchenko]

We discussed this somewhat briefly yesterday and thought something like Toast's API could possibly work for things like Dialogs and Popovers.

This means you render your Popover(s) high up in the tree and use a hook to "create" them by passing structured data that the renderer uses as a template.

I like this idea 🙌🏻 That provider can expose a context with methods like popover(anchorEl, {}), or popoverManager.add(anchorEl, {}). That way, we'll also be able to handle the presence of just a single popover at a time.

[michaldudak]

Thanks for your work! We've been working on a more comprehensive solution in #2336, so I'm closing your PR in favor of that one.