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

package/lib/AppContainer/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   className: '',
   tooltipClass: '',
   tooltipParentClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'appContainer'
 };
 exports.defaultProps = defaultProps;

package/lib/AppContainer/props/propTypes.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].element, _propTypes["default"].arrayOf(_propTypes["default"].element)]),
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   tagName: _propTypes["default"].string,
   className: _propTypes["default"].string,

package/lib/Avatar/Avatar.js

@@ -150,6 +150,7 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props2.customClass,
         alternateSrc = _this$props2.alternateSrc,
         isAnimate = _this$props2.isAnimate,
+        dataSelectorId = _this$props2.dataSelectorId,
         customProps = _this$props2.customProps;
       var _customProps$AvatarPr = customProps.AvatarProps,
         AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
@@ -168,13 +169,16 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_AvatarModule["default"].avatar, " ").concat(_AvatarModule["default"][size], " ").concat((0, _AvatarSize["default"])(size), " ").concat(_AvatarModule["default"][shapeStyle], " ").concat(_AvatarModule["default"][palette], " ").concat(textStyle, " ").concat(borderStyle, " ").concat(customClass ? customClass : ''),
         "data-title": needTitle ? title ? title : name : null,
         "data-id": dataId,
-        onClick: onClick
+        onClick: onClick,
+        "data-selector-id": dataSelectorId
       }, AvatarProps), showInitial && !showAlternateAvatar && /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].initial),
-        "data-id": "".concat(dataId, "_AvatarInitial")
+        "data-id": "".concat(dataId, "_AvatarInitial"),
+        "data-selector-id": "".concat(dataSelectorId, "_AvatarInitial")
       }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
         className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),
+        "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
         name: name,
         onError: this.putInvalidImageURLJSON,
         onLoad: this.putValidImageURLJSON,

package/lib/Avatar/props/defaultProps.js

@@ -16,6 +16,7 @@ var defaultProps = {
   borderOnActive: false,
   borderOnHover: false,
   customProps: {},
-  isAnimate: true
+  isAnimate: true,
+  dataSelectorId: 'avatar'
 };
 exports.defaultProps = defaultProps;

package/lib/Avatar/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,
   initial: _propTypes["default"].string,
   name: _propTypes["default"].string.isRequired,
   needBorder: _propTypes["default"].bool,

package/lib/AvatarTeam/AvatarTeam.js

@@ -55,6 +55,7 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props.customClass,
         borderOnActive = _this$props.borderOnActive,
         borderOnHover = _this$props.borderOnHover,
+        dataSelectorId = _this$props.dataSelectorId,
         customProps = _this$props.customProps;
       var _customProps$AvatarTe = customProps.AvatarTeamProps,
         AvatarTeamProps = _customProps$AvatarTe === void 0 ? {} : _customProps$AvatarTe,
@@ -67,7 +68,8 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
       var border = borderOnHover || onClick;
       return /*#__PURE__*/_react["default"].createElement("span", _extends({
         className: "".concat(_AvatarTeamModule["default"].container, " ").concat(borderOnActive ? _AvatarTeamModule["default"].borderOnActive : border ? _AvatarTeamModule["default"].borderOnHover : '', " "),
-        "data-id": dataId
+        "data-id": dataId,
+        "data-selector-id": dataSelectorId
       }, AvatarTeamProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         name: name,
         onClick: onClick,

package/lib/AvatarTeam/props/defaultProps.js

@@ -11,6 +11,7 @@ var defaultProps = {
   src: null,
   title: null,
   dataId: 'avatarTeamComp',
+  dataSelectorId: 'avatarTeam',
   needTitle: true,
   customClass: {},
   borderOnActive: false,

package/lib/AvatarTeam/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,
   isFilled: _propTypes["default"].bool,
   name: _propTypes["default"].string.isRequired,
   needTitle: _propTypes["default"].bool,

package/lib/Button/Button.js

@@ -51,6 +51,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
         needAppearance = _this$props.needAppearance,
         getRef = _this$props.getRef,
         title = _this$props.title,
+        dataSelectorId = _this$props.dataSelectorId,
         customClass = _this$props.customClass,
         customProps = _this$props.customProps;
       var _customClass$customBu = customClass.customButton,
@@ -69,7 +70,8 @@ var Button = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         "data-title": title,
         type: "button",
-        ref: getRef
+        ref: getRef,
+        "data-selector-id": dataSelectorId
       }, customProps), children ? children : text, statusLower !== 'none' && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtonModule["default"].overlay
       }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/Button/props/defaultProps.js

