properly close mobile header menu when clicking on component card

Author: LFDanLu

packages/dev/s2-docs/src/MobileHeader.tsx

@@ -1,11 +1,11 @@
 'use client';
 
 import {ActionButton, CloseButton, DialogTrigger} from '@react-spectrum/s2';
-import {composeRenderProps, OverlayTriggerStateContext, Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import {getCurrentLibrary, TAB_DEFS} from './SearchMenu';
 import {keyframes} from '../../../@react-spectrum/s2/style/style-macro' with {type: 'macro'};
 import MenuHamburger from '@react-spectrum/s2/icons/MenuHamburger';
 import {Modal} from '../../../@react-spectrum/s2/src/Modal';
+import {Dialog as RACDialog, DialogProps as RACDialogProps} from 'react-aria-components';
 import React, {CSSProperties, forwardRef, useEffect, useRef} from 'react';
 import {style} from '@react-spectrum/s2/style' with {type: 'macro'};
 
@@ -96,13 +96,7 @@ const MobileCustomDialog = forwardRef<HTMLDivElement, MobileDialogProps>(functio
       <RACDialog
         {...props}
         ref={ref}
-        className={dialogStyle({padding})}>
-        {composeRenderProps(props.children, (children) => (
-          <OverlayTriggerStateContext.Provider value={null}>
-            {children}
-          </OverlayTriggerStateContext.Provider>
-        ))}
-      </RACDialog>
+        className={dialogStyle({padding})} />
     </Modal>
   );
 });

packages/dev/s2-docs/src/Nav.tsx

@@ -4,7 +4,7 @@ import {ComponentCardItem, ComponentCardView} from './ComponentCardView';
 import {Content, Heading, IllustratedMessage, Picker, pressScale, SearchField, Tab, TabList, TabPanel, Tabs, Tag, TagGroup} from '@react-spectrum/s2';
 import {focusRing, size, style} from '@react-spectrum/s2/style' with {type: 'macro'};
 import {type Library, TAB_DEFS} from './SearchMenu';
-import {Link} from 'react-aria-components';
+import {Link, OverlayTriggerStateContext} from 'react-aria-components';
 // eslint-disable-next-line monorepo/no-internal-import
 import NoSearchResults from '@react-spectrum/s2/illustrations/linear/NoSearchResults';
 import type {PageProps} from '@parcel/rsc';
@@ -78,19 +78,20 @@ export function MobileNav({pages, currentPage}: PageProps) {
     return 'react-spectrum';
   };
 
+  let state = useContext(OverlayTriggerStateContext);
   let [selectedLibrary, setSelectedLibrary] = useState<Library>(getCurrentLibrary(currentPage));
 
   let getSectionsForLibrary = useCallback((libraryId: string) => {
     let sectionsMap = new Map();
-    
+
     let filteredPages = pages.filter(page => {
       let pageLibrary: 'react-spectrum' | 'react-aria' | 'internationalized' = 'react-spectrum';
       if (page.url.includes('react-aria')) {
         pageLibrary = 'react-aria';
       } else if (page.url.includes('react-internationalized')) {
         pageLibrary = 'internationalized';
       }
-      
+
       return pageLibrary === libraryId;
     });
 
@@ -118,7 +119,7 @@ export function MobileNav({pages, currentPage}: PageProps) {
     });
     return sectionArray;
   }, [getSectionsForLibrary, selectedLibrary]);
-  
+
 
   useEffect(() => {
       // Auto-select first section initially or when library changes
@@ -184,7 +185,7 @@ export function MobileNav({pages, currentPage}: PageProps) {
     if (!searchValue.trim()) {
       return pages;
     }
-    
+
     let searchLower = searchValue.toLowerCase();
     return pages.filter(page => {
       let pageTitle = title(page).toLowerCase();
@@ -195,9 +196,9 @@ export function MobileNav({pages, currentPage}: PageProps) {
   let getSectionContent = (sectionName: string, libraryId: string, searchValue: string = ''): ComponentCardItem[] => {
     let librarySections = getSectionsForLibrary(libraryId);
     let pages = librarySections.get(sectionName) ?? [];
-    
+
     let filteredPages = filterPages(pages, searchValue);
-    
+
     return filteredPages
       .sort((a, b) => title(a).localeCompare(title(b)))
       .map(page => ({id: page.url.replace(/^\//, ''), name: title(page), href: page.url}));
@@ -225,7 +226,7 @@ export function MobileNav({pages, currentPage}: PageProps) {
   let getSectionNamesForLibrary = (libraryId: string) => {
     let librarySections = getSectionsForLibrary(libraryId);
     let sectionArray = [...librarySections.keys()];
-    
+
     // Show 'Components' first
     sectionArray.sort((a, b) => {
       if (a === 'Components') {
@@ -236,7 +237,7 @@ export function MobileNav({pages, currentPage}: PageProps) {
       }
       return a.localeCompare(b);
     });
-    
+
     return sectionArray;
   };
 
@@ -282,7 +283,7 @@ export function MobileNav({pages, currentPage}: PageProps) {
 
   return (
     <div className={style({minHeight: '100dvh', paddingBottom: 24, boxSizing: 'border-box'})}>
-      <Tabs 
+      <Tabs
         aria-label="Libraries"
         density="compact"
         selectedKey={selectedLibrary}
@@ -310,16 +311,16 @@ export function MobileNav({pages, currentPage}: PageProps) {
               ref={headerRef}
               className={style({position: 'sticky', zIndex: 1, backgroundColor: 'white'})}
               style={{top: tabListHeight}}>
-              <SearchField 
-                aria-label="Search" 
+              <SearchField
+                aria-label="Search"
                 value={searchValue}
                 onChange={handleSearchChange}
                 onFocus={handleSearchFocus}
                 onBlur={handleSearchBlur}
                 styles={style({marginY: 12})} />
               <TagGroup
-                aria-label="Navigation sections" 
-                selectionMode="single" 
+                aria-label="Navigation sections"
+                selectionMode="single"
                 selectedKeys={selectedSection ? [selectedSection] : []}
                 onSelectionChange={handleTagSelection}
                 styles={style({margin: 12})}
@@ -329,6 +330,7 @@ export function MobileNav({pages, currentPage}: PageProps) {
             </div>
             <div ref={scrollContainerRef}>
               <ComponentCardView
+                onAction={() => state?.close()}
                 items={getItemsForSelection(selectedSection, library.id, searchValue)}
                 ariaLabel="Pages"
                 size="S"
@@ -503,7 +505,7 @@ export function MobileOnPageNav({children}) {
           visible.delete(entry.target);
         }
       }
-      
+
       let lastVisible = elements.find(e => visible.has(e));
       if (lastVisible) {
         setSelected('#' + lastVisible.id!);