@dreamcommerce/aurora 2.18.0 → 2.19.0-2

package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js

@@ -46,15 +46,16 @@ var useFilePicker = function useFilePicker(_ref) {
       setPreview = _useState12[1];
 
   var reader = React.useRef(new FileReader());
+  var isMounted = React.useRef(true); // Nowy ref do śledzenia czy komponent jest zamontowany
+
   React.useEffect(function () {
-    reader.current && getDataUrlFromFile(reader.current.result);
-    reader.current.addEventListener('load', function () {
-      return getDataUrlFromFile(reader.current.result);
-    }, false);
+    isMounted.current = true; // Ustawienie ref na true podczas montowania komponentu
+
+    reader.current.addEventListener('load', handleFileRead, false);
     return function () {
-      return reader.current.removeEventListener('load', function () {
-        return getDataUrlFromFile(reader.current.result);
-      });
+      isMounted.current = false; // Ustawienie ref na false podczas odmontowywania komponentu
+
+      reader.current.removeEventListener('load', handleFileRead);
     };
   }, []);
   React.useEffect(function () {
@@ -64,12 +65,20 @@ var useFilePicker = function useFilePicker(_ref) {
     initialErrors && setErrors(initialErrors);
   }, [initialErrors]);
   React.useEffect(function () {
-    fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: fileList,
-      fileAsDataUrl: fileAsDataUrl
-    }));
+    if (fileAsDataUrl && isMounted.current) {
+      onChange === null || onChange === void 0 || onChange({
+        fileList: fileList,
+        fileAsDataUrl: fileAsDataUrl
+      });
+    }
   }, [fileAsDataUrl]);
 
+  var handleFileRead = function handleFileRead() {
+    if (isMounted.current) {
+      setFileAsDataUrl(reader.current.result);
+    }
+  };
+
   var onDropFile = function onDropFile(event) {
     setErrors([]);
     event.stopPropagation();
@@ -116,22 +125,20 @@ var useFilePicker = function useFilePicker(_ref) {
       });
       var isValid = validateFileExtension(allowedExtensions, files[0].type);
       if (isValid) onChange === null || onChange === void 0 || onChange({
-        fileList: files
+        fileList: files,
+        fileAsDataUrl: reader.current.result
       });
     } else {
       setFile(undefined);
       onChange === null || onChange === void 0 || onChange({
-        fileList: files
+        fileList: files,
+        fileAsDataUrl: null
       });
     }
 
     setPreview(true);
   };
 
-  var getDataUrlFromFile = function getDataUrlFromFile(fileReaderResult) {
-    setFileAsDataUrl(fileReaderResult);
-  };
-
   var onDragOver = function onDragOver(event) {
     event.stopPropagation();
     event.preventDefault();

package/build/cjs/packages/aurora/src/components/file_picker/use_file_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/image_picker/index.js

@@ -42,6 +42,13 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
       t = _useTranslation2[0];
 
   var inputRef = /*#__PURE__*/React.createRef();
+  var isMounted = React.useRef(true);
+  React.useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
 
   var handleOnChange = function handleOnChange(ev) {
     var _ev$fileList;
@@ -82,10 +89,14 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
   var imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
   var imagePickerWrapperClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePickerWrapper], file && main_module['default'][css_classes['default'].imagePickerWrapperHasFile], _rollupPluginBabelHelpers.defineProperty({}, main_module['default'][css_classes['default'].imagePickerWrapperError], errors.length));
   React.useEffect(function () {
-    onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
+    if (isMounted.current) {
+      onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
+    }
   }, [imageSize]);
   React.useEffect(function () {
-    initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
+    if (initialFile) {
+      setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
+    }
   }, [initialFile]);
   React.useEffect(function () {
     if (!editedImageResult) return;
@@ -100,11 +111,14 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
   };
 
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
+    console.log('fileUrl', fileUrl);
     createImageFromUrl(fileUrl).then(function (image) {
-      setImageSize({
-        width: image.naturalWidth,
-        height: image.naturalHeight
-      });
+      if (isMounted.current) {
+        setImageSize({
+          width: image.naturalWidth,
+          height: image.naturalHeight
+        });
+      }
     });
   };
 

