@itcase/forms 1.1.26 → 1.1.27

package/dist/css/form/Field/Password/FormFieldPassword.css

@@ -1,5 +1,3 @@
-/* @import './css/form-password.css'; */
-
 :root {
   --password-success-border: var(--color-success-border-primary);
   --password-success-border-hover: var(--color-surface-border-quaternary);

package/dist/css/form/FormField/FormField.css

@@ -3,13 +3,16 @@
     &-inner {
       position: relative;
       display: flex;
+      & > input {
+        width: 100%;
+      }
     }
   }
   &__message {
     &-item {
-      height: var(--form-field-helptext-height);
-      line-height: var(--form-field-helptext-line-height);
-      padding: var(--form-field-helptext-padding);
+      height: var(--form-field-help-text-height);
+      line-height: var(--form-field-help-text-line-height);
+      padding: var(--form-field-help-text-padding);
       display: block;
     }
   }
@@ -24,7 +27,7 @@
 }
 .form {
   &^&-field_type_float {
-    padding: var(--form-field_type_float-padding, 12px 0 12px 0);
+    padding: 12px 0 12px 0;
     margin: var(--form-field_type_float-margin);
     position: relative;
     gap: var(--form-field_type_float-gap);
@@ -42,11 +45,16 @@
           opacity: 100%;
         }
       }
+      & .textarea {
+        &::placeholder {
+          opacity: 100%;
+        }
+      }      
     }
     & .form {
       &-field {
         &__label {
-          background: var(--color-surface-fill-primary);
+          background: #fff;
           padding: 0 4px;
           position: absolute;
           display: flex;
@@ -58,7 +66,7 @@
           transform-origin: top left;
         }
         &__message {
-          padding: var(--form-field-type-float-message-padding, 0 0 0 12px);
+          padding: 0 0 0 12px;
         }
       }
     }
@@ -68,15 +76,21 @@
         opacity: 0%;
       }
     }
+    & .textarea {
+      &::placeholder {
+        transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
+        opacity: 0%;
+      }
+    }
   }
 }
 .form-field {
   &_type {
     &_classic {
-      padding: var(--form-field_type_normal-padding);
-      margin: var(--form-field_type_normal-margin);
+      padding: var(--form-field_type_classic-padding);
+      margin: var(--form-field_type_classic-margin);
       position: relative;
-      gap: var(--form-field_type_normal-gap);
+      gap: var(--form-field_type_classic-gap);
     }
   }
 }

package/dist/itcase-forms.cjs.js

@@ -27,6 +27,7 @@ var Code = require('@itcase/ui/components/Code');
 var Icon = require('@itcase/ui/components/Icon');
 var DatePicker = require('@itcase/ui/components/DatePicker');
 var Input = require('@itcase/ui/components/Input');
+var _default = require('@itcase/icons/default');
 var Segmented = require('@itcase/ui/components/Segmented');
 var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
@@ -1582,33 +1583,13 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
     clearIconShape,
     clearIconSize,
     fieldProps = {},
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps = {},
     parse,
     showMessage,
-    isPassword,
     isRequired,
-    isRevealable,
     onChange,
     onClickClearIcon
   } = props;
-  const [isRevealed, setIsRevealed] = React$1.useState(false);
-  const inputType = React$1.useMemo(() => {
-    if (isPassword) {
-      return isRevealed ? 'text' : 'password';
-    } else {
-      return 'text';
-    }
-  }, [isRevealed, isPassword]);
-  const onClickIconReveal = React$1.useCallback(event => {
-    event.preventDefault();
-    setIsRevealed(prev => !prev);
-  }, []);
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
     name: name,
     initialValue: initialValue,
@@ -1644,7 +1625,6 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
     return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
       className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
@@ -1652,7 +1632,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: isRevealable ? 'form-password' : 'form-input',
+      fieldClassName: "form-input",
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
@@ -1662,7 +1642,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
       dataTestId: `${input.name}FieldInput`,
       className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      type: inputType,
