@dreamcommerce/aurora 3.1.31 → 3.1.32-1

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

@@ -1,34 +1,33 @@
 import { IMAGE_PICKER_EXTENSIONS, MIME_FILE_EXTENSIONS } from './image_picker_constants';
-import React, { ChangeEvent, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { TControlErrors } from "../control/control_types";
+export declare type TImagePickerExtension = typeof IMAGE_PICKER_EXTENSIONS[keyof typeof IMAGE_PICKER_EXTENSIONS];
+export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];
 export declare type TImagePickerFile = {
-    fileUrl: string;
     fileName: string;
+    fileUrl: string;
 };
-export declare type TImagePickerExtension = typeof IMAGE_PICKER_EXTENSIONS[keyof typeof IMAGE_PICKER_EXTENSIONS];
-export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];
 export declare type ImagePickerFileObject = {
-    fileList: FileList | null;
-    fileAsDataUrl?: string | ArrayBuffer | null;
+    fileName: string;
+    fileUrl: string;
+    fileExtension: string;
+    fileDataUrl: string | null;
+    size: {
+        width: number;
+        height: number;
+    } | null;
 };
 export interface IImagePicker {
     id: string;
     name?: string;
     className?: string;
-    onChange?: (file: ImagePickerFileObject) => void;
+    onChange?: (file: File) => void;
     allowedExtensions?: TImagePickerExtension[];
     allowedExtensionsLabel?: string;
-    initialFile?: TImagePickerFile;
     errors?: TControlErrors;
     onError?: (errors: string[]) => void;
-    onImageSizeUpdated?: (imageSize?: TImageSize) => void;
     topButtons?: ReactNode;
-    editedImageResult?: File;
-}
-export interface IImagePickerInput {
-    id: string;
-    allowedExtensions: TImagePickerExtension[];
-    isDragOver: boolean;
+    file: ImagePickerFileObject | null;
 }
 export interface IImagePickerPreviewContainer {
     children: ReactNode;
@@ -39,21 +38,14 @@ export declare type TImageSize = {
     height: number;
 };
 export interface IUseImagePicker {
+    updateFile: (file: File | null) => void;
     onDropFile: (event: React.DragEvent<HTMLDivElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLDivElement>) => void;
     onDragLeave: (event: React.DragEvent<HTMLDivElement>) => void;
-    onFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
-    onFileDelete: () => void;
-    onPreviewError: () => void;
-    changeFile: (files: FileList) => void;
-    file: TImagePickerFile | undefined;
-    isPreview: boolean;
     isDragOver: boolean;
 }
 export interface IUseImagePickerProps {
-    onChange?: (file: ImagePickerFileObject) => void;
-    initialFile?: TImagePickerFile;
+    onChange?: (file: File | null) => void;
     allowedExtensions?: TImagePickerExtension[];
-    inputRef: React.RefObject<HTMLInputElement>;
     onError?: (errors: string[]) => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA8D,0BAA0B,CAAC;AACzF,OAA8C,OAAO,CAAC;AAEtD,OAA+B,yCAAyC,CAAC"}
+{"version":3,"file":"image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA8D,0BAA0B,CAAC;AACzF,OAAiC,OAAO,CAAC;AAEzC,OAA+B,yCAAyC,CAAC"}

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

@@ -1,2 +1,2 @@
 import { IUseImagePicker, IUseImagePickerProps } from './image_picker_types';
-export declare const useImagePicker: ({ onChange, initialFile, allowedExtensions, inputRef, onError }: IUseImagePickerProps) => IUseImagePicker;
+export declare const useImagePicker: ({ onChange, allowedExtensions, onError }: IUseImagePickerProps) => IUseImagePicker;

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

@@ -1,55 +1,18 @@
-import { useRef, useState, useEffect } from 'react';
+import { useMemo, useState, useRef, useCallback } from 'react';
 import { i18n } from '../../i18n.js';
 import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
 import { MIME_TYPE_TO_FILE_EXTENSIONS, IMAGE_PICKER_ERROR } from './image_picker_constants.js';
 
 var useImagePicker = function useImagePicker(_ref) {
   var onChange = _ref.onChange,
-    initialFile = _ref.initialFile,
     allowedExtensions = _ref.allowedExtensions,
-    inputRef = _ref.inputRef,
     onError = _ref.onError;
-  var fileListRef = useRef(null);
-  var _useState = useState(initialFile),
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    file = _useState2[0],
-    setFile = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    isDragOver = _useState4[0],
-    setDragOver = _useState4[1];
-  var _useState5 = useState(true),
-    _useState6 = _slicedToArray(_useState5, 2),
-    isPreview = _useState6[0],
-    setPreview = _useState6[1];
-  var reader = useRef(new FileReader());
+    isDragOver = _useState2[0],
+    setDragOver = _useState2[1];
   var dragTimeoutRef = useRef(null);
-  useEffect(function () {
-    reader.current.result && getDataUrlFromFile(reader.current.result);
-    reader.current.addEventListener('load', function () {
-      return getDataUrlFromFile(reader.current.result);
-    }, false);
-    return function () {
-      return reader.current.removeEventListener('load', function () {
-        return getDataUrlFromFile(reader.current.result);
-      });
-    };
-  }, []);
-  useEffect(function () {
-    setFile(initialFile);
-  }, [initialFile]);
-  var onDropFile = function onDropFile(event) {
-    onError === null || onError === void 0 ? void 0 : onError([]);
-    event.stopPropagation();
-    event.preventDefault();
-    setDragOver(false);
-    var files = event.dataTransfer.files;
-    if (!files.length) return;
-    var isValid = validateFileExtension(allowedExtensions, files[0].type);
-    if (!isValid) return;
-    updateFile(files);
-  };
-  var validateFileExtension = function validateFileExtension(allowedExtensions, mimeType) {
+  var validateFileExtension = useCallback(function (allowedExtensions, mimeType) {
     if (!allowedExtensions) return true;
     var isValid = allowedExtensions.reduce(function (acc, extension) {
       return acc ? acc : MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
@@ -58,41 +21,28 @@ var useImagePicker = function useImagePicker(_ref) {
       onError === null || onError === void 0 ? void 0 : onError([i18n.t(IMAGE_PICKER_ERROR.invalidFileFormat)]);
     }
     return isValid;
-  };
-  var onFileChange = function onFileChange(event) {
-    changeFile(event.target.files);
-  };
-  var changeFile = function changeFile(files) {
-    onError === null || onError === void 0 ? void 0 : onError([]);
-    updateFile(files);
-  };
-  var updateFile = function updateFile(files) {
-    if (files !== null && files !== void 0 && files.length) {
-      fileListRef.current = files;
-      reader.current.readAsDataURL(files[0]);
-      setFile({
-        fileName: files === null || files === void 0 ? void 0 : files[0].name,
-        fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
-      });
-      var isValid = validateFileExtension(allowedExtensions, files[0].type);
-      if (isValid) onChange === null || onChange === void 0 ? void 0 : onChange({
-        fileList: files
-      });
+  }, [onError]);
+  var updateFile = useCallback(function (file) {
+    if (file) {
+      var isValid = validateFileExtension(allowedExtensions, file.type);
+      if (isValid) {
+        onError === null || onError === void 0 ? void 0 : onError([]);
+        onChange === null || onChange === void 0 ? void 0 : onChange(file);
+      }
     } else {
-      setFile(undefined);
-      onChange === null || onChange === void 0 ? void 0 : onChange({
-        fileList: files
-      });
+      onError === null || onError === void 0 ? void 0 : onError([]);
+      onChange === null || onChange === void 0 ? void 0 : onChange(null);
     }
-    setPreview(true);
-  };
-  var getDataUrlFromFile = function getDataUrlFromFile(fileReaderResult) {
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: fileListRef.current,
-      fileAsDataUrl: fileReaderResult
-    });
-  };
-  var onDragOver = function onDragOver(event) {
+  }, [allowedExtensions, onChange, onError, validateFileExtension]);
+  var onDropFile = useCallback(function (event) {
+    event.stopPropagation();
+    event.preventDefault();
+    setDragOver(false);
+    var files = event.dataTransfer.files;
+    if (!files.length) return;
+    updateFile(files[0]);
+  }, [updateFile]);
+  var onDragOver = useCallback(function (event) {
     var dt = event.dataTransfer;
     if (!dt.types || !(dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.includes('Files'))) {
       return;
@@ -102,38 +52,22 @@ var useImagePicker = function useImagePicker(_ref) {
     event.dataTransfer.dropEffect = 'copy';
     setDragOver(true);
     dragTimeoutRef.current && window.clearTimeout(dragTimeoutRef.current);
-  };
-  var onDragLeave = function onDragLeave(event) {
+  }, []);
+  var onDragLeave = useCallback(function () {
     dragTimeoutRef.current = setTimeout(function () {
       setDragOver(false);
       dragTimeoutRef.current = null;
     }, 25);
-  };
-  var onFileDelete = function onFileDelete() {
-    inputRef.current.value = '';
-    fileListRef.current = null;
-    setFile(undefined);
-    setPreview(true);
-    onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: null,
-      fileAsDataUrl: null
-    });
-  };
-  var onPreviewError = function onPreviewError() {
-    setPreview(false);
-  };
-  return {
-    onDropFile: onDropFile,
-    onFileChange: onFileChange,
-    onDragOver: onDragOver,
-    onDragLeave: onDragLeave,
-    onFileDelete: onFileDelete,
-    onPreviewError: onPreviewError,
-    changeFile: changeFile,
-    file: file,
-    isPreview: isPreview,
-    isDragOver: isDragOver
-  };
+  }, []);
+  return useMemo(function () {
+    return {
+      updateFile: updateFile,
+      onDropFile: onDropFile,
+      onDragOver: onDragOver,
+      onDragLeave: onDragLeave,
+      isDragOver: isDragOver
+    };
+  }, [updateFile, isDragOver, onDragLeave, onDragOver, onDropFile]);
 };
 
 export { useImagePicker };

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

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

@@ -1,4 +1,4 @@
-import React__default, { forwardRef, useRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useState, useCallback, useRef, 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 { Loader } from '../loader/loader.js';
@@ -15,12 +15,10 @@ var XhrImagePicker = /*#__PURE__*/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_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,
@@ -30,165 +28,159 @@ var XhrImagePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     t = _useTranslation2[0];
   var httpApi = useHttpApi();
   var pendingRequestRef = React__default.useRef();
-  var initialImageFile = useRef();
   var _useModalsContext = useModalsContext(),
     showModal = _useModalsContext.showModal,
     hideModal = _useModalsContext.hideModal;
   var modalId = "image-picker-editor-".concat(id);
-  var _useState = useState(),
+  var _useState = useState(initialFile ? _objectSpread2(_objectSpread2({}, initialFile), {}, {
+      fileExtension: FileUtils.getFileExtension(initialFile.fileName),
+      fileDataUrl: null,
+      size: null
+    }) : null),
     _useState2 = _slicedToArray(_useState, 2),
-    initialImage = _useState2[0],
-    setInitialImage = _useState2[1];
-  var _useState3 = useState(),
+    image = _useState2[0],
+    setImage = _useState2[1];
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
-    image = _useState4[0],
-    setImage = _useState4[1];
-  var _useState5 = useState(''),
-    _useState6 = _slicedToArray(_useState5, 2),
-    imageEditorSrc = _useState6[0],
-    setImageEditorSrc = _useState6[1];
-  var _useState7 = useState(),
-    _useState8 = _slicedToArray(_useState7, 2),
-    imageEditorResult = _useState8[0],
-    setImageEditorResult = _useState8[1];
-  var _useState9 = useState(false),
-    _useState10 = _slicedToArray(_useState9, 2),
-    isLoading = _useState10[0],
-    setIsLoading = _useState10[1];
-  var _useState11 = useState(),
-    _useState12 = _slicedToArray(_useState11, 2),
-    imageExtenstion = _useState12[0],
-    setImageExtenstion = _useState12[1];
-  var fileAsDataUrlRef = useRef(undefined);
-  var handleControlChange = /*#__PURE__*/function () {
-    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(file) {
-      var fileList, fileAsDataUrl, _httpApi$fetch, response, cancelRequest, responseObject, _responseObject$data$, paths;
+    isLoading = _useState4[0],
+    setIsLoading = _useState4[1];
+  var createImageFromUrl = useCallback(/*#__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:
-            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 = useRef('');
+  var imageSize = image === null || image === void 0 ? void 0 : image.size;
+  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 ? _objectSpread2(_objectSpread2({}, img), {}, {
+            size: size
+          }) : null;
+        });
+      });
+    };
+    if (!!initialFileUrl && imageUrlRef.current !== initialFileUrl) {
+      imageUrlRef.current = initialFileUrl;
+      if (!imageSize) setImageSizeBasedOnUrl(initialFileUrl);
+    }
+  }, [createImageFromUrl, imageSize, initialFileUrl]);
+  var handleControlChange = useCallback(/*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(file) {
+      var _responseObject$data$2;
+      var _httpApi$fetch, response, cancelRequest, responseObject, _responseObject$data$, img, size, newImage, paths;
+      return _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: 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: 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(_objectSpread2(_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);
     };
-  }();
-  useEffect(function () {
-    if (initialFile) {
-      setImageExtenstion(FileUtils.getFileExtension(initialFile === null || initialFile === void 0 ? void 0 : initialFile.fileName));
-      initialImageFile.current = initialFile;
-      var setFileFromUrl = /*#__PURE__*/function () {
-        var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee2(fileData) {
-          var response, data, file;
-          return _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);
-    }
-  }, []);
-  useEffect(function () {
-    image && setImageExtenstion(FileUtils.getFileExtension(image === null || image === void 0 ? void 0 : image.name));
-  }, [image]);
-  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]);
   useEffect(function () {
     return function () {
       if (pendingRequestRef.current) pendingRequestRef.current();
     };
   }, []);
-  var renderImageEditor = function renderImageEditor(defaultProps) {
-    return ImageEditor ? (/*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__default.createElement(ImageEditor, _objectSpread2({}, defaultProps)))) : null;
-  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
     className: "aurora-relative"
   }, isLoading && (/*#__PURE__*/React__default.createElement("div", {
@@ -205,9 +197,8 @@ var XhrImagePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     errors: errors,
     allowedExtensions: allowedExtensions,
     allowedExtensionsLabel: allowedExtensionsLabel,
-    initialFile: initialImageFile.current,
-    onImageSizeUpdated: onImageSizeUpdated,
-    topButtons: !!ImageEditor && imageExtenstion !== 'svg' && (/*#__PURE__*/React__default.createElement("button", {
+    file: image,
+    topButtons: !!ImageEditor && image && image.fileExtension !== 'svg' && (/*#__PURE__*/React__default.createElement("button", {
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation();
@@ -220,19 +211,19 @@ var XhrImagePicker = /*#__PURE__*/forwardRef(function (_ref, ref) {
     }), /*#__PURE__*/React__default.createElement("span", {
       className: "aurora-text-xs aurora-text aurora-font-semibold"
     }, "".concat(t('Edit'))))),
-    editedImageResult: imageEditorResult,
     ref: ref
   })), !!ImageEditor && (/*#__PURE__*/React__default.createElement(Modal, {
     name: modalId,
     header: /*#__PURE__*/React__default.createElement(React__default.Fragment, null, t('Edit image')),
     width: "l"
-  }, renderImageEditor({
-    src: imageEditorSrc,
+  }, /*#__PURE__*/React__default.createElement("div", null, /*#__PURE__*/React__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/esm/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,+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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

package/build/esm/packages/aurora/src/components/xhr_image_picker/xhr_image_picker_types.d.ts

@@ -1,18 +1,16 @@
 /// <reference types="react" />
-import { IImagePicker } from "../image_picker/image_picker_types";
-export interface IXhrImagePickerProps extends Omit<IImagePicker, 'topButtons'> {
+import { IImagePicker, ImagePickerFileObject, TImagePickerFile } from "../image_picker/image_picker_types";
+export interface IXhrImagePickerProps extends Omit<IImagePicker, 'topButtons' | 'onChange' | 'file'> {
     url: string;
-    onUploaded?: (data: TUploadedImageData) => void;
-    onUploadError?: Function;
+    initialFile?: TImagePickerFile;
+    onChange?: (val: TUploadedImageData | null) => void;
     ImageEditor?: React.FunctionComponent<IImageEditorProps>;
 }
 export interface IImageEditorProps {
     src?: File | string;
     onEditionDone?: (result: File | undefined) => void;
 }
-export declare type TUploadedImageData = {
-    fileList: FileList;
-    dataUrl: string | ArrayBuffer | null | undefined;
+export declare type TUploadedImageData = ImagePickerFileObject & {
     imageId: string;
     paths?: Record<any, any>;
 };

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

@@ -1 +1 @@
-{"version":3,"file":"xhr_image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/xhr_image_picker/xhr_image_picker_types.ts"],"names":[],"mappings":"AAAA,OAA6B,mDAAmD,CAAC"}
+{"version":3,"file":"xhr_image_picker_types.js","sourceRoot":"","sources":["../../../../../../../src/components/xhr_image_picker/xhr_image_picker_types.ts"],"names":[],"mappings":"AAAA,OAAsE,mDAAmD,CAAC"}

package/package.json

@@ -2,7 +2,7 @@
   "name": "@dreamcommerce/aurora",
   "packageManager": "yarn@3.2.0",
   "sideEffects": false,
-  "version": "3.1.31",
+  "version": "3.1.32-1",
   "description": "aurora",
   "author": "zefirek",
   "license": "MIT",