@jotforminc/dnd-builder 2.9.18 → 2.9.19

package/lib/esm/components/Builder/Section.js

@@ -6,10 +6,14 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import SvgSettings from '../../assets/svg/settings.svg.js';
 
 var Section = function Section(_ref) {
-  var additionalComponent = _ref.additionalComponent,
-      children = _ref.children,
-      icon = _ref.icon,
-      title = _ref.title;
+  var _ref$additionalCompon = _ref.additionalComponent,
+      additionalComponent = _ref$additionalCompon === void 0 ? null : _ref$additionalCompon,
+      _ref$children = _ref.children,
+      children = _ref$children === void 0 ? null : _ref$children,
+      _ref$icon = _ref.icon,
+      icon = _ref$icon === void 0 ? '' : _ref$icon,
+      _ref$title = _ref.title,
+      title = _ref$title === void 0 ? '' : _ref$title;
   var Icon = icons[icon] || SvgSettings;
   return /*#__PURE__*/jsxs(Fragment, {
     children: [/*#__PURE__*/jsxs("div", {
@@ -35,12 +39,6 @@ Section.propTypes = {
   icon: PropTypes.string,
   title: PropTypes.string
 };
-Section.defaultProps = {
-  additionalComponent: null,
-  children: null,
-  icon: '',
-  title: ''
-};
 var Section$1 = /*#__PURE__*/memo(Section);
 
 export default Section$1;

package/lib/esm/components/Builder/Section.js.map

@@ -1 +1 @@
-{"version":3,"file":"Section.js","sources":["../../../../src/components/Builder/Section.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport * as icons from '../../utils/icons';\n\nconst Section = ({\n  additionalComponent, children, icon, title,\n}) => {\n  const Icon = icons[icon] || icons.settings;\n  return (\n    <>\n      <div\n        className={classNames(\n          'js-toolTitle toolItem toolTitle d-flex a-center t-normal',\n          { hasAdditional: additionalComponent },\n        )}\n      >\n        {icon\n        && <span className={`titleIcon iconFor-${icon}`}><Icon className=\"jfReportSVG\" /></span>}\n        <span className=\"titleName js-titleName\">\n          {title}\n        </span>\n        {additionalComponent}\n      </div>\n      {children}\n    </>\n  );\n};\n\nSection.propTypes = {\n  additionalComponent: PropTypes.any,\n  children: PropTypes.any,\n  icon: PropTypes.string,\n  title: PropTypes.string,\n};\n\nSection.defaultProps = {\n  additionalComponent: null,\n  children: null,\n  icon: '',\n  title: '',\n};\n\nexport default memo(Section);\n"],"names":["Section","additionalComponent","children","icon","title","Icon","icons","_jsxs","classNames","hasAdditional","_jsx","propTypes","PropTypes","any","string","defaultProps","memo"],"mappings":";;;;;;;AAKA,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAEV;AAAA,MADJC,mBACI,QADJA,mBACI;AAAA,MADiBC,QACjB,QADiBA,QACjB;AAAA,MAD2BC,IAC3B,QAD2BA,IAC3B;AAAA,MADiCC,KACjC,QADiCA,KACjC;AACJ,MAAMC,IAAI,GAAGC,KAAK,CAACH,IAAD,CAAL,IAAeG,WAA5B;AACA,sBACEC;AAAA,4BACEA;AACE,MAAA,SAAS,EAAEC,UAAU,CACnB,0DADmB,EAEnB;AAAEC,QAAAA,aAAa,EAAER;AAAjB,OAFmB,CADvB;AAAA,iBAMGE,IAAI,iBACFO;AAAM,QAAA,SAAS,8BAAuBP,IAAvB,CAAf;AAAA,+BAA8CO,IAAC,IAAD;AAAM,UAAA,SAAS,EAAC;AAAhB;AAA9C,QAPL,eAQEA;AAAM,QAAA,SAAS,EAAC,wBAAhB;AAAA,kBACGN;AADH,QARF,EAWGH,mBAXH;AAAA,MADF,EAcGC,QAdH;AAAA,IADF;AAkBD,CAtBD;;AAwBAF,OAAO,CAACW,SAAR,GAAoB;AAClBV,EAAAA,mBAAmB,EAAEW,SAAS,CAACC,GADb;AAElBX,EAAAA,QAAQ,EAAEU,SAAS,CAACC,GAFF;AAGlBV,EAAAA,IAAI,EAAES,SAAS,CAACE,MAHE;AAIlBV,EAAAA,KAAK,EAAEQ,SAAS,CAACE;AAJC,CAApB;AAOAd,OAAO,CAACe,YAAR,GAAuB;AACrBd,EAAAA,mBAAmB,EAAE,IADA;AAErBC,EAAAA,QAAQ,EAAE,IAFW;AAGrBC,EAAAA,IAAI,EAAE,EAHe;AAIrBC,EAAAA,KAAK,EAAE;AAJc,CAAvB;AAOA,6BAAeY,IAAI,CAAChB,OAAD,CAAnB;;;;"}
+{"version":3,"file":"Section.js","sources":["../../../../src/components/Builder/Section.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport * as icons from '../../utils/icons';\n\nconst Section = ({\n  additionalComponent = null,\n  children = null,\n  icon = '',\n  title = '',\n}) => {\n  const Icon = icons[icon] || icons.settings;\n  return (\n    <>\n      <div\n        className={classNames(\n          'js-toolTitle toolItem toolTitle d-flex a-center t-normal',\n          { hasAdditional: additionalComponent },\n        )}\n      >\n        {icon\n        && <span className={`titleIcon iconFor-${icon}`}><Icon className=\"jfReportSVG\" /></span>}\n        <span className=\"titleName js-titleName\">\n          {title}\n        </span>\n        {additionalComponent}\n      </div>\n      {children}\n    </>\n  );\n};\n\nSection.propTypes = {\n  additionalComponent: PropTypes.any,\n  children: PropTypes.any,\n  icon: PropTypes.string,\n  title: PropTypes.string,\n};\n\nexport default memo(Section);\n"],"names":["Section","additionalComponent","children","icon","title","Icon","icons","_jsxs","classNames","hasAdditional","_jsx","propTypes","PropTypes","any","string","memo"],"mappings":";;;;;;;AAKA,IAAMA,OAAO,GAAG,SAAVA,OAAU,OAKV;AAAA,mCAJJC,mBAII;AAAA,MAJJA,mBAII,sCAJkB,IAIlB;AAAA,2BAHJC,QAGI;AAAA,MAHJA,QAGI,8BAHO,IAGP;AAAA,uBAFJC,IAEI;AAAA,MAFJA,IAEI,0BAFG,EAEH;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,EACJ;AACJ,MAAMC,IAAI,GAAGC,KAAK,CAACH,IAAD,CAAL,IAAeG,WAA5B;AACA,sBACEC;AAAA,4BACEA;AACE,MAAA,SAAS,EAAEC,UAAU,CACnB,0DADmB,EAEnB;AAAEC,QAAAA,aAAa,EAAER;AAAjB,OAFmB,CADvB;AAAA,iBAMGE,IAAI,iBACFO;AAAM,QAAA,SAAS,8BAAuBP,IAAvB,CAAf;AAAA,+BAA8CO,IAAC,IAAD;AAAM,UAAA,SAAS,EAAC;AAAhB;AAA9C,QAPL,eAQEA;AAAM,QAAA,SAAS,EAAC,wBAAhB;AAAA,kBACGN;AADH,QARF,EAWGH,mBAXH;AAAA,MADF,EAcGC,QAdH;AAAA,IADF;AAkBD,CAzBD;;AA2BAF,OAAO,CAACW,SAAR,GAAoB;AAClBV,EAAAA,mBAAmB,EAAEW,SAAS,CAACC,GADb;AAElBX,EAAAA,QAAQ,EAAEU,SAAS,CAACC,GAFF;AAGlBV,EAAAA,IAAI,EAAES,SAAS,CAACE,MAHE;AAIlBV,EAAAA,KAAK,EAAEQ,SAAS,CAACE;AAJC,CAApB;AAOA,6BAAeC,IAAI,CAACf,OAAD,CAAnB;;;;"}

package/lib/esm/components/Builder/Tabs.js

@@ -7,7 +7,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 
 var Tabs = function Tabs(_ref) {
   var panel = _ref.panel,
-      tabs = _ref.tabs;
+      _ref$tabs = _ref.tabs,
+      tabs = _ref$tabs === void 0 ? [] : _ref$tabs;
 
   var _useBuilderContext = useBuilderContext(),
       activeTab = _useBuilderContext.activeTab,
@@ -57,9 +58,6 @@ Tabs.propTypes = {
   panel: PropTypes.string.isRequired,
   tabs: PropTypes.arrayOf(PropTypes.string)
 };
-Tabs.defaultProps = {
-  tabs: []
-};
 var Tabs$1 = /*#__PURE__*/memo(Tabs);
 
 export default Tabs$1;

package/lib/esm/components/Builder/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Builder/Tabs.js"],"sourcesContent":["import { Fragment, memo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\n\nconst Tabs = ({ panel, tabs }) => {\n  const {\n    activeTab,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    setActiveTab,\n  } = useBuilderContext();\n  const {\n    onAnEventTrigger,\n  } = usePropContext();\n\n  const setCurrentTab = useCallback((index, tab) => {\n    setActiveTab(panel, index);\n    onAnEventTrigger('settingTabChanged', tab);\n  }, [setActiveTab, onAnEventTrigger, panel]);\n\n  return (\n    tabs.length > 1 && (\n      <div\n        className={`toolTabs d-flex p-relative ${panel}`}\n        data-tab={tabs.length}\n      >\n        { tabs.map((tab, index) => {\n          const checked = activeTab[panel] === index\n            && ((panel === 'left' && isLeftPanelOpen) || (panel === 'right' && isRightPanelOpen));\n          return (\n            <Fragment key={tab}>\n              <input\n                checked={checked}\n                className=\"toolTabs-tab\"\n                id={tab}\n                name=\"tabs\"\n                onChange={() => setCurrentTab(index, tab)}\n                tab-count={index}\n                type=\"radio\"\n              />\n              <label\n                className=\"t-normal js-tabLabel\"\n                htmlFor={tab}\n              >\n                <span>\n                  {tab}\n                </span>\n              </label>\n            </Fragment>\n          );\n        })}\n        <div\n          className=\"toolTabs-indicator p-absolute\"\n          data-tab={tabs.length}\n        />\n      </div>\n    )\n  );\n};\n\nTabs.propTypes = {\n  panel: PropTypes.string.isRequired,\n  tabs: PropTypes.arrayOf(PropTypes.string),\n};\n\nTabs.defaultProps = {\n  tabs: [],\n};\n\nexport default memo(Tabs);\n"],"names":["Tabs","panel","tabs","useBuilderContext","activeTab","isLeftPanelOpen","isRightPanelOpen","setActiveTab","usePropContext","onAnEventTrigger","setCurrentTab","useCallback","index","tab","length","_jsxs","map","checked","_jsx","propTypes","PropTypes","string","isRequired","arrayOf","defaultProps","memo"],"mappings":";;;;;;;AAKA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAAqB;AAAA,MAAlBC,KAAkB,QAAlBA,KAAkB;AAAA,MAAXC,IAAW,QAAXA,IAAW;;AAChC,2BAKIC,iBAAiB,EALrB;AAAA,MACEC,SADF,sBACEA,SADF;AAAA,MAEEC,eAFF,sBAEEA,eAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,YAJF,sBAIEA,YAJF;;AAMA,wBAEIC,cAAc,EAFlB;AAAA,MACEC,gBADF,mBACEA,gBADF;;AAIA,MAAMC,aAAa,GAAGC,WAAW,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAChDN,IAAAA,YAAY,CAACN,KAAD,EAAQW,KAAR,CAAZ;AACAH,IAAAA,gBAAgB,CAAC,mBAAD,EAAsBI,GAAtB,CAAhB;AACD,GAHgC,EAG9B,CAACN,YAAD,EAAeE,gBAAf,EAAiCR,KAAjC,CAH8B,CAAjC;AAKA,SACEC,IAAI,CAACY,MAAL,GAAc,CAAd,iBACEC;AACE,IAAA,SAAS,uCAAgCd,KAAhC,CADX;AAEE,gBAAUC,IAAI,CAACY,MAFjB;AAAA,eAIIZ,IAAI,CAACc,GAAL,CAAS,UAACH,GAAD,EAAMD,KAAN,EAAgB;AACzB,UAAMK,OAAO,GAAGb,SAAS,CAACH,KAAD,CAAT,KAAqBW,KAArB,KACTX,KAAK,KAAK,MAAV,IAAoBI,eAArB,IAA0CJ,KAAK,KAAK,OAAV,IAAqBK,gBADrD,CAAhB;AAEA,0BACES,KAAC,QAAD;AAAA,gCACEG;AACE,UAAA,OAAO,EAAED,OADX;AAEE,UAAA,SAAS,EAAC,cAFZ;AAGE,UAAA,EAAE,EAAEJ,GAHN;AAIE,UAAA,IAAI,EAAC,MAJP;AAKE,UAAA,QAAQ,EAAE;AAAA,mBAAMH,aAAa,CAACE,KAAD,EAAQC,GAAR,CAAnB;AAAA,WALZ;AAME,uBAAWD,KANb;AAOE,UAAA,IAAI,EAAC;AAPP,UADF,eAUEM;AACE,UAAA,SAAS,EAAC,sBADZ;AAEE,UAAA,OAAO,EAAEL,GAFX;AAAA,iCAIEK;AAAA,sBACGL;AADH;AAJF,UAVF;AAAA,SAAeA,GAAf,CADF;AAqBD,KAxBC,CAJJ,eA6BEK;AACE,MAAA,SAAS,EAAC,+BADZ;AAEE,kBAAUhB,IAAI,CAACY;AAFjB,MA7BF;AAAA,IAFJ;AAsCD,CAtDD;;AAwDAd,IAAI,CAACmB,SAAL,GAAiB;AACflB,EAAAA,KAAK,EAAEmB,SAAS,CAACC,MAAV,CAAiBC,UADT;AAEfpB,EAAAA,IAAI,EAAEkB,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACC,MAA5B;AAFS,CAAjB;AAKArB,IAAI,CAACwB,YAAL,GAAoB;AAClBtB,EAAAA,IAAI,EAAE;AADY,CAApB;AAIA,0BAAeuB,IAAI,CAACzB,IAAD,CAAnB;;;;"}
+{"version":3,"file":"Tabs.js","sources":["../../../../src/components/Builder/Tabs.js"],"sourcesContent":["import { Fragment, memo, useCallback } from 'react';\nimport PropTypes from 'prop-types';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\n\nconst Tabs = ({ panel, tabs = [] }) => {\n  const {\n    activeTab,\n    isLeftPanelOpen,\n    isRightPanelOpen,\n    setActiveTab,\n  } = useBuilderContext();\n  const {\n    onAnEventTrigger,\n  } = usePropContext();\n\n  const setCurrentTab = useCallback((index, tab) => {\n    setActiveTab(panel, index);\n    onAnEventTrigger('settingTabChanged', tab);\n  }, [setActiveTab, onAnEventTrigger, panel]);\n\n  return (\n    tabs.length > 1 && (\n      <div\n        className={`toolTabs d-flex p-relative ${panel}`}\n        data-tab={tabs.length}\n      >\n        { tabs.map((tab, index) => {\n          const checked = activeTab[panel] === index\n            && ((panel === 'left' && isLeftPanelOpen) || (panel === 'right' && isRightPanelOpen));\n          return (\n            <Fragment key={tab}>\n              <input\n                checked={checked}\n                className=\"toolTabs-tab\"\n                id={tab}\n                name=\"tabs\"\n                onChange={() => setCurrentTab(index, tab)}\n                tab-count={index}\n                type=\"radio\"\n              />\n              <label\n                className=\"t-normal js-tabLabel\"\n                htmlFor={tab}\n              >\n                <span>\n                  {tab}\n                </span>\n              </label>\n            </Fragment>\n          );\n        })}\n        <div\n          className=\"toolTabs-indicator p-absolute\"\n          data-tab={tabs.length}\n        />\n      </div>\n    )\n  );\n};\n\nTabs.propTypes = {\n  panel: PropTypes.string.isRequired,\n  tabs: PropTypes.arrayOf(PropTypes.string),\n};\n\nexport default memo(Tabs);\n"],"names":["Tabs","panel","tabs","useBuilderContext","activeTab","isLeftPanelOpen","isRightPanelOpen","setActiveTab","usePropContext","onAnEventTrigger","setCurrentTab","useCallback","index","tab","length","_jsxs","map","checked","_jsx","propTypes","PropTypes","string","isRequired","arrayOf","memo"],"mappings":";;;;;;;AAKA,IAAMA,IAAI,GAAG,SAAPA,IAAO,OAA0B;AAAA,MAAvBC,KAAuB,QAAvBA,KAAuB;AAAA,uBAAhBC,IAAgB;AAAA,MAAhBA,IAAgB,0BAAT,EAAS;;AACrC,2BAKIC,iBAAiB,EALrB;AAAA,MACEC,SADF,sBACEA,SADF;AAAA,MAEEC,eAFF,sBAEEA,eAFF;AAAA,MAGEC,gBAHF,sBAGEA,gBAHF;AAAA,MAIEC,YAJF,sBAIEA,YAJF;;AAMA,wBAEIC,cAAc,EAFlB;AAAA,MACEC,gBADF,mBACEA,gBADF;;AAIA,MAAMC,aAAa,GAAGC,WAAW,CAAC,UAACC,KAAD,EAAQC,GAAR,EAAgB;AAChDN,IAAAA,YAAY,CAACN,KAAD,EAAQW,KAAR,CAAZ;AACAH,IAAAA,gBAAgB,CAAC,mBAAD,EAAsBI,GAAtB,CAAhB;AACD,GAHgC,EAG9B,CAACN,YAAD,EAAeE,gBAAf,EAAiCR,KAAjC,CAH8B,CAAjC;AAKA,SACEC,IAAI,CAACY,MAAL,GAAc,CAAd,iBACEC;AACE,IAAA,SAAS,uCAAgCd,KAAhC,CADX;AAEE,gBAAUC,IAAI,CAACY,MAFjB;AAAA,eAIIZ,IAAI,CAACc,GAAL,CAAS,UAACH,GAAD,EAAMD,KAAN,EAAgB;AACzB,UAAMK,OAAO,GAAGb,SAAS,CAACH,KAAD,CAAT,KAAqBW,KAArB,KACTX,KAAK,KAAK,MAAV,IAAoBI,eAArB,IAA0CJ,KAAK,KAAK,OAAV,IAAqBK,gBADrD,CAAhB;AAEA,0BACES,KAAC,QAAD;AAAA,gCACEG;AACE,UAAA,OAAO,EAAED,OADX;AAEE,UAAA,SAAS,EAAC,cAFZ;AAGE,UAAA,EAAE,EAAEJ,GAHN;AAIE,UAAA,IAAI,EAAC,MAJP;AAKE,UAAA,QAAQ,EAAE;AAAA,mBAAMH,aAAa,CAACE,KAAD,EAAQC,GAAR,CAAnB;AAAA,WALZ;AAME,uBAAWD,KANb;AAOE,UAAA,IAAI,EAAC;AAPP,UADF,eAUEM;AACE,UAAA,SAAS,EAAC,sBADZ;AAEE,UAAA,OAAO,EAAEL,GAFX;AAAA,iCAIEK;AAAA,sBACGL;AADH;AAJF,UAVF;AAAA,SAAeA,GAAf,CADF;AAqBD,KAxBC,CAJJ,eA6BEK;AACE,MAAA,SAAS,EAAC,+BADZ;AAEE,kBAAUhB,IAAI,CAACY;AAFjB,MA7BF;AAAA,IAFJ;AAsCD,CAtDD;;AAwDAd,IAAI,CAACmB,SAAL,GAAiB;AACflB,EAAAA,KAAK,EAAEmB,SAAS,CAACC,MAAV,CAAiBC,UADT;AAEfpB,EAAAA,IAAI,EAAEkB,SAAS,CAACG,OAAV,CAAkBH,SAAS,CAACC,MAA5B;AAFS,CAAjB;AAKA,0BAAeG,IAAI,CAACxB,IAAD,CAAnB;;;;"}

package/lib/esm/components/Builder/ZoomControls.js

@@ -13,8 +13,10 @@ import SvgMinus from '../../assets/svg/minus.svg.js';
 import SvgFitScreen from '../../assets/svg/fit_screen.svg.js';
 
 var ZoomControls = function ZoomControls(_ref) {
-  var mode = _ref.mode,
-      showZoom = _ref.showZoom;
+  var _ref$mode = _ref.mode,
+      mode = _ref$mode === void 0 ? '' : _ref$mode,
+      _ref$showZoom = _ref.showZoom,
+      showZoom = _ref$showZoom === void 0 ? true : _ref$showZoom;
 
   var _useBuilderContext = useBuilderContext(),
       setZoom = _useBuilderContext.setZoom,
@@ -110,10 +112,6 @@ ZoomControls.propTypes = {
   mode: PropTypes.string,
   showZoom: PropTypes.bool
 };
-ZoomControls.defaultProps = {
-  mode: '',
-  showZoom: true
-};
 
 export default ZoomControls;
 //# sourceMappingURL=ZoomControls.js.map

package/lib/esm/components/Builder/ZoomControls.js.map

@@ -1 +1 @@
-{"version":3,"file":"ZoomControls.js","sources":["../../../../src/components/Builder/ZoomControls.js"],"sourcesContent":["import { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\nimport {\n  ZOOM_STEP,\n  ZOOM_MIN,\n  ZOOM_MAX,\n  ZOOM_MULTIPLIER,\n} from '../../constants/zoom';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst ZoomControls = ({\n  mode,\n  showZoom,\n}) => {\n  const { setZoom, zoom } = useBuilderContext();\n  const {\n    onAnEventTrigger,\n    settings,\n  } = usePropContext();\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n  const isModeCustomize = mode === 'customize';\n  const decreaseZoom = () => {\n    onAnEventTrigger('zoomOut', 'report');\n    if (zoom > (ZOOM_STEP + ZOOM_MIN)) {\n      setZoom(parseFloat((zoom - ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n    }\n  };\n  const increaseZoom = () => {\n    onAnEventTrigger('zoomIn', 'report');\n    if (zoom < (ZOOM_MAX)) {\n      setZoom(parseFloat((zoom + ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n    }\n  };\n  const fitZoom = () => {\n    const { innerHeight, innerWidth } = window;\n    const newScale = Math.min(\n      (innerWidth - 400) / reportLayoutWidth,\n      innerHeight / reportLayoutHeight,\n    );\n    let newZoom = Math.floor(newScale * 10) / 10;\n    if (newZoom < 0.5) newZoom = 0.5;\n    if (newZoom > 1) newZoom = 1;\n    onAnEventTrigger('fitZoom', 'report');\n    setZoom(newZoom, isModeCustomize, reportLayoutWidth);\n  };\n\n  const zoomValue = useMemo(() => {\n    return Number.isNaN(zoom) ? 100 : (zoom * ZOOM_MULTIPLIER).toFixed(0);\n  }, [zoom, ZOOM_MULTIPLIER]);\n\n  const { FIT_TO_SCENE, ZOOM_IN, ZOOM_OUT } = useTranslatedTexts();\n\n  return (\n    <div className={`floatingController forZoom${!showZoom ? ' hidden' : ''}`}>\n      <div className=\"floatingController-container isGray\">\n        <button\n          className=\"controllerItem isWhite\"\n          onClick={increaseZoom}\n          title={ZOOM_IN}\n          type=\"button\"\n        >\n          <icons.plus className=\"jfReportSVG controllerItem-icon\" />\n        </button>\n        <div className=\"controllerIndicator\">\n          {zoomValue}\n          %\n        </div>\n        <button\n          className=\"controllerItem isWhite\"\n          onClick={decreaseZoom}\n          title={ZOOM_OUT}\n          type=\"button\"\n        >\n          <icons.minus className=\"jfReportSVG controllerItem-icon\" />\n        </button>\n      </div>\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem isSingle\"\n          onClick={fitZoom}\n          title={FIT_TO_SCENE}\n          type=\"button\"\n        >\n          <icons.fit className=\"jfReportSVG icon-fit\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n\nZoomControls.propTypes = {\n  mode: PropTypes.string,\n  showZoom: PropTypes.bool,\n};\n\nZoomControls.defaultProps = {\n  mode: '',\n  showZoom: true,\n};\n\nexport default ZoomControls;\n"],"names":["ZoomControls","mode","showZoom","useBuilderContext","setZoom","zoom","usePropContext","onAnEventTrigger","settings","reportLayoutHeight","reportLayoutWidth","isModeCustomize","decreaseZoom","ZOOM_STEP","ZOOM_MIN","parseFloat","toFixed","increaseZoom","ZOOM_MAX","fitZoom","window","innerHeight","innerWidth","newScale","Math","min","newZoom","floor","zoomValue","useMemo","Number","isNaN","ZOOM_MULTIPLIER","useTranslatedTexts","FIT_TO_SCENE","ZOOM_IN","ZOOM_OUT","_jsxs","_jsx","icons.plus","icons.minus","icons.fit","propTypes","PropTypes","string","bool","defaultProps"],"mappings":"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"}
+{"version":3,"file":"ZoomControls.js","sources":["../../../../src/components/Builder/ZoomControls.js"],"sourcesContent":["import { useMemo } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { useBuilderContext } from '../../utils/builderContext';\nimport { usePropContext } from '../../utils/propContext';\nimport {\n  ZOOM_STEP,\n  ZOOM_MIN,\n  ZOOM_MAX,\n  ZOOM_MULTIPLIER,\n} from '../../constants/zoom';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst ZoomControls = ({\n  mode = '',\n  showZoom = true,\n}) => {\n  const { setZoom, zoom } = useBuilderContext();\n  const {\n    onAnEventTrigger,\n    settings,\n  } = usePropContext();\n  const { reportLayoutHeight = 794, reportLayoutWidth = 1123 } = settings;\n  const isModeCustomize = mode === 'customize';\n  const decreaseZoom = () => {\n    onAnEventTrigger('zoomOut', 'report');\n    if (zoom > (ZOOM_STEP + ZOOM_MIN)) {\n      setZoom(parseFloat((zoom - ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n    }\n  };\n  const increaseZoom = () => {\n    onAnEventTrigger('zoomIn', 'report');\n    if (zoom < (ZOOM_MAX)) {\n      setZoom(parseFloat((zoom + ZOOM_STEP).toFixed(1)), isModeCustomize, reportLayoutWidth);\n    }\n  };\n  const fitZoom = () => {\n    const { innerHeight, innerWidth } = window;\n    const newScale = Math.min(\n      (innerWidth - 400) / reportLayoutWidth,\n      innerHeight / reportLayoutHeight,\n    );\n    let newZoom = Math.floor(newScale * 10) / 10;\n    if (newZoom < 0.5) newZoom = 0.5;\n    if (newZoom > 1) newZoom = 1;\n    onAnEventTrigger('fitZoom', 'report');\n    setZoom(newZoom, isModeCustomize, reportLayoutWidth);\n  };\n\n  const zoomValue = useMemo(() => {\n    return Number.isNaN(zoom) ? 100 : (zoom * ZOOM_MULTIPLIER).toFixed(0);\n  }, [zoom, ZOOM_MULTIPLIER]);\n\n  const { FIT_TO_SCENE, ZOOM_IN, ZOOM_OUT } = useTranslatedTexts();\n\n  return (\n    <div className={`floatingController forZoom${!showZoom ? ' hidden' : ''}`}>\n      <div className=\"floatingController-container isGray\">\n        <button\n          className=\"controllerItem isWhite\"\n          onClick={increaseZoom}\n          title={ZOOM_IN}\n          type=\"button\"\n        >\n          <icons.plus className=\"jfReportSVG controllerItem-icon\" />\n        </button>\n        <div className=\"controllerIndicator\">\n          {zoomValue}\n          %\n        </div>\n        <button\n          className=\"controllerItem isWhite\"\n          onClick={decreaseZoom}\n          title={ZOOM_OUT}\n          type=\"button\"\n        >\n          <icons.minus className=\"jfReportSVG controllerItem-icon\" />\n        </button>\n      </div>\n      <div className=\"floatingController-container\">\n        <button\n          className=\"controllerItem isSingle\"\n          onClick={fitZoom}\n          title={FIT_TO_SCENE}\n          type=\"button\"\n        >\n          <icons.fit className=\"jfReportSVG icon-fit\" />\n        </button>\n      </div>\n    </div>\n  );\n};\n\nZoomControls.propTypes = {\n  mode: PropTypes.string,\n  showZoom: PropTypes.bool,\n};\n\nexport default ZoomControls;\n"],"names":["ZoomControls","mode","showZoom","useBuilderContext","setZoom","zoom","usePropContext","onAnEventTrigger","settings","reportLayoutHeight","reportLayoutWidth","isModeCustomize","decreaseZoom","ZOOM_STEP","ZOOM_MIN","parseFloat","toFixed","increaseZoom","ZOOM_MAX","fitZoom","window","innerHeight","innerWidth","newScale","Math","min","newZoom","floor","zoomValue","useMemo","Number","isNaN","ZOOM_MULTIPLIER","useTranslatedTexts","FIT_TO_SCENE","ZOOM_IN","ZOOM_OUT","_jsxs","_jsx","icons.plus","icons.minus","icons.fit","propTypes","PropTypes","string","bool"],"mappings":"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"}

package/lib/esm/components/DraggableItem/DraggableItem.js

@@ -43,33 +43,68 @@ var reportItemStyle = {
 };
 
 var DraggableItem = function DraggableItem(_ref) {
-  var children = _ref.children,
-      guides = _ref.guides,
-      isMultipleItemSelected = _ref.isMultipleItemSelected,
-      isResize = _ref.isResize,
-      isRightPanelOpen = _ref.isRightPanelOpen,
-      isSelected = _ref.isSelected,
-      isTextEditorOpen = _ref.isTextEditorOpen,
-      item = _ref.item,
-      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;
-  var height = item.height,
-      id = item.id,
-      isLocked = item.isLocked,
-      left = item.left,
-      pageID = item.pageID,
-      top = item.top,
-      width = item.width;
+  var _ref$children = _ref.children,
+      children = _ref$children === void 0 ? null : _ref$children,
+      _ref$guides = _ref.guides,
+      guides = _ref$guides === void 0 ? {} : _ref$guides,
+      _ref$isMultipleItemSe = _ref.isMultipleItemSelected,
+      isMultipleItemSelected = _ref$isMultipleItemSe === void 0 ? false : _ref$isMultipleItemSe,
+      _ref$isResize = _ref.isResize,
+      isResize = _ref$isResize === void 0 ? false : _ref$isResize,
+      _ref$isRightPanelOpen = _ref.isRightPanelOpen,
+      isRightPanelOpen = _ref$isRightPanelOpen === void 0 ? false : _ref$isRightPanelOpen,
+      _ref$isSelected = _ref.isSelected,
+      isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+      _ref$isTextEditorOpen = _ref.isTextEditorOpen,
+      isTextEditorOpen = _ref$isTextEditorOpen === void 0 ? false : _ref$isTextEditorOpen,
+      _ref$item = _ref.item,
+      _item2 = _ref$item === void 0 ? {} : _ref$item,
+      _ref$matches = _ref.matches,
+      matches = _ref$matches === void 0 ? {} : _ref$matches,
+      _ref$onAnEventTrigger = _ref.onAnEventTrigger,
+      onAnEventTrigger = _ref$onAnEventTrigger === void 0 ? function () {} : _ref$onAnEventTrigger,
+      _ref$onItemAdd = _ref.onItemAdd,
+      onItemAdd = _ref$onItemAdd === void 0 ? function () {} : _ref$onItemAdd,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange,
+      _ref$onItemRemove = _ref.onItemRemove,
+      onItemRemove = _ref$onItemRemove === void 0 ? function () {} : _ref$onItemRemove,
+      _ref$onItemResize = _ref.onItemResize,
+      onItemResize = _ref$onItemResize === void 0 ? function () {} : _ref$onItemResize,
+      _ref$setActiveElement = _ref.setActiveElement,
+      setActiveElement = _ref$setActiveElement === void 0 ? function () {} : _ref$setActiveElement,
+      _ref$setContextMenuPr = _ref.setContextMenuProps,
+      setContextMenuProps = _ref$setContextMenuPr === void 0 ? function () {} : _ref$setContextMenuPr,
+      _ref$setIsResize = _ref.setIsResize,
+      setIsResize = _ref$setIsResize === void 0 ? function () {} : _ref$setIsResize,
+      _ref$setIsRightPanelO = _ref.setIsRightPanelOpen,
+      setIsRightPanelOpen = _ref$setIsRightPanelO === void 0 ? function () {} : _ref$setIsRightPanelO,
+      _ref$setMatches = _ref.setMatches,
+      setMatches = _ref$setMatches === void 0 ? function () {} : _ref$setMatches,
+      _ref$zoom = _ref.zoom,
+      zoom = _ref$zoom === void 0 ? 1 : _ref$zoom;
+
+  var height = _item2.height,
+      id = _item2.id,
+      isLocked = _item2.isLocked,
+      left = _item2.left,
+      pageID = _item2.pageID,
+      top = _item2.top,
+      width = _item2.width;
+
+  var _useState = useState({
+    height: height,
+    left: left,
+    top: top,
+    width: width
+  }),
+      _useState2 = _slicedToArray(_useState, 2),
+      _useState2$ = _useState2[0],
+      stateHeight = _useState2$.height,
+      stateLeft = _useState2$.left,
+      stateTop = _useState2$.top,
+      stateWidth = _useState2$.width,
+      setResizeSize = _useState2[1];
 
   var select = function select(event) {
     if (!isSelected) {
@@ -86,7 +121,7 @@ var DraggableItem = function DraggableItem(_ref) {
     }
   };
 
-  var _canDrag = !item.isLocked && !isTextEditorOpen;
+  var _canDrag = !_item2.isLocked && !isTextEditorOpen;
 
   var _useDrag = useDrag(function () {
     return {
@@ -98,71 +133,69 @@ var DraggableItem = function DraggableItem(_ref) {
           isDragging: monitor.isDragging()
         };
       },
-      end: function end() {
+      end: function end(_item, monitor) {
+        var dropResult = monitor.getDropResult();
+
+        if (dropResult && dropResult[id]) {
+          var _dropResult$id = dropResult[id],
+              dropLeft = _dropResult$id.left,
+              dropTop = _dropResult$id.top;
+          setResizeSize(function (prev) {
+            return {
+              height: prev.height,
+              left: dropLeft,
+              top: dropTop,
+              width: prev.width
+            };
+          });
+        }
+
         removeEventListenerForSidebar();
       },
       isDragging: function isDragging() {
         return isMultipleItemSelected && isSelected || !isMultipleItemSelected && isSelected;
       },
       item: function item() {
-        return {
-          height: height,
-          id: id,
-          left: left,
-          top: top,
-          width: width
-        };
+        select();
+        addEventListenerForSidebar();
+        return _item2;
       },
       type: DRAGGABLE_ITEM_TYPE
     };
-  }, [_canDrag, height, id, left, top, width, isMultipleItemSelected, isSelected]),
+  }, [_item2, _canDrag, id, isMultipleItemSelected, isSelected]),
       _useDrag2 = _slicedToArray(_useDrag, 3),
       isDragging = _useDrag2[0].isDragging,
       drag = _useDrag2[1],
       preview = _useDrag2[2];
 
-  var _useState = useState({
-    height: height,
-    left: left,
-    top: top,
-    width: width
-  }),
-      _useState2 = _slicedToArray(_useState, 2),
-      _useState2$ = _useState2[0],
-      stateHeight = _useState2$.height,
-      stateLeft = _useState2$.left,
-      stateTop = _useState2$.top,
-      stateWidth = _useState2$.width,
-      setResizeSize = _useState2[1];
-
-  useEffect(function () {
-    if (!isDragging) return;
-    if (!isSelected) select();
-    addEventListenerForSidebar();
-    return function () {
-      removeEventListenerForSidebar();
-    };
-  }, [isDragging, isSelected, select]);
   useEffect(function () {
-    preview(getEmptyImage(), {
-      captureDraggingState: true
-    });
+    if (preview) {
+      preview(getEmptyImage(), {
+        captureDraggingState: true
+      });
+    }
   }, [preview]);
   useEffect(function () {
-    if (width !== stateWidth || height !== stateHeight || left !== stateLeft || top !== stateTop) {
-      setResizeSize({
-        height: height,
-        left: left,
-        top: top,
-        width: width
+    if (!isResize) {
+      setResizeSize(function (prev) {
+        if (prev.left !== left || prev.top !== top || prev.width !== width || prev.height !== height) {
+          return _objectSpread(_objectSpread({}, prev), {}, {
+            height: height,
+            left: left,
+            top: top,
+            width: width
+          });
+        }
+
+        return prev;
       });
     }
-  }, [width, height, left, top, stateWidth, stateHeight, stateLeft, stateTop]);
+  }, [left, top, width, height, isResize]);
 
   var onResizeStop = function onResizeStop(deltaWidth, deltaHeight, direction) {
-    var activeItem = _objectSpread(_objectSpread({}, item), {}, {
-      height: item.height + deltaHeight,
-      width: item.width + deltaWidth
+    var activeItem = _objectSpread(_objectSpread({}, _item2), {}, {
+      height: _item2.height + deltaHeight,
+      width: _item2.width + deltaWidth
     });
 
     if (/left/i.test(direction)) activeItem.left = activeItem.left - deltaWidth;
@@ -212,7 +245,7 @@ var DraggableItem = function DraggableItem(_ref) {
     }
 
     setIsResize(false);
-    onItemResize(item, newResizeSize);
+    onItemResize(_item2, newResizeSize);
   };
 
   var onResize = function onResize(deltaWidth, deltaHeight, direction) {
@@ -220,20 +253,20 @@ var DraggableItem = function DraggableItem(_ref) {
       setIsResize(true);
     }
 
-    var activeItem = _objectSpread(_objectSpread({}, item), {}, {
-      height: item.height + deltaHeight,
-      width: item.width + deltaWidth
+    var activeItem = _objectSpread(_objectSpread({}, _item2), {}, {
+      height: _item2.height + deltaHeight,
+      width: _item2.width + deltaWidth
     });
 
     if (/left/i.test(direction)) activeItem.left = activeItem.left - deltaWidth;
     if (/top/i.test(direction)) activeItem.top = activeItem.top - deltaHeight;
 
-    var _guides = _objectSpread(_objectSpread({}, guides), {}, _defineProperty({}, item.id, _objectSpread(_objectSpread({}, guides[item.id]), {}, {
+    var _guides = _objectSpread(_objectSpread({}, guides), {}, _defineProperty({}, _item2.id, _objectSpread(_objectSpread({}, guides[_item2.id]), {}, {
       x: calculateGuidePositions(activeItem, 'x', zoom),
       y: calculateGuidePositions(activeItem, 'y', zoom)
     })));
 
-    setMatches(proximityListener(item.id, _guides));
+    setMatches(proximityListener(_item2.id, _guides));
     setResizeSize({
       height: activeItem.height,
       left: activeItem.left,
@@ -245,18 +278,18 @@ var DraggableItem = function DraggableItem(_ref) {
   var deleteItem = function deleteItem() {
     setIsRightPanelOpen(false);
     setActiveElement(null);
-    onItemRemove(item);
-    onAnEventTrigger('removeItem', item.itemType);
+    onItemRemove(_item2);
+    onAnEventTrigger('removeItem', _item2.itemType);
   };
 
   var duplicateItem = function duplicateItem() {
     var itemID = generateId();
-    onItemAdd(_objectSpread(_objectSpread({}, item), {}, {
+    onItemAdd(_objectSpread(_objectSpread({}, _item2), {}, {
       id: itemID,
-      left: item.left + 50,
-      top: item.top + 50
+      left: _item2.left + 50,
+      top: _item2.top + 50
     }));
-    onAnEventTrigger('duplicateItem', item.itemType);
+    onAnEventTrigger('duplicateItem', _item2.itemType);
     setActiveElement(itemID);
 
     if (!isRightPanelOpen) {
@@ -288,7 +321,7 @@ var DraggableItem = function DraggableItem(_ref) {
     }
 
     e.preventDefault();
-    onAnEventTrigger('openContextMenu', item.itemType);
+    onAnEventTrigger('openContextMenu', _item2.itemType);
     setContextMenuProps({
       id: id,
       pageID: pageID,
@@ -308,7 +341,7 @@ var DraggableItem = function DraggableItem(_ref) {
   var duplicateWithAltKey = function duplicateWithAltKey(e) {
     if (e.altKey) {
       var itemID = generateId();
-      var itemToAdd = item;
+      var itemToAdd = _item2;
       setTimeout(function () {
         onItemAdd(_objectSpread(_objectSpread({}, itemToAdd), {}, {
           id: itemID,
@@ -321,15 +354,15 @@ var DraggableItem = function DraggableItem(_ref) {
   };
 
   var changeLockStatus = function changeLockStatus() {
-    onAnEventTrigger(item.isLocked ? 'unlockReportItem' : 'lockReportItem', item.itemType);
+    onAnEventTrigger(_item2.isLocked ? 'unlockReportItem' : 'lockReportItem', _item2.itemType);
     onItemChange({
-      id: item.id
+      id: _item2.id
     }, {
-      isLocked: item.isLocked ? false : true
+      isLocked: _item2.isLocked ? false : true
     });
 
-    if (!item.isLocked) {
-      setActiveElement(item.id, false);
+    if (!_item2.isLocked) {
+      setActiveElement(_item2.id, false);
       setIsRightPanelOpen(false);
     }
   };
@@ -346,11 +379,10 @@ var DraggableItem = function DraggableItem(_ref) {
       children: /*#__PURE__*/jsx("div", {
         ref: drag,
         className: "".concat(reportItem).concat(isLocked ? ' isLocked' : ''),
-        onClick: select,
         onContextMenu: onContextMenuClick,
         onDoubleClick: onDoubleClick,
         onDragStart: duplicateWithAltKey,
-        onKeyDown: function onKeyDown() {},
+        onMouseDown: select,
         style: reportItemStyle,
         children: children
       })
@@ -363,7 +395,7 @@ var DraggableItem = function DraggableItem(_ref) {
       isRightPanelOpen: isRightPanelOpen,
       isSelectedElement: isSelected,
       isTextEditorOpen: isTextEditorOpen,
-      item: item,
+      item: _item2,
       onClickOutside: onClickOutside,
       onResize: onResize,
       onResizeStop: onResizeStop,
@@ -409,28 +441,6 @@ DraggableItem.propTypes = {
   setIsRightPanelOpen: PropTypes.func,
   setMatches: PropTypes.func,
   zoom: PropTypes.number
-};
-DraggableItem.defaultProps = {
-  children: null,
-  guides: {},
-  isMultipleItemSelected: false,
-  isResize: false,
-  isRightPanelOpen: false,
-  isSelected: false,
-  isTextEditorOpen: false,
-  item: {},
-  matches: {},
-  onAnEventTrigger: function onAnEventTrigger() {},
-  onItemAdd: function onItemAdd() {},
-  onItemChange: function onItemChange() {},
-  onItemRemove: function onItemRemove() {},
-  onItemResize: function onItemResize() {},
-  setActiveElement: function setActiveElement() {},
-  setContextMenuProps: function setContextMenuProps() {},
-  setIsResize: function setIsResize() {},
-  setIsRightPanelOpen: function setIsRightPanelOpen() {},
-  setMatches: function setMatches() {},
-  zoom: 1
 }; // avoid unnecessary renders while resizing
 
 var areEqual = function areEqual(prevProps, nextProps) {