@dreamcommerce/aurora 3.1.30 → 3.1.32-1

package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable.js

@@ -0,0 +1,75 @@
+import { useState, useRef, useCallback, useEffect } from 'react';
+import { slicedToArray as _slicedToArray } from '../../../../../../_virtual/_rollupPluginBabelHelpers.js';
+import { RESIZING_DIRECTIONS } from '../resizable_container_constants.js';
+import { getInitialWidth, removeEventListeners, saveWidthToStorage, addEventListeners } from '../resizable_utils.js';
+
+var useResizable = function useResizable(name, variant, widthConfig) {
+  var storageKey = "sve_resizable_".concat(name, "_width");
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isResizing = _useState2[0],
+    setIsResizing = _useState2[1];
+  var isResizingRef = useRef(false);
+  var resizingDirection = useRef(RESIZING_DIRECTIONS.left);
+  var initialMouseX = useRef(0);
+  var initialWidth = useRef(0);
+  var _useState3 = useState(function () {
+      return getInitialWidth(storageKey, widthConfig);
+    }),
+    _useState4 = _slicedToArray(_useState3, 2),
+    width = _useState4[0],
+    setWidth = _useState4[1];
+  var widthRef = useRef(width);
+  var handleMouseMove = useCallback(function (e) {
+    if (!isResizingRef.current) return;
+    var direction = variant === 'horizontal' ? resizingDirection.current : variant;
+    var newWidth = calculateNewWidth(e.clientX, direction, widthConfig, initialMouseX.current, initialWidth.current);
+    widthRef.current = newWidth;
+    setWidth(newWidth);
+  }, []);
+  var handleMouseUp = useCallback(function () {
+    if (!isResizingRef.current) return;
+    isResizingRef.current = false;
+    setIsResizing(false);
+    removeEventListeners({
+      mousemove: handleMouseMove,
+      mouseup: handleMouseUp
+    });
+    saveWidthToStorage(storageKey, widthRef.current);
+  }, []);
+  var handleResizing = useCallback(function (e, direction) {
+    e.preventDefault();
+    isResizingRef.current = true;
+    setIsResizing(true);
+    resizingDirection.current = direction;
+    initialMouseX.current = e.clientX;
+    initialWidth.current = widthRef.current;
+    addEventListeners({
+      mousemove: handleMouseMove,
+      mouseup: handleMouseUp
+    });
+  }, []);
+  var calculateNewWidth = function calculateNewWidth(clientX, direction, widthConfig, initialMouseX, initialWidth) {
+    var min = widthConfig.min,
+      max = widthConfig.max;
+    var mouseDelta = clientX - initialMouseX;
+    var newWidth = direction === RESIZING_DIRECTIONS.left ? initialWidth - mouseDelta : initialWidth + mouseDelta;
+    return Math.min(Math.max(newWidth, min), max);
+  };
+  useEffect(function () {
+    return function () {
+      removeEventListeners({
+        mousemove: handleMouseMove,
+        mouseup: handleMouseUp
+      });
+    };
+  }, []);
+  return {
+    isResizing: isResizing,
+    currentWidth: width,
+    handleResizing: handleResizing
+  };
+};
+
+export default useResizable;
+//# sourceMappingURL=use_resizable.js.map

package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable.js.map

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable_context.d.ts

@@ -0,0 +1,2 @@
+import type { IResizableContextProps } from '../resizable_container_types';
+export declare function useResizableContext(): IResizableContextProps;

package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable_context.js

@@ -0,0 +1,13 @@
+import { useContext } from 'react';
+import { ResizableContext } from '../resizable_context.js';
+
+function useResizableContext() {
+  var context = useContext(ResizableContext);
+  if (!context) {
+    throw new Error("Resizable component cannot be rendered outside the ResizableProvider component");
+  }
+  return context;
+}
+
+export { useResizableContext };
+//# sourceMappingURL=use_resizable_context.js.map

package/build/esm/packages/aurora/src/components/resizable/hooks/use_resizable_context.js.map

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

package/build/esm/packages/aurora/src/components/resizable/resizable.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import type { IResizableProps } from './resizable_container_types';
+export declare const Resizable: React.FC<IResizableProps>;

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

@@ -0,0 +1,36 @@
+import React__default, { useMemo } from 'react';
+import useResizable from './hooks/use_resizable.js';
+import { ResizableContext } from './resizable_context.js';
+import { ResizablePure } from './components/resizable_pure.js';
+
+var Resizable = function Resizable(_ref) {
+  var name = _ref.name,
+    children = _ref.children,
+    _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'left' : _ref$variant,
+    widthConfig = _ref.widthConfig,
+    onResize = _ref.onResize,
+    className = _ref.className;
+  var _useResizable = useResizable(name, variant, widthConfig),
+    isResizing = _useResizable.isResizing,
+    currentWidth = _useResizable.currentWidth,
+    handleResizing = _useResizable.handleResizing;
+  var contextVal = useMemo(function () {
+    return {
+      isResizing: isResizing,
+      currentWidth: currentWidth,
+      handleResizing: handleResizing
+    };
+  }, [isResizing, currentWidth, handleResizing]);
+  return /*#__PURE__*/React__default.createElement(ResizableContext.Provider, {
+    value: contextVal
+  }, /*#__PURE__*/React__default.createElement(ResizablePure, {
+    className: className || '',
+    variant: variant,
+    widthConfig: widthConfig,
+    onResize: onResize
+  }, children));
+};
+
+export { Resizable };
+//# sourceMappingURL=resizable.js.map

