[base-ui][Popup] Popup no longer opens outside viewport

[adamhylander]

Popup should no longer be outside the viewport

Closes #39818

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

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

@material-ui/unstyled: parsed: +0.37% , gzip: +0.49%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against 73af31d

[michaldudak]

Well done, thanks!
Two more things remain to be done before we can merge it: tests and docs. Could you add a unit test that verifies the behavior? Take one of the existing ones (such as "should respect the RTL setting" or "should flip placement when edge is reached") as a reference.
As for the docs, they currently mention two middleware functions used by default (docs\data\base\components\popup\popup.md, last section). Could you please add a short description about the newly added one?

[adamhylander]

Hey @michaldudak,

Thank you so much for the detailed response. I fixed the docs and added a test for the shift function. I also noticed a mistake in the rtl test. The line was expect(popup.getBoundingClientRect().right).to.equal(popup.getBoundingClientRect().right); which is always true. I changed it to expect(popup.getBoundingClientRect().right).to.equal(anchor.getBoundingClientRect().right);. However, I can't seem to pass the test_browser-1 test. It is now failing on both the rtl test and my test, the reason of which I don't quite understand. Can you perhaps take a look at this? I would be happy to tell you more about my thought process on the shift test.

[adamhylander]

ping @michaldudak

[ZeeshanTamboli]

However, I can't seem to pass the test_browser-1 test. It is now failing on both the rtl test and my test, the reason of which I don't quite understand.

@adamhylander Regarding the RTL browser test, the assertion is definitely wrong as you mentioned, but I couldn't fix it. I reverted the change for now. It's not related to this PR, so let's address it separately. cc @michaldudak
For this PR's test, it should check for equality between the popup and body's left position property. It was mistakenly using to.above, possibly a typo.

[ZeeshanTamboli]

@adamhylander Thanks for your contribution!