Move to Alpine.js Anchor plugin

[zepfietje]

Replaces the following direct dependencies: tippy.js, alpine-floating-ui, and alpine-tooltip.

Replaces #8701.

Donate 💰 to fund this issue

• You can donate funding to this issue. We receive the money once the issue is completed & confirmed by you.
• 100% of the funding will be distributed between the Filament core team to run all aspects of the project.
• Thank you in advance for helping us make maintenance sustainable!

[zepfietje]

@awcodes are there any differences between your plugin and the Alpine.js one?

Asking since Livewire ships with the Alpine.js plugin and we're also going to move to the Alpine.js Sort plugin.

[awcodes]

Anchor is a lot less flexible. It only offers placement and offset settings and it requires more manual set up. Also, to my knowledge it isn't a11y compatible out of the box.

[zepfietje]

Alright, thanks for clarifying, @awcodes!

[awcodes]

Something else to keep in mind with this is that anchor fundamentally operates in a different way than we are using the floating ui plugin. Anchor just says attach this element to this other element vs this element has a drop down component. If that makes sense. So, switching to anchor will lose the context and ability to use the open/close/toggle methods which are embedded with the floating ui alpine plugin. More importantly the biggest issue i see is that anchor doesn't support teleport which it looks like every instance of the floating ui implementation is using by default so we could run into a lot of z index issues.

[zepfietje]

Thanks for the clear summary, @awcodes!

I agree the missing teleport feature is a deal-breaker.
However, maybe we could use HTML's popover API?

[binaryfire]

Thanks for the clear summary, @awcodes!

I agree the missing teleport feature is a deal-breaker. However, maybe we could use HTML's popover API?

Hey @zepfietje. A bit off topic, but I just stumbled across this and thought I'd mention that browser support for the popover API isn't great. They used it for Flux UI's dropdowns and they're completely broken on my iPhone X. It's definitely worth checking Can I Use before implementing any new APIs. Anything above ~94% is ok. Anything less and there will usually be problems on
still fairly modern (eg. 2 year old) browsers.

This page also shows it only has partial support: https://developer.mozilla.org/en-US/docs/Web/API/Popover_API

And there are ongoing iOS issues: https://bugs.webkit.org/show_bug.cgi?id=267688