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

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,

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/List/helpers/build-query-booster.js

@@ -8,12 +8,11 @@ const buildQueryBooster = (props, data) => {
   const { function_score: { query, functions = [] } = {} } = parsedRawQuery;
 
   const boostedPropsFunctios = recencyBoostProperty.map(propToBoost => ({
-    gauss: {
+    exp: {
       [propToBoost]: {
-        origin: 'now',
-        scale: '30d',
-        offset: '7d',
-        decay: 0.5
+        scale: '14d',
+        decay: 0.99, // high value slow decay
+        offset: '7d'
       }
     }
   }));
@@ -21,7 +20,14 @@ const buildQueryBooster = (props, data) => {
   const updatedData = {
     function_score: {
       query: functions.length ? query : parsedRawQuery,
-      functions: [...functions, ...boostedPropsFunctios],
+      functions: [
+        ...functions,
+        ...boostedPropsFunctios,
+        {
+          weight: 0.01 // minimum score to avoid zeroing out
+        }
+      ],
+      score_mode: 'sum',
       boost_mode: 'multiply'
     }
   };

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/MenuItem/MenuItemRender.js

@@ -1,6 +1,7 @@
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { useRouter } from 'next/router';
 import { useStringTemplate } from '@blaze-cms/utils-handlebars';
 import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
 import { hasChildren } from '../../helpers';
@@ -15,20 +16,27 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     loading: loadingText,
     data: [textToUse]
   } = useStringTemplate(parent, [text]);
-
   const {
     loading: loadingUrl,
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
+  const router = useRouter();
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+  const hasValidChildren = hasChildren(children);
+
   useEffect(() => {
     if (!showMobileMenu) setDisplayChildren(false);
   }, [showMobileMenu]);
 
-  if (loadingUrl || loadingText) return '';
+  useEffect(() => {
+    if (isHoverEvent) {
+      setDisplayChildren(false);
+    }
+  }, [router.asPath, isHoverEvent]);
 
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+  if (loadingUrl || loadingText) return '';
 
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
@@ -40,23 +48,31 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
       }
     }
   };
-  const hasValidChildren = hasChildren(children);
+
+  const handleMobileClick = () => {
+    if (!urlToUse && hasValidChildren) {
+      setDisplayChildren(!displayChildren);
+    }
+  };
 
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      <div className="menu--item--link">
-        {urlToUse ? (
-          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent}>
-            {textToUse}
-          </span>
-        )}
+      <div
+        className="menu--item--link"
+        onClick={handleMobileClick}
+        role={!urlToUse && hasValidChildren ? 'button' : undefined}
+        tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
+        {urlToUse ? <BlazeLink href={urlToUse}>{textToUse}</BlazeLink> : <span>{textToUse}</span>}
+
         {hasValidChildren && (
           <i
             role="button"
             className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
+            onClick={e => {
+              e.stopPropagation();
+              setDisplayChildren(!displayChildren);
+            }}
+            tabIndex={0}>
             {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
           </i>
         )}

package/src/components/MenuItem/helpers/inject-helper-into-template.js

@@ -1,9 +1,19 @@
 const injectHelperIntoTemplate = (template, helper) => {
   if (!helper || !template) return template;
 
-  let result = template.replace(/{{{([^{}]+)}}}/g, `{{{${helper} $1}}}`);
+  // Inject helper into triple-stash expressions unless they are block/closing tags
+  let result = template.replace(/{{{([^{}]+)}}}/g, (match, inner) => {
+    const trimmed = inner.trim();
+    if (trimmed.startsWith('#') || trimmed.startsWith('/') || trimmed === 'else') return match; // skip block helpers and else
+    return `{{{${helper} ${inner}}}}`;
+  });
 
-  result = result.replace(/{{([^{}]+)}}(?!})/g, `{{${helper} $1}}`);
+  // Inject helper into double-stash expressions (excluding triple) unless block/closing tags
+  result = result.replace(/{{([^{}]+)}}(?!})/g, (match, inner) => {
+    const trimmed = inner.trim();
+    if (trimmed.startsWith('#') || trimmed.startsWith('/') || trimmed === 'else') return match; // skip block helpers and else
+    return `{{${helper} ${inner}}}`;
+  });
 
   return result;
 };

