@itcase/forms 1.0.32 → 1.0.34

package/dist/css/form/Field/Group/Group.css

@@ -1,7 +1,7 @@
 .form {
   &__group {
     width: 100%;
-    margin: 0;
+    margin: 0 0 12px 0;
     &-wrapper {
       display: flex;
       flex-flow: column nowrap;

package/dist/css/form/Form/Form.css

@@ -156,45 +156,6 @@
     position: relative;
   }
 }
-.form-response {
-  background: var(--color-surface-primary);
-  padding: 30px;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  @mixin elevation-2;
-  &__icon {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    & svg {
-      fill: var(--color-surface-item-accent);
-      transform: scale(4.18);
-    }
-  }
-  &__title {
-    max-width: 240px;
-    color: var(--color-surface-text-primary);
-    text-align: center;
-    padding: 0;
-    margin: 0 0 8px 0;
-    @mixin h5;
-  }
-  &__text {
-    max-width: 240px;
-    color: var(--color-surface-text-primary);
-    text-align: center;
-    padding: 0;
-    margin: 0;
-    @mixin text-l;
-  }
-  &__button {
-    width: 100%;
-    margin: 30px 0 0 0;
-  }
-}
 .form-notification {
   &_type {
     &_sticky {

package/dist/itcase-forms.cjs.js

@@ -1128,9 +1128,14 @@ function _convertToFiles() {
               newFile.preview = URL.createObjectURL(newFile);
             }
             newFiles.push(newFile);
-          } else if (value) {
-            newFiles.push(value);
           }
+
+          // else if (value) {
+          //   newFiles.push({
+          //     name: value,
+          //     error: 'File is unavailable',
+          //   })
+          // }
         case 18:
           _iteratorAbruptCompletion = false;
           _context4.next = 5;
@@ -1201,6 +1206,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
   var inputName = props.inputName,
     size = props.size,
     className = props.className,
+    fileErrorText = props.fileErrorText,
     hintTitleTextSize = props.hintTitleTextSize,
     removeThumbTextSize = props.removeThumbTextSize,
     removeThumbTextColor = props.removeThumbTextColor,
@@ -1231,8 +1237,8 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     isPreviews = props.isPreviews;
     props.loadingText;
     var _props$dropzoneProps = props.dropzoneProps,
-    dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps;
-  var onAddFiles = props.onAddFiles,
+    dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps,
+    onAddFiles = props.onAddFiles,
     onDeleteFile = props.onDeleteFile;
   var _useState = React.useState(''),
     fileError = _useState[0],
@@ -1292,7 +1298,9 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
         if (isPreviews) {
           // Add preview to every file
           acceptedFiles.forEach(function (file) {
-            file.preview = URL.createObjectURL(file);
+            if (!file.error) {
+              file.preview = URL.createObjectURL(file);
+            }
           });
         }
         // Save to form data (including empty when files are not valid)
@@ -1450,7 +1458,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     return /*#__PURE__*/React__default.default.createElement("aside", {
       className: clsx__default.default('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
-    }, isPreviews && /*#__PURE__*/React__default.default.createElement("div", {
+    }, isPreviews && !file.error && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-image"
     }, /*#__PURE__*/React__default.default.createElement("img", {
       className: "form-dropzone__thumb-image-inner",
@@ -1459,7 +1467,12 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
         // Revoke data uri after image is loaded
         URL.revokeObjectURL(file.preview);
       }
-    })), isShowFilename && /*#__PURE__*/React__default.default.createElement("div", {
+    })), file.error && /*#__PURE__*/React__default.default.createElement("div", null, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      size: thumbNameTextSize,
+      textColor: thumbNameTextColor,
+      textWrap: thumbNameTextWrap,
+      textWeight: thumbNameTextWeight
+    }, fileErrorText || file.error)), isShowFilename && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-name"
     }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
       size: thumbNameTextSize,
@@ -1583,6 +1596,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     thumbDirection = props.thumbDirection,
     hintDescription = props.hintDescription,
     isShowFilename = props.isShowFilename,
+    fileErrorText = props.fileErrorText,
     dropzoneProps = props.dropzoneProps,
     maxFiles = props.maxFiles,
     maxSize = props.maxSize,
@@ -1625,6 +1639,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       thumbBorderColor: thumbBorderColor,
       thumbBorderColorHover: thumbBorderColorHover,
       thumbBorderType: thumbBorderType,
+      fileErrorText: fileErrorText,
       fill: fill,
       size: size,
       maxFiles: maxFiles,
@@ -1746,7 +1761,10 @@ var Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
       size: messageTextSize,
       textWeight: messageTextWeight,
       textColor: messageTextColor
-    }, message));
+    }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
+      className: "form__group-message",
+      size: messageTextSize
+    }, "\xA0"));
   });
 });
 Group.defaultProps = {

package/dist/itcase-forms.esm.js

@@ -1118,9 +1118,14 @@ function _convertToFiles() {
               newFile.preview = URL.createObjectURL(newFile);
             }
             newFiles.push(newFile);
-          } else if (value) {
-            newFiles.push(value);
           }
+
+          // else if (value) {
+          //   newFiles.push({
+          //     name: value,
+          //     error: 'File is unavailable',
+          //   })
+          // }
         case 18:
           _iteratorAbruptCompletion = false;
           _context4.next = 5;
@@ -1191,6 +1196,7 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
   var inputName = props.inputName,
     size = props.size,
     className = props.className,
