[EuiPortal] Migrate to function component

[mgadewoll]

Summary

closes #9456
closes #8784

This PR refactors EuiPortal from a class component to a function component.

API Changes

⚪ no API changes

Screenshots

description	Before	After
DOM output
DOM output in strict mode	Screen.Recording.2026-04-17.at.13.51.42.mov	Screen.Recording.2026-04-17.at.13.52.13.mov

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None

The refactor is a 1:1 functional and structural migration. There should not be any impact.

ℹ️ The changes were run in Kibana CI (🟢 CI build)

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

💻 EuiPortal storybook
💻 React 18 strict mode testing codesandbox
💻 React 19 strict mode testing codesandbox

• verify there is no regression with current production
• verify the component works as expected in strict mode (e.g. use the above linked codesandboxes or enable it locally in Storybook by adding strictMode: true here or spin up your own react app)
• verify that components using EuiPortal work as expected (see above linked codesandboxes)
  • ℹ️ It's expected that EuiToolTip does not work (doesn't show up) in React 18 strict mode, it'll be fixed by [EuiToolTip] Refactor to a functional component, memoize style and improve tests #9570

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[Copilot]

Pull request overview

Refactors EuiPortal (core utility used by overlays) from a class component to a hook-based function component, aiming to preserve existing portal insertion/removal behavior and improve React Strict Mode cleanup behavior.

Changes:

• Converted EuiPortal from a class component to a memoized function component using useState/useContext.
• Replaced componentDidMount/componentWillUnmount with an isomorphic useLayoutEffect/useEffect pattern to create/cleanup the portal node.
• Removed the previously exported EuiPortalClass implementation.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

This refactor removes the previously exported EuiPortalClass symbol from this module. Even if it wasn't re-exported from components/portal/index.ts, consumers can still deep-import it from components/portal/portal, so this is a potential breaking API change and also conflicts with the PR description of “no API changes”. Either keep a backwards-compatible export (e.g., a deprecated alias) or explicitly call this out as an API/breaking change.

[mgadewoll]

The class component was exported from the file, but not from the portal folder.
If someone imported it manually, it would be rather unexpected usage. The only officially exported component was EuiPortal. Imho, this doesn't require marking it as breaking change.

[tkajtoch]

Code changes look great! I tested portalled components with and without StrictMode, and used the provided CodeSandbox links to test the same in React 19. Everything works as expected, and the attached Kibana CI run assures me that everything's safe.

[mgadewoll]

ℹ️ To be on the safe side I'll run it in Kibana CI (CI run) again, considering that the last run has been some time ago already.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 1245d11
• Documentation website
• Storybook

History

• 💚 Build #3310 succeeded 2107bfb
• 💚 Build #3247 succeeded 107199d
• 💚 Build #3246 succeeded 6c62fd3

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 1245d11

History

• 💚 Build #6316 succeeded 2107bfb
• 💚 Build #6269 succeeded 107199d
• 💚 Build #6268 succeeded 6c62fd3

cc @mgadewoll

[mgadewoll]

ℹ️ To be on the safe side I'll run it in Kibana CI (CI run) again, considering that the last run has been some time ago already.

The CI run finished 🟢