@itcase/forms 1.1.51 → 1.1.53

package/dist/itcase-forms.cjs.js

@@ -16,6 +16,7 @@ var Chips = require('@itcase/ui/components/Chips');
 var Choice = require('@itcase/ui/components/Choice');
 var Code = require('@itcase/ui/components/Code');
 var Icon = require('@itcase/ui/components/Icon');
+var Dadata = require('@itcase/ui/components/Dadata');
 var DatePicker = require('@itcase/ui/components/DatePicker');
 var useDevicePropsGenerator = require('@itcase/ui/hooks/useDevicePropsGenerator');
 var axios = require('axios');
@@ -27,6 +28,7 @@ var Button = require('@itcase/ui/components/Button');
 var Loader = require('@itcase/ui/components/Loader');
 var Title = require('@itcase/ui/components/Title');
 var Input = require('@itcase/ui/components/Input');
+var InputNumber = require('@itcase/ui/components/InputNumber');
 var reactImask = require('react-imask');
 var InputPassword = require('@itcase/ui/components/InputPassword');
 var Radio = require('@itcase/ui/components/Radio');
@@ -34,7 +36,6 @@ var Segmented = require('@itcase/ui/components/Segmented');
 var Select = require('@itcase/ui/components/Select');
 var Switch = require('@itcase/ui/components/Switch');
 var Textarea = require('@itcase/ui/components/Textarea');
-var Dadata = require('@itcase/ui/components/Dadata');
 var Group = require('@itcase/ui/components/Group');
 var Notification = require('@itcase/ui/components/Notification');
 var createDecorator = require('final-form-focus');
@@ -383,12 +384,12 @@ function FieldWrapperBase(props) {
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React__default.default.createElement(Tag, {
     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-testid": `${inputName}Field`,
+    "data-testid": `${inputName}-field`,
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React__default.default.createElement("div", {
     className: clsx__default.default('form-field__label'),
-    "data-testid": `${inputName}FieldLabel`,
+    "data-testid": `${inputName}-field-label`,
     htmlFor: id
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: labelTextSize,
@@ -398,7 +399,7 @@ function FieldWrapperBase(props) {
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__desc",
-    "data-testid": `${inputName}FieldDesc`
+    "data-testid": `${inputName}-field-desc`
   }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -415,24 +416,24 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React__default.default.createElement("div", {
     className: "form-field__message",
-    "data-testid": `${inputName}FieldMessage`
+    "data-testid": `${inputName}-field-message`
   }, isErrorState && errorMessage && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     id: `${inputName}-error`,
     className: "form-field__message-item form-field__message-item_type-error",
-    dataTestId: `${inputName}FieldMessageError`,
+    dataTestId: `${inputName}-field-message-error`,
     size: errorTextSize,
     textColor: errorTextColor,
     textWeight: errorTextWeight
   }, errorMessage), Boolean(helpText) && (!isErrorState || !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    dataTestId: `${inputName}FieldMessageHelpText`,
+    dataTestId: `${inputName}-field-message-help-text`,
     size: helpTextSize,
     textColor: isValidState ? helpTextColorSuccess : helpTextColor,
     textWeight: helpTextWeight,
     sizeMobile: helpTextSizeMobile
   }, helpText), (!isErrorState && !helpText || isErrorState && !helpText && !errorMessage) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
     className: "form-field__message-item form-field__message-item_type_help-text",
-    dataTestId: `${inputName}FieldMessageHelpText`,
+    dataTestId: `${inputName}field-message-help-text`,
     size: messageTextSize
   }, '\u00A0')), after);
 }
@@ -898,6 +899,102 @@ const FormFieldCustom = /*#__PURE__*/React__default.default.memo(function FormFi
   });
 });
 