@@ -8,6 +8,7 @@ var _dummyFunction = require("../../utils/dummyFunction");
 var defaultProps = {
   children: null,
   dataId: 'buttonComp',
+  dataSelectorId: 'button',
   disabled: false,
   isBold: true,
   needAppearance: true,

package/lib/Button/props/propTypes.js

@@ -10,6 +10,7 @@ var propTypes = {
   children: _propTypes["default"].node,
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   getRef: _propTypes["default"].func,
   isBold: _propTypes["default"].bool,

package/lib/Buttongroup/Buttongroup.js

@@ -35,7 +35,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         children = _this$props.children,
         type = _this$props.type,
         buttonPosition = _this$props.buttonPosition,
-        customClass = _this$props.customClass;
+        customClass = _this$props.customClass,
+        dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId;
       var btnGroup = [];
       children.forEach(function (child) {
         var btnRight = /*#__PURE__*/_react["default"].createElement("span", {
@@ -44,7 +46,9 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g
         btnGroup.push(btnRight);
       });
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_ButtongroupModule["default"].buttonGroup, " ").concat(_ButtongroupModule["default"][type], " ").concat(customClass ? customClass : '')
+        className: "".concat(_ButtongroupModule["default"].buttonGroup, " ").concat(_ButtongroupModule["default"][type], " ").concat(customClass ? customClass : ''),
+        "data-id": dataId,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtongroupModule["default"]["align".concat(buttonPosition)]
       }, children));

package/lib/Buttongroup/props/defaultProps.js

@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
 exports.defaultProps = void 0;
 var defaultProps = {
   buttonPosition: 'left',
-  children: null
+  children: null,
+  dataId: 'ButtonGroup',
+  dataSelectorId: 'buttonGroup'
 };
 exports.defaultProps = defaultProps;

package/lib/Buttongroup/props/propTypes.js

@@ -10,6 +10,8 @@ var propTypes = {
   buttonPosition: _propTypes["default"].oneOf(['left', 'right', 'center']),
   children: _propTypes["default"].node,
   type: _propTypes["default"].string.isRequired,
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/Card/Card.js

@@ -60,14 +60,14 @@ var CardHeader = /*#__PURE__*/function (_Component) {
       var _this$props = this.props,
         isScroll = _this$props.isScroll,
         children = _this$props.children,
-        _this$props$dataId = _this$props.dataId,
-        dataId = _this$props$dataId === void 0 ? 'CardHeader' : _this$props$dataId,
-        _this$props$customCla = _this$props.customClass,
-        customClass = _this$props$customCla === void 0 ? '' : _this$props$customCla;
+        dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
+        customClass = _this$props.customClass;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(isScroll ? _CardModule["default"].scroll : _CardModule["default"].notScroll, " ").concat(customClass),
         eleRef: this.getCardHeaderDom,
-        dataId: dataId
+        dataId: dataId,
+        dataSelectorId: dataSelectorId
       }, children);
     }
   }]);
@@ -75,6 +75,7 @@ var CardHeader = /*#__PURE__*/function (_Component) {
 }(_react.Component);
 exports.CardHeader = CardHeader;
 CardHeader.propTypes = _propTypes.CardHeader_propTypes;
+CardHeader.defaultProps = _defaultProps.CardHeader_defaultProps;
 var CardContent = /*#__PURE__*/function (_Component2) {
   _inherits(CardContent, _Component2);
   var _super2 = _createSuper(CardContent);
@@ -92,6 +93,7 @@ var CardContent = /*#__PURE__*/function (_Component2) {
         scroll = _this$props2.scroll,
         isScrollAttribute = _this$props2.isScrollAttribute,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         shrink = _this$props2.shrink,
         customClass = _this$props2.customClass,
         preventParentScroll = _this$props2.preventParentScroll;
@@ -104,7 +106,8 @@ var CardContent = /*#__PURE__*/function (_Component2) {
         isScrollAttribute: isScrollAttribute,
         dataId: dataId,
         shrink: shrink,
-        className: customClass
+        className: customClass,
+        dataSelectorId: dataSelectorId
       }, children);
     }
   }]);
@@ -253,7 +256,8 @@ var Card = /*#__PURE__*/function (_Component3) {
             isScrollAttribute: child.props.isScrollAttribute,
             dataId: child.props.dataId,
             shrink: child.props.shrink,
-            className: child.props.customClass
+            className: child.props.customClass,
+            dataSelectorId: child.props.dataSelectorId
           }, child.props.children);
         }
         return child;
