[Flyout System] export flyout manager store for read-only subscription by tsullivan · Pull Request #9347 · elastic/eui

tsullivan · 2026-01-30T23:49:45Z

Summary

Why are we making this change?

Needed for Kibana PR elastic/kibana#251146 to close https://github.com/elastic/kibana-team/issues/2725

We need a public export for the flyout manager store (e.g., getFlyoutManagerStore() and minimal state types) so integrations that use imperative flyouts or create flyouts in separate React roots can subscribe to state changes and clean up imperative roots when sessions are removed.

Why this is needed

There is a Kibana service, core.overlays.openSystemFlyout(), that renders flyouts imperatively and creates a new React root per flyout.
The EUI manager store is shared via useSyncExternalStore, so state changes are visible across roots — but unmounting of the child’s React root is still imperative and must be triggered by Kibana when the session disappears.
Without a store subscription, when the main flyout closes and the session is removed, the child’s root stays mounted and the child re-renders as an unmanaged flyout, remaining visible. This is the “orphaned flyout” bug. With this PR, the manager now emits a CLOSE_SESSION event when sessions are removed, which downstream consumers can subscribe to.

Why a store export is the minimal safe option

Kibana needs a read-only subscription to the shared manager store to detect when a flyout/session is removed.
This avoids re-implementing session logic in Kibana, keeps EUI as the source of truth, and allows consistent cascade-close for both state-driven and imperative usages.
The read-only subscription specifically targets CLOSE_SESSION events, so imperative roots can unmount when a session is closed.

New exports in the EUI API surface

getFlyoutManagerStore() (already exists internally)
FlyoutManagerStore type (optional but helpful)
EuiFlyoutManagerState / FlyoutSession types (optional, for typed access)
FlyoutManagerEvent type (includes CLOSE_SESSION) and subscribeToEvents() on the store

Impact to users

Testing

Create a build of EUI with this branch
Install the build into this Kibana PR branch: [Core System Flyout Service] Subscribe to CLOSE_SESSION events for cascade close kibana#251146
- This is necessary because the example plugin has been updated in this PR branch to undo the workaround against the "orphaned flyout" bug
Test the System flyouts in the Flyout System Example

Recording

flyout.system.example.-.core-overlays-service.mp4

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

Browser QA
- ~~[ ] Checked in both light and dark modes~~
- [ ] Checked in both MacOS and Windows high contrast modes
  - ~~(emulate forced colors if you do not have access to a Windows machine.)~~
- [ ] Checked in mobile
- [ ] Checked in Chrome, Safari, Edge, and Firefox
- ~~[ ] Checked for accessibility including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
- [ ] Props have proper autodocs (using @default if default values are missing) and playground toggles
- ~~[ ] Checked Code Sandbox works for any docs examples~~
Code quality checklist
- [ ] Added or updated jest and cypress tests
- [ ] Updated visual regression tests
Release checklist
- ~~[ ] A changelog entry exists and is marked appropriately~~
- ~~[ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- [ ] If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

weronikaolejniczak · 2026-02-06T12:31:46Z

@tsullivan why are we not adding a change log here? 🤔 I'd treat this as an enhancement and say something along the lines of "Exported the flyout system store singleton and added an event observer for emitting close session events". I imagine this is so that consumers can subscribe to the "close" event, fixing this issue, right? Writing that part and the proper usage in the change log would also be beneficial.

For the future, this would make it easy for consumers to scan what changed with each version, and what EUI change could've potentially influenced a certain behavior.

weronikaolejniczak

The code looks good to me 👌🏻 I couldn't test this in Kibana because my ES doesn't have anything like FlyoutSystemExample. I built EUI from this branch and I did checkout tsullivan:flyout/export-flyout-manager-store in Kibana. Let me know what I should do to be able to test this!

tsullivan · 2026-02-06T15:13:41Z

Hi @weronikaolejniczak thanks for taking a look!

Let me know what I should do to be able to test this!

Sorry that I have neglected to explain, in order to use the Flyout System Examples in Kibana, you must run Kibana from source with the --run-examples flag:

cd /path/to/kibna/workspace
yarn start --run-examples

tsullivan · 2026-02-06T16:08:52Z

@weronikaolejniczak

why are we not adding a change log here? 🤔

Sorry, I am too used to working in Kibana where we often skip release notes for small fixes that end-users do not notice.

I have added the changelog, take a look :)

elasticmachine · 2026-02-06T16:33:21Z

