@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.
- package/BackgroundColorContext.d.ts +10 -0
- package/BackgroundColorContext.js +1 -4
- package/ThemeContext.d.ts +10 -0
- package/ThemeContext.js +26 -29
- package/accordion/Accordion.d.ts +1 -1
- package/accordion/Accordion.js +11 -22
- package/accordion/Accordion.stories.tsx +307 -0
- package/accordion/Accordion.test.js +57 -0
- package/accordion/types.d.ts +4 -8
- package/accordion-group/AccordionGroup.js +2 -2
- package/accordion-group/AccordionGroup.stories.tsx +225 -0
- package/accordion-group/AccordionGroup.test.js +133 -0
- package/accordion-group/types.d.ts +4 -8
- package/alert/Alert.js +2 -2
- package/alert/Alert.stories.tsx +170 -0
- package/alert/Alert.test.js +92 -0
- package/alert/types.d.ts +1 -1
- package/badge/Badge.d.ts +4 -0
- package/badge/Badge.js +1 -1
- package/badge/types.d.ts +4 -0
- package/badge/types.js +5 -0
- package/bleed/Bleed.d.ts +3 -0
- package/bleed/Bleed.js +84 -0
- package/bleed/Bleed.stories.tsx +342 -0
- package/bleed/types.d.ts +13 -0
- package/bleed/types.js +5 -0
- package/box/Box.d.ts +4 -0
- package/box/Box.js +6 -32
- package/box/{Box.stories.jsx → Box.stories.tsx} +0 -0
- package/box/Box.test.js +18 -0
- package/box/types.d.ts +43 -0
- package/box/types.js +5 -0
- package/button/Button.d.ts +1 -1
- package/button/Button.js +15 -26
- package/button/Button.stories.tsx +223 -242
- package/button/Button.test.js +35 -0
- package/button/types.d.ts +9 -13
- package/card/Card.js +5 -6
- package/card/Card.stories.tsx +201 -0
- package/card/Card.test.js +50 -0
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +4 -6
- package/checkbox/Checkbox.js +2 -2
- package/checkbox/Checkbox.test.js +65 -0
- package/checkbox/types.d.ts +2 -2
- package/chip/Chip.d.ts +4 -0
- package/chip/Chip.js +16 -76
- package/chip/Chip.stories.tsx +119 -0
- package/chip/Chip.test.js +56 -0
- package/chip/types.d.ts +45 -0
- package/chip/types.js +5 -0
- package/common/variables.js +85 -281
- package/date-input/DateInput.js +10 -13
- package/date-input/DateInput.stories.tsx +138 -0
- package/date-input/DateInput.test.js +469 -0
- package/dialog/Dialog.js +4 -3
- package/dialog/Dialog.stories.tsx +212 -0
- package/dialog/Dialog.test.js +40 -0
- package/dropdown/Dropdown.d.ts +1 -1
- package/dropdown/Dropdown.js +13 -35
- package/dropdown/Dropdown.stories.tsx +249 -0
- package/dropdown/Dropdown.test.js +189 -0
- package/dropdown/types.d.ts +6 -15
- package/file-input/FileInput.d.ts +4 -0
- package/file-input/FileInput.js +167 -109
- package/file-input/FileInput.stories.tsx +507 -0
- package/file-input/FileInput.test.js +457 -0
- package/file-input/FileItem.d.ts +14 -0
- package/file-input/FileItem.js +12 -21
- package/file-input/types.d.ts +112 -0
- package/file-input/types.js +5 -0
- package/footer/Footer.d.ts +1 -1
- package/footer/Footer.js +28 -36
- package/footer/{Footer.stories.jsx → Footer.stories.tsx} +1 -22
- package/footer/Footer.test.js +109 -0
- package/footer/Icons.d.ts +2 -0
- package/footer/Icons.js +3 -3
- package/footer/types.d.ts +22 -18
- package/header/Header.js +2 -2
- package/header/Header.stories.tsx +162 -0
- package/header/Header.test.js +63 -0
- package/header/Icons.d.ts +2 -0
- package/header/types.d.ts +4 -2
- package/heading/Heading.d.ts +4 -0
- package/heading/Heading.js +7 -24
- package/heading/Heading.stories.tsx +54 -0
- package/heading/Heading.test.js +186 -0
- package/heading/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/inset/Inset.d.ts +3 -0
- package/inset/Inset.js +84 -0
- package/inset/Inset.stories.tsx +229 -0
- package/inset/types.d.ts +13 -0
- package/inset/types.js +5 -0
- package/layout/ApplicationLayout.d.ts +10 -0
- package/layout/ApplicationLayout.js +17 -21
- package/layout/ApplicationLayout.stories.tsx +171 -0
- package/layout/types.d.ts +57 -0
- package/layout/types.js +5 -0
- package/link/Link.d.ts +3 -0
- package/link/Link.js +10 -40
- package/link/Link.stories.tsx +151 -0
- package/link/Link.test.js +91 -0
- package/link/types.d.ts +70 -0
- package/link/types.js +5 -0
- package/list/List.d.ts +4 -0
- package/list/List.js +47 -0
- package/list/List.stories.tsx +95 -0
- package/list/types.d.ts +7 -0
- package/list/types.js +5 -0
- package/main.d.ts +10 -8
- package/main.js +54 -38
- package/number-input/NumberInput.d.ts +4 -0
- package/number-input/NumberInput.js +5 -50
- package/number-input/{NumberInput.stories.jsx → NumberInput.stories.tsx} +0 -0
- package/number-input/NumberInput.test.js +508 -0
- package/number-input/NumberInputContext.d.ts +4 -0
- package/number-input/NumberInputContext.js +5 -2
- package/number-input/numberInputContextTypes.d.ts +19 -0
- package/number-input/numberInputContextTypes.js +5 -0
- package/number-input/types.d.ts +117 -0
- package/number-input/types.js +5 -0
- package/package.json +4 -2
- package/paginator/Paginator.js +2 -8
- package/paginator/Paginator.test.js +266 -0
- package/password-input/PasswordInput.d.ts +4 -0
- package/password-input/PasswordInput.js +19 -55
- package/password-input/{PasswordInput.stories.jsx → PasswordInput.stories.tsx} +4 -4
- package/password-input/PasswordInput.test.js +183 -0
- package/password-input/types.d.ts +107 -0
- package/password-input/types.js +5 -0
- package/progress-bar/ProgressBar.js +4 -4
- package/progress-bar/ProgressBar.stories.jsx +58 -0
- package/progress-bar/ProgressBar.test.js +65 -0
- package/radio/Radio.js +2 -2
- package/radio/Radio.test.js +71 -0
- package/radio/types.d.ts +2 -2
- package/radio-group/Radio.d.ts +4 -0
- package/radio-group/Radio.js +141 -0
- package/radio-group/RadioGroup.d.ts +4 -0
- package/radio-group/RadioGroup.js +279 -0
- package/radio-group/RadioGroup.stories.tsx +96 -0
- package/radio-group/RadioGroup.test.js +694 -0
- package/radio-group/types.d.ts +37 -0
- package/radio-group/types.js +5 -0
- package/resultsetTable/ResultsetTable.d.ts +4 -0
- package/resultsetTable/ResultsetTable.js +9 -29
- package/resultsetTable/ResultsetTable.stories.tsx +275 -0
- package/resultsetTable/ResultsetTable.test.js +306 -0
- package/resultsetTable/types.d.ts +67 -0
- package/resultsetTable/types.js +5 -0
- package/row/Row.d.ts +3 -0
- package/row/Row.js +127 -0
- package/row/Row.stories.tsx +237 -0
- package/row/types.d.ts +10 -0
- package/row/types.js +5 -0
- package/select/Select.d.ts +4 -0
- package/select/Select.js +26 -22
- package/select/Select.stories.tsx +582 -0
- package/select/Select.test.js +1900 -0
- package/select/types.d.ts +170 -0
- package/select/types.js +5 -0
- package/sidenav/Sidenav.d.ts +9 -0
- package/sidenav/Sidenav.js +6 -15
- package/sidenav/Sidenav.stories.tsx +182 -0
- package/sidenav/Sidenav.test.js +56 -0
- package/sidenav/types.d.ts +50 -0
- package/sidenav/types.js +5 -0
- package/slider/Slider.d.ts +1 -1
- package/slider/Slider.js +43 -32
- package/slider/Slider.stories.tsx +177 -0
- package/slider/Slider.test.js +129 -0
- package/slider/types.d.ts +2 -7
- package/spinner/Spinner.d.ts +4 -0
- package/spinner/Spinner.js +2 -19
- package/spinner/Spinner.stories.jsx +1 -0
- package/spinner/Spinner.test.js +64 -0
- package/spinner/types.d.ts +32 -0
- package/spinner/types.js +5 -0
- package/stack/Stack.d.ts +3 -0
- package/stack/Stack.js +97 -0
- package/stack/Stack.stories.tsx +164 -0
- package/stack/types.d.ts +9 -0
- package/stack/types.js +5 -0
- package/switch/Switch.js +4 -4
- package/switch/Switch.stories.tsx +160 -0
- package/switch/Switch.test.js +73 -0
- package/table/Table.d.ts +4 -0
- package/table/Table.js +3 -3
- package/table/Table.stories.jsx +2 -1
- package/table/Table.test.js +26 -0
- package/table/types.d.ts +21 -0
- package/table/types.js +5 -0
- package/tabs/Tabs.js +11 -9
- package/tabs/Tabs.stories.tsx +120 -0
- package/tabs/Tabs.test.js +123 -0
- package/tabs/types.d.ts +25 -18
- package/tag/Tag.d.ts +4 -0
- package/tag/Tag.js +26 -46
- package/tag/Tag.stories.tsx +138 -0
- package/tag/Tag.test.js +60 -0
- package/tag/types.d.ts +69 -0
- package/tag/types.js +5 -0
- package/text/Text.d.ts +7 -0
- package/text/Text.js +30 -0
- package/text/Text.stories.tsx +19 -0
- package/text-input/TextInput.d.ts +4 -0
- package/text-input/TextInput.js +59 -88
- package/text-input/TextInput.stories.tsx +474 -0
- package/text-input/TextInput.test.js +1691 -0
- package/text-input/types.d.ts +159 -0
- package/text-input/types.js +5 -0
- package/textarea/Textarea.d.ts +4 -0
- package/textarea/Textarea.js +32 -63
- package/textarea/Textarea.stories.jsx +34 -12
- package/textarea/Textarea.test.js +436 -0
- package/textarea/types.d.ts +130 -0
- package/textarea/types.js +5 -0
- package/toggle-group/ToggleGroup.d.ts +4 -0
- package/toggle-group/ToggleGroup.js +16 -45
- package/toggle-group/ToggleGroup.stories.tsx +173 -0
- package/toggle-group/ToggleGroup.test.js +125 -0
- package/toggle-group/types.d.ts +97 -0
- package/toggle-group/types.js +5 -0
- package/useTheme.d.ts +2 -0
- package/useTheme.js +1 -1
- package/wizard/Wizard.d.ts +4 -0
- package/wizard/Wizard.js +69 -59
- package/wizard/Wizard.stories.tsx +224 -0
- package/wizard/Wizard.test.js +128 -0
- package/wizard/types.d.ts +60 -0
- package/wizard/types.js +5 -0
- package/V3Select/V3Select.js +0 -455
- package/V3Select/index.d.ts +0 -27
- package/V3Textarea/V3Textarea.js +0 -260
- package/V3Textarea/index.d.ts +0 -27
- package/box/index.d.ts +0 -25
- package/chip/index.d.ts +0 -22
- package/date/Date.js +0 -373
- package/date/index.d.ts +0 -27
- package/file-input/index.d.ts +0 -81
- package/heading/index.d.ts +0 -17
- package/input-text/Icons.js +0 -22
- package/input-text/InputText.js +0 -611
- package/input-text/index.d.ts +0 -36
- package/link/index.d.ts +0 -23
- package/number-input/index.d.ts +0 -113
- package/password-input/index.d.ts +0 -94
- package/resultsetTable/index.d.ts +0 -19
- package/select/index.d.ts +0 -131
- package/sidenav/index.d.ts +0 -13
- package/spinner/index.d.ts +0 -17
- package/table/index.d.ts +0 -13
- package/tag/index.d.ts +0 -24
- package/text-input/index.d.ts +0 -135
- package/textarea/index.d.ts +0 -117
- package/toggle/Toggle.js +0 -186
- package/toggle/index.d.ts +0 -21
- package/toggle-group/index.d.ts +0 -21
- package/upload/Upload.js +0 -201
- package/upload/buttons-upload/ButtonsUpload.js +0 -111
- package/upload/buttons-upload/Icons.js +0 -40
- package/upload/dragAndDropArea/DragAndDropArea.js +0 -225
- package/upload/dragAndDropArea/Icons.js +0 -39
- package/upload/file-upload/FileToUpload.js +0 -115
- package/upload/file-upload/Icons.js +0 -66
- package/upload/files-upload/FilesToUpload.js +0 -109
- package/upload/index.d.ts +0 -15
- package/upload/transaction/Icons.js +0 -160
- package/upload/transaction/Transaction.js +0 -104
- package/upload/transactions/Transactions.js +0 -94
- package/wizard/Icons.js +0 -65
- package/wizard/index.d.ts +0 -18
package/text-input/TextInput.js
CHANGED
|
@@ -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
|
|
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
|
|
30
|
+
var _BackgroundColorContext = _interopRequireDefault(require("../BackgroundColorContext"));
|
|
35
31
|
|
|
36
|
-
var _NumberInputContext = _interopRequireDefault(require("../number-input/NumberInputContext
|
|
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
|
|
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
|
-
|
|
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
|
-
|
|
168
|
-
error = _ref$error === void 0 ? "" : _ref$error,
|
|
155
|
+
error = _ref.error,
|
|
169
156
|
suggestions = _ref.suggestions,
|
|
170
157
|
pattern = _ref.pattern,
|
|
171
|
-
|
|
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-
|
|
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 &&
|
|
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(
|
|
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(
|
|
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
|
-
|
|
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:
|
|
543
|
-
maxLength:
|
|
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-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
591
|
+
onClick: function onClick() {
|
|
592
|
+
return action.onClick();
|
|
593
|
+
},
|
|
589
594
|
onMouseDown: function onMouseDown(event) {
|
|
590
595
|
event.stopPropagation();
|
|
591
596
|
},
|
|
592
|
-
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
|
|
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
|
|
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;
|