+    fileErrorText = props.fileErrorText,
     hintTitleTextSize = props.hintTitleTextSize,
     removeThumbTextSize = props.removeThumbTextSize,
     removeThumbTextColor = props.removeThumbTextColor,
@@ -1221,8 +1227,8 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     isPreviews = props.isPreviews;
     props.loadingText;
     var _props$dropzoneProps = props.dropzoneProps,
-    dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps;
-  var onAddFiles = props.onAddFiles,
+    dropzoneProps = _props$dropzoneProps === void 0 ? {} : _props$dropzoneProps,
+    onAddFiles = props.onAddFiles,
     onDeleteFile = props.onDeleteFile;
   var _useState = useState(''),
     fileError = _useState[0],
@@ -1282,7 +1288,9 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
         if (isPreviews) {
           // Add preview to every file
           acceptedFiles.forEach(function (file) {
-            file.preview = URL.createObjectURL(file);
+            if (!file.error) {
+              file.preview = URL.createObjectURL(file);
+            }
           });
         }
         // Save to form data (including empty when files are not valid)
@@ -1440,7 +1448,7 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     return /*#__PURE__*/React.createElement("aside", {
       className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
-    }, isPreviews && /*#__PURE__*/React.createElement("div", {
+    }, isPreviews && !file.error && /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-image"
     }, /*#__PURE__*/React.createElement("img", {
       className: "form-dropzone__thumb-image-inner",
@@ -1449,7 +1457,12 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
         // Revoke data uri after image is loaded
         URL.revokeObjectURL(file.preview);
       }
-    })), isShowFilename && /*#__PURE__*/React.createElement("div", {
+    })), file.error && /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Text, {
+      size: thumbNameTextSize,
+      textColor: thumbNameTextColor,
+      textWrap: thumbNameTextWrap,
+      textWeight: thumbNameTextWeight
+    }, fileErrorText || file.error)), isShowFilename && /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-name"
     }, /*#__PURE__*/React.createElement(Text, {
       size: thumbNameTextSize,
@@ -1573,6 +1586,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     thumbDirection = props.thumbDirection,
     hintDescription = props.hintDescription,
     isShowFilename = props.isShowFilename,
+    fileErrorText = props.fileErrorText,
     dropzoneProps = props.dropzoneProps,
     maxFiles = props.maxFiles,
     maxSize = props.maxSize,
@@ -1615,6 +1629,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       thumbBorderColor: thumbBorderColor,
       thumbBorderColorHover: thumbBorderColorHover,
       thumbBorderType: thumbBorderType,
+      fileErrorText: fileErrorText,
       fill: fill,
       size: size,
       maxFiles: maxFiles,
@@ -1736,7 +1751,10 @@ var Group = /*#__PURE__*/React.memo(function Group(props) {
       size: messageTextSize,
       textWeight: messageTextWeight,
       textColor: messageTextColor
-    }, message));
+    }, message), Boolean(!showError) && Boolean(!message) && /*#__PURE__*/React.createElement(Text, {
+      className: "form__group-message",
+      size: messageTextSize
+    }, "\xA0"));
   });
 });
 Group.defaultProps = {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.32",
+  "version": "1.0.34",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@itcase/common": "^1.1.6",
-    "@itcase/ui": "^1.0.61",
+    "@itcase/ui": "^1.0.65",
     "axios": "^1.5.0",
     "clsx": "^2.0.0",
     "date-fns": "2.0.0-alpha.7",
@@ -53,7 +53,7 @@
     "react-select": "^5.7.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.20",
+    "@babel/core": "^7.23.0",
     "@babel/eslint-parser": "^7.22.15",
     "@babel/preset-env": "^7.22.20",
     "@babel/preset-react": "^7.22.15",
@@ -67,7 +67,7 @@
     "@semantic-release/git": "^10.0.1",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "eslint": "8.49.0",
+    "eslint": "8.50.0",
     "eslint-config-prettier": "^9.0.0",
     "eslint-config-standard": "^17.1.0",
     "eslint-plugin-import": "^2.28.1",
@@ -101,9 +101,9 @@
     "postcss-sort-media-queries": "^5.2.0",
     "prettier": "^3.0.3",
     "react-datepicker": "^4.18.0",
-    "rollup": "^3.29.2",
+    "rollup": "^3.29.3",
     "rollup-plugin-peer-deps-external": "^2.2.4",
-    "semantic-release": "^22.0.1",
+    "semantic-release": "^22.0.5",
     "stylelint": "^15.10.3",
     "stylelint-config-standard": "^34.0.0",
     "stylelint-no-unsupported-browser-features": "^7.0.0",

package/dist/css/form/Form/css/form-response/form-response.css

@@ -1,39 +0,0 @@
-.form-response {
-  background: var(--color-surface-primary);
-  padding: 30px;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: center;
-  @mixin elevation-2;
-  &__icon {
-    width: 100px;
-    height: 100px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    & svg {
-      fill: var(--color-surface-item-accent);
-      transform: scale(4.18);
-    }
-  }
-  &__title {
-    max-width: 240px;
-    color: var(--color-surface-text-primary);
-    text-align: center;
-    padding: 0;
-    margin: 0 0 8px 0;
-    @mixin h5;
-  }
-  &__text {
-    max-width: 240px;
-    color: var(--color-surface-text-primary);
-    text-align: center;
-    padding: 0;
-    margin: 0;
-    @mixin text-l;
-  }
-  &__button {
-    width: 100%;
-    margin: 30px 0 0 0;
-  }
-}