+      type: "text",
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
@@ -1670,16 +1650,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, updatedInputProps)), isRevealable && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
-      className: "form-field__icon",
-      size: iconSize,
-      iconFill: iconFill,
-      iconFillHover: iconFillHover,
-      imageSrc: isRevealed && isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      shape: iconShape,
-      SvgImage: isRevealed && !isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      onClick: onClickIconReveal
-    }), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
@@ -1692,6 +1663,110 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
   });
 });
 
+const defaultPasswordProps = {
+  appearance: 'sizeM defaultSecondary solid rounded',
+  iconRevealableHide: _default.icons24.View.HideValue,
+  iconRevealableShow: _default.icons24.View.ShowValue,
+  iconFill: 'surfaceItemQuaternary'
+};
+
+const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function FormFieldPassword(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    iconFill,
+    iconFillHover,
+    iconRevealableHide,
+    iconRevealableShow,
+    iconShape,
+    iconSize,
+    inputProps,
+    parse,
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  const [isRevealed, setIsRevealed] = React$1.useState(false);
+  const inputType = React$1.useMemo(() => {
+    return isRevealed ? 'text' : 'password';
+  }, [isRevealed]);
+  const onClickIconReveal = React$1.useCallback(event => {
+    event.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, []);
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue,
+    parse: parse
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const onChangeField = React$1.useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.value, input.name);
+      }
+    }, [onChange, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-password",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
+      dataTestId: `${input.name}FieldInputPassword`,
+      className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      type: inputType,
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)), /*#__PURE__*/React__default.default.createElement(Icon.Icon, {
+      className: "form-field__icon",
+      size: inputProps.iconSize,
+      iconFill: inputProps.iconFill,
+      SvgImage: isRevealed ? inputProps.iconRevealableHide : inputProps.iconRevealableShow,
+      onClick: onClickIconReveal
+    }));
+  });
+});
+
 const defaultSegmentedProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
@@ -2027,10 +2102,12 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
+      dataTestId: `${input.name}FieldTextarea`,
+      className: clsx__default.default(meta.active && 'textarea_state_focus', meta.error && meta.touched && `textarea_state_${errorKey}`),
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
-      value: input.value,
+      value: input.value || '',
       onBlur: input.onBlur,
       onChange: input.onChange,
       onFocus: input.onFocus
