@blaze-cms/react-page-builder 0.146.0-translations.8 → 0.147.0-rc-eagle.4

package/lib-es/variants/ThumbnailCarousel/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["dynamic","ThumbnailCarousel","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst ThumbnailCarousel = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(() =>\n    import(/* webpackChunkName: \"blazePbVariantThumbnailCarousel\" */ './ThumbnailCarousel')\n  )\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,iBAAiB,GAAG;EACxBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CAAC,MACxB,MAAM,EAAC,yDAA0D,qBAAqB,CACxF;AACF,CAAC;AAED,eAAeC,iBAAiB","ignoreList":[]}
+{"version":3,"file":"index.js","names":["dynamic","ThumbnailCarousel","getSettings","componentSettings","_objectSpread","VariantComponent"],"sources":["../../../src/variants/ThumbnailCarousel/index.js"],"sourcesContent":["import dynamic from 'next/dynamic';\n\nconst ThumbnailCarousel = {\n  getSettings: componentSettings => ({\n    ...componentSettings\n  }),\n  VariantComponent: dynamic(\n    () => import(/* webpackChunkName: \"blazePbVariantThumbnailCarousel\" */ './ThumbnailCarousel')\n  )\n};\n\nexport default ThumbnailCarousel;\n"],"mappings":";;;AAAA,OAAOA,OAAO,MAAM,cAAc;AAElC,MAAMC,iBAAiB,GAAG;EACxBC,WAAW,EAAEC,iBAAiB,IAAAC,aAAA,KACzBD,iBAAiB,CACpB;EACFE,gBAAgB,EAAEL,OAAO,CACvB,MAAM,MAAM,CAAC,yDAA0D,qBAAqB,CAC9F;AACF,CAAC;AAED,eAAeC,iBAAiB","ignoreList":[]}

package/package.json

