mui / mui/base-ui

[popover] Positioners callback values for `side`/`align`

Open
#1,769 1 comment 2 reactions 0 assignees View on GitHub
component: popover type: new feature
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

Mentioned in https://github.com/mui/base-ui/pull/1665#issuecomment-2824141973

## 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](https://github.com/mui/base-ui/pull/817), 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.