@dreamcommerce/aurora 3.1.5 → 3.1.7-1

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

@@ -3,7 +3,6 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
 var control = require('../../control/control.js');
 var helper_text = require('../../helper_text/helper_text.js');
 var label = require('../../label/label.js');
@@ -13,7 +12,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
+var XhrImagePickerControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var url = _ref.url,
     label$1 = _ref.label,
     required = _ref.required,
@@ -29,17 +28,15 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
     onUploaded = _ref.onUploaded,
     helperText = _ref.helperText,
     onImageSizeUpdated = _ref.onImageSizeUpdated,
-    ImageEditor = _ref.ImageEditor;
-  var _useState = React.useState(errors),
-    _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    setErrors = _useState2[1];
+    ImageEditor = _ref.ImageEditor,
+    onError = _ref.onError;
   var handleControlError = function handleControlError(errors) {
-    setErrors(errors);
+    onError === null || onError === void 0 ? void 0 : onError(errors);
   };
   var handleControlChange = function handleControlChange(file) {
     var fileList = file.fileList,
       fileAsDataUrl = file.fileAsDataUrl;
-    setErrors(null);
+    onError === null || onError === void 0 ? void 0 : onError([]);
     onChange === null || onChange === void 0 ? void 0 : onChange({
       fileList: fileList,
       fileAsDataUrl: fileAsDataUrl
@@ -64,9 +61,11 @@ var XhrImagePickerControl = function XhrImagePickerControl(_ref) {
     errors: errors,
     onUploaded: onUploaded,
     onImageSizeUpdated: onImageSizeUpdated,
-    ImageEditor: ImageEditor
+    ImageEditor: ImageEditor,
+    ref: ref
   }), helperText ? /*#__PURE__*/React__default['default'].createElement(helper_text.HelperText, null, helperText) : null);
-};
+});
+XhrImagePickerControl.displayName = 'XhrImagePickerControl';
 
 exports.XhrImagePickerControl = XhrImagePickerControl;
 //# sourceMappingURL=xhr_image_picker_control.js.map

package/build/cjs/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;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;"}

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

