@itcase/forms 1.1.35 → 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`,
@@ -442,9 +442,10 @@ function FieldWrapper(props) {
 }
 
 const defaultDropzoneProps = {
-  fill: 'surfacePrimary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
+  fill: 'surfaceSecondary',
+  fillHover: 'surfaceTertiary',
+  // borderColor: 'surfaceBorderTertiary',
+  // borderColorHover: 'surfaceBorderQuaternary',
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
@@ -646,11 +647,12 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     thumbNameTextWrap
   } = propsGenerator;
   return /*#__PURE__*/React__default.default.createElement(React__default.default.Fragment, null, /*#__PURE__*/React__default.default.createElement("div", getRootProps({
-    className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
+    // className: `form-dropzone__dropzone dropzone  ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`,
+    className: `form-dropzone__dropzone dropzone`
   }), /*#__PURE__*/React__default.default.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React__default.default.createElement("div", {
-    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+    className: clsx__default.default('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`)
   }, filesList.map((file, index) => /*#__PURE__*/React__default.default.createElement("aside", {
     className: clsx__default.default('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
     key: file.id || `${file.name}_${index}`
@@ -680,10 +682,7 @@ const FileInputDropzone = /*#__PURE__*/React__default.default.memo(function File
     className: "form-dropzone__thumb-loader"
   }, /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
     width: "fill",
-    height: "fill",
-    fill: "surfacePrimary",
-    itemFill: "surfaceItemAccent",
-    set: "simple"
+    height: "fill"
   })), /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('form-dropzone__thumb-remove')
   }, /*#__PURE__*/React__default.default.createElement(Button.Button, {
@@ -844,9 +843,9 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
     hintTitleTextWeight,
     hintTitleTextWrap,
     removeThumbAppearance,
+    removeThumbShape,
     removeThumbText,
     removeThumbTextWeight,
-    removeThumbShape,
     shape,
     thumbBorderColor,
     thumbBorderColorHover,
@@ -938,9 +937,9 @@ const FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(pr
       inputValue: input.value,
       metaTouched: meta.touched,
       removeThumbAppearance: removeThumbAppearance,
+      removeThumbShape: removeThumbShape,
       removeThumbText: removeThumbText,
       removeThumbTextWeight: removeThumbTextWeight,
-      removeThumbShape: removeThumbShape,
       shape: shape,
       showFilename: showFilename,
       thumbBorderColor: thumbBorderColor,
@@ -996,6 +995,11 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
     isHidden,
     children
   } = props;
+
+  // @ts-expect-error
+  const {
+    styles: styles
+  } = useStyles.useStyles(props);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name
   }, function Render({
@@ -1024,7 +1028,8 @@ const FormBlockGroup = /*#__PURE__*/React__default.default.memo(function Group(p
     });
     return /*#__PURE__*/React__default.default.createElement("div", {
       className: clsx__default.default('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
-      "data-tour": dataTour
+      "data-tour": dataTour,
+      style: styles
     }, /*#__PURE__*/React__default.default.createElement("div", {
       className: "form__group-wrapper"
     }, before, title && /*#__PURE__*/React__default.default.createElement("div", {
@@ -1682,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,
@@ -1830,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`,
@@ -431,9 +431,10 @@ function FieldWrapper(props) {
 }
 
 const defaultDropzoneProps = {
-  fill: 'surfacePrimary',
-  borderColor: 'surfaceBorderTertiary',
-  borderColorHover: 'surfaceBorderQuaternary',
+  fill: 'surfaceSecondary',
+  fillHover: 'surfaceTertiary',
+  // borderColor: 'surfaceBorderTertiary',
+  // borderColorHover: 'surfaceBorderQuaternary',
   hintTitle: 'Перетащите изображение или выберите файл с компьютера',
   hintTitleTextColor: 'surfaceTextPrimary',
   hintTitleTextSize: 'm',
@@ -635,11 +636,12 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
     thumbNameTextWrap
   } = propsGenerator;
   return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", getRootProps({
-    className: `form-dropzone__dropzone dropzone ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`
+    // className: `form-dropzone__dropzone dropzone  ${className} form-dropzone__dropzone_size_${size} ${shapeClass}`,
+    className: `form-dropzone__dropzone dropzone`
   }), /*#__PURE__*/React.createElement("input", Object.assign({}, getInputProps(), {
     name: inputName
   })), /*#__PURE__*/React.createElement("div", {
-    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass, fillHoverClass, borderWidthClass, borderColorClass, borderColorHoverClass, borderTypeClass)
+    className: clsx('form-dropzone__dropzone-wrapper', thumbColumn && `form-dropzone__dropzone-wrapper_column_${thumbColumn}`, fillClass && `fill_${fillClass}`, fillHoverClass && `fill_hover_${fillHoverClass}`, borderWidthClass && `border-width_${borderWidthClass}`, borderColorClass && `border-color_${borderColorClass}`, borderColorHoverClass && `border-color_hover_${borderColorHoverClass}`, borderTypeClass && `border_type_${borderTypeClass}`, shapeClass && `shape_${shapeClass}`)
   }, filesList.map((file, index) => /*#__PURE__*/React.createElement("aside", {
     className: clsx('form-dropzone__thumb', fillClass, thumbDirectionClass, thumbBorderWidthClass, thumbBorderColorClass, thumbBorderColorHoverClass, thumbBorderTypeClass),
     key: file.id || `${file.name}_${index}`
@@ -669,10 +671,7 @@ const FileInputDropzone = /*#__PURE__*/React.memo(function FileInputDropzone(pro
     className: "form-dropzone__thumb-loader"
   }, /*#__PURE__*/React.createElement(Loader, {
     width: "fill",
-    height: "fill",
-    fill: "surfacePrimary",
-    itemFill: "surfaceItemAccent",
-    set: "simple"
+    height: "fill"
   })), /*#__PURE__*/React.createElement("div", {
     className: clsx('form-dropzone__thumb-remove')
   }, /*#__PURE__*/React.createElement(Button, {
@@ -833,9 +832,9 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
     hintTitleTextWeight,
     hintTitleTextWrap,
     removeThumbAppearance,
+    removeThumbShape,
     removeThumbText,
     removeThumbTextWeight,
-    removeThumbShape,
     shape,
     thumbBorderColor,
     thumbBorderColorHover,
@@ -927,9 +926,9 @@ const FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
       inputValue: input.value,
       metaTouched: meta.touched,
       removeThumbAppearance: removeThumbAppearance,
+      removeThumbShape: removeThumbShape,
       removeThumbText: removeThumbText,
       removeThumbTextWeight: removeThumbTextWeight,
-      removeThumbShape: removeThumbShape,
       shape: shape,
       showFilename: showFilename,
       thumbBorderColor: thumbBorderColor,
@@ -985,6 +984,11 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
     isHidden,
     children
   } = props;
+
+  // @ts-expect-error
+  const {
+    styles: styles
+  } = useStyles(props);
   return /*#__PURE__*/React.createElement(Field, {
     name: name
   }, function Render({
@@ -1013,7 +1017,8 @@ const FormBlockGroup = /*#__PURE__*/React.memo(function Group(props) {
     });
     return /*#__PURE__*/React.createElement("div", {
       className: clsx('form__group', className, isHidden && 'form__group_hidden', column && `form__group_column_${column}`),
-      "data-tour": dataTour
+      "data-tour": dataTour,
+      style: styles
     }, /*#__PURE__*/React.createElement("div", {
       className: "form__group-wrapper"
     }, before, title && /*#__PURE__*/React.createElement("div", {
@@ -1671,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,
@@ -1819,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.35",
+  "version": "1.1.37",
   "description": "Forms fields, inputs, etc.",
   "keywords": [],
   "license": "MIT",