@dreamcommerce/aurora 2.5.6 → 2.6.0-10

package/build/esm/packages/aurora/src/components/file_picker/constants.d.ts

@@ -0,0 +1,51 @@
+export declare const FILE_PICKER_ERROR: {
+    invalidFileFormat: string;
+};
+export declare const FILES_EXTENSIONS: {
+    readonly GIF: "gif";
+    readonly JPG: "jpg";
+    readonly JPEG: "jpeg";
+    readonly PNG: "png";
+    readonly WBMP: "wbmp";
+    readonly WEBP: "webp";
+    readonly BMP: "bmp";
+    readonly ICO: "ico";
+    readonly SVG: "svg";
+    readonly TXT: "txt";
+};
+export declare const MIME_FILE_EXTENSIONS: {
+    readonly gif: "image/gif";
+    readonly jpg: "image/jpg";
+    readonly jpeg: "image/jpeg";
+    readonly png: "image/png";
+    readonly wbmp: "image/vnd.wap.wbmp";
+    readonly webp: "image/webp";
+    readonly bmp: "image/bmp";
+    readonly ico: "image/x-icon";
+    readonly svg: "image/svg+xml";
+    readonly txt: "text/plain";
+};
+export declare const MIME_TYPE_TO_FILE_EXTENSIONS: {
+    readonly "image/gif": "gif";
+    readonly "image/jpg": "jpg";
+    readonly "image/jpeg": "jpeg";
+    readonly "image/png": "png";
+    readonly "image/vnd.wap.wbmp": "wbmp";
+    readonly "image/webp": "webp";
+    readonly "image/bmp": "bmp";
+    readonly "image/x-icon": "ico";
+    readonly "image/svg+xml": "svg";
+    readonly "text/plain": "txt";
+};
+export declare const FILE_EXTENSION_TO_MIME_TYPE: {
+    readonly gif: "image/gif";
+    readonly jpg: "image/jpg";
+    readonly jpeg: "image/jpeg";
+    readonly png: "image/png";
+    readonly wbmp: "image/vnd.wap.wbmp";
+    readonly webp: "image/webp";
+    readonly bmp: "image/bmp";
+    readonly ico: "image/x-icon";
+    readonly svg: "image/svg+xml";
+    readonly txt: "text/plain";
+};

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

@@ -0,0 +1,54 @@
+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]
+};
+
+export { FILES_EXTENSIONS, FILE_EXTENSION_TO_MIME_TYPE, FILE_PICKER_ERROR, MIME_FILE_EXTENSIONS, MIME_TYPE_TO_FILE_EXTENSIONS };
+//# sourceMappingURL=constants.js.map

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

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

@@ -1,20 +1,23 @@
-import React from 'react';
-import styles from '../../css/file_picker/main.module.less.js';
+import React, { createRef } from 'react';
+import { FILES_EXTENSIONS } from './constants.js';
 import CSS_CLASSES from './css_classes.js';
-import SelectedFilePreview from './components/selected_file_preview.js';
+import styles from '../../css/file_picker/main.module.less.js';
 import FileInput from './components/file_input.js';
-import { useFilePicker } from './use_file_picker.js';
+import SelectedFilePreview from './components/selected_file_preview.js';
 import { getAcceptFilesParametersFromAllowedExtensions } from './utils.js';
+import { useFilePicker } from './use_file_picker.js';
 
-const FilePicker = ({ id, onChange, allowedExtensions = ['WEBP', 'JPG', 'PNG', 'GIF'], initialFile, name, className = '' }) => {
+const FilePicker = ({ id, onChange, allowedExtensions = [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF], initialFile, name, className = '' }) => {
+    const inputRef = createRef();
     const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, isPreview, isDragOver } = useFilePicker({
         initialFile,
-        onChange
+        onChange,
+        inputRef
     });
     const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
     return (React.createElement("div", { className: className },
         file ? (React.createElement(SelectedFilePreview, { file: file, onFileDelete: onFileDelete, onPreviewError: onPreviewError, isPreview: isPreview })) : (React.createElement(FileInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile })),
-        React.createElement("input", { onChange: onFileChange, id: id, type: "file", name: name, className: styles[CSS_CLASSES.filePickerInput], accept: acceptFiles })));
+        React.createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.filePickerInput], accept: acceptFiles })));
 };
 
 export default FilePicker;