@@ -1,24 +1,29 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-translations.8",
+  "version": "0.147.0-rc-eagle.4",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
-  "sideEffects": false,
+  "files": [
+    "lib",
+    "lib-es",
+    "src"
+  ],
+  "source": "src/index.js",
   "directories": {
     "src": "src/"
   },
   "scripts": {
     "test": "jest",
-    "lint": "yarn run lint:js",
+    "lint": "npm run lint:js",
     "lint:js": "eslint .",
     "clean": "rm -Rf ./lib/ && rm -Rf ./lib-es/",
     "build:cjs": "BABEL_ENV=cjs ../../node_modules/.bin/babel ./src --out-dir ./lib --source-maps --root-mode upward",
     "build:esm": "BABEL_ENV=esm ../../node_modules/.bin/babel ./src --out-dir ./lib-es --source-maps --root-mode upward",
-    "build": "yarn run build:cjs && yarn run build:esm",
-    "build:clean": "yarn run clean && yarn run build",
-    "prepublishOnly": "yarn run build:clean",
-    "postpublish": "yarn run clean"
+    "build": "npm run build:cjs && npm run build:esm",
+    "build:clean": "npm run clean && npm run build",
+    "prepublishOnly": "npm run build:clean",
+    "postpublish": "npm run clean"
   },
   "author": {
     "email": "hello@thebyte9.com",
@@ -27,15 +32,16 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "0.146.0-translations.8",
-    "@blaze-cms/core-errors": "0.146.0-translations.8",
-    "@blaze-cms/core-errors-ui": "^0.140.3",
+    "@blaze-cms/core-auth-ui": "0.147.0-rc-eagle.4",
+    "@blaze-cms/core-errors": "0.147.0-rc-eagle.4",
+    "@blaze-cms/core-errors-ui": "0.147.0-rc-eagle.4",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
-    "@blaze-cms/nextjs-components": "0.146.0-translations.3",
-    "@blaze-cms/plugin-search-ui": "0.146.0-translations.8",
-    "@blaze-cms/setup-ui": "^0.140.3",
-    "@blaze-cms/utils": "0.146.0-translations.8",
-    "@blaze-cms/utils-handlebars": "0.146.0-translations.3",
+    "@blaze-cms/nextjs-components": "0.147.0-rc-eagle.4",
+    "@blaze-cms/plugin-search-ui": "0.147.0-rc-eagle.4",
+    "@blaze-cms/setup-ui": "0.147.0-rc-eagle.4",
+    "@blaze-cms/utils": "0.147.0-rc-eagle.4",
+    "@blaze-cms/utils-handlebars": "0.147.0-rc-eagle.4",
+    "@blaze-react/badge": "^0.7.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.8.0-alpha.82",
     "@blaze-react/checkboxes": "0.8.0-alpha.112",
@@ -44,7 +50,6 @@
     "@blaze-react/range-filter": "0.8.0-alpha.113",
     "@blaze-react/select": "0.8.0-alpha.80",
     "@blaze-react/utils": "0.5.15",
-    "core-js": "^3.2.1",
     "cssesc": "^3.0.0",
     "dayjs": "^1.11.11",
     "entities": "^2.0.0",
@@ -59,8 +64,8 @@
     "lodash.uniq": "^4.5.0",
     "lodash.upperfirst": "^4.3.1",
     "query-string": "^6.9.0",
-    "react-cookie": "^4.0.3",
-    "react-dfp": "^0.19.0",
+    "react-cookie": "^7.2.2",
+    "react-dfp": "^0.21.0",
     "react-html-parser": "2.0.2",
     "react-jw-player": "^1.19.1",
     "react-player": "^2.10.1",
@@ -70,26 +75,19 @@
     "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",
-    "next": "12.x",
+    "next": ">= 14",
     "prop-types": "^15.7.2",
-    "react": "^17.0.2",
+    "react": ">= 18",
     "react-icons": "^4.11.0"
   },
   "devDependencies": {
-    "@testing-library/jest-dom": "^5.11.3",
-    "@testing-library/react": "^10.4.8",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^14.2.0",
     "jest-next-dynamic": "^1.0.1",
-    "prop-types": "^15.7.2",
-    "webpack": "^5.38.1",
-    "webpack-cli": "^4.5.0"
+    "prop-types": "^15.7.2"
   },
   "eslintIgnore": [
     "lib/*",
     "lib-es/*"
-  ],
-  "gitHead": "5bcb583bf1d7442739af5bcf650980090670ac5d"
+  ]
 }

package/src/HOC/recreateOnNavigation.js

@@ -11,9 +11,9 @@ const recreateOnNavigation = Component => {
 
   InnerComponent.WrappedComponent = Component;
 
-  InnerComponent.displayName = `recreateOnNavigation(${Component.displayName ||
-    Component.name ||
-    'Component'})`;
+  InnerComponent.displayName = `recreateOnNavigation(${
+    Component.displayName || Component.name || 'Component'
+  })`;
 
   return InnerComponent;
 };

package/src/HOC/withTitle.js

@@ -15,18 +15,18 @@ const withTitle = Component => {
     if (loading) return '';
 
     return (
-      <Fragment>
+      <>
         {shouldDisplayTitle && <h2 className="heading heading--section">{elementTitleToUse}</h2>}
         <Component {...props} />
-      </Fragment>
+      </>
     );
   };
 
   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();
@@ -24,13 +21,11 @@ const BackToTop = ({ type, showAfterPixels }) => {
   };
 
   return (
-    <>
-      {goToTop && (
-        <a href="#top" className={type} onClick={handleBackToTop} aria-label="Back to top">
-          <FaArrowUp />
-        </a>
-      )}
-    </>
+    goToTop && (
+      <a href="#top" className={type} onClick={handleBackToTop} aria-label="Back to top">
+        <FaArrowUp />
+      </a>
+    )
   );
 };
 

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

@@ -5,7 +5,8 @@ import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import { generateSingleItemQuery } from '../../application/query';
 import { SEARCH_PUBLISHED_CONTENT, AND, FULL } from '../../constants';