@@ -11,14 +11,16 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ImagePickerDragOverPlaceholder = function ImagePickerDragOverPlaceholder() {
+var ImagePickerDragOverPlaceholder = function ImagePickerDragOverPlaceholder(_ref) {
+  var onDropFile = _ref.onDropFile;
   var _useTranslation = useTranslation.useTranslation(),
     _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
   return /*#__PURE__*/React__default['default'].createElement("div", {
-    className: cn.cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-20 aurora-pointer-events-none aurora-w-full aurora-h-full')
+    onDrop: onDropFile,
+    className: cn.cn('aurora-absolute aurora-inset-0 aurora-bg-neutral-0 aurora-border-2 aurora-border-primary aurora-rounded-8 aurora-z-20 aurora-w-full aurora-h-full')
   }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: "aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center"
+    className: "aurora-w-full aurora-h-full aurora-bg-primary-transparent aurora-flex aurora-items-center aurora-justify-center aurora-pointer-events-none"
   }, /*#__PURE__*/React__default['default'].createElement("span", {
     className: "aurora-text-xs aurora-text-interactive"
   }, "".concat(t('Drop file here')))));

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;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,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -15,22 +15,18 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ImagePickerInput = function ImagePickerInput(_ref) {
   var id = _ref.id,
-    onDropFile = _ref.onDropFile,
-    onDragOver = _ref.onDragOver,
-    onDragLeave = _ref.onDragLeave,
     allowedExtensionsLabel = _ref.allowedExtensionsLabel,
     allowedExtensions = _ref.allowedExtensions,
-    isDragOver = _ref.isDragOver;
+    isDragOver = _ref.isDragOver,
+    onDropFile = _ref.onDropFile;
   var _useTranslation = useTranslation.useTranslation(),
     _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
     t = _useTranslation2[0];
-  return /*#__PURE__*/React__default['default'].createElement("label", {
-    htmlFor: id,
-    onDrop: onDropFile,
-    onDragOver: onDragOver,
-    onDragLeave: onDragLeave,
+  return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-relative aurora-flex aurora-items-center aurora-justify-center aurora-w-full aurora-h-full aurora-cursor-pointer aurora-p-1 aurora-pb-2 aurora-group/imagePickerInput"
-  }, isDragOver && /*#__PURE__*/React__default['default'].createElement(image_picker_drag_over_placeholder.ImagePickerDragOverPlaceholder, null), /*#__PURE__*/React__default['default'].createElement("div", {
+  }, isDragOver && /*#__PURE__*/React__default['default'].createElement(image_picker_drag_over_placeholder.ImagePickerDragOverPlaceholder, {
+    onDropFile: onDropFile
+  }), /*#__PURE__*/React__default['default'].createElement("div", {
     className: cn.cn('aurora-flex aurora-flex-col aurora-items-center aurora-w-full aurora-h-full aurora-pt-4 aurora-pb-3 aurora-px-1')
   }, /*#__PURE__*/React__default['default'].createElement(upload_icon.UploadLineIcon, {
     className: "aurora-w-5 aurora-h-5 aurora-fill-subtle group-hover/imagePickerInput:aurora-fill-primary aurora-mb-2"

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}

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

@@ -13,7 +13,7 @@ var ImagePickerPreview = function ImagePickerPreview(_ref) {
     onError = _ref.onError,
     onLoad = _ref.onLoad;
   return /*#__PURE__*/React__default['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'
+    className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-min-h-16 aurora-flex aurora-justify-center aurora-items-center"
   }, /*#__PURE__*/React__default['default'].createElement("img", {
     className: "aurora-rounded-4 aurora-w-full aurora-h-full aurora-object-contain",
     alt: file.fileName,

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

@@ -10,15 +10,9 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var ImagePickerPreviewContainer = function ImagePickerPreviewContainer(_ref) {
   var classname = _ref.classname,
-    children = _ref.children,
-    onDragLeave = _ref.onDragLeave,
-    onDragOver = _ref.onDragOver,
-    onDropFile = _ref.onDropFile;
-  return /*#__PURE__*/React__default['default'].createElement("label", {
-    className: classname,
-    onDragLeave: onDragLeave,
-    onDragOver: onDragOver,
-    onDrop: onDropFile
+    children = _ref.children;
+  return /*#__PURE__*/React__default['default'].createElement("div", {
+    className: classname
   }, children);
 };
 

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

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

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

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
-var _rollupPluginBabelHelpers = require('../../../../../../_virtual/_rollupPluginBabelHelpers.js');
-var delete_bin_icon = require('../../../assets/icons/delete_bin_icon.js');
 var utilities = require('@dreamcommerce/utilities');
+var image_picker_delete_button = require('../image_picker_delete_button.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -17,9 +15,6 @@ var UploadedImagePickerItem = function UploadedImagePickerItem(_ref) {
     onFileDelete = _ref.onFileDelete,
     isValid = _ref.isValid,
     file = _ref.file;
-  var _useTranslation = useTranslation.useTranslation(),
-    _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
-    t = _useTranslation2[0];
   var imageName = utilities.FileUtils.getFileName(file.fileName);
   var imageExtension = utilities.FileUtils.getFileExtension(file.fileName);
   var imageWidth = imageSize && imageSize.width;
@@ -28,16 +23,9 @@ var UploadedImagePickerItem = function UploadedImagePickerItem(_ref) {
     className: "aurora-flex aurora-justify-between aurora-items-center aurora-pt-2 aurora-px-1 aurora-gap-1"
   }, /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-text-xs aurora-text-subtle aurora-overflow-hidden aurora-text-ellipsis"
-  }, isValid && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, imageName, ".".concat(imageExtension, " (").concat(imageWidth, "x").concat(imageHeight, "px)")))), /*#__PURE__*/React__default['default'].createElement("button", {
-    "data-test-id": "image-picker-remove-button",
-    onClick: onFileDelete,
-    className: "aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-border-danger aurora-rounded-full aurora-px-3 aurora-py-[6px]",
-    type: "button"
-  }, /*#__PURE__*/React__default['default'].createElement(delete_bin_icon.DeleteBinLineIcon, {
-    className: "aurora-w-4 aurora-h-4 aurora-fill-danger"
-  }), /*#__PURE__*/React__default['default'].createElement("span", {
-    className: "aurora-text-xs aurora-text-danger aurora-font-semibold"
-  }, "".concat(t('Remove')))));
+  }, isValid && (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, imageName, "".concat(imageExtension ? '.' : '').concat(imageExtension, " (").concat(imageWidth, "x").concat(imageHeight, "px)")))), /*#__PURE__*/React__default['default'].createElement(image_picker_delete_button.ImagePickerDeleteButton, {
+    onFileDelete: onFileDelete
+  }));
 };
 
 exports.UploadedImagePickerItem = UploadedImagePickerItem;

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

@@ -1 +1 @@
-{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,oEAAwE;AACrG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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;"}

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

@@ -12,6 +12,7 @@ var image_picker_drag_over_placeholder = require('./components/image_picker_drag
 var image_picker_input = require('./components/image_picker_input.js');
 var image_picker_preview = require('./components/image_picker_preview.js');
 var image_picker_preview_container = require('./components/image_picker_preview_container.js');
+var image_picker_delete_button = require('./image_picker_delete_button.js');
 var uploaded_image_picker_item = require('./components/uploaded_image_picker_item.js');
 var image_picker_utils = require('./image_picker_utils.js');
 var use_image_picker = require('./use_image_picker.js');
@@ -20,11 +21,11 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
+var ImagePicker = /*#__PURE__*/React.memo(/*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var id = _ref.id,
     onChange = _ref.onChange,
     onError = _ref.onError,
-    initialErrors = _ref.errors,
+    errors = _ref.errors,
     _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,
@@ -48,7 +49,6 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
       initialFile: initialFile,
       onChange: handleOnChange,
       allowedExtensions: allowedExtensions,
-      initialErrors: initialErrors,
       onError: onError,
       inputRef: inputRef
     }),
@@ -60,7 +60,6 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
     onPreviewError = _useImagePicker.onPreviewError,
     changeFile = _useImagePicker.changeFile,
     file = _useImagePicker.file,
-    errors = _useImagePicker.errors,
     isPreview = _useImagePicker.isPreview,
     isDragOver = _useImagePicker.isDragOver;
   var _useState = React.useState(undefined),
@@ -120,19 +119,25 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
   };
   return /*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-mb-1"
-  }, /*#__PURE__*/React__default['default'].createElement("div", {
-    className: cn.cn('aurora-rounded-8 aurora-relative hover:aurora-border-active', {
+  }, /*#__PURE__*/React__default['default'].createElement("button", {
+    className: cn.cn('aurora-block aurora-w-full aurora-rounded-8 aurora-relative hover:aurora-border-active focus-visible:aurora-border-active focus-visible:aurora-outline-none', {
       'aurora-border aurora-border-dashed': !(errors && errors.length > 0 && !isDragOver),
-      'aurora-border-2 aurora-border-danger aurora-border-solid hover:aurora-border-danger': errors && errors.length > 0,
-      'aurora-border-none': isDragOver
-    })
+      'aurora-border-2 aurora-border-danger aurora-border-solid hover:aurora-border-danger focus-visible:aurora-border-danger': errors && errors.length > 0,
+      'aurora-border-transparent hover:aurora-border-transparent focus-visible:aurora-border-transparent': isDragOver
+    }),
+    onClick: function onClick() {
+      var _inputRef$current;
+      return (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.click();
+    },
+    ref: ref,
+    type: 'button'
+  }, /*#__PURE__*/React__default['default'].createElement("div", {
+    onDragOver: onDragOver,
+    onDragLeave: onDragLeave
   }, file && !(errors !== null && errors !== void 0 && errors.length) ? isPreview ? (/*#__PURE__*/React__default['default'].createElement("div", {
     className: "aurora-p-1 aurora-relative"
   }, /*#__PURE__*/React__default['default'].createElement(image_picker_preview_container.ImagePickerPreviewContainer, {
-    classname: "aurora-relative aurora-flex aurora-flex-col",
-    onDragLeave: onDragLeave,
-    onDragOver: onDragOver,
-    onDropFile: onDropFile
+    classname: "aurora-relative aurora-flex aurora-flex-col"
   }, topButtons && /*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, topButtons), /*#__PURE__*/React__default['default'].createElement("label", {
     htmlFor: id,
     className: "aurora-relative"
@@ -144,9 +149,11 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
     file: file,
     isValid: !(errors !== null && errors !== void 0 && errors.length),
     onFileDelete: handleOnFileDelete
-  })), isDragOver && /*#__PURE__*/React__default['default'].createElement(image_picker_drag_over_placeholder.ImagePickerDragOverPlaceholder, null))) : (/*#__PURE__*/React__default['default'].createElement("div", null, "".concat(t('No preview')))) : (/*#__PURE__*/React__default['default'].createElement(image_picker_input.ImagePickerInput, {
-    onDragLeave: onDragLeave,
-    onDragOver: onDragOver,
+  })), isDragOver && /*#__PURE__*/React__default['default'].createElement(image_picker_drag_over_placeholder.ImagePickerDragOverPlaceholder, {
+    onDropFile: onDropFile
+  }))) : (/*#__PURE__*/React__default['default'].createElement(React__default['default'].Fragment, null, /*#__PURE__*/React__default['default'].createElement("div", null, "".concat(t('No preview'))), /*#__PURE__*/React__default['default'].createElement(image_picker_delete_button.ImagePickerDeleteButton, {
+    onFileDelete: onFileDelete
+  }))) : (/*#__PURE__*/React__default['default'].createElement(image_picker_input.ImagePickerInput, {
     isDragOver: isDragOver,
     allowedExtensions: allowedExtensions,
     allowedExtensionsLabel: allowedExtensionsLabel,
@@ -160,13 +167,14 @@ var ImagePicker = /*#__PURE__*/React.memo(function (_ref) {
     type: "file",
     name: name,
     accept: acceptFiles
-  })), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
+  }))), errors && /*#__PURE__*/React__default['default'].createElement(error_list.ErrorList, {
     errors: errors
   }));
-}, function (prev, curr) {
+}), 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';
 
 exports.ImagePicker = ImagePicker;
 //# sourceMappingURL=image_picker.js.map

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

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

@@ -0,0 +1,36 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../external/react-i18next/dist/es/useTranslation.js');
+var _rollupPluginBabelHelpers = require('../../../../../_virtual/_rollupPluginBabelHelpers.js');
+var delete_bin_icon = require('../../assets/icons/delete_bin_icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+var ImagePickerDeleteButton = function ImagePickerDeleteButton(_ref) {
+  var onFileDelete = _ref.onFileDelete;
+  var _useTranslation = useTranslation.useTranslation(),
+    _useTranslation2 = _rollupPluginBabelHelpers.slicedToArray(_useTranslation, 1),
+    t = _useTranslation2[0];
+  return /*#__PURE__*/React__default['default'].createElement("button", {
+    "data-test-id": "image-picker-remove-button",
+    onClick: function onClick(e) {
+      e.stopPropagation();
+      e.preventDefault();
+      onFileDelete();
+    },
+    className: "aurora-flex aurora-items-center aurora-gap-1 aurora-border aurora-border-danger aurora-rounded-full aurora-px-3 aurora-py-[6px]",
+    type: "button"
+  }, /*#__PURE__*/React__default['default'].createElement(delete_bin_icon.DeleteBinLineIcon, {
+    className: "aurora-w-4 aurora-h-4 aurora-fill-danger"
+  }), /*#__PURE__*/React__default['default'].createElement("span", {
+    className: "aurora-text-xs aurora-text-danger aurora-font-semibold"
+  }, "".concat(t('Remove'))));
+};
+
+exports.ImagePickerDeleteButton = ImagePickerDeleteButton;
+//# sourceMappingURL=image_picker_delete_button.js.map

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

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

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

@@ -12,35 +12,24 @@ var useImagePicker = function useImagePicker(_ref) {
     initialFile = _ref.initialFile,
     allowedExtensions = _ref.allowedExtensions,
     inputRef = _ref.inputRef,
-    initialErrors = _ref.initialErrors,
     onError = _ref.onError;
-  var _useState = React.useState(null),
+  var fileListRef = React.useRef(null);
+  var _useState = React.useState(initialFile),
     _useState2 = _rollupPluginBabelHelpers.slicedToArray(_useState, 2),
-    fileList = _useState2[0],
-    setFileList = _useState2[1];
-  var _useState3 = React.useState(initialFile),
+    file = _useState2[0],
+    setFile = _useState2[1];
+  var _useState3 = React.useState(false),
     _useState4 = _rollupPluginBabelHelpers.slicedToArray(_useState3, 2),
-    file = _useState4[0],
-    setFile = _useState4[1];
-  var _useState5 = React.useState(null),
+    isDragOver = _useState4[0],
+    setDragOver = _useState4[1];
+  var _useState5 = React.useState(true),
     _useState6 = _rollupPluginBabelHelpers.slicedToArray(_useState5, 2),
-    fileAsDataUrl = _useState6[0],
-    setFileAsDataUrl = _useState6[1];
-  var _useState7 = React.useState([]),
-    _useState8 = _rollupPluginBabelHelpers.slicedToArray(_useState7, 2),
-    errors = _useState8[0],
-    setErrors = _useState8[1];
-  var _useState9 = React.useState(false),
-    _useState10 = _rollupPluginBabelHelpers.slicedToArray(_useState9, 2),
-    isDragOver = _useState10[0],
-    setDragOver = _useState10[1];
-  var _useState11 = React.useState(true),
-    _useState12 = _rollupPluginBabelHelpers.slicedToArray(_useState11, 2),
-    isPreview = _useState12[0],
-    setPreview = _useState12[1];
+    isPreview = _useState6[0],
+    setPreview = _useState6[1];
   var reader = React.useRef(new FileReader());
+  var dragTimeoutRef = React.useRef(null);
   React.useEffect(function () {
-    reader.current && getDataUrlFromFile(reader.current.result);
+    reader.current.result && getDataUrlFromFile(reader.current.result);
     reader.current.addEventListener('load', function () {
       return getDataUrlFromFile(reader.current.result);
     }, false);
@@ -53,23 +42,15 @@ var useImagePicker = function useImagePicker(_ref) {
   React.useEffect(function () {
     setFile(initialFile);
   }, [initialFile]);
-  React.useEffect(function () {
-    initialErrors && setErrors(initialErrors);
-  }, [initialErrors]);
-  React.useEffect(function () {
-    fileAsDataUrl && (onChange === null || onChange === void 0 ? void 0 : onChange({
-      fileList: fileList,
-      fileAsDataUrl: fileAsDataUrl
-    }));
-  }, [fileAsDataUrl]);
   var onDropFile = function onDropFile(event) {
-    setErrors([]);
+    onError === null || onError === void 0 ? void 0 : onError([]);
     event.stopPropagation();
     event.preventDefault();
+    setDragOver(false);
     var files = event.dataTransfer.files;
     if (!files.length) return;
-    validateFileExtension(allowedExtensions, files[0].type);
-    setDragOver(false);
+    var isValid = validateFileExtension(allowedExtensions, files[0].type);
+    if (!isValid) return;
     updateFile(files);
   };
   var validateFileExtension = function validateFileExtension(allowedExtensions, mimeType) {
@@ -77,24 +58,21 @@ var useImagePicker = function useImagePicker(_ref) {
     var isValid = allowedExtensions.reduce(function (acc, extension) {
       return acc ? acc : image_picker_constants.MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
     }, false);
-    if (isValid) {
-      setErrors([]);
-      return isValid;
+    if (!isValid) {
+      onError === null || onError === void 0 ? void 0 : onError([i18n.i18n.t(image_picker_constants.IMAGE_PICKER_ERROR.invalidFileFormat)]);
     }
-    setErrors([].concat(_rollupPluginBabelHelpers.toConsumableArray(errors), [i18n.i18n.t(image_picker_constants.IMAGE_PICKER_ERROR.invalidFileFormat)]));
-    onError === null || onError === void 0 ? void 0 : onError(errors);
     return isValid;
   };
   var onFileChange = function onFileChange(event) {
     changeFile(event.target.files);
   };
   var changeFile = function changeFile(files) {
-    setErrors([]);
+    onError === null || onError === void 0 ? void 0 : onError([]);
     updateFile(files);
   };
   var updateFile = function updateFile(files) {
     if (files !== null && files !== void 0 && files.length) {
-      setFileList(files);
+      fileListRef.current = files;
       reader.current.readAsDataURL(files[0]);
       setFile({
         fileName: files === null || files === void 0 ? void 0 : files[0].name,
@@ -113,26 +91,33 @@ var useImagePicker = function useImagePicker(_ref) {
     setPreview(true);
   };
   var getDataUrlFromFile = function getDataUrlFromFile(fileReaderResult) {
-    setFileAsDataUrl(fileReaderResult);
+    onChange === null || onChange === void 0 ? void 0 : onChange({
+      fileList: fileListRef.current,
+      fileAsDataUrl: fileReaderResult
+    });
   };
   var onDragOver = function onDragOver(event) {
+    var dt = event.dataTransfer;
+    if (!dt.types || !(dt.types.indexOf ? dt.types.indexOf('Files') != -1 : dt.types.includes('Files'))) {
+      return;
+    }
     event.stopPropagation();
     event.preventDefault();
     event.dataTransfer.dropEffect = 'copy';
-    if (!isDragOver) {
-      setDragOver(true);
-    }
+    setDragOver(true);
+    dragTimeoutRef.current && window.clearTimeout(dragTimeoutRef.current);
   };
-  var onDragLeave = function onDragLeave() {
-    setDragOver(false);
+  var onDragLeave = function onDragLeave(event) {
+    dragTimeoutRef.current = setTimeout(function () {
+      setDragOver(false);
+      dragTimeoutRef.current = null;
+    }, 25);
   };
   var onFileDelete = function onFileDelete() {
     inputRef.current.value = '';
-    setFileList(null);
+    fileListRef.current = null;
     setFile(undefined);
-    setFileAsDataUrl(null);
     setPreview(true);
-    setErrors([]);
     onChange === null || onChange === void 0 ? void 0 : onChange({
       fileList: null,
       fileAsDataUrl: null
@@ -150,7 +135,6 @@ var useImagePicker = function useImagePicker(_ref) {
     onPreviewError: onPreviewError,
     changeFile: changeFile,
     file: file,
-    errors: errors,
     isPreview: isPreview,
     isDragOver: isDragOver
   };

package/build/cjs/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}