@dxc-technology/halstack-react 0.0.0-d20b360 → 0.0.0-d3554d7

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 (273) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/ThemeContext.d.ts +10 -0
  4. package/ThemeContext.js +26 -29
  5. package/accordion/Accordion.d.ts +1 -1
  6. package/accordion/Accordion.js +11 -22
  7. package/accordion/Accordion.stories.tsx +307 -0
  8. package/accordion/Accordion.test.js +57 -0
  9. package/accordion/types.d.ts +4 -8
  10. package/accordion-group/AccordionGroup.js +2 -2
  11. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  12. package/accordion-group/AccordionGroup.test.js +133 -0
  13. package/accordion-group/types.d.ts +4 -8
  14. package/alert/Alert.js +2 -2
  15. package/alert/Alert.stories.tsx +170 -0
  16. package/alert/Alert.test.js +92 -0
  17. package/alert/types.d.ts +1 -1
  18. package/badge/Badge.d.ts +4 -0
  19. package/badge/Badge.js +1 -1
  20. package/badge/types.d.ts +4 -0
  21. package/badge/types.js +5 -0
  22. package/bleed/Bleed.d.ts +3 -0
  23. package/bleed/Bleed.js +84 -0
  24. package/bleed/Bleed.stories.tsx +342 -0
  25. package/bleed/types.d.ts +13 -0
  26. package/bleed/types.js +5 -0
  27. package/box/Box.d.ts +4 -0
  28. package/box/Box.js +6 -32
  29. package/box/{Box.stories.jsx → Box.stories.tsx} +0 -0
  30. package/box/Box.test.js +18 -0
  31. package/box/types.d.ts +43 -0
  32. package/box/types.js +5 -0
  33. package/button/Button.d.ts +1 -1
  34. package/button/Button.js +15 -26
  35. package/button/Button.stories.tsx +223 -242
  36. package/button/Button.test.js +35 -0
  37. package/button/types.d.ts +9 -13
  38. package/card/Card.js +5 -6
  39. package/card/Card.stories.tsx +201 -0
  40. package/card/Card.test.js +50 -0
  41. package/card/ice-cream.jpg +0 -0
  42. package/card/types.d.ts +4 -6
  43. package/checkbox/Checkbox.js +2 -2
  44. package/checkbox/Checkbox.test.js +65 -0
  45. package/checkbox/types.d.ts +2 -2
  46. package/chip/Chip.d.ts +4 -0
  47. package/chip/Chip.js +16 -76
  48. package/chip/Chip.stories.tsx +119 -0
  49. package/chip/Chip.test.js +56 -0
  50. package/chip/types.d.ts +45 -0
  51. package/chip/types.js +5 -0
  52. package/common/variables.js +85 -281
  53. package/date-input/DateInput.js +10 -13
  54. package/date-input/DateInput.stories.tsx +138 -0
  55. package/date-input/DateInput.test.js +469 -0
  56. package/dialog/Dialog.js +4 -3
  57. package/dialog/Dialog.stories.tsx +212 -0
  58. package/dialog/Dialog.test.js +40 -0
  59. package/dropdown/Dropdown.d.ts +1 -1
  60. package/dropdown/Dropdown.js +13 -35
  61. package/dropdown/Dropdown.stories.tsx +249 -0
  62. package/dropdown/Dropdown.test.js +189 -0
  63. package/dropdown/types.d.ts +6 -15
  64. package/file-input/FileInput.d.ts +4 -0
  65. package/file-input/FileInput.js +167 -109
  66. package/file-input/FileInput.stories.tsx +507 -0
  67. package/file-input/FileInput.test.js +457 -0
  68. package/file-input/FileItem.d.ts +14 -0
  69. package/file-input/FileItem.js +12 -21
  70. package/file-input/types.d.ts +112 -0
  71. package/file-input/types.js +5 -0
  72. package/footer/Footer.d.ts +1 -1
  73. package/footer/Footer.js +28 -36
  74. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  75. package/footer/Footer.test.js +109 -0
  76. package/footer/Icons.d.ts +2 -0
  77. package/footer/Icons.js +3 -3
  78. package/footer/types.d.ts +22 -18
  79. package/header/Header.js +2 -2
  80. package/header/Header.stories.tsx +162 -0
  81. package/header/Header.test.js +63 -0
  82. package/header/Icons.d.ts +2 -0
  83. package/header/types.d.ts +4 -2
  84. package/heading/Heading.d.ts +4 -0
  85. package/heading/Heading.js +7 -24
  86. package/heading/Heading.stories.tsx +54 -0
  87. package/heading/Heading.test.js +186 -0
  88. package/heading/types.d.ts +33 -0
  89. package/heading/types.js +5 -0
  90. package/inset/Inset.d.ts +3 -0
  91. package/inset/Inset.js +84 -0
  92. package/inset/Inset.stories.tsx +229 -0
  93. package/inset/types.d.ts +13 -0
  94. package/inset/types.js +5 -0
  95. package/layout/ApplicationLayout.d.ts +10 -0
  96. package/layout/ApplicationLayout.js +17 -21
  97. package/layout/ApplicationLayout.stories.tsx +171 -0
  98. package/layout/types.d.ts +57 -0
  99. package/layout/types.js +5 -0
  100. package/link/Link.d.ts +3 -0
  101. package/link/Link.js +10 -40
  102. package/link/Link.stories.tsx +151 -0
  103. package/link/Link.test.js +91 -0
  104. package/link/types.d.ts +70 -0
  105. package/link/types.js +5 -0
  106. package/list/List.d.ts +4 -0
  107. package/list/List.js +47 -0
  108. package/list/List.stories.tsx +95 -0
  109. package/list/types.d.ts +7 -0
  110. package/list/types.js +5 -0
  111. package/main.d.ts +10 -8
  112. package/main.js +54 -38
  113. package/number-input/NumberInput.d.ts +4 -0
  114. package/number-input/NumberInput.js +5 -50
  115. package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
  116. package/number-input/NumberInput.test.js +508 -0
  117. package/number-input/NumberInputContext.d.ts +4 -0
  118. package/number-input/NumberInputContext.js +5 -2
  119. package/number-input/numberInputContextTypes.d.ts +19 -0
  120. package/number-input/numberInputContextTypes.js +5 -0
  121. package/number-input/types.d.ts +117 -0
  122. package/number-input/types.js +5 -0
  123. package/package.json +4 -2
  124. package/paginator/Paginator.js +2 -8
  125. package/paginator/Paginator.test.js +266 -0
  126. package/password-input/PasswordInput.d.ts +4 -0
  127. package/password-input/PasswordInput.js +19 -55
  128. package/password-input/{PasswordInput.stories.jsx → PasswordInput.stories.tsx} +4 -4
  129. package/password-input/PasswordInput.test.js +183 -0
  130. package/password-input/types.d.ts +107 -0
  131. package/password-input/types.js +5 -0
  132. package/progress-bar/ProgressBar.js +4 -4
  133. package/progress-bar/ProgressBar.stories.jsx +58 -0
  134. package/progress-bar/ProgressBar.test.js +65 -0
  135. package/radio/Radio.js +2 -2
  136. package/radio/Radio.test.js +71 -0
  137. package/radio/types.d.ts +2 -2
  138. package/radio-group/Radio.d.ts +4 -0
  139. package/radio-group/Radio.js +141 -0
  140. package/radio-group/RadioGroup.d.ts +4 -0
  141. package/radio-group/RadioGroup.js +279 -0
  142. package/radio-group/RadioGroup.stories.tsx +96 -0
  143. package/radio-group/RadioGroup.test.js +694 -0
  144. package/radio-group/types.d.ts +37 -0
  145. package/radio-group/types.js +5 -0
  146. package/resultsetTable/ResultsetTable.d.ts +4 -0
  147. package/resultsetTable/ResultsetTable.js +9 -29
  148. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  149. package/resultsetTable/ResultsetTable.test.js +306 -0
  150. package/resultsetTable/types.d.ts +67 -0
  151. package/resultsetTable/types.js +5 -0
  152. package/row/Row.d.ts +3 -0
  153. package/row/Row.js +127 -0
  154. package/row/Row.stories.tsx +237 -0
  155. package/row/types.d.ts +10 -0
  156. package/row/types.js +5 -0
  157. package/select/Select.d.ts +4 -0
  158. package/select/Select.js +26 -22
  159. package/select/Select.stories.tsx +582 -0
  160. package/select/Select.test.js +1900 -0
  161. package/select/types.d.ts +170 -0
  162. package/select/types.js +5 -0
  163. package/sidenav/Sidenav.d.ts +9 -0
  164. package/sidenav/Sidenav.js +6 -15
  165. package/sidenav/Sidenav.stories.tsx +182 -0
  166. package/sidenav/Sidenav.test.js +56 -0
  167. package/sidenav/types.d.ts +50 -0
  168. package/sidenav/types.js +5 -0
  169. package/slider/Slider.d.ts +1 -1
  170. package/slider/Slider.js +43 -32
  171. package/slider/Slider.stories.tsx +177 -0
  172. package/slider/Slider.test.js +129 -0
  173. package/slider/types.d.ts +2 -7
  174. package/spinner/Spinner.d.ts +4 -0
  175. package/spinner/Spinner.js +2 -19
  176. package/spinner/Spinner.stories.jsx +1 -0
  177. package/spinner/Spinner.test.js +64 -0
  178. package/spinner/types.d.ts +32 -0
  179. package/spinner/types.js +5 -0
  180. package/stack/Stack.d.ts +3 -0
  181. package/stack/Stack.js +97 -0
  182. package/stack/Stack.stories.tsx +164 -0
  183. package/stack/types.d.ts +9 -0
  184. package/stack/types.js +5 -0
  185. package/switch/Switch.js +4 -4
  186. package/switch/Switch.stories.tsx +160 -0
  187. package/switch/Switch.test.js +73 -0
  188. package/table/Table.d.ts +4 -0
  189. package/table/Table.js +3 -3
  190. package/table/Table.stories.jsx +2 -1
  191. package/table/Table.test.js +26 -0
  192. package/table/types.d.ts +21 -0
  193. package/table/types.js +5 -0
  194. package/tabs/Tabs.js +11 -9
  195. package/tabs/Tabs.stories.tsx +120 -0
  196. package/tabs/Tabs.test.js +123 -0
  197. package/tabs/types.d.ts +25 -18
  198. package/tag/Tag.d.ts +4 -0
  199. package/tag/Tag.js +26 -46
  200. package/tag/Tag.stories.tsx +138 -0
  201. package/tag/Tag.test.js +60 -0
  202. package/tag/types.d.ts +69 -0
  203. package/tag/types.js +5 -0
  204. package/text/Text.d.ts +7 -0
  205. package/text/Text.js +30 -0
  206. package/text/Text.stories.tsx +19 -0
  207. package/text-input/TextInput.d.ts +4 -0
  208. package/text-input/TextInput.js +59 -88
  209. package/text-input/TextInput.stories.tsx +474 -0
  210. package/text-input/TextInput.test.js +1691 -0
  211. package/text-input/types.d.ts +159 -0
  212. package/text-input/types.js +5 -0
  213. package/textarea/Textarea.d.ts +4 -0
  214. package/textarea/Textarea.js +32 -63
  215. package/textarea/Textarea.stories.jsx +34 -12
  216. package/textarea/Textarea.test.js +436 -0
  217. package/textarea/types.d.ts +130 -0
  218. package/textarea/types.js +5 -0
  219. package/toggle-group/ToggleGroup.d.ts +4 -0
  220. package/toggle-group/ToggleGroup.js +16 -45
  221. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  222. package/toggle-group/ToggleGroup.test.js +125 -0
  223. package/toggle-group/types.d.ts +97 -0
  224. package/toggle-group/types.js +5 -0
  225. package/useTheme.d.ts +2 -0
  226. package/useTheme.js +1 -1
  227. package/wizard/Wizard.d.ts +4 -0
  228. package/wizard/Wizard.js +69 -59
  229. package/wizard/Wizard.stories.tsx +224 -0
  230. package/wizard/Wizard.test.js +128 -0
  231. package/wizard/types.d.ts +60 -0
  232. package/wizard/types.js +5 -0
  233. package/V3Select/V3Select.js +0 -455
  234. package/V3Select/index.d.ts +0 -27
  235. package/V3Textarea/V3Textarea.js +0 -260
  236. package/V3Textarea/index.d.ts +0 -27
  237. package/box/index.d.ts +0 -25
  238. package/chip/index.d.ts +0 -22
  239. package/date/Date.js +0 -373
  240. package/date/index.d.ts +0 -27
  241. package/file-input/index.d.ts +0 -81
  242. package/heading/index.d.ts +0 -17
  243. package/input-text/Icons.js +0 -22
  244. package/input-text/InputText.js +0 -611
  245. package/input-text/index.d.ts +0 -36
  246. package/link/index.d.ts +0 -23
  247. package/number-input/index.d.ts +0 -113
  248. package/password-input/index.d.ts +0 -94
  249. package/resultsetTable/index.d.ts +0 -19
  250. package/select/index.d.ts +0 -131
  251. package/sidenav/index.d.ts +0 -13
  252. package/spinner/index.d.ts +0 -17
  253. package/table/index.d.ts +0 -13
  254. package/tag/index.d.ts +0 -24
  255. package/text-input/index.d.ts +0 -135
  256. package/textarea/index.d.ts +0 -117
  257. package/toggle/Toggle.js +0 -186
  258. package/toggle/index.d.ts +0 -21
  259. package/toggle-group/index.d.ts +0 -21
  260. package/upload/Upload.js +0 -201
  261. package/upload/buttons-upload/ButtonsUpload.js +0 -111
  262. package/upload/buttons-upload/Icons.js +0 -40
  263. package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
  264. package/upload/dragAndDropArea/Icons.js +0 -39
  265. package/upload/file-upload/FileToUpload.js +0 -115
  266. package/upload/file-upload/Icons.js +0 -66
  267. package/upload/files-upload/FilesToUpload.js +0 -109
  268. package/upload/index.d.ts +0 -15
  269. package/upload/transaction/Icons.js +0 -160
  270. package/upload/transaction/Transaction.js +0 -104
  271. package/upload/transactions/Transactions.js +0 -94
  272. package/wizard/Icons.js +0 -65
  273. package/wizard/index.d.ts +0 -18
