@blaze-cms/react-page-builder 0.112.0-alpha.0 → 0.113.0-alpha.0

package/lib-es/components/List/components/Pagination/ListPagination.js

@@ -26,20 +26,11 @@ const ListPagination = _ref => {
 
   const [showPagination, setShowPagination] = useState(true);
   const paginationRef = useRef(null);
+  const isLoadMore = paginationType === LOAD_MORE;
   useEffect(() => {
     if (isInfinite) setShowPagination(false);
   }, [isInfinite]);
-  useEffect(() => {
-    if (paginationRef && paginationRef.current) {
-      window.scrollTo({
-        left: 0,
-        top: window.pageYOffset - 100 + paginationRef.current.parentNode.getBoundingClientRect().top,
-        behavior: 'smooth'
-      });
-    }
-  }, [currentPage]);
   if (!showPagination) return null;
-  const isLoadMore = paginationType === LOAD_MORE;
   const totalRecordsToFetch = limitToUse || listTotal;
   const numberOfPages = Math.ceil(totalRecordsToFetch / itemsPerPage);
   const isLastPage = currentPage >= numberOfPages;

package/lib-es/components/List/components/Pagination/ListPagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/components/List/components/Pagination/ListPagination.js"],"names":["React","useState","useEffect","useRef","PropTypes","Classic","LoadMore","LOAD_MORE","ListPagination","listTotal","name","itemsPerPage","isInfinite","limitToUse","paginationType","currentPage","props","showPagination","setShowPagination","paginationRef","current","window","scrollTo","left","top","pageYOffset","parentNode","getBoundingClientRect","behavior","isLoadMore","totalRecordsToFetch","numberOfPages","Math","ceil","isLastPage","paginationProps","propTypes","number","isRequired","string","bool","defaultProps"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,SAA1B,EAAqCC,MAArC,QAAmD,OAAnD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,SAASC,SAAT,QAA0B,uBAA1B;;AAEA,MAAMC,cAAc,GAAG,QASjB;AAAA,MATkB;AACtBC,IAAAA,SADsB;AAEtBC,IAAAA,IAFsB;AAGtBC,IAAAA,YAHsB;AAItBC,IAAAA,UAJsB;AAKtBC,IAAAA,UALsB;AAMtBC,IAAAA,cANsB;AAOtBC,IAAAA;AAPsB,GASlB;AAAA,MADDC,KACC;;AACJ,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCjB,QAAQ,CAAC,IAAD,CAApD;AACA,QAAMkB,aAAa,GAAGhB,MAAM,CAAC,IAAD,CAA5B;AAEAD,EAAAA,SAAS,CACP,MAAM;AACJ,QAAIU,UAAJ,EAAgBM,iBAAiB,CAAC,KAAD,CAAjB;AACjB,GAHM,EAIP,CAACN,UAAD,CAJO,CAAT;AAOAV,EAAAA,SAAS,CACP,MAAM;AACJ,QAAIiB,aAAa,IAAIA,aAAa,CAACC,OAAnC,EAA4C;AAC1CC,MAAAA,MAAM,CAACC,QAAP,CAAgB;AACdC,QAAAA,IAAI,EAAE,CADQ;AAEdC,QAAAA,GAAG,EACDH,MAAM,CAACI,WAAP,GAAqB,GAArB,GAA2BN,aAAa,CAACC,OAAd,CAAsBM,UAAtB,CAAiCC,qBAAjC,GAAyDH,GAHxE;AAIdI,QAAAA,QAAQ,EAAE;AAJI,OAAhB;AAMD;AACF,GAVM,EAWP,CAACb,WAAD,CAXO,CAAT;AAcA,MAAI,CAACE,cAAL,EAAqB,OAAO,IAAP;AACrB,QAAMY,UAAU,GAAGf,cAAc,KAAKP,SAAtC;AACA,QAAMuB,mBAAmB,GAAGjB,UAAU,IAAIJ,SAA1C;AAEA,QAAMsB,aAAa,GAAGC,IAAI,CAACC,IAAL,CAAUH,mBAAmB,GAAGnB,YAAhC,CAAtB;AACA,QAAMuB,UAAU,GAAGnB,WAAW,IAAIgB,aAAlC;AACA,MAAIA,aAAa,IAAI,CAAjB,IAAuBG,UAAU,IAAItB,UAAzC,EAAsD,OAAO,IAAP;;AAEtD,QAAMuB,eAAe;AACnBzB,IAAAA,IADmB;AAEnBqB,IAAAA,aAFmB;AAGnBhB,IAAAA,WAHmB;AAInBmB,IAAAA;AAJmB,KAKhBlB,KALgB,CAArB;;AAQA,sBACE;AAAK,IAAA,SAAS,EAAC,YAAf;AAA4B,IAAA,GAAG,EAAEG;AAAjC,KACGU,UAAU,gBAAG,oBAAC,QAAD,EAAcM,eAAd,CAAH,gBAAuC,oBAAC,OAAD,EAAaA,eAAb,CADpD,CADF;AAKD,CAvDD;;AAyDA3B,cAAc,CAAC4B,SAAf,GAA2B;AACzBrB,EAAAA,WAAW,EAAEX,SAAS,CAACiC,MAAV,CAAiBC,UADL;AAEzBxB,EAAAA,cAAc,EAAEV,SAAS,CAACmC,MAAV,CAAiBD,UAFR;AAGzB7B,EAAAA,SAAS,EAAEL,SAAS,CAACiC,MAAV,CAAiBC,UAHH;AAIzB1B,EAAAA,UAAU,EAAER,SAAS,CAACoC,IAAV,CAAeF,UAJF;AAKzB3B,EAAAA,YAAY,EAAEP,SAAS,CAACiC,MAAV,CAAiBC,UALN;AAMzB5B,EAAAA,IAAI,EAAEN,SAAS,CAACmC,MAAV,CAAiBD,UANE;AAOzBzB,EAAAA,UAAU,EAAET,SAAS,CAACiC;AAPG,CAA3B;AAUA7B,cAAc,CAACiC,YAAf,GAA8B;AAC5B5B,EAAAA,UAAU,EAAE;AADgB,CAA9B;AAIA,eAAeL,cAAf","sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Classic from './Classic';\nimport LoadMore from './LoadMore';\nimport { LOAD_MORE } from '../../../../constants';\n\nconst ListPagination = ({\n  listTotal,\n  name,\n  itemsPerPage,\n  isInfinite,\n  limitToUse,\n  paginationType,\n  currentPage,\n  ...props\n}) => {\n  const [showPagination, setShowPagination] = useState(true);\n  const paginationRef = useRef(null);\n\n  useEffect(\n    () => {\n      if (isInfinite) setShowPagination(false);\n    },\n    [isInfinite]\n  );\n\n  useEffect(\n    () => {\n      if (paginationRef && paginationRef.current) {\n        window.scrollTo({\n          left: 0,\n          top:\n            window.pageYOffset - 100 + paginationRef.current.parentNode.getBoundingClientRect().top,\n          behavior: 'smooth'\n        });\n      }\n    },\n    [currentPage]\n  );\n\n  if (!showPagination) return null;\n  const isLoadMore = paginationType === LOAD_MORE;\n  const totalRecordsToFetch = limitToUse || listTotal;\n\n  const numberOfPages = Math.ceil(totalRecordsToFetch / itemsPerPage);\n  const isLastPage = currentPage >= numberOfPages;\n  if (numberOfPages <= 1 || (isLastPage && isInfinite)) return null;\n\n  const paginationProps = {\n    name,\n    numberOfPages,\n    currentPage,\n    isLastPage,\n    ...props\n  };\n\n  return (\n    <div className=\"pagination\" ref={paginationRef}>\n      {isLoadMore ? <LoadMore {...paginationProps} /> : <Classic {...paginationProps} />}\n    </div>\n  );\n};\n\nListPagination.propTypes = {\n  currentPage: PropTypes.number.isRequired,\n  paginationType: PropTypes.string.isRequired,\n  listTotal: PropTypes.number.isRequired,\n  isInfinite: PropTypes.bool.isRequired,\n  itemsPerPage: PropTypes.number.isRequired,\n  name: PropTypes.string.isRequired,\n  limitToUse: PropTypes.number\n};\n\nListPagination.defaultProps = {\n  limitToUse: null\n};\n\nexport default ListPagination;\n"],"file":"ListPagination.js"}
+{"version":3,"sources":["../../../../../src/components/List/components/Pagination/ListPagination.js"],"names":["React","useState","useEffect","useRef","PropTypes","Classic","LoadMore","LOAD_MORE","ListPagination","listTotal","name","itemsPerPage","isInfinite","limitToUse","paginationType","currentPage","props","showPagination","setShowPagination","paginationRef","isLoadMore","totalRecordsToFetch","numberOfPages","Math","ceil","isLastPage","paginationProps","propTypes","number","isRequired","string","bool","defaultProps"],"mappings":";;;;;;;;AAAA,OAAOA,KAAP,IAAgBC,QAAhB,EAA0BC,SAA1B,EAAqCC,MAArC,QAAmD,OAAnD;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,OAAP,MAAoB,WAApB;AACA,OAAOC,QAAP,MAAqB,YAArB;AACA,SAASC,SAAT,QAA0B,uBAA1B;;AAEA,MAAMC,cAAc,GAAG,QASjB;AAAA,MATkB;AACtBC,IAAAA,SADsB;AAEtBC,IAAAA,IAFsB;AAGtBC,IAAAA,YAHsB;AAItBC,IAAAA,UAJsB;AAKtBC,IAAAA,UALsB;AAMtBC,IAAAA,cANsB;AAOtBC,IAAAA;AAPsB,GASlB;AAAA,MADDC,KACC;;AACJ,QAAM,CAACC,cAAD,EAAiBC,iBAAjB,IAAsCjB,QAAQ,CAAC,IAAD,CAApD;AACA,QAAMkB,aAAa,GAAGhB,MAAM,CAAC,IAAD,CAA5B;AACA,QAAMiB,UAAU,GAAGN,cAAc,KAAKP,SAAtC;AAEAL,EAAAA,SAAS,CACP,MAAM;AACJ,QAAIU,UAAJ,EAAgBM,iBAAiB,CAAC,KAAD,CAAjB;AACjB,GAHM,EAIP,CAACN,UAAD,CAJO,CAAT;AAOA,MAAI,CAACK,cAAL,EAAqB,OAAO,IAAP;AACrB,QAAMI,mBAAmB,GAAGR,UAAU,IAAIJ,SAA1C;AAEA,QAAMa,aAAa,GAAGC,IAAI,CAACC,IAAL,CAAUH,mBAAmB,GAAGV,YAAhC,CAAtB;AACA,QAAMc,UAAU,GAAGV,WAAW,IAAIO,aAAlC;AACA,MAAIA,aAAa,IAAI,CAAjB,IAAuBG,UAAU,IAAIb,UAAzC,EAAsD,OAAO,IAAP;;AAEtD,QAAMc,eAAe;AACnBhB,IAAAA,IADmB;AAEnBY,IAAAA,aAFmB;AAGnBP,IAAAA,WAHmB;AAInBU,IAAAA;AAJmB,KAKhBT,KALgB,CAArB;;AAQA,sBACE;AAAK,IAAA,SAAS,EAAC,YAAf;AAA4B,IAAA,GAAG,EAAEG;AAAjC,KACGC,UAAU,gBAAG,oBAAC,QAAD,EAAcM,eAAd,CAAH,gBAAuC,oBAAC,OAAD,EAAaA,eAAb,CADpD,CADF;AAKD,CAzCD;;AA2CAlB,cAAc,CAACmB,SAAf,GAA2B;AACzBZ,EAAAA,WAAW,EAAEX,SAAS,CAACwB,MAAV,CAAiBC,UADL;AAEzBf,EAAAA,cAAc,EAAEV,SAAS,CAAC0B,MAAV,CAAiBD,UAFR;AAGzBpB,EAAAA,SAAS,EAAEL,SAAS,CAACwB,MAAV,CAAiBC,UAHH;AAIzBjB,EAAAA,UAAU,EAAER,SAAS,CAAC2B,IAAV,CAAeF,UAJF;AAKzBlB,EAAAA,YAAY,EAAEP,SAAS,CAACwB,MAAV,CAAiBC,UALN;AAMzBnB,EAAAA,IAAI,EAAEN,SAAS,CAAC0B,MAAV,CAAiBD,UANE;AAOzBhB,EAAAA,UAAU,EAAET,SAAS,CAACwB;AAPG,CAA3B;AAUApB,cAAc,CAACwB,YAAf,GAA8B;AAC5BnB,EAAAA,UAAU,EAAE;AADgB,CAA9B;AAIA,eAAeL,cAAf","sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport Classic from './Classic';\nimport LoadMore from './LoadMore';\nimport { LOAD_MORE } from '../../../../constants';\n\nconst ListPagination = ({\n  listTotal,\n  name,\n  itemsPerPage,\n  isInfinite,\n  limitToUse,\n  paginationType,\n  currentPage,\n  ...props\n}) => {\n  const [showPagination, setShowPagination] = useState(true);\n  const paginationRef = useRef(null);\n  const isLoadMore = paginationType === LOAD_MORE;\n\n  useEffect(\n    () => {\n      if (isInfinite) setShowPagination(false);\n    },\n    [isInfinite]\n  );\n\n  if (!showPagination) return null;\n  const totalRecordsToFetch = limitToUse || listTotal;\n\n  const numberOfPages = Math.ceil(totalRecordsToFetch / itemsPerPage);\n  const isLastPage = currentPage >= numberOfPages;\n  if (numberOfPages <= 1 || (isLastPage && isInfinite)) return null;\n\n  const paginationProps = {\n    name,\n    numberOfPages,\n    currentPage,\n    isLastPage,\n    ...props\n  };\n\n  return (\n    <div className=\"pagination\" ref={paginationRef}>\n      {isLoadMore ? <LoadMore {...paginationProps} /> : <Classic {...paginationProps} />}\n    </div>\n  );\n};\n\nListPagination.propTypes = {\n  currentPage: PropTypes.number.isRequired,\n  paginationType: PropTypes.string.isRequired,\n  listTotal: PropTypes.number.isRequired,\n  isInfinite: PropTypes.bool.isRequired,\n  itemsPerPage: PropTypes.number.isRequired,\n  name: PropTypes.string.isRequired,\n  limitToUse: PropTypes.number\n};\n\nListPagination.defaultProps = {\n  limitToUse: null\n};\n\nexport default ListPagination;\n"],"file":"ListPagination.js"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.112.0-alpha.0",
+  "version": "0.113.0-alpha.0",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -88,5 +88,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "5d74d74de0077c0c9dc79a7336cbfd584a35c325"
+  "gitHead": "c51eb46da13b5cbc6462618fb1712a4429186589"
 }

