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

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 ? (

package/src/components/SearchFilter/SearchFilter/CloseMobileForm.js

@@ -1,17 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MdClose } from 'react-icons/md';
-import { MOBILE_REFINEMENT_TITLE } from '../constants';
+import { useTranslation } from '@blaze-cms/nextjs-components';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
-const CloseMobileForm = ({ handleClose }) => (
-  <div className="filter__header filter__header--mobile">
-    <p>{MOBILE_REFINEMENT_TITLE}</p>
+const CloseMobileForm = ({ handleClose }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
+  return (
+    <div className="filter__header filter__header--mobile">
+      <p>{t('MOBILE_REFINEMENT_TITLE')}</p>
 
-    <i role="button" onClick={handleClose} aria-label="Close">
-      <MdClose />
-    </i>
-  </div>
-);
+      <i role="button" onClick={handleClose} aria-label="Close">
+        <MdClose />
+      </i>
+    </div>
+  );
+};
 
 CloseMobileForm.propTypes = {
   handleClose: PropTypes.func.isRequired

package/src/components/SearchFilter/SearchFilter/FiltersList.js

@@ -15,90 +15,93 @@ const FiltersList = ({
 }) => {
   const { itemId } = useContext(MainContext);
 
-  return filters.map(({ type, label, propsToDisplay, elementTitle, ...otherProps }, index) => {
-    if (!propsToDisplay && !propsToDisplay.length) return null;
-    const dynamicKey = [itemId, index].join('-');
-    const isDataAvailable = !!data && Object.keys(data).length;
-    const dataAggregations = isDataAvailable ? data : null;
-    const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
+  return filters.map(
+    ({ type, label, propsToDisplay, elementTitle, unit, ...otherProps }, index) => {
+      if (!propsToDisplay && !propsToDisplay.length) return null;
+      const dynamicKey = [itemId, index].join('-');
+      const isDataAvailable = !!data && Object.keys(data).length;
+      const dataAggregations = isDataAvailable ? data : null;
+      const areAggregationsAvailable = isDataAvailable && !!dataAggregations;
 
-    switch (type) {
-      case TEXT_SEARCH:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--search">
-            <TextSearch
-              {...otherProps}
-              label={label}
-              elementTitle={elementTitle}
-              searchValue={filterValues[SEARCH_TERM]}
-              updateFilterValues={updateFilterValues}
-              filterValues={filterValues}
-            />
-          </div>
-        );
-
-      case CHECKBOX:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--checkboxes">
-            <Checkbox
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+      switch (type) {
+        case TEXT_SEARCH:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--search">
+              <TextSearch
+                {...otherProps}
+                label={label}
+                elementTitle={elementTitle}
+                searchValue={filterValues[SEARCH_TERM]}
+                updateFilterValues={updateFilterValues}
+                filterValues={filterValues}
+              />
+            </div>
+          );
 
-      case SELECT:
-        return (
-          <div
-            key={dynamicKey}
-            className="filter__section filter__section--search-refine filter__section--selects">
-            <SelectFilter
-              {...otherProps}
-              data={data}
-              prop={propsToDisplay[0]}
-              label={label}
-              elementTitle={elementTitle}
-              hasUrl={hasUrl}
-              filterValues={filterValues}
-              updateFilterValues={updateFilterValues}
-              shouldSearch={shouldSearch}
-            />
-          </div>
-        );
+        case CHECKBOX:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--checkboxes">
+              <Checkbox
+                {...otherProps}
+                data={data}
+                prop={propsToDisplay[0]}
+                label={label}
+                elementTitle={elementTitle}
+                hasUrl={hasUrl}
+                filterValues={filterValues}
+                updateFilterValues={updateFilterValues}
+                shouldSearch={shouldSearch}
+              />
+            </div>
+          );
 
-      case RANGE:
-        return (
-          !!areAggregationsAvailable && (
-            <div key={dynamicKey} className="range-slider__wrapper">
-              <Range
+        case SELECT:
+          return (
+            <div
+              key={dynamicKey}
+              className="filter__section filter__section--search-refine filter__section--selects">
+              <SelectFilter
                 {...otherProps}
-                dataAggregations={dataAggregations}
-                propsToDisplay={propsToDisplay}
+                data={data}
+                prop={propsToDisplay[0]}
                 label={label}
                 elementTitle={elementTitle}
-                entity={entity}
+                hasUrl={hasUrl}
                 filterValues={filterValues}
                 updateFilterValues={updateFilterValues}
                 shouldSearch={shouldSearch}
               />
             </div>
-          )
-        );
-      default:
-        return null;
+          );
+
+        case RANGE:
+          return (
+            !!areAggregationsAvailable && (
+              <div key={dynamicKey} className="range-slider__wrapper">
+                <Range
+                  {...otherProps}
+                  dataAggregations={dataAggregations}
+                  propsToDisplay={propsToDisplay}
+                  label={label}
+                  elementTitle={elementTitle}
+                  unit={unit}
+                  entity={entity}
+                  filterValues={filterValues}
+                  updateFilterValues={updateFilterValues}
+                  shouldSearch={shouldSearch}
+                />
+              </div>
+            )
+          );
+        default:
+          return null;
+      }
     }
-  });
+  );
 };
 
 FiltersList.propTypes = {

package/src/components/SearchFilter/SearchFilter/MobileFormToolbar.js

@@ -1,23 +1,27 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { RESET, SEARCH } from '../constants';
+import { useTranslation } from '@blaze-cms/nextjs-components';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
-const MobileFormToolbar = ({ formId, handleReset }) => (
-  <div className="filter__refine filter__refine--mobile-open">
-    <div
-      className="reset"
-      data-testid="reset-button"
-      role="button"
-      onClick={handleReset}
-      aria-label="Reset search filters">
-      {RESET}
-    </div>
+const MobileFormToolbar = ({ formId, handleReset }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
+  return (
+    <div className="filter__refine filter__refine--mobile-open">
+      <div
+        className="reset"
+        data-testid="reset-button"
+        role="button"
+        onClick={handleReset}
+        aria-label={t('RESET_ALL_FILTERS')}>
+        {t('RESET_ALL_FILTERS')}
+      </div>
 
-    <button className="search" type="submit" form={formId}>
-      {SEARCH}
-    </button>
-  </div>
-);
+      <button className="search" type="submit" form={formId}>
+        {t('SEARCH_MOBILE_BUTTON_TEXT')}
+      </button>
+    </div>
+  );
+};
 
 MobileFormToolbar.propTypes = {
   formId: PropTypes.string.isRequired,

package/src/components/SearchFilter/SearchFilter/ResetDesktopForm.js

@@ -1,27 +1,31 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FaRedoAlt } from 'react-icons/fa';
-import { RESET } from '../constants';
+import { useTranslation } from '@blaze-cms/nextjs-components';
+import { TRANSLATION_NAMESPACE } from '../../../constants';
 
-const ResetDesktopForm = ({ handleReset }) => (
-  <div className="filter__reset">
-    <button
-      type="button"
-      className="icon-button icon-button--reset"
-      title="reset--button"
-      data-testid="reset-icon"
-      onClick={handleReset}
-      aria-label="Reset search filters">
-      <i>
-        <FaRedoAlt />
-      </i>
-    </button>
+const ResetDesktopForm = ({ handleReset }) => {
+  const { t } = useTranslation(TRANSLATION_NAMESPACE);
+  return (
+    <div className="filter__reset">
+      <button
+        type="button"
+        className="icon-button icon-button--reset"
+        title="reset--button"
+        data-testid="reset-icon"
+        onClick={handleReset}
+        aria-label={t('RESET_ALL_FILTERS')}>
+        <i>
+          <FaRedoAlt />
+        </i>
+      </button>
 
-    <div role="button" onClick={handleReset} data-testid="reset-button">
-      {RESET}
+      <div role="button" onClick={handleReset} data-testid="reset-button">
+        {t('RESET_ALL_FILTERS')}
+      </div>
     </div>
-  </div>
-);
+  );
+};
 
 ResetDesktopForm.propTypes = {
   handleReset: PropTypes.func.isRequired