@blaze-cms/react-page-builder 0.113.1 → 0.114.0-alpha.3

package/src/components/Card/CardRender.js

@@ -9,26 +9,45 @@ import { useGetEntitySchemasAsObj, useGetImages } from '../../hooks';
 import {
   getUpdatedFilterBy,
   getEntityData,
+  getRequiredSchemas,
   sortResponseData,
   getUnpublishedEntityName,
   renderChildren,
   splitChildren,
   removeExtraItems,
-  getRequiredSchemas,
   appendImages
 } from '../../helpers';
 import { filtersSetup, filterQuerySetup, shouldSkipSingleQuery, shouldReturn } from './helpers';
 
 const CardContainer = dynamic(() => import('./CardContainer'));
 
-const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variableProps }) => {
+const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...otherProps }) => {
   const {
     parent: { itemId, itemEntity },
     filterBy = [],
     filterByProperty = [],
-    sortby = [],
+    sortby,
+    sort,
+    sortProperties = [],
     operator: filterOperator = AND
-  } = variableProps;
+  } = otherProps;
+
+  const updatedSortProperties = [...sortProperties];
+  if (!updatedSortProperties.length && sort) {
+    updatedSortProperties.unshift({ sort, propsToDisplay: sortby });
+  }
+
+  const sortbyFilters = updatedSortProperties
+    .map(({ propsToDisplay }) => propsToDisplay)
+    .filter(Boolean)
+    .flat();
+
+  const variableProps = {
+    ...otherProps,
+    sortProperties: updatedSortProperties,
+    sort: null,
+    sortby: null
+  };
 
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const { data: mainSchemas = {}, loading: _loading, error: _error } = useGetEntitySchemasAsObj([
@@ -70,7 +89,7 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variabl
     loading: schemaLoading,
     error: schemaError
   } = useGetEntitySchemasAsObj(
-    getRequiredSchemas([...filterByProperty, ...sortby], filterEntitySchema),
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
     _loading
   );
 
@@ -94,7 +113,6 @@ const CardRender = ({ entity, entityFields, itemsToDisplay, children, ...variabl
     itemsToDisplay,
     entitySameAsCurrentItemEntity
   });
-
   const { data, error: cardsError, loading: cardsLoading } = useQuery(action, {
     variables,
     skip: shouldReturn(!updatedFilterBy, _loading, _load, schemaLoading, _error, _err, schemaError)

package/src/components/Card/helpers/filter-query-setup.js

@@ -41,6 +41,7 @@ const filterQuerySetup = ({
     stringProps,
     JSON.stringify(rawQuery)
   );
+
   return { variables, limit };
 };
 

package/src/components/List/ListBuilder.js

@@ -51,14 +51,15 @@ const ListBuilder = props => {
     filterEntitySchema,
     requiredSchema,
     searchValues,
-    azFilter
+    azFilter,
+    sortProperties
   } = props;
   const isInfinite = paginationType === INFINITE;
   const listComponent = getListComponent(isCard, paginationType);
   const propsToDisplayValues = checkPropsToUse(propsToDisplay);
   const entityFields = buildPropsQuery(entitySchema, propsToDisplayValues, props) || '';
   const limitToUse = limit || itemsToDisplay.length;
-  const shouldApplyDefaultSort = !sortby || !sortby.length;
+  const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
   const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
   const { entityType, docType } = getEntityData(entity);
@@ -105,7 +106,8 @@ const ListBuilder = props => {
       limit: itemsPerPageToUse,
       offset: initialOffset,
       sort,
-      sortby
+      sortby,
+      sortProperties
     },
     stringProps,
     JSON.stringify(azRawQuery),
@@ -147,7 +149,8 @@ const ListBuilder = props => {
       limit: itemsPerPageToUse,
       offset: initialOffset,
       sort,
-      sortby
+      sortby,
+      sortProperties
     },
     stringProps,
     JSON.stringify(rawQuery),
@@ -198,7 +201,8 @@ ListBuilder.propTypes = {
   operator: PropTypes.string.isRequired,
   filterOperator: PropTypes.string.isRequired,
   paginationType: PropTypes.string,
-  azFilter: PropTypes.string
+  azFilter: PropTypes.string,
+  sortProperties: PropTypes.array
 };
 
 ListBuilder.defaultProps = {
@@ -209,7 +213,8 @@ ListBuilder.defaultProps = {
   offset: 0,
   paginationType: 'infinite',
   inheritedFilters: [],
-  azFilter: ''
+  azFilter: '',
+  sortProperties: []
 };
 
 export default ListBuilder;

package/src/components/List/ListFactory.js

@@ -7,7 +7,7 @@ import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema, generateSingleItemQuery } from '../../application/query';
 import ListBuilder from './ListBuilder';
 import { AZ_LIST_TYPE } from './constants';
-import { getAzQueryFilter } from './helpers';
+import { getAzQueryFilter, getSortProps } from './helpers';
 import {
   getGenericProps,
   getRequiredSchemas,
@@ -36,7 +36,8 @@ const ListFactory = props => {
     sortby: defaultSortBy,
     sort: defaultSort,
     searchFilter,
-    operator: filterOperator
+    operator: filterOperator,
+    sortProperties
   } = props;
 
   const { isPreview } = useContext(MainContext);
@@ -46,8 +47,14 @@ const ListFactory = props => {
   const { query, url, query: { sort: querySort, sortby: querySortBy } = {} } = parseUrl(
     parsedQuery
   );
-  const sort = querySort || defaultSort;
-  const sortby = querySortBy ? [querySortBy] : defaultSortBy || [];
+  const { sortbyFilters, updatedSortProperties } = getSortProps({
+    querySort,
+    sortProperties,
+    defaultSort,
+    querySortBy,
+    defaultSortBy
+  });
+
   const { itemEntity, itemId } = parent;
   const itemEntityUpdated = getUnpublishedEntityName(itemEntity);
   const paginationIndex = getPaginationIndex(query, name);
@@ -75,7 +82,7 @@ const ListFactory = props => {
     loading: requiredSchemaLoading,
     error: requiredSchemaError
   } = useGetEntitySchemasAsObj(
-    getRequiredSchemas([...filterByProperty, ...sortby], filterEntitySchema),
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
     schemasLoading
   );
   const inheritedFilters = getInheritedFilters(filterBy, filterByProperty);
@@ -126,8 +133,9 @@ const ListFactory = props => {
     isAZ,
     router,
     entitySchema,
-    sort,
-    sortby,
+    sort: null,
+    sortby: null,
+    sortProperties: updatedSortProperties,
     azFilter,
     searchValues,
     filterEntitySchema,
@@ -156,7 +164,8 @@ ListFactory.propTypes = {
   name: PropTypes.string,
   sortby: PropTypes.array,
   sort: PropTypes.string,
-  searchFilter: PropTypes.object
+  searchFilter: PropTypes.object,
+  sortProperties: PropTypes.array
 };
 
 ListFactory.defaultProps = {
@@ -165,6 +174,7 @@ ListFactory.defaultProps = {
   omitWrappers: false,
   name: '',
   sortby: [],
+  sortProperties: [],
   sort: '',
   operator: AND,
   searchFilter: {}

package/src/components/List/helpers/get-sort-props.js

@@ -0,0 +1,17 @@
+const getSortProps = ({ querySort, sortProperties, defaultSort, querySortBy, defaultSortBy }) => {
+  const sort = querySort || (sortProperties.length ? null : defaultSort);
+  let sortby = null;
+  if (querySortBy) sortby = [querySortBy];
+  else if (!sortProperties.length) sortby = defaultSortBy;
+
+  const updatedSortProperties = [...sortProperties];
+  if (sort) updatedSortProperties.unshift({ sort, propsToDisplay: sortby });
+
+  const sortbyFilters = updatedSortProperties
+    .map(({ propsToDisplay: filterProps }) => filterProps)
+    .filter(Boolean)
+    .flat();
+  return { sortbyFilters, updatedSortProperties };
+};
+
+export default getSortProps;

package/src/components/List/helpers/index.js

@@ -4,3 +4,4 @@ export { default as buildAzAggregations } from './build-az-aggregations';
 export { default as buildAzUrl } from './build-az-url';
 export { default as sortAggs } from './sort-aggs';
 export { default as getItemsPerPageToUse } from './get-items-per-page-to-use';
+export { default as getSortProps } from './get-sort-props';

package/src/components/SearchFilter/SearchFilter/FiltersList.js

@@ -4,7 +4,15 @@ import { MainContext } from '@blaze-cms/nextjs-components';
 import { TextSearch, Checkbox, SelectFilter, Range } from '../components';
 import { CHECKBOX, SELECT, TEXT_SEARCH, RANGE, SEARCH_TERM } from '../constants';
 
-const FiltersList = ({ data, filters, hasUrl, entity, filterValues, updateFilterValues }) => {
+const FiltersList = ({
+  data,
+  filters,
+  hasUrl,
+  entity,
+  filterValues,
+  updateFilterValues,
+  shouldSearch
+}) => {
   const { itemId } = useContext(MainContext);
 
   return filters.map(({ type, label, propsToDisplay, rangeInterval, elementTitle }, index) => {
@@ -46,6 +54,7 @@ const FiltersList = ({ data, filters, hasUrl, entity, filterValues, updateFilter
                 hasUrl={hasUrl}
                 filterValues={filterValues}
                 updateFilterValues={updateFilterValues}
+                shouldSearch={shouldSearch}
               />
             </div>
           )
@@ -64,6 +73,7 @@ const FiltersList = ({ data, filters, hasUrl, entity, filterValues, updateFilter
                 hasUrl={hasUrl}
                 filterValues={filterValues}
                 updateFilterValues={updateFilterValues}
+                shouldSearch={shouldSearch}
               />
             </div>
           )
@@ -81,6 +91,7 @@ const FiltersList = ({ data, filters, hasUrl, entity, filterValues, updateFilter
                 entity={entity}
                 filterValues={filterValues}
                 updateFilterValues={updateFilterValues}
+                shouldSearch={shouldSearch}
               />
             </div>
           )
@@ -97,10 +108,12 @@ FiltersList.propTypes = {
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
   data: PropTypes.object,
-  filters: PropTypes.array
+  filters: PropTypes.array,
+  shouldSearch: PropTypes.bool
 };
 
 FiltersList.defaultProps = {
+  shouldSearch: false,
   data: {},
   filters: []
 };

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -3,11 +3,16 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, buildQuery, getInitialFilterValues } from '../helpers';
+import {
+  isDeviceDesktop,
+  buildQuery,
+  getInitialFilterValues,
+  getResponsiveFilterClassnames
+} from '../helpers';
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
-import { SEARCH, REFINE } from '../constants';
+import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const reducer = (state, action) => {
   const { newValues, type, shouldSearch = true } = action;
@@ -36,11 +41,13 @@ const SearchFilter = ({
   displaySearchFilter,
   setDisplaySearchFilter,
   initialFilterValues,
-  groupAfter
+  groupAfterDesktop,
+  groupAfterMobile
 }) => {
   const [isDesktop, setIsDesktop] = useState(true);
   const [pageWidth, setPageWidth] = useState(null);
-  const [moreFiltersCollapsed, setMoreFiltersCollapsed] = useState(true);
+  const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
+  const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
   const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
 
   const handleSubmit = debounce(newValues => {
@@ -91,13 +98,12 @@ const SearchFilter = ({
     'filter__form filter__form--mobile': isMobileFormDisplayed
   });
 
-  const moreFiltersWrapperClass = classnames('filter__more-filters-wrapper', {
-    'filter__more-filters-wrapper--open': !moreFiltersCollapsed
-  });
-
-  const moreFiltersTogglerClass = classnames('filter__more-filters-toggler', {
-    'filter__more-filters-toggler--open': !moreFiltersCollapsed
-  });
+  const {
+    moreFiltersMobileWrapperClass,
+    moreFiltersMobileTogglerClass,
+    moreFiltersDesktopWrapperClass,
+    moreFiltersDesktopTogglerClass
+  } = getResponsiveFilterClassnames(moreFiltersDesktopCollapsed, moreFiltersMobileCollapsed);
 
   const formId = `filter-${name}-form`;
 
@@ -107,10 +113,13 @@ const SearchFilter = ({
     dispatch({ newValues, type: 'reset' });
   };
 
-  const updateFilterValues = (newValues, shouldSearch) => {
-    dispatch({ newValues, shouldSearch, type: 'update' });
+  const updateFilterValues = (newValues, shouldSubmit) => {
+    dispatch({ newValues, shouldSearch: shouldSubmit, type: 'update' });
   };
 
+  const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
+  const shouldSearch = !hasUrl;
+
   return (
     <>
       {isDesktopFormDisplayed || isMobileFormDisplayed ? (
@@ -132,8 +141,9 @@ const SearchFilter = ({
             {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}
 
             <div className="filter__wrapper filter__wrapper--search-refine">
-              {!groupAfter && (
+              {!shouldGroup && (
                 <FiltersList
+                  shouldSearch={shouldSearch}
                   data={data}
                   filters={filters}
                   hasUrl={hasUrl}
@@ -143,37 +153,77 @@ const SearchFilter = ({
                 />
               )}
 
-              {!!groupAfter && (
+              {shouldGroup && (
                 <>
                   <FiltersList
+                    shouldSearch={shouldSearch}
                     data={data}
-                    filters={filters.slice(0, groupAfter)}
+                    filters={filters.slice(0, groupAfterMobile)}
                     hasUrl={hasUrl}
                     entity={entity}
                     filterValues={filterValues}
                     updateFilterValues={updateFilterValues}
                   />
 
-                  <button
-                    className={moreFiltersTogglerClass}
-                    type="button"
-                    onClick={() => setMoreFiltersCollapsed(!moreFiltersCollapsed)}>
-                    More filters
-                  </button>
+                  {!!groupAfterMobile && (
+                    <button
+                      className={moreFiltersMobileTogglerClass}
+                      type="button"
+                      onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
+                      Filters
+                    </button>
+                  )}
 
-                  <div className={moreFiltersWrapperClass}>
-                    <div className="filter__more-filters-content">
+                  <div className={moreFiltersMobileWrapperClass}>
+                    <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
                       <FiltersList
+                        shouldSearch={shouldSearch && isDeviceDesktop()}
                         data={data}
-                        filters={filters.slice(groupAfter)}
+                        filters={filters.slice(
+                          groupAfterMobile,
+                          groupAfterDesktop ? groupAfterDesktop - 1 : 0
+                        )}
                         hasUrl={hasUrl}
                         entity={entity}
                         filterValues={filterValues}
                         updateFilterValues={updateFilterValues}
                       />
+
+                      {!!groupAfterDesktop && (
+                        <button
+                          className={moreFiltersDesktopTogglerClass}
+                          type="button"
+                          onClick={() =>
+                            setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
+                          }>
+                          More filters
+                        </button>
+                      )}
+
+                      <div className={moreFiltersDesktopWrapperClass}>
+                        <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
+                          <FiltersList
+                            shouldSearch={false}
+                            data={data}
+                            filters={filters.slice(groupAfterDesktop)}
+                            hasUrl={hasUrl}
+                            entity={entity}
+                            filterValues={filterValues}
+                            updateFilterValues={updateFilterValues}
+                          />
+                        </div>
+
+                        <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
+                          <ResetDesktopForm handleReset={handleReset} />
+
+                          <button className="button button--full-width" type="submit">
+                            {SEARCH}
+                          </button>
+                        </div>
+                      </div>
                     </div>
 
-                    <div className="filter__more-filters-buttons">
+                    <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
                       <ResetDesktopForm handleReset={handleReset} />
 
                       <button className="button button--full-width" type="submit">
@@ -224,7 +274,8 @@ SearchFilter.propTypes = {
   displaySearchFilter: PropTypes.bool.isRequired,
   setDisplaySearchFilter: PropTypes.func.isRequired,
   isCollapsedOnResponsive: PropTypes.bool.isRequired,
-  groupAfter: PropTypes.number.isRequired,
+  groupAfterDesktop: PropTypes.number.isRequired,
+  groupAfterMobile: PropTypes.number.isRequired,
   initialFilterValues: PropTypes.object.isRequired
 };
 

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -23,7 +23,8 @@ const SearchFilterContainer = ({
   filters,
   name,
   isCollapsedOnResponsive,
-  groupAfter
+  groupAfterMobile,
+  groupAfterDesktop
 }) => {
   const router = useRouter();
   const searchFilterRef = useRef(null);
@@ -113,7 +114,8 @@ const SearchFilterContainer = ({
       isCollapsedOnResponsive={isCollapsedOnResponsive}
       displaySearchFilter={displaySearchFilter}
       setDisplaySearchFilter={setDisplaySearchFilter}
-      groupAfter={groupAfter}
+      groupAfterMobile={groupAfterMobile}
+      groupAfterDesktop={groupAfterDesktop}
     />
   );
 };
@@ -124,7 +126,8 @@ SearchFilterContainer.propTypes = {
   filters: PropTypes.array,
   name: PropTypes.string.isRequired,
   isCollapsedOnResponsive: PropTypes.bool,
-  groupAfter: PropTypes.number
+  groupAfterMobile: PropTypes.number,
+  groupAfterDesktop: PropTypes.number
 };
 
 SearchFilterContainer.defaultProps = {
@@ -132,7 +135,8 @@ SearchFilterContainer.defaultProps = {
   filters: [],
   entity: '',
   isCollapsedOnResponsive: true,
-  groupAfter: 0
+  groupAfterMobile: 0,
+  groupAfterDesktop: 0
 };
 
 export default withTitle(SearchFilterContainer);

package/src/components/SearchFilter/components/Checkbox.js

@@ -8,7 +8,7 @@ import { LIMIT_MIN, LIMIT_MAX, MORE, LESS, DOWN, UP } from '../constants';
 
 const getButtonInfo = isMore => (isMore ? { icon: DOWN, text: MORE } : { icon: UP, text: LESS });
 
-const Checkbox = ({ data, prop, updateFilterValues, filterValues, label }) => {
+const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldSearch }) => {
   const [checkboxLimit, setCheckboxLimit] = useState(null);
 
   const handleCheckboxOptions = () => {
@@ -64,7 +64,7 @@ const Checkbox = ({ data, prop, updateFilterValues, filterValues, label }) => {
           const newCheckboxValues = eData
             .filter(({ checked }) => checked)
             .map(({ value }) => value);
-          updateFilterValues({ [prop]: newCheckboxValues }, true);
+          updateFilterValues({ [prop]: newCheckboxValues }, shouldSearch);
         }}
       />
       {data[prop].buckets.length > LIMIT_MIN && (
@@ -82,10 +82,12 @@ Checkbox.propTypes = {
   prop: PropTypes.string.isRequired,
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
+  shouldSearch: PropTypes.bool,
   label: PropTypes.string
 };
 
 Checkbox.defaultProps = {
+  shouldSearch: false,
   label: ''
 };
 

package/src/components/SearchFilter/components/Range.js

@@ -16,9 +16,11 @@ const Range = ({
   entity,
   propsToDisplay,
   updateFilterValues,
-  filterValues
+  filterValues,
+  shouldSearch
 }) => {
   const router = useRouter();
+  const debounceAmount = shouldSearch ? 1200 : 100;
   const { query } = parseUrl(decodeValue(router.asPath));
   const hasMultipleOptions = propsToDisplay.length > 1;
   const initialRangeOption = getIntersectedProp(query, propsToDisplay) || propsToDisplay[0];
@@ -39,8 +41,8 @@ const Range = ({
   const shouldShowRange = rangeOption && min !== max;
 
   const handleChange = debounce((option, value) => {
-    updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, true);
-  }, 1200);
+    updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);
+  }, debounceAmount);
 
   return (
     <>
@@ -86,11 +88,13 @@ Range.propTypes = {
   entity: PropTypes.string.isRequired,
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
+  shouldSearch: PropTypes.bool,
   rangeInterval: PropTypes.number,
   label: PropTypes.string
 };
 
 Range.defaultProps = {
+  shouldSearch: false,
   rangeInterval: 1,
   label: ''
 };

package/src/components/SearchFilter/components/Select.js

@@ -4,7 +4,7 @@ import Select from '@blaze-react/select';
 import { withTitle } from '../../../HOC';
 import { DEFAULT_OPTION } from '../constants';
 
-const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues }) => {
+const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues, shouldSearch }) => {
   const filterValue = filterValues[prop] || '';
 
   const options = data[prop].buckets
@@ -21,7 +21,7 @@ const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues }) =
       id={prop}
       options={optionsJoined}
       onChange={({ value }) => {
-        updateFilterValues({ [prop]: value }, true);
+        updateFilterValues({ [prop]: value }, shouldSearch);
       }}
     />
   );
@@ -32,10 +32,12 @@ SelectFilter.propTypes = {
   prop: PropTypes.string.isRequired,
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
+  shouldSearch: PropTypes.bool,
   label: PropTypes.string
 };
 
 SelectFilter.defaultProps = {
+  shouldSearch: false,
   label: ''
 };
 

package/src/components/SearchFilter/constants.js

@@ -24,6 +24,18 @@ const SEARCH = 'Search';
 const REFINE = `Refine Search`;
 const MOBILE_REFINEMENT_TITLE = 'Search refinement';
 
+const MORE_FILTERS_CLASSES_BASE = 'filter__more-filters';
+const MORE_FILTERS_CLASSES = {
+  MOBILE_WRAPPER: `${MORE_FILTERS_CLASSES_BASE}-mobile-wrapper`,
+  MOBILE_CONTENT: `${MORE_FILTERS_CLASSES_BASE}-mobile-content`,
+  MOBILE_TOGGLER: `${MORE_FILTERS_CLASSES_BASE}-mobile-toggler`,
+  MOBILE_BUTTONS: `${MORE_FILTERS_CLASSES_BASE}-mobile-buttons`,
+  DESKTOP_WRAPPER: `${MORE_FILTERS_CLASSES_BASE}-desktop-wrapper`,
+  DESKTOP_CONTENT: `${MORE_FILTERS_CLASSES_BASE}-desktop-content`,
+  DESKTOP_TOGGLER: `${MORE_FILTERS_CLASSES_BASE}-desktop-toggler`,
+  DESKTOP_BUTTONS: `${MORE_FILTERS_CLASSES_BASE}-desktop-buttons`
+};
+
 export {
   CHECKBOX,
   SELECT,
@@ -49,5 +61,6 @@ export {
   RESET,
   SEARCH,
   REFINE,
-  MOBILE_REFINEMENT_TITLE
+  MOBILE_REFINEMENT_TITLE,
+  MORE_FILTERS_CLASSES
 };

package/src/components/SearchFilter/helpers/build-query.js

@@ -8,12 +8,13 @@ const buildQuery = (filterValues, filters) => {
 
   filters.forEach(({ propsToDisplay, type }) => {
     if (type === TEXT_SEARCH) return;
-    propsToDisplay.map(prop => {
+
+    propsToDisplay.forEach(prop => {
       const value = filterValues[prop];
       const parsedValue = parseFilterValue(prop, type, value);
-      if (!parsedValue) return null;
-      if (parsedValue) newQuery.push(parsedValue);
-      return parsedValue;
+      if (parsedValue && !newQuery.includes(parsedValue)) {
+        newQuery.push(parsedValue);
+      }
     });
   });
 

package/src/components/SearchFilter/helpers/get-range-value.js

@@ -4,7 +4,9 @@ const getRangeValue = (rawQueryProp, rangeInterval, _min, _max) => {
   const { min, max } = calculateMinMax({ min: _min, max: _max }, rangeInterval);
 
   if (rawQueryProp) {
-    const [queryParamMin, queryParamMax] = rawQueryProp.split('-');
+    const [queryParamMin, queryParamMax] = Array.isArray(rawQueryProp)
+      ? rawQueryProp[0].split('-')
+      : rawQueryProp.split('-');
     const updatedMinValue = Number(queryParamMin);
     const updatedMaxValue = Number(queryParamMax);