package/build/cjs/packages/aurora/src/components/image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/loader/index.js

@@ -4,9 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
+var main_module = require('../../css/loader/main.module.less.js');
 var css_classes = require('./css_classes.js');
 var constants = require('./constants.js');
-var main_module = require('../../css/loader/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

package/build/cjs/packages/aurora/src/components/with_loader/css_classes.js

@@ -3,6 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var cssWithLoader = 'with-loader';
+var cssWithLoaderWrapper = 'with-loader-wrapper';
 
 exports.cssWithLoader = cssWithLoader;
+exports.cssWithLoaderWrapper = cssWithLoaderWrapper;
 //# sourceMappingURL=css_classes.js.map

package/build/cjs/packages/aurora/src/components/with_loader/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/with_loader/index.js

@@ -4,8 +4,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
 var classnames = require('classnames');
-var index = require('../loader/index.js');
 var main_module = require('../../css/with-loader/main.module.less.js');
+var index = require('../loader/index.js');
 var css_classes = require('./css_classes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,14 +15,20 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var WithLoader = function WithLoader(_ref) {
   var isLoading = _ref.isLoading,
+      textOnLoading = _ref.textOnLoading,
       children = _ref.children,
-      size = _ref.size;
+      size = _ref.size,
+      customStyle = _ref.customStyle;
   return isLoading ? /*#__PURE__*/React__default['default'].createElement("div", {
+    className: customStyle || ''
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: classnames__default['default'](main_module['default'][css_classes.cssWithLoaderWrapper])
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: classnames__default['default'](main_module['default'][css_classes.cssWithLoader]),
     "data-test-id": "loader"
   }, /*#__PURE__*/React__default['default'].createElement(index['default'], {
     size: size
-  })) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
+  }), textOnLoading && /*#__PURE__*/React__default['default'].createElement("span", null, textOnLoading)))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
 };
 
 exports.default = WithLoader;

package/build/cjs/packages/aurora/src/components/with_loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js

@@ -6,6 +6,7 @@ var React = require('react');
 var useTranslation = require('../../../../../external/react-i18next/dist/es/useTranslation.js');
 var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var constants = require('../file_picker/constants.js');
+require('classnames');
 var css_classes = require('../image_picker/css_classes.js');
 var icon_image = require('../../assets/icon_image.js');
 var main_module = require('../../css/image_picker/main.module.less.js');
@@ -67,6 +68,11 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       imageEditorResult = _useState8[0],
       setImageEditorResult = _useState8[1];
 
