Skip to content

[popups] Allow Positioner parts to be omitted for native CSS anchoring #1663

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
atomiks opened this issue Apr 1, 2025 · 2 comments · May be fixed by #1668
Open

[popups] Allow Positioner parts to be omitted for native CSS anchoring #1663

atomiks opened this issue Apr 1, 2025 · 2 comments · May be fixed by #1668
Labels
enhancement This is not a bug, nor a new feature

Comments

@atomiks
Copy link
Contributor

atomiks commented Apr 1, 2025

When trying to use native CSS anchor positioning by simply omitting the Positioner part to position Popup with CSS anchor, an error is thrown:

Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within <Popover.Positioner>.

Native CSS Anchoring doesn't support Arrow yet, but it can optionally consume the context instead of throwing for future use. Popup doesn't need to consume the positioner context at all (FloatingFocusManager can work with FloatingRootContext from the root instead).

This way, the Floating UI logic doesn't need to be included in the bundle once CSS anchoring is widespread if they just omit the Positioner part in their JSX.

@atomiks atomiks added the enhancement This is not a bug, nor a new feature label Apr 1, 2025
@vladmoroz
Copy link
Contributor

If it's going down this route, it'd be great to have a first-class way of creating your own custom positioner in general.

In Paper we implemented this with extra Floating UI logic on top of the existing Positioner part, which did require a bit of strong-handing:

Screen.Recording.2025-04-02.at.10.30.26.mov

I'm really happy that was still achievable though

@atomiks
Copy link
Contributor Author

atomiks commented Apr 2, 2025

@vladmoroz any ideas for what the API could look like/how you achieved it externally? I'm guessing you used the anchor prop with a VirtualElement, and added custom dragging functionality while the collision detection worked as normal?

@atomiks atomiks linked a pull request Apr 3, 2025 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement This is not a bug, nor a new feature
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants