@dxc-technology/halstack-react 0.0.0-4e9134c → 0.0.0-4ec6fe9
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/README.md +1 -1
- package/dist/ThemeContext.js +134 -100
- package/dist/V3Select/V3Select.js +549 -0
- package/dist/V3Select/index.d.ts +27 -0
- package/dist/V3Textarea/V3Textarea.js +264 -0
- package/dist/V3Textarea/index.d.ts +27 -0
- package/dist/accordion/Accordion.js +66 -59
- package/dist/accordion/index.d.ts +28 -0
- package/dist/accordion-group/AccordionGroup.js +1 -3
- package/dist/accordion-group/index.d.ts +16 -0
- package/dist/alert/Alert.js +126 -111
- package/dist/alert/index.d.ts +51 -0
- package/dist/box/Box.js +1 -9
- package/dist/box/index.d.ts +25 -0
- package/dist/button/Button.js +33 -27
- package/dist/button/index.d.ts +24 -0
- package/dist/card/index.d.ts +22 -0
- package/dist/checkbox/Checkbox.js +26 -21
- package/dist/checkbox/index.d.ts +24 -0
- package/dist/chip/Chip.js +21 -25
- package/dist/chip/index.d.ts +22 -0
- package/dist/common/variables.js +771 -547
- package/dist/date/Date.js +7 -9
- package/dist/date/index.d.ts +27 -0
- package/dist/{new-date/NewDate.js → date-input/DateInput.js} +77 -72
- package/dist/date-input/index.d.ts +95 -0
- package/dist/dialog/Dialog.js +15 -32
- package/dist/dialog/index.d.ts +18 -0
- package/dist/dropdown/Dropdown.js +108 -68
- package/dist/dropdown/index.d.ts +26 -0
- package/dist/file-input/FileInput.js +644 -0
- package/dist/file-input/FileItem.js +287 -0
- package/dist/file-input/index.d.ts +81 -0
- package/dist/footer/Footer.js +63 -49
- package/dist/footer/Icons.js +77 -0
- package/dist/footer/index.d.ts +25 -0
- package/dist/header/Header.js +123 -84
- package/dist/header/Icons.js +59 -0
- package/dist/header/index.d.ts +25 -0
- package/dist/heading/Heading.js +13 -5
- package/dist/heading/index.d.ts +17 -0
- package/dist/input-text/Icons.js +22 -0
- package/dist/input-text/InputText.js +93 -60
- package/dist/input-text/index.d.ts +36 -0
- package/dist/layout/ApplicationLayout.js +5 -9
- package/dist/layout/Icons.js +55 -0
- package/dist/link/Link.js +4 -8
- package/dist/link/index.d.ts +23 -0
- package/dist/main.d.ts +40 -0
- package/dist/main.js +38 -30
- package/dist/{number/Number.js → number-input/NumberInput.js} +13 -11
- package/dist/{number/NumberContext.js → number-input/NumberInputContext.js} +2 -2
- package/dist/number-input/index.d.ts +113 -0
- package/dist/paginator/Icons.js +66 -0
- package/dist/paginator/Paginator.js +60 -38
- package/dist/paginator/index.d.ts +20 -0
- package/dist/{password/Password.js → password-input/PasswordInput.js} +21 -14
- package/dist/password-input/index.d.ts +94 -0
- package/dist/progress-bar/ProgressBar.js +62 -26
- package/dist/progress-bar/index.d.ts +18 -0
- package/dist/radio/index.d.ts +23 -0
- package/dist/resultsetTable/index.d.ts +19 -0
- package/dist/select/Select.js +872 -339
- package/dist/select/index.d.ts +53 -0
- package/dist/sidenav/Sidenav.js +11 -15
- package/dist/sidenav/index.d.ts +13 -0
- package/dist/slider/Slider.js +155 -66
- package/dist/slider/index.d.ts +29 -0
- package/dist/spinner/Spinner.js +225 -58
- package/dist/spinner/index.d.ts +17 -0
- package/dist/switch/index.d.ts +24 -0
- package/dist/table/Table.js +5 -1
- package/dist/table/index.d.ts +13 -0
- package/dist/tabs/index.d.ts +19 -0
- package/dist/tag/Tag.js +37 -35
- package/dist/tag/index.d.ts +24 -0
- package/dist/{new-input-text/NewInputText.js → text-input/TextInput.js} +192 -175
- package/dist/text-input/index.d.ts +135 -0
- package/dist/textarea/Textarea.js +233 -124
- package/dist/textarea/index.d.ts +117 -0
- package/dist/toggle/index.d.ts +21 -0
- package/dist/toggle-group/ToggleGroup.js +130 -44
- package/dist/toggle-group/index.d.ts +21 -0
- package/dist/upload/buttons-upload/ButtonsUpload.js +12 -12
- package/dist/upload/buttons-upload/Icons.js +40 -0
- package/dist/upload/dragAndDropArea/DragAndDropArea.js +23 -19
- package/dist/upload/dragAndDropArea/Icons.js +39 -0
- package/dist/upload/file-upload/FileToUpload.js +27 -22
- package/dist/upload/file-upload/Icons.js +66 -0
- package/dist/upload/index.d.ts +15 -0
- package/dist/upload/transaction/Icons.js +160 -0
- package/dist/upload/transaction/Transaction.js +18 -41
- package/dist/upload/transactions/Transactions.js +11 -11
- package/dist/wizard/Icons.js +65 -0
- package/dist/wizard/Wizard.js +11 -17
- package/dist/wizard/index.d.ts +18 -0
- package/package.json +6 -9
- package/test/Date.test.js +13 -11
- package/test/{NewDate.test.js → DateInput.test.js} +71 -29
- package/test/FileInput.test.js +201 -0
- package/test/Footer.test.js +2 -7
- package/test/Header.test.js +5 -10
- package/test/Heading.test.js +60 -12
- package/test/{Number.test.js → NumberInput.test.js} +85 -67
- package/test/Paginator.test.js +6 -2
- package/test/PasswordInput.test.js +83 -0
- package/test/ResultsetTable.test.js +6 -6
- package/test/Select.test.js +371 -148
- package/test/Slider.test.js +9 -17
- package/test/Spinner.test.js +5 -0
- package/test/{NewInputText.test.js → TextInput.test.js} +149 -234
- package/test/Textarea.test.js +193 -0
- package/test/ToggleGroup.test.js +5 -1
- package/test/Upload.test.js +1 -1
- package/test/V3Select.test.js +212 -0
- package/test/{TextArea.test.js → V3TextArea.test.js} +6 -7
- package/dist/accordion/Accordion.stories.js +0 -207
- package/dist/accordion/readme.md +0 -96
- package/dist/accordion-group/AccordionGroup.stories.js +0 -207
- package/dist/accordion-group/readme.md +0 -70
- package/dist/alert/Alert.stories.js +0 -158
- package/dist/alert/close.svg +0 -4
- package/dist/alert/error.svg +0 -4
- package/dist/alert/info.svg +0 -4
- package/dist/alert/readme.md +0 -43
- package/dist/alert/success.svg +0 -4
- package/dist/alert/warning.svg +0 -4
- package/dist/button/Button.stories.js +0 -224
- package/dist/button/readme.md +0 -93
- package/dist/checkbox/Checkbox.stories.js +0 -144
- package/dist/checkbox/readme.md +0 -116
- package/dist/date/Date.stories.js +0 -205
- package/dist/date/readme.md +0 -73
- package/dist/dialog/Dialog.stories.js +0 -217
- package/dist/dialog/readme.md +0 -32
- package/dist/dropdown/Dropdown.stories.js +0 -249
- package/dist/dropdown/baseline-arrow_drop_down.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_down_wh.svg +0 -4
- package/dist/dropdown/baseline-arrow_drop_up.svg +0 -1
- package/dist/dropdown/baseline-arrow_drop_up_wh.svg +0 -4
- package/dist/dropdown/readme.md +0 -69
- package/dist/footer/Footer.stories.js +0 -94
- package/dist/footer/dxc_logo.svg +0 -15
- package/dist/footer/readme.md +0 -41
- package/dist/header/Header.stories.js +0 -176
- package/dist/header/close_icon.svg +0 -1
- package/dist/header/dxc_logo_black.svg +0 -8
- package/dist/header/hamb_menu_black.svg +0 -1
- package/dist/header/hamb_menu_white.svg +0 -1
- package/dist/header/readme.md +0 -33
- package/dist/input-text/InputText.stories.js +0 -209
- package/dist/input-text/error.svg +0 -1
- package/dist/input-text/readme.md +0 -91
- package/dist/layout/facebook.svg +0 -45
- package/dist/layout/linkedin.svg +0 -50
- package/dist/layout/twitter.svg +0 -53
- package/dist/link/readme.md +0 -51
- package/dist/new-textarea/NewTextarea.js +0 -342
- package/dist/paginator/images/next.svg +0 -3
- package/dist/paginator/images/nextPage.svg +0 -3
- package/dist/paginator/images/previous.svg +0 -3
- package/dist/paginator/images/previousPage.svg +0 -3
- package/dist/paginator/readme.md +0 -50
- package/dist/password/styles.css +0 -3
- package/dist/progress-bar/ProgressBar.stories.js +0 -280
- package/dist/progress-bar/readme.md +0 -63
- package/dist/radio/Radio.stories.js +0 -166
- package/dist/radio/readme.md +0 -70
- package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
- package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
- package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
- package/dist/select/Select.stories.js +0 -235
- package/dist/select/readme.md +0 -72
- package/dist/slider/Slider.stories.js +0 -241
- package/dist/slider/readme.md +0 -64
- package/dist/spinner/Spinner.stories.js +0 -183
- package/dist/spinner/readme.md +0 -65
- package/dist/switch/Switch.stories.js +0 -134
- package/dist/switch/readme.md +0 -133
- package/dist/tabs/Tabs.stories.js +0 -130
- package/dist/tabs/readme.md +0 -78
- package/dist/tabs-for-sections/TabsForSections.js +0 -92
- package/dist/tabs-for-sections/readme.md +0 -78
- package/dist/toggle/Toggle.stories.js +0 -297
- package/dist/toggle/readme.md +0 -80
- package/dist/toggle-group/readme.md +0 -82
- package/dist/upload/Upload.stories.js +0 -72
- package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
- package/dist/upload/buttons-upload/upload-button.svg +0 -1
- package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
- package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
- package/dist/upload/file-upload/audio-icon.svg +0 -4
- package/dist/upload/file-upload/close.svg +0 -4
- package/dist/upload/file-upload/file-icon.svg +0 -4
- package/dist/upload/file-upload/video-icon.svg +0 -4
- package/dist/upload/readme.md +0 -37
- package/dist/upload/transaction/audio-icon-err.svg +0 -4
- package/dist/upload/transaction/audio-icon.svg +0 -4
- package/dist/upload/transaction/error-icon.svg +0 -4
- package/dist/upload/transaction/file-icon-err.svg +0 -4
- package/dist/upload/transaction/file-icon.svg +0 -4
- package/dist/upload/transaction/image-icon-err.svg +0 -4
- package/dist/upload/transaction/image-icon.svg +0 -4
- package/dist/upload/transaction/success-icon.svg +0 -4
- package/dist/upload/transaction/video-icon-err.svg +0 -4
- package/dist/upload/transaction/video-icon.svg +0 -4
- package/dist/wizard/invalid_icon.svg +0 -5
- package/dist/wizard/valid_icon.svg +0 -5
- package/dist/wizard/validation-wrong.svg +0 -6
- package/test/NewTextarea.test.js +0 -202
- package/test/Password.test.js +0 -76
- package/test/TabsForSections.test.js +0 -34
|
@@ -33,11 +33,31 @@ var _uuid = require("uuid");
|
|
|
33
33
|
|
|
34
34
|
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
|
|
35
35
|
|
|
36
|
-
var
|
|
36
|
+
var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext.js"));
|
|
37
37
|
|
|
38
|
-
function
|
|
38
|
+
function _templateObject17() {
|
|
39
39
|
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n align-items: center;\n font-size: 0.875rem;\n line-height: 1.75em;\n"]);
|
|
40
40
|
|
|
41
|
+
_templateObject17 = function _templateObject17() {
|
|
42
|
+
return data;
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
return data;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function _templateObject16() {
|
|
49
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n margin-right: 0.5rem;\n height: 18px;\n width: 18px;\n color: ", ";\n\n svg {\n line-height: 1.75em;\n font-size: 0.875rem;\n }\n"]);
|
|
50
|
+
|
|
51
|
+
_templateObject16 = function _templateObject16() {
|
|
52
|
+
return data;
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
return data;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
function _templateObject15() {
|
|
59
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n color: ", ";\n font-size: 0.875rem;\n line-height: 1.75em;\n"]);
|
|
60
|
+
|
|
41
61
|
_templateObject15 = function _templateObject15() {
|
|
42
62
|
return data;
|
|
43
63
|
};
|
|
@@ -46,7 +66,7 @@ function _templateObject15() {
|
|
|
46
66
|
}
|
|
47
67
|
|
|
48
68
|
function _templateObject14() {
|
|
49
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
69
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n padding: calc((39px - 1.75em) / 2) 0 calc((39px - 1.75em) / 2) 1em;\n line-height: 1.75em;\n list-style-type: none;\n cursor: pointer;\n\n ", "\n"]);
|
|
50
70
|
|
|
51
71
|
_templateObject14 = function _templateObject14() {
|
|
52
72
|
return data;
|
|
@@ -56,7 +76,7 @@ function _templateObject14() {
|
|
|
56
76
|
}
|
|
57
77
|
|
|
58
78
|
function _templateObject13() {
|
|
59
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
79
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n background-color: ", ";\n position: absolute;\n z-index: 1;\n max-height: 160px;\n overflow: auto;\n top: calc(100% + 4px);\n left: 0;\n margin: 0;\n padding: 0;\n width: 100%;\n box-sizing: border-box;\n cursor: default;\n border-radius: 4px;\n border: 1px solid ", ";\n color: ", ";\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n"]);
|
|
60
80
|
|
|
61
81
|
_templateObject13 = function _templateObject13() {
|
|
62
82
|
return data;
|
|
@@ -66,7 +86,7 @@ function _templateObject13() {
|
|
|
66
86
|
}
|
|
67
87
|
|
|
68
88
|
function _templateObject12() {
|
|
69
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
89
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n min-height: 1.5em;\n color: ", ";\n font-family: ", ";\n font-size: 0.75rem;\n font-weight: 400;\n line-height: 1.5em;\n"]);
|
|
70
90
|
|
|
71
91
|
_templateObject12 = function _templateObject12() {
|
|
72
92
|
return data;
|
|
@@ -76,7 +96,7 @@ function _templateObject12() {
|
|
|
76
96
|
}
|
|
77
97
|
|
|
78
98
|
function _templateObject11() {
|
|
79
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
99
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n padding: 3px;\n height: 18px;\n width: 18px;\n margin-left: calc(1rem * 0.25);\n color: ", ";\n\n svg {\n line-height: 18px;\n font-size: 1.25rem;\n }\n"]);
|
|
80
100
|
|
|
81
101
|
_templateObject11 = function _templateObject11() {
|
|
82
102
|
return data;
|
|
@@ -86,7 +106,7 @@ function _templateObject11() {
|
|
|
86
106
|
}
|
|
87
107
|
|
|
88
108
|
function _templateObject10() {
|
|
89
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
109
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(1rem * 1.5);\n line-height: calc(1rem * 1.5);\n margin: 0 calc(1rem * 0.25);\n padding: 0 0 0 calc(1rem * 0.5);\n ", ";\n font-family: ", ";\n font-size: 1rem;\n pointer-events: none;\n"]);
|
|
90
110
|
|
|
91
111
|
_templateObject10 = function _templateObject10() {
|
|
92
112
|
return data;
|
|
@@ -96,7 +116,7 @@ function _templateObject10() {
|
|
|
96
116
|
}
|
|
97
117
|
|
|
98
118
|
function _templateObject9() {
|
|
99
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(1rem * 1.5);\n line-height: calc(1rem * 1.5);\n margin:
|
|
119
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(1rem * 1.5);\n line-height: calc(1rem * 1.5);\n margin-left: calc(1rem * 0.25);\n padding: 0 calc(1rem * 0.5) 0 0;\n ", ";\n font-family: ", ";\n font-size: 1rem;\n pointer-events: none;\n"]);
|
|
100
120
|
|
|
101
121
|
_templateObject9 = function _templateObject9() {
|
|
102
122
|
return data;
|
|
@@ -106,7 +126,7 @@ function _templateObject9() {
|
|
|
106
126
|
}
|
|
107
127
|
|
|
108
128
|
function _templateObject8() {
|
|
109
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
129
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-wrap: wrap;\n align-content: center;\n height: 24px;\n width: 24px;\n font-size: 1rem;\n font-family: ", ";\n border: 1px solid transparent;\n border-radius: 2px;\n padding: 3px;\n margin-left: calc(1rem * 0.25);\n ", "\n\n box-shadow: 0 0 0 2px transparent;\n background-color: ", ";\n\n color: ", ";\n\n ", "\n\n svg {\n line-height: 18px;\n }\n"]);
|
|
110
130
|
|
|
111
131
|
_templateObject8 = function _templateObject8() {
|
|
112
132
|
return data;
|
|
@@ -116,7 +136,7 @@ function _templateObject8() {
|
|
|
116
136
|
}
|
|
117
137
|
|
|
118
138
|
function _templateObject7() {
|
|
119
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n
|
|
139
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 16px;\n height: 16px;\n"]);
|
|
120
140
|
|
|
121
141
|
_templateObject7 = function _templateObject7() {
|
|
122
142
|
return data;
|
|
@@ -136,7 +156,7 @@ function _templateObject6() {
|
|
|
136
156
|
}
|
|
137
157
|
|
|
138
158
|
function _templateObject5() {
|
|
139
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n position: relative;\n align-items: center;\n height: calc(calc(1rem * 2.5) - calc(1px * 2));\n margin: calc(1rem * 0.25) 0;\n padding: 0 calc(1rem * 0.5);\n\n ", "\n
|
|
159
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n position: relative;\n align-items: center;\n height: calc(calc(1rem * 2.5) - calc(1px * 2));\n margin: calc(1rem * 0.25) 0;\n padding: 0 calc(1rem * 0.5);\n\n ", "\n box-shadow: 0 0 0 2px transparent;\n border-radius: 4px;\n border: 1px solid\n ", ";\n ", "\n ", ";\n\n ", ";\n"]);
|
|
140
160
|
|
|
141
161
|
_templateObject5 = function _templateObject5() {
|
|
142
162
|
return data;
|
|
@@ -146,7 +166,7 @@ function _templateObject5() {
|
|
|
146
166
|
}
|
|
147
167
|
|
|
148
168
|
function _templateObject4() {
|
|
149
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height:
|
|
169
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
|
|
150
170
|
|
|
151
171
|
_templateObject4 = function _templateObject4() {
|
|
152
172
|
return data;
|
|
@@ -166,7 +186,7 @@ function _templateObject3() {
|
|
|
166
186
|
}
|
|
167
187
|
|
|
168
188
|
function _templateObject2() {
|
|
169
|
-
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height:
|
|
189
|
+
var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"]);
|
|
170
190
|
|
|
171
191
|
_templateObject2 = function _templateObject2() {
|
|
172
192
|
return data;
|
|
@@ -206,19 +226,25 @@ var makeCancelable = function makeCancelable(promise) {
|
|
|
206
226
|
};
|
|
207
227
|
};
|
|
208
228
|
|
|
209
|
-
var
|
|
210
|
-
return "
|
|
229
|
+
var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
|
|
230
|
+
return "This field is required. Please, enter a value.";
|
|
211
231
|
};
|
|
212
232
|
|
|
213
|
-
var
|
|
214
|
-
return
|
|
233
|
+
var getLengthErrorMessage = function getLengthErrorMessage(length) {
|
|
234
|
+
return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
|
|
215
235
|
};
|
|
216
236
|
|
|
217
237
|
var getPatternErrorMessage = function getPatternErrorMessage() {
|
|
218
238
|
return "Please match the format requested.";
|
|
219
239
|
};
|
|
220
240
|
|
|
221
|
-
var
|
|
241
|
+
var patternMatch = function patternMatch(pattern, value) {
|
|
242
|
+
return new RegExp(pattern).test(value);
|
|
243
|
+
};
|
|
244
|
+
|
|
245
|
+
var DxcTextInput = _react["default"].forwardRef(function (_ref, ref) {
|
|
246
|
+
var _action$title;
|
|
247
|
+
|
|
222
248
|
var _ref$label = _ref.label,
|
|
223
249
|
label = _ref$label === void 0 ? "" : _ref$label,
|
|
224
250
|
_ref$name = _ref.name,
|
|
@@ -243,12 +269,14 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
243
269
|
onBlur = _ref.onBlur,
|
|
244
270
|
_ref$error = _ref.error,
|
|
245
271
|
error = _ref$error === void 0 ? "" : _ref$error,
|
|
246
|
-
margin = _ref.margin,
|
|
247
|
-
_ref$size = _ref.size,
|
|
248
|
-
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
249
272
|
suggestions = _ref.suggestions,
|
|
250
273
|
pattern = _ref.pattern,
|
|
251
274
|
length = _ref.length,
|
|
275
|
+
_ref$autocomplete = _ref.autocomplete,
|
|
276
|
+
autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
|
|
277
|
+
margin = _ref.margin,
|
|
278
|
+
_ref$size = _ref.size,
|
|
279
|
+
size = _ref$size === void 0 ? "medium" : _ref$size,
|
|
252
280
|
_ref$tabIndex = _ref.tabIndex,
|
|
253
281
|
tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
|
|
254
282
|
|
|
@@ -269,67 +297,44 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
269
297
|
|
|
270
298
|
var _useState7 = (0, _react.useState)(false),
|
|
271
299
|
_useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
|
|
272
|
-
|
|
273
|
-
|
|
300
|
+
isScrollable = _useState8[0],
|
|
301
|
+
changeIsScrollable = _useState8[1];
|
|
274
302
|
|
|
275
303
|
var _useState9 = (0, _react.useState)(false),
|
|
276
304
|
_useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
|
|
277
|
-
|
|
278
|
-
|
|
305
|
+
isActiveSuggestion = _useState10[0],
|
|
306
|
+
changeIsActiveSuggestion = _useState10[1];
|
|
279
307
|
|
|
280
308
|
var _useState11 = (0, _react.useState)(false),
|
|
281
309
|
_useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
|
|
282
|
-
|
|
283
|
-
|
|
310
|
+
isAutosuggestError = _useState12[0],
|
|
311
|
+
changeIsAutosuggestError = _useState12[1];
|
|
284
312
|
|
|
285
|
-
var _useState13 = (0, _react.useState)(
|
|
313
|
+
var _useState13 = (0, _react.useState)([]),
|
|
286
314
|
_useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
|
|
287
|
-
|
|
288
|
-
|
|
315
|
+
filteredSuggestions = _useState14[0],
|
|
316
|
+
changeFilteredSuggestions = _useState14[1];
|
|
289
317
|
|
|
290
|
-
var _useState15 = (0, _react.useState)(
|
|
318
|
+
var _useState15 = (0, _react.useState)(-1),
|
|
291
319
|
_useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
var _useState17 = (0, _react.useState)(
|
|
296
|
-
_useState18 = (0, _slicedToArray2["default"])(_useState17,
|
|
297
|
-
|
|
298
|
-
changeFilteredSuggestions = _useState18[1];
|
|
299
|
-
|
|
300
|
-
var _useState19 = (0, _react.useState)(-1),
|
|
301
|
-
_useState20 = (0, _slicedToArray2["default"])(_useState19, 2),
|
|
302
|
-
visualFocusedSuggIndex = _useState20[0],
|
|
303
|
-
changeVisualFocusedSuggIndex = _useState20[1];
|
|
304
|
-
|
|
305
|
-
var _useState21 = (0, _react.useState)(null),
|
|
306
|
-
_useState22 = (0, _slicedToArray2["default"])(_useState21, 2),
|
|
307
|
-
minNumber = _useState22[0],
|
|
308
|
-
setMinNumber = _useState22[1];
|
|
309
|
-
|
|
310
|
-
var _useState23 = (0, _react.useState)(null),
|
|
311
|
-
_useState24 = (0, _slicedToArray2["default"])(_useState23, 2),
|
|
312
|
-
maxNumber = _useState24[0],
|
|
313
|
-
setMaxNumber = _useState24[1];
|
|
314
|
-
|
|
315
|
-
var _useState25 = (0, _react.useState)(null),
|
|
316
|
-
_useState26 = (0, _slicedToArray2["default"])(_useState25, 2),
|
|
317
|
-
stepNumber = _useState26[0],
|
|
318
|
-
setStepNumber = _useState26[1];
|
|
320
|
+
visualFocusedSuggIndex = _useState16[0],
|
|
321
|
+
changeVisualFocusedSuggIndex = _useState16[1];
|
|
322
|
+
|
|
323
|
+
var _useState17 = (0, _react.useState)("input-".concat((0, _uuid.v4)())),
|
|
324
|
+
_useState18 = (0, _slicedToArray2["default"])(_useState17, 1),
|
|
325
|
+
inputId = _useState18[0];
|
|
319
326
|
|
|
320
327
|
var suggestionsRef = (0, _react.useRef)(null);
|
|
321
328
|
var inputRef = (0, _react.useRef)(null);
|
|
322
329
|
var actionRef = (0, _react.useRef)(null);
|
|
323
330
|
var colorsTheme = (0, _useTheme["default"])();
|
|
324
331
|
var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
|
|
325
|
-
var inputId = "input-".concat((0, _uuid.v4)());
|
|
326
332
|
var autosuggestId = "".concat(inputId, "-listBox");
|
|
327
|
-
var
|
|
333
|
+
var errorId = "error-message-".concat(inputId);
|
|
334
|
+
var numberInputContext = (0, _react.useContext)(_NumberInputContext["default"]);
|
|
328
335
|
|
|
329
|
-
var
|
|
330
|
-
|
|
331
|
-
value !== null && value !== void 0 ? value : setInnerValue(newValue);
|
|
332
|
-
typeof onChange === "function" && onChange(changedValue);
|
|
336
|
+
var isNotOptional = function isNotOptional(value) {
|
|
337
|
+
return value === "" && !optional;
|
|
333
338
|
};
|
|
334
339
|
|
|
335
340
|
var isLengthIncorrect = function isLengthIncorrect(value) {
|
|
@@ -337,15 +342,17 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
337
342
|
};
|
|
338
343
|
|
|
339
344
|
var isNumberIncorrect = function isNumberIncorrect(value) {
|
|
340
|
-
return minNumber && parseInt(value) < minNumber || maxNumber && parseInt(value) > maxNumber;
|
|
345
|
+
return (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
|
|
346
|
+
};
|
|
347
|
+
|
|
348
|
+
var isTextInputType = function isTextInputType() {
|
|
349
|
+
var _inputRef$current, _inputRef$current2;
|
|
350
|
+
|
|
351
|
+
return !(inputRef !== null && inputRef !== void 0 && (_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.getAttribute("type")) || (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current2 = inputRef.current) === null || _inputRef$current2 === void 0 ? void 0 : _inputRef$current2.getAttribute("type")) === "text";
|
|
341
352
|
};
|
|
342
353
|
|
|
343
354
|
var getNumberErrorMessage = function getNumberErrorMessage(value) {
|
|
344
|
-
if (minNumber && parseInt(value) < minNumber)
|
|
345
|
-
return "Value must be greater than or equal to ".concat(minNumber, ".");
|
|
346
|
-
} else if (maxNumber && parseInt(value) > maxNumber) {
|
|
347
|
-
return "Value must be less than or equal to ".concat(maxNumber, ".");
|
|
348
|
-
}
|
|
355
|
+
if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(value) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) return "Value must be greater than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber, ".");else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(value) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) return "Value must be less than or equal to ".concat(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber, ".");
|
|
349
356
|
};
|
|
350
357
|
|
|
351
358
|
var hasInputSuggestions = function hasInputSuggestions() {
|
|
@@ -361,6 +368,27 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
361
368
|
changeVisualFocusedSuggIndex(-1);
|
|
362
369
|
};
|
|
363
370
|
|
|
371
|
+
var changeValue = function changeValue(newValue) {
|
|
372
|
+
value !== null && value !== void 0 ? value : setInnerValue(newValue);
|
|
373
|
+
var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
|
|
374
|
+
if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
375
|
+
value: changedValue,
|
|
376
|
+
error: getNotOptionalErrorMessage()
|
|
377
|
+
});else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
378
|
+
value: changedValue,
|
|
379
|
+
error: getLengthErrorMessage(length)
|
|
380
|
+
});else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
381
|
+
value: changedValue,
|
|
382
|
+
error: getPatternErrorMessage()
|
|
383
|
+
});else if (newValue && isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
384
|
+
value: changedValue,
|
|
385
|
+
error: getNumberErrorMessage(newValue)
|
|
386
|
+
});else onChange === null || onChange === void 0 ? void 0 : onChange({
|
|
387
|
+
value: changedValue,
|
|
388
|
+
error: null
|
|
389
|
+
});
|
|
390
|
+
};
|
|
391
|
+
|
|
364
392
|
var handleInputContainerOnClick = function handleInputContainerOnClick() {
|
|
365
393
|
document.activeElement !== actionRef.current && inputRef.current.focus();
|
|
366
394
|
};
|
|
@@ -376,36 +404,22 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
376
404
|
|
|
377
405
|
var handleIOnBlur = function handleIOnBlur(event) {
|
|
378
406
|
suggestions && closeSuggestions();
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
}
|
|
395
|
-
changeIsError(true);
|
|
396
|
-
changeValidationError(getNumberErrorMessage(event.target.value));
|
|
397
|
-
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
398
|
-
value: event.target.value,
|
|
399
|
-
error: getNumberErrorMessage(event.target.value)
|
|
400
|
-
});
|
|
401
|
-
} else {
|
|
402
|
-
changeIsError(false);
|
|
403
|
-
changeValidationError("");
|
|
404
|
-
onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
405
|
-
value: event.target.value,
|
|
406
|
-
error: null
|
|
407
|
-
});
|
|
408
|
-
}
|
|
407
|
+
if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
408
|
+
value: event.target.value,
|
|
409
|
+
error: getNotOptionalErrorMessage()
|
|
410
|
+
});else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
411
|
+
value: event.target.value,
|
|
412
|
+
error: getLengthErrorMessage(length)
|
|
413
|
+
});else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
414
|
+
value: event.target.value,
|
|
415
|
+
error: getPatternErrorMessage()
|
|
416
|
+
});else if (event.target.value && isNumberIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
417
|
+
value: event.target.value,
|
|
418
|
+
error: getNumberErrorMessage(event.target.value)
|
|
419
|
+
});else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
|
|
420
|
+
value: event.target.value,
|
|
421
|
+
error: null
|
|
422
|
+
});
|
|
409
423
|
};
|
|
410
424
|
|
|
411
425
|
var handleIOnFocus = function handleIOnFocus() {
|
|
@@ -416,7 +430,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
416
430
|
switch (event.keyCode) {
|
|
417
431
|
case 40:
|
|
418
432
|
// Arrow Down
|
|
419
|
-
if (
|
|
433
|
+
if (numberInputContext) {
|
|
420
434
|
decrementNumber();
|
|
421
435
|
event.preventDefault();
|
|
422
436
|
} else {
|
|
@@ -436,7 +450,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
436
450
|
|
|
437
451
|
case 38:
|
|
438
452
|
// Arrow Up
|
|
439
|
-
if (
|
|
453
|
+
if (numberInputContext) {
|
|
440
454
|
incrementNumber();
|
|
441
455
|
event.preventDefault();
|
|
442
456
|
} else {
|
|
@@ -478,15 +492,12 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
478
492
|
};
|
|
479
493
|
|
|
480
494
|
var setNumberProps = function setNumberProps(type, min, max, step) {
|
|
481
|
-
var _inputRef$
|
|
495
|
+
var _inputRef$current3, _inputRef$current4, _inputRef$current5, _inputRef$current6;
|
|
482
496
|
|
|
483
|
-
type && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$
|
|
484
|
-
min && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$
|
|
485
|
-
max && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$
|
|
486
|
-
step && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$
|
|
487
|
-
setMinNumber(min);
|
|
488
|
-
setMaxNumber(max);
|
|
489
|
-
setStepNumber(step);
|
|
497
|
+
type && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.setAttribute("type", type));
|
|
498
|
+
min && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.setAttribute("min", min));
|
|
499
|
+
max && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.setAttribute("max", max));
|
|
500
|
+
step && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.setAttribute("step", step));
|
|
490
501
|
};
|
|
491
502
|
|
|
492
503
|
(0, _react.useLayoutEffect)(function () {
|
|
@@ -498,8 +509,6 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
498
509
|
return changeIsScrollable(false);
|
|
499
510
|
}, [isScrollable, visualFocusedSuggIndex]);
|
|
500
511
|
(0, _react.useEffect)(function () {
|
|
501
|
-
var _inputRef$current5;
|
|
502
|
-
|
|
503
512
|
if (typeof suggestions === "function") {
|
|
504
513
|
changeIsSearching(true);
|
|
505
514
|
changeIsAutosuggestError(false);
|
|
@@ -525,10 +534,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
525
534
|
changeVisualFocusedSuggIndex(-1);
|
|
526
535
|
}
|
|
527
536
|
|
|
528
|
-
|
|
529
|
-
inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.addEventListener("wheel", function (event) {
|
|
530
|
-
return event.preventDefault();
|
|
531
|
-
});
|
|
537
|
+
numberInputContext && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
|
|
532
538
|
}, [value, innerValue, suggestions]);
|
|
533
539
|
var defaultClearAction = {
|
|
534
540
|
onClick: function onClick() {
|
|
@@ -561,18 +567,18 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
561
567
|
}));
|
|
562
568
|
|
|
563
569
|
var decrementNumber = function decrementNumber() {
|
|
564
|
-
var numberValue = value
|
|
570
|
+
var numberValue = value !== null && value !== void 0 ? value : innerValue;
|
|
565
571
|
|
|
566
|
-
if (minNumber && parseInt(numberValue) < minNumber) {
|
|
572
|
+
if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(numberValue) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber)) {
|
|
567
573
|
changeValue(parseInt(numberValue));
|
|
568
|
-
} else if (maxNumber && parseInt(numberValue) > maxNumber) {
|
|
569
|
-
changeValue(maxNumber);
|
|
570
|
-
} else if (minNumber && (parseInt(numberValue) === minNumber || numberValue === "" || stepNumber && parseInt(numberValue) - stepNumber < minNumber)) {
|
|
571
|
-
changeValue(minNumber);
|
|
572
|
-
} else if (stepNumber && minNumber && parseInt(numberValue) - stepNumber >= minNumber || stepNumber && numberValue !== "") {
|
|
573
|
-
changeValue(parseInt(numberValue) - stepNumber);
|
|
574
|
-
} else if (stepNumber && numberValue == "") {
|
|
575
|
-
changeValue(-stepNumber);
|
|
574
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) {
|
|
575
|
+
changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
|
|
576
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && (parseInt(numberValue) === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberValue === "" || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber))) {
|
|
577
|
+
changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);
|
|
578
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) >= (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue !== "") {
|
|
579
|
+
changeValue(parseInt(numberValue) - (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
|
|
580
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue == "") {
|
|
581
|
+
changeValue(-(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
|
|
576
582
|
} else if (numberValue === "") {
|
|
577
583
|
changeValue(-1);
|
|
578
584
|
} else {
|
|
@@ -581,18 +587,18 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
581
587
|
};
|
|
582
588
|
|
|
583
589
|
var incrementNumber = function incrementNumber() {
|
|
584
|
-
var numberValue = value
|
|
590
|
+
var numberValue = value !== null && value !== void 0 ? value : innerValue;
|
|
585
591
|
|
|
586
|
-
if (maxNumber && parseInt(numberValue) > maxNumber) {
|
|
592
|
+
if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber)) {
|
|
587
593
|
changeValue(parseInt(numberValue));
|
|
588
|
-
} else if (minNumber && (parseInt(numberValue) < minNumber || numberValue === "")) {
|
|
589
|
-
changeValue(minNumber);
|
|
590
|
-
} else if (maxNumber && (parseInt(numberValue) === maxNumber || stepNumber && parseInt(numberValue) + stepNumber > maxNumber)) {
|
|
591
|
-
changeValue(maxNumber);
|
|
592
|
-
} else if (stepNumber && maxNumber && parseInt(numberValue) + stepNumber <= maxNumber || stepNumber && numberValue !== "") {
|
|
593
|
-
changeValue(parseInt(numberValue) + stepNumber);
|
|
594
|
-
} else if (stepNumber && numberValue == "") {
|
|
595
|
-
changeValue(stepNumber);
|
|
594
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.minNumber && (parseInt(numberValue) < (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber) || numberValue === "")) {
|
|
595
|
+
changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.minNumber);
|
|
596
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && (parseInt(numberValue) === (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) > (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber))) {
|
|
597
|
+
changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber);
|
|
598
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.maxNumber && parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber) <= (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.maxNumber) || numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue !== "") {
|
|
599
|
+
changeValue(parseInt(numberValue) + (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber));
|
|
600
|
+
} else if (numberInputContext !== null && numberInputContext !== void 0 && numberInputContext.stepNumber && numberValue == "") {
|
|
601
|
+
changeValue(numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.stepNumber);
|
|
596
602
|
} else if (numberValue === "") {
|
|
597
603
|
changeValue(1);
|
|
598
604
|
} else {
|
|
@@ -637,12 +643,6 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
637
643
|
}))
|
|
638
644
|
};
|
|
639
645
|
|
|
640
|
-
var isTextInputType = function isTextInputType() {
|
|
641
|
-
var _inputRef$current6, _inputRef$current7;
|
|
642
|
-
|
|
643
|
-
return !(inputRef !== null && inputRef !== void 0 && (_inputRef$current6 = inputRef.current) !== null && _inputRef$current6 !== void 0 && _inputRef$current6.getAttribute("type")) || (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current7 = inputRef.current) === null || _inputRef$current7 === void 0 ? void 0 : _inputRef$current7.getAttribute("type")) === "text";
|
|
644
|
-
};
|
|
645
|
-
|
|
646
646
|
var HighlightedSuggestion = function HighlightedSuggestion(_ref2) {
|
|
647
647
|
var suggestion = _ref2.suggestion,
|
|
648
648
|
index = _ref2.index;
|
|
@@ -651,11 +651,11 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
651
651
|
var noMatchedWords = suggestion.replace(regEx, "");
|
|
652
652
|
return _react["default"].createElement(Suggestion, {
|
|
653
653
|
id: "suggestion-".concat(index),
|
|
654
|
-
onMouseDown: function onMouseDown() {
|
|
655
|
-
changeIsActiveSuggestion(true);
|
|
654
|
+
onMouseDown: function onMouseDown(event) {
|
|
655
|
+
event.button === 0 && changeIsActiveSuggestion(true);
|
|
656
656
|
},
|
|
657
|
-
onMouseUp: function onMouseUp() {
|
|
658
|
-
if (isActiveSuggestion) {
|
|
657
|
+
onMouseUp: function onMouseUp(event) {
|
|
658
|
+
if (event.button === 0 && isActiveSuggestion) {
|
|
659
659
|
changeValue(suggestion);
|
|
660
660
|
changeIsActiveSuggestion(false);
|
|
661
661
|
closeSuggestions();
|
|
@@ -675,7 +675,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
675
675
|
};
|
|
676
676
|
|
|
677
677
|
return _react["default"].createElement(_styledComponents.ThemeProvider, {
|
|
678
|
-
theme: colorsTheme.
|
|
678
|
+
theme: colorsTheme.textInput
|
|
679
679
|
}, _react["default"].createElement(DxcInput, {
|
|
680
680
|
margin: margin,
|
|
681
681
|
ref: ref,
|
|
@@ -688,7 +688,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
688
688
|
disabled: disabled,
|
|
689
689
|
backgroundType: backgroundType
|
|
690
690
|
}, helperText), _react["default"].createElement(InputContainer, {
|
|
691
|
-
error: error
|
|
691
|
+
error: error,
|
|
692
692
|
disabled: disabled,
|
|
693
693
|
backgroundType: backgroundType,
|
|
694
694
|
onClick: handleInputContainerOnClick
|
|
@@ -709,13 +709,19 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
709
709
|
ref: inputRef,
|
|
710
710
|
backgroundType: backgroundType,
|
|
711
711
|
pattern: pattern,
|
|
712
|
+
minLength: length === null || length === void 0 ? void 0 : length.min,
|
|
713
|
+
maxLength: length === null || length === void 0 ? void 0 : length.max,
|
|
714
|
+
autoComplete: autocomplete,
|
|
712
715
|
tabIndex: tabIndex,
|
|
713
716
|
role: isTextInputType() && hasInputSuggestions() ? "combobox" : "textbox",
|
|
714
717
|
"aria-autocomplete": isTextInputType() && hasInputSuggestions() ? "list" : undefined,
|
|
715
718
|
"aria-controls": isTextInputType() && hasInputSuggestions() ? inputId : undefined,
|
|
716
719
|
"aria-expanded": isTextInputType() && hasInputSuggestions() ? isOpen ? "true" : "false" : undefined,
|
|
717
|
-
"aria-activedescendant": isTextInputType() && hasInputSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined
|
|
718
|
-
|
|
720
|
+
"aria-activedescendant": isTextInputType() && hasInputSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined,
|
|
721
|
+
"aria-invalid": error ? "true" : "false",
|
|
722
|
+
"aria-describedby": error ? errorId : undefined,
|
|
723
|
+
"aria-required": optional ? "false" : "true"
|
|
724
|
+
}), !disabled && error && _react["default"].createElement(ErrorIcon, {
|
|
719
725
|
backgroundType: backgroundType,
|
|
720
726
|
"aria-label": "Error"
|
|
721
727
|
}, errorIcon), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && _react["default"].createElement(Action, {
|
|
@@ -723,7 +729,7 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
723
729
|
backgroundType: backgroundType,
|
|
724
730
|
tabIndex: tabIndex,
|
|
725
731
|
"aria-label": "Clear"
|
|
726
|
-
}, defaultClearAction.icon), (
|
|
732
|
+
}, defaultClearAction.icon), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(Action, {
|
|
727
733
|
ref: actionRef,
|
|
728
734
|
disabled: disabled,
|
|
729
735
|
onClick: decrementAction.onClick,
|
|
@@ -741,9 +747,12 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
741
747
|
ref: actionRef,
|
|
742
748
|
disabled: disabled,
|
|
743
749
|
onClick: action.onClick,
|
|
750
|
+
title: (_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.title,
|
|
744
751
|
backgroundType: backgroundType,
|
|
745
752
|
tabIndex: tabIndex
|
|
746
|
-
}, action.icon
|
|
753
|
+
}, typeof action.icon === "string" ? _react["default"].createElement(ActionIcon, {
|
|
754
|
+
src: action.icon
|
|
755
|
+
}) : action.icon), suffix && _react["default"].createElement(Suffix, {
|
|
747
756
|
disabled: disabled,
|
|
748
757
|
backgroundType: backgroundType
|
|
749
758
|
}, suffix), isOpen && _react["default"].createElement(Suggestions, {
|
|
@@ -764,11 +773,12 @@ var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
|
|
|
764
773
|
suggestion: suggestion,
|
|
765
774
|
index: index
|
|
766
775
|
});
|
|
767
|
-
}), isSearching && _react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && _react["default"].createElement(SuggestionsError, null, _react["default"].createElement(
|
|
776
|
+
}), isSearching && _react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && _react["default"].createElement(SuggestionsError, null, _react["default"].createElement(SuggestionsErrorIcon, {
|
|
768
777
|
backgroundType: backgroundType
|
|
769
|
-
}, errorIcon), "Error fetching data"))), _react["default"].createElement(Error, {
|
|
778
|
+
}, errorIcon), "Error fetching data"))), !disabled && _react["default"].createElement(Error, {
|
|
779
|
+
id: errorId,
|
|
770
780
|
backgroundType: backgroundType
|
|
771
|
-
}, error
|
|
781
|
+
}, error)));
|
|
772
782
|
});
|
|
773
783
|
|
|
774
784
|
var sizes = {
|
|
@@ -806,6 +816,8 @@ var Label = _styledComponents["default"].label(_templateObject2(), function (pro
|
|
|
806
816
|
return props.theme.labelFontStyle;
|
|
807
817
|
}, function (props) {
|
|
808
818
|
return props.theme.labelFontWeight;
|
|
819
|
+
}, function (props) {
|
|
820
|
+
return props.theme.labelLineHeight;
|
|
809
821
|
});
|
|
810
822
|
|
|
811
823
|
var OptionalLabel = _styledComponents["default"].span(_templateObject3(), function (props) {
|
|
@@ -822,6 +834,8 @@ var HelperText = _styledComponents["default"].span(_templateObject4(), function
|
|
|
822
834
|
return props.theme.helperTextFontStyle;
|
|
823
835
|
}, function (props) {
|
|
824
836
|
return props.theme.helperTextFontWeight;
|
|
837
|
+
}, function (props) {
|
|
838
|
+
return props.theme.helperTextLineHeight;
|
|
825
839
|
});
|
|
826
840
|
|
|
827
841
|
var InputContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
|
|
@@ -852,10 +866,12 @@ var Input = _styledComponents["default"].input(_templateObject6(), function (pro
|
|
|
852
866
|
return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
|
|
853
867
|
});
|
|
854
868
|
|
|
855
|
-
var
|
|
869
|
+
var ActionIcon = _styledComponents["default"].img(_templateObject7());
|
|
870
|
+
|
|
871
|
+
var Action = _styledComponents["default"].button(_templateObject8(), function (props) {
|
|
856
872
|
return props.theme.fontFamily;
|
|
857
873
|
}, function (props) {
|
|
858
|
-
return props.disabled ? "cursor: not-allowed;" : "cursor: pointer";
|
|
874
|
+
return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
|
|
859
875
|
}, function (props) {
|
|
860
876
|
return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledActionBackgroundColorOnDark : props.theme.disabledActionBackgroundColor : props.backgroundType === "dark" ? props.theme.actionBackgroundColorOnDark : props.theme.actionBackgroundColor;
|
|
861
877
|
}, function (props) {
|
|
@@ -864,31 +880,31 @@ var Action = _styledComponents["default"].button(_templateObject7(), function (p
|
|
|
864
880
|
return !props.disabled && "\n &:hover {\n background-color: ".concat(props.backgroundType === "dark" ? props.theme.hoverActionBackgroundColorOnDark : props.theme.hoverActionBackgroundColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.hoverActionIconColorOnDark : props.theme.hoverActionIconColor, ";\n }\n &:focus {\n outline: none;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n }\n &:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusActionBorderColorOnDark : props.theme.focusActionBorderColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.focusActionIconColorOnDark : props.theme.focusActionIconColor, ";\n }\n &:active {\n background-color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionBackgroundColorOnDark : props.theme.activeActionBackgroundColor, ";\n color: ").concat(props.backgroundType === "dark" ? props.theme.activeActionIconColorOnDark : props.theme.activeActionIconColor, ";\n }\n ");
|
|
865
881
|
});
|
|
866
882
|
|
|
867
|
-
var Prefix = _styledComponents["default"].span(
|
|
883
|
+
var Prefix = _styledComponents["default"].span(_templateObject9(), function (props) {
|
|
868
884
|
var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPrefixColorOnDark : props.theme.disabledPrefixColor : props.backgroundType === "dark" ? props.theme.prefixColorOnDark : props.theme.prefixColor;
|
|
869
885
|
return "color: ".concat(color, "; border-right: 1px solid ").concat(color, ";");
|
|
870
886
|
}, function (props) {
|
|
871
887
|
return props.theme.fontFamily;
|
|
872
888
|
});
|
|
873
889
|
|
|
874
|
-
var Suffix = _styledComponents["default"].span(
|
|
890
|
+
var Suffix = _styledComponents["default"].span(_templateObject10(), function (props) {
|
|
875
891
|
var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledSuffixColorOnDark : props.theme.disabledSuffixColor : props.backgroundType === "dark" ? props.theme.suffixColorOnDark : props.theme.suffixColor;
|
|
876
892
|
return "color: ".concat(color, "; border-left: 1px solid ").concat(color, ";");
|
|
877
893
|
}, function (props) {
|
|
878
894
|
return props.theme.fontFamily;
|
|
879
895
|
});
|
|
880
896
|
|
|
881
|
-
var ErrorIcon = _styledComponents["default"].span(
|
|
897
|
+
var ErrorIcon = _styledComponents["default"].span(_templateObject11(), function (props) {
|
|
882
898
|
return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
|
|
883
899
|
});
|
|
884
900
|
|
|
885
|
-
var Error = _styledComponents["default"].span(
|
|
901
|
+
var Error = _styledComponents["default"].span(_templateObject12(), function (props) {
|
|
886
902
|
return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
|
|
887
903
|
}, function (props) {
|
|
888
904
|
return props.theme.fontFamily;
|
|
889
905
|
});
|
|
890
906
|
|
|
891
|
-
var Suggestions = _styledComponents["default"].ul(
|
|
907
|
+
var Suggestions = _styledComponents["default"].ul(_templateObject13(), function (props) {
|
|
892
908
|
return props.isError ? props.theme.errorMessageBackgroundColor : "#ffffff";
|
|
893
909
|
}, function (props) {
|
|
894
910
|
return props.isError ? props.theme.errorMessageBorderColor : props.theme.enabledBorderColor;
|
|
@@ -904,17 +920,21 @@ var Suggestions = _styledComponents["default"].ul(_templateObject12(), function
|
|
|
904
920
|
return props.theme.listOptionFontWeight;
|
|
905
921
|
});
|
|
906
922
|
|
|
907
|
-
var Suggestion = _styledComponents["default"].li(
|
|
923
|
+
var Suggestion = _styledComponents["default"].li(_templateObject14(), function (props) {
|
|
908
924
|
return props.active ? "background-color: ".concat(props.theme.activeListOptionBackgroundColor, ";") : props.visualFocused && "background-color: ".concat(props.theme.hoverListOptionBackgroundColor, ";");
|
|
909
925
|
});
|
|
910
926
|
|
|
911
|
-
var SuggestionsSystemMessage = _styledComponents["default"].span(
|
|
927
|
+
var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject15(), function (props) {
|
|
912
928
|
return props.theme.systemMessageFontColor;
|
|
913
929
|
});
|
|
914
930
|
|
|
915
|
-
var
|
|
931
|
+
var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject16(), function (props) {
|
|
932
|
+
return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
|
|
933
|
+
});
|
|
934
|
+
|
|
935
|
+
var SuggestionsError = _styledComponents["default"].span(_templateObject17());
|
|
916
936
|
|
|
917
|
-
|
|
937
|
+
DxcTextInput.propTypes = {
|
|
918
938
|
label: _propTypes["default"].string,
|
|
919
939
|
name: _propTypes["default"].string,
|
|
920
940
|
value: _propTypes["default"].string,
|
|
@@ -922,22 +942,19 @@ DxcNewInputText.propTypes = {
|
|
|
922
942
|
placeholder: _propTypes["default"].string,
|
|
923
943
|
action: _propTypes["default"].shape({
|
|
924
944
|
onClick: _propTypes["default"].func.isRequired,
|
|
925
|
-
icon: _propTypes["default"].shape({
|
|
945
|
+
icon: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
926
946
|
type: _propTypes["default"].oneOf(["svg"])
|
|
927
|
-
}).isRequired
|
|
947
|
+
}), _propTypes["default"].string]).isRequired
|
|
928
948
|
}),
|
|
929
949
|
clearable: _propTypes["default"].bool,
|
|
930
950
|
disabled: _propTypes["default"].bool,
|
|
931
951
|
optional: _propTypes["default"].bool,
|
|
932
|
-
prefix: _propTypes["default"].
|
|
933
|
-
|
|
934
|
-
})]),
|
|
935
|
-
suffix: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape({
|
|
936
|
-
type: _propTypes["default"].oneOf(["svg"])
|
|
937
|
-
})]),
|
|
952
|
+
prefix: _propTypes["default"].string,
|
|
953
|
+
suffix: _propTypes["default"].string,
|
|
938
954
|
onChange: _propTypes["default"].func,
|
|
939
955
|
onBlur: _propTypes["default"].func,
|
|
940
956
|
error: _propTypes["default"].string,
|
|
957
|
+
autocomplete: _propTypes["default"].string,
|
|
941
958
|
margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
|
|
942
959
|
top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
943
960
|
bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
|
|
@@ -953,5 +970,5 @@ DxcNewInputText.propTypes = {
|
|
|
953
970
|
}),
|
|
954
971
|
tabIndex: _propTypes["default"].number
|
|
955
972
|
};
|
|
956
|
-
var _default =
|
|
973
|
+
var _default = DxcTextInput;
|
|
957
974
|
exports["default"] = _default;
|