@zohodesk/dot 1.0.0-beta.246 → 1.0.0-beta.248

package/lib/avatar/AvatarIcon/AvatarIcon.js

@@ -48,7 +48,8 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
         title = _this$props.title,
         borderOnActive = _this$props.borderOnActive,
         borderOnHover = _this$props.borderOnHover,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        dataSelectorId = _this$props.dataSelectorId;
       var _customProps$AvatarIc = customProps.AvatarIconProps,
         AvatarIconProps = _customProps$AvatarIc === void 0 ? {} : _customProps$AvatarIc;
       var border = borderOnHover || onClick;
@@ -59,7 +60,8 @@ var AvatarIcon = /*#__PURE__*/function (_React$Component) {
         "data-title": title,
         isInline: true,
         align: "both",
-        isCover: false
+        isCover: false,
+        dataSelectorId: dataSelectorId
       }, AvatarIconProps), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: name,
         size: iconSize,

package/lib/avatar/AvatarIcon/props/defaultProps.js

@@ -15,6 +15,7 @@ var defaultProps = {
   iconColor: 'default',
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarIcon'
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarIcon/props/propTypes.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   iconClass: _propTypes["default"].string,
   iconColor: _propTypes["default"].oneOf(['default', 'primary', 'success', 'danger', 'smoke18', 'grey', 'dark']),
   iconSize: _propTypes["default"].string,

package/lib/avatar/AvatarStatus/AvatarStatus.js

@@ -49,7 +49,9 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         textPalette = _this$props.textPalette,
         customTextClass = _this$props.customTextClass,
         statusTitle = _this$props.statusTitle,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        dataSelectorId = _this$props.dataSelectorId,
+        needDefaultBorder = _this$props.needDefaultBorder;
       var _customProps$AvatarSt = customProps.AvatarStatusProps,
         AvatarStatusProps = _customProps$AvatarSt === void 0 ? {} : _customProps$AvatarSt,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -58,7 +60,8 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_AvatarStatusModule["default"].container, " ").concat(className, " ")
       }, AvatarStatusProps, {
         tabIndex: "0",
-        "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle)
+        "aria-label": "".concat(title, ", ").concat(name, ", ").concat(statusTitle),
+        "data-selector-id": dataSelectorId
       }), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         src: src,
         name: name,
@@ -72,6 +75,7 @@ var AvatarStatus = /*#__PURE__*/function (_React$Component) {
         initial: initial,
         shape: shape,
         needTitle: needTitle,
+        needDefaultBorder: needDefaultBorder,
         needBorder: needBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
         "data-title": statusTitle,

package/lib/avatar/AvatarStatus/props/defaultProps.js

@@ -11,6 +11,9 @@ var defaultProps = {
   className: '',
   palette: 'info',
   statusTitle: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarStatus',
+  needDefaultBorder: false,
+  needBorder: false
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarStatus/props/propTypes.js

@@ -4,28 +4,27 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.propTypes = void 0;
-var _propTypes = _interopRequireDefault(require("prop-types"));
+var _propTypes2 = _interopRequireDefault(require("prop-types"));
+var _propTypes;
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-var propTypes = {
-  className: _propTypes["default"].string,
-  customTextClass: _propTypes["default"].string,
-  dataId: _propTypes["default"].string,
-  initial: _propTypes["default"].string,
-  name: _propTypes["default"].string,
-  needBorder: _propTypes["default"].bool,
-  needTitle: _propTypes["default"].bool,
-  onClick: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
-  shape: _propTypes["default"].string,
-  size: _propTypes["default"].string,
-  src: _propTypes["default"].string,
-  state: _propTypes["default"].string,
-  statusTitle: _propTypes["default"].string,
-  textPalette: _propTypes["default"].oneOf(['white', 'black']),
-  title: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    AvatarStatusProps: _propTypes["default"].object,
-    AvatarProps: _propTypes["default"].object
-  })
-};
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+var propTypes = (_propTypes = {
+  className: _propTypes2["default"].string,
+  customTextClass: _propTypes2["default"].string,
+  dataId: _propTypes2["default"].string,
+  initial: _propTypes2["default"].string,
+  name: _propTypes2["default"].string,
+  needBorder: _propTypes2["default"].bool,
+  needTitle: _propTypes2["default"].bool,
+  onClick: _propTypes2["default"].func,
+  palette: _propTypes2["default"].oneOf(['primary', 'secondary', 'info', 'default']),
+  shape: _propTypes2["default"].string,
+  size: _propTypes2["default"].string,
+  src: _propTypes2["default"].string,
+  state: _propTypes2["default"].string,
+  needDefaultBorder: _propTypes2["default"].bool
+}, _defineProperty(_propTypes, "needBorder", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusTitle", _propTypes2["default"].string), _defineProperty(_propTypes, "textPalette", _propTypes2["default"].oneOf(['white', 'black'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "dataSelectorId", _propTypes2["default"].string), _defineProperty(_propTypes, "customProps", _propTypes2["default"].shape({
+  AvatarStatusProps: _propTypes2["default"].object,
+  AvatarProps: _propTypes2["default"].object
+})), _propTypes);
 exports.propTypes = propTypes;

