[Positioners] Callback values for side/align

[atomiks]

Feature request

Mentioned in #1665 (comment)

Summary

You sometimes want to change the side or align based on the viewport size (e.g. right/left sides never really work on mobile screens - you need to use a useMediaQuery hook to change it to top/bottom) or interaction type (e.g. context menus should be positioned on top, not bottom, to avoid the fingers obscuring it).

The fallbackAxisSideDirection option for flip() in use Floating UI is supposed to solve this by default for the viewport size scenario, but it has some issues with undesirable repositioning while scrolling, although this setting might still suffice for nested menus (positioned on the right for Menu and NavigationMenu) on narrow viewports

sideOffset and alignOffset take callbacks with the side/align/dimensions, so side and align taking a callback with the interaction type and viewport size would be consistent and useful.

[atomiks]

The key problem with fallbackAxisSideDirection is that for edge-aligned placements (align="start|end"), it flips undesirably while scrolling. You don't want it to flip randomly in this scenario (what Vlad mentioned building the infotips on the docs), especially since it preserves the start align but that's the opposite of what's wanted here.

Screen.Recording.2025-04-30.at.6.23.20.pm.mov

In the above scenario, flip() too eagerly changes the side axis (you want shift to take over flip here instead). But edge aligned placements use this ordering:

// https://floating-ui.com/docs/flip#combining-with-shift
if (alignParam !== 'center') {
  middleware.push(flipMiddleware, shiftMiddleware);
} else {
  middleware.push(shiftMiddleware, flipMiddleware);
}

So flip has the priority over shift to change when fallbackAxisSideDirection !== 'none'.

For align="center" there's an easy fix that works well, because shift() has priority so no overflow occurs on the crossAxis anyway:

flip({
  crossAxis: false, // disable crossAxis
  fallbackAxisSideDirection: 'end',
})

Disabling crossAxis with align="center" means it will only flip the side to the different axis for left/right if the viewport is too narrow — exactly what we want. But by default, we do want to flip the align for edge aligned placements, so we can't disable crossAxis.

So what's why a callback for side to read viewportSize.width seems to be better as it's only reactive with respect to the viewport size rather than the overflow on any axis