@blaze-cms/react-page-builder 0.139.0-alpha.3 → 0.139.0-alpha.4

package/lib-es/hooks/helpers/RenderComponent.js.map

@@ -1 +1 @@
-{"version":3,"file":"RenderComponent.js","names":["React","PropTypes","ErrorBoundary","getComponent","appendGtmClassName","PB_TYPE_IMAGE","PB_TYPE_BANNER","PB_TYPE_TEXTBLOCK","PB_TYPE_CAROUSEL","BannerContextProvider","RenderComponent","_ref","component","imageProps","childComponents","options","textBlockBanners","hasTextBlockBanners","siblings","nestedComponentsProps","_objectWithoutProperties","_excluded","type","settings","id","name","Component","isImage","includes","imageOptions","updatedSettings","createElement","_extends","key","banners","pbOptions","propTypes","shape","string","object","items","array","isRequired","node","bool","defaultProps"],"sources":["../../../src/hooks/helpers/RenderComponent.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ErrorBoundary from '@blaze-cms/core-errors-ui';\nimport getComponent from './getComponent';\nimport appendGtmClassName from './append-gtm-classname';\nimport { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';\nimport { BannerContextProvider } from '../../BannerContext';\n\nconst RenderComponent = ({\n  component,\n  imageProps,\n  childComponents,\n  options = {},\n  textBlockBanners,\n  hasTextBlockBanners,\n  siblings,\n  ...nestedComponentsProps\n}) => {\n  const { type, settings, id, name } = component;\n  const Component = getComponent(type);\n  const isImage = [PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL].includes(\n    type\n  );\n  const imageOptions = isImage ? imageProps : {};\n  if (!Component) return null;\n  const updatedSettings = appendGtmClassName(settings, childComponents);\n\n  return (\n    <ErrorBoundary>\n      <Component\n        key={id}\n        type={type}\n        {...options}\n        {...imageOptions}\n        {...nestedComponentsProps}\n        {...updatedSettings}\n        name={name || settings.name}>\n        {hasTextBlockBanners ? (\n          <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>\n            {childComponents}\n          </BannerContextProvider>\n        ) : (\n          childComponents\n        )}\n      </Component>\n    </ErrorBoundary>\n  );\n};\n\nRenderComponent.propTypes = {\n  component: PropTypes.shape({\n    type: PropTypes.string,\n    id: PropTypes.string,\n    name: PropTypes.string,\n    settings: PropTypes.object,\n    items: PropTypes.array\n  }).isRequired,\n  imageProps: PropTypes.object.isRequired,\n  options: PropTypes.object.isRequired,\n  childComponents: PropTypes.node.isRequired,\n  textBlockBanners: PropTypes.array,\n  hasTextBlockBanners: PropTypes.bool,\n  siblings: PropTypes.array\n};\n\nRenderComponent.defaultProps = { textBlockBanners: null, hasTextBlockBanners: false, siblings: [] };\n\nexport default RenderComponent;\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,aAAa,MAAM,2BAA2B;AACrD,OAAOC,YAAY,MAAM,gBAAgB;AACzC,OAAOC,kBAAkB,MAAM,wBAAwB;AACvD,SAASC,aAAa,EAAEC,cAAc,EAAEC,iBAAiB,EAAEC,gBAAgB,QAAQ,aAAa;AAChG,SAASC,qBAAqB,QAAQ,qBAAqB;AAE3D,MAAMC,eAAe,GAAGC,IAAA,IASlB;EAAA,IATmB;MACvBC,SAAS;MACTC,UAAU;MACVC,eAAe;MACfC,OAAO,GAAG,CAAC,CAAC;MACZC,gBAAgB;MAChBC,mBAAmB;MACnBC;IAEF,CAAC,GAAAP,IAAA;IADIQ,qBAAqB,GAAAC,wBAAA,CAAAT,IAAA,EAAAU,SAAA;EAExB,MAAM;IAAEC,IAAI;IAAEC,QAAQ;IAAEC,EAAE;IAAEC;EAAK,CAAC,GAAGb,SAAS;EAC9C,MAAMc,SAAS,GAAGvB,YAAY,CAACmB,IAAI,CAAC;EACpC,MAAMK,OAAO,GAAG,CAACtB,aAAa,EAAEC,cAAc,EAAEC,iBAAiB,EAAEC,gBAAgB,CAAC,CAACoB,QAAQ,CAC3FN,IACF,CAAC;EACD,MAAMO,YAAY,GAAGF,OAAO,GAAGd,UAAU,GAAG,CAAC,CAAC;EAC9C,IAAI,CAACa,SAAS,EAAE,OAAO,IAAI;EAC3B,MAAMI,eAAe,GAAG1B,kBAAkB,CAACmB,QAAQ,EAAET,eAAe,CAAC;EAErE,oBACEd,KAAA,CAAA+B,aAAA,CAAC7B,aAAa,qBACZF,KAAA,CAAA+B,aAAA,CAACL,SAAS,EAAAM,QAAA;IACRC,GAAG,EAAET,EAAG;IACRF,IAAI,EAAEA;EAAK,GACPP,OAAO,EACPc,YAAY,EACZV,qBAAqB,EACrBW,eAAe;IACnBL,IAAI,EAAEA,IAAI,IAAIF,QAAQ,CAACE;EAAK,IAC3BR,mBAAmB,gBAClBjB,KAAA,CAAA+B,aAAA,CAACtB,qBAAqB;IAACS,QAAQ,EAAEA,QAAS;IAACgB,OAAO,EAAElB,gBAAiB;IAACmB,SAAS,EAAEpB;EAAQ,GACtFD,eACoB,CAAC,GAExBA,eAEO,CACE,CAAC;AAEpB,CAAC;AAEDJ,eAAe,CAAC0B,SAAS,GAAG;EAC1BxB,SAAS,EAAEX,SAAS,CAACoC,KAAK,CAAC;IACzBf,IAAI,EAAErB,SAAS,CAACqC,MAAM;IACtBd,EAAE,EAAEvB,SAAS,CAACqC,MAAM;IACpBb,IAAI,EAAExB,SAAS,CAACqC,MAAM;IACtBf,QAAQ,EAAEtB,SAAS,CAACsC,MAAM;IAC1BC,KAAK,EAAEvC,SAAS,CAACwC;EACnB,CAAC,CAAC,CAACC,UAAU;EACb7B,UAAU,EAAEZ,SAAS,CAACsC,MAAM,CAACG,UAAU;EACvC3B,OAAO,EAAEd,SAAS,CAACsC,MAAM,CAACG,UAAU;EACpC5B,eAAe,EAAEb,SAAS,CAAC0C,IAAI,CAACD,UAAU;EAC1C1B,gBAAgB,EAAEf,SAAS,CAACwC,KAAK;EACjCxB,mBAAmB,EAAEhB,SAAS,CAAC2C,IAAI;EACnC1B,QAAQ,EAAEjB,SAAS,CAACwC;AACtB,CAAC;AAED/B,eAAe,CAACmC,YAAY,GAAG;EAAE7B,gBAAgB,EAAE,IAAI;EAAEC,mBAAmB,EAAE,KAAK;EAAEC,QAAQ,EAAE;AAAG,CAAC;AAEnG,eAAeR,eAAe"}
+{"version":3,"file":"RenderComponent.js","names":["React","PropTypes","ErrorBoundary","getComponent","getVariant","appendGtmClassName","PB_TYPE_IMAGE","PB_TYPE_BANNER","PB_TYPE_TEXTBLOCK","PB_TYPE_CAROUSEL","BannerContextProvider","RenderComponent","_ref","component","imageProps","childComponents","options","textBlockBanners","hasTextBlockBanners","siblings","nestedComponentsProps","_objectWithoutProperties","_excluded","type","settings","id","name","Component","isImage","includes","imageOptions","updatedSettings","VariantComponent","variantSettings","createElement","_extends","key","banners","pbOptions","propTypes","shape","string","object","items","array","isRequired","node","bool","defaultProps"],"sources":["../../../src/hooks/helpers/RenderComponent.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport ErrorBoundary from '@blaze-cms/core-errors-ui';\nimport getComponent from './getComponent';\nimport getVariant from './getVariant';\nimport appendGtmClassName from './append-gtm-classname';\nimport { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';\nimport { BannerContextProvider } from '../../BannerContext';\n\nconst RenderComponent = ({\n  component,\n  imageProps,\n  childComponents,\n  options = {},\n  textBlockBanners,\n  hasTextBlockBanners,\n  siblings,\n  ...nestedComponentsProps\n}) => {\n  const { type, settings, id, name } = component;\n  const Component = getComponent(type);\n  const isImage = [PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL].includes(\n    type\n  );\n  const imageOptions = isImage ? imageProps : {};\n  if (!Component) return null;\n  const updatedSettings = appendGtmClassName(settings, childComponents);\n  const [VariantComponent, variantSettings] = getVariant(settings);\n\n  return (\n    <ErrorBoundary>\n      <Component\n        key={id}\n        type={type}\n        VariantComponent={VariantComponent}\n        {...options}\n        {...imageOptions}\n        {...nestedComponentsProps}\n        {...updatedSettings}\n        {...variantSettings}\n        name={name || settings.name}>\n        {hasTextBlockBanners ? (\n          <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>\n            {childComponents}\n          </BannerContextProvider>\n        ) : (\n          childComponents\n        )}\n      </Component>\n    </ErrorBoundary>\n  );\n};\n\nRenderComponent.propTypes = {\n  component: PropTypes.shape({\n    type: PropTypes.string,\n    id: PropTypes.string,\n    name: PropTypes.string,\n    settings: PropTypes.object,\n    items: PropTypes.array\n  }).isRequired,\n  imageProps: PropTypes.object.isRequired,\n  options: PropTypes.object.isRequired,\n  childComponents: PropTypes.node.isRequired,\n  textBlockBanners: PropTypes.array,\n  hasTextBlockBanners: PropTypes.bool,\n  siblings: PropTypes.array\n};\n\nRenderComponent.defaultProps = { textBlockBanners: null, hasTextBlockBanners: false, siblings: [] };\n\nexport default RenderComponent;\n"],"mappings":"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"}

package/lib-es/hooks/helpers/getVariant.js

@@ -0,0 +1,14 @@
+import { variantHandler } from '../../utils';
+export default function getVariant(settings) {
+  const {
+    variant
+  } = settings;
+  if (!variant) return [null, {}];
+  const {
+    VariantComponent,
+    getSettings
+  } = variantHandler.get(variant) || {};
+  const variantSettings = !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;
+  return [VariantComponent, variantSettings];
+}
+//# sourceMappingURL=getVariant.js.map

package/lib-es/hooks/helpers/getVariant.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"getVariant.js","names":["variantHandler","getVariant","settings","variant","VariantComponent","getSettings","get","variantSettings"],"sources":["../../../src/hooks/helpers/getVariant.js"],"sourcesContent":["import { variantHandler } from '../../utils';\n\nexport default function getVariant(settings) {\n  const { variant } = settings;\n  if (!variant) return [null, {}];\n  const { VariantComponent, getSettings } = variantHandler.get(variant) || {};\n  const variantSettings =\n    !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;\n\n  return [VariantComponent, variantSettings];\n}\n"],"mappings":"AAAA,SAASA,cAAc,QAAQ,aAAa;AAE5C,eAAe,SAASC,UAAUA,CAACC,QAAQ,EAAE;EAC3C,MAAM;IAAEC;EAAQ,CAAC,GAAGD,QAAQ;EAC5B,IAAI,CAACC,OAAO,EAAE,OAAO,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;EAC/B,MAAM;IAAEC,gBAAgB;IAAEC;EAAY,CAAC,GAAGL,cAAc,CAACM,GAAG,CAACH,OAAO,CAAC,IAAI,CAAC,CAAC;EAC3E,MAAMI,eAAe,GACnB,CAAC,CAACF,WAAW,IAAI,OAAOA,WAAW,KAAK,UAAU,GAAGA,WAAW,CAACH,QAAQ,CAAC,GAAGA,QAAQ;EAEvF,OAAO,CAACE,gBAAgB,EAAEG,eAAe,CAAC;AAC5C"}

