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:

- [x] Dropdown
- [ ] Combobox
- [ ] MultiSelect
- [ ] FilterableMultiSelect
- [ ] Popover
- [ ] Tooltip
- [ ] Toggletip
- [ ] DefinitionTooltip

[github-actions[bot]]

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

https://github.com/user-attachments/assets/60cec959-60be-4ad7-8f6d-57a6e1cba135

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:

• https://github.com/carbon-design-system/carbon/pull/17139

• and then this followup to fully close this issue:

• https://github.com/carbon-design-system/carbon/pull/16995