@dreamcommerce/aurora 2.19.0-2 → 2.19.0-20

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

@@ -46,16 +46,15 @@ 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 () {
-    isMounted.current = true; // Ustawienie ref na true podczas montowania komponentu
-
-    reader.current.addEventListener('load', handleFileRead, false);
+    reader.current && getDataUrlFromFile(reader.current.result);
+    reader.current.addEventListener('load', function () {
+      return getDataUrlFromFile(reader.current.result);
+    }, false);
     return function () {
-      isMounted.current = false; // Ustawienie ref na false podczas odmontowywania komponentu
-
-      reader.current.removeEventListener('load', handleFileRead);
+      return reader.current.removeEventListener('load', function () {
+        return getDataUrlFromFile(reader.current.result);
+      });
     };
   }, []);
   React.useEffect(function () {
@@ -65,20 +64,12 @@ var useFilePicker = function useFilePicker(_ref) {
     initialErrors && setErrors(initialErrors);
   }, [initialErrors]);
   React.useEffect(function () {
-    if (fileAsDataUrl && isMounted.current) {
-      onChange === null || onChange === void 0 || onChange({
-        fileList: fileList,
-        fileAsDataUrl: fileAsDataUrl
-      });
-    }
+    fileAsDataUrl && (onChange === null || onChange === void 0 ? 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();
@@ -125,20 +116,22 @@ var useFilePicker = function useFilePicker(_ref) {
       });
       var isValid = validateFileExtension(allowedExtensions, files[0].type);
       if (isValid) onChange === null || onChange === void 0 || onChange({
-        fileList: files,
-        fileAsDataUrl: reader.current.result
+        fileList: files
       });
     } else {
       setFile(undefined);
       onChange === null || onChange === void 0 || onChange({
-        fileList: files,
-        fileAsDataUrl: null
+        fileList: files
       });
     }
 
     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;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;"}

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

@@ -24,7 +24,10 @@ var CSS_CLASSES = {
   imagePickerSelectedFile: "".concat(imagePicker, "__selected-file"),
   imagePickerSelectedFileNameWrapper: "".concat(imagePicker, "__selected-file-name-wrapper"),
   imagePickerSelectedFileRemoveWrapper: "".concat(imagePicker, "__selected-file-remove-wrapper"),
-  imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats")
+  imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats"),
+  imagePickerLoadingWrapper: "".concat(imagePicker, "__loading-wrapper"),
+  imagePickerLoadingWrapperContent: "".concat(imagePicker, "__loading-wrapper-content"),
+  imagePickerLoadingWrapperContentText: "".concat(imagePicker, "__loading-wrapper-content-text")
 };
 
 exports.default = CSS_CLASSES;

package/build/cjs/packages/aurora/src/components/image_picker/css_classes.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;"}
+{"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;"}

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

@@ -42,13 +42,6 @@ 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;
@@ -89,14 +82,10 @@ 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 () {
-    if (isMounted.current) {
-      onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
-    }
+    onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
   }, [imageSize]);
   React.useEffect(function () {
-    if (initialFile) {
-      setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
-    }
+    initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
   }, [initialFile]);
   React.useEffect(function () {
     if (!editedImageResult) return;
@@ -111,14 +100,11 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
   };
 
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
-    console.log('fileUrl', fileUrl);
     createImageFromUrl(fileUrl).then(function (image) {
-      if (isMounted.current) {
-        setImageSize({
-          width: image.naturalWidth,
-          height: image.naturalHeight
-        });
-      }
+      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;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;"}

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

@@ -3,8 +3,6 @@
 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;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;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 main_module = require('../../css/with-loader/main.module.less.js');
 var index = require('../loader/index.js');
+var main_module = require('../../css/with-loader/main.module.less.js');
 var css_classes = require('./css_classes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -15,20 +15,14 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
 
 var WithLoader = function WithLoader(_ref) {
   var isLoading = _ref.isLoading,
-      textOnLoading = _ref.textOnLoading,
       children = _ref.children,
-      size = _ref.size,
-      customStyle = _ref.customStyle;
+      size = _ref.size;
   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
-  }), textOnLoading && /*#__PURE__*/React__default['default'].createElement("span", null, textOnLoading)))) : /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, children);
+  })) : /*#__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;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;"}

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

@@ -6,7 +6,6 @@ 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');
@@ -15,6 +14,7 @@ var use_modals_context = require('../modal_new/hooks/use_modals_context.js');
 var modal = require('../modal_new/components/modal/modal.js');
 var http_requester_contants = require('../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js');
 var use_http_api = require('../../hooks/use_http_api.js');
+var index$1 = require('../loader/index.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -81,51 +81,46 @@ 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 = 9;
+              _context.next = 5;
               break;
             }
 
             return _context.abrupt("return");
 
-          case 9:
-            setIsLoading(true);
-
+          case 5:
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
             }
 
+            setIsLoading(true);
             _httpApi$fetch = httpApi.fetch({
               url: url,
               method: http_requester_contants.REQUEST_TYPES.post,
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 15;
-            return response;
+            _context.next = 11;
+            return response.finally(function () {
+              return setIsLoading(false);
+            });
 
-          case 15:
+          case 11:
             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 19:
+          case 13:
           case "end":
             return _context.stop();
         }
@@ -139,7 +134,6 @@ 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) {
@@ -147,22 +141,20 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              console.log('setFileFromUrl - fileData:', fileData);
-              _context2.next = 3;
+              _context2.next = 2;
               return fetch(fileData.fileUrl);
 
-            case 3:
+            case 2:
               response = _context2.sent;
-              _context2.next = 6;
+              _context2.next = 5;
               return response.blob();
 
-            case 6:
+            case 5:
               data = _context2.sent;
               file = new File([data], fileData.fileName);
               setInitialImage(file);
-              console.log('setFileFromUrl - file:', file);
 
-            case 10:
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -181,21 +173,19 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
       return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
     };
-  }, [image, initialFile]);
+  }, [image]);
   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]);
+  }, [image, initialImage, isLoading]);
 
   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, isLoading ? /*#__PURE__*/React__default['default'].createElement("div", null, t('File transfer...')) : /*#__PURE__*/React__default['default'].createElement(index['default'], {
+  return /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes['default'].imagePickerLoadingWrapper]
+  }, /*#__PURE__*/React__default['default'].createElement(index['default'], {
     id: id,
     name: name,
     onChange: handleControlChange,
@@ -212,7 +202,11 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       type: "button"
     }, /*#__PURE__*/React__default['default'].createElement(icon_image['default'], null), t('Edit')),
     editedImageResult: imageEditorResult
