@dreamcommerce/aurora 2.6.0-2 → 2.6.0-4

package/build/cjs/packages/aurora/src/assets/icon_wrong_file_format.js

@@ -0,0 +1,22 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var main_module = require('../css/icons/main.module.less.js');
+var icon = require('./icon.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const IconWrongFileFormat = ({ className = '', size }) => (React__default['default'].createElement(icon['default'], null,
+    React__default['default'].createElement("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 67 52", width: "67", height: "52", className: `${className || ''} ${main_module['default'][`icon_${size}`]}` },
+        React__default['default'].createElement("path", { d: "M36.9768 2H1.5V49.9829H29.9977M44.5374 2H65.4745V49.9829H39.8847", stroke: "#ABB4CD", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3" }),
+        React__default['default'].createElement("path", { d: "m36.976 2-7.5606 7.7972 9.8869 10.196-9.8869 10.196 9.8869 10.196-9.3053 9.5965", stroke: "#ABB4CD", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "3" }),
+        React__default['default'].createElement("path", { d: "m34.069 45.784-15.703-15.594-16.866 16.794v2.9989h28.498l4.0711-4.1985z", fill: "#ABB4CD", stroke: "#ABB4CD", strokeLinejoin: "round", strokeWidth: "2" }),
+        React__default['default'].createElement("path", { d: "m45.726 24.793 19.774 20.393v4.7983h-26.753c-0.1938 0.1999 1.1365-1.3195 5.7892-6.5976 4.6526-5.2782-2.3263-8.3971-5.2076-11.996l6.3974-6.5976z", fill: "#ABB4CD", stroke: "#ABB4CD", strokeLinejoin: "round", strokeWidth: "3" }),
+        React__default['default'].createElement("circle", { cx: "54.352", cy: "13.197", r: "4", fill: "#ABB4CD" }))));
+
+exports.default = IconWrongFileFormat;
+//# sourceMappingURL=icon_wrong_file_format.js.map

package/build/cjs/packages/aurora/src/assets/icon_wrong_file_format.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;"}

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

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var css_classes = require('../css_classes.js');
 var context = require('../context.js');
-var main_module = require('../../../css/controls/main.module.less.js');
+var errors_list = require('./errors_list.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -13,9 +12,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const Errors = () => {
     const { errors, id } = context.useControlContext();
-    return errors ? (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssControlsErrors] },
-        React__default['default'].createElement("ul", { className: main_module['default'][css_classes.cssControlsErrorsList] }, errors.map((error, key) => (React__default['default'].createElement("label", { htmlFor: id, key: `error-item-${id}-${key}` },
-            React__default['default'].createElement("li", { className: main_module['default'][css_classes.cssControlsErrorsListItem] }, error))))))) : null;
+    return React__default['default'].createElement(errors_list.ErrorsList, { errors: errors, id: id });
 };
 
 exports.default = Errors;

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

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

@@ -0,0 +1,20 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/controls/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ErrorsList = ({ errors, id }) => {
+    return errors ? (React__default['default'].createElement("div", { className: main_module['default'][css_classes.cssControlsErrors] },
+        React__default['default'].createElement("ul", { className: main_module['default'][css_classes.cssControlsErrorsList] }, errors.map((error, key) => (React__default['default'].createElement("label", { htmlFor: id, key: `error-item-${id}-${key}` },
+            React__default['default'].createElement("li", { className: main_module['default'][css_classes.cssControlsErrorsListItem] }, error))))))) : null;
+};
+
+exports.ErrorsList = ErrorsList;
+//# sourceMappingURL=errors_list.js.map

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

package/build/cjs/packages/aurora/src/components/controls/hoc/control_image_picker/index.js

@@ -0,0 +1,26 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var index = require('../../index.js');
+var index$1 = require('../../../hint/index.js');
+var index$2 = require('../../../image_picker/index.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ControlImagePicker = ({ label, isRequired, id, name, onChange, allowedExtensions, initialFile, className, errors, hint, labelAdditionalInfo, hasWidthInput, widthInputPostfix, widthInputLabel, widthInputHint }) => {
+    return (React__default['default'].createElement(index['default'], { errors: errors, name: name, id: id },
+        (label || hint) && (React__default['default'].createElement(index['default'].Label, { id: id, isRequired: isRequired, additionalInfo: labelAdditionalInfo },
+            label,
+            hint && React__default['default'].createElement(index$1['default'], { hint: hint, spacingLeft: true }))),
+        React__default['default'].createElement(index['default'].Content, null,
+            React__default['default'].createElement(index['default'].Element, null,
+                React__default['default'].createElement(index$2['default'], { id: id, name: name, onChange: onChange, allowedExtensions: allowedExtensions, initialFile: initialFile, className: className }))),
+        React__default['default'].createElement(index['default'].Errors, null)));
+};
+
+exports.default = ControlImagePicker;
+//# sourceMappingURL=index.js.map

