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

package/README.md

@@ -32,6 +32,11 @@ In this Package, we Provide Some Basic Components to Build Web App
 - TextBoxIcon
 - Tooltip
 
+# 1.0.0-alpha-274
+
+- **AppContainer** - needTooltip prop added
+- data-test-id attribute added for all element which having data-id attribute to separate customization and automation
+
 # 1.0.0-alpha-273
 
 - Variable Replacer Issue Resolved

package/es/Accordion/Accordion.js

@@ -70,6 +70,7 @@ export default class Accordion extends React.Component {
       "aria-expanded": ariaExpanded,
       "aria-haspopup": ariaHaspopup,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, children);
   }

package/es/Accordion/AccordionItem.js

@@ -38,6 +38,7 @@ export default class AccordionItem extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: className ? className : '',
       "data-id": dataId,
+      "data-test-id": dataId,
       role: role,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {

package/es/AppContainer/AppContainer.js

@@ -65,7 +65,11 @@ export default class AppContainer extends React.Component {
   }
 
   componentDidMount() {
-    if (this.containerElement) {
+    let {
+      needTooltip
+    } = this.props;
+
+    if (this.containerElement && needTooltip) {
       this.containerElement.addEventListener('mouseover', this.handleOver, false);
       this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.observeElement();
@@ -73,7 +77,11 @@ export default class AppContainer extends React.Component {
   }
 
   componentWillUnmount() {
-    if (this.containerElement) {
+    let {
+      needTooltip
+    } = this.props;
+
+    if (this.containerElement && needTooltip) {
       this.containerElement.removeEventListener('mouseover', this.handleOver, false);
       this.containerElement.addEventListener('mouseout', this.removeTimeout, false);
       this.tooltipRef.unObserveElement();
@@ -89,6 +97,7 @@ export default class AppContainer extends React.Component {
       dataSelectorId,
       tooltipClass,
       tooltipParentClass,
+      needTooltip,
       customProps
     } = this.props;
     let {
@@ -97,22 +106,22 @@ export default class AppContainer extends React.Component {
       ExtraProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Container, _extends({
-      className: `${style.container} ${className}` //onMouseOver={this.handleOver}
-      ,
+      className: `${style.container} ${className}`,
       dataId: dataId,
       dataSelectorId: dataSelectorId,
       tagName: tagName,
       eleRef: this.getContainerRef
     }, ContainerProps, ExtraProps), /*#__PURE__*/React.createElement(Box, {
       flexible: true
-    }, children)), /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
+    }, children)), needTooltip ? /*#__PURE__*/React.createElement("div", _extends({}, ExtraProps, {
       className: `${style.container} ${style.tooltip} ${tooltipParentClass}`,
       "data-id": `${dataId}_tooltip`,
+      "data-test-id": `${dataId}_tooltip`,
       "data-selector-id": `${dataSelectorId}_tooltip`
     }), /*#__PURE__*/React.createElement(Tooltip, _extends({
       ref: this.setTooltipRef,
       customClass: tooltipClass
-    }, TooltipProps))));
+    }, TooltipProps))) : null);
   }
 
 }

package/es/AppContainer/props/defaultProps.js

@@ -5,5 +5,6 @@ export const defaultProps = {
   tooltipClass: '',
   tooltipParentClass: '',
   customProps: {},
-  dataSelectorId: 'appContainer'
+  dataSelectorId: 'appContainer',
+  needTooltip: true
 };

package/es/AppContainer/props/propTypes.js

