@itcase/forms 1.0.66 → 1.0.68

package/dist/itcase-forms.esm.js

@@ -16,9 +16,9 @@ import { Choice } from '@itcase/ui/components/Choice';
 import { Code } from '@itcase/ui/components/Code';
 import { DatePickerInput } from '@itcase/ui/components/DatePicker';
 import axios from 'axios';
-import { useDropzone } from 'react-dropzone';
 import { fromEvent } from 'file-selector';
 import castArray from 'lodash/castArray';
+import { useDropzone, ErrorCode } from 'react-dropzone';
 import { createFileFromDataURL } from '@itcase/common';
 import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
@@ -882,160 +882,106 @@ DatePickerField.propTypes = {
   onChange: PropTypes.func
 };
 
-async function getFileByURL(url) {
-  try {
-    const response = await axios({
-      url,
-      responseType: 'blob'
-    });
-    const blobObject = response.data;
-    const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
-    // Remove double quotes
-    let filename = dirtyFilename?.substring(1).slice(0, -1);
-    if (!filename) {
-      const typeParts = blobObject.type.split('/');
-      const fileType = typeParts[typeParts.length - 1];
-      filename = `${new Date().getTime()}.${fileType}`;
-    }
-    return new File([blobObject], filename, {
-      type: blobObject.type
-    });
-  } catch (error) {
-    console.log('error: ', error);
-    return null;
-  }
-}
-async function convertToFiles(inputValue, isPreviews) {
-  const newFiles = [];
-  for await (const value of castArray(inputValue)) {
-    let newFile = null;
+/* globals File, FileReader, URL, console */
 
-    // Download image by url and save as File instance
-    const isURL = typeof value === 'string' && value.includes('/');
-    if (value.image || isURL) {
-      newFile = await getFileByURL(value.image || value);
-      if (newFile) {
-        setFileDataURL(newFile);
-      }
-    }
-
-    // Convert dataURL to File instance
-    if (value.dataURL) {
-      newFile = createFileFromDataURL(value.name || value.path, value.dataURL);
-      newFile.dataURL = value.dataURL;
-    }
-
-    // Save new File to state
-    if (newFile) {
-      newFile.id = value.id;
-      if (isPreviews) {
-        newFile.preview = URL.createObjectURL(newFile);
-      }
-      newFiles.push(newFile);
-    }
-
-    // else if (value) {
-    //   newFiles.push({
-    //     name: value,
-    //     error: 'File is unavailable',
-    //   })
-    // }
-  }
-  return newFiles;
-}
-function setFileDataURL(file, resolve) {
-  resolve = resolve || (() => {});
-  // Init reader and save his file
-  const reader = new FileReader();
-  reader._readedFile = file;
-
-  // Set handlers
-  reader.onabort = () => resolve();
-  reader.onerror = () => resolve();
-  reader.onload = event => {
-    event.target._readedFile.dataURL = reader.result;
-    resolve();
-  };
-  // Run reader
-  if (file instanceof File) {
-    reader.readAsDataURL(file);
-  } else {
-    resolve();
-  }
-}
 const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props) {
   const {
-    inputName,
-    size,
+    isPreviews,
     className,
+    dropzoneProps = {},
+    errorMessageTextColor,
+    errorMessageTextSize,
+    errorMessageTextWeight,
     fileErrorText,
-    hintTitleTextSize,
-    removeThumbTextSize,
-    removeThumbTextColor,
-    removeThumbTextWeight,
-    thumbNameTextSize,
-    thumbNameTextColor,
-    removeThumbTextHoverColor,
-    thumbNameTextWrap,
-    thumbNameTextWeight,
-    hintTitleTextColor,
-    hintTitleTextWrap,
-    thumbColumn,
-    hintTitleTextWeight,
-    hintDescriptionTextSize,
+    hintDescription,
     hintDescriptionTextColor,
-    hintDescriptionTextWrap,
+    hintDescriptionTextSize,
     hintDescriptionTextWeight,
-    errorMessageTextSize,
-    errorMessageTextWeight,
-    errorMessageTextColor,
+    hintDescriptionTextWrap,
+    hintTitle,
+    hintTitleTextColor,
+    hintTitleTextSize,
+    hintTitleTextWeight,
+    hintTitleTextWrap,
+    inputName,
     inputValue,
     maxFiles,
     maxSize,
     removeThumbText,
-    hintTitle,
-    hintDescription,
+    removeThumbTextColor,
+    removeThumbTextHoverColor,
+    removeThumbTextSize,
+    removeThumbTextWeight,
     showFilename,
-    isPreviews,
-    loadingText,
-    dropzoneProps = {},
+    size,
+    thumbColumn,
+    thumbNameTextColor,
+    thumbNameTextSize,
+    thumbNameTextWeight,
+    thumbNameTextWrap,
     onAddFiles,
     onDeleteFile
   } = props;
-  const [fileError, setFileError] = useState('');
-  const [fileIsLoading, setFileIsLoading] = useState(false);
-  // State with instances of "File" type
-  const [files, setFiles] = useState(inputValue ? castArray(inputValue) : []);
 
-  // Save to mobx state
+  // TODO: delete react-final-form things out of here?
   const {
     change
   } = useForm();
+  const [fileError, setFileError] = useState('');
+  const [fileIsLoading, setFileIsLoading] = useState(false);
+  const filesList = useMemo(() => inputValue ? castArray(inputValue) : [], [inputValue]);
   const changeFormState = useCallback(newFiles => {
     // If max files in dropzone is 1 - return file as it self, else as array of files
     // ps: for old projects compatibility
     const toSave = dropzoneProps.maxFiles == 1 ? newFiles[0] : newFiles;
     change(inputName, toSave);
     return toSave;
-  }, [dropzoneProps, change]);
+  },
+  // If "inputName" will be changes, then it should be a different field
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [dropzoneProps, change]);
+
+  //
+  const convertFiledValueAndSaveAsFiles = useCallback(async newInputValue => {
+    setFileIsLoading(true);
+    const newFiles = await convertToFiles(newInputValue, isPreviews);
+    changeFormState(newFiles);
+    setFileIsLoading(false);
+    return newFiles;
+  }, [isPreviews, changeFormState]);
+
+  // Delete file from dropzone
+  const removeFile = useCallback((event, index) => {
+    event.stopPropagation();
+    event.preventDefault();
+    const newFiles = [...filesList];
+    newFiles.splice(index, 1);
+    if (onDeleteFile) {
+      onDeleteFile(filesList[index], inputName);
+    }
+    changeFormState(newFiles);
+  },
+  // If "inputName" will be changes, then it should be a different field
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  [filesList, changeFormState, onDeleteFile]);
 
   // Create dropzone options
   const {
-    getRootProps,
-    getInputProps
+    getInputProps,
+    getRootProps
   } = useDropzone({
+    maxFiles: maxFiles || 5,
     maxSize: maxSize || 10485760,
     // 10mb
-    maxFiles: maxFiles || 5,
     // accept: { 'image/*': [] },
     ...dropzoneProps,
     getFilesFromEvent: async event => {
       const result = await fromEvent(event);
       const newFiles = result.filter(item => item instanceof File);
       // Add exists and new files to accepted(or rejected)
-      return [...files, ...newFiles];
+      return [...filesList, ...newFiles];
     },
-    onDropAccepted: (acceptedFiles, event) => {
+    onDropAccepted: acceptedFiles => {
       // If dropped files has accepted and we need a previews
       if (isPreviews) {
         // Add preview to every file
@@ -1046,7 +992,7 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
         });
       }
       // Save to form data (including empty when files are not valid)
-      setFiles(acceptedFiles);
+      const filesToSave = changeFormState(acceptedFiles);
       setFileError('');
 
       // Save DataURL for all files
@@ -1055,65 +1001,38 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
       });
       // Save files to form values
       Promise.all(readerPromisesList).then(() => {
-        const filesToSave = changeFormState(acceptedFiles);
         if (onAddFiles) {
           onAddFiles(filesToSave, inputName);
         }
       });
     },
