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