@blaze-cms/react-page-builder 0.118.0-alpha.2 → 0.119.0-alpha.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.118.0-alpha.2",
+  "version": "0.119.0-alpha.2",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,12 +27,12 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "^0.118.0-alpha.0",
-    "@blaze-cms/core-errors": "^0.118.0-alpha.0",
+    "@blaze-cms/core-auth-ui": "^0.119.0-alpha.0",
+    "@blaze-cms/core-errors": "^0.118.0",
     "@blaze-cms/image-cdn-react": "^0.2.0",
-    "@blaze-cms/nextjs-components": "^0.118.0-alpha.0",
+    "@blaze-cms/nextjs-components": "^0.119.0-alpha.0",
     "@blaze-cms/setup-ui": "^0.92.0",
-    "@blaze-cms/utils": "^0.118.0-alpha.0",
+    "@blaze-cms/utils": "^0.118.0",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
     "@blaze-react/input": "0.5.30",
@@ -42,7 +42,6 @@
     "@blaze-react/utils": "0.5.15",
     "core-js": "^3.2.1",
     "entities": "^2.0.0",
-    "graphql-tag": "^2.10.1",
     "html-react-parser": "^0.10.0",
     "lodash.at": "^4.6.0",
     "lodash.camelcase": "^4.3.0",
@@ -63,21 +62,18 @@
     "video-react": "0.14.1"
   },
   "peerDependencies": {
+    "@apollo/client": "3.x",
     "draft-js": "^0.11.7",
     "draft-js-export-html": "^1.4.1",
     "draftjs-to-html": "0.9.1",
-    "graphql-tag": "^2.10.1",
-    "next": "10.0.5",
+    "next": "12.x",
     "prop-types": "^15.7.2",
-    "react": "^16.13.1",
-    "react-apollo": "^3.1.1",
+    "react": "^17.0.2",
     "react-icons": ">= 4.3.1"
   },
   "devDependencies": {
-    "@apollo/react-testing": "^3.1.1",
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.8",
-    "graphql-tag": "^2.10.1",
     "jest-next-dynamic": "^1.0.1",
     "prop-types": "^15.7.2",
     "webpack": "^5.38.1",
@@ -87,5 +83,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "04cc8794eb8f3b5291270ec6cb14d9efd916bc9b"
+  "gitHead": "48eacb8ab1011f1c45fdfe51312388e92b9776ba"
 }

