@primer/doctocat-nextjs 0.4.0 → 0.4.1-rc.afcbafc

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @primer/doctocat-nextjs
 
+## 0.4.1
+
+### Patch Changes
+
+- [#28](https://github.com/primer/doctocat-nextjs/pull/28) [`ef80501`](https://github.com/primer/doctocat-nextjs/commit/ef805016a05b059ab3da2f547f89dfc3cc9f0e09) Thanks [@rezrah](https://github.com/rezrah)! - Fixed a bug where a tabs were required in standalone, nested pages using filename `index.mdx`.
+
+  Use `show-tabs: false` in frontmatter to disable the tabs and present content as normal.
+
 ## 0.4.0
 
 ### Minor Changes

package/components/highlight-search-term/HighlightSearchTerm.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+
+export type HighlightSearchTermProps = {
+  children: React.ReactNode
+  searchTerm: string
+}
+
+export const HighlightSearchTerm = ({children, searchTerm}: HighlightSearchTermProps) => {
+  if (!children || !searchTerm) {
+    return <>{children}</>
+  }
+
+  const escapedSearchTerm = searchTerm.replace(/[.*+?^${}()|[\]\\<>]/g, '\\$&')
+
+  const parts = children.toString().split(new RegExp(`(${escapedSearchTerm})`, 'gi'))
+
+  return (
+    <>
+      {parts.map((part, i) => (part.toLowerCase() === searchTerm.toLowerCase() ? <mark key={i}>{part}</mark> : part))}
+    </>
+  )
+}

package/components/layout/global-search/GlobalSearch.module.css

@@ -0,0 +1,98 @@
+.GlobalSearch__searchInput {
+  width: 100%;
+  z-index: 1;
+}
+
+.GlobalSearch__searchResultsContainer {
+  display: none;
+  margin-top: var(--base-size-4);
+  position: absolute;
+  z-index: 1;
+  background-color: var(--brand-color-canvas-default);
+  padding-block-start: var(--base-size-16);
+  width: 100%;
+  max-width: calc(100% - 46px);
+  border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  border-radius: var(--brand-borderRadius-medium);
+  max-height: 300px;
+  overflow-y: auto;
+  overflow-x: hidden;
+}
+
+.GlobalSearch__searchResultsContainer--open {
+  display: block;
+}
+
+.GlobalSearch__searchResultsContainer::-webkit-scrollbar {
+  width: 8px;
+}
+
+.GlobalSearch__searchResultsContainer::-webkit-scrollbar-track {
+  background-color: var(--brand-color-canvas-default);
+}
+
+.GlobalSearch__searchResultsContainer::-webkit-scrollbar-thumb {
+  background-color: var(--brand-color-text-muted);
+  border-radius: var(--base-size-4);
+}
+
+@media (min-width: 768px) {
+  .GlobalSearch__searchResultsContainer {
+    max-width: 350px;
+  }
+}
+
+.GlobalSearch__searchResultsEmpty {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 150px;
+}
+
+.GlobalSearch__searchResultsHeading {
+  padding-inline-start: var(--base-size-20);
+}
+
+.GlobalSearch__searchResultsList {
+  list-style: none;
+  padding-inline: var(--base-size-16);
+}
+
+.GlobalSearch__searchResultItem {
+  position: relative;
+  padding-block: var(--base-size-16);
+  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
+  scroll-margin-block: var(--base-size-8);
+}
+
+.GlobalSearch__searchResultItem[aria-selected='true'] {
+  outline: var(--base-size-4) solid var(--brand-color-focus);
+  outline-radius: var(--base-size-8);
+  padding-inline: var(--base-size-4);
+  margin-inline: calc(-1 * var(--base-size-4));
+  background-color: var(--brand-color-canvas-default);
+  border-radius: var(--brand-borderRadius-small);
+}
+
+.GlobalSearch__searchResultItem mark {
+  background-color: var(--brand-color-accent-primary);
+  color: var(--brand-color-text-onEmphasis);
+}
+
+.GlobalSearch__searchResultLink {
+  color: var(--brand-color-text-default);
+}
+
+.GlobalSearch__searchResultItem:has(mark) .GlobalSearch__searchResultLink {
+  text-decoration-color: var(--brand-color-text-onEmphasis);
+}
+
+.GlobalSearch__searchResultLink::before {
+  content: '';
+  display: block;
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}

package/components/layout/global-search/GlobalSearch.tsx

@@ -0,0 +1,254 @@
+import React, {forwardRef, useEffect, useMemo, useRef, useState} from 'react'
+import {SearchIcon} from '@primer/octicons-react'
+import {FormControl, TextInput} from '@primer/react'
+import {Heading, Stack, Text} from '@primer/react-brand'
+import {clsx} from 'clsx'
+import type {MdxFile} from 'nextra'
+import Link from 'next/link'
+import {useRouter} from 'next/navigation'
+
+import styles from './GlobalSearch.module.css'
+import type {DocsItem} from '../../../types'
+import {HighlightSearchTerm} from '../../highlight-search-term/HighlightSearchTerm'
+
+type GlobalSearchProps = {
+  flatDocsDirectories: DocsItem[]
+  siteTitle: string
+  onNavigate?: () => void
+}
+
+type SearchResult = {
+  title: string
+  description: string
+  url: string
+}
+
+export const GlobalSearch = forwardRef<HTMLInputElement, GlobalSearchProps>(
+  ({siteTitle, flatDocsDirectories, onNavigate}, forwardedRef) => {
+    const router = useRouter()
+    const listboxRef = useRef<HTMLUListElement | null>(null)
+    const searchResultsRef = useRef<HTMLDivElement | null>(null)
+    const [isSearchResultOpen, setIsSearchResultOpen] = useState(false)
+    const [searchResults, setSearchResults] = useState<SearchResult[]>([])
+    const [searchTerm, setSearchTerm] = useState<string | undefined>('')
+    const [activeDescendant, setActiveDescendant] = useState<number>(-1)
+
+    useEffect(() => {
+      const handleClickAway = (event: MouseEvent) => {
+        if (!searchResultsRef.current?.contains(event.target as Node)) {
+          setIsSearchResultOpen(false)
+        }
+      }
+
+      document.addEventListener('click', handleClickAway)
+
+      return () => {
+        document.removeEventListener('click', handleClickAway)
+      }
+    }, [])
+
+    const searchData = useMemo(
+      () =>
+        flatDocsDirectories.reduce<SearchResult[]>((acc, item) => {
+          if (item.route === '/') return acc // remove homepage
+
+          const {frontMatter, route} = item as MdxFile
+          if (!frontMatter) return acc
+          const result = {
+            title:
+              frontMatter['show-tabs'] && frontMatter['tab-label']
+                ? `${frontMatter.title} | ${frontMatter['tab-label']}`
+                : frontMatter.title
+                  ? frontMatter.title
+                  : '',
+            description: frontMatter.description ? frontMatter.description : '',
+            url: route,
+          }
+          return [...acc, result]
+        }, []),
+      [flatDocsDirectories],
+    )
+
+    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const value = e.target.value.toLowerCase()
+
+      if (value.length === 0) {
+        setSearchTerm(undefined)
+        setSearchResults([])
+        setIsSearchResultOpen(false)
+        return
+      }
+
+      const filteredData = searchData.filter(data => {
+        const title = data.title.toLowerCase()
+        const description = data.description.toLowerCase()
+        return title.includes(value) || description.includes(value)
+      })
+
+      const sortedData = filteredData.sort((a, b) => {
+        const aTitle = a.title.toLowerCase()
+        const bTitle = b.title.toLowerCase()
+        const aIncludes = aTitle.includes(value)
+        const bIncludes = bTitle.includes(value)
+
+        if (aIncludes && !bIncludes) {
+          return -1
+        } else if (!aIncludes && bIncludes) {
+          return 1
+        } else {
+          return 0
+        }
+      })
+
+      setSearchResults(sortedData)
+
+      setSearchTerm(value)
+      setIsSearchResultOpen(true)
+      return
+    }
+
+    const updateActiveDescendant = (offset: number) => {
+      if (searchResults.length === 0) {
+        setActiveDescendant(-1)
+        return
+      }
+
+      // Wraps from the last item to the first and vice versa
+      const nextActiveDescendant = (activeDescendant + offset + searchResults.length) % searchResults.length
+      setActiveDescendant(nextActiveDescendant)
+
+      listboxRef.current
+        ?.querySelector(`#search-result-${nextActiveDescendant}`)
+        // Scroll all the way to the top when the first item is selected
+        ?.scrollIntoView({block: nextActiveDescendant === 0 ? 'center' : 'nearest'})
+    }
+
+    const resetSearch = () => {
+      setSearchTerm('')
+      setSearchResults([])
+      setIsSearchResultOpen(false)
+      setActiveDescendant(-1)
+    }
+
+    const handleKeyDown = (e: React.KeyboardEvent) => {
+      switch (e.key) {
+        case 'ArrowDown':
+          e.preventDefault()
+          updateActiveDescendant(1)
+          break
+        case 'ArrowUp':
+          e.preventDefault()
+          updateActiveDescendant(-1)
+          break
+        case 'Enter':
+          e.preventDefault()
+          if (activeDescendant !== -1) {
+            const selectedResult = searchResults[activeDescendant]
+            if (selectedResult.url) {
+              router.push(selectedResult.url)
+              onNavigate?.()
+              resetSearch()
+            }
+          }
+          break
+        case 'Escape':
+          if (isSearchResultOpen) {
+            e.preventDefault()
+            resetSearch()
+          }
+          break
+        case 'Tab':
+          resetSearch()
+          break
+        default:
+          break
+      }
+    }
+
+    return (
+      <div ref={searchResultsRef}>
+        <FormControl>
+          <FormControl.Label visuallyHidden>Search</FormControl.Label>
+          <TextInput
+            contrast
+            type="search"
+            className={styles.GlobalSearch__searchInput}
+            leadingVisual={<SearchIcon />}
+            placeholder={`Search ${siteTitle}`}
+            ref={forwardedRef}
+            value={searchTerm}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            role="combobox"
+            aria-activedescendant={activeDescendant === -1 ? undefined : `search-result-${activeDescendant}`}
+            aria-autocomplete="list"
+            aria-controls="search-results-listbox"
+            aria-expanded={isSearchResultOpen}
+          />
+        </FormControl>
+        {searchTerm && (
+          <div
+            className={clsx(
+              styles.GlobalSearch__searchResultsContainer,
+              isSearchResultOpen && styles['GlobalSearch__searchResultsContainer--open'],
+            )}
+            tabIndex={-1}
+          >
+            <Stack direction="vertical" padding="none" gap="none">
+              {searchTerm && (
+                <Heading
+                  as="h3"
+                  size="subhead-large"
+                  id="search-results-heading"
+                  className={styles.GlobalSearch__searchResultsHeading}
+                >
+                  {searchResults.length} Results for &quot;{searchTerm}&quot;
+                </Heading>
+              )}
+              {searchResults.length > 0 ? (
+                <ul
+                  role="listbox"
+                  ref={listboxRef}
+                  id="search-results-listbox"
+                  aria-labelledby="search-results-heading"
+                  className={clsx(styles.GlobalSearch__searchResultsList)}
+                >
+                  {searchResults.map((result, index) => (
+                    <li
+                      key={`${result.title}-${index}`}
+                      className={clsx(styles.GlobalSearch__searchResultItem)}
+                      id={`search-result-${index}`}
+                      aria-selected={index === activeDescendant}
+                      role="option"
+                    >
+                      <Link
+                        className={styles.GlobalSearch__searchResultLink}
+                        href={result.url}
+                        tabIndex={-1}
+                        onClick={() => {
+                          onNavigate?.()
+                          resetSearch()
+                        }}
+                      >
+                        <Text size="200">
+                          <HighlightSearchTerm searchTerm={searchTerm}>{result.title}</HighlightSearchTerm>
+                        </Text>
+                        <Text as="p" size="100" variant="muted">
+                          <HighlightSearchTerm searchTerm={searchTerm}>{result.description}</HighlightSearchTerm>
+                        </Text>
+                      </Link>
+                    </li>
+                  ))}
+                </ul>
+              ) : (
+                <div className={styles.GlobalSearch__searchResultsEmpty}>
+                  <Text variant="muted">No results found</Text>
+                </div>
+              )}
+            </Stack>
+          </div>
+        )}
+      </div>
+    )
+  },
+)

