[dialog][alert dialog] Add renderMode prop to Backdrop part

[atomiks]

Closes #1477

[atomiks]

Explanation

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@base-ui-components/react@2037

commit: 7d3a64d

[netlify]

✅ Deploy Preview for base-ui ready!

Name	Link
🔨 Latest commit	7d3a64d
🔍 Latest deploy log	https://app.netlify.com/projects/base-ui/deploys/683e5c33944ba80008472bfd
😎 Deploy Preview	https://deploy-preview-2037--base-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[mui-bot]

Bundle size report

Total Size Change:^{${\tiny{\color{red}▲}}$}+356B^(+0.02%) - Total Gzip Change:^{${\tiny{\color{red}▲}}$}+172B^(+0.04%)
Files: 41 total (0 added, 0 removed, 3 changed)

Show 3 more bundle changes

@base-ui-components/react parsed:^{${\tiny{\color{red}▲}}$}+178B^(+0.06%) gzip:^{${\tiny{\color{red}▲}}$}+90B^(+0.10%)
@base-ui-components/react/alert-dialog parsed:^{${\tiny{\color{red}▲}}$}+89B^(+0.17%) gzip:^{${\tiny{\color{red}▲}}$}+41B^(+0.24%)
@base-ui-components/react/dialog parsed:^{${\tiny{\color{red}▲}}$}+89B^(+0.17%) gzip:^{${\tiny{\color{red}▲}}$}+41B^(+0.24%)

Details of bundle changes

Generated by 🚫 dangerJS against 7d3a64d

[flaviendelangle]

Not a huge fan of the prop name.
I saw quite a lot of renderXXX props that were render props (renderItem={item => <Item item={item} />}).
So I wouldn't use the same type of name for a prop like the one created in this PR.

[atomiks]

@flaviendelangle yeah I don't like it either but it describes whether it doesn't render or not, so what would it be called?

[flaviendelangle]

I don't have a very good proposal :/
nestedDialogRenderMode is very verbose

[atomiks]

nestedRenderMode seems ok though 🤔 @colmtuite

[colmtuite]

Why would you want leaf instead of root or always?

[atomiks]

You want leaf when you don't want stacking effects and always want the topmost dialog to dim everything behind it - the linked issue shows a screenshot:

#1477

The stacked dialogs in the docs do dim a parent nested dialog already, but use an ::after overlay instead:

---

It turns out that due to re-parenting, leaf doesn't play nicely with transitions. Even if it animated here, the cross-fade may not be perfect with the regular ease timing function? So maybe the ::after pseudo-element is actually the best technique to dim parent dialogs already 🤔

Screen.Recording.2025-06-04.at.4.08.01.pm.mov