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

package/lib/esm/components/Print/Print.js

@@ -1,6 +1,8 @@
-import PropTypes from 'prop-types';
-import Modal from 'react-modal';
-import PrintModeWithoutContext from './PrintModeWithoutContext.js';
+import PrintWrapper from './PrintWrapper.js';
+import Providers from '../../contexts/Providers.js';
+import ReportWrapper from '../ReportWrapper.js';
+import StaticScene from '../Preview/StaticScene.js';
+import '../../styles/jfReportsBundle.scss';
 import { jsx } from 'react/jsx-runtime';
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
@@ -10,60 +12,19 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 var Print = function Print(props) {
-  return /*#__PURE__*/jsx(Modal, {
-    appElement: document.getElementById('root'),
-    closeTimeoutMS: 300,
-    contentLabel: "modalA",
-    id: "printModal",
-    isOpen: true,
-    portalClassName: "ReportPrintPortal",
-    shouldCloseOnEsc: false,
-    style: {
-      content: {
-        backgroundColor: '#fff',
-        border: 'none',
-        borderRadius: 'none',
-        bottom: 0,
-        left: 0,
-        overflow: 'visible',
-        padding: 0,
-        position: 'absolute',
-        right: 0,
-        top: 0
-      },
-      overlay: {
-        border: 'none',
-        height: 'auto',
-        position: 'absolute',
-        zIndex: '99999'
-      }
-    },
-    children: /*#__PURE__*/jsx(PrintModeWithoutContext, _objectSpread({}, props))
-  });
-};
-
-Print.propTypes = {
-  /** Items for to render in the report */
-  acceptedItems: PropTypes.shape({}),
-
-  /** Array of React components to render statically on each page (eg. watermark) */
-  additionalPageItems: PropTypes.arrayOf(PropTypes.node),
-
-  /** To pass in extra props to items selectively */
-  itemAccessor: PropTypes.func,
-
-  /** Array of pages with their settings and items */
-  pages: PropTypes.arrayOf(PropTypes.shape({})),
-
-  /** General report settings such as layout size and background color */
-  settings: PropTypes.shape({})
-};
-Print.defaultProps = {
-  acceptedItems: {},
-  additionalPageItems: [],
-  itemAccessor: function itemAccessor() {},
-  pages: [],
-  settings: {}
+  return /*#__PURE__*/jsx(Providers, _objectSpread(_objectSpread({
+    mode: "print"
+  }, props), {}, {
+    children: /*#__PURE__*/jsx(PrintWrapper, {
+      children: /*#__PURE__*/jsx(ReportWrapper, {
+        mode: "print",
+        children: /*#__PURE__*/jsx(StaticScene, {
+          hideZoom: true,
+          mode: "print"
+        })
+      })
+    })
+  }));
 };
 
 export default Print;

package/lib/esm/components/Print/Print.js.map

@@ -1 +1 @@
-{"version":3,"file":"Print.js","sources":["../../../../src/components/Print/Print.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport Modal from 'react-modal';\nimport PrintModeWithoutContext from './PrintModeWithoutContext';\n\nconst Print = props => {\n  return (\n    <Modal\n      appElement={document.getElementById('root')}\n      closeTimeoutMS={300}\n      contentLabel=\"modalA\"\n      id=\"printModal\"\n      isOpen={true}\n      portalClassName=\"ReportPrintPortal\"\n      shouldCloseOnEsc={false}\n      style={{\n        content: {\n          backgroundColor: '#fff',\n          border: 'none',\n          borderRadius: 'none',\n          bottom: 0,\n          left: 0,\n          overflow: 'visible',\n          padding: 0,\n          position: 'absolute',\n          right: 0,\n          top: 0,\n        },\n        overlay: {\n          border: 'none',\n          height: 'auto',\n          position: 'absolute',\n          zIndex: '99999',\n        },\n      }}\n    >\n      <PrintModeWithoutContext\n        {...props}\n      />\n    </Modal>\n  );\n};\n\nPrint.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  /** 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};\n\nPrint.defaultProps = {\n  acceptedItems: {},\n  additionalPageItems: [],\n  itemAccessor: () => {},\n  pages: [],\n  settings: {},\n};\n\nexport default Print;\n"],"names":["Print","props","_jsx","document","getElementById","content","backgroundColor","border","borderRadius","bottom","left","overflow","padding","position","right","top","overlay","height","zIndex","propTypes","acceptedItems","PropTypes","shape","additionalPageItems","arrayOf","node","itemAccessor","func","pages","settings","defaultProps"],"mappings":";;;;;;;;;;;IAIMA,KAAK,GAAG,SAARA,KAAQ,CAAAC,KAAK,EAAI;AACrB,sBACEC,IAAC,KAAD;AACE,IAAA,UAAU,EAAEC,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CADd;AAEE,IAAA,cAAc,EAAE,GAFlB;AAGE,IAAA,YAAY,EAAC,QAHf;AAIE,IAAA,EAAE,EAAC,YAJL;AAKE,IAAA,MAAM,EAAE,IALV;AAME,IAAA,eAAe,EAAC,mBANlB;AAOE,IAAA,gBAAgB,EAAE,KAPpB;AAQE,IAAA,KAAK,EAAE;AACLC,MAAAA,OAAO,EAAE;AACPC,QAAAA,eAAe,EAAE,MADV;AAEPC,QAAAA,MAAM,EAAE,MAFD;AAGPC,QAAAA,YAAY,EAAE,MAHP;AAIPC,QAAAA,MAAM,EAAE,CAJD;AAKPC,QAAAA,IAAI,EAAE,CALC;AAMPC,QAAAA,QAAQ,EAAE,SANH;AAOPC,QAAAA,OAAO,EAAE,CAPF;AAQPC,QAAAA,QAAQ,EAAE,UARH;AASPC,QAAAA,KAAK,EAAE,CATA;AAUPC,QAAAA,GAAG,EAAE;AAVE,OADJ;AAaLC,MAAAA,OAAO,EAAE;AACPT,QAAAA,MAAM,EAAE,MADD;AAEPU,QAAAA,MAAM,EAAE,MAFD;AAGPJ,QAAAA,QAAQ,EAAE,UAHH;AAIPK,QAAAA,MAAM,EAAE;AAJD;AAbJ,KART;AAAA,2BA6BEhB,IAAC,uBAAD,oBACMD,KADN;AA7BF,IADF;AAmCD;;AAEDD,KAAK,CAACmB,SAAN,GAAkB;AAChB;AACAC,EAAAA,aAAa,EAAEC,SAAS,CAACC,KAAV,CAAgB,EAAhB,CAFC;;AAGhB;AACAC,EAAAA,mBAAmB,EAAEF,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACI,IAA5B,CAJL;;AAKhB;AACAC,EAAAA,YAAY,EAAEL,SAAS,CAACM,IANR;;AAOhB;AACAC,EAAAA,KAAK,EAAEP,SAAS,CAACG,OAAV,CACLH,SAAS,CAACC,KAAV,CAAgB,EAAhB,CADK,CARS;;AAWhB;AACAO,EAAAA,QAAQ,EAAER,SAAS,CAACC,KAAV,CAAgB,EAAhB;AAZM,CAAlB;AAeAtB,KAAK,CAAC8B,YAAN,GAAqB;AACnBV,EAAAA,aAAa,EAAE,EADI;AAEnBG,EAAAA,mBAAmB,EAAE,EAFF;AAGnBG,EAAAA,YAAY,EAAE,wBAAM,EAHD;AAInBE,EAAAA,KAAK,EAAE,EAJY;AAKnBC,EAAAA,QAAQ,EAAE;AALS,CAArB;;;;"}
+{"version":3,"file":"Print.js","sources":["../../../../src/components/Print/Print.js"],"sourcesContent":["import PrintWrapper from './PrintWrapper';\nimport Providers from '../../contexts/Providers';\nimport ReportWrapper from '../ReportWrapper';\nimport StaticScene from '../Preview/StaticScene';\n\nimport '../../styles/jfReportsBundle.scss';\n\nconst Print = props => {\n  return (\n    <Providers\n      mode=\"print\"\n      {...props}\n    >\n      <PrintWrapper>\n        <ReportWrapper mode=\"print\">\n          <StaticScene\n            hideZoom={true}\n            mode=\"print\"\n          />\n        </ReportWrapper>\n      </PrintWrapper>\n    </Providers>\n  );\n};\n\nexport default Print;\n"],"names":["Print","props","_jsx"],"mappings":";;;;;;;;;;;;;IAOMA,KAAK,GAAG,SAARA,KAAQ,CAAAC,KAAK,EAAI;AACrB,sBACEC,IAAC,SAAD;AACE,IAAA,IAAI,EAAC;AADP,KAEMD,KAFN;AAAA,2BAIEC,IAAC,YAAD;AAAA,6BACEA,IAAC,aAAD;AAAe,QAAA,IAAI,EAAC,OAApB;AAAA,+BACEA,IAAC,WAAD;AACE,UAAA,QAAQ,EAAE,IADZ;AAEE,UAAA,IAAI,EAAC;AAFP;AADF;AADF;AAJF,KADF;AAeD;;;;"}

