@zohodesk/components 1.0.0-alpha-273 → 1.0.0-alpha-274

package/lib/AppContainer/AppContainer.js

@@ -133,7 +133,9 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.containerElement) {
+      var needTooltip = this.props.needTooltip;
+
+      if (this.containerElement && needTooltip) {
         this.containerElement.addEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.observeElement();
@@ -142,7 +144,9 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      if (this.containerElement) {
+      var needTooltip = this.props.needTooltip;
+
+      if (this.containerElement && needTooltip) {
         this.containerElement.removeEventListener('mouseover', this.handleOver, false);
         this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
         this.tooltipRef.unObserveElement();
@@ -159,6 +163,7 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           dataSelectorId = _this$props.dataSelectorId,
           tooltipClass = _this$props.tooltipClass,
           tooltipParentClass = _this$props.tooltipParentClass,
+          needTooltip = _this$props.needTooltip,
           customProps = _this$props.customProps;
       var _customProps$Containe = customProps.ContainerProps,
           ContainerProps = _customProps$Containe === void 0 ? {} : _customProps$Containe,
@@ -167,22 +172,22 @@ var AppContainer = /*#__PURE__*/function (_React$Component) {
           _customProps$ExtraPro = customProps.ExtraProps,
           ExtraProps = _customProps$ExtraPro === void 0 ? {} : _customProps$ExtraPro;
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
-        className: "".concat(_AppContainerModule["default"].container, " ").concat(className) //onMouseOver={this.handleOver}
-        ,
+        className: "".concat(_AppContainerModule["default"].container, " ").concat(className),
         dataId: dataId,
         dataSelectorId: dataSelectorId,
         tagName: tagName,
         eleRef: this.getContainerRef
       }, ContainerProps, ExtraProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         flexible: true
-      }, children)), /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
+      }, children)), needTooltip ? /*#__PURE__*/_react["default"].createElement("div", _extends({}, ExtraProps, {
         className: "".concat(_AppContainerModule["default"].container, " ").concat(_AppContainerModule["default"].tooltip, " ").concat(tooltipParentClass),
         "data-id": "".concat(dataId, "_tooltip"),
+        "data-test-id": "".concat(dataId, "_tooltip"),
         "data-selector-id": "".concat(dataSelectorId, "_tooltip")
       }), /*#__PURE__*/_react["default"].createElement(_Tooltip["default"], _extends({
         ref: this.setTooltipRef,
         customClass: tooltipClass
-      }, TooltipProps))));
+      }, TooltipProps))) : null);
     }
   }]);
 

package/lib/AppContainer/props/defaultProps.js

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

package/lib/AppContainer/props/propTypes.js

