@blaze-cms/react-page-builder 0.113.0 → 0.114.0-alpha.2

package/lib-es/helpers/get-generic-render-variables.js

@@ -1,15 +1,25 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["limit", "offset"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
 
-import checkSortby from './check-sort-by';
 import getSortbyFieldName from './get-sort-by-field-name';
 import { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';
 
+const buildSortValues = (sortFilters, relations, stringProps) => {
+  if (!sortFilters || !sortFilters.length) return {
+    sort: []
+  };
+  const sortValues = sortFilters.map(({
+    sort,
+    propsToDisplay
+  }) => !!sort && !!propsToDisplay[0] && `${getSortbyFieldName(relations, propsToDisplay[0], stringProps)}:${sort.toLowerCase()}`).filter(Boolean).join(',');
+  return {
+    sort: sortValues
+  };
+};
+
 const getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {
   if (isTextSearchApplied) {
     return {};
@@ -17,23 +27,20 @@ const getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied
 
   const {
     sort,
-    sortby
+    sortby,
+    sortProperties = []
   } = filterProps;
-  const isSortbyArray = Array.isArray(sortby);
-  const hasSortFields = sort && checkSortby(sortby, isSortbyArray);
-  const sortValue = hasSortFields ? `${getSortbyFieldName(relations, sortby, stringProps, isSortbyArray)}:${sort.toLowerCase()}` : '';
-  return sortValue ? {
-    sort: sortValue
-  } : {};
+  return buildSortValues([{
+    sort,
+    propsToDisplay: [sortby]
+  }, ...sortProperties], relations, stringProps);
 };
 
-const getGenericRenderVariables = (relations, _ref = {}, stringProps = [], rawQueryStringified = '', isTextSearchFilterApplied = false) => {
-  let {
+const getGenericRenderVariables = (relations, filterProps = {}, stringProps = [], rawQueryStringified = '', isTextSearchFilterApplied = false) => {
+  const {
     limit = DEFAULT_LIMIT,
     offset
-  } = _ref,
-      filterProps = _objectWithoutProperties(_ref, _excluded);
-
+  } = filterProps;
   const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);
   const raw = rawQueryStringified ? {
     rawQueryStringified

package/lib-es/helpers/get-generic-render-variables.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/helpers/get-generic-render-variables.js"],"names":["checkSortby","getSortbyFieldName","DEFAULT_LIMIT","DEFAULT_OFFSET","getCorrectSort","relations","filterProps","stringProps","isTextSearchApplied","sort","sortby","isSortbyArray","Array","isArray","hasSortFields","sortValue","toLowerCase","getGenericRenderVariables","rawQueryStringified","isTextSearchFilterApplied","limit","offset","raw","Number"],"mappings":";;;;;;;;AAAA,OAAOA,WAAP,MAAwB,iBAAxB;AACA,OAAOC,kBAAP,MAA+B,0BAA/B;AACA,SAASC,aAAT,EAAwBC,cAAxB,QAA8C,cAA9C;;AAEA,MAAMC,cAAc,GAAG,CAACC,SAAD,EAAYC,WAAZ,EAAyBC,WAAzB,EAAsCC,mBAAtC,KAA8D;AACnF,MAAIA,mBAAJ,EAAyB;AACvB,WAAO,EAAP;AACD;;AACD,QAAM;AAAEC,IAAAA,IAAF;AAAQC,IAAAA;AAAR,MAAmBJ,WAAzB;AAEA,QAAMK,aAAa,GAAGC,KAAK,CAACC,OAAN,CAAcH,MAAd,CAAtB;AAEA,QAAMI,aAAa,GAAGL,IAAI,IAAIT,WAAW,CAACU,MAAD,EAASC,aAAT,CAAzC;AAEA,QAAMI,SAAS,GAAGD,aAAa,GAC1B,GAAEb,kBAAkB,CAACI,SAAD,EAAYK,MAAZ,EAAoBH,WAApB,EAAiCI,aAAjC,CAAgD,IAAGF,IAAI,CAACO,WAAL,EAAmB,EADhE,GAE3B,EAFJ;AAIA,SAAOD,SAAS,GAAG;AAAEN,IAAAA,IAAI,EAAEM;AAAR,GAAH,GAAyB,EAAzC;AACD,CAfD;;AAiBA,MAAME,yBAAyB,GAAG,CAChCZ,SADgC,EAEhC,OAAoD,EAFpB,EAGhCE,WAAW,GAAG,EAHkB,EAIhCW,mBAAmB,GAAG,EAJU,EAKhCC,yBAAyB,GAAG,KALI,KAM7B;AAAA,MAJH;AAAEC,IAAAA,KAAK,GAAGlB,aAAV;AAAyBmB,IAAAA;AAAzB,GAIG;AAAA,MAJiCf,WAIjC;;AACH,QAAMG,IAAI,GAAGL,cAAc,CAACC,SAAD,EAAYC,WAAZ,EAAyBC,WAAzB,EAAsCY,yBAAtC,CAA3B;AACA,QAAMG,GAAG,GAAGJ,mBAAmB,GAAG;AAAEA,IAAAA;AAAF,GAAH,GAA6B,EAA5D;AAEA;AACEE,IAAAA,KAAK,EAAEG,MAAM,CAACH,KAAK,IAAIlB,aAAV,CADf;AAEEmB,IAAAA,MAAM,EAAEE,MAAM,CAACF,MAAM,IAAIlB,cAAX;AAFhB,KAGKM,IAHL,GAIKa,GAJL;AAMD,CAhBD;;AAkBA,eAAeL,yBAAf","sourcesContent":["import checkSortby from './check-sort-by';\nimport getSortbyFieldName from './get-sort-by-field-name';\nimport { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';\n\nconst getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {\n  if (isTextSearchApplied) {\n    return {};\n  }\n  const { sort, sortby } = filterProps;\n\n  const isSortbyArray = Array.isArray(sortby);\n\n  const hasSortFields = sort && checkSortby(sortby, isSortbyArray);\n\n  const sortValue = hasSortFields\n    ? `${getSortbyFieldName(relations, sortby, stringProps, isSortbyArray)}:${sort.toLowerCase()}`\n    : '';\n\n  return sortValue ? { sort: sortValue } : {};\n};\n\nconst getGenericRenderVariables = (\n  relations,\n  { limit = DEFAULT_LIMIT, offset, ...filterProps } = {},\n  stringProps = [],\n  rawQueryStringified = '',\n  isTextSearchFilterApplied = false\n) => {\n  const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);\n  const raw = rawQueryStringified ? { rawQueryStringified } : {};\n\n  return {\n    limit: Number(limit || DEFAULT_LIMIT),\n    offset: Number(offset || DEFAULT_OFFSET),\n    ...sort,\n    ...raw\n  };\n};\n\nexport default getGenericRenderVariables;\n"],"file":"get-generic-render-variables.js"}
+{"version":3,"sources":["../../src/helpers/get-generic-render-variables.js"],"names":["getSortbyFieldName","DEFAULT_LIMIT","DEFAULT_OFFSET","buildSortValues","sortFilters","relations","stringProps","length","sort","sortValues","map","propsToDisplay","toLowerCase","filter","Boolean","join","getCorrectSort","filterProps","isTextSearchApplied","sortby","sortProperties","getGenericRenderVariables","rawQueryStringified","isTextSearchFilterApplied","limit","offset","raw","Number"],"mappings":";;;;;;AAAA,OAAOA,kBAAP,MAA+B,0BAA/B;AACA,SAASC,aAAT,EAAwBC,cAAxB,QAA8C,cAA9C;;AAEA,MAAMC,eAAe,GAAG,CAACC,WAAD,EAAcC,SAAd,EAAyBC,WAAzB,KAAyC;AAC/D,MAAI,CAACF,WAAD,IAAgB,CAACA,WAAW,CAACG,MAAjC,EAAyC,OAAO;AAAEC,IAAAA,IAAI,EAAE;AAAR,GAAP;AACzC,QAAMC,UAAU,GAAGL,WAAW,CAC3BM,GADgB,CAEf,CAAC;AAAEF,IAAAA,IAAF;AAAQG,IAAAA;AAAR,GAAD,KACE,CAAC,CAACH,IAAF,IACA,CAAC,CAACG,cAAc,CAAC,CAAD,CADhB,IAEC,GAAEX,kBAAkB,CAACK,SAAD,EAAYM,cAAc,CAAC,CAAD,CAA1B,EAA+BL,WAA/B,CAA4C,IAAGE,IAAI,CAACI,WAAL,EAAmB,EAL1E,EAOhBC,MAPgB,CAOTC,OAPS,EAQhBC,IARgB,CAQX,GARW,CAAnB;AAUA,SAAO;AAAEP,IAAAA,IAAI,EAAEC;AAAR,GAAP;AACD,CAbD;;AAcA,MAAMO,cAAc,GAAG,CAACX,SAAD,EAAYY,WAAZ,EAAyBX,WAAzB,EAAsCY,mBAAtC,KAA8D;AACnF,MAAIA,mBAAJ,EAAyB;AACvB,WAAO,EAAP;AACD;;AACD,QAAM;AAAEV,IAAAA,IAAF;AAAQW,IAAAA,MAAR;AAAgBC,IAAAA,cAAc,GAAG;AAAjC,MAAwCH,WAA9C;AAEA,SAAOd,eAAe,CACpB,CAAC;AAAEK,IAAAA,IAAF;AAAQG,IAAAA,cAAc,EAAE,CAACQ,MAAD;AAAxB,GAAD,EAAqC,GAAGC,cAAxC,CADoB,EAEpBf,SAFoB,EAGpBC,WAHoB,CAAtB;AAKD,CAXD;;AAaA,MAAMe,yBAAyB,GAAG,CAChChB,SADgC,EAEhCY,WAAW,GAAG,EAFkB,EAGhCX,WAAW,GAAG,EAHkB,EAIhCgB,mBAAmB,GAAG,EAJU,EAKhCC,yBAAyB,GAAG,KALI,KAM7B;AACH,QAAM;AAAEC,IAAAA,KAAK,GAAGvB,aAAV;AAAyBwB,IAAAA;AAAzB,MAAoCR,WAA1C;AACA,QAAMT,IAAI,GAAGQ,cAAc,CAACX,SAAD,EAAYY,WAAZ,EAAyBX,WAAzB,EAAsCiB,yBAAtC,CAA3B;AACA,QAAMG,GAAG,GAAGJ,mBAAmB,GAAG;AAAEA,IAAAA;AAAF,GAAH,GAA6B,EAA5D;AAEA;AACEE,IAAAA,KAAK,EAAEG,MAAM,CAACH,KAAK,IAAIvB,aAAV,CADf;AAEEwB,IAAAA,MAAM,EAAEE,MAAM,CAACF,MAAM,IAAIvB,cAAX;AAFhB,KAGKM,IAHL,GAIKkB,GAJL;AAMD,CAjBD;;AAmBA,eAAeL,yBAAf","sourcesContent":["import getSortbyFieldName from './get-sort-by-field-name';\nimport { DEFAULT_LIMIT, DEFAULT_OFFSET } from '../constants';\n\nconst buildSortValues = (sortFilters, relations, stringProps) => {\n  if (!sortFilters || !sortFilters.length) return { sort: [] };\n  const sortValues = sortFilters\n    .map(\n      ({ sort, propsToDisplay }) =>\n        !!sort &&\n        !!propsToDisplay[0] &&\n        `${getSortbyFieldName(relations, propsToDisplay[0], stringProps)}:${sort.toLowerCase()}`\n    )\n    .filter(Boolean)\n    .join(',');\n\n  return { sort: sortValues };\n};\nconst getCorrectSort = (relations, filterProps, stringProps, isTextSearchApplied) => {\n  if (isTextSearchApplied) {\n    return {};\n  }\n  const { sort, sortby, sortProperties = [] } = filterProps;\n\n  return buildSortValues(\n    [{ sort, propsToDisplay: [sortby] }, ...sortProperties],\n    relations,\n    stringProps\n  );\n};\n\nconst getGenericRenderVariables = (\n  relations,\n  filterProps = {},\n  stringProps = [],\n  rawQueryStringified = '',\n  isTextSearchFilterApplied = false\n) => {\n  const { limit = DEFAULT_LIMIT, offset } = filterProps;\n  const sort = getCorrectSort(relations, filterProps, stringProps, isTextSearchFilterApplied);\n  const raw = rawQueryStringified ? { rawQueryStringified } : {};\n\n  return {\n    limit: Number(limit || DEFAULT_LIMIT),\n    offset: Number(offset || DEFAULT_OFFSET),\n    ...sort,\n    ...raw\n  };\n};\n\nexport default getGenericRenderVariables;\n"],"file":"get-generic-render-variables.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.113.0",
+  "version": "0.114.0-alpha.2",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -88,5 +88,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "4454dafe48e59a36dec55076208e90d2b3f64afd"
+  "gitHead": "0124c8a97920cfb8a694958e6b5dd2c52724d13d"
 }

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/DataSummary/helpers/build-loop-props-content.js

@@ -47,12 +47,7 @@ const buildLoopPropsContent = (loopProps = [], propsToDisplay = [], limit = 0, d
           const propValue = loopValue ? getLoopValue(loopValue[i]) : regularValues[key];
           if (!propValue) return null;
           const linkToPublishedContent = getLinkToPublishedContent(key, data);
-          return [
-            upperFirst(label) || upperFirst(key),
-            propValue,
-            linkToPublishedContent,
-            modifier
-          ];
+          return [upperFirst(label), propValue, linkToPublishedContent, modifier];
         });
       })
     ).filter(Boolean);

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`;
 
@@ -111,6 +117,8 @@ const SearchFilter = ({
     dispatch({ newValues, shouldSearch, type: 'update' });
   };
 
+  const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
+
   return (
     <>
       {isDesktopFormDisplayed || isMobileFormDisplayed ? (
@@ -132,8 +140,9 @@ const SearchFilter = ({
             {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}
 
             <div className="filter__wrapper filter__wrapper--search-refine">
-              {!groupAfter && (
+              {!shouldGroup && (
                 <FiltersList
+                  shouldSearch
                   data={data}
                   filters={filters}
                   hasUrl={hasUrl}
@@ -143,37 +152,77 @@ const SearchFilter = ({
                 />
               )}
 
-              {!!groupAfter && (
+              {shouldGroup && (
                 <>
                   <FiltersList
+                    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={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 +273,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: ''
 };