Migrate to Floating UI

[adidahiya]

Blueprint has been attempting to migrate to popper.js v2 for for almost 2 years now with the Popover2 component. During that time, popper.js has evolved and rebranded itself as Floating UI. The first version of this new library was released in August 2022, and by now (November 2022) it’s had a few patch releases to work out the initial bugs that come with any major release. They’ve written docs on the motivation behind the new library here.

The benefits of floating-ui that stood out to me for Blueprint are this one:

• New primitives & capabilities for advanced DOM interactions — these would allow us to implement things like nicer dropdown menu hover areas (an old idea widely known to FE devs via this blog post, we settled on “good enough” in Blueprint with the hoverOpenDelay/hoverCloseDelay props)

Blueprint has an upcoming major version (v5) which will finally get us to popper.js v2. But floating-ui’s release prompts a question: should we skip popper.js v2 and instead leapfrog to floating-ui?

I would be tempted to do this if it’s an easy migration from popper.js to floating-ui, but a review of the migration docs suggests that it is not so simple:

• floating-ui is lower-level than popper.js and does not apply some of the same options out-of-the-box.
  • We’d have to take care to make sure all the existing behavior of Popover2 is preserved.
• There is no React component wrapper like the one provided by react-popper — it’s hooks all the way.
  • We’d have to refactor Popover2 into a function component, which will take some time to do safely.

Even migrating a large codebase from Popover → Popover2 where some custom modifiers are specified has been nontrivial, so I think it’s best to punt floating-ui to a future major version, either v6.0 or v7.0.

There may be a way to incrementally swap popper.js for floating-ui under the hood without breaking changes in Blueprint v5.x. More on that later!