@@ -16,6 +16,7 @@ var propTypes = {
   eleRef: _propTypes["default"].func,
   tagName: _propTypes["default"].string,
   className: _propTypes["default"].string,
+  needTooltip: _propTypes["default"].bool,
   tooltipClass: _propTypes["default"].string,
   tooltipParentClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({

package/lib/Avatar/Avatar.js

@@ -213,15 +213,18 @@ 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,
+        "data-test-id": dataId,
         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-test-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 : '', " ").concat(needInnerBorder ? _AvatarModule["default"].innerBorder : ''),
         "data-id": "".concat(dataId, "_AvatarImg"),
+        "data-test-id": "".concat(dataId, "_AvatarImg"),
         "data-selector-id": "".concat(dataSelectorId, "_AvatarImg"),
         name: name,
         onError: this.putInvalidImageURLJSON,

package/lib/AvatarTeam/AvatarTeam.js

@@ -96,6 +96,7 @@ var AvatarTeam = /*#__PURE__*/function (_React$Component) {
       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-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, AvatarTeamProps), /*#__PURE__*/_react["default"].createElement(_Avatar["default"], _extends({
         name: name,

package/lib/Button/Button.js

@@ -55,6 +55,7 @@ function Button(props) {
   return /*#__PURE__*/_react["default"].createElement("button", _extends({
     className: buttonClass,
     "data-id": disabled ? "".concat(dataId, "_disabled") : dataId,
+    "data-test-id": disabled ? "".concat(dataId, "_disabled") : dataId,
     disabled: disabled || statusLower === 'loading',
     onClick: onClick,
     "data-title": title,

package/lib/Buttongroup/Buttongroup.js

@@ -71,6 +71,7 @@ var Buttongroup = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_ButtongroupModule["default"].buttonGroup, " ").concat(_ButtongroupModule["default"][type], " ").concat(customClass ? customClass : ''),
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: _ButtongroupModule["default"]["align".concat(buttonPosition)]

package/lib/DateTime/CalendarView.js

@@ -219,6 +219,7 @@ var CalendarView = /*#__PURE__*/function (_React$PureComponent) {
         ariaLabel: dayNamesShort
       }), /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(dataId, "_dateContainer"),
+        "data-test-id": "".concat(dataId, "_dateContainer"),
         className: "".concat(_DateTimeModule["default"].dateContainer, " ").concat(needBorder ? _DateTimeModule["default"].separator : '')
       }, rows));
     }

package/lib/DateTime/DateTime.js

@@ -742,6 +742,7 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
       var childEle = /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].container, " ").concat(innerClass),
         "data-id": "".concat(dataId, "_Calendar"),
+        "data-test-id": "".concat(dataId, "_Calendar"),
         onClick: this.closePopup
       }, /*#__PURE__*/_react["default"].createElement(_DateTimePopupHeader["default"], {
         onOpenYearView: this.handleOpenYearView,
@@ -800,7 +801,8 @@ var DateTime = /*#__PURE__*/function (_React$PureComponent) {
 
       return isDefaultPosition ? /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_DateTimeModule["default"].dropBox, " ").concat(className),
-        "data-id": "".concat(dataId, "_dateBoxContainer")
+        "data-id": "".concat(dataId, "_dateBoxContainer"),
+        "data-test-id": "".concat(dataId, "_dateBoxContainer")
       }, childEle) : isReady ? /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
         size: boxSize,
         boxPosition: position,

package/lib/DateTime/DateWidget.js

@@ -1024,11 +1024,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         className: "".concat(_DateWidgetModule["default"].container)
       }, children ? /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
         ref: getTargetRef,
         className: "".concat(className ? className : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : _DateWidgetModule["default"].enabled)
       }, children) : /*#__PURE__*/_react["default"].createElement("div", {
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : "".concat(dataId, "_widget")),
         className: "".concat(className ? className : '', " ").concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled),
         onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
         ref: getTargetRef

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -108,6 +108,7 @@ function DropBoxElement(props) {
   return /*#__PURE__*/_react["default"].createElement("div", {
     className: boxClassName,
     "data-id": "".concat(dataId),
+    "data-test-id": "".concat(dataId),
     "data-selector-id": dataSelectorId,
     ref: getRef,
     style: inlineStyle,
@@ -124,6 +125,7 @@ function DropBoxElement(props) {
     className: "".concat(subContainerClass, " ").concat(_DropBoxElementModule["default"]["".concat(palette, "Palette")]),
     onClick: onClick,
     "data-id": "".concat(dataId, "_subcontainer"),
+    "data-test-id": "".concat(dataId, "_subcontainer"),
     "data-selector-id": "".concat(dataSelectorId, "_subcontainer"),
     ref: subContainerRef
   }, isModel ? /*#__PURE__*/_react["default"].createElement("div", {
@@ -132,6 +134,7 @@ function DropBoxElement(props) {
     className: _DropBoxElementModule["default"][arrowPosition],
     style: arrowstyle,
     "data-id": "".concat(dataId, "_arrow"),
+    "data-test-id": "".concat(dataId, "_arrow"),
     "data-selector-id": "".concat(dataSelectorId, "_arrow")
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _DropBoxElementModule["default"].arrowShape

package/lib/DropDown/DropDown.js

@@ -162,7 +162,8 @@ var DropDownItemContainer = /*#__PURE__*/function (_React$Component4) {
         className: _DropDownModule["default"].listGroup,
         onScroll: this.onScroll,
         ref: this.getRef,
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       }, children);
     }
   }]);

package/lib/DropDown/DropDownHeading.js

@@ -73,6 +73,7 @@ var DropDownHeading = /*#__PURE__*/function (_React$Component) {
         "aria-label": ariaLabel,
         id: htmlId,
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId // tabindex='0'
 
       }, text, children);

