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

package/src/components/MenuItem/MenuItemRender.js

@@ -1,22 +1,17 @@
 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]
@@ -26,32 +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 [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
+  const router = useRouter();
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+  const hasValidChildren = hasChildren(children);
 
-  useEffect(
-    () => {
-      if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
-    },
-    [children, isClickEvent, loadingUrl, openActiveSubmenus, router, shouldPreOpen, showMobileMenu]
-  );
+  useEffect(() => {
+    if (!showMobileMenu) setDisplayChildren(false);
+  }, [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) {
@@ -63,28 +49,30 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
-  const hasValidChildren = hasChildren(children);
-
-  const menuItemLinkClassname = classnames('menu--item--link', {
-    'menu--item--link--active': isActive,
-    'menu--item--link--active-parent': isActiveParent
-  });
+  const handleMobileClick = () => {
+    if (!urlToUse && hasValidChildren) {
+      setDisplayChildren(!displayChildren);
+    }
+  };
 
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      <div className={menuItemLinkClassname}>
-        {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/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

@@ -4,65 +4,70 @@ 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(
-    () => {
-      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);
-          if (collapsedSearch) {
-            setCollapsed(true);
-            setSearchTerm('');
-          }
+        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;
 
@@ -76,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}`);
       }
     }
   };
@@ -115,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/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/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/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,31 +133,35 @@ 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 ? `#${componentId}` : '');
+
+    scrollToFirstList(componentId);
     if (!newQuery) {
-      const baseQuery = `${currentUrl}${parsedHashBit}`;
+      const baseUrl = url || currentUrl;
+      const baseQuery = `${baseUrl}${parsedHashBit}`;
       setUrlPath(baseQuery);
       return router.push('/Resolver', baseQuery, { shallow: !url, scroll: false }).then(() => {
         setKey(`filter-${name}:${Date.now()}`); // remove after range component update
       });
     }
-    const newUrl = buildNewUrl(url, currentUrl, newQuery, hashBit);
+    const hashToUse = componentId;
+    const newUrl = buildNewUrl(url, currentUrl, newQuery, hashToUse);
     setUrlPath(newUrl);
     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);
     }