@@ -2398,6 +2475,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.password:
+      {
+        return /*#__PURE__*/React__default.default.createElement(FormFieldPassword, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React__default.default.createElement(FormFieldTextarea, Object.assign({
@@ -3021,6 +3104,7 @@ exports.FormFieldCustom = FormFieldCustom;
 exports.FormFieldDatePicker = FormFieldDatePicker;
 exports.FormFieldInput = FormFieldInput;
 exports.FormFieldMaskedInput = FormFieldMaskedInput;
+exports.FormFieldPassword = FormFieldPassword;
 exports.FormFieldSegmented = FormFieldSegmented;
 exports.FormFieldSelect = FormFieldSelect;
 exports.FormFieldSwitch = FormFieldSwitch;
@@ -3039,6 +3123,7 @@ exports.defaultFieldSizeM = defaultFieldSizeM;
 exports.defaultFieldSizeXL = defaultFieldSizeXL;
 exports.defaultGroupProps = defaultGroupProps;
 exports.defaultInputProps = defaultInputProps;
+exports.defaultPasswordProps = defaultPasswordProps;
 exports.defaultRadioProps = defaultRadioProps;
 exports.defaultSegmentedProps = defaultSegmentedProps;
 exports.defaultSelectProps = defaultSelectProps;

package/dist/itcase-forms.esm.js

@@ -26,6 +26,7 @@ import { Code } from '@itcase/ui/components/Code';
 import { Icon } from '@itcase/ui/components/Icon';
 import { DatePickerInput } from '@itcase/ui/components/DatePicker';
 import { Input } from '@itcase/ui/components/Input';
+import { icons24 } from '@itcase/icons/default';
 import { Segmented } from '@itcase/ui/components/Segmented';
 import { Select } from '@itcase/ui/components/Select';
 import { Switch } from '@itcase/ui/components/Switch';
@@ -1571,33 +1572,13 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
     clearIconShape,
     clearIconSize,
     fieldProps = {},
-    iconFill,
-    iconFillHover,
-    iconRevealableHide,
-    iconRevealableShow,
-    iconShape,
-    iconSize,
     inputProps = {},
     parse,
     showMessage,
-    isPassword,
     isRequired,
-    isRevealable,
     onChange,
     onClickClearIcon
   } = props;
-  const [isRevealed, setIsRevealed] = useState(false);
-  const inputType = useMemo(() => {
-    if (isPassword) {
-      return isRevealed ? 'text' : 'password';
-    } else {
-      return 'text';
-    }
-  }, [isRevealed, isPassword]);
-  const onClickIconReveal = useCallback(event => {
-    event.preventDefault();
-    setIsRevealed(prev => !prev);
-  }, []);
   return /*#__PURE__*/React$1.createElement(Field, {
     name: name,
     initialValue: initialValue,
@@ -1633,7 +1614,6 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
       inputProps: inputProps,
       validationStateKey: isErrorState ? errorKey : 'success'
     });
-    const isIconRevealableString = typeof iconRevealableHide === 'string' && typeof iconRevealableShow === 'string';
     return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
       className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
       errorKey: errorKey,
@@ -1641,7 +1621,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
       isErrorState: isErrorState,
       metaError: meta.error,
       isDisabled: isDisabled,
-      fieldClassName: isRevealable ? 'form-password' : 'form-input',
+      fieldClassName: "form-input",
       inputName: input.name,
       inputValue: input.value || '',
       metaActive: meta.active,
@@ -1651,7 +1631,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
     }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
       dataTestId: `${input.name}FieldInput`,
       className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      type: inputType,
+      type: "text",
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
@@ -1659,16 +1639,7 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
       onBlur: input.onBlur,
       onChange: onChangeField,
       onFocus: input.onFocus
-    }, updatedInputProps)), isRevealable && /*#__PURE__*/React$1.createElement(Icon, {
-      className: "form-field__icon",
-      size: iconSize,
-      iconFill: iconFill,
-      iconFillHover: iconFillHover,
-      imageSrc: isRevealed && isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      shape: iconShape,
-      SvgImage: isRevealed && !isIconRevealableString ? iconRevealableHide : iconRevealableShow,
-      onClick: onClickIconReveal
-    }), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
+    }, updatedInputProps)), clearIcon && /*#__PURE__*/React$1.createElement(Icon, {
       className: "form-field__icon",
       size: clearIconSize,
       iconFill: clearIconFill,
@@ -1681,6 +1652,110 @@ const FormFieldInput = /*#__PURE__*/React$1.memo(function FormFieldInput(props)
   });
 });
 