@@ -6,6 +6,7 @@ export const propTypes = {
   eleRef: PropTypes.func,
   tagName: PropTypes.string,
   className: PropTypes.string,
+  needTooltip: PropTypes.bool,
   tooltipClass: PropTypes.string,
   tooltipParentClass: PropTypes.string,
   customProps: PropTypes.shape({

package/es/Avatar/Avatar.js

@@ -160,15 +160,18 @@ export default class Avatar extends React.Component {
       className: `${style.avatar} ${style[size]} ${AvatarSize(size)} ${style[shapeStyle]} ${style[palette]} ${textStyle} ${borderStyle} ${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.createElement("span", {
       className: `${style.initial}`,
       "data-id": `${dataId}_AvatarInitial`,
+      "data-test-id": `${dataId}_AvatarInitial`,
       "data-selector-id": `${dataSelectorId}_AvatarInitial`
     }, initial), (showAvatar || showAlternateAvatar) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
       className: `${style.image} ${isAnimate ? style.animate : ''} ${needInnerBorder ? style.innerBorder : ''}`,
       "data-id": `${dataId}_AvatarImg`,
+      "data-test-id": `${dataId}_AvatarImg`,
       "data-selector-id": `${dataSelectorId}_AvatarImg`,
       name: name,
       onError: this.putInvalidImageURLJSON,

package/es/AvatarTeam/AvatarTeam.js

@@ -50,6 +50,7 @@ export default class AvatarTeam extends React.Component {
     return /*#__PURE__*/React.createElement("span", _extends({
       className: `${style.container} ${borderOnActive ? style.borderOnActive : border ? style.borderOnHover : ''} `,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, AvatarTeamProps), /*#__PURE__*/React.createElement(Avatar, _extends({
       name: name,

package/es/Button/Button.js

@@ -42,6 +42,7 @@ export default function Button(props) {
   return /*#__PURE__*/React.createElement("button", _extends({
     className: buttonClass,
     "data-id": disabled ? `${dataId}_disabled` : dataId,
+    "data-test-id": disabled ? `${dataId}_disabled` : dataId,
     disabled: disabled || statusLower === 'loading',
     onClick: onClick,
     "data-title": title,

package/es/Buttongroup/Buttongroup.js

@@ -25,6 +25,7 @@ export default class Buttongroup extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.buttonGroup} ${style[type]} ${customClass ? customClass : ''}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: style[`align${buttonPosition}`]

package/es/DateTime/CalendarView.js

@@ -171,6 +171,7 @@ export default class CalendarView extends React.PureComponent {
       ariaLabel: dayNamesShort
     }), /*#__PURE__*/React.createElement("div", {
       "data-id": `${dataId}_dateContainer`,
+      "data-test-id": `${dataId}_dateContainer`,
       className: `${style.dateContainer} ${needBorder ? style.separator : ''}`
     }, rows));
   }

package/es/DateTime/DateTime.js

@@ -661,6 +661,7 @@ export default class DateTime extends React.PureComponent {
     const childEle = /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${innerClass}`,
       "data-id": `${dataId}_Calendar`,
+      "data-test-id": `${dataId}_Calendar`,
       onClick: this.closePopup
     }, /*#__PURE__*/React.createElement(DateTimePopupHeader, {
       onOpenYearView: this.handleOpenYearView,
@@ -718,7 +719,8 @@ export default class DateTime extends React.PureComponent {
     })) : null));
     return isDefaultPosition ? /*#__PURE__*/React.createElement("div", {
       className: `${style.dropBox} ${className}`,
-      "data-id": `${dataId}_dateBoxContainer`
+      "data-id": `${dataId}_dateBoxContainer`,
+      "data-test-id": `${dataId}_dateBoxContainer`
     }, childEle) : isReady ? /*#__PURE__*/React.createElement(ResponsiveDropBox, {
       size: boxSize,
       boxPosition: position,

package/es/DateTime/DateWidget.js

@@ -1000,11 +1000,13 @@ class DateWidgetComponent extends React.Component {
       className: `${style.container}`
     }, children ? /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       onClick: isDisabled || isReadOnly ? null : this.handleTogglePopup,
       ref: getTargetRef,
       className: `${className ? className : ''} ${isDisabled ? style.disabled : style.enabled}`
     }, children) : /*#__PURE__*/React.createElement("div", {
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : `${dataId}_widget`}`,
       className: `${className ? className : ''} ${style.textBox} ${isPopupOpen && !isDisabled ? style.textBoxFocus : ''} ${isDisabled ? style.disabled : isReadOnly ? style.readOnly : style.enabled}`,
       onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
       ref: getTargetRef

package/es/DropBox/DropBoxElement/DropBoxElement.js

@@ -96,6 +96,7 @@ export default function DropBoxElement(props) {
   return /*#__PURE__*/React.createElement("div", {
     className: boxClassName,
     "data-id": `${dataId}`,
+    "data-test-id": `${dataId}`,
     "data-selector-id": dataSelectorId,
     ref: getRef,
     style: inlineStyle,
@@ -112,6 +113,7 @@ export default function DropBoxElement(props) {
     className: `${subContainerClass} ${style[`${palette}Palette`]}`,
     onClick: onClick,
     "data-id": `${dataId}_subcontainer`,
+    "data-test-id": `${dataId}_subcontainer`,
     "data-selector-id": `${dataSelectorId}_subcontainer`,
     ref: subContainerRef
   }, isModel ? /*#__PURE__*/React.createElement("div", {
@@ -120,6 +122,7 @@ export default function DropBoxElement(props) {
     className: style[arrowPosition],
     style: arrowstyle,
     "data-id": `${dataId}_arrow`,
+    "data-test-id": `${dataId}_arrow`,
     "data-selector-id": `${dataSelectorId}_arrow`
   }, /*#__PURE__*/React.createElement("div", {
     className: style.arrowShape

package/es/DropDown/DropDown.js

@@ -71,7 +71,8 @@ export class DropDownItemContainer extends React.Component {
       className: style.listGroup,
       onScroll: this.onScroll,
       ref: this.getRef,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, children);
   }
 

package/es/DropDown/DropDownHeading.js

@@ -28,6 +28,7 @@ export default class DropDownHeading extends React.Component {
       "aria-label": ariaLabel,
       id: htmlId,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId // tabindex='0'
 
     }, text, children);

package/es/DropDown/DropDownItem.js

@@ -58,7 +58,8 @@ export default class DropDownItem extends 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.createElement("span", {
       className: style.children
     }, " ", children[0], " ") : children !== undefined ? /*#__PURE__*/React.createElement("span", {

package/es/Heading/Heading.js

@@ -20,6 +20,7 @@ export default class Heading extends React.Component {
       onDoubleClick,
       'data-title': dataTitle || title,
       'data-id': dataId,
+      'data-test-id': dataId,
       ...a11y
     }, title);
   }

package/es/Label/Label.js

@@ -29,6 +29,7 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId,
       onClick: onClick,
       id: id

package/es/Layout/Box.js

@@ -96,18 +96,19 @@ export function getBoxProps(props) {
   return createProps(propTypes, props, getBoxClassNames(props));
 }
 export default function Box(props) {
-  let childProps = getBoxProps(props);
   let {
     tagName
   } = props;
-  setProps(childProps, props, {
+  let componentProps = setProps({ ...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.createElement(tagName, childProps);
+  return /*#__PURE__*/React.createElement(tagName, componentProps);
 }
 Box.propTypes = propTypes;
 Box.defaultProps = defaultProps;

package/es/Layout/Container.js

@@ -113,18 +113,19 @@ export function getContainerProps(props) {
   return createProps(propTypes, props, getContainerClassNames(props));
 }
 export default function Container(props) {
-  let childProps = getContainerProps(props);
   let {
     tagName
   } = props;
-  setProps(childProps, props, {
+  let componentProps = setProps({ ...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.createElement(tagName, childProps);
+  return /*#__PURE__*/React.createElement(tagName, componentProps);
 }
 Container.propTypes = propTypes;
 Container.defaultProps = defaultProps;

package/es/Layout/props/defaultProps.js

@@ -1,11 +1,13 @@
 export const BoxDefaultProps = {
   dataId: 'boxComponent',
+  testId: '',
   isScrollAttribute: false,
   tagName: 'div',
   dataSelectorId: 'box'
 };
 export const ContainerDefaultProps = {
   dataId: 'containerComponent',
+  testId: '',
   isScrollAttribute: false,
   isCover: true,
   alignBox: 'column',

package/es/Layout/props/propTypes.js

@@ -6,6 +6,7 @@ export const BoxProps = {
   className: PropTypes.string,
   column: PropTypes.oneOf(['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']),
   dataId: PropTypes.string,
+  testId: PropTypes.string,
   dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   flexible: PropTypes.bool,
@@ -30,6 +31,7 @@ export const ContainerProps = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
+  testId: PropTypes.string,
   dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   hidden: PropTypes.array,

package/es/Layout/utils.js

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

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -902,6 +902,7 @@ class AdvancedGroupMultiSelect extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -411,6 +411,7 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
+      "data-test-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/MultiSelect/EmptyState.js

@@ -35,21 +35,25 @@ export default class EmptyState extends React.PureComponent {
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_Loading`,
+      "data-test-id": `${dataId}_Loading`,
       role: role,
       id: htmlId
     }, loadingText) : searchString.length && suggestions.length === 0 ? getCustomEmptyState ? getCustomEmptyState() : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_srchEmptyMsg`,
+      "data-test-id": `${dataId}_srchEmptyMsg`,
       role: role,
       id: htmlId
     }, searchEmptyText || emptyText) : options.length === 0 ? /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_noOptnsMsg`,
