feat(Dialog): add enableNestedDialogLayer prop #3176

rivka-ungar · 2025-11-06T10:12:29Z

User description

https://monday.monday.com/boards/3532714909/views/80492480/pulses/18362148734

PR Type

Enhancement

Description

Add enableNestedDialogLayer prop to conditionally wrap Dialog with LayerProvider
Enables proper z-index stacking and click-outside behavior for nested dialogs
Supports components using Dialog internally (like Dropdown) within another Dialog
Defaults to false for backward compatibility

Diagram Walkthrough

flowchart LR
  A["Dialog Component"] -->|enableNestedDialogLayer true| B["LayerProvider Wrapper"]
  B --> C["DialogContent"]
  A -->|enableNestedDialogLayer false| C
  C --> D["Proper z-index & click handling"]

File Walkthrough

Relevant files

Enhancement

Dialog.tsx `Add conditional LayerProvider wrapping for nested dialogs` packages/core/src/components/Dialog/Dialog.tsx Added `enableNestedDialogLayer` optional boolean prop to DialogProps interface with documentation Set default value of `enableNestedDialogLayer` to false in defaultProps Extracted DialogContent into a variable for conditional LayerProvider wrapping Conditionally render DialogContent wrapped in LayerProvider when `enableNestedDialogLayer` is true	+47/-35

qodo-merge-for-open-source · 2025-11-06T10:12:52Z

PR Reviewer Guide 🔍

(Review updated until commit `10c0180`)

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 2 🔵🔵⚪⚪⚪
🧪 No relevant tests
🔒 No security concerns identified
⚡ Recommended focus areas for review Breaking Change Risk The PR removes the default `LayerProvider` wrapper that was previously always present. While `enableNestedDialogLayer` defaults to false for backward compatibility, this changes the existing behavior where all dialogs were wrapped with `LayerProvider`. This could affect z-index stacking and click-outside behavior for existing dialogs that relied on this wrapper, potentially breaking nested dialog scenarios that currently work. return enableNestedDialogLayer ? ( <LayerProvider layerRef={this.containerRef}>{dialogContent}</LayerProvider> ) : ( dialogContent );

github-actions · 2025-11-06T10:24:41Z

A new prerelease version of this PR has been published! 🎉
To install this prerelease version, run the following command in your terminal with any one of the packages changed in this PR:

To update @vibe/button:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/icon:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/loader:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/config:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/core:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/docs:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/icons:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

To update @vibe/shared:

yarn add @vibe/[email protected]

Or with npm:

npm i @vibe/[email protected]

github-actions · 2025-11-06T10:28:19Z

📦 Bundle Size Analysis

✅ No bundle size changes detected.

Unchanged Components

