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

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,4 +1,4 @@
-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';
@@ -7,7 +7,7 @@ import Print from './Print/Print.js';
 import ALL_TEXTS, { SharingTextsModule } from '../constants/texts.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; }
 
@@ -30,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),
@@ -51,40 +58,27 @@ 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 '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 = {
@@ -95,13 +89,7 @@ Report.propTypes = {
    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';\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,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,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;AAbH;AAeD;;AAEDlB,MAAM,CAACoB,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;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);
 

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

@@ -1 +1 @@
-{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderContext } from '../utils/builderContext';\nimport { useFitZoom } from '../utils/hooks';\nimport { usePropContext } from '../utils/propContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children,\n  mode,\n  pageCount,\n  theme,\n}) => {\n  const {\n    isAllSlidesPanelOpen,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    isSlidesPanelOpen,\n    setIsLeftPanelOpen,\n    setIsSlidesPanelOpen,\n    setZoom,\n  } = useBuilderContext();\n  const { settings } = usePropContext();\n  const decidedWhichPanelToOpen = useRef(false);\n\n  useFitZoom({\n    handler: setZoom,\n    isModeCustomize: mode === 'customize',\n    settings,\n  });\n\n  useEffect(() => {\n    if (mode !== 'customize' || decidedWhichPanelToOpen.current) {\n      return;\n    }\n\n    if (pageCount > 1) {\n      if (isLeftPanelOpen) {\n        setIsLeftPanelOpen(false);\n      }\n      setIsSlidesPanelOpen(true);\n    } else {\n      if (isSlidesPanelOpen) {\n        setIsSlidesPanelOpen(false);\n      }\n      setIsLeftPanelOpen(true);\n    }\n\n    decidedWhichPanelToOpen.current = true;\n  }, [mode, pageCount]);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    isLeftPanelOpen === true ? 'leftPaneIsActive' : '',\n    isRightPanelOpen === true || isSlidesPanelOpen === true ? 'rightPaneIsActive' : '',\n    isSlidesPanelOpen === true ? 'slidesPaneIsActive' : '',\n    isAllSlidesPanelOpen === true ? 'allSlidesPaneIsActive' : '',\n    theme,\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.any,\n  mode: PropTypes.string,\n  pageCount: PropTypes.number,\n  theme: PropTypes.oneOf(['lightMode', 'darkMode']),\n};\n\nReportWrapper.defaultProps = {\n  children: null,\n  mode: '',\n  pageCount: 0,\n  theme: 'lightMode',\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","pageCount","theme","useBuilderContext","isAllSlidesPanelOpen","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","setIsLeftPanelOpen","setIsSlidesPanelOpen","setZoom","usePropContext","settings","decidedWhichPanelToOpen","useRef","useFitZoom","handler","isModeCustomize","useEffect","current","wrapperClass","classNames","_jsx","propTypes","PropTypes","any","string","number","oneOf","defaultProps","memo"],"mappings":";;;;;;;;AAOA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAKhB;AAAA,MAJJC,QAII,QAJJA,QAII;AAAA,MAHJF,IAGI,QAHJA,IAGI;AAAA,MAFJG,SAEI,QAFJA,SAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,2BAQIC,iBAAiB,EARrB;AAAA,MACEC,oBADF,sBACEA,oBADF;AAAA,MAEEC,eAFF,sBAEEA,eAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,iBAJF,sBAIEA,iBAJF;AAAA,MAKEC,kBALF,sBAKEA,kBALF;AAAA,MAMEC,oBANF,sBAMEA,oBANF;AAAA,MAOEC,OAPF,sBAOEA,OAPF;;AASA,wBAAqBC,cAAc,EAAnC;AAAA,MAAQC,QAAR,mBAAQA,QAAR;;AACA,MAAMC,uBAAuB,GAAGC,MAAM,CAAC,KAAD,CAAtC;AAEAC,EAAAA,UAAU,CAAC;AACTC,IAAAA,OAAO,EAAEN,OADA;AAETO,IAAAA,eAAe,EAAEnB,IAAI,KAAK,WAFjB;AAGTc,IAAAA,QAAQ,EAARA;AAHS,GAAD,CAAV;AAMAM,EAAAA,SAAS,CAAC,YAAM;AACd,QAAIpB,IAAI,KAAK,WAAT,IAAwBe,uBAAuB,CAACM,OAApD,EAA6D;AAC3D;AACD;;AAED,QAAIlB,SAAS,GAAG,CAAhB,EAAmB;AACjB,UAAII,eAAJ,EAAqB;AACnBG,QAAAA,kBAAkB,CAAC,KAAD,CAAlB;AACD;;AACDC,MAAAA,oBAAoB,CAAC,IAAD,CAApB;AACD,KALD,MAKO;AACL,UAAIF,iBAAJ,EAAuB;AACrBE,QAAAA,oBAAoB,CAAC,KAAD,CAApB;AACD;;AACDD,MAAAA,kBAAkB,CAAC,IAAD,CAAlB;AACD;;AAEDK,IAAAA,uBAAuB,CAACM,OAAxB,GAAkC,IAAlC;AACD,GAlBQ,EAkBN,CAACrB,IAAD,EAAOG,SAAP,CAlBM,CAAT;AAoBA,MAAMmB,YAAY,GAAGC,UAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7BxB,YAAY,CAACC,IAAD,CAJiB,EAK7BO,eAAe,KAAK,IAApB,GAA2B,kBAA3B,GAAgD,EALnB,EAM7BC,gBAAgB,KAAK,IAArB,IAA6BC,iBAAiB,KAAK,IAAnD,GAA0D,mBAA1D,GAAgF,EANnD,EAO7BA,iBAAiB,KAAK,IAAtB,GAA6B,oBAA7B,GAAoD,EAPvB,EAQ7BH,oBAAoB,KAAK,IAAzB,GAAgC,uBAAhC,GAA0D,EAR7B,EAS7BF,KAT6B,CAA/B;AAWA,sBACEoB;AACE,IAAA,SAAS,EAAEF,YADb;AAAA,cAGGpB;AAHH,IADF;AAOD,CA9DD;;AAgEAD,aAAa,CAACwB,SAAd,GAA0B;AACxBvB,EAAAA,QAAQ,EAAEwB,SAAS,CAACC,GADI;AAExB3B,EAAAA,IAAI,EAAE0B,SAAS,CAACE,MAFQ;AAGxBzB,EAAAA,SAAS,EAAEuB,SAAS,CAACG,MAHG;AAIxBzB,EAAAA,KAAK,EAAEsB,SAAS,CAACI,KAAV,CAAgB,CAAC,WAAD,EAAc,UAAd,CAAhB;AAJiB,CAA1B;AAOA7B,aAAa,CAAC8B,YAAd,GAA6B;AAC3B7B,EAAAA,QAAQ,EAAE,IADiB;AAE3BF,EAAAA,IAAI,EAAE,EAFqB;AAG3BG,EAAAA,SAAS,EAAE,CAHgB;AAI3BC,EAAAA,KAAK,EAAE;AAJoB,CAA7B;AAOA,mCAAe4B,IAAI,CAAC/B,aAAD,CAAnB;;;;"}
+{"version":3,"file":"ReportWrapper.js","sources":["../../../src/components/ReportWrapper.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { useBuilderStore } from '../contexts/BuilderContext';\nimport { usePropStore } from '../contexts/PropContext';\n\nconst getModeClass = mode => `${mode}Mode`;\n\nconst ReportWrapper = ({\n  children = null,\n  mode = '',\n}) => {\n  const theme = usePropStore(state => state.theme);\n\n  const isAllSlidesPanelOpen = useBuilderStore(state => state.isAllSlidesPanelOpen);\n  const isLeftPanelOpen = useBuilderStore(state => state.isLeftPanelOpen);\n  const isRightPanelOpen = useBuilderStore(state => state.isRightPanelOpen);\n  const isSlidesPanelOpen = useBuilderStore(state => state.isSlidesPanelOpen);\n\n  const wrapperClass = classNames(\n    'jfReport',\n    'f-height',\n    'd-flex',\n    getModeClass(mode),\n    theme,\n    {\n      allSlidesPaneIsActive: isAllSlidesPanelOpen,\n      leftPaneIsActive: isLeftPanelOpen,\n      rightPaneIsActive: isRightPanelOpen || isSlidesPanelOpen,\n      slidesPaneIsActive: isSlidesPanelOpen,\n    },\n  );\n  return (\n    <div\n      className={wrapperClass}\n    >\n      {children}\n    </div>\n  );\n};\n\nReportWrapper.propTypes = {\n  children: PropTypes.node,\n  mode: PropTypes.string,\n};\n\nexport default memo(ReportWrapper);\n"],"names":["getModeClass","mode","ReportWrapper","children","theme","usePropStore","state","isAllSlidesPanelOpen","useBuilderStore","isLeftPanelOpen","isRightPanelOpen","isSlidesPanelOpen","wrapperClass","classNames","allSlidesPaneIsActive","leftPaneIsActive","rightPaneIsActive","slidesPaneIsActive","_jsx","propTypes","PropTypes","node","string","memo"],"mappings":";;;;;;;AAMA,IAAMA,YAAY,GAAG,SAAfA,YAAe,CAAAC,IAAI;AAAA,mBAAOA,IAAP;AAAA,CAAzB;;AAEA,IAAMC,aAAa,GAAG,SAAhBA,aAAgB,OAGhB;AAAA,2BAFJC,QAEI;AAAA,MAFJA,QAEI,8BAFO,IAEP;AAAA,uBADJF,IACI;AAAA,MADJA,IACI,0BADG,EACH;AACJ,MAAMG,KAAK,GAAGC,YAAY,CAAC,UAAAC,KAAK;AAAA,WAAIA,KAAK,CAACF,KAAV;AAAA,GAAN,CAA1B;AAEA,MAAMG,oBAAoB,GAAGC,eAAe,CAAC,UAAAF,KAAK;AAAA,WAAIA,KAAK,CAACC,oBAAV;AAAA,GAAN,CAA5C;AACA,MAAME,eAAe,GAAGD,eAAe,CAAC,UAAAF,KAAK;AAAA,WAAIA,KAAK,CAACG,eAAV;AAAA,GAAN,CAAvC;AACA,MAAMC,gBAAgB,GAAGF,eAAe,CAAC,UAAAF,KAAK;AAAA,WAAIA,KAAK,CAACI,gBAAV;AAAA,GAAN,CAAxC;AACA,MAAMC,iBAAiB,GAAGH,eAAe,CAAC,UAAAF,KAAK;AAAA,WAAIA,KAAK,CAACK,iBAAV;AAAA,GAAN,CAAzC;AAEA,MAAMC,YAAY,GAAGC,UAAU,CAC7B,UAD6B,EAE7B,UAF6B,EAG7B,QAH6B,EAI7Bb,YAAY,CAACC,IAAD,CAJiB,EAK7BG,KAL6B,EAM7B;AACEU,IAAAA,qBAAqB,EAAEP,oBADzB;AAEEQ,IAAAA,gBAAgB,EAAEN,eAFpB;AAGEO,IAAAA,iBAAiB,EAAEN,gBAAgB,IAAIC,iBAHzC;AAIEM,IAAAA,kBAAkB,EAAEN;AAJtB,GAN6B,CAA/B;AAaA,sBACEO;AACE,IAAA,SAAS,EAAEN,YADb;AAAA,cAGGT;AAHH,IADF;AAOD,CA/BD;;AAiCAD,aAAa,CAACiB,SAAd,GAA0B;AACxBhB,EAAAA,QAAQ,EAAEiB,SAAS,CAACC,IADI;AAExBpB,EAAAA,IAAI,EAAEmB,SAAS,CAACE;AAFQ,CAA1B;AAKA,mCAAeC,IAAI,CAACrB,aAAD,CAAnB;;;;"}

package/lib/esm/components/Settings/Button.js

@@ -5,10 +5,14 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import SvgSettings from '../../assets/svg/settings.svg.js';
 
 var Button = function Button(_ref) {
-  var classNames = _ref.classNames,
-      icon = _ref.icon,
-      onClick = _ref.onClick,
-      title = _ref.title;
+  var _ref$classNames = _ref.classNames,
+      classNames = _ref$classNames === void 0 ? '' : _ref$classNames,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon,
+      _ref$onClick = _ref.onClick,
+      onClick = _ref$onClick === void 0 ? '' : _ref$onClick,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title;
   var Icon = icons[icon] || SvgSettings;
   return /*#__PURE__*/jsxs("button", {
     className: classNames,
@@ -28,12 +32,6 @@ Button.propTypes = {
   onClick: PropTypes.any,
   title: PropTypes.any
 };
-Button.defaultProps = {
-  classNames: '',
-  icon: '',
-  onClick: '',
-  title: ''
-};
 var Button$1 = /*#__PURE__*/memo(Button);
 
 export default Button$1;

package/lib/esm/components/Settings/Button.js.map

@@ -1 +1 @@
-{"version":3,"file":"Button.js","sources":["../../../../src/components/Settings/Button.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\n\nconst Button = ({\n  classNames,\n  icon,\n  onClick,\n  title,\n}) => {\n  const Icon = icons[icon] || icons.settings;\n\n  return (\n    <button\n      className={classNames}\n      onClick={onClick}\n      type=\"button\"\n    >\n      {icon && <Icon className={`jfReportSVG icon-${icon}`} />}\n      <span>{title}</span>\n    </button>\n  );\n};\n\nButton.propTypes = {\n  classNames: PropTypes.string,\n  icon: PropTypes.string,\n  onClick: PropTypes.any,\n  title: PropTypes.any,\n};\n\nButton.defaultProps = {\n  classNames: '',\n  icon: '',\n  onClick: '',\n  title: '',\n};\n\nexport default memo(Button);\n"],"names":["Button","classNames","icon","onClick","title","Icon","icons","_jsxs","_jsx","propTypes","PropTypes","string","any","defaultProps","memo"],"mappings":";;;;;;AAIA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKT;AAAA,MAJJC,UAII,QAJJA,UAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,OAEI,QAFJA,OAEI;AAAA,MADJC,KACI,QADJA,KACI;AACJ,MAAMC,IAAI,GAAGC,KAAK,CAACJ,IAAD,CAAL,IAAeI,WAA5B;AAEA,sBACEC;AACE,IAAA,SAAS,EAAEN,UADb;AAEE,IAAA,OAAO,EAAEE,OAFX;AAGE,IAAA,IAAI,EAAC,QAHP;AAAA,eAKGD,IAAI,iBAAIM,IAAC,IAAD;AAAM,MAAA,SAAS,6BAAsBN,IAAtB;AAAf,MALX,eAMEM;AAAA,gBAAOJ;AAAP,MANF;AAAA,IADF;AAUD,CAlBD;;AAoBAJ,MAAM,CAACS,SAAP,GAAmB;AACjBR,EAAAA,UAAU,EAAES,SAAS,CAACC,MADL;AAEjBT,EAAAA,IAAI,EAAEQ,SAAS,CAACC,MAFC;AAGjBR,EAAAA,OAAO,EAAEO,SAAS,CAACE,GAHF;AAIjBR,EAAAA,KAAK,EAAEM,SAAS,CAACE;AAJA,CAAnB;AAOAZ,MAAM,CAACa,YAAP,GAAsB;AACpBZ,EAAAA,UAAU,EAAE,EADQ;AAEpBC,EAAAA,IAAI,EAAE,EAFc;AAGpBC,EAAAA,OAAO,EAAE,EAHW;AAIpBC,EAAAA,KAAK,EAAE;AAJa,CAAtB;AAOA,4BAAeU,IAAI,CAACd,MAAD,CAAnB;;;;"}
+{"version":3,"file":"Button.js","sources":["../../../../src/components/Settings/Button.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\n\nconst Button = ({\n  classNames = '',\n  icon = '',\n  onClick = '',\n  title = '',\n}) => {\n  const Icon = icons[icon] || icons.settings;\n\n  return (\n    <button\n      className={classNames}\n      onClick={onClick}\n      type=\"button\"\n    >\n      {icon && <Icon className={`jfReportSVG icon-${icon}`} />}\n      <span>{title}</span>\n    </button>\n  );\n};\n\nButton.propTypes = {\n  classNames: PropTypes.string,\n  icon: PropTypes.string,\n  onClick: PropTypes.any,\n  title: PropTypes.any,\n};\n\nexport default memo(Button);\n"],"names":["Button","classNames","icon","onClick","title","Icon","icons","_jsxs","_jsx","propTypes","PropTypes","string","any","memo"],"mappings":";;;;;;AAIA,IAAMA,MAAM,GAAG,SAATA,MAAS,OAKT;AAAA,6BAJJC,UAII;AAAA,MAJJA,UAII,gCAJS,EAIT;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,EAGH;AAAA,0BAFJC,OAEI;AAAA,MAFJA,OAEI,6BAFM,EAEN;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,EACJ;AACJ,MAAMC,IAAI,GAAGC,KAAK,CAACJ,IAAD,CAAL,IAAeI,WAA5B;AAEA,sBACEC;AACE,IAAA,SAAS,EAAEN,UADb;AAEE,IAAA,OAAO,EAAEE,OAFX;AAGE,IAAA,IAAI,EAAC,QAHP;AAAA,eAKGD,IAAI,iBAAIM,IAAC,IAAD;AAAM,MAAA,SAAS,6BAAsBN,IAAtB;AAAf,MALX,eAMEM;AAAA,gBAAOJ;AAAP,MANF;AAAA,IADF;AAUD,CAlBD;;AAoBAJ,MAAM,CAACS,SAAP,GAAmB;AACjBR,EAAAA,UAAU,EAAES,SAAS,CAACC,MADL;AAEjBT,EAAAA,IAAI,EAAEQ,SAAS,CAACC,MAFC;AAGjBR,EAAAA,OAAO,EAAEO,SAAS,CAACE,GAHF;AAIjBR,EAAAA,KAAK,EAAEM,SAAS,CAACE;AAJA,CAAnB;AAOA,4BAAeC,IAAI,CAACb,MAAD,CAAnB;;;;"}

package/lib/esm/components/Settings/CheckboxGroup.js

@@ -19,10 +19,14 @@ function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToAr
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
 
 var CheckboxGroup = function CheckboxGroup(_ref) {
-  var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange,
-      value = _ref.value;
+  var _ref$config = _ref.config,
+      config = _ref$config === void 0 ? {} : _ref$config,
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$value = _ref.value,
+      value = _ref$value === void 0 ? [] : _ref$value;
   var opts = config.options;
   var parsedValue = safeJSONParse(value, []);
   var val = parsedValue;
@@ -93,12 +97,6 @@ CheckboxGroup.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.string
 };
-CheckboxGroup.defaultProps = {
-  config: {},
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: []
-};
 
 export default CheckboxGroup;
 //# sourceMappingURL=CheckboxGroup.js.map