hrm_ui_lib 2.1.0 → 2.2.0

package/components/FileUpload/DropzoneFileUpload/FilePreview.js

@@ -1,53 +1,24 @@
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useState } from 'react';
-import { Progress } from '../../Progress/Progress.js';
-import classNames from 'classnames';
-
-var img = "data:image/svg+xml,%3csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M24.1998 31.4H7.79976C5.48016 31.4 3.59976 29.5196 3.59976 27.2V4.8C3.59976 2.4804 5.48016 0.6 7.79976 0.6H16.4708C17.5734 0.6 18.6318 1.03361 19.4175 1.80722L27.1465 9.41728C27.9483 10.2067 28.3998 11.2849 28.3998 12.4101V27.2C28.3998 29.5196 26.5194 31.4 24.1998 31.4Z' fill='%23FEFEFE' stroke='%23CCCCCC' stroke-width='1.2'/%3e%3cpath d='M18 1V7.8C18 9.56731 19.4327 11 21.2 11H28' stroke='%23CCCCCC' stroke-width='1.2'/%3e%3cpath d='M0 15C0 13.3431 1.34315 12 3 12H19C20.6569 12 22 13.3431 22 15V19C22 20.6569 20.6569 22 19 22H3C1.34315 22 0 20.6569 0 19V15Z' fill='%23453DC7'/%3e%3cpath d='M4.616 20H3.76V14.288H6.976V15.024H4.616V16.888H6.824V17.624H4.616V20ZM9.74656 20H7.53056V19.504L8.21056 19.304V14.992L7.53056 14.784V14.288H9.74656V14.784L9.07456 14.992V19.304L9.74656 19.504V20ZM10.8147 20V14.288H11.6787V19.256H14.1187V20H10.8147ZM18.3198 20H15.1038V14.288H18.3198V15.024H15.9678V16.656H18.1758V17.384H15.9678V19.256H18.3198V20Z' fill='%23FEFEFE'/%3e%3c/svg%3e";
-
-var FilePreview = function FilePreview(_ref) {
-  var preview = _ref.preview,
-    type = _ref.type;
-  var _useState = useState(true),
-    _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = useState(false),
-    _useState4 = _slicedToArray(_useState3, 2),
-    hasError = _useState4[0],
-    setHasError = _useState4[1];
-  var handleImageOnLoad = function handleImageOnLoad() {
-    setTimeout(function () {
-      setLoading(false);
-    }, 500);
-  };
-  var handleImageOnError = function handleImageOnError() {
-    setHasError(true);
-    setLoading(false);
-  };
-  if (type === 'image') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, loading && /*#__PURE__*/React.createElement(Progress, {
-      size: "small",
-      loop: true,
-      noText: true,
-      percent: 30,
-      type: "circle",
-      dimension: 20
-    }), /*#__PURE__*/React.createElement("img", {
-      src: hasError ? img : preview,
-      alt: "Preview",
-      onLoad: handleImageOnLoad,
-      onError: handleImageOnError,
-      className: classNames('dz-file-upload__files--item__preview--image', {
-        'dz-file-upload__files--item__preview--image--loading': loading
-      })
-    }));
-  }
-  return /*#__PURE__*/React.createElement("img", {
-    src: img,
-    alt: "Preview",
-    className: "dnd-file-upload__files--item__preview--image dnd-file-upload__files--item__preview--image_default"
-  });
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Progress } from '../../Progress';
+import filePreviewSVG from '../../../assets/images/file-preview.svg';
+import classnames from 'classnames';
+export const FilePreview = ({ preview, type }) => {
+    const [loading, setLoading] = useState(true);
+    const [hasError, setHasError] = useState(false);
+    const handleImageOnLoad = () => {
+        setTimeout(() => {
+            setLoading(false);
+        }, 500);
+    };
+    const handleImageOnError = () => {
+        setHasError(true);
+        setLoading(false);
+    };
+    if (type === 'image') {
+        return (_jsxs(_Fragment, { children: [loading && _jsx(Progress, { size: "small", loop: true, noText: true, percent: 30, type: "circle", dimension: 20 }), _jsx("img", { src: hasError ? filePreviewSVG : preview, alt: "Preview", onLoad: handleImageOnLoad, onError: handleImageOnError, className: classnames('dz-file-upload__files--item__preview--image', {
+                        'dz-file-upload__files--item__preview--image--loading': loading
+                    }) })] }));
+    }
+    return (_jsx("img", { src: filePreviewSVG, alt: "Preview", className: "dnd-file-upload__files--item__preview--image dnd-file-upload__files--item__preview--image_default" }));
 };