+  var _useState9 = React.useState(false),
+      _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
+      isLoading = _useState10[0],
+      setIsLoading = _useState10[1];
+
   var handleControlChange = /*#__PURE__*/function () {
     var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(file) {
       var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
@@ -75,20 +81,26 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
+            console.log('handleControlChange - file:', file);
+            console.log('handleControlChange - fileList:', fileList);
+            console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
             fileList && setImage(fileList[0]);
             onChange === null || onChange === void 0 || onChange({
               fileList: fileList,
               fileAsDataUrl: fileAsDataUrl
             });
+            console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
 
             if (!(!fileList || !fileList.length)) {
-              _context.next = 5;
+              _context.next = 9;
               break;
             }
 
             return _context.abrupt("return");
 
-          case 5:
+          case 9:
+            setIsLoading(true);
+
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
@@ -100,18 +112,20 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 10;
+            _context.next = 15;
             return response;
 
-          case 10:
+          case 15:
             responseObject = _context.sent;
+            console.log('handleControlChange - responseObject:', responseObject);
             onUploaded === null || onUploaded === void 0 || onUploaded({
               fileList: fileList,
               dataUrl: fileAsDataUrl,
               imageId: responseObject.data.imageId
             });
+            setIsLoading(false);
 
-          case 12:
+          case 19:
           case "end":
             return _context.stop();
         }
@@ -125,6 +139,7 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
   React.useEffect(function () {
     initialImageFile.current = initialFile;
+    console.log('useEffect - initialFile:', initialFile);
 
     var setFileFromUrl = /*#__PURE__*/function () {
       var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator( /*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2(fileData) {
@@ -132,20 +147,22 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              console.log('setFileFromUrl - fileData:', fileData);
+              _context2.next = 3;
               return fetch(fileData.fileUrl);
 
-            case 2:
+            case 3:
               response = _context2.sent;
-              _context2.next = 5;
+              _context2.next = 6;
               return response.blob();
 
-            case 5:
+            case 6:
               data = _context2.sent;
               file = new File([data], fileData.fileName);
               setInitialImage(file);
+              console.log('setFileFromUrl - file:', file);
 
-            case 8:
+            case 10:
             case "end":
               return _context2.stop();
           }
@@ -164,17 +181,21 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
       return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
     };
-  }, []);
+  }, [image, initialFile]);
   React.useEffect(function () {
     var src = image !== null && image !== void 0 ? image : initialImage;
+    console.log('useEffect - image:', image);
+    console.log('useEffect - initialImage:', initialImage);
+    console.log('useEffect - src:', src !== null && src !== void 0 ? src : '');
     setImageEditorSrc(src !== null && src !== void 0 ? src : '');
   }, [image, initialImage]);
 
   var renderImageEditor = function renderImageEditor(defaultProps) {
+    console.log('renderImageEditor - defaultProps:', defaultProps);
     return ImageEditor ? /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ImageEditor, _rollupPluginBabelHelpers.objectSpread2({}, defaultProps))) : null;
   };
 
-  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement(index['default'], {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, isLoading ? /*#__PURE__*/React__default['default'].createElement("div", null, t('File transfer...')) : /*#__PURE__*/React__default['default'].createElement(index['default'], {
     id: id,
     name: name,
     onChange: handleControlChange,

package/build/cjs/packages/aurora/src/components/xhr_image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/css/with-loader/main.module.less.js

@@ -4,9 +4,11 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
 
-var css_248z = ".main-module_with-loader__X2lLa {\n  text-align: center;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** WithLoader Variables */\n.main-module_with-loader__X2lLa {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.main-module_with-loader__X2lLa :nth-child(2) {\n  margin-top: 0.5rem;\n  color: #5c657e;\n}\n.main-module_with-loader-wrapper__B1nI2 {\n  padding: 2rem 0;\n}\n.main-module_with-loader-bordered__1pf_Y {\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n";
 var cssClasses = {
-  "with-loader": "main-module_with-loader__X2lLa"
+  "with-loader": "main-module_with-loader__X2lLa",
+  "with-loader-wrapper": "main-module_with-loader-wrapper__B1nI2",
+  "with-loader-bordered": "main-module_with-loader-bordered__1pf_Y"
 };
 styleInject_es['default'](css_248z);
 

package/build/cjs/packages/aurora/src/css/with-loader/main.module.less.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/cjs/packages/aurora/src/index.js

@@ -44,6 +44,8 @@ var index$g = require('./components/controls/hoc/control_textarea/index.js');
 var index$F = require('./components/image_picker/index.js');
 var use_modals_context = require('./components/modal_new/hooks/use_modals_context.js');
 var modal = require('./components/modal_new/components/modal/modal.js');
+var index$L = require('./components/loader/index.js');
+var index$M = require('./components/with_loader/index.js');
 var index$P = require('./components/xhr_image_picker/index.js');
 var index$p = require('./components/controls/hoc/control_xhr_image_picker/index.js');
 var index$z = require('./components/table/index.js');
@@ -63,7 +65,6 @@ var icon_mobile = require('./assets/icon_mobile.js');
 var icon_tablet = require('./assets/icon_tablet.js');
 var icon_warning = require('./assets/icon_warning.js');
 var index$N = require('./components/link/index.js');
-var index$L = require('./components/loader/index.js');
 var index$s = require('./components/modal/index.js');
 var modal_context = require('./components/modal/context/modal_context.js');
 var modal_provider = require('./components/modal/hoc/modal_provider.js');
@@ -92,7 +93,6 @@ var index$2 = require('./components/tooltip/index.js');
 var index$Q = require('./components/tree/index.js');
 var tree_node = require('./components/tree/components/tree_node.js');
 var values_syncer = require('./components/controls/components/values_syncer.js');
-var index$M = require('./components/with_loader/index.js');
 
 
 
@@ -139,6 +139,8 @@ exports.ControlTextarea = index$g['default'];
 exports.ImagePicker = index$F['default'];
 exports.useModalsContext = use_modals_context.useModalsContext;
 exports.ModalNew = modal.ModalNew;
+exports.Loader = index$L['default'];
+exports.WithLoader = index$M['default'];
 exports.XhrImagePicker = index$P['default'];
 exports.ControlXhrImagePicker = index$p['default'];
 exports.Table = index$z['default'];
@@ -159,7 +161,6 @@ exports.IconMobile = icon_mobile['default'];
 exports.IconTablet = icon_tablet['default'];
 exports.IconWarning = icon_warning['default'];
 exports.Link = index$N['default'];
-exports.Loader = index$L['default'];
 exports.Modal = index$s['default'];
 exports.ModalContext = modal_context.ModalContext;
 exports.ModalProvider = modal_provider['default'];
@@ -188,5 +189,4 @@ exports.Tooltip = index$2['default'];
 exports.Tree = index$Q.Tree;
 exports.TreeNode = tree_node.TreeNode;
 exports.ValuesSyncer = values_syncer['default'];
-exports.WithLoader = index$M['default'];
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js

@@ -42,15 +42,16 @@ var useFilePicker = function useFilePicker(_ref) {
       setPreview = _useState12[1];
 
   var reader = useRef(new FileReader());
+  var isMounted = useRef(true); // Nowy ref do śledzenia czy komponent jest zamontowany
+
   useEffect(function () {
-    reader.current && getDataUrlFromFile(reader.current.result);
-    reader.current.addEventListener('load', function () {
-      return getDataUrlFromFile(reader.current.result);
-    }, false);
+    isMounted.current = true; // Ustawienie ref na true podczas montowania komponentu
+
+    reader.current.addEventListener('load', handleFileRead, false);
     return function () {
-      return reader.current.removeEventListener('load', function () {
-        return getDataUrlFromFile(reader.current.result);
-      });
+      isMounted.current = false; // Ustawienie ref na false podczas odmontowywania komponentu
+
+      reader.current.removeEventListener('load', handleFileRead);
     };
   }, []);
   useEffect(function () {
@@ -60,12 +61,20 @@ var useFilePicker = function useFilePicker(_ref) {
     initialErrors && setErrors(initialErrors);
   }, [initialErrors]);
   useEffect(function () {
-    fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: fileList,
-      fileAsDataUrl: fileAsDataUrl
-    }));
+    if (fileAsDataUrl && isMounted.current) {
+      onChange === null || onChange === void 0 || onChange({
+        fileList: fileList,
+        fileAsDataUrl: fileAsDataUrl
+      });
+    }
   }, [fileAsDataUrl]);
 
+  var handleFileRead = function handleFileRead() {
+    if (isMounted.current) {
+      setFileAsDataUrl(reader.current.result);
+    }
+  };
+
   var onDropFile = function onDropFile(event) {
     setErrors([]);
     event.stopPropagation();
@@ -112,22 +121,20 @@ var useFilePicker = function useFilePicker(_ref) {
       });
       var isValid = validateFileExtension(allowedExtensions, files[0].type);
       if (isValid) onChange === null || onChange === void 0 || onChange({
-        fileList: files
+        fileList: files,
+        fileAsDataUrl: reader.current.result
       });
     } else {
       setFile(undefined);
       onChange === null || onChange === void 0 || onChange({
-        fileList: files
+        fileList: files,
+        fileAsDataUrl: null
       });
     }
 
     setPreview(true);
   };
 
-  var getDataUrlFromFile = function getDataUrlFromFile(fileReaderResult) {
-    setFileAsDataUrl(fileReaderResult);
-  };
-
   var onDragOver = function onDragOver(event) {
     event.stopPropagation();
     event.preventDefault();

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useState, useEffect, createRef } from 'react';
+import React, { memo, useRef, useEffect, useState, createRef } from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, defineProperty as _defineProperty, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { FILES_EXTENSIONS } from '../file_picker/constants.js';
@@ -33,6 +33,13 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
       t = _useTranslation2[0];
 
   var inputRef = /*#__PURE__*/createRef();
+  var isMounted = useRef(true);
+  useEffect(function () {
+    isMounted.current = true;
+    return function () {
+      isMounted.current = false;
+    };
+  }, []);
 
   var handleOnChange = function handleOnChange(ev) {
     var _ev$fileList;
@@ -73,10 +80,14 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   var imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
   var imagePickerWrapperClassName = classnames(styles[CSS_CLASSES.imagePickerWrapper], file && styles[CSS_CLASSES.imagePickerWrapperHasFile], _defineProperty({}, styles[CSS_CLASSES.imagePickerWrapperError], errors.length));
   useEffect(function () {
-    onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
+    if (isMounted.current) {
+      onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
+    }
   }, [imageSize]);
   useEffect(function () {
-    initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
+    if (initialFile) {
+      setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
+    }
   }, [initialFile]);
   useEffect(function () {
     if (!editedImageResult) return;
@@ -91,11 +102,14 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   };
 
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
+    console.log('fileUrl', fileUrl);
     createImageFromUrl(fileUrl).then(function (image) {
-      setImageSize({
-        width: image.naturalWidth,
-        height: image.naturalHeight
-      });
+      if (isMounted.current) {
+        setImageSize({
+          width: image.naturalWidth,
+          height: image.naturalHeight
+        });
+      }
     });
   };
 

package/build/esm/packages/aurora/src/components/image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/image_picker/types.d.ts

@@ -16,6 +16,7 @@ export interface IImagePickerInput {
     onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
     allowedExtensions: TFilesExtension[];
     isDragOver: boolean;
+    isLoaderVisible?: boolean;
 }
 export declare type TImageSize = {
     width: number;

package/build/esm/packages/aurora/src/components/loader/index.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import classnames from 'classnames';
+import cssClasses from '../../css/loader/main.module.less.js';
 import { cssLoader } from './css_classes.js';
 import { LOADER_SIZE_CSS_CLASS_MAP, LOADER_SIZE } from './constants.js';
-import cssClasses from '../../css/loader/main.module.less.js';
 
 var Loader = function Loader(_ref) {
   var size = _ref.size,

package/build/esm/packages/aurora/src/components/with_loader/css_classes.d.ts

@@ -1 +1,3 @@
 export declare const cssWithLoader = "with-loader";
+export declare const cssWithLoaderWrapper = "with-loader-wrapper";
+export declare const cssWithLoaderBordered = "with-loader-bordered";

package/build/esm/packages/aurora/src/components/with_loader/css_classes.js

@@ -1,4 +1,5 @@
 var cssWithLoader = 'with-loader';
+var cssWithLoaderWrapper = 'with-loader-wrapper';
 
-export { cssWithLoader };
+export { cssWithLoader, cssWithLoaderWrapper };
 //# sourceMappingURL=css_classes.js.map

package/build/esm/packages/aurora/src/components/with_loader/css_classes.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/with_loader/index.js

@@ -1,19 +1,25 @@
 import React from 'react';
 import classnames from 'classnames';
-import Loader from '../loader/index.js';
 import cssClasses from '../../css/with-loader/main.module.less.js';
-import { cssWithLoader } from './css_classes.js';
+import Loader from '../loader/index.js';
+import { cssWithLoaderWrapper, cssWithLoader } from './css_classes.js';
 
 var WithLoader = function WithLoader(_ref) {
   var isLoading = _ref.isLoading,
+      textOnLoading = _ref.textOnLoading,
       children = _ref.children,
-      size = _ref.size;
+      size = _ref.size,
+      customStyle = _ref.customStyle;
   return isLoading ? /*#__PURE__*/React.createElement("div", {
+    className: customStyle || ''
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classnames(cssClasses[cssWithLoaderWrapper])
+  }, /*#__PURE__*/React.createElement("div", {
     className: classnames(cssClasses[cssWithLoader]),
     "data-test-id": "loader"
   }, /*#__PURE__*/React.createElement(Loader, {
     size: size
-  })) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }), textOnLoading && /*#__PURE__*/React.createElement("span", null, textOnLoading)))) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 };
 
 export default WithLoader;

package/build/esm/packages/aurora/src/components/with_loader/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/with_loader/types.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
 import { ILoaderProps } from "../loader/types";
 import { TLoaderSize } from "../loader/types";
+import { ReactNode } from 'react';
 export interface IWithLoader extends ILoaderProps {
     size?: TLoaderSize;
     children?: React.ReactNode;
-    isLoading: boolean;
+    isLoading?: boolean;
+    textOnLoading?: ReactNode | string;
+    customStyle?: string;
 }

package/build/esm/packages/aurora/src/components/with_loader/types.js

@@ -1,3 +1,4 @@
 import '@auroraComponents/loader/types';
 import '@auroraComponents/loader/types';
+import 'react';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/with_loader/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/with_loader/types.ts"],"names":[],"mappings":"AAAA,OAA6B,gCAAgC,CAAC;AAC9D,OAA4B,gCAAgC,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/with_loader/types.ts"],"names":[],"mappings":"AAAA,OAA6B,gCAAgC,CAAC;AAC9D,OAA4B,gCAAgC,CAAC;AAC7D,OAA0B,OAAO,CAAC"}

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js

@@ -2,6 +2,7 @@ import React, { useRef, useState, useEffect } from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
 import { slicedToArray as _slicedToArray, objectSpread2 as _objectSpread2, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { FILES_EXTENSIONS } from '../file_picker/constants.js';
+import 'classnames';
 import CSS_CLASSES from '../image_picker/css_classes.js';
 import IconImage from '../../assets/icon_image.js';
 import styles from '../../css/image_picker/main.module.less.js';
@@ -59,6 +60,11 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       imageEditorResult = _useState8[0],
       setImageEditorResult = _useState8[1];
 
+  var _useState9 = useState(false),
+      _useState10 = _slicedToArray(_useState9, 2),
+      isLoading = _useState10[0],
+      setIsLoading = _useState10[1];
+
   var handleControlChange = /*#__PURE__*/function () {
     var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
       var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject;
@@ -67,20 +73,26 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
             fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
+            console.log('handleControlChange - file:', file);
+            console.log('handleControlChange - fileList:', fileList);
+            console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
             fileList && setImage(fileList[0]);
             onChange === null || onChange === void 0 || onChange({
               fileList: fileList,
               fileAsDataUrl: fileAsDataUrl
             });
+            console.log('handleControlChange - fileAsDataUrl:', fileAsDataUrl);
 
             if (!(!fileList || !fileList.length)) {
-              _context.next = 5;
+              _context.next = 9;
               break;
             }
 
             return _context.abrupt("return");
 
-          case 5:
+          case 9:
+            setIsLoading(true);
+
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
@@ -92,18 +104,20 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 10;
+            _context.next = 15;
             return response;
 
-          case 10:
+          case 15:
             responseObject = _context.sent;
+            console.log('handleControlChange - responseObject:', responseObject);
             onUploaded === null || onUploaded === void 0 || onUploaded({
               fileList: fileList,
               dataUrl: fileAsDataUrl,
               imageId: responseObject.data.imageId
             });
+            setIsLoading(false);
 
-          case 12:
+          case 19:
           case "end":
             return _context.stop();
         }
@@ -117,6 +131,7 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
   useEffect(function () {
     initialImageFile.current = initialFile;
+    console.log('useEffect - initialFile:', initialFile);
 
     var setFileFromUrl = /*#__PURE__*/function () {
       var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fileData) {
@@ -124,20 +139,22 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              _context2.next = 2;
+              console.log('setFileFromUrl - fileData:', fileData);
+              _context2.next = 3;
               return fetch(fileData.fileUrl);
 
-            case 2:
+            case 3:
               response = _context2.sent;
-              _context2.next = 5;
+              _context2.next = 6;
               return response.blob();
 
-            case 5:
+            case 6:
               data = _context2.sent;
               file = new File([data], fileData.fileName);
               setInitialImage(file);
+              console.log('setFileFromUrl - file:', file);
 
-            case 8:
+            case 10:
             case "end":
               return _context2.stop();
           }
@@ -156,17 +173,21 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
       return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
     };
-  }, []);
+  }, [image, initialFile]);
   useEffect(function () {
     var src = image !== null && image !== void 0 ? image : initialImage;
+    console.log('useEffect - image:', image);
+    console.log('useEffect - initialImage:', initialImage);
+    console.log('useEffect - src:', src !== null && src !== void 0 ? src : '');
     setImageEditorSrc(src !== null && src !== void 0 ? src : '');
   }, [image, initialImage]);
 
   var renderImageEditor = function renderImageEditor(defaultProps) {
+    console.log('renderImageEditor - defaultProps:', defaultProps);
     return ImageEditor ? /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(ImageEditor, _objectSpread2({}, defaultProps))) : null;
   };
 
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ImagePicker, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", null, t('File transfer...')) : /*#__PURE__*/React.createElement(ImagePicker, {
     id: id,
     name: name,
     onChange: handleControlChange,