@@ -286,17 +290,18 @@ var CardFooter = /*#__PURE__*/function (_Component4) {
     value: function render() {
       var _this$props5 = this.props,
         children = _this$props5.children,
-        _this$props5$dataId = _this$props5.dataId,
-        dataId = _this$props5$dataId === void 0 ? 'CardFooter' : _this$props5$dataId,
-        _this$props5$customCl = _this$props5.customClass,
-        customClass = _this$props5$customCl === void 0 ? '' : _this$props5$customCl;
+        dataId = _this$props5.dataId,
+        customClass = _this$props5.customClass,
+        dataSelectorId = _this$props5.dataSelectorId;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(customClass),
-        dataId: dataId
+        dataId: dataId,
+        dataSelectorId: dataSelectorId
       }, children);
     }
   }]);
   return CardFooter;
 }(_react.Component);
 exports.CardFooter = CardFooter;
-CardFooter.propTypes = _propTypes.CardFooter_propTypes;
+CardFooter.propTypes = _propTypes.CardFooter_propTypes;
+CardFooter.defaultProps = _defaultProps.CardFooter_defaultProps;

package/lib/Card/props/defaultProps.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Card_defaultProps = exports.CardContent_defaultProps = void 0;
+exports.Card_defaultProps = exports.CardHeader_defaultProps = exports.CardFooter_defaultProps = exports.CardContent_defaultProps = void 0;
 var Card_defaultProps = {
   isScrollAttribute: false,
   // isScrollShadow: true,
@@ -13,10 +13,23 @@ var Card_defaultProps = {
   isPercentageScroll: false
 };
 exports.Card_defaultProps = Card_defaultProps;
+var CardHeader_defaultProps = {
+  dataId: 'CardHeader',
+  customClass: '',
+  dataSelectorId: 'cardHeader'
+};
+exports.CardHeader_defaultProps = CardHeader_defaultProps;
 var CardContent_defaultProps = {
   isScrollAttribute: false,
   scroll: 'vertical',
   dataId: 'CardContent',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'cardContent'
+};
+exports.CardContent_defaultProps = CardContent_defaultProps;
+var CardFooter_defaultProps = {
+  dataId: 'CardFooter',
+  customClass: '',
+  dataSelectorId: 'cardFooter'
 };
-exports.CardContent_defaultProps = CardContent_defaultProps;
+exports.CardFooter_defaultProps = CardFooter_defaultProps;

package/lib/CheckBox/CheckBox.js

@@ -67,7 +67,8 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         activeStyle = _this$props2.activeStyle,
         a11y = _this$props2.a11y,
         customClass = _this$props2.customClass,
-        customProps = _this$props2.customProps;
+        customProps = _this$props2.customProps,
+        dataSelectorId = _this$props2.dataSelectorId;
       var _customProps$CheckBox = customProps.CheckBoxProps,
         CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
         _customProps$LabelPro = customProps.LabelProps,
@@ -104,7 +105,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledby,
         "aria-hidden": ariaHidden,
-        "data-selector": id
+        "data-selector-id": dataSelectorId || id
       }, CheckBoxProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_CheckBoxModule["default"].boxContainer, " ").concat(_CheckBoxModule["default"][size], " ").concat(customCBoxSize, " ").concat(isFilled ? _CheckBoxModule["default"].filled : '')
       }, /*#__PURE__*/_react["default"].createElement("input", {

package/lib/CheckBox/props/propTypes.js

@@ -13,6 +13,7 @@ var propTypes = {
   ariaLabelledby: _propTypes["default"].string,
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disabled: _propTypes["default"].bool,
   disabledTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,

package/lib/DropBox/DropBox.js

@@ -74,6 +74,7 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         animationStyle = _this$props2.animationStyle,
         isActive = _this$props2.isActive,
         dataId = _this$props2.dataId,
+        dataSelectorId = _this$props2.dataSelectorId,
         isModel = _this$props2.isModel,
         isAbsolutePositioningNeeded = _this$props2.isAbsolutePositioningNeeded,
         tourId = _this$props2.tourId,
@@ -164,6 +165,7 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: boxClassName,
         "data-id": "".concat(dataId),
+        "data-selector-id": dataSelectorId,
         ref: this.getRef,
         style: inlineStyle,
         "data-tour": tourId,
@@ -178,13 +180,15 @@ var DropBoxElement = /*#__PURE__*/function (_React$Component) {
         className: "".concat(subContainerClass, " ").concat(_DropBoxModule["default"]["".concat(palette, "Palette")]),
         onClick: onClick,
         "data-id": "".concat(dataId, "_subcontainer"),
+        "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
         ref: subContainerRef
       }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _DropBoxModule["default"].closeBar
       }) : null, isArrow && !isModel && /*#__PURE__*/_react["default"].createElement("div", {
         className: _DropBoxModule["default"][arrowPosition],
         style: needArrowStyle && arrowstyle,
-        "data-id": "".concat(dataId, "_arrow")
+        "data-id": "".concat(dataId, "_arrow"),
+        "data-selector-id": "".concat(dataSelectorId, "_arrow")
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _DropBoxModule["default"].arrowShape
       })), children));

