@graphcommerce/magento-search-overlay 9.0.0-canary.117

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# @graphcommerce/magento-search-overlay
+
+## 9.0.0-canary.117
+
+### Minor Changes
+
+- [#2361](https://github.com/graphcommerce-org/graphcommerce/pull/2361) [`9c3149c`](https://github.com/graphcommerce-org/graphcommerce/commit/9c3149cb7550c6bf7de4b8e3bcaabe2f6a70d5c7) - Search overlay package this is compatible with Magento's default search as well as any other implementation like Algolia and Adobe Sensei. ([@paales](https://github.com/paales))

package/README.md

@@ -0,0 +1,8 @@
+# Magento Search Overlay
+
+## Installation
+
+1.  Find current version of your `@graphcommerce/magento-search` in your
+    package.json.
+2.  `yarn add @graphcommerce/magento-search@1.2.3` (replace 1.2.3 with the
+    version of the step above)

package/components/SearchOverlay.tsx

@@ -0,0 +1,58 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import type { ProductListItemRenderer } from '@graphcommerce/magento-product'
+import { MediaQuery, Overlay } from '@graphcommerce/next-ui'
+import { Box, useTheme } from '@mui/material'
+import { SearchOverlayBodyBase } from './SearchOverlayBodyBase'
+import { SearchOverlayCategories } from './SearchOverlayCategories'
+import { SearchOverlayHeader } from './SearchOverlayHeader'
+import { SearchOverlayProducts } from './SearchOverlayProducts'
+import { searchOverlayIsOpen, SearchOverlayProvider } from './SearchOverlayProvider'
+import { SearchOverlaySuggestions } from './SearchOverlaySuggestions'
+
+export type SearchOverlayProps = {
+  productListRenderer: ProductListItemRenderer
+  slotProps?: {
+    overlay?: Partial<React.ComponentProps<typeof Overlay>>
+    header?: React.ComponentProps<typeof SearchOverlayHeader>
+    body?: Partial<React.ComponentProps<typeof SearchOverlayBodyBase>>
+    suggestions?: Partial<React.ComponentProps<typeof SearchOverlaySuggestions>>
+    categories?: Partial<React.ComponentProps<typeof SearchOverlayCategories>>
+    products?: Partial<React.ComponentProps<typeof SearchOverlayProducts>>
+  }
+}
+
+export function SearchOverlay(props: SearchOverlayProps) {
+  const { productListRenderer, slotProps } = props
+  const open = useMotionValueValue(searchOverlayIsOpen, (v) => v)
+  const theme = useTheme()
+
+  return (
+    <Overlay
+      active={open}
+      onClosed={() => searchOverlayIsOpen.set(false)}
+      variantMd='top'
+      variantSm='bottom'
+      sizeMd='floating'
+      sizeSm='full'
+      justifyMd='center'
+      disableAnimation
+      disableDrag
+      widthMd={`min(${theme.breakpoints.values.lg}px, 100vw - ${theme.page.horizontal} * 2)`}
+      bgColor='paper'
+      className='SearchOverlay-root'
+      {...slotProps?.overlay}
+    >
+      <SearchOverlayProvider open={open}>
+        <SearchOverlayHeader {...slotProps?.header} />
+        <SearchOverlayBodyBase {...slotProps?.body}>
+          <SearchOverlaySuggestions {...slotProps?.suggestions} />
+          <SearchOverlayCategories {...slotProps?.categories} />
+          <SearchOverlayProducts
+            productListRenderer={productListRenderer}
+            {...slotProps?.products}
+          />
+        </SearchOverlayBodyBase>
+      </SearchOverlayProvider>
+    </Overlay>
+  )
+}

package/components/SearchOverlayBodyBase.tsx

@@ -0,0 +1,41 @@
+import { styled } from '@mui/material'
+import { useEffect, useState } from 'react'
+
+type StyledDivProps = {
+  keyboardOpen?: boolean
+}
+
+const StyledDiv = styled('div', {
+  name: 'SearchOverlayBodyBase',
+})<StyledDivProps>(({ theme, keyboardOpen }) => ({
+  padding: `0 ${theme.page.horizontal} ${theme.page.vertical}`,
+  '&:empty': { display: 'none' },
+  '.SearchOverlay-root.scrolled &': {
+    paddingTop: theme.appShell.headerHeightSm,
+  },
+  ...(keyboardOpen && {
+    paddingBottom: '40vh', // It would be preferable to use env(keyboard-inset-height, 0px) here, but it is not fully supported in iOS yet.
+  }),
+}))
+
+export function SearchOverlayBodyBase(props) {
+  const [keyboardOpen, setKeyboardOpen] = useState(false)
+
+  useEffect(() => {
+    const handleResize = () => {
+      const isKeyboardOpen =
+        (globalThis.visualViewport &&
+          globalThis.visualViewport?.height < globalThis.innerHeight * 0.8) ??
+        false
+      setKeyboardOpen(isKeyboardOpen)
+    }
+
+    globalThis.visualViewport?.addEventListener('resize', handleResize)
+
+    return () => {
+      globalThis.visualViewport?.removeEventListener('resize', handleResize)
+    }
+  }, [])
+
+  return <StyledDiv {...props} keyboardOpen={keyboardOpen} />
+}

package/components/SearchOverlayCategories.tsx

@@ -0,0 +1,97 @@
+import { useQuery } from '@graphcommerce/graphql'
+import { productListLink } from '@graphcommerce/magento-product'
+import { CategorySearchDocument } from '@graphcommerce/magento-search'
+import type { CategorySearchResultFragment } from '@graphcommerce/magento-search'
+import type { SectionContainerProps } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, NextLink, SectionContainer } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type {
+  BreadcrumbsProps,
+  LinkProps,
+  ListItemButtonProps,
+  TypographyProps,
+} from '@mui/material'
+import { Breadcrumbs, Typography } from '@mui/material'
+import { forwardRef } from 'react'
+import { SearchOverlayItem } from './SearchOverlayItem'
+import { useSearchOverlay } from './SearchOverlayProvider'
+
+type SearchOverlayCategoriesProps = {
+  slotProps?: {
+    link?: Omit<LinkProps, 'href'>
+    breadcrumbs?: BreadcrumbsProps
+    typography?: TypographyProps
+    sectionContainer?: SectionContainerProps
+  }
+}
+
+type SearchOverlayCategoryProps = {
+  category: CategorySearchResultFragment
+  slotProps?: {
+    listItemButton?: Omit<ListItemButtonProps<'a'>, 'href'>
+    breadcrumbs?: BreadcrumbsProps
+    typography?: TypographyProps
+  }
+}
+
+const SearchOverlayCategory = forwardRef<HTMLAnchorElement, SearchOverlayCategoryProps>(
+  (props, ref) => {
+    const { category, slotProps } = props
+
+    return (
+      <SearchOverlayItem
+        component={NextLink}
+        ref={ref}
+        href={productListLink({
+          filters: { category_uid: { eq: category.uid } },
+          sort: {},
+          url: category.url_path ?? '',
+        })}
+        {...slotProps?.listItemButton}
+      >
+        <Breadcrumbs {...slotProps?.breadcrumbs}>
+          {filterNonNullableKeys(category.breadcrumbs, ['category_name']).map((breadcrumb) => (
+            <Typography
+              color='text.primary'
+              key={breadcrumb.category_name}
+              {...slotProps?.typography}
+            >
+              {breadcrumb.category_name}
+            </Typography>
+          ))}
+          <Typography color='text.primary' {...slotProps?.typography}>
+            {category.name}
+          </Typography>
+        </Breadcrumbs>
+      </SearchOverlayItem>
+    )
+  },
+)
+
+SearchOverlayCategory.displayName = 'SearchOverlayCategory'
+
+export function SearchOverlayCategories(props: SearchOverlayCategoriesProps) {
+  const { params } = useSearchOverlay()
+  const { search } = params
+
+  const { slotProps = {} } = props
+  const { sectionContainer: sectionContainerProps = {} } = slotProps
+
+  const categories = useQuery(CategorySearchDocument, {
+    variables: { search, pageSize: 5 },
+    skip: !search || search.length < 3,
+  })
+  const categoryItems = filterNonNullableKeys(
+    categories.data?.categories?.items ?? categories.previousData?.categories?.items,
+  ).filter((c) => c.include_in_menu)
+
+  if (categories.error || categoryItems.length === 0 || !search) return null
+
+  return (
+    <SectionContainer labelLeft={<Trans>Categories</Trans>} {...sectionContainerProps}>
+      {categoryItems.map((category) => (
+        <SearchOverlayCategory key={category.uid} category={category} slotProps={slotProps} />
+      ))}
+    </SectionContainer>
+  )
+}