package/lib-es/index.js

@@ -1,8 +1,9 @@
 export { default as buildPBComponents } from './hooks/helpers/buildPBComponents';
 export { default as getLightboxImages } from './hooks/helpers/get-lightbox-images';
 export { default as getComponent } from './hooks/helpers/getComponent';
-export { componentMap, getClassModifiers } from './utils';
+export { componentMap, variantHandler, getClassModifiers } from './utils';
 export { default as components } from './components';
+export { default as variants } from './variants';
 export { getAction, generateSingleItemQuery, generateMultiItemQuery, getEntitySchema, getSingleEntitySchema, getUser } from './application/query';
 export { buildPropsQuery, getUnpublishedEntityName, renderChildren, hasChildren } from './helpers';
 export { withTitle } from './HOC';

package/lib-es/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["default","buildPBComponents","getLightboxImages","getComponent","componentMap","getClassModifiers","components","getAction","generateSingleItemQuery","generateMultiItemQuery","getEntitySchema","getSingleEntitySchema","getUser","buildPropsQuery","getUnpublishedEntityName","renderChildren","hasChildren","withTitle","useGetEntitySchema","useGetEntitySchemasAsObj","useGetSingleEntitySchema","summaryComponents","buildPropsToDisplayWithContent"],"sources":["../src/index.js"],"sourcesContent":["export { default as buildPBComponents } from './hooks/helpers/buildPBComponents';\nexport { default as getLightboxImages } from './hooks/helpers/get-lightbox-images';\nexport { default as getComponent } from './hooks/helpers/getComponent';\nexport { componentMap, getClassModifiers } from './utils';\nexport { default as components } from './components';\nexport {\n  getAction,\n  generateSingleItemQuery,\n  generateMultiItemQuery,\n  getEntitySchema,\n  getSingleEntitySchema,\n  getUser\n} from './application/query';\nexport { buildPropsQuery, getUnpublishedEntityName, renderChildren, hasChildren } from './helpers';\nexport { withTitle } from './HOC';\nexport { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';\nexport { summaryComponents } from './components/DataSummary/DataSummaryTypes';\nexport { buildPropsToDisplayWithContent } from './components/DataSummary/helpers';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAAiB,QAAQ,mCAAmC;AAChF,SAASD,OAAO,IAAIE,iBAAiB,QAAQ,qCAAqC;AAClF,SAASF,OAAO,IAAIG,YAAY,QAAQ,8BAA8B;AACtE,SAASC,YAAY,EAAEC,iBAAiB,QAAQ,SAAS;AACzD,SAASL,OAAO,IAAIM,UAAU,QAAQ,cAAc;AACpD,SACEC,SAAS,EACTC,uBAAuB,EACvBC,sBAAsB,EACtBC,eAAe,EACfC,qBAAqB,EACrBC,OAAO,QACF,qBAAqB;AAC5B,SAASC,eAAe,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,WAAW,QAAQ,WAAW;AAClG,SAASC,SAAS,QAAQ,OAAO;AACjC,SAASC,kBAAkB,EAAEC,wBAAwB,EAAEC,wBAAwB,QAAQ,SAAS;AAChG,SAASC,iBAAiB,QAAQ,2CAA2C;AAC7E,SAASC,8BAA8B,QAAQ,kCAAkC"}
+{"version":3,"file":"index.js","names":["default","buildPBComponents","getLightboxImages","getComponent","componentMap","variantHandler","getClassModifiers","components","variants","getAction","generateSingleItemQuery","generateMultiItemQuery","getEntitySchema","getSingleEntitySchema","getUser","buildPropsQuery","getUnpublishedEntityName","renderChildren","hasChildren","withTitle","useGetEntitySchema","useGetEntitySchemasAsObj","useGetSingleEntitySchema","summaryComponents","buildPropsToDisplayWithContent"],"sources":["../src/index.js"],"sourcesContent":["export { default as buildPBComponents } from './hooks/helpers/buildPBComponents';\nexport { default as getLightboxImages } from './hooks/helpers/get-lightbox-images';\nexport { default as getComponent } from './hooks/helpers/getComponent';\nexport { componentMap, variantHandler, getClassModifiers } from './utils';\nexport { default as components } from './components';\nexport { default as variants } from './variants';\nexport {\n  getAction,\n  generateSingleItemQuery,\n  generateMultiItemQuery,\n  getEntitySchema,\n  getSingleEntitySchema,\n  getUser\n} from './application/query';\nexport { buildPropsQuery, getUnpublishedEntityName, renderChildren, hasChildren } from './helpers';\nexport { withTitle } from './HOC';\nexport { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';\nexport { summaryComponents } from './components/DataSummary/DataSummaryTypes';\nexport { buildPropsToDisplayWithContent } from './components/DataSummary/helpers';\n"],"mappings":"AAAA,SAASA,OAAO,IAAIC,iBAAiB,QAAQ,mCAAmC;AAChF,SAASD,OAAO,IAAIE,iBAAiB,QAAQ,qCAAqC;AAClF,SAASF,OAAO,IAAIG,YAAY,QAAQ,8BAA8B;AACtE,SAASC,YAAY,EAAEC,cAAc,EAAEC,iBAAiB,QAAQ,SAAS;AACzE,SAASN,OAAO,IAAIO,UAAU,QAAQ,cAAc;AACpD,SAASP,OAAO,IAAIQ,QAAQ,QAAQ,YAAY;AAChD,SACEC,SAAS,EACTC,uBAAuB,EACvBC,sBAAsB,EACtBC,eAAe,EACfC,qBAAqB,EACrBC,OAAO,QACF,qBAAqB;AAC5B,SAASC,eAAe,EAAEC,wBAAwB,EAAEC,cAAc,EAAEC,WAAW,QAAQ,WAAW;AAClG,SAASC,SAAS,QAAQ,OAAO;AACjC,SAASC,kBAAkB,EAAEC,wBAAwB,EAAEC,wBAAwB,QAAQ,SAAS;AAChG,SAASC,iBAAiB,QAAQ,2CAA2C;AAC7E,SAASC,8BAA8B,QAAQ,kCAAkC"}