@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
9
9
  });
10
10
  exports["default"] = void 0;
11
11
 
12
- var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
13
-
14
12
  var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
15
13
 
16
14
  var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -21,9 +19,7 @@ var _react = _interopRequireWildcard(require("react"));
21
19
 
22
20
  var _styledComponents = _interopRequireWildcard(require("styled-components"));
23
21
 
24
- var _useTheme = _interopRequireDefault(require("../useTheme.js"));
25
-
26
- var _propTypes = _interopRequireDefault(require("prop-types"));
22
+ var _useTheme = _interopRequireDefault(require("../useTheme"));
27
23
 
28
24
  var _variables = require("../common/variables.js");
29
25
 
@@ -31,9 +27,9 @@ var _utils = require("../common/utils.js");
31
27
 
32
28
  var _uuid = require("uuid");
33
29
 
34
- var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext.js"));
30
+ var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
35
31
 
36
- var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext.js"));
32
+ var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext"));
37
33
 
38
34
  var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18;
39
35
 
@@ -114,10 +110,6 @@ var getNotOptionalErrorMessage = function getNotOptionalErrorMessage() {
114
110
  return "This field is required. Please, enter a value.";
115
111
  };
116
112
 
117
- var getLengthErrorMessage = function getLengthErrorMessage(length) {
118
- return "Min length ".concat(length.min, ", max length ").concat(length.max, ".");
119
- };
120
-
121
113
  var getPatternErrorMessage = function getPatternErrorMessage() {
122
114
  return "Please match the format requested.";
123
115
  };
