@itcase/forms 1.0.69 → 1.0.71

package/dist/css/form/Field/FileInput/FileInput.css

@@ -6,27 +6,26 @@
     z-index: 1;
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
-    &-wrapper {
-      display: grid;
-      gap: 16px;
-      grid-template-columns: repeat(3, minmax(0, 1fr));
-    }
     &_size {
       @each $size in normal, compact {
         &_$(size) {
           ^^&-wrapper {
-            padding: var(--fileinput-size-$(size)-padding)
+            padding: var(--fileinput-size-$(size)-padding);
           }
         }
       }
     }
+    &-wrapper {
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
+    }
     ^&__hint {
       width: 100%;
       min-height: 120px;
       display: flex;
       flex-flow: column nowrap;
-      justify-content: center;
-      align-content: center;
+      place-content: center center;
       align-items: center;
       cursor: pointer;
       &-title {
@@ -70,25 +69,24 @@
       }
     }
     &-loader {
-      position: absolute;
-      left: 0;
-      top: 0;
       width: 100%;
       height: 100%;
+      position: absolute;
       display: flex;
+      left: 0;
+      top: 0;
     }
     &-image {
-      grid-column-start: 1;
-      grid-row-start: span 2;
-      display: flex;
       position: relative;
       overflow: hidden;
+      display: flex;
       justify-content: center;
       align-items: center;
+      grid-column-start: 1;
+      grid-row-start: span 2;
       &-inner {
-        max-width: 100%;
         height: auto;
-
+        max-width: 100%;
       }
     }
     &-name {

package/dist/itcase-forms.cjs.js

@@ -956,12 +956,21 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
   [dropzoneProps, change]);
 
   //
