Floating UI: Add detectOverflow configurable collision boundary

[tay1orjones]

In certain situations consumers may need to customize the boundary/element used to detect collisions. One example of this might be the modal - components like Popover may need to reflow based on the bounds of the modal content container, and not the viewport.

To this we can implement the detectOverflow as a middleware and add props for consumers to pass in their own element and/or padding.

This will need to be done for every component that supports floating ui autoAlign:

Tasks

Beta Give feedback

1. Dropdown
2. Combobox
3. MultiSelect
4. FilterableMultiSelect
5. Popover
6. Tooltip
7. Toggletip
8. DefinitionTooltip

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.

[riddhybansal]

@tay1orjones the issue is in menuButton as well most probably with comboButtons too

Screen.Recording.2024-07-30.at.4.30.57.PM.mov

Here is the stackblitz also.
I guess this comes in collision detection only

[preetibansalui]

Hi @tay1orjones , Just realised, do we need to add hide from Floating UI in tooltip as well? Its hiding itself when tooltip icon is not visible in viewport because its no more hoverable.

[tay1orjones]

The first phase of this will be delivered through:

• 16879 collision boundary in auto align components #17139

and then this followup to fully close this issue:

• feat(popover): add autoAlignBoundary for configurable collision boundary #16995