+      "data-test-id": `${dataId}_noOptnsMsg`,
       role: role,
       id: htmlId
     }, emptyText) : /*#__PURE__*/React.createElement("div", {
       className: className,
       "data-id": `${dataId}_NoMoreOptionMsg`,
+      "data-test-id": `${dataId}_NoMoreOptionMsg`,
       role: role,
       id: htmlId
     }, noMoreText || emptyText));

package/es/MultiSelect/MultiSelect.js

@@ -932,6 +932,7 @@ export class MultiSelectComponent extends React.Component {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -143,6 +143,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: ` ${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       onClick: this.handleInputFocus,
       "data-selector-id": dataSelectorId

package/es/Popup/Popup.js

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

package/es/Ribbon/Ribbon.js

@@ -20,6 +20,7 @@ export default class Ribbon extends React.Component {
       className: `${style.basic} ${customClass} ${type !== 'tag' ? type === 'plain' || type === 'box' || type === 'stamp' ? `${style[`plain_${palette}`]} 
                  ${type === 'box' ? style[`box_${palette}`] : ''} ${type === 'stamp' ? style[`stamp_${palette}`] : ''}` : `${style[`palette_${palette}`]} ${type === 'default' ? style[`default_${palette}`] : ''}` : ''} ${style[size]} ${style[type]}`,
       "data-id": dataId,
+      "data-test-id": dataId,
       "data-selector-id": dataSelectorId
     }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
       className: style.after

package/es/Select/GroupSelect.js

@@ -615,6 +615,7 @@ export class GroupSelectComponent extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
       "data-id": dataIdSlctComp,
+      "data-test-id": dataIdSlctComp,
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {

package/es/Select/Select.js

@@ -764,7 +764,8 @@ export class SelectComponent extends Component {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, needSelectDownIcon ? /*#__PURE__*/React.createElement(TextBoxIcon, {
       a11y: {
         role: 'Menuitem',

package/es/Select/SelectWithAvatar.js

@@ -183,6 +183,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper}  ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''} ${className ? className : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
       "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
@@ -194,6 +195,7 @@ class SelectWithAvatarComponent extends SelectComponent {
     }, selectedId ? /*#__PURE__*/React.createElement(Box, {
       className: style.tag,
       "data-id": `${dataId}_SelectTag`,
+      "data-test-id": `${dataId}_SelectTag`,
       key: `${id}tag`
     }, /*#__PURE__*/React.createElement(Tag, {
       avatarPalette: avatarPalette,

package/es/Select/SelectWithIcon.js

@@ -367,7 +367,8 @@ class SelectWithIcon extends Component {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,
       ref: getTargetRef,
-      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
+      "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
+      "data-test-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`
     }, /*#__PURE__*/React.createElement(Container, {
       alignBox: "row"
     }, needIcon ? /*#__PURE__*/React.createElement(Container, {

package/es/Switch/Switch.js

@@ -76,6 +76,7 @@ export default class Switch extends React.Component {
     }), /*#__PURE__*/React.createElement("label", {
       htmlFor: id,
       "data-id": dataId,
+      "data-test-id": dataId,
       className: `${style.label} ${style[`${size}Label`]} ${customSwitch}`
     })), text && /*#__PURE__*/React.createElement(Label, _extends({
       text: text,

package/es/Tab/Tabs.js

@@ -598,7 +598,8 @@ class Tabs extends React.Component {
     }, this.renderTabs(mainTabs, moreTabs, false))), otherTabs.length ? /*#__PURE__*/React.createElement(Box, null, otherTabs) : null, isAnimate && needTabBorder && needAppearance && /*#__PURE__*/React.createElement("div", {
       className: hlClass,
       ref: this.getHighlightRef,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     })));
   }
 

