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

[piyushzala158]

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

Issue: #2157

[pkg-pr-new]

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 🚫 dangerJS against 4f2f582

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	4f2f582
🔍 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.

base-ui/packages/react/src/popover/root/PopoverRoot.tsx

Line 164 in bb26cbe

const { getReferenceProps, getFloatingProps } = useInteractions([hover, click, dismiss, role]);

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.