[EuiContextMenu] Added optional onPanelChange callback hook. (#6767)

* Adding optional onPanelChange callback hook. * Added changelog entry. * Update src/components/context_menu/context_menu.tsx Co-authored-by: Cee Chen <[email protected]> * Update src/components/context_menu/context_menu.tsx Co-authored-by: Bree Hall <[email protected]> * Update src/components/context_menu/context_menu.test.tsx Co-authored-by: Cee Chen <[email protected]> --------- Co-authored-by: Cee Chen <[email protected]> Co-authored-by: Bree Hall <[email protected]>
elastic · May 11, 2023 · 4a9724d · 4a9724d
1 parent f610ca3
commit 4a9724d
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 2 deletions.
diff --git a/src/components/context_menu/context_menu.test.tsx b/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',
+        });
       });
     });
 

diff --git a/src/components/context_menu/context_menu.tsx b/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;

diff --git a/upcoming_changelogs/6767.md b/upcoming_changelogs/6767.md
@@ -0,0 +1 @@
+- Added `onPanelChange` callback to `EuiContextMenu` to provide consumer access to `panelId` and `direction`.