@itcase/forms 1.0.17 → 1.0.19

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.
@@ -1,3 +1,22 @@
1
+ .form-checkbox {
2
+ &&_state {
3
+ &_success {
4
+ & .checkbox__state {
5
+ border: solid 1px var(--color-success-border-primary);
6
+ }
7
+ }
8
+ &_error {
9
+ & .checkbox__state {
10
+ border: solid 1px var(--color-error-border-primary);
11
+ }
12
+ }
13
+ &_focus {
14
+ & .checkbox__state {
15
+ background: var(--color-surface-primary);
16
+ }
17
+ }
18
+ }
19
+ }
1
20
  .form-field {
2
21
  &_type_checkbox {
3
22
  display: grid;
@@ -1,14 +1,5 @@
1
- .form-textarea {
2
- position: relative;
3
- &&_state {
4
- &_success {
5
- border: solid 1px var(--color-success-border-primary);
6
- }
7
- &_error {
8
- border: solid 1px var(--color-error-border-primary);
9
- }
10
- &_focus {
11
- background: var(--color-surface-primary);
12
- }
1
+ .form-field {
2
+ &_type_custom {
3
+ width: 100%;
13
4
  }
14
5
  }
@@ -1,3 +1,15 @@
1
1
  .radiogroup {
2
2
  border: solid 1px red;
3
3
  }
4
+ .form-radio {
5
+ &_state_success {
6
+ & .radio-button__state {
7
+ border: solid 1px var(--color-success-border-primary);
8
+ }
9
+ }
10
+ &_state_error {
11
+ & .radio-button__state {
12
+ border: solid 1px var(--color-error-border-primary);
13
+ }
14
+ }
15
+ }
@@ -1 +1,12 @@
1
-
1
+ .form-segmented {
2
+ &_state_success {
3
+ & .segmented {
4
+ border: solid 1px var(--color-success-border-primary);
5
+ }
6
+ }
7
+ &_state_error {
8
+ & .segmented {
9
+ border: solid 1px var(--color-error-border-primary);
10
+ }
11
+ }
12
+ }
@@ -7,235 +7,13 @@
7
7
  }
8
8
  }
9
9
  &_state_success {
10
- ^&__control {
10
+ & .select__control {
11
11
  border: solid 1px var(--color-success-border-primary);
12
12
  }
13
13
  }
14
14
  &_state_error {
15
- ^&__control {
15
+ & .select__control {
16
16
  border: solid 1px var(--color-error-border-primary);
17
17
  }
18
18
  }
19
- &__control {
20
- border: solid 1px var(--color-surface-border-secondary);
21
- border-radius: 6px;
22
- position: relative;
23
- display: flex;
24
- flex-wrap: wrap;
25
- justify-content: space-between;
26
- align-items: center;
27
- cursor: default;
28
- outline: 0 !important;
29
- @mixin text-m;
30
- ^&__value-container {
31
- padding: 16px 16px;
32
- position: relative;
33
- overflow: hidden;
34
- display: flex;
35
- flex: 1;
36
- flex-wrap: wrap;
37
- gap: 8px;
38
- align-items: center;
39
- ^^&__single-value {
40
- color: var(--color-surface-text-primary);
41
- @mixin text-m;
42
- }
43
- ^^&__placeholder {
44
- color: var(--color-surface-text-primary);
45
- @mixin text-m;
46
- }
47
- ^^&__input-container {
48
- flex: 1;
49
- visibility: visible;
50
- @mixin text-m;
51
- }
52
- &--is-multi {
53
- padding: 13px 24px 13px 16px;
54
- @media (--mobile) {
55
- padding: 13px 24px 13px 16px;
56
- }
57
- + ^^^&__indicators {
58
- @media (--mobile) {
59
- padding: 12px 16px 0 0;
60
- align-self: stretch;
61
- }
62
- }
63
- ^^^&__placeholder {
64
- padding: 4px 0 8px 4px;
65
- }
66
- ^^^&__input-container {
67
- padding: 4px 8px;
68
- }
69
- }
70
- ^^&__multi-value {
71
- background: var(--color-surface-tertiary);
72
- margin: 1px;
73
- border-radius: 4px;
74
- position: relative;
75
- display: flex;
76
- gap: 4px;
77
- &__label {
78
- color: var(--color-surface-text-primary);
79
- padding: 4px 0 4px 8px;
80
- @mixin text-l 300;
81
- }
82
- &__remove {
83
- color: var(--color-accent-item);
84
- padding: 3px 8px 4px 8px;
85
- cursor: pointer;
86
- &:hover {
87
- background: var(--color-accent-hover);
88
- }
89
- & svg {
90
- transform: scale(1.5);
91
- }
92
- }
93
- &-count {
94
- color: var(--color-surface-text-primary);
95
- @mixin text-l 300;
96
- }
97
- }
98
- }
99
- ^&__indicators {
100
- padding: 16px 16px 0 0;
101
- display: flex;
102
- align-items: center;
103
- align-self: flex-start;
104
- cursor: pointer;
105
- @media (--mobile) {
106
- align-items: flex-start;
107
- }
108
- &-separator {
109
- display: none;
110
- }
111
- ^^&__clear-indicator {
112
- color: var(--color-surface-text-primary);
113
- padding: 0 8px 0 0;
114
- @mixin text-m 300;
115
- &::after {
116
- content: 'clear';
117
- }
118
- }
119
- ^^&__dropdown-indicator {
120
- width: 20px;
121
- height: 20px;
122
- /* background: url('/public/img/icons/chevron_xs_down.svg') 50% 50% no-repeat; */
123
- @media (--mobile) {
124
- margin: 2px 0 0 0;
125
- }
126
- }
127
- ^^&__indicator {
128
- & svg {
129
- display: none;
130
- }
131
- }
132
- }
133
- }
134
- &__menu {
135
- width: 100%;
136
- background: var(--color-surface-primary);
137
- margin: -8px 0 0 0;
138
- border: solid 1px var(--color-surface-border-primary);
139
- border-top: none;
140
- position: absolute;
141
- left: 0;
142
- top: 100%;
143
- z-index: 100000;
144
- &-notice {
145
- padding: 10px 48px 10px 20px;
146
- &--no-options {
147
- @mixin text-m;
148
- }
149
- }
150
- &-list {
151
- overflow-y: scroll;
152
- max-height: 200px;
153
- background: var(--color-surface-primary);
154
- padding: 8px 0;
155
- &--is-multi {
156
- @mixin text-m;
157
- ^^^&__option {
158
- &--is-selected {
159
- }
160
- &--is-focused {
161
- background: none !important;
162
- /* display: flex;
163
- justify-content: center; */
164
- &:hover {
165
- background: #eee;
166
- cursor: pointer;
167
- }
168
- }
169
- &--is-disabled {
170
- border: solid 1px red;
171
- }
172
- }
173
- }
174
- ^^&__option {
175
- color: var(--color-surface-text-primary);
176
- padding: 16px 48px 16px 20px;
177
- display: flex;
178
- cursor: pointer;
179
- @mixin text-m;
180
- &:hover {
181
- background: var(--color-surface-primary-hover);
182
- }
183
- &-label {
184
- width: 100%;
185
- position: relative;
186
- display: block;
187
- z-index: 100;
188
- cursor: pointer;
189
- }
190
- &-checkbox {
191
- opacity: 0%;
192
- &:checked {
193
- & + .form-select {
194
- &__option-state {
195
- &::before {
196
- width: 8px;
197
- height: 8px;
198
- background: var(--color-surface-item-accent);
199
- border-radius: 50%;
200
- position: absolute;
201
- content: '';
202
- display: block;
203
- left: 2px;
204
- top: 2px;
205
- z-index: 2;
206
- }
207
- }
208
- }
209
- }
210
- }
211
- &-state {
212
- width: 14px;
213
- height: 14px;
214
- background: none;
215
- border: solid 1px var(--color-surface-border-accent);
216
- border-radius: 2px;
217
- position: absolute;
218
- content: '';
219
- display: block;
220
- left: 0;
221
- top: 2px;
222
- z-index: 1;
223
- &:hover {
224
- border: solid 1px var(--color-surface-border-accent);
225
- }
226
- }
227
- &-text {
228
- padding: 0 0 0 8px;
229
- }
230
- &--is-selected {
231
- color: var(--color-surface-text-primary);
232
- background: var(--color-surface-primary-hover);
233
- }
234
- &--is-focused {
235
- color: var(--color-surface-text-primary);
236
- background: var(--color-surface-primary-hover);
237
- }
238
- }
239
- }
240
- }
241
19
  }
@@ -9,6 +9,7 @@
9
9
  }
10
10
  .form {
11
11
  &__group {
12
+ width: 100%;
12
13
  margin: 0;
13
14
  &-wrapper {
14
15
  display: flex;
@@ -77,15 +78,6 @@
77
78
  .form {
78
79
  &__item {
79
80
  &&_state_error {
80
- /* & ^&-label {
81
- &-inner {
82
- color: var(--color-error-text-secondary);
83
- }
84
- }
85
- & ^&-inner {
86
- &-item {
87
- }
88
- } */
89
81
  }
90
82
  }
91
83
  }
@@ -102,15 +94,12 @@
102
94
  .form {
103
95
  &__item {
104
96
  &&_state_success {
105
- /* & ^&-label {
106
- &-inner {
107
- color: var(--color-success-text-primary);
108
- }
97
+ & .select__control {
98
+ border: 1px solid var(--color-success-border-primary);
99
+ }
100
+ & .input {
101
+ border: 1px solid var(--color-success-border-primary);
109
102
  }
110
- & ^&-inner {
111
- &-item {
112
- }
113
- } */
114
103
  }
115
104
  }
116
105
  }
@@ -257,6 +246,7 @@
257
246
  width: 100%;
258
247
  &__wrapper {
259
248
  width: 100%;
249
+ height: 100%;
260
250
  position: relative;
261
251
  }
262
252
  }
@@ -1,5 +1,6 @@
1
1
  .form {
2
2
  &__group {
3
+ width: 100%;
3
4
  margin: 0;
4
5
  &-wrapper {
5
6
  display: flex;
@@ -1,15 +1,6 @@
1
1
  .form {
2
2
  &__item {
3
3
  &&_state_error {
4
- /* & ^&-label {
5
- &-inner {
6
- color: var(--color-error-text-secondary);
7
- }
8
- }
9
- & ^&-inner {
10
- &-item {
11
- }
12
- } */
13
4
  }
14
5
  }
15
6
  }
@@ -1,15 +1,12 @@
1
1
  .form {
2
2
  &__item {
3
3
  &&_state_success {
4
- /* & ^&-label {
5
- &-inner {
6
- color: var(--color-success-text-primary);
7
- }
4
+ & .select__control {
5
+ border: 1px solid var(--color-success-border-primary);
6
+ }
7
+ & .input {
8
+ border: 1px solid var(--color-success-border-primary);
8
9
  }
9
- & ^&-inner {
10
- &-item {
11
- }
12
- } */
13
10
  }
14
11
  }
15
12
  }
@@ -21,16 +21,19 @@
21
21
  }
22
22
  }
23
23
  .form-field {
24
+ position: relative;
24
25
  }
25
26
  .form {
26
27
  &^&-field_type_float {
27
- position: relative;
28
+ gap: var(--form-field_type_float-gap);
29
+ margin: var(--form-field_type_float-margin);
30
+ padding: var(--form-field_type_float-padding);
28
31
  &^&__item_state_focus,
29
32
  &^&__item_state_filled {
30
33
  & .form {
31
34
  &-field {
32
35
  &__label {
33
- transform: scale(0.8) translate(10px, -9px);
36
+ transform: scale(0.85) translate(10px, 2px);
34
37
  }
35
38
  }
36
39
  }
@@ -48,14 +51,14 @@
48
51
  display: flex;
49
52
  top: 0;
50
53
  z-index: 2;
51
- transform: scale(1) translate(8px, 9px);
54
+ transform: scale(1) translate(8px, 20px);
52
55
  transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
53
56
  transform-origin: top left;
54
57
  background: var(--color-surface-primary);
55
58
  padding: 0 4px;
56
59
  }
57
60
  &__message {
58
- padding: 4px 0 12px 12px;
61
+ padding: 0 0 0 12px;
59
62
  }
60
63
  }
61
64
  }
@@ -70,7 +73,9 @@
70
73
  .form-field {
71
74
  &_type {
72
75
  &_normal {
73
- gap: 4px;
76
+ gap: var(--form-field_type_normal-gap, 4px);
77
+ margin: var(--form-field_type_normal-margin);
78
+ padding: var(--form-field_type_normal-padding);
74
79
  }
75
80
  }
76
81
  }
@@ -548,6 +548,7 @@ function FieldWrapperBase(props) {
548
548
  metaValid = props.metaValid,
549
549
  set = props.set,
550
550
  type = props.type,
551
+ hideMessage = props.hideMessage,
551
552
  isHidden = props.isHidden,
552
553
  Tag = props.tag,
553
554
  dataTour = props.dataTour,
@@ -628,7 +629,7 @@ function FieldWrapperBase(props) {
628
629
  direction: dividerDirection,
629
630
  size: dividerSize,
630
631
  fill: dividerFill
631
- })), /*#__PURE__*/React__default.default.createElement("div", {
632
+ })), !hideMessage && /*#__PURE__*/React__default.default.createElement("div", {
632
633
  className: "form-field__message"
633
634
  }, Boolean(showError) && /*#__PURE__*/React__default.default.createElement(Text.Text, {
634
635
  className: "form-field__message-item form-field__message-item_type-error",
@@ -741,7 +742,8 @@ var CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxFi
741
742
  onChange = props.onChange,
742
743
  fieldProps = props.fieldProps,
743
744
  inputProps = props.inputProps,
744
- classNameGroupItem = props.classNameGroupItem;
745
+ classNameGroupItem = props.classNameGroupItem,
746
+ hideMessage = props.hideMessage;
745
747
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
746
748
  name: name,
747
749
  type: "checkbox"
@@ -767,7 +769,8 @@ var CheckboxField = /*#__PURE__*/React__default.default.memo(function CheckboxFi
767
769
  metaSubmitFailed: meta.submitFailed,
768
770
  metaTouched: meta.touched,
769
771
  metaValid: meta.valid,
770
- tag: "label"
772
+ tag: "label",
773
+ hideMessage: hideMessage
771
774
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Checkbox.Checkbox, Object.assign({
772
775
  autoComplete: "nope",
773
776
  checked: input.checked,
@@ -801,6 +804,7 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
801
804
  label = props.label,
802
805
  name = props.name,
803
806
  messageType = props.messageType,
807
+ hideMessage = props.hideMessage,
804
808
  placeholder = props.placeholder;
805
809
  var _useForm = reactFinalForm.useForm(),
806
810
  change = _useForm.change;
@@ -822,7 +826,8 @@ var ChoiceField = /*#__PURE__*/React__default.default.memo(function ChoiceField(
822
826
  metaSubmitError: meta.submitError,
823
827
  metaSubmitFailed: meta.submitFailed,
824
828
  metaTouched: meta.touched,
825
- metaValid: meta.valid
829
+ metaValid: meta.valid,
830
+ hideMessage: hideMessage
826
831
  }, /*#__PURE__*/React__default.default.createElement(Choice.Choice, {
827
832
  options: options,
828
833
  inputName: input.name,
@@ -850,7 +855,8 @@ var CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(
850
855
  isRequired = props.isRequired,
851
856
  name = props.name,
852
857
  fieldProps = props.fieldProps,
853
- classNameGroupItem = props.classNameGroupItem;
858
+ classNameGroupItem = props.classNameGroupItem,
859
+ hideMessage = props.hideMessage;
854
860
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
855
861
  name: name
856
862
  }, function (_ref) {
@@ -868,7 +874,8 @@ var CustomField = /*#__PURE__*/React__default.default.memo(function CustomField(
868
874
  metaSubmitError: meta.submitError,
869
875
  metaSubmitFailed: meta.submitFailed,
870
876
  metaTouched: meta.touched,
871
- metaValid: meta.valid
877
+ metaValid: meta.valid,
878
+ hideMessage: hideMessage
872
879
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Component, Object.assign({}, props, {
873
880
  input: input,
874
881
  meta: meta
@@ -900,7 +907,8 @@ function DatePickerField(props) {
900
907
  props.iconRevealableShow;
901
908
  props.iconRevealableHide;
902
909
  props.iconShape;
903
- var onChange = props.onChange,
910
+ var hideMessage = props.hideMessage,
911
+ onChange = props.onChange,
904
912
  classNameGroupItem = props.classNameGroupItem;
905
913
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
906
914
  name: name
@@ -925,7 +933,8 @@ function DatePickerField(props) {
925
933
  metaSubmitError: meta.submitError,
926
934
  metaSubmitFailed: meta.submitFailed,
927
935
  metaTouched: meta.touched,
928
- metaValid: meta.valid
936
+ metaValid: meta.valid,
937
+ hideMessage: hideMessage
929
938
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(DatePicker.DatePickerInput, {
930
939
  name: input.name,
931
940
  value: input.value || '',
@@ -1479,6 +1488,7 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
1479
1488
  hintDescriptionTextColor = props.hintDescriptionTextColor,
1480
1489
  hintDescriptionTextWrap = props.hintDescriptionTextWrap,
1481
1490
  hintDescriptionTextWeight = props.hintDescriptionTextWeight,
1491
+ hideMessage = props.hideMessage,
1482
1492
  hintDescription = props.hintDescription,
1483
1493
  isShowFilename = props.isShowFilename,
1484
1494
  dropzoneProps = props.dropzoneProps,
@@ -1506,7 +1516,8 @@ var FileInput = /*#__PURE__*/React__default.default.memo(function FileInput(prop
1506
1516
  metaSubmitError: meta.submitError,
1507
1517
  metaSubmitFailed: meta.submitFailed,
1508
1518
  metaTouched: meta.touched,
1509
- metaValid: meta.valid
1519
+ metaValid: meta.valid,
1520
+ hideMessage: hideMessage
1510
1521
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(FileInputDropzone, {
1511
1522
  dropzoneProps: dropzoneProps,
1512
1523
  hintDescription: hintDescription,
@@ -1579,26 +1590,67 @@ var Group = /*#__PURE__*/React__default.default.memo(function Group(props) {
1579
1590
  labelTextColor = props.labelTextColor,
1580
1591
  labelTextSize = props.labelTextSize,
1581
1592
  labelTextWeight = props.labelTextWeight,
1593
+ message = props.message,
1594
+ errorMessageTextSize = props.errorMessageTextSize,
1595
+ errorMessageTextWeight = props.errorMessageTextWeight,
1596
+ errorMessageTextColor = props.errorMessageTextColor,
1597
+ messageTextSize = props.messageTextSize,
1598
+ messageTextWeight = props.messageTextWeight,
1599
+ messageTextColor = props.messageTextColor,
1582
1600
  children = props.children,
1583
- dataTour = props.dataTour;
1584
- return /*#__PURE__*/React__default.default.createElement("div", {
1585
- className: clsx__default.default('form__group', className),
1586
- "data-tour": dataTour
1587
- }, /*#__PURE__*/React__default.default.createElement("div", {
1588
- className: "form__group-wrapper"
1589
- }, before, /*#__PURE__*/React__default.default.createElement("div", {
1590
- className: "form__group-label"
1591
- }, /*#__PURE__*/React__default.default.createElement(Title.Title, {
1592
- textColor: labelTextColor,
1593
- size: labelTextSize,
1594
- textWeight: labelTextWeight
1595
- }, label)), /*#__PURE__*/React__default.default.createElement("div", {
1596
- className: "form__group-items"
1597
- }, children), after));
1601
+ dataTour = props.dataTour,
1602
+ name = props.name,
1603
+ showErrorsOnSubmit = props.showErrorsOnSubmit;
1604
+ return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
1605
+ name: name
1606
+ }, function (_ref) {
1607
+ _ref.input;
1608
+ var meta = _ref.meta;
1609
+ var error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
1610
+ var showError = React.useMemo(function () {
1611
+ if (showErrorsOnSubmit) {
1612
+ return meta.submitFailed && meta.touched && error;
1613
+ } else {
1614
+ return meta.touched && error;
1615
+ }
1616
+ }, [showErrorsOnSubmit, meta.submitFailed, meta.touched, error]);
1617
+ return /*#__PURE__*/React__default.default.createElement("div", {
1618
+ className: clsx__default.default('form__group', className),
1619
+ "data-tour": dataTour
1620
+ }, /*#__PURE__*/React__default.default.createElement("div", {
1621
+ className: "form__group-wrapper"
1622
+ }, before, /*#__PURE__*/React__default.default.createElement("div", {
1623
+ className: "form__group-label"
1624
+ }, /*#__PURE__*/React__default.default.createElement(Title.Title, {
1625
+ textColor: labelTextColor,
1626
+ size: labelTextSize,
1627
+ textWeight: labelTextWeight
1628
+ }, label)), /*#__PURE__*/React__default.default.createElement("div", {
1629
+ className: "form__group-items"
1630
+ }, children), after), Boolean(showError) && /*#__PURE__*/React__default.default.createElement("div", {
1631
+ className: "form-field__message"
1632
+ }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
1633
+ className: "form-field__message-item form-field__message-item_type-error",
1634
+ size: errorMessageTextSize,
1635
+ textWeight: errorMessageTextWeight,
1636
+ textColor: errorMessageTextColor,
1637
+ id: name + "-error"
1638
+ }, error)), Boolean(message) && !showError && /*#__PURE__*/React__default.default.createElement("div", {
1639
+ className: "form-field__message"
1640
+ }, /*#__PURE__*/React__default.default.createElement(Text.Text, {
1641
+ className: "form-field__message-item form-field__message-item_type_message",
1642
+ size: messageTextSize,
1643
+ textWeight: messageTextWeight,
1644
+ textColor: messageTextColor
1645
+ }, message)));
1646
+ });
1598
1647
  });
1599
1648
  Group.defaultProps = {
1600
1649
  inputProps: {},
1601
- fieldProps: {}
1650
+ fieldProps: {},
1651
+ type: 'normal',
1652
+ errorMessageTextSize: 's',
1653
+ errorMessageTextColor: 'errorTextSecondary'
1602
1654
  };
1603
1655
  Group.propTypes = {
1604
1656
  name: PropTypes__default.default.string.isRequired,
@@ -1622,6 +1674,7 @@ var InputField = /*#__PURE__*/React__default.default.memo(function InputField(pr
1622
1674
  iconRevealableShow = props.iconRevealableShow,
1623
1675
  iconRevealableHide = props.iconRevealableHide,
1624
1676
  iconShape = props.iconShape,
1677
+ hideMessage = props.hideMessage,
1625
1678
  onChange = props.onChange,
1626
1679
  classNameGroupItem = props.classNameGroupItem;
1627
1680
  var _useState = React.useState(false),
@@ -1663,9 +1716,10 @@ var InputField = /*#__PURE__*/React__default.default.memo(function InputField(pr
1663
1716
  metaSubmitError: meta.submitError,
1664
1717
  metaSubmitFailed: meta.submitFailed,
1665
1718
  metaTouched: meta.touched,
1666
- metaValid: meta.valid
1719
+ metaValid: meta.valid,
1720
+ hideMessage: hideMessage
1667
1721
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Input.Input, Object.assign({
1668
- className: clsx__default.default(meta.active && 'input_state_focus', meta.error && 'input_state_error'),
1722
+ className: clsx__default.default(meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
1669
1723
  autoComplete: "nope",
1670
1724
  name: input.name,
1671
1725
  type: inputType,
@@ -1846,7 +1900,8 @@ var RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(pr
1846
1900
  fieldProps = props.fieldProps,
1847
1901
  editableProps = props.editableProps,
1848
1902
  inputProps = props.inputProps,
1849
- onChange = props.onChange;
1903
+ onChange = props.onChange,
1904
+ hideMessage = props.hideMessage;
1850
1905
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
1851
1906
  name: name
1852
1907
  }, function (_ref) {
@@ -1864,7 +1919,8 @@ var RadioGroup = /*#__PURE__*/React__default.default.memo(function RadioGroup(pr
1864
1919
  metaSubmitError: meta.submitError,
1865
1920
  metaSubmitFailed: meta.submitFailed,
1866
1921
  metaTouched: meta.touched,
1867
- metaValid: meta.valid
1922
+ metaValid: meta.valid,
1923
+ hideMessage: hideMessage
1868
1924
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(RadioGroupList, {
1869
1925
  input: input,
1870
1926
  options: options,
@@ -1896,7 +1952,8 @@ function SegmentedField(props) {
1896
1952
  isRequired = props.isRequired,
1897
1953
  name = props.name,
1898
1954
  fieldProps = props.fieldProps,
1899
- inputProps = props.inputProps;
1955
+ inputProps = props.inputProps,
1956
+ hideMessage = props.hideMessage;
1900
1957
  var _useForm = reactFinalForm.useForm(),
1901
1958
  change = _useForm.change;
1902
1959
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
@@ -1932,7 +1989,8 @@ function SegmentedField(props) {
1932
1989
  metaSubmitError: meta.submitError,
1933
1990
  metaSubmitFailed: meta.submitFailed,
1934
1991
  metaTouched: meta.touched,
1935
- metaValid: meta.valid
1992
+ metaValid: meta.valid,
1993
+ hideMessage: hideMessage
1936
1994
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Segmented.Segmented, Object.assign({
1937
1995
  segments: options,
1938
1996
  setActiveSegment: setActiveSegment,
@@ -1981,7 +2039,8 @@ var SelectField = /*#__PURE__*/React__default.default.memo(function SelectField(
1981
2039
  selectProps = props.selectProps,
1982
2040
  selectRef = props.selectRef,
1983
2041
  onChange = props.onChange,
1984
- classNameGroupItem = props.classNameGroupItem;
2042
+ classNameGroupItem = props.classNameGroupItem,
2043
+ hideMessage = props.hideMessage;
1985
2044
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
1986
2045
  name: name
1987
2046
  }, function (_ref) {
@@ -2029,7 +2088,8 @@ var SelectField = /*#__PURE__*/React__default.default.memo(function SelectField(
2029
2088
  metaSubmitError: meta.submitError,
2030
2089
  metaSubmitFailed: meta.submitFailed,
2031
2090
  metaTouched: meta.touched,
2032
- metaValid: meta.valid
2091
+ metaValid: meta.valid,
2092
+ hideMessage: hideMessage
2033
2093
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Select.Select, Object.assign({
2034
2094
  className: "form-select-item",
2035
2095
  instanceId: "id_" + input.name,
@@ -2057,7 +2117,8 @@ var SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(
2057
2117
  onChange = props.onChange,
2058
2118
  fieldProps = props.fieldProps,
2059
2119
  inputProps = props.inputProps,
2060
- classNameGroupItem = props.classNameGroupItem;
2120
+ classNameGroupItem = props.classNameGroupItem,
2121
+ hideMessage = props.hideMessage;
2061
2122
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
2062
2123
  name: name,
2063
2124
  type: "checkbox"
@@ -2083,6 +2144,7 @@ var SwitchField = /*#__PURE__*/React__default.default.memo(function SwitchField(
2083
2144
  metaSubmitFailed: meta.submitFailed,
2084
2145
  metaTouched: meta.touched,
2085
2146
  metaValid: meta.valid,
2147
+ hideMessage: hideMessage,
2086
2148
  tag: "label"
2087
2149
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Switch.Switch, Object.assign({
2088
2150
  autoComplete: "nope",
@@ -2112,7 +2174,8 @@ var TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaFi
2112
2174
  name = props.name,
2113
2175
  fieldProps = props.fieldProps,
2114
2176
  inputProps = props.inputProps,
2115
- classNameGroupItem = props.classNameGroupItem;
2177
+ classNameGroupItem = props.classNameGroupItem,
2178
+ hideMessage = props.hideMessage;
2116
2179
  return /*#__PURE__*/React__default.default.createElement(reactFinalForm.Field, {
2117
2180
  name: name
2118
2181
  }, function (_ref) {
@@ -2130,7 +2193,8 @@ var TextareaField = /*#__PURE__*/React__default.default.memo(function TextareaFi
2130
2193
  metaSubmitError: meta.submitError,
2131
2194
  metaSubmitFailed: meta.submitFailed,
2132
2195
  metaTouched: meta.touched,
2133
- metaValid: meta.valid
2196
+ metaValid: meta.valid,
2197
+ hideMessage: hideMessage
2134
2198
  }, fieldProps), /*#__PURE__*/React__default.default.createElement(Textarea.Textarea, Object.assign({
2135
2199
  autoComplete: "nope",
2136
2200
  name: input.name,
@@ -2372,6 +2436,7 @@ function generateField(field, config, props) {
2372
2436
  var key = _ref[0],
2373
2437
  value = _ref[1];
2374
2438
  var groupProps = Object.assign({}, value, {
2439
+ hideMessage: field.hideMessage,
2375
2440
  classNameGroupItem: value.classNameGroupItem || 'form__group-item'
2376
2441
  });
2377
2442
  return generateField(groupProps, {
@@ -538,6 +538,7 @@ function FieldWrapperBase(props) {
538
538
  metaValid = props.metaValid,
539
539
  set = props.set,
540
540
  type = props.type,
541
+ hideMessage = props.hideMessage,
541
542
  isHidden = props.isHidden,
542
543
  Tag = props.tag,
543
544
  dataTour = props.dataTour,
@@ -618,7 +619,7 @@ function FieldWrapperBase(props) {
618
619
  direction: dividerDirection,
619
620
  size: dividerSize,
620
621
  fill: dividerFill
621
- })), /*#__PURE__*/React.createElement("div", {
622
+ })), !hideMessage && /*#__PURE__*/React.createElement("div", {
622
623
  className: "form-field__message"
623
624
  }, Boolean(showError) && /*#__PURE__*/React.createElement(Text, {
624
625
  className: "form-field__message-item form-field__message-item_type-error",
@@ -731,7 +732,8 @@ var CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
731
732
  onChange = props.onChange,
732
733
  fieldProps = props.fieldProps,
733
734
  inputProps = props.inputProps,
734
- classNameGroupItem = props.classNameGroupItem;
735
+ classNameGroupItem = props.classNameGroupItem,
736
+ hideMessage = props.hideMessage;
735
737
  return /*#__PURE__*/React.createElement(Field, {
736
738
  name: name,
737
739
  type: "checkbox"
@@ -757,7 +759,8 @@ var CheckboxField = /*#__PURE__*/React.memo(function CheckboxField(props) {
757
759
  metaSubmitFailed: meta.submitFailed,
758
760
  metaTouched: meta.touched,
759
761
  metaValid: meta.valid,
760
- tag: "label"
762
+ tag: "label",
763
+ hideMessage: hideMessage
761
764
  }, fieldProps), /*#__PURE__*/React.createElement(Checkbox, Object.assign({
762
765
  autoComplete: "nope",
763
766
  checked: input.checked,
@@ -791,6 +794,7 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
791
794
  label = props.label,
792
795
  name = props.name,
793
796
  messageType = props.messageType,
797
+ hideMessage = props.hideMessage,
794
798
  placeholder = props.placeholder;
795
799
  var _useForm = useForm(),
796
800
  change = _useForm.change;
@@ -812,7 +816,8 @@ var ChoiceField = /*#__PURE__*/React.memo(function ChoiceField(props) {
812
816
  metaSubmitError: meta.submitError,
813
817
  metaSubmitFailed: meta.submitFailed,
814
818
  metaTouched: meta.touched,
815
- metaValid: meta.valid
819
+ metaValid: meta.valid,
820
+ hideMessage: hideMessage
816
821
  }, /*#__PURE__*/React.createElement(Choice, {
817
822
  options: options,
818
823
  inputName: input.name,
@@ -840,7 +845,8 @@ var CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
840
845
  isRequired = props.isRequired,
841
846
  name = props.name,
842
847
  fieldProps = props.fieldProps,
843
- classNameGroupItem = props.classNameGroupItem;
848
+ classNameGroupItem = props.classNameGroupItem,
849
+ hideMessage = props.hideMessage;
844
850
  return /*#__PURE__*/React.createElement(Field, {
845
851
  name: name
846
852
  }, function (_ref) {
@@ -858,7 +864,8 @@ var CustomField = /*#__PURE__*/React.memo(function CustomField(props) {
858
864
  metaSubmitError: meta.submitError,
859
865
  metaSubmitFailed: meta.submitFailed,
860
866
  metaTouched: meta.touched,
861
- metaValid: meta.valid
867
+ metaValid: meta.valid,
868
+ hideMessage: hideMessage
862
869
  }, fieldProps), /*#__PURE__*/React.createElement(Component, Object.assign({}, props, {
863
870
  input: input,
864
871
  meta: meta
@@ -890,7 +897,8 @@ function DatePickerField(props) {
890
897
  props.iconRevealableShow;
891
898
  props.iconRevealableHide;
892
899
  props.iconShape;
893
- var onChange = props.onChange,
900
+ var hideMessage = props.hideMessage,
901
+ onChange = props.onChange,
894
902
  classNameGroupItem = props.classNameGroupItem;
895
903
  return /*#__PURE__*/React.createElement(Field, {
896
904
  name: name
@@ -915,7 +923,8 @@ function DatePickerField(props) {
915
923
  metaSubmitError: meta.submitError,
916
924
  metaSubmitFailed: meta.submitFailed,
917
925
  metaTouched: meta.touched,
918
- metaValid: meta.valid
926
+ metaValid: meta.valid,
927
+ hideMessage: hideMessage
919
928
  }, fieldProps), /*#__PURE__*/React.createElement(DatePickerInput, {
920
929
  name: input.name,
921
930
  value: input.value || '',
@@ -1469,6 +1478,7 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
1469
1478
  hintDescriptionTextColor = props.hintDescriptionTextColor,
1470
1479
  hintDescriptionTextWrap = props.hintDescriptionTextWrap,
1471
1480
  hintDescriptionTextWeight = props.hintDescriptionTextWeight,
1481
+ hideMessage = props.hideMessage,
1472
1482
  hintDescription = props.hintDescription,
1473
1483
  isShowFilename = props.isShowFilename,
1474
1484
  dropzoneProps = props.dropzoneProps,
@@ -1496,7 +1506,8 @@ var FileInput = /*#__PURE__*/React.memo(function FileInput(props) {
1496
1506
  metaSubmitError: meta.submitError,
1497
1507
  metaSubmitFailed: meta.submitFailed,
1498
1508
  metaTouched: meta.touched,
1499
- metaValid: meta.valid
1509
+ metaValid: meta.valid,
1510
+ hideMessage: hideMessage
1500
1511
  }, fieldProps), /*#__PURE__*/React.createElement(FileInputDropzone, {
1501
1512
  dropzoneProps: dropzoneProps,
1502
1513
  hintDescription: hintDescription,
@@ -1569,26 +1580,67 @@ var Group = /*#__PURE__*/React.memo(function Group(props) {
1569
1580
  labelTextColor = props.labelTextColor,
1570
1581
  labelTextSize = props.labelTextSize,
1571
1582
  labelTextWeight = props.labelTextWeight,
1583
+ message = props.message,
1584
+ errorMessageTextSize = props.errorMessageTextSize,
1585
+ errorMessageTextWeight = props.errorMessageTextWeight,
1586
+ errorMessageTextColor = props.errorMessageTextColor,
1587
+ messageTextSize = props.messageTextSize,
1588
+ messageTextWeight = props.messageTextWeight,
1589
+ messageTextColor = props.messageTextColor,
1572
1590
  children = props.children,
1573
- dataTour = props.dataTour;
1574
- return /*#__PURE__*/React.createElement("div", {
1575
- className: clsx('form__group', className),
1576
- "data-tour": dataTour
1577
- }, /*#__PURE__*/React.createElement("div", {
1578
- className: "form__group-wrapper"
1579
- }, before, /*#__PURE__*/React.createElement("div", {
1580
- className: "form__group-label"
1581
- }, /*#__PURE__*/React.createElement(Title, {
1582
- textColor: labelTextColor,
1583
- size: labelTextSize,
1584
- textWeight: labelTextWeight
1585
- }, label)), /*#__PURE__*/React.createElement("div", {
1586
- className: "form__group-items"
1587
- }, children), after));
1591
+ dataTour = props.dataTour,
1592
+ name = props.name,
1593
+ showErrorsOnSubmit = props.showErrorsOnSubmit;
1594
+ return /*#__PURE__*/React.createElement(Field, {
1595
+ name: name
1596
+ }, function (_ref) {
1597
+ _ref.input;
1598
+ var meta = _ref.meta;
1599
+ var error = meta.error || !meta.modifiedSinceLastSubmit && meta.submitError || false;
1600
+ var showError = useMemo(function () {
1601
+ if (showErrorsOnSubmit) {
1602
+ return meta.submitFailed && meta.touched && error;
1603
+ } else {
1604
+ return meta.touched && error;
1605
+ }
1606
+ }, [showErrorsOnSubmit, meta.submitFailed, meta.touched, error]);
1607
+ return /*#__PURE__*/React.createElement("div", {
1608
+ className: clsx('form__group', className),
1609
+ "data-tour": dataTour
1610
+ }, /*#__PURE__*/React.createElement("div", {
1611
+ className: "form__group-wrapper"
1612
+ }, before, /*#__PURE__*/React.createElement("div", {
1613
+ className: "form__group-label"
1614
+ }, /*#__PURE__*/React.createElement(Title, {
1615
+ textColor: labelTextColor,
1616
+ size: labelTextSize,
1617
+ textWeight: labelTextWeight
1618
+ }, label)), /*#__PURE__*/React.createElement("div", {
1619
+ className: "form__group-items"
1620
+ }, children), after), Boolean(showError) && /*#__PURE__*/React.createElement("div", {
1621
+ className: "form-field__message"
1622
+ }, /*#__PURE__*/React.createElement(Text, {
1623
+ className: "form-field__message-item form-field__message-item_type-error",
1624
+ size: errorMessageTextSize,
1625
+ textWeight: errorMessageTextWeight,
1626
+ textColor: errorMessageTextColor,
1627
+ id: name + "-error"
1628
+ }, error)), Boolean(message) && !showError && /*#__PURE__*/React.createElement("div", {
1629
+ className: "form-field__message"
1630
+ }, /*#__PURE__*/React.createElement(Text, {
1631
+ className: "form-field__message-item form-field__message-item_type_message",
1632
+ size: messageTextSize,
1633
+ textWeight: messageTextWeight,
1634
+ textColor: messageTextColor
1635
+ }, message)));
1636
+ });
1588
1637
  });
1589
1638
  Group.defaultProps = {
1590
1639
  inputProps: {},
1591
- fieldProps: {}
1640
+ fieldProps: {},
1641
+ type: 'normal',
1642
+ errorMessageTextSize: 's',
1643
+ errorMessageTextColor: 'errorTextSecondary'
1592
1644
  };
1593
1645
  Group.propTypes = {
1594
1646
  name: PropTypes.string.isRequired,
@@ -1612,6 +1664,7 @@ var InputField = /*#__PURE__*/React.memo(function InputField(props) {
1612
1664
  iconRevealableShow = props.iconRevealableShow,
1613
1665
  iconRevealableHide = props.iconRevealableHide,
1614
1666
  iconShape = props.iconShape,
1667
+ hideMessage = props.hideMessage,
1615
1668
  onChange = props.onChange,
1616
1669
  classNameGroupItem = props.classNameGroupItem;
1617
1670
  var _useState = useState(false),
@@ -1653,9 +1706,10 @@ var InputField = /*#__PURE__*/React.memo(function InputField(props) {
1653
1706
  metaSubmitError: meta.submitError,
1654
1707
  metaSubmitFailed: meta.submitFailed,
1655
1708
  metaTouched: meta.touched,
1656
- metaValid: meta.valid
1709
+ metaValid: meta.valid,
1710
+ hideMessage: hideMessage
1657
1711
  }, fieldProps), /*#__PURE__*/React.createElement(Input, Object.assign({
1658
- className: clsx(meta.active && 'input_state_focus', meta.error && 'input_state_error'),
1712
+ className: clsx(meta.active && 'input_state_focus', meta.error && meta.touched && 'input_state_error'),
1659
1713
  autoComplete: "nope",
1660
1714
  name: input.name,
1661
1715
  type: inputType,
@@ -1836,7 +1890,8 @@ var RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
1836
1890
  fieldProps = props.fieldProps,
1837
1891
  editableProps = props.editableProps,
1838
1892
  inputProps = props.inputProps,
1839
- onChange = props.onChange;
1893
+ onChange = props.onChange,
1894
+ hideMessage = props.hideMessage;
1840
1895
  return /*#__PURE__*/React.createElement(Field, {
1841
1896
  name: name
1842
1897
  }, function (_ref) {
@@ -1854,7 +1909,8 @@ var RadioGroup = /*#__PURE__*/React.memo(function RadioGroup(props) {
1854
1909
  metaSubmitError: meta.submitError,
1855
1910
  metaSubmitFailed: meta.submitFailed,
1856
1911
  metaTouched: meta.touched,
1857
- metaValid: meta.valid
1912
+ metaValid: meta.valid,
1913
+ hideMessage: hideMessage
1858
1914
  }, fieldProps), /*#__PURE__*/React.createElement(RadioGroupList, {
1859
1915
  input: input,
1860
1916
  options: options,
@@ -1886,7 +1942,8 @@ function SegmentedField(props) {
1886
1942
  isRequired = props.isRequired,
1887
1943
  name = props.name,
1888
1944
  fieldProps = props.fieldProps,
1889
- inputProps = props.inputProps;
1945
+ inputProps = props.inputProps,
1946
+ hideMessage = props.hideMessage;
1890
1947
  var _useForm = useForm(),
1891
1948
  change = _useForm.change;
1892
1949
  return /*#__PURE__*/React.createElement(Field, {
@@ -1922,7 +1979,8 @@ function SegmentedField(props) {
1922
1979
  metaSubmitError: meta.submitError,
1923
1980
  metaSubmitFailed: meta.submitFailed,
1924
1981
  metaTouched: meta.touched,
1925
- metaValid: meta.valid
1982
+ metaValid: meta.valid,
1983
+ hideMessage: hideMessage
1926
1984
  }, fieldProps), /*#__PURE__*/React.createElement(Segmented, Object.assign({
1927
1985
  segments: options,
1928
1986
  setActiveSegment: setActiveSegment,
@@ -1971,7 +2029,8 @@ var SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
1971
2029
  selectProps = props.selectProps,
1972
2030
  selectRef = props.selectRef,
1973
2031
  onChange = props.onChange,
1974
- classNameGroupItem = props.classNameGroupItem;
2032
+ classNameGroupItem = props.classNameGroupItem,
2033
+ hideMessage = props.hideMessage;
1975
2034
  return /*#__PURE__*/React.createElement(Field, {
1976
2035
  name: name
1977
2036
  }, function (_ref) {
@@ -2019,7 +2078,8 @@ var SelectField = /*#__PURE__*/React.memo(function SelectField(props) {
2019
2078
  metaSubmitError: meta.submitError,
2020
2079
  metaSubmitFailed: meta.submitFailed,
2021
2080
  metaTouched: meta.touched,
2022
- metaValid: meta.valid
2081
+ metaValid: meta.valid,
2082
+ hideMessage: hideMessage
2023
2083
  }, fieldProps), /*#__PURE__*/React.createElement(Select, Object.assign({
2024
2084
  className: "form-select-item",
2025
2085
  instanceId: "id_" + input.name,
@@ -2047,7 +2107,8 @@ var SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
2047
2107
  onChange = props.onChange,
2048
2108
  fieldProps = props.fieldProps,
2049
2109
  inputProps = props.inputProps,
2050
- classNameGroupItem = props.classNameGroupItem;
2110
+ classNameGroupItem = props.classNameGroupItem,
2111
+ hideMessage = props.hideMessage;
2051
2112
  return /*#__PURE__*/React.createElement(Field, {
2052
2113
  name: name,
2053
2114
  type: "checkbox"
@@ -2073,6 +2134,7 @@ var SwitchField = /*#__PURE__*/React.memo(function SwitchField(props) {
2073
2134
  metaSubmitFailed: meta.submitFailed,
2074
2135
  metaTouched: meta.touched,
2075
2136
  metaValid: meta.valid,
2137
+ hideMessage: hideMessage,
2076
2138
  tag: "label"
2077
2139
  }, fieldProps), /*#__PURE__*/React.createElement(Switch, Object.assign({
2078
2140
  autoComplete: "nope",
@@ -2102,7 +2164,8 @@ var TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
2102
2164
  name = props.name,
2103
2165
  fieldProps = props.fieldProps,
2104
2166
  inputProps = props.inputProps,
2105
- classNameGroupItem = props.classNameGroupItem;
2167
+ classNameGroupItem = props.classNameGroupItem,
2168
+ hideMessage = props.hideMessage;
2106
2169
  return /*#__PURE__*/React.createElement(Field, {
2107
2170
  name: name
2108
2171
  }, function (_ref) {
@@ -2120,7 +2183,8 @@ var TextareaField = /*#__PURE__*/React.memo(function TextareaField(props) {
2120
2183
  metaSubmitError: meta.submitError,
2121
2184
  metaSubmitFailed: meta.submitFailed,
2122
2185
  metaTouched: meta.touched,
2123
- metaValid: meta.valid
2186
+ metaValid: meta.valid,
2187
+ hideMessage: hideMessage
2124
2188
  }, fieldProps), /*#__PURE__*/React.createElement(Textarea, Object.assign({
2125
2189
  autoComplete: "nope",
2126
2190
  name: input.name,
@@ -2362,6 +2426,7 @@ function generateField(field, config, props) {
2362
2426
  var key = _ref[0],
2363
2427
  value = _ref[1];
2364
2428
  var groupProps = Object.assign({}, value, {
2429
+ hideMessage: field.hideMessage,
2365
2430
  classNameGroupItem: value.classNameGroupItem || 'form__group-item'
2366
2431
  });
2367
2432
  return generateField(groupProps, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itcase/forms",
3
- "version": "1.0.17",
3
+ "version": "1.0.19",
4
4
  "description": "Forms fields, inputs, etc.",
5
5
  "keywords": [
6
6
  "forms",