package/build/esm/packages/aurora/src/components/resizable/resizable.js.map

@@ -0,0 +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;"}

package/build/esm/packages/aurora/src/components/resizable/resizable_container_constants.d.ts

@@ -0,0 +1,11 @@
+export declare const RESIZE_HANDLE_VARIANTS: {
+    readonly left: "left";
+    readonly right: "right";
+    readonly horizontal: "horizontal";
+};
+export declare const RESIZING_DIRECTIONS: {
+    readonly left: "left";
+    readonly right: "right";
+};
+export declare const HANDLE_HOVER_SPACE = 8;
+export declare const RESIZABLE_CONTAINER_RESIZER_CLASS = "js__resizable-container-resizer";

package/build/esm/packages/aurora/src/components/resizable/resizable_container_constants.js

@@ -0,0 +1,14 @@
+var RESIZE_HANDLE_VARIANTS = {
+  left: 'left',
+  right: 'right',
+  horizontal: 'horizontal'
+};
+var RESIZING_DIRECTIONS = {
+  left: 'left',
+  right: 'right'
+};
+var HANDLE_HOVER_SPACE = 8;
+var RESIZABLE_CONTAINER_RESIZER_CLASS = 'js__resizable-container-resizer';
+
+export { HANDLE_HOVER_SPACE, RESIZABLE_CONTAINER_RESIZER_CLASS, RESIZE_HANDLE_VARIANTS, RESIZING_DIRECTIONS };
+//# sourceMappingURL=resizable_container_constants.js.map

package/build/esm/packages/aurora/src/components/resizable/resizable_container_constants.js.map

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

package/build/esm/packages/aurora/src/components/resizable/resizable_context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IResizableContextProps } from './resizable_container_types';
+export declare const ResizableContext: import("react").Context<IResizableContextProps>;

package/build/esm/packages/aurora/src/components/resizable/resizable_context.js

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+var ResizableContext = /*#__PURE__*/createContext({
+  isResizing: false,
+  currentWidth: 0,
+  handleResizing: function handleResizing() {}
+});
+
+export { ResizableContext };
+//# sourceMappingURL=resizable_context.js.map

package/build/esm/packages/aurora/src/components/resizable/resizable_context.js.map

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

package/build/esm/packages/aurora/src/components/resizable/resizable_utils.d.ts

@@ -0,0 +1,5 @@
+import type { TContainerWidthConfig } from './resizable_container_types';
+export declare const getInitialWidth: (name: string, widthConfig: TContainerWidthConfig) => number;
+export declare const saveWidthToStorage: (name: string, width: number) => void;
+export declare const addEventListeners: (events: Record<string, EventListener>) => void;
+export declare const removeEventListeners: (events: Record<string, EventListener>) => void;

package/build/esm/packages/aurora/src/components/resizable/resizable_utils.js

@@ -0,0 +1,30 @@
+import { slicedToArray as _slicedToArray } from '../../../../../_virtual/_rollupPluginBabelHelpers.js';
+
+var getInitialWidth = function getInitialWidth(name, widthConfig) {
+  if (typeof window === 'undefined' || typeof localStorage === 'undefined') return widthConfig.default;
+  var saved = localStorage.getItem(name);
+  return saved ? Number(saved) : widthConfig.default;
+};
+var saveWidthToStorage = function saveWidthToStorage(name, width) {
+  if (typeof window === 'undefined' || typeof localStorage === 'undefined') return;
+  localStorage.setItem(name, width.toString());
+};
+var addEventListeners = function addEventListeners(events) {
+  Object.entries(events).forEach(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      eventType = _ref2[0],
+      handler = _ref2[1];
+    document.addEventListener(eventType, handler);
+  });
+};
+var removeEventListeners = function removeEventListeners(events) {
+  Object.entries(events).forEach(function (_ref3) {
+    var _ref4 = _slicedToArray(_ref3, 2),
+      eventType = _ref4[0],
+      handler = _ref4[1];
+    document.removeEventListener(eventType, handler);
+  });
+};
+
+export { addEventListeners, getInitialWidth, removeEventListeners, saveWidthToStorage };
+//# sourceMappingURL=resizable_utils.js.map

package/build/esm/packages/aurora/src/components/resizable/resizable_utils.js.map

@@ -0,0 +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;"}

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/build/esm/packages/aurora/src/index.d.ts

@@ -134,4 +134,5 @@ export { TToastType } from "./components/toast/components/toast_components_types
 export { AnchorPresets } from "./components/anchor_presets/anchor_presets";
 export { AnchorPresetsControl } from "./components/controls/anchor_presets_control/anchor_presets_control";
 export { ANCHOR_PRESETS_VALUES } from "./components/anchor_presets/anchor_presets_constants";
+export { Resizable } from "./components/resizable/resizable";
 export { fuzzySearch } from "./utilities/fuzzy_search";

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

@@ -127,4 +127,5 @@ export { ToastViewport } from './components/toast/components/toast_viewport.js';
 export { ANCHOR_PRESETS_VALUES } from './components/anchor_presets/anchor_presets_constants.js';
 export { AnchorPresets } from './components/anchor_presets/anchor_presets.js';
 export { AnchorPresetsControl } from './components/controls/anchor_presets_control/anchor_presets_control.js';
+export { Resizable } from './components/resizable/resizable.js';
 //# sourceMappingURL=index.js.map

package/build/esm/packages/aurora/src/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}