-    onDropRejected: (rejectedFiles, event) => {
+    onDropRejected: rejectedFiles => {
       // If dropped files has rejected
       if (rejectedFiles.length) {
-        const firstFileError = rejectedFiles[0].errors[0]?.message;
+        let fileErrorMessage = 'Ошибка при добавлении файла';
+        const firstFileErrorItem = rejectedFiles[0].errors[0];
+        if (firstFileErrorItem) {
+          if (firstFileErrorItem.code === ErrorCode.TooManyFiles) {
+            fileErrorMessage = `Максимальное количество файлов: ${maxFiles}`;
+          } else {
+            fileErrorMessage = firstFileErrorItem.message;
+          }
+        }
         // Show error
-        setFileError(firstFileError || 'Error on adding file');
+        setFileError(fileErrorMessage);
       } else {
         // Else clean error
         setFileError('');
       }
     }
   });
-
-  // Delete file from dropzone
-  const removeFile = useCallback((event, index) => {
-    event.stopPropagation();
-    event.preventDefault();
-    const newFiles = [...files];
-    newFiles.splice(index, 1);
-    if (onDeleteFile) {
-      onDeleteFile(files[index], inputName);
-    }
-    changeFormState(newFiles);
-  }, [files, changeFormState, onDeleteFile]);
-
-  //
-  const convertFiledValueAndSaveAsFiles = useCallback(async newInputValue => {
-    setFileIsLoading(true);
-    const newFiles = await convertToFiles(newInputValue, isPreviews);
-    setFileIsLoading(false);
-    setFiles(newFiles);
-    return newFiles;
-  }, [isPreviews]);
   useEffect(() => {
     // First time convert value to Files and save to local and form state
-    convertFiledValueAndSaveAsFiles(inputValue).then(newFiles => changeFormState(newFiles));
-  }, []); // eslint-disable-line
-
-  useEffect(() => {
-    // Everytime convert value to Files and save to local state
-    if (!inputValue) {
-      setFiles([]);
-    } else {
-      convertFiledValueAndSaveAsFiles(inputValue);
-    }
-    // only "inputValue"
-  }, [inputValue]); // eslint-disable-line
-
-  useEffect(() => {
+    convertFiledValueAndSaveAsFiles(inputValue);
     // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-    return () => files.forEach(file => URL.revokeObjectURL(file?.preview));
-  }, []); // eslint-disable-line
-
+    return () => filesList.forEach(file => URL.revokeObjectURL(file?.preview));
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
   const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -1168,9 +1087,9 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
     name: inputName
   })), /*#__PURE__*/React.createElement("div", {
     className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
-  }, files.map((file, i) => /*#__PURE__*/React.createElement("aside", {
+  }, filesList.map((file, index) => /*#__PURE__*/React.createElement("aside", {
     className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
-    key: `${file.id || `${file.name}_${i}` || 'i' + i}`
+    key: file.id || `${file.name}_${index}`
   }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__thumb-image"
   }, /*#__PURE__*/React.createElement("img", {
@@ -1183,140 +1102,213 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
   })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
     size: thumbNameTextSize,
     textColor: thumbNameTextColor,
-    textWrap: thumbNameTextWrap,
-    textWeight: thumbNameTextWeight
+    textWeight: thumbNameTextWeight,
+    textWrap: thumbNameTextWrap
   }, fileErrorText || file.error)), showFilename && /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__thumb-name"
   }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__thumb-name-inner",
     size: thumbNameTextSize,
     textColor: thumbNameTextColor,
