@graphcommerce/magento-product 9.0.0-canary.99 → 9.0.0

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -1,13 +1,10 @@
 import { useWatch } from '@graphcommerce/ecommerce-ui'
-import {
-  CategoryTreeItem,
-  UseCategoryTreeProps,
-  useCategoryTree,
-} from '@graphcommerce/magento-category'
+import type { CategoryTreeItem, UseCategoryTreeProps } from '@graphcommerce/magento-category'
+import { useCategoryTree } from '@graphcommerce/magento-category'
+import type { ActionCardAccordionProps } from '@graphcommerce/next-ui'
 import {
   ActionCard,
   ActionCardAccordion,
-  ActionCardAccordionProps,
   ActionCardList,
   Button,
   IconSvg,
@@ -15,7 +12,8 @@ import {
   responsiveVal,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
 export type ProductFiltersProCategoryAccordionProps = {
@@ -29,7 +27,7 @@ export function ProductFiltersProCategoryAccordion(props: ProductFiltersProCateg
   const { hideTitle, sx, categoryTree, onChange, defaultExpanded } = props
   const { form } = useProductFiltersPro()
 
-  const name = `filters.category_uid.in` as const
+  const name = 'filters.category_uid.in'
   const currentFilter = useWatch({ control: form.control, name })
 
   return (

package/components/ProductFiltersPro/ProductFiltersProChips.tsx

@@ -1,11 +1,13 @@
+import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import {
   ProductFiltersProAggregations,
-  ProductFiltersProAggregationsProps,
   productFiltersProChipRenderer,
 } from './ProductFiltersProAggregations'
 
 /**
- * @deprecated Not used anymore, use `<ProductFiltersProAggregations renderer={productFiltersProChipRenderer}/>`
+ * @deprecated Not used anymore, use `<ProductFiltersProAggregations
+ *   renderer={productFiltersProChipRenderer}/>`
+ * @public
  */
 export function ProductFiltersProFilterChips(props: ProductFiltersProAggregationsProps) {
   const { renderer } = props

package/components/ProductFiltersPro/ProductFiltersProClearAll.tsx

@@ -1,7 +1,7 @@
 import { Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
-import { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
+import type { SxProps, Theme } from '@mui/material'
+import type { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
 import { useProductFilterProHasFiltersApplied } from './useProductFiltersProHasFiltersApplied'
 

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -1,6 +1,8 @@
 import { FormAutoSubmit } from '@graphcommerce/ecommerce-ui'
 import { extendableComponent, StickyBelowHeader } from '@graphcommerce/next-ui'
-import { Box, Container, Theme, useMediaQuery } from '@mui/material'
+import type { Theme } from '@mui/material'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
+import { Box, Container, useMediaQuery } from '@mui/material'
 import React from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
@@ -19,10 +21,14 @@ type OwnerProps = {
   headerPosition: 'before'
 }
 
-const name = 'ProductFiltersProLayoutSidebar' as const
+const name = 'ProductFiltersProLayoutSidebar'
 const parts = ['root', 'content'] as const
 const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 
+/**
+ * @deprecated
+ * @public
+ */
 export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSidebarProps) {
   const {
     items,

package/components/ProductFiltersPro/ProductFiltersProLimitChip.tsx

@@ -1,7 +1,9 @@
-import { ActionCardItemBase, ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemBase } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
-import { ActionCard, ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import { ActionCard, ChipOverlayOrPopper } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'

package/components/ProductFiltersPro/ProductFiltersProLimitSection.tsx

@@ -1,9 +1,10 @@
-import { ActionCardItemBase, ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
+import type { ActionCardItemBase } from '@graphcommerce/ecommerce-ui'
+import { ActionCardListForm, useWatch } from '@graphcommerce/ecommerce-ui'
 import { useQuery } from '@graphcommerce/graphql'
 import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 import { useMemo } from 'react'
 import { useProductFiltersPro } from './ProductFiltersPro'
 

package/components/ProductFiltersPro/ProductFiltersProNoResults.tsx

@@ -1,12 +1,13 @@
 import { extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/macro'
-import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Link, Typography } from '@mui/material'
 import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
 import { useProductFilterProHasFiltersApplied } from './useProductFiltersProHasFiltersApplied'
 
 export type ProductFitlersProNoResultProps = { search?: string | null; sx?: SxProps<Theme> }
 
-const name = 'ProductFiltersProNoResults' as const
+const name = 'ProductFiltersProNoResults'
 const parts = ['root'] as const
 const { classes } = extendableComponent(name, parts)
 
@@ -32,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/ProductFiltersPro/ProductFiltersProSortChip.tsx

@@ -1,8 +1,10 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
-import { ActionCard, ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import type { ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
+import { ActionCard, ChipOverlayOrPopper } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
+import type { UseProductFiltersProSortProps } from './useProductFiltersProSort'
+import { useProductFiltersProSort } from './useProductFiltersProSort'
 
 export type ProductListActionSortProps = UseProductFiltersProSortProps &
   Omit<

package/components/ProductFiltersPro/ProductFiltersProSortDirectionArrow.tsx

@@ -1,11 +1,13 @@
-import { SortEnum } from '@graphcommerce/graphql-mesh'
+import type { SortEnum } from '@graphcommerce/graphql-mesh'
 import { IconSvg, iconArrowDown, iconArrowUp } from '@graphcommerce/next-ui'
 
-type Props = {
+export type ProductFiltersProSortDirectionArrowProps = {
   sortDirection: SortEnum | null
 }
 
-export function ProductFiltersProSortDirectionArrow({ sortDirection }: Props) {
+export function ProductFiltersProSortDirectionArrow({
+  sortDirection,
+}: ProductFiltersProSortDirectionArrowProps) {
   return (
     <IconSvg
       src={sortDirection === 'ASC' || sortDirection === null ? iconArrowUp : iconArrowDown}

package/components/ProductFiltersPro/ProductFiltersProSortSection.tsx

@@ -1,9 +1,10 @@
 import { ActionCardListForm } from '@graphcommerce/ecommerce-ui'
 import { ActionCard, ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
 import { useProductFiltersPro } from './ProductFiltersPro'
-import { UseProductFiltersProSortProps, useProductFiltersProSort } from './useProductFiltersProSort'
+import type { UseProductFiltersProSortProps } from './useProductFiltersProSort'
+import { useProductFiltersProSort } from './useProductFiltersProSort'
 
 export type ProductFiltersProSortSectionProps = UseProductFiltersProSortProps & {
   sx?: SxProps<Theme>

package/components/ProductFiltersPro/activeAggregations.ts

@@ -1,6 +1,6 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
 
 export function excludeCategory(aggregations: ProductListFiltersFragment['aggregations']) {
   return filterNonNullableKeys(aggregations).filter(

package/components/ProductFiltersPro/applyAggregationCount.ts

@@ -1,6 +1,6 @@
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
-import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
 
 /**
  * Apply aggregation count to aggregation options:

package/components/ProductFiltersPro/useProductFiltersProClearAllAction.ts

@@ -1,5 +1,5 @@
 import { useCallback } from 'react'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
 
 export function useProductFiltersProClearAllAction() {

package/components/ProductFiltersPro/useProductFiltersProSort.tsx

@@ -4,9 +4,9 @@ import { StoreConfigDocument } from '@graphcommerce/magento-store'
 import { filterNonNullableKeys } from '@graphcommerce/next-ui'
 import { i18n } from '@lingui/core'
 import { useMemo } from 'react'
-import { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
-import { ProductFilterParams } from '../ProductListItems/filterTypes'
-import { ProductListSortFragment } from '../ProductListSort'
+import type { CategoryDefaultFragment } from '../ProductListItems/CategoryDefault.gql'
+import type { ProductFilterParams } from '../ProductListItems/filterTypes'
+import type { ProductListSortFragment } from '../ProductListSort'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import type { ProductListActionSortProps } from './ProductFiltersProSortChip'
 import { ProductFiltersProSortDirectionArrow } from './ProductFiltersProSortDirectionArrow'

package/components/ProductList/ProductList.graphql

@@ -4,8 +4,9 @@ query ProductList(
   $filters: ProductAttributeFilterInput = {}
   $sort: ProductAttributeSortInput = {}
   $search: String = ""
-  $context: InContextInput = { loggedIn: false }
+  $context: PrivateContext
   $onlyItems: Boolean = false
+  $quickSearch: Boolean = false
 ) {
   products(
     pageSize: $pageSize
@@ -13,10 +14,10 @@ query ProductList(
     filter: $filters
     sort: $sort
     search: $search
-  ) @inContext(context: $context) {
+  ) @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/ProductListCount/ProductListCount.tsx

@@ -1,7 +1,8 @@
 import { extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Divider, SxProps, Theme, Typography } from '@mui/material'
-import { ProductListCountFragment } from './ProductListCount.gql'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, Divider, Typography } from '@mui/material'
+import type { ProductListCountFragment } from './ProductListCount.gql'
 
 const { classes, selectors } = extendableComponent('ProductListCount', [
   'root',

package/components/ProductListFilters/FilterCheckboxType.tsx

@@ -1,11 +1,12 @@
 import { cloneDeep } from '@graphcommerce/graphql'
-import { iconCancelAlt, IconSvg } from '@graphcommerce/next-ui'
-import { Chip, ChipProps, SxProps, Theme } from '@mui/material'
+import { IconSvg, iconCancelAlt } from '@graphcommerce/next-ui'
+import type { ChipProps, SxProps, Theme } from '@mui/material'
+import { Chip } from '@mui/material'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import { ProductListLink } from '../ProductListLink/ProductListLink'
-import { FilterIn } from './FilterEqualType'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { FilterIn } from './FilterEqualType'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
 export type FilterCheckboxTypeProps = Filter &

package/components/ProductListFilters/FilterEqualType.tsx

@@ -1,9 +1,9 @@
 import { cloneDeep } from '@graphcommerce/graphql'
 import type { FilterEqualTypeInput } from '@graphcommerce/graphql-mesh'
-import { responsiveVal, extendableComponent, ChipMenu, ChipMenuProps } from '@graphcommerce/next-ui'
+import type { ChipMenuProps } from '@graphcommerce/next-ui'
+import { ChipMenu, extendableComponent, responsiveVal } from '@graphcommerce/next-ui'
 import {
-  Box,
-  // eslint-disable-next-line @typescript-eslint/no-restricted-imports
+  Box, // eslint-disable-next-line @typescript-eslint/no-restricted-imports
   Checkbox,
   ListItem,
   ListItemSecondaryAction,
@@ -14,13 +14,13 @@ import type { SetRequired } from 'type-fest'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
 import { ProductListLink } from '../ProductListLink/ProductListLink'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 type OwnerState = {
   isColor: boolean
   isActive: boolean
 }
-const componentName = 'FilterEqual' as const
+const componentName = 'FilterEqual'
 const parts = [
   'listItem',
   'listItemInnerContainer',
@@ -44,7 +44,7 @@ export type FilterIn = SetRequired<Omit<FilterEqualTypeInput, 'eq'>, 'in'>
 
 type Filter = NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
 
-type FilterEqualTypeProps = Filter & Omit<ChipMenuProps, 'selected'>
+export type FilterEqualTypeProps = Filter & Omit<ChipMenuProps, 'selected'>
 
 export function FilterEqualType(props: FilterEqualTypeProps) {
   const { attribute_code, count, label, options, __typename, ...chipProps } = props
@@ -155,7 +155,7 @@ export function FilterEqualType(props: FilterEqualTypeProps) {
                       },
                       [`& .${listItemTextClasses.secondary}`]: {
                         color: theme.palette.grey[500],
-                        marginLeft: `4px`,
+                        marginLeft: '4px',
                         fontSize: theme.typography.pxToRem(11),
                         display: 'inline',
                       },

package/components/ProductListFilters/FilterRangeType.tsx

@@ -1,16 +1,17 @@
 import { cloneDeep } from '@graphcommerce/graphql'
 import type { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
-import { ChipMenu, ChipMenuProps, extendableComponent } from '@graphcommerce/next-ui'
+import type { ChipMenuProps } from '@graphcommerce/next-ui'
+import { ChipMenu, extendableComponent } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 // eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider } from '@mui/material'
 import React, { useEffect } from 'react'
 import { useProductListLinkReplace } from '../../hooks/useProductListLinkReplace'
 import { useProductListParamsContext } from '../../hooks/useProductListParamsContext'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
-type FilterRangeTypeProps = NonNullable<
+export type FilterRangeTypeProps = NonNullable<
   NonNullable<ProductListFiltersFragment['aggregations']>[0]
 > &
   Omit<ChipMenuProps, 'selected'>

package/components/ProductListFilters/ProductFilters.graphql

@@ -1,11 +1,11 @@
 query ProductFilters(
   $filters: ProductAttributeFilterInput = {}
   $search: String
-  $context: InContextInput
+  $context: PrivateContext
   $pageSize: Int = 1
 ) {
   filters: products(filter: $filters, currentPage: 1, pageSize: $pageSize, search: $search)
-    @inContext(context: $context) {
+    @privateContext(context: $context) {
     page_info {
       total_pages
     }

package/components/ProductListFilters/ProductListFilters.tsx

@@ -1,9 +1,9 @@
-import { ChipMenuProps } from '@graphcommerce/next-ui'
-import { FilterTypes } from '../ProductListItems/getFilterTypes'
+import type { ChipMenuProps } from '@graphcommerce/next-ui'
+import type { FilterTypes } from '../ProductListItems/getFilterTypes'
 import { FilterCheckboxType } from './FilterCheckboxType'
 import { FilterEqualType } from './FilterEqualType'
 import { FilterRangeType } from './FilterRangeType'
-import { ProductListFiltersFragment } from './ProductListFilters.gql'
+import type { ProductListFiltersFragment } from './ProductListFilters.gql'
 
 export type ProductFiltersProps = ProductListFiltersFragment & {
   filterTypes: FilterTypes

package/components/ProductListFiltersContainer/ProductListFiltersContainer.tsx

@@ -1,12 +1,13 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import {
+  IconSvg,
+  extendableComponent,
   iconChevronLeft,
   iconChevronRight,
-  IconSvg,
   useScrollY,
-  extendableComponent,
 } from '@graphcommerce/next-ui'
-import { Box, styled, SxProps, Theme } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Box, styled } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import React, { useEffect, useRef, useState } from 'react'
 
@@ -17,7 +18,7 @@ export type ProductListFiltersContainerProps = { children: React.ReactNode; sx?:
 type OwnerState = {
   isSticky: boolean
 }
-const name = 'ProductListFiltersContainer' as const
+const name = 'ProductListFiltersContainer'
 const parts = [
   'wrapper',
   'container',

package/components/ProductListItem/ProductDiscountLabel.tsx

@@ -1,6 +1,7 @@
 import { PercentFormat } from '@graphcommerce/next-ui'
-import { Box, BoxProps } from '@mui/material'
-import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { BoxProps } from '@mui/material'
+import { Box } from '@mui/material'
+import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 
 export type ProductDiscountLabelProps = Pick<ProductListItemFragment, 'price_range'> &
   Omit<BoxProps, 'children'>
@@ -25,7 +26,7 @@ export function ProductDiscountLabel(props: ProductDiscountLabelProps) {
           }}
           {...boxProps}
         >
-          <PercentFormat>{discount / 100}</PercentFormat>
+          <PercentFormat maximumFractionDigits={0} value={discount / 100} />
         </Box>
       )}
     </>

package/components/ProductListItem/ProductListItem.tsx

@@ -1,27 +1,22 @@
-import { ImageProps } from '@graphcommerce/image'
+import type { ImageProps } from '@graphcommerce/image'
 import { extendableComponent } from '@graphcommerce/next-ui'
-import { SxProps, Theme, useEventCallback, Skeleton } from '@mui/material'
+import type { SxProps, Theme } from '@mui/material'
+import { Skeleton, useEventCallback } from '@mui/material'
 import React from 'react'
-import { ProductListItemFragment } from '../../Api/ProductListItem.gql'
+import type { ProductListItemFragment } from '../../Api/ProductListItem.gql'
 import { productLink } from '../../hooks/useProductLink'
 import { ProductListPrice } from '../ProductListPrice/ProductListPrice'
 import { ProductDiscountLabel } from './ProductDiscountLabel'
-import {
-  ProductListItemImageProps,
-  ProductListItemImage,
-  ProductListItemImageSkeleton,
-} from './ProductListItemImage'
-import {
+import type { ProductListItemImageProps } from './ProductListItemImage'
+import { ProductListItemImage, ProductListItemImageSkeleton } from './ProductListItemImage'
+import type {
   ProductListItemImageAreaKeys,
   ProductListsItemImageAreaProps,
-  ProductListItemImageAreas,
-  ProductImageContainer,
 } from './ProductListItemImageContainer'
-import { ProductListItemLinkOrDiv } from './ProductListItemLinkOrDiv'
-import {
-  ProductListItemTitleAndPrice,
-  ProductListItemTitleAndPriceProps,
-} from './ProductListItemTitleAndPrice'
+import { ProductImageContainer, ProductListItemImageAreas } from './ProductListItemImageContainer'
+import { ProductListItemLinkOrDiv, ProductListItemLinkOrDivProps } from './ProductListItemLinkOrDiv'
+import type { ProductListItemTitleAndPriceProps } from './ProductListItemTitleAndPrice'
+import { ProductListItemTitleAndPrice } from './ProductListItemTitleAndPrice'
 
 const { classes, selectors } = extendableComponent('ProductListItem', [
   'root',
@@ -45,25 +40,33 @@ type StyleProps = {
   imageOnly?: boolean
 }
 
-type BaseProps = {
+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
-type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
+export type SkeletonProps = BaseProps & { __typename: 'Skeleton' }
 
-type ProductProps = BaseProps & ProductListItemFragment
+export type ProductProps = BaseProps & ProductListItemFragment
 
 export type ProductListItemProps = ProductProps | SkeletonProps
 
+/** @public */
 export function ProductListItemReal(props: ProductProps) {
   const {
     subTitle,
@@ -83,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
@@ -105,6 +110,7 @@ export function ProductListItemReal(props: ProductProps) {
           loading={loading}
           sizes={sizes}
           dontReportWronglySizedImages={dontReportWronglySizedImages}
+          {...slotProps.image}
         />
 
         {!imageOnly && (
@@ -119,6 +125,7 @@ export function ProductListItemReal(props: ProductProps) {
                 {topLeft}
               </>
             }
+            {...slotProps.imageAreas}
           />
         )}
       </ProductImageContainer>
@@ -130,6 +137,7 @@ export function ProductListItemReal(props: ProductProps) {
             titleComponent={titleComponent}
             title={name}
             subTitle={subTitle}
+            {...slotProps.titleAndPrice}
           >
             <ProductListPrice {...price_range.minimum_price} />
           </ProductListItemTitleAndPrice>
@@ -140,13 +148,30 @@ 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 && (
@@ -156,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>
@@ -169,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} />