package/lib/esm/components/Print/PrintModal.js

@@ -0,0 +1,49 @@
+import Modal from 'react-modal';
+import PrintWrapper from './PrintWrapper.js';
+import ReportWrapper from '../ReportWrapper.js';
+import StaticScene from '../Preview/StaticScene.js';
+import { jsx } from 'react/jsx-runtime';
+
+var PrintModal = function PrintModal() {
+  return /*#__PURE__*/jsx(Modal, {
+    appElement: document.getElementById('root'),
+    closeTimeoutMS: 300,
+    contentLabel: "modalA",
+    id: "printModal",
+    isOpen: true,
+    portalClassName: "ReportPrintPortal",
+    shouldCloseOnEsc: false,
+    style: {
+      content: {
+        backgroundColor: '#fff',
+        border: 'none',
+        borderRadius: 'none',
+        bottom: 0,
+        left: 0,
+        overflow: 'visible',
+        padding: 0,
+        position: 'absolute',
+        right: 0,
+        top: 0
+      },
+      overlay: {
+        border: 'none',
+        height: 'auto',
+        position: 'absolute',
+        zIndex: '99999'
+      }
+    },
+    children: /*#__PURE__*/jsx(PrintWrapper, {
+      children: /*#__PURE__*/jsx(ReportWrapper, {
+        mode: "print",
+        children: /*#__PURE__*/jsx(StaticScene, {
+          hideZoom: true,
+          mode: "print"
+        })
+      })
+    })
+  });
+};
+
+export default PrintModal;
+//# sourceMappingURL=PrintModal.js.map