-
-export { FilePreview };

package/components/FileUpload/DropzoneFileUpload/PreviewItem.js

@@ -1,52 +1,30 @@
-import '../../Text/Text.js';
-export { c as PreviewItem } from '../../../Alert-BslI0aA0.js';
-import '../../SVGIcons/IconDelete.js';
-import 'react';
-import '../types.js';
-import './FilePreview.js';
-import '../../SVGIcons/IconArrowDownloadFilled.js';
-import 'classnames';
-import '../../../helpers/format-date.js';
-import '../../../helpers/download-file.js';
-import '@babel/runtime/helpers/extends';
-import 'react-toastify';
-import 'dayjs';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../../consts/index.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-syntax-highlighter';
-import '@babel/runtime/helpers/typeof';
-import '../../../utils/helpers.js';
-import '../../Alert/consts.js';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../../../type/file-upload.js';
-import '../../../helpers/locale.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import '../../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useHideBodyScroll.js';
-import '../../SVGIcons/IconDismiss.js';
-import '../../Tooltip/types.js';
-import '../../Tooltip/Tooltip.js';
-import '../../../hooks/useGetTooltipStyles.js';
-import '../../../hooks/useGetElemSizes.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../../../hooks/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '../../SVGIcons/IconDismissFilled.js';
-import '../../Button/consts.js';
-import '../../Progress/Progress.js';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Text } from '../../Text';
+import { Button } from '../../Button';
+import IconDelete from '../../SVGIcons/IconDelete';
+import { useMemo } from 'react';
+import { FileUploadMode } from '../types';
+import { FilePreview } from './FilePreview';
+import { formatFileSize, shortenFileName } from './helpers';
+import IconArrowDownloadFilled from '../../SVGIcons/IconArrowDownloadFilled';
+import classnames from 'classnames';
+import { downloadFile } from '../../../helpers';
+export const PreviewItem = ({ file, onRemove, mode }) => {
+    const type = file.type.split('/')[0];
+    const preview = useMemo(() => {
+        return URL.createObjectURL(file);
+    }, [file.name]);
+    const handleItemClick = () => {
+        if (mode === FileUploadMode.view) {
+            window.open(preview, '_blank');
+        }
+    };
+    const onFileDownload = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        downloadFile(preview, file.name);
+    };
+    return (_jsxs("div", { className: classnames('dz-file-upload__files--item', {
+            'dz-file-upload__files--item--view': mode === FileUploadMode.view
+        }), onClick: handleItemClick, children: [_jsx("div", { className: 'dz-file-upload__files--item__preview', children: _jsx(FilePreview, { preview: preview, type: type }) }), _jsxs("div", { className: 'dz-file-upload__files--item__info', children: [_jsxs("div", { className: "dz-file-upload__files--item__info-title", children: [_jsx(Text, { weight: "semibold", children: shortenFileName(file.name, 40) }), mode === FileUploadMode.attach && (_jsx(Button, { size: "small", type: "tertiary", onClick: onRemove, iconProps: { Component: IconDelete } })), mode === FileUploadMode.view && (_jsx(Button, { size: "small", type: "tertiary", onClick: onFileDownload, iconProps: { Component: IconArrowDownloadFilled } }))] }), _jsx("div", { className: "dz-file-upload__files--item__info-size", children: _jsx(Text, { size: "small", children: formatFileSize(file.size) }) })] })] }));
+};

