@dxc-technology/halstack-react 0.0.0-ee92231 → 0.0.0-f0d662d

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 (203) hide show
  1. package/BackgroundColorContext.d.ts +10 -0
  2. package/BackgroundColorContext.js +1 -4
  3. package/ThemeContext.d.ts +15 -0
  4. package/ThemeContext.js +5 -8
  5. package/V3Select/V3Select.js +2 -2
  6. package/V3Textarea/V3Textarea.js +2 -2
  7. package/accordion/Accordion.js +2 -2
  8. package/accordion/Accordion.stories.tsx +307 -0
  9. package/accordion/types.d.ts +1 -1
  10. package/accordion-group/AccordionGroup.js +2 -2
  11. package/accordion-group/AccordionGroup.stories.tsx +225 -0
  12. package/accordion-group/types.d.ts +1 -1
  13. package/alert/Alert.js +2 -2
  14. package/alert/Alert.stories.tsx +170 -0
  15. package/alert/types.d.ts +1 -1
  16. package/badge/Badge.js +1 -1
  17. package/bleed/Bleed.d.ts +3 -0
  18. package/bleed/Bleed.js +84 -0
  19. package/bleed/Bleed.stories.tsx +342 -0
  20. package/bleed/types.d.ts +13 -0
  21. package/bleed/types.js +5 -0
  22. package/box/Box.d.ts +1 -1
  23. package/box/Box.js +4 -7
  24. package/box/types.d.ts +0 -4
  25. package/button/Button.d.ts +1 -1
  26. package/button/Button.js +13 -19
  27. package/button/Button.stories.tsx +222 -241
  28. package/button/types.d.ts +5 -9
  29. package/card/Card.js +5 -6
  30. package/card/Card.stories.tsx +201 -0
  31. package/card/ice-cream.jpg +0 -0
  32. package/card/types.d.ts +4 -6
  33. package/checkbox/Checkbox.js +2 -2
  34. package/checkbox/types.d.ts +2 -2
  35. package/chip/Chip.d.ts +4 -0
  36. package/chip/Chip.js +5 -27
  37. package/chip/Chip.stories.tsx +121 -0
  38. package/chip/types.d.ts +53 -0
  39. package/chip/types.js +5 -0
  40. package/common/variables.js +70 -27
  41. package/date/Date.js +1 -1
  42. package/date-input/DateInput.js +10 -13
  43. package/date-input/DateInput.stories.tsx +138 -0
  44. package/dialog/Dialog.js +4 -3
  45. package/dialog/Dialog.stories.tsx +212 -0
  46. package/dropdown/Dropdown.js +1 -1
  47. package/dropdown/Dropdown.stories.tsx +247 -0
  48. package/dropdown/types.d.ts +1 -1
  49. package/file-input/FileInput.d.ts +4 -0
  50. package/file-input/FileInput.js +167 -109
  51. package/file-input/FileInput.stories.tsx +507 -0
  52. package/file-input/FileItem.d.ts +14 -0
  53. package/file-input/FileItem.js +12 -21
  54. package/file-input/types.d.ts +112 -0
  55. package/file-input/types.js +5 -0
  56. package/footer/Footer.d.ts +1 -1
  57. package/footer/Footer.js +28 -36
  58. package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
  59. package/footer/Icons.d.ts +2 -0
  60. package/footer/Icons.js +3 -3
  61. package/footer/types.d.ts +22 -18
  62. package/header/Header.js +2 -2
  63. package/header/Header.stories.tsx +162 -0
  64. package/header/Icons.d.ts +2 -0
  65. package/header/types.d.ts +4 -2
  66. package/heading/Heading.d.ts +4 -0
  67. package/heading/Heading.js +7 -24
  68. package/heading/Heading.stories.tsx +54 -0
  69. package/heading/types.d.ts +33 -0
  70. package/heading/types.js +5 -0
  71. package/input-text/InputText.js +2 -2
  72. package/inset/Inset.d.ts +3 -0
  73. package/inset/Inset.js +84 -0
  74. package/inset/Inset.stories.tsx +229 -0
  75. package/inset/types.d.ts +13 -0
  76. package/inset/types.js +5 -0
  77. package/layout/ApplicationLayout.d.ts +10 -0
  78. package/layout/ApplicationLayout.js +9 -19
  79. package/layout/ApplicationLayout.stories.tsx +171 -0
  80. package/layout/types.d.ts +57 -0
  81. package/layout/types.js +5 -0
  82. package/link/Link.js +3 -3
  83. package/link/Link.stories.tsx +146 -0
  84. package/list/List.d.ts +4 -0
  85. package/list/List.js +47 -0
  86. package/list/List.stories.tsx +95 -0
  87. package/list/types.d.ts +7 -0
  88. package/list/types.js +5 -0
  89. package/main.d.ts +7 -3
  90. package/main.js +34 -2
  91. package/number-input/NumberInput.d.ts +4 -0
  92. package/number-input/NumberInput.js +5 -50
  93. package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
  94. package/number-input/NumberInputContext.d.ts +4 -0
  95. package/number-input/NumberInputContext.js +5 -2
  96. package/number-input/numberInputContextTypes.d.ts +19 -0
  97. package/number-input/numberInputContextTypes.js +5 -0
  98. package/number-input/types.d.ts +117 -0
  99. package/number-input/types.js +5 -0
  100. package/package.json +4 -2
  101. package/paginator/Paginator.js +2 -8
  102. package/password-input/PasswordInput.js +19 -18
  103. package/password-input/PasswordInput.stories.tsx +3 -3
  104. package/password-input/types.d.ts +17 -10
  105. package/progress-bar/ProgressBar.js +4 -4
  106. package/radio/Radio.js +2 -2
  107. package/radio/types.d.ts +2 -2
  108. package/radio-group/Radio.d.ts +4 -0
  109. package/radio-group/Radio.js +140 -0
  110. package/radio-group/RadioGroup.d.ts +4 -0
  111. package/radio-group/RadioGroup.js +273 -0
  112. package/radio-group/RadioGroup.stories.tsx +79 -0
  113. package/radio-group/RadioGroup.test.js +248 -0
  114. package/radio-group/types.d.ts +36 -0
  115. package/radio-group/types.js +5 -0
  116. package/resultsetTable/ResultsetTable.d.ts +4 -0
  117. package/resultsetTable/ResultsetTable.js +5 -28
  118. package/resultsetTable/ResultsetTable.stories.tsx +275 -0
  119. package/resultsetTable/types.d.ts +67 -0
  120. package/resultsetTable/types.js +5 -0
  121. package/row/Row.d.ts +3 -0
  122. package/row/Row.js +127 -0
  123. package/row/Row.stories.tsx +237 -0
  124. package/row/types.d.ts +10 -0
  125. package/row/types.js +5 -0
  126. package/select/Select.d.ts +4 -0
  127. package/select/Select.js +20 -22
  128. package/select/Select.stories.tsx +572 -0
  129. package/select/types.d.ts +170 -0
  130. package/select/types.js +5 -0
  131. package/sidenav/Sidenav.d.ts +9 -0
  132. package/sidenav/Sidenav.js +6 -15
  133. package/sidenav/Sidenav.stories.tsx +182 -0
  134. package/sidenav/types.d.ts +50 -0
  135. package/sidenav/types.js +5 -0
  136. package/slider/Slider.d.ts +1 -1
  137. package/slider/Slider.js +43 -32
  138. package/slider/Slider.stories.tsx +177 -0
  139. package/slider/types.d.ts +2 -7
  140. package/spinner/Spinner.js +2 -2
  141. package/spinner/Spinner.stories.jsx +1 -0
  142. package/stack/Stack.d.ts +3 -0
  143. package/stack/Stack.js +97 -0
  144. package/stack/Stack.stories.tsx +164 -0
  145. package/stack/types.d.ts +9 -0
  146. package/stack/types.js +5 -0
  147. package/switch/Switch.js +2 -2
  148. package/switch/Switch.stories.tsx +1 -1
  149. package/table/Table.js +3 -3
  150. package/table/Table.stories.jsx +2 -1
  151. package/tabs/Tabs.js +11 -9
  152. package/tabs/Tabs.stories.tsx +120 -0
  153. package/tabs/types.d.ts +25 -18
  154. package/tag/Tag.d.ts +4 -0
  155. package/tag/Tag.js +4 -25
  156. package/tag/{Tag.stories.jsx → Tag.stories.tsx} +1 -1
  157. package/tag/types.d.ts +60 -0
  158. package/tag/types.js +5 -0
  159. package/text/Text.d.ts +7 -0
  160. package/text/Text.js +30 -0
  161. package/text/Text.stories.tsx +19 -0
  162. package/text-input/TextInput.d.ts +4 -0
  163. package/text-input/TextInput.js +54 -85
  164. package/text-input/TextInput.stories.tsx +456 -0
  165. package/text-input/types.d.ts +159 -0
  166. package/text-input/types.js +5 -0
  167. package/textarea/Textarea.d.ts +4 -0
  168. package/textarea/Textarea.js +27 -60
  169. package/textarea/Textarea.stories.jsx +4 -3
  170. package/textarea/types.d.ts +130 -0
  171. package/textarea/types.js +5 -0
  172. package/toggle/Toggle.js +1 -1
  173. package/toggle-group/ToggleGroup.d.ts +4 -0
  174. package/toggle-group/ToggleGroup.js +16 -45
  175. package/toggle-group/ToggleGroup.stories.tsx +173 -0
  176. package/toggle-group/types.d.ts +97 -0
  177. package/toggle-group/types.js +5 -0
  178. package/upload/buttons-upload/ButtonsUpload.js +2 -2
  179. package/upload/dragAndDropArea/DragAndDropArea.js +2 -2
  180. package/upload/file-upload/FileToUpload.js +1 -1
  181. package/upload/files-upload/FilesToUpload.js +1 -1
  182. package/upload/transaction/Transaction.js +2 -2
  183. package/upload/transactions/Transactions.js +1 -1
  184. package/useTheme.d.ts +2 -0
  185. package/useTheme.js +1 -1
  186. package/wizard/Wizard.d.ts +4 -0
  187. package/wizard/Wizard.js +69 -59
  188. package/wizard/Wizard.stories.tsx +224 -0
  189. package/wizard/types.d.ts +60 -0
  190. package/wizard/types.js +5 -0
  191. package/chip/index.d.ts +0 -22
  192. package/file-input/index.d.ts +0 -81
  193. package/heading/index.d.ts +0 -17
  194. package/number-input/index.d.ts +0 -113
  195. package/resultsetTable/index.d.ts +0 -19
  196. package/select/index.d.ts +0 -131
  197. package/sidenav/index.d.ts +0 -13
  198. package/tag/index.d.ts +0 -24
  199. package/text-input/index.d.ts +0 -135
  200. package/textarea/index.d.ts +0 -117
  201. package/toggle-group/index.d.ts +0 -21
  202. package/wizard/Icons.js +0 -65
  203. 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,
