@zohodesk/components 1.0.0-alpha-257 → 1.0.0-alpha-259

package/lib/Avatar/Avatar.js

@@ -150,37 +150,44 @@ var Avatar = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props2.customClass,
         alternateSrc = _this$props2.alternateSrc,
         isAnimate = _this$props2.isAnimate,
-        customProps = _this$props2.customProps;
+        dataSelectorId = _this$props2.dataSelectorId,
+        customProps = _this$props2.customProps,
+        needInnerBorder = _this$props2.needInnerBorder,
+        needDefaultBorder = _this$props2.needDefaultBorder;
       var _customProps$AvatarPr = customProps.AvatarProps,
         AvatarProps = _customProps$AvatarPr === void 0 ? {} : _customProps$AvatarPr;
       var textStyle = textPalette ? _AvatarModule["default"][textPalette] : palette === 'secondary' ? _AvatarModule["default"].white : _AvatarModule["default"].black;
       var shapeStyle = shape === 'circle' ? 'circle' : "square_".concat(size);
       initial = initial || this.getInitialByFullName(name);
       var isInvalidImageList = Avatar.invalidImageURLs.indexOf(src) !== -1;
-      var isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
+      //let isValidImageList = Avatar.validImageURLs.indexOf(src) !== -1;
       var showAvatar = src && !isInvalidImageList;
       var showInitial = !showAvatar || showAvatar && isInvalidImageList;
       var showAlternateAvatar = alternateSrc ? showInitial : false;
       var border = borderOnHover || onClick;
-      var borderStyle = (!src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
+      var showDefaultBorder = src && !isInvalidImageList && needDefaultBorder;
+      var borderStyle = (showDefaultBorder || !src || !showAvatar || showInitial) && needBorder ? "".concat(_AvatarModule["default"].border, " ").concat(borderOnActive ? _AvatarModule["default"].borderOnActive : border ? _AvatarModule["default"].borderOnHover : '', " ") : '';
       borderStyle = showAlternateAvatar ? '' : borderStyle;
       return /*#__PURE__*/_react["default"].createElement("div", _extends({
         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 : ''),
+        className: "".concat(_AvatarModule["default"].image, " ").concat(isAnimate ? _AvatarModule["default"].animate : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),
+        "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
         name: name,
         onError: this.putInvalidImageURLJSON,
         onLoad: this.putValidImageURLJSON,
         src: showAlternateAvatar ? alternateSrc : src,
         alt: name
-      }), !isValidImageList && !showAlternateAvatar ? null : /*#__PURE__*/_react["default"].createElement("span", {
+      }), showDefaultBorder ? null : /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarModule["default"].shadow, " ").concat(textStyle, " ")
       })));
     }

package/lib/Avatar/Avatar.module.css

@@ -79,6 +79,9 @@
 [dir=rtl] .animate{
   animation-duration: var(--zd_transition2);
 }
+.innerBorder{
+  border: 1px solid var(--zdt_avatarteam_innerCircle);
+}
 .square_small {
   --avatar_border_radius: 4px;
 }
@@ -109,6 +112,9 @@
   text-transform: var(--avatar_text_transform);
   display: inline-block;
 }
+.xxsmall{
+  --avatar_font_size: var(--zd_font_size8);
+}
 .small {
   --avatar_font_size: var(--zd_font_size9);
 }

package/lib/Avatar/props/defaultProps.js

@@ -16,6 +16,9 @@ var defaultProps = {
   borderOnActive: false,
   borderOnHover: false,
   customProps: {},
-  isAnimate: true
+  isAnimate: true,
+  dataSelectorId: 'avatar',
+  needInnerBorder: false,
+  needDefaultBorder: false
 };
 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,
@@ -15,7 +16,7 @@ var propTypes = {
   onClick: _propTypes["default"].func,
   palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info', 'default']),
   shape: _propTypes["default"].oneOf(['circle', 'square']),
-  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  size: _propTypes["default"].oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
   title: _propTypes["default"].string,
@@ -26,6 +27,8 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     AvatarProps: _propTypes["default"].object
   }),
-  isAnimate: _propTypes["default"].bool
+  isAnimate: _propTypes["default"].bool,
+  needInnerBorder: _propTypes["default"].bool,
+  needDefaultBorder: _propTypes["default"].bool
 };
 exports.propTypes = propTypes;

package/lib/AvatarTeam/AvatarTeam.js

@@ -55,7 +55,11 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         customClass = _this$props.customClass,
         borderOnActive = _this$props.borderOnActive,
         borderOnHover = _this$props.borderOnHover,
-        customProps = _this$props.customProps;
+        dataSelectorId = _this$props.dataSelectorId,
+        customProps = _this$props.customProps,
+        needInnerBorder = _this$props.needInnerBorder,
+        needBorder = _this$props.needBorder,
+        needDefaultBorder = _this$props.needDefaultBorder;
       var _customProps$AvatarTe = customProps.AvatarTeamProps,
         AvatarTeamProps = _customProps$AvatarTe === void 0 ? {} : _customProps$AvatarTe,
         _customProps$AvatarPr = customProps.AvatarProps,
@@ -67,7 +71,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,
@@ -79,7 +84,10 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
         needTitle: needTitle,
         customClass: customAvatar,
         borderOnActive: borderOnActive,