package/build/esm/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;"}
+{"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;"}

package/build/esm/packages/aurora/src/components/file_picker/types.d.ts

@@ -1,4 +1,6 @@
 import React, { ChangeEvent } from 'react';
+import { FILES_EXTENSIONS, MIME_FILE_EXTENSIONS } from "./constants";
+import { TControlErrors } from "../controls/types";
 export declare type TFilePickerFile = {
     fileUrl: string;
     fileName: string;
@@ -8,8 +10,9 @@ export interface IFilePicker {
     name?: string;
     className?: string;
     onChange?: (fileList: FileList | null) => void;
-    allowedExtensions?: string[];
+    allowedExtensions?: TFilesExtension[];
     initialFile?: TFilePickerFile;
+    errors?: TControlErrors;
 }
 export interface ISelectedFilePreview {
     file: TFilePickerFile | null;
@@ -22,7 +25,7 @@ export interface IFileInput {
     onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
     onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
     onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
-    allowedExtensions: string[];
+    allowedExtensions: TFilesExtension[];
     isDragOver: boolean;
 }
 export interface IUseFilePicker {
@@ -33,10 +36,16 @@ export interface IUseFilePicker {
     onFileDelete: () => void;
     onPreviewError: () => void;
     file: TFilePickerFile | undefined;
+    errors: string[];
     isPreview: boolean;
     isDragOver: boolean;
 }
 export interface IUseFilePickerProps {
     onChange?: (fileList: FileList | null) => void;
     initialFile?: TFilePickerFile;
+    allowedExtensions?: TFilesExtension[];
+    inputRef: React.RefObject<HTMLInputElement>;
+    initialErrors?: TControlErrors;
 }
+export declare type TFilesExtension = typeof FILES_EXTENSIONS[keyof typeof FILES_EXTENSIONS];
+export declare type TMimeFileExtension = typeof MIME_FILE_EXTENSIONS[keyof typeof MIME_FILE_EXTENSIONS];

package/build/esm/packages/aurora/src/components/file_picker/types.js

@@ -1,2 +1,4 @@
 import 'react';
+import '@auroraComponents/file_picker/constants';
+import '@auroraComponents/controls/types';
 //# sourceMappingURL=types.js.map

package/build/esm/packages/aurora/src/components/file_picker/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/file_picker/types.ts"],"names":[],"mappings":"AAAA,OAAmC,OAAO,CAAC"}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../../../src/components/file_picker/types.ts"],"names":[],"mappings":"AAAA,OAAmC,OAAO,CAAC;AAC3C,OAAuD,yCAAyC,CAAC;AACjG,OAA+B,kCAAkC,CAAC"}

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.d.ts

@@ -1,2 +1,2 @@
 import { IUseFilePicker, IUseFilePickerProps } from "./types";
-export declare const useFilePicker: ({ onChange, initialFile }: IUseFilePickerProps) => IUseFilePicker;
+export declare const useFilePicker: ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }: IUseFilePickerProps) => IUseFilePicker;

package/build/esm/packages/aurora/src/components/file_picker/use_file_picker.js

@@ -1,28 +1,50 @@
 import { useState, useEffect } from 'react';
+import i18n from '../../i18n.js';
+import { MIME_TYPE_TO_FILE_EXTENSIONS, FILE_PICKER_ERROR } from './constants.js';
 