@@ -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,8 +532,8 @@ 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",
@@ -555,41 +548,53 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
555
548
  backgroundType: backgroundType,
556
549
  "aria-label": "Error"
557
550
  }, textInputIcons.error), !disabled && clearable && (value !== null && value !== void 0 ? value : innerValue).length > 0 && /*#__PURE__*/_react["default"].createElement(Action, {
558
- onClick: handleClearActionOnClick,
551
+ onClick: function onClick() {
552
+ return handleClearActionOnClick();
553
+ },
559
554
  onMouseDown: function onMouseDown(event) {
560
555
  event.stopPropagation();
561
556
  },
562
557
  backgroundType: backgroundType,
563
558
  tabIndex: tabIndex,
564
- "aria-label": "Clear"
559
+ title: "Clear field",
560
+ "aria-label": "Clear field"
565
561
  }, 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
562
  ref: actionRef,
567
563
  disabled: disabled,
568
- onClick: handleDecrementActionOnClick,
564
+ onClick: function onClick() {
565
+ return handleDecrementActionOnClick();
566
+ },
569
567
  onMouseDown: function onMouseDown(event) {
570
568
  event.stopPropagation();
571
569
  },
572
570
  backgroundType: backgroundType,
573
571
  tabIndex: tabIndex,
574
- "aria-label": "Decrement"
572
+ title: "Decrement value",
573
+ "aria-label": "Decrement value"
575
574
  }, textInputIcons.decrement), /*#__PURE__*/_react["default"].createElement(Action, {
576
575
  ref: actionRef,
577
576
  disabled: disabled,
578
- onClick: handleIncrementActionOnClick,
577
+ onClick: function onClick() {
578
+ return handleIncrementActionOnClick();
579
+ },
579
580
  onMouseDown: function onMouseDown(event) {
580
581
  event.stopPropagation();
581
582
  },
582
583
  backgroundType: backgroundType,
583
584
  tabIndex: tabIndex,
584
- "aria-label": "Increment"
585
+ title: "Increment value",
586
+ "aria-label": "Increment value"
585
587
  }, textInputIcons.increment)) : action && /*#__PURE__*/_react["default"].createElement(Action, {
586
588
  ref: actionRef,
587
589
  disabled: disabled,
588
- onClick: action.onClick,
590
+ onClick: function onClick() {
591
+ return action.onClick();
592
+ },
589
593
  onMouseDown: function onMouseDown(event) {
590
594
  event.stopPropagation();
591
595
  },
592
- title: (_action$title = action.title) !== null && _action$title !== void 0 ? _action$title : action.title,
596
+ title: action.title,
597
+ "aria-label": action.title,
593
598
  backgroundType: backgroundType,
594
599
  tabIndex: tabIndex
595
600
  }, typeof action.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ActionIcon, {
@@ -614,7 +619,7 @@ var DxcTextInput = /*#__PURE__*/_react["default"].forwardRef(function (_ref, ref
614
619
  });
615
620
  }), isSearching && /*#__PURE__*/_react["default"].createElement(SuggestionsSystemMessage, null, "Searching..."), isAutosuggestError && /*#__PURE__*/_react["default"].createElement(SuggestionsError, null, /*#__PURE__*/_react["default"].createElement(SuggestionsErrorIcon, {
616
621
  backgroundType: backgroundType
617
- }, textInputIcons.error), "Error fetching data"))), !disabled && /*#__PURE__*/_react["default"].createElement(Error, {
622
+ }, textInputIcons.error), "Error fetching data"))), !disabled && typeof error === "string" && /*#__PURE__*/_react["default"].createElement(Error, {
618
623
  id: errorId,
619
624
  backgroundType: backgroundType
620
625
  }, error)));