package/lib/DropBox/props/defaultProps.js

@@ -8,6 +8,7 @@ var defaultProps = {
   animationStyle: 'default',
   boxPosition: 'bottomLeft',
   dataId: 'dropBox',
+  dataSelectorId: 'dropBox',
   isActive: false,
   isAnimate: false,
   isArrow: true,

package/lib/DropBox/props/propTypes.js

@@ -17,6 +17,7 @@ var propTypes = {
   boxPosition: _propTypes["default"].oneOf(['bottomRight', 'bottomLeft', 'bottomCenter', 'topRight', 'topLeft', 'topCenter', 'rightTop', 'rightBottom', 'rightCenter', 'leftTop', 'leftBottom', 'leftCenter']),
   children: _propTypes["default"].element,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   forwardRef: _propTypes["default"].object,
   getRef: _propTypes["default"].func,
   isAbsolutePositioningNeeded: _propTypes["default"].bool,

package/lib/DropDown/DropDownHeading.js

@@ -38,7 +38,9 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props.customClass,
         palette = _this$props.palette,
         htmlId = _this$props.htmlId,
-        a11y = _this$props.a11y;
+        a11y = _this$props.a11y,
+        dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId;
       var role = a11y.role,
         ariaLabelledby = a11y.ariaLabelledby,
         ariaLabel = a11y.ariaLabel;
@@ -48,7 +50,9 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
         role: role,
         "aria-labelledby": ariaLabelledby,
         "aria-label": ariaLabel,
-        id: htmlId
+        id: htmlId,
+        "data-id": dataId,
+        "data-selector-id": dataSelectorId
         // tabindex='0'
       }, text, children);
     }

package/lib/DropDown/props/defaultProps.js

@@ -12,7 +12,9 @@ var DropDownHeading_defaultProps = {
   customClass: '',
   children: null,
   palette: 'light',
-  a11y: {}
+  a11y: {},
+  dataId: 'DropDownHeading',
+  dataSelectorId: 'dropdownHeading'
 };
 exports.DropDownHeading_defaultProps = DropDownHeading_defaultProps;
 var DropDownItem_defaultProps = {

package/lib/Label/Label.js

@@ -41,6 +41,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
         title = _this$props.title,
         onClick = _this$props.onClick,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         variant = _this$props.variant,
         customClass = _this$props.customClass,
         id = _this$props.id;
@@ -49,6 +50,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,
+        "data-selector-id": dataSelectorId,
         onClick: onClick,
         id: id
       }, text);

package/lib/Label/props/defaultProps.js

@@ -12,6 +12,7 @@ var defaultProps = {
   text: 'Label',
   type: 'title',
   variant: 'default',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'label'
 };
 exports.defaultProps = defaultProps;

package/lib/Label/props/propTypes.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var propTypes = {
   clipped: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   htmlFor: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),

package/lib/Layout/Box.js

@@ -96,7 +96,8 @@ function Box(props) {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
-    tourId: 'data-tour'
+    tourId: 'data-tour',
+    dataSelectorId: 'data-selector-id'
   });
   return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
 }

package/lib/Layout/Container.js

@@ -114,7 +114,8 @@ function Container(props) {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
-    tourId: 'data-tour'
+    tourId: 'data-tour',
+    dataSelectorId: 'data-selector-id'
   });
   return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
 }

package/lib/Layout/props/defaultProps.js