+const defaultDadataInputProps = {
+  appearance: 'defaultPrimary sizeM solid rounded',
+  // useValidationAppearanceInputProps
+  // Error
+  errorAppearance: 'errorPrimary sizeM solid rounded',
+  // Success
+  successAppearance: 'successPrimary sizeM solid rounded',
+  // Required
+  requiredAppearance: 'requirePrimary sizeM solid rounded'
+};
+
+const FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function FormFieldDadataInput(props) {
+  const {
+    name,
+    initialValue,
+    isDisabled,
+    classNameGroupItem,
+    fieldProps,
+    inputProps,
+    parse,
+    showMessage,
+    token,
+    isRequired,
+    onDadataAutocomplete
+  } = props;
+  if (process.env.NODE_ENV === 'development') {
+    const hint = `Check your form config at field "${name}".`;
+    if (!token) {
+      const message = `FormFieldDadataInput: 'token' prop is missing, instead got ${token}.`;
+      throw new Error(message + '\n' + hint);
+    }
+    if (!onDadataAutocomplete) {
+      const message = `FormFieldDadataInput: 'onDadataAutocomplete' prop is missing, instead got ${onDadataAutocomplete}.`;
+      throw new Error(message + '\n' + hint);
+    }
+  }
+  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 {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      successKey,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps,
+      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_input-dadata', 'form__item_input-dadata', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      isErrorState: isErrorState,
+      metaError: meta.error,
+      isDisabled: isDisabled,
+      fieldClassName: "form-dadata",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      showMessage: showMessage,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Dadata.Dadata
+    // dataTestId={`${input.name}FieldInputDadata`}
+    // className={clsx(
+    //   meta.active && 'input-dadata_state_focus',
+    //   meta.error && meta.touched && `input-dadata_state_${errorKey}`,
+    // )}
+    , {
+      input: input,
+      inputProps: updatedInputProps,
+      meta: meta,
+      setValue: onDadataAutocomplete,
+      token: token
+    }));
+  });
+});
+
 const defaultDatepickerProps = {
   appearance: 'surfacePrimary sizeS',
   dateFormat: 'dd/MM/yyyy - HH:mm',
@@ -1725,7 +1822,7 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
       className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && `input_state_${errorKey}`),
-      dataTestId: `${input.name}FieldInput`,
+      dataTestId: `${input.name}-field-input`,
       type: "text",
       name: input.name,
       autoComplete: "nope",
@@ -1747,6 +1844,77 @@ const FormFieldInput = /*#__PURE__*/React__default.default.memo(function FormFie
   });
 });
 