-        borderOnHover: border
+        borderOnHover: border,
+        needInnerBorder: needInnerBorder,
+        needBorder: needBorder,
+        needDefaultBorder: needDefaultBorder
       }, AvatarProps)), /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_AvatarTeamModule["default"].team, " ").concat(isFilled ? "".concat(_AvatarTeamModule["default"]["".concat(palette, "Filled")]) : _AvatarTeamModule["default"].nofill, " \n          ").concat(_AvatarTeamModule["default"]["".concat(size, "team")], " ").concat(customAvatarTeam)
       }));

package/lib/AvatarTeam/AvatarTeam.module.css

@@ -3,6 +3,9 @@
   --avatarteam_border_width: var(--zd_size1);
   --avatarteam_border_style: solid;
   --avatarteam_border_color: var(--zdt_avatarteam_default_border);
+  --avatarteam_outline_width: var(--zd_size1);
+  --avatarteam_outline_style: solid;
+  --avatarteam_outline_color: var(--zdt_avatarteam_innerCircle);
   --avatarteam_bg_color: var(--zdt_avatarteam_default_bg);
   --avatarteam_width: var(--zd_size5);
   --avatarteam_height: var(--zd_size5);
@@ -16,6 +19,7 @@
   position: relative;
   display: inline-block;
   font-size: 0;
+  vertical-align: middle;
 }
 .team {
   composes: varClass;
@@ -23,6 +27,9 @@
   top: var(--avatarteam_top_top);
   width: var(--avatarteam_width);
   height: var(--avatarteam_height);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var(--avatarteam_outline_color);
   border-width: var(--avatarteam_border_width);
   border-style: var(--avatarteam_border_style);
   border-color: var(--avatarteam_border_color);
@@ -38,11 +45,11 @@
   right: 50%;
 }
 .nofill {
-  --avatarteam_border_color: var(--zdt_avatarteam_nofill_border);
+  --avatarteam_border_color: var(--zdt_avatarteam_nofill_hover_border);
 }
 .primaryFilled,
 .infoFilled {
-  --avatarteam_bg_color: var(--zdt_avatarteam_primary_bg);
+  --avatarteam_bg_color: var(--zdt_avatarteam_primary_hover_bg);
 }
 .secondaryFilled {
   --avatarteam_bg_color: var(--zdt_avatarteam_secondary_bg);
@@ -64,6 +71,9 @@
   height: inherit;
   width: inherit;
   top: var(--avatarteam_bottom_top);
+  outline-width: var(--avatarteam_outline_width);
+  outline-style: var(--avatarteam_outline_style);
+  outline-color: var( --avatarteam_outline_color);
 }
 .team:after, .team:before {
   border: inherit;
@@ -80,7 +90,8 @@
   left: var(--avatarteam_bottom_right);
 }
 .smallteam,
-.xsmallteam {
+.xsmallteam,
+.xxsmallteam {
   --avatarteam_height: var(--zd_size3);
   --avatarteam_width: var(--zd_size3);
 }
@@ -94,6 +105,22 @@
   --avatarteam_height: var(--zd_size7);
   --avatarteam_width: var(--zd_size7);
 }
+
+.xxsmallteam {
+  --avatarteam_top_top: 0px;
+}
+.xxsmallteam::after,
+.xxsmallteam:before {
+  --avatarteam_bottom_top: var(--zd_size13);
+}
+.xxsmallteam:after {
+  --avatarteam_bottom_left: calc(var(--zd_size8) * -1);
+}
+.xxsmallteam:before {
+  --avatarteam_bottom_right: calc(var(--zd_size8) * -1);
+}
+
+
 .smallteam::after,
 .smallteam:before {
   --avatarteam_bottom_top: var(--zd_size17);

package/lib/AvatarTeam/props/defaultProps.js

@@ -11,10 +11,14 @@ var defaultProps = {
   src: null,
   title: null,
   dataId: 'avatarTeamComp',
+  dataSelectorId: 'avatarTeam',
   needTitle: true,
   customClass: {},
   borderOnActive: false,
   borderOnHover: false,
-  customProps: {}
+  customProps: {},
+  needInnerBorder: true,
+  needBorder: true,
+  needDefaultBorder: true
 };
 exports.defaultProps = defaultProps;

package/lib/AvatarTeam/props/propTypes.js

@@ -8,14 +8,16 @@ 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,
   onClick: _propTypes["default"].func,
   palette: _propTypes["default"].oneOf(['primary', 'secondary', 'info']),
-  size: _propTypes["default"].oneOf(['small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
+  size: _propTypes["default"].oneOf(['xxsmall', 'small', 'xsmall', 'medium', 'xmedium', 'large', 'xlarge']),
   src: _propTypes["default"].string,
   textPalette: _propTypes["default"].oneOf(['white', 'black']),
+  needBorder: _propTypes["default"].bool,
   title: _propTypes["default"].string,
   customClass: _propTypes["default"].shape({
     customAvatar: _propTypes["default"].string,
@@ -23,6 +25,8 @@ var propTypes = {
   }),
   borderOnActive: _propTypes["default"].bool,
   borderOnHover: _propTypes["default"].bool,
+  needInnerBorder: _propTypes["default"].bool,
+  needDefaultBorder: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     AvatarTeamProps: _propTypes["default"].object,
     AvatarProps: _propTypes["default"].object

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);
 }