@blaze-cms/react-page-builder 0.126.0-alpha.0 → 0.126.0-alpha.5

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [0.126.0-alpha.5](https://github.com/thebyte9/blaze/compare/v0.126.0-alpha.4...v0.126.0-alpha.5) (2023-01-12)
+
+
+### Features
+
+* content groups anchor links in the url ([#3736](https://github.com/thebyte9/blaze/issues/3736)) ([b0fb981](https://github.com/thebyte9/blaze/commit/b0fb9814a62bba34e005537a7410550b1ac79afc))
+
+
+
+
+
 # [0.126.0-alpha.0](https://github.com/thebyte9/blaze/compare/v0.125.0...v0.126.0-alpha.0) (2022-12-02)
 
 

package/lib/components/ContentGroup/ContentGroup.js

@@ -11,16 +11,25 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _ContentGroupTabs = _interopRequireDefault(require("./ContentGroupTabs"));
-var _excluded = ["contentType"];
+var _helpers = require("./helpers");
+var _excluded = ["contentType", "children"];
 var ContentGroup = function ContentGroup(_ref) {
+  var _children$props;
   var contentType = _ref.contentType,
+    children = _ref.children,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  if (contentType === 'tab' || contentType === 'sidepanel') return /*#__PURE__*/_react["default"].createElement(_ContentGroupTabs["default"], (0, _extends2["default"])({
-    contentType: contentType
+  var groupSections = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[1];
+  if (!groupSections || !groupSections.length) return '';
+  if (contentType !== 'tab' && contentType !== 'sidepanel') return '';
+  var sectionsData = (0, _helpers.getSectionsData)(groupSections);
+  return /*#__PURE__*/_react["default"].createElement(_ContentGroupTabs["default"], (0, _extends2["default"])({
+    contentType: contentType,
+    groupSections: groupSections,
+    sectionsData: sectionsData
   }, props));
-  return '';
 };
 ContentGroup.propTypes = {
+  children: _propTypes["default"].object.isRequired,
   contentType: _propTypes["default"].string.isRequired
 };
 ContentGroup.defaultProps = {};

package/lib/components/ContentGroup/ContentGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ContentGroup.js","names":["ContentGroup","contentType","props","propTypes","PropTypes","string","isRequired","defaultProps"],"sources":["../../../src/components/ContentGroup/ContentGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ContentGroupTabs from './ContentGroupTabs';\n\nconst ContentGroup = ({ contentType, ...props }) => {\n  if (contentType === 'tab' || contentType === 'sidepanel')\n    return <ContentGroupTabs contentType={contentType} {...props} />;\n  return '';\n};\n\nContentGroup.propTypes = {\n  contentType: PropTypes.string.isRequired\n};\n\nContentGroup.defaultProps = {};\n\nexport default ContentGroup;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AAAkD;AAElD,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAAkC;EAAA,IAA5BC,WAAW,QAAXA,WAAW;IAAKC,KAAK;EAC3C,IAAID,WAAW,KAAK,KAAK,IAAIA,WAAW,KAAK,WAAW,EACtD,oBAAO,gCAAC,4BAAgB;IAAC,WAAW,EAAEA;EAAY,GAAKC,KAAK,EAAI;EAClE,OAAO,EAAE;AACX,CAAC;AAEDF,YAAY,CAACG,SAAS,GAAG;EACvBF,WAAW,EAAEG,qBAAS,CAACC,MAAM,CAACC;AAChC,CAAC;AAEDN,YAAY,CAACO,YAAY,GAAG,CAAC,CAAC;AAAC,eAEhBP,YAAY;AAAA"}
+{"version":3,"file":"ContentGroup.js","names":["ContentGroup","contentType","children","props","groupSections","length","sectionsData","getSectionsData","propTypes","PropTypes","object","isRequired","string","defaultProps"],"sources":["../../../src/components/ContentGroup/ContentGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ContentGroupTabs from './ContentGroupTabs';\nimport { getSectionsData } from './helpers';\n\nconst ContentGroup = ({ contentType, children, ...props }) => {\n  const groupSections = children?.props?.children[1];\n  if (!groupSections || !groupSections.length) return '';\n  if (contentType !== 'tab' && contentType !== 'sidepanel') return '';\n  const sectionsData = getSectionsData(groupSections);\n\n  return (\n    <ContentGroupTabs\n      contentType={contentType}\n      groupSections={groupSections}\n      sectionsData={sectionsData}\n      {...props}\n    />\n  );\n};\n\nContentGroup.propTypes = {\n  children: PropTypes.object.isRequired,\n  contentType: PropTypes.string.isRequired\n};\n\nContentGroup.defaultProps = {};\n\nexport default ContentGroup;\n"],"mappings":";;;;;;;;;;AAAA;AACA;AACA;AACA;AAA4C;AAE5C,IAAMA,YAAY,GAAG,SAAfA,YAAY,OAA4C;EAAA;EAAA,IAAtCC,WAAW,QAAXA,WAAW;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EACrD,IAAMC,aAAa,GAAGF,QAAQ,aAARA,QAAQ,0CAARA,QAAQ,CAAEC,KAAK,oDAAf,gBAAiBD,QAAQ,CAAC,CAAC,CAAC;EAClD,IAAI,CAACE,aAAa,IAAI,CAACA,aAAa,CAACC,MAAM,EAAE,OAAO,EAAE;EACtD,IAAIJ,WAAW,KAAK,KAAK,IAAIA,WAAW,KAAK,WAAW,EAAE,OAAO,EAAE;EACnE,IAAMK,YAAY,GAAG,IAAAC,wBAAe,EAACH,aAAa,CAAC;EAEnD,oBACE,gCAAC,4BAAgB;IACf,WAAW,EAAEH,WAAY;IACzB,aAAa,EAAEG,aAAc;IAC7B,YAAY,EAAEE;EAAa,GACvBH,KAAK,EACT;AAEN,CAAC;AAEDH,YAAY,CAACQ,SAAS,GAAG;EACvBN,QAAQ,EAAEO,qBAAS,CAACC,MAAM,CAACC,UAAU;EACrCV,WAAW,EAAEQ,qBAAS,CAACG,MAAM,CAACD;AAChC,CAAC;AAEDX,YAAY,CAACa,YAAY,GAAG,CAAC,CAAC;AAAC,eAEhBb,YAAY;AAAA"}

package/lib/components/ContentGroup/ContentGroupTabs.js

@@ -13,47 +13,51 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 require("core-js/modules/es.function.name.js");
+require("core-js/modules/es.array.concat.js");
 require("core-js/modules/es.array.map.js");
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _excluded = ["name", "contentType", "modifier", "children"];
+var _router = require("next/router");
+var _helpers = require("./helpers");
+var _constants = require("./constants");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var ContentGroupTabs = function ContentGroupTabs(_ref) {
-  var _children$props;
   var name = _ref.name,
     contentType = _ref.contentType,
     modifier = _ref.modifier,
-    children = _ref.children,
-    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
-  var _useState = (0, _react.useState)('tab-0'),
+    groupSections = _ref.groupSections,
+    sectionsData = _ref.sectionsData;
+  var router = (0, _router.useRouter)();
+  var _useState = (0, _react.useState)((0, _helpers.getActiveTab)(sectionsData, '')),
     _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
     selectedTab = _useState2[0],
     setSelectedTab = _useState2[1];
-  var groupSections = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[1];
-  var contentClassame = contentType === 'tab' ? '-tabs' : '-sidepanel';
-  if (!groupSections || !groupSections.length) return '';
+  var asPath = router.asPath;
+  var contentClassame = contentType === _constants.TAB ? _constants.TABS : _constants.SIDEPANEL;
+  var mainDivClass = "".concat(_constants.CONTENT_GROUP, "-").concat(contentClassame);
+  var contentGroupClass = "".concat(_constants.CONTENT_GROUP, "-").concat(contentClassame, "__buttons-wrapper");
+  var sectionClass = "".concat(_constants.CONTENT_GROUP, "-").concat(contentClassame, "__content-section");
+  (0, _react.useEffect)(function () {
+    var activeTab = (0, _helpers.getActiveTab)(sectionsData, asPath);
+    if (activeTab !== selectedTab) setSelectedTab(activeTab);
+  }, [asPath, sectionsData, selectedTab]);
   return /*#__PURE__*/_react["default"].createElement("div", {
-    className: "content-group".concat(contentClassame)
+    className: mainDivClass
   }, /*#__PURE__*/_react["default"].createElement("ul", {
-    className: "content-group".concat(contentClassame, "__buttons-wrapper"),
+    className: contentGroupClass,
     role: "tablist",
     "aria-label": name
   }, groupSections.map(function (groupSection, index) {
-    var _groupSection$props = groupSection.props;
-    _groupSection$props = _groupSection$props === void 0 ? {} : _groupSection$props;
-    var _groupSection$props$c = _groupSection$props.component;
-    _groupSection$props$c = _groupSection$props$c === void 0 ? {} : _groupSection$props$c;
-    var _groupSection$props$c2 = _groupSection$props$c.settings;
-    _groupSection$props$c2 = _groupSection$props$c2 === void 0 ? {} : _groupSection$props$c2;
-    var sectionLabel = _groupSection$props$c2.label;
-    var tabId = "tab-".concat(index);
-    var panelId = "panel-".concat(index);
+    var _sectionsData$index = (0, _slicedToArray2["default"])(sectionsData[index], 2),
+      sectionName = _sectionsData$index[0],
+      sectioLabel = _sectionsData$index[1];
+    var tabId = "".concat(_constants.TAB, "-").concat(sectionName);
+    var panelId = "".concat(_constants.PANEL, "-").concat(sectionName);
     var isSelected = selectedTab === tabId;
-    var buttonClassName = isSelected ? "content-group".concat(contentClassame, "__button--is-active") : "content-group".concat(contentClassame, "__button");
+    var buttonClassName = "".concat(_constants.CONTENT_GROUP, "-").concat(contentClassame, "__button").concat(isSelected ? '--is-active' : '');
     return /*#__PURE__*/_react["default"].createElement("button", {
       id: tabId,
       key: tabId,
@@ -63,17 +67,25 @@ var ContentGroupTabs = function ContentGroupTabs(_ref) {
       "aria-selected": isSelected,
       "aria-controls": panelId,
       onClick: function onClick() {
-        return setSelectedTab(tabId);
+        var baseUrl = asPath.split('#')[0];
+        var newUrl = "".concat(baseUrl, "#").concat(sectionName);
+        if (asPath === newUrl) return;
+        router.push("/Resolver", newUrl, {
+          shallow: true
+        });
+        setSelectedTab(tabId);
       }
-    }, sectionLabel);
+    }, sectioLabel);
   })), groupSections.map(function (groupSection, index) {
-    var tabId = "tab-".concat(index);
-    var panelId = "panel-".concat(index);
+    var _sectionsData$index2 = (0, _slicedToArray2["default"])(sectionsData[index], 1),
+      sectionName = _sectionsData$index2[0];
+    var tabId = "".concat(_constants.TAB, "-").concat(sectionName);
+    var panelId = "".concat(_constants.PANEL, "-").concat(sectionName);
     if (selectedTab !== tabId) return null;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      id: panelId,
+      id: sectionName,
       key: panelId,
-      className: "content-group".concat(contentClassame, "__content-section"),
+      className: sectionClass,
       role: "tabpanel",
       "aria-labelledby": tabId
     }, groupSection);
@@ -83,11 +95,11 @@ ContentGroupTabs.propTypes = {
   name: _propTypes["default"].string.isRequired,
   contentType: _propTypes["default"].string.isRequired,
   modifier: _propTypes["default"].string,
-  children: _propTypes["default"].object
+  groupSections: _propTypes["default"].array.isRequired,
+  sectionsData: _propTypes["default"].array.isRequired
 };
 ContentGroupTabs.defaultProps = {
-  modifier: '',
-  children: {}
+  modifier: ''
 };
 var _default = ContentGroupTabs;
 exports["default"] = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGroupTabs.js","names":["ContentGroupTabs","name","contentType","modifier","children","props","useState","selectedTab","setSelectedTab","groupSections","contentClassame","length","map","groupSection","index","component","settings","sectionLabel","label","tabId","panelId","isSelected","buttonClassName","propTypes","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;AACA;AAAmC;AAAA;AAAA;AAEnC,IAAMA,gBAAgB,GAAG,SAAnBA,gBAAgB,OAA4D;EAAA;EAAA,IAAtDC,IAAI,QAAJA,IAAI;IAAEC,WAAW,QAAXA,WAAW;IAAEC,QAAQ,QAARA,QAAQ;IAAEC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EACzE,gBAAsC,IAAAC,eAAQ,EAAC,OAAO,CAAC;IAAA;IAAhDC,WAAW;IAAEC,cAAc;EAClC,IAAMC,aAAa,GAAGL,QAAQ,aAARA,QAAQ,0CAARA,QAAQ,CAAEC,KAAK,oDAAf,gBAAiBD,QAAQ,CAAC,CAAC,CAAC;EAClD,IAAMM,eAAe,GAAGR,WAAW,KAAK,KAAK,GAAG,OAAO,GAAG,YAAY;EACtE,IAAI,CAACO,aAAa,IAAI,CAACA,aAAa,CAACE,MAAM,EAAE,OAAO,EAAE;EAEtD,oBACE;IAAK,SAAS,yBAAkBD,eAAe;EAAG,gBAChD;IACE,SAAS,yBAAkBA,eAAe,sBAAoB;IAC9D,IAAI,EAAC,SAAS;IACd,cAAYT;EAAK,GAChBQ,aAAa,CAACG,GAAG,CAAC,UAACC,YAAY,EAAEC,KAAK,EAAK;IAC1C,0BAEID,YAAY,CADdR,KAAK;IADP,uDAC0E,CAAC,CAAC;IAD5E,gDACWU,SAAS;IADpB,2DACmE,CAAC,CAAC;IADrE,mDACwBC,QAAQ;IADhC,6DAC4D,CAAC,CAAC;IAD9D,IAC2CC,YAAY,0BAAnBC,KAAK;IAEzC,IAAMC,KAAK,iBAAUL,KAAK,CAAE;IAC5B,IAAMM,OAAO,mBAAYN,KAAK,CAAE;IAChC,IAAMO,UAAU,GAAGd,WAAW,KAAKY,KAAK;IACxC,IAAMG,eAAe,GAAGD,UAAU,0BACdX,eAAe,kDACfA,eAAe,aAAU;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;QAAA,OAAMZ,cAAc,CAACW,KAAK,CAAC;MAAA;IAAC,GACpCF,YAAY,CACN;EAEb,CAAC,CAAC,CACC,EACJR,aAAa,CAACG,GAAG,CAAC,UAACC,YAAY,EAAEC,KAAK,EAAK;IAC1C,IAAMK,KAAK,iBAAUL,KAAK,CAAE;IAC5B,IAAMM,OAAO,mBAAYN,KAAK,CAAE;IAChC,IAAIP,WAAW,KAAKY,KAAK,EAAE,OAAO,IAAI;IAEtC,oBACE;MACE,EAAE,EAAEC,OAAQ;MACZ,GAAG,EAAEA,OAAQ;MACb,SAAS,yBAAkBV,eAAe,sBAAoB;MAC9D,IAAI,EAAC,UAAU;MACf,mBAAiBS;IAAM,GACtBN,YAAY,CACT;EAEV,CAAC,CAAC,CACE;AAEV,CAAC;AAEDb,gBAAgB,CAACuB,SAAS,GAAG;EAC3BtB,IAAI,EAAEuB,qBAAS,CAACC,MAAM,CAACC,UAAU;EACjCxB,WAAW,EAAEsB,qBAAS,CAACC,MAAM,CAACC,UAAU;EACxCvB,QAAQ,EAAEqB,qBAAS,CAACC,MAAM;EAC1BrB,QAAQ,EAAEoB,qBAAS,CAACG;AACtB,CAAC;AAED3B,gBAAgB,CAAC4B,YAAY,GAAG;EAC9BzB,QAAQ,EAAE,EAAE;EACZC,QAAQ,EAAE,CAAC;AACb,CAAC;AAAC,eAEaJ,gBAAgB;AAAA"}
+{"version":3,"file":"ContentGroupTabs.js","names":["ContentGroupTabs","name","contentType","modifier","groupSections","sectionsData","router","useRouter","useState","getActiveTab","selectedTab","setSelectedTab","asPath","contentClassame","TAB","TABS","SIDEPANEL","mainDivClass","CONTENT_GROUP","contentGroupClass","sectionClass","useEffect","activeTab","map","groupSection","index","sectionName","sectioLabel","tabId","panelId","PANEL","isSelected","buttonClassName","baseUrl","split","newUrl","push","shallow","propTypes","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":"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"}

package/lib/components/ContentGroup/constants.js

@@ -0,0 +1,18 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TABS = exports.TAB = exports.SIDEPANEL = exports.PANEL = exports.CONTENT_GROUP = void 0;
+var TAB = 'tab';
+exports.TAB = TAB;
+var TABS = 'tabs';
+exports.TABS = TABS;
+var SIDEPANEL = 'sidepanel';
+exports.SIDEPANEL = SIDEPANEL;
+var CONTENT_GROUP = 'content-group';
+exports.CONTENT_GROUP = CONTENT_GROUP;
+var PANEL = 'panel';
+exports.PANEL = PANEL;
+//# sourceMappingURL=constants.js.map

package/lib/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,IAAMA,GAAG,GAAG,KAAK;AAAC;AAClB,IAAMC,IAAI,GAAG,MAAM;AAAC;AACpB,IAAMC,SAAS,GAAG,WAAW;AAAC;AAC9B,IAAMC,aAAa,GAAG,eAAe;AAAC;AACtC,IAAMC,KAAK,GAAG,OAAO;AAAC"}

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

@@ -0,0 +1,23 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.find.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.array.concat.js");
+var _constants = require("../constants");
+var getActiveTab = function getActiveTab(sections, url) {
+  var decodedUrl = decodeURI(url);
+  var activeTabName = decodedUrl.split('#')[1];
+  var isUrlTabValid = !!sections.find(function (section) {
+    return section[0] === activeTabName;
+  });
+  var tabToUse = isUrlTabValid && activeTabName || sections[0][0];
+  return "".concat(_constants.TAB, "-").concat(tabToUse);
+};
+var _default = getActiveTab;
+exports["default"] = _default;
+//# sourceMappingURL=get-active-tab.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"get-active-tab.js","names":["getActiveTab","sections","url","decodedUrl","decodeURI","activeTabName","split","isUrlTabValid","find","section","tabToUse","TAB"],"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;AAEA,IAAMA,YAAY,GAAG,SAAfA,YAAY,CAAIC,QAAQ,EAAEC,GAAG,EAAK;EACtC,IAAMC,UAAU,GAAGC,SAAS,CAACF,GAAG,CAAC;EACjC,IAAMG,aAAa,GAAGF,UAAU,CAACG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;EAC9C,IAAMC,aAAa,GAAG,CAAC,CAACN,QAAQ,CAACO,IAAI,CAAC,UAAAC,OAAO;IAAA,OAAIA,OAAO,CAAC,CAAC,CAAC,KAAKJ,aAAa;EAAA,EAAC;EAC9E,IAAMK,QAAQ,GAAIH,aAAa,IAAIF,aAAa,IAAKJ,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;EACnE,iBAAUU,cAAG,cAAID,QAAQ;AAC3B,CAAC;AAAC,eAEaV,YAAY;AAAA"}

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

@@ -0,0 +1,25 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+require("core-js/modules/es.array.map.js");
+require("core-js/modules/es.function.name.js");
+var getSectionsData = function getSectionsData(sections) {
+  return sections.map(function (section) {
+    var _section$props = section.props;
+    _section$props = _section$props === void 0 ? {} : _section$props;
+    var _section$props$compon = _section$props.component;
+    _section$props$compon = _section$props$compon === void 0 ? {} : _section$props$compon;
+    var _section$props$compon2 = _section$props$compon.settings;
+    _section$props$compon2 = _section$props$compon2 === void 0 ? {} : _section$props$compon2;
+    var label = _section$props$compon2.label,
+      name = _section$props$compon2.name;
+    return [name, label];
+  });
+};
+var _default = getSectionsData;
+exports["default"] = _default;
+//# sourceMappingURL=get-sections-data.js.map

package/lib/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,IAAMA,eAAe,GAAG,SAAlBA,eAAe,CAAGC,QAAQ;EAAA,OAC9BA,QAAQ,CAACC,GAAG,CAAC,UAAAC,OAAO,EAAI;IACtB,qBAA+EA,OAAO,CAA9EC,KAAK;IAAb,6CAAwE,CAAC,CAAC;IAA1E,2CAAiBC,SAAS;IAA1B,2DAAiE,CAAC,CAAC;IAAnE,mDAA8BC,QAAQ;IAAtC,6DAA0D,CAAC,CAAC;IAA5D,IAA0CC,KAAK,0BAALA,KAAK;MAAEC,IAAI,0BAAJA,IAAI;IACrD,OAAO,CAACA,IAAI,EAAED,KAAK,CAAC;EACtB,CAAC,CAAC;AAAA;AAAC,eAEUP,eAAe;AAAA"}

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

@@ -0,0 +1,22 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "getActiveTab", {
+  enumerable: true,
+  get: function get() {
+    return _getActiveTab["default"];
+  }
+});
+Object.defineProperty(exports, "getSectionsData", {
+  enumerable: true,
+  get: function get() {
+    return _getSectionsData["default"];
+  }
+});
+var _getSectionsData = _interopRequireDefault(require("./get-sections-data"));
+var _getActiveTab = _interopRequireDefault(require("./get-active-tab"));
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"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;AACA"}

package/lib/components/ContentGroupSection/ContentGroupSection.js

@@ -6,16 +6,19 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
+require("core-js/modules/es.function.name.js");
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _helpers = require("../../helpers");
-var _excluded = ["children"];
+var _excluded = ["children", "name"];
 var ContentGroupSection = function ContentGroupSection(_ref) {
   var children = _ref.children,
+    name = _ref.name,
     props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
   if (!(0, _helpers.hasChildren)(children)) return null;
   return /*#__PURE__*/_react["default"].createElement("div", {
+    key: name,
     className: "content-group-section"
   }, children);
 };

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGroupSection.js","names":["ContentGroupSection","children","props","hasChildren","propTypes","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;AACA;AACA;AAA4C;AAE5C,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,OAA+B;EAAA,IAAzBC,QAAQ,QAARA,QAAQ;IAAKC,KAAK;EAC/C,IAAI,CAAC,IAAAC,oBAAW,EAACF,QAAQ,CAAC,EAAE,OAAO,IAAI;EAEvC,oBAAO;IAAK,SAAS,EAAC;EAAuB,GAAEA,QAAQ,CAAO;AAChE,CAAC;AAEDD,mBAAmB,CAACI,SAAS,GAAG;EAC9BH,QAAQ,EAAEI,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,OAAO,CAACF,qBAAS,CAACG,IAAI,CAAC,EAAEH,qBAAS,CAACG,IAAI,CAAC;AACnF,CAAC;AAEDR,mBAAmB,CAACS,YAAY,GAAG;EAAER,QAAQ,EAAE;AAAK,CAAC;AAAC,eAEvCD,mBAAmB;AAAA"}
+{"version":3,"file":"ContentGroupSection.js","names":["ContentGroupSection","children","name","props","hasChildren","propTypes","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;AACA;AACA;AAA4C;AAE5C,IAAMA,mBAAmB,GAAG,SAAtBA,mBAAmB,OAAqC;EAAA,IAA/BC,QAAQ,QAARA,QAAQ;IAAEC,IAAI,QAAJA,IAAI;IAAKC,KAAK;EACrD,IAAI,CAAC,IAAAC,oBAAW,EAACH,QAAQ,CAAC,EAAE,OAAO,IAAI;EAEvC,oBACE;IAAK,GAAG,EAAEC,IAAK;IAAC,SAAS,EAAC;EAAuB,GAC9CD,QAAQ,CACL;AAEV,CAAC;AAEDD,mBAAmB,CAACK,SAAS,GAAG;EAC9BJ,QAAQ,EAAEK,qBAAS,CAACC,SAAS,CAAC,CAACD,qBAAS,CAACE,OAAO,CAACF,qBAAS,CAACG,IAAI,CAAC,EAAEH,qBAAS,CAACG,IAAI,CAAC;AACnF,CAAC;AAEDT,mBAAmB,CAACU,YAAY,GAAG;EAAET,QAAQ,EAAE;AAAK,CAAC;AAAC,eAEvCD,mBAAmB;AAAA"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"YoutubeEmbeded.js","names":["YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","placeholderOnly","imageData","useInView","IN_VIEW_CONFIG","isIntersecting","outerRef","useState","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","paramsImp","ytUrl","posterUrl","getPosterUrl","mutedValue","iframeSrc","parsedWrapperClassname","useEffect","YT_HQ_FORMAT","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","YT_IMAGE_URL","backgroundImage","propTypes","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":["YoutubeEmbeded","autoplay","videoId","playlistCoverId","videoTitle","poster","videoParams","announce","noCookie","webp","playlist","onIframeAdded","muted","adNetwork","iframeClass","priority","placeholderOnly","imageData","useInView","IN_VIEW_CONFIG","isIntersecting","outerRef","useState","preconnected","setPreconnected","renderIframe","setRenderIframe","imageSize","displayImage","setImageDetails","encodedId","encodeURIComponent","paramsImp","ytUrl","posterUrl","getPosterUrl","mutedValue","iframeSrc","parsedWrapperClassname","useEffect","isMounted","YT_HQ_FORMAT","img","Image","onload","newImageSize","width","src","warmConnections","addIframe","YT_IMAGE_URL","backgroundImage","propTypes","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/lib-es/components/ContentGroup/ContentGroup.js

@@ -1,20 +1,29 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-const _excluded = ["contentType"];
+const _excluded = ["contentType", "children"];
 import React from 'react';
 import PropTypes from 'prop-types';
 import ContentGroupTabs from './ContentGroupTabs';
+import { getSectionsData } from './helpers';
 const ContentGroup = _ref => {
+  var _children$props;
   let {
-      contentType
+      contentType,
+      children
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  if (contentType === 'tab' || contentType === 'sidepanel') return /*#__PURE__*/React.createElement(ContentGroupTabs, _extends({
-    contentType: contentType
+  const groupSections = children === null || children === void 0 ? void 0 : (_children$props = children.props) === null || _children$props === void 0 ? void 0 : _children$props.children[1];
+  if (!groupSections || !groupSections.length) return '';
+  if (contentType !== 'tab' && contentType !== 'sidepanel') return '';
+  const sectionsData = getSectionsData(groupSections);
+  return /*#__PURE__*/React.createElement(ContentGroupTabs, _extends({
+    contentType: contentType,
+    groupSections: groupSections,
+    sectionsData: sectionsData
   }, props));
-  return '';
 };
 ContentGroup.propTypes = {
+  children: PropTypes.object.isRequired,
   contentType: PropTypes.string.isRequired
 };
 ContentGroup.defaultProps = {};

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

@@ -1 +1 @@
-{"version":3,"file":"ContentGroup.js","names":["React","PropTypes","ContentGroupTabs","ContentGroup","contentType","props","propTypes","string","isRequired","defaultProps"],"sources":["../../../src/components/ContentGroup/ContentGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ContentGroupTabs from './ContentGroupTabs';\n\nconst ContentGroup = ({ contentType, ...props }) => {\n  if (contentType === 'tab' || contentType === 'sidepanel')\n    return <ContentGroupTabs contentType={contentType} {...props} />;\n  return '';\n};\n\nContentGroup.propTypes = {\n  contentType: PropTypes.string.isRequired\n};\n\nContentGroup.defaultProps = {};\n\nexport default ContentGroup;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,gBAAgB,MAAM,oBAAoB;AAEjD,MAAMC,YAAY,GAAG,QAA+B;EAAA,IAA9B;MAAEC;IAAsB,CAAC;IAAPC,KAAK;EAC3C,IAAID,WAAW,KAAK,KAAK,IAAIA,WAAW,KAAK,WAAW,EACtD,oBAAO,oBAAC,gBAAgB;IAAC,WAAW,EAAEA;EAAY,GAAKC,KAAK,EAAI;EAClE,OAAO,EAAE;AACX,CAAC;AAEDF,YAAY,CAACG,SAAS,GAAG;EACvBF,WAAW,EAAEH,SAAS,CAACM,MAAM,CAACC;AAChC,CAAC;AAEDL,YAAY,CAACM,YAAY,GAAG,CAAC,CAAC;AAE9B,eAAeN,YAAY"}
+{"version":3,"file":"ContentGroup.js","names":["React","PropTypes","ContentGroupTabs","getSectionsData","ContentGroup","contentType","children","props","groupSections","length","sectionsData","propTypes","object","isRequired","string","defaultProps"],"sources":["../../../src/components/ContentGroup/ContentGroup.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ContentGroupTabs from './ContentGroupTabs';\nimport { getSectionsData } from './helpers';\n\nconst ContentGroup = ({ contentType, children, ...props }) => {\n  const groupSections = children?.props?.children[1];\n  if (!groupSections || !groupSections.length) return '';\n  if (contentType !== 'tab' && contentType !== 'sidepanel') return '';\n  const sectionsData = getSectionsData(groupSections);\n\n  return (\n    <ContentGroupTabs\n      contentType={contentType}\n      groupSections={groupSections}\n      sectionsData={sectionsData}\n      {...props}\n    />\n  );\n};\n\nContentGroup.propTypes = {\n  children: PropTypes.object.isRequired,\n  contentType: PropTypes.string.isRequired\n};\n\nContentGroup.defaultProps = {};\n\nexport default ContentGroup;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,gBAAgB,MAAM,oBAAoB;AACjD,SAASC,eAAe,QAAQ,WAAW;AAE3C,MAAMC,YAAY,GAAG,QAAyC;EAAA;EAAA,IAAxC;MAAEC,WAAW;MAAEC;IAAmB,CAAC;IAAPC,KAAK;EACrD,MAAMC,aAAa,GAAGF,QAAQ,aAARA,QAAQ,0CAARA,QAAQ,CAAEC,KAAK,oDAAf,gBAAiBD,QAAQ,CAAC,CAAC,CAAC;EAClD,IAAI,CAACE,aAAa,IAAI,CAACA,aAAa,CAACC,MAAM,EAAE,OAAO,EAAE;EACtD,IAAIJ,WAAW,KAAK,KAAK,IAAIA,WAAW,KAAK,WAAW,EAAE,OAAO,EAAE;EACnE,MAAMK,YAAY,GAAGP,eAAe,CAACK,aAAa,CAAC;EAEnD,oBACE,oBAAC,gBAAgB;IACf,WAAW,EAAEH,WAAY;IACzB,aAAa,EAAEG,aAAc;IAC7B,YAAY,EAAEE;EAAa,GACvBH,KAAK,EACT;AAEN,CAAC;AAEDH,YAAY,CAACO,SAAS,GAAG;EACvBL,QAAQ,EAAEL,SAAS,CAACW,MAAM,CAACC,UAAU;EACrCR,WAAW,EAAEJ,SAAS,CAACa,MAAM,CAACD;AAChC,CAAC;AAEDT,YAAY,CAACW,YAAY,GAAG,CAAC,CAAC;AAE9B,eAAeX,YAAY"}

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