[Flyout System] Add managed history controls

packages/eui/changelogs/upcoming/9003.md

@@ -0,0 +1,2 @@
+- Updated `EuiFlyout` with new `onActive` callback and enable stack managed history controls.
+- Updated `EuiFlyoutMenu` with new prop `historyItems` and refactored props for back button.

packages/eui/src/components/flyout/flyout.component.tsx

@@ -75,6 +75,7 @@ import {
   useEuiFlyoutOpenState,
   type EuiFlyoutOpenState,
 } from './use_open_state';
+import type { EuiFlyoutCloseEvent } from './types';
 
 interface _EuiFlyoutComponentProps {
   /**
@@ -89,14 +90,14 @@ interface _EuiFlyoutComponentProps {
    *
    * Use this callback to toggle your internal `isOpen` flyout state.
    */
-  onClose: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void;
+  onClose: (event?: EuiFlyoutCloseEvent) => void;
   /**
    * An optional callback function fired when the flyout begins closing.
    *
    * Use in case you need to support any extra logic that relies on the flyout
    * closing state. In most cases this callback doesn't need to be handled.
    */
-  onClosing?: (event?: MouseEvent | TouchEvent | KeyboardEvent) => void;
+  onClosing?: (event?: EuiFlyoutCloseEvent) => void;
   /**
    * Defines the width of the panel.
    * Pass a predefined size of `s | m | l`, or pass any number/string compatible with the CSS `width` attribute
@@ -384,9 +385,9 @@ export const EuiFlyoutComponent = forwardRef(
       }
 
       const siblingFlyoutId =
-        currentSession.main === flyoutId
-          ? currentSession.child
-          : currentSession.main;
+        currentSession.mainFlyoutId === flyoutId
+          ? currentSession.childFlyoutId
+          : currentSession.mainFlyoutId;
 
       return {
         siblingFlyoutId,
@@ -398,9 +399,11 @@ export const EuiFlyoutComponent = forwardRef(
     // Destructure for easier use
     const { siblingFlyoutId } = flyoutIdentity;
 
-    const hasChildFlyout = currentSession?.child != null;
+    const hasChildFlyout = currentSession?.childFlyoutId != null;
     const isChildFlyout =
-      isInManagedContext && hasChildFlyout && currentSession?.child === id;
+      isInManagedContext &&
+      hasChildFlyout &&
+      currentSession?.childFlyoutId === id;
 
     const shouldCloseOnEscape = useMemo(() => {
       // Regular flyout - always close on ESC

packages/eui/src/components/flyout/flyout.tsx

@@ -39,17 +39,16 @@ export type EuiFlyoutProps<T extends ElementType = 'div' | 'nav'> = Omit<
   'as'
 > & {
   session?: boolean;
+  onActive?: () => void;
   as?: T;
 };
 
 export const EuiFlyout = forwardRef<
   HTMLDivElement | HTMLElement,
   EuiFlyoutProps<'div' | 'nav'>
 >((props, ref) => {
-  const { session, as, onClose, ...rest } = usePropsWithComponentDefaults(
-    'EuiFlyout',
-    props
-  );
+  const { session, as, onClose, onActive, ...rest } =
+    usePropsWithComponentDefaults('EuiFlyout', props);
   const hasActiveSession = useHasActiveSession();
   const isUnmanagedFlyout = useRef(false);
   const isInManagedFlyout = useIsInManagedFlyout();
@@ -68,12 +67,21 @@ export const EuiFlyout = forwardRef<
       onClose?.({} as any);
       return null;
     }
-    return <EuiFlyoutMain {...rest} onClose={onClose} as="div" />;
+    return (
+      <EuiFlyoutMain {...rest} onClose={onClose} onActive={onActive} as="div" />
+    );
   }
 
   // Else if this flyout is a child of a session AND within a managed flyout context, render EuiChildFlyout.
   if (hasActiveSession && isInManagedFlyout) {
-    return <EuiFlyoutChild {...rest} onClose={onClose} as="div" />;
+    return (
+      <EuiFlyoutChild
+        {...rest}
+        onClose={onClose}
+        onActive={onActive}
+        as="div"
+      />
+    );
   }
 
   // TODO: if resizeable={true}, render EuiResizableFlyout.

packages/eui/src/components/flyout/flyout_menu.stories.tsx

@@ -10,103 +10,67 @@ import React, { useState } from 'react';
 
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
-import { EuiButton, EuiButtonEmpty, EuiButtonIcon } from '../button';
+import { EuiButton } from '../button';
 import { EuiSpacer } from '../spacer';
 import { EuiText } from '../text';
 import { EuiFlyout } from './flyout';
 import { EuiFlyoutBody } from './flyout_body';
 import { EuiFlyoutMenu, EuiFlyoutMenuProps } from './flyout_menu';
-import { EuiIcon } from '../icon';
-import { EuiPopover } from '../popover';
-import { EuiListGroup, EuiListGroupItem } from '../list_group';
 
 interface Args extends EuiFlyoutMenuProps {
-  showBackButton: boolean;
   showCustomActions: boolean;
-  showPopover: boolean;
+  showHistoryItems: boolean;
 }
 
 const meta: Meta<Args> = {
   title: 'Layout/EuiFlyout/EuiFlyoutMenu',
   component: EuiFlyoutMenu,
   argTypes: {
+    showBackButton: { control: 'boolean' },
     showCustomActions: { control: 'boolean' },
+    'aria-label': { table: { disable: true } },
+    backButtonProps: { table: { disable: true } },
     customActions: { table: { disable: true } },
-    showPopover: { control: 'boolean' },
-    backButton: { table: { disable: true } },
-    popover: { table: { disable: true } },
+    historyItems: { table: { disable: true } },
   },
   args: {
     hideCloseButton: false,
     showBackButton: true,
     showCustomActions: true,
-    showPopover: true,
+    showHistoryItems: true,
   },
 };
 
 export default meta;
 
 const MenuBarFlyout = (args: Args) => {
-  const { showCustomActions, hideCloseButton, showBackButton, showPopover } =
-    args;
+  const {
+    hideCloseButton,
+    showBackButton,
+    showCustomActions,
+    showHistoryItems,
+  } = args;
 
   const [isFlyoutOpen, setIsFlyoutOpen] = useState(true);
   const openFlyout = () => setIsFlyoutOpen(true);
   const closeFlyout = () => {
     setIsFlyoutOpen(false);
   };
 
-  /* Back button */
-
-  // TODO: back button should be internalized in EuiFlyoutMenu when historyItems are passed
-  const backButton = (
-    <EuiButtonEmpty size="xs" color="text">
-      <EuiIcon type="editorUndo" /> Back
-    </EuiButtonEmpty>
-  );
-
-  /* History popover */
-
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const handlePopoverButtonClick = () => {
-    setIsPopoverOpen(!isPopoverOpen);
+  const backButtonProps = {
+    onClick: () => {
+      action('back button')('click');
+    },
   };
 
-  const historyItems = [
-    { config: { mainTitle: 'First item' } },
-    { config: { mainTitle: 'Second item' } },
-    { config: { mainTitle: 'Third item' } },
-  ];
-
-  // TODO: history popover should be internalized in EuiFlyoutMenu when historyItems are passed
-  const historyPopover = (
-    <EuiPopover
-      button={
-        <EuiButtonIcon iconType="arrowDown" color="text" aria-label="History" />
-      }
-      isOpen={isPopoverOpen}
-      onClick={handlePopoverButtonClick}
-      closePopover={() => setIsPopoverOpen(false)}
-      panelPaddingSize="xs"
-      anchorPosition="downLeft"
-    >
-      <EuiListGroup gutterSize="none">
-        {historyItems.map((item, index) => (
-          <EuiListGroupItem
-            key={index}
-            label={item.config.mainTitle}
-            size="s"
-            onClick={() => {
-              action(`Clicked ${item.config.mainTitle}`)();
-              setIsPopoverOpen(false);
-            }}
-          >
-            {item.config.mainTitle}
-          </EuiListGroupItem>
-        ))}
-      </EuiListGroup>
-    </EuiPopover>
-  );
+  const historyItems = showHistoryItems
+    ? ['First item', 'Second item', 'Third item'].map((title) => ({
+        title,
+        onClick: () => {
+          action('history item')(`${title} clicked`);
+        },
+      }))
+    : undefined;
 
   const customActions = ['gear', 'broom'].map((iconType) => ({
     iconType,
@@ -133,8 +97,9 @@ const MenuBarFlyout = (args: Args) => {
           flyoutMenuProps={{
             title: 'Flyout title',
             hideCloseButton,
-            backButton: showBackButton ? backButton : undefined,
-            popover: showPopover ? historyPopover : undefined,
+            showBackButton,
+            backButtonProps,
+            historyItems,
             customActions: showCustomActions ? customActions : undefined,
           }}
         >

packages/eui/src/components/flyout/flyout_menu.tsx

@@ -7,35 +7,107 @@
  */
 
 import classNames from 'classnames';
-import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
+import React, {
+  FunctionComponent,
+  HTMLAttributes,
+  useContext,
+  useState,
+} from 'react';
+
 import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
-import { EuiButtonIcon } from '../button';
-import { CommonProps } from '../common';
+import { EuiButtonEmpty, EuiButtonIcon, EuiButtonProps } from '../button';
+import { CommonProps, PropsForAnchor } from '../common';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
+import { EuiListGroup, EuiListGroupItem } from '../list_group';
+import { EuiPopover } from '../popover';
 import { EuiTitle } from '../title';
 import { EuiFlyoutCloseButton } from './_flyout_close_button';
 import { euiFlyoutMenuStyles } from './flyout_menu.styles';
 import { EuiFlyoutMenuContext } from './flyout_menu_context';
+import type { EuiFlyoutCloseEvent } from './types';
+import { EuiI18n, useEuiI18n } from '../i18n';
+
+type EuiFlyoutMenuBackButtonProps = Pick<
+  PropsForAnchor<EuiButtonProps>,
+  'aria-label' | 'data-test-subj' | 'onClick'
+>;
+
+type EuiFlyoutHistoryItem = {
+  title: string;
+  onClick: () => void;
+};
 
 export type EuiFlyoutMenuProps = CommonProps &
   HTMLAttributes<HTMLDivElement> & {
-    backButton?: React.ReactNode;
-    popover?: React.ReactNode;
     title?: React.ReactNode;
     hideCloseButton?: boolean;
+    showBackButton?: boolean;
+    backButtonProps?: EuiFlyoutMenuBackButtonProps;
+    historyItems?: EuiFlyoutHistoryItem[];
     customActions?: Array<{
       iconType: string;
       onClick: () => void;
       'aria-label': string;
     }>;
   };
 
+const BackButton: React.FC<EuiFlyoutMenuBackButtonProps> = (props) => {
+  return (
+    <EuiButtonEmpty size="xs" color="text" iconType="editorUndo" {...props}>
+      <EuiI18n token="euiFlyoutMenu.back" default="Back" />
+    </EuiButtonEmpty>
+  );
+};
+
+const HistoryPopover: React.FC<{
+  items: EuiFlyoutHistoryItem[];
+}> = ({ items }) => {
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+  const handlePopoverButtonClick = () => {
+    setIsPopoverOpen(!isPopoverOpen);
+  };
+
+  return (
+    <EuiPopover
+      button={
+        <EuiButtonIcon
+          iconType="arrowDown"
+          color="text"
+          aria-label={useEuiI18n('euiFlyoutMenu.history', 'History')}
+        />
+      }
+      isOpen={isPopoverOpen}
+      onClick={handlePopoverButtonClick}
+      closePopover={() => setIsPopoverOpen(false)}
+      panelPaddingSize="xs"
+      anchorPosition="downLeft"
+    >
+      <EuiListGroup gutterSize="none">
+        {items.map((item, index) => (
+          <EuiListGroupItem
+            key={`history-item-${index}`}
+            label={item.title}
+            size="s"
+            onClick={() => {
+              item.onClick();
+              setIsPopoverOpen(false);
+            }}
+          >
+            {item.title}
+          </EuiListGroupItem>
+        ))}
+      </EuiListGroup>
+    </EuiPopover>
+  );
+};
+
 export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
   className,
-  backButton,
-  popover,
   title,
   hideCloseButton,
+  historyItems = [],
+  showBackButton,
+  backButtonProps,
   customActions,
   ...rest
 }) => {
@@ -54,9 +126,7 @@ export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
     );
   }
 
-  const handleClose = (
-    event: MouseEvent | TouchEvent | KeyboardEvent | undefined
-  ) => {
+  const handleClose = (event: EuiFlyoutCloseEvent | undefined) => {
     onClose?.(event);
   };
 
@@ -76,8 +146,18 @@ export const EuiFlyoutMenu: FunctionComponent<EuiFlyoutMenuProps> = ({
         gutterSize="none"
         responsive={false}
       >
-        {backButton && <EuiFlexItem grow={false}>{backButton}</EuiFlexItem>}
-        {popover && <EuiFlexItem grow={false}>{popover}</EuiFlexItem>}
+        {showBackButton && (
+          <EuiFlexItem grow={false}>
+            <BackButton {...backButtonProps} />
+          </EuiFlexItem>
+        )}
+
+        {historyItems.length > 0 && (
+          <EuiFlexItem grow={false}>
+            <HistoryPopover items={historyItems} />
+          </EuiFlexItem>
+        )}
+
         {titleNode && <EuiFlexItem grow={false}>{titleNode}</EuiFlexItem>}
 
         <EuiFlexItem grow={true}></EuiFlexItem>