@blaze-cms/react-page-builder 0.146.0-alpha.2 → 0.146.0-alpha.21

package/lib-es/hooks/index.js

@@ -7,4 +7,6 @@ export { default as useGetSingleEntitySchema } from './use-get-single-entity-sch
 export { default as useCheckMobileScreen } from './use-check-mobile-screen';
 export { default as useBannerInsertion } from './use-banner-insertion';
 export { default as useAppSyncEventHook } from './use-app-sync-event-hook';
+export { default as usePortal } from './use-portal';
+export { default as useFilterAggregationValues } from './use-filter-aggregation-values';
 //# sourceMappingURL=index.js.map

package/lib-es/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","useGetEntitySchema","useGetEntitySchemasAsObj","useGetImageIdFromRelation","useGetImages","usePageBuilder","useGetSingleEntitySchema","useCheckMobileScreen","useBannerInsertion","useAppSyncEventHook"],"sources":["../../src/hooks/index.js"],"sourcesContent":["export { default as useGetEntitySchema } from './use-get-entity-schema';\nexport { default as useGetEntitySchemasAsObj } from './use-get-entity-schemas-as-obj';\nexport { default as useGetImageIdFromRelation } from './use-get-image-id-from-relation';\nexport { default as useGetImages } from './use-get-images';\nexport { default as usePageBuilder } from './use-page-builder';\nexport { default as useGetSingleEntitySchema } from './use-get-single-entity-schema';\nexport { default as useCheckMobileScreen } from './use-check-mobile-screen';\nexport { default as useBannerInsertion } from './use-banner-insertion';\nexport { default as useAppSyncEventHook } from './use-app-sync-event-hook';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASD,OAAO,IAAIE,wBAAwB,QAAQ,iCAAiC;AACrF,SAASF,OAAO,IAAIG,yBAAyB,QAAQ,kCAAkC;AACvF,SAASH,OAAO,IAAII,YAAY,QAAQ,kBAAkB;AAC1D,SAASJ,OAAO,IAAIK,cAAc,QAAQ,oBAAoB;AAC9D,SAASL,OAAO,IAAIM,wBAAwB,QAAQ,gCAAgC;AACpF,SAASN,OAAO,IAAIO,oBAAoB,QAAQ,2BAA2B;AAC3E,SAASP,OAAO,IAAIQ,kBAAkB,QAAQ,wBAAwB;AACtE,SAASR,OAAO,IAAIS,mBAAmB,QAAQ,2BAA2B","ignoreList":[]}
+{"version":3,"file":"index.js","names":["default","useGetEntitySchema","useGetEntitySchemasAsObj","useGetImageIdFromRelation","useGetImages","usePageBuilder","useGetSingleEntitySchema","useCheckMobileScreen","useBannerInsertion","useAppSyncEventHook","usePortal","useFilterAggregationValues"],"sources":["../../src/hooks/index.js"],"sourcesContent":["export { default as useGetEntitySchema } from './use-get-entity-schema';\nexport { default as useGetEntitySchemasAsObj } from './use-get-entity-schemas-as-obj';\nexport { default as useGetImageIdFromRelation } from './use-get-image-id-from-relation';\nexport { default as useGetImages } from './use-get-images';\nexport { default as usePageBuilder } from './use-page-builder';\nexport { default as useGetSingleEntitySchema } from './use-get-single-entity-schema';\nexport { default as useCheckMobileScreen } from './use-check-mobile-screen';\nexport { default as useBannerInsertion } from './use-banner-insertion';\nexport { default as useAppSyncEventHook } from './use-app-sync-event-hook';\nexport { default as usePortal } from './use-portal';\nexport { default as useFilterAggregationValues } from './use-filter-aggregation-values';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,kBAAkB,QAAQ,yBAAyB;AACvE,SAASD,OAAO,IAAIE,wBAAwB,QAAQ,iCAAiC;AACrF,SAASF,OAAO,IAAIG,yBAAyB,QAAQ,kCAAkC;AACvF,SAASH,OAAO,IAAII,YAAY,QAAQ,kBAAkB;AAC1D,SAASJ,OAAO,IAAIK,cAAc,QAAQ,oBAAoB;AAC9D,SAASL,OAAO,IAAIM,wBAAwB,QAAQ,gCAAgC;AACpF,SAASN,OAAO,IAAIO,oBAAoB,QAAQ,2BAA2B;AAC3E,SAASP,OAAO,IAAIQ,kBAAkB,QAAQ,wBAAwB;AACtE,SAASR,OAAO,IAAIS,mBAAmB,QAAQ,2BAA2B;AAC1E,SAAST,OAAO,IAAIU,SAAS,QAAQ,cAAc;AACnD,SAASV,OAAO,IAAIW,0BAA0B,QAAQ,iCAAiC","ignoreList":[]}

package/lib-es/hooks/use-filter-aggregation-values.js

@@ -0,0 +1,31 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import { useEffect, useState } from 'react';
+const useFilterAggregationValues = ({
+  data,
+  filterValues
+}) => {
+  const [stateValues, setStateValues] = useState(data);
+  const [prop, setProp] = useState('');
+  useEffect(() => {
+    if (!stateValues) return setStateValues(data);
+    const lastChangedFilter = filterValues === null || filterValues === void 0 ? void 0 : filterValues[prop];
+    if (!data) return;
+    const newOptions = data[prop];
+    const currentOptions = stateValues === null || stateValues === void 0 ? void 0 : stateValues[prop];
+    if (lastChangedFilter === null || lastChangedFilter === '') {
+      return setStateValues(prevState => _objectSpread(_objectSpread({}, data), {}, {
+        [prop]: newOptions
+      }));
+    }
+    setStateValues(prevState => _objectSpread(_objectSpread({}, data), {}, {
+      [prop]: currentOptions
+    }));
+  },
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [data, prop, filterValues]);
+  return [stateValues, setStateValues, setProp, prop];
+};
+export default useFilterAggregationValues;
+//# sourceMappingURL=use-filter-aggregation-values.js.map

package/lib-es/hooks/use-filter-aggregation-values.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-filter-aggregation-values.js","names":["useEffect","useState","useFilterAggregationValues","data","filterValues","stateValues","setStateValues","prop","setProp","lastChangedFilter","newOptions","currentOptions","prevState","_objectSpread"],"sources":["../../src/hooks/use-filter-aggregation-values.js"],"sourcesContent":["import { useEffect, useState } from 'react';\n\nconst useFilterAggregationValues = ({ data, filterValues }) => {\n  const [stateValues, setStateValues] = useState(data);\n  const [prop, setProp] = useState('');\n\n  useEffect(\n    () => {\n      if (!stateValues) return setStateValues(data);\n\n      const lastChangedFilter = filterValues?.[prop];\n\n      if (!data) return;\n\n      const newOptions = data[prop];\n      const currentOptions = stateValues?.[prop];\n\n      if (lastChangedFilter === null || lastChangedFilter === '') {\n        return setStateValues(prevState => ({\n          ...data,\n          [prop]: newOptions\n        }));\n      }\n\n      setStateValues(prevState => ({\n        ...data,\n        [prop]: currentOptions\n      }));\n    },\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [data, prop, filterValues]\n  );\n\n  return [stateValues, setStateValues, setProp, prop];\n};\n\nexport default useFilterAggregationValues;\n"],"mappings":";;;AAAA,SAASA,SAAS,EAAEC,QAAQ,QAAQ,OAAO;AAE3C,MAAMC,0BAA0B,GAAGA,CAAC;EAAEC,IAAI;EAAEC;AAAa,CAAC,KAAK;EAC7D,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGL,QAAQ,CAACE,IAAI,CAAC;EACpD,MAAM,CAACI,IAAI,EAAEC,OAAO,CAAC,GAAGP,QAAQ,CAAC,EAAE,CAAC;EAEpCD,SAAS,CACP,MAAM;IACJ,IAAI,CAACK,WAAW,EAAE,OAAOC,cAAc,CAACH,IAAI,CAAC;IAE7C,MAAMM,iBAAiB,GAAGL,YAAY,aAAZA,YAAY,uBAAZA,YAAY,CAAGG,IAAI,CAAC;IAE9C,IAAI,CAACJ,IAAI,EAAE;IAEX,MAAMO,UAAU,GAAGP,IAAI,CAACI,IAAI,CAAC;IAC7B,MAAMI,cAAc,GAAGN,WAAW,aAAXA,WAAW,uBAAXA,WAAW,CAAGE,IAAI,CAAC;IAE1C,IAAIE,iBAAiB,KAAK,IAAI,IAAIA,iBAAiB,KAAK,EAAE,EAAE;MAC1D,OAAOH,cAAc,CAACM,SAAS,IAAAC,aAAA,CAAAA,aAAA,KAC1BV,IAAI;QACP,CAACI,IAAI,GAAGG;MAAU,EAClB,CAAC;IACL;IAEAJ,cAAc,CAACM,SAAS,IAAAC,aAAA,CAAAA,aAAA,KACnBV,IAAI;MACP,CAACI,IAAI,GAAGI;IAAc,EACtB,CAAC;EACL,CAAC;EACD;EACA,CAACR,IAAI,EAAEI,IAAI,EAAEH,YAAY,CAC3B,CAAC;EAED,OAAO,CAACC,WAAW,EAAEC,cAAc,EAAEE,OAAO,EAAED,IAAI,CAAC;AACrD,CAAC;AAED,eAAeL,0BAA0B","ignoreList":[]}

package/lib-es/hooks/use-portal.js

@@ -0,0 +1,14 @@
+import React, { useEffect } from 'react';
+function usePortal() {
+  const rootElemRef = React.useRef(document.createElement('div'));
+  useEffect(() => {
+    document.body.appendChild(rootElemRef.current);
+    const element = rootElemRef.current;
+    return function removeElement() {
+      element.remove();
+    };
+  }, []);
+  return rootElemRef.current;
+}
+export default usePortal;
+//# sourceMappingURL=use-portal.js.map

package/lib-es/hooks/use-portal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-portal.js","names":["React","useEffect","usePortal","rootElemRef","useRef","document","createElement","body","appendChild","current","element","removeElement","remove"],"sources":["../../src/hooks/use-portal.js"],"sourcesContent":["import React, { useEffect } from 'react';\n\nfunction usePortal() {\n  const rootElemRef = React.useRef(document.createElement('div'));\n\n  useEffect(() => {\n    document.body.appendChild(rootElemRef.current);\n\n    const element = rootElemRef.current;\n    return function removeElement() {\n      element.remove();\n    };\n  }, []);\n\n  return rootElemRef.current;\n}\n\nexport default usePortal;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,SAAS,QAAQ,OAAO;AAExC,SAASC,SAASA,CAAA,EAAG;EACnB,MAAMC,WAAW,GAAGH,KAAK,CAACI,MAAM,CAACC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC,CAAC;EAE/DL,SAAS,CAAC,MAAM;IACdI,QAAQ,CAACE,IAAI,CAACC,WAAW,CAACL,WAAW,CAACM,OAAO,CAAC;IAE9C,MAAMC,OAAO,GAAGP,WAAW,CAACM,OAAO;IACnC,OAAO,SAASE,aAAaA,CAAA,EAAG;MAC9BD,OAAO,CAACE,MAAM,CAAC,CAAC;IAClB,CAAC;EACH,CAAC,EAAE,EAAE,CAAC;EAEN,OAAOT,WAAW,CAACM,OAAO;AAC5B;AAEA,eAAeP,SAAS","ignoreList":[]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-alpha.2",
+  "version": "0.146.0-alpha.21",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,15 +27,15 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "^0.144.0",
+    "@blaze-cms/core-auth-ui": "0.146.0-alpha.21",
     "@blaze-cms/core-errors": "^0.140.3",
     "@blaze-cms/core-errors-ui": "^0.140.3",
-    "@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
-    "@blaze-cms/nextjs-components": "^0.143.0",
-    "@blaze-cms/plugin-search-ui": "^0.144.0",
+    "@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
+    "@blaze-cms/nextjs-components": "0.146.0-alpha.17",
+    "@blaze-cms/plugin-search-ui": "0.146.0-alpha.17",
     "@blaze-cms/setup-ui": "^0.140.3",
     "@blaze-cms/utils": "^0.144.0",
-    "@blaze-cms/utils-handlebars": "^0.143.0",
+    "@blaze-cms/utils-handlebars": "0.146.0-alpha.17",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/checkboxes": "0.5.31",
@@ -90,5 +90,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "842784a53445ec45f5f49c9417b980d352e3a2b7"
+  "gitHead": "c4cc6f2e171bca55ee4f015d75899abf79e40f08"
 }

