@graphcommerce/magento-search 9.0.0-canary.98 → 9.0.0

package/components/CategorySearchResult/CategorySearchResult.tsx

@@ -1,14 +1,15 @@
-import { Highlight, iconChevronRight, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
-import { Button, SxProps, Theme } from '@mui/material'
+import { Highlight, IconSvg, extendableComponent, iconChevronRight } from '@graphcommerce/next-ui'
+import type { SxProps, Theme } from '@mui/material'
+import { Button } from '@mui/material'
 import React from 'react'
-import { CategorySearchResultFragment } from './CategorySearchResult.gql'
+import type { CategorySearchResultFragment } from './CategorySearchResult.gql'
 
 export type CategorySearchResultProps = Omit<CategorySearchResultFragment, 'uid'> & {
   search?: string
   sx?: SxProps<Theme>
 }
 
-const name = 'CategorySearchResult' as const
+const name = 'CategorySearchResult'
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 

package/components/CategorySearchResult/CategorySearchResults.tsx

@@ -1,10 +1,12 @@
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 
 export type CategorySearchResultsProps = {
   children: React.ReactNode
   sx?: SxProps<Theme>
 }
 
+/** @public */
 export function CategorySearchResults(props: CategorySearchResultsProps) {
   const { children, sx = [] } = props
   return <Box sx={sx}>{children}</Box>

package/components/NoSearchResults/NoSearchResults.tsx

@@ -1,13 +1,18 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Typography } from '@mui/material'
 
 export type NoSearchResultsProps = { sx?: SxProps<Theme> }
 
-const name = 'NoSearchResults' as const
+const name = 'NoSearchResults'
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
+/**
+ * @deprecated
+ * @public
+ */
 export function NoSearchResults(props: NoSearchResultsProps) {
   const { sx = [] } = props
 

package/components/ProductFiltersPro/ProductFiltersProCategorySectionSearch.tsx

@@ -1,11 +1,11 @@
 import type {
-  MenuQueryFragment,
   CategoryTreeItem,
+  MenuQueryFragment,
   NavigationItemFragment,
 } from '@graphcommerce/magento-category'
+import type { ProductFiltersProCategoryAccordionProps } from '@graphcommerce/magento-product'
 import {
   ProductFiltersProCategoryAccordion,
-  ProductFiltersProCategoryAccordionProps,
   useProductFiltersPro,
 } from '@graphcommerce/magento-product'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
@@ -79,7 +79,7 @@ function isParent<U extends TreeItem>(item: U, parent: U): boolean {
   return false
 }
 
-type ProductFiltersProCategorySectionSearchProps = Omit<
+export type ProductFiltersProCategorySectionSearchProps = Omit<
   ProductFiltersProCategoryAccordionProps,
   'categoryTree' | 'onChange'
 > & {
@@ -90,7 +90,7 @@ export function ProductFiltersProCategorySectionSearch(
   props: ProductFiltersProCategorySectionSearchProps,
 ) {
   const { menu } = props
-  const { form, submit, params, aggregations, appliedAggregations } = useProductFiltersPro()
+  const { form, submit, params, aggregations } = useProductFiltersPro()
   const currentFilter = params.filters.category_uid?.in
 
   const categoryTree = useMemo(() => {
@@ -148,9 +148,9 @@ export function ProductFiltersProCategorySectionSearch(
     })
       .slice(1)
       .filter((c) => c.visible)
-  }, [appliedAggregations, currentFilter, menu?.items])
+  }, [aggregations, currentFilter, menu?.items])
 
-  if (!categoryTree) return null
+  if (!categoryTree.length) return null
 
   return (
     <ProductFiltersProCategoryAccordion

package/components/ProductFiltersPro/ProductFiltersProSearchHeader.tsx

@@ -1,9 +1,10 @@
-import { ProductListParams, useProductFiltersPro } from '@graphcommerce/magento-product'
+import type { ProductListParams } from '@graphcommerce/magento-product'
+import { useProductFiltersPro } from '@graphcommerce/magento-product'
 import { useWatch } from '@graphcommerce/react-hook-form'
 import { Trans } from '@lingui/macro'
 import { Box } from '@mui/material'
 
-type ProductFiltersProSearchHeaderProps = {
+export type ProductFiltersProSearchHeaderProps = {
   params: ProductListParams
   /**
    * Provide a text when there is no term searched
@@ -11,8 +12,7 @@ type ProductFiltersProSearchHeaderProps = {
   children: React.ReactNode
 }
 
-export function ProductFiltersProSearchTerm(props: ProductFiltersProSearchHeaderProps) {
-  const { params, children } = props
+export function useSearchResultRemaining(params: ProductListParams) {
   const { form } = useProductFiltersPro()
   const resultSearch = params.search ?? ''
   const targetSearch = useWatch({ control: form.control, name: 'search' }) ?? ''
@@ -21,6 +21,17 @@ export function ProductFiltersProSearchTerm(props: ProductFiltersProSearchHeader
     ? targetSearch.slice(resultSearch.length)
     : ''
 
+  return {
+    resultSearch,
+    targetSearch,
+    remaining,
+  }
+}
+
+export function ProductFiltersProSearchTerm(props: ProductFiltersProSearchHeaderProps) {
+  const { params, children } = props
+
+  const { remaining, resultSearch, targetSearch } = useSearchResultRemaining(params)
   if (!resultSearch && !targetSearch) return children
 
   const search = (

package/components/ProductFiltersPro/ProductFiltersProSearchInput.tsx

@@ -1,17 +1,14 @@
 import { globalFormContextRef } from '@graphcommerce/magento-product'
 import { IconSvg, iconClose } from '@graphcommerce/next-ui'
 import { t } from '@lingui/macro'
-import {
+import type {
   ButtonBaseProps,
-  FormControl,
   FormControlProps,
-  IconButton,
   IconButtonProps,
   InputBaseProps,
-  OutlinedInput,
   OutlinedInputProps,
-  useForkRef,
 } from '@mui/material'
+import { FormControl, IconButton, OutlinedInput, useForkRef } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useEffect, useRef } from 'react'
 import { useSearchPageAndParam } from './useSearchPageAndParam'

package/components/ProductFiltersPro/{ProductFiltersProSearchField.tsx → SearchField.tsx}

@@ -1,20 +1,23 @@
-import { IconSvg, iconSearch, showPageLoadIndicator } from '@graphcommerce/next-ui'
-import { Fab, FabProps } from '@mui/material'
+import { iconSearch, IconSvg, showPageLoadIndicator } from '@graphcommerce/next-ui'
+import type { FabProps } from '@mui/material'
+import { Fab } from '@mui/material'
 import dynamic from 'next/dynamic'
 import { useMemo, useState } from 'react'
-import { ProductFiltersProSearchInputProps } from './ProductFiltersProSearchInput'
+import type { ProductFiltersProSearchInputProps } from './ProductFiltersProSearchInput'
 import { useSearchPageAndParam } from './useSearchPageAndParam'
 
-type ProductFiltersProSearchFieldProps = ProductFiltersProSearchInputProps & {
+export type SearchFieldProps = ProductFiltersProSearchInputProps & {
   fab?: FabProps
+  visible?: boolean
+  searchField?: Record<string, unknown>
 }
 
 const ProductFiltersProSearchInputLazy = dynamic(
   async () => (await import('./ProductFiltersProSearchInput')).ProductFiltersProSearchOutlinedInput,
 )
 
-export function ProductFiltersProSearchField(props: ProductFiltersProSearchFieldProps) {
-  const { fab, formControl } = props
+export function SearchField(props: SearchFieldProps) {
+  const { fab, formControl, visible: incomingVisible } = props
 
   const [searchPage] = useSearchPageAndParam()
   const [expanded, setExpanded] = useState(searchPage)
@@ -22,7 +25,7 @@ export function ProductFiltersProSearchField(props: ProductFiltersProSearchField
     if (!searchPage) setExpanded(searchPage)
   }, [searchPage])
 
-  const visible = expanded || searchPage
+  const visible = incomingVisible || expanded || searchPage
 
   return (
     <>

package/components/ProductFiltersPro/useSearchPageAndParam.ts

@@ -5,7 +5,7 @@ export function useSearchPageAndParam() {
   const router = useRouter()
 
   const path = router.asPath.startsWith('/c/') ? router.asPath.slice(3) : router.asPath.slice(1)
-  const [url, query] = extractUrlQuery({ url: path.split('#')[0].split('/') })
+  const [url] = extractUrlQuery({ url: path.split('#')[0].split('/') })
   const searchParam = url?.startsWith('search') ? decodeURI(url.split('/')[1] ?? '') : null
   const searchPage = router.asPath.startsWith('/search')
   return [searchPage, searchParam] as const

package/components/SearchButton/SearchButton.tsx

@@ -1,12 +1,13 @@
-import { iconSearch, responsiveVal, IconSvg, extendableComponent } from '@graphcommerce/next-ui'
+import { IconSvg, extendableComponent, iconSearch, responsiveVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
-import { TextField, TextFieldProps } from '@mui/material'
+import type { TextFieldProps } from '@mui/material'
+import { TextField } from '@mui/material'
 
 export type SearchButtonProps = TextFieldProps
 
 type OwnerState = { fullWidth?: boolean }
-const name = 'SearchButton' as const
+const name = 'SearchButton'
 const parts = ['root', 'inputRoot'] as const
 const { withState } = extendableComponent<OwnerState, typeof name, typeof parts>(name, parts)
 

package/components/SearchFab/SearchFab.tsx

@@ -0,0 +1,24 @@
+import type { FabProps } from '@graphcommerce/next-ui'
+import { Fab, iconSearch } from '@graphcommerce/next-ui'
+import { useRouter } from 'next/router'
+import type { SetOptional } from 'type-fest'
+
+export type SearchFabProps = SetOptional<FabProps, 'icon'>
+
+export function SearchFab(props: SearchFabProps) {
+  const { sx, ...fabProps } = props
+  const router = useRouter()
+  return (
+    <Fab
+      color='inherit'
+      size='medium'
+      sx={sx}
+      icon={iconSearch}
+      onClick={async () => {
+        await router.push('/search')
+        globalThis.document.body.querySelector<HTMLInputElement>('[name="search"]')?.focus()
+      }}
+      {...fabProps}
+    />
+  )
+}

package/components/SearchForm/SearchForm.tsx

@@ -1,7 +1,9 @@
-import { TextFieldElement, TextFieldElementProps } from '@graphcommerce/ecommerce-ui'
+import type { TextFieldElementProps } from '@graphcommerce/ecommerce-ui'
+import { TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { FormAutoSubmit, useForm } from '@graphcommerce/react-hook-form'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
 import { useEffect, useRef } from 'react'
 import { SearchFormAdornment } from './SearchFormAdornment'

package/components/SearchForm/SearchFormAdornment.tsx

@@ -1,5 +1,6 @@
-import { IconSvg, iconSearch, iconClose } from '@graphcommerce/next-ui'
-import { Control, FieldPath, FieldValues, useWatch } from '@graphcommerce/react-hook-form'
+import { IconSvg, iconClose, iconSearch } from '@graphcommerce/next-ui'
+import type { Control, FieldPath, FieldValues } from '@graphcommerce/react-hook-form'
+import { useWatch } from '@graphcommerce/react-hook-form'
 import { i18n } from '@lingui/core'
 import { IconButton } from '@mui/material'
 

package/components/SearchLink/SearchLink.tsx

@@ -1,14 +1,15 @@
 import {
-  iconSearch,
-  responsiveVal,
   IconSvg,
   extendableComponent,
+  iconSearch,
+  responsiveVal,
   useFabSize,
   useIconSvgSize,
 } from '@graphcommerce/next-ui'
-import { Breakpoint, Fab, FabProps, Link, LinkProps } from '@mui/material'
+import type { Breakpoint, FabProps, LinkProps } from '@mui/material'
+import { Fab, Link } from '@mui/material'
 import { useRouter } from 'next/router'
-import { KeyboardEventHandler, MouseEventHandler } from 'react'
+import type { KeyboardEventHandler, MouseEventHandler } from 'react'
 import type { SetRequired } from 'type-fest'
 
 export type SearchLinkProps = {
@@ -16,7 +17,7 @@ export type SearchLinkProps = {
   fab?: FabProps
 } & SetRequired<Pick<LinkProps<'a'>, 'href' | 'sx' | 'children' | 'onClick'>, 'href'>
 
-const name = 'SearchLink' as const
+const name = 'SearchLink'
 const parts = ['root', 'text', 'svg'] as const
 const { classes } = extendableComponent(name, parts)
 

package/hooks/useProductList.ts

@@ -1,12 +1,14 @@
-import { useInContextQuery, useQuery } from '@graphcommerce/graphql'
-import {
+import { usePrivateQuery, useQuery } from '@graphcommerce/graphql'
+import type {
   FilterFormProviderProps,
-  ProductFiltersDocument,
   ProductFiltersQuery,
-  ProductListDocument,
   ProductListParams,
   ProductListQuery,
+} from '@graphcommerce/magento-product'
+import {
   prefetchProductList,
+  ProductFiltersDocument,
+  ProductListDocument,
   toProductListParams,
   useRouterFilterParams,
 } from '@graphcommerce/magento-product'
@@ -24,15 +26,17 @@ import {
  * - Creates a prefetch function to preload the product list
  */
 export function useProductList<
-  T extends ProductListQuery &
-    ProductFiltersQuery & {
-      params?: ProductListParams
-    },
+  T extends ProductListQuery & ProductFiltersQuery & { params?: ProductListParams },
 >(props: T) {
   const { params, shallow } = useRouterFilterParams(props)
   const variables = useProductListApplySearchDefaults(params)
-  const result = useInContextQuery(ProductListDocument, { variables, skip: !shallow }, props)
-  const filters = useInContextQuery(
+  const result = usePrivateQuery(
+    ProductListDocument,
+    { variables: { ...variables }, skip: !shallow },
+    props,
+  )
+
+  const filters = usePrivateQuery(
     ProductFiltersDocument,
     { variables: searchDefaultsToProductListFilters(variables), skip: !shallow },
     props,

package/index.ts

@@ -1,12 +1,14 @@
 export * from './CategorySearch.gql'
 export * from './components/CategorySearchResult/CategorySearchResult'
 export * from './components/CategorySearchResult/CategorySearchResults'
+export * from './components/CategorySearchResult/CategorySearchResult.gql'
 export * from './components/NoSearchResults/NoSearchResults'
 export * from './components/SearchButton/SearchButton'
 export * from './components/SearchContext/SearchContext'
 export * from './components/SearchDivider/SearchDivider'
 export * from './components/SearchForm/SearchForm'
 export * from './components/SearchLink/SearchLink'
+export * from './components/SearchFab/SearchFab'
 export * from './hooks/useProductList'
 export * from './components/ProductFiltersPro/ProductFiltersProCategorySectionSearch'
 export * from './components/ProductFiltersPro/ProductFiltersProSearchHeader'
@@ -23,4 +25,4 @@ export {
 
 export * from '@graphcommerce/magento-product/components/ProductFiltersPro'
 export * from './utils/productListApplySearchDefaults'
-export * from './components/ProductFiltersPro/ProductFiltersProSearchField'
+export * from './components/ProductFiltersPro/SearchField'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-search",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.98",
+  "version": "9.0.0",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -12,20 +12,22 @@
     }
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.98",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/graphql": "^9.0.0-canary.98",
-    "@graphcommerce/image": "^9.0.0-canary.98",
-    "@graphcommerce/magento-product": "^9.0.0-canary.98",
-    "@graphcommerce/magento-store": "^9.0.0-canary.98",
-    "@graphcommerce/next-ui": "^9.0.0-canary.98",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.98",
-    "@graphcommerce/react-hook-form": "^9.0.0-canary.98",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.98",
+    "@graphcommerce/ecommerce-ui": "^9.0.0",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0",
+    "@graphcommerce/framer-utils": "^9.0.0",
+    "@graphcommerce/graphql": "^9.0.0",
+    "@graphcommerce/image": "^9.0.0",
+    "@graphcommerce/magento-product": "^9.0.0",
+    "@graphcommerce/magento-store": "^9.0.0",
+    "@graphcommerce/next-ui": "^9.0.0",
+    "@graphcommerce/prettier-config-pwa": "^9.0.0",
+    "@graphcommerce/react-hook-form": "^9.0.0",
+    "@graphcommerce/typescript-config-pwa": "^9.0.0",
     "@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/tsconfig.json

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

package/utils/productListApplySearchDefaults.ts

@@ -1,6 +1,11 @@
 import { cloneDeep, useQuery } from '@graphcommerce/graphql'
-import { ProductListParams, ProductListQueryVariables } from '@graphcommerce/magento-product'
-import { StoreConfigDocument, StoreConfigQuery } from '@graphcommerce/magento-store'
+import type {
+  ProductFiltersQueryVariables,
+  ProductListParams,
+  ProductListQueryVariables,
+} from '@graphcommerce/magento-product'
+import type { StoreConfigQuery } from '@graphcommerce/magento-store'
+import { StoreConfigDocument } from '@graphcommerce/magento-store'
 
 export function useProductListApplySearchDefaults(
   params: ProductListParams | undefined,
@@ -42,7 +47,7 @@ export function productListApplySearchDefaults(
 
 export function searchDefaultsToProductListFilters(
   variables: ProductListQueryVariables | undefined,
-): ProductListQueryVariables {
+): ProductFiltersQueryVariables {
   return {
     ...variables,
     filters: {},