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

package/es/DropDown/DropDownHeading.js

@@ -11,7 +11,9 @@ export default class DropDownHeading extends React.Component {
       customClass,
       palette,
       htmlId,
-      a11y
+      a11y,
+      dataId,
+      dataSelectorId
     } = this.props;
     let {
       role,
@@ -24,7 +26,9 @@ export default class DropDownHeading extends 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/es/DropDown/props/defaultProps.js

@@ -5,7 +5,9 @@ export const DropDownHeading_defaultProps = {
   customClass: '',
   children: null,
   palette: 'light',
-  a11y: {}
+  a11y: {},
+  dataId: 'DropDownHeading',
+  dataSelectorId: 'dropdownHeading'
 };
 export const DropDownItem_defaultProps = {
   active: false,

package/es/Label/Label.js

@@ -18,6 +18,7 @@ export default class Label extends React.Component {
       title,
       onClick,
       dataId,
+      dataSelectorId,
       variant,
       customClass,
       id
@@ -28,6 +29,7 @@ export default class Label extends React.Component {
       htmlFor: htmlFor,
       "data-title": title,
       "data-id": dataId,
+      "data-selector-id": dataSelectorId,
       onClick: onClick,
       id: id
     }, text);

package/es/Label/props/defaultProps.js

@@ -6,5 +6,6 @@ export const defaultProps = {
   text: 'Label',
   type: 'title',
   variant: 'default',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'label'
 };

package/es/Label/props/propTypes.js

@@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
 export const propTypes = {
   clipped: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   htmlFor: PropTypes.string,
   onClick: PropTypes.func,
   palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'danger', 'mandatory', 'disable', 'dark']),

package/es/Layout/Box.js

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

package/es/Layout/Container.js

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

package/es/Layout/props/defaultProps.js

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

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,
+  dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   flexible: PropTypes.bool,
   hidden: PropTypes.arrayOf((propValue, key, componentName, location, propFullName) => {
@@ -29,6 +30,7 @@ export const ContainerProps = {
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
   className: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   eleRef: PropTypes.func,
   hidden: PropTypes.array,
   isCover: PropTypes.bool,

package/es/ListItem/ListContainer.js

@@ -24,6 +24,7 @@ const ListContainer = props => {
     isDisabled,
     children,
     dataId,
+    dataSelectorId,
     a11y,
     customClass,
     customProps,
@@ -74,6 +75,7 @@ const ListContainer = props => {
     alignBox: "row",
     className: `${style.list} ${style[size]} ${mobileToTab && isTouchDevice ? style.responsiveHeight : ''} ${style[palette]} ${active ? style[`active${palette}`] : highlight && !isDisabled ? style[`${palette}Hover`] : ''} ${autoHover && !isDisabled ? style[`${palette}Effect`] : ''} ${needTick ? style[`${size}withTick`] : ''} ${isDisabled ? CssProvider('isDisable') : ''} ${needBorder ? active ? style.activewithBorder : style.withBorder : ''} ${customClass}`,
     dataId: dataId,
+    dataSelectorId: dataSelectorId,
     onClick: !isDisabled && onClick,
     onMouseEnter: onMouseEnter,
     onMouseOver: onMouseOver,

package/es/ListItem/ListItem.js

@@ -61,6 +61,7 @@ export default class ListItem extends React.Component {
       isDisabled,
       children,
       dataId,
+      dataSelectorId,
       a11y,
       customClass,
       customProps
@@ -90,6 +91,7 @@ export default class ListItem extends React.Component {
       needBorder: needBorder,
       customClass: customListItem,
       dataId: dataIdString,
+      dataSelectorId: `${dataSelectorId}`,
       isLink: isLink,
       href: href,
       target: target,
@@ -110,7 +112,8 @@ export default class ListItem extends React.Component {
     }, children) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.tickIcon} ${tickIconPalette} ${customTickIcon}`,
       "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"

package/es/ListItem/ListItemWithAvatar.js

@@ -60,6 +60,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       title,
       needTick,
       dataId,
+      dataSelectorId,
       initial,
       isDisabled,
       needBorder,
@@ -96,6 +97,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
       needBorder: needBorder,
       customClass: customListItem,
       dataId: `${dataIdString}_ListItemWithAvatar`,
+      dataSelectorId: `${dataSelectorId}`,
       onClick: this.handleClick,
       onMouseEnter: this.handleMouseEnter,
       eleRef: this.getRef,
@@ -132,7 +134,8 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, value) : null, needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"

package/es/ListItem/ListItemWithCheckBox.js

@@ -49,6 +49,7 @@ export default class ListItemWithCheckBox extends React.Component {
       autoHover,
       palette,
       dataId,
+      dataSelectorId,
       title,
       isDisabled,
       disableTitle,
@@ -75,6 +76,7 @@ export default class ListItemWithCheckBox extends React.Component {
       autoHover: autoHover,
       customClass: customListItem,
       dataId: `${dataId ? dataId : value}_ListItemWithCheckBox`,
+      dataSelectorId: dataSelectorId,
       onClick: this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,

package/es/ListItem/ListItemWithIcon.js

@@ -54,6 +54,7 @@ export default class ListItemWithIcon extends React.Component {
       palette,
       iconClass,
       dataId,
+      dataSelectorId,
       title,
       needTick,
       isLink,
@@ -86,6 +87,7 @@ export default class ListItemWithIcon extends React.Component {
       needBorder: needBorder,
       customClass: customClass,
       dataId: dataIdString,
+      dataSelectorId: dataSelectorId,
       isLink: isLink,
       href: href,
       target: target,
@@ -114,7 +116,8 @@ export default class ListItemWithIcon extends React.Component {
     }, value), needTick && active ? /*#__PURE__*/React.createElement(Box, {
       className: style.tickIcon,
       "aria-hidden": ariaHidden,
-      dataId: `${dataIdString}_tickIcon`
+      dataId: `${dataIdString}_tickIcon`,
+      dataSelectorId: `${dataSelectorId}_tickIcon`
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"

package/es/ListItem/ListItemWithRadio.js

@@ -50,6 +50,7 @@ export default class ListItemWithRadio extends React.Component {
       palette,
       id,
       dataId,
+      dataSelectorId,
       title,
       isDisabled,
       disableTitle,
@@ -76,6 +77,7 @@ export default class ListItemWithRadio extends React.Component {
       autoHover: autoHover,
       customClass: customListItem,
       dataId: dataId,
+      dataSelectorId: dataSelectorId,
       onClick: this.onClick,
       onMouseOver: this.onHover,
       eleRef: this.getRef,

package/es/ListItem/props/defaultProps.js

@@ -10,7 +10,8 @@ export const ListContainerDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listContainer'
 };
 export const ListItemDefaultProps = {
   active: false,
@@ -25,7 +26,8 @@ export const ListItemDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItem'
 };
 export const ListItemWithAvatarDefaultProps = {
   active: false,
@@ -41,7 +43,8 @@ export const ListItemWithAvatarDefaultProps = {
   needAvatarTitle: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithAvatar'
 };
 export const ListItemWithCheckBoxDefaultProps = {
   active: false,
@@ -53,7 +56,8 @@ export const ListItemWithCheckBoxDefaultProps = {
   value: 'List',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithCheckBox'
 };
 export const ListItemWithIconDefaultProps = {
   active: false,
@@ -68,7 +72,8 @@ export const ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithIcon'
 };
 export const ListItemWithRadioDefaultProps = {
   active: false,
@@ -81,5 +86,6 @@ export const ListItemWithRadioDefaultProps = {
   dataId: 'listItemWithRadioComp',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithRadio'
 };

package/es/ListItem/props/propTypes.js

@@ -4,6 +4,7 @@ export const ListContainer_Props = {
   autoHover: PropTypes.bool,
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   highlight: PropTypes.bool,
   href: PropTypes.string,
@@ -30,6 +31,7 @@ export const ListItem_Props = {
   autoHover: PropTypes.bool,
   children: PropTypes.node,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -65,6 +67,7 @@ export const ListItemWithAvatar_Props = {
   avatarPalette: PropTypes.string,
   avatarPalette: PropTypes.string,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -103,6 +106,7 @@ export const ListItemWithCheckBox_Props = {
   autoHover: PropTypes.bool,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -129,6 +133,7 @@ export const ListItemWithIcon_Props = {
   active: PropTypes.bool,
   autoHover: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,
@@ -161,6 +166,7 @@ export const ListItemWithRadio_Props = {
   autoHover: PropTypes.bool,
   checked: PropTypes.bool,
   dataId: PropTypes.string,
+  dataSelectorId: PropTypes.string,
   disableTitle: PropTypes.string,
   getRef: PropTypes.func,
   highlight: PropTypes.bool,

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -763,6 +763,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       selectedGroupOptions,
       placeHolder,
       dataId,
+      dataSelectorId,
       isReadOnly,
       isDisabled,
       isPopupOpen,
@@ -827,7 +828,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
       "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, children ? /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -346,7 +346,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       customProps,
       needEffect,
       disabledOptions,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     let {
       SuggestionsProps = {},
@@ -389,7 +390,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": dataIdMultiSelectComp,
       "data-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",

package/es/MultiSelect/MultiSelect.js

@@ -800,6 +800,7 @@ export class MultiSelectComponent extends React.Component {
       title,
       needResponsive,
       dataId,
+      dataSelectorId,
       isSearching,
       borderColor,
       textBoxClass,
@@ -856,7 +857,8 @@ export class MultiSelectComponent extends React.Component {
       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-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -85,6 +85,7 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       isDisabled,
       title,
       dataId,
+      dataSelectorId,
       needResponsive,
       borderColor,
       textBoxClass,
@@ -129,7 +130,8 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       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-title": isDisabled ? title : null,
-      onClick: this.handleInputFocus
+      onClick: this.handleInputFocus,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",

package/es/MultiSelect/props/defaultProps.js

@@ -34,7 +34,8 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   palette: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 export const AdvancedMultiSelect_defaultProps = {
   animationStyle: 'bounce',
@@ -64,7 +65,8 @@ export const AdvancedMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedMultiSelect'
 };
 export const EmptyState_defaultProps = {
   dataId: 'empty',
@@ -103,7 +105,8 @@ export const MultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   boxSize: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelect'
 };
 export const MultiSelectHeader_defaultProps = {
   dataId: 'MultiSelectHeader'
@@ -134,7 +137,8 @@ export const MultiSelectWithAvatar_defaultProps = {
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelectWithAvatar'
 };
 export const SelectedOptions_defaultProps = {
   size: 'medium'

package/es/MultiSelect/props/propTypes.js

@@ -50,7 +50,8 @@ export const AdvancedGroupMultiSelect_propTypes = {
   isSearchClearOnSelect: PropTypes.bool,
   palette: PropTypes.oneOf(['default', 'dark']),
   needEffect: true,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const AdvancedMultiSelect_propTypes = {
   id: PropTypes.string.isRequired,
@@ -133,7 +134,8 @@ export const AdvancedMultiSelect_propTypes = {
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const EmptyState_propTypes = {
   dataId: PropTypes.string,
@@ -236,7 +238,8 @@ export const MultiSelect_propTypes = {
   getFooter: PropTypes.func,
   needEffect: PropTypes.bool,
   boxSize: PropTypes.string,
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -314,7 +317,8 @@ export const MultiSelectWithAvatar_propTypes = {
   customChildrenClass: PropTypes.string,
   isSearchClearOnSelect: PropTypes.bool,
   disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  isLoading: PropTypes.bool
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };
 export const SelectedOptions_propTypes = {
   getRef: PropTypes.func,

package/es/Ribbon/Ribbon.js

@@ -12,12 +12,14 @@ export default class Ribbon extends React.Component {
       palette,
       size,
       dataId,
-      customClass
+      customClass,
+      dataSelectorId
     } = this.props;
     return /*#__PURE__*/React.createElement("span", {
       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-id": dataId,
+      "data-selector-id": dataSelectorId
     }, type === 'sticker' ? /*#__PURE__*/React.createElement("span", {
       className: style.after
     }) : null, children ? /*#__PURE__*/React.createElement("span", {

package/es/Ribbon/props/defaultProps.js

@@ -4,5 +4,6 @@ export const defaultProps = {
   text: 'Ribbon',
   type: 'default',
   dataId: 'ribbonComp',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'ribbon'
 };

package/es/Ribbon/props/propTypes.js

@@ -6,5 +6,6 @@ export const propTypes = {
   size: PropTypes.oneOf(['small', 'medium', 'large', 'xlarge']),
   text: PropTypes.string,
   type: PropTypes.oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
-  customClass: PropTypes.string
+  customClass: PropTypes.string,
+  dataSelectorId: PropTypes.string
 };

package/es/Select/GroupSelect.js

@@ -541,7 +541,8 @@ export class GroupSelectComponent extends PureComponent {
       i18nKeys,
       htmlId,
       iconOnHover,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -569,7 +570,8 @@ 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-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/es/Select/Select.js

@@ -677,7 +677,8 @@ export class SelectComponent extends Component {
       customProps,
       autoComplete,
       ariaLabelledby,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     let {
       TextBoxIcon_i18n,
@@ -705,7 +706,8 @@ export class SelectComponent extends Component {
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${isParentBased || isReadOnly || isDisabled ? style.container : ''} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/es/Select/SelectWithAvatar.js

@@ -144,7 +144,8 @@ class SelectWithAvatarComponent extends SelectComponent {
       i18nKeys,
       htmlId,
       needEffect,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -169,7 +170,8 @@ 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-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement(Container, {
       align: "vertical",
       alignBox: "row",

package/es/Select/SelectWithIcon.js

@@ -304,7 +304,8 @@ class SelectWithIcon extends Component {
       iconClass,
       i18nKeys,
       htmlId,
-      isLoading
+      isLoading,
+      dataSelectorId
     } = this.props;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -320,7 +321,8 @@ class SelectWithIcon extends Component {
     let ariaErrorId = this.getNextAriaId();
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''}`,
-      "data-title": isDisabled ? title : null
+      "data-title": isDisabled ? title : null,
+      "data-selector-id": dataSelectorId
     }, /*#__PURE__*/React.createElement("div", {
       className: `${className ? className : ''}`,
       onClick: isDisabled || isReadOnly ? null : this.togglePopup,