package/build/cjs/packages/aurora/src/components/controls/hoc/control_image_picker/index.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;"}

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

@@ -6,9 +6,9 @@ var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var reactJss_esm = require('../../../../../../external/react-jss/dist/react-jss.esm.js');
 var with_translation = require('../../../utilities/translation/with_translation.js');
-var main_module = require('../../../css/file_picker/main.module.less.js');
 var css_classes = require('../css_classes.js');
 var icon_upload = require('../../../assets/icon_upload.js');
+var main_module = require('../../../css/file_picker/main.module.less.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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

@@ -5,8 +5,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
 var utilities = require('@dreamcommerce/utilities');
-var main_module = require('../../../css/file_picker/main.module.less.js');
 var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/file_picker/main.module.less.js');
 var icon_delete = require('../../../assets/icon_delete.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

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

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const FILE_PICKER_ERROR = {
+    invalidFileFormat: 'Invalid file format'
+};
+const FILES_EXTENSIONS = {
+    GIF: 'gif',
+    JPG: 'jpg',
+    JPEG: 'jpeg',
+    PNG: 'png',
+    WBMP: 'wbmp',
+    WEBP: 'webp',
+    BMP: 'bmp',
+    ICO: 'ico',
+    SVG: 'svg',
+    TXT: 'txt'
+};
+const MIME_FILE_EXTENSIONS = {
+    [FILES_EXTENSIONS.GIF]: 'image/gif',
+    [FILES_EXTENSIONS.JPG]: 'image/jpg',
+    [FILES_EXTENSIONS.JPEG]: 'image/jpeg',
+    [FILES_EXTENSIONS.PNG]: 'image/png',
+    [FILES_EXTENSIONS.WBMP]: 'image/vnd.wap.wbmp',
+    [FILES_EXTENSIONS.WEBP]: 'image/webp',
+    [FILES_EXTENSIONS.BMP]: 'image/bmp',
+    [FILES_EXTENSIONS.ICO]: 'image/x-icon',
+    [FILES_EXTENSIONS.SVG]: 'image/svg+xml',
+    [FILES_EXTENSIONS.TXT]: 'text/plain'
+};
+const MIME_TYPE_TO_FILE_EXTENSIONS = {
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.GIF]]: FILES_EXTENSIONS.GIF,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.JPG]]: FILES_EXTENSIONS.JPG,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.JPEG]]: FILES_EXTENSIONS.JPEG,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.PNG]]: FILES_EXTENSIONS.PNG,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.WBMP]]: FILES_EXTENSIONS.WBMP,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.WEBP]]: FILES_EXTENSIONS.WEBP,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.BMP]]: FILES_EXTENSIONS.BMP,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.ICO]]: FILES_EXTENSIONS.ICO,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.SVG]]: FILES_EXTENSIONS.SVG,
+    [MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.TXT]]: FILES_EXTENSIONS.TXT
+};
+const FILE_EXTENSION_TO_MIME_TYPE = {
+    [FILES_EXTENSIONS.GIF]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.GIF],
+    [FILES_EXTENSIONS.JPG]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.JPG],
+    [FILES_EXTENSIONS.JPEG]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.JPEG],
+    [FILES_EXTENSIONS.PNG]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.PNG],
+    [FILES_EXTENSIONS.WBMP]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.WBMP],
+    [FILES_EXTENSIONS.WEBP]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.WEBP],
+    [FILES_EXTENSIONS.BMP]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.BMP],
+    [FILES_EXTENSIONS.ICO]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.ICO],
+    [FILES_EXTENSIONS.SVG]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.SVG],
+    [FILES_EXTENSIONS.TXT]: MIME_FILE_EXTENSIONS[FILES_EXTENSIONS.TXT]
+};
+
+exports.FILES_EXTENSIONS = FILES_EXTENSIONS;
+exports.FILE_EXTENSION_TO_MIME_TYPE = FILE_EXTENSION_TO_MIME_TYPE;
+exports.FILE_PICKER_ERROR = FILE_PICKER_ERROR;
+exports.MIME_FILE_EXTENSIONS = MIME_FILE_EXTENSIONS;
+exports.MIME_TYPE_TO_FILE_EXTENSIONS = MIME_TYPE_TO_FILE_EXTENSIONS;
+//# sourceMappingURL=constants.js.map