package/components/SearchOverlayFab.tsx

@@ -0,0 +1,21 @@
+import { iconSearch, IconSvg } from '@graphcommerce/next-ui'
+import { Fab } from '@mui/material'
+import { useEffect } from 'react'
+import { searchOverlayIsOpen } from './SearchOverlayProvider'
+
+export function SearchOverlayFab() {
+  useEffect(() => {
+    globalThis.document.body.querySelector<HTMLInputElement>('[name="search"]')?.focus()
+  }, [])
+
+  return (
+    <Fab
+      onClick={() => searchOverlayIsOpen.set(true)}
+      color='inherit'
+      size='medium'
+      sx={{ position: 'absolute', right: 0, top: 0 }}
+    >
+      <IconSvg src={iconSearch} size='large' />
+    </Fab>
+  )
+}

package/components/SearchOverlayHeader.tsx

@@ -0,0 +1,65 @@
+import { breakpointVal } from '@graphcommerce/next-ui'
+import { LayoutHeaderClose } from '@graphcommerce/next-ui/Layout/components/LayoutHeaderClose'
+import { Box, styled } from '@mui/material'
+import { useStickyHeaderOnScroll } from '../hooks/useStickyHeaderOnScroll'
+import { SearchInput } from './SearchOverlayInput'
+import { searchOverlayIsOpen, useSearchOverlay } from './SearchOverlayProvider'
+
+const SearchOverlayHeaderRoot = styled(Box, { name: 'SearchOverlayHeader', slot: 'Root' })(
+  ({ theme }) => ({
+    display: 'grid',
+    top: 0,
+    zIndex: theme.zIndex.appBar,
+    background: theme.palette.background.paper,
+    boxShadow: theme.shadows[1],
+    height: theme.appShell.headerHeightSm,
+    gap: theme.page.horizontal,
+    alignItems: 'center',
+    gridTemplateColumns: '1fr auto auto',
+    [theme.breakpoints.up('md')]: {
+      height: theme.appShell.appBarHeightMd,
+    },
+    '.SearchOverlay-root.scrolled &': { position: 'fixed', width: '100%' },
+  }),
+)
+
+type SearchOverlayHeaderProps = React.ComponentProps<typeof SearchOverlayHeaderRoot> & {
+  slotProps?: {
+    input?: Omit<React.ComponentProps<typeof SearchInput>, 'params'>
+    close?: React.ComponentProps<typeof LayoutHeaderClose>
+  }
+}
+
+export function SearchOverlayHeader(props: SearchOverlayHeaderProps) {
+  useStickyHeaderOnScroll()
+  const { params } = useSearchOverlay()
+  const { slotProps, ...rest } = props
+
+  return (
+    <SearchOverlayHeaderRoot {...rest}>
+      <SearchInput
+        inputSx={{ typography: 'h4', p: 0 }}
+        autoFocus
+        params={params}
+        size='medium'
+        {...slotProps?.input}
+        sx={[
+          (theme) => ({
+            width: '100%',
+            height: '100%',
+            typography: 'h4',
+            px: theme.page.horizontal,
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 3,
+              theme.shape.borderRadius * 4,
+              theme.breakpoints.values,
+            ),
+          }),
+          ...(Array.isArray(slotProps?.input?.sx) ? slotProps.input.sx : [slotProps?.input?.sx]),
+        ]}
+      />
+      <LayoutHeaderClose onClose={() => searchOverlayIsOpen.set(false)} {...slotProps?.close} />
+    </SearchOverlayHeaderRoot>
+  )
+}

