@itcase/forms 1.1.44 → 1.1.45

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

@@ -115,12 +115,8 @@
     &_sticky {
       ^^&__title {
         position: sticky;
-        top: 0;
-        z-index: 100;
-      }
-      ^^&__wrapper {
-        overflow: scroll;
-        flex: 1;
+        top: 24px;
+        z-index: 5;
       }
     }
   }

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({

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({

package/package.json

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