-  }), ImageEditor && /*#__PURE__*/React__default['default'].createElement(modal.ModalNew, {
+  }), isLoading && /*#__PURE__*/React__default['default'].createElement("div", {
+    className: main_module['default'][css_classes['default'].imagePickerLoadingWrapperContent]
+  }, /*#__PURE__*/React__default['default'].createElement(index$1['default'], null), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: main_module['default'][css_classes['default'].imagePickerLoadingWrapperContentText]
+  }, t('Transfering file...')))), ImageEditor && /*#__PURE__*/React__default['default'].createElement(modal.ModalNew, {
     name: modalId,
     header: t('Edit image'),
     minWidth: "80vw"

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;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;"}

package/build/cjs/packages/aurora/src/css/image_picker/main.module.less.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  position: relative;\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  top: 1rem;\n  right: 1rem;\n  z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background-color: #ffffff;\n  background-image: none;\n  border: 0;\n  border-radius: 2px;\n  padding: 0.5rem;\n  font-size: 12px;\n  color: #3c83ec;\n  cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n  color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n  color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n  fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  position: relative;\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  top: 1rem;\n  right: 1rem;\n  z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background-color: #ffffff;\n  background-image: none;\n  border: 0;\n  border-radius: 2px;\n  padding: 0.5rem;\n  font-size: 12px;\n  color: #3c83ec;\n  cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n  color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n  color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n  fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n  position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: #ffffff;\n  width: 100%;\n  height: 100%;\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n  color: #5c657e;\n  margin-top: 0.5rem;\n}\n";
 var styles = {
   "image-picker__wrapper": "main-module_image-picker__wrapper__2RK3f",
   "image-picker__wrapper-error": "main-module_image-picker__wrapper-error__kCZeA",
@@ -25,7 +25,10 @@ var styles = {
   "image-picker__selected-file-remove-wrapper": "main-module_image-picker__selected-file-remove-wrapper__2v4W2",
   "image-picker__image-preview-wrapper": "main-module_image-picker__image-preview-wrapper__1jPXU",
   "image-picker__image-preview": "main-module_image-picker__image-preview__12pRu",
-  "image-picker__error-text": "main-module_image-picker__error-text__rXAvw"
+  "image-picker__error-text": "main-module_image-picker__error-text__rXAvw",
+  "image-picker__loading-wrapper": "main-module_image-picker__loading-wrapper__gBtlh",
+  "image-picker__loading-wrapper-content": "main-module_image-picker__loading-wrapper-content__21jzx",
+  "image-picker__loading-wrapper-content-text": "main-module_image-picker__loading-wrapper-content-text__2-Fup"
 };
 styleInject_es['default'](css_248z);
 

package/build/cjs/packages/aurora/src/css/image_picker/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;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,6BAA6B,8DAAkE;AAC/F;AACA;AACA;AACA;AACA;AACA;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,11 +4,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var styleInject_es = require('../../../../../external/style-inject/dist/style-inject.es.js');
 
-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 css_248z = ".main-module_with-loader__X2lLa {\n  text-align: center;\n}\n";
 var cssClasses = {
-  "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"
+  "with-loader": "main-module_with-loader__X2lLa"
 };
 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;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;"}

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

@@ -45,7 +45,6 @@ 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');
@@ -93,6 +92,7 @@ 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');
 
 
 
@@ -140,7 +140,6 @@ 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'];
@@ -189,4 +188,5 @@ 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,16 +42,15 @@ 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 () {
-    isMounted.current = true; // Ustawienie ref na true podczas montowania komponentu
-
-    reader.current.addEventListener('load', handleFileRead, false);
+    reader.current && getDataUrlFromFile(reader.current.result);
+    reader.current.addEventListener('load', function () {
+      return getDataUrlFromFile(reader.current.result);
+    }, false);
     return function () {
-      isMounted.current = false; // Ustawienie ref na false podczas odmontowywania komponentu
-
-      reader.current.removeEventListener('load', handleFileRead);
+      return reader.current.removeEventListener('load', function () {
+        return getDataUrlFromFile(reader.current.result);
+      });
     };
   }, []);
   useEffect(function () {
@@ -61,20 +60,12 @@ var useFilePicker = function useFilePicker(_ref) {
     initialErrors && setErrors(initialErrors);
   }, [initialErrors]);
   useEffect(function () {
-    if (fileAsDataUrl && isMounted.current) {
-      onChange === null || onChange === void 0 || onChange({
-        fileList: fileList,
-        fileAsDataUrl: fileAsDataUrl
-      });
-    }
+    fileAsDataUrl && (onChange === null || onChange === void 0 ? 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();
@@ -121,20 +112,22 @@ var useFilePicker = function useFilePicker(_ref) {
       });
       var isValid = validateFileExtension(allowedExtensions, files[0].type);
       if (isValid) onChange === null || onChange === void 0 || onChange({
-        fileList: files,
-        fileAsDataUrl: reader.current.result
+        fileList: files
       });
     } else {
       setFile(undefined);
       onChange === null || onChange === void 0 || onChange({
-        fileList: files,
-        fileAsDataUrl: null
+        fileList: files
       });
     }
 
     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;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;"}

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

@@ -20,5 +20,8 @@ declare const _default: {
     imagePickerSelectedFileNameWrapper: string;
     imagePickerSelectedFileRemoveWrapper: string;
     imagePickerSupportedFormats: string;
+    imagePickerLoadingWrapper: string;
+    imagePickerLoadingWrapperContent: string;
+    imagePickerLoadingWrapperContentText: string;
 };
 export default _default;

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

@@ -20,7 +20,10 @@ var CSS_CLASSES = {
   imagePickerSelectedFile: "".concat(imagePicker, "__selected-file"),
   imagePickerSelectedFileNameWrapper: "".concat(imagePicker, "__selected-file-name-wrapper"),
   imagePickerSelectedFileRemoveWrapper: "".concat(imagePicker, "__selected-file-remove-wrapper"),
-  imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats")
+  imagePickerSupportedFormats: "".concat(imagePicker, "__supported-formats"),
+  imagePickerLoadingWrapper: "".concat(imagePicker, "__loading-wrapper"),
+  imagePickerLoadingWrapperContent: "".concat(imagePicker, "__loading-wrapper-content"),
+  imagePickerLoadingWrapperContentText: "".concat(imagePicker, "__loading-wrapper-content-text")
 };
 
 export default CSS_CLASSES;

package/build/esm/packages/aurora/src/components/image_picker/css_classes.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;"}
+{"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;"}

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

@@ -1,4 +1,4 @@
-import React, { memo, useRef, useEffect, useState, createRef } from 'react';
+import React, { memo, useState, useEffect, 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,13 +33,6 @@ 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;
@@ -80,14 +73,10 @@ 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 () {
-    if (isMounted.current) {
-      onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
-    }
+    onImageSizeUpdated === null || onImageSizeUpdated === void 0 || onImageSizeUpdated(imageSize);
   }, [imageSize]);
   useEffect(function () {
-    if (initialFile) {
-      setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
-    }
+    initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
   }, [initialFile]);
   useEffect(function () {
     if (!editedImageResult) return;
@@ -102,14 +91,11 @@ var ImagePicker = /*#__PURE__*/memo(function (_ref) {
   };
 
   var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
-    console.log('fileUrl', fileUrl);
     createImageFromUrl(fileUrl).then(function (image) {
-      if (isMounted.current) {
-        setImageSize({
-          width: image.naturalWidth,
-          height: image.naturalHeight
-        });
-      }
+      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;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;"}

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

@@ -16,7 +16,6 @@ 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/with_loader/css_classes.d.ts

@@ -1,3 +1 @@
 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,5 +1,4 @@
 var cssWithLoader = 'with-loader';
-var cssWithLoaderWrapper = 'with-loader-wrapper';
 
-export { cssWithLoader, cssWithLoaderWrapper };
+export { cssWithLoader };
 //# 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;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;"}

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

@@ -1,25 +1,19 @@
 import React from 'react';
 import classnames from 'classnames';
-import cssClasses from '../../css/with-loader/main.module.less.js';
 import Loader from '../loader/index.js';
-import { cssWithLoaderWrapper, cssWithLoader } from './css_classes.js';
+import cssClasses from '../../css/with-loader/main.module.less.js';
+import { cssWithLoader } from './css_classes.js';
 
 var WithLoader = function WithLoader(_ref) {
   var isLoading = _ref.isLoading,
-      textOnLoading = _ref.textOnLoading,
       children = _ref.children,
-      size = _ref.size,
-      customStyle = _ref.customStyle;
+      size = _ref.size;
   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
-  }), textOnLoading && /*#__PURE__*/React.createElement("span", null, textOnLoading)))) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  })) : /*#__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;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;"}

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

@@ -1,10 +1,8 @@
+/// <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;
-    textOnLoading?: ReactNode | string;
-    customStyle?: string;
+    isLoading: boolean;
 }

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

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

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

@@ -2,7 +2,6 @@ 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';
@@ -11,6 +10,7 @@ import { useModalsContext } from '../modal_new/hooks/use_modals_context.js';
 import { ModalNew } from '../modal_new/components/modal/modal.js';
 import { REQUEST_TYPES } from '../../../../star_core/build/esm/packages/star_core/src/features/http_requester/http_requester_contants.js';
 import { useHttpApi } from '../../hooks/use_http_api.js';
+import Loader from '../loader/index.js';
 
 var XhrImagePicker = function XhrImagePicker(_ref) {
   var id = _ref.id,
@@ -73,51 +73,46 @@ 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 = 9;
+              _context.next = 5;
               break;
             }
 
             return _context.abrupt("return");
 
-          case 9:
-            setIsLoading(true);
-
+          case 5:
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
             }
 
+            setIsLoading(true);
             _httpApi$fetch = httpApi.fetch({
               url: url,
               method: REQUEST_TYPES.post,
               data: fileList[0]
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.next = 15;
-            return response;
+            _context.next = 11;
+            return response.finally(function () {
+              return setIsLoading(false);
+            });
 
-          case 15:
+          case 11:
             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 19:
+          case 13:
           case "end":
             return _context.stop();
         }
@@ -131,7 +126,6 @@ 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) {
@@ -139,22 +133,20 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
         return _regeneratorRuntime().wrap(function _callee2$(_context2) {
           while (1) switch (_context2.prev = _context2.next) {
             case 0:
-              console.log('setFileFromUrl - fileData:', fileData);
-              _context2.next = 3;
+              _context2.next = 2;
               return fetch(fileData.fileUrl);
 
-            case 3:
+            case 2:
               response = _context2.sent;
-              _context2.next = 6;
+              _context2.next = 5;
               return response.blob();
 
-            case 6:
+            case 5:
               data = _context2.sent;
               file = new File([data], fileData.fileName);
               setInitialImage(file);
-              console.log('setFileFromUrl - file:', file);
 
-            case 10:
+            case 8:
             case "end":
               return _context2.stop();
           }
@@ -173,21 +165,19 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
 
       return (_pendingRequestRef$cu = pendingRequestRef.current) === null || _pendingRequestRef$cu === void 0 ? void 0 : _pendingRequestRef$cu.call(pendingRequestRef);
     };
-  }, [image, initialFile]);
+  }, [image]);
   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]);
+  }, [image, initialImage, isLoading]);
 
   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, isLoading ? /*#__PURE__*/React.createElement("div", null, t('File transfer...')) : /*#__PURE__*/React.createElement(ImagePicker, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: styles[CSS_CLASSES.imagePickerLoadingWrapper]
+  }, /*#__PURE__*/React.createElement(ImagePicker, {
     id: id,
     name: name,
     onChange: handleControlChange,
@@ -204,7 +194,11 @@ var XhrImagePicker = function XhrImagePicker(_ref) {
       type: "button"
     }, /*#__PURE__*/React.createElement(IconImage, null), t('Edit')),
     editedImageResult: imageEditorResult
-  }), ImageEditor && /*#__PURE__*/React.createElement(ModalNew, {
+  }), isLoading && /*#__PURE__*/React.createElement("div", {
+    className: styles[CSS_CLASSES.imagePickerLoadingWrapperContent]
+  }, /*#__PURE__*/React.createElement(Loader, null), /*#__PURE__*/React.createElement("span", {
+    className: styles[CSS_CLASSES.imagePickerLoadingWrapperContentText]
+  }, t('Transfering file...')))), ImageEditor && /*#__PURE__*/React.createElement(ModalNew, {
     name: modalId,
     header: t('Edit image'),
     minWidth: "80vw"

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;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;"}

package/build/esm/packages/aurora/src/css/image_picker/main.module.less.js

@@ -1,6 +1,6 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  position: relative;\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  top: 1rem;\n  right: 1rem;\n  z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background-color: #ffffff;\n  background-image: none;\n  border: 0;\n  border-radius: 2px;\n  padding: 0.5rem;\n  font-size: 12px;\n  color: #3c83ec;\n  cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n  color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n  color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n  fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n";
+var css_248z = "/* font colors */\n/* actions */\n/* background */\n/* errors */\n/* borders */\n/* grid */\n/* scrollBar */\n/* sizes */\n.main-module_image-picker__wrapper__2RK3f {\n  position: relative;\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__wrapper-error__kCZeA {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-error__kCZeA:hover {\n  border-color: #e60c54;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc {\n  position: relative;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__label__1i_Fq {\n  position: absolute;\n  top: 0;\n  right: 0;\n  bottom: 46px;\n  left: 0;\n}\n.main-module_image-picker__wrapper-has-file__2zmRc .main-module_image-picker__description__1v13N {\n  display: none;\n}\n.main-module_image-picker__wrapper__2RK3f:hover {\n  border-color: #135cc8;\n}\n.main-module_image-picker__wrapper__2RK3f:hover .main-module_image-picker__upload-icon__3sMvN {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrapper-top-buttons__241RY {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  top: 1rem;\n  right: 1rem;\n  z-index: 10;\n}\n.main-module_image-picker__edit-button__3O-iq {\n  display: flex;\n  align-items: center;\n  gap: 4px;\n  background-color: #ffffff;\n  background-image: none;\n  border: 0;\n  border-radius: 2px;\n  padding: 0.5rem;\n  font-size: 12px;\n  color: #3c83ec;\n  cursor: pointer;\n}\n.main-module_image-picker__label__1i_Fq {\n  cursor: pointer;\n}\n.main-module_image-picker__input__3Wu2I {\n  display: none;\n}\n.main-module_image-picker__description__1v13N {\n  padding: 2rem 0;\n  text-align: center;\n  color: #3c83ec;\n}\n.main-module_image-picker__supported-formats__1_R_X {\n  font-size: 12px;\n  color: #59687e;\n}\n.main-module_image-picker__upload-icon__3sMvN {\n  width: 1rem;\n  height: auto;\n  margin-bottom: 1rem;\n  fill: #abb4cd;\n}\n.main-module_image-picker__delete-button__21_kT {\n  display: flex;\n  align-items: center;\n  color: #3c83ec;\n  cursor: pointer;\n  background: transparent;\n}\n.main-module_image-picker__delete-button__21_kT:hover .main-module_image-picker__delete-label__3v2ot {\n  text-decoration: underline;\n}\n.main-module_image-picker__delete-button__21_kT .main-module_image-picker__delete-label__3v2ot {\n  color: #3c83ec;\n}\n.main-module_image-picker__delete-button__21_kT svg {\n  fill: #3c83ec;\n}\n.main-module_image-picker__wrong-file-format-icon__X-NL0 {\n  margin: 2rem 0 0.5rem;\n  fill: #ffffff;\n}\n.main-module_image-picker__delete-icon__30pkO {\n  fill: #3c83ec;\n  margin-right: 0.5rem;\n}\n.main-module_image-picker__selected-file__3bRqa {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  height: 46px;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd,\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  padding: 1rem;\n}\n.main-module_image-picker__selected-file-remove-wrapper__2v4W2 {\n  display: flex;\n  justify-content: flex-end;\n}\n.main-module_image-picker__selected-file-name-wrapper__37MKd {\n  color: #59687e;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n.main-module_image-picker__image-preview-wrapper__1jPXU svg {\n  fill: transparent;\n}\n.main-module_image-picker__image-preview__12pRu {\n  max-width: 100%;\n  max-height: 100%;\n}\n.main-module_image-picker__error-text__rXAvw {\n  margin-top: 0.5rem;\n  color: #e60c54;\n}\n.main-module_image-picker__loading-wrapper__gBtlh {\n  position: relative;\n}\n.main-module_image-picker__loading-wrapper-content__21jzx {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  background-color: #ffffff;\n  width: 100%;\n  height: 100%;\n  border: 1px dashed #abb4cd;\n  border-radius: 2px;\n}\n.main-module_image-picker__loading-wrapper-content-text__2-Fup {\n  color: #5c657e;\n  margin-top: 0.5rem;\n}\n";
 var styles = {
   "image-picker__wrapper": "main-module_image-picker__wrapper__2RK3f",
   "image-picker__wrapper-error": "main-module_image-picker__wrapper-error__kCZeA",
@@ -21,7 +21,10 @@ var styles = {
   "image-picker__selected-file-remove-wrapper": "main-module_image-picker__selected-file-remove-wrapper__2v4W2",
   "image-picker__image-preview-wrapper": "main-module_image-picker__image-preview-wrapper__1jPXU",
   "image-picker__image-preview": "main-module_image-picker__image-preview__12pRu",
-  "image-picker__error-text": "main-module_image-picker__error-text__rXAvw"
+  "image-picker__error-text": "main-module_image-picker__error-text__rXAvw",
+  "image-picker__loading-wrapper": "main-module_image-picker__loading-wrapper__gBtlh",
+  "image-picker__loading-wrapper-content": "main-module_image-picker__loading-wrapper-content__21jzx",
+  "image-picker__loading-wrapper-content-text": "main-module_image-picker__loading-wrapper-content-text__2-Fup"
 };
 styleInject(css_248z);
 

package/build/esm/packages/aurora/src/css/image_picker/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;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,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;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,10 +1,8 @@
 import styleInject from '../../../../../external/style-inject/dist/style-inject.es.js';
 
-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 css_248z = ".main-module_with-loader__X2lLa {\n  text-align: center;\n}\n";
 var cssClasses = {
-  "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"
+  "with-loader": "main-module_with-loader__X2lLa"
 };
 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;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,8DAAkE;AAC1F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/index.d.ts

@@ -55,7 +55,7 @@ import { IControlRadioGroupOption } from "./components/controls/types";
 import { IDatepickerRange } from "./components/date_picker/types";
 import { IDropdownContext } from "./components/dropdown/context/types";
 import { IHeadingProps } from "./components/heading/types";
-import { IImageEditorProps } from "./components/xhr_image_picker/types";
+import { IImageEditorProps, TUploadedImageData } from "./components/xhr_image_picker/types";
 import { ILoaderProps } from "./components/loader/types";
 import { IWithLoader } from "./components/with_loader/types";
 import IconArrow from "./assets/icon_arrow";
@@ -129,4 +129,4 @@ export { Accordion, Button, Tooltip, ButtonsGroup, Dropdown, Select, MultiSelect
 /**
  * export types
  */
-export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IColorPickerColor, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize, IImageEditorProps };
+export type { IDropdownProps, ISelectOption, IHeadingProps, ICellProps, IIRowProps, ITableProps, IDropdownContext, IControlRadioGroupOption, IColor, IColorPickerColor, IDatepickerRange, TFilePickerFile, TImagePickerFile, TMessageBoxType, ILoaderProps, IWithLoader, TFlashMessage, TFlashMessageExtended, TImageSize, IImageEditorProps, TUploadedImageData };

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

@@ -41,7 +41,6 @@ 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';
@@ -89,4 +88,5 @@ 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.19.0-2",
+  "version": "2.19.0-20",
   "description": "aurora",
   "author": "k0ssak",
   "license": "MIT",