package/components/layout/header/Header.module.css

@@ -9,14 +9,14 @@
   z-index: 20;
 }
 
-@media (max-width: 768px) {
+@media (max-width: 767px) {
   .Header__searchArea {
     display: none;
     position: absolute;
     top: 72px;
     left: 0;
     margin: 0;
-    width: 100%;
+    width: 100vw;
     padding: var(--base-size-24);
     padding-top: 0;
     background: var(--brand-color-canvas-default);
@@ -52,6 +52,11 @@
     background-color: rgba(0, 0, 0, 0.5);
     z-index: -1;
   }
+
+  .Header__searchButton,
+  .Header__navDrawerContainer {
+    display: flex;
+  }
 }
 
 @media (min-width: 768px) {
@@ -66,15 +71,13 @@
     margin-inline-end: var(--base-size-16);
   }
 
-  .Header__searchHeaderBanner {
+  .Header__searchHeaderBanner,
+  .Header__searchButton,
+  .Header__navDrawerContainer {
     display: none;
   }
 }
 
-.Header__searchInput {
-  width: 100%;
-}
-
 .Header__siteTitle {
   display: flex;
   gap: var(--base-size-8);
@@ -86,20 +89,3 @@
 .Header__siteTitle svg {
   fill: var(--brand-color-text-default);
 }
-
-.Header__searchResultsList {
-  list-style: none;
-  padding: 0;
-  border-top: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-  padding-block-start: var(--base-size-16);
-}
-
-.Header__searchResultsList li:not(:last-child) {
-  margin-block-end: var(--base-size-16);
-  padding-block-end: var(--base-size-16);
-  border-bottom: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);
-}
-
-.Header__searchResultsList a {
-  color: var(--brand-color-text-default);
-}

package/components/layout/header/Header.tsx

@@ -1,10 +1,9 @@
-import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'
+import React, {useEffect, useRef, useState} from 'react'
 import {MarkGithubIcon, MoonIcon, SearchIcon, SunIcon, ThreeBarsIcon, XIcon} from '@primer/octicons-react'
-import {Box, FormControl, IconButton, TextInput} from '@primer/react'
-import {Heading, Stack, Text} from '@primer/react-brand'
+import {IconButton} from '@primer/react'
+import {Stack, Text} from '@primer/react-brand'
 import {clsx} from 'clsx'
-import {MdxFile, PageMapItem} from 'nextra'
-import {debounce} from 'lodash'
+import {PageMapItem} from 'nextra'
 
 import Link from 'next/link'
 import styles from './Header.module.css'
@@ -12,6 +11,8 @@ import {NavDrawer} from '../nav-drawer/NavDrawer'
 import {useNavDrawerState} from '../nav-drawer/useNavDrawerState'
 import {useColorMode} from '../../context/color-modes/useColorMode'
 import {DocsItem} from '../../../types'
+import {GlobalSearch} from '../global-search/GlobalSearch'
+import {FocusOn} from 'react-focus-on'
 
 type HeaderProps = {
   pageMap: PageMapItem[]
@@ -19,148 +20,24 @@ type HeaderProps = {
   siteTitle: string
 }
 
-type SearchResults = {
-  title: string
-  description: string
-  url: string
-}
-
 export function Header({pageMap, siteTitle, flatDocsDirectories}: HeaderProps) {
+  const searchRef = useRef<HTMLInputElement | null>(null)
   const {colorMode, setColorMode} = useColorMode()
-  const inputRef = useRef<HTMLInputElement | null>(null)
-  const searchResultsRef = useRef<HTMLElement | null>(null)
+  const searchTriggerRef = useRef<HTMLButtonElement | null>(null)
   const [isNavDrawerOpen, setIsNavDrawerOpen] = useNavDrawerState('768')
   const [isSearchOpen, setIsSearchOpen] = useState(false)
-  const [isSearchResultOpen, setIsSearchResultOpen] = useState(false)
-  const [searchResults, setSearchResults] = useState<SearchResults[] | undefined>()
-  const [searchTerm, setSearchTerm] = useState<string | undefined>('')
-  const [activeDescendant] = useState<number>(-1)
-
-  useEffect(() => {
-    if (isSearchOpen && inputRef.current) {
-      inputRef.current.focus()
-    }
-  }, [isSearchOpen])
-
-  useEffect(() => {
-    const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
-        setIsSearchResultOpen(false)
-      }
-    }
-
-    const handleClickAway = (event: MouseEvent) => {
-      if (
-        inputRef.current &&
-        !inputRef.current.contains(event.target as Node) &&
-        !searchResultsRef.current?.contains(event.target as Node)
-      ) {
-        setIsSearchResultOpen(false)
-      }
-    }
-
-    document.addEventListener('keydown', handleKeyDown)
-    document.addEventListener('click', handleClickAway)
-
-    // Clean up the event listener when the component unmounts
-    return () => {
-      document.removeEventListener('keydown', handleKeyDown)
-      document.removeEventListener('click', handleClickAway)
-    }
-  }, [])
 
   useEffect(() => {
     document.documentElement.setAttribute('data-color-mode', colorMode)
   }, [colorMode])
 
-  const setSearchResultsDebounced = debounce((data: SearchResults[] | undefined) => setSearchResults(data), 1000)
-  const searchData = useMemo(
-    () =>
-      flatDocsDirectories
-        .map(item => {
-          if (item.route === '/') return null // remove homepage
-          return item
-        })
-        .filter(Boolean)
-        .map(item => {
-          const {frontMatter, route} = item as MdxFile
-          if (!frontMatter) return null
-          const result = {
-            title:
-              frontMatter['show-tabs'] && frontMatter['tab-label']
-                ? `${frontMatter.title} | ${frontMatter['tab-label']}`
-                : frontMatter.title
-                  ? frontMatter.title
-                  : '',
-            description: frontMatter.description ? frontMatter.description : '',
-            url: route,
-          }
-          return result
-        }),
-    [flatDocsDirectories],
-  )
-
-  const handleChange = () => {
-    if (!inputRef.current) return
-    if (inputRef.current.value.length === 0) {
-      setSearchTerm(undefined)
-      setSearchResults(undefined)
-      setIsSearchResultOpen(false)
-      return
-    }
-    if (inputRef.current.value.length > 2) {
-      const curSearchTerm = inputRef.current.value.toLowerCase()
-
-      // filters the frontMatter title and descriptions against the search term
-      const filteredData = searchData
-        .filter((data): data is SearchResults => data !== null)
-        .filter(data => {
-          if (!data.title) return false
-          const title = data.title.toLowerCase()
-          const description = data.description.toLowerCase()
-          return title.includes(curSearchTerm) || description.includes(curSearchTerm)
-        })
-
-      // sorts the data to show hits in title first, description second
-      const sortedData = filteredData.sort((a, b) => {
-        const aTitle = a.title.toLowerCase()
-        const bTitle = b.title.toLowerCase()
-        const aIncludes = aTitle.includes(curSearchTerm)
-        const bIncludes = bTitle.includes(curSearchTerm)
-
-        if (aIncludes && !bIncludes) {
-          return -1
-        } else if (!aIncludes && bIncludes) {
-          return 1
-        } else {
-          return 0
-        }
-      })
-
-      setSearchResultsDebounced(sortedData)
-
-      setSearchTerm(inputRef.current.value)
-      setIsSearchResultOpen(true)
-      return
-    }
+  const closeSearch = () => {
+    setIsSearchOpen(false)
+    setTimeout(() => {
+      searchTriggerRef.current?.focus()
+    }, 0)
   }
 
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault()
-    if (!inputRef.current) return
-    if (!inputRef.current.value) {
-      // eslint-disable-next-line i18n-text/no-en
-      alert(`Enter a value and try again.`)
-      return
-    }
-
-    alert(`Name: ${inputRef.current.value}`)
-  }
-
-  const handleSearchButtonOpenClick = useCallback(() => {
-    setIsSearchOpen(true)
-  }, [])
-
   return (
     <nav
       className={clsx(styles.Header, isSearchOpen && styles['Header--searchAreaOpen'])}
@@ -174,123 +51,22 @@ export function Header({pageMap, siteTitle, flatDocsDirectories}: HeaderProps) {
         </Text>
       </Link>
       <div className={clsx(styles.Header__searchArea, isSearchOpen && styles['Header__searchArea--open'])}>
-        <FormControl>
-          <FormControl.Label visuallyHidden>Search</FormControl.Label>
-          <TextInput
-            contrast
-            className={styles.Header__searchInput}
-            leadingVisual={<SearchIcon />}
-            placeholder={`Search ${siteTitle}`}
-            ref={inputRef}
-            onSubmit={handleSubmit}
-            onChange={handleChange}
-            trailingAction={
-              searchTerm ? (
-                <TextInput.Action
-                  onClick={() => {
-                    if (inputRef.current) {
-                      inputRef.current.value = ''
-                      setSearchTerm(undefined)
-                      setSearchResults(undefined)
-                    }
-                  }}
-                  icon={XIcon}
-                  aria-label="Clear input"
-                  tooltipDirection="nw"
-                  sx={{color: 'fg.subtle'}}
-                />
-              ) : undefined
-            }
-            aria-activedescendant={activeDescendant === -1 ? undefined : `search-result-${activeDescendant}`}
+        <FocusOn enabled={isSearchOpen} onEscapeKey={closeSearch} onClickOutside={closeSearch}>
+          <GlobalSearch
+            ref={searchRef}
+            siteTitle={siteTitle}
+            flatDocsDirectories={flatDocsDirectories}
+            onNavigate={() => closeSearch()}
           />
-        </FormControl>
-        {searchTerm && (
-          <Box
-            ref={searchResultsRef}
-            sx={{
-              display: isSearchResultOpen ? 'block' : 'none',
-              marginTop: 1,
-              position: 'absolute',
-              zIndex: 1,
-              backgroundColor: 'var(--brand-color-canvas-default)',
-              padding: 'var(--base-size-16)',
-              width: '100%',
-              maxWidth: ['calc(100% - 46px)', null, '350px'],
-              border: 'var(--brand-borderWidth-thin) solid var(--brand-color-border-default)',
-              borderRadius: 'var(--brand-borderRadius-medium)',
-              maxHeight: 300,
-              overflowY: 'auto',
-              overflowX: 'hidden',
-              '&::-webkit-scrollbar': {
-                width: 8,
-              },
-              '&::-webkit-scrollbar-track': {
-                backgroundColor: 'var(--brand-color-canvas-default)',
-              },
-              '&::-webkit-scrollbar-thumb': {
-                backgroundColor: 'var(--brand-color-text-muted)',
-                borderRadius: 'var(--base-size-4)',
-              },
-            }}
-          >
-            <Stack direction="vertical" padding="none" gap="none">
-              {searchTerm && (
-                <Box sx={{pl: 1}}>
-                  <Heading as="h3" size="subhead-large" id="search-results-heading">
-                    {searchResults && searchResults.length} Results for &quot;{searchTerm}&quot;
-                  </Heading>
-                </Box>
-              )}
-              {searchResults && searchResults.length > 0 ? (
-                <ul
-                  role="listbox"
-                  tabIndex={0}
-                  aria-labelledby="search-results-heading"
-                  className={clsx(styles.Header__searchResultsList)}
-                >
-                  {searchResults.map((result, index) => (
-                    <li
-                      key={`${result.title}-${index}`}
-                      id={`search-result-${index}`}
-                      role="option"
-                      aria-selected={index === activeDescendant}
-                    >
-                      <Text size="200" className={styles.Header__searchResultItemTitle}>
-                        <Link href={result.url}>{result.title}</Link>
-                      </Text>
-                      <Text
-                        as="p"
-                        size="100"
-                        variant="muted"
-                        id={`search-result-item-desc${index}`}
-                        className={styles.Header__searchResultItemDesc}
-                      >
-                        {result.description}
-                      </Text>
-                    </li>
-                  ))}
-                </ul>
-              ) : (
-                <Box sx={{p: '100', display: 'flex', justifyContent: 'center', alignItems: 'center', height: 150}}>
-                  <Text variant="muted">No results found</Text>
-                </Box>
-              )}
+          <div className={styles.Header__searchHeaderBanner}>
+            <Stack direction="horizontal" padding="none" gap={4} alignItems="center" justifyContent="space-between">
+              <Text as="p" size="300" weight="semibold">
+                Search
+              </Text>
+              <IconButton icon={XIcon} variant="invisible" aria-label="Close search" onClick={closeSearch} />
             </Stack>
-          </Box>
-        )}
-        <div className={styles.Header__searchHeaderBanner}>
-          <Stack direction="horizontal" padding="none" gap={4} alignItems="center" justifyContent="space-between">
-            <Text as="p" size="300" weight="semibold">
-              Search
-            </Text>
-            <IconButton
-              icon={XIcon}
-              variant="invisible"
-              aria-label="Close search"
-              onClick={() => setIsSearchOpen(false)}
-            />
-          </Stack>
-        </div>
+          </div>
+        </FocusOn>
       </div>
       <div>
         <Stack direction="horizontal" padding="none" gap={4}>
@@ -301,13 +77,14 @@ export function Header({pageMap, siteTitle, flatDocsDirectories}: HeaderProps) {
             onClick={() => setColorMode(colorMode === 'light' ? 'dark' : 'light')}
           />
           <IconButton
+            ref={searchTriggerRef}
+            className={styles.Header__searchButton}
             icon={SearchIcon}
             variant="invisible"
             aria-label={`Open search`}
-            sx={{display: ['flex', null, 'none']}}
-            onClick={handleSearchButtonOpenClick}
+            onClick={() => setIsSearchOpen(true)}
           />
-          <Box sx={{display: ['flex', null, 'none']}}>
+          <div className={styles.Header__navDrawerContainer}>
             <IconButton
               icon={ThreeBarsIcon}
               variant="invisible"
@@ -316,7 +93,7 @@ export function Header({pageMap, siteTitle, flatDocsDirectories}: HeaderProps) {
               onClick={() => setIsNavDrawerOpen(true)}
             />
             <NavDrawer isOpen={isNavDrawerOpen} onDismiss={() => setIsNavDrawerOpen(false)} navItems={pageMap} />
-          </Box>
+          </div>
         </Stack>
       </div>
     </nav>

package/components/layout/root-layout/Theme.tsx

@@ -79,7 +79,8 @@ export function Theme({children, pageMap}: ThemeProps) {
   // eslint-disable-next-line i18n-text/no-en
   const siteTitle = process.env.NEXT_PUBLIC_SITE_TITLE || 'Example Site'
   const isHomePage = route === '/'
-  const isIndexPage = /index\.mdx?$/.test(filePath) && !isHomePage && activeMetadata && !activeMetadata['show-tabs']
+  const isIndexPage =
+    /index\.mdx?$/.test(filePath) && !isHomePage && activeMetadata && activeMetadata['show-tabs'] === undefined
   const data = !isHomePage && activePath[activePath.length - 2]
   const filteredTabData: MdxFile[] = data && hasChildren(data) ? ((data as Folder).children as MdxFile[]) : []
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.4.0",
+  "version": "0.4.1-rc.afcbafc",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",