@blaze-cms/react-page-builder 0.146.0-core-styles.44 → 0.146.0-node18-core-styles.0

package/src/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { components, Modal } from '@blaze-cms/react-page-builder';
+import { GRAPH_QL_ERROR, PRIORITY_HIGH } from '../../constants';
+
+const { code: CodeComponent } = components;
+
+const ErrorMessage = ({ error, setErrorMessage }) => {
+  const errorMessageToDisplay =
+    typeof error === 'object' && error.message ? error.message.replace(GRAPH_QL_ERROR, '') : error;
+
+  const shouldDisplayInModal =
+    typeof error === 'object' && error.graphQLErrors
+      ? error.graphQLErrors.some(err => {
+          const { priority } = err.extensions.exception;
+          return priority === PRIORITY_HIGH;
+        })
+      : false;
+
+  return (
+    <div className="error_message">
+      {shouldDisplayInModal ? (
+        <Modal isSimple onClose={() => setErrorMessage(false)}>
+          <CodeComponent code={errorMessageToDisplay} />
+        </Modal>
+      ) : (
+        <CodeComponent code={errorMessageToDisplay} />
+      )}
+    </div>
+  );
+};
+
+export default ErrorMessage;

package/src/components/ErrorMessage/index.js

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

package/src/components/Image/GlobalLightbox/GlobalLightbox.js

@@ -1,4 +1,4 @@
-import React, { useState, Fragment } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
 import { FaTimes } from 'react-icons/fa';
@@ -66,7 +66,7 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
   const showNext = index !== images.length - 1;
   const showPrevious = !!index;
 
