@graphcommerce/magento-product 7.0.0-canary.21 → 7.0.0

package/CHANGELOG.md

@@ -1,6 +1,240 @@
 # Change Log
 
-## 7.0.0-canary.21
+## 7.0.0
+
+### Major Changes
+
+- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
+
+### Minor Changes
+
+- [#1978](https://github.com/graphcommerce-org/graphcommerce/pull/1978) [`0c91ac1f7`](https://github.com/graphcommerce-org/graphcommerce/commit/0c91ac1f70f58dec418e945fc4a6a8c6732cc21e) - When a user selects a variant, it will switch the values on the configurable page with the values of the configured variant. Enabling options here will allow switching of those variants. ([@carlocarels90](https://github.com/carlocarels90))
+
+- [#1961](https://github.com/graphcommerce-org/graphcommerce/pull/1961) [`4a759c662`](https://github.com/graphcommerce-org/graphcommerce/commit/4a759c66215eaa69edc342b898e05e8f92c3ba9a) - Add Open Graph meta tags to all pages ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#1956](https://github.com/graphcommerce-org/graphcommerce/pull/1956) [`9e87443a1`](https://github.com/graphcommerce-org/graphcommerce/commit/9e87443a1139a87f2ead3227fee3f4a76dd65841) - Allow children to be passed into ProductSpecs ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+### Patch Changes
+
+- [#1914](https://github.com/graphcommerce-org/graphcommerce/pull/1914) [`c237f2f2c`](https://github.com/graphcommerce-org/graphcommerce/commit/c237f2f2c87d9e3c8aefc536a13b5b9203556f27) - Category pages now have the ability to select the displayed pageSize of a page if the backend provides multiple options. A non-default pageSize and a non-default sort option will now receive noindex meta tags when viewed. ([@paales](https://github.com/paales))
+
+- [#1911](https://github.com/graphcommerce-org/graphcommerce/pull/1911) [`c10d6d5be`](https://github.com/graphcommerce-org/graphcommerce/commit/c10d6d5beb0d1560d33e3e301d88fa9201515133) - Translations were missing for the ProductSidebarDelivery ([@rustmaestro](https://github.com/rustmaestro))
+
+- [#1948](https://github.com/graphcommerce-org/graphcommerce/pull/1948) [`17390af4f`](https://github.com/graphcommerce-org/graphcommerce/commit/17390af4f9d4a73c11c857b92eeb05ae185da9da) - Allow the redirect prop of AddProductsToCartForm to be false, so redirects can be disabled ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2001](https://github.com/graphcommerce-org/graphcommerce/pull/2001) [`9cc5f8495`](https://github.com/graphcommerce-org/graphcommerce/commit/9cc5f8495d0970d457ac15eda4bb4e7cd3f8120a) - Migrate to productListLink, away from the ProductListLink component ([@paales](https://github.com/paales))
+
+- [#1973](https://github.com/graphcommerce-org/graphcommerce/pull/1973) [`257a66e38`](https://github.com/graphcommerce-org/graphcommerce/commit/257a66e388933a333941d9459e6e6a266d05cda4) - Limit would not be applied correctly for the product listing ([@JoshuaS98](https://github.com/JoshuaS98))
+
+- [#1919](https://github.com/graphcommerce-org/graphcommerce/pull/1919) [`201e75401`](https://github.com/graphcommerce-org/graphcommerce/commit/201e75401c99b7e7aeee06c7e5db737c19749298) - Fixed incorrect className for topRight ProductListItem location ([@bramvanderholst](https://github.com/bramvanderholst))
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`c4b102577`](https://github.com/graphcommerce-org/graphcommerce/commit/c4b1025774aad87c5e51f05c5b988d364f4bf20e) - ProductPageAddToCartRow wasn't aligned in the middle causing the price to be misaligned ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#1992](https://github.com/graphcommerce-org/graphcommerce/pull/1992) [`bffdff6f0`](https://github.com/graphcommerce-org/graphcommerce/commit/bffdff6f09d92e0d56ba904422b939ffeed12fae) - Export props from ProductPagePrice and ProductListPrice ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+- [#1914](https://github.com/graphcommerce-org/graphcommerce/pull/1914) [`b1abccb67`](https://github.com/graphcommerce-org/graphcommerce/commit/b1abccb677b83b090882ed1e0cf5336c52b175a4) - Category limit url param wasn't parsed correctly, causing a 404. ([@paales](https://github.com/paales))
+
+- [#1959](https://github.com/graphcommerce-org/graphcommerce/pull/1959) [`d0809b132`](https://github.com/graphcommerce-org/graphcommerce/commit/d0809b132a0e4cbdfeb86164f6c16a89ebecd987) - Added support for default values in the Config.graphqls files for the documentation ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.98
+
+## 6.2.0-canary.97
+
+## 6.2.0-canary.96
+
+## 6.2.0-canary.95
+
+## 6.2.0-canary.94
+
+## 6.2.0-canary.93
+
+## 6.2.0-canary.92
+
+## 6.2.0-canary.91
+
+## 6.2.0-canary.90
+
+## 6.2.0-canary.89
+
+## 6.2.0-canary.88
+
+## 6.2.0-canary.87
+
+## 6.2.0-canary.86
+
+## 6.2.0-canary.85
+
+## 6.2.0-canary.84
+
+## 6.2.0-canary.83
+
+## 6.2.0-canary.82
+
+## 6.2.0-canary.81
+
+### Patch Changes
+
+- [#2003](https://github.com/graphcommerce-org/graphcommerce/pull/2003) [`c4b102577`](https://github.com/graphcommerce-org/graphcommerce/commit/c4b1025774aad87c5e51f05c5b988d364f4bf20e) - ProductPageAddToCartRow wasn't aligned in the middle causing the price to be misaligned ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.80
+
+### Patch Changes
+
+- [#2001](https://github.com/graphcommerce-org/graphcommerce/pull/2001) [`9cc5f8495`](https://github.com/graphcommerce-org/graphcommerce/commit/9cc5f8495d0970d457ac15eda4bb4e7cd3f8120a) - Migrate to productListLink, away from the ProductListLink component ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.79
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+## 6.2.0-canary.74
+
+## 6.2.0-canary.73
+
+### Minor Changes
+
+- [#1978](https://github.com/graphcommerce-org/graphcommerce/pull/1978) [`0c91ac1f7`](https://github.com/graphcommerce-org/graphcommerce/commit/0c91ac1f70f58dec418e945fc4a6a8c6732cc21e) - When a user selects a variant, it will switch the values on the configurable page with the values of the configured variant. Enabling options here will allow switching of those variants. ([@carlocarels90](https://github.com/carlocarels90))
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+## 6.2.0-canary.65
+
+## 6.2.0-canary.64
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+### Patch Changes
+
+- [#1992](https://github.com/graphcommerce-org/graphcommerce/pull/1992) [`bffdff6f0`](https://github.com/graphcommerce-org/graphcommerce/commit/bffdff6f09d92e0d56ba904422b939ffeed12fae) - Export props from ProductPagePrice and ProductListPrice ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 6.2.0-canary.61
+
+### Patch Changes
+
+- [#1975](https://github.com/graphcommerce-org/graphcommerce/pull/1975) [`93efa6eea`](https://github.com/graphcommerce-org/graphcommerce/commit/93efa6eea16894a56e2964050e4ce84bf96e652f) - collapse limitsection filters ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+### Patch Changes
+
+- [#1973](https://github.com/graphcommerce-org/graphcommerce/pull/1973) [`257a66e38`](https://github.com/graphcommerce-org/graphcommerce/commit/257a66e388933a333941d9459e6e6a266d05cda4) - Fix limit filters ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+### Minor Changes
+
+- [`e55d8c390`](https://github.com/graphcommerce-org/graphcommerce/commit/e55d8c390d90b4bb7bab11c6a99027ac72bd7e3e) - Created a new sidebar layout system, can be configured with productFiltersLayout in the graphcommerce.config.js ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.49
+
+### Patch Changes
+
+- [#1959](https://github.com/graphcommerce-org/graphcommerce/pull/1959) [`d0809b132`](https://github.com/graphcommerce-org/graphcommerce/commit/d0809b132a0e4cbdfeb86164f6c16a89ebecd987) - Added support for default values in the Config.graphqls files for the documentation ([@JoshuaS98](https://github.com/JoshuaS98))
+
+## 6.2.0-canary.48
+
+### Minor Changes
+
+- [#1961](https://github.com/graphcommerce-org/graphcommerce/pull/1961) [`4a759c662`](https://github.com/graphcommerce-org/graphcommerce/commit/4a759c66215eaa69edc342b898e05e8f92c3ba9a) - Add Open Graph meta tags to all pages ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+### Minor Changes
+
+- [#1956](https://github.com/graphcommerce-org/graphcommerce/pull/1956) [`9e87443a1`](https://github.com/graphcommerce-org/graphcommerce/commit/9e87443a1139a87f2ead3227fee3f4a76dd65841) - Allow children to be passed into ProductSpecs ([@Giovanni-Schroevers](https://github.com/Giovanni-Schroevers))
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+### Patch Changes
+
+- [#1948](https://github.com/graphcommerce-org/graphcommerce/pull/1948) [`17390af4f`](https://github.com/graphcommerce-org/graphcommerce/commit/17390af4f9d4a73c11c857b92eeb05ae185da9da) - Allow the redirect prop of AddProductsToCartForm to be false, so redirects can be disabled ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
 
 ## 6.2.0-canary.20
 

package/Config.graphqls

@@ -1,3 +1,8 @@
+enum ProductFiltersLayout {
+  DEFAULT
+  SIDEBAR
+}
+
 extend input GraphCommerceConfig {
   """
   On older versions of GraphCommerce products would use a product type specific route.
@@ -9,11 +14,16 @@ extend input GraphCommerceConfig {
   legacyProductRoute: Boolean
   """
   Product filters with better UI for mobile and desktop.
-
-  @experimental This is an experimental feature and may change in the future.
   """
   productFiltersPro: Boolean
 
+  """
+  Layout how the filters are rendered.
+  DEFAULT: Will be rendered as horzontal chips on desktop and mobile
+  SIDEBAR: Will be rendered as a sidebar on desktop and horizontal chips on mobile
+  """
+  productFiltersLayout: ProductFiltersLayout = DEFAULT
+
   """
   By default we route products to /p/[url] but you can change this to /product/[url] if you wish.
 

package/components/AddProductsToCart/AddProductsToCart.graphql

@@ -4,6 +4,7 @@ mutation AddProductsToCart($cartId: String!, $cartItems: [CartItemInput!]!) {
       id
       __typename
       ...CartItemCountChanged
+      ...CartPageFragment
     }
     user_errors {
       code

package/components/AddProductsToCart/AddProductsToCartError.tsx

@@ -1,11 +1,10 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { FormHelperText } from '@mui/material'
-import { useFormAddProductsToCart } from './useFormAddProductsToCart'
+import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddProductsToCartErrorProps = {
   children?: React.ReactNode
-  index?: number
-}
+} & AddToCartItemSelector
 
 export function AddProductsToCartError(props: AddProductsToCartErrorProps) {
   const { children, index = 0 } = props

package/components/AddProductsToCart/AddProductsToCartForm.tsx

@@ -88,8 +88,7 @@ export function AddProductsToCartForm(props: AddProductsToCartFormProps) {
           })),
       }
 
-      const lastItem = requestData.cartItems[requestData.cartItems.length - 1]
-      const { sku } = lastItem
+      const sku = requestData.cartItems[requestData.cartItems.length - 1]?.sku
 
       if (sku && redirect === 'added') {
         // Preload crosssells

package/components/AddProductsToCart/AddProductsToCartQuantity.tsx

@@ -1,11 +1,12 @@
 import { NumberFieldElement, NumberFieldElementProps } from '@graphcommerce/ecommerce-ui'
 import { AddProductsToCartMutationVariables } from './AddProductsToCart.gql'
-import { useFormAddProductsToCart } from './useFormAddProductsToCart'
+import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
 
 type AddToCartQuantityProps = Omit<
   NumberFieldElementProps<AddProductsToCartMutationVariables>,
   'error' | 'required' | 'inputProps' | 'helperText' | 'name' | 'control' | 'name'
-> & { index?: number }
+> &
+  AddToCartItemSelector
 
 export function AddProductsToCartQuantity(props: AddToCartQuantityProps) {
   const { index = 0 } = props

package/components/AddProductsToCart/useAddProductsToCartAction.ts

@@ -1,10 +1,9 @@
 import { useFormState } from '@graphcommerce/ecommerce-ui'
 import { useEventCallback } from '@mui/material'
 import { UseAddProductsToCartActionFragment } from './UseAddProductsToCartAction.gql'
-import { useFormAddProductsToCart } from './useFormAddProductsToCart'
+import { AddToCartItemSelector, useFormAddProductsToCart } from './useFormAddProductsToCart'
 
-export type UseAddProductsToCartActionProps = {
-  index?: number
+export type UseAddProductsToCartActionProps = AddToCartItemSelector & {
   disabled?: boolean
   loading?: boolean
   onClick?: React.MouseEventHandler<HTMLButtonElement>

package/components/AddProductsToCart/useFormAddProductsToCart.ts

@@ -6,7 +6,7 @@ import {
   AddProductsToCartMutationVariables,
 } from './AddProductsToCart.gql'
 
-export type RedirectType = LiteralUnion<'added' | undefined, `/${string}`>
+export type RedirectType = LiteralUnion<'added' | undefined | false, `/${string}`>
 
 /** https://react-hook-form.com/api/useform/watch/ */
 export type AddProductsToCartContextType = { redirect: RedirectType } & Omit<
@@ -14,6 +14,8 @@ export type AddProductsToCartContextType = { redirect: RedirectType } & Omit<
   'formState' | 'watch'
 >
 
+export type AddToCartItemSelector = { index?: number }
+
 export const AddProductsToCartContext = createContext(
   undefined as AddProductsToCartContextType | undefined,
 )

package/components/JsonLdProduct/JsonLdProduct.graphql

@@ -1,4 +1,4 @@
-fragment JsonLdProduct on ProductInterface {
+fragment JsonLdProduct on ProductInterface @inject(into: ["ProductPageItem"]) @injectable {
   uid
   name
   sku

package/components/JsonLdProduct/ProductPageJsonLd.tsx

@@ -0,0 +1,12 @@
+import { JsonLd } from '@graphcommerce/next-ui'
+import { JsonLdProductFragment } from './JsonLdProduct.gql'
+
+type ProductPageJsonLdProps<T extends { '@type': string }> = {
+  product: JsonLdProductFragment
+  render: (product: JsonLdProductFragment) => T & { '@context': 'https://schema.org' }
+}
+
+export function ProductPageJsonLd<T extends { '@type': string }>(props: ProductPageJsonLdProps<T>) {
+  const { product, render } = props
+  return <JsonLd<T> item={render(product)} />
+}

package/components/JsonLdProduct/index.ts

@@ -0,0 +1,2 @@
+export * from './jsonLdProduct'
+export * from './ProductPageJsonLd'

package/components/ProductCustomizable/ProductCustomizable.tsx

@@ -1,7 +1,7 @@
 import { SelectElement, TextFieldElement } from '@graphcommerce/ecommerce-ui'
 import { filterNonNullableKeys, RenderType, TypeRenderer } from '@graphcommerce/next-ui'
 import React from 'react'
-import { useFormAddProductsToCart } from '../AddProductsToCart'
+import { AddToCartItemSelector, useFormAddProductsToCart } from '../AddProductsToCart'
 import { ProductCustomizableFragment } from './ProductCustomizable.gql'
 
 export type OptionTypeRenderer = TypeRenderer<
@@ -91,12 +91,11 @@ type OptionTypeRendererProp = Simplify<
     : MissingOptionTypeRenderer & DefinedOptionTypeRenderer
 >
 
-type ProductCustomizableProps = {
+type ProductCustomizableProps = AddToCartItemSelector & {
   product: ProductCustomizableFragment
-  index?: number
 } & (keyof MissingOptionTypeRenderer extends never
-  ? { renderer?: OptionTypeRendererProp }
-  : { renderer: OptionTypeRendererProp })
+    ? { renderer?: OptionTypeRendererProp }
+    : { renderer: OptionTypeRendererProp })
 
 export function ProductCustomizable(props: ProductCustomizableProps) {
   const { product, renderer, index = 0 } = props

package/components/ProductFiltersPro/PriceSlider.tsx

@@ -1,6 +1,7 @@
 import { FilterRangeTypeInput } from '@graphcommerce/graphql-mesh'
 import { Money } from '@graphcommerce/magento-store'
 import { extendableComponent, filterNonNullableKeys } from '@graphcommerce/next-ui'
+// eslint-disable-next-line @typescript-eslint/no-restricted-imports
 import { Box, Slider, SxProps, Theme, useEventCallback } from '@mui/material'
 import { useCallback } from 'react'
 import { FilterProps } from './ProductFiltersProAggregations'
@@ -21,7 +22,7 @@ export function getMinMaxFromOptions(options: PriceSliderProps['options']) {
   const min = totalRange[0][0]
   const max = totalRange[totalRange.length - 1][1]
 
-  return [min, max]
+  return [Math.floor(min), Math.ceil(max)] as [number, number]
 }
 
 export function PriceSlider(props: PriceSliderProps) {
@@ -37,7 +38,11 @@ export function PriceSlider(props: PriceSliderProps) {
   return (
     <Box
       sx={[
-        (theme) => ({ pt: theme.spacings.md, pb: theme.spacings.xs }),
+        (theme) => ({
+          pt: theme.spacings.md,
+          pb: theme.spacings.xs,
+          px: theme.spacings.xxs,
+        }),
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
       className={classes.container}

package/components/ProductFiltersPro/ProductFilterEqualChip.tsx

@@ -67,7 +67,7 @@ export function ProductFilterEqualChip(props: FilterProps) {
       onReset={
         canReset
           ? () => {
-              form.resetField(name, { defaultValue: null })
+              form.setValue(name, null)
               return submit()
             }
           : undefined

package/components/ProductFiltersPro/ProductFilterEqualSection.tsx

@@ -6,11 +6,11 @@ import {
   filterNonNullableKeys,
   IconSvg,
   iconCirle,
-  SectionHeader,
+  ActionCardAccordion,
   Button,
 } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Typography } from '@mui/material'
+import { Box } from '@mui/material'
 import { useMemo } from 'react'
 import { isFilterTypeEqual } from '../ProductListItems/filterTypes'
 import { useProductFiltersPro } from './ProductFiltersPro'
@@ -19,7 +19,8 @@ import { FilterProps } from './ProductFiltersProAggregations'
 export function ProductFilterEqualSection(props: FilterProps) {
   const { aggregation } = props
   const { attribute_code, label, options } = aggregation
-  const { form, submit, params } = useProductFiltersPro()
+
+  const { form, params } = useProductFiltersPro()
   const { control } = form
   const attrCode = attribute_code as keyof ProductAttributeFilterInput
 
@@ -36,11 +37,9 @@ export function ProductFilterEqualSection(props: FilterProps) {
         ...option,
         title: (
           <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
-            <Typography sx={{ marginRight: 1 }}>{option.label}</Typography>
+            <Box sx={{ marginRight: 1 }}>{option.label}</Box>
             {option.count !== null && (
-              <Typography variant='caption' color='text.disabled'>
-                ({option.count})
-              </Typography>
+              <Box sx={{ typography: 'caption', color: 'text.disabled' }}>({option.count})</Box>
             )}
           </Box>
         ),
@@ -56,35 +55,35 @@ export function ProductFilterEqualSection(props: FilterProps) {
   )
 
   return (
-    <Box sx={{ my: 2 }}>
-      <SectionHeader
-        labelLeft={label}
-        sx={{ mt: 0 }}
-        labelRight={
-          currentFilter && currentFilter.length > 0 ? (
-            <Button
-              variant='inline'
-              color='primary'
-              onClick={() => {
-                form.resetField(name, { defaultValue: null })
-              }}
-            >
-              <Trans id='Clear' />
-            </Button>
-          ) : undefined
-        }
-      />
-
-      <ActionCardListForm
-        render={ActionCard}
-        name={name}
-        control={control}
-        multiple
-        layout='list'
-        variant='default'
-        size='medium'
-        items={items}
-      />
-    </Box>
+    <ActionCardAccordion
+      summary={label}
+      details={
+        <ActionCardListForm
+          sx={{ mb: 2 }}
+          render={ActionCard}
+          name={name}
+          control={control}
+          multiple
+          layout='list'
+          variant='default'
+          size='medium'
+          items={items}
+          showMoreAfter={4}
+        />
+      }
+      right={
+        currentFilter && currentFilter.length > 0 ? (
+          <Button
+            color='primary'
+            onClick={(e) => {
+              e.stopPropagation()
+              form.setValue(name, null)
+            }}
+          >
+            <Trans id='Clear' />
+          </Button>
+        ) : undefined
+      }
+    />
   )
 }

package/components/ProductFiltersPro/ProductFilterRangeChip.tsx

@@ -42,7 +42,7 @@ export function ProductFilterRangeChip(props: FilterProps) {
             onReset={
               from !== min || to !== max
                 ? () => {
-                    form.resetField(name, { defaultValue: null })
+                    form.setValue(name, null)
                     return submit()
                   }
                 : undefined

package/components/ProductFiltersPro/ProductFilterRangeSection.tsx

@@ -1,10 +1,9 @@
 import { Controller } from '@graphcommerce/ecommerce-ui'
 import type { ProductAttributeFilterInput } from '@graphcommerce/graphql-mesh'
-import { SectionHeader } from '@graphcommerce/next-ui'
+import { ActionCardAccordion, Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { Box, Button } from '@mui/material'
 import { isFilterTypeRange } from '../ProductListItems/filterTypes'
-import { getMinMaxFromOptions, PriceSlider } from './PriceSlider'
+import { PriceSlider, getMinMaxFromOptions } from './PriceSlider'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { FilterProps } from './ProductFiltersProAggregations'
 
@@ -35,26 +34,23 @@ export function ProductFilterRangeSection(props: FilterProps) {
         const to = value?.to ? Number(value?.to) : max
 
         return (
-          <Box sx={{ my: 2 }}>
-            <SectionHeader
-              labelLeft={label}
-              sx={{ mt: 0 }}
-              labelRight={
-                from !== min || to !== max ? (
-                  <Button
-                    variant='inline'
-                    color='primary'
-                    onClick={() => {
-                      form.resetField(name, { defaultValue: null })
-                    }}
-                  >
-                    <Trans id='Clear' />
-                  </Button>
-                ) : undefined
-              }
-            />
-            <PriceSlider options={options} value={value} onChange={onChange} />
-          </Box>
+          <ActionCardAccordion
+            summary={label}
+            details={<PriceSlider options={options} value={value} onChange={onChange} />}
+            right={
+              from !== min || to !== max ? (
+                <Button
+                  color='primary'
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    form.setValue(name, null)
+                  }}
+                >
+                  <Trans id='Clear' />
+                </Button>
+              ) : undefined
+            }
+          />
         )
       }}
     />