[EuiFocusTrap] Migrate to function component

[mgadewoll]

Summary

closes #9490

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

API Changes

⚪ no API changes

Screenshots

description	Before	After
non strict mode	Screen.Recording.2026-04-17.at.14.15.55.mov	Screen.Recording.2026-04-17.at.14.18.48.mov
strict mode	Screen.Recording.2026-04-17.at.14.17.08.mov	Screen.Recording.2026-04-17.at.14.12.22.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

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

• verify there is no regression with 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 (example) components usingEuiFocusTrap work as expected (see above linked codesandboxes)
  • ⚠️ In React 18 strict mode, EuiFocusTrap does not return the focus. That's a pre-existing issue likely from react-focus-on. For the purpose of this migration PR this is in "parity".

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 EuiFocusTrap (accessibility-critical focus management utility) from a class component to a hook-based function component while aiming to preserve existing behavior.

Changes:

• Replaced class lifecycle methods with useEffect/useUpdateEffect and hook state for click-outside disabling
• Reworked click-outside mouseup handling to use document-level listeners stored in a ref
• Consolidated prop defaulting via destructuring and continued support for EuiProvider component defaults via usePropsWithComponentDefaults

---

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

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 70fc730
• Documentation website
• Storybook

History

• 💚 Build #3353 succeeded d831551
• 💚 Build #3248 succeeded fa8e040

cc @mgadewoll

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 70fc730

History

• 💚 Build #6344 succeeded d831551
• 💚 Build #6270 succeeded fa8e040

cc @mgadewoll

[mgadewoll]

ℹ️ The changes were re-run in Kibana after merging main (on state of 114.3.0 (🟢 CI run)