@blaze-cms/react-page-builder 0.128.0-admin-updates.5 → 0.128.0-admin-updates.8

package/lib-es/components/SearchFilter/components/Range.js

@@ -9,7 +9,6 @@ import { useRouter } from 'next/router';
 import Select from '@blaze-react/select';
 import { parseUrl } from 'query-string';
 import { useGetSingleEntitySchema } from '../../../hooks';
-import { withTitle } from '../../../HOC';
 import { getSelectOptions, getIntersectedProp, getRangeValue, calculateMinMax } from '../helpers';
 import { decodeValue } from '../helpers/decode-encode';
 const Range = ({
@@ -20,7 +19,8 @@ const Range = ({
   dataAggregations,
   updateFilterValues,
   filterValues,
-  shouldSearch
+  shouldSearch,
+  elementTitle
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -59,7 +59,9 @@ const Range = ({
       })
     }, shouldSearch);
   }, debounceAmount);
-  return /*#__PURE__*/React.createElement(React.Fragment, null, hasMultipleOptions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(Select, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, elementTitle && /*#__PURE__*/React.createElement("div", {
+    className: "heading heading--section"
+  }, elementTitle), hasMultipleOptions && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", null, label), /*#__PURE__*/React.createElement(Select, {
     value: rangeOption,
     id: rangeOption,
     options: options,
@@ -101,12 +103,14 @@ Range.propTypes = {
   shouldSearch: PropTypes.bool,
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
+  elementTitle: PropTypes.string,
   dataAggregations: PropTypes.object.isRequired
 };
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
-  label: ''
+  label: '',
+  elementTitle: ''
 };
-export default withTitle(Range);
+export default Range;
 //# sourceMappingURL=Range.js.map

package/lib-es/components/SearchFilter/components/Range.js.map

@@ -1 +1 @@
-{"version":3,"file":"Range.js","names":["React","PropTypes","debounce","RangeFilter","useRouter","Select","parseUrl","useGetSingleEntitySchema","withTitle","getSelectOptions","getIntersectedProp","getRangeValue","calculateMinMax","decodeValue","Range","rangeInterval","label","entity","propsToDisplay","dataAggregations","updateFilterValues","filterValues","shouldSearch","router","debounceAmount","query","asPath","hasMultipleOptions","length","initialRangeOption","rangeOption","selectedOption","rangeValue","data","getEntitySchema","loading","options","min","max","minValue","maxValue","valueToUse","_objectSpread","handleChange","option","value","createElement","Fragment","id","required","onChange","updatedOptions","forEach","prop","eMin","eMax","initValue","key","name","propTypes","array","isRequired","string","object","func","bool","number","defaultProps"],"sources":["../../../../src/components/SearchFilter/components/Range.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport RangeFilter from '@blaze-react/range-filter';\nimport { useRouter } from 'next/router';\nimport Select from '@blaze-react/select';\nimport { parseUrl } from 'query-string';\nimport { useGetSingleEntitySchema } from '../../../hooks';\nimport { withTitle } from '../../../HOC';\nimport { getSelectOptions, getIntersectedProp, getRangeValue, calculateMinMax } from '../helpers';\nimport { decodeValue } from '../helpers/decode-encode';\n\nconst Range = ({\n  rangeInterval,\n  label,\n  entity,\n  propsToDisplay,\n  dataAggregations,\n  updateFilterValues,\n  filterValues,\n  shouldSearch\n}) => {\n  const router = useRouter();\n  const debounceAmount = shouldSearch ? 1200 : 400;\n  const { query } = parseUrl(decodeValue(router.asPath));\n  const hasMultipleOptions = propsToDisplay.length > 1;\n  const initialRangeOption = getIntersectedProp(query, propsToDisplay) || propsToDisplay[0];\n  const rangeOption =\n    (filterValues[initialRangeOption] && filterValues[initialRangeOption].selectedOption) ||\n    initialRangeOption;\n  const rangeValue = filterValues[rangeOption];\n\n  const { data: { getEntitySchema = {} } = {}, loading } = useGetSingleEntitySchema(\n    entity,\n    !hasMultipleOptions\n  );\n\n  if (loading || !rangeOption || !rangeValue) return '';\n\n  const options = getSelectOptions(getEntitySchema, propsToDisplay);\n  // get range from aggregations so it updates\n  const { min, max } = calculateMinMax(dataAggregations[rangeOption], rangeInterval);\n  const minValue = rangeValue.minValue < min ? min : rangeValue.minValue;\n  const maxValue = rangeValue.maxValue > max ? max : rangeValue.maxValue;\n  const valueToUse = { ...rangeValue, min, max, minValue, maxValue };\n\n  const handleChange = debounce((option, value) => {\n    updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);\n  }, debounceAmount);\n\n  return (\n    <>\n      {hasMultipleOptions && (\n        <>\n          <label>{label}</label>\n          <Select\n            value={rangeOption}\n            id={rangeOption}\n            options={options}\n            required\n            onChange={({ value }) => {\n              const updatedOptions = {};\n              propsToDisplay.forEach(prop => {\n                const { min: eMin, max: eMax } = filterValues[prop];\n                const initValue = getRangeValue(null, rangeInterval, eMin, eMax);\n                updatedOptions[prop] = { ...initValue, selectedOption: value };\n              });\n\n              updateFilterValues(updatedOptions, false);\n            }}\n          />\n        </>\n      )}\n      <RangeFilter\n        key={`${rangeOption}-${minValue}-${maxValue}`}\n        name={rangeOption}\n        label={hasMultipleOptions ? '' : label}\n        value={valueToUse}\n        id={rangeOption}\n        onChange={({ value }) => {\n          handleChange(rangeOption, value);\n        }}\n      />\n    </>\n  );\n};\n\nRange.propTypes = {\n  propsToDisplay: PropTypes.array.isRequired,\n  entity: PropTypes.string.isRequired,\n  filterValues: PropTypes.object.isRequired,\n  updateFilterValues: PropTypes.func.isRequired,\n  shouldSearch: PropTypes.bool,\n  rangeInterval: PropTypes.number,\n  label: PropTypes.string,\n  dataAggregations: PropTypes.object.isRequired\n};\n\nRange.defaultProps = {\n  shouldSearch: false,\n  rangeInterval: 1,\n  label: ''\n};\n\nexport default withTitle(Range);\n"],"mappings":"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"}
+{"version":3,"file":"Range.js","names":["React","PropTypes","debounce","RangeFilter","useRouter","Select","parseUrl","useGetSingleEntitySchema","getSelectOptions","getIntersectedProp","getRangeValue","calculateMinMax","decodeValue","Range","rangeInterval","label","entity","propsToDisplay","dataAggregations","updateFilterValues","filterValues","shouldSearch","elementTitle","router","debounceAmount","query","asPath","hasMultipleOptions","length","initialRangeOption","rangeOption","selectedOption","rangeValue","data","getEntitySchema","loading","options","min","max","minValue","maxValue","valueToUse","_objectSpread","handleChange","option","value","createElement","Fragment","className","id","required","onChange","updatedOptions","forEach","prop","eMin","eMax","initValue","key","name","propTypes","array","isRequired","string","object","func","bool","number","defaultProps"],"sources":["../../../../src/components/SearchFilter/components/Range.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport debounce from 'lodash.debounce';\nimport RangeFilter from '@blaze-react/range-filter';\nimport { useRouter } from 'next/router';\nimport Select from '@blaze-react/select';\nimport { parseUrl } from 'query-string';\nimport { useGetSingleEntitySchema } from '../../../hooks';\nimport { getSelectOptions, getIntersectedProp, getRangeValue, calculateMinMax } from '../helpers';\nimport { decodeValue } from '../helpers/decode-encode';\n\nconst Range = ({\n  rangeInterval,\n  label,\n  entity,\n  propsToDisplay,\n  dataAggregations,\n  updateFilterValues,\n  filterValues,\n  shouldSearch,\n  elementTitle\n}) => {\n  const router = useRouter();\n  const debounceAmount = shouldSearch ? 1200 : 400;\n  const { query } = parseUrl(decodeValue(router.asPath));\n  const hasMultipleOptions = propsToDisplay.length > 1;\n  const initialRangeOption = getIntersectedProp(query, propsToDisplay) || propsToDisplay[0];\n  const rangeOption =\n    (filterValues[initialRangeOption] && filterValues[initialRangeOption].selectedOption) ||\n    initialRangeOption;\n  const rangeValue = filterValues[rangeOption];\n\n  const { data: { getEntitySchema = {} } = {}, loading } = useGetSingleEntitySchema(\n    entity,\n    !hasMultipleOptions\n  );\n\n  if (loading || !rangeOption || !rangeValue) return '';\n\n  const options = getSelectOptions(getEntitySchema, propsToDisplay);\n  // get range from aggregations so it updates\n  const { min, max } = calculateMinMax(dataAggregations[rangeOption], rangeInterval);\n  const minValue = rangeValue.minValue < min ? min : rangeValue.minValue;\n  const maxValue = rangeValue.maxValue > max ? max : rangeValue.maxValue;\n  const valueToUse = { ...rangeValue, min, max, minValue, maxValue };\n\n  const handleChange = debounce((option, value) => {\n    updateFilterValues({ [option]: { ...value, selectedOption: rangeOption } }, shouldSearch);\n  }, debounceAmount);\n\n  return (\n    <>\n      {elementTitle && <div className=\"heading heading--section\">{elementTitle}</div>}\n      {hasMultipleOptions && (\n        <>\n          <label>{label}</label>\n          <Select\n            value={rangeOption}\n            id={rangeOption}\n            options={options}\n            required\n            onChange={({ value }) => {\n              const updatedOptions = {};\n              propsToDisplay.forEach(prop => {\n                const { min: eMin, max: eMax } = filterValues[prop];\n                const initValue = getRangeValue(null, rangeInterval, eMin, eMax);\n                updatedOptions[prop] = { ...initValue, selectedOption: value };\n              });\n\n              updateFilterValues(updatedOptions, false);\n            }}\n          />\n        </>\n      )}\n      <RangeFilter\n        key={`${rangeOption}-${minValue}-${maxValue}`}\n        name={rangeOption}\n        label={hasMultipleOptions ? '' : label}\n        value={valueToUse}\n        id={rangeOption}\n        onChange={({ value }) => {\n          handleChange(rangeOption, value);\n        }}\n      />\n    </>\n  );\n};\n\nRange.propTypes = {\n  propsToDisplay: PropTypes.array.isRequired,\n  entity: PropTypes.string.isRequired,\n  filterValues: PropTypes.object.isRequired,\n  updateFilterValues: PropTypes.func.isRequired,\n  shouldSearch: PropTypes.bool,\n  rangeInterval: PropTypes.number,\n  label: PropTypes.string,\n  elementTitle: PropTypes.string,\n  dataAggregations: PropTypes.object.isRequired\n};\n\nRange.defaultProps = {\n  shouldSearch: false,\n  rangeInterval: 1,\n  label: '',\n  elementTitle: ''\n};\n\nexport default Range;\n"],"mappings":"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"}

package/lib-es/components/SearchFilter/components/Select.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Select from '@blaze-react/select';
-import { withTitle } from '../../../HOC';
 import { DEFAULT_OPTION } from '../constants';
 const SelectFilter = ({
   data,
@@ -11,7 +10,8 @@ const SelectFilter = ({
   filterValues,
   shouldSearch,
   displayLabelAsPlaceholder,
-  displayFilterCount
+  displayFilterCount,
+  elementTitle
 }) => {
   const filterValue = filterValues[prop] || '';
   const disabledOptions = [];
@@ -33,7 +33,9 @@ const SelectFilter = ({
     defaultTextValue = labelToUse;
     labelToUse = null;
   }
-  return /*#__PURE__*/React.createElement(Select, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, elementTitle && /*#__PURE__*/React.createElement("div", {
+    className: "heading heading--section"
+  }, elementTitle), /*#__PURE__*/React.createElement(Select, {
     label: labelToUse,
     value: filterValue,
     id: prop,
@@ -50,7 +52,7 @@ const SelectFilter = ({
       }, shouldSearch);
     },
     disabled: disabledOptions
-  });
+  }));
 };
 SelectFilter.propTypes = {
   data: PropTypes.object.isRequired,
@@ -59,6 +61,7 @@ SelectFilter.propTypes = {
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
   label: PropTypes.string,
+  elementTitle: PropTypes.string,
   displayLabelAsPlaceholder: PropTypes.bool,
   displayFilterCount: PropTypes.bool
 };
@@ -66,8 +69,9 @@ SelectFilter.defaultProps = {
   filterValues: {},
   shouldSearch: false,
   label: '',
+  elementTitle: '',
   displayLabelAsPlaceholder: false,
   displayFilterCount: false
 };
-export default withTitle(SelectFilter);
+export default SelectFilter;
 //# sourceMappingURL=Select.js.map

package/lib-es/components/SearchFilter/components/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","names":["React","PropTypes","Select","withTitle","DEFAULT_OPTION","SelectFilter","data","label","prop","updateFilterValues","filterValues","shouldSearch","displayLabelAsPlaceholder","displayFilterCount","filterValue","disabledOptions","buckets","options","map","key","doc_count","count","push","optionLabel","filter","Boolean","sort","labelText","labelToUse","defaultTextValue","createElement","value","id","onChange","valueToUse","disabled","propTypes","object","isRequired","string","func","bool","defaultProps"],"sources":["../../../../src/components/SearchFilter/components/Select.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '@blaze-react/select';\nimport { withTitle } from '../../../HOC';\nimport { DEFAULT_OPTION } from '../constants';\n\nconst SelectFilter = ({\n  data,\n  label,\n  prop,\n  updateFilterValues,\n  filterValues,\n  shouldSearch,\n  displayLabelAsPlaceholder,\n  displayFilterCount\n}) => {\n  const filterValue = filterValues[prop] || '';\n  const disabledOptions = [];\n  const { buckets = [] } = data[prop] || {};\n  const options = buckets\n    .map(({ key, doc_count: count }) => {\n      if (!count) disabledOptions.push(key);\n      const optionLabel = displayFilterCount ? `${key} (${count})` : key;\n      return [key, optionLabel];\n    })\n    .filter(Boolean)\n    .sort();\n\n  const labelText = label || prop;\n  let labelToUse = labelText;\n  let defaultTextValue = DEFAULT_OPTION;\n  if (displayLabelAsPlaceholder) {\n    defaultTextValue = labelToUse;\n    labelToUse = null;\n  }\n\n  return (\n    <Select\n      label={labelToUse}\n      value={filterValue}\n      id={prop}\n      data-testid={`filter-${prop}`}\n      options={options}\n      defaultTextValue={defaultTextValue}\n      onChange={({ value }) => {\n        let valueToUse = value;\n        if (value === defaultTextValue) valueToUse = '';\n        updateFilterValues({ [prop]: valueToUse }, shouldSearch);\n      }}\n      disabled={disabledOptions}\n    />\n  );\n};\n\nSelectFilter.propTypes = {\n  data: PropTypes.object.isRequired,\n  prop: PropTypes.string.isRequired,\n  filterValues: PropTypes.object,\n  updateFilterValues: PropTypes.func.isRequired,\n  shouldSearch: PropTypes.bool,\n  label: PropTypes.string,\n  displayLabelAsPlaceholder: PropTypes.bool,\n  displayFilterCount: PropTypes.bool\n};\n\nSelectFilter.defaultProps = {\n  filterValues: {},\n  shouldSearch: false,\n  label: '',\n  displayLabelAsPlaceholder: false,\n  displayFilterCount: false\n};\n\nexport default withTitle(SelectFilter);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,MAAM,MAAM,qBAAqB;AACxC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,cAAc,QAAQ,cAAc;AAE7C,MAAMC,YAAY,GAAGA,CAAC;EACpBC,IAAI;EACJC,KAAK;EACLC,IAAI;EACJC,kBAAkB;EAClBC,YAAY;EACZC,YAAY;EACZC,yBAAyB;EACzBC;AACF,CAAC,KAAK;EACJ,MAAMC,WAAW,GAAGJ,YAAY,CAACF,IAAI,CAAC,IAAI,EAAE;EAC5C,MAAMO,eAAe,GAAG,EAAE;EAC1B,MAAM;IAAEC,OAAO,GAAG;EAAG,CAAC,GAAGV,IAAI,CAACE,IAAI,CAAC,IAAI,CAAC,CAAC;EACzC,MAAMS,OAAO,GAAGD,OAAO,CACpBE,GAAG,CAAC,CAAC;IAAEC,GAAG;IAAEC,SAAS,EAAEC;EAAM,CAAC,KAAK;IAClC,IAAI,CAACA,KAAK,EAAEN,eAAe,CAACO,IAAI,CAACH,GAAG,CAAC;IACrC,MAAMI,WAAW,GAAGV,kBAAkB,GAAI,GAAEM,GAAI,KAAIE,KAAM,GAAE,GAAGF,GAAG;IAClE,OAAO,CAACA,GAAG,EAAEI,WAAW,CAAC;EAC3B,CAAC,CAAC,CACDC,MAAM,CAACC,OAAO,CAAC,CACfC,IAAI,EAAE;EAET,MAAMC,SAAS,GAAGpB,KAAK,IAAIC,IAAI;EAC/B,IAAIoB,UAAU,GAAGD,SAAS;EAC1B,IAAIE,gBAAgB,GAAGzB,cAAc;EACrC,IAAIQ,yBAAyB,EAAE;IAC7BiB,gBAAgB,GAAGD,UAAU;IAC7BA,UAAU,GAAG,IAAI;EACnB;EAEA,oBACE5B,KAAA,CAAA8B,aAAA,CAAC5B,MAAM;IACLK,KAAK,EAAEqB,UAAW;IAClBG,KAAK,EAAEjB,WAAY;IACnBkB,EAAE,EAAExB,IAAK;IACT,eAAc,UAASA,IAAK,EAAE;IAC9BS,OAAO,EAAEA,OAAQ;IACjBY,gBAAgB,EAAEA,gBAAiB;IACnCI,QAAQ,EAAEA,CAAC;MAAEF;IAAM,CAAC,KAAK;MACvB,IAAIG,UAAU,GAAGH,KAAK;MACtB,IAAIA,KAAK,KAAKF,gBAAgB,EAAEK,UAAU,GAAG,EAAE;MAC/CzB,kBAAkB,CAAC;QAAE,CAACD,IAAI,GAAG0B;MAAW,CAAC,EAAEvB,YAAY,CAAC;IAC1D,CAAE;IACFwB,QAAQ,EAAEpB;EAAgB,EAC1B;AAEN,CAAC;AAEDV,YAAY,CAAC+B,SAAS,GAAG;EACvB9B,IAAI,EAAEL,SAAS,CAACoC,MAAM,CAACC,UAAU;EACjC9B,IAAI,EAAEP,SAAS,CAACsC,MAAM,CAACD,UAAU;EACjC5B,YAAY,EAAET,SAAS,CAACoC,MAAM;EAC9B5B,kBAAkB,EAAER,SAAS,CAACuC,IAAI,CAACF,UAAU;EAC7C3B,YAAY,EAAEV,SAAS,CAACwC,IAAI;EAC5BlC,KAAK,EAAEN,SAAS,CAACsC,MAAM;EACvB3B,yBAAyB,EAAEX,SAAS,CAACwC,IAAI;EACzC5B,kBAAkB,EAAEZ,SAAS,CAACwC;AAChC,CAAC;AAEDpC,YAAY,CAACqC,YAAY,GAAG;EAC1BhC,YAAY,EAAE,CAAC,CAAC;EAChBC,YAAY,EAAE,KAAK;EACnBJ,KAAK,EAAE,EAAE;EACTK,yBAAyB,EAAE,KAAK;EAChCC,kBAAkB,EAAE;AACtB,CAAC;AAED,eAAeV,SAAS,CAACE,YAAY,CAAC"}
+{"version":3,"file":"Select.js","names":["React","PropTypes","Select","DEFAULT_OPTION","SelectFilter","data","label","prop","updateFilterValues","filterValues","shouldSearch","displayLabelAsPlaceholder","displayFilterCount","elementTitle","filterValue","disabledOptions","buckets","options","map","key","doc_count","count","push","optionLabel","filter","Boolean","sort","labelText","labelToUse","defaultTextValue","createElement","Fragment","className","value","id","onChange","valueToUse","disabled","propTypes","object","isRequired","string","func","bool","defaultProps"],"sources":["../../../../src/components/SearchFilter/components/Select.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Select from '@blaze-react/select';\nimport { DEFAULT_OPTION } from '../constants';\n\nconst SelectFilter = ({\n  data,\n  label,\n  prop,\n  updateFilterValues,\n  filterValues,\n  shouldSearch,\n  displayLabelAsPlaceholder,\n  displayFilterCount,\n  elementTitle\n}) => {\n  const filterValue = filterValues[prop] || '';\n  const disabledOptions = [];\n  const { buckets = [] } = data[prop] || {};\n  const options = buckets\n    .map(({ key, doc_count: count }) => {\n      if (!count) disabledOptions.push(key);\n      const optionLabel = displayFilterCount ? `${key} (${count})` : key;\n      return [key, optionLabel];\n    })\n    .filter(Boolean)\n    .sort();\n\n  const labelText = label || prop;\n  let labelToUse = labelText;\n  let defaultTextValue = DEFAULT_OPTION;\n  if (displayLabelAsPlaceholder) {\n    defaultTextValue = labelToUse;\n    labelToUse = null;\n  }\n\n  return (\n    <>\n      {elementTitle && <div className=\"heading heading--section\">{elementTitle}</div>}\n      <Select\n        label={labelToUse}\n        value={filterValue}\n        id={prop}\n        data-testid={`filter-${prop}`}\n        options={options}\n        defaultTextValue={defaultTextValue}\n        onChange={({ value }) => {\n          let valueToUse = value;\n          if (value === defaultTextValue) valueToUse = '';\n          updateFilterValues({ [prop]: valueToUse }, shouldSearch);\n        }}\n        disabled={disabledOptions}\n      />\n    </>\n  );\n};\n\nSelectFilter.propTypes = {\n  data: PropTypes.object.isRequired,\n  prop: PropTypes.string.isRequired,\n  filterValues: PropTypes.object,\n  updateFilterValues: PropTypes.func.isRequired,\n  shouldSearch: PropTypes.bool,\n  label: PropTypes.string,\n  elementTitle: PropTypes.string,\n\n  displayLabelAsPlaceholder: PropTypes.bool,\n  displayFilterCount: PropTypes.bool\n};\n\nSelectFilter.defaultProps = {\n  filterValues: {},\n  shouldSearch: false,\n  label: '',\n  elementTitle: '',\n  displayLabelAsPlaceholder: false,\n  displayFilterCount: false\n};\n\nexport default SelectFilter;\n"],"mappings":"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"}

package/lib-es/components/SearchFilter/components/TextSearch.js

@@ -2,13 +2,15 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
 import { MdSearch } from 'react-icons/md';
-import { withTitle } from '../../../HOC';
 import { SEARCH_TERM } from '../constants';
 const TextSearch = ({
   label,
   searchValue,
-  updateFilterValues
-}) => /*#__PURE__*/React.createElement("div", {
+  updateFilterValues,
+  elementTitle
+}) => /*#__PURE__*/React.createElement(React.Fragment, null, elementTitle && /*#__PURE__*/React.createElement("div", {
+  className: "heading heading--section"
+}, elementTitle), /*#__PURE__*/React.createElement("div", {
   className: "search"
 }, /*#__PURE__*/React.createElement("div", {
   className: "search__wrapper"
@@ -34,14 +36,16 @@ const TextSearch = ({
       [SEARCH_TERM]: searchValue
     }, true);
   }
-}, /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/React.createElement(MdSearch, null)))));
+}, /*#__PURE__*/React.createElement("i", null, /*#__PURE__*/React.createElement(MdSearch, null))))));
 TextSearch.propTypes = {
   searchValue: PropTypes.string.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
+  elementTitle: PropTypes.string,
   label: PropTypes.string
 };
 TextSearch.defaultProps = {
+  elementTitle: '',
   label: ''
 };