package/components/SearchOverlayInput.tsx

@@ -0,0 +1,111 @@
+import { InputBaseElement } from '@graphcommerce/ecommerce-ui'
+import type { ProductListParams } from '@graphcommerce/magento-product'
+import { useProductFiltersPro } from '@graphcommerce/magento-product'
+import { useSearchResultRemaining } from '@graphcommerce/magento-search'
+import { FormAutoSubmit, useDebounce } from '@graphcommerce/react-hook-form'
+import { t } from '@lingui/macro'
+import type { BoxProps, InputBaseProps, SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
+import React from 'react'
+import { useRecentSearches } from '../hooks/useRecentSearches'
+import { useSearchInput } from './SearchOverlayProvider'
+
+function SearchInputShadow(
+  props: BoxProps<'div'> & { params: ProductListParams; inputSx?: SxProps<Theme> },
+) {
+  const { params, sx, inputSx, ...rest } = props
+  const { remaining, resultSearch, targetSearch } = useSearchResultRemaining(params)
+
+  return (
+    <Box
+      component='div'
+      sx={[
+        { display: 'flex', height: '100%', alignItems: 'center' },
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      {...rest}
+    >
+      {!resultSearch && !targetSearch ? (
+        <Box component='span'>{resultSearch}</Box>
+      ) : (
+        <>
+          <Box
+            component='span'
+            sx={[{ color: 'transparent' }, ...(Array.isArray(inputSx) ? inputSx : [inputSx])]}
+          >
+            {resultSearch}
+          </Box>
+          <Box
+            component='span'
+            sx={[
+              {
+                typography: 'h4',
+                color: 'transparent',
+                borderBottom: '2px solid',
+                borderImage: 'linear-gradient(108deg,#0894FF,#C959DD 34%,#FF2E54 68%,#FF9004)',
+                borderImageSlice: 1,
+              },
+              ...(Array.isArray(inputSx) ? inputSx : [inputSx]),
+            ]}
+          >
+            {remaining}
+          </Box>
+        </>
+      )}
+    </Box>
+  )
+}
+
+type SearchInputProps = Omit<InputBaseProps, 'name' | 'defaultValue' | 'ref'> & {
+  params: ProductListParams
+  inputSx?: SxProps<Theme>
+}
+
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  (props, rootRef) => {
+    const { params, sx, inputSx, inputRef, ...rest } = props
+    const { form, submit } = useProductFiltersPro()
+
+    const { getRootProps } = useSearchInput({ rootRef })
+    const { ref, selected, ...rootProps } = getRootProps()
+    const { updateRecentSearches } = useRecentSearches()
+
+    return (
+      <Box sx={{ display: 'grid', '& > *': { gridArea: '1 / 1' }, height: '100%' }}>
+        <InputBaseElement
+          control={form.control}
+          name='search'
+          color='primary'
+          size='medium'
+          fullWidth
+          autoFocus
+          placeholder={t`Search...`}
+          type='text'
+          spellCheck='false'
+          autoComplete='off'
+          sx={[
+            (theme) => ({
+              '& .MuiInputBase-input': { ...inputSx },
+              ...(selected && {
+                boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`,
+              }),
+            }),
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
+          {...rest}
+          {...rootProps}
+          inputRef={ref}
+          onKeyUp={useDebounce(() => {
+            updateRecentSearches(form.getValues('search') ?? '')
+          }, 1000)}
+        />
+        <SearchInputShadow params={params} sx={sx} inputSx={inputSx} />
+        <FormAutoSubmit control={form.control} name={['search']} submit={submit} leading />
+      </Box>
+    )
+  },
+)
+
+if (process.env.NODE_ENV !== 'production') {
+  SearchInput.displayName = 'SearchInput'
+}

package/components/SearchOverlayItem.tsx

@@ -0,0 +1,49 @@
+import type { ListItemButtonProps } from '@mui/material'
+import { alpha, ListItemButton } from '@mui/material'
+import type { ElementType } from 'react'
+import { forwardRef, memo } from 'react'
+import { useSearchItem } from './SearchOverlayProvider'
+
+export type SearchOverlayItemProps<C extends ElementType = 'li'> = ListItemButtonProps<
+  C,
+  { component?: C }
+>
+
+export const SearchOverlayItem = memo(
+  forwardRef(
+    <C extends ElementType = 'li'>(
+      props: React.PropsWithoutRef<SearchOverlayItemProps<C>>,
+      rootRef: React.Ref<C extends 'li' ? HTMLLIElement : HTMLAnchorElement>,
+    ) => {
+      const { sx, component, ...rest } = props
+
+      const { getRootProps } = useSearchItem({ rootRef })
+
+      return (
+        <ListItemButton
+          {...getRootProps()}
+          component={component}
+          sx={[
+            (theme) => ({
+              px: theme.page.horizontal,
+              mx: `calc(${theme.page.horizontal} * -1)`,
+              '&.Mui-selected': {
+                boxShadow: `inset 0 0 0 2px ${theme.palette.primary.main}`,
+                backgroundColor: alpha(
+                  theme.palette.background.paper,
+                  theme.palette.action.selectedOpacity,
+                ),
+              },
+            }),
+            ...(Array.isArray(sx) ? sx : [sx]),
+          ]}
+          {...rest}
+        />
+      )
+    },
+  ),
+) as <C extends ElementType = 'li'>(
+  props: SearchOverlayItemProps<C> & {
+    ref?: React.Ref<C extends 'li' ? HTMLLIElement : HTMLAnchorElement>
+  },
+) => JSX.Element

package/components/SearchOverlayLoader.tsx

@@ -0,0 +1,27 @@
+import { useMotionSelector } from '@graphcommerce/framer-utils'
+import { SearchFab } from '@graphcommerce/magento-search/components/SearchFab/SearchFab.interceptor'
+import { motionValue } from 'framer-motion'
+import dynamic from 'next/dynamic'
+import type { SearchOverlayProps } from './SearchOverlay'
+import { searchOverlayIsOpen } from './SearchOverlayProvider'
+
+export const searchOverlayLoading = motionValue(false)
+
+const loaded = motionValue(false)
+
+const SearchOverlayDynamic = dynamic(
+  async () => {
+    searchOverlayLoading.set(true)
+    const { SearchOverlay } = await import('./SearchOverlay')
+    searchOverlayLoading.set(false)
+    loaded.set(true)
+    return SearchOverlay
+  },
+  { ssr: false },
+)
+
+export function SearchOverlayLoader(props: SearchOverlayProps) {
+  const openOrLoaded = useMotionSelector([loaded, searchOverlayIsOpen], (v) => v[0] || v[1])
+  if (!openOrLoaded) return null
+  return <SearchOverlayDynamic {...props} />
+}

package/components/SearchOverlayProducts.tsx

@@ -0,0 +1,109 @@
+import type { ProductListItemRenderer } from '@graphcommerce/magento-product'
+import { ProductListItemsBase, productListLink } from '@graphcommerce/magento-product'
+import { SectionContainer } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import type { SxProps, Theme } from '@mui/material'
+import { Link } from '@mui/material'
+import { useRouter } from 'next/router'
+import type { ComponentProps } from 'react'
+import { useEffect, useMemo, useRef } from 'react'
+import type { Entries } from 'type-fest'
+import { searchOverlayIsOpen, useSearchItem, useSearchOverlay } from './SearchOverlayProvider'
+import { SearchPlaceholder } from './SearchPlaceholder'
+
+type SearchOverlayProductsProps = {
+  productListRenderer: ProductListItemRenderer
+}
+
+function withUseMenu<T extends keyof ProductListItemRenderer>(
+  renderer: ProductListItemRenderer[T],
+) {
+  return (props: ComponentProps<ProductListItemRenderer[T]>) => {
+    const rootRef = useRef<HTMLDivElement>(null)
+    const { getRootProps } = useSearchItem({ rootRef })
+
+    const Component = renderer as React.ComponentType<
+      ComponentProps<ProductListItemRenderer[keyof ProductListItemRenderer]>
+    >
+
+    const root = getRootProps()
+    const sx: SxProps<Theme> = [
+      root.selected &&
+        ((theme) => ({
+          outline: `2px solid ${theme.palette.primary.main}`,
+          outlineOffset: '7px',
+        })),
+    ]
+
+    return <Component {...props} slotProps={{ root: { ...root, sx } }} />
+  }
+}
+
+function useRendererWithMenu(productListRenderer: ProductListItemRenderer) {
+  return useMemo(() => {
+    const entries = Object.entries(productListRenderer) as Entries<typeof productListRenderer>
+    return Object.fromEntries(
+      entries.map(([key, renderer]) => [key, withUseMenu(renderer)]),
+    ) as typeof productListRenderer
+  }, [productListRenderer])
+}
+
+export function SearchOverlayProducts({ productListRenderer }: SearchOverlayProductsProps) {
+  const rendererWithMenu = useRendererWithMenu(productListRenderer)
+
+  const { params, products } = useSearchOverlay()
+
+  const term = params.search
+  const noResult = products?.total_count === 0
+
+  const { events } = useRouter()
+  const closeOverlay = () => searchOverlayIsOpen.set(false)
+
+  useEffect(() => {
+    events.on('routeChangeStart', closeOverlay)
+
+    return () => {
+      events.off('routeChangeStart', closeOverlay)
+    }
+  }, [events, products?.total_count])
+
+  return (
+    <>
+      {!params.search && <SearchPlaceholder />}
+      {noResult && (
+        <SectionContainer labelLeft={<Trans id='Products'>Products</Trans>}>
+          <Trans>We couldn’t find any results for ‘{term}’</Trans>
+        </SectionContainer>
+      )}
+
+      {params.search && products?.items && products.items.length > 0 && (
+        <SectionContainer
+          labelLeft={<Trans id='Products'>Products</Trans>}
+          labelRight={
+            <Link
+              color='secondary'
+              underline='hover'
+              href={productListLink({ ...params, pageSize: null })}
+              onClick={() => searchOverlayIsOpen.set(false)}
+            >
+              <Trans>View all</Trans> ({products.total_count})
+            </Link>
+          }
+          sx={(theme) => ({ pb: theme.spacing(2) })}
+        >
+          <ProductListItemsBase
+            renderers={rendererWithMenu}
+            loadingEager={6}
+            title={params.search ? `Search ${params.search}` : ''}
+            columns={(theme) => ({
+              xs: { count: 2 },
+              md: { count: 4, totalWidth: theme.breakpoints.values.md.toString() },
+              lg: { count: 4, totalWidth: theme.breakpoints.values.lg.toString() },
+            })}
+            items={products.items}
+          />
+        </SectionContainer>
+      )}
+    </>
+  )
+}

package/components/SearchOverlayProvider.tsx

@@ -0,0 +1,210 @@
+import type { ProductListParams, ProductListQuery } from '@graphcommerce/magento-product'
+import { ProductFiltersPro, toProductListParams } from '@graphcommerce/magento-product'
+import { useForkRef } from '@mui/material'
+import { motionValue } from 'framer-motion'
+import { useRouter } from 'next/router'
+import type { ReactNode } from 'react'
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react'
+import { useQuicksearch } from '../hooks/useQuicksearch'
+
+export const searchOverlayIsOpen = motionValue(false)
+
+type SearchOverlayContextType = {
+  params: ProductListParams
+  setParams: React.Dispatch<React.SetStateAction<ProductListParams>>
+  products: ProductListQuery['products']
+  setSelectedIndex: (index: number) => void
+}
+
+type SearchOverlaySelectionContextType = {
+  selectedIndex: number
+  items: React.RefObject<HTMLElement>[]
+  inputs: React.RefObject<HTMLElement>[]
+  registerItem: <T extends HTMLElement>(ref: React.RefObject<T>) => () => void
+  registerInput: <T extends HTMLElement>(ref: React.RefObject<T>) => () => void
+}
+
+const SearchOverlayContext = createContext<SearchOverlayContextType | undefined>(undefined)
+const SearchOverlaySelectionContext = createContext<SearchOverlaySelectionContextType | undefined>(
+  undefined,
+)
+
+export function useSearchOverlay() {
+  const context = useContext(SearchOverlayContext)
+  if (context === undefined) {
+    throw new Error('useSearchOverlay must be used within a SearchOverlayProvider')
+  }
+  return context
+}
+
+type SearchOverlayProviderProps = {
+  children: ReactNode
+  open: boolean
+}
+
+export function SearchOverlayProvider(props: SearchOverlayProviderProps) {
+  const { children, open, ...overlayProps } = props
+  const router = useRouter()
+  const [params, setParams] = useState<ProductListParams>({
+    filters: {},
+    sort: {},
+    url: 'search',
+    pageSize: 8,
+    currentPage: 1,
+    search: '',
+  })
+
+  const { handleSubmit, products } = useQuicksearch({ params })
+
+  const items = useRef<React.RefObject<HTMLElement>[]>([])
+  const inputs = useRef<React.RefObject<HTMLElement>[]>([])
+  const [selectedIndex, setSelectedIndex] = useState(-1)
+
+  const searchOverlayContext: SearchOverlayContextType = useMemo(
+    () => ({
+      params,
+      setParams,
+      products,
+      setSelectedIndex,
+    }),
+    [params, setParams, products, setSelectedIndex],
+  )
+
+  const searchOverlaySelectionContext: SearchOverlaySelectionContextType = useMemo(
+    () => ({
+      items: items.current,
+      inputs: inputs.current,
+      selectedIndex,
+      registerItem: <T extends HTMLElement>(ref: React.RefObject<T>) => {
+        if (ref.current instanceof HTMLElement) {
+          items.current.push(ref as React.RefObject<HTMLElement>)
+        }
+
+        return () => {
+          items.current = items.current.filter((i) => i !== ref)
+        }
+      },
+      registerInput: <T extends HTMLElement>(ref: React.RefObject<T>) => {
+        const controller = new AbortController()
+        if (ref.current instanceof HTMLElement) {
+          inputs.current.push(ref as React.RefObject<HTMLElement>)
+
+          ref.current.addEventListener(
+            'keydown',
+            (event) => {
+              if (event.key === 'ArrowDown') {
+                event.preventDefault()
+
+                const newIndex = ((prevIndex) => {
+                  if (prevIndex === items.current.length - 1) return -1
+                  return (prevIndex + 1) % items.current.length
+                })(selectedIndex)
+
+                setSelectedIndex(newIndex)
+
+                items.current[newIndex]?.current?.scrollIntoView({
+                  behavior: 'auto',
+                  block: 'center',
+                })
+              } else if (event.key === 'ArrowUp') {
+                event.preventDefault()
+
+                const newIndex = ((prevIndex) => {
+                  if (prevIndex === -1) return items.current.length - 1
+                  return (prevIndex - 1) % items.current.length
+                })(selectedIndex)
+
+                setSelectedIndex(newIndex)
+
+                items.current[newIndex]?.current?.scrollIntoView({
+                  behavior: 'auto',
+                  block: 'center',
+                })
+              } else if (event.key === 'Enter') {
+                const element = items.current[selectedIndex]?.current
+                element?.click()
+
+                if (!element && params.search) {
+                  // eslint-disable-next-line @typescript-eslint/no-floating-promises
+                  router.push(`/search/${params.search}`)
+                }
+              } else {
+                setSelectedIndex(-1)
+              }
+            },
+            { signal: controller.signal },
+          )
+        }
+        return () => {
+          inputs.current = inputs.current.filter((i) => i !== ref)
+          controller.abort()
+        }
+      },
+    }),
+    [params, router, selectedIndex],
+  )
+
+  return (
+    <SearchOverlayContext.Provider value={searchOverlayContext}>
+      <SearchOverlaySelectionContext.Provider value={searchOverlaySelectionContext}>
+        <ProductFiltersPro
+          params={params}
+          filterTypes={{}}
+          autoSubmitMd
+          handleSubmit={(formValues) =>
+            // eslint-disable-next-line @typescript-eslint/require-await
+            handleSubmit(formValues, async () => {
+              setParams(toProductListParams(formValues))
+            })
+          }
+        >
+          {children}
+        </ProductFiltersPro>
+      </SearchOverlaySelectionContext.Provider>
+    </SearchOverlayContext.Provider>
+  )
+}
+
+export function useSearchOverlaySelection() {
+  const context = useContext(SearchOverlaySelectionContext)
+  if (context === undefined) {
+    throw new Error(
+      'useSearchOverlaySelection must be used within a SearchOverlaySelectionContext.Provider',
+    )
+  }
+  return context
+}
+
+export function useSearchItem({ rootRef }: { rootRef?: React.Ref<Element> }) {
+  const searchOverlay = useSearchOverlaySelection()
+
+  const internalRef = useRef<HTMLElement>(null)
+  const forkedRef = useForkRef(rootRef, internalRef)
+  const register = searchOverlay.registerItem
+  useEffect(() => register(internalRef), [register, rootRef])
+
+  return {
+    getRootProps: () => ({
+      ref: forkedRef,
+      selected:
+        searchOverlay.selectedIndex > -1 &&
+        searchOverlay.selectedIndex === searchOverlay.items.indexOf(internalRef),
+    }),
+  }
+}
+
+export function useSearchInput({ rootRef }: { rootRef?: React.Ref<Element> }) {
+  const searchOverlay = useSearchOverlaySelection()
+
+  const internalRef = useRef<HTMLElement>(null)
+  const forkedRef = useForkRef(rootRef, internalRef)
+  const register = searchOverlay.registerInput
+  useEffect(() => register(internalRef), [register, rootRef])
+
+  return {
+    getRootProps: () => ({
+      selected: searchOverlay.selectedIndex === -1,
+      ref: forkedRef,
+    }),
+  }
+}

package/components/SearchOverlayRecent.tsx

@@ -0,0 +1,16 @@
+import { SectionContainer } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box } from '@mui/material'
+import { SearchOverlaySuggestion } from './SearchOverlaySuggestions'
+
+export function SearchOverlayRecent({ recentSearches }: { recentSearches: string[] }) {
+  return (
+    <Box>
+      <SectionContainer labelLeft={<Trans id='Continue searching' />}>
+        {recentSearches.map((suggestion) => (
+          <SearchOverlaySuggestion key={suggestion} search={suggestion} />
+        ))}
+      </SectionContainer>
+    </Box>
+  )
+}

package/components/SearchOverlaySuggestions.tsx

@@ -0,0 +1,66 @@
+import type { ProductListSearchSuggestionFragment } from '@graphcommerce/magento-product'
+import { useProductFiltersPro } from '@graphcommerce/magento-product'
+import type { SectionContainerProps } from '@graphcommerce/next-ui'
+import { filterNonNullableKeys, SectionContainer } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/macro'
+import { forwardRef } from 'react'
+import { useRecentSearches } from '../hooks/useRecentSearches'
+import { SearchOverlayItem } from './SearchOverlayItem'
+import { useSearchOverlay } from './SearchOverlayProvider'
+
+type SearchOverlaySuggestionProps = ProductListSearchSuggestionFragment &
+  React.ComponentPropsWithoutRef<typeof SearchOverlayItem>
+
+export const SearchOverlaySuggestion = forwardRef<HTMLLIElement, SearchOverlaySuggestionProps>(
+  (props, ref) => {
+    const { search, ...rest } = props
+    const { form } = useProductFiltersPro()
+    const { updateRecentSearches } = useRecentSearches()
+    const { setSelectedIndex } = useSearchOverlay()
+
+    return (
+      <SearchOverlayItem
+        ref={ref}
+        onClick={() => {
+          form.setValue('search', search)
+          updateRecentSearches(search)
+          setSelectedIndex(-1)
+        }}
+        {...rest}
+      >
+        {search}
+      </SearchOverlayItem>
+    )
+  },
+)
+
+SearchOverlaySuggestion.displayName = 'SearchOverlaySuggestion'
+
+type SearchOverlaySuggestionsProps = {
+  slotProps?: {
+    section?: SectionContainerProps
+    suggestion?: Omit<
+      React.ComponentProps<typeof SearchOverlaySuggestion>,
+      keyof ProductListSearchSuggestionFragment
+    >
+  }
+}
+
+export function SearchOverlaySuggestions(props: SearchOverlaySuggestionsProps) {
+  const { products } = useSearchOverlay()
+  const { slotProps } = props
+
+  if (!products?.suggestions || products.suggestions.length === 0) return null
+
+  return (
+    <SectionContainer labelLeft={<Trans>Did you mean?</Trans>} {...slotProps?.section}>
+      {filterNonNullableKeys(products.suggestions).map((suggestion) => (
+        <SearchOverlaySuggestion
+          key={suggestion.search}
+          {...suggestion}
+          {...slotProps?.suggestion}
+        />
+      ))}
+    </SectionContainer>
+  )
+}

package/components/SearchPlaceholder.tsx

@@ -0,0 +1,24 @@
+import { FullPageMessage, iconSearch, IconSvg } from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { useRecentSearches } from '../hooks/useRecentSearches'
+import { SearchOverlayRecent } from './SearchOverlayRecent'
+
+export function SearchPlaceholder() {
+  const { recentSearches } = useRecentSearches()
+
+  return (
+    <>
+      {recentSearches.length > 0 ? (
+        <SearchOverlayRecent recentSearches={recentSearches} />
+      ) : (
+        <FullPageMessage
+          title={<Trans id='What are you looking for?' />}
+          icon={<IconSvg src={iconSearch} size='xl' />}
+          disableMargin
+        >
+          <Trans id='Discover our collection by searching for products, categories or features.' />
+        </FullPageMessage>
+      )}
+    </>
+  )
+}

package/hooks/useOpenWithShortKey.ts

@@ -0,0 +1,27 @@
+import { useEffect } from 'react'
+import { searchOverlayIsOpen } from '../components/SearchOverlayProvider'
+
+export function useOpenWithShortKey() {
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      const { activeElement } = globalThis.document
+      const isInputFocused =
+        activeElement instanceof HTMLInputElement ||
+        activeElement instanceof HTMLTextAreaElement ||
+        activeElement?.hasAttribute('contenteditable')
+
+      if (e.code === 'Slash' && !isInputFocused) {
+        e.preventDefault()
+        searchOverlayIsOpen.set(true)
+      }
+
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault()
+        searchOverlayIsOpen.set(!searchOverlayIsOpen.get())
+      }
+    }
+
+    globalThis.document.addEventListener('keydown', handleKeyPress)
+    return () => globalThis.document.removeEventListener('keydown', handleKeyPress)
+  }, [])
+}

package/hooks/useQuicksearch.ts

@@ -0,0 +1,55 @@
+import { usePrivateQuery, useQuery } from '@graphcommerce/graphql'
+import type {
+  FilterFormProviderProps,
+  ProductFiltersQuery,
+  ProductListParams,
+  ProductListQuery,
+} from '@graphcommerce/magento-product'
+import {
+  prefetchProductList,
+  ProductListDocument,
+  toProductListParams,
+} from '@graphcommerce/magento-product'
+import {
+  productListApplySearchDefaults,
+  searchDefaultsToProductListFilters,
+  useProductListApplySearchDefaults,
+} from '@graphcommerce/magento-search'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
+import { useEventCallback } from '@mui/material'
+
+/**
+ * - Handles shallow routing requests
+ * - Handles customer specific product list queries
+ * - Creates a prefetch function to preload the product list
+ */
+export function useQuicksearch<
+  T extends ProductListQuery & ProductFiltersQuery & { params?: ProductListParams },
+>(props: T) {
+  const { params } = props
+  const variables = useProductListApplySearchDefaults(params)
+  const result = usePrivateQuery(
+    ProductListDocument,
+    { variables: { ...variables, quickSearch: true }, skip: false || !params?.search },
+    props,
+  )
+
+  const storeConfig = useQuery(StoreConfigDocument).data
+
+  const handleSubmit: NonNullable<FilterFormProviderProps['handleSubmit']> = useEventCallback(
+    async (formValues, next) => {
+      if (!storeConfig) return
+
+      const vars = productListApplySearchDefaults(toProductListParams(formValues), storeConfig)
+      await prefetchProductList(
+        { ...vars, quickSearch: true },
+        searchDefaultsToProductListFilters(vars),
+        next,
+        result.client,
+        true,
+      )
+    },
+  )
+
+  return { ...props, ...result.data, params, mask: result.mask, handleSubmit }
+}

package/hooks/useRecentSearches.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react'
+
+export function useRecentSearches() {
+  const [recentSearches, setRecentSearches] = useState<string[]>([])
+
+  useEffect(() => {
+    const storedSearches: string[] = JSON.parse(localStorage.getItem('recentSearches') || '[]')
+    setRecentSearches(storedSearches)
+  }, [])
+
+  return {
+    recentSearches,
+    updateRecentSearches: (searchTerm: string) => {
+      if (searchTerm?.length <= 3) {
+        return
+      }
+      const formattedSearchTerm = searchTerm.charAt(0).toUpperCase() + searchTerm.slice(1)
+      const updatedSearches = new Set([formattedSearchTerm, ...recentSearches].slice(0, 5))
+      const newSearches = Array.from(updatedSearches)
+      localStorage.setItem('recentSearches', JSON.stringify(newSearches))
+      setRecentSearches(newSearches)
+    },
+  }
+}

package/hooks/useStickyHeaderOnScroll.ts

@@ -0,0 +1,28 @@
+import { useScrollY } from '@graphcommerce/next-ui'
+import { useTheme } from '@mui/material'
+import { useMotionValueEvent } from 'framer-motion'
+import { useEffect, useState } from 'react'
+
+export function useStickyHeaderOnScroll() {
+  const scrollY = useScrollY()
+  const [scrolled, setScrolled] = useState(false)
+  const theme = useTheme()
+  const fixedThreshold = parseInt(theme.appShell.headerHeightSm, 10) / 2
+
+  useMotionValueEvent(scrollY, 'change', (latest) => {
+    if (latest >= fixedThreshold && !scrolled) {
+      setScrolled(true)
+    }
+    if (latest < fixedThreshold && scrolled) {
+      setScrolled(false)
+    }
+  })
+
+  useEffect(() => {
+    if (scrolled) {
+      globalThis.document.body.querySelector('.SearchOverlay-root')?.classList.add('scrolled')
+    } else {
+      globalThis.document.body.querySelector('.SearchOverlay-root')?.classList.remove('scrolled')
+    }
+  })
+}

package/index.ts

@@ -0,0 +1 @@
+export {}

package/next-env.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+/// <reference types="@graphcommerce/next-ui/types" />

package/package.json

@@ -0,0 +1,36 @@
+{
+  "name": "@graphcommerce/magento-search-overlay",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "9.0.0-canary.117",
+  "sideEffects": false,
+  "prettier": "@graphcommerce/prettier-config-pwa",
+  "eslintConfig": {
+    "extends": "@graphcommerce/eslint-config-pwa",
+    "parserOptions": {
+      "project": "./tsconfig.json"
+    }
+  },
+  "peerDependencies": {
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.117",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.117",
+    "@graphcommerce/framer-utils": "^9.0.0-canary.117",
+    "@graphcommerce/graphql": "^9.0.0-canary.117",
+    "@graphcommerce/image": "^9.0.0-canary.117",
+    "@graphcommerce/magento-product": "^9.0.0-canary.117",
+    "@graphcommerce/magento-search": "^9.0.0-canary.117",
+    "@graphcommerce/magento-store": "^9.0.0-canary.117",
+    "@graphcommerce/next-ui": "^9.0.0-canary.117",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.117",
+    "@graphcommerce/react-hook-form": "^9.0.0-canary.117",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.117",
+    "@lingui/core": "^4.2.1",
+    "@lingui/macro": "^4.2.1",
+    "@lingui/react": "^4.2.1",
+    "@mui/material": "^5.10.16",
+    "framer-motion": "*",
+    "next": "*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/plugins/SearchOverlayFabPlugin.tsx

@@ -0,0 +1,18 @@
+import { useMotionValueValue } from '@graphcommerce/framer-utils'
+import type { SearchFabProps } from '@graphcommerce/magento-search'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { searchOverlayLoading } from '../components/SearchOverlayLoader'
+import { searchOverlayIsOpen } from '../components/SearchOverlayProvider'
+import { useOpenWithShortKey } from '../hooks/useOpenWithShortKey'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-search',
+}
+
+export function SearchFab(props: PluginProps<SearchFabProps>) {
+  const { Prev, ...rest } = props
+  const loading = useMotionValueValue(searchOverlayLoading, (v) => v)
+  useOpenWithShortKey()
+  return <Prev {...rest} loading={loading} onClick={() => searchOverlayIsOpen.set(true)} />
+}

package/plugins/SearchOverlayFieldPlugin.tsx

@@ -0,0 +1,32 @@
+import type { SearchFieldProps } from '@graphcommerce/magento-search'
+import { SearchFab as SearchFabBase } from '@graphcommerce/magento-search'
+import type { PluginConfig, PluginProps } from '@graphcommerce/next-config'
+import { useRouter } from 'next/router'
+import type { SearchOverlayProps } from '../components/SearchOverlay'
+import { SearchOverlayLoader } from '../components/SearchOverlayLoader'
+
+export const config: PluginConfig = {
+  type: 'component',
+  module: '@graphcommerce/magento-search',
+}
+
+export function SearchField(
+  props: PluginProps<Omit<SearchFieldProps, 'searchField'>> & { searchField?: SearchOverlayProps },
+) {
+  const { Prev, searchField, ...rest } = props
+  const isSearchPage = useRouter().asPath.startsWith('/search')
+
+  if (isSearchPage) return <Prev {...rest} />
+  if (!searchField) {
+    throw new Error(
+      '<SearchField searchField={{ productListRenderer }}/> required when rendering the SearchOverlay',
+    )
+  }
+
+  return (
+    <>
+      <SearchFabBase size='large' slotProps={{ icon: { size: 'large' } }} {...rest.fab} />
+      <SearchOverlayLoader {...searchField} />
+    </>
+  )
+}

package/tsconfig.json

@@ -0,0 +1,5 @@
+{
+  "exclude": ["**/node_modules", "**/.*/"],
+  "include": ["**/*.ts", "**/*.tsx"],
+  "extends": "@graphcommerce/typescript-config-pwa/nextjs.json"
+}