+const defaultPasswordProps = {
+  appearance: 'sizeM defaultSecondary solid rounded',
+  iconRevealableHide: icons24.View.HideValue,
+  iconRevealableShow: icons24.View.ShowValue,
+  iconFill: 'surfaceItemQuaternary'
+};
+
+const FormFieldPassword = /*#__PURE__*/React$1.memo(function FormFieldPassword(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    iconFill,
+    iconFillHover,
+    iconRevealableHide,
+    iconRevealableShow,
+    iconShape,
+    iconSize,
+    inputProps,
+    parse,
+    showMessage,
+    isRequired,
+    onChange
+  } = props;
+  const [isRevealed, setIsRevealed] = useState(false);
+  const inputType = useMemo(() => {
+    return isRevealed ? 'text' : 'password';
+  }, [isRevealed]);
+  const onClickIconReveal = useCallback(event => {
+    event.preventDefault();
+    setIsRevealed(prev => !prev);
+  }, []);
+  return /*#__PURE__*/React$1.createElement(Field, {
+    name: name,
+    initialValue: initialValue,
+    parse: parse
+  }, function Render({
+    input,
+    meta
+  }) {
+    /** Note:
+     * Create "Render" function by "eslint-react-hooks/rules-of-hooks":
+     * React Hooks cannot be called inside a callback.
+     * React Hooks must be called in a React function component or a
+     * custom React Hook function.
+     */
+
+    const onChangeField = useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.value, input.name);
+      }
+    }, [onChange, input.onChange]);
+    const {
+      isErrorState,
+      isValidState,
+      errorKey,
+      errorMessage
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : 'success'
+    });
+    return /*#__PURE__*/React$1.createElement(FieldWrapper, Object.assign({
+      className: clsx('form-field_type_input', 'form__item_type_input', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-password",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React$1.createElement(Input, Object.assign({
+      dataTestId: `${input.name}FieldInputPassword`,
+      className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
+      type: inputType,
+      name: input.name,
+      isDisabled: isDisabled,
+      autoComplete: "nope",
+      value: input.value || '',
+      onBlur: input.onBlur,
+      onChange: onChangeField,
+      onFocus: input.onFocus
+    }, updatedInputProps)), /*#__PURE__*/React$1.createElement(Icon, {
+      className: "form-field__icon",
+      size: inputProps.iconSize,
+      iconFill: inputProps.iconFill,
+      SvgImage: isRevealed ? inputProps.iconRevealableHide : inputProps.iconRevealableShow,
+      onClick: onClickIconReveal
+    }));
+  });
+});
+
 const defaultSegmentedProps = {
   appearance: 'defaultPrimary sizeM solid rounded',
   width: 'fill',
@@ -2016,10 +2091,12 @@ const FormFieldTextarea = /*#__PURE__*/React$1.memo(function FormFieldTextarea(p
       isRequired: isRequired,
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React$1.createElement(Textarea, Object.assign({
+      dataTestId: `${input.name}FieldTextarea`,
+      className: clsx(meta.active && 'textarea_state_focus', meta.error && meta.touched && `textarea_state_${errorKey}`),
       name: input.name,
       isDisabled: isDisabled,
       autoComplete: "nope",
-      value: input.value,
+      value: input.value || '',
       onBlur: input.onBlur,
       onChange: input.onChange,
       onFocus: input.onFocus
@@ -2387,6 +2464,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.password:
+      {
+        return /*#__PURE__*/React$1.createElement(FormFieldPassword, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.textarea:
       {
         return /*#__PURE__*/React$1.createElement(FormFieldTextarea, Object.assign({
@@ -2984,4 +3067,4 @@ const getErrorsForFinalForm = error => {
   return formErrors;
 };
 
-export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeM, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };
+export { DEFAULT_MESSAGES_FIELDS, FieldWrapper, FieldWrapperBase, FileInput, FinalForm, FormBlockGroup, FormFieldCheckbox, FormFieldChips, FormFieldChoice, FormFieldCode, FormFieldCustom, FormFieldDatePicker, FormFieldInput, FormFieldMaskedInput, FormFieldPassword, FormFieldSegmented, FormFieldSelect, FormFieldSwitch, FormFieldTextarea, RadioGroup, addRequiredFieldsParamToSchema, dateValidation, defaultCheckboxProps, defaultChipsProps, defaultChoiceProps, defaultCodeProps, defaultDatepickerProps, defaultDropzoneProps, defaultFieldProps, defaultFieldSizeM, defaultFieldSizeXL, defaultGroupProps, defaultInputProps, defaultPasswordProps, defaultRadioProps, defaultSegmentedProps, defaultSelectProps, defaultSwitchProps, defaultTextareaProps, emailValidation, focusOnError, focusOnErrorDecorator, formTypes, generateField, getErrorsForFinalForm, parseNumericField, phoneValidation, sendFormDataToServer, setErrorsMutator, useYupValidationSchema };

package/package.json

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