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

package/es/version2/GlobalNotification/GlobalNotification.js

@@ -46,7 +46,8 @@ export default class GlobalNotification extends React.Component {
       hideMessage,
       onClick,
       i18nKeys = {},
-      customProps
+      customProps,
+      dataSelectorId
     } = this.props;
     let {
       closeTitle = 'Close'
@@ -57,7 +58,8 @@ export default class GlobalNotification extends React.Component {
       hideMessage: hideMessage,
       onClick: onClick,
       closeTitle: closeTitle,
-      customProps: customProps
+      customProps: customProps,
+      dataSelectorId: dataSelectorId
     });
   }
 }
@@ -85,7 +87,8 @@ export function GlobalNotificationUI(props) {
     message,
     onClick,
     closeTitle = '',
-    customProps = {}
+    customProps = {},
+    dataSelectorId
   } = props;
   let {
     ExtraProps = {}
@@ -93,7 +96,8 @@ export function GlobalNotificationUI(props) {
   return /*#__PURE__*/React.createElement("div", _extends({
     className: `${style.message} ${type ? style[type] : ''}`,
     "data-id": `show_${type}_message`,
-    tabIndex: 0
+    tabIndex: 0,
+    "data-selector-id": dataSelectorId
   }, ExtraProps), /*#__PURE__*/React.createElement(Container, {
     className: `${style.container}`,
     alignBox: "row",

package/es/version2/GlobalNotification/props/defaultProps.js

@@ -1,3 +1,4 @@
 export const defaultProps = {
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'globalNotification'
 };

package/es/version2/GlobalNotification/props/propTypes.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 export const propTypes = {
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   hideMessage: PropTypes.func,
   message: PropTypes.string,
   onClick: PropTypes.func,

package/es/version2/alertIcons/AlertIcons.js

@@ -35,13 +35,15 @@ export default class AlertIcons extends Component {
   render() {
     let {
       type,
-      variant
+      variant,
+      dataSelectorId
     } = this.props;
     let {
       AlertIcon = DangerAlertIcon
     } = alertIconsObject[type] || {};
     return /*#__PURE__*/React.createElement("div", {
-      className: style.iconContainer
+      className: style.iconContainer,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(AlertIcon, {
       variant: variant,
       type: type

package/es/version2/alertIcons/props/defaultProps.js

@@ -3,7 +3,8 @@ export const AlarmAlertIcon_defaultProps = {
 };
 export const AlertIcons_defaultProps = {
   type: '',
-  variant: 'primary'
+  variant: 'primary',
+  dataSelectorId: 'alertIcons'
 };
 export const DangerAlertIcon_defaultProps = {
   variant: 'primary',

package/es/version2/alertIcons/props/propTypes.js

@@ -5,7 +5,8 @@ export const AlarmAlertIcon_propTypes = {
 };
 export const AlertIcons_propTypes = {
   type: PropTypes.oneOf(['success', 'error', 'danger', 'warning', 'info', 'notification', 'alarm']),
-  variant: PropTypes.oneOf(['primary', 'secondary'])
+  variant: PropTypes.oneOf(['primary', 'secondary']),
+  dataSelectorId: PropTypes.string
 };
 export const DangerAlertIcon_propTypes = {
   type: PropTypes.string,

package/es/version2/notification/DesktopNotification/DesktopNotification.js

@@ -43,6 +43,7 @@ export function DesktopNotificationUI(props) {
     onSubmit,
     onCancel,
     dataId,
+    dataSelectorId,
     isClose,
     needAutoZindex,
     title,
@@ -88,7 +89,8 @@ export function DesktopNotificationUI(props) {
     className: style.parentElement,
     style: needAutoZindex && isAnimate ? {
       zIndex: `${Zindex}`
-    } : {}
+    } : {},
+    "data-selector-id": dataSelectorId
   }, /*#__PURE__*/React.createElement(Container, _extends({
     className: `${style.container} ${isAnimate ? animateClass : animateRemoveClass} ${style[`${size}`] ? style[`${size}`] : ''} ${isShrinkView ? style.globalNotify : ''} ${containerClass}`,
     isCover: false,

package/es/version2/notification/DesktopNotification/props/defaultProps.js

@@ -10,5 +10,6 @@ export const defaultProps = {
   titleVariant: 'primary',
   isShrinkView: false,
   needClose: true,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'desktopNotification'
 };

package/es/version2/notification/DesktopNotification/props/propTypes.js

@@ -11,6 +11,7 @@ export const propTypes = {
   hideTime: PropTypes.string,
   i18nKeys: PropTypes.object,
   id: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   info: PropTypes.string,
   isAnimate: PropTypes.bool,
   isClose: PropTypes.bool,

package/lib/ActionButton/ActionButton.js

@@ -53,10 +53,10 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         onClick = _this$props2.onClick,
         size = _this$props2.size,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         isArrow = _this$props2.isArrow,
         text = _this$props2.text,
         subText = _this$props2.subText,
-        arrowBoxDataId = _this$props2.arrowBoxDataId,
         arrowBoxSize = _this$props2.arrowBoxSize,
         palette = _this$props2.palette,
         onHover = _this$props2.onHover,
@@ -83,7 +83,8 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         onClick: onHover ? removeClose : !onClick ? this.handleTogglePopup : undefined,
         onMouseEnter: !onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: !onClick ? onHover && this.handleTogglePopup : undefined,
-        eleRef: getTargetRef
+        eleRef: getTargetRef,
+        dataSelectorId: dataSelectorId
       }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
       }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
@@ -126,9 +127,10 @@ var ActionButton = /*#__PURE__*/function (_React$Component) {
         onMouseEnter: onClick ? onHover && this.handleTogglePopup : undefined,
         onMouseLeave: onClick ? onHover && this.handleTogglePopup : undefined,
         className: "".concat(_semanticButtonModule["default"].buttonReset, " ").concat(_ActionButtonModule["default"][arrowBoxSize + '_arrowBox'], " ").concat(_ActionButtonModule["default"][palette + 'Arw'], "  ").concat(_ActionButtonModule["default"].arrowWrapper, " ").concat(isPopupOpen ? _ActionButtonModule["default"].arrowActive : ''),
-        dataId: arrowBoxDataId,
+        dataId: "".concat(dataId, "_arrowButton"),
         tabIndex: "0",
-        tagName: "button"
+        tagName: "button",
+        dataSelectorId: "".concat(dataSelectorId, "_arrowButton")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "both"
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {

package/lib/ActionButton/props/defaultProps.js

@@ -7,8 +7,8 @@ exports.defaultProps = void 0;
 var defaultProps = {
   size: 'medium',
   isArrow: false,
-  arrowBoxDataId: 'arrowBox',
   dataId: 'actionButton',
+  dataSelectorId: 'actionButton',
   onHover: false,
   className: '',
   iconName: '',

package/lib/ActionButton/props/propTypes.js

@@ -7,7 +7,7 @@ exports.propTypes = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var propTypes = {
-  arrowBoxDataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   arrowBoxSize: _propTypes["default"].oneOf(['small', 'medium']),
   children: _propTypes["default"].node,
   className: _propTypes["default"].string,

package/lib/AlphabeticList/AlphabeticList.js

@@ -57,7 +57,8 @@ var AlphabeticList = /*#__PURE__*/function (_React$PureComponent) {
         align = _this$props3.align,
         type = _this$props3.type,
         i18nKeys = _this$props3.i18nKeys,
-        dataId = _this$props3.dataId;
+        dataId = _this$props3.dataId,
+        dataSelectorId = _this$props3.dataSelectorId;
       var _i18nKeys$allText = i18nKeys.allText,
         allText = _i18nKeys$allText === void 0 ? 'All' : _i18nKeys$allText,
         _i18nKeys$allTitle = i18nKeys.allTitle,
@@ -69,7 +70,8 @@ var AlphabeticList = /*#__PURE__*/function (_React$PureComponent) {
         isCover: false,
         alignBox: align === 'vertical' ? 'column' : 'row',
         className: "".concat(_AlphabeticListModule["default"].container, " ").concat(alignType, " ").concat(type != 'alphabetical' ? _AlphabeticListModule["default"].numbers : ''),
-        dataId: "navigationDiv"
+        dataId: "navigationDiv",
+        dataSelectorId: dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         tagName: "li",
         className: "".concat(_AlphabeticListModule["default"].list, " ").concat(_AlphabeticListModule["default"].title, " ").concat(selectedCharacter === 'ALL' ? _AlphabeticListModule["default"].selected : ''),

package/lib/AlphabeticList/props/defaultProps.js

@@ -8,7 +8,8 @@ var AlphabeticList_defaultProps = {
   align: 'vertical',
   type: 'alphabetical',
   i18nKeys: {},
-  dataId: 'Navi'
+  dataId: 'Navi',
+  dataSelectorId: 'alphabeticList'
 };
 exports.AlphabeticList_defaultProps = AlphabeticList_defaultProps;
 var AlphabeticListItem_defaultProps = {

package/lib/AlphabeticList/props/propTypes.js

@@ -27,7 +27,8 @@ var AlphabeticList_propTypes = {
     allTitle: _propTypes["default"].string,
     allText: _propTypes["default"].string
   }),
-  dataId: _propTypes["default"].string
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.AlphabeticList_propTypes = AlphabeticList_propTypes;
 var AlphabeticListItem_propTypes = {

package/lib/Attachment/Attachment.js

@@ -44,7 +44,8 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         palette = _this$props.palette,
         tooltip = _this$props.tooltip,
         fileInfo = _this$props.fileInfo,
-        i18nKeys = _this$props.i18nKeys;
+        i18nKeys = _this$props.i18nKeys,
+        dataSelectorId = _this$props.dataSelectorId;
       var _i18nKeys$downloadTit = i18nKeys.downloadTitle,
         downloadTitle = _i18nKeys$downloadTit === void 0 ? 'Download' : _i18nKeys$downloadTit;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -54,7 +55,8 @@ var Attachment = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         "data-title": tooltip,
         alignBox: "row",
-        isCover: false
+        isCover: false,
+        dataSelectorId: dataSelectorId
       }, iconName ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _AttachmentModule["default"].attachleft
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/Attachment/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   size: 'medium',
   palette: 'default',
   dataId: 'attachment',
-  i18nKeys: {}
+  i18nKeys: {},
+  dataSelectorId: 'attachment'
 };
 exports.defaultProps = defaultProps;

package/lib/Attachment/props/propTypes.js

@@ -8,6 +8,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var propTypes = {
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   downloadLink: _propTypes["default"].string,
   fileInfo: _propTypes["default"].string,
   fileName: _propTypes["default"].string,

package/lib/ChannelIcon/ChannelIcon.js

@@ -57,7 +57,8 @@ var ChannelIcon = /*#__PURE__*/function (_Component) {
         topicClass = _this$props.topicClass,
         renderIconOnly = _this$props.renderIconOnly,
         iconName = _this$props.iconName,
-        title = _this$props.title;
+        title = _this$props.title,
+        dataSelectorId = _this$props.dataSelectorId;
       var defaultChannelObj = name && !iconName && (0, _ChannelIconMapping.getChannelMappingObj)()[name.toUpperCase()];
       var customizedChannelName = null;
       if (!defaultChannelObj) {
@@ -66,7 +67,8 @@ var ChannelIcon = /*#__PURE__*/function (_Component) {
         iconName = defaultChannelObj[action];
       }
       return /*#__PURE__*/_react["default"].createElement("span", {
-        className: _ChannelIconModule["default"].container
+        className: _ChannelIconModule["default"].container,
+        "data-selector-id": dataSelectorId
       }, customizedChannelName ? /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
         name: customizedChannelName,
         size: size,

package/lib/ChannelIcon/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   iconSize: '21',
   name: 'phone',
   needTopicBorder: true,
-  renderIconOnly: false
+  renderIconOnly: false,
+  dataSelectorId: 'channelIcon'
 };
 exports.defaultProps = defaultProps;

package/lib/ChannelIcon/props/propTypes.js

@@ -27,6 +27,7 @@ var propTypes = {
   topicIcon: _propTypes["default"].string,
   topicIconColor: _propTypes["default"].string,
   topicIconSize: _propTypes["default"].string,
-  topicIconTitle: _propTypes["default"].string
+  topicIconTitle: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/FormAction/FormAction.js

@@ -47,7 +47,8 @@ var FormAction = /*#__PURE__*/function (_React$Component) {
         size = _this$props.size,
         children = _this$props.children,
         paddingLeftSize = _this$props.paddingLeftSize,
-        paddingRightClass = _this$props.paddingRightClass;
+        paddingRightClass = _this$props.paddingRightClass,
+        dataSelectorId = _this$props.dataSelectorId;
       var leftbuttonGroup = [],
         rightbuttonGroup = [],
         centerbuttonGroup = [];
@@ -68,7 +69,8 @@ var FormAction = /*#__PURE__*/function (_React$Component) {
       var hasRightChild = rightbuttonGroup.length > 0;
       var hasCenterChild = centerbuttonGroup.length > 0;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: _FormActionModule["default"].wrapperDiv
+        className: _FormActionModule["default"].wrapperDiv,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row",
         isCover: false,

package/lib/FormAction/props/defaultProps.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   size: 'medium',
-  paddingRightClass: ''
+  paddingRightClass: '',
+  dataSelectorId: 'formAction'
 };
 exports.defaultProps = defaultProps;

package/lib/FormAction/props/propTypes.js

@@ -10,6 +10,7 @@ var propTypes = {
   children: _propTypes["default"].node,
   paddingLeftSize: _propTypes["default"].oneOf(['large', 'medium', 'xmedium', 'small', 'xsmall']),
   paddingRightClass: _propTypes["default"].string,
-  size: _propTypes["default"].oneOf(['large', 'medium', 'small'])
+  size: _propTypes["default"].oneOf(['large', 'medium', 'small']),
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/IconButton/IconButton.js

@@ -99,6 +99,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         className = _this$props4.className,
         iconClass = _this$props4.iconClass,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         eleRef = _this$props4.eleRef,
         isActive = _this$props4.isActive,
         tourId = _this$props4.tourId,
@@ -137,6 +138,7 @@ var IconButton = /*#__PURE__*/function (_React$Component) {
         isCover: false,
         className: "".concat(needButtonTag && _semanticButtonModule["default"].buttonReset, " ").concat(_IconButtonModule["default"].wrapper, " ").concat(className ? className : '', " ").concat(isActive ? _IconButtonModule["default"]["".concat(palette, "_active")] : _IconButtonModule["default"][palette]),
         dataId: dataId,
+        dataSelectorId: dataSelectorId,
         onClick: this.triggerClick,
         "data-title": title,
         "data-ishtml": dataIsHtml,

package/lib/IconButton/props/defaultProps.js

@@ -18,6 +18,7 @@ var defaultProps = {
   needButtonTag: true,
   a11y: {},
   dataIsHtml: false,
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'iconButton'
 };
 exports.defaultProps = defaultProps;

package/lib/IconButton/props/propTypes.js

@@ -12,6 +12,7 @@ var propTypes = (_propTypes = {
   children: _propTypes2["default"].node,
   className: _propTypes2["default"].string,
   dataId: _propTypes2["default"].string,
+  dataSelectorId: _propTypes2["default"].string,
   eleRef: _propTypes2["default"].func,
   hoverType: _propTypes2["default"].oneOf(['default', 'border', 'bg']),
   iconClass: _propTypes2["default"].string,

package/lib/Message/Message.js

@@ -91,12 +91,14 @@ function MessageUI(props) {
   var type = props.type,
     message = props.message,
     onClick = props.onClick,
-    i18nKeys = props.i18nKeys;
+    i18nKeys = props.i18nKeys,
+    dataSelectorId = props.dataSelectorId;
   var _i18nKeys$closeTitle = i18nKeys.closeTitle,
     closeTitle = _i18nKeys$closeTitle === void 0 ? 'Close' : _i18nKeys$closeTitle;
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: _MessageModule["default"].message,
-    "data-id": "show_".concat(type, "_message")
+    "data-id": "show_".concat(type, "_message"),
+    "data-selector-id": dataSelectorId
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _MessageModule["default"].container
   }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/Message/props/defaultProps.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultProps = void 0;
 var defaultProps = {
-  i18nKeys: {}
+  i18nKeys: {},
+  dataSelectorId: 'message'
 };
 exports.defaultProps = defaultProps;

package/lib/Message/props/propTypes.js

@@ -12,6 +12,7 @@ var propTypes = {
   message: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   showMessage: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['success', 'alert', 'info']),
   i18nKeys: _propTypes["default"].shape({
     closeTitle: _propTypes["default"].string

package/lib/MessageBanner/MessageBanner.js

@@ -42,12 +42,14 @@ var MessageBanner = /*#__PURE__*/function (_React$Component) {
         urlText = _this$props.urlText,
         palette = _this$props.palette,
         customClass = _this$props.customClass,
-        dataId = _this$props.dataId;
+        dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         className: "".concat(_MessageBannerModule["default"]["type_".concat(type)], " ").concat(_MessageBannerModule["default"]["palette_".concat(palette)], " ").concat(customClass),
         alignBox: "row",
         isCover: false,
-        dataId: dataId
+        dataId: dataId,
+        dataSelectorId: dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MessageBannerModule["default"].content,
         flexible: true

package/lib/MessageBanner/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   type: 'primary',
   palette: 'default',
   customClass: '',
-  dataId: 'MessageBanner'
+  dataId: 'MessageBanner',
+  dataSelectorId: 'messageBanner'
 };
 exports.defaultProps = defaultProps;

package/lib/MessageBanner/props/propTypes.js

@@ -15,6 +15,7 @@ var propTypes = {
   palette: _propTypes["default"].oneOf(['default', 'blue', 'white']),
   type: _propTypes["default"].oneOf(['primary', 'secondary']),
   urlText: _propTypes["default"].string,
-  dataId: _propTypes["default"].string
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/ToastMessage/ToastMessage.js

@@ -55,6 +55,7 @@ function ToastMessageUI(props) {
     onSubmit = props.onSubmit,
     onCancel = props.onCancel,
     dataId = props.dataId,
+    dataSelectorId = props.dataSelectorId,
     isClose = props.isClose,
     onClose = props.onClose,
     needAutoZindex = props.needAutoZindex,
@@ -104,7 +105,8 @@ function ToastMessageUI(props) {
     "aria-live": ariaLive,
     "aria-atomic": ariaAtomic,
     "aria-describedby": ariaDescribedby,
-    "aria-labelledby": ariaLabelledby
+    "aria-labelledby": ariaLabelledby,
+    dataSelectorId: dataSelectorId
   }, type !== 'custom' ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
     className: _ToastMessageModule["default"].alertifychild,
     flexible: true

package/lib/ToastMessage/props/defaultProps.js

@@ -19,6 +19,7 @@ var defaultProps = {
   hideTime: '3000',
   dataId: 'toastMessage',
   needAutoZindex: true,
-  a11y: {}
+  a11y: {},
+  dataSelectorId: 'toastMessage'
 };
 exports.defaultProps = defaultProps;

package/lib/ToastMessage/props/propTypes.js

@@ -10,6 +10,7 @@ var propTypes = {
   autoClose: _propTypes["default"].bool,
   cancelText: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   getBottomContainer: _propTypes["default"].func,
   getInnerBottomContainer: _propTypes["default"].func,
   getLeftContainer: _propTypes["default"].func,

package/lib/Upload/Upload.js

@@ -37,6 +37,7 @@ var Upload = /*#__PURE__*/function (_React$Component) {
         isPreview = _this$props.isPreview,
         tooltip = _this$props.tooltip,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         progressValue = _this$props.progressValue,
         onClick = _this$props.onClick,
         iconName = _this$props.iconName,
@@ -53,7 +54,8 @@ var Upload = /*#__PURE__*/function (_React$Component) {
         dataId: dataId,
         "data-title": tooltip,
         isCover: false,
-        eleRef: getRef
+        eleRef: getRef,
+        dataSelectorId: dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isPreview ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_attachLoading"),
         className: _UploadModule["default"].loader,

package/lib/Upload/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   size: 'medium',
   dataId: 'upload',
   isPreview: false,
-  palette: 'light'
+  palette: 'light',
+  dataSelectorId: 'upload'
 };
 exports.defaultProps = defaultProps;

package/lib/Upload/props/propTypes.js

@@ -8,6 +8,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 var propTypes = {
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   fileSize: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   iconName: _propTypes["default"].string,

package/lib/avatar/AvatarClose/AvatarClose.js

@@ -40,13 +40,15 @@ var AvatarClose = /*#__PURE__*/function (_React$Component) {
         size = _this$props.size,
         isClose = _this$props.isClose,
         onClick = _this$props.onClick,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        dataSelectorId = _this$props.dataSelectorId;
       var _customProps$AvatarCl = customProps.AvatarCloseProps,
         AvatarCloseProps = _customProps$AvatarCl === void 0 ? {} : _customProps$AvatarCl,
         _customProps$AvatarPr = customProps.AvatarProps,
         AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
-        className: _AvatarCloseModule["default"].container
+        className: _AvatarCloseModule["default"].container,
+        "data-selector-id": dataSelectorId
       }, AvatarCloseProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         src: src,
         name: name,

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

@@ -7,6 +7,7 @@ exports.defaultProps = void 0;
 var defaultProps = {
   isClose: false,
   size: 'medium',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarClose'
 };
 exports.defaultProps = defaultProps;

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

@@ -16,6 +16,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     AvatarCloseProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object
-  })
+  }),
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/avatar/AvatarCollision/AvatarCollision.js

@@ -43,7 +43,8 @@ var AvatarCollision = /*#__PURE__*/function (_React$Component) {
         isLeft = _this$props.isLeft,
         isIdle = _this$props.isIdle,
         initial = _this$props.initial,
-        customProps = _this$props.customProps;
+        customProps = _this$props.customProps,
+        dataSelectorId = _this$props.dataSelectorId;
       var _customProps$AvatarCo = customProps.AvatarCollisionProps,
         AvatarCollisionProps = _customProps$AvatarCo === void 0 ? {} : _customProps$AvatarCo,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -52,7 +53,8 @@ var AvatarCollision = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_AvatarCollisionModule["default"].container, " ").concat(isLeft ? _AvatarCollisionModule["default"].off : isIdle ? _AvatarCollisionModule["default"].idle : _AvatarCollisionModule["default"].on),
         onClick: onClick,
         "data-id": "collsionPop",
-        "data-title": title
+        "data-title": title,
+        "data-selector-id": dataSelectorId
       }, AvatarCollisionProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         src: src,
         name: name,

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

@@ -9,6 +9,7 @@ var defaultProps = {
   isLeft: false,
   isIdle: false,
   size: 'xmedium',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'avatarCollision'
 };
 exports.defaultProps = defaultProps;

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

@@ -16,6 +16,7 @@ var propTypes = {
   size: _propTypes["default"].string,
   src: _propTypes["default"].string,
   title: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     AvatarCollisionProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object