package/es/Tag/Tag.js

@@ -99,6 +99,7 @@ export default class Tag extends PureComponent {
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${needEffect && !isReadOnly ? style.effect : style.readonly} ${active ? `${style.selected} ${style[`active${palette}`]}` : ''} ${onRemove ? active ? `${style[`active${size}Effect`]}` : '' : ''}  ${style[size]} ${rounded ? style.lgRadius : style.smRadius} ${style[palette]} ${disabled ? style.disabled : ''} ${onSelectTag ? style.pointer : ''} ${customTag}`,
       "data-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
+      "data-test-id": active ? `${dataId}_TagSelected` : `${dataId}_Tag`,
       onClick: this.handleSelect,
       ref: this.getRef,
       "data-title": tooltip ? tooltip : text,

package/es/TextBox/TextBox.js

@@ -150,6 +150,7 @@ export default class Textbox extends React.PureComponent {
       "aria-multiselectable": ariaMultiselectable,
       className: `${isReadOnly && needReadOnlyStyle ? style.readonly : ''} ${isClickable ? style.pointer : ''} ${classList} ${style[`borderColor_${borderColor}`]} ${customClass ? customClass : ''}`,
       "data-id": `${dataId}`,
+      "data-test-id": `${dataId}`,
       "data-selector-id": dataSelectorId,
       id: htmlId || id,
       maxLength: maxLength,

package/es/Textarea/Textarea.js

@@ -94,6 +94,7 @@ export default class Textarea extends React.Component {
       placeholder: placeHolder
     }, options, {
       "data-id": dataId,
+      "data-test-id": dataId,
       maxLength: maxLength,
       onChange: this.onChange,
       onKeyDown: this.onKeyDown,

package/es/Tooltip/Tooltip.js

@@ -488,7 +488,8 @@ export default class Tooltip extends React.Component {
         width
       },
       ref: this.getToolTipDOM,
-      "data-id": dataId
+      "data-id": dataId,
+      "data-test-id": dataId
     }, !dataTooltipnoArrow ? /*#__PURE__*/React.createElement("span", {
       className: `${style.tooltiparrow} ${arrowStyle}`,
       style: {

package/es/semantic/Button/Button.js

@@ -44,6 +44,7 @@ export default class Button extends React.Component {
       disabled: disabled,
       ref: ref,
       "data-id": dataId,
+      "data-test-id": dataId,
       onClick: onClick,
       "data-title": title
     }, children ? children : text);

package/lib/Accordion/Accordion.js

@@ -115,6 +115,7 @@ var Accordion = /*#__PURE__*/function (_React$Component) {
         "aria-expanded": ariaExpanded,
         "aria-haspopup": ariaHaspopup,
         "data-id": dataId,
+        "data-test-id": dataId,
         "data-selector-id": dataSelectorId
       }, children);
     }

package/lib/Accordion/AccordionItem.js

@@ -82,6 +82,7 @@ var AccordionItem = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: className ? className : '',
         "data-id": dataId,
+        "data-test-id": dataId,
         role: role,
         "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {