@dreamcommerce/aurora 3.1.31 → 3.1.32-1

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

@@ -23,12 +23,10 @@ var XhrImagePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     url = _ref.url,
     name = _ref.name,
-    onUploaded = _ref.onUploaded,
     initialFile = _ref.initialFile,
     errors = _ref.errors,
     onError = _ref.onError,
     onChange = _ref.onChange,
-    onImageSizeUpdated = _ref.onImageSizeUpdated,
     _ref$allowedExtension = _ref.allowedExtensions,
     allowedExtensions = _ref$allowedExtension === void 0 ? [image_picker_constants.IMAGE_PICKER_EXTENSIONS.WEBP, image_picker_constants.IMAGE_PICKER_EXTENSIONS.JPG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.PNG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.GIF, image_picker_constants.IMAGE_PICKER_EXTENSIONS.SVG, image_picker_constants.IMAGE_PICKER_EXTENSIONS.JPEG] : _ref$allowedExtension,
     allowedExtensionsLabel = _ref.allowedExtensionsLabel,
@@ -38,165 +36,159 @@ var XhrImagePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     t = _useTranslation2[0];
   var httpApi = use_http_api.useHttpApi();
   var pendingRequestRef = React__default['default'].useRef();
-  var initialImageFile = React.useRef();
   var _useModalsContext = use_modals_context.useModalsContext(),
     showModal = _useModalsContext.showModal,
     hideModal = _useModalsContext.hideModal;
   var modalId = "image-picker-editor-".concat(id);