package/lib/avatar/AvatarThread/AvatarThread.js

@@ -56,14 +56,16 @@ var AvatarThread = /*#__PURE__*/function (_React$Component) {
         needTitle = _this$props.needTitle,
         customProps = _this$props.customProps,
         iconClass = _this$props.iconClass,
-        getCustomThread = _this$props.getCustomThread;
+        getCustomThread = _this$props.getCustomThread,
+        dataSelectorId = _this$props.dataSelectorId;
       var _customProps$AvatarTh = customProps.AvatarThreadProps,
         AvatarThreadProps = _customProps$AvatarTh === void 0 ? {} : _customProps$AvatarTh,
         _customProps$AvatarPr = customProps.AvatarProps,
         AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       var hoverEffect = showOnHover ? _AvatarThreadModule["default"].hover : '';
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: "".concat(_AvatarThreadModule["default"].container, " ").concat(onClick ? _AvatarThreadModule["default"].pointer : '', " ").concat(hoverEffect)
+        className: "".concat(_AvatarThreadModule["default"].container, " ").concat(onClick ? _AvatarThreadModule["default"].pointer : '', " ").concat(hoverEffect),
+        "data-selector-id": dataSelectorId
       }, AvatarThreadProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         initial: initial,
         src: src,

package/lib/avatar/AvatarThread/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   borderPalette: 'default',
   needBorder: true,
   needBackground: true,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarThread'
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarThread/props/propTypes.js

@@ -24,6 +24,7 @@ var propTypes = {
   palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
   showOnHover: _propTypes["default"].bool,
   size: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   src: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
   title: _propTypes["default"].string,

package/lib/avatar/AvatarUser/AvatarUser.js

@@ -46,6 +46,7 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         isPortal = _this$props.isPortal,
         isLocked = _this$props.isLocked,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         needTitle = _this$props.needTitle,
         needDelete = _this$props.needDelete,
         initial = _this$props.initial,
@@ -72,7 +73,8 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         lockTitle = _i18nKeys$lockTitle === void 0 ? 'Locked' : _i18nKeys$lockTitle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: "".concat(_AvatarUserModule["default"].container, " ").concat(_AvatarUserModule["default"][size]),
-        "data-id": dataId || name || iconName
+        "data-id": dataId || name || iconName,
+        "data-selector-id": dataSelectorId
       }, AvatarUserProps), iconName ? /*#__PURE__*/_react["default"].createElement(_AvatarIcon["default"], _extends({
         name: iconName,
         iconSize: iconSize,

package/lib/avatar/AvatarUser/props/defaultProps.js

@@ -9,6 +9,7 @@ var defaultProps = {
   size: 'medium',
   needDelete: false,
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarUser'
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarUser/props/propTypes.js

@@ -27,6 +27,7 @@ var propTypes = {
   src: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
   title: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   alternateSrc: _propTypes["default"].string,
   i18nKeys: _propTypes["default"].shape({
     paidTitle: _propTypes["default"].string,

package/lib/avatar/AvatarWithTeam/AvatarWithTeam.js

@@ -48,7 +48,9 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
         customTextClass = _this$props.customTextClass,
         teamClassName = _this$props.teamClassName,
         borderOnActive = _this$props.borderOnActive,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        dataSelectorId = _this$props.dataSelectorId,
+        teamBorderActive = _this$props.teamBorderActive;
       var _customProps$AvatarWi = customProps.AvatarWithTeamProps,
         AvatarWithTeamProps = _customProps$AvatarWi === void 0 ? {} : _customProps$AvatarWi,
         _customProps$Avatar1P = customProps.Avatar1Props,
@@ -61,7 +63,8 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
         AvatarTeam2Props = _customProps$AvatarTe2 === void 0 ? {} : _customProps$AvatarTe2;
       return /*#__PURE__*/_react["default"].createElement("span", _extends({
         className: "".concat(_AvatarWithTeamModule["default"].container, " "),
-        "data-id": "avatarWithTeamId"
+        "data-id": "avatarWithTeamId",
+        "data-selector-id": dataSelectorId
       }, AvatarWithTeamProps), isTeam && teamName ? /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         name: name,
         src: src,
@@ -108,7 +111,7 @@ var AvatarWithTeam = /*#__PURE__*/function (_React$Component) {
         customClass: {
           customAvatar: customTextClass
         },
-        borderOnActive: borderOnActive
+        borderOnActive: teamBorderActive
       }, AvatarTeam2Props))) : null);
     }
   }]);

