@blaze-cms/react-page-builder 0.146.0-alpha.0 → 0.146.0-alpha.13

package/src/components/Image/Lightbox/Lightbox.js

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import Modal from '@blaze-react/modal';
 import { useInView } from '@blaze-react/utils/lib/customHooks';
 import { ResponsiveImage } from '@blaze-cms/image-cdn-react';
+import Modal from '../../ModalAdapter';
 import BlazeLink from '../../BlazeLink';
 import { IN_VIEW_CONFIG } from '../../../constants';
 

package/src/components/ItemList/ItemListNew/ItemListNew.js

@@ -32,10 +32,7 @@ const ItemListNew = ({ listName, modifier, text }) => {
   };
 
   return (
-    <BlazeButton
-      className={`item-list-new ${modifier}`}
-      onClick={handleClick}
-      aria-label={`Create new ${listName}`}>
+    <BlazeButton className={`item-list-new ${modifier}`} onClick={handleClick}>
       {text}
     </BlazeButton>
   );

package/src/components/List/ListRender.js

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

package/src/components/List/components/Cards/CardsRender.js

@@ -38,7 +38,9 @@ const CardsRender = ({
   const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);
   const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);
+
   if (imagesLoading) return '';
+
   const updatedListWithImages = appendImages(imagesData, orderedListData, itemsToDisplay);
   const WrapperToUse = omitWrappers ? Fragment : Wrapper;
 

package/src/components/List/components/Full/FullRender.js

