Replace deprecated react-popper with floating-ui

[mimarz]

Popperjs (along with react-popper) has evolved to floating-ui and is now deprecated/maintenance-mode as further development is done on floating-ui.

Relevant blog post: https://blog.logrocket.com/popper-vs-floating-ui/

Actions

• Figure out best way to update to use floating-ui
  • Do we still use our wrapper hook or use it directly in our components?
• Replace popperjs & react-popper with floating-ui

Edit:

Based on some light testing and looking at documentation for floating-ui it looks like its best to use it directly in each component now instead of via our wrapper hook. This is due to the new api for the library being more composable and doing much more than older versions.

At first glance, middleware in floating-ui now has features that replaces our need for useIsMounted, useOutsideClick and useHideBodyScroll hooks.

Codesandbox examples using new floating-ui

[mimarz]

After having a look at floating-ui and how its used it differs quite a lot from react-popper (in a good way).

Elevating this to an epic as we need to do the conversion for each step by step for component using usePopper separately.

Updating description with detailed information.

[mimarz]

In short term we will upgrade existing react-popper to latest as it should fix some errors people have been having when using React 18. #2341

[mimarz]

Solved in #2464