-  var _useState = React.useState(),
+  var _useState = React.useState(initialFile ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, initialFile), {}, {
+      fileExtension: utilities.FileUtils.getFileExtension(initialFile.fileName),
+      fileDataUrl: null,
+      size: null
+    }) : null),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    initialImage = _useState2[0],
-    setInitialImage = _useState2[1];
-  var _useState3 = React.useState(),
+    image = _useState2[0],
+    setImage = _useState2[1];
+  var _useState3 = React.useState(false),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    image = _useState4[0],
-    setImage = _useState4[1];
-  var _useState5 = React.useState(''),
-    _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    imageEditorSrc = _useState6[0],
-    setImageEditorSrc = _useState6[1];
-  var _useState7 = React.useState(),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    imageEditorResult = _useState8[0],
-    setImageEditorResult = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    isLoading = _useState10[0],
-    setIsLoading = _useState10[1];
-  var _useState11 = React.useState(),
-    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    imageExtenstion = _useState12[0],
-    setImageExtenstion = _useState12[1];
-  var fileAsDataUrlRef = React.useRef(undefined);
-  var handleControlChange = /*#__PURE__*/function () {
-    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(file) {
-      var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject, _responseObject$data$, paths;
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var createImageFromUrl = React.useCallback(/*#__PURE__*/function () {
+    var _ref2 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee(url) {
+      var img;
       return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
-            fileList = file.fileList, fileAsDataUrl = file.fileAsDataUrl;
-            fileList && setImage(fileList[0]);
-            onChange === null || onChange === void 0 ? void 0 : onChange({
-              fileList: fileList,
-              fileAsDataUrl: fileAsDataUrl
-            });
-            fileAsDataUrlRef.current = fileAsDataUrl;
-            if (!(!fileList || !fileList.length || fileAsDataUrl)) {
-              _context.next = 6;
-              break;
-            }
-            return _context.abrupt("return");
-          case 6:
+            img = new Image();
+            img.src = url;
+            _context.next = 4;
+            return img.decode();
+          case 4:
+            return _context.abrupt("return", img);
+          case 5:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }(), []);
+  var initialFileUrl = initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl;
+  var imageUrlRef = React.useRef('');
+  var imageSize = image === null || image === void 0 ? void 0 : image.size;
+  React.useEffect(function () {
+    var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
+      createImageFromUrl(fileUrl).then(function (image) {
+        var size = {
+          width: image.naturalWidth,
+          height: image.naturalHeight
+        };
+        setImage(function (img) {
+          return img ? _rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, img), {}, {
+            size: size
+          }) : null;
+        });
+      });
+    };
+    if (!!initialFileUrl && imageUrlRef.current !== initialFileUrl) {
+      imageUrlRef.current = initialFileUrl;
+      if (!imageSize) setImageSizeBasedOnUrl(initialFileUrl);
+    }
+  }, [createImageFromUrl, imageSize, initialFileUrl]);
+  var handleControlChange = React.useCallback(/*#__PURE__*/function () {
+    var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2(file) {
+      var _responseObject$data$2;
+      var _httpApi$fetch, response, cancelRequest, responseObject, _responseObject$data$, img, size, newImage, paths;
+      return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
             if (pendingRequestRef.current) {
               pendingRequestRef.current();
               pendingRequestRef.current = undefined;
             }
+            if (file) {
+              _context2.next = 5;
+              break;
+            }
+            setImage(null);
+            onChange === null || onChange === void 0 ? void 0 : onChange(null);
+            return _context2.abrupt("return");
+          case 5:
             setIsLoading(true);
             _httpApi$fetch = httpApi.fetch({
               url: url,
               method: http_requester_contants.REQUEST_TYPES.post,
-              data: fileList[0]
+              data: file
             }), response = _httpApi$fetch.response, cancelRequest = _httpApi$fetch.cancelRequest;
             pendingRequestRef.current = cancelRequest;
-            _context.prev = 10;
-            _context.next = 13;
+            _context2.prev = 8;
+            _context2.next = 11;
             return response;
-          case 13:
-            responseObject = _context.sent;
-            _context.next = 19;
+          case 11:
+            responseObject = _context2.sent;
+            _context2.next = 18;
             break;
-          case 16:
-            _context.prev = 16;
-            _context.t0 = _context["catch"](10);
+          case 14:
+            _context2.prev = 14;
+            _context2.t0 = _context2["catch"](8);
             onError === null || onError === void 0 ? void 0 : onError([t('File upload failed')]);
-          case 19:
-            _context.prev = 19;
             setIsLoading(false);
-            return _context.finish(19);
-          case 22:
+          case 18:
             if (responseObject) {
-              _context.next = 24;
+              _context2.next = 20;
               break;
             }
-            return _context.abrupt("return");
-          case 24:
+            return _context2.abrupt("return");
+          case 20:
             if (!(responseObject.data.isSuccess === false)) {
-              _context.next = 27;
+              _context2.next = 23;
               break;
             }
             onError === null || onError === void 0 ? void 0 : onError((_responseObject$data$ = responseObject.data.messages) !== null && _responseObject$data$ !== void 0 ? _responseObject$data$ : [t('File upload failed')]);
-            return _context.abrupt("return");
-          case 27:
+            return _context2.abrupt("return");
+          case 23:
+            _context2.next = 25;
+            return createImageFromUrl(URL.createObjectURL(file));
+          case 25:
+            img = _context2.sent;
+            size = {
+              width: img.naturalWidth,
+              height: img.naturalHeight
+            };
+            newImage = {
+              fileName: file.name,
+              fileUrl: (_responseObject$data$2 = responseObject.data.imagePath) !== null && _responseObject$data$2 !== void 0 ? _responseObject$data$2 : URL.createObjectURL(file),
+              fileExtension: utilities.FileUtils.getFileExtension(file.name),
+              fileDataUrl: URL.createObjectURL(file),
+              size: size
+            };
             if (responseObject.data.imagePath) {
               paths = {
                 original: responseObject.data.imagePath
               };
             }
-            onUploaded === null || onUploaded === void 0 ? void 0 : onUploaded({
-              fileList: fileList,
-              dataUrl: fileAsDataUrlRef.current,
+            setImage(newImage);
+            setIsLoading(false);
+            onChange === null || onChange === void 0 ? void 0 : onChange(_rollupPluginBabelHelpers.objectSpread2(_rollupPluginBabelHelpers.objectSpread2({}, newImage), {}, {
               imageId: responseObject.data.imageId,
               paths: paths
-            });
-          case 29:
+            }));
+          case 32:
           case "end":
-            return _context.stop();
+            return _context2.stop();
         }
-      }, _callee, null, [[10, 16, 19, 22]]);
+      }, _callee2, null, [[8, 14]]);
     }));
-    return function handleControlChange(_x) {
-      return _ref2.apply(this, arguments);
+    return function (_x2) {
+      return _ref3.apply(this, arguments);
     };
-  }();
-  React.useEffect(function () {
-    if (initialFile) {
-      setImageExtenstion(utilities.FileUtils.getFileExtension(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileName));
-      initialImageFile.current = initialFile;
-      var setFileFromUrl = /*#__PURE__*/function () {
-        var _ref3 = _rollupPluginBabelHelpers.asyncToGenerator(/*#__PURE__*/_rollupPluginBabelHelpers.regeneratorRuntime().mark(function _callee2(fileData) {
-          var response, data, file;
-          return _rollupPluginBabelHelpers.regeneratorRuntime().wrap(function _callee2$(_context2) {
-            while (1) switch (_context2.prev = _context2.next) {
-              case 0:
-                _context2.next = 2;
-                return fetch(fileData.fileUrl);
-              case 2:
-                response = _context2.sent;
-                _context2.next = 5;
-                return response.blob();
-              case 5:
-                data = _context2.sent;
-                file = new File([data], fileData.fileName);
-                setInitialImage(file);
-              case 8:
-              case "end":
-                return _context2.stop();
-            }
-          }, _callee2);
-        }));
-        return function setFileFromUrl(_x2) {
-          return _ref3.apply(this, arguments);
-        };
-      }();
-      if (!initialImageFile.current) return;
-      setFileFromUrl(initialImageFile.current);
-    }
-  }, []);
-  React.useEffect(function () {
-    image && setImageExtenstion(utilities.FileUtils.getFileExtension(image === null || image === void 0 ? void 0 : image.name));
-  }, [image]);
-  React.useEffect(function () {
-    var src = image !== null && image !== void 0 ? image : initialImage;
-    setImageEditorSrc(src !== null && src !== void 0 ? src : '');
-  }, [image, initialImage, isLoading]);
+  }(), [createImageFromUrl, httpApi, onChange, onError, t, url]);
   React.useEffect(function () {
     return function () {
       if (pendingRequestRef.current) pendingRequestRef.current();
     };
   }, []);
-  var renderImageEditor = function renderImageEditor(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("div", {
     className: "aurora-relative"
   }, isLoading && (/*#__PURE__*/React__default['default'].createElement("div", {
@@ -213,9 +205,8 @@ var XhrImagePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     errors: errors,
     allowedExtensions: allowedExtensions,
     allowedExtensionsLabel: allowedExtensionsLabel,
-    initialFile: initialImageFile.current,
-    onImageSizeUpdated: onImageSizeUpdated,
-    topButtons: !!ImageEditor && imageExtenstion !== 'svg' && (/*#__PURE__*/React__default['default'].createElement("button", {
+    file: image,
+    topButtons: !!ImageEditor && image && image.fileExtension !== 'svg' && (/*#__PURE__*/React__default['default'].createElement("button", {
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -228,19 +219,19 @@ var XhrImagePicker = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }), /*#__PURE__*/React__default['default'].createElement("span", {
       className: "aurora-text-xs aurora-text aurora-font-semibold"
     }, "".concat(t('Edit'))))),
-    editedImageResult: imageEditorResult,
     ref: ref
   })), !!ImageEditor && (/*#__PURE__*/React__default['default'].createElement(modal.Modal, {
     name: modalId,
     header: /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, t('Edit image')),
     width: "l"
-  }, renderImageEditor({
-    src: imageEditorSrc,
+  }, /*#__PURE__*/React__default['default'].createElement("div", null, /*#__PURE__*/React__default['default'].createElement(ImageEditor, {
+    src: image === null || image === void 0 ? void 0 : image.fileUrl,
     onEditionDone: function onEditionDone(result) {
       hideModal(modalId);
-      setImageEditorResult(result);
+      if (!result) return;
+      handleControlChange(result);
     }
-  }))));
+  })))));
 });
 XhrImagePicker.displayName = 'XhrImagePicker';
 

package/build/cjs/packages/aurora/src/components/xhr_image_picker/xhr_image_picker.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;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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control.js

