Skip to content

Commit 3405ec6

Browse files
committed
add documentation
1 parent c4dec9a commit 3405ec6

File tree

1 file changed

+42
-0
lines changed

1 file changed

+42
-0
lines changed

packages/website/docs/components/containers/flyout/_session_management.mdx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -201,6 +201,48 @@ the history popover — it is not shown in the flyout's menu bar.
201201
</EuiFlyout>
202202
```
203203

204+
##### Scoping history (`historyKey`)
205+
206+
By default, every `session="start"` flyout gets its own isolated history group -
207+
the Back button and history popover only ever show entries from flyouts that are
208+
part of the same group.
209+
210+
In some applications, multiple areas of the product can open `session="start"`
211+
flyouts independently (for example, an Alerts panel and a Logs panel that are
212+
both active at the same time). Without any extra configuration these areas each
213+
have their own history.
214+
215+
However, if you want **two or more independently-rendered flyouts to share a single
216+
history** — so that navigating Back can move between them — you can pass the same
217+
`Symbol` reference as the `historyKey` prop to each flyout:
218+
219+
```tsx
220+
// Create the key once, outside the component (or in a shared module).
221+
const alertsHistoryKey = Symbol('alerts');
222+
223+
// Both flyouts below will share the same Back button and history entries.
224+
<EuiFlyout session="start" historyKey={alertsHistoryKey} flyoutMenuProps={{ title: 'Alert overview' }}>
225+
{/* ... */}
226+
</EuiFlyout>
227+
228+
<EuiFlyout session="start" historyKey={alertsHistoryKey} flyoutMenuProps={{ title: 'Alert detail' }}>
229+
{/* ... */}
230+
</EuiFlyout>
231+
```
232+
233+
Because JavaScript `Symbol` identity is used for the comparison, you must pass the
234+
**same `Symbol` reference.**.
235+
236+
:::info Note
237+
`historyKey` is only meaningful on `session="start"` (main) flyouts. Child flyouts
238+
don't carry their own key — they attach to the most recent session, which already
239+
has the key set by its main flyout. You should not pass `historyKey` on child flyouts.
240+
:::
241+
242+
Closing a managed flyout (via the × button or `ACTION_CLOSE_ALL`) will close all
243+
flyouts in the **same history group** and leave flyouts belonging to other groups
244+
untouched.
245+
204246
##### Controlling session participation
205247

206248
To prevent a flyout from being a part of the session management system:

0 commit comments

Comments
 (0)