-    textWrap: thumbNameTextWrap,
     textWeight: thumbNameTextWeight,
-    className: "form-dropzone__thumb-name-inner"
+    textWrap: thumbNameTextWrap
   }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__thumb-loader"
   }, /*#__PURE__*/React.createElement(Loader, {
-    fill: "surfacePrimary",
+    width: "fill",
     height: "fill",
+    fill: "surfacePrimary",
     itemFill: "surfaceItemAccent",
-    set: "simple",
-    width: "fill"
+    set: "simple"
   })), /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__thumb-remove",
-    onClick: event => removeFile(event, i)
+    onClick: event => removeFile(event, index)
   }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__thumb-remove-text",
     size: removeThumbTextSize,
     textColor: removeThumbTextColor,
-    textWeight: removeThumbTextWeight,
     textColorHover: removeThumbTextHoverColor,
-    className: "form-dropzone__thumb-remove-text"
-  }, removeThumbText || 'Remove')))), !files.length ? /*#__PURE__*/React.createElement("div", {
+    textWeight: removeThumbTextWeight
+  }, removeThumbText || 'Удалить')))), !filesList.length ? /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__hint"
   }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-title",
     size: hintTitleTextSize,
     textColor: hintTitleTextColor,
-    textWrap: hintTitleTextWrap,
     textWeight: hintTitleTextWeight,
-    className: "form-dropzone__hint-title"
+    textWrap: hintTitleTextWrap
   }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
-    textWrap: hintDescriptionTextWrap,
     textWeight: hintDescriptionTextWeight,
