ui icon indicating copy to clipboard operation
ui copied to clipboard

Migrate @popperjs/core to @floating-ui

Open mxsxs2 opened this issue 3 months ago • 0 comments

  • Updates vitest config to version 3
  • Bumps vitest to 3.2.4
  • Replaces @popperjs/core with @floating-ui
  • Adds usePopper usage example to the docs
  • Adds two more test to usePopperSpec to test the offset and flip middleware's

I tried my best to keep the existing interface of usePopper and only replace the underlying implantation for positioning by:

  • Keep the popper modifiers. The code in popper.ts maps the modifiers to middleware's.
  • Added logic to popper.ts to mimic how @popperjs/core was positioning the floating div and its arrow

I tested the Overlay and Dropdown manually in docs to make sure they work. Also all test are passing.

The solution is not the cleanest. It would be better to change all the components to use middleware's and remove any reference of popper. Anyhow, I wasn't sure how much breaking change should i introduce.

mxsxs2 avatar Sep 25 '25 13:09 mxsxs2