@jotforminc/dnd-builder 2.9.18 → 2.9.19

package/lib/esm/components/Settings/ImagePicker/EnterURL.js

@@ -22,8 +22,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 var imageRegex = new RegExp('jpg|jpeg|png|gif', 'i');
 
 var EnterURL = function EnterURL(_ref) {
-  var item = _ref.item,
-      onItemChange = _ref.onItemChange;
+  var _ref$item = _ref.item,
+      item = _ref$item === void 0 ? '' : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange;
 
   var _useState = useState(''),
       _useState2 = _slicedToArray(_useState, 2),
@@ -96,10 +98,6 @@ EnterURL.propTypes = {
   }),
   onItemChange: PropTypes.func
 };
-EnterURL.defaultProps = {
-  item: '',
-  onItemChange: function onItemChange() {}
-};
 
 export default EnterURL;
 //# sourceMappingURL=EnterURL.js.map

package/lib/esm/components/Settings/ImagePicker/EnterURL.js.map

@@ -1 +1 @@
-{"version":3,"file":"EnterURL.js","sources":["../../../../../src/components/Settings/ImagePicker/EnterURL.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Textbox from '../Textbox';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst imageRegex = new RegExp('jpg|jpeg|png|gif', 'i');\n\nconst EnterURL = ({ item, onItemChange }) => {\n  const [url, setUrl] = useState('');\n  const [isErrored, setIsErrored] = useState(false);\n  const { ADD_LINK } = useTranslatedTexts();\n\n  const onURLChange = (_, v) => {\n    if (isErrored) {\n      setIsErrored(false);\n    }\n    setUrl(v.url);\n  };\n\n  const onSubmitURL = () => {\n    setIsErrored(false);\n    const extension = url.split('.').pop();\n    if (imageRegex.test(extension)) {\n      setIsErrored(false);\n      onItemChange(\n        { id: item.id },\n        { url },\n      );\n    } else {\n      setIsErrored(true);\n    }\n  };\n\n  return (\n    <div className=\"fileUploader-url\">\n      <Textbox\n        config={{ key: 'url' }}\n        itemID={item.id}\n        onItemChange={onURLChange}\n        placeholder=\"https://\"\n        value={url}\n      />\n      <button\n        className=\"jfReportButton isSuccess\"\n        disabled={!url}\n        onClick={onSubmitURL}\n        type=\"button\"\n      >\n        {ADD_LINK}\n      </button>\n      {isErrored && (\n        <div\n          className=\"uploadInfo isError\"\n          style={{\n            color: '#ff0000',\n            marginTop: '10px',\n            textAlign: 'center',\n          }}\n        >\n          Only jpg, jpeg, png and gif images are supported\n        </div>\n      )}\n    </div>\n  );\n};\n\nEnterURL.propTypes = {\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nEnterURL.defaultProps = {\n  item: '',\n  onItemChange: () => {},\n};\n\nexport default EnterURL;\n"],"names":["imageRegex","RegExp","EnterURL","item","onItemChange","useState","url","setUrl","isErrored","setIsErrored","useTranslatedTexts","ADD_LINK","onURLChange","_","v","onSubmitURL","extension","split","pop","test","id","_jsxs","_jsx","key","color","marginTop","textAlign","propTypes","PropTypes","shape","string","func","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,UAAU,GAAG,IAAIC,MAAJ,CAAW,kBAAX,EAA+B,GAA/B,CAAnB;;IAEMC,QAAQ,GAAG,SAAXA,QAAW,OAA4B;AAAA,MAAzBC,IAAyB,QAAzBA,IAAyB;AAAA,MAAnBC,YAAmB,QAAnBA,YAAmB;;AAC3C,kBAAsBC,QAAQ,CAAC,EAAD,CAA9B;AAAA;AAAA,MAAOC,GAAP;AAAA,MAAYC,MAAZ;;AACA,mBAAkCF,QAAQ,CAAC,KAAD,CAA1C;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,4BAAqBC,kBAAkB,EAAvC;AAAA,MAAQC,QAAR,uBAAQA,QAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAIC,CAAJ,EAAU;AAC5B,QAAIN,SAAJ,EAAe;AACbC,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACD;;AACDF,IAAAA,MAAM,CAACO,CAAC,CAACR,GAAH,CAAN;AACD,GALD;;AAOA,MAAMS,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBN,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACA,QAAMO,SAAS,GAAGV,GAAG,CAACW,KAAJ,CAAU,GAAV,EAAeC,GAAf,EAAlB;;AACA,QAAIlB,UAAU,CAACmB,IAAX,CAAgBH,SAAhB,CAAJ,EAAgC;AAC9BP,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACAL,MAAAA,YAAY,CACV;AAAEgB,QAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,OADU,EAEV;AAAEd,QAAAA,GAAG,EAAHA;AAAF,OAFU,CAAZ;AAID,KAND,MAMO;AACLG,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACD;AACF,GAZD;;AAcA,sBACEY;AAAK,IAAA,SAAS,EAAC,kBAAf;AAAA,4BACEC,IAAC,OAAD;AACE,MAAA,MAAM,EAAE;AAAEC,QAAAA,GAAG,EAAE;AAAP,OADV;AAEE,MAAA,MAAM,EAAEpB,IAAI,CAACiB,EAFf;AAGE,MAAA,YAAY,EAAER,WAHhB;AAIE,MAAA,WAAW,EAAC,UAJd;AAKE,MAAA,KAAK,EAAEN;AALT,MADF,eAQEgB;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,QAAQ,EAAE,CAAChB,GAFb;AAGE,MAAA,OAAO,EAAES,WAHX;AAIE,MAAA,IAAI,EAAC,QAJP;AAAA,gBAMGJ;AANH,MARF,EAgBGH,SAAS,iBACRc;AACE,MAAA,SAAS,EAAC,oBADZ;AAEE,MAAA,KAAK,EAAE;AACLE,QAAAA,KAAK,EAAE,SADF;AAELC,QAAAA,SAAS,EAAE,MAFN;AAGLC,QAAAA,SAAS,EAAE;AAHN,OAFT;AAAA;AAAA,MAjBJ;AAAA,IADF;AA+BD;;AAEDxB,QAAQ,CAACyB,SAAT,GAAqB;AACnBxB,EAAAA,IAAI,EAAEyB,SAAS,CAACC,KAAV,CAAgB;AACpBT,IAAAA,EAAE,EAAEQ,SAAS,CAACE;AADM,GAAhB,CADa;AAInB1B,EAAAA,YAAY,EAAEwB,SAAS,CAACG;AAJL,CAArB;AAOA7B,QAAQ,CAAC8B,YAAT,GAAwB;AACtB7B,EAAAA,IAAI,EAAE,EADgB;AAEtBC,EAAAA,YAAY,EAAE,wBAAM;AAFE,CAAxB;;;;"}
+{"version":3,"file":"EnterURL.js","sources":["../../../../../src/components/Settings/ImagePicker/EnterURL.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport Textbox from '../Textbox';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst imageRegex = new RegExp('jpg|jpeg|png|gif', 'i');\n\nconst EnterURL = ({\n  item = '',\n  onItemChange = () => {},\n}) => {\n  const [url, setUrl] = useState('');\n  const [isErrored, setIsErrored] = useState(false);\n  const { ADD_LINK } = useTranslatedTexts();\n\n  const onURLChange = (_, v) => {\n    if (isErrored) {\n      setIsErrored(false);\n    }\n    setUrl(v.url);\n  };\n\n  const onSubmitURL = () => {\n    setIsErrored(false);\n    const extension = url.split('.').pop();\n    if (imageRegex.test(extension)) {\n      setIsErrored(false);\n      onItemChange(\n        { id: item.id },\n        { url },\n      );\n    } else {\n      setIsErrored(true);\n    }\n  };\n\n  return (\n    <div className=\"fileUploader-url\">\n      <Textbox\n        config={{ key: 'url' }}\n        itemID={item.id}\n        onItemChange={onURLChange}\n        placeholder=\"https://\"\n        value={url}\n      />\n      <button\n        className=\"jfReportButton isSuccess\"\n        disabled={!url}\n        onClick={onSubmitURL}\n        type=\"button\"\n      >\n        {ADD_LINK}\n      </button>\n      {isErrored && (\n        <div\n          className=\"uploadInfo isError\"\n          style={{\n            color: '#ff0000',\n            marginTop: '10px',\n            textAlign: 'center',\n          }}\n        >\n          Only jpg, jpeg, png and gif images are supported\n        </div>\n      )}\n    </div>\n  );\n};\n\nEnterURL.propTypes = {\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nexport default EnterURL;\n"],"names":["imageRegex","RegExp","EnterURL","item","onItemChange","useState","url","setUrl","isErrored","setIsErrored","useTranslatedTexts","ADD_LINK","onURLChange","_","v","onSubmitURL","extension","split","pop","test","id","_jsxs","_jsx","key","color","marginTop","textAlign","propTypes","PropTypes","shape","string","func"],"mappings":";;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,UAAU,GAAG,IAAIC,MAAJ,CAAW,kBAAX,EAA+B,GAA/B,CAAnB;;IAEMC,QAAQ,GAAG,SAAXA,QAAW,OAGX;AAAA,uBAFJC,IAEI;AAAA,MAFJA,IAEI,0BAFG,EAEH;AAAA,+BADJC,YACI;AAAA,MADJA,YACI,kCADW,YAAM,EACjB;;AACJ,kBAAsBC,QAAQ,CAAC,EAAD,CAA9B;AAAA;AAAA,MAAOC,GAAP;AAAA,MAAYC,MAAZ;;AACA,mBAAkCF,QAAQ,CAAC,KAAD,CAA1C;AAAA;AAAA,MAAOG,SAAP;AAAA,MAAkBC,YAAlB;;AACA,4BAAqBC,kBAAkB,EAAvC;AAAA,MAAQC,QAAR,uBAAQA,QAAR;;AAEA,MAAMC,WAAW,GAAG,SAAdA,WAAc,CAACC,CAAD,EAAIC,CAAJ,EAAU;AAC5B,QAAIN,SAAJ,EAAe;AACbC,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACD;;AACDF,IAAAA,MAAM,CAACO,CAAC,CAACR,GAAH,CAAN;AACD,GALD;;AAOA,MAAMS,WAAW,GAAG,SAAdA,WAAc,GAAM;AACxBN,IAAAA,YAAY,CAAC,KAAD,CAAZ;AACA,QAAMO,SAAS,GAAGV,GAAG,CAACW,KAAJ,CAAU,GAAV,EAAeC,GAAf,EAAlB;;AACA,QAAIlB,UAAU,CAACmB,IAAX,CAAgBH,SAAhB,CAAJ,EAAgC;AAC9BP,MAAAA,YAAY,CAAC,KAAD,CAAZ;AACAL,MAAAA,YAAY,CACV;AAAEgB,QAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,OADU,EAEV;AAAEd,QAAAA,GAAG,EAAHA;AAAF,OAFU,CAAZ;AAID,KAND,MAMO;AACLG,MAAAA,YAAY,CAAC,IAAD,CAAZ;AACD;AACF,GAZD;;AAcA,sBACEY;AAAK,IAAA,SAAS,EAAC,kBAAf;AAAA,4BACEC,IAAC,OAAD;AACE,MAAA,MAAM,EAAE;AAAEC,QAAAA,GAAG,EAAE;AAAP,OADV;AAEE,MAAA,MAAM,EAAEpB,IAAI,CAACiB,EAFf;AAGE,MAAA,YAAY,EAAER,WAHhB;AAIE,MAAA,WAAW,EAAC,UAJd;AAKE,MAAA,KAAK,EAAEN;AALT,MADF,eAQEgB;AACE,MAAA,SAAS,EAAC,0BADZ;AAEE,MAAA,QAAQ,EAAE,CAAChB,GAFb;AAGE,MAAA,OAAO,EAAES,WAHX;AAIE,MAAA,IAAI,EAAC,QAJP;AAAA,gBAMGJ;AANH,MARF,EAgBGH,SAAS,iBACRc;AACE,MAAA,SAAS,EAAC,oBADZ;AAEE,MAAA,KAAK,EAAE;AACLE,QAAAA,KAAK,EAAE,SADF;AAELC,QAAAA,SAAS,EAAE,MAFN;AAGLC,QAAAA,SAAS,EAAE;AAHN,OAFT;AAAA;AAAA,MAjBJ;AAAA,IADF;AA+BD;;AAEDxB,QAAQ,CAACyB,SAAT,GAAqB;AACnBxB,EAAAA,IAAI,EAAEyB,SAAS,CAACC,KAAV,CAAgB;AACpBT,IAAAA,EAAE,EAAEQ,SAAS,CAACE;AADM,GAAhB,CADa;AAInB1B,EAAAA,YAAY,EAAEwB,SAAS,CAACG;AAJL,CAArB;;;;"}

package/lib/esm/components/Settings/ImagePicker/ImageThumbnailWithDelete.js

@@ -5,9 +5,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 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 ImageSettings = function ImageSettings(_ref) {
-  var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange;
+  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;
   return /*#__PURE__*/jsxs("div", {
     className: "imageUpload-wrapper d-flex",
     children: [/*#__PURE__*/jsx("img", {
@@ -42,11 +45,6 @@ ImageSettings.propTypes = {
   }),
   onItemChange: PropTypes.func
 };
-ImageSettings.defaultProps = {
-  config: [],
-  item: {},
-  onItemChange: function onItemChange() {}
-};
 
 export default ImageSettings;
 //# sourceMappingURL=ImageThumbnailWithDelete.js.map

package/lib/esm/components/Settings/ImagePicker/ImageThumbnailWithDelete.js.map

@@ -1 +1 @@
-{"version":3,"file":"ImageThumbnailWithDelete.js","sources":["../../../../../src/components/Settings/ImagePicker/ImageThumbnailWithDelete.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {\n  getFileName,\n} from '../../../utils/functions';\n\nconst ImageSettings = ({\n  config,\n  item,\n  onItemChange,\n}) => {\n  return (\n    <div className=\"imageUpload-wrapper d-flex\">\n      <img\n        alt=\"Thumbnail\"\n        src={item.url}\n      />\n      <div className=\"imageUpload-info\">\n        <span>{getFileName(item.url)}</span>\n        <button\n          className=\"isDanger\"\n          onClick={() => onItemChange(\n            { id: item.id },\n            { [config.key]: '' },\n          )}\n          type=\"button\"\n        >\n          Remove Image\n        </button>\n      </div>\n    </div>\n  );\n};\n\nImageSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    url: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nImageSettings.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default ImageSettings;\n"],"names":["ImageSettings","config","item","onItemChange","_jsxs","_jsx","url","getFileName","id","key","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps"],"mappings":";;;;;;IAKMA,aAAa,GAAG,SAAhBA,aAAgB,OAIhB;AAAA,MAHJC,MAGI,QAHJA,MAGI;AAAA,MAFJC,IAEI,QAFJA,IAEI;AAAA,MADJC,YACI,QADJA,YACI;AACJ,sBACEC;AAAK,IAAA,SAAS,EAAC,4BAAf;AAAA,4BACEC;AACE,MAAA,GAAG,EAAC,WADN;AAEE,MAAA,GAAG,EAAEH,IAAI,CAACI;AAFZ,MADF,eAKEF;AAAK,MAAA,SAAS,EAAC,kBAAf;AAAA,8BACEC;AAAA,kBAAOE,WAAW,CAACL,IAAI,CAACI,GAAN;AAAlB,QADF,eAEED;AACE,QAAA,SAAS,EAAC,UADZ;AAEE,QAAA,OAAO,EAAE;AAAA,iBAAMF,YAAY,CACzB;AAAEK,YAAAA,EAAE,EAAEN,IAAI,CAACM;AAAX,WADyB,sBAEtBP,MAAM,CAACQ,GAFe,EAET,EAFS,EAAlB;AAAA,SAFX;AAME,QAAA,IAAI,EAAC,QANP;AAAA;AAAA,QAFF;AAAA,MALF;AAAA,IADF;AAqBD;;AAEDT,aAAa,CAACU,SAAd,GAA0B;AACxBT,EAAAA,MAAM,EAAEU,SAAS,CAACC,KAAV,CAAgB;AACtBH,IAAAA,GAAG,EAAEE,SAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,SAAS,CAACI,OAAV,CAAkBJ,SAAS,CAACK,GAA5B;AAFa,GAAhB,CADgB;AAKxBd,EAAAA,IAAI,EAAES,SAAS,CAACC,KAAV,CAAgB;AACpBJ,IAAAA,EAAE,EAAEG,SAAS,CAACE,MADM;AAEpBP,IAAAA,GAAG,EAAEK,SAAS,CAACE;AAFK,GAAhB,CALkB;AASxBV,EAAAA,YAAY,EAAEQ,SAAS,CAACM;AATA,CAA1B;AAYAjB,aAAa,CAACkB,YAAd,GAA6B;AAC3BjB,EAAAA,MAAM,EAAE,EADmB;AAE3BC,EAAAA,IAAI,EAAE,EAFqB;AAG3BC,EAAAA,YAAY,EAAE,wBAAM;AAHO,CAA7B;;;;"}
+{"version":3,"file":"ImageThumbnailWithDelete.js","sources":["../../../../../src/components/Settings/ImagePicker/ImageThumbnailWithDelete.js"],"sourcesContent":["import PropTypes from 'prop-types';\nimport {\n  getFileName,\n} from '../../../utils/functions';\n\nconst ImageSettings = ({\n  config = {},\n  item = {},\n  onItemChange = () => {},\n}) => {\n  return (\n    <div className=\"imageUpload-wrapper d-flex\">\n      <img\n        alt=\"Thumbnail\"\n        src={item.url}\n      />\n      <div className=\"imageUpload-info\">\n        <span>{getFileName(item.url)}</span>\n        <button\n          className=\"isDanger\"\n          onClick={() => onItemChange(\n            { id: item.id },\n            { [config.key]: '' },\n          )}\n          type=\"button\"\n        >\n          Remove Image\n        </button>\n      </div>\n    </div>\n  );\n};\n\nImageSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n    url: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nexport default ImageSettings;\n"],"names":["ImageSettings","config","item","onItemChange","_jsxs","_jsx","url","getFileName","id","key","propTypes","PropTypes","shape","string","options","arrayOf","any","func"],"mappings":";;;;;;IAKMA,aAAa,GAAG,SAAhBA,aAAgB,OAIhB;AAAA,yBAHJC,MAGI;AAAA,MAHJA,MAGI,4BAHK,EAGL;AAAA,uBAFJC,IAEI;AAAA,MAFJA,IAEI,0BAFG,EAEH;AAAA,+BADJC,YACI;AAAA,MADJA,YACI,kCADW,YAAM,EACjB;AACJ,sBACEC;AAAK,IAAA,SAAS,EAAC,4BAAf;AAAA,4BACEC;AACE,MAAA,GAAG,EAAC,WADN;AAEE,MAAA,GAAG,EAAEH,IAAI,CAACI;AAFZ,MADF,eAKEF;AAAK,MAAA,SAAS,EAAC,kBAAf;AAAA,8BACEC;AAAA,kBAAOE,WAAW,CAACL,IAAI,CAACI,GAAN;AAAlB,QADF,eAEED;AACE,QAAA,SAAS,EAAC,UADZ;AAEE,QAAA,OAAO,EAAE;AAAA,iBAAMF,YAAY,CACzB;AAAEK,YAAAA,EAAE,EAAEN,IAAI,CAACM;AAAX,WADyB,sBAEtBP,MAAM,CAACQ,GAFe,EAET,EAFS,EAAlB;AAAA,SAFX;AAME,QAAA,IAAI,EAAC,QANP;AAAA;AAAA,QAFF;AAAA,MALF;AAAA,IADF;AAqBD;;AAEDT,aAAa,CAACU,SAAd,GAA0B;AACxBT,EAAAA,MAAM,EAAEU,SAAS,CAACC,KAAV,CAAgB;AACtBH,IAAAA,GAAG,EAAEE,SAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,SAAS,CAACI,OAAV,CAAkBJ,SAAS,CAACK,GAA5B;AAFa,GAAhB,CADgB;AAKxBd,EAAAA,IAAI,EAAES,SAAS,CAACC,KAAV,CAAgB;AACpBJ,IAAAA,EAAE,EAAEG,SAAS,CAACE,MADM;AAEpBP,IAAAA,GAAG,EAAEK,SAAS,CAACE;AAFK,GAAhB,CALkB;AASxBV,EAAAA,YAAY,EAAEQ,SAAS,CAACM;AATA,CAA1B;;;;"}

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

@@ -7,10 +7,14 @@ var MAX_WIDTH = 700;
 var MAX_HEIGHT = 600;
 
 var ImageUrl = function ImageUrl(_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 onBlur = function onBlur(e) {
     if (e.target.value !== value) {
@@ -62,12 +66,6 @@ ImageUrl.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.string
 };
-ImageUrl.defaultProps = {
-  config: [],
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: ''
-};
 var ImageUrl$1 = /*#__PURE__*/memo(ImageUrl);
 
 export default ImageUrl$1;

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

@@ -1 +1 @@
-{"version":3,"file":"ImageUrl.js","sources":["../../../../src/components/Settings/ImageUrl.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst MAX_WIDTH = 700;\nconst MAX_HEIGHT = 600;\n\nconst ImageUrl = ({\n  config,\n  item,\n  onItemChange,\n  value,\n}) => {\n  const onBlur = e => {\n    if (e.target.value !== value) {\n      const _value = e.target.value;\n      const image = new global.Image();\n      image.src = e.target.value;\n      image.onload = () => {\n        const { naturalHeight, naturalWidth } = image;\n        let _width = naturalWidth;\n        let _height = naturalHeight;\n\n        if (naturalWidth > MAX_WIDTH) {\n          _height = parseInt((MAX_WIDTH * naturalHeight) / naturalWidth, 10);\n          _width = MAX_WIDTH;\n        }\n\n        if (_height > MAX_HEIGHT) {\n          _width = parseInt((_width * MAX_HEIGHT) / _height, 10);\n          _height = MAX_HEIGHT;\n        }\n\n        onItemChange(\n          { id: item.id },\n          {\n            [config.key]: _value,\n            height: _height,\n            width: _width,\n          },\n        );\n      };\n    }\n  };\n\n  return (\n    <input\n      className=\"toolSection-input\"\n      defaultValue={value}\n      onBlur={onBlur}\n      type=\"text\"\n    />\n  );\n};\n\nImageUrl.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nImageUrl.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(ImageUrl);\n"],"names":["MAX_WIDTH","MAX_HEIGHT","ImageUrl","config","item","onItemChange","value","onBlur","e","target","_value","image","global","Image","src","onload","naturalHeight","naturalWidth","_width","_height","parseInt","id","key","_jsx","propTypes","PropTypes","shape","string","options","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;AAGA,IAAMA,SAAS,GAAG,GAAlB;AACA,IAAMC,UAAU,GAAG,GAAnB;;AAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAKX;AAAA,MAJJC,MAII,QAJJA,MAII;AAAA,MAHJC,IAGI,QAHJA,IAGI;AAAA,MAFJC,YAEI,QAFJA,YAEI;AAAA,MADJC,KACI,QADJA,KACI;;AACJ,MAAMC,MAAM,GAAG,SAATA,MAAS,CAAAC,CAAC,EAAI;AAClB,QAAIA,CAAC,CAACC,MAAF,CAASH,KAAT,KAAmBA,KAAvB,EAA8B;AAC5B,UAAMI,MAAM,GAAGF,CAAC,CAACC,MAAF,CAASH,KAAxB;AACA,UAAMK,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAX,EAAd;AACAF,MAAAA,KAAK,CAACG,GAAN,GAAYN,CAAC,CAACC,MAAF,CAASH,KAArB;;AACAK,MAAAA,KAAK,CAACI,MAAN,GAAe,YAAM;AAAA;;AACnB,YAAQC,aAAR,GAAwCL,KAAxC,CAAQK,aAAR;AAAA,YAAuBC,YAAvB,GAAwCN,KAAxC,CAAuBM,YAAvB;AACA,YAAIC,MAAM,GAAGD,YAAb;AACA,YAAIE,OAAO,GAAGH,aAAd;;AAEA,YAAIC,YAAY,GAAGjB,SAAnB,EAA8B;AAC5BmB,UAAAA,OAAO,GAAGC,QAAQ,CAAEpB,SAAS,GAAGgB,aAAb,GAA8BC,YAA/B,EAA6C,EAA7C,CAAlB;AACAC,UAAAA,MAAM,GAAGlB,SAAT;AACD;;AAED,YAAImB,OAAO,GAAGlB,UAAd,EAA0B;AACxBiB,UAAAA,MAAM,GAAGE,QAAQ,CAAEF,MAAM,GAAGjB,UAAV,GAAwBkB,OAAzB,EAAkC,EAAlC,CAAjB;AACAA,UAAAA,OAAO,GAAGlB,UAAV;AACD;;AAEDI,QAAAA,YAAY,CACV;AAAEgB,UAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,SADU,sDAGPlB,MAAM,CAACmB,GAHA,EAGMZ,MAHN,4CAIAS,OAJA,2CAKDD,MALC,kBAAZ;AAQD,OAvBD;AAwBD;AACF,GA9BD;;AAgCA,sBACEK;AACE,IAAA,SAAS,EAAC,mBADZ;AAEE,IAAA,YAAY,EAAEjB,KAFhB;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,IAAI,EAAC;AAJP,IADF;AAQD,CA9CD;;AAgDAL,QAAQ,CAACsB,SAAT,GAAqB;AACnBrB,EAAAA,MAAM,EAAEsB,SAAS,CAACC,KAAV,CAAgB;AACtBJ,IAAAA,GAAG,EAAEG,SAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,SAAS,CAACI,OAAV,CAAkBJ,SAAS,CAACK,GAA5B;AAFa,GAAhB,CADW;AAKnB1B,EAAAA,IAAI,EAAEqB,SAAS,CAACC,KAAV,CAAgB;AACpBL,IAAAA,EAAE,EAAEI,SAAS,CAACE;AADM,GAAhB,CALa;AAQnBtB,EAAAA,YAAY,EAAEoB,SAAS,CAACM,IARL;AASnBzB,EAAAA,KAAK,EAAEmB,SAAS,CAACE;AATE,CAArB;AAYAzB,QAAQ,CAAC8B,YAAT,GAAwB;AACtB7B,EAAAA,MAAM,EAAE,EADc;AAEtBC,EAAAA,IAAI,EAAE,EAFgB;AAGtBC,EAAAA,YAAY,EAAE,wBAAM,EAHE;AAItBC,EAAAA,KAAK,EAAE;AAJe,CAAxB;AAOA,8BAAe2B,IAAI,CAAC/B,QAAD,CAAnB;;;;"}
+{"version":3,"file":"ImageUrl.js","sources":["../../../../src/components/Settings/ImageUrl.js"],"sourcesContent":["import { memo } from 'react';\nimport PropTypes from 'prop-types';\n\nconst MAX_WIDTH = 700;\nconst MAX_HEIGHT = 600;\n\nconst ImageUrl = ({\n  config = [],\n  item = {},\n  onItemChange = () => {},\n  value = '',\n}) => {\n  const onBlur = e => {\n    if (e.target.value !== value) {\n      const _value = e.target.value;\n      const image = new global.Image();\n      image.src = e.target.value;\n      image.onload = () => {\n        const { naturalHeight, naturalWidth } = image;\n        let _width = naturalWidth;\n        let _height = naturalHeight;\n\n        if (naturalWidth > MAX_WIDTH) {\n          _height = parseInt((MAX_WIDTH * naturalHeight) / naturalWidth, 10);\n          _width = MAX_WIDTH;\n        }\n\n        if (_height > MAX_HEIGHT) {\n          _width = parseInt((_width * MAX_HEIGHT) / _height, 10);\n          _height = MAX_HEIGHT;\n        }\n\n        onItemChange(\n          { id: item.id },\n          {\n            [config.key]: _value,\n            height: _height,\n            width: _width,\n          },\n        );\n      };\n    }\n  };\n\n  return (\n    <input\n      className=\"toolSection-input\"\n      defaultValue={value}\n      onBlur={onBlur}\n      type=\"text\"\n    />\n  );\n};\n\nImageUrl.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    options: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nexport default memo(ImageUrl);\n"],"names":["MAX_WIDTH","MAX_HEIGHT","ImageUrl","config","item","onItemChange","value","onBlur","e","target","_value","image","global","Image","src","onload","naturalHeight","naturalWidth","_width","_height","parseInt","id","key","_jsx","propTypes","PropTypes","shape","string","options","arrayOf","any","func","memo"],"mappings":";;;;;AAGA,IAAMA,SAAS,GAAG,GAAlB;AACA,IAAMC,UAAU,GAAG,GAAnB;;AAEA,IAAMC,QAAQ,GAAG,SAAXA,QAAW,OAKX;AAAA,yBAJJC,MAII;AAAA,MAJJA,MAII,4BAJK,EAIL;AAAA,uBAHJC,IAGI;AAAA,MAHJA,IAGI,0BAHG,EAGH;AAAA,+BAFJC,YAEI;AAAA,MAFJA,YAEI,kCAFW,YAAM,EAEjB;AAAA,wBADJC,KACI;AAAA,MADJA,KACI,2BADI,EACJ;;AACJ,MAAMC,MAAM,GAAG,SAATA,MAAS,CAAAC,CAAC,EAAI;AAClB,QAAIA,CAAC,CAACC,MAAF,CAASH,KAAT,KAAmBA,KAAvB,EAA8B;AAC5B,UAAMI,MAAM,GAAGF,CAAC,CAACC,MAAF,CAASH,KAAxB;AACA,UAAMK,KAAK,GAAG,IAAIC,MAAM,CAACC,KAAX,EAAd;AACAF,MAAAA,KAAK,CAACG,GAAN,GAAYN,CAAC,CAACC,MAAF,CAASH,KAArB;;AACAK,MAAAA,KAAK,CAACI,MAAN,GAAe,YAAM;AAAA;;AACnB,YAAQC,aAAR,GAAwCL,KAAxC,CAAQK,aAAR;AAAA,YAAuBC,YAAvB,GAAwCN,KAAxC,CAAuBM,YAAvB;AACA,YAAIC,MAAM,GAAGD,YAAb;AACA,YAAIE,OAAO,GAAGH,aAAd;;AAEA,YAAIC,YAAY,GAAGjB,SAAnB,EAA8B;AAC5BmB,UAAAA,OAAO,GAAGC,QAAQ,CAAEpB,SAAS,GAAGgB,aAAb,GAA8BC,YAA/B,EAA6C,EAA7C,CAAlB;AACAC,UAAAA,MAAM,GAAGlB,SAAT;AACD;;AAED,YAAImB,OAAO,GAAGlB,UAAd,EAA0B;AACxBiB,UAAAA,MAAM,GAAGE,QAAQ,CAAEF,MAAM,GAAGjB,UAAV,GAAwBkB,OAAzB,EAAkC,EAAlC,CAAjB;AACAA,UAAAA,OAAO,GAAGlB,UAAV;AACD;;AAEDI,QAAAA,YAAY,CACV;AAAEgB,UAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,SADU,sDAGPlB,MAAM,CAACmB,GAHA,EAGMZ,MAHN,4CAIAS,OAJA,2CAKDD,MALC,kBAAZ;AAQD,OAvBD;AAwBD;AACF,GA9BD;;AAgCA,sBACEK;AACE,IAAA,SAAS,EAAC,mBADZ;AAEE,IAAA,YAAY,EAAEjB,KAFhB;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,IAAI,EAAC;AAJP,IADF;AAQD,CA9CD;;AAgDAL,QAAQ,CAACsB,SAAT,GAAqB;AACnBrB,EAAAA,MAAM,EAAEsB,SAAS,CAACC,KAAV,CAAgB;AACtBJ,IAAAA,GAAG,EAAEG,SAAS,CAACE,MADO;AAEtBC,IAAAA,OAAO,EAAEH,SAAS,CAACI,OAAV,CAAkBJ,SAAS,CAACK,GAA5B;AAFa,GAAhB,CADW;AAKnB1B,EAAAA,IAAI,EAAEqB,SAAS,CAACC,KAAV,CAAgB;AACpBL,IAAAA,EAAE,EAAEI,SAAS,CAACE;AADM,GAAhB,CALa;AAQnBtB,EAAAA,YAAY,EAAEoB,SAAS,CAACM,IARL;AASnBzB,EAAAA,KAAK,EAAEmB,SAAS,CAACE;AATE,CAArB;AAYA,8BAAeK,IAAI,CAAC9B,QAAD,CAAnB;;;;"}

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

@@ -28,8 +28,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var LayoutSizeSettings = function LayoutSizeSettings(_ref) {
   var config = _ref.config,
-      item = _ref.item,
-      onItemChange = _ref.onItemChange;
+      _ref$item = _ref.item,
+      item = _ref$item === void 0 ? {} : _ref$item,
+      _ref$onItemChange = _ref.onItemChange,
+      onItemChange = _ref$onItemChange === void 0 ? function () {} : _ref$onItemChange;
 
   var _useState = useState(true),
       _useState2 = _slicedToArray(_useState, 2),
@@ -170,10 +172,6 @@ LayoutSizeSettings.propTypes = {
   }),
   onItemChange: PropTypes.func
 };
-LayoutSizeSettings.defaultProps = {
-  item: {},
-  onItemChange: function onItemChange() {}
-};
 
 export default LayoutSizeSettings;
 //# sourceMappingURL=LayoutSizeSettings.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"LayoutSizeSettings.js","sources":["../../../../src/components/Settings/LayoutSizeSettings.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst LayoutSizeSettings = ({ config, item, onItemChange }) => {\n  const [aspectLock, setAspectLock] = useState(true);\n  const { HEIGHT, WIDTH } = useTranslatedTexts();\n\n  const { reportLayoutHeight: layoutHeight, reportLayoutWidth: layoutWidth } = item;\n\n  const initialWidth = parseInt(layoutWidth, 10);\n  const initialHeight = parseInt(layoutHeight, 10);\n\n  const [sizes, setSizes] = useState({\n    height: initialHeight,\n    width: initialWidth,\n  });\n\n  const initialAspect = initialWidth / initialHeight;\n\n  const onChange = e => {\n    const property = e.target.getAttribute('name');\n    const newValue = e.target.value;\n    if (aspectLock) {\n      if (property === 'width') {\n        setSizes({\n          ...sizes,\n          height: Number(newValue / initialAspect),\n          [property]: parseInt(newValue, 10),\n        });\n      } else {\n        setSizes({\n          ...sizes,\n          [property]: parseInt(newValue, 10),\n          width: Number(newValue * initialAspect),\n        });\n      }\n    } else {\n      setSizes({\n        ...sizes,\n        [property]: parseInt(newValue, 10),\n      });\n    }\n  };\n\n  const onBlur = () => {\n    const newWidth = sizes.width < 200 ? 200 : sizes.width;\n    const newHeight = sizes.height < 100 ? 100 : sizes.height;\n    setSizes({\n      height: newHeight,\n      width: newWidth,\n    });\n    onItemChange(\n      { id: item.id },\n      {\n        [config.key]: `${roundForDecimalPart(newWidth)}x${roundForDecimalPart(newHeight)}`,\n      },\n    );\n  };\n\n  const onKeyDown = e => {\n    if (e.keyCode === 13) {\n      onBlur();\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              name=\"width\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              name=\"height\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n    </>\n  );\n};\n\nLayoutSizeSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n  }).isRequired,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    reportLayout: PropTypes.string,\n    reportLayoutHeight: PropTypes.string,\n    reportLayoutWidth: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nLayoutSizeSettings.defaultProps = {\n  item: {},\n  onItemChange: () => {},\n};\n\nexport default LayoutSizeSettings;\n"],"names":["LayoutSizeSettings","config","item","onItemChange","useState","aspectLock","setAspectLock","useTranslatedTexts","HEIGHT","WIDTH","layoutHeight","reportLayoutHeight","layoutWidth","reportLayoutWidth","initialWidth","parseInt","initialHeight","height","width","sizes","setSizes","initialAspect","onChange","e","property","target","getAttribute","newValue","value","Number","onBlur","newWidth","newHeight","id","key","roundForDecimalPart","onKeyDown","keyCode","_jsx","_jsxs","icons.lock","icons.unlock","propTypes","PropTypes","shape","string","isRequired","number","reportLayout","shapeType","url","func","defaultProps"],"mappings":"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"}
+{"version":3,"file":"LayoutSizeSettings.js","sources":["../../../../src/components/Settings/LayoutSizeSettings.js"],"sourcesContent":["import { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport * as icons from '../../utils/icons';\nimport { roundForDecimalPart } from '../../utils/functions';\nimport { useTranslatedTexts } from '../../utils/hooks';\n\nconst LayoutSizeSettings = ({\n  config,\n  item = {},\n  onItemChange = () => {},\n}) => {\n  const [aspectLock, setAspectLock] = useState(true);\n  const { HEIGHT, WIDTH } = useTranslatedTexts();\n\n  const { reportLayoutHeight: layoutHeight, reportLayoutWidth: layoutWidth } = item;\n\n  const initialWidth = parseInt(layoutWidth, 10);\n  const initialHeight = parseInt(layoutHeight, 10);\n\n  const [sizes, setSizes] = useState({\n    height: initialHeight,\n    width: initialWidth,\n  });\n\n  const initialAspect = initialWidth / initialHeight;\n\n  const onChange = e => {\n    const property = e.target.getAttribute('name');\n    const newValue = e.target.value;\n    if (aspectLock) {\n      if (property === 'width') {\n        setSizes({\n          ...sizes,\n          height: Number(newValue / initialAspect),\n          [property]: parseInt(newValue, 10),\n        });\n      } else {\n        setSizes({\n          ...sizes,\n          [property]: parseInt(newValue, 10),\n          width: Number(newValue * initialAspect),\n        });\n      }\n    } else {\n      setSizes({\n        ...sizes,\n        [property]: parseInt(newValue, 10),\n      });\n    }\n  };\n\n  const onBlur = () => {\n    const newWidth = sizes.width < 200 ? 200 : sizes.width;\n    const newHeight = sizes.height < 100 ? 100 : sizes.height;\n    setSizes({\n      height: newHeight,\n      width: newWidth,\n    });\n    onItemChange(\n      { id: item.id },\n      {\n        [config.key]: `${roundForDecimalPart(newWidth)}x${roundForDecimalPart(newHeight)}`,\n      },\n    );\n  };\n\n  const onKeyDown = e => {\n    if (e.keyCode === 13) {\n      onBlur();\n    }\n  };\n\n  return (\n    <>\n      <div className=\"toolSection-wrapper d-flex\">\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"width-input\"\n              name=\"width\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.width)}\n            />\n            <span className=\"toolSection-subLabel\">{WIDTH}</span>\n          </label>\n        </div>\n        <div className=\"toolSection-subItem hasAspect\">\n          <button\n            className=\"p-relative forAspect\"\n            onClick={() => setAspectLock(!aspectLock)}\n            type=\"button\"\n          >\n            {aspectLock\n              ? <icons.lock className=\"jfReportSVG icon-aspectLock\" />\n              : <icons.unlock className=\"jfReportSVG icon-aspectUnlock\" />}\n          </button>\n        </div>\n        <div className=\"toolSection-subItem\">\n          <label\n            className=\"d-flex dir-col hasUnit isPixel\"\n            htmlFor=\"width-input\"\n          >\n            <input\n              className=\"toolSection-input\"\n              id=\"height-input\"\n              name=\"height\"\n              onBlur={onBlur}\n              onChange={onChange}\n              onKeyDown={onKeyDown}\n              step=\"any\"\n              type=\"number\"\n              value={roundForDecimalPart(sizes.height)}\n            />\n            <span className=\"toolSection-subLabel\">{HEIGHT}</span>\n          </label>\n        </div>\n      </div>\n    </>\n  );\n};\n\nLayoutSizeSettings.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n  }).isRequired,\n  item: PropTypes.shape({\n    height: PropTypes.number,\n    id: PropTypes.string,\n    reportLayout: PropTypes.string,\n    reportLayoutHeight: PropTypes.string,\n    reportLayoutWidth: PropTypes.string,\n    shapeType: PropTypes.string,\n    url: PropTypes.string,\n    width: PropTypes.number,\n  }),\n  onItemChange: PropTypes.func,\n};\n\nexport default LayoutSizeSettings;\n"],"names":["LayoutSizeSettings","config","item","onItemChange","useState","aspectLock","setAspectLock","useTranslatedTexts","HEIGHT","WIDTH","layoutHeight","reportLayoutHeight","layoutWidth","reportLayoutWidth","initialWidth","parseInt","initialHeight","height","width","sizes","setSizes","initialAspect","onChange","e","property","target","getAttribute","newValue","value","Number","onBlur","newWidth","newHeight","id","key","roundForDecimalPart","onKeyDown","keyCode","_jsx","_jsxs","icons.lock","icons.unlock","propTypes","PropTypes","shape","string","isRequired","number","reportLayout","shapeType","url","func"],"mappings":"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"}

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

@@ -24,10 +24,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 Orientation = function Orientation(_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 multipleSelect = config.multipleSelect,
       options = config.options,
       optionsDisplay = config.optionsDisplay;
@@ -98,12 +102,6 @@ Orientation.propTypes = {
   onItemChange: PropTypes.func,
   value: PropTypes.string
 };
-Orientation.defaultProps = {
-  config: [],
-  item: {},
-  onItemChange: function onItemChange() {},
-  value: ''
-};
 var Orientation$1 = /*#__PURE__*/memo(Orientation);
 
 export default Orientation$1;

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

@@ -1 +1 @@
-{"version":3,"file":"Orientation.js","sources":["../../../../src/components/Settings/Orientation.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { safeJSONParse } from '../../utils/functions';\n\nconst Orientation = ({\n  config, item, onItemChange, value,\n}) => {\n  const { multipleSelect, options, optionsDisplay } = config;\n  const exactValue = !multipleSelect ? value : safeJSONParse(value, []);\n  const onClick = type => {\n    return () => {\n      let newValue = type;\n      if (multipleSelect) {\n        newValue = [...exactValue];\n        if (exactValue.includes(type)) {\n          newValue = newValue.filter(v => v !== type);\n        } else {\n          newValue.push(type);\n        }\n        newValue = JSON.stringify(newValue);\n      }\n      if (newValue !== value) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue },\n        );\n      }\n    };\n  };\n  return (\n    <div className=\"toolSection-orientation d-flex dir-row\">\n      {options.map(option => {\n        const key = option.value ? option.value : option;\n        return (\n          <button\n            key={key}\n            className={classNames(\n              'toolSection-orientationItem',\n              'd-flex',\n              'j-center',\n              {\n                isSelected: !multipleSelect\n                  ? exactValue === key\n                  : exactValue && exactValue.includes(key),\n              },\n            )}\n            data-orientation={key}\n            onClick={onClick(key)}\n            type=\"button\"\n          >\n            {optionsDisplay ? optionsDisplay.map(display => (\n              <Fragment key={display}>\n                <span className=\"orientationIcon d-flex a-center j-center\">\n                  {option[display]}\n                </span>\n                <span>\n                  {key.charAt(0).toUpperCase() + key.slice(1)}\n                </span>\n              </Fragment>\n            )) : option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nOrientation.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    multipleSelect: PropTypes.bool,\n    options: PropTypes.arrayOf(PropTypes.any),\n    optionsDisplay: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nOrientation.defaultProps = {\n  config: [],\n  item: {},\n  onItemChange: () => {},\n  value: '',\n};\n\nexport default memo(Orientation);\n"],"names":["Orientation","config","item","onItemChange","value","multipleSelect","options","optionsDisplay","exactValue","safeJSONParse","onClick","type","newValue","includes","filter","v","push","JSON","stringify","id","key","_jsx","map","option","classNames","isSelected","display","_jsxs","charAt","toUpperCase","slice","label","propTypes","PropTypes","shape","string","bool","arrayOf","any","func","defaultProps","memo"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAKA,IAAMA,WAAW,GAAG,SAAdA,WAAc,OAEd;AAAA,MADJC,MACI,QADJA,MACI;AAAA,MADIC,IACJ,QADIA,IACJ;AAAA,MADUC,YACV,QADUA,YACV;AAAA,MADwBC,KACxB,QADwBA,KACxB;AACJ,MAAQC,cAAR,GAAoDJ,MAApD,CAAQI,cAAR;AAAA,MAAwBC,OAAxB,GAAoDL,MAApD,CAAwBK,OAAxB;AAAA,MAAiCC,cAAjC,GAAoDN,MAApD,CAAiCM,cAAjC;AACA,MAAMC,UAAU,GAAG,CAACH,cAAD,GAAkBD,KAAlB,GAA0BK,aAAa,CAACL,KAAD,EAAQ,EAAR,CAA1D;;AACA,MAAMM,OAAO,GAAG,SAAVA,OAAU,CAAAC,IAAI,EAAI;AACtB,WAAO,YAAM;AACX,UAAIC,QAAQ,GAAGD,IAAf;;AACA,UAAIN,cAAJ,EAAoB;AAClBO,QAAAA,QAAQ,sBAAOJ,UAAP,CAAR;;AACA,YAAIA,UAAU,CAACK,QAAX,CAAoBF,IAApB,CAAJ,EAA+B;AAC7BC,UAAAA,QAAQ,GAAGA,QAAQ,CAACE,MAAT,CAAgB,UAAAC,CAAC;AAAA,mBAAIA,CAAC,KAAKJ,IAAV;AAAA,WAAjB,CAAX;AACD,SAFD,MAEO;AACLC,UAAAA,QAAQ,CAACI,IAAT,CAAcL,IAAd;AACD;;AACDC,QAAAA,QAAQ,GAAGK,IAAI,CAACC,SAAL,CAAeN,QAAf,CAAX;AACD;;AACD,UAAIA,QAAQ,KAAKR,KAAjB,EAAwB;AACtBD,QAAAA,YAAY,CACV;AAAEgB,UAAAA,EAAE,EAAEjB,IAAI,CAACiB;AAAX,SADU,sBAEPlB,MAAM,CAACmB,GAFA,EAEMR,QAFN,EAAZ;AAID;AACF,KAjBD;AAkBD,GAnBD;;AAoBA,sBACES;AAAK,IAAA,SAAS,EAAC,wCAAf;AAAA,cACGf,OAAO,CAACgB,GAAR,CAAY,UAAAC,MAAM,EAAI;AACrB,UAAMH,GAAG,GAAGG,MAAM,CAACnB,KAAP,GAAemB,MAAM,CAACnB,KAAtB,GAA8BmB,MAA1C;AACA,0BACEF;AAEE,QAAA,SAAS,EAAEG,UAAU,CACnB,6BADmB,EAEnB,QAFmB,EAGnB,UAHmB,EAInB;AACEC,UAAAA,UAAU,EAAE,CAACpB,cAAD,GACRG,UAAU,KAAKY,GADP,GAERZ,UAAU,IAAIA,UAAU,CAACK,QAAX,CAAoBO,GAApB;AAHpB,SAJmB,CAFvB;AAYE,4BAAkBA,GAZpB;AAaE,QAAA,OAAO,EAAEV,OAAO,CAACU,GAAD,CAblB;AAcE,QAAA,IAAI,EAAC,QAdP;AAAA,kBAgBGb,cAAc,GAAGA,cAAc,CAACe,GAAf,CAAmB,UAAAI,OAAO;AAAA,8BAC1CC,KAAC,QAAD;AAAA,oCACEN;AAAM,cAAA,SAAS,EAAC,0CAAhB;AAAA,wBACGE,MAAM,CAACG,OAAD;AADT,cADF,eAIEL;AAAA,wBACGD,GAAG,CAACQ,MAAJ,CAAW,CAAX,EAAcC,WAAd,KAA8BT,GAAG,CAACU,KAAJ,CAAU,CAAV;AADjC,cAJF;AAAA,aAAeJ,OAAf,CAD0C;AAAA,SAA1B,CAAH,GASVH,MAAM,CAACQ;AAzBd,SACOX,GADP,CADF;AA6BD,KA/BA;AADH,IADF;AAoCD,CA7DD;;AA+DApB,WAAW,CAACgC,SAAZ,GAAwB;AACtB/B,EAAAA,MAAM,EAAEgC,SAAS,CAACC,KAAV,CAAgB;AACtBd,IAAAA,GAAG,EAAEa,SAAS,CAACE,MADO;AAEtB9B,IAAAA,cAAc,EAAE4B,SAAS,CAACG,IAFJ;AAGtB9B,IAAAA,OAAO,EAAE2B,SAAS,CAACI,OAAV,CAAkBJ,SAAS,CAACK,GAA5B,CAHa;AAItB/B,IAAAA,cAAc,EAAE0B,SAAS,CAACI,OAAV,CAAkBJ,SAAS,CAACK,GAA5B;AAJM,GAAhB,CADc;AAOtBpC,EAAAA,IAAI,EAAE+B,SAAS,CAACC,KAAV,CAAgB;AACpBf,IAAAA,EAAE,EAAEc,SAAS,CAACE;AADM,GAAhB,CAPgB;AAUtBhC,EAAAA,YAAY,EAAE8B,SAAS,CAACM,IAVF;AAWtBnC,EAAAA,KAAK,EAAE6B,SAAS,CAACE;AAXK,CAAxB;AAcAnC,WAAW,CAACwC,YAAZ,GAA2B;AACzBvC,EAAAA,MAAM,EAAE,EADiB;AAEzBC,EAAAA,IAAI,EAAE,EAFmB;AAGzBC,EAAAA,YAAY,EAAE,wBAAM,EAHK;AAIzBC,EAAAA,KAAK,EAAE;AAJkB,CAA3B;AAOA,iCAAeqC,IAAI,CAACzC,WAAD,CAAnB;;;;"}
+{"version":3,"file":"Orientation.js","sources":["../../../../src/components/Settings/Orientation.js"],"sourcesContent":["import { memo, Fragment } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { safeJSONParse } from '../../utils/functions';\n\nconst Orientation = ({\n  config = [],\n  item = {},\n  onItemChange = () => {},\n  value = '',\n}) => {\n  const { multipleSelect, options, optionsDisplay } = config;\n  const exactValue = !multipleSelect ? value : safeJSONParse(value, []);\n  const onClick = type => {\n    return () => {\n      let newValue = type;\n      if (multipleSelect) {\n        newValue = [...exactValue];\n        if (exactValue.includes(type)) {\n          newValue = newValue.filter(v => v !== type);\n        } else {\n          newValue.push(type);\n        }\n        newValue = JSON.stringify(newValue);\n      }\n      if (newValue !== value) {\n        onItemChange(\n          { id: item.id },\n          { [config.key]: newValue },\n        );\n      }\n    };\n  };\n  return (\n    <div className=\"toolSection-orientation d-flex dir-row\">\n      {options.map(option => {\n        const key = option.value ? option.value : option;\n        return (\n          <button\n            key={key}\n            className={classNames(\n              'toolSection-orientationItem',\n              'd-flex',\n              'j-center',\n              {\n                isSelected: !multipleSelect\n                  ? exactValue === key\n                  : exactValue && exactValue.includes(key),\n              },\n            )}\n            data-orientation={key}\n            onClick={onClick(key)}\n            type=\"button\"\n          >\n            {optionsDisplay ? optionsDisplay.map(display => (\n              <Fragment key={display}>\n                <span className=\"orientationIcon d-flex a-center j-center\">\n                  {option[display]}\n                </span>\n                <span>\n                  {key.charAt(0).toUpperCase() + key.slice(1)}\n                </span>\n              </Fragment>\n            )) : option.label}\n          </button>\n        );\n      })}\n    </div>\n  );\n};\n\nOrientation.propTypes = {\n  config: PropTypes.shape({\n    key: PropTypes.string,\n    multipleSelect: PropTypes.bool,\n    options: PropTypes.arrayOf(PropTypes.any),\n    optionsDisplay: PropTypes.arrayOf(PropTypes.any),\n  }),\n  item: PropTypes.shape({\n    id: PropTypes.string,\n  }),\n  onItemChange: PropTypes.func,\n  value: PropTypes.string,\n};\n\nexport default memo(Orientation);\n"],"names":["Orientation","config","item","onItemChange","value","multipleSelect","options","optionsDisplay","exactValue","safeJSONParse","onClick","type","newValue","includes","filter","v","push","JSON","stringify","id","key","_jsx","map","option","classNames","isSelected","display","_jsxs","charAt","toUpperCase","slice","label","propTypes","PropTypes","shape","string","bool","arrayOf","any","func","memo"],"mappings":"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"}

package/lib/esm/components/Settings/PageLayer/LayerDragOverlay.js

@@ -0,0 +1,123 @@
+import { memo } from 'react';
+import { DragOverlay } from '@dnd-kit/core';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import { capitalize, stripHTML } from '../../../utils/string.js';
+import { useTranslatedTexts } from '../../../utils/hooks.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import SvgDrag from '../../../assets/svg/settings/drag.svg.js';
+
+var DragHandle = function DragHandle() {
+  return /*#__PURE__*/jsx("span", {
+    className: "jfReportSelectOption-drag",
+    children: /*#__PURE__*/jsx(SvgDrag, {
+      className: "jfReportSVG icon-drag"
+    })
+  });
+};
+
+var LayerDragOverlay = function LayerDragOverlay(_ref) {
+  var activeItemData = _ref.activeItemData;
+
+  var _useTranslatedTexts = useTranslatedTexts(),
+      CHART_ELEMENT = _useTranslatedTexts.CHART_ELEMENT,
+      CLICK_TO_EDIT_TEXT = _useTranslatedTexts.CLICK_TO_EDIT_TEXT,
+      CLIK_TO_EDIT_HEADER = _useTranslatedTexts.CLIK_TO_EDIT_HEADER,
+      PAGE_ELEMENT = _useTranslatedTexts.PAGE_ELEMENT,
+      RECTANGLE = _useTranslatedTexts.RECTANGLE;
+
+  if (!activeItemData) return null;
+  var Icon = activeItemData.icon,
+      item = activeItemData.item;
+  var id = item.id,
+      isVisible = item.isVisible;
+  var isVisib = isVisible !== undefined ? isVisible : true;
+
+  var itemText = function itemText(passedItem) {
+    if (passedItem.itemType === 'shapes') {
+      return capitalize(passedItem.shapeType || RECTANGLE);
+    }
+
+    if (passedItem.itemType === 'chart') {
+      return passedItem.text || CHART_ELEMENT;
+    }
+
+    if (passedItem.itemType === 'header') {
+      return passedItem.headerText || CLIK_TO_EDIT_HEADER;
+    }
+
+    if (passedItem.itemType === 'text') {
+      return passedItem.value ? stripHTML(passedItem.value) : CLICK_TO_EDIT_TEXT;
+    }
+
+    return capitalize(passedItem.itemType || PAGE_ELEMENT);
+  };
+
+  var content = /*#__PURE__*/jsxs("div", {
+    className: "jfReportSelectOption",
+    children: [/*#__PURE__*/jsx("div", {
+      className: "jfReportSelectOption-icon",
+      children: /*#__PURE__*/jsx(Icon, {})
+    }), /*#__PURE__*/jsx("div", {
+      className: "jfReportSelectOption-text",
+      children: itemText(item)
+    })]
+  });
+
+  return /*#__PURE__*/jsx(DragOverlay, {
+    adjustScale: false,
+    dropAnimation: null,
+    style: {
+      cursor: 'grabbing'
+    },
+    children: /*#__PURE__*/jsxs("div", {
+      className: classNames('jfReportSelectOption forHelper withDnd', {
+        isSelected: isVisib
+      }),
+      style: {
+        opacity: 0.9,
+        transform: 'rotate(2deg)'
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        className: "jfReportSelectOption-visibility",
+        children: /*#__PURE__*/jsxs("label", {
+          className: "jfReportChoice isLight hasNotText",
+          htmlFor: "overlay-".concat(id),
+          children: [/*#__PURE__*/jsx("input", {
+            checked: isVisib,
+            className: "jfReportChoice-input",
+            id: "overlay-".concat(id),
+            readOnly: true,
+            type: "checkbox"
+          }), /*#__PURE__*/jsx("div", {
+            className: "jfReportChoice-labelIcon",
+            children: /*#__PURE__*/jsx("div", {
+              className: "jfReportChoice-label checkbox"
+            })
+          })]
+        })
+      }), /*#__PURE__*/jsxs("div", {
+        className: "jfReportSelectOption-name",
+        children: [/*#__PURE__*/jsx(DragHandle, {}), content]
+      })]
+    })
+  });
+};
+
+LayerDragOverlay.propTypes = {
+  activeItemData: PropTypes.shape({
+    icon: PropTypes.elementType,
+    item: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      isVisible: PropTypes.bool,
+      itemType: PropTypes.string
+    })
+  })
+};
+LayerDragOverlay.defaultProps = {
+  activeItemData: null
+};
+var LayerDragOverlay$1 = /*#__PURE__*/memo(LayerDragOverlay);
+
+export default LayerDragOverlay$1;
+//# sourceMappingURL=LayerDragOverlay.js.map

package/lib/esm/components/Settings/PageLayer/LayerDragOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayerDragOverlay.js","sources":["../../../../../src/components/Settings/PageLayer/LayerDragOverlay.js"],"sourcesContent":["import { memo } from 'react';\nimport { DragOverlay } from '@dnd-kit/core';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport { capitalize, stripHTML } from '../../../utils/string';\nimport * as icons from '../../../utils/icons';\nimport { useTranslatedTexts } from '../../../utils/hooks';\n\nconst DragHandle = () => (\n  <span className=\"jfReportSelectOption-drag\">\n    <icons.drag className=\"jfReportSVG icon-drag\" />\n  </span>\n);\n\nconst LayerDragOverlay = ({\n  activeItemData,\n}) => {\n  const {\n    CHART_ELEMENT,\n    CLICK_TO_EDIT_TEXT,\n    CLIK_TO_EDIT_HEADER,\n    PAGE_ELEMENT,\n    RECTANGLE,\n  } = useTranslatedTexts();\n\n  if (!activeItemData) return null;\n\n  const { icon: Icon, item } = activeItemData;\n  const { id, isVisible } = item;\n  const isVisib = isVisible !== undefined ? isVisible : true;\n\n  const itemText = passedItem => {\n    if (passedItem.itemType === 'shapes') {\n      return capitalize(passedItem.shapeType || RECTANGLE);\n    }\n    if (passedItem.itemType === 'chart') {\n      return passedItem.text || CHART_ELEMENT;\n    }\n    if (passedItem.itemType === 'header') {\n      return passedItem.headerText || CLIK_TO_EDIT_HEADER;\n    }\n    if (passedItem.itemType === 'text') {\n      return passedItem.value ? stripHTML(passedItem.value) : CLICK_TO_EDIT_TEXT;\n    }\n    return capitalize(passedItem.itemType || PAGE_ELEMENT);\n  };\n\n  const content = (\n    <div className=\"jfReportSelectOption\">\n      <div className=\"jfReportSelectOption-icon\">\n        <Icon />\n      </div>\n      <div className=\"jfReportSelectOption-text\">\n        {itemText(item)}\n      </div>\n    </div>\n  );\n\n  return (\n    <DragOverlay\n      adjustScale={false}\n      dropAnimation={null}\n      style={{ cursor: 'grabbing' }}\n    >\n      <div\n        className={classNames('jfReportSelectOption forHelper withDnd', {\n          isSelected: isVisib,\n        })}\n        style={{ opacity: 0.9, transform: 'rotate(2deg)' }}\n      >\n        <div className=\"jfReportSelectOption-visibility\">\n          <label\n            className=\"jfReportChoice isLight hasNotText\"\n            htmlFor={`overlay-${id}`}\n          >\n            <input\n              checked={isVisib}\n              className=\"jfReportChoice-input\"\n              id={`overlay-${id}`}\n              readOnly\n              type=\"checkbox\"\n            />\n            <div className=\"jfReportChoice-labelIcon\">\n              <div className=\"jfReportChoice-label checkbox\" />\n            </div>\n          </label>\n        </div>\n        <div className=\"jfReportSelectOption-name\">\n          <DragHandle />\n          {content}\n        </div>\n      </div>\n    </DragOverlay>\n  );\n};\n\nLayerDragOverlay.propTypes = {\n  activeItemData: PropTypes.shape({\n    icon: PropTypes.elementType,\n    item: PropTypes.shape({\n      id: PropTypes.string.isRequired,\n      isVisible: PropTypes.bool,\n      itemType: PropTypes.string,\n    }),\n  }),\n};\n\nLayerDragOverlay.defaultProps = {\n  activeItemData: null,\n};\n\nexport default memo(LayerDragOverlay);\n"],"names":["DragHandle","_jsx","icons.drag","LayerDragOverlay","activeItemData","useTranslatedTexts","CHART_ELEMENT","CLICK_TO_EDIT_TEXT","CLIK_TO_EDIT_HEADER","PAGE_ELEMENT","RECTANGLE","Icon","icon","item","id","isVisible","isVisib","undefined","itemText","passedItem","itemType","capitalize","shapeType","text","headerText","value","stripHTML","content","_jsxs","cursor","classNames","isSelected","opacity","transform","propTypes","PropTypes","shape","elementType","string","isRequired","bool","defaultProps","memo"],"mappings":"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"}

package/lib/esm/components/Settings/PageLayer/LayerItem.js

@@ -1,25 +1,55 @@
-import { memo, useCallback } from 'react';
-import { sortableHandle, sortableElement } from 'react-sortable-hoc';
+import 'core-js/modules/es.object.to-string.js';
+import 'core-js/modules/es.regexp.to-string.js';
+import { memo, useMemo, useCallback } from 'react';
+import { useSortable } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import classNames from 'classnames';
+import PropTypes from 'prop-types';
 import { capitalize, stripHTML } from '../../../utils/string.js';
 import { useTranslatedTexts } from '../../../utils/hooks.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import SvgDrag from '../../../assets/svg/settings/drag.svg.js';
 
-var DragHandle = sortableHandle(function () {
+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; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+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 DragHandle = function DragHandle() {
   return /*#__PURE__*/jsx("span", {
     className: "jfReportSelectOption-drag",
     children: /*#__PURE__*/jsx(SvgDrag, {
       className: "jfReportSVG icon-drag"
     })
   });
-});
-var LayerItem = sortableElement(function (_ref) {
+};
+
+var LayerItem = function LayerItem(_ref) {
   var Icon = _ref.icon,
+      itemId = _ref.id,
       item = _ref.item,
       onItemChange = _ref.onItemChange,
       optionKey = _ref.optionKey,
       setActiveElement = _ref.setActiveElement;
+
+  var _useSortable = useSortable({
+    id: itemId
+  }),
+      attributes = _useSortable.attributes,
+      isDragging = _useSortable.isDragging,
+      listeners = _useSortable.listeners,
+      setNodeRef = _useSortable.setNodeRef,
+      transform = _useSortable.transform,
+      transition = _useSortable.transition;
+
+  var dragStyle = useMemo(function () {
+    return {
+      opacity: isDragging ? 0.5 : 1,
+      transform: CSS.Transform.toString(transform),
+      transition: transition
+    };
+  }, [transform, transition, isDragging]);
   var id = item.id,
       isVisible = item.isVisible;
   var isVisib = isVisible !== undefined ? isVisible : true;
@@ -38,40 +68,40 @@ var LayerItem = sortableElement(function (_ref) {
     }, {
       isVisible: target.checked
     });
-  }, [id]);
-
-  var itemText = function itemText(passedItem) {
-    if (passedItem.itemType === 'shapes') {
-      return capitalize(passedItem.shapeType || RECTANGLE);
+  }, [id, onItemChange]);
+  var itemText = useMemo(function () {
+    if (item.itemType === 'shapes') {
+      return capitalize(item.shapeType || RECTANGLE);
     }
 
-    if (passedItem.itemType === 'chart') {
-      return passedItem.text || CHART_ELEMENT;
+    if (item.itemType === 'chart') {
+      return item.text || CHART_ELEMENT;
     }
 
-    if (passedItem.itemType === 'header') {
-      return passedItem.headerText || CLIK_TO_EDIT_HEADER;
+    if (item.itemType === 'header') {
+      return item.headerText || CLIK_TO_EDIT_HEADER;
     }
 
-    if (passedItem.itemType === 'text') {
-      return passedItem.value ? stripHTML(passedItem.value) : CLICK_TO_EDIT_TEXT;
+    if (item.itemType === 'text') {
+      return item.value ? stripHTML(item.value) : CLICK_TO_EDIT_TEXT;
     }
 
-    return capitalize(passedItem.itemType || PAGE_ELEMENT);
-  };
-
-  var content = /*#__PURE__*/jsxs("div", {
-    className: "jfReportSelectOption",
-    children: [/*#__PURE__*/jsx("div", {
-      className: "jfReportSelectOption-icon",
-      children: /*#__PURE__*/jsx(Icon, {})
-    }), /*#__PURE__*/jsx("div", {
-      className: "jfReportSelectOption-text",
-      children: itemText(item)
-    })]
-  });
-
-  return /*#__PURE__*/jsxs("div", {
+    return capitalize(item.itemType || PAGE_ELEMENT);
+  }, [item]);
+  var content = useMemo(function () {
+    return /*#__PURE__*/jsxs("div", {
+      className: "jfReportSelectOption",
+      children: [/*#__PURE__*/jsx("div", {
+        className: "jfReportSelectOption-icon",
+        children: /*#__PURE__*/jsx(Icon, {})
+      }), /*#__PURE__*/jsx("div", {
+        className: "jfReportSelectOption-text",
+        children: itemText
+      })]
+    });
+  }, [Icon, itemText]);
+  return /*#__PURE__*/jsxs("div", _objectSpread(_objectSpread(_objectSpread({
+    ref: setNodeRef,
     className: classNames('jfReportSelectOption', {
       isSelected: isVisib
     }),
@@ -79,6 +109,8 @@ var LayerItem = sortableElement(function (_ref) {
       return setActiveElement(id, false);
     },
     onKeyDown: function onKeyDown() {},
+    style: dragStyle
+  }, attributes), listeners), {}, {
     children: [/*#__PURE__*/jsx("div", {
       className: "jfReportSelectOption-visibility",
       children: /*#__PURE__*/jsxs("label", {
@@ -103,8 +135,25 @@ var LayerItem = sortableElement(function (_ref) {
       ,
       children: [/*#__PURE__*/jsx(DragHandle, {}), content]
     })]
-  });
-});
+  }));
+};
+
+LayerItem.propTypes = {
+  icon: PropTypes.elementType,
+  id: PropTypes.string,
+  item: PropTypes.shape({
+    headerText: PropTypes.string,
+    id: PropTypes.string,
+    isVisible: PropTypes.bool,
+    itemType: PropTypes.string,
+    shapeType: PropTypes.string,
+    text: PropTypes.string,
+    value: PropTypes.string
+  }),
+  onItemChange: PropTypes.func,
+  optionKey: PropTypes.string,
+  setActiveElement: PropTypes.func
+};
 var LayerItem$1 = /*#__PURE__*/memo(LayerItem);
 
 export default LayerItem$1;