@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.
- package/BackgroundColorContext.d.ts +10 -0
- package/BackgroundColorContext.js +1 -4
- package/ThemeContext.d.ts +15 -0
- package/ThemeContext.js +5 -8
- package/V3Select/V3Select.js +2 -2
- package/V3Textarea/V3Textarea.js +2 -2
- package/accordion/Accordion.js +2 -2
- package/accordion/Accordion.stories.tsx +307 -0
- package/accordion/types.d.ts +1 -1
- package/accordion-group/AccordionGroup.js +2 -2
- package/accordion-group/AccordionGroup.stories.tsx +225 -0
- package/accordion-group/types.d.ts +1 -1
- package/alert/Alert.js +2 -2
- package/alert/Alert.stories.tsx +170 -0
- package/alert/types.d.ts +1 -1
- package/badge/Badge.js +1 -1
- 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 +1 -1
- package/box/Box.js +4 -7
- package/box/types.d.ts +0 -4
- package/button/Button.d.ts +1 -1
- package/button/Button.js +13 -19
- package/button/Button.stories.tsx +222 -241
- package/button/types.d.ts +5 -9
- package/card/Card.js +5 -6
- package/card/Card.stories.tsx +201 -0
- package/card/ice-cream.jpg +0 -0
- package/card/types.d.ts +4 -6
- package/checkbox/Checkbox.js +2 -2
- package/checkbox/types.d.ts +2 -2
- package/chip/Chip.d.ts +4 -0
- package/chip/Chip.js +5 -27
- package/chip/Chip.stories.tsx +121 -0
- package/chip/types.d.ts +53 -0
- package/chip/types.js +5 -0
- package/common/variables.js +70 -27
- package/date/Date.js +1 -1
- package/date-input/DateInput.js +10 -13
- package/date-input/DateInput.stories.tsx +138 -0
- package/dialog/Dialog.js +4 -3
- package/dialog/Dialog.stories.tsx +212 -0
- package/dropdown/Dropdown.js +1 -1
- package/dropdown/Dropdown.stories.tsx +247 -0
- package/dropdown/types.d.ts +1 -1
- 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/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/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/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/types.d.ts +33 -0
- package/heading/types.js +5 -0
- package/input-text/InputText.js +2 -2
- 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 +9 -19
- package/layout/ApplicationLayout.stories.tsx +171 -0
- package/layout/types.d.ts +57 -0
- package/layout/types.js +5 -0
- package/link/Link.js +3 -3
- package/link/Link.stories.tsx +146 -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 +7 -3
- package/main.js +34 -2
- 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/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/password-input/PasswordInput.js +19 -18
- package/password-input/PasswordInput.stories.tsx +3 -3
- package/password-input/types.d.ts +17 -10
- package/progress-bar/ProgressBar.js +4 -4
- package/radio/Radio.js +2 -2
- package/radio/types.d.ts +2 -2
- package/radio-group/Radio.d.ts +4 -0
- package/radio-group/Radio.js +140 -0
- package/radio-group/RadioGroup.d.ts +4 -0
- package/radio-group/RadioGroup.js +273 -0
- package/radio-group/RadioGroup.stories.tsx +79 -0
- package/radio-group/RadioGroup.test.js +248 -0
- package/radio-group/types.d.ts +36 -0
- package/radio-group/types.js +5 -0
- package/resultsetTable/ResultsetTable.d.ts +4 -0
- package/resultsetTable/ResultsetTable.js +5 -28
- package/resultsetTable/ResultsetTable.stories.tsx +275 -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 +20 -22
- package/select/Select.stories.tsx +572 -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/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/types.d.ts +2 -7
- package/spinner/Spinner.js +2 -2
- package/spinner/Spinner.stories.jsx +1 -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 +2 -2
- package/switch/Switch.stories.tsx +1 -1
- package/table/Table.js +3 -3
- package/table/Table.stories.jsx +2 -1
- package/tabs/Tabs.js +11 -9
- package/tabs/Tabs.stories.tsx +120 -0
- package/tabs/types.d.ts +25 -18
- package/tag/Tag.d.ts +4 -0
- package/tag/Tag.js +4 -25
- package/tag/{Tag.stories.jsx → Tag.stories.tsx} +1 -1
- package/tag/types.d.ts +60 -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 +54 -85
- package/text-input/TextInput.stories.tsx +456 -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 +27 -60
- package/textarea/Textarea.stories.jsx +4 -3
- package/textarea/types.d.ts +130 -0
- package/textarea/types.js +5 -0
- package/toggle/Toggle.js +1 -1
- 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/types.d.ts +97 -0
- package/toggle-group/types.js +5 -0
- package/upload/buttons-upload/ButtonsUpload.js +2 -2
- package/upload/dragAndDropArea/DragAndDropArea.js +2 -2
- package/upload/file-upload/FileToUpload.js +1 -1
- package/upload/files-upload/FilesToUpload.js +1 -1
- package/upload/transaction/Transaction.js +2 -2
- package/upload/transactions/Transactions.js +1 -1
- 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/types.d.ts +60 -0
- package/wizard/types.js +5 -0
- package/chip/index.d.ts +0 -22
- package/file-input/index.d.ts +0 -81
- package/heading/index.d.ts +0 -17
- package/number-input/index.d.ts +0 -113
- package/resultsetTable/index.d.ts +0 -19
- package/select/index.d.ts +0 -131
- package/sidenav/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-group/index.d.ts +0 -21
- 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,
|
|
@@ -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,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:
|
|
543
|
-
maxLength:
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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:
|
|
590
|
+
onClick: function onClick() {
|
|
591
|
+
return action.onClick();
|
|
592
|
+
},
|
|
589
593
|
onMouseDown: function onMouseDown(event) {
|
|
590
594
|
event.stopPropagation();
|
|
591
595
|
},
|
|
592
|
-
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
|
|
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
|
|
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;
|