pebble-web 2.25.1 → 2.25.2-alpha.0

package/dist/pebble-web.es.js

@@ -431,7 +431,8 @@ const spinnerStyle = /*#__PURE__*/css({ ...flexSpaceBetween,
 const Loader = ({
   color = colors.gray.darker,
   scale = 1,
-  className
+  className,
+  testId
 }) => {
   const style = {
     backgroundColor: color
@@ -440,7 +441,8 @@ const Loader = ({
     className: cx(spinnerStyle, className),
     style: {
       transform: `scale(${scale})`
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/createElement("div", {
     style: style
   }), /*#__PURE__*/createElement("div", {
@@ -462,7 +464,8 @@ const Button = ({
   loading,
   outline,
   size = "small",
-  buttonProps
+  buttonProps,
+  testId
 }) => {
   const disableAction = disabled || loading;
   const _outline = size === "x-small" || !!outline;
@@ -473,7 +476,8 @@ const Button = ({
     style: {
       width
     },
-    disabled: disabled
+    disabled: disabled,
+    "data-testid": testId
   }, buttonProps), loading ? /*#__PURE__*/createElement(Loader, {
     color: colors.white.base,
     scale: 0.4
@@ -817,7 +821,8 @@ function Control(props) {
     children = ControlView,
     type,
     className,
-    indeterminate
+    indeterminate,
+    testId
   } = props;
   return /*#__PURE__*/createElement("div", {
     className: cx(controlStyle, className),
@@ -830,7 +835,8 @@ function Control(props) {
     onClick: !disabled ? e => onChange && onChange({
       value,
       checked: !checked
-    }, e) : undefined
+    }, e) : undefined,
+    "data-testid": testId
   }, children(props));
 }
 const ControlView = ({
@@ -1031,7 +1037,8 @@ class DropDown extends PureComponent {
       disabled,
       labelClassName,
       controlled,
-      onOutsideClick
+      onOutsideClick,
+      testId
     } = this.props;
     const _isDropDownOpen = controlled ? !!this.props.isOpen : this.state.isOpen;
     return /*#__PURE__*/createElement(OutsideClick, {
@@ -1059,7 +1066,8 @@ class DropDown extends PureComponent {
       isOpen: _isDropDownOpen,
       onClick: this.toggleDropdown,
       disabled: disabled,
-      className: labelClassName
+      className: labelClassName,
+      testId: testId
     }, buttonLabel))), /*#__PURE__*/createElement(MountTransition, {
       visible: _isDropDownOpen
     }, transitionStyles => /*#__PURE__*/createElement(animated.div, {
@@ -1267,7 +1275,8 @@ class Input extends PureComponent {
       onClick,
       loading,
       leftElement,
-      rightElement
+      rightElement,
+      testId
     } = this.props;
     const {
       isFocused
@@ -1307,9 +1316,13 @@ class Input extends PureComponent {
       onClick: onClick
     }, /*#__PURE__*/createElement("div", {
       className: _inputWrapperClassName
-    }, 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({
+    }, leftElement === null || leftElement === void 0 ? void 0 : leftElement(), this.props.textArea ? /*#__PURE__*/createElement("textarea", Object.assign({}, _inputProps, this.props.inputProps, {
+      "data-testid": testId
+    })) : /*#__PURE__*/createElement("input", Object.assign({
       type: type
-    }, _inputProps, this.props.inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+    }, _inputProps, this.props.inputProps, {
+      "data-testid": testId
+    })), loading && /*#__PURE__*/createElement(Loader, {
       color: colors.violet.base,
       scale: 0.6,
       className: _loadingStyle
@@ -1350,7 +1363,8 @@ class NativeDateInput extends PureComponent {
       inputProps,
       placeholder,
       value,
-      disabled
+      disabled,
+      testId
     } = this.props;
     return /*#__PURE__*/createElement(Input, Object.assign({
       onChange: this.onDateInputChange,
@@ -1360,7 +1374,8 @@ class NativeDateInput extends PureComponent {
       placeholder: placeholder,
       fixLabelAtTop: true
     }, inputProps, {
-      disabled: disabled
+      disabled: disabled,
+      testId: testId
     }));
   }
 }
@@ -1449,7 +1464,8 @@ class DateInput extends PureComponent {
       initiallyOpen,
       onOutsideClick,
       controlled,
-      isOpen
+      isOpen,
+      testId
     } = this.props;
     const _wrapperClassName = cx(wrapperStyle$3, wrapperClassName);
     const _dropDownClassName = cx(dropDownClassName, this.props.dropDownClassName);
@@ -1481,7 +1497,8 @@ class DateInput extends PureComponent {
           onChange
         },
         className: cx(inputStyle$1, inputProps && inputProps.className),
-        disabled: disabled
+        disabled: disabled,
+        testId: testId
       }))),
       className: _wrapperClassName,
       placement: placement,
@@ -1748,11 +1765,11 @@ class Toast extends PureComponent {
     emitter.emit("hideToast");
   }
   componentDidMount() {
-    emitter.on("showToast", this.show);
+    emitter.on("showToast", e => e && this.show(e));
     emitter.on("hideToast", this.hide);
   }
   componentWillUnmount() {
-    emitter.off("showToast", this.show);
+    emitter.off("showToast", e => e && this.show(e));
     emitter.off("hideToast", this.hide);
   }
   render() {
@@ -1809,7 +1826,8 @@ const messageWrapper = /*#__PURE__*/css({
 const Message = ({
   intent,
   className,
-  text
+  text,
+  testId
 }) => {
   const bColor = _colors[intent];
   const iconClass = cx("pi", {
@@ -1820,7 +1838,8 @@ const Message = ({
     className: cx(messageWrapper, className),
     style: {
       backgroundColor: bColor
-    }
+    },
+    "data-testid": testId
   }, /*#__PURE__*/createElement("i", {
     className: iconClass
   }), text);
@@ -2035,7 +2054,8 @@ class Search extends PureComponent {
       className,
       clearable,
       value,
-      loading
+      loading,
+      testId
     } = this.props;
     const wrapperClassName = cx(searchWrapperStyle, {
       __pebble__search__small: type === "small",
@@ -2056,7 +2076,9 @@ class Search extends PureComponent {
       },
       ref: this.searchInputRef,
       value: value
-    }, inputProps)), loading && /*#__PURE__*/createElement(Loader, {
+    }, inputProps, {
+      "data-testid": testId
+    })), loading && /*#__PURE__*/createElement(Loader, {
       scale: 0.4,
       color: colors.violet.base
     }), clearable && /*#__PURE__*/createElement("div", {
@@ -2115,6 +2137,58 @@ const searchBoxScrolledStyle = /*#__PURE__*/css({
   padding: onScrollPadding
 }, ";label:searchBoxScrolledStyle;" + ( "" ));
 
+function getTestIds(id, builder) {
+  return id ? builder(id) : {};
+}
+function getOptionTestId(id, index) {
+  return `${id}-${index}`;
+}
+function getRadioGroupTestIds(id) {
+  return {
+    optionId: `${id}-option`
+  };
+}
+function getOptionGroupTestIds(id) {
+  return {
+    searchBoxId: `${id}-search`,
+    optionId: `${id}-option`,
+    selectVisibleId: `${id}-select-visible`,
+    clearVisibleId: `${id}-clear-visible`
+  };
+}
+const getOptionGroupRadioTestIds = id => getOptionGroupTestIds(id);
+function getOptionGroupCheckBoxTestIds(id) {
+  return {
+    applyButtonId: `${id}-apply-btn`,
+    clearButtonId: `${id}-clear-btn`,
+    ...getOptionGroupTestIds(id)
+  };
+}
+function getPhoneNumberInputTestIds(id) {
+  return {
+    phoneId: `${id}-phone`,
+    countryId: `${id}-country`,
+    countryInputIds: getSelectInputTestIds(`${id}-country`)
+  };
+}
+function getSelectInputTestIds(id, multiSelect = false) {
+  const optionGroupId = `${id}-option-group`;
+  const baseIds = {
+    inputId: `${id}-input`,
+    optionGroupId
+  };
+  return { ...(multiSelect ? getOptionGroupCheckBoxTestIds(optionGroupId) : getOptionGroupRadioTestIds(optionGroupId)),
+    ...baseIds
+  };
+}
+function getTypeaheadTestIds(id) {
+  const optionGroupId = `${id}-option-group`;
+  return {
+    optionGroupId,
+    ...getOptionGroupRadioTestIds(optionGroupId)
+  };
+}
+
 class OptionGroup extends PureComponent {
   constructor() {
     super(...arguments);
@@ -2199,12 +2273,14 @@ class OptionGroup extends PureComponent {
       className,
       isSelected,
       handleChange,
-      searchBoxProps
+      searchBoxProps,
+      testId
     } = this.props;
     const {
       isScrolled,
       highlighted
     } = this.state;
+    const testIds = getTestIds(testId, getOptionGroupTestIds);
     const _children = Children.map(children, (_option, i) => {
       const option = _option;
       let ref = this.optionsRefsSet.get(i);
@@ -2217,7 +2293,8 @@ class OptionGroup extends PureComponent {
         isActive: highlighted === i,
         isSelected: isSelected(option.props.value),
         multiSelect,
-        ref
+        ref,
+        testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
       });
     });
     const searchBoxClassName = cx(searchBoxWrapper, {
@@ -2232,7 +2309,8 @@ class OptionGroup extends PureComponent {
       inputProps: { ...(searchBoxProps && searchBoxProps.inputProps),
         onKeyDown: this.handleKeyPress,
         autoFocus: true
-      }
+      },
+      testId: testIds.searchBoxId
     }))), !!Children.count(children) && /*#__PURE__*/createElement("div", {
       ref: this.optionRef,
       style: {
@@ -2240,14 +2318,16 @@ class OptionGroup extends PureComponent {
       },
       className: cx(optionsWrapper, className),
       role: multiSelect ? "group" : "radiogroup",
-      "data-test-id": "optiongroup",
+      "data-testid": testId,
       "aria-label": searchBoxProps && searchBoxProps.placeholder
     }, advancedOptions && advancedOptionsProps && /*#__PURE__*/createElement("div", {
       className: _class
     }, /*#__PURE__*/createElement("div", {
-      onClick: advancedOptionsProps.selectVisible
+      onClick: advancedOptionsProps.selectVisible,
+      "data-testid": testIds.selectVisibleId
     }, "Select Visible"), /*#__PURE__*/createElement("div", {
-      onClick: advancedOptionsProps.clearVisible
+      onClick: advancedOptionsProps.clearVisible,
+      "data-testid": testIds.clearVisibleId
     }, "Clear Visible")), _children));
   }
 }
@@ -2312,6 +2392,7 @@ class OptionGroupCheckBox extends PureComponent {
       onClear,
       isSelected,
       onChange,
+      testId,
       ...rest
     } = this.props;
     const advancedOptionsProps = {
@@ -2319,20 +2400,24 @@ class OptionGroupCheckBox extends PureComponent {
       clearVisible: this.clearVisible,
       ...this.props.advancedOptionsProps
     };
+    const testIds = getTestIds(testId, getOptionGroupCheckBoxTestIds);
     return /*#__PURE__*/createElement("div", {
       className: cx(optionGroupCheckBoxWrap, wrapClassName)
     }, /*#__PURE__*/createElement(OptionGroup, Object.assign({}, rest, {
       advancedOptionsProps: advancedOptionsProps,
       isSelected: isSelected || this.isSelected,
       handleChange: this.handleChange,
-      multiSelect: true
+      multiSelect: true,
+      testId: testId
     })), (onApply || onClear) && /*#__PURE__*/createElement("div", {
       className: optionGroupCheckBoxButtonWrap
     }, onClear && /*#__PURE__*/createElement(Button, {
       type: "secondary",
-      onClick: onClear
+      onClick: onClear,
+      testId: testIds.clearButtonId
     }, "Clear"), onApply && /*#__PURE__*/createElement(Button, {
-      onClick: this.onApply
+      onClick: this.onApply,
+      testId: testIds.applyButtonId
     }, "Apply")));
   }
 }
@@ -2431,8 +2516,11 @@ function Select(props) {
     disabled,
     isSelected,
     placement,
-    modifiers
+    modifiers,
+    testId
   } = props;
+  const singleSelectTestIds = getTestIds(testId, id => getSelectInputTestIds(id, false));
+  const multiSelectTestIds = getTestIds(testId, id => getSelectInputTestIds(id, true));
   return /*#__PURE__*/createElement("div", {
     className: cx(selectWrapper, className, {
       [relativePosition]: !!fullWidthDropdown
@@ -2454,7 +2542,8 @@ function Select(props) {
         onClick: disabled ? undefined : () => {
           toggleDropdown();
           onDropdownToggle(isOpen);
-        }
+        },
+        "data-testid": singleSelectTestIds.inputId
       }, /*#__PURE__*/createElement(Input, Object.assign({
         className: selectInputWrapper,
         inputClassName: selectInput,
@@ -2503,7 +2592,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         })
-      }, commonProps), children);
+      }, commonProps, {
+        testId: multiSelectTestIds.optionGroupId
+      }), children);
     } else {
       return /*#__PURE__*/createElement(OptionGroupRadio, Object.assign({
         selected: props.selected,
@@ -2512,7 +2603,9 @@ function Select(props) {
           onDropdownToggle(isOpen);
           toggle();
         }
-      }, commonProps), children);
+      }, commonProps, {
+        testId: singleSelectTestIds.optionGroupId
+      }), children);
     }
   }));
 }
@@ -2558,8 +2651,10 @@ class PhoneNumberInput extends Component {
       selectProps,
       inputProps,
       required,
-      placeholder
+      placeholder,
+      testId
     } = this.props;
+    const testIds = getTestIds(testId, getPhoneNumberInputTestIds);
     return /*#__PURE__*/createElement("div", {
       className: cx(wrapper, className)
     }, /*#__PURE__*/createElement("label", {
@@ -2574,12 +2669,15 @@ class PhoneNumberInput extends Component {
       value: countryCode + "",
       selected: countryCode
     }, selectProps, {
-      className: cx(selectStyle, selectProps && selectProps.className)
+      className: cx(selectStyle, selectProps && selectProps.className),
+      testId: testIds.countryId
     }), this.props.children), /*#__PURE__*/createElement(Input, Object.assign({
       onChange: this.onNumberChange,
       placeholder: "",
       value: phone
-    }, inputProps)));
+    }, inputProps, {
+      testId: testIds.phoneId
+    })));
   }
 }
 