package/lib-es/utils/component-map.js

@@ -1,5 +1,5 @@
 import { BlazeError } from '@blaze-cms/core-errors';
-function componentMap() {
+function componentMapHandler() {
   const components = new Map();
   function get(key) {
     return components.get(key);
@@ -16,7 +16,7 @@ function componentMap() {
   }
   function validate(key, component) {
     if (!key || !component) throw new BlazeError('Component requires key and component');
-    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exist`);
+    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exists`);
   }
   return {
     id: Math.random(),
@@ -25,6 +25,6 @@ function componentMap() {
     getAll
   };
 }
-const test = componentMap();
-export default test;
+const componentMap = componentMapHandler();
+export default componentMap;
 //# sourceMappingURL=component-map.js.map

package/lib-es/utils/component-map.js.map

@@ -1 +1 @@
-{"version":3,"file":"component-map.js","names":["BlazeError","componentMap","components","Map","get","key","getAll","Array","from","entries","add","component","validate","set","has","id","Math","random","test"],"sources":["../../src/utils/component-map.js"],"sourcesContent":["import { BlazeError } from '@blaze-cms/core-errors';\n\nfunction componentMap() {\n  const components = new Map();\n\n  function get(key) {\n    return components.get(key);\n  }\n\n  function getAll() {\n    return Array.from(components.entries());\n  }\n\n  function add({ key, component }) {\n    validate(key, component);\n    components.set(key, component);\n  }\n\n  function validate(key, component) {\n    if (!key || !component) throw new BlazeError('Component requires key and component');\n    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exist`);\n  }\n\n  return {\n    id: Math.random(),\n    add,\n    get,\n    getAll\n  };\n}\n\nconst test = componentMap();\n\nexport default test;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,YAAYA,CAAA,EAAG;EACtB,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAC,CAAC;EAE5B,SAASC,GAAGA,CAACC,GAAG,EAAE;IAChB,OAAOH,UAAU,CAACE,GAAG,CAACC,GAAG,CAAC;EAC5B;EAEA,SAASC,MAAMA,CAAA,EAAG;IAChB,OAAOC,KAAK,CAACC,IAAI,CAACN,UAAU,CAACO,OAAO,CAAC,CAAC,CAAC;EACzC;EAEA,SAASC,GAAGA,CAAC;IAAEL,GAAG;IAAEM;EAAU,CAAC,EAAE;IAC/BC,QAAQ,CAACP,GAAG,EAAEM,SAAS,CAAC;IACxBT,UAAU,CAACW,GAAG,CAACR,GAAG,EAAEM,SAAS,CAAC;EAChC;EAEA,SAASC,QAAQA,CAACP,GAAG,EAAEM,SAAS,EAAE;IAChC,IAAI,CAACN,GAAG,IAAI,CAACM,SAAS,EAAE,MAAM,IAAIX,UAAU,CAAC,sCAAsC,CAAC;IACpF,IAAIE,UAAU,CAACY,GAAG,CAACT,GAAG,CAAC,IAAIA,GAAG,KAAK,OAAO,EAAE,MAAM,IAAIL,UAAU,CAAE,yBAAwB,CAAC;EAC7F;EAEA,OAAO;IACLe,EAAE,EAAEC,IAAI,CAACC,MAAM,CAAC,CAAC;IACjBP,GAAG;IACHN,GAAG;IACHE;EACF,CAAC;AACH;AAEA,MAAMY,IAAI,GAAGjB,YAAY,CAAC,CAAC;AAE3B,eAAeiB,IAAI"}
+{"version":3,"file":"component-map.js","names":["BlazeError","componentMapHandler","components","Map","get","key","getAll","Array","from","entries","add","component","validate","set","has","id","Math","random","componentMap"],"sources":["../../src/utils/component-map.js"],"sourcesContent":["import { BlazeError } from '@blaze-cms/core-errors';\n\nfunction componentMapHandler() {\n  const components = new Map();\n  function get(key) {\n    return components.get(key);\n  }\n\n  function getAll() {\n    return Array.from(components.entries());\n  }\n\n  function add({ key, component }) {\n    validate(key, component);\n    components.set(key, component);\n  }\n\n  function validate(key, component) {\n    if (!key || !component) throw new BlazeError('Component requires key and component');\n    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exists`);\n  }\n\n  return {\n    id: Math.random(),\n    add,\n    get,\n    getAll\n  };\n}\n\nconst componentMap = componentMapHandler();\n\nexport default componentMap;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,mBAAmBA,CAAA,EAAG;EAC7B,MAAMC,UAAU,GAAG,IAAIC,GAAG,CAAC,CAAC;EAC5B,SAASC,GAAGA,CAACC,GAAG,EAAE;IAChB,OAAOH,UAAU,CAACE,GAAG,CAACC,GAAG,CAAC;EAC5B;EAEA,SAASC,MAAMA,CAAA,EAAG;IAChB,OAAOC,KAAK,CAACC,IAAI,CAACN,UAAU,CAACO,OAAO,CAAC,CAAC,CAAC;EACzC;EAEA,SAASC,GAAGA,CAAC;IAAEL,GAAG;IAAEM;EAAU,CAAC,EAAE;IAC/BC,QAAQ,CAACP,GAAG,EAAEM,SAAS,CAAC;IACxBT,UAAU,CAACW,GAAG,CAACR,GAAG,EAAEM,SAAS,CAAC;EAChC;EAEA,SAASC,QAAQA,CAACP,GAAG,EAAEM,SAAS,EAAE;IAChC,IAAI,CAACN,GAAG,IAAI,CAACM,SAAS,EAAE,MAAM,IAAIX,UAAU,CAAC,sCAAsC,CAAC;IACpF,IAAIE,UAAU,CAACY,GAAG,CAACT,GAAG,CAAC,IAAIA,GAAG,KAAK,OAAO,EAAE,MAAM,IAAIL,UAAU,CAAE,0BAAyB,CAAC;EAC9F;EAEA,OAAO;IACLe,EAAE,EAAEC,IAAI,CAACC,MAAM,CAAC,CAAC;IACjBP,GAAG;IACHN,GAAG;IACHE;EACF,CAAC;AACH;AAEA,MAAMY,YAAY,GAAGjB,mBAAmB,CAAC,CAAC;AAE1C,eAAeiB,YAAY"}

package/lib-es/utils/index.js

@@ -1,7 +1,8 @@
 import getClassModifiers from './get-class-modifiers';
 import componentMap from './component-map';
+import variantHandler from './variant-handler';
 import isObjectEmpty from './is-object-empty';
 import getImageData from './get-image-data';
 import getPropsToDisplayModifiers from './get-props-to-display-modifiers';
-export { getClassModifiers, componentMap, isObjectEmpty, getImageData, getPropsToDisplayModifiers };
+export { componentMap, variantHandler, getClassModifiers, isObjectEmpty, getImageData, getPropsToDisplayModifiers };
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["getClassModifiers","componentMap","isObjectEmpty","getImageData","getPropsToDisplayModifiers"],"sources":["../../src/utils/index.js"],"sourcesContent":["import getClassModifiers from './get-class-modifiers';\nimport componentMap from './component-map';\nimport isObjectEmpty from './is-object-empty';\nimport getImageData from './get-image-data';\nimport getPropsToDisplayModifiers from './get-props-to-display-modifiers';\n\nexport { getClassModifiers, componentMap, isObjectEmpty, getImageData, getPropsToDisplayModifiers };\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,0BAA0B,MAAM,kCAAkC;AAEzE,SAASJ,iBAAiB,EAAEC,YAAY,EAAEC,aAAa,EAAEC,YAAY,EAAEC,0BAA0B"}
+{"version":3,"file":"index.js","names":["getClassModifiers","componentMap","variantHandler","isObjectEmpty","getImageData","getPropsToDisplayModifiers"],"sources":["../../src/utils/index.js"],"sourcesContent":["import getClassModifiers from './get-class-modifiers';\nimport componentMap from './component-map';\nimport variantHandler from './variant-handler';\nimport isObjectEmpty from './is-object-empty';\nimport getImageData from './get-image-data';\nimport getPropsToDisplayModifiers from './get-props-to-display-modifiers';\n\nexport {\n  componentMap,\n  variantHandler,\n  getClassModifiers,\n  isObjectEmpty,\n  getImageData,\n  getPropsToDisplayModifiers\n};\n"],"mappings":"AAAA,OAAOA,iBAAiB,MAAM,uBAAuB;AACrD,OAAOC,YAAY,MAAM,iBAAiB;AAC1C,OAAOC,cAAc,MAAM,mBAAmB;AAC9C,OAAOC,aAAa,MAAM,mBAAmB;AAC7C,OAAOC,YAAY,MAAM,kBAAkB;AAC3C,OAAOC,0BAA0B,MAAM,kCAAkC;AAEzE,SACEJ,YAAY,EACZC,cAAc,EACdF,iBAAiB,EACjBG,aAAa,EACbC,YAAY,EACZC,0BAA0B"}

package/lib-es/utils/variant-handler.js

@@ -0,0 +1,26 @@
+import { BlazeError } from '@blaze-cms/core-errors';
+function variantMapHandler() {
+  const variants = new Map();
+  function get(key) {
+    return variants.get(key);
+  }
+  function getAll() {
+    return Array.from(variants.entries());
+  }
+  function add(key, variant) {
+    validate(key, variant);
+    variants.set(key, variant);
+  }
+  function validate(key, variant) {
+    if (!key || !variant) throw new BlazeError('Variant requires key and component');
+    if (variants.has(key) && key !== 'array') throw new BlazeError(`Variant already exists`);
+  }
+  return {
+    add,
+    get,
+    getAll
+  };
+}
+const variantHandler = variantMapHandler();
+export default variantHandler;
+//# sourceMappingURL=variant-handler.js.map

package/lib-es/utils/variant-handler.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variant-handler.js","names":["BlazeError","variantMapHandler","variants","Map","get","key","getAll","Array","from","entries","add","variant","validate","set","has","variantHandler"],"sources":["../../src/utils/variant-handler.js"],"sourcesContent":["import { BlazeError } from '@blaze-cms/core-errors';\n\nfunction variantMapHandler() {\n  const variants = new Map();\n\n  function get(key) {\n    return variants.get(key);\n  }\n\n  function getAll() {\n    return Array.from(variants.entries());\n  }\n\n  function add(key, variant) {\n    validate(key, variant);\n    variants.set(key, variant);\n  }\n\n  function validate(key, variant) {\n    if (!key || !variant) throw new BlazeError('Variant requires key and component');\n    if (variants.has(key) && key !== 'array') throw new BlazeError(`Variant already exists`);\n  }\n\n  return {\n    add,\n    get,\n    getAll\n  };\n}\n\nconst variantHandler = variantMapHandler();\n\nexport default variantHandler;\n"],"mappings":"AAAA,SAASA,UAAU,QAAQ,wBAAwB;AAEnD,SAASC,iBAAiBA,CAAA,EAAG;EAC3B,MAAMC,QAAQ,GAAG,IAAIC,GAAG,CAAC,CAAC;EAE1B,SAASC,GAAGA,CAACC,GAAG,EAAE;IAChB,OAAOH,QAAQ,CAACE,GAAG,CAACC,GAAG,CAAC;EAC1B;EAEA,SAASC,MAAMA,CAAA,EAAG;IAChB,OAAOC,KAAK,CAACC,IAAI,CAACN,QAAQ,CAACO,OAAO,CAAC,CAAC,CAAC;EACvC;EAEA,SAASC,GAAGA,CAACL,GAAG,EAAEM,OAAO,EAAE;IACzBC,QAAQ,CAACP,GAAG,EAAEM,OAAO,CAAC;IACtBT,QAAQ,CAACW,GAAG,CAACR,GAAG,EAAEM,OAAO,CAAC;EAC5B;EAEA,SAASC,QAAQA,CAACP,GAAG,EAAEM,OAAO,EAAE;IAC9B,IAAI,CAACN,GAAG,IAAI,CAACM,OAAO,EAAE,MAAM,IAAIX,UAAU,CAAC,oCAAoC,CAAC;IAChF,IAAIE,QAAQ,CAACY,GAAG,CAACT,GAAG,CAAC,IAAIA,GAAG,KAAK,OAAO,EAAE,MAAM,IAAIL,UAAU,CAAE,wBAAuB,CAAC;EAC1F;EAEA,OAAO;IACLU,GAAG;IACHN,GAAG;IACHE;EACF,CAAC;AACH;AAEA,MAAMS,cAAc,GAAGd,iBAAiB,CAAC,CAAC;AAE1C,eAAec,cAAc"}

package/lib-es/variants/index.js

@@ -0,0 +1,2 @@
+export default {};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../src/variants/index.js"],"sourcesContent":["export default {};\n"],"mappings":"AAAA,eAAe,CAAC,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.139.0-alpha.3",
+  "version": "0.139.0-alpha.4",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,12 +27,12 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "0.139.0-alpha.3",
+    "@blaze-cms/core-auth-ui": "0.139.0-alpha.4",
     "@blaze-cms/core-errors": "^0.131.0",
     "@blaze-cms/core-errors-ui": "^0.131.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.6",
     "@blaze-cms/nextjs-components": "^0.134.0",
-    "@blaze-cms/plugin-search-ui": "^0.136.0",
+    "@blaze-cms/plugin-search-ui": "0.139.0-alpha.4",
     "@blaze-cms/setup-ui": "^0.131.0",
     "@blaze-cms/utils": "^0.131.0",
     "@blaze-cms/utils-handlebars": "^0.134.0",
@@ -89,5 +89,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "00aa8ba6ed9d34f0b2651f8afd810ae8ec136a3c"
+  "gitHead": "718fa23556026a90878b25d1ba751052dfdb5494"
 }

package/src/components/Card/Card.js

@@ -41,13 +41,13 @@ const Card = ({
   titleOverlayModifier,
   overlayModifier,
   gridModifier,
-  parent,
   pageBuilderComponents,
   __typename: dataEntity,
   ...otherProps
 }) => {
   const entity = graphqlEntityMap[dataEntity];
   updateChildrensParent(cardChildren, id, entity);
+  const parent = { itemId: id, itemEntity: entity };
   const router = useRouter();
   const { imageSrc, shouldDisplayThumbnail, altText } = getImageDefinedProps({
     image,
@@ -181,7 +181,6 @@ const Card = ({
 };
 
 Card.propTypes = {
-  parent: PropTypes.object.isRequired,
   id: PropTypes.string.isRequired,
   image: PropTypes.shape({
     url: PropTypes.string,

package/src/components/Card/CardsContainer.js

@@ -36,7 +36,6 @@ const CardContainer = ({
   autoScrollTimer,
   overlayModifier,
   titleOverlayModifier,
-  parent,
   ...cardProps
 }) => {
   const { itemId } = useContext(MainContext);
@@ -70,7 +69,6 @@ const CardContainer = ({
         if (hasNewBannerSettings && shouldRenderBanner) bannerIndex += 1;
         if (!hasNewBannerSettings && baseAdunit) bannerIndex += 1;
         const parsedCardProps = {
-          parent,
           key: id,
           id,
           enableCarousel,
@@ -133,7 +131,6 @@ const CardContainer = ({
 
 CardContainer.propTypes = {
   pageBuilderComponents: PropTypes.array,
-  parent: PropTypes.object.isRequired,
   cardData: PropTypes.array.isRequired,
   graphqlEntityMap: PropTypes.object.isRequired,
   name: PropTypes.string,

package/src/components/Card/CardsRender.js

@@ -203,7 +203,6 @@ const CardsRender = ({
         gtmChildren={gtmChildren}
         cardChildren={regularChildren}
         graphqlEntityMap={graphqlEntityMap}
-        parent={otherProps.parent}
         {...variableProps}
       />
     </>

package/src/components/Carousel/Carousel.js

@@ -1,32 +1,48 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import CarouselImage from './CarouselImage';
 import CarouselRender from './CarouselRender';
+import { useCarouselNavigation } from './hooks/useCarouselNavigation';
+import { getDisplayCountData } from '../../helpers';
+
+const Carousel = props => {
+  const { caption, imageIds, isCaptionDisplayed, VariantComponent, ...otherProps } = props;
+
+  const navigationProps = useCarouselNavigation(props);
 
-const Carousel = ({ caption, imageIds, isCaptionDisplayed, ...otherProps }) => {
   if (!imageIds || !imageIds.length) return null;
   const shouldDisplayCaption = isCaptionDisplayed && caption;
 
+  const { shouldDisplayCount, countMessage } = getDisplayCountData(
+    navigationProps.showCount,
+    imageIds
+  );
+
+  const ComponentToRender = VariantComponent || CarouselRender;
+
   return (
-    <div className="carousel">
-      <div>
-        <CarouselRender imageIds={imageIds} {...otherProps} />
-      </div>
-      {shouldDisplayCaption && (
-        <div className="carousel__details" data-testid="carousel-details">
-          <div className="caption">{caption}</div>
-        </div>
-      )}
-    </div>
+    <ComponentToRender
+      caption={caption}
+      imageIds={imageIds}
+      CarouselImage={CarouselImage}
+      shouldDisplayCaption={shouldDisplayCaption}
+      shouldDisplayCount={shouldDisplayCount}
+      countMessage={countMessage}
+      {...navigationProps}
+      {...otherProps}
+    />
   );
 };
 
 Carousel.propTypes = {
   caption: PropTypes.string,
   imageIds: PropTypes.array,
-  isCaptionDisplayed: PropTypes.bool
+  isCaptionDisplayed: PropTypes.bool,
+  VariantComponent: PropTypes.func
 };
 
 Carousel.defaultProps = {
+  VariantComponent: null,
   caption: '',
   imageIds: [],
   isCaptionDisplayed: false

package/src/components/Carousel/CarouselRender/CarouselRender.js

@@ -1,61 +1,26 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import CarouselImage from '../CarouselImage';
 import { withTitle } from '../../../HOC';
-import { getDisplayCountData } from '../../../helpers';
 
-const CarouselRender = ({ imageIds, displayCount, priorityLimit, ...otherProps }) => {
-  const [showCount, setShowCount] = useState(displayCount);
-  const listRef = useRef(null);
-
-  const getListElement = () => {
-    if (!listRef) return null;
-    const { current } = listRef;
-    return current;
-  };
-
-  const moveScroll = (numberOfPixels, isNext) => {
-    const listElement = getListElement();
-    if (!listElement) return;
-
-    const totalDistance = listElement.scrollLeft + numberOfPixels;
-    const { scrollLeft, offsetWidth, scrollWidth } = listElement;
-    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
-
-    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
-
-    listElement.scrollTo({
-      top: 0,
-      left: leftPosition,
-      behavior: 'smooth'
-    });
-  };
-
-  const handleNavigation = direction => {
-    setShowCount(false);
-
-    const listElement = getListElement();
-    if (!listElement) return;
-
-    const { scrollWidth } = listElement;
-    const offset = scrollWidth / imageIds.length;
-
-    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
-  };
-
-  const navigation = {
-    next: true,
-    back: false
-  };
-
-  const { shouldDisplayCount, countMessage } = getDisplayCountData(showCount, imageIds);
-
-  return (
-    <>
+const CarouselRender = ({
+  handleNavigation,
+  imageIds,
+  listRef,
+  shouldDisplayCount,
+  shouldDisplayCaption,
+  caption,
+  countMessage,
+  direction,
+  priorityLimit,
+  ...otherProps
+}) => (
+  <div className="carousel">
+    <div>
       <div
         className="carousel__button carousel__button--previous"
         role="button"
-        onClick={() => handleNavigation(navigation.back)}>
+        onClick={() => handleNavigation(direction.back)}>
         <div className="arrow arrow--left" />
       </div>
       <div className="carousel__list" ref={listRef}>
@@ -71,23 +36,38 @@ const CarouselRender = ({ imageIds, displayCount, priorityLimit, ...otherProps }
       <div
         className="carousel__button carousel__button--next"
         role="button"
-        onClick={() => handleNavigation(navigation.next)}>
-        {shouldDisplayCount && <p>{countMessage}</p>}
+        onClick={() => handleNavigation(direction.next)}>
+        {shouldDisplayCount && <p data-testid="count">{countMessage}</p>}
         <div className="arrow arrow--right" />
       </div>
-    </>
-  );
-};
+    </div>
+    {shouldDisplayCaption && (
+      <div className="carousel__details" data-testid="carousel-details">
+        <div className="caption">{caption}</div>
+      </div>
+    )}
+  </div>
+);
 
 CarouselRender.propTypes = {
+  caption: PropTypes.string,
+  shouldDisplayCaption: PropTypes.bool.isRequired,
   imageIds: PropTypes.array,
   displayCount: PropTypes.bool,
+  listRef: PropTypes.object,
+  countMessage: PropTypes.number,
+  direction: PropTypes.object.isRequired,
+  handleNavigation: PropTypes.func.isRequired,
+  shouldDisplayCount: PropTypes.bool.isRequired,
   priorityLimit: PropTypes.number
 };
 
 CarouselRender.defaultProps = {
+  listRef: null,
   imageIds: [],
+  caption: '',
   displayCount: false,
+  countMessage: null,
   priorityLimit: 0
 };
 

package/src/components/Carousel/hooks/useCarouselNavigation.js

@@ -0,0 +1,50 @@
+import { useState, useRef } from 'react';
+
+export function useCarouselNavigation({ imageIds, displayCount }) {
+  const [showCount, setShowCount] = useState(displayCount);
+  const listRef = useRef(null);
+
+  const getListElement = () => {
+    if (!listRef.current) return null;
+    return listRef.current;
+  };
+
+  const moveScroll = (numberOfPixels, isNext) => {
+    const listElement = getListElement();
+    if (!listElement) return;
+
+    const totalDistance = listElement.scrollLeft + numberOfPixels;
+    const { scrollLeft, offsetWidth, scrollWidth } = listElement;
+    if (isNext && offsetWidth + scrollLeft >= scrollWidth) return;
+
+    const leftPosition = totalDistance < 0 ? 0 : Math.max(-scrollLeft, totalDistance);
+
+    listElement.scrollTo({
+      top: 0,
+      left: leftPosition,
+      behavior: 'smooth'
+    });
+  };
+
+  const handleNavigation = direction => {
+    setShowCount(false);
+
+    const listElement = getListElement();
+    if (!listElement) return;
+
+    const { scrollWidth } = listElement;
+    const offset = scrollWidth / imageIds.length;
+
+    direction ? moveScroll(offset, direction) : moveScroll(-offset, direction);
+  };
+
+  return {
+    listRef,
+    showCount,
+    handleNavigation,
+    direction: {
+      next: true,
+      back: false
+    }
+  };
+}

package/src/components/Layout/Layout.js

@@ -18,6 +18,7 @@ const Layout = React.forwardRef(
       tagType,
       dataNoSnippet,
       sticky,
+      VariantComponent,
       ...otherProps
     },
     ref
@@ -25,10 +26,8 @@ const Layout = React.forwardRef(
     const {
       data: { getFile: { url = null } = {} }
     } = useGetImages(backgroundImage);
-
     const style = getStylesToUpdate({ backgroundImage: url });
     const { title } = settings;
-
     const classModifiers = getClassModifiers(type, { modifier, sticky, ...otherProps });
     const additionalRowModifier = checkIfRowHasColumns(type, children) ? ' display-row' : '';
 
@@ -37,8 +36,10 @@ const Layout = React.forwardRef(
     const otherWrapperProps = {};
     if (dataNoSnippet) otherWrapperProps['data-nosnippet'] = true;
 
+    const WrapperComponent = VariantComponent || Wrapper;
+
     return (
-      <Wrapper
+      <WrapperComponent
         ref={ref}
         tagType={tagType}
         className={type}
@@ -47,7 +48,7 @@ const Layout = React.forwardRef(
         {...otherWrapperProps}>
         {title && <h2 className="heading heading--section">{title}</h2>}
         {renderChildren(children, otherProps)}
-      </Wrapper>
+      </WrapperComponent>
     );
   }
 );
@@ -62,6 +63,7 @@ Layout.propTypes = {
   backgroundImage: PropTypes.string,
   tagType: PropTypes.string,
   dataNoSnippet: PropTypes.bool,
+  VariantComponent: PropTypes.func,
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired
 };
 
@@ -73,7 +75,8 @@ Layout.defaultProps = {
   modifier: '',
   tagType: '',
   dataNoSnippet: false,
-  sticky: false
+  sticky: false,
+  VariantComponent: null
 };
 
 export default Layout;

package/src/hooks/helpers/RenderComponent.js

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ErrorBoundary from '@blaze-cms/core-errors-ui';
 import getComponent from './getComponent';
+import getVariant from './getVariant';
 import appendGtmClassName from './append-gtm-classname';
 import { PB_TYPE_IMAGE, PB_TYPE_BANNER, PB_TYPE_TEXTBLOCK, PB_TYPE_CAROUSEL } from './constants';
 import { BannerContextProvider } from '../../BannerContext';
@@ -24,16 +25,19 @@ const RenderComponent = ({
   const imageOptions = isImage ? imageProps : {};
   if (!Component) return null;
   const updatedSettings = appendGtmClassName(settings, childComponents);
+  const [VariantComponent, variantSettings] = getVariant(settings);
 
   return (
     <ErrorBoundary>
       <Component
         key={id}
         type={type}
+        VariantComponent={VariantComponent}
         {...options}
         {...imageOptions}
         {...nestedComponentsProps}
         {...updatedSettings}
+        {...variantSettings}
         name={name || settings.name}>
         {hasTextBlockBanners ? (
           <BannerContextProvider siblings={siblings} banners={textBlockBanners} pbOptions={options}>

package/src/hooks/helpers/getVariant.js

@@ -0,0 +1,11 @@
+import { variantHandler } from '../../utils';
+
+export default function getVariant(settings) {
+  const { variant } = settings;
+  if (!variant) return [null, {}];
+  const { VariantComponent, getSettings } = variantHandler.get(variant) || {};
+  const variantSettings =
+    !!getSettings && typeof getSettings === 'function' ? getSettings(settings) : settings;
+
+  return [VariantComponent, variantSettings];
+}

package/src/index.js

@@ -1,8 +1,9 @@
 export { default as buildPBComponents } from './hooks/helpers/buildPBComponents';
 export { default as getLightboxImages } from './hooks/helpers/get-lightbox-images';
 export { default as getComponent } from './hooks/helpers/getComponent';
-export { componentMap, getClassModifiers } from './utils';
+export { componentMap, variantHandler, getClassModifiers } from './utils';
 export { default as components } from './components';
+export { default as variants } from './variants';
 export {
   getAction,
   generateSingleItemQuery,

package/src/utils/component-map.js

@@ -1,8 +1,7 @@
 import { BlazeError } from '@blaze-cms/core-errors';
 
-function componentMap() {
+function componentMapHandler() {
   const components = new Map();
-
   function get(key) {
     return components.get(key);
   }
@@ -18,7 +17,7 @@ function componentMap() {
 
   function validate(key, component) {
     if (!key || !component) throw new BlazeError('Component requires key and component');
-    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exist`);
+    if (components.has(key) && key !== 'array') throw new BlazeError(`Component already exists`);
   }
 
   return {
@@ -29,6 +28,6 @@ function componentMap() {
   };
 }
 
-const test = componentMap();
+const componentMap = componentMapHandler();
 
-export default test;
+export default componentMap;