@@ -140,15 +132,11 @@ var getLastOptionIndex = function getLastOptionIndex(filteredSuggestions) {
140
132
  };
141
133
 
142
134
  var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref) {
143
- var _action$title;
144
-
145
- var _ref$label = _ref.label,
146
- label = _ref$label === void 0 ? "" : _ref$label,
135
+ var label = _ref.label,
147
136
  _ref$name = _ref.name,
148
137
  name = _ref$name === void 0 ? "" : _ref$name,
149
138
  value = _ref.value,
150
- _ref$helperText = _ref.helperText,
151
- helperText = _ref$helperText === void 0 ? "" : _ref$helperText,
139
+ helperText = _ref.helperText,
152
140
  _ref$placeholder = _ref.placeholder,
153
141
  placeholder = _ref$placeholder === void 0 ? "" : _ref$placeholder,
154
142
  action = _ref.action,
@@ -164,11 +152,11 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
164
152
  suffix = _ref$suffix === void 0 ? "" : _ref$suffix,
165
153
  onChange = _ref.onChange,
166
154
  onBlur = _ref.onBlur,
167
- _ref$error = _ref.error,
168
- error = _ref$error === void 0 ? "" : _ref$error,
155
+ error = _ref.error,
169
156
  suggestions = _ref.suggestions,
170
157
  pattern = _ref.pattern,
171
- length = _ref.length,
158
+ minLength = _ref.minLength,
159
+ maxLength = _ref.maxLength,
172
160
  _ref$autocomplete = _ref.autocomplete,
173
161
  autocomplete = _ref$autocomplete === void 0 ? "off" : _ref$autocomplete,
174
162
  margin = _ref.margin,
@@ -217,7 +205,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
217
205
  var colorsTheme = (0, _useTheme["default"])();
218
206
  var backgroundType = (0, _react.useContext)(_BackgroundColorContext["default"]);
219
207
  var autosuggestId = "".concat(inputId, "-listBox");
220
- var errorId = "error-message-".concat(inputId);
208
+ var errorId = "error-".concat(inputId);
221
209
  var numberInputContext = (0, _react.useContext)(_NumberInputContext["default"]);
222
210
  var lastOptionIndex = (0, _react.useMemo)(function () {
223
211
  return getLastOptionIndex(filteredSuggestions);
@@ -228,7 +216,11 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
228
216
  };
229
217
 
230
218
  var isLengthIncorrect = function isLengthIncorrect(value) {
231
- return value && (length === null || length === void 0 ? void 0 : length.min) && (length === null || length === void 0 ? void 0 : length.max) && (value.length < length.min || value.length > length.max);
219
+ return value && minLength && maxLength && (value.length < minLength || value.length > maxLength);
220
+ };
221
+
222
+ var getLengthErrorMessage = function getLengthErrorMessage() {
223
+ return "Min length ".concat(minLength, ", max length ").concat(maxLength, ".");
232
224
  };
233
225
 
234
226
  var isNumberIncorrect = function isNumberIncorrect(value) {
@@ -266,7 +258,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
266
258
  error: getNotOptionalErrorMessage()
267
259
  });else if (isLengthIncorrect(newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
268
260
  value: changedValue,
269
- error: getLengthErrorMessage(length)
261
+ error: getLengthErrorMessage()
270
262
  });else if (newValue && pattern && !patternMatch(pattern, newValue)) onChange === null || onChange === void 0 ? void 0 : onChange({
271
263
  value: changedValue,
272
264
  error: getPatternErrorMessage()
@@ -300,7 +292,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
300
292
  error: getNotOptionalErrorMessage()
301
293
  });else if (isLengthIncorrect(event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
302
294
  value: event.target.value,
303
- error: getLengthErrorMessage(length)
295
+ error: getLengthErrorMessage()
304
296
  });else if (event.target.value && pattern && !patternMatch(pattern, event.target.value)) onBlur === null || onBlur === void 0 ? void 0 : onBlur({
305
297
  value: event.target.value,
306
298
  error: getPatternErrorMessage()
@@ -317,7 +309,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
317
309
  switch (event.keyCode) {
318
310
  case 40:
319
311
  // Arrow Down
320
- if (numberInputContext) {
312
+ if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number") {
321
313
  decrementNumber();
322
314
  event.preventDefault();
323
315
  } else {
@@ -335,7 +327,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
335
327
 
336
328
  case 38:
337
329
  // Arrow Up
338
- if (numberInputContext) {
330
+ if ((numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number") {
339
331
  incrementNumber();
340
332
  event.preventDefault();
341
333
  } else {
@@ -474,7 +466,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
474
466
  changeVisualFocusedSuggIndex(-1);
475
467
  }
476
468
 
477
- numberInputContext && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
469
+ (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" && setNumberProps(numberInputContext.typeNumber, numberInputContext.minNumber, numberInputContext.maxNumber, numberInputContext.stepNumber);
478
470
  }, [value, innerValue, suggestions, numberInputContext]);
479
471
 
480
472
  var HighlightedSuggestion = function HighlightedSuggestion(_ref2) {
@@ -505,11 +497,12 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
505
497
  margin: margin,
506
498
  ref: ref,
507
499
  size: size
508
- }, /*#__PURE__*/_react["default"].createElement(Label, {
500
+ }, label && /*#__PURE__*/_react["default"].createElement(Label, {
509
501
  htmlFor: inputId,
510
502
  disabled: disabled,
511
- backgroundType: backgroundType
512
- }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), /*#__PURE__*/_react["default"].createElement(HelperText, {
503
+ backgroundType: backgroundType,
504
+ helperText: helperText
505
+ }, label, " ", optional && /*#__PURE__*/_react["default"].createElement(OptionalLabel, null, "(Optional)")), helperText && /*#__PURE__*/_react["default"].createElement(HelperText, {
513
506
  disabled: disabled,
514
507
  backgroundType: backgroundType
515
508
  }, helperText), /*#__PURE__*/_react["default"].createElement(InputContainer, {
@@ -539,57 +532,70 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
539
532
  ref: inputRef,
540
533
  backgroundType: backgroundType,
541
534
  pattern: pattern,
542
- minLength: length === null || length === void 0 ? void 0 : length.min,
543
- maxLength: length === null || length === void 0 ? void 0 : length.max,
535
+ minLength: minLength,
536
+ maxLength: maxLength,
544
537
  autoComplete: autocomplete,
545
538
  tabIndex: tabIndex,
546
539
  role: isTextInputType() && hasSuggestions() ? "combobox" : "textbox",
547
540
  "aria-autocomplete": isTextInputType() && hasSuggestions() ? "list" : undefined,
548
541
  "aria-controls": isTextInputType() && hasSuggestions() ? autosuggestId : undefined,
542
+ "aria-disabled": disabled,
549
543
  "aria-expanded": isTextInputType() && hasSuggestions() ? isOpen ? "true" : "false" : undefined,
550
544
  "aria-activedescendant": isTextInputType() && hasSuggestions() && isOpen && visualFocusedSuggIndex !== -1 ? "suggestion-".concat(visualFocusedSuggIndex) : undefined,
551
545
  "aria-invalid": error ? "true" : "false",
552
- "aria-describedby": error ? errorId : undefined,
546
+ "aria-errormessage": error ? errorId : undefined,
553
547
  "aria-required": optional ? "false" : "true"
554
548
  }), !disabled && error && /*#__PURE__*/_react["default"].createElement(ErrorIcon, {
555
549
  backgroundType: backgroundType,
556
550
  "aria-label": "Error"
557
551
  }, textInputIcons.error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
558
- onClick: handleClearActionOnClick,
552
+ onClick: function onClick() {
553
+ return handleClearActionOnClick();
554
+ },
559
555
  onMouseDown: function onMouseDown(event) {
560
556
  event.stopPropagation();
561
557
  },
562
558
  backgroundType: backgroundType,
563
559
  tabIndex: tabIndex,
564
- "aria-label": "Clear"
560
+ title: "Clear field",
561
+ "aria-label": "Clear field"
565
562
  }, textInputIcons.clear), (numberInputContext === null || numberInputContext === void 0 ? void 0 : numberInputContext.typeNumber) === "number" ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Action, {
566
563
  ref: actionRef,
567
564
  disabled: disabled,
568
- onClick: handleDecrementActionOnClick,
565
+ onClick: function onClick() {
566
+ return handleDecrementActionOnClick();
567
+ },
569
568
  onMouseDown: function onMouseDown(event) {
570
569
  event.stopPropagation();
571
570
  },
572
571
  backgroundType: backgroundType,
573
572
  tabIndex: tabIndex,
574
- "aria-label": "Decrement"
573
+ title: "Decrement value",
574
+ "aria-label": "Decrement value"
575
575
  }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
576
576
  ref: actionRef,
577
577
  disabled: disabled,
578
- onClick: handleIncrementActionOnClick,
578
+ onClick: function onClick() {
579
+ return handleIncrementActionOnClick();
580
+ },
579
581
  onMouseDown: function onMouseDown(event) {
580
582
  event.stopPropagation();
581
583
  },
582
584
  backgroundType: backgroundType,
583
585
  tabIndex: tabIndex,
584
- "aria-label": "Increment"
586
+ title: "Increment value",
587
+ "aria-label": "Increment value"
585
588
  }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
586
589
  ref: actionRef,
587
590
  disabled: disabled,
588
- onClick: action.onClick,
591
+ onClick: function onClick() {
592
+ return action.onClick();
593
+ },
589
594
  onMouseDown: function onMouseDown(event) {
590
595
  event.stopPropagation();
591
596
  },
592
- title: (_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.title,
597
+ title: action.title,
598
+ "aria-label": action.title,
593
599
  backgroundType: backgroundType,
594
600
  tabIndex: tabIndex
595
601
  }, typeof action.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ActionIcon, {
@@ -614,9 +620,10 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
614
620
  });
615
621
  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
616
622
  backgroundType: backgroundType
617
- }, textInputIcons.error), "Error fetching data"))), !disabled && /*#__PURE__*/_react["default"].createElement(Error, {
623
+ }, textInputIcons.error), "Error fetching data"))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
618
624
  id: errorId,
