@itcase/forms 1.1.51 → 1.1.52

package/dist/itcase-forms.cjs.js

@@ -383,12 +383,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 +398,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 +415,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);
 }
@@ -1725,7 +1725,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",
@@ -1922,7 +1922,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 +2348,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 +2371,8 @@ const FormFieldTextarea = /*#__PURE__*/React__default.default.memo(function Form
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2387,23 +2387,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
@@ -2762,6 +2762,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     dataTestId,
     dataTour,
     type,
+    name,
     initialValues,
     initialValuesEqual,
     config,
@@ -2812,6 +2813,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonAppearance,
     primaryButtonFill,
     primaryButtonFillHover,
+    primaryButtonHtmlType,
     primaryButtonIsDisabled,
     primaryButtonIsLoading,
     primaryButtonLabel,
@@ -2819,6 +2821,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    primarySecondaryHtmlType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonAppearance,
@@ -2877,14 +2880,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 +2944,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 +2954,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 +2970,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
+        htmlType: primarySecondaryHtmlType,
         loading: secondaryButtonIsLoading,
         isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton

package/dist/itcase-forms.esm.js

@@ -372,12 +372,12 @@ function FieldWrapperBase(props) {
   const errorTextWeight = props[`${errorKey}MessageTextWeight`];
   return /*#__PURE__*/React.createElement(Tag, {
     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-testid": `${inputName}Field`,
+    "data-testid": `${inputName}-field`,
     "data-tour": dataTour,
     style: formFieldStyles
   }, before, (label || labelHidden) && /*#__PURE__*/React.createElement("div", {
     className: clsx('form-field__label'),
-    "data-testid": `${inputName}FieldLabel`,
+    "data-testid": `${inputName}-field-label`,
     htmlFor: id
   }, /*#__PURE__*/React.createElement(Text, {
     size: labelTextSize,
@@ -387,7 +387,7 @@ function FieldWrapperBase(props) {
     sizeTablet: labelTextSizeTablet
   }, label, labelHidden && '\u00A0')), desc && /*#__PURE__*/React.createElement("div", {
     className: "form-field__desc",
-    "data-testid": `${inputName}FieldDesc`
+    "data-testid": `${inputName}-field-desc`
   }, /*#__PURE__*/React.createElement(Text, {
     size: descTextSize,
     textColor: descTextColor,
@@ -404,24 +404,24 @@ function FieldWrapperBase(props) {
     fill: dividerFill
   })), showMessage && /*#__PURE__*/React.createElement("div", {
     className: "form-field__message",
-    "data-testid": `${inputName}FieldMessage`
+    "data-testid": `${inputName}-field-message`
   }, isErrorState && errorMessage && /*#__PURE__*/React.createElement(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.createElement(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.createElement(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);
 }
@@ -1714,7 +1714,7 @@ const FormFieldInput = /*#__PURE__*/React.memo(function FormFieldInput(props) {
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
       className: clsx(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",
@@ -1911,7 +1911,7 @@ const FormFieldPassword = /*#__PURE__*/React.memo(function FormFieldPassword(pro
       isValidState: isValidState
     }, fieldProps), /*#__PURE__*/React.createElement(InputPassword, Object.assign({
       className: clsx(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 || '',
@@ -2337,11 +2337,11 @@ const defaultTextareaProps = {
 const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(props) {
   const {
     name,
-    isDisabled,
     classNameGroupItem,
     fieldProps = {},
     inputProps = {},
     showMessage,
+    isDisabled,
     isRequired
   } = props;
   return /*#__PURE__*/React.createElement(Field, {
@@ -2360,8 +2360,8 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
     const {
       errorKey,
       errorMessage,
-      isErrorState,
       successKey,
+      isErrorState,
       isValidState
     } = useFieldValidationState({
       fieldProps: fieldProps,
@@ -2376,23 +2376,23 @@ const FormFieldTextarea = /*#__PURE__*/React.memo(function FormFieldTextarea(pro
       className: clsx('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.createElement(Textarea, Object.assign({
-      dataTestId: `${input.name}FieldTextarea`,
       className: clsx(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
@@ -2751,6 +2751,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     dataTestId,
     dataTour,
     type,
+    name,
     initialValues,
     initialValuesEqual,
     config,
@@ -2801,6 +2802,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     primaryButtonAppearance,
     primaryButtonFill,
     primaryButtonFillHover,
+    primaryButtonHtmlType,
     primaryButtonIsDisabled,
     primaryButtonIsLoading,
     primaryButtonLabel,
@@ -2808,6 +2810,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     primaryButtonLabelTextColor,
     primaryButtonLabelTextWeight,
     primaryButtonSize,
+    primarySecondaryHtmlType,
     renderFieldsWrapper = wrapperChildren => wrapperChildren,
     secondaryButton,
     secondaryButtonAppearance,
@@ -2866,14 +2869,14 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
     }) => {
       return /*#__PURE__*/React.createElement("form", {
         className: clsx(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,
@@ -2930,7 +2933,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
       }, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         appearance: primaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdPrimaryButton,
+        dataTestId: dataTestIdPrimaryButton || (name ? `${name}-primary` : 'form-primary'),
         dataTour: dataTourPrimaryButton,
         width: "fill",
         size: primaryButtonSize,
@@ -2940,12 +2943,13 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: primaryButtonLabelTextColor,
         labelTextSize: primaryButtonLabelSize,
         labelTextWeight: primaryButtonLabelTextWeight,
+        htmlType: primaryButtonHtmlType || 'submit',
         loading: primaryButtonIsLoading,
         isDisabled: primaryButtonIsDisabled
       }) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
         appearance: secondaryButtonAppearance,
         className: "form__button-item",
-        dataTestId: dataTestIdSecondaryButton,
+        dataTestId: dataTestIdSecondaryButton || (name ? `${name}-secondary` : 'form-secondary'),
         dataTour: dataTourSecondaryButton,
         width: "fill",
         size: secondaryButtonSize,
@@ -2955,6 +2959,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
         labelTextColor: secondaryButtonLabelTextColor,
         labelTextSize: secondaryButtonLabelSize,
         labelTextWeight: secondaryButtonLabelTextWeight,
+        htmlType: primarySecondaryHtmlType,
         loading: secondaryButtonIsLoading,
         isDisabled: secondaryButtonIsDisabled,
         onClick: onClickSecondaryButton

package/package.json

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