@dxc-technology/halstack-react 0.0.0-aa1e975 → 0.0.0-ab373ef

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.
Files changed (193) hide show
  1. package/README.md +27 -47
  2. package/dist/index.d.mts +6643 -0
  3. package/dist/index.d.ts +6643 -0
  4. package/dist/index.js +1 -0
  5. package/dist/index.mjs +1 -0
  6. package/package.json +79 -68
  7. package/babel.config.js +0 -8
  8. package/dist/BackgroundColorContext.js +0 -46
  9. package/dist/ThemeContext.js +0 -248
  10. package/dist/accordion/Accordion.js +0 -353
  11. package/dist/accordion-group/AccordionGroup.js +0 -186
  12. package/dist/alert/Alert.js +0 -403
  13. package/dist/alert/index.d.ts +0 -51
  14. package/dist/badge/Badge.js +0 -63
  15. package/dist/box/Box.js +0 -156
  16. package/dist/button/Button.js +0 -238
  17. package/dist/card/Card.js +0 -254
  18. package/dist/checkbox/Checkbox.js +0 -300
  19. package/dist/checkbox/Checkbox.stories.js +0 -144
  20. package/dist/checkbox/readme.md +0 -116
  21. package/dist/chip/Chip.js +0 -265
  22. package/dist/common/OpenSans.css +0 -81
  23. package/dist/common/RequiredComponent.js +0 -40
  24. package/dist/common/fonts/OpenSans-Bold.ttf +0 -0
  25. package/dist/common/fonts/OpenSans-BoldItalic.ttf +0 -0
  26. package/dist/common/fonts/OpenSans-ExtraBold.ttf +0 -0
  27. package/dist/common/fonts/OpenSans-ExtraBoldItalic.ttf +0 -0
  28. package/dist/common/fonts/OpenSans-Italic.ttf +0 -0
  29. package/dist/common/fonts/OpenSans-Light.ttf +0 -0
  30. package/dist/common/fonts/OpenSans-LightItalic.ttf +0 -0
  31. package/dist/common/fonts/OpenSans-Regular.ttf +0 -0
  32. package/dist/common/fonts/OpenSans-SemiBold.ttf +0 -0
  33. package/dist/common/fonts/OpenSans-SemiBoldItalic.ttf +0 -0
  34. package/dist/common/utils.js +0 -22
  35. package/dist/common/variables.js +0 -1546
  36. package/dist/date/Date.js +0 -379
  37. package/dist/date/Date.stories.js +0 -205
  38. package/dist/date/readme.md +0 -73
  39. package/dist/dialog/Dialog.js +0 -218
  40. package/dist/dropdown/Dropdown.js +0 -544
  41. package/dist/file-input/FileInput.js +0 -644
  42. package/dist/file-input/FileItem.js +0 -280
  43. package/dist/file-input/index.d.ts +0 -81
  44. package/dist/footer/Footer.js +0 -395
  45. package/dist/footer/Footer.stories.js +0 -94
  46. package/dist/footer/dxc_logo.svg +0 -15
  47. package/dist/footer/readme.md +0 -41
  48. package/dist/header/Header.js +0 -403
  49. package/dist/header/Header.stories.js +0 -176
  50. package/dist/header/close_icon.svg +0 -1
  51. package/dist/header/dxc_logo_black.svg +0 -8
  52. package/dist/header/hamb_menu_black.svg +0 -1
  53. package/dist/header/hamb_menu_white.svg +0 -1
  54. package/dist/header/readme.md +0 -33
  55. package/dist/heading/Heading.js +0 -218
  56. package/dist/input-text/InputText.js +0 -707
  57. package/dist/input-text/InputText.stories.js +0 -209
  58. package/dist/input-text/error.svg +0 -1
  59. package/dist/input-text/readme.md +0 -91
  60. package/dist/layout/ApplicationLayout.js +0 -331
  61. package/dist/layout/facebook.svg +0 -45
  62. package/dist/layout/linkedin.svg +0 -50
  63. package/dist/layout/twitter.svg +0 -53
  64. package/dist/link/Link.js +0 -237
  65. package/dist/link/readme.md +0 -51
  66. package/dist/main.d.ts +0 -8
  67. package/dist/main.js +0 -367
  68. package/dist/new-date/NewDate.js +0 -400
  69. package/dist/new-date/index.d.ts +0 -95
  70. package/dist/new-input-text/NewInputText.js +0 -967
  71. package/dist/new-input-text/index.d.ts +0 -135
  72. package/dist/new-select/NewSelect.js +0 -836
  73. package/dist/new-select/index.d.ts +0 -53
  74. package/dist/new-textarea/NewTextarea.js +0 -365
  75. package/dist/new-textarea/index.d.ts +0 -117
  76. package/dist/number/Number.js +0 -136
  77. package/dist/number/NumberContext.js +0 -16
  78. package/dist/number/index.d.ts +0 -113
  79. package/dist/paginator/Paginator.js +0 -289
  80. package/dist/paginator/images/next.svg +0 -3
  81. package/dist/paginator/images/nextPage.svg +0 -3
  82. package/dist/paginator/images/previous.svg +0 -3
  83. package/dist/paginator/images/previousPage.svg +0 -3
  84. package/dist/paginator/readme.md +0 -50
  85. package/dist/password/Password.js +0 -200
  86. package/dist/password/index.d.ts +0 -94
  87. package/dist/password/styles.css +0 -3
  88. package/dist/progress-bar/ProgressBar.js +0 -242
  89. package/dist/progress-bar/ProgressBar.stories.js +0 -280
  90. package/dist/progress-bar/readme.md +0 -63
  91. package/dist/radio/Radio.js +0 -209
  92. package/dist/radio/Radio.stories.js +0 -166
  93. package/dist/radio/readme.md +0 -70
  94. package/dist/resultsetTable/ResultsetTable.js +0 -358
  95. package/dist/resultsetTable/arrow_downward-24px_wht.svg +0 -1
  96. package/dist/resultsetTable/arrow_upward-24px_wht.svg +0 -1
  97. package/dist/resultsetTable/unfold_more-24px_wht.svg +0 -1
  98. package/dist/select/Select.js +0 -549
  99. package/dist/sidenav/Sidenav.js +0 -179
  100. package/dist/slider/Slider.js +0 -394
  101. package/dist/slider/Slider.stories.js +0 -241
  102. package/dist/slider/readme.md +0 -64
  103. package/dist/spinner/Spinner.js +0 -381
  104. package/dist/spinner/Spinner.stories.js +0 -183
  105. package/dist/spinner/readme.md +0 -65
  106. package/dist/switch/Switch.js +0 -222
  107. package/dist/switch/Switch.stories.js +0 -134
  108. package/dist/switch/readme.md +0 -133
  109. package/dist/table/Table.js +0 -132
  110. package/dist/tabs/Tabs.js +0 -343
  111. package/dist/tabs/Tabs.stories.js +0 -130
  112. package/dist/tabs/readme.md +0 -78
  113. package/dist/tabs-for-sections/TabsForSections.js +0 -92
  114. package/dist/tabs-for-sections/readme.md +0 -78
  115. package/dist/tag/Tag.js +0 -282
  116. package/dist/textarea/Textarea.js +0 -264
  117. package/dist/toggle/Toggle.js +0 -220
  118. package/dist/toggle/Toggle.stories.js +0 -297
  119. package/dist/toggle/readme.md +0 -80
  120. package/dist/toggle-group/ToggleGroup.js +0 -223
  121. package/dist/upload/Upload.js +0 -205
  122. package/dist/upload/Upload.stories.js +0 -72
  123. package/dist/upload/buttons-upload/ButtonsUpload.js +0 -139
  124. package/dist/upload/buttons-upload/drag-drop-icon.svg +0 -4
  125. package/dist/upload/buttons-upload/upload-button.svg +0 -1
  126. package/dist/upload/dragAndDropArea/DragAndDropArea.js +0 -329
  127. package/dist/upload/dragAndDropArea/upload_drop.svg +0 -4
  128. package/dist/upload/dragAndDropArea/upload_file.svg +0 -4
  129. package/dist/upload/file-upload/FileToUpload.js +0 -184
  130. package/dist/upload/file-upload/audio-icon.svg +0 -4
  131. package/dist/upload/file-upload/close.svg +0 -4
  132. package/dist/upload/file-upload/file-icon.svg +0 -4
  133. package/dist/upload/file-upload/video-icon.svg +0 -4
  134. package/dist/upload/files-upload/FilesToUpload.js +0 -123
  135. package/dist/upload/readme.md +0 -37
  136. package/dist/upload/transaction/Transaction.js +0 -175
  137. package/dist/upload/transaction/audio-icon-err.svg +0 -4
  138. package/dist/upload/transaction/audio-icon.svg +0 -4
  139. package/dist/upload/transaction/error-icon.svg +0 -4
  140. package/dist/upload/transaction/file-icon-err.svg +0 -4
  141. package/dist/upload/transaction/file-icon.svg +0 -4
  142. package/dist/upload/transaction/image-icon-err.svg +0 -4
  143. package/dist/upload/transaction/image-icon.svg +0 -4
  144. package/dist/upload/transaction/success-icon.svg +0 -4
  145. package/dist/upload/transaction/video-icon-err.svg +0 -4
  146. package/dist/upload/transaction/video-icon.svg +0 -4
  147. package/dist/upload/transactions/Transactions.js +0 -138
  148. package/dist/useTheme.js +0 -22
  149. package/dist/wizard/Wizard.js +0 -411
  150. package/dist/wizard/invalid_icon.svg +0 -5
  151. package/dist/wizard/valid_icon.svg +0 -5
  152. package/dist/wizard/validation-wrong.svg +0 -6
  153. package/test/Accordion.test.js +0 -33
  154. package/test/AccordionGroup.test.js +0 -125
  155. package/test/Alert.test.js +0 -53
  156. package/test/Box.test.js +0 -10
  157. package/test/Button.test.js +0 -18
  158. package/test/Card.test.js +0 -30
  159. package/test/Checkbox.test.js +0 -45
  160. package/test/Chip.test.js +0 -25
  161. package/test/Date.test.js +0 -393
  162. package/test/Dialog.test.js +0 -23
  163. package/test/Dropdown.test.js +0 -145
  164. package/test/FileInput.test.js +0 -201
  165. package/test/Footer.test.js +0 -99
  166. package/test/Header.test.js +0 -39
  167. package/test/Heading.test.js +0 -35
  168. package/test/InputText.test.js +0 -240
  169. package/test/Link.test.js +0 -43
  170. package/test/NewDate.test.js +0 -232
  171. package/test/NewInputText.test.js +0 -734
  172. package/test/NewTextarea.test.js +0 -195
  173. package/test/Number.test.js +0 -257
  174. package/test/Paginator.test.js +0 -177
  175. package/test/Password.test.js +0 -83
  176. package/test/ProgressBar.test.js +0 -35
  177. package/test/Radio.test.js +0 -37
  178. package/test/ResultsetTable.test.js +0 -329
  179. package/test/Select.test.js +0 -212
  180. package/test/Sidenav.test.js +0 -45
  181. package/test/Slider.test.js +0 -82
  182. package/test/Spinner.test.js +0 -32
  183. package/test/Switch.test.js +0 -45
  184. package/test/Table.test.js +0 -36
  185. package/test/Tabs.test.js +0 -109
  186. package/test/TabsForSections.test.js +0 -34
  187. package/test/Tag.test.js +0 -32
  188. package/test/TextArea.test.js +0 -52
  189. package/test/ToggleGroup.test.js +0 -81
  190. package/test/Upload.test.js +0 -60
  191. package/test/Wizard.test.js +0 -130
  192. package/test/mocks/pngMock.js +0 -1
  193. package/test/mocks/svgMock.js +0 -1