package/build/cjs/packages/aurora/src/components/file_picker/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;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/file_picker/index.js

@@ -3,26 +3,29 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var main_module = require('../../css/file_picker/main.module.less.js');
+var constants = require('./constants.js');
 var css_classes = require('./css_classes.js');
-var selected_file_preview = require('./components/selected_file_preview.js');
+var main_module = require('../../css/file_picker/main.module.less.js');
 var file_input = require('./components/file_input.js');
-var use_file_picker = require('./use_file_picker.js');
+var selected_file_preview = require('./components/selected_file_preview.js');
 var utils = require('./utils.js');
+var use_file_picker = require('./use_file_picker.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const FilePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '' }) => {
+const FilePicker = ({ id, onChange, allowedExtensions = [constants.FILES_EXTENSIONS.WEBP, constants.FILES_EXTENSIONS.JPG, constants.FILES_EXTENSIONS.PNG, constants.FILES_EXTENSIONS.GIF], initialFile, name, className = '' }) => {
+    const inputRef = React.createRef();
     const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, isPreview, isDragOver } = use_file_picker.useFilePicker({
         initialFile,
-        onChange
+        onChange,
+        inputRef
     });
     const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
     return (React__default['default'].createElement("div", { className: className },
         file ? (React__default['default'].createElement(selected_file_preview['default'], { file: file, onFileDelete: onFileDelete, onPreviewError: onPreviewError, isPreview: isPreview })) : (React__default['default'].createElement(file_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile })),
-        React__default['default'].createElement("input", { onChange: onFileChange, id: id, type: "file", name: name, className: main_module['default'][css_classes['default'].filePickerInput], accept: acceptFiles })));
+        React__default['default'].createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].filePickerInput], accept: acceptFiles })));
 };
 
 exports.default = FilePicker;

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

@@ -3,30 +3,52 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
+var i18n = require('../../i18n.js');
+var constants = require('./constants.js');
 
