[Popover][Tooltip][HoverCard][Menu] Access to the runtime `data-side` value for JS animation

[jjenzz]

If using a JS lib for animation, the runtime value of data-side is not available to these libs so they cannot apply origin-aware animations.

This is a sandbox provided in our discord where they've attempted to use the data-side attribute as a prop by utilising our Slot component. Unfortunately, the attribute value will not be available when the motion.div component mounts so the animation never plays out.

I'm not sure how we can solve this given that we need the content to render for a frame in order to work out what side it should appear but I'm raising this ticket for us to have a think.

[benoitgrelard]

Yeah, that might be quite tricky indeed! We would have to think about this quite a bit, maybe some kind of hook or render prop could help.

[jjenzz]

Perhaps an onSideChange callback so they can control it and then our current side prop would become defaultSide which suits what it is actually doing more accurately.

[Lexachoc]

Any update on this?

Also, there's [data-side] for Select. Will Select also be considered to have the callback on side changes?

I saw there's a PR to expose data-side and data-align but for Popover anchor.

UPDATE: I ended up using MutationObserver to listen to the changes of data-side of the Select.Content