-    className: "form-dropzone__hint-text"
+    textWrap: hintDescriptionTextWrap
   }, hintDescription)) : /*#__PURE__*/React.createElement("div", {
     className: "form-dropzone__hint form-dropzone__hint_type_add-more"
   }, /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-title",
     size: hintTitleTextSize,
     textColor: hintTitleTextColor,
-    textWrap: hintTitleTextWrap,
     textWeight: hintTitleTextWeight,
-    className: "form-dropzone__hint-title"
+    textWrap: hintTitleTextWrap
   }, hintTitle || 'Select a file or drag in form'), /*#__PURE__*/React.createElement(Text, {
+    className: "form-dropzone__hint-text",
     size: hintDescriptionTextSize,
     textColor: hintDescriptionTextColor,
-    textWrap: hintDescriptionTextWrap,
     textWeight: hintDescriptionTextWeight,
-    className: "form-dropzone__hint-text"
+    textWrap: hintDescriptionTextWrap
   }, hintDescription)))), fileError && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message"
   }, /*#__PURE__*/React.createElement(Text, {
     className: "form-field__message-item form-field__message-item_type_message",
     size: errorMessageTextSize,
-    textWeight: errorMessageTextWeight,
-    textColor: errorMessageTextColor
+    textColor: errorMessageTextColor,
+    textWeight: errorMessageTextWeight
   }, fileError)));
 });
 FileInputDropzone.propTypes = {
+  isPreviews: PropTypes.bool,
   dropzoneProps: PropTypes.object,
   hintDescription: PropTypes.string,
   hintTitle: PropTypes.string,
   inputName: PropTypes.string,
   inputValue: PropTypes.any,
-  isPreviews: PropTypes.bool,
-  showFilename: PropTypes.bool,
-  loadingText: PropTypes.string,
   metaError: PropTypes.string,
   metaTouched: PropTypes.bool,
   removeThumbText: PropTypes.string,
+  showFilename: PropTypes.bool,
   onAddFiles: PropTypes.func,
   onDeleteFile: PropTypes.func
 };
