[EuiContextMenu] Added optional onPanelChange callback hook.

src/components/context_menu/context_menu.test.tsx

@@ -139,8 +139,13 @@ describe('EuiContextMenu', () => {
       });
 
       it('allows you to click the title button to go back to the previous panel', async () => {
+        const onPanelChange = jest.fn();
         const component = mount(
-          <EuiContextMenu panels={panels} initialPanelId={2} />
+          <EuiContextMenu
+            panels={panels}
+            initialPanelId={2}
+            onPanelChange={onPanelChange}
+          />
         );
 
         await tick(20);
@@ -155,6 +160,10 @@ describe('EuiContextMenu', () => {
         await tick(20);
 
         expect(takeMountedSnapshot(component)).toMatchSnapshot();
+        expect(onPanelChange).toHaveBeenCalledWith({
+          panelId: 1,
+          direction: 'previous',
+        });
       });
     });
 

src/components/context_menu/context_menu.tsx

@@ -72,6 +72,14 @@ export const SIZES = keysOf(sizeToClassNameMap);
 export type EuiContextMenuProps = CommonProps &
   Omit<HTMLAttributes<HTMLDivElement>, 'style'> & {
     panels?: EuiContextMenuPanelDescriptor[];
+    /**
+     * Optional callback that fires on every panel change. Passes back
+     * the new panel ID and whether its direction was `next` or `previous`.
+     */
+    onPanelChange?: (panelDetails: {
+      panelId: EuiContextMenuPanelId;
+      direction?: EuiContextMenuPanelTransitionDirection;
+    }) => void;
     initialPanelId?: EuiContextMenuPanelId;
     /**
      * Alters the size of the items and the title
@@ -221,6 +229,8 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
       transitionDirection: direction,
       isOutgoingPanelVisible: true,
     });
+
+    this.props.onPanelChange?.({ panelId, direction });
   }
 
   showNextPanel = (itemIndex?: number) => {
@@ -407,7 +417,14 @@ export class EuiContextMenu extends Component<EuiContextMenuProps, State> {
   }
 
   render() {
-    const { panels, className, initialPanelId, size, ...rest } = this.props;
+    const {
+      panels,
+      onPanelChange,
+      className,
+      initialPanelId,
+      size,
+      ...rest
+    } = this.props;
 
     const incomingPanel = this.renderPanel(this.state.incomingPanelId!, 'in');
     let outgoingPanel;

upcoming_changelogs/6767.md

@@ -0,0 +1 @@
+- Added `onPanelChange` callback to `EuiContextMenu` to provide consumer access to `panelId` and `direction`.