package/build/esm/packages/aurora/src/components/xhr_image_picker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/css/with-loader/main.module.less.js

@@ -1,8 +1,10 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = ".main-module_with-loader__X2lLa {\n  text-align: center;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n/** WithLoader Variables */\n.main-module_with-loader__X2lLa {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n}\n.main-module_with-loader__X2lLa :nth-child(2) {\n  margin-top: 0.5rem;\n  color: #5c657e;\n}\n.main-module_with-loader-wrapper__B1nI2 {\n  padding: 2rem 0;\n}\n.main-module_with-loader-bordered__1pf_Y {\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n";
 var cssClasses = {
-  "with-loader": "main-module_with-loader__X2lLa"
+  "with-loader": "main-module_with-loader__X2lLa",
+  "with-loader-wrapper": "main-module_with-loader-wrapper__B1nI2",
+  "with-loader-bordered": "main-module_with-loader-bordered__1pf_Y"
 };
 styleInject(css_248z);
 

package/build/esm/packages/aurora/src/css/with-loader/main.module.less.js.map

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/index.js

@@ -40,6 +40,8 @@ export { default as ControlTextarea } from './components/controls/hoc/control_te
 export { default as ImagePicker } from './components/image_picker/index.js';
 export { useModalsContext } from './components/modal_new/hooks/use_modals_context.js';
 export { ModalNew } from './components/modal_new/components/modal/modal.js';
