@itcase/forms 1.0.25 → 1.0.26

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

@@ -1,4 +1,5 @@
 .form-dropzone {
+  flex-direction: column;
   &__dropzone {
     width: 100%;
     box-shadow: none;
@@ -6,10 +7,9 @@
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
     &-wrapper {
-      display: flex;
-      gap: 20px;
-      justify-content: space-between;
-      flex-flow: row wrap;
+      display: grid;
+      gap: 16px;
+      grid-template-columns: repeat(3, minmax(0, 1fr));
     }
     &_size {
       @each $size in normal, compact {
@@ -29,6 +29,7 @@
       align-content: center;
       align-items: center;
       cursor: pointer;
+      grid-column: span 3;
       &-title {
         padding: 0 0 8px 0;
         margin: 0;
@@ -48,13 +49,20 @@
     }
   }
   &__thumb {
-    flex: 30%;
     display: grid;
     column-gap: 8px;
     grid-template-columns: min-content 1fr;
     grid-template-rows: auto 1fr;
-    margin: 0 0 16px 0;
     padding: 8px 16px 8px 8px;
+    position: relative;
+    &-loader {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+    }
     &-image {
       width: 160px;
       height: 160px;

package/dist/itcase-forms.cjs.js

@@ -19,6 +19,7 @@ var reactDropzone = require('react-dropzone');
 var fileSelector = require('file-selector');
 var castArray = require('lodash/castArray');
 var common = require('@itcase/common');
+var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
 var Input = require('@itcase/ui/components/Input');
 var Icon = require('@itcase/ui/components/Icon');
@@ -29,7 +30,6 @@ var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
 var Button = require('@itcase/ui/components/Button');
 var Group$1 = require('@itcase/ui/components/Group');
-var Loader = require('@itcase/ui/components/Loader');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
 
@@ -1204,6 +1204,9 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     hintDescriptionTextColor = props.hintDescriptionTextColor,
     hintDescriptionTextWrap = props.hintDescriptionTextWrap,
     hintDescriptionTextWeight = props.hintDescriptionTextWeight,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     inputValue = props.inputValue,
     removeThumbText = props.removeThumbText,
     hintTitle = props.hintTitle,
@@ -1371,20 +1374,6 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     };
   }, []); // eslint-disable-line
 
-  // prettier-ignore
-  /*
-  const itemClass = useMemo(
-    () => clsx(
-      'form__item',
-      'form__item_type_dropzone',
-      // itemClassName,
-      // metaError || fileError && 'form__item_state_error',
-      files.length && 'form__item_state_success'
-    ),
-    [files.length]
-  )
-  */
-
   var fillClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -1439,7 +1428,9 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     return /*#__PURE__*/React__default.default.createElement("aside", {
       className: clsx__default.default('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
-    }, isPreviews && /*#__PURE__*/React__default.default.createElement("div", {
+    }, /*#__PURE__*/React__default.default.createElement("div", {
+      className: "form-dropzone__thumb-loading"
+    }, fileIsLoading && (loadingText || 'Loading...')), isPreviews && /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-image"
     }, /*#__PURE__*/React__default.default.createElement("img", {
       className: "form-dropzone__thumb-image-inner",
@@ -1457,8 +1448,14 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
       textWeight: thumbNameTextWeight,
       className: "form-dropzone__thumb-name-inner"
     }, file.name)), fileIsLoading && /*#__PURE__*/React__default.default.createElement("div", {
-      className: "form-dropzone__thumb-loading"
-    }, loadingText || 'Loading...'), /*#__PURE__*/React__default.default.createElement("div", {
+      className: "form-dropzone__thumb-loader"
+    }, /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
+      fill: "surfacePrimary",
+      height: "fill",
+      itemFill: "surfaceItemAccent",
+      set: "simple",
+      width: "fill"
+    })), /*#__PURE__*/React__default.default.createElement("div", {
       className: "form-dropzone__thumb-remove",
       onClick: function onClick(event) {
         return removeFile(event, i);
@@ -1499,8 +1496,13 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     textWeight: hintDescriptionTextWeight,
     className: "form-dropzone__hint-text"
   }, hintDescription)))), fileError && /*#__PURE__*/React__default.default.createElement("div", {
-    className: "form__item-message form__item-message_type-error"
-  }, fileError));
+    className: "form-field__message"
+  }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
+    className: "form-field__message-item form-field__message-item_type_message",
+    size: errorMessageTextSize,
+    textWeight: errorMessageTextWeight,
+    textColor: errorMessageTextColor
+  }, fileError)));
 });
 FileInputDropzone.propTypes = {
   dropzoneProps: PropTypes__default.default.object,
@@ -1545,6 +1547,9 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     removeThumbTextColor = props.removeThumbTextColor,
     removeThumbTextWeight = props.removeThumbTextWeight,
     hintTitle = props.hintTitle,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     fieldProps = props.fieldProps,
     hintTitleTextSize = props.hintTitleTextSize,
     hintTitleTextColor = props.hintTitleTextColor,
@@ -1618,6 +1623,9 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       hintDescriptionTextColor: hintDescriptionTextColor,
       hintDescriptionTextWrap: hintDescriptionTextWrap,
       hintDescriptionTextWeight: hintDescriptionTextWeight,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      errorMessageTextColor: errorMessageTextColor,
       isPreviews: isPreviews,
       shape: shape,
       isShowFilename: isShowFilename,
@@ -1629,6 +1637,10 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     }));
   });
 });