@@ -7,7 +7,8 @@ exports.ContainerDefaultProps = exports.BoxDefaultProps = void 0;
 var BoxDefaultProps = {
   dataId: 'boxComponent',
   isScrollAttribute: false,
-  tagName: 'div'
+  tagName: 'div',
+  dataSelectorId: 'box'
 };
 exports.BoxDefaultProps = BoxDefaultProps;
 var ContainerDefaultProps = {
@@ -15,6 +16,7 @@ var ContainerDefaultProps = {
   isScrollAttribute: false,
   isCover: true,
   alignBox: 'column',
-  tagName: 'div'
+  tagName: 'div',
+  dataSelectorId: 'container'
 };
 exports.ContainerDefaultProps = ContainerDefaultProps;

package/lib/Layout/props/propTypes.js

@@ -13,6 +13,7 @@ var BoxProps = {
   className: _propTypes["default"].string,
   column: _propTypes["default"].oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   flexible: _propTypes["default"].bool,
   hidden: _propTypes["default"].arrayOf(function (propValue, key, componentName, location, propFullName) {
@@ -37,6 +38,7 @@ var ContainerProps = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   hidden: _propTypes["default"].array,
   isCover: _propTypes["default"].bool,

package/lib/ListItem/ListContainer.js

@@ -32,6 +32,7 @@ var ListContainer = function ListContainer(props) {
     isDisabled = props.isDisabled,
     children = props.children,
     dataId = props.dataId,
+    dataSelectorId = props.dataSelectorId,
     a11y = props.a11y,
     customClass = props.customClass,
     customProps = props.customProps,
@@ -76,6 +77,7 @@ var ListContainer = function ListContainer(props) {
     alignBox: "row",
     className: "".concat(_ListItemModule["default"].list, " ").concat(_ListItemModule["default"][size], " ").concat(mobileToTab && isTouchDevice ? _ListItemModule["default"].responsiveHeight : '', " ").concat(_ListItemModule["default"][palette], " ").concat(active ? _ListItemModule["default"]["active".concat(palette)] : highlight && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Hover")] : '', " ").concat(autoHover && !isDisabled ? _ListItemModule["default"]["".concat(palette, "Effect")] : '', " ").concat(needTick ? _ListItemModule["default"]["".concat(size, "withTick")] : '', " ").concat(isDisabled ? (0, _CssProvider["default"])('isDisable') : '', " ").concat(needBorder ? active ? _ListItemModule["default"].activewithBorder : _ListItemModule["default"].withBorder : '', " ").concat(customClass),
     dataId: dataId,
+    dataSelectorId: dataSelectorId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,
     onMouseOver: onMouseOver,

package/lib/ListItem/ListItem.js

@@ -86,6 +86,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         isDisabled = _this$props4.isDisabled,
         children = _this$props4.children,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         a11y = _this$props4.a11y,
         customClass = _this$props4.customClass,
         customProps = _this$props4.customProps;
@@ -113,6 +114,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         needBorder: needBorder,
         customClass: customListItem,
         dataId: dataIdString,
+        dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
         href: href,
         target: target,
@@ -133,7 +135,8 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
         "aria-hidden": ariaHidden,
-        dataId: "".concat(dataIdString, "_tickIcon")
+        dataId: "".concat(dataIdString, "_tickIcon"),
+        dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-ticknew",
         size: "8"

package/lib/ListItem/ListItemWithAvatar.js

@@ -84,6 +84,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title = _this$props4.title,
         needTick = _this$props4.needTick,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         initial = _this$props4.initial,
         isDisabled = _this$props4.isDisabled,
         needBorder = _this$props4.needBorder,
@@ -119,6 +120,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         needBorder: needBorder,
         customClass: customListItem,
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
+        dataSelectorId: "".concat(dataSelectorId),
         onClick: this.handleClick,
         onMouseEnter: this.handleMouseEnter,
         eleRef: this.getRef,
@@ -155,7 +157,8 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
-        dataId: "".concat(dataIdString, "_tickIcon")
+        dataId: "".concat(dataIdString, "_tickIcon"),
+        dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-ticknew",
         size: "8"

package/lib/ListItem/ListItemWithCheckBox.js

@@ -77,6 +77,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         autoHover = _this$props4.autoHover,
         palette = _this$props4.palette,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         title = _this$props4.title,
         isDisabled = _this$props4.isDisabled,
         disableTitle = _this$props4.disableTitle,
@@ -103,6 +104,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         customClass: customListItem,
         dataId: "".concat(dataId ? dataId : value, "_ListItemWithCheckBox"),
+        dataSelectorId: dataSelectorId,
         onClick: this.onClick,
         onMouseOver: this.onHover,
         eleRef: this.getRef,

package/lib/ListItem/ListItemWithIcon.js

@@ -80,6 +80,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         palette = _this$props4.palette,
         iconClass = _this$props4.iconClass,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         title = _this$props4.title,
         needTick = _this$props4.needTick,
         isLink = _this$props4.isLink,
@@ -110,6 +111,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         needBorder: needBorder,
         customClass: customClass,
         dataId: dataIdString,
+        dataSelectorId: dataSelectorId,
         isLink: isLink,
         href: href,
         target: target,
@@ -138,7 +140,8 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
-        dataId: "".concat(dataIdString, "_tickIcon")
+        dataId: "".concat(dataIdString, "_tickIcon"),
+        dataSelectorId: "".concat(dataSelectorId, "_tickIcon")
       }, /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
         name: "ZD-ticknew",
         size: "8"