💚 Build Succeeded

History

💚 Build #2582 succeeded 090a579
💚 Build #2580 succeeded c44429a
💚 Build #2549 succeeded ca672bc

elasticmachine · 2026-02-06T16:50:03Z

💚 Build Succeeded

Buildkite Build
Commit: bfa0426

History

💚 Build #5714 succeeded 090a579
💚 Build #5712 succeeded c44429a
💚 Build #5689 succeeded ca672bc

weronikaolejniczak · 2026-02-09T09:43:46Z

packages/eui/changelogs/upcoming/9347.md

Thank you for adding the changelog!

weronikaolejniczak

Thanks for sharing the additional details!

I tested the change in Kibana using a reproducible issue example made by @akowalska622 🙌🏻 It makes it super clear what is the problem. After applying your changes and building local EUI from the branch, I verified that the issue is fixed.

We're good to go, Tim! 🟢

Before	After
Kapture.2026-02-09.at.12.08.36.mp4	Kapture.2026-02-09.at.12.24.20.mp4

## Dependency updates - `@elastic/eui`: v112.2.0 ⏩ v112.3.0 - `@elastic/eslint-plugin-eui`: v2.7.0 ⏩ v2.8.0 --- ## Package updates ### `@elastic/eui` [v112.3.0](https://github.com/elastic/eui/releases/tag/v112.3.0) - Added new `server` icon. ([#9355](elastic/eui#9355)) - Added `className` support to `EuiMarkdownEditor`'s `toolbarProps` for custom toolbar styling ([#9349](elastic/eui#9349)) - Updated `EuiFilePicker` to use the `upload` icon to better indicate uploads. ([#9351](elastic/eui#9351)) - Exported the flyout system store singleton and added an event observer for emitting close session events ([#9347](elastic/eui#9347)) - Updated `EuiIcon` to use standard dynamic imports for icon assets, enabling native support for modern bundlers (Rollup, Parcel) and improving initial load performance ([#9342](elastic/eui#9342)) **Bug fixes** - Fixed a potential crash in the flyout system: due to asynchronous state updates and React's batching behavior, it was possible to experience a crash when closing a managed flyout. ([#9356](elastic/eui#9356)) ### `@elastic/eslint-plugin-eui` v2.8.0 - Added new `icon-accessibility-rules` rule. ([#9357](elastic/eui#9357)) - Added new `badge-accessibility-rules` rule. ([#9354](elastic/eui#9354))