@@ -1,967 +0,0 @@
1
- "use strict";
2
-
3
- var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
4
-
5
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
6
-
7
- Object.defineProperty(exports, "__esModule", {
8
- value: true
9
- });
10
- exports["default"] = void 0;
11
-
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
- var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
-
16
- var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
17
-
18
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
19
-
20
- var _react = _interopRequireWildcard(require("react"));
21
-
22
- var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
-
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
27
-
28
- var _variables = require("../common/variables.js");
29
-
30
- var _utils = require("../common/utils.js");
31
-
32
- var _uuid = require("uuid");
33
-
34
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
35
-
36
- var _NumberContext = _interopRequireDefault(require("../number/NumberContext.js"));
37
-
38
- function _templateObject17() {
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
-
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
-
61
- _templateObject15 = function _templateObject15() {
62
- return data;
63
- };
64
-
65
- return data;
66
- }
67
-
68
- function _templateObject14() {
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"]);
70
-
71
- _templateObject14 = function _templateObject14() {
72
- return data;
73
- };
74
-
75
- return data;
76
- }
77
-
78
- function _templateObject13() {
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"]);
80
-
81
- _templateObject13 = function _templateObject13() {
82
- return data;
83
- };
84
-
85
- return data;
86
- }
87
-
88
- function _templateObject12() {
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"]);
90
-
91
- _templateObject12 = function _templateObject12() {
92
- return data;
93
- };
94
-
95
- return data;
96
- }
97
-
98
- function _templateObject11() {
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"]);
100
-
101
- _templateObject11 = function _templateObject11() {
102
- return data;
103
- };
104
-
105
- return data;
106
- }
107
-
108
- function _templateObject10() {
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"]);
110
-
111
- _templateObject10 = function _templateObject10() {
112
- return data;
113
- };
114
-
115
- return data;
116
- }
117
-
118
- function _templateObject9() {
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"]);
120
-
121
- _templateObject9 = function _templateObject9() {
122
- return data;
123
- };
124
-
125
- return data;
126
- }
127
-
128
- function _templateObject8() {
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: 4px;\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"]);
130
-
131
- _templateObject8 = function _templateObject8() {
132
- return data;
133
- };
134
-
135
- return data;
136
- }
137
-
138
- function _templateObject7() {
139
- var data = (0, _taggedTemplateLiteral2["default"])(["\n width: 16px;\n height: 16px;\n"]);
140
-
141
- _templateObject7 = function _templateObject7() {
142
- return data;
143
- };
144
-
145
- return data;
146
- }
147
-
148
- function _templateObject6() {
149
- var data = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(calc(1rem * 2.5) - calc(1px * 2));\n width: 100%;\n background: none;\n border: none;\n outline: none;\n padding: 0 calc(1rem * 0.5);\n\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n ", "\n\n ::placeholder {\n color: ", ";\n }\n"]);
150
-
151
- _templateObject6 = function _templateObject6() {
152
- return data;
153
- };
154
-
155
- return data;
156
- }
157
-
158
- function _templateObject5() {
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"]);
160
-
161
- _templateObject5 = function _templateObject5() {
162
- return data;
163
- };
164
-
165
- return data;
166
- }
167
-
168
- function _templateObject4() {
169
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.5em;\n"]);
170
-
171
- _templateObject4 = function _templateObject4() {
172
- return data;
173
- };
174
-
175
- return data;
176
- }
177
-
178
- function _templateObject3() {
179
- var data = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"]);
180
-
181
- _templateObject3 = function _templateObject3() {
182
- return data;
183
- };
184
-
185
- return data;
186
- }
187
-
188
- function _templateObject2() {
189
- var data = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: 1.75em;\n"]);
190
-
191
- _templateObject2 = function _templateObject2() {
192
- return data;
193
- };
194
-
195
- return data;
196
- }
197
-
198
- function _templateObject() {
199
- var data = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n flex-direction: column;\n\n width: ", ";\n margin: ", ";\n margin-top: ", ";\n margin-right: ", ";\n margin-bottom: ", ";\n margin-left: ", ";\n"]);
200
-
201
- _templateObject = function _templateObject() {
202
- return data;
203
- };
204
-
205
- return data;
206
- }
207
-
208
- var makeCancelable = function makeCancelable(promise) {
209
- var hasCanceled_ = false;
210
- var wrappedPromise = new Promise(function (resolve, reject) {
211
- promise.then(function (val) {
212
- return hasCanceled_ ? reject({
213
- isCanceled: true
214
- }) : resolve(val);
215
- }, function (promiseError) {
216
- return hasCanceled_ ? reject({
217
- isCanceled: true
218
- }) : reject(promiseError);
219
- });
220
- });
221
- return {
222
- promise: wrappedPromise,
223
- cancel: function cancel() {
224
- hasCanceled_ = true;
225
- }
226
- };
227
- };
228
-
229
- var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
230
- return "This field is required. Please, enter a value.";
231
- };
232
-
233
- var getLengthErrorMessage = function getLengthErrorMessage(length) {
234
- return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
235
- };
236
-
237
- var getPatternErrorMessage = function getPatternErrorMessage() {
238
- return "Please match the format requested.";
239
- };
240
-
241
- var patternMatch = function patternMatch(pattern, value) {
242
- return new RegExp(pattern).test(value);
243
- };
244
-
245
- var DxcNewInputText = _react["default"].forwardRef(function (_ref, ref) {
246
- var _ref$label = _ref.label,
247
- label = _ref$label === void 0 ? "" : _ref$label,
248
- _ref$name = _ref.name,
249
- name = _ref$name === void 0 ? "" : _ref$name,
250
- value = _ref.value,
251
- _ref$helperText = _ref.helperText,
252
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
253
- _ref$placeholder = _ref.placeholder,
254
- placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
255
- action = _ref.action,
256
- _ref$clearable = _ref.clearable,
257
- clearable = _ref$clearable === void 0 ? false : _ref$clearable,
258
- _ref$disabled = _ref.disabled,
259
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
260
- _ref$optional = _ref.optional,
261
- optional = _ref$optional === void 0 ? false : _ref$optional,
262
- _ref$prefix = _ref.prefix,
263
- prefix = _ref$prefix === void 0 ? "" : _ref$prefix,
264
- _ref$suffix = _ref.suffix,
265
- suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
266
- onChange = _ref.onChange,
267
- onBlur = _ref.onBlur,
268
- _ref$error = _ref.error,
269
- error = _ref$error === void 0 ? "" : _ref$error,
270
- suggestions = _ref.suggestions,
271
- pattern = _ref.pattern,
272
- length = _ref.length,
273
- _ref$autocomplete = _ref.autocomplete,
274
- autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
275
- margin = _ref.margin,
276
- _ref$size = _ref.size,
277
- size = _ref$size === void 0 ? "medium" : _ref$size,
278
- _ref$tabIndex = _ref.tabIndex,
279
- tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
280
-
281
- var _useState = (0, _react.useState)(""),
282
- _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
283
- innerValue = _useState2[0],
284
- setInnerValue = _useState2[1];
285
-
286
- var _useState3 = (0, _react.useState)(false),
287
- _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
288
- isOpen = _useState4[0],
289
- changeIsOpen = _useState4[1];
290
-
291
- var _useState5 = (0, _react.useState)(false),
292
- _useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
293
- isSearching = _useState6[0],
294
- changeIsSearching = _useState6[1];
295
-
296
- var _useState7 = (0, _react.useState)(false),
297
- _useState8 = (0, _slicedToArray2["default"])(_useState7, 2),
298
- isScrollable = _useState8[0],
299
- changeIsScrollable = _useState8[1];
300
-
301
- var _useState9 = (0, _react.useState)(false),
302
- _useState10 = (0, _slicedToArray2["default"])(_useState9, 2),
303
- isActiveSuggestion = _useState10[0],
304
- changeIsActiveSuggestion = _useState10[1];
305
-
306
- var _useState11 = (0, _react.useState)(false),
307
- _useState12 = (0, _slicedToArray2["default"])(_useState11, 2),
308
- isAutosuggestError = _useState12[0],
309
- changeIsAutosuggestError = _useState12[1];
310
-
311
- var _useState13 = (0, _react.useState)([]),
312
- _useState14 = (0, _slicedToArray2["default"])(_useState13, 2),
313
- filteredSuggestions = _useState14[0],
314
- changeFilteredSuggestions = _useState14[1];
315
-
316
- var _useState15 = (0, _react.useState)(-1),
317
- _useState16 = (0, _slicedToArray2["default"])(_useState15, 2),
318
- visualFocusedSuggIndex = _useState16[0],
319
- changeVisualFocusedSuggIndex = _useState16[1];
320
-
321
- var _useState17 = (0, _react.useState)("input-".concat((0, _uuid.v4)())),
322
- _useState18 = (0, _slicedToArray2["default"])(_useState17, 1),
323
- inputId = _useState18[0];
324
-
325
- var suggestionsRef = (0, _react.useRef)(null);
326
- var inputRef = (0, _react.useRef)(null);
327
- var actionRef = (0, _react.useRef)(null);
328
- var colorsTheme = (0, _useTheme["default"])();
329
- var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
330
- var autosuggestId = "".concat(inputId, "-listBox");
331
- var errorId = "error-message-".concat(inputId);
332
- var numberContext = (0, _react.useContext)(_NumberContext["default"]);
333
-
334
- var isNotOptional = function isNotOptional(value) {
335
- return value === "" && !optional;
336
- };
337
-
338
- var isLengthIncorrect = function isLengthIncorrect(value) {
339
- return value !== "" && length && length.min && length.max && (value.length < length.min || value.length > length.max);
340
- };
341
-
342
- var isNumberIncorrect = function isNumberIncorrect(value) {
343
- return (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber) && parseInt(value) < (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber) || (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber) && parseInt(value) > (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber);
344
- };
345
-
346
- var isTextInputType = function isTextInputType() {
347
- var _inputRef$current, _inputRef$current2;
348
-
349
- 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";
350
- };
351
-
352
- var getNumberErrorMessage = function getNumberErrorMessage(value) {
353
- if (numberContext !== null && numberContext !== void 0 && numberContext.minNumber && parseInt(value) < (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber)) return "Value must be greater than or equal to ".concat(numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber, ".");else if (numberContext !== null && numberContext !== void 0 && numberContext.maxNumber && parseInt(value) > (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber)) return "Value must be less than or equal to ".concat(numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber, ".");
354
- };
355
-
356
- var hasInputSuggestions = function hasInputSuggestions() {
357
- return typeof suggestions === "function" || suggestions && suggestions.length > 0;
358
- };
359
-
360
- var openSuggestions = function openSuggestions() {
361
- hasInputSuggestions() && changeIsOpen(true);
362
- };
363
-
364
- var closeSuggestions = function closeSuggestions() {
365
- changeIsOpen(false);
366
- changeVisualFocusedSuggIndex(-1);
367
- };
368
-
369
- var changeValue = function changeValue(newValue) {
370
- value !== null && value !== void 0 ? value : setInnerValue(newValue);
371
- var changedValue = typeof newValue === "number" ? newValue.toString() : newValue;
372
- if (isNotOptional(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
373
- value: changedValue,
374
- error: getNotOptionalErrorMessage()
375
- });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
376
- value: changedValue,
377
- error: getLengthErrorMessage(length)
378
- });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
379
- value: changedValue,
380
- error: getPatternErrorMessage()
381
- });else if (newValue && isNumberIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
382
- value: changedValue,
383
- error: getNumberErrorMessage(newValue)
384
- });else onChange === null || onChange === void 0 ? void 0 : onChange({
385
- value: changedValue,
386
- error: null
387
- });
388
- };
389
-
390
- var handleInputContainerOnClick = function handleInputContainerOnClick() {
391
- document.activeElement !== actionRef.current && inputRef.current.focus();
392
- };
393
-
394
- var handleIOnChange = function handleIOnChange(event) {
395
- openSuggestions();
396
- changeValue(event.target.value);
397
- };
398
-
399
- var handleIOnClick = function handleIOnClick() {
400
- openSuggestions();
401
- };
402
-
403
- var handleIOnBlur = function handleIOnBlur(event) {
404
- suggestions && closeSuggestions();
405
- if (isNotOptional(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
406
- value: event.target.value,
407
- error: getNotOptionalErrorMessage()
408
- });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
409
- value: event.target.value,
410
- error: getLengthErrorMessage(length)
411
- });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
412
- value: event.target.value,
413
- error: getPatternErrorMessage()
414
- });else if (event.target.value && isNumberIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
415
- value: event.target.value,
416
- error: getNumberErrorMessage(event.target.value)
417
- });else onBlur === null || onBlur === void 0 ? void 0 : onBlur({
418
- value: event.target.value,
419
- error: null
420
- });
421
- };
422
-
423
- var handleIOnFocus = function handleIOnFocus() {
424
- openSuggestions();
425
- };
426
-
427
- var handleIOnKeyDown = function handleIOnKeyDown(event) {
428
- switch (event.keyCode) {
429
- case 40:
430
- // Arrow Down
431
- if (numberContext) {
432
- decrementNumber();
433
- event.preventDefault();
434
- } else {
435
- event.preventDefault();
436
- openSuggestions();
437
-
438
- if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
439
- changeVisualFocusedSuggIndex(function (visualFocusedSuggIndex) {
440
- if (visualFocusedSuggIndex < filteredSuggestions.length - 1) return visualFocusedSuggIndex + 1;else if (visualFocusedSuggIndex === filteredSuggestions.length - 1) return 0;
441
- });
442
- changeIsScrollable(true);
443
- changeIsActiveSuggestion(false);
444
- }
445
- }
446
-
447
- break;
448
-
449
- case 38:
450
- // Arrow Up
451
- if (numberContext) {
452
- incrementNumber();
453
- event.preventDefault();
454
- } else {
455
- event.preventDefault();
456
- openSuggestions();
457
-
458
- if (!isAutosuggestError && !isSearching && filteredSuggestions.length > 0) {
459
- changeVisualFocusedSuggIndex(function (visualFocusedSuggIndex) {
460
- if (visualFocusedSuggIndex === 0 || visualFocusedSuggIndex === -1) return filteredSuggestions.length > 0 ? filteredSuggestions.length - 1 : suggestions.length - 1;else return visualFocusedSuggIndex - 1;
461
- });
462
- changeIsScrollable(true);
463
- changeIsActiveSuggestion(false);
464
- }
465
- }
466
-
467
- break;
468
-
469
- case 27:
470
- // Esc
471
- event.preventDefault();
472
-
473
- if (hasInputSuggestions()) {
474
- changeValue("");
475
- isOpen && closeSuggestions();
476
- }
477
-
478
- break;
479
-
480
- case 13:
481
- // Enter
482
- if (hasInputSuggestions() && !isSearching) {
483
- var validFocusedSuggestion = filteredSuggestions.length > 0 && visualFocusedSuggIndex >= 0 && visualFocusedSuggIndex < filteredSuggestions.length;
484
- validFocusedSuggestion && changeValue(filteredSuggestions[visualFocusedSuggIndex]);
485
- isOpen && closeSuggestions();
486
- }
487
-
488
- break;
489
- }
490
- };
491
-
492
- var setNumberProps = function setNumberProps(type, min, max, step) {
493
- var _inputRef$current3, _inputRef$current4, _inputRef$current5, _inputRef$current6;
494
-
495
- type && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.setAttribute("type", type));
496
- min && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current4 = inputRef.current) === null || _inputRef$current4 === void 0 ? void 0 : _inputRef$current4.setAttribute("min", min));
497
- max && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current5 = inputRef.current) === null || _inputRef$current5 === void 0 ? void 0 : _inputRef$current5.setAttribute("max", max));
498
- step && (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current6 = inputRef.current) === null || _inputRef$current6 === void 0 ? void 0 : _inputRef$current6.setAttribute("step", step));
499
- };
500
-
501
- (0, _react.useLayoutEffect)(function () {
502
- var _suggestionsRef$curre;
503
-
504
- isScrollable && (suggestionsRef === null || suggestionsRef === void 0 ? void 0 : (_suggestionsRef$curre = suggestionsRef.current) === null || _suggestionsRef$curre === void 0 ? void 0 : _suggestionsRef$curre.scrollTo({
505
- top: visualFocusedSuggIndex * 39
506
- }));
507
- return changeIsScrollable(false);
508
- }, [isScrollable, visualFocusedSuggIndex]);
509
- (0, _react.useEffect)(function () {
510
- if (typeof suggestions === "function") {
511
- changeIsSearching(true);
512
- changeIsAutosuggestError(false);
513
- changeFilteredSuggestions([]);
514
- var cancelablePromise = makeCancelable(suggestions(value !== null && value !== void 0 ? value : innerValue));
515
- cancelablePromise.promise.then(function (promiseResponse) {
516
- changeIsSearching(false);
517
- changeIsAutosuggestError(false);
518
- changeFilteredSuggestions(promiseResponse);
519
- })["catch"](function (err) {
520
- if (!err.isCanceled) {
521
- changeIsSearching(false);
522
- changeIsAutosuggestError(true);
523
- }
524
- });
525
- return function () {
526
- cancelablePromise.cancel();
527
- };
528
- } else if (suggestions && suggestions.length) {
529
- changeFilteredSuggestions(suggestions.filter(function (suggestion) {
530
- return suggestion.toUpperCase().startsWith((value !== null && value !== void 0 ? value : innerValue).toUpperCase());
531
- }));
532
- changeVisualFocusedSuggIndex(-1);
533
- }
534
-
535
- numberContext && setNumberProps(numberContext.typeNumber, numberContext.minNumber, numberContext.maxNumber, numberContext.stepNumber);
536
- }, [value, innerValue, suggestions]);
537
- var defaultClearAction = {
538
- onClick: function onClick() {
539
- changeValue("");
540
- inputRef.current.focus();
541
- suggestions && closeSuggestions();
542
- },
543
- icon: _react["default"].createElement("svg", {
544
- xmlns: "http://www.w3.org/2000/svg",
545
- width: "24",
546
- height: "24",
547
- viewBox: "0 0 24 24",
548
- fill: "currentColor"
549
- }, _react["default"].createElement("path", {
550
- d: "M0 0h24v24H0V0z",
551
- fill: "none"
552
- }), _react["default"].createElement("path", {
553
- d: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z"
554
- }))
555
- };
556
-
557
- var errorIcon = _react["default"].createElement("svg", {
558
- xmlns: "http://www.w3.org/2000/svg",
559
- height: "24px",
560
- viewBox: "0 0 24 24",
561
- width: "24px",
562
- fill: "currentColor"
563
- }, _react["default"].createElement("path", {
564
- d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
565
- }));
566
-
567
- var decrementNumber = function decrementNumber() {
568
- var numberValue = value !== null && value !== void 0 ? value : innerValue;
569
-
570
- if (numberContext !== null && numberContext !== void 0 && numberContext.minNumber && parseInt(numberValue) < (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber)) {
571
- changeValue(parseInt(numberValue));
572
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.maxNumber && parseInt(numberValue) > (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber)) {
573
- changeValue(numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber);
574
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.minNumber && (parseInt(numberValue) === (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber) || numberValue === "" || numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && parseInt(numberValue) - (numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber) < (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber))) {
575
- changeValue(numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber);
576
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && numberContext !== null && numberContext !== void 0 && numberContext.minNumber && parseInt(numberValue) - (numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber) >= (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber) || numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && numberValue !== "") {
577
- changeValue(parseInt(numberValue) - (numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber));
578
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && numberValue == "") {
579
- changeValue(-(numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber));
580
- } else if (numberValue === "") {
581
- changeValue(-1);
582
- } else {
583
- changeValue(parseInt(numberValue) - 1);
584
- }
585
- };
586
-
587
- var incrementNumber = function incrementNumber() {
588
- var numberValue = value !== null && value !== void 0 ? value : innerValue;
589
-
590
- if (numberContext !== null && numberContext !== void 0 && numberContext.maxNumber && parseInt(numberValue) > (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber)) {
591
- changeValue(parseInt(numberValue));
592
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.minNumber && (parseInt(numberValue) < (numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber) || numberValue === "")) {
593
- changeValue(numberContext === null || numberContext === void 0 ? void 0 : numberContext.minNumber);
594
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.maxNumber && (parseInt(numberValue) === (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber) || numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && parseInt(numberValue) + (numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber) > (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber))) {
595
- changeValue(numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber);
596
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && numberContext !== null && numberContext !== void 0 && numberContext.maxNumber && parseInt(numberValue) + (numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber) <= (numberContext === null || numberContext === void 0 ? void 0 : numberContext.maxNumber) || numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && numberValue !== "") {
597
- changeValue(parseInt(numberValue) + (numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber));
598
- } else if (numberContext !== null && numberContext !== void 0 && numberContext.stepNumber && numberValue == "") {
599
- changeValue(numberContext === null || numberContext === void 0 ? void 0 : numberContext.stepNumber);
600
- } else if (numberValue === "") {
601
- changeValue(1);
602
- } else {
603
- changeValue(parseInt(numberValue) + 1);
604
- }
605
- };
606
-
607
- var decrementAction = {
608
- onClick: function onClick() {
609
- decrementNumber();
610
- inputRef.current.focus();
611
- },
612
- icon: _react["default"].createElement("svg", {
613
- xmlns: "http://www.w3.org/2000/svg",
614
- height: "24px",
615
- viewBox: "0 0 24 24",
616
- width: "24px",
617
- fill: "currentColor"
618
- }, _react["default"].createElement("path", {
619
- d: "M0 0h24v24H0z",
620
- fill: "none"
621
- }), _react["default"].createElement("path", {
622
- d: "M19 13H5v-2h14v2z"
623
- }))
624
- };
625
- var incrementAction = {
626
- onClick: function onClick() {
627
- incrementNumber();
628
- inputRef.current.focus();
629
- },
630
- icon: _react["default"].createElement("svg", {
631
- xmlns: "http://www.w3.org/2000/svg",
632
- height: "24px",
633
- viewBox: "0 0 24 24",
634
- width: "24px",
635
- fill: "currentColor"
636
- }, _react["default"].createElement("path", {
637
- d: "M0 0h24v24H0z",
638
- fill: "none"
639
- }), _react["default"].createElement("path", {
640
- d: "M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
641
- }))
642
- };
643
-
644
- var HighlightedSuggestion = function HighlightedSuggestion(_ref2) {
645
- var suggestion = _ref2.suggestion,
646
- index = _ref2.index;
647
- var regEx = new RegExp(value !== null && value !== void 0 ? value : innerValue, "i");
648
- var matchedWords = suggestion.match(regEx);
649
- var noMatchedWords = suggestion.replace(regEx, "");
650
- return _react["default"].createElement(Suggestion, {
651
- id: "suggestion-".concat(index),
652
- onMouseDown: function onMouseDown() {
653
- changeIsActiveSuggestion(true);
654
- },
655
- onMouseUp: function onMouseUp() {
656
- if (isActiveSuggestion) {
657
- changeValue(suggestion);
658
- changeIsActiveSuggestion(false);
659
- closeSuggestions();
660
- }
661
- },
662
- onMouseEnter: function onMouseEnter() {
663
- changeVisualFocusedSuggIndex(index);
664
- },
665
- onMouseLeave: function onMouseLeave() {
666
- changeIsActiveSuggestion(false);
667
- },
668
- visualFocused: visualFocusedSuggIndex === index,
669
- active: visualFocusedSuggIndex === index && isActiveSuggestion,
670
- role: "option",
671
- "aria-selected": visualFocusedSuggIndex === index && "true"
672
- }, typeof suggestions === "function" ? suggestion : _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement("strong", null, matchedWords), noMatchedWords));
673
- };
674
-
675
- return _react["default"].createElement(_styledComponents.ThemeProvider, {
676
- theme: colorsTheme.newInputText
677
- }, _react["default"].createElement(DxcInput, {
678
- margin: margin,
679
- ref: ref,
680
- size: size
681
- }, _react["default"].createElement(Label, {
682
- htmlFor: inputId,
683
- disabled: disabled,
684
- backgroundType: backgroundType
685
- }, label, " ", optional && _react["default"].createElement(OptionalLabel, null, "(Optional)")), _react["default"].createElement(HelperText, {
686
- disabled: disabled,
687
- backgroundType: backgroundType
688
- }, helperText), _react["default"].createElement(InputContainer, {
689
- error: error,
690
- disabled: disabled,
691
- backgroundType: backgroundType,
692
- onClick: handleInputContainerOnClick
693
- }, prefix && _react["default"].createElement(Prefix, {
694
- disabled: disabled,
695
- backgroundType: backgroundType
696
- }, prefix), _react["default"].createElement(Input, {
697
- id: inputId,
698
- name: name,
699
- value: value !== null && value !== void 0 ? value : innerValue,
700
- placeholder: placeholder,
701
- onChange: handleIOnChange,
702
- onClick: handleIOnClick,
703
- onBlur: handleIOnBlur,
704
- onFocus: handleIOnFocus,
705
- onKeyDown: handleIOnKeyDown,
706
- disabled: disabled,
707
- ref: inputRef,
708
- backgroundType: backgroundType,
709
- pattern: pattern,
710
- minLength: length === null || length === void 0 ? void 0 : length.min,
711
- maxLength: length === null || length === void 0 ? void 0 : length.max,
712
- autoComplete: autocomplete,
713
- tabIndex: tabIndex,
714
- role: isTextInputType() && hasInputSuggestions() ? "combobox" : "textbox",
715
- "aria-autocomplete": isTextInputType() && hasInputSuggestions() ? "list" : undefined,
716
- "aria-controls": isTextInputType() && hasInputSuggestions() ? inputId : undefined,
717
- "aria-expanded": isTextInputType() && hasInputSuggestions() ? isOpen ? "true" : "false" : undefined,
718
- "aria-activedescendant": isTextInputType() && hasInputSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined,
719
- "aria-invalid": error ? "true" : "false",
720
- "aria-describedby": error ? errorId : undefined,
721
- "aria-required": optional ? "false" : "true"
722
- }), !disabled && error && _react["default"].createElement(ErrorIcon, {
723
- backgroundType: backgroundType,
724
- "aria-label": "Error"
725
- }, errorIcon), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && _react["default"].createElement(Action, {
726
- onClick: defaultClearAction.onClick,
727
- backgroundType: backgroundType,
728
- tabIndex: tabIndex,
729
- "aria-label": "Clear"
730
- }, defaultClearAction.icon), (numberContext === null || numberContext === void 0 ? void 0 : numberContext.typeNumber) === "number" ? _react["default"].createElement(_react["default"].Fragment, null, _react["default"].createElement(Action, {
731
- ref: actionRef,
732
- disabled: disabled,
733
- onClick: decrementAction.onClick,
734
- backgroundType: backgroundType,
735
- tabIndex: tabIndex,
736
- "aria-label": "Decrement"
737
- }, decrementAction.icon), _react["default"].createElement(Action, {
738
- ref: actionRef,
739
- disabled: disabled,
740
- onClick: incrementAction.onClick,
741
- backgroundType: backgroundType,
742
- tabIndex: tabIndex,
743
- "aria-label": "Increment"
744
- }, incrementAction.icon)) : action && _react["default"].createElement(Action, {
745
- ref: actionRef,
746
- disabled: disabled,
747
- onClick: action.onClick,
748
- backgroundType: backgroundType,
749
- tabIndex: tabIndex
750
- }, typeof action.icon === "string" ? _react["default"].createElement(ActionIcon, {
751
- src: action.icon
752
- }) : action.icon), suffix && _react["default"].createElement(Suffix, {
753
- disabled: disabled,
754
- backgroundType: backgroundType
755
- }, suffix), isOpen && _react["default"].createElement(Suggestions, {
756
- id: autosuggestId,
757
- isError: isAutosuggestError,
758
- onMouseDown: function onMouseDown(event) {
759
- event.preventDefault();
760
- },
761
- onMouseLeave: function onMouseLeave() {
762
- changeVisualFocusedSuggIndex(-1);
763
- },
764
- ref: suggestionsRef,
765
- role: "listbox",
766
- "aria-label": label
767
- }, !isSearching && !isAutosuggestError && filteredSuggestions.length === 0 && _react["default"].createElement(SuggestionsSystemMessage, null, "No results found"), !isSearching && !isAutosuggestError && filteredSuggestions.length > 0 && filteredSuggestions.map(function (suggestion, index) {
768
- return _react["default"].createElement(HighlightedSuggestion, {
769
- key: "suggestion-".concat((0, _uuid.v4)()),
770
- suggestion: suggestion,
771
- index: index
772
- });
773
- }), isSearching && _react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && _react["default"].createElement(SuggestionsError, null, _react["default"].createElement(SuggestionsErrorIcon, {
774
- backgroundType: backgroundType
775
- }, errorIcon), "Error fetching data"))), !disabled && _react["default"].createElement(Error, {
776
- id: errorId,
777
- backgroundType: backgroundType
778
- }, error)));
779
- });
780
-
781
- var sizes = {
782
- small: "240px",
783
- medium: "360px",
784
- large: "480px",
785
- fillParent: "100%"
786
- };
787
-
788
- var calculateWidth = function calculateWidth(margin, size) {
789
- return size === "fillParent" ? "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), ")") : sizes[size];
790
- };
791
-
792
- var DxcInput = _styledComponents["default"].div(_templateObject(), function (props) {
793
- return calculateWidth(props.margin, props.size);
794
- }, function (props) {
795
- return props.margin && (0, _typeof2["default"])(props.margin) !== "object" ? _variables.spaces[props.margin] : "0px";
796
- }, function (props) {
797
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.top ? _variables.spaces[props.margin.top] : "";
798
- }, function (props) {
799
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.right ? _variables.spaces[props.margin.right] : "";
800
- }, function (props) {
801
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.bottom ? _variables.spaces[props.margin.bottom] : "";
802
- }, function (props) {
803
- return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
804
- });
805
-
806
- var Label = _styledComponents["default"].label(_templateObject2(), function (props) {
807
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
808
- }, function (props) {
809
- return props.theme.fontFamily;
810
- }, function (props) {
811
- return props.theme.labelFontSize;
812
- }, function (props) {
813
- return props.theme.labelFontStyle;
814
- }, function (props) {
815
- return props.theme.labelFontWeight;
816
- });
817
-
818
- var OptionalLabel = _styledComponents["default"].span(_templateObject3(), function (props) {
819
- return props.theme.optionalLabelFontWeight;
820
- });
821
-
822
- var HelperText = _styledComponents["default"].span(_templateObject4(), function (props) {
823
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
824
- }, function (props) {
825
- return props.theme.fontFamily;
826
- }, function (props) {
827
- return props.theme.helperTextFontSize;
828
- }, function (props) {
829
- return props.theme.helperTextFontStyle;
830
- }, function (props) {
831
- return props.theme.helperTextFontWeight;
832
- });
833
-
834
- var InputContainer = _styledComponents["default"].div(_templateObject5(), function (props) {
835
- if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");
836
- }, function (props) {
837
- if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
838
- }, function (props) {
839
- return props.error && !props.disabled && "border-color: transparent;\n box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.errorBorderColorOnDark : props.theme.errorBorderColor, ";\n ");
840
- }, function (props) {
841
- return props.disabled && "cursor: not-allowed;";
842
- }, function (props) {
843
- return !props.disabled && "\n &:hover {\n border-color: ".concat(props.error ? "transparent" : props.backgroundType === "dark" ? props.theme.hoverBorderColorOnDark : props.theme.hoverBorderColor, ";\n ").concat(props.error && "box-shadow: 0 0 0 2px ".concat(props.backgroundType === "dark" ? props.theme.hoverErrorBorderColorOnDark : props.theme.hoverErrorBorderColor, ";"), "\n }\n &:focus-within {\n border-color: transparent;\n box-shadow: 0 0 0 2px ").concat(props.backgroundType === "dark" ? props.theme.focusBorderColorOnDark : props.theme.focusBorderColor, ";\n }\n ");
844
- });
845
-
846
- var Input = _styledComponents["default"].input(_templateObject6(), function (props) {
847
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
848
- }, function (props) {
849
- return props.theme.fontFamily;
850
- }, function (props) {
851
- return props.theme.valueFontSize;
852
- }, function (props) {
853
- return props.theme.valueFontStyle;
854
- }, function (props) {
855
- return props.theme.valueFontWeight;
856
- }, function (props) {
857
- return props.disabled && "cursor: not-allowed;";
858
- }, function (props) {
859
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPlaceholderFontColorOnDark : props.theme.disabledPlaceholderFontColor : props.backgroundType === "dark" ? props.theme.placeholderFontColorOnDark : props.theme.placeholderFontColor;
860
- });
861
-
862
- var ActionIcon = _styledComponents["default"].img(_templateObject7());
863
-
864
- var Action = _styledComponents["default"].button(_templateObject8(), function (props) {
865
- return props.theme.fontFamily;
866
- }, function (props) {
867
- return props.disabled ? "cursor: not-allowed;" : "cursor: pointer;";
868
- }, function (props) {
869
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledActionBackgroundColorOnDark : props.theme.disabledActionBackgroundColor : props.backgroundType === "dark" ? props.theme.actionBackgroundColorOnDark : props.theme.actionBackgroundColor;
870
- }, function (props) {
871
- return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledActionIconColorOnDark : props.theme.disabledActionIconColor : props.backgroundType === "dark" ? props.theme.actionIconColorOnDark : props.theme.actionIconColor;
872
- }, function (props) {
873
- 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 ");
874
- });
875
-
876
- var Prefix = _styledComponents["default"].span(_templateObject9(), function (props) {
877
- var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledPrefixColorOnDark : props.theme.disabledPrefixColor : props.backgroundType === "dark" ? props.theme.prefixColorOnDark : props.theme.prefixColor;
878
- return "color: ".concat(color, "; border-right: 1px solid ").concat(color, ";");
879
- }, function (props) {
880
- return props.theme.fontFamily;
881
- });
882
-
883
- var Suffix = _styledComponents["default"].span(_templateObject10(), function (props) {
884
- var color = props.disabled ? props.backgroundType === "dark" ? props.theme.disabledSuffixColorOnDark : props.theme.disabledSuffixColor : props.backgroundType === "dark" ? props.theme.suffixColorOnDark : props.theme.suffixColor;
885
- return "color: ".concat(color, "; border-left: 1px solid ").concat(color, ";");
886
- }, function (props) {
887
- return props.theme.fontFamily;
888
- });
889
-
890
- var ErrorIcon = _styledComponents["default"].span(_templateObject11(), function (props) {
891
- return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
892
- });
893
-
894
- var Error = _styledComponents["default"].span(_templateObject12(), function (props) {
895
- return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
896
- }, function (props) {
897
- return props.theme.fontFamily;
898
- });
899
-
900
- var Suggestions = _styledComponents["default"].ul(_templateObject13(), function (props) {
901
- return props.isError ? props.theme.errorMessageBackgroundColor : "#ffffff";
902
- }, function (props) {
903
- return props.isError ? props.theme.errorMessageBorderColor : props.theme.enabledBorderColor;
904
- }, function (props) {
905
- return props.theme.listOptionFontColor;
906
- }, function (props) {
907
- return props.theme.fontFamily;
908
- }, function (props) {
909
- return props.theme.listOptionFontSize;
910
- }, function (props) {
911
- return props.theme.listOptionFontStyle;
912
- }, function (props) {
913
- return props.theme.listOptionFontWeight;
914
- });
915
-
916
- var Suggestion = _styledComponents["default"].li(_templateObject14(), function (props) {
917
- return props.active ? "background-color: ".concat(props.theme.activeListOptionBackgroundColor, ";") : props.visualFocused && "background-color: ".concat(props.theme.hoverListOptionBackgroundColor, ";");
918
- });
919
-
920
- var SuggestionsSystemMessage = _styledComponents["default"].span(_templateObject15(), function (props) {
921
- return props.theme.systemMessageFontColor;
922
- });
923
-
924
- var SuggestionsErrorIcon = _styledComponents["default"].span(_templateObject16(), function (props) {
925
- return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
926
- });
927
-
928
- var SuggestionsError = _styledComponents["default"].span(_templateObject17());
929
-
930
- DxcNewInputText.propTypes = {
931
- label: _propTypes["default"].string,
932
- name: _propTypes["default"].string,
933
- value: _propTypes["default"].string,
934
- helperText: _propTypes["default"].string,
935
- placeholder: _propTypes["default"].string,
936
- action: _propTypes["default"].shape({
937
- onClick: _propTypes["default"].func.isRequired,
938
- icon: _propTypes["default"].oneOfType([_propTypes["default"].shape({
939
- type: _propTypes["default"].oneOf(["svg"])
940
- }), _propTypes["default"].string]).isRequired
941
- }),
942
- clearable: _propTypes["default"].bool,
943
- disabled: _propTypes["default"].bool,
944
- optional: _propTypes["default"].bool,
945
- prefix: _propTypes["default"].string,
946
- suffix: _propTypes["default"].string,
947
- onChange: _propTypes["default"].func,
948
- onBlur: _propTypes["default"].func,
949
- error: _propTypes["default"].string,
950
- autocomplete: _propTypes["default"].string,
951
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
952
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
953
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
954
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
955
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
956
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
957
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
958
- suggestions: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].array]),
959
- pattern: _propTypes["default"].string,
960
- length: _propTypes["default"].shape({
961
- min: _propTypes["default"].number,
962
- max: _propTypes["default"].number
963
- }),
964
- tabIndex: _propTypes["default"].number
965
- };
966
- var _default = DxcNewInputText;
967
- exports["default"] = _default;