@blaze-cms/react-page-builder 0.146.0-alpha.50 → 0.146.0-alpha.52

package/lib-es/variants/SlideSummary/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["dynamic","SlideSummary","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/SlideSummary/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst SlideSummary = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantSlideSummary\" */ './SlideSummary')\n  )\n};\nexport default SlideSummary;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,YAAY,GAAG;EACnBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,CAAC,oDAAqD,gBAAgB,CAC9E;AACF,CAAC;AACD,eAAeC,YAAY","ignoreList":[]}
+{"version":3,"file":"index.js","names":["dynamic","SlideSummary","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/SlideSummary/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst SlideSummary = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantSlideSummary\" */ './SlideSummary')\n  )\n};\nexport default SlideSummary;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,YAAY,GAAG;EACnBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,EAAC,oDAAqD,gBAAgB,CAC9E;AACF,CAAC;AACD,eAAeC,YAAY","ignoreList":[]}

package/lib-es/variants/ThumbnailCarousel/index.js

@@ -4,7 +4,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import dynamic from 'next/dynamic';
 const ThumbnailCarousel = {
   getSettings: componentSettings => _objectSpread({}, componentSettings),
-  VariantComponent: dynamic(() => import(/* webpackChunkName: "blazePbVariantThumbnailCarousel" */'./ThumbnailCarousel'))
+  VariantComponent: dynamic(() => import( /* webpackChunkName: "blazePbVariantThumbnailCarousel" */'./ThumbnailCarousel'))
 };
 export default ThumbnailCarousel;
 //# sourceMappingURL=index.js.map

package/lib-es/variants/ThumbnailCarousel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["dynamic","ThumbnailCarousel","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst ThumbnailCarousel = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantThumbnailCarousel\" */ './ThumbnailCarousel')\n  )\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,iBAAiB,GAAG;EACxBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,CAAC,yDAA0D,qBAAqB,CACxF;AACF,CAAC;AAED,eAAeC,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["dynamic","ThumbnailCarousel","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst ThumbnailCarousel = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantThumbnailCarousel\" */ './ThumbnailCarousel')\n  )\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,iBAAiB,GAAG;EACxBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,EAAC,yDAA0D,qBAAqB,CACxF;AACF,CAAC;AAED,eAAeC,iBAAiB","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-alpha.50",
+  "version": "0.146.0-alpha.52",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -45,6 +45,7 @@
     "@blaze-react/select": "0.8.0-alpha.80",
     "@blaze-react/utils": "0.5.15",
     "core-js": "^3.2.1",
+    "cssesc": "^3.0.0",
     "dayjs": "^1.11.11",
     "entities": "^2.0.0",
     "html-react-parser": "^3.0.4",
@@ -90,5 +91,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "1599a916aa4fd9dbaace05ea2c6892ddd5e26dfb"
+  "gitHead": "f0e8234a5233884e820519c2aa24b09c25f8e69c"
 }

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,65 +29,83 @@ const ListRender = props => {
     azFilter,
     displayTotal
   } = props;
+  const listRef = useRef(null);
   const { data: updatedVariables } = useAppSyncEventHook({
     eventName: 'list:query-variables',
     data: variables,
     props
   });
   const boostedVariables = buildQueryBooster(props, updatedVariables);
-  const { data = {}, error, loading, fetchMore } = useQuery(action, {
-    variables: boostedVariables
-  });
+  const { data = { [actionKey]: { results: [] }, total: 0 }, error, loading, fetchMore } = useQuery(
+    action,
+    {
+      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/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();
     }
   };
 
@@ -54,13 +49,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,

package/src/components/List/helpers/build-pagination-items.js

@@ -3,7 +3,15 @@ import BlazeLink from '../../BlazeLink';
 import buildPaginationUrl from './build-pagination-url';
 import { PAGINATION_DISPLAY_LIMIT, PAGINATION_DIFFERENCE } from '../../../constants';
 
-const buildPaginationItems = ({ name, numberOfPages, currentPage, query, url, onClick }) => {
+const buildPaginationItems = ({
+  name,
+  numberOfPages,
+  currentPage,
+  query,
+  url,
+  onClick,
+  componentId
+}) => {
   const pages = [];
   const paginationDifference =
     currentPage > PAGINATION_DIFFERENCE ? currentPage - PAGINATION_DIFFERENCE : 0;
@@ -13,7 +21,7 @@ const buildPaginationItems = ({ name, numberOfPages, currentPage, query, url, on
   for (let index = 0; index < numberOfPages; index += 1) {
     const page = index + 1 + paginationDifference;
     if (pages.length < PAGINATION_DISPLAY_LIMIT && page <= numberOfPages) {
-      const href = buildPaginationUrl(name, page, query, url);
+      const href = buildPaginationUrl(name, page, query, url, componentId);
       const pageHtml =
         page === currentPage ? (
           <span key={page} className="pagination_page-item--current">
@@ -26,7 +34,7 @@ const buildPaginationItems = ({ name, numberOfPages, currentPage, query, url, on
             className="pagination_page-item"
             onClick={onClick}
             shallow
-            scroll
+            scroll={false}
             ariaLabel={`Page ${page}`}>
             {page}
           </BlazeLink>

package/src/components/List/helpers/build-pagination-url.js

@@ -1,10 +1,10 @@
 import { stringify } from 'query-string';
 import { PB_QUERY_CONST, PAGINATION_QUERY_CONST } from '../../../constants';
 
-const buildPaginationUrl = (name, page, query, url) => {
+const buildPaginationUrl = (name, page, query, url, componentId) => {
   const newQuery = { ...query, [`${PB_QUERY_CONST}[${name}]${PAGINATION_QUERY_CONST}`]: page };
   const stringQuery = stringify(newQuery);
-  return `${url}?${stringQuery}`;
+  return `${url}?${stringQuery}${componentId ? `#${componentId}` : ''}`;
 };
 
 export default buildPaginationUrl;

package/src/components/Loading/index.js

@@ -1,3 +1,3 @@
-import Loading from './Loading';
+import dynamic from 'next/dynamic';
 
-export default Loading;
+export default dynamic(() => import(/* webpackChunkName: "blazePbLoading" */ './Loading'));

package/src/components/SearchFilter/SearchFilterContainer.js

@@ -19,10 +19,10 @@ import {
   getInheritedFilters,
   getQueryProps,
   buildRawQueryStringified,
-  buildFiltersQuery
+  buildFiltersQuery,
+  getComponentId
 } from '../../helpers';
 import { RAW_RESULTS } from './constants';
-import { SCROLL_OFFSET } from '../../constants';
 import searchFilterReducer from './searchFilterReducer';
 import { useGetEntitySchemasAsObj } from '../../hooks';
 
@@ -133,10 +133,13 @@ const SearchFilterContainer = ({
   }
 
   const handleSearch = newQuery => {
+    const componentId = listComponentName ? getComponentId(listComponentName) : '';
     setDisplaySearchFilter(false);
     const hashBit = asPath.split('#')[1] || '';
-    const parsedHashBit = hashBit ? `#${hashBit}` : '';
-    scrollToFirstList();
+    let parsedHashBit = hashBit ? `#${hashBit}` : '';
+    parsedHashBit = parsedHashBit || `#${componentId}`;
+
+    scrollToFirstList(componentId);
     if (!newQuery) {
       const baseQuery = `${currentUrl}${parsedHashBit}`;
       setUrlPath(baseQuery);
@@ -149,15 +152,14 @@ const SearchFilterContainer = ({
     return router.push('/Resolver', newUrl, { shallow: !url, scroll: false });
   };
 
-  const scrollToFirstList = () => {
-    const [list] = document.getElementsByClassName('list-top');
+  const scrollToFirstList = componentId => {
+    const list = componentId
+      ? document.getElementById(componentId)
+      : document.getElementsByClassName('list-top')[0];
     const shouldScrollToFirstList = !url && list;
 
     if (shouldScrollToFirstList) {
-      window.scrollTo({
-        left: 0,
-        top: window.pageYOffset - SCROLL_OFFSET + list.getBoundingClientRect().top
-      });
+      list.scrollIntoView();
     } else {
       window.scrollTo(0, 0);
     }

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

@@ -22,7 +22,16 @@ const buildUrlQuery = (filterValues = {}, filters = [], listComponentName = '',
   });
 
   Object.keys(query).forEach(key => {
-    if (queryKeys.indexOf(key) === -1) newQuery.push(`${key}=${query[key]}`);
+    if (queryKeys.indexOf(key) !== -1) return;
+
+    let shouldAdd = true;
+    if (!listComponentName) {
+      shouldAdd = !key.endsWith('[page]');
+    } else {
+      shouldAdd = !key.includes(listComponentName);
+    }
+
+    if (shouldAdd) newQuery.push(`${key}=${query[key]}`);
   });
 
   return newQuery.join('&');

package/src/constants/index.js

@@ -165,8 +165,6 @@ const AZ = [
 
 const AZ_DEFAULT_PROP = 'name';
 
-const SCROLL_OFFSET = process.env.BLAZE_SCROLL_OFFSET || 50;
-
 const BANNER_LOADING = 'loading';
 const BANNER_EMPTY = 'empty';
 const BANNER_LOADED = 'loaded';
@@ -178,6 +176,8 @@ const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,2
 const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 const SIZE = process.env.BLAZE_PB_SEARCH_FILETER_AGG_SIZE || 500;
 
+const COMPONENT_ID_PREFIX = 'pb-';
+
 export {
   BANNER_LOADING,
   BANNER_EMPTY,
@@ -279,12 +279,12 @@ export {
   AZ_QUERY_CONST,
   AZ_DEFAULT_PROP,
   AZ,
-  SCROLL_OFFSET,
   ANCHOR_TAG,
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
   DATA_SUMMARY_URL_REGEX,
   DATA_SUMMARY_TEL_REGEX,
   VIMEO_OEMBED_URL,
-  SIZE
+  SIZE,
+  COMPONENT_ID_PREFIX
 };

package/src/helpers/build-query-fields.js

@@ -6,7 +6,7 @@ const buildQueryFields = (sanitizedEntityFields, entityTypes, isFull) =>
       ${sanitizedEntityFields}
       __typename
       id
-      ${isFull ? 'pageBuilderComponents' : ''}
+     ${isFull ? 'pageBuilderComponents: preparedPageBuilderComponents' : ''}
     }`
     )}
   },

package/src/helpers/get-component-id.js

@@ -0,0 +1,9 @@
+import cssesc from 'cssesc';
+import { COMPONENT_ID_PREFIX } from '../constants';
+
+const getComponentId = componentName =>
+  cssesc(`${COMPONENT_ID_PREFIX}${componentName}`, {
+    isIdentifier: true
+  });
+
+export default getComponentId;

package/src/helpers/index.js

@@ -61,3 +61,4 @@ export { default as shouldReturn } from './should-return';
 export { default as shouldSkipSingleQuery } from './should-skip-single-query';
 export { default as buildRawQueryStringified } from './build-raw-query-stringified';
 export { default as buildFiltersQuery } from './build-filters-query';
+export { default as getComponentId } from './get-component-id';

package/src/index.js

@@ -25,7 +25,8 @@ export {
   buildFiltersQuery,
   getUnpublishedEntityName,
   renderChildren,
-  hasChildren
+  hasChildren,
+  getComponentId
 } from './helpers';
 export { withTitle } from './HOC';
 export { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';

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

@@ -4,8 +4,9 @@ exports[`ListRender component should not render a List if no actionKey match is
 
 exports[`ListRender component should not render a List with total if displayTotal is true 1`] = `
 <DocumentFragment>
-  <span
+  <div
     class="list-top"
+    id="pb-list"
   />
   <div
     class="list_total_results w-full text-left p-4"
@@ -23,8 +24,9 @@ exports[`ListRender component should not render a List with total if displayTota
 
 exports[`ListRender component should render a List based on passed parameters 1`] = `
 <DocumentFragment>
-  <span
+  <div
     class="list-top"
+    id="pb-list"
   />
   <div>
     Mocked List Comp