+const defaultInputNumberProps = {
+  appearance: 'surfaceSecondary sizeM solid rounded',
+  width: 'fill'
+};
+
+const FormFieldInputNumber = /*#__PURE__*/React__default.default.memo(function FormFieldInputNumber(props) {
+  const {
+    type = 'custom',
+    name,
+    initialValue,
+    classNameGroupItem,
+    fieldProps = {},
+    inputProps = {},
+    parse,
+    showMessage,
+    isDisabled,
+    isRequired,
+    onChange
+  } = props;
+  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
+    name: name,
+    initialValue: initialValue,
+    parse: parse
+  }, function Render({
+    input,
+    meta
+  }) {
+    const onChangeField = React.useCallback(event => {
+      input.onChange(event);
+      if (onChange) {
+        onChange(event.target.value);
+      }
+    }, [onChange, input.onChange]);
+    const {
+      errorKey,
+      errorMessage,
+      isErrorState,
+      isValidState
+    } = useFieldValidationState({
+      fieldProps: fieldProps,
+      input: input,
+      meta: meta
+    });
+    const updatedInputProps = useValidationAppearanceInputProps({
+      inputProps: inputProps
+    });
+    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
+      className: clsx__default.default('form-field_input-number', 'form__item_input-number', classNameGroupItem),
+      errorKey: errorKey,
+      errorMessage: errorMessage,
+      fieldClassName: "form-input-number",
+      inputName: input.name,
+      inputValue: input.value || '',
+      metaActive: meta.active,
+      metaError: meta.error,
+      showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
+      isRequired: isRequired,
+      isValidState: isValidState
+    }, fieldProps), /*#__PURE__*/React__default.default.createElement(InputNumber.InputNumber, Object.assign({
+      className: clsx__default.default(meta.active && 'input_state_focus', (meta.submitFailed || meta.touched) && meta.error && `input_state_${errorKey}`),
+      dataTestId: `${input.name}FieldInputNumber`,
+      type: type,
+      name: input.name,
+      value: input.value || 0,
+      onChange: onChangeField
+    }, updatedInputProps)));
+  });
+});
+
 const FormFieldMaskedInput = /*#__PURE__*/React__default.default.memo(function FormFieldMaskedInput(props) {
   const {
     name,
@@ -1922,7 +2090,7 @@ const FormFieldPassword = /*#__PURE__*/React__default.default.memo(function Form
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React__default.default.createElement(InputPassword.InputPassword, Object.assign({
       className: clsx__default.default(meta.active && 'input-password_state_focus', meta.error && meta.touched && `input-password_state_${errorKey}`),
-      dataTestId: `${input.name}FieldInputPassword`,
+      dataTestId: `${input.name}-field-input-password`,
       name: input.name,
       autoComplete: "nope",
       value: input.value || '',
@@ -2348,11 +2516,11 @@ const defaultTextareaProps = {
 const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function FormFieldTextarea(props) {
   const {
     name,
-    isDisabled,
     classNameGroupItem,
     fieldProps = {},
     inputProps = {},
     showMessage,
+    isDisabled,
     isRequired
   } = props;
   return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
@@ -2371,8 +2539,8 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2387,23 +2555,23 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
       className: clsx__default.default('form-field_textarea', 'form__item_textarea', classNameGroupItem),
       errorKey: errorKey,
       errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
       fieldClassName: 'form-textarea',
       inputName: input.name,
       inputValue: input.value,
       metaActive: meta.active,
+      metaError: meta.error,
       showMessage: showMessage,
+      isDisabled: isDisabled,
+      isErrorState: isErrorState,
       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}`),
+      dataTestId: `${input.name}-field-textarea`,
       name: input.name,
-      isDisabled: isDisabled,
       autoComplete: "nope",
       value: input.value || '',
+      isDisabled: isDisabled,
       onBlur: input.onBlur,
       onChange: input.onChange,
       onFocus: input.onFocus
@@ -2411,108 +2579,12 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
   });
 });
 
-const defaultDadataInputProps = {
-  appearance: 'defaultPrimary sizeM solid rounded',
-  // useValidationAppearanceInputProps
-  // Error
-  errorAppearance: 'errorPrimary sizeM solid rounded',
-  // Success
-  successAppearance: 'successPrimary sizeM solid rounded',
-  // Required
-  requiredAppearance: 'requirePrimary sizeM solid rounded'
-};
-
-const FormFieldDadataInput = /*#__PURE__*/React__default.default.memo(function FormFieldDadataInput(props) {
-  const {
-    name,
-    initialValue,
-    isDisabled,
-    classNameGroupItem,
-    fieldProps,
-    inputProps,
-    parse,
-    showMessage,
-    token,
-    isRequired,
-    onDadataAutocomplete
-  } = props;
-  if (process.env.NODE_ENV === 'development') {
-    const hint = `Check your form config at field "${name}".`;
-    if (!token) {
-      const message = `FormFieldDadataInput: 'token' prop is missing, instead got ${token}.`;
-      throw new Error(message + '\n' + hint);
-    }
-    if (!onDadataAutocomplete) {
-      const message = `FormFieldDadataInput: 'onDadataAutocomplete' prop is missing, instead got ${onDadataAutocomplete}.`;
-      throw new Error(message + '\n' + hint);
-    }
-  }
-  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 {
-      errorKey,
-      errorMessage,
-      isErrorState,
-      successKey,
-      isValidState
-    } = useFieldValidationState({
-      fieldProps: fieldProps,
-      input: input,
-      meta: meta
-    });
-    const updatedInputProps = useValidationAppearanceInputProps({
-      inputProps: inputProps,
-      validationStateKey: isErrorState ? errorKey : isValidState ? successKey : null
-    });
-    return /*#__PURE__*/React__default.default.createElement(FieldWrapper, Object.assign({
-      className: clsx__default.default('form-field_input-dadata', 'form__item_input-dadata', classNameGroupItem),
-      errorKey: errorKey,
-      errorMessage: errorMessage,
-      isErrorState: isErrorState,
-      metaError: meta.error,
-      isDisabled: isDisabled,
-      fieldClassName: "form-dadata",
-      inputName: input.name,
-      inputValue: input.value || '',
-      metaActive: meta.active,
-      showMessage: showMessage,
-      isRequired: isRequired,
-      isValidState: isValidState
-    }, fieldProps), /*#__PURE__*/React__default.default.createElement(Dadata.Dadata
-    // dataTestId={`${input.name}FieldInputDadata`}
-    // className={clsx(
-    //   meta.active && 'input-dadata_state_focus',
-    //   meta.error && meta.touched && `input-dadata_state_${errorKey}`,
-    // )}
-    , {
-      input: input,
-      inputProps: updatedInputProps,
-      meta: meta,
-      setValue: onDadataAutocomplete,
-      token: token
-    }));
-  });
-});
-
 const formTypes = {
+  custom: 'custom',
   password: 'password',
   code: 'code',
   text: 'text',
   textarea: 'textarea',
-  custom: 'custom',
   checkbox: 'checkbox',
   chips: 'chips',
   choice: 'choice',
@@ -2521,6 +2593,7 @@ const formTypes = {
   dateRangePicker: 'dateRangePicker',
   fileInput: 'fileInput',
   group: 'group',
+  inputNumber: 'inputNumber',
   maskedInput: 'maskedInput',
   radioGroup: 'radioGroup',
   segmented: 'segmented',
@@ -2625,6 +2698,12 @@ function generateField(field, config, props) {
           key: config.key
         }, field, props));
       }
+    case formTypes.inputNumber:
+      {
+        return /*#__PURE__*/React__default.default.createElement(FormFieldInputNumber, Object.assign({
+          key: config.key
+        }, field, props));
+      }
     case formTypes.group:
       {
         return /*#__PURE__*/React__default.default.createElement(FormBlockGroup, Object.assign({
@@ -2762,6 +2841,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     dataTestId,
     dataTour,
     type,
+    name,
     initialValues,
     initialValuesEqual,
     config,
@@ -2812,6 +2892,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonAppearance,
     primaryButtonFill,
     primaryButtonFillHover,
+    primaryButtonHtmlType,
     primaryButtonIsDisabled,
     primaryButtonIsLoading,
     primaryButtonLabel,
@@ -2819,6 +2900,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    primarySecondaryHtmlType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonAppearance,
@@ -2877,14 +2959,14 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     }) => {
       return /*#__PURE__*/React__default.default.createElement("form", {
         className: clsx__default.default(className, 'form', type && `form_type_${type}`, widthClass && `width_${widthClass}`, heightClass && `height_${heightClass}`, 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
+        name: formName || 'form'
         // We no need set reference to html element, we need reference to "final-form" instance
         ,
         ref: () => onRefFormInstance(form),
         autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
         autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
         autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
-        "data-testid": dataTestId,
+        "data-testid": dataTestId || name,
         "data-tour": dataTour,
         spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
         style: formStyles,
@@ -2941,7 +3023,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
       }, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         appearance: primaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdPrimaryButton,
+        dataTestId: dataTestIdPrimaryButton || (name ? `${name}-primary` : 'form-primary'),
         dataTour: dataTourPrimaryButton,
         width: "fill",
         size: primaryButtonSize,
@@ -2951,12 +3033,13 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextColor: primaryButtonLabelTextColor,
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
+        htmlType: primaryButtonHtmlType || 'submit',
         loading: primaryButtonIsLoading,
         isDisabled: primaryButtonIsDisabled
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
         appearance: secondaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton || (name ? `${name}-secondary` : 'form-secondary'),
         dataTour: dataTourSecondaryButton,
         width: "fill",
         size: secondaryButtonSize,
@@ -2966,6 +3049,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
+        htmlType: primarySecondaryHtmlType,
         loading: secondaryButtonIsLoading,
         isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton
@@ -3272,6 +3356,7 @@ exports.FormFieldDadataInput = FormFieldDadataInput;
 exports.FormFieldDatePicker = FormFieldDatePicker;
 exports.FormFieldFileInput = FormFieldFileInput;
 exports.FormFieldInput = FormFieldInput;
+exports.FormFieldInputNumber = FormFieldInputNumber;
 exports.FormFieldMaskedInput = FormFieldMaskedInput;
 exports.FormFieldPassword = FormFieldPassword;
 exports.FormFieldRadioGroup = FormFieldRadioGroup;
@@ -3294,6 +3379,7 @@ exports.defaultFieldSizeM = defaultFieldSizeM;
 exports.defaultFieldSizeS = defaultFieldSizeS;
 exports.defaultFieldSizeXL = defaultFieldSizeXL;
 exports.defaultGroupProps = defaultGroupProps;
+exports.defaultInputNumberProps = defaultInputNumberProps;
 exports.defaultInputProps = defaultInputProps;
 exports.defaultPasswordProps = defaultPasswordProps;
 exports.defaultRadioProps = defaultRadioProps;