@zendeskgarden/react-forms 8.62.0 → 8.62.2
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/dist/index.cjs.js +269 -270
- package/dist/index.esm.js +50 -48
- package/package.json +3 -3
package/dist/index.cjs.js
CHANGED
|
@@ -7,8 +7,6 @@
|
|
|
7
7
|
|
|
8
8
|
'use strict';
|
|
9
9
|
|
|
10
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
11
|
-
|
|
12
10
|
var React = require('react');
|
|
13
11
|
var containerField = require('@zendeskgarden/container-field');
|
|
14
12
|
var styled = require('styled-components');
|
|
@@ -20,7 +18,7 @@ var mergeRefs = require('react-merge-refs');
|
|
|
20
18
|
var debounce = require('lodash.debounce');
|
|
21
19
|
var containerSlider = require('@zendeskgarden/container-slider');
|
|
22
20
|
|
|
23
|
-
function
|
|
21
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
24
22
|
|
|
25
23
|
function _interopNamespace(e) {
|
|
26
24
|
if (e && e.__esModule) return e;
|
|
@@ -36,16 +34,15 @@ function _interopNamespace(e) {
|
|
|
36
34
|
}
|
|
37
35
|
});
|
|
38
36
|
}
|
|
39
|
-
n
|
|
37
|
+
n.default = e;
|
|
40
38
|
return Object.freeze(n);
|
|
41
39
|
}
|
|
42
40
|
|
|
43
41
|
var React__namespace = /*#__PURE__*/_interopNamespace(React);
|
|
44
|
-
var
|
|
45
|
-
var
|
|
46
|
-
var
|
|
47
|
-
var
|
|
48
|
-
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
42
|
+
var styled__default = /*#__PURE__*/_interopDefault(styled);
|
|
43
|
+
var PropTypes__default = /*#__PURE__*/_interopDefault(PropTypes);
|
|
44
|
+
var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
|
|
45
|
+
var debounce__default = /*#__PURE__*/_interopDefault(debounce);
|
|
49
46
|
|
|
50
47
|
function _extends$t() {
|
|
51
48
|
_extends$t = Object.assign ? Object.assign.bind() : function (target) {
|
|
@@ -69,9 +66,9 @@ const useFieldContext = () => {
|
|
|
69
66
|
};
|
|
70
67
|
|
|
71
68
|
const COMPONENT_ID$K = 'forms.field';
|
|
72
|
-
const StyledField = styled__default
|
|
69
|
+
const StyledField = styled__default.default.div.attrs({
|
|
73
70
|
'data-garden-id': COMPONENT_ID$K,
|
|
74
|
-
'data-garden-version': '8.62.
|
|
71
|
+
'data-garden-version': '8.62.2'
|
|
75
72
|
}).withConfig({
|
|
76
73
|
displayName: "StyledField",
|
|
77
74
|
componentId: "sc-12gzfsu-0"
|
|
@@ -81,10 +78,10 @@ StyledField.defaultProps = {
|
|
|
81
78
|
};
|
|
82
79
|
|
|
83
80
|
const COMPONENT_ID$J = 'forms.fieldset';
|
|
84
|
-
const StyledFieldset = styled__default
|
|
81
|
+
const StyledFieldset = styled__default.default(StyledField).attrs({
|
|
85
82
|
as: 'fieldset',
|
|
86
83
|
'data-garden-id': COMPONENT_ID$J,
|
|
87
|
-
'data-garden-version': '8.62.
|
|
84
|
+
'data-garden-version': '8.62.2'
|
|
88
85
|
}).withConfig({
|
|
89
86
|
displayName: "StyledFieldset",
|
|
90
87
|
componentId: "sc-1vr4mxv-0"
|
|
@@ -94,9 +91,9 @@ StyledFieldset.defaultProps = {
|
|
|
94
91
|
};
|
|
95
92
|
|
|
96
93
|
const COMPONENT_ID$I = 'forms.input_label';
|
|
97
|
-
const StyledLabel = styled__default
|
|
94
|
+
const StyledLabel = styled__default.default.label.attrs({
|
|
98
95
|
'data-garden-id': COMPONENT_ID$I,
|
|
99
|
-
'data-garden-version': '8.62.
|
|
96
|
+
'data-garden-version': '8.62.2'
|
|
100
97
|
}).withConfig({
|
|
101
98
|
displayName: "StyledLabel",
|
|
102
99
|
componentId: "sc-2utmsz-0"
|
|
@@ -106,10 +103,10 @@ StyledLabel.defaultProps = {
|
|
|
106
103
|
};
|
|
107
104
|
|
|
108
105
|
const COMPONENT_ID$H = 'forms.fieldset_legend';
|
|
109
|
-
const StyledLegend = styled__default
|
|
106
|
+
const StyledLegend = styled__default.default(StyledLabel).attrs({
|
|
110
107
|
as: 'legend',
|
|
111
108
|
'data-garden-id': COMPONENT_ID$H,
|
|
112
|
-
'data-garden-version': '8.62.
|
|
109
|
+
'data-garden-version': '8.62.2'
|
|
113
110
|
}).withConfig({
|
|
114
111
|
displayName: "StyledLegend",
|
|
115
112
|
componentId: "sc-6s0zwq-0"
|
|
@@ -119,9 +116,9 @@ StyledLegend.defaultProps = {
|
|
|
119
116
|
};
|
|
120
117
|
|
|
121
118
|
const COMPONENT_ID$G = 'forms.input_hint';
|
|
122
|
-
const StyledHint = styled__default
|
|
119
|
+
const StyledHint = styled__default.default.div.attrs({
|
|
123
120
|
'data-garden-id': COMPONENT_ID$G,
|
|
124
|
-
'data-garden-version': '8.62.
|
|
121
|
+
'data-garden-version': '8.62.2'
|
|
125
122
|
}).withConfig({
|
|
126
123
|
displayName: "StyledHint",
|
|
127
124
|
componentId: "sc-17c2wu8-0"
|
|
@@ -222,20 +219,20 @@ const MessageIcon = _ref => {
|
|
|
222
219
|
} = _ref;
|
|
223
220
|
let retVal;
|
|
224
221
|
if (validation === 'error') {
|
|
225
|
-
retVal =
|
|
222
|
+
retVal = React__namespace.default.createElement(SvgAlertErrorStroke, props);
|
|
226
223
|
} else if (validation === 'success') {
|
|
227
|
-
retVal =
|
|
224
|
+
retVal = React__namespace.default.createElement(SvgCheckCircleStroke$1, props);
|
|
228
225
|
} else if (validation === 'warning') {
|
|
229
|
-
retVal =
|
|
226
|
+
retVal = React__namespace.default.createElement(SvgAlertWarningStroke, props);
|
|
230
227
|
} else {
|
|
231
|
-
retVal =
|
|
228
|
+
retVal = React__namespace.default.cloneElement(React.Children.only(children));
|
|
232
229
|
}
|
|
233
230
|
return retVal;
|
|
234
231
|
};
|
|
235
232
|
const COMPONENT_ID$F = 'forms.input_message_icon';
|
|
236
|
-
const StyledMessageIcon = styled__default
|
|
233
|
+
const StyledMessageIcon = styled__default.default(MessageIcon).attrs({
|
|
237
234
|
'data-garden-id': COMPONENT_ID$F,
|
|
238
|
-
'data-garden-version': '8.62.
|
|
235
|
+
'data-garden-version': '8.62.2',
|
|
239
236
|
'aria-hidden': null
|
|
240
237
|
}).withConfig({
|
|
241
238
|
displayName: "StyledMessageIcon",
|
|
@@ -261,9 +258,9 @@ const validationStyles = props => {
|
|
|
261
258
|
return styled.css(["padding-", ":", ";color:", ";"], rtl ? 'right' : 'left', props.validation && padding, color);
|
|
262
259
|
};
|
|
263
260
|
const COMPONENT_ID$E = 'forms.input_message';
|
|
264
|
-
const StyledMessage = styled__default
|
|
261
|
+
const StyledMessage = styled__default.default.div.attrs({
|
|
265
262
|
'data-garden-id': COMPONENT_ID$E,
|
|
266
|
-
'data-garden-version': '8.62.
|
|
263
|
+
'data-garden-version': '8.62.2'
|
|
267
264
|
}).withConfig({
|
|
268
265
|
displayName: "StyledMessage",
|
|
269
266
|
componentId: "sc-30hgg7-0"
|
|
@@ -340,9 +337,9 @@ const sizeStyles$f = props => {
|
|
|
340
337
|
const swatchMarginHorizontal = polished.math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
|
|
341
338
|
return styled.css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", "px;}"], padding, props.isBare ? '1em' : height, reactTheming.getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, props.isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, polished.math(`${swatchMarginHorizontal} * -2`), swatchHeight, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, props.theme.space.base * (props.isCompact ? 1 : 2));
|
|
342
339
|
};
|
|
343
|
-
const StyledTextInput = styled__default
|
|
340
|
+
const StyledTextInput = styled__default.default.input.attrs(props => ({
|
|
344
341
|
'data-garden-id': COMPONENT_ID$D,
|
|
345
|
-
'data-garden-version': '8.62.
|
|
342
|
+
'data-garden-version': '8.62.2',
|
|
346
343
|
'aria-invalid': isInvalid(props.validation)
|
|
347
344
|
})).withConfig({
|
|
348
345
|
displayName: "StyledTextInput",
|
|
@@ -362,10 +359,10 @@ const hiddenStyles = `
|
|
|
362
359
|
left: 0;
|
|
363
360
|
transform: translateZ(0);
|
|
364
361
|
`;
|
|
365
|
-
const StyledTextarea = styled__default
|
|
362
|
+
const StyledTextarea = styled__default.default(StyledTextInput).attrs({
|
|
366
363
|
as: 'textarea',
|
|
367
364
|
'data-garden-id': COMPONENT_ID$C,
|
|
368
|
-
'data-garden-version': '8.62.
|
|
365
|
+
'data-garden-version': '8.62.2'
|
|
369
366
|
}).withConfig({
|
|
370
367
|
displayName: "StyledTextarea",
|
|
371
368
|
componentId: "sc-wxschl-0"
|
|
@@ -396,7 +393,7 @@ const sizeStyles$e = props => {
|
|
|
396
393
|
}
|
|
397
394
|
return styled.css(["margin:", ";width:", ";height:", ";"], margin, size, size);
|
|
398
395
|
};
|
|
399
|
-
const StyledTextMediaFigure = styled__default
|
|
396
|
+
const StyledTextMediaFigure = styled__default.default(
|
|
400
397
|
_ref => {
|
|
401
398
|
let {
|
|
402
399
|
children,
|
|
@@ -408,10 +405,10 @@ _ref => {
|
|
|
408
405
|
theme,
|
|
409
406
|
...props
|
|
410
407
|
} = _ref;
|
|
411
|
-
return
|
|
408
|
+
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
412
409
|
}).attrs({
|
|
413
410
|
'data-garden-id': COMPONENT_ID$B,
|
|
414
|
-
'data-garden-version': '8.62.
|
|
411
|
+
'data-garden-version': '8.62.2'
|
|
415
412
|
}).withConfig({
|
|
416
413
|
displayName: "StyledTextMediaFigure",
|
|
417
414
|
componentId: "sc-1qepknj-0"
|
|
@@ -421,12 +418,12 @@ StyledTextMediaFigure.defaultProps = {
|
|
|
421
418
|
};
|
|
422
419
|
|
|
423
420
|
const COMPONENT_ID$A = 'forms.faux_input';
|
|
424
|
-
const StyledTextFauxInput = styled__default
|
|
421
|
+
const StyledTextFauxInput = styled__default.default(StyledTextInput).attrs(props => ({
|
|
425
422
|
as: 'div',
|
|
426
423
|
'aria-readonly': props.isReadOnly,
|
|
427
424
|
'aria-disabled': props.isDisabled,
|
|
428
425
|
'data-garden-id': COMPONENT_ID$A,
|
|
429
|
-
'data-garden-version': '8.62.
|
|
426
|
+
'data-garden-version': '8.62.2'
|
|
430
427
|
})).withConfig({
|
|
431
428
|
displayName: "StyledTextFauxInput",
|
|
432
429
|
componentId: "sc-yqw7j9-0"
|
|
@@ -436,9 +433,9 @@ StyledTextFauxInput.defaultProps = {
|
|
|
436
433
|
};
|
|
437
434
|
|
|
438
435
|
const COMPONENT_ID$z = 'forms.media_input';
|
|
439
|
-
const StyledTextMediaInput = styled__default
|
|
436
|
+
const StyledTextMediaInput = styled__default.default(StyledTextInput).attrs({
|
|
440
437
|
'data-garden-id': COMPONENT_ID$z,
|
|
441
|
-
'data-garden-version': '8.62.
|
|
438
|
+
'data-garden-version': '8.62.2',
|
|
442
439
|
isBare: true
|
|
443
440
|
}).withConfig({
|
|
444
441
|
displayName: "StyledTextMediaInput",
|
|
@@ -459,9 +456,9 @@ const itemStyles = props => {
|
|
|
459
456
|
const horizontal = props.theme.rtl ? 'right' : 'left';
|
|
460
457
|
return styled.css(["& > *{margin-", ":-", " !important;z-index:-1;}& > ", ":hover,& > button:hover,& > ", "[data-garden-focus-visible],& > button[data-garden-focus-visible],& > ", ":active,& > button:active{z-index:1;}& > button:disabled{border-top-width:0;border-bottom-width:0;}& > ", ":disabled{z-index:-2;}& > *:first-child:not(:last-child){margin-", ":0;border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:last-child:not(:first-child){border-top-", "-radius:0;border-bottom-", "-radius:0;}& > *:not(:first-child):not(:last-child){border-radius:0;}"], horizontal, props.theme.borderWidths.sm, StyledTextInput, StyledTextInput, StyledTextInput, StyledTextInput, props.theme.rtl ? 'right' : 'left', props.theme.rtl ? 'left' : 'right', props.theme.rtl ? 'left' : 'right', props.theme.rtl ? 'right' : 'left', props.theme.rtl ? 'right' : 'left');
|
|
461
458
|
};
|
|
462
|
-
const StyledInputGroup = styled__default
|
|
459
|
+
const StyledInputGroup = styled__default.default.div.attrs({
|
|
463
460
|
'data-garden-id': COMPONENT_ID$y,
|
|
464
|
-
'data-garden-version': '8.62.
|
|
461
|
+
'data-garden-version': '8.62.2'
|
|
465
462
|
}).withConfig({
|
|
466
463
|
displayName: "StyledInputGroup",
|
|
467
464
|
componentId: "sc-kjh1f0-0"
|
|
@@ -477,9 +474,9 @@ const sizeStyles$d = props => {
|
|
|
477
474
|
const lineHeight = props.theme.space.base * 5;
|
|
478
475
|
return styled.css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;line-height:", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size, lineHeight);
|
|
479
476
|
};
|
|
480
|
-
const StyledRadioLabel = styled__default
|
|
477
|
+
const StyledRadioLabel = styled__default.default(StyledLabel).attrs({
|
|
481
478
|
'data-garden-id': COMPONENT_ID$x,
|
|
482
|
-
'data-garden-version': '8.62.
|
|
479
|
+
'data-garden-version': '8.62.2',
|
|
483
480
|
isRadio: true
|
|
484
481
|
}).withConfig({
|
|
485
482
|
displayName: "StyledRadioLabel",
|
|
@@ -490,9 +487,9 @@ StyledRadioLabel.defaultProps = {
|
|
|
490
487
|
};
|
|
491
488
|
|
|
492
489
|
const COMPONENT_ID$w = 'forms.checkbox_label';
|
|
493
|
-
const StyledCheckLabel = styled__default
|
|
490
|
+
const StyledCheckLabel = styled__default.default(StyledRadioLabel).attrs({
|
|
494
491
|
'data-garden-id': COMPONENT_ID$w,
|
|
495
|
-
'data-garden-version': '8.62.
|
|
492
|
+
'data-garden-version': '8.62.2'
|
|
496
493
|
}).withConfig({
|
|
497
494
|
displayName: "StyledCheckLabel",
|
|
498
495
|
componentId: "sc-x7nr1-0"
|
|
@@ -502,9 +499,9 @@ StyledCheckLabel.defaultProps = {
|
|
|
502
499
|
};
|
|
503
500
|
|
|
504
501
|
const COMPONENT_ID$v = 'forms.radio_hint';
|
|
505
|
-
const StyledRadioHint = styled__default
|
|
502
|
+
const StyledRadioHint = styled__default.default(StyledHint).attrs({
|
|
506
503
|
'data-garden-id': COMPONENT_ID$v,
|
|
507
|
-
'data-garden-version': '8.62.
|
|
504
|
+
'data-garden-version': '8.62.2'
|
|
508
505
|
}).withConfig({
|
|
509
506
|
displayName: "StyledRadioHint",
|
|
510
507
|
componentId: "sc-eo8twg-0"
|
|
@@ -514,9 +511,9 @@ StyledRadioHint.defaultProps = {
|
|
|
514
511
|
};
|
|
515
512
|
|
|
516
513
|
const COMPONENT_ID$u = 'forms.checkbox_hint';
|
|
517
|
-
const StyledCheckHint = styled__default
|
|
514
|
+
const StyledCheckHint = styled__default.default(StyledRadioHint).attrs({
|
|
518
515
|
'data-garden-id': COMPONENT_ID$u,
|
|
519
|
-
'data-garden-version': '8.62.
|
|
516
|
+
'data-garden-version': '8.62.2'
|
|
520
517
|
}).withConfig({
|
|
521
518
|
displayName: "StyledCheckHint",
|
|
522
519
|
componentId: "sc-1kl8e8c-0"
|
|
@@ -556,9 +553,9 @@ const sizeStyles$c = props => {
|
|
|
556
553
|
const marginTop = `${props.theme.space.base * (props.isCompact ? 1 : 2)}px`;
|
|
557
554
|
return styled.css(["top:", ";width:", ";height:", ";& ~ ", "::before{top:", ";background-size:", ";width:", ";height:", ";box-sizing:border-box;}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&& ~ ", " ~ ", "{margin-top:", ";}"], top, size, size, StyledRadioLabel, top, props.theme.iconSizes.sm, size, size, StyledRadioLabel, iconTop, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledRadioLabel, StyledMessage, marginTop);
|
|
558
555
|
};
|
|
559
|
-
const StyledRadioInput = styled__default
|
|
556
|
+
const StyledRadioInput = styled__default.default.input.attrs({
|
|
560
557
|
'data-garden-id': COMPONENT_ID$t,
|
|
561
|
-
'data-garden-version': '8.62.
|
|
558
|
+
'data-garden-version': '8.62.2',
|
|
562
559
|
type: 'radio'
|
|
563
560
|
}).withConfig({
|
|
564
561
|
displayName: "StyledRadioInput",
|
|
@@ -578,9 +575,9 @@ const colorStyles$8 = props => {
|
|
|
578
575
|
const indeterminateDisabledBackgroundColor = reactTheming.getColor('neutralHue', SHADE - 400, props.theme);
|
|
579
576
|
return styled.css(["&:indeterminate ~ ", "::before{border-color:", ";background-color:", ";}&:enabled:indeterminate ~ ", ":active::before{border-color:", ";background-color:", ";}&:disabled:indeterminate ~ ", "::before{border-color:transparent;background-color:", ";}"], StyledCheckLabel, indeterminateBorderColor, indeterminateBackgroundColor, StyledCheckLabel, indeterminateActiveBorderColor, indeterminateActiveBackgroundColor, StyledCheckLabel, indeterminateDisabledBackgroundColor);
|
|
580
577
|
};
|
|
581
|
-
const StyledCheckInput = styled__default
|
|
578
|
+
const StyledCheckInput = styled__default.default(StyledRadioInput).attrs({
|
|
582
579
|
'data-garden-id': COMPONENT_ID$s,
|
|
583
|
-
'data-garden-version': '8.62.
|
|
580
|
+
'data-garden-version': '8.62.2',
|
|
584
581
|
type: 'checkbox'
|
|
585
582
|
}).withConfig({
|
|
586
583
|
displayName: "StyledCheckInput",
|
|
@@ -591,9 +588,9 @@ StyledCheckInput.defaultProps = {
|
|
|
591
588
|
};
|
|
592
589
|
|
|
593
590
|
const COMPONENT_ID$r = 'forms.radio_message';
|
|
594
|
-
const StyledRadioMessage = styled__default
|
|
591
|
+
const StyledRadioMessage = styled__default.default(StyledMessage).attrs({
|
|
595
592
|
'data-garden-id': COMPONENT_ID$r,
|
|
596
|
-
'data-garden-version': '8.62.
|
|
593
|
+
'data-garden-version': '8.62.2'
|
|
597
594
|
}).withConfig({
|
|
598
595
|
displayName: "StyledRadioMessage",
|
|
599
596
|
componentId: "sc-1pmi0q8-0"
|
|
@@ -603,9 +600,9 @@ StyledRadioMessage.defaultProps = {
|
|
|
603
600
|
};
|
|
604
601
|
|
|
605
602
|
const COMPONENT_ID$q = 'forms.checkbox_message';
|
|
606
|
-
const StyledCheckMessage = styled__default
|
|
603
|
+
const StyledCheckMessage = styled__default.default(StyledRadioMessage).attrs({
|
|
607
604
|
'data-garden-id': COMPONENT_ID$q,
|
|
608
|
-
'data-garden-version': '8.62.
|
|
605
|
+
'data-garden-version': '8.62.2'
|
|
609
606
|
}).withConfig({
|
|
610
607
|
displayName: "StyledCheckMessage",
|
|
611
608
|
componentId: "sc-s4p6kd-0"
|
|
@@ -638,9 +635,9 @@ var SvgCheckSmFill = function SvgCheckSmFill(props) {
|
|
|
638
635
|
};
|
|
639
636
|
|
|
640
637
|
const COMPONENT_ID$p = 'forms.check_svg';
|
|
641
|
-
const StyledCheckSvg = styled__default
|
|
638
|
+
const StyledCheckSvg = styled__default.default(SvgCheckSmFill).attrs({
|
|
642
639
|
'data-garden-id': COMPONENT_ID$p,
|
|
643
|
-
'data-garden-version': '8.62.
|
|
640
|
+
'data-garden-version': '8.62.2'
|
|
644
641
|
}).withConfig({
|
|
645
642
|
displayName: "StyledCheckSvg",
|
|
646
643
|
componentId: "sc-fvxetk-0"
|
|
@@ -671,9 +668,9 @@ var SvgDashFill = function SvgDashFill(props) {
|
|
|
671
668
|
};
|
|
672
669
|
|
|
673
670
|
const COMPONENT_ID$o = 'forms.dash_svg';
|
|
674
|
-
const StyledDashSvg = styled__default
|
|
671
|
+
const StyledDashSvg = styled__default.default(SvgDashFill).attrs({
|
|
675
672
|
'data-garden-id': COMPONENT_ID$o,
|
|
676
|
-
'data-garden-version': '8.62.
|
|
673
|
+
'data-garden-version': '8.62.2'
|
|
677
674
|
}).withConfig({
|
|
678
675
|
displayName: "StyledDashSvg",
|
|
679
676
|
componentId: "sc-z3vq71-0"
|
|
@@ -700,9 +697,9 @@ const sizeStyles$b = props => {
|
|
|
700
697
|
const lineHeight = reactTheming.getLineHeight(props.theme.space.base * 5, fontSize);
|
|
701
698
|
return styled.css(["padding:", " ", ";min-width:4em;line-height:", ";font-size:", ";", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& + ", "{margin-top:", ";}"], paddingVertical, paddingHorizontal, lineHeight, fontSize, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, marginTop);
|
|
702
699
|
};
|
|
703
|
-
const StyledFileUpload = styled__default
|
|
700
|
+
const StyledFileUpload = styled__default.default.div.attrs({
|
|
704
701
|
'data-garden-id': COMPONENT_ID$n,
|
|
705
|
-
'data-garden-version': '8.62.
|
|
702
|
+
'data-garden-version': '8.62.2'
|
|
706
703
|
}).withConfig({
|
|
707
704
|
displayName: "StyledFileUpload",
|
|
708
705
|
componentId: "sc-1rodjgn-0"
|
|
@@ -712,9 +709,9 @@ StyledFileUpload.defaultProps = {
|
|
|
712
709
|
};
|
|
713
710
|
|
|
714
711
|
const COMPONENT_ID$m = 'forms.file.close';
|
|
715
|
-
const StyledFileClose = styled__default
|
|
712
|
+
const StyledFileClose = styled__default.default.div.attrs({
|
|
716
713
|
'data-garden-id': COMPONENT_ID$m,
|
|
717
|
-
'data-garden-version': '8.62.
|
|
714
|
+
'data-garden-version': '8.62.2'
|
|
718
715
|
}).withConfig({
|
|
719
716
|
displayName: "StyledFileClose",
|
|
720
717
|
componentId: "sc-1m31jbf-0"
|
|
@@ -779,9 +776,9 @@ const sizeStyles$a = props => {
|
|
|
779
776
|
}
|
|
780
777
|
`;
|
|
781
778
|
};
|
|
782
|
-
const StyledFile = styled__default
|
|
779
|
+
const StyledFile = styled__default.default.div.attrs({
|
|
783
780
|
'data-garden-id': COMPONENT_ID$l,
|
|
784
|
-
'data-garden-version': '8.62.
|
|
781
|
+
'data-garden-version': '8.62.2'
|
|
785
782
|
}).withConfig({
|
|
786
783
|
displayName: "StyledFile",
|
|
787
784
|
componentId: "sc-195lzp1-0"
|
|
@@ -791,9 +788,9 @@ StyledFile.defaultProps = {
|
|
|
791
788
|
};
|
|
792
789
|
|
|
793
790
|
const COMPONENT_ID$k = 'forms.file.delete';
|
|
794
|
-
const StyledFileDelete = styled__default
|
|
791
|
+
const StyledFileDelete = styled__default.default(StyledFileClose).attrs({
|
|
795
792
|
'data-garden-id': COMPONENT_ID$k,
|
|
796
|
-
'data-garden-version': '8.62.
|
|
793
|
+
'data-garden-version': '8.62.2'
|
|
797
794
|
}).withConfig({
|
|
798
795
|
displayName: "StyledFileDelete",
|
|
799
796
|
componentId: "sc-a8nnhx-0"
|
|
@@ -803,17 +800,17 @@ StyledFileDelete.defaultProps = {
|
|
|
803
800
|
};
|
|
804
801
|
|
|
805
802
|
const COMPONENT_ID$j = 'forms.file.icon';
|
|
806
|
-
const StyledFileIcon = styled__default
|
|
803
|
+
const StyledFileIcon = styled__default.default(_ref => {
|
|
807
804
|
let {
|
|
808
805
|
children,
|
|
809
806
|
isCompact,
|
|
810
807
|
theme,
|
|
811
808
|
...props
|
|
812
809
|
} = _ref;
|
|
813
|
-
return
|
|
810
|
+
return React__namespace.default.cloneElement(React.Children.only(children), props);
|
|
814
811
|
}).attrs({
|
|
815
812
|
'data-garden-id': COMPONENT_ID$j,
|
|
816
|
-
'data-garden-version': '8.62.
|
|
813
|
+
'data-garden-version': '8.62.2'
|
|
817
814
|
}).withConfig({
|
|
818
815
|
displayName: "StyledFileIcon",
|
|
819
816
|
componentId: "sc-7b3q0c-0"
|
|
@@ -823,9 +820,9 @@ StyledFileIcon.defaultProps = {
|
|
|
823
820
|
};
|
|
824
821
|
|
|
825
822
|
const COMPONENT_ID$i = 'forms.file_list';
|
|
826
|
-
const StyledFileList = styled__default
|
|
823
|
+
const StyledFileList = styled__default.default.ul.attrs({
|
|
827
824
|
'data-garden-id': COMPONENT_ID$i,
|
|
828
|
-
'data-garden-version': '8.62.
|
|
825
|
+
'data-garden-version': '8.62.2'
|
|
829
826
|
}).withConfig({
|
|
830
827
|
displayName: "StyledFileList",
|
|
831
828
|
componentId: "sc-gbahjg-0"
|
|
@@ -835,9 +832,9 @@ StyledFileList.defaultProps = {
|
|
|
835
832
|
};
|
|
836
833
|
|
|
837
834
|
const COMPONENT_ID$h = 'forms.file_list.item';
|
|
838
|
-
const StyledFileListItem = styled__default
|
|
835
|
+
const StyledFileListItem = styled__default.default.li.attrs({
|
|
839
836
|
'data-garden-id': COMPONENT_ID$h,
|
|
840
|
-
'data-garden-version': '8.62.
|
|
837
|
+
'data-garden-version': '8.62.2'
|
|
841
838
|
}).withConfig({
|
|
842
839
|
displayName: "StyledFileListItem",
|
|
843
840
|
componentId: "sc-1ova3lo-0"
|
|
@@ -868,9 +865,9 @@ var SvgCircleSmFill$1 = function SvgCircleSmFill(props) {
|
|
|
868
865
|
};
|
|
869
866
|
|
|
870
867
|
const COMPONENT_ID$g = 'forms.radio_svg';
|
|
871
|
-
const StyledRadioSvg = styled__default
|
|
868
|
+
const StyledRadioSvg = styled__default.default(SvgCircleSmFill$1).attrs({
|
|
872
869
|
'data-garden-id': COMPONENT_ID$g,
|
|
873
|
-
'data-garden-version': '8.62.
|
|
870
|
+
'data-garden-version': '8.62.2'
|
|
874
871
|
}).withConfig({
|
|
875
872
|
displayName: "StyledRadioSvg",
|
|
876
873
|
componentId: "sc-1r1qtr1-0"
|
|
@@ -885,9 +882,9 @@ const sizeStyles$9 = props => {
|
|
|
885
882
|
const padding = size + props.theme.space.base * 2;
|
|
886
883
|
return styled.css(["padding-", ":", "px;&[hidden]{padding-", ":", "px;}"], props.theme.rtl ? 'right' : 'left', padding, props.theme.rtl ? 'right' : 'left', size);
|
|
887
884
|
};
|
|
888
|
-
const StyledToggleLabel = styled__default
|
|
885
|
+
const StyledToggleLabel = styled__default.default(StyledCheckLabel).attrs({
|
|
889
886
|
'data-garden-id': COMPONENT_ID$f,
|
|
890
|
-
'data-garden-version': '8.62.
|
|
887
|
+
'data-garden-version': '8.62.2'
|
|
891
888
|
}).withConfig({
|
|
892
889
|
displayName: "StyledToggleLabel",
|
|
893
890
|
componentId: "sc-e0asdk-0"
|
|
@@ -897,9 +894,9 @@ StyledToggleLabel.defaultProps = {
|
|
|
897
894
|
};
|
|
898
895
|
|
|
899
896
|
const COMPONENT_ID$e = 'forms.toggle_hint';
|
|
900
|
-
const StyledToggleHint = styled__default
|
|
897
|
+
const StyledToggleHint = styled__default.default(StyledHint).attrs({
|
|
901
898
|
'data-garden-id': COMPONENT_ID$e,
|
|
902
|
-
'data-garden-version': '8.62.
|
|
899
|
+
'data-garden-version': '8.62.2'
|
|
903
900
|
}).withConfig({
|
|
904
901
|
displayName: "StyledToggleHint",
|
|
905
902
|
componentId: "sc-nziggu-0"
|
|
@@ -924,9 +921,9 @@ const sizeStyles$8 = props => {
|
|
|
924
921
|
const checkedIconPosition = polished.math(`${width} - ${iconSize} - ${iconPosition}`);
|
|
925
922
|
return styled.css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, props.theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, props.theme.rtl ? 'right' : 'left', checkedIconPosition);
|
|
926
923
|
};
|
|
927
|
-
const StyledToggleInput = styled__default
|
|
924
|
+
const StyledToggleInput = styled__default.default(StyledCheckInput).attrs({
|
|
928
925
|
'data-garden-id': COMPONENT_ID$d,
|
|
929
|
-
'data-garden-version': '8.62.
|
|
926
|
+
'data-garden-version': '8.62.2'
|
|
930
927
|
}).withConfig({
|
|
931
928
|
displayName: "StyledToggleInput",
|
|
932
929
|
componentId: "sc-sgp47s-0"
|
|
@@ -936,9 +933,9 @@ StyledToggleInput.defaultProps = {
|
|
|
936
933
|
};
|
|
937
934
|
|
|
938
935
|
const COMPONENT_ID$c = 'forms.toggle_message';
|
|
939
|
-
const StyledToggleMessage = styled__default
|
|
936
|
+
const StyledToggleMessage = styled__default.default(StyledMessage).attrs({
|
|
940
937
|
'data-garden-id': COMPONENT_ID$c,
|
|
941
|
-
'data-garden-version': '8.62.
|
|
938
|
+
'data-garden-version': '8.62.2'
|
|
942
939
|
}).withConfig({
|
|
943
940
|
displayName: "StyledToggleMessage",
|
|
944
941
|
componentId: "sc-13vuvl1-0"
|
|
@@ -969,9 +966,9 @@ var SvgCircleSmFill = function SvgCircleSmFill(props) {
|
|
|
969
966
|
};
|
|
970
967
|
|
|
971
968
|
const COMPONENT_ID$b = 'forms.toggle_svg';
|
|
972
|
-
const StyledToggleSvg = styled__default
|
|
969
|
+
const StyledToggleSvg = styled__default.default(SvgCircleSmFill).attrs({
|
|
973
970
|
'data-garden-id': COMPONENT_ID$b,
|
|
974
|
-
'data-garden-version': '8.62.
|
|
971
|
+
'data-garden-version': '8.62.2'
|
|
975
972
|
}).withConfig({
|
|
976
973
|
displayName: "StyledToggleSvg",
|
|
977
974
|
componentId: "sc-162xbyx-0"
|
|
@@ -991,9 +988,9 @@ const sizeStyles$7 = props => {
|
|
|
991
988
|
const iconHorizontalPosition = `${props.theme.space.base * 3}px`;
|
|
992
989
|
return styled.css(["padding-", ":", ";& + ", "{top:", ";", ":", ";}"], props.theme.rtl ? 'left' : 'right', !props.isBare && padding, StyledTextMediaFigure, iconVerticalPosition, props.theme.rtl ? 'left' : 'right', iconHorizontalPosition);
|
|
993
990
|
};
|
|
994
|
-
const StyledSelect = styled__default
|
|
991
|
+
const StyledSelect = styled__default.default(StyledTextInput).attrs({
|
|
995
992
|
'data-garden-id': COMPONENT_ID$a,
|
|
996
|
-
'data-garden-version': '8.62.
|
|
993
|
+
'data-garden-version': '8.62.2',
|
|
997
994
|
as: 'select'
|
|
998
995
|
}).withConfig({
|
|
999
996
|
displayName: "StyledSelect",
|
|
@@ -1004,9 +1001,9 @@ StyledSelect.defaultProps = {
|
|
|
1004
1001
|
};
|
|
1005
1002
|
|
|
1006
1003
|
const COMPONENT_ID$9 = 'forms.select_wrapper';
|
|
1007
|
-
const StyledSelectWrapper = styled__default
|
|
1004
|
+
const StyledSelectWrapper = styled__default.default(StyledTextFauxInput).attrs({
|
|
1008
1005
|
'data-garden-id': COMPONENT_ID$9,
|
|
1009
|
-
'data-garden-version': '8.62.
|
|
1006
|
+
'data-garden-version': '8.62.2',
|
|
1010
1007
|
isBare: true
|
|
1011
1008
|
}).withConfig({
|
|
1012
1009
|
displayName: "StyledSelectWrapper",
|
|
@@ -1128,9 +1125,9 @@ const sizeStyles$6 = props => {
|
|
|
1128
1125
|
height: ${trackHeight};
|
|
1129
1126
|
`));
|
|
1130
1127
|
};
|
|
1131
|
-
const StyledRangeInput = styled__default
|
|
1128
|
+
const StyledRangeInput = styled__default.default.input.attrs(props => ({
|
|
1132
1129
|
'data-garden-id': COMPONENT_ID$8,
|
|
1133
|
-
'data-garden-version': '8.62.
|
|
1130
|
+
'data-garden-version': '8.62.2',
|
|
1134
1131
|
type: 'range',
|
|
1135
1132
|
style: {
|
|
1136
1133
|
backgroundSize: props.hasLowerTrack && props.backgroundSize
|
|
@@ -1161,9 +1158,9 @@ StyledRangeInput.defaultProps = {
|
|
|
1161
1158
|
};
|
|
1162
1159
|
|
|
1163
1160
|
const COMPONENT_ID$7 = 'forms.slider';
|
|
1164
|
-
const StyledSlider = styled__default
|
|
1161
|
+
const StyledSlider = styled__default.default.div.attrs({
|
|
1165
1162
|
'data-garden-id': COMPONENT_ID$7,
|
|
1166
|
-
'data-garden-version': '8.62.
|
|
1163
|
+
'data-garden-version': '8.62.2'
|
|
1167
1164
|
}).withConfig({
|
|
1168
1165
|
displayName: "StyledSlider",
|
|
1169
1166
|
componentId: "sc-1di437a-0"
|
|
@@ -1192,9 +1189,9 @@ const sizeStyles$5 = props => {
|
|
|
1192
1189
|
const marginTop = polished.math(`${size} / -2`);
|
|
1193
1190
|
return styled.css(["margin-top:", ";width:", ";height:", ";"], marginTop, size, size);
|
|
1194
1191
|
};
|
|
1195
|
-
const StyledSliderThumb = styled__default
|
|
1192
|
+
const StyledSliderThumb = styled__default.default.div.attrs(props => ({
|
|
1196
1193
|
'data-garden-id': COMPONENT_ID$6,
|
|
1197
|
-
'data-garden-version': '8.62.
|
|
1194
|
+
'data-garden-version': '8.62.2',
|
|
1198
1195
|
'aria-disabled': props.isDisabled
|
|
1199
1196
|
})).withConfig({
|
|
1200
1197
|
displayName: "StyledSliderThumb",
|
|
@@ -1222,9 +1219,9 @@ const sizeStyles$4 = props => {
|
|
|
1222
1219
|
const padding = polished.math(`${props.theme.space.base} * 2.5px`);
|
|
1223
1220
|
return styled.css(["margin-top:", ";border-radius:", ";background-position:", ";background-size:", ";padding:0 ", ";"], marginTop, borderRadius, backgroundPosition, backgroundSize, padding);
|
|
1224
1221
|
};
|
|
1225
|
-
const StyledSliderTrack = styled__default
|
|
1222
|
+
const StyledSliderTrack = styled__default.default.div.attrs(props => ({
|
|
1226
1223
|
'data-garden-id': COMPONENT_ID$5,
|
|
1227
|
-
'data-garden-version': '8.62.
|
|
1224
|
+
'data-garden-version': '8.62.2',
|
|
1228
1225
|
'aria-disabled': props.isDisabled
|
|
1229
1226
|
})).withConfig({
|
|
1230
1227
|
displayName: "StyledSliderTrack",
|
|
@@ -1242,9 +1239,9 @@ const sizeStyles$3 = props => {
|
|
|
1242
1239
|
const margin = polished.math(`${props.theme.space.base} * 2.5px`);
|
|
1243
1240
|
return styled.css(["margin:0 ", " 0 ", ";height:", ";"], props.theme.rtl ? `-${margin}` : margin, props.theme.rtl ? margin : `-${margin}`, height);
|
|
1244
1241
|
};
|
|
1245
|
-
const StyledSliderTrackRail = styled__default
|
|
1242
|
+
const StyledSliderTrackRail = styled__default.default.div.attrs({
|
|
1246
1243
|
'data-garden-id': COMPONENT_ID$4,
|
|
1247
|
-
'data-garden-version': '8.62.
|
|
1244
|
+
'data-garden-version': '8.62.2'
|
|
1248
1245
|
}).withConfig({
|
|
1249
1246
|
displayName: "StyledSliderTrackRail",
|
|
1250
1247
|
componentId: "sc-1o5owbd-0"
|
|
@@ -1269,9 +1266,9 @@ const sizeStyles$2 = props => {
|
|
|
1269
1266
|
}
|
|
1270
1267
|
return styled.css(["position:", ";top:", ";", ";& > *{width:", ";height:", ";}"], position, top, horizontalValue, iconSize, iconSize);
|
|
1271
1268
|
};
|
|
1272
|
-
const StyledTileIcon = styled__default
|
|
1269
|
+
const StyledTileIcon = styled__default.default.span.attrs({
|
|
1273
1270
|
'data-garden-id': COMPONENT_ID$3,
|
|
1274
|
-
'data-garden-version': '8.62.
|
|
1271
|
+
'data-garden-version': '8.62.2'
|
|
1275
1272
|
}).withConfig({
|
|
1276
1273
|
displayName: "StyledTileIcon",
|
|
1277
1274
|
componentId: "sc-1wazhg4-0"
|
|
@@ -1304,9 +1301,9 @@ const colorStyles = props => {
|
|
|
1304
1301
|
const selectedDisabledBackgroundColor = disabledBorderColor;
|
|
1305
1302
|
return styled.css(["border:", " ", ";border-color:", ";background-color:", ";color:", ";", "{color:", ";}&:focus{outline:none;}&:hover:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-focus-visible='true']{border-color:", ";box-shadow:", ";}&:active:not([aria-disabled='true']){border-color:", ";background-color:", ";", "{color:", ";}}&[data-garden-selected='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):hover{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true']:not([aria-disabled='true']):active{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";", "{color:", ";}}&[data-garden-selected='true'][aria-disabled='true']{background-color:", ";color:", ";", "{color:", ";}}"], props.theme.borders.sm, reactTheming.getColor('neutralHue', SHADE - 300, props.theme), borderColor, props.theme.colors.background, color, StyledTileIcon, iconColor, hoverBorderColor, hoverBackgroundColor, StyledTileIcon, color, focusBorderColor, focusBoxShadow, activeBorderColor, activeBackgroundColor, StyledTileIcon, color, selectedBorderColor, selectedBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedHoverBorderColor, selectedHoverBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, selectedActiveBorderColor, selectedActiveBackgroundColor, props.theme.colors.background, StyledTileIcon, props.theme.colors.background, disabledBorderColor, disabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor, selectedDisabledBackgroundColor, disabledColor, StyledTileIcon, disabledColor);
|
|
1306
1303
|
};
|
|
1307
|
-
const StyledTile = styled__default
|
|
1304
|
+
const StyledTile = styled__default.default.label.attrs(props => ({
|
|
1308
1305
|
'data-garden-id': COMPONENT_ID$2,
|
|
1309
|
-
'data-garden-version': '8.62.
|
|
1306
|
+
'data-garden-version': '8.62.2',
|
|
1310
1307
|
'data-garden-focus-visible': props.isFocused,
|
|
1311
1308
|
'data-garden-selected': props.isSelected
|
|
1312
1309
|
})).withConfig({
|
|
@@ -1329,9 +1326,9 @@ const sizeStyles$1 = props => {
|
|
|
1329
1326
|
}
|
|
1330
1327
|
return styled.css(["margin-top:", "px;margin-", ":", ";"], props.theme.space.base, marginDirection, marginValue);
|
|
1331
1328
|
};
|
|
1332
|
-
const StyledTileDescription = styled__default
|
|
1329
|
+
const StyledTileDescription = styled__default.default.span.attrs({
|
|
1333
1330
|
'data-garden-id': COMPONENT_ID$1,
|
|
1334
|
-
'data-garden-version': '8.62.
|
|
1331
|
+
'data-garden-version': '8.62.2'
|
|
1335
1332
|
}).withConfig({
|
|
1336
1333
|
displayName: "StyledTileDescription",
|
|
1337
1334
|
componentId: "sc-xfuu7u-0"
|
|
@@ -1340,7 +1337,7 @@ StyledTileDescription.defaultProps = {
|
|
|
1340
1337
|
theme: reactTheming.DEFAULT_THEME
|
|
1341
1338
|
};
|
|
1342
1339
|
|
|
1343
|
-
const StyledTileInput = styled__default
|
|
1340
|
+
const StyledTileInput = styled__default.default.input.withConfig({
|
|
1344
1341
|
displayName: "StyledTileInput",
|
|
1345
1342
|
componentId: "sc-1nq2m6q-0"
|
|
1346
1343
|
})(["position:absolute;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
@@ -1362,9 +1359,9 @@ const sizeStyles = props => {
|
|
|
1362
1359
|
}
|
|
1363
1360
|
return styled.css(["margin-top:", ";margin-", ":", ";"], marginTop, marginDirection, marginValue);
|
|
1364
1361
|
};
|
|
1365
|
-
const StyledTileLabel = styled__default
|
|
1362
|
+
const StyledTileLabel = styled__default.default.span.attrs({
|
|
1366
1363
|
'data-garden-id': COMPONENT_ID,
|
|
1367
|
-
'data-garden-version': '8.62.
|
|
1364
|
+
'data-garden-version': '8.62.2'
|
|
1368
1365
|
}).withConfig({
|
|
1369
1366
|
displayName: "StyledTileLabel",
|
|
1370
1367
|
componentId: "sc-1mypv27-0"
|
|
@@ -1373,7 +1370,7 @@ StyledTileLabel.defaultProps = {
|
|
|
1373
1370
|
theme: reactTheming.DEFAULT_THEME
|
|
1374
1371
|
};
|
|
1375
1372
|
|
|
1376
|
-
const Field =
|
|
1373
|
+
const Field = React__namespace.default.forwardRef((props, ref) => {
|
|
1377
1374
|
const [hasHint, setHasHint] = React.useState(false);
|
|
1378
1375
|
const [hasMessage, setHasMessage] = React.useState(false);
|
|
1379
1376
|
const [isLabelActive, setIsLabelActive] = React.useState(false);
|
|
@@ -1408,9 +1405,9 @@ const Field = React__default["default"].forwardRef((props, ref) => {
|
|
|
1408
1405
|
setHasMessage,
|
|
1409
1406
|
multiThumbRangeRef
|
|
1410
1407
|
}), [propGetters, getInputProps, getMessageProps, isLabelActive, isLabelHovered, hasHint, hasMessage]);
|
|
1411
|
-
return
|
|
1408
|
+
return React__namespace.default.createElement(FieldContext.Provider, {
|
|
1412
1409
|
value: fieldProps
|
|
1413
|
-
},
|
|
1410
|
+
}, React__namespace.default.createElement(StyledField, _extends$t({}, props, {
|
|
1414
1411
|
ref: ref
|
|
1415
1412
|
})));
|
|
1416
1413
|
});
|
|
@@ -1424,7 +1421,7 @@ const useFieldsetContext = () => {
|
|
|
1424
1421
|
|
|
1425
1422
|
const LegendComponent = React.forwardRef((props, ref) => {
|
|
1426
1423
|
const fieldsetContext = useFieldsetContext();
|
|
1427
|
-
return
|
|
1424
|
+
return React__namespace.default.createElement(StyledLegend, _extends$t({}, props, fieldsetContext, {
|
|
1428
1425
|
ref: ref
|
|
1429
1426
|
}));
|
|
1430
1427
|
});
|
|
@@ -1435,15 +1432,15 @@ const FieldsetComponent = React.forwardRef((props, ref) => {
|
|
|
1435
1432
|
const fieldsetContext = React.useMemo(() => ({
|
|
1436
1433
|
isCompact: props.isCompact
|
|
1437
1434
|
}), [props.isCompact]);
|
|
1438
|
-
return
|
|
1435
|
+
return React__namespace.default.createElement(FieldsetContext.Provider, {
|
|
1439
1436
|
value: fieldsetContext
|
|
1440
|
-
},
|
|
1437
|
+
}, React__namespace.default.createElement(StyledFieldset, _extends$t({}, props, {
|
|
1441
1438
|
ref: ref
|
|
1442
1439
|
})));
|
|
1443
1440
|
});
|
|
1444
1441
|
FieldsetComponent.displayName = 'Fieldset';
|
|
1445
1442
|
FieldsetComponent.propTypes = {
|
|
1446
|
-
isCompact: PropTypes__default
|
|
1443
|
+
isCompact: PropTypes__default.default.bool
|
|
1447
1444
|
};
|
|
1448
1445
|
const Fieldset = FieldsetComponent;
|
|
1449
1446
|
Fieldset.Legend = Legend;
|
|
@@ -1453,7 +1450,7 @@ const useInputContext = () => {
|
|
|
1453
1450
|
return React.useContext(InputContext);
|
|
1454
1451
|
};
|
|
1455
1452
|
|
|
1456
|
-
const Hint =
|
|
1453
|
+
const Hint = React__namespace.default.forwardRef((props, ref) => {
|
|
1457
1454
|
const {
|
|
1458
1455
|
hasHint,
|
|
1459
1456
|
setHasHint,
|
|
@@ -1484,13 +1481,13 @@ const Hint = React__default["default"].forwardRef((props, ref) => {
|
|
|
1484
1481
|
if (getHintProps) {
|
|
1485
1482
|
combinedProps = getHintProps(combinedProps);
|
|
1486
1483
|
}
|
|
1487
|
-
return
|
|
1484
|
+
return React__namespace.default.createElement(HintComponent, _extends$t({
|
|
1488
1485
|
ref: ref
|
|
1489
1486
|
}, combinedProps));
|
|
1490
1487
|
});
|
|
1491
1488
|
Hint.displayName = 'Hint';
|
|
1492
1489
|
|
|
1493
|
-
const Label$1 =
|
|
1490
|
+
const Label$1 = React__namespace.default.forwardRef((props, ref) => {
|
|
1494
1491
|
const fieldContext = useFieldContext();
|
|
1495
1492
|
const fieldsetContext = useFieldsetContext();
|
|
1496
1493
|
const type = useInputContext();
|
|
@@ -1530,9 +1527,9 @@ const Label$1 = React__default["default"].forwardRef((props, ref) => {
|
|
|
1530
1527
|
};
|
|
1531
1528
|
}
|
|
1532
1529
|
if (type === 'radio') {
|
|
1533
|
-
return
|
|
1530
|
+
return React__namespace.default.createElement(StyledRadioLabel, _extends$t({
|
|
1534
1531
|
ref: ref
|
|
1535
|
-
}, combinedProps),
|
|
1532
|
+
}, combinedProps), React__namespace.default.createElement(StyledRadioSvg, null), props.children);
|
|
1536
1533
|
} else if (type === 'checkbox') {
|
|
1537
1534
|
const onLabelSelect = e => {
|
|
1538
1535
|
const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
|
|
@@ -1553,28 +1550,28 @@ const Label$1 = React__default["default"].forwardRef((props, ref) => {
|
|
|
1553
1550
|
...combinedProps,
|
|
1554
1551
|
onClick: containerUtilities.composeEventHandlers(combinedProps.onClick, onLabelSelect)
|
|
1555
1552
|
};
|
|
1556
|
-
return
|
|
1553
|
+
return React__namespace.default.createElement(StyledCheckLabel, _extends$t({
|
|
1557
1554
|
ref: ref
|
|
1558
|
-
}, combinedProps),
|
|
1555
|
+
}, combinedProps), React__namespace.default.createElement(StyledCheckSvg, null), React__namespace.default.createElement(StyledDashSvg, null), props.children);
|
|
1559
1556
|
} else if (type === 'toggle') {
|
|
1560
|
-
return
|
|
1557
|
+
return React__namespace.default.createElement(StyledToggleLabel, _extends$t({
|
|
1561
1558
|
ref: ref
|
|
1562
|
-
}, combinedProps),
|
|
1559
|
+
}, combinedProps), React__namespace.default.createElement(StyledToggleSvg, null), props.children);
|
|
1563
1560
|
}
|
|
1564
|
-
return
|
|
1561
|
+
return React__namespace.default.createElement(StyledLabel, _extends$t({
|
|
1565
1562
|
ref: ref
|
|
1566
1563
|
}, combinedProps));
|
|
1567
1564
|
});
|
|
1568
1565
|
Label$1.displayName = 'Label';
|
|
1569
1566
|
Label$1.propTypes = {
|
|
1570
|
-
isRegular: PropTypes__default
|
|
1567
|
+
isRegular: PropTypes__default.default.bool
|
|
1571
1568
|
};
|
|
1572
1569
|
|
|
1573
1570
|
const VALIDATION = ['success', 'warning', 'error'];
|
|
1574
1571
|
const FILE_VALIDATION = ['success', 'error'];
|
|
1575
1572
|
const FILE_TYPE = ['pdf', 'zip', 'image', 'document', 'spreadsheet', 'presentation', 'generic'];
|
|
1576
1573
|
|
|
1577
|
-
const Message =
|
|
1574
|
+
const Message = React__namespace.default.forwardRef((_ref, ref) => {
|
|
1578
1575
|
let {
|
|
1579
1576
|
validation,
|
|
1580
1577
|
validationLabel,
|
|
@@ -1616,20 +1613,20 @@ const Message = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1616
1613
|
combinedProps = getMessageProps(combinedProps);
|
|
1617
1614
|
}
|
|
1618
1615
|
const ariaLabel = reactTheming.useText(Message, combinedProps, 'validationLabel', validation);
|
|
1619
|
-
return
|
|
1616
|
+
return React__namespace.default.createElement(MessageComponent, _extends$t({
|
|
1620
1617
|
ref: ref
|
|
1621
|
-
}, combinedProps), validation &&
|
|
1618
|
+
}, combinedProps), validation && React__namespace.default.createElement(StyledMessageIcon, {
|
|
1622
1619
|
validation: validation,
|
|
1623
1620
|
"aria-label": ariaLabel
|
|
1624
1621
|
}), children);
|
|
1625
1622
|
});
|
|
1626
1623
|
Message.displayName = 'Message';
|
|
1627
1624
|
Message.propTypes = {
|
|
1628
|
-
validation: PropTypes__default
|
|
1629
|
-
validationLabel: PropTypes__default
|
|
1625
|
+
validation: PropTypes__default.default.oneOf(VALIDATION),
|
|
1626
|
+
validationLabel: PropTypes__default.default.string
|
|
1630
1627
|
};
|
|
1631
1628
|
|
|
1632
|
-
const Checkbox =
|
|
1629
|
+
const Checkbox = React__namespace.default.forwardRef((_ref, ref) => {
|
|
1633
1630
|
let {
|
|
1634
1631
|
indeterminate,
|
|
1635
1632
|
children,
|
|
@@ -1659,14 +1656,14 @@ const Checkbox = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1659
1656
|
if (fieldContext) {
|
|
1660
1657
|
combinedProps = fieldContext.getInputProps(combinedProps);
|
|
1661
1658
|
}
|
|
1662
|
-
return
|
|
1659
|
+
return React__namespace.default.createElement(InputContext.Provider, {
|
|
1663
1660
|
value: "checkbox"
|
|
1664
|
-
},
|
|
1661
|
+
}, React__namespace.default.createElement(StyledCheckInput, combinedProps), children);
|
|
1665
1662
|
});
|
|
1666
1663
|
Checkbox.displayName = 'Checkbox';
|
|
1667
1664
|
Checkbox.propTypes = {
|
|
1668
|
-
isCompact: PropTypes__default
|
|
1669
|
-
indeterminate: PropTypes__default
|
|
1665
|
+
isCompact: PropTypes__default.default.bool,
|
|
1666
|
+
indeterminate: PropTypes__default.default.bool
|
|
1670
1667
|
};
|
|
1671
1668
|
|
|
1672
1669
|
const InputGroupContext = React.createContext(undefined);
|
|
@@ -1674,7 +1671,7 @@ const useInputGroupContext = () => {
|
|
|
1674
1671
|
return React.useContext(InputGroupContext);
|
|
1675
1672
|
};
|
|
1676
1673
|
|
|
1677
|
-
const Input =
|
|
1674
|
+
const Input = React__namespace.default.forwardRef((_ref, ref) => {
|
|
1678
1675
|
let {
|
|
1679
1676
|
onSelect,
|
|
1680
1677
|
...props
|
|
@@ -1699,17 +1696,17 @@ const Input = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1699
1696
|
if (fieldContext) {
|
|
1700
1697
|
combinedProps = fieldContext.getInputProps(combinedProps);
|
|
1701
1698
|
}
|
|
1702
|
-
return
|
|
1699
|
+
return React__namespace.default.createElement(StyledTextInput, combinedProps);
|
|
1703
1700
|
});
|
|
1704
1701
|
Input.propTypes = {
|
|
1705
|
-
isCompact: PropTypes__default
|
|
1706
|
-
isBare: PropTypes__default
|
|
1707
|
-
focusInset: PropTypes__default
|
|
1708
|
-
validation: PropTypes__default
|
|
1702
|
+
isCompact: PropTypes__default.default.bool,
|
|
1703
|
+
isBare: PropTypes__default.default.bool,
|
|
1704
|
+
focusInset: PropTypes__default.default.bool,
|
|
1705
|
+
validation: PropTypes__default.default.oneOf(VALIDATION)
|
|
1709
1706
|
};
|
|
1710
1707
|
Input.displayName = 'Input';
|
|
1711
1708
|
|
|
1712
|
-
const Radio =
|
|
1709
|
+
const Radio = React__namespace.default.forwardRef((_ref, ref) => {
|
|
1713
1710
|
let {
|
|
1714
1711
|
children,
|
|
1715
1712
|
...props
|
|
@@ -1724,16 +1721,16 @@ const Radio = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1724
1721
|
if (fieldContext) {
|
|
1725
1722
|
combinedProps = fieldContext.getInputProps(combinedProps);
|
|
1726
1723
|
}
|
|
1727
|
-
return
|
|
1724
|
+
return React__namespace.default.createElement(InputContext.Provider, {
|
|
1728
1725
|
value: "radio"
|
|
1729
|
-
},
|
|
1726
|
+
}, React__namespace.default.createElement(StyledRadioInput, combinedProps), children);
|
|
1730
1727
|
});
|
|
1731
1728
|
Radio.displayName = 'Radio';
|
|
1732
1729
|
Radio.propTypes = {
|
|
1733
|
-
isCompact: PropTypes__default
|
|
1730
|
+
isCompact: PropTypes__default.default.bool
|
|
1734
1731
|
};
|
|
1735
1732
|
|
|
1736
|
-
const Range =
|
|
1733
|
+
const Range = React__namespace.default.forwardRef((_ref, ref) => {
|
|
1737
1734
|
let {
|
|
1738
1735
|
hasLowerTrack,
|
|
1739
1736
|
min,
|
|
@@ -1763,7 +1760,7 @@ const Range = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1763
1760
|
updateBackgroundWidthFromInput(event.target);
|
|
1764
1761
|
}) : props.onChange;
|
|
1765
1762
|
let combinedProps = {
|
|
1766
|
-
ref: mergeRefs__default
|
|
1763
|
+
ref: mergeRefs__default.default([rangeRef, ref]),
|
|
1767
1764
|
hasLowerTrack,
|
|
1768
1765
|
min,
|
|
1769
1766
|
max,
|
|
@@ -1777,7 +1774,7 @@ const Range = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1777
1774
|
isDescribed: true
|
|
1778
1775
|
});
|
|
1779
1776
|
}
|
|
1780
|
-
return
|
|
1777
|
+
return React__namespace.default.createElement(StyledRangeInput, combinedProps);
|
|
1781
1778
|
});
|
|
1782
1779
|
Range.defaultProps = {
|
|
1783
1780
|
hasLowerTrack: true,
|
|
@@ -1790,7 +1787,7 @@ Range.displayName = 'Range';
|
|
|
1790
1787
|
const parseStyleValue = value => {
|
|
1791
1788
|
return parseInt(value, 10) || 0;
|
|
1792
1789
|
};
|
|
1793
|
-
const Textarea =
|
|
1790
|
+
const Textarea = React__namespace.default.forwardRef((_ref, ref) => {
|
|
1794
1791
|
let {
|
|
1795
1792
|
minRows,
|
|
1796
1793
|
maxRows,
|
|
@@ -1859,7 +1856,7 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1859
1856
|
}
|
|
1860
1857
|
if (environment) {
|
|
1861
1858
|
const win = environment.defaultView || window;
|
|
1862
|
-
const resizeHandler = debounce__default
|
|
1859
|
+
const resizeHandler = debounce__default.default(calculateHeight);
|
|
1863
1860
|
win.addEventListener('resize', resizeHandler);
|
|
1864
1861
|
return () => {
|
|
1865
1862
|
resizeHandler.cancel();
|
|
@@ -1880,7 +1877,7 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1880
1877
|
event.currentTarget.select();
|
|
1881
1878
|
}) : onSelect;
|
|
1882
1879
|
let combinedProps = {
|
|
1883
|
-
ref: mergeRefs__default
|
|
1880
|
+
ref: mergeRefs__default.default([textAreaRef, ref]),
|
|
1884
1881
|
rows: minRows,
|
|
1885
1882
|
onChange: onChangeHandler,
|
|
1886
1883
|
onSelect: onSelectHandler,
|
|
@@ -1895,7 +1892,7 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1895
1892
|
isDescribed: true
|
|
1896
1893
|
});
|
|
1897
1894
|
}
|
|
1898
|
-
return
|
|
1895
|
+
return React__namespace.default.createElement(React__namespace.default.Fragment, null, React__namespace.default.createElement(StyledTextarea, combinedProps), isAutoResizable && React__namespace.default.createElement(StyledTextarea, {
|
|
1899
1896
|
"aria-hidden": true,
|
|
1900
1897
|
readOnly: true,
|
|
1901
1898
|
isHidden: true,
|
|
@@ -1908,17 +1905,17 @@ const Textarea = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1908
1905
|
}));
|
|
1909
1906
|
});
|
|
1910
1907
|
Textarea.propTypes = {
|
|
1911
|
-
isCompact: PropTypes__default
|
|
1912
|
-
isBare: PropTypes__default
|
|
1913
|
-
focusInset: PropTypes__default
|
|
1914
|
-
isResizable: PropTypes__default
|
|
1915
|
-
minRows: PropTypes__default
|
|
1916
|
-
maxRows: PropTypes__default
|
|
1917
|
-
validation: PropTypes__default
|
|
1908
|
+
isCompact: PropTypes__default.default.bool,
|
|
1909
|
+
isBare: PropTypes__default.default.bool,
|
|
1910
|
+
focusInset: PropTypes__default.default.bool,
|
|
1911
|
+
isResizable: PropTypes__default.default.bool,
|
|
1912
|
+
minRows: PropTypes__default.default.number,
|
|
1913
|
+
maxRows: PropTypes__default.default.number,
|
|
1914
|
+
validation: PropTypes__default.default.oneOf(VALIDATION)
|
|
1918
1915
|
};
|
|
1919
1916
|
Textarea.displayName = 'Textarea';
|
|
1920
1917
|
|
|
1921
|
-
const Toggle =
|
|
1918
|
+
const Toggle = React__namespace.default.forwardRef((_ref, ref) => {
|
|
1922
1919
|
let {
|
|
1923
1920
|
children,
|
|
1924
1921
|
...props
|
|
@@ -1933,13 +1930,13 @@ const Toggle = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
1933
1930
|
if (fieldContext) {
|
|
1934
1931
|
combinedProps = fieldContext.getInputProps(combinedProps);
|
|
1935
1932
|
}
|
|
1936
|
-
return
|
|
1933
|
+
return React__namespace.default.createElement(InputContext.Provider, {
|
|
1937
1934
|
value: "toggle"
|
|
1938
|
-
},
|
|
1935
|
+
}, React__namespace.default.createElement(StyledToggleInput, combinedProps), children);
|
|
1939
1936
|
});
|
|
1940
1937
|
Toggle.displayName = 'Toggle';
|
|
1941
1938
|
Toggle.propTypes = {
|
|
1942
|
-
isCompact: PropTypes__default
|
|
1939
|
+
isCompact: PropTypes__default.default.bool
|
|
1943
1940
|
};
|
|
1944
1941
|
|
|
1945
1942
|
var _path$k;
|
|
@@ -1961,13 +1958,13 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
|
1961
1958
|
})));
|
|
1962
1959
|
};
|
|
1963
1960
|
|
|
1964
|
-
const StartIconComponent = props =>
|
|
1961
|
+
const StartIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, _extends$t({
|
|
1965
1962
|
position: "start"
|
|
1966
1963
|
}, props));
|
|
1967
1964
|
StartIconComponent.displayName = 'FauxInput.StartIcon';
|
|
1968
1965
|
const StartIcon = StartIconComponent;
|
|
1969
1966
|
|
|
1970
|
-
const EndIconComponent = props =>
|
|
1967
|
+
const EndIconComponent = props => React__namespace.default.createElement(StyledTextMediaFigure, _extends$t({
|
|
1971
1968
|
position: "end"
|
|
1972
1969
|
}, props));
|
|
1973
1970
|
EndIconComponent.displayName = 'FauxInput.EndIcon';
|
|
@@ -1989,7 +1986,7 @@ const FauxInputComponent = React.forwardRef((_ref, ref) => {
|
|
|
1989
1986
|
const onBlurHandler = containerUtilities.composeEventHandlers(onBlur, () => {
|
|
1990
1987
|
setIsFocused(false);
|
|
1991
1988
|
});
|
|
1992
|
-
return
|
|
1989
|
+
return React__namespace.default.createElement(StyledTextFauxInput, _extends$t({
|
|
1993
1990
|
onFocus: onFocusHandler,
|
|
1994
1991
|
onBlur: onBlurHandler,
|
|
1995
1992
|
isFocused: controlledIsFocused === undefined ? isFocused : controlledIsFocused,
|
|
@@ -2002,20 +1999,20 @@ const FauxInputComponent = React.forwardRef((_ref, ref) => {
|
|
|
2002
1999
|
});
|
|
2003
2000
|
FauxInputComponent.displayName = 'FauxInput';
|
|
2004
2001
|
FauxInputComponent.propTypes = {
|
|
2005
|
-
isCompact: PropTypes__default
|
|
2006
|
-
isBare: PropTypes__default
|
|
2007
|
-
focusInset: PropTypes__default
|
|
2008
|
-
disabled: PropTypes__default
|
|
2009
|
-
readOnly: PropTypes__default
|
|
2010
|
-
validation: PropTypes__default
|
|
2011
|
-
isFocused: PropTypes__default
|
|
2012
|
-
isHovered: PropTypes__default
|
|
2002
|
+
isCompact: PropTypes__default.default.bool,
|
|
2003
|
+
isBare: PropTypes__default.default.bool,
|
|
2004
|
+
focusInset: PropTypes__default.default.bool,
|
|
2005
|
+
disabled: PropTypes__default.default.bool,
|
|
2006
|
+
readOnly: PropTypes__default.default.bool,
|
|
2007
|
+
validation: PropTypes__default.default.oneOf(VALIDATION),
|
|
2008
|
+
isFocused: PropTypes__default.default.bool,
|
|
2009
|
+
isHovered: PropTypes__default.default.bool
|
|
2013
2010
|
};
|
|
2014
2011
|
const FauxInput = FauxInputComponent;
|
|
2015
2012
|
FauxInput.EndIcon = EndIcon;
|
|
2016
2013
|
FauxInput.StartIcon = StartIcon;
|
|
2017
2014
|
|
|
2018
|
-
const Select =
|
|
2015
|
+
const Select = React__namespace.default.forwardRef((_ref, ref) => {
|
|
2019
2016
|
let {
|
|
2020
2017
|
disabled,
|
|
2021
2018
|
isCompact,
|
|
@@ -2033,17 +2030,17 @@ const Select = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
2033
2030
|
isDescribed: true
|
|
2034
2031
|
});
|
|
2035
2032
|
}
|
|
2036
|
-
return
|
|
2033
|
+
return React__namespace.default.createElement(StyledSelectWrapper, {
|
|
2037
2034
|
isCompact: isCompact
|
|
2038
|
-
},
|
|
2035
|
+
}, React__namespace.default.createElement(StyledSelect, combinedProps), !props.isBare && React__namespace.default.createElement(FauxInput.EndIcon, {
|
|
2039
2036
|
isDisabled: disabled
|
|
2040
|
-
},
|
|
2037
|
+
}, React__namespace.default.createElement(SvgChevronDownStroke, null)));
|
|
2041
2038
|
});
|
|
2042
2039
|
Select.propTypes = {
|
|
2043
|
-
isCompact: PropTypes__default
|
|
2044
|
-
isBare: PropTypes__default
|
|
2045
|
-
focusInset: PropTypes__default
|
|
2046
|
-
validation: PropTypes__default
|
|
2040
|
+
isCompact: PropTypes__default.default.bool,
|
|
2041
|
+
isBare: PropTypes__default.default.bool,
|
|
2042
|
+
focusInset: PropTypes__default.default.bool,
|
|
2043
|
+
validation: PropTypes__default.default.oneOf(VALIDATION)
|
|
2047
2044
|
};
|
|
2048
2045
|
Select.displayName = 'Select';
|
|
2049
2046
|
|
|
@@ -2109,16 +2106,16 @@ const MultiThumbRange = React.forwardRef((_ref, ref) => {
|
|
|
2109
2106
|
const minPosition = (updatedMinValue - min) / (max - min) * trackRect.width;
|
|
2110
2107
|
const maxPosition = (updatedMaxValue - min) / (max - min) * trackRect.width;
|
|
2111
2108
|
const sliderBackgroundSize = Math.abs(maxPosition) - Math.abs(minPosition);
|
|
2112
|
-
return
|
|
2109
|
+
return React__namespace.default.createElement(StyledSlider, _extends$t({
|
|
2113
2110
|
ref: ref,
|
|
2114
2111
|
onMouseDown: onSliderMouseDown
|
|
2115
|
-
}, props),
|
|
2112
|
+
}, props), React__namespace.default.createElement(StyledSliderTrack, {
|
|
2116
2113
|
backgroundSize: sliderBackgroundSize,
|
|
2117
2114
|
backgroundPosition: theme.rtl ? trackRect.width - maxPosition : minPosition,
|
|
2118
2115
|
isDisabled: disabled
|
|
2119
|
-
},
|
|
2116
|
+
}, React__namespace.default.createElement(StyledSliderTrackRail, _extends$t({}, trackProps, {
|
|
2120
2117
|
ref: trackRailRef
|
|
2121
|
-
}),
|
|
2118
|
+
}), React__namespace.default.createElement(StyledSliderThumb, _extends$t({}, getMinThumbProps({
|
|
2122
2119
|
'aria-label': updatedMinValue
|
|
2123
2120
|
}), {
|
|
2124
2121
|
isDisabled: disabled,
|
|
@@ -2126,7 +2123,7 @@ const MultiThumbRange = React.forwardRef((_ref, ref) => {
|
|
|
2126
2123
|
ref: minThumbRef,
|
|
2127
2124
|
"data-garden-active": isLabelActive,
|
|
2128
2125
|
"data-garden-hover": isLabelHovered
|
|
2129
|
-
})),
|
|
2126
|
+
})), React__namespace.default.createElement(StyledSliderThumb, _extends$t({}, getMaxThumbProps({
|
|
2130
2127
|
'aria-label': updatedMaxValue
|
|
2131
2128
|
}), {
|
|
2132
2129
|
isDisabled: disabled,
|
|
@@ -2136,14 +2133,14 @@ const MultiThumbRange = React.forwardRef((_ref, ref) => {
|
|
|
2136
2133
|
});
|
|
2137
2134
|
MultiThumbRange.displayName = 'MultiThumbRange';
|
|
2138
2135
|
MultiThumbRange.propTypes = {
|
|
2139
|
-
min: PropTypes__default
|
|
2140
|
-
max: PropTypes__default
|
|
2141
|
-
minValue: PropTypes__default
|
|
2142
|
-
maxValue: PropTypes__default
|
|
2143
|
-
step: PropTypes__default
|
|
2144
|
-
jump: PropTypes__default
|
|
2145
|
-
disabled: PropTypes__default
|
|
2146
|
-
onChange: PropTypes__default
|
|
2136
|
+
min: PropTypes__default.default.number,
|
|
2137
|
+
max: PropTypes__default.default.number,
|
|
2138
|
+
minValue: PropTypes__default.default.number,
|
|
2139
|
+
maxValue: PropTypes__default.default.number,
|
|
2140
|
+
step: PropTypes__default.default.number,
|
|
2141
|
+
jump: PropTypes__default.default.number,
|
|
2142
|
+
disabled: PropTypes__default.default.bool,
|
|
2143
|
+
onChange: PropTypes__default.default.func
|
|
2147
2144
|
};
|
|
2148
2145
|
MultiThumbRange.defaultProps = {
|
|
2149
2146
|
min: MIN,
|
|
@@ -2156,7 +2153,7 @@ const useTilesContext = () => {
|
|
|
2156
2153
|
return React.useContext(TilesContext);
|
|
2157
2154
|
};
|
|
2158
2155
|
|
|
2159
|
-
const TileComponent =
|
|
2156
|
+
const TileComponent = React__namespace.default.forwardRef((_ref, ref) => {
|
|
2160
2157
|
let {
|
|
2161
2158
|
children,
|
|
2162
2159
|
value,
|
|
@@ -2174,13 +2171,13 @@ const TileComponent = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
2174
2171
|
onChange: tilesContext.onChange
|
|
2175
2172
|
};
|
|
2176
2173
|
}
|
|
2177
|
-
return
|
|
2174
|
+
return React__namespace.default.createElement(StyledTile, _extends$t({
|
|
2178
2175
|
ref: ref,
|
|
2179
2176
|
"aria-disabled": disabled,
|
|
2180
2177
|
isDisabled: disabled,
|
|
2181
2178
|
isFocused: isFocused,
|
|
2182
2179
|
isSelected: tilesContext && tilesContext.value === value
|
|
2183
|
-
}, props), children,
|
|
2180
|
+
}, props), children, React__namespace.default.createElement(StyledTileInput, _extends$t({}, inputProps, {
|
|
2184
2181
|
disabled: disabled,
|
|
2185
2182
|
value: value,
|
|
2186
2183
|
onBlur: () => setIsFocused(false),
|
|
@@ -2198,14 +2195,14 @@ const TileComponent = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
2198
2195
|
});
|
|
2199
2196
|
TileComponent.displayName = 'Tiles.Tile';
|
|
2200
2197
|
TileComponent.propTypes = {
|
|
2201
|
-
value: PropTypes__default
|
|
2202
|
-
disabled: PropTypes__default
|
|
2198
|
+
value: PropTypes__default.default.string,
|
|
2199
|
+
disabled: PropTypes__default.default.bool
|
|
2203
2200
|
};
|
|
2204
2201
|
const Tile = TileComponent;
|
|
2205
2202
|
|
|
2206
2203
|
const DescriptionComponent = React.forwardRef((props, ref) => {
|
|
2207
2204
|
const tilesContext = useTilesContext();
|
|
2208
|
-
return
|
|
2205
|
+
return React__namespace.default.createElement(StyledTileDescription, _extends$t({
|
|
2209
2206
|
ref: ref,
|
|
2210
2207
|
isCentered: tilesContext && tilesContext.isCentered
|
|
2211
2208
|
}, props));
|
|
@@ -2215,7 +2212,7 @@ const Description = DescriptionComponent;
|
|
|
2215
2212
|
|
|
2216
2213
|
const IconComponent = React.forwardRef((props, ref) => {
|
|
2217
2214
|
const tileContext = useTilesContext();
|
|
2218
|
-
return
|
|
2215
|
+
return React__namespace.default.createElement(StyledTileIcon, _extends$t({
|
|
2219
2216
|
ref: ref,
|
|
2220
2217
|
isCentered: tileContext && tileContext.isCentered
|
|
2221
2218
|
}, props));
|
|
@@ -2232,8 +2229,8 @@ const LabelComponent = React.forwardRef((props, forwardedRef) => {
|
|
|
2232
2229
|
setTitle(ref.current.textContent || undefined);
|
|
2233
2230
|
}
|
|
2234
2231
|
}, [ref]);
|
|
2235
|
-
return
|
|
2236
|
-
ref: mergeRefs__default
|
|
2232
|
+
return React__namespace.default.createElement(StyledTileLabel, _extends$t({
|
|
2233
|
+
ref: mergeRefs__default.default([ref, forwardedRef]),
|
|
2237
2234
|
title: title,
|
|
2238
2235
|
isCentered: tilesContext && tilesContext.isCentered
|
|
2239
2236
|
}, props));
|
|
@@ -2266,19 +2263,19 @@ const TilesComponent = React.forwardRef((_ref, ref) => {
|
|
|
2266
2263
|
name,
|
|
2267
2264
|
isCentered
|
|
2268
2265
|
}), [handleOnChange, selectedValue, name, isCentered]);
|
|
2269
|
-
return
|
|
2266
|
+
return React__namespace.default.createElement(TilesContext.Provider, {
|
|
2270
2267
|
value: tileContext
|
|
2271
|
-
},
|
|
2268
|
+
}, React__namespace.default.createElement("div", _extends$t({
|
|
2272
2269
|
ref: ref,
|
|
2273
2270
|
role: "radiogroup"
|
|
2274
2271
|
}, props)));
|
|
2275
2272
|
});
|
|
2276
2273
|
TilesComponent.displayName = 'Tiles';
|
|
2277
2274
|
TilesComponent.propTypes = {
|
|
2278
|
-
value: PropTypes__default
|
|
2279
|
-
onChange: PropTypes__default
|
|
2280
|
-
name: PropTypes__default
|
|
2281
|
-
isCentered: PropTypes__default
|
|
2275
|
+
value: PropTypes__default.default.string,
|
|
2276
|
+
onChange: PropTypes__default.default.func,
|
|
2277
|
+
name: PropTypes__default.default.string.isRequired,
|
|
2278
|
+
isCentered: PropTypes__default.default.bool
|
|
2282
2279
|
};
|
|
2283
2280
|
TilesComponent.defaultProps = {
|
|
2284
2281
|
isCentered: true
|
|
@@ -2289,7 +2286,7 @@ Tiles.Icon = Icon;
|
|
|
2289
2286
|
Tiles.Label = Label;
|
|
2290
2287
|
Tiles.Tile = Tile;
|
|
2291
2288
|
|
|
2292
|
-
const InputGroup =
|
|
2289
|
+
const InputGroup = React__namespace.default.forwardRef((_ref, ref) => {
|
|
2293
2290
|
let {
|
|
2294
2291
|
isCompact,
|
|
2295
2292
|
...props
|
|
@@ -2297,32 +2294,34 @@ const InputGroup = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
2297
2294
|
const contextValue = React.useMemo(() => ({
|
|
2298
2295
|
isCompact
|
|
2299
2296
|
}), [isCompact]);
|
|
2300
|
-
return
|
|
2297
|
+
return React__namespace.default.createElement(InputGroupContext.Provider, {
|
|
2301
2298
|
value: contextValue
|
|
2302
|
-
},
|
|
2299
|
+
}, React__namespace.default.createElement(StyledInputGroup, _extends$t({
|
|
2303
2300
|
ref: ref,
|
|
2304
2301
|
isCompact: isCompact
|
|
2305
2302
|
}, props)));
|
|
2306
2303
|
});
|
|
2307
2304
|
InputGroup.displayName = 'InputGroup';
|
|
2308
2305
|
InputGroup.propTypes = {
|
|
2309
|
-
isCompact: PropTypes__default
|
|
2306
|
+
isCompact: PropTypes__default.default.bool
|
|
2310
2307
|
};
|
|
2311
2308
|
|
|
2312
|
-
const FileUpload =
|
|
2309
|
+
const FileUpload = React__namespace.default.forwardRef((_ref, ref) => {
|
|
2313
2310
|
let {
|
|
2314
2311
|
disabled,
|
|
2315
2312
|
...props
|
|
2316
2313
|
} = _ref;
|
|
2317
|
-
return
|
|
2314
|
+
return React__namespace.default.createElement(StyledFileUpload, _extends$t({
|
|
2318
2315
|
ref: ref,
|
|
2319
2316
|
"aria-disabled": disabled
|
|
2320
|
-
}, props
|
|
2317
|
+
}, props, {
|
|
2318
|
+
role: "button"
|
|
2319
|
+
}));
|
|
2321
2320
|
});
|
|
2322
2321
|
FileUpload.propTypes = {
|
|
2323
|
-
isDragging: PropTypes__default
|
|
2324
|
-
isCompact: PropTypes__default
|
|
2325
|
-
disabled: PropTypes__default
|
|
2322
|
+
isDragging: PropTypes__default.default.bool,
|
|
2323
|
+
isCompact: PropTypes__default.default.bool,
|
|
2324
|
+
disabled: PropTypes__default.default.bool
|
|
2326
2325
|
};
|
|
2327
2326
|
FileUpload.displayName = 'FileUpload';
|
|
2328
2327
|
|
|
@@ -2330,7 +2329,7 @@ const ItemComponent = React.forwardRef((_ref, ref) => {
|
|
|
2330
2329
|
let {
|
|
2331
2330
|
...props
|
|
2332
2331
|
} = _ref;
|
|
2333
|
-
return
|
|
2332
|
+
return React__namespace.default.createElement(StyledFileListItem, _extends$t({}, props, {
|
|
2334
2333
|
ref: ref
|
|
2335
2334
|
}));
|
|
2336
2335
|
});
|
|
@@ -2341,7 +2340,7 @@ const FileListComponent = React.forwardRef((_ref, ref) => {
|
|
|
2341
2340
|
let {
|
|
2342
2341
|
...props
|
|
2343
2342
|
} = _ref;
|
|
2344
|
-
return
|
|
2343
|
+
return React__namespace.default.createElement(StyledFileList, _extends$t({}, props, {
|
|
2345
2344
|
ref: ref
|
|
2346
2345
|
}));
|
|
2347
2346
|
});
|
|
@@ -2394,15 +2393,15 @@ const useFileContext = () => {
|
|
|
2394
2393
|
return React.useContext(FileContext);
|
|
2395
2394
|
};
|
|
2396
2395
|
|
|
2397
|
-
const CloseComponent =
|
|
2396
|
+
const CloseComponent = React__namespace.default.forwardRef((props, ref) => {
|
|
2398
2397
|
const fileContext = useFileContext();
|
|
2399
2398
|
const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
|
|
2400
2399
|
);
|
|
2401
|
-
return
|
|
2400
|
+
return React__namespace.default.createElement(StyledFileClose, _extends$t({
|
|
2402
2401
|
ref: ref
|
|
2403
2402
|
}, props, {
|
|
2404
2403
|
onMouseDown: onMouseDown
|
|
2405
|
-
}), fileContext && fileContext.isCompact ?
|
|
2404
|
+
}), fileContext && fileContext.isCompact ? React__namespace.default.createElement(SvgXStroke$1, null) : React__namespace.default.createElement(SvgXStroke, null));
|
|
2406
2405
|
});
|
|
2407
2406
|
CloseComponent.displayName = 'File.Close';
|
|
2408
2407
|
const Close = CloseComponent;
|
|
@@ -2449,15 +2448,15 @@ var SvgTrashStroke = function SvgTrashStroke(props) {
|
|
|
2449
2448
|
})));
|
|
2450
2449
|
};
|
|
2451
2450
|
|
|
2452
|
-
const DeleteComponent =
|
|
2451
|
+
const DeleteComponent = React__namespace.default.forwardRef((props, ref) => {
|
|
2453
2452
|
const fileContext = useFileContext();
|
|
2454
2453
|
const onMouseDown = containerUtilities.composeEventHandlers(props.onMouseDown, event => event.preventDefault()
|
|
2455
2454
|
);
|
|
2456
|
-
return
|
|
2455
|
+
return React__namespace.default.createElement(StyledFileDelete, _extends$t({
|
|
2457
2456
|
ref: ref
|
|
2458
2457
|
}, props, {
|
|
2459
2458
|
onMouseDown: onMouseDown
|
|
2460
|
-
}), fileContext && fileContext.isCompact ?
|
|
2459
|
+
}), fileContext && fileContext.isCompact ? React__namespace.default.createElement(SvgTrashStroke$1, null) : React__namespace.default.createElement(SvgTrashStroke, null));
|
|
2461
2460
|
});
|
|
2462
2461
|
DeleteComponent.displayName = 'File.Delete';
|
|
2463
2462
|
const Delete = DeleteComponent;
|
|
@@ -2849,26 +2848,26 @@ var SvgFileErrorStroke = function SvgFileErrorStroke(props) {
|
|
|
2849
2848
|
};
|
|
2850
2849
|
|
|
2851
2850
|
const fileIconsDefault = {
|
|
2852
|
-
pdf:
|
|
2853
|
-
zip:
|
|
2854
|
-
image:
|
|
2855
|
-
document:
|
|
2856
|
-
spreadsheet:
|
|
2857
|
-
presentation:
|
|
2858
|
-
generic:
|
|
2859
|
-
success:
|
|
2860
|
-
error:
|
|
2851
|
+
pdf: React__namespace.default.createElement(SvgFilePdfStroke, null),
|
|
2852
|
+
zip: React__namespace.default.createElement(SvgFileZipStroke, null),
|
|
2853
|
+
image: React__namespace.default.createElement(SvgFileImageStroke, null),
|
|
2854
|
+
document: React__namespace.default.createElement(SvgFileDocumentStroke, null),
|
|
2855
|
+
spreadsheet: React__namespace.default.createElement(SvgFileSpreadsheetStroke, null),
|
|
2856
|
+
presentation: React__namespace.default.createElement(SvgFilePresentationStroke, null),
|
|
2857
|
+
generic: React__namespace.default.createElement(SvgFileGenericStroke, null),
|
|
2858
|
+
success: React__namespace.default.createElement(SvgCheckCircleStroke$1, null),
|
|
2859
|
+
error: React__namespace.default.createElement(SvgFileErrorStroke, null)
|
|
2861
2860
|
};
|
|
2862
2861
|
const fileIconsCompact = {
|
|
2863
|
-
pdf:
|
|
2864
|
-
zip:
|
|
2865
|
-
image:
|
|
2866
|
-
document:
|
|
2867
|
-
spreadsheet:
|
|
2868
|
-
presentation:
|
|
2869
|
-
generic:
|
|
2870
|
-
success:
|
|
2871
|
-
error:
|
|
2862
|
+
pdf: React__namespace.default.createElement(SvgFilePdfStroke$1, null),
|
|
2863
|
+
zip: React__namespace.default.createElement(SvgFileZipStroke$1, null),
|
|
2864
|
+
image: React__namespace.default.createElement(SvgFileImageStroke$1, null),
|
|
2865
|
+
document: React__namespace.default.createElement(SvgFileDocumentStroke$1, null),
|
|
2866
|
+
spreadsheet: React__namespace.default.createElement(SvgFileSpreadsheetStroke$1, null),
|
|
2867
|
+
presentation: React__namespace.default.createElement(SvgFilePresentationStroke$1, null),
|
|
2868
|
+
generic: React__namespace.default.createElement(SvgFileGenericStroke$1, null),
|
|
2869
|
+
success: React__namespace.default.createElement(SvgCheckCircleStroke, null),
|
|
2870
|
+
error: React__namespace.default.createElement(SvgFileErrorStroke$1, null)
|
|
2872
2871
|
};
|
|
2873
2872
|
|
|
2874
2873
|
const FileComponent = React.forwardRef((_ref, ref) => {
|
|
@@ -2884,29 +2883,29 @@ const FileComponent = React.forwardRef((_ref, ref) => {
|
|
|
2884
2883
|
isCompact
|
|
2885
2884
|
}), [isCompact]);
|
|
2886
2885
|
const validationType = validation || type;
|
|
2887
|
-
return
|
|
2886
|
+
return React__namespace.default.createElement(FileContext.Provider, {
|
|
2888
2887
|
value: fileContextValue
|
|
2889
|
-
},
|
|
2888
|
+
}, React__namespace.default.createElement(StyledFile, _extends$t({}, props, {
|
|
2890
2889
|
isCompact: isCompact,
|
|
2891
2890
|
focusInset: focusInset,
|
|
2892
2891
|
validation: validation,
|
|
2893
2892
|
ref: ref
|
|
2894
|
-
}), validationType &&
|
|
2893
|
+
}), validationType && React__namespace.default.createElement(StyledFileIcon, {
|
|
2895
2894
|
isCompact: isCompact
|
|
2896
|
-
}, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ?
|
|
2895
|
+
}, isCompact ? fileIconsCompact[validationType] : fileIconsDefault[validationType]), React.Children.map(children, child => typeof child === 'string' ? React__namespace.default.createElement("span", null, child) : child)));
|
|
2897
2896
|
});
|
|
2898
2897
|
FileComponent.displayName = 'File';
|
|
2899
2898
|
FileComponent.propTypes = {
|
|
2900
|
-
focusInset: PropTypes__default
|
|
2901
|
-
isCompact: PropTypes__default
|
|
2902
|
-
type: PropTypes__default
|
|
2903
|
-
validation: PropTypes__default
|
|
2899
|
+
focusInset: PropTypes__default.default.bool,
|
|
2900
|
+
isCompact: PropTypes__default.default.bool,
|
|
2901
|
+
type: PropTypes__default.default.oneOf(FILE_TYPE),
|
|
2902
|
+
validation: PropTypes__default.default.oneOf(FILE_VALIDATION)
|
|
2904
2903
|
};
|
|
2905
2904
|
const File = FileComponent;
|
|
2906
2905
|
File.Close = Close;
|
|
2907
2906
|
File.Delete = Delete;
|
|
2908
2907
|
|
|
2909
|
-
const MediaInput =
|
|
2908
|
+
const MediaInput = React__namespace.default.forwardRef((_ref, ref) => {
|
|
2910
2909
|
let {
|
|
2911
2910
|
start,
|
|
2912
2911
|
end,
|
|
@@ -2954,7 +2953,7 @@ const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
2954
2953
|
let combinedProps = {
|
|
2955
2954
|
disabled,
|
|
2956
2955
|
readOnly,
|
|
2957
|
-
ref: mergeRefs__default
|
|
2956
|
+
ref: mergeRefs__default.default([inputRef, ref]),
|
|
2958
2957
|
onSelect: onSelectHandler,
|
|
2959
2958
|
...props
|
|
2960
2959
|
};
|
|
@@ -2965,7 +2964,7 @@ const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
2965
2964
|
});
|
|
2966
2965
|
isLabelHovered = fieldContext.isLabelHovered;
|
|
2967
2966
|
}
|
|
2968
|
-
return
|
|
2967
|
+
return React__namespace.default.createElement(FauxInput, _extends$t({
|
|
2969
2968
|
tabIndex: null,
|
|
2970
2969
|
onClick: onFauxInputClickHandler,
|
|
2971
2970
|
onFocus: onFauxInputFocusHandler,
|
|
@@ -2983,25 +2982,25 @@ const MediaInput = React__default["default"].forwardRef((_ref, ref) => {
|
|
|
2983
2982
|
mediaLayout: true
|
|
2984
2983
|
}, otherWrapperProps, {
|
|
2985
2984
|
ref: wrapperRef
|
|
2986
|
-
}), start &&
|
|
2985
|
+
}), start && React__namespace.default.createElement(FauxInput.StartIcon, {
|
|
2987
2986
|
isDisabled: disabled,
|
|
2988
2987
|
isFocused: isFocused,
|
|
2989
2988
|
isHovered: isHovered || isLabelHovered
|
|
2990
|
-
}, start),
|
|
2989
|
+
}, start), React__namespace.default.createElement(StyledTextMediaInput, combinedProps), end && React__namespace.default.createElement(FauxInput.EndIcon, {
|
|
2991
2990
|
isDisabled: disabled,
|
|
2992
2991
|
isFocused: isFocused,
|
|
2993
2992
|
isHovered: isHovered || isLabelHovered
|
|
2994
2993
|
}, end));
|
|
2995
2994
|
});
|
|
2996
2995
|
MediaInput.propTypes = {
|
|
2997
|
-
isCompact: PropTypes__default
|
|
2998
|
-
isBare: PropTypes__default
|
|
2999
|
-
focusInset: PropTypes__default
|
|
3000
|
-
validation: PropTypes__default
|
|
3001
|
-
start: PropTypes__default
|
|
3002
|
-
end: PropTypes__default
|
|
3003
|
-
wrapperProps: PropTypes__default
|
|
3004
|
-
wrapperRef: PropTypes__default
|
|
2996
|
+
isCompact: PropTypes__default.default.bool,
|
|
2997
|
+
isBare: PropTypes__default.default.bool,
|
|
2998
|
+
focusInset: PropTypes__default.default.bool,
|
|
2999
|
+
validation: PropTypes__default.default.oneOf(VALIDATION),
|
|
3000
|
+
start: PropTypes__default.default.node,
|
|
3001
|
+
end: PropTypes__default.default.node,
|
|
3002
|
+
wrapperProps: PropTypes__default.default.object,
|
|
3003
|
+
wrapperRef: PropTypes__default.default.any
|
|
3005
3004
|
};
|
|
3006
3005
|
MediaInput.displayName = 'MediaInput';
|
|
3007
3006
|
|