@entur/form 5.4.11 → 5.4.13
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/CHANGELOG.md +828 -0
- package/dist/form.cjs.development.js +274 -196
- package/dist/form.cjs.development.js.map +1 -1
- package/dist/form.cjs.production.min.js.map +1 -1
- package/dist/form.esm.js +274 -196
- package/dist/form.esm.js.map +1 -1
- package/dist/styles.css +251 -231
- package/package.json +11 -18
|
@@ -38,59 +38,73 @@ function _extends() {
|
|
|
38
38
|
_extends = Object.assign || function (target) {
|
|
39
39
|
for (var i = 1; i < arguments.length; i++) {
|
|
40
40
|
var source = arguments[i];
|
|
41
|
+
|
|
41
42
|
for (var key in source) {
|
|
42
43
|
if (Object.prototype.hasOwnProperty.call(source, key)) {
|
|
43
44
|
target[key] = source[key];
|
|
44
45
|
}
|
|
45
46
|
}
|
|
46
47
|
}
|
|
48
|
+
|
|
47
49
|
return target;
|
|
48
50
|
};
|
|
51
|
+
|
|
49
52
|
return _extends.apply(this, arguments);
|
|
50
53
|
}
|
|
54
|
+
|
|
51
55
|
function _objectWithoutPropertiesLoose(source, excluded) {
|
|
52
56
|
if (source == null) return {};
|
|
53
57
|
var target = {};
|
|
54
58
|
var sourceKeys = Object.keys(source);
|
|
55
59
|
var key, i;
|
|
60
|
+
|
|
56
61
|
for (i = 0; i < sourceKeys.length; i++) {
|
|
57
62
|
key = sourceKeys[i];
|
|
58
63
|
if (excluded.indexOf(key) >= 0) continue;
|
|
59
64
|
target[key] = source[key];
|
|
60
65
|
}
|
|
66
|
+
|
|
61
67
|
return target;
|
|
62
68
|
}
|
|
63
69
|
|
|
64
70
|
var _excluded$f = ["children", "hideIcon", "variant", "className"];
|
|
71
|
+
|
|
65
72
|
var AlertIcon = function AlertIcon(_ref) {
|
|
66
73
|
var variant = _ref.variant;
|
|
67
74
|
var iconClass = "eds-feedback-text__icon eds-feedback-text__icon--" + variant;
|
|
75
|
+
|
|
68
76
|
switch (variant) {
|
|
69
77
|
case 'success':
|
|
70
78
|
return React__default["default"].createElement(icons.ValidationCheckIcon, {
|
|
71
79
|
className: iconClass
|
|
72
80
|
});
|
|
81
|
+
|
|
73
82
|
case 'error':
|
|
74
83
|
return React__default["default"].createElement(icons.ValidationErrorIcon, {
|
|
75
84
|
className: iconClass
|
|
76
85
|
});
|
|
86
|
+
|
|
77
87
|
case 'info':
|
|
78
88
|
return null;
|
|
89
|
+
|
|
79
90
|
case 'warning':
|
|
80
91
|
return React__default["default"].createElement(icons.ValidationExclamationIcon, {
|
|
81
92
|
className: iconClass
|
|
82
93
|
});
|
|
94
|
+
|
|
83
95
|
default:
|
|
84
96
|
return null;
|
|
85
97
|
}
|
|
86
98
|
};
|
|
99
|
+
|
|
87
100
|
var FeedbackText = function FeedbackText(_ref2) {
|
|
88
101
|
var children = _ref2.children,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
102
|
+
_ref2$hideIcon = _ref2.hideIcon,
|
|
103
|
+
hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
|
|
104
|
+
variant = _ref2.variant,
|
|
105
|
+
className = _ref2.className,
|
|
106
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
|
|
107
|
+
|
|
94
108
|
return React__default["default"].createElement(typography.SubLabel, _extends({
|
|
95
109
|
className: classNames__default["default"]('eds-feedback-text', {
|
|
96
110
|
'eds-feedback-text--info': variant === 'info'
|
|
@@ -110,9 +124,11 @@ var InputGroupContext = /*#__PURE__*/React__namespace.createContext({
|
|
|
110
124
|
});
|
|
111
125
|
var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
|
|
112
126
|
var children = _ref.children;
|
|
127
|
+
|
|
113
128
|
var _React$useState = React__namespace.useState(false),
|
|
114
|
-
|
|
115
|
-
|
|
129
|
+
filled = _React$useState[0],
|
|
130
|
+
setFilled = _React$useState[1];
|
|
131
|
+
|
|
116
132
|
return React__namespace.createElement(InputGroupContext.Provider, {
|
|
117
133
|
value: {
|
|
118
134
|
isFilled: filled,
|
|
@@ -127,13 +143,15 @@ var useInputGroupContext = function useInputGroupContext() {
|
|
|
127
143
|
var _excluded$e = ["label", "required", "labelId", "staticAnimation"];
|
|
128
144
|
var InputGroupLabel = function InputGroupLabel(_ref) {
|
|
129
145
|
var label = _ref.label,
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
146
|
+
required = _ref.required,
|
|
147
|
+
labelId = _ref.labelId,
|
|
148
|
+
_ref$staticAnimation = _ref.staticAnimation,
|
|
149
|
+
staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
|
|
150
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
151
|
+
|
|
135
152
|
var _useInputGroupContext = useInputGroupContext(),
|
|
136
|
-
|
|
153
|
+
isFilled = _useInputGroupContext.isFilled;
|
|
154
|
+
|
|
137
155
|
var filler = staticAnimation || isFilled;
|
|
138
156
|
return React__default["default"].createElement("label", _extends({
|
|
139
157
|
className: classNames__default["default"](rest.className, {
|
|
@@ -150,8 +168,8 @@ var InputGroupLabel = function InputGroupLabel(_ref) {
|
|
|
150
168
|
var VariantContext = /*#__PURE__*/React__default["default"].createContext(null);
|
|
151
169
|
var VariantProvider = function VariantProvider(_ref) {
|
|
152
170
|
var children = _ref.children,
|
|
153
|
-
|
|
154
|
-
|
|
171
|
+
_ref$variant = _ref.variant,
|
|
172
|
+
variant = _ref$variant === void 0 ? null : _ref$variant;
|
|
155
173
|
return React__default["default"].createElement(VariantContext.Provider, {
|
|
156
174
|
value: variant
|
|
157
175
|
}, children);
|
|
@@ -164,31 +182,32 @@ var useVariant = function useVariant() {
|
|
|
164
182
|
var _excluded$d = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback"];
|
|
165
183
|
var BaseFormControl = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
166
184
|
var children = _ref.children,
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
185
|
+
className = _ref.className,
|
|
186
|
+
_ref$dark = _ref.dark,
|
|
187
|
+
dark = _ref$dark === void 0 ? false : _ref$dark,
|
|
188
|
+
_ref$disabled = _ref.disabled,
|
|
189
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
190
|
+
_ref$readOnly = _ref.readOnly,
|
|
191
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
192
|
+
variant = _ref.variant,
|
|
193
|
+
prepend = _ref.prepend,
|
|
194
|
+
append = _ref.append,
|
|
195
|
+
_ref$size = _ref.size,
|
|
196
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
197
|
+
isFilled = _ref.isFilled,
|
|
198
|
+
label = _ref.label,
|
|
199
|
+
required = _ref.required,
|
|
200
|
+
labelTooltip = _ref.labelTooltip,
|
|
201
|
+
feedback = _ref.feedback,
|
|
202
|
+
labelId = _ref.labelId,
|
|
203
|
+
labelProps = _ref.labelProps,
|
|
204
|
+
style = _ref.style,
|
|
205
|
+
_ref$disableLabelAnim = _ref.disableLabelAnimation,
|
|
206
|
+
disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
|
|
207
|
+
_ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
|
|
208
|
+
ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
|
|
209
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
210
|
+
|
|
192
211
|
var contextVariant = useVariant();
|
|
193
212
|
var currentVariant = variant || contextVariant;
|
|
194
213
|
return React__default["default"].createElement(InputGroupContextProvider, null, React__default["default"].createElement("div", _extends({
|
|
@@ -227,17 +246,18 @@ var BaseFormControl = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
227
246
|
var _excluded$c = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
|
|
228
247
|
var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
229
248
|
var checked = _ref.checked,
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
249
|
+
className = _ref.className,
|
|
250
|
+
children = _ref.children,
|
|
251
|
+
style = _ref.style,
|
|
252
|
+
_ref$disabled = _ref.disabled,
|
|
253
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
254
|
+
reduceClickArea = _ref.reduceClickArea,
|
|
255
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
256
|
+
|
|
237
257
|
// Trick to allow using a ref locally, while still allowing for ref forwarding
|
|
238
258
|
// Read more at https://reactjs.org/docs/hooks-reference.html#useimperativehandle
|
|
239
|
-
var innerRef = React__default["default"].useRef(null);
|
|
240
|
-
|
|
259
|
+
var innerRef = React__default["default"].useRef(null); //eslint-disable-next-line
|
|
260
|
+
|
|
241
261
|
React__default["default"].useImperativeHandle(ref, function () {
|
|
242
262
|
return innerRef.current;
|
|
243
263
|
});
|
|
@@ -272,9 +292,10 @@ var Checkbox = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
|
272
292
|
as: "span"
|
|
273
293
|
}, children));
|
|
274
294
|
});
|
|
295
|
+
|
|
275
296
|
var CheckboxIcon = function CheckboxIcon(_ref2) {
|
|
276
297
|
var _ref2$indeterminate = _ref2.indeterminate,
|
|
277
|
-
|
|
298
|
+
indeterminate = _ref2$indeterminate === void 0 ? false : _ref2$indeterminate;
|
|
278
299
|
return React__default["default"].createElement("svg", {
|
|
279
300
|
className: "eds-checkbox-icon",
|
|
280
301
|
width: "11px",
|
|
@@ -296,9 +317,10 @@ var CheckboxIcon = function CheckboxIcon(_ref2) {
|
|
|
296
317
|
var _excluded$b = ["children", "className", "label"];
|
|
297
318
|
var Fieldset = function Fieldset(_ref) {
|
|
298
319
|
var children = _ref.children,
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
320
|
+
className = _ref.className,
|
|
321
|
+
label = _ref.label,
|
|
322
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
323
|
+
|
|
302
324
|
return React__default["default"].createElement("fieldset", _extends({
|
|
303
325
|
className: classNames__default["default"]('eds-fieldset', className)
|
|
304
326
|
}, rest), label && React__default["default"].createElement(typography.Label, {
|
|
@@ -311,26 +333,31 @@ var RadioGroupContext = /*#__PURE__*/React__default["default"].createContext(nul
|
|
|
311
333
|
var RadioGroupContextProvider = RadioGroupContext.Provider;
|
|
312
334
|
var useRadioGroupContext = function useRadioGroupContext() {
|
|
313
335
|
var context = React__default["default"].useContext(RadioGroupContext);
|
|
336
|
+
|
|
314
337
|
if (!context) {
|
|
315
338
|
throw new Error('You need to wrap your RadioButtons in a RadioGroup component');
|
|
316
339
|
}
|
|
340
|
+
|
|
317
341
|
return context;
|
|
318
342
|
};
|
|
319
343
|
|
|
320
344
|
var _excluded$a = ["className", "children", "value", "disabled"];
|
|
321
345
|
var Radio = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
322
346
|
var className = _ref.className,
|
|
323
|
-
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
|
|
347
|
+
children = _ref.children,
|
|
348
|
+
value = _ref.value,
|
|
349
|
+
disabled = _ref.disabled,
|
|
350
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
351
|
+
|
|
327
352
|
var classList = classNames__default["default"](className, 'eds-form-component--radio__radio', {
|
|
328
353
|
'eds-form-component--radio__radio--disabled': disabled
|
|
329
354
|
});
|
|
355
|
+
|
|
330
356
|
var _useRadioGroupContext = useRadioGroupContext(),
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
357
|
+
name = _useRadioGroupContext.name,
|
|
358
|
+
selectedValue = _useRadioGroupContext.value,
|
|
359
|
+
onChange = _useRadioGroupContext.onChange;
|
|
360
|
+
|
|
334
361
|
return React__default["default"].createElement("label", {
|
|
335
362
|
className: "eds-form-component--radio__container"
|
|
336
363
|
}, React__default["default"].createElement("input", _extends({
|
|
@@ -355,11 +382,12 @@ var Radio = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, re
|
|
|
355
382
|
var _excluded$9 = ["name", "value", "children", "onChange", "label"];
|
|
356
383
|
var RadioGroup = function RadioGroup(_ref) {
|
|
357
384
|
var name = _ref.name,
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
385
|
+
value = _ref.value,
|
|
386
|
+
children = _ref.children,
|
|
387
|
+
onChange = _ref.onChange,
|
|
388
|
+
label = _ref.label,
|
|
389
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
390
|
+
|
|
363
391
|
var contextValue = React__default["default"].useMemo(function () {
|
|
364
392
|
return {
|
|
365
393
|
name: name,
|
|
@@ -377,26 +405,29 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
377
405
|
var _excluded$8 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
|
|
378
406
|
var RadioPanel = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
379
407
|
var className = _ref.className,
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
408
|
+
children = _ref.children,
|
|
409
|
+
value = _ref.value,
|
|
410
|
+
title = _ref.title,
|
|
411
|
+
secondaryLabel = _ref.secondaryLabel,
|
|
412
|
+
_ref$size = _ref.size,
|
|
413
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
414
|
+
_ref$hideCheckbox = _ref.hideCheckbox,
|
|
415
|
+
hideCheckbox = _ref$hideCheckbox === void 0 ? false : _ref$hideCheckbox,
|
|
416
|
+
style = _ref.style,
|
|
417
|
+
id = _ref.id,
|
|
418
|
+
_ref$disabled = _ref.disabled,
|
|
419
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
420
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
421
|
+
|
|
393
422
|
var classList = classNames__default["default"](className, 'eds-radio-panel__container', "eds-radio-panel--" + size, {
|
|
394
423
|
'eds-radio-panel--disabled': disabled
|
|
395
424
|
});
|
|
425
|
+
|
|
396
426
|
var _useRadioGroupContext = useRadioGroupContext(),
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
427
|
+
name = _useRadioGroupContext.name,
|
|
428
|
+
selectedValue = _useRadioGroupContext.value,
|
|
429
|
+
onChange = _useRadioGroupContext.onChange;
|
|
430
|
+
|
|
400
431
|
var randomId = utils.useRandomId('eds-radiopanel');
|
|
401
432
|
var radioPanelId = id || randomId;
|
|
402
433
|
return React__default["default"].createElement("label", {
|
|
@@ -426,6 +457,7 @@ var RadioPanel = /*#__PURE__*/React__default["default"].forwardRef(function (_re
|
|
|
426
457
|
className: "eds-radio-panel__additional-content"
|
|
427
458
|
}, children)));
|
|
428
459
|
});
|
|
460
|
+
|
|
429
461
|
var RadioPanelCheck = function RadioPanelCheck() {
|
|
430
462
|
return React__default["default"].createElement("svg", {
|
|
431
463
|
className: "eds-checkbox-icon",
|
|
@@ -442,23 +474,26 @@ var RadioPanelCheck = function RadioPanelCheck() {
|
|
|
442
474
|
var _excluded$7 = ["className", "children", "labelPlacement", "icon", "hideIcon", "color", "contrastColor", "size"];
|
|
443
475
|
var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
444
476
|
var className = _ref.className,
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
477
|
+
children = _ref.children,
|
|
478
|
+
_ref$labelPlacement = _ref.labelPlacement,
|
|
479
|
+
labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
|
|
480
|
+
icon = _ref.icon,
|
|
481
|
+
_ref$hideIcon = _ref.hideIcon,
|
|
482
|
+
hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
|
|
483
|
+
_ref$color = _ref.color,
|
|
484
|
+
color = _ref$color === void 0 ? tokens.colors.validation.mintContrast : _ref$color,
|
|
485
|
+
contrastColor = _ref.contrastColor,
|
|
486
|
+
_ref$size = _ref.size,
|
|
487
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
488
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
489
|
+
|
|
457
490
|
var chosenContrastColor = contrastColor && contrastColor || color;
|
|
491
|
+
|
|
458
492
|
var displayedIcon = function displayedIcon() {
|
|
459
493
|
if (icon) return icon;
|
|
460
494
|
return rest.checked ? React__default["default"].createElement(icons.CheckIcon, null) : React__default["default"].createElement(icons.CloseSmallIcon, null);
|
|
461
495
|
};
|
|
496
|
+
|
|
462
497
|
return React__default["default"].createElement("label", {
|
|
463
498
|
className: classNames__default["default"]('eds-switch', "eds-switch--" + labelPlacement, className),
|
|
464
499
|
style: _extends({}, rest.style)
|
|
@@ -481,16 +516,18 @@ var Switch = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, r
|
|
|
481
516
|
var _excluded$6 = ["className", "children", "labelPlacement", "transport", "size"];
|
|
482
517
|
var TravelSwitch = function TravelSwitch(_ref) {
|
|
483
518
|
var className = _ref.className,
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
|
|
489
|
-
|
|
519
|
+
children = _ref.children,
|
|
520
|
+
_ref$labelPlacement = _ref.labelPlacement,
|
|
521
|
+
labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
|
|
522
|
+
transport = _ref.transport,
|
|
523
|
+
size = _ref.size,
|
|
524
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
525
|
+
|
|
490
526
|
var _modeCalc = modeCalc(transport),
|
|
491
|
-
|
|
492
|
-
|
|
493
|
-
|
|
527
|
+
color = _modeCalc.color,
|
|
528
|
+
contrast = _modeCalc.contrast,
|
|
529
|
+
Icon = _modeCalc.Icon;
|
|
530
|
+
|
|
494
531
|
return React__default["default"].createElement(Switch, _extends({
|
|
495
532
|
className: className,
|
|
496
533
|
labelPlacement: labelPlacement,
|
|
@@ -500,6 +537,7 @@ var TravelSwitch = function TravelSwitch(_ref) {
|
|
|
500
537
|
size: size
|
|
501
538
|
}, rest), children);
|
|
502
539
|
};
|
|
540
|
+
|
|
503
541
|
function modeCalc(mode) {
|
|
504
542
|
switch (mode) {
|
|
505
543
|
case 'bus':
|
|
@@ -508,60 +546,70 @@ function modeCalc(mode) {
|
|
|
508
546
|
color: tokens.colors.transport["default"].bus,
|
|
509
547
|
contrast: tokens.colors.transport.contrast.bus
|
|
510
548
|
};
|
|
549
|
+
|
|
511
550
|
case 'metro':
|
|
512
551
|
return {
|
|
513
552
|
Icon: icons.SubwayIcon,
|
|
514
553
|
color: tokens.colors.transport["default"].metro,
|
|
515
554
|
contrast: tokens.colors.transport.contrast.metro
|
|
516
555
|
};
|
|
556
|
+
|
|
517
557
|
case 'air':
|
|
518
558
|
return {
|
|
519
559
|
Icon: icons.PlaneIcon,
|
|
520
560
|
color: tokens.colors.transport["default"].plane,
|
|
521
561
|
contrast: tokens.colors.transport.contrast.plane
|
|
522
562
|
};
|
|
563
|
+
|
|
523
564
|
case 'tram':
|
|
524
565
|
return {
|
|
525
566
|
Icon: icons.TramIcon,
|
|
526
567
|
color: tokens.colors.transport["default"].tram,
|
|
527
568
|
contrast: tokens.colors.transport.contrast.tram
|
|
528
569
|
};
|
|
570
|
+
|
|
529
571
|
case 'rail':
|
|
530
572
|
return {
|
|
531
573
|
Icon: icons.TrainIcon,
|
|
532
574
|
color: tokens.colors.transport["default"].train,
|
|
533
575
|
contrast: tokens.colors.transport.contrast.train
|
|
534
576
|
};
|
|
577
|
+
|
|
535
578
|
case 'water':
|
|
536
579
|
return {
|
|
537
580
|
Icon: icons.FerryIcon,
|
|
538
581
|
color: tokens.colors.transport["default"].ferry,
|
|
539
582
|
contrast: tokens.colors.transport.contrast.ferry
|
|
540
583
|
};
|
|
584
|
+
|
|
541
585
|
case 'bike':
|
|
542
586
|
return {
|
|
543
587
|
Icon: icons.BicycleIcon,
|
|
544
588
|
color: tokens.colors.transport["default"].mobility,
|
|
545
589
|
contrast: tokens.colors.transport.contrast.mobility
|
|
546
590
|
};
|
|
591
|
+
|
|
547
592
|
case 'scooter':
|
|
548
593
|
return {
|
|
549
594
|
Icon: icons.ScooterIcon,
|
|
550
595
|
color: tokens.colors.transport["default"].mobility,
|
|
551
596
|
contrast: tokens.colors.transport.contrast.mobility
|
|
552
597
|
};
|
|
598
|
+
|
|
553
599
|
case 'airportLinkBus':
|
|
554
600
|
return {
|
|
555
601
|
Icon: icons.BusIcon,
|
|
556
602
|
color: tokens.colors.transport["default"].plane,
|
|
557
603
|
contrast: tokens.colors.transport.contrast.plane
|
|
558
604
|
};
|
|
605
|
+
|
|
559
606
|
case 'airportLinkRail':
|
|
560
607
|
return {
|
|
561
608
|
Icon: icons.TrainIcon,
|
|
562
609
|
color: tokens.colors.transport["default"].plane,
|
|
563
610
|
contrast: tokens.colors.transport.contrast.plane
|
|
564
611
|
};
|
|
612
|
+
|
|
565
613
|
default:
|
|
566
614
|
throw Error('Please select a transport for the TravelSwitch.');
|
|
567
615
|
}
|
|
@@ -570,8 +618,7 @@ function modeCalc(mode) {
|
|
|
570
618
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
|
|
571
619
|
function hasValue(value) {
|
|
572
620
|
return value != null && !(Array.isArray(value) && value.length === 0);
|
|
573
|
-
}
|
|
574
|
-
// Determine if field is empty or filled.
|
|
621
|
+
} // Determine if field is empty or filled.
|
|
575
622
|
// Response determines if label is presented above field or as placeholder.
|
|
576
623
|
//
|
|
577
624
|
// @param obj
|
|
@@ -579,29 +626,32 @@ function hasValue(value) {
|
|
|
579
626
|
// @returns {boolean} False when not present or empty string.
|
|
580
627
|
// True when any number or string with length.
|
|
581
628
|
// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
|
|
629
|
+
|
|
582
630
|
function isFilled(obj, SSR) {
|
|
583
631
|
if (SSR === void 0) {
|
|
584
632
|
SSR = false;
|
|
585
633
|
}
|
|
634
|
+
|
|
586
635
|
return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
|
|
587
636
|
}
|
|
588
637
|
|
|
589
638
|
var _excluded$5 = ["variant", "disabled", "readOnly", "className", "style", "label", "feedback", "labelTooltip", "onChange", "disableLabelAnimation"],
|
|
590
|
-
|
|
639
|
+
_excluded2$1 = ["readOnly", "disabled", "onChange", "value", "variant"];
|
|
591
640
|
var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
592
641
|
var variant = _ref.variant,
|
|
593
|
-
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
|
|
597
|
-
|
|
598
|
-
|
|
599
|
-
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
603
|
-
|
|
604
|
-
|
|
642
|
+
_ref$disabled = _ref.disabled,
|
|
643
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
644
|
+
_ref$readOnly = _ref.readOnly,
|
|
645
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
646
|
+
className = _ref.className,
|
|
647
|
+
style = _ref.style,
|
|
648
|
+
label = _ref.label,
|
|
649
|
+
feedback = _ref.feedback,
|
|
650
|
+
labelTooltip = _ref.labelTooltip,
|
|
651
|
+
onChange = _ref.onChange,
|
|
652
|
+
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
653
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
654
|
+
|
|
605
655
|
var textAreaId = utils.useRandomId('eds-textarea');
|
|
606
656
|
return React__default["default"].createElement(BaseFormControl, {
|
|
607
657
|
className: className,
|
|
@@ -628,16 +678,19 @@ var TextArea = /*#__PURE__*/React__default["default"].forwardRef(function (_ref,
|
|
|
628
678
|
});
|
|
629
679
|
var TextAreaBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, ref) {
|
|
630
680
|
var readOnly = _ref2.readOnly,
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
|
|
634
|
-
|
|
635
|
-
|
|
681
|
+
disabled = _ref2.disabled,
|
|
682
|
+
onChange = _ref2.onChange,
|
|
683
|
+
value = _ref2.value,
|
|
684
|
+
variant = _ref2.variant,
|
|
685
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
686
|
+
|
|
636
687
|
var contextVariant = useVariant();
|
|
637
688
|
var currentVariant = variant || contextVariant;
|
|
689
|
+
|
|
638
690
|
var _useInputGroupContext = useInputGroupContext(),
|
|
639
|
-
|
|
640
|
-
|
|
691
|
+
isInputFilled = _useInputGroupContext.isFilled,
|
|
692
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
693
|
+
|
|
641
694
|
utils.useOnMount(function () {
|
|
642
695
|
if (value || rest.defaultValue) {
|
|
643
696
|
setFiller && !isInputFilled && setFiller(true);
|
|
@@ -648,16 +701,19 @@ var TextAreaBase = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
648
701
|
setFiller(true);
|
|
649
702
|
}
|
|
650
703
|
}, [value, setFiller, isInputFilled]);
|
|
704
|
+
|
|
651
705
|
var handleChange = function handleChange(event) {
|
|
652
706
|
if (isFilled(event.target)) {
|
|
653
707
|
setFiller && !isInputFilled && setFiller(true);
|
|
654
708
|
} else {
|
|
655
709
|
setFiller && isInputFilled && setFiller(false);
|
|
656
710
|
}
|
|
711
|
+
|
|
657
712
|
if (onChange) {
|
|
658
713
|
onChange(event);
|
|
659
714
|
}
|
|
660
715
|
};
|
|
716
|
+
|
|
661
717
|
return React__default["default"].createElement("textarea", _extends({
|
|
662
718
|
className: "eds-form-control eds-textarea",
|
|
663
719
|
ref: ref,
|
|
@@ -670,34 +726,35 @@ var TextAreaBase = /*#__PURE__*/React__default["default"].forwardRef(function (_
|
|
|
670
726
|
});
|
|
671
727
|
|
|
672
728
|
var _excluded$4 = ["prepend", "append", "variant", "disabled", "readOnly", "className", "style", "size", "label", "required", "labelTooltip", "feedback", "onChange", "disableLabelAnimation", "labelProps", "clearable", "onClear", "value", "ariaAlertOnFeedback"],
|
|
673
|
-
|
|
674
|
-
|
|
729
|
+
_excluded2 = ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"],
|
|
730
|
+
_excluded3 = ["onClear"];
|
|
675
731
|
var TextField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
676
732
|
var prepend = _ref.prepend,
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
733
|
+
append = _ref.append,
|
|
734
|
+
variant = _ref.variant,
|
|
735
|
+
_ref$disabled = _ref.disabled,
|
|
736
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
737
|
+
_ref$readOnly = _ref.readOnly,
|
|
738
|
+
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
|
|
739
|
+
className = _ref.className,
|
|
740
|
+
style = _ref.style,
|
|
741
|
+
_ref$size = _ref.size,
|
|
742
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
743
|
+
label = _ref.label,
|
|
744
|
+
required = _ref.required,
|
|
745
|
+
labelTooltip = _ref.labelTooltip,
|
|
746
|
+
feedback = _ref.feedback,
|
|
747
|
+
onChange = _ref.onChange,
|
|
748
|
+
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
749
|
+
labelProps = _ref.labelProps,
|
|
750
|
+
_ref$clearable = _ref.clearable,
|
|
751
|
+
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
752
|
+
onClear = _ref.onClear,
|
|
753
|
+
value = _ref.value,
|
|
754
|
+
_ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
|
|
755
|
+
ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
|
|
756
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
757
|
+
|
|
701
758
|
var randomId = utils.useRandomId('eds-textfield');
|
|
702
759
|
var textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
|
|
703
760
|
return React__default["default"].createElement(BaseFormControl, {
|
|
@@ -731,17 +788,20 @@ var TextField = /*#__PURE__*/React__default["default"].forwardRef(function (_ref
|
|
|
731
788
|
});
|
|
732
789
|
var TextFieldBase = /*#__PURE__*/React__default["default"].forwardRef(function (_ref2, forwardRef) {
|
|
733
790
|
var disabled = _ref2.disabled,
|
|
734
|
-
|
|
735
|
-
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
|
|
739
|
-
|
|
791
|
+
readOnly = _ref2.readOnly,
|
|
792
|
+
placeholder = _ref2.placeholder,
|
|
793
|
+
onChange = _ref2.onChange,
|
|
794
|
+
value = _ref2.value,
|
|
795
|
+
variant = _ref2.variant,
|
|
796
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
797
|
+
|
|
740
798
|
var contextVariant = useVariant();
|
|
741
799
|
var currentVariant = variant || contextVariant;
|
|
800
|
+
|
|
742
801
|
var _useInputGroupContext = useInputGroupContext(),
|
|
743
|
-
|
|
744
|
-
|
|
802
|
+
isInputFilled = _useInputGroupContext.isFilled,
|
|
803
|
+
setFiller = _useInputGroupContext.setFilled;
|
|
804
|
+
|
|
745
805
|
utils.useOnMount(function () {
|
|
746
806
|
if (value || rest.defaultValue) {
|
|
747
807
|
setFiller && !isInputFilled && setFiller(true);
|
|
@@ -752,16 +812,19 @@ var TextFieldBase = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
752
812
|
setFiller(true);
|
|
753
813
|
}
|
|
754
814
|
}, [value, setFiller, isInputFilled]);
|
|
815
|
+
|
|
755
816
|
var handleChange = function handleChange(event) {
|
|
756
817
|
if (isFilled(event.target)) {
|
|
757
818
|
setFiller && !isInputFilled && setFiller(true);
|
|
758
819
|
} else {
|
|
759
820
|
setFiller && isInputFilled && setFiller(false);
|
|
760
821
|
}
|
|
822
|
+
|
|
761
823
|
if (onChange) {
|
|
762
824
|
onChange(event);
|
|
763
825
|
}
|
|
764
826
|
};
|
|
827
|
+
|
|
765
828
|
return React__default["default"].createElement("input", _extends({
|
|
766
829
|
"aria-invalid": currentVariant === 'error',
|
|
767
830
|
className: "eds-form-control",
|
|
@@ -773,12 +836,15 @@ var TextFieldBase = /*#__PURE__*/React__default["default"].forwardRef(function (
|
|
|
773
836
|
value: value
|
|
774
837
|
}, rest));
|
|
775
838
|
});
|
|
839
|
+
|
|
776
840
|
var ClearButton = function ClearButton(_ref3) {
|
|
777
841
|
var onClear = _ref3.onClear,
|
|
778
|
-
|
|
842
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
|
|
843
|
+
|
|
779
844
|
var _useInputGroupContext2 = useInputGroupContext(),
|
|
780
|
-
|
|
781
|
-
|
|
845
|
+
hasValue = _useInputGroupContext2.isFilled,
|
|
846
|
+
setFilled = _useInputGroupContext2.setFilled;
|
|
847
|
+
|
|
782
848
|
return React__default["default"].createElement("div", {
|
|
783
849
|
className: "eds-textfield__clear-button-wrapper"
|
|
784
850
|
}, hasValue && React__default["default"].createElement("div", {
|
|
@@ -798,14 +864,15 @@ var _excluded$3 = ["name", "onChange", "selectedValue", "multiple", "size"];
|
|
|
798
864
|
var SegmentedContext = /*#__PURE__*/React__default["default"].createContext(null);
|
|
799
865
|
var SegmentedProvider = function SegmentedProvider(_ref) {
|
|
800
866
|
var name = _ref.name,
|
|
801
|
-
|
|
802
|
-
|
|
803
|
-
|
|
804
|
-
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
867
|
+
_ref$onChange = _ref.onChange,
|
|
868
|
+
onChange = _ref$onChange === void 0 ? function () {
|
|
869
|
+
return undefined;
|
|
870
|
+
} : _ref$onChange,
|
|
871
|
+
selectedValue = _ref.selectedValue,
|
|
872
|
+
multiple = _ref.multiple,
|
|
873
|
+
size = _ref.size,
|
|
874
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
875
|
+
|
|
809
876
|
var generatedName = utils.useRandomId('eds-segmented-control');
|
|
810
877
|
var contextValue = React__default["default"].useMemo(function () {
|
|
811
878
|
return {
|
|
@@ -822,40 +889,48 @@ var SegmentedProvider = function SegmentedProvider(_ref) {
|
|
|
822
889
|
};
|
|
823
890
|
var useSegmentedContext = function useSegmentedContext() {
|
|
824
891
|
var context = React__default["default"].useContext(SegmentedContext);
|
|
892
|
+
|
|
825
893
|
if (!context) {
|
|
826
894
|
throw new Error('You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl');
|
|
827
895
|
}
|
|
896
|
+
|
|
828
897
|
return context;
|
|
829
898
|
};
|
|
830
899
|
|
|
831
900
|
var _excluded$2 = ["children", "className", "style", "value", "name", "onChange"];
|
|
832
901
|
var SegmentedChoice = /*#__PURE__*/React__default["default"].forwardRef(function (_ref, ref) {
|
|
833
902
|
var children = _ref.children,
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
|
|
842
|
-
|
|
903
|
+
className = _ref.className,
|
|
904
|
+
style = _ref.style,
|
|
905
|
+
value = _ref.value,
|
|
906
|
+
name = _ref.name,
|
|
907
|
+
_ref$onChange = _ref.onChange,
|
|
908
|
+
onChange = _ref$onChange === void 0 ? function () {
|
|
909
|
+
return undefined;
|
|
910
|
+
} : _ref$onChange,
|
|
911
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
912
|
+
|
|
843
913
|
var _useSegmentedContext = useSegmentedContext(),
|
|
844
|
-
|
|
845
|
-
|
|
846
|
-
|
|
847
|
-
|
|
848
|
-
|
|
914
|
+
commonName = _useSegmentedContext.name,
|
|
915
|
+
selectedValue = _useSegmentedContext.selectedValue,
|
|
916
|
+
commonOnChange = _useSegmentedContext.onChange,
|
|
917
|
+
multiple = _useSegmentedContext.multiple,
|
|
918
|
+
size = _useSegmentedContext.size;
|
|
919
|
+
|
|
849
920
|
var isChecked = multiple ? selectedValue[value] : selectedValue === value;
|
|
921
|
+
|
|
850
922
|
var handleChange = function handleChange(e) {
|
|
851
923
|
onChange(e);
|
|
924
|
+
|
|
852
925
|
if (multiple) {
|
|
853
926
|
var _extends2;
|
|
927
|
+
|
|
854
928
|
commonOnChange(_extends({}, selectedValue, (_extends2 = {}, _extends2[value] = e.target.checked, _extends2)));
|
|
855
929
|
} else if (e.target.checked) {
|
|
856
930
|
commonOnChange(value);
|
|
857
931
|
}
|
|
858
932
|
};
|
|
933
|
+
|
|
859
934
|
return React__default["default"].createElement("label", {
|
|
860
935
|
className: classNames__default["default"]('eds-segmented-choice', className, {
|
|
861
936
|
'eds-segmented-choide--large': size === 'large'
|
|
@@ -878,14 +953,15 @@ var SegmentedChoice = /*#__PURE__*/React__default["default"].forwardRef(function
|
|
|
878
953
|
var _excluded$1 = ["children", "label", "name", "onChange", "selectedValue", "size", "className"];
|
|
879
954
|
var SegmentedControl = function SegmentedControl(_ref) {
|
|
880
955
|
var children = _ref.children,
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
|
|
956
|
+
label = _ref.label,
|
|
957
|
+
name = _ref.name,
|
|
958
|
+
onChange = _ref.onChange,
|
|
959
|
+
selectedValue = _ref.selectedValue,
|
|
960
|
+
_ref$size = _ref.size,
|
|
961
|
+
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
962
|
+
className = _ref.className,
|
|
963
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
964
|
+
|
|
889
965
|
return React__default["default"].createElement(SegmentedProvider, {
|
|
890
966
|
name: name,
|
|
891
967
|
selectedValue: selectedValue,
|
|
@@ -903,13 +979,15 @@ var _excluded = ["children", "label", "name", "onChange", "selectedValue"];
|
|
|
903
979
|
/**This component is not used by anyone, and is therefore deprecated
|
|
904
980
|
* @deprecated
|
|
905
981
|
*/
|
|
982
|
+
|
|
906
983
|
var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
|
|
907
984
|
var children = _ref.children,
|
|
908
|
-
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
985
|
+
label = _ref.label,
|
|
986
|
+
name = _ref.name,
|
|
987
|
+
onChange = _ref.onChange,
|
|
988
|
+
selectedValue = _ref.selectedValue,
|
|
989
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
990
|
+
|
|
913
991
|
return React__default["default"].createElement(SegmentedProvider, {
|
|
914
992
|
name: name,
|
|
915
993
|
selectedValue: selectedValue,
|