-const useFilePicker = ({ onChange, initialFile }) => {
+const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef }) => {
     const [file, setFile] = React.useState(initialFile);
+    const [errors, setErrors] = React.useState([]);
     const [isDragOver, setDragOver] = React.useState(false);
     const [isPreview, setPreview] = React.useState(true);
     React.useEffect(() => {
         setFile(initialFile);
     }, [initialFile]);
     const onDropFile = (event) => {
+        setErrors([]);
         event.stopPropagation();
         event.preventDefault();
         const { dataTransfer: { files } } = event;
+        if (!files.length)
+            return;
+        validateFileExtension(allowedExtensions, files[0].type);
         setDragOver(false);
         updateFile(files);
     };
+    const validateFileExtension = (allowedExtensions, mimeType) => {
+        if (!allowedExtensions)
+            return;
+        const isValid = allowedExtensions.reduce((acc, extension) => {
+            console.log('extension', extension);
+            console.log('MIME_TYPE_TO_FILE_EXTENSIONS', constants.MIME_TYPE_TO_FILE_EXTENSIONS);
+            console.log('MIME_TYPE_TO_FILE_EXTENSIONS[mimeType]', constants.MIME_TYPE_TO_FILE_EXTENSIONS[mimeType]);
+            return acc ? acc : constants.MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
+        }, false);
+        console.log('isValid', isValid);
+        console.log('mimeType', mimeType);
+        !isValid ? setErrors([...errors, i18n['default'].t(constants.FILE_PICKER_ERROR.invalidFileFormat)]) : setErrors([]);
+    };
     const onFileChange = ({ target: { files } }) => {
+        setErrors([]);
         updateFile(files);
     };
     const updateFile = (files) => {
-        if (files) {
+        if (files === null || files === void 0 ? void 0 : files.length) {
             setFile({
                 fileName: files === null || files === void 0 ? void 0 : files[0].name,
                 fileUrl: URL.createObjectURL(files === null || files === void 0 ? void 0 : files[0])
             });
+            validateFileExtension(allowedExtensions, files[0].type);
         }
         else {
             setFile(undefined);
@@ -46,8 +68,10 @@ const useFilePicker = ({ onChange, initialFile }) => {
         setDragOver(false);
     };
     const onFileDelete = () => {
+        inputRef.current.value = '';
         setFile(undefined);
         setPreview(true);
+        setErrors([]);
         onChange === null || onChange === void 0 ? void 0 : onChange(null);
     };
     const onPreviewError = () => {
@@ -61,6 +85,7 @@ const useFilePicker = ({ onChange, initialFile }) => {
         onFileDelete,
         onPreviewError,
         file,
+        errors,
         isPreview,
         isDragOver
     };

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

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

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

@@ -2,16 +2,10 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var constants = require('./constants.js');
+
 const getAcceptFilesParametersFromAllowedExtensions = (allowedExtensions) => {
-    const extraContent = [];
-    if (allowedExtensions.some((allowedExtension) => allowedExtension.toLowerCase() === 'png')) {
-        extraContent.push('image/png');
-    }
-    const joinedExtensions = allowedExtensions
-        .map((allowedExtensions) => allowedExtensions.toLowerCase())
-        .map((allowedExtension) => (allowedExtension.indexOf('.') < 0 ? `.${allowedExtension}` : allowedExtension))
-        .join(',');
-    return extraContent ? `${joinedExtensions},${extraContent.join(',')}` : joinedExtensions;
+    return allowedExtensions.map((extension) => constants.FILE_EXTENSION_TO_MIME_TYPE[extension]).join(', ');
 };
 
 exports.getAcceptFilesParametersFromAllowedExtensions = getAcceptFilesParametersFromAllowedExtensions;

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

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

@@ -0,0 +1,32 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var with_translation = require('../../../utilities/translation/with_translation.js');
+var icon_upload = require('../../../assets/icon_upload.js');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/image_picker/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ImageInput = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions, isDragOver }) => {
+    const [t] = useTranslation.useTranslation();
+    return (React__default['default'].createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave, className: main_module['default'][css_classes['default'].imagePickerLabel] },
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerDescription] },
+            React__default['default'].createElement(icon_upload['default'], { className: main_module['default'][css_classes['default'].imagePickerUploadIcon] }),
+            React__default['default'].createElement("p", null, t('Drag a file here or browse')),
+            React__default['default'].createElement("span", null,
+                "(",
+                t('supported format'),
+                ": ",
+                allowedExtensions.join(', '),
+                ")"))));
+};
+var ImageInput$1 = with_translation['default'](ImageInput);
+
+exports.default = ImageInput$1;
+//# sourceMappingURL=image_input.js.map

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

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

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

@@ -0,0 +1,19 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/image_picker/main.module.less.js');
+var icon_wrong_file_format = require('../../../assets/icon_wrong_file_format.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const ImagePreview = ({ isValid, file, onError, onLoad }) => {
+    return (React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerImagePreviewWrapper] }, isValid ? (React__default['default'].createElement("img", { alt: "", src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '', onError: onError, onLoad: onLoad, className: main_module['default'][css_classes['default'].imagePickerImagePreview] })) : (React__default['default'].createElement(icon_wrong_file_format['default'], { className: main_module['default'][css_classes['default'].imagePickerWrongFileFormatIcon] }))));
+};
+
+exports.ImagePreview = ImagePreview;
+//# sourceMappingURL=image_preview.js.map

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

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

