Fixes #7986

Submenu Positioning with Floating UI

Overview of Floating UI

flip(): Adjusts placement (e.g., top to bottom) to prevent overflow.
shift(): Moves the floating element along the x or y axis to stay within the viewport. By default, only mainAxis=true.

Problem Description

Since the submenu is set to position=right-start, the mainAxis changes to the y-axis in this horizontal placement. By default, shift() only adjusts the mainAxis, which may lead to inconsistent behavior due to Floating UI's handling.

Solution

Enable crossAxis: true in shift() to allow x-axis adjustments, aligning the submenu to the viewport's right boundary. As shift() precedes flip() in the usePopover middleware order, flip() does not trigger horizontal placement changes. The current middleware order in usePopover is sufficient, ensuring a visually consistent right-aligned submenu.

Visual Results

Per Floating UI docs: "Enabling this can lead to the floating element overlapping the reference element, which may not be desired and is often replaced by the flip() middleware."
However, this approach is effective for our use case.

Alternative Approach

Updating the middleware order to [flip(), shift()] would flip the submenu to left-start on overflow before shifting. The results would appear as follows:

Conclusion

Both solutions are effective. I opted for the minimal code change by enabling crossAxis: true in shift() for the align-right approach. Users can modify position and middleware but should be familiar with Floating UI middleware to understand the implications of their changes.