@@ -2799,7 +2897,7 @@ class Tabs extends PureComponent {
       const isSelected = this.state.selectedTab === tab;
       return /*#__PURE__*/createElement("span", {
         key: `${tab}-${i}`,
-        "data-test-id": `${tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()}`,
+        "data-testid": `${tab.replace(/\d/g, "").replace("(", "").replace(")", "").trim()}`,
         className: cx(_className, isSelected && selectedTabStyle, isSelected && this.props.selectedTabClassName),
         onClick: () => {
           this.setState({
@@ -2965,14 +3063,17 @@ class RadioGroup extends PureComponent {
       selected,
       className,
       name,
-      disabled
+      disabled,
+      testId
     } = this.props;
-    const _children = Children.map(children, _radio => {
+    const testIds = getTestIds(testId, getRadioGroupTestIds);
+    const _children = Children.map(children, (_radio, i) => {
       const radio = _radio;
       return cloneElement(radio, {
         onChange: this.handleChange,
         checked: selected === radio.props.value,
-        disabled
+        disabled,
+        testId: testIds.optionId ? getOptionTestId(testIds.optionId, i) : undefined
       });
     });
     return /*#__PURE__*/createElement("div", {
@@ -3173,7 +3274,8 @@ class SecondaryInput extends PureComponent {
       message,
       readOnly,
       loading,
-      className
+      className,
+      testId
     } = this.props;
     const {
       isFocused
@@ -3203,7 +3305,9 @@ class SecondaryInput extends PureComponent {
       },
       onFocus: this.addFocus,
       onBlur: this.removeFocus
-    }, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps)), /*#__PURE__*/createElement("label", {
+    }, /*#__PURE__*/createElement("input", Object.assign({}, _inputProps, this.props.inputProps, {
+      "data-testid": testId
+    })), /*#__PURE__*/createElement("label", {
       className: placeholderClassName
     }, placeholder, required && /*#__PURE__*/createElement("span", {
       style: {
@@ -3828,13 +3932,15 @@ const Text = ({
   typography,
   color = colors.gray.darker,
   children,
-  className
+  className,
+  testId
 }) => {
   const _className = /*#__PURE__*/css({ ...typography,
     color
   },  "" );
   return /*#__PURE__*/React__default.createElement("span", {
-    className: cx(_className, className)
+    className: cx(_className, className),
+    "data-testid": testId
   }, children);
 };
 
@@ -3921,7 +4027,7 @@ const TimePicker = props => {
         toggleDropdown();
       },
       className: buttonStyle,
-      "data-test-id": "hour-label"
+      "data-testid": "hour-label"
     }, /*#__PURE__*/createElement("span", {
       className: /*#__PURE__*/css( {
         name: "1czd1rs-TimePicker",
@@ -3964,7 +4070,7 @@ const TimePicker = props => {
         toggleDropdown();
       },
       className: buttonStyle,
-      "data-test-id": "minute-label"
+      "data-testid": "minute-label"
     }, /*#__PURE__*/createElement("span", {
       className: /*#__PURE__*/css( {
         name: "1czd1rs-TimePicker",
@@ -4089,7 +4195,8 @@ function defaultSearchBox({
     errorMessage: props.errorMessage,
     loading: props.loading,
     required: props.required,
-    disabled: props.disabled
+    disabled: props.disabled,
+    testId: props.testId
   }));
 }
 class TypeAhead extends PureComponent {
@@ -4126,8 +4233,10 @@ class TypeAhead extends PureComponent {
       className,
       searchBox = defaultSearchBox,
       dropdownClassName,
-      children
+      children,
+      testId
     } = this.props;
+    const testIds = getTestIds(testId, getTypeaheadTestIds);
     const {
       showSuggestions,
       value
@@ -4142,14 +4251,17 @@ class TypeAhead extends PureComponent {
       registerChange: this.registerChange,
       onFocus: this.onFocus,
       value
-    }, this.props), /*#__PURE__*/createElement(MountTransition, {
+    }, { ...this.props,
+      testId: testIds.searchBoxId
+    }), /*#__PURE__*/createElement(MountTransition, {
       visible: showSuggestions,
       native: true
     }, transitionStyles => /*#__PURE__*/createElement(animated.div, {
       style: transitionStyles,
       className: cx(optionsWrapper$1, dropdownClassName)
     }, /*#__PURE__*/createElement(OptionGroupRadio, {
-      onChange: this.onSelect
+      onChange: this.onSelect,
+      testId: testIds.optionGroupId
     }, children))));
   }
 }
@@ -4210,7 +4322,16 @@ var index = /*#__PURE__*/Object.freeze({
     capitalize: capitalize,
     getShortenedNumber: getShortenedNumber,
     initGoogleAnalytics: initGoogleAnalytics,
-    isDesktop: isDesktop
+    isDesktop: isDesktop,
+    getTestIds: getTestIds,
+    getOptionTestId: getOptionTestId,
+    getRadioGroupTestIds: getRadioGroupTestIds,
+    getOptionGroupTestIds: getOptionGroupTestIds,
+    getOptionGroupRadioTestIds: getOptionGroupRadioTestIds,
+    getOptionGroupCheckBoxTestIds: getOptionGroupCheckBoxTestIds,
+    getPhoneNumberInputTestIds: getPhoneNumberInputTestIds,
+    getSelectInputTestIds: getSelectInputTestIds,
+    getTypeaheadTestIds: getTypeaheadTestIds
 });
 
 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 };