619
- backgroundType: backgroundType
625
+ backgroundType: backgroundType,
626
+ "aria-live": error ? "assertive" : "off"
620
627
  }, error)));
621
628
  });
622
629
 
@@ -645,7 +652,7 @@ var DxcInput = _styledComponents["default"].div(_templateObject || (_templateObj
645
652
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
646
653
  });
647
654
 
648
- var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (props) {
655
+ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n ", "\n"])), function (props) {
649
656
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
650
657
  }, function (props) {
651
658
  return props.theme.fontFamily;
@@ -657,13 +664,15 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
657
664
  return props.theme.labelFontWeight;
658
665
  }, function (props) {
659
666
  return props.theme.labelLineHeight;
667
+ }, function (props) {
668
+ return !props.helperText && "margin-bottom: 0.25rem";
660
669
  });
661
670
 
662
671
  var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"])), function (props) {
663
672
  return props.theme.optionalLabelFontWeight;
664
673
  });
665
674
 
666
- var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n"])), function (props) {
675
+ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n color: ", ";\n\n font-family: ", ";\n font-size: ", ";\n font-style: ", ";\n font-weight: ", ";\n line-height: ", ";\n margin-bottom: 0.25rem;\n"])), function (props) {
667
676
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
668
677
  }, function (props) {
669
678
  return props.theme.fontFamily;
@@ -677,9 +686,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
677
686
  return props.theme.helperTextLineHeight;
678
687
  });
