fix(dialog): portal content inside Theme scope (#1100)

[kotAPI]

Summary

• Dialog portal targets ThemeContext refs instead of querySelector
• Adds regression test for theme-scoped dialog portaling
• Updates Dialog focus-trap test to render inside Theme

Fixes #1100, relates to #1101

Test plan

• npm test -- --testPathPatterns=Dialog

Summary by CodeRabbit

• Tests

  • Enhanced dialog portal testing with new verification that portal content mounts correctly within the active theme scope.
  • Updated test utilities and setup for improved portal, focus trap, and scroll lock verification.

• Refactor

  • Optimized dialog portal mounting to leverage theme context references more directly, improving reliability of portal placement.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 18e8db3

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 63ec65ef-eb2d-4bc1-bdb0-128d048cad1e

📥 Commits

Reviewing files that changed from the base of the PR and between fe87b36 and 18e8db3.

📒 Files selected for processing (3)

• src/components/ui/Dialog/tests/Dialog.portal.test.tsx
• src/components/ui/Dialog/tests/Dialog.test.tsx
• src/core/primitives/Dialog/fragments/DialogPrimitivePortal.tsx

---

📝 Walkthrough

Walkthrough

DialogPrimitivePortal replaces its DOM query-based portal root fallback with direct reads from themeContext.portalRootRef.current and themeContext.containerRef.current. Dialog tests are updated to render inside Theme, add a mockMatchMedia stub, and assert that portaled content lands within the correct theme container and portal root.

Changes

Dialog Portal Root Resolution

Layer / File(s)	Summary
Portal root resolution simplified to themeContext refs src/core/primitives/Dialog/fragments/DialogPrimitivePortal.tsx	Removes DOM querySelector fallback ([data-rad-ui-portal-root], #rad-ui-theme-container) and replaces it with direct reads of themeContext.portalRootRef.current then themeContext.containerRef.current, falling back to document.body.
Dialog tests updated for Theme-scoped portal assertions src/components/ui/Dialog/tests/Dialog.test.tsx, src/components/ui/Dialog/tests/Dialog.portal.test.tsx	Removes renderWithPortal, adds mockMatchMedia() helper, wraps portal/focus/scroll test in Theme, queries portal root via data-rad-ui-portal-root, and adds a new test asserting dialog portal content is mounted inside the active Theme's data-rad-ui-theme="dark" container.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

• #1100 (BUG: Alert Dialog not spawning as a child to the provided root element): This PR directly fixes the root cause by making DialogPrimitivePortal use themeContext refs to resolve the portal container instead of querying the DOM, ensuring portaled dialogs mount within the active Theme root.

Possibly related PRs

• rad-ui/ui#1540: Both PRs use shared portal test utilities (assertFocusTrap, assertFocusReturn, etc.) and the portal-root querying pattern in Dialog.test.tsx.
• rad-ui/ui#1961: Both PRs add tests that assert dialog portal content is scoped within a Theme's data-rad-ui-theme container.
• rad-ui/ui#1508: Both PRs modify DialogPrimitivePortal.tsx's portal mount/root-resolution logic.

Suggested labels

codex

Suggested reviewers

• GoldGroove06

Poem

🐇 Hop, hop! No more DOM queries to chase,
The theme context refs now hold the right place.
Portal roots dwell where dark themes are born,
No stray dialog floats, lonely and forlorn.
The rabbit approves — all portals in line! 🌙

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main fix: ensuring dialog portals are properly scoped within the Theme element.
Linked Issues check	✅ Passed	The PR directly addresses issue #1100 by modifying DialogPrimitivePortal to use ThemeContext refs instead of querySelector, ensuring dialogs spawn as children of the Theme root and inherit theme CSS variables.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the dialog portal theming issue: test updates verify the fix, DialogPrimitivePortal implements the core logic change, and no unrelated modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/issue-1100-dialog-portal-theme

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Coverage

This report compares the PR with the base branch. "Δ" shows how the PR affects each metric.

Metric	PR	Δ
Statements	75.72%	-0.01%
Branches	59.22%	+0.05%
Functions	61.75%	+0.00%
Lines	77.25%	-0.01%

Coverage decreased for at least one metric. Please add or update tests to improve coverage.

Run npm run coverage:ci locally for detailed reports and target untested areas to raise these numbers.

[kotAPI]

Code review

LGTM. Matches project patterns for portal Theme refs, Floating UI prop merge, controlled-switch/lazy-mount/RTL tests, or focused bug fixes. No changes requested.