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

package/lib/Layout/props/defaultProps.js

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

package/lib/Layout/props/propTypes.js

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

package/lib/ListItem/ListContainer.js

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

package/lib/ListItem/ListItem.js

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

package/lib/ListItem/ListItemWithAvatar.js

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

package/lib/ListItem/ListItemWithCheckBox.js

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

package/lib/ListItem/ListItemWithIcon.js

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

package/lib/ListItem/ListItemWithRadio.js

@@ -78,6 +78,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         palette = _this$props4.palette,
         id = _this$props4.id,
         dataId = _this$props4.dataId,
+        dataSelectorId = _this$props4.dataSelectorId,
         title = _this$props4.title,
         isDisabled = _this$props4.isDisabled,
         disableTitle = _this$props4.disableTitle,
@@ -104,6 +105,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         customClass: customListItem,
         dataId: dataId,
+        dataSelectorId: dataSelectorId,
         onClick: this.onClick,
         onMouseOver: this.onHover,
         eleRef: this.getRef,

package/lib/ListItem/props/defaultProps.js

@@ -16,7 +16,8 @@ var ListContainerDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listContainer'
 };
 exports.ListContainerDefaultProps = ListContainerDefaultProps;
 var ListItemDefaultProps = {
@@ -32,7 +33,8 @@ var ListItemDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItem'
 };
 exports.ListItemDefaultProps = ListItemDefaultProps;
 var ListItemWithAvatarDefaultProps = {
@@ -49,7 +51,8 @@ var ListItemWithAvatarDefaultProps = {
   needAvatarTitle: true,
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithAvatar'
 };
 exports.ListItemWithAvatarDefaultProps = ListItemWithAvatarDefaultProps;
 var ListItemWithCheckBoxDefaultProps = {
@@ -62,7 +65,8 @@ var ListItemWithCheckBoxDefaultProps = {
   value: 'List',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithCheckBox'
 };
 exports.ListItemWithCheckBoxDefaultProps = ListItemWithCheckBoxDefaultProps;
 var ListItemWithIconDefaultProps = {
@@ -78,7 +82,8 @@ var ListItemWithIconDefaultProps = {
   needBorder: true,
   a11y: {},
   customClass: '',
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithIcon'
 };
 exports.ListItemWithIconDefaultProps = ListItemWithIconDefaultProps;
 var ListItemWithRadioDefaultProps = {
@@ -92,6 +97,7 @@ var ListItemWithRadioDefaultProps = {
   dataId: 'listItemWithRadioComp',
   a11y: {},
   customClass: {},
-  customProps: {}
+  customProps: {},
+  dataSelectorId: 'listItemWithRadio'
 };
 exports.ListItemWithRadioDefaultProps = ListItemWithRadioDefaultProps;

package/lib/ListItem/props/propTypes.js

@@ -13,6 +13,7 @@ var ListContainer_Props = {
   autoHover: _propTypes["default"].bool,
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   highlight: _propTypes["default"].bool,
   href: _propTypes["default"].string,
@@ -40,6 +41,7 @@ var ListItem_Props = {
   autoHover: _propTypes["default"].bool,
   children: _propTypes["default"].node,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,
@@ -74,7 +76,7 @@ var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
@@ -91,6 +93,7 @@ var ListItemWithCheckBox_Props = {
   autoHover: _propTypes["default"].bool,
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,
@@ -118,6 +121,7 @@ var ListItemWithIcon_Props = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,
@@ -151,6 +155,7 @@ var ListItemWithRadio_Props = {
   autoHover: _propTypes["default"].bool,
   checked: _propTypes["default"].bool,
   dataId: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string,
   disableTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   highlight: _propTypes["default"].bool,

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -803,6 +803,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         selectedGroupOptions = _this$props8.selectedGroupOptions,
         placeHolder = _this$props8.placeHolder,
         dataId = _this$props8.dataId,
+        dataSelectorId = _this$props8.dataSelectorId,
         isReadOnly = _this$props8.isReadOnly,
         isDisabled = _this$props8.isDisabled,
         isPopupOpen = _this$props8.isPopupOpen,
@@ -864,7 +865,8 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
         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-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -359,7 +359,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         customProps = _this$props5.customProps,
         needEffect = _this$props5.needEffect,
         disabledOptions = _this$props5.disabledOptions,
-        isLoading = _this$props5.isLoading;
+        isLoading = _this$props5.isLoading,
+        dataSelectorId = _this$props5.dataSelectorId;
       var _customProps$Suggesti = customProps.SuggestionsProps,
         SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
         _customProps$DropBoxP = customProps.DropBoxProps,
@@ -398,7 +399,8 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
         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-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/MultiSelect.js

@@ -831,6 +831,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         title = _this$props14.title,
         needResponsive = _this$props14.needResponsive,
         dataId = _this$props14.dataId,
+        dataSelectorId = _this$props14.dataSelectorId,
         isSearching = _this$props14.isSearching,
         borderColor = _this$props14.borderColor,
         textBoxClass = _this$props14.textBoxClass,
@@ -884,7 +885,8 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         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-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/MultiSelectWithAvatar.js

@@ -105,6 +105,7 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         isDisabled = _this$props.isDisabled,
         title = _this$props.title,
         dataId = _this$props.dataId,
+        dataSelectorId = _this$props.dataSelectorId,
         needResponsive = _this$props.needResponsive,
         borderColor = _this$props.borderColor,
         textBoxClass = _this$props.textBoxClass,
@@ -146,7 +147,8 @@ var MultiSelectWithAvatarComponent = /*#__PURE__*/function (_MultiSelectComponen
         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-title": isDisabled ? title : null,
-        onClick: this.handleInputFocus
+        onClick: this.handleInputFocus,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/MultiSelect/props/defaultProps.js

@@ -40,7 +40,8 @@ var AdvancedGroupMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   palette: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedGroupMultiSelect'
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
 var AdvancedMultiSelect_defaultProps = {
@@ -71,7 +72,8 @@ var AdvancedMultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   customProps: {},
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'advancedMultiSelect'
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {
@@ -112,7 +114,8 @@ var MultiSelect_defaultProps = {
   isSearchClearOnSelect: true,
   needEffect: true,
   boxSize: 'default',
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelect'
 };
 exports.MultiSelect_defaultProps = MultiSelect_defaultProps;
 var MultiSelectHeader_defaultProps = {
@@ -145,7 +148,8 @@ var MultiSelectWithAvatar_defaultProps = {
   isBoxPaddingNeed: true,
   isSearchClearOnSelect: true,
   needEffect: true,
-  isLoading: false
+  isLoading: false,
+  dataSelectorId: 'multiSelectWithAvatar'
 };
 exports.MultiSelectWithAvatar_defaultProps = MultiSelectWithAvatar_defaultProps;
 var SelectedOptions_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -57,7 +57,8 @@ var AdvancedGroupMultiSelect_propTypes = {
   isSearchClearOnSelect: _propTypes["default"].bool,
   palette: _propTypes["default"].oneOf(['default', 'dark']),
   needEffect: true,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.AdvancedGroupMultiSelect_propTypes = AdvancedGroupMultiSelect_propTypes;
 var AdvancedMultiSelect_propTypes = {
@@ -141,7 +142,8 @@ var AdvancedMultiSelect_propTypes = {
     SuggestionsProps: _propTypes["default"].object,
     DropBoxProps: _propTypes["default"].object
   }),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;
 var EmptyState_propTypes = {
@@ -246,7 +248,8 @@ var MultiSelect_propTypes = {
   getFooter: _propTypes["default"].func,
   needEffect: _propTypes["default"].bool,
   boxSize: _propTypes["default"].string,
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.MultiSelect_propTypes = MultiSelect_propTypes;
 var MultiSelectHeader_propTypes = {
@@ -326,7 +329,8 @@ var MultiSelectWithAvatar_propTypes = {
   customChildrenClass: _propTypes["default"].string,
   isSearchClearOnSelect: _propTypes["default"].bool,
   disabledOptions: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  isLoading: _propTypes["default"].bool
+  isLoading: _propTypes["default"].bool,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.MultiSelectWithAvatar_propTypes = MultiSelectWithAvatar_propTypes;
 var SelectedOptions_propTypes = {

package/lib/Provider/AvatarSize.js

@@ -9,6 +9,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 var styleList = {
   small: _avatarsizesModule["default"].small,
   xsmall: _avatarsizesModule["default"].xsmall,
+  xxsmall: _avatarsizesModule["default"].xxsmall,
   medium: _avatarsizesModule["default"].medium,
   xmedium: _avatarsizesModule["default"].xmedium,
   large: _avatarsizesModule["default"].large,

package/lib/Ribbon/Ribbon.js

@@ -37,10 +37,12 @@ var Ribbon = /*#__PURE__*/function (_React$Component) {
         palette = _this$props.palette,
         size = _this$props.size,
         dataId = _this$props.dataId,
-        customClass = _this$props.customClass;
+        customClass = _this$props.customClass,
+        dataSelectorId = _this$props.dataSelectorId;
       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-id": dataId,
+        "data-selector-id": dataSelectorId
       }, type === 'sticker' ? /*#__PURE__*/_react["default"].createElement("span", {
         className: _RibbonModule["default"].after
       }) : null, children ? /*#__PURE__*/_react["default"].createElement("span", {

package/lib/Ribbon/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   text: 'Ribbon',
   type: 'default',
   dataId: 'ribbonComp',
-  customClass: ''
+  customClass: '',
+  dataSelectorId: 'ribbon'
 };
 exports.defaultProps = defaultProps;

package/lib/Ribbon/props/propTypes.js

@@ -13,6 +13,7 @@ var propTypes = {
   size: _propTypes["default"].oneOf(['small', 'medium', 'large', 'xlarge']),
   text: _propTypes["default"].string,
   type: _propTypes["default"].oneOf(['default', 'flag', 'plain', 'ribbon', 'box', 'stamp', 'sticker', 'tag']),
-  customClass: _propTypes["default"].string
+  customClass: _propTypes["default"].string,
+  dataSelectorId: _propTypes["default"].string
 };
 exports.propTypes = propTypes;

package/lib/Select/GroupSelect.js

@@ -565,7 +565,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
         i18nKeys = _this$props9.i18nKeys,
         htmlId = _this$props9.htmlId,
         iconOnHover = _this$props9.iconOnHover,
-        isLoading = _this$props9.isLoading;
+        isLoading = _this$props9.isLoading,
+        dataSelectorId = _this$props9.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -588,7 +589,8 @@ 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-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/Select.js

@@ -684,7 +684,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         customProps = _this$props11.customProps,
         autoComplete = _this$props11.autoComplete,
         ariaLabelledby = _this$props11.ariaLabelledby,
-        isLoading = _this$props11.isLoading;
+        isLoading = _this$props11.isLoading,
+        dataSelectorId = _this$props11.dataSelectorId;
       var _i18nKeys = i18nKeys,
         TextBoxIcon_i18n = _i18nKeys.TextBoxIcon_i18n,
         _i18nKeys$TextBox_all = _i18nKeys.TextBox_ally_label,
@@ -711,7 +712,8 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(isParentBased || isReadOnly || isDisabled ? _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-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/SelectWithAvatar.js

@@ -162,7 +162,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         i18nKeys = _this$props.i18nKeys,
         htmlId = _this$props.htmlId,
         needEffect = _this$props.needEffect,
-        isLoading = _this$props.isLoading;
+        isLoading = _this$props.isLoading,
+        dataSelectorId = _this$props.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -184,7 +185,8 @@ 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-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",

package/lib/Select/SelectWithIcon.js

@@ -353,7 +353,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
         iconClass = _this$props7.iconClass,
         i18nKeys = _this$props7.i18nKeys,
         htmlId = _this$props7.htmlId,
-        isLoading = _this$props7.isLoading;
+        isLoading = _this$props7.isLoading,
+        dataSelectorId = _this$props7.dataSelectorId;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -367,7 +368,8 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
       var ariaErrorId = this.getNextAriaId();
       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 : ''),
-        "data-title": isDisabled ? title : null
+        "data-title": isDisabled ? title : null,
+        "data-selector-id": dataSelectorId
       }, /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(className ? className : ''),
         onClick: isDisabled || isReadOnly ? null : this.togglePopup,

package/lib/Select/props/defaultProps.js

@@ -12,6 +12,7 @@ var Select_defaultProps = {
   autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
   autoSelectOnType: true,
   dataId: 'selectComponent',
+  dataSelectorId: 'select',
   dropBoxSize: 'small',
   isDefaultSelectValue: true,
   isDisabled: false,
@@ -46,6 +47,7 @@ var GroupSelect_defaultProps = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
+  dataSelectorId: 'groupSelect',
   isDefaultSelectValue: true,
   isDisabled: false,
   isReadOnly: false,
@@ -92,6 +94,7 @@ var SelectWithAvatar_defaultProps = {
   textField: 'text',
   valueField: 'id',
   dataId: 'selectWithAvatar',
+  dataSelectorId: 'selectWithAvatar',
   borderColor: 'default',
   isSearchClearOnClose: true,
   i18nKeys: {},
@@ -108,5 +111,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;