679
688
 
680
- var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n position: relative;\n align-items: center;\n height: calc(2.5rem - 2px);\n margin: ", ";\n padding: 0 0.5rem;\n\n ", "\n box-shadow: 0 0 0 2px transparent;\n border-radius: 4px;\n border: 1px solid\n ", ";\n ", "\n ", ";\n\n ", ";\n"])), function (props) {
681
- return "".concat(props.theme.inputMarginTop, " 0 ").concat(props.theme.inputMarginBottom, " 0");
682
- }, function (props) {
689
+ var InputContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n position: relative;\n align-items: center;\n height: calc(2.5rem - 2px);\n padding: 0 0.5rem;\n\n ", "\n box-shadow: 0 0 0 2px transparent;\n border-radius: 4px;\n border: 1px solid\n ", ";\n ", "\n ", ";\n\n ", ";\n"])), function (props) {
683
690
  if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");
684
691
  }, function (props) {
685
692
  if (props.disabled) return props.backgroundType === "dark" ? props.theme.disabledBorderColorOnDark : props.theme.disabledBorderColor;else return props.backgroundType === "dark" ? props.theme.enabledBorderColorOnDark : props.theme.enabledBorderColor;
@@ -691,7 +698,7 @@ var InputContainer = _styledComponents["default"].div(_templateObject5 || (_temp
691
698
  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 ");
692
699
  });
693
700
 
694
- var Input = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(2.5rem - 2px);\n width: 100%;\n background: none;\n border: none;\n outline: none;\n padding: 0 0.5rem;\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"])), function (props) {
701
+ var Input = _styledComponents["default"].input(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["\n height: calc(2.5rem - 2px);\n width: 100%;\n background: none;\n border: none;\n outline: none;\n padding: 0 0.5rem;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\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"])), function (props) {
695
702
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
696
703
  }, function (props) {
697
704
  return props.theme.fontFamily;
@@ -739,7 +746,7 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject11 || (_templat
739
746
  return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
740
747
  });
