@itcase/forms 1.1.36 → 1.1.37

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

@@ -7,7 +7,7 @@
     outline: 0;
     @mixin easing easeOutQuart, all, 0.2s;
     &_size {
-      @each $size in normal, compact {
+      @each $size in xl, l, m, s {
         &_$(size) {
           ^^&-wrapper {
             padding: var(--fileinput-size-$(size)-padding);
@@ -19,6 +19,7 @@
       display: grid;
       gap: 16px;
       grid-template-columns: repeat(3, minmax(0, 1fr));
+      transition: var(--fileinput-transition);
     }
     ^&__hint {
       width: 100%;
@@ -91,10 +92,10 @@
     }
     &-name {
       width: 100%;
+      white-space: wrap;
       padding: 12px 0 0 0;
-      grid-column-start: 2;
       align-self: flex-start;
-      white-space: wrap;
+      grid-column-start: 2;
       &-inner {
         display: inline-block;
         @mixin word-wrap;
@@ -116,7 +117,7 @@
 .form-dropzone {
   &_shape {
     &_rounded {
-      @each $size in normal, compact {
+      @each $size in xl, l, m, s {
         &.form-dropzone__dropzone_size_$(size) {
           & .form-dropzone__dropzone-wrapper {
             border-radius: var(--fileinput-size-$(size)-shape-rounded);
@@ -155,4 +156,5 @@
 :root {
   --fileinput-size-normal-padding: 16px 16px;
   --fileinput-size-normal-shape-rounded: 6px;
+  --fileinput-transition: all 0.2s ease 0s;
 }

package/dist/itcase-forms.cjs.js

@@ -132,8 +132,8 @@ function useYupValidationSchema(schema, language) {
 function useFieldValidationState(props) {
   const {
     fieldProps = {},
-    meta = {},
-    input = {}
+    input = {},
+    meta = {}
   } = props;
   // Determines if there's a submission error that hasn't been rectified since the last submission.
   const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
@@ -179,10 +179,10 @@ function useFieldValidationState(props) {
   }, [meta.error, submitError]);
   return {
     errorKey,
-    successKey,
+    errorMessage,
     isErrorState,
-    isValidState,
-    errorMessage
+    successKey,
+    isValidState
   };
 }
 
@@ -371,13 +371,13 @@ function FieldWrapperBase(props) {
   const errorTextColor = props[`${errorKey}MessageTextColor`];
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React__default.default.createElement(Tag, {
-    dataTestId: `${inputName}Field`,
-    dataTour: dataTour,
     className: clsx__default.default(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    "data-test-id": `${inputName}Field`,
+    "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
-    dataTestId: `${inputName}FieldLabel`,
     className: clsx__default.default('form-field__label'),
+    "data-test-id": `${inputName}FieldLabel`,
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
@@ -386,8 +386,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
-    dataTestId: `${inputName}FieldDesc`,
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -403,8 +403,8 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
-    dataTestId: `${inputName}FieldMessage`,
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-test-id": `${inputName}FieldMessage`
   }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     id: `${inputName}-error`,
     dataTestId: `${inputName}FieldMessageError`,
@@ -443,8 +443,9 @@ function FieldWrapper(props) {
 
 const defaultDropzoneProps = {
   fill: 'surfaceSecondary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
+  fillHover: 'surfaceTertiary',
+  // borderColor: 'surfaceBorderTertiary',
+  // borderColorHover: 'surfaceBorderQuaternary',
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
@@ -1686,6 +1687,8 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    console.log('updatedInputProps');
+    console.log(updatedInputProps);
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_input', 'form__item_input', classNameGroupItem),
       errorKey: errorKey,
@@ -1834,7 +1837,7 @@ const defaultSegmentedProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
 };
 
 function FormFieldSegmented(props) {

package/dist/itcase-forms.esm.js

@@ -121,8 +121,8 @@ function useYupValidationSchema(schema, language) {
 function useFieldValidationState(props) {
   const {
     fieldProps = {},
-    meta = {},
-    input = {}
+    input = {},
+    meta = {}
   } = props;
   // Determines if there's a submission error that hasn't been rectified since the last submission.
   const submitError = !meta.modifiedSinceLastSubmit && meta.submitError;
@@ -168,10 +168,10 @@ function useFieldValidationState(props) {
   }, [meta.error, submitError]);
   return {
     errorKey,
-    successKey,
+    errorMessage,
     isErrorState,
-    isValidState,
-    errorMessage
+    successKey,
+    isValidState
   };
 }
 
@@ -360,13 +360,13 @@ function FieldWrapperBase(props) {
   const errorTextColor = props[`${errorKey}MessageTextColor`];
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React.createElement(Tag, {
-    dataTestId: `${inputName}Field`,
-    dataTour: dataTour,
     className: clsx(formFieldClass, 'form__item', 'form-field', type && `form-field_type_${type}`, sizeClass, fillClass, shapeClass, isDisabled && `form-field_state_disabled`, isHidden && `form-field_state_hidden`, directionClass, widthClass),
+    "data-test-id": `${inputName}Field`,
+    "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
-    dataTestId: `${inputName}FieldLabel`,
     className: clsx('form-field__label'),
+    "data-test-id": `${inputName}FieldLabel`,
     htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
@@ -375,8 +375,8 @@ function FieldWrapperBase(props) {
     sizeMobile: labelTextSizeMobile,
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
-    dataTestId: `${inputName}FieldDesc`,
-    className: "form-field__desc"
+    className: "form-field__desc",
+    "data-test-id": `${inputName}FieldDesc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -392,8 +392,8 @@ function FieldWrapperBase(props) {
     size: dividerSize,
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
-    dataTestId: `${inputName}FieldMessage`,
-    className: "form-field__message"
+    className: "form-field__message",
+    "data-test-id": `${inputName}FieldMessage`
   }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(Text, {
     id: `${inputName}-error`,
     dataTestId: `${inputName}FieldMessageError`,
@@ -432,8 +432,9 @@ function FieldWrapper(props) {
 
 const defaultDropzoneProps = {
   fill: 'surfaceSecondary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
+  fillHover: 'surfaceTertiary',
+  // borderColor: 'surfaceBorderTertiary',
+  // borderColorHover: 'surfaceBorderQuaternary',
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
@@ -1675,6 +1676,8 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
     });
+    console.log('updatedInputProps');
+    console.log(updatedInputProps);
     return /*#__PURE__*/React.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_input', 'form__item_input', classNameGroupItem),
       errorKey: errorKey,
@@ -1823,7 +1826,7 @@ const defaultSegmentedProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
 };
 
 function FormFieldSegmented(props) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itcase/forms",
-  "version": "1.1.36",
+  "version": "1.1.37",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",