+export { default as Loader } from './components/loader/index.js';
+export { default as WithLoader } from './components/with_loader/index.js';
 export { default as XhrImagePicker } from './components/xhr_image_picker/index.js';
 export { default as ControlXhrImagePicker } from './components/controls/hoc/control_xhr_image_picker/index.js';
 export { default as Table } from './components/table/index.js';
@@ -59,7 +61,6 @@ export { default as IconMobile } from './assets/icon_mobile.js';
 export { default as IconTablet } from './assets/icon_tablet.js';
 export { default as IconWarning } from './assets/icon_warning.js';
 export { default as Link } from './components/link/index.js';
-export { default as Loader } from './components/loader/index.js';
 export { default as Modal } from './components/modal/index.js';
 export { ModalContext } from './components/modal/context/modal_context.js';
 export { default as ModalProvider } from './components/modal/hoc/modal_provider.js';
@@ -88,5 +89,4 @@ export { default as Tooltip } from './components/tooltip/index.js';
 export { Tree } from './components/tree/index.js';
 export { TreeNode } from './components/tree/components/tree_node.js';
 export { default as ValuesSyncer } from './components/controls/components/values_syncer.js';
-export { default as WithLoader } from './components/with_loader/index.js';
 //# sourceMappingURL=index.js.map

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "2.18.0",
+  "version": "2.19.0-2",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",