@itcase/forms 1.1.43 → 1.1.45

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

@@ -110,6 +110,17 @@
     border-radius: 12px;
   }
 }
+.form {
+  &_title-position {
+    &_sticky {
+      ^^&__title {
+        position: sticky;
+        top: 24px;
+        z-index: 5;
+      }
+    }
+  }
+}
 .form {
   &_type_bottom-button {
     flex: 1;
@@ -139,11 +150,6 @@
       position: relative;
       display: flex;
       flex-direction: column;
-      ^^&__title {
-        position: sticky;
-        top: 0;
-        z-index: 1;
-      }
       ^^&__wrapper {
         overflow: scroll;
         flex: 1;

package/dist/itcase-forms.cjs.js

@@ -535,7 +535,7 @@ const defaultChipsProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
   // Success
   // successAppearance: 'successPrimary sizeM solid rounded',
 };
@@ -544,7 +544,6 @@ function FormFieldChips(props) {
   const {
     name,
     initialValue,
-    isDisabled,
     classNameGroupItem,
     emptyMessage,
     emptyMessageTextColor,
@@ -553,6 +552,7 @@ function FormFieldChips(props) {
     inputProps,
     options,
     showMessage,
+    isDisabled,
     isRequired,
     onChange
   } = props;
@@ -581,8 +581,8 @@ function FormFieldChips(props) {
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -608,14 +608,14 @@ function FormFieldChips(props) {
       className: clsx__default.default('form-field_chips', 'form__item_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-chips",
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), options.length ? /*#__PURE__*/React__default.default.createElement(Chips.ChipsGroup, {
@@ -626,9 +626,9 @@ function FormFieldChips(props) {
       className: clsx__default.default(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
-      isDisabled: option.isDisabled,
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
+      isDisabled: option.isDisabled,
       onClick: () => onChangeSomeInput(input.value, option.value)
     }, updatedInputProps)))) : /*#__PURE__*/React__default.default.createElement(Text.Text, {
       size: emptyMessageTextSize,
@@ -1732,6 +1732,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
   const {
     name,
     initialValue,
+    isDisabled,
     classNameGroupItem,
     clearIcon,
     clearIconFill,
@@ -1743,7 +1744,6 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
     optionsMask,
     showMessage,
     unmasked,
-    isDisabled,
     isRequired,
     onClickClearIcon
   } = props;
@@ -1763,10 +1763,11 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
 
     const {
       ref,
+      setUnmaskedValue,
       unmaskedValue,
-      value,
-      setUnmaskedValue
+      value
     } = reactImask.useIMask(optionsMask, {
+      defaultValue: initialValue,
       onAccept: (newValue, event, element) => {
         if (element) {
           input.onChange(event._unmaskedValue);
@@ -1778,18 +1779,11 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
     }, [input.value]);
-
-    // useEffect(() => {
-    //   if (unmaskedValue !== input.value) {
-    //     input.onChange(unmaskedValue)
-    //   }
-    // }, [unmaskedValue])
-
     const {
       errorKey,
       errorMessage,
-      successKey,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1804,14 +1798,14 @@ const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function F
       className: clsx__default.default('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: 'form-maskedInput',
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.value || unmasked,
       metaActive: meta.active,
-      metaError: meta.error,
       showMessage: showMessage,
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
@@ -2652,6 +2646,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     validationSchema,
     title,
     titleFill,
+    titlePosition,
     titleTextColor,
     titleTextSize,
     titleTextWeight,
@@ -2757,7 +2752,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       submitError
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
-        className: clsx__default.default(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        className: clsx__default.default(className, 'form', type && `form_type_${type}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,

package/dist/itcase-forms.esm.js

@@ -524,7 +524,7 @@ const defaultChipsProps = {
   // Error
   errorAppearance: 'errorPrimary sizeM solid rounded',
   // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
+  requiredAppearance: 'warningPrimary sizeM solid rounded'
   // Success
   // successAppearance: 'successPrimary sizeM solid rounded',
 };
@@ -533,7 +533,6 @@ function FormFieldChips(props) {
   const {
     name,
     initialValue,
-    isDisabled,
     classNameGroupItem,
     emptyMessage,
     emptyMessageTextColor,
@@ -542,6 +541,7 @@ function FormFieldChips(props) {
     inputProps,
     options,
     showMessage,
+    isDisabled,
     isRequired,
     onChange
   } = props;
@@ -570,8 +570,8 @@ function FormFieldChips(props) {
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -597,14 +597,14 @@ function FormFieldChips(props) {
       className: clsx('form-field_chips', 'form__item_chips', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: "form-chips",
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), options.length ? /*#__PURE__*/React.createElement(ChipsGroup, {
@@ -615,9 +615,9 @@ function FormFieldChips(props) {
       className: clsx(meta.active && 'form-chips_state_focus', meta.error && meta.touched && `form-chips_state_${errorKey}`),
       key: option.value,
       label: option.label,
-      isDisabled: option.isDisabled,
       value: option.value,
       isActive: activeOptionsList.some(activeOption => activeOption.value === option.value),
+      isDisabled: option.isDisabled,
       onClick: () => onChangeSomeInput(input.value, option.value)
     }, updatedInputProps)))) : /*#__PURE__*/React.createElement(Text, {
       size: emptyMessageTextSize,
@@ -1721,6 +1721,7 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
   const {
     name,
     initialValue,
+    isDisabled,
     classNameGroupItem,
     clearIcon,
     clearIconFill,
@@ -1732,7 +1733,6 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
     optionsMask,
     showMessage,
     unmasked,
-    isDisabled,
     isRequired,
     onClickClearIcon
   } = props;
@@ -1752,10 +1752,11 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
 
     const {
       ref,
+      setUnmaskedValue,
       unmaskedValue,
-      value,
-      setUnmaskedValue
+      value
     } = useIMask(optionsMask, {
+      defaultValue: initialValue,
       onAccept: (newValue, event, element) => {
         if (element) {
           input.onChange(event._unmaskedValue);
@@ -1767,18 +1768,11 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
         setUnmaskedValue(input.value.replace(unmasked, ''));
       }
     }, [input.value]);
-
-    // useEffect(() => {
-    //   if (unmaskedValue !== input.value) {
-    //     input.onChange(unmaskedValue)
-    //   }
-    // }, [unmaskedValue])
-
     const {
       errorKey,
       errorMessage,
-      successKey,
       isErrorState,
+      successKey,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -1793,14 +1787,14 @@ const FormFieldMaskedInput = /*#__PURE__*/React.memo(function FormFieldMaskedInp
       className: clsx('form-field-masked-input', 'form__item_masked-input', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
       fieldClassName: 'form-maskedInput',
       inputName: input.name,
-      inputValue: input.value,
+      inputValue: input.value || unmasked,
       metaActive: meta.active,
-      metaError: meta.error,
       showMessage: showMessage,
-      isDisabled: isDisabled,
-      isErrorState: isErrorState,
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
@@ -2641,6 +2635,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     validationSchema,
     title,
     titleFill,
+    titlePosition,
     titleTextColor,
     titleTextSize,
     titleTextWeight,
@@ -2746,7 +2741,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       submitError
     }) => {
       return /*#__PURE__*/React.createElement("form", {
-        className: clsx(className, 'form', type && `form_type_${type}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
+        className: clsx(className, 'form', type && `form_type_${type}`, titlePosition && `form_title-position_${titlePosition}`, buttonPosition && `form_button-position_${buttonPosition}`, directionClass && `direction_${directionClass}`, fillClass && `fill_${fillClass}`, shapeClass && `shape_${shapeClass}`, shapeStrengthClass && `shape-strength_${shapeStrengthClass}`, elevationClass && `elevation_${elevationClass}`),
         name: formName
         // We no need set reference to html element, we need reference to "final-form" instance
         ,

package/package.json

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