package/lib/avatar/AvatarWithTeam/props/defaultProps.js

@@ -9,6 +9,8 @@ var defaultProps = {
   isTeam: false,
   teamClassName: '',
   borderOnActive: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarWithTeam',
+  teamBorderActive: true
 };
 exports.defaultProps = defaultProps;

package/lib/avatar/AvatarWithTeam/props/propTypes.js

@@ -15,11 +15,13 @@ var propTypes = {
   palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
   size: _propTypes["default"].string,
   src: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   teamClassName: _propTypes["default"].string,
   teamName: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
   title: _propTypes["default"].string,
   borderOnActive: _propTypes["default"].bool,
+  teamBorderActive: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     AvatarWithTeamProps: _propTypes["default"].object,
     Avatar1Props: _propTypes["default"].object,

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -537,6 +537,7 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
         getTargetRef = _this$props12.getTargetRef,
         getContainerRef = _this$props12.getContainerRef,
         dataId = _this$props12.dataId,
+        dataSelectorId = _this$props12.dataSelectorId,
         searchBoxSize = _this$props12.searchBoxSize,
         searchEmptyHint = _this$props12.searchEmptyHint,
         searchErrorText = _this$props12.searchErrorText,
@@ -589,7 +590,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         className: _ToggleDropDownModule["default"].wrapper,
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.showTogglePopup : undefined,
-        onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined
+        onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.hideTogglePopup : undefined,
+        "data-selector-id": dataSelectorId
       }, ToggleDropDownProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         onClick: !showOnHover && !isDisabled && !isReadOnly && isEditable && this.handleTogglePopup,

package/lib/dropdown/ToggleDropDown/props/defaultProps.js

@@ -26,6 +26,7 @@ var defaultProps = {
   hoverType: 'default',
   needExternalPopupState: false,
   customProps: {},
-  preventPopupClose: false
+  preventPopupClose: false,
+  dataSelectorId: 'toggleDropdown'
 };
 exports.defaultProps = defaultProps;

package/lib/dropdown/ToggleDropDown/props/propTypes.js

