[EuiHeaderLinks] Allow consumers to close the mobile popover from within the popover content

changelogs/upcoming/7603.md

@@ -0,0 +1 @@
+- `EuiHeaderLinks` now accepts a `children` render function that will be passed a `closeMobilePopover` callback, allowing consumers to close the mobile popover by its content

src-docs/src/views/header/header_links.tsx

@@ -17,11 +17,19 @@ export default () => {
 
       <EuiHeaderSectionItem>
         <EuiHeaderLinks aria-label="App navigation links example">
-          <EuiHeaderLink isActive>Docs</EuiHeaderLink>
+          {(closeMobilePopover) => (
+            <>
+              <EuiHeaderLink isActive onClick={closeMobilePopover}>
+                Docs
+              </EuiHeaderLink>
 
-          <EuiHeaderLink>Code</EuiHeaderLink>
+              <EuiHeaderLink onClick={closeMobilePopover}>Code</EuiHeaderLink>
 
-          <EuiHeaderLink iconType="help">Help</EuiHeaderLink>
+              <EuiHeaderLink iconType="help" onClick={closeMobilePopover}>
+                Help
+              </EuiHeaderLink>
+            </>
+          )}
         </EuiHeaderLinks>
       </EuiHeaderSectionItem>
     </EuiHeader>

src/components/header/header_links/__snapshots__/header_links.test.tsx.snap

@@ -56,18 +56,7 @@ exports[`EuiHeaderLinks is rendered 1`] = `
 </nav>
 `;
 
-exports[`EuiHeaderLinks popover props is never rendered with "none" 1`] = `
-<nav
-  aria-label="App menu"
-  class="euiHeaderLinks emotion-euiHeaderLinks"
->
-  <div
-    class="euiHeaderLinks__list emotion-euiHeaderLinks__list-s-EuiHeaderLinks"
-  />
-</nav>
-`;
-
-exports[`EuiHeaderLinks popover props is rendered 1`] = `
+exports[`EuiHeaderLinks mobile menu/popover renders various popover props 1`] = `
 <nav
   aria-label="App menu"
   class="euiHeaderLinks emotion-euiHeaderLinks"

src/components/header/header_links/header_links.test.tsx

@@ -7,9 +7,14 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import {
+  render,
+  waitForEuiPopoverOpen,
+  waitForEuiPopoverClose,
+} from '../../../test/rtl';
 import { requiredProps } from '../../../test';
 import { shouldRenderCustomStyles } from '../../../test/internal';
-import { render } from '../../../test/rtl';
 
 import { EuiHeaderLinks, GUTTER_SIZES } from './header_links';
 
@@ -36,8 +41,8 @@ describe('EuiHeaderLinks', () => {
     });
   });
 
-  describe('popover props', () => {
-    test('is rendered', () => {
+  describe('mobile menu/popover', () => {
+    it('renders various popover props', () => {
       const { container } = render(
         <EuiHeaderLinks
           popoverBreakpoints={['xs', 's', 'm', 'l', 'xl']}
@@ -52,12 +57,29 @@ describe('EuiHeaderLinks', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('is never rendered with "none"', () => {
+    it('never renders a popover with "none" breakpoint', () => {
       const { container } = render(
-        <EuiHeaderLinks popoverBreakpoints={'none'} />
+        <EuiHeaderLinks popoverBreakpoints="none" />
       );
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container.querySelector('.euiPopover')).toBeNull();
+    });
+
+    it('passes a callback that closes the menu/popover to children render props', () => {
+      const { getByLabelText, getByText } = render(
+        <EuiHeaderLinks popoverBreakpoints="all">
+          {(closePopover) => (
+            <a href="#" onClick={closePopover}>
+              This link should close the popover
+            </a>
+          )}
+        </EuiHeaderLinks>
+      );
+
+      fireEvent.click(getByLabelText('Open menu'));
+      waitForEuiPopoverOpen();
+      fireEvent.click(getByText('This link should close the popover'));
+      waitForEuiPopoverClose();
     });
   });
 });

src/components/header/header_links/header_links.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, {
+  ReactNode,
   HTMLAttributes,
   FunctionComponent,
   useState,
@@ -39,7 +40,14 @@ type EuiHeaderLinksPopoverButtonProps =
   };
 
 export type EuiHeaderLinksProps = CommonProps &
-  HTMLAttributes<HTMLElement> & {
+  Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /**
+     * Takes any rendered node(s), typically of `EuiHeaderLink`s.
+     *
+     * Optionally takes a render function that will pass a callback allowing you
+     * to close the mobile popover from within your popover content.
+     */
+    children?: ReactNode | ((closeMobilePopover: () => void) => ReactNode);
     /**
      * Spacing between direct children
      */
@@ -116,6 +124,9 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
     </EuiI18n>
   );
 
+  const renderedChildren =
+    typeof children === 'function' ? children(closeMenu) : children;
+
   return (
     <EuiI18n token="euiHeaderLinks.appNavigation" default="App menu">
       {(appNavigation: string) => (
@@ -133,7 +144,7 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
                 styles.gutterSizes[gutterSize],
               ]}
             >
-              {children}
+              {renderedChildren}
             </div>
           </EuiHideFor>
 
@@ -151,7 +162,7 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
                 className="euiHeaderLinks__mobileList"
                 css={styles.euiHeaderLinks__mobileList}
               >
-                {children}
+                {renderedChildren}
               </div>
             </EuiPopover>
           </EuiShowFor>