package/components/FileUpload/DropzoneFileUpload/helpers.js

@@ -1,52 +1,79 @@
-import '../../../consts/index.js';
-import '../../../helpers/format-date.js';
-import '../../../helpers/locale.js';
-import '@babel/runtime/helpers/extends';
-import 'react';
-import 'react-toastify';
-import 'classnames';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-export { f as formatFileSize, g as generateAreaContent, b as getDropzoneLocale, s as shortenFileName } from '../../../Alert-BslI0aA0.js';
-import 'react-syntax-highlighter';
-import '@babel/runtime/helpers/typeof';
-import '../../../type/file-upload.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import '../../Alert/consts.js';
-import '../../Text/Text.js';
-import '../../../utils/helpers.js';
-import '../../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../types.js';
-import '../../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useHideBodyScroll.js';
-import '../../SVGIcons/IconDismiss.js';
-import '../../Tooltip/types.js';
-import '../../Tooltip/Tooltip.js';
-import '../../../hooks/useGetTooltipStyles.js';
-import '../../../hooks/useGetElemSizes.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../../../hooks/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '../../SVGIcons/IconDismissFilled.js';
-import '../../SVGIcons/IconDelete.js';
-import './FilePreview.js';
-import '../../Progress/Progress.js';
-import '../../SVGIcons/IconArrowDownloadFilled.js';
-import '../../../helpers/download-file.js';
-import '../../Button/consts.js';
+import { FILE_ACCEPT_TYPE } from '../../../consts';
+import { getTranslationLocale } from '../../../helpers';
+export const shortenFileName = (fileName, maxLength) => {
+    // Regular expression to split the name into three parts: start, middle, and extension
+    const regex = /^(.{10}).*?(.{10}\.[^.]*)$/;
+    // If the file name length exceeds maxLength, shorten it
+    if (fileName.length > maxLength) {
+        return fileName.replace(regex, '$1...$2');
+    }
+    // If it's short enough, return as is
+    return fileName;
+};
+export const formatFileSize = (sizeInBytes, fractionDigits = 0) => {
+    if (sizeInBytes < 1024) {
+        return `${sizeInBytes} B`; // Bytes
+    }
+    else if (sizeInBytes < 1024 * 1024) {
+        return `${(sizeInBytes / 1024).toFixed(fractionDigits)} KB`; // Kilobytes
+    }
+    else if (sizeInBytes < 1024 * 1024 * 1024) {
+        return `${(sizeInBytes / (1024 * 1024)).toFixed(fractionDigits)} MB`; // Megabytes
+    }
+    else {
+        return `${(sizeInBytes / (1024 * 1024 * 1024)).toFixed(fractionDigits)} GB`; // Gigabytes
+    }
+};
+export const generateAreaContent = ({ allowedTypes, maxSize, locale }) => {
+    const acceptTypes = allowedTypes.map((type) => FILE_ACCEPT_TYPE[type]).flat();
+    const translation = getDropzoneLocale(locale);
+    const acceptTypesMessage = allowedTypes.length === 1
+        ? allowedTypes[0]
+        : allowedTypes.reduce((acc, currentValue, _index, _arr) => {
+            if (_index === _arr.length - 1) {
+                return `${acc} ${translation.or} ${currentValue}`;
+            }
+            return acc ? `${acc}, ${currentValue}` : currentValue;
+        }, '');
+    return {
+        acceptTypes,
+        maxSizeFormatted: formatFileSize(maxSize),
+        acceptTypesMessage
+    };
+};
+export const getDropzoneLocale = (lang) => {
+    const locale = lang || getTranslationLocale();
+    const translation = {
+        en: {
+            title: 'Choose a file or drop it here',
+            format: 'format',
+            formats: 'formats',
+            maxSize: 'Maximum size up to $1.',
+            fileInvalidType: 'The file type should be $1',
+            fileTooLarge: 'The file is too large (Max $1)',
+            tooManyFiles: 'Too many files. Please select one file.',
+            or: 'or'
+        },
+        ru: {
+            title: 'Выберите файл или перетащите его сюда',
+            format: 'формат',
+            formats: 'форматы',
+            maxSize: 'Максимальный размер до $1',
+            fileInvalidType: 'Тип файла должен быть $1',
+            fileTooLarge: 'Файл слишком большой (Максимум $1)',
+            tooManyFiles: 'Слишком много файлов. Пожалуйста, выберите один файл.',
+            or: 'или'
+        },
+        hy: {
+            title: 'Ընտրեք ֆայլ կամ քաշեք այն այստեղ',
+            format: 'ֆորմատ',
+            formats: 'ֆորմատներ',
+            maxSize: 'Առավելագույն չափը՝ մինչև $1',
+            fileInvalidType: 'Ֆայլի տեսակը պետք է լինի $1',
+            fileTooLarge: 'Ֆայլը չափազանց մեծ է (Առավելագույնը $1)',
+            tooManyFiles: 'Չափազանց շատ ֆայլեր։ Խնդրում ենք ընտրել միայն մեկ ֆայլ։',
+            or: 'կամ'
+        }
+    };
+    return translation[locale] || translation.en;
+};