package/lib/esm/components/Print/PrintModal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrintModal.js","sources":["../../../../src/components/Print/PrintModal.js"],"sourcesContent":["import Modal from 'react-modal';\nimport PrintWrapper from './PrintWrapper';\nimport ReportWrapper from '../ReportWrapper';\nimport StaticScene from '../Preview/StaticScene';\n\nconst PrintModal = () => {\n  return (\n    <Modal\n      appElement={document.getElementById('root')}\n      closeTimeoutMS={300}\n      contentLabel=\"modalA\"\n      id=\"printModal\"\n      isOpen={true}\n      portalClassName=\"ReportPrintPortal\"\n      shouldCloseOnEsc={false}\n      style={{\n        content: {\n          backgroundColor: '#fff',\n          border: 'none',\n          borderRadius: 'none',\n          bottom: 0,\n          left: 0,\n          overflow: 'visible',\n          padding: 0,\n          position: 'absolute',\n          right: 0,\n          top: 0,\n        },\n        overlay: {\n          border: 'none',\n          height: 'auto',\n          position: 'absolute',\n          zIndex: '99999',\n        },\n      }}\n    >\n      <PrintWrapper>\n        <ReportWrapper mode=\"print\">\n          <StaticScene\n            hideZoom={true}\n            mode=\"print\"\n          />\n        </ReportWrapper>\n      </PrintWrapper>\n    </Modal>\n  );\n};\n\nexport default PrintModal;\n"],"names":["PrintModal","_jsx","document","getElementById","content","backgroundColor","border","borderRadius","bottom","left","overflow","padding","position","right","top","overlay","height","zIndex"],"mappings":";;;;;;IAKMA,UAAU,GAAG,SAAbA,UAAa,GAAM;AACvB,sBACEC,IAAC,KAAD;AACE,IAAA,UAAU,EAAEC,QAAQ,CAACC,cAAT,CAAwB,MAAxB,CADd;AAEE,IAAA,cAAc,EAAE,GAFlB;AAGE,IAAA,YAAY,EAAC,QAHf;AAIE,IAAA,EAAE,EAAC,YAJL;AAKE,IAAA,MAAM,EAAE,IALV;AAME,IAAA,eAAe,EAAC,mBANlB;AAOE,IAAA,gBAAgB,EAAE,KAPpB;AAQE,IAAA,KAAK,EAAE;AACLC,MAAAA,OAAO,EAAE;AACPC,QAAAA,eAAe,EAAE,MADV;AAEPC,QAAAA,MAAM,EAAE,MAFD;AAGPC,QAAAA,YAAY,EAAE,MAHP;AAIPC,QAAAA,MAAM,EAAE,CAJD;AAKPC,QAAAA,IAAI,EAAE,CALC;AAMPC,QAAAA,QAAQ,EAAE,SANH;AAOPC,QAAAA,OAAO,EAAE,CAPF;AAQPC,QAAAA,QAAQ,EAAE,UARH;AASPC,QAAAA,KAAK,EAAE,CATA;AAUPC,QAAAA,GAAG,EAAE;AAVE,OADJ;AAaLC,MAAAA,OAAO,EAAE;AACPT,QAAAA,MAAM,EAAE,MADD;AAEPU,QAAAA,MAAM,EAAE,MAFD;AAGPJ,QAAAA,QAAQ,EAAE,UAHH;AAIPK,QAAAA,MAAM,EAAE;AAJD;AAbJ,KART;AAAA,2BA6BEhB,IAAC,YAAD;AAAA,6BACEA,IAAC,aAAD;AAAe,QAAA,IAAI,EAAC,OAApB;AAAA,+BACEA,IAAC,WAAD;AACE,UAAA,QAAQ,EAAE,IADZ;AAEE,UAAA,IAAI,EAAC;AAFP;AADF;AADF;AA7BF,IADF;AAwCD;;;;"}

package/lib/esm/components/Print/{PrintModeWithoutContext.js → PrintWrapper.js}

@@ -2,9 +2,8 @@ import 'core-js/modules/es.regexp.exec.js';
 import 'core-js/modules/es.string.split.js';
 import { useState } from 'react';
 import PropTypes from 'prop-types';
-import ReportWrapper from '../ReportWrapper.js';
-import StaticScene from '../Preview/StaticScene.js';
 import { pageSize } from '../../utils/print.js';
+import { usePropStore } from '../../contexts/PropContext.js';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -20,13 +19,11 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var availableFormats = ['A4', 'A5', 'Custom', 'Web'];
 
-var PrintModeWithoutContext = function PrintModeWithoutContext(_ref) {
-  var additionalPageItems = _ref.additionalPageItems,
-      hashCode = _ref.hashCode,
-      itemAccessor = _ref.itemAccessor,
-      pages = _ref.pages,
-      settings = _ref.settings,
-      theme = _ref.theme;
+var PrintWrapper = function PrintWrapper(_ref) {
+  var children = _ref.children;
+  var settings = usePropStore(function (state) {
+    return state.settings;
+  });
 
   var _useState = useState(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -44,41 +41,13 @@ var PrintModeWithoutContext = function PrintModeWithoutContext(_ref) {
       dangerouslySetInnerHTML: {
         __html: "\n            @page {\n              size: ".concat(pageSize(settings), "; margin:0;\n            }")
       }
-    }), /*#__PURE__*/jsx(ReportWrapper, {
-      mode: "print",
-      theme: theme,
-      children: /*#__PURE__*/jsx(StaticScene, {
-        additionalPageItems: additionalPageItems,
-        hashCode: hashCode,
-        hideZoom: true,
-        itemAccessor: itemAccessor,
-        mode: "print",
-        pages: pages
-      })
-    })]
+    }), children]
   });
 };
 
