Load dynamically facets

This module offers possibility load dynamically filter facets. This feature enhance the user experience by displaying maximum relevant facets on initial load. This behaviour minimize loading multiple facets at once and provide possibility to load more available facets when needed.

This feature can be easily enabled just by adding hook/composable into Filter and CategoryTree components.

Facet config note

In order dynamic load of facets would work properly we need to define sortCriteria in out facets.config.ts file. This could be e.g sortCriteria: 'score'. The reason is that FacetManager sortCriteria propery has default atLeastOneValue and Facet which is used internally to download more facets uses default automatic. Which means that if sortCriteria property is not set, FacetManager loads different set of values and then when is loaded more value with controller method showMoreValues new set of facets is downloaded because of different sortCriteria.

For all filters beside Category, one useFacets hook needs to be applied in FilterBase.tsx component. Old variables with same name have to be removed.

// components/CategoryFilters/Filters/FilterBase.tsx
import { useFacets } from '@sf-modules/coveo';  
export function FilterBase({ facet, max = 5, children, multiSelect }: FilterBaseProps) {
  // ...
  const {     toggleShowMore,     showMore,     itemsToDisplay: itemsToRender,     canShowMore: isButtonVisible,   } = useFacets({ facetName: facet.name, max }); 
  const isButtonVisible = max < facet.values.length;   const maxItems = showMore ? values.length : max;   const itemsToRender = values.slice(0, maxItems); 
  return (
    <!-- ... -->
  );
}

For Category filters changes have to be made in CategoryTree.tsx component. We need to import useCategoryFacets hook and apply its returned variables.

// components/CategoryFilters/Filters/FilterBase.tsx
import { useCategoryFacets } from '@sf-modules/coveo';  
export function CategoryTree({ categoryData, max = 5 }: CategoryTreeProps) {
  // ...
  const { toggleShowMore, showMore, itemsToDisplay: itemsToRender, canShowMore } = useCategoryFacets({ max }); 
  const categories = facet?.values ?? [];   const maxItems = showMore ? categories.length : max;   const itemsToRender = categories.slice(0, maxItems); 
  return (
    <!-- ... -->
    // change `max < categories.length` with `canShowMore` that comes from `useCategoryFacets` hook
    {canShowMore && (
      <SfButton className="mt-2 md:h-8 md:text-sm md:px-3 grayscale" onClick={toggleShowMore} variant="tertiary">
        {showMore ? t('showLess') : t('showMore')}
      </SfButton>
    <!-- ... -->
  );
}