package/src/application/query/index.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 import upperFirst from 'lodash.upperfirst';
 
 const defaultSchemaProps = `
@@ -63,8 +63,6 @@ const getFiles = gql`
   query getFiles($where: JSON!) {
     getFiles(where: $where) {
       id
-      location
-      mimetype
       url
       data
     }
@@ -75,8 +73,6 @@ const getFileById = gql`
   query getFile($id: String!) {
     getFile(id: $id) {
       id
-      location
-      mimetype
       url
       data
     }

package/src/components/Banner/AdSlotRender.js

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import { AdSlot } from 'react-dfp';
+import PropTypes from 'prop-types';
+import { BANNER_LOADING, BANNER_EMPTY, BANNER_LOADED } from '../../constants';
+
+const AdSlotRender = ({
+  shouldShowBanner,
+  sizeMapping,
+  sizeId,
+  parsedAdunit,
+  parsedSizes,
+  targetingArguments
+}) => {
+  const [loadingStatus, setLoadingStatus] = useState(BANNER_LOADING);
+
+  const bannerClass = `banner-${sizeId}`;
+
+  const styles =
+    loadingStatus === BANNER_LOADING &&
+    sizeMapping
+      .map(({ sizes: styleSizes, viewport: [minWidth] }) => {
+        const minHeight = Math.min(...styleSizes.map(([, height]) => height));
+        return `@media(min-width:${minWidth}px){.${bannerClass}{min-height:${minHeight}px;}`;
+      })
+      .sort();
+  const className = `ad-slot ad-slot-${loadingStatus} ${bannerClass}`;
+
+  return (
+    <>
+      {styles && <style>{styles}</style>}
+      <div className={className}>
+        {shouldShowBanner && (
+          <AdSlot
+            adUnit={parsedAdunit}
+            sizes={parsedSizes}
+            targetingArguments={targetingArguments}
+            sizeMapping={sizeMapping}
+            onSlotRender={({ event: { isEmpty } }) => {
+              const newLoadingStatus = isEmpty ? BANNER_EMPTY : BANNER_LOADED;
+              setLoadingStatus(newLoadingStatus);
+            }}
+          />
+        )}
+      </div>
+    </>
+  );
+};
+
+AdSlotRender.propTypes = {
+  shouldShowBanner: PropTypes.bool.isRequired,
+  sizeMapping: PropTypes.array.isRequired,
+  sizeId: PropTypes.string.isRequired,
+  parsedAdunit: PropTypes.string.isRequired,
+  parsedSizes: PropTypes.array,
+  targetingArguments: PropTypes.object.isRequired
+};
+
+AdSlotRender.defaultProps = {
+  parsedSizes: null
+};
+
+export default AdSlotRender;

package/src/components/Banner/Banner.js

@@ -2,7 +2,7 @@ import React, { useContext } from 'react';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import PropTypes from 'prop-types';
 import flatten from 'lodash.flatten';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { getSingleEntitySchema } from '../../application/query';
 import Wrapper from '../Wrapper';

package/src/components/Banner/BannerRender.js

@@ -1,15 +1,14 @@
-import { AdSlot } from 'react-dfp';
-import PropTypes from 'prop-types';
 import React from 'react';
-import { useQuery } from 'react-apollo';
+import PropTypes from 'prop-types';
+
+import { useQuery } from '@apollo/client';
+
 import { generateSingleItemQuery, getCount } from '../../application/query';
 import {
   buildBannerSizes,
   buildContextualTargeting,
   buildParsedAdunit,
   buildSizeMapping,
-  getMaxBannerHeight,
-  getMinBannerHeight,
   setCustomTargetings
 } from './helpers';
 import {
@@ -19,6 +18,7 @@ import {
   PUBLISHED
 } from '../../constants';
 import { withTitle } from '../../HOC';
+import AdSlotRender from './AdSlotRender';
 
 const BannerRender = ({
   baseAdunit,
@@ -43,8 +43,6 @@ const BannerRender = ({
     skip: id && id !== itemId
   });
 
-  const parsedTargetings = buildContextualTargeting(actionKey, entityRecordData, propsToDisplay);
-
   const { data: bannerData = {} } = useQuery(
     generateSingleItemQuery(GET_BANNER, BANNER_QUERY_PROPS),
     {
@@ -52,13 +50,6 @@ const BannerRender = ({
       skip: !sizeId
     }
   );
-  const { entityData } = bannerData;
-  const { sizes: bannerSizes } = entityData || {};
-
-  const sizeMapping = buildSizeMapping(sizeId, bannerSizes);
-  const parsedSizes = buildBannerSizes(sizeId, bannerSizes, sizes);
-  const maxBannerHeight = getMaxBannerHeight(bannerSizes);
-  const minBannerHeight = getMinBannerHeight(bannerSizes);
 
   const { data = {} } = useQuery(getCount(COUNT_CONTENT_HIERARCHIES), {
     variables: {
@@ -71,6 +62,14 @@ const BannerRender = ({
     }
   });
 
+  const parsedTargetings = buildContextualTargeting(actionKey, entityRecordData, propsToDisplay);
+
+  const { entityData } = bannerData;
+  const { sizes: bannerSizes } = entityData || {};
+
+  const sizeMapping = buildSizeMapping(sizeId, bannerSizes);
+  const parsedSizes = buildBannerSizes(sizeId, bannerSizes, sizes);
+
   const { countContentHierarchies } = data;
 
   const parsedAdunit = buildParsedAdunit(asPath, countContentHierarchies, baseAdunit, adunit);
@@ -80,23 +79,19 @@ const BannerRender = ({
   const shouldShowBanner =
     parsedAdunit && parsedSizes && !!parsedSizes.length && isContextualTargetingReady;
 
-  if (!shouldShowBanner) return null;
   const customTargetings = setCustomTargetings(targetings, cardBannerIndex);
-  const style = {
-    maxHeight: maxBannerHeight,
-    minHeight: minBannerHeight
-  };
+
   const targetingArguments = { ...parsedTargetings, ...customTargetings };
 
   return (
-    <div className="ad-slot" style={style}>
-      <AdSlot
-        adUnit={parsedAdunit}
-        sizes={parsedSizes}
-        targetingArguments={targetingArguments}
-        sizeMapping={sizeMapping}
-      />
-    </div>
+    <AdSlotRender
+      shouldShowBanner={!!shouldShowBanner}
+      sizeMapping={sizeMapping}
+      sizeId={sizeId}
+      parsedAdunit={parsedAdunit}
+      parsedSizes={parsedSizes}
+      targetingArguments={targetingArguments}
+    />
   );
 };
 

package/src/components/Button.js

@@ -3,7 +3,7 @@ import { useCookies } from 'react-cookie';
 import { useRouter } from 'next/router';
 import BlazeButton from '@blaze-react/button';
 import { handleLogout } from '@blaze-cms/core-auth-ui';
-import { useApolloClient } from 'react-apollo';
+import { useApolloClient } from '@apollo/client';
 import PropTypes from 'prop-types';
 import ClickWrapper from './ClickWrapper';
 import BlazeLink from './BlazeLink';

package/src/components/Card/CardContainer.js

@@ -28,6 +28,8 @@ const CardContainer = ({
   enableCarousel,
   bannerModifier,
   priorityLimit,
+  enableAutoScroll,
+  autoScrollTimer,
   ...cardProps
 }) => {
   const entities = getEntitiesWithBanner(cardData, cardProps);
@@ -44,7 +46,9 @@ const CardContainer = ({
       className={dynamicWrapperSizes}
       modifiers={gridModifier}
       itemsPerRow={itemsPerRow}
-      bannerModifier={bannerModifier}>
+      bannerModifier={bannerModifier}
+      enableAutoScroll={enableAutoScroll}
+      autoScrollTimer={autoScrollTimer}>
       {entities.map(({ baseAdunit, id, ...entityProps }, index) => {
         const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);
         const dynamicKey = [itemId, index].join('-');

package/src/components/Card/CardFactory.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { getSingleEntitySchema } from '../../application/query';
 import CardRender from './CardRender';

package/src/components/Card/CardRender.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery } from 'react-apollo';
+import { useQuery } from '@apollo/client';
 import dynamic from 'next/dynamic';
 import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';

package/src/components/Card/helpers/filter-query-setup.js

@@ -1,4 +1,4 @@
-import { getStringTypeProps } from '@blaze-cms/utils';
+import { getStringTypeProps } from '@blaze-cms/utils/src/helpers';
 import { getGenericRenderVariables, buildRawQueryBase, buildSetFilters } from '../../../helpers';
 import { DEFAULT_LIMIT } from '../../../constants';
 

package/src/components/CarouselWrapper.js

@@ -2,17 +2,46 @@ import React, { useRef, useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaAngleLeft, FaAngleRight } from 'react-icons/fa';
 
-const CarouselWrapper = ({ children, bannerModifier, itemsPerRow }) => {
+const CarouselWrapper = ({
+  children,
+  bannerModifier,
+  itemsPerRow,
+  enableAutoScroll,
+  autoScrollTimer
+}) => {
   const ref = useRef();
   const [buttonDisplay, setButtonDisplays] = useState({ displayLeft: false, displayRight: true });
+  const [shouldAutoScroll, setShouldAutoScroll] = useState(false);
+  const autoScrollRef = useRef();
 
-  useEffect(() => {
-    const {
-      current: { offsetWidth, scrollWidth }
-    } = ref;
+  useEffect(
+    () => {
+      autoScrollRef.current = shouldAutoScroll;
+      const id = setInterval(scrollCheck, autoScrollTimer);
+      function scrollCheck() {
+        if (!autoScrollRef.current) {
+          clearInterval(id);
+        } else {
+          handleButtonNavigation(true);
+        }
+      }
 
-    if (scrollWidth <= offsetWidth) setButtonDisplays({ displayLeft: false, displayRight: false });
-  }, []);
+      return () => clearInterval(id);
+    },
+    [autoScrollTimer, shouldAutoScroll]
+  );
+
+  useEffect(
+    () => {
+      const {
+        current: { offsetWidth, scrollWidth }
+      } = ref;
+      if (scrollWidth <= offsetWidth)
+        setButtonDisplays({ displayLeft: false, displayRight: false });
+      setShouldAutoScroll(enableAutoScroll);
+    },
+    [enableAutoScroll]
+  );
 
   const handleScroll = () => {
     const {
@@ -24,36 +53,48 @@ const CarouselWrapper = ({ children, bannerModifier, itemsPerRow }) => {
   };
 
   const handleButtonNavigation = direction => {
+    if (!ref || !ref.current) return;
     const {
-      current: { offsetWidth, scrollLeft }
+      current: { offsetWidth, scrollLeft, scrollWidth }
     } = ref;
-    ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;
+
+    if (autoScrollRef.current && scrollLeft + offsetWidth >= scrollWidth) {
+      ref.current.scrollLeft = 0;
+    } else {
+      ref.current.scrollLeft = direction ? scrollLeft + offsetWidth : scrollLeft - offsetWidth;
+    }
   };
 
   const { displayLeft, displayRight } = buttonDisplay;
-  const wrapperClassName = `card-carousel relative gap-2${bannerModifier}`;
-  const contentClassName = `card-carousel__content card-carousel__content--items-per-row-${itemsPerRow} flex flex-nowrap p-4 gap-4 overflow-x-scroll`;
+  const wrapperClassName = `cards-carousel${bannerModifier}`;
+  const contentClassName = `cards-carousel--content items-per-row-${itemsPerRow}`;
 
   return (
     <div className={wrapperClassName}>
-      <div className="card-carousel__button-wrapper absolute left-0 h-full flex justify-center items-center z-10">
+      <div className="cards-carousel--left-button-wrapper">
         {displayLeft && (
           <button
             type="button"
-            className="card-carousel__button-back icon-button"
-            onClick={() => handleButtonNavigation()}>
+            className="cards-carousel--button-back icon-button icon"
+            onClick={() => {
+              setShouldAutoScroll(false);
+              handleButtonNavigation();
+            }}>
             <i>
               <FaAngleLeft />
             </i>
           </button>
         )}
       </div>
-      <div className="card-carousel__button-wrapper absolute right-0 h-full flex justify-center items-center z-10">
+      <div className="cards-carousel--right-button-wrapper">
         {displayRight && (
           <button
             type="button"
-            className="card-carousel__button-forward icon-button icon"
-            onClick={() => handleButtonNavigation(true)}>
+            className="cards-carousel--button-forward icon-button icon"
+            onClick={() => {
+              setShouldAutoScroll(false);
+              handleButtonNavigation(true);
+            }}>
             <i>
               <FaAngleRight />
             </i>
@@ -70,13 +111,17 @@ const CarouselWrapper = ({ children, bannerModifier, itemsPerRow }) => {
 CarouselWrapper.propTypes = {
   bannerModifier: PropTypes.string,
   itemsPerRow: PropTypes.number,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  enableAutoScroll: PropTypes.bool,
+  autoScrollTimer: PropTypes.number
 };
 
 CarouselWrapper.defaultProps = {
   itemsPerRow: 0,
   bannerModifier: '',
-  children: []
+  children: [],
+  enableAutoScroll: false,
+  autoScrollTimer: 0
 };
 
 export default CarouselWrapper;

package/src/components/DataSummary/DataSummaryFactory.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema } from '../../application/query';

package/src/components/DataSummary/DataSummaryRender.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import { summaryComponents } from './DataSummaryTypes';
 import { getClassModifiers } from '../../utils';

package/src/components/EmailConfirm/EmailConfirm.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import EMAIL_CONFIRM_MUTATION from './mutation';

package/src/components/EmailConfirm/mutation.js

@@ -1,4 +1,4 @@
-import gql from 'graphql-tag';
+import { gql } from '@apollo/client';
 
 const EMAIL_CONFIRM_MUTATION = gql`
   mutation confirmUserEmail($token: String!) {

package/src/components/Image/ImageFactory.js

@@ -17,7 +17,7 @@ const ImageFactory = props => {
   const isUsingRelationImage = checkIfUsingRelationImage(entity, fetchFromRelation, imageRelation);
   const { data: { getEntitySchema = {} } = {} } = useGetSingleEntitySchema(entity, !entity);
   const { actions = {} } = getEntitySchema;
-  const { data: relationData } = useGetImageIdFromRelation(
+  const { data: relationData, loading: relationLoading } = useGetImageIdFromRelation(
     itemId,
     imageRelation,
     actions,
@@ -25,16 +25,19 @@ const ImageFactory = props => {
     isPreview
   );
 
-  const updatedImageIds = getImageIds(imageRelation, relationData, imageId);
-
-  const { data: { getFiles: files = [] } = {}, loading, error } = useGetImages(
-    updatedImageIds,
-    true
+  const updatedImageIds = relationLoading
+    ? null
+    : 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
   );
-
   if (error) return error.message;
   if (loading) return '';
 
+  const files = getFile ? [getFile] : getFiles;
   return files.map(({ id, data: imageData = {}, url: imageUrl = '' }) => {
     if (!imageUrl) return null;
     return <Image key={id} {...props} imageData={imageData} imageUrl={imageUrl} />;

package/src/components/List/ListBuilder.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { useQuery } from '@apollo/react-hooks';
-import { getStringTypeProps } from '@blaze-cms/utils';
+import { useQuery } from '@apollo/client';
+import { getStringTypeProps } from '@blaze-cms/utils/src/helpers';
 import {
   CardRenderWithInfiniteScroll,
   CardsRender,

package/src/components/List/ListFactory.js

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import { parseUrl } from 'query-string';
 import PropTypes from 'prop-types';
 import { useRouter } from 'next/router';

package/src/components/List/ListRender.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery } from '@apollo/react-hooks';
+import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
 import ListPagination from './components/Pagination';
 import ListHeader from './components/Header';

package/src/components/Login/LoggedInMessage.js

@@ -17,7 +17,7 @@ const LoggedInMessage = ({ goToUrl, urlToUse }) => (
 );
 
 LoggedInMessage.propTypes = {
-  goToUrl: PropTypes.string.isRequired,
+  goToUrl: PropTypes.func.isRequired,
   urlToUse: PropTypes.string.isRequired
 };
 

package/src/components/Login/Login.js

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { handleLogin, checkIfLoggedIn, LOGIN_MUTATION } from '@blaze-cms/core-auth-ui';
 import PropTypes from 'prop-types';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import LoggedInMessage from './LoggedInMessage';

package/src/components/Menu/Menu.js

@@ -1,42 +1,80 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import BlazeButton from '@blaze-react/button';
-import { MdMenu } from 'react-icons/md';
+import { MdMenu, MdClose } from 'react-icons/md';
 import { useCheckMobileScreen } from '../../hooks';
 import { HIDDEN } from '../../constants';
 
-const Menu = ({ children, collapse, modifier }) => {
+const Menu = ({
+  children,
+  collapse,
+  modifier,
+  mobileMenuModifier,
+  mobileMenuChildrenModifier,
+  mobileIconAlignment,
+  mobileButtonModifier,
+  hamburgerIconModifier,
+  closeIconModifier,
+  ...rest
+}) => {
   const isMobile = useCheckMobileScreen();
   const [showMobileMenu, setShowMobileMenu] = useState(false);
 
   const shouldDisplayCollapsed = collapse && isMobile;
-  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? '' : HIDDEN;
+  const mobileButtonClass = shouldDisplayCollapsed && isMobile ? mobileButtonModifier : HIDDEN;
   const shouldDisplayChildren = shouldDisplayCollapsed ? showMobileMenu : true;
-  const childrenDisplayClass = shouldDisplayChildren ? modifier : `${modifier} ${HIDDEN}`;
+  const childrenDesktopModifier =
+    shouldDisplayChildren && !isMobile ? modifier : `${modifier} ${HIDDEN}`;
+
+  const childrenMobileModifier =
+    shouldDisplayChildren && isMobile ? `${mobileMenuChildrenModifier}` : ` ${HIDDEN}`;
+
+  const isMobileMenuExpanded = showMobileMenu ? `${mobileMenuModifier}` : '';
 
   return (
     <>
       {collapse && (
-        <BlazeButton
-          className={mobileButtonClass}
-          onClick={() => setShowMobileMenu(!showMobileMenu)}>
-          <i>
-            <MdMenu />
-          </i>
-        </BlazeButton>
+        <div className="top-0 absolute z-50">
+          <div
+            className={`flex w-screen z-50 justify-${mobileIconAlignment} ${isMobileMenuExpanded}`}>
+            <BlazeButton
+              className={mobileButtonClass}
+              onClick={() => setShowMobileMenu(!showMobileMenu)}>
+              <i>
+                {showMobileMenu ? (
+                  <MdClose className={closeIconModifier} />
+                ) : (
+                  <MdMenu className={hamburgerIconModifier} />
+                )}
+              </i>
+            </BlazeButton>
+          </div>
+        </div>
       )}
-      <ul className={childrenDisplayClass}>{children}</ul>
+      <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>{children}</ul>
     </>
   );
 };
 
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
+  hamburgerIconModifier: PropTypes.string,
+  closeIconModifier: PropTypes.string,
+  mobileButtonModifier: PropTypes.string,
+  mobileMenuModifier: PropTypes.string,
+  mobileMenuChildrenModifier: PropTypes.string,
   modifier: PropTypes.string,
+  mobileIconAlignment: PropTypes.string,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
 };
 
 Menu.defaultProps = {
+  hamburgerIconModifier: '',
+  closeIconModifier: '',
+  mobileButtonModifier: '',
+  mobileIconAlignment: '',
+  mobileMenuModifier: '',
+  mobileMenuChildrenModifier: '',
   modifier: '',
   children: []
 };

package/src/components/PasswordReset/PasswordReset.js

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
 import Button from '@blaze-react/button';
-import { useMutation } from 'react-apollo';
+import { useMutation } from '@apollo/client';
 import { useRouter } from 'next/router';
 import { parseUrl } from 'query-string';
 import { RESET_USER_PASSWORD_MUTATION } from '@blaze-cms/core-auth-ui';