-PrintModeWithoutContext.propTypes = {
-  additionalPageItems: PropTypes.arrayOf(PropTypes.node),
-  hashCode: PropTypes.string,
-  itemAccessor: PropTypes.func,
-  pages: PropTypes.arrayOf(PropTypes.shape({})),
-  settings: PropTypes.shape({
-    reportLayout: PropTypes.string,
-    reportLayoutHeight: PropTypes.string,
-    reportLayoutWidth: PropTypes.string
-  }),
-  theme: PropTypes.oneOf(['lightMode', 'darkMode'])
-};
-PrintModeWithoutContext.defaultProps = {
-  additionalPageItems: [],
-  hashCode: '',
-  itemAccessor: function itemAccessor() {},
-  pages: [],
-  settings: {},
-  theme: 'lightMode'
+PrintWrapper.propTypes = {
+  children: PropTypes.node.isRequired
 };
 
-export default PrintModeWithoutContext;
-//# sourceMappingURL=PrintModeWithoutContext.js.map
+export default PrintWrapper;
+//# sourceMappingURL=PrintWrapper.js.map

package/lib/esm/components/Print/PrintWrapper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PrintWrapper.js","sources":["../../../../src/components/Print/PrintWrapper.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { pageSize } from '../../utils/print';\nimport { usePropStore } from '../../contexts/PropContext';\n\nconst availableFormats = ['A4', 'A5', 'Custom', 'Web'];\n\nconst PrintWrapper = ({ children }) => {\n  const settings = usePropStore(state => state.settings);\n  const [manipulatePageSize, setManipulatePageSize] = useState(false);\n  const reportLayout = settings.reportLayout ? settings.reportLayout : 'A4 Landscape';\n  if (availableFormats.indexOf(reportLayout.split(' ')[0]) > -1 && !manipulatePageSize) {\n    setManipulatePageSize(true);\n  }\n\n  return (\n    <>\n      {manipulatePageSize && (\n        <style\n          dangerouslySetInnerHTML={{\n            __html: `\n            @page {\n              size: ${pageSize(settings)}; margin:0;\n            }`,\n          }}\n        />\n      )}\n      {children}\n    </>\n  );\n};\n\nPrintWrapper.propTypes = {\n  children: PropTypes.node.isRequired,\n};\n\nexport default PrintWrapper;\n"],"names":["availableFormats","PrintWrapper","children","settings","usePropStore","state","useState","manipulatePageSize","setManipulatePageSize","reportLayout","indexOf","split","_jsxs","_jsx","__html","pageSize","propTypes","PropTypes","node","isRequired"],"mappings":";;;;;;;;;;;;;;;;;;;AAKA,IAAMA,gBAAgB,GAAG,CAAC,IAAD,EAAO,IAAP,EAAa,QAAb,EAAuB,KAAvB,CAAzB;;IAEMC,YAAY,GAAG,SAAfA,YAAe,OAAkB;AAAA,MAAfC,QAAe,QAAfA,QAAe;AACrC,MAAMC,QAAQ,GAAGC,YAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,QAAV;AAAA,GAAN,CAA7B;;AACA,kBAAoDG,QAAQ,CAAC,KAAD,CAA5D;AAAA;AAAA,MAAOC,kBAAP;AAAA,MAA2BC,qBAA3B;;AACA,MAAMC,YAAY,GAAGN,QAAQ,CAACM,YAAT,GAAwBN,QAAQ,CAACM,YAAjC,GAAgD,cAArE;;AACA,MAAIT,gBAAgB,CAACU,OAAjB,CAAyBD,YAAY,CAACE,KAAb,CAAmB,GAAnB,EAAwB,CAAxB,CAAzB,IAAuD,CAAC,CAAxD,IAA6D,CAACJ,kBAAlE,EAAsF;AACpFC,IAAAA,qBAAqB,CAAC,IAAD,CAArB;AACD;;AAED,sBACEI;AAAA,eACGL,kBAAkB,iBACjBM;AACE,MAAA,uBAAuB,EAAE;AACvBC,QAAAA,MAAM,uDAEIC,QAAQ,CAACZ,QAAD,CAFZ;AADiB;AAD3B,MAFJ,EAWGD,QAXH;AAAA,IADF;AAeD;;AAEDD,YAAY,CAACe,SAAb,GAAyB;AACvBd,EAAAA,QAAQ,EAAEe,SAAS,CAACC,IAAV,CAAeC;AADF,CAAzB;;;;"}

package/lib/esm/components/Report.js

@@ -1,14 +1,13 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect, useMemo, StrictMode } from 'react';
 import PropTypes from 'prop-types';
 import Builder from './Builder/Builder.js';
 import Presentation from './Presentation/Presentation.js';
 import Preview from './Preview/Preview.js';
 import Print from './Print/Print.js';
 import ALL_TEXTS, { SharingTextsModule } from '../constants/texts.js';
-import Responsive from './Responsive/index.js';
 import { jsx } from 'react/jsx-runtime';
 
-var _excluded = ["leftPanelConfig", "mode", "reportsAppTexts"];
+var _excluded = ["mode", "reportsAppTexts"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -31,11 +30,18 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 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 modeComponents = {
+  customize: Builder,
+  presentation: Presentation,
+  preview: Preview,
+  print: Print
+};
 
 var Report = function Report(_ref) {
-  var leftPanelConfig = _ref.leftPanelConfig,
-      mode = _ref.mode,
-      newReportsAppTexts = _ref.reportsAppTexts,
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? 'customize' : _ref$mode,
+      _ref$reportsAppTexts = _ref.reportsAppTexts,
+      newReportsAppTexts = _ref$reportsAppTexts === void 0 ? ALL_TEXTS : _ref$reportsAppTexts,
       props = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = useState(mode),
@@ -52,62 +58,38 @@ var Report = function Report(_ref) {
     SharingTextsModule.setTexts(newReportsAppTexts);
   }, [newReportsAppTexts]);
   useEffect(function () {
-    if (['customize', 'preview'].indexOf(viewMode) > -1) {
-      setLastScrollPosition(document.querySelector('.jfReport-viewport').scrollTop);
+    if (viewMode === 'customize') {
+      var _document$querySelect;
+
+      setLastScrollPosition(((_document$querySelect = document.querySelector('.jfReport-viewport')) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.scrollTop) || 0);
     }
 
     setViewMode(mode);
-  }, [mode]);
-
-  var customProps = _objectSpread(_objectSpread({}, props), {}, {
-    lastScrollPosition: lastScrollPosition,
-    leftPanelConfig: leftPanelConfig
-  });
+  }, [mode, viewMode]);
+  var ModeComponent = useMemo(function () {
+    return modeComponents[viewMode];
+  }, [viewMode]);
 
-  switch (viewMode) {
-    case 'preview':
-      {
-        return /*#__PURE__*/jsx(Preview, _objectSpread({}, customProps));
-      }
-
-    case 'responsive':
-      {
-        return /*#__PURE__*/jsx(Responsive, _objectSpread({}, customProps));
-      }
-
-    case 'presentation':
-      {
-        return /*#__PURE__*/jsx(Presentation, _objectSpread({}, props));
-      }
-
-    case 'print':
-      {
-        return /*#__PURE__*/jsx(Print, _objectSpread({}, props));
-      }
-
-    case 'customize':
-    default:
-      {
-        return /*#__PURE__*/jsx(Builder, _objectSpread({}, customProps));
-      }
+  if (!ModeComponent) {
+    return null;
   }
+
+  return /*#__PURE__*/jsx(StrictMode, {
+    children: /*#__PURE__*/jsx(ModeComponent, _objectSpread(_objectSpread({}, props), {}, {
+      lastScrollPosition: lastScrollPosition
+    }))
+  });
 };
 
 Report.propTypes = {
   /** Conditionally rendering different modes  */
-  mode: PropTypes.oneOf(['customize', 'preview', 'print', 'presentation', 'responsive']),
+  mode: PropTypes.oneOf(['customize', 'preview', 'print', 'presentation']),
 
   /**
    It can be changed static texts or translated which use in the library.
    New texts are set when you pass again.
   */
-  reportsAppTexts: PropTypes.shape({}),
-  theme: PropTypes.oneOf(['lightMode', 'darkMode'])
-};
-Report.defaultProps = {
-  mode: 'customize',
-  reportsAppTexts: ALL_TEXTS,
-  theme: 'lightMode'
+  reportsAppTexts: PropTypes.shape({})
 };
 
 export default Report;