741
748
 
742
- var Error = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (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"])), function (props) {
749
+ var Error = _styledComponents["default"].span(_templateObject12 || (_templateObject12 = (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 margin-top: 0.25rem;\n"])), function (props) {
743
750
  return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
744
751
  }, function (props) {
745
752
  return props.theme.fontFamily;
@@ -761,7 +768,7 @@ var Suggestions = _styledComponents["default"].ul(_templateObject13 || (_templat
761
768
  return props.theme.listOptionFontWeight;
762
769
  });
763
770
 
764
- var Suggestion = _styledComponents["default"].li(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n padding: 0 0.5rem;\n line-height: 1.715em;\n cursor: pointer;\n\n box-shadow: inset 0 0 0 2px\n ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n"])), function (props) {
771
+ var Suggestion = _styledComponents["default"].li(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n padding: 0 0.5rem;\n line-height: 1.715em;\n cursor: pointer;\n\n box-shadow: inset 0 0 0 2px\n ", ";\n &:hover {\n background-color: ", ";\n }\n &:active {\n background-color: ", ";\n }\n"])), function (props) {
765
772
  return props.visualFocused ? props.theme.focusListOptionBorderColor : "transparent";
766
773
  }, function (props) {
767
774
  return props.theme.hoverListOptionBackgroundColor;
@@ -769,7 +776,7 @@ var Suggestion = _styledComponents["default"].li(_templateObject14 || (_template
769
776
  return props.theme.activeListOptionBackgroundColor;
770
777
  });
771
778
 
772
- var StyledSuggestion = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n display: flex;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n ", ";\n"])), function (props) {
779
+ var StyledSuggestion = _styledComponents["default"].span(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["\n width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n padding: 0.25rem 0.5rem 0.188rem 0.5rem;\n ", ";\n"])), function (props) {
773
780
  return props.last || props.visualFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
774
781
  });
775
782
 
@@ -785,41 +792,5 @@ var SuggestionsError = _styledComponents["default"].span(_templateObject18 || (_
785
792
  return props.theme.errorListDialogFontColor;
786
793
  });
787
794
 
788
- DxcTextInput.propTypes = {
789
- label: _propTypes["default"].string,
790
- name: _propTypes["default"].string,
791
- value: _propTypes["default"].string,
792
- helperText: _propTypes["default"].string,
793
- placeholder: _propTypes["default"].string,
794
- action: _propTypes["default"].shape({
795
- onClick: _propTypes["default"].func.isRequired,
796
- icon: _propTypes["default"].oneOfType([_propTypes["default"].shape({
797
- type: _propTypes["default"].oneOf(["svg"])
798
- }), _propTypes["default"].string]).isRequired
799
- }),
800
- clearable: _propTypes["default"].bool,
801
- disabled: _propTypes["default"].bool,
802
- optional: _propTypes["default"].bool,
803
- prefix: _propTypes["default"].string,
804
- suffix: _propTypes["default"].string,
805
- onChange: _propTypes["default"].func,
806
- onBlur: _propTypes["default"].func,
807
- error: _propTypes["default"].string,
808
- autocomplete: _propTypes["default"].string,
809
- margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
810
- top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
811
- bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
812
- left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
813
- right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
814
- }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
815
- size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
816
- suggestions: _propTypes["default"].oneOfType([_propTypes["default"].func, _propTypes["default"].array]),
817
- pattern: _propTypes["default"].string,
818
- length: _propTypes["default"].shape({
819
- min: _propTypes["default"].number,
820
- max: _propTypes["default"].number
821
- }),
822
- tabIndex: _propTypes["default"].number
823
- };
824
795
  var _default = DxcTextInput;
825
796
  exports["default"] = _default;