@zohodesk/components 1.0.0-temp-121 → 1.0.0-temp-123

package/lib/ListItem/ListItemWithRadio.js

@@ -78,6 +78,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         palette = _this$props4.palette,
         id = _this$props4.id,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         title = _this$props4.title,
         isDisabled = _this$props4.isDisabled,
         disableTitle = _this$props4.disableTitle,
@@ -104,6 +105,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         customClass: customListItem,
         dataId: dataId,
+        dataSelectorId: dataSelectorId,
         onClick: this.onClick,
         onMouseOver: this.onHover,
         eleRef: this.getRef,

package/lib/ListItem/props/defaultProps.js

@@ -16,7 +16,8 @@ var ListContainerDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listContainer'
 };
 exports.ListContainerDefaultProps = ListContainerDefaultProps;
 var ListItemDefaultProps = {
@@ -32,7 +33,8 @@ var ListItemDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItem'
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {
@@ -49,7 +51,8 @@ var ListItemWithAvatarDefaultProps = {
   needAvatarTitle: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithAvatar'
 };
 exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
 var ListItemWithCheckBoxDefaultProps = {
@@ -62,7 +65,8 @@ var ListItemWithCheckBoxDefaultProps = {
   value: 'List',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithCheckBox'
 };
 exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
 var ListItemWithIconDefaultProps = {
@@ -78,7 +82,8 @@ var ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithIcon'
 };
 exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
 var ListItemWithRadioDefaultProps = {
@@ -92,6 +97,7 @@ var ListItemWithRadioDefaultProps = {
   dataId: 'listItemWithRadioComp',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithRadio'
 };
 exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;

package/lib/ListItem/props/propTypes.js

@@ -13,6 +13,7 @@ var ListContainer_Props = {
   autoHover: _propTypes["default"].bool,
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   highlight: _propTypes["default"].bool,
   href: _propTypes["default"].string,
@@ -40,6 +41,7 @@ var ListItem_Props = {
   autoHover: _propTypes["default"].bool,
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,
@@ -74,7 +76,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -91,6 +93,7 @@ var ListItemWithCheckBox_Props = {
   autoHover: _propTypes["default"].bool,
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,
@@ -118,6 +121,7 @@ var ListItemWithIcon_Props = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,
@@ -151,6 +155,7 @@ var ListItemWithRadio_Props = {
   autoHover: _propTypes["default"].bool,
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -803,6 +803,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         selectedGroupOptions = _this$props8.selectedGroupOptions,
         placeHolder = _this$props8.placeHolder,
         dataId = _this$props8.dataId,
+        dataSelectorId = _this$props8.dataSelectorId,
         isReadOnly = _this$props8.isReadOnly,
         isDisabled = _this$props8.isDisabled,
         isPopupOpen = _this$props8.isPopupOpen,
@@ -864,7 +865,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -359,7 +359,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         customProps = _this$props5.customProps,
         needEffect = _this$props5.needEffect,
         disabledOptions = _this$props5.disabledOptions,
-        isLoading = _this$props5.isLoading;
+        isLoading = _this$props5.isLoading,
+        dataSelectorId = _this$props5.dataSelectorId;
       var _customProps$Suggesti = customProps.SuggestionsProps,
         SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
         _customProps$DropBoxP = customProps.DropBoxProps,
@@ -398,7 +399,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/MultiSelect.js

@@ -831,6 +831,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         title = _this$props14.title,
         needResponsive = _this$props14.needResponsive,
         dataId = _this$props14.dataId,
+        dataSelectorId = _this$props14.dataSelectorId,
         isSearching = _this$props14.isSearching,
         borderColor = _this$props14.borderColor,
         textBoxClass = _this$props14.textBoxClass,
@@ -884,7 +885,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -105,6 +105,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         isDisabled = _this$props.isDisabled,
         title = _this$props.title,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         needResponsive = _this$props.needResponsive,
         borderColor = _this$props.borderColor,
         textBoxClass = _this$props.textBoxClass,
@@ -146,7 +147,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/props/defaultProps.js

@@ -40,7 +40,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   palette: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -71,7 +72,8 @@ var AdvancedMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedMultiSelect'
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {
@@ -112,7 +114,8 @@ var MultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   boxSize: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelect'
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -145,7 +148,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelectWithAvatar'
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -57,7 +57,8 @@ var AdvancedGroupMultiSelect_propTypes = {
   isSearchClearOnSelect: _propTypes["default"].bool,
   palette: _propTypes["default"].oneOf(['default', 'dark']),
   needEffect: true,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 var AdvancedMultiSelect_propTypes = {
@@ -141,7 +142,8 @@ var AdvancedMultiSelect_propTypes = {
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;
 var EmptyState_propTypes = {
@@ -246,7 +248,8 @@ var MultiSelect_propTypes = {
   getFooter: _propTypes["default"].func,
   needEffect: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -326,7 +329,8 @@ var MultiSelectWithAvatar_propTypes = {
   customChildrenClass: _propTypes["default"].string,
   isSearchClearOnSelect: _propTypes["default"].bool,
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.MultiSelectWithAvatar_propTypes = MultiSelectWithAvatar_propTypes;
 var SelectedOptions_propTypes = {

package/lib/Ribbon/Ribbon.js

@@ -37,10 +37,12 @@ var Ribbon = /*#__PURE__*/function (_React$Component) {
         palette = _this$props.palette,
         size = _this$props.size,
         dataId = _this$props.dataId,
-        customClass = _this$props.customClass;
+        customClass = _this$props.customClass,
+        dataSelectorId = _this$props.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_RibbonModule["default"].basic, " ").concat(customClass, " ").concat(type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? "".concat(_RibbonModule["default"]["plain_".concat(palette)], " \n                 ").concat(type === 'box' ? _RibbonModule["default"]["box_".concat(palette)] : '', " ").concat(type === 'stamp' ? _RibbonModule["default"]["stamp_".concat(palette)] : '') : "".concat(_RibbonModule["default"]["palette_".concat(palette)], " ").concat(type === 'default' ? _RibbonModule["default"]["default_".concat(palette)] : '') : '', " ").concat(_RibbonModule["default"][size], " ").concat(_RibbonModule["default"][type]),
-        "data-id": dataId
+        "data-id": dataId,
+        "data-selector-id": dataSelectorId
       }, type === 'sticker' ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _RibbonModule["default"].after
       }) : null, children ? /*#__PURE__*/_react["default"].createElement("span", {

package/lib/Ribbon/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   text: 'Ribbon',
   type: 'default',
   dataId: 'ribbonComp',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'ribbon'
 };
 exports.defaultProps = defaultProps;

package/lib/Ribbon/props/propTypes.js

@@ -13,6 +13,7 @@ var propTypes = {
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
   text: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/Select/GroupSelect.js

@@ -565,7 +565,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         i18nKeys = _this$props9.i18nKeys,
         htmlId = _this$props9.htmlId,
         iconOnHover = _this$props9.iconOnHover,
-        isLoading = _this$props9.isLoading;
+        isLoading = _this$props9.isLoading,
+        dataSelectorId = _this$props9.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -588,7 +589,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/Select.js

@@ -684,7 +684,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         customProps = _this$props11.customProps,
         autoComplete = _this$props11.autoComplete,
         ariaLabelledby = _this$props11.ariaLabelledby,
-        isLoading = _this$props11.isLoading;
+        isLoading = _this$props11.isLoading,
+        dataSelectorId = _this$props11.dataSelectorId;
       var _i18nKeys = i18nKeys,
         TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
         _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -711,7 +712,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isParentBased || isReadOnly || isDisabled ? _SelectModule["default"].container : '', " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/SelectWithAvatar.js

@@ -162,7 +162,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         i18nKeys = _this$props.i18nKeys,
         htmlId = _this$props.htmlId,
         needEffect = _this$props.needEffect,
-        isLoading = _this$props.isLoading;
+        isLoading = _this$props.isLoading,
+        dataSelectorId = _this$props.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -184,7 +185,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/Select/SelectWithIcon.js

@@ -353,7 +353,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         iconClass = _this$props7.iconClass,
         i18nKeys = _this$props7.i18nKeys,
         htmlId = _this$props7.htmlId,
-        isLoading = _this$props7.isLoading;
+        isLoading = _this$props7.isLoading,
+        dataSelectorId = _this$props7.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -367,7 +368,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       var ariaErrorId = this.getNextAriaId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/props/defaultProps.js

@@ -12,6 +12,7 @@ var Select_defaultProps = {
   autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
   autoSelectOnType: true,
   dataId: 'selectComponent',
+  dataSelectorId: 'select',
   dropBoxSize: 'small',
   isDefaultSelectValue: true,
   isDisabled: false,
@@ -46,6 +47,7 @@ var GroupSelect_defaultProps = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
+  dataSelectorId: 'groupSelect',
   isDefaultSelectValue: true,
   isDisabled: false,
   isReadOnly: false,
@@ -92,6 +94,7 @@ var SelectWithAvatar_defaultProps = {
   textField: 'text',
   valueField: 'id',
   dataId: 'selectWithAvatar',
+  dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
   i18nKeys: {},
@@ -108,5 +111,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -91,7 +91,8 @@ var Select_propTypes = {
     listItemProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.Select_propTypes = Select_propTypes;
 var GroupSelect_propTypes = {
@@ -169,7 +170,8 @@ var GroupSelect_propTypes = {
     noMoreText: _propTypes["default"].string,
     searchEmptyText: _propTypes["default"].string
   }),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.GroupSelect_propTypes = GroupSelect_propTypes;
 var SelectWithAvatar_propTypes = {
@@ -228,7 +230,8 @@ var SelectWithAvatar_propTypes = {
   valueField: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
 var SelectWithIcon_propTypes = {
@@ -275,6 +278,7 @@ var SelectWithIcon_propTypes = {
   togglePopup: _propTypes["default"].func,
   valueKey: _propTypes["default"].string,
   htmlId: _propTypes["default"].string,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/Switch/Switch.js

@@ -58,6 +58,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         title = _this$props2.title,
         disableTitle = _this$props2.disableTitle,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         customClass = _this$props2.customClass,
         customProps = _this$props2.customProps;
       var _customProps$SwitchPr = customProps.SwitchProps,
@@ -82,7 +83,8 @@ var Switch = /*#__PURE__*/function (_React$Component) {
         "data-title": disabled ? disableTitle : title,
         "aria-checked": checked,
         role: "switch",
-        tabIndex: isReadOnly || disabled ? '-1' : '0'
+        tabIndex: isReadOnly || disabled ? '-1' : '0',
+        dataSelectorId: dataSelectorId
       }, SwitchProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_SwitchModule["default"][size], " ").concat(customSwitchSize)
       }, /*#__PURE__*/_react["default"].createElement("input", {

package/lib/Switch/props/defaultProps.js

@@ -12,6 +12,7 @@ var defaultProps = {
   size: 'medium',
   isReadOnly: false,
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'switch'
 };
 exports.defaultProps = defaultProps;

package/lib/Switch/props/propTypes.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   id: _propTypes["default"].string.isRequired,

package/lib/Tab/Tab.js

@@ -36,6 +36,7 @@ function Tab(_ref) {
     children = _ref.children,
     className = _ref.className,
     dataId = _ref.dataId,
+    dataSelectorId = _ref.dataSelectorId,
     title = _ref.title,
     titlePosition = _ref.titlePosition,
     activeClass = _ref.activeClass,
@@ -93,7 +94,8 @@ function Tab(_ref) {
     "aria-controls": id,
     "aria-selected": isActive ? true : false,
     tabIndex: isLink ? undefined : isActive && !isDisabled ? '0' : '0',
-    "aria-label": text ? text : null
+    "aria-label": text ? text : null,
+    dataSelectorId: dataSelectorId
   }, customProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: "row",
     align: "both",

package/lib/Tab/TabContent.js

@@ -16,7 +16,8 @@ var TabContent = function TabContent(_ref) {
   var children = _ref.children,
     scroll = _ref.scroll,
     dataId = _ref.dataId,
-    id = _ref.id;
+    id = _ref.id,
+    dataSelectorId = _ref.dataSelectorId;
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     className: _TabContentModule["default"].container,
     scroll: scroll,
@@ -24,7 +25,8 @@ var TabContent = function TabContent(_ref) {
     isScrollAttribute: true,
     "aria-labelledby": id,
     tabindex: "-1",
-    role: "tabpanel"
+    role: "tabpanel",
+    dataSelectorId: dataSelectorId
   }, children);
 };
 TabContent.defaultProps = _defaultProps.TabContent_defaultProps;

package/lib/Tab/TabContentWrapper.js

@@ -16,13 +16,15 @@ var TabContentWrapper = function TabContentWrapper(_ref) {
     children = _ref.children,
     dataId = _ref.dataId,
     selectedTab = _ref.selectedTab,
-    onScroll = _ref.onScroll;
+    onScroll = _ref.onScroll,
+    dataSelectorId = _ref.dataSelectorId;
   return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     flexible: true,
     style: style,
     dataId: dataId,
     className: className,
-    onScroll: onScroll
+    onScroll: onScroll,
+    dataSelectorId: dataSelectorId
   }, _react["default"].Children.map(children, function (child) {
     return /*#__PURE__*/_react["default"].isValidElement(child) && child.props.id === selectedTab ? child : null;
   }));

package/lib/Tab/TabWrapper.js

@@ -30,7 +30,8 @@ function TabWrapper(_ref) {
     needAppearance = _ref.needAppearance,
     align = _ref.align,
     dataId = _ref.dataId,
-    children = _ref.children;
+    children = _ref.children,
+    dataSelectorId = _ref.dataSelectorId;
   var _useState = (0, _react.useState)(!hookToDisableInternalState ? defaultTab || 0 : null),
     _useState2 = _slicedToArray(_useState, 2),
     selectedTabInternal = _useState2[0],
@@ -43,7 +44,8 @@ function TabWrapper(_ref) {
   }, [hookToDisableInternalState, onSelect]);
   return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
     alignBox: align === 'vertical' ? 'column' : 'row',
-    dataId: dataId
+    dataId: dataId,
+    dataSelectorId: dataSelectorId
   }, _react["default"].Children.map(children, function (child) {
     var TabsChild = child.type;
     var selectedTab = hookToDisableInternalState ? defaultTab : selectedTabInternal;