package/src/components/SearchContent/SearchContent.js

@@ -4,27 +4,37 @@ import { useRouter } from 'next/router';
 import { useDebounceSearch } from '@blaze-cms/plugin-search-ui';
 import SearchContentResults from './SearchContentResults';
 import SearchContentToggleIcon from './SearchContentToggleIcon';
+import { useAppSyncEventHook } from '../../hooks';
+
+const SearchContent = props => {
+  const {
+    entities,
+    searchInputWrapperMobile,
+    searchInputWrapperDesktop,
+    isMobile,
+    placeholder,
+    modifier,
+    collapsedSearch,
+    searchUrl,
+    navigateToSingleSearchResult
+  } = props;
 
-const SearchContent = ({
-  entities,
-  searchInputWrapperMobile,
-  searchInputWrapperDesktop,
-  isMobile,
-  placeholder,
-  modifier,
-  collapsedSearch,
-  searchUrl,
-  navigateToSingleSearchResult
-}) => {
   const searchContentRef = useRef(null);
   const [collapsed, setCollapsed] = useState(collapsedSearch);
   const [showResults, setShowResults] = useState(false);
   const router = useRouter();
 
+  const { runHook } = useAppSyncEventHook({
+    eventName: 'searchcontent:query-variables',
+    props,
+    returnFunction: true
+  });
+
   const { results, searchTerm, setSearchTerm, debouncedSearchTerm } = useDebounceSearch({
     entities,
     initialSearchTerm: '',
-    resultKeys: 'id, name, image { url }, url'
+    resultKeys: 'id, name, image { url }, url',
+    queryHook: runHook
   });
 
   useEffect(() => {
@@ -34,7 +44,6 @@ const SearchContent = ({
       if (collapsedSearch) setCollapsed(true);
     };
     router.events.on('routeChangeStart', handleRouteChange);
-
     return () => {
       router.events.off('routeChangeStart', handleRouteChange);
     };
@@ -44,15 +53,17 @@ const SearchContent = ({
     const handleClickOutside = event => {
       if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
         setShowResults(false);
-        if (collapsedSearch) {
+        setSearchTerm('');
+        if (
+          collapsedSearch &&
+          document.activeElement !== searchContentRef.current.querySelector('input')
+        ) {
           setCollapsed(true);
-          setSearchTerm('');
         }
       }
     };
 
     document.addEventListener('click', handleClickOutside);
-
     return () => {
       document.removeEventListener('click', handleClickOutside);
     };
@@ -70,7 +81,8 @@ const SearchContent = ({
       if (navigateToSingleSearchResult && results && results.length === 1 && results[0].url) {
         router.push(results[0].url);
       } else {
-        router.push(`${searchUrl || '/search'}?search_term=${e.target.value}`);
+        const searchUrlWithoutHash = (searchUrl || '/search').split('#')[0];
+        router.push(`${searchUrlWithoutHash}?search_term=${e.target.value}`);
       }
     }
   };
@@ -109,9 +121,15 @@ const SearchContent = ({
               name="search"
               placeholder={placeholder}
               value={searchTerm}
-              onChange={e => setSearchTerm(e.target.value)}
+              onChange={e => {
+                setSearchTerm(e.target.value);
+                setShowResults(true);
+              }}
               onKeyDown={handleKeyDown}
-              onFocus={() => setShowResults(true)}
+              onFocus={() => {
+                setShowResults(true);
+                if (collapsedSearch) setCollapsed(false);
+              }}
               data-testid="search-content-input"
             />
           )}

package/src/components/SearchContent/SearchContentResults.js

@@ -6,7 +6,7 @@ const SearchContentResults = ({ results, debouncedSearchTerm, onClick }) => {
   if (!debouncedSearchTerm) return null;
   const hasResults = results.length > 0;
   return (
-    <div className="search-content--results__wrapper">
+    <div className="search-content--results__wrapper" data-testid="search-content-results">
       <div className="search-content--results__wrapper--message">
         <div className="search-content--results__content">
           {hasResults ? (