[Feature Request]: Improve ContextMenu to provide a safe triangle area

[tay1orjones]

The problem

When using ContextMenu with submenus via mouse, a user must keep their pointer strictly on the item selected to navigate to the submenu. See here attempting to select the last option "Company"

can.t.reach.the.last.option.mov

The solution

The problem is in sharp contrast to how a user would navigate to items within the list. Instead ContextMenu should take into account a 'safe triangle area' to where the existing submenu stays open even when the pointer is not directly on the selected item or the submenu.

Examples

Here's an example from this excellent article:

ideal.safe.triangle.mp4

This approach was initially popularized by Amazon with their megamenu back in 2013: https://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown/amp

Application/PAL

No response

Business priority

None

Available extra resources

No response

Code of Conduct

• I agree to follow this project's Code of Conduct

[tay1orjones]

Great example here: https://floating-ui.com/docs/usehover#safepolygon

It feels like encapsulating this into a hook could make a lot of sense. The root logic though should be vanilla javascript functions so that other framework variants (Svelte, Web Components, etc.) can reuse it. This base logic could then be composed into a hook for ease of use.

Other nested menu components could then take advantage of the hook, such as in #3764

[tay1orjones]

Fixed via #16466 though the solution was a simple timeout instead of this calculation idea