@@ -0,0 +1,33 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../../external/react-i18next/dist/es/useTranslation.js');
+var utilities = require('@dreamcommerce/utilities');
+var icon_delete = require('../../../assets/icon_delete.js');
+var css_classes = require('../css_classes.js');
+var main_module = require('../../../css/image_picker/main.module.less.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+const UploadedImageItem = ({ imageSize, onFileDelete, isValid, file }) => {
+    const [t] = useTranslation.useTranslation();
+    const imageName = utilities.FileUtils.getFileName(file.fileName);
+    const imageExtension = utilities.FileUtils.getFileExtension(file.fileName);
+    const imageWidth = imageSize && imageSize.width;
+    const imageHeight = imageSize && imageSize.height;
+    return (React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFile] },
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileNameWrapper] }, isValid && (React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileFullName] },
+            React__default['default'].createElement("span", null, utilities.FileUtils.getShortenFileName(imageName, 10, 5, 1)),
+            React__default['default'].createElement("span", null, `.${imageExtension} (${imageWidth}x${imageHeight}px)`)))),
+        React__default['default'].createElement("div", { className: main_module['default'][css_classes['default'].imagePickerSelectedFileRemoveWrapper] },
+            React__default['default'].createElement("span", { onClick: onFileDelete, className: main_module['default'][css_classes['default'].imagePickerDeleteButton] },
+                React__default['default'].createElement(icon_delete['default'], { className: main_module['default'][css_classes['default'].imagePickerDeleteIcon] }),
+                React__default['default'].createElement("span", { className: main_module['default'][css_classes['default'].imagePickerDeleteLabel] }, t('Remove'))))));
+};
+
+exports.UploadedImageItem = UploadedImageItem;
+//# sourceMappingURL=uploaded_image_item.js.map

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

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

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

@@ -0,0 +1,29 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const imagePicker = 'image-picker';
+var CSS_CLASSES = {
+    imagePicker: `${imagePicker}`,
+    imagePickerWrapper: `${imagePicker}__wrapper`,
+    imagePickerWrapperError: `${imagePicker}__wrapper-error`,
+    imagePickerWrapperHasFile: `${imagePicker}__wrapper-has-file`,
+    imagePickerLabel: `${imagePicker}__label`,
+    imagePickerDescription: `${imagePicker}__description`,
+    imagePickerImagePreview: `${imagePicker}__image-preview`,
+    imagePickerImagePreviewWrapper: `${imagePicker}__image-preview-wrapper`,
+    imagePickerWrongFileFormatIcon: `${imagePicker}__wrong-file-format-icon`,
+    imagePickerErrorText: `${imagePicker}__error-text`,
+    imagePickerUploadIcon: `${imagePicker}__upload-icon`,
+    imagePickerDeleteButton: `${imagePicker}__delete-button`,
+    imagePickerDeleteLabel: `${imagePicker}__delete-label`,
+    imagePickerDeleteIcon: `${imagePicker}__delete-icon`,
+    imagePickerInput: `${imagePicker}__input`,
+    imagePickerSelectedFile: `${imagePicker}__selected-file`,
+    imagePickerSelectedFileNameWrapper: `${imagePicker}__selected-file-name-wrapper`,
+    imagePickerSelectedFileRemoveWrapper: `${imagePicker}__selected-file-remove-wrapper`,
+    imagePickerSelectedFileFullName: `${imagePicker}__selected-file-full-name`
+};
+
+exports.default = CSS_CLASSES;
+//# sourceMappingURL=css_classes.js.map

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

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