@@ -1,4 +1,4 @@
-import React__default, { forwardRef } from 'react';
+import React__default, { forwardRef, useCallback } from 'react';
 import { Control } from '../../control/control.js';
 import { HelperText } from '../../helper_text/helper_text.js';
 import { Label } from '../../label/label.js';
@@ -17,23 +17,16 @@ var XhrImagePickerControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
     className = _ref.className,
     errors = _ref.errors,
     tooltip = _ref.tooltip,
-    onUploaded = _ref.onUploaded,
     helperText = _ref.helperText,
-    onImageSizeUpdated = _ref.onImageSizeUpdated,
     ImageEditor = _ref.ImageEditor,
     onError = _ref.onError;
-  var handleControlError = function handleControlError(errors) {
+  var handleControlError = useCallback(function (errors) {
     onError === null || onError === void 0 ? void 0 : onError(errors);
-  };
-  var handleControlChange = function handleControlChange(file) {
-    var fileList = file.fileList,
-      fileAsDataUrl = file.fileAsDataUrl;
+  }, [onError]);
+  var handleControlChange = useCallback(function (val) {
     onError === null || onError === void 0 ? void 0 : onError([]);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: fileList,
-      fileAsDataUrl: fileAsDataUrl
-    });
-  };
+    onChange === null || onChange === void 0 ? void 0 : onChange(val);
+  }, [onChange, onError]);
   return /*#__PURE__*/React__default.createElement(Control, {
     classname: "aurora-flex-col"
   }, label ? (/*#__PURE__*/React__default.createElement(Label, {
@@ -51,8 +44,6 @@ var XhrImagePickerControl = /*#__PURE__*/forwardRef(function (_ref, ref) {
     initialFile: initialFile,
     className: className,
     errors: errors,
-    onUploaded: onUploaded,
-    onImageSizeUpdated: onImageSizeUpdated,
     ImageEditor: ImageEditor,
     ref: ref
   }), helperText ? /*#__PURE__*/React__default.createElement(HelperText, null, helperText) : null);

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

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.d.ts

@@ -1,12 +1,10 @@
 import { TControlErrors } from "../../control/control_types";
-import { IImagePicker, ImagePickerFileObject, TImageSize } from "../../image_picker/image_picker_types";
-import { TUploadedImageData } from "../../xhr_image_picker/xhr_image_picker_types";
+import { IXhrImagePickerProps, TUploadedImageData } from "../../xhr_image_picker/xhr_image_picker_types";
 import { ReactNode } from 'react';
-export interface IXhrImagePickerControl extends IImagePicker {
+export interface IXhrImagePickerControl extends Omit<IXhrImagePickerProps, 'onChange'> {
     url: string;
     label?: string;
-    onChange?: (file: ImagePickerFileObject, size?: TImageSize) => void;
-    onUploaded?: (data: TUploadedImageData) => void;
+    onChange?: (val: TUploadedImageData | null) => void;
     ImageEditor?: React.FunctionComponent;
     errors?: TControlErrors;
     required?: boolean;

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.js

@@ -1,5 +1,4 @@
 import '@auroraComponents/control/control_types';
-import '@auroraComponents/image_picker/image_picker_types';
 import '@auroraComponents/xhr_image_picker/xhr_image_picker_types';
 import 'react';
 //# sourceMappingURL=xhr_image_picker_control_types.js.map

package/build/esm/packages/aurora/src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.js.map

@@ -1 +1 @@
-{"version":3,"file":"xhr_image_picker_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.ts"],"names":[],"mappings":"AAAA,OAA+B,yCAAyC,CAAC;AACzE,OAAgE,mDAAmD,CAAC;AACpH,OAAmC,2DAA2D,CAAC;AAC/F,OAA0B,OAAO,CAAC"}
+{"version":3,"file":"xhr_image_picker_control_types.js","sourceRoot":"","sources":["../../../../../../../../src/components/controls/xhr_image_picker_control/xhr_image_picker_control_types.ts"],"names":[],"mappings":"AAAA,OAA+B,yCAAyC,CAAC;AACzE,OAAyD,2DAA2D,CAAC;AACrH,OAA0B,OAAO,CAAC"}

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

@@ -2,8 +2,7 @@ import React from 'react';
 import { TImagePickerFile } from '../image_picker_types';
 declare type TImagePickerPreviewProps = {
     file: TImagePickerFile;
-    onError: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
     onLoad?: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
 };
-export declare const ImagePickerPreview: ({ file, onError, onLoad }: TImagePickerPreviewProps) => React.JSX.Element;
+export declare const ImagePickerPreview: ({ file, onLoad }: TImagePickerPreviewProps) => React.JSX.Element;
 export {};

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

@@ -2,7 +2,6 @@ import React__default from 'react';
 
 var ImagePickerPreview = function ImagePickerPreview(_ref) {
   var file = _ref.file,
-    onError = _ref.onError,
     onLoad = _ref.onLoad;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-min-h-16 aurora-flex aurora-justify-center aurora-items-center"
@@ -10,7 +9,6 @@ var ImagePickerPreview = function ImagePickerPreview(_ref) {
     className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-object-contain",
     alt: file.fileName,
     src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '',
-    onError: onError,
     onLoad: onLoad
   }));
 };

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

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

@@ -1,6 +1,6 @@
-import React__default, { memo, forwardRef, useState, useEffect, createRef } from 'react';
+import React__default, { memo, forwardRef, createRef } from 'react';
 import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
-import { slicedToArray as _slicedToArray, asyncToGenerator as _asyncToGenerator, regeneratorRuntime as _regeneratorRuntime } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { cn } from '../../utilities/cn.js';
 import { ErrorList } from '../error_list/error_list.js';
 import { IMAGE_PICKER_EXTENSIONS } from './image_picker_constants.js';
@@ -21,94 +21,28 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
     _ref$allowedExtension = _ref.allowedExtensions,
     allowedExtensions = _ref$allowedExtension === void 0 ? [IMAGE_PICKER_EXTENSIONS.WEBP, IMAGE_PICKER_EXTENSIONS.JPG, IMAGE_PICKER_EXTENSIONS.PNG, IMAGE_PICKER_EXTENSIONS.GIF, IMAGE_PICKER_EXTENSIONS.SVG, IMAGE_PICKER_EXTENSIONS.JPEG] : _ref$allowedExtension,
     allowedExtensionsLabel = _ref.allowedExtensionsLabel,
-    initialFile = _ref.initialFile,
     name = _ref.name,
-    onImageSizeUpdated = _ref.onImageSizeUpdated,
     topButtons = _ref.topButtons,
-    editedImageResult = _ref.editedImageResult;
+    file = _ref.file;
   var _useTranslation = useTranslation(),
     _useTranslation2 = _slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   var inputRef = /*#__PURE__*/createRef();
-  var handleOnChange = function handleOnChange(ev) {
-    var _ev$fileList;
-    onChange === null || onChange === void 0 ? void 0 : onChange(ev);
-    if ((_ev$fileList = ev.fileList) !== null && _ev$fileList !== void 0 && _ev$fileList.length) {
-      setImageSizeBasedOnUrl(URL.createObjectURL(ev.fileList[0]));
-    }
-  };
   var _useImagePicker = useImagePicker({
-      initialFile: initialFile,
-      onChange: handleOnChange,
+      onChange: onChange,
       allowedExtensions: allowedExtensions,
-      onError: onError,
-      inputRef: inputRef
+      onError: onError
     }),
+    updateFile = _useImagePicker.updateFile,
     onDropFile = _useImagePicker.onDropFile,
-    onFileChange = _useImagePicker.onFileChange,
     onDragOver = _useImagePicker.onDragOver,
     onDragLeave = _useImagePicker.onDragLeave,
-    onFileDelete = _useImagePicker.onFileDelete,
-    onPreviewError = _useImagePicker.onPreviewError,
-    changeFile = _useImagePicker.changeFile,
-    file = _useImagePicker.file,
-    isPreview = _useImagePicker.isPreview,
     isDragOver = _useImagePicker.isDragOver;
-  var _useState = useState(undefined),
-    _useState2 = _slicedToArray(_useState, 2),
-    imageSize = _useState2[0],
-    setImageSize = _useState2[1];
   var acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
-  useEffect(function () {
-    initialFile && setImageSizeBasedOnUrl(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileUrl);
-  }, [initialFile]);
-  useEffect(function () {
-    if (!editedImageResult) return;
-    var fileList = createFileList(editedImageResult);
-    changeFile(fileList);
-  }, [editedImageResult]);
-  var createFileList = function createFileList(file) {
-    var fileArray = [];
-    fileArray.push(file);
-    return fileArray;
-  };
-  var setImageSizeBasedOnUrl = function setImageSizeBasedOnUrl(fileUrl) {
-    createImageFromUrl(fileUrl).then(function (image) {
-      var size = {
-        width: image.naturalWidth,
-        height: image.naturalHeight
-      };
-      setImageSize(size);
-      onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(size);
-    });
-  };
-  var createImageFromUrl = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(url) {
-      var img;
-      return _regeneratorRuntime().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            img = new Image();
-            img.src = url;
-            _context.next = 4;
-            return img.decode();
-          case 4:
-            return _context.abrupt("return", img);
-          case 5:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function createImageFromUrl(_x) {
-      return _ref2.apply(this, arguments);
-    };
-  }();
   var handleOnFileDelete = function handleOnFileDelete() {
-    onFileDelete();
-    setImageSize(undefined);
-    onImageSizeUpdated === null || onImageSizeUpdated === void 0 ? void 0 : onImageSizeUpdated(undefined);
+    updateFile(null);
   };
+  var isPreview = file !== null;
   return /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-mb-1"
   }, /*#__PURE__*/React__default.createElement("div", {
@@ -138,17 +72,16 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
   }, topButtons && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, topButtons), /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-relative"
   }, /*#__PURE__*/React__default.createElement(ImagePickerPreview, {
-    file: file,
-    onError: onPreviewError
+    file: file
   })), /*#__PURE__*/React__default.createElement(UploadedImagePickerItem, {
-    imageSize: imageSize,
+    imageSize: file.size,
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onFileDelete: handleOnFileDelete
   })), isDragOver && /*#__PURE__*/React__default.createElement(ImagePickerDragOverPlaceholder, {
     onDropFile: onDropFile
   }))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", null, "".concat(t('No preview'))), /*#__PURE__*/React__default.createElement(ImagePickerDeleteButton, {