package/lib/DropDown/DropDownItem.js

@@ -105,7 +105,8 @@ var DropDownItem = /*#__PURE__*/function (_React$Component) {
         onClick: this.onClick,
         onMouseOver: this.onHover,
         ref: this.getRef,
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       }, children && children[0] ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _DropDownItemModule["default"].children
       }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/_react["default"].createElement("span", {

package/lib/Heading/Heading.js

@@ -71,7 +71,8 @@ var Heading = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         onDoubleClick: onDoubleClick,
         'data-title': dataTitle || title,
-        'data-id': dataId
+        'data-id': dataId,
+        'data-test-id': dataId
       }, a11y), title);
     }
   }]);

package/lib/Label/Label.js

@@ -72,6 +72,7 @@ var Label = /*#__PURE__*/function (_React$Component) {
         htmlFor: htmlFor,
         "data-title": title,
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId,
         onClick: onClick,
         id: id

package/lib/Layout/Box.js

@@ -18,7 +18,11 @@ var _LayoutModule = _interopRequireDefault(require("./Layout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/* eslint css-modules/no-unused-class: 0 */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
 
 /* eslint-disable  react/no-unused-prop-types*/
 function getBoxClassNames(props) {
@@ -109,16 +113,16 @@ function getBoxProps(props) {
 }
 
 function Box(props) {
-  var childProps = getBoxProps(props);
   var tagName = props.tagName;
-  (0, _utils.setProps)(childProps, props, {
+  var componentProps = (0, _utils.setProps)(_objectSpread({}, getBoxProps(props)), props, {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
+    testId: 'data-test-id',
     tourId: 'data-tour',
     dataSelectorId: 'data-selector-id'
   });
-  return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
+  return /*#__PURE__*/_react["default"].createElement(tagName, componentProps);
 }
 
 Box.propTypes = _propTypes.BoxProps;

package/lib/Layout/Container.js

@@ -18,7 +18,11 @@ var _LayoutModule = _interopRequireDefault(require("./Layout.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-/* eslint css-modules/no-unused-class: 0 */
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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; }
 
 /* eslint-disable  react/no-unused-prop-types*/
 function getContainerClassNames(props) {
@@ -126,16 +130,16 @@ function getContainerProps(props) {
 }
 
 function Container(props) {
-  var childProps = getContainerProps(props);
   var tagName = props.tagName;
-  (0, _utils.setProps)(childProps, props, {
+  var componentProps = (0, _utils.setProps)(_objectSpread({}, getContainerProps(props)), props, {
     isScrollAttribute: 'data-scroll',
     eleRef: 'ref',
     dataId: 'data-id',
+    testId: 'data-test-id',
     tourId: 'data-tour',
     dataSelectorId: 'data-selector-id'
   });
-  return /*#__PURE__*/_react["default"].createElement(tagName, childProps);
+  return /*#__PURE__*/_react["default"].createElement(tagName, componentProps);
 }
 
 Container.propTypes = _propTypes.ContainerProps;

package/lib/Layout/props/defaultProps.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ContainerDefaultProps = exports.BoxDefaultProps = void 0;
 var BoxDefaultProps = {
   dataId: 'boxComponent',
+  testId: '',
   isScrollAttribute: false,
   tagName: 'div',
   dataSelectorId: 'box'
@@ -13,6 +14,7 @@ var BoxDefaultProps = {
 exports.BoxDefaultProps = BoxDefaultProps;
 var ContainerDefaultProps = {
   dataId: 'containerComponent',
+  testId: '',
   isScrollAttribute: false,
   isCover: true,
   alignBox: 'column',

package/lib/Layout/props/propTypes.js

@@ -16,6 +16,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,
+  testId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   flexible: _propTypes["default"].bool,
@@ -41,6 +42,7 @@ var ContainerProps = {
   children: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].string]),
   className: _propTypes["default"].string,
   dataId: _propTypes["default"].string,
+  testId: _propTypes["default"].string,
   dataSelectorId: _propTypes["default"].string,
   eleRef: _propTypes["default"].func,
   hidden: _propTypes["default"].array,

package/lib/Layout/utils.js

@@ -46,8 +46,12 @@ function isInteger(value) {
 
 function setProps(childProps, props) {
   var values = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
-  Object.keys(values).map(function (value) {
+  Object.keys(values).forEach(function (value) {
     if (props[value]) {
+      if (value === 'dataId') {
+        childProps['data-test-id'] = props[value];
+      }
+
       childProps[values[value]] = props[value];
     }
   });

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -991,6 +991,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -475,6 +475,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": dataIdMultiSelectComp,
+        "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/MultiSelect/EmptyState.js

@@ -79,21 +79,25 @@ var EmptyState = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_Loading"),
+        "data-test-id": "".concat(dataId, "_Loading"),
         role: role,
         id: htmlId
       }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_srchEmptyMsg"),
+        "data-test-id": "".concat(dataId, "_srchEmptyMsg"),
         role: role,
         id: htmlId
       }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_noOptnsMsg"),
+        "data-test-id": "".concat(dataId, "_noOptnsMsg"),
         role: role,
         id: htmlId
       }, emptyText) : /*#__PURE__*/_react["default"].createElement("div", {
         className: className,
         "data-id": "".concat(dataId, "_NoMoreOptionMsg"),
+        "data-test-id": "".concat(dataId, "_NoMoreOptionMsg"),
         role: role,
         id: htmlId
       }, noMoreText || emptyText));

package/lib/MultiSelect/MultiSelect.js

@@ -1012,6 +1012,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -197,6 +197,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: " ".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
         onClick: this.handleInputFocus,
         "data-selector-id": dataSelectorId

package/lib/Popup/Popup.js

@@ -406,10 +406,7 @@ var Popup = function Popup(Component) {
                 dropElement = _openedPopup.dropElement,
                 placeHolderElement = _openedPopup.placeHolderElement;
             var isDropBoxChild = (0, _Common.isDescendant)(dropElement, target);
-            var isTargetChild = (0, _Common.isDescendant)(placeHolderElement, target); // const massUpdateParent = document.querySelector(
-            //   '[data-id=massUpdatePopup]'
-            // );
-            // const isPopupMassUpdateChild = isDescendant(
+            var isTargetChild = (0, _Common.isDescendant)(placeHolderElement, target); // const isPopupMassUpdateChild = isDescendant(
             //   massUpdateParent,
             //   dropElement
             // );

package/lib/Ribbon/Ribbon.js

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

package/lib/Select/GroupSelect.js

@@ -687,6 +687,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,
+        "data-test-id": dataIdSlctComp,
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {

package/lib/Select/Select.js

@@ -803,7 +803,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
-        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
+        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, needSelectDownIcon ? /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
         a11y: {
           role: 'Menuitem',

package/lib/Select/SelectWithAvatar.js

@@ -232,6 +232,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
         "data-title": isDisabled ? title : null,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -243,6 +244,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       }, selectedId ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: _MultiSelectModule["default"].tag,
         "data-id": "".concat(dataId, "_SelectTag"),
+        "data-test-id": "".concat(dataId, "_SelectTag"),
         key: "".concat(id, "tag")
       }, /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
         avatarPalette: avatarPalette,

package/lib/Select/SelectWithIcon.js

@@ -430,7 +430,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,
         ref: getTargetRef,
-        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
+        "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
+        "data-test-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId)
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         alignBox: "row"
       }, needIcon ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {

package/lib/Switch/Switch.js

@@ -125,6 +125,7 @@ var Switch = /*#__PURE__*/function (_React$Component) {
       }), /*#__PURE__*/_react["default"].createElement("label", {
         htmlFor: id,
         "data-id": dataId,
+        "data-test-id": dataId,
         className: "".concat(_SwitchModule["default"].label, " ").concat(_SwitchModule["default"]["".concat(size, "Label")], " ").concat(customSwitch)
       })), text && /*#__PURE__*/_react["default"].createElement(_Label["default"], _extends({
         text: text,

package/lib/Tab/Tabs.js

@@ -661,7 +661,8 @@ var Tabs = /*#__PURE__*/function (_React$Component) {
       }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/_react["default"].createElement("div", {
         className: hlClass,
         ref: this.getHighlightRef,
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       })));
     }
   }]);

package/lib/Tag/Tag.js

@@ -154,6 +154,7 @@ var Tag = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagModule["default"].container, " ").concat(needEffect && !isReadOnly ? _TagModule["default"].effect : _TagModule["default"].readonly, " ").concat(active ? "".concat(_TagModule["default"].selected, " ").concat(_TagModule["default"]["active".concat(palette)]) : '', " ").concat(onRemove ? active ? "".concat(_TagModule["default"]["active".concat(size, "Effect")]) : '' : '', "  ").concat(_TagModule["default"][size], " ").concat(rounded ? _TagModule["default"].lgRadius : _TagModule["default"].smRadius, " ").concat(_TagModule["default"][palette], " ").concat(disabled ? _TagModule["default"].disabled : '', " ").concat(onSelectTag ? _TagModule["default"].pointer : '', " ").concat(customTag),
         "data-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
+        "data-test-id": active ? "".concat(dataId, "_TagSelected") : "".concat(dataId, "_Tag"),
         onClick: this.handleSelect,
         ref: this.getRef,
         "data-title": tooltip ? tooltip : text,

package/lib/TextBox/TextBox.js

@@ -189,6 +189,7 @@ var Textbox = /*#__PURE__*/function (_React$PureComponent) {
         "aria-multiselectable": ariaMultiselectable,
         className: "".concat(isReadOnly && needReadOnlyStyle ? _TextBoxModule["default"].readonly : '', " ").concat(isClickable ? _TextBoxModule["default"].pointer : '', " ").concat(classList, " ").concat(_TextBoxModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass ? customClass : ''),
         "data-id": "".concat(dataId),
+        "data-test-id": "".concat(dataId),
         "data-selector-id": dataSelectorId,
         id: htmlId || id,
         maxLength: maxLength,

package/lib/Textarea/Textarea.js

@@ -132,6 +132,7 @@ var Textarea = /*#__PURE__*/function (_React$Component) {
         placeholder: placeHolder
       }, options, {
         "data-id": dataId,
+        "data-test-id": dataId,
         maxLength: maxLength,
         onChange: this.onChange,
         onKeyDown: this.onKeyDown,

package/lib/Tooltip/Tooltip.js

@@ -552,7 +552,8 @@ var Tooltip = /*#__PURE__*/function (_React$Component) {
           width: width
         },
         ref: this.getToolTipDOM,
-        "data-id": dataId
+        "data-id": dataId,
+        "data-test-id": dataId
       }, !dataTooltipnoArrow ? /*#__PURE__*/_react["default"].createElement("span", {
         className: "".concat(_TooltipModule["default"].tooltiparrow, " ").concat(arrowStyle),
         style: {

package/lib/semantic/Button/Button.js

@@ -84,6 +84,7 @@ var Button = /*#__PURE__*/function (_React$Component) {
         disabled: disabled,
         ref: ref,
         "data-id": dataId,
+        "data-test-id": dataId,
         onClick: onClick,
         "data-title": title
       }, children ? children : text);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-alpha-273",
+  "version": "1.0.0-alpha-274",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,