Removing dependency on Floating UI/Popper JS for positioning after v2 release

[leonatajeff]

I've been using Floating UI in various parts to position nested dropdowns, dialogs, and popovers. With the new update, I see the recommendation to use Floating UI or Popper JS was removed afaik.

Getting rid of floating UI and using anchor for positioning works fine for root level components.

However, I'm running into various z-index and display issues when I'm working in a nested component. e.g. Popover in a dialog. Popover would show behind the dialog but I expect the popover to show ahead.

Posting here to see if anyone has gone through a similar migration.

Reference:

For more sophisticated approaches, you might use a library like Popper JS. Here we use Popper's usePopper hook to render our Popover.Panel as a floating panel near the button.

https://headlessui.com/v1/react/popover