@@ -645,7 +650,7 @@ var DxcInput = _styledComponents["default"].div(_templateObject || (_templateObj
645
650
  return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
646
651
  });
647
652
 
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) {
653
+ 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
654
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledLabelFontColorOnDark : props.theme.disabledLabelFontColor : props.backgroundType === "dark" ? props.theme.labelFontColorOnDark : props.theme.labelFontColor;
650
655
  }, function (props) {
651
656
  return props.theme.fontFamily;
@@ -657,13 +662,15 @@ var Label = _styledComponents["default"].label(_templateObject2 || (_templateObj
657
662
  return props.theme.labelFontWeight;
658
663
  }, function (props) {
659
664
  return props.theme.labelLineHeight;
665
+ }, function (props) {
666
+ return !props.helperText && "margin-bottom: 0.25rem";
660
667
  });
661
668
 
662
669
  var OptionalLabel = _styledComponents["default"].span(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n font-weight: ", ";\n"])), function (props) {
663
670
  return props.theme.optionalLabelFontWeight;
664
671
  });
665
672
 
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) {
673
+ 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
674
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledHelperTextFontColorOnDark : props.theme.disabledHelperTextFontColor : props.backgroundType === "dark" ? props.theme.helperTextFontColorOnDark : props.theme.helperTextFontColor;
668
675
  }, function (props) {
669
676
  return props.theme.fontFamily;
@@ -677,9 +684,7 @@ var HelperText = _styledComponents["default"].span(_templateObject4 || (_templat
677
684
  return props.theme.helperTextLineHeight;
678
685
  });
679
686
 
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) {
687
+ 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
688
  if (props.disabled) return props.backgroundType === "dark" ? "background-color: ".concat(props.theme.disabledContainerFillColorOnDark, ";") : "background-color: ".concat(props.theme.disabledContainerFillColor, ";");
684
689
  }, function (props) {
685
690
  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 +696,7 @@ var InputContainer = _styledComponents["default"].div(_templateObject5 || (_temp
691
696
  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
697
  });
693
698
 
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) {
699
+ 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
700
  return props.disabled ? props.backgroundType === "dark" ? props.theme.disabledValueFontColorOnDark : props.theme.disabledValueFontColor : props.backgroundType === "dark" ? props.theme.valueFontColorOnDark : props.theme.valueFontColor;
696
701
  }, function (props) {
697
702
  return props.theme.fontFamily;
@@ -739,7 +744,7 @@ var ErrorIcon = _styledComponents["default"].span(_templateObject11 || (_templat
739
744
  return props.backgroundType === "dark" ? props.theme.errorIconColorOnDark : props.theme.errorIconColor;
740
745
  });
741
746
 
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) {
747
+ 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
748
  return props.backgroundType === "dark" ? props.theme.errorMessageColorOnDark : props.theme.errorMessageColor;
744
749
  }, function (props) {
745
750
  return props.theme.fontFamily;
@@ -761,7 +766,7 @@ var Suggestions = _styledComponents["default"].ul(_templateObject13 || (_templat
761
766
  return props.theme.listOptionFontWeight;
762
767
  });
763
768
 
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) {
769
+ 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
770
  return props.visualFocused ? props.theme.focusListOptionBorderColor : "transparent";
766
771
  }, function (props) {
767
772
  return props.theme.hoverListOptionBackgroundColor;
@@ -769,7 +774,7 @@ var Suggestion = _styledComponents["default"].li(_templateObject14 || (_template
769
774
  return props.theme.activeListOptionBackgroundColor;
770
775
  });
771
776
 
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) {
777
+ 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
778
  return props.last || props.visualFocused ? "border-bottom: 1px solid transparent" : "border-bottom: 1px solid ".concat(props.theme.listOptionDividerColor);
774
779
  });
775
780
 
@@ -785,41 +790,5 @@ var SuggestionsError = _styledComponents["default"].span(_templateObject18 || (_
785
790
  return props.theme.errorListDialogFontColor;
786
791
  });
787
792
 
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
793
  var _default = DxcTextInput;
825
794
  exports["default"] = _default;