[Popover] How to align the start of the popover with the center of the trigger?

[benface]

First of all, amazing work on this library. The alpha version looks super solid already.

I've come across a potential limitation when using Popover. My design requires me to align the left / start of the popover with the center of the trigger (minus an offset, because actually the goal is to align the center of the first column of the popover, which has a fixed width... but that's irrelevant). With the align prop, it only seems possible to align the start of the popover with the start of the trigger, the center of the popover with the center of the trigger, or the end of the popover with the end of the trigger. Is there a solution I'm not seeing, given that the trigger has an unknown/dynamic width? If not, I have 2 potential (but very rough) ideas of how it could be handled (assuming you agree that it's a worthy use case!)

1. Another prop named triggerAlign or something, which would default to the same value as align, but in my case I would set it to center.
2. I have no idea if this is technically feasible, but maybe the alignOffset prop could accept a function that would receive the dimensions of the trigger and of the popup, and could do some math based on those to return an offset value?

Thanks so much again, I'm excited to see how this library evolves.

[atomiks]

I have no idea if this is technically feasible, but maybe the alignOffset prop could accept a function that would receive the dimensions of the trigger and of the popup, and could do some math based on those to return an offset value?

Yeah this is a good idea. This is what Floating UI's offset() middleware allows for, which we use internally. alignOffset and sideOffset would pass the Rects of the trigger/anchor and popup elements, allowing you to perform custom math on their sizes to offset it.

[colmtuite]

@benface Could you provide a screenshot of your design please? Or give a better idea of the kinds of UIs that require this?

[benface]

@colmtuite – Sure! Here's a simple mockup:

The width of each column of the popover is fixed, so I would align the start of the popover with the center of the trigger, and then set alignOffset to negative half the column's width.

[colmtuite]

@benface Ah ok, thanks. This would be our NavigationMenu component, which we haven't started work on yet. An example would be Radix Navigation Menu. But I understand that we can help in the meantime by tweaking something relatively trivial.