[base-ui][Select] Use Popup instead of Popper

[michaldudak]

Replaced the Popper with Popup in the Select implementation.
This also enabled the use of transitions in Select.

Some changes had to be made in the transitions infrastructure, as I encountered a few limitations:

• Transitions now begin immediately after being requested (there's no need to call onEntering or onExiting callbacks anymore). This was required because the Select (and possibly other components) wanted to focus its child after being expanded. If we had to wait for the onEntering callback to be fired, the child could still be hidden by the time we needed it to be focused. This updated behavior is consistent with how Popper works.
• Because of the above, the onEntering, onEntered, and onExiting callbacks were removed from the transition context and useTransitionTrigger hook. As a side effect, they are now simpler.

Breaking change

• The popper slot was renamed to popup:

  -<Select slots={{ popper: StyledPopper }} slotProps={{ popper: { ... } }}>
  +<Select slots={{ popup: StyledPopup }} slotProps={{ popup: { ... } }}>

• The slotProps.popup accept the props of the Popup component
• The slots.popper used to be a Popper instance by default. Now, the slots.popup is a plain div and does not require the Popper/Popup instance to be passed in.

Part of #38280

[mui-bot]

Netlify deploy preview

• docs/data/base/components/select/select.md

@material-ui/unstyled: parsed: -0.45% 😍, gzip: -0.29% 😍

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against a61059d

[DiegoAndai]

Removing onEntering and onExiting makes sense to me, and appreciate the simplification, but I don't quite understand the removal of onEntered, isn't that still useful?

[DiegoAndai]

nit: render might be a confusing name as most tests use render returned by createRenderer directly. I would name this renderAndFlush

[DiegoAndai]

It's incredible how surgical this replacement was. Congrats!

[DiegoAndai]

How were we able to remove this? What happens in case properties have different transitions for the enter transition?

[michaldudak]

onEntered (and the related lastTransitionedPropertyOnEnter) isn't used, as there's no need to know when the entered transition ended. The only important event is onExited, as it tells when it's safe to unmount the transitioned element.

The sequence of entering goes like that:

requested enter -> mount (or remove visibility: hidden) -> start transition -> finish transition

Exiting:

requested exit -> start transition -> finish transition -> fire onExited -> unmount (or set visibility: hidden)

[DiegoAndai]

The code looks good to me 😊

I did notice that if the popup placement (top/bottom) changes when hidden, then the appearing transition includes the "slide" from the previous position:

Screen.Recording.2024-01-16.at.10.30.52.mov

This is a detail though, only mention it in case we want to fix it, but I don't think it blocks the PR 😊

[michaldudak]

Nice catch! I'll fix it.