+async function getFileByURL(url) {
+  try {
+    const response = await axios({
+      url: url,
+      responseType: 'blob'
+    });
+    const blobObject = response.data;
+    const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
+    // Remove double quotes
+    let filename = dirtyFilename?.substring(1).slice(0, -1);
+    if (!filename) {
+      const typeParts = blobObject.type.split('/');
+      const fileType = typeParts[typeParts.length - 1];
+      filename = `${new Date().getTime()}.${fileType}`;
+    }
+    return new File([blobObject], filename, {
+      type: blobObject.type
+    });
+  } catch (error) {
+    console.log('error: ', error);
+    return null;
+  }
+}
+async function convertToFiles(inputValue, isPreviews) {
+  const newFiles = [];
+  for (const value of castArray(inputValue)) {
+    let newFile = null;
+
+    // Download image by url and save as File instance
+    const isURL = typeof value === 'string' && value.includes('/');
+    if (value.image || isURL) {
+      newFile = await getFileByURL(value.image || value);
+      if (newFile) {
+        setFileDataURL(newFile);
+      }
+    }
+
+    // Convert dataURL to File instance
+    if (value.dataURL) {
+      newFile = createFileFromDataURL(value.name || value.path, value.dataURL);
+      newFile.dataURL = value.dataURL;
+    }
+
+    // Save new File to state
+    if (newFile) {
+      newFile.id = value.id;
+      if (isPreviews) {
+        newFile.preview = URL.createObjectURL(newFile);
+      }
+      newFiles.push(newFile);
+    }
+  }
+  return newFiles;
+}
+function setFileDataURL(file, resolve) {
+  resolve = resolve || (() => {});
+  // Init reader and save his file
+  const reader = new FileReader();
+  reader._readedFile = file;
+
+  // Set handlers
+  reader.onabort = () => resolve();
+  reader.onerror = () => resolve();
+  reader.onload = event => {
+    event.target._readedFile.dataURL = reader.result;
+    resolve();
+  };
+  // Run reader
+  if (file instanceof File) {
+    reader.readAsDataURL(file);
+  } else {
+    resolve();
+  }
+}
 
 const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
   const {
-    name,
-    shape,
-    size,
+    width,
     borderWidth,
+    isPreviews,
+    isRequired,
     borderColorHover,
     borderType,
-    label,
-    thumbBorderWidth,
-    thumbBorderColor,
-    thumbBorderColorHover,
-    thumbBorderType,
-    removeThumbTextHoverColor,
-    labelTextColor,
-    fill,
-    fillHover,
     className,
-    removeThumbText,
-    thumbNameTextSize,
-    thumbNameTextColor,
-    thumbNameTextWrap,
-    thumbNameTextWeight,
-    removeThumbTextSize,
-    removeThumbTextColor,
-    removeThumbTextWeight,
-    hintTitle,
-    errorMessageTextSize,
+    classNameGroupItem,
+    dropzoneProps,
+    errorMessageTextColor = 'errorTextPrimary',
+    errorMessageTextSize = 's',
     errorMessageTextWeight,
-    errorMessageTextColor,
     fieldProps,
-    hintTitleTextSize,
-    hintTitleTextColor,
-    hintTitleTextWrap,
-    hintTitleTextWeight,
-    hintDescriptionTextSize,
+    fileErrorText,
+    fill,
+    fillHover,
+    hintDescription,
     hintDescriptionTextColor,
-    hintDescriptionTextWrap,
+    hintDescriptionTextSize,
     hintDescriptionTextWeight,
-    showMessage,
-    thumbDirection,
-    hintDescription,
-    showFilename,
-    fileErrorText,
-    dropzoneProps,
+    hintDescriptionTextWrap,
+    hintTitle,
+    hintTitleTextColor,
+    hintTitleTextSize,
+    hintTitleTextWeight,
+    hintTitleTextWrap,
+    label,
+    labelTextColor,
     maxFiles,
     maxSize,
-    thumbColumn,
-    isRequired,
-    isPreviews,
+    name,
+    removeThumbText,
+    removeThumbTextColor,
+    removeThumbTextHoverColor,
+    removeThumbTextSize,
+    removeThumbTextWeight,
+    shape,
+    showFilename,
+    showMessage,
+    size,
+    thumbBorderColor,
+    thumbBorderColorHover,
+    thumbBorderType,
+    thumbBorderWidth,
+    thumbColumn = 1,
+    thumbDirection = 'vertical',
+    thumbNameTextColor,
+    thumbNameTextSize,
+    thumbNameTextWeight,
+    thumbNameTextWrap,
     onAddFiles,
-    onDeleteFile,
-    classNameGroupItem,
-    width
+    onDeleteFile
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
     name: name
@@ -1342,8 +1334,8 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       meta: meta
     });
     const updatedInputProps = useValidationAppearanceInputProps({
-      validationStateKey: isErrorState ? errorKey : 'success',
-      inputProps: props
+      inputProps: props,
+      validationStateKey: isErrorState ? errorKey : 'success'
     });
 
     /** TODO:
@@ -1351,82 +1343,77 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
      */
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_dropzone', 'form__item_type_dropzone', classNameGroupItem),
+      width: width,
+      labelTextColor: labelTextColor,
+      errorKey: errorKey,
+      errorMessage: errorMessage,
       fieldClassName: "form-dropzone",
       inputName: input.name,
       inputValue: input.value,
-      isRequired: isRequired,
       label: label,
-      labelTextColor: labelTextColor,
       metaActive: meta.active,
       metaError: meta.error,
       metaTouched: meta.touched,
       showMessage: showMessage,
-      width: width,
       isErrorState: isErrorState,
-      isValidState: isValidState,
-      errorKey: errorKey,
-      errorMessage: errorMessage
+      isRequired: isRequired,
+      isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
-      dropzoneProps: dropzoneProps,
-      hintDescription: hintDescription,
-      hintTitle: hintTitle,
+      className: className,
+      fill: fill,
+      fillHover: fillHover,
       borderWidth: borderWidth,
       borderColor: updatedInputProps.borderColor,
       borderColorHover: borderColorHover,
       borderType: borderType,
-      thumbBorderWidth: thumbBorderWidth,
-      thumbBorderColor: thumbBorderColor,
-      thumbBorderColorHover: thumbBorderColorHover,
-      thumbBorderType: thumbBorderType,
+      dropzoneProps: dropzoneProps,
+      errorMessageTextColor: errorMessageTextColor,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
       fileErrorText: fileErrorText,