-  const imageCounter = `${index + 1} of ${images.length}`;
+  const imageCounter = `${index + 1} / ${images.length}`;
 
   return (
     <>
@@ -123,14 +123,12 @@ const GlobalLightbox = ({ images, onClose, selectedImage, metaTitle, parentName
                                   />
                                 </BlazeLink>
                               ) : (
-                                <Fragment>
-                                  <ResponsiveImage
-                                    src={imageUrl}
-                                    alt={altText}
-                                    sizeKey="globalLightbox"
-                                    data-testid="globalLightboxImage"
-                                  />
-                                </Fragment>
+                                <ResponsiveImage
+                                  src={imageUrl}
+                                  alt={altText}
+                                  sizeKey="globalLightbox"
+                                  data-testid="globalLightboxImage"
+                                />
                               )}
                             </div>
                           </div>

package/src/components/Image/GlobalLightbox/index.js

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

package/src/components/Image/Image.js

@@ -36,10 +36,12 @@ const Image = ({
   const [displayLightbox, setDisplayLightbox] = useState(false);
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
 
-  const { caption, altText, hrefUrl, credits: imageDataCredits } = getImageData(
-    otherProps,
-    imageData
-  );
+  const {
+    caption,
+    altText,
+    hrefUrl,
+    credits: imageDataCredits
+  } = getImageData(otherProps, imageData);
 
   const href = url || hrefUrl;
 

package/src/components/Image/ImageFactory.js

@@ -41,11 +41,11 @@ const ImageFactory = props => {
     : getImageIds(imageRelation, relationData, imageId);
   const imageIds =
     updatedImageIds && updatedImageIds.length === 1 ? updatedImageIds[0] : updatedImageIds;
-  const { data: { getFile, getFiles = [] } = {}, loading, error } = useGetImages(
-    imageIds,
-    updatedImageIds && updatedImageIds.length > 1,
-    !!imgSrcToUse
-  );
+  const {
+    data: { getFile, getFiles = [] } = {},
+    loading,
+    error
+  } = useGetImages(imageIds, updatedImageIds && updatedImageIds.length > 1, !!imgSrcToUse);
   if (error) return error.message;
   if (loading) return '';
 

package/src/components/ItemList/hooks/use-item-list-id.js

@@ -5,21 +5,18 @@ const useItemListId = ({ listName }) => {
   const idFromStorage = getItemListId(listName);
   const [listId, setListId] = useState(idFromStorage);
 
-  useEffect(
-    () => {
-      const storageEventHandler = () => {
-        const newId = getItemListId(listName);
-        setListId(newId);
-      };
+  useEffect(() => {
+    const storageEventHandler = () => {
+      const newId = getItemListId(listName);
+      setListId(newId);
+    };
 
-      window.addEventListener('storage', storageEventHandler);
+    window.addEventListener('storage', storageEventHandler);
 
-      return () => {
-        window.removeEventListener('storage', storageEventHandler);
-      };
-    },
-    [listName]
-  );
+    return () => {
+      window.removeEventListener('storage', storageEventHandler);
+    };
+  }, [listName]);
 
   return { listId };
 };

package/src/components/Layout/LayoutFactory.js

@@ -2,8 +2,8 @@ import React from 'react';
 import dynamic from 'next/dynamic';
 import Layout from './Layout';
 
-const LayoutWithStickyTimer = dynamic(() =>
-  import(/* webpackChunkName: "blazePbLayoutWithStickyTimer" */ './LayoutWithStickyTimer')
+const LayoutWithStickyTimer = dynamic(
+  () => import(/* webpackChunkName: "blazePbLayoutWithStickyTimer" */ './LayoutWithStickyTimer')
 );
 
 const LayoutFactory = props => {

package/src/components/Layout/LayoutWithStickyTimer.js

@@ -8,21 +8,18 @@ const LayoutWithStickyTimer = ({ sticky, stickyTimer, ...otherProps }) => {
   const [isIntersecting, outerRef] = useInView({});
   const [isSticky, setIsSticky] = useState(sticky);
 
-  useEffect(
-    () => {
-      if (isIntersecting && sticky && !!stickyTimer) {
-        setIsSticky(true);
-        const timer = setTimeout(() => {
-          setIsSticky(false);
-        }, stickyTimer);
+  useEffect(() => {
+    if (isIntersecting && sticky && !!stickyTimer) {
+      setIsSticky(true);
+      const timer = setTimeout(() => {
+        setIsSticky(false);
+      }, stickyTimer);
 
-        return () => {
-          clearTimeout(timer);
-        };
-      }
-    },
-    [isIntersecting, stickyTimer, sticky]
-  );
+      return () => {
+        clearTimeout(timer);
+      };
+    }
+  }, [isIntersecting, stickyTimer, sticky]);
 
   return <Layout {...otherProps} sticky={isSticky} ref={sticky ? outerRef : null} />;
 };

package/src/components/List/ListFactory.js

@@ -89,10 +89,8 @@ const ListFactory = props => {
     error: schemasError
   } = useGetEntitySchemasAsObj([updatedParentEntity, ...entitiesToUse]);
 
-  const {
-    [updatedParentEntity]: currentSchema = {},
-    [filterEntity]: filterEntitySchema = {}
-  } = mainSchemas;
+  const { [updatedParentEntity]: currentSchema = {}, [filterEntity]: filterEntitySchema = {} } =
+    mainSchemas;
 
   const {
     data: requiredSchema = {},
@@ -116,13 +114,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

@@ -34,7 +34,12 @@ const ListRender = props => {
     props
   });
   const boostedVariables = buildQueryBooster(props, updatedVariables);
-  const { data = {}, error, loading, fetchMore } = useQuery(action, {
+  const {
+    data = {},
+    error,
+    loading,
+    fetchMore
+  } = useQuery(action, {
     variables: boostedVariables
   });
 

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

@@ -30,12 +30,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/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

@@ -29,17 +29,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;
 
@@ -76,12 +73,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}>

package/src/components/MenuItem/MenuItemRender.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
@@ -22,7 +21,6 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     loading: loadingText,
     data: [textToUse]
   } = useStringTemplate(parent, [text]);
-
   const {
     loading: loadingUrl,
     data: [urlToUse]
@@ -34,12 +32,23 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
 
-  useEffect(
-    () => {
-      if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
-    },
-    [children, isClickEvent, loadingUrl, openActiveSubmenus, router]
-  );
+  useEffect(() => {
+    if (!showMobileMenu && !shouldPreOpen) setDisplayChildren(false);
+  }, [
+    children,
+    isClickEvent,
+    loadingUrl,
+    openActiveSubmenus,
+    router,
+    shouldPreOpen,
+    showMobileMenu
+  ]);
+
+  useEffect(() => {
+    if (isHoverEvent) {
+      setDisplayChildren(false);
+    }
+  }, [router.asPath, isHoverEvent]);
 
   if (loadingUrl || loadingText) return '';
 

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

@@ -27,42 +27,36 @@ const SearchContent = ({
     resultKeys: 'id, name, image { url }, url'
   });
 
-  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('');
-          }
+        if (collapsedSearch) {
+          setCollapsed(true);
+          setSearchTerm('');
         }
-      };
+      }
+    };
 
-      document.addEventListener('click', handleClickOutside);
+    document.addEventListener('click', handleClickOutside);
 
-      return () => {
-        document.removeEventListener('click', handleClickOutside);
-      };
-    },
-    [collapsedSearch, setSearchTerm]
-  );
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [collapsedSearch, setSearchTerm]);
 
   const responsiveClasses = isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop;
 

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

@@ -50,15 +50,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,
@@ -218,17 +215,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="Toggle Search Filter">
-            <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-              {mobileRefineButtonText || REFINE}
-            </div>
+      {isCollapsedOnResponsive && !displaySearchFilter && (
+        <div
+          className="filter__refine filter__refine--mobile-close"
+          data-testid="refine-mobile"
+          aria-label="Toggle Search Filter">
+          <div role="button" onClick={() => setDisplaySearchFilter(true)}>
+            {mobileRefineButtonText || REFINE}
           </div>
-        )}
+        </div>
+      )}
     </>
   );
 };

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;