+FileInput.defaultProps = {
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextPrimary'
+};
 FileInput.propTypes = {
   name: PropTypes__default.default.string.isRequired,
   className: PropTypes__default.default.string,

package/dist/itcase-forms.esm.js

@@ -18,6 +18,7 @@ import { useDropzone } from 'react-dropzone';
 import { fromEvent } from 'file-selector';
 import castArray from 'lodash/castArray';
 import { createFileFromDataURL } from '@itcase/common';
+import { Loader } from '@itcase/ui/components/Loader';
 import { Title } from '@itcase/ui/components/Title';
 import { Input } from '@itcase/ui/components/Input';
 import { Icon } from '@itcase/ui/components/Icon';
@@ -28,7 +29,6 @@ import { Switch } from '@itcase/ui/components/Switch';
 import { Textarea } from '@itcase/ui/components/Textarea';
 import { Button } from '@itcase/ui/components/Button';
 import { Group as Group$1 } from '@itcase/ui/components/Group';
-import { Loader } from '@itcase/ui/components/Loader';
 import { NotificationItem } from '@itcase/ui/components/Notification';
 import createDecorator from 'final-form-focus';
 
@@ -1194,6 +1194,9 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     hintDescriptionTextColor = props.hintDescriptionTextColor,
     hintDescriptionTextWrap = props.hintDescriptionTextWrap,
     hintDescriptionTextWeight = props.hintDescriptionTextWeight,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     inputValue = props.inputValue,
     removeThumbText = props.removeThumbText,
     hintTitle = props.hintTitle,
@@ -1361,20 +1364,6 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     };
   }, []); // eslint-disable-line
 
-  // prettier-ignore
-  /*
-  const itemClass = useMemo(
-    () => clsx(
-      'form__item',
-      'form__item_type_dropzone',
-      // itemClassName,
-      // metaError || fileError && 'form__item_state_error',
-      files.length && 'form__item_state_success'
-    ),
-    [files.length]
-  )
-  */
-
   var fillClass = useDeviceTargetClass(props, {
     prefix: 'fill_',
     propsKey: 'fill'
@@ -1429,7 +1418,9 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     return /*#__PURE__*/React.createElement("aside", {
       className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
-    }, isPreviews && /*#__PURE__*/React.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
+      className: "form-dropzone__thumb-loading"
+    }, fileIsLoading && (loadingText || 'Loading...')), isPreviews && /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-image"
     }, /*#__PURE__*/React.createElement("img", {
       className: "form-dropzone__thumb-image-inner",
@@ -1447,8 +1438,14 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
       textWeight: thumbNameTextWeight,
       className: "form-dropzone__thumb-name-inner"
     }, file.name)), fileIsLoading && /*#__PURE__*/React.createElement("div", {
-      className: "form-dropzone__thumb-loading"
-    }, loadingText || 'Loading...'), /*#__PURE__*/React.createElement("div", {
+      className: "form-dropzone__thumb-loader"
+    }, /*#__PURE__*/React.createElement(Loader, {
+      fill: "surfacePrimary",
+      height: "fill",
+      itemFill: "surfaceItemAccent",
+      set: "simple",
+      width: "fill"
+    })), /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-remove",
       onClick: function onClick(event) {
         return removeFile(event, i);
@@ -1489,8 +1486,13 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     textWeight: hintDescriptionTextWeight,
     className: "form-dropzone__hint-text"
   }, hintDescription)))), fileError && /*#__PURE__*/React.createElement("div", {
-    className: "form__item-message form__item-message_type-error"
-  }, fileError));
+    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
+  }, fileError)));
 });
 FileInputDropzone.propTypes = {
   dropzoneProps: PropTypes.object,
@@ -1535,6 +1537,9 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     removeThumbTextColor = props.removeThumbTextColor,
     removeThumbTextWeight = props.removeThumbTextWeight,
     hintTitle = props.hintTitle,
+    errorMessageTextSize = props.errorMessageTextSize,
+    errorMessageTextWeight = props.errorMessageTextWeight,
+    errorMessageTextColor = props.errorMessageTextColor,
     fieldProps = props.fieldProps,
     hintTitleTextSize = props.hintTitleTextSize,
     hintTitleTextColor = props.hintTitleTextColor,
@@ -1608,6 +1613,9 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       hintDescriptionTextColor: hintDescriptionTextColor,
       hintDescriptionTextWrap: hintDescriptionTextWrap,
       hintDescriptionTextWeight: hintDescriptionTextWeight,
+      errorMessageTextSize: errorMessageTextSize,
+      errorMessageWeight: errorMessageTextWeight,
+      errorMessageTextColor: errorMessageTextColor,
       isPreviews: isPreviews,
       shape: shape,
       isShowFilename: isShowFilename,
@@ -1619,6 +1627,10 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     }));
   });
 });
+FileInput.defaultProps = {
+  errorMessageTextSize: 's',
+  errorMessageTextColor: 'errorTextPrimary'
+};
 FileInput.propTypes = {
   name: PropTypes.string.isRequired,
   className: PropTypes.string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.0.25",
+  "version": "1.0.26",
   "description": "Forms fields, inputs, etc.",
   "keywords": [
     "forms",