@jotforminc/dnd-builder 2.5.7 → 3.0.0-alpha.2

package/lib/cjs/components/Preview/StaticItem.js

@@ -28,7 +28,9 @@ var elementStyle = {
 
 var StaticItem = function StaticItem(_ref) {
   var children = _ref.children,
-      item = _ref.item;
+      containerStyle = _ref.containerStyle,
+      item = _ref.item,
+      mode = _ref.mode;
   var height = item.height,
       left = item.left,
       top = item.top,
@@ -36,7 +38,8 @@ var StaticItem = function StaticItem(_ref) {
   return /*#__PURE__*/jsxRuntime.jsx(ErrorBoundary, {
     children: /*#__PURE__*/jsxRuntime.jsx(ItemPositioner, {
       style: _objectSpread(_objectSpread({}, functions.getStyles(left, top, false)), {}, {
-        height: height,
+        height: functions.calculateHeight(height, width, containerStyle.width, mode),
+        maxWidth: '100%',
         width: width
       }),
       children: /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -55,6 +58,10 @@ var StaticItem = function StaticItem(_ref) {
 
 StaticItem.propTypes = {
   children: PropTypes__default['default'].any,
+  containerStyle: PropTypes__default['default'].shape({
+    height: PropTypes__default['default'].number,
+    width: PropTypes__default['default'].number
+  }),
   item: PropTypes__default['default'].shape({
     height: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string]),
     id: PropTypes__default['default'].string,
@@ -63,11 +70,14 @@ StaticItem.propTypes = {
     pageID: PropTypes__default['default'].string,
     top: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string]),
     width: PropTypes__default['default'].oneOfType([PropTypes__default['default'].number, PropTypes__default['default'].string])
-  })
+  }),
+  mode: PropTypes__default['default'].string
 };
 StaticItem.defaultProps = {
   children: null,
-  item: {}
+  containerStyle: {},
+  item: {},
+  mode: 'customize'
 };
 
 var areEqual = function areEqual(prevProps, nextProps) {

package/lib/cjs/components/Preview/StaticItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticItem.js","sources":["../../../../src/components/Preview/StaticItem.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash.isequal';\nimport cn from 'classnames';\nimport * as classNames from '../../constants/classNames';\nimport { getStyles } from '../../utils/functions';\nimport ItemPositioner from '../ItemPositioner';\nimport ErrorBoundary from '../ErrorBoundary';\n\nconst elementStyle = {\n  height: '100%',\n  width: '100%',\n};\n\nconst StaticItem = ({\n  children,\n  item,\n}) => {\n  const {\n    height,\n    left,\n    top,\n    width,\n  } = item;\n  return (\n    <ErrorBoundary>\n      <ItemPositioner\n        style={{\n          ...getStyles(left, top, false),\n          height,\n          width,\n        }}\n      >\n        <div\n          className={classNames.reportItemWrapper}\n        >\n          <div\n            className={cn(\n              `${classNames.reportItem}`,\n              { hasChart: item.itemType === 'chart' },\n            )}\n            style={elementStyle}\n          >\n            {children}\n          </div>\n        </div>\n      </ItemPositioner>\n    </ErrorBoundary>\n  );\n};\n\nStaticItem.propTypes = {\n  children: PropTypes.any,\n  item: PropTypes.shape({\n    height: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    id: PropTypes.string,\n    itemType: PropTypes.string,\n    left: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    pageID: PropTypes.string,\n    top: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    width: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n  }),\n};\n\nStaticItem.defaultProps = {\n  children: null,\n  item: {},\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  if (prevProps.hashCode !== nextProps.hashCode) return false;\n  if (!isEqual(prevProps.item, nextProps.item)) return false;\n  return true;\n};\n\nexport default memo(StaticItem, areEqual);\n"],"names":["elementStyle","height","width","StaticItem","children","item","left","top","_jsx","getStyles","classNames","cn","hasChart","itemType","propTypes","PropTypes","any","shape","oneOfType","number","string","id","pageID","defaultProps","areEqual","prevProps","nextProps","hashCode","isEqual","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,YAAY,GAAG;AACnBC,EAAAA,MAAM,EAAE,MADW;AAEnBC,EAAAA,KAAK,EAAE;AAFY,CAArB;;AAKA,IAAMC,UAAU,GAAG,SAAbA,UAAa,OAGb;AAAA,MAFJC,QAEI,QAFJA,QAEI;AAAA,MADJC,IACI,QADJA,IACI;AACJ,MACEJ,MADF,GAKII,IALJ,CACEJ,MADF;AAAA,MAEEK,IAFF,GAKID,IALJ,CAEEC,IAFF;AAAA,MAGEC,GAHF,GAKIF,IALJ,CAGEE,GAHF;AAAA,MAIEL,KAJF,GAKIG,IALJ,CAIEH,KAJF;AAMA,sBACEM,eAAC,aAAD;AAAA,2BACEA,eAAC,cAAD;AACE,MAAA,KAAK,kCACAC,mBAAS,CAACH,IAAD,EAAOC,GAAP,EAAY,KAAZ,CADT;AAEHN,QAAAA,MAAM,EAANA,MAFG;AAGHC,QAAAA,KAAK,EAALA;AAHG,QADP;AAAA,6BAOEM;AACE,QAAA,SAAS,EAAEE,4BADb;AAAA,+BAGEF;AACE,UAAA,SAAS,EAAEG,8BAAE,WACRD,qBADQ,GAEX;AAAEE,YAAAA,QAAQ,EAAEP,IAAI,CAACQ,QAAL,KAAkB;AAA9B,WAFW,CADf;AAKE,UAAA,KAAK,EAAEb,YALT;AAAA,oBAOGI;AAPH;AAHF;AAPF;AADF,IADF;AAyBD,CAnCD;;AAqCAD,UAAU,CAACW,SAAX,GAAuB;AACrBV,EAAAA,QAAQ,EAAEW,6BAAS,CAACC,GADC;AAErBX,EAAAA,IAAI,EAAEU,6BAAS,CAACE,KAAV,CAAgB;AACpBhB,IAAAA,MAAM,EAAEc,6BAAS,CAACG,SAAV,CAAoB,CAC1BH,6BAAS,CAACI,MADgB,EAE1BJ,6BAAS,CAACK,MAFgB,CAApB,CADY;AAKpBC,IAAAA,EAAE,EAAEN,6BAAS,CAACK,MALM;AAMpBP,IAAAA,QAAQ,EAAEE,6BAAS,CAACK,MANA;AAOpBd,IAAAA,IAAI,EAAES,6BAAS,CAACG,SAAV,CAAoB,CACxBH,6BAAS,CAACI,MADc,EAExBJ,6BAAS,CAACK,MAFc,CAApB,CAPc;AAWpBE,IAAAA,MAAM,EAAEP,6BAAS,CAACK,MAXE;AAYpBb,IAAAA,GAAG,EAAEQ,6BAAS,CAACG,SAAV,CAAoB,CACvBH,6BAAS,CAACI,MADa,EAEvBJ,6BAAS,CAACK,MAFa,CAApB,CAZe;AAgBpBlB,IAAAA,KAAK,EAAEa,6BAAS,CAACG,SAAV,CAAoB,CACzBH,6BAAS,CAACI,MADe,EAEzBJ,6BAAS,CAACK,MAFe,CAApB;AAhBa,GAAhB;AAFe,CAAvB;AAyBAjB,UAAU,CAACoB,YAAX,GAA0B;AACxBnB,EAAAA,QAAQ,EAAE,IADc;AAExBC,EAAAA,IAAI,EAAE;AAFkB,CAA1B;;AAKA,IAAMmB,QAAQ,GAAG,SAAXA,QAAW,CAACC,SAAD,EAAYC,SAAZ,EAA0B;AACzC,MAAID,SAAS,CAACE,QAAV,KAAuBD,SAAS,CAACC,QAArC,EAA+C,OAAO,KAAP;AAC/C,MAAI,CAACC,2BAAO,CAACH,SAAS,CAACpB,IAAX,EAAiBqB,SAAS,CAACrB,IAA3B,CAAZ,EAA8C,OAAO,KAAP;AAC9C,SAAO,IAAP;AACD,CAJD;;AAMA,gCAAewB,UAAI,CAAC1B,UAAD,EAAaqB,QAAb,CAAnB;;;;"}
+{"version":3,"file":"StaticItem.js","sources":["../../../../src/components/Preview/StaticItem.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport isEqual from 'lodash.isequal';\nimport cn from 'classnames';\nimport * as classNames from '../../constants/classNames';\nimport { calculateHeight, getStyles } from '../../utils/functions';\nimport ItemPositioner from '../ItemPositioner';\nimport ErrorBoundary from '../ErrorBoundary';\n\nconst elementStyle = {\n  height: '100%',\n  width: '100%',\n};\n\nconst StaticItem = ({\n  children,\n  containerStyle,\n  item,\n  mode,\n}) => {\n  const {\n    height,\n    left,\n    top,\n    width,\n  } = item;\n  return (\n    <ErrorBoundary>\n      <ItemPositioner\n        style={{\n          ...getStyles(left, top, false),\n          height: calculateHeight(height, width, containerStyle.width, mode),\n          maxWidth: '100%',\n          width,\n        }}\n      >\n        <div\n          className={classNames.reportItemWrapper}\n        >\n          <div\n            className={cn(\n              `${classNames.reportItem}`,\n              { hasChart: item.itemType === 'chart' },\n            )}\n            style={elementStyle}\n          >\n            {children}\n          </div>\n        </div>\n      </ItemPositioner>\n    </ErrorBoundary>\n  );\n};\n\nStaticItem.propTypes = {\n  children: PropTypes.any,\n  containerStyle: PropTypes.shape({\n    height: PropTypes.number,\n    width: PropTypes.number,\n  }),\n  item: PropTypes.shape({\n    height: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    id: PropTypes.string,\n    itemType: PropTypes.string,\n    left: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    pageID: PropTypes.string,\n    top: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n    width: PropTypes.oneOfType([\n      PropTypes.number,\n      PropTypes.string,\n    ]),\n  }),\n  mode: PropTypes.string,\n};\n\nStaticItem.defaultProps = {\n  children: null,\n  containerStyle: {},\n  item: {},\n  mode: 'customize',\n};\n\nconst areEqual = (prevProps, nextProps) => {\n  if (prevProps.hashCode !== nextProps.hashCode) return false;\n  if (!isEqual(prevProps.item, nextProps.item)) return false;\n  return true;\n};\n\nexport default memo(StaticItem, areEqual);\n"],"names":["elementStyle","height","width","StaticItem","children","containerStyle","item","mode","left","top","_jsx","getStyles","calculateHeight","maxWidth","classNames","cn","hasChart","itemType","propTypes","PropTypes","any","shape","number","oneOfType","string","id","pageID","defaultProps","areEqual","prevProps","nextProps","hashCode","isEqual","memo"],"mappings":"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"}

package/lib/cjs/components/Preview/StaticPage.js

@@ -6,7 +6,8 @@ require('core-js/modules/es.array.filter.js');
 require('core-js/modules/es.array.map.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var classNames = require('../../constants/classNames.js');
+var classNames = require('classnames');
+var classNames$1 = require('../../constants/classNames.js');
 var ReportItemRenderer = require('../Builder/ReportItemRenderer.js');
 var StaticItem = require('./StaticItem.js');
 var getMergedItem = require('../../utils/getMergedItem.js');
@@ -16,6 +17,7 @@ var jsxRuntime = require('react/jsx-runtime');
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
 
 var StaticPage = function StaticPage(_ref) {
   var acceptedItems = _ref.acceptedItems,
@@ -23,19 +25,23 @@ var StaticPage = function StaticPage(_ref) {
       hashCode = _ref.hashCode,
       itemAccessor = _ref.itemAccessor,
       items = _ref.items,
+      mode = _ref.mode,
       style = _ref.style;
+  var reportClasses = classNames__default['default']('jfReport-hider f-all p-relative', mode === 'responsive' ? 'layout-responsive' : 'o-hidden');
   return /*#__PURE__*/jsxRuntime.jsx("div", {
-    className: classNames.pageContainer,
+    className: classNames$1.pageContainer,
     style: style,
     children: /*#__PURE__*/jsxRuntime.jsxs("div", {
-      className: "jfReport-hider o-hidden f-all p-relative",
+      className: reportClasses,
       children: [items.filter(function (item) {
         return item.isVisible !== undefined ? item.isVisible : true;
       }).map(function (item) {
         var mergedItem = getMergedItem(item, acceptedItems);
         return /*#__PURE__*/jsxRuntime.jsx(StaticItem, {
+          containerStyle: style,
           hashCode: hashCode,
           item: item,
+          mode: mode,
           children: /*#__PURE__*/jsxRuntime.jsx(ReportItemRenderer, {
             item: item,
             children: function children(ReportItem) {
@@ -57,6 +63,7 @@ StaticPage.propTypes = {
   hashCode: PropTypes__default['default'].string,
   itemAccessor: PropTypes__default['default'].func,
   items: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({})),
+  mode: PropTypes__default['default'].string,
   style: PropTypes__default['default'].shape({})
 };
 StaticPage.defaultProps = {
@@ -65,6 +72,7 @@ StaticPage.defaultProps = {
   hashCode: '',
   itemAccessor: function itemAccessor() {},
   items: [],
+  mode: 'customize',
   style: {}
 };
 var StaticPage$1 = /*#__PURE__*/React.memo(StaticPage);

package/lib/cjs/components/Preview/StaticPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"StaticPage.js","sources":["../../../../src/components/Preview/StaticPage.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as classNames from '../../constants/classNames';\nimport ReportItemRenderer from '../Builder/ReportItemRenderer';\nimport StaticItem from './StaticItem';\nimport getMergedItem from '../../utils/getMergedItem';\nimport withZoomPanPinchHOC from '../withZoomPanPinchHOC';\n\nconst StaticPage = ({\n  acceptedItems,\n  additionalPageItems,\n  hashCode,\n  itemAccessor,\n  items,\n  style,\n}) => (\n  <div\n    className={classNames.pageContainer}\n    style={style}\n  >\n    <div className=\"jfReport-hider o-hidden f-all p-relative\">\n      {items.filter(item => (\n        item.isVisible !== undefined\n          ? item.isVisible\n          : true\n      )).map(item => {\n        const mergedItem = getMergedItem(item, acceptedItems);\n        return (\n          <StaticItem\n            key={item.id}\n            hashCode={hashCode}\n            item={item}\n          >\n            <ReportItemRenderer\n              item={item}\n            >\n              {ReportItem => (\n                <ReportItem\n                  item={mergedItem}\n                  itemAccessor={itemAccessor}\n                />\n              )}\n            </ReportItemRenderer>\n          </StaticItem>\n        );\n      })}\n      {additionalPageItems}\n    </div>\n  </div>\n);\n\nStaticPage.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  hashCode: PropTypes.string,\n  itemAccessor: PropTypes.func,\n  items: PropTypes.arrayOf(PropTypes.shape({})),\n  style: PropTypes.shape({}),\n};\n\nStaticPage.defaultProps = {\n  acceptedItems: {},\n  additionalPageItems: [],\n  hashCode: '',\n  itemAccessor: () => {},\n  items: [],\n  style: {},\n};\n\nexport default memo(StaticPage);\nexport const StaticPageWithZoomPanPinch = withZoomPanPinchHOC(StaticPage);\n"],"names":["StaticPage","acceptedItems","additionalPageItems","hashCode","itemAccessor","items","style","_jsx","classNames","_jsxs","filter","item","isVisible","undefined","map","mergedItem","getMergedItem","ReportItem","id","propTypes","PropTypes","shape","arrayOf","node","string","func","defaultProps","memo","StaticPageWithZoomPanPinch","withZoomPanPinchHOC"],"mappings":";;;;;;;;;;;;;;;;;;;AAQA,IAAMA,UAAU,GAAG,SAAbA,UAAa;AAAA,MACjBC,aADiB,QACjBA,aADiB;AAAA,MAEjBC,mBAFiB,QAEjBA,mBAFiB;AAAA,MAGjBC,QAHiB,QAGjBA,QAHiB;AAAA,MAIjBC,YAJiB,QAIjBA,YAJiB;AAAA,MAKjBC,KALiB,QAKjBA,KALiB;AAAA,MAMjBC,KANiB,QAMjBA,KANiB;AAAA,sBAQjBC;AACE,IAAA,SAAS,EAAEC,wBADb;AAEE,IAAA,KAAK,EAAEF,KAFT;AAAA,2BAIEG;AAAK,MAAA,SAAS,EAAC,0CAAf;AAAA,iBACGJ,KAAK,CAACK,MAAN,CAAa,UAAAC,IAAI;AAAA,eAChBA,IAAI,CAACC,SAAL,KAAmBC,SAAnB,GACIF,IAAI,CAACC,SADT,GAEI,IAHY;AAAA,OAAjB,EAIEE,GAJF,CAIM,UAAAH,IAAI,EAAI;AACb,YAAMI,UAAU,GAAGC,aAAa,CAACL,IAAD,EAAOV,aAAP,CAAhC;AACA,4BACEM,eAAC,UAAD;AAEE,UAAA,QAAQ,EAAEJ,QAFZ;AAGE,UAAA,IAAI,EAAEQ,IAHR;AAAA,iCAKEJ,eAAC,kBAAD;AACE,YAAA,IAAI,EAAEI,IADR;AAAA,sBAGG,kBAAAM,UAAU;AAAA,kCACTV,eAAC,UAAD;AACE,gBAAA,IAAI,EAAEQ,UADR;AAEE,gBAAA,YAAY,EAAEX;AAFhB,gBADS;AAAA;AAHb;AALF,WACOO,IAAI,CAACO,EADZ,CADF;AAkBD,OAxBA,CADH,EA0BGhB,mBA1BH;AAAA;AAJF,IARiB;AAAA,CAAnB;;AA2CAF,UAAU,CAACmB,SAAX,GAAuB;AACrBlB,EAAAA,aAAa,EAAEmB,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CADM;AAErBnB,EAAAA,mBAAmB,EAAEkB,6BAAS,CAACE,OAAV,CAAkBF,6BAAS,CAACG,IAA5B,CAFA;AAGrBpB,EAAAA,QAAQ,EAAEiB,6BAAS,CAACI,MAHC;AAIrBpB,EAAAA,YAAY,EAAEgB,6BAAS,CAACK,IAJH;AAKrBpB,EAAAA,KAAK,EAAEe,6BAAS,CAACE,OAAV,CAAkBF,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAAlB,CALc;AAMrBf,EAAAA,KAAK,EAAEc,6BAAS,CAACC,KAAV,CAAgB,EAAhB;AANc,CAAvB;AASArB,UAAU,CAAC0B,YAAX,GAA0B;AACxBzB,EAAAA,aAAa,EAAE,EADS;AAExBC,EAAAA,mBAAmB,EAAE,EAFG;AAGxBC,EAAAA,QAAQ,EAAE,EAHc;AAIxBC,EAAAA,YAAY,EAAE,wBAAM,EAJI;AAKxBC,EAAAA,KAAK,EAAE,EALiB;AAMxBC,EAAAA,KAAK,EAAE;AANiB,CAA1B;AASA,gCAAeqB,UAAI,CAAC3B,UAAD,CAAnB;IACa4B,0BAA0B,GAAGC,mBAAmB,CAAC7B,UAAD;;;;;"}
+{"version":3,"file":"StaticPage.js","sources":["../../../../src/components/Preview/StaticPage.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport cn from 'classnames';\nimport * as classNames from '../../constants/classNames';\nimport ReportItemRenderer from '../Builder/ReportItemRenderer';\nimport StaticItem from './StaticItem';\nimport getMergedItem from '../../utils/getMergedItem';\nimport withZoomPanPinchHOC from '../withZoomPanPinchHOC';\n\nconst StaticPage = ({\n  acceptedItems,\n  additionalPageItems,\n  hashCode,\n  itemAccessor,\n  items,\n  mode,\n  style,\n}) => {\n  const reportClasses = cn('jfReport-hider f-all p-relative',\n    mode === 'responsive' ? 'layout-responsive' : 'o-hidden');\n  return (\n    <div\n      className={classNames.pageContainer}\n      style={style}\n    >\n      <div className={reportClasses}>\n        {items.filter(item => (\n          item.isVisible !== undefined\n            ? item.isVisible\n            : true\n        )).map(item => {\n          const mergedItem = getMergedItem(item, acceptedItems);\n          return (\n            <StaticItem\n              key={item.id}\n              containerStyle={style}\n              hashCode={hashCode}\n              item={item}\n              mode={mode}\n            >\n              <ReportItemRenderer\n                item={item}\n              >\n                {ReportItem => (\n                  <ReportItem\n                    item={mergedItem}\n                    itemAccessor={itemAccessor}\n                  />\n                )}\n              </ReportItemRenderer>\n            </StaticItem>\n          );\n        })}\n        {additionalPageItems}\n      </div>\n    </div>\n  );\n};\n\nStaticPage.propTypes = {\n  acceptedItems: PropTypes.shape({}),\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  hashCode: PropTypes.string,\n  itemAccessor: PropTypes.func,\n  items: PropTypes.arrayOf(PropTypes.shape({})),\n  mode: PropTypes.string,\n  style: PropTypes.shape({}),\n};\n\nStaticPage.defaultProps = {\n  acceptedItems: {},\n  additionalPageItems: [],\n  hashCode: '',\n  itemAccessor: () => { },\n  items: [],\n  mode: 'customize',\n  style: {},\n};\n\nexport default memo(StaticPage);\nexport const StaticPageWithZoomPanPinch = withZoomPanPinchHOC(StaticPage);\n"],"names":["StaticPage","acceptedItems","additionalPageItems","hashCode","itemAccessor","items","mode","style","reportClasses","cn","_jsx","classNames","_jsxs","filter","item","isVisible","undefined","map","mergedItem","getMergedItem","ReportItem","id","propTypes","PropTypes","shape","arrayOf","node","string","func","defaultProps","memo","StaticPageWithZoomPanPinch","withZoomPanPinchHOC"],"mappings":";;;;;;;;;;;;;;;;;;;;;AASA,IAAMA,UAAU,GAAG,SAAbA,UAAa,OAQb;AAAA,MAPJC,aAOI,QAPJA,aAOI;AAAA,MANJC,mBAMI,QANJA,mBAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,YAII,QAJJA,YAII;AAAA,MAHJC,KAGI,QAHJA,KAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,KACI,QADJA,KACI;AACJ,MAAMC,aAAa,GAAGC,8BAAE,CAAC,iCAAD,EACtBH,IAAI,KAAK,YAAT,GAAwB,mBAAxB,GAA8C,UADxB,CAAxB;AAEA,sBACEI;AACE,IAAA,SAAS,EAAEC,0BADb;AAEE,IAAA,KAAK,EAAEJ,KAFT;AAAA,2BAIEK;AAAK,MAAA,SAAS,EAAEJ,aAAhB;AAAA,iBACGH,KAAK,CAACQ,MAAN,CAAa,UAAAC,IAAI;AAAA,eAChBA,IAAI,CAACC,SAAL,KAAmBC,SAAnB,GACIF,IAAI,CAACC,SADT,GAEI,IAHY;AAAA,OAAjB,EAIEE,GAJF,CAIM,UAAAH,IAAI,EAAI;AACb,YAAMI,UAAU,GAAGC,aAAa,CAACL,IAAD,EAAOb,aAAP,CAAhC;AACA,4BACES,eAAC,UAAD;AAEE,UAAA,cAAc,EAAEH,KAFlB;AAGE,UAAA,QAAQ,EAAEJ,QAHZ;AAIE,UAAA,IAAI,EAAEW,IAJR;AAKE,UAAA,IAAI,EAAER,IALR;AAAA,iCAOEI,eAAC,kBAAD;AACE,YAAA,IAAI,EAAEI,IADR;AAAA,sBAGG,kBAAAM,UAAU;AAAA,kCACTV,eAAC,UAAD;AACE,gBAAA,IAAI,EAAEQ,UADR;AAEE,gBAAA,YAAY,EAAEd;AAFhB,gBADS;AAAA;AAHb;AAPF,WACOU,IAAI,CAACO,EADZ,CADF;AAoBD,OA1BA,CADH,EA4BGnB,mBA5BH;AAAA;AAJF,IADF;AAqCD,CAhDD;;AAkDAF,UAAU,CAACsB,SAAX,GAAuB;AACrBrB,EAAAA,aAAa,EAAEsB,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CADM;AAErBtB,EAAAA,mBAAmB,EAAEqB,6BAAS,CAACE,OAAV,CAAkBF,6BAAS,CAACG,IAA5B,CAFA;AAGrBvB,EAAAA,QAAQ,EAAEoB,6BAAS,CAACI,MAHC;AAIrBvB,EAAAA,YAAY,EAAEmB,6BAAS,CAACK,IAJH;AAKrBvB,EAAAA,KAAK,EAAEkB,6BAAS,CAACE,OAAV,CAAkBF,6BAAS,CAACC,KAAV,CAAgB,EAAhB,CAAlB,CALc;AAMrBlB,EAAAA,IAAI,EAAEiB,6BAAS,CAACI,MANK;AAOrBpB,EAAAA,KAAK,EAAEgB,6BAAS,CAACC,KAAV,CAAgB,EAAhB;AAPc,CAAvB;AAUAxB,UAAU,CAAC6B,YAAX,GAA0B;AACxB5B,EAAAA,aAAa,EAAE,EADS;AAExBC,EAAAA,mBAAmB,EAAE,EAFG;AAGxBC,EAAAA,QAAQ,EAAE,EAHc;AAIxBC,EAAAA,YAAY,EAAE,wBAAM,EAJI;AAKxBC,EAAAA,KAAK,EAAE,EALiB;AAMxBC,EAAAA,IAAI,EAAE,WANkB;AAOxBC,EAAAA,KAAK,EAAE;AAPiB,CAA1B;AAUA,gCAAeuB,UAAI,CAAC9B,UAAD,CAAnB;IACa+B,0BAA0B,GAAGC,mBAAmB,CAAChC,UAAD;;;;;"}

package/lib/cjs/components/Report.js

@@ -7,6 +7,7 @@ var Presentation = require('./Presentation/Presentation.js');
 var Preview = require('./Preview/Preview.js');
 var Print = require('./Print/Print.js');
 var texts = require('../constants/texts.js');
+var index = require('./Responsive/index.js');
 var jsxRuntime = require('react/jsx-runtime');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -75,6 +76,11 @@ var Report = function Report(_ref) {
         return /*#__PURE__*/jsxRuntime.jsx(Preview, _objectSpread({}, customProps));
       }
 
+    case 'responsive':
+      {
+        return /*#__PURE__*/jsxRuntime.jsx(index, _objectSpread({}, customProps));
+      }
+
     case 'presentation':
       {
         return /*#__PURE__*/jsxRuntime.jsx(Presentation, _objectSpread({}, props));
@@ -95,7 +101,7 @@ var Report = function Report(_ref) {
 
 Report.propTypes = {
   /** Conditionally rendering different modes  */
-  mode: PropTypes__default['default'].oneOf(['customize', 'preview', 'print', 'presentation']),
+  mode: PropTypes__default['default'].oneOf(['customize', 'preview', 'print', 'presentation', 'responsive']),
 
   /**
    It can be changed static texts or translated which use in the library.

package/lib/cjs/components/Report.js.map

@@ -1 +1 @@
-{"version":3,"file":"Report.js","sources":["../../../src/components/Report.js"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Builder from './Builder';\nimport Presentation from './Presentation/Presentation';\nimport Preview from './Preview';\nimport Print from './Print';\nimport reportsAppTexts, { SharingTextsModule } from '../constants/texts';\n\nconst Report = ({\n  leftPanelConfig,\n  mode,\n  reportsAppTexts: newReportsAppTexts,\n  ...props\n}) => {\n  const [viewMode, setViewMode] = useState(mode);\n  const [lastScrollPosition, setLastScrollPosition] = useState(0);\n\n  useEffect(() => {\n    SharingTextsModule.setTexts(newReportsAppTexts);\n  }, [newReportsAppTexts]);\n\n  useEffect(() => {\n    if (['customize', 'preview'].indexOf(viewMode) > -1) {\n      setLastScrollPosition(document.querySelector('.jfReport-viewport').scrollTop);\n    }\n    setViewMode(mode);\n  }, [mode]);\n\n  const customProps = { ...props, lastScrollPosition, leftPanelConfig };\n\n  switch (viewMode) {\n    case 'preview': {\n      return <Preview {...customProps} />;\n    }\n    case 'presentation': {\n      return <Presentation {...props} />;\n    }\n    case 'print': {\n      return <Print {...props} />;\n    }\n    case 'customize':\n    default: {\n      return <Builder {...customProps} />;\n    }\n  }\n};\n\nReport.propTypes = {\n  /** Conditionally rendering different modes  */\n  mode: PropTypes.oneOf(['customize', 'preview', 'print', 'presentation']),\n  /**\n   It can be changed static texts or translated which use in the library.\n   New texts are set when you pass again.\n  */\n  reportsAppTexts: PropTypes.shape({}),\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n};\n\nReport.defaultProps = {\n  mode: 'customize',\n  reportsAppTexts,\n  theme: 'lightMode',\n};\n\nexport default Report;\n"],"names":["Report","leftPanelConfig","mode","newReportsAppTexts","reportsAppTexts","props","useState","viewMode","setViewMode","lastScrollPosition","setLastScrollPosition","useEffect","SharingTextsModule","setTexts","indexOf","document","querySelector","scrollTop","customProps","_jsx","propTypes","PropTypes","oneOf","shape","theme","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAQMA,MAAM,GAAG,SAATA,MAAS,OAKT;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFaC,kBAEb,QAFJC,eAEI;AAAA,MADDC,KACC;;AACJ,kBAAgCC,cAAQ,CAACJ,IAAD,CAAxC;AAAA;AAAA,MAAOK,QAAP;AAAA,MAAiBC,WAAjB;;AACA,mBAAoDF,cAAQ,CAAC,CAAD,CAA5D;AAAA;AAAA,MAAOG,kBAAP;AAAA,MAA2BC,qBAA3B;;AAEAC,EAAAA,eAAS,CAAC,YAAM;AACdC,IAAAA,wBAAkB,CAACC,QAAnB,CAA4BV,kBAA5B;AACD,GAFQ,EAEN,CAACA,kBAAD,CAFM,CAAT;AAIAQ,EAAAA,eAAS,CAAC,YAAM;AACd,QAAI,CAAC,WAAD,EAAc,SAAd,EAAyBG,OAAzB,CAAiCP,QAAjC,IAA6C,CAAC,CAAlD,EAAqD;AACnDG,MAAAA,qBAAqB,CAACK,QAAQ,CAACC,aAAT,CAAuB,oBAAvB,EAA6CC,SAA9C,CAArB;AACD;;AACDT,IAAAA,WAAW,CAACN,IAAD,CAAX;AACD,GALQ,EAKN,CAACA,IAAD,CALM,CAAT;;AAOA,MAAMgB,WAAW,mCAAQb,KAAR;AAAeI,IAAAA,kBAAkB,EAAlBA,kBAAf;AAAmCR,IAAAA,eAAe,EAAfA;AAAnC,IAAjB;;AAEA,UAAQM,QAAR;AACE,SAAK,SAAL;AAAgB;AACd,4BAAOY,eAAC,OAAD,oBAAaD,WAAb,EAAP;AACD;;AACD,SAAK,cAAL;AAAqB;AACnB,4BAAOC,eAAC,YAAD,oBAAkBd,KAAlB,EAAP;AACD;;AACD,SAAK,OAAL;AAAc;AACZ,4BAAOc,eAAC,KAAD,oBAAWd,KAAX,EAAP;AACD;;AACD,SAAK,WAAL;AACA;AAAS;AACP,4BAAOc,eAAC,OAAD,oBAAaD,WAAb,EAAP;AACD;AAbH;AAeD;;AAEDlB,MAAM,CAACoB,SAAP,GAAmB;AACjB;AACAlB,EAAAA,IAAI,EAAEmB,6BAAS,CAACC,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,OAAzB,EAAkC,cAAlC,CAAhB,CAFW;;AAGjB;AACF;AACA;AACA;AACElB,EAAAA,eAAe,EAAEiB,6BAAS,CAACE,KAAV,CAAgB,EAAhB,CAPA;AAQjBC,EAAAA,KAAK,EAAEH,6BAAS,CAACC,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB;AARU,CAAnB;AAWAtB,MAAM,CAACyB,YAAP,GAAsB;AACpBvB,EAAAA,IAAI,EAAE,WADc;AAEpBE,EAAAA,eAAe,EAAfA,gBAFoB;AAGpBoB,EAAAA,KAAK,EAAE;AAHa,CAAtB;;;;"}
+{"version":3,"file":"Report.js","sources":["../../../src/components/Report.js"],"sourcesContent":["import { useState, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport Builder from './Builder';\nimport Presentation from './Presentation/Presentation';\nimport Preview from './Preview';\nimport Print from './Print';\nimport reportsAppTexts, { SharingTextsModule } from '../constants/texts';\nimport Responsive from './Responsive';\n\nconst Report = ({\n  leftPanelConfig,\n  mode,\n  reportsAppTexts: newReportsAppTexts,\n  ...props\n}) => {\n  const [viewMode, setViewMode] = useState(mode);\n  const [lastScrollPosition, setLastScrollPosition] = useState(0);\n\n  useEffect(() => {\n    SharingTextsModule.setTexts(newReportsAppTexts);\n  }, [newReportsAppTexts]);\n\n  useEffect(() => {\n    if (['customize', 'preview'].indexOf(viewMode) > -1) {\n      setLastScrollPosition(document.querySelector('.jfReport-viewport').scrollTop);\n    }\n    setViewMode(mode);\n  }, [mode]);\n\n  const customProps = { ...props, lastScrollPosition, leftPanelConfig };\n\n  switch (viewMode) {\n    case 'preview': {\n      return <Preview {...customProps} />;\n    }\n    case 'responsive': {\n      return <Responsive {...customProps} />;\n    }\n    case 'presentation': {\n      return <Presentation {...props} />;\n    }\n    case 'print': {\n      return <Print {...props} />;\n    }\n    case 'customize':\n    default: {\n      return <Builder {...customProps} />;\n    }\n  }\n};\n\nReport.propTypes = {\n  /** Conditionally rendering different modes  */\n  mode: PropTypes.oneOf(['customize', 'preview', 'print', 'presentation', 'responsive']),\n  /**\n   It can be changed static texts or translated which use in the library.\n   New texts are set when you pass again.\n  */\n  reportsAppTexts: PropTypes.shape({}),\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n};\n\nReport.defaultProps = {\n  mode: 'customize',\n  reportsAppTexts,\n  theme: 'lightMode',\n};\n\nexport default Report;\n"],"names":["Report","leftPanelConfig","mode","newReportsAppTexts","reportsAppTexts","props","useState","viewMode","setViewMode","lastScrollPosition","setLastScrollPosition","useEffect","SharingTextsModule","setTexts","indexOf","document","querySelector","scrollTop","customProps","_jsx","Responsive","propTypes","PropTypes","oneOf","shape","theme","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IASMA,MAAM,GAAG,SAATA,MAAS,OAKT;AAAA,MAJJC,eAII,QAJJA,eAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFaC,kBAEb,QAFJC,eAEI;AAAA,MADDC,KACC;;AACJ,kBAAgCC,cAAQ,CAACJ,IAAD,CAAxC;AAAA;AAAA,MAAOK,QAAP;AAAA,MAAiBC,WAAjB;;AACA,mBAAoDF,cAAQ,CAAC,CAAD,CAA5D;AAAA;AAAA,MAAOG,kBAAP;AAAA,MAA2BC,qBAA3B;;AAEAC,EAAAA,eAAS,CAAC,YAAM;AACdC,IAAAA,wBAAkB,CAACC,QAAnB,CAA4BV,kBAA5B;AACD,GAFQ,EAEN,CAACA,kBAAD,CAFM,CAAT;AAIAQ,EAAAA,eAAS,CAAC,YAAM;AACd,QAAI,CAAC,WAAD,EAAc,SAAd,EAAyBG,OAAzB,CAAiCP,QAAjC,IAA6C,CAAC,CAAlD,EAAqD;AACnDG,MAAAA,qBAAqB,CAACK,QAAQ,CAACC,aAAT,CAAuB,oBAAvB,EAA6CC,SAA9C,CAArB;AACD;;AACDT,IAAAA,WAAW,CAACN,IAAD,CAAX;AACD,GALQ,EAKN,CAACA,IAAD,CALM,CAAT;;AAOA,MAAMgB,WAAW,mCAAQb,KAAR;AAAeI,IAAAA,kBAAkB,EAAlBA,kBAAf;AAAmCR,IAAAA,eAAe,EAAfA;AAAnC,IAAjB;;AAEA,UAAQM,QAAR;AACE,SAAK,SAAL;AAAgB;AACd,4BAAOY,eAAC,OAAD,oBAAaD,WAAb,EAAP;AACD;;AACD,SAAK,YAAL;AAAmB;AACjB,4BAAOC,eAACC,KAAD,oBAAgBF,WAAhB,EAAP;AACD;;AACD,SAAK,cAAL;AAAqB;AACnB,4BAAOC,eAAC,YAAD,oBAAkBd,KAAlB,EAAP;AACD;;AACD,SAAK,OAAL;AAAc;AACZ,4BAAOc,eAAC,KAAD,oBAAWd,KAAX,EAAP;AACD;;AACD,SAAK,WAAL;AACA;AAAS;AACP,4BAAOc,eAAC,OAAD,oBAAaD,WAAb,EAAP;AACD;AAhBH;AAkBD;;AAEDlB,MAAM,CAACqB,SAAP,GAAmB;AACjB;AACAnB,EAAAA,IAAI,EAAEoB,6BAAS,CAACC,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,OAAzB,EAAkC,cAAlC,EAAkD,YAAlD,CAAhB,CAFW;;AAGjB;AACF;AACA;AACA;AACEnB,EAAAA,eAAe,EAAEkB,6BAAS,CAACE,KAAV,CAAgB,EAAhB,CAPA;AAQjBC,EAAAA,KAAK,EAAEH,6BAAS,CAACC,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB;AARU,CAAnB;AAWAvB,MAAM,CAAC0B,YAAP,GAAsB;AACpBxB,EAAAA,IAAI,EAAE,WADc;AAEpBE,EAAAA,eAAe,EAAfA,gBAFoB;AAGpBqB,EAAAA,KAAK,EAAE;AAHa,CAAtB;;;;"}

package/lib/cjs/components/Responsive/index.js

@@ -0,0 +1,107 @@
+'use strict';
+
+var PropTypes = require('prop-types');
+var objectHash = require('object-hash');
+var propContext = require('../../utils/propContext.js');
+var builderContext = require('../../utils/builderContext.js');
+var ReportWrapper = require('../ReportWrapper.js');
+var StaticScene = require('../Preview/StaticScene.js');
+var jsxRuntime = require('react/jsx-runtime');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var objectHash__default = /*#__PURE__*/_interopDefaultLegacy(objectHash);
+
+var _excluded = ["acceptedItems", "additionalPageItems", "itemAccessor", "lastScrollPosition", "onAnEventTrigger", "pages", "settings", "theme"],
+    _excluded2 = ["disableInteraction", "leftPanelConfig", "onItemAdd", "onItemChange", "onItemMove", "onItemRemove", "onItemResize", "onItemsMove", "onPageAdd", "onPageChange", "onPageDuplicate", "onPageOrdersChange", "onPageRemove", "onSettingChange", "useExperimentalFeatures"];
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var Responsive = function Responsive(_ref) {
+  var acceptedItems = _ref.acceptedItems,
+      additionalPageItems = _ref.additionalPageItems,
+      itemAccessor = _ref.itemAccessor,
+      lastScrollPosition = _ref.lastScrollPosition,
+      onAnEventTrigger = _ref.onAnEventTrigger,
+      pages = _ref.pages,
+      settings = _ref.settings,
+      theme = _ref.theme,
+      otherProps = _objectWithoutProperties(_ref, _excluded);
+
+  otherProps.disableInteraction;
+      otherProps.leftPanelConfig;
+      otherProps.onItemAdd;
+      otherProps.onItemChange;
+      otherProps.onItemMove;
+      otherProps.onItemRemove;
+      otherProps.onItemResize;
+      otherProps.onItemsMove;
+      otherProps.onPageAdd;
+      otherProps.onPageChange;
+      otherProps.onPageDuplicate;
+      otherProps.onPageOrdersChange;
+      otherProps.onPageRemove;
+      otherProps.onSettingChange;
+      otherProps.useExperimentalFeatures;
+      var hashProps = _objectWithoutProperties(otherProps, _excluded2);
+
+  var hashCode = objectHash__default['default'](hashProps);
+  return /*#__PURE__*/jsxRuntime.jsx(builderContext.BuilderProvider, {
+    children: /*#__PURE__*/jsxRuntime.jsx(propContext.PropProvider, {
+      acceptedItems: acceptedItems,
+      onAnEventTrigger: onAnEventTrigger,
+      settings: settings,
+      children: /*#__PURE__*/jsxRuntime.jsx(ReportWrapper, {
+        mode: "responsive",
+        theme: theme,
+        children: /*#__PURE__*/jsxRuntime.jsx(StaticScene, {
+          additionalPageItems: additionalPageItems,
+          hashCode: hashCode,
+          isExistsZoom: true,
+          itemAccessor: itemAccessor,
+          lastScrollPosition: lastScrollPosition,
+          mode: "responsive",
+          pages: pages
+        })
+      })
+    })
+  });
+};
+
+Responsive.propTypes = {
+  /** Items for to render in the report */
+  acceptedItems: PropTypes__default['default'].shape({}),
+
+  /** Array of React components to render statically on each page (eg. watermark) */
+  additionalPageItems: PropTypes__default['default'].arrayOf(PropTypes__default['default'].node),
+
+  /** To pass in extra props to items selectively */
+  itemAccessor: PropTypes__default['default'].func,
+  lastScrollPosition: PropTypes__default['default'].number,
+  onAnEventTrigger: PropTypes__default['default'].func,
+
+  /** Array of pages with their settings and items */
+  pages: PropTypes__default['default'].arrayOf(PropTypes__default['default'].shape({})),
+
+  /** General report settings such as layout size and background color */
+  settings: PropTypes__default['default'].shape({}),
+
+  /** Theme */
+  theme: PropTypes__default['default'].oneOf(['lightMode', 'darkMode'])
+};
+Responsive.defaultProps = {
+  acceptedItems: {},
+  additionalPageItems: [],
+  itemAccessor: function itemAccessor() {},
+  lastScrollPosition: 0,
+  onAnEventTrigger: function onAnEventTrigger() {},
+  pages: [],
+  settings: {},
+  theme: 'lightMode'
+};
+
+module.exports = Responsive;
+//# sourceMappingURL=index.js.map

package/lib/cjs/components/Responsive/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/components/Responsive/index.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport objectHash from 'object-hash';\nimport { PropProvider } from '../../utils/propContext';\nimport { BuilderProvider } from '../../utils/builderContext';\nimport ReportWrapper from '../ReportWrapper';\nimport StaticScene from '../Preview/StaticScene';\n\nconst Responsive = ({\n  acceptedItems,\n  additionalPageItems,\n  itemAccessor,\n  lastScrollPosition,\n  onAnEventTrigger,\n  pages,\n  settings,\n  theme,\n  ...otherProps\n}) => {\n  const {\n    disableInteraction,\n    leftPanelConfig,\n    onItemAdd,\n    onItemChange,\n    onItemMove,\n    onItemRemove,\n    onItemResize,\n    onItemsMove,\n    onPageAdd,\n    onPageChange,\n    onPageDuplicate,\n    onPageOrdersChange,\n    onPageRemove,\n    onSettingChange,\n    useExperimentalFeatures,\n    ...hashProps\n  } = otherProps;\n\n  const hashCode = objectHash(hashProps);\n  return (\n    <BuilderProvider>\n      <PropProvider\n        acceptedItems={acceptedItems}\n        onAnEventTrigger={onAnEventTrigger}\n        settings={settings}\n      >\n        <ReportWrapper\n          mode=\"responsive\"\n          theme={theme}\n        >\n          <StaticScene\n            additionalPageItems={additionalPageItems}\n            hashCode={hashCode}\n            isExistsZoom\n            itemAccessor={itemAccessor}\n            lastScrollPosition={lastScrollPosition}\n            mode=\"responsive\"\n            pages={pages}\n          />\n        </ReportWrapper>\n      </PropProvider>\n    </BuilderProvider>\n  );\n};\n\nResponsive.propTypes = {\n  /** Items for to render in the report */\n  acceptedItems: PropTypes.shape({}),\n  /** Array of React components to render statically on each page (eg. watermark) */\n  additionalPageItems: PropTypes.arrayOf(PropTypes.node),\n  /** To pass in extra props to items selectively */\n  itemAccessor: PropTypes.func,\n  lastScrollPosition: PropTypes.number,\n  onAnEventTrigger: PropTypes.func,\n  /** Array of pages with their settings and items */\n  pages: PropTypes.arrayOf(\n    PropTypes.shape({}),\n  ),\n  /** General report settings such as layout size and background color */\n  settings: PropTypes.shape({}),\n  /** Theme */\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n};\n\nResponsive.defaultProps = {\n  acceptedItems: {},\n  additionalPageItems: [],\n  itemAccessor: () => { },\n  lastScrollPosition: 0,\n  onAnEventTrigger: () => { },\n  pages: [],\n  settings: {},\n  theme: 'lightMode',\n};\nexport default Responsive;\n"],"names":["Responsive","acceptedItems","additionalPageItems","itemAccessor","lastScrollPosition","onAnEventTrigger","pages","settings","theme","otherProps","disableInteraction","leftPanelConfig","onItemAdd","onItemChange","onItemMove","onItemRemove","onItemResize","onItemsMove","onPageAdd","onPageChange","onPageDuplicate","onPageOrdersChange","onPageRemove","onSettingChange","useExperimentalFeatures","hashProps","hashCode","objectHash","_jsx","BuilderProvider","PropProvider","propTypes","PropTypes","shape","arrayOf","node","func","number","oneOf","defaultProps"],"mappings":"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"}

package/lib/cjs/styles/_jfPresentation.scss

@@ -341,3 +341,21 @@
     }
   }
 }
+
+.layout-responsive {
+  overflow-y: auto;
+  padding: 0 16px;
+}
+
+.layout-responsive > * {
+  /* stylelint-disable, declaration-no-important */
+  position: relative !important;
+  left: 0 !important;
+  top: 0 !important;
+  /* stylelint-enable, declaration-no-important */
+  margin: 0 auto;
+
+  &:last-of-type {
+    margin-bottom: 0;
+  }
+}

package/lib/cjs/styles/_jfReportsViewModes.scss

@@ -1,4 +1,5 @@
-.jfReport.previewMode {
+.jfReport.previewMode,
+.jefReport.responsiveMode {
   .jfReport-canvas {
     padding: 0 40px;
   }
@@ -8,7 +9,9 @@
   }
 }
 
-.jfPresentation, .jfReport.previewMode {
+.jfPresentation,
+.jfReport.previewMode,
+.jfReport.responsiveMode {
   .recharts-surface {
     pointer-events: all;
   }

package/lib/cjs/utils/functions.js

@@ -809,9 +809,24 @@ var scrollToTarget = function scrollToTarget(id) {
     }
   }, timeout);
 };
+var calculateHeight = function calculateHeight(originalHeight, originalWidth, canvasWidth, mode) {
+  if (mode !== 'responsive') {
+    return originalHeight;
+  }
+
+  var calculatedWidth = originalWidth;
+  var ratio = originalHeight / originalWidth;
+
+  if (originalWidth > canvasWidth - 32) {
+    calculatedWidth = canvasWidth;
+  }
+
+  return ratio * calculatedWidth;
+};
 
 exports.arrayMove = arrayMove;
 exports.calculateGuidePositions = calculateGuidePositions;
+exports.calculateHeight = calculateHeight;
 exports.changePage = changePage;
 exports.checkValueProximities = checkValueProximities;
 exports.closeFullscreen = closeFullscreen;