@@ -16,9 +16,10 @@ const FullRender = ({
   graphqlEntityMap,
   ...props
 }) => {
+  const { parent, entity, propsToDisplay, banner, hasBanner } = props;
+
   const contextProps = useContext(MainContext);
   const pageBuilderID = uuid();
-  const { parent, entity, propsToDisplay, banner, hasBanner } = props;
   const bannerProps = banner
     ? { hasBanner, parent, entity, propsToDisplay, ...banner, type: BANNER }
     : null;

package/src/components/Menu/Menu.js

@@ -63,7 +63,7 @@ const Menu = ({
               <BlazeButton
                 className={`menu--mobile-button ${mobileButtonModifier}`}
                 onClick={() => setShowMobileMenu(!showMobileMenu)}
-                aria-label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>
+                label={showMobileMenu ? 'Close mobile menu' : 'Open mobile menu'}>
                 <i>
                   {showMobileMenu ? (
                     <MdClose className={closeIconModifier} />

package/src/components/MenuItem/MenuEntitiesItem.js

@@ -0,0 +1,202 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import MenuItemRender from './MenuItemRender';
+import {
+  buildPropsQuery,
+  getEntityData,
+  getRequiredSchemas,
+  getUnpublishedEntityName,
+  getUpdatedFilterBy,
+  filterQuerySetup,
+  filtersSetup,
+  getUpdatedItemsToDisplay,
+  getUpdatedSortProperties,
+  shouldReturn,
+  shouldSkipSingleQuery
+} from '../../helpers';
+import { useGetEntitySchemasAsObj } from '../../hooks';
+import { generateSingleItemQuery } from '../../application/query';
+import { AND, SEARCH_PUBLISHED_CONTENT } from '../../constants';
+
+const MenuEntitiesItem = ({ entities, parent, ...props }) => {
+  const { itemEntity: parentEntity, itemId: parentId } = parent;
+  const {
+    operator: filterOperator = AND,
+    filterByProperty = [],
+    sortProperties = [],
+    itemsToDisplay,
+    filterBy = [],
+    sortby,
+    sort
+  } = props;
+
+  const unpublishedEntityName = getUnpublishedEntityName(parentEntity);
+
+  const [updatedSortProperties, sortbyFilters] = getUpdatedSortProperties(
+    sort,
+    sortby,
+    sortProperties
+  );
+
+  const {
+    data: mainSchemas = {},
+    loading: entityObjloading,
+    error: entityObjError
+  } = useGetEntitySchemasAsObj([unpublishedEntityName, ...entities]);
+
+  const [filterEntity] = entities;
+
+  const { [filterEntity]: filterEntitySchema = {} } = mainSchemas;
+
+  const entitiesTypes = entities.map(entity => getEntityData(entity, mainSchemas[entity]));
+  const graphqlEntityMap = entitiesTypes.reduce(
+    (acc, entityType) => ({ ...acc, [entityType.entityType]: entityType.entity }),
+    {}
+  );
+  const docTypes = entitiesTypes.map(({ docType }) => docType);
+  const entityTypes = entitiesTypes.map(({ entityType }) => entityType);
+
+  const entityFields = buildPropsQuery(filterEntitySchema, ['name', 'url']) || '';
+  const parentSchema = mainSchemas[unpublishedEntityName] || {};
+
+  const {
+    entitySameAsCurrentItemEntity,
+    filterEntityRelations,
+    inheritedFilters,
+    queryProps,
+    getAction,
+    action
+  } = filtersSetup({
+    itemEntityUpdated: unpublishedEntityName,
+    currentSchema: parentSchema,
+    filterEntitySchema,
+    filterByProperty,
+    entityFields,
+    entityTypes,
+    filterBy,
+    entities
+  });
+
+  const {
+    data: { entityData: parentEntityData = {} } = {},
+    error: singleItemQueryError,
+    loading: singleItemQueryLoading
+  } = useQuery(generateSingleItemQuery(getAction, queryProps), {
+    variables: { id: parentId },
+    skip: shouldSkipSingleQuery(entityObjloading, getAction, queryProps)
+  });
+
+  const {
+    data: requiredSchema = {},
+    loading: schemaLoading,
+    error: schemaError
+  } = useGetEntitySchemasAsObj(
+    getRequiredSchemas([...filterByProperty, ...sortbyFilters], filterEntitySchema),
+    entityObjloading
+  );
+
+  const getEntitySchemas = Object.values(requiredSchema);
+
+  const updatedItemsToDisplay = getUpdatedItemsToDisplay({
+    inheritedFilters,
+    parentEntityData,
+    itemsToDisplay,
+    parentSchema
+  });
+
+  const variableProps = {
+    sortProperties: updatedSortProperties,
+    filterByProperty,
+    sortby: null,
+    sort: null,
+    filterBy
+  };
+
+  const updatedFilterBy = getUpdatedFilterBy(
+    inheritedFilters,
+    parentEntityData,
+    filterEntitySchema,
+    parentSchema,
+    parentId,
+    variableProps
+  );
+
+  const { variables } = filterQuerySetup({
+    itemsToDisplay: updatedItemsToDisplay,
+    entitySameAsCurrentItemEntity,
+    filterEntityRelations,
+    entity: filterEntity,
+    docType: docTypes,
+    getEntitySchemas,
+    updatedFilterBy,
+    variableProps,
+    filterOperator
+  });
+
+  const hasNoItemsToDisplayOrFilter = !updatedItemsToDisplay.length && !updatedFilterBy;
+
+  const { data = {} } = useQuery(action, {
+    variables,
+    skip: shouldReturn(
+      hasNoItemsToDisplayOrFilter,
+      singleItemQueryLoading,
+      singleItemQueryError,
+      entityObjloading,
+      entityObjError,
+      schemaLoading,
+      schemaError
+    )
+  });
+
+  const { results } = data[SEARCH_PUBLISHED_CONTENT] || {};
+
+  if (!results) return null;
+
+  return results.map(item => {
+    const itemParent = {
+      itemId: item.id,
+      itemEntity: graphqlEntityMap[item.__typename]
+    };
+    return <MenuItemRender {...props} parent={itemParent} url={item.url || props.url} />;
+  });
+};
+
+MenuEntitiesItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
+  modifier: PropTypes.string,
+  parent: PropTypes.object,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  entities: PropTypes.array,
+  limit: PropTypes.number,
+  offset: PropTypes.number,
+  sortby: PropTypes.array,
+  filterBy: PropTypes.array,
+  sort: PropTypes.string,
+  operator: PropTypes.string.isRequired,
+  filterOperator: PropTypes.string.isRequired,
+  sortProperties: PropTypes.array,
+  filterByProperty: PropTypes.array,
+  itemsToDisplay: PropTypes.array
+};
+
+MenuEntitiesItem.defaultProps = {
+  children: null,
+  modifier: '',
+  limit: 0,
+  offset: 0,
+  itemsToDisplay: [],
+  sort: '',
+  sortby: [],
+  sortProperties: [],
+  filterByProperty: [],
+  parent: {},
+  filterBy: [],
+  text: '',
+  url: '',
+  entities: []
+};
+
+export default MenuEntitiesItem;

package/src/components/MenuItem/MenuItem.js

@@ -1,83 +1,33 @@
-import React, { useState, useContext, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
-import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
-import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
-import { hasChildren } from '../../helpers';
-import BlazeLink from '../BlazeLink';
-import MenuContext from '../Menu/MenuContext';
+import MenuItemRender from './MenuItemRender';
+import MenuEntitiesItem from './MenuEntitiesItem';
 
-const MenuItem = ({ children, eventType, text, modifier, url }) => {
-  const [displayChildren, setDisplayChildren] = useState(false);
-  const { showMobileMenu } = useContext(MenuContext);
+const MenuItem = ({ entities, parent, ...props }) => {
+  const hasEntities = entities && entities.length;
 
-  useEffect(
-    () => {
-      if (!showMobileMenu) setDisplayChildren(false);
-    },
-    [showMobileMenu]
-  );
+  if (!hasEntities) return <MenuItemRender parent={parent} {...props} />;
 
-  const isHoverEvent = eventType === HOVER;
-  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
-
-  const handleItemEvent = ({ type }) => {
-    if (isHoverEvent) {
-      if (type === MOUSE_ENTER) {
-        setDisplayChildren(true);
-      }
-      if (type === MOUSE_LEAVE) {
-        setDisplayChildren(false);
-      }
-    }
-  };
-  const hasValidChildren = hasChildren(children);
-
-  return (
-    <li
-      className={modifier}
-      onMouseEnter={handleItemEvent}
-      onMouseLeave={handleItemEvent}
-      aria-label={text}>
-      <div className="menu--item--link">
-        {url ? (
-          <BlazeLink href={url}>{text}</BlazeLink>
-        ) : (
-          <span role="button" onClick={handleItemEvent} aria-label={text}>
-            {text}
-          </span>
-        )}
-        {hasValidChildren && (
-          <i
-            role="button"
-            aria-label={
-              displayChildren ? `Collapse ${text} menu items` : `Expand ${text} menu items`
-            }
-            className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
-            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
-          </i>
-        )}
-      </div>
-      {hasValidChildren && (
-        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
-      )}
-    </li>
-  );
+  return <MenuEntitiesItem entities={entities} parent={parent} {...props} />;
 };
 
 MenuItem.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  eventType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
+  parent: PropTypes.object,
   text: PropTypes.string,
   url: PropTypes.string,
-  eventType: PropTypes.string.isRequired,
-  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+  entities: PropTypes.array
 };
 
 MenuItem.defaultProps = {
-  url: '',
+  children: null,
   modifier: '',
+  parent: {},
   text: '',
-  children: null
+  url: '',
+  entities: []
 };
 
 export default MenuItem;

package/src/components/MenuItem/MenuItemRender.js

@@ -0,0 +1,92 @@
+import React, { useState, useContext, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
+import { HOVER, MOUSE_ENTER, MOUSE_LEAVE, HIDDEN } from '../../constants';
+import { hasChildren } from '../../helpers';
+import BlazeLink from '../BlazeLink';
+import MenuContext from '../Menu/MenuContext';
+import { injectHelperIntoTemplate } from './helpers';
+
+const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) => {
+  const [displayChildren, setDisplayChildren] = useState(false);
+  const { showMobileMenu } = useContext(MenuContext);
+  const {
+    loading: loadingText,
+    data: [textToUse]
+  } = useStringTemplate(parent, [text]);
+
+  const {
+    loading: loadingUrl,
+    data: [urlToUse]
+  } = useStringTemplate(parent, [injectHelperIntoTemplate(url, 'url_encode')]);
+
+  useEffect(
+    () => {
+      if (!showMobileMenu) setDisplayChildren(false);
+    },
+    [showMobileMenu]
+  );
+
+  if (loadingUrl || loadingText) return '';
+
+  const isHoverEvent = eventType === HOVER;
+  const childrenDisplayClass = displayChildren ? '' : HIDDEN;
+
+  const handleItemEvent = ({ type }) => {
+    if (isHoverEvent) {
+      if (type === MOUSE_ENTER) {
+        setDisplayChildren(true);
+      }
+      if (type === MOUSE_LEAVE) {
+        setDisplayChildren(false);
+      }
+    }
+  };
+  const hasValidChildren = hasChildren(children);
+
+  return (
+    <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
+      <div className="menu--item--link">
+        {urlToUse ? (
+          <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
+        ) : (
+          <span role="button" onClick={handleItemEvent}>
+            {textToUse}
+          </span>
+        )}
+        {hasValidChildren && (
+          <i
+            role="button"
+            className="menu--item--link--icon"
+            onClick={() => setDisplayChildren(!displayChildren)}>
+            {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
+          </i>
+        )}
+      </div>
+
+      {hasValidChildren && (
+        <div className={`menu--item-children ${childrenDisplayClass}`}>{children}</div>
+      )}
+    </li>
+  );
+};
+
+MenuItemRender.propTypes = {
+  modifier: PropTypes.string,
+  text: PropTypes.string,
+  url: PropTypes.string,
+  eventType: PropTypes.string.isRequired,
+  parent: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+MenuItemRender.defaultProps = {
+  url: '',
+  modifier: '',
+  text: '',
+  children: null,
+  parent: {}
+};
+
+export default MenuItemRender;

package/src/components/MenuItem/helpers/index.js

@@ -0,0 +1,3 @@
+import injectHelperIntoTemplate from './inject-helper-into-template';
+
+export { injectHelperIntoTemplate };

package/src/components/MenuItem/helpers/inject-helper-into-template.js

@@ -0,0 +1,11 @@
+const injectHelperIntoTemplate = (template, helper) => {
+  if (!helper || !template) return template;
+
+  let result = template.replace(/{{{([^{}]+)}}}/g, `{{{${helper} $1}}}`);
+
+  result = result.replace(/{{([^{}]+)}}(?!})/g, `{{${helper} $1}}`);
+
+  return result;
+};
+
+export default injectHelperIntoTemplate;

package/src/components/Modal/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import BlazeModal from '@blaze-react/modal';
+import BlazeModal from '../ModalAdapter';
 import { renderChildren, updateChildrensParent, hasChildren } from '../../helpers';
 
 const Modal = ({ children, elementTitle, onClose, ...otherProps }) => {

package/src/components/ModalAdapter/ModalAdapter.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Modal from '@blaze-react/modal';
+import ReactDOM from 'react-dom';
+import { usePortal } from '../../hooks';
+
+const ModalAdapter = ({ ...props }) => {
+  const target = usePortal();
+
+  return ReactDOM.createPortal(<Modal {...props} />, target);
+};
+
+export default ModalAdapter;

package/src/components/ModalAdapter/index.js

@@ -0,0 +1,3 @@
+import ModalAdapter from './ModalAdapter';
+
+export default ModalAdapter;

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

@@ -38,6 +38,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case CHECKBOX:
         return (
           <div
@@ -56,6 +57,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case SELECT:
         return (
           <div
@@ -74,6 +76,7 @@ const FiltersList = ({
             />
           </div>
         );
+
       case RANGE:
         return (
           !!areAggregationsAvailable && (

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

@@ -9,7 +9,7 @@ const MobileFormToolbar = ({ formId, handleReset }) => (
       data-testid="reset-button"
       role="button"
       onClick={handleReset}
-      aria-label="Reset Filters">
+      aria-label="Reset search filters">
       {RESET}
     </div>
 

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

@@ -10,13 +10,14 @@ const ResetDesktopForm = ({ handleReset }) => (
       className="icon-button icon-button--reset"
       title="reset--button"
       data-testid="reset-icon"
-      onClick={handleReset}>
+      onClick={handleReset}
+      aria-label="Reset search filters">
       <i>
         <FaRedoAlt />
       </i>
     </button>
 
-    <div role="button" onClick={handleReset} data-testid="reset-button" aria-label="Reset Filters">
+    <div role="button" onClick={handleReset} data-testid="reset-button">
       {RESET}
     </div>
   </div>

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

@@ -3,17 +3,17 @@ import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import debounce from 'lodash.debounce';
 import FiltersList from './FiltersList';
-import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
-
 import CloseMobileForm from './CloseMobileForm';
 import ResetDesktopForm from './ResetDesktopForm';
 import MobileFormToolbar from './MobileFormToolbar';
+import { useFilterAggregationValues } from '../../../hooks';
+import { isDeviceDesktop, getResponsiveFilterClassnames, buildUrlQuery } from '../helpers';
 import { SEARCH, REFINE, MORE_FILTERS_CLASSES } from '../constants';
 
 const SearchFilter = ({
   searchFilterRef,
   listComponentName,
-  data,
+  data: filterData,
   filters,
   hasUrl,
   entity,
@@ -26,11 +26,17 @@ const SearchFilter = ({
   groupAfterMobile,
   filterValues,
   setAppliedFilters,
+  mobileRefineButtonText,
   query
 }) => {
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
 
+  const [data, setStateValues, setSelectProp] = useFilterAggregationValues({
+    data: filterData,
+    filterValues
+  });
+
   const doSubmit = newValues => {
     const newQuery = filterValues
       ? buildUrlQuery(newValues, filters, listComponentName, query)
@@ -74,6 +80,8 @@ const SearchFilter = ({
   };
 
   const updateFilterValues = (newValues, shouldSubmit) => {
+    const [lastChangedFilter] = Object.keys(newValues);
+    setSelectProp(lastChangedFilter);
     setAppliedFilters({ newValues, shouldSearch: shouldSubmit, type: 'update' });
   };
 
@@ -89,6 +97,7 @@ const SearchFilter = ({
         onSubmit={e => {
           e.preventDefault();
           doSubmit(filterValues);
+          setStateValues(filterData);
         }}>
         {displaySearchFilter && (
           <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
@@ -152,6 +161,11 @@ const SearchFilter = ({
                         data-testId="search-filter-desktop-toggler"
                         className={moreFiltersDesktopTogglerClass}
                         type="button"
+                        aria-label={
+                          moreFiltersDesktopCollapsed
+                            ? 'Show more search filters'
+                            : 'Show less search filters'
+                        }
                         onClick={() =>
                           setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
                         }>
@@ -206,12 +220,12 @@ const SearchFilter = ({
 
       {isCollapsedOnResponsive &&
         !displaySearchFilter && (
-          <div className="filter__refine filter__refine--mobile-close" data-testid="refine-mobile">
-            <div
-              role="button"
-              onClick={() => setDisplaySearchFilter(true)}
-              aria-label="Toggle Search Filter">
-              {REFINE}
+          <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>
         )}
@@ -235,10 +249,12 @@ SearchFilter.propTypes = {
   filterValues: PropTypes.object.isRequired,
   setAppliedFilters: PropTypes.func.isRequired,
   listComponentName: PropTypes.string,
-  query: PropTypes.object
+  query: PropTypes.object,
+  mobileRefineButtonText: PropTypes.string
 };
 
 SearchFilter.defaultProps = {
+  mobileRefineButtonText: '',
   listComponentName: '',
   query: {}
 };