pebble-web 2.25.2-alpha.3 → 2.26.0

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.
Files changed (96) hide show
  1. package/dist/components/typings/Button.d.ts +0 -1
  2. package/dist/components/typings/Calendar.d.ts +0 -1
  3. package/dist/components/typings/CheckboxGroup.d.ts +0 -1
  4. package/dist/components/typings/Control.d.ts +0 -1
  5. package/dist/components/typings/DateInput.d.ts +0 -1
  6. package/dist/components/typings/Dropdown.d.ts +0 -1
  7. package/dist/components/typings/Input.d.ts +0 -1
  8. package/dist/components/typings/Loader.d.ts +0 -1
  9. package/dist/components/typings/Message.d.ts +0 -1
  10. package/dist/components/typings/OptionGroup.d.ts +0 -1
  11. package/dist/components/typings/OptionGroupCheckBox.d.ts +0 -1
  12. package/dist/components/typings/OptionGroupRadio.d.ts +0 -1
  13. package/dist/components/typings/PhoneNumberInput.d.ts +0 -1
  14. package/dist/components/typings/PopUp.d.ts +0 -1
  15. package/dist/components/typings/RadioGroup.d.ts +0 -1
  16. package/dist/components/typings/Search.d.ts +0 -1
  17. package/dist/components/typings/SecondaryInput.d.ts +0 -1
  18. package/dist/components/typings/Select.d.ts +0 -1
  19. package/dist/components/typings/Text.d.ts +0 -1
  20. package/dist/components/typings/Typeahead.d.ts +0 -1
  21. package/dist/index.d.ts +0 -1
  22. package/dist/pebble-web.dev.js +164 -358
  23. package/dist/pebble-web.dev.js.map +1 -1
  24. package/dist/pebble-web.es.dev.js +70 -239
  25. package/dist/pebble-web.es.dev.js.map +1 -1
  26. package/dist/pebble-web.es.js +64 -233
  27. package/dist/pebble-web.es.js.map +1 -1
  28. package/dist/pebble-web.js +158 -352
  29. package/dist/pebble-web.js.map +1 -1
  30. package/dist/pebble-web.module.dev.js +165 -347
  31. package/dist/pebble-web.module.dev.js.map +1 -1
  32. package/dist/pebble-web.module.js +159 -341
  33. package/dist/pebble-web.module.js.map +1 -1
  34. package/dist/pebble-web.umd.dev.js +166 -360
  35. package/dist/pebble-web.umd.dev.js.map +1 -1
  36. package/dist/pebble-web.umd.js +160 -354
  37. package/dist/pebble-web.umd.js.map +1 -1
  38. package/dist/utils/index.d.ts +0 -1
  39. package/dist/utils/useragent/index.d.ts +1 -2
  40. package/package.json +3 -3
  41. package/src/components/Button.tsx +1 -3
  42. package/src/components/Calendar.tsx +4 -28
  43. package/src/components/CheckboxGroup.tsx +3 -13
  44. package/src/components/DateInput.tsx +1 -3
  45. package/src/components/DropDown.tsx +1 -3
  46. package/src/components/Input.tsx +3 -15
  47. package/src/components/Loader.tsx +1 -3
  48. package/src/components/Message.tsx +1 -3
  49. package/src/components/NativeDateInput.tsx +1 -2
  50. package/src/components/OptionGroupCheckBox.tsx +2 -14
  51. package/src/components/PhoneNumberInput.tsx +1 -7
  52. package/src/components/PopUp.tsx +1 -7
  53. package/src/components/RadioGroup.tsx +3 -20
  54. package/src/components/Search.tsx +1 -3
  55. package/src/components/SecondaryInput.tsx +2 -9
  56. package/src/components/Select.tsx +1 -13
  57. package/src/components/Tabs.tsx +1 -1
  58. package/src/components/Text.tsx +2 -7
  59. package/src/components/TimePicker.tsx +2 -2
  60. package/src/components/Toast.tsx +2 -2
  61. package/src/components/TypeAhead.tsx +3 -14
  62. package/src/components/__tests__/__snapshots__/optionGroup.test.tsx.snap +3 -0
  63. package/src/components/__tests__/__snapshots__/select.test.tsx.snap +0 -3
  64. package/src/components/__tests__/__snapshots__/timepicker.test.tsx.snap +18 -18
  65. package/src/components/__tests__/calendar.test.tsx +24 -6
  66. package/src/components/__tests__/checkboxGroup.test.tsx +8 -39
  67. package/src/components/__tests__/select.test.tsx +30 -19
  68. package/src/components/__tests__/timepicker.test.tsx +14 -4
  69. package/src/components/shared/Control.tsx +1 -3
  70. package/src/components/shared/OptionGroup.tsx +5 -23
  71. package/src/components/typings/Button.ts +0 -1
  72. package/src/components/typings/Calendar.ts +0 -1
  73. package/src/components/typings/CheckboxGroup.ts +0 -1
  74. package/src/components/typings/Control.ts +0 -1
  75. package/src/components/typings/DateInput.ts +0 -1
  76. package/src/components/typings/Dropdown.ts +0 -1
  77. package/src/components/typings/Input.ts +0 -1
  78. package/src/components/typings/Loader.ts +0 -1
  79. package/src/components/typings/Message.ts +0 -1
  80. package/src/components/typings/OptionGroup.ts +0 -1
  81. package/src/components/typings/OptionGroupCheckBox.ts +0 -1
  82. package/src/components/typings/OptionGroupRadio.ts +0 -1
  83. package/src/components/typings/PhoneNumberInput.ts +0 -1
  84. package/src/components/typings/PopUp.ts +0 -1
  85. package/src/components/typings/RadioGroup.ts +0 -1
  86. package/src/components/typings/Search.ts +0 -1
  87. package/src/components/typings/SecondaryInput.ts +0 -1
  88. package/src/components/typings/Select.ts +0 -1
  89. package/src/components/typings/Text.ts +0 -1
  90. package/src/components/typings/Typeahead.ts +0 -1
  91. package/src/index.ts +0 -1
  92. package/src/utils/index.ts +0 -1
  93. package/src/utils/useragent/index.tsx +1 -1
  94. package/dist/utils/testIds.d.ts +0 -65
  95. package/src/components/__tests__/__snapshots__/checkboxGroup.test.tsx.snap +0 -88
  96. package/src/utils/testIds.ts +0 -119
@@ -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, (_checkbox, i) => {
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", e => e && this.show(e));
1751
+ emitter.on("showToast", this.show);
1854
1752
  emitter.on("hideToast", this.hide);
1855
1753
  }
1856
1754
  componentWillUnmount() {
1857
- emitter.off("showToast", e => e && this.show(e));
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-testid": testId,
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-testid": `${tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()}`,
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 testIds = getTestIds(testId, getRadioGroupTestIds);
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-testid": "hour-label"
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-testid": "minute-label"
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
- }, { ...this.props,
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, getCalendarTestIds, getMessageTestId, getOptionGroupCheckBoxTestIds, getOptionGroupRadioTestIds, getOptionGroupTestIds, getOptionTestId, getPhoneNumberInputTestIds, getPopUpTestIds, getRadioGroupTestIds, getSelectInputTestIds, getTestIds, getTypeaheadTestIds, mixins, styles, typography, index as utils };
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