Background

T346099 covers implementing basic positioning of menus via FloatingUI in 3 components:

• Select
• Combobox
• Lookup

This will be done in an internal composable, useFloatingMenu, so it can be applied to future menu components as well.

This task covers extending that composable to "flip" and "clip" the menu under certain circumstances.

Requirements

Menus should:

1. Always remain "attached" to their triggering element
2. Always have an appropriate width (e.g. in most cases, menus are the width of their triggering element)
3. Always be fully visible within the viewport and not extend past it
4. Be able to extend past the bounds of their container

This should all work:

• With the menu attached to the top or the bottom of the triggering element
• With scrolling
• With window resizing
• In LTR and RTL

Implementation details

We still need to determine the best implementation path. In OOUI, menus may be flipped (open up) initially if there is not enough room for the menu below the triggering element. Once opened, they will never flip again, only become clipped when they start to leave the viewport.

We may want to:

• Use the size middleware to set max-height of the menu
• Use the size middleware to clip the menu when it is partially out of view
• Use the flip middleware to open the menu up instead of down in certain contexts
• Ensure that the menu is styled properly when flipped (e.g. move the border radiuses)

Acceptance criteria

• Decide on flipping/clipping interaction
• Implement in the useFloatingMenu composable
• Test in the 3 applicable menu components
• Test when used in a dialog