-      fill: fill,
-      size: size,
+      hintDescription: hintDescription,
+      hintDescriptionTextColor: hintDescriptionTextColor,
+      hintDescriptionTextSize: hintDescriptionTextSize,
+      hintDescriptionTextWeight: hintDescriptionTextWeight,
+      hintDescriptionTextWrap: hintDescriptionTextWrap,
+      hintTitle: hintTitle,
+      hintTitleTextColor: hintTitleTextColor,
+      hintTitleTextSize: hintTitleTextSize,
+      hintTitleTextWeight: hintTitleTextWeight,
+      hintTitleTextWrap: hintTitleTextWrap,
+      inputName: input.name,
+      inputValue: input.value,
       maxFiles: maxFiles,
       maxSize: maxSize,
+      metaError: meta.error,
+      metaTouched: meta.touched,
+      removeThumbText: removeThumbText,
+      removeThumbTextColor: removeThumbTextColor,
       removeThumbTextHoverColor: removeThumbTextHoverColor,
-      fillHover: fillHover,
-      className: className,
+      removeThumbTextSize: removeThumbTextSize,
+      removeThumbTextWeight: removeThumbTextWeight,
+      shape: shape,
+      showFilename: showFilename,
+      size: size,
+      thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
+      thumbBorderType: thumbBorderType,
+      thumbBorderWidth: thumbBorderWidth,
       thumbColumn: thumbColumn,
       thumbDirection: thumbDirection,
-      inputName: input.name,
-      inputValue: input.value,
-      thumbNameTextSize: thumbNameTextSize,
       thumbNameTextColor: thumbNameTextColor,
-      thumbNameTextWrap: thumbNameTextWrap,
+      thumbNameTextSize: thumbNameTextSize,
       thumbNameTextWeight: thumbNameTextWeight,
-      hintTitleTextSize: hintTitleTextSize,
-      hintTitleTextColor: hintTitleTextColor,
-      hintTitleTextWrap: hintTitleTextWrap,
-      hintTitleTextWeight: hintTitleTextWeight,
-      removeThumbTextSize: removeThumbTextSize,
-      removeThumbTextColor: removeThumbTextColor,
-      removeThumbTextWeight: removeThumbTextWeight,
-      hintDescriptionTextSize: hintDescriptionTextSize,
-      hintDescriptionTextColor: hintDescriptionTextColor,
-      hintDescriptionTextWrap: hintDescriptionTextWrap,
-      hintDescriptionTextWeight: hintDescriptionTextWeight,
-      errorMessageTextSize: errorMessageTextSize,
-      errorMessageWeight: errorMessageTextWeight,
-      errorMessageTextColor: errorMessageTextColor,
+      thumbNameTextWrap: thumbNameTextWrap,
       isPreviews: isPreviews,
-      shape: shape,
-      showFilename: showFilename,
-      metaError: meta.error,
-      metaTouched: meta.touched,
-      removeThumbText: removeThumbText,
       onAddFiles: onAddFiles,
       onDeleteFile: onDeleteFile
     }));
   });
 });
-FileInput.defaultProps = {
-  errorMessageTextSize: 's',
-  errorMessageTextColor: 'errorTextPrimary',
-  thumbColumn: 1,
-  thumbDirection: 'vertical'
-};
 FileInput.propTypes = {
-  name: PropTypes.string.isRequired,
+  isPreviews: PropTypes.bool,
+  isRequired: PropTypes.bool,
   className: PropTypes.string,
   classNameGroupItem: PropTypes.string,
   classNameInput: PropTypes.string,
@@ -1435,11 +1422,10 @@ FileInput.propTypes = {
   hintDescription: PropTypes.string,
   hintTitle: PropTypes.string,
   inputClass: PropTypes.string,
-  isPreviews: PropTypes.bool,
-  isRequired: PropTypes.bool,
-  showFilename: PropTypes.bool,
   label: PropTypes.any,
+  name: PropTypes.string.isRequired,
   removeThumbText: PropTypes.string,
+  showFilename: PropTypes.bool,
   onAddFiles: PropTypes.func,
   onDeleteFile: PropTypes.func
 };
@@ -2852,7 +2838,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
           values: true
         },
         onChange: onChangeFormValues
-      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(React.Fragment, null, renderFieldsWrapper( /*#__PURE__*/React.createElement(Group$1, {
+      }), Boolean(Object.keys(config).length) && /*#__PURE__*/React.createElement(React.Fragment, null, renderFieldsWrapper(/*#__PURE__*/React.createElement(Group$1, {
         className: "form__wrapper",
         direction: "vertical",
         gap: fieldsGap || groupGap,