…scade close (#251146) ## Summary Depends on elastic/eui#9347 Closes: elastic/kibana-team#2725 This PR updates Kibana’s `SystemFlyoutService` to listen to the EUI flyout manager’s `CLOSE_SESSION` events and close imperative flyout roots when their session is removed. This makes cascade-close work for `openSystemFlyout()` flows that render in separate React roots. The flyout system example is adjusted to stop manually closing child refs so it reflects system behavior. **Key changes** - Subscribe to `getFlyoutManagerStore().subscribeToEvents` and close matching flyouts on `CLOSE_SESSION`. - Make `SystemFlyoutRef.isClosed` a getter backed by a private flag. - Remove manual child close from the flyout system example. **Notes** - Depends on EUI export of `subscribeToEvents` and `CLOSE_SESSION` events (see EUI PR elastic/eui#9347). ### Testing 1. Run Kibana from source locally with example plugins ``` yarn start --run-examples ``` 2. Navigate to `http://localhost:5601/app/flyoutSystemExamples` 3. Make sure the child flyout is automatically closed when testing the `Session X` flyout, as shown in the following screen recording. https://github.com/user-attachments/assets/d645b9a0-1ad7-45e2-8966-35da03b0c341 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - ~~[ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~ - ~~[ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~~ - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - ~~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list]~~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - ~~[ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~~ - ~~[ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~~ - ~~[ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~ - ~~[ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.~~ ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. None

…scade close (elastic#251146) ## Summary Depends on elastic/eui#9347 Closes: elastic/kibana-team#2725 This PR updates Kibana’s `SystemFlyoutService` to listen to the EUI flyout manager’s `CLOSE_SESSION` events and close imperative flyout roots when their session is removed. This makes cascade-close work for `openSystemFlyout()` flows that render in separate React roots. The flyout system example is adjusted to stop manually closing child refs so it reflects system behavior. **Key changes** - Subscribe to `getFlyoutManagerStore().subscribeToEvents` and close matching flyouts on `CLOSE_SESSION`. - Make `SystemFlyoutRef.isClosed` a getter backed by a private flag. - Remove manual child close from the flyout system example. **Notes** - Depends on EUI export of `subscribeToEvents` and `CLOSE_SESSION` events (see EUI PR elastic/eui#9347). ### Testing 1. Run Kibana from source locally with example plugins ``` yarn start --run-examples ``` 2. Navigate to `http://localhost:5601/app/flyoutSystemExamples` 3. Make sure the child flyout is automatically closed when testing the `Session X` flyout, as shown in the following screen recording. https://github.com/user-attachments/assets/d645b9a0-1ad7-45e2-8966-35da03b0c341 ### Checklist Check the PR satisfies following conditions. Reviewers should verify this PR satisfies this list as well. - ~~[ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)~~ - ~~[ ] [Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html) was added for features that require explanation or tutorials~~ - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - ~~[ ] If a plugin configuration key changed, check if it needs to be allowlisted in the cloud and added to the [docker list]~~(https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker) - ~~[ ] This was checked for breaking HTTP API changes, and any breaking changes have been approved by the breaking-change committee. The `release_note:breaking` label should be applied in these situations.~~ - ~~[ ] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed~~ - ~~[ ] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)~~ - ~~[ ] Review the [backport guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing) and apply applicable `backport:*` labels.~~ ### Identify risks Does this PR introduce any risks? For example, consider risks like hard to test bugs, performance regression, potential of data loss. None

tsullivan mentioned this pull request Jan 30, 2026

[Core System Flyout Service] Subscribe to CLOSE_SESSION events for cascade close elastic/kibana#251146

Merged

1 task

tsullivan added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Feb 2, 2026

tsullivan changed the title ~~[Flyout System] export flyout manager store for kibana use~~ [Flyout System] export flyout manager store Feb 5, 2026

tsullivan changed the title ~~[Flyout System] export flyout manager store~~ [Flyout System] export flyout manager store for read-only subscription Feb 5, 2026

tsullivan marked this pull request as ready for review February 5, 2026 19:29

tsullivan requested a review from a team as a code owner February 5, 2026 19:29

tsullivan added 2 commits February 5, 2026 15:06

export flyout manager store for kibana use

c7942da

implement event subscription pattern

090a579

tsullivan force-pushed the flyout/export-flyout-manager-store branch from 00cceed to 090a579 Compare February 5, 2026 22:06

weronikaolejniczak self-requested a review February 6, 2026 09:38

weronikaolejniczak reviewed Feb 6, 2026

View reviewed changes

tsullivan removed the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Feb 6, 2026

add changelog

bfa0426

weronikaolejniczak self-requested a review February 9, 2026 09:21

weronikaolejniczak reviewed Feb 9, 2026

View reviewed changes

packages/eui/changelogs/upcoming/9347.md

Copy link
Copy Markdown

Contributor

weronikaolejniczak Feb 9, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you for adding the changelog!

weronikaolejniczak approved these changes Feb 9, 2026

View reviewed changes

weronikaolejniczak merged commit b248e96 into elastic:main Feb 9, 2026
5 checks passed

mgadewoll mentioned this pull request Feb 9, 2026

Upgrade EUI to v112.3.0 elastic/kibana#252315

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Flyout System] export flyout manager store for read-only subscription#9347

[Flyout System] export flyout manager store for read-only subscription#9347
weronikaolejniczak merged 3 commits intoelastic:mainfrom
tsullivan:flyout/export-flyout-manager-store

tsullivan commented Jan 30, 2026 •

edited

Loading

Uh oh!

weronikaolejniczak commented Feb 6, 2026

Uh oh!

weronikaolejniczak left a comment

Uh oh!

tsullivan commented Feb 6, 2026

Uh oh!

tsullivan commented Feb 6, 2026

Uh oh!

elasticmachine commented Feb 6, 2026

Uh oh!

elasticmachine commented Feb 6, 2026

Uh oh!

weronikaolejniczak Feb 9, 2026

Uh oh!

weronikaolejniczak left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

tsullivan commented Jan 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Impact to users

Testing

QA

General checklist

Uh oh!

weronikaolejniczak commented Feb 6, 2026

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

tsullivan commented Feb 6, 2026

Uh oh!

tsullivan commented Feb 6, 2026

Uh oh!

elasticmachine commented Feb 6, 2026

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Feb 6, 2026

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

tsullivan commented Jan 30, 2026 •

edited

Loading