@itcase/forms 1.0.14 → 1.0.15

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

@@ -5,6 +5,12 @@
     z-index: 1;
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
+    &-wrapper {
+      display: flex;
+      gap: 20px;
+      justify-content: space-between;
+      flex-flow: row wrap;
+    }
     &_size {
       @each $size in normal, compact {
         &_$(size) {
@@ -15,6 +21,7 @@
       }
     }
     ^&__hint {
+      width: 100%;
       min-height: 120px;
       display: flex;
       flex-flow: column nowrap;
@@ -41,6 +48,7 @@
     }
   }
   &__thumb {
+    flex: 30%;
     display: grid;
     column-gap: 8px;
     grid-template-columns: min-content 1fr;
@@ -48,8 +56,8 @@
     margin: 0 0 16px 0;
     padding: 8px 16px 8px 8px;
     &-image {
-      width: 80px;
-      height: 80px;
+      width: 160px;
+      height: 160px;
       grid-column-start: 1;
       grid-row-start: span 2;
       display: flex;

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

@@ -220,6 +220,21 @@
     margin: 30px 0 0 0;
   }
 }
+.form-notification {
+  &_type {
+    &_sticky {
+      z-index: 100;
+      position: sticky;
+      top: 20px;
+      left: 0;
+    }
+  }
+  &__item {
+    text-align: center;
+    padding: 20px;
+    border-radius: 12px;
+  }
+}
 .form {
   &_type_bottom-button {
     flex: 1;

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

@@ -0,0 +1,15 @@
+.form-notification {
+  &_type {
+    &_sticky {
+      z-index: 100;
+      position: sticky;
+      top: 20px;
+      left: 0;
+    }
+  }
+  &__item {
+    text-align: center;
+    padding: 20px;
+    border-radius: 12px;
+  }
+}

package/dist/itcase-forms.cjs.js

@@ -1345,6 +1345,10 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     prefix: 'border-color_',
     propsKey: 'thumbBorderColor'
   });
+  var thumbBorderColorHoverClass = useDeviceTargetClass.useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'thumbBorderColorHover'
+  });
   var thumbBorderTypeClass = useDeviceTargetClass.useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'thumbBorderType'
@@ -1357,7 +1361,7 @@ var FileInputDropzone = /*#__PURE__*/React__default.default.memo(function FileIn
     className: clsx__default.default('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React__default.default.createElement("aside", {
-      className: clsx__default.default('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderTypeClass),
+      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", {
       className: "form-dropzone__thumb-image"
@@ -1449,6 +1453,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
     thumbBorderColor = props.thumbBorderColor,
+    thumbBorderColorHover = props.thumbBorderColorHover,
     thumbBorderType = props.thumbBorderType,
     removeThumbTextHoverColor = props.removeThumbTextHoverColor,
     labelTextColor = props.labelTextColor,
@@ -1511,6 +1516,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
       thumbBorderType: thumbBorderType,
       fill: fill,
       size: size,
@@ -2434,6 +2440,7 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
     type = props.type,
     buttonJustifyContent = props.buttonJustifyContent,
     title = props.title,
+    notificationType = props.notificationType,
     buttonFill = props.buttonFill,
     titleTextSize = props.titleTextSize,
     titleTextColor = props.titleTextColor,
@@ -2501,10 +2508,13 @@ var FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalFor
         size: descriptionSize,
         textColor: descriptionTextColor,
         textWeight: descriptionTextWeight
-      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
+      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React__default.default.createElement("div", {
+        className: clsx__default.default('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+      }, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
+        className: "form-notification__item",
         text: form.getState().submitError,
         status: "error"
-      }), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
+      })), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
         subscription: {
           values: true
         },

package/dist/itcase-forms.esm.js

@@ -1335,6 +1335,10 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     prefix: 'border-color_',
     propsKey: 'thumbBorderColor'
   });
+  var thumbBorderColorHoverClass = useDeviceTargetClass(props, {
+    prefix: 'border-color_hover_',
+    propsKey: 'thumbBorderColorHover'
+  });
   var thumbBorderTypeClass = useDeviceTargetClass(props, {
     prefix: 'border_type_',
     propsKey: 'thumbBorderType'
@@ -1347,7 +1351,7 @@ var FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(props
     className: clsx('form-dropzone__dropzone-wrapper', fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
   }, files.map(function (file, i) {
     return /*#__PURE__*/React.createElement("aside", {
-      className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderTypeClass),
+      className: clsx('form-dropzone__thumb', fillClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
       key: "" + (file.id || file.name + "_" + i || 'i' + i)
     }, isPreviews && /*#__PURE__*/React.createElement("div", {
       className: "form-dropzone__thumb-image"
@@ -1439,6 +1443,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     label = props.label,
     thumbBorderWidth = props.thumbBorderWidth,
     thumbBorderColor = props.thumbBorderColor,
+    thumbBorderColorHover = props.thumbBorderColorHover,
     thumbBorderType = props.thumbBorderType,
     removeThumbTextHoverColor = props.removeThumbTextHoverColor,
     labelTextColor = props.labelTextColor,
@@ -1501,6 +1506,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       borderType: borderType,
       thumbBorderWidth: thumbBorderWidth,
       thumbBorderColor: thumbBorderColor,
+      thumbBorderColorHover: thumbBorderColorHover,
       thumbBorderType: thumbBorderType,
       fill: fill,
       size: size,
@@ -2424,6 +2430,7 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     type = props.type,
     buttonJustifyContent = props.buttonJustifyContent,
     title = props.title,
+    notificationType = props.notificationType,
     buttonFill = props.buttonFill,
     titleTextSize = props.titleTextSize,
     titleTextColor = props.titleTextColor,
@@ -2491,10 +2498,13 @@ var FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         size: descriptionSize,
         textColor: descriptionTextColor,
         textWeight: descriptionTextWeight
-      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement(NotificationItem, {
+      }, description), submitError && !modifiedSinceLastSubmit && /*#__PURE__*/React.createElement("div", {
+        className: clsx('notification', 'form-notification', notificationType && "form-notification_type_" + notificationType)
+      }, /*#__PURE__*/React.createElement(NotificationItem, {
+        className: "form-notification__item",
         text: form.getState().submitError,
         status: "error"
-      }), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
+      })), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
         subscription: {
           values: true
         },

package/package.json

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