-import { useGetEntitySchemasAsObj, useGetImages } from '../../hooks';
+import { useGetEntitySchemasAsObj, useGetImages, useAppEventHook } from '../../hooks';
+import { buildQueryBooster } from '../List/helpers';
 import {
   getUpdatedFilterBy,
   getEntityData,
@@ -48,6 +49,7 @@ const CardsRender = ({
     operator: filterOperator = AND,
     useRandomSort
   } = otherProps;
+
   const [updatedSortProperties, sortbyFilters] = getUpdatedSortProperties(
     sort,
     sortby,
@@ -66,9 +68,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]));
@@ -150,8 +154,16 @@ const CardsRender = ({
 
   const hasNoFiltersOrItemsToDisplay = !updatedItemsToDisplay.length && !updatedFilterBy;
 
+  const { data: updatedVariables } = useAppEventHook({
+    eventName: 'cards:query-variables',
+    data: variables,
+    props: variableProps
+  });
+
+  const boostedVariables = buildQueryBooster(otherProps, updatedVariables);
+
   const { data: cardData = {}, error: cardsError } = useQuery(action, {
-    variables,
+    variables: boostedVariables,
     fetchPolicy: useRandomSort ? 'cache-and-network' : 'cache-first',
     skip: shouldReturn(
       hasNoFiltersOrItemsToDisplay,
@@ -169,38 +181,41 @@ const CardsRender = ({
   const isLoading = shouldReturn(_loading, _load, schemaLoading, imagesLoading);
   const hasError = shouldReturn(_error, _err, schemaError);
 
-  if (hasNoFiltersOrItemsToDisplay) return null;
-  if (isLoading) return null;
-  if (hasError) return null;
   if (cardsError) return cardsError.message;
-  let { results: cardDataResults } = cardData[SEARCH_PUBLISHED_CONTENT] || {};
+  if (hasNoFiltersOrItemsToDisplay || isLoading || hasError) {
+    return null;
+  }
 
+  let { results: cardDataResults } = cardData[SEARCH_PUBLISHED_CONTENT] || {};
   if (!cardDataResults || !cardDataResults.length) return null;
 
   cardDataResults = entitySameAsCurrentItemEntity
     ? removeExtraItems(cardDataResults, limit, parentId)
     : cardDataResults;
+
   if (!cardDataResults.length) return null;
 
   const orderedData =
     useRandomSort || updatedSortProperties.length
       ? cardDataResults
       : sortResponseData(cardDataResults, updatedItemsToDisplay);
+
   const { regularChildren, gtmChildren } = splitChildren(
     children,
     cardDataResults,
     graphqlEntityMap,
-    {
-      name: variableProps.name
-    }
+    { name: variableProps.name }
   );
+
   const updatedCards = appendImages(imagesData, orderedData, updatedItemsToDisplay);
 
+  const displayedCards = updatedCards.slice(0, limit);
+
   return (
     <>
       {gtmChildren && renderChildren(gtmChildren)}
       <CardsContainer
-        cardData={updatedCards}
+        cardData={displayedCards}
         entity={primaryEntityToUse}
         gtmChildren={gtmChildren}
         cardChildren={regularChildren}

package/src/components/Carousel/Carousel.js

@@ -1,21 +1,53 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
+import { MainContext } from '@blaze-cms/nextjs-components';
+import { useGetImageIdFromRelation, useGetSingleEntitySchema } from '../../hooks';
 import CarouselImage from './CarouselImage';
 import CarouselRender from './CarouselRender';
 import { useCarouselNavigation } from './hooks/useCarouselNavigation';
-import { getDisplayCountData } from '../../helpers';
+import { getDisplayCountData, getImageIds } from '../../helpers';
 
 const Carousel = props => {
-  const { caption, imageIds, isCaptionDisplayed, VariantComponent, ...otherProps } = props;
-
+  const {
+    caption,
+    imageIds,
+    isCaptionDisplayed,
+    VariantComponent,
+    imagesProperty,
+    entity: entitySetting,
+    parent: { itemId, itemEntity },
+    ...otherProps
+  } = props;
+  const { isPreview } = useContext(MainContext);
   const navigationProps = useCarouselNavigation(props);
 
-  if (!imageIds || !imageIds.length) return null;
+  const entity = imagesProperty ? entitySetting || itemEntity : null;
+  const skipSingleEntitySchema = !entity;
+
+  const { data: { getEntitySchema: { actions } = {} } = {} } = useGetSingleEntitySchema(
+    entity,
+    skipSingleEntitySchema
+  );
+
+  const { data: recordData, loading: recordDataLoading } = useGetImageIdFromRelation(
+    itemId,
+    imagesProperty,
+    actions,
+    true,
+    isPreview,
+    false
+  );
+
+  const updatedImageIds = recordDataLoading
+    ? []
+    : Array.from(new Set([...getImageIds(imagesProperty, recordData, null), ...imageIds]));
+
+  if (!updatedImageIds || !updatedImageIds.length) return null;
   const shouldDisplayCaption = isCaptionDisplayed && caption;
 
   const { shouldDisplayCount, countMessage } = getDisplayCountData(
     navigationProps.showCount,
-    imageIds
+    updatedImageIds
   );
 
   const ComponentToRender = VariantComponent || CarouselRender;
@@ -23,7 +55,7 @@ const Carousel = props => {
   return (
     <ComponentToRender
       caption={caption}
-      imageIds={imageIds}
+      imageIds={updatedImageIds}
       CarouselImage={CarouselImage}
       shouldDisplayCaption={shouldDisplayCaption}
       shouldDisplayCount={shouldDisplayCount}
@@ -36,16 +68,21 @@ const Carousel = props => {
 
 Carousel.propTypes = {
   caption: PropTypes.string,
+  entity: PropTypes.string,
   imageIds: PropTypes.array,
+  imagesProperty: PropTypes.array,
   isCaptionDisplayed: PropTypes.bool,
-  VariantComponent: PropTypes.func
+  VariantComponent: PropTypes.func,
+  parent: PropTypes.object.isRequired
 };
 
 Carousel.defaultProps = {
   VariantComponent: null,
   caption: '',
   imageIds: [],
-  isCaptionDisplayed: false
+  imagesProperty: [],
+  isCaptionDisplayed: false,
+  entity: null
 };
 
 export default Carousel;

package/src/components/Carousel/CarouselImage/CarouselImage.js

@@ -23,10 +23,12 @@ const CarouselImage = ({ imageId, enableLightbox, toggleModal, handleSelectedIma
     handleSelectedImage(imageId);
   };
 
+  if (!loading && !imageUrl) return null;
+
   return (
     <div className="carousel__slide">
       {loading ? (
-        <div />
+        <span />
       ) : (
         <LazyImage
           src={imageUrl}

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/ContentGroup.js

@@ -5,10 +5,11 @@ import ContentGroupTabs from './ContentGroupTabs';
 import ContentGroupAccordion from './ContentGroupAccordion';
 import { getSectionsData } from './helpers';
 import getStructuredDataProperties from './helpers/get-structured-data-properties';
+import { getCustomHtmlProperties } from '../../helpers';
 
 const VALID_TYPES = Object.values(CONTENT_GROUP_TYPES);
 
-const ContentGroup = ({ contentType, isFaqContent, children, ...props }) => {
+const ContentGroup = ({ contentType, isFaqContent, children, customHtmlProps, ...props }) => {
   const groupSections = children?.props?.children?.[1];
 
   const GroupComponent = useMemo(
@@ -18,10 +19,16 @@ const ContentGroup = ({ contentType, isFaqContent, children, ...props }) => {
   );
   const WrapperComponent = useMemo(() => (!isFaqContent ? Fragment : 'div'), [isFaqContent]);
 
-  const { topWrapperProps, ...schemaProperties } = useMemo(
-    () => getStructuredDataProperties(isFaqContent),
-    [isFaqContent]
-  );
+  const { topWrapperProps, ...schemaProperties } = useMemo(() => {
+    const structuredDataProperties = getStructuredDataProperties(isFaqContent);
+    return {
+      ...structuredDataProperties,
+      topWrapperProps: {
+        ...structuredDataProperties.topWrapperProps,
+        ...getCustomHtmlProperties({ customHtmlProps })
+      }
+    };
+  }, [isFaqContent, customHtmlProps]);
 
   if (!groupSections || !groupSections.length || !VALID_TYPES.includes(contentType)) return '';
 
@@ -43,11 +50,18 @@ const ContentGroup = ({ contentType, isFaqContent, children, ...props }) => {
 ContentGroup.propTypes = {
   children: PropTypes.object.isRequired,
   contentType: PropTypes.oneOf(VALID_TYPES).isRequired,
-  isFaqContent: PropTypes.bool
+  isFaqContent: PropTypes.bool,
+  customHtmlProps: PropTypes.arrayOf(
+    PropTypes.shape({
+      name: PropTypes.string,
+      value: PropTypes.string
+    })
+  )
 };
 
 ContentGroup.defaultProps = {
-  isFaqContent: false
+  isFaqContent: false,
+  customHtmlProps: []
 };
 
 export default ContentGroup;

package/src/components/ContentGroup/ContentGroupAccordion.js

@@ -31,15 +31,12 @@ const ContentGroupAccordion = ({
 
   const sectionNames = useMemo(() => sectionPairs.map(p => p.sectionName), [sectionPairs]);
 
-  const baseInitialOpen = useMemo(
-    () => {
-      if (openState === OPEN_STATES.ALL_OPEN) return new Set(sectionNames);
-      if (openState === OPEN_STATES.ALL_CLOSED && sectionNames.length) return new Set();
+  const baseInitialOpen = useMemo(() => {
+    if (openState === OPEN_STATES.ALL_OPEN) return new Set(sectionNames);
+    if (openState === OPEN_STATES.ALL_CLOSED && sectionNames.length) return new Set();
 
-      return new Set([sectionNames[0]]);
-    },
-    [openState, sectionNames]
-  );
+    return new Set([sectionNames[0]]);
+  }, [openState, sectionNames]);
 
   const [openSet, setOpenSet] = useState(baseInitialOpen);
 

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -14,13 +14,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';
 
@@ -49,7 +46,6 @@ const ContentGroupTabs = ({ name, contentType, groupSections, sectionsData, Vari
                 const newUrl = `${baseUrl}#${sectionName}`;
                 if (asPath === newUrl) return;
                 router.push(`/Resolver`, newUrl, { shallow: true });
-                setSelectedTab(tabId);
               }}>
               {sectioLabel}
             </button>

package/src/components/DataSummary/DataSummaryFactory.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 import { MainContext } from '@blaze-cms/nextjs-components';
 import { getSingleEntitySchema } from '../../application/query';
 import { buildPropsQuery, checkPropsToUse } from '../../helpers';
-import { getDataSummaryQuery, getLinkProps } from './helpers';
+import { getDataSummaryQuery, getLinkProps, getRecordId } from './helpers';
 import DataSummaryRender from './DataSummaryRender';
 
 const DataSummaryFactory = ({
@@ -27,7 +27,10 @@ const DataSummaryFactory = ({
     variables: { id: entityForQuery }
   });
 
+  const recordId = getRecordId(entityForQuery, dataRecordId, parent);
   const { isPreview } = useContext(MainContext);
+
+  if (!recordId) return null;
   if (loading) return '';
   if (error) return error.message;
   if (!data) return null;
@@ -36,7 +39,6 @@ const DataSummaryFactory = ({
   const linkProps = getLinkProps(propsToDisplay);
   const propsQueryString = buildPropsQuery(data, propsToDisplayValues, null, linkProps);
   const dataSummaryQuery = getDataSummaryQuery(data, isPreview, propsQueryString);
-  const recordId = dataRecordId[0] || parent.itemId;
   const isSlider = variant === 'slideSummary';
 
   return (