package/lib/esm/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';\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","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,QAAQ,CAACJ,IAAD,CAAxC;AAAA;AAAA,MAAOK,QAAP;AAAA,MAAiBC,WAAjB;;AACA,mBAAoDF,QAAQ,CAAC,CAAD,CAA5D;AAAA;AAAA,MAAOG,kBAAP;AAAA,MAA2BC,qBAA3B;;AAEAC,EAAAA,SAAS,CAAC,YAAM;AACdC,IAAAA,kBAAkB,CAACC,QAAnB,CAA4BV,kBAA5B;AACD,GAFQ,EAEN,CAACA,kBAAD,CAFM,CAAT;AAIAQ,EAAAA,SAAS,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,IAAC,OAAD,oBAAaD,WAAb,EAAP;AACD;;AACD,SAAK,YAAL;AAAmB;AACjB,4BAAOC,IAAC,UAAD,oBAAgBD,WAAhB,EAAP;AACD;;AACD,SAAK,cAAL;AAAqB;AACnB,4BAAOC,IAAC,YAAD,oBAAkBd,KAAlB,EAAP;AACD;;AACD,SAAK,OAAL;AAAc;AACZ,4BAAOc,IAAC,KAAD,oBAAWd,KAAX,EAAP;AACD;;AACD,SAAK,WAAL;AACA;AAAS;AACP,4BAAOc,IAAC,OAAD,oBAAaD,WAAb,EAAP;AACD;AAhBH;AAkBD;;AAEDlB,MAAM,CAACoB,SAAP,GAAmB;AACjB;AACAlB,EAAAA,IAAI,EAAEmB,SAAS,CAACC,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,OAAzB,EAAkC,cAAlC,EAAkD,YAAlD,CAAhB,CAFW;;AAGjB;AACF;AACA;AACA;AACElB,EAAAA,eAAe,EAAEiB,SAAS,CAACE,KAAV,CAAgB,EAAhB,CAPA;AAQjBC,EAAAA,KAAK,EAAEH,SAAS,CAACC,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB;AARU,CAAnB;AAWAtB,MAAM,CAACyB,YAAP,GAAsB;AACpBvB,EAAAA,IAAI,EAAE,WADc;AAEpBE,EAAAA,eAAe,EAAfA,SAFoB;AAGpBoB,EAAAA,KAAK,EAAE;AAHa,CAAtB;;;;"}
+{"version":3,"file":"Report.js","sources":["../../../src/components/Report.js"],"sourcesContent":["import {\n  useState, useEffect, useMemo, StrictMode,\n} 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 modeComponents = {\n  customize: Builder,\n  presentation: Presentation,\n  preview: Preview,\n  print: Print,\n};\n\nconst Report = ({\n  mode = 'customize',\n  reportsAppTexts: newReportsAppTexts = reportsAppTexts,\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 (viewMode === 'customize') {\n      setLastScrollPosition(document.querySelector('.jfReport-viewport')?.scrollTop || 0);\n    }\n    setViewMode(mode);\n  }, [mode, viewMode]);\n\n  const ModeComponent = useMemo(() => modeComponents[viewMode], [viewMode]);\n\n  if (!ModeComponent) {\n    return null;\n  }\n\n  return (\n    <StrictMode>\n      <ModeComponent\n        {...props}\n        lastScrollPosition={lastScrollPosition}\n      />\n    </StrictMode>\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};\n\nexport default Report;\n"],"names":["modeComponents","customize","Builder","presentation","Presentation","preview","Preview","print","Print","Report","mode","reportsAppTexts","newReportsAppTexts","props","useState","viewMode","setViewMode","lastScrollPosition","setLastScrollPosition","useEffect","SharingTextsModule","setTexts","document","querySelector","scrollTop","ModeComponent","useMemo","_jsx","propTypes","PropTypes","oneOf","shape"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,IAAMA,cAAc,GAAG;AACrBC,EAAAA,SAAS,EAAEC,OADU;AAErBC,EAAAA,YAAY,EAAEC,YAFO;AAGrBC,EAAAA,OAAO,EAAEC,OAHY;AAIrBC,EAAAA,KAAK,EAAEC;AAJc,CAAvB;;IAOMC,MAAM,GAAG,SAATA,MAAS,OAIT;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,WAGH;AAAA,kCAFJC,eAEI;AAAA,MAFaC,kBAEb,qCAFkCD,SAElC;AAAA,MADDE,KACC;;AACJ,kBAAgCC,QAAQ,CAACJ,IAAD,CAAxC;AAAA;AAAA,MAAOK,QAAP;AAAA,MAAiBC,WAAjB;;AACA,mBAAoDF,QAAQ,CAAC,CAAD,CAA5D;AAAA;AAAA,MAAOG,kBAAP;AAAA,MAA2BC,qBAA3B;;AAEAC,EAAAA,SAAS,CAAC,YAAM;AACdC,IAAAA,kBAAkB,CAACC,QAAnB,CAA4BT,kBAA5B;AACD,GAFQ,EAEN,CAACA,kBAAD,CAFM,CAAT;AAIAO,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIJ,QAAQ,KAAK,WAAjB,EAA8B;AAAA;;AAC5BG,MAAAA,qBAAqB,CAAC,0BAAAI,QAAQ,CAACC,aAAT,CAAuB,oBAAvB,iFAA8CC,SAA9C,KAA2D,CAA5D,CAArB;AACD;;AACDR,IAAAA,WAAW,CAACN,IAAD,CAAX;AACD,GALQ,EAKN,CAACA,IAAD,EAAOK,QAAP,CALM,CAAT;AAOA,MAAMU,aAAa,GAAGC,OAAO,CAAC;AAAA,WAAM1B,cAAc,CAACe,QAAD,CAApB;AAAA,GAAD,EAAiC,CAACA,QAAD,CAAjC,CAA7B;;AAEA,MAAI,CAACU,aAAL,EAAoB;AAClB,WAAO,IAAP;AACD;;AAED,sBACEE,IAAC,UAAD;AAAA,2BACEA,IAAC,aAAD,kCACMd,KADN;AAEE,MAAA,kBAAkB,EAAEI;AAFtB;AADF,IADF;AAQD;;AAEDR,MAAM,CAACmB,SAAP,GAAmB;AACjB;AACAlB,EAAAA,IAAI,EAAEmB,SAAS,CAACC,KAAV,CAAgB,CAAC,WAAD,EAAc,SAAd,EAAyB,OAAzB,EAAkC,cAAlC,CAAhB,CAFW;;AAGjB;AACF;AACA;AACA;AACEnB,EAAAA,eAAe,EAAEkB,SAAS,CAACE,KAAV,CAAgB,EAAhB;AAPA,CAAnB;;;;"}

package/lib/esm/components/ReportItemsWrapper.js

@@ -4,61 +4,47 @@ import { memo } from 'react';
 import ReportItemRenderer from './Builder/ReportItemRenderer.js';
 import DraggableItem from './DraggableItem/DraggableItem.js';
 import getMergedItem from '../utils/getMergedItem.js';
+import { useBuilderStore } from '../contexts/BuilderContext.js';
+import { isSelected } from '../utils/functions.js';
+import { usePropStore } from '../contexts/PropContext.js';
 import { jsx } from 'react/jsx-runtime';
 
-var isSelected = function isSelected(id, activeElements) {
-  if (activeElements === null) return id === activeElements;
-  return activeElements.indexOf(id) !== -1;
-};
-
 var ReportItemsWrapper = function ReportItemsWrapper(_ref) {
-  var acceptedItems = _ref.acceptedItems,
-      activeElement = _ref.activeElement,
-      guides = _ref.guides,
-      hashCode = _ref.hashCode,
+  var guides = _ref.guides,
       isResize = _ref.isResize,
-      isRightPanelOpen = _ref.isRightPanelOpen,
-      isTextEditorOpen = _ref.isTextEditorOpen,
-      itemAccessor = _ref.itemAccessor,
       items = _ref.items,
       matches = _ref.matches,
-      onAnEventTrigger = _ref.onAnEventTrigger,
-      onItemAdd = _ref.onItemAdd,
-      onItemChange = _ref.onItemChange,
-      onItemRemove = _ref.onItemRemove,
-      onItemResize = _ref.onItemResize,
-      setActiveElement = _ref.setActiveElement,
-      setContextMenuProps = _ref.setContextMenuProps,
       setIsResize = _ref.setIsResize,
-      setIsRightPanelOpen = _ref.setIsRightPanelOpen,
-      setMatches = _ref.setMatches,
-      zoom = _ref.zoom;
+      setMatches = _ref.setMatches;
+  var acceptedItems = usePropStore(function (state) {
+    return state.acceptedItems;
+  });
+  var activeElement = useBuilderStore(function (state) {
+    return state.activeElement;
+  });
+  var itemAccessor = usePropStore(function (state) {
+    return state.itemAccessor;
+  });
+  var onAnEventTrigger = usePropStore(function (state) {
+    return state.onAnEventTrigger;
+  });
+  var onItemChange = usePropStore(function (state) {
+    return state.onItemChange;
+  });
   return items.filter(function (item) {
     return item.isVisible !== undefined ? item.isVisible : true;
   }).map(function (item, index) {
     var mergedItem = getMergedItem(item, acceptedItems);
     return /*#__PURE__*/jsx(DraggableItem, {
       guides: guides,
-      hashCode: hashCode,
       index: index,
       isMultipleItemSelected: activeElement !== null && activeElement.length > 1,
       isResize: isResize,
-      isRightPanelOpen: isRightPanelOpen,
       isSelected: isSelected(item.id, activeElement),
-      isTextEditorOpen: isTextEditorOpen,
       item: item,
       matches: matches,
-      onAnEventTrigger: onAnEventTrigger,
-      onItemAdd: onItemAdd,
-      onItemChange: onItemChange,
-      onItemRemove: onItemRemove,
-      onItemResize: onItemResize,
-      setActiveElement: setActiveElement,
-      setContextMenuProps: setContextMenuProps,
       setIsResize: setIsResize,
-      setIsRightPanelOpen: setIsRightPanelOpen,
       setMatches: setMatches,
-      zoom: zoom,
       children: /*#__PURE__*/jsx(ReportItemRenderer, {
         item: mergedItem,
         children: function children(ReportItem) {

package/lib/esm/components/ReportItemsWrapper.js.map

@@ -1 +1 @@
-{"version":3,"file":"ReportItemsWrapper.js","sources":["../../../src/components/ReportItemsWrapper.js"],"sourcesContent":["import { memo } from 'react';\nimport ReportItemRenderer from './Builder/ReportItemRenderer';\nimport DraggableItem from './DraggableItem/DraggableItem';\nimport getMergedItem from '../utils/getMergedItem';\n\nconst isSelected = (id, activeElements) => {\n  if (activeElements === null) return id === activeElements;\n  return activeElements.indexOf(id) !== -1;\n};\n\nconst ReportItemsWrapper = ({\n  acceptedItems,\n  activeElement,\n  guides,\n  hashCode,\n  isResize,\n  isRightPanelOpen,\n  isTextEditorOpen,\n  itemAccessor,\n  items,\n  matches,\n  onAnEventTrigger,\n  onItemAdd,\n  onItemChange,\n  onItemRemove,\n  onItemResize,\n  setActiveElement,\n  setContextMenuProps,\n  setIsResize,\n  setIsRightPanelOpen,\n  setMatches,\n  zoom,\n}) => {\n  return items\n    .filter(item => (\n      item.isVisible !== undefined\n        ? item.isVisible\n        : true\n    ))\n    .map((item, index) => {\n      const mergedItem = getMergedItem(item, acceptedItems);\n      return (\n        <DraggableItem\n          key={item.id}\n          guides={guides}\n          hashCode={hashCode}\n          index={index}\n          isMultipleItemSelected={activeElement !== null && activeElement.length > 1}\n          isResize={isResize}\n          isRightPanelOpen={isRightPanelOpen}\n          isSelected={isSelected(item.id, activeElement)}\n          isTextEditorOpen={isTextEditorOpen}\n          item={item}\n          matches={matches}\n          onAnEventTrigger={onAnEventTrigger}\n          onItemAdd={onItemAdd}\n          onItemChange={onItemChange}\n          onItemRemove={onItemRemove}\n          onItemResize={onItemResize}\n          setActiveElement={setActiveElement}\n          setContextMenuProps={setContextMenuProps}\n          setIsResize={setIsResize}\n          setIsRightPanelOpen={setIsRightPanelOpen}\n          setMatches={setMatches}\n          zoom={zoom}\n        >\n          <ReportItemRenderer\n            key={item.id}\n            item={mergedItem}\n          >\n            {ReportItem => (\n              <ReportItem\n                isMultipleItemSelected={activeElement !== null && activeElement.length > 1}\n                isSelected={isSelected(item.id, activeElement)}\n                item={mergedItem}\n                itemAccessor={itemAccessor}\n                onAnEventTrigger={onAnEventTrigger}\n                onItemChange={onItemChange}\n              />\n            )}\n          </ReportItemRenderer>\n        </DraggableItem>\n      );\n    });\n};\n\nexport default memo(ReportItemsWrapper);\n"],"names":["isSelected","id","activeElements","indexOf","ReportItemsWrapper","acceptedItems","activeElement","guides","hashCode","isResize","isRightPanelOpen","isTextEditorOpen","itemAccessor","items","matches","onAnEventTrigger","onItemAdd","onItemChange","onItemRemove","onItemResize","setActiveElement","setContextMenuProps","setIsResize","setIsRightPanelOpen","setMatches","zoom","filter","item","isVisible","undefined","map","index","mergedItem","getMergedItem","_jsx","length","ReportItem","memo"],"mappings":"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"}
+{"version":3,"file":"ReportItemsWrapper.js","sources":["../../../src/components/ReportItemsWrapper.js"],"sourcesContent":["import { memo } from 'react';\nimport ReportItemRenderer from './Builder/ReportItemRenderer';\nimport DraggableItem from './DraggableItem/DraggableItem';\nimport getMergedItem from '../utils/getMergedItem';\nimport { useBuilderStore } from '../contexts/BuilderContext';\nimport { isSelected } from '../utils/functions';\nimport { usePropStore } from '../contexts/PropContext';\n\nconst ReportItemsWrapper = ({\n  guides,\n  isResize,\n  items,\n  matches,\n  setIsResize,\n  setMatches,\n}) => {\n  const acceptedItems = usePropStore(state => state.acceptedItems);\n  const activeElement = useBuilderStore(state => state.activeElement);\n  const itemAccessor = usePropStore(state => state.itemAccessor);\n  const onAnEventTrigger = usePropStore(state => state.onAnEventTrigger);\n  const onItemChange = usePropStore(state => state.onItemChange);\n\n  return items\n    .filter(item => (\n      item.isVisible !== undefined\n        ? item.isVisible\n        : true\n    ))\n    .map((item, index) => {\n      const mergedItem = getMergedItem(item, acceptedItems);\n      return (\n        <DraggableItem\n          key={item.id}\n          guides={guides}\n          index={index}\n          isMultipleItemSelected={activeElement !== null && activeElement.length > 1}\n          isResize={isResize}\n          isSelected={isSelected(item.id, activeElement)}\n          item={item}\n          matches={matches}\n          setIsResize={setIsResize}\n          setMatches={setMatches}\n        >\n          <ReportItemRenderer\n            key={item.id}\n            item={mergedItem}\n          >\n            {ReportItem => (\n              <ReportItem\n                isMultipleItemSelected={activeElement !== null && activeElement.length > 1}\n                isSelected={isSelected(item.id, activeElement)}\n                item={mergedItem}\n                itemAccessor={itemAccessor}\n                onAnEventTrigger={onAnEventTrigger}\n                onItemChange={onItemChange}\n              />\n            )}\n          </ReportItemRenderer>\n        </DraggableItem>\n      );\n    });\n};\n\nexport default memo(ReportItemsWrapper);\n"],"names":["ReportItemsWrapper","guides","isResize","items","matches","setIsResize","setMatches","acceptedItems","usePropStore","state","activeElement","useBuilderStore","itemAccessor","onAnEventTrigger","onItemChange","filter","item","isVisible","undefined","map","index","mergedItem","getMergedItem","_jsx","length","isSelected","id","ReportItem","memo"],"mappings":";;;;;;;;;;;AAQA,IAAMA,kBAAkB,GAAG,SAArBA,kBAAqB,OAOrB;AAAA,MANJC,MAMI,QANJA,MAMI;AAAA,MALJC,QAKI,QALJA,QAKI;AAAA,MAJJC,KAII,QAJJA,KAII;AAAA,MAHJC,OAGI,QAHJA,OAGI;AAAA,MAFJC,WAEI,QAFJA,WAEI;AAAA,MADJC,UACI,QADJA,UACI;AACJ,MAAMC,aAAa,GAAGC,YAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,aAAV;AAAA,GAAN,CAAlC;AACA,MAAMG,aAAa,GAAGC,eAAe,CAAC,UAAAF,KAAK;AAAA,WAAIA,KAAK,CAACC,aAAV;AAAA,GAAN,CAArC;AACA,MAAME,YAAY,GAAGJ,YAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACG,YAAV;AAAA,GAAN,CAAjC;AACA,MAAMC,gBAAgB,GAAGL,YAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACI,gBAAV;AAAA,GAAN,CAArC;AACA,MAAMC,YAAY,GAAGN,YAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACK,YAAV;AAAA,GAAN,CAAjC;AAEA,SAAOX,KAAK,CACTY,MADI,CACG,UAAAC,IAAI;AAAA,WACVA,IAAI,CAACC,SAAL,KAAmBC,SAAnB,GACIF,IAAI,CAACC,SADT,GAEI,IAHM;AAAA,GADP,EAMJE,GANI,CAMA,UAACH,IAAD,EAAOI,KAAP,EAAiB;AACpB,QAAMC,UAAU,GAAGC,aAAa,CAACN,IAAD,EAAOT,aAAP,CAAhC;AACA,wBACEgB,IAAC,aAAD;AAEE,MAAA,MAAM,EAAEtB,MAFV;AAGE,MAAA,KAAK,EAAEmB,KAHT;AAIE,MAAA,sBAAsB,EAAEV,aAAa,KAAK,IAAlB,IAA0BA,aAAa,CAACc,MAAd,GAAuB,CAJ3E;AAKE,MAAA,QAAQ,EAAEtB,QALZ;AAME,MAAA,UAAU,EAAEuB,UAAU,CAACT,IAAI,CAACU,EAAN,EAAUhB,aAAV,CANxB;AAOE,MAAA,IAAI,EAAEM,IAPR;AAQE,MAAA,OAAO,EAAEZ,OARX;AASE,MAAA,WAAW,EAAEC,WATf;AAUE,MAAA,UAAU,EAAEC,UAVd;AAAA,6BAYEiB,IAAC,kBAAD;AAEE,QAAA,IAAI,EAAEF,UAFR;AAAA,kBAIG,kBAAAM,UAAU;AAAA,8BACTJ,IAAC,UAAD;AACE,YAAA,sBAAsB,EAAEb,aAAa,KAAK,IAAlB,IAA0BA,aAAa,CAACc,MAAd,GAAuB,CAD3E;AAEE,YAAA,UAAU,EAAEC,UAAU,CAACT,IAAI,CAACU,EAAN,EAAUhB,aAAV,CAFxB;AAGE,YAAA,IAAI,EAAEW,UAHR;AAIE,YAAA,YAAY,EAAET,YAJhB;AAKE,YAAA,gBAAgB,EAAEC,gBALpB;AAME,YAAA,YAAY,EAAEC;AANhB,YADS;AAAA;AAJb,SACOE,IAAI,CAACU,EADZ;AAZF,OACOV,IAAI,CAACU,EADZ,CADF;AA8BD,GAtCI,CAAP;AAuCD,CArDD;;AAuDA,wCAAeE,IAAI,CAAC5B,kBAAD,CAAnB;;;;"}

package/lib/esm/components/ReportWrapper.js

@@ -1,9 +1,8 @@
-import { memo, useRef, useEffect } from 'react';
+import { memo } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { useBuilderContext } from '../utils/builderContext.js';
-import { useFitZoom } from '../utils/hooks.js';
-import { usePropContext } from '../utils/propContext.js';
+import { useBuilderStore } from '../contexts/BuilderContext.js';
+import { usePropStore } from '../contexts/PropContext.js';
 import { jsx } from 'react/jsx-runtime';
 
 var getModeClass = function getModeClass(mode) {
@@ -11,51 +10,31 @@ var getModeClass = function getModeClass(mode) {
 };
 
 var ReportWrapper = function ReportWrapper(_ref) {
-  var children = _ref.children,
-      mode = _ref.mode,
-      pageCount = _ref.pageCount,
-      theme = _ref.theme;
-
-  var _useBuilderContext = useBuilderContext(),
-      isAllSlidesPanelOpen = _useBuilderContext.isAllSlidesPanelOpen,
-      isLeftPanelOpen = _useBuilderContext.isLeftPanelOpen,
-      isRightPanelOpen = _useBuilderContext.isRightPanelOpen,
-      isSlidesPanelOpen = _useBuilderContext.isSlidesPanelOpen,
-      setIsLeftPanelOpen = _useBuilderContext.setIsLeftPanelOpen,
-      setIsSlidesPanelOpen = _useBuilderContext.setIsSlidesPanelOpen,
-      setZoom = _useBuilderContext.setZoom;
-
-  var _usePropContext = usePropContext(),
-      settings = _usePropContext.settings;
-
-  var decidedWhichPanelToOpen = useRef(false);
-  useFitZoom({
-    handler: setZoom,
-    isModeCustomize: mode === 'customize',
-    settings: settings
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? null : _ref$children,
+      _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? '' : _ref$mode;
+  var theme = usePropStore(function (state) {
+    return state.theme;
+  });
+  var isAllSlidesPanelOpen = useBuilderStore(function (state) {
+    return state.isAllSlidesPanelOpen;
+  });
+  var isLeftPanelOpen = useBuilderStore(function (state) {
+    return state.isLeftPanelOpen;
+  });
+  var isRightPanelOpen = useBuilderStore(function (state) {
+    return state.isRightPanelOpen;
+  });
+  var isSlidesPanelOpen = useBuilderStore(function (state) {
+    return state.isSlidesPanelOpen;
+  });
+  var wrapperClass = classNames('jfReport', 'f-height', 'd-flex', getModeClass(mode), theme, {
+    allSlidesPaneIsActive: isAllSlidesPanelOpen,
+    leftPaneIsActive: isLeftPanelOpen,
+    rightPaneIsActive: isRightPanelOpen || isSlidesPanelOpen,
+    slidesPaneIsActive: isSlidesPanelOpen
   });
-  useEffect(function () {
-    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {
-      return;
-    }
-
-    if (pageCount > 1) {
-      if (isLeftPanelOpen) {
-        setIsLeftPanelOpen(false);
-      }
-
-      setIsSlidesPanelOpen(true);
-    } else {
-      if (isSlidesPanelOpen) {
-        setIsSlidesPanelOpen(false);
-      }
-
-      setIsLeftPanelOpen(true);
-    }
-
-    decidedWhichPanelToOpen.current = true;
-  }, [mode, pageCount]);
-  var wrapperClass = classNames('jfReport', 'f-height', 'd-flex', getModeClass(mode), isLeftPanelOpen === true ? 'leftPaneIsActive' : '', isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '', isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '', isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '', theme);
   return /*#__PURE__*/jsx("div", {
     className: wrapperClass,
     children: children
@@ -63,16 +42,8 @@ var ReportWrapper = function ReportWrapper(_ref) {
 };
 
 ReportWrapper.propTypes = {
-  children: PropTypes.any,
-  mode: PropTypes.string,
-  pageCount: PropTypes.number,
-  theme: PropTypes.oneOf(['lightMode', 'darkMode'])
-};
-ReportWrapper.defaultProps = {
-  children: null,
-  mode: '',
-  pageCount: 0,
-  theme: 'lightMode'
+  children: PropTypes.node,
+  mode: PropTypes.string
 };
 var ReportWrapper$1 = /*#__PURE__*/memo(ReportWrapper);