-const useFilePicker = ({ onChange, initialFile }) => {
+const useFilePicker = ({ onChange, initialFile, allowedExtensions, inputRef, initialErrors }) => {
     const [file, setFile] = useState(initialFile);
+    const [errors, setErrors] = useState(initialErrors !== null && initialErrors !== void 0 ? initialErrors : []);
     const [isDragOver, setDragOver] = useState(false);
     const [isPreview, setPreview] = useState(true);
     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', MIME_TYPE_TO_FILE_EXTENSIONS);
+            console.log('MIME_TYPE_TO_FILE_EXTENSIONS[mimeType]', MIME_TYPE_TO_FILE_EXTENSIONS[mimeType]);
+            return acc ? acc : MIME_TYPE_TO_FILE_EXTENSIONS[mimeType] === extension;
+        }, false);
+        console.log('isValid', isValid);
+        console.log('mimeType', mimeType);
+        !isValid ? setErrors([...errors, i18n.t(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);
@@ -42,8 +64,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 = () => {
@@ -57,6 +81,7 @@ const useFilePicker = ({ onChange, initialFile }) => {
         onFileDelete,
         onPreviewError,
         file,
+        errors,
         isPreview,
         isDragOver
     };

package/build/esm/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;"}
+{"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;"}

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

@@ -1,13 +1,7 @@
+import { FILE_EXTENSION_TO_MIME_TYPE } from './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) => FILE_EXTENSION_TO_MIME_TYPE[extension]).join(', ');
 };
 
 export { getAcceptFilesParametersFromAllowedExtensions };

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

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

@@ -0,0 +1,4 @@
+import { IImagePickerInput } from '../types';
+import React from 'react';
+declare const _default: React.FC<IImagePickerInput>;
+export default _default;

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

@@ -0,0 +1,24 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import withTranslation from '../../../utilities/translation/with_translation.js';
+import IconUpload from '../../../assets/icon_upload.js';
+import CSS_CLASSES from '../css_classes.js';
+import styles from '../../../css/image_picker/main.module.less.js';
+
+const ImageInput = ({ id, onDropFile, onDragOver, onDragLeave, allowedExtensions, isDragOver }) => {
+    const [t] = useTranslation();
+    return (React.createElement("label", { htmlFor: id, onDrop: onDropFile, onDragOver: onDragOver, onDragLeave: onDragLeave, className: styles[CSS_CLASSES.imagePickerLabel] },
+        React.createElement("div", { className: styles[CSS_CLASSES.imagePickerDescription] },
+            React.createElement(IconUpload, { className: styles[CSS_CLASSES.imagePickerUploadIcon] }),
+            React.createElement("p", null, t('Drag a file here or browse')),
+            React.createElement("span", null,
+                "(",
+                t('supported format'),
+                ": ",
+                allowedExtensions.join(', '),
+                ")"))));
+};
+var ImageInput$1 = withTranslation(ImageInput);
+
+export default ImageInput$1;
+//# sourceMappingURL=image_input.js.map

package/build/esm/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,+BAA+B,oEAAwE;AACvG;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/image_picker/components/image_preview.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { TFilePickerFile } from "../../file_picker/types";
+declare type TImagePreviewProps = {
+    file: TFilePickerFile;
+    isValid: boolean;
+    onError: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+    onLoad: (event: React.SyntheticEvent<HTMLImageElement, Event>) => void;
+};
+export declare const ImagePreview: ({ isValid, file, onError, onLoad }: TImagePreviewProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import CSS_CLASSES from '../css_classes.js';
+import styles from '../../../css/image_picker/main.module.less.js';
+import IconWrongFileFormat from '../../../assets/icon_wrong_file_format.js';
+
+const ImagePreview = ({ isValid, file, onError, onLoad }) => {
+    return (React.createElement("div", { className: styles[CSS_CLASSES.imagePickerImagePreviewWrapper] }, isValid ? (React.createElement("img", { alt: "", src: (file === null || file === void 0 ? void 0 : file.fileUrl) || '', onError: onError, onLoad: onLoad, className: styles[CSS_CLASSES.imagePickerImagePreview] })) : (React.createElement(IconWrongFileFormat, { className: styles[CSS_CLASSES.imagePickerWrongFileFormatIcon] }))));
+};
+
+export { ImagePreview };
+//# sourceMappingURL=image_preview.js.map

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

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

@@ -0,0 +1,8 @@
+declare type TUploadedImageItemProps = {
+    file: any;
+    isValid: boolean;
+    imageSize: any;
+    onFileDelete: () => void;
+};
+export declare const UploadedImageItem: ({ imageSize, onFileDelete, isValid, file }: TUploadedImageItemProps) => JSX.Element;
+export {};

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { useTranslation } from '../../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { FileUtils } from '@dreamcommerce/utilities';
+import IconDelete from '../../../assets/icon_delete.js';
+import CSS_CLASSES from '../css_classes.js';
+import styles from '../../../css/image_picker/main.module.less.js';
+
+const UploadedImageItem = ({ imageSize, onFileDelete, isValid, file }) => {
+    const [t] = useTranslation();
+    const imageName = FileUtils.getFileName(file.fileName);
+    const imageExtension = FileUtils.getFileExtension(file.fileName);
+    const imageWidth = imageSize && imageSize.width;
+    const imageHeight = imageSize && imageSize.height;
+    return (React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFile] },
+        React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileNameWrapper] }, isValid && (React.createElement(React.Fragment, null,
+            FileUtils.getShortenFileName(imageName, 10, 5, 1),
+            `.${imageExtension} (${imageWidth}x${imageHeight}px)`))),
+        React.createElement("div", { className: styles[CSS_CLASSES.imagePickerSelectedFileRemoveWrapper] },
+            React.createElement("button", { onClick: onFileDelete, className: styles[CSS_CLASSES.imagePickerDeleteButton] },
+                React.createElement(IconDelete, { className: styles[CSS_CLASSES.imagePickerDeleteIcon] }),
+                React.createElement("span", { className: styles[CSS_CLASSES.imagePickerDeleteLabel] }, t('Remove'))))));
+};
+
+export { UploadedImageItem };
+//# sourceMappingURL=uploaded_image_item.js.map

