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

package/src/HOC/withTitle.js

@@ -24,9 +24,9 @@ const withTitle = Component => {
 
   InnerComponent.WrappedComponent = Component;
 
-  InnerComponent.displayName = `WithTitle(${Component.displayName ||
-    Component.name ||
-    'Component'})`;
+  InnerComponent.displayName = `WithTitle(${
+    Component.displayName || Component.name || 'Component'
+  })`;
 
   InnerComponent.propTypes = {
     parent: PropTypes.object,

package/src/components/BackToTop/BackToTop.js

@@ -5,14 +5,11 @@ import { FaArrowUp } from 'react-icons/fa';
 const BackToTop = ({ type, showAfterPixels }) => {
   const [goToTop, setGoToTop] = useState(false);
 
-  useEffect(
-    () => {
-      const handleOnScroll = () => setGoToTop(window.scrollY >= showAfterPixels);
-      document.addEventListener('scroll', handleOnScroll);
-      return () => document.removeEventListener('scroll', handleOnScroll);
-    },
-    [showAfterPixels]
-  );
+  useEffect(() => {
+    const handleOnScroll = () => setGoToTop(window.scrollY >= showAfterPixels);
+    document.addEventListener('scroll', handleOnScroll);
+    return () => document.removeEventListener('scroll', handleOnScroll);
+  }, [showAfterPixels]);
 
   const handleBackToTop = event => {
     event.preventDefault();

package/src/components/Banner/BannerRender.js

@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-
 import { useQuery } from '@apollo/client';
-
 import { generateSingleItemQuery, getCount } from '../../application/query';
 import {
   buildBannerSizes,

package/src/components/Breadcrumb/Breadcrumb.js

@@ -12,7 +12,11 @@ const Breadcrumb = ({ type, ...otherProps }) => {
   const { parent } = otherProps;
   const { itemEntity, itemId } = parent;
 
-  const { data = {}, error, loading } = useQuery(getSingleEntitySchema, {
+  const {
+    data = {},
+    error,
+    loading
+  } = useQuery(getSingleEntitySchema, {
     variables: { id: itemEntity }
   });
 

package/src/components/Button.js

@@ -44,12 +44,9 @@ const Button = props => {
     data: [textToUse, afterClickTextToUse, urlToUse]
   } = useStringTemplate(parent, [text, afterClickText, url]);
 
-  useEffect(
-    () => {
-      setShowChildren(false);
-    },
-    [router.asPath]
-  );
+  useEffect(() => {
+    setShowChildren(false);
+  }, [router.asPath]);
 
   const checkIfButtonShouldRender = () => {
     if (isLogoutButton) return !!blazeCookie;

package/src/components/Card/CardsFactory.js

@@ -31,13 +31,14 @@ const CardsFactory = ({
 
   const itemListId = getItemListId(itemListName, queryItemListId);
 
-  const { data: itemListData = {}, loading: itemListLoading, error: itemListError } = useQuery(
-    getItemList,
-    {
-      variables: { id: itemListId },
-      skip: !itemListId
-    }
-  );
+  const {
+    data: itemListData = {},
+    loading: itemListLoading,
+    error: itemListError
+  } = useQuery(getItemList, {
+    variables: { id: itemListId },
+    skip: !itemListId
+  });
 
   if (loading || itemListLoading) return '';
   if (error || itemListError) return error.message || itemListError.message;

package/src/components/Card/CardsRender.js

@@ -66,9 +66,11 @@ const CardsRender = ({
   const unpublishedParentEntityName = getUnpublishedEntityName(parentEntity);
   const allEntityNames = [...entitiesToUse, unpublishedParentEntityName];
   const uniqueEntityNames = [...new Set(allEntityNames)];
-  const { data: mainSchemas = {}, loading: _loading, error: _error } = useGetEntitySchemasAsObj(
-    uniqueEntityNames
-  );
+  const {
+    data: mainSchemas = {},
+    loading: _loading,
+    error: _error
+  } = useGetEntitySchemasAsObj(uniqueEntityNames);
   const parentSchema = mainSchemas[unpublishedParentEntityName] || {};
   const filterEntitySchema = mainSchemas[primaryEntityToUse] || {};
   const entitiesTypes = entitiesToUse.map(ent => getEntityData(ent, mainSchemas[ent]));

package/src/components/CarouselWrapper/DefaultCarousel.js

@@ -15,36 +15,30 @@ const DefaultCarousel = ({
   const [shouldAutoScroll, setShouldAutoScroll] = useState(false);
   const autoScrollRef = useRef();
 
-  useEffect(
-    () => {
-      autoScrollRef.current = shouldAutoScroll;
-      const id = setInterval(scrollCheck, autoScrollTimer);
-      function scrollCheck() {
-        if (!autoScrollRef.current) {
-          clearInterval(id);
-        } else {
-          handleButtonNavigation(true);
-        }
+  useEffect(() => {
+    autoScrollRef.current = shouldAutoScroll;
+    const id = setInterval(scrollCheck, autoScrollTimer);
+    function scrollCheck() {
+      if (!autoScrollRef.current) {
+        clearInterval(id);
+      } else {
+        handleButtonNavigation(true);
       }
+    }
 
-      return () => clearInterval(id);
-    },
-    [autoScrollTimer, shouldAutoScroll]
-  );
+    return () => clearInterval(id);
+  }, [autoScrollTimer, shouldAutoScroll]);
 
-  useEffect(
-    () => {
-      const {
-        current: { offsetWidth, scrollWidth }
-      } = ref;
-      if (scrollWidth <= offsetWidth) {
-        setButtonDisplays({ displayLeft: false, displayRight: false });
-      }
+  useEffect(() => {
+    const {
+      current: { offsetWidth, scrollWidth }
+    } = ref;
+    if (scrollWidth <= offsetWidth) {
+      setButtonDisplays({ displayLeft: false, displayRight: false });
+    }
 
-      setShouldAutoScroll(enableAutoScroll);
-    },
-    [enableAutoScroll]
-  );
+    setShouldAutoScroll(enableAutoScroll);
+  }, [enableAutoScroll]);
 
   const handleScroll = () => {
     const {

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -13,13 +13,10 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
   const contentGroupClass = `${CONTENT_GROUP}-${contentClassame}__buttons-wrapper`;
   const sectionClass = `${CONTENT_GROUP}-${contentClassame}__content-section`;
 
-  useEffect(
-    () => {
-      const activeTab = getActiveTab(sectionsData, asPath);
-      if (activeTab !== selectedTab) setSelectedTab(activeTab);
-    },
-    [asPath, sectionsData, selectedTab]
-  );
+  useEffect(() => {
+    const activeTab = getActiveTab(sectionsData, asPath);
+    if (activeTab !== selectedTab) setSelectedTab(activeTab);
+  }, [asPath, sectionsData, selectedTab]);
 
   const WrapperComponent = VariantComponent || 'div';
 

package/src/components/DataSummary/DataSummaryTypes/index.js

@@ -1,19 +1,23 @@
 import dynamic from 'next/dynamic';
 
 export const summaryComponents = {
-  list: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryListSummary" */ './ListSummary')
+  list: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryListSummary" */ './ListSummary')
   ),
-  large: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryLargeSummary" */ './LargeSummary')
+  large: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryLargeSummary" */ './LargeSummary')
   ),
-  text: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryTextSummary" */ './TextSummary')
+  text: dynamic(
+    () => import(/* webpackChunkName: "blazePbDataSummaryTextSummary" */ './TextSummary')
   ),
-  heading_large: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryHeadingLargeSummary" */ './HeadingLargeSummary')
+  heading_large: dynamic(
+    () =>
+      import(
+        /* webpackChunkName: "blazePbDataSummaryHeadingLargeSummary" */ './HeadingLargeSummary'
+      )
   ),
-  item_details: dynamic(() =>
-    import(/* webpackChunkName: "blazePbDataSummaryItemDetailsSummary" */ './ItemDetailsSummary')
+  item_details: dynamic(
+    () =>
+      import(/* webpackChunkName: "blazePbDataSummaryItemDetailsSummary" */ './ItemDetailsSummary')
   )
 };

package/src/components/DateTime/DateTime.js

@@ -11,11 +11,11 @@ const DateTime = ({ format, customFormat, modifier }) => {
 
   if (!dateFormat) return null;
 
-  const formattedDate = dayjs().format(dateFormat);
+  const formatedDate = dayjs().format(dateFormat);
 
   return (
     <Wrapper className="date" modifiers={modifier}>
-      {formattedDate}
+      {formatedDate}
     </Wrapper>
   );
 };
@@ -27,8 +27,8 @@ DateTime.propTypes = {
 };
 
 DateTime.defaultProps = {
-  customFormat: '',
-  modifier: null
+  modifier: null,
+  customFormat: ''
 };
 
 export default DateTime;

package/src/components/EmailConfirm/EmailConfirm.js

@@ -6,7 +6,7 @@ import { parseUrl } from 'query-string';
 import EMAIL_CONFIRM_MUTATION from './mutation';
 import { renderChildren } from '../../helpers';
 
-const EmailConfirm = ({ modifier, errorMessage, children }) => {
+function EmailConfirm({ modifier, errorMessage, children }) {
   const router = useRouter();
   const { asPath } = router;
 
@@ -16,8 +16,7 @@ const EmailConfirm = ({ modifier, errorMessage, children }) => {
     onCompleted: ({ confirmUserEmail }) => {
       const {
         result: { extras }
-      } =
-        confirmUserEmail || {};
+      } = confirmUserEmail || {};
       const { redirectUrl } = extras || {};
       setDisplayError(false);
       if (redirectUrl && !setRedirectUrl) {
@@ -26,18 +25,17 @@ const EmailConfirm = ({ modifier, errorMessage, children }) => {
     }
   });
 
-  useEffect(
-    () => {
-      if (token) emailConfirmMutation({ variables: { token } });
-    },
-    [emailConfirmMutation, token]
-  );
+  useEffect(() => {
+    if (token) emailConfirmMutation({ variables: { token } });
+  }, [emailConfirmMutation, token]);
 
   if ((token && !called) || loading) return null;
   const renderedChildren = renderChildren(children);
 
-  return <>{displayError ? <span className={modifier}>{errorMessage}</span> : renderedChildren}</>;
-};
+  return (
+    <div>{displayError ? <span className={modifier}>{errorMessage}</span> : renderedChildren}</div>
+  );
+}
 
 EmailConfirm.propTypes = {
   modifier: PropTypes.string,

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';
@@ -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

@@ -28,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;
 
@@ -75,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}>

package/src/components/MenuItem/MenuItemRender.js

@@ -21,12 +21,9 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  useEffect(
-    () => {
-      if (!showMobileMenu) setDisplayChildren(false);
-    },
-    [showMobileMenu]
-  );
+  useEffect(() => {
+    if (!showMobileMenu) setDisplayChildren(false);
+  }, [showMobileMenu]);
 
   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')
 );