pebble-web 2.25.2-alpha.2 → 2.25.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/components/typings/Button.d.ts +0 -1
- package/dist/components/typings/Calendar.d.ts +0 -1
- package/dist/components/typings/CheckboxGroup.d.ts +0 -1
- package/dist/components/typings/Control.d.ts +0 -1
- package/dist/components/typings/DateInput.d.ts +0 -1
- package/dist/components/typings/Dropdown.d.ts +0 -1
- package/dist/components/typings/Input.d.ts +0 -1
- package/dist/components/typings/Loader.d.ts +0 -1
- package/dist/components/typings/Message.d.ts +0 -1
- package/dist/components/typings/OptionGroup.d.ts +0 -1
- package/dist/components/typings/OptionGroupCheckBox.d.ts +0 -1
- package/dist/components/typings/OptionGroupRadio.d.ts +0 -1
- package/dist/components/typings/PhoneNumberInput.d.ts +0 -1
- package/dist/components/typings/RadioGroup.d.ts +0 -1
- package/dist/components/typings/Search.d.ts +0 -1
- package/dist/components/typings/SecondaryInput.d.ts +0 -1
- package/dist/components/typings/Select.d.ts +0 -1
- package/dist/components/typings/Text.d.ts +0 -1
- package/dist/components/typings/Typeahead.d.ts +0 -1
- package/dist/index.d.ts +0 -1
- package/dist/pebble-web.dev.js +160 -333
- package/dist/pebble-web.dev.js.map +1 -1
- package/dist/pebble-web.es.dev.js +66 -216
- package/dist/pebble-web.es.dev.js.map +1 -1
- package/dist/pebble-web.es.js +60 -210
- package/dist/pebble-web.es.js.map +1 -1
- package/dist/pebble-web.js +154 -327
- package/dist/pebble-web.js.map +1 -1
- package/dist/pebble-web.module.dev.js +161 -323
- package/dist/pebble-web.module.dev.js.map +1 -1
- package/dist/pebble-web.module.js +155 -317
- package/dist/pebble-web.module.js.map +1 -1
- package/dist/pebble-web.umd.dev.js +160 -333
- package/dist/pebble-web.umd.dev.js.map +1 -1
- package/dist/pebble-web.umd.js +154 -327
- package/dist/pebble-web.umd.js.map +1 -1
- package/dist/utils/index.d.ts +0 -1
- package/dist/utils/useragent/index.d.ts +1 -2
- package/package.json +1 -2
- package/src/components/Button.tsx +1 -3
- package/src/components/Calendar.tsx +4 -28
- package/src/components/CheckboxGroup.tsx +3 -13
- package/src/components/DateInput.tsx +1 -3
- package/src/components/DropDown.tsx +1 -3
- package/src/components/Input.tsx +3 -15
- package/src/components/Loader.tsx +1 -3
- package/src/components/Message.tsx +1 -3
- package/src/components/NativeDateInput.tsx +1 -2
- package/src/components/OptionGroupCheckBox.tsx +2 -14
- package/src/components/PhoneNumberInput.tsx +1 -7
- package/src/components/RadioGroup.tsx +3 -20
- package/src/components/Search.tsx +1 -3
- package/src/components/SecondaryInput.tsx +2 -9
- package/src/components/Select.tsx +1 -13
- package/src/components/Tabs.tsx +1 -1
- package/src/components/Text.tsx +2 -7
- package/src/components/TimePicker.tsx +2 -2
- package/src/components/Toast.tsx +2 -2
- package/src/components/TypeAhead.tsx +3 -14
- package/src/components/__tests__/__snapshots__/optionGroup.test.tsx.snap +3 -0
- package/src/components/__tests__/__snapshots__/select.test.tsx.snap +0 -3
- package/src/components/__tests__/__snapshots__/timepicker.test.tsx.snap +18 -18
- package/src/components/__tests__/calendar.test.tsx +24 -6
- package/src/components/__tests__/checkboxGroup.test.tsx +8 -39
- package/src/components/__tests__/select.test.tsx +30 -19
- package/src/components/__tests__/timepicker.test.tsx +14 -4
- package/src/components/shared/Control.tsx +1 -3
- package/src/components/shared/OptionGroup.tsx +5 -23
- package/src/components/typings/Button.ts +0 -1
- package/src/components/typings/Calendar.ts +0 -1
- package/src/components/typings/CheckboxGroup.ts +0 -1
- package/src/components/typings/Control.ts +0 -1
- package/src/components/typings/DateInput.ts +0 -1
- package/src/components/typings/Dropdown.ts +0 -1
- package/src/components/typings/Input.ts +0 -1
- package/src/components/typings/Loader.ts +0 -1
- package/src/components/typings/Message.ts +0 -1
- package/src/components/typings/OptionGroup.ts +0 -1
- package/src/components/typings/OptionGroupCheckBox.ts +0 -1
- package/src/components/typings/OptionGroupRadio.ts +0 -1
- package/src/components/typings/PhoneNumberInput.ts +0 -1
- package/src/components/typings/RadioGroup.ts +0 -1
- package/src/components/typings/Search.ts +0 -1
- package/src/components/typings/SecondaryInput.ts +0 -1
- package/src/components/typings/Select.ts +0 -1
- package/src/components/typings/Text.ts +0 -1
- package/src/components/typings/Typeahead.ts +0 -1
- package/src/index.ts +0 -1
- package/src/utils/index.ts +0 -1
- package/src/utils/useragent/index.tsx +1 -1
- package/dist/utils/testIds.d.ts +0 -60
- package/src/components/__tests__/__snapshots__/checkboxGroup.test.tsx.snap +0 -88
- package/src/utils/testIds.ts +0 -111
package/dist/pebble-web.es.js
CHANGED
|
@@ -431,8 +431,7 @@ const spinnerStyle = /*#__PURE__*/css({ ...flexSpaceBetween,
|
|
|
431
431
|
const Loader = ({
|
|
432
432
|
color = colors.gray.darker,
|
|
433
433
|
scale = 1,
|
|
434
|
-
className
|
|
435
|
-
testId
|
|
434
|
+
className
|
|
436
435
|
}) => {
|
|
437
436
|
const style = {
|
|
438
437
|
backgroundColor: color
|
|
@@ -441,8 +440,7 @@ const Loader = ({
|
|
|
441
440
|
className: cx(spinnerStyle, className),
|
|
442
441
|
style: {
|
|
443
442
|
transform: `scale(${scale})`
|
|
444
|
-
}
|
|
445
|
-
"data-testid": testId
|
|
443
|
+
}
|
|
446
444
|
}, /*#__PURE__*/createElement("div", {
|
|
447
445
|
style: style
|
|
448
446
|
}), /*#__PURE__*/createElement("div", {
|
|
@@ -464,8 +462,7 @@ const Button = ({
|
|
|
464
462
|
loading,
|
|
465
463
|
outline,
|
|
466
464
|
size = "small",
|
|
467
|
-
buttonProps
|
|
468
|
-
testId
|
|
465
|
+
buttonProps
|
|
469
466
|
}) => {
|
|
470
467
|
const disableAction = disabled || loading;
|
|
471
468
|
const _outline = size === "x-small" || !!outline;
|
|
@@ -476,8 +473,7 @@ const Button = ({
|
|
|
476
473
|
style: {
|
|
477
474
|
width
|
|
478
475
|
},
|
|
479
|
-
disabled: disabled
|
|
480
|
-
"data-testid": testId
|
|
476
|
+
disabled: disabled
|
|
481
477
|
}, buttonProps), loading ? /*#__PURE__*/createElement(Loader, {
|
|
482
478
|
color: colors.white.base,
|
|
483
479
|
scale: 0.4
|
|
@@ -625,69 +621,6 @@ const buttonsWrapper = /*#__PURE__*/css({ ...flexSpaceBetween,
|
|
|
625
621
|
marginTop: 20
|
|
626
622
|
}, ";label:buttonsWrapper;" + ( "" ));
|
|
627
623
|
|
|
628
|
-
function getTestIds(id, builder) {
|
|
629
|
-
return id ? builder(id) : {};
|
|
630
|
-
}
|
|
631
|
-
function getOptionTestId(id, index) {
|
|
632
|
-
return `${id}-${index}`;
|
|
633
|
-
}
|
|
634
|
-
function getRadioGroupTestIds(id) {
|
|
635
|
-
return {
|
|
636
|
-
optionId: `${id}-option`
|
|
637
|
-
};
|
|
638
|
-
}
|
|
639
|
-
function getOptionGroupTestIds(id) {
|
|
640
|
-
return {
|
|
641
|
-
searchBoxId: `${id}-search`,
|
|
642
|
-
optionId: `${id}-option`,
|
|
643
|
-
selectVisibleId: `${id}-select-visible`,
|
|
644
|
-
clearVisibleId: `${id}-clear-visible`
|
|
645
|
-
};
|
|
646
|
-
}
|
|
647
|
-
const getOptionGroupRadioTestIds = id => getOptionGroupTestIds(id);
|
|
648
|
-
function getOptionGroupCheckBoxTestIds(id) {
|
|
649
|
-
return {
|
|
650
|
-
applyButtonId: `${id}-apply-btn`,
|
|
651
|
-
clearButtonId: `${id}-clear-btn`,
|
|
652
|
-
...getOptionGroupTestIds(id)
|
|
653
|
-
};
|
|
654
|
-
}
|
|
655
|
-
function getPhoneNumberInputTestIds(id) {
|
|
656
|
-
return {
|
|
657
|
-
phoneId: `${id}-phone`,
|
|
658
|
-
countryId: `${id}-country`,
|
|
659
|
-
countryInputIds: getSelectInputTestIds(`${id}-country`)
|
|
660
|
-
};
|
|
661
|
-
}
|
|
662
|
-
function getMessageTestId(id) {
|
|
663
|
-
return `${id}-message`;
|
|
664
|
-
}
|
|
665
|
-
function getSelectInputTestIds(id, multiSelect = false) {
|
|
666
|
-
const optionGroupId = `${id}-option-group`;
|
|
667
|
-
const baseIds = {
|
|
668
|
-
inputId: `${id}-input`,
|
|
669
|
-
optionGroupId
|
|
670
|
-
};
|
|
671
|
-
return { ...(multiSelect ? getOptionGroupCheckBoxTestIds(optionGroupId) : getOptionGroupRadioTestIds(optionGroupId)),
|
|
672
|
-
...baseIds
|
|
673
|
-
};
|
|
674
|
-
}
|
|
675
|
-
function getTypeaheadTestIds(id) {
|
|
676
|
-
const optionGroupId = `${id}-option-group`;
|
|
677
|
-
return {
|
|
678
|
-
optionGroupId,
|
|
679
|
-
...getOptionGroupRadioTestIds(optionGroupId)
|
|
680
|
-
};
|
|
681
|
-
}
|
|
682
|
-
function getCalendarTestIds(id) {
|
|
683
|
-
return {
|
|
684
|
-
leftIconId: `${id}-left-icon`,
|
|
685
|
-
rightIconId: `${id}-right-icon`,
|
|
686
|
-
applyButtonId: `${id}-apply-btn`,
|
|
687
|
-
clearButtonId: `${id}-clear-btn`
|
|
688
|
-
};
|
|
689
|
-
}
|
|
690
|
-
|
|
691
624
|
class Calendar extends PureComponent {
|
|
692
625
|
constructor() {
|
|
693
626
|
super(...arguments);
|
|
@@ -801,18 +734,11 @@ class Calendar extends PureComponent {
|
|
|
801
734
|
onClear,
|
|
802
735
|
maxDate,
|
|
803
736
|
minDate,
|
|
804
|
-
testId,
|
|
805
737
|
...rest
|
|
806
738
|
} = this.props;
|
|
807
739
|
const {
|
|
808
740
|
maxRangeDates
|
|
809
741
|
} = this.state;
|
|
810
|
-
const {
|
|
811
|
-
leftIconId,
|
|
812
|
-
rightIconId,
|
|
813
|
-
clearButtonId,
|
|
814
|
-
applyButtonId
|
|
815
|
-
} = getTestIds(testId, id => getCalendarTestIds(id));
|
|
816
742
|
return /*#__PURE__*/createElement("div", {
|
|
817
743
|
className: cx(wrapperStyle, {
|
|
818
744
|
[/*#__PURE__*/css( {
|
|
@@ -837,15 +763,13 @@ class Calendar extends PureComponent {
|
|
|
837
763
|
style: {
|
|
838
764
|
fontSize: 14
|
|
839
765
|
},
|
|
840
|
-
className: "pi pi-chevron-left"
|
|
841
|
-
"data-testid": leftIconId
|
|
766
|
+
className: "pi pi-chevron-left"
|
|
842
767
|
}),
|
|
843
768
|
nextLabel: /*#__PURE__*/createElement("i", {
|
|
844
769
|
style: {
|
|
845
770
|
fontSize: 14
|
|
846
771
|
},
|
|
847
|
-
className: "pi pi-arrow-right"
|
|
848
|
-
"data-testid": rightIconId
|
|
772
|
+
className: "pi pi-arrow-right"
|
|
849
773
|
}),
|
|
850
774
|
maxDate: maxDate || maxRangeDates && maxRangeDates.future,
|
|
851
775
|
minDate: minDate || maxRangeDates && maxRangeDates.past
|
|
@@ -853,11 +777,9 @@ class Calendar extends PureComponent {
|
|
|
853
777
|
className: buttonsWrapper
|
|
854
778
|
}, onClear && /*#__PURE__*/createElement(Button, {
|
|
855
779
|
onClick: this.onClear,
|
|
856
|
-
type: "secondary"
|
|
857
|
-
testId: clearButtonId
|
|
780
|
+
type: "secondary"
|
|
858
781
|
}, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
|
|
859
|
-
onClick: this.onApply
|
|
860
|
-
testId: applyButtonId
|
|
782
|
+
onClick: this.onApply
|
|
861
783
|
}, "Apply")));
|
|
862
784
|
}
|
|
863
785
|
}
|
|
@@ -895,8 +817,7 @@ function Control(props) {
|
|
|
895
817
|
children = ControlView,
|
|
896
818
|
type,
|
|
897
819
|
className,
|
|
898
|
-
indeterminate
|
|
899
|
-
testId
|
|
820
|
+
indeterminate
|
|
900
821
|
} = props;
|
|
901
822
|
return /*#__PURE__*/createElement("div", {
|
|
902
823
|
className: cx(controlStyle, className),
|
|
@@ -909,8 +830,7 @@ function Control(props) {
|
|
|
909
830
|
onClick: !disabled ? e => onChange && onChange({
|
|
910
831
|
value,
|
|
911
832
|
checked: !checked
|
|
912
|
-
}, e) : undefined
|
|
913
|
-
"data-testid": testId
|
|
833
|
+
}, e) : undefined
|
|
914
834
|
}, children(props));
|
|
915
835
|
}
|
|
916
836
|
const ControlView = ({
|
|
@@ -986,17 +906,14 @@ class CheckboxGroup extends PureComponent {
|
|
|
986
906
|
selected,
|
|
987
907
|
className,
|
|
988
908
|
name,
|
|
989
|
-
disabled
|
|
990
|
-
testId
|
|
909
|
+
disabled
|
|
991
910
|
} = this.props;
|
|
992
|
-
const _children = Children.map(children,
|
|
993
|
-
const index = typeof i === "number" ? i : 0;
|
|
911
|
+
const _children = Children.map(children, _checkbox => {
|
|
994
912
|
const checkbox = _checkbox;
|
|
995
913
|
return cloneElement(checkbox, {
|
|
996
914
|
onChange: this.handleChange,
|
|
997
915
|
checked: selected.indexOf(checkbox.props.value) >= 0,
|
|
998
|
-
disabled
|
|
999
|
-
testId: testId ? getOptionTestId(testId, index) : undefined
|
|
916
|
+
disabled
|
|
1000
917
|
});
|
|
1001
918
|
});
|
|
1002
919
|
return /*#__PURE__*/createElement("div", {
|
|
@@ -1114,8 +1031,7 @@ class DropDown extends PureComponent {
|
|
|
1114
1031
|
disabled,
|
|
1115
1032
|
labelClassName,
|
|
1116
1033
|
controlled,
|
|
1117
|
-
onOutsideClick
|
|
1118
|
-
testId
|
|
1034
|
+
onOutsideClick
|
|
1119
1035
|
} = this.props;
|
|
1120
1036
|
const _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
|
|
1121
1037
|
return /*#__PURE__*/createElement(OutsideClick, {
|
|
@@ -1143,8 +1059,7 @@ class DropDown extends PureComponent {
|
|
|
1143
1059
|
isOpen: _isDropDownOpen,
|
|
1144
1060
|
onClick: this.toggleDropdown,
|
|
1145
1061
|
disabled: disabled,
|
|
1146
|
-
className: labelClassName
|
|
1147
|
-
testId: testId
|
|
1062
|
+
className: labelClassName
|
|
1148
1063
|
}, buttonLabel))), /*#__PURE__*/createElement(MountTransition, {
|
|
1149
1064
|
visible: _isDropDownOpen
|
|
1150
1065
|
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
@@ -1352,8 +1267,7 @@ class Input extends PureComponent {
|
|
|
1352
1267
|
onClick,
|
|
1353
1268
|
loading,
|
|
1354
1269
|
leftElement,
|
|
1355
|
-
rightElement
|
|
1356
|
-
testId
|
|
1270
|
+
rightElement
|
|
1357
1271
|
} = this.props;
|
|
1358
1272
|
const {
|
|
1359
1273
|
isFocused
|
|
@@ -1393,13 +1307,9 @@ class Input extends PureComponent {
|
|
|
1393
1307
|
onClick: onClick
|
|
1394
1308
|
}, /*#__PURE__*/createElement("div", {
|
|
1395
1309
|
className: _inputWrapperClassName
|
|
1396
|
-
}, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps, {
|
|
1397
|
-
"data-testid": testId
|
|
1398
|
-
})) : /*#__PURE__*/createElement("input", Object.assign({
|
|
1310
|
+
}, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps)) : /*#__PURE__*/createElement("input", Object.assign({
|
|
1399
1311
|
type: type
|
|
1400
|
-
}, _inputProps, this.props.inputProps, {
|
|
1401
|
-
"data-testid": testId
|
|
1402
|
-
})), loading && /*#__PURE__*/createElement(Loader, {
|
|
1312
|
+
}, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/createElement(Loader, {
|
|
1403
1313
|
color: colors.violet.base,
|
|
1404
1314
|
scale: 0.6,
|
|
1405
1315
|
className: _loadingStyle
|
|
@@ -1416,7 +1326,6 @@ class Input extends PureComponent {
|
|
|
1416
1326
|
}
|
|
1417
1327
|
}), _message && /*#__PURE__*/createElement("div", {
|
|
1418
1328
|
className: messageStyle,
|
|
1419
|
-
"data-testid": testId ? getMessageTestId(testId) : undefined,
|
|
1420
1329
|
style: {
|
|
1421
1330
|
color: getColor(errorMessage, successMessage)
|
|
1422
1331
|
}
|
|
@@ -1441,8 +1350,7 @@ class NativeDateInput extends PureComponent {
|
|
|
1441
1350
|
inputProps,
|
|
1442
1351
|
placeholder,
|
|
1443
1352
|
value,
|
|
1444
|
-
disabled
|
|
1445
|
-
testId
|
|
1353
|
+
disabled
|
|
1446
1354
|
} = this.props;
|
|
1447
1355
|
return /*#__PURE__*/createElement(Input, Object.assign({
|
|
1448
1356
|
onChange: this.onDateInputChange,
|
|
@@ -1452,8 +1360,7 @@ class NativeDateInput extends PureComponent {
|
|
|
1452
1360
|
placeholder: placeholder,
|
|
1453
1361
|
fixLabelAtTop: true
|
|
1454
1362
|
}, inputProps, {
|
|
1455
|
-
disabled: disabled
|
|
1456
|
-
testId: testId
|
|
1363
|
+
disabled: disabled
|
|
1457
1364
|
}));
|
|
1458
1365
|
}
|
|
1459
1366
|
}
|
|
@@ -1542,8 +1449,7 @@ class DateInput extends PureComponent {
|
|
|
1542
1449
|
initiallyOpen,
|
|
1543
1450
|
onOutsideClick,
|
|
1544
1451
|
controlled,
|
|
1545
|
-
isOpen
|
|
1546
|
-
testId
|
|
1452
|
+
isOpen
|
|
1547
1453
|
} = this.props;
|
|
1548
1454
|
const _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
|
|
1549
1455
|
const _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
|
|
@@ -1575,8 +1481,7 @@ class DateInput extends PureComponent {
|
|
|
1575
1481
|
onChange
|
|
1576
1482
|
},
|
|
1577
1483
|
className: cx(inputStyle$1, inputProps && inputProps.className),
|
|
1578
|
-
disabled: disabled
|
|
1579
|
-
testId: testId
|
|
1484
|
+
disabled: disabled
|
|
1580
1485
|
}))),
|
|
1581
1486
|
className: _wrapperClassName,
|
|
1582
1487
|
placement: placement,
|
|
@@ -1843,11 +1748,11 @@ class Toast extends PureComponent {
|
|
|
1843
1748
|
emitter.emit("hideToast");
|
|
1844
1749
|
}
|
|
1845
1750
|
componentDidMount() {
|
|
1846
|
-
emitter.on("showToast",
|
|
1751
|
+
emitter.on("showToast", this.show);
|
|
1847
1752
|
emitter.on("hideToast", this.hide);
|
|
1848
1753
|
}
|
|
1849
1754
|
componentWillUnmount() {
|
|
1850
|
-
emitter.off("showToast",
|
|
1755
|
+
emitter.off("showToast", this.show);
|
|
1851
1756
|
emitter.off("hideToast", this.hide);
|
|
1852
1757
|
}
|
|
1853
1758
|
render() {
|
|
@@ -1904,8 +1809,7 @@ const messageWrapper = /*#__PURE__*/css({
|
|
|
1904
1809
|
const Message = ({
|
|
1905
1810
|
intent,
|
|
1906
1811
|
className,
|
|
1907
|
-
text
|
|
1908
|
-
testId
|
|
1812
|
+
text
|
|
1909
1813
|
}) => {
|
|
1910
1814
|
const bColor = _colors[intent];
|
|
1911
1815
|
const iconClass = cx("pi", {
|
|
@@ -1916,8 +1820,7 @@ const Message = ({
|
|
|
1916
1820
|
className: cx(messageWrapper, className),
|
|
1917
1821
|
style: {
|
|
1918
1822
|
backgroundColor: bColor
|
|
1919
|
-
}
|
|
1920
|
-
"data-testid": testId
|
|
1823
|
+
}
|
|
1921
1824
|
}, /*#__PURE__*/createElement("i", {
|
|
1922
1825
|
className: iconClass
|
|
1923
1826
|
}), text);
|
|
@@ -2132,8 +2035,7 @@ class Search extends PureComponent {
|
|
|
2132
2035
|
className,
|
|
2133
2036
|
clearable,
|
|
2134
2037
|
value,
|
|
2135
|
-
loading
|
|
2136
|
-
testId
|
|
2038
|
+
loading
|
|
2137
2039
|
} = this.props;
|
|
2138
2040
|
const wrapperClassName = cx(searchWrapperStyle, {
|
|
2139
2041
|
__pebble__search__small: type === "small",
|
|
@@ -2154,9 +2056,7 @@ class Search extends PureComponent {
|
|
|
2154
2056
|
},
|
|
2155
2057
|
ref: this.searchInputRef,
|
|
2156
2058
|
value: value
|
|
2157
|
-
}, inputProps, {
|
|
2158
|
-
"data-testid": testId
|
|
2159
|
-
})), loading && /*#__PURE__*/createElement(Loader, {
|
|
2059
|
+
}, inputProps)), loading && /*#__PURE__*/createElement(Loader, {
|
|
2160
2060
|
scale: 0.4,
|
|
2161
2061
|
color: colors.violet.base
|
|
2162
2062
|
}), clearable && /*#__PURE__*/createElement("div", {
|
|
@@ -2299,14 +2199,12 @@ class OptionGroup extends PureComponent {
|
|
|
2299
2199
|
className,
|
|
2300
2200
|
isSelected,
|
|
2301
2201
|
handleChange,
|
|
2302
|
-
searchBoxProps
|
|
2303
|
-
testId
|
|
2202
|
+
searchBoxProps
|
|
2304
2203
|
} = this.props;
|
|
2305
2204
|
const {
|
|
2306
2205
|
isScrolled,
|
|
2307
2206
|
highlighted
|
|
2308
2207
|
} = this.state;
|
|
2309
|
-
const testIds = getTestIds(testId, getOptionGroupTestIds);
|
|
2310
2208
|
const _children = Children.map(children, (_option, i) => {
|
|
2311
2209
|
const option = _option;
|
|
2312
2210
|
let ref = this.optionsRefsSet.get(i);
|
|
@@ -2319,8 +2217,7 @@ class OptionGroup extends PureComponent {
|
|
|
2319
2217
|
isActive: highlighted === i,
|
|
2320
2218
|
isSelected: isSelected(option.props.value),
|
|
2321
2219
|
multiSelect,
|
|
2322
|
-
ref
|
|
2323
|
-
testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
|
|
2220
|
+
ref
|
|
2324
2221
|
});
|
|
2325
2222
|
});
|
|
2326
2223
|
const searchBoxClassName = cx(searchBoxWrapper, {
|
|
@@ -2335,8 +2232,7 @@ class OptionGroup extends PureComponent {
|
|
|
2335
2232
|
inputProps: { ...(searchBoxProps && searchBoxProps.inputProps),
|
|
2336
2233
|
onKeyDown: this.handleKeyPress,
|
|
2337
2234
|
autoFocus: true
|
|
2338
|
-
}
|
|
2339
|
-
testId: testIds.searchBoxId
|
|
2235
|
+
}
|
|
2340
2236
|
}))), !!Children.count(children) && /*#__PURE__*/createElement("div", {
|
|
2341
2237
|
ref: this.optionRef,
|
|
2342
2238
|
style: {
|
|
@@ -2344,16 +2240,14 @@ class OptionGroup extends PureComponent {
|
|
|
2344
2240
|
},
|
|
2345
2241
|
className: cx(optionsWrapper, className),
|
|
2346
2242
|
role: multiSelect ? "group" : "radiogroup",
|
|
2347
|
-
"data-
|
|
2243
|
+
"data-test-id": "optiongroup",
|
|
2348
2244
|
"aria-label": searchBoxProps && searchBoxProps.placeholder
|
|
2349
2245
|
}, advancedOptions && advancedOptionsProps && /*#__PURE__*/createElement("div", {
|
|
2350
2246
|
className: _class
|
|
2351
2247
|
}, /*#__PURE__*/createElement("div", {
|
|
2352
|
-
onClick: advancedOptionsProps.selectVisible
|
|
2353
|
-
"data-testid": testIds.selectVisibleId
|
|
2248
|
+
onClick: advancedOptionsProps.selectVisible
|
|
2354
2249
|
}, "Select Visible"), /*#__PURE__*/createElement("div", {
|
|
2355
|
-
onClick: advancedOptionsProps.clearVisible
|
|
2356
|
-
"data-testid": testIds.clearVisibleId
|
|
2250
|
+
onClick: advancedOptionsProps.clearVisible
|
|
2357
2251
|
}, "Clear Visible")), _children));
|
|
2358
2252
|
}
|
|
2359
2253
|
}
|
|
@@ -2418,7 +2312,6 @@ class OptionGroupCheckBox extends PureComponent {
|
|
|
2418
2312
|
onClear,
|
|
2419
2313
|
isSelected,
|
|
2420
2314
|
onChange,
|
|
2421
|
-
testId,
|
|
2422
2315
|
...rest
|
|
2423
2316
|
} = this.props;
|
|
2424
2317
|
const advancedOptionsProps = {
|
|
@@ -2426,24 +2319,20 @@ class OptionGroupCheckBox extends PureComponent {
|
|
|
2426
2319
|
clearVisible: this.clearVisible,
|
|
2427
2320
|
...this.props.advancedOptionsProps
|
|
2428
2321
|
};
|
|
2429
|
-
const testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
|
|
2430
2322
|
return /*#__PURE__*/createElement("div", {
|
|
2431
2323
|
className: cx(optionGroupCheckBoxWrap, wrapClassName)
|
|
2432
2324
|
}, /*#__PURE__*/createElement(OptionGroup, Object.assign({}, rest, {
|
|
2433
2325
|
advancedOptionsProps: advancedOptionsProps,
|
|
2434
2326
|
isSelected: isSelected || this.isSelected,
|
|
2435
2327
|
handleChange: this.handleChange,
|
|
2436
|
-
multiSelect: true
|
|
2437
|
-
testId: testId
|
|
2328
|
+
multiSelect: true
|
|
2438
2329
|
})), (onApply || onClear) && /*#__PURE__*/createElement("div", {
|
|
2439
2330
|
className: optionGroupCheckBoxButtonWrap
|
|
2440
2331
|
}, onClear && /*#__PURE__*/createElement(Button, {
|
|
2441
2332
|
type: "secondary",
|
|
2442
|
-
onClick: onClear
|
|
2443
|
-
testId: testIds.clearButtonId
|
|
2333
|
+
onClick: onClear
|
|
2444
2334
|
}, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
|
|
2445
|
-
onClick: this.onApply
|
|
2446
|
-
testId: testIds.applyButtonId
|
|
2335
|
+
onClick: this.onApply
|
|
2447
2336
|
}, "Apply")));
|
|
2448
2337
|
}
|
|
2449
2338
|
}
|
|
@@ -2542,11 +2431,8 @@ function Select(props) {
|
|
|
2542
2431
|
disabled,
|
|
2543
2432
|
isSelected,
|
|
2544
2433
|
placement,
|
|
2545
|
-
modifiers
|
|
2546
|
-
testId
|
|
2434
|
+
modifiers
|
|
2547
2435
|
} = props;
|
|
2548
|
-
const singleSelectTestIds = getTestIds(testId, id => getSelectInputTestIds(id, false));
|
|
2549
|
-
const multiSelectTestIds = getTestIds(testId, id => getSelectInputTestIds(id, true));
|
|
2550
2436
|
return /*#__PURE__*/createElement("div", {
|
|
2551
2437
|
className: cx(selectWrapper, className, {
|
|
2552
2438
|
[relativePosition]: !!fullWidthDropdown
|
|
@@ -2568,8 +2454,7 @@ function Select(props) {
|
|
|
2568
2454
|
onClick: disabled ? undefined : () => {
|
|
2569
2455
|
toggleDropdown();
|
|
2570
2456
|
onDropdownToggle(isOpen);
|
|
2571
|
-
}
|
|
2572
|
-
"data-testid": singleSelectTestIds.inputId
|
|
2457
|
+
}
|
|
2573
2458
|
}, /*#__PURE__*/createElement(Input, Object.assign({
|
|
2574
2459
|
className: selectInputWrapper,
|
|
2575
2460
|
inputClassName: selectInput,
|
|
@@ -2618,9 +2503,7 @@ function Select(props) {
|
|
|
2618
2503
|
onDropdownToggle(isOpen);
|
|
2619
2504
|
toggle();
|
|
2620
2505
|
})
|
|
2621
|
-
}, commonProps,
|
|
2622
|
-
testId: multiSelectTestIds.optionGroupId
|
|
2623
|
-
}), children);
|
|
2506
|
+
}, commonProps), children);
|
|
2624
2507
|
} else {
|
|
2625
2508
|
return /*#__PURE__*/createElement(OptionGroupRadio, Object.assign({
|
|
2626
2509
|
selected: props.selected,
|
|
@@ -2629,9 +2512,7 @@ function Select(props) {
|
|
|
2629
2512
|
onDropdownToggle(isOpen);
|
|
2630
2513
|
toggle();
|
|
2631
2514
|
}
|
|
2632
|
-
}, commonProps,
|
|
2633
|
-
testId: singleSelectTestIds.optionGroupId
|
|
2634
|
-
}), children);
|
|
2515
|
+
}, commonProps), children);
|
|
2635
2516
|
}
|
|
2636
2517
|
}));
|
|
2637
2518
|
}
|
|
@@ -2677,10 +2558,8 @@ class PhoneNumberInput extends Component {
|
|
|
2677
2558
|
selectProps,
|
|
2678
2559
|
inputProps,
|
|
2679
2560
|
required,
|
|
2680
|
-
placeholder
|
|
2681
|
-
testId
|
|
2561
|
+
placeholder
|
|
2682
2562
|
} = this.props;
|
|
2683
|
-
const testIds = getTestIds(testId, getPhoneNumberInputTestIds);
|
|
2684
2563
|
return /*#__PURE__*/createElement("div", {
|
|
2685
2564
|
className: cx(wrapper, className)
|
|
2686
2565
|
}, /*#__PURE__*/createElement("label", {
|
|
@@ -2695,15 +2574,12 @@ class PhoneNumberInput extends Component {
|
|
|
2695
2574
|
value: countryCode + "",
|
|
2696
2575
|
selected: countryCode
|
|
2697
2576
|
}, selectProps, {
|
|
2698
|
-
className: cx(selectStyle, selectProps && selectProps.className)
|
|
2699
|
-
testId: testIds.countryId
|
|
2577
|
+
className: cx(selectStyle, selectProps && selectProps.className)
|
|
2700
2578
|
}), this.props.children), /*#__PURE__*/createElement(Input, Object.assign({
|
|
2701
2579
|
onChange: this.onNumberChange,
|
|
2702
2580
|
placeholder: "",
|
|
2703
2581
|
value: phone
|
|
2704
|
-
}, inputProps
|
|
2705
|
-
testId: testIds.phoneId
|
|
2706
|
-
})));
|
|
2582
|
+
}, inputProps)));
|
|
2707
2583
|
}
|
|
2708
2584
|
}
|
|
2709
2585
|
|
|
@@ -2923,7 +2799,7 @@ class Tabs extends PureComponent {
|
|
|
2923
2799
|
const isSelected = this.state.selectedTab === tab;
|
|
2924
2800
|
return /*#__PURE__*/createElement("span", {
|
|
2925
2801
|
key: `${tab}-${i}`,
|
|
2926
|
-
"data-
|
|
2802
|
+
"data-test-id": `${tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()}`,
|
|
2927
2803
|
className: cx(_className, isSelected && selectedTabStyle, isSelected && this.props.selectedTabClassName),
|
|
2928
2804
|
onClick: () => {
|
|
2929
2805
|
this.setState({
|
|
@@ -3089,17 +2965,14 @@ class RadioGroup extends PureComponent {
|
|
|
3089
2965
|
selected,
|
|
3090
2966
|
className,
|
|
3091
2967
|
name,
|
|
3092
|
-
disabled
|
|
3093
|
-
testId
|
|
2968
|
+
disabled
|
|
3094
2969
|
} = this.props;
|
|
3095
|
-
const
|
|
3096
|
-
const _children = Children.map(children, (_radio, i) => {
|
|
2970
|
+
const _children = Children.map(children, _radio => {
|
|
3097
2971
|
const radio = _radio;
|
|
3098
2972
|
return cloneElement(radio, {
|
|
3099
2973
|
onChange: this.handleChange,
|
|
3100
2974
|
checked: selected === radio.props.value,
|
|
3101
|
-
disabled
|
|
3102
|
-
testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
|
|
2975
|
+
disabled
|
|
3103
2976
|
});
|
|
3104
2977
|
});
|
|
3105
2978
|
return /*#__PURE__*/createElement("div", {
|
|
@@ -3300,8 +3173,7 @@ class SecondaryInput extends PureComponent {
|
|
|
3300
3173
|
message,
|
|
3301
3174
|
readOnly,
|
|
3302
3175
|
loading,
|
|
3303
|
-
className
|
|
3304
|
-
testId
|
|
3176
|
+
className
|
|
3305
3177
|
} = this.props;
|
|
3306
3178
|
const {
|
|
3307
3179
|
isFocused
|
|
@@ -3331,9 +3203,7 @@ class SecondaryInput extends PureComponent {
|
|
|
3331
3203
|
},
|
|
3332
3204
|
onFocus: this.addFocus,
|
|
3333
3205
|
onBlur: this.removeFocus
|
|
3334
|
-
}, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps, {
|
|
3335
|
-
"data-testid": testId
|
|
3336
|
-
})), /*#__PURE__*/createElement("label", {
|
|
3206
|
+
}, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps)), /*#__PURE__*/createElement("label", {
|
|
3337
3207
|
className: placeholderClassName
|
|
3338
3208
|
}, placeholder, required && /*#__PURE__*/createElement("span", {
|
|
3339
3209
|
style: {
|
|
@@ -3346,7 +3216,6 @@ class SecondaryInput extends PureComponent {
|
|
|
3346
3216
|
scale: 0.4
|
|
3347
3217
|
})), _message && /*#__PURE__*/createElement("div", {
|
|
3348
3218
|
className: messageStyle$1,
|
|
3349
|
-
"data-testid": testId ? getMessageTestId(testId) : undefined,
|
|
3350
3219
|
style: {
|
|
3351
3220
|
color: getColor$1(errorMessage, successMessage)
|
|
3352
3221
|
}
|
|
@@ -3959,15 +3828,13 @@ const Text = ({
|
|
|
3959
3828
|
typography,
|
|
3960
3829
|
color = colors.gray.darker,
|
|
3961
3830
|
children,
|
|
3962
|
-
className
|
|
3963
|
-
testId
|
|
3831
|
+
className
|
|
3964
3832
|
}) => {
|
|
3965
3833
|
const _className = /*#__PURE__*/css({ ...typography,
|
|
3966
3834
|
color
|
|
3967
3835
|
}, "" );
|
|
3968
3836
|
return /*#__PURE__*/React__default.createElement("span", {
|
|
3969
|
-
className: cx(_className, className)
|
|
3970
|
-
"data-testid": testId
|
|
3837
|
+
className: cx(_className, className)
|
|
3971
3838
|
}, children);
|
|
3972
3839
|
};
|
|
3973
3840
|
|
|
@@ -4054,7 +3921,7 @@ const TimePicker = props => {
|
|
|
4054
3921
|
toggleDropdown();
|
|
4055
3922
|
},
|
|
4056
3923
|
className: buttonStyle,
|
|
4057
|
-
"data-
|
|
3924
|
+
"data-test-id": "hour-label"
|
|
4058
3925
|
}, /*#__PURE__*/createElement("span", {
|
|
4059
3926
|
className: /*#__PURE__*/css( {
|
|
4060
3927
|
name: "1czd1rs-TimePicker",
|
|
@@ -4097,7 +3964,7 @@ const TimePicker = props => {
|
|
|
4097
3964
|
toggleDropdown();
|
|
4098
3965
|
},
|
|
4099
3966
|
className: buttonStyle,
|
|
4100
|
-
"data-
|
|
3967
|
+
"data-test-id": "minute-label"
|
|
4101
3968
|
}, /*#__PURE__*/createElement("span", {
|
|
4102
3969
|
className: /*#__PURE__*/css( {
|
|
4103
3970
|
name: "1czd1rs-TimePicker",
|
|
@@ -4222,8 +4089,7 @@ function defaultSearchBox({
|
|
|
4222
4089
|
errorMessage: props.errorMessage,
|
|
4223
4090
|
loading: props.loading,
|
|
4224
4091
|
required: props.required,
|
|
4225
|
-
disabled: props.disabled
|
|
4226
|
-
testId: props.testId
|
|
4092
|
+
disabled: props.disabled
|
|
4227
4093
|
}));
|
|
4228
4094
|
}
|
|
4229
4095
|
class TypeAhead extends PureComponent {
|
|
@@ -4260,10 +4126,8 @@ class TypeAhead extends PureComponent {
|
|
|
4260
4126
|
className,
|
|
4261
4127
|
searchBox = defaultSearchBox,
|
|
4262
4128
|
dropdownClassName,
|
|
4263
|
-
children
|
|
4264
|
-
testId
|
|
4129
|
+
children
|
|
4265
4130
|
} = this.props;
|
|
4266
|
-
const testIds = getTestIds(testId, getTypeaheadTestIds);
|
|
4267
4131
|
const {
|
|
4268
4132
|
showSuggestions,
|
|
4269
4133
|
value
|
|
@@ -4278,17 +4142,14 @@ class TypeAhead extends PureComponent {
|
|
|
4278
4142
|
registerChange: this.registerChange,
|
|
4279
4143
|
onFocus: this.onFocus,
|
|
4280
4144
|
value
|
|
4281
|
-
},
|
|
4282
|
-
testId: testIds.searchBoxId
|
|
4283
|
-
}), /*#__PURE__*/createElement(MountTransition, {
|
|
4145
|
+
}, this.props), /*#__PURE__*/createElement(MountTransition, {
|
|
4284
4146
|
visible: showSuggestions,
|
|
4285
4147
|
native: true
|
|
4286
4148
|
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
4287
4149
|
style: transitionStyles,
|
|
4288
4150
|
className: cx(optionsWrapper$1, dropdownClassName)
|
|
4289
4151
|
}, /*#__PURE__*/createElement(OptionGroupRadio, {
|
|
4290
|
-
onChange: this.onSelect
|
|
4291
|
-
testId: testIds.optionGroupId
|
|
4152
|
+
onChange: this.onSelect
|
|
4292
4153
|
}, children))));
|
|
4293
4154
|
}
|
|
4294
4155
|
}
|
|
@@ -4349,19 +4210,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
4349
4210
|
capitalize: capitalize,
|
|
4350
4211
|
getShortenedNumber: getShortenedNumber,
|
|
4351
4212
|
initGoogleAnalytics: initGoogleAnalytics,
|
|
4352
|
-
isDesktop: isDesktop
|
|
4353
|
-
getTestIds: getTestIds,
|
|
4354
|
-
getOptionTestId: getOptionTestId,
|
|
4355
|
-
getRadioGroupTestIds: getRadioGroupTestIds,
|
|
4356
|
-
getOptionGroupTestIds: getOptionGroupTestIds,
|
|
4357
|
-
getOptionGroupRadioTestIds: getOptionGroupRadioTestIds,
|
|
4358
|
-
getOptionGroupCheckBoxTestIds: getOptionGroupCheckBoxTestIds,
|
|
4359
|
-
getPhoneNumberInputTestIds: getPhoneNumberInputTestIds,
|
|
4360
|
-
getMessageTestId: getMessageTestId,
|
|
4361
|
-
getSelectInputTestIds: getSelectInputTestIds,
|
|
4362
|
-
getTypeaheadTestIds: getTypeaheadTestIds,
|
|
4363
|
-
getCalendarTestIds: getCalendarTestIds
|
|
4213
|
+
isDesktop: isDesktop
|
|
4364
4214
|
});
|
|
4365
4215
|
|
|
4366
|
-
export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants,
|
|
4216
|
+
export { BrowserBasedDateInput, Button, Calendar, Checkbox, CheckboxGroup, DateInput, DropDown, DropDownButton, Input, Loader, Logo, Message, Modal, NativeDateInput, Option, OptionGroup, OptionGroupCheckBox, OptionGroupRadio, OutsideClick, PhoneNumberInput, PopUp, PebblePopper as Popper, PresetCalendar, Radio, RadioGroup, Rating, Search, SecondaryInput, Select, SideBar, Slider, Stepper, Switch, TabSection, Tabs, Tag, Text, TimePicker, Toast, Tooltip, TypeAhead, UserAgentInfoContext, UserAgentInfoProvider, constants, mixins, styles, typography, index as utils };
|
|
4367
4217
|
//# sourceMappingURL=pebble-web.es.js.map
|