package/components/FileUpload/DropzoneFileUpload/index.js

@@ -1,52 +1 @@
-export { D as DropzoneFileUpload } from '../../../Alert-BslI0aA0.js';
-import '@babel/runtime/helpers/extends';
-import 'react';
-import '../../Alert/consts.js';
-import 'classnames';
-import '../../Text/Text.js';
-import '../../../utils/helpers.js';
-import 'dayjs';
-import '@babel/runtime/helpers/defineProperty';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../../helperComponents/Loader/Loader.js';
-import '@babel/runtime/helpers/slicedToArray';
-import '@babel/runtime/helpers/toConsumableArray';
-import '../../../consts/index.js';
-import '../../../type/file-upload.js';
-import '../../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import 'react-dropzone';
-import '../../SVGIcons/IconUpload.js';
-import '../types.js';
-import '../../../helpers/format-date.js';
-import '../../../helpers/locale.js';
-import '../../../type/locale.js';
-import '../../../helpers/storage.js';
-import 'react-toastify';
-import '../../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../../hooks/useOnOutsideClick.js';
-import '../../../hooks/useHideBodyScroll.js';
-import '../../SVGIcons/IconDismiss.js';
-import '../../Tooltip/types.js';
-import '../../Tooltip/Tooltip.js';
-import '../../../hooks/useGetTooltipStyles.js';
-import '../../../hooks/useGetElemSizes.js';
-import '../../../hooks/useGetElemPositions.js';
-import '../../../hooks/useGetTooltipPosition.js';
-import '../../../hooks/useHideOnScroll.js';
-import 'react-syntax-highlighter';
-import '../../Link/Link.js';
-import '../../Popover/PopoverDesktop.js';
-import '../../SVGIcons/IconInfo.js';
-import '../../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../../SVGIcons/IconDismissFilled.js';
-import '../../SVGIcons/IconDelete.js';
-import './FilePreview.js';
-import '../../Progress/Progress.js';
-import '../../SVGIcons/IconArrowDownloadFilled.js';
-import '../../../helpers/download-file.js';
-import '../../Button/consts.js';
+export * from './DropzoneFileUpload';

package/components/FileUpload/FileUpload.js

