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

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

@@ -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,28 +1,16 @@
-/* eslint-disable no-console */
 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 isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
-  const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
-
-  const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
-
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
   const {
     loading: loadingText,
     data: [textToUse]
@@ -33,15 +21,13 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     data: [urlToUse]
   } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
 
-  useEffect(
-    () => {
-      if (!showMobileMenu) setDisplayChildren(false);
-    },
-    [children, isClickEvent, loadingUrl, openActiveSubmenus, router]
-  );
+  useEffect(() => {
+    if (!showMobileMenu) setDisplayChildren(false);
+  }, [showMobileMenu]);
 
   if (loadingUrl || loadingText) return '';
-  const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
+
+  const isHoverEvent = eventType === HOVER;
   const childrenDisplayClass = displayChildren ? '' : HIDDEN;
 
   const handleItemEvent = ({ type }) => {
@@ -54,17 +40,11 @@ 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
-  });
-
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      <div className={menuItemLinkClassname}>
+      <div className="menu--item--link">
         {urlToUse ? (
           <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
         ) : (

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/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')
 );