-  const convertFiledValueAndSaveAsFiles = React.useCallback(async newInputValue => {
+  const convertFiledValueAndSaveAsFiles = React.useCallback(async currentFilesList => {
     setFileIsLoading(true);
-    const newFiles = await convertToFiles(newInputValue, isPreviews);
+    const newFiles = [];
+    for (const fileItem of currentFilesList) {
+      if (typeof fileItem === 'string') {
+        const newFile = await convertToFile(fileItem, isPreviews);
+        if (newFile) {
+          newFiles.push(newFile);
+        }
+      } else {
+        newFiles.push(fileItem);
+      }
+    }
     changeFormState(newFiles);
     setFileIsLoading(false);
-    return newFiles;
   }, [isPreviews, changeFormState]);
 
   // Delete file from dropzone
@@ -1041,12 +1050,23 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     }
   });
   React.useEffect(() => {
-    // First time convert value to Files and save to local and form state
-    convertFiledValueAndSaveAsFiles(inputValue);
+    const currentFilesList = castArray__default.default(inputValue);
+    const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
+    if (isNeedToConvert) {
+      // First time convert value to Files and save to local and form state
+      convertFiledValueAndSaveAsFiles(currentFilesList);
+    }
+
     // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-    return () => filesList.forEach(file => URL.revokeObjectURL(file?.preview));
+    return () => {
+      filesList.forEach(file => {
+        if (file?.preview) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [inputValue]);
   const fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -1197,8 +1217,8 @@ FileInputDropzone.propTypes = {
 async function getFileByURL(url) {
   try {
     const response = await axios__default.default({
-      url: url,
-      responseType: 'blob'
+      responseType: 'blob',
+      url: url
     });
     const blobObject = response.data;
     const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
@@ -1218,36 +1238,32 @@ async function getFileByURL(url) {
     return null;
   }
 }
-async function convertToFiles(inputValue, isPreviews) {
-  const newFiles = [];
-  for (const value of castArray__default.default(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);
-      }
-    }
+async function convertToFile(inputValue, isPreviews) {
+  let newFile = null;
 
-    // Convert dataURL to File instance
-    if (value.dataURL) {
-      newFile = common.createFileFromDataURL(value.name || value.path, value.dataURL);
-      newFile.dataURL = value.dataURL;
+  // Download image by url and save as File instance
+  const isURL = typeof inputValue === 'string' && inputValue.includes('/');
+  if (inputValue.image || isURL) {
+    newFile = await getFileByURL(inputValue.image || inputValue);
+    if (newFile) {
+      setFileDataURL(newFile);
     }
+  }
 
-    // Save new File to state
-    if (newFile) {
-      newFile.id = value.id;
-      if (isPreviews) {
-        newFile.preview = URL.createObjectURL(newFile);
-      }
-      newFiles.push(newFile);
+  // Convert dataURL to File instance
+  if (inputValue.dataURL) {
+    newFile = common.createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
+    newFile.dataURL = inputValue.dataURL;
+  }
+
+  // Save new File to state
+  if (newFile) {
+    newFile.id = inputValue.id;
+    if (isPreviews) {
+      newFile.preview = URL.createObjectURL(newFile);
     }
   }
-  return newFiles;
+  return newFile;
 }
 function setFileDataURL(file, resolve) {
   resolve = resolve || (() => {});

package/dist/itcase-forms.esm.js

@@ -942,12 +942,21 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
   [dropzoneProps, change]);
 
   //
-  const convertFiledValueAndSaveAsFiles = useCallback(async newInputValue => {
+  const convertFiledValueAndSaveAsFiles = useCallback(async currentFilesList => {
     setFileIsLoading(true);
-    const newFiles = await convertToFiles(newInputValue, isPreviews);
+    const newFiles = [];
+    for (const fileItem of currentFilesList) {
+      if (typeof fileItem === 'string') {
+        const newFile = await convertToFile(fileItem, isPreviews);
+        if (newFile) {
+          newFiles.push(newFile);
+        }
+      } else {
+        newFiles.push(fileItem);
+      }
+    }
     changeFormState(newFiles);
     setFileIsLoading(false);
-    return newFiles;
   }, [isPreviews, changeFormState]);
 
   // Delete file from dropzone
@@ -1027,12 +1036,23 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
     }
   });
   useEffect(() => {
-    // First time convert value to Files and save to local and form state
-    convertFiledValueAndSaveAsFiles(inputValue);
+    const currentFilesList = castArray(inputValue);
+    const isNeedToConvert = currentFilesList.some(fileItem => typeof fileItem === 'string');
+    if (isNeedToConvert) {
+      // First time convert value to Files and save to local and form state
+      convertFiledValueAndSaveAsFiles(currentFilesList);
+    }
+
     // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
-    return () => filesList.forEach(file => URL.revokeObjectURL(file?.preview));
+    return () => {
+      filesList.forEach(file => {
+        if (file?.preview) {
+          URL.revokeObjectURL(file.preview);
+        }
+      });
+    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  }, [inputValue]);
   const fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -1183,8 +1203,8 @@ FileInputDropzone.propTypes = {
 async function getFileByURL(url) {
   try {
     const response = await axios({
-      url: url,
-      responseType: 'blob'
+      responseType: 'blob',
+      url: url
     });
     const blobObject = response.data;
     const dirtyFilename = response.headers['content-disposition']?.split('filename=')[1];
@@ -1204,36 +1224,32 @@ async function getFileByURL(url) {
     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);
-      }
-    }
+async function convertToFile(inputValue, isPreviews) {
+  let newFile = null;
 
-    // Convert dataURL to File instance
-    if (value.dataURL) {
-      newFile = createFileFromDataURL(value.name || value.path, value.dataURL);
-      newFile.dataURL = value.dataURL;
+  // Download image by url and save as File instance
+  const isURL = typeof inputValue === 'string' && inputValue.includes('/');
+  if (inputValue.image || isURL) {
+    newFile = await getFileByURL(inputValue.image || inputValue);
+    if (newFile) {
+      setFileDataURL(newFile);
     }
+  }
 
-    // Save new File to state
-    if (newFile) {
-      newFile.id = value.id;
-      if (isPreviews) {
-        newFile.preview = URL.createObjectURL(newFile);
-      }
-      newFiles.push(newFile);
+  // Convert dataURL to File instance
+  if (inputValue.dataURL) {
+    newFile = createFileFromDataURL(inputValue.name || inputValue.path, inputValue.dataURL);
+    newFile.dataURL = inputValue.dataURL;
+  }
+
+  // Save new File to state
+  if (newFile) {
+    newFile.id = inputValue.id;
+    if (isPreviews) {
+      newFile.preview = URL.createObjectURL(newFile);
     }
   }
-  return newFiles;
+  return newFile;
 }
 function setFileDataURL(file, resolve) {
   resolve = resolve || (() => {});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.69",
+  "version": "1.0.71",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",
@@ -30,65 +30,65 @@
     "registry": "https://registry.npmjs.org/"
   },
   "dependencies": {
-    "@itcase/common": "^1.2.10",
-    "@itcase/ui": "^1.2.10",
+    "@itcase/common": "^1.2.15",
+    "@itcase/ui": "^1.2.21",
     "axios": "^1.7.7",
     "clsx": "^2.1.1",
     "final-form": "^4.20.10",
     "final-form-focus": "^1.1.2",
-    "libphonenumber-js": "^1.11.8",
+    "libphonenumber-js": "^1.11.12",
     "lodash": "^4.17.21",
     "luxon": "^3.5.0",
-    "postcss": "^8.4.45",
+    "postcss": "^8.4.47",
     "prop-types": "^15.8.1",
     "react": "^18.3.1",
     "react-date-range": "^2.0.1",
-    "react-datepicker": "^7.3.0",
+    "react-datepicker": "^7.5.0",
     "react-dom": "^18.3.1",
-    "react-dropzone": "^14.2.3",
+    "react-dropzone": "^14.2.10",
     "react-final-form": "^6.5.9",
     "react-imask": "^7.6.1",
-    "react-select": "^5.8.0"
+    "react-select": "^5.8.1"
   },
   "devDependencies": {
-    "@itcase/lint": "^1.0.13",
-    "@babel/core": "^7.25.2",
-    "@babel/eslint-parser": "^7.25.1",
-    "@babel/preset-env": "^7.25.4",
-    "@babel/preset-react": "^7.24.7",
+    "@itcase/lint": "^1.0.14",
+    "@babel/core": "^7.25.9",
+    "@babel/eslint-parser": "^7.25.9",
+    "@babel/preset-env": "^7.25.9",
+    "@babel/preset-react": "^7.25.9",
     "@commitlint/cli": "^19.5.0",
     "@commitlint/config-conventional": "^19.5.0",
-    "@eslint/compat": "^1.1.1",
+    "@eslint/compat": "^1.2.1",
     "@eslint/eslintrc": "^3.1.0",
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@rollup/plugin-babel": "^6.0.4",
-    "@rollup/plugin-commonjs": "^26.0.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-json": "^6.1.0",
-    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-node-resolve": "^15.3.0",
     "@rollup/plugin-terser": "^0.4.4",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/release-notes-generator": "14.0.1",
     "@types/react": "^18",
-    "@types/react-dom": "^18.3.0",
+    "@types/react-dom": "^18.3.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
     "conventional-changelog-conventionalcommits": "^8.0.0",
-    "eslint": "9.10.0",
+    "eslint": "9.13.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-config-standard": "17.1.0",
     "eslint-plugin-babel": "5.3.1",
-    "eslint-plugin-import": "2.30.0",
-    "eslint-plugin-n": "17.10.2",
+    "eslint-plugin-import": "2.31.0",
+    "eslint-plugin-n": "17.11.1",
     "eslint-plugin-node": "11.1.0",
     "eslint-plugin-prettier": "5.2.1",
     "eslint-plugin-promise": "7.1.0",
-    "eslint-plugin-react": "7.36.1",
-    "eslint-plugin-react-hooks": "4.6.2",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-standard": "5.0.0",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
-    "npm": "^10.8.3",
+    "npm": "^10.9.0",
     "postcss-aspect-ratio-polyfill": "^2.0.0",
     "postcss-cli": "^11.0.0",
     "postcss-combine-duplicated-selectors": "^10.0.3",
@@ -101,23 +101,23 @@
     "postcss-hexrgba": "^2.1.0",
     "postcss-import": "^16.1.0",
     "postcss-import-ext-glob": "^2.1.1",
-    "postcss-mixins": "^11.0.1",
+    "postcss-mixins": "^11.0.3",
     "postcss-nested": "^6.2.0",
     "postcss-nested-ancestors": "^3.0.0",
-    "postcss-normalize": "^13.0.0",
+    "postcss-normalize": "^13.0.1",
     "postcss-prepend-imports": "^1.0.1",
-    "postcss-preset-env": "^10.0.3",
+    "postcss-preset-env": "^10.0.8",
     "postcss-pxtorem": "^6.1.0",
     "postcss-responsive-type": "github:ITCase/postcss-responsive-type",
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "3.3.3",
-    "rollup": "^4.21.3",
+    "rollup": "^4.24.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^24.1.1",
-    "stylelint": "^16.9.0",
+    "semantic-release": "^24.1.3",
+    "stylelint": "^16.10.0",
     "stylelint-config-standard": "^36.0.1",
     "stylelint-no-unsupported-browser-features": "^8.0.1",
     "stylelint-order": "^6.0.4",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.3"
   }
 }