package/build/esm/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,+BAA+B,oEAAwE;AACvG;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/image_picker/constants.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../../../../../../src/components/image_picker/constants.ts"],"names":[],"mappings":""}

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

@@ -0,0 +1,21 @@
+declare const _default: {
+    imagePicker: string;
+    imagePickerWrapper: string;
+    imagePickerWrapperError: string;
+    imagePickerWrapperHasFile: string;
+    imagePickerLabel: string;
+    imagePickerDescription: string;
+    imagePickerImagePreview: string;
+    imagePickerImagePreviewWrapper: string;
+    imagePickerWrongFileFormatIcon: string;
+    imagePickerErrorText: string;
+    imagePickerUploadIcon: string;
+    imagePickerDeleteButton: string;
+    imagePickerDeleteLabel: string;
+    imagePickerDeleteIcon: string;
+    imagePickerInput: string;
+    imagePickerSelectedFile: string;
+    imagePickerSelectedFileNameWrapper: string;
+    imagePickerSelectedFileRemoveWrapper: string;
+};
+export default _default;

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

@@ -0,0 +1,24 @@
+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`
+};
+
+export default CSS_CLASSES;
+//# sourceMappingURL=css_classes.js.map

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

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

@@ -0,0 +1,4 @@
+import { IImagePicker } from "./types";
+import React from 'react';
+declare const ImagePicker: React.FC<IImagePicker>;
+export default ImagePicker;

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

@@ -0,0 +1,116 @@
+import React, { createRef, useState } from 'react';
+import { useTranslation } from '../../../../../external/react-i18next/dist/es/useTranslation.js';
+import { createUseStyles } from '../../../../../external/react-jss/dist/react-jss.esm.js';
+import classnames from 'classnames';
+import { FILES_EXTENSIONS } from '../file_picker/constants.js';
+import { ErrorsList } from '../controls/components/errors_list.js';
+import { getAcceptFilesParametersFromAllowedExtensions } from '../file_picker/utils.js';
+import { useFilePicker } from '../file_picker/use_file_picker.js';
+import CSS_CLASSES from './css_classes.js';
+import styles from '../../css/image_picker/main.module.less.js';
+import ImageInput from './components/image_input.js';
+import { ImagePreview } from './components/image_preview.js';
+import { UploadedImageItem } from './components/uploaded_image_item.js';
+
+const ImagePicker = ({ id, onChange, errors: initialErrors, allowedExtensions = [FILES_EXTENSIONS.WEBP, FILES_EXTENSIONS.JPG, FILES_EXTENSIONS.PNG, FILES_EXTENSIONS.GIF, FILES_EXTENSIONS.SVG], initialFile, name, className = ''
+// hasWidthInput,
+// widthInputPostfix = 'px',
+// widthInputLabel,
+// widthInputHint
+ }) => {
+    const [t] = useTranslation();
+    const inputRef = createRef();
+    // const [fileFormatIsCorrect, setFileFormatIsCorrect] = useState<boolean>(true);
+    const [imageSize, setImageSize] = useState(undefined);
+    // const [widthInputValue, setWidthInputValue] = useState<number | undefined>();
+    // const [isInputWidthTooBig, setIsInputWidthTooBig] = useState<boolean>(false);
+    const onImageFileChange = (files) => {
+        onChange === null || onChange === void 0 ? void 0 : onChange(files, imageSize);
+    };
+    const { onDropFile, onFileChange, onDragOver, onDragLeave, onFileDelete, onPreviewError, file, errors, isPreview, isDragOver } = useFilePicker({ initialFile, onChange: onImageFileChange, allowedExtensions, initialErrors, inputRef });
+    const acceptFiles = getAcceptFilesParametersFromAllowedExtensions(allowedExtensions);
+    // const showMaxWidthInput = hasWidthInput && file && fileFormatIsCorrect && !isVectorImage;
+    const imagePickerClassName = classnames(styles[CSS_CLASSES.imagePicker], className && className);
+    const imagePickerWrapperClassName = classnames(styles[CSS_CLASSES.imagePickerWrapper], file && styles[CSS_CLASSES.imagePickerWrapperHasFile], {
+        [styles[CSS_CLASSES.imagePickerWrapperError]]: errors.length
+    });
+    const useStyles = 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: React.DragEvent<HTMLLabelElement>) => {
+    //     onDropFile(event);
+    //     // getImageWidth(event);
+    // };
+    //
+    // const handleOnFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    //     onFileChange(event);
+    //     // getImageWidth(event);
+    // };
+    const handleOnFileDelete = () => {
+        setImageSize(undefined);
+        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.createElement("div", { className: imagePickerClassName },
+        React.createElement("div", { className: `${imagePickerWrapperClassName} ${dragOverStyles.imagePickerWrapper}` },
+            file &&
+                (isPreview ? (React.createElement(React.Fragment, null,
+                    React.createElement(ImagePreview, { file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onError: onPreviewError, onLoad: handlePreviewLoaded }),
+                    React.createElement(UploadedImageItem, { imageSize: imageSize, file: file, isValid: !(errors === null || errors === void 0 ? void 0 : errors.length), onFileDelete: handleOnFileDelete }))) : (React.createElement("div", null, t('No preview')))),
+            React.createElement(ImageInput, { onDragLeave: onDragLeave, onDragOver: onDragOver, isDragOver: isDragOver, allowedExtensions: allowedExtensions, id: id, onDropFile: onDropFile }),
+            React.createElement("input", { onChange: onFileChange, id: id, ref: inputRef, type: "file", name: name, className: styles[CSS_CLASSES.imagePickerInput], accept: acceptFiles })),
+        errors && React.createElement(ErrorsList, { errors: errors })));
+};
+
+export default ImagePicker;
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA;AACA,+BAA+B,iEAAqE;AACpG,gCAAgC,yDAA6D;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;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/image_picker/types.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+import { IFilePicker, TFilesExtension } from "../file_picker/types";
+export declare type TImagePickerFile = {
+    fileUrl: string;
+    fileName: string;
+};
+export interface IImagePicker extends Omit<IFilePicker, 'onChange'> {
+    onChange?: (fileList: FileList | null, imageSize?: TImageSize) => void;
+}
+export interface ISelectedImagePreview {
+    file: TImagePickerFile;
+    isPreview: boolean;
+    fileFormatIsCorrect?: boolean;
+    imageSize?: TImageSize;
+    onPreviewError: () => void;
+    onFileDelete: () => void;
+}
+export interface IImagePickerInput {
+    id: string;
+    onDropFile: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragOver: (event: React.DragEvent<HTMLLabelElement>) => void;
+    onDragLeave: (event: React.DragEvent<HTMLLabelElement>) => void;
+    allowedExtensions: TFilesExtension[];
+    isDragOver: boolean;
+}
+export declare type TImageSize = {
+    width: number;
+    height: number;
+};

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

@@ -0,0 +1,3 @@
+import 'react';
+import '@auroraComponents/file_picker/types';
+//# sourceMappingURL=types.js.map