-export default withTitle(TextSearch);
+export default TextSearch;
 //# sourceMappingURL=TextSearch.js.map

package/lib-es/components/SearchFilter/components/TextSearch.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextSearch.js","names":["React","PropTypes","Input","MdSearch","withTitle","SEARCH_TERM","TextSearch","label","searchValue","updateFilterValues","createElement","className","id","value","placeholder","onChange","eValue","type","onClick","e","preventDefault","propTypes","string","isRequired","func","defaultProps"],"sources":["../../../../src/components/SearchFilter/components/TextSearch.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Input from '@blaze-react/input';\nimport { MdSearch } from 'react-icons/md';\nimport { withTitle } from '../../../HOC';\nimport { SEARCH_TERM } from '../constants';\n\nconst TextSearch = ({ label, searchValue, updateFilterValues }) => (\n  <div className=\"search\">\n    <div className=\"search__wrapper\">\n      <div className=\"form-field form-field--input form-field--search\">\n        <Input\n          id={SEARCH_TERM}\n          value={searchValue}\n          placeholder={label || 'Search'}\n          onChange={({ value: eValue }) => {\n            updateFilterValues({ [SEARCH_TERM]: eValue }, false);\n          }}\n        />\n      </div>\n      <button\n        type=\"button\"\n        className=\"icon-button icon-button--search\"\n        onClick={e => {\n          e.preventDefault();\n          updateFilterValues({ [SEARCH_TERM]: searchValue }, true);\n        }}>\n        <i>\n          <MdSearch />\n        </i>\n      </button>\n    </div>\n  </div>\n);\n\nTextSearch.propTypes = {\n  searchValue: PropTypes.string.isRequired,\n  updateFilterValues: PropTypes.func.isRequired,\n  label: PropTypes.string\n};\n\nTextSearch.defaultProps = {\n  label: ''\n};\n\nexport default withTitle(TextSearch);\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,KAAK,MAAM,oBAAoB;AACtC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,WAAW,QAAQ,cAAc;AAE1C,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,WAAW;EAAEC;AAAmB,CAAC,kBAC5DT,KAAA,CAAAU,aAAA;EAAKC,SAAS,EAAC;AAAQ,gBACrBX,KAAA,CAAAU,aAAA;EAAKC,SAAS,EAAC;AAAiB,gBAC9BX,KAAA,CAAAU,aAAA;EAAKC,SAAS,EAAC;AAAiD,gBAC9DX,KAAA,CAAAU,aAAA,CAACR,KAAK;EACJU,EAAE,EAAEP,WAAY;EAChBQ,KAAK,EAAEL,WAAY;EACnBM,WAAW,EAAEP,KAAK,IAAI,QAAS;EAC/BQ,QAAQ,EAAEA,CAAC;IAAEF,KAAK,EAAEG;EAAO,CAAC,KAAK;IAC/BP,kBAAkB,CAAC;MAAE,CAACJ,WAAW,GAAGW;IAAO,CAAC,EAAE,KAAK,CAAC;EACtD;AAAE,EACF,CACE,eACNhB,KAAA,CAAAU,aAAA;EACEO,IAAI,EAAC,QAAQ;EACbN,SAAS,EAAC,iCAAiC;EAC3CO,OAAO,EAAEC,CAAC,IAAI;IACZA,CAAC,CAACC,cAAc,EAAE;IAClBX,kBAAkB,CAAC;MAAE,CAACJ,WAAW,GAAGG;IAAY,CAAC,EAAE,IAAI,CAAC;EAC1D;AAAE,gBACFR,KAAA,CAAAU,aAAA,yBACEV,KAAA,CAAAU,aAAA,CAACP,QAAQ,OAAG,CACV,CACG,CACL,CAET;AAEDG,UAAU,CAACe,SAAS,GAAG;EACrBb,WAAW,EAAEP,SAAS,CAACqB,MAAM,CAACC,UAAU;EACxCd,kBAAkB,EAAER,SAAS,CAACuB,IAAI,CAACD,UAAU;EAC7ChB,KAAK,EAAEN,SAAS,CAACqB;AACnB,CAAC;AAEDhB,UAAU,CAACmB,YAAY,GAAG;EACxBlB,KAAK,EAAE;AACT,CAAC;AAED,eAAeH,SAAS,CAACE,UAAU,CAAC"}
+{"version":3,"file":"TextSearch.js","names":["React","PropTypes","Input","MdSearch","SEARCH_TERM","TextSearch","label","searchValue","updateFilterValues","elementTitle","createElement","Fragment","className","id","value","placeholder","onChange","eValue","type","onClick","e","preventDefault","propTypes","string","isRequired","func","defaultProps"],"sources":["../../../../src/components/SearchFilter/components/TextSearch.js"],"sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport Input from '@blaze-react/input';\nimport { MdSearch } from 'react-icons/md';\nimport { SEARCH_TERM } from '../constants';\n\nconst TextSearch = ({ label, searchValue, updateFilterValues, elementTitle }) => (\n  <>\n    {elementTitle && <div className=\"heading heading--section\">{elementTitle}</div>}\n    <div className=\"search\">\n      <div className=\"search__wrapper\">\n        <div className=\"form-field form-field--input form-field--search\">\n          <Input\n            id={SEARCH_TERM}\n            value={searchValue}\n            placeholder={label || 'Search'}\n            onChange={({ value: eValue }) => {\n              updateFilterValues({ [SEARCH_TERM]: eValue }, false);\n            }}\n          />\n        </div>\n        <button\n          type=\"button\"\n          className=\"icon-button icon-button--search\"\n          onClick={e => {\n            e.preventDefault();\n            updateFilterValues({ [SEARCH_TERM]: searchValue }, true);\n          }}>\n          <i>\n            <MdSearch />\n          </i>\n        </button>\n      </div>\n    </div>\n  </>\n);\n\nTextSearch.propTypes = {\n  searchValue: PropTypes.string.isRequired,\n  updateFilterValues: PropTypes.func.isRequired,\n  elementTitle: PropTypes.string,\n  label: PropTypes.string\n};\n\nTextSearch.defaultProps = {\n  elementTitle: '',\n  label: ''\n};\n\nexport default TextSearch;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,OAAOC,SAAS,MAAM,YAAY;AAClC,OAAOC,KAAK,MAAM,oBAAoB;AACtC,SAASC,QAAQ,QAAQ,gBAAgB;AACzC,SAASC,WAAW,QAAQ,cAAc;AAE1C,MAAMC,UAAU,GAAGA,CAAC;EAAEC,KAAK;EAAEC,WAAW;EAAEC,kBAAkB;EAAEC;AAAa,CAAC,kBAC1ET,KAAA,CAAAU,aAAA,CAAAV,KAAA,CAAAW,QAAA,QACGF,YAAY,iBAAIT,KAAA,CAAAU,aAAA;EAAKE,SAAS,EAAC;AAA0B,GAAEH,YAAY,CAAO,eAC/ET,KAAA,CAAAU,aAAA;EAAKE,SAAS,EAAC;AAAQ,gBACrBZ,KAAA,CAAAU,aAAA;EAAKE,SAAS,EAAC;AAAiB,gBAC9BZ,KAAA,CAAAU,aAAA;EAAKE,SAAS,EAAC;AAAiD,gBAC9DZ,KAAA,CAAAU,aAAA,CAACR,KAAK;EACJW,EAAE,EAAET,WAAY;EAChBU,KAAK,EAAEP,WAAY;EACnBQ,WAAW,EAAET,KAAK,IAAI,QAAS;EAC/BU,QAAQ,EAAEA,CAAC;IAAEF,KAAK,EAAEG;EAAO,CAAC,KAAK;IAC/BT,kBAAkB,CAAC;MAAE,CAACJ,WAAW,GAAGa;IAAO,CAAC,EAAE,KAAK,CAAC;EACtD;AAAE,EACF,CACE,eACNjB,KAAA,CAAAU,aAAA;EACEQ,IAAI,EAAC,QAAQ;EACbN,SAAS,EAAC,iCAAiC;EAC3CO,OAAO,EAAEC,CAAC,IAAI;IACZA,CAAC,CAACC,cAAc,EAAE;IAClBb,kBAAkB,CAAC;MAAE,CAACJ,WAAW,GAAGG;IAAY,CAAC,EAAE,IAAI,CAAC;EAC1D;AAAE,gBACFP,KAAA,CAAAU,aAAA,yBACEV,KAAA,CAAAU,aAAA,CAACP,QAAQ,OAAG,CACV,CACG,CACL,CACF,CAET;AAEDE,UAAU,CAACiB,SAAS,GAAG;EACrBf,WAAW,EAAEN,SAAS,CAACsB,MAAM,CAACC,UAAU;EACxChB,kBAAkB,EAAEP,SAAS,CAACwB,IAAI,CAACD,UAAU;EAC7Cf,YAAY,EAAER,SAAS,CAACsB,MAAM;EAC9BjB,KAAK,EAAEL,SAAS,CAACsB;AACnB,CAAC;AAEDlB,UAAU,CAACqB,YAAY,GAAG;EACxBjB,YAAY,EAAE,EAAE;EAChBH,KAAK,EAAE;AACT,CAAC;AAED,eAAeD,UAAU"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.128.0-admin-updates.5",
+  "version": "0.128.0-admin-updates.8",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -29,12 +29,12 @@
   "dependencies": {
     "@blaze-cms/core-auth-ui": "0.128.0-admin-updates.0",
     "@blaze-cms/core-errors": "0.128.0-admin-updates.0",
-    "@blaze-cms/image-cdn-react": "0.3.0-alpha.3",
-    "@blaze-cms/nextjs-components": "0.128.0-admin-updates.0",
+    "@blaze-cms/image-cdn-react": "0.3.0-alpha.5",
+    "@blaze-cms/nextjs-components": "0.128.0-admin-updates.8",
     "@blaze-cms/plugin-search-ui": "0.128.0-admin-updates.3",
     "@blaze-cms/setup-ui": "0.128.0-admin-updates.0",
     "@blaze-cms/utils": "0.128.0-admin-updates.0",
-    "@blaze-cms/utils-handlebars": "0.128.0-admin-updates.0",
+    "@blaze-cms/utils-handlebars": "0.128.0-admin-updates.8",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
@@ -88,5 +88,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "6dc291cfd27848dd80149526f6f26c4a0d17a708"
+  "gitHead": "449a909ce82545a72ed95dfd55eb79a2c3be280b"
 }

package/src/components/Card/Card.js

@@ -134,11 +134,11 @@ const Card = ({
                 <div className="badge badge--label">{label}</div>
               ))}
             {displayTitle && (
-              <h2 className={titleWrapperModifier}>
+              <div className={titleWrapperModifier}>
                 <BlazeLink title={linkTitle} gtmId={gtmId} href={url} scroll>
                   {headline}
                 </BlazeLink>
-              </h2>
+              </div>
             )}
             {!!parsedPropsToDisplay.length && (
               <div className={getModifiers('card__details', modifiers)}>

package/src/components/Card/CardsContainer.js

@@ -9,8 +9,9 @@ import Card from './Card';
 import { getDynamicGridClasses } from './helpers';
 import { getEntitiesWithBanner, parsePropsToDisplay } from '../../helpers';
 import { getPropsToDisplayModifiers } from '../../utils';
+import { checkIfShouldRenderBanner, checkNewBannerSettings } from '../List/components/helpers';
 
-const CardsContainer = ({
+const CardContainer = ({
   cardData,
   gridModifier,
   style,
@@ -36,14 +37,20 @@ const CardsContainer = ({
   titleOverlayModifier,
   ...cardProps
 }) => {
-  const cardsWithBanners = getEntitiesWithBanner(cardData, cardProps);
   const { itemId } = useContext(MainContext);
+  const { banner } = cardProps;
+  // TODO: remove this check and all associated code once old banner setup is no longer supported
+  const hasNewBannerSettings = checkNewBannerSettings(banner);
+  const parsedCardsData = hasNewBannerSettings
+    ? cardData
+    : getEntitiesWithBanner(cardData, cardProps);
   const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);
   const dynamicWrapperSizes = enableCarousel
     ? ''
     : getDynamicGridClasses('grid', itemsPerRow, designConfig);
-  let renderCounter = 0;
   const CardWrapper = enableCarousel ? CarouselWrapper : Wrapper;
+  let bannerIndex = 0;
+  const bannerProps = banner ? { ...cardProps, ...banner, type: 'banner' } : null;
 
   return (
     <CardWrapper
@@ -53,13 +60,48 @@ const CardsContainer = ({
       bannerModifier={bannerModifier}
       enableAutoScroll={enableAutoScroll}
       autoScrollTimer={autoScrollTimer}>
-      {cardsWithBanners.map(({ baseAdunit, id, ...entityProps }, index) => {
+      {parsedCardsData.map((currentEntity, index) => {
+        const { baseAdunit, id, ...entityProps } = currentEntity;
+        const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(index, banner);
         const extraProps = parsePropsToDisplay(entityProps, propsToDisplay);
         const dynamicKey = [itemId, index].join('-');
-        if (baseAdunit) renderCounter += 1;
-
         const priority = priorityLimit > 0 && index + 1 <= priorityLimit;
+        if (hasNewBannerSettings && shouldRenderBanner) bannerIndex += 1;
+        if (!hasNewBannerSettings && baseAdunit) bannerIndex += 1;
+        const parsedCardProps = {
+          key: id,
+          id,
+          enableCarousel,
+          graphqlEntityMap,
+          propsToDisplay,
+          parsedPropsToDisplay: extraProps,
+          propsToDisplayModifiers,
+          modifier,
+          style,
+          cardChildren,
+          gtmChildren,
+          gtmId: name,
+          gridModifier,
+          entityProps,
+          displayCategory,
+          displayThumbnail,
+          displayTitle,
+          priority,
+          enableOverlay,
+          overlayModifier,
+          titleOverlayModifier,
+          ...entityProps
+        };
 
+        if (hasNewBannerSettings)
+          return (
+            <>
+              <Card key={id} {...parsedCardProps} />
+              {shouldRenderBanner && (
+                <Banner key={dynamicKey} {...bannerProps} renderCounter={bannerIndex} />
+              )}
+            </>
+          );
         return baseAdunit ? (
           <Banner
             key={dynamicKey}
@@ -67,44 +109,21 @@ const CardsContainer = ({
             baseAdunit={baseAdunit}
             {...entityProps}
             modifier={modifier}
-            renderCounter={renderCounter}
+            renderCounter={bannerIndex}
           />
         ) : (
-          <Card
-            key={id}
-            id={id}
-            enableCarousel={enableCarousel}
-            graphqlEntityMap={graphqlEntityMap}
-            propsToDisplay={propsToDisplay}
-            parsedPropsToDisplay={extraProps}
-            propsToDisplayModifiers={propsToDisplayModifiers}
-            modifier={modifier}
-            style={style}
-            cardChildren={cardChildren}
-            gtmChildren={gtmChildren}
-            gtmId={name}
-            gridModifier={gridModifier}
-            entityProps={entityProps}
-            displayCategory={displayCategory}
-            displayThumbnail={displayThumbnail}
-            displayTitle={displayTitle}
-            priority={priority}
-            enableOverlay={enableOverlay}
-            overlayModifier={overlayModifier}
-            titleOverlayModifier={titleOverlayModifier}
-            {...entityProps}
-          />
+          <Card key={id} {...parsedCardProps} />
         );
       })}
     </CardWrapper>
   );
 };
 
-CardsContainer.propTypes = {
+CardContainer.propTypes = {
   cardData: PropTypes.array.isRequired,
+  graphqlEntityMap: PropTypes.object.isRequired,
   name: PropTypes.string,
   entity: PropTypes.string.isRequired,
-  graphqlEntityMap: PropTypes.object.isRequired,
   gridModifier: PropTypes.string,
   gtmChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   cardChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
@@ -126,7 +145,7 @@ CardsContainer.propTypes = {
   autoScrollTimer: PropTypes.number
 };
 
-CardsContainer.defaultProps = {
+CardContainer.defaultProps = {
   gtmChildren: [],
   cardChildren: [],
   name: '',
@@ -149,4 +168,4 @@ CardsContainer.defaultProps = {
   titleOverlayModifier: ''
 };
 
-export default withTitle(CardsContainer);
+export default withTitle(CardContainer);

package/src/components/DataSummary/DataSummaryTypes/ItemDetailsSummary/ItemDetailsSummaryContent.js

@@ -13,7 +13,7 @@ const ItemDetailsSummaryContent = ({ summaryPropsWithContent }) => {
 
     return (
       <span className={modifier} key={dynamicKey}>
-        {wrappedValue}
+        {key && <span className="item-details-summary-label">{key}</span>} {wrappedValue}
       </span>
     );
   });

package/src/components/Image/Image.js

@@ -78,7 +78,7 @@ const Image = ({
 
   return (
     <Wrapper ref={outerRef} className={wrapperClassName} modifiers={modifiers} {...otherProps}>
-      {elementTitle && <h2 className="heading heading--section">{elementTitle}</h2>}
+      {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
       {shouldDisplayImage && (
         <ImgWrapper {...imgWrapperProps}>
           <ImageRender

package/src/components/List/components/Full/FullRender.js

@@ -17,7 +17,6 @@ const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props })
     ? { hasBanner, parent, entity, propsToDisplay, ...banner, type: BANNER }
     : null;
   let bannerIndex = 0;
-
   const WrapperToUse = omitWrappers ? Fragment : Wrapper;
 
   return (

package/src/components/List/components/helpers/check-if-should-render-banner.js

@@ -1,5 +1,4 @@
-const checkIfShouldRenderBanner = (elementIndex, banner) => {
-  if (!banner) return false;
+const legacyCheckIfShouldRenderBanner = (elementIndex, banner) => {
   const { interval, repeat, hasBanner } = banner;
   if (!hasBanner || !interval) return false;
   const position = elementIndex + 1;
@@ -8,5 +7,27 @@ const checkIfShouldRenderBanner = (elementIndex, banner) => {
   if (repeat && repeatMatch) return true;
   return false;
 };
+const checkNewBannerSettings = banner => {
+  if (!banner) return false;
+
+  const { repeatEvery, startingPoint, maxRepetitions } = banner;
+  return repeatEvery > 0 || startingPoint > 0 || maxRepetitions > 0;
+};
+
+const checkIfShouldRenderBanner = (elementIndex, banner) => {
+  if (!banner) return false;
+  if (!checkNewBannerSettings(banner)) return legacyCheckIfShouldRenderBanner(elementIndex, banner);
+
+  const { repeatEvery, startingPoint, maxRepetitions } = banner;
+  const position = elementIndex + 1;
+  if (position < startingPoint) return false;
+  if (position === startingPoint) return true;
+  const positionDifference = position - startingPoint;
+  if (positionDifference < repeatEvery) return false;
+  const timesRepeated = positionDifference / repeatEvery;
+  const repeatMatch = Number.isInteger(timesRepeated);
+  if (!repeatMatch) return false;
+  return timesRepeated < maxRepetitions;
+};
 
-export default checkIfShouldRenderBanner;
+export { checkIfShouldRenderBanner, checkNewBannerSettings };

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

@@ -1,2 +1,4 @@
-export { default as checkIfShouldRenderGtm } from './check-if-should-render-gtm';
-export { default as checkIfShouldRenderBanner } from './check-if-should-render-banner';
+import { checkIfShouldRenderBanner, checkNewBannerSettings } from './check-if-should-render-banner';
+import checkIfShouldRenderGtm from './check-if-should-render-gtm';
+
+export { checkIfShouldRenderBanner, checkNewBannerSettings, checkIfShouldRenderGtm };

package/src/components/SearchFilter/SearchFilter/SearchFilter.js

@@ -80,7 +80,6 @@ const SearchFilter = ({
 
   const shouldGroup = !!(groupAfterDesktop || groupAfterMobile);
   const shouldSearch = !hasUrl;
-
   return (
     <>
       <form

package/src/components/SearchFilter/components/Checkbox.js

@@ -13,6 +13,7 @@ const Checkbox = ({
   updateFilterValues,
   filterValues,
   label,
+  elementTitle,
   shouldSearch,
   displayFilterCount
 }) => {
@@ -68,6 +69,7 @@ const Checkbox = ({
 
   return (
     <>
+      {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
       {label ? <p>{label}</p> : ''}
       <Checkboxes
         className="form-checkbox"
@@ -109,12 +111,14 @@ Checkbox.propTypes = {
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
   label: PropTypes.string,
+  elementTitle: PropTypes.string,
   displayFilterCount: PropTypes.bool
 };
 
 Checkbox.defaultProps = {
   shouldSearch: false,
   label: '',
+  elementTitle: '',
   displayFilterCount: false
 };
 

package/src/components/SearchFilter/components/Range.js

@@ -6,7 +6,6 @@ import { useRouter } from 'next/router';
 import Select from '@blaze-react/select';
 import { parseUrl } from 'query-string';
 import { useGetSingleEntitySchema } from '../../../hooks';
-import { withTitle } from '../../../HOC';
 import { getSelectOptions, getIntersectedProp, getRangeValue, calculateMinMax } from '../helpers';
 import { decodeValue } from '../helpers/decode-encode';
 
@@ -18,7 +17,8 @@ const Range = ({
   dataAggregations,
   updateFilterValues,
   filterValues,
-  shouldSearch
+  shouldSearch,
+  elementTitle
 }) => {
   const router = useRouter();
   const debounceAmount = shouldSearch ? 1200 : 400;
@@ -50,6 +50,7 @@ const Range = ({
 
   return (
     <>
+      {elementTitle && <div className="heading heading--section">{elementTitle}</div>}
       {hasMultipleOptions && (
         <>
           <label>{label}</label>
@@ -93,13 +94,15 @@ Range.propTypes = {
   shouldSearch: PropTypes.bool,
   rangeInterval: PropTypes.number,
   label: PropTypes.string,
+  elementTitle: PropTypes.string,
   dataAggregations: PropTypes.object.isRequired
 };
 
 Range.defaultProps = {
   shouldSearch: false,
   rangeInterval: 1,
-  label: ''
+  label: '',
+  elementTitle: ''
 };
 
-export default withTitle(Range);
+export default Range;