@itcase/forms 1.0.82 → 1.0.83
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/css/form/FormField/FormField.css +1 -8
- package/dist/itcase-forms.cjs.js +117 -113
- package/dist/itcase-forms.esm.js +117 -113
- package/package.json +1 -1
|
@@ -1,5 +1,3 @@
|
|
|
1
|
-
/* stylelint-disable plugin/no-unsupported-browser-features */
|
|
2
|
-
|
|
3
1
|
.form-field {
|
|
4
2
|
&__content {
|
|
5
3
|
&-inner {
|
|
@@ -25,7 +23,6 @@
|
|
|
25
23
|
right: 8px;
|
|
26
24
|
}
|
|
27
25
|
}
|
|
28
|
-
|
|
29
26
|
.form {
|
|
30
27
|
&-field {
|
|
31
28
|
&_type_code {
|
|
@@ -35,10 +32,9 @@
|
|
|
35
32
|
}
|
|
36
33
|
}
|
|
37
34
|
}
|
|
38
|
-
|
|
39
35
|
.form {
|
|
40
36
|
&^&-field_type_float {
|
|
41
|
-
padding: var(--form-field_type_float-padding);
|
|
37
|
+
padding: var(--form-field_type_float-padding, 12px 0 12px 0);
|
|
42
38
|
margin: var(--form-field_type_float-margin);
|
|
43
39
|
position: relative;
|
|
44
40
|
gap: var(--form-field_type_float-gap);
|
|
@@ -84,7 +80,6 @@
|
|
|
84
80
|
}
|
|
85
81
|
}
|
|
86
82
|
}
|
|
87
|
-
|
|
88
83
|
.form-field {
|
|
89
84
|
&_type {
|
|
90
85
|
&_normal {
|
|
@@ -95,7 +90,6 @@
|
|
|
95
90
|
}
|
|
96
91
|
}
|
|
97
92
|
}
|
|
98
|
-
|
|
99
93
|
.form-field {
|
|
100
94
|
&_state {
|
|
101
95
|
&_hidden {
|
|
@@ -105,7 +99,6 @@
|
|
|
105
99
|
}
|
|
106
100
|
}
|
|
107
101
|
}
|
|
108
|
-
|
|
109
102
|
.form-field {
|
|
110
103
|
&_state {
|
|
111
104
|
&_disabled {
|
package/dist/itcase-forms.cjs.js
CHANGED
|
@@ -2780,19 +2780,48 @@ const sendFormDataToServer = async (url, data) => {
|
|
|
2780
2780
|
|
|
2781
2781
|
const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalForm(props, ref) {
|
|
2782
2782
|
const {
|
|
2783
|
+
isLoading,
|
|
2784
|
+
additionalProps,
|
|
2785
|
+
after,
|
|
2786
|
+
before,
|
|
2787
|
+
buttonDirection,
|
|
2788
|
+
buttonFill,
|
|
2789
|
+
buttonGap,
|
|
2790
|
+
buttonJustifyContent,
|
|
2791
|
+
buttonPadding,
|
|
2783
2792
|
className,
|
|
2784
|
-
type,
|
|
2785
|
-
initialValues,
|
|
2786
|
-
initialValuesEqual,
|
|
2787
2793
|
config,
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
|
|
2794
|
+
dataTestId,
|
|
2795
|
+
dataTestIdButtons,
|
|
2796
|
+
dataTestIdPrimaryButton,
|
|
2797
|
+
dataTestIdSecondaryButton,
|
|
2798
|
+
dataTestIdTertiaryButton,
|
|
2799
|
+
dataTour,
|
|
2800
|
+
dataTourButtons,
|
|
2801
|
+
dataTourPrimaryButton,
|
|
2802
|
+
dataTourSecondaryButton,
|
|
2803
|
+
dataTourTertiaryButton,
|
|
2792
2804
|
description,
|
|
2793
2805
|
descriptionSize,
|
|
2794
2806
|
descriptionTextColor,
|
|
2795
2807
|
descriptionTextWeight,
|
|
2808
|
+
disableFieldsAutoComplete,
|
|
2809
|
+
fieldsGap,
|
|
2810
|
+
formName,
|
|
2811
|
+
groupGap,
|
|
2812
|
+
initialValues,
|
|
2813
|
+
initialValuesEqual,
|
|
2814
|
+
language,
|
|
2815
|
+
loader,
|
|
2816
|
+
loaderFill,
|
|
2817
|
+
loaderItemFill,
|
|
2818
|
+
loaderShape,
|
|
2819
|
+
loaderSize,
|
|
2820
|
+
loaderText,
|
|
2821
|
+
loaderType,
|
|
2822
|
+
mutators,
|
|
2823
|
+
notificationCloseButton,
|
|
2824
|
+
notificationType,
|
|
2796
2825
|
primaryButton,
|
|
2797
2826
|
primaryButtonFill,
|
|
2798
2827
|
primaryButtonFillHover,
|
|
@@ -2801,6 +2830,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2801
2830
|
primaryButtonLabelTextColor,
|
|
2802
2831
|
primaryButtonLabelTextWeight,
|
|
2803
2832
|
primaryButtonSize,
|
|
2833
|
+
renderFieldsWrapper = wrapperChildren => wrapperChildren,
|
|
2804
2834
|
secondaryButton,
|
|
2805
2835
|
secondaryButtonFill,
|
|
2806
2836
|
secondaryButtonFillHover,
|
|
@@ -2809,6 +2839,7 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2809
2839
|
secondaryButtonLabelTextColor,
|
|
2810
2840
|
secondaryButtonLabelTextWeight,
|
|
2811
2841
|
secondaryButtonSize,
|
|
2842
|
+
set,
|
|
2812
2843
|
tertiaryButton,
|
|
2813
2844
|
tertiaryButtonFill,
|
|
2814
2845
|
tertiaryButtonFillHover,
|
|
@@ -2817,41 +2848,12 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2817
2848
|
tertiaryButtonLabelTextColor,
|
|
2818
2849
|
tertiaryButtonLabelTextWeight,
|
|
2819
2850
|
tertiaryButtonSize,
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
dataTourTertiaryButton,
|
|
2826
|
-
additionalProps,
|
|
2827
|
-
buttonDirection,
|
|
2828
|
-
buttonFill,
|
|
2829
|
-
buttonGap,
|
|
2830
|
-
buttonJustifyContent,
|
|
2831
|
-
buttonPadding,
|
|
2832
|
-
dataTestId,
|
|
2833
|
-
dataTestIdButtons,
|
|
2834
|
-
dataTour,
|
|
2835
|
-
dataTourButtons,
|
|
2836
|
-
disableFieldsAutoComplete,
|
|
2837
|
-
fieldsGap,
|
|
2838
|
-
formName,
|
|
2839
|
-
groupGap,
|
|
2840
|
-
language,
|
|
2841
|
-
loader,
|
|
2842
|
-
loaderFill,
|
|
2843
|
-
loaderItemFill,
|
|
2844
|
-
loaderSet,
|
|
2845
|
-
loaderText,
|
|
2846
|
-
mutators,
|
|
2847
|
-
notificationCloseButton,
|
|
2848
|
-
notificationType,
|
|
2849
|
-
renderFieldsWrapper = wrapperChildren => wrapperChildren,
|
|
2851
|
+
title,
|
|
2852
|
+
titleTextColor,
|
|
2853
|
+
titleTextSize,
|
|
2854
|
+
titleTextWeight,
|
|
2855
|
+
type,
|
|
2850
2856
|
validationSchema,
|
|
2851
|
-
before,
|
|
2852
|
-
after,
|
|
2853
|
-
isLoading,
|
|
2854
|
-
set,
|
|
2855
2857
|
onChangeFormValues,
|
|
2856
2858
|
onClickSecondaryButton,
|
|
2857
2859
|
onClickTertiaryButton,
|
|
@@ -2884,25 +2886,28 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2884
2886
|
wrapper: wrapperStyles
|
|
2885
2887
|
} = useStyles.useStyles(props);
|
|
2886
2888
|
return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Form, {
|
|
2889
|
+
decorators: [focusOnErrorDecorator],
|
|
2887
2890
|
initialValues: initialValues,
|
|
2888
2891
|
initialValuesEqual: initialValuesEqual,
|
|
2892
|
+
mutators: mutators,
|
|
2893
|
+
validate: validate,
|
|
2889
2894
|
render: ({
|
|
2890
|
-
submitError,
|
|
2891
2895
|
form,
|
|
2892
2896
|
handleSubmit,
|
|
2893
|
-
modifiedSinceLastSubmit
|
|
2897
|
+
modifiedSinceLastSubmit,
|
|
2898
|
+
submitError
|
|
2894
2899
|
}) => {
|
|
2895
2900
|
return /*#__PURE__*/React__default.default.createElement("form", {
|
|
2896
|
-
className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
|
|
2901
|
+
className: clsx__default.default(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
|
|
2902
|
+
// We no need set reference to html element, we need reference to "final-form" instance
|
|
2903
|
+
,
|
|
2904
|
+
ref: () => onRefFormInstance(form),
|
|
2897
2905
|
name: formName,
|
|
2898
2906
|
autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2899
2907
|
autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2900
2908
|
autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2901
2909
|
"data-test-id": dataTestId,
|
|
2902
|
-
"data-tour": dataTour
|
|
2903
|
-
// We no need set reference to html element, we need reference to "final-form" instance
|
|
2904
|
-
,
|
|
2905
|
-
ref: () => onRefFormInstance(form),
|
|
2910
|
+
"data-tour": dataTour,
|
|
2906
2911
|
spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
|
|
2907
2912
|
style: formStyles,
|
|
2908
2913
|
onSubmit: handleSubmit
|
|
@@ -2920,10 +2925,10 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2920
2925
|
className: clsx__default.default('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
|
|
2921
2926
|
}, /*#__PURE__*/React__default.default.createElement(Notification.NotificationItem, {
|
|
2922
2927
|
className: "form-notification__item",
|
|
2928
|
+
closeButton: notificationCloseButton,
|
|
2929
|
+
status: "error",
|
|
2923
2930
|
title: form.getState().submitError,
|
|
2924
2931
|
titleTextSize: "h6",
|
|
2925
|
-
status: "error",
|
|
2926
|
-
closeButton: notificationCloseButton,
|
|
2927
2932
|
set: "form"
|
|
2928
2933
|
})), onChangeFormValues && /*#__PURE__*/React__default.default.createElement(reactFinalForm.FormSpy, {
|
|
2929
2934
|
subscription: {
|
|
@@ -2940,85 +2945,105 @@ const FinalForm = /*#__PURE__*/React__default.default.forwardRef(function FinalF
|
|
|
2940
2945
|
}, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React__default.default.createElement(Loader.Loader, {
|
|
2941
2946
|
className: "form__loader",
|
|
2942
2947
|
fill: loaderFill,
|
|
2943
|
-
text: loaderText,
|
|
2944
2948
|
itemFill: loaderItemFill,
|
|
2945
|
-
|
|
2949
|
+
shape: loaderShape,
|
|
2950
|
+
size: loaderSize,
|
|
2951
|
+
text: loaderText,
|
|
2952
|
+
type: loaderType
|
|
2946
2953
|
}))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React__default.default.createElement(Group$1.Group, {
|
|
2947
2954
|
className: "form__button",
|
|
2948
|
-
direction: buttonDirection,
|
|
2949
|
-
justifyContent: buttonJustifyContent,
|
|
2950
2955
|
fill: buttonFill,
|
|
2951
2956
|
padding: buttonPadding,
|
|
2952
|
-
gap: buttonGap,
|
|
2953
2957
|
dataTestId: dataTestIdButtons,
|
|
2954
|
-
dataTour: dataTourButtons
|
|
2958
|
+
dataTour: dataTourButtons,
|
|
2959
|
+
direction: buttonDirection,
|
|
2960
|
+
gap: buttonGap,
|
|
2961
|
+
justifyContent: buttonJustifyContent
|
|
2955
2962
|
}, primaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
2956
2963
|
className: "form__button-item",
|
|
2957
2964
|
width: "fill",
|
|
2958
|
-
|
|
2965
|
+
labelTextColor: primaryButtonLabelTextColor,
|
|
2966
|
+
labelTextSize: primaryButtonLabelSize,
|
|
2959
2967
|
fill: primaryButtonFill,
|
|
2960
2968
|
fillHover: primaryButtonFillHover,
|
|
2969
|
+
dataTestId: dataTestIdPrimaryButton,
|
|
2970
|
+
dataTour: dataTourPrimaryButton,
|
|
2961
2971
|
label: primaryButtonLabel,
|
|
2962
|
-
labelTextColor: primaryButtonLabelTextColor,
|
|
2963
|
-
labelTextSize: primaryButtonLabelSize,
|
|
2964
2972
|
labelTextWeight: primaryButtonLabelTextWeight,
|
|
2965
|
-
|
|
2966
|
-
dataTour: dataTourPrimaryButton
|
|
2973
|
+
size: primaryButtonSize
|
|
2967
2974
|
}) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
2968
2975
|
className: "form__button-item",
|
|
2969
2976
|
width: "fill",
|
|
2970
|
-
size: secondaryButtonSize,
|
|
2971
|
-
fill: secondaryButtonFill,
|
|
2972
|
-
fillHover: secondaryButtonFillHover,
|
|
2973
|
-
label: secondaryButtonLabel,
|
|
2974
2977
|
labelTextColor: secondaryButtonLabelTextColor,
|
|
2975
2978
|
labelTextSize: secondaryButtonLabelSize,
|
|
2976
|
-
|
|
2979
|
+
fill: secondaryButtonFill,
|
|
2980
|
+
fillHover: secondaryButtonFillHover,
|
|
2977
2981
|
dataTestId: dataTestIdSecondaryButton,
|
|
2978
2982
|
dataTour: dataTourSecondaryButton,
|
|
2983
|
+
label: secondaryButtonLabel,
|
|
2984
|
+
labelTextWeight: secondaryButtonLabelTextWeight,
|
|
2985
|
+
size: secondaryButtonSize,
|
|
2979
2986
|
onClick: onClickSecondaryButton
|
|
2980
2987
|
}) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React__default.default.createElement(Button.Button, {
|
|
2981
2988
|
className: "form__button-item",
|
|
2982
2989
|
width: "fill",
|
|
2983
|
-
size: tertiaryButtonSize,
|
|
2984
|
-
fill: tertiaryButtonFill,
|
|
2985
|
-
fillHover: tertiaryButtonFillHover,
|
|
2986
|
-
label: tertiaryButtonLabel,
|
|
2987
2990
|
labelTextColor: tertiaryButtonLabelTextColor,
|
|
2988
2991
|
labelTextSize: tertiaryButtonLabelSize,
|
|
2989
|
-
|
|
2992
|
+
fill: tertiaryButtonFill,
|
|
2993
|
+
fillHover: tertiaryButtonFillHover,
|
|
2990
2994
|
dataTestId: dataTestIdTertiaryButton,
|
|
2991
2995
|
dataTour: dataTourTertiaryButton,
|
|
2996
|
+
label: tertiaryButtonLabel,
|
|
2997
|
+
labelTextWeight: tertiaryButtonLabelTextWeight,
|
|
2998
|
+
size: tertiaryButtonSize,
|
|
2992
2999
|
onClick: onClickTertiaryButton
|
|
2993
3000
|
}) : tertiaryButton), after);
|
|
2994
3001
|
},
|
|
2995
|
-
decorators: [focusOnErrorDecorator],
|
|
2996
|
-
mutators: mutators,
|
|
2997
3002
|
subscription: {
|
|
2998
|
-
submitError: true,
|
|
2999
3003
|
modifiedSinceLastSubmit: true,
|
|
3000
3004
|
pristine: true,
|
|
3005
|
+
submitError: true,
|
|
3001
3006
|
submitting: true
|
|
3002
3007
|
},
|
|
3003
|
-
validate: validate,
|
|
3004
3008
|
onSubmit: onSubmit
|
|
3005
3009
|
});
|
|
3006
3010
|
});
|
|
3007
3011
|
FinalForm.propTypes = {
|
|
3012
|
+
isLoading: PropTypes__default.default.bool,
|
|
3013
|
+
additionalProps: PropTypes__default.default.object,
|
|
3014
|
+
after: PropTypes__default.default.any,
|
|
3015
|
+
before: PropTypes__default.default.any,
|
|
3016
|
+
buttonDirection: PropTypes__default.default.string,
|
|
3017
|
+
buttonFill: PropTypes__default.default.string,
|
|
3018
|
+
buttonGap: PropTypes__default.default.string,
|
|
3019
|
+
buttonJustifyContent: PropTypes__default.default.string,
|
|
3020
|
+
buttonPadding: PropTypes__default.default.string,
|
|
3008
3021
|
className: PropTypes__default.default.string,
|
|
3009
|
-
type: PropTypes__default.default.string,
|
|
3010
|
-
initialValues: PropTypes__default.default.any,
|
|
3011
|
-
initialValuesEqual: PropTypes__default.default.any,
|
|
3012
3022
|
config: PropTypes__default.default.object,
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
|
|
3023
|
+
dataTour: PropTypes__default.default.string,
|
|
3024
|
+
dataTourButtons: PropTypes__default.default.string,
|
|
3025
|
+
dataTourPrimaryButton: PropTypes__default.default.string,
|
|
3026
|
+
dataTourSecondaryButton: PropTypes__default.default.string,
|
|
3027
|
+
dataTourTertiaryButton: PropTypes__default.default.string,
|
|
3018
3028
|
description: PropTypes__default.default.string,
|
|
3019
3029
|
descriptionSize: PropTypes__default.default.string,
|
|
3020
3030
|
descriptionTextColor: PropTypes__default.default.string,
|
|
3021
3031
|
descriptionTextWeight: PropTypes__default.default.string,
|
|
3032
|
+
disableFieldsAutoComplete: PropTypes__default.default.bool,
|
|
3033
|
+
fieldsGap: PropTypes__default.default.string,
|
|
3034
|
+
formName: PropTypes__default.default.string,
|
|
3035
|
+
groupGap: PropTypes__default.default.string,
|
|
3036
|
+
initialValues: PropTypes__default.default.any,
|
|
3037
|
+
initialValuesEqual: PropTypes__default.default.any,
|
|
3038
|
+
language: PropTypes__default.default.string,
|
|
3039
|
+
loader: PropTypes__default.default.element,
|
|
3040
|
+
loaderFill: PropTypes__default.default.string,
|
|
3041
|
+
loaderItemFill: PropTypes__default.default.string,
|
|
3042
|
+
loaderSet: PropTypes__default.default.string,
|
|
3043
|
+
loaderText: PropTypes__default.default.string,
|
|
3044
|
+
mutators: PropTypes__default.default.any,
|
|
3045
|
+
notificationCloseButton: PropTypes__default.default.element,
|
|
3046
|
+
notificationType: PropTypes__default.default.string,
|
|
3022
3047
|
primaryButton: PropTypes__default.default.oneOfType([PropTypes__default.default.string, PropTypes__default.default.element]),
|
|
3023
3048
|
primaryButtonFill: PropTypes__default.default.string,
|
|
3024
3049
|
primaryButtonFillHover: PropTypes__default.default.string,
|
|
@@ -3035,6 +3060,7 @@ FinalForm.propTypes = {
|
|
|
3035
3060
|
secondaryButtonLabelTextColor: PropTypes__default.default.string,
|
|
3036
3061
|
secondaryButtonLabelTextWeight: PropTypes__default.default.string,
|
|
3037
3062
|
secondaryButtonSize: PropTypes__default.default.string,
|
|
3063
|
+
set: PropTypes__default.default.string,
|
|
3038
3064
|
tertiaryButton: PropTypes__default.default.element,
|
|
3039
3065
|
tertiaryButtonFill: PropTypes__default.default.string,
|
|
3040
3066
|
tertiaryButtonFillHover: PropTypes__default.default.string,
|
|
@@ -3043,35 +3069,13 @@ FinalForm.propTypes = {
|
|
|
3043
3069
|
tertiaryButtonLabelTextColor: PropTypes__default.default.string,
|
|
3044
3070
|
tertiaryButtonLabelTextWeight: PropTypes__default.default.string,
|
|
3045
3071
|
tertiaryButtonSize: PropTypes__default.default.string,
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
|
|
3051
|
-
|
|
3052
|
-
buttonGap: PropTypes__default.default.string,
|
|
3053
|
-
buttonJustifyContent: PropTypes__default.default.string,
|
|
3054
|
-
buttonPadding: PropTypes__default.default.string,
|
|
3055
|
-
dataTour: PropTypes__default.default.string,
|
|
3056
|
-
dataTourButtons: PropTypes__default.default.string,
|
|
3057
|
-
disableFieldsAutoComplete: PropTypes__default.default.bool,
|
|
3058
|
-
fieldsGap: PropTypes__default.default.string,
|
|
3059
|
-
formName: PropTypes__default.default.string,
|
|
3060
|
-
groupGap: PropTypes__default.default.string,
|
|
3061
|
-
language: PropTypes__default.default.string,
|
|
3062
|
-
loader: PropTypes__default.default.element,
|
|
3063
|
-
loaderFill: PropTypes__default.default.string,
|
|
3064
|
-
loaderItemFill: PropTypes__default.default.string,
|
|
3065
|
-
loaderSet: PropTypes__default.default.string,
|
|
3066
|
-
loaderText: PropTypes__default.default.string,
|
|
3067
|
-
mutators: PropTypes__default.default.any,
|
|
3068
|
-
notificationCloseButton: PropTypes__default.default.element,
|
|
3069
|
-
notificationType: PropTypes__default.default.string,
|
|
3072
|
+
title: PropTypes__default.default.string,
|
|
3073
|
+
titleSize: PropTypes__default.default.string,
|
|
3074
|
+
titleTextColor: PropTypes__default.default.string,
|
|
3075
|
+
titleTextSize: PropTypes__default.default.string,
|
|
3076
|
+
titleTextWeight: PropTypes__default.default.string,
|
|
3077
|
+
type: PropTypes__default.default.string,
|
|
3070
3078
|
validationSchema: PropTypes__default.default.object,
|
|
3071
|
-
before: PropTypes__default.default.any,
|
|
3072
|
-
after: PropTypes__default.default.any,
|
|
3073
|
-
isLoading: PropTypes__default.default.bool,
|
|
3074
|
-
set: PropTypes__default.default.string,
|
|
3075
3079
|
onChangeFormValues: PropTypes__default.default.func,
|
|
3076
3080
|
onClickSecondaryButton: PropTypes__default.default.func,
|
|
3077
3081
|
onClickTertiaryButton: PropTypes__default.default.func,
|
|
@@ -3079,7 +3083,7 @@ FinalForm.propTypes = {
|
|
|
3079
3083
|
};
|
|
3080
3084
|
FinalForm.defaultProps = {
|
|
3081
3085
|
direction: 'vertical',
|
|
3082
|
-
|
|
3086
|
+
isLoading: false,
|
|
3083
3087
|
additionalProps: {},
|
|
3084
3088
|
buttonDirection: 'vertical',
|
|
3085
3089
|
disableFieldsAutoComplete: false,
|
|
@@ -3087,7 +3091,7 @@ FinalForm.defaultProps = {
|
|
|
3087
3091
|
loaderFill: 'surfacePrimary',
|
|
3088
3092
|
loaderItemFill: 'surfaceItemAccent',
|
|
3089
3093
|
loaderSet: 'simple',
|
|
3090
|
-
|
|
3094
|
+
titleSize: 'h1'
|
|
3091
3095
|
};
|
|
3092
3096
|
|
|
3093
3097
|
const DEFAULT_MESSAGES_FIELDS = {
|
package/dist/itcase-forms.esm.js
CHANGED
|
@@ -2768,19 +2768,48 @@ const sendFormDataToServer = async (url, data) => {
|
|
|
2768
2768
|
|
|
2769
2769
|
const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
2770
2770
|
const {
|
|
2771
|
+
isLoading,
|
|
2772
|
+
additionalProps,
|
|
2773
|
+
after,
|
|
2774
|
+
before,
|
|
2775
|
+
buttonDirection,
|
|
2776
|
+
buttonFill,
|
|
2777
|
+
buttonGap,
|
|
2778
|
+
buttonJustifyContent,
|
|
2779
|
+
buttonPadding,
|
|
2771
2780
|
className,
|
|
2772
|
-
type,
|
|
2773
|
-
initialValues,
|
|
2774
|
-
initialValuesEqual,
|
|
2775
2781
|
config,
|
|
2776
|
-
|
|
2777
|
-
|
|
2778
|
-
|
|
2779
|
-
|
|
2782
|
+
dataTestId,
|
|
2783
|
+
dataTestIdButtons,
|
|
2784
|
+
dataTestIdPrimaryButton,
|
|
2785
|
+
dataTestIdSecondaryButton,
|
|
2786
|
+
dataTestIdTertiaryButton,
|
|
2787
|
+
dataTour,
|
|
2788
|
+
dataTourButtons,
|
|
2789
|
+
dataTourPrimaryButton,
|
|
2790
|
+
dataTourSecondaryButton,
|
|
2791
|
+
dataTourTertiaryButton,
|
|
2780
2792
|
description,
|
|
2781
2793
|
descriptionSize,
|
|
2782
2794
|
descriptionTextColor,
|
|
2783
2795
|
descriptionTextWeight,
|
|
2796
|
+
disableFieldsAutoComplete,
|
|
2797
|
+
fieldsGap,
|
|
2798
|
+
formName,
|
|
2799
|
+
groupGap,
|
|
2800
|
+
initialValues,
|
|
2801
|
+
initialValuesEqual,
|
|
2802
|
+
language,
|
|
2803
|
+
loader,
|
|
2804
|
+
loaderFill,
|
|
2805
|
+
loaderItemFill,
|
|
2806
|
+
loaderShape,
|
|
2807
|
+
loaderSize,
|
|
2808
|
+
loaderText,
|
|
2809
|
+
loaderType,
|
|
2810
|
+
mutators,
|
|
2811
|
+
notificationCloseButton,
|
|
2812
|
+
notificationType,
|
|
2784
2813
|
primaryButton,
|
|
2785
2814
|
primaryButtonFill,
|
|
2786
2815
|
primaryButtonFillHover,
|
|
@@ -2789,6 +2818,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
|
2789
2818
|
primaryButtonLabelTextColor,
|
|
2790
2819
|
primaryButtonLabelTextWeight,
|
|
2791
2820
|
primaryButtonSize,
|
|
2821
|
+
renderFieldsWrapper = wrapperChildren => wrapperChildren,
|
|
2792
2822
|
secondaryButton,
|
|
2793
2823
|
secondaryButtonFill,
|
|
2794
2824
|
secondaryButtonFillHover,
|
|
@@ -2797,6 +2827,7 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
|
2797
2827
|
secondaryButtonLabelTextColor,
|
|
2798
2828
|
secondaryButtonLabelTextWeight,
|
|
2799
2829
|
secondaryButtonSize,
|
|
2830
|
+
set,
|
|
2800
2831
|
tertiaryButton,
|
|
2801
2832
|
tertiaryButtonFill,
|
|
2802
2833
|
tertiaryButtonFillHover,
|
|
@@ -2805,41 +2836,12 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
|
2805
2836
|
tertiaryButtonLabelTextColor,
|
|
2806
2837
|
tertiaryButtonLabelTextWeight,
|
|
2807
2838
|
tertiaryButtonSize,
|
|
2808
|
-
|
|
2809
|
-
|
|
2810
|
-
|
|
2811
|
-
|
|
2812
|
-
|
|
2813
|
-
dataTourTertiaryButton,
|
|
2814
|
-
additionalProps,
|
|
2815
|
-
buttonDirection,
|
|
2816
|
-
buttonFill,
|
|
2817
|
-
buttonGap,
|
|
2818
|
-
buttonJustifyContent,
|
|
2819
|
-
buttonPadding,
|
|
2820
|
-
dataTestId,
|
|
2821
|
-
dataTestIdButtons,
|
|
2822
|
-
dataTour,
|
|
2823
|
-
dataTourButtons,
|
|
2824
|
-
disableFieldsAutoComplete,
|
|
2825
|
-
fieldsGap,
|
|
2826
|
-
formName,
|
|
2827
|
-
groupGap,
|
|
2828
|
-
language,
|
|
2829
|
-
loader,
|
|
2830
|
-
loaderFill,
|
|
2831
|
-
loaderItemFill,
|
|
2832
|
-
loaderSet,
|
|
2833
|
-
loaderText,
|
|
2834
|
-
mutators,
|
|
2835
|
-
notificationCloseButton,
|
|
2836
|
-
notificationType,
|
|
2837
|
-
renderFieldsWrapper = wrapperChildren => wrapperChildren,
|
|
2839
|
+
title,
|
|
2840
|
+
titleTextColor,
|
|
2841
|
+
titleTextSize,
|
|
2842
|
+
titleTextWeight,
|
|
2843
|
+
type,
|
|
2838
2844
|
validationSchema,
|
|
2839
|
-
before,
|
|
2840
|
-
after,
|
|
2841
|
-
isLoading,
|
|
2842
|
-
set,
|
|
2843
2845
|
onChangeFormValues,
|
|
2844
2846
|
onClickSecondaryButton,
|
|
2845
2847
|
onClickTertiaryButton,
|
|
@@ -2872,25 +2874,28 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
|
2872
2874
|
wrapper: wrapperStyles
|
|
2873
2875
|
} = useStyles(props);
|
|
2874
2876
|
return /*#__PURE__*/React.createElement(Form, {
|
|
2877
|
+
decorators: [focusOnErrorDecorator],
|
|
2875
2878
|
initialValues: initialValues,
|
|
2876
2879
|
initialValuesEqual: initialValuesEqual,
|
|
2880
|
+
mutators: mutators,
|
|
2881
|
+
validate: validate,
|
|
2877
2882
|
render: ({
|
|
2878
|
-
submitError,
|
|
2879
2883
|
form,
|
|
2880
2884
|
handleSubmit,
|
|
2881
|
-
modifiedSinceLastSubmit
|
|
2885
|
+
modifiedSinceLastSubmit,
|
|
2886
|
+
submitError
|
|
2882
2887
|
}) => {
|
|
2883
2888
|
return /*#__PURE__*/React.createElement("form", {
|
|
2884
|
-
className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
|
|
2889
|
+
className: clsx(className, 'form', set && `form_set_${set}`, type && `form_type_${type}`, directionClass, fillClass, shapeClass, elevationClass)
|
|
2890
|
+
// We no need set reference to html element, we need reference to "final-form" instance
|
|
2891
|
+
,
|
|
2892
|
+
ref: () => onRefFormInstance(form),
|
|
2885
2893
|
name: formName,
|
|
2886
2894
|
autoCapitalize: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2887
2895
|
autoComplete: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2888
2896
|
autoCorrect: disableFieldsAutoComplete ? 'off' : undefined,
|
|
2889
2897
|
"data-test-id": dataTestId,
|
|
2890
|
-
"data-tour": dataTour
|
|
2891
|
-
// We no need set reference to html element, we need reference to "final-form" instance
|
|
2892
|
-
,
|
|
2893
|
-
ref: () => onRefFormInstance(form),
|
|
2898
|
+
"data-tour": dataTour,
|
|
2894
2899
|
spellCheck: disableFieldsAutoComplete ? 'false' : undefined,
|
|
2895
2900
|
style: formStyles,
|
|
2896
2901
|
onSubmit: handleSubmit
|
|
@@ -2908,10 +2913,10 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
|
2908
2913
|
className: clsx('notification', 'form-notification', notificationType ? `form-notification_type_${notificationType}` : 'form-notification_type_global')
|
|
2909
2914
|
}, /*#__PURE__*/React.createElement(NotificationItem, {
|
|
2910
2915
|
className: "form-notification__item",
|
|
2916
|
+
closeButton: notificationCloseButton,
|
|
2917
|
+
status: "error",
|
|
2911
2918
|
title: form.getState().submitError,
|
|
2912
2919
|
titleTextSize: "h6",
|
|
2913
|
-
status: "error",
|
|
2914
|
-
closeButton: notificationCloseButton,
|
|
2915
2920
|
set: "form"
|
|
2916
2921
|
})), onChangeFormValues && /*#__PURE__*/React.createElement(FormSpy, {
|
|
2917
2922
|
subscription: {
|
|
@@ -2928,85 +2933,105 @@ const FinalForm = /*#__PURE__*/React.forwardRef(function FinalForm(props, ref) {
|
|
|
2928
2933
|
}, additionalProps[config[key].name])), isLoading && (loader || /*#__PURE__*/React.createElement(Loader, {
|
|
2929
2934
|
className: "form__loader",
|
|
2930
2935
|
fill: loaderFill,
|
|
2931
|
-
text: loaderText,
|
|
2932
2936
|
itemFill: loaderItemFill,
|
|
2933
|
-
|
|
2937
|
+
shape: loaderShape,
|
|
2938
|
+
size: loaderSize,
|
|
2939
|
+
text: loaderText,
|
|
2940
|
+
type: loaderType
|
|
2934
2941
|
}))))), (primaryButtonLabel || primaryButton || secondaryButtonLabel || secondaryButton || tertiaryButton || tertiaryButtonLabel) && /*#__PURE__*/React.createElement(Group$1, {
|
|
2935
2942
|
className: "form__button",
|
|
2936
|
-
direction: buttonDirection,
|
|
2937
|
-
justifyContent: buttonJustifyContent,
|
|
2938
2943
|
fill: buttonFill,
|
|
2939
2944
|
padding: buttonPadding,
|
|
2940
|
-
gap: buttonGap,
|
|
2941
2945
|
dataTestId: dataTestIdButtons,
|
|
2942
|
-
dataTour: dataTourButtons
|
|
2946
|
+
dataTour: dataTourButtons,
|
|
2947
|
+
direction: buttonDirection,
|
|
2948
|
+
gap: buttonGap,
|
|
2949
|
+
justifyContent: buttonJustifyContent
|
|
2943
2950
|
}, primaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
|
|
2944
2951
|
className: "form__button-item",
|
|
2945
2952
|
width: "fill",
|
|
2946
|
-
|
|
2953
|
+
labelTextColor: primaryButtonLabelTextColor,
|
|
2954
|
+
labelTextSize: primaryButtonLabelSize,
|
|
2947
2955
|
fill: primaryButtonFill,
|
|
2948
2956
|
fillHover: primaryButtonFillHover,
|
|
2957
|
+
dataTestId: dataTestIdPrimaryButton,
|
|
2958
|
+
dataTour: dataTourPrimaryButton,
|
|
2949
2959
|
label: primaryButtonLabel,
|
|
2950
|
-
labelTextColor: primaryButtonLabelTextColor,
|
|
2951
|
-
labelTextSize: primaryButtonLabelSize,
|
|
2952
2960
|
labelTextWeight: primaryButtonLabelTextWeight,
|
|
2953
|
-
|
|
2954
|
-
dataTour: dataTourPrimaryButton
|
|
2961
|
+
size: primaryButtonSize
|
|
2955
2962
|
}) : primaryButton, secondaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
|
|
2956
2963
|
className: "form__button-item",
|
|
2957
2964
|
width: "fill",
|
|
2958
|
-
size: secondaryButtonSize,
|
|
2959
|
-
fill: secondaryButtonFill,
|
|
2960
|
-
fillHover: secondaryButtonFillHover,
|
|
2961
|
-
label: secondaryButtonLabel,
|
|
2962
2965
|
labelTextColor: secondaryButtonLabelTextColor,
|
|
2963
2966
|
labelTextSize: secondaryButtonLabelSize,
|
|
2964
|
-
|
|
2967
|
+
fill: secondaryButtonFill,
|
|
2968
|
+
fillHover: secondaryButtonFillHover,
|
|
2965
2969
|
dataTestId: dataTestIdSecondaryButton,
|
|
2966
2970
|
dataTour: dataTourSecondaryButton,
|
|
2971
|
+
label: secondaryButtonLabel,
|
|
2972
|
+
labelTextWeight: secondaryButtonLabelTextWeight,
|
|
2973
|
+
size: secondaryButtonSize,
|
|
2967
2974
|
onClick: onClickSecondaryButton
|
|
2968
2975
|
}) : secondaryButton, tertiaryButtonLabel ? /*#__PURE__*/React.createElement(Button, {
|
|
2969
2976
|
className: "form__button-item",
|
|
2970
2977
|
width: "fill",
|
|
2971
|
-
size: tertiaryButtonSize,
|
|
2972
|
-
fill: tertiaryButtonFill,
|
|
2973
|
-
fillHover: tertiaryButtonFillHover,
|
|
2974
|
-
label: tertiaryButtonLabel,
|
|
2975
2978
|
labelTextColor: tertiaryButtonLabelTextColor,
|
|
2976
2979
|
labelTextSize: tertiaryButtonLabelSize,
|
|
2977
|
-
|
|
2980
|
+
fill: tertiaryButtonFill,
|
|
2981
|
+
fillHover: tertiaryButtonFillHover,
|
|
2978
2982
|
dataTestId: dataTestIdTertiaryButton,
|
|
2979
2983
|
dataTour: dataTourTertiaryButton,
|
|
2984
|
+
label: tertiaryButtonLabel,
|
|
2985
|
+
labelTextWeight: tertiaryButtonLabelTextWeight,
|
|
2986
|
+
size: tertiaryButtonSize,
|
|
2980
2987
|
onClick: onClickTertiaryButton
|
|
2981
2988
|
}) : tertiaryButton), after);
|
|
2982
2989
|
},
|
|
2983
|
-
decorators: [focusOnErrorDecorator],
|
|
2984
|
-
mutators: mutators,
|
|
2985
2990
|
subscription: {
|
|
2986
|
-
submitError: true,
|
|
2987
2991
|
modifiedSinceLastSubmit: true,
|
|
2988
2992
|
pristine: true,
|
|
2993
|
+
submitError: true,
|
|
2989
2994
|
submitting: true
|
|
2990
2995
|
},
|
|
2991
|
-
validate: validate,
|
|
2992
2996
|
onSubmit: onSubmit
|
|
2993
2997
|
});
|
|
2994
2998
|
});
|
|
2995
2999
|
FinalForm.propTypes = {
|
|
3000
|
+
isLoading: PropTypes.bool,
|
|
3001
|
+
additionalProps: PropTypes.object,
|
|
3002
|
+
after: PropTypes.any,
|
|
3003
|
+
before: PropTypes.any,
|
|
3004
|
+
buttonDirection: PropTypes.string,
|
|
3005
|
+
buttonFill: PropTypes.string,
|
|
3006
|
+
buttonGap: PropTypes.string,
|
|
3007
|
+
buttonJustifyContent: PropTypes.string,
|
|
3008
|
+
buttonPadding: PropTypes.string,
|
|
2996
3009
|
className: PropTypes.string,
|
|
2997
|
-
type: PropTypes.string,
|
|
2998
|
-
initialValues: PropTypes.any,
|
|
2999
|
-
initialValuesEqual: PropTypes.any,
|
|
3000
3010
|
config: PropTypes.object,
|
|
3001
|
-
|
|
3002
|
-
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
|
|
3011
|
+
dataTour: PropTypes.string,
|
|
3012
|
+
dataTourButtons: PropTypes.string,
|
|
3013
|
+
dataTourPrimaryButton: PropTypes.string,
|
|
3014
|
+
dataTourSecondaryButton: PropTypes.string,
|
|
3015
|
+
dataTourTertiaryButton: PropTypes.string,
|
|
3006
3016
|
description: PropTypes.string,
|
|
3007
3017
|
descriptionSize: PropTypes.string,
|
|
3008
3018
|
descriptionTextColor: PropTypes.string,
|
|
3009
3019
|
descriptionTextWeight: PropTypes.string,
|
|
3020
|
+
disableFieldsAutoComplete: PropTypes.bool,
|
|
3021
|
+
fieldsGap: PropTypes.string,
|
|
3022
|
+
formName: PropTypes.string,
|
|
3023
|
+
groupGap: PropTypes.string,
|
|
3024
|
+
initialValues: PropTypes.any,
|
|
3025
|
+
initialValuesEqual: PropTypes.any,
|
|
3026
|
+
language: PropTypes.string,
|
|
3027
|
+
loader: PropTypes.element,
|
|
3028
|
+
loaderFill: PropTypes.string,
|
|
3029
|
+
loaderItemFill: PropTypes.string,
|
|
3030
|
+
loaderSet: PropTypes.string,
|
|
3031
|
+
loaderText: PropTypes.string,
|
|
3032
|
+
mutators: PropTypes.any,
|
|
3033
|
+
notificationCloseButton: PropTypes.element,
|
|
3034
|
+
notificationType: PropTypes.string,
|
|
3010
3035
|
primaryButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
|
3011
3036
|
primaryButtonFill: PropTypes.string,
|
|
3012
3037
|
primaryButtonFillHover: PropTypes.string,
|
|
@@ -3023,6 +3048,7 @@ FinalForm.propTypes = {
|
|
|
3023
3048
|
secondaryButtonLabelTextColor: PropTypes.string,
|
|
3024
3049
|
secondaryButtonLabelTextWeight: PropTypes.string,
|
|
3025
3050
|
secondaryButtonSize: PropTypes.string,
|
|
3051
|
+
set: PropTypes.string,
|
|
3026
3052
|
tertiaryButton: PropTypes.element,
|
|
3027
3053
|
tertiaryButtonFill: PropTypes.string,
|
|
3028
3054
|
tertiaryButtonFillHover: PropTypes.string,
|
|
@@ -3031,35 +3057,13 @@ FinalForm.propTypes = {
|
|
|
3031
3057
|
tertiaryButtonLabelTextColor: PropTypes.string,
|
|
3032
3058
|
tertiaryButtonLabelTextWeight: PropTypes.string,
|
|
3033
3059
|
tertiaryButtonSize: PropTypes.string,
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
buttonGap: PropTypes.string,
|
|
3041
|
-
buttonJustifyContent: PropTypes.string,
|
|
3042
|
-
buttonPadding: PropTypes.string,
|
|
3043
|
-
dataTour: PropTypes.string,
|
|
3044
|
-
dataTourButtons: PropTypes.string,
|
|
3045
|
-
disableFieldsAutoComplete: PropTypes.bool,
|
|
3046
|
-
fieldsGap: PropTypes.string,
|
|
3047
|
-
formName: PropTypes.string,
|
|
3048
|
-
groupGap: PropTypes.string,
|
|
3049
|
-
language: PropTypes.string,
|
|
3050
|
-
loader: PropTypes.element,
|
|
3051
|
-
loaderFill: PropTypes.string,
|
|
3052
|
-
loaderItemFill: PropTypes.string,
|
|
3053
|
-
loaderSet: PropTypes.string,
|
|
3054
|
-
loaderText: PropTypes.string,
|
|
3055
|
-
mutators: PropTypes.any,
|
|
3056
|
-
notificationCloseButton: PropTypes.element,
|
|
3057
|
-
notificationType: PropTypes.string,
|
|
3060
|
+
title: PropTypes.string,
|
|
3061
|
+
titleSize: PropTypes.string,
|
|
3062
|
+
titleTextColor: PropTypes.string,
|
|
3063
|
+
titleTextSize: PropTypes.string,
|
|
3064
|
+
titleTextWeight: PropTypes.string,
|
|
3065
|
+
type: PropTypes.string,
|
|
3058
3066
|
validationSchema: PropTypes.object,
|
|
3059
|
-
before: PropTypes.any,
|
|
3060
|
-
after: PropTypes.any,
|
|
3061
|
-
isLoading: PropTypes.bool,
|
|
3062
|
-
set: PropTypes.string,
|
|
3063
3067
|
onChangeFormValues: PropTypes.func,
|
|
3064
3068
|
onClickSecondaryButton: PropTypes.func,
|
|
3065
3069
|
onClickTertiaryButton: PropTypes.func,
|
|
@@ -3067,7 +3071,7 @@ FinalForm.propTypes = {
|
|
|
3067
3071
|
};
|
|
3068
3072
|
FinalForm.defaultProps = {
|
|
3069
3073
|
direction: 'vertical',
|
|
3070
|
-
|
|
3074
|
+
isLoading: false,
|
|
3071
3075
|
additionalProps: {},
|
|
3072
3076
|
buttonDirection: 'vertical',
|
|
3073
3077
|
disableFieldsAutoComplete: false,
|
|
@@ -3075,7 +3079,7 @@ FinalForm.defaultProps = {
|
|
|
3075
3079
|
loaderFill: 'surfacePrimary',
|
|
3076
3080
|
loaderItemFill: 'surfaceItemAccent',
|
|
3077
3081
|
loaderSet: 'simple',
|
|
3078
|
-
|
|
3082
|
+
titleSize: 'h1'
|
|
3079
3083
|
};
|
|
3080
3084
|
|
|
3081
3085
|
const DEFAULT_MESSAGES_FIELDS = {
|