@entur/form 5.2.0 → 5.2.3
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 +15 -0
- package/dist/Checkbox.d.ts +1 -1
- package/dist/RadioPanel.d.ts +1 -1
- package/dist/Switch.d.ts +1 -1
- package/dist/TextArea.d.ts +1 -1
- package/dist/TextField.d.ts +2 -2
- package/dist/form.cjs.development.js +193 -138
- package/dist/form.cjs.development.js.map +1 -1
- package/dist/form.cjs.production.min.js +1 -1
- package/dist/form.cjs.production.min.js.map +1 -1
- package/dist/form.esm.js +82 -47
- package/dist/form.esm.js.map +1 -1
- package/dist/segmented-control/SegmentedChoice.d.ts +1 -1
- package/dist/styles.css +10 -10
- package/dist/utils.d.ts +1 -1
- package/package.json +11 -11
package/dist/form.esm.js
CHANGED
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import { useRandomId, useOnMount, warnAboutMissingStyles } from '@entur/utils';
|
|
2
2
|
import { Tooltip } from '@entur/tooltip';
|
|
3
3
|
import classNames from 'classnames';
|
|
4
|
-
import
|
|
4
|
+
import * as React from 'react';
|
|
5
|
+
import React__default from 'react';
|
|
5
6
|
import { ValidationExclamationIcon, ValidationErrorIcon, ValidationCheckIcon, QuestionIcon, TrainIcon, BusIcon, ScooterIcon, BicycleIcon, FerryIcon, TramIcon, PlaneIcon, SubwayIcon, CloseSmallIcon } from '@entur/icons';
|
|
6
7
|
import { SubLabel, Paragraph, Label } from '@entur/typography';
|
|
7
8
|
import { colors } from '@entur/tokens';
|
|
@@ -39,6 +40,8 @@ function _objectWithoutPropertiesLoose(source, excluded) {
|
|
|
39
40
|
return target;
|
|
40
41
|
}
|
|
41
42
|
|
|
43
|
+
var _excluded$f = ["children", "hideIcon", "variant", "className"];
|
|
44
|
+
|
|
42
45
|
var AlertIcon = function AlertIcon(_ref) {
|
|
43
46
|
var variant = _ref.variant;
|
|
44
47
|
var iconClass = "eds-feedback-text__icon eds-feedback-text__icon--" + variant;
|
|
@@ -73,9 +76,9 @@ var FeedbackText = function FeedbackText(_ref2) {
|
|
|
73
76
|
hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
|
|
74
77
|
variant = _ref2.variant,
|
|
75
78
|
className = _ref2.className,
|
|
76
|
-
rest = _objectWithoutPropertiesLoose(_ref2,
|
|
79
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded$f);
|
|
77
80
|
|
|
78
|
-
return React__default.createElement(SubLabel,
|
|
81
|
+
return React__default.createElement(SubLabel, _extends({
|
|
79
82
|
className: classNames('eds-feedback-text', {
|
|
80
83
|
'eds-feedback-text--info': variant === 'info'
|
|
81
84
|
}, className)
|
|
@@ -86,7 +89,7 @@ var FeedbackText = function FeedbackText(_ref2) {
|
|
|
86
89
|
}, children));
|
|
87
90
|
};
|
|
88
91
|
|
|
89
|
-
var InputGroupContext = /*#__PURE__*/createContext({
|
|
92
|
+
var InputGroupContext = /*#__PURE__*/React.createContext({
|
|
90
93
|
isFilled: false,
|
|
91
94
|
setFilled: function setFilled() {
|
|
92
95
|
return null;
|
|
@@ -95,11 +98,11 @@ var InputGroupContext = /*#__PURE__*/createContext({
|
|
|
95
98
|
var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
|
|
96
99
|
var children = _ref.children;
|
|
97
100
|
|
|
98
|
-
var _React$useState = useState(false),
|
|
101
|
+
var _React$useState = React.useState(false),
|
|
99
102
|
filled = _React$useState[0],
|
|
100
103
|
setFilled = _React$useState[1];
|
|
101
104
|
|
|
102
|
-
return createElement(InputGroupContext.Provider, {
|
|
105
|
+
return React.createElement(InputGroupContext.Provider, {
|
|
103
106
|
value: {
|
|
104
107
|
isFilled: filled,
|
|
105
108
|
setFilled: setFilled
|
|
@@ -107,22 +110,23 @@ var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
|
|
|
107
110
|
}, children);
|
|
108
111
|
};
|
|
109
112
|
var useInputGroupContext = function useInputGroupContext() {
|
|
110
|
-
return useContext(InputGroupContext);
|
|
113
|
+
return React.useContext(InputGroupContext);
|
|
111
114
|
};
|
|
112
115
|
|
|
116
|
+
var _excluded$e = ["label", "required", "labelId", "staticAnimation"];
|
|
113
117
|
var InputGroupLabel = function InputGroupLabel(_ref) {
|
|
114
118
|
var label = _ref.label,
|
|
115
119
|
required = _ref.required,
|
|
116
120
|
labelId = _ref.labelId,
|
|
117
121
|
_ref$staticAnimation = _ref.staticAnimation,
|
|
118
122
|
staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
|
|
119
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
123
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
|
|
120
124
|
|
|
121
125
|
var _useInputGroupContext = useInputGroupContext(),
|
|
122
126
|
isFilled = _useInputGroupContext.isFilled;
|
|
123
127
|
|
|
124
128
|
var filler = staticAnimation || isFilled;
|
|
125
|
-
return React__default.createElement("label",
|
|
129
|
+
return React__default.createElement("label", _extends({
|
|
126
130
|
className: classNames(rest.className, {
|
|
127
131
|
'eds-input-group-label-wrapper--filled': filler
|
|
128
132
|
}),
|
|
@@ -148,6 +152,7 @@ var useVariant = function useVariant() {
|
|
|
148
152
|
return context;
|
|
149
153
|
};
|
|
150
154
|
|
|
155
|
+
var _excluded$d = ["children", "className", "dark", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation"];
|
|
151
156
|
var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
152
157
|
var children = _ref.children,
|
|
153
158
|
className = _ref.className,
|
|
@@ -172,11 +177,11 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
|
172
177
|
style = _ref.style,
|
|
173
178
|
_ref$disableLabelAnim = _ref.disableLabelAnimation,
|
|
174
179
|
disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
|
|
175
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
180
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
|
|
176
181
|
|
|
177
182
|
var contextVariant = useVariant();
|
|
178
183
|
var currentVariant = variant || contextVariant;
|
|
179
|
-
return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div",
|
|
184
|
+
return React__default.createElement(InputGroupContextProvider, null, React__default.createElement("div", _extends({
|
|
180
185
|
className: classNames('eds-form-control-wrapper', className, "eds-form-control-wrapper--size-" + size, {
|
|
181
186
|
'eds-form-control-wrapper--success': currentVariant === 'success',
|
|
182
187
|
'eds-form-control-wrapper--error': currentVariant === 'error',
|
|
@@ -189,7 +194,7 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
|
189
194
|
style: style
|
|
190
195
|
}, rest), prepend && React__default.createElement("div", {
|
|
191
196
|
className: "eds-form-control__prepend"
|
|
192
|
-
}, prepend), React__default.createElement(InputGroupLabel,
|
|
197
|
+
}, prepend), React__default.createElement(InputGroupLabel, _extends({
|
|
193
198
|
label: label,
|
|
194
199
|
required: required,
|
|
195
200
|
labelId: labelId,
|
|
@@ -208,6 +213,7 @@ var BaseFormControl = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
|
208
213
|
}, feedback));
|
|
209
214
|
});
|
|
210
215
|
|
|
216
|
+
var _excluded$c = ["checked", "className", "children", "style", "disabled", "reduceClickArea"];
|
|
211
217
|
var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
212
218
|
var checked = _ref.checked,
|
|
213
219
|
className = _ref.className,
|
|
@@ -216,7 +222,7 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
216
222
|
_ref$disabled = _ref.disabled,
|
|
217
223
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
218
224
|
reduceClickArea = _ref.reduceClickArea,
|
|
219
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
225
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
|
|
220
226
|
|
|
221
227
|
// Trick to allow using a ref locally, while still allowing for ref forwarding
|
|
222
228
|
// Read more at https://reactjs.org/docs/hooks-reference.html#useimperativehandle
|
|
@@ -238,7 +244,7 @@ var Checkbox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
238
244
|
'eds-checkbox__container--reduced-click-area': reduceClickArea
|
|
239
245
|
}),
|
|
240
246
|
style: style
|
|
241
|
-
}, React__default.createElement("input",
|
|
247
|
+
}, React__default.createElement("input", _extends({
|
|
242
248
|
type: "checkbox",
|
|
243
249
|
ref: innerRef,
|
|
244
250
|
checked: isControlled ? checked === true : undefined,
|
|
@@ -278,13 +284,14 @@ var CheckboxIcon = function CheckboxIcon(_ref2) {
|
|
|
278
284
|
}));
|
|
279
285
|
};
|
|
280
286
|
|
|
287
|
+
var _excluded$b = ["children", "className", "label"];
|
|
281
288
|
var Fieldset = function Fieldset(_ref) {
|
|
282
289
|
var children = _ref.children,
|
|
283
290
|
className = _ref.className,
|
|
284
291
|
label = _ref.label,
|
|
285
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
292
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
|
|
286
293
|
|
|
287
|
-
return React__default.createElement("fieldset",
|
|
294
|
+
return React__default.createElement("fieldset", _extends({
|
|
288
295
|
className: classNames('eds-fieldset', className)
|
|
289
296
|
}, rest), label && React__default.createElement(Label, {
|
|
290
297
|
as: "legend",
|
|
@@ -304,12 +311,13 @@ var useRadioGroupContext = function useRadioGroupContext() {
|
|
|
304
311
|
return context;
|
|
305
312
|
};
|
|
306
313
|
|
|
314
|
+
var _excluded$a = ["className", "children", "value", "disabled"];
|
|
307
315
|
var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
308
316
|
var className = _ref.className,
|
|
309
317
|
children = _ref.children,
|
|
310
318
|
value = _ref.value,
|
|
311
319
|
disabled = _ref.disabled,
|
|
312
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
320
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
|
|
313
321
|
|
|
314
322
|
var classList = classNames(className, 'eds-form-component--radio__radio', {
|
|
315
323
|
'eds-form-component--radio__radio--disabled': disabled
|
|
@@ -322,7 +330,7 @@ var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
322
330
|
|
|
323
331
|
return React__default.createElement("label", {
|
|
324
332
|
className: "eds-form-component--radio__container"
|
|
325
|
-
}, React__default.createElement("input",
|
|
333
|
+
}, React__default.createElement("input", _extends({
|
|
326
334
|
type: "radio",
|
|
327
335
|
name: name,
|
|
328
336
|
ref: ref,
|
|
@@ -341,13 +349,14 @@ var Radio = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
341
349
|
}, children));
|
|
342
350
|
});
|
|
343
351
|
|
|
352
|
+
var _excluded$9 = ["name", "value", "children", "onChange", "label"];
|
|
344
353
|
var RadioGroup = function RadioGroup(_ref) {
|
|
345
354
|
var name = _ref.name,
|
|
346
355
|
value = _ref.value,
|
|
347
356
|
children = _ref.children,
|
|
348
357
|
onChange = _ref.onChange,
|
|
349
358
|
label = _ref.label,
|
|
350
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
359
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
|
|
351
360
|
|
|
352
361
|
var contextValue = React__default.useMemo(function () {
|
|
353
362
|
return {
|
|
@@ -358,11 +367,12 @@ var RadioGroup = function RadioGroup(_ref) {
|
|
|
358
367
|
}, [name, value, onChange]);
|
|
359
368
|
return React__default.createElement(RadioGroupContextProvider, {
|
|
360
369
|
value: contextValue
|
|
361
|
-
}, label ? React__default.createElement(Fieldset,
|
|
370
|
+
}, label ? React__default.createElement(Fieldset, _extends({
|
|
362
371
|
label: label
|
|
363
372
|
}, rest), children) : children);
|
|
364
373
|
};
|
|
365
374
|
|
|
375
|
+
var _excluded$8 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
|
|
366
376
|
var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
367
377
|
var className = _ref.className,
|
|
368
378
|
children = _ref.children,
|
|
@@ -377,7 +387,7 @@ var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
377
387
|
id = _ref.id,
|
|
378
388
|
_ref$disabled = _ref.disabled,
|
|
379
389
|
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
380
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
390
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
|
|
381
391
|
|
|
382
392
|
var classList = classNames(className, 'eds-radio-panel__container', "eds-radio-panel--" + size, {
|
|
383
393
|
'eds-radio-panel--disabled': disabled
|
|
@@ -393,7 +403,7 @@ var RadioPanel = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
393
403
|
return React__default.createElement("label", {
|
|
394
404
|
className: "eds-radio-panel__wrapper",
|
|
395
405
|
htmlFor: radioPanelId
|
|
396
|
-
}, React__default.createElement("input",
|
|
406
|
+
}, React__default.createElement("input", _extends({
|
|
397
407
|
type: "radio",
|
|
398
408
|
name: name,
|
|
399
409
|
ref: ref,
|
|
@@ -431,6 +441,7 @@ var RadioPanelCheck = function RadioPanelCheck() {
|
|
|
431
441
|
}));
|
|
432
442
|
};
|
|
433
443
|
|
|
444
|
+
var _excluded$7 = ["className", "children", "labelPlacement", "icon", "color", "contrastColor", "size"];
|
|
434
445
|
var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
435
446
|
var className = _ref.className,
|
|
436
447
|
children = _ref.children,
|
|
@@ -442,13 +453,13 @@ var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
442
453
|
contrastColor = _ref.contrastColor,
|
|
443
454
|
_ref$size = _ref.size,
|
|
444
455
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
445
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
456
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
|
|
446
457
|
|
|
447
458
|
var chosenContrastColor = contrastColor && contrastColor || color;
|
|
448
459
|
return React__default.createElement("label", {
|
|
449
460
|
className: classNames('eds-switch', "eds-switch--" + labelPlacement, className),
|
|
450
461
|
style: _extends({}, rest.style)
|
|
451
|
-
}, React__default.createElement("input",
|
|
462
|
+
}, React__default.createElement("input", _extends({
|
|
452
463
|
type: "checkbox",
|
|
453
464
|
ref: ref
|
|
454
465
|
}, rest)), React__default.createElement("span", {
|
|
@@ -464,6 +475,7 @@ var Switch = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
464
475
|
}, children));
|
|
465
476
|
});
|
|
466
477
|
|
|
478
|
+
var _excluded$6 = ["className", "children", "labelPlacement", "transport", "size"];
|
|
467
479
|
var TravelSwitch = function TravelSwitch(_ref) {
|
|
468
480
|
var className = _ref.className,
|
|
469
481
|
children = _ref.children,
|
|
@@ -471,14 +483,14 @@ var TravelSwitch = function TravelSwitch(_ref) {
|
|
|
471
483
|
labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
|
|
472
484
|
transport = _ref.transport,
|
|
473
485
|
size = _ref.size,
|
|
474
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
486
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
|
|
475
487
|
|
|
476
488
|
var _modeCalc = modeCalc(transport),
|
|
477
489
|
color = _modeCalc.color,
|
|
478
490
|
contrast = _modeCalc.contrast,
|
|
479
491
|
Icon = _modeCalc.Icon;
|
|
480
492
|
|
|
481
|
-
return React__default.createElement(Switch,
|
|
493
|
+
return React__default.createElement(Switch, _extends({
|
|
482
494
|
className: className,
|
|
483
495
|
labelPlacement: labelPlacement,
|
|
484
496
|
color: color,
|
|
@@ -583,6 +595,8 @@ function isFilled(obj, SSR) {
|
|
|
583
595
|
return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
|
|
584
596
|
}
|
|
585
597
|
|
|
598
|
+
var _excluded$5 = ["variant", "disabled", "readOnly", "className", "style", "label", "feedback", "labelTooltip", "onChange", "disableLabelAnimation"],
|
|
599
|
+
_excluded2$1 = ["readOnly", "disabled", "onChange", "value"];
|
|
586
600
|
var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
587
601
|
var variant = _ref.variant,
|
|
588
602
|
_ref$disabled = _ref.disabled,
|
|
@@ -596,7 +610,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
596
610
|
labelTooltip = _ref.labelTooltip,
|
|
597
611
|
onChange = _ref.onChange,
|
|
598
612
|
disableLabelAnimation = _ref.disableLabelAnimation,
|
|
599
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
613
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
|
|
600
614
|
|
|
601
615
|
var textAreaId = useRandomId('eds-textarea');
|
|
602
616
|
return React__default.createElement(BaseFormControl, {
|
|
@@ -613,7 +627,7 @@ var TextArea = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
613
627
|
className: 'eds-textarea__label'
|
|
614
628
|
},
|
|
615
629
|
disableLabelAnimation: disableLabelAnimation
|
|
616
|
-
}, React__default.createElement(TextAreaBase,
|
|
630
|
+
}, React__default.createElement(TextAreaBase, _extends({
|
|
617
631
|
readOnly: readOnly,
|
|
618
632
|
disabled: disabled,
|
|
619
633
|
ref: ref,
|
|
@@ -626,7 +640,7 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
|
|
|
626
640
|
disabled = _ref2.disabled,
|
|
627
641
|
onChange = _ref2.onChange,
|
|
628
642
|
value = _ref2.value,
|
|
629
|
-
rest = _objectWithoutPropertiesLoose(_ref2,
|
|
643
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
|
|
630
644
|
|
|
631
645
|
var _useInputGroupContext = useInputGroupContext(),
|
|
632
646
|
isInputFilled = _useInputGroupContext.isFilled,
|
|
@@ -637,6 +651,11 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
|
|
|
637
651
|
setFiller && !isInputFilled && setFiller(true);
|
|
638
652
|
}
|
|
639
653
|
});
|
|
654
|
+
React__default.useEffect(function () {
|
|
655
|
+
if (value && setFiller && !isInputFilled) {
|
|
656
|
+
setFiller(true);
|
|
657
|
+
}
|
|
658
|
+
}, [value, setFiller, isInputFilled]);
|
|
640
659
|
|
|
641
660
|
var handleChange = function handleChange(event) {
|
|
642
661
|
if (isFilled(event.target)) {
|
|
@@ -650,7 +669,7 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
|
|
|
650
669
|
}
|
|
651
670
|
};
|
|
652
671
|
|
|
653
|
-
return React__default.createElement("textarea",
|
|
672
|
+
return React__default.createElement("textarea", _extends({
|
|
654
673
|
className: "eds-form-control eds-textarea",
|
|
655
674
|
ref: ref,
|
|
656
675
|
readOnly: readOnly,
|
|
@@ -660,6 +679,9 @@ var TextAreaBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, ref)
|
|
|
660
679
|
}, rest));
|
|
661
680
|
});
|
|
662
681
|
|
|
682
|
+
var _excluded$4 = ["prepend", "append", "variant", "disabled", "readOnly", "className", "style", "size", "label", "required", "labelTooltip", "feedback", "onChange", "disableLabelAnimation", "labelProps", "clearable", "onClear", "value"],
|
|
683
|
+
_excluded2 = ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"],
|
|
684
|
+
_excluded3 = ["onClear"];
|
|
663
685
|
var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
664
686
|
var prepend = _ref.prepend,
|
|
665
687
|
append = _ref.append,
|
|
@@ -683,7 +705,7 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
683
705
|
clearable = _ref$clearable === void 0 ? false : _ref$clearable,
|
|
684
706
|
onClear = _ref.onClear,
|
|
685
707
|
value = _ref.value,
|
|
686
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
708
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
|
|
687
709
|
|
|
688
710
|
var textFieldId = labelProps && labelProps.id ? labelProps.id : useRandomId('eds-textfield');
|
|
689
711
|
return React__default.createElement(BaseFormControl, {
|
|
@@ -691,7 +713,7 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
691
713
|
readOnly: readOnly,
|
|
692
714
|
variant: variant,
|
|
693
715
|
prepend: prepend,
|
|
694
|
-
append: clearable ? React__default.createElement(ClearButton, {
|
|
716
|
+
append: clearable && onClear ? React__default.createElement(ClearButton, {
|
|
695
717
|
onClear: onClear
|
|
696
718
|
}) : append,
|
|
697
719
|
className: className,
|
|
@@ -704,7 +726,7 @@ var TextField = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
|
704
726
|
feedback: feedback,
|
|
705
727
|
disableLabelAnimation: disableLabelAnimation,
|
|
706
728
|
labelProps: labelProps
|
|
707
|
-
}, React__default.createElement(TextFieldBase,
|
|
729
|
+
}, React__default.createElement(TextFieldBase, _extends({
|
|
708
730
|
disabled: disabled,
|
|
709
731
|
readOnly: readOnly,
|
|
710
732
|
ref: ref,
|
|
@@ -720,7 +742,7 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
|
|
|
720
742
|
onChange = _ref2.onChange,
|
|
721
743
|
value = _ref2.value,
|
|
722
744
|
variant = _ref2.variant,
|
|
723
|
-
rest = _objectWithoutPropertiesLoose(_ref2,
|
|
745
|
+
rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
|
|
724
746
|
|
|
725
747
|
var contextVariant = useVariant();
|
|
726
748
|
var currentVariant = variant || contextVariant;
|
|
@@ -734,6 +756,11 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
|
|
|
734
756
|
setFiller && !isInputFilled && setFiller(true);
|
|
735
757
|
}
|
|
736
758
|
});
|
|
759
|
+
React__default.useEffect(function () {
|
|
760
|
+
if (value && setFiller && !isInputFilled) {
|
|
761
|
+
setFiller(true);
|
|
762
|
+
}
|
|
763
|
+
}, [value, setFiller, isInputFilled]);
|
|
737
764
|
|
|
738
765
|
var handleChange = function handleChange(event) {
|
|
739
766
|
if (isFilled(event.target)) {
|
|
@@ -747,7 +774,7 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
|
|
|
747
774
|
}
|
|
748
775
|
};
|
|
749
776
|
|
|
750
|
-
return React__default.createElement("input",
|
|
777
|
+
return React__default.createElement("input", _extends({
|
|
751
778
|
"aria-invalid": currentVariant === 'error',
|
|
752
779
|
className: "eds-form-control",
|
|
753
780
|
disabled: disabled,
|
|
@@ -761,23 +788,28 @@ var TextFieldBase = /*#__PURE__*/React__default.forwardRef(function (_ref2, forw
|
|
|
761
788
|
|
|
762
789
|
var ClearButton = function ClearButton(_ref3) {
|
|
763
790
|
var onClear = _ref3.onClear,
|
|
764
|
-
props = _objectWithoutPropertiesLoose(_ref3,
|
|
791
|
+
props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
|
|
765
792
|
|
|
766
793
|
var _useInputGroupContext2 = useInputGroupContext(),
|
|
767
|
-
hasValue = _useInputGroupContext2.isFilled
|
|
794
|
+
hasValue = _useInputGroupContext2.isFilled,
|
|
795
|
+
setFilled = _useInputGroupContext2.setFilled;
|
|
768
796
|
|
|
769
797
|
return React__default.createElement("div", {
|
|
770
798
|
className: "eds-textfield__clear-button-wrapper"
|
|
771
799
|
}, hasValue && React__default.createElement("div", {
|
|
772
800
|
className: "eds-textfield__divider"
|
|
773
|
-
}), hasValue && React__default.createElement("button",
|
|
801
|
+
}), hasValue && React__default.createElement("button", _extends({
|
|
774
802
|
className: "eds-textfield__clear-button",
|
|
775
803
|
type: "button",
|
|
776
804
|
tabIndex: -1,
|
|
777
|
-
onClick:
|
|
805
|
+
onClick: function onClick() {
|
|
806
|
+
setFilled(false);
|
|
807
|
+
onClear();
|
|
808
|
+
}
|
|
778
809
|
}, props), React__default.createElement(CloseSmallIcon, null)));
|
|
779
810
|
};
|
|
780
811
|
|
|
812
|
+
var _excluded$3 = ["name", "onChange", "selectedValue", "multiple", "size"];
|
|
781
813
|
var SegmentedContext = /*#__PURE__*/React__default.createContext(null);
|
|
782
814
|
var SegmentedProvider = function SegmentedProvider(_ref) {
|
|
783
815
|
var name = _ref.name,
|
|
@@ -786,7 +818,7 @@ var SegmentedProvider = function SegmentedProvider(_ref) {
|
|
|
786
818
|
selectedValue = _ref.selectedValue,
|
|
787
819
|
multiple = _ref.multiple,
|
|
788
820
|
size = _ref.size,
|
|
789
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
821
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
|
|
790
822
|
|
|
791
823
|
var generatedName = useRandomId('eds-segmented-control');
|
|
792
824
|
var contextValue = React__default.useMemo(function () {
|
|
@@ -798,7 +830,7 @@ var SegmentedProvider = function SegmentedProvider(_ref) {
|
|
|
798
830
|
size: size
|
|
799
831
|
};
|
|
800
832
|
}, [generatedName, multiple, name, onChange, selectedValue, size]);
|
|
801
|
-
return React__default.createElement(SegmentedContext.Provider,
|
|
833
|
+
return React__default.createElement(SegmentedContext.Provider, _extends({
|
|
802
834
|
value: contextValue
|
|
803
835
|
}, rest));
|
|
804
836
|
};
|
|
@@ -812,6 +844,7 @@ var useSegmentedContext = function useSegmentedContext() {
|
|
|
812
844
|
return context;
|
|
813
845
|
};
|
|
814
846
|
|
|
847
|
+
var _excluded$2 = ["children", "className", "style", "value", "name", "onChange"];
|
|
815
848
|
var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
|
|
816
849
|
var children = _ref.children,
|
|
817
850
|
className = _ref.className,
|
|
@@ -820,7 +853,7 @@ var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
|
820
853
|
name = _ref.name,
|
|
821
854
|
_ref$onChange = _ref.onChange,
|
|
822
855
|
onChange = _ref$onChange === void 0 ? function () {} : _ref$onChange,
|
|
823
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
856
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
824
857
|
|
|
825
858
|
var _useSegmentedContext = useSegmentedContext(),
|
|
826
859
|
commonName = _useSegmentedContext.name,
|
|
@@ -848,7 +881,7 @@ var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
|
848
881
|
'eds-segmented-choide--large': size === 'large'
|
|
849
882
|
}),
|
|
850
883
|
style: style
|
|
851
|
-
}, React__default.createElement("input",
|
|
884
|
+
}, React__default.createElement("input", _extends({
|
|
852
885
|
type: multiple ? 'checkbox' : 'radio',
|
|
853
886
|
name: name || commonName,
|
|
854
887
|
checked: isChecked,
|
|
@@ -862,6 +895,7 @@ var SegmentedChoice = /*#__PURE__*/React__default.forwardRef(function (_ref, ref
|
|
|
862
895
|
}, children));
|
|
863
896
|
});
|
|
864
897
|
|
|
898
|
+
var _excluded$1 = ["children", "label", "name", "onChange", "selectedValue", "size", "className"];
|
|
865
899
|
var SegmentedControl = function SegmentedControl(_ref) {
|
|
866
900
|
var children = _ref.children,
|
|
867
901
|
label = _ref.label,
|
|
@@ -871,7 +905,7 @@ var SegmentedControl = function SegmentedControl(_ref) {
|
|
|
871
905
|
_ref$size = _ref.size,
|
|
872
906
|
size = _ref$size === void 0 ? 'medium' : _ref$size,
|
|
873
907
|
className = _ref.className,
|
|
874
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
908
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
875
909
|
|
|
876
910
|
return React__default.createElement(SegmentedProvider, {
|
|
877
911
|
name: name,
|
|
@@ -881,11 +915,12 @@ var SegmentedControl = function SegmentedControl(_ref) {
|
|
|
881
915
|
size: size
|
|
882
916
|
}, React__default.createElement(Label, {
|
|
883
917
|
as: "div"
|
|
884
|
-
}, label), React__default.createElement("div",
|
|
918
|
+
}, label), React__default.createElement("div", _extends({
|
|
885
919
|
className: classNames('eds-segmented-control', className)
|
|
886
920
|
}, rest), children));
|
|
887
921
|
};
|
|
888
922
|
|
|
923
|
+
var _excluded = ["children", "label", "name", "onChange", "selectedValue"];
|
|
889
924
|
/**This component is not used by anyone, and is therefore deprecated
|
|
890
925
|
* @deprecated
|
|
891
926
|
*/
|
|
@@ -896,7 +931,7 @@ var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
|
|
|
896
931
|
name = _ref.name,
|
|
897
932
|
onChange = _ref.onChange,
|
|
898
933
|
selectedValue = _ref.selectedValue,
|
|
899
|
-
rest = _objectWithoutPropertiesLoose(_ref,
|
|
934
|
+
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
900
935
|
|
|
901
936
|
return React__default.createElement(SegmentedProvider, {
|
|
902
937
|
name: name,
|
|
@@ -906,7 +941,7 @@ var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
|
|
|
906
941
|
size: "medium"
|
|
907
942
|
}, React__default.createElement(Label, {
|
|
908
943
|
as: "div"
|
|
909
|
-
}, label), React__default.createElement("div",
|
|
944
|
+
}, label), React__default.createElement("div", _extends({
|
|
910
945
|
className: "eds-segmented-control"
|
|
911
946
|
}, rest), children));
|
|
912
947
|
};
|