@@ -0,0 +1,121 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+var useTranslation = require('../../../../../external/react-i18next/dist/es/useTranslation.js');
+var reactJss_esm = require('../../../../../external/react-jss/dist/react-jss.esm.js');
+var classnames = require('classnames');
+var constants = require('../file_picker/constants.js');
+var errors_list = require('../controls/components/errors_list.js');
+var utils = require('../file_picker/utils.js');
+var use_file_picker = require('../file_picker/use_file_picker.js');
+var css_classes = require('./css_classes.js');
+var main_module = require('../../css/image_picker/main.module.less.js');
+var image_input = require('./components/image_input.js');
+var image_preview = require('./components/image_preview.js');
+var uploaded_image_item = require('./components/uploaded_image_item.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
+
+const ImagePicker = ({ id, onChange, allowedExtensions = [constants.FILES_EXTENSIONS.WEBP, constants.FILES_EXTENSIONS.JPG, constants.FILES_EXTENSIONS.PNG, constants.FILES_EXTENSIONS.GIF, constants.FILES_EXTENSIONS.SVG], initialFile, name, className = ''
+// hasWidthInput,
+// widthInputPostfix = 'px',
+// widthInputLabel,
+// widthInputHint
+ }) => {
+    const [t] = useTranslation.useTranslation();
+    const inputRef = React.createRef();
+    // const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState<boolean>(true);
+    const [imageSize, setImageSize] = React.useState({ width: 0, height: 0 });
+    // const [widthInputValue, setWidthInputValue] = useState<number | undefined>();
+    // const [isInputWidthTooBig, setIsInputWidthTooBig] = useState<boolean>(false);
+    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = use_file_picker.useFilePicker({ initialFile, onChange, allowedExtensions, inputRef });
+    const acceptFiles = utils.getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
+    // const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
+    const imagePickerClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePicker], className && className);
+    const imagePickerWrapperClassName = classnames__default['default'](main_module['default'][css_classes['default'].imagePickerWrapper], file && main_module['default'][css_classes['default'].imagePickerWrapperHasFile], {
+        [main_module['default'][css_classes['default'].imagePickerWrapperError]]: errors.length
+    });
+    const useStyles = reactJss_esm.createUseStyles({
+        imagePickerWrapper: {
+            border: ({ isDragOver }) => (isDragOver ? '1px solid #135cc8' : ''),
+            backgroundColor: ({ isDragOver }) => (isDragOver ? 'rgba(208, 230, 255, 0.5)' : ''),
+            '& svg': {
+                // @ts-ignore
+                fill: ({ isDragOver }) => (isDragOver ? '#3c83ec' : '')
+            }
+        }
+    });
+    const dragOverStyles = useStyles({ isDragOver });
+    // const getImageWidth = (event: any) => {
+    //     let selectedImage;
+    //
+    //     if (event.target instanceof HTMLInputElement) {
+    //         const {
+    //             target: { files }
+    //         } = event;
+    //         selectedImage = files[0];
+    //     } else {
+    //         const {
+    //             dataTransfer: { files }
+    //         } = event;
+    //         selectedImage = files[0];
+    //     }
+    //
+    //     const imgElement = document.createElement('img');
+    //     const objectURL = URL.createObjectURL(selectedImage);
+    //
+    //     imgElement.onload = () => {
+    //         setImageSize({ width: imgElement.width, height: imgElement.height });
+    //         URL.revokeObjectURL(objectURL);
+    //     };
+    //
+    //     imgElement.src = objectURL;
+    // };
+    const handlePreviewLoaded = (event) => {
+        const $image = event.target;
+        setImageSize({ width: $image.width, height: $image.height });
+    };
+    // const checkIfInputMaxWidthIsGreaterThenImageWidth = (): void => {
+    //     if (!widthInputValue || !imageSize.width) return;
+    //     widthInputValue > imageSize.width ? setIsInputWidthTooBig(true) : setIsInputWidthTooBig(false);
+    // };
+    const handleOnDropFile = (event) => {
+        onDropFile(event);
+        // getImageWidth(event);
+    };
+    const handleOnFileChange = (event) => {
+        onFileChange(event);
+        // getImageWidth(event);
+    };
+    const handleOnFileDelete = () => {
+        setImageSize({ width: 0, height: 0 });
+        onFileDelete();
+    };
+    // const handleOnWidthInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    //     setWidthInputValue(event.target.valueAsNumber);
+    // };
+    // useEffect(() => {
+    //     // checkIfInvalideFileFormatErrorOccured(errors) ? setFileFormatIsCorrect(false) : setFileFormatIsCorrect(true);
+    //     // file && checkIfInputMaxWidthIsGreaterThenImageWidth();
+    // }, [errors, file, widthInputValue]);
+    // useEffect(() => {
+    //     setWidthInputValue(imageSize.width);
+    // }, [imageSize]);
+    return (React__default['default'].createElement("div", { className: imagePickerClassName },
+        React__default['default'].createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
+            file &&
+                (isPreview ? (React__default['default'].createElement(React__default['default'].Fragment, null,
+                    React__default['default'].createElement(image_preview.ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError, onLoad: handlePreviewLoaded }),
+                    React__default['default'].createElement(uploaded_image_item.UploadedImageItem, { imageSize: imageSize, file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onFileDelete: handleOnFileDelete }))) : (React__default['default'].createElement("div", null, t('No preview')))),
+            React__default['default'].createElement(image_input['default'], { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: handleOnDropFile }),
+            React__default['default'].createElement("input", { onChange: handleOnFileChange, id: id, ref: inputRef, type: "file", name: name, className: main_module['default'][css_classes['default'].imagePickerInput], accept: acceptFiles })),
+        errors && React__default['default'].createElement(errors_list.ErrorsList, { errors: errors })));
+};
+
+exports.default = ImagePicker;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA,6BAA6B,iEAAqE;AAClG,2BAA2B,yDAA6D;AACxF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;"}