@entur/form 8.3.2-beta.9 → 8.3.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.
@@ -1,1026 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- var utils = require('@entur/utils');
6
- var React = require('react');
7
- var classNames = require('classnames');
8
- var icons = require('@entur/icons');
9
- var tooltip = require('@entur/tooltip');
10
- var button = require('@entur/button');
11
- var typography = require('@entur/typography');
12
- var tokens = require('@entur/tokens');
13
-
14
- function _interopNamespaceDefault(e) {
15
- var n = Object.create(null);
16
- if (e) {
17
- Object.keys(e).forEach(function (k) {
18
- if (k !== 'default') {
19
- var d = Object.getOwnPropertyDescriptor(e, k);
20
- Object.defineProperty(n, k, d.get ? d : {
21
- enumerable: true,
22
- get: function () { return e[k]; }
23
- });
24
- }
25
- });
26
- }
27
- n.default = e;
28
- return n;
29
- }
30
-
31
- var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
32
-
33
- function _extends() {
34
- return _extends = Object.assign ? Object.assign.bind() : function (n) {
35
- for (var e = 1; e < arguments.length; e++) {
36
- var t = arguments[e];
37
- for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
38
- }
39
- return n;
40
- }, _extends.apply(null, arguments);
41
- }
42
- function _objectWithoutPropertiesLoose(r, e) {
43
- if (null == r) return {};
44
- var t = {};
45
- for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
46
- if (-1 !== e.indexOf(n)) continue;
47
- t[n] = r[n];
48
- }
49
- return t;
50
- }
51
-
52
- var _excluded$g = ["children", "hideIcon", "variant", "className"];
53
- /** @deprecated use variant="information" instead */
54
- var info = 'info';
55
- /** @deprecated use variant="negative" instead */
56
- var error$1 = 'error';
57
- var AlertIcon = function AlertIcon(_ref) {
58
- var variant = _ref.variant;
59
- var iconClass = "eds-feedback-text__icon eds-feedback-text__icon--" + variant;
60
- switch (variant) {
61
- case 'success':
62
- return React.createElement(icons.ValidationSuccessFilledIcon, {
63
- "aria-label": "Suksessmelding",
64
- className: iconClass
65
- });
66
- case 'negative':
67
- return React.createElement(icons.ValidationErrorFilledIcon, {
68
- "aria-label": "Feilmelding",
69
- className: iconClass
70
- });
71
- case 'information':
72
- return null;
73
- case 'warning':
74
- return React.createElement(icons.ValidationExclamationFilledIcon, {
75
- "aria-label": "Varselmelding",
76
- className: iconClass
77
- });
78
- case error$1:
79
- return React.createElement(icons.ValidationErrorFilledIcon, {
80
- "aria-label": "Feilmelding",
81
- className: iconClass
82
- });
83
- case info:
84
- return null;
85
- default:
86
- return null;
87
- }
88
- };
89
- var FeedbackText = function FeedbackText(_ref2) {
90
- var children = _ref2.children,
91
- _ref2$hideIcon = _ref2.hideIcon,
92
- hideIcon = _ref2$hideIcon === void 0 ? false : _ref2$hideIcon,
93
- variant = _ref2.variant,
94
- className = _ref2.className,
95
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded$g);
96
- return React.createElement(typography.SubLabel, _extends({
97
- className: classNames('eds-feedback-text', {
98
- 'eds-feedback-text--information': variant === info || variant === 'information'
99
- }, className)
100
- }, rest), !hideIcon && React.createElement(AlertIcon, {
101
- variant: variant
102
- }), React.createElement("span", {
103
- className: "eds-feedback-text__text"
104
- }, children));
105
- };
106
-
107
- var InputGroupContext = /*#__PURE__*/React__namespace.createContext({
108
- isFilled: false,
109
- setFilled: function setFilled() {
110
- return null;
111
- }
112
- });
113
- var InputGroupContextProvider = function InputGroupContextProvider(_ref) {
114
- var children = _ref.children;
115
- var _React$useState = React__namespace.useState(false),
116
- filled = _React$useState[0],
117
- setFilled = _React$useState[1];
118
- return React__namespace.createElement(InputGroupContext.Provider, {
119
- value: {
120
- isFilled: filled,
121
- setFilled: setFilled
122
- }
123
- }, children);
124
- };
125
- var useInputGroupContext = function useInputGroupContext() {
126
- return React__namespace.useContext(InputGroupContext);
127
- };
128
-
129
- var _excluded$f = ["label", "required", "labelId", "staticAnimation"];
130
- var InputGroupLabel = function InputGroupLabel(_ref) {
131
- var label = _ref.label,
132
- required = _ref.required,
133
- labelId = _ref.labelId,
134
- _ref$staticAnimation = _ref.staticAnimation,
135
- staticAnimation = _ref$staticAnimation === void 0 ? false : _ref$staticAnimation,
136
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$f);
137
- var _useInputGroupContext = useInputGroupContext(),
138
- isFilled = _useInputGroupContext.isFilled;
139
- var filler = staticAnimation || isFilled;
140
- return React.createElement("label", _extends({
141
- className: classNames(rest.className, {
142
- 'eds-input-group-label-wrapper--filled': filler
143
- }),
144
- id: labelId
145
- }, rest), React.createElement("span", {
146
- className: classNames('eds-input-group__label', {
147
- 'eds-input-group__label--filled': filler
148
- })
149
- }, label, " ", required && React.createElement("span", null, "*")));
150
- };
151
-
152
- var VariantContext = /*#__PURE__*/React.createContext(null);
153
- var VariantProvider = function VariantProvider(_ref) {
154
- var children = _ref.children,
155
- _ref$variant = _ref.variant,
156
- variant = _ref$variant === void 0 ? null : _ref$variant;
157
- return React.createElement(VariantContext.Provider, {
158
- value: variant
159
- }, children);
160
- };
161
- var useVariant = function useVariant() {
162
- var context = React.useContext(VariantContext);
163
- return context;
164
- };
165
-
166
- var _excluded$e = ["after", "before", "children", "className", "disabled", "readOnly", "variant", "prepend", "append", "size", "isFilled", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "feedback", "labelId", "labelProps", "style", "disableLabelAnimation", "ariaAlertOnFeedback", "ariaLabelOnReadOnly"];
167
- /** @deprecated use variant="negative" instead */
168
- var error = 'error';
169
- var BaseFormControl = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
170
- var after = _ref.after,
171
- before = _ref.before,
172
- children = _ref.children,
173
- className = _ref.className,
174
- _ref$disabled = _ref.disabled,
175
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
176
- _ref$readOnly = _ref.readOnly,
177
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
178
- variant = _ref.variant,
179
- prepend = _ref.prepend,
180
- append = _ref.append,
181
- _ref$size = _ref.size,
182
- size = _ref$size === void 0 ? 'medium' : _ref$size,
183
- isFilled = _ref.isFilled,
184
- label = _ref.label,
185
- required = _ref.required,
186
- labelTooltip = _ref.labelTooltip,
187
- _ref$labelTooltipButt = _ref.labelTooltipButtonAriaLabel,
188
- labelTooltipButtonAriaLabel = _ref$labelTooltipButt === void 0 ? "Klikk for tilleggsinfo om " + label + "-feltet" : _ref$labelTooltipButt,
189
- _ref$labelTooltipPlac = _ref.labelTooltipPlacement,
190
- labelTooltipPlacement = _ref$labelTooltipPlac === void 0 ? 'top' : _ref$labelTooltipPlac,
191
- feedback = _ref.feedback,
192
- labelId = _ref.labelId,
193
- labelProps = _ref.labelProps,
194
- style = _ref.style,
195
- _ref$disableLabelAnim = _ref.disableLabelAnimation,
196
- disableLabelAnimation = _ref$disableLabelAnim === void 0 ? false : _ref$disableLabelAnim,
197
- _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
198
- ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
199
- _ref$ariaLabelOnReadO = _ref.ariaLabelOnReadOnly,
200
- ariaLabelOnReadOnly = _ref$ariaLabelOnReadO === void 0 ? 'Dette skjemafeltet kan bare leses' : _ref$ariaLabelOnReadO,
201
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$e);
202
- var contextVariant = useVariant();
203
- var currentVariant = variant || contextVariant;
204
- return React.createElement(InputGroupContextProvider, null, React.createElement("div", {
205
- className: classNames('eds-form-control__field-and-feedback-text', className, {
206
- 'eds-form-control__field-and-feedback-text--has-tooltip': labelTooltip !== undefined
207
- }),
208
- style: style
209
- }, before, React.createElement("div", _extends({
210
- className: classNames('eds-form-control-wrapper', "eds-form-control-wrapper--size-" + size, {
211
- 'eds-form-control-wrapper--success': currentVariant === 'success',
212
- 'eds-form-control-wrapper--negative': currentVariant === 'negative' || currentVariant === error,
213
- 'eds-form-control-wrapper--disabled': disabled,
214
- 'eds-form-control-wrapper--readonly': readOnly,
215
- 'eds-form-control-wrapper--is-filled': isFilled
216
- }),
217
- ref: ref,
218
- tabIndex: readOnly ? -1 : undefined
219
- }, rest), prepend && React.createElement("div", {
220
- className: "eds-form-control__prepend"
221
- }, prepend), React.createElement(InputGroupLabel, _extends({
222
- label: label,
223
- required: required,
224
- labelId: labelId,
225
- staticAnimation: disableLabelAnimation,
226
- "aria-label": readOnly ? label + ", " + ariaLabelOnReadOnly : undefined
227
- }, labelProps)), labelTooltip && React.createElement(tooltip.Tooltip, {
228
- content: labelTooltip,
229
- placement: labelTooltipPlacement,
230
- showCloseButton: false,
231
- disableFocusListener: true,
232
- disableHoverListener: true,
233
- disableClickListner: false,
234
- disableKeyboardListener: false
235
- }, React.createElement(button.IconButton, {
236
- as: "span",
237
- tabIndex: 0,
238
- role: "button",
239
- className: "eds-form-control__append eds-form-control__append--tooltip",
240
- "aria-label": labelTooltipButtonAriaLabel
241
- }, React.createElement(icons.QuestionIcon, {
242
- className: "eds-input-group__label-tooltip-icon",
243
- "aria-hidden": "true"
244
- }))), children, append && React.createElement("div", {
245
- className: "eds-form-control__append"
246
- }, append)), feedback && currentVariant && React.createElement(FeedbackText, {
247
- variant: currentVariant,
248
- role: ariaAlertOnFeedback ? 'alert' : undefined
249
- }, feedback), after));
250
- });
251
-
252
- var _excluded$d = ["checked", "className", "children", "style", "disabled", "readOnly", "reduceClickArea", "disableAnimation"];
253
- var Checkbox = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
254
- var checked = _ref.checked,
255
- className = _ref.className,
256
- children = _ref.children,
257
- style = _ref.style,
258
- _ref$disabled = _ref.disabled,
259
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
260
- _ref$readOnly = _ref.readOnly,
261
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
262
- reduceClickArea = _ref.reduceClickArea,
263
- _ref$disableAnimation = _ref.disableAnimation,
264
- disableAnimation = _ref$disableAnimation === void 0 ? false : _ref$disableAnimation,
265
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$d);
266
- var inputRef = React.useRef(null);
267
- var isIndeterminate = checked === 'indeterminate';
268
- var isControlled = checked !== undefined;
269
- React.useEffect(function () {
270
- if (inputRef && inputRef.current) {
271
- inputRef.current.indeterminate = isIndeterminate;
272
- }
273
- }, [isIndeterminate]);
274
- return React.createElement("label", {
275
- className: classNames('eds-checkbox__container', className, {
276
- 'eds-checkbox--disabled': disabled,
277
- 'eds-checkbox--readonly': readOnly,
278
- 'eds-checkbox__container--reduced-click-area': reduceClickArea
279
- }),
280
- style: style
281
- }, React.createElement("input", _extends({
282
- type: "checkbox",
283
- ref: utils.mergeRefs(ref, inputRef),
284
- checked: isControlled ? checked === true : undefined,
285
- disabled: disabled,
286
- onKeyDown: function onKeyDown(e) {
287
- if (readOnly && (e.key === ' ' || e.key === 'Enter')) {
288
- e.preventDefault();
289
- e.stopPropagation();
290
- }
291
- },
292
- "aria-label": readOnly ? " " + (children == null ? void 0 : children.toString()) + ". Kan ikke endres" : undefined
293
- }, rest)), React.createElement("span", {
294
- className: classNames('eds-checkbox__icon', {
295
- 'eds-checkbox__icon--disabled': disabled,
296
- 'eds-checkbox__icon--readonly': readOnly,
297
- 'eds-checkbox__icon--reduced-click-area': reduceClickArea,
298
- 'eds-checkbox__icon--no-animation': disableAnimation || disabled || readOnly
299
- })
300
- }, React.createElement(CheckboxIcon, {
301
- indeterminate: isIndeterminate
302
- })), children && React.createElement(typography.Paragraph, {
303
- className: "eds-checkbox__label",
304
- margin: "none",
305
- as: "span"
306
- }, children));
307
- });
308
- var CheckboxIcon = function CheckboxIcon(_ref2) {
309
- var _ref2$indeterminate = _ref2.indeterminate,
310
- indeterminate = _ref2$indeterminate === void 0 ? false : _ref2$indeterminate;
311
- return React.createElement("svg", {
312
- className: "eds-checkbox-icon",
313
- width: "11px",
314
- height: "9px",
315
- viewBox: "6 11 37 33",
316
- "aria-hidden": true
317
- }, indeterminate ? React.createElement("rect", {
318
- x: "10",
319
- y: "25",
320
- width: "28",
321
- height: "5",
322
- fill: "white"
323
- }) : React.createElement("path", {
324
- d: "M14.1 27.2l7.1 7.2 14.6-14.8",
325
- fill: "none"
326
- }));
327
- };
328
-
329
- var _excluded$c = ["children", "className", "label"];
330
- var Fieldset = function Fieldset(_ref) {
331
- var children = _ref.children,
332
- className = _ref.className,
333
- label = _ref.label,
334
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$c);
335
- return React.createElement("fieldset", _extends({
336
- className: classNames('eds-fieldset', className)
337
- }, rest), label && React.createElement(typography.Heading5, {
338
- as: "legend"
339
- }, label), children);
340
- };
341
-
342
- var RadioGroupContext = /*#__PURE__*/React.createContext(null);
343
- var RadioGroupContextProvider = RadioGroupContext.Provider;
344
- var useRadioGroupContext = function useRadioGroupContext() {
345
- var context = React.useContext(RadioGroupContext);
346
- if (!context) {
347
- throw new Error('You need to wrap your RadioButtons in a RadioGroup component');
348
- }
349
- return context;
350
- };
351
-
352
- var _excluded$b = ["className", "children", "value", "disabled", "readOnlyLabelDescription"];
353
- var Radio = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
354
- var _rest$name, _rest$checked;
355
- var className = _ref.className,
356
- children = _ref.children,
357
- value = _ref.value,
358
- disabled = _ref.disabled,
359
- readOnlyLabelDescription = _ref.readOnlyLabelDescription,
360
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$b);
361
- var _useRadioGroupContext = useRadioGroupContext(),
362
- name = _useRadioGroupContext.name,
363
- selectedValue = _useRadioGroupContext.value,
364
- _onChange = _useRadioGroupContext.onChange,
365
- readOnly = _useRadioGroupContext.readOnly;
366
- var classList = classNames(className, 'eds-form-component--radio__radio', {
367
- 'eds-form-component--radio__radio--disabled': disabled,
368
- 'eds-form-component--radio__radio--readonly': readOnly
369
- });
370
- return React.createElement("label", {
371
- className: "eds-form-component--radio__container"
372
- }, React.createElement("input", _extends({
373
- type: "radio",
374
- name: (_rest$name = rest.name) != null ? _rest$name : name,
375
- ref: ref,
376
- value: value,
377
- checked: (_rest$checked = rest.checked) != null ? _rest$checked : selectedValue === value,
378
- onChange: function onChange(e) {
379
- var _ref2, _rest$onChange;
380
- if (readOnly) {
381
- e.preventDefault();
382
- return;
383
- }
384
- (_ref2 = (_rest$onChange = rest.onChange) != null ? _rest$onChange : _onChange) == null || _ref2(e);
385
- },
386
- onClick: function onClick(e) {
387
- if (readOnly) {
388
- e.preventDefault();
389
- }
390
- },
391
- disabled: disabled,
392
- "aria-label": readOnly ? (children == null ? void 0 : children.toString()) + ". " + (readOnlyLabelDescription != null ? readOnlyLabelDescription : 'Kan ikke endres') : undefined
393
- }, rest)), React.createElement("span", {
394
- className: classList
395
- }, React.createElement("span", {
396
- className: "eds-form-component--radio__circle"
397
- })), children && React.createElement(typography.Paragraph, {
398
- margin: "none",
399
- as: "span",
400
- className: "eds-form-component--radio__label"
401
- }, children));
402
- });
403
-
404
- var _excluded$a = ["className", "children", "value", "title", "secondaryLabel", "size", "hideSelectionIndicator", "style", "id", "disabled", "type", "onChange", "checked", "name"];
405
- var InputPanelBase = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
406
- var _ref2, _inputRef$current, _ref3, _inputRef$current2;
407
- var className = _ref.className,
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$hideSelectionInd = _ref.hideSelectionIndicator,
415
- hideSelectionIndicator = _ref$hideSelectionInd === void 0 ? false : _ref$hideSelectionInd,
416
- style = _ref.style,
417
- id = _ref.id,
418
- _ref$disabled = _ref.disabled,
419
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
420
- _ref$type = _ref.type,
421
- type = _ref$type === void 0 ? 'radio' : _ref$type,
422
- onChange = _ref.onChange,
423
- checked = _ref.checked,
424
- name = _ref.name,
425
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$a);
426
- var classList = classNames(className, 'eds-input-panel__container', "eds-input-panel--" + size);
427
- var inputRef = React.useRef(null);
428
- var defaultId = utils.useRandomId('eds-inputpanel');
429
- var inputPanelId = id || defaultId;
430
- var forceUpdate = utils.useForceUpdate();
431
- var handleOnChange = function handleOnChange(e) {
432
- if (onChange === undefined) forceUpdate();
433
- onChange == null || onChange(e);
434
- };
435
- return React.createElement("label", {
436
- className: "eds-input-panel",
437
- htmlFor: inputPanelId
438
- }, React.createElement("input", _extends({
439
- type: type,
440
- name: name,
441
- ref: utils.mergeRefs(ref, inputRef),
442
- value: value,
443
- checked: checked,
444
- onChange: handleOnChange,
445
- id: inputPanelId,
446
- disabled: disabled
447
- }, rest)), React.createElement("div", {
448
- className: classList,
449
- style: style
450
- }, React.createElement("div", {
451
- className: "eds-input-panel__title-wrapper"
452
- }, React.createElement("div", {
453
- className: "eds-input-panel__title"
454
- }, title), React.createElement("div", {
455
- className: "eds-input-panel__secondary-label-and-icon-wrapper"
456
- }, secondaryLabel !== undefined && React.createElement(React.Fragment, null, secondaryLabel), React.createElement("span", {
457
- style: {
458
- pointerEvents: 'none'
459
- }
460
- }, !(disabled || hideSelectionIndicator) && (type === 'radio' ? React.createElement(Radio, {
461
- name: "",
462
- value: "",
463
- checked: (_ref2 = checked != null ? checked : (_inputRef$current = inputRef.current) == null ? void 0 : _inputRef$current.checked) != null ? _ref2 : false,
464
- onChange: function onChange() {
465
- return;
466
- },
467
- "aria-hidden": "true",
468
- tabIndex: -1
469
- }) : React.createElement(Checkbox, {
470
- checked: (_ref3 = checked != null ? checked : (_inputRef$current2 = inputRef.current) == null ? void 0 : _inputRef$current2.checked) != null ? _ref3 : false,
471
- onChange: function onChange() {
472
- return null;
473
- },
474
- "aria-hidden": "true",
475
- tabIndex: -1
476
- }))))), children && React.createElement("div", {
477
- className: "eds-input-panel__additional-content"
478
- }, children)));
479
- });
480
-
481
- var _excluded$9 = ["className", "children", "value", "title", "secondaryLabel", "size", "hideRadioButton", "style", "id", "disabled"];
482
- var RadioPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
483
- var className = _ref.className,
484
- children = _ref.children,
485
- value = _ref.value,
486
- title = _ref.title,
487
- secondaryLabel = _ref.secondaryLabel,
488
- _ref$size = _ref.size,
489
- size = _ref$size === void 0 ? 'medium' : _ref$size,
490
- _ref$hideRadioButton = _ref.hideRadioButton,
491
- hideRadioButton = _ref$hideRadioButton === void 0 ? false : _ref$hideRadioButton,
492
- style = _ref.style,
493
- id = _ref.id,
494
- _ref$disabled = _ref.disabled,
495
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
496
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$9);
497
- var _useRadioGroupContext = useRadioGroupContext(),
498
- name = _useRadioGroupContext.name,
499
- selected = _useRadioGroupContext.value,
500
- onChange = _useRadioGroupContext.onChange;
501
- return React.createElement(InputPanelBase, _extends({
502
- type: "radio",
503
- name: name,
504
- title: title,
505
- value: value,
506
- checked: selected === value,
507
- onChange: onChange,
508
- className: className,
509
- secondaryLabel: secondaryLabel,
510
- size: size,
511
- hideSelectionIndicator: hideRadioButton,
512
- style: style,
513
- id: id,
514
- disabled: disabled
515
- }, rest, {
516
- ref: ref
517
- }), children);
518
- });
519
-
520
- var _excluded$8 = ["name", "checked", "onChange", "className", "children", "value", "title", "secondaryLabel", "size", "hideCheckbox", "style", "id", "disabled"];
521
- var CheckboxPanel = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
522
- var name = _ref.name,
523
- checked = _ref.checked,
524
- onChange = _ref.onChange,
525
- className = _ref.className,
526
- children = _ref.children,
527
- value = _ref.value,
528
- title = _ref.title,
529
- secondaryLabel = _ref.secondaryLabel,
530
- _ref$size = _ref.size,
531
- size = _ref$size === void 0 ? 'medium' : _ref$size,
532
- _ref$hideCheckbox = _ref.hideCheckbox,
533
- hideCheckbox = _ref$hideCheckbox === void 0 ? false : _ref$hideCheckbox,
534
- style = _ref.style,
535
- id = _ref.id,
536
- _ref$disabled = _ref.disabled,
537
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
538
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$8);
539
- return React.createElement(InputPanelBase, _extends({
540
- type: "checkbox",
541
- name: name,
542
- title: title,
543
- value: value,
544
- checked: checked,
545
- onChange: onChange,
546
- className: className,
547
- secondaryLabel: secondaryLabel,
548
- size: size,
549
- hideSelectionIndicator: hideCheckbox,
550
- style: style,
551
- id: id,
552
- disabled: disabled
553
- }, rest, {
554
- ref: ref
555
- }), children);
556
- });
557
-
558
- var _excluded$7 = ["name", "value", "children", "onChange", "label", "readOnly"];
559
- var RadioGroup = function RadioGroup(_ref) {
560
- var name = _ref.name,
561
- value = _ref.value,
562
- children = _ref.children,
563
- onChange = _ref.onChange,
564
- label = _ref.label,
565
- _ref$readOnly = _ref.readOnly,
566
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
567
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$7);
568
- var contextValue = React.useMemo(function () {
569
- return {
570
- name: name,
571
- value: value,
572
- onChange: onChange,
573
- readOnly: readOnly
574
- };
575
- }, [name, value, onChange, readOnly]);
576
- return React.createElement(RadioGroupContextProvider, {
577
- value: contextValue
578
- }, label ? React.createElement(Fieldset, _extends({
579
- label: label
580
- }, rest), children) : children);
581
- };
582
-
583
- var _excluded$6 = ["className", "children", "labelPlacement", "icon", "hideIcon", "color", "contrastColor", "size", "checked"];
584
- var Switch = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
585
- var className = _ref.className,
586
- children = _ref.children,
587
- _ref$labelPlacement = _ref.labelPlacement,
588
- labelPlacement = _ref$labelPlacement === void 0 ? 'right' : _ref$labelPlacement,
589
- icon = _ref.icon,
590
- _ref$hideIcon = _ref.hideIcon,
591
- hideIcon = _ref$hideIcon === void 0 ? false : _ref$hideIcon,
592
- _ref$color = _ref.color,
593
- color = _ref$color === void 0 ? tokens.colors.validation.mint : _ref$color,
594
- _ref$contrastColor = _ref.contrastColor,
595
- contrastColor = _ref$contrastColor === void 0 ? tokens.colors.validation.mintContrast : _ref$contrastColor,
596
- _ref$size = _ref.size,
597
- size = _ref$size === void 0 ? 'medium' : _ref$size,
598
- checked = _ref.checked,
599
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$6);
600
- var displayedIcon = function displayedIcon() {
601
- if (icon) return icon;
602
- if (checked === undefined) return React.createElement(React.Fragment, null);
603
- var iconSize = size === 'large' ? 23 : undefined;
604
- return checked ? React.createElement(icons.CheckIcon, {
605
- size: iconSize
606
- }) : React.createElement(icons.CloseSmallIcon, {
607
- size: iconSize
608
- });
609
- };
610
- return React.createElement("label", {
611
- className: classNames('eds-switch', "eds-switch--" + labelPlacement, className),
612
- style: _extends({}, rest.style)
613
- }, React.createElement("input", _extends({
614
- type: "checkbox",
615
- ref: ref,
616
- checked: checked
617
- }, rest)), React.createElement("span", {
618
- className: classNames('eds-switch__switch', "eds-switch__switch--" + size),
619
- style: {
620
- '--eds-switch-color': color,
621
- '--eds-switch-contrast-color': contrastColor
622
- },
623
- "aria-hidden": "true"
624
- }, React.createElement("span", {
625
- className: "eds-switch__circle"
626
- }, !hideIcon && displayedIcon())), children && React.createElement("span", {
627
- className: classNames('eds-switch__label', "eds-switch__label--" + size + "--" + labelPlacement)
628
- }, children));
629
- });
630
-
631
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
632
- function hasValue(value) {
633
- return value != null && !(Array.isArray(value) && value.length === 0);
634
- }
635
- // Determine if field is empty or filled.
636
- // Response determines if label is presented above field or as placeholder.
637
- //
638
- // @param obj
639
- // @param SSR
640
- // @returns {boolean} False when not present or empty string.
641
- // True when any number or string with length.
642
- // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types -- disabled during Yarn upgrade
643
- function isFilled(obj, SSR) {
644
- if (SSR === void 0) {
645
- SSR = false;
646
- }
647
- return obj && (hasValue(obj.value) && obj.value !== '' || SSR && hasValue(obj.defaultValue) && obj.defaultValue !== '');
648
- }
649
-
650
- var _excluded$5 = ["variant", "disabled", "readOnly", "className", "style", "label", "feedback", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "onChange", "disableLabelAnimation"],
651
- _excluded2$1 = ["readOnly", "disabled", "onChange", "value", "variant"];
652
- var TextArea = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
653
- var variant = _ref.variant,
654
- _ref$disabled = _ref.disabled,
655
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
656
- _ref$readOnly = _ref.readOnly,
657
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
658
- className = _ref.className,
659
- style = _ref.style,
660
- label = _ref.label,
661
- feedback = _ref.feedback,
662
- labelTooltip = _ref.labelTooltip,
663
- labelTooltipButtonAriaLabel = _ref.labelTooltipButtonAriaLabel,
664
- labelTooltipPlacement = _ref.labelTooltipPlacement,
665
- onChange = _ref.onChange,
666
- disableLabelAnimation = _ref.disableLabelAnimation,
667
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$5);
668
- var textAreaId = utils.useRandomId('eds-textarea');
669
- var textareaRef = React.useRef(null);
670
- return React.createElement(BaseFormControl, {
671
- className: classNames(className, 'eds-textarea__wrapper'),
672
- disabled: disabled,
673
- readOnly: readOnly,
674
- variant: variant,
675
- style: style,
676
- label: label,
677
- labelId: textAreaId,
678
- feedback: feedback,
679
- labelTooltip: labelTooltip,
680
- labelTooltipButtonAriaLabel: labelTooltipButtonAriaLabel,
681
- labelTooltipPlacement: labelTooltipPlacement,
682
- labelProps: {
683
- className: 'eds-textarea__label'
684
- },
685
- disableLabelAnimation: disableLabelAnimation,
686
- onClick: function onClick(e) {
687
- var _textareaRef$current;
688
- if (e.target === e.currentTarget) textareaRef == null || (_textareaRef$current = textareaRef.current) == null || _textareaRef$current.focus();
689
- }
690
- }, React.createElement(TextAreaBase, _extends({
691
- readOnly: readOnly,
692
- disabled: disabled,
693
- ref: utils.mergeRefs(ref, textareaRef),
694
- "aria-labelledby": textAreaId,
695
- onChange: onChange,
696
- variant: variant
697
- }, rest)));
698
- });
699
- var TextAreaBase = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
700
- var readOnly = _ref2.readOnly,
701
- disabled = _ref2.disabled,
702
- onChange = _ref2.onChange,
703
- value = _ref2.value,
704
- variant = _ref2.variant,
705
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded2$1);
706
- var contextVariant = useVariant();
707
- var currentVariant = variant || contextVariant;
708
- var _useInputGroupContext = useInputGroupContext(),
709
- isInputFilled = _useInputGroupContext.isFilled,
710
- setFiller = _useInputGroupContext.setFilled;
711
- utils.useOnMount(function () {
712
- if (value != null && value.toString() || rest.defaultValue) {
713
- setFiller && !isInputFilled && setFiller(true);
714
- }
715
- });
716
- React.useEffect(function () {
717
- if (value != null && value.toString() && setFiller && !isInputFilled) {
718
- setFiller(true);
719
- }
720
- }, [value, setFiller, isInputFilled]);
721
- var handleChange = function handleChange(event) {
722
- if (isFilled(event.target)) {
723
- setFiller && !isInputFilled && setFiller(true);
724
- } else {
725
- setFiller && isInputFilled && setFiller(false);
726
- }
727
- if (onChange) {
728
- onChange(event);
729
- }
730
- };
731
- return React.createElement("textarea", _extends({
732
- className: "eds-form-control eds-textarea",
733
- ref: ref,
734
- readOnly: readOnly,
735
- disabled: disabled,
736
- onChange: handleChange,
737
- value: value,
738
- "aria-invalid": currentVariant === 'error'
739
- }, rest));
740
- });
741
-
742
- var _excluded$4 = ["prepend", "append", "variant", "disabled", "readOnly", "className", "style", "size", "label", "required", "labelTooltip", "labelTooltipButtonAriaLabel", "labelTooltipPlacement", "feedback", "onChange", "disableLabelAnimation", "labelProps", "clearable", "onClear", "value", "ariaAlertOnFeedback"],
743
- _excluded2 = ["disabled", "readOnly", "placeholder", "onChange", "value", "variant"],
744
- _excluded3 = ["onClear"];
745
- var TextField = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
746
- var prepend = _ref.prepend,
747
- append = _ref.append,
748
- variant = _ref.variant,
749
- _ref$disabled = _ref.disabled,
750
- disabled = _ref$disabled === void 0 ? false : _ref$disabled,
751
- _ref$readOnly = _ref.readOnly,
752
- readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
753
- className = _ref.className,
754
- style = _ref.style,
755
- _ref$size = _ref.size,
756
- size = _ref$size === void 0 ? 'medium' : _ref$size,
757
- label = _ref.label,
758
- required = _ref.required,
759
- labelTooltip = _ref.labelTooltip,
760
- labelTooltipButtonAriaLabel = _ref.labelTooltipButtonAriaLabel,
761
- labelTooltipPlacement = _ref.labelTooltipPlacement,
762
- feedback = _ref.feedback,
763
- onChange = _ref.onChange,
764
- disableLabelAnimation = _ref.disableLabelAnimation,
765
- labelProps = _ref.labelProps,
766
- _ref$clearable = _ref.clearable,
767
- clearable = _ref$clearable === void 0 ? false : _ref$clearable,
768
- onClear = _ref.onClear,
769
- value = _ref.value,
770
- _ref$ariaAlertOnFeedb = _ref.ariaAlertOnFeedback,
771
- ariaAlertOnFeedback = _ref$ariaAlertOnFeedb === void 0 ? false : _ref$ariaAlertOnFeedb,
772
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$4);
773
- var randomId = utils.useRandomId('eds-textfield');
774
- var textFieldId = labelProps && labelProps.id ? labelProps.id : randomId;
775
- var textFieldRef = React.useRef(null);
776
- return React.createElement(BaseFormControl, {
777
- disabled: disabled,
778
- readOnly: readOnly,
779
- variant: variant,
780
- prepend: prepend,
781
- append: clearable && onClear ? React.createElement(ClearButton, {
782
- onClear: onClear
783
- }) : append,
784
- className: classNames(className, 'eds-textfield__wrapper'),
785
- style: style,
786
- size: size,
787
- label: label,
788
- required: required,
789
- labelTooltip: labelTooltip,
790
- labelTooltipButtonAriaLabel: labelTooltipButtonAriaLabel,
791
- labelTooltipPlacement: labelTooltipPlacement,
792
- labelId: textFieldId,
793
- feedback: feedback,
794
- disableLabelAnimation: disableLabelAnimation,
795
- labelProps: labelProps,
796
- ariaAlertOnFeedback: ariaAlertOnFeedback,
797
- onClick: function onClick(e) {
798
- var _textFieldRef$current;
799
- if (e.target === e.currentTarget) textFieldRef == null || (_textFieldRef$current = textFieldRef.current) == null || _textFieldRef$current.focus();
800
- }
801
- }, React.createElement(TextFieldBase, _extends({
802
- disabled: disabled,
803
- readOnly: readOnly,
804
- ref: utils.mergeRefs(ref, textFieldRef),
805
- "aria-labelledby": textFieldId,
806
- onChange: onChange,
807
- value: value,
808
- variant: variant
809
- }, rest)));
810
- });
811
- var TextFieldBase = /*#__PURE__*/React.forwardRef(function (_ref2, forwardRef) {
812
- var disabled = _ref2.disabled,
813
- readOnly = _ref2.readOnly,
814
- placeholder = _ref2.placeholder,
815
- onChange = _ref2.onChange,
816
- value = _ref2.value,
817
- variant = _ref2.variant,
818
- rest = _objectWithoutPropertiesLoose(_ref2, _excluded2);
819
- var contextVariant = useVariant();
820
- var currentVariant = variant || contextVariant;
821
- var _useInputGroupContext = useInputGroupContext(),
822
- isInputFilled = _useInputGroupContext.isFilled,
823
- setFiller = _useInputGroupContext.setFilled;
824
- utils.useOnMount(function () {
825
- if (value != null && value.toString() || rest.defaultValue) {
826
- setFiller && !isInputFilled && setFiller(true);
827
- }
828
- });
829
- React.useEffect(function () {
830
- if (value != null && value.toString() && setFiller && !isInputFilled) {
831
- setFiller(true);
832
- }
833
- }, [value, setFiller, isInputFilled]);
834
- var handleChange = function handleChange(event) {
835
- if (isFilled(event.target)) {
836
- setFiller && !isInputFilled && setFiller(true);
837
- } else {
838
- setFiller && isInputFilled && setFiller(false);
839
- }
840
- if (onChange) {
841
- onChange(event);
842
- }
843
- };
844
- return React.createElement("input", _extends({
845
- "aria-invalid": currentVariant === 'error',
846
- className: "eds-form-control",
847
- disabled: disabled,
848
- readOnly: readOnly,
849
- ref: forwardRef,
850
- placeholder: placeholder,
851
- onChange: handleChange,
852
- value: value
853
- }, rest));
854
- });
855
- var ClearButton = function ClearButton(_ref3) {
856
- var onClear = _ref3.onClear,
857
- props = _objectWithoutPropertiesLoose(_ref3, _excluded3);
858
- var _useInputGroupContext2 = useInputGroupContext(),
859
- hasValue = _useInputGroupContext2.isFilled,
860
- setFilled = _useInputGroupContext2.setFilled;
861
- return React.createElement("div", {
862
- className: "eds-textfield__clear-button-wrapper"
863
- }, hasValue && React.createElement("div", {
864
- className: "eds-textfield__divider"
865
- }), hasValue && React.createElement("button", _extends({
866
- className: "eds-textfield__clear-button",
867
- type: "button",
868
- tabIndex: -1,
869
- onClick: function onClick() {
870
- setFilled(false);
871
- onClear();
872
- }
873
- }, props), React.createElement(icons.CloseSmallIcon, null)));
874
- };
875
-
876
- var _excluded$3 = ["name", "onChange", "selectedValue", "multiple", "size"];
877
- var SegmentedContext = /*#__PURE__*/React.createContext(null);
878
- var SegmentedProvider = function SegmentedProvider(_ref) {
879
- var name = _ref.name,
880
- _ref$onChange = _ref.onChange,
881
- onChange = _ref$onChange === void 0 ? function () {
882
- return undefined;
883
- } : _ref$onChange,
884
- selectedValue = _ref.selectedValue,
885
- multiple = _ref.multiple,
886
- size = _ref.size,
887
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$3);
888
- var generatedName = utils.useRandomId('eds-segmented-control');
889
- var contextValue = React.useMemo(function () {
890
- return {
891
- name: name || generatedName,
892
- onChange: onChange,
893
- multiple: multiple,
894
- selectedValue: selectedValue,
895
- size: size
896
- };
897
- }, [generatedName, multiple, name, onChange, selectedValue, size]);
898
- return React.createElement(SegmentedContext.Provider, _extends({
899
- value: contextValue
900
- }, rest));
901
- };
902
- var useSegmentedContext = function useSegmentedContext() {
903
- var context = React.useContext(SegmentedContext);
904
- if (!context) {
905
- throw new Error('You need to wrap your SegmentedChoice in either SegmentedControl or MultipleSegmentedControl');
906
- }
907
- return context;
908
- };
909
-
910
- var _excluded$2 = ["children", "className", "style", "value", "name", "onChange"];
911
- var SegmentedChoice = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
912
- var children = _ref.children,
913
- className = _ref.className,
914
- style = _ref.style,
915
- value = _ref.value,
916
- name = _ref.name,
917
- _ref$onChange = _ref.onChange,
918
- onChange = _ref$onChange === void 0 ? function () {
919
- return undefined;
920
- } : _ref$onChange,
921
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
922
- var _useSegmentedContext = useSegmentedContext(),
923
- commonName = _useSegmentedContext.name,
924
- selectedValue = _useSegmentedContext.selectedValue,
925
- commonOnChange = _useSegmentedContext.onChange,
926
- multiple = _useSegmentedContext.multiple,
927
- size = _useSegmentedContext.size;
928
- var isChecked = multiple ? selectedValue[value] : selectedValue === value;
929
- var handleChange = function handleChange(e) {
930
- onChange(e);
931
- if (multiple) {
932
- var _extends2;
933
- commonOnChange(_extends({}, selectedValue, (_extends2 = {}, _extends2[value] = e.target.checked, _extends2)));
934
- } else if (e.target.checked) {
935
- commonOnChange(value);
936
- }
937
- };
938
- return React.createElement("label", {
939
- className: classNames('eds-segmented-choice', className),
940
- style: style
941
- }, React.createElement("input", _extends({
942
- type: multiple ? 'checkbox' : 'radio',
943
- name: name || commonName,
944
- checked: isChecked,
945
- value: value,
946
- onChange: handleChange,
947
- ref: ref
948
- }, rest)), React.createElement("div", {
949
- className: classNames('eds-base-segmented', {
950
- 'eds-base-segmented--large': size === 'large'
951
- })
952
- }, children));
953
- });
954
-
955
- var _excluded$1 = ["children", "label", "name", "onChange", "selectedValue", "size", "className"];
956
- var SegmentedControl = function SegmentedControl(_ref) {
957
- var children = _ref.children,
958
- label = _ref.label,
959
- name = _ref.name,
960
- onChange = _ref.onChange,
961
- selectedValue = _ref.selectedValue,
962
- _ref$size = _ref.size,
963
- size = _ref$size === void 0 ? 'medium' : _ref$size,
964
- className = _ref.className,
965
- rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
966
- return React.createElement(SegmentedProvider, {
967
- name: name,
968
- selectedValue: selectedValue,
969
- onChange: onChange,
970
- multiple: false,
971
- size: size
972
- }, React.createElement(Fieldset, {
973
- label: label
974
- }, React.createElement("div", _extends({
975
- className: classNames('eds-segmented-control', className)
976
- }, rest), children)));
977
- };
978
-
979
- var _excluded = ["children", "label", "name", "onChange", "selectedValue"];
980
- /**This component is not used by anyone, and is therefore deprecated
981
- * @deprecated
982
- */
983
- var MultipleSegmentedControl = function MultipleSegmentedControl(_ref) {
984
- var children = _ref.children,
985
- label = _ref.label,
986
- name = _ref.name,
987
- onChange = _ref.onChange,
988
- selectedValue = _ref.selectedValue,
989
- rest = _objectWithoutPropertiesLoose(_ref, _excluded);
990
- return React.createElement(SegmentedProvider, {
991
- name: name,
992
- selectedValue: selectedValue,
993
- onChange: onChange,
994
- multiple: true,
995
- size: "medium"
996
- }, React.createElement(typography.Label, {
997
- as: "div"
998
- }, label), React.createElement("div", _extends({
999
- className: "eds-segmented-control"
1000
- }, rest), children));
1001
- };
1002
-
1003
- utils.warnAboutMissingStyles('form', 'icons', 'typography');
1004
-
1005
- exports.BaseFormControl = BaseFormControl;
1006
- exports.Checkbox = Checkbox;
1007
- exports.CheckboxPanel = CheckboxPanel;
1008
- exports.FeedbackText = FeedbackText;
1009
- exports.Fieldset = Fieldset;
1010
- exports.InputGroupContextProvider = InputGroupContextProvider;
1011
- exports.InputGroupLabel = InputGroupLabel;
1012
- exports.MultipleSegmentedControl = MultipleSegmentedControl;
1013
- exports.Radio = Radio;
1014
- exports.RadioGroup = RadioGroup;
1015
- exports.RadioPanel = RadioPanel;
1016
- exports.SegmentedChoice = SegmentedChoice;
1017
- exports.SegmentedControl = SegmentedControl;
1018
- exports.Switch = Switch;
1019
- exports.TextArea = TextArea;
1020
- exports.TextField = TextField;
1021
- exports.VariantProvider = VariantProvider;
1022
- exports.hasValue = hasValue;
1023
- exports.isFilled = isFilled;
1024
- exports.useInputGroupContext = useInputGroupContext;
1025
- exports.useVariant = useVariant;
1026
- //# sourceMappingURL=form.cjs.development.js.map