@@ -1,193 +1,70 @@
-import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, useState, useCallback } from 'react';
-import { FileUploadMode } from './types.js';
-import { B as Button } from '../../Alert-BslI0aA0.js';
-import { Label } from '../../helperComponents/Label/Label.js';
-import 'classnames';
-import { uniqueFiles, checkIsAllowedFileSize, checkIsAllowedTypes, getFormattedValues } from '../../utils/helpers.js';
-import '@babel/runtime/helpers/extends';
-import { FILE_UPLOAD_ERRORS } from '../../consts/index.js';
-import '../../hooks/useScreenSize.js';
-import 'react-hook-form';
-import '@babel/runtime/helpers/defineProperty';
-import 'react-syntax-highlighter';
-import { UploadItems } from './UploadItems.js';
-import { IconEditFilled } from '../SVGIcons/IconEditFilled.js';
-import { IconEdit } from '../SVGIcons/IconEdit.js';
-import { IconAttach } from '../SVGIcons/IconAttach.js';
-import '../Alert/consts.js';
-import '../Text/Text.js';
-import 'dayjs';
-import '@babel/runtime/helpers/objectWithoutProperties';
-import '../../helperComponents/Loader/Loader.js';
-import 'react-dropzone';
-import '../SVGIcons/IconUpload.js';
-import '../../type/file-upload.js';
-import '../../helpers/format-date.js';
-import '../../helpers/locale.js';
-import '../../type/locale.js';
-import '../../helpers/storage.js';
-import 'react-toastify';
-import '../../hooks/useGetIsMobile.js';
-import 'framer-motion';
-import '../../helperComponents/AnimatePresenceWrapper/AnimatePresenceWrapper.js';
-import '../../hooks/useOnOutsideClick.js';
-import '../../hooks/useHideBodyScroll.js';
-import '../SVGIcons/IconDismiss.js';
-import '../Tooltip/types.js';
-import '../Tooltip/Tooltip.js';
-import '../../hooks/useGetTooltipStyles.js';
-import '../../hooks/useGetElemSizes.js';
-import '../../hooks/useGetElemPositions.js';
-import '../../hooks/useGetTooltipPosition.js';
-import '../../hooks/useHideOnScroll.js';
-import '../Link/Link.js';
-import '../Popover/PopoverDesktop.js';
-import '../SVGIcons/IconInfo.js';
-import '../../helperComponents/IconDynamicComponent/IconDynamicComponent.js';
-import '../../helperComponents/IconDynamicComponent/constants.js';
-import '@babel/runtime/helpers/typeof';
-import '../SVGIcons/IconDismissFilled.js';
-import '../SVGIcons/IconDelete.js';
-import './DropzoneFileUpload/FilePreview.js';
-import '../Progress/Progress.js';
-import '../SVGIcons/IconArrowDownloadFilled.js';
-import '../../helpers/download-file.js';
-import '../Button/consts.js';
-import '../../hooks/useFormProps.js';
-import '../../context/types.js';
-import '../../helperComponents/ErrorMessage/ErrorMessage.js';
-
-var FileUpload = function FileUpload(props) {
-  var _props$allowedTypes = props.allowedTypes,
-    allowedTypes = _props$allowedTypes === void 0 ? 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd' : _props$allowedTypes,
-    label = props.label,
-    getFiles = props.getFiles,
-    removeFiles = props.removeFiles,
-    handleFileClick = props.handleFileClick,
-    name = props.name,
-    setFieldValue = props.setFieldValue,
-    toBase64 = props.toBase64,
-    required = props.required,
-    disabled = props.disabled,
-    buttonText = props.buttonText,
-    _props$withFilePrevie = props.withFilePreview,
-    withFilePreview = _props$withFilePrevie === void 0 ? true : _props$withFilePrevie,
-    _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? true : _props$multiple,
-    uploadedFiles = props.uploadedFiles,
-    value = props.value,
-    labelAddons = props.labelAddons,
-    onError = props.onError,
-    fileAllowedSize = props.fileAllowedSize,
-    _props$mode = props.mode,
-    mode = _props$mode === void 0 ? FileUploadMode.attach : _props$mode;
-  var files = value || uploadedFiles || [];
-  var fileInputRef = useRef(null);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray(_useState, 2),
-    isHovered = _useState2[0],
-    setHoverState = _useState2[1];
-  var onMouseEnterOrLeave = function onMouseEnterOrLeave() {
-    return setHoverState(!isHovered);
-  };
-  var onUploadClick = function onUploadClick() {
-    if (fileInputRef.current) {
-      fileInputRef.current.click();
-    }
-  };
-  var updateInForm = useCallback(function (values) {
-    if (name && setFieldValue) {
-      setFieldValue(name, values);
-    }
-  }, [name, setFieldValue]);
-  var setFiles = function setFiles(selectedFiles) {
-    var allowedFilesBySize = selectedFiles.filter(function (file) {
-      return !(fileAllowedSize && !checkIsAllowedFileSize(fileAllowedSize, file.size));
-    });
-    var allowedFilesByExtension = selectedFiles.filter(function (file) {
-      return !(allowedTypes && !checkIsAllowedTypes(allowedTypes, file.type));
-    });
-    if (allowedFilesByExtension.length !== selectedFiles.length) {
-      onError && onError(FILE_UPLOAD_ERRORS.type);
-      return;
-    }
-    if (allowedFilesBySize.length !== selectedFiles.length) {
-      onError && onError(FILE_UPLOAD_ERRORS.size);
-      return;
-    }
-    updateInForm(toBase64 ? getFormattedValues(selectedFiles) : selectedFiles);
-    if (getFiles) {
-      getFiles(selectedFiles);
-    }
-  };
-  var handleChange = useCallback(function (event) {
-    var _event$target;
-    var fileList = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.files;
-    var fileArray = multiple ? Array.from(fileList) : [fileList[0]];
-    if (fileArray) {
-      var updatedFiles = uniqueFiles(multiple ? [].concat(_toConsumableArray(fileArray), _toConsumableArray(files)) : fileArray);
-      setFiles(updatedFiles);
-    }
-    if (fileInputRef.current) {
-      fileInputRef.current.value = '';
-    }
-  }, [files, multiple]);
-  var handleFileRemove = useCallback(function (file, index) {
-    if (files) {
-      var filteredFiles = files.filter(function (_, i) {
-        return i !== index;
-      });
-      updateInForm(filteredFiles);
-      if (removeFiles) {
-        removeFiles(file);
-      }
-    }
-  }, [files, removeFiles]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "file-upload"
-  }, /*#__PURE__*/React.createElement(Label, {
-    text: label,
-    required: required,
-    disabled: disabled,
-    labelAddons: labelAddons
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "file-upload__inner"
-  }, /*#__PURE__*/React.createElement("input", {
-    name: name,
-    type: "file",
-    multiple: multiple,
-    className: "hide",
-    ref: fileInputRef,
-    accept: allowedTypes,
-    onChange: handleChange
-  }), mode === FileUploadMode.edit && /*#__PURE__*/React.createElement("div", {
-    className: "edit__icon",
-    onMouseEnter: onMouseEnterOrLeave,
-    onMouseLeave: onMouseEnterOrLeave,
-    onClick: onUploadClick
-  }, isHovered ? /*#__PURE__*/React.createElement(IconEditFilled, {
-    size: "xxsmall",
-    type: "secondary"
-  }) : /*#__PURE__*/React.createElement(IconEdit, {
-    size: "xxsmall",
-    type: "secondary"
-  })), mode === FileUploadMode.attach && /*#__PURE__*/React.createElement(Button, {
-    type: "secondary",
-    size: "medium",
-    disabled: disabled,
-    iconProps: {
-      Component: IconAttach
-    },
-    onClick: onUploadClick,
-    buttonText: buttonText
-  }), /*#__PURE__*/React.createElement(UploadItems, {
-    handleFileClick: handleFileClick,
-    onRemove: handleFileRemove,
-    files: files,
-    withFilePreview: withFilePreview
-  })));
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useRef, useState } from 'react';
+import { FileUploadMode } from './types';
+import { Button } from '../Button';
+import { Label } from '../../helperComponents';
+import { UploadItems } from './UploadItems';
+import { FILE_UPLOAD_ERRORS } from '../../consts';
+import { checkIsAllowedFileSize, getFormattedValues, checkIsAllowedTypes, uniqueFiles } from '../../utils/helpers';
+import IconEditFilled from '../SVGIcons/IconEditFilled';
+import IconEdit from '../SVGIcons/IconEdit';
+import IconAttach from '../SVGIcons/IconAttach';
+export const FileUpload = (props) => {
+    const { allowedTypes = 'application/pdf, .png, .jpg, .jpeg, image/jpeg, image/png, image/jpg, text/plain, image/*, .pdf, .doc, .docx, application/vnd', label, getFiles, removeFiles, handleFileClick, name, setFieldValue, toBase64, required, disabled, buttonText, withFilePreview = true, multiple = true, uploadedFiles, value, labelAddons, onError, fileAllowedSize, mode = FileUploadMode.attach } = props;
+    const files = value || uploadedFiles || [];
+    const fileInputRef = useRef(null);
+    const [isHovered, setHoverState] = useState(false);
+    const onMouseEnterOrLeave = () => setHoverState(!isHovered);
+    const onUploadClick = () => {
+        if (fileInputRef.current) {
+            fileInputRef.current.click();
+        }
+    };
+    const updateInForm = useCallback((values) => {
+        if (name && setFieldValue) {
+            setFieldValue(name, values);
+        }
+    }, [name, setFieldValue]);
+    const setFiles = (selectedFiles) => {
+        const allowedFilesBySize = selectedFiles.filter((file) => {
+            return !(fileAllowedSize && !checkIsAllowedFileSize(fileAllowedSize, file.size));
+        });
+        const allowedFilesByExtension = selectedFiles.filter((file) => {
+            return !(allowedTypes && !checkIsAllowedTypes(allowedTypes, file.type));
+        });
+        if (allowedFilesByExtension.length !== selectedFiles.length) {
+            onError && onError(FILE_UPLOAD_ERRORS.type);
+            return;
+        }
+        if (allowedFilesBySize.length !== selectedFiles.length) {
+            onError && onError(FILE_UPLOAD_ERRORS.size);
+            return;
+        }
+        updateInForm(toBase64 ? getFormattedValues(selectedFiles) : selectedFiles);
+        if (getFiles) {
+            getFiles(selectedFiles);
+        }
+    };
+    const handleChange = useCallback((event) => {
+        var _a;
+        const fileList = (_a = event.target) === null || _a === void 0 ? void 0 : _a.files;
+        const fileArray = multiple ? Array.from(fileList) : [fileList[0]];
+        if (fileArray) {
+            const updatedFiles = uniqueFiles(multiple ? [...fileArray, ...files] : fileArray);
+            setFiles(updatedFiles);
+        }
+        if (fileInputRef.current) {
+            fileInputRef.current.value = '';
+        }
+    }, [files, multiple]);
+    const handleFileRemove = useCallback((file, index) => {
+        if (files) {
+            const filteredFiles = files.filter((_, i) => i !== index);
+            updateInForm(filteredFiles);
+            if (removeFiles) {
+                removeFiles(file);
+            }
+        }
+    }, [files, removeFiles]);
+    return (_jsxs("div", { className: "file-upload", children: [_jsx(Label, { text: label, required: required, disabled: disabled, labelAddons: labelAddons }), _jsxs("div", { className: "file-upload__inner", children: [_jsx("input", { name: name, type: "file", multiple: multiple, className: "hide", ref: fileInputRef, accept: allowedTypes, onChange: handleChange }), mode === FileUploadMode.edit && (_jsx("div", { className: "edit__icon", onMouseEnter: onMouseEnterOrLeave, onMouseLeave: onMouseEnterOrLeave, onClick: onUploadClick, children: isHovered ? (_jsx(IconEditFilled, { size: "xxsmall", type: "secondary" })) : (_jsx(IconEdit, { size: "xxsmall", type: "secondary" })) })), mode === FileUploadMode.attach && (_jsx(Button, { type: "secondary", size: "medium", disabled: disabled, iconProps: { Component: IconAttach }, onClick: onUploadClick, buttonText: buttonText })), _jsx(UploadItems, { handleFileClick: handleFileClick, onRemove: handleFileRemove, files: files, withFilePreview: withFilePreview })] })] }));
 };
-
-export { FileUpload };