fix(HeaderPanel): Initialize onHeaderPanelFocus with default value

packages/react/src/components/UIShell/HeaderPanel.js

@@ -13,13 +13,14 @@ import { keys, match } from '../../internal/keyboard';
 import { useWindowEvent } from '../../internal/useEvent';
 import { useMergedRefs } from '../../internal/useMergedRefs';
 
+const noopFn = () => {};
 const HeaderPanel = React.forwardRef(function HeaderPanel(
   {
     children,
     className: customClassName,
     expanded,
     addFocusListeners = true,
-    onHeaderPanelFocus,
+    onHeaderPanelFocus = noopFn,
     href,
     ...other
   },
@@ -123,7 +124,6 @@ HeaderPanel.propTypes = {
   /**
    * An optional listener that is called a callback to collapse the HeaderPanel
    */
-
   onHeaderPanelFocus: PropTypes.func,
 };
 

packages/react/src/components/UIShell/__tests__/HeaderPanel-test.js

@@ -8,6 +8,7 @@
 import React from 'react';
 import HeaderPanel from '../HeaderPanel';
 import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 
 describe('HeaderPanel', () => {
   describe('renders as expected - Component API', () => {
@@ -63,5 +64,32 @@ describe('HeaderPanel', () => {
       const childrenArray = screen.getAllByText('Test');
       expect(childrenArray.length).toEqual(2);
     });
+
+    it('should call `onHeaderPanelFocus` callback, when defined', async () => {
+      const onHeaderPanelFocus = jest.fn();
+      render(
+        <HeaderPanel onHeaderPanelFocus={onHeaderPanelFocus}>
+          <button type="button">Test</button>
+        </HeaderPanel>
+      );
+
+      screen.getByRole('button', { name: 'Test' }).focus();
+      await userEvent.keyboard('{Escape}');
+
+      expect(onHeaderPanelFocus).toHaveBeenCalled();
+    });
+
+    it('should not error when `onHeaderPanelFocus` is not defined', async () => {
+      render(
+        <HeaderPanel>
+          <button type="button">Test</button>
+        </HeaderPanel>
+      );
+
+      await expect(async () => {
+        screen.getByRole('button', { name: 'Test' }).focus();
+        await userEvent.keyboard('{Escape}');
+      }).not.toThrow();
+    });
   });
 });