@graphcommerce/magento-product 9.0.0-canary.116 → 9.0.0-canary.117

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 9.0.0-canary.117
+
 ## 9.0.0-canary.116
 
 ### Patch Changes

package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx

@@ -33,8 +33,8 @@ export function ProductFiltersProNoResults(props: ProductFitlersProNoResultProps
     >
       {term ? (
         <>
-          <Typography variant='h5' align='center'>
-            <Trans>We couldn&apos;t find any results for {term}</Trans>
+          <Typography variant='h5'>
+            <Trans>We couldn’t find any results for ‘{term}’</Trans>
           </Typography>
           <p>
             {hasFilters ? (

package/components/ProductList/ProductList.graphql

@@ -6,6 +6,7 @@ query ProductList(
   $search: String = ""
   $context: PrivateContext
   $onlyItems: Boolean = false
+  $quickSearch: Boolean = false
 ) {
   products(
     pageSize: $pageSize
@@ -16,7 +17,7 @@ query ProductList(
   ) @privateContext(context: $context) {
     ...ProductListSuggestions @skip(if: $onlyItems)
     ...ProductListFilters @skip(if: $onlyItems)
-    ...ProductListCount @skip(if: $onlyItems)
+    ...ProductListCount @skip(if: $onlyItems) @include(if: $quickSearch)
     ...ProductListPagination @skip(if: $onlyItems)
     ...ProductListSort @skip(if: $onlyItems)
     ...ProductListItems

package/components/ProductListItem/ProductListItem.tsx

@@ -14,7 +14,7 @@ import type {
   ProductListsItemImageAreaProps,
 } from './ProductListItemImageContainer'
 import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
-import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
+import { ProductListItemLinkOrDiv, ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
 import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
 import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
 
@@ -44,15 +44,22 @@ export type BaseProps = {
   imageOnly?: boolean
   children?: React.ReactNode
   sx?: SxProps<Theme>
-  // eslint-disable-next-line react/no-unused-prop-types
-  onClick?: (event: React.MouseEvent<HTMLAnchorElement>, item: ProductListItemFragment) => void
+  onClick?: (
+    event: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>,
+    item: ProductListItemFragment,
+  ) => void
+  slotProps?: {
+    root?: Partial<ProductListItemLinkOrDivProps>
+    image?: Partial<ProductListItemImageProps>
+    imageAreas?: Partial<ProductListsItemImageAreaProps>
+    titleAndPrice?: Partial<ProductListItemTitleAndPriceProps>
+  }
 } & StyleProps &
   Omit<ProductListItemTitleAndPriceProps, 'title' | 'classes' | 'children'> &
   Omit<ProductListItemImageProps, 'classes'> &
   Omit<ProductListsItemImageAreaProps, 'classes'> &
   Pick<ImageProps, 'loading' | 'sizes' | 'dontReportWronglySizedImages'>
 
-// eslint-disable-next-line react/no-unused-prop-types
 export type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
 
 export type ProductProps = BaseProps & ProductListItemFragment
@@ -79,18 +86,20 @@ export function ProductListItemReal(props: ProductProps) {
     titleComponent = 'h2',
     sx = [],
     onClick,
+    slotProps = {},
   } = props
 
-  const handleClick = useEventCallback((e: React.MouseEvent<HTMLAnchorElement>) =>
-    onClick?.(e, props),
-  )
-
   return (
     <ProductListItemLinkOrDiv
       href={productLink(props)}
       className={classes.root}
-      sx={sx}
-      onClick={handleClick}
+      onClick={(e: React.MouseEvent<HTMLAnchorElement | HTMLDivElement>) => onClick?.(e, props)}
+      {...slotProps.root}
+      sx={[
+        ...(Array.isArray(sx) ? sx : [sx]),
+        ...(Array.isArray(slotProps.root?.sx) ? slotProps.root.sx : [slotProps.root?.sx]),
+      ]}
+      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
     >
       <ProductImageContainer className={classes.imageContainer}>
         <ProductListItemImage
@@ -101,6 +110,7 @@ export function ProductListItemReal(props: ProductProps) {
           loading={loading}
           sizes={sizes}
           dontReportWronglySizedImages={dontReportWronglySizedImages}
+          {...slotProps.image}
         />
 
         {!imageOnly && (
@@ -115,6 +125,7 @@ export function ProductListItemReal(props: ProductProps) {
                 {topLeft}
               </>
             }
+            {...slotProps.imageAreas}
           />
         )}
       </ProductImageContainer>
@@ -126,6 +137,7 @@ export function ProductListItemReal(props: ProductProps) {
             titleComponent={titleComponent}
             title={name}
             subTitle={subTitle}
+            {...slotProps.titleAndPrice}
           >
             <ProductListPrice {...price_range.minimum_price} />
           </ProductListItemTitleAndPrice>
@@ -138,12 +150,28 @@ export function ProductListItemReal(props: ProductProps) {
 
 /** @public */
 export function ProductListItemSkeleton(props: BaseProps) {
-  const { children, imageOnly = false, aspectRatio, titleComponent = 'h2', sx = [] } = props
+  const {
+    children,
+    imageOnly = false,
+    aspectRatio,
+    titleComponent = 'h2',
+    sx = [],
+    slotProps = {},
+  } = props
 
   return (
-    <ProductListItemLinkOrDiv sx={sx} className={classes.root}>
+    <ProductListItemLinkOrDiv
+      sx={sx}
+      className={classes.root}
+      {...slotProps.root}
+      ref={slotProps.root?.ref as React.Ref<HTMLAnchorElement | HTMLDivElement>}
+    >
       <ProductImageContainer className={classes.imageContainer}>
-        <ProductListItemImageSkeleton classes={classes} aspectRatio={aspectRatio} />
+        <ProductListItemImageSkeleton
+          classes={classes}
+          aspectRatio={aspectRatio}
+          {...slotProps.image}
+        />
       </ProductImageContainer>
 
       {!imageOnly && (
@@ -153,6 +181,7 @@ export function ProductListItemSkeleton(props: BaseProps) {
             titleComponent={titleComponent}
             title={<Skeleton variant='text' sx={{ width: '100px' }} />}
             subTitle={<Skeleton variant='text' sx={{ width: '20px' }} />}
+            {...slotProps.titleAndPrice}
           >
             <Skeleton variant='text' sx={{ width: '20px' }} />
           </ProductListItemTitleAndPrice>
@@ -166,6 +195,7 @@ export function ProductListItemSkeleton(props: BaseProps) {
 function isSkeleton(props: ProductListItemProps): props is SkeletonProps {
   return props.__typename === 'Skeleton'
 }
+
 export function ProductListItem(props: ProductListItemProps) {
   return isSkeleton(props) ? (
     <ProductListItemSkeleton {...props} />

package/components/ProductListItem/ProductListItemImage.tsx

@@ -26,7 +26,7 @@ function PlaceHolderContainer(props: BoxProps) {
 
 export type ProductListItemImageProps = {
   aspectRatio?: [number, number]
-  classes: {
+  classes?: {
     image?: string
     placeholder?: string
   }
@@ -35,7 +35,7 @@ export type ProductListItemImageProps = {
 export function ProductListItemImageSkeleton(props: ProductListItemImageProps) {
   const { aspectRatio = [4, 3], classes } = props
   return (
-    <PlaceHolderContainer className={`${classes.placeholder} ${classes.image}`}>
+    <PlaceHolderContainer className={`${classes?.placeholder} ${classes?.image}`}>
       <Skeleton
         animation='wave'
         sx={{
@@ -66,7 +66,7 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
         src={src}
         alt={alt ?? ''}
         {...image}
-        className={classes.image}
+        className={classes?.image}
         sx={[
           {
             objectFit: 'contain',
@@ -80,7 +80,7 @@ export function ProductListItemImage(props: ImageOrPlaceholderProps) {
   }
 
   return (
-    <PlaceHolderContainer className={`${classes.placeholder} ${classes.image}`}>
+    <PlaceHolderContainer className={`${classes?.placeholder} ${classes?.image}`}>
       <Box
         sx={[
           {

package/components/ProductListItem/ProductListItemLinkOrDiv.tsx

@@ -1,6 +1,7 @@
-import { NextLink, breakpointVal } from '@graphcommerce/next-ui'
+import { breakpointVal, NextLink } from '@graphcommerce/next-ui'
 import type { BoxProps, ButtonBaseProps, SxProps, Theme } from '@mui/material'
 import { Box, ButtonBase } from '@mui/material'
+import React from 'react'
 
 export type ProductListItemLinkProps = ButtonBaseProps<typeof NextLink>
 export type ProductListItemLinkOrDivProps = ProductListItemLinkProps | BoxProps
@@ -9,7 +10,10 @@ function isLink(props: ProductListItemLinkOrDivProps): props is ProductListItemL
   return 'href' in props
 }
 
-export function ProductListItemLinkOrDiv(props: ProductListItemLinkOrDivProps) {
+export const ProductListItemLinkOrDiv = React.forwardRef<
+  HTMLDivElement | HTMLAnchorElement,
+  ProductListItemLinkOrDivProps
+>((props, ref) => {
   const { sx = [] } = props
 
   const sxProps: SxProps<Theme> = [
@@ -28,8 +32,8 @@ export function ProductListItemLinkOrDiv(props: ProductListItemLinkOrDivProps) {
   ]
 
   return isLink(props) ? (
-    <ButtonBase component={NextLink} {...props} sx={sxProps} />
+    <ButtonBase ref={ref} component={NextLink} {...props} sx={sxProps} focusRipple />
   ) : (
-    <Box {...props} sx={sxProps} />
+    <Box ref={ref} component='div' {...props} sx={sxProps} />
   )
-}
+})

package/components/ProductListSuggestions/ProductListSearchSuggestion.graphql

@@ -0,0 +1,3 @@
+fragment ProductListSearchSuggestion on SearchSuggestion {
+  search
+}

package/components/ProductListSuggestions/ProductListSuggestions.graphql

@@ -1,5 +1,5 @@
 fragment ProductListSuggestions on Products {
   suggestions {
-    search
+    ...ProductListSearchSuggestion
   }
 }

package/components/index.ts

@@ -8,6 +8,10 @@ export * from './ProductListCount/ProductListCount'
 export * from './ProductListFilters'
 export * from './ProductListFiltersContainer/ProductListFiltersContainer'
 export * from './ProductListItem/ProductListItem'
+export * from './ProductListItem/ProductListItemImage'
+export * from './ProductListItem/ProductListItemTitleAndPrice'
+export * from './ProductListItem/ProductListItemImageContainer'
+export * from './ProductListItem/ProductListItemLinkOrDiv'
 export * from './ProductListItems/filteredProductList'
 export * from './ProductListItems/filterTypes'
 export * from './ProductListItems/getFilterTypes'
@@ -43,3 +47,4 @@ export * from './ProductWeight/ProductWeight'
 export * from './ProductListPrice'
 export * from './ProductListSuggestions/ProductListSuggestions'
 export * from './ProductListSuggestions/ProductListSuggestions.gql'
+export * from './ProductListSuggestions/ProductListSearchSuggestion.gql'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/magento-product",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.0.0-canary.116",
+  "version": "9.0.0-canary.117",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -18,18 +18,18 @@
     "typescript": "5.7.2"
   },
   "peerDependencies": {
-    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.116",
-    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.116",
-    "@graphcommerce/framer-next-pages": "^9.0.0-canary.116",
-    "@graphcommerce/framer-scroller": "^9.0.0-canary.116",
-    "@graphcommerce/graphql": "^9.0.0-canary.116",
-    "@graphcommerce/graphql-mesh": "^9.0.0-canary.116",
-    "@graphcommerce/image": "^9.0.0-canary.116",
-    "@graphcommerce/magento-cart": "^9.0.0-canary.116",
-    "@graphcommerce/magento-store": "^9.0.0-canary.116",
-    "@graphcommerce/next-ui": "^9.0.0-canary.116",
-    "@graphcommerce/prettier-config-pwa": "^9.0.0-canary.116",
-    "@graphcommerce/typescript-config-pwa": "^9.0.0-canary.116",
+    "@graphcommerce/ecommerce-ui": "^9.0.0-canary.117",
+    "@graphcommerce/eslint-config-pwa": "^9.0.0-canary.117",
+    "@graphcommerce/framer-next-pages": "^9.0.0-canary.117",
+    "@graphcommerce/framer-scroller": "^9.0.0-canary.117",
+    "@graphcommerce/graphql": "^9.0.0-canary.117",
+    "@graphcommerce/graphql-mesh": "^9.0.0-canary.117",
+    "@graphcommerce/image": "^9.0.0-canary.117",
+    "@graphcommerce/magento-cart": "^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/typescript-config-pwa": "^9.0.0-canary.117",
     "@lingui/core": "^4.2.1",
     "@lingui/macro": "^4.2.1",
     "@lingui/react": "^4.2.1",