package/src/components/List/ListBuilder.js

@@ -40,6 +40,7 @@ const ListBuilder = props => {
     sortby,
     sort,
     paginationIndex,
+    omitWrappers,
     operator,
     filterOperator,
     currentSchema,
@@ -161,6 +162,7 @@ const ListBuilder = props => {
       limitToUse={limitToUse}
       itemsPerPageToUse={itemsPerPageToUse}
       action={action}
+      omitWrappers={omitWrappers}
       listComponent={listComponent}
       listAggregations={updatedAggregations}
       isAZ={isAZ}
@@ -188,6 +190,7 @@ ListBuilder.propTypes = {
   entityData: PropTypes.object,
   itemsToDisplay: PropTypes.array,
   limit: PropTypes.number,
+  omitWrappers: PropTypes.bool,
   offset: PropTypes.number,
   sortby: PropTypes.array.isRequired,
   sort: PropTypes.string.isRequired,
@@ -201,6 +204,7 @@ ListBuilder.defaultProps = {
   entityData: {},
   itemsToDisplay: [],
   limit: 0,
+  omitWrappers: false,
   offset: 0,
   paginationType: 'infinite',
   inheritedFilters: [],

package/src/components/List/ListFactory.js

@@ -31,6 +31,7 @@ const ListFactory = props => {
     name,
     filterByProperty,
     filterBy,
+    omitWrappers,
     type,
     sortby: defaultSortBy,
     sort: defaultSort,
@@ -132,6 +133,7 @@ const ListFactory = props => {
     filterEntitySchema,
     requiredSchema,
     currentSchema,
+    omitWrappers,
     operator,
     isTextSearchFilterApplied,
     paginationIndex,
@@ -149,6 +151,7 @@ ListFactory.propTypes = {
   type: PropTypes.string.isRequired,
   filterBy: PropTypes.array,
   filterByProperty: PropTypes.array,
+  omitWrappers: PropTypes.bool,
   operator: PropTypes.string,
   name: PropTypes.string,
   sortby: PropTypes.array,
@@ -159,6 +162,7 @@ ListFactory.propTypes = {
 ListFactory.defaultProps = {
   filterBy: [],
   filterByProperty: [],
+  omitWrappers: false,
   name: '',
   sortby: [],
   sort: '',

package/src/components/List/ListRender.js

@@ -17,6 +17,7 @@ const ListRender = props => {
     limitToUse,
     initialOffset,
     isInfinite,
+    omitWrappers,
     paginationType,
     listComponent: ListComponent,
     query,
@@ -57,6 +58,7 @@ const ListRender = props => {
         actionKey={actionKey}
         limitToUse={limitToUse}
         fetchMore={fetchMore}
+        omitWrappers={omitWrappers}
         itemsPerPageToUse={itemsPerPageToUse || listData.length}
         listTotal={listTotal}
         currentListLength={currentListLength}
@@ -94,6 +96,7 @@ ListRender.propTypes = {
   limitToUse: PropTypes.number.isRequired,
   initialOffset: PropTypes.number.isRequired,
   isInfinite: PropTypes.bool.isRequired,
+  omitWrappers: PropTypes.bool,
   query: PropTypes.object.isRequired,
   url: PropTypes.string.isRequired,
   listComponent: PropTypes.func.isRequired,
@@ -105,6 +108,7 @@ ListRender.propTypes = {
 };
 
 ListRender.defaultProps = {
+  omitWrappers: false,
   itemsToDisplay: [],
   listAggregations: [],
   displayTotal: false

package/src/components/List/components/Cards/CardsRender.js

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import CardsRenderWrapper from './CardsRenderWrapper';
 import { BANNER } from '../../constants';
+import Wrapper from '../../../Wrapper';
 import { splitChildren, appendImages } from '../../../../helpers';
 import { getPropsToDisplayModifiers } from '../../../../utils';
 import ListPagination from '../Pagination';
@@ -14,6 +15,7 @@ const CardsRender = ({
   children,
   entity,
   banner,
+  omitWrappers,
   propsToDisplay,
   paginationType,
   parent,
@@ -38,15 +40,18 @@ const CardsRender = ({
   if (imagesLoading) return '';
   const updatedListWithImages = appendImages(imagesData, orderedListData, itemsToDisplay);
 
+  const WrapperToUse = omitWrappers ? Fragment : Wrapper;
+
   return (
     <>
-      <div className="list list--compact">
+      <WrapperToUse className="list list--compact">
         <CardsRenderWrapper
           orderedListData={updatedListWithImages}
           listProps={props}
           bannerProps={bannerProps}
           cardChildren={regularChildren}
           gtmChildren={gtmChildren}
+          omitWrappers={omitWrappers}
           propsToDisplay={propsToDisplay}
           propsToDisplayModifiers={propsToDisplayModifiers}
           gridModifier={gridModifier}
@@ -54,7 +59,8 @@ const CardsRender = ({
           parent={parent}
           {...props}
         />
-      </div>
+      </WrapperToUse>
+
       {paginationType === LOAD_MORE && (
         <ListPagination paginationType={paginationType} parent={parent} {...props} />
       )}
@@ -70,6 +76,7 @@ CardsRender.propTypes = {
   paginationType: PropTypes.string.isRequired,
   hasBanner: PropTypes.bool,
   banner: PropTypes.object,
+  omitWrappers: PropTypes.bool,
   gridModifier: PropTypes.string,
   entity: PropTypes.string.isRequired,
   children: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
@@ -82,6 +89,7 @@ CardsRender.defaultProps = {
   children: null,
   hasBanner: false,
   banner: null,
+  omitWrappers: false,
   gtmData: null,
   itemsToDisplay: []
 };

package/src/components/List/components/Cards/CardsRenderWrapper.js

@@ -1,15 +1,23 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import CardsRenderItem from './CardsRenderItem';
 import Wrapper from '../../../Wrapper';
 import { withTitle } from '../../../../HOC';
 import { checkIfShouldRenderBanner } from '../helpers';
 
-const CardsRenderWrapper = ({ orderedListData, gridModifier, bannerProps, ...props }) => {
+const CardsRenderWrapper = ({
+  orderedListData,
+  gridModifier,
+  omitWrappers,
+  bannerProps,
+  ...props
+}) => {
   let bannerIndex = 0;
 
+  const WrapperToUse = omitWrappers ? Fragment : Wrapper;
+
   return (
-    <Wrapper className="grid" modifiers={gridModifier}>
+    <WrapperToUse className="grid" modifiers={gridModifier}>
       {orderedListData.map((cardProps, index) => {
         const { id } = cardProps;
         const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, bannerProps);
@@ -29,18 +37,20 @@ const CardsRenderWrapper = ({ orderedListData, gridModifier, bannerProps, ...pro
           />
         );
       })}
-    </Wrapper>
+    </WrapperToUse>
   );
 };
 
 CardsRenderWrapper.propTypes = {
   orderedListData: PropTypes.array.isRequired,
   gridModifier: PropTypes.string.isRequired,
+  omitWrappers: PropTypes.bool,
   imagesData: PropTypes.array,
   bannerProps: PropTypes.object
 };
 
 CardsRenderWrapper.defaultProps = {
+  omitWrappers: false,
   imagesData: [],
   bannerProps: {}
 };

package/src/components/List/components/Full/FullRender.js

@@ -1,13 +1,14 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import uuid from 'uuid/v1';
 import FullRenderItem from './FullRenderItem';
 import ListPagination from '../Pagination';
 import { LOAD_MORE } from '../../../../constants';
 import { BANNER } from '../../constants';
+import Wrapper from '../../../Wrapper';
 import { checkIfShouldRenderBanner } from '../helpers';
 
-const FullRender = ({ orderedListData, paginationType, ...props }) => {
+const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props }) => {
   const pageBuilderID = uuid();
   const { parent, entity, propsToDisplay, banner, hasBanner } = props;
   const bannerProps = banner
@@ -15,9 +16,11 @@ const FullRender = ({ orderedListData, paginationType, ...props }) => {
     : null;
   let bannerIndex = 0;
 
+  const WrapperToUse = omitWrappers ? Fragment : Wrapper;
+
   return (
     <>
-      <div className="list list--full">
+      <WrapperToUse className="list list--full">
         {orderedListData.map(({ id, ...entityProps }, i) => {
           const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(i, bannerProps);
           if (shouldRenderBanner) bannerIndex += 1;
@@ -37,7 +40,8 @@ const FullRender = ({ orderedListData, paginationType, ...props }) => {
             />
           );
         })}
-      </div>
+      </WrapperToUse>
+
       {paginationType === LOAD_MORE && (
         <ListPagination paginationType={paginationType} {...props} />
       )}
@@ -51,11 +55,13 @@ FullRender.propTypes = {
   parent: PropTypes.object.isRequired,
   propsToDisplay: PropTypes.array.isRequired,
   entity: PropTypes.string.isRequired,
+  omitWrappers: PropTypes.bool,
   hasBanner: PropTypes.bool,
   banner: PropTypes.object
 };
 
 FullRender.defaultProps = {
+  omitWrappers: false,
   hasBanner: false,
   banner: null
 };

package/src/components/List/components/Pagination/ListPagination.js

@@ -16,6 +16,7 @@ const ListPagination = ({
 }) => {
   const [showPagination, setShowPagination] = useState(true);
   const paginationRef = useRef(null);
+  const isLoadMore = paginationType === LOAD_MORE;
 
   useEffect(
     () => {
@@ -24,22 +25,7 @@ const ListPagination = ({
     [isInfinite]
   );
 
-  useEffect(
-    () => {
-      if (paginationRef && paginationRef.current) {
-        window.scrollTo({
-          left: 0,
-          top:
-            window.pageYOffset - 100 + paginationRef.current.parentNode.getBoundingClientRect().top,
-          behavior: 'smooth'
-        });
-      }
-    },
-    [currentPage]
-  );
-
   if (!showPagination) return null;
-  const isLoadMore = paginationType === LOAD_MORE;
   const totalRecordsToFetch = limitToUse || listTotal;
 
   const numberOfPages = Math.ceil(totalRecordsToFetch / itemsPerPage);

package/tests/unit/src/components/List/components/Cards/CardsRender.test.js

@@ -8,8 +8,16 @@ jest.mock('../../../../../../../src/hooks', () => ({
 }));
 
 describe('CardsRender component', () => {
-  it('should render based on listData  recieved', async () => {
+  it('should render based on listData received', async () => {
     const { asFragment } = await render(CardsRender, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render without wrapper, when requested', async () => {
+    const { asFragment } = await render(CardsRender, {
+      ...MOCKED_LIST_OPTIONS,
+      omitWrappers: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/List/components/Cards/CardsRenderWrapper.test.js

@@ -9,8 +9,16 @@ jest.mock('../../../../../../../src/components/List/components/Cards/CardsRender
 );
 
 describe('CardsRenderWrapper component', () => {
-  it('should render list with wrapper and tittle', async () => {
+  it('should render list with wrapper and title', async () => {
     const { asFragment } = await render(CardsRenderWrapper, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render without wrapper, when requested', async () => {
+    const { asFragment } = await render(CardsRenderWrapper, {
+      ...MOCKED_LIST_OPTIONS,
+      omitWrappers: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/List/components/Cards/__snapshots__/CardsRender.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardsRender component should render based on listData  recieved 1`] = `
+exports[`CardsRender component should render based on listData received 1`] = `
 <DocumentFragment>
   <div
-    class="list list--compact"
+    class="list list--compact "
   >
     <h2
       class="heading heading--section"
@@ -74,3 +74,70 @@ exports[`CardsRender component should render based on listData  recieved 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`CardsRender component should render without wrapper, when requested 1`] = `
+<DocumentFragment>
+  <h2
+    class="heading heading--section"
+  >
+    Some title
+  </h2>
+  <div
+    class="list__item list__item--compact"
+  >
+    <div
+      class="card card--portrait"
+    >
+      <div
+        class="card__content-wrapper card__content-wrapper--portrait"
+      >
+        <div
+          class="card__content card__content--portrait"
+        >
+          <h2
+            class="card__title card__title--portrait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="list__item list__item--compact"
+  >
+    <div
+      class="card card--portrait"
+    >
+      <div
+        class="card__content-wrapper card__content-wrapper--portrait"
+      >
+        <div
+          class="card__content card__content--portrait"
+        >
+          <h2
+            class="card__title card__title--portrait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="list__item list__item--compact"
+  >
+    <div
+      class="card card--portrait"
+    >
+      <div
+        class="card__content-wrapper card__content-wrapper--portrait"
+      >
+        <div
+          class="card__content card__content--portrait"
+        >
+          <h2
+            class="card__title card__title--portrait"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/List/components/Cards/__snapshots__/CardsRenderWrapper.test.js.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CardsRenderWrapper component should render list with wrapper and tittle 1`] = `
+exports[`CardsRenderWrapper component should render list with wrapper and title 1`] = `
 <DocumentFragment>
   <h2
     class="heading heading--section"
@@ -16,3 +16,16 @@ exports[`CardsRenderWrapper component should render list with wrapper and tittle
   </div>
 </DocumentFragment>
 `;
+
+exports[`CardsRenderWrapper component should render without wrapper, when requested 1`] = `
+<DocumentFragment>
+  <h2
+    class="heading heading--section"
+  >
+    Some title
+  </h2>
+  <div />
+  <div />
+  <div />
+</DocumentFragment>
+`;

package/tests/unit/src/components/List/components/Full/FullRender.test.js

@@ -9,8 +9,13 @@ jest.mock('../../../../../../../src/components/List/components/Full/FullRenderIt
 );
 
 describe('FullRender component', () => {
-  it('should  render if orderedListData is recieved', async () => {
+  it('should render if orderedListData is received', async () => {
     const { asFragment } = await render(FullRender, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  it('should render without wrapper, when requested', async () => {
+    const { asFragment } = await render(FullRender, { ...MOCKED_LIST_OPTIONS, omitWrappers: true });
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/tests/unit/src/components/List/components/Full/FullRenderItem.test.js

@@ -18,7 +18,7 @@ describe('FullRenderItem component', () => {
     });
     expect(asFragment()).toMatchSnapshot();
   });
-  it('should render item recieved', async () => {
+  it('should render item received', async () => {
     const { asFragment, getByTestId } = await render(FullRenderItem, MOCKED_LIST_OPTIONS);
     expect(asFragment()).toMatchSnapshot();
     MOCKED_LIST_OPTIONS.pageBuilderComponents.forEach(({ id }) => {

package/tests/unit/src/components/List/components/Full/__snapshots__/FullRender.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`FullRender component should  render if orderedListData is recieved 1`] = `
+exports[`FullRender component should render if orderedListData is received 1`] = `
 <DocumentFragment>
   <div
-    class="list list--full"
+    class="list list--full "
   >
     <div>
       item1
@@ -17,3 +17,17 @@ exports[`FullRender component should  render if orderedListData is recieved 1`]
   </div>
 </DocumentFragment>
 `;
+
+exports[`FullRender component should render without wrapper, when requested 1`] = `
+<DocumentFragment>
+  <div>
+    item1
+  </div>
+  <div>
+    item2
+  </div>
+  <div>
+    item3
+  </div>
+</DocumentFragment>
+`;

package/tests/unit/src/components/List/components/Full/__snapshots__/FullRenderItem.test.js.snap

@@ -22,7 +22,7 @@ exports[`FullRenderItem component should not render if no pageBuilderComponents
 </DocumentFragment>
 `;
 
-exports[`FullRenderItem component should render item recieved 1`] = `
+exports[`FullRenderItem component should render item received 1`] = `
 <DocumentFragment>
   <div
     class="heading heading--section heading--section--count"

package/tests/unit/src/components/List/components/Pagination/ListPagination.test.js

@@ -5,21 +5,36 @@ import ListPagination from '../../../../../../../src/components/List/components/
 
 const mockedAsPath = '/test-url?pb[list][page]=3';
 
+const mockedEvents = {
+  events: {
+    on: jest.fn(),
+    off: jest.fn()
+  }
+};
+
 jest.mock('next/router', () => ({
   useRouter: jest
     .fn()
     .mockImplementationOnce(() => ({
-      asPath: '/test-url?pb[list][page]=4'
+      asPath: '/test-url?pb[list][page]=4',
+      ...mockedEvents
     }))
-    .mockImplementationOnce(() => ({ asPath: 'test-url', query: { someQuery: 'valueq' } }))
     .mockImplementationOnce(() => ({
-      asPath: mockedAsPath
+      asPath: 'test-url',
+      query: { someQuery: 'valueq' },
+      ...mockedEvents
     }))
     .mockImplementationOnce(() => ({
-      asPath: mockedAsPath
+      asPath: mockedAsPath,
+      ...mockedEvents
     }))
-    .mockImplementationOnce(() => ({
-      asPath: mockedAsPath
+    .mockImplementation(() => ({
+      asPath: mockedAsPath,
+      ...mockedEvents
+    }))
+    .mockImplementation(() => ({
+      asPath: mockedAsPath,
+      ...mockedEvents
     }))
 }));