Component	Base	PR	Diff
`@vibe/button`	17.73KB	17.73KB	0B ➖
`@vibe/icon`	13.02KB	13.02KB	0B ➖
`@vibe/loader`	5.81KB	5.81KB	0B ➖
`Accordion`	6.35KB	6.35KB	0B ➖
`AccordionItem`	68.15KB	68.15KB	+1B 🔺
`AlertBanner`	72.79KB	72.79KB	+4B 🔺
`AlertBannerButton`	19.17KB	19.17KB	0B ➖
`AlertBannerLink`	15.51KB	15.51KB	0B ➖
`AlertBannerText`	65.44KB	65.49KB	+47B 🔺
`AttentionBox`	74.26KB	74.28KB	+29B 🔺
`AttentionBoxLink`	15.35KB	15.35KB	0B ➖
`Avatar`	68.37KB	68.3KB	-70B 🟢
`AvatarGroup`	95.71KB	95.75KB	+38B 🔺
`Badge`	43.5KB	43.5KB	0B ➖
`Box`	9.34KB	9.34KB	0B ➖
`BreadcrumbItem`	66.15KB	66.18KB	+35B 🔺
`BreadcrumbMenu`	70.14KB	70.12KB	-27B 🟢
`BreadcrumbMenuItem`	79.09KB	79.17KB	+83B 🔺
`BreadcrumbsBar`	5.76KB	5.76KB	0B ➖
`ButtonGroup`	70.17KB	70.17KB	-2B 🟢
`Checkbox`	68.43KB	68.46KB	+31B 🔺
`Chips`	77.07KB	77.07KB	-3B 🟢
`Clickable`	6.27KB	6.27KB	0B ➖
`ColorPicker`	76.11KB	76.14KB	+32B 🔺
`ColorPickerContent`	75.49KB	75.43KB	-57B 🟢
`Combobox`	85.91KB	85.89KB	-17B 🟢
`Counter`	42.41KB	42.41KB	0B ➖
`DatePicker`	134.34KB	134.34KB	0B ➖
`Dialog`	54.05KB	54.07KB	+26B 🔺
`DialogContentContainer`	6.3KB	6.3KB	0B ➖
`Divider`	5.55KB	5.55KB	0B ➖
`Dropdown`	125.48KB	125.52KB	+40B 🔺
`menu`	59.89KB	59.89KB	0B ➖
`option`	93.09KB	93.13KB	+35B 🔺
`singleValue`	93.07KB	93.17KB	+100B 🔺
`EditableHeading`	68.07KB	68.18KB	+116B 🔺
`EditableText`	68.08KB	68.08KB	-2B 🟢
`EmptyState`	72.68KB	72.66KB	-19B 🟢
`ExpandCollapse`	67.98KB	67.98KB	-8B 🟢
`Flex`	7.47KB	7.47KB	0B ➖
`FormattedNumber`	5.87KB	5.87KB	0B ➖
`GridKeyboardNavigationContext`	4.65KB	4.65KB	0B ➖
`Heading`	66.81KB	66.91KB	+99B 🔺
`HiddenText`	5.4KB	5.4KB	0B ➖
`IconButton`	70KB	69.96KB	-37B 🟢
`Info`	74.19KB	74.18KB	-16B 🟢
`Label`	70.32KB	70.4KB	+79B 🔺
`LayerProvider`	2.95KB	2.95KB	0B ➖
`LegacyModal`	76.68KB	76.62KB	-66B 🟢
`LegacyModalContent`	66.77KB	66.88KB	+116B 🔺
`LegacyModalFooter`	3.45KB	3.45KB	0B ➖
`LegacyModalFooterButtons`	20.68KB	20.68KB	0B ➖
`LegacyModalHeader`	72.8KB	72.87KB	+76B 🔺
`Link`	15.17KB	15.17KB	0B ➖
`List`	74.67KB	74.76KB	+94B 🔺
`ListItem`	67.37KB	67.35KB	-17B 🟢
`ListItemAvatar`	68.54KB	68.53KB	-5B 🟢
`ListItemIcon`	14.17KB	14.17KB	0B ➖
`ListTitle`	66.93KB	66.96KB	+28B 🔺
`Menu`	8.68KB	8.68KB	0B ➖
`MenuDivider`	5.63KB	5.63KB	0B ➖
`MenuGridItem`	7.22KB	7.22KB	0B ➖
`MenuItem`	79KB	79.09KB	+101B 🔺
`MenuItemButton`	71.98KB	72.05KB	+71B 🔺
`MenuTitle`	67.16KB	67.11KB	-57B 🟢
`MenuButton`	67.67KB	67.62KB	-49B 🟢
`Modal`	111.89KB	111.91KB	+17B 🔺
`ModalContent`	4.76KB	4.76KB	0B ➖
`ModalHeader`	67.58KB	67.66KB	+74B 🔺
`ModalMedia`	7.63KB	7.63KB	0B ➖
`ModalFooter`	69.56KB	69.57KB	+10B 🔺
`ModalFooterWizard`	70.53KB	70.54KB	+8B 🔺
`ModalBasicLayout`	9.1KB	9.1KB	0B ➖
`ModalMediaLayout`	8.21KB	8.21KB	0B ➖
`ModalSideBySideLayout`	6.35KB	6.35KB	0B ➖
`MultiStepIndicator`	53.32KB	53.32KB	0B ➖
`NumberField`	74.78KB	74.81KB	+30B 🔺
`LinearProgressBar`	7.47KB	7.47KB	0B ➖
`RadioButton`	67.66KB	67.67KB	+11B 🔺
`Search`	72.37KB	72.39KB	+21B 🔺
`Skeleton`	6.2KB	6.2KB	0B ➖
`Slider`	75.9KB	75.86KB	-34B 🟢
`SplitButton`	68.59KB	68.63KB	+44B 🔺
`SplitButtonMenu`	8.77KB	8.77KB	0B ➖
`Steps`	73.39KB	73.44KB	+51B 🔺
`Table`	7.29KB	7.29KB	0B ➖
`TableBody`	68.66KB	68.7KB	+37B 🔺
`TableCell`	66.97KB	67.01KB	+34B 🔺
`TableContainer`	5.37KB	5.37KB	0B ➖
`TableHeader`	5.71KB	5.71KB	0B ➖
`TableHeaderCell`	74.06KB	74.07KB	+14B 🔺
`TableRow`	5.59KB	5.59KB	0B ➖
`TableRowMenu`	70.43KB	70.46KB	+35B 🔺
`TableVirtualizedBody`	73.33KB	73.37KB	+32B 🔺
`Tab`	65.49KB	65.54KB	+49B 🔺
`TabList`	8.92KB	8.92KB	0B ➖
`TabPanel`	5.35KB	5.35KB	0B ➖
`TabPanels`	5.91KB	5.91KB	0B ➖
`TabsContext`	5.54KB	5.54KB	0B ➖
`Text`	66.64KB	66.78KB	+141B 🔺
`TextArea`	68.08KB	68.11KB	+31B 🔺
`TextField`	71.23KB	71.32KB	+92B 🔺
`TextWithHighlight`	65.87KB	65.9KB	+30B 🔺
`ThemeProvider`	4.69KB	4.69KB	0B ➖
`Tipseen`	73.23KB	73.16KB	-75B 🟢
`TipseenContent`	73.63KB	73.82KB	+197B 🔺
`TipseenImage`	73.43KB	73.52KB	+91B 🔺
`TipseenMedia`	73.34KB	73.38KB	+33B 🔺
`TipseenWizard`	75.91KB	75.91KB	+1B 🔺
`Toast`	76.11KB	76.12KB	+15B 🔺
`ToastButton`	19KB	19KB	0B ➖
`ToastLink`	15.32KB	15.32KB	0B ➖
`Toggle`	68.36KB	68.38KB	+13B 🔺
`Tooltip`	64.63KB	64.69KB	+62B 🔺
`TransitionView`	37.69KB	37.69KB	0B ➖
`VirtualizedGrid`	12.59KB	12.59KB	0B ➖
`VirtualizedList`	12.37KB	12.37KB	0B ➖
`AttentionBox (Next)`	76.3KB	76.41KB	+109B 🔺
`Dropdown (Next)`	96.14KB	96.22KB	+81B 🔺

