pebble-web 2.25.2-alpha.3 → 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/PopUp.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 +164 -358
- package/dist/pebble-web.dev.js.map +1 -1
- package/dist/pebble-web.es.dev.js +70 -239
- package/dist/pebble-web.es.dev.js.map +1 -1
- package/dist/pebble-web.es.js +64 -233
- package/dist/pebble-web.es.js.map +1 -1
- package/dist/pebble-web.js +158 -352
- package/dist/pebble-web.js.map +1 -1
- package/dist/pebble-web.module.dev.js +165 -347
- package/dist/pebble-web.module.dev.js.map +1 -1
- package/dist/pebble-web.module.js +159 -341
- package/dist/pebble-web.module.js.map +1 -1
- package/dist/pebble-web.umd.dev.js +164 -358
- package/dist/pebble-web.umd.dev.js.map +1 -1
- package/dist/pebble-web.umd.js +158 -352
- 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/PopUp.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/PopUp.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 -65
- package/src/components/__tests__/__snapshots__/checkboxGroup.test.tsx.snap +0 -88
- package/src/utils/testIds.ts +0 -119
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,76 +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
|
-
function getPopUpTestIds(id) {
|
|
691
|
-
return {
|
|
692
|
-
closeButtonId: `${id}-close-btn`,
|
|
693
|
-
approveButtonId: `${id}-approve-btn`,
|
|
694
|
-
rejectButtonId: `${id}-reject-btn`
|
|
695
|
-
};
|
|
696
|
-
}
|
|
697
|
-
|
|
698
624
|
class Calendar extends PureComponent {
|
|
699
625
|
constructor() {
|
|
700
626
|
super(...arguments);
|
|
@@ -808,18 +734,11 @@ class Calendar extends PureComponent {
|
|
|
808
734
|
onClear,
|
|
809
735
|
maxDate,
|
|
810
736
|
minDate,
|
|
811
|
-
testId,
|
|
812
737
|
...rest
|
|
813
738
|
} = this.props;
|
|
814
739
|
const {
|
|
815
740
|
maxRangeDates
|
|
816
741
|
} = this.state;
|
|
817
|
-
const {
|
|
818
|
-
leftIconId,
|
|
819
|
-
rightIconId,
|
|
820
|
-
clearButtonId,
|
|
821
|
-
applyButtonId
|
|
822
|
-
} = getTestIds(testId, id => getCalendarTestIds(id));
|
|
823
742
|
return /*#__PURE__*/createElement("div", {
|
|
824
743
|
className: cx(wrapperStyle, {
|
|
825
744
|
[/*#__PURE__*/css( {
|
|
@@ -844,15 +763,13 @@ class Calendar extends PureComponent {
|
|
|
844
763
|
style: {
|
|
845
764
|
fontSize: 14
|
|
846
765
|
},
|
|
847
|
-
className: "pi pi-chevron-left"
|
|
848
|
-
"data-testid": leftIconId
|
|
766
|
+
className: "pi pi-chevron-left"
|
|
849
767
|
}),
|
|
850
768
|
nextLabel: /*#__PURE__*/createElement("i", {
|
|
851
769
|
style: {
|
|
852
770
|
fontSize: 14
|
|
853
771
|
},
|
|
854
|
-
className: "pi pi-arrow-right"
|
|
855
|
-
"data-testid": rightIconId
|
|
772
|
+
className: "pi pi-arrow-right"
|
|
856
773
|
}),
|
|
857
774
|
maxDate: maxDate || maxRangeDates && maxRangeDates.future,
|
|
858
775
|
minDate: minDate || maxRangeDates && maxRangeDates.past
|
|
@@ -860,11 +777,9 @@ class Calendar extends PureComponent {
|
|
|
860
777
|
className: buttonsWrapper
|
|
861
778
|
}, onClear && /*#__PURE__*/createElement(Button, {
|
|
862
779
|
onClick: this.onClear,
|
|
863
|
-
type: "secondary"
|
|
864
|
-
testId: clearButtonId
|
|
780
|
+
type: "secondary"
|
|
865
781
|
}, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
|
|
866
|
-
onClick: this.onApply
|
|
867
|
-
testId: applyButtonId
|
|
782
|
+
onClick: this.onApply
|
|
868
783
|
}, "Apply")));
|
|
869
784
|
}
|
|
870
785
|
}
|
|
@@ -902,8 +817,7 @@ function Control(props) {
|
|
|
902
817
|
children = ControlView,
|
|
903
818
|
type,
|
|
904
819
|
className,
|
|
905
|
-
indeterminate
|
|
906
|
-
testId
|
|
820
|
+
indeterminate
|
|
907
821
|
} = props;
|
|
908
822
|
return /*#__PURE__*/createElement("div", {
|
|
909
823
|
className: cx(controlStyle, className),
|
|
@@ -916,8 +830,7 @@ function Control(props) {
|
|
|
916
830
|
onClick: !disabled ? e => onChange && onChange({
|
|
917
831
|
value,
|
|
918
832
|
checked: !checked
|
|
919
|
-
}, e) : undefined
|
|
920
|
-
"data-testid": testId
|
|
833
|
+
}, e) : undefined
|
|
921
834
|
}, children(props));
|
|
922
835
|
}
|
|
923
836
|
const ControlView = ({
|
|
@@ -993,17 +906,14 @@ class CheckboxGroup extends PureComponent {
|
|
|
993
906
|
selected,
|
|
994
907
|
className,
|
|
995
908
|
name,
|
|
996
|
-
disabled
|
|
997
|
-
testId
|
|
909
|
+
disabled
|
|
998
910
|
} = this.props;
|
|
999
|
-
const _children = Children.map(children,
|
|
1000
|
-
const index = typeof i === "number" ? i : 0;
|
|
911
|
+
const _children = Children.map(children, _checkbox => {
|
|
1001
912
|
const checkbox = _checkbox;
|
|
1002
913
|
return cloneElement(checkbox, {
|
|
1003
914
|
onChange: this.handleChange,
|
|
1004
915
|
checked: selected.indexOf(checkbox.props.value) >= 0,
|
|
1005
|
-
disabled
|
|
1006
|
-
testId: testId ? getOptionTestId(testId, index) : undefined
|
|
916
|
+
disabled
|
|
1007
917
|
});
|
|
1008
918
|
});
|
|
1009
919
|
return /*#__PURE__*/createElement("div", {
|
|
@@ -1121,8 +1031,7 @@ class DropDown extends PureComponent {
|
|
|
1121
1031
|
disabled,
|
|
1122
1032
|
labelClassName,
|
|
1123
1033
|
controlled,
|
|
1124
|
-
onOutsideClick
|
|
1125
|
-
testId
|
|
1034
|
+
onOutsideClick
|
|
1126
1035
|
} = this.props;
|
|
1127
1036
|
const _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
|
|
1128
1037
|
return /*#__PURE__*/createElement(OutsideClick, {
|
|
@@ -1150,8 +1059,7 @@ class DropDown extends PureComponent {
|
|
|
1150
1059
|
isOpen: _isDropDownOpen,
|
|
1151
1060
|
onClick: this.toggleDropdown,
|
|
1152
1061
|
disabled: disabled,
|
|
1153
|
-
className: labelClassName
|
|
1154
|
-
testId: testId
|
|
1062
|
+
className: labelClassName
|
|
1155
1063
|
}, buttonLabel))), /*#__PURE__*/createElement(MountTransition, {
|
|
1156
1064
|
visible: _isDropDownOpen
|
|
1157
1065
|
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
@@ -1359,8 +1267,7 @@ class Input extends PureComponent {
|
|
|
1359
1267
|
onClick,
|
|
1360
1268
|
loading,
|
|
1361
1269
|
leftElement,
|
|
1362
|
-
rightElement
|
|
1363
|
-
testId
|
|
1270
|
+
rightElement
|
|
1364
1271
|
} = this.props;
|
|
1365
1272
|
const {
|
|
1366
1273
|
isFocused
|
|
@@ -1400,13 +1307,9 @@ class Input extends PureComponent {
|
|
|
1400
1307
|
onClick: onClick
|
|
1401
1308
|
}, /*#__PURE__*/createElement("div", {
|
|
1402
1309
|
className: _inputWrapperClassName
|
|
1403
|
-
}, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps, {
|
|
1404
|
-
"data-testid": testId
|
|
1405
|
-
})) : /*#__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({
|
|
1406
1311
|
type: type
|
|
1407
|
-
}, _inputProps, this.props.inputProps, {
|
|
1408
|
-
"data-testid": testId
|
|
1409
|
-
})), loading && /*#__PURE__*/createElement(Loader, {
|
|
1312
|
+
}, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/createElement(Loader, {
|
|
1410
1313
|
color: colors.violet.base,
|
|
1411
1314
|
scale: 0.6,
|
|
1412
1315
|
className: _loadingStyle
|
|
@@ -1423,7 +1326,6 @@ class Input extends PureComponent {
|
|
|
1423
1326
|
}
|
|
1424
1327
|
}), _message && /*#__PURE__*/createElement("div", {
|
|
1425
1328
|
className: messageStyle,
|
|
1426
|
-
"data-testid": testId ? getMessageTestId(testId) : undefined,
|
|
1427
1329
|
style: {
|
|
1428
1330
|
color: getColor(errorMessage, successMessage)
|
|
1429
1331
|
}
|
|
@@ -1448,8 +1350,7 @@ class NativeDateInput extends PureComponent {
|
|
|
1448
1350
|
inputProps,
|
|
1449
1351
|
placeholder,
|
|
1450
1352
|
value,
|
|
1451
|
-
disabled
|
|
1452
|
-
testId
|
|
1353
|
+
disabled
|
|
1453
1354
|
} = this.props;
|
|
1454
1355
|
return /*#__PURE__*/createElement(Input, Object.assign({
|
|
1455
1356
|
onChange: this.onDateInputChange,
|
|
@@ -1459,8 +1360,7 @@ class NativeDateInput extends PureComponent {
|
|
|
1459
1360
|
placeholder: placeholder,
|
|
1460
1361
|
fixLabelAtTop: true
|
|
1461
1362
|
}, inputProps, {
|
|
1462
|
-
disabled: disabled
|
|
1463
|
-
testId: testId
|
|
1363
|
+
disabled: disabled
|
|
1464
1364
|
}));
|
|
1465
1365
|
}
|
|
1466
1366
|
}
|
|
@@ -1549,8 +1449,7 @@ class DateInput extends PureComponent {
|
|
|
1549
1449
|
initiallyOpen,
|
|
1550
1450
|
onOutsideClick,
|
|
1551
1451
|
controlled,
|
|
1552
|
-
isOpen
|
|
1553
|
-
testId
|
|
1452
|
+
isOpen
|
|
1554
1453
|
} = this.props;
|
|
1555
1454
|
const _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
|
|
1556
1455
|
const _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
|
|
@@ -1582,8 +1481,7 @@ class DateInput extends PureComponent {
|
|
|
1582
1481
|
onChange
|
|
1583
1482
|
},
|
|
1584
1483
|
className: cx(inputStyle$1, inputProps && inputProps.className),
|
|
1585
|
-
disabled: disabled
|
|
1586
|
-
testId: testId
|
|
1484
|
+
disabled: disabled
|
|
1587
1485
|
}))),
|
|
1588
1486
|
className: _wrapperClassName,
|
|
1589
1487
|
placement: placement,
|
|
@@ -1850,11 +1748,11 @@ class Toast extends PureComponent {
|
|
|
1850
1748
|
emitter.emit("hideToast");
|
|
1851
1749
|
}
|
|
1852
1750
|
componentDidMount() {
|
|
1853
|
-
emitter.on("showToast",
|
|
1751
|
+
emitter.on("showToast", this.show);
|
|
1854
1752
|
emitter.on("hideToast", this.hide);
|
|
1855
1753
|
}
|
|
1856
1754
|
componentWillUnmount() {
|
|
1857
|
-
emitter.off("showToast",
|
|
1755
|
+
emitter.off("showToast", this.show);
|
|
1858
1756
|
emitter.off("hideToast", this.hide);
|
|
1859
1757
|
}
|
|
1860
1758
|
render() {
|
|
@@ -1911,8 +1809,7 @@ const messageWrapper = /*#__PURE__*/css({
|
|
|
1911
1809
|
const Message = ({
|
|
1912
1810
|
intent,
|
|
1913
1811
|
className,
|
|
1914
|
-
text
|
|
1915
|
-
testId
|
|
1812
|
+
text
|
|
1916
1813
|
}) => {
|
|
1917
1814
|
const bColor = _colors[intent];
|
|
1918
1815
|
const iconClass = cx("pi", {
|
|
@@ -1923,8 +1820,7 @@ const Message = ({
|
|
|
1923
1820
|
className: cx(messageWrapper, className),
|
|
1924
1821
|
style: {
|
|
1925
1822
|
backgroundColor: bColor
|
|
1926
|
-
}
|
|
1927
|
-
"data-testid": testId
|
|
1823
|
+
}
|
|
1928
1824
|
}, /*#__PURE__*/createElement("i", {
|
|
1929
1825
|
className: iconClass
|
|
1930
1826
|
}), text);
|
|
@@ -2139,8 +2035,7 @@ class Search extends PureComponent {
|
|
|
2139
2035
|
className,
|
|
2140
2036
|
clearable,
|
|
2141
2037
|
value,
|
|
2142
|
-
loading
|
|
2143
|
-
testId
|
|
2038
|
+
loading
|
|
2144
2039
|
} = this.props;
|
|
2145
2040
|
const wrapperClassName = cx(searchWrapperStyle, {
|
|
2146
2041
|
__pebble__search__small: type === "small",
|
|
@@ -2161,9 +2056,7 @@ class Search extends PureComponent {
|
|
|
2161
2056
|
},
|
|
2162
2057
|
ref: this.searchInputRef,
|
|
2163
2058
|
value: value
|
|
2164
|
-
}, inputProps, {
|
|
2165
|
-
"data-testid": testId
|
|
2166
|
-
})), loading && /*#__PURE__*/createElement(Loader, {
|
|
2059
|
+
}, inputProps)), loading && /*#__PURE__*/createElement(Loader, {
|
|
2167
2060
|
scale: 0.4,
|
|
2168
2061
|
color: colors.violet.base
|
|
2169
2062
|
}), clearable && /*#__PURE__*/createElement("div", {
|
|
@@ -2306,14 +2199,12 @@ class OptionGroup extends PureComponent {
|
|
|
2306
2199
|
className,
|
|
2307
2200
|
isSelected,
|
|
2308
2201
|
handleChange,
|
|
2309
|
-
searchBoxProps
|
|
2310
|
-
testId
|
|
2202
|
+
searchBoxProps
|
|
2311
2203
|
} = this.props;
|
|
2312
2204
|
const {
|
|
2313
2205
|
isScrolled,
|
|
2314
2206
|
highlighted
|
|
2315
2207
|
} = this.state;
|
|
2316
|
-
const testIds = getTestIds(testId, getOptionGroupTestIds);
|
|
2317
2208
|
const _children = Children.map(children, (_option, i) => {
|
|
2318
2209
|
const option = _option;
|
|
2319
2210
|
let ref = this.optionsRefsSet.get(i);
|
|
@@ -2326,8 +2217,7 @@ class OptionGroup extends PureComponent {
|
|
|
2326
2217
|
isActive: highlighted === i,
|
|
2327
2218
|
isSelected: isSelected(option.props.value),
|
|
2328
2219
|
multiSelect,
|
|
2329
|
-
ref
|
|
2330
|
-
testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
|
|
2220
|
+
ref
|
|
2331
2221
|
});
|
|
2332
2222
|
});
|
|
2333
2223
|
const searchBoxClassName = cx(searchBoxWrapper, {
|
|
@@ -2342,8 +2232,7 @@ class OptionGroup extends PureComponent {
|
|
|
2342
2232
|
inputProps: { ...(searchBoxProps && searchBoxProps.inputProps),
|
|
2343
2233
|
onKeyDown: this.handleKeyPress,
|
|
2344
2234
|
autoFocus: true
|
|
2345
|
-
}
|
|
2346
|
-
testId: testIds.searchBoxId
|
|
2235
|
+
}
|
|
2347
2236
|
}))), !!Children.count(children) && /*#__PURE__*/createElement("div", {
|
|
2348
2237
|
ref: this.optionRef,
|
|
2349
2238
|
style: {
|
|
@@ -2351,16 +2240,14 @@ class OptionGroup extends PureComponent {
|
|
|
2351
2240
|
},
|
|
2352
2241
|
className: cx(optionsWrapper, className),
|
|
2353
2242
|
role: multiSelect ? "group" : "radiogroup",
|
|
2354
|
-
"data-
|
|
2243
|
+
"data-test-id": "optiongroup",
|
|
2355
2244
|
"aria-label": searchBoxProps && searchBoxProps.placeholder
|
|
2356
2245
|
}, advancedOptions && advancedOptionsProps && /*#__PURE__*/createElement("div", {
|
|
2357
2246
|
className: _class
|
|
2358
2247
|
}, /*#__PURE__*/createElement("div", {
|
|
2359
|
-
onClick: advancedOptionsProps.selectVisible
|
|
2360
|
-
"data-testid": testIds.selectVisibleId
|
|
2248
|
+
onClick: advancedOptionsProps.selectVisible
|
|
2361
2249
|
}, "Select Visible"), /*#__PURE__*/createElement("div", {
|
|
2362
|
-
onClick: advancedOptionsProps.clearVisible
|
|
2363
|
-
"data-testid": testIds.clearVisibleId
|
|
2250
|
+
onClick: advancedOptionsProps.clearVisible
|
|
2364
2251
|
}, "Clear Visible")), _children));
|
|
2365
2252
|
}
|
|
2366
2253
|
}
|
|
@@ -2425,7 +2312,6 @@ class OptionGroupCheckBox extends PureComponent {
|
|
|
2425
2312
|
onClear,
|
|
2426
2313
|
isSelected,
|
|
2427
2314
|
onChange,
|
|
2428
|
-
testId,
|
|
2429
2315
|
...rest
|
|
2430
2316
|
} = this.props;
|
|
2431
2317
|
const advancedOptionsProps = {
|
|
@@ -2433,24 +2319,20 @@ class OptionGroupCheckBox extends PureComponent {
|
|
|
2433
2319
|
clearVisible: this.clearVisible,
|
|
2434
2320
|
...this.props.advancedOptionsProps
|
|
2435
2321
|
};
|
|
2436
|
-
const testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
|
|
2437
2322
|
return /*#__PURE__*/createElement("div", {
|
|
2438
2323
|
className: cx(optionGroupCheckBoxWrap, wrapClassName)
|
|
2439
2324
|
}, /*#__PURE__*/createElement(OptionGroup, Object.assign({}, rest, {
|
|
2440
2325
|
advancedOptionsProps: advancedOptionsProps,
|
|
2441
2326
|
isSelected: isSelected || this.isSelected,
|
|
2442
2327
|
handleChange: this.handleChange,
|
|
2443
|
-
multiSelect: true
|
|
2444
|
-
testId: testId
|
|
2328
|
+
multiSelect: true
|
|
2445
2329
|
})), (onApply || onClear) && /*#__PURE__*/createElement("div", {
|
|
2446
2330
|
className: optionGroupCheckBoxButtonWrap
|
|
2447
2331
|
}, onClear && /*#__PURE__*/createElement(Button, {
|
|
2448
2332
|
type: "secondary",
|
|
2449
|
-
onClick: onClear
|
|
2450
|
-
testId: testIds.clearButtonId
|
|
2333
|
+
onClick: onClear
|
|
2451
2334
|
}, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
|
|
2452
|
-
onClick: this.onApply
|
|
2453
|
-
testId: testIds.applyButtonId
|
|
2335
|
+
onClick: this.onApply
|
|
2454
2336
|
}, "Apply")));
|
|
2455
2337
|
}
|
|
2456
2338
|
}
|
|
@@ -2549,11 +2431,8 @@ function Select(props) {
|
|
|
2549
2431
|
disabled,
|
|
2550
2432
|
isSelected,
|
|
2551
2433
|
placement,
|
|
2552
|
-
modifiers
|
|
2553
|
-
testId
|
|
2434
|
+
modifiers
|
|
2554
2435
|
} = props;
|
|
2555
|
-
const singleSelectTestIds = getTestIds(testId, id => getSelectInputTestIds(id, false));
|
|
2556
|
-
const multiSelectTestIds = getTestIds(testId, id => getSelectInputTestIds(id, true));
|
|
2557
2436
|
return /*#__PURE__*/createElement("div", {
|
|
2558
2437
|
className: cx(selectWrapper, className, {
|
|
2559
2438
|
[relativePosition]: !!fullWidthDropdown
|
|
@@ -2575,8 +2454,7 @@ function Select(props) {
|
|
|
2575
2454
|
onClick: disabled ? undefined : () => {
|
|
2576
2455
|
toggleDropdown();
|
|
2577
2456
|
onDropdownToggle(isOpen);
|
|
2578
|
-
}
|
|
2579
|
-
"data-testid": singleSelectTestIds.inputId
|
|
2457
|
+
}
|
|
2580
2458
|
}, /*#__PURE__*/createElement(Input, Object.assign({
|
|
2581
2459
|
className: selectInputWrapper,
|
|
2582
2460
|
inputClassName: selectInput,
|
|
@@ -2625,9 +2503,7 @@ function Select(props) {
|
|
|
2625
2503
|
onDropdownToggle(isOpen);
|
|
2626
2504
|
toggle();
|
|
2627
2505
|
})
|
|
2628
|
-
}, commonProps,
|
|
2629
|
-
testId: multiSelectTestIds.optionGroupId
|
|
2630
|
-
}), children);
|
|
2506
|
+
}, commonProps), children);
|
|
2631
2507
|
} else {
|
|
2632
2508
|
return /*#__PURE__*/createElement(OptionGroupRadio, Object.assign({
|
|
2633
2509
|
selected: props.selected,
|
|
@@ -2636,9 +2512,7 @@ function Select(props) {
|
|
|
2636
2512
|
onDropdownToggle(isOpen);
|
|
2637
2513
|
toggle();
|
|
2638
2514
|
}
|
|
2639
|
-
}, commonProps,
|
|
2640
|
-
testId: singleSelectTestIds.optionGroupId
|
|
2641
|
-
}), children);
|
|
2515
|
+
}, commonProps), children);
|
|
2642
2516
|
}
|
|
2643
2517
|
}));
|
|
2644
2518
|
}
|
|
@@ -2684,10 +2558,8 @@ class PhoneNumberInput extends Component {
|
|
|
2684
2558
|
selectProps,
|
|
2685
2559
|
inputProps,
|
|
2686
2560
|
required,
|
|
2687
|
-
placeholder
|
|
2688
|
-
testId
|
|
2561
|
+
placeholder
|
|
2689
2562
|
} = this.props;
|
|
2690
|
-
const testIds = getTestIds(testId, getPhoneNumberInputTestIds);
|
|
2691
2563
|
return /*#__PURE__*/createElement("div", {
|
|
2692
2564
|
className: cx(wrapper, className)
|
|
2693
2565
|
}, /*#__PURE__*/createElement("label", {
|
|
@@ -2702,15 +2574,12 @@ class PhoneNumberInput extends Component {
|
|
|
2702
2574
|
value: countryCode + "",
|
|
2703
2575
|
selected: countryCode
|
|
2704
2576
|
}, selectProps, {
|
|
2705
|
-
className: cx(selectStyle, selectProps && selectProps.className)
|
|
2706
|
-
testId: testIds.countryId
|
|
2577
|
+
className: cx(selectStyle, selectProps && selectProps.className)
|
|
2707
2578
|
}), this.props.children), /*#__PURE__*/createElement(Input, Object.assign({
|
|
2708
2579
|
onChange: this.onNumberChange,
|
|
2709
2580
|
placeholder: "",
|
|
2710
2581
|
value: phone
|
|
2711
|
-
}, inputProps
|
|
2712
|
-
testId: testIds.phoneId
|
|
2713
|
-
})));
|
|
2582
|
+
}, inputProps)));
|
|
2714
2583
|
}
|
|
2715
2584
|
}
|
|
2716
2585
|
|
|
@@ -2861,14 +2730,8 @@ const PopUp = props => {
|
|
|
2861
2730
|
rejectButtonText = "No",
|
|
2862
2731
|
children,
|
|
2863
2732
|
approveButtonProps,
|
|
2864
|
-
rejectButtonProps
|
|
2865
|
-
testId
|
|
2733
|
+
rejectButtonProps
|
|
2866
2734
|
} = props;
|
|
2867
|
-
const {
|
|
2868
|
-
closeButtonId,
|
|
2869
|
-
approveButtonId,
|
|
2870
|
-
rejectButtonId
|
|
2871
|
-
} = getTestIds(testId, id => getPopUpTestIds(id));
|
|
2872
2735
|
return /*#__PURE__*/createElement(Modal, {
|
|
2873
2736
|
visible: visible,
|
|
2874
2737
|
modalClassName: flexCenter
|
|
@@ -2876,23 +2739,18 @@ const PopUp = props => {
|
|
|
2876
2739
|
className: modalContainer$1
|
|
2877
2740
|
}, onClose && /*#__PURE__*/createElement("i", {
|
|
2878
2741
|
className: cx("pi", "pi-close", iconCloseClassName),
|
|
2879
|
-
onClick: onClose
|
|
2880
|
-
"data-testid": closeButtonId
|
|
2742
|
+
onClick: onClose
|
|
2881
2743
|
}), children, (onReject || onApprove) && /*#__PURE__*/createElement("div", {
|
|
2882
2744
|
className: buttonsContainer
|
|
2883
2745
|
}, onReject && /*#__PURE__*/createElement(Button, Object.assign({
|
|
2884
2746
|
size: "large",
|
|
2885
2747
|
type: "secondary",
|
|
2886
2748
|
onClick: onReject
|
|
2887
|
-
}, rejectButtonProps, {
|
|
2888
|
-
testId: rejectButtonId
|
|
2889
|
-
}), rejectButtonText), onApprove && /*#__PURE__*/createElement(Button, Object.assign({
|
|
2749
|
+
}, rejectButtonProps), rejectButtonText), onApprove && /*#__PURE__*/createElement(Button, Object.assign({
|
|
2890
2750
|
size: "large",
|
|
2891
2751
|
type: "primary",
|
|
2892
2752
|
onClick: onApprove
|
|
2893
|
-
}, approveButtonProps,
|
|
2894
|
-
testId: approveButtonId
|
|
2895
|
-
}), approveButtonText))));
|
|
2753
|
+
}, approveButtonProps), approveButtonText))));
|
|
2896
2754
|
};
|
|
2897
2755
|
|
|
2898
2756
|
const selectedTabStyle = /*#__PURE__*/css({
|
|
@@ -2941,7 +2799,7 @@ class Tabs extends PureComponent {
|
|
|
2941
2799
|
const isSelected = this.state.selectedTab === tab;
|
|
2942
2800
|
return /*#__PURE__*/createElement("span", {
|
|
2943
2801
|
key: `${tab}-${i}`,
|
|
2944
|
-
"data-
|
|
2802
|
+
"data-test-id": `${tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()}`,
|
|
2945
2803
|
className: cx(_className, isSelected && selectedTabStyle, isSelected && this.props.selectedTabClassName),
|
|
2946
2804
|
onClick: () => {
|
|
2947
2805
|
this.setState({
|
|
@@ -3107,17 +2965,14 @@ class RadioGroup extends PureComponent {
|
|
|
3107
2965
|
selected,
|
|
3108
2966
|
className,
|
|
3109
2967
|
name,
|
|
3110
|
-
disabled
|
|
3111
|
-
testId
|
|
2968
|
+
disabled
|
|
3112
2969
|
} = this.props;
|
|
3113
|
-
const
|
|
3114
|
-
const _children = Children.map(children, (_radio, i) => {
|
|
2970
|
+
const _children = Children.map(children, _radio => {
|
|
3115
2971
|
const radio = _radio;
|
|
3116
2972
|
return cloneElement(radio, {
|
|
3117
2973
|
onChange: this.handleChange,
|
|
3118
2974
|
checked: selected === radio.props.value,
|
|
3119
|
-
disabled
|
|
3120
|
-
testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
|
|
2975
|
+
disabled
|
|
3121
2976
|
});
|
|
3122
2977
|
});
|
|
3123
2978
|
return /*#__PURE__*/createElement("div", {
|
|
@@ -3318,8 +3173,7 @@ class SecondaryInput extends PureComponent {
|
|
|
3318
3173
|
message,
|
|
3319
3174
|
readOnly,
|
|
3320
3175
|
loading,
|
|
3321
|
-
className
|
|
3322
|
-
testId
|
|
3176
|
+
className
|
|
3323
3177
|
} = this.props;
|
|
3324
3178
|
const {
|
|
3325
3179
|
isFocused
|
|
@@ -3349,9 +3203,7 @@ class SecondaryInput extends PureComponent {
|
|
|
3349
3203
|
},
|
|
3350
3204
|
onFocus: this.addFocus,
|
|
3351
3205
|
onBlur: this.removeFocus
|
|
3352
|
-
}, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps, {
|
|
3353
|
-
"data-testid": testId
|
|
3354
|
-
})), /*#__PURE__*/createElement("label", {
|
|
3206
|
+
}, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps)), /*#__PURE__*/createElement("label", {
|
|
3355
3207
|
className: placeholderClassName
|
|
3356
3208
|
}, placeholder, required && /*#__PURE__*/createElement("span", {
|
|
3357
3209
|
style: {
|
|
@@ -3364,7 +3216,6 @@ class SecondaryInput extends PureComponent {
|
|
|
3364
3216
|
scale: 0.4
|
|
3365
3217
|
})), _message && /*#__PURE__*/createElement("div", {
|
|
3366
3218
|
className: messageStyle$1,
|
|
3367
|
-
"data-testid": testId ? getMessageTestId(testId) : undefined,
|
|
3368
3219
|
style: {
|
|
3369
3220
|
color: getColor$1(errorMessage, successMessage)
|
|
3370
3221
|
}
|
|
@@ -3977,15 +3828,13 @@ const Text = ({
|
|
|
3977
3828
|
typography,
|
|
3978
3829
|
color = colors.gray.darker,
|
|
3979
3830
|
children,
|
|
3980
|
-
className
|
|
3981
|
-
testId
|
|
3831
|
+
className
|
|
3982
3832
|
}) => {
|
|
3983
3833
|
const _className = /*#__PURE__*/css({ ...typography,
|
|
3984
3834
|
color
|
|
3985
3835
|
}, "" );
|
|
3986
3836
|
return /*#__PURE__*/React__default.createElement("span", {
|
|
3987
|
-
className: cx(_className, className)
|
|
3988
|
-
"data-testid": testId
|
|
3837
|
+
className: cx(_className, className)
|
|
3989
3838
|
}, children);
|
|
3990
3839
|
};
|
|
3991
3840
|
|
|
@@ -4072,7 +3921,7 @@ const TimePicker = props => {
|
|
|
4072
3921
|
toggleDropdown();
|
|
4073
3922
|
},
|
|
4074
3923
|
className: buttonStyle,
|
|
4075
|
-
"data-
|
|
3924
|
+
"data-test-id": "hour-label"
|
|
4076
3925
|
}, /*#__PURE__*/createElement("span", {
|
|
4077
3926
|
className: /*#__PURE__*/css( {
|
|
4078
3927
|
name: "1czd1rs-TimePicker",
|
|
@@ -4115,7 +3964,7 @@ const TimePicker = props => {
|
|
|
4115
3964
|
toggleDropdown();
|
|
4116
3965
|
},
|
|
4117
3966
|
className: buttonStyle,
|
|
4118
|
-
"data-
|
|
3967
|
+
"data-test-id": "minute-label"
|
|
4119
3968
|
}, /*#__PURE__*/createElement("span", {
|
|
4120
3969
|
className: /*#__PURE__*/css( {
|
|
4121
3970
|
name: "1czd1rs-TimePicker",
|
|
@@ -4240,8 +4089,7 @@ function defaultSearchBox({
|
|
|
4240
4089
|
errorMessage: props.errorMessage,
|
|
4241
4090
|
loading: props.loading,
|
|
4242
4091
|
required: props.required,
|
|
4243
|
-
disabled: props.disabled
|
|
4244
|
-
testId: props.testId
|
|
4092
|
+
disabled: props.disabled
|
|
4245
4093
|
}));
|
|
4246
4094
|
}
|
|
4247
4095
|
class TypeAhead extends PureComponent {
|
|
@@ -4278,10 +4126,8 @@ class TypeAhead extends PureComponent {
|
|
|
4278
4126
|
className,
|
|
4279
4127
|
searchBox = defaultSearchBox,
|
|
4280
4128
|
dropdownClassName,
|
|
4281
|
-
children
|
|
4282
|
-
testId
|
|
4129
|
+
children
|
|
4283
4130
|
} = this.props;
|
|
4284
|
-
const testIds = getTestIds(testId, getTypeaheadTestIds);
|
|
4285
4131
|
const {
|
|
4286
4132
|
showSuggestions,
|
|
4287
4133
|
value
|
|
@@ -4296,17 +4142,14 @@ class TypeAhead extends PureComponent {
|
|
|
4296
4142
|
registerChange: this.registerChange,
|
|
4297
4143
|
onFocus: this.onFocus,
|
|
4298
4144
|
value
|
|
4299
|
-
},
|
|
4300
|
-
testId: testIds.searchBoxId
|
|
4301
|
-
}), /*#__PURE__*/createElement(MountTransition, {
|
|
4145
|
+
}, this.props), /*#__PURE__*/createElement(MountTransition, {
|
|
4302
4146
|
visible: showSuggestions,
|
|
4303
4147
|
native: true
|
|
4304
4148
|
}, transitionStyles => /*#__PURE__*/createElement(animated.div, {
|
|
4305
4149
|
style: transitionStyles,
|
|
4306
4150
|
className: cx(optionsWrapper$1, dropdownClassName)
|
|
4307
4151
|
}, /*#__PURE__*/createElement(OptionGroupRadio, {
|
|
4308
|
-
onChange: this.onSelect
|
|
4309
|
-
testId: testIds.optionGroupId
|
|
4152
|
+
onChange: this.onSelect
|
|
4310
4153
|
}, children))));
|
|
4311
4154
|
}
|
|
4312
4155
|
}
|
|
@@ -4367,20 +4210,8 @@ var index = /*#__PURE__*/Object.freeze({
|
|
|
4367
4210
|
capitalize: capitalize,
|
|
4368
4211
|
getShortenedNumber: getShortenedNumber,
|
|
4369
4212
|
initGoogleAnalytics: initGoogleAnalytics,
|
|
4370
|
-
isDesktop: isDesktop
|
|
4371
|
-
getTestIds: getTestIds,
|
|
4372
|
-
getOptionTestId: getOptionTestId,
|
|
4373
|
-
getRadioGroupTestIds: getRadioGroupTestIds,
|
|
4374
|
-
getOptionGroupTestIds: getOptionGroupTestIds,
|
|
4375
|
-
getOptionGroupRadioTestIds: getOptionGroupRadioTestIds,
|
|
4376
|
-
getOptionGroupCheckBoxTestIds: getOptionGroupCheckBoxTestIds,
|
|
4377
|
-
getPhoneNumberInputTestIds: getPhoneNumberInputTestIds,
|
|
4378
|
-
getMessageTestId: getMessageTestId,
|
|
4379
|
-
getSelectInputTestIds: getSelectInputTestIds,
|
|
4380
|
-
getTypeaheadTestIds: getTypeaheadTestIds,
|
|
4381
|
-
getCalendarTestIds: getCalendarTestIds,
|
|
4382
|
-
getPopUpTestIds: getPopUpTestIds
|
|
4213
|
+
isDesktop: isDesktop
|
|
4383
4214
|
});
|
|
4384
4215
|
|
|
4385
|
-
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 };
|
|
4386
4217
|
//# sourceMappingURL=pebble-web.es.js.map
|