-    onFileDelete: onFileDelete
+    onFileDelete: handleOnFileDelete
   }))) : (/*#__PURE__*/React__default.createElement(ImagePickerInput, {
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
@@ -157,7 +90,11 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
     onDropFile: onDropFile
   })), /*#__PURE__*/React__default.createElement("input", {
     className: "aurora-hidden",
-    onChange: onFileChange,
+    onChange: function onChange(e) {
+      var _e$target$files$, _e$target$files;
+      updateFile((_e$target$files$ = (_e$target$files = e.target.files) === null || _e$target$files === void 0 ? void 0 : _e$target$files[0]) !== null && _e$target$files$ !== void 0 ? _e$target$files$ : null);
+      e.target.value = '';
+    },
     id: id,
     ref: inputRef,
     type: "file",
@@ -166,10 +103,7 @@ var ImagePicker = /*#__PURE__*/memo(/*#__PURE__*/forwardRef(function (_ref, ref)
   }))), errors && /*#__PURE__*/React__default.createElement(ErrorList, {
     errors: errors
   }));
-}), function (prev, curr) {
-  var _prev$initialFile, _curr$initialFile, _prev$initialFile2, _curr$initialFile2;
-  return ((_prev$initialFile = prev.initialFile) === null || _prev$initialFile === void 0 ? void 0 : _prev$initialFile.fileUrl) === ((_curr$initialFile = curr.initialFile) === null || _curr$initialFile === void 0 ? void 0 : _curr$initialFile.fileUrl) && ((_prev$initialFile2 = prev.initialFile) === null || _prev$initialFile2 === void 0 ? void 0 : _prev$initialFile2.fileName) === ((_curr$initialFile2 = curr.initialFile) === null || _curr$initialFile2 === void 0 ? void 0 : _curr$initialFile2.fileName) && prev.errors === curr.errors && prev.editedImageResult === curr.editedImageResult && prev.topButtons === curr.topButtons;
-});
+}));
 ImagePicker.displayName = 'ImagePicker';
 
 export { ImagePicker };

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