📊 Summary:

Total Base Size: 5.65MB
Total PR Size: 5.65MB
Total Difference: +2.03KB

feat(Dialog): add enableNestedDialogLayer prop

dbeef02

rivka-ungar requested a review from a team as a code owner November 6, 2025 10:12

[prerelease]

10c0180

talkor approved these changes Nov 6, 2025

View reviewed changes

qodo-merge-for-open-source bot added the Review effort 2/5 label Nov 6, 2025

rivka-ungar merged commit a14a063 into master Nov 6, 2025
17 checks passed

rivka-ungar deleted the dialog-add-prop-for-layerprovider-18362148734 branch November 6, 2025 10:38

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(Dialog): add enableNestedDialogLayer prop #3176

feat(Dialog): add enableNestedDialogLayer prop #3176

Uh oh!

rivka-ungar commented Nov 6, 2025 •

edited by qodo-merge-for-open-source bot

Loading

Uh oh!

qodo-merge-for-open-source bot commented Nov 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Nov 6, 2025

Uh oh!

github-actions bot commented Nov 6, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

feat(Dialog): add enableNestedDialogLayer prop #3176

feat(Dialog): add enableNestedDialogLayer prop #3176

Uh oh!

Conversation

rivka-ungar commented Nov 6, 2025 • edited by qodo-merge-for-open-source bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

User description

PR Type

Description

Diagram Walkthrough

File Walkthrough

Uh oh!

qodo-merge-for-open-source bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Reviewer Guide 🔍

(Review updated until commit 10c0180)

Uh oh!

github-actions bot commented Nov 6, 2025

Uh oh!

github-actions bot commented Nov 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rivka-ungar commented Nov 6, 2025 •

edited by qodo-merge-for-open-source bot

Loading

qodo-merge-for-open-source bot commented Nov 6, 2025 •

edited

Loading

(Review updated until commit `10c0180`)

github-actions bot commented Nov 6, 2025 •

edited

Loading