@graphcommerce/magento-product 8.1.0-canary.9 → 9.0.0-canary.100

package/components/ProductFiltersPro/ProductFiltersPro.tsx

@@ -1,9 +1,25 @@
-import { useForm, UseFormProps, UseFormReturn } from '@graphcommerce/ecommerce-ui'
+import {
+  DeepPartial,
+  FormAutoSubmit,
+  useForm,
+  UseFormProps,
+  UseFormReturn,
+  WatchObserver,
+} from '@graphcommerce/ecommerce-ui'
 import { useMatchMediaMotionValue, useMemoObject } from '@graphcommerce/next-ui'
-import { useEventCallback, useTheme } from '@mui/material'
+import { Theme, useEventCallback, useMediaQuery, useTheme } from '@mui/material'
 import { m, useTransform } from 'framer-motion'
 import { useRouter } from 'next/router'
-import React, { BaseSyntheticEvent, createContext, useContext, useMemo, useRef } from 'react'
+import React, {
+  BaseSyntheticEvent,
+  createContext,
+  MutableRefObject,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+} from 'react'
+import type { Subscription } from 'react-hook-form/dist/utils/createSubject'
 import { productListLinkFromFilter } from '../../hooks/useProductListLink'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
 import {
@@ -17,23 +33,40 @@ type DataProps = {
   appliedAggregations?: ProductListFiltersFragment['aggregations']
 } & ProductListFiltersFragment
 
-type FilterFormContextProps = DataProps & {
+export type ProductFiltersProContext = DataProps & {
   /**
    * Watch and formState are known to cause performance issues.
    *
    * - `watch` -> `useWatch`
    * - `formState` -> `useFormState`
    */
-  form: Omit<UseFormReturn<ProductFilterParams>, 'formState' | 'watch'>
+  form: Omit<UseFormReturn<ProductFilterParams>, 'formState' | 'watch'> & {
+    watch: (
+      callback: WatchObserver<ProductFilterParams>,
+      defaultValues?: DeepPartial<ProductFilterParams>,
+    ) => Subscription
+  }
+  /**
+   * Parameters of the currently displayed items.
+   *
+   * To get active form values use `useWatch`.
+   */
   params: ProductFilterParams
   submit: (e?: BaseSyntheticEvent<object, any, any> | undefined) => Promise<void>
 }
 
-const FilterFormContext = createContext<FilterFormContextProps | null>(null)
+const FilterFormContext = createContext<ProductFiltersProContext | null>(null)
 
-export const useProductFiltersPro = () => {
+export const globalFormContextRef: MutableRefObject<ProductFiltersProContext | null> = {
+  current: null,
+}
+
+export function useProductFiltersPro(optional: true): ProductFiltersProContext | null
+export function useProductFiltersPro(optional?: false): ProductFiltersProContext
+export function useProductFiltersPro(optional: boolean = false) {
   const context = useContext(FilterFormContext)
-  if (!context) throw Error('useProductFiltersPro should be used inside ProductFiltersPro')
+  if (!optional && !context)
+    throw Error('useProductFiltersPro should be used inside ProductFiltersPro')
   return context
 }
 
@@ -43,12 +76,47 @@ export type FilterFormProviderProps = Omit<
 > & {
   children: React.ReactNode
   params: ProductListParams
+  /**
+   * Whether the filter should scroll to the products list and whether to submit the form on change.
+   */
+  autoSubmitMd?: boolean
+
+  handleSubmit?: (
+    formValues: ProductFilterParams,
+    next: (shallow?: boolean, replace?: boolean) => Promise<void>,
+  ) => Promise<void> | void
 } & DataProps
 
-const isSidebar = import.meta.graphCommerce.productFiltersLayout === 'SIDEBAR'
+function AutoSubmitSidebarDesktop() {
+  const { form, submit } = useProductFiltersPro()
+
+  // We only need to auto-submit when the layout is not sidebar and we're viewing on desktop
+  const autoSubmitDisabled = useMediaQuery<Theme>((t) => t.breakpoints.down('md'), {
+    defaultMatches: false,
+  })
+
+  return (
+    <FormAutoSubmit
+      control={form.control}
+      disabled={autoSubmitDisabled}
+      submit={submit}
+      leading
+      name={['filters', 'url', 'sort', 'pageSize', 'currentPage', 'dir']}
+    />
+  )
+}
 
 export function ProductFiltersPro(props: FilterFormProviderProps) {
-  const { children, params, aggregations, appliedAggregations, filterTypes, ...formProps } = props
+  const {
+    children,
+    params,
+    aggregations,
+    appliedAggregations,
+    filterTypes,
+    autoSubmitMd = false,
+    handleSubmit,
+    ...formProps
+  } = props
 
   const defaultValues = useMemoObject(toFilterParams(params))
   const form = useForm<ProductFilterParams>({ defaultValues, ...formProps })
@@ -58,36 +126,52 @@ export function ProductFiltersPro(props: FilterFormProviderProps) {
   const theme = useTheme()
   const isDesktop = useMatchMediaMotionValue('up', 'md')
   const scrollMarginTop = useTransform(() => (isDesktop.get() ? 0 : theme.appShell.headerHeightSm))
-  const scroll = useTransform(() => !isSidebar || isDesktop.get())
+  const scroll = useTransform(() => !autoSubmitMd || isDesktop.get())
 
   const submit = useEventCallback(
     form.handleSubmit(async (formValues) => {
       const path = productListLinkFromFilter({ ...formValues, currentPage: 1 })
       if (router.asPath === path) return false
 
-      const opts = { scroll: scroll.get() }
-      return (router.query.url ?? []).includes('q')
-        ? router.replace(path, path, opts)
-        : router.push(path, path, opts)
+      const isSearch = router.asPath.startsWith('/search')
+      const isFilter = (router.query.url ?? []).includes('q')
+
+      const next = async (shallow = false, replace: boolean = isSearch || isFilter) => {
+        const opts = { shallow, scroll: scroll.get() }
+        await (replace ? router.replace(path, path, opts) : router.push(path, path, opts))
+      }
+
+      if (handleSubmit) return handleSubmit(formValues, next)
+      return next()
     }),
   )
 
-  const filterFormContext: FilterFormContextProps = useMemo(
-    () => ({
+  const filterFormContext = useMemo(() => {
+    const ctx: ProductFiltersProContext = {
       form,
       params: defaultValues,
       submit,
       appliedAggregations,
       filterTypes,
       aggregations,
-    }),
-    [form, defaultValues, submit, appliedAggregations, filterTypes, aggregations],
+    }
+    globalFormContextRef.current = ctx
+    return ctx
+  }, [form, defaultValues, submit, appliedAggregations, filterTypes, aggregations])
+
+  // When the component unmounts, we want to clear the global filter form
+  useEffect(
+    () => () => {
+      globalFormContextRef.current = null
+    },
+    [],
   )
 
   return (
     <FilterFormContext.Provider value={filterFormContext}>
       <m.form ref={ref} noValidate onSubmit={submit} id='products' style={{ scrollMarginTop }} />
       {children}
+      {autoSubmitMd && <AutoSubmitSidebarDesktop />}
     </FilterFormContext.Provider>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProAggregations.tsx

@@ -1,4 +1,9 @@
+import { AttributeFrontendInputEnum } from '@graphcommerce/graphql-mesh'
 import { ProductListFiltersFragment } from '../ProductListFilters/ProductListFilters.gql'
+import { ProductFilterEqualChip } from './ProductFilterEqualChip'
+import { ProductFilterEqualSection } from './ProductFilterEqualSection'
+import { ProductFilterRangeChip } from './ProductFilterRangeChip'
+import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import { excludeCategory } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
@@ -7,10 +12,24 @@ export type FilterProps = {
   aggregation: NonNullable<NonNullable<ProductListFiltersFragment['aggregations']>[number]>
 }
 
-export type FilterRenderer = Record<string, React.FC<FilterProps>>
+export type FilterRenderer = Record<AttributeFrontendInputEnum, React.FC<FilterProps>>
 
 export type ProductFiltersProAggregationsProps = {
-  renderer?: FilterRenderer
+  renderer?: Partial<FilterRenderer>
+}
+
+export const productFiltersProSectionRenderer: Partial<FilterRenderer> = {
+  SELECT: ProductFilterEqualSection,
+  MULTISELECT: ProductFilterEqualSection,
+  BOOLEAN: ProductFilterEqualSection,
+  PRICE: ProductFilterRangeSection,
+}
+
+export const productFiltersProChipRenderer: Partial<FilterRenderer> = {
+  SELECT: ProductFilterEqualChip,
+  MULTISELECT: ProductFilterEqualChip,
+  BOOLEAN: ProductFilterEqualChip,
+  PRICE: ProductFilterRangeChip,
 }
 
 export function ProductFiltersProAggregations(props: ProductFiltersProAggregationsProps) {
@@ -19,26 +38,28 @@ export function ProductFiltersProAggregations(props: ProductFiltersProAggregatio
 
   return (
     <>
-      {excludeCategory(
-        applyAggregationCount(aggregations, appliedAggregations, params),
-        params,
-      ).map((aggregation) => {
-        const filterType = filterTypes[aggregation.attribute_code]
-        if (!filterType) return null
-
-        const Component = renderer?.[filterType]
-        if (!Component) {
-          if (process.env.NODE_ENV === 'development') {
-            // eslint-disable-next-line no-console
-            console.log(
-              `The renderer for filterType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
-            )
+      {excludeCategory(applyAggregationCount(aggregations, appliedAggregations, params)).map(
+        (aggregation) => {
+          const filterType = filterTypes[aggregation.attribute_code]
+          if (!filterType) {
+            // console.log('Filter not recognized', aggregation.attribute_code, filterTypes)
+            return null
+          }
+
+          const Component = renderer?.[filterType]
+          if (!Component) {
+            if (process.env.NODE_ENV === 'development') {
+              // eslint-disable-next-line no-console
+              console.log(
+                `The renderer for filterType ${filterType} can not be found, please add it to the renderer prop: renderer={{ ${filterType}: (props) => <>MYRenderer</> }}}}`,
+              )
+            }
+            return null
           }
-          return null
-        }
 
-        return <Component key={aggregation.attribute_code} aggregation={aggregation} {...props} />
-      })}
+          return <Component key={aggregation.attribute_code} aggregation={aggregation} {...props} />
+        },
+      )}
     </>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProAllFiltersChip.tsx

@@ -1,11 +1,10 @@
 import { ChipOverlayOrPopper, ChipOverlayOrPopperProps } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
-import { ProductFilterEqualSection } from './ProductFilterEqualSection'
-import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import { useProductFiltersPro } from './ProductFiltersPro'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
 import {
@@ -14,7 +13,7 @@ import {
 } from './ProductFiltersProSortSection'
 import { activeAggregations } from './activeAggregations'
 import { applyAggregationCount } from './applyAggregationCount'
-import { useClearAllFiltersAction } from './useClearAllFiltersHandler'
+import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
 
 export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregationsProps &
   ProductFiltersProSortSectionProps &
@@ -23,11 +22,6 @@ export type ProductFiltersProAllFiltersChipProps = ProductFiltersProAggregations
     'label' | 'selected' | 'selectedLabel' | 'onApply' | 'onReset' | 'onClose' | 'children'
   >
 
-const defaultRenderer = {
-  FilterRangeTypeInput: ProductFilterRangeSection,
-  FilterEqualTypeInput: ProductFilterEqualSection,
-}
-
 export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFiltersChipProps) {
   const { sort_fields, total_count, renderer, category, ...rest } = props
 
@@ -42,7 +36,7 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
   const allFilters = [...activeFilters, sort].filter(Boolean)
   const hasFilters = allFilters.length > 0
 
-  const clearAll = useClearAllFiltersAction()
+  const clearAll = useProductFiltersProClearAllAction()
 
   return (
     <ChipOverlayOrPopper
@@ -65,7 +59,9 @@ export function ProductFiltersProAllFiltersChip(props: ProductFiltersProAllFilte
             category={category}
           />
           <ProductFiltersProLimitSection />
-          <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+          <ProductFiltersProAggregations
+            renderer={{ ...productFiltersProSectionRenderer, ...renderer }}
+          />
         </>
       )}
     </ChipOverlayOrPopper>

package/components/ProductFiltersPro/ProductFiltersProAllFiltersSidebar.tsx

@@ -4,7 +4,12 @@ import { ProductFilterRangeSection } from './ProductFilterRangeSection'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProSectionRenderer,
 } from './ProductFiltersProAggregations'
+import {
+  ProductFiltersCategorySectionProps,
+  ProductFiltersProCategorySection,
+} from './ProductFiltersProCategorySection'
 import { ProductFiltersProLimitSection } from './ProductFiltersProLimitSection'
 import {
   ProductFiltersProSortSection,
@@ -12,25 +17,30 @@ import {
 } from './ProductFiltersProSortSection'
 
 export type ProductFiltersProAllFiltersSidebarProps = ProductFiltersProAggregationsProps &
-  ProductFiltersProSortSectionProps & { sx?: SxProps<Theme> }
-
-const defaultRenderer = {
-  FilterRangeTypeInput: ProductFilterRangeSection,
-  FilterEqualTypeInput: ProductFilterEqualSection,
-}
+  ProductFiltersProSortSectionProps &
+  ProductFiltersCategorySectionProps & { sx?: SxProps<Theme> }
 
+/**
+ * @deprecated Not used anymore
+ *
+ * @param props
+ * @returns
+ */
 export function ProductFiltersProAllFiltersSidebar(props: ProductFiltersProAllFiltersSidebarProps) {
-  const { sort_fields, total_count, renderer, sx = [], category } = props
+  const { sort_fields, total_count, renderer, sx = [], category, params } = props
 
   return (
     <Box sx={[{ display: { xs: 'none', md: 'grid' } }, ...(Array.isArray(sx) ? sx : [sx])]}>
+      <ProductFiltersProCategorySection category={category} params={params} />
       <ProductFiltersProSortSection
         sort_fields={sort_fields}
         total_count={total_count}
         category={category}
       />
       <ProductFiltersProLimitSection />
-      <ProductFiltersProAggregations renderer={{ ...defaultRenderer, ...renderer }} />
+      <ProductFiltersProAggregations
+        renderer={{ ...productFiltersProSectionRenderer, ...renderer }}
+      />
     </Box>
   )
 }

package/components/ProductFiltersPro/ProductFiltersProCategorySection.tsx

@@ -0,0 +1,130 @@
+import { useWatch } from '@graphcommerce/ecommerce-ui'
+import {
+  CategoryTreeItem,
+  UseCategoryTreeProps,
+  useCategoryTree,
+} from '@graphcommerce/magento-category'
+import {
+  ActionCard,
+  ActionCardAccordion,
+  ActionCardAccordionProps,
+  ActionCardList,
+  Button,
+  IconSvg,
+  iconChevronLeft,
+  responsiveVal,
+} from '@graphcommerce/next-ui'
+import { Trans } from '@lingui/react'
+import { Box, SxProps, Theme } from '@mui/material'
+import { useProductFiltersPro } from './ProductFiltersPro'
+
+export type ProductFiltersProCategoryAccordionProps = {
+  hideTitle?: boolean
+  sx?: SxProps<Theme>
+  categoryTree: CategoryTreeItem[]
+  onChange: (uid: CategoryTreeItem) => void | Promise<void>
+} & Pick<ActionCardAccordionProps, 'defaultExpanded'>
+
+export function ProductFiltersProCategoryAccordion(props: ProductFiltersProCategoryAccordionProps) {
+  const { hideTitle, sx, categoryTree, onChange, defaultExpanded } = props
+  const { form } = useProductFiltersPro()
+
+  const name = `filters.category_uid.in` as const
+  const currentFilter = useWatch({ control: form.control, name })
+
+  return (
+    <ActionCardAccordion
+      sx={[
+        hideTitle ? { '& .MuiAccordionSummary-root': { display: 'none' } } : {},
+        sx,
+        ...(Array.isArray(sx) ? sx : [sx]),
+      ]}
+      defaultExpanded={defaultExpanded}
+      summary={<Trans id='Categories' />}
+      right={
+        currentFilter && currentFilter.length > 0 ? (
+          <Button
+            color='primary'
+            onClick={(e) => {
+              e.stopPropagation()
+              form.setValue(name, null)
+            }}
+          >
+            <Trans id='Clear' />
+          </Button>
+        ) : undefined
+      }
+      details={
+        <ActionCardList
+          size='responsive'
+          variant='default'
+          sx={{ mb: 2 }}
+          value={form.getValues('url')}
+          onChange={async (e, value) => {
+            const item = categoryTree.find((i) => i.value === value)
+            if (!item) return
+            await onChange(item)
+          }}
+        >
+          {categoryTree.map((item) => {
+            const indent = item.isBack ? 0 : item.indent + 1
+            return (
+              <ActionCard
+                key={item.value}
+                {...item}
+                size='responsive'
+                title={
+                  <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                    <Box sx={{ marginRight: 1 }}>
+                      {item.isBack ? (
+                        <Box sx={{ display: 'flex', alignItems: 'center' }}>
+                          <IconSvg src={iconChevronLeft} size='medium' />
+                          {item.title}
+                        </Box>
+                      ) : (
+                        item.title
+                      )}
+                    </Box>
+                    {item.count !== null && (
+                      <Box sx={{ typography: 'caption', color: 'text.disabled' }}>
+                        ({item.count})
+                      </Box>
+                    )}
+                  </Box>
+                }
+                sx={{
+                  '&.sizeSmall': { pl: responsiveVal(8 * indent, 12 * indent) },
+                  '&.sizeMedium': { pl: responsiveVal(10 * indent, 14 * indent) },
+                  '&.sizeLarge': { pl: responsiveVal(12 * indent, 16 * indent) },
+                  '&.sizeResponsive': { pl: responsiveVal(8 * indent, 16 * indent) },
+                  '& .ActionCard-title.selected': { fontWeight: 'bold' },
+                }}
+              />
+            )
+          })}
+        </ActionCardList>
+      }
+    />
+  )
+}
+
+export type ProductFiltersCategorySectionProps = UseCategoryTreeProps &
+  Omit<ProductFiltersProCategoryAccordionProps, 'categoryTree' | 'onChange'>
+
+export function ProductFiltersProCategorySection(props: ProductFiltersCategorySectionProps) {
+  const categoryTree = useCategoryTree(props)
+  const { form, submit } = useProductFiltersPro()
+
+  if (!categoryTree) return null
+  return (
+    <ProductFiltersProCategoryAccordion
+      categoryTree={categoryTree}
+      {...props}
+      onChange={async (item) => {
+        form.setValue('url', item.value)
+        form.setValue('filters', { category_uid: { in: [item?.uid] } })
+        await submit()
+      }}
+    />
+  )
+}

package/components/ProductFiltersPro/ProductFiltersProChips.tsx

@@ -1,16 +1,18 @@
-import { ProductFilterEqualChip } from './ProductFilterEqualChip'
-import { ProductFilterRangeChip } from './ProductFilterRangeChip'
 import {
   ProductFiltersProAggregations,
   ProductFiltersProAggregationsProps,
+  productFiltersProChipRenderer,
 } from './ProductFiltersProAggregations'
 
-const defaultRenderer = {
-  FilterEqualTypeInput: ProductFilterEqualChip,
-  FilterRangeTypeInput: ProductFilterRangeChip,
-}
-
+/**
+ * @deprecated Not used anymore, use `<ProductFiltersProAggregations renderer={productFiltersProChipRenderer}/>`
+ */
 export function ProductFiltersProFilterChips(props: ProductFiltersProAggregationsProps) {
   const { renderer } = props
-  return <ProductFiltersProAggregations {...props} renderer={{ ...defaultRenderer, ...renderer }} />
+  return (
+    <ProductFiltersProAggregations
+      {...props}
+      renderer={{ ...productFiltersProChipRenderer, ...renderer }}
+    />
+  )
 }

package/components/ProductFiltersPro/ProductFiltersProClearAll.tsx

@@ -1,11 +1,9 @@
 import { Button } from '@graphcommerce/next-ui'
 import { Trans } from '@lingui/react'
 import { SxProps, Theme } from '@mui/material'
-import { useProductFiltersPro } from './ProductFiltersPro'
 import { ProductFiltersProAggregationsProps } from './ProductFiltersProAggregations'
-import { activeAggregations } from './activeAggregations'
-import { applyAggregationCount } from './applyAggregationCount'
-import { useClearAllFiltersAction } from './useClearAllFiltersHandler'
+import { useProductFiltersProClearAllAction } from './useProductFiltersProClearAllAction'
+import { useProductFilterProHasFiltersApplied } from './useProductFiltersProHasFiltersApplied'
 
 type AllFiltersSidebar = ProductFiltersProAggregationsProps & {
   sx?: SxProps<Theme>
@@ -14,18 +12,8 @@ type AllFiltersSidebar = ProductFiltersProAggregationsProps & {
 export function ProductFiltersProClearAll(props: AllFiltersSidebar) {
   const { sx = [] } = props
 
-  const { params, aggregations, appliedAggregations } = useProductFiltersPro()
-  const { sort } = params
-
-  const clearAll = useClearAllFiltersAction()
-
-  const activeFilters = activeAggregations(
-    applyAggregationCount(aggregations, appliedAggregations, params),
-    params,
-  ).map(({ label }) => label)
-
-  const allFilters = [...activeFilters, sort].filter(Boolean)
-  const hasFilters = allFilters.length > 0
+  const clearAll = useProductFiltersProClearAllAction()
+  const hasFilters = useProductFilterProHasFiltersApplied()
 
   if (!hasFilters) return null
 

package/components/ProductFiltersPro/ProductFiltersProLayoutSidebar.tsx

@@ -12,6 +12,7 @@ export type ProductFiltersProLayoutSidebarProps = {
   count?: React.ReactNode
   pagination: React.ReactNode
   header?: React.ReactNode
+  children?: React.ReactNode
 } & Partial<OwnerProps>
 
 type OwnerProps = {
@@ -32,6 +33,7 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
     sidebarFilters,
     header,
     headerPosition = 'before',
+    children,
   } = props
 
   const { form, submit } = useProductFiltersPro()
@@ -47,8 +49,6 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
 
       <FormAutoSubmit control={form.control} disabled={autoSubmitDisabled} submit={submit} />
 
-      <StickyBelowHeader sx={{ display: { md: 'none' } }}>{horizontalFilters}</StickyBelowHeader>
-
       <Container
         maxWidth={false}
         className={classes.content}
@@ -56,12 +56,16 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
           display: 'grid',
           gridTemplate: {
             xs: `
-              "beforeContent" auto
-              "items"         auto
-              "afterContent"  auto
+              "content"           auto
+              "horizontalFilters" auto
+              "beforeContent"     auto
+              "items"             auto
+              "afterContent"      auto
             `,
-            md: `
-              "topleft beforeContent" auto
+            md: ` 
+              "topleft content"   auto
+              "sidebar content"   auto
+              "sidebar beforeContent" auto
               "sidebar items"         min-content
               "sidebar afterContent"  1fr
               /300px   auto
@@ -87,6 +91,10 @@ export function ProductFiltersProLayoutSidebar(props: ProductFiltersProLayoutSid
             {sidebarFilters}
           </Box>
         )}
+        {children && <Box gridArea='content'>{children}</Box>}
+        <StickyBelowHeader sx={{ display: { md: 'none', gridArea: 'horizontalFilters' } }}>
+          {horizontalFilters}
+        </StickyBelowHeader>
 
         <Box gridArea='beforeContent' sx={{ mt: { md: 0 } }}>
           {count}

package/components/ProductFiltersPro/ProductFiltersProLimitChip.tsx

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