@blaze-cms/react-page-builder 0.126.0-admin-updates.3 → 0.126.0-alpha.5

package/lib-es/components/ContentGroup/ContentGroupTabs.js

@@ -1,40 +1,40 @@
-import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["name", "contentType", "modifier", "children"];
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-const ContentGroupTabs = _ref => {
-  var _children$props;
-  let {
-      name,
-      contentType,
-      modifier,
-      children
-    } = _ref,
-    props = _objectWithoutProperties(_ref, _excluded);
-  const [selectedTab, setSelectedTab] = useState('tab-0');
-  const groupSections = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[1];
-  const contentClassame = contentType === 'tab' ? '-tabs' : '-sidepanel';
-  if (!groupSections || !groupSections.length) return '';
+import { useRouter } from 'next/router';
+import { getActiveTab } from './helpers';
+import { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL } from './constants';
+const ContentGroupTabs = ({
+  name,
+  contentType,
+  modifier,
+  groupSections,
+  sectionsData
+}) => {
+  const router = useRouter();
+  const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
+  const {
+    asPath
+  } = router;
+  const contentClassame = contentType === TAB ? TABS : SIDEPANEL;
+  const mainDivClass = `${CONTENT_GROUP}-${contentClassame}`;
+  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]);
   return /*#__PURE__*/React.createElement("div", {
-    className: `content-group${contentClassame}`
+    className: mainDivClass
   }, /*#__PURE__*/React.createElement("ul", {
-    className: `content-group${contentClassame}__buttons-wrapper`,
+    className: contentGroupClass,
     role: "tablist",
     "aria-label": name
   }, groupSections.map((groupSection, index) => {
-    const {
-      props: {
-        component: {
-          settings: {
-            label: sectionLabel
-          } = {}
-        } = {}
-      } = {}
-    } = groupSection;
-    const tabId = `tab-${index}`;
-    const panelId = `panel-${index}`;
+    const [sectionName, sectioLabel] = sectionsData[index];
+    const tabId = `${TAB}-${sectionName}`;
+    const panelId = `${PANEL}-${sectionName}`;
     const isSelected = selectedTab === tabId;
-    const buttonClassName = isSelected ? `content-group${contentClassame}__button--is-active` : `content-group${contentClassame}__button`;
+    const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${isSelected ? '--is-active' : ''}`;
     return /*#__PURE__*/React.createElement("button", {
       id: tabId,
       key: tabId,
@@ -43,16 +43,25 @@ const ContentGroupTabs = _ref => {
       role: "tab",
       "aria-selected": isSelected,
       "aria-controls": panelId,
-      onClick: () => setSelectedTab(tabId)
-    }, sectionLabel);
+      onClick: () => {
+        const baseUrl = asPath.split('#')[0];
+        const newUrl = `${baseUrl}#${sectionName}`;
+        if (asPath === newUrl) return;
+        router.push(`/Resolver`, newUrl, {
+          shallow: true
+        });
+        setSelectedTab(tabId);
+      }
+    }, sectioLabel);
   })), groupSections.map((groupSection, index) => {
-    const tabId = `tab-${index}`;
-    const panelId = `panel-${index}`;
+    const [sectionName] = sectionsData[index];
+    const tabId = `${TAB}-${sectionName}`;
+    const panelId = `${PANEL}-${sectionName}`;
     if (selectedTab !== tabId) return null;
     return /*#__PURE__*/React.createElement("div", {
-      id: panelId,
+      id: sectionName,
       key: panelId,
-      className: `content-group${contentClassame}__content-section`,
+      className: sectionClass,
       role: "tabpanel",
       "aria-labelledby": tabId
     }, groupSection);
@@ -62,11 +71,11 @@ ContentGroupTabs.propTypes = {
   name: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
-  children: PropTypes.object
+  groupSections: PropTypes.array.isRequired,
+  sectionsData: PropTypes.array.isRequired
 };
 ContentGroupTabs.defaultProps = {
-  modifier: '',
-  children: {}
+  modifier: ''
 };
 export default ContentGroupTabs;
 //# sourceMappingURL=ContentGroupTabs.js.map

package/lib-es/components/ContentGroup/ContentGroupTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGroupTabs.js","names":["React","useState","PropTypes","ContentGroupTabs","name","contentType","modifier","children","props","selectedTab","setSelectedTab","groupSections","contentClassame","length","map","groupSection","index","component","settings","label","sectionLabel","tabId","panelId","isSelected","buttonClassName","propTypes","string","isRequired","object","defaultProps"],"sources":["../../../src/components/ContentGroup/ContentGroupTabs.js"],"sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\n\nconst ContentGroupTabs = ({ name, contentType, modifier, children, ...props }) => {\n  const [selectedTab, setSelectedTab] = useState('tab-0');\n  const groupSections = children?.props?.children[1];\n  const contentClassame = contentType === 'tab' ? '-tabs' : '-sidepanel';\n  if (!groupSections || !groupSections.length) return '';\n\n  return (\n    <div className={`content-group${contentClassame}`}>\n      <ul\n        className={`content-group${contentClassame}__buttons-wrapper`}\n        role=\"tablist\"\n        aria-label={name}>\n        {groupSections.map((groupSection, index) => {\n          const {\n            props: { component: { settings: { label: sectionLabel } = {} } = {} } = {}\n          } = groupSection;\n          const tabId = `tab-${index}`;\n          const panelId = `panel-${index}`;\n          const isSelected = selectedTab === tabId;\n          const buttonClassName = isSelected\n            ? `content-group${contentClassame}__button--is-active`\n            : `content-group${contentClassame}__button`;\n\n          return (\n            <button\n              id={tabId}\n              key={tabId}\n              className={buttonClassName}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={panelId}\n              onClick={() => setSelectedTab(tabId)}>\n              {sectionLabel}\n            </button>\n          );\n        })}\n      </ul>\n      {groupSections.map((groupSection, index) => {\n        const tabId = `tab-${index}`;\n        const panelId = `panel-${index}`;\n        if (selectedTab !== tabId) return null;\n\n        return (\n          <div\n            id={panelId}\n            key={panelId}\n            className={`content-group${contentClassame}__content-section`}\n            role=\"tabpanel\"\n            aria-labelledby={tabId}>\n            {groupSection}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nContentGroupTabs.propTypes = {\n  name: PropTypes.string.isRequired,\n  contentType: PropTypes.string.isRequired,\n  modifier: PropTypes.string,\n  children: PropTypes.object\n};\n\nContentGroupTabs.defaultProps = {\n  modifier: '',\n  children: {}\n};\n\nexport default ContentGroupTabs;\n"],"mappings":";;AAAA,OAAOA,KAAK,IAAIC,QAAQ,QAAQ,OAAO;AACvC,OAAOC,SAAS,MAAM,YAAY;AAElC,MAAMC,gBAAgB,GAAG,QAAyD;EAAA;EAAA,IAAxD;MAAEC,IAAI;MAAEC,WAAW;MAAEC,QAAQ;MAAEC;IAAmB,CAAC;IAAPC,KAAK;EACzE,MAAM,CAACC,WAAW,EAAEC,cAAc,CAAC,GAAGT,QAAQ,CAAC,OAAO,CAAC;EACvD,MAAMU,aAAa,GAAGJ,QAAQ,aAARA,QAAQ,0CAARA,QAAQ,CAAEC,KAAK,oDAAf,gBAAiBD,QAAQ,CAAC,CAAC,CAAC;EAClD,MAAMK,eAAe,GAAGP,WAAW,KAAK,KAAK,GAAG,OAAO,GAAG,YAAY;EACtE,IAAI,CAACM,aAAa,IAAI,CAACA,aAAa,CAACE,MAAM,EAAE,OAAO,EAAE;EAEtD,oBACE;IAAK,SAAS,EAAG,gBAAeD,eAAgB;EAAE,gBAChD;IACE,SAAS,EAAG,gBAAeA,eAAgB,mBAAmB;IAC9D,IAAI,EAAC,SAAS;IACd,cAAYR;EAAK,GAChBO,aAAa,CAACG,GAAG,CAAC,CAACC,YAAY,EAAEC,KAAK,KAAK;IAC1C,MAAM;MACJR,KAAK,EAAE;QAAES,SAAS,EAAE;UAAEC,QAAQ,EAAE;YAAEC,KAAK,EAAEC;UAAa,CAAC,GAAG,CAAC;QAAE,CAAC,GAAG,CAAC;MAAE,CAAC,GAAG,CAAC;IAC3E,CAAC,GAAGL,YAAY;IAChB,MAAMM,KAAK,GAAI,OAAML,KAAM,EAAC;IAC5B,MAAMM,OAAO,GAAI,SAAQN,KAAM,EAAC;IAChC,MAAMO,UAAU,GAAGd,WAAW,KAAKY,KAAK;IACxC,MAAMG,eAAe,GAAGD,UAAU,GAC7B,gBAAeX,eAAgB,qBAAoB,GACnD,gBAAeA,eAAgB,UAAS;IAE7C,oBACE;MACE,EAAE,EAAES,KAAM;MACV,GAAG,EAAEA,KAAM;MACX,SAAS,EAAEG,eAAgB;MAC3B,IAAI,EAAC,QAAQ;MACb,IAAI,EAAC,KAAK;MACV,iBAAeD,UAAW;MAC1B,iBAAeD,OAAQ;MACvB,OAAO,EAAE,MAAMZ,cAAc,CAACW,KAAK;IAAE,GACpCD,YAAY,CACN;EAEb,CAAC,CAAC,CACC,EACJT,aAAa,CAACG,GAAG,CAAC,CAACC,YAAY,EAAEC,KAAK,KAAK;IAC1C,MAAMK,KAAK,GAAI,OAAML,KAAM,EAAC;IAC5B,MAAMM,OAAO,GAAI,SAAQN,KAAM,EAAC;IAChC,IAAIP,WAAW,KAAKY,KAAK,EAAE,OAAO,IAAI;IAEtC,oBACE;MACE,EAAE,EAAEC,OAAQ;MACZ,GAAG,EAAEA,OAAQ;MACb,SAAS,EAAG,gBAAeV,eAAgB,mBAAmB;MAC9D,IAAI,EAAC,UAAU;MACf,mBAAiBS;IAAM,GACtBN,YAAY,CACT;EAEV,CAAC,CAAC,CACE;AAEV,CAAC;AAEDZ,gBAAgB,CAACsB,SAAS,GAAG;EAC3BrB,IAAI,EAAEF,SAAS,CAACwB,MAAM,CAACC,UAAU;EACjCtB,WAAW,EAAEH,SAAS,CAACwB,MAAM,CAACC,UAAU;EACxCrB,QAAQ,EAAEJ,SAAS,CAACwB,MAAM;EAC1BnB,QAAQ,EAAEL,SAAS,CAAC0B;AACtB,CAAC;AAEDzB,gBAAgB,CAAC0B,YAAY,GAAG;EAC9BvB,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,CAAC;AACb,CAAC;AAED,eAAeJ,gBAAgB"}
+{"version":3,"file":"ContentGroupTabs.js","names":["React","useState","useEffect","PropTypes","useRouter","getActiveTab","TAB","TABS","SIDEPANEL","CONTENT_GROUP","PANEL","ContentGroupTabs","name","contentType","modifier","groupSections","sectionsData","router","selectedTab","setSelectedTab","asPath","contentClassame","mainDivClass","contentGroupClass","sectionClass","activeTab","map","groupSection","index","sectionName","sectioLabel","tabId","panelId","isSelected","buttonClassName","baseUrl","split","newUrl","push","shallow","propTypes","string","isRequired","array","defaultProps"],"sources":["../../../src/components/ContentGroup/ContentGroupTabs.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useRouter } from 'next/router';\nimport { getActiveTab } from './helpers';\nimport { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL } from './constants';\n\nconst ContentGroupTabs = ({ name, contentType, modifier, groupSections, sectionsData }) => {\n  const router = useRouter();\n  const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));\n  const { asPath } = router;\n  const contentClassame = contentType === TAB ? TABS : SIDEPANEL;\n  const mainDivClass = `${CONTENT_GROUP}-${contentClassame}`;\n  const contentGroupClass = `${CONTENT_GROUP}-${contentClassame}__buttons-wrapper`;\n  const sectionClass = `${CONTENT_GROUP}-${contentClassame}__content-section`;\n\n  useEffect(\n    () => {\n      const activeTab = getActiveTab(sectionsData, asPath);\n      if (activeTab !== selectedTab) setSelectedTab(activeTab);\n    },\n    [asPath, sectionsData, selectedTab]\n  );\n\n  return (\n    <div className={mainDivClass}>\n      <ul className={contentGroupClass} role=\"tablist\" aria-label={name}>\n        {groupSections.map((groupSection, index) => {\n          const [sectionName, sectioLabel] = sectionsData[index];\n          const tabId = `${TAB}-${sectionName}`;\n          const panelId = `${PANEL}-${sectionName}`;\n          const isSelected = selectedTab === tabId;\n          const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${\n            isSelected ? '--is-active' : ''\n          }`;\n\n          return (\n            <button\n              id={tabId}\n              key={tabId}\n              className={buttonClassName}\n              type=\"button\"\n              role=\"tab\"\n              aria-selected={isSelected}\n              aria-controls={panelId}\n              onClick={() => {\n                const baseUrl = asPath.split('#')[0];\n                const newUrl = `${baseUrl}#${sectionName}`;\n                if (asPath === newUrl) return;\n                router.push(`/Resolver`, newUrl, { shallow: true });\n                setSelectedTab(tabId);\n              }}>\n              {sectioLabel}\n            </button>\n          );\n        })}\n      </ul>\n      {groupSections.map((groupSection, index) => {\n        const [sectionName] = sectionsData[index];\n        const tabId = `${TAB}-${sectionName}`;\n        const panelId = `${PANEL}-${sectionName}`;\n        if (selectedTab !== tabId) return null;\n\n        return (\n          <div\n            id={sectionName}\n            key={panelId}\n            className={sectionClass}\n            role=\"tabpanel\"\n            aria-labelledby={tabId}>\n            {groupSection}\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nContentGroupTabs.propTypes = {\n  name: PropTypes.string.isRequired,\n  contentType: PropTypes.string.isRequired,\n  modifier: PropTypes.string,\n  groupSections: PropTypes.array.isRequired,\n  sectionsData: PropTypes.array.isRequired\n};\n\nContentGroupTabs.defaultProps = {\n  modifier: ''\n};\n\nexport default ContentGroupTabs;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,QAAQ,EAAEC,SAAS,QAAQ,OAAO;AAClD,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,SAAS,QAAQ,aAAa;AACvC,SAASC,YAAY,QAAQ,WAAW;AACxC,SAASC,GAAG,EAAEC,IAAI,EAAEC,SAAS,EAAEC,aAAa,EAAEC,KAAK,QAAQ,aAAa;AAExE,MAAMC,gBAAgB,GAAG,CAAC;EAAEC,IAAI;EAAEC,WAAW;EAAEC,QAAQ;EAAEC,aAAa;EAAEC;AAAa,CAAC,KAAK;EACzF,MAAMC,MAAM,GAAGb,SAAS,EAAE;EAC1B,MAAM,CAACc,WAAW,EAAEC,cAAc,CAAC,GAAGlB,QAAQ,CAACI,YAAY,CAACW,YAAY,EAAE,EAAE,CAAC,CAAC;EAC9E,MAAM;IAAEI;EAAO,CAAC,GAAGH,MAAM;EACzB,MAAMI,eAAe,GAAGR,WAAW,KAAKP,GAAG,GAAGC,IAAI,GAAGC,SAAS;EAC9D,MAAMc,YAAY,GAAI,GAAEb,aAAc,IAAGY,eAAgB,EAAC;EAC1D,MAAME,iBAAiB,GAAI,GAAEd,aAAc,IAAGY,eAAgB,mBAAkB;EAChF,MAAMG,YAAY,GAAI,GAAEf,aAAc,IAAGY,eAAgB,mBAAkB;EAE3EnB,SAAS,CACP,MAAM;IACJ,MAAMuB,SAAS,GAAGpB,YAAY,CAACW,YAAY,EAAEI,MAAM,CAAC;IACpD,IAAIK,SAAS,KAAKP,WAAW,EAAEC,cAAc,CAACM,SAAS,CAAC;EAC1D,CAAC,EACD,CAACL,MAAM,EAAEJ,YAAY,EAAEE,WAAW,CAAC,CACpC;EAED,oBACE;IAAK,SAAS,EAAEI;EAAa,gBAC3B;IAAI,SAAS,EAAEC,iBAAkB;IAAC,IAAI,EAAC,SAAS;IAAC,cAAYX;EAAK,GAC/DG,aAAa,CAACW,GAAG,CAAC,CAACC,YAAY,EAAEC,KAAK,KAAK;IAC1C,MAAM,CAACC,WAAW,EAAEC,WAAW,CAAC,GAAGd,YAAY,CAACY,KAAK,CAAC;IACtD,MAAMG,KAAK,GAAI,GAAEzB,GAAI,IAAGuB,WAAY,EAAC;IACrC,MAAMG,OAAO,GAAI,GAAEtB,KAAM,IAAGmB,WAAY,EAAC;IACzC,MAAMI,UAAU,GAAGf,WAAW,KAAKa,KAAK;IACxC,MAAMG,eAAe,GAAI,GAAEzB,aAAc,IAAGY,eAAgB,WAC1DY,UAAU,GAAG,aAAa,GAAG,EAC9B,EAAC;IAEF,oBACE;MACE,EAAE,EAAEF,KAAM;MACV,GAAG,EAAEA,KAAM;MACX,SAAS,EAAEG,eAAgB;MAC3B,IAAI,EAAC,QAAQ;MACb,IAAI,EAAC,KAAK;MACV,iBAAeD,UAAW;MAC1B,iBAAeD,OAAQ;MACvB,OAAO,EAAE,MAAM;QACb,MAAMG,OAAO,GAAGf,MAAM,CAACgB,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;QACpC,MAAMC,MAAM,GAAI,GAAEF,OAAQ,IAAGN,WAAY,EAAC;QAC1C,IAAIT,MAAM,KAAKiB,MAAM,EAAE;QACvBpB,MAAM,CAACqB,IAAI,CAAE,WAAU,EAAED,MAAM,EAAE;UAAEE,OAAO,EAAE;QAAK,CAAC,CAAC;QACnDpB,cAAc,CAACY,KAAK,CAAC;MACvB;IAAE,GACDD,WAAW,CACL;EAEb,CAAC,CAAC,CACC,EACJf,aAAa,CAACW,GAAG,CAAC,CAACC,YAAY,EAAEC,KAAK,KAAK;IAC1C,MAAM,CAACC,WAAW,CAAC,GAAGb,YAAY,CAACY,KAAK,CAAC;IACzC,MAAMG,KAAK,GAAI,GAAEzB,GAAI,IAAGuB,WAAY,EAAC;IACrC,MAAMG,OAAO,GAAI,GAAEtB,KAAM,IAAGmB,WAAY,EAAC;IACzC,IAAIX,WAAW,KAAKa,KAAK,EAAE,OAAO,IAAI;IAEtC,oBACE;MACE,EAAE,EAAEF,WAAY;MAChB,GAAG,EAAEG,OAAQ;MACb,SAAS,EAAER,YAAa;MACxB,IAAI,EAAC,UAAU;MACf,mBAAiBO;IAAM,GACtBJ,YAAY,CACT;EAEV,CAAC,CAAC,CACE;AAEV,CAAC;AAEDhB,gBAAgB,CAAC6B,SAAS,GAAG;EAC3B5B,IAAI,EAAET,SAAS,CAACsC,MAAM,CAACC,UAAU;EACjC7B,WAAW,EAAEV,SAAS,CAACsC,MAAM,CAACC,UAAU;EACxC5B,QAAQ,EAAEX,SAAS,CAACsC,MAAM;EAC1B1B,aAAa,EAAEZ,SAAS,CAACwC,KAAK,CAACD,UAAU;EACzC1B,YAAY,EAAEb,SAAS,CAACwC,KAAK,CAACD;AAChC,CAAC;AAED/B,gBAAgB,CAACiC,YAAY,GAAG;EAC9B9B,QAAQ,EAAE;AACZ,CAAC;AAED,eAAeH,gBAAgB"}

package/lib-es/components/ContentGroup/constants.js

@@ -0,0 +1,7 @@
+const TAB = 'tab';
+const TABS = 'tabs';
+const SIDEPANEL = 'sidepanel';
+const CONTENT_GROUP = 'content-group';
+const PANEL = 'panel';
+export { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL };
+//# sourceMappingURL=constants.js.map

package/lib-es/components/ContentGroup/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","names":["TAB","TABS","SIDEPANEL","CONTENT_GROUP","PANEL"],"sources":["../../../src/components/ContentGroup/constants.js"],"sourcesContent":["const TAB = 'tab';\nconst TABS = 'tabs';\nconst SIDEPANEL = 'sidepanel';\nconst CONTENT_GROUP = 'content-group';\nconst PANEL = 'panel';\n\nexport { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL };\n"],"mappings":"AAAA,MAAMA,GAAG,GAAG,KAAK;AACjB,MAAMC,IAAI,GAAG,MAAM;AACnB,MAAMC,SAAS,GAAG,WAAW;AAC7B,MAAMC,aAAa,GAAG,eAAe;AACrC,MAAMC,KAAK,GAAG,OAAO;AAErB,SAASJ,GAAG,EAAEC,IAAI,EAAEC,SAAS,EAAEC,aAAa,EAAEC,KAAK"}

package/lib-es/components/ContentGroup/helpers/get-active-tab.js

@@ -0,0 +1,10 @@
+import { TAB } from '../constants';
+const getActiveTab = (sections, url) => {
+  const decodedUrl = decodeURI(url);
+  const activeTabName = decodedUrl.split('#')[1];
+  const isUrlTabValid = !!sections.find(section => section[0] === activeTabName);
+  const tabToUse = isUrlTabValid && activeTabName || sections[0][0];
+  return `${TAB}-${tabToUse}`;
+};
+export default getActiveTab;
+//# sourceMappingURL=get-active-tab.js.map

package/lib-es/components/ContentGroup/helpers/get-active-tab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-active-tab.js","names":["TAB","getActiveTab","sections","url","decodedUrl","decodeURI","activeTabName","split","isUrlTabValid","find","section","tabToUse"],"sources":["../../../../src/components/ContentGroup/helpers/get-active-tab.js"],"sourcesContent":["import { TAB } from '../constants';\n\nconst getActiveTab = (sections, url) => {\n  const decodedUrl = decodeURI(url);\n  const activeTabName = decodedUrl.split('#')[1];\n  const isUrlTabValid = !!sections.find(section => section[0] === activeTabName);\n  const tabToUse = (isUrlTabValid && activeTabName) || sections[0][0];\n  return `${TAB}-${tabToUse}`;\n};\n\nexport default getActiveTab;\n"],"mappings":"AAAA,SAASA,GAAG,QAAQ,cAAc;AAElC,MAAMC,YAAY,GAAG,CAACC,QAAQ,EAAEC,GAAG,KAAK;EACtC,MAAMC,UAAU,GAAGC,SAAS,CAACF,GAAG,CAAC;EACjC,MAAMG,aAAa,GAAGF,UAAU,CAACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAC9C,MAAMC,aAAa,GAAG,CAAC,CAACN,QAAQ,CAACO,IAAI,CAACC,OAAO,IAAIA,OAAO,CAAC,CAAC,CAAC,KAAKJ,aAAa,CAAC;EAC9E,MAAMK,QAAQ,GAAIH,aAAa,IAAIF,aAAa,IAAKJ,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EACnE,OAAQ,GAAEF,GAAI,IAAGW,QAAS,EAAC;AAC7B,CAAC;AAED,eAAeV,YAAY"}

package/lib-es/components/ContentGroup/helpers/get-sections-data.js

@@ -0,0 +1,15 @@
+const getSectionsData = sections => sections.map(section => {
+  const {
+    props: {
+      component: {
+        settings: {
+          label,
+          name
+        } = {}
+      } = {}
+    } = {}
+  } = section;
+  return [name, label];
+});
+export default getSectionsData;
+//# sourceMappingURL=get-sections-data.js.map

package/lib-es/components/ContentGroup/helpers/get-sections-data.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"get-sections-data.js","names":["getSectionsData","sections","map","section","props","component","settings","label","name"],"sources":["../../../../src/components/ContentGroup/helpers/get-sections-data.js"],"sourcesContent":["const getSectionsData = sections =>\n  sections.map(section => {\n    const { props: { component: { settings: { label, name } = {} } = {} } = {} } = section;\n    return [name, label];\n  });\n\nexport default getSectionsData;\n"],"mappings":"AAAA,MAAMA,eAAe,GAAGC,QAAQ,IAC9BA,QAAQ,CAACC,GAAG,CAACC,OAAO,IAAI;EACtB,MAAM;IAAEC,KAAK,EAAE;MAAEC,SAAS,EAAE;QAAEC,QAAQ,EAAE;UAAEC,KAAK;UAAEC;QAAK,CAAC,GAAG,CAAC;MAAE,CAAC,GAAG,CAAC;IAAE,CAAC,GAAG,CAAC;EAAE,CAAC,GAAGL,OAAO;EACtF,OAAO,CAACK,IAAI,EAAED,KAAK,CAAC;AACtB,CAAC,CAAC;AAEJ,eAAeP,eAAe"}

package/lib-es/components/ContentGroup/helpers/index.js

@@ -0,0 +1,4 @@
+import getSectionsData from './get-sections-data';
+import getActiveTab from './get-active-tab';
+export { getSectionsData, getActiveTab };
+//# sourceMappingURL=index.js.map

package/lib-es/components/ContentGroup/helpers/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["getSectionsData","getActiveTab"],"sources":["../../../../src/components/ContentGroup/helpers/index.js"],"sourcesContent":["import getSectionsData from './get-sections-data';\nimport getActiveTab from './get-active-tab';\n\nexport { getSectionsData, getActiveTab };\n"],"mappings":"AAAA,OAAOA,eAAe,MAAM,qBAAqB;AACjD,OAAOC,YAAY,MAAM,kBAAkB;AAE3C,SAASD,eAAe,EAAEC,YAAY"}

package/lib-es/components/ContentGroupSection/ContentGroupSection.js

@@ -1,15 +1,17 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["children"];
+const _excluded = ["children", "name"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import { hasChildren } from '../../helpers';
 const ContentGroupSection = _ref => {
   let {
-      children
+      children,
+      name
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   if (!hasChildren(children)) return null;
   return /*#__PURE__*/React.createElement("div", {
+    key: name,
     className: "content-group-section"
   }, children);
 };

package/lib-es/components/ContentGroupSection/ContentGroupSection.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGroupSection.js","names":["React","PropTypes","hasChildren","ContentGroupSection","children","props","propTypes","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/ContentGroupSection/ContentGroupSection.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { hasChildren } from '../../helpers';\n\nconst ContentGroupSection = ({ children, ...props }) => {\n  if (!hasChildren(children)) return null;\n\n  return <div className=\"content-group-section\">{children}</div>;\n};\n\nContentGroupSection.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nContentGroupSection.defaultProps = { children: null };\n\nexport default ContentGroupSection;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,WAAW,QAAQ,eAAe;AAE3C,MAAMC,mBAAmB,GAAG,QAA4B;EAAA,IAA3B;MAAEC;IAAmB,CAAC;IAAPC,KAAK;EAC/C,IAAI,CAACH,WAAW,CAACE,QAAQ,CAAC,EAAE,OAAO,IAAI;EAEvC,oBAAO;IAAK,SAAS,EAAC;EAAuB,GAAEA,QAAQ,CAAO;AAChE,CAAC;AAEDD,mBAAmB,CAACG,SAAS,GAAG;EAC9BF,QAAQ,EAAEH,SAAS,CAACM,SAAS,CAAC,CAACN,SAAS,CAACO,OAAO,CAACP,SAAS,CAACQ,IAAI,CAAC,EAAER,SAAS,CAACQ,IAAI,CAAC;AACnF,CAAC;AAEDN,mBAAmB,CAACO,YAAY,GAAG;EAAEN,QAAQ,EAAE;AAAK,CAAC;AAErD,eAAeD,mBAAmB"}
+{"version":3,"file":"ContentGroupSection.js","names":["React","PropTypes","hasChildren","ContentGroupSection","children","name","props","propTypes","oneOfType","arrayOf","node","defaultProps"],"sources":["../../../src/components/ContentGroupSection/ContentGroupSection.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport { hasChildren } from '../../helpers';\n\nconst ContentGroupSection = ({ children, name, ...props }) => {\n  if (!hasChildren(children)) return null;\n\n  return (\n    <div key={name} className=\"content-group-section\">\n      {children}\n    </div>\n  );\n};\n\nContentGroupSection.propTypes = {\n  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])\n};\n\nContentGroupSection.defaultProps = { children: null };\n\nexport default ContentGroupSection;\n"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,SAASC,WAAW,QAAQ,eAAe;AAE3C,MAAMC,mBAAmB,GAAG,QAAkC;EAAA,IAAjC;MAAEC,QAAQ;MAAEC;IAAe,CAAC;IAAPC,KAAK;EACrD,IAAI,CAACJ,WAAW,CAACE,QAAQ,CAAC,EAAE,OAAO,IAAI;EAEvC,oBACE;IAAK,GAAG,EAAEC,IAAK;IAAC,SAAS,EAAC;EAAuB,GAC9CD,QAAQ,CACL;AAEV,CAAC;AAEDD,mBAAmB,CAACI,SAAS,GAAG;EAC9BH,QAAQ,EAAEH,SAAS,CAACO,SAAS,CAAC,CAACP,SAAS,CAACQ,OAAO,CAACR,SAAS,CAACS,IAAI,CAAC,EAAET,SAAS,CAACS,IAAI,CAAC;AACnF,CAAC;AAEDP,mBAAmB,CAACQ,YAAY,GAAG;EAAEP,QAAQ,EAAE;AAAK,CAAC;AAErD,eAAeD,mBAAmB"}

package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -47,18 +47,22 @@ const YoutubeEmbeded = ({
   const iframeSrc = !playlist ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}` : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;
   const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;
   useEffect(() => {
+    let isMounted = true;
     if (!priority && !isIntersecting || imageSize === YT_HQ_FORMAT) return;
     const img = new Image();
     // eslint-disable-next-line func-names
     img.onload = function () {
       let newImageSize = imageSize;
       if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
-      setImageDetails({
+      if (isMounted) setImageDetails({
         imageSize: newImageSize,
         displayImage: true
       });
     };
     img.src = posterUrl;
+    return () => {
+      isMounted = false;
+    };
   }, [imageSize, isIntersecting, posterUrl, priority]);
   const warmConnections = () => {
     if (preconnected) return;

package/lib-es/components/Video/providers/YouTube/YoutubeEmbeded.js.map

@@ -1 +1 @@
-{"version":3,"file":"YoutubeEmbeded.js","names":["React","useState","useEffect","PropTypes","useInView","IN_VIEW_CONFIG","getPosterUrl","YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","placeholderOnly","imageData","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","paramsImp","ytUrl","posterUrl","mutedValue","iframeSrc","parsedWrapperClassname","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","bool","func","string","object","defaultProps"],"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\nimport { getPosterUrl, YT_HQ_FORMAT, YT_IMAGE_URL } from './helpers';\n\nconst YoutubeEmbeded = ({\n  autoplay,\n  videoId,\n  playlistCoverId,\n  videoTitle,\n  poster,\n  videoParams,\n  announce,\n  noCookie,\n  webp,\n  playlist,\n  onIframeAdded,\n  muted,\n  adNetwork,\n  iframeClass,\n  priority,\n  placeholderOnly,\n  imageData\n}) => {\n  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n  const [preconnected, setPreconnected] = useState(false);\n  const [renderIframe, setRenderIframe] = useState(!!autoplay);\n  const [{ imageSize, displayImage }, setImageDetails] = useState({\n    imageSize: poster,\n    displayImage: priority\n  });\n\n  const encodedId = encodeURIComponent(videoId);\n  const paramsImp = videoParams ? `&${videoParams}` : '';\n  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n  const posterUrl = getPosterUrl({\n    imageData,\n    playlistCoverId,\n    playlist,\n    encodedId,\n    imageSize,\n    webp\n  });\n  const mutedValue = muted ? '&mute=1' : '';\n  const iframeSrc = !playlist\n    ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n    : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n  useEffect(\n    () => {\n      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      // eslint-disable-next-line func-names\n      img.onload = function() {\n        let newImageSize = imageSize;\n        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n        setImageDetails({ imageSize: newImageSize, displayImage: true });\n      };\n\n      img.src = posterUrl;\n    },\n    [imageSize, isIntersecting, posterUrl, priority]\n  );\n\n  const warmConnections = () => {\n    if (preconnected) return;\n    setPreconnected(true);\n  };\n\n  const addIframe = () => {\n    if (renderIframe || placeholderOnly) return;\n    onIframeAdded();\n    setRenderIframe(true);\n  };\n\n  return (\n    <>\n      {preconnected && (\n        <>\n          <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n          <link rel=\"preconnect\" href={ytUrl} />\n          <link rel=\"preconnect\" href=\"https://www.google.com\" />\n          {adNetwork && (\n            <>\n              <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n              <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n            </>\n          )}\n        </>\n      )}\n      <div\n        ref={outerRef}\n        role=\"button\"\n        onPointerOver={warmConnections}\n        onClick={addIframe}\n        className={parsedWrapperClassname}\n        data-title={videoTitle}\n        style={{\n          backgroundImage: `url(${displayImage ? posterUrl : ''})`\n        }}>\n        <div\n          type=\"button\"\n          className=\"yt-facade-button-wrapper\"\n          aria-label={`${announce} ${videoTitle}`}>\n          <div className=\"yt-facade-button\" />\n        </div>\n        {renderIframe && (\n          <iframe\n            className={iframeClass}\n            title={videoTitle}\n            allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            src={iframeSrc}\n          />\n        )}\n      </div>\n    </>\n  );\n};\n\nYoutubeEmbeded.propTypes = {\n  priority: PropTypes.bool,\n  onIframeAdded: PropTypes.func,\n  adNetwork: PropTypes.bool,\n  autoplay: PropTypes.bool,\n  playlist: PropTypes.bool,\n  muted: PropTypes.bool,\n  webp: PropTypes.bool,\n  noCookie: PropTypes.bool,\n  videoId: PropTypes.string,\n  iframeClass: PropTypes.string,\n  poster: PropTypes.string,\n  announce: PropTypes.string,\n  playlistCoverId: PropTypes.string,\n  videoParams: PropTypes.string,\n  videoTitle: PropTypes.string,\n  placeholderOnly: PropTypes.bool,\n  imageData: PropTypes.object\n};\n\nYoutubeEmbeded.defaultProps = {\n  priority: true,\n  onIframeAdded: () => {},\n  adNetwork: false,\n  autoplay: false,\n  playlist: false,\n  muted: false,\n  webp: false,\n  noCookie: false,\n  iframeClass: '',\n  poster: 'sddefault',\n  announce: 'Watch',\n  videoId: '',\n  playlistCoverId: '',\n  videoParams: '',\n  videoTitle: '',\n  placeholderOnly: false,\n  imageData: {}\n};\n\nexport default YoutubeEmbeded;\n"],"mappings":"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"}
+{"version":3,"file":"YoutubeEmbeded.js","names":["React","useState","useEffect","PropTypes","useInView","IN_VIEW_CONFIG","getPosterUrl","YT_HQ_FORMAT","YT_IMAGE_URL","YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","placeholderOnly","imageData","isIntersecting","outerRef","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","paramsImp","ytUrl","posterUrl","mutedValue","iframeSrc","parsedWrapperClassname","isMounted","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","backgroundImage","propTypes","bool","func","string","object","defaultProps"],"sources":["../../../../../src/components/Video/providers/YouTube/YoutubeEmbeded.js"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport { useInView } from '@blaze-react/utils/lib/customHooks';\nimport { IN_VIEW_CONFIG } from '../../../../constants';\nimport { getPosterUrl, YT_HQ_FORMAT, YT_IMAGE_URL } from './helpers';\n\nconst YoutubeEmbeded = ({\n  autoplay,\n  videoId,\n  playlistCoverId,\n  videoTitle,\n  poster,\n  videoParams,\n  announce,\n  noCookie,\n  webp,\n  playlist,\n  onIframeAdded,\n  muted,\n  adNetwork,\n  iframeClass,\n  priority,\n  placeholderOnly,\n  imageData\n}) => {\n  const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);\n  const [preconnected, setPreconnected] = useState(false);\n  const [renderIframe, setRenderIframe] = useState(!!autoplay);\n  const [{ imageSize, displayImage }, setImageDetails] = useState({\n    imageSize: poster,\n    displayImage: priority\n  });\n\n  const encodedId = encodeURIComponent(videoId);\n  const paramsImp = videoParams ? `&${videoParams}` : '';\n  const ytUrl = noCookie ? 'https://www.youtube-nocookie.com' : 'https://www.youtube.com';\n  const posterUrl = getPosterUrl({\n    imageData,\n    playlistCoverId,\n    playlist,\n    encodedId,\n    imageSize,\n    webp\n  });\n  const mutedValue = muted ? '&mute=1' : '';\n  const iframeSrc = !playlist\n    ? `${ytUrl}/embed/${encodedId}?autoplay=1${mutedValue}${paramsImp}`\n    : `${ytUrl}/embed/videoseries?autoplay=1${mutedValue}&list=${encodedId}${paramsImp}`;\n  const parsedWrapperClassname = `yt-facade ${renderIframe ? 'yt-activated' : ''}`;\n\n  useEffect(\n    () => {\n      let isMounted = true;\n      if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;\n\n      const img = new Image();\n      // eslint-disable-next-line func-names\n      img.onload = function() {\n        let newImageSize = imageSize;\n        if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;\n        if (isMounted) setImageDetails({ imageSize: newImageSize, displayImage: true });\n      };\n\n      img.src = posterUrl;\n      return () => {\n        isMounted = false;\n      };\n    },\n    [imageSize, isIntersecting, posterUrl, priority]\n  );\n\n  const warmConnections = () => {\n    if (preconnected) return;\n    setPreconnected(true);\n  };\n\n  const addIframe = () => {\n    if (renderIframe || placeholderOnly) return;\n    onIframeAdded();\n    setRenderIframe(true);\n  };\n\n  return (\n    <>\n      {preconnected && (\n        <>\n          <link rel=\"preconnect\" href={YT_IMAGE_URL} />\n          <link rel=\"preconnect\" href={ytUrl} />\n          <link rel=\"preconnect\" href=\"https://www.google.com\" />\n          {adNetwork && (\n            <>\n              <link rel=\"preconnect\" href=\"https://static.doubleclick.net\" />\n              <link rel=\"preconnect\" href=\"https://googleads.g.doubleclick.net\" />\n            </>\n          )}\n        </>\n      )}\n      <div\n        ref={outerRef}\n        role=\"button\"\n        onPointerOver={warmConnections}\n        onClick={addIframe}\n        className={parsedWrapperClassname}\n        data-title={videoTitle}\n        style={{\n          backgroundImage: `url(${displayImage ? posterUrl : ''})`\n        }}>\n        <div\n          type=\"button\"\n          className=\"yt-facade-button-wrapper\"\n          aria-label={`${announce} ${videoTitle}`}>\n          <div className=\"yt-facade-button\" />\n        </div>\n        {renderIframe && (\n          <iframe\n            className={iframeClass}\n            title={videoTitle}\n            allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\"\n            allowFullScreen\n            src={iframeSrc}\n          />\n        )}\n      </div>\n    </>\n  );\n};\n\nYoutubeEmbeded.propTypes = {\n  priority: PropTypes.bool,\n  onIframeAdded: PropTypes.func,\n  adNetwork: PropTypes.bool,\n  autoplay: PropTypes.bool,\n  playlist: PropTypes.bool,\n  muted: PropTypes.bool,\n  webp: PropTypes.bool,\n  noCookie: PropTypes.bool,\n  videoId: PropTypes.string,\n  iframeClass: PropTypes.string,\n  poster: PropTypes.string,\n  announce: PropTypes.string,\n  playlistCoverId: PropTypes.string,\n  videoParams: PropTypes.string,\n  videoTitle: PropTypes.string,\n  placeholderOnly: PropTypes.bool,\n  imageData: PropTypes.object\n};\n\nYoutubeEmbeded.defaultProps = {\n  priority: true,\n  onIframeAdded: () => {},\n  adNetwork: false,\n  autoplay: false,\n  playlist: false,\n  muted: false,\n  webp: false,\n  noCookie: false,\n  iframeClass: '',\n  poster: 'sddefault',\n  announce: 'Watch',\n  videoId: '',\n  playlistCoverId: '',\n  videoParams: '',\n  videoTitle: '',\n  placeholderOnly: false,\n  imageData: {}\n};\n\nexport default YoutubeEmbeded;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.126.0-admin-updates.3",
+  "version": "0.126.0-alpha.5",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,14 +27,14 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "0.126.0-admin-updates.0",
+    "@blaze-cms/core-auth-ui": "^0.125.0",
     "@blaze-cms/core-errors": "^0.118.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.3",
-    "@blaze-cms/nextjs-components": "0.126.0-admin-updates.0",
-    "@blaze-cms/plugin-search-ui": "0.126.0-admin-updates.3",
+    "@blaze-cms/nextjs-components": "^0.125.0",
+    "@blaze-cms/plugin-search-ui": "^0.125.0",
     "@blaze-cms/setup-ui": "^0.92.0",
-    "@blaze-cms/utils": "0.126.0-admin-updates.0",
-    "@blaze-cms/utils-handlebars": "0.126.0-admin-updates.0",
+    "@blaze-cms/utils": "^0.125.0",
+    "@blaze-cms/utils-handlebars": "^0.125.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
@@ -87,5 +87,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "22c9ef639e0db682a0a57fc15ac8b8a58f26d41f"
+  "gitHead": "69e591d8d0845ae2981a58bb33f89c7121aa3da2"
 }

package/src/components/ContentGroup/ContentGroup.js

@@ -1,14 +1,26 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ContentGroupTabs from './ContentGroupTabs';
+import { getSectionsData } from './helpers';
 
-const ContentGroup = ({ contentType, ...props }) => {
-  if (contentType === 'tab' || contentType === 'sidepanel')
-    return <ContentGroupTabs contentType={contentType} {...props} />;
-  return '';
+const ContentGroup = ({ contentType, children, ...props }) => {
+  const groupSections = children?.props?.children[1];
+  if (!groupSections || !groupSections.length) return '';
+  if (contentType !== 'tab' && contentType !== 'sidepanel') return '';
+  const sectionsData = getSectionsData(groupSections);
+
+  return (
+    <ContentGroupTabs
+      contentType={contentType}
+      groupSections={groupSections}
+      sectionsData={sectionsData}
+      {...props}
+    />
+  );
 };
 
 ContentGroup.propTypes = {
+  children: PropTypes.object.isRequired,
   contentType: PropTypes.string.isRequired
 };
 

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -1,28 +1,37 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
+import { useRouter } from 'next/router';
+import { getActiveTab } from './helpers';
+import { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL } from './constants';
 
-const ContentGroupTabs = ({ name, contentType, modifier, children, ...props }) => {
-  const [selectedTab, setSelectedTab] = useState('tab-0');
-  const groupSections = children?.props?.children[1];
-  const contentClassame = contentType === 'tab' ? '-tabs' : '-sidepanel';
-  if (!groupSections || !groupSections.length) return '';
+const ContentGroupTabs = ({ name, contentType, modifier, groupSections, sectionsData }) => {
+  const router = useRouter();
+  const [selectedTab, setSelectedTab] = useState(getActiveTab(sectionsData, ''));
+  const { asPath } = router;
+  const contentClassame = contentType === TAB ? TABS : SIDEPANEL;
+  const mainDivClass = `${CONTENT_GROUP}-${contentClassame}`;
+  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]
+  );
 
   return (
-    <div className={`content-group${contentClassame}`}>
-      <ul
-        className={`content-group${contentClassame}__buttons-wrapper`}
-        role="tablist"
-        aria-label={name}>
+    <div className={mainDivClass}>
+      <ul className={contentGroupClass} role="tablist" aria-label={name}>
         {groupSections.map((groupSection, index) => {
-          const {
-            props: { component: { settings: { label: sectionLabel } = {} } = {} } = {}
-          } = groupSection;
-          const tabId = `tab-${index}`;
-          const panelId = `panel-${index}`;
+          const [sectionName, sectioLabel] = sectionsData[index];
+          const tabId = `${TAB}-${sectionName}`;
+          const panelId = `${PANEL}-${sectionName}`;
           const isSelected = selectedTab === tabId;
-          const buttonClassName = isSelected
-            ? `content-group${contentClassame}__button--is-active`
-            : `content-group${contentClassame}__button`;
+          const buttonClassName = `${CONTENT_GROUP}-${contentClassame}__button${
+            isSelected ? '--is-active' : ''
+          }`;
 
           return (
             <button
@@ -33,22 +42,29 @@ const ContentGroupTabs = ({ name, contentType, modifier, children, ...props }) =
               role="tab"
               aria-selected={isSelected}
               aria-controls={panelId}
-              onClick={() => setSelectedTab(tabId)}>
-              {sectionLabel}
+              onClick={() => {
+                const baseUrl = asPath.split('#')[0];
+                const newUrl = `${baseUrl}#${sectionName}`;
+                if (asPath === newUrl) return;
+                router.push(`/Resolver`, newUrl, { shallow: true });
+                setSelectedTab(tabId);
+              }}>
+              {sectioLabel}
             </button>
           );
         })}
       </ul>
       {groupSections.map((groupSection, index) => {
-        const tabId = `tab-${index}`;
-        const panelId = `panel-${index}`;
+        const [sectionName] = sectionsData[index];
+        const tabId = `${TAB}-${sectionName}`;
+        const panelId = `${PANEL}-${sectionName}`;
         if (selectedTab !== tabId) return null;
 
         return (
           <div
-            id={panelId}
+            id={sectionName}
             key={panelId}
-            className={`content-group${contentClassame}__content-section`}
+            className={sectionClass}
             role="tabpanel"
             aria-labelledby={tabId}>
             {groupSection}
@@ -63,12 +79,12 @@ ContentGroupTabs.propTypes = {
   name: PropTypes.string.isRequired,
   contentType: PropTypes.string.isRequired,
   modifier: PropTypes.string,
-  children: PropTypes.object
+  groupSections: PropTypes.array.isRequired,
+  sectionsData: PropTypes.array.isRequired
 };
 
 ContentGroupTabs.defaultProps = {
-  modifier: '',
-  children: {}
+  modifier: ''
 };
 
 export default ContentGroupTabs;

package/src/components/ContentGroup/constants.js

@@ -0,0 +1,7 @@
+const TAB = 'tab';
+const TABS = 'tabs';
+const SIDEPANEL = 'sidepanel';
+const CONTENT_GROUP = 'content-group';
+const PANEL = 'panel';
+
+export { TAB, TABS, SIDEPANEL, CONTENT_GROUP, PANEL };

package/src/components/ContentGroup/helpers/get-active-tab.js

@@ -0,0 +1,11 @@
+import { TAB } from '../constants';
+
+const getActiveTab = (sections, url) => {
+  const decodedUrl = decodeURI(url);
+  const activeTabName = decodedUrl.split('#')[1];
+  const isUrlTabValid = !!sections.find(section => section[0] === activeTabName);
+  const tabToUse = (isUrlTabValid && activeTabName) || sections[0][0];
+  return `${TAB}-${tabToUse}`;
+};
+
+export default getActiveTab;

package/src/components/ContentGroup/helpers/get-sections-data.js

@@ -0,0 +1,7 @@
+const getSectionsData = sections =>
+  sections.map(section => {
+    const { props: { component: { settings: { label, name } = {} } = {} } = {} } = section;
+    return [name, label];
+  });
+
+export default getSectionsData;

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

@@ -0,0 +1,4 @@
+import getSectionsData from './get-sections-data';
+import getActiveTab from './get-active-tab';
+
+export { getSectionsData, getActiveTab };

package/src/components/ContentGroupSection/ContentGroupSection.js

@@ -2,10 +2,14 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { hasChildren } from '../../helpers';
 
-const ContentGroupSection = ({ children, ...props }) => {
+const ContentGroupSection = ({ children, name, ...props }) => {
   if (!hasChildren(children)) return null;
 
-  return <div className="content-group-section">{children}</div>;
+  return (
+    <div key={name} className="content-group-section">
+      {children}
+    </div>
+  );
 };
 
 ContentGroupSection.propTypes = {

package/src/components/Video/providers/YouTube/YoutubeEmbeded.js

@@ -50,6 +50,7 @@ const YoutubeEmbeded = ({
 
   useEffect(
     () => {
+      let isMounted = true;
       if ((!priority && !isIntersecting) || imageSize === YT_HQ_FORMAT) return;
 
       const img = new Image();
@@ -57,10 +58,13 @@ const YoutubeEmbeded = ({
       img.onload = function() {
         let newImageSize = imageSize;
         if (this && this.width === 120) newImageSize = YT_HQ_FORMAT;
-        setImageDetails({ imageSize: newImageSize, displayImage: true });
+        if (isMounted) setImageDetails({ imageSize: newImageSize, displayImage: true });
       };
 
       img.src = posterUrl;
+      return () => {
+        isMounted = false;
+      };
     },
     [imageSize, isIntersecting, posterUrl, priority]
   );

package/tests/unit/src/components/ContentGroup/ContentGroupTabs.test.js

@@ -1,14 +1,27 @@
+import React from 'react';
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
 import ContentGroupTabs from '../../../../../src/components/ContentGroup/ContentGroupTabs';
 
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ asPath: 'tabs-url' }))
+}));
+
+const mockedProps = {
+  name: 'testTabs',
+  contentType: 'tab',
+  groupSections: [<div>section one</div>, <div>section two</div>],
+  sectionsData: [['section-one', 'sectionOne'], ['section-two', 'sectionTwo']]
+};
+
 describe('ContentGroupTabs component', () => {
   it('should match snapshot and render tabs content', () => {
-    const { asFragment: tabContentGroup } = render(ContentGroupTabs, { contentType: 'tab' });
+    const { asFragment: tabContentGroup } = render(ContentGroupTabs, mockedProps);
     expect(tabContentGroup()).toMatchSnapshot();
   });
 
   it('should match snapshot and render sidepanel content', () => {
     const { asFragment: sidepanelContentGroup } = render(ContentGroupTabs, {
+      ...mockedProps,
       contentType: 'sidepanel'
     });
     expect(sidepanelContentGroup()).toMatchSnapshot();