@@ -15,6 +15,7 @@ var propTypes = {
   children: _propTypes["default"].node,
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   dataTitle: _propTypes["default"].string,
   getContainerRef: _propTypes["default"].func,
   getNextOptions: _propTypes["default"].func,

package/lib/form/fields/CheckBoxField/CheckBoxField.js

@@ -77,6 +77,7 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
         isDisabled = _this$props3.isDisabled,
         title = _this$props3.title,
         dataId = _this$props3.dataId,
+        dataSelectorId = _this$props3.dataSelectorId,
         validationRuleMessage = _this$props3.validationRuleMessage,
         validationRulePalette = _this$props3.validationRulePalette,
         infoText = _this$props3.infoText,
@@ -118,7 +119,8 @@ var CheckBoxField = /*#__PURE__*/function (_PureComponent) {
       }, LabelProps)));
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, isDirectCol && labelElement, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isDirectCol ? _FieldsModule["default"].fieldContainer : _FieldsModule["default"].checkboxFieldContainer, " ").concat(isDirectCol && labelName ? _FieldsModule["default"]["fieldMargin_".concat(fieldSize)] : '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/form/fields/CheckBoxField/props/defaultProps.js

@@ -15,6 +15,7 @@ var defaultProps = _objectSpread({
   labelCustomClass: '',
   direction: 'row',
   lineClamp: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'checkBoxField'
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 exports.defaultProps = defaultProps;

package/lib/form/fields/CurrencyField/CurrencyField.js

@@ -109,6 +109,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         labelPalette = _this$props3.labelPalette,
         labelCustomClass = _this$props3.labelCustomClass,
         htmlId = _this$props3.htmlId,
+        dataSelectorId = _this$props3.dataSelectorId,
         lockedInfoText = _this$props3.lockedInfoText,
         isLocked = _this$props3.isLocked,
         needReadOnlyStyle = _this$props3.needReadOnlyStyle,
@@ -135,7 +136,8 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
         isLocked: isLocked,

package/lib/form/fields/CurrencyField/props/defaultProps.js

@@ -20,6 +20,7 @@ var defaultProps = _objectSpread({
   isClickable: false,
   needReadOnlyStyle: true,
   customProps: {},
-  formatCurrency: function formatCurrency() {}
+  formatCurrency: function formatCurrency() {},
+  dataSelectorId: 'currencyField'
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 exports.defaultProps = defaultProps;

package/lib/form/fields/DateField/DateField.js

@@ -111,6 +111,7 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
         title = _this$props3.title,
         popupGroup = _this$props3.popupGroup,
         dataId = _this$props3.dataId,
+        dataSelectorId = _this$props3.dataSelectorId,
         validationRuleMessage = _this$props3.validationRuleMessage,
         validationRulePalette = _this$props3.validationRulePalette,
         onKeyDown = _this$props3.onKeyDown,
@@ -140,7 +141,8 @@ var DateField = /*#__PURE__*/function (_PureComponent) {
       var getAriaId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
         isLocked: isLocked,

package/lib/form/fields/DateField/props/defaultProps.js

@@ -22,6 +22,7 @@ var defaultProps = _objectSpread({
   timeZone: null,
   i18nKeys: {},
   dataId: 'dateField',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'dateField'
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 exports.defaultProps = defaultProps;

package/lib/form/fields/FieldContainer/FieldContainer.js

@@ -42,7 +42,8 @@ var FieldContainer = /*#__PURE__*/function (_PureComponent) {
         infoText = _this$props.infoText,
         dataId = _this$props.dataId,
         renderProps = _this$props.renderProps,
-        alignContainer = _this$props.alignContainer;
+        alignContainer = _this$props.alignContainer,
+        dataSelectorId = _this$props.dataSelectorId;
       var _ePhiData$ePhiTitle = ePhiData.ePhiTitle,
         ePhiTitle = _ePhiData$ePhiTitle === void 0 ? '' : _ePhiData$ePhiTitle,
         _ePhiData$ePhiText = ePhiData.ePhiText,
@@ -58,7 +59,8 @@ var FieldContainer = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: alignContainer,
         alignBox: "row",
-        isCover: false
+        isCover: false,
+        dataSelectorId: dataSelectorId
       }, renderStart ? renderStart() : null, children, renderMiddle ? renderMiddle() : null, infoText ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-GN-info",
         iconClass: _FieldsModule["default"].infoIcon,

package/lib/form/fields/FieldContainer/props/defaultProps.js

@@ -10,6 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 var defaultProps = _objectSpread(_objectSpread({}, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)()), {}, {
   renderProps: {},
-  alignContainer: 'vertical'
+  alignContainer: 'vertical',
+  dataSelectorId: 'fieldContainer'
 });
 exports.defaultProps = defaultProps;

package/lib/form/fields/MultiSelectField/MultiSelectField.js

@@ -124,6 +124,7 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
         isDisabled = _this$props6.isDisabled,
         title = _this$props6.title,
         dataId = _this$props6.dataId,
+        dataSelectorId = _this$props6.dataSelectorId,
         validationRuleMessage = _this$props6.validationRuleMessage,
         validationRulePalette = _this$props6.validationRulePalette,
         onKeyDown = _this$props6.onKeyDown,
@@ -159,7 +160,8 @@ var MultiSelectField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
         isLocked: isLocked,

package/lib/form/fields/MultiSelectField/props/defaultProps.js

@@ -20,6 +20,7 @@ var defaultProps = _objectSpread({
   isFocusOnLabelClick: true,
   labelPalette: 'default',
   customProps: {},
-  i18nKeys: {}
+  i18nKeys: {},
+  dataSelectorId: 'multiSelectField'
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 exports.defaultProps = defaultProps;

package/lib/form/fields/PhoneField/PhoneField.js

@@ -102,6 +102,7 @@ var PhoneField = /*#__PURE__*/function (_PureComponent) {
         title = _this$props2.title,
         onBlur = _this$props2.onBlur,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         onKeyDown = _this$props2.onKeyDown,
         placeHolder = _this$props2.placeHolder,
         infoText = _this$props2.infoText,
@@ -139,7 +140,8 @@ var PhoneField = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        dataSelectorId: dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_TextBoxField["default"], _extends({

package/lib/form/fields/PhoneField/props/defaultProps.js

@@ -17,6 +17,7 @@ var defaultProps = {
   labelPalette: 'default',
   labelCustomClass: '',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'phoneField'
 };
 exports.defaultProps = defaultProps;

package/lib/form/fields/RadioField/RadioField.js

@@ -64,6 +64,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         selectedValue = _this$props2.selectedValue,
         isActive = _this$props2.isActive,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         validationRuleMessage = _this$props2.validationRuleMessage,
         validationRulePalette = _this$props2.validationRulePalette,
         isReadOnly = _this$props2.isReadOnly,
@@ -79,7 +80,8 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         ValidationMessageProps2 = _customProps$Validati2 === void 0 ? {} : _customProps$Validati2;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: labelName,
         size: "medium",

package/lib/form/fields/RadioField/props/defaultProps.js

@@ -13,6 +13,7 @@ var defaultProps = {
   labelSize: 'medium',
   labelPalette: 'default',
   isActive: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'radioField'
 };
 exports.defaultProps = defaultProps;

package/lib/form/fields/SelectField/SelectField.js

@@ -92,6 +92,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         isDisabled = _this$props3.isDisabled,
         title = _this$props3.title,
         dataId = _this$props3.dataId,
+        dataSelectorId = _this$props3.dataSelectorId,
         fieldClass = _this$props3.fieldClass,
         validationRuleMessage = _this$props3.validationRuleMessage,
         validationRulePalette = _this$props3.validationRulePalette,
@@ -128,7 +129,8 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
         isLocked: isLocked,

package/lib/form/fields/SelectField/props/defaultProps.js

@@ -21,6 +21,7 @@ var defaultProps = _objectSpread({
   labelCustomClass: '',
   isDefaultSelectValue: true,
   placeHolder: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'selectField'
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 exports.defaultProps = defaultProps;

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,13 +160,15 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
         htmlId = _this$props3.htmlId,
         boxSize = _this$props3.boxSize,
         onSelectTag = _this$props3.onSelectTag,
-        clickableTag = _this$props3.clickableTag;
+        clickableTag = _this$props3.clickableTag,
+        dataSelectorId = _this$props3.dataSelectorId;
       var showAll = this.state.showAll;
       var chipLimit = !isPopupReady ? showAll ? tagsList.length : chipNeedToShow : tagsList.length;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: " ".concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
         onClick: _General.stopBubbling,
-        "data-id": "".concat(dataId, "_tagsContainer")
+        "data-id": "".concat(dataId, "_tagsContainer"),
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         align: "vertical",

package/lib/form/fields/TagsMultiSelect/props/defaultProps.js

@@ -12,6 +12,7 @@ var defaultProps = {
   needBorder: true,
   dataId: '',
   boxSize: 'default',
-  clickableTag: false
+  clickableTag: false,
+  dataSelectorId: 'tagsMultiSelectField'
 };
 exports.defaultProps = defaultProps;

package/lib/form/fields/TagsMultiSelectField/TagsMultiSelectField.js

@@ -62,7 +62,8 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
     children = props.children,
     ePhiData = props.ePhiData,
     customProps = props.customProps,
-    clickableTag = props.clickableTag;
+    clickableTag = props.clickableTag,
+    dataSelectorId = props.dataSelectorId;
   var _customProps$LabelPro = customProps.LabelProps,
     LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
     _customProps$TagsMult = customProps.TagsMultiSelectProps,
@@ -184,7 +185,8 @@ var TagsMultiSelectField = function TagsMultiSelectField(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
     tabIndex: "0",
-    "aria-label": "".concat(labelName)
+    "aria-label": "".concat(labelName),
+    "data-selector-id": dataSelectorId
   }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
     ePhiData: ePhiData,
     alignContainer: "baseline",

package/lib/form/fields/TagsMultiSelectField/props/defaultProps.js

@@ -22,6 +22,7 @@ var defaultProps = _objectSpread({
   isNewNeeded: false,
   i18nKeys: {},
   numberOfDisplayedValues: '5',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'tagsMultiSelectField'
 }, (0, _FieldCommonDefaultProps.FieldCommonDefaultProps)());
 exports.defaultProps = defaultProps;

package/lib/form/fields/TextBoxField/TextBoxField.js

@@ -85,6 +85,7 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
         title = _this$props3.title,
         onBlur = _this$props3.onBlur,
         dataId = _this$props3.dataId,
+        dataSelectorId = _this$props3.dataSelectorId,
         validationRuleMessage = _this$props3.validationRuleMessage,
         validationRulePalette = _this$props3.validationRulePalette,
         onKeyDown = _this$props3.onKeyDown,
@@ -115,7 +116,8 @@ var TextBoxField = /*#__PURE__*/function (_PureComponent) {
       var uniqueId = htmlId ? htmlId : this.getNextId();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, labelName && /*#__PURE__*/_react["default"].createElement(_FieldContainer["default"], {
         infoText: infoText,
         isLocked: isLocked,