From b425dff5e2e3fe6dcde043a8a31cc51a6b675394 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 19 Mar 2024 10:33:30 -0700
Subject: [PATCH 1/4] Add render prop option to allow consumers to close the
 mobile popover from within their content

---
 .../header/header_links/header_links.tsx        | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/components/header/header_links/header_links.tsx b/src/components/header/header_links/header_links.tsx
index fc3005a69cd..7b6acd05277 100644
--- a/src/components/header/header_links/header_links.tsx
+++ b/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>

From 16007de4e21f8ee7a6c982dc2f90bcf1a7f1e9e9 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 19 Mar 2024 10:33:34 -0700
Subject: [PATCH 2/4] Add/update tests

+ remove unnecessary snapshot
---
 .../__snapshots__/header_links.test.tsx.snap  | 13 +------
 .../header/header_links/header_links.test.tsx | 34 +++++++++++++++----
 2 files changed, 29 insertions(+), 18 deletions(-)

diff --git a/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap b/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap
index 3551a61bd08..54583c09c2c 100644
--- a/src/components/header/header_links/__snapshots__/header_links.test.tsx.snap
+++ b/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"
diff --git a/src/components/header/header_links/header_links.test.tsx b/src/components/header/header_links/header_links.test.tsx
index 43171f4ba9e..e84eecb6916 100644
--- a/src/components/header/header_links/header_links.test.tsx
+++ b/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();
     });
   });
 });

From 8a64cb6ad7a193364ea3477e5774d043c7f98a42 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 19 Mar 2024 10:43:32 -0700
Subject: [PATCH 3/4] Update demo example with new render prop usage

---
 src-docs/src/views/header/header_links.tsx | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src-docs/src/views/header/header_links.tsx b/src-docs/src/views/header/header_links.tsx
index d7b3d3015fe..b458c6349b9 100644
--- a/src-docs/src/views/header/header_links.tsx
+++ b/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>

From 1a762f142476b4653266bdffc8232ea1a1ea261b Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 19 Mar 2024 10:50:18 -0700
Subject: [PATCH 4/4] changelog

---
 changelogs/upcoming/7603.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 changelogs/upcoming/7603.md

diff --git a/changelogs/upcoming/7603.md b/changelogs/upcoming/7603.md
new file mode 100644
index 00000000000..c9de93959d3
--- /dev/null
+++ b/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