package/src/components/Card/Card.js

@@ -99,48 +99,57 @@ const Card = ({
     if (shouldTriggerRouteChange) router.push(`/Resolver`, url);
   };
 
-  // todo: remove temp env var flag once widely tested BLAZE_PB_ADD_CLICK_TO_CARDS
-  const clickProps =
-    url && process.env.BLAZE_PB_ADD_CLICK_TO_CARDS
-      ? {
-          onClick: handleCardClick,
-          role: 'button'
-        }
-      : {};
+  // todo: asses whether we make link wrapper default after wider testing with BLAZE_PB_ADD_CLICK_TO_CARDS
+  const useLinkWrapper = url && process.env.BLAZE_PB_ADD_CLICK_TO_CARDS;
+  const clickProps = useLinkWrapper
+    ? {
+        onClick: handleCardClick,
+        href: url,
+        ariaLabel: name
+      }
+    : {};
+  const CardWrapper = useLinkWrapper ? BlazeLink : 'div';
+  const childLinkHref = useLinkWrapper ? undefined : url;
+  const ChildLinkWrapper = useLinkWrapper ? 'div' : BlazeLink;
+
   return (
     <Wrapper {...wrapperProps}>
-      <div className={classNameWithModifiers} {...clickProps}>
+      <CardWrapper className={classNameWithModifiers} {...clickProps}>
         {shouldDisplayThumbnail && (
           <div className={getModifiers('card__image', modifiers)}>
-            <BlazeLink gtmId={gtmId} href={url} className="card__image-link" scroll>
+            <ChildLinkWrapper
+              gtmId={gtmId}
+              href={childLinkHref}
+              className="card__image-link"
+              scroll>
               <LazyImage
                 src={imageSrc}
                 alt={altText}
                 sizeKey={dynamicSizeKey}
                 priority={priority}
               />
-            </BlazeLink>
+            </ChildLinkWrapper>
           </div>
         )}
         <div className={contentWrapperModifier}>
           <div className={getModifiers('card__content', modifiers)}>
             {displayCategory &&
               (publishedListingPage ? (
-                <BlazeLink
+                <ChildLinkWrapper
                   gtmId={gtmId}
                   href={publishedListingPage}
                   className="badge badge--label"
                   scroll>
                   {preHeader.name}
-                </BlazeLink>
+                </ChildLinkWrapper>
               ) : (
                 <div className="badge badge--label">{label}</div>
               ))}
             {displayTitle && (
               <div className={titleWrapperModifier}>
-                <BlazeLink title={linkTitle} gtmId={gtmId} href={url} scroll>
+                <ChildLinkWrapper title={linkTitle} gtmId={gtmId} href={childLinkHref} scroll>
                   {headline}
-                </BlazeLink>
+                </ChildLinkWrapper>
               </div>
             )}
             {!!pageBuilderComponents.length && (
@@ -175,7 +184,7 @@ const Card = ({
             <div className="card__child-content">{renderChildren(cardChildren)}</div>
           )}
         </div>
-      </div>
+      </CardWrapper>
     </Wrapper>
   );
 };

package/src/components/Card/CardsContainer.js

@@ -36,6 +36,7 @@ const CardContainer = ({
   autoScrollTimer,
   overlayModifier,
   titleOverlayModifier,
+  VariantComponent,
   ...cardProps
 }) => {
   const { itemId } = useContext(MainContext);
@@ -47,7 +48,8 @@ const CardContainer = ({
   const dynamicWrapperSizes = enableCarousel
     ? ''
     : getDynamicGridClasses('grid', itemsPerRow, designConfig);
-  const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;
+  const InitialWrapper = enableCarousel ? CarouselWrapper : Wrapper;
+  const CardWrapper = VariantComponent || InitialWrapper;
   let bannerIndex = 0;
 
   return (
@@ -154,7 +156,8 @@ CardContainer.propTypes = {
   enableOverlay: PropTypes.bool,
   overlayModifier: PropTypes.string,
   titleOverlayModifier: PropTypes.string,
-  autoScrollTimer: PropTypes.number
+  autoScrollTimer: PropTypes.number,
+  VariantComponent: PropTypes.func
 };
 
 CardContainer.defaultProps = {
@@ -179,7 +182,8 @@ CardContainer.defaultProps = {
   enableOverlay: false,
   autoScrollTimer: 0,
   overlayModifier: '',
-  titleOverlayModifier: ''
+  titleOverlayModifier: '',
+  VariantComponent: null
 };
 
 export default withTitle(CardContainer);

package/src/components/Card/CardsFactory.js

@@ -1,10 +1,13 @@
 import React from 'react';
 import { useQuery } from '@apollo/client';
 import PropTypes from 'prop-types';
-import { getSingleEntitySchema } from '../../application/query';
+import { useRouter } from 'next/router';
+import { parseUrl } from 'query-string';
+import { getSingleEntitySchema, getItemList } from '../../application/query';
 import CardsRender from './CardsRender';
 import { buildPropsQuery, getGenericProps, checkPropsToUse } from '../../helpers';
 import { WITH_BANNER } from '../../constants';
+import { getItemListId, getItemListIds } from '../ItemList/helpers';
 
 const CardsFactory = ({
   entity,
@@ -12,15 +15,32 @@ const CardsFactory = ({
   propsToDisplay,
   itemsToDisplay,
   itemListName,
+  VariantComponent,
   ...cardProps
 }) => {
   const entityTouse = entities && entities.length ? entities[0] : entity;
+  const router = useRouter();
+  const { asPath } = router;
+  const parsedQuery = asPath.replace(/%5D/g, ']').replace(/%5B/g, '[');
+
+  const { query: { itemListId: queryItemListId } = {} } = parseUrl(parsedQuery);
+
   const { data, error, loading } = useQuery(getSingleEntitySchema, {
     variables: { id: entityTouse }
   });
 
-  if (loading) return '';
-  if (error) return error.message;
+  const itemListId = getItemListId(itemListName, queryItemListId);
+
+  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;
   if (!data) return null;
 
   const propsToDisplayValues = checkPropsToUse(propsToDisplay);
@@ -28,13 +48,19 @@ const CardsFactory = ({
   const { gridModifier, ...cardRenderProps } = getGenericProps(cardProps);
   const extraModifierForBanner = cardRenderProps.banner ? WITH_BANNER : '';
 
+  const itemListIds = getItemListIds(itemListData);
+  const itemsToDisplayToUse = itemListIds || itemsToDisplay;
+
+  if (itemListName && !itemListIds) return null;
+
   return (
     <CardsRender
       gridModifier={`${gridModifier}${extraModifierForBanner}`}
       bannerModifier={extraModifierForBanner}
-      itemsToDisplay={itemsToDisplay}
+      itemsToDisplay={itemsToDisplayToUse}
       propsToDisplay={propsToDisplay}
       entityFields={extraProps}
+      VariantComponent={VariantComponent}
       {...cardRenderProps}
       entity={entityTouse}
       entities={entities}
@@ -47,7 +73,8 @@ CardsFactory.propTypes = {
   propsToDisplay: PropTypes.array,
   itemsToDisplay: PropTypes.array,
   itemListName: PropTypes.string,
-  entities: PropTypes.array
+  entities: PropTypes.array,
+  VariantComponent: PropTypes.func
 };
 
 CardsFactory.defaultProps = {
@@ -55,7 +82,8 @@ CardsFactory.defaultProps = {
   itemsToDisplay: [],
   itemListName: '',
   entity: null,
-  entities: null
+  entities: null,
+  VariantComponent: null
 };
 
 export default CardsFactory;

package/src/components/Card/CardsRender.js

@@ -34,6 +34,7 @@ const CardsRender = ({
   entityFields,
   itemsToDisplay,
   children,
+  VariantComponent,
   ...otherProps
 }) => {
   const { isPreview } = useContext(MainContext);
@@ -204,6 +205,7 @@ const CardsRender = ({
         gtmChildren={gtmChildren}
         cardChildren={regularChildren}
         graphqlEntityMap={graphqlEntityMap}
+        VariantComponent={VariantComponent}
         {...variableProps}
       />
     </>
@@ -215,13 +217,15 @@ CardsRender.propTypes = {
   entity: PropTypes.string.isRequired,
   entityFields: PropTypes.string.isRequired,
   itemsToDisplay: PropTypes.array,
-  entities: PropTypes.array
+  entities: PropTypes.array,
+  VariantComponent: PropTypes.func
 };
 
 CardsRender.defaultProps = {
   children: [],
   itemsToDisplay: [],
-  entities: []
+  entities: [],
+  VariantComponent: null
 };
 
 export default CardsRender;

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

@@ -1,9 +1,9 @@
 export { default as getPublishedListingUrl } from './get-published-listing-url';
 export { default as useDynamicSizeKey } from './use-dynamic-size-key';
 export { default as getDynamicGridClasses } from './get-dynamic-grid-classes';
-export { default as filtersSetup } from './filters-setup';
-export { default as filterQuerySetup } from './filter-query-setup';
-export { default as shouldReturn } from './should-return';
-export { default as shouldSkipSingleQuery } from './should-skip-single-query';
-export { default as getUpdatedSortProperties } from './get-updated-sort-properties';
-export { default as getUpdatedItemsToDisplay } from './get-updated-items-to-display';
+export { default as filtersSetup } from '../../../helpers/filters-setup';
+export { default as filterQuerySetup } from '../../../helpers/filter-query-setup';
+export { default as shouldReturn } from '../../../helpers/should-return';
+export { default as shouldSkipSingleQuery } from '../../../helpers/should-skip-single-query';
+export { default as getUpdatedSortProperties } from '../../../helpers/get-updated-sort-properties';
+export { default as getUpdatedItemsToDisplay } from '../../../helpers/get-updated-items-to-display';

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/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/MenuItem/MenuEntitiesItem.js

@@ -0,0 +1,204 @@
+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
+  });
+
+  variables.limit = props.limit || undefined;
+
+  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;