@blaze-cms/react-page-builder 0.146.0-translations.8 → 0.147.0-rc-eagle.2

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

@@ -92,10 +92,8 @@ const ListFactory = props => {
     error: schemasError
   } = useGetEntitySchemasAsObj([updatedParentEntity, ...entitiesToUse]);
 
-  const {
-    [updatedParentEntity]: currentSchema = {},
-    [filterEntity]: filterEntitySchema = {}
-  } = mainSchemas;
+  const { [updatedParentEntity]: currentSchema = {}, [filterEntity]: filterEntitySchema = {} } =
+    mainSchemas;
 
   const {
     data: requiredSchema = {},
@@ -119,13 +117,14 @@ const ListFactory = props => {
     skip: schemasLoading || (!inheritedFilters.length && queryProps === ID)
   });
 
-  const { data: itemListData = {}, error: itemListError, loading: itemListLoading } = useQuery(
-    getItemList,
-    {
-      variables: { id: itemListId },
-      skip: !itemListId
-    }
-  );
+  const {
+    data: itemListData = {},
+    error: itemListError,
+    loading: itemListLoading
+  } = useQuery(getItemList, {
+    variables: { id: itemListId },
+    skip: !itemListId
+  });
 
   if (!hasRequiredItemListDetails({ itemListName, router, itemListId, queryItemListId })) return '';
 

package/src/components/List/ListRender.js

@@ -36,12 +36,14 @@ const ListRender = props => {
     props
   });
   const boostedVariables = buildQueryBooster(props, updatedVariables);
-  const { data = { [actionKey]: { results: [] }, total: 0 }, error, loading, fetchMore } = useQuery(
-    action,
-    {
-      variables: boostedVariables
-    }
-  );
+  const {
+    data = { [actionKey]: { results: [] }, total: 0 },
+    error,
+    loading,
+    fetchMore
+  } = useQuery(action, {
+    variables: boostedVariables
+  });
 
   if (loading && !listRef.current) {
     // don't render if loading for the first time with no reference

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

@@ -45,10 +45,9 @@ const FullRenderItem = props => {
           pageBuilderID
         })}
       </div>
-      {!VariantComponent &&
-        !!parsedPropsToDisplay.length && (
-          <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
-        )}
+      {!VariantComponent && !!parsedPropsToDisplay.length && (
+        <>{parsedPropsToDisplay.map(prop => (prop ? <span key={prop}>{prop}</span> : null))}</>
+      )}
     </>
   );
 

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

@@ -25,12 +25,9 @@ const ListPagination = ({
     }
   };
 
-  useEffect(
-    () => {
-      if (isInfinite) setShowPagination(false);
-    },
-    [isInfinite]
-  );
+  useEffect(() => {
+    if (isInfinite) setShowPagination(false);
+  }, [isInfinite]);
 
   if (!showPagination) return null;
   const totalRecordsToFetch = limitToUse || listTotal;

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

@@ -15,15 +15,13 @@ const LoadMore = ({ name, currentPage, query, url, triggerInfiniteScroll, isLast
   };
 
   return (
-    <>
-      <BlazeLink
-        className="pagination_load-more"
-        role="button"
-        href={nextPageLink}
-        onClick={loadMoreItems}>
-        {LOAD_MORE_STRING}
-      </BlazeLink>
-    </>
+    <BlazeLink
+      className="pagination_load-more"
+      role="button"
+      href={nextPageLink}
+      onClick={loadMoreItems}>
+      {LOAD_MORE_STRING}
+    </BlazeLink>
   );
 };
 

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/List/helpers/sort-aggs.js

@@ -5,8 +5,7 @@ const sortAggs = data => {
     searchPublishedContent: {
       rawResults: { aggregations: { azCount: { buckets = [] } = {} } = {} } = {}
     } = {}
-  } =
-    data || {};
+  } = data || {};
 
   return [...buckets].sort((a, b) => {
     if (Number(a.key) || specialCheck.test(a.key)) return 1;

package/src/components/Menu/Menu.js

@@ -11,7 +11,6 @@ import BlazeLink from '../BlazeLink';
 const Menu = ({
   children,
   collapse,
-  openActiveSubmenus,
   modifier,
   mobileMenuModifier,
   mobileMenuChildrenModifier,
@@ -29,17 +28,14 @@ const Menu = ({
   const router = useRouter();
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
-  useEffect(
-    () => {
-      const handleRouteChange = () => setShowMobileMenu(false);
-      router.events.on('routeChangeStart', handleRouteChange);
+  useEffect(() => {
+    const handleRouteChange = () => setShowMobileMenu(false);
+    router.events.on('routeChangeStart', handleRouteChange);
 
-      return () => {
-        router.events.off('routeChangeStart', handleRouteChange);
-      };
-    },
-    [router.events]
-  );
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [router.events]);
 
   const shouldDisplayChildren = collapse ? showMobileMenu : true;
 
@@ -55,7 +51,7 @@ const Menu = ({
   });
 
   return (
-    <MenuContext.Provider value={{ showMobileMenu, openActiveSubmenus }}>
+    <MenuContext.Provider value={{ showMobileMenu }}>
       <div className={menuWrapperClasses}>
         {collapse && (
           <div className="menu--mobile-wrapper">
@@ -76,12 +72,11 @@ const Menu = ({
             </div>
           </div>
         )}
-        {logoOnMobile &&
-          !showMobileMenu && (
-            <Link href="/" name="mobile menu">
-              <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
-            </Link>
-          )}
+        {logoOnMobile && !showMobileMenu && (
+          <Link href="/" name="mobile menu">
+            <img src={logoOnMobileUrl} alt={logoOnMobileAlt} className={logoOnMobileModifier} />
+          </Link>
+        )}
 
         <div className="menu--desktop-wrapper">
           <ul className={childModifiers}>
@@ -104,7 +99,6 @@ const Menu = ({
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
-  openActiveSubmenus: PropTypes.bool.isRequired,
   logoOnMobile: PropTypes.bool.isRequired,
   logoOnDesktop: PropTypes.bool,
   logoOnMobileUrl: PropTypes.string,

package/src/components/Menu/MenuContext.js

@@ -1,5 +1,5 @@
 import React from 'react';
 
-const MenuContext = React.createContext({ showMobileMenu: false, openActiveSubmenus: false });
+const MenuContext = React.createContext({ showMobileMenu: false });
 
 export default MenuContext;

package/src/components/MenuItem/MenuItemRender.js

@@ -1,23 +1,17 @@
-/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import classnames from 'classnames';
 import { useRouter } from 'next/router';
 import { useStringTemplate } from '@blaze-cms/utils-handlebars';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN, CLICK } from '../../constants';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
 import { hasChildren } from '../../helpers';
 import BlazeLink from '../BlazeLink';
 import MenuContext from '../Menu/MenuContext';
-import { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild } from './helpers';
+import { injectHelperIntoTemplate } from './helpers';
 
 const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
-  const router = useRouter();
-  const { showMobileMenu, openActiveSubmenus } = useContext(MenuContext);
-
-  const isHoverEvent = eventType === HOVER;
-  const isClickEvent = eventType === CLICK;
-
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
   const {
     loading: loadingText,
     data: [textToUse]
@@ -27,33 +21,23 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
-  const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
-  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
+  const router = useRouter();
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
   const hasValidChildren = hasChildren(children);
 
-  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
+  useEffect(() => {
+    if (!showMobileMenu) setDisplayChildren(false);
+  }, [showMobileMenu]);
 
-  useEffect(
-    () => {
-      if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
-    },
-    [children, isClickEvent, loadingUrl, openActiveSubmenus, router, shouldPreOpen, showMobileMenu]
-  );
-
-  useEffect(
-    () => {
-      if (isHoverEvent) {
-        setDisplayChildren(false);
-      }
-    },
-    [router.asPath, isHoverEvent]
-  );
+  useEffect(() => {
+    if (isHoverEvent) {
+      setDisplayChildren(false);
+    }
+  }, [router.asPath, isHoverEvent]);
 
   if (loadingUrl || loadingText) return '';
 
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
   const handleItemEvent = ({ type }) => {
     if (isHoverEvent) {
       if (type === MOUSE_ENTER) {
@@ -71,25 +55,15 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
-  const menuItemLinkClassname = classnames('menu--item--link', {
-    'menu--item--link--active': isActive,
-    'menu--item--link--active-parent': isActiveParent
-  });
-
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
       <div
-        className={menuItemLinkClassname}
+        className="menu--item--link"
         onClick={handleMobileClick}
         role={!urlToUse && hasValidChildren ? 'button' : undefined}
         tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
-        {urlToUse ? (
-          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent}>
-            {textToUse}
-          </span>
-        )}
+        {urlToUse ? <BlazeLink href={urlToUse}>{textToUse}</BlazeLink> : <span>{textToUse}</span>}
+
         {hasValidChildren && (
           <i
             role="button"

package/src/components/MenuItem/helpers/index.js

@@ -1,5 +1,3 @@
 import injectHelperIntoTemplate from './inject-helper-into-template';
-import isUrlPathMatch from './isUrlPathMatch';
-import hasActiveChild from './has-active-child';
 
-export { injectHelperIntoTemplate, isUrlPathMatch, hasActiveChild };
+export { injectHelperIntoTemplate };

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/ModalAdapter/index.js

@@ -1,5 +1,5 @@
 import dynamic from 'next/dynamic';
 
-export default dynamic(() =>
-  import(/* webpackChunkName: "blazePbModalAdaptor" */ './ModalAdapter')
+export default dynamic(
+  () => import(/* webpackChunkName: "blazePbModalAdaptor" */ './ModalAdapter')
 );

package/src/components/SearchContent/SearchContent.js

@@ -37,43 +37,37 @@ const SearchContent = props => {
     queryHook: runHook
   });
 
-  useEffect(
-    () => {
-      const handleRouteChange = () => {
-        setSearchTerm('');
+  useEffect(() => {
+    const handleRouteChange = () => {
+      setSearchTerm('');
+      setShowResults(false);
+      if (collapsedSearch) setCollapsed(true);
+    };
+    router.events.on('routeChangeStart', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeStart', handleRouteChange);
+    };
+  }, [collapsedSearch, router.events, setSearchTerm]);
+
+  useEffect(() => {
+    const handleClickOutside = event => {
+      if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
         setShowResults(false);
-        if (collapsedSearch) setCollapsed(true);
-      };
-      router.events.on('routeChangeStart', handleRouteChange);
-      return () => {
-        router.events.off('routeChangeStart', handleRouteChange);
-      };
-    },
-    [collapsedSearch, router.events, setSearchTerm]
-  );
-
-  useEffect(
-    () => {
-      const handleClickOutside = event => {
-        if (searchContentRef.current && !searchContentRef.current.contains(event.target)) {
-          setShowResults(false);
-          setSearchTerm('');
-          if (
-            collapsedSearch &&
-            document.activeElement !== searchContentRef.current.querySelector('input')
-          ) {
-            setCollapsed(true);
-          }
+        setSearchTerm('');
+        if (
+          collapsedSearch &&
+          document.activeElement !== searchContentRef.current.querySelector('input')
+        ) {
+          setCollapsed(true);
         }
-      };
-
-      document.addEventListener('click', handleClickOutside);
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-      };
-    },
-    [collapsedSearch, setSearchTerm]
-  );
+      }
+    };
+
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [collapsedSearch, setSearchTerm]);
 
   const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
 
@@ -127,9 +121,15 @@ const SearchContent = props => {
               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/SearchFilter.js

@@ -53,15 +53,12 @@ const SearchFilter = ({
     doSubmit(newValues);
   }, 200);
 
-  useEffect(
-    () => {
-      if (filterValues.shouldSearch) {
-        handleSubmit(filterValues);
-        setAppliedFilters({ type: 'resetSearch' });
-      }
-    },
-    [filterValues, handleSubmit, setAppliedFilters]
-  );
+  useEffect(() => {
+    if (filterValues.shouldSearch) {
+      handleSubmit(filterValues);
+      setAppliedFilters({ type: 'resetSearch' });
+    }
+  }, [filterValues, handleSubmit, setAppliedFilters]);
 
   const formClass = classnames('filter__form filter__form--initial', {
     'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,
@@ -221,17 +218,16 @@ const SearchFilter = ({
         {displaySearchFilter && <MobileFormToolbar formId={formId} handleReset={handleReset} />}
       </form>
 
-      {isCollapsedOnResponsive &&
-        !displaySearchFilter && (
-          <div
-            className="filter__refine filter__refine--mobile-close"
-            data-testid="refine-mobile"
-            aria-label={t('REFINE_SEARCH')}>
-            <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-              {mobileRefineButtonText || t('REFINE_SEARCH')}
-            </div>
+      {isCollapsedOnResponsive && !displaySearchFilter && (
+        <div
+          className="filter__refine filter__refine--mobile-close"
+          data-testid="refine-mobile"
+          aria-label={t('REFINE_SEARCH')}>
+          <div role="button" onClick={() => setDisplaySearchFilter(true)}>
+            {mobileRefineButtonText || t('REFINE_SEARCH')}
           </div>
-        )}
+        </div>
+      )}
     </>
   );
 };

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

@@ -1,6 +1,7 @@
-const buildNewUrl = (url, currentUrl, queryParams, hashBit) => {
+const buildNewUrl = (url, currentUrl, queryParams, newHashBit) => {
   const encodedQuery = encodeURI(queryParams);
-  const baseUrl = url || currentUrl;
+  const [baseUrl, urlHash] = (url || currentUrl).split('#');
+  const hashBit = newHashBit || urlHash || '';
   const newUrl = encodedQuery ? `${baseUrl}?${encodedQuery}` : `${baseUrl}`;
   return hashBit ? `${newUrl}#${hashBit}` : newUrl;
 };

package/src/components/Video/providers/Vimeo/VimeoProvider.js

@@ -11,29 +11,26 @@ const VimeoProvider = ({ url, autoplay, loop, imageData }) => {
   const [videoError, setVideoError] = useState(null);
   const [shouldRenderVideo, setShouldRenderVideo] = useState(!!autoplay);
 
-  useEffect(
-    () => {
-      async function fetchVideoData(videoUrl) {
-        try {
-          const res = await fetch(videoUrl);
-          const data = await res.json();
-          setVideoData(data);
-        } catch (err) {
-          setVideoError(err);
-        }
+  useEffect(() => {
+    async function fetchVideoData(videoUrl) {
+      try {
+        const res = await fetch(videoUrl);
+        const data = await res.json();
+        setVideoData(data);
+      } catch (err) {
+        setVideoError(err);
       }
-      if (url) {
-        const currentHeight = inputEl.current.clientHeight;
-        const urlWithParams = addExtraParamsToUrl(url, {
-          autoplay: true,
-          loop,
-          height: currentHeight
-        });
-        fetchVideoData(urlWithParams);
-      }
-    },
-    [autoplay, loop, url]
-  );
+    }
+    if (url) {
+      const currentHeight = inputEl.current.clientHeight;
+      const urlWithParams = addExtraParamsToUrl(url, {
+        autoplay: true,
+        loop,
+        height: currentHeight
+      });
+      fetchVideoData(urlWithParams);
+    }
+  }, [autoplay, loop, url]);
 
   const { thumbnail_url_with_play_button: thumbnailUrl, html = '' } = videoData || {};
   const imageUrl = imageData && imageData.url;