[pickers] Fix to transform-origin when popper opens to top

[LukasTy]

Fixes #10006

The placement is top-start when the popper opens to the top, because of that the conditional style did not work.

Preview: https://deploy-preview-10069--material-ui-x.netlify.app/x/react-date-pickers/

[mui-bot]

Netlify deploy preview

Netlify deploy preview: https://deploy-preview-10069--material-ui-x.netlify.app/

Updated pages

No updates.

These are the results for the performance tests:

Test case	Unit	Min	Max	Median	Mean	σ
Filter 100k rows	ms	-163.6	107.5	-18.6	-25.68	108.52
Sort 100k rows	ms	843.3	1,533.2	1,528.1	1,354.12	259.125
Select 100k rows	ms	680.7	896.4	764.8	787	83.95
Deselect 100k rows	ms	136.2	232.2	187.8	189.02	32.717

Generated by 🚫 dangerJS against bb39de6

[oliviertassinari]

Awesome, it feels clearly better 👍

To be fair, in #5490 (comment), I have made the case for much less frequently flipping the popup to be shown on the top.

[noraleonte]

Very nice improvement! 🎉

[LukasTy]

To be fair, in #5490 (comment), I have made the case for much less frequently flipping the popup to be shown on the top.

Yes, those are great two points that could be explored separately from one another.

• The flipping based on document or viewport should remain on user control IMHO. There are different implementations in the wild, but I don't think it should be decided by the component library. 🤔
• In regards to aligning the height of the popper calendars—that is on our agenda. Ideally, we'd do it when implementing MD3 guidelines as those make it pretty easy to align without any concerns (like providing a visual cue that the YearCalendar is scrollable by clipping part of the year buttons).