@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle.0

package/src/components/ItemList/ItemListCounter/ItemListCounter.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';
 import { useQuery } from '@apollo/client';
-import { BsBookmarkStarFill, BsBookmarkStar } from 'react-icons/bs';
+import { HoverBookmark, BaseBookmark } from '../icons';
 import { getItemList } from '../../../application/query';
 import { useItemListId } from '../hooks';
 import { getItemListData } from '../helpers';
@@ -21,7 +21,7 @@ const ItemListCounter = ({ listName, modifier, url }) => {
 
   const listItems = getItemListData(data);
   const listLength = listItems.length;
-  const CounterIcon = listLength ? BsBookmarkStarFill : BsBookmarkStar;
+  const CounterIcon = listLength ? HoverBookmark : BaseBookmark;
 
   const handleClick = () => router.push('/Resolver', `${url}?itemListId=${listId}`);
 

package/src/components/ItemList/icons/AddedBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function AddedBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/added</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-417, -433)">
+          <g id="wishlist-button/added" transform="translate(417, 433.0588)">
+            <path
+              d="M1.33333333,5.68434189e-14 L22.6666667,5.68434189e-14 C23.4030667,5.68434189e-14 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,5.68434189e-14 1.33333333,5.68434189e-14 Z"
+              id="Shape"
+              fill="currentColor"
+              fillRule="nonzero"
+            />
+            <path
+              d="M18.6268424,8.17492183 C19.1243859,7.67737836 19.1243859,6.87070105 18.6268424,6.3731576 C18.129299,5.87561415 17.3226216,5.87561413 16.8250782,6.37315756 L10.0913659,13.1094147 L7.1749509,10.1904547 C6.85309671,9.86860055 6.38398401,9.74290217 5.94432301,9.86070898 C5.50466201,9.97851579 5.16124768,10.3219301 5.04344087,10.7615911 C4.92563406,11.2012521 5.05133243,11.6703648 5.37318663,11.992219 L9.19048381,15.8095162 C9.42920298,16.0488396 9.75333852,16.183341 10.0913659,16.183341 C10.4293934,16.183341 10.7535289,16.0488396 10.9922481,15.8095162 L18.6268424,8.17492183 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default AddedBookmark;

package/src/components/ItemList/icons/BaseBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function BaseBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 26 30"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/base</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-416, -236)" fillRule="nonzero">
+          <g id="wishlist-button/base" transform="translate(417, 237)">
+            <g id="Group" fill="#FFFFFF" stroke="currentColor" strokeWidth="2">
+              <path
+                d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+                id="Shape"
+              />
+            </g>
+            <path
+              d="M18.5475051,9.70770608 L14.3505774,9.09775478 L12.4744399,5.29423737 C12.4231974,5.19009934 12.3388952,5.10579713 12.2347571,5.05455461 C11.9735856,4.92562182 11.6562126,5.03306581 11.5256268,5.29423737 L9.64948934,9.09775478 L5.4525616,9.70770608 C5.33685268,9.72423592 5.23106167,9.77878441 5.15006543,9.86143364 C4.94616811,10.0710041 4.95060698,10.406139 5.15998334,10.6102356 L8.19651593,13.5707309 L7.47912064,17.7511288 C7.44480011,17.9495157 7.52626118,18.150158 7.68916287,18.2684724 C7.85206456,18.3867868 8.06806465,18.4021884 8.24610546,18.3081846 L12.0000333,16.3345211 L15.7539612,18.3081846 C15.8564463,18.3627331 15.9754612,18.3809159 16.0895171,18.3610801 C16.3771364,18.3114906 16.5705356,18.0387481 16.5209461,17.7511288 L15.8035508,13.5707309 L18.8400834,10.6102356 C18.9227326,10.5292394 18.9772811,10.4234484 18.9938109,10.3077395 C19.0384415,10.0184672 18.8367774,9.75068367 18.5475051,9.70770608 Z"
+              id="Path"
+              fill="currentColor"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default BaseBookmark;

package/src/components/ItemList/icons/HoverBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function HoverBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/hover</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-566, -237)" fillRule="nonzero">
+          <g id="wishlist-button/hover" transform="translate(566, 237.3529)">
+            <g id="Group" fill="currentColor">
+              <path
+                d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+                id="Shape"
+              />
+            </g>
+            <path
+              d="M18.5475051,9.70770608 L14.3505774,9.09775478 L12.4744399,5.29423737 C12.4231974,5.19009934 12.3388952,5.10579713 12.2347571,5.05455461 C11.9735856,4.92562182 11.6562126,5.03306581 11.5256268,5.29423737 L9.64948934,9.09775478 L5.4525616,9.70770608 C5.33685268,9.72423592 5.23106167,9.77878441 5.15006543,9.86143364 C4.94616811,10.0710041 4.95060698,10.406139 5.15998334,10.6102356 L8.19651593,13.5707309 L7.47912064,17.7511288 C7.44480011,17.9495157 7.52626118,18.150158 7.68916287,18.2684724 C7.85206456,18.3867868 8.06806465,18.4021884 8.24610546,18.3081846 L12.0000333,16.3345211 L15.7539612,18.3081846 C15.8564463,18.3627331 15.9754612,18.3809159 16.0895171,18.3610801 C16.3771364,18.3114906 16.5705356,18.0387481 16.5209461,17.7511288 L15.8035508,13.5707309 L18.8400834,10.6102356 C18.9227326,10.5292394 18.9772811,10.4234484 18.9938109,10.3077395 C19.0384415,10.0184672 18.8367774,9.75068367 18.5475051,9.70770608 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default HoverBookmark;

package/src/components/ItemList/icons/RemoveBookmark.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+function RemoveBookmark() {
+  return (
+    <svg
+      width="1em"
+      height="1em"
+      viewBox="0 0 24 29"
+      version="1.1"
+      xmlns="http://www.w3.org/2000/svg">
+      <title>wishlist-button/remove</title>
+      <g id="Wishlist" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+        <g id="components" transform="translate(-566, -433)">
+          <g id="Group" transform="translate(566, 433.4118)">
+            <path
+              d="M1.33333333,0 L22.6666667,0 C23.4030667,0 24,0.59696 24,1.33333333 L24,27.0350667 C24,27.4033333 23.7014667,27.7019336 23.3333333,27.7019336 C23.2397333,27.7019336 23.1472,27.682 23.0617333,27.6438667 L12,22.7084 L0.938306667,27.6438667 C0.602066667,27.794 0.20788,27.6429333 0.0578533333,27.3068 C0.0197066667,27.2212 0,27.1286667 0,27.0350667 L0,1.33333333 C0,0.59696 0.59696,0 1.33333333,0 Z"
+              id="Shape"
+              fill="currentColor"
+              fillRule="nonzero"
+            />
+            <path
+              d="M8.56311228,6.43978889 C8.18381709,6.06049368 7.6309823,5.91236204 7.11285543,6.05119372 C6.59472855,6.19002539 6.19002539,6.59472855 6.05119372,7.11285543 C5.91236204,7.6309823 6.06049368,8.18381709 6.43978889,8.56311228 L9.87969275,12.0000171 L6.43978889,15.4369219 C6.06049368,15.8162171 5.91236204,16.3690519 6.05119372,16.8871788 C6.19002539,17.4053057 6.59472855,17.8100088 7.11285543,17.9488405 C7.6309823,18.0876722 8.18381709,17.9395405 8.56311228,17.5602453 L12.0000171,14.1203415 L15.4369219,17.5602453 C16.0232615,18.1465849 16.9739058,18.1465849 17.5602453,17.5602453 C18.1465849,16.9739058 18.1465849,16.0232615 17.5602453,15.4369219 L14.1203415,12.0000171 L17.5602453,8.56311228 C18.1465849,7.97677272 18.1465849,7.02612845 17.5602453,6.43978889 C16.9739058,5.85344932 16.0232615,5.85344932 15.4369219,6.43978889 L12.0000171,9.87969275 L8.56311228,6.43978889 Z"
+              id="Path"
+              fill="#FFFFFF"
+            />
+          </g>
+        </g>
+      </g>
+    </svg>
+  );
+}
+
+export default RemoveBookmark;

package/src/components/ItemList/icons/index.js

@@ -0,0 +1,4 @@
+export { default as AddedBookmark } from './AddedBookmark';
+export { default as BaseBookmark } from './BaseBookmark';
+export { default as HoverBookmark } from './HoverBookmark';
+export { default as RemoveBookmark } from './RemoveBookmark';

package/src/components/Layout/Layout.js

@@ -4,7 +4,7 @@ import Wrapper from '../Wrapper';
 import { getClassModifiers } from '../../utils';
 import { useGetImages } from '../../hooks';
 import { getStylesToUpdate, checkIfRowHasColumns } from './helpers';
-import { renderChildren, hasChildren } from '../../helpers';
+import { renderChildren, hasChildren, getCustomHtmlProperties } from '../../helpers';
 import { COLUMN } from '../../constants';
 
 const Layout = React.forwardRef(
@@ -19,6 +19,7 @@ const Layout = React.forwardRef(
       dataNoSnippet,
       sticky,
       VariantComponent,
+      customHtmlProps = [],
       ...otherProps
     },
     ref
@@ -36,6 +37,8 @@ const Layout = React.forwardRef(
     const otherWrapperProps = {};
     if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
 
+    const customHtmlProperties = getCustomHtmlProperties({ customHtmlProps });
+
     const WrapperComponent = VariantComponent || Wrapper;
 
     return (
@@ -45,7 +48,8 @@ const Layout = React.forwardRef(
         className={type}
         modifiers={`${classModifiers}${additionalRowModifier}`}
         style={style}
-        {...otherWrapperProps}>
+        {...otherWrapperProps}
+        {...customHtmlProperties}>
         {title && <h2 className="heading heading--section">{title}</h2>}
         {renderChildren(children, otherProps)}
       </WrapperComponent>
@@ -64,6 +68,12 @@ Layout.propTypes = {
   tagType: PropTypes.string,
   dataNoSnippet: PropTypes.bool,
   VariantComponent: PropTypes.func,
+  customHtmlProps: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.string
+    })
+  ),
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 
@@ -76,7 +86,8 @@ Layout.defaultProps = {
   tagType: '',
   dataNoSnippet: false,
   sticky: false,
-  VariantComponent: null
+  VariantComponent: null,
+  customHtmlProps: []
 };
 
 export default Layout;

package/src/components/List/ListBuilder.js

@@ -65,7 +65,7 @@ const ListBuilder = props => {
   const limitToUse = limit || itemsToDisplayToUse.length;
   const shouldApplyDefaultSort = !sortProperties || !sortProperties.length;
   const itemsPerPageToUse = getItemsPerPageToUse(itemsPerPage, limitToUse);
-  const initialOffset = getCurrentOffset(offset, itemsPerPageToUse, paginationIndex, limitToUse);
+  const initialOffset = getCurrentOffset(limitToUse, offset, itemsPerPageToUse, paginationIndex);
   const fields = buildQueryFields(entityFields, entityTypes, !isCard);
   const action = getSearchPublishedContent(fields);
   const actionKey = SEARCH_PUBLISHED_CONTENT;

package/src/components/List/ListFactory.js

@@ -31,6 +31,8 @@ import { getItemListId, getItemListIds } from '../ItemList/helpers';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 import { AND_OPERATOR, TEXT_SEARCH, ID, AND, FULL } from '../../constants';
 
+export const VariantContext = React.createContext(null);
+
 const ListFactory = props => {
   const {
     entity: legacyEntity,
@@ -46,7 +48,8 @@ const ListFactory = props => {
     allSearchFilters,
     operator: filterOperator,
     sortProperties,
-    itemListName
+    itemListName,
+    VariantComponent
   } = props;
   const { isPreview } = useContext(MainContext);
   const router = useRouter();
@@ -175,7 +178,11 @@ const ListFactory = props => {
     mainSchemas
   };
 
-  return <ListBuilder {...listProps} />;
+  return (
+    <VariantContext.Provider value={VariantComponent}>
+      <ListBuilder {...listProps} />
+    </VariantContext.Provider>
+  );
 };
 
 ListFactory.propTypes = {
@@ -192,7 +199,8 @@ ListFactory.propTypes = {
   sort: PropTypes.string,
   allSearchFilters: PropTypes.array,
   sortProperties: PropTypes.array,
-  itemListName: PropTypes.string
+  itemListName: PropTypes.string,
+  VariantComponent: PropTypes.func
 };
 
 ListFactory.defaultProps = {
@@ -207,7 +215,8 @@ ListFactory.defaultProps = {
   sort: '',
   operator: AND,
   allSearchFilters: [],
-  itemListName: ''
+  itemListName: '',
+  VariantComponent: null
 };
 
 export default ListFactory;

package/src/components/List/ListRender.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useRef } from 'react';
 import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import ListPagination from './components/Pagination';
@@ -6,6 +6,7 @@ import ListHeader from './components/Header';
 import { LOAD_MORE } from '../../constants';
 import { useAppSyncEventHook } from '../../hooks';
 import { buildQueryBooster } from './helpers';
+import { getComponentId } from '../../helpers';
 
 const ListRender = props => {
   const {
@@ -28,6 +29,7 @@ const ListRender = props => {
     azFilter,
     displayTotal
   } = props;
+  const listRef = useRef(null);
   const { data: updatedVariables } = useAppSyncEventHook({
     eventName: 'list:query-variables',
     data: variables,
@@ -35,7 +37,7 @@ const ListRender = props => {
   });
   const boostedVariables = buildQueryBooster(props, updatedVariables);
   const {
-    data = {},
+    data = { [actionKey]: { results: [] }, total: 0 },
     error,
     loading,
     fetchMore
@@ -43,55 +45,69 @@ const ListRender = props => {
     variables: boostedVariables
   });
 
-  if (loading) return '';
+  if (loading && !listRef.current) {
+    // don't render if loading for the first time with no reference
+    return '';
+  }
   if (error) return error.message;
   if (!data[actionKey] || !data[actionKey].results) return null;
 
   const listData = data[actionKey].results;
   const listTotal = data[actionKey].total;
 
-  if (!listData || !listData.length) return null;
-  const { length: currentListLength } = listData;
+  if ((!listData || !listData.length) && !loading) return null;
+  const currentListLength = listData.length;
   const currentPage = Math.ceil((initialOffset + currentListLength) / itemsPerPageToUse);
   const totalDisplay = limitToUse && listTotal > limitToUse ? limitToUse : listTotal;
+  const componentId = getComponentId(name);
 
   return (
     <>
-      <span className="list-top" />
-      {isAZ && <ListHeader name={name} listAggregations={listAggregations} azFilter={azFilter} />}
-      {displayTotal && (
-        <div className="list_total_results w-full text-left p-4">Total results: {totalDisplay}</div>
-      )}
-      <ListComponent
-        orderedListData={listData}
-        isInfinite={isInfinite}
-        initialOffset={initialOffset}
-        actionKey={actionKey}
-        limitToUse={limitToUse}
-        fetchMore={fetchMore}
-        omitWrappers={omitWrappers}
-        itemsPerPageToUse={itemsPerPageToUse || listData.length}
-        listTotal={listTotal}
-        currentListLength={currentListLength}
-        currentPage={currentPage}
-        query={query}
-        url={url}
-        itemsToDisplay={itemsToDisplay}
-        {...props}
-      />
-      {paginationType !== LOAD_MORE && (
-        <ListPagination
-          limitToUse={limitToUse}
-          itemsPerPage={itemsPerPageToUse}
-          listTotal={listTotal}
-          name={name}
-          isInfinite={isInfinite}
-          currentListLength={currentListLength}
-          paginationType={paginationType}
-          currentPage={currentPage}
-          query={query}
-          url={url}
-        />
+      <div ref={listRef} id={componentId} className="list-top" />
+      {!loading && (
+        <>
+          {isAZ && (
+            <ListHeader name={name} listAggregations={listAggregations} azFilter={azFilter} />
+          )}
+          {displayTotal && (
+            <div className="list_total_results w-full text-left p-4">
+              Total results: {totalDisplay}
+            </div>
+          )}
+          <ListComponent
+            orderedListData={listData}
+            isInfinite={isInfinite}
+            initialOffset={initialOffset}
+            actionKey={actionKey}
+            limitToUse={limitToUse}
+            fetchMore={fetchMore}
+            omitWrappers={omitWrappers}
+            itemsPerPageToUse={itemsPerPageToUse || listData.length}
+            listTotal={listTotal}
+            currentListLength={currentListLength}
+            currentPage={currentPage}
+            query={query}
+            url={url}
+            itemsToDisplay={itemsToDisplay}
+            {...props}
+          />
+          {paginationType !== LOAD_MORE && (
+            <ListPagination
+              listRef={listRef}
+              componentId={componentId}
+              limitToUse={limitToUse}
+              itemsPerPage={itemsPerPageToUse}
+              listTotal={listTotal}
+              name={name}
+              isInfinite={isInfinite}
+              currentListLength={currentListLength}
+              paginationType={paginationType}
+              currentPage={currentPage}
+              query={query}
+              url={url}
+            />
+          )}
+        </>
       )}
     </>
   );

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

@@ -2,44 +2,42 @@ import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import { Waypoint } from 'react-waypoint';
 import { MainContext } from '@blaze-cms/nextjs-components';
+import { VariantContext } from '../../ListFactory';
 import BuildPBComponents from '../../../../hooks/helpers/buildPBComponents';
 import Banner from '../../../Banner';
 import { parsePropsToDisplay, shouldRenderWaypoint } from '../../../../helpers';
 
-const FullRenderItem = ({
-  isInfinite,
-  pageBuilderComponents,
-  entityProps,
-  propsToDisplay,
-  entity,
-  index,
-  itemId,
-  listTotal,
-  initialOffset,
-  currentListLength,
-  triggerInfiniteScroll,
-  parent,
-  pageBuilderID,
-  displayCount,
-  shouldRenderBanner,
-  bannerProps,
-  bannerIndex
-}) => {
+const FullRenderItem = props => {
+  const {
+    isInfinite,
+    pageBuilderComponents,
+    entityProps,
+    propsToDisplay,
+    entity,
+    index,
+    itemId,
+    listTotal,
+    initialOffset,
+    currentListLength,
+    triggerInfiniteScroll,
+    parent,
+    pageBuilderID,
+    displayCount,
+    shouldRenderBanner,
+    bannerProps,
+    bannerIndex
+  } = props;
   const { hasGTM } = useContext(MainContext);
+  const VariantComponent = useContext(VariantContext);
+
   if (!pageBuilderComponents) return null;
   const parsedPropsToDisplay = parsePropsToDisplay(entityProps, propsToDisplay);
   const currentItemIndex = initialOffset + index;
   const renderWaypoint =
     isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);
-  return (
+
+  const defaultContent = (
     <>
-      {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}
-      {displayCount && (
-        <div className="heading heading--section heading--section--count">
-          <span className="section-number">{currentItemIndex + 1}</span>
-          <span className="section-total">/{listTotal}</span>
-        </div>
-      )}
       <div className="list__item list__item--full">
         {BuildPBComponents(pageBuilderComponents, {
           parent: { ...parent, itemId, itemEntity: entity },
@@ -47,9 +45,27 @@ const FullRenderItem = ({
           pageBuilderID
         })}
       </div>
-      {!!parsedPropsToDisplay.length && (
+      {!VariantComponent && !!parsedPropsToDisplay.length && (
         <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
       )}
+    </>
+  );
+
+  return (
+    <>
+      {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}
+      {displayCount && (
+        <div className="heading heading--section heading--section--count">
+          <span className="section-number">{currentItemIndex + 1}</span>
+          <span className="section-total">/{listTotal}</span>
+        </div>
+      )}
+      {VariantComponent ? (
+        <VariantComponent {...props}>{defaultContent}</VariantComponent>
+      ) : (
+        defaultContent
+      )}
+
       {shouldRenderBanner && <Banner {...bannerProps} renderCounter={bannerIndex} />}
     </>
   );

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

@@ -5,13 +5,32 @@ import BlazeLink from '../../../BlazeLink';
 import buildPaginationUrl from '../../helpers/build-pagination-url';
 import { NEXT_STRING, PREVIOUS_STRING } from '../../../../constants';
 
-const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onClick }) => {
-  const pages = buildPaginationItems({ name, numberOfPages, currentPage, query, url, onClick });
+const Classic = ({
+  name,
+  numberOfPages,
+  currentPage,
+  query,
+  url,
+  isLastPage,
+  onClick,
+  componentId
+}) => {
+  const pages = buildPaginationItems({
+    name,
+    numberOfPages,
+    currentPage,
+    query,
+    url,
+    onClick,
+    componentId
+  });
   const nextPage = currentPage + 1;
   const previousPage = currentPage - 1;
   const previousPageLink =
-    currentPage > 1 ? buildPaginationUrl(name, previousPage, query, url) : null;
-  const nextPageLink = !isLastPage ? buildPaginationUrl(name, nextPage, query, url) : null;
+    currentPage > 1 ? buildPaginationUrl(name, previousPage, query, url, componentId) : null;
+  const nextPageLink = !isLastPage
+    ? buildPaginationUrl(name, nextPage, query, url, componentId)
+    : null;
 
   return (
     <>
@@ -21,7 +40,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
           className="pagination_page-previous"
           onClick={onClick}
           shallow
-          scroll>
+          scroll={false}>
           {`${PREVIOUS_STRING} page`}
         </BlazeLink>
       )}
@@ -32,7 +51,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
           className="pagination_page-next"
           onClick={onClick}
           shallow
-          scroll>
+          scroll={false}>
           {`${NEXT_STRING} page`}
         </BlazeLink>
       )}
@@ -41,6 +60,7 @@ const Classic = ({ name, numberOfPages, currentPage, query, url, isLastPage, onC
 };
 
 Classic.propTypes = {
+  componentId: PropTypes.string.isRequired,
   numberOfPages: PropTypes.number.isRequired,
   currentPage: PropTypes.number.isRequired,
   name: PropTypes.string.isRequired,

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

@@ -1,10 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import Classic from './Classic';
 import LoadMore from './LoadMore';
-import { LOAD_MORE, SCROLL_OFFSET } from '../../../../constants';
+import { LOAD_MORE } from '../../../../constants';
 
 const ListPagination = ({
+  listRef,
   listTotal,
   name,
   itemsPerPage,
@@ -15,18 +16,12 @@ const ListPagination = ({
   ...props
 }) => {
   const [showPagination, setShowPagination] = useState(true);
-  const paginationRef = useRef(null);
 
   const isLoadMore = paginationType === LOAD_MORE;
+
   const scrollOnClick = () => {
-    if (!isLoadMore && paginationRef && paginationRef.current) {
-      window.scrollTo({
-        left: 0,
-        top:
-          window.pageYOffset -
-          SCROLL_OFFSET +
-          paginationRef.current.previousSibling.getBoundingClientRect().top
-      });
+    if (!isLoadMore && listRef && listRef.current) {
+      listRef.current.scrollIntoView();
     }
   };
 
@@ -51,13 +46,14 @@ const ListPagination = ({
   };
 
   return (
-    <div className="pagination" ref={paginationRef}>
+    <div className="pagination">
       {isLoadMore ? <LoadMore {...paginationProps} /> : <Classic {...paginationProps} />}
     </div>
   );
 };
 
 ListPagination.propTypes = {
+  listRef: PropTypes.object.isRequired,
   currentPage: